/* ==========================================================================
   eDeskovky hub — app.css
   Built on the family design system in STYLE_GUIDE.md §2 / §4 / §5.
   --------------------------------------------------------------------------
   The base patterns (tokens, topbar, hero, card, pill, btn, ctrl, badge,
   note, details, info-tip, checkbox-row, flash-banner, mobile menu) are
   shared with every other site in the family. Hub-specific blocks live
   under "Hub feature blocks" at the bottom.
   ========================================================================== */


/* --- Design tokens --------------------------------------------------------- */
:root {
  --bg0: #0b1020;
  --bg1: #0f1733;
  --card: rgba(255,255,255,0.07);
  --card2: rgba(255,255,255,0.10);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --muted2: rgba(255,255,255,0.55);

  --accent: #7c5cff;
  --accent2: #33d1ff;
  --ok: #40d47e;
  --warn: #ffcc66;
  --err: #ff6b6b;

  --shadow: 0 12px 34px rgba(0,0,0,0.35);
  --ring: 0 0 0 3px rgba(124,92,255,0.25);
  --radius: 18px;
  --radius2: 12px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: transparent;
  position: relative;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(124,92,255,0.35), transparent 60%),
    radial-gradient(900px 600px at 92% 10%, rgba(51,209,255,0.22), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }


/* --- Page envelope (§4.1) -------------------------------------------------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 22px 18px 56px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-width: 0; }
.brand-logo-wrap { display: inline-flex; flex: 0 0 auto; }
.brand-logo {
  height: 44px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}
.brand-text { min-width: 0; }
.brand h1 { margin: 0 0 4px; font-size: 14px; letter-spacing: 0.2px; }
.brand .sub { margin: 0; color: var(--muted2); font-size: 12px; }

/* a11y helper: visually hidden but discoverable by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Inline umbrella wordmark (§1.3 / §4.1). Not used on the hub itself, but
   kept here so other sites copying app.css get the styling. */
