:root{--bg0: #faf7f0;--bg1: #f4efe5;--panel: rgba(255, 255, 255, .72);--ink: #1f2937;--muted: rgba(31, 41, 55, .65);--stroke: rgba(31, 41, 55, .16);--correct: #2f8f5b;--present: #c59a2f;--absent: #6b7280;--shadow: 0 18px 60px rgba(17, 24, 39, .14);font-family:Spline Sans,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.35;font-weight:400;color:var(--ink);background:radial-gradient(900px 600px at 20% 10%,#fff 0%,var(--bg0) 42%,var(--bg1) 100%);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:inherit}button,input{font-family:inherit}#root{min-height:100vh}.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 10px}.topActions{display:flex;align-items:center;gap:10px}.ghostBtn{border:1px solid var(--stroke);background:#fff9;border-radius:999px;padding:10px 12px;height:42px;font-weight:700;letter-spacing:.01em;box-shadow:var(--shadow);cursor:pointer}.ghostBtn:active{transform:translateY(1px)}.brandTitle{font-family:Fraunces,ui-serif,Georgia,serif;letter-spacing:.02em;font-size:24px}.brandMeta{color:var(--muted);font-size:12px;margin-top:2px}.toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--stroke);border-radius:999px;box-shadow:var(--shadow)}.toggle--locked{opacity:.55}.toggleLabel{font-size:13px;color:var(--ink);-webkit-user-select:none;user-select:none}.stage{display:grid;grid-template-rows:auto auto auto;place-items:center;align-content:start;gap:18px;padding:10px 16px 24px}.board{width:min(380px,calc(100vw - 32px));display:grid;gap:8px;padding:18px;border-radius:18px;background:var(--panel);border:1px solid var(--stroke);box-shadow:var(--shadow);position:relative;overflow:hidden}.board:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 300px at 20% 0%,rgba(47,143,91,.12),transparent 60%),radial-gradient(500px 260px at 100% 30%,rgba(197,154,47,.12),transparent 58%),repeating-linear-gradient(135deg,rgba(31,41,55,.03) 0 2px,transparent 2px 7px);mix-blend-mode:multiply}.boardRow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative}.tile{aspect-ratio:1 / 1;border-radius:12px;border:1px solid rgba(31,41,55,.22);background:#ffffffd6;display:grid;place-items:center;font-size:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 30px #11182714}.tileLetter{transform:translateY(1px)}.tile--absent{background:#6b72801f;border-color:#6b728059}.tile--present{background:#c59a2f29;border-color:#c59a2f73}.tile--correct{background:#2f8f5b2e;border-color:#2f8f5b73}.tile--reveal{animation:tile-flip .46s ease both;animation-delay:var(--d, 0ms)}@keyframes tile-flip{0%{transform:rotateX(0)}40%{transform:rotateX(86deg)}70%{transform:rotateX(86deg)}to{transform:rotateX(0)}}.keyboard{width:min(520px,calc(100vw - 24px));display:grid;gap:10px}.keyboardRow{display:flex;justify-content:center;gap:8px}.key{border:1px solid var(--stroke);background:#ffffffc7;border-radius:12px;padding:12px 10px;min-width:34px;height:44px;font-weight:700;letter-spacing:.04em;box-shadow:0 14px 40px #1118271f;cursor:pointer;transition:transform .12s ease,filter .12s ease}.key:active{transform:translateY(1px)}.key--enter{min-width:70px}.key--absent{background:#6b728024;border-color:#6b728059}.key--present{background:#c59a2f2e;border-color:#c59a2f6b}.key--correct{background:#2f8f5b33;border-color:#2f8f5b6b}.status{font-size:12px;color:var(--muted)}.toasts{position:fixed;left:50%;bottom:16px;transform:translate(-50%);display:grid;gap:8px;z-index:20}.toast{padding:10px 12px;background:#1f2937eb;color:#fff;border-radius:999px;font-size:13px;letter-spacing:.01em;box-shadow:0 14px 40px #1118273d;animation:toast-in .18s ease both}.modalOverlay{position:fixed;inset:0;background:#11182761;display:grid;place-items:center;padding:16px;z-index:30}.modalCard{width:min(520px,calc(100vw - 32px));border-radius:18px;background:#ffffffeb;border:1px solid rgba(31,41,55,.16);box-shadow:0 30px 120px #11182747;overflow:hidden;animation:modal-in .18s ease both}@keyframes modal-in{0%{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid rgba(31,41,55,.1)}.modalTitle{font-family:Fraunces,ui-serif,Georgia,serif;font-size:18px}.iconBtn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(31,41,55,.16);background:#ffffffb3;cursor:pointer;font-weight:900}.modalBody{padding:14px}.statsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{border:1px solid rgba(31,41,55,.12);background:#ffffffb3;border-radius:14px;padding:12px;text-align:center}.statNum{font-size:18px;font-weight:800;letter-spacing:.02em}.statLabel{margin-top:4px;font-size:11px;color:var(--muted)}.distTitle{margin-top:12px;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em}.dist{display:grid;gap:8px;margin-top:10px}.distRow{display:grid;grid-template-columns:18px 1fr 26px;align-items:center;gap:10px}.distIdx{font-weight:800;color:#1f2937bf}.distBar{height:10px;background:#1f293714;border-radius:999px;overflow:hidden}.distFill{height:100%;background:linear-gradient(90deg,#2f8f5b8c,#c59a2f8c)}.distVal{font-weight:800;color:#1f2937a6;text-align:right}.shareRow{margin-top:14px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}.primaryBtn{border:1px solid rgba(31,41,55,.14);background:#1f2937eb;color:#fff;padding:10px 12px;border-radius:12px;font-weight:800;letter-spacing:.01em;cursor:pointer}.primaryBtn:disabled{opacity:.45;cursor:not-allowed}.shareHint{font-size:12px;color:var(--muted)}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:420px){.topbar{padding:16px 14px 8px}.board{padding:14px;border-radius:16px}.key{height:42px;padding:10px 8px;min-width:30px;border-radius:11px}.key--enter{min-width:64px}}
