@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{--ink:#253734;--muted:#73817a;--paper:#f6f4ee;--line:#dedfd5;--blue:#316cba;--red:#c85551;--green:#276451}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}button,select,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:10px;background:#fffdf7;color:var(--ink);padding:10px 14px;font-weight:600;min-height:42px}button:hover:enabled{background:#eaece3}button:disabled{cursor:default;opacity:.4}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #e9af40;outline-offset:3px}.dark{background:var(--ink);color:white;border-color:var(--ink)}.dark:hover:enabled{background:#3d534b}.primary{background:var(--green);color:white;border:0}.primary:hover:enabled{background:#347c66}header{max-width:1160px;margin:auto;padding:27px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font:800 25px Manrope,system-ui;letter-spacing:-1px}.brand small{display:block;font:600 8px 'DM Sans',sans-serif;letter-spacing:2px;margin-top:3px}.brand-icon{background:var(--green);color:#fff;width:43px;height:47px;border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #143e31}.brand-icon span{font-size:22px;margin:7px 0 0 2px}nav{display:flex;gap:8px}nav button:not(.dark){border:0;background:transparent}main{max-width:1060px;margin:auto;padding:29px 30px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;gap:20px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.6px;color:var(--muted)}h1{font:700 32px/1.17 Manrope,system-ui;letter-spacing:-1.2px;margin:10px 0 0}.intro p{font-size:13px;line-height:1.8;color:var(--muted)}.game-layout{display:grid;grid-template-columns:minmax(0,660px) minmax(205px,250px);gap:25px;align-items:start}.table{min-width:0}.player{border:1px solid var(--line);background:#fcfbf7;border-radius:14px;padding:13px 17px;transition:border-color .2s}.player.active.blue{border-color:#90b3df;background:#f0f5fb}.player.active.red{border-color:#dfa4a0;background:#fbf0ed}.player-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.player-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}.red .dot{background:var(--red)}.language{font-size:11px;color:var(--muted);font-weight:400}.score{font:800 24px Manrope,system-ui}.score small{font:500 10px 'DM Sans',system-ui;color:var(--muted);margin-left:4px}.rack{display:flex;justify-content:center;gap:8px;min-height:48px}.tile{position:relative;border-radius:7px;background:#fffcf1;border:1px solid #d8ceb8;box-shadow:0 3px 0 #d8cfbd;font:700 26px Manrope,system-ui;padding:0;width:48px;height:47px;min-height:0;color:#354538}.tile small{position:absolute;right:5px;bottom:3px;font:600 9px 'DM Sans',system-ui}.tile.selected{background:#e1ecfa;border:2px solid var(--blue);transform:translateY(-3px)}.red .tile.selected{background:#f9e1dd;border-color:var(--red)}.tile:disabled{opacity:.85}.board-shell{padding:9px 0 13px}.columns{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;padding:0 6px 5px}.columns button{padding:0;min-height:26px;border:0;background:transparent;font-size:20px;color:var(--green)}.board-wrap{position:relative;background:#e3e7dc;border:6px solid #e3e7dc;border-radius:10px;overflow:hidden;box-shadow:0 5px 14px #263b3010}#board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1;touch-action:none;user-select:none;-webkit-user-select:none}#board button{min-width:0;min-height:0;border:1px solid #e3e7dc;border-radius:4px;padding:0;position:relative;background:#f8f8f1;font:700 clamp(16px,2.6vw,29px) Manrope,system-ui;aspect-ratio:1;touch-action:none}#board button.empty{font:700 10px 'DM Sans',system-ui;color:#95a295}#board button.dl,.dl{background:#dbe8ed;color:#567f92}#board button.tl,.tl{background:#9ebcca;color:#315d74}#board button.dw,.dw{background:#f0d9cc;color:#a96b50}#board button.tw,.tw{background:#c5806e;color:#fff}#board button.occupied{background:#fff9e9;color:#263932;box-shadow:inset 0 -3px 0 #e6dcc6}#board button small{position:absolute;right:5px;bottom:3px;font:600 clamp(7px,1vw,10px) 'DM Sans',system-ui}#board button .bonus-dot{position:absolute;top:3px;left:3px;font:700 6px system-ui;padding:1px;border-radius:2px}#board button.picked{background:#d6e9fa;box-shadow:inset 0 0 0 2px var(--blue)}body.red-turn #board button.picked{background:#f7dcd5;box-shadow:inset 0 0 0 2px var(--red)}#board button.start{box-shadow:inset 0 0 0 3px #ddaa35}#board button.falling{animation:fall .4s ease-out}@keyframes fall{from{transform:translateY(var(--fall));opacity:.2}to{transform:translateY(0);opacity:1}}#outlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:9px;margin-top:15px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:4px}.legend i{font-style:normal;font-weight:700;border-radius:3px;padding:4px}aside{display:flex;flex-direction:column;gap:15px}.turn-card,.bag-card,.history-card{background:#fffdf8;border:1px solid var(--line);border-radius:15px;padding:19px}.turn-card{border-top:3px solid var(--blue)}.red-turn .turn-card{border-top-color:var(--red)}h2{font:700 22px Manrope,system-ui;letter-spacing:-.5px;margin:11px 0}p{line-height:1.6}.turn-card p{font-size:12px;color:var(--muted);margin:8px 0 14px}.turn-card button{width:100%;margin-top:7px}.subtle{background:transparent;border:0;font-size:11px;min-height:27px;padding:4px}.end{margin-top:15px!important}#selectionPanel{border:1px dashed #ccd4c7;border-radius:9px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:48px}#selectedWord{letter-spacing:1px;font-size:16px;overflow-wrap:anywhere}#selectedPoints{font-size:11px;white-space:nowrap}#notice:not(:empty){background:#edf1e8;padding:10px;border-radius:7px;color:var(--ink);margin-bottom:0}.bag-card{display:flex;align-items:center;justify-content:space-between;padding:16px;gap:8px}.bag-card strong{display:block;font:800 33px Manrope,system-ui;margin-top:5px}.bag-card div>span:last-child{font-size:10px;color:var(--muted)}.bag-card button{font-size:11px;padding:8px}.section-title{display:flex;align-items:center;justify-content:space-between}h3{font-size:14px;margin:0}.section-title>span{font-size:11px;background:#edf0e7;border-radius:20px;padding:4px 7px}#history{max-height:240px;overflow:auto;margin-top:12px}.empty-history{font-size:12px;line-height:1.7;color:var(--muted);padding:12px 0}.history-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #eeeee5;font-size:12px;gap:7px}.history-row strong{color:var(--blue)}.history-row.red strong{color:var(--red)}.history-row small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.test-note{font-size:10px;color:var(--muted);line-height:1.8;margin:0 5px}footer{max-width:1000px;margin:10px auto 0;padding:20px 0 30px;border-top:1px solid var(--line);font-size:9px;font-weight:700;letter-spacing:1.5px;display:flex;justify-content:space-between;color:var(--muted)}footer span{font-weight:400;letter-spacing:0}dialog{border:1px solid var(--line);border-radius:20px;background:#fcfbf5;color:var(--ink);width:min(620px,94vw);max-height:85vh;padding:24px;box-shadow:0 20px 90px #17251b33}dialog::backdrop{background:#1b312d66;backdrop-filter:blur(3px)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.modal-head h2{margin:0}.modal-head button{border:0;background:transparent;font-size:18px}#modalBody p,#modalBody li{font-size:14px;line-height:1.65}#modalBody select,#modalBody input[type=search]{width:100%;padding:12px;margin:7px 0 14px;background:white;border:1px solid var(--line);border-radius:8px}#modalBody label{font-size:13px;font-weight:600}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.bag-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.bag-item{text-align:center;background:#f0eee2;padding:10px 2px;border-radius:7px;font-weight:700}.bag-item small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:4px}.word-list{max-height:220px;overflow:auto;display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.word-list span{background:#e9eee3;border-radius:5px;padding:5px 8px;font-size:12px}.pill{background:#edf0e8;border-radius:6px;padding:10px;font-size:12px!important}.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs button{font-size:11px}.tabs button.active{background:var(--green);color:white}.import{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}.import input{font-size:12px;max-width:100%}.checkbox{display:flex;gap:8px;align-items:start;font-weight:400!important}.checkbox input{margin-top:4px}.blank-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.blank-picker button{padding:7px;font-size:20px}.rules-list{padding-left:20px}.rules-list li{margin-bottom:9px}.dialog-note{font-size:12px!important;color:var(--muted)}
@media(min-width:1100px){.game-layout{grid-template-columns:minmax(0,630px) 250px;justify-content:center}.intro{padding:0 23px}}@media(max-width:750px){header{padding:18px 16px;gap:8px}.brand{font-size:21px}.brand small{font-size:6px}.brand-icon{width:34px;height:39px}nav{gap:2px}nav button{font-size:10px;padding:8px;min-height:36px}main{padding:20px 14px}.intro{margin-bottom:19px}.intro h1{font-size:25px}.intro p{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 185px;gap:13px}.turn-card,.history-card{padding:13px}.bag-card{padding:12px;flex-wrap:wrap}.tile{width:39px;height:41px;font-size:24px}.rack{gap:5px;min-height:41px}.player{padding:10px}.language{font-size:9px}.player-name{font-size:12px}h2{font-size:19px}#board button{font-size:22px}.legend{gap:6px;font-size:8px}footer{margin:8px 14px;padding-top:15px}.eyebrow{font-size:8px}#selectedWord{font-size:14px}}@media(max-width:530px){.game-layout{display:flex;flex-direction:column}.table,aside{width:100%}aside{display:grid;grid-template-columns:1fr 1fr}.turn-card{grid-column:1/-1}.history-card{grid-column:1/-1}.test-note{align-self:center}#board button{font-size:23px}.tile{width:42px}.intro h1 br{display:none}.intro h1{font-size:23px}.turn-card button{min-height:42px}#selectionPanel{margin-top:12px}.turn-card p{font-size:13px}.player-name{font-size:14px}.language{font-size:10px}.rack{gap:7px}footer{font-size:8px}.brand small{display:none}}

.composer{padding:16px;background:#eef2e9;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}#chosen{display:flex;gap:7px;min-height:50px;margin:10px 0;flex-wrap:wrap}.composer>span{font-size:12px;font-weight:700}.composer p{font-size:12px}.composer button{margin:3px 2px}.composer .primary{background:#244c3b;color:white}.drop-help{margin-bottom:6px}.columns .active{background:#244c3b;color:white}#board .landing-preview{background:#dcead3;color:#49653b;border:2px dashed #638557}#board .just-dropped{animation:fall-in .45s ease-out;background:#ffeac2}.player select{max-width:140px}.tile.selected{opacity:.4}.score{font-weight:800;margin-left:auto}#board button{position:relative}#board button small{position:absolute;right:4px;bottom:3px;font-size:9px}.bonus-label{font-size:10px}button:disabled{cursor:default;opacity:.4}.tile{position:relative}.tile small{position:absolute;bottom:4px;right:5px;font-size:10px}@keyframes fall-in{from{transform:translateY(-22px);opacity:.25}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){#board .just-dropped{animation:none}}@media(max-width:750px){.game-layout{display:flex;flex-direction:column}.table,aside{width:100%}aside{display:grid;grid-template-columns:1fr 1fr}.turn-card,.history-card{grid-column:1/-1}.player-head{flex-wrap:wrap}.rack{justify-content:center}.tile{width:clamp(32px,9vw,52px)}header{flex-wrap:wrap}.brand small{display:none}#board button{font-size:clamp(16px,4vw,26px)}}

.board-shell{padding-left:24px}#board button[data-row]::before{content:attr(data-row);position:absolute;left:-22px;top:50%;transform:translateY(-50%);font:600 11px system-ui;color:#657568;width:16px;text-align:center;pointer-events:none}.columns button{font-weight:700}

#validity.word-valid{color:#237145;font-weight:700}#validity.word-invalid{color:#b74768;font-weight:700}

#validity:empty{display:none}#chosen:empty{display:none}

.word-build{display:flex;align-items:center;gap:12px;min-width:0}#chosen{flex-wrap:nowrap;min-width:0;gap:clamp(3px,1vw,7px)}#validity{flex:none;font-size:25px;line-height:1;margin:0}.word-build:has(#chosen:empty){display:none}@media(max-width:530px){#chosen .tile{width:clamp(29px,8vw,42px)}.word-build{gap:7px}}

.dictionary-link{display:inline-block;color:#237145;font-weight:700;padding:8px 0}.dictionary-alphabet{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:5px;margin:18px 0}.dictionary-alphabet button{padding:0;min-height:38px}.dictionary-alphabet button.active{background:#244c3b;color:white}.dictionary-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin:14px 0}.dictionary-words span{font-size:13px;overflow-wrap:anywhere}@media(max-width:530px){.dictionary-alphabet{grid-template-columns:repeat(7,minmax(0,1fr))}.dictionary-words{grid-template-columns:repeat(2,minmax(0,1fr))}}
#player0 .rack,#player1 .rack{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(3px,1vw,7px)}#player0 .rack .tile,#player1 .rack .tile{width:100%;max-width:52px;min-width:0;font-size:clamp(19px,5vw,28px)}.word-build #chosen{flex:1;gap:3px}.word-build #chosen .tile{flex:0 1 44px;width:44px;min-width:0}.opening-clue{font-size:11px;line-height:1.5;margin:8px 0 0;color:#566755}
.credits-card{padding:18px;background:#fff9e9;border:1px solid #e3d7b6;border-radius:14px}.credits-head{display:flex;align-items:center;gap:10px}.credits-head img{object-fit:contain}.credits-head h3{font-size:18px}.credit-balance{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-size:13px;border-radius:7px}.credit-balance.current{background:#f3e7c8;font-weight:700}.credit-balance strong{font-size:20px;color:#88601e}.credits-card #hintBtn{width:100%;margin-top:12px;font-size:12px}.credits-card #hintWord{font-size:20px;letter-spacing:2px;font-weight:800;color:#237145;overflow-wrap:anywhere;margin:14px 0 0}.credits-card #hintStatus{font-size:12px;margin:8px 0 0;color:#855d32}.credits-card p:empty{display:none}@media(max-width:750px){aside .credits-card{grid-column:1/-1}}
.board-shell{position:relative;overflow:visible}.score-overlay{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}.score-oval{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.score-popup{position:absolute;z-index:9;background:#fff1b8;border:1px solid #d4a845;border-radius:10px;padding:8px 12px;color:#664708;box-shadow:0 4px 16px #25373422;font-size:12px;font-weight:800;white-space:nowrap}.score-popup[hidden]{display:none}#board .score-hidden{visibility:hidden}#board .score-letter{background:#ffdf80!important;box-shadow:inset 0 0 0 3px #2879d7!important;color:#203934}.falling-tile{position:absolute;display:flex;align-items:center;justify-content:center;background:#fff9e9;color:#263932;border:1px solid #d9d2bd;border-radius:4px;box-shadow:inset 0 -3px 0 #e6dcc6;font:700 clamp(16px,3vw,29px) Manrope,system-ui;padding:0;min-height:0;opacity:1!important;pointer-events:none;z-index:7}.falling-tile small{position:absolute;right:5px;bottom:3px;font:600 10px system-ui}.table[aria-busy=true] .score{color:#2879d7}
.table[aria-busy=true] #board button{opacity:1}

/* Board first, with the active rack directly beneath it. */
main{padding-top:12px}.table>.board-shell{padding-top:0}#board{aspect-ratio:9/10;grid-template-rows:repeat(10,1fr)}.player{margin-top:8px}.composer{margin-top:8px;border-radius:12px}.drop-help{margin-top:4px}.wordometer-card{text-align:center;padding:16px;background:#fffdf8;border:1px solid var(--line);border-radius:15px}#wordometer{--progress:0%;width:126px;height:126px;border-radius:50%;background:conic-gradient(from 0deg,#31a663 0 var(--progress),#e0e3de var(--progress) 100%);display:grid;place-items:center;margin:14px auto 8px;position:relative}#wordometer:before{content:'';position:absolute;inset:13px;border-radius:50%;background:#fffdf8}#meterPercent{position:relative;font:800 28px Manrope,system-ui}#meterDetail{font-size:12px;color:var(--muted);margin:0}@media(max-width:750px){.wordometer-card{grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;gap:10px}#wordometer{width:90px;height:90px;margin:0}#meterPercent{font-size:22px}}

.player[hidden],#cancelWordBtn[hidden]{display:none!important}#cancelWordBtn{flex:none;margin-left:0;padding:8px;color:#a43c50;border-color:#e4bdc4;background:#fff4f5;font-size:20px}#cancelWordBtn span{font-size:11px;vertical-align:middle}@media(max-width:400px){#cancelWordBtn span{display:none}}

.scores-card{background:#fffdf8;border:1px solid var(--line);border-radius:15px;padding:18px}.scores-card h3{margin-bottom:10px}.total-score{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;font-size:14px}.total-score strong{font:800 24px Manrope,system-ui}.total-score.blue{color:var(--blue)}.total-score.red{color:var(--red)}@media(max-width:750px){.scores-card{grid-column:1/-1}}

#phaseTitle:empty,#notice:empty{display:none}.turn-card:has(#phaseTitle:empty):has(#notice:empty){display:none}.credits-card #hintBtn{display:flex;align-items:center;justify-content:center;gap:7px}.help-cost{margin-left:5px}.help-coin{display:inline-block;flex:none;width:19px;height:19px;border-radius:50%;background:linear-gradient(135deg,#ffe89a,#e6aa23);border:2px solid #b77b13;box-shadow:inset 0 0 0 2px #f9d76b,0 1px 0 #8c6417}

.score-popup{white-space:pre-line;max-width:min(300px,calc(100% - 8px));font-size:14px;line-height:1.5;padding:12px 16px;border:2px solid #d4a845;box-shadow:0 5px 22px #25373433}

.play-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.play-actions #hintBtn{display:flex;align-items:center;justify-content:center;gap:7px;margin-left:auto;background:#b58623;color:#fff;min-width:100px}.play-actions #hintBtn:hover:enabled{background:#966d19}

.account-gate{position:fixed;inset:0;z-index:100;background:#253734a6;backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}.account-gate[hidden]{display:none}.account-box{width:min(420px,100%);background:#fffdf7;border-radius:20px;padding:28px;box-shadow:0 18px 70px #0004;text-align:center}.account-box p{font-size:14px}.account-box #googleButton{display:flex;justify-content:center;margin:20px 0}.account-box form label{display:block;text-align:left;font-size:13px}.account-box input{width:100%;font:inherit;padding:12px;border:1px solid #ccd3c6;border-radius:8px;margin:7px 0 14px}.account-box form button{width:100%}#accountError{color:#b74758}#accountError:empty{display:none}#accountRetry{font-size:12px;background:transparent;border:0;margin-top:10px}

.account-box [hidden]{display:none!important}

/* Preserve the premium square's colour underneath every played letter. */
#board button.dl{--square-color:#dbe8ed}
#board button.tl{--square-color:#9ebcca}
#board button.dw{--square-color:#f0d9cc}
#board button.tw{--square-color:#c5806e}
#board button.occupied{background:var(--square-color,#f8f8f1);color:#263932;box-shadow:inset 0 -3px 0 #25373424}
#board button.occupied.tw{color:#fff}
#board button.score-letter{background:var(--square-color,#f8f8f1)!important}
#board button.score-letter.tw{color:#fff}

#board{grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(15,minmax(0,1fr));aspect-ratio:1}.columns{grid-template-columns:repeat(15,minmax(0,1fr));gap:0;padding-left:0;padding-right:0}.columns button{font-size:12px}#board button{font-size:clamp(11px,2.4vw,24px);border-radius:3px}#board button small{font-size:clamp(5px,.7vw,8px);right:2px;bottom:1px}.bonus-label{font-size:clamp(5px,.9vw,9px)}#board .placement-start{outline:2px solid #d3a22f;outline-offset:-2px}.direction-picker{display:flex;gap:8px;margin:8px 0}.direction-picker button{font-size:12px}.direction-picker button.active{background:#244c3b;color:white}.game-layout{grid-template-columns:minmax(0,750px) minmax(200px,250px)}main{max-width:1180px}@media(min-width:1100px){.game-layout{grid-template-columns:minmax(0,750px) 250px}}@media(max-width:750px){#board button{font-size:clamp(10px,3vw,22px)}.board-shell{padding-left:20px}#board button[data-row]::before{font-size:9px;left:-19px}.columns button{font-size:10px}.direction-picker button{flex:1}}

.mode-gate{z-index:90;overflow-y:auto}.mode-box{width:min(520px,100%);max-height:90dvh;overflow-y:auto}.mode-options{display:grid;gap:10px;margin:18px 0}.mode-options button{text-align:left;display:grid;gap:5px;padding:16px;background:#f3f5ee;border:1px solid #cbd8c8;border-radius:12px}.mode-options strong{font-size:18px}.mode-options span{font-size:13px;color:#56645d}.mode-box [hidden]{display:none!important}#botOptions button{display:block;width:100%;margin:8px 0}#onlineOptions label{display:block;margin-top:18px}#modeError{color:#b74758}#modeStatus{font-weight:700;color:#39704f}.table.waiting .player{visibility:visible}.scores-card.practice .total-score.red{display:none}#continueModeBtn{margin-top:12px}

.online-game{display:block;width:100%;margin:8px 0;text-align:left;padding:12px;font-size:13px}#onlineGames{max-height:240px;overflow:auto}#onlineCount{font-weight:700}

/* Welcome screen: all play choices in one place. */
.mode-box{width:min(650px,100%)}#modeUser:empty{display:none}.bot-choice{padding:16px;border:1px solid #cbd8c8;border-radius:12px;background:#f3f5ee}.bot-choice h3{margin:0 0 12px}#botOptions{display:flex;gap:10px}#botOptions button{display:block;flex:1;width:auto;margin:0;text-align:center;padding:12px 8px;font-size:16px}.online-games-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.online-games-table th,.online-games-table td{padding:10px 6px;border-bottom:1px solid #dce2d9}.online-games-table th{font-size:12px;color:#56645d}.online-games-table .online-game{margin:0;padding:8px;width:100%;font:inherit}.online-games-table .your-turn{background:#edf6e9}.online-games-table .opponent-turn{background:#eee;color:#777}.online-games-table .opponent-turn button{color:#777;background:#e5e5e5;border-color:#d5d5d5;cursor:default;opacity:1}.online-games-table td:nth-child(2){white-space:nowrap}#onlineGames{max-height:300px}#onlineOptions>h3{margin-top:22px}#createOnlineBtn{margin-top:12px}

/* The welcome screen uses the whole browser viewport. */
.mode-gate{padding:0;background:#fffdf7;backdrop-filter:none;display:block}.mode-gate .mode-box{width:100%;min-height:100dvh;max-height:none;overflow:visible;border-radius:0;box-shadow:none;padding:clamp(20px,4vw,56px)}.mode-box>*{max-width:1100px;margin-left:auto;margin-right:auto}.mode-box .mode-options{margin:24px auto}.mode-box #onlineGames{max-height:none;overflow:visible}.mode-box .online-games-table .online-game{min-height:52px}.mode-box #createOnlineBtn{display:block;margin:20px auto}.mode-box h2{margin-top:0}.mode-box #continueModeBtn{margin:16px auto}@media(min-width:800px){.mode-box .mode-options{grid-template-columns:1fr 1fr;align-items:stretch}.mode-box .mode-options>button{align-content:center}.mode-box .bot-choice{display:flex;flex-direction:column;justify-content:center}}

/* Full-width game with scores in the header and meter beneath the rack. */
header{max-width:none;display:flex;flex-wrap:wrap;gap:14px}.scores-card{display:flex;flex:1;justify-content:center;flex-wrap:wrap;gap:10px 24px;background:transparent;border:0;box-shadow:none;padding:0}.scores-card .total-score{display:flex;align-items:center;gap:10px;padding:6px 0;margin:0}.top-credits{font-size:12px;color:var(--muted)}.top-credits:empty{display:none}main{max-width:none}.game-layout{display:block;width:100%}.game-layout>.table{width:100%;max-width:none}.player-head{display:none}.rack{display:flex;justify-content:center;gap:clamp(1.5px,.5vw,3.5px)}.rack .tile{flex:none;width:clamp(30px,7vw,58px)}.table>.wordometer-card{display:flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:0;box-shadow:none;margin:0;padding:10px}.table>.wordometer-card h3,.table>.wordometer-card p{margin:0}#wordometer{width:70px;height:70px;flex:none}.table>.turn-card{padding:0 16px;border:0;box-shadow:none}.turn-card:has(#modeStatus:empty):has(#notice:empty):has(#phaseTitle:empty){display:none}#hintWord,#hintStatus{text-align:center;margin:4px 12px}#hintWord:empty,#hintStatus:empty{display:none}.board-shell{max-width:1100px;margin:auto}.composer{text-align:center}.composer .word-build{justify-content:center}@media(max-width:600px){header .brand{font-size:18px}header .scores-card{flex-basis:100%;order:3}.scores-card .total-score{font-size:13px;gap:7px}.scores-card .total-score strong{font-size:16px}header nav{margin-left:auto}}

#accountMessage{text-align:center}.mode-box #onlineOptions{width:100%;max-width:none}.mode-box #onlineOptions>h3{font-size:clamp(28px,3vw,40px);margin:30px 0 18px}.mode-box .online-games-table{font-size:16px}.mode-box .online-games-table th{font-size:14px}.mode-box .online-games-table td,.mode-box .online-games-table th{padding:14px 12px}.mode-box .online-games-table .online-game{min-height:62px;font-size:16px}.welcome-nav{display:flex;justify-content:flex-end;gap:12px;max-width:none;margin:0 0 24px}.welcome-nav button{font-size:16px}.mode-box #onlineCount{font-size:17px}@media(max-width:530px){.mode-box .online-games-table{font-size:13px}.mode-box .online-games-table .online-game{font-size:13px}.mode-box .online-games-table td,.mode-box .online-games-table th{padding:10px 5px}.welcome-nav{justify-content:center}}

/* Board labels and compact player controls. */
#columnBtns{display:none!important}.board-shell{padding-left:0!important}#board button[data-row]::before{display:none!important}.table>.scores-card{max-width:1100px;margin:0 auto 12px;width:100%;display:flex;justify-content:space-between;gap:16px}.table>.scores-card .total-score{flex:1;justify-content:flex-start;font-size:clamp(22px,3vw,34px);font-weight:700}.table>.scores-card .total-score[style*="1"]{justify-content:flex-end;text-align:right}.table>.scores-card .total-score strong{font-size:inherit}.table .rack{gap:1px!important;justify-content:center}.table .rack .tile{margin:0;border-radius:5px}.rack-tools{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 6px;font-size:17px}.rack-tools button{margin:0}.player{border:0;border-radius:0;background:transparent}.total-score span{overflow-wrap:anywhere}@media(max-width:600px){.table>.scores-card .total-score{font-size:18px;gap:7px}.rack-tools{font-size:15px}}

/* Fit the board and tile controls into the available viewport. */
body{height:100dvh;overflow:hidden}header{height:62px;padding:6px 14px;flex-wrap:nowrap;gap:12px;max-width:1100px}header>.scores-card{display:flex;justify-content:space-between;flex:1;gap:10px}header .total-score{font-size:clamp(16px,2.5vw,28px);flex:1}header .total-score[style*="1"]{justify-content:flex-end;text-align:right}header .total-score strong{font-size:inherit}header nav{flex:none}main{padding:0 8px;height:calc(100dvh - 62px)}.table{display:flex;flex-direction:column;align-items:center}.board-shell{width:min(calc(100vw - 16px),calc(100dvh - 255px),900px);max-width:none;margin:0;padding:0}#board{width:100%;gap:1px}#board button{padding:0;min-height:0;font-size:clamp(10px,2.5vh,24px)}.player{padding:5px 0 2px;width:auto}.table .rack{gap:0!important}.table .rack .tile{width:clamp(25px,5vw,44px);height:42px;min-height:0;border-radius:3px;margin:0;padding:0}.rack-tools{display:flex;flex-wrap:nowrap;gap:12px;margin:4px 0;font-size:14px}.rack-tools .wordometer-card{display:flex;align-items:center;gap:7px;border:0;box-shadow:none;background:transparent;padding:0}.rack-tools .wordometer-card h3{display:none}#wordometer{width:44px;height:44px;margin:0}#wordometer:before{inset:6px}#meterPercent{font-size:14px}#meterDetail{font-size:11px;max-width:110px}.rack-tools button{font-size:13px;padding:7px 10px;min-height:36px}#hintBtn:disabled{background:#ddd;color:#777;opacity:1}.composer{padding:0;background:transparent;border:0}.word-build{min-height:0}#chosen{display:none!important}.direction-picker,.play-actions{display:none}#moveFeedback{font-size:12px;margin:2px 0;max-width:95vw}#moveFeedback:empty{display:none}#cancelWordBtn{min-height:26px;padding:3px 8px;font-size:12px}.turn-card{padding:0!important;text-align:center}.turn-card p,.turn-card h2{margin:2px;font-size:12px}#modeStatus{font-size:11px}#hintWord,#hintStatus{font-size:12px;margin:2px}header .total-score span{overflow-wrap:anywhere}.drag-tile{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;background:#ffeec8;border:2px solid #276451;border-radius:5px;font-size:26px;box-shadow:0 4px 15px #0004}.rack .tile{touch-action:none;user-select:none;-webkit-user-select:none}.landing-preview{touch-action:none}@media(max-width:600px){header{height:68px;padding:4px 8px}main{height:calc(100dvh - 68px)}header .scores-card{order:0;flex-basis:auto}header nav button{font-size:11px;padding:5px}header .total-score{font-size:15px;gap:5px}.rack-tools{gap:7px;font-size:12px}.rack-tools button{font-size:11px;padding:6px}.board-shell{width:min(calc(100vw - 16px),calc(100dvh - 260px))}#meterDetail{max-width:70px;font-size:10px}}
header>.scores-card{order:0;flex-basis:auto;flex-wrap:nowrap;min-width:0}header .total-score{min-width:0}.rack-tools .wordometer-card h3{display:block;font-size:11px}.rack-tools .wordometer-card{flex-shrink:0}#notice:not(:empty){padding:3px 6px}.rack .tile.selected{transform:none;opacity:.35}@media(max-width:600px){#meterDetail{display:none}.rack-tools .wordometer-card{gap:4px}.rack-tools .wordometer-card h3{font-size:10px}header>.scores-card{gap:8px}header .total-score{font-size:14px;gap:4px}}

/* Keep rack squares on the same grid as the board. */
body{--board-size:min(calc(100vw - 16px),calc(100dvh - 255px),900px);--tile-size:calc((var(--board-size) - 14px)/15);--rack-size:calc(var(--tile-size)*9 + 8px)}
.board-shell,.rack-row{width:var(--board-size)}
header{width:var(--board-size);max-width:none;padding:6px 0}
header>.scores-card{width:100%;flex-basis:auto}
header .total-score{flex:0 1 auto;justify-content:flex-start;gap:8px;white-space:nowrap}
header .total-score[style*="1"]{justify-content:flex-end}
header .total-score span{overflow-wrap:normal}
.rack-row{position:relative;margin-top:6px;min-height:var(--tile-size)}
.rack-row .player{width:var(--rack-size);margin:0 auto;padding:0}
#player0 .rack,#player1 .rack{width:var(--rack-size);display:grid;grid-template-columns:repeat(9,var(--tile-size));gap:1px!important;min-height:0}
.rack-row .rack .tile{width:var(--tile-size);height:var(--tile-size);aspect-ratio:1;min-width:0;border-radius:4px;border:1px solid #e3e7dc;box-shadow:inset 0 -3px 0 #e6dcc6;background:#fff9e9;color:#263932;font:700 clamp(10px,2.5vh,24px) Manrope,system-ui;padding:0}
.rack-row .tile small{right:5px;bottom:3px;font:600 clamp(7px,1vw,10px) 'DM Sans',system-ui}
.rack-side{position:absolute;left:calc(50% + var(--rack-size)/2 + 1px);top:0;height:var(--tile-size);width:calc(var(--tile-size)*3 + 2px);display:flex;align-items:center;justify-content:center;gap:3px}
#cancelWordBtn{width:calc(var(--tile-size)*1.7);height:var(--tile-size);min-height:0;padding:0;font-size:clamp(7px,1.2vw,12px);border-radius:4px}
.rack-side .wordometer-card{display:flex;align-items:center;margin:0;padding:0;background:transparent;border:0;box-shadow:none}
.rack-side .wordometer-card h3,.rack-side #meterDetail{display:none}
.rack-side #wordometer{width:calc(var(--tile-size)*1.1);height:calc(var(--tile-size)*1.1);margin:0}
.rack-side #wordometer:before{inset:4px}
.rack-side #meterPercent{font-size:clamp(8px,1.2vw,13px)}
.rack-tools{margin:9px 0 3px;min-height:36px}
.composer{margin:0}
#releaseBtn[hidden],#cancelWordBtn[hidden]{display:none!important}
#moveFeedback{display:none}
.info-button{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:34px;height:34px;min-height:0;padding:0;border:1.5px solid var(--green);border-radius:50%;background:var(--paper);color:var(--green);font:bold 23px Georgia,serif;z-index:10}
.rules-dictionaries{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
@media(max-width:600px){body{--board-size:min(calc(100vw - 16px),calc(100dvh - 260px))}header{padding:4px 0}header .total-score{gap:6px}}


/* Align the rack directly to board columns 4–12 and separate it from the board. */
.rack-row{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));column-gap:1px;margin-top:20px}
.rack-row .player{grid-column:4 / span 9;grid-row:1;width:100%;margin:0;padding:0}
#player0 .rack,#player1 .rack{width:100%;grid-template-columns:repeat(9,minmax(0,1fr))}
.rack-row .rack .tile{width:100%;display:grid;place-items:center;text-align:center;line-height:1;letter-spacing:0;text-indent:0}
.rack-side{grid-column:13 / span 3;grid-row:1;position:static;width:auto;height:var(--tile-size);justify-content:flex-start;padding-left:4px}
.rack-tools{gap:12px;margin-top:12px}
.rack-tools .wordometer-card h3,.rack-tools #meterDetail{display:none}
.rack-tools .wordometer-card{margin:0;padding:0}
.rack-tools #wordometer{width:36px;height:36px;margin:0}
.rack-tools #wordometer:before{inset:4px}
.rack-tools #meterPercent{font-size:11px}
@media(max-width:600px){.rack-tools{gap:8px}.rack-tools #wordometer{width:30px;height:30px}.rack-tools #meterPercent{font-size:10px}}

/* A timber tray surrounds the rack without changing the column alignment. */
.rack-row{margin-top:24px;padding-block:10px}
.rack-row .rack{position:relative;isolation:isolate}
.rack-row .rack::before{content:"";position:absolute;inset:-8px -10px;z-index:-1;pointer-events:none;border:1px solid #88633d;border-radius:6px;background:repeating-linear-gradient(2deg,transparent 0 3px,#7d51291a 4px,transparent 5px 9px),repeating-linear-gradient(178deg,#ffffff12 0 1px,transparent 2px 7px),linear-gradient(180deg,#caa575 0%,#bb8c56 72%,#a47644 73%,#d0aa76 100%);box-shadow:inset 0 2px 2px #fff6,inset 0 -3px 2px #60402040,0 3px 6px #49371d2b}
.rack-row .rack .tile{position:relative;z-index:1}
.rack-side{padding-left:14px}

.back-button{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));min-height:36px;padding:6px 14px;border-color:var(--green);background:var(--paper);color:var(--green);z-index:10}
.info-button{right:calc(max(12px,env(safe-area-inset-right)) + 80px)}
.back-button[hidden]{display:none!important}


/* Keep every welcome section aligned to one centred content width. */
.mode-gate .mode-box{--welcome-width:min(760px,60vw)}
.mode-box>h2,.mode-box>.welcome-nav,.mode-box>.mode-options,.mode-box>#onlineOptions,.mode-box>#modeError{width:100%;max-width:var(--welcome-width);margin-left:auto;margin-right:auto}
.mode-box .welcome-nav{justify-content:flex-end}
.mode-box #practiceBtn{text-align:center;justify-items:center}
.rack-side{padding-left:12px;gap:3px}
.rack-side #cancelWordBtn{width:calc(var(--tile-size)*1.5);flex:none}
.rack-side #wordometer{width:var(--tile-size);height:var(--tile-size)}
@media(max-width:1100px){.mode-gate .mode-box{--welcome-width:100%;padding:24px 16px}}

@media(pointer:coarse){.mode-gate .mode-box{--welcome-width:100%;padding:24px 16px}}


/* Leave room beside the timber tray and make Help and credits easier to read. */
body{--board-size:min(calc(100vw - 16px),calc(100dvh - 285px),900px)}
.rack-side{padding-left:clamp(14px,1.4vw,22px);gap:clamp(6px,1vw,12px)}
.rack-side #cancelWordBtn{width:calc(var(--tile-size)*1.15);font-size:clamp(7px,.8vw,11px)}
.rack-tools{flex-wrap:wrap;max-width:calc(100vw - 24px)}
#hintBtn{font-size:20px;min-height:48px;padding:10px 18px}
#hintBtn .help-cost{font-size:22px}
.rack-tools>span:first-child{font-size:18px}
#rackCredits{font-size:20px}
@media(max-width:600px){body{--board-size:min(calc(100vw - 16px),calc(100dvh - 300px))}#hintBtn{font-size:18px;min-height:44px;padding:8px 12px}#hintBtn .help-cost,#rackCredits{font-size:20px}.rack-tools>span:first-child{font-size:16px}}


/* The new-game action occupies the last row of the online table. */
.mode-box .online-games-table #createOnlineBtn{display:block;width:100%;margin:0;min-height:48px}
.mode-box .new-online-game td{padding-top:8px;padding-bottom:8px}
#onlineCount[hidden]{display:none!important}
@media(max-width:600px){.mode-gate .mode-box{padding:16px 12px}.mode-box .welcome-nav{margin-bottom:14px;gap:8px}.welcome-nav button{font-size:14px;padding:6px;min-height:34px}.mode-box>h2{font-size:21px;margin-bottom:12px}.mode-box .mode-options{margin:14px auto;gap:8px}.mode-box .mode-options>button,.mode-box .bot-choice{padding:12px}.mode-box .mode-options strong{font-size:17px}.mode-box .mode-options span{font-size:12px}.mode-box .bot-choice h3{margin-bottom:8px}#botOptions button{padding:8px 5px;min-height:40px;font-size:14px}.mode-box #onlineOptions>h3{font-size:27px;margin:18px 0 10px}.mode-box .online-games-table .online-game{min-height:44px;font-size:13px}.mode-box .online-games-table td,.mode-box .online-games-table th{padding:8px 5px}.mode-box .online-games-table th{font-size:12px}}

.credit-balance{display:flex;align-items:center;gap:6px;white-space:nowrap}
#buyCreditsBtn{font-size:15px;min-height:34px;padding:5px 10px;border-color:var(--green);color:var(--green)}
.credit-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.credit-package{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 10px;border-color:#b5cbbd;background:#f1f5ed;min-height:125px}
.credit-package strong{font-size:18px}.credit-package>span{font-size:28px;color:var(--green)}
.purchase-status{font-size:15px;line-height:1.6}.purchase-balance{text-align:center}
@media(max-width:530px){.credit-packages{gap:8px}.credit-package{padding:16px 6px;min-height:110px}.credit-package strong{font-size:14px}.credit-package>span{font-size:24px}#buyCreditsBtn{font-size:14px;padding:5px 8px}}

/* Credit shop and board control refinements. */
#modal:has(.buy-credits-dialog) #modalTitle,.purchase-note{text-align:center}
.purchase-status:empty{display:none}
.credit-packages{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.credit-package{padding:18px 6px}.credit-package strong{font-size:16px}
#scoreName0,#scoreName1{font-weight:850}
.rack-tools .credit-balance{font-size:22px}#rackCredits{font-size:20px}
#buyCreditsBtn{min-height:48px;padding:10px 14px;font-size:18px}
#hintBtn .help-coin{margin-left:6px;transform:translateY(2px)}
.rack-side #wordometer{width:calc(var(--tile-size)*1.5);height:calc(var(--tile-size)*1.5);flex-shrink:0}
.rack-side{padding-left:8px;gap:6px}
#backBtn{right:max(8px,calc((100vw - var(--board-size))/2))}
#helpBtn{right:calc(max(8px,(100vw - var(--board-size))/2) + 80px)}
.dictionary-choice-label{display:block;font-weight:700;margin:12px 0}
@media(max-width:600px){.rack-tools .credit-balance{font-size:20px}#buyCreditsBtn{min-height:44px;padding:8px 12px}.credit-packages{grid-template-columns:repeat(2,minmax(0,1fr))}.credit-package:last-child{grid-column:1/-1}.rack-side{padding-left:4px;gap:3px}}

/* Align actions and revealed words with the tile rack. */
.rack-side{transform:translateX(clamp(10px,1.5vw,20px))}
.rack-tools{width:var(--rack-size);max-width:calc(100vw - 24px);display:flex;align-items:center;gap:16px;margin-top:16px}
.rack-tools .credit-balance{gap:12px}
#hintBtn{margin-left:auto;flex-shrink:0}
#hintWord{width:var(--rack-size);max-width:calc(100vw - 24px);text-align:right;font-size:clamp(10px,2.5vh,24px);font-weight:800;line-height:1.25;letter-spacing:.08em;margin:10px 0 2px;overflow-wrap:anywhere}
#hintStatus{width:var(--rack-size);max-width:calc(100vw - 24px);text-align:right}
#validity:empty{display:none}
@media(max-width:600px){.rack-tools{gap:10px;flex-wrap:wrap}.rack-tools .credit-balance{gap:8px}#hintBtn{padding:8px 10px}}

.rack-tools{display:grid;grid-template-columns:1fr auto}.rack-tools .credit-balance{grid-column:1;grid-row:1}#hintBtn{grid-column:2;grid-row:1;justify-self:end}#validity{grid-column:1;grid-row:2}#releaseBtn{grid-column:2;grid-row:2;justify-self:end}.rack-tools #releaseBtn[hidden]{display:none}
@media(max-width:600px){.rack-tools .credit-balance{grid-column:1/-1;justify-self:start}#hintBtn{grid-row:2}#validity,#releaseBtn{grid-row:3}}

.mode-box .online-games-table th{font-size:18px;font-weight:800}
.mode-box .online-games-table .new-online-game td{padding-top:10px;padding-bottom:10px}
.mode-box .online-games-table #createOnlineBtn{font:inherit;margin:0;padding:8px;width:100%;background:#fffdf7;color:var(--ink);border:1px solid var(--line);text-align:center;border-radius:10px;min-height:62px}
@media(max-width:600px){.mode-box .online-games-table #createOnlineBtn{min-height:44px}}
@media(max-width:600px){.mode-box .online-games-table th{font-size:15px}}

.rack-tools .credit-balance{justify-self:start;gap:16px}.credit-total{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.purchase-support{text-align:center;line-height:1.6;margin-top:20px}
#modal:has(.buy-credits-dialog) .modal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#modal:has(.buy-credits-dialog) #modalTitle{grid-column:2;text-align:center}
#modal:has(.buy-credits-dialog) #closeModal{grid-column:3;grid-row:1}

/* Letter-tile identity on the game-selection menu. */
.mode-box .welcome-nav{align-items:center;flex-wrap:wrap;gap:12px}
.welcome-brand{display:flex;align-items:center;gap:12px;margin-right:auto;text-align:left}
.welcome-logo{display:flex;gap:3px;flex-shrink:0}
.welcome-logo>span{display:grid;place-items:center;width:36px;height:40px;border-radius:5px;background:#fff2ce;color:var(--green);border:1px solid #d4c39a;box-shadow:0 3px 0 #c5b38d;font:800 25px Manrope,system-ui}
.welcome-brand-copy{display:flex;flex-direction:column;gap:3px}
.welcome-brand-copy strong{font:800 25px/1.15 Manrope,system-ui;letter-spacing:-.7px}
.welcome-brand-copy small{font-size:12px;color:var(--muted)}
@media(max-width:600px){.welcome-brand{flex-basis:100%;margin-bottom:8px}.welcome-brand-copy strong{font-size:24px}.mode-box .welcome-nav{justify-content:flex-end}.welcome-logo>span{width:32px;height:36px;font-size:23px}}

.dictionary-flag{display:inline-block;width:24px;height:15px;object-fit:fill;margin-left:8px;vertical-align:middle;border:1px solid #0002;border-radius:1px;flex-shrink:0}

.dictionary-choices{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.dictionary-choice{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;white-space:nowrap}.dictionary-choice[aria-pressed="true"]{background:#edf6e9;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.dictionary-choice .dictionary-flag{margin-left:0}.dictionary-check-label{display:block;font-weight:700;margin:18px 0 8px}

/* Rack, Undo, meter and Play share one row beneath the board. */
.rack-row .player{grid-column:1 / span 9;margin:0}
.rack-side{grid-column:10 / span 6;transform:none;padding-left:14px;gap:10px;width:auto;min-width:0;display:flex;align-items:center;height:auto}
.rack-side #cancelWordBtn{width:var(--tile-size);height:var(--tile-size);font-size:clamp(20px,3vh,32px);flex-shrink:0}
.rack-side #releaseBtn{grid-column:auto;grid-row:auto;font-size:clamp(10px,1.5vh,16px);padding:8px;min-height:var(--tile-size);margin:0;white-space:nowrap}
#releaseBtn[hidden],#validity{display:none!important}
.rack-tools,#hintWord,#hintStatus{align-self:flex-start;margin-left:0}
@media(max-width:600px){.rack-side{padding-left:6px;gap:5px}.rack-side #releaseBtn{padding:5px 3px;font-size:9px}.rack-side #wordometer{width:calc(var(--tile-size)*1.3);height:calc(var(--tile-size)*1.3)}}

.tile-bag{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));right:calc(max(8px,(100vw - var(--board-size))/2) + 128px);width:52px;height:58px;background:url('tile-bag.svg') center/contain no-repeat;display:flex;align-items:center;justify-content:center;padding-top:15px;z-index:10;font-size:17px;font-weight:800;color:#604b21;pointer-events:none}.account-pending .tile-bag,body:has(#modeGate:not([hidden])) .tile-bag{display:none}

/* Keep the lower controls anchored to the board rather than the page edge. */
.table>.rack-tools{align-self:center;width:var(--board-size);max-width:var(--board-size);margin:16px 0 3px;grid-template-columns:minmax(0,1fr) auto}
.table>.rack-tools .credit-balance{grid-column:1;grid-row:1;justify-self:start}
.table>.rack-tools #hintBtn{grid-column:2;grid-row:1;justify-self:end;margin-left:0}
.rack-row{align-items:center}
.rack-row .player{transform:translateX(10px);align-self:center}
.rack-side{padding-left:clamp(28px,2.5vw,38px);align-self:center;align-items:center}
.table>#hintWord,.table>#hintStatus{align-self:center;width:var(--board-size);max-width:var(--board-size);text-align:right}
#backBtn,#helpBtn{bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))}
.tile-bag{bottom:max(26px,calc(env(safe-area-inset-bottom) + 16px))}
@media(max-width:600px){.rack-side{padding-left:18px;gap:5px}.table>.rack-tools{column-gap:8px}.table>.rack-tools .credit-balance{gap:8px}.table>.rack-tools #hintBtn{grid-row:1}#backBtn,#helpBtn{bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px))}.tile-bag{bottom:max(20px,calc(env(safe-area-inset-bottom) + 10px))}}

.rack-row{position:relative}#shuffleBtn{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);width:34px;min-height:34px;padding:0;font-size:25px;border-color:#b8cbbd}.turn-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;grid-column:2;grid-row:1}.turn-actions button{min-height:48px}.table>.rack-tools #hintBtn{margin:0}.tile-bag{pointer-events:auto;cursor:pointer;border:0;border-radius:0;padding:15px 0 0;min-height:0}.tile-bag:hover:enabled{background-color:transparent}.exchange-tiles{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.exchange-tiles .selected{outline:3px solid var(--green);transform:none}.bag-contents{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px}.bag-letter{display:flex;flex-direction:column;gap:5px;text-align:center;padding:12px;border:1px solid var(--line);background:#fff2ce;border-radius:8px}.bag-letter strong{font-size:24px}.new-rack-tile{animation:tile-arrives .65s ease-out}@keyframes tile-arrives{from{opacity:0;transform:translateY(12px);background:#e7f3d6}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){#shuffleBtn{right:auto;left:0;top:-10px;transform:translateY(-100%);width:28px;min-height:26px;font-size:20px}.turn-actions{gap:5px}.turn-actions button{padding:7px;font-size:13px;min-height:44px}.table>.rack-tools{grid-template-columns:auto 1fr}}

.tile-bag:hover:enabled{background:url('tile-bag.svg') center/contain no-repeat}
@media(max-width:600px){.table>.rack-tools{row-gap:10px}.table>.rack-tools .credit-balance{grid-row:1;grid-column:1/-1}.turn-actions{grid-row:2;grid-column:1/-1;justify-content:flex-end;width:100%}.turn-actions #hintBtn{grid-row:auto;grid-column:auto}.turn-actions button{font-size:14px}}

/* Display only the supplied blue arrow within the screenshot. */
.rack-side #cancelWordBtn{padding:3px;line-height:0}
.undo-icon{display:block;width:100%;height:100%;overflow:hidden;mix-blend-mode:multiply;pointer-events:none}
/* Email account access uses the same centred sign-in card as Google. */
#emailLoginBtn{display:block;margin:18px auto 0;min-width:260px}#emailLoginBtn[hidden],#emailPanel[hidden]{display:none}#emailPanel{text-align:left;width:100%}#emailForm{display:grid;gap:10px}#emailForm label{display:block;font-weight:650;margin:8px 0 4px}#emailForm input{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;min-height:44px;background:#fff;color:var(--ink)}#emailForm input[hidden]{display:none}#emailSubmit{margin-top:10px;width:100%}.email-guidance{font-size:13px;color:var(--muted);margin:5px 0}.email-links{display:flex;justify-content:center;flex-wrap:wrap;gap:3px;margin-top:12px}.email-links button{font-size:14px;text-decoration:underline;min-height:44px;padding:6px 10px}#accountGate{overflow:auto;padding:20px}#accountGate .account-box{margin:auto;max-height:none}#accountMessage{text-align:center}#accountError{overflow-wrap:anywhere}button{touch-action:manipulation}

/* Navigation follows the controls in normal flow, including on short Safari viewports. */
body{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto}
main{height:auto;min-height:0}
.game-footer{width:var(--board-size);max-width:calc(100% - 16px);margin:14px auto 0;padding:0 0 max(16px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;clear:both}
.game-footer #tileBag,.game-footer #helpBtn,.game-footer #backBtn{position:static;inset:auto;flex:0 0 auto;transform:none}
.game-footer #tileBag{order:0}
.game-footer #helpBtn{order:1;width:44px;height:44px;min-height:44px}
.game-footer #backBtn{order:2;min-height:44px}
.account-pending .game-footer,body:has(#modeGate:not([hidden])) .game-footer{display:none}
@media(max-width:600px){.game-footer{gap:10px;margin-top:12px}.turn-actions{flex-wrap:wrap}}

/* Keep each letter's base score legible, including on compact touch boards. */
#board button small.tile-score{display:block!important;visibility:visible;position:absolute;right:1px;bottom:0;font:700 clamp(7px,calc(var(--tile-size)*.2),12px)/1 system-ui;color:inherit;pointer-events:none}
#board button.placement-start{outline:3px solid #d3a22f;outline-offset:-3px;background:#fff1b6}
.rack .tile.rack-used{visibility:hidden;pointer-events:none}

/* Give all three game choices the same heading size. */
.mode-box #practiceBtn>strong,.mode-box .bot-choice>h3,.mode-box #onlineOptions>h3{font-size:clamp(28px,3vw,40px)}
@media(max-width:600px){.mode-box #practiceBtn>strong,.mode-box .bot-choice>h3,.mode-box #onlineOptions>h3{font-size:27px}}

.online-games-table .opponent-turn .online-game{cursor:pointer}
.next-online-actions{flex-wrap:wrap;justify-content:center;gap:12px}
.next-online-actions button{min-height:44px}

/* Clear, bold tile faces and vivid premium squares. */
#board button,.rack-row .rack .tile,.tile,.falling-tile,.drag-tile{
  font-family:Arial,Helvetica,sans-serif;font-weight:800;color:#17251d;
}
#board button.occupied,.rack-row .rack .tile,.falling-tile{
  font-size:clamp(12px,calc(var(--tile-size)*.68),40px);line-height:1;
}
/* Keep the board a touch quieter than the rack, without shrinking score labels. */
#board button.occupied,#board button.landing-preview{font-family:'DM Sans',Arial,Helvetica,sans-serif;font-size:clamp(12px,calc(var(--tile-size)*.64),38px);font-weight:600}
#board button.dl,.dl{--square-color:#80b5ce;background:#80b5ce;color:#102c3b}
#board button.tl,.tl{--square-color:#b0c779;background:#b0c779;color:#20320c}
#board button.dw,.dw{--square-color:#dd958b;background:#dd958b;color:#41150f}
#board button.tw,.tw{--square-color:#e9b37e;background:#e9b37e;color:#422008}
#board button .bonus-label{font:800 clamp(8px,calc(var(--tile-size)*.37),22px)/1 Arial,Helvetica,sans-serif}
#board button.occupied,#board button.occupied.tw,#board button.score-letter.tw{color:#17251d}
#board button.occupied{background:var(--square-color,#fff9e9)}
#board button:disabled,.rack-row .rack .tile:disabled{opacity:1}
#board button small.tile-score,.rack-row .tile small{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:clamp(7px,calc(var(--tile-size)*.2),12px);right:2px;bottom:1px;color:inherit}
#board button .bonus-dot{font-size:clamp(5px,calc(var(--tile-size)*.13),8px);line-height:1;top:1px;left:1px}

#player0 .rack .tile,#player1 .rack .tile{font-size:clamp(12px,calc(var(--tile-size)*.68),40px)}

/* Last move total, tucked beside the final tile like a score marker. */
#board button .last-move-score{position:absolute;z-index:8;right:-3px;bottom:-4px;min-width:1.3em;padding:2px 4px;border-radius:8px;background:#ce4338;color:#fff;font:700 clamp(8px,calc(var(--tile-size)*.24),14px)/1 Arial,sans-serif;box-shadow:0 0 0 1px #fff;pointer-events:none}
#board button:has(.last-move-score){z-index:2;overflow:visible}

/* Played tiles retain the colour of the player who originally placed them. */
#board button.occupied.played-by-0{--square-color:#cce3d3;background:var(--square-color);color:#17251d;box-shadow:inset 0 -2px 0 #b4cbb9}
#board button.occupied.played-by-1{--square-color:#eee1c0;background:var(--square-color);color:#17251d;box-shadow:inset 0 -2px 0 #d5c5a2}
#scoreName0::before,#scoreName1::before{content:none;display:none}

/* Keep Back visible beside the scores, above the board on every screen size. */
header #backBtn{position:static;inset:auto;flex:0 0 auto;min-height:44px;margin-left:8px;padding:6px 12px;transform:none}
#modal.next-online-dialog .modal-head{display:none}
#modal.next-online-dialog .next-online-actions{margin-top:0}

/* Welcome and navigation share a row beneath the brand on phones and larger screens. */
.mode-box .welcome-nav{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px}
.welcome-nav .welcome-brand{grid-column:1/-1;margin:0 0 8px}
.welcome-nav #modeTitle{margin:0;text-align:left;font-size:20px;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{white-space:nowrap;min-height:44px}
@media(max-width:600px){.mode-box .welcome-nav{gap:6px}.welcome-nav #modeTitle{font-size:16px}.welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:13px;padding:6px 4px}}

/* Keep phone/tablet rack controls below the board with room for Shuffle. */
@media(max-width:800px){
 .rack-row{grid-template-columns:32px minmax(0,9fr) minmax(0,4fr);column-gap:12px}
 .rack-row #shuffleBtn{position:static;inset:auto;transform:none;grid-column:1;grid-row:1;align-self:center;width:32px;min-height:36px;margin:0;font-size:22px}
 .rack-row .player{grid-column:2;grid-row:1;transform:none;width:100%;min-width:0}
 .rack-row .rack::before{inset:-8px -5px}
 .rack-row .rack-side{grid-column:3;grid-row:1;position:static;padding-left:0;min-width:0;height:auto;flex-wrap:wrap;justify-content:flex-start;gap:6px}
}
@media(max-width:600px){
 .table>.rack-tools{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
 .table>.rack-tools .turn-actions{display:contents}
 .table>.rack-tools #passBtn{grid-column:1;grid-row:1;justify-self:end}
 .table>.rack-tools #exchangeBtn{grid-column:2;grid-row:1;justify-self:end}
 .table>.rack-tools .credit-balance{grid-column:1;grid-row:2;justify-self:start}
 .table>.rack-tools #hintBtn{grid-column:2;grid-row:2;justify-self:end}
}

/* Cloth bag and move controls remain together, including on phones. */
.move-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.turn-actions #tileBag{position:relative;inset:auto;transform:none;display:flex;flex:0 0 52px;width:52px;height:60px;min-height:60px;margin:0;padding:15px 0 0;background:url('tile-bag.svg?v=yellow-cloth') center/contain no-repeat;border:0;border-radius:0;color:#593d08;font-size:18px;font-weight:850;line-height:1}
.turn-actions #tileBag:hover:enabled{background:url('tile-bag.svg?v=yellow-cloth') center/contain no-repeat;filter:brightness(1.04)}
.bag-inventory{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.bag-inventory th,.bag-inventory td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:right}
.bag-inventory th:first-child{text-align:left}
.bag-inventory thead th{background:#f7e3a5;color:#593d08}
.bag-inventory tbody tr:nth-child(even){background:#f6f4ee}
.bag-inventory tfoot{font-weight:800}
@media(max-width:600px){.table>.rack-tools .move-actions{grid-column:1/-1;grid-row:1;justify-self:end}.move-actions{gap:8px}}

/* Prioritise online games and keep the tablet welcome controls on one line. */
.mode-box #onlineOptions>h3{margin-bottom:9px}
@media(min-width:720px){
 .mode-box .welcome-nav{grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px}
 .welcome-nav .welcome-brand{grid-column:auto;margin:0}
 .welcome-nav #modeTitle{font-size:18px;margin-left:8px}
 .welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{padding:8px}
}
@media(max-width:600px){.mode-box #onlineOptions>h3{margin-bottom:5px}}

/* Keep dictionary feedback immediately to the right of the wordometer. */
.wordometer-feedback{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.wordometer-feedback .wordometer-card{flex:0 0 auto}
#invalidWords{margin:0;min-width:0;color:#a2352e;font-size:clamp(11px,1.4vw,16px);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
#invalidWords:empty{display:none}
@media(max-width:800px){.wordometer-feedback{flex-basis:100%;gap:5px}}

/* The name box follows the player whose turn is being displayed. */
#scoreName0,#scoreName1{font-weight:500;border-radius:4px}
#scoreName0.active-turn,#scoreName1.active-turn{font-weight:850;background:#fff0bd;box-shadow:none}

/* Keep the purchased clue alongside its Hint/Super Hint button. */
.hint-control{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;max-width:100%}
.hint-control #hintBtn{flex:0 0 auto}
.hint-control #hintWord{margin:0;align-self:center;text-align:left;font-size:clamp(15px,1.8vw,22px);font-weight:850;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.turn-actions{flex-wrap:wrap}
@media(max-width:800px){
 .table>.rack-tools .turn-actions{display:contents}
 .table>.rack-tools .move-actions{grid-column:1/-1;grid-row:1;justify-self:end}
 .table>.rack-tools .credit-balance{grid-column:1/-1;grid-row:2;justify-self:start}
 .table>.rack-tools .hint-control{grid-column:1/-1;grid-row:3;justify-self:end;gap:10px}
}

/* Make the new online game action stand out from existing games. */
.mode-box .online-games-table #createOnlineBtn{font-weight:850;font-size:22px}
@media(max-width:530px){.mode-box .online-games-table #createOnlineBtn{font-size:19px}}

/* Emphasise the way back while waiting, and give Shuffle its own tile-sized space. */
header #backBtn.opponent-turn{font-weight:850;font-size:20px;min-height:48px;padding:8px 16px;border-width:2px}
.rack-row{grid-template-columns:max(50px,var(--tile-size)) minmax(0,9fr) minmax(0,4fr);column-gap:12px}
.rack-row #shuffleBtn{position:static;inset:auto;transform:none;grid-column:1;grid-row:1;align-self:center;width:100%;height:max(50px,var(--tile-size));min-height:50px;margin:0;padding:0;font-size:50px;line-height:1}
.rack-row .player{grid-column:2;grid-row:1;transform:none;width:100%;min-width:0}
.rack-row .rack::before{inset:-8px -5px}
.rack-row .rack-side{grid-column:3;grid-row:1;position:static;padding-left:0;min-width:0;height:auto;flex-wrap:wrap;justify-content:flex-start;gap:6px}
@media(max-width:800px){.rack-row #shuffleBtn{font-size:44px}}
@media(max-width:600px){header #backBtn.opponent-turn{font-size:17px;padding:7px 12px}.rack-row{column-gap:8px}}

/* Keep How to Play and Dictionary access beside the visible credit controls. */
.table>.rack-tools .credit-balance{flex-wrap:wrap}
.table>.rack-tools #helpBtn{position:static;inset:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:2px solid var(--green);border-radius:50%;font-family:Georgia,serif;font-size:30px;font-weight:700;line-height:1;background:var(--paper,#fffdf6);color:var(--green);z-index:auto}

.rack-row .rack .tile.rack-highlighted{outline:3px solid #276451;outline-offset:1px;background:#ffe28a;box-shadow:0 0 0 5px #e4b74f66;transform:translateY(-5px)}

/* One compact menu bar with the initial tiles incorporated in the name. */
.mode-box .welcome-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;flex-wrap:nowrap}
.welcome-nav .welcome-brand{grid-column:auto;flex-basis:auto;min-width:0;margin:0}
.welcome-brand-copy .wordmark{display:flex;align-items:center;gap:6px;font-size:21px;line-height:1.2;letter-spacing:-.4px;white-space:nowrap}
.wordmark-word{display:inline-flex;align-items:center;gap:1px}
.wordmark-tile{display:inline-grid;place-items:center;width:26px;height:29px;margin-right:1px;border-radius:4px;border:1px solid #d4c39a;box-shadow:0 2px 0 #c5b38d;background:#fff2ce;color:var(--green);font-weight:850}
.welcome-nav #modeTitle{margin:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:15px;padding:6px;min-height:44px}
@media(max-width:600px){
 .mode-box .welcome-nav{gap:5px}
 .welcome-brand-copy .wordmark{font-size:15px;gap:4px;letter-spacing:-.35px}
 .wordmark-tile{width:19px;height:23px}
 .welcome-brand-copy small{font-size:9px;letter-spacing:-.1px}
 .welcome-nav #modeTitle{font-size:13px}
 .welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:12px;padding:6px 2px}
}

/* Larger, evenly spaced menu text with a nine-character name allowance. */
.mode-box .welcome-nav{grid-template-columns:auto minmax(0,1fr) auto auto;justify-content:space-between;column-gap:clamp(10px,2vw,24px)}
.welcome-brand-copy .wordmark{font-size:24px}
.wordmark-tile{width:29px;height:32px}
.welcome-nav #modeTitle{justify-self:center;max-width:100%;font-size:20px}
.welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:18px;padding:6px 2px}
@media(max-width:600px){
 .mode-box .welcome-nav{column-gap:7px}
 .welcome-brand-copy .wordmark{font-size:17px;gap:4px}
 .wordmark-tile{width:21px;height:25px}
 .welcome-nav #modeTitle{font-size:15px}
 .welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:14px;padding:6px 0}
}
@media(max-width:370px){
 .mode-box .welcome-nav{column-gap:5px}
 .welcome-brand-copy .wordmark{font-size:16px}
 .wordmark-tile{width:19px;height:23px}
 .welcome-nav #modeTitle{font-size:14px}
 .welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:13px}
}

/* Put the move total below the tile lettering rather than over its lower strokes. */
#board button .last-move-score{bottom:-10px;right:-3px}
/* Keep Hint on the Credits row on phones and tablets. */
@media(max-width:800px){
 .table>.rack-tools{grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
 .table>.rack-tools .credit-balance{grid-column:1;grid-row:2;align-self:center;gap:7px;flex-wrap:nowrap}
 .table>.rack-tools .hint-control{grid-column:2;grid-row:2;align-self:center;justify-self:end;flex-wrap:wrap;max-width:160px;gap:6px}
}
@media(max-width:600px){
 .table>.rack-tools .credit-balance{font-size:14px;gap:6px}
 .table>.rack-tools #rackCredits{font-size:18px}
 .table>.rack-tools #buyCreditsBtn{font-size:14px;padding:7px 9px;min-height:44px}
 .table>.rack-tools #helpBtn{width:36px;flex-basis:36px;height:44px;font-size:26px}
 .table>.rack-tools #hintBtn{font-size:15px;padding:8px;min-height:44px}
 .table>.rack-tools #hintBtn .help-cost{font-size:16px}
 .table>.rack-tools .hint-control{max-width:125px}
}

/* Preserve the earlier rack width and fit every control on one phone row. */
@media(max-width:600px){
 .rack-row{grid-template-columns:26px calc((100% - 66px)*9/13) minmax(0,1fr);column-gap:6px;row-gap:0}
 .rack-row #shuffleBtn{grid-column:1;grid-row:1;width:26px;height:36px;min-height:36px;font-size:24px}
 .rack-row .player{grid-column:2;grid-row:1}
 .rack-row .rack::before{inset:-8px -3px}
 .rack-row .rack-side{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:3px;width:100%;height:auto;padding:0}
 .rack-row .rack-side #cancelWordBtn{order:0;width:24px;height:36px;min-height:36px;flex:0 0 24px;padding:1px}
 .rack-row .rack-side .wordometer-feedback{order:1;position:relative;flex:0 0 26px;flex-basis:26px;min-width:0;gap:0}
 .rack-row .rack-side #wordometer{width:26px;height:26px}
 .rack-row .rack-side #meterPercent{font-size:9px}
 .rack-row .rack-side #releaseBtn{order:2;min-height:36px;min-width:0;font-size:9px;padding:5px 3px;flex:0 1 auto;white-space:nowrap}
 .rack-row .rack-side #invalidWords{position:absolute;top:100%;right:0;width:180px;max-width:65vw;margin-top:8px;font-size:12px}
 .rack-row:has(#invalidWords:not(:empty)){margin-bottom:32px}
}

/* Reserve room for the full tablet toolbar, including a revealed nine-letter clue. */
@media(min-width:601px) and (max-width:1400px){
 body{--board-size:min(calc(100vw - 32px),calc(100dvh - 330px - env(safe-area-inset-bottom)),900px)}
 .rack-row{margin-top:12px;padding-block:8px}
 .rack-row .rack-side{transform:none}
 .rack-row .rack-side #wordometer{width:min(64px,calc(var(--tile-size)*1.5));height:min(64px,calc(var(--tile-size)*1.5))}
 .table>.rack-tools{width:min(calc(100vw - 32px),max(var(--board-size),660px));max-width:calc(100vw - 32px);display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px 12px;margin:8px 0 0;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .table>.rack-tools .turn-actions{display:contents}
 .table>.rack-tools .credit-balance{grid-column:1;grid-row:1;display:flex;flex-wrap:nowrap;justify-self:start;gap:10px;padding:0;font-size:18px}
 .table>.rack-tools .move-actions{grid-column:3;grid-row:1;justify-self:end;gap:8px}
 .table>.rack-tools .hint-control{display:contents}
 .table>.rack-tools .hint-control #hintWord{grid-column:1/-1;grid-row:2;justify-self:start;width:auto;max-width:100%;margin:0;font-size:20px;letter-spacing:.04em;white-space:nowrap;overflow-wrap:normal}
 .table>.rack-tools .hint-control #hintWord:empty{display:none}
 .table>.rack-tools #hintBtn{grid-column:2;grid-row:1;justify-self:start;margin:0;font-size:18px;min-height:44px;padding:8px 14px}
 .table>.rack-tools #hintBtn .help-cost{font-size:20px}
 .table>#hintStatus{margin:0;font-size:12px;line-height:1.3}
}

/* Fit ten online games and both local play choices on tablets and desktops. */
@media(min-width:601px){
 .mode-gate .mode-box{--selection-row:clamp(32px,calc((100dvh - 300px)/10),48px);padding:8px 16px max(8px,env(safe-area-inset-bottom))}
 .mode-box .welcome-nav{margin:0 auto 4px;row-gap:0;min-height:44px}
 .mode-box #onlineOptions>h3{font-size:26px;line-height:1.15;margin:4px 0 6px;text-align:center}
 .mode-box .online-games-table{font-size:14px;line-height:18px;table-layout:fixed}
 .mode-box .online-games-table th{font-size:14px;line-height:18px;padding:3px 8px}
 .mode-box .online-games-table th:first-child{width:50%}
 .mode-box .online-games-table th:nth-child(2){width:19%}
 .mode-box .online-games-table th:nth-child(3){width:31%}
 .mode-box .online-games-table td,.mode-box .online-games-table .new-online-game td{padding:2px 8px;line-height:18px}
 .mode-box .online-games-table .online-game,.mode-box .online-games-table #createOnlineBtn{display:flex;align-items:center;height:calc(var(--selection-row) - 4px);min-height:0;margin:0;padding:3px 8px;font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .mode-box .online-games-table #createOnlineBtn{justify-content:center;font-size:18px}
 .mode-box .mode-options{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:10px;margin:8px auto 0}
 .mode-box .mode-options>#practiceBtn,.mode-box .mode-options>.bot-choice{min-height:0;padding:8px 12px;gap:4px}
 .mode-box .bot-choice{display:flex;flex-direction:column;justify-content:center}
 .mode-box #practiceBtn>strong,.mode-box .bot-choice>h3{font-size:26px;line-height:1.1;margin:0 0 5px;text-align:center}
 .mode-box .mode-options span{font-size:13px;line-height:1.2}
 .mode-box #botOptions{gap:8px}
 .mode-box #botOptions button{min-height:32px;margin:0;padding:4px 6px;font-size:15px;line-height:20px}
 .mode-box #modeError:empty{display:none}
}
.loading-screen{position:fixed;inset:0;z-index:10000;background:#f6f4ee;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:16px;box-sizing:border-box}.loading-screen[hidden]{display:none}.loading-screen img{display:block;width:min(90vw,80dvh,760px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:12px;box-shadow:0 6px 28px #293b3020}.loading-screen p{margin:0;color:#2d574c;font-size:16px}
.online-player-name{display:inline-flex;align-items:center;max-width:100%;min-width:0;vertical-align:middle}.online-player-text{min-width:0;overflow:hidden;text-overflow:ellipsis}.online-versus{white-space:pre;flex-shrink:0}.online-player-name .dictionary-flag{width:20px;height:13px;margin-left:5px}.online-games-table .online-game{gap:0}
#welcomeDictionaryBtn{display:inline-flex;align-items:center;justify-content:center}.dictionary-confirm-actions{display:flex;gap:12px;margin-top:20px}.dictionary-confirm-actions button{flex:1;min-height:44px}

/* Bonus tracker sits beside Rules, with readable target statuses. */
.table>.rack-tools #bonusBtn{position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:2px solid var(--green);border-radius:50%;font-size:24px;font-weight:800;color:var(--green);background:var(--paper)}
.bonus-phrase{margin:16px 0 22px}.bonus-phrase .bonus-phrase-text{font-size:22px!important;font-weight:800;margin:8px 0}.bonus-word-list{list-style:none;padding:0}.bonus-word-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:8px 0}.bonus-word-list span{font-size:13px}.bonus-word-list .bonus-earned{color:var(--green)}
@media(max-width:600px){.table>.rack-tools #bonusBtn{flex-basis:30px;width:30px;height:40px;min-height:40px;font-size:20px}.table>.rack-tools .credit-balance{gap:4px}.bonus-word-list li{flex-wrap:wrap;gap:3px}}

/* The remaining tile bag is internal game state only. */
#tileBag{display:none!important}

/* Use the available desktop width instead of the old 760px column. */
@media(min-width:1101px) and (pointer:fine){
 .mode-gate .mode-box{--welcome-width:min(1200px,100%);--selection-row:clamp(32px,calc((100dvh - 250px)/10),52px);padding:12px 24px}
 .mode-box .welcome-nav{margin-bottom:4px}
 .mode-box #onlineOptions>h3{font-size:28px;margin:4px 0 6px}
 .mode-box .online-games-table,.mode-box .online-games-table th,.mode-box .online-games-table .online-game{font-size:16px}
 .mode-box .online-games-table th:first-child{width:54%}
 .mode-box .online-games-table th:nth-child(2){width:18%}
 .mode-box .online-games-table th:nth-child(3){width:28%}
 .mode-box #practiceBtn>strong,.mode-box .bot-choice>h3{font-size:28px}
 .mode-box .mode-options{margin-top:10px}
}

/* Keep the opponent's word visible above a low, tap-anywhere announcement. */
#modal.opponent-announcement{position:fixed;inset:auto 12px max(16px,env(safe-area-inset-bottom));margin:0 auto;width:min(660px,calc(100vw - 24px));box-sizing:border-box;padding:24px;cursor:pointer}
#modal.opponent-announcement #modalBody .opponent-move-summary{text-align:center;font-size:clamp(22px,2.2vw,30px);line-height:1.4;font-weight:700;margin:0;overflow-wrap:anywhere}
#modal.opponent-announcement::backdrop{background:#1b312d18;backdrop-filter:none;cursor:pointer}

#turnCountdown{margin:6px 0 0;text-align:center;font-size:16px;line-height:1.25;font-weight:750;color:var(--green)}
#turnCountdown[hidden]{display:none}

/* Desktop toolbar: each group has its own space; no shared grid cells. */
@media(min-width:801px) and (pointer:fine){
 .table>.rack-tools{display:grid;grid-template-columns:max-content max-content minmax(0,1fr);width:min(calc(100vw - 32px),max(var(--board-size),1040px));max-width:calc(100vw - 32px);align-items:center;gap:12px 20px;margin:16px auto 8px;padding:0 0 8px}
 .table>.rack-tools .credit-balance{grid-column:1;grid-row:1;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-self:start;gap:10px;padding:0;min-width:0;font-size:18px}
 .table>.rack-tools .credit-total{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
 .table>.rack-tools .turn-actions{display:contents}
 .table>.rack-tools .move-actions{grid-column:2;grid-row:1;display:flex;align-items:center;justify-self:start;gap:8px;width:auto}
 .table>.rack-tools .hint-control{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-start;justify-self:stretch;gap:12px;max-width:none;min-width:0;flex-wrap:wrap}
 .table>.rack-tools #hintBtn{margin:0;min-height:44px;padding:8px 12px;font-size:18px;flex:0 0 auto}
 .table>.rack-tools .hint-control #hintWord{margin:0;width:auto;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:20px;line-height:1.25}
 .table>.rack-tools .hint-control #hintWord:empty{display:none}
 .table>.rack-tools #validity{grid-column:1/-1;grid-row:2}
 .table>.rack-tools #validity:empty{display:none}
}

.owner-stats{margin:0 0 24px;padding:16px;border:1px solid #b6cabc;border-radius:12px;background:#f4f7f0;color:#283c34;text-align:left}
.owner-stats h2{margin:0 0 14px}.owner-stats h3{font-size:18px;margin:20px 0 8px}
.owner-revenue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.owner-revenue>div{padding:12px;background:white;border-radius:8px}.owner-revenue span,.owner-revenue strong{display:block}.owner-revenue strong{font-size:28px;margin-top:6px}
.owner-table-wrap{overflow-x:auto}.owner-stats table{width:100%;border-collapse:collapse;font-size:14px}.owner-stats th,.owner-stats td{text-align:left;padding:8px;border-bottom:1px solid #d4dfd4;overflow-wrap:anywhere}.owner-stats td:first-child{max-width:230px}.owner-stats .dialog-note{font-size:13px;line-height:1.4;margin:10px 0}
@media(max-width:450px){.owner-stats{padding:10px}.owner-revenue{gap:6px}.owner-revenue strong{font-size:24px}.owner-stats th,.owner-stats td{padding:6px 4px;font-size:12px}}
/* Keep the purchase and hint controls together at the board's right edge. */
.table>.rack-tools{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;width:var(--board-size);max-width:calc(100vw - 16px);gap:10px 14px;margin:16px auto 8px;padding:0 0 8px}
.table>.rack-tools .credit-balance{display:flex;flex:0 0 auto;align-items:center;flex-wrap:nowrap;gap:8px;margin:0;padding:0}
.table>.rack-tools .turn-actions{display:contents}
.table>.rack-tools .move-actions{display:flex;flex:0 0 auto;align-items:center;gap:8px;width:auto;margin:0}
.table>.rack-tools .hint-control{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex:0 1 auto;flex-wrap:nowrap;max-width:100%;min-width:0;margin:0 0 0 auto;gap:6px}
.hint-purchase-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;max-width:100%}
.table>.rack-tools .credit-total{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:18px}
.table>.rack-tools .credit-total strong{font-size:20px;color:#88601e}
.credit-coins{display:inline-block;flex:none;width:24px;height:30px;margin-left:2px;vertical-align:middle}
.table>.rack-tools #hintBtn{margin:0;justify-self:auto;flex:none}
.table>.rack-tools .hint-control #hintWord{width:100%;max-width:100%;margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;font-size:20px;line-height:1.25}
.table>.rack-tools #validity{flex:0 0 100%;width:100%;margin:0}
@media(max-width:600px){.table>.rack-tools{gap:8px;margin-top:10px}.hint-purchase-controls{gap:6px}.table>.rack-tools .credit-total{font-size:16px}.credit-coins{width:20px;height:26px}.table>.rack-tools .hint-control #hintWord{font-size:18px}}
/* A finished board stays available after the winner announcement is dismissed. */
#modal.game-result-dialog{position:fixed;inset:auto;left:var(--result-x,50%);top:var(--result-y,50%);transform:translate(-50%,-50%);margin:0;width:min(var(--result-width,720px),calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:clamp(28px,5vw,64px) 24px;border:3px solid #d2ad52;border-radius:20px;background:#fffdf5;box-shadow:0 16px 70px #17251b44;cursor:pointer;text-align:center}
#modal.game-result-dialog .modal-head{display:none}
#modal.game-result-dialog #modalBody .winner-message{font-size:clamp(36px,6vw,76px);font-weight:850;line-height:1.15;letter-spacing:-1.2px;margin:0;color:#276451;overflow-wrap:anywhere}
#modal.game-result-dialog::backdrop{background:#1b312d40;backdrop-filter:none;cursor:pointer}
header #backBtn.game-finished{background:#276451;color:#fff;border:3px solid #c59a36;box-shadow:0 0 0 5px #e8c56a66;font-size:28px;line-height:1.15;font-weight:900;min-height:60px;padding:12px 26px}
header #backBtn.game-finished:hover{background:#347c66}
@media(max-width:600px){header #backBtn.game-finished{font-size:24px;min-height:54px;padding:10px 18px}}

/* Give the meter its actual width so it cannot shrink over the Play button. */
@media(min-width:601px){
 .rack-row .rack-side{gap:6px;flex-wrap:wrap}
 .rack-row .rack-side .wordometer-feedback{position:relative;flex:0 0 auto;min-width:max-content;gap:0}
 .rack-row .rack-side #wordometer{flex:none;margin:0}
 .rack-row .rack-side #releaseBtn{flex:0 0 auto;min-width:44px;min-height:36px;padding:6px 8px;font-size:14px;white-space:nowrap;margin:0}
 .rack-row .rack-side #invalidWords{position:absolute;top:100%;right:0;width:220px;max-width:65vw;margin-top:8px}
 .rack-row:has(#invalidWords:not(:empty)){margin-bottom:36px}
}

/* Finished games reserve space for both complete score labels and the larger Back button. */
body>header:has(#backBtn){height:auto;min-height:74px;align-items:center;gap:16px;padding-block:8px}
body>header:has(#backBtn)>.scores-card{flex:1 1 auto;width:auto;min-width:0;flex-wrap:wrap;gap:8px 20px;align-items:center}
body>header:has(#backBtn) .total-score{flex:0 0 auto;min-width:max-content;max-width:100%;white-space:nowrap}
body>header:has(#backBtn) #backBtn{flex:none;margin:0}
@media(min-width:601px){
 body>header:has(#backBtn){width:min(calc(100vw - 32px),max(var(--board-size),760px))}
}
@media(max-width:600px){
 body>header:has(#backBtn){gap:12px}
 body>header:has(#backBtn)>.scores-card{justify-content:flex-start}
}

/* Make starting a game clearer and separate the offline choices below it. */
.mode-box .online-games-table #createOnlineBtn{font-size:clamp(24px,2.4vw,30px);font-weight:850;line-height:1.2;height:auto;min-height:52px;padding:8px;white-space:normal}
.mode-box .mode-options{margin-top:20px}

/* Back is the primary action while the opponent is playing. */
header #backBtn.opponent-turn{background:#276451;color:#fff;border:3px solid #c59a36;box-shadow:0 0 0 4px #e8c56a55;font-size:28px;font-weight:900;line-height:1.15;min-height:60px;padding:12px 26px}
header #backBtn.opponent-turn:hover{background:#347c66}
@media(max-width:600px){header #backBtn.opponent-turn{font-size:24px;min-height:54px;padding:10px 18px}}

/* Highlight only the word currently being counted, without moving its tiles. */
#board button.scoring-word{outline:3px solid #d39c24;outline-offset:-3px;box-shadow:inset 0 0 0 3px #fff0a6;z-index:3}

/* Use the remaining phone toolbar space for a clear, right-aligned Play action. */
@media(max-width:600px){
 .rack-row .rack-side{gap:4px}
 .rack-row .rack-side #cancelWordBtn{width:30px;height:40px;min-height:40px;flex:0 0 30px;padding:1px}
 .rack-row .rack-side #releaseBtn{flex:1 1 0;align-self:center;margin-left:auto;min-width:0;min-height:42px;padding:7px 4px;font-size:14px;font-weight:800;border-radius:9px;text-align:center}
}

#modal.game-result-dialog{overflow:visible;cursor:default}
#modal.game-result-dialog::backdrop{cursor:default}
.reward-message{font-size:clamp(22px,4vw,32px);font-weight:750;margin:20px 0 8px;color:#276451}
.reward-coin-pile{height:58px;display:flex;justify-content:center;align-items:center;margin:8px auto 18px}
.reward-coin-pile .credit-coins{width:44px;height:56px}
.reward-continue{font-size:22px;font-weight:800;padding:12px 32px;min-height:48px;background:#276451;color:white}
.reward-flying-coin{position:absolute;width:28px;height:28px;z-index:100;pointer-events:none}

/* Player and live wallet replace the redundant Online Games title. */
.mode-box .welcome-nav{grid-template-columns:minmax(0,1fr) auto auto}
.mode-box .selection-player{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:6px 0 8px;min-height:34px}
.selection-player #modeTitle{margin:0;font-size:28px;line-height:1.2;overflow-wrap:anywhere}
.selection-credits{display:inline-flex;align-items:center;gap:6px;font-size:20px;white-space:nowrap;color:var(--ink)}
.selection-credits .credit-coins{width:24px;height:30px;flex:none;margin:0}
.selection-credits strong{color:#88601e;font-weight:750}
.mode-box .selection-buy{background:#f7df8d;border:2px solid #c99b2b;color:var(--ink);font-size:18px;font-weight:700;padding:6px 16px;min-height:40px;white-space:nowrap}
.mode-box .selection-buy:hover:enabled{background:#efd16b;border-color:#ad7e17}
.mode-box .online-games-table th{font-size:22px;line-height:1.2;font-weight:800}
@media(max-width:600px){
 .mode-box .selection-player{gap:6px 14px;margin:4px 0 8px}
 .selection-player #modeTitle{font-size:23px}
 .selection-credits{font-size:17px}
 .selection-credits .credit-coins{width:21px;height:27px}
 .mode-box .online-games-table th{font-size:18px}
}

/* A full-width, single-line start action; no visible column-heading row. */
.online-column-game{width:54%}.online-column-score{width:18%}.online-column-turn{width:28%}
.mode-box .online-games-table #createOnlineBtn{white-space:nowrap;height:auto;min-height:44px;padding:8px 12px;font-size:clamp(20px,2.4vw,28px);line-height:1.2}
@media(min-width:601px) and (max-width:1100px){.online-column-game{width:50%}.online-column-score{width:19%}.online-column-turn{width:31%}}

.credit-total[role="button"],.selection-credits[role="button"]{cursor:pointer;border-radius:8px}
.credit-total[role="button"]:focus-visible,.selection-credits[role="button"]:focus-visible{outline:3px solid #2b6c5c;outline-offset:5px}
.credits-summary{text-align:center;padding:12px 8px 24px;font-size:19px;line-height:1.5}
.credits-summary .credit-coins{width:80px;height:100px;margin:0}
.credits-counted-stack{position:relative;width:80px;margin:0 auto}
.credits-stack-coin{position:absolute;left:0;width:80px;height:22px;box-sizing:border-box;border:2px solid #b77b13;border-radius:50% / 35%;background:linear-gradient(90deg,#d69a22,#f5c954 42%,#e7ad2d 75%,#c68a1b);box-shadow:0 2px 2px #6f4d1426}
.credits-stack-coin:before{content:'';position:absolute;left:-2px;top:-2px;width:80px;height:14px;box-sizing:border-box;border:2px solid #b77b13;border-radius:50%;background:#ffe391}
.credits-stack-coin:after{content:'';position:absolute;left:10px;top:1px;width:56px;height:7px;border:1px solid #e2ac31;border-radius:50%}
.credits-summary-balance{font-size:28px;font-weight:700;margin:18px 0 12px}
.credits-summary a{color:#246650;text-decoration:underline;text-underline-offset:3px;font-weight:600}
/* Colour the selection screen's game actions without changing Rules or Dictionary. */
.mode-box #practiceBtn{background:#d8edcf;border:2px solid #7eaf70;color:var(--ink)}
.mode-box #practiceBtn:hover:enabled{background:#c3e3b9;border-color:#659b59}
.mode-box .bot-choice{background:#d4e7f5;border:2px solid #6fa0c4;color:var(--ink)}
.mode-box #easyBotBtn{background:#d8edcf;border:2px solid #7eaf70;color:var(--ink)}
.mode-box #easyBotBtn:hover:enabled{background:#c3e3b9;border-color:#659b59}
.mode-box #mediumBotBtn{background:#f7df8d;border:2px solid #c99b2b;color:var(--ink)}
.mode-box #mediumBotBtn:hover:enabled{background:#efd16b;border-color:#ad7e17}
.mode-box #expertBotBtn{background:#f1c2be;border:2px solid #c36e68;color:var(--ink)}
.mode-box #expertBotBtn:hover:enabled{background:#e8aba6;border-color:#a9514c}
.mode-box .online-games-table .your-turn:not(.new-online-game){background:#fff7d6}
.mode-box .online-games-table .your-turn .online-game{background:#f7df8d;border:2px solid #c99b2b;color:var(--ink)}
.mode-box .online-games-table .your-turn .online-game:hover:enabled{background:#efd16b;border-color:#ad7e17}
.mode-box .online-games-table #createOnlineBtn{background:#f7df8d;border:2px solid #c99b2b;color:var(--ink)}
.mode-box .online-games-table #createOnlineBtn:hover:enabled{background:#efd16b;border-color:#ad7e17}

#wordometer.wordometer-locked{background:#d5d6d4!important;color:#7b807d;cursor:pointer;filter:grayscale(1);opacity:.7}#wordometer.wordometer-locked:before{background:#eeeeeb}#wordometer.wordometer-locked:focus-visible{outline:3px solid #276451;outline-offset:3px}

/* Keep the locked dial grey while its credit price stays clear and gold. */
#wordometer.wordometer-locked{filter:none;opacity:1}
#wordometer.wordometer-locked #meterPercent{font-size:clamp(14px,1.8vw,22px);font-weight:900}
.meter-unlock-cost{display:flex;align-items:center;justify-content:center;gap:2px}
#wordometer .meter-unlock-cost .help-coin{width:clamp(11px,1.4vw,18px);height:clamp(11px,1.4vw,18px);margin:0;box-sizing:border-box}
.nine-tile-bonus{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:#26393233;pointer-events:none;padding:20px}
.nine-tile-bonus-card{max-width:90vw;text-align:center;background:#fffdf5;border:3px solid #dbad46;border-radius:22px;padding:28px 36px;box-shadow:0 10px 40px #0003;color:#276451}
.nine-tile-bonus-card strong{display:block;font-size:clamp(26px,5vw,40px);font-weight:900}
.nine-tile-bonus-card p{font-size:18px;margin:10px 0 0}
.phrase-bonus-overlay{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;background:#26393233;pointer-events:none;padding:20px;box-sizing:border-box}
.phrase-bonus-card{width:min(680px,90vw);min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;background:#fffdf5;border:3px solid #dbad46;border-radius:22px;padding:30px 38px;box-shadow:0 10px 40px #0003;color:#276451;box-sizing:border-box}
.phrase-bonus-title,.phrase-bonus-points{display:block;font-size:clamp(30px,5vw,46px);font-weight:900;line-height:1.15}
.phrase-bonus-phrase{margin:0;font-size:clamp(24px,4vw,36px);font-weight:750;line-height:1.35}
.phrase-bonus-word{display:inline-block;background:#ffe08a;color:#173f34;border-radius:8px;padding:.03em .24em;box-shadow:0 0 0 3px #d5a42f;text-transform:uppercase}

/* A full-size primary Play action on desktop and tablet screens. */
@media(min-width:601px){.rack-row .rack-side #releaseBtn{min-width:120px;min-height:48px;padding:10px 18px;font-size:20px;font-weight:800;margin-left:auto;text-align:center}}

.move-actions{flex-wrap:wrap}.mode-options button:disabled{opacity:.45;cursor:not-allowed}#endGameBtn{font-weight:700}

/* Full move descriptions wrap instead of colliding with the dial. */
.rack-row .rack-side #releaseBtn{white-space:normal;overflow-wrap:anywhere;line-height:1.25;width:100%;min-width:0;flex:1 0 100%;padding:9px 8px}
@media(max-width:600px){.rack-row .rack-side{flex-wrap:wrap}.rack-row .rack-side #releaseBtn{font-size:12px;min-height:44px}}

/* Reserve the Play row even before a valid word is available. */
.rack-row .play-button-slot{grid-column:2;grid-row:2;height:60px;min-height:60px;max-height:60px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin-top:8px;min-width:0}
.rack-row .play-button-slot #releaseBtn{position:static;box-sizing:border-box;width:min(100%,460px);height:56px;min-height:56px;max-height:56px;margin:0;padding:6px 12px;white-space:normal;overflow-wrap:anywhere;line-height:1.2;font-size:18px;font-weight:800;flex:none}
.rack-row .play-button-slot #releaseBtn[hidden]{display:none!important}
.rack-row .rack-side{flex-wrap:nowrap}
.rack-row:has(#invalidWords:not(:empty)){margin-bottom:0}
@media(max-width:600px){.rack-row .play-button-slot #releaseBtn{font-size:16px}}

/* Centre the dial on the rack and leave a clear gap beside the wooden edge. */
.rack-row .rack-side{align-self:center;align-items:center;margin-left:6px;min-height:calc(var(--tile-size) + 16px)}
.rack-row .rack-side .wordometer-feedback{display:flex;align-items:center;align-self:center;flex:0 0 auto;min-width:0}
.rack-row .rack-side #wordometer{width:clamp(36px,calc(var(--tile-size) + 16px),64px);height:clamp(36px,calc(var(--tile-size) + 16px),64px);margin:0;flex:none}
.hint-purchase-controls .credit-total{order:0}.hint-purchase-controls #buyCreditsBtn{order:1}.hint-purchase-controls #hintBtn{order:2}

.rack-row .rack .tile.rack-reveal-pending{visibility:hidden;pointer-events:none}
.bot-move-announcement{position:fixed;inset:auto 12px max(16px,env(safe-area-inset-bottom));z-index:20000;margin:0 auto;width:min(660px,calc(100vw - 24px));box-sizing:border-box;padding:24px;border:2px solid #b6cabc;border-radius:20px;background:#fffdf8;box-shadow:0 6px 24px #0002;pointer-events:none}
.bot-move-announcement p{text-align:center;font-size:clamp(22px,2.2vw,30px);line-height:1.4;font-weight:700;margin:0;overflow-wrap:anywhere}

.bot-thinking{margin:0;text-align:center;color:#356451;font-weight:700;font-size:18px;line-height:1.3}

#modal.opponent-announcement.bot-action-announcement{inset:0;margin:auto;height:fit-content;padding:40px 28px}
#modal.opponent-announcement.bot-action-announcement #modalBody .opponent-move-summary{font-size:clamp(30px,4vw,48px);font-weight:800;line-height:1.25;text-align:center}

#modal.game-result-dialog #modalBody{text-align:center}
#modal.game-result-dialog #modalBody .winner-message{font-size:clamp(36px,5vw,64px);text-align:center}
#modal.game-result-dialog #modalBody .reward-message{font-size:clamp(26px,3.5vw,40px);text-align:center;line-height:1.3}
#modal.game-result-dialog .reward-continue{display:block;margin:20px auto 0}

/* Let a single invalid-word message use its natural width beneath the rack. */
.rack-row .rack-side #invalidWords{width:max-content;max-width:min(600px,85vw);text-align:right}

/* Centre the two confirmation dialogs without moving their close controls. */
#modal:is(:has(.wordometer-enable-message),:has(.end-game-confirmation-message),:has(.pass-confirmation-message)) .modal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#modal:is(:has(.wordometer-enable-message),:has(.end-game-confirmation-message),:has(.pass-confirmation-message)) #modalTitle{grid-column:2;text-align:center}
#modal:is(:has(.wordometer-enable-message),:has(.end-game-confirmation-message),:has(.pass-confirmation-message)) #closeModal{grid-column:3;grid-row:1}
#modal:is(:has(.wordometer-enable-message),:has(.end-game-confirmation-message),:has(.pass-confirmation-message)) #modalBody{text-align:center}
#modal:has(.wordometer-enable-message) #modalBody>button{display:block;margin:16px auto 0}
#modal:is(:has(.end-game-confirmation-message),:has(.pass-confirmation-message)) #modalBody>button{margin:4px 5px 0}

/* The desktop controls fill the same width as the board, with equal gaps. */
@media(min-width:601px){
 .rack-row{--rack-control-gap:clamp(12px,2vw,28px);grid-template-columns:max(50px,var(--tile-size)) minmax(0,1fr) calc(max(50px,var(--tile-size)) + 64px + var(--rack-control-gap));column-gap:var(--rack-control-gap)}
 .rack-row .rack-side{width:100%;margin-left:0;gap:var(--rack-control-gap);justify-content:space-between}
 .rack-row .rack-side #cancelWordBtn{width:max(50px,var(--tile-size));flex:0 0 max(50px,var(--tile-size));margin:0}
 .rack-row .rack-side .wordometer-feedback{margin-left:auto}
 .rack-row .rack-side #wordometer{width:64px;height:64px}
}
/* Keep either kind of hint directly above its button. */
.table>.rack-tools .hint-control #hintWord{order:-1}

/* Keep the selection wallet in the header on tablet and desktop. */
.mode-box .welcome-nav .selection-player{grid-column:1/-1;grid-row:2;justify-self:center;margin:4px 0;gap:8px 14px}
.selection-logout{font-size:15px;padding:6px 10px;min-height:38px;white-space:nowrap}
.mode-box .welcome-nav{grid-template-columns:minmax(0,1fr) auto auto auto}
.welcome-nav #selectionLogoutBtn{grid-row:1;grid-column:4;justify-self:end}
.owner-free-credits{display:block;margin:18px auto;font-size:18px}
@media(min-width:760px){
 .mode-box .welcome-nav{grid-template-columns:auto minmax(0,1fr) auto auto auto;column-gap:clamp(8px,1.2vw,20px)}
 .welcome-nav #selectionLogoutBtn{grid-column:5;font-size:clamp(16px,1.7vw,22px);padding:6px 2px;min-height:44px}
 .mode-box .welcome-nav .selection-player{grid-column:2;grid-row:1;flex-wrap:nowrap;justify-self:center;gap:clamp(6px,1vw,14px);margin:0;min-width:0}
 .welcome-nav .selection-player #modeTitle{font-size:clamp(19px,2vw,28px);white-space:nowrap;overflow-wrap:normal}
 .welcome-nav .selection-credits{font-size:clamp(15px,1.5vw,20px);gap:4px}
 .welcome-nav .selection-credits .credit-coins{width:20px;height:26px}
 .mode-box .welcome-nav .selection-buy{font-size:16px;padding:6px 12px;min-height:38px}
 .welcome-nav #welcomeHelpBtn,.welcome-nav #welcomeDictionaryBtn{font-size:clamp(16px,1.7vw,22px)}
}

#modal:has(.welcome-credit-title){text-align:center;padding:36px 24px}
#modalBody .welcome-credit-title{font-size:clamp(28px,4vw,42px);line-height:1.2;margin:0 0 18px}
#modalBody .welcome-credit-message{font-size:clamp(20px,2.5vw,26px);line-height:1.4}
.welcome-credit-total{display:flex;justify-content:center;align-items:center;gap:10px;font-size:26px;margin:24px 0;color:#88601e}
.welcome-credit-total .welcome-credit-count{font-size:44px;min-width:2ch}
.welcome-credit-total .credit-coins{width:36px;height:46px}
.welcome-credit-continue{font-size:22px;min-width:160px;margin:12px auto 0}
.welcome-credit-error:empty{display:none}

/* An exact empty board, softly faded behind the selection controls. */
.mode-gate{isolation:isolate}
.mode-gate::before{content:"";position:fixed;inset:0;z-index:-1;background:url('empty-board-background.svg') center 60% / min(94vw,1000px) auto no-repeat;opacity:.16;pointer-events:none}
.mode-gate .mode-box{position:relative;background:transparent}

/* Three equal, centred choices beneath the online games list. */
.mode-box .mode-options{display:grid;grid-template-columns:minmax(0,1fr);width:min(640px,100%);max-width:640px;gap:18px;margin:20px auto;align-items:stretch}
.mode-box .mode-options>#createOnlineBtn,.mode-box .mode-options>#practiceBtn,.mode-box .mode-options>.bot-choice{box-sizing:border-box;width:100%;height:128px;min-height:128px;margin:0;padding:16px 20px;text-align:center;align-content:center;justify-content:center;border-radius:14px}
.mode-box .mode-options>#createOnlineBtn{display:flex;align-items:center;background:#f7df8d;border:2px solid #c99b2b;color:var(--ink);font-size:clamp(24px,3vw,32px);font-weight:850;line-height:1.2}
.mode-box .mode-options>#createOnlineBtn:hover:enabled{background:#efd16b}
.mode-box .mode-options>#practiceBtn{display:grid;justify-items:center;gap:8px}
.mode-box .mode-options strong,.mode-box .mode-options .bot-choice h3{font-size:clamp(24px,3vw,32px);line-height:1.2;text-align:center;margin:0}
.mode-box .mode-options .bot-choice{display:flex;flex-direction:column;gap:12px}
.mode-box .mode-options #botOptions{width:100%;gap:10px}
.mode-box .mode-options #botOptions button{min-height:40px;padding:6px 8px;text-align:center}
@media(max-width:600px){.mode-box .mode-options{gap:14px}.mode-box .mode-options>#createOnlineBtn,.mode-box .mode-options>#practiceBtn,.mode-box .mode-options>.bot-choice{padding:14px 12px}}

#modal:has(.logout-confirm-actions) .modal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#modal:has(.logout-confirm-actions) #modalTitle{grid-column:2;text-align:center}
#modal:has(.logout-confirm-actions) #closeModal{grid-column:3;grid-row:1}
.logout-confirm-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}
.logout-confirm-actions button{min-width:100px}
.logout-error{text-align:center}.logout-error:empty{display:none}

/* Online games are primary, readable actions rather than muted table rows. */
.mode-box #onlineGames{width:100%;max-width:1100px;margin:22px auto 28px}
.mode-box #onlineGames:empty{display:none}
.online-games-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px 16px;margin-bottom:14px}
.online-games-heading h2{grid-column:2;text-align:center}
.online-games-heading .online-games-summary{grid-column:3;text-align:right}
@media(max-width:600px){.online-games-heading{grid-template-columns:1fr}.online-games-heading h2,.online-games-heading .online-games-summary{grid-column:1;text-align:center}}
.mode-box .online-games-heading h2{font-size:clamp(25px,3vw,34px);line-height:1.2;margin:0;color:#254c40;font-weight:850}
.online-games-summary{font-size:16px;font-weight:700;color:#356451}
.online-game-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.online-game-item{min-width:0;display:flex}
.mode-box .online-game-card{display:flex;flex-direction:column;gap:12px;box-sizing:border-box;width:100%;min-width:0;min-height:190px;margin:0;padding:18px 20px 14px;border:2px solid #b6c8c0;border-radius:16px;background:#fffdf7;color:#263b33;text-align:left;cursor:pointer;box-shadow:0 3px 10px #284f4010;line-height:1.3}
.mode-box .online-game-card.game-ready{border-color:#3a8067;background:#f2f8ec;box-shadow:0 3px 12px #284f401c}
.mode-box .online-game-card.game-seeking{border-color:#ccb878;background:#fffaf0}
.mode-box .online-game-card:hover:enabled{border-color:#285f4d;box-shadow:0 4px 14px #284f4026}
.mode-box .online-game-card:focus-visible{outline:3px solid #c99b2b;outline-offset:3px}
.mode-box .online-game-card:disabled{opacity:.75;cursor:progress}
.game-card-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.game-card-status{display:inline-flex;align-items:center;padding:5px 11px;border-radius:7px;background:#e5ece8;color:#3c554a;font-size:15px;font-weight:800}
.game-ready .game-card-status{background:#2b6954;color:#fff}
.game-seeking .game-card-status{background:#f4df9c;color:#67501b}
.game-card-kind{font-size:13px;color:#617268}
.game-card-names,.game-card-scores{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:8px;align-items:center;text-align:center;width:100%}
.game-card-names .online-player-name{justify-content:center;flex-wrap:wrap;gap:5px;font-size:clamp(18px,2.2vw,24px);font-weight:800;line-height:1.2}
.game-card-names .online-player-text{overflow:visible;overflow-wrap:anywhere;white-space:normal}
.game-card-names .dictionary-flag{width:23px;height:16px;margin:0;flex:none}
.game-card-names .online-versus{font-size:13px;font-weight:500;color:#69786e;white-space:normal}
.game-card-scores{margin-top:-4px;font-size:32px;font-variant-numeric:tabular-nums;line-height:1}
.game-score-divider{font-size:18px;color:#7a877f}
.game-card-action{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #d8e2d9;padding-top:10px;margin-top:auto;color:#356451;font-size:16px;font-weight:800}
.game-card-arrow{font-size:22px;line-height:1}
@media(max-width:700px){
 .online-game-cards{grid-template-columns:minmax(0,1fr);gap:12px}
 .mode-box .online-game-card{min-height:180px;padding:15px 16px 12px;gap:10px}
 .mode-box #onlineGames{margin:18px auto 24px}
 .online-games-summary{font-size:14px}
 .game-card-names .online-player-name{font-size:21px}
}
/* Public player identity and last-turn information on selection cards. */
.game-card-names .player-initial-tile{display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:42px;border:2px solid #8caf9a;border-radius:8px;background:#d9ebdf;color:#285e4c;font-size:27px;font-weight:850;box-shadow:0 3px 0 #b5c8bc}
.game-card-names .initial-rose{background:#f3ded5;border-color:#c69d90;color:#804638;box-shadow:0 3px 0 #d9b9ac}
.game-card-last-move{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 12px;width:100%;text-align:left;line-height:1.4;font-size:15px}
.game-card-move-word{font-weight:650;overflow-wrap:anywhere}
.game-card-move-time{color:#63736b;font-size:14px;white-space:nowrap}

/* Give every remaining-turn message equal breathing room above and below. */
#turnCountdown{margin:0;padding:16px 0;font-size:19px;line-height:1.25;text-align:center}
.board-shell:has(#turnCountdown:not([hidden])) + .rack-row{margin-top:0;padding-top:8px}

/* Announcements overlay the viewport without focus or document-flow changes. */
.bot-move-announcement{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);margin:0;max-height:calc(100dvh - 32px);overflow:auto;overflow-wrap:anywhere}
/* Reserve the emphasized Back button dimensions on every turn. */
body>header #backBtn{box-sizing:border-box;min-height:60px;padding:12px 26px;border-width:3px;font-size:28px;font-weight:900;line-height:1.15}
@media(max-width:600px){body>header #backBtn{font-size:24px;min-height:54px;padding:10px 18px}}

/* Account pictures keep the same footprint when switching between artwork and initials. */
.player-avatar{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:10px;overflow:hidden;vertical-align:middle;background:#fff6d7;border:1px solid #cbbd8d;box-shadow:0 2px 0 #b7a97b;color:#285b4c;font-size:26px;font-weight:850;line-height:1}
.player-avatar::before,.player-avatar::after{content:none!important}
.player-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.editable-avatar{cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.editable-avatar:focus-visible{outline:3px solid #e9af40;outline-offset:3px;border-radius:6px}
#modal:has(.avatar-picker){width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto}
.avatar-preview{display:flex;justify-content:center;margin:8px 0 16px}
.avatar-preview .player-avatar{width:88px;height:88px;flex-basis:88px;font-size:52px;border-radius:18px}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:10px;max-height:48dvh;overflow:auto;padding:5px}
.avatar-option{display:flex;flex-direction:column;align-items:center;justify-content:start;gap:8px;padding:9px 4px;font-size:13px;line-height:1.2;border:2px solid transparent;min-width:0}
.avatar-option .player-avatar{width:58px;height:58px;flex-basis:58px;font-size:36px}
.avatar-option[aria-pressed=true]{border-color:#276451;background:#e0eddb;box-shadow:0 0 0 2px #e6b74e}
.avatar-actions{display:flex;justify-content:center;gap:12px;margin-top:20px}
.avatar-error{color:#a73535;text-align:center}
.signup-avatar{margin:14px 0;grid-column:1/-1}.signup-avatar summary{cursor:pointer;font-weight:700;margin-bottom:12px}
.signup-avatar .avatar-grid{grid-template-columns:repeat(auto-fit,minmax(76px,1fr));max-height:34dvh}
@media(max-width:600px){header .player-avatar{width:30px;height:30px;flex-basis:30px;font-size:20px}.editable-avatar{gap:4px}.avatar-grid{gap:6px}}

#modal:has(.avatar-picker) .modal-head{position:relative;justify-content:center}
#modal:has(.avatar-picker) #modalTitle{width:100%;text-align:center;padding-inline:44px}
#modal:has(.avatar-picker) #closeModal{position:absolute;right:0;top:50%;transform:translateY(-50%)}

/* Keep the credit summary readable and its title truly centred. */
#modal:has(.credits-summary) .modal-head{position:relative;justify-content:center}
#modal:has(.credits-summary) #modalTitle{width:100%;text-align:center;padding-inline:44px}
#modal:has(.credits-summary) #closeModal{position:absolute;right:0;top:50%;transform:translateY(-50%)}
#modal .credits-summary p{font-size:22px;line-height:1.5}
#modal .credits-summary .credits-summary-balance{font-size:30px;font-weight:700}
#modal .credits-summary a{font-size:inherit}

/* Board avatars replace the old colour markers and match the Back button. */
body>header #scoreName0,body>header #scoreName1{display:inline-flex;align-items:center;gap:7px}
body>header .player-avatar{width:60px;height:60px;flex:0 0 60px;font-size:38px;box-shadow:none}
@media(max-width:600px){body>header .player-avatar{width:54px;height:54px;flex-basis:54px;font-size:34px}}

/* Reserve hint space so revealing a word never shifts the controls or board. */
.table>.rack-tools{padding-top:34px}
.hint-slot{order:2;position:relative;flex:0 0 160px;width:160px;height:48px;display:flex;align-items:center;justify-content:center}
.table>.rack-tools .hint-slot #hintBtn{width:100%;height:48px;box-sizing:border-box}
.table>.rack-tools .hint-slot #hintBtn[hidden]{display:none}
.table>.rack-tools .hint-control .hint-slot #hintWord{display:block;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:max-content;max-width:200px;min-height:25px;text-align:center;font-size:18px;line-height:25px;white-space:nowrap;letter-spacing:.03em}
.table>.rack-tools .hint-control .hint-slot.hint-word-only #hintWord{position:static;transform:none;width:100%;max-width:100%;min-height:0;line-height:1.2;overflow-wrap:anywhere;white-space:normal}
@media(max-width:600px){.hint-slot{flex-basis:140px;width:140px}.table>.rack-tools .hint-control .hint-slot #hintWord{font-size:16px}}

/* Keep the complete game on one portrait tablet screen.
   The board gives back enough height for the rack, reserved Play row and controls. */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
 html:has(body #modeGate[hidden]),
 body:has(#modeGate[hidden]){
  height:100dvh;
  min-height:0;
  overflow:hidden;
 }
 body:has(#modeGate[hidden]){
  --board-size:min(calc(100vw - 32px),calc(100dvh - 330px - env(safe-area-inset-bottom)),900px);
  height:100dvh;
  min-height:0;
  overflow:hidden;
 }
 body:has(#modeGate[hidden]) main{
  height:calc(100dvh - 62px);
  min-height:0;
  overflow:hidden;
  padding:0 8px;
 }
 body:has(#modeGate[hidden]) #turnCountdown{
  padding:6px 0;
 }
 body:has(#modeGate[hidden]) .rack-row{
  margin-top:2px;
  padding-block:2px;
 }
 body:has(#modeGate[hidden]) .rack-row .play-button-slot{
  height:48px;
  min-height:48px;
  max-height:48px;
  margin-top:2px;
 }
 body:has(#modeGate[hidden]) .rack-row .play-button-slot #releaseBtn{
  height:44px;
  min-height:44px;
  max-height:44px;
 }
 body:has(#modeGate[hidden]) .table>.rack-tools{
  position:fixed;
  left:50%;
  bottom:max(8px,env(safe-area-inset-bottom));
  z-index:100;
  transform:translateX(-50%);
  margin:0;
  padding-top:22px;
  padding-bottom:0;
  background:var(--paper);
 }
}

/* Phone games use Safari's visible viewport, including its expanded toolbar. */
@media(max-width:600px){
 body:has(#modeGate[hidden]):not(.account-pending){
  --phone-height:var(--visible-game-height,100svh);
  --board-size:min(calc(100vw - 16px),max(180px,calc(var(--phone-height) - 330px - env(safe-area-inset-bottom))));
  min-height:var(--phone-height);height:auto;
 }
 body:has(#modeGate[hidden]):not(.account-pending) main{
  height:auto;min-height:calc(var(--phone-height) - 68px);padding:0 8px;
 }
 body:has(#modeGate[hidden]) .table{
  min-height:calc(var(--phone-height) - 68px);padding-bottom:max(8px,env(safe-area-inset-bottom));
 }
 body:has(#modeGate[hidden]) #turnCountdown{padding:8px 0;font-size:18px}
 body:has(#modeGate[hidden]) .rack-row{margin-top:4px;padding-block:4px;flex-shrink:0}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot{height:48px;min-height:48px;max-height:48px;margin-top:4px}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot #releaseBtn{height:44px;min-height:44px;max-height:44px}
 body:has(#modeGate[hidden]) .table>.rack-tools{
  position:static;inset:auto;transform:none;flex-shrink:0;
  width:100%;max-width:100%;margin: auto 0 0;padding:26px 0 0;row-gap:6px;
 }
 /* A hidden Undo retains its footprint, but cannot receive taps or focus. */
 .rack-row .rack-side #cancelWordBtn[hidden]{display:block!important;visibility:hidden;pointer-events:none}
 .rack-row .rack-side{margin-left:0;gap:5px}
 .rack-row .rack-side #wordometer{width:36px;height:36px}
 .table>.rack-tools .hint-control{max-width:none}
 .table>.rack-tools .hint-purchase-controls{gap:6px}
 .table>.rack-tools .hint-slot{flex-basis:125px;width:125px}
 .table>.rack-tools .hint-control .hint-slot #hintWord{max-width:min(200px,55vw)}
}

/* Match the nine rack tiles to the thirteen-column phone board. */
@media(max-width:600px){
 body{--tile-size:calc((var(--board-size) - 12px)/13);--rack-size:calc(var(--tile-size)*9 + 8px)}
 .rack-row{grid-template-columns:repeat(13,minmax(0,1fr));column-gap:1px}
 .rack-row #shuffleBtn{grid-column:1;grid-row:1;width:100%;height:44px;min-height:44px;font-size:28px}
 .rack-row .player{grid-column:2 / span 9;grid-row:1;width:100%;padding:0;margin:0;transform:none}
 #player0 .rack,#player1 .rack{width:100%;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px!important}
 .rack-row .rack .tile{width:100%;height:var(--tile-size);font-size:clamp(12px,calc(var(--tile-size)*.68),40px)}
 .rack-row .rack::before{inset:-6px -2px}
 .rack-row .rack-side{grid-column:11 / span 3;grid-row:1;display:grid;grid-template-columns:1fr 2fr;gap:0;margin:0;padding:0;width:100%;min-height:44px}
 .rack-row .rack-side #cancelWordBtn{grid-column:1;width:100%;height:44px;min-height:44px;padding:2px;margin:0}
 .rack-row .rack-side .wordometer-feedback{grid-column:2;width:100%;justify-content:center;margin:0}
 .rack-row .rack-side #wordometer{width:calc(var(--tile-size)*1.65);height:calc(var(--tile-size)*1.65)}
 .rack-row .play-button-slot{grid-column:2 / span 9}
}

/* Reserve a real clue row between the move controls and the phone Hint button. */
@media(max-width:600px){
 .table>.rack-tools .hint-purchase-controls{align-items:flex-end}
 .table>.rack-tools .hint-control .hint-slot{
  display:grid;grid-template-rows:26px 48px;row-gap:6px;
  height:80px;min-height:80px;align-items:center;justify-items:center;
 }
 .table>.rack-tools .hint-control .hint-slot #hintWord,
 .table>.rack-tools .hint-control .hint-slot.hint-word-only #hintWord{
  position:static;inset:auto;transform:none;grid-row:1;grid-column:1;
  display:block;width:100%;max-width:100%;height:26px;min-height:26px;
  margin:0;line-height:26px;text-align:center;font-size:16px;
  white-space:nowrap;overflow-wrap:normal;
 }
 .table>.rack-tools .hint-control .hint-slot #hintBtn{
  grid-row:2;grid-column:1;width:100%;height:48px;
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:6px 4px;font-size:14px;white-space:nowrap;
 }
 .table>.rack-tools .hint-control .hint-slot #hintBtn[hidden]{display:none}
}

/* A fixed phone play surface: browser clearance, board, rack and toolbar each
   have their own budget. Content changes never add height to the game. */
@media(max-width:600px){
 html:has(body #modeGate[hidden]):not(:has(body.account-pending)){height:100svh;overflow:hidden}
 body:has(#modeGate[hidden]):not(.account-pending){
  --phone-height:min(100svh,var(--visible-game-height,100svh));
  --browser-clearance:max(84px,env(safe-area-inset-bottom));
  --board-size:min(calc(100vw - 16px),calc(var(--phone-height) - var(--browser-clearance) - 356px));
  height:var(--phone-height);min-height:0;overflow:hidden;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header{height:68px;min-height:68px;max-height:68px}
 body:has(#modeGate[hidden]):not(.account-pending) main{
  height:calc(var(--phone-height) - 68px - var(--browser-clearance));min-height:0;overflow:hidden;
 }
 body:has(#modeGate[hidden]) .game-layout{height:100%}
 body:has(#modeGate[hidden]) .table{position:relative;height:100%;min-height:0;padding:0;overflow:visible}
 body:has(#modeGate[hidden]) .board-shell{flex:none}
 body:has(#modeGate[hidden]) #turnCountdown{display:block;height:38px;min-height:38px;margin:0;padding:8px 0;font-size:18px;line-height:22px}
 body:has(#modeGate[hidden]) #turnCountdown[hidden]{visibility:hidden}
 body:has(#modeGate[hidden]) .rack-row{margin-top:4px;padding-block:4px;flex:none}
 body:has(#modeGate[hidden]) .table>.rack-tools{
  position:absolute;left:0;right:0;bottom:0;top:auto;transform:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px 80px;
  height:138px;min-height:138px;max-height:138px;width:100%;max-width:100%;
  margin:0;padding:0 0 6px;gap:8px;align-items:center;
 }
 body:has(#modeGate[hidden]) .table>.rack-tools .credit-balance{grid-column:1;grid-row:1;flex-wrap:nowrap;gap:6px}
 body:has(#modeGate[hidden]) .table>.rack-tools .turn-actions{display:contents}
 body:has(#modeGate[hidden]) .table>.rack-tools .move-actions{grid-column:2;grid-row:1;justify-self:end;flex-wrap:nowrap;gap:5px}
 body:has(#modeGate[hidden]) .table>.rack-tools .move-actions button{height:44px;min-height:44px;padding:6px;font-size:13px;white-space:nowrap}
 body:has(#modeGate[hidden]) .table>.rack-tools .hint-control{grid-column:1/-1;grid-row:2;justify-self:stretch;align-self:stretch;width:100%;max-width:100%;margin:0;display:flex;justify-content:flex-end}
 body:has(#modeGate[hidden]) .table>.rack-tools .hint-purchase-controls{width:100%;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-end;gap:6px}
 body:has(#modeGate[hidden]) .table>.rack-tools .credit-total{font-size:16px;height:48px;min-height:48px;align-items:center}
 body:has(#modeGate[hidden]) .table>.rack-tools #buyCreditsBtn{height:48px;min-height:48px}
 body:has(#modeGate[hidden]) .composer,
 body:has(#modeGate[hidden]) .turn-card,
 body:has(#modeGate[hidden]) .table>#hintStatus{position:absolute;left:0;right:0;bottom:142px;margin:0;z-index:20;pointer-events:none}
 body:has(#modeGate[hidden]) .composer #moveFeedback:not(:empty),
 body:has(#modeGate[hidden]) .turn-card #notice:not(:empty){background:var(--paper);border-radius:6px;padding:4px}
 .rack-row #invalidWords:not(:empty){margin-bottom:0}
 body:has(#modeGate[hidden]) .rack-row:has(#invalidWords:not(:empty)){margin-bottom:0}
}

/* Touch boards always use the screen width. Compact the surrounding controls,
   rather than shrinking the board. svh already excludes Safari's toolbar. */
@media(max-width:600px){
 body:has(#modeGate[hidden]):not(.account-pending){--board-size:calc(100vw - 16px);--browser-clearance:8px}
 body:has(#modeGate[hidden]):not(.account-pending)>header{width:calc(100vw - 16px);gap:8px}
 body>header .scores-card{min-width:0;gap:5px}
 body>header .total-score{min-width:0;gap:5px;font-size:14px}
 body>header #scoreName0,body>header #scoreName1{min-width:0;gap:5px;font-size:13px}
 body>header .player-avatar{width:44px;height:44px;flex-basis:44px;font-size:28px}
 body>header .dictionary-flag{width:22px;margin-left:2px}
 body>header #backBtn{font-size:20px;min-height:48px;padding:8px 12px;margin-left:0}
 body:has(#modeGate[hidden]) #turnCountdown{height:28px;min-height:28px;line-height:22px;padding:3px 0;font-size:16px}
 body:has(#modeGate[hidden]) .rack-row{margin-top:2px;padding-block:4px}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot{height:40px;min-height:40px;max-height:40px;margin-top:2px}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot #releaseBtn{height:40px;min-height:40px;max-height:40px;font-size:14px}
 body:has(#modeGate[hidden]) .table>.rack-tools{height:112px;min-height:112px;max-height:112px;grid-template-rows:44px 62px;gap:6px;padding:0}
 .table>.rack-tools .hint-control .hint-slot{height:62px;min-height:62px;grid-template-rows:18px 40px;row-gap:4px}
 .table>.rack-tools .hint-control .hint-slot #hintWord,
 .table>.rack-tools .hint-control .hint-slot.hint-word-only #hintWord{height:18px;min-height:18px;line-height:18px;font-size:15px}
 .table>.rack-tools .hint-control .hint-slot #hintBtn{height:40px;min-height:40px}
 body:has(#modeGate[hidden]) .table>.rack-tools #buyCreditsBtn{height:40px;min-height:40px}
 body:has(#modeGate[hidden]) .table>.rack-tools .credit-total{height:40px;min-height:40px}
 body:has(#modeGate[hidden]) .composer,
 body:has(#modeGate[hidden]) .turn-card,
 body:has(#modeGate[hidden]) .table>#hintStatus{bottom:116px}
}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
 body:has(#modeGate[hidden]){--board-size:calc(100vw - 16px);--tile-size:calc((var(--board-size) - 12px)/13)}
 body:has(#modeGate[hidden]) main{padding-inline:8px}
 body:has(#modeGate[hidden]) .board-shell{width:100%;max-width:none}
}

/* Portrait tablets budget the visible Safari viewport before sizing the board.
   Keep full width; shorten rows only when a square board would hide the rack. */
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
 body:has(#modeGate[hidden]):not(.account-pending){
  --tablet-height:min(100dvh,var(--visible-game-height,100dvh));
  --board-size:calc(100vw - 16px);
  --tile-size:calc((var(--board-size) - 12px)/13);
  /* Thirteen board rows plus one rack row share the available height.
     Keep at least 64px for Shuffle/Undo/dial when the tiles are shorter. */
  --tablet-bottom:max(8px,env(safe-area-inset-bottom));
  --tablet-tile-height:min(var(--tile-size),calc((var(--tablet-height) - 268px - var(--tablet-bottom))/14),calc((var(--tablet-height) - 332px - var(--tablet-bottom))/13));
  --tablet-rack-row:max(64px,var(--tablet-tile-height));
  height:var(--tablet-height);min-height:0;overflow:hidden;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header{
  width:var(--board-size);height:80px;min-height:80px;max-height:80px;padding:8px 0;
 }
 body:has(#modeGate[hidden]):not(.account-pending) main{
  height:calc(var(--tablet-height) - 80px);min-height:0;max-width:none;
  padding:0 8px max(8px,env(safe-area-inset-bottom));overflow:hidden;
 }
 body:has(#modeGate[hidden]) .game-layout{height:100%;min-height:0}
 body:has(#modeGate[hidden]) .table{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) calc(var(--tablet-rack-row) + 64px) 84px;height:100%;min-height:0;gap:0;
 }
 body:has(#modeGate[hidden]) .table>.board-shell{
  grid-column:1;grid-row:1;align-self:stretch;display:grid;
  grid-template-rows:minmax(0,1fr) 28px;width:100%;min-height:0;padding:0;margin:0;
 }
 body:has(#modeGate[hidden]) #board{
  height:calc(var(--tablet-tile-height)*13 + 12px);max-height:none;width:100%;aspect-ratio:auto;
  grid-template-rows:repeat(13,minmax(0,1fr));align-self:end;
 }
 body:has(#modeGate[hidden]) #board button{aspect-ratio:auto;min-height:0}
 body:has(#modeGate[hidden]) #turnCountdown{
  display:block;height:28px;min-height:28px;margin:0;padding:3px 0;line-height:22px;font-size:18px;
 }
 body:has(#modeGate[hidden]) #turnCountdown[hidden]{visibility:hidden}
 body:has(#modeGate[hidden]) .rack-row{
  grid-column:1;grid-row:2;align-self:stretch;width:100%;min-height:0;
  grid-template-columns:repeat(13,minmax(0,1fr));column-gap:1px;
  grid-template-rows:var(--tablet-rack-row) 48px;row-gap:4px;margin:0;padding:8px 0 4px;
 }
 /* Use the board's thirteen tracks: Shuffle at 1, rack at 2–10, tools at 11–13. */
 body:has(#modeGate[hidden]) .rack-row #shuffleBtn{grid-column:1;grid-row:1;width:100%}
 body:has(#modeGate[hidden]) .rack-row .player{
  grid-column:2 / span 9;grid-row:1;width:100%;min-width:0;margin:0;padding:0;transform:none;
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side{grid-column:11 / span 3;grid-row:1}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot{grid-column:2 / span 9}
 body:has(#modeGate[hidden]) #player0 .rack,
 body:has(#modeGate[hidden]) #player1 .rack{width:100%;grid-template-columns:repeat(9,minmax(0,1fr))}
 body:has(#modeGate[hidden]) #player0 .rack .tile,
 body:has(#modeGate[hidden]) #player1 .rack .tile,
 body:has(#modeGate[hidden]) .rack-empty-slot{
  width:100%;max-width:none;height:var(--tablet-tile-height);aspect-ratio:auto;
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side{flex-wrap:nowrap;min-height:64px}
 body:has(#modeGate[hidden]) .rack-row .rack-side #wordometer{width:56px;height:56px}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot{
  grid-row:2;height:48px;min-height:48px;max-height:48px;margin:0;
  /* Clear the wooden rack lip without changing the fixed viewport budget. */
  position:relative;top:8px;
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side #cancelWordBtn[hidden]{display:block!important;visibility:hidden;pointer-events:none}
 body:has(#modeGate[hidden]) .rack-row:has(#invalidWords:not(:empty)){margin-bottom:0}
 body:has(#modeGate[hidden]) .table>.rack-tools{
  grid-column:1;grid-row:3;position:relative;inset:auto;transform:none;
  width:100%;max-width:none;height:84px;min-height:84px;margin:0;padding:32px 0 0;align-self:stretch;
 }
 body:has(#modeGate[hidden]) .composer,
 body:has(#modeGate[hidden]) .turn-card,
 body:has(#modeGate[hidden]) .table>#hintStatus{
  position:absolute;left:0;right:0;bottom:84px;margin:0;z-index:20;pointer-events:none;
 }
 body:has(#modeGate[hidden]) #moveFeedback:not(:empty),
 body:has(#modeGate[hidden]) #notice:not(:empty){background:var(--paper);border-radius:6px;padding:4px}
}

/* Free activation uses a clockwise three-quarter-circle arrow, then the live dial. */
#wordometer.wordometer-free{background:transparent!important;color:#2d8c57}
#wordometer.wordometer-free::before{display:none}
#wordometer.wordometer-free #meterPercent{display:block;width:100%;height:100%}
.wordometer-activate-icon,.wordometer-activate-icon svg{display:block;width:100%;height:100%;pointer-events:none}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
 /* Divide columns 11–13 equally between Undo and the dial; reserve both slots. */
 body:has(#modeGate[hidden]) .rack-row .rack-side{
  --rack-dial-size:calc(var(--tablet-tile-height) + 16px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  width:100%;margin:0;padding:0;align-items:center;justify-items:center;
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side #cancelWordBtn{
  grid-column:1;grid-row:1;width:var(--tile-size);height:var(--rack-dial-size);
  min-height:0;min-width:0;margin:0;padding:2px;justify-self:center;
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side .wordometer-feedback{
  grid-column:2;grid-row:1;width:auto;min-width:0;margin:0;justify-self:center;
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side #wordometer{
  width:var(--rack-dial-size);height:var(--rack-dial-size);
 }
 body:has(#modeGate[hidden]) .rack-row .rack-side #meterPercent{font-size:clamp(13px,1.8vw,20px)}
}

/* Both players share one phone header row, with scores alongside their names. */
@media(max-width:600px){
 body:has(#modeGate[hidden]):not(.account-pending)>header:has(#backBtn){
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:1fr;width:calc(100vw - 16px);height:68px;min-height:68px;max-height:68px;
  gap:8px;padding:6px 5px;margin:0 auto;align-items:center;overflow:visible;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header:has(#backBtn)>.scores-card{
  grid-column:1;grid-row:1;
  display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);align-items:center;
  width:100%;min-width:0;height:100%;gap:12px;padding:0;margin:0;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header:has(#backBtn) .total-score{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start!important;
  min-width:0;max-width:100%;height:44px;margin:0;padding:0;gap:5px;
  font-size:16px;line-height:1.1;white-space:nowrap;text-align:left;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header #scoreName0,
 body:has(#modeGate[hidden]):not(.account-pending)>header #scoreName1{
  display:inline-flex;min-width:0;align-items:center;gap:3px;font-size:clamp(11px,3.3vw,15px);line-height:1.1;max-width:100%;white-space:nowrap;flex:0 1 auto;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .player-avatar{
  width:22px;height:22px;flex:0 0 22px;font-size:16px;border-radius:7px;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .dictionary-flag{width:15px;height:auto;margin-left:1px;flex:none}
 body:has(#modeGate[hidden]):not(.account-pending)>header #backBtn{
  grid-column:2;grid-row:1;align-self:center;position:static;margin:0;
  width:48px;height:44px;min-height:44px;padding:4px;font-size:14px;line-height:1.1;
 }
 body:has(#modeGate[hidden]):not(.account-pending) main{
  height:calc(var(--phone-height) - 68px - var(--browser-clearance));
 }
}

@media(max-width:600px){
 body:has(#modeGate[hidden]):not(.account-pending)>header .score-player-label{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .total-score strong{flex:none;font-size:15px}
}

/* Bot profiles float above the board and dismiss on any tap or key. */
.bot-profile-dialog{width:min(340px,86vw);max-height:85dvh;margin:auto;padding:28px;border:0;border-radius:20px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:0 12px 50px #183e3b40;cursor:pointer}
.bot-profile-dialog::backdrop{background:#203d3555;backdrop-filter:blur(3px)}
.bot-profile-dialog h2{margin:0 0 20px;font-size:clamp(26px,6vw,36px);overflow-wrap:anywhere}
.bot-profile-dialog .player-avatar{display:flex!important;width:min(240px,64vw);height:min(240px,64vw);margin:auto;border-radius:24px;font-size:100px;box-shadow:none}

/* Keep player names compact, with one character of breathing room before the flag. */
@media(max-width:600px){
 body:has(#modeGate[hidden]):not(.account-pending)>header:has(#backBtn){padding-inline:0;gap:8px}
 body:has(#modeGate[hidden]):not(.account-pending)>header:has(#backBtn)>.scores-card{
  grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header:has(#backBtn) .total-score{gap:8px}
 body:has(#modeGate[hidden]):not(.account-pending)>header #scoreName0,
 body:has(#modeGate[hidden]):not(.account-pending)>header #scoreName1{
  flex:0 1 auto;gap:3px;font-size:clamp(11px,3.55vw,16px);
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .score-player-label{
  display:block;flex:0 1 auto;width:auto;min-width:0;text-align:left;padding-right:0.75ch;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .player-avatar{
  width:clamp(18px,5.1vw,22px);height:clamp(18px,5.1vw,22px);flex-basis:clamp(18px,5.1vw,22px);
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .dictionary-flag{
  width:clamp(13px,3.55vw,16px);margin:0;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header .total-score strong{
  font-size:clamp(12px,3.55vw,16px);font-variant-numeric:tabular-nums;
 }
 body:has(#modeGate[hidden]):not(.account-pending)>header #backBtn{width:42px;font-size:13px}
}

/* Equal, non-stretching circles for Rules and Bonus words at every viewport. */
.table>.rack-tools #helpBtn,.table>.rack-tools #bonusBtn{
 display:inline-flex;align-items:center;justify-content:center;
 flex:0 0 38px;width:38px;min-width:38px;max-width:38px;
 height:38px;min-height:38px;max-height:38px;aspect-ratio:1;
 padding:0;margin:0;border:0;border-radius:50%;line-height:1;
 background:transparent;color:var(--green);align-self:center;
}
.table>.rack-tools .round-menu-icon{display:block;width:38px;height:38px;flex:none;overflow:visible;pointer-events:none}

/* Lift the desktop toolbar by one control row, reclaiming its flow height. */
@media(min-width:1101px){
 body:has(#modeGate[hidden]):not(.account-pending){height:100dvh;min-height:0}
 body:has(#modeGate[hidden]):not(.account-pending) .table>.rack-tools{
  margin-top:-20px;
 }
 body:has(#modeGate[hidden]):not(.account-pending) .rack-row .play-button-slot{
  height:48px;min-height:48px;max-height:48px;
 }
 body:has(#modeGate[hidden]):not(.account-pending) .rack-row .play-button-slot #releaseBtn{
  height:44px;min-height:44px;max-height:44px;
 }
}

/* Disable double-tap smart zoom across the board, its gaps and controls.
   Keep browser pinch zoom available; rack drag handlers retain touch-action:none. */
body:has(#modeGate[hidden]) .table,
body:has(#modeGate[hidden])>header{touch-action:manipulation}

/* Portrait iPad controls keep their reserved rows while gaining breathing room. */
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
 body:has(#modeGate[hidden]) .rack-row{overflow:visible;z-index:101}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot{top:20px;z-index:102;overflow:visible}
 body:has(#modeGate[hidden]) .rack-row .play-button-slot #releaseBtn{
  width:min(100%,500px);height:48px;min-height:48px;max-height:48px;font-size:20px;
 }
 body:has(#modeGate[hidden]) .table>.rack-tools #passBtn,
 body:has(#modeGate[hidden]) .table>.rack-tools #exchangeBtn,
 body:has(#modeGate[hidden]) .table>.rack-tools #endGameBtn,
 body:has(#modeGate[hidden]) .table>.rack-tools #buyCreditsBtn{
  font-size:clamp(14px,1.76vw,18px);font-weight:600;line-height:1.2;
  border:1px solid var(--green);color:var(--green);background:#fffdf7;
  height:48px;min-height:48px;padding:8px 10px;
 }
 body:has(#modeGate[hidden]) .table>.rack-tools .hint-purchase-controls{flex-wrap:nowrap;align-items:center;gap:10px}
 body:has(#modeGate[hidden]) .table>.rack-tools .hint-slot{width:180px;flex-basis:180px}
 body:has(#modeGate[hidden]) .table>.rack-tools .hint-slot #hintBtn{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;font-size:clamp(14px,1.76vw,18px);padding:8px 10px;
 }
 body:has(#modeGate[hidden]) .table>.rack-tools #hintBtn .help-cost{margin:0;font-size:inherit}
 body:has(#modeGate[hidden]) .table>.rack-tools .hint-slot #hintBtn[hidden]{display:none}
 body:has(#modeGate[hidden]) .table>.rack-tools #hintBtn .help-coin{margin:0;transform:none}
 body:has(#modeGate[hidden]) .table>.rack-tools #helpBtn,
 body:has(#modeGate[hidden]) .table>.rack-tools #bonusBtn{
  flex-basis:42px;width:42px;min-width:42px;max-width:42px;height:42px;min-height:42px;max-height:42px;
 }
 body:has(#modeGate[hidden]) .table>.rack-tools .round-menu-icon{width:42px;height:42px}
}

/* One shared size and appearance for the game toolbar's outlined controls. */
body:has(#modeGate[hidden]) .table>.rack-tools{
 --toolbar-button-height:44px;--toolbar-button-font:14px;column-gap:8px;align-items:center;
}
body:has(#modeGate[hidden]) .table>.rack-tools #passBtn,
body:has(#modeGate[hidden]) .table>.rack-tools #exchangeBtn,
body:has(#modeGate[hidden]) .table>.rack-tools #endGameBtn,
body:has(#modeGate[hidden]) .table>.rack-tools #buyCreditsBtn{
 height:var(--toolbar-button-height);min-height:var(--toolbar-button-height);
 box-sizing:border-box;padding:6px 8px;font-family:inherit;font-size:var(--toolbar-button-font);
 font-weight:600;line-height:1.2;color:var(--green);background:#fffdf7;
 border:1px solid var(--green);border-radius:10px;white-space:nowrap;
}
body:has(#modeGate[hidden]) .table>.rack-tools #dictionaryBtn,
body:has(#modeGate[hidden]) .table>.rack-tools #helpBtn,
body:has(#modeGate[hidden]) .table>.rack-tools #bonusBtn{
 position:static;display:inline-flex;align-items:center;justify-content:center;
 flex:0 0 var(--toolbar-button-height);width:var(--toolbar-button-height);
 min-width:var(--toolbar-button-height);max-width:var(--toolbar-button-height);
 height:var(--toolbar-button-height);min-height:var(--toolbar-button-height);max-height:var(--toolbar-button-height);
 padding:0;margin:0;border:0;background:transparent;color:var(--green);transform:none;
}
body:has(#modeGate[hidden]) .table>.rack-tools .round-menu-icon{
 width:var(--toolbar-button-height);height:var(--toolbar-button-height);
}
body:has(#modeGate[hidden]) .table>.rack-tools .credit-balance,
body:has(#modeGate[hidden]) .table>.rack-tools .move-actions{gap:6px}
@media(max-width:600px){
 body:has(#modeGate[hidden]) .table>.rack-tools{--toolbar-button-font:13px}
 body:has(#modeGate[hidden]) .table>.rack-tools .credit-balance{gap:4px}
 body:has(#modeGate[hidden]) .table>.rack-tools .move-actions{gap:4px}
 body:has(#modeGate[hidden]) .table>.rack-tools .move-actions button{padding-inline:6px}
}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
 body:has(#modeGate[hidden]) .table>.rack-tools{--toolbar-button-height:48px;--toolbar-button-font:clamp(14px,1.76vw,18px)}
}
@media(max-width:600px) and (max-height:700px){
 body:has(#modeGate[hidden]) .table>.rack-tools{--toolbar-button-height:40px}
}

/* Practice progress uses the spare opponent space without increasing header height. */
body:has(#modeGate[hidden])>header:has(#backBtn)>.scores-card.practice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center}
#practiceTarget{order:2;min-width:0;width:100%;box-sizing:border-box;padding:0 8px;color:var(--green)}
#practiceTarget[hidden]{display:none}
.practice-target-label{font-size:clamp(12px,1.5vw,17px);font-weight:700;line-height:1.3;margin-bottom:7px;text-align:center;white-space:nowrap}
.practice-target-track{position:relative;height:16px;background:#dfe6dd;border-radius:8px;isolation:isolate}
.practice-target-fill{height:100%;background:#4e9d62;border-radius:8px;transition:width .35s ease}
.practice-target-marker{position:absolute;top:-4px;bottom:-4px;width:3px;transform:translateX(-50%);background:#294d40;border-radius:2px}
.practice-target-marker:before{content:'';position:absolute;top:-2px;left:-3px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #294d40}
.practice-target-result,.practice-target-intro{text-align:center;font-size:clamp(20px,3vw,28px);line-height:1.4}
#modal:has(.practice-target-intro) .modal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#modal:has(.practice-target-intro) #modalTitle{grid-column:2;text-align:center}
#modal:has(.practice-target-intro) #closeModal{grid-column:3;grid-row:1}
#modal:has(.practice-target-intro) #modalBody{text-align:center}
@media(max-width:600px){#practiceTarget{padding:0 3px}.practice-target-track{height:12px}.practice-target-label{font-size:12px;margin-bottom:6px}}

#modal:has(.player-profile-menu) .modal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#modal:has(.player-profile-menu) #modalTitle{grid-column:2;text-align:center;overflow-wrap:anywhere}
#modal:has(.player-profile-menu) #closeModal{grid-column:3;grid-row:1}
.player-profile-menu{text-align:center}
.player-profile-menu h3{margin:18px 0 12px}
.best-scores-link{border:0;background:transparent;color:var(--green);text-decoration:underline;font:inherit;font-weight:700;padding:8px 12px;cursor:pointer}
.best-scores-panel{margin-bottom:18px}
.best-scores-table{width:100%;border-collapse:collapse;font-size:16px}
.best-scores-table th,.best-scores-table td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left}
.best-scores-table th:last-child,.best-scores-table td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.best-scores-panel h3{margin-top:24px}

/* Larger profile name and navigation labels. */
#modal:has(.player-profile-menu) #modalTitle{font-size:32px;line-height:1.2}
#modal .player-profile-menu .best-scores-link{font-size:24px;line-height:1.3}
#modal .player-profile-menu h3{font-size:24px;line-height:1.3}

/* Decorative rack while the account dialog is open; saved racks remain intact. */
#signinRack{display:none}
body:has(#accountGate:not([hidden])) #rackRow #player0,
body:has(#accountGate:not([hidden])) #rackRow #player1{display:none!important}
body:has(#accountGate:not([hidden])) #rackRow #signinRack{display:block}
#signinRack .rack{width:100%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px!important}
#signinRack .rack .tile{font-size:clamp(12px,calc(var(--tile-size)*.68),40px)}
body:has(#accountGate:not([hidden])) #rackRow .rack-side,
body:has(#accountGate:not([hidden])) #rackRow #shuffleBtn,
body:has(#accountGate:not([hidden])) #rackRow .play-button-slot{visibility:hidden;pointer-events:none}

/* Make revealed Hint and Super Hint words easier to read within their reserved space. */
.table>.rack-tools .hint-control .hint-slot #hintWord{font-size:21px}
@media(max-width:600px){
 .table>.rack-tools .hint-control .hint-slot #hintWord,
 .table>.rack-tools .hint-control .hint-slot.hint-word-only #hintWord{font-size:17px}
}

.matching-preference{margin:18px 0;padding:16px 0;border-block:1px solid #d6dfd3}.matching-preference>span{font-weight:700}.matching-toggle-control{display:flex;align-items:center;gap:12px;margin-top:12px}.matching-toggle{position:relative;width:58px;min-width:58px;height:34px;min-height:34px;border:2px solid #7a8780;border-radius:22px;background:#d9dedb;padding:0}.matching-toggle::after{content:'';position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:white;box-shadow:0 1px 4px #0003;transition:transform .15s}.matching-toggle[aria-checked="true"]{background:#276451;border-color:#276451}.matching-toggle[aria-checked="true"]::after{transform:translateX(24px)}.matching-toggle:focus-visible{outline:3px solid #e7ad2d;outline-offset:3px}.matching-toggle-value{font-weight:700}

/* Keep switch colours stable when Safari retains hover/focus after tapping. */
#modalBody .matching-toggle[aria-checked="true"]{background:#276451;border-color:#276451}
#modalBody .matching-toggle[aria-checked="false"]{background:#f0c5cd;border-color:#b87381}
#modalBody .matching-toggle:disabled{opacity:1}

/* Earned letter swaps sit after End Game and share the toolbar sizing. */
body:has(#modeGate[hidden]) .table>.rack-tools #swapBtn{height:var(--toolbar-button-height);min-height:var(--toolbar-button-height);padding:6px 8px;font-family:inherit;font-size:var(--toolbar-button-font);font-weight:600;line-height:1.2;color:var(--green);background:#fffdf7;border:1px solid var(--green);border-radius:10px;white-space:nowrap}
#swapBtn[hidden]{display:none!important}

body:has(#modeGate[hidden]) .table>.rack-tools #swapBtn{min-height:48px;height:48px;padding:8px 14px;font-size:18px;font-weight:700;background:#f3c65d;color:#3c3016;border:2px solid #b58222}
body:has(#modeGate[hidden]) .table>.rack-tools #swapBtn:hover:enabled{background:#ffda79}
.phrase-bonus-swaps{font-size:22px;font-weight:700;color:#805800;margin:12px 0 0}
@media(max-width:600px){body:has(#modeGate[hidden]) .table>.rack-tools #swapBtn{font-size:14px;padding:6px 9px;height:44px;min-height:44px}}

/* Reserve score digits so counting points never shifts player identities. */
body>header .total-score>strong{display:inline-block;flex:0 0 4ch;width:4ch;min-width:4ch;text-align:left;font-variant-numeric:tabular-nums; font-feature-settings:"tnum";white-space:nowrap}

/* Separate the dictionary/bonus shortcuts from the move controls. */
body:has(#modeGate[hidden]) .table>.rack-tools #bonusBtn{margin-inline-end:16px}
@media(max-width:600px){body:has(#modeGate[hidden]) .table>.rack-tools #bonusBtn{margin-inline-end:10px}}

/* Centre Exchange Tiles content while retaining the close button in its corner. */
#modal:has(.exchange-instructions) .modal-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px}
#modal:has(.exchange-instructions) #modalTitle{grid-column:2;text-align:center}
#modal:has(.exchange-instructions) #closeModal{grid-column:3;grid-row:1}
#modal:has(.exchange-instructions) #modalBody{text-align:center}
#modal:has(.exchange-instructions) .exchange-tiles{justify-content:center}
#modal:has(.exchange-instructions) #modalBody>button{margin:4px 5px 0}

.delete-account-link{display:block;margin:8px 0 16px;border:0;background:transparent;color:#a33030;text-decoration:underline;padding:4px 0;min-height:44px}.delete-account-confirm{background:#a33030;color:#fff;border-color:#a33030}.delete-account-confirm:hover:enabled{background:#842424}

#modalBody>.delete-account-link{margin:16px auto 0;text-align:center}
#modal:has(.account-settings){text-align:center}
.account-settings{text-align:center}
.account-settings-actions{display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:24px}

/* When a hint cannot be bought, use its slot for the last revealed word (if any). */
.table>.rack-tools .hint-slot.hint-word-only{display:flex;align-items:center;justify-content:center}
.table>.rack-tools .hint-control .hint-slot.hint-word-only #hintWord{position:static;inset:auto;transform:none;display:block;width:100%;max-width:100%;height:auto;min-height:0;margin:0;text-align:center;line-height:1.2;white-space:normal;overflow-wrap:anywhere}

.game-result-dialog .winner-score{text-align:center;font-size:clamp(24px,5vw,40px);font-weight:800;margin:8px 0 18px}

.reward-counted-stack{position:relative;width:80px;height:70px;transform:scale(.65);transform-origin:center center}