:root{--bg:#121213;--panel:#18191a;--row-selected:#868686;--tile-empty:#3a3a3c;--tile-gray:#787c7e;--tile-yellow:#c9b458;--tile-green:#6aaa64;--tile-blue:#3b82f6;--tile-red:#b91c1c;--text:#f8f8f8;--muted:#a5a5a5;--border:#565758;--button:#2563eb;--button-hover:#1d4ed8}*{box-sizing:border-box}body{background:var(--bg);width:100%;min-height:100svh;color:var(--text);justify-content:center;align-items:flex-start;margin:0;padding:16px 10px;font-family:Arial,Helvetica,sans-serif;display:flex;overflow-x:hidden}html,body{overscroll-behavior:none;touch-action:none;width:100%;height:100%;overflow:hidden}body{position:fixed;inset:0}.app{flex-direction:column;align-items:center;gap:10px;width:100%;max-width:760px;height:100svh;max-height:100svh;display:flex;overflow:hidden}.play-layout{grid-template-columns:auto auto;justify-content:center;align-items:start;gap:24px;width:100%;display:grid}.main-column{flex-direction:column;align-items:center;gap:14px;display:flex}.goal-word{cursor:pointer;border-radius:8px;grid-template-columns:repeat(5,min(56px,17vw));gap:6px;padding:6px;display:grid}.goal-word.selected{background:var(--row-selected)}.goal-word .tile{cursor:pointer}.row{cursor:pointer;border-radius:8px;grid-template-columns:repeat(5,min(56px,17vw));justify-content:center;gap:6px;padding:6px;display:grid}.tile{text-transform:uppercase;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:4px;justify-content:center;align-items:center;width:min(56px,17vw);height:min(56px,17vw);font-size:min(31px,9vw);font-weight:800;display:flex}.subtitle{color:var(--muted);margin-top:-12px;font-size:14px}.board{flex-direction:column;gap:6px;width:100%;display:flex}.row.selected{background:var(--row-selected)}.tile{text-transform:uppercase;-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:4px;justify-content:center;align-items:center;width:56px;height:56px;font-size:31px;font-weight:800;transition:background-color .12s,border-color .12s,transform 80ms;display:flex}.tile.empty{background:var(--tile-empty);border-color:var(--border)}.tile.gray{background:var(--tile-gray)}.tile.yellow{background:var(--tile-yellow)}.tile.green{background:var(--tile-green)}.tile.blue{background:var(--tile-blue)}.tile.red{background:var(--tile-red,#b91c1c)}.tile.filled.empty{border-color:#777;transform:scale(1.02)}button{background:var(--button);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:12px 14px;font-size:14px;font-weight:700}button:hover:not(:disabled){background:var(--button-hover)}button:disabled{opacity:.5;cursor:default}.status{min-height:20px;color:var(--muted);text-align:center;font-size:14px}.helper-grid{flex-direction:column;gap:6px;display:flex}.goal-area{justify-content:center;width:100%;display:flex}.board{flex-direction:column;gap:6px;display:flex}.side-panel{flex-direction:column;grid-column:3;justify-self:start;align-items:center;gap:14px;margin-left:24px;display:flex}.side-section{justify-content:center;width:190px;display:flex}.helper-panel{background:var(--panel);border:1px solid #2f3033;border-radius:12px;padding:12px;display:block}.score-card{background:var(--panel);text-align:center;border:1px solid #2f3033;border-radius:12px;padding:14px 12px;display:block}.helper-title{color:var(--muted);text-align:center;margin-bottom:10px;font-size:13px;font-weight:700}.helper-grid{flex-direction:column;align-items:center;gap:6px;display:flex}.helper-row{grid-template-columns:repeat(5,28px);gap:4px;display:grid}.helper-tile{background:var(--tile-empty);width:28px;height:28px;color:var(--text);border:1px solid var(--border);border-radius:4px;justify-content:center;align-items:center;font-size:15px;font-weight:800;display:flex}.helper-tile.used{background:var(--tile-green);border-color:var(--tile-green)}.score-label{color:var(--muted);margin-bottom:4px;font-size:13px}.score{font-size:28px;font-weight:800}.breakdown{color:var(--muted);margin-top:4px;font-size:13px}.keyboard{width:100%;max-width:520px;padding:4px 0 env(safe-area-inset-bottom);flex-direction:column;gap:6px;display:none}.keyboard-row{justify-content:center;gap:5px;width:100%;display:flex}.key{color:#fff;touch-action:manipulation;background:#818384;border:none;border-radius:6px;flex:1;max-width:44px;height:46px;padding:0;font-size:17px;font-weight:800}.key,.key:hover,.key:focus,.key:focus-visible,.key:active{color:#fff;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:none;background:#818384!important}.key:active{filter:brightness(1.15);transform:translateY(1px)}.wide-key{flex:1.45;max-width:62px;font-size:18px}button{-webkit-tap-highlight-color:transparent}button:focus,button:focus-visible,.key:focus,.key:focus-visible{background:#818384;outline:none}#newWordButton:focus,#newWordButton:focus-visible{background:var(--button)}#newWordButton:hover:not(:disabled){background:var(--button-hover)}button:not(.key){background:var(--button)}button:not(.key):hover:not(:disabled){background:var(--button-hover)}button:not(.key):focus,button:not(.key):focus-visible{outline:none}@media (hover:none){button:hover:not(:disabled),#newWordButton:hover:not(:disabled){background:var(--button)}.key:hover{background:#818384}}@media (width<=760px),(pointer:coarse){body{padding:10px 6px}.app{gap:10px;max-width:100%}.title{margin:0;font-size:24px}.subtitle{margin-top:-8px;font-size:12px}.play-layout{grid-template-columns:auto auto;justify-content:center;align-items:start;gap:8px;width:100%;display:grid}.main-column{gap:10px}.goal-word,.row{grid-template-columns:repeat(5,42px);gap:4px}.row{padding:4px}.tile{width:42px;height:42px;font-size:23px}.side-panel{gap:8px;width:112px;margin-left:0}.side-section{width:112px}#newWordButton{width:100%;padding:9px 6px;font-size:12px}.helper-panel,.score-card{width:112px;padding:8px 6px}.helper-title{margin-bottom:6px;font-size:11px}.helper-grid{gap:4px}.helper-row{grid-template-columns:repeat(5,18px);gap:2px}.helper-tile{border-radius:3px;width:18px;height:18px;font-size:11px}.score-label{font-size:11px}.score{font-size:22px}.breakdown{font-size:10px;line-height:1.25}.keyboard{display:flex}}