/*
 * MargoGuessr - interfejs w stylu klienta Margonem (nowy interfejs).
 * Okna: ramka z ciemnego drewna i srebra (ui/window-frame.png), treść na ciemnej skórze
 * (ui/leather-dark.jpg - tekstura redleather ze skórki redscale, przyciemniona), tytuły na płytkach
 * z czerwonym klejnotem (ui/title-plate.png), przyciski jak w kliencie (czarne z jasną obwódką, zielone i czerwone).
 * Układ pliku: zmienne, baza, header, okno, przyciski i pola, start, mapy i pinezki, gra, wynik,
 * podsumowanie, listy, lobby, online, responsywność.
 */

/* ---------- Zmienne ---------- */
:root {
  --bg: #0d0a09;
  --bg-2: #1c1a1e;
  --bg-3: #272325;
  --bg-4: #2c292a;
  --panel: rgba(28, 26, 30, 0.96);
  --border: #4a4546;
  --text: #dfd9bd;
  --text-2: #cac094;
  --title: #f5f5dc;
  --muted: #a39f95;
  --gold: #eddb5e;
  --gold-2: #d5bf74;
  --gold-3: #9a7a1f;
  --red: #f16462;
  --green: #4dc83c;
  --green-2: #1ae072;
  --header-h: 56px;
  --font: Arimo, Calibri, "Segoe UI", Arial, sans-serif;
  --font-display: "Cinzel", Georgia, serif;
  /* ramka metalowa nagłówka (z klienta) */
  --bevel-top: inset 0 1px 0 #2e3232, inset 0 2px 0 #97a1a5, inset 0 3px 0 #697072, inset 0 4px 0 #291b13;
  --bevel-bottom: inset 0 -2px 0 #0c0806, inset 0 -3px 0 #434849, inset 0 -4px 0 #aea1a1;
  /* płytka: ciemne pole z jasną ramką wewnętrzną */
  --plate-shadow: inset 0 0 0 1px #6b6868, inset 0 0 0 3px #0c0d0d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font);
}
html { height: 100%; }
body {
  /* ciemna skóra z czerwonym blaskiem u góry i winietą */
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(131, 31, 31, 0.32), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.75) 100%),
    url("ui/leather-dark.jpg") var(--bg);
  background-attachment: fixed;
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; }
.logo-text, h1, .result-title, .summary-total, .result-points { font-family: var(--font-display); }

/* Widoczny focus dla klawiatury */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input:focus-visible, select:focus-visible { outline-offset: 0; }

/* Pasek przewijania jak w kliencie */
* { scrollbar-width: thin; scrollbar-color: rgba(209, 210, 211, 0.52) transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(209, 210, 211, 0.52); border: 1px solid transparent; background-clip: padding-box; border-radius: 14px; }

/* ---------- Header + HUD ---------- */
.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: linear-gradient(#3b4040, #2e3232 45%, #202424);
  box-shadow: var(--bevel-top), var(--bevel-bottom), 0 6px 16px rgba(0, 0, 0, 0.6);
  z-index: 50;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--title); text-decoration: none; }
.logo:hover .logo-text { color: var(--gold); }
/* Klejnot z gwiazdą kompasu zamiast emoji */
.logo-icon {
  position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ff9e92, #b62323 48%, #4a0909);
  box-shadow: 0 0 0 2px #0c0806, 0 0 0 3px #aea1a1, 0 0 12px rgba(241, 100, 98, 0.55);
}
.logo-icon::after {
  content: ""; position: absolute; inset: 5px; background: var(--title);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.logo-text { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.05em; text-shadow: 0 2px 0 #000; transition: color 0.15s; }

.hud { margin-left: auto; display: flex; gap: 6px; }
.hud-item {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  padding: 3px 12px 4px; border-radius: 6px; border: 1px solid #000;
  background: linear-gradient(#0c0d0d, #1c1a1e);
  box-shadow: inset 0 0 0 1px #5e5b5b, inset 0 0 0 2px #0c0d0d;
}
.hud-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); line-height: 1.3; }
.hud-value { font-weight: 700; font-size: 0.95rem; line-height: 1.2; color: var(--title); font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; }
#hudScore { color: var(--gold); }

/* Plakietka edycji - docs/standards/edition-badge.md */
.edition-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}
.edition-badge[hidden] { display: none; }
@media (max-width: 430px) {
  .edition-badge { font-size: 0; padding: 3px 6px; }
  .edition-badge::before { content: attr(data-short); font-size: 0.6rem; letter-spacing: 0.06em; }
}

