.omni-city-game{
  --page:#1b2230; --surface:rgba(20,26,38,.85); --solid:#222c3d;
  --border:rgba(255,255,255,.1); --border-soft:rgba(255,255,255,.08);
  --txt:#e8edf6; --txt-2:#cdd6e4; --txt-dim:#8a97ad;
  --chip:rgba(255,255,255,.05); --chip-hover:rgba(255,255,255,.08); --input-bg:rgba(255,255,255,.06);
  --good:#5ed29a; --bad:#ef6d6d; --scrim:rgba(12,16,24,.78);
}
.omni-city-game.light{
  --page:#aacbe8; --surface:rgba(244,247,250,.92); --solid:#ffffff;
  --border:rgba(0,0,0,.12); --border-soft:rgba(0,0,0,.08);
  --txt:#1f2733; --txt-2:#36414f; --txt-dim:#5f6b7a;
  --chip:rgba(0,0,0,.05); --chip-hover:rgba(0,0,0,.08); --input-bg:rgba(0,0,0,.05);
  --good:#0f9d63; --bad:#d23b3b; --scrim:rgba(20,30,45,.5);
}

.omni-city-game, .omni-city-game * { margin:0; padding:0; box-sizing:border-box; -webkit-user-select:none; user-select:none; }
.omni-city-game { background:var(--page); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.omni-city-game { position:relative; width:100%; max-width:100%; height:min(920px, 88vh); min-height:760px; overflow:hidden; border-radius:0; }
.omni-city-game canvas { display:block; width:100%; height:100%; cursor:crosshair; }

/* lewa kolumna: statystyki + cel */
#leftpanel { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:10px;
             z-index:5; max-width:calc(100% - 300px); }
#goal { max-width:430px; }
#hud { display:flex; gap:8px; flex-wrap:wrap; }
.stat { background:var(--surface); color:var(--txt); border:1px solid var(--border-soft);
        border-radius:12px; padding:7px 11px; min-width:78px; backdrop-filter:blur(6px); }
.stat .lab { font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--txt-dim); }
.stat .val { font-size:19px; font-weight:600; margin-top:1px; }
.val.good { color:var(--good); } .val.bad { color:var(--bad); }

/* karta celu */
#goal { background:var(--surface); border:1px solid var(--border-soft); border-radius:14px;
        padding:10px 14px; backdrop-filter:blur(6px); }
.goal-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:8px; }
.goal-head .t { font-size:13px; font-weight:600; color:var(--txt); }
.goal-head .p { font-size:12px; color:var(--txt-dim); font-weight:500; }
.nextlvl { font-size:12px; font-weight:600; color:var(--good); background:rgba(94,210,154,.16);
           border:1px solid rgba(94,210,154,.4); border-radius:8px; padding:4px 9px; cursor:pointer; }
#goal-items { display:flex; flex-wrap:wrap; gap:6px; }
.gi { display:inline-flex; align-items:center; gap:4px; font-size:13px; padding:5px 9px; border-radius:9px;
      background:var(--chip); color:var(--txt-2); border:1px solid transparent; white-space:nowrap; }
.gi.done { background:rgba(94,210,154,.16); color:var(--good); border-color:rgba(94,210,154,.4); }
.gi .ico { font-size:15px; }
#goal-road { font-size:12px; color:var(--txt-dim); margin-top:8px; }
#goal-road:empty { display:none; }
.bon-on { color:var(--good); font-weight:600; }

/* prawy górny: przyciski */
#sys { position:absolute; top:12px; right:12px; display:flex; gap:6px; z-index:5; flex-wrap:wrap; justify-content:flex-end; }
#sys button { background:var(--surface); color:var(--txt-2); border:1px solid var(--border);
              border-radius:10px; padding:7px 10px; font-size:12px; cursor:pointer; backdrop-filter:blur(6px); }
#sys button:hover { background:var(--chip-hover); color:var(--txt); }

/* panel zadań */
#quiz { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:236px;
        background:var(--surface); border:1px solid var(--border); border-radius:18px;
        padding:16px; z-index:5; backdrop-filter:blur(8px); text-align:center; }
#quiz .qhead { display:flex; justify-content:space-between; align-items:center; font-size:11px;
               text-transform:uppercase; letter-spacing:.05em; color:var(--txt-dim); margin-bottom:6px; }
#q-streak { color:#f5a623; font-weight:600; }
#q-problem { font-size:38px; font-weight:600; color:var(--txt); margin:8px 0 12px; }
#q-input { width:100%; height:46px; font-size:24px; text-align:center; border-radius:12px;
           border:2px solid var(--border); background:var(--input-bg); color:var(--txt); outline:none; }
#q-input:focus { border-color:#5ed29a; }
#q-check { width:100%; margin-top:10px; height:42px; font-size:15px; font-weight:600; cursor:pointer;
           border:none; border-radius:12px; background:#5ed29a; color:#0e1a13; }
