/* Shared visual language, applied to create-lobby first. */
#scribblescape-screen-lobby-config { background: rgba(20,16,12,.55); overflow-y:auto; padding:24px 16px; box-sizing:border-box; }
#scribblescape-screen-lobby-config .scribblescape-lobby-config { box-sizing:border-box; width:min(460px,100%); padding:28px; background:var(--ss-card); border:1px solid #8b7150; border-radius:12px 8px 12px 8px; box-shadow:inset 0 0 0 3px #211b16,0 16px 48px #0006; color:#e9dcc2; }
#scribblescape-screen-lobby-config .scribblescape-lobby-config-title { margin:0 0 8px; color:#f3d49b; font-size:30px; text-align:left; }
.scribblescape-config-intro { margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid #67523b; color:#ddc49b; font-size:16px; line-height:1.4; }
#scribblescape-screen-lobby-config .scribblescape-config-label { color:#e9dcc2; font-size:16px; margin:14px 0 8px; }
#scribblescape-screen-lobby-config .scribblescape-config-select { min-height:44px; padding:8px 12px; border:1px solid #806b50; border-radius:5px; background:var(--ss-input); color:#f3e4c8; font-size:17px; }
#scribblescape-screen-lobby-config .scribblescape-config-streamer-wrap { display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; padding:12px; background:var(--ss-raised); border:1px solid #655139; border-radius:6px; line-height:1.3; }
.scribblescape-config-option-copy strong { display:block; margin-bottom:4px; color:#f3d49b; }
.scribblescape-config-option-copy span { display:block; font-size:15px; color:#ddc49b; }
#scribblescape-screen-lobby-config .scribblescape-config-checkbox { margin-top:2px; border-color:#967b52; background:var(--ss-input); }
#scribblescape-screen-lobby-config .scribblescape-config-checkbox:checked { background:#cda766; }
#scribblescape-screen-lobby-config .btn { width:100%; min-height:44px; margin-bottom:0; border:1px solid #8b7150; border-radius:5px; background:var(--ss-secondary); color:#ecddbf; font-size:17px; box-shadow:inset 0 1px 0 #ffffff0a,0 2px 0 #19140f; }
#scribblescape-screen-lobby-config .btn:hover { background:#51402e; border-color:#c2a06a; }
#scribblescape-screen-lobby-config .scribblescape-join-play { min-height:50px; margin-top:20px; background:#365f2b; border-color:#80a552; color:#f4ecd6; font-size:23px; }
#scribblescape-screen-lobby-config .scribblescape-join-play:hover { background:#447737; }
#scribblescape-screen-lobby-config :is(button,input,select):focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
@media(max-height:760px) { #scribblescape-screen-lobby-config { align-items:flex-start; } }
@media(max-width:480px) { #scribblescape-screen-lobby-config .scribblescape-lobby-config { padding:22px; } }
.ss-dev-launcher { position:fixed; bottom:12px; right:12px; z-index:10050; padding:10px 14px; border:1px solid #b99a68; border-radius:6px; background:#241e18; color:#f1d49f; font:14px system-ui; cursor:pointer; }
.ss-dev-overlay { position:fixed; inset:0; z-index:10060; display:flex; flex-direction:column; background:#141210; color:#f3d49b; font:14px system-ui; }
.ss-dev-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 16px; border-bottom:1px solid #67523b; }
.ss-dev-toolbar label { display:flex; align-items:center; gap:6px; }
.ss-dev-toolbar :is(select,button) { color:#f1dfbd; background:#332a21; padding:8px; border:1px solid #8b7150; border-radius:4px; font:inherit; }
.ss-dev-toolbar small { color:#b8a68a; }
.ss-dev-stage { flex:1; min-height:0; display:flex; justify-content:center; overflow:auto; }
.ss-dev-stage iframe { width:100%; max-width:100%; height:100%; border:0; background:#29231c; flex-shrink:0; }

/* Neutral stone and parchment separate the warm surfaces. */
.scribblescape-body { --ss-card:#35291f; --ss-input:#161b18; --ss-raised:#3e402c; --ss-secondary:#4a3825; --ss-border:#b18a4f; --ss-ink:#ffe9bf; }
#scribblescape-join-modal .scribblescape-join-dialog { background:var(--ss-card); border-color:var(--ss-border); }
#scribblescape-join-modal .scribblescape-join-name { background:var(--ss-input); color:var(--ss-ink); }
#scribblescape-join-modal .btn:not(.scribblescape-join-play) { background:var(--ss-secondary); }
#scribblescape-join-modal .btn:not(.scribblescape-join-play):hover { background:#57503f; }
#scribblescape-join-modal .scribblescape-join-avatar-single { background:var(--ss-raised); }
#scribblescape-screen-lobby-config .scribblescape-lobby-config { border-color:var(--ss-border); }
#scribblescape-screen-join { background:rgba(20,16,12,.55); overflow-y:auto; padding:24px 16px; box-sizing:border-box; }
#scribblescape-screen-join .scribblescape-join-code { box-sizing:border-box; width:min(460px,100%); padding:28px; background:var(--ss-card); color:var(--ss-ink); border:1px solid var(--ss-border); border-radius:12px 8px 12px 8px; box-shadow:inset 0 0 0 3px #211b16,0 16px 48px #0006; }
#scribblescape-screen-join .scribblescape-sidebar-title { margin:0 0 8px; padding:0; color:#f3d49b; font-family:'Quill 8',Arial,sans-serif; font-size:30px; text-align:left; }
#scribblescape-screen-join .scribblescape-config-label { color:var(--ss-ink); font-size:16px; margin:0 0 8px; }
#scribblescape-screen-join .scribblescape-join-code-input { min-height:56px; margin-bottom:22px; padding:12px; border:1px solid var(--ss-border); border-radius:5px; background:var(--ss-input); color:var(--ss-ink); font-family:'RuneScape',Arial,sans-serif; font-size:24px; letter-spacing:.14em; text-align:center; text-transform:uppercase; }
#scribblescape-screen-join .scribblescape-join-code-input::placeholder { color:#b3ad9c; font-size:20px; letter-spacing:.08em; opacity:1; }
#scribblescape-screen-join .btn { min-height:44px; margin:0; border:1px solid var(--ss-border); border-radius:5px; background:var(--ss-secondary); color:var(--ss-ink); font-size:17px; box-shadow:inset 0 1px 0 #ffffff0a,0 2px 0 #19140f; }
#scribblescape-screen-join .btn:hover { background:#57503f; border-color:#c2a06a; }
#scribblescape-screen-join .scribblescape-join-play { min-height:50px; margin-bottom:10px; background:#365f2b; border-color:#80a552; color:#f4ecd6; font-size:23px; }
#scribblescape-screen-join .scribblescape-join-play:hover { background:#447737; }
#scribblescape-screen-join :is(button,input):focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
@media(max-width:480px) { #scribblescape-screen-join .scribblescape-join-code { padding:22px; } }
@media(max-height:480px) { #scribblescape-screen-join { align-items:flex-start; } }
/* Richer accents across all three polished screens. */
#scribblescape-join-modal .scribblescape-join-play {
    background:#365f2b;
    border-color:#80a552;
    color:#fff0cd;
}
#scribblescape-join-modal .scribblescape-join-play:hover { background:#447737; }
#scribblescape-join-modal .scribblescape-welcome-label { color:#f3d49b; }
#scribblescape-join-modal .scribblescape-join-name,
#scribblescape-join-modal .btn:not(.scribblescape-join-play),
#scribblescape-screen-lobby-config .scribblescape-config-select,
#scribblescape-screen-lobby-config .btn:not(.scribblescape-join-play) { border-color:var(--ss-border); }
/* Waiting room: invitation first, readiness second, leaving separate. */
#scribblescape-screen-lobby-wait { background:rgba(20,16,12,.55); padding:24px 16px; box-sizing:border-box; overflow-y:auto; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-wait { width:min(460px,100%); box-sizing:border-box; padding:28px; background:var(--ss-card); border:1px solid var(--ss-border); border-radius:12px 8px 12px 8px; color:var(--ss-ink); box-shadow:inset 0 0 0 3px #211b16,0 16px 48px #0006; }
#scribblescape-screen-lobby-wait .scribblescape-sidebar-title { margin:0 0 8px; padding:0; font:700 30px 'Quill 8',Arial,sans-serif; color:#f3d49b; text-align:left; }
.scribblescape-lobby-code-label { display:block; margin:0 0 8px; color:#f3d49b; font-size:16px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-wrap { margin-bottom:12px; }
#scribblescape-screen-lobby-wait :is(.scribblescape-lobby-code-mask,.scribblescape-lobby-code-value) { min-height:72px; padding:18px 12px; border:1px solid var(--ss-border); border-radius:6px; background:var(--ss-input); color:#ffe1a3; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-value { font-size:30px; letter-spacing:.22em; user-select:all; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-mask { font-size:19px; line-height:34px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-mask:hover { border-color:#edbd68; background:#20271f; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-wrap { margin:0 0 22px; text-align:center; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-game-link { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; box-sizing:border-box; border:1px solid var(--ss-border); border-radius:5px; background:var(--ss-secondary); color:var(--ss-ink); font-size:17px; text-decoration:none; box-shadow:0 2px 0 #19140f; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-game-link:hover { background:#5a432a; border-color:#edbd68; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-toast { display:block; margin:10px 0 0; color:#b3d488; font-size:15px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-toast[hidden] { display:none; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-toast-error { color:#f4a18c; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-player-count { padding:0; margin:4px 0 18px; background:none; border:0; border-radius:0; box-shadow:none; color:#ddc49b; text-align:center; font-size:17px; }
#scribblescape-screen-lobby-wait .scribblescape-join-play { min-height:50px; margin:0; border:1px solid #80a552; border-radius:5px; background:#365f2b; color:#fff0cd; font-size:23px; box-shadow:0 2px 0 #19140f; }
#scribblescape-screen-lobby-wait .scribblescape-join-play:hover { background:#447737; }
#scribblescape-screen-lobby-wait .scribblescape-join-play:disabled { background:#303c29; border-color:#66704e; color:#b8b79c; cursor:not-allowed; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-wait-msg { margin:14px 0 0; font-size:17px; line-height:1.4; color:#ddc49b; text-align:center; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-abandon-wrap { margin:22px 0 0; padding-top:16px; border-top:1px solid #715535; text-align:center; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-abandon-link { min-height:40px; padding:8px 16px; border:1px solid transparent; border-radius:5px; background:transparent; color:#e7a48c; font-size:16px; text-decoration:none; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-abandon-link:hover { background:#492c23; border-color:#a96950; color:#ffd4bd; }
#scribblescape-screen-lobby-wait :is(a,button,[role=button]):focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
@media(max-width:480px) { #scribblescape-screen-lobby-wait .scribblescape-lobby-wait { padding:22px; } }
@media(max-height:640px) { #scribblescape-screen-lobby-wait { align-items:flex-start; } }

/* Waiting-room hierarchy: the invite link first (it's how most people join),
   the lobby code as a quiet fallback, then who's here and Start. Start stays
   the only green, so the invite is the site's secondary brown. */
#scribblescape-screen-lobby-wait .scribblescape-sidebar-title { font-size:26px; margin-bottom:6px; }
#scribblescape-screen-lobby-wait .scribblescape-config-intro { font-size:15px; color:#c5ad8b; padding-bottom:0; border-bottom:0; margin-bottom:22px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-game-link {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    margin:0 0 20px;
    padding:10px 14px;
    box-sizing:border-box;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:#ffe9bf;
    font-size:21px;
    line-height:1;
    text-decoration:none;
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
    cursor:pointer;
}
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-game-link:hover { background:#5a432a; border-color:#edbd68; color:#fff0cd; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-label { font-size:14px; color:#c5ad8b; text-align:center; margin-bottom:7px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-wrap { margin-bottom:6px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-mask { min-height:44px; padding:8px 12px; font-size:16px; line-height:26px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-code-value { min-height:44px; font-size:26px; letter-spacing:.2em; padding:6px 12px; color:#ffe1a3; }
/* Holds only the Start error now, so it sits right above the player count. */
#scribblescape-screen-lobby-wait .scribblescape-lobby-copy-wrap { margin:0 0 16px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-player-count { margin:0 0 10px; font-size:16px; color:#d7c3a1; }
#scribblescape-screen-lobby-wait .scribblescape-join-play { min-height:54px; font-size:24px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-wait-msg { font-size:16px; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-abandon-wrap { margin-top:20px; padding-top:10px; border-top:0; }
#scribblescape-screen-lobby-wait .scribblescape-lobby-abandon-link { font-size:14px; color:#c38e79; min-height:36px; }
/* Guests have no Start button, so the waiting state is their anchor: a lit status
   plate rather than fine print. Inset fill keeps it from reading as pressable. */
#scribblescape-screen-lobby-wait .scribblescape-lobby-wait-msg:not(.creator-only) {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    box-sizing:border-box;
    min-height:54px;
    margin:6px 0 0;
    padding:12px 18px;
    border:1px solid #6d924f;
    border-radius:5px;
    background:rgba(72,110,54,.34);
    box-shadow:inset 0 0 0 1px #ffffff0d, inset 0 2px 6px #0000004d;
    color:#d8edb2;
    font-size:20px;
    line-height:1.25;
}
#scribblescape-screen-lobby-wait .scribblescape-lobby-wait-msg:not(.creator-only)::before {
    content:'';
    flex:none;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#b3dd82;
    box-shadow:0 0 8px #b3dd8299;
    animation:ss-wait-pulse 1.6s ease-in-out infinite;
}
@keyframes ss-wait-pulse {
    0%,100% { opacity:.3; transform:scale(.75); }
    50% { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce) {
    #scribblescape-screen-lobby-wait .scribblescape-lobby-wait-msg:not(.creator-only)::before { animation:none; opacity:.9; }
}

/* Pick a word + the streamer gate that precedes it: same card language as the
   lobby screens, with options large enough to hit under a ten-second timer. */
:is(.scribblescape-pick-word-modal,.scribblescape-streamer-confirm-modal) .scribblescape-pick-word-dialog {
    box-sizing:border-box;
    width:min(460px,92vw);
    padding:28px;
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 16px 48px #0006;
}
:is(.scribblescape-pick-word-modal,.scribblescape-streamer-confirm-modal) .scribblescape-pick-word-title {
    margin:0 0 6px;
    font-size:26px;
    color:#f3d49b;
}
:is(.scribblescape-pick-word-modal,.scribblescape-streamer-confirm-modal) .scribblescape-pick-word-subtitle {
    margin:0 0 20px;
    color:#c5ad8b;
    font-size:15px;
    line-height:1.45;
}
.scribblescape-pick-word-modal .scribblescape-pick-word-options { gap:12px; }
.scribblescape-pick-word-modal .scribblescape-pick-word-option {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    padding:12px 16px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:#2e2720;
    box-shadow:inset 0 1px 0 #ffffff08, 0 2px 0 #14110d;
    color:#f3e0b8;
    font-size:21px;
    line-height:1.2;
    transition:background .12s, border-color .12s, color .12s;
}
.scribblescape-pick-word-modal .scribblescape-pick-word-option:hover,
.scribblescape-pick-word-modal .scribblescape-pick-word-option:focus-visible {
    background:#2c4a24;
    border-color:#80a552;
    color:#eaf5d8;
}
.scribblescape-pick-word-modal .scribblescape-pick-word-option:active { transform:translateY(1px); box-shadow:inset 0 1px 0 #ffffff0a, 0 1px 0 #19140f; }
.scribblescape-pick-word-modal .scribblescape-pick-word-timer {
    top:14px;
    right:18px;
    color:#ffe1a3;
    font-size:clamp(17px,3vw,21px);
}
.scribblescape-streamer-confirm-modal .scribblescape-join-play {
    width:100%;
    min-height:54px;
    margin-top:4px;
    border:1px solid #80a552;
    border-radius:5px;
    background:#365f2b;
    color:#fff0cd;
    font-size:21px;
    box-shadow:inset 0 1px 0 #ffffff12, 0 2px 0 #19140f;
}
.scribblescape-streamer-confirm-modal .scribblescape-join-play:hover { background:#447737; }
:is(.scribblescape-pick-word-modal,.scribblescape-streamer-confirm-modal) button:focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }

/* Podium: card language, a stand that actually steps, and warm medals instead of
   the stock blue button. Places set [hidden] in JS, so undo the display:flex win. */
#scribblescape-screen-podium .panel {
    box-sizing:border-box;
    width:min(520px,92vw);
    padding:28px;
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 16px 48px #0006;
}
#scribblescape-screen-podium .scribblescape-podium-title,
#scribblescape-screen-podium .scribblescape-podium-winner-title {
    margin:0 0 24px;
    color:#f3d49b !important;
    font-size:28px;
    line-height:1.25;
    text-align:center;
}
#scribblescape-screen-podium .scribblescape-podium-stand {
    gap:14px;
    margin:0 0 4px;
    min-height:0;
    transform:none;
}
#scribblescape-screen-podium .scribblescape-podium-place {
    justify-content:flex-start;
    width:132px;
    /* Grow for wrapped names and the extra padding below the You badge. */
    height:auto;
    min-height:150px;
    min-width:0;
    padding:12px 10px 14px;
    border:1px solid #6c5638;
    border-radius:8px 6px 8px 6px;
    background:linear-gradient(#3f3123,#2c2118);
    box-shadow:inset 0 1px 0 #ffffff0d, 0 4px 0 #1c1611;
    transform:none;
}
#scribblescape-screen-podium .scribblescape-podium-place[hidden] { display:none !important; }
#scribblescape-screen-podium .scribblescape-podium-1st { min-height:182px; border-color:#e2b45c; box-shadow:inset 0 1px 0 #ffffff1a, 0 0 18px #e2b45c26, 0 4px 0 #1c1611; }
#scribblescape-screen-podium .scribblescape-podium-2nd { border-color:#b9bcc2; }
#scribblescape-screen-podium .scribblescape-podium-3rd { border-color:#b07a44; }
#scribblescape-screen-podium .scribblescape-podium-rank {
    margin-bottom:2px;
    font-size:14px;
    letter-spacing:.06em;
    text-transform:uppercase;
}
#scribblescape-screen-podium .scribblescape-podium-1st .scribblescape-podium-rank { color:#f0c56d; }
#scribblescape-screen-podium .scribblescape-podium-2nd .scribblescape-podium-rank { color:#d3d6dc; }
#scribblescape-screen-podium .scribblescape-podium-3rd .scribblescape-podium-rank { color:#d0955b; }
#scribblescape-screen-podium .scribblescape-podium-avatar { width:56px; height:56px; margin-top:auto; }
#scribblescape-screen-podium .scribblescape-podium-1st .scribblescape-podium-avatar { width:68px; height:68px; }
#scribblescape-screen-podium .scribblescape-podium-name {
    margin-top:8px;
    max-width:100%;
    color:var(--ss-ink);
    font-size:16px;
    overflow-wrap:anywhere;
}
#scribblescape-screen-podium .scribblescape-podium-score { margin-top:2px; color:#f0c56d; font-size:19px; }
#scribblescape-screen-podium .scribblescape-podium-rest {
    margin:20px 0 0;
    border-top:1px solid #5b4730;
    color:#d7c3a1;
    font-size:16px;
}
#scribblescape-screen-podium .scribblescape-podium-rest:empty { margin:0; border-top:0; }
#scribblescape-screen-podium .scribblescape-podium-rest li {
    padding:9px 4px;
    border-bottom:1px solid #4a3a28;
    text-align:center;
}
#scribblescape-screen-podium .scribblescape-podium-rest li:last-child { border-bottom:0; }
#scribblescape-screen-podium .scribblescape-podium-actions { gap:10px; margin-top:24px; }
#scribblescape-screen-podium .scribblescape-podium-actions .btn {
    min-height:46px;
    margin:0;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
    font-size:17px;
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
}
#scribblescape-screen-podium .scribblescape-podium-actions .btn:hover { background:#57503f; border-color:#c2a06a; }
#scribblescape-screen-podium .scribblescape-podium-actions .scribblescape-join-play {
    min-height:54px;
    border-color:#80a552;
    background:#365f2b;
    color:#fff0cd;
    font-size:24px;
}
#scribblescape-screen-podium .scribblescape-podium-actions .scribblescape-join-play:hover { background:#447737; border-color:#9dc26a; }
#scribblescape-screen-podium .btn:focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
@media(max-width:480px) {
    #scribblescape-screen-podium .panel { padding:22px; }
    #scribblescape-screen-podium .scribblescape-podium-stand { gap:8px; }
    #scribblescape-screen-podium .scribblescape-podium-place { width:100%; }
}

/* After the game: one clear primary, two quiet alternatives. */
#scribblescape-screen-postgame .panel {
    box-sizing:border-box;
    width:min(460px,92vw);
    padding:28px;
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 16px 48px #0006;
}
#scribblescape-screen-postgame .scribblescape-sidebar-title {
    margin:0 0 20px;
    padding:0;
    color:#f3d49b;
    font-size:26px;
    text-align:left;
}
#scribblescape-screen-postgame .btn {
    min-height:46px;
    margin:0 0 10px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
    font-size:17px;
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
}
#scribblescape-screen-postgame .btn:hover { background:#57503f; border-color:#c2a06a; }
#scribblescape-screen-postgame .btn:last-child { margin-bottom:0; }
#scribblescape-screen-postgame .scribblescape-join-play {
    min-height:54px;
    margin-bottom:16px;
    border-color:#80a552;
    background:#365f2b;
    color:#fff0cd;
    font-size:24px;
}
#scribblescape-screen-postgame .scribblescape-join-play:hover { background:#447737; border-color:#9dc26a; }
#scribblescape-screen-postgame .btn:focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }

/* Dead-end modals (join failed, lobby full, host left): same card, message given
   room to breathe, one way out. */
:is(.scribblescape-lobby-error-modal,.scribblescape-lobby-full-modal,.scribblescape-host-abandoned-modal) .scribblescape-join-dialog {
    box-sizing:border-box;
    width:min(440px,92vw);
    padding:28px;
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 16px 48px #0006;
    text-align:center;
}
:is(.scribblescape-lobby-error-modal,.scribblescape-lobby-full-modal,.scribblescape-host-abandoned-modal) .scribblescape-sidebar-title {
    margin:0 0 22px;
    padding:0;
    color:#f3d49b;
    font-size:23px;
    line-height:1.35;
    text-align:center;
}
:is(.scribblescape-lobby-error-modal,.scribblescape-lobby-full-modal,.scribblescape-host-abandoned-modal) .scribblescape-join-play {
    width:100%;
    min-height:50px;
    margin:0;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
    font-size:19px;
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
}
:is(.scribblescape-lobby-error-modal,.scribblescape-lobby-full-modal,.scribblescape-host-abandoned-modal) .scribblescape-join-play:hover { background:#57503f; border-color:#c2a06a; }
:is(.scribblescape-lobby-error-modal,.scribblescape-lobby-full-modal,.scribblescape-host-abandoned-modal) .btn:focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
:is(.scribblescape-lobby-error-modal,.scribblescape-lobby-full-modal,.scribblescape-host-abandoned-modal) .scribblescape-modal-body {
    margin:-12px 0 22px;
    color:#c5ad8b;
    font-size:16px;
    line-height:1.45;
}

/* Public matchmaking: same card, with the live status given the weight. */
#scribblescape-screen-matchmaking .panel {
    box-sizing:border-box;
    width:min(440px,92vw);
    padding:28px;
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 16px 48px #0006;
    text-align:center;
}
#scribblescape-screen-matchmaking .scribblescape-matchmaking-title {
    margin:0 0 16px;
    color:#f3d49b;
    font-size:26px;
}
#scribblescape-screen-matchmaking p {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    box-sizing:border-box;
    min-height:54px;
    margin:0 0 20px;
    padding:12px 18px;
    border:1px solid #6d924f;
    border-radius:5px;
    background:rgba(72,110,54,.34);
    box-shadow:inset 0 0 0 1px #ffffff0d, inset 0 2px 6px #0000004d;
    color:#d8edb2;
    font-size:18px;
    line-height:1.3;
}
#scribblescape-screen-matchmaking p::before {
    content:'';
    flex:none;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#b3dd82;
    box-shadow:0 0 8px #b3dd8299;
    animation:ss-wait-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce) {
    #scribblescape-screen-matchmaking p::before { animation:none; opacity:.9; }
}
#scribblescape-screen-matchmaking .scribblescape-matchmaking-cancel {
    width:100%;
    min-height:46px;
    margin:0;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
    font-size:17px;
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
}
#scribblescape-screen-matchmaking .scribblescape-matchmaking-cancel:hover { background:#57503f; border-color:#c2a06a; }
#scribblescape-screen-matchmaking .btn:focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
@media(max-width:480px) {
    #scribblescape-screen-lobby-wait .scribblescape-lobby-wait-msg:not(.creator-only) { font-size:18px; }
    #scribblescape-screen-matchmaking p { font-size:17px; }
}

