/* ───────────────────────────────────────────────────────────────────────
   playagame.click — theme
   Overrides uilib design tokens to match the playagame.click palette,
   then adds page-level layout for the portal (header / hero / grids / footer).
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ── uilib token overrides (playagame.click palette) ── */
  --ui-bg:            #1a1c2b;
  --ui-surface:       #252941;   /* panel */
  --ui-surface-2:     #2b2f4c;   /* card */
  --ui-overlay:       rgba(10, 11, 20, 0.72);

  --ui-primary:       #ff7f50;   /* coral accent */
  --ui-primary-fg:    #1a1208;
  --ui-secondary:     #ffb347;   /* amber accent */
  --ui-secondary-fg:  #1a1208;

  --ui-text:          #f0f0f5;
  --ui-text-muted:    #a0a6c0;
  --ui-text-inverse:  #1a1c2b;
  --ui-border-color:  rgba(255, 255, 255, 0.08);

  --ui-success:       #3cb371;
  --ui-danger:        #dc143c;
  --ui-warning:       #ffb347;
  --ui-info:          #6495ed;

  --ui-gradient-primary: linear-gradient(135deg, #ff7f50, #ffb347);
  --ui-gradient-surface: linear-gradient(180deg, var(--ui-surface), var(--ui-bg));
  --ui-glow:          0 0 20px rgba(255, 127, 80, 0.35);

  --ui-header-bg:     rgba(26, 28, 43, 0.88);
  --ui-header-height: 72px;
  --ui-card-radius:   16px;
  --ui-radius-lg:     16px;
  --ui-radius-xl:     20px;

  --ui-font:          'Roboto', system-ui, -apple-system, sans-serif;
  --ui-font-display:  'Michroma', 'Roboto', sans-serif;
}

/* uilib's reset.css sets body{overflow:hidden} and overscroll-behavior:none
   for its app-shell components — this is a normal scrolling marketing page,
   so restore document scroll. overscroll-behavior:none in particular blocks
   native touch-driven scrolling on mobile browsers once the page is taller
   than the viewport, so it must be restored to auto here too. */
