/* Screen Night design system (design/README.md, tokens.json, components/bundle.css).
   Fonts are served from this site because the security policy blocks Google Fonts.
   Ultra: Copyright (c) 2010 Brian J. Bonislawsky DBA Astigmatic (AOETI), Apache License 2.0 (assets/fonts/ultra-LICENSE.txt).
   Alfa Slab One: Copyright 2016 The Alfa Slab One Project Authors, SIL Open Font License 1.1 (assets/fonts/alfaslabone-OFL.txt).
   Tokens are scoped to .sn-theme so screens switch over one at a time. */
@font-face{font-family:Ultra;src:url('/assets/fonts/Ultra-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Alfa Slab One';src:url('/assets/fonts/AlfaSlabOne-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

.sn-theme{
  --teal-wall:#2e6f6b;--teal-light:#3e8c88;--cream:#f3e6c8;--cream-deep:#e3cfa0;--paper:#fffdf6;
  --red:#c8382b;--red-dark:#a32d22;--green:#1f5b45;--gold:#d9a441;--ink:#2a1a14;--ink-muted:#5a4a3a;--qr-ink:#1f2a24;--white:#fff;
  --font-display:Ultra,Georgia,serif;--font-slab:"Alfa Slab One",Georgia,serif;--font-body:Georgia,"Times New Roman",serif;
  --space-1:6px;--space-2:12px;--space-3:18px;--space-4:24px;--space-5:28px;--space-6:36px;
  --radius-sm:10px;--radius-md:14px;--radius-lg:22px;--radius-xl:28px;--radius-pill:999px;
  --shadow-offset:5px 5px 0 #d9a441;--shadow-card:6px 8px 0 rgba(20,40,38,.35);
  --shadow-sign:0 0 0 6px #c8382b,0 0 0 10px #f3e6c8,6px 9px 0 10px rgba(20,40,38,.35);
  --border-control:3px;--border-tile:5px
}
/* Faint paper grain over the whole screen, never blocking clicks. */
body.sn-theme::after{content:'';position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.2;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Components (gnm- classes from design/components/bundle.css, without the Google Fonts import). */
.gnm-wall{background:var(--teal-wall);color:var(--cream);font-family:var(--font-slab)}
.gnm-btn{min-height:52px;padding:8px 22px;border-radius:var(--radius-md);font-family:var(--font-slab);font-size:19px;letter-spacing:.5px;cursor:pointer;border:var(--border-control) solid var(--green)}
.gnm-btn--primary{background:var(--red);color:var(--cream);box-shadow:var(--shadow-offset)}
.gnm-btn--secondary{background:var(--green);color:var(--cream);border-color:var(--cream);box-shadow:var(--shadow-offset)}
.gnm-btn--quiet{background:var(--paper);color:var(--green)}
.gnm-btn--pill{border-radius:var(--radius-pill);background:var(--red);color:var(--cream);border-color:var(--cream);font-family:var(--font-display);font-size:16px}
.gnm-card{background:var(--cream);color:var(--ink);border:var(--border-tile) solid var(--red);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:var(--space-5)}
.gnm-card h3{margin:0;font-family:var(--font-slab);font-weight:400;font-size:24px;color:var(--green)}
.gnm-card p{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.5}
.gnm-card .gnm-note{font-family:var(--font-body);font-size:14px;color:var(--ink-muted)}
.gnm-divider{border:0;border-top:3px dashed var(--gold);margin:0}
.gnm-sign{display:inline-flex;flex-direction:column;align-items:center;gap:4px;background:var(--cream);border-radius:var(--radius-xl);box-shadow:var(--shadow-sign);padding:18px 48px 16px}
.gnm-sign__title{font-family:var(--font-display);font-size:54px;line-height:1.1;color:var(--red);text-shadow:3px 3px 0 var(--green)}
.gnm-sign__sub{font-family:var(--font-slab);font-size:20px;letter-spacing:1px;color:var(--green)}
.gnm-banner{display:inline-block;background:var(--green);color:var(--cream);padding:10px 40px 12px;border-radius:var(--radius-md);transform:rotate(-2deg);box-shadow:0 0 0 4px var(--cream),7px 7px 0 4px var(--gold);font-family:var(--font-slab);font-size:34px;letter-spacing:1px}
.gnm-title{font-family:var(--font-display);color:var(--cream);text-shadow:4px 4px 0 var(--red);line-height:1.1}
.gnm-hero{font-family:var(--font-display);color:var(--cream);line-height:1.15;text-shadow:5px 5px 0 var(--red),10px 10px 0 var(--green)}
.gnm-answer{display:flex;align-items:center;justify-content:center;text-align:center;min-height:96px;padding:16px 24px;color:var(--cream);border:var(--border-tile) solid var(--cream);border-radius:var(--radius-lg);box-shadow:var(--shadow-offset);font-family:var(--font-slab);font-size:34px}
.gnm-answer--a{background:var(--red)}.gnm-answer--b{background:var(--green)}
.gnm-tile{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--cream);border:var(--border-tile) solid var(--red);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:26px 20px;cursor:pointer;font-family:var(--font-slab)}
.gnm-tile__name{font-size:28px;color:var(--green)}.gnm-tile__hint{font-family:var(--font-body);font-size:16px;color:var(--red-dark)}
.gnm-field{display:flex;flex-direction:column;gap:var(--space-1)}
.gnm-field label{font-family:var(--font-slab);font-size:15px;letter-spacing:.5px;color:var(--green)}
.gnm-field input,.gnm-field select{height:52px;box-sizing:border-box;padding:0 16px;background:var(--paper);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font-family:var(--font-body);font-size:18px;color:var(--qr-ink)}
.gnm-qr{display:inline-block;background:var(--white);border:6px solid var(--green);border-radius:var(--radius-md);padding:12px;box-shadow:var(--shadow-offset)}

/* ---------- Host screen (step 1): body.sn-theme.host-view ----------
   Prefixed with body.sn-theme so these win over the older host palettes in styles.css. */
body.sn-theme.host-view{min-height:100dvh;color:var(--cream);font:400 16px/1.5 var(--font-body);
  background-color:var(--teal-wall);background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-46V46M-46 0H46M-25-25L25 25M-25 25L25-25' stroke='%23d9a441' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-46V46M-46 0H46M-25-25L25 25M-25 25L25-25' stroke='%23f3e6c8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-46V46M-46 0H46M-25-25L25 25M-25 25L25-25' stroke='%23c8382b' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M0-46V46M-46 0H46M-25-25L25 25M-25 25L25-25' stroke='%23d9a441' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath d='M6 84C20 40 52 12 114 6 70 22 44 46 30 86Z' fill='%233e8c88'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 90'%3E%3Cpath d='M114 84C100 40 68 12 6 6 50 22 76 46 90 86Z' fill='%233e8c88'/%3E%3C/svg%3E");
  background-size:64px,46px,30px,50px,96px,96px;
  background-position:left 14px top 200px,right 18px top 168px,right 28px top 330px,left 20px top 470px,left 0 bottom 0,right 0 bottom 0}
/* Decor only where the side margins keep it clear of text. */
@media(max-width:1279px){body.sn-theme.host-view{background-image:none}}

/* Header: Screen Night wordmark with hanging ornaments at the corners. */
body.sn-theme.host-view .private-header{min-height:104px;padding:22px 24px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;color:var(--cream);background-color:transparent;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M30 0V58' stroke='%23f3e6c8' stroke-width='2'/%3E%3Crect x='23' y='52' width='14' height='9' rx='2' fill='%23d9a441'/%3E%3Ccircle cx='30' cy='76' r='17' fill='%23c8382b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M30 0V30' stroke='%23f3e6c8' stroke-width='2'/%3E%3Crect x='24' y='25' width='12' height='8' rx='2' fill='%23d9a441'/%3E%3Ccircle cx='30' cy='46' r='14' fill='%231f5b45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M30 0V40' stroke='%23f3e6c8' stroke-width='2'/%3E%3Crect x='24' y='35' width='12' height='8' rx='2' fill='%23d9a441'/%3E%3Ccircle cx='30' cy='57' r='15' fill='%23d9a441'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M30 0V58' stroke='%23f3e6c8' stroke-width='2'/%3E%3Crect x='23' y='52' width='14' height='9' rx='2' fill='%23d9a441'/%3E%3Ccircle cx='30' cy='76' r='17' fill='%23c8382b'/%3E%3C/svg%3E");
  background-size:44px 74px,40px 66px,40px 66px,44px 74px;background-position:4% 0,9% 0,91% 0,96% 0}
body.sn-theme.host-view .private-header>.sn-wordmark{display:block;width:auto;font-family:var(--font-display);font-size:clamp(26px,3.2vw,36px);line-height:1.1;letter-spacing:0;color:var(--cream);text-shadow:3px 3px 0 var(--red)}
body.sn-theme.host-view .private-header>.sn-header-label{display:block;width:auto;font-family:var(--font-slab);font-size:13px;line-height:1.3;letter-spacing:3px;text-transform:uppercase;color:var(--cream)}

body.sn-theme.host-view .host-shell{max-width:1120px;padding:12px 28px 64px}

/* Buttons: primary (red), secondary (green), quiet (paper). */
body.sn-theme.host-view .game-button{width:auto;min-height:52px;padding:10px 22px;background:var(--red);color:var(--cream);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);box-shadow:var(--shadow-offset);font:400 19px/1.2 var(--font-slab);letter-spacing:.5px;text-decoration:none}
body.sn-theme.host-view .game-button:hover{background:var(--red-dark)}
body.sn-theme.host-view .game-button:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--gold)}
body.sn-theme.host-view .word-host-actions .game-button~.game-button{background:var(--green);border-color:var(--cream)}
body.sn-theme.host-view .word-host-actions .game-button~.game-button:hover{background:#174634}
body.sn-theme.host-view .small-button,body.sn-theme.host-view a.game-button[href^="/display/"]{min-height:48px;padding:8px 18px;background:var(--paper);color:var(--green);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);box-shadow:none;font:400 16px/1.2 var(--font-slab);letter-spacing:.5px;text-decoration:none}
body.sn-theme.host-view .small-button:hover,body.sn-theme.host-view a.game-button[href^="/display/"]:hover{background:var(--cream)}
body.sn-theme.host-view .host-toolbar [aria-current=page]{background:var(--cream-deep);border-color:var(--green);color:var(--green)}
body.sn-theme.host-view button:disabled{opacity:.55;box-shadow:none;transform:none}
body.sn-theme.host-view :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}