.brand-domain {
  margin-left: 10px;
  font-size: 12px;
  background: linear-gradient(135deg, #b1a3ff 0%, #82d8ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.brand-domain::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 8px rgba(124,92,255,0.55);
  vertical-align: middle;
  -webkit-text-fill-color: initial;
}

.topbar nav.nav-desktop { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }


/* --- Hero + grid (§4.2) ---------------------------------------------------- */
.hero { margin-top: 18px; padding: 18px 18px 10px; }
.hero h2 {
  margin: 8px 0 6px;
  font-size: clamp(28px, 4vw, 54px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.04em;
  max-width: 760px;
}
.hero p { margin: 0; color: var(--muted); line-height: 1.5; max-width: 70ch; }

.grid { margin-top: 18px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 16px; }
@media (max-width: 940px) { .grid { grid-template-columns: 1fr; } }

.row { display: grid; gap: 10px; }
.row.cols2 { grid-template-columns: 1fr 1fr; }
.row.cols3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .row.cols2 { grid-template-columns: 1fr; }
  .row.cols3 { grid-template-columns: 1fr; }
}


/* --- Cards (§4.3) ---------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  overflow: visible;
  position: relative;
  z-index: 0;
}
.card:hover { z-index: 20; }
.card .hd { padding: 16px 16px 0; }
.card .hd h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.86);
  text-transform: uppercase;
}
.card .bd { padding: 14px 16px 16px; }


/* --- Pills (§4.4) ---------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 13px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
button.pill { font: inherit; line-height: 1; cursor: pointer; }
.pill:hover { transform: translateY(-1px); background: rgba(255,255,255,0.06); }
.pill[aria-current="page"] {
  background: rgba(124,92,255,0.16);
  border-color: rgba(124,92,255,0.35);
  color: var(--text);
}
.pill.pill-network {
  background: rgba(51,209,255,0.14);
  border-color: rgba(51,209,255,0.28);
  color: rgba(255,255,255,0.90);
}
.pill.pill-network:hover {
  background: rgba(51,209,255,0.20);
  border-color: rgba(51,209,255,0.40);
}
.pill.pill-donate {
  background: rgba(124,92,255,0.14);
  border-color: rgba(124,92,255,0.30);
  color: rgba(255,255,255,0.92);
}
.pill.pill-donate:hover {
  background: rgba(124,92,255,0.22);
  border-color: rgba(124,92,255,0.45);
}


/* --- Buttons (§4.5) -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(124,92,255,0.95), rgba(51,209,255,0.85));
  color: #0b1020;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

.btn.btn-inline { width: auto; padding: 10px 16px; }


/* --- Form controls (§4.6) -------------------------------------------------- */
label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.ctrl {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ctrl:focus { box-shadow: var(--ring); border-color: rgba(124,92,255,0.55); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }


/* --- Status / badge / KPI / note (§4.7) ----------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  width: fit-content;
}
.badge-fio {
  border-color: rgba(51,209,255,0.32);
  background: rgba(51,209,255,0.10);
  color: rgba(220,242,255,0.92);
}
.badge-manual {
  border-color: rgba(124,92,255,0.36);
  background: rgba(124,92,255,0.12);
  color: rgba(229,222,255,0.92);
}
.kpi {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
}
.kpi .big { font-size: 22px; font-weight: 800; letter-spacing: -0.2px; }
.note { font-size: 12px; color: var(--muted2); line-height: 1.5; margin-top: 10px; }
.note + .note { margin-top: 8px; }
.note a { color: rgba(220,242,255,0.92); border-bottom: 1px dashed rgba(255,255,255,0.30); }
.note a:hover { border-bottom-color: rgba(255,255,255,0.55); }
.status {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.12);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.status.ok { border-color: rgba(64,212,126,0.35); }
.status.warn { border-color: rgba(255,204,102,0.35); }
.status.err { border-color: rgba(255,107,107,0.35); }


/* --- Disclosure (§4.8) — used by FAQ -------------------------------------- */
details {
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  padding: 12px 14px;
}
summary {
  cursor: pointer;
  color: rgba(255,255,255,0.92);
  font-weight: 650;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "▸";
  flex: 0 0 auto;
  color: rgba(255,255,255,0.70);
  transform: rotate(0deg);
  transition: transform .14s ease, color .14s ease;
}
details[open] summary::after { transform: rotate(90deg); color: rgba(255,255,255,0.88); }
details > p, details > div { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }


/* --- Tooltip (§4.9) -------------------------------------------------------- */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.80);
  font-size: 11px;
  line-height: 1;
  cursor: help;
  user-select: none;
  position: relative;
  z-index: 30;
  transform: translateY(-0.5px);
}
.info-tip:hover {
  border-color: rgba(124,92,255,0.45);
  background: rgba(124,92,255,0.14);
  color: rgba(255,255,255,0.92);
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 40;
  width: max-content;
  max-width: min(360px, calc(100vw - 40px));
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,28,0.92);
  color: rgba(255,255,255,0.90);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
  backdrop-filter: blur(10px);
  line-height: 1.35;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.info-tip:hover::after { opacity: 1; }


/* --- Flash banner (§4.11) -------------------------------------------------- */
.flash-banner {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,107,107,0.45);
  background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(255,204,102,0.10));
  color: rgba(255,231,225,0.96);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--shadow);
  text-align: center;
}
.flash-banner.is-ok {
  border-color: rgba(64,212,126,0.45);
  background: linear-gradient(135deg, rgba(64,212,126,0.18), rgba(51,209,255,0.10));
  color: rgba(225,255,238,0.96);
}