html, body {
  overflow: auto !important;
  height: auto !important;
  min-height: 100%;
  overscroll-behavior: auto !important;
}
body {
  background:
    radial-gradient(900px 500px at 10% -10%, #2b2f4c 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 10%, #1a3648 0%, transparent 55%),
    var(--ui-bg);
}

a { color: inherit; text-decoration: none; }

/* ── Scrollbar — site colors instead of the browser default ────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-primary) var(--ui-surface-2);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ui-surface-2); }
::-webkit-scrollbar-thumb {
  background: var(--ui-primary);
  border-radius: 999px;
  border: 2px solid var(--ui-surface-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--ui-secondary); }

/* ── Site header ─────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--ui-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--ui-text);
  cursor: pointer;
  text-decoration: none;
}
.site-logo:hover { color: var(--ui-text); }

/* "back to home" link used on pages whose own header isn't the public
   .site-header (app/, govern/) — see index.html/index.html for the
   equivalent already covered by the clickable .site-logo + nav there. */
.header-home-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.header-home-link:hover { color: var(--ui-text); }

/* app/ and govern/'s simple header (logo/title + lang switcher + logout) —
   ui-header-action has no gap of its own between its children by default,
   so the switcher and Logout button otherwise sit flush against each other. */
ui-header-action[slot="right"] { gap: 10px; }

/* Below ~560px the app/govern header (logo + this link + lang switcher +
   logout button) no longer fits with the full "Back to playagame.click"
   label — collapse to just the arrow (still a real link, still labeled for
   screen readers via aria-label) instead of letting it push everything else
   off-screen. */
@media (max-width: 560px) {
  .header-home-link__text { display: none; }
  .header-home-link { font-size: 18px; }
  ui-header-action[slot="right"] { gap: 6px !important; }
  ui-header-action[slot="right"] .lang-switcher { padding: 6px 22px 6px 8px; font-size: 12px; }
}
.site-logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-gradient-primary);
  color: var(--ui-primary-fg);
  font-family: var(--ui-font-display);
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--ui-glow);
}
.site-logo__tld { color: var(--ui-primary); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.site-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-text-muted);
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ui-text); background: rgba(255,255,255,.06); }
.site-nav a.active { color: var(--ui-text); background: rgba(255,255,255,.08); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Language switcher (uilib/core/I18n.js's mountLanguageSwitcher) — shared
   look across homepage/page-template/app/govern headers. */
.lang-switcher {
  appearance: none;
  background: var(--ui-surface-2);
  color: var(--ui-text);
  border: 1px solid var(--ui-border-color);
  border-radius: 8px;
  padding: 6px 26px 6px 10px;
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lang-switcher:hover { background-color: var(--ui-surface-3, var(--ui-surface-2)); }

/* Below 900px, nav lives in the fixed bottom tab bar (#mobile-tabbar)
   instead of the header — see js/site.js. The header's own language
   <select> also steps aside here (language is reachable from the
   account/sign-in menu's "🌐" item instead — see renderAuth), since there's
   no longer a hamburger to hang a second copy of it off. */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header__actions #lang-switcher { display: none; }
}

/* The full "PLAYAGAME.CLICK" wordmark next to the mark + Sign in button was
   overflowing the header at phone widths (the wordmark alone measured wider
   than the remaining space, pushing/clipping Sign in off the right edge —
   a real bug, not just a style preference). Wrapping ".CLICK" onto its own
   line keeps the wordmark's full text (per explicit request to show it on
   mobile) while roughly halving how much horizontal room it needs. */
@media (max-width: 480px) {
  .site-header__actions { gap: 4px; }
  .site-header .site-logo { align-items: center; font-size: 15px; line-height: 1.15; }
  .site-header .site-logo__tld { display: block; }
}

/* ── Mobile fixed bottom nav (index.html / page-template.html) ─────────
   A single centered arrow that opens the same 4 destinations (Home/Popular/
   All games/Info) as a bottom-sheet Menu — not a 4-item bar. Hidden
   entirely on desktop/tablet. */
.mobile-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(15, 15, 18, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--ui-border-color);
}
.mobile-tabbar__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  .mobile-tabbar { display: flex; }
}


/* Desktop/tablet popover (js/site.js's showPopover) — the rounded-corner
   anchored dropdown the header sign-in/account menu uses above the 900px
   breakpoint, instead of the mobile bottom-sheet Menu (uilib/core/Menu.js). */
.ui-popover-backdrop { position: fixed; inset: 0; z-index: 999; }
.ui-popover {
  position: fixed;
  z-index: 1000;
  min-width: 190px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-color);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transition: opacity .15s ease, transform .15s ease;
}
.ui-popover--visible { opacity: 1; transform: translateY(0) scale(1); }
.ui-popover-title {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-text-muted);
}
.ui-popover-body { display: flex; flex-direction: column; }
.ui-popover-btn {
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-text);
  font-family: var(--ui-font);
  font-size: 14px;
  cursor: pointer;
}
.ui-popover-btn:hover { background: rgba(255, 255, 255, .06); }

/* ── Player/Admin header title + subtitle (app/, govern/) — the current
   tab/page name (Friends, Tournaments, Igre, ...) shows here instead of as
   its own heading inside the content pane below. ui-header is a row flex
   container (see uilib reset.css), so title+subtitle need their own column
   wrapper to stack; ui-title's default flex:1 is reset to none here so it
   doesn't fight the wrapper's own sizing. */
.header-title-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.header-title-group ui-title { flex: none; }
.header-title-group ui-subtitle:empty { display: none; }

/* ── Header auth (sign-in / account) ──────────────────────────────────── */
.site-auth { display: flex; align-items: center; }