/* .scribblescape-pick-word-modal's display:flex outranks [hidden], so the "Pick
   your word" heading painted over the welcome screen on every load. Same trap
   for any screen or dialog whose own rule sets a display. */
.scribblescape-body :is(.modal,.scribblescape-screen,.dialog,.panel)[hidden] { display:none !important; }

/* Results: find yourself first, then read the standings. */
#scribblescape-screen-podium .scribblescape-podium-stand { position:relative; margin-bottom:0; }
#scribblescape-screen-podium .scribblescape-podium-place { position:relative; box-shadow:inset 0 1px 0 #ffffff0d; }
#scribblescape-screen-podium .scribblescape-podium-1st {
    box-shadow:inset 0 1px 0 #ffffff1a, 0 0 22px #e2b45c2e;
    background:linear-gradient(#4a3722,#332617);
}
#scribblescape-screen-podium .scribblescape-podium-1st::before {
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:radial-gradient(120% 60% at 50% 0%, #f0c56d26, transparent 70%);
    pointer-events:none;
}
#scribblescape-screen-podium .scribblescape-podium-avatar { margin-top:10px; }
#scribblescape-screen-podium .scribblescape-podium-1st .scribblescape-podium-avatar { margin-top:12px; }
#scribblescape-screen-podium .scribblescape-podium-name { margin-top:auto; padding-top:8px; }
#scribblescape-screen-podium .scribblescape-podium-pts {
    margin-left:4px;
    color:#b39a72;
    font-size:13px;
}
#scribblescape-screen-podium .scribblescape-podium-you,
#scribblescape-screen-podium .scribblescape-podium-rest li.is-you .scribblescape-podium-rest-name::after {
    display:inline-block;
    padding:1px 7px;
    border:1px solid #8fb35e;
    border-radius:999px;
    background:#3c5c30;
    color:#dcefbb;
    font-size:12px;
    letter-spacing:.04em;
    line-height:1.5;
}
#scribblescape-screen-podium .scribblescape-podium-you {
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
}
#scribblescape-screen-podium .scribblescape-podium-place.is-you { border-color:#8fb35e; }
#scribblescape-screen-podium .scribblescape-podium-1st.is-you { border-color:#e2b45c; }

