/* diablo.suby.pl — mroczny grymuar. Tokeny najpierw, komponenty potem.
   Fonty: Cinzel (nagłówki, klimat Trajana z logo Diablo) + Alegreya (tekst). */
@import url('/fonts/fonts.css');

:root {
  --bg: 0 0% 4%;
  --bg-deep: 0 0% 2%;
  --surface: 16 12% 8%;
  --surface-2: 18 10% 11%;
  --ink: 36 28% 87%;        /* kość */
  --ink-dim: 32 10% 56%;
  --blood: 0 68% 34%;       /* zakrzepła krew */
  --blood-hot: 6 88% 50%;   /* żar */
  --gold: 41 52% 56%;       /* postarzane złoto */
  --gold-dim: 40 28% 34%;
  --line: 28 14% 17%;
  --ok: 100 40% 45%;

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Alegreya', Georgia, serif;
  --radius: 3px;
  --glow-blood: 0 0 24px hsl(var(--blood-hot) / .35), 0 0 64px hsl(var(--blood) / .25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: hsl(var(--bg));
  color: hsl(var(--ink));
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* ── Tło: portal żaru + ziarno ───────────────────────────────────────── */
.bg-portal {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52vw 38vh at 50% -6%, hsl(var(--blood) / .38), transparent 70%),
    radial-gradient(70vw 50vh at 50% 108%, hsl(0 60% 10% / .5), transparent 70%),
    linear-gradient(hsl(var(--bg-deep)), hsl(var(--bg)));
}
.bg-grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

/* ── Lobby ───────────────────────────────────────────────────────────── */
#lobby { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; }

.hero { text-align: center; margin-bottom: 44px; }
.hero .title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(52px, 11vw, 108px);
  letter-spacing: .14em;
  color: hsl(var(--ink));
  text-shadow: 0 0 18px hsl(var(--blood-hot) / .55), 0 0 60px hsl(var(--blood) / .5), 0 2px 0 hsl(0 0% 0%);
  animation: emberPulse 3.4s ease-in-out infinite;
}
@keyframes emberPulse {
  0%, 100% { text-shadow: 0 0 18px hsl(var(--blood-hot) / .5), 0 0 60px hsl(var(--blood) / .45), 0 2px 0 hsl(0 0% 0%); }
  50%      { text-shadow: 0 0 26px hsl(var(--blood-hot) / .75), 0 0 90px hsl(var(--blood) / .6), 0 2px 0 hsl(0 0% 0%); }
}
.hero .sub {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; font-size: 13px;
  color: hsl(var(--gold));
  margin-top: 6px;
}
.hero .tagline { color: hsl(var(--ink-dim)); font-style: italic; margin-top: 14px; }

/* Panel-grymuar: podwójna złota ramka z nacięciami w rogach */
.panel {
  position: relative;
  background: linear-gradient(hsl(var(--surface)), hsl(var(--surface-2)));
  border: 1px solid hsl(var(--gold-dim) / .55);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / .6), inset 0 0 40px hsl(0 0% 0% / .35), 0 10px 40px hsl(0 0% 0% / .5);
}
.panel::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid hsl(var(--gold-dim) / .3);
  border-radius: 1px;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
}
.panel > h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .28em; text-transform: uppercase;
  color: hsl(var(--gold));
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.panel > h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, hsl(var(--gold-dim) / .6), transparent); }

.grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.col { display: grid; gap: 22px; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }

/* ── Przyciski ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .18em; text-transform: uppercase;
  color: hsl(var(--ink));
  background: linear-gradient(hsl(0 45% 16%), hsl(0 55% 10%));
  border: 1px solid hsl(var(--blood) / .8);
  border-radius: var(--radius);
  padding: 13px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: inset 0 1px 0 hsl(0 60% 30% / .5), 0 4px 14px hsl(0 0% 0% / .5);
}
.btn:hover { border-color: hsl(var(--blood-hot)); box-shadow: var(--glow-blood), inset 0 1px 0 hsl(0 60% 35% / .6); }
.btn:active { transform: translateY(1px); }
.btn.primary { font-size: 17px; padding: 16px 26px; width: 100%; }
.btn.ghost {
  background: transparent; border-color: hsl(var(--gold-dim) / .7); color: hsl(var(--gold));
  box-shadow: none;
}
.btn.ghost:hover { border-color: hsl(var(--gold)); box-shadow: 0 0 18px hsl(var(--gold) / .15); }
.btn.small { font-size: 12px; padding: 8px 14px; letter-spacing: .14em; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { border-color: hsl(var(--blood) / .8); }

.actions { display: grid; gap: 12px; }
.note { color: hsl(var(--ink-dim)); font-size: 14.5px; margin-top: 10px; }
.note b { color: hsl(var(--ink)); }
.note.small { font-size: 13px; }
kbd {
  font-family: var(--font-body); font-size: 13px;
  background: hsl(var(--surface-2)); border: 1px solid hsl(var(--line));
  border-bottom-width: 2px; border-radius: 3px; padding: 1px 7px;
  color: hsl(var(--gold));
}

/* ── Formularze ──────────────────────────────────────────────────────── */
input[type=text] {
  width: 100%;
  background: hsl(var(--bg-deep));
  color: hsl(var(--ink));
  font-family: var(--font-body); font-size: 16px;
  border: 1px solid hsl(var(--line));
  border-radius: var(--radius);
  padding: 11px 14px;
  outline: none;
  transition: border-color .2s;
}
input[type=text]:focus { border-color: hsl(var(--blood-hot) / .7); box-shadow: 0 0 14px hsl(var(--blood) / .25); }
input::placeholder { color: hsl(var(--ink-dim) / .7); }
.row { display: flex; gap: 10px; align-items: center; }
.row input[type=text] { flex: 1; }

.checkline { display: flex; align-items: center; gap: 9px; color: hsl(var(--ink-dim)); font-size: 15px; user-select: none; cursor: pointer; }
.checkline input { accent-color: hsl(var(--blood-hot)); width: 16px; height: 16px; }

/* ── Listy pokoi / replayów ──────────────────────────────────────────── */
.list { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.list::-webkit-scrollbar { width: 8px; }
.list::-webkit-scrollbar-thumb { background: hsl(var(--line)); border-radius: 4px; }
.list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: hsl(var(--bg-deep) / .6);
  border: 1px solid hsl(var(--line));
  border-left: 3px solid hsl(var(--blood));
  border-radius: var(--radius);
  padding: 10px 14px;
}
.list-item .meta { color: hsl(var(--ink-dim)); font-size: 13.5px; }
.list-item .name { font-weight: 700; letter-spacing: .04em; }
.list-empty { color: hsl(var(--ink-dim)); font-style: italic; padding: 6px 2px; }

.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--ok)); box-shadow: 0 0 8px hsl(var(--ok) / .8); margin-right: 7px; vertical-align: 1px; }
.status-dot.off { background: hsl(var(--blood-hot)); box-shadow: 0 0 8px hsl(var(--blood-hot) / .8); }

/* ── Sekcja "jak grać" ───────────────────────────────────────────────── */
.howto ol { padding-left: 22px; display: grid; gap: 7px; color: hsl(var(--ink-dim)); }
.howto ol b { color: hsl(var(--ink)); font-weight: 700; }
.howto .keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 12px; font-size: 14.5px; color: hsl(var(--ink-dim)); }

footer {
  margin-top: 44px; text-align: center;
  color: hsl(var(--ink-dim) / .8); font-size: 13.5px; line-height: 1.7;
}
footer a { color: hsl(var(--gold)); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── Ekran gry ───────────────────────────────────────────────────────── */
#game { position: fixed; inset: 0; background: #000; display: none; flex-direction: column; z-index: 10; }
#game.on { display: flex; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(hsl(var(--surface-2)), hsl(var(--surface)));
  border-bottom: 1px solid hsl(var(--gold-dim) / .4);
  padding: 7px 12px;
  font-size: 14px;
  min-height: 44px;
  flex-wrap: wrap;
}
.topbar .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; color: hsl(var(--gold)); font-size: 13px; }
.topbar .room-code {
  font-family: var(--font-display); letter-spacing: .12em; font-weight: 700;
  color: hsl(var(--ink)); background: hsl(var(--bg-deep));
  border: 1px solid hsl(var(--line)); border-radius: 3px; padding: 3px 10px;
  cursor: pointer;
}
.topbar .room-code:hover { border-color: hsl(var(--gold-dim)); }
.topbar .spacer { flex: 1; }
.topbar .dim { color: hsl(var(--ink-dim)); }

