:root{--topbar-height:64px;color:#1a1a1b;font-synthesis:none;text-rendering:optimizelegibility;background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app-shell{--page:#fff;--text:#1a1a1b;--muted:#565758;--border:#d3d6da;--subtle-border:#edeff1;--panel:#fff;--input:#fff;--primary:#538d4e;--primary-text:#fff;--inverse:#1a1a1b;--inverse-text:#fff;--danger:#b3261e;--notice-border:#b59f3b;--notice-bg:#f7f3df;--notice-text:#3a3314;--filled-border:#878a8c;--key-bg:#d3d6da;--correct:#538d4e;--present:#b59f3b;--absent:#3a3a3c;--disabled:#878a8c}.app-shell[data-theme=dark]{--page:#121213;--text:#f8f8f8;--muted:#b8b8b8;--border:#3a3a3c;--subtle-border:#2a2a2c;--panel:#1a1a1b;--input:#1f1f21;--primary:#6aaa64;--primary-text:#fff;--inverse:#f8f8f8;--inverse-text:#121213;--danger:#ff8a80;--notice-border:#c9b458;--notice-bg:#2f2a17;--notice-text:#f4e7ad;--filled-border:#565758;--key-bg:#818384;--correct:#538d4e;--present:#b59f3b;--absent:#3a3a3c;--disabled:#818384}*{box-sizing:border-box}body{background:#fff;min-width:320px;min-height:100svh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{background:var(--page);min-height:100svh;color:var(--text);flex-direction:column;display:flex}.topbar{min-height:var(--topbar-height);border-bottom:1px solid var(--border);grid-template-columns:minmax(92px,auto) 1fr minmax(260px,auto);align-items:center;gap:16px;padding:10px 18px;display:grid}.brand-button{color:var(--text);letter-spacing:0;background:0 0;border:0;font-family:Georgia,Times New Roman,serif;font-size:28px;font-weight:800}.nav-tabs,.auth-mode,.mode-switch{align-items:center;gap:4px;display:inline-flex}.nav-tabs{justify-content:center}.nav-tabs button,.auth-mode button,.mode-switch button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:4px;padding:8px 12px;font-weight:700}.nav-tabs button.active,.auth-mode button.active,.mode-switch button.active{border-color:var(--inverse);background:var(--inverse);color:var(--inverse-text)}.nav-tabs .theme-toggle{text-transform:capitalize}.auth-form{grid-template-columns:auto minmax(110px,1fr) minmax(100px,1fr) auto;align-items:center;gap:6px;display:grid}.auth-form input,.inline-form input{border:1px solid var(--border);background:var(--input);min-width:0;color:var(--text);border-radius:4px;padding:9px 10px}.auth-form>button,.auth-signed-in button,.inline-form button,.secondary-action,.game-header button{background:var(--primary);color:var(--primary-text);border:0;border-radius:4px;padding:10px 14px;font-weight:800}.auth-message{color:var(--danger);grid-column:1/-1;font-size:12px}.auth-signed-in{justify-content:flex-end;align-items:center;gap:10px;font-size:14px;display:flex}.notice{border-left:4px solid var(--notice-border);background:var(--notice-bg);width:min(960px,100% - 32px);color:var(--notice-text);border-radius:4px;margin:16px auto 0;padding:10px 12px}.notice.compact{width:100%;margin:0 0 18px}main{flex:1}.app-view-game main{min-height:0}.menu-band,.game-band,.archive-band,.admin-band{width:min(1080px,100% - 32px);margin:0 auto;padding:34px 0}.menu-inner{grid-template-columns:minmax(280px,1fr) minmax(260px,420px);align-items:start;gap:28px;display:grid}.mode-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;display:grid}.mode-tile{border:2px solid var(--border);background:var(--panel);min-height:150px;color:var(--text);border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex}.mode-tile.selected{border-color:var(--primary)}.mode-tile span{font-size:62px;font-weight:900;line-height:1}.mode-tile small{text-transform:uppercase;font-size:15px;font-weight:800}.stats-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);gap:12px;padding:14px 0;display:grid}.stat-item{grid-template-columns:36px 1fr 1fr;align-items:center;gap:10px;display:grid}.stat-item strong{border:2px solid var(--text);place-items:center;height:32px;font-weight:900;display:grid}.game-band{--game-gap:12px;--keyboard-gap:6px;--key-height:46px;justify-items:center;gap:var(--game-gap);max-width:620px;padding-top:24px;padding-bottom:18px;display:grid}.game-header{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.game-header div{text-align:right;gap:2px;display:grid}.game-header span{color:var(--muted);font-size:13px}.board{--tile-size:clamp(44px, min(12vw, 7.7svh), 56px);grid-template-rows:repeat(6,minmax(0,1fr));gap:5px;width:auto;display:grid}.board-4{grid-template-columns:repeat(4, var(--tile-size))}.board-3{grid-template-columns:repeat(3, var(--tile-size))}.board-5{grid-template-columns:repeat(5, var(--tile-size))}.board-6{grid-template-columns:repeat(6, var(--tile-size))}.board-7{grid-template-columns:repeat(7, var(--tile-size))}.tile{width:var(--tile-size);height:var(--tile-size);border:2px solid var(--border);background:var(--page);color:var(--text);text-transform:uppercase;transform-style:preserve-3d;will-change:transform, background-color, border-color, color;place-items:center;font-size:clamp(24px,7vw,38px);font-weight:900;line-height:1;display:grid}.tile.filled{border-color:var(--filled-border)}.tile.correct,.tile.present,.tile.absent{background:var(--tile-bg);color:#fff;border-color:#0000}.tile.correct{--tile-bg:var(--correct)}.tile.present{--tile-bg:var(--present)}.tile.absent{--tile-bg:var(--absent)}.tile.revealing{animation:tile-reveal .64s ease-in-out var(--reveal-delay,0s) both}@keyframes tile-reveal{0%{background:var(--page);border-color:var(--filled-border);color:var(--text);transform:rotateX(0)}49.99%{background:var(--page);border-color:var(--filled-border);color:var(--text);transform:rotateX(90deg)}50%{background:var(--tile-bg);color:#fff;border-color:#0000;transform:rotateX(90deg)}to{background:var(--tile-bg);color:#fff;border-color:#0000;transform:rotateX(0)}}.game-message{min-height:24px;color:var(--text);text-align:center;font-weight:800}.completion-panel{border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;justify-items:center;gap:7px;width:min(100%,360px);padding:16px 0;display:grid}.completion-panel strong{font-size:20px}.completion-panel span{font-weight:800}.completion-panel small{color:var(--muted);font-size:13px}.completion-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px;display:flex}.completion-actions button{background:var(--primary);color:var(--primary-text);border:0;border-radius:4px;padding:10px 14px;font-weight:800}.completion-actions button.secondary{background:var(--inverse);color:var(--inverse-text)}.keyboard{gap:var(--keyboard-gap);width:min(100%,560px);display:grid}.key-row{justify-content:center;gap:var(--keyboard-gap);display:flex}.key{min-width:0;max-width:44px;height:var(--key-height);background:var(--key-bg);color:var(--text);border:0;border-radius:4px;flex:1;font-size:14px;font-weight:900}.key.wide{flex:1.5;max-width:70px;font-size:12px}.key.correct,.key.present,.key.absent{color:#fff}.key.correct{background:var(--correct)}.key.present{background:var(--present)}.key.absent{background:var(--absent)}.section-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.section-head h1{margin:0;font-size:28px}.archive-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}.archive-item{border:1px solid var(--border);background:var(--panel);color:var(--text);text-align:left;border-radius:6px;align-content:center;gap:4px;min-height:86px;padding:14px;display:grid}.archive-item:hover,.mode-tile:hover{border-color:var(--filled-border)}.empty-state{color:var(--muted)}.admin-layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;display:grid}.admin-panel{border-top:1px solid var(--border);padding-top:16px}.admin-panel h2{margin:0 0 12px;font-size:18px}.inline-form{grid-template-columns:1fr auto;gap:8px;margin-bottom:14px;display:grid}.inline-form.stack{grid-template-columns:1fr 1fr auto}.secondary-action{background:var(--inverse);color:var(--inverse-text);margin-bottom:14px}.word-list,.puzzle-list{gap:6px;max-height:420px;display:grid;overflow:auto}.word-row,.puzzle-row{border-bottom:1px solid var(--subtle-border);align-items:center;gap:8px;min-height:42px;display:grid}.word-row{grid-template-columns:minmax(0,1fr) auto auto}.word-row.inactive .word-meta strong{color:var(--disabled);text-decoration:line-through}.word-meta{gap:2px;min-width:0;display:grid}.word-meta span{color:var(--muted);font-size:12px}.answer-toggle{color:var(--muted);align-items:center;gap:6px;font-size:13px;font-weight:700;display:inline-flex}.word-row button{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:4px;padding:7px 10px;font-weight:700}.puzzle-row{grid-template-columns:1fr 42px 90px 70px}@media (width>=861px){.app-view-game .game-band{--game-gap:clamp(8px, 1.5svh, 12px);--keyboard-gap:clamp(4px, .8svh, 6px);--key-height:clamp(36px, 5.8svh, 44px);align-content:center;min-height:100svh;max-height:100svh;padding-top:clamp(8px,2svh,18px);padding-bottom:clamp(8px,2svh,18px)}.app-view-game .board{--tile-size:clamp(36px, min(12vw, 6.6svh), 52px)}}@media (width>=861px) and (height<=650px){.app-view-game .game-band{--game-gap:6px;--keyboard-gap:4px;--key-height:32px;padding-top:8px;padding-bottom:8px}.app-view-game .board{--tile-size:clamp(30px, min(10vw, 5.8svh), 40px);gap:4px}.app-view-game .tile{font-size:clamp(20px,5svh,30px)}.app-view-game .game-message{min-height:20px;font-size:14px}.app-view-game .key{font-size:12px}.app-view-game .key.wide{font-size:11px}}@media (width<=860px){.topbar{grid-template-columns:1fr;justify-items:stretch}.brand-button,.nav-tabs{justify-self:center}.auth-form{grid-template-columns:1fr 1fr}.auth-form .auth-mode{grid-column:1/-1}.menu-inner,.admin-layout{grid-template-columns:1fr}.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=560px){.mode-grid{grid-template-columns:1fr}.mode-tile{min-height:120px}.mode-tile span{font-size:54px}.section-head,.game-header{flex-direction:column;align-items:stretch}.game-header div{text-align:left}.inline-form,.inline-form.stack{grid-template-columns:1fr}.key{height:44px;font-size:12px}}@media (prefers-reduced-motion:reduce){.tile.revealing{animation:none}}
