/* ================================================================
   064 · Mafija — Probaj Igraonica tema (preko style.css).
   Filmska igra: Playfair Display za naslove i uloge, Golos Text za
   razgovore i kontrole. Papirni dosje i atmosfera ostaju netaknuti.
   ================================================================ */
:root {
  --amber: #ffd23f; --amber-d: #e0a800;
  --red: #ff5a45; --red-d: #8e1c16;
  --head: 'Golos Text', system-ui, sans-serif;
  --display: 'Playfair Display', Georgia, serif;
  --hard: 0 4px 0 #05070d;
}
:focus-visible { outline-color: #ffe14d; }

/* zaglavlje i alati */
.brand-title { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: -.02em; text-transform: none; }
.phase { font-family: var(--head); font-size: 16px; letter-spacing: .02em; }
.phase b { font-weight: 400; color: var(--amber); }
.demo-flag { font: 600 12.5px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; background: #1a1210e6; color: #ffe14d; border: 2px solid var(--amber); border-radius: 8px; rotate: -1.5deg; padding: 6px 10px; }
.tool { border: 2px solid #05070d; border-radius: 12px; background: rgba(22, 17, 16, .88); box-shadow: 0 3px 0 #05070d; font-family: var(--head); font-weight: 600; font-size: 14px; letter-spacing: .03em; }
.tool:hover { border-color: #05070d; background: #2a1f18; color: #fff; }
.tool[aria-pressed="true"] { background: var(--amber); color: #1e2230; border-color: #05070d; }

/* dugmad */
.send, .primary-btn { border: 2px solid #05070d; box-shadow: var(--hard); border-radius: 12px; font: 600 16px/1 var(--head); letter-spacing: .04em; background: var(--amber); color: #1e2230; }
.send:hover, .primary-btn:hover { background: #ffe14d; }
.send:active, .primary-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #05070d; }
.ghost-btn, .mini { border: 2px solid #05070d; box-shadow: 0 3px 0 #05070d; border-radius: 12px; background: #1d1715; font: 600 15px/1 var(--head); letter-spacing: .03em; }
.ghost-btn:hover { border-color: #05070d; background: #2a1f18; }
.chip { border: 2px solid #05070d; border-radius: 999px; background: #231b18; box-shadow: 0 2px 0 #05070d; font: 600 14.5px/1 var(--head); letter-spacing: .02em; }
.chip:hover { background: var(--amber); color: #1e2230; border-color: #05070d; }
.field input { border: 2px solid #05070d; border-radius: 12px; }
.field input:focus { border-color: var(--amber); }

/* donji panel i zapisnik */
.dock, .log, .pop { border: 2px solid #05070d; border-radius: 16px; box-shadow: 0 5px 0 #05070d, 0 20px 50px rgba(0, 0, 0, .5); }
.role-chip b { font-family: var(--head); font-style: normal; font-weight: 400; font-size: 20px; letter-spacing: .02em; }
.log-head h2, .log h2 { font: 600 20px/1 var(--head); letter-spacing: .03em; }
.x { border: 2px solid #05070d; box-shadow: 0 2px 0 #05070d; }

/* početni ekran: naslov i karte uloga */
.kicker { font: 600 14px/1 var(--head); letter-spacing: .12em; }
.title { font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(48px, 4.3vw, 65px); line-height: 1.04; letter-spacing: -.04em; text-transform: none; text-shadow: 0 5px 0 rgba(0, 0, 0, .55); }
.title.small { font-size: 40px; }
.lead { color: #eadfca; }
.ro-card { border: 2px solid #05070d; border-radius: 14px; box-shadow: 0 4px 0 #05070d; position: relative; }
.ro-card b { font: 600 17px/1.15 var(--head); letter-spacing: .02em; }
.ro-card:hover { border-color: #05070d; background: #2a1f18; }
.role-opt input:checked + .ro-card { border-color: #05070d; background: #3a2d10; box-shadow: 0 4px 0 var(--amber-d), 0 0 0 3px var(--amber); }
.role-opt input[value="maf"]:checked + .ro-card { border-color: #05070d; background: #3a1512; box-shadow: 0 4px 0 var(--red-d), 0 0 0 3px var(--red); }
.role-opt input:checked + .ro-card::after { content: 'ODABRANO'; position: absolute; right: 8px; top: 8px; font: 600 10px/1 var(--head); letter-spacing: .1em; color: #1e2230; background: var(--amber); border-radius: 5px; padding: 3px 5px; rotate: 4deg; }
.role-opt input[value="maf"]:checked + .ro-card::after { background: var(--red); color: #fff; }
.role-reference { border: 2px dashed rgba(255, 210, 63, .35); border-radius: 12px; }
.role-reference summary { font: 600 15px/1.2 var(--head); letter-spacing: .03em; }
.primary-btn.big { font-size: 19px; border-radius: 14px; }
.fin-roles li { font-family: var(--head); font-size: 16px; letter-spacing: .02em; }
.fin-roles li span { font-family: var(--head); font-weight: 600; }

@media (max-width: 760px) {
  .title { font-size: clamp(36px, 8.2vw, 46px); }
  .title.small { font-size: 32px; }
  .brand-title { font-size: clamp(15px, 4vw, 18px); }
  .role-opt input:checked + .ro-card::after { content: none; }
}
/* Posebna kontrola muzike: na uskim ekranima samo ikona uz pristupačan naziv. */
@media (max-width: 600px) {
  #bMusic { min-width: 40px; width: 40px; padding: 0; justify-content: center; }
  #bMusic span { display: none; }
  .tools { gap: 5px; }
}