/* One header row, direct help and a genuinely separate finale. Existing brand. */
.shell{max-width:1060px}
.compact-header,.intro-mode .compact-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:76px;gap:12px;border-bottom:1px solid #523063}
.header-info{grid-column:1;grid-row:1;display:flex;align-items:center;gap:18px;min-width:0}
.header-info .format{font-size:15px;text-align:left;white-space:nowrap;margin:0;flex:0}
.header-info .pilot{font-size:8px}
.header-info .schedule{padding:0;white-space:nowrap;gap:6px}
.header-info .schedule strong{font-size:13px}
.compact-header .brand-image,.intro-mode .compact-header .brand-image{width:144px}
.compact-header nav{grid-column:3;gap:6px}
.compact-header nav .icon-button{width:44px;min-width:44px;border:1px solid #634174;background:#22132e}
main{max-width:760px;margin-inline:auto}
.game-heading{padding-top:14px}
#controls{display:block;max-width:600px;margin-inline:auto}
.word-selectors{margin-top:10px}
.quick-actions.direct-help{display:flex;gap:6px;width:100%;margin:10px 0 0}
.direct-help .secondary{flex:1;min-width:0;min-height:46px;padding:9px 5px;gap:5px;white-space:nowrap;font-size:13px}
.direct-help .secondary:first-child{flex:1.45}
.direct-help .secondary:nth-child(2){flex:1.35}
.direct-help .secondary b{font-size:12px}
#help-panel{padding-top:14px}
.final-mode .lower-panel{margin-top:24px}
.final-card{padding:24px 16px;border:1px solid #6d4380;border-radius:16px;background:radial-gradient(ellipse at 50% 0%,#46214e66,transparent 70%),#170e21;box-shadow:0 3px 0 #9b246b,0 6px 0 #da861f,0 9px 0 #452568}
.final-top{gap:16px}.final-top h2{font-size:34px}
.final-clock{width:96px;height:96px}
.final-clock span{font-size:40px}
.final-card h3{font-size:22px;line-height:1.3;margin:24px 0 20px}
.producer{display:flex;flex-direction:column;align-items:center;gap:3px;margin:28px 0 8px;padding:0}
.producer img{object-fit:contain;width:148px;height:auto;max-height:60px}
.producer span{font:700 8px Inter;letter-spacing:.24em;color:#cbbbd7}
.intro-card{max-width:620px;padding:0;margin-top:18px}
.show-intro{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/8.3;border-radius:18px;border:1px solid #874594;background:#09040e;margin-bottom:24px;box-shadow:0 3px 0 #bb277c,0 6px 0 #d89224,0 9px 0 #4a2168;perspective:700px}
.intro-host{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;opacity:.9}
.intro-shade{position:absolute;inset:0;background:linear-gradient(90deg,#100619ed,transparent 80%),linear-gradient(0deg,#100619c9,transparent 55%)}
.intro-mark{position:absolute;left:5%;top:27%;width:45%;aspect-ratio:1240/645;overflow:hidden;filter:drop-shadow(0 8px 14px #000b)}
.intro-mark img{position:absolute;width:103.2258%;left:-1.6129%;top:-52.713%}
.intro-caption{position:absolute;left:7%;bottom:13%;font:750 clamp(12px,3vw,19px) Outfit;color:#fff0cc;letter-spacing:.02em}
.stage-block{--block:#f20a83;position:absolute;width:18%;aspect-ratio:1;border:1px solid #ffdca5;border-radius:16%;background:linear-gradient(135deg,#ffffff40,transparent 70%),var(--block);box-shadow:inset 0 2px 0 #ffffff80,3px 5px 0 #541c68,0 0 26px #f20a8333;opacity:.7;transform:rotate(var(--angle))}
.stage-block.one{--block:#702899;--angle:-18deg;left:-8%;top:9%}
.stage-block.two{--block:#ee328f;--angle:13deg;left:27%;bottom:-21%}
.stage-block.three{--block:#ffac28;--angle:23deg;right:-11%;top:-14%}
.stage-beam{position:absolute;inset:-70% -40%;background:linear-gradient(105deg,transparent 46%,#fff5ba8c 50%,transparent 54%);opacity:0;pointer-events:none}
.intro-replay{position:absolute;right:10px;bottom:10px;padding:0;width:44px;height:44px;min-height:44px;border:1px solid #b390bb;background:#13091bd9;font-size:22px}
.intro-card h1{font-size:clamp(29px,5vw,38px);margin-bottom:22px}
.intro-steps{max-width:500px;margin:0 auto 24px}
.intro-mode .brand-button{animation:none!important}
@media(prefers-reduced-motion:no-preference){
 .show-intro.is-playing .intro-host{animation:host-arrive var(--intro-duration,1500ms) cubic-bezier(.2,.7,.2,1) both}
 .show-intro.is-playing .intro-mark{animation:mark-arrive var(--intro-duration,1500ms) cubic-bezier(.16,1,.3,1) both}
 .show-intro.is-playing .stage-block{animation:block-arrive var(--intro-duration,1500ms) cubic-bezier(.16,1,.3,1) both}
 .show-intro.is-playing .stage-block.two{animation-delay:100ms}
 .show-intro.is-playing .stage-block.three{animation-delay:200ms}
 .show-intro.is-playing .stage-beam{animation:gold-sweep var(--intro-duration,1500ms) ease-in-out both}
 .show-intro.is-playing .intro-caption{animation:caption-arrive var(--intro-duration,1500ms) ease both}
}
@keyframes host-arrive{0%{opacity:0;transform:scale(1.13)}40%{opacity:.9}100%{transform:scale(1);opacity:.9}}
@keyframes mark-arrive{0%,12%{opacity:0;transform:translateX(-55%) rotateY(65deg) scale(.8)}52%{opacity:1;transform:translateX(0) rotateY(-5deg) scale(1.035)}100%{opacity:1;transform:none}}
@keyframes block-arrive{from{opacity:0;transform:translateY(120%) rotate(80deg) scale(.3)}to{opacity:.7;transform:rotate(var(--angle))}}
@keyframes gold-sweep{0%,20%{opacity:0;transform:translateX(-80%)}45%{opacity:.6}80%,100%{opacity:0;transform:translateX(80%)}}
@keyframes caption-arrive{0%,45%{opacity:0;transform:translateY(10px)}70%,100%{opacity:1;transform:none}}
@media(max-width:920px){.header-info .format{display:none}}
@media(max-width:600px){
 .compact-header,.intro-mode .compact-header{min-height:70px;gap:4px}
 .compact-header .brand-image,.intro-mode .compact-header .brand-image{width:116px}
 .header-info .schedule span{display:none}.header-info .schedule strong{font-size:12px}
 .compact-header nav{gap:1px}.compact-header nav .icon-button{min-width:40px;width:40px;border:0;background:none}
 .direct-help .secondary{font-size:11px;gap:4px}.direct-help .secondary b{font-size:11px}
 .intro-card{padding-inline:3px}.show-intro{aspect-ratio:4/3}
 .intro-host{object-position:60% center}.intro-mark{top:auto;bottom:16%;width:52%;left:4%}.intro-caption{bottom:8%;left:6%;font-size:13px}
 .final-card{padding:20px 10px}.final-top h2{font-size:30px}
}
@media(max-width:350px){.compact-header .brand-image,.intro-mode .compact-header .brand-image{width:100px}.direct-help .secondary{font-size:10px;gap:3px;padding-inline:3px}.direct-help .secondary b{font-size:10px}.header-info .schedule strong{font-size:11px}}
/* Use the approved original 3D logo on mobile too. */

/* Plain-language onboarding: one face and one text size, no side notes. */
.intro-card #intro-title{font:700 16px/1.55 Inter;text-align:left;max-width:500px;margin:0 auto 12px}
.intro-card .intro-steps{display:block;list-style:decimal;padding-left:24px;font:400 16px/1.55 Inter;color:var(--cream)}
.intro-card .intro-steps li{display:list-item;margin-bottom:12px;animation:none!important;padding-left:4px}
.intro-card #start{font:700 16px/1.55 Inter}

/* Current owner decision: logo at the right edge, no overlapping header text. */
.compact-header,.intro-mode .compact-header{display:flex;justify-content:space-between;gap:12px;min-height:82px}
.compact-header .header-info{order:1;flex:1 1 auto;gap:20px;min-width:0}
.compact-header .header-info .format{flex:none;white-space:nowrap}
.compact-header .header-info .schedule{flex:none;white-space:nowrap}
.compact-header nav{order:2;flex:0 0 auto;margin-left:auto}
.compact-header .brand-button{order:3;flex:0 0 auto;margin-left:4px}
.compact-header .brand-image,.intro-mode .compact-header .brand-image{width:144px}
.intro-card #intro-title,.intro-card .intro-steps,.intro-card #start{font-size:18px;line-height:1.5}
.intro-card .intro-steps li{margin-bottom:15px}
.show-intro{max-height:260px}
.quick-actions.direct-help .secondary{font-size:14px;white-space:normal;flex-direction:column;gap:2px;min-height:58px;line-height:1.2;padding:8px 5px}
.quick-actions.direct-help .secondary b{font-size:14px}
.tile.space-tile{background:#635d6b;border-color:#a79eaf;box-shadow:0 2px 0 #39343f;pointer-events:none}
.tile.space-tile input{visibility:hidden}
.tile.propagated:not(.given):not(.solved):not(.hinted),.word-tile.propagated:not(.given):not(.solved):not(.hinted){background:linear-gradient(135deg,#e0f4ea,#c2ded3);border-color:#f2fff7}
.final-intro{max-width:560px;margin:20px auto;padding:24px 20px;border:1px solid #8d568d;border-radius:14px;background:#241535;box-shadow:0 3px 0 #b32879,0 6px 0 #df8d22,0 9px 0 #5e2b81}
.final-intro h2,.final-intro p,.final-intro button{font:400 18px/1.5 Inter}
.final-intro h2{font-weight:700;margin-bottom:18px}.final-intro p{margin-bottom:18px}.final-intro button{display:block;width:100%;font-weight:700}
.final-card{max-width:660px;overflow:visible}
.phrase-pattern{--final-cell:clamp(24px,6vw,40px);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:10px 4px;max-width:100%;width:100%;margin:22px auto}
.phrase-word{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:100%;min-width:0}
.phrase-pattern .word-tile{flex:0 0 var(--final-cell);width:var(--final-cell);height:var(--final-cell);aspect-ratio:1;min-width:0;font-size:clamp(18px,4vw,27px);line-height:1}
#final-hint{margin:16px auto 0;min-height:48px;font-size:16px}
#final-hint b{font-size:16px}
#final-pattern .word-tile.hinted{box-shadow:0 2px 0 #785087,0 0 10px #b677d333}
.word-pattern{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:100%;width:100%}
.word-pattern .word-tile{flex:0 0 30px;width:30px;height:30px;font-size:21px;aspect-ratio:1}
@media(max-width:700px){
 .compact-header,.intro-mode .compact-header{gap:5px;min-height:72px}
 .compact-header .header-info{gap:0}.compact-header .header-info .format{display:none}
 .compact-header .brand-image,.intro-mode .compact-header .brand-image{width:116px}
 .compact-header nav{gap:0}.compact-header nav .icon-button{width:40px;min-width:40px}
 .compact-header .header-info .schedule strong{font-size:13px}
 .final-intro{padding:20px 14px}.final-card{padding-inline:12px}
}
@media(max-width:350px){.compact-header .brand-image,.intro-mode .compact-header .brand-image{width:100px}.compact-header .header-info .schedule strong{font-size:12px}}

/* Result: full-width host and the next Warsaw 19:00, without image text overlays. */
.result-farewell{margin:26px 0 0;border:1px solid #8f619b;border-radius:16px;overflow:hidden;background:#241535;box-shadow:0 3px 0 #8e337e,0 6px 0 #db962e}
.result-farewell img{display:block;width:100%;height:auto;aspect-ratio:1672/940;object-fit:contain}
.result-farewell figcaption{padding:18px 14px;text-align:center}
.result-farewell p{font:400 18px/1.5 Inter,sans-serif;margin:0 0 8px}
.result-farewell #next-round-title{font-weight:700;color:var(--cream)}
.result-farewell #next-round-countdown{font-variant-numeric:tabular-nums;color:var(--gold)}
.result-farewell #next-round-note{color:var(--muted)}

/* One editorial edition. A centered format title and real host photographs. */
.format-title{font:750 clamp(20px,5vw,28px)/1.25 Outfit,sans-serif;text-align:center;margin:12px 0 6px;color:var(--cream)}
.format-title .pilot{display:inline-block;vertical-align:middle;font:700 12px/1 Inter;letter-spacing:.08em;margin-left:8px;color:var(--muted)}
.question-line{display:flex;align-items:center;justify-content:center;gap:12px}
.question-line h1{flex:1;min-width:0}
.host-avatar{width:56px;height:70px;object-fit:cover;object-position:50% 20%;border-radius:10px;border:1px solid #b37b9f}
.show-intro{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:auto;max-height:none;min-height:220px;isolation:isolate}
.show-intro .intro-host{position:relative;grid-column:2;grid-row:1;inset:auto;width:100%;height:100%;max-height:380px;object-fit:cover;object-position:50% 25%;opacity:1;z-index:1;animation:none!important}
.host-invite{grid-column:1;grid-row:1;align-self:center;padding:20px 18px;z-index:2;text-align:left}
.host-invite p{font:400 18px/1.5 Inter,sans-serif;margin:0 0 14px}
.host-invite .host-hook{font-weight:700;color:var(--gold)}
.show-intro .intro-shade,.show-intro .intro-mark,.show-intro .intro-caption{display:none}
.show-intro .stage-block{z-index:0;opacity:.2}
.show-intro .stage-beam{z-index:0}.show-intro .intro-replay{z-index:3}
.invite-question{font:700 20px/1.4 Inter,sans-serif;text-align:center;margin:22px auto 10px;max-width:560px}
.daily-promise{font:400 16px/1.5 Inter,sans-serif;text-align:center;color:var(--muted);margin:0 0 18px}
.intro-card #start{margin-bottom:24px;width:100%;max-width:500px}
#invite-game{display:block;margin:0 auto;min-height:48px;font-size:16px}
#invite-status{text-align:center;font-size:16px;margin-top:12px}
.result-farewell img{height:auto;width:100%;max-height:560px;aspect-ratio:4/3;object-fit:cover;object-position:50% 32%}
@media(max-width:380px){.host-invite{padding:14px 10px}.host-invite p{font-size:16px}.host-avatar{width:44px;height:56px}.question-line{gap:8px}}

/* Small tiles reserve a corner for the number; no checks over the letters. */
.board .tile input{padding:9px 0 0}
.board .start-number{top:1px;left:2px;font:700 10px/10px Inter;letter-spacing:-.3px}
.board .mark{right:2px;bottom:2px;width:4px;height:4px;background:#54236b;border-radius:50%}
.board .cross-mark{border-radius:0;transform:rotate(45deg)}
.board .hint-mark{width:5px;height:3px;border-radius:1px}
.keyboard-close{display:block;margin:0 0 2px auto;padding:4px 8px;min-height:44px;font:700 13px/1.2 Inter;color:var(--cream);text-decoration:underline;text-underline-offset:3px}

/* Only while an on-screen keyboard actually reduces the visual viewport.
   The board scrolls inside the available space; inputs remain above the keyboard. */
.keyboard-mode #game{position:fixed;z-index:40;inset:auto 0 auto;top:var(--visible-top,0px);height:var(--visible-height,100dvh);max-width:1060px;width:100%;margin:0 auto;padding:6px 10px max(8px,env(safe-area-inset-bottom));background:var(--night);display:flex;flex-direction:column;overflow:hidden}
.keyboard-mode .game-heading{flex:0 0 auto;padding:0 0 4px}
.keyboard-mode .question-line h1{font:700 14px/1.25 Inter;margin:0}
.keyboard-mode .host-avatar,.keyboard-mode #size{display:none}
.keyboard-mode .round-toolbar{min-height:28px;max-width:none}
.keyboard-mode .scoreboard strong{font-size:18px}
.keyboard-mode .scoreboard span{font-size:13px}
.keyboard-mode .play{flex:1 1 auto;min-height:48px}
.keyboard-mode .board-area,.keyboard-mode .board-frame{height:100%}
.keyboard-mode .board-scroll{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.keyboard-mode .lower-panel{flex:0 0 auto;margin:7px auto 0;padding:0;max-width:760px}
.keyboard-mode #controls{max-width:none}
.keyboard-mode #selectors,.keyboard-mode .direct-help,.keyboard-mode #help-panel{display:none!important}
.keyboard-mode #message{font-size:13px;line-height:18px;margin:3px 0 0;min-height:0}
.keyboard-mode #message:empty{display:none}
.keyboard-mode .input-row>input{font-size:20px;min-height:44px;padding:8px 12px}
.keyboard-mode .input-row>.icon-button{min-height:44px}
.keyboard-mode .input-row>input:focus-visible{outline-width:2px;outline-offset:1px}
.keyboard-mode.final-mode #game{display:block;overflow-y:auto;overscroll-behavior:contain}
.keyboard-mode.final-mode .lower-panel{margin:0}
.keyboard-mode .final-card{padding:12px 10px}
.keyboard-mode .final-top h2{font-size:22px}
.keyboard-mode .final-clock{width:58px;height:58px}.keyboard-mode .final-clock span{font-size:25px}
.keyboard-mode .final-card h3{font-size:17px;margin:10px 0}
.keyboard-mode .phrase-pattern{margin:12px auto;--final-cell:28px}
.keyboard-mode #final-form{position:sticky;bottom:0;padding:8px 0;background:#170e21;z-index:2}
@media(max-height:360px){.keyboard-mode .question-line h1{font-size:13px}.keyboard-mode .keyboard-close{min-height:36px}}

/* Standard 12: emerald, black and gold extend the approved existing mark. */
:root{--night:#000000;--gold:#E5B94E;--emerald:#0B493C;--panel:#091712;--muted:#CBBBD7}
body{background:var(--night)}
.brand-image{aspect-ratio:2/1;mix-blend-mode:normal}
.brand-image img{position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.compact-header{border-bottom-color:#28574C}
.board-frame{border-color:#28574C;box-shadow:0 2px 0 #42105F,0 4px 0 #E5B94E,0 6px 0 #0B493C}
.final-card{background:radial-gradient(ellipse at 50% 0%,#0B493C88,transparent 70%),#091712;border-color:#426F60}
.final-intro,.result-farewell{background:#091712;border-color:#426F60}
.show-intro{background:#000;box-shadow:0 3px 0 #F20A83,0 6px 0 #E5B94E,0 9px 0 #0B493C;--intro-duration:1500ms}
.show-intro[data-variant="short"]{--intro-duration:800ms}.show-intro[data-variant="flash"]{--intro-duration:400ms}
.stage-block.one{--block:#0B493C}.stage-block.three{--block:#E5B94E}
.primary{background:linear-gradient(145deg,#FFE08A,#E5B94E 65%,#C98D26);color:#16100B;border-color:#FFE08A}
.keyboard-mode #final-form{background:#091712}
.producer img{mix-blend-mode:screen}

.intro-deck{max-width:500px;margin:0 auto 16px;text-align:center;padding:10px 0}
.intro-step-count{font:400 14px/1.4 Inter;color:var(--muted);margin:0 0 14px}
.intro-slide{font:400 22px/1.4 Inter;color:var(--cream);min-height:93px;margin:0 0 18px}
.intro-nav{display:flex;justify-content:space-between;gap:16px}
.intro-nav button{min-height:44px;font:700 16px/1.4 Inter}
.intro-card .show-intro{min-height:180px;max-height:250px;margin-bottom:14px}
.intro-card .show-intro .intro-host{max-height:250px}
.intro-card #start{margin-bottom:14px}