@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--accent:#981595;--home-bg:#F7D0FF;--surface:#fff;--soft-surface:#fff8ff;--hover-surface:#fff0ff;--secondary-bg:#ffffff7d;--score-bg:#F7D0FF;--selected-ink:#351236;--button-edge:#351236;--grid:#98159518;--ghost-fill:#9815950c;--ghost-stroke:#98159566;--piece-stroke:#40134055;--tile-shadow:#c98ccd;--keyboard-bg:#fff;--keyboard-border:#981595;--keyboard-disabled-bg:#ead9ec;--keyboard-disabled-text:#866a89;--keyboard-disabled-border:#be9ac2;--wide-key-bg:#F7D0FF;--enter-disabled-bg:#cab1cf;--enter-disabled-text:#67526d;--overlay-bg:#fff8fff2;--backdrop:#35123688;--timer-track:#ead0ed;--success:#08624f;--rose:#AF7387;--lilac:#F7D0FF;--yellow:#FFC801;--teal:#24A68C;--purple:#981595;--ink:#351236;--muted:#765176;--line:#d7a5da;--paper:#FFFCFF;--bg:#FFF5FF;font-family:'DM Sans',sans-serif;font-synthesis:none;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}body[data-screen=home]{background:var(--home-bg)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;transition:background .15s,transform .15s}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button:not(:disabled):active{transform:translateY(2px)}a{color:var(--accent)}h1,h2,h3,p{margin-top:0}h2{font:800 34px/1.15 'Manrope',sans-serif;letter-spacing:-1.3px}svg{display:block}
.eyebrow,.section-label{font-size:10px;font-weight:700;letter-spacing:1.5px}.eyebrow{color:var(--accent)}.section-label{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;padding:13px 22px;border:2px solid var(--button-edge);border-radius:10px;background:var(--yellow);color:var(--selected-ink);font-size:15px;font-weight:700;box-shadow:0 4px 0 var(--button-edge)}.primary-button:hover{background:#ffda4e}.primary-button>span:last-child{font-size:22px;line-height:1}.secondary-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid var(--accent);border-radius:9px;background:var(--secondary-bg);min-height:46px;padding:10px 16px;font-size:13px;font-weight:600}.secondary-button:hover{background:var(--surface)}.secondary-button>span{font-size:18px}
/* The home screen owns the title and navigation; the game gets the full window. */
.dictionary-status{font-size:10px;color:var(--muted);margin:16px 0 0;min-height:16px}
/* A viewport-sized game: controls on the left, board on the right. */
body[data-screen=game]{height:100dvh;overflow:hidden;overscroll-behavior:none}
.game-layout{height:100dvh;width:100%;max-width:1240px;margin:0 auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:24px;row-gap:14px;min-height:0;overflow:hidden}
.game-topbar{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.score-card{padding:24px;background:var(--score-bg);border:1px solid var(--line);border-radius:13px;min-width:0}.score-card>.section-label{font-size:10px}.score{font:800 68px/1.2 'Manrope',sans-serif;letter-spacing:-3px;color:var(--accent);margin:8px 0 18px;white-space:nowrap;font-variant-numeric:tabular-nums}.score>span{font:500 14px 'DM Sans',sans-serif;letter-spacing:0;margin-left:5px}.stats-row{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:14px}.stats-row>div{display:flex;align-items:baseline;gap:9px}.stats-row span{font-size:11px;color:var(--muted)}.stats-row strong{font:700 18px 'Manrope',sans-serif}
.game-actions{display:flex;align-items:center;gap:8px;min-width:0}.game-actions button{height:44px;min-width:44px;border:1.5px solid var(--accent);border-radius:8px;background:var(--surface);color:var(--accent);font-weight:700}.game-actions button:hover{background:var(--hover-surface)}.small-icon{flex:0 0 44px;font-size:21px}.words-button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:0 12px;font-size:13px}.words-button span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:20px;background:var(--yellow);color:var(--selected-ink);font-size:11px;padding:0 5px}
.center-panel{grid-column:2;grid-row:1/-1;min-height:0;min-width:0;container-type:size;display:flex;align-items:center;justify-content:center}.board-wrap{position:relative;width:min(100cqw,75cqh);aspect-ratio:24/32;border:1px solid var(--accent);border-radius:10px;background:var(--paper);overflow:hidden}
.board-wrap.danger{border-color:var(--rose);box-shadow:0 0 0 2px #af738755}canvas{width:100%;height:100%;display:block}#board{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#board.has-piece{cursor:grab}#board.grabbed{cursor:grabbing}.danger-line{position:absolute;top:var(--control-line,15.625%);left:0;right:0;border-top:1px dashed #af738744;pointer-events:none}.board-overlay{position:absolute;inset:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;padding:24px}.overlay-content{text-align:center;display:flex;align-items:center;flex-direction:column;width:100%}.overlay-eyebrow{font-size:8px;letter-spacing:1.5px;font-weight:700;color:var(--accent)}.overlay-content h2{font-size:34px;margin:16px 0}.overlay-content p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 22px}.overlay-content .primary-button{min-width:180px}.start-hint{font-size:10px;color:var(--muted);margin-top:15px}.pause-links{display:flex;gap:24px;margin-top:25px}.pause-links button,.restart-link{font-size:12px;min-height:38px;padding:6px;border:none;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.restart-link{margin-top:6px}.board-toast{position:absolute;z-index:3;top:45%;left:50%;max-width:90%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--purple);color:white;padding:12px 20px;border:2px solid white;box-shadow:0 4px 0 #35123640;border-radius:40px;font:700 17px 'Manrope',sans-serif;white-space:nowrap;transition:opacity .2s,transform .3s}.board-toast.show{opacity:1;transform:translate(-50%,-15px)}.board-toast.long-message{width:max-content;max-width:90%;font:500 12px/1.5 'DM Sans',sans-serif;white-space:normal;text-align:center;border-radius:12px}
.word-builder{grid-column:1;grid-row:2;min-width:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr) 40px 92px;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px 4px 3px 10px;position:relative}.word-display{font:800 22px/42px 'Manrope',sans-serif;letter-spacing:1px;color:var(--accent);white-space:nowrap;overflow:auto;scrollbar-width:none;min-width:0;height:42px;user-select:none}.word-display.empty{font-size:16px;font-weight:500;color:var(--muted)}.caret{display:inline-block;height:20px;width:2px;background:var(--accent);vertical-align:text-bottom;margin-left:4px;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}#clear-word{height:40px;min-width:40px;border:0;background:none;color:var(--accent);font-size:25px}.submit-button{height:40px;padding:4px 8px;border:1px solid var(--accent);border-radius:6px;background:var(--purple);color:#fff;font-size:12px;font-weight:700}.submit-button:hover{background:#791277}.feedback{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.touch-controls{grid-column:1;grid-row:3;display:block;min-width:0;align-self:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.letter-keyboard{display:flex;flex-direction:column;gap:4px}.keyboard-row{display:flex;gap:4px}.touch-controls button{flex:1 1 0;min-width:0;min-height:44px;border:1.5px solid var(--keyboard-border);border-bottom-width:3px;border-radius:7px;background:var(--keyboard-bg);color:var(--ink);font-size:18px;font-weight:700;line-height:1;padding:6px 0;box-shadow:0 1px 0 #98159533}.touch-controls button:active:not(:disabled){background:var(--yellow);color:var(--selected-ink);border-bottom-width:1px;transform:translateY(2px)}.touch-controls button:disabled{opacity:1;background:var(--keyboard-disabled-bg);color:var(--keyboard-disabled-text);border-color:var(--keyboard-disabled-border);box-shadow:none}.keyboard-row .key-wide{flex:2.14 1 0;font-size:23px;background:var(--wide-key-bg)}.keyboard-row .key-enter{background:var(--purple);color:#fff;border-color:var(--ink)}.keyboard-row .key-enter:disabled{background:var(--enter-disabled-bg);color:var(--enter-disabled-text);border-color:var(--keyboard-disabled-border)}