.site-account {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s ease;
}
.site-account:hover, .site-account:focus-visible {
  box-shadow: 0 0 0 2px var(--ui-border-color);
  outline: none;
}
.site-account ui-avatar { width: 32px; height: 32px; flex: none; margin: 0; }
.site-account__caret { font-size: 11px; color: var(--ui-text-muted); }

/* Richer account header inside the desktop popover (js/site.js's
   showPopover headerHtml) — the avatar/name that used to live in the header
   pill itself now lives here instead, since the button is avatar-only. */
.ui-popover-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
}
.ui-popover-account ui-avatar { width: 38px; height: 38px; flex: none; margin: 0; }
#dashboard-avatar { margin: 0; }
.ui-popover-account__text { min-width: 0; }
.ui-popover-account__name {
  font-weight: 600;
  color: var(--ui-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-popover-account__email {
  font-size: 12px;
  color: var(--ui-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Layout shell ───────────────────────────────────────────────────── */
.site-main {
  max-width: 1400px;
  margin: 0 auto;
  /* .site-header is position:fixed (no longer in normal flow, see above) —
     top padding takes its place so the first section doesn't render
     underneath it. */
  padding: calc(var(--ui-header-height) + 32px) 24px 80px;
}

.site-section {
  margin: 0 0 44px;
}
.site-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.site-section__title {
  font-family: var(--ui-font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--ui-text);
  letter-spacing: .01em;
}
.site-section__title .dot { color: var(--ui-primary); }

/* ── Hero row: 1 row × 2 cols, highlighted ─────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 16fr 9fr;
  gap: 22px;
}
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ── Card grids ─────────────────────────────────────────────────────── */
.game-grid {
  display: grid;
  gap: 20px;
}
.game-grid--3 { grid-template-columns: repeat(3, 1fr); }
.game-grid--4 { grid-template-columns: repeat(4, 1fr); }
.game-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1100px) {
  .game-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .game-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .game-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Game card (registered ui-card type="game") ────────────────────── */
ui-card.ui-card--game {
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border-color);
}
ui-card.ui-card--game:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-lg), 0 0 0 1px rgba(255,127,80,.25);
}

.game-card__media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #3a2a52;
}
.game-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
ui-card.ui-card--game:hover .game-card__media img { transform: scale(1.06); }

.game-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--ui-gradient-primary);
  color: var(--ui-primary-fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.game-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 6, 0);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}
ui-card.ui-card--game:hover .game-card__play {
  opacity: 1;
  background: rgba(10, 8, 6, .35);
}
.game-card__play span {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ui-gradient-primary);
  color: var(--ui-primary-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: var(--ui-glow);
  transform: scale(.85);
  transition: transform .2s ease;
}
ui-card.ui-card--game:hover .game-card__play span { transform: scale(1); }

