@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:#E5AAED;--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:18px;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>.icon{font-size:22px}.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>.icon{font-size:18px}
/* Icons (README: Painikkeiden kuvakkeet): symbols of the sprite at the top of index.html, which replace the symbol characters that iPhone
   Safari drew as color emoji or in fallback fonts. An icon is a 1 em square in its control's color (currentColor), so the
   themes, forced colors (the sparkle by a rule of its own), and the disabled, pressed, and selected states give it the color they gave the characters. Each
   context sets its size with font-size, and --icon-stroke where the 2.5-unit line would be too thin. Icons are blocks (svg{display:block}),
   so an icon alone in a button is centered by its margins and not by the font's line box; in running text they are inline.
   The 1 em box is wider than the ↗ and ? characters it replaced, so the primary buttons' gap (22 px before) and the home
   screen's secondary buttons' side padding (10 px before) give that room back to the label: at 320 px, labels that fitted
   on one line still do. */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1em;height:1em;flex:none;stroke-width:var(--icon-stroke,2.5);overflow:visible}button>.icon:only-child{margin-inline:auto}
/* 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:22px}.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}
/* The third row holds seven letters, the dot key and ⌫ and ↵ at 1.85 letters each (2.14 before the dot key): at 320 px its
   keys are within 1 px of the letters above and at least 24 px wide (the WCAG 2.2 minimum), and ⌫ and ↵ at least 44 px.
   The dot key stacks its count under the bullet: beside it, 20 dots already overflowed the 25 px key at 320 px; stacked,
   counts up to 299 fit at 320 px and up to 999 from 360 px. Without padding the stacked glyphs fit even the 36 px keys of a
   low landscape phone, and the key stays under the 44 px minimum height on a desktop, so the row keeps its height. */
.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:1.85 1 0;font-size:23px;background:var(--wide-key-bg)}.keyboard-row .key-dot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;font-size:20px;white-space:nowrap;background:var(--wide-key-bg)}.key-dot .dot-count{font-size:12px;letter-spacing:-.3px}.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{margin-inline:auto;font-size:40px;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}
/* The sparkle is the one icon with a color of its own. Forced colors keep a color set on an svg (its default is
   forced-color-adjust:preserve-parent-color), so high contrast would show the theme's purple and yellow; auto draws the
   whole sparkle in the system text color, as it drew the ✳ character. */
@media(forced-colors:active){.word-flower{forced-color-adjust:auto}}

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:22px;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;white-space:nowrap}.rules kbd .icon{display:inline-block;font-size:1.25em;vertical-align:-.3em;--icon-stroke:2.6}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,.title-rain 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;--icon-stroke:3.5;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:10px;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-copy h1 .title-rain{width:80%}
.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 6px}.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{display:inline-flex;align-items:center;gap:.3em;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 - var(--footer-link-line) - 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 - var(--footer-link-line) - 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:24px;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. One grid cell is one title block: the first line is 19 blocks wide (SANA-), on the English page 20 (WORD-), which tools/pages.mjs marks with the class title-cells-20. The grid is centred, so with an even count it moves half a cell to stay under the blocks. */
.home-content{padding-top:40px}
.home-copy h1{--title-cells:19;--title-shift:0;--title-width:340px;--title-bottom-gap:26px;position:relative;isolation:isolate;container-type:inline-size;gap:calc(var(--title-width)/var(--title-cells));margin-bottom:calc(var(--title-bottom-gap) + var(--title-width)/var(--title-cells))}
.home-copy h1.title-cells-20{--title-cells:20;--title-shift:.5}
.home-copy h1::before{--title-cell:calc(100cqw/var(--title-cells));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:calc(50% + var(--title-shift)*var(--title-cell)) 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}
: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}
}
/* The link to the page in the other language (Word Rain on GameYard, Sanasade on pelit.online). The English page's link reads "Suomeksi", in the language it leads to as in the other pelit.online games; the Finnish page's link reads its address, word-rain.gameyard.app (Kai 1.11.2026), which tells that it leads to another site rather than switching this page's texts like the FI/SV/EN picker. It sits in the footer with the other links, away from that picker. The address never breaks at its hyphen or dots: it takes 159 px on its own line on a 320 px phone, and at 541 px, the narrowest footer with one row, the Finnish row with it takes 473 of 501 px (Chromium 1.11.2026). Phones have no room for it on the footer's row, so it gets a line of its own, and the home screen gives up that line's height, so the page still ends at the bottom of the screen. */
:root{--footer-link-line:0px}
.page-footer{align-items:center;gap:10px}.page-footer>.lang-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 0;font-size:15px;color:var(--accent);text-underline-offset:4px;white-space:nowrap}
@media(max-width:740px){.page-footer{gap:8px}.page-footer>.lang-link{font-size:14px}}
@media(max-width:1000px) and (max-height:550px) and (orientation:landscape){.page-footer>.lang-link{font-size:14px}}
@media(max-width:540px){:root{--footer-link-line:30px}.page-footer{flex-direction:column;gap:0}.lang-divider{display:none}.page-footer>.lang-link{min-height:30px;padding:0 0 6px}}