/*
 * 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; }
/* Link do strony z listą gier (gra pod podścieżką games.vigellal.ovh/margoguessr) */
/* Prawa strona nagłówka: „Wszystkie gry” i nick (profile.js) - ten sam wygląd przycisków; w grze ustępuje HUD-owi */
.header-nav { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-header:has(.hud:not([hidden])) .header-nav { display: none; }
.hub-link, .nick-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; max-width: 200px; padding: 0 12px; border: 0; border-radius: 4px;
  font: 700 0.84rem var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  color: var(--text-2); text-decoration: none; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px #6b6868, inset 0 0 0 3px #0c0d0d;
}
.hub-link:hover, .hub-link:focus-visible, .nick-chip:hover, .nick-chip:focus-visible, .nick-chip[aria-expanded="true"] {
  color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d;
}
.hub-link-ico { font-size: 1rem; line-height: 1; }
.hub-link[hidden] { display: none; }
/* W trakcie gry na wąskim ekranie miejsce w nagłówku zajmuje HUD */
@media (max-width: 560px) {
  .hub-link-text { display: none; } /* na telefonie sama ikona listy gier, obok jest nick */
  .hub-link, .nick-chip { padding: 0 10px; }
  .nick-chip { max-width: 130px; }
}
@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; }
/* Wygląd pól, list rozwijanych, checkboxów i zakładek: controls.css (ładowany po stylach modułów) */
input, select { min-width: 0; }
#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 > .start-grid { width: min(1040px, 100%); }

.hero { text-align: center; max-width: 720px; margin-top: 22px; }
.hero-kicker {
  margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-2);
  text-shadow: 0 1px 2px #000;
}
.hero h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1.12; font-weight: 800; margin-bottom: 10px;
  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: 560px; color: var(--text-2); line-height: 1.5; font-size: 0.98rem; text-shadow: 0 1px 2px #000; }
.hero-lead strong { color: var(--gold); }
.start-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.start-tools .btn { padding: 8px 20px; font-size: 0.9rem; }

/* Karty trybów: ikona, nazwa, widok i pula, rekord. Kliknięcie otwiera okno trybu (startui.js) */
.win-modes .modes-hint { margin: 0 0 12px; text-align: center; font-size: 0.85rem; color: var(--muted); }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* 4 poziomy trudności w jednym rzędzie */
@media (max-width: 1000px) { .modes { grid-template-columns: repeat(2, 1fr); } }
.mode-card {
  position: relative; display: grid; grid-template-columns: 46px 1fr; align-content: center; column-gap: 12px; row-gap: 1px;
  text-align: left; padding: 12px 14px; 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);
}
/* Ikona trybu: kółko z emoji; ten sam znacznik w karcie i w oknie trybu */
.mode-ico {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; 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-ico::before { content: "🗺️"; }
.mode-ico[data-mode="classic"]::before { content: "⚔️"; }
.mode-ico[data-mode="zoom"]::before { content: "🔍"; }
.mode-ico[data-mode="all"]::before { content: "🌍"; }
.mode-card .mode-ico { grid-row: 1 / span 2; align-self: center; }
.mode-card.selected::after {
  content: "✔"; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; display: grid; place-items: center;
  font-size: 0.68rem; 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 { align-self: end; padding-right: 18px; font-size: 1rem; line-height: 1.2; color: var(--title); text-shadow: 0 1px 1px #000; }
.mode-card.selected h3 { color: var(--gold); }
.mode-card .mode-meta { align-self: start; margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.mode-card .mode-best { grid-column: 1 / -1; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(174, 161, 161, 0.2); font-size: 0.78rem; font-weight: 700; color: var(--gold); }
.mode-card .mode-best::before { content: "★ "; }

/* Zwarte karty gier (Wyzwanie dnia, Trasa, Seria, Online) w siatce 2 kolumn */
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 28px; align-items: stretch; }
.start-grid > .win { display: flex; flex-direction: column; min-width: 0; }
.play-card { gap: 12px; }
.play-card p { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.online-row { display: flex; gap: 10px; align-items: flex-end; }
.online-row .field { flex: 1; }
.online-row .btn { min-width: 128px; }

/* Okno „Ranking i zasady” (zakładki: startui.js) */
.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; }
.leaderboard-sub small { color: var(--muted); font-size: 0.78rem; }
.info-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.info-tab {
  padding: 7px 20px; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--text-2); background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(174, 161, 161, 0.3);
}
.info-tab:hover { color: #fff; }
.info-tab.active { color: #1b1405; background: linear-gradient(#fff2a6, #d5bf74 60%, #9a7a1f); box-shadow: 0 0 0 1px #000; }
.info-panel { width: 100%; max-width: 820px; margin: 0 auto; }
.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: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.8)), url("ui/leather-dark.jpg") #0d0b0c;
  user-select: none;
}
.pz.dragging { cursor: grabbing; }
.pz.clickable { cursor: crosshair; }
.pz-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* Ramka mapy w stylu okien klienta; grubość dzielona przez zoom (--inv), więc na ekranie zawsze taka sama */
.pz-inner img {
  display: block; image-rendering: pixelated; pointer-events: none;
  box-shadow:
    0 0 0 calc(1px * var(--inv, 1)) #0c0806,
    0 0 0 calc(2px * var(--inv, 1)) #d8cfc4,
    0 0 0 calc(5px * var(--inv, 1)) #8a7346,
    0 0 0 calc(6px * var(--inv, 1)) #3a2a18,
    0 0 0 calc(7px * var(--inv, 1)) #aea1a1,
    0 0 0 calc(8px * var(--inv, 1)) #0c0806,
    0 calc(4px * var(--inv, 1)) calc(22px * var(--inv, 1)) calc(8px * var(--inv, 1)) rgba(0, 0, 0, 0.85);
}
.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); }
/* Celownik w środku widoku rundy (stąd liczona jest odległość pinezki) */
.marker-center::before {
  left: -20px; top: -20px; width: 34px; height: 34px; border-radius: 50%; transform: none;
  border: 3px solid var(--gold, #e0b45a); background: radial-gradient(circle, #fff 0 2px, var(--gold, #e0b45a) 3px 4px, rgba(0, 0, 0, 0.25) 5px);
  box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000, 0 0 12px 2px rgba(0, 0, 0, 0.75);
}
.marker-center::after {
  content: ""; position: absolute; left: -34px; top: -34px; width: 68px; height: 68px;
  --c: var(--gold, #e0b45a);
  background:
    linear-gradient(var(--c), var(--c)) left center / 15px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) right center / 15px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) center top / 3px 15px no-repeat,
    linear-gradient(var(--c), var(--c)) center bottom / 3px 15px no-repeat;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
}
.marker-center { animation: center-pulse 2.4s ease-in-out infinite; }
@keyframes center-pulse { 50% { opacity: 0.55; } }
.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; }
/* Lista nad polem w panelu gry nie może wchodzić pod nagłówek (panel rośnie przy fokusie) */
.guess-panel .suggestions { max-height: clamp(120px, calc(100vh - 560px), 280px); }
@media (max-width: 640px) { .guess-panel .suggestions { max-height: clamp(110px, calc(62vh - 180px), 280px); } }

