:root{--bg:#1b2a1f;--panel:#f6f1e3;--ink:#1b2a1f;--muted:#5b6b5e;--primary:#2f6b3a;--danger:#b8432f;--good:#2f8a3e;--bad:#b8432f;--info:#3b6fb6;--radius:12px;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0}#app{flex-direction:column;height:100dvh;display:flex}#game{flex:auto;min-height:0;position:relative}#ui{flex:none;position:relative}.hud{border-radius:var(--radius);color:#fff;background:#1b2a1fbf;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:6px 12px;font-size:15px;font-weight:600;display:flex;position:fixed;top:8px;left:8px;right:8px}.hud-coins{color:#f4c542}.hud-gems{color:#8fd3ff}.hud-bar{background:#ffffff40;border-radius:5px;flex:120px;max-width:220px;height:10px;overflow:hidden}.hud-bar>span{background:#5fd35f;height:100%;transition:width .4s;display:block}.panel{padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:var(--panel);border-top:4px solid var(--ink);flex-direction:column;align-items:center;gap:10px;display:flex}.panel-title{margin:0;font-size:22px;font-weight:700}.panel-tag{background:var(--danger);color:#fff;text-transform:uppercase;border-radius:999px;margin:0;padding:2px 10px;font-size:13px;font-weight:700}.panel-feedback{text-align:center;min-height:1.4em;margin:0;font-size:18px}.panel-feedback[data-kind=good]{color:var(--good);font-weight:700}.panel-feedback[data-kind=bad]{color:var(--bad)}.panel-feedback[data-kind=info]{color:var(--info)}.exercise{letter-spacing:.04em;font-variant-numeric:tabular-nums;margin:0;font-size:clamp(36px,8vw,56px);font-weight:800}.answer{border-bottom:4px solid var(--ink);text-align:center;font-variant-numeric:tabular-nums;min-width:3ch;margin:0;padding:2px 12px;font-size:40px;font-weight:800}.row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.keypad{grid-template-columns:repeat(3,64px);gap:8px;display:grid}.key,.btn{border:3px solid var(--ink);border-radius:var(--radius);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--ink);touch-action:manipulation;background:#fff;font-weight:700}.key:active,.btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.key{height:56px;font-size:26px}.key-ok{background:var(--primary);color:#fff}.btn{min-height:52px;padding:0 22px;font-size:20px}.btn-primary{background:var(--primary);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-small{min-height:48px;font-size:16px}@media (orientation:landscape) and (height<=600px){#app{flex-direction:row}#ui{width:min(360px,45vw);overflow-y:auto}.panel{border-top:0;border-left:4px solid var(--ink);justify-content:center;height:100%}.hud{right:auto}}
