/* A calm playing surface; the approved logo remains the expressive brand. */
:root{--night:#080A09;--panel:#151917;--cream:#F4F2EB;--muted:#AEB6B0;--gold:#E5B94E}
body,button,input,h1,h2,h3,p,span{font-family:Inter,system-ui,sans-serif}
body{font-size:16px;line-height:1.45;background:var(--night)}
button,.secondary,.primary,.direct-help .secondary,.direct-help .secondary b,.text-button,.keyboard-tools button{font-size:16px;font-weight:400;line-height:1.35}
.format-title,.game-heading h1,.intro-slide,.final-top h2,.final-card h3,.final-intro h2,#final-host-line,.wisdom,.result-card h2{font:700 24px/1.35 Inter,system-ui,sans-serif}
.scoreboard strong,#presenter-count,.final-clock span,.result-time{font:700 36px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.03em}
.scoreboard span,.schedule,.header-info .schedule strong,.intro-step-count,.question-top h2,.question-top>span,#final-intro-rule,#bonus,.muted,.small,#message,#final-message,#result-message,#breakdown,.host-invite p{font:400 16px/1.45 Inter,system-ui,sans-serif}
.brand-image{border-radius:12px}.format-title{margin:12px 0 16px}.pilot{display:none!important}
.compact-header{border-color:#343C36}.compact-header nav .icon-button{border:0;background:transparent}
.game-heading h1{margin:0 auto 12px;max-width:660px}.round-toolbar{margin:4px 0 12px}
.board-frame,.final-card,.final-intro,.result-farewell,.show-intro{background:var(--panel);border:1px solid #3C473F;box-shadow:none;border-radius:14px}
.board .tile,.word-tile{background:#F4F2EB;border:1px solid #CECFBF;box-shadow:0 2px 0 #777D6B}
.board .tile input,.word-tile{font-family:Inter,system-ui,sans-serif;font-weight:700;color:#15251D}
.board .tile.given,.word-tile.given{background:#F6DB91}
.board .tile.solved,.word-tile.solved,.board .tile.propagated,.word-tile.propagated{background:#E5EEE4}
.board .tile.hinted,.word-tile.hinted{background:#D9E1DB}
.board .tile.active-word{outline-color:#E5B94E;box-shadow:0 2px 0 #777D6B}.board .tile.active-word::after{border-color:#E5B94E}
.space-tile,.board .space-tile,.word-tile.space-tile{background:#635D6B!important;border-color:#A79EAF;box-shadow:none}
.secondary,.word-selectors button,.keyboard-row button{background:#242C26;border:1px solid #59665C;box-shadow:none;color:var(--cream);border-radius:8px}
.primary,.word-selectors button.selected,.keyboard-last button:last-child{background:#E5B94E;border:1px solid #E5B94E;box-shadow:none;color:#162017;font-weight:700;border-radius:8px}
.secondary b,.direct-help .secondary b{color:inherit;font-weight:400}
.input-row>input,#account-nick{border:1px solid #657268;border-radius:8px;background:#151917;color:#F4F2EB;font:400 24px/1.35 Inter;min-height:48px;padding:10px 12px;outline-offset:2px}
.input-row>input:focus-visible,#account-nick:focus-visible{outline:2px solid #E5B94E}
.word-selectors button{font-size:24px;min-height:44px}.direct-help .secondary{white-space:normal;min-height:48px;padding:8px}
.game-keyboard{background:var(--night)}.keyboard-tools{color:var(--muted);font:400 16px/1.4 Inter}.keyboard-row button{font:700 16px/1.4 Inter;min-height:44px}.keyboard-last button{font-size:16px}
.helper-question{border-color:#E5B94E;font-size:16px}.final-card h3{margin:20px 0}.final-clock{border-color:#657268;background:#151917}.final-clock small{font-size:16px}
#account-dialog{background:#151917;color:#F4F2EB;border:1px solid #657268;border-radius:16px;width:min(480px,calc(100% - 24px));padding:24px;max-height:calc(100dvh - 32px);overflow:auto;font:400 16px/1.45 Inter}
#account-dialog::backdrop{background:#000b}#account-close{display:block;margin-left:auto}#account-title{font:700 24px/1.35 Inter;margin:8px 0 20px}
#account-dialog p{font:400 16px/1.45 Inter;margin:16px 0}#account-dialog a.primary{display:block;text-align:center;padding:12px;text-decoration:none}
#account-nick{display:block;width:100%;margin:8px 0;font-size:16px}#account-form button{width:100%}#account-signout{display:inline-block;margin-top:20px}#record-status,#account-message{font-size:16px}
#register-record{margin:18px auto;min-height:48px}#server-ranking{margin:24px 0 32px}#ranking-list p,#account-record-list p{padding:12px 0;border-bottom:1px solid #343C36}
@media(max-width:600px){.direct-help .secondary,.direct-help .secondary b{font-size:16px}.direct-help .secondary{flex-direction:column;gap:0}.question-line h1{font-size:24px}.keyboard-tools button{font-size:16px}.intro-slide{font-size:24px;min-height:110px}.header-info .schedule{flex-direction:column;align-items:flex-start;gap:0}.compact-header .brand-image{width:128px}.word-selectors{gap:4px}}
/* Keys occupy their own row and never cover the answer or hints. */
.game-keyboard{position:static;bottom:auto;padding-top:8px}
/* The host occupies a studio scene, never a small portrait tile. */
.intro-card .show-intro,.presenter-frame,.result-farewell{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.presenter-frame{max-width:none;margin:0 0 24px}
.intro-card .intro-host,.presenter-frame img,.result-farewell img{border:0;border-radius:0;object-fit:contain}
.final-intro{border:0;border-radius:0;background:transparent;padding:0 0 24px}
.host-invite,.intro-shade,.intro-mark,.intro-caption,.intro-replay{display:none!important}
#presenter-count{font-variant-numeric:tabular-nums;width:32%;height:50%;font-size:clamp(36px,8vw,72px)}
#final-start-signal{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:700 24px/1.35 Inter;color:var(--gold)}
.final-card{position:relative}.final-clock span,.scoreboard strong,.schedule strong{font-variant-numeric:tabular-nums}
.word-selectors button.done::after{position:absolute;right:5px;bottom:3px}
#invite-game{border:0;background:transparent;font-weight:400}
.intro-nav{align-items:center}.intro-nav .secondary{border:0;background:transparent}
#intro-next{background:var(--gold);color:#162017;font-weight:700;padding:12px 24px}
.intro-deck{max-width:680px;margin:auto}.intro-slide{min-height:65px;margin:16px 0}
/* Full-viewport studio scenes: responsive art direction, no portrait cards. */
#welcome:not([hidden]),#final-intro:not([hidden]){position:fixed;inset:0;z-index:80;width:100%;max-width:none;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:24px max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom));isolation:isolate;background:#080A09;text-align:left}
#welcome .show-intro,#final-intro .presenter-frame{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;z-index:-2;pointer-events:none;overflow:hidden;animation:none}
#welcome .intro-host,#final-intro .presenter-frame img{position:absolute;inset:0;width:100%;height:100%!important;max-height:none!important;aspect-ratio:auto;object-fit:cover;object-position:62% 20%}
#welcome::before,#final-intro::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#080A09ed 0%,#080A09b8 32%,transparent 70%);pointer-events:none}
#welcome .intro-deck{width:min(460px,100%);max-width:none;margin:0}
#welcome .intro-slide,#welcome .intro-detail,#final-intro h2,#final-host-line,#final-intro-rule{font:400 18px/1.5 Inter,system-ui,sans-serif;max-width:460px;min-height:0;margin:10px 0;color:#fff}
#welcome .intro-step-count{font:400 16px/1.5 Inter;color:#ddd;margin:0 0 12px}
#welcome .intro-nav{justify-content:flex-start;margin:18px 0 6px;gap:16px}
#welcome #start,#welcome #invite-game{margin:2px 0;padding:8px 0;color:#fff;min-height:40px}
#welcome #invite-status:empty{display:none}
#welcome #install-app,#welcome #install-help{margin:4px 0}
#final-intro #start-final{margin:16px 0 0;min-height:48px}
#final-intro #presenter-count{position:fixed;inset:0;width:100%;height:100%;display:grid;place-items:center;font-size:96px;background:#0005}
#final-intro #presenter-count:empty{display:none}
/* Wide 16:9 and landscape: text left, presenter to the right. */
@media(min-aspect-ratio:3/2){#welcome:not([hidden]),#final-intro:not([hidden]){padding-left:5vw;padding-bottom:6vh}#welcome .intro-host,#final-intro .presenter-frame img{object-position:65% 25%}}
/* 4:3 tablet and 1:1: keep the face high and reserve the bottom for copy. */
@media(max-aspect-ratio:3/2){#welcome::before,#final-intro::before{background:linear-gradient(0deg,#080A09 0%,#080A09e8 25%,#080A0930 63%,transparent 85%)}#welcome .intro-deck{width:min(620px,100%)}#welcome .intro-detail,#welcome .intro-slide{max-width:620px}#welcome .intro-host,#final-intro .presenter-frame img{object-position:60% top}}
/* Portrait 9:16: original studio photograph fills the screen, not a tile. */
@media(max-aspect-ratio:4/5){#welcome:not([hidden]),#final-intro:not([hidden]){padding:16px 20px max(14px,env(safe-area-inset-bottom))}#welcome .intro-host,#final-intro .presenter-frame img{object-position:60% top}#welcome .intro-slide,#welcome .intro-detail,#final-intro h2,#final-host-line,#final-intro-rule{font-size:16px;line-height:1.45}#welcome::before,#final-intro::before{background:linear-gradient(0deg,#080A09 0%,#080A09ee 34%,#080A0966 58%,transparent 85%)}}
@media(max-height:500px){#welcome:not([hidden]),#final-intro:not([hidden]){justify-content:flex-start;padding:14px 24px}#welcome .intro-slide,#welcome .intro-detail{font-size:16px;line-height:1.35}#welcome .intro-nav{margin:8px 0}#welcome #invite-game{display:none}}
/* A single compact question over the board; clues appear on word selection. */
.playing-mode .format-title{display:none}.playing-mode .compact-header{padding-top:4px;padding-bottom:4px;margin-bottom:8px;min-height:0}.playing-mode .brand-image{width:88px}
.playing-mode .game-heading h1{font-size:20px;line-height:1.25;margin:0 auto 6px;max-width:100%}.playing-mode .question-line{margin:0}.playing-mode .round-toolbar{margin:0 0 6px}.playing-mode .scoreboard strong{font-size:24px}
#show-question{display:none}.direct-help{grid-template-columns:1fr 1fr!important}.helper-question{margin:6px 0;padding:8px 10px}.question-top{margin:4px 0}
.keyboard-row button{min-height:44px}.playing-mode #message:empty{display:none}

#welcome .intro-deck{text-align:left}#welcome #start{width:auto;align-self:flex-start;font-weight:400}

.result-mode{isolation:isolate}.result-mode .result-farewell img{position:fixed;inset:0;z-index:-1;width:100vw;height:100dvh;max-height:none;object-fit:cover;object-position:60% top;filter:brightness(.28)}.result-mode .result-card{background:transparent}.result-mode .result-farewell{margin-top:24px}

/* Instructions lead the composition; the host and one coherent grid support them. */
#welcome .intro-deck{width:min(690px,100%)}
#welcome .intro-slide{font:700 clamp(34px,4.4vw,62px)/1.08 Inter,system-ui,sans-serif;letter-spacing:-.035em;max-width:690px;margin:12px 0 20px;text-wrap:balance}
#welcome .intro-detail{font:400 clamp(22px,2.1vw,28px)/1.4 Inter,system-ui,sans-serif;max-width:660px;margin:0 0 12px;text-wrap:pretty}
#welcome::before{background:linear-gradient(90deg,#080a09f5 0%,#080a09df 35%,#080a0960 60%,#080a0910 100%)}
#welcome #invite-game,#welcome #install-help{font-size:14px}#welcome #start{font-size:16px}
#final-intro h2,#final-host-line{font:700 clamp(32px,4vw,56px)/1.12 Inter;max-width:620px;letter-spacing:-.025em}#final-intro-rule{font:400 clamp(22px,2vw,28px)/1.4 Inter;max-width:620px}
@media(max-aspect-ratio:3/2){#welcome::before{background:linear-gradient(0deg,#080a09 0%,#080a09ed 35%,#080a0980 60%,transparent 90%)}}
@media(max-width:600px){#welcome .intro-slide{font-size:34px;line-height:1.1;margin:10px 0 14px}#welcome .intro-detail{font-size:21px;line-height:1.35}#welcome .intro-nav{margin:12px 0 4px}#welcome #invite-game{display:none}}
@media(max-height:600px){#welcome .intro-slide{font-size:30px;margin:6px 0 10px}#welcome .intro-detail{font-size:20px;line-height:1.3}#welcome .intro-step-count{margin-bottom:4px}#welcome #install-help,#welcome #invite-game{display:none}}

@media(max-aspect-ratio:4/5){#welcome .intro-host,#final-intro .presenter-frame img,.result-mode .result-farewell img{object-position:center top}}
#ranking-tabs{display:flex;gap:8px;margin:16px 0}#ranking-tabs button[aria-pressed="true"]{background:var(--gold);color:#162017}#ranking-rule{font-size:16px;color:var(--muted)}
#welcome .intro-mark{display:block!important;position:fixed;top:18px;right:20px;left:auto;bottom:auto;width:128px;height:auto;transform:none;opacity:1;animation:none;z-index:4}
#welcome .intro-mark img{width:100%;height:auto;display:block}
@media(max-width:600px){#welcome .intro-mark{width:100px;top:12px;right:12px}}
#welcome .intro-mark{aspect-ratio:auto;overflow:visible;filter:none}
#welcome .intro-mark img{position:static;inset:auto;transform:none}

.price-format-link{display:flex;justify-content:center;align-items:center;text-decoration:none;min-height:48px;margin-top:12px;color:#e5b94e}

/* Geometry is a validated SVG, never generated photographic tiles. */
#welcome .show-intro,#final-intro .presenter-frame{background:#000}
#welcome .intro-host,#final-intro .presenter-frame img{object-fit:contain;object-position:right center;background:#000;opacity:1}
#welcome .show-intro::after,#final-intro .presenter-frame::after,.result-mode .result-farewell::before{content:'';position:fixed;left:5vw;top:4vh;width:36vw;height:43vh;background:url('/assets/studio-crossword.svg') center/contain no-repeat;pointer-events:none;opacity:.6;z-index:1}
#welcome::before,#final-intro::before{background:linear-gradient(0deg,#080a09 0%,#080a09cc 12%,transparent 58%)}
#welcome .intro-deck{width:min(620px,55vw)}
#welcome .intro-slide{font-size:clamp(34px,3.5vw,56px)}
#welcome .intro-detail{font-size:clamp(21px,1.8vw,26px)}
.result-mode .result-farewell img{object-fit:contain;object-position:right center;background:#000}
.result-mode .result-farewell::before{z-index:-1;opacity:.15}
@media(max-aspect-ratio:3/2){
 #welcome .intro-host,#final-intro .presenter-frame img{object-position:right top}
 #welcome .intro-deck{width:100%}
 #welcome .show-intro::after,#final-intro .presenter-frame::after{left:1vw;top:6vh;width:45vw;height:34vh;opacity:.65}
 #welcome::before,#final-intro::before{background:linear-gradient(0deg,#080a09 0%,#080a09f5 27%,#080a0970 48%,transparent 67%)}
}
@media(max-aspect-ratio:4/5){
 #welcome .intro-host,#final-intro .presenter-frame img{object-fit:cover;object-position:right top}
 #welcome .show-intro::after,#final-intro .presenter-frame::after{height:29vh;top:10vh;width:43vw}
}
@media(max-height:600px) and (min-aspect-ratio:3/2){
 #welcome .show-intro::after,#final-intro .presenter-frame::after{left:51vw;top:8vh;width:18vw;height:43vh;opacity:.4}
}

@media(max-aspect-ratio:4/5){#welcome .intro-host,#final-intro .presenter-frame img{inset:8vh 0 auto;height:64vh!important;object-fit:cover;object-position:70% top}#welcome .show-intro::after,#final-intro .presenter-frame::after{top:10vh;width:38vw;height:26vh}}
/* Owner correction: instruction copy and its navigation are centered. */
#welcome:not([hidden]),#final-intro:not([hidden]){align-items:center;text-align:center;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
#welcome .intro-deck{width:min(760px,100%);text-align:center;margin-inline:auto}
#welcome .intro-slide,#welcome .intro-detail,#final-intro h2,#final-host-line,#final-intro-rule{margin-left:auto;margin-right:auto;text-align:center}
#welcome .intro-nav{justify-content:center}
#welcome #start{align-self:center}
#welcome::before,#final-intro::before{background:linear-gradient(0deg,#080a09 0%,#080a09ed 26%,#080a0980 48%,transparent 75%)}
#final-intro #start-final{width:min(420px,100%)}
@media(max-height:600px) and (min-aspect-ratio:3/2){#welcome:not([hidden]),#final-intro:not([hidden]){justify-content:center}#welcome::before,#final-intro::before{background:#080a09b8}#welcome .intro-deck{width:min(700px,100%)}}
#welcome:not([hidden]){justify-content:center}
#welcome::before{background:linear-gradient(90deg,#080a09b8,#080a09df 30%,#080a09e8 50%,#080a09c9 72%,#080a0955)}
@media(max-aspect-ratio:4/5){#welcome:not([hidden]){justify-content:center}#welcome::before{background:linear-gradient(0deg,#080a09ee,#080a09dc 38%,#080a09a6 65%,#080a0955)}}

/* Full sentences, one secondary action row, and the established logo palette. */
#welcome .intro-shortcuts{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(12px,4vw,28px);width:100%;margin:18px auto 0}
#welcome .intro-shortcuts button{display:inline-flex;align-items:center;justify-content:center;width:auto;flex:0 1 auto;min-height:44px;padding:8px 2px;margin:0!important;font:400 16px/1.35 Inter;white-space:nowrap;color:#F7E8CF}
#welcome .intro-shortcuts button[hidden]{display:none!important}
#welcome .intro-slide{font-size:clamp(30px,3.6vw,48px);max-width:760px;line-height:1.15}
#welcome .intro-detail{max-width:740px;font-size:clamp(20px,1.9vw,25px);line-height:1.45}
#welcome #install-status{max-width:640px;text-align:center;font-size:16px}
@media(max-width:600px){#welcome .intro-slide{font-size:30px}#welcome .intro-detail{font-size:20px}#welcome .intro-shortcuts{gap:20px}}
@media(max-height:600px){#welcome:not([hidden]){justify-content:flex-start;padding-top:16px}#welcome .intro-slide{font-size:27px}#welcome .intro-detail{font-size:18px}#welcome .intro-shortcuts{margin-top:8px}}
.board-frame,.final-card{background:linear-gradient(145deg,#241032,#110818);border:1px solid #B24F9D;box-shadow:0 3px 0 #8B2AAB,0 6px 0 #F20A83,0 9px 0 #DDA632}
.board .tile,.word-tile{background:linear-gradient(145deg,#FFF7E5,#F1DDB7);border:1px solid #FFF1D3;box-shadow:0 2px 0 #B07A35}
.board .tile input,.word-tile{color:#30103F}
.board .tile.given,.word-tile.given{background:linear-gradient(145deg,#FFF1A0,#EDBA36);border-color:#FFEAB5;box-shadow:0 2px 0 #A96C23,0 0 7px #E5B94E55}
.board .tile.solved,.word-tile.solved{background:linear-gradient(145deg,#FFF3C8,#F4D782);border-color:#E5B94E}
.board .tile.propagated,.word-tile.propagated{background:#F3DDF7;border-color:#BC6BD5;box-shadow:0 2px 0 #733391}
.board .tile.hinted,.word-tile.hinted{background:#FFDAB7;border-color:#F4A047;box-shadow:0 2px 0 #B86B29}
.board .tile.active-word{outline-color:#F20A83;box-shadow:0 2px 0 #BB398D,0 0 6px #F20A8355}.board .tile.active-word::after{border-color:#F20A83}
.board .tile.wrong{background:#FFE1E6;border-color:#B81443}
.space-tile,.board .space-tile,.word-tile.space-tile{background:#635D6B!important;border-color:#A79EAF!important;box-shadow:none!important}
.word-selectors button,.direct-help .secondary,.keyboard-row button{background:linear-gradient(#512665,#32153F);border-color:#A46EB3;color:#FFF4E2}
.word-selectors button.selected,.keyboard-last button:last-child{background:linear-gradient(#FFECA2,#E5B94E);color:#30103F;border-color:#FFEBAE}

#welcome #invite-game,#welcome #install-help{display:inline-flex}#welcome #install-help[hidden]{display:none!important}

.result-mode .format-title{display:none}.result-headline{display:flex;align-items:baseline;justify-content:center;gap:14px;white-space:nowrap}.result-headline h2{margin:0;font-size:24px}.result-headline .result-time{margin:0;font-size:clamp(32px,7vw,54px)}.result-card #breakdown{font-size:16px;margin:10px 0}.result-card .actions{gap:10px}.seed-arrival{animation:seed-connect .38s ease-out both;animation-delay:var(--seed-delay)}@keyframes seed-connect{from{opacity:0;transform:translateY(-18px) scale(.75)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.seed-arrival{animation:none}}

#photo-preview{width:min(580px,calc(100% - 24px));max-height:90dvh;overflow:auto;background:#1C0B28;color:#FFF4DE;border:1px solid #E5B94E;border-radius:12px;padding:16px}#photo-preview::backdrop{background:#000c}#photo-composite{width:100%;height:auto;display:block}#photo-download{display:block;text-align:center;margin:12px 0}#photo-close{display:block;margin-left:auto}