/* --- Mobile hamburger menu (§5.1) ----------------------------------------- */
.nav-mobile-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  min-width: 44px;
}
.hamburger {
  width: 18px;
  height: 14px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger > span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 1px 0 rgba(0,0,0,0.20);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(7px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.mobile-menu-overlay.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 9991;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,28,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .14s ease, opacity .14s ease;
  max-height: calc(100vh - 24px);
  overflow: auto;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; }
.mobile-menu-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.mobile-menu-title { font-weight: 900; letter-spacing: -0.02em; font-size: 15px; }
.mobile-menu-bd { padding: 12px; display: grid; gap: 10px; }
.mobile-menu-link { width: 100%; justify-content: space-between; }
.mobile-menu-sep { height: 1px; background: rgba(255,255,255,0.10); margin: 2px 0; }
html.menu-open, body.menu-open { overflow: hidden; }

@media (max-width: 720px) {
  .topbar nav.nav-desktop { display: none; }
  .nav-mobile-btn { display: inline-flex; }
}
@media (min-width: 721px) { .nav-mobile-btn { display: none; } }


/* ==========================================================================
   Hub feature blocks
   ========================================================================== */


/* --- Home: hero + game cards (home-) -------------------------------------- */
.home-hero {
  padding-top: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.home-hero h2 { margin: 0 auto; max-width: 760px; }
.home-hero p { margin: 0 auto; }
.home-hero-logo {
  display: block;
  width: min(640px, 92%);
  margin: 6px auto 8px;
  line-height: 0;
}
.home-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.50));
}

.games-list {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .games-list { grid-template-columns: 1fr; } }

.game-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 22px 24px;
  gap: 12px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.game-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124,92,255,0.45);
  background: rgba(124,92,255,0.08);
}
.game-card:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
/* Icon slot. The three game icons have wildly different aspect ratios
   (Pubkvíz portrait ~0.7, Hudební Kvíz square ~1.0, Zasvěcenec
   landscape ~1.25). The slot is a fixed bounding box that just centers
   the icon — every icon scales to fit without distorting.

   Two intentional design decisions:
   * Asymmetric internal padding (more at the bottom). The Pubkvíz
     lightbulb is the tallest icon and fills the slot's height
     completely. Without bottom padding the icon's foot lands on the
     title below and looks like it's overlapping. The asymmetric
     padding leaves a clean ~14 px gap between the rendered icon's
     bottom edge and the title.
   * No drop-shadow filter on the icon. drop-shadow renders outside
     the image bounds (following the alpha shape), which on the
     portrait Pubkvíz icon spilled into the title. The card already
     has its own backdrop + shadow, that's enough depth. */
.game-card-icon {
  margin: 0 auto 2px;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  padding: 6px 6px 14px;
  box-sizing: border-box;
}
/* Both <picture> and <img> are stretched to fill the slot's content
   area, and `object-fit: contain` does the aspect-preserving fit +
   centering. Earlier attempts using max-width/max-height percentages
   on the img don't work reliably here: <picture> has no explicit
   height, so percentage heights on its <img> child silently fall back
   to auto and the image overflows the slot vertically (e.g. the
   portrait Pubkvíz icon rendered at 100×145 inside a 100×92 box).
   Forcing definite 100%/100% on every level avoids that quirk. */
.game-card-icon picture {
  display: block;
  width: 100%;
  height: 100%;
}
.game-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Zasvěcenec uses its full topbar wordmark as the card icon, which is
   landscape (~1.25). At the default 112×112 slot the wordmark caps on
   width and only fills ~80 % of the slot height — visually much
   smaller than the square Hudební Kvíz mark next to it. A wider slot
   lets the wordmark render larger and reach a comparable visual weight
   without needing to crop the artwork. */