.game-card__body { padding: 12px 14px 14px; }
.game-card__cat {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ui-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.game-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ui-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Base description line, shown on every card (not just hero — see
   js/site.js's renderGameCard/data.description). Hero's own bigger/wider
   variant below overrides this for its showcase treatment; this generic
   version clamps to 2 lines so card height stays predictable no matter how
   long an admin's description text runs. */
.game-card__desc {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ── Portrait (mobile game) card — tall thumbnail variant on phones only;
   see the ≥621px override below, which switches it to a landscape
   thumbnail to match the Play Store desktop layout it adapts there. ───── */
ui-card.ui-card--game.game-card--portrait .game-card__media {
  aspect-ratio: 3/4;
}

/* Mobile Games section, desktop/tablet only (≥621px — the same cutoff the
   phone unification block below uses) — adapted from Google Play's
   developer-page listing (play.google.com/store/apps/developer?id=Toocat):
   wide/landscape thumbnail, then a small square icon + title + "developer"
   name below it, instead of the plain category+title every other card
   uses. Below 621px it stays identical to every other card, per the
   standing "same card layout on mobile" rule. */
.game-card__store-row { display: none; }
@media (min-width: 621px) {
  ui-card.ui-card--game.game-card--portrait .game-card__media {
    aspect-ratio: 16/9;
  }
  .game-card--portrait .game-card__cat,
  .game-card--portrait .game-card__title {
    display: none;
  }
  .game-card--portrait .game-card__store-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .game-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex: none;
    background: #3a2a52;
  }
  .game-card__store-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .game-card__store-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ui-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .game-card__developer {
    font-size: 12px;
    color: var(--ui-text-muted);
  }
}

/* ── Hero (featured) card — bigger variant of the same type ─────────── */
ui-card.ui-card--game.game-card--hero { cursor: pointer; }
.hero-grid > ui-card.game-card--hero:first-child .game-card__media { aspect-ratio: 16/9; }
.hero-grid > ui-card.game-card--hero:nth-child(2) .game-card__media { aspect-ratio: 1/1; }
ui-card.ui-card--game.game-card--hero .game-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 22px 20px;
  background: linear-gradient(to top, rgba(10,8,14,.92) 10%, rgba(10,8,14,.35) 65%, transparent);
}
ui-card.ui-card--game.game-card--hero { position: relative; }
ui-card.ui-card--game.game-card--hero .game-card__title {
  font-size: clamp(18px, 2.4vw, 24px);
  white-space: normal;
  font-family: var(--ui-font-display);
}
ui-card.ui-card--game.game-card--hero .game-card__desc {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ui-text-muted);
  max-width: 46ch;
}
ui-card.ui-card--game.game-card--hero .game-card__cta {
  margin-top: 14px;
}

/* Below this, every section (Hero, Popular, Mobile Games, More Games) must
   present games identically — one column, same card, same aspect ratio.
   Above this point each section is still free to use its own column count/
   card variant (hero's featured pair, the portrait mobile-games strip);
   this is specifically the "phone" breakpoint where those differences used
   to leave Hero/Popular/More at inconsistent widths and Mobile Games as a
   smaller horizontally-scrolling strip while everything else stacked.
   Placed after the base card rules above (not up near .game-grid) since it
   needs to win the cascade over them at equal specificity — @media doesn't
   add specificity, only source order decides when a plain class selector on
   both sides is otherwise tied (this is the same trap the mobile footer
   block ran into — see its comment further up this file). */
@media (max-width: 620px) {
  .hero-grid,
  .game-grid--3,
  .game-grid--4,
  .game-grid--5 {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    overflow-x: visible;
    padding-bottom: 0;
  }
  .hero-grid > ui-card.game-card--hero:first-child .game-card__media,
  .hero-grid > ui-card.game-card--hero:nth-child(2) .game-card__media,
  ui-card.ui-card--game.game-card--portrait .game-card__media {
    aspect-ratio: 16/9;
  }
  /* Hero cards otherwise render as a completely different card (absolute
     gradient-overlay body, bigger title, description paragraph, CTA button)
     — on mobile they need to be visually indistinguishable from every other
     card besides which game they link to, so all of that is reset back to
     the plain .game-card__body layout here. */
  ui-card.ui-card--game.game-card--hero .game-card__body {
    position: static;
    padding: 12px 14px 14px;
    background: none;
  }
  ui-card.ui-card--game.game-card--hero .game-card__title {
    font-size: 15px;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The CTA button stays hero-exclusive UI even on mobile; the description
     itself is universal now (data.description), so it's reset to the same
     plain size/color every other card's desc uses instead of hero's bigger
     desktop-showcase version, and no longer hidden. */
  ui-card.ui-card--game.game-card--hero .game-card__cta {
    display: none;
  }
  ui-card.ui-card--game.game-card--hero .game-card__desc {
    margin: 6px 0 0;
    font-size: 12px;
    max-width: none;
  }
}

/* ── Ad blocks ──────────────────────────────────────────────────────── */
.ad-slot {
  margin: 8px 0 44px;
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
  border: 1px dashed var(--ui-border-color);
}
ui-ad-block { border-bottom: none; }
.ui-ad-block__wrap {
  border-radius: var(--ui-radius-lg);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-ad-block__placeholder-text {
  color: var(--ui-text-muted);
  font-size: 12px;
  letter-spacing: .04em;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--ui-border-color);
  background: var(--ui-surface);
}
.site-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px 28px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 800px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}
.site-footer__brand p {
  margin: 12px 0 16px;
  font-size: 13px;
  color: var(--ui-text-muted);
  line-height: 1.6;
  max-width: 34ch;
}
.site-footer__social {
  display: flex;
  gap: 8px;
}
.site-footer__social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ui-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--ui-text-muted);
  transition: background .15s ease, color .15s ease;
}
.site-footer__social a:hover { background: var(--ui-gradient-primary); color: var(--ui-primary-fg); }