/* Runners-up read as a table: rank, who, score. */
#scribblescape-screen-podium .scribblescape-podium-rest { margin-top:22px; }
#scribblescape-screen-podium .scribblescape-podium-rest li {
    display:grid;
    grid-template-columns:28px 1fr auto;
    gap:10px;
    align-items:baseline;
    padding:10px 6px;
    text-align:left;
}
#scribblescape-screen-podium .scribblescape-podium-rest li.is-you {
    border-radius:4px;
    background:#4c6a3a2e;
    box-shadow:inset 2px 0 0 #8fb35e;
}
#scribblescape-screen-podium .scribblescape-podium-rest-rank { color:#a8916e; font-size:15px; }
#scribblescape-screen-podium .scribblescape-podium-rest-name { color:var(--ss-ink); overflow-wrap:anywhere; }
#scribblescape-screen-podium .scribblescape-podium-rest li.is-you .scribblescape-podium-rest-name::after { content:'You'; margin-left:8px; }
#scribblescape-screen-podium .scribblescape-podium-rest-score { color:#f0c56d; white-space:nowrap; }
#scribblescape-screen-podium .scribblescape-podium-place.is-you { padding-top:20px; }

/* A 12-player result is taller than a laptop viewport, and .scribblescape-screen
   is fixed with no scroll — the card was clipped at both ends with Play again out
   of reach. Cap the standings so the actions stay put, and let the screen scroll
   as a backstop. flex-start + margin:auto still centres a short card. */