/* Status strip and page headings on the teal wall. */
body.sn-theme.host-view .host-session-strip{margin:20px 0 30px;font:400 14px/1.4 var(--font-slab);letter-spacing:1.5px;text-transform:uppercase;color:var(--cream)}
body.sn-theme.host-view #host-tv-summary::before{color:var(--gold)}
body.sn-theme.host-view #host-tv-summary[data-state=linked]::before{color:var(--cream)}
body.sn-theme.host-view .kicker{font:400 15px/1.3 var(--font-slab);letter-spacing:3px;color:var(--cream)}
body.sn-theme.host-view .host-hub-heading h1,body.sn-theme.host-view .host-page-heading h1{margin:10px 0 18px;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,5.4vw,64px);line-height:1.1;letter-spacing:0;color:var(--cream);text-shadow:4px 4px 0 var(--red);overflow-wrap:anywhere}
body.sn-theme.host-view .host-page-heading{margin-bottom:8px}
/* The family sign: the buying family's own name on a small cream sign. */
body.sn-theme.host-view #host-family-label{display:inline-block;max-width:100%;margin:12px 0 8px;padding:10px 32px 9px;background:var(--cream);color:var(--green);border-radius:var(--radius-xl);box-shadow:var(--shadow-sign);font:400 20px/1.25 var(--font-slab);letter-spacing:1px;overflow-wrap:anywhere}
body.sn-theme.host-view .host-hub-heading{margin:0 0 40px}
body.sn-theme.host-view .host-hub-note{margin:34px 0 0;font:400 16px/1.5 var(--font-body);color:var(--cream)}

