:root {
    --gw-ink: #16313d;
    --gw-muted: #62747b;
    --gw-paper: #fffdf7;
    --gw-panel: #ffffff;
    --gw-line: #dbe7e7;
    --gw-blue: #087f8c;
    --gw-blue-dark: #05616c;
    --gw-yellow: #ffc928;
    --gw-orange: #ef7d32;
    --gw-green: #2f9b68;
    --gw-red: #dc4f43;
    --gw-shadow: 0 18px 50px rgba(27, 70, 78, .13);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body.guess-who-body {
    margin: 0;
    min-width: 0;
    overflow-x: hidden;
    color: var(--gw-ink);
    background:
        radial-gradient(circle at 8% 6%, rgba(255, 201, 40, .2), transparent 26rem),
        linear-gradient(180deg, #f0fbfa 0, #fffdf7 52%, #f7f4e9 100%);
    font-family: Inter, ui-rounded, "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.guess-who-body button,
.guess-who-body input { font: inherit; }
.guess-who-body button,
.guess-who-body a { -webkit-tap-highlight-color: transparent; }

.guess-who-page {
    width: 100%;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.guess-who-topbar {
    width: min(1180px, 100%);
    min-height: 68px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
}

.guess-who-back,
.guess-who-brand { color: inherit; text-decoration: none; }
.guess-who-back {
    width: max-content;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    color: var(--gw-muted);
}
.guess-who-brand { display: flex; align-items: center; gap: 9px; font-weight: 950; letter-spacing: -.03em; }
.guess-who-brand svg {
    width: 38px; height: 38px; padding: 6px; color: white; background: var(--gw-blue); border-radius: 12px;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.guess-who-brand span { display: grid; font-size: 15px; line-height: 1; }
.guess-who-brand small { margin-bottom: 4px; color: var(--gw-blue); font-size: 9px; letter-spacing: .16em; }
.guess-who-icon-button {
    justify-self: end;
    width: 44px; height: 44px; padding: 10px; border: 1px solid var(--gw-line); border-radius: 50%;
    color: var(--gw-blue); background: var(--gw-panel); cursor: pointer;
}
.guess-who-icon-button svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guess-who-icon-button[aria-pressed="false"] { color: #88979b; }

.guess-who-screen { width: min(1180px, 100%); margin: 0 auto; }
.guess-who-entry { padding: 28px 0 42px; text-align: center; }
.guess-who-eyebrow { margin: 0 0 8px; color: var(--gw-blue); font-size: 12px; font-weight: 950; letter-spacing: .16em; }
.guess-who-entry h1,
.guess-who-lobby h1,
.guess-who-result h1 { margin: 0; font-size: clamp(42px, 9vw, 76px); line-height: .98; letter-spacing: -.055em; }
.guess-who-lead { max-width: 650px; margin: 14px auto 28px; color: var(--gw-muted); font-size: clamp(16px, 2vw, 20px); line-height: 1.55; }

.guess-who-hero-art { position: relative; width: 230px; height: 110px; margin: 6px auto 24px; }
.guess-who-hero-art > div { position: absolute; bottom: 0; width: 78px; filter: drop-shadow(0 10px 10px rgba(33, 70, 73, .12)); }
.guess-who-hero-art > div:nth-child(1) { left: 4px; transform: rotate(-7deg); }
.guess-who-hero-art > div:nth-child(2) { left: 76px; z-index: 2; width: 84px; }
.guess-who-hero-art > div:nth-child(3) { right: 0; transform: rotate(7deg); }
.guess-who-hero-art .guess-who-portrait { width: 100%; display: block; border: 4px solid white; border-radius: 17px; }
.guess-who-hero-art > span {
    position: absolute; right: -9px; top: -7px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; color: var(--gw-ink); background: var(--gw-yellow); font-size: 25px; font-weight: 950; transform: rotate(9deg);
}

.guess-who-entry-grid { display: grid; gap: 16px; width: min(820px, 100%); margin: 0 auto; text-align: left; }
.guess-who-entry-card,
.guess-who-lobby-card,
.guess-who-result-card {
    position: relative; overflow: hidden; padding: 24px; border: 1px solid rgba(8, 127, 140, .14); border-radius: 24px;
    background: rgba(255, 255, 255, .92); box-shadow: var(--gw-shadow);
}
.guess-who-entry-card { display: flex; flex-direction: column; }
.guess-who-entry-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--gw-blue); }
.guess-who-entry-card:nth-child(2)::before { background: var(--gw-yellow); }
.guess-who-step { color: var(--gw-blue); font-size: 12px; font-weight: 950; letter-spacing: .13em; }
.guess-who-entry-card h2 { margin: 7px 0 3px; font-size: 24px; letter-spacing: -.035em; }
.guess-who-entry-card p { min-height: 42px; margin: 0 0 17px; color: var(--gw-muted); line-height: 1.45; }
.guess-who-entry-card label { margin: 12px 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.guess-who-entry-card input {
    width: 100%; min-height: 52px; padding: 0 15px; border: 2px solid var(--gw-line); border-radius: 13px;
    outline: none; color: var(--gw-ink); background: #fbfefd; font-size: 16px; transition: border .15s, box-shadow .15s;
}
.guess-who-entry-card input:focus { border-color: var(--gw-blue); box-shadow: 0 0 0 4px rgba(8, 127, 140, .12); }
.guess-who-code-input { text-transform: uppercase; letter-spacing: .22em; font-weight: 950; }
.guess-who-button {
    min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    color: white; text-decoration: none; font-weight: 950; letter-spacing: .035em; cursor: pointer; transition: transform .15s, filter .15s, box-shadow .15s;
}
.guess-who-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.04); }
.guess-who-button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.guess-who-button:disabled { opacity: .45; cursor: not-allowed; }
.guess-who-button.primary { margin-top: 20px; background: var(--gw-blue); box-shadow: 0 9px 20px rgba(8, 127, 140, .24); }
.guess-who-button.secondary { margin-top: 20px; color: var(--gw-ink); background: var(--gw-yellow); box-shadow: 0 9px 20px rgba(204, 155, 0, .2); }
.guess-who-button.ghost { color: var(--gw-blue); background: #e7f4f3; }
.guess-who-button.danger { background: var(--gw-red); }
.guess-who-entry-note { margin: 24px 0 0; color: var(--gw-muted); font-size: 13px; font-weight: 700; }
.guess-who-entry-note span { color: var(--gw-green); }

.guess-who-lobby { padding: 40px 0; }
.guess-who-lobby-card { width: min(610px, 100%); margin: 0 auto; padding: clamp(25px, 5vw, 48px); text-align: center; }
.guess-who-lobby h1 { font-size: clamp(34px, 7vw, 52px); }
.guess-who-room-code { margin: 27px 0; padding: 20px; border-radius: 18px; color: white; background: var(--gw-blue); }
.guess-who-room-code span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .16em; opacity: .78; }
.guess-who-room-code strong { display: block; margin: 7px 0 11px; font-size: clamp(40px, 13vw, 58px); letter-spacing: .2em; line-height: 1; text-indent: .2em; }
.guess-who-room-code button { min-height: 38px; padding: 0 15px; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; color: white; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 900; cursor: pointer; }
.guess-who-player-list { display: grid; gap: 9px; }
.guess-who-player-row { min-height: 56px; padding: 9px 12px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--gw-line); border-radius: 14px; background: #fbfefd; text-align: left; }
.guess-who-player-avatar { width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--gw-orange); font-weight: 950; }
.guess-who-player-row:nth-child(2) .guess-who-player-avatar { background: var(--gw-blue); }
.guess-who-player-row strong { flex: 1; }
.guess-who-player-row small { color: var(--gw-green); font-weight: 850; }
.guess-who-player-row.empty { border-style: dashed; color: var(--gw-muted); }
.guess-who-player-row.empty .guess-who-player-avatar { color: var(--gw-muted); background: #e9efee; }
.guess-who-lobby-status { color: var(--gw-muted); }
.guess-who-lobby-card > .guess-who-button { width: 100%; }
.guess-who-text-button { margin-top: 16px; border: 0; color: var(--gw-muted); background: transparent; text-decoration: underline; cursor: pointer; }

.guess-who-game { padding: 12px 0 108px; }
.guess-who-game-status { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: stretch; }
.guess-who-opponent,
.guess-who-turn-pill,
.guess-who-secret-mini { border: 1px solid var(--gw-line); background: rgba(255,255,255,.94); box-shadow: 0 6px 20px rgba(33,70,73,.07); }
.guess-who-opponent { padding: 10px 13px; border-radius: 15px; display: grid; min-width: 0; }
.guess-who-opponent span,
.guess-who-secret-mini > span:first-child,
.guess-who-turn-pill span { color: var(--gw-muted); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.guess-who-opponent strong { overflow: hidden; text-overflow: ellipsis; }
.guess-who-opponent small { display: flex; align-items: center; gap: 5px; color: var(--gw-green); font-size: 10px; font-weight: 850; }
.guess-who-opponent small i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.guess-who-turn-pill { grid-column: 1 / -1; grid-row: 2; padding: 10px 16px; border-radius: 14px; text-align: center; }
.guess-who-turn-pill strong { display: block; margin-top: 2px; color: var(--gw-blue); font-size: 15px; }
.guess-who-turn-pill.is-waiting strong { color: var(--gw-orange); }
.guess-who-secret-mini { min-width: 100px; padding: 5px 8px; border-radius: 15px; display: grid; grid-template-columns: 35px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 7px; color: var(--gw-ink); cursor: pointer; }
.guess-who-secret-mini > span:first-child { grid-column: 2; text-align: left; }
.guess-who-secret-mini strong { grid-column: 2; overflow: hidden; text-align: left; text-overflow: ellipsis; }
.guess-who-secret-thumb { grid-row: 1 / 3; }
.guess-who-secret-thumb svg { width: 35px; display: block; border-radius: 8px; }

.guess-who-event { margin: 11px 0; padding: 11px 16px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; background: #e4f5ec; color: #14643f; animation: gw-pop .25s ease both; }
.guess-who-event.is-no { color: #8e2823; background: #fde9e6; }
.guess-who-event span { font-size: 10px; font-weight: 950; letter-spacing: .13em; }
.guess-who-event strong { font-size: 20px; }
@keyframes gw-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.guess-who-question-card { margin: 11px 0; padding: 17px; border: 2px solid rgba(8,127,140,.22); border-radius: 18px; background: #fff; text-align: center; }
.guess-who-question-card > p { margin: 0 0 5px; color: var(--gw-blue); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.guess-who-question-card blockquote { margin: 0; font-size: clamp(18px, 5vw, 25px); font-weight: 900; }
.guess-who-answer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.guess-who-answer-actions button { min-height: 54px; border: 0; border-radius: 13px; color: white; font-size: 20px; font-weight: 950; cursor: pointer; }
.guess-who-answer-actions .yes { background: var(--gw-green); }
.guess-who-answer-actions .no { background: var(--gw-red); }
.guess-who-answer-actions button.is-not-answer { opacity: .32; }
.guess-who-question-card small { display: block; margin-top: 9px; color: var(--gw-muted); }

.guess-who-board-heading { margin: 20px 2px 10px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.guess-who-board-heading p { margin: 0; color: var(--gw-blue); font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.guess-who-board-heading h2 { margin: 1px 0 0; font-size: 23px; letter-spacing: -.035em; }
.guess-who-remaining { grid-column: 2; grid-row: 1; justify-self: end; color: var(--gw-muted); font-size: 12px; }
.guess-who-remaining strong { color: var(--gw-ink); font-size: 19px; }
.guess-who-history-button { grid-column: 1 / -1; min-height: 40px; padding: 0 12px; border: 1px solid var(--gw-line); border-radius: 11px; display: inline-flex; justify-self: start; align-items: center; gap: 7px; color: var(--gw-muted); background: white; font-weight: 800; cursor: pointer; }
.guess-who-history-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guess-who-history-button span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; color: white; background: var(--gw-blue); font-size: 10px; }

.guess-who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; perspective: 900px; }
.guess-who-character-card {
    min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 13px; overflow: hidden; position: relative;
    background: white; box-shadow: 0 5px 13px rgba(28,64,70,.12); cursor: pointer; transform-origin: 50% 100%;
    transition: transform .2s ease, filter .2s ease, opacity .2s ease, border-color .15s;
}
.guess-who-character-card:hover { transform: translateY(-3px); }
.guess-who-character-card:active { transform: scale(.97); }
.guess-who-character-card svg { display: block; width: 100%; }
.guess-who-character-card > strong { display: block; padding: 7px 2px 8px; color: var(--gw-ink); background: white; font-size: clamp(11px, 3.1vw, 15px); line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guess-who-card-overlay {
    position: absolute; inset: 0; display: grid; place-items: center; color: white; background: rgba(26,43,49,.72);
    font-size: 10px; font-weight: 950; letter-spacing: .08em; opacity: 0; transition: opacity .2s;
}
.guess-who-character-card.is-eliminated { transform: rotateX(-17deg) scale(.94); filter: grayscale(1); opacity: .58; }
.guess-who-character-card.is-eliminated .guess-who-card-overlay { opacity: 1; }
.guess-who-character-card.is-selected { border-color: var(--gw-orange); box-shadow: 0 0 0 3px rgba(239,125,50,.18); }

.guess-who-desktop-actions { display: none; }
.guess-who-mobile-actions {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border-top: 1px solid rgba(8,127,140,.14); background: rgba(255,253,247,.95); box-shadow: 0 -10px 30px rgba(27,70,78,.12); backdrop-filter: blur(14px);
}
.guess-who-mobile-actions button { min-height: 54px; border: 0; border-radius: 14px; font-weight: 950; letter-spacing: .035em; }
.guess-who-mobile-actions .ask { color: white; background: var(--gw-blue); }
.guess-who-mobile-actions .guess { color: var(--gw-ink); background: var(--gw-yellow); }
.guess-who-mobile-actions .finish { grid-column: 1 / -1; color: white; background: var(--gw-green); }
.guess-who-mobile-actions button:disabled { opacity: .4; }

.guess-who-sheet-backdrop { position: fixed; z-index: 70; inset: 0; background: rgba(16,39,47,.55); animation: gw-fade .18s ease; }
.guess-who-sheet {
    position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-height: min(86dvh, 760px); padding: 7px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-radius: 24px 24px 0 0; overflow-y: auto; overscroll-behavior: contain; background: var(--gw-panel); box-shadow: 0 -24px 55px rgba(10,39,46,.24); animation: gw-sheet .22s ease both;
}
@keyframes gw-fade { from { opacity: 0; } }
@keyframes gw-sheet { from { transform: translateY(100%); } }
.guess-who-sheet-handle { width: 48px; height: 5px; margin: 1px auto 10px; border-radius: 5px; background: #cbd8d8; }
.guess-who-sheet header { position: sticky; top: -7px; z-index: 2; padding: 7px 0 12px; display: flex; align-items: center; justify-content: space-between; background: inherit; }
.guess-who-sheet header p { margin: 0; color: var(--gw-blue); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.guess-who-sheet h2 { margin: 2px 0 0; font-size: 27px; letter-spacing: -.04em; }
.guess-who-sheet header > button,
.guess-who-secret-popover > button { width: 44px; height: 44px; border: 0; border-radius: 50%; color: var(--gw-muted); background: #edf3f2; font-size: 28px; cursor: pointer; }
.guess-who-question-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.guess-who-question-tabs::-webkit-scrollbar { display: none; }
.guess-who-question-tabs button { min-height: 40px; padding: 0 14px; border: 1px solid var(--gw-line); border-radius: 20px; color: var(--gw-muted); background: white; font-size: 12px; font-weight: 900; white-space: nowrap; }
.guess-who-question-tabs button.is-active { border-color: var(--gw-blue); color: white; background: var(--gw-blue); }
.guess-who-question-list { display: grid; gap: 8px; margin-top: 14px; }
.guess-who-question-option { min-height: 56px; padding: 10px 13px; border: 1px solid var(--gw-line); border-radius: 14px; display: flex; align-items: center; gap: 10px; color: var(--gw-ink); background: #fbfefd; text-align: left; font-weight: 850; cursor: pointer; }
.guess-who-question-option::before { content: "?"; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--gw-blue); background: #dff2f1; font-size: 18px; font-weight: 950; }
.guess-who-question-option small { margin-left: auto; color: var(--gw-orange); font-size: 9px; font-weight: 950; white-space: nowrap; }
.guess-who-sheet-copy { margin: 0 0 13px; color: var(--gw-muted); line-height: 1.45; }
.guess-who-guess-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guess-who-guess-option { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; color: var(--gw-ink); background: white; box-shadow: 0 4px 13px rgba(28,64,70,.11); font-weight: 900; }
.guess-who-guess-option svg { display: block; width: 100%; }
.guess-who-guess-option span { display: block; padding: 6px; }
.guess-who-confirm { position: absolute; z-index: 3; inset: 0; padding: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; text-align: center; }
.guess-who-confirm > div:first-child { width: min(180px, 48vw); }
.guess-who-confirm svg { width: 100%; border-radius: 18px; }
.guess-who-confirm p { margin: 16px 0 3px; font-size: 22px; }
.guess-who-confirm > small { color: var(--gw-red); font-weight: 800; }
.guess-who-confirm > div:last-child { width: min(420px, 100%); margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.guess-who-confirm .guess-who-button { margin: 0; }
.guess-who-history { margin: 0; padding: 0; list-style: none; }
.guess-who-history li { padding: 13px 2px; display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid var(--gw-line); font-weight: 750; }
.guess-who-history li span { color: var(--gw-green); font-weight: 950; }
.guess-who-history li .question-copy { color: var(--gw-ink); font-weight: 750; }
.guess-who-history li.is-no span { color: var(--gw-red); }
.guess-who-history li.is-no .question-copy { color: var(--gw-ink); }
.guess-who-history .empty { display: block; color: var(--gw-muted); text-align: center; }

.guess-who-secret-popover { position: fixed; z-index: 80; inset: 50% auto auto 50%; width: min(310px, calc(100% - 32px)); padding: 20px; transform: translate(-50%, -50%); border-radius: 24px; background: white; box-shadow: 0 25px 80px rgba(10,39,46,.35); text-align: center; }
.guess-who-secret-popover::before { content: ""; position: fixed; z-index: -1; inset: -100vmax; background: rgba(16,39,47,.55); }
.guess-who-secret-popover > button { position: absolute; right: 10px; top: 10px; }
.guess-who-secret-popover > p { margin: 0 0 10px; color: var(--gw-blue); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.guess-who-secret-popover > div { width: 190px; margin: auto; }
.guess-who-secret-popover svg { width: 100%; border-radius: 20px; }
.guess-who-secret-popover > strong { display: block; margin-top: 10px; font-size: 27px; }

.guess-who-result { padding: 30px 0; }
.guess-who-result-card { width: min(590px, 100%); margin: 0 auto; padding: clamp(25px, 6vw, 46px); text-align: center; }
.guess-who-result h1 { font-size: clamp(39px, 10vw, 61px); }
.guess-who-result-card > p:not(.guess-who-eyebrow) { color: var(--gw-muted); font-size: 17px; }
.guess-who-result-character { width: 170px; margin: 22px auto; }
.guess-who-result-character svg { width: 100%; border-radius: 19px; box-shadow: 0 10px 24px rgba(28,64,70,.16); }
.guess-who-result-character strong { display: block; margin-top: 7px; font-size: 23px; }
.guess-who-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 18px 0; }
.guess-who-stat { padding: 13px 7px; border-radius: 13px; background: #eef7f5; }
.guess-who-stat span { display: block; color: var(--gw-muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.guess-who-stat strong { display: block; margin-top: 3px; font-size: 20px; }
.guess-who-rematch-status { margin: 10px 0; color: var(--gw-muted); font-size: 13px; }
.guess-who-result-card > .guess-who-button { width: 100%; margin-top: 9px; }

.guess-who-toast { position: fixed; z-index: 100; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100% - 28px); padding: 11px 16px; transform: translateX(-50%); border-radius: 12px; color: white; background: #173d46; box-shadow: 0 10px 28px rgba(0,0,0,.2); font-weight: 800; text-align: center; }
.guess-who-connection-banner { position: fixed; z-index: 65; inset: auto 14px calc(83px + env(safe-area-inset-bottom)); padding: 13px 16px; border: 1px solid #f1c8a6; border-radius: 14px; color: #754016; background: #fff3df; box-shadow: var(--gw-shadow); }
.guess-who-connection-banner strong,
.guess-who-connection-banner span { display: block; }
.guess-who-connection-banner span { font-size: 12px; }
.guess-who-connection-banner button { margin-top: 8px; padding: 6px 0; border: 0; color: inherit; background: transparent; text-decoration: underline; font-weight: 850; }

body.dark-mode.guess-who-body {
    --gw-ink: #eef9f7; --gw-muted: #a9bcbd; --gw-paper: #10282e; --gw-panel: #17343b; --gw-line: #36545a;
    background: radial-gradient(circle at 8% 6%, rgba(255,201,40,.12), transparent 25rem), linear-gradient(180deg, #102a31, #102329);
}
body.dark-mode .guess-who-entry-card,
body.dark-mode .guess-who-lobby-card,
body.dark-mode .guess-who-result-card,
body.dark-mode .guess-who-opponent,
body.dark-mode .guess-who-turn-pill,
body.dark-mode .guess-who-secret-mini,
body.dark-mode .guess-who-question-card,
body.dark-mode .guess-who-history-button,
body.dark-mode .guess-who-character-card,
body.dark-mode .guess-who-character-card > strong,
body.dark-mode .guess-who-question-tabs button,
body.dark-mode .guess-who-question-option,
body.dark-mode .guess-who-guess-option,
body.dark-mode .guess-who-confirm,
body.dark-mode .guess-who-secret-popover { color: var(--gw-ink); background: var(--gw-panel); }
body.dark-mode .guess-who-entry-card input,
body.dark-mode .guess-who-player-row { color: var(--gw-ink); background: #122c32; }
body.dark-mode .guess-who-mobile-actions { background: rgba(16,35,41,.95); }
body.dark-mode .guess-who-stat { background: #204148; }
body.dark-mode .guess-who-button.ghost { color: #8ee0de; background: #21454c; }

@media (min-width: 390px) {
    .guess-who-grid,
    .guess-who-guess-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .guess-who-board-heading { grid-template-columns: 1fr auto auto; }
    .guess-who-history-button { grid-column: 2; grid-row: 1; }
    .guess-who-remaining { grid-column: 3; }
}

@media (min-width: 720px) {
    .guess-who-page { padding-inline: 24px; }
    .guess-who-entry-grid { grid-template-columns: 1fr 1fr; }
    .guess-who-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
    .guess-who-guess-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .guess-who-game-status { grid-template-columns: 1fr 1.25fr 1fr; }
    .guess-who-turn-pill { grid-column: 2; grid-row: 1; display: grid; place-content: center; }
    .guess-who-secret-mini { justify-self: end; min-width: 140px; }
    .guess-who-game { padding-bottom: 35px; }
    .guess-who-mobile-actions { display: none !important; }
    .guess-who-desktop-actions { position: sticky; bottom: 15px; z-index: 30; margin: 24px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(650px, 100%); }
    .guess-who-action { min-height: 62px; padding: 8px 18px; border: 0; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 950; cursor: pointer; box-shadow: 0 10px 25px rgba(23,61,70,.17); }
    .guess-who-action.ask { color: white; background: var(--gw-blue); }
    .guess-who-action.guess { color: var(--gw-ink); background: var(--gw-yellow); }
    .guess-who-action svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .guess-who-action span { display: grid; text-align: left; }
    .guess-who-action small { font-size: 8px; letter-spacing: .1em; opacity: .72; }
    .guess-who-desktop-actions > .finish { grid-column: 1 / -1; margin: 0; background: var(--gw-green); }
    .guess-who-sheet { left: 50%; right: auto; bottom: 25px; width: min(720px, calc(100% - 40px)); max-height: calc(100dvh - 50px); padding: 12px 24px 24px; transform: translateX(-50%); border-radius: 24px; animation-name: gw-modal; }
    @keyframes gw-modal { from { opacity: 0; transform: translate(-50%, 14px) scale(.98); } }
    .guess-who-sheet.compact { width: min(520px, calc(100% - 40px)); }
    .guess-who-confirm { border-radius: 24px; }
    .guess-who-character-card > strong { font-size: 14px; }
    .guess-who-toast { bottom: 28px; }
    .guess-who-connection-banner { inset: auto 24px 24px auto; width: 350px; }
}

@media (min-width: 1100px) {
    .guess-who-grid { gap: 13px; }
    .guess-who-character-card { border-radius: 16px; }
    .guess-who-character-card > strong { padding: 8px; font-size: 15px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .guess-who-page { padding-top: 0; }
    .guess-who-topbar { min-height: 50px; }
    .guess-who-brand svg { width: 32px; height: 32px; }
    .guess-who-game { padding-top: 3px; }
    .guess-who-game-status { grid-template-columns: 1fr 1.2fr 1fr; }
    .guess-who-turn-pill { grid-column: 2; grid-row: 1; }
    .guess-who-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .guess-who-board-heading { margin-top: 8px; }
    .guess-who-character-card > strong { padding: 4px 2px; font-size: 10px; }
    .guess-who-mobile-actions { display: grid !important; }
    .guess-who-desktop-actions { display: none; }
    .guess-who-sheet { max-height: 92dvh; }
}

@media (prefers-reduced-motion: reduce) {
    .guess-who-character-card,
    .guess-who-sheet,
    .guess-who-event { transition: none; animation: none; }
}