.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(500px, 42vw); display: flex; flex-direction: column;
  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 { margin: auto 0; text-align: center; } /* auto: karta wyśrodkowana, a gdy wyższa niż ekran - przewijana od góry */
.result-title {
  margin: 0 0 6px; font-size: 1.85rem; font-weight: 800; line-height: 1.2; color: var(--gold);
  text-shadow: 0 2px 0 #000, 0 0 16px rgba(237, 219, 94, 0.3); overflow-wrap: anywhere;
}
/* Barwa nagłówka wg wyniku (data-tone ustawia showResult / decorateResult) */
.result-title[data-tone="good"] { color: var(--green-2); text-shadow: 0 2px 0 #000, 0 0 16px rgba(26, 224, 114, 0.35); }
.result-title[data-tone="miss"] { color: #f5aa50; text-shadow: 0 2px 0 #000, 0 0 16px rgba(245, 170, 80, 0.3); }
.result-title[data-tone="bad"] { color: var(--red); text-shadow: 0 2px 0 #000, 0 0 16px rgba(241, 100, 98, 0.35); }
.result-detail { margin: 0 0 12px; color: var(--text); line-height: 1.5; }
/* Przycisk dalej przyklejony do dołu panelu (nad nim emotki w pokoju) - zawsze w zasięgu, także przy długim rankingu */
.result-actions {
  position: sticky; bottom: 0; z-index: 3; margin: 0 -8px -6px; padding: 12px 8px 6px;
  background: linear-gradient(rgba(24, 21, 22, 0), rgba(24, 21, 22, 0.96) 34%);
}
.result-actions .btn { width: 100%; }
.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; }
/* Po zapisie (także automatycznym z nickiem, profile.js) zamiast pola i przycisku: „✓ Zapisano w rankingu jako …” */
.save-score.saved input, .save-score.saved button { display: none; }
.save-status { flex: 1; margin: 0; padding: 9px 12px; border-radius: 4px; text-align: center; font-weight: 700; color: #9fe58f;
  background: rgba(20, 50, 14, 0.55); box-shadow: inset 0 0 0 1px #3f7a2f, inset 0 0 0 3px #0c0d0d; }
.save-status strong { color: #fff; }

/* ---------- 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) {
  .result-side { width: min(420px, 44vw); }
}

@media (max-width: 760px) {
  .start-grid { grid-template-columns: 1fr; }
  .modes { grid-template-columns: repeat(2, 1fr); }
  .result-screen { flex-direction: column; height: auto; min-height: 100vh; }
  .result-map { flex: none; height: 36vh; min-height: 220px; }
  .result-side { width: 100%; flex: 1; overflow: visible; padding: 2px 6px 0; background: url("ui/leather-dark.jpg") var(--bg); }
  .result-card { margin: 0; }
  .result-actions { margin-bottom: -2px; padding-bottom: 8px; }
}

@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 { max-width: 124px; }
  .hud-mode .hud-value { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Pokój online / modyfikatory (HUD z mnożnikiem): logo bez napisu (zostaje klejnot), żeby HUD miał miejsce w jednej linii */
  .app-header:has(#hudMultBox:not([hidden])) .logo-text { display: none; }
  .hud { gap: 4px; min-width: 0; }
  .hud-item { min-width: 0; padding: 2px 7px 3px; }
  .hud-label { font-size: 0.52rem; }
  .hud-value { font-size: 0.85rem; white-space: nowrap; }

  /* 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: 12px; }
  .modes { gap: 8px; }
  /* Karta trybu w dwóch kolumnach: ikona nad nazwą, zwarta */
  .mode-card { grid-template-columns: 1fr; justify-items: start; row-gap: 3px; padding: 10px 10px 8px; }
  .mode-card .mode-ico { grid-row: auto; width: 36px; height: 36px; font-size: 1.15rem; margin-bottom: 2px; }
  .mode-card h3 { align-self: start; padding-right: 0; font-size: 0.92rem; }
  .mode-card .mode-meta { font-size: 0.72rem; }
  .mode-card .mode-best { width: 100%; margin-top: 4px; font-size: 0.72rem; }
  .mode-card.selected::after { top: 6px; right: 6px; }
  .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 { bottom: var(--guess-panel-h, 0px); } /* widok nad zwiniętym panelem (app.js: trackGuessPanel) */
  .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.5rem; margin-bottom: 4px; }
  .result-detail { margin-bottom: 8px; font-size: 0.92rem; line-height: 1.4; }
  .result-path { margin-bottom: 8px; padding: 5px 8px; font-size: 0.78rem; line-height: 1.4; }
  .result-points { margin: 4px 0 8px; font-size: 1.6rem; }
  .result-card .room-ranking { margin-bottom: 8px; }
}

/* HUD pokoju na średnich ekranach: bez napisu logo i „Mapa” skrócone do „M”, żeby nagłówek się nie przepełniał */
@media (max-width: 900px) {
  .app-header:has(#hudMultBox:not([hidden])) .logo-text { display: none; }
  .hud-w { display: none; }
  .hud-map { white-space: nowrap; }
}
/* HUD na telefonie: tryb tylko gdy jest miejsce, plakietka edycji znika na bardzo wąskich ekranach */
@media (max-width: 480px) {
  .hud-mode { display: none; }
}
@media (max-width: 360px) {
  .edition-badge { display: none; }
}

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

/* ---------- Podpowiedzi za punkty (gra solo) ---------- */
.hint-list[hidden], .hint-menu[hidden], .hint-wrap[hidden], .result-hints[hidden] { display: none; }
.hint-list {
  display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 6px 8px; list-style: none; border-radius: 6px;
  background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(213, 191, 116, 0.3);
  font-size: 0.82rem; line-height: 1.4; color: var(--gold-2);
}
.hint-list li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hint-list li::before { content: "◆"; flex: none; font-size: 0.7rem; color: var(--gold); }
.hint-list li > span:first-child { flex: 1; min-width: 0; }
.hint-cost { flex: none; color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hint-wrap { position: relative; }
.hint-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: min(300px, calc(100vw - 40px));
  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);
}
.hint-menu button {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  border-left: 3px solid transparent; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.hint-menu button:hover:not(:disabled), .hint-menu button:focus-visible {
  background: linear-gradient(90deg, #4a1717, #2a1212); border-left-color: var(--gold); color: var(--title); outline: none;
}
.hint-menu button:disabled { opacity: 0.4; cursor: default; }
.result-hints {
  margin: 0 0 12px; padding: 7px 12px; font-size: 0.82rem; color: var(--red); line-height: 1.5; border-radius: 8px;
  background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(241, 100, 98, 0.35);
}
@media (max-width: 640px) {
  .hint-list { gap: 2px; padding: 4px 6px; font-size: 0.74rem; line-height: 1.3; }
  /* Podpowiedzi zabierają miejsce, więc mapa panelu (gdy nie jest aktywna) jest odrobinę niższa */
  .guess-panel:not(:focus-within):not(.expanded) .hint-list:not([hidden]) ~ .guess-map { height: 130px; }
  .guess-actions .btn { padding-left: 12px; padding-right: 12px; }
}