/* ui.css — warstwa wizualna menu cs.suby.pl (owner: agent UI, patrz port/ui.md).
   Ładowany PO stylach inline z index.html, więc nadpisuje bazowe reguły.
   Struktura DOM budowana w js/ui.js (progressive enhancement na bazie index.html).
   Paleta: tło #0b0e11, panele #141a21, ramki #2a3541, tekst #e8e4d8, akcent #f0a830. */

:root {
  --bg: #0b0e11;
  --panel: #141a21;
  --panel2: #10151b;
  --line: #2a3541;
  --ink: #e8e4d8;
  --dim: rgba(232, 228, 216, .62);
  --accent: #f0a830;
  --accent-ink: #1a1408;
  --ok: #5fc46a;
  --bad: #e05f4e;
}

/* ---------------------------------------------------------------- menu (ekran) */
#menu.cs-ui {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 90% at 50% 0%, #1c242e 0%, #0b0e11 62%),
    #0b0e11;
}
#menu.cs-ui::before { /* delikatna siatka taktyczna w tle */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 168, 48, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 168, 48, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 70% at 50% 35%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 35%, #000 0%, transparent 100%);
}

#menu.cs-ui .card {
  margin: auto; /* flex + margin:auto = centrowanie i poprawny scroll gdy nie mieści się */
  width: min(560px, 94vw);
  max-width: none;
  padding: clamp(14px, 3.5vh, 36px) clamp(12px, 3vw, 28px);
  box-sizing: border-box;
}

/* ------------------------------------------------------------------- nagłówek */
#menu.cs-ui .emblem { margin: 0 auto .4em; width: clamp(44px, 8vh, 64px); height: clamp(44px, 8vh, 64px); }
#menu.cs-ui .emblem svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(240, 168, 48, .35)); }
#menu.cs-ui h1 {
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0;
  background: linear-gradient(180deg, #ffe1a3 0%, var(--accent) 55%, #b97a1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
#menu.cs-ui p.sub {
  margin: .5em 0 1.3em;
  font-size: .93rem;
  letter-spacing: .04em;
  color: var(--dim);
  opacity: 1;
}

/* --------------------------------------------------------------- panel serwera */
#serverpanel {
  display: flex;
  align-items: center;
  gap: .8em;
  text-align: left;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .65em .9em;
  margin: 0 0 1.1em;
}
#serverpanel .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 8px var(--bad);
  transition: background .3s, box-shadow .3s;
}
#serverpanel.online .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
#srvmap { font-weight: 700; letter-spacing: .03em; }
#srvmap .lbl { font-weight: 400; color: var(--dim); }
#srvplayers { font-size: .84rem; color: var(--dim); font-variant-numeric: tabular-nums; }
#serverpanel .srvinfo { min-width: 0; }

/* ------------------------------------------------------------------- formularz */
#menu.cs-ui #form { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }
#menu.cs-ui input#nick {
  flex: 1 1 11em;
  width: auto;
  max-width: none;
  min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
#menu.cs-ui input#nick:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(240, 168, 48, .18);
}
#menu.cs-ui button#play {
  display: inline-block;
  margin: 0;
  flex: none;
  padding: .55em 1.8em;
  background: linear-gradient(180deg, #ffc558 0%, var(--accent) 60%, #d88f1d 100%);
  box-shadow: 0 4px 16px rgba(240, 168, 48, .3);
  letter-spacing: .06em;
  transition: transform .12s, box-shadow .2s, filter .2s;
}
#menu.cs-ui button#play:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 5px 22px rgba(240, 168, 48, .45); }
#menu.cs-ui button#play:active:not(:disabled) { transform: translateY(1px); }

