/* HOTBURNING ARENA — wspólny motyw: tusz, papier ryżowy, cynober i żar */
:root{
  --tusz:#0d0b0a; --tusz2:#16120f; --tusz3:#211a15;
  --papier:#efe6d6; --papier-dim:#c9bda8;
  --zar:#e8552d; --zar2:#ff8a3d; --cynober:#c8342a;
  --zloto:#d4a556; --jadeit:#3fa87a; --blad:#d94b3a;
  --linia:rgba(212,165,86,.28);
  --cien:0 10px 40px rgba(0,0,0,.55);
  --font:"Segoe UI",Roboto,system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #2a1d14 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #2b1410 0%, transparent 55%),
    var(--tusz);
  color:var(--papier); font-family:var(--font);
  min-height:100vh; overflow-x:hidden;
}
body::before{ /* delikatne ziarno papieru */
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size:3px 3px;
}
a{color:var(--zloto)}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:.02em; margin:0}

/* ── elementy wspólne ───────────────────────────────────────────── */
.karta{
  background:linear-gradient(180deg, rgba(33,26,21,.92), rgba(13,11,10,.92));
  border:1px solid var(--linia); border-radius:14px; box-shadow:var(--cien);
}
.btn{
  background:linear-gradient(180deg,var(--tusz3),var(--tusz2));
  color:var(--papier); border:1px solid var(--linia); border-radius:10px;
  padding:9px 14px; font-size:14px; font-family:var(--font); cursor:pointer;
  transition:.12s; font-weight:600;
}
.btn:hover{border-color:var(--zloto); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.zar{background:linear-gradient(180deg,var(--zar),#b83c1c); border-color:#ff9a55; color:#fff}
.btn.ok{background:linear-gradient(180deg,var(--jadeit),#2c7a57); border-color:#6fd3a6; color:#fff}
.btn.zle{background:linear-gradient(180deg,var(--blad),#96281a); border-color:#f08878; color:#fff}
.btn.mini{padding:5px 9px; font-size:12px; border-radius:8px}
.btn:disabled{opacity:.38; cursor:not-allowed; transform:none}
input,select,textarea{
  background:#0b0908; color:var(--papier); border:1px solid var(--linia);
  border-radius:9px; padding:9px 11px; font-family:var(--font); font-size:14px; width:100%;
}
input:focus,select,textarea:focus{outline:none; border-color:var(--zloto)}
label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.1em;
      color:var(--papier-dim); margin:0 0 5px}
.rzad{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pion{display:flex; flex-direction:column; gap:10px}
.tag{display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px;
     border:1px solid var(--linia); color:var(--papier-dim); letter-spacing:.06em}
.muted{color:var(--papier-dim)}
.hr{height:1px; background:var(--linia); margin:14px 0; border:0}

/* pieczęć / godło gildii */
.piecz{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; background:var(--cynober);
  color:#fff; font-family:var(--serif); font-size:19px; font-weight:700;
  box-shadow:0 0 22px rgba(200,52,42,.5); flex:0 0 auto;
}

/* pasek etapów */
.etapy-pasek{display:flex; gap:6px; flex-wrap:wrap}
.etap-pigulka{
  padding:5px 11px; border-radius:999px; font-size:12px; border:1px solid var(--linia);
  color:var(--papier-dim); cursor:pointer; white-space:nowrap; transition:.12s;
}
.etap-pigulka:hover{border-color:var(--zloto); color:var(--papier)}
.etap-pigulka.teraz{background:var(--zar); border-color:var(--zar2); color:#fff; font-weight:700}
.etap-pigulka.zrobione{opacity:.45}

@keyframes puls{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes wjazd{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.wjazd{animation:wjazd .35s ease-out}