:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%; color: #202824; background: #f1f3f2;
  --ink: #202824; --muted: #59645d; --paper: #fff;
  --green: #285647; --line: #d5dbd7;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #2563a6; outline-offset: 2px;
}
.shell {
  position: relative;
  width: 100%; max-width: 393px; margin: auto; background: var(--paper);
  height: 100vh; height: min(100svh, 852px); height: min(100dvh, 852px);
  height: min(var(--viewport-height, 100dvh), 852px);
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); overflow: auto;
}
.brand {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; flex: none; border-bottom: 1px solid var(--line);
}
.brand a { font-size: 1rem; font-weight: 650; text-decoration: none; }
.view { flex: 1; min-height: 0; overflow: auto; padding: 20px 0 12px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-size: 1.375rem; font-weight: 650; line-height: 1.3; margin-bottom: 12px; }
h3 { font-size: 1rem; }
p { line-height: 1.5; color: var(--muted); }
.label { font-size: .8125rem; color: var(--muted); }
.actions { display: grid; gap: 10px; }
.primary, .secondary, .danger {
  min-height: 48px; width: 100%; border-radius: 5px; padding: 12px 16px; font-weight: 600;
}
.primary { border: 1px solid var(--green); background: var(--green); color: white; }
.secondary { border: 1px solid var(--line); background: white; }
.danger { border: 1px solid #963a31; background: #963a31; color: white; }
.text-button { background: none; border: 0; min-height: 44px; text-decoration: underline; font-size: .8125rem; padding: 8px; }
.back { margin: -8px 0 10px; padding-left: 0; }
.note { font-size: .8125rem; margin: 16px 0 0; }
.field { display: grid; gap: 8px; margin: 18px 0; font-size: .875rem; font-weight: 600; }
input, select {
  width: 100%; min-height: 48px; min-width: 0; padding: 11px 12px;
  border: 1px solid #99a49d; border-radius: 5px; background: white; color: var(--ink); font-size: 1rem;
}
.field small { font-size: .75rem; font-weight: 400; color: var(--muted); }
.error, #notice { color: #862e24; background: #fff1ec; padding: 10px; border-radius: 4px; font-size: .8125rem; }
#notice { margin-top: 8px; }
#notice:empty { display: none; }
.room-title { font-size: 1.125rem; margin: 8px 0; overflow-wrap: anywhere; }
.ticket { border-block: 1px solid var(--line); padding: 16px 0; margin: 15px 0; }
.ticket .label { margin-bottom: 6px; }
.ticket .text-button { padding-left: 0; }
.countdown { font-variant-numeric: tabular-nums; font-size: 1.75rem; margin: 12px 0 4px; }
.people { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0; }
.chip { font-size: .8125rem; overflow-wrap: anywhere; }
.waiting-note { margin-top: 18px; font-size: .8125rem; }
.game { padding-top: 12px; }
.game-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.player { font-weight: 650; font-size: 1rem; overflow-wrap: anywhere; }
.room-small { font-size: .6875rem; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.timer { font-variant-numeric: tabular-nums; padding: 8px 0 8px 10px; font-size: 1.125rem; white-space: nowrap; }
.status-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; font-size: .6875rem; color: var(--muted); }
.connection.offline { color: #963a31; font-weight: 600; }
.board-labels { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-size: .75rem; margin-bottom: 6px; font-weight: 650; }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(4.25rem, auto); gap: 5px; }
.cell {
  position: relative; min-width: 0; min-height: 4.25rem; display: grid; place-items: center;
  border: 1px solid #bdc8c0; border-radius: 4px; background: white; padding: 6px 3px;
  text-align: center; line-height: 1.15; font-size: .75rem; font-weight: 500;
  overflow-wrap: anywhere; hyphens: auto; touch-action: manipulation;
}
.cell.marked { background: var(--green); color: white; border-color: var(--green); }
.cell.free { background: #e8edea; color: var(--ink); border-color: #a4b2a9; font-size: .6875rem; font-weight: 650; }
.cell.pending { border: 2px dashed #946016; background: #fff7e8; color: var(--ink); }
.cell.winning { box-shadow: inset 0 0 0 3px #c5e3d2; }
.game-hint { font-size: .75rem; text-align: center; margin: 10px 0 2px; }
.game-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.finished { padding: 10px 12px; margin-bottom: 12px; border-left: 3px solid var(--green); background: #edf4ef; font-weight: 650; font-size: .875rem; overflow-wrap: anywhere; }
.finished small { display: block; font-weight: 400; margin-top: 4px; }
dialog { max-width: calc(100vw - 32px); width: 355px; max-height: 85vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: white; padding: 24px; color: var(--ink); }
dialog::backdrop { background: #18251f66; }
dialog p, dialog li { font-size: .875rem; line-height: 1.5; }
dialog ul { padding-left: 20px; }
.confirm-actions { display: grid; gap: 8px; margin-bottom: 8px; }
@media (max-height: 700px) {
  .brand { min-height: 52px; }
  .view { padding-top: 12px; }
  .view.game { padding-top: 8px; padding-bottom: 4px; }
  .game-hint { margin-top: 7px; }
  .status-row { margin: 8px 0; }
}
@media (min-width: 500px) { body { display: grid; min-height: 100vh; place-items: center; } }

/* Result effects stay inside the dismissible announcement, away from card controls. */
.result-scene { position: relative; height: 190px; overflow: hidden; border-radius: 4px; margin: -8px -8px 20px; isolation: isolate; pointer-events: none; }
.party { background: #161d38; }
.disco-lights { position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent, #b778bc66, transparent 25%, #5798bb66, transparent 50%, #a3b87766, transparent 75%, #b778bc66); animation: disco-light-turn 9s linear infinite, disco-glow 4s ease-in-out infinite; }
.disco-cord { position: absolute; width: 2px; height: 26px; background: #a1b2cd; left: calc(50% - 1px); top: 0; }
.disco-ball { position: absolute; top: 25px; left: calc(50% - 44px); width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #8595af; box-shadow: 0 0 24px #b8cce144; }
.disco-tiles { position: absolute; inset: 0 -44px; background-color: #b2c0d4; background-image: repeating-linear-gradient(0deg, transparent 0 9px, #243549 9px 11px), repeating-linear-gradient(90deg, transparent 0 9px, #243549 9px 11px), repeating-conic-gradient(#dcecf3 0% 25%, #798ca8 0% 50%); background-size: auto, auto, 22px 22px; animation: disco-spin 3s linear infinite; }
.disco-ball::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 32% 26%, #ffffffbb, transparent 30%, #09122f55 70%, #09122fcc); }
.particles { position: absolute; inset: 0; }
.particles i { position: absolute; left: 4%; top: -24px; width: 7px; height: 12px; background: #e8c768; animation: confetti-fall 3.4s linear infinite; }
.particles i:nth-child(6n+2) { left: 21%; animation-delay: -1.8s; }
.particles i:nth-child(6n+3) { left: 39%; animation-delay: -.7s; }
.particles i:nth-child(6n+4) { left: 57%; animation-delay: -2.6s; }
.particles i:nth-child(6n+5) { left: 75%; animation-delay: -1.2s; }
.particles i:nth-child(6n) { left: 93%; animation-delay: -3s; }
.particles i:nth-child(3n) { background: #85c6ca; width: 5px; animation-duration: 4.1s; }
.particles i:nth-child(3n+1) { background: #ed98b5; animation-duration: 2.9s; }
.particles i:nth-child(n+7):nth-child(-n+12) { margin-left: 9px; animation-delay: -1.1s; }
.particles i:nth-child(n+13):nth-child(-n+18) { margin-left: -7px; animation-delay: -2.2s; }
.particles i:nth-child(n+19):nth-child(-n+24) { margin-left: 13px; animation-delay: -.4s; }
.particles i:nth-child(n+25):nth-child(-n+30) { margin-left: -12px; animation-delay: -3.6s; }
.particles i:nth-child(n+31) { margin-left: 5px; animation-delay: -1.5s; }
.rainy { background: linear-gradient(#b9c8d5, #e1e9ee); }
.rain-cloud { position: absolute; top: 40px; left: 26px; width: 150px; height: 45px; border-radius: 40px; background: #778b9d; z-index: 1; animation: cloud-drift 7s ease-in-out infinite alternate; }
.rain-cloud::before, .rain-cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.rain-cloud::before { width: 68px; height: 68px; top: -30px; left: 22px; }
.rain-cloud::after { width: 52px; height: 52px; top: -19px; right: 17px; }
.cloud-two { left: auto; right: 18px; top: 66px; transform: scale(.8); background: #8d9dab; animation-delay: -3s; }
.rainy .particles { top: 78px; }
.rainy .particles i { width: 2px; height: 15px; background: #4a789a; opacity: .65; animation-name: rain-fall; animation-duration: 1.1s; }
.rainy .particles i:nth-child(3n) { animation-duration: 1.4s; }
html:has(dialog:not([open])) .result-scene * { animation-play-state: paused; }
@keyframes confetti-fall { from { transform: translate(-9px,-10px) rotate(0deg); } to { transform: translate(13px,230px) rotate(540deg); } }
@keyframes rain-fall { from { transform: translate(6px,-20px) rotate(12deg); } to { transform: translate(-15px,150px) rotate(12deg); } }
@keyframes cloud-drift { from { translate: -5px 0; } to { translate: 5px 0; } }
@keyframes disco-spin { to { transform: translateX(22px); } }
@keyframes disco-light-turn { to { transform: rotate(360deg); } }
/* Slow, soft light pulses rather than rapid full-screen flashes. */
@keyframes disco-glow { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
/* Activity stays in the document flow below the board. */
.join-toast { color: var(--ink); text-align: center; font-size: .75rem; line-height: 1.4; overflow-wrap: anywhere; }
.join-toast[hidden] { display: none; }
.game-hint { min-height: 1.4em; }
.game-hint:has(.join-toast:not([hidden])) .hint-default { display: none; }
.room-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.room-heading strong { font-size: 1rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.room-heading > span { flex: 0 1 38%; font-size: .6875rem; text-align: right; overflow-wrap: anywhere; }
.round-label { font-size: .6875rem; font-weight: 400; color: var(--muted); }

.name-fields { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 12px; }
.name-fields .field { min-width: 0; }
.game-name-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-name-row strong { overflow-wrap: anywhere; }
#shuffle-name { flex: none; display: grid; place-items: center; width: 44px; padding: 8px; text-decoration: none; }
/* Inset focus rings stay visible inside the scrolling form. */
#entry input:focus-visible, #entry select:focus-visible, #entry button:focus-visible { outline-offset: -3px; }

#emoji-picker { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid #99a49d; border-radius: 5px; background: white; font-size: 1.5rem; }
.emoji-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin: 16px 0; }
.emoji-grid button { min-width: 0; min-height: 48px; padding: 4px; background: white; border: 1px solid var(--line); border-radius: 5px; font-size: 1.5rem; }
.emoji-grid button[aria-pressed="true"] { border: 2px solid var(--green); background: #edf4ef; }
@media (max-height: 650px) {
  .room-heading { margin-bottom: 2px; }
  .game .status-row { margin-block: 6px; }
}

.site-footer { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; border-top: 1px solid var(--line); min-height: 32px; font-size: .625rem; color: var(--muted); }
.site-footer nav { display: flex; gap: 12px; }
.site-footer a { display: inline-block; padding-block: 9px; }
.privacy-copy h2 { font-size: 1rem; margin-top: 24px; }
.privacy-copy p { font-size: .875rem; }
@media (max-height: 650px) {
  .game .board { grid-auto-rows: minmax(3.875rem, auto); }
  .game .cell { min-height: 3.875rem; }
  .game-actions .text-button { min-height: 40px; }
}

.feedback-dialog{width:min(440px,calc(100% - 28px));max-height:calc(100dvh - 40px);overflow:auto;border:2px solid var(--green);border-radius:16px;padding:22px;background:#fff;color:var(--ink);box-shadow:0 15px 60px #123c4740}
.feedback-dialog::backdrop{background:#123c4766}
.feedback-dialog form{display:grid;gap:10px}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dialog-heading h2{font-size:24px;line-height:1.2;margin:0;color:var(--green)}
.dialog-close{border:0;background:transparent;color:#596a75;font-size:28px;min-width:44px;min-height:44px;cursor:pointer}
.feedback-dialog>form>label{display:block;font:600 14px Arial,sans-serif;margin-top:5px}
.feedback-dialog textarea{width:100%;border:1px solid #91a099;border-radius:8px;padding:10px;font:16px/1.4 Arial,sans-serif;resize:vertical;color:var(--ink)}
.feedback-dialog .button{justify-self:start;margin-top:4px}
.star-rating{display:flex;gap:4px;width:max-content}
.star-rating label{position:relative;margin:0;cursor:pointer}
.star-rating input{position:absolute;opacity:0}
.star-rating label>span[aria-hidden]{display:block;font-size:34px;line-height:1;color:#cbd7c7}
.star-rating label:has(input:checked)>span[aria-hidden],.star-rating label:has(~label input:checked)>span[aria-hidden],.star-rating label:hover>span[aria-hidden],.star-rating label:has(~label:hover)>span[aria-hidden]{color:#efc92f}
.star-rating input:focus-visible+span{outline:3px solid var(--green);outline-offset:2px;border-radius:3px}
.feedback-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.feedback-confirmation{font:17px/1.5 Arial,sans-serif}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.site-footer { color: #71808a; font-family: Arial,sans-serif; }
.site-footer a { color: #596a75; text-underline-offset: 3px; }
.feedback-dialog form[hidden] { display:none; }
.feedback-dialog input[type=radio] { width: 1px; min-width: 0; min-height: 0; padding: 0; }
.feedback-dialog textarea:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
#feedback-error:empty { display:none; }
#feedback-error { color: #862e24; margin: 0; }

.feedback-dialog { max-height: calc(var(--viewport-height, 100dvh) - 32px); }