/* przyciski drugorzędne (powtórki, modale, overlay) */
.cs-btn {
  font: inherit;
  font-size: .92rem;
  padding: .5em 1.2em;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  letter-spacing: .03em;
  transition: border-color .15s, background .15s;
}
.cs-btn:hover { border-color: var(--accent); background: #1a222b; }
.cs-btn.primary {
  border: 0;
  background: linear-gradient(180deg, #ffc558 0%, var(--accent) 60%, #d88f1d 100%);
  color: var(--accent-ink);
  font-weight: 700;
}
.cs-btn.primary:hover { filter: brightness(1.07); }
/* wersja wewnątrz #menu: musi przebić inline "#menu button" z index.html */
#menu.cs-ui .cs-btn {
  display: inline-block;
  margin: 0;
  font-size: .92rem;
  font-weight: 400;
  padding: .5em 1.2em;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
#menu.cs-ui .cs-btn:hover { border-color: var(--accent); background: #1a222b; }
#menu.cs-ui .cs-btn.primary {
  border: 0;
  background: linear-gradient(180deg, #ffc558 0%, var(--accent) 60%, #d88f1d 100%);
  color: var(--accent-ink);
  font-weight: 700;
}
#menu.cs-ui .cs-btn.primary:hover { filter: brightness(1.07); }

/* ------------------------------------------------------------ postęp ładowania */
#menu.cs-ui #progresswrap {
  height: 10px;
  margin-top: 1.2em;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
#menu.cs-ui #progressbar {
  background: linear-gradient(90deg, #d88f1d, #ffc558);
  box-shadow: 0 0 10px rgba(240, 168, 48, .55);
  border-radius: 6px;
}
#progresstext {
  display: none;
  margin-top: .5em;
  font-size: .85rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
#menu.cs-ui #statusline { color: var(--dim); opacity: 1; }
#menu.cs-ui #statusline.error { color: var(--bad); }

/* w trakcie ładowania chowamy sekcje drugorzędne: czysty ekran postępu */
#menu.cs-ui .card.booting #serverpanel,
#menu.cs-ui .card.booting #replays,
#menu.cs-ui .card.booting #howto,
#menu.cs-ui .card.booting #uifooter,
#menu.cs-ui .card.booting #replaybanner,
#menu.cs-ui .card.booting .cs-sectiontitle,
#menu.cs-ui .card.booting #form { display: none; }

/* ------------------------------------------------------------------- powtórki */
#replays { text-align: left; }
.cs-sectiontitle {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 1.5em 0 .55em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
}
.cs-sectiontitle::before,
.cs-sectiontitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}
.cs-sectiontitle::after { background: linear-gradient(90deg, var(--line), transparent); }
#replaylist { display: flex; flex-direction: column; gap: .4em; }
/* uwaga: selektory z #menu.cs-ui, bo inline "#menu button" z index.html ma
   specyficzność (1,0,1) i nadpisywałby klasowe reguły przycisków */
#menu.cs-ui .replayrow {
  display: flex;
  align-items: center;
  gap: .8em;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: .88rem;
  font-weight: 400;
  text-align: left;
  padding: .55em .8em;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#menu.cs-ui .replayrow:hover { border-color: var(--accent); background: #1a222b; }
.replayrow .rmap { font-weight: 700; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replayrow .rdate { color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }
.replayrow .rdur {
  flex: none;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(240, 168, 48, .35);
  border-radius: 6px;
  padding: .1em .45em;
  font-size: .8rem;
}
.replayrow .rplay { flex: none; color: var(--accent); font-size: .95em; }
#replays .empty { color: var(--dim); font-size: .85rem; text-align: center; }

/* baner deep-linku ?replay=<id> */
#replaybanner {
  border: 1px solid rgba(240, 168, 48, .5);
  background: linear-gradient(180deg, rgba(240, 168, 48, .1), rgba(240, 168, 48, .03));
  border-radius: 10px;
  padding: .9em 1em;
  margin: 0 0 1.1em;
}
#replaybanner .rb-title { font-weight: 700; letter-spacing: .05em; color: var(--accent); font-size: .8rem; text-transform: uppercase; margin-bottom: .35em; }
#replaybanner .rb-info { font-size: .92rem; margin-bottom: .7em; }
#replaybanner .rb-info span { color: var(--dim); }

/* ----------------------------------------------------------------- sterowanie */
#howto { display: flex; gap: .6em; text-align: left; }
#howto .col {
  flex: 1 1 0;
  min-width: 0;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7em .9em;
}
#howto h3 {
  margin: 0 0 .45em;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
