/* Mechanic: a drawing passed around a circle, degrading with each hand-off.
   The crayon-on-paper chain is the motif. */
:root { --t-accent:#e8590c; --accent:var(--t-accent); --accent-light:#ff922b; --accent-2:#e8590c; --accent-glow:transparent; --bg-card-hover:var(--t-panel-deep); --chrom-bg:var(--t-bg); --well:var(--t-panel-deep); --hairline:var(--t-line); --tint:var(--t-panel-deep); }
body { font-family:var(--cab-sans); background:var(--t-bg); }
#particles { display:none; }
.games-home-link,.sketchrelay-account-button { position:fixed; top:15px; font-size:12px; border-radius:3px; z-index:30; background:var(--t-bg); backdrop-filter:none; box-shadow:none; }
.games-home-link { left:max(16px,calc((100vw - 1120px)/2)); }
.sketchrelay-account-button { right:max(16px,calc((100vw - 1120px)/2)); }
.screen { background:none; }
.home-container { width:min(470px,calc(100% - 32px)); padding:28px 0; margin:54px auto 30px; background:transparent; border:0; border-radius:0; box-shadow:none; }
.logo-section { margin-bottom:32px; text-align:left; }
.logo-row { justify-content:flex-start; gap:0; }
.logo-mark { display:none; }
.game-title { font:600 var(--fs-display)/1.04 var(--cab-sans); letter-spacing:-.02em; color:var(--t-ink); background:none; -webkit-text-fill-color:var(--t-ink); text-shadow:none; }
.game-title::after { content:""; display:block; width:44%; height:3px; margin-top:10px; background:var(--t-accent-ink, #b23b32); }
.game-subtitle { margin-top:17px; font-size:13px; color:var(--t-muted); }
.home-actions { border-top:1px solid var(--t-line); padding-top:24px; gap:16px; }
.btn,.btn-lg { min-height:42px; border-radius:3px; font-size:13px; letter-spacing:0; box-shadow:none; }
.btn-primary { background:var(--t-ink); color:var(--t-bg); border-color:var(--t-ink); }
.btn-primary:hover { background:var(--accent); color:#201914; }
.btn-icon { display:none; }
.input-group input,.change-name-input { border-radius:2px; background:transparent; border:1px solid var(--t-line-strong); font-family:var(--cab-mono); }
.input-group label { font:10px var(--cab-mono); text-transform:uppercase; letter-spacing:.08em; }
.divider { font:11px var(--cab-mono); color:var(--t-muted); }
.lobby-container { max-width:1080px; padding-top:70px; }
.players-section,.config-section,.chain-mini,.voting-left,.voting-right,.results-scoreboard,.chat-section { border-radius:2px; box-shadow:none; background:transparent; }
.players-section,.config-section { border:0; border-top:1px solid var(--t-line); padding-inline:0; }
.player-row,.chain-item,.vote-target { border-radius:2px; box-shadow:none; }
.code-value { font-family:var(--cab-mono); font-size:26px; letter-spacing:.15em; }
@media(max-width:720px){.home-container{margin-top:72px}.lobby-container{padding-inline:14px}.logo-section{margin-bottom:25px}.game-title{font-size:45px}.lobby-header{gap:12px}}
#screen-home.active,#screen-name.active{align-items:flex-start;justify-content:center;padding-top:100px}
#screen-home .home-container,#screen-name .home-container{margin:0 auto;padding:0 0 24px;width:min(470px,calc(100% - 32px))}
#screen-home .logo-section{margin-bottom:25px}.home-actions{padding-top:22px}.game-title{font-size:54px}
.home-actions .btn-primary{background:var(--t-ink);background-image:none}.home-actions .btn-secondary{background:transparent;background-image:none;border-color:var(--t-line-strong);color:var(--t-ink)}
.btn-secondary{box-shadow:none;background-image:none;border-color:var(--t-line)}
@media(max-width:720px){#screen-home.active,#screen-name.active{padding-top:96px}.game-title{font-size:44px}.home-container{max-width:410px}.home-actions{gap:12px}}