.site-footer__col {
  text-align: right;
}
.site-footer__col h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}
.site-footer__col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.site-footer__col a {
  font-size: 13px;
  color: var(--ui-text);
}
.site-footer__col a:hover { color: var(--ui-primary); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--ui-border-color);
  font-size: 12px;
  color: var(--ui-text-muted);
}
.site-footer__bottom a { color: var(--ui-text-muted); }
.site-footer__bottom a:hover { color: var(--ui-primary); }

/* Mobile footer — the link columns and social row are replaced by the
   "Info" tab's bottom sheet (js/site.js's openMobileInfoMenu) and the tab
   bar itself (Home/Popular/All games) — showing them again here would just
   duplicate the same links. What's left is a compact, centered tagline +
   copyright, not the full desktop footer squeezed into a phone width. The
   P logo/wordmark is dropped too — it's now always visible in the fixed
   header instead (see .site-header), so showing it again down here would
   just be the same mark twice on screen at once.
   Placed after the rules above (not up near .mobile-tabbar) since it needs
   to win the cascade over them at equal specificity — @media doesn't add
   specificity, only source order decides when a plain class selector on
   both sides is otherwise tied. */
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand { align-items: center; text-align: center; }
  .site-footer__brand p { max-width: 40ch; margin-left: auto; margin-right: auto; }
  .site-footer__brand .site-logo,
  .site-footer__social,
  .site-footer__col,
  .site-footer__bottom span:last-child { display: none; }
  .site-footer__bottom { justify-content: center; }
  /* Match .site-header's look (translucent + blurred) instead of the
     desktop footer's flat solid surface, now that it's a compact bar
     rather than a full block of content. */
  .site-footer {
    background: var(--ui-header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Room for the fixed bottom tab bar so it never covers the footer. */
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }
}

/* ── Player area (app/user/player.page.js) ────────────────────────────── */
.player-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.player-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 180px;
  flex: none;
}
/* Same class-vs-[hidden] specificity trap as #admin-busy-overlay above —
   .player-sidebar's own `display: flex` otherwise always beats the
   browser's default `[hidden] { display: none }` UA rule. */
#admin-sidebar[hidden] { display: none; }
.player-sidebar__item {
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.player-sidebar__item:hover { background: rgba(255,255,255,.06); color: var(--ui-text); }
.player-sidebar__item.active { background: var(--ui-surface-2); color: var(--ui-text); }
.player-sidebar__item--admin {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border-color);
  color: var(--ui-text-muted);
}
/* Always-last sidebar item, in both the player app and admin panel — a
   deliberate exit-the-app-area affordance, so it's colored to stand out
   from the rest of the (otherwise same-weight) nav items instead of
   blending in. */
.player-sidebar__item--back-home {
  color: var(--ui-primary);
  font-weight: 600;
}
.player-sidebar__item--back-home:hover { background: rgba(255, 127, 80, .12); color: var(--ui-primary); }
.player-content { flex: 1; min-width: 0; }