#scribblescape-screen-podium {
    align-items:flex-start;
    box-sizing:border-box;
    padding:24px 16px;
    overflow-y:auto;
}
#scribblescape-screen-podium .panel { margin:auto; }
#scribblescape-screen-podium .scribblescape-podium-rest {
    max-height:34vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#6c5638 transparent;
}

/* Three tiers, not two: rematch (primary), start fresh (secondary), leave (quiet
   link) — matching the invite-link/abandon-link treatment in the waiting room. */
#scribblescape-screen-postgame #scribblescape-postgame-exit {
    display:block;
    width:auto;
    min-height:36px;
    margin:14px auto 0;
    padding:6px 12px;
    border:1px solid transparent;
    border-radius:5px;
    background:none;
    box-shadow:none;
    color:#c5ad8b;
    font-size:15px;
    text-decoration:underline;
    text-underline-offset:4px;
}
#scribblescape-screen-postgame #scribblescape-postgame-exit:hover {
    background:none;
    border-color:transparent;
    color:#ffe1a3;
}

/* Contact form. Scoped to ScribbleScape only — the shared .dialog/.form-row
   component is used on all eight pages, so nothing here touches the others.
   Labels move above their fields: an 85px label column squeezes the inputs in a
   modal this narrow, and the message field had no label at all. */