/* The word collection is only rendered in its dialog. */
#words-dialog .word-list{max-height:50dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--rose) transparent}.empty-words{text-align:center;padding:24px 0}.word-flower{font-size:36px;color:var(--accent)}.empty-words h3{font-size:16px;margin:15px 0 7px}.empty-words p{font-size:12px;line-height:1.8}.saved-word{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:13px 1px;font-size:15px}.saved-word>span:first-child{font-weight:700;letter-spacing:1px}.saved-word>span:last-child{font-size:12px;color:var(--success)}.saved-word small{font-size:10px;color:var(--muted);margin-right:13px;font-weight:400}.close-words{width:100%;margin-top:24px}

dialog{border:2px solid var(--accent);border-radius:18px;background:var(--soft-surface);color:var(--ink);width:calc(100% - 28px);max-width:550px;max-height:90dvh;padding:34px;box-shadow:8px 8px 0 #98159540}dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(5px)}dialog h2{margin:14px 0 15px}dialog p{font-size:13px;line-height:1.8;color:var(--muted)}.dialog-close{position:absolute;right:7px;top:5px;width:44px;height:44px;border:0;background:none;font-size:27px;color:var(--accent)}.touch-help{border-left:3px solid var(--teal);padding-left:13px}.rules{border-block:1px solid var(--line);margin:20px 0;padding:8px 0}.rules>p{display:grid;grid-template-columns:112px 1fr;gap:13px;align-items:start;font-size:11px;margin:12px 0}.rules kbd{font:700 10px 'DM Sans',sans-serif;color:var(--accent);padding-top:3px}dialog .dialog-note{font-size:10px;color:var(--muted)}.close-help,.close-settings{width:100%;margin-top:23px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border-block-start:1px solid var(--line);padding:22px 0}.setting-row h3{font-size:15px;margin:0 0 5px}.setting-row p{font-size:11px;margin:0;line-height:1.6}.setting-switch{display:flex;align-items:center;flex-direction:column;gap:5px;min-width:58px;min-height:44px;padding:0;border:none;background:none}.switch-track{display:block;width:50px;height:28px;border-radius:20px;background:#d2b7d5;border:1px solid #98709d;padding:3px}.switch-track i{display:block;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px #35123650;transition:transform .15s}.setting-switch[aria-checked=true] .switch-track{background:var(--accent);border-color:var(--accent)}.setting-switch[aria-checked=true] .switch-track i{transform:translateX(21px);background:var(--yellow)}.switch-state{font-size:10px;color:var(--accent);font-weight:600}

@media(max-width:1100px){.game-layout{grid-template-columns:minmax(280px,340px) minmax(0,1fr);column-gap:14px}}
@media(max-width:740px){.dictionary-status{font-size:9px}.rules>p{grid-template-columns:92px 1fr}dialog{padding:29px 23px}dialog h2{font-size:29px}}



/* Portrait phones reserve their keyboard rows, then give all remaining room to the board. */
@media(max-width:740px),(pointer:coarse) and (orientation:portrait){
 .game-layout{max-width:700px;padding:max(2px,env(safe-area-inset-top)) max(1px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(1px,env(safe-area-inset-left));grid-template-columns:minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) 44px auto;gap:3px}
 .game-topbar{grid-column:1;grid-row:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:5px;padding-inline:3px}.score-card{padding:0 4px;border:0;background:none;border-radius:0;flex:1;display:flex;align-items:center;gap:5px}.score-card>.section-label,.stats-row{display:none}.score{font-size:26px;line-height:1;margin:0;letter-spacing:-1px}.score>span{font-size:11px;margin-left:3px}.game-actions{gap:4px;flex:0 0 auto}.game-actions button{height:40px;min-width:40px;border-radius:7px}.small-icon{flex-basis:40px;font-size:21px}.words-button{flex:0 1 auto;font-size:12px;padding:0 8px;gap:5px}.words-button span{min-width:19px;height:19px;font-size:10px;padding-inline:4px}
 .center-panel{grid-column:1;grid-row:2}.board-wrap{border-radius:7px;box-shadow:none}.word-builder{grid-column:1;grid-row:3;grid-template-columns:minmax(0,1fr) 36px 82px;gap:2px;padding:1px 3px 1px 8px;border-radius:6px}.word-display{height:40px;line-height:40px;font-size:20px}.word-display.empty{font-size:15px}#clear-word{height:38px;min-width:36px}.submit-button{height:38px;font-size:11px}.touch-controls{grid-column:1;grid-row:4;padding:0 2px;align-self:stretch}.touch-controls button{height:clamp(40px,5.7dvh,48px);min-height:0;font-size:18px;padding:4px 0}.keyboard-row .key-wide{font-size:23px}
 .board-overlay{padding:12px}.overlay-content h2{font-size:28px;margin:10px 0}.overlay-content p{font-size:10px;margin-bottom:12px}.overlay-content .primary-button{font-size:12px;min-height:42px;min-width:150px}.overlay-eyebrow{font-size:7px}.pause-links{margin-top:10px}.pause-links button,.restart-link{font-size:11px;min-height:32px}.board-toast{font-size:15px;padding:10px 17px}
}
@media(max-width:370px){.game-actions{gap:3px}.words-button{padding-inline:6px}.score{font-size:23px}.keyboard-row{gap:3px}.touch-controls button{font-size:16px}.word-builder{grid-template-columns:minmax(0,1fr) 34px 76px}.overlay-content h2{font-size:23px}}
/* Short, wide screens also keep the controls left and the entire board right. */
@media(orientation:landscape) and (max-height:550px){
 .game-layout{max-width:1000px;padding:max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(3px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left));grid-template-columns:minmax(0,1fr) minmax(0,calc((100dvh - 6px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.75));grid-template-rows:42px 44px minmax(0,1fr);gap:6px 10px}
 .game-topbar{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:6px;padding:0}.score-card{padding:0;border:0;background:none;flex:1}.score-card>.section-label,.stats-row{display:none}.score{font-size:27px;line-height:1;margin:0;letter-spacing:-1px}.score>span{font-size:11px}.game-actions{gap:4px;flex:0 0 auto}.game-actions button{height:38px;min-width:38px}.small-icon{flex-basis:38px}.words-button{padding:0 6px;gap:5px;font-size:12px}
 .center-panel{grid-column:2;grid-row:1/-1}.word-builder{grid-column:1;grid-row:2;padding:1px 3px 1px 8px}.word-display{height:40px;line-height:40px;font-size:20px}.submit-button,#clear-word{height:38px}.touch-controls{grid-column:1;grid-row:3;align-self:start;padding:0}.touch-controls button{height:clamp(36px,11dvh,46px);min-height:0;font-size:16px}.board-overlay{padding:8px}.overlay-content h2{font-size:24px;margin:8px 0}.overlay-content p{font-size:10px;margin-bottom:10px}.overlay-eyebrow{font-size:6px}.overlay-content .primary-button{min-width:130px;min-height:38px;padding:8px 12px;font-size:12px}.pause-links{margin-top:8px}.pause-links button,.restart-link{min-height:28px;font-size:10px}.start-hint{font-size:9px;margin-top:9px}
}
@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){

 .dictionary-status{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Both title lines use the game's cell shapes, with a block hyphen after SANA. */





/* Keep each letter intact while its color slowly fades to another palette color. */
@media(prefers-reduced-motion:no-preference){
 .title-blocks rect[fill="#24A68C"]{--title-from:var(--teal);--title-to:var(--purple);--title-delay:0s}
 .title-blocks rect[fill="#FFC801"]{--title-from:var(--yellow);--title-to:var(--rose);--title-delay:1.2s}
 .title-blocks rect[fill="#981595"]{--title-from:var(--purple);--title-to:var(--teal);--title-delay:2.4s}
 .title-blocks rect[fill="#AF7387"]{--title-from:var(--rose);--title-to:var(--yellow);--title-delay:3.6s}
 .title-blocks rect{animation:title-colors 18s ease-in-out var(--title-delay) infinite}
 .title-sade rect{animation-delay:calc(var(--title-delay) + 2s)}
 body[data-screen=game] .title-blocks rect{animation-play-state:paused}
 @keyframes title-colors{0%,15%,100%{fill:var(--title-from)}50%,65%{fill:var(--title-to)}}
}
/* Language choices are tactile tiles, with native radio-button keyboard support. */

.language-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;min-width:0;width:100%;margin:0;padding:0 0 4px;border:0}
.language-option{position:relative;display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.language-option input{position:absolute;width:1px;height:1px;margin:0;opacity:0;clip-path:inset(50%)}
.language-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:9px 6px;border:2px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--accent);box-shadow:0 4px 0 var(--tile-shadow);transition:background .18s,transform .18s,box-shadow .18s}
.language-code{font:800 20px/1 'Manrope',sans-serif;letter-spacing:1px}.language-name{font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap}
.language-check{position:absolute;top:5px;right:6px;font-size:11px;font-weight:800;opacity:0}
.language-option:hover .language-tile{background:var(--hover-surface);transform:translateY(-1px)}
.language-option input:checked+.language-tile{background:var(--yellow);border-color:var(--button-edge);color:var(--selected-ink);transform:translateY(2px);box-shadow:0 2px 0 var(--button-edge)}
.language-option input:checked+.language-tile .language-check{opacity:1}
.language-option input:focus-visible+.language-tile{outline:3px solid var(--teal);outline-offset:4px}
.language-option:active .language-tile{transform:translateY(3px);box-shadow:0 1px 0 var(--accent)}
.language-picker-compact{width:140px;gap:4px;flex:none}.language-picker-compact .language-tile{min-height:44px;padding:8px 5px;border-radius:8px}.language-picker-compact .language-code{font-size:13px;letter-spacing:.5px}.language-picker-compact .language-check{font-size:8px;top:2px;right:3px}.language-picker-compact .language-name{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.language-setting{align-items:stretch;flex-direction:column;gap:12px;padding:18px 0}.language-setting .language-label{display:block;font-size:15px;font-weight:700;margin-bottom:5px}.language-setting>div{min-width:0}.setting-row{gap:14px}#dictionary-change-note{margin-top:-6px}#dictionary-retry{margin-bottom:18px}#words-language{margin-bottom:16px}
@media(max-width:740px){.language-setting{gap:10px;padding:16px 0}.language-setting .language-label{font-size:14px}.language-picker{gap:7px}.language-picker-compact{gap:4px}.language-tile{min-height:60px;padding:7px 4px}.language-code{font-size:18px}.language-name{font-size:10px}}

/* A focused home screen with readable game information. Opened from a phone's home screen (viewport-fit=cover), it keeps clear of the notch and the rounded corners, and the footer's bottom padding grows into the home indicator's area. The minimum height gives up only that growth past the footer's own padding (16 px, 12 px on phones, 8 px in landscape), so the page ends where it does in the browser. */
.home-screen{display:flex;flex-direction:column;max-width:820px;min-height:calc(100svh - 76px - max(0px,env(safe-area-inset-bottom) - 16px));margin:0 auto;padding:max(26px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 20px max(28px,env(safe-area-inset-left))}
.home-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.home-language{display:flex;align-items:center;gap:12px}.home-language>.language-label{font-size:15px;font-weight:700}
.home-record{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap;color:var(--muted)}.record-label{font-size:13px;font-weight:700;letter-spacing:.7px}.record-value{font-size:15px;line-height:1.1}.home-record strong{font:800 26px/1.1 'Manrope',sans-serif;letter-spacing:-.5px;color:var(--accent);margin-right:3px}
.home-content{display:grid;place-items:center;flex:1;margin:32px 0 0}.home-copy{width:100%;max-width:460px;text-align:center}
.home-copy h1{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:min(340px,100%);margin:0 auto 26px}.home-copy h1 .title-blocks{display:block;width:100%;height:auto;flex:none;overflow:visible}.home-copy h1 .title-sade{width:78.947368%}
.home-description{font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 26px}
.home-actions{display:flex;flex-direction:column;gap:14px;max-width:390px;margin:0 auto}.home-actions>.primary-button{width:100%;min-height:60px;font-size:18px}.home-secondary{display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-secondary .secondary-button{font-size:16px;min-height:50px;padding:10px}.home-actions .new-game-button{min-height:46px;background:transparent;border:1.5px solid var(--accent);box-shadow:none;font-size:16px;color:var(--accent)}
.dictionary-status{font-size:16px;line-height:1.5;color:var(--muted);margin:23px 0 0;min-height:24px}
.page-footer{max-width:764px;margin:0 auto;padding:16px 24px max(16px,env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;justify-content:center;gap:16px;color:var(--muted);font-size:15px}.page-footer>div{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.page-footer button{font-size:15px;background:none;border:0;padding:8px 0;min-height:40px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}.footer-dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}.footer-divider{opacity:.5}
@media(max-width:740px){.home-screen{padding:max(22px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 20px max(20px,env(safe-area-inset-left));max-width:520px;min-height:calc(100svh - 76px - max(0px,env(safe-area-inset-bottom) - 12px))}.home-top{gap:12px}.home-language>.language-label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.record-label{font-size:12px;letter-spacing:.3px}.home-record strong{font-size:24px}.home-content{margin-top:28px}.home-copy h1{width:min(280px,100%);gap:10px;margin-bottom:24px}.home-description{font-size:18px;margin-bottom:24px}.dictionary-status{font-size:15px;margin-top:20px}.page-footer{margin-inline:20px;padding:12px 0 max(12px,env(safe-area-inset-bottom));font-size:14px}.page-footer button{font-size:14px}.page-footer>div{gap:8px}}
@media(max-width:740px) and (max-height:700px){.home-screen{padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));min-height:calc(100svh - 72px - max(0px,env(safe-area-inset-bottom) - 12px))}.home-content{margin-top:18px}.home-copy h1{width:220px;gap:9px;margin-bottom:16px}.home-description{font-size:17px;margin-bottom:18px}.home-actions{gap:12px}.home-actions>.primary-button{min-height:52px;font-size:17px}.home-secondary .secondary-button{min-height:44px;font-size:15px}.dictionary-status{margin-top:18px}}
@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){.home-screen{max-width:820px;padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));min-height:calc(100svh - 64px - max(0px,env(safe-area-inset-bottom) - 8px))}.home-content{margin-top:20px}.home-copy{display:grid;grid-template-columns:1fr 1.2fr;gap:14px 32px;align-items:center;max-width:none}.home-copy h1{grid-column:1;grid-row:1/4;width:min(260px,100%);margin:0 auto;gap:10px}.home-description{grid-column:2;margin:0;font-size:18px}.home-actions{grid-column:2;width:100%;gap:10px}.home-actions>.primary-button{min-height:48px;font-size:17px}.home-secondary .secondary-button{font-size:15px;min-height:44px}.dictionary-status{grid-column:2;margin:0;font-size:15px}.page-footer{padding:8px 0 max(8px,env(safe-area-inset-bottom));font-size:14px}.page-footer button{font-size:14px}}
/* The close link back to pelit.online takes the top row's right corner, as in the other pelit.online games; the record moves left of it. Its tap area reaches into the page margin, so the row fits a 320 px screen. On short screens the title's paper grid reaches up to the top row, which stays above it. */
.home-top{position:relative;z-index:1}.home-record{margin-left:auto}.home-close{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border-radius:50%;color:var(--accent);font-size:30px;line-height:1;text-decoration:none}.home-close:hover{background:var(--hover-surface)}
@media(max-width:360px){.home-top{gap:8px}.language-picker-compact{width:128px}.home-record strong{font-size:20px}}
/* Every dictionary's credits, compact, with the selected dictionary's word count below them. */
.source-list{list-style:none;margin:0 0 12px;padding:0}.source-list li{font-size:12px;line-height:1.65;color:var(--muted);padding:10px 0;border-top:1px solid var(--line)}.source-list li:first-child{border-top:0;padding-top:0}
/* The title sits on the game's paper grid, fading into the page above SANA. */
.home-content{padding-top:40px}
.home-copy h1{--title-width:340px;--title-bottom-gap:26px;position:relative;isolation:isolate;container-type:inline-size;gap:calc(var(--title-width)/19);margin-bottom:calc(var(--title-bottom-gap) + var(--title-width)/19)}
.home-copy h1::before{--title-cell:calc(100cqw/19);content:'';position:absolute;z-index:-1;pointer-events:none;inset:calc(-6*var(--title-cell)) max(calc(-3*var(--title-cell)),calc((100cqw - 100vw)/2 + 12px)) calc(-2*var(--title-cell));background-color:var(--paper);background-image:linear-gradient(var(--grid) .8px,transparent .8px),linear-gradient(90deg,var(--grid) .8px,transparent .8px);background-size:var(--title-cell) var(--title-cell);background-position:center top;mask-image:linear-gradient(to bottom,transparent,#000 calc(5*var(--title-cell)),#000 calc(100% - var(--title-cell)),transparent),linear-gradient(to right,transparent,#000 calc(2*var(--title-cell)),#000 calc(100% - 2*var(--title-cell)),transparent);mask-composite:intersect}
@media(max-width:740px){.home-content{padding-top:32px}.home-copy h1{--title-width:280px;--title-bottom-gap:24px}}
@media(max-width:740px) and (max-height:700px){.home-content{padding-top:18px}.home-copy h1{--title-width:220px;--title-bottom-gap:16px}}
@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){.home-content{padding-top:20px}.home-copy h1{--title-width:260px;margin-bottom:0}}

/* Two game modes, with a compact countdown that keeps the keyboard in view. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.theme-symbol{font-size:23px;line-height:1;font-weight:700}
:root[data-theme=dark]{color-scheme:dark;--ink:#F8EAFB;--muted:#C5B2CE;--line:#574361;--accent:#E5AAED;--bg:#140F1B;--home-bg:#1B1323;--paper:#21182B;--surface:#2B2037;--soft-surface:#251B30;--hover-surface:#3D2D4A;--secondary-bg:#2B2037;--score-bg:#30223D;--button-edge:#0C0811;--grid:#F7D0FF1C;--ghost-fill:#F7D0FF12;--ghost-stroke:#E5AAED99;--piece-stroke:#F7D0FF66;--tile-shadow:#0C0811;--keyboard-bg:#382B46;--keyboard-border:#9D7AAE;--keyboard-disabled-bg:#241C2E;--keyboard-disabled-text:#8E7D9B;--keyboard-disabled-border:#503C60;--wide-key-bg:#4B345B;--enter-disabled-bg:#392444;--enter-disabled-text:#A18AAA;--overlay-bg:#1B1323F2;--backdrop:#08050DC7;--timer-track:#3D2D4A;--success:#67DBC0}
:root[data-theme=dark] .title-blocks rect{stroke:var(--piece-stroke)}
:root[data-theme=dark] .danger-line{border-color:#CFA9CF66}
:root[data-theme=dark] .setting-switch .switch-track{background:var(--surface);border-color:#9D7AAE}
:root[data-theme=dark] .setting-switch[aria-checked=true] .switch-track{background:var(--teal);border-color:#67DBC0}
:root[data-theme=dark] .setting-switch[aria-checked=true] .switch-track i{background:var(--ink)}
:root[data-theme=dark] .board-toast{border-color:var(--accent);box-shadow:0 4px 0 #0006}
.mode-picker{border:0;padding:0;margin:0 0 3px;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.mode-option{position:relative;cursor:pointer;min-width:0}
.mode-option input{position:absolute;opacity:0;width:1px;height:1px}
.mode-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;padding:8px 4px;border:1.5px solid var(--accent);border-bottom-width:3px;border-radius:10px;background:var(--soft-surface);color:var(--accent)}
.mode-tile strong{font-size:16px;line-height:1.3}.mode-tile>span{font-size:13px;line-height:1.3;color:var(--muted)}
.mode-option input:checked+.mode-tile{background:var(--yellow);border-color:var(--button-edge);color:var(--selected-ink)}
.mode-option input:checked+.mode-tile>span{color:var(--selected-ink)}
.mode-option input:focus-visible+.mode-tile{outline:3px solid var(--teal);outline-offset:3px}
.challenge-timer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;color:var(--accent)}
.timer-label{grid-column:1/-1;font-size:13px;font-weight:700}
.timer-track{height:12px;overflow:hidden;border:1px solid var(--accent);border-radius:4px;background:var(--timer-track)}
.timer-fill{display:block;width:100%;height:100%;background:var(--teal);transform-origin:left center;will-change:transform}
.timer-seconds{min-width:4ch;text-align:right;font-size:13px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.challenge-timer.urgent .timer-fill{background:var(--accent)}
@media(prefers-reduced-motion:no-preference){.challenge-timer.urgent .timer-track{animation:time-warning 1s ease-in-out infinite}.challenge-timer.timer-paused .timer-track{animation-play-state:paused}@keyframes time-warning{0%,100%{opacity:1}50%{opacity:.3}}}
@media(max-width:740px),(pointer:coarse) and (orientation:portrait){
 .game-layout[data-mode=timed]{grid-template-rows:60px minmax(0,1fr) 44px auto}
 .game-layout[data-mode=timed] .game-topbar{position:relative;padding-bottom:18px}
 .challenge-timer{position:absolute;bottom:0;left:8px;right:8px;height:15px;gap:8px}
 .timer-label{display:none}.timer-track{height:8px}.timer-seconds{font-size:11px}
 .mode-tile strong{font-size:15px}
}
@media(orientation:landscape) and (max-height:550px){
 .game-layout[data-mode=timed]{grid-template-rows:60px 44px minmax(0,1fr)}
 .game-layout[data-mode=timed] .game-topbar{position:relative;padding-bottom:18px}
 .challenge-timer{position:absolute;bottom:0;left:2px;right:2px;height:15px;gap:8px}
 .timer-label{display:none}.timer-track{height:8px}.timer-seconds{font-size:11px}
 .mode-tile{min-height:52px;padding:5px 3px}.mode-tile strong{font-size:14px}.mode-tile>span{font-size:12px}
}