/* Admin "Igrači" page — search + list/detail split (govern/admin/players.page.js) */
.players-layout { display: flex; gap: 20px; align-items: flex-start; margin-top: 12px; }
.players-layout__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 260px;
  flex: none;
  max-height: 70vh;
  overflow-y: auto;
}
.players-list__item { width: 100%; }
.players-layout__detail { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .players-layout { flex-direction: column; }
  .players-layout__list { width: 100%; max-height: 240px; }
}
/* Mobile-only bottom trigger — a single centered arrow, matching the
   homepage's .mobile-tabbar exactly (same fixed positioning/blur/height),
   that opens the sidebar's items in the same bottom-sheet Menu the sign-in/
   account menus use (see player.page.js's openMobilePlayerMenu /
   govern/app.js's openMobileAdminMenu) instead of the sidebar itself.
   Hidden on desktop; only shown at the same breakpoint the sidebar
   disappears at, below. */
.player-mobile-menu-btn {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-bottom: env(safe-area-inset-bottom);
  border: none;
  border-top: 1px solid var(--ui-border-color);
  background: var(--ui-header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#admin-mobile-menu-btn[hidden] { display: none; }

@media (max-width: 640px) {
  /* .player-layout's align-items:flex-start (desktop: vertical alignment in
     a row layout) becomes the CROSS axis once flex-direction flips to
     column here — left unset, it shrink-wraps .player-content (and every
     tab's title/ui-empty inside it) to its content width instead of
     filling the screen, which is what was actually causing the "not
     centered, leaning left" look: the content itself was narrow and
     left-aligned, not merely mis-centered. */
  .player-layout { flex-direction: column; align-items: stretch; }
  .player-sidebar { display: none; }
  .player-mobile-menu-btn { display: flex; }
  /* Room for the fixed bar so it never covers the content's last bit. */
  .player-content { padding-bottom: calc(48px + 16px + env(safe-area-inset-bottom)); }
}

/* ── Tournaments tab ───────────────────────────────────────────────────── */
.tournament-label {
  display: block;
  font-size: 13px;
  color: var(--ui-text-muted);
  margin-bottom: 6px;
}
.tournament-select {
  background: var(--ui-surface-2);
  color: var(--ui-text);
  border: 1px solid var(--ui-border-color);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--ui-font);
  font-size: 14px;
}
#tournament-game-picker, #room-game-picker { margin-bottom: 16px; }
/* Game picker for Tournaments/Rooms — a 3-column grid of icon+title cards
   instead of a <select> dropdown, so the games themselves are visible at a
   glance rather than hidden behind a closed list. */
/* Fixed-size cards, however many columns fit the available width at that
   size — not a hardcoded column count that stretches/shrinks the cards
   themselves to fill the row. */
.tournament-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  gap: 10px;
}
.tournament-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--ui-border-color);
  border-radius: 12px;
  background: var(--ui-surface-2);
  color: var(--ui-text);
  font-family: var(--ui-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tournament-game-card:hover { background: var(--ui-surface-3, var(--ui-surface-2)); }
.tournament-game-card.active {
  border-color: var(--ui-primary);
  background: rgba(255, 127, 80, .12);
}
.tournament-game-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: #3a2a52;
}
.tournament-game-card__title {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.tournament-muted { color: var(--ui-text-muted); font-size: 14px; margin: 8px 0; }
.tournament-error { color: var(--ui-danger); font-size: 14px; margin: 8px 0; }
#tournaments-tab, #rooms-tab, #invites-tab, #account-tab, #credits-tab { position: relative; }
.room-invite-row { margin-top: 8px; }
.tournament-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 11, 20, 0.55);
  /* inset:0 against #tournaments-tab/#rooms-tab etc. — plain, unstyled divs
     with no border-radius of their own (confirmed via computed style: 0px)
     — so the overlay stays unrounded too, rather than a radius token
     (var(--ui-card-radius), tried previously) that doesn't correspond to
     anything actually underneath it and only made the mismatch worse. */
  backdrop-filter: blur(1px);
}