#scribblescape-contact-modal .dialog {
    box-sizing:border-box;
    padding:28px;
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 16px 48px #0006;
}
#scribblescape-contact-modal .dialog h2 {
    margin:0 0 6px;
    padding-right:40px;
    color:#f3d49b;
    font-size:26px;
}
#scribblescape-contact-modal .helper {
    color:#c5ad8b;
    font-size:15px;
    line-height:1.45;
}
#scribblescape-contact-modal .dialog > .helper:first-of-type { margin:0 0 20px; }
#scribblescape-contact-modal .form-row {
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
    gap:8px;
    margin:0 0 16px;
}
#scribblescape-contact-modal .form-row label {
    color:var(--ss-ink);
    font-size:15px;
}
#scribblescape-contact-modal :is(.input,.textarea) {
    box-sizing:border-box;
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-input);
    color:var(--ss-ink);
    font-size:16px;
}
#scribblescape-contact-modal .textarea { min-height:120px; resize:vertical; line-height:1.4; }
#scribblescape-contact-modal ::placeholder { color:#9c9482; opacity:1; }
#scribblescape-contact-modal .controls {
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:20px;
}
#scribblescape-contact-modal .btn-primary {
    order:1;
    width:100%;
    min-height:50px;
    margin:0;
    border:1px solid #80a552;
    border-radius:5px;
    background:#365f2b;
    color:#fff0cd;
    font-size:21px;
    box-shadow:inset 0 1px 0 #ffffff12, 0 2px 0 #19140f;
}
#scribblescape-contact-modal .btn-primary:hover { background:#447737; border-color:#9dc26a; }
#scribblescape-contact-modal #scribblescape-contact-cancel {
    order:2;
    align-self:center;
    width:auto;
    min-height:36px;
    margin:12px 0 0;
    padding:6px 12px;
    border:1px solid transparent;
    border-radius:5px;
    background:none;
    box-shadow:none;
    color:#c5ad8b;
    font-size:15px;
    text-decoration:underline;
    text-underline-offset:4px;
}
#scribblescape-contact-modal #scribblescape-contact-cancel:hover { background:none; color:#ffe1a3; }
#scribblescape-contact-modal #scribblescape-contact-success {
    display:flex;
    align-items:center;
    gap:12px;
    box-sizing:border-box;
    margin:16px 0 0;
    padding:12px 16px;
    border:1px solid #6d924f;
    border-radius:5px;
    background:rgba(72,110,54,.34);
    box-shadow:inset 0 0 0 1px #ffffff0d;
    color:#d8edb2;
    font-size:16px;
}
#scribblescape-contact-modal #scribblescape-contact-success[hidden] { display:none !important; }
#scribblescape-contact-modal .modal-close {
    top:14px;
    right:14px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
}
#scribblescape-contact-modal .modal-close:hover { background:#5a432a; border-color:#edbd68; }
#scribblescape-contact-modal :is(input,textarea,button):focus-visible { outline:2px solid #e8bd70; outline-offset:3px; }
@media(max-width:480px) { #scribblescape-contact-modal .dialog { padding:22px; } }

/* ==========================================================================
   In-game screen: same card language as the modals, plus the hit-target and
   legibility fixes. CSS only — no markup or game logic touched.
   ========================================================================== */

/* --- Panels ------------------------------------------------------------- */
.scribblescape-body :is(.scribblescape-leaderboard,.scribblescape-chat,.scribblescape-game,.scribblescape-instructions).panel {
    background:var(--ss-card);
    border:1px solid var(--ss-border);
    border-radius:12px 8px 12px 8px;
    box-shadow:inset 0 0 0 3px #211b16, 0 10px 30px #0005;
}
.scribblescape-body .scribblescape-instructions.panel { color:#c5ad8b; }
.scribblescape-body .scribblescape-instructions strong { color:#f3d49b; }
.scribblescape-body .scribblescape-layout .scribblescape-sidebar-title {
    color:#f3d49b;
    font-size:20px;
}

/* --- Timer: the whole game runs on it, so let it be readable ------------- */
.scribblescape-body #scribblescape-game-timer {
    gap:8px;
    padding:4px 12px;
    border:1px solid #6c5638;
    border-radius:5px;
    background:#2a231b;
    color:#ffe1a3;
    font-size:26px;
}
.scribblescape-body #scribblescape-game-timer.timer-warning {
    border-color:#c8613f;
    background:#3a201a;
    color:#ff9f7a;
}

/* --- Word ---------------------------------------------------------------- */
.scribblescape-body .scribblescape-word-label { color:#c5ad8b; }
.scribblescape-body #scribblescape-word.scribblescape-word { color:#ffe1a3; }
.scribblescape-body .scribblescape-word-hint { color:#ffe1a3; overflow-wrap:anywhere; }

/* --- Players list -------------------------------------------------------- */
.scribblescape-body .scribblescape-lb-row {
    padding:6px 8px;
    border:1px solid #4a3a28;
    border-radius:5px;
    background:#2e2720;
    color:#f3e0b8;
}
.scribblescape-body .scribblescape-lb-rank { color:#c5ad8b; }
.scribblescape-body .scribblescape-lb-name { color:#f3e0b8; }
.scribblescape-body .scribblescape-lb-score { color:#f0c56d; }
.scribblescape-body .scribblescape-lb-row-drawer {
    border:1px solid #e2b45c;
    background:linear-gradient(#4a3722,#332617);
    box-shadow:0 0 12px #e2b45c22;
}
.scribblescape-body .scribblescape-lb-row-drawer .scribblescape-lb-rank { color:#f0c56d; }
.scribblescape-body .scribblescape-lb-row-guessed {
    border:1px solid #6d924f;
    background:rgba(72,110,54,.3);
}
.scribblescape-body .scribblescape-lb-row-guessed .scribblescape-lb-name { color:#dcefbb; }

/* --- Canvas frame -------------------------------------------------------- */
.scribblescape-body .scribblescape-canvas-wrap { border-radius:6px; }
.scribblescape-body .scribblescape-canvas { border-color:#6c5638; }

/* --- Toolbar: raised strip, targets you can actually hit ----------------- */
.scribblescape-body .scribblescape-toolbar {
    gap:10px;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid #5b4730;
    border-radius:6px;
    background:#2a231b;
}
.scribblescape-body .scribblescape-toolbar-divider { background:#5b4730; }
.scribblescape-body .scribblescape-color-swatch {
    width:20px;
    height:20px;
    border:2px solid #6c5638;
    border-radius:3px;
}
/* 1fr tracks take a min-content floor from the swatches, which pushed the grid
   past the toolbar on narrow screens. minmax(0,1fr) lets the tracks shrink. */
/* Explicit tracks: 1fr collapses to a few px whenever the picker is squeezed
   (narrow centre column) and overflows when it is not. Pin the size instead. */
.scribblescape-body .scribblescape-color-grid { grid-template-columns:repeat(11,20px); }
/* Phones: explicit 18px tracks. Flexible tracks either collapse (the picker
   shares a squeezed row) or overflow, and the fixed-height panel has no room to
   absorb a wrap, so pin the size rather than let it resolve. */
/* Column count follows the panel, not the viewport: at 600px the panel is wide
   enough for 11 across, and forcing 8 there made a three-row palette that
   overflowed the card. Only the genuinely narrow container needs 8. */
@container ssgame (max-width: 460px) {
    .scribblescape-body .scribblescape-color-grid { grid-template-columns:repeat(8,18px); gap:3px; }
    .scribblescape-body .scribblescape-color-swatch { width:18px; height:18px; }
}
.scribblescape-body .scribblescape-color-swatch:hover { border-color:#edbd68; }
.scribblescape-body .scribblescape-color-grid { gap:2px; }
.scribblescape-body .scribblescape-color-selected {
    border:1px solid #b18a4f;
    border-radius:5px;
    box-shadow:inset 0 0 0 2px #211b16;
}
.scribblescape-body :is(.scribblescape-size-btn,.scribblescape-tool-btn,#scribblescape-undo-btn,#scribblescape-clear) {
    min-height:38px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
    box-shadow:inset 0 1px 0 #ffffff0a, 0 2px 0 #19140f;
}
.scribblescape-body :is(.scribblescape-tool-btn,#scribblescape-undo-btn,#scribblescape-clear) {
    min-width:52px;
    padding:6px 12px;
    font-size:15px;
}
.scribblescape-body .scribblescape-size-btn { min-width:38px; }
.scribblescape-body :is(.scribblescape-size-btn,.scribblescape-tool-btn,#scribblescape-undo-btn,#scribblescape-clear):hover {
    background:#5a432a;
    border-color:#edbd68;
}
.scribblescape-body :is(.scribblescape-size-btn,.scribblescape-tool-btn).active {
    border-color:#edbd68;
    background:#5a432a;
    color:#fff0cd;
}
.scribblescape-body .scribblescape-size-dot { background:#f3e0b8; }

/* --- Guesses ------------------------------------------------------------- */
.scribblescape-body .scribblescape-chat-msg {
    padding:6px 9px;
    border-radius:5px;
    background:#2e2720;
    color:#f3e0b8;
}
.scribblescape-body .scribblescape-chat-user { color:#f0c56d; }
.scribblescape-body .scribblescape-chat-user::after { color:#c5ad8b; }
.scribblescape-body .scribblescape-chat-msg-own {
    background:rgba(72,110,54,.34);
    border:1px solid #6d924f;
}
.scribblescape-body .scribblescape-chat-msg-correct {
    border-left:3px solid #80a552;
    background:rgba(72,110,54,.3);
}
.scribblescape-body .scribblescape-chat-msg-correct .scribblescape-chat-text { color:#c3e698 !important; }
.scribblescape-body .scribblescape-chat-msg-system { background:transparent; }
.scribblescape-body .scribblescape-chat-msg-system .scribblescape-chat-text { color:#c5ad8b; }
.scribblescape-body .scribblescape-chat-empty { color:#a8916e; }
.scribblescape-body .scribblescape-playing-as { color:#c5ad8b; }
.scribblescape-body .scribblescape-playing-as-name { color:#f3d49b; }

/* Guess input was 13.3px, which makes iOS zoom the page on focus mid-round. */
.scribblescape-body .scribblescape-chat-input-wrap {
    padding-top:10px;
    border-top:1px solid #5b4730;
    background:var(--ss-card);
}
.scribblescape-body .scribblescape-chat-input-wrap .scribblescape-guess-input {
    min-height:44px;
    padding:10px 12px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-input);
    color:var(--ss-ink);
    font-size:16px;
}
.scribblescape-body .scribblescape-guess-input::placeholder { color:#9c9482; opacity:1; }
.scribblescape-body .scribblescape-chat-input-wrap .scribblescape-guess-btn {
    min-height:44px;
    padding:8px 16px;
    border:1px solid #80a552;
    border-radius:5px;
    background:#365f2b;
    color:#fff0cd;
    font-size:16px;
    box-shadow:inset 0 1px 0 #ffffff12, 0 2px 0 #19140f;
}
.scribblescape-body .scribblescape-chat-input-wrap .scribblescape-guess-btn:hover { background:#447737; border-color:#9dc26a; }
.scribblescape-body .scribblescape-mute-btn {
    min-height:36px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
}
.scribblescape-body .scribblescape-mute-btn:hover { background:#5a432a; border-color:#edbd68; }
.scribblescape-body .scribblescape-return-to-menu-btn {
    min-height:38px;
    border:1px solid var(--ss-border);
    border-radius:5px;
    background:var(--ss-secondary);
    color:var(--ss-ink);
    font-size:15px;
}
.scribblescape-body .scribblescape-return-to-menu-btn:hover { background:#5a432a; border-color:#edbd68; }
.scribblescape-body .scribblescape-layout :is(button,input,[role=button]):focus-visible {
    outline:2px solid #e8bd70;
    outline-offset:2px;
}

/* The hint ran off the right edge on a 375px screen, hiding the last letters. */
@media(max-width:900px) {
    .scribblescape-body .scribblescape-word-hint { font-size:1.15rem; letter-spacing:.04em; }
    .scribblescape-body .scribblescape-word-area { row-gap:2px; }
    .scribblescape-body #scribblescape-game-timer { font-size:22px; }
}

}
/* The grid sized from its content, which is now zero-width, so let it fill the
   picker instead — swatches then scale to the space available. */
.scribblescape-body .scribblescape-color-grid { flex:0 0 auto; }

/* The canvas wrap is locked to 640/400 with width driving height, so any height
   the column has spare piles up as dead space under the toolbar. Auto margins
   absorb it above and below the canvas+toolbar group instead, leaving the word
   row pinned to the top. */

/* The phone game panel is a fixed height with overflow:visible, so a toolbar
   that grows spills onto the panels below instead of scrolling. Keep it compact. */
@media(max-width:900px) {
    /* Original geometry on phones — the strip's padding/border and the taller
       buttons cost ~24px the fixed-height panel does not have. Colours only. */
    .scribblescape-body .scribblescape-toolbar { gap:6px; padding:4px 0; border:0; background:none; margin-top:4px; }
    .scribblescape-body :is(.scribblescape-size-btn,.scribblescape-tool-btn,#scribblescape-undo-btn,#scribblescape-clear) { min-height:30px; }
    .scribblescape-body :is(.scribblescape-tool-btn,#scribblescape-undo-btn,#scribblescape-clear) { min-width:44px; padding:4px 8px; font-size:14px; }
    .scribblescape-body .scribblescape-size-btn { min-width:30px; }
}

/* "Your word" is the drawer's one piece of must-read text — give it size, and
   centre it in the space the fixed canvas ratio leaves above the drawing. */
.scribblescape-body .scribblescape-word-label { font-size:19px; }
.scribblescape-body #scribblescape-word.scribblescape-word { font-size:30px; }
.scribblescape-body .scribblescape-word-hint { font-size:28px; }
@media(max-width:900px) {
    .scribblescape-body .scribblescape-word-label { font-size:16px; }
    .scribblescape-body #scribblescape-word.scribblescape-word { font-size:22px; }
    .scribblescape-body .scribblescape-word-hint { font-size:1.15rem; }
}

/* The squished-view guess bar only exists below 900px, so it was missed by the
   in-game pass and kept the old grey panel colours. JS moves the guess input
   into it, so the wrap inside must not repeat the bar's own border. */
@media(max-width:900px) {
    .scribblescape-body .scribblescape-squished-guess-bar {
        padding:10px;
        background:var(--ss-card);
        border:1px solid var(--ss-border);
        border-radius:8px;
        box-shadow:inset 0 0 0 2px #211b16;
    }
    .scribblescape-body .scribblescape-squished-guess-bar .scribblescape-chat-input-wrap {
        padding-top:0;
        border-top:0;
        background:transparent;
    }
}

.scribblescape-body .scribblescape-game-top-row { margin-bottom:10px; }

/* Keep Fill/Erase/Undo/Clear on the same line as the palette: a narrower swatch
   block (8 across, 3 rows) leaves room for them beside it instead of below. */
@media(max-width:900px) {
    .scribblescape-body .scribblescape-toolbar-right { margin-left:auto; }
}

/* The picker is flex:1, so it claimed the whole toolbar line despite the swatch
   block being ~160px wide — that is what pushed the action buttons onto a row of
   their own. Size it to its content and let the actions sit beside it. */
.scribblescape-body .scribblescape-color-picker { flex:0 0 auto; }
.scribblescape-body .scribblescape-toolbar-right { margin-left:auto; }

/* Between 901 and 1210px the side columns stay pinned at 260/264 while the centre
   column drops to ~520px — too narrow for brush sizes + palette + actions on one
   line, which is what the 1210px rule in styles.css was guarding. Reclaim width
   from the side columns and trim the controls so the actions stay beside the
   colours, and the canvas gets bigger at those widths too. */
@media(min-width:901px) and (max-width:1260px) {
    .scribblescape-body .scribblescape-layout { grid-template-columns:206px 1fr 210px; }
    .scribblescape-body :is(.scribblescape-tool-btn,#scribblescape-undo-btn,#scribblescape-clear) {
        min-width:44px;
        padding:6px 8px;
    }
    .scribblescape-body .scribblescape-toolbar { gap:8px; padding:10px 8px; }
    .scribblescape-body .scribblescape-color-grid { grid-template-columns:repeat(11,18px); }
    .scribblescape-body .scribblescape-color-swatch { width:18px; height:18px; }
    .scribblescape-body .scribblescape-color-selected { width:28px; }
    .scribblescape-body .scribblescape-size-btn { min-width:34px; }
}

/* ==========================================================================
   Toolbar layout: one container query, two states.

   The toolbar's arrangement depends on how wide the CENTRE COLUMN is, not how
   wide the window is — those are different numbers, because the side columns
   are pinned. Driving it from viewport media queries meant it rearranged at
   widths where it still fitted, and stayed broken at widths where it did not.
   The game panel is the query container, so the toolbar responds to the space
   it is actually in. Grid areas keep both states explicit rather than letting
   flex wrapping decide.
   ========================================================================== */
.scribblescape-body .scribblescape-game { container-type:inline-size; container-name:ssgame; }
.scribblescape-body .scribblescape-toolbar {
    display:grid;
    grid-template-areas:
        "palette actions"
        "sizes   sizes";
    grid-template-columns:auto 1fr;
    align-items:center;
    row-gap:8px;
    column-gap:10px;
}
.scribblescape-body .scribblescape-toolbar > .scribblescape-toolbar-divider { display:none; }
.scribblescape-body .scribblescape-size-row { grid-area:sizes; justify-self:start; }
.scribblescape-body .scribblescape-color-picker { grid-area:palette; justify-self:start; }
.scribblescape-body .scribblescape-toolbar-right { grid-area:actions; justify-self:end; margin:0; }

/* Enough room for all three side by side. */
@container ssgame (min-width: 620px) {
    .scribblescape-body .scribblescape-toolbar {
        grid-template-areas:"sizes palette actions";
        grid-template-columns:auto auto 1fr;
    }
}

/* Narrowest: palette and four action buttons cannot share a line (~396px needed
   in a ~370px panel, which clipped Clear). Give the palette its own row and pair
   the sizes with the actions beneath it. */
@container ssgame (max-width: 460px) {
    .scribblescape-body .scribblescape-toolbar {
        grid-template-areas:
            "palette palette"
            "sizes   actions";
        grid-template-columns:auto 1fr;
    }
}

/* The gap under the toolbar was the chat's doing. Grid columns stretch to the
   tallest, the chat's message list is flex-shrink:0 so it could only ever push
   the row taller, and the canvas column — whose height is fixed by the 640:400
   ratio — inherited the surplus as dead space. Let the chat shrink, and let the
   row take its height from content instead of filling the viewport, so the row
   ends up as tall as the canvas column actually needs. */
@media(min-width:901px) {
    /* styles.css already intends a 624px cap here, but that rule never lands —
       its computed min-height reads 0 — so the row stretches to fill the
       viewport and the surplus becomes dead space under the toolbar, growing
       with screen height. The cap is what the canvas column needs at the widest
       the centre column gets. It was 624, but the toolbar's padded strip made the
       column 7px taller than that, which ate the panel's bottom padding and left
       the toolbar flush with the panel edge; 632 fits it with the same ~9px
       margin below the toolbar as above the word row. */
    .scribblescape-body .scribblescape-container > .scribblescape-layout {
        flex:0 0 auto;
        height:min(632px, calc(100vh - 140px));
        min-height:0;
    }
    .scribblescape-body :is(.scribblescape-chat,.scribblescape-leaderboard) { min-height:0; }
    .scribblescape-body .scribblescape-chat-messages-wrap { flex:1 1 0; min-height:0; }
}

/* The guess bar is filled by JS relocating the input into it at ≤900px. If that
   has not happened (or cannot, as in the local preview) it rendered as an empty
   floating card. Never show it without contents. */
.scribblescape-body .scribblescape-squished-guess-bar:empty { display:none !important; }

/* Pixel-font buttons sat high in their box — centre the label properly. */
/* Keep the ID selectors in a rule of their own: :is() takes the specificity of
   its most specific argument, so mixing #ids with classes here made the whole
   rule ID-weight and it silently outranked unrelated display rules. */
.scribblescape-body :is(.scribblescape-return-to-menu-btn,.scribblescape-tool-btn,.scribblescape-size-btn,.scribblescape-guess-btn) {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
#scribblescape-undo-btn,
#scribblescape-clear {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

/* Below 900px the Players/Guesses row is 1fr of whatever the canvas, toolbar and
   guess bar leave over, which on a phone is barely two rows each. Give them a
   floor so they stay usable and let the page scroll instead, and weight the
   width toward Guesses — that is the column you read while guessing. */
@media(max-width:900px) {
    .scribblescape-body .scribblescape-layout { grid-template-columns:0.88fr 1.12fr; }
    .scribblescape-body :is(.scribblescape-leaderboard,.scribblescape-chat) { min-height:264px; }
    .scribblescape-body .scribblescape-leaderboard .scribblescape-lb-row { padding:7px 8px; }
    .scribblescape-body .scribblescape-chat-messages { gap:6px; }
    .scribblescape-body .scribblescape-squished-guess-bar { margin-top:10px; }
}
/* The flex centring above outranked the `display:none` that keeps this button
   out of the desktop top row; restore the original visibility rule. */
.scribblescape-body .scribblescape-game-top-return { display:none; }
@media(max-width:900px) {
    body.scribblescape-body.scribblescape-game-active .scribblescape-game-top-return { display:inline-flex; }
}
/* Row 2 (the guess bar) had a 56px floor, so if the bar is hidden — empty, or JS
   never relocated the input — the layout still reserved a band of nothing
   between the canvas and the panels. `auto` lets the row collapse when there is
   no bar, and still fit it when there is. */
@media(max-width:900px) {
    .scribblescape-body .scribblescape-layout { grid-template-rows:auto auto 1fr; }
}

/* Narrow Players panel: the name column was down to 30px, so every RSN became
   "Z…". Rank labels are redundant — the list is already in rank order — so drop
   them and give the space to the name. The drawer pencil goes too — the gold
   border and gradient on that row already say who is drawing, and the pencil was
   costing the drawer the one truncated name. Chatheads stay: they are how you
   recognise who is who at a glance. Driven by the panel own width. */
.scribblescape-body .scribblescape-leaderboard { container-type:inline-size; container-name:sslb; }
@media(max-width:900px) { @container sslb (max-width: 320px) {
    .scribblescape-body .scribblescape-lb-row .scribblescape-lb-rank { display:none; }
    .scribblescape-body .scribblescape-lb-row { gap:6px; padding:6px 7px; }
    .scribblescape-body .scribblescape-lb-chathead { width:26px; height:26px; }
    .scribblescape-body .scribblescape-lb-name { font-size:15px; }
    .scribblescape-body .scribblescape-lb-score { margin-left:0; font-size:15px; }
} }
/* In squished mode the layout was flex:1 1 0 — locked to the viewport height —
   so the grid shrank the canvas row to honour the panels' min-height, clipping
   the game panel on short screens. Let the stack take its natural height and the
   page scroll instead; that is normal on a phone and nothing gets squeezed. */
@media(max-width:900px) {
    .scribblescape-body .scribblescape-container > .scribblescape-layout { flex:0 0 auto; }
}
/* Put the drawer's pencil back as a badge on the corner of their chathead: it
   costs no column width, so names keep their full space, and the drawer stays
   marked by something other than colour alone. */
@media(max-width:900px) { @container sslb (max-width: 320px) {
    .scribblescape-body .scribblescape-lb-row { position:relative; }
    .scribblescape-body .scribblescape-lb-row-drawer .scribblescape-lb-rank {
        display:block;
        position:absolute;
        left:3px;
        top:3px;
        width:16px;
        height:16px;
        box-sizing:border-box;
        border-radius:50%;
        background:#241d16;
        box-shadow:0 0 0 1.5px #e2b45c;
        color:#f3d49b;
        font-size:9px;
        line-height:14px;
        text-align:center;
        pointer-events:none;
        z-index:1;
    }
} }

/* The welcome screen fixes the wordmark over the page at z-index 1001 — the
   same layer the nav sits on, and later in the DOM, so it painted over the
   Browse games dropdown. (The dropdown's own z-index:1002 can't help: it is
   inside the nav's stacking context, so it never rises above the nav's 1001.)
   The wordmark is decorative and pointer-events:none, the nav is interactive,
   so the nav takes the higher layer. Both selectors below are overridden in
   styles.css — the second inside a width media query — hence matching each. */
body:has(#scribblescape-join-modal.show) .site-nav,
body.scribblescape-body:has(#scribblescape-join-modal.show) .site-nav {
  z-index: 1002;
}