:root{--canvas: #FAFAFA;--surface: #FFFFFF;--ink: #1D1D1F;--ink-secondary: #6E6E73;--separator: rgba(0, 0, 0, .08);--gold: #C9A227;--absent: #A1A1A6;--font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--font-display: "New York", "SF Pro Display", Georgia, serif;--radius-card: 16px;--radius-tile: 10px;--radius-button: 12px;--shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);--ease-sheet: cubic-bezier(.32, .72, 0, 1);--t-micro: .15s;--t-standard: .25s;--t-celebrate: .6s}@media (prefers-color-scheme: dark){:root{--canvas: #000000;--surface: #1C1C1E;--ink: #F5F5F7;--ink-secondary: #98989D;--separator: rgba(255, 255, 255, .12)}}html{background:var(--canvas)}body{margin:0;font-family:var(--font-ui);color:var(--ink);font-size:1.0625rem;line-height:1.47;-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}*{box-sizing:border-box}button{font-family:inherit}.tabular{font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}.shell{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:0 20px}@media (min-width: 744px){.shell{padding:0 24px}}.shell-header{display:flex;align-items:center;justify-content:space-between;padding:16px 0 8px}.wordmark{font-family:var(--font-display);font-size:1.375rem;font-weight:650;letter-spacing:-.01em}.streak{display:inline-flex;align-items:center;gap:4px}.streak-count{font-family:var(--font-display);font-size:1.0625rem;font-weight:650;color:var(--ink-secondary)}.today{flex:1;padding:12px 0 24px}.date-caption{margin:0 0 16px;color:var(--ink-secondary);font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.card-list{display:flex;flex-direction:column;gap:12px}.game-card{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px;color:inherit;text-decoration:none;transition:transform var(--t-micro) var(--ease-sheet)}a.game-card:active{transform:scale(.985)}a.game-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-chip{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:var(--radius-tile);background:var(--canvas);border:1px solid var(--separator);color:var(--ink)}.card-text{display:flex;flex-direction:column;gap:2px;min-width:0}.card-title{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}.card-tagline{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}.card-status{margin-left:auto;flex:none;font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}a.game-card .card-status{color:var(--accent)}.shell-footer{padding:20px 0 24px;text-align:center;font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.game{flex:1;display:flex;flex-direction:column;padding-bottom:8px;max-width:480px;width:100%;margin:0 auto}.game-header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 0 0}.game-back{font-size:1.75rem;line-height:1;color:var(--ink);text-decoration:none;text-align:center;padding:4px 0 8px;border-radius:var(--radius-button)}.game-title{margin:0;text-align:center;font-family:var(--font-display);font-size:1.375rem;font-weight:650;letter-spacing:-.01em}.game-stats{background:none;border:0;color:var(--ink-secondary);padding:8px;border-radius:var(--radius-button);cursor:pointer}.game-back:focus-visible,.game-stats:focus-visible,.btn-primary:focus-visible,.kb-key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.game-notice{min-height:1.2rem;margin:2px 0 6px;text-align:center;font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}.game-loading{text-align:center;color:var(--ink-secondary);padding-top:40px}.board{display:flex;flex-direction:column;gap:6px;align-items:center;flex:1;justify-content:center;margin-bottom:12px}.board-row{display:flex;gap:6px}.board-row[data-shake]{animation:shake .35s var(--ease-sheet)}@keyframes shake{10%,50%,90%{transform:translate(-6px)}30%,70%{transform:translate(6px)}}.tile{--tile-bg: var(--surface);--tile-fg: var(--ink);width:clamp(52px,15.5vw,62px);height:clamp(52px,15.5vw,62px);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-tile);border:1.5px solid var(--separator);background:var(--tile-bg);color:var(--tile-fg);font-family:var(--font-display);font-size:1.75rem;font-weight:600;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tile[data-state=filled]{border-color:var(--absent)}.tile[data-state=correct]{--tile-bg: var(--accent);--tile-fg: #fff;border-color:transparent}.tile[data-state=present]{--tile-bg: var(--gold);--tile-fg: #fff;border-color:transparent}.tile[data-state=absent]{--tile-bg: var(--absent);--tile-fg: #fff;border-color:transparent}.tile[data-pop]{animation:pop .14s var(--ease-sheet)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}.tile[data-flip]{animation:flip .5s var(--ease-sheet) backwards}@keyframes flip{0%{transform:rotateX(0);background:var(--surface);color:var(--ink);border-color:var(--absent)}49.99%{transform:rotateX(90deg);background:var(--surface);color:var(--ink);border-color:var(--absent)}50%{transform:rotateX(90deg);background:var(--tile-bg);color:var(--tile-fg);border-color:transparent}to{transform:rotateX(0);background:var(--tile-bg);color:var(--tile-fg);border-color:transparent}}.keyboard{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}.kb-row{display:flex;gap:5px;justify-content:center}.kb-key{flex:1;max-width:42px;height:52px;border:0;border-radius:var(--radius-tile);background:var(--surface);box-shadow:0 1px 2px #0000000f;color:var(--ink);font-family:var(--font-ui);font-size:.9375rem;font-weight:650;cursor:pointer;transition:transform var(--t-micro) var(--ease-sheet),background var(--t-standard);touch-action:manipulation}.kb-key:active{transform:scale(.94)}.kb-wide{max-width:64px;flex:1.6;font-size:.75rem}.kb-key[data-state=correct]{background:var(--accent);color:#fff}.kb-key[data-state=present]{background:var(--gold);color:#fff}.kb-key[data-state=absent]{background:var(--absent);color:#fff;opacity:.7}.sheet-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000052;display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:scrim-in var(--t-standard) var(--ease-sheet)}@keyframes scrim-in{0%{opacity:0}to{opacity:1}}.sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:480px;padding:8px 24px calc(24px + env(safe-area-inset-bottom));animation:sheet-up var(--t-standard) var(--ease-sheet);outline:none;max-height:85dvh;overflow-y:auto}@keyframes sheet-up{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.sheet-grab{width:36px;height:4px;border-radius:2px;background:var(--separator);margin:4px auto 16px}.sheet-title{margin:0 0 6px;font-family:var(--font-display);font-size:1.375rem;font-weight:650;letter-spacing:-.01em}.sheet-fact{margin:0 0 16px;color:var(--ink-secondary)}.sheet-streak{display:flex;align-items:center;gap:6px;margin-bottom:16px}.sheet-streak-label{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}.dist{display:flex;flex-direction:column;gap:5px;margin-bottom:20px}.dist-row{display:flex;align-items:center;gap:8px}.dist-num{width:12px;font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}.dist-track{flex:1}.dist-bar{background:var(--separator);color:var(--ink);border-radius:6px;padding:2px 8px;font-size:.8125rem;font-weight:650;text-align:right;min-width:24px;box-sizing:border-box;transition:width var(--t-standard) var(--ease-sheet)}.dist-bar[data-hit]{background:var(--accent);color:#fff}.sheet-actions{display:flex;align-items:center;gap:12px;margin-bottom:8px}.btn-primary{background:var(--accent);color:#fff;border:0;border-radius:var(--radius-button);padding:12px 28px;font-family:var(--font-ui);font-size:1.0625rem;font-weight:650;cursor:pointer;transition:transform var(--t-micro) var(--ease-sheet)}.btn-primary:active{transform:scale(.97)}.share-note{font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}.sheet-tomorrow{margin:8px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-secondary)}@media (prefers-reduced-motion: reduce){.board-row[data-shake],.tile[data-pop]{animation:none}.tile[data-flip]{animation-name:fade-reveal}@keyframes fade-reveal{0%{opacity:.4}to{opacity:1}}}