/* "Now on the TV" banner. */
body.sn-theme.host-view .host-current-game{margin:6px 4px 36px;padding:14px 22px;align-items:center;background:var(--green);color:var(--cream);border:0;border-radius:var(--radius-md);box-shadow:0 0 0 4px var(--cream),7px 7px 0 4px var(--gold);font:400 18px/1.3 var(--font-slab);letter-spacing:.5px}
body.sn-theme.host-view .host-current-game a{color:var(--cream);font-weight:400;text-underline-offset:4px}

/* Game tiles: cream, red border, green icon and name. */
body.sn-theme.host-view .host-game-grid{gap:28px}
body.sn-theme.host-view .host-game-tile,body.sn-theme.host-view .host-game-tile:nth-child(even){min-height:196px;padding:26px 20px;gap:10px;background:var(--cream);color:var(--green);border:var(--border-tile) solid var(--red);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform .12s,box-shadow .12s}
body.sn-theme.host-view .host-game-tile:hover,body.sn-theme.host-view .host-game-tile:nth-child(even):hover{background:var(--paper);border-color:var(--red);transform:translate(-2px,-2px);box-shadow:8px 10px 0 rgba(20,40,38,.35)}
body.sn-theme.host-view .host-game-tile:last-child{width:calc(50% - 14px)}
body.sn-theme.host-view .host-game-tile .host-game-icon{width:52px;height:52px;color:var(--green)}
body.sn-theme.host-view .host-game-tile strong{font:400 clamp(22px,2.4vw,28px)/1.15 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .host-tile-status,body.sn-theme.host-view .host-game-ready .host-tile-status{padding:0;background:none;border-radius:0;font:400 16px/1.3 var(--font-body);color:var(--red-dark)}

/* Cards: cream with a red border, slab headings, Georgia text, dashed gold dividers. */
body.sn-theme.host-view .host-panel{padding:var(--space-5);background:var(--cream);color:var(--ink);border:var(--border-tile) solid var(--red);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);font:400 16px/1.5 var(--font-body)}
body.sn-theme.host-view .host-panel h2{font:400 24px/1.25 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .host-panel h3{font:400 20px/1.25 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .host-panel>h2+p,body.sn-theme.host-view .host-panel>h2+.quiet{margin-top:8px}
body.sn-theme.host-view .host-panel .quiet{font:400 14px/1.5 var(--font-body);color:var(--ink-muted)}
body.sn-theme.host-view .host-panel hr{margin:26px 0;border:0;border-top:3px dashed var(--gold)}
body.sn-theme.host-view .host-panel a:not(.game-button):not(.small-button){color:var(--red-dark)}
body.sn-theme.host-view .host-panel label{display:block;margin:18px 0 6px;font:400 15px/1.3 var(--font-slab);letter-spacing:.5px;color:var(--green)}
body.sn-theme.host-view .host-panel input,body.sn-theme.host-view .host-panel select{min-height:52px;padding:0 16px;background:var(--paper);color:var(--qr-ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 18px/1.3 var(--font-body)}
body.sn-theme.host-view .host-panel input::placeholder{color:#7a6a58}
body.sn-theme.host-view .host-panel form .game-button{margin:18px 0 6px}
body.sn-theme.host-view .host-panel summary{font:400 16px/1.4 var(--font-slab);letter-spacing:.5px;color:var(--green)}
body.sn-theme.host-view .host-panel details{margin-top:14px}
body.sn-theme.host-view .save-status{font:400 14px/1.5 var(--font-body);color:var(--ink-muted)}
body.sn-theme.host-view .host-control-row{font:400 15px/1.3 var(--font-slab);color:var(--green)}

/* Game controls inside the cards. */
body.sn-theme.host-view .host-current-word{margin:12px 0;font:400 clamp(36px,5vw,54px)/1.15 var(--font-display);color:var(--red);text-shadow:3px 3px 0 var(--green);overflow-wrap:anywhere}
body.sn-theme.host-view .host-word-winner{font:400 30px/1.2 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .host-charades-clock{font:400 clamp(40px,5vw,54px)/1.1 var(--font-display);color:var(--red);text-shadow:3px 3px 0 var(--green)}
body.sn-theme.host-view .host-song-prompt{font:400 clamp(24px,3.4vw,34px)/1.3 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .host-buzz-status{font:400 18px/1.4 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .word-host-actions{gap:16px;margin:22px 0}
body.sn-theme.host-view .word-scores li{border-bottom:2px solid var(--cream-deep)}
body.sn-theme.host-view .word-scores strong{font:400 18px/1.3 var(--font-slab);color:var(--green)}
body.sn-theme.host-view :is(.host-trivia-options li,.host-answer,.rather-results,.elf-return){background:var(--paper);color:var(--ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md)}
body.sn-theme.host-view .host-answer strong{font-family:var(--font-slab);font-weight:400;color:var(--green)}

/* Game start pages: intro and switch warning on the wall, card holds only settings and Start, rules below. */
body.sn-theme.host-view .host-game-panel:has(>.sn-start-layout){padding:0;background:none;border:0;box-shadow:none;color:var(--cream)}
body.sn-theme.host-view .sn-game-intro{max-width:640px;margin:0 0 24px;font:400 18px/1.5 var(--font-body);color:var(--cream)}
body.sn-theme.host-view .sn-switch-notice{max-width:640px;margin:0 4px 30px;padding:14px 20px;background:var(--green);color:var(--cream);border-radius:var(--radius-md);box-shadow:0 0 0 4px var(--cream),7px 7px 0 4px var(--gold)}
body.sn-theme.host-view .host-panel .sn-switch-notice :is(p,.quiet){margin:0;font:400 16px/1.45 var(--font-slab);letter-spacing:.3px;color:var(--cream)}
body.sn-theme.host-view .host-panel .sn-switch-notice p+p{margin-top:6px}
body.sn-theme.host-view .host-panel .sn-switch-notice a:not(.game-button):not(.small-button){display:inline-block;margin-top:8px;font:400 16px/1.4 var(--font-slab);color:var(--cream);text-underline-offset:4px}
body.sn-theme.host-view .sn-start-card{max-width:480px;padding:var(--space-5);background:var(--cream);color:var(--ink);border:var(--border-tile) solid var(--red);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
body.sn-theme.host-view .sn-start-card form label:first-child{margin-top:0}
body.sn-theme.host-view .sn-start-card form .game-button{margin:20px 0 4px}
body.sn-theme.host-view .sn-game-rules{max-width:640px;margin:26px 4px 0;font:400 15px/1.6 var(--font-body);color:var(--cream)}

/* Setup & players: cards two across on wide screens, stacked on phones. */
@media(min-width:900px){body.sn-theme.host-view .host-shell .host-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}}
/* "Get ready" checklist: numbered gold circles that turn green with a tick when a step is done. */
body.sn-theme.host-view .sn-ready{margin:0 0 28px}
body.sn-theme.host-view .sn-ready-steps{margin:18px 0 0;padding:0;list-style:none;counter-reset:ready}
body.sn-theme.host-view .sn-ready-steps>li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-top:3px dashed var(--gold);counter-increment:ready}
body.sn-theme.host-view .sn-ready-steps>li:first-child{border-top:0;padding-top:4px}
body.sn-theme.host-view .sn-ready-mark{display:flex;width:44px;height:44px;align-items:center;justify-content:center;background:var(--paper);color:var(--green);border:var(--border-control) solid var(--gold);border-radius:50%;font:400 20px/1 var(--font-slab)}
body.sn-theme.host-view .sn-ready-mark::before{content:counter(ready)}
body.sn-theme.host-view .sn-ready-done .sn-ready-mark{background:var(--green);color:var(--cream);border-color:var(--green)}
body.sn-theme.host-view .sn-ready-done .sn-ready-mark::before{content:'✓'}
body.sn-theme.host-view .sn-ready-body h3{margin:8px 0 6px}
body.sn-theme.host-view .sn-ready-state{font:400 15px/1.2 var(--font-body);color:var(--ink-muted)}
body.sn-theme.host-view .sn-ready-body p{margin:6px 0}
body.sn-theme.host-view .sn-ready-ways{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
body.sn-theme.host-view .sn-way[aria-pressed=true]{background:var(--green);color:var(--cream);border-color:var(--green)}
body.sn-theme.host-view .sn-way-panel{margin-top:6px;padding:16px 18px;background:var(--paper);border:var(--border-control) solid var(--cream-deep);border-radius:var(--radius-md)}
body.sn-theme.host-view .sn-ready-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
body.sn-theme.host-view .sn-ready-actions .game-button{margin:0}
body.sn-theme.host-view .host-panel .sn-ready-warning{margin:0 0 12px;padding:12px 16px;background:var(--green);color:var(--cream);border-radius:var(--radius-md);font:400 15px/1.45 var(--font-body)}
body.sn-theme.host-view .sn-cast-tips{margin:8px 0 0;padding-left:20px;font:400 15px/1.5 var(--font-body)}
body.sn-theme.host-view .sn-cast-tips li{margin:4px 0}
body.sn-theme.host-view .sn-ready-count{font:400 16px/1.3 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .sn-way-panel .host-tv form .game-button{margin:14px 0 4px}
/* Phones: smaller numbers, and the chosen way's instructions use the full card width. */
@media(max-width:740px){
  body.sn-theme.host-view .sn-ready-steps>li{grid-template-columns:34px minmax(0,1fr);gap:12px}
  body.sn-theme.host-view .sn-ready-mark{width:34px;height:34px;font-size:16px}
  body.sn-theme.host-view .sn-ready-body h3{margin-top:4px}
  body.sn-theme.host-view .sn-way-panel{margin-left:-46px;padding:14px}
}
body.sn-theme.host-view .roster-heading>span{padding:4px 14px;background:var(--green);color:var(--cream);border-radius:var(--radius-pill);font:400 14px/1.3 var(--font-slab);letter-spacing:.5px}
/* Name gets the full row; status and Restore sit underneath, so names never squeeze into a column. */
body.sn-theme.host-view .host-roster li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:6px;align-items:center;background:var(--paper);border:var(--border-control) solid var(--cream-deep);border-radius:var(--radius-md)}
body.sn-theme.host-view .host-roster li>:is(small,button){grid-column:2;justify-self:start;margin:0}
body.sn-theme.host-view .host-roster strong{overflow-wrap:break-word}
body.sn-theme.host-view .roster-heading{flex-wrap:wrap}
body.sn-theme.host-view .host-roster li>span{color:var(--gold)}
body.sn-theme.host-view .host-roster strong{font:400 18px/1.3 var(--font-slab);color:var(--green)}
body.sn-theme.host-view .host-roster small{font:400 13px/1.3 var(--font-body);color:var(--ink-muted)}
body.sn-theme.host-view .host-qr .qr-panel{width:184px;margin:16px 0;padding:12px;background:var(--white);border:6px solid var(--green);border-radius:var(--radius-md);box-shadow:var(--shadow-offset)}
body.sn-theme.host-view .host-join-link{font:400 15px/1.4 var(--font-body);overflow-wrap:anywhere}

/* Notices. */
body.sn-theme.host-view .error-notice{background:var(--cream);color:var(--red-dark);border-bottom:3px solid var(--red);font:400 15px/1.4 var(--font-body)}
body.sn-theme.host-view .connection-notice{background:var(--cream);color:var(--ink);border:3px solid var(--green);border-radius:var(--radius-md);font:400 14px/1.4 var(--font-body)}

@media(max-width:740px){
  body.sn-theme.host-view .host-shell{padding:8px 16px 48px}
  body.sn-theme.host-view .host-game-grid{grid-template-columns:1fr;gap:22px}
  body.sn-theme.host-view .host-game-tile:last-child{grid-column:auto;width:auto;justify-self:stretch}
  body.sn-theme.host-view .host-panel{padding:22px}
  body.sn-theme.host-view .private-header{background-image:none}
  body.sn-theme.host-view .host-session-strip{font-size:12px;letter-spacing:1px}
  /* Back to games and Setup & players share one row on phones. */
  body.sn-theme.host-view .host-toolbar{flex-wrap:nowrap;gap:10px}
  body.sn-theme.host-view .host-toolbar .small-button{min-width:0;padding:8px 10px;font-size:14px;letter-spacing:0;white-space:nowrap}
  body.sn-theme.host-view .host-toolbar:has(#host-back:not([hidden])) .small-button{flex:1 1 0}
  body.sn-theme.host-view #host-family-label{padding:8px 20px 7px;font-size:17px;letter-spacing:.5px}
  body.sn-theme.host-view .kicker{letter-spacing:2px}
}

/* ---------- Guest screens (step 2): phone, code entry, recovery ---------- */
body.sn-theme:not(.host-view){min-height:100dvh;background:var(--teal-wall);color:var(--cream);font:400 16px/1.5 var(--font-body)}
body.sn-theme :is(button,a,input,select,summary):focus-visible{outline:3px solid var(--cream);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
body.sn-theme:not(.host-view) .private-header{min-height:64px;padding:14px 20px;background:transparent;border:0;color:var(--cream)}
body.sn-theme:not(.host-view) .private-brand{font:400 22px/1.1 var(--font-display);color:var(--cream);text-shadow:2px 2px 0 var(--red);text-decoration:none;white-space:nowrap}
body.sn-theme:not(.host-view) .private-header>span{font:400 11px/1.3 var(--font-slab);letter-spacing:2px;text-transform:uppercase;color:var(--cream)}
/* The host header (wordmark + label) also appears on the error page, which is not a host-view page. */
body.sn-theme:not(.host-view) .private-header>.sn-wordmark{font:400 22px/1.1 var(--font-display);letter-spacing:0;text-transform:none;text-shadow:2px 2px 0 var(--red)}

/* Phone wall: small hanging ornaments at the top corners, clear of the title. */
body.sn-theme.phone-view{background-repeat:no-repeat;background-size:26px 44px,26px 44px;background-position:left 10px top 0,right 10px top 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M30 0V58' stroke='%23f3e6c8' stroke-width='3'/%3E%3Crect x='23' y='52' width='14' height='9' rx='2' fill='%23d9a441'/%3E%3Ccircle cx='30' cy='76' r='17' fill='%23c8382b'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'%3E%3Cpath d='M30 0V58' stroke='%23f3e6c8' stroke-width='3'/%3E%3Crect x='23' y='52' width='14' height='9' rx='2' fill='%23d9a441'/%3E%3Ccircle cx='30' cy='76' r='17' fill='%231f5b45'/%3E%3C/svg%3E")}
body.sn-theme.phone-view .phone-scene{background:transparent}
body.sn-theme.phone-view .phone-scene::after{display:none}
body.sn-theme.phone-view .phone-content,body.sn-theme.phone-view.phone-registration .phone-content,body.sn-theme.phone-view.phone-playing .phone-content{width:min(440px,100%);padding:52px 20px 36px;justify-content:flex-start;color:var(--cream);text-align:center}

/* Titles on the wall. */
body.sn-theme.phone-view .phone-kicker,body.sn-theme.phone-view.phone-registration .phone-kicker{margin:0 0 10px;font:400 15px/1.3 var(--font-slab);letter-spacing:3px;color:var(--cream);text-shadow:none}
body.sn-theme.phone-view .phone-title,body.sn-theme.phone-view .phone-greeting{margin:0 0 24px;font:400 30px/1.15 var(--font-display);letter-spacing:0;color:var(--cream);text-shadow:3px 3px 0 var(--red);-webkit-text-stroke:0;text-wrap:balance}
body.sn-theme.phone-view .phone-greeting{font-size:40px}

/* The cream card that holds the form or result. */
body.sn-theme.phone-view .sn-card,body.sn-theme.phone-view .phone-game{margin:0;padding:24px 22px;background:var(--cream);color:var(--ink);border:var(--border-tile) solid var(--red);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);text-align:left}
body.sn-theme.phone-view .sn-card label{display:block;margin:0 0 6px;font:400 15px/1.3 var(--font-slab);letter-spacing:.5px;color:var(--green);text-shadow:none}
body.sn-theme.phone-view .sn-card select{margin-bottom:18px}
body.sn-theme.phone-view .sn-card input,body.sn-theme.phone-view .sn-card select{min-height:52px;padding:0 16px;background:var(--paper);color:var(--qr-ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 18px/1.3 var(--font-body)}
body.sn-theme.phone-view .sn-card input{margin-bottom:18px}
body.sn-theme.phone-view .sn-card input::placeholder{color:#7a6a58}
body.sn-theme.phone-view .sn-card-kicker{display:block;margin-bottom:4px;font:400 13px/1.3 var(--font-slab);letter-spacing:2px;text-transform:uppercase;color:var(--green);text-align:center}
body.sn-theme.phone-view .sn-elf-card{text-align:center}
body.sn-theme.phone-view .sn-card .elf-name{margin:6px 0 18px;font:400 clamp(30px,9vw,40px)/1.15 var(--font-display);letter-spacing:0;text-transform:uppercase;color:var(--red);text-shadow:3px 3px 0 var(--green);-webkit-text-stroke:0;overflow-wrap:anywhere}
body.sn-theme.phone-view .sn-card .phone-message{margin:0;font:400 16px/1.5 var(--font-body);color:var(--ink);text-shadow:none}
body.sn-theme.phone-view .sn-card .phone-message+.game-button{margin-top:18px}

/* Buttons: primary red, secondary green, quiet paper. */
body.sn-theme.phone-view .game-button{width:100%;min-height:56px;padding:10px 18px;background:var(--red);color:var(--cream);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);box-shadow:var(--shadow-offset);font:400 19px/1.2 var(--font-slab);letter-spacing:.5px}
body.sn-theme.phone-view .game-button:hover{background:var(--red-dark)}
body.sn-theme.phone-view .game-button:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--gold)}
body.sn-theme.phone-view .sn-card form .game-button,body.sn-theme.phone-view form.sn-card .game-button{margin-top:6px;font-size:19px}
body.sn-theme.phone-view .elf-actions{grid-template-columns:1fr 1fr;gap:14px;margin:0}
body.sn-theme.phone-view .elf-actions .game-button,body.sn-theme.phone-view #reroll{min-height:56px;padding:8px 10px;border:var(--border-control) solid var(--green);border-radius:var(--radius-md);background:var(--red);color:var(--cream);box-shadow:var(--shadow-offset);font-size:16px;letter-spacing:0;white-space:nowrap}
body.sn-theme.phone-view #confirm{background:var(--green);border-color:var(--cream)}
body.sn-theme.phone-view #confirm:hover{background:#174634}
body.sn-theme.phone-view .small-button{min-height:48px;padding:8px 16px;background:var(--paper);color:var(--green);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 15px/1.2 var(--font-slab);letter-spacing:.5px;text-shadow:none}
body.sn-theme.phone-view .small-button:hover{background:var(--cream)}
body.sn-theme.phone-view button:disabled{opacity:.55;box-shadow:none;transform:none}
body.sn-theme.phone-view .phone-content>.small-button{margin-top:22px}

/* Notes on the wall and inside cards. */
body.sn-theme.phone-view .phone-footnote{margin-top:18px;font:400 14px/1.5 var(--font-body);color:var(--cream);text-shadow:none}
body.sn-theme.phone-view :is(.duplicate-note,.availability-note){margin:0 0 16px;padding:12px 14px;background:var(--paper);color:var(--ink);border:var(--border-control) solid var(--cream-deep);border-radius:var(--radius-md);font:400 14px/1.5 var(--font-body)}
body.sn-theme.phone-view .availability-note{margin-top:18px}
body.sn-theme.phone-view :is(.saved-elves,.save-elf){margin-top:20px;padding-top:10px;border-top:3px dashed var(--gold);color:var(--cream);text-align:left}
body.sn-theme.phone-view :is(.saved-elves,.save-elf) summary{font:400 15px/1.4 var(--font-slab);letter-spacing:.5px;color:var(--cream)}
body.sn-theme.phone-view .elf-return{background:var(--paper);color:var(--ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 15px/1.5 var(--font-body)}
body.sn-theme.phone-view .elf-return h3{font:400 20px/1.25 var(--font-slab);color:var(--green)}
body.sn-theme.phone-view .elf-return label{font:400 14px/1.3 var(--font-slab);color:var(--green)}

/* During a game: a compact name card above the game card. */
body.sn-theme.phone-view.phone-playing .phone-content{padding-top:44px}
body.sn-theme.phone-view.phone-playing .sn-elf-card{padding:12px 18px;box-shadow:var(--shadow-card)}
body.sn-theme.phone-view.phone-playing .sn-elf-card .elf-name{margin:2px 0 0;font-size:24px;text-shadow:2px 2px 0 var(--green)}
body.sn-theme.phone-view .phone-game{margin:22px 0 0;text-align:center}
body.sn-theme.phone-view .phone-game h2{font:400 24px/1.25 var(--font-slab);color:var(--green)}
body.sn-theme.phone-view .phone-game .quiet{margin:8px 0 0;font:400 14px/1.5 var(--font-body);color:var(--ink-muted)}
body.sn-theme.phone-view .phone-game p{color:var(--ink);text-shadow:none}
body.sn-theme.phone-view .phone-game .phone-game-word{margin:14px 0 6px;font:400 clamp(32px,10vw,44px)/1.15 var(--font-display);color:var(--red);text-shadow:3px 3px 0 var(--green);overflow-wrap:anywhere}
body.sn-theme.phone-view .phone-game .phone-game-status{min-height:48px;margin:10px 0 0;font:400 18px/1.4 var(--font-slab);color:var(--green)}
body.sn-theme.phone-view .phone-game #word-buzz{min-height:72px;margin-top:12px;font-size:22px}
body.sn-theme.phone-view .phone-game .phone-trivia-question,body.sn-theme.phone-view .phone-game .phone-song-prompt{margin:14px 0;font:400 21px/1.35 var(--font-slab);color:var(--ink);overflow-wrap:anywhere}
body.sn-theme.phone-view .phone-game .phone-song-answer,body.sn-theme.phone-view .phone-game .phone-trivia-answer{font:400 19px/1.35 var(--font-slab);color:var(--red-dark);overflow-wrap:anywhere}
body.sn-theme.phone-view .phone-trivia-choices legend{margin-bottom:6px;font:400 14px/1.4 var(--font-body);color:var(--ink-muted)}
body.sn-theme.phone-view .phone-game .phone-trivia-option{gap:12px;margin:12px 0;padding:10px 12px;min-height:58px;background:var(--paper);color:var(--ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 17px/1.35 var(--font-body);text-align:left}
body.sn-theme.phone-view .phone-trivia-option input{accent-color:var(--green)}
body.sn-theme.phone-view .phone-trivia-option span{display:flex;align-items:center;gap:12px}
body.sn-theme.phone-view .phone-trivia-choices{margin-top:14px}
body.sn-theme.phone-view .phone-trivia-option b{display:inline-grid;place-items:center;flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--red);color:var(--cream);font:400 17px/1 var(--font-slab)}
body.sn-theme.phone-view .phone-trivia-option:nth-of-type(2) b,body.sn-theme.phone-view .phone-trivia-option:nth-of-type(3) b{background:var(--green)}
body.sn-theme.phone-view .phone-game .phone-trivia-option:has(input:checked){background:var(--cream-deep);border-color:var(--green);box-shadow:var(--shadow-offset)}
/* Correct answer after the reveal; wins over the "your pick" style so the text stays readable. */
body.sn-theme.phone-view .phone-game .phone-trivia-option.phone-trivia-correct:has(input){background:var(--green);color:var(--cream);border-color:var(--cream);box-shadow:0 0 0 3px var(--green)}
body.sn-theme.phone-view .phone-game .phone-trivia-option.phone-trivia-correct:has(input:checked){box-shadow:0 0 0 3px var(--green),var(--shadow-offset)}
body.sn-theme.phone-view .phone-trivia-correct b{box-shadow:0 0 0 2px var(--cream)}
body.sn-theme.phone-view #trivia-submit,body.sn-theme.phone-view #rather-submit{margin:4px 0 0;background:var(--red);color:var(--cream)}
body.sn-theme.phone-view .phone-charades-clue{margin:14px 0;padding:18px 14px;background:var(--paper);color:var(--green);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 28px/1.25 var(--font-slab)}
body.sn-theme.phone-view .phone-game .phone-charades-clock{margin:12px 0;font:400 48px/1.1 var(--font-display);color:var(--red);text-shadow:3px 3px 0 var(--green)}
body.sn-theme.phone-view .phone-game .phone-charades-actor{margin:10px 0;font:400 28px/1.2 var(--font-slab);color:var(--green)}
body.sn-theme.phone-view .rather-results{background:var(--paper);color:var(--ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md)}

/* Game-code entry and "Let's get you back". */
body.sn-theme.home-view .home-scene{min-height:calc(100dvh - 64px)}
body.sn-theme.home-view .home-scene::after{display:none}
body.sn-theme.home-view .home-content{padding:40px 20px}
body.sn-theme.home-view .home-content h1{font:400 clamp(36px,9vw,56px)/1.1 var(--font-display);color:var(--cream);text-shadow:4px 4px 0 var(--red);-webkit-text-stroke:0}
body.sn-theme.home-view .home-invitation{margin:22px 0;font:400 18px/1.5 var(--font-body);color:var(--cream);text-shadow:none}
body.sn-theme:not(.host-view):not(.phone-view) .game-button{min-height:56px;background:var(--red);color:var(--cream);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);box-shadow:var(--shadow-offset);font:400 19px/1.2 var(--font-slab)}
body.sn-theme.home-view .fallback-entry,body.sn-theme .recovery-panel{background:var(--cream);color:var(--ink);border:var(--border-tile) solid var(--red);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
body.sn-theme.home-view .fallback-entry{padding:12px 22px;text-align:left}
body.sn-theme.home-view .fallback-entry summary{font:400 16px/1.4 var(--font-slab);color:var(--green)}
body.sn-theme.home-view .fallback-entry label{font:400 15px/1.3 var(--font-slab);color:var(--green)}
body.sn-theme.home-view .fallback-entry input{background:var(--paper);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 18px/1.3 var(--font-body)}
body.sn-theme .recovery-panel h1{font:400 30px/1.15 var(--font-display);color:var(--red);text-shadow:2px 2px 0 var(--green)}
body.sn-theme .recovery-panel a{font:400 16px/1.4 var(--font-slab);color:var(--red-dark)}

@media(max-width:350px){
  body.sn-theme.phone-view .elf-actions{grid-template-columns:1fr}
  body.sn-theme.phone-view .phone-title{font-size:26px}
  body.sn-theme.phone-view .phone-greeting{font-size:34px}
}

/* ---------- Buyer account page: sign in, continue or set up Game Night (checkout page is not themed) ---------- */
body.sn-theme.account-view .buyer-panel{max-width:480px;margin:0 auto;padding:52px 20px 40px;background:none;border:0;border-radius:0;color:var(--cream);text-align:center}
body.sn-theme.account-view .sn-account-kicker{display:block;margin-bottom:8px;font:400 15px/1.3 var(--font-slab);letter-spacing:3px;text-transform:uppercase}
body.sn-theme.account-view .buyer-panel h1{margin:0 0 26px;font:400 clamp(34px,10vw,52px)/1.1 var(--font-display);color:var(--cream);text-shadow:4px 4px 0 var(--red)}
body.sn-theme.account-view .sn-account-card{padding:24px 22px;background:var(--cream);color:var(--ink);border:var(--border-tile) solid var(--red);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);text-align:left;font:400 16px/1.5 var(--font-body)}
body.sn-theme.account-view .sn-account-card h2{margin:0 0 6px;font:400 24px/1.25 var(--font-slab);color:var(--green)}
body.sn-theme.account-view .sn-account-card label{display:block;margin:16px 0 6px;font:400 15px/1.3 var(--font-slab);letter-spacing:.5px;color:var(--green)}
body.sn-theme.account-view .sn-account-card input{display:block;width:100%;min-height:52px;margin:0;padding:0 16px;background:var(--paper);color:var(--qr-ink);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);font:400 18px/1.3 var(--font-body)}
body.sn-theme.account-view .sn-account-card button{display:block;width:100%;min-height:48px;margin:12px 0 0;padding:8px 16px;background:var(--paper);color:var(--green);border:var(--border-control) solid var(--green);border-radius:var(--radius-md);box-shadow:none;font:400 16px/1.2 var(--font-slab);letter-spacing:.5px;cursor:pointer}
body.sn-theme.account-view .sn-account-card button:hover{background:var(--cream-deep)}
/* Main actions: red primary buttons. Sign-out and reset tools stay quiet. */
body.sn-theme.account-view .sn-account-card :is(form button,#create-room,#sandbox-buy,#owned-rooms button:first-child){min-height:56px;margin-top:18px;background:var(--red);color:var(--cream);box-shadow:var(--shadow-offset);font-size:19px}
body.sn-theme.account-view .sn-account-card :is(form button,#create-room,#sandbox-buy,#owned-rooms button:first-child):hover{background:var(--red-dark)}
body.sn-theme.account-view .sn-account-card button:disabled{opacity:.55;box-shadow:none}
body.sn-theme.account-view #buyer:not([hidden]){display:flex;flex-direction:column}
body.sn-theme.account-view #purchase-status{margin:0;font:400 18px/1.4 var(--font-slab);color:var(--green)}
body.sn-theme.account-view #owned-rooms>div{margin-top:4px}
body.sn-theme.account-view #sandbox-buy{order:1}
body.sn-theme.account-view .sn-account-divider,body.sn-theme.account-view #buyer>:is(#logout,#revoke-others,#revoke-all){order:2}
body.sn-theme.account-view .sn-account-divider{width:100%;margin:24px 0 6px;border:0;border-top:3px dashed var(--gold)}
body.sn-theme.account-view #account-status{min-height:1.5em;margin:14px 0 0;font:400 15px/1.5 var(--font-body);color:var(--red-dark)}
body.sn-theme.account-view #account-status:empty{margin:0}