#q-check:hover { background:#74e0ab; }
#q-feedback { font-size:13px; min-height:18px; margin-top:9px; font-weight:500; }
#q-feedback.ok { color:var(--good); } #q-feedback.bad { color:#f5a623; }
#q-reward { font-size:12px; color:var(--txt-dim); margin-top:4px; }
.floatup { position:absolute; font-size:22px; font-weight:700; color:var(--good); pointer-events:none;
           z-index:9; animation:floatup 1s ease-out forwards; }
@keyframes floatup { 0%{opacity:1; transform:translateY(0);} 100%{opacity:0; transform:translateY(-48px);} }
.coin { position:absolute; font-size:18px; pointer-events:none; z-index:9; animation:coinfly .95s ease-out forwards; }
@keyframes coinfly {
  0%   { opacity:0; transform:translate(0,0) scale(.5) rotate(0); }
  15%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--dx,0), -72px) scale(1.15) rotate(var(--rot,0deg)); }
}

/* pasek narzędzi dół */
#toolbar { position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
           display:flex; flex-direction:column; gap:6px; padding:8px;
           background:var(--surface); border:1px solid var(--border-soft);
           border-radius:16px; backdrop-filter:blur(8px); z-index:5; max-width:96vw; }
#cats { display:flex; gap:4px; justify-content:center; flex-wrap:wrap; }
.cat { padding:4px 11px; font-size:12px; border-radius:8px; cursor:pointer; color:var(--txt-dim);
       background:var(--chip); border:1px solid transparent; }
.cat:hover { background:var(--chip-hover); }
.cat.sel { background:rgba(94,210,154,.16); color:var(--good); border-color:rgba(94,210,154,.35); }
#tools { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.tool { width:72px; padding:7px 4px 5px; border-radius:12px; cursor:pointer; text-align:center;
        border:2px solid transparent; transition:background .12s; }
.tool:hover { background:var(--chip-hover); }
.tool.sel { background:rgba(94,210,154,.14); border-color:#5ed29a; }
.tool .ico { font-size:23px; line-height:1; }
.tool .nm { font-size:12px; color:var(--txt); margin-top:3px; font-weight:500; }
.tool .ct { font-size:11px; color:var(--txt-dim); }
.tool.sel .ct { color:var(--good); }

/* komunikat */
#msg { position:absolute; top:64px; left:50%; transform:translateX(-50%);
       background:rgba(239,109,109,.95); color:#fff; padding:8px 16px; border-radius:10px;
       font-size:14px; font-weight:500; opacity:0; transition:opacity .25s; z-index:6; pointer-events:none; }
#help { position:absolute; bottom:116px; left:50%; transform:translateX(-50%);
        color:var(--txt-dim); font-size:12px; text-align:center; z-index:4; pointer-events:none; max-width:60vw; }

/* ekran zwycięstwa */
#win { position:absolute; inset:0; background:var(--scrim); display:none; align-items:center;
       justify-content:center; z-index:20; backdrop-filter:blur(3px); }
.win-card { background:var(--solid); border:1px solid var(--border); border-radius:22px;
            padding:30px 34px; text-align:center; max-width:360px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.win-emoji { font-size:54px; }
.win-title { font-size:24px; font-weight:700; color:var(--txt); margin-top:6px; }
.win-sub { font-size:14px; color:var(--txt-dim); margin-top:6px; }
.win-stats { font-size:14px; color:var(--txt-2); margin:16px 0 20px; line-height:1.85; }
.win-stats b { color:var(--good); }
.win-btns { display:flex; gap:10px; justify-content:center; }
.win-btns button { padding:11px 18px; font-size:14px; font-weight:600; border-radius:12px; cursor:pointer; border:none; }
.win-primary { background:#5ed29a; color:#0e1a13; }
.win-secondary { background:var(--chip); color:var(--txt-2); border:1px solid var(--border); }

#q-options { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.q-option { width:100%; min-height:42px; border:2px solid var(--border); border-radius:12px; background:var(--solid); color:var(--txt); font-size:15px; font-weight:650; cursor:pointer; padding:9px 12px; }
.q-option:hover:not(:disabled) { border-color:#5ed29a; background:var(--chip-hover); }
.q-option:disabled { opacity:.72; cursor:not-allowed; }
.q-option.good { border-color:var(--good); color:var(--good); }
.q-option.bad { border-color:var(--bad); color:var(--bad); }
#q-input.is-hidden, #q-check.is-hidden { display:none; }
.omni-city-empty { padding:24px; border:1px solid #f0d98c; border-radius:8px; background:#fff8e1; }

@media (max-width: 900px) {
  .omni-city-game { min-height:980px; height:980px; }
  #leftpanel { max-width:calc(100% - 40px); }
  #quiz { top:auto; right:12px; left:12px; bottom:132px; transform:none; width:auto; }
  #toolbar { bottom:12px; }
  #help { display:none; }
}