#page-admin-games ui-section { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Games admin: the detail form used to just render as one long column
   (16+ fields plus the injected image/completion/version sections) with no
   height bound of its own, so ui-page's own overflow-y:auto (see reset.css)
   ended up being what scrolled — meaning the master pane's list stretched
   to match the detail pane's full content height too, well past the
   viewport, and the whole ADMIN PAGE scrolled instead of just whichever
   pane's content actually overflowed. This chains a real height down from
   ui-section (which now has one, above) so both panes are viewport-bounded
   and scroll internally — the master list on its own (unchanged), the
   detail pane via its own tabs (see games.page.js's groupFormIntoTabs)
   instead of one long form. */
#games-master-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#games-master-detail .ui-md-body { flex: 1; min-height: 0; }
#games-master-detail .ui-md-master-pane,
#games-master-detail .ui-md-detail-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#games-master-detail .ui-md-list { flex: 1; min-height: 0; max-height: none; }
#games-master-detail .ui-md-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
#games-master-detail .ui-md-tabbar {
  flex: none;
  display: flex;
  gap: 4px;
  padding: var(--ui-space-2) var(--ui-space-3) 0;
  border-bottom: 1px solid var(--ui-border-color);
  overflow-x: auto;
}
#games-master-detail .ui-md-tab {
  flex: none;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ui-text-muted);
  font-family: var(--ui-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#games-master-detail .ui-md-tab:hover { color: var(--ui-text); }
#games-master-detail .ui-md-tab.active { color: var(--ui-primary); border-bottom-color: var(--ui-primary); }
#games-master-detail .ui-md-tabpanels { flex: 1; min-height: 0; overflow-y: auto; }
#games-master-detail .ui-md-tabpanel { display: grid; gap: var(--ui-space-3); padding: var(--ui-space-3); }
#games-master-detail .ui-md-actions { flex: none; padding: var(--ui-space-3); border-top: 1px solid var(--ui-border-color); margin: 0; }
.games-save-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgba(10, 11, 20, 0.65);
  backdrop-filter: blur(1px);
}

/* govern/'s admin shell wraps <ui-router> two levels deeper than reset.css's
   base CSS expects (ui-app > ui-router directly, getting its height from
   ui-app's own flex:1 chain) — here it's ui-app > #admin-layout >
   #admin-content > ui-router. .player-layout's `align-items: flex-start`
   (needed elsewhere, where it's nested inside a bounded-height ui-page
   instead of owning the whole app shell) stops height from ever reaching
   ui-router, collapsing it and everything inside to 0px. These two rules
   re-open that chain for the admin shell specifically, without touching
   .player-layout/.player-content's shared behavior used by app/'s Player
   Area tabs. */
/* Matches the padding reset.css's `ui-router > ui-page` rule gives every
   page automatically (8px 8px 64px) — app/'s player sidebar+content sit
   INSIDE one such ui-page (page-player), so they get it for free. Admin's
   #admin-layout sits OUTSIDE any ui-page (its own <ui-router> is nested
   inside #admin-content instead), so without this it renders flush against
   the header/viewport edge — 8px further left/up than the player area,
   with none of that page's usual 64px bottom breathing room either. */
#admin-layout { flex: 1; min-height: 0; align-items: stretch; padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-16); }
#admin-content { position: relative; display: flex; flex-direction: column; min-height: 0; }
/* Global admin busy overlay (govern/app.js, driven by Network.onStart/onEnd)
   — absolute over #admin-content only (NOT position:fixed over the whole
   viewport — that used to also cover #admin-sidebar, making the admin menu
   unclickable for the duration of any background request, e.g. a page's
   initial data load). */
#admin-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  /* #admin-content (its containing block) has no border-radius of its own
     (0px, confirmed via computed style) — the overlay stays unrounded to
     match it exactly. */
}
/* .games-save-overlay's own `display: flex` (a class selector) otherwise
   always beats the browser's default `[hidden] { display: none }` UA rule
   (lower specificity), so toggling the `hidden` attribute in JS silently did
   nothing — the overlay stayed visible over the whole admin area at all
   times. This id+attribute selector outranks the class rule and actually
   hides it. */
