:root{--bg:#f6eee0;--ink:#2b2320;--muted:#7a6f5f;--card:#fffdf7;--line:#e6d7b8;--primary:#d85c27;--accent:#1f6a5c;--accent-soft:#dceae5;--radius:18px;--shadow:0 10px 30px #5a3e201f}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1100px 480px at 50% -140px, #fbf4e3 0%, transparent 62%), var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100dvh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#app{max-width:640px;min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));flex-direction:column;margin:0 auto;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.screen{flex-direction:column;flex:1;gap:16px;animation:.25s fade-in;display:flex}.screen.center{text-align:center;justify-content:center;align-items:center}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}h1{letter-spacing:-.02em;margin:0;font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.15}p{margin:0;line-height:1.5}.muted,.tagline,.footnote{color:var(--muted)}.tagline{max-width:30em}.footnote{font-size:.82rem}.badge{display:block}.actions{flex-direction:column;gap:12px;width:100%;max-width:340px;display:flex}.btn{min-height:56px;font:inherit;letter-spacing:.01em;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;border:none;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:14px 20px;font-size:1.04rem;font-weight:700;transition:transform 60ms,background-color .15s,opacity .15s;display:inline-flex}.btn:active{transform:translateY(1px)scale(.995)}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px #d85c2759}.btn.primary:disabled{opacity:.55;box-shadow:none}.btn.ghost{color:var(--accent);border:2px solid var(--accent);background:0 0}.btn.small{width:auto;min-height:44px;padding:10px 16px;font-size:.95rem}.code-input{border:2px solid var(--line);background:var(--card);letter-spacing:.32em;text-align:center;text-transform:uppercase;width:100%;max-width:260px;min-height:60px;color:var(--ink);border-radius:14px;padding:8px;font-size:1.6rem;font-weight:800}.code-input::placeholder{color:#cbb98f}.code-input:focus{border-color:var(--accent);outline:3px solid #1f6a5c38}.spinner{border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.dot{vertical-align:middle;border-radius:50%;width:10px;height:10px;display:inline-block}.dot.off{background:#b8ac97}.dot.pulse{background:var(--accent);animation:1.8s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #1f6a5c73}70%{box-shadow:0 0 0 9px #1f6a5c00}to{box-shadow:0 0 #1f6a5c00}}.code-card{background:var(--card);border:2px dashed var(--line);border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;padding:18px 22px;display:flex}.code{letter-spacing:.18em;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(2rem,10vw,2.6rem);font-weight:800}.status{color:var(--muted);align-items:center;gap:8px;display:flex}.screen.game{gap:20px}.game-header{flex-direction:column;gap:10px;display:flex}.meta{color:var(--muted);justify-content:space-between;align-items:center;font-size:.86rem;font-weight:600;display:flex}.opp{color:var(--muted);align-items:center;gap:6px;display:inline-flex}.opp.online{color:var(--accent)}.progress{background:#e7d9bc;border-radius:999px;height:8px;overflow:hidden}.bar{background:linear-gradient(90deg, var(--accent), var(--primary));border-radius:999px;height:100%;transition:width .3s}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;flex-direction:column;flex:1;justify-content:center;gap:14px;padding:clamp(24px,7vw,42px);display:flex}.card.revealed{animation:.35s pop}@keyframes pop{0%{opacity:.3;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.label{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.72rem;font-weight:700}.expression{overflow-wrap:break-word;margin:0;font-family:Georgia,Times New Roman,serif;font-size:clamp(1.5rem,6.5vw,2.3rem);font-style:italic;line-height:1.3}.meaning{margin:0;font-size:clamp(1.05rem,4.5vw,1.35rem);line-height:1.55}.game-footer{flex-direction:column;align-items:stretch;gap:10px;display:flex}.game-footer .btn.small{align-self:center}@media (min-width:640px){#app{min-height:100vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}