#howto ul { margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--dim); }
#howto li { margin: .22em 0; }
#howto b { color: var(--ink); font-weight: 600; }
#howto kbd {
  font: 600 .78em ui-monospace, monospace;
  color: var(--ink);
  background: #1c242e;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: .08em .38em;
}

/* --------------------------------------------------------------------- stopka */
#uifooter {
  margin-top: 1.4em;
  padding-top: .9em;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  line-height: 1.5;
  color: rgba(232, 228, 216, .42);
}
#uifooter a { color: rgba(240, 168, 48, .7); text-decoration: none; }
#uifooter a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ overlay w grze */
#gameoverlay { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 8px); z-index: 15; display: flex; gap: .4em; align-items: flex-start; font-family: system-ui, sans-serif; }
#gameoverlay[hidden] { display: none; }
#gameoverlay .cs-btn {
  font-size: .78rem;
  padding: .35em .8em;
  background: rgba(11, 14, 17, .55);
  border-color: rgba(58, 69, 82, .6);
  backdrop-filter: blur(2px);
}
#ovtoggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(58, 69, 82, .6);
  background: rgba(11, 14, 17, .5);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
#ovbtns { display: flex; gap: .4em; opacity: .35; transition: opacity .2s; }
#gameoverlay:hover #ovbtns { opacity: 1; }
@media (hover: none) { /* mobile: przyciski schowane za małą ikonką */
  /* górny LEWY róg: wolny w natywnych layoutach touch silnika (in-game
     i team menu trzymają ikony od ~10% szerokości; prawy róg zajmuje
     przycisk tablicy wyników) — dowód: port/shots/ui-mobile-ingame.png */
  #gameoverlay {
    right: auto;
    left: calc(env(safe-area-inset-left, 0px) + 8px);
  }
  #ovtoggle { display: block; opacity: .55; }
  #ovbtns { display: none; }
  #gameoverlay.open #ovbtns { display: flex; opacity: 1; flex-direction: column; }
  #gameoverlay.open #ovtoggle { opacity: 1; }
  #gameoverlay .cs-btn { font-size: .9rem; padding: .55em 1em; }
}

/* ---------------------------------------- modal (netdown, koniec powtórki) */
#csmodal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 17, .88);
  font-family: system-ui, sans-serif;
  color: var(--ink);
}
#csmodal .box {
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6em 2em;
  max-width: min(430px, 88vw);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .6);
}
#csmodal h2 { margin: 0 0 .5em; font-size: 1.15rem; color: var(--accent); letter-spacing: .04em; }
#csmodal p { margin: 0 0 1.1em; font-size: .92rem; color: var(--dim); }
#csmodal .btns { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- responsywność */
@media (max-width: 480px) {
  #howto { flex-direction: column; }
  #menu.cs-ui #form { flex-direction: column; }
  /* w kolumnie flex-basis działa w pionie: bez "flex:none" input rósłby na wysokość */
  #menu.cs-ui input#nick { flex: none; width: 100%; box-sizing: border-box; }
  #menu.cs-ui button#play { width: 100%; padding: .7em; }
  #menu.cs-ui .replayrow .rdate { display: none; }
}
/* niski landscape (telefon poziomo w menu): ciaśniej, bez emblematu */
@media (max-height: 460px) {
  #menu.cs-ui .emblem { display: none; }
  #menu.cs-ui h1 { font-size: 1.3rem; }
  #menu.cs-ui p.sub { margin-bottom: .7em; }
  .cs-sectiontitle { margin-top: .9em; }
  #uifooter { margin-top: .8em; }
}