#admin-busy-overlay[hidden] {
  display: none;
}
.tournament-create-box {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border-color);
}
.tournament-create-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
/* Mobile: every control in the player area's right-hand content must be
   either full-width, centered, or a clean 50/50 split — never an
   intrinsic-width control (a <select> or button sized to its own text)
   left over in the middle of the row with empty space trailing it. Selects
   and create-row buttons default to shrink-to-content, so they need an
   explicit width here. */
@media (max-width: 640px) {
  .tournament-select { width: 100%; }
  .tournament-create-row { flex-direction: column; align-items: stretch; }
  .tournament-create-row > * { width: 100%; }
  #tournament-leave-btn, #tournament-close-btn { display: block; width: 100%; margin-top: 6px; }
}
.tournament-open-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ui-surface-2);
  margin-bottom: 8px;
  font-size: 14px;
}
/* Publishing priority list (govern/admin/publishing.page.js) — already-live
   games get a green accent so it's obvious at a glance which upcoming
   entries are just an update to something already published vs. a game
   that isn't out yet at all. */
.tournament-open-item--published {
  border: 1px solid var(--ui-success);
  background: rgba(60, 179, 113, .12);
}
/* Challenges (app/user/challenges.page.js) — a challenge row needs to stack
   a leaderboard block below the title+actions line, unlike every other
   .tournament-open-item use (tournaments/friends), which is a single flex
   row. Scoped to this modifier rather than changing the shared base class. */
.challenge-item {
  flex-direction: column;
  align-items: stretch;
}
.challenge-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.challenge-leaderboard-list {
  list-style: none;
  counter-reset: challenge-rank;
  margin: 6px 0 0;
  padding: 0;
  border: 1px solid var(--ui-border-color);
  border-radius: 8px;
  overflow: hidden;
}
.challenge-leaderboard-list li {
  counter-increment: challenge-rank;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
}
.challenge-leaderboard-list li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.challenge-leaderboard-list li::before {
  content: counter(challenge-rank) '.';
  color: var(--ui-text-muted);
  min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.challenge-leaderboard-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.challenge-leaderboard-list__score {
  font-variant-numeric: tabular-nums;
  color: var(--ui-secondary);
  font-weight: 600;
}
.challenge-leaderboard-list__row--empty {
  color: var(--ui-text-muted);
}
.challenge-leaderboard-list__row--empty .challenge-leaderboard-list__name { color: var(--ui-text-muted); }
.publishing-unscheduled--published { color: var(--ui-success); }
.publishing-item-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.publishing-unscheduled-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 6px 0;
}
/* Dev-completion % (the same "completion" field the game's own edit form
   tracks) shown alongside each entry — a thin bar + number, not another
   pill, so it doesn't compete with the release-type badge for attention. */
.publishing-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.publishing-progress__bar {
  display: block;
  width: 60px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.publishing-progress__fill {
  display: block;
  height: 100%;
  background: var(--ui-primary);
  border-radius: 999px;
}
.publishing-progress__pct {
  font-size: 11px;
  color: var(--ui-text-muted);
  min-width: 30px;
  text-align: right;
}
#tournament-active-header { margin-bottom: 10px; font-size: 14px; color: var(--ui-text-muted); }
#tournament-active-header strong { color: var(--ui-text); }
.tournament-entrant-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tournament-entrant-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ui-surface-2);
  font-size: 13px;
}
.tournament-entrant-chip--me { background: var(--ui-primary); color: var(--ui-primary-fg); font-weight: 600; }
.tournament-round { margin-bottom: 14px; }
.tournament-round-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ui-text-muted); margin-bottom: 6px; }
.tournament-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ui-surface-2);
  margin-bottom: 6px;
  font-size: 13px;
}
.tournament-match--mine { border: 1px solid var(--ui-primary); }