/* One bounded game surface. The keyboard always owns visible space. */
body.playing-mode,body.final-mode{overflow:hidden}
.playing-mode .shell,.final-mode .shell{height:100dvh;min-height:0;max-width:1440px;display:flex;flex-direction:column;padding:0 max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left))}
.playing-mode .compact-header,.final-mode .compact-header{flex:0 0 44px;height:44px;margin:0;padding:0;min-height:44px}
.playing-mode .brand-image,.final-mode .brand-image{width:78px}
.playing-mode .producer,.final-mode .producer,.playing-mode .format-title,.final-mode .format-title{display:none}
.playing-mode #game:not([hidden]){display:grid;flex:1;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(72px,1fr) auto auto;gap:6px;overflow:hidden}
.playing-mode .lower-panel,.final-mode .lower-panel{display:contents}
.playing-mode .game-heading{grid-row:1;padding:4px 0 0}
.playing-mode .game-heading h1{font-size:clamp(16px,2.7vw,20px);line-height:1.2;margin-bottom:4px}
.playing-mode .round-toolbar{min-height:28px;margin:0}.playing-mode .scoreboard strong{font-size:24px}
.playing-mode #play{grid-row:2;min-height:0;height:100%;overflow:hidden;padding-bottom:9px}
.playing-mode .board-area,.playing-mode .board-frame{height:100%;min-height:0}
.playing-mode .board-frame{padding:5px;border-radius:12px}
.playing-mode .board-scroll{height:100%;max-height:100%!important;overflow:auto!important;display:grid;align-items:center;padding:2px;touch-action:pan-x pan-y pinch-zoom}
.playing-mode #board{margin:auto;gap:var(--board-gap,3px);align-self:center}
.playing-mode #controls{grid-row:3;max-height:clamp(110px,calc(100dvh - 480px),220px);overflow:auto;overscroll-behavior:contain;padding:0;scrollbar-width:thin}
.playing-mode #entry{position:sticky;top:0;z-index:3;background:var(--night);padding:0}
.playing-mode .input-row input,.playing-mode .input-row button{min-height:44px;height:44px;font-size:18px;padding:6px 10px}
.playing-mode #message{font-size:14px;line-height:1.2;margin:2px 0}
.playing-mode .word-selectors{margin:5px 0 0;gap:4px}.playing-mode .word-selectors button{min-height:36px;height:36px;font-size:20px;padding:4px}
.playing-mode #help-panel{padding:4px 0 0}.playing-mode .question-top{margin:0}.playing-mode .question-top h2,.playing-mode .question-top span{font-size:14px}
.playing-mode .word-pattern{margin:4px auto}.playing-mode .word-pattern .word-tile{flex-basis:32px;width:32px;height:34px;font-size:23px}
.playing-mode #question{font-size:16px;line-height:1.3;padding:6px 8px;margin:4px 0}
.playing-mode #check{display:none}.playing-mode .direct-help{margin:5px 0 0;gap:6px}.playing-mode .direct-help .secondary{min-height:40px;padding:6px;flex-direction:row;font-size:14px}.playing-mode .direct-help .secondary b{font-size:14px}
.playing-mode #game-keyboard,.final-mode #game-keyboard{grid-row:4;position:relative;bottom:auto;z-index:5;width:100%;max-width:none;margin:0 auto;padding:0;background:var(--night);align-self:end}
.keyboard-tools{min-height:30px;height:30px}.keyboard-tools button{min-height:28px;font-size:14px;padding:3px 6px}.keyboard-tools span{font-size:14px}
#keyboard-keys{display:grid;gap:4px}.keyboard-row{display:flex;gap:3px;margin:0;justify-content:center}.keyboard-row[hidden]{display:none!important}.keyboard-row button{max-width:none;min-height:52px;height:52px;flex:1;min-width:0;padding:2px;font-size:clamp(20px,5.7vw,28px);font-weight:700;touch-action:manipulation}.keyboard-last button{font-size:clamp(15px,4.2vw,20px)}
.final-mode #game:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;gap:10px}.final-mode #final{flex:1;min-height:0;overflow:auto;padding:12px;margin:0 0 8px}.final-mode #final .final-top{margin:0}.final-mode #game-keyboard{flex:0 0 auto}.final-mode #final-question{font-size:20px;margin:8px 0}.final-mode .final-clock span{font-size:30px}
/* Fold, square tablets and landscape: board on the left, typing on the right. */
@media(min-width:640px) and (min-aspect-ratio:5/6){
 .playing-mode #game:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(300px,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px}
 .playing-mode .game-heading{grid-column:1/-1;grid-row:1}
 .playing-mode #play{grid-column:1;grid-row:2/4}
 .playing-mode #controls{grid-column:2;grid-row:2;max-height:none;align-self:stretch}
 .playing-mode #game-keyboard{grid-column:2;grid-row:3}
 .final-mode #game:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);grid-template-rows:minmax(0,1fr);align-items:center}
 .final-mode #final{height:100%;grid-column:1;grid-row:1}.final-mode #game-keyboard{grid-column:2;grid-row:1;align-self:center}
}
@media(max-height:650px){.keyboard-tools{height:26px;min-height:26px}.playing-mode .game-heading h1{font-size:16px}.playing-mode .compact-header,.final-mode .compact-header{height:34px;flex-basis:34px;min-height:34px}.playing-mode #game:not([hidden]){gap:3px;grid-template-rows:auto minmax(42px,1fr) auto auto}.playing-mode .word-selectors button{height:32px;min-height:32px}.playing-mode #help-panel .question-top{display:none}}
@media(min-width:640px) and (min-aspect-ratio:5/6) and (max-height:650px){.playing-mode #controls{max-height:none}.playing-mode #game:not([hidden]){gap:4px 12px}.playing-mode .game-heading h1{margin:0}.playing-mode .round-toolbar{min-height:24px}.playing-mode .scoreboard strong{font-size:20px}}
/* Native keyboard is opt-in. Its return control is always available. */
.playing-mode.keyboard-mode #game{position:static!important;inset:auto!important;height:auto!important}.keyboard-mode .shell{height:var(--usable-height,100dvh)}
.keyboard-mode #controls{max-height:46dvh}.keyboard-mode #selectors,.keyboard-mode #help-panel,.keyboard-mode .direct-help{display:block!important}.keyboard-mode .direct-help{display:flex!important}
#keyboard-return{width:100%;min-height:40px;margin:4px 0;background:#242C26;border:1px solid #657268}
@media(prefers-reduced-motion:reduce){.board-scroll{scroll-behavior:auto}}

.playing-mode .tile input{padding:8px 0 0}.playing-mode .tile .start-number{font-size:9px;line-height:1;left:2px;top:1px}.playing-mode .tile .mark{display:none}.playing-mode .direct-help{position:sticky;bottom:0;background:var(--night);padding:4px 0;z-index:2}
.keyboard-last button:nth-child(1){flex:1}.keyboard-last button:nth-child(2){flex:1.2}.keyboard-last button:nth-child(3){flex:2}.keyboard-last button:last-child{flex:2;min-width:78px}

/* The answer and submit action share a fixed dock with the keys. */
#game-keyboard #entry{margin-bottom:4px;position:relative;padding:0}
#game-keyboard #message:empty{display:none}
#game-keyboard #message{max-height:36px;overflow:auto;margin:2px 0;font-size:14px}
#game-keyboard .input-row{margin:0}
#game-keyboard .input-row input,#game-keyboard .input-row button{height:48px;min-height:48px;font-size:18px;padding:6px 10px}
.playing-mode .word-pattern{display:flex;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;max-width:100%;padding:2px 0}
.playing-mode .word-pattern .word-tile{flex:0 0 32px;width:32px;height:38px;font-size:24px}
.playing-mode .word-pattern .word-tile small{display:none}
.playing-mode .schedule>span,.final-mode .schedule>span{display:block!important;font-size:12px;line-height:1.1}
.playing-mode .schedule strong,.final-mode .schedule strong{font-size:14px}
.scoreboard-label{font-size:12px;color:#c8c1cb;display:block;line-height:1}
.playing-mode .scoreboard strong{font-size:22px}
.keyboard-mode #controls{max-height:none}
#final-keyboard-return{width:100%;min-height:40px;margin:4px 0}
body.viewing-page{overflow:auto}.viewing-page .shell{height:auto;min-height:100dvh;display:block}
.viewing-page #history,.viewing-page #rules{padding-bottom:24px}
.viewing-page .producer{display:flex}
@media(min-width:640px) and (min-aspect-ratio:5/6) and (max-height:500px){
 .playing-mode #game:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(300px,1fr);grid-template-rows:auto minmax(42px,1fr) auto}
 .playing-mode #play{grid-column:1;grid-row:2}
 .playing-mode #controls{grid-column:1;grid-row:3;max-height:110px}
 .playing-mode #game-keyboard{grid-column:2;grid-row:1/4}
 .playing-mode .game-heading{grid-column:1;grid-row:1}
 .final-mode #final{padding:8px}
}
.playing-mode #game,.final-mode #game{width:100%;max-width:none;margin:0}
.playing-mode #controls{max-width:none;width:100%}

/* A full mobile overview accompanies the scrollable, readable board. */
.board-overview{display:none}
@media(max-width:639px),(max-aspect-ratio:5/6){
 .playing-mode .board-frame{display:flex;align-items:center;gap:6px}
 .playing-mode .board-scroll{flex:1;min-width:0}
 .playing-mode .board-overview{display:grid;flex:none;gap:1px;grid-template-columns:repeat(var(--cols),var(--mini-cell,4px));grid-template-rows:repeat(var(--rows),var(--mini-cell,4px))}
 .board-overview .mini-tile{background:#ebd7b5;border-radius:1px}
 .board-overview .given,.board-overview .hinted{background:#f4c64a}
 .board-overview .solved{background:#b5d1b9}
 .board-overview .active-word{background:#f059bb;outline:1px solid #f059bb}
 .board-overview .space-tile{background:#635d6b}
}
@media(max-width:639px) and (max-height:650px){
 .playing-mode #controls{max-height:98px}
 .playing-mode .direct-help{position:static}
 .playing-mode .scoreboard-label{display:inline;margin-right:6px;font-size:12px}
 .playing-mode .time-group{white-space:nowrap}
 .playing-mode .round-toolbar{height:30px;min-height:30px}
 .playing-mode .word-pattern{margin:3px 0}
}

.final-mode .final-crossing-count{font-size:13px;color:var(--gold);margin:2px 0 6px}
.final-mode .phrase-pattern{margin:6px auto;gap:5px 4px;--final-cell:24px}
.final-mode .phrase-pattern .word-tile{font-size:18px}
@media(max-width:639px) and (max-height:650px){.final-mode #final{padding:6px}.final-mode #final h2{font-size:18px;margin:0}.final-mode #final-score-preview{font-size:12px;margin:0}.final-mode .final-clock span{font-size:24px}}

/* Whole-board mobile layout. The selected answer remains large below it. */
.playing-mode .board-overview{display:none}
.playing-mode.board-zoomed .board-overview{display:grid}
.playing-mode .board-frame{display:flex;align-items:center}
.playing-mode .board-scroll{display:flex;align-items:safe center;justify-content:safe center;min-width:0;min-height:0}
.playing-mode .round-toolbar>.icon-button{width:auto;min-width:70px;font-size:14px;white-space:nowrap}
.playing-mode .scoreboard-label{display:none}
.playing-mode .game-heading{padding-bottom:0}
.playing-mode .board.compact-cells .tile input{padding:2px 0 0}
.playing-mode .board.compact-cells .start-number{font-size:6px;left:1px}
.playing-mode .board.tiny-cells .start-number{display:none}
.playing-mode #controls{max-height:190px;scrollbar-width:thin}
.playing-mode .word-selectors{margin:2px 0 0}
.playing-mode #help-panel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 8px;padding:3px 0 0}
.playing-mode .question-top{display:block;white-space:nowrap}
.playing-mode .question-top h2{font-size:14px;margin:0}
.playing-mode .question-top>span{font-size:12px}
.playing-mode .word-pattern{margin:0;max-width:100%;width:100%;padding:2px 0 4px;gap:3px}
.playing-mode .word-pattern .word-tile{padding:0;min-height:32px;min-width:0;flex:0 0 28px;width:28px;height:32px;font-size:22px;border-radius:4px}
.playing-mode .word-pattern .word-tile:disabled{opacity:1}
.playing-mode #question{grid-column:1/-1;line-height:1.25;padding:2px 6px;margin:0;font-size:14px}
.playing-mode .direct-help{margin:0;padding:4px 0 2px;position:static}
.playing-mode .direct-help .secondary{min-height:32px;font-size:14px;padding:3px 6px;gap:4px}
#game-keyboard #entry{margin-bottom:0}
#game-keyboard .input-row input,#game-keyboard .input-row button{height:42px;min-height:42px}
.custom-keys #submit-word,.custom-keys #final-form .input-row>button{display:none}
#keyboard-target{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.keyboard-tools{justify-content:flex-end;min-height:24px;height:24px}
.keyboard-tools button{font-size:12px;min-height:24px;padding:2px 0}
#keyboard-keys{gap:4px}
.keyboard-row button{height:clamp(34px,5dvh,44px);min-height:34px;border-radius:6px;font-size:22px;padding:0}
.keyboard-last button{font-size:16px}
.playing-mode #game-keyboard #message{margin:2px 0;line-height:1.2;max-height:34px}
@media(max-width:639px) and (max-height:650px){
 .playing-mode #controls{max-height:142px}
 .playing-mode #help-panel .question-top{display:block}
 .playing-mode .word-pattern .word-tile{min-height:28px;height:28px;width:24px;flex-basis:24px;font-size:20px}
 .playing-mode .word-selectors button{min-height:30px;height:30px}
 .playing-mode .game-heading h1{font-size:16px}
 .playing-mode .direct-help .secondary{min-height:30px;font-size:13px}
 .playing-mode #game-keyboard #message{font-size:12px}
 .keyboard-row button{height:34px}
}
@media(min-width:640px) and (min-aspect-ratio:5/6){.playing-mode #controls{max-height:none}.keyboard-row button{height:44px}}

/* Short portrait phones: keep the tall crossword beside its controls. */
@media(max-width:639px) and (max-height:650px){
 .playing-mode #game:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(132px,.9fr);grid-template-rows:auto minmax(0,1fr) auto;gap:4px 8px}
 .playing-mode .game-heading{grid-column:1/-1;grid-row:1}
 .playing-mode #play{grid-column:1;grid-row:2}
 .playing-mode #controls{grid-column:2;grid-row:2;max-height:none;min-height:0;align-self:stretch}
 .playing-mode #game-keyboard{grid-column:1/-1;grid-row:3}
 .playing-mode .word-selectors{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
 .playing-mode #help-panel{display:flex;flex-direction:column;align-items:stretch;gap:2px}
 .playing-mode .question-top{display:flex!important;align-items:center;justify-content:space-between}
 .playing-mode .direct-help{flex-direction:column;gap:3px}
 .playing-mode .direct-help .secondary{width:100%;justify-content:center}
 .playing-mode #question{font-size:13px;line-height:1.2;padding:3px 5px}
 .playing-mode .board-frame{padding:3px}
}
.playing-mode #board .tile{min-width:0;min-height:0;overflow:hidden}
.playing-mode #board .tile input{min-width:0;min-height:0;line-height:1}

.playing-mode #board .tile{border-radius:min(5px,calc(var(--cell)*.18))}
@media(max-width:639px) and (max-height:650px){
 .playing-mode #controls{display:flex;flex-direction:column;overflow:hidden}
 .playing-mode .word-selectors{flex:0 0 auto}
 .playing-mode #help-panel{flex:1;min-height:0;overflow:auto}
 .playing-mode .direct-help{flex:0 0 auto}
 .playing-mode .direct-help .secondary{flex-direction:row}
}

@media(min-width:640px) and (min-aspect-ratio:5/6) and (max-height:500px){
 .playing-mode #game:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(130px,.65fr) minmax(260px,1.15fr);grid-template-rows:auto minmax(0,1fr);gap:4px 10px}
 .playing-mode .game-heading{grid-column:1/3;grid-row:1}
 .playing-mode #play{grid-column:1;grid-row:2}
 .playing-mode #controls{grid-column:2;grid-row:2;display:flex;flex-direction:column;overflow:hidden;max-height:none;min-height:0}
 .playing-mode #game-keyboard{grid-column:3;grid-row:1/3;align-self:center}
 .playing-mode .word-selectors{flex:0 0 auto;grid-template-columns:repeat(4,minmax(0,1fr))}
 .playing-mode #help-panel{display:flex;flex:1;min-height:0;overflow:auto;flex-direction:column;align-items:stretch}
 .playing-mode #help-panel .question-top{display:flex;justify-content:space-between}
 .playing-mode .direct-help{flex:0 0 auto;flex-direction:column;gap:3px}
 .playing-mode .direct-help .secondary{flex-direction:row;min-height:30px}
 .playing-mode #question{font-size:13px;padding:2px 4px}
}

/* Four-row keyboard approved from the Samsung Fold reference. */
#keyboard-keys{--keyboard-gap:clamp(3px,.65vw,7px);--keyboard-letter-size:22px;--keyboard-polish-size:17px;display:grid;gap:var(--keyboard-gap);width:100%;max-width:1120px;margin:0 auto}
.keyboard-row{display:grid;gap:var(--keyboard-gap);width:100%;margin:0}
.keyboard-polish{grid-template-columns:repeat(9,minmax(0,1fr));width:90%;margin-inline:auto}
.keyboard-qwerty{grid-template-columns:repeat(10,minmax(0,1fr))}
.keyboard-home{grid-template-columns:repeat(9,minmax(0,1fr));width:90%;margin-inline:auto}
.keyboard-last{grid-template-columns:minmax(52px,1.65fr) repeat(7,minmax(0,1fr)) minmax(52px,1.65fr)}
.keyboard-row button,.keyboard-last button,.keyboard-last button:nth-child(n){width:100%;min-width:0;max-width:none;flex:none;margin:0}
.keyboard-qwerty button,.keyboard-home button,.keyboard-last button:not(:first-child):not(:last-child){font-size:var(--keyboard-letter-size)}
.keyboard-polish button{font-size:var(--keyboard-polish-size)}
.keyboard-last button:first-child,.keyboard-last button:last-child{font-size:clamp(13px,3.7vw,18px)}
.keyboard-last button:last-child{background:linear-gradient(#512665,#32153f);border-color:#a46eb3;color:#fff4e2}
@media(max-width:380px){
 .keyboard-last{grid-template-columns:minmax(48px,1.55fr) repeat(7,minmax(0,1fr)) minmax(48px,1.55fr)}
 .keyboard-last button:first-child,.keyboard-last button:last-child{font-size:13px}
}