/* Sterowanie replayem (fast-forward) */
.replay-controls { display: inline-flex; align-items: center; gap: 6px; }
.replay-controls[hidden] { display: none; } /* [hidden] musi wygrać z display */
.replay-controls .rc-label {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .14em;
  font-size: 11px; color: hsl(var(--gold)); margin-right: 4px;
}
.replay-controls button {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; color: hsl(var(--ink-dim));
  background: hsl(var(--bg-deep)); border: 1px solid hsl(var(--line));
  border-radius: 3px; padding: 4px 9px; cursor: pointer; transition: all .15s;
}
.replay-controls button:hover { border-color: hsl(var(--gold-dim)); color: hsl(var(--ink)); }
.replay-controls button.active {
  color: hsl(var(--ink)); border-color: hsl(var(--blood-hot));
  background: linear-gradient(hsl(0 45% 16%), hsl(0 55% 10%));
  box-shadow: 0 0 10px hsl(var(--blood) / .4);
}
.replay-controls .rc-ff { color: hsl(var(--gold)); border-color: hsl(var(--gold-dim) / .7); }
.replay-controls .rc-prog { font-size: 11px; color: hsl(var(--ink-dim)); min-width: 34px; }
@media (max-width: 640px) {
  .replay-controls .rc-label, .replay-controls .rc-prog { display: none; }
  .replay-controls button { padding: 4px 7px; }
}

.stage { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
.stage .frame {
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
canvas.emscripten {
  border: 0; outline: none;
  background: #000;
  max-width: 100%; max-height: 100%;
  width: auto; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  touch-action: none;
}

/* Loader nad canvasem */
.loader {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(60vw 40vh at 50% 30%, hsl(var(--blood) / .25), transparent 70%), hsl(var(--bg-deep) / .96);
  text-align: center; padding: 20px;
}
.loader.off { display: none; }
.loader .flame {
  width: 54px; height: 54px; border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 35% 65%, hsl(48 90% 60%), hsl(var(--blood-hot)) 55%, hsl(var(--blood)) 80%);
  transform: rotate(-45deg);
  animation: flicker .55s ease-in-out infinite alternate;
  box-shadow: var(--glow-blood);
}
@keyframes flicker {
  from { transform: rotate(-45deg) scale(1); filter: brightness(1); }
  to   { transform: rotate(-45deg) scale(1.12); filter: brightness(1.25); }
}
.loader .msg { font-family: var(--font-display); letter-spacing: .22em; text-transform: uppercase; font-size: 13px; color: hsl(var(--gold)); }
.loader .detail { color: hsl(var(--ink-dim)); font-size: 14px; max-width: 520px; }
.loader progress { width: min(420px, 80vw); height: 8px; accent-color: hsl(var(--blood-hot)); }

/* Podpowiedź "jak wejść do gry online" */
.gamehint {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6;
  background: hsl(var(--surface) / .96); border: 1px solid hsl(var(--gold-dim) / .6);
  border-radius: var(--radius); padding: 12px 18px; max-width: min(600px, 92vw);
  font-size: 14.5px; box-shadow: 0 8px 30px hsl(0 0% 0% / .6);
}
.gamehint b { color: hsl(var(--gold)); }
.gamehint .x { float: right; cursor: pointer; color: hsl(var(--ink-dim)); margin-left: 12px; }

/* ── Modal MPQ ───────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center;
  background: hsl(0 0% 0% / .7);
  padding: 20px;
}
.modal.show { display: flex; }
.modal .box { max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; }
.dropzone {
  border: 2px dashed hsl(var(--gold-dim) / .7); border-radius: var(--radius);
  padding: 26px; text-align: center; color: hsl(var(--ink-dim));
  cursor: pointer; transition: border-color .2s, background .2s;
  margin: 14px 0;
}
.dropzone:hover, .dropzone.dragover { border-color: hsl(var(--gold)); background: hsl(var(--gold) / .05); color: hsl(var(--ink)); }

/* ── Mobile ──────────────────────────────────────────────────────────── */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 860px) {
  #game .rotate-hint {
    display: flex; position: absolute; inset: 0; z-index: 30;
    background: hsl(var(--bg-deep) / .97);
    flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    text-align: center; padding: 30px;
    font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; font-size: 15px;
    color: hsl(var(--gold));
  }
  .rotate-hint .phone { font-size: 44px; animation: rot 1.6s ease-in-out infinite; }
  @keyframes rot { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  #lobby { padding: 26px 14px 60px; }
  .panel { padding: 20px 16px; }
}