/* ---------- Okno (ramka z border-image, treść na skórze, tytuł na płytce) ---------- */
.screen { padding-top: var(--header-h); min-height: 100%; }

.win {
  position: relative;
  width: 100%;
  padding: 14px 16px 12px;
  border-style: solid;
  border-width: 32px 20px;
  border-image: url("ui/window-frame.png") 32 20 fill;
  background: url("ui/leather-dark.jpg") var(--bg-2);
  background-clip: padding-box;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}
.win-title {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%); z-index: 2;
  height: 28px; max-width: calc(100% + 30px); margin: 0; padding: 0 6px;
  border-style: solid; border-width: 0 51px; border-image: url("ui/title-plate.png") 0 51 fill repeat;
  font: 700 0.9rem/26px var(--font); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--title); text-shadow: 0 1px 1px #000, 0 0 6px rgba(0, 0, 0, 0.8);
  white-space: nowrap; pointer-events: none;
}

/* Ozdobnik: linia ze złotym romb */
.ornament {
  position: relative; width: min(380px, 70%); height: 14px; margin: 14px auto;
  background:
    linear-gradient(90deg, transparent, rgba(213, 191, 116, 0.75)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(270deg, transparent, rgba(213, 191, 116, 0.75)) right center / calc(50% - 16px) 1px no-repeat;
}
.ornament::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #ff9e92, #b62323 55%, #4a0909);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-2), 0 0 8px rgba(241, 100, 98, 0.6);
}