.game-card[data-game="zasvecenec"] .game-card-icon {
  width: 132px;
}
.game-card-name {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.game-card-tagline {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  min-height: 2.9em;
}
.game-card-url {
  display: inline-block;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
  word-break: break-all;
}

.home-footer {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.home-footer a { display: inline-flex; }


/* --- About: principles grid + FAQ (about- / faq-) ------------------------- */
.about-stack { display: grid; gap: 16px; margin-top: 18px; }

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .principles { grid-template-columns: 1fr; } }
.principle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.principle strong {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.principle p { margin: 0; color: var(--muted); line-height: 1.5; }

.faq-list { display: grid; gap: 10px; }
.faq-list details { padding: 14px 16px; }
.faq-list details summary { font-weight: 700; }
.faq-list details > div { margin-top: 10px; color: var(--muted); line-height: 1.55; }
.faq-list details a { color: rgba(220,242,255,0.92); border-bottom: 1px dashed rgba(255,255,255,0.30); }
.faq-list details a:hover { border-bottom-color: rgba(255,255,255,0.55); }


/* --- Donate: bank + QR + table (donate-) --------------------------------- */
.donate-hero p { max-width: 64ch; }

.donate-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}
@media (max-width: 880px) { .donate-grid { grid-template-columns: 1fr; } }

.donate-bank-rows { display: grid; gap: 10px; }
.donate-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  align-items: baseline;
}
@media (max-width: 480px) { .donate-row { grid-template-columns: 1fr; gap: 2px; } }
.donate-row dt {
  margin: 0;
  font-size: 12px;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.donate-row dd {
  margin: 0;
  font-size: 16px;
  color: var(--text);
  word-break: break-all;
}
.donate-row dd.mono { font-family: var(--mono); }
.donate-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.donate-qr {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.20);
}
.donate-qr img { display: block; width: min(100%, 260px); height: auto; }
.donate-qr-caption {
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.donations-card { margin-top: 16px; }
.donations-table-wrap { overflow-x: auto; }
.donations-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.donations-table th,
.donations-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  vertical-align: top;
}
.donations-table th {
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.donations-table td.amount,
.donations-table th.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.donations-table td.date,
.donations-table th.date {
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.donations-table td.message {
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
}
.donations-table tr.is-empty td {
  padding: 18px 10px;
  text-align: center;
  color: var(--muted2);
  border-bottom: none;
}


/* --- Admin: form + table (admin-) ----------------------------------------- */
.admin-stack { display: grid; gap: 16px; margin-top: 18px; }

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
}
.admin-form-grid > .span-2 { grid-column: span 2; }
.admin-form-grid > .span-full { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .admin-form-grid { grid-template-columns: 1fr 1fr; }
  .admin-form-grid > .span-2 { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-grid > .span-2 { grid-column: 1 / -1; }
}

.admin-form-status { margin-top: 10px; }

.admin-card { margin-top: 0; }
.admin-table-wrap { overflow: auto; }
.admin-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th,
.admin-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  vertical-align: top;
}
.admin-table th {
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.admin-table td.amount,
.admin-table th.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-table td.date,
.admin-table th.date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.admin-table td.message { color: var(--muted); }
.admin-table tr.is-empty td {
  padding: 18px 10px;
  text-align: center;
  color: var(--muted2);
}

.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,107,107,0.42);
  background: rgba(255,107,107,0.12);
  color: rgba(255,224,224,0.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.btn-delete:hover {
  background: rgba(255,107,107,0.20);
  border-color: rgba(255,107,107,0.60);
  transform: translateY(-1px);
}
.btn-delete:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,107,107,0.30); }
.btn-delete:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.delete-form { margin: 0; display: inline-flex; }


/* --- Topbar tightening on small screens (§6) ------------------------------ */
@media (max-width: 480px) {
  .brand-logo { height: 36px; max-width: 200px; }
  .brand h1 { font-size: 13px; }
  .brand .sub { font-size: 11px; }
  .home-hero { padding-top: 14px; gap: 8px; }
  .home-hero-logo { width: min(420px, 96%); }
  .game-card { padding: 18px 18px 20px; }
  .game-card-icon {
    width: 96px;
    height: 96px;
    padding: 4px 4px 12px;
  }
  .game-card[data-game="zasvecenec"] .game-card-icon { width: 116px; }
  .game-card-name { font-size: 20px; }
}