/* PIĘCIOBÓJ — BOLD ARCADE: jasny KREM / ciemny GRAFIT NEON */
:root{
  --bg1:#fdf3d7;--bg2:#f9e9bd;
  --ink:#3d372a;--accent:#f77f00;--accsh:#c96400;--acctxt:#fff;
  --ok:#23a559;--okbg:#e9f6ec;
  --card:#ffffff;--cardsh:#e6ddc4;
  --line:#e6ddc4;--soft:#f6efd9;--soft2:#f3ecd6;--dash:#d8cda6;
  --logosh:#e8d69e;--shadow:rgba(64,58,40,.10)}
[data-theme="dark"]{
  --bg1:#23252e;--bg2:#17181f;
  --ink:#f0f0f4;--accent:#ff9f1c;--accsh:#c97a00;--acctxt:#1f2027;
  --ok:#57d98a;--okbg:#1e3328;
  --card:#2c2e3a;--cardsh:#181a22;
  --line:#3a3d4c;--soft:#262833;--soft2:#33364a;--dash:#4a4e63;
  --logosh:#000;--shadow:rgba(0,0,0,.45)}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{background:linear-gradient(165deg,var(--bg1),var(--bg2)) fixed;color:var(--ink);min-height:100vh;display:flex;justify-content:center;padding:14px 10px;touch-action:manipulation}
.app{width:100%;max-width:440px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.topbar h1{font-size:1.25rem;letter-spacing:3px;font-weight:900;text-shadow:0 2px 0 var(--logosh)}
.topbar .back{text-decoration:none;color:var(--ink);font-weight:700;font-size:.85rem;opacity:.6}
.date{font-size:.7rem;opacity:.5;margin:6px 0 10px;letter-spacing:1px;text-transform:uppercase}
.prompt{background:var(--card);color:var(--ink);border-radius:14px;border-bottom:4px solid var(--cardsh);border-left:6px solid var(--accent);padding:11px 14px;margin-bottom:12px;animation:pop .3s ease}
.prompt b{display:block;font-size:.95rem;margin-bottom:2px}
.prompt span{font-size:.75rem;opacity:.7}
.meta{display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:.85rem;opacity:.85}
.meta i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink);margin:0 2px}
.btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn{border:none;background:var(--card);border-bottom:4px solid var(--cardsh);border-radius:16px;padding:10px 20px;font-size:.88rem;font-weight:800;cursor:pointer;color:var(--ink);transition:transform .08s;box-shadow:0 2px 8px var(--shadow)}
.btn.primary{background:var(--accent);color:var(--acctxt);border-bottom-color:var(--accsh)}
.btn:active{transform:translateY(3px);border-bottom-width:1px}
.btn:disabled{opacity:.35;cursor:default}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg1);padding:9px 18px;border-radius:10px;font-size:.85rem;opacity:0;pointer-events:none;transition:.25s;z-index:90}
.toast.show{opacity:1}
.modal{position:fixed;inset:0;background:rgba(40,35,20,.5);display:none;align-items:flex-start;justify-content:center;padding:20px;z-index:70;overflow-y:auto}
[data-theme="dark"] .modal{background:rgba(0,0,0,.65)}
.modal.show{display:flex}
.card{background:var(--card);color:var(--ink);border-radius:18px;border-bottom:5px solid var(--cardsh);padding:24px 20px;max-width:370px;width:100%;text-align:center;animation:pop .3s ease;margin:auto 0;box-shadow:0 14px 44px var(--shadow)}
.card h2{margin-bottom:4px;font-weight:900;letter-spacing:1px}
.score-big{font-size:2.3rem;font-weight:900;color:var(--accent);margin:6px 0}
.score-detail{font-size:.78rem;opacity:.7;margin-bottom:8px}
.card p{font-size:.85rem;opacity:.75;margin-bottom:4px}
.card .btn{margin:8px 3px 0}
footer{text-align:center;font-size:.66rem;opacity:.45;margin-top:14px;line-height:1.5}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.shake{animation:shake .35s ease}