/* ---------- Przyciski i pola ---------- */
.btn {
  position: relative;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(#2c2a2b, #0a0909);
  border: 1px solid #0c0d0d;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #949293, inset 0 0 0 3px #0c0d0d;
  padding: 10px 18px;
  text-shadow: 0 0 1px #000, 0 1px 1px #000;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s, box-shadow 0.15s, color 0.15s;
}
.btn:hover:not(:disabled) { filter: brightness(1.2); color: #fff; box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-primary {
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, 0.16), transparent 50%), linear-gradient(to top, #12210d, #396b29);
  box-shadow: inset 0 0 1px 1px #cecece, inset 0 0 0 3px #0c0d0d;
}
.btn-primary:hover:not(:disabled) { box-shadow: inset 0 0 1px 1px #fff, inset 0 0 0 3px #0c0d0d, 0 0 12px rgba(77, 200, 60, 0.45); }
.btn-danger {
  color: #fff;
  background: linear-gradient(rgba(255, 255, 255, 0.12), transparent 50%), linear-gradient(to top, #310c0c, #831f1f);
  box-shadow: inset 0 0 1px 1px #cecece, inset 0 0 0 3px #0c0d0d;
}
.btn-ghost { background: rgba(0, 0, 0, 0.7); }
.btn-big { padding: 13px 36px; font-size: 1.05rem; letter-spacing: 0.03em; }

.error { color: var(--red); text-align: center; margin: 0; font-weight: 700; }

.field { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.03em; }
input, select {
  font: inherit; font-size: 0.95rem; color: var(--title);
  padding: 9px 12px; border: 1px solid #000; border-image: url("ui/input.png") 1 fill;
  background: #151316; min-width: 0;
}
select { color-scheme: dark; cursor: pointer; }
input::placeholder { color: #8a867d; }
#roomCodeInput { text-transform: uppercase; letter-spacing: 0.18em; }

/* ---------- Start ---------- */
.start-screen {
  display: flex; flex-direction: column; align-items: center; gap: 38px;
  padding-left: 16px; padding-right: 16px; padding-bottom: 56px;
}
.start-screen > .win, .start-screen > .play-options, .start-screen > .info-row { width: min(1040px, 100%); }

.hero { text-align: center; max-width: 720px; margin-top: 34px; }
.hero-kicker {
  margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-2);
  text-shadow: 0 1px 2px #000;
}
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1.12; font-weight: 800;
  background: linear-gradient(#fffbe0, #eddb5e 50%, #a8872c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(241, 100, 98, 0.35));
}
.hero-lead { margin: 0 auto; max-width: 600px; color: var(--text-2); line-height: 1.6; font-size: 1.05rem; text-shadow: 0 1px 2px #000; }
.hero-lead strong { color: var(--gold); }
.hero-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0; }
.hero-facts li {
  display: flex; flex-direction: column; align-items: center; min-width: 118px; padding: 7px 16px 8px; border-radius: 8px;
  background: linear-gradient(#0c0d0d, #1c1a1e); box-shadow: var(--plate-shadow);
}
.hero-facts b { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); }
.hero-facts span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* Karty trybów */
.modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mode-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px 14px 12px; border-radius: 8px; border: 1px solid #0c0d0d; cursor: pointer;
  background: linear-gradient(#2e2b2c, #1a181b); color: var(--text); font: inherit;
  box-shadow: inset 0 0 0 1px #5d5a58, inset 0 0 0 3px #0c0d0d;
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}
.mode-card:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d; }
.mode-card.selected {
  background: linear-gradient(rgba(237, 219, 94, 0.14), rgba(237, 219, 94, 0.02)), linear-gradient(#35302a, #1d1a17);
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px #0c0d0d, 0 0 18px rgba(237, 219, 94, 0.3);
}
.mode-card::before {
  content: "🗺️"; display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin-bottom: 4px;
  font-size: 1.5rem; border-radius: 8px;
  background: radial-gradient(circle at 50% 35%, #5a1515, #1d0707 80%);
  box-shadow: inset 0 0 0 1px #aea1a1, inset 0 0 0 3px #0c0806;
}
.mode-card[data-mode="classic"]::before { content: "⚔️"; }
.mode-card[data-mode="towns"]::before { content: "🏰"; }
.mode-card[data-mode="caves"]::before { content: "🕳️"; }
.mode-card[data-mode="zoom"]::before { content: "🔍"; }
.mode-card[data-mode="all"]::before { content: "🌍"; }
.mode-card.selected::after {
  content: "✔"; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 0.75rem; color: #fff; border-radius: 50%; background: linear-gradient(#4dc83c, #1d5314); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold);
}
.mode-card h3 { font-size: 1.02rem; color: var(--title); text-shadow: 0 1px 1px #000; }
.mode-card.selected h3 { color: var(--gold); }
.mode-card p { margin: 0; color: var(--text-2); font-size: 0.84rem; line-height: 1.45; }
.mode-card .mode-best { margin-top: auto; padding-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--gold); }
.mode-card .mode-best::before { content: "★ "; }

/* Sam / Online */
.play-options { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 28px; }
.play-card { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.play-card p { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.play-card .btn-big { margin-top: auto; }
.play-solo { background-image: linear-gradient(rgba(60, 120, 40, 0.16), transparent 60%), url("ui/leather-dark.jpg"); }
.play-solo .play-lead { font-size: 1rem; }
.play-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.play-perks li::before { content: "◆"; margin-right: 8px; color: var(--red); font-size: 0.7rem; }
.online-row { display: flex; gap: 10px; align-items: flex-end; }
.online-row .field { flex: 1; }
.online-row .btn { min-width: 128px; }

/* Ranking i punktacja */
.info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 28px; align-items: stretch; }
.leaderboard-sub { margin: 0 0 8px; text-align: center; font-size: 0.85rem; color: var(--text-2); }
.leaderboard-sub span { color: var(--gold); font-weight: 700; }
.rules ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.rules strong { color: var(--title); }
.rule-badge {
  flex: none; min-width: 58px; padding: 6px 4px; text-align: center; border-radius: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: #1b1405;
  background: linear-gradient(#fff2a6, #d5bf74 55%, #9a7a1f); box-shadow: 0 0 0 1px #000, 0 0 0 2px #aea1a1;
}
.rule-badge-2 { background: linear-gradient(#e0e5e6, #a4acae 55%, #697072); }
.rule-badge-neg { background: linear-gradient(#f9a19f, #d5604a 55%, #831f1f); color: #fff; }

/* ---------- Pan/zoom i pinezki ---------- */
.pz {
  position: relative; overflow: hidden; cursor: grab; touch-action: none;
  background: #000; user-select: none;
}
.pz.dragging { cursor: grabbing; }
.pz.clickable { cursor: crosshair; }
.pz-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pz-inner img { display: block; image-rendering: pixelated; pointer-events: none; }
.pz-overlay { position: absolute; inset: 0; pointer-events: none; }

.marker {
  position: absolute; width: 0; height: 0;
  transform: scale(var(--inv, 1));
}
.marker::before {
  content: ""; position: absolute; left: -12px; top: -34px; width: 24px; height: 24px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 3px solid var(--title); box-shadow: 0 0 0 1px #000, 0 3px 7px rgba(0, 0, 0, 0.7);
}
.marker-guess::before { background: radial-gradient(circle, #fff 0 3px, transparent 4px), linear-gradient(135deg, #ff8f86, #c0201f); }
.marker-answer::before { background: radial-gradient(circle, #fff 0 3px, transparent 4px), linear-gradient(135deg, #8ee67a, #23871a); }
.view-box {
  position: absolute; border: 3px solid var(--green);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(77, 200, 60, 0.6);
}
.guess-line { position: absolute; left: 0; top: 0; overflow: visible; }

/* ---------- Gra ---------- */
.game-screen { height: 100vh; position: relative; }
.view { position: absolute; inset: var(--header-h) 0 0 0; }
.view .pz { position: absolute; inset: 0; }
/* Cienka ramka krawędzi widoku - nie zasłania mapy */
.view::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px #0c0806, inset 0 0 0 3px #6b6868;
}
.loader {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--title); font-size: 1.05rem; z-index: 2; background: rgba(8, 6, 6, 0.78); text-shadow: 0 1px 2px #000;
}
.loader::before {
  content: ""; width: 38px; height: 38px; border-radius: 50%;
  border: 4px solid rgba(213, 191, 116, 0.22); border-top-color: var(--gold); animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.view-hint {
  position: absolute; left: 16px; bottom: 14px; margin: 0; font-size: 0.78rem; color: var(--text-2); z-index: 4;
  background: rgba(12, 13, 13, 0.82); padding: 4px 12px; border-radius: 6px; box-shadow: var(--plate-shadow); pointer-events: none;
}

/* Panel zgadywania: okno w prawym dolnym rogu */
.guess-panel {
  position: absolute; right: 12px; bottom: 6px; z-index: 10;
  width: 380px; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px 8px;
  transition: width 0.2s;
}
.guess-panel:hover, .guess-panel.expanded, .guess-panel:focus-within { width: min(660px, calc(100vw - 24px)); }
.guess-panel.expanded { width: min(1000px, calc(100vw - 24px)); }
.guess-search { position: relative; }
.guess-search input { width: 100%; padding-left: 40px; }
.guess-search::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 21px; height: 20px; margin-top: -10px; z-index: 1;
  background: url("ui/search-icon.png") center / contain no-repeat; pointer-events: none;
}
.suggestions {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 280px; overflow-y: auto; z-index: 20;
  margin: 0; padding: 5px; list-style: none; border-radius: 8px;
  background: #121011; box-shadow: var(--plate-shadow), 0 10px 26px rgba(0, 0, 0, 0.7);
}
.suggestions li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text);
  border-left: 3px solid transparent;
}
.suggestions li.active, .suggestions li:hover { background: linear-gradient(90deg, #4a1717, #2a1212); border-left-color: var(--gold); color: var(--title); }
.suggestions .size { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.guess-map {
  position: relative; height: 200px; border-radius: 4px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px #5e5b5b; transition: height 0.2s;
}
.guess-panel:hover .guess-map, .guess-panel:focus-within .guess-map { height: 340px; }
.guess-panel.expanded .guess-map { height: min(600px, calc(100vh - 300px)); }
.guess-map .pz { position: absolute; inset: 0; }
.guess-empty {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; margin: 0; display: grid; place-items: center;
  padding: 20px; text-align: center; color: var(--text-2); font-size: 0.9rem; line-height: 1.5;
}
.guess-actions { display: flex; gap: 8px; margin-bottom: 2px; }
.guess-actions .btn-primary { flex: 1; }

/* ---------- Wynik rundy: mapa po lewej, okno wyniku po prawej ---------- */
.result-screen { height: 100vh; display: flex; flex-direction: row; }
.result-map { flex: 1; position: relative; min-width: 0; box-shadow: inset 0 0 0 2px #0c0806, inset 0 0 0 3px #6b6868; }
.result-map .pz { position: absolute; inset: 0; }
.result-side {
  flex: none; width: min(470px, 40vw); display: flex; flex-direction: column; justify-content: center;
  padding: 10px 10px 10px 4px; overflow-y: auto;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 30%), url("ui/leather-dark.jpg") var(--bg);
}
.result-card { text-align: center; }
.result-title {
  margin: 0 0 6px; font-size: 1.7rem; font-weight: 800; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(237, 219, 94, 0.3);
}
.result-detail { margin: 0 0 12px; color: var(--text); line-height: 1.5; }
.result-path {
  margin: 0 0 12px; padding: 7px 12px; font-size: 0.82rem; color: var(--gold-2); line-height: 1.5; border-radius: 8px;
  background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(174, 161, 161, 0.25);
}
.score-bar {
  position: relative; height: 18px; margin: 4px 0 0; padding: 3px; border-radius: 9px; background: #060505;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #5e5b5b, inset 0 2px 5px #000; overflow: hidden;
}
.score-fill {
  height: 100%; width: 0; border-radius: 6px; transition: width 0.8s ease-out;
  background: linear-gradient(#fff2a6, #d5bf74 45%, #9a7a1f); box-shadow: 0 0 10px rgba(237, 219, 94, 0.55);
}
.score-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.55) calc(10% - 1px) 10%);
}
.result-points { font-size: 1.9rem; font-weight: 800; margin: 8px 0 14px; color: var(--title); text-shadow: 0 2px 0 #000; font-variant-numeric: tabular-nums; }
.result-points span { color: var(--gold); }
.result-card .room-ranking { margin-bottom: 14px; }

/* ---------- Podsumowanie ---------- */
.summary-screen { display: flex; flex-direction: column; align-items: center; padding: calc(var(--header-h) + 28px) 16px 56px; }
.summary-screen h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; text-align: center;
  background: linear-gradient(#fffbe0, #eddb5e 50%, #a8872c); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #000);
}
.summary-win { width: min(640px, 100%); margin-top: 20px; text-align: center; }
.summary-total { font-size: 3.2rem; font-weight: 800; margin: 6px 0 0; color: var(--gold); text-shadow: 0 3px 0 #000, 0 0 22px rgba(237, 219, 94, 0.35); font-variant-numeric: tabular-nums; }
.summary-total small { font-family: var(--font); font-size: 1rem; font-weight: 400; color: var(--text-2); text-shadow: none; }
.summary-best { color: var(--text-2); min-height: 1.2em; margin: 4px 0 14px; }
.summary-list { width: 100%; padding: 0; margin: 14px 0; list-style: none; counter-reset: r; text-align: left; }
.summary-list li {
  counter-increment: r; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.2);
}
.summary-list li::before {
  content: counter(r); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-weight: 800; font-size: 0.85rem; color: #1b1405; background: linear-gradient(#fff2a6, #d5bf74 60%, #9a7a1f); box-shadow: 0 0 0 1px #000;
}
.summary-list .name { flex: 1; min-width: 0; color: var(--title); font-weight: 700; }
.summary-list .miss { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.summary-list .pts { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.save-score { display: flex; gap: 10px; margin: 8px 0; }
.save-score input { flex: 1; }

/* ---------- Rankingi ---------- */
.leaderboard-list, .room-ranking { list-style: none; padding: 0; margin: 0; counter-reset: lb; }
.leaderboard-list li, .room-ranking li {
  counter-increment: lb; display: flex; gap: 10px; align-items: center;
  padding: 7px 12px; margin-bottom: 5px; border-radius: 8px; background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.2); color: var(--title);
}
.leaderboard-list li::before, .room-ranking li::before {
  content: counter(lb); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-weight: 800; font-size: 0.8rem; color: #e8e2c8; background: #38343a; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #6b6868;
}
.leaderboard-list li:nth-child(1)::before, .room-ranking li:nth-child(1)::before { color: #1b1405; background: linear-gradient(#fff2a6, #d5bf74 60%, #9a7a1f); }
.leaderboard-list li:nth-child(2)::before, .room-ranking li:nth-child(2)::before { color: #1a1d1e; background: linear-gradient(#f0f3f4, #aab2b4 60%, #6b7476); }
.leaderboard-list li:nth-child(3)::before, .room-ranking li:nth-child(3)::before { color: #240f04; background: linear-gradient(#f0b27a, #c07a3e 60%, #7c4217); }
.leaderboard-list li span:first-child, .room-ranking .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-list .pts, .room-ranking .pts { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leaderboard-list li.empty { color: var(--muted); justify-content: center; text-align: center; font-size: 0.9rem; }
.leaderboard-list li.empty::before { content: none; }
.room-ranking { width: 100%; margin: 0 auto 16px; text-align: left; }
.room-ranking .detail { color: var(--muted); font-size: 0.8rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-ranking li.me { box-shadow: 0 0 0 1px var(--gold-2), inset 0 0 0 1px rgba(237, 219, 94, 0.3); background: rgba(237, 219, 94, 0.1); }
.room-final { margin-top: 12px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(213, 191, 116, 0.3); }

/* ---------- Lobby ---------- */
.lobby-screen { display: flex; flex-direction: column; align-items: center; padding: calc(var(--header-h) + 40px) 16px 56px; }
.lobby-win { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; }
.lobby-win h1 { font-size: 1.5rem; color: var(--title); font-weight: 800; text-shadow: 0 2px 0 #000; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.room-code {
  font-family: var(--font); font-weight: 700; letter-spacing: 0.28em; padding: 4px 6px 4px 18px; font-size: 1.7rem; color: var(--gold);
  border-radius: 8px; background: linear-gradient(#0c0d0d, #1c1a1e); box-shadow: var(--plate-shadow), 0 0 14px rgba(237, 219, 94, 0.2);
}
.lobby-hint, .lobby-wait { color: var(--text-2); margin: 0; text-align: center; }
.lobby-settings { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; width: 100%; }
.lobby-settings .field { flex: 1 1 200px; }
.lobby-settings select { width: 100%; }
.player-list { list-style: none; padding: 0; margin: 0; width: 100%; }
.player-list li {
  display: flex; gap: 8px; align-items: center; padding: 9px 12px; margin-bottom: 6px; color: var(--title); font-weight: 700;
  border-radius: 8px; background: rgba(0, 0, 0, 0.38); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.2);
}
.player-list li::before { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.player-list li.offline::before { background: #777; box-shadow: none; }
.player-list li.offline, .room-status li.offline { opacity: 0.5; }
.tag {
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 5px; background: rgba(237, 219, 94, 0.14); color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(237, 219, 94, 0.5);
}

/* ---------- Rozgrywka online ---------- */
.room-status {
  position: absolute; left: 14px; top: calc(var(--header-h) + 12px); z-index: 5; min-width: 150px;
  list-style: none; margin: 0; padding: 6px 12px 8px; border-radius: 8px;
  background: var(--panel); box-shadow: var(--plate-shadow), 0 6px 14px rgba(0, 0, 0, 0.5); font-size: 0.85rem;
}
.room-status::before {
  content: "Gracze"; display: block; margin-bottom: 4px; padding-bottom: 3px; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-2); border-bottom: 1px solid rgba(213, 191, 116, 0.35);
}
.room-status li { padding: 2px 0; color: var(--muted); }
.room-status li.done { color: var(--green-2); font-weight: 700; }
.wait-overlay {
  position: absolute; left: 50%; top: calc(var(--header-h) + 14px); transform: translateX(-50%); z-index: 6; text-align: center;
  padding: 10px 20px; border-radius: 8px; background: var(--panel); color: var(--gold); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d, 0 6px 16px rgba(0, 0, 0, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { filter: brightness(1.25); } }
.hud-timer.urgent .hud-value { color: var(--red); animation: pulse 0.8s ease-in-out infinite; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
  max-width: calc(100vw - 32px); padding: 11px 22px; border-radius: 8px; text-align: center;
  background: #1c1a1e; color: var(--title);
  box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d, 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ---------- Ujemne punkty (klasa .negative nadawana w JS) ---------- */
/* .negative na: #resultPoints lub .result-points, .summary-total lub #summaryTotal, li w rankingach/liście podsumowania (albo na .pts), .score-bar / #scoreFill */
.negative, .negative .pts, .pts.negative, .result-points.negative span, .result-points span.negative,
.summary-total.negative, .summary-total.negative span, .summary-total span.negative,
.leaderboard-list li.negative .pts, .room-ranking li.negative .pts, .summary-list li.negative .pts { color: var(--red); }
.result-points.negative, .summary-total.negative { text-shadow: 0 2px 0 #000, 0 0 18px rgba(241, 100, 98, 0.35); }
.summary-list li.negative, .room-ranking li.negative { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(241, 100, 98, 0.45); }
.score-bar.negative { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #8b2a28, inset 0 2px 5px #000, 0 0 10px rgba(241, 100, 98, 0.25); }
.score-fill.negative, .score-bar.negative .score-fill { background: linear-gradient(#ff9a97, #f16462 45%, #8b1f1d); box-shadow: 0 0 10px rgba(241, 100, 98, 0.55); }

/* ---------- Responsywność ---------- */
@media (max-width: 980px) {
  .modes { grid-template-columns: repeat(3, 1fr); }
  .result-side { width: min(420px, 44vw); }
}

@media (max-width: 760px) {
  .play-options, .info-row { grid-template-columns: 1fr; }
  .result-screen { flex-direction: column; height: auto; min-height: 100vh; }
  .result-map { flex: none; height: 44vh; min-height: 260px; }
  .result-side { width: 100%; flex: 1; overflow: visible; padding: 4px 6px 12px; background: url("ui/leather-dark.jpg") var(--bg); }
}

@media (max-width: 640px) {
  .app-header { gap: 4px; padding: 0 10px; }
  .logo { gap: 7px; }
  .logo-text { font-size: 0.98rem; letter-spacing: 0.02em; }
  .logo-icon { width: 22px; height: 22px; }
  .logo-icon::after { inset: 4px; }
  .hud-mode { display: none; }
  .hud { gap: 4px; }
  .hud-item { min-width: 0; padding: 2px 8px 3px; }
  .hud-label { font-size: 0.52rem; }
  .hud-value { font-size: 0.85rem; }

  /* Okna: cieńsza ramka, ta sama grafika (border-image skaluje się do szerokości) */
  .win { border-width: 24px 15px; padding: 10px 10px 8px; }
  .win-title { top: -22px; height: 26px; font-size: 0.78rem; line-height: 24px; border-width: 0 40px; border-image-slice: 0 51 fill; }
  .start-screen { gap: 34px; padding-left: 8px; padding-right: 8px; }
  .hero { margin-top: 18px; }
  .hero-facts li { min-width: 0; flex: 1; padding: 6px 8px 7px; }
  .modes { grid-template-columns: 1fr; gap: 8px; }
  .mode-card {
    display: grid; grid-template-columns: 46px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 10px 12px;
  }
  .mode-card::before { grid-row: 1 / span 3; margin: 0; }
  .mode-card .mode-best { padding-top: 2px; margin-top: 0; }
  .online-row { flex-wrap: wrap; }
  .online-row .field { flex: 1 1 130px; }
  .online-row .btn { flex: 1 1 100%; }
  .save-score { flex-wrap: wrap; }
  .summary-total { font-size: 2.6rem; }

  .guess-panel, .guess-panel:hover, .guess-panel:focus-within, .guess-panel.expanded { left: 4px; right: 4px; bottom: 4px; width: auto; padding: 8px 8px 4px; gap: 6px; }
  .guess-map, .guess-panel:hover .guess-map { height: 170px; }
  .guess-panel:focus-within .guess-map, .guess-panel.expanded .guess-map { height: 38vh; }
  .view-hint { display: none; }
  .room-status { left: 8px; top: calc(var(--header-h) + 8px); font-size: 0.75rem; padding: 4px 8px 6px; min-width: 120px; }
  .wait-overlay { top: auto; bottom: 424px; width: calc(100vw - 24px); }
  .result-title { font-size: 1.45rem; }
}

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