:root { color-scheme:dark; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; background:#070c0a; color:#cde6d5; }
* { box-sizing:border-box; }
body { margin:0; padding:12px; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
a { color:#55efaa; }
button { font:inherit; background:#173b2c; border:1px solid #55efaa; color:#e7fff1; padding:10px 14px; cursor:pointer; border-radius:4px; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:3px solid #f5d76e; outline-offset:3px; }
.skip-link { position:absolute; top:-100px; z-index:50; background:#070c0a; padding:10px; }
.skip-link:focus { top:0; }
#game-container { position:relative; width:min(100%,800px); border:1px solid #27513c; background:#030806; }
#hud { display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 80px 10px 10px; font-size:clamp(11px,1.6vw,15px); min-height:58px; }
.hud-block { flex:1 1 120px; }
#high-score-display { color:#f5d76e; }
#word-ui-bar { display:flex; flex-wrap:wrap; gap:8px; min-height:42px; padding:8px; border-top:1px solid #27513c; font-size:12px; }
#letter-rack { display:flex; flex-wrap:wrap; gap:3px; }
.letter-tile { padding:3px 6px; border:1px solid #55efaa; color:#55efaa; }
#words-display { flex:1; min-width:90px; overflow-wrap:anywhere; }
#word-score-display { color:#55efaa; }
#gameCanvas { display:block; width:100%; height:auto; aspect-ratio:4 / 3; background:#000; }
.screen { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; padding:16px; background:rgba(3,8,6,.94); text-align:center; }
.hidden { display:none!important; }
h1 { margin:0; color:#55efaa; font-size:clamp(24px,6vw,54px); }
p { line-height:1.5; margin:0; max-width:550px; }
.hud-button { position:absolute; top:8px; right:8px; font-size:12px; padding:8px; }
#touch-controls { display:flex; justify-content:center; gap:8px; padding:10px; border-top:1px solid #27513c; }
.touch-btn { touch-action:none; user-select:none; font-size:20px; padding:8px; min-width:44px; min-height:44px; }
.backlinks { padding:14px 0; font-size:13px; }
@media (max-height:500px) and (min-width:600px) { #game-container { max-width:560px; } body { justify-content:flex-start; } }