/* =======================================================================
   DORIAN'S LAB — zajednički dizajn sistem
   Svaki modul učitava samo ovaj fajl + lab.js. Ne kopiraj boje ručno.
   ======================================================================= */
:root{
  --ink:#17143B; --ink-2:#231D5E; --ink-3:#2E2775;
  --cream:#FFF4E0;
  --rose:#F4718C; --peach:#FF9F5A; --butter:#FFD166;
  --mint:#55D6A6; --sky:#6BB8F5; --plum:#B48CF0;

  /* boje predmeta prate raspored razreda 4.B (dorian-4b.netlify.app) */
  --c-math:#4DABF7; --c-bhs:#FF6B6B; --c-eng:#9775FA; --c-env:#51CF66; --c-info:#3BC9DB;
  --g-math:linear-gradient(135deg,#8ECBFF,#4DABF7);
  --g-bhs:linear-gradient(135deg,#FFA08F,#FF6B6B);
  --g-eng:linear-gradient(135deg,#C6A7FF,#9775FA);
  --g-env:linear-gradient(135deg,#8CE99A,#51CF66);
  --g-info:linear-gradient(135deg,#7BE7F0,#3BC9DB);
  --g-lab:linear-gradient(135deg,#B48CF0,#F4718C);
  --g-soon:linear-gradient(135deg,#8E86C9,#6E67A8);

  --radius:22px;
  --line:1px solid rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 12% -8%, #322A7D 0%, transparent 60%),
    radial-gradient(900px 520px at 92% 4%, #4B2A6B 0%, transparent 55%),
    var(--ink);
  background-attachment:fixed;
  color:var(--cream);
  font-family:"Nunito", ui-sans-serif, system-ui, sans-serif;
  min-height:100vh; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;          /* bez zuma na dvostruki dodir */
}
.display{font-family:"Baloo 2","Nunito",sans-serif;letter-spacing:.2px}
.wrap{max-width:1080px;margin:0 auto;padding:18px 16px 70px;position:relative;z-index:1}

/* ---------- ploče, čipovi, dugmad ---------- */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border:var(--line); border-radius:var(--radius);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;
  font-weight:800;font-size:14px;color:var(--cream);font-family:inherit;
}
button.chip{cursor:pointer;transition:background .18s ease,transform .18s ease}
button.chip:hover{background:rgba(255,255,255,.17)}
.chip.on{background:linear-gradient(90deg,var(--butter),var(--peach));color:#2A1E4A;border-color:transparent}
.iconbtn{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);cursor:pointer;font-size:17px;color:var(--cream)}
.iconbtn:hover{background:rgba(255,255,255,.16)}
.xpbar{height:12px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden;flex:1;min-width:120px;border:1px solid rgba(255,255,255,.12)}
.xpfill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--butter));transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- kartice ---------- */
.card{
  text-align:left;cursor:pointer;color:var(--cream);font-family:inherit;text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:18px;
  display:flex;gap:14px;align-items:flex-start;width:100%;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.42);box-shadow:0 22px 44px -30px rgba(0,0,0,1)}
.card:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
.card.soon{cursor:default;opacity:.45}
.card.soon:hover{transform:none;border-color:rgba(255,255,255,.15);box-shadow:none}
.badge{flex:none;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  font-family:"Baloo 2",sans-serif;font-size:24px;color:#221A47;font-weight:800}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:3px 8px;opacity:.85}

/* ---------- pitanje i tastatura ---------- */
.qtext{font-family:"Baloo 2",sans-serif;font-size:clamp(26px,6vw,48px);line-height:1.5;text-align:center}
.slot{display:inline-grid;place-items:center;min-width:1.9em;height:1.5em;padding:0 .18em;border-radius:12px;
  background:rgba(255,209,102,.14);border:2px dashed rgba(255,209,102,.55);color:var(--butter);vertical-align:middle;cursor:pointer}
.slot.active{border-style:solid;background:rgba(255,209,102,.26);animation:blink 1.3s ease-in-out infinite}
.slot.ok{background:rgba(85,214,166,.22);border:2px solid var(--mint);color:var(--mint);animation:none}
.slot.bad{border-color:var(--rose);color:var(--rose);background:rgba(244,113,140,.2);animation:shake .4s}
@keyframes blink{0%,100%{border-color:rgba(255,209,102,.95)}50%{border-color:rgba(255,209,102,.35)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:330px;margin:0 auto}
.key{height:60px;border-radius:16px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  color:var(--cream);font-family:"Baloo 2",sans-serif;font-size:26px;cursor:pointer;transition:transform .08s ease}
.key:active{transform:translateY(2px) scale(.97)}
.key.wide{grid-column:span 2}
.key.go{background:linear-gradient(180deg,#63E2B0,#2FB587);color:#10331F;border-color:rgba(255,255,255,.3)}
.key.del{background:linear-gradient(180deg,rgba(244,113,140,.35),rgba(244,113,140,.18))}
.key:focus-visible{outline:3px solid var(--butter);outline-offset:2px}

/* riječi i ponuđeni odgovori (jezički moduli) */
.choice{border-radius:16px;border:1px solid rgba(255,255,255,.18);padding:14px 18px;font-weight:800;font-size:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));color:var(--cream);
  cursor:pointer;font-family:inherit;transition:transform .12s ease,border-color .18s}
.choice:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45)}
.choice.ok{background:linear-gradient(180deg,rgba(85,214,166,.4),rgba(85,214,166,.16));border-color:var(--mint)}
.choice.bad{background:linear-gradient(180deg,rgba(244,113,140,.35),rgba(244,113,140,.14));border-color:var(--rose)}
.inputline{width:100%;background:rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.2);border-radius:16px;
  color:var(--cream);font-family:"Baloo 2",sans-serif;font-size:24px;padding:12px 16px;text-align:center}
.inputline:focus{outline:none;border-color:var(--butter)}

/* ---------- povratna informacija ---------- */
.dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.2)}
.dot.done{background:var(--mint)} .dot.miss{background:var(--rose)}
.dot.now{background:var(--butter);transform:scale(1.4)}
.timer{height:10px;border-radius:999px;background:rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.timer div{height:100%;background:linear-gradient(90deg,var(--mint),var(--butter));width:100%;transition:width 1s linear}
.timer.low div{background:linear-gradient(90deg,var(--rose),var(--peach))}
.toast{font-family:"Baloo 2",sans-serif;font-size:21px;min-height:32px;text-align:center}
.flyxp{position:fixed;pointer-events:none;font-family:"Baloo 2",sans-serif;font-weight:800;color:var(--butter);font-size:28px;z-index:60;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translateY(-90px);opacity:0}}
.conf{position:fixed;width:11px;height:15px;z-index:55;pointer-events:none;border-radius:2px}
.star{font-size:44px;filter:grayscale(1);opacity:.3;transition:all .4s cubic-bezier(.2,1.6,.4,1)}
.star.lit{filter:none;opacity:1;transform:scale(1.15)}
.hintbox{border-left:4px solid var(--sky);background:rgba(107,184,245,.12);border-radius:0 14px 14px 0;padding:12px 16px}
.hintbox.objasni{font-size:17px;line-height:1.6;text-align:left}
.rule{border-left:4px solid var(--plum);background:rgba(180,140,240,.14);border-radius:0 14px 14px 0;padding:12px 16px}
.weak{display:inline-block;background:rgba(244,113,140,.18);border:1px solid rgba(244,113,140,.5);color:#FFD9E1;
  border-radius:10px;padding:5px 11px;font-weight:800;margin:0 7px 7px 0;font-size:15px}

/* ---------- ulazak kartica ---------- */
.rise{opacity:0;transform:translateY(16px);animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}