/* House of Turns game shell (game-shell.js): lobby, strip, banner, offers, panels, dialogs. Needs site.css + table.css. */
.icon-only svg { width: 20px; height: 20px; fill: currentColor; }
.sound-toggle.muted svg { opacity: .35; }
kbd { padding: 1px 6px; border-radius: 6px; background: var(--paper-deep); font: 600 .8em var(--body); }

/* ---------- Lobby ---------- */
.gs-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: 26px 0 20px; }
.gs-hero h1 { margin: 0; font: 800 clamp(3.6rem, 9vw, 6.6rem)/.9 var(--display); letter-spacing: -.05em; background: var(--title-ink, linear-gradient(100deg, var(--ink), var(--blue-light))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.gs-hero .lede { margin: 14px 0 0; font-size: 1.25rem; color: var(--ink-soft); }
.gs-start { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin: 14px 0 0; }
.gs-chips span { padding: 3px 10px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.gs-chips span.quirk { background: color-mix(in srgb, var(--yellow) 30%, var(--card)); box-shadow: none; }
.gs-join { display: grid; grid-template-columns: minmax(0, 220px) auto; justify-content: start; gap: 10px; margin-top: 22px; }
.gs-join input { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.gs-join input::placeholder { letter-spacing: normal; text-transform: none; }
.gs-lobby-message { margin: 12px 0 0; color: var(--red-deep); font-weight: 600; }
.gs-scene { position: relative; aspect-ratio: 1.25; overflow: hidden; border-radius: 34px; box-shadow: var(--shadow); isolation: isolate; }
.gs-teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.gs-teaser { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 16px 18px; border: 0; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); text-align: left; transition: transform .15s; }
.gs-teaser:hover { transform: translateY(-3px) rotate(-.5deg); }
.gs-teaser span { grid-row: span 2; font-size: 1.8rem; }
.gs-teaser b { font: 700 1.15rem/1.2 var(--display); }
.gs-teaser small { color: var(--muted); font-size: .88rem; }
.gs-teaser.quirky { background: color-mix(in srgb, var(--yellow) 18%, var(--card)); }
.gs-teaser.quirky span { animation: gsWiggle 2s ease-in-out infinite; }
@keyframes gsWiggle { 50% { transform: scale(1.15) rotate(15deg); } }

/* ---------- Strip ---------- */
.gs-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.gs-code { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 2px dashed var(--line); border-radius: 999px; background: var(--card); }
.gs-code span { color: var(--muted); font-size: .85rem; }
.gs-code b { font-size: 1.1rem; letter-spacing: .18em; }
.gs-code i { font-style: normal; font-size: .8rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--paper-deep); }
.gs-code:hover i { background: var(--ink); color: var(--on-ink); }
.gs-banner { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); transition: background .3s, color .3s; }
.gs-banner p { margin: 0; font-weight: 700; }
.gs-banner-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-deep); }
.gs-banner.mine { background: var(--accent, var(--blue)); color: #fff; animation: gsPop .5s ease-out; }
.gs-banner.mine .gs-banner-icon { background: #fff; animation: gsWiggle 1.4s ease-in-out infinite; }
.gs-banner.win { background: var(--green); color: #fff; }
.gs-banner.lose { background: var(--ink); color: var(--on-ink); }
.gs-banner.alert { background: var(--red); color: #fff; animation: gsPop .5s ease-out; }
@keyframes gsPop { 40% { transform: scale(1.08); } }
.gs-timer { min-width: 42px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.15); font-variant-numeric: tabular-nums; text-align: center; }
.gs-timer.low { background: var(--yellow); color: #1f2233; animation: gsPop .5s ease-in-out infinite; }
.gs-leave { border: 0; background: none; color: var(--muted); font-weight: 600; padding: 8px 12px; border-radius: 999px; }
.gs-leave:hover { color: var(--red-deep); background: #fde7e4; }
.gs-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 12px 16px; border-radius: 16px; background: var(--card-alt); border: 2px solid var(--yellow); font-weight: 600; animation: gsPop .3s ease-out; }
.gs-alert p { margin: 0; }
.gs-alert div { display: flex; gap: 8px; }
.gs-alert button { min-height: 40px; padding: 8px 16px; font-size: .92rem; }

/* ---------- Layout ---------- */
.gs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.gs-main { min-width: 0; padding: 20px; border-radius: 28px; background: var(--card); box-shadow: var(--shadow); }
.gs-side { display: grid; gap: 16px; }
.card { padding: 18px 20px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.gs-card h3 { margin: 0 0 12px; font: 700 1.2rem/1.2 var(--display); }
.gs-waiting { display: grid; justify-items: center; gap: 6px; margin: 16px auto 0; padding: 18px; max-width: 360px; border-radius: 20px; background: var(--card-alt); text-align: center; }
.gs-waiting strong { font: 800 2.2rem/1 var(--display); letter-spacing: .12em; }
.gs-waiting p:last-child { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.gs-under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.gs-tool { padding: 9px 14px; border: 0; border-radius: 999px; background: var(--paper); font-weight: 700; font-size: .9rem; color: var(--ink-soft); transition: background .15s, transform .15s; }
.gs-tool:hover:not(:disabled) { background: var(--paper-deep); color: var(--ink); transform: translateY(-1px); }
.gs-tool:disabled { opacity: .45; cursor: not-allowed; }
.gs-tool.subtle { background: none; }
.gs-keys { margin: 0 0 0 auto; color: var(--muted); font-size: .8rem; }

/* A player's row: name, colour, clock, captures. */
.gs-player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; transition: background .25s, box-shadow .25s; }
.gs-player + .gs-player { margin-top: 6px; }
.gs-player.active { background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent, var(--blue)); }
.gs-player b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gs-player small { color: var(--muted); font-size: .8rem; }
.gs-clock { min-width: 64px; padding: 6px 10px; border-radius: 10px; background: var(--paper-deep); font: 700 1.05rem var(--body); font-variant-numeric: tabular-nums; text-align: center; }
.gs-clock.running { background: var(--ink); color: var(--on-ink); }
.gs-clock.low { background: var(--red); color: #fff; animation: gsPop .8s ease-in-out infinite; }

/* Stamp across the board */
.gs-stamp { position: absolute; left: 50%; top: 50%; z-index: 20; padding: 8px 20px; border: 4px solid #fff; border-radius: 14px; background: var(--red); color: #fff; font: 800 clamp(1.4rem, 4vw, 2.4rem)/1 var(--display); white-space: nowrap; pointer-events: none; transform: translate(-50%, -50%) rotate(-8deg); animation: gsStamp 1.6s cubic-bezier(.2, 1.6, .4, 1) forwards; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.gs-stamp.soft { background: var(--ink); color: var(--on-ink); border-color: var(--on-ink); }
@keyframes gsStamp { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(.95); opacity: 0; } }

/* ---------- Dialogs ---------- */
.gs-rules-modal { width: min(520px, calc(100% - 28px)); }
.gs-set { margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 8px; }
.gs-set legend { margin-bottom: 8px; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gs-set.quirky legend::after { content: " ✨"; }
.gs-seg { display: grid; grid-template-columns: repeat(var(--count, 3), 1fr); gap: 6px; }
.gs-seg label { position: relative; }
.gs-seg input { position: absolute; inset: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } /* hidden, and kept inside its button so it can't widen the dialog */
.gs-seg span { display: grid; place-items: center; padding: 10px 6px; border-radius: 14px; background: var(--paper); font-weight: 800; cursor: pointer; transition: background .15s, transform .15s; }
.gs-seg small { font-weight: 600; font-size: .75rem; color: var(--muted); }
.gs-seg input:checked + span { background: var(--accent, var(--blue)); color: #fff; transform: translateY(-2px); }
.gs-seg input:checked + span small { color: rgba(255,255,255,.8); }
.gs-seg input:focus-visible + span { outline: 3px solid var(--blue-light); }
.gs-row-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-weight: 700; }
.gs-row-select select { padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-weight: 600; }
.gs-tick { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 14px; background: var(--paper); cursor: pointer; transition: background .15s; }
.gs-tick:hover { background: var(--paper-deep); }
.gs-tick input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent, var(--blue)); }
.gs-tick b { display: block; }
.gs-tick small { color: var(--muted); font-size: .85rem; }
.gs-tick.off { opacity: .45; }

.gs-how-list { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: how; }
.gs-how-list li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; counter-increment: how; }
.gs-how-list li::before { content: counter(how); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent, var(--blue)); color: #fff; font: 700 1rem var(--display); }
.gs-how-list span { color: var(--ink-soft); }
.gs-how .gs-chips { margin: 0 0 18px; }

.gs-result { position: fixed; width: min(460px, calc(100% - 28px)); text-align: center; overflow: hidden; }
.gs-result > *:not(.gs-confetti):not(.modal-close) { position: relative; z-index: 1; }
.gs-result-icon { font-size: 4rem; line-height: 1; animation: gsTrophy 1s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gsTrophy { from { transform: scale(0) rotate(-40deg); } }
.gs-result.lost .gs-result-icon { animation: gsTopple 1.6s ease-in-out; }
@keyframes gsTopple { 0% { transform: translateY(-40px); opacity: 0; } 40% { transform: none; opacity: 1; } 70% { transform: rotate(-14deg); } 100% { transform: rotate(0); } }
.gs-result h2 { margin: 10px 0 6px; }
.gs-result-sub { margin: 0 0 18px; color: var(--ink-soft); }
.gs-result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.gs-result-stats div { padding: 12px; border-radius: 16px; background: var(--paper); }
.gs-result-stats b { display: block; font: 800 1.6rem/1 var(--display); }
.gs-result-stats small { color: var(--muted); font-weight: 600; }
.gs-result-series { margin: 0; color: var(--muted); font-weight: 600; font-size: .9rem; }
.gs-result .table-actions { justify-content: center; }
.gs-result-wait { margin: 12px 0 0; padding: 10px; border-radius: 12px; background: var(--paper); font-weight: 600; }
.gs-confetti { position: absolute; inset: 0; pointer-events: none; }
.gs-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: gsConfetti 2.4s ease-in forwards; }
@keyframes gsConfetti { to { transform: translate(var(--dx), 520px) rotate(var(--r)); opacity: .2; } }

.gs-leaders { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.gs-leaders li { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--paper); font-weight: 600; }
.gs-leaders li.me { box-shadow: inset 0 0 0 2px var(--accent, var(--blue)); }
.gs-leaders li b { font-family: var(--display); }
.gs-leaders li small { color: var(--muted); }
.gs-leaders .gs-empty { display: block; text-align: center; color: var(--muted); }
footer a.text-button { text-decoration: none; }

@media (max-width: 960px) {
  .gs-hero { grid-template-columns: 1fr; gap: 20px; }
  .gs-scene { order: -1; width: 100%; aspect-ratio: auto; height: 240px; }
  .gs-layout { grid-template-columns: 1fr; }
  .gs-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .gs-main { padding: 12px; border-radius: 22px; }
  .gs-side { grid-template-columns: 1fr; }
  .gs-strip { flex-wrap: wrap; }
  .gs-banner { order: -1; width: 100%; justify-content: center; }
  .gs-keys { display: none; }
  .gs-scene { height: 190px; }
  .gs-teasers { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Waiting room for tables of 3+ (Last Card, Hold'em, Blackjack): the code, who's in, the host's deal button ---------- */
.lc-lobby { display: grid; justify-items: center; gap: 8px; padding: 20px 10px 26px; text-align: center; }
.lc-lobby strong { font: 800 2.4rem/1 var(--display); letter-spacing: .12em; }
.lc-seated { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; width: min(520px, 100%); margin: 14px 0 4px; padding: 0; list-style: none; }
.lc-seated li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--paper); font-weight: 600; text-align: left; animation: gsPop .3s ease-out; }
.lc-seated li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-seated li { min-height: 48px; }
.lc-seat-label { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.lc-seated li small { color: var(--muted); font-size: .74rem; font-weight: 600; }
.lc-seated li.empty { justify-content: center; background: none; box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); font-weight: 500; border-style: dashed; animation: none; }
.lc-lobby-note { margin: 4px 0; color: var(--ink-soft); }
.lc-avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--seat, var(--muted)); color: #fff; font: 800 .85rem/1 var(--body); text-shadow: 0 1px 1px rgba(0,0,0,.3); }

/* Waiting for the second player: the invite card floats over the board (Chess, Checkers) so it's seen straight away. */
.gs-main { position: relative; }
.gs-waiting.overlay { position: absolute; left: 50%; top: 110px; z-index: 6; width: min(360px, calc(100% - 32px)); margin: 0; background: var(--card); box-shadow: 0 24px 60px -12px rgba(0,0,0,.55), 0 0 0 1px var(--line); transform: translateX(-50%); animation: gsWaitIn .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes gsWaitIn { from { transform: translateX(-50%) translateY(20px) scale(.9); opacity: 0; } }
/* Salvo: you place ships while you wait, so the card sits above the boards in one row instead. */
.gs-waiting.compact { grid-template-columns: auto auto 1fr; grid-template-areas: "kicker code share" "note note note"; align-items: center; justify-items: start; gap: 4px 14px; max-width: none; margin: 0 0 14px; padding: 12px 16px; text-align: left; }
.gs-waiting.compact .kicker { grid-area: kicker; margin: 0; }
.gs-waiting.compact strong { grid-area: code; font-size: 1.6rem; }
.gs-waiting.compact button { grid-area: share; justify-self: end; }
.gs-waiting.compact p:last-child { grid-area: note; margin: 0; }
@media (max-width: 560px) { .gs-waiting.compact { grid-template-columns: 1fr auto; grid-template-areas: "kicker share" "code share" "note note"; } }
.lc-deal-now { display: block; margin: 8px auto 0; }

/* Keep square boards fully on screen in shorter desktop windows (phones and narrow screens size by width). */
@media (min-width: 900px) {
  .ch-board-frame, .ck-frame, .ux-frame, .dx-frame { width: min(100%, max(360px, calc(100dvh - 290px))); margin-inline: auto; }
}

/* Phones: two seats per row in waiting rooms, so trim the chips a little to fit names. */
@media (max-width: 480px) {
  .lc-seated li { gap: 6px; padding: 8px 10px; }
  .lc-seated .lc-avatar { width: 24px; height: 24px; font-size: .75rem; }
  .lc-seat-label b { font-size: .92rem; }
}

/* Phones: only the turn banner stays at the top. The room code and Leave move below the game,
   so the board starts higher up. (The strip's children join the page's own flow.) */
@media (max-width: 720px) {
  section:has(> .gs-strip > .gs-code) { display: flex; flex-wrap: wrap; align-items: center; }
  section:has(> .gs-strip > .gs-code) > * { flex: 0 0 100%; min-width: 0; }
  .gs-strip:has(> .gs-code) { display: contents; }
  .gs-strip:has(> .gs-code) .gs-banner { order: -1; flex: 0 0 100%; margin-bottom: 12px; }
  .gs-strip:has(> .gs-code) .gs-code, .gs-strip:has(> .gs-code) .gs-leave { order: 10; flex: 0 0 auto; margin-top: 16px; }
  .gs-strip:has(> .gs-code) .gs-leave { margin-left: auto; }
}