/* One product. Same metal, same white-to-cyan light, same 16px rhythm, same 20px radius, same Heebo. */

body:not(.is-admin) {
  --r: 20px;
  --line: rgba(186, 230, 255, 0.4);
  --metal: linear-gradient(180deg, rgba(18, 48, 112, 0.96), rgba(7, 18, 44, 0.98));
  --light: #e8fbff;
}

body.is-home::before,
body.is-league::before,
body.is-inner::before {
  background:
    radial-gradient(680px 300px at 50% -10%, rgba(0, 96, 210, 0.42), transparent 70%),
    #050811;
}

body:not(.is-admin) .top {
  background: rgba(5, 8, 17, 0.92);
  box-shadow: inset 0 -1px 0 var(--line);
}
body:not(.is-admin) nav a { border-radius: var(--r); }
body:not(.is-admin) .brand-logo {
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line);
}

body:not(.is-admin) main {
  width: min(1120px, calc(100% - 32px));
  margin: 16px auto 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body:not(.is-admin) main > * { margin: 0; }

body:not(.is-admin) h1 { font-size: 26px; font-weight: 900; }
body:not(.is-admin) h2 { font-size: 18px; font-weight: 700; margin: 0; }
body:not(.is-admin) .muted,
body:not(.is-admin) .hint,
body:not(.is-admin) .rank-meta,
body:not(.is-admin) .prize-rule { color: #c2d1e8; }

body:not(.is-admin) .btn { border-radius: var(--r); font-weight: 900; }
body:not(.is-admin) .btn.gold,
body:not(.is-admin) .btn-play {
  background: linear-gradient(180deg, #e8fbff 0%, #7af4ff 55%, #3ec8ff 100%);
  color: #041428;
  border: 2px solid #d9f8ff;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    0 6px 0 #0a3f9a,
    0 14px 24px rgba(0, 180, 255, 0.32);
}
body:not(.is-admin) .btn.ghost {
  background: transparent;
  color: var(--light);
  border: 1px solid var(--line);
  box-shadow: none;
}
.is-home .btn-play { min-height: 72px; font-size: 28px; border-radius: var(--r); }

body:not(.is-admin) input,
body:not(.is-admin) select,
body:not(.is-admin) textarea,
body:not(.is-admin) input[type="file"],
body:not(.is-admin) .dropzone input,
body:not(.is-admin) fieldset,
body:not(.is-admin) .flash,
body:not(.is-admin) .already {
  border-radius: var(--r);
}

/* Home: the stadium is the room. The boots, ball, and trophy sit in it. */
body:not(.is-admin) .pitch-hero {
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 16px 16px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body:not(.is-admin) .hero-stadium { object-position: center 58%; }
body:not(.is-admin) .pitch-hero::after {
  background: linear-gradient(180deg, rgba(5, 8, 17, 0.2) 0%, rgba(5, 8, 17, 0.12) 30%, rgba(5, 8, 17, 0.62) 68%, rgba(5, 8, 17, 0.86) 100%);
}
.is-home .hero-logo {
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.is-home .slogan { font-size: 22px; font-weight: 900; }

body:not(.is-admin) .plinth {
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 28px 16px 14px;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(122, 244, 255, 0.28), transparent 58%),
    linear-gradient(180deg, #163a86, #07122c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 0 #041028;
}
.prize-num { color: var(--light); }

/* Scene and content are one frame: a photo band, then the objects. */
body:not(.is-admin) .stage-scene {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #07122c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
body:not(.is-admin) .stage-photo {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 156px;
  max-height: 156px;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
}
body:not(.is-admin) .podium .stage-photo { object-position: center 22%; }
body:not(.is-admin) .share .stage-photo { object-position: center 48%; }
body:not(.is-admin) .stage-copy {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding: 48px 16px 16px;
  background: linear-gradient(180deg, rgba(7, 18, 44, 0) 0%, #07122c 48px);
}

/* Shared trays. Objects sit in the row, not on a private card. */
body:not(.is-admin) .tile-row,
body:not(.is-admin) .contest-list,
body:not(.is-admin) .rank-list,
body:not(.is-admin) .winners,
body:not(.is-admin) .panel,
body:not(.is-admin) .clip,
body:not(.is-admin) .star-hero,
body:not(.is-admin) .prize,
body:not(.is-admin) .lock-banner,
body:not(.is-admin) .elig-banner,
body:not(.is-admin) .dash-bar,
body:not(.is-admin) .share-card {
  background: var(--metal);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body:not(.is-admin) .tile-row,
body:not(.is-admin) .contest-list,
body:not(.is-admin) .rank-list,
body:not(.is-admin) .winners {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
}
body:not(.is-admin) .tile-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body:not(.is-admin) .gloss-tile,
body:not(.is-admin) .steps article,
body:not(.is-admin) .contest-row,
body:not(.is-admin) .contest-row.is-move,
body:not(.is-admin) .contest-row.is-save,
body:not(.is-admin) .rank-bar,
body:not(.is-admin) .rank-bar.is-first,
body:not(.is-admin) .rank-bar.is-second,
body:not(.is-admin) .rank-bar.is-third,
body:not(.is-admin) .winners li {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body:not(.is-admin) .gloss-tile {
  min-height: 0;
  padding: 16px 8px 14px;
}
body:not(.is-admin) .gloss-tile + .gloss-tile { box-shadow: inset 1px 0 0 rgba(186, 230, 255, 0.22); }
body:not(.is-admin) .contest-row + .contest-row,
body:not(.is-admin) .rank-bar + .rank-bar,
body:not(.is-admin) .winners li + li { box-shadow: inset 0 1px 0 rgba(186, 230, 255, 0.22); }
body:not(.is-admin) .rank-bar.is-first { box-shadow: inset -3px 0 0 #7af4ff; }
body:not(.is-admin) .contest-row,
body:not(.is-admin) .rank-bar,
body:not(.is-admin) .winners li {
  min-height: 72px;
  padding: 12px 16px;
}
body:not(.is-admin) .gloss-tile h2 { font-size: 14px; font-weight: 700; }
body:not(.is-admin) .gloss-tile p { font-size: 12px; color: #c2d1e8; }
body:not(.is-admin) .contest-copy strong,
body:not(.is-admin) .rank-who strong { font-size: 16px; font-weight: 700; }
body:not(.is-admin) .is-league .board-top,
body:not(.is-admin) .board-top {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body:not(.is-admin) .panel,
body:not(.is-admin) .prize,
body:not(.is-admin) .star-hero,
body:not(.is-admin) .lock-banner,
body:not(.is-admin) .elig-banner,
body:not(.is-admin) .dash-bar { padding: 16px; }
body:not(.is-admin) .bonus-legend { gap: 8px; margin: 0; }
body:not(.is-admin) .bonus-legend span,
body:not(.is-admin) .chip,
body:not(.is-admin) .badge { border-radius: var(--r); }
body:not(.is-admin) .chip-lock {
  background: #071833;
  color: var(--light);
  border: 1px solid var(--line);
}
body:not(.is-admin) .share-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body:not(.is-admin) .player-frame {
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: none;
}

/* Objects. Same light, no mats, sitting in the layout. */
body:not(.is-admin) .art-boots,
body:not(.is-admin) .art-tile,
body:not(.is-admin) .art-glove,
body:not(.is-admin) .art-lock,
body:not(.is-admin) .crown img,
body:not(.is-admin) .player-mark,
body:not(.is-admin) .spin-star img {
  background: transparent;
  border-radius: 0;
  filter: drop-shadow(0 10px 12px rgba(0, 8, 24, 0.5)) drop-shadow(0 0 10px rgba(122, 244, 255, 0.28));
}
body:not(.is-admin) .art-boots { width: min(200px, 68%); margin: 4px auto -18px; }
body:not(.is-admin) .art-tile,
body:not(.is-admin) .tile-icon { width: 84px; height: 84px; margin: 0 auto 8px; }
body:not(.is-admin) .tile-icon { display: grid; place-items: center; }
body:not(.is-admin) .tile-icon .star-glyph { font-size: 64px; line-height: 1; color: var(--light); }
body:not(.is-admin) .contest-art .art-glove,
body:not(.is-admin) h1 .art-glove { width: 56px; height: 56px; }
body:not(.is-admin) .chip .art-lock { width: 22px; height: 22px; filter: none; }

body:not(.is-admin) .shield,
body:not(.is-admin) .rank-bar .shield {
  width: 40px;
  height: 40px;
  clip-path: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  color: #041428;
  background: linear-gradient(180deg, #e8fbff, #7af4ff);
  border: 0;
}
body:not(.is-admin) .shield-2 { background: linear-gradient(180deg, #f4f7fb, #aeb8c6); }
body:not(.is-admin) .shield-3,
body:not(.is-admin) .rank-bar.is-third .shield { background: linear-gradient(180deg, #d5deff, #6a7cff); color: #fff; }
body:not(.is-admin) .rank-bar .shield { color: var(--light); background: #10284f; }
body:not(.is-admin) .rank-bar.is-first .shield { color: #041428; background: linear-gradient(180deg, #e8fbff, #7af4ff); }

/* Podium: crown, then the player, then the place. */
body:not(.is-admin) .stage { margin: 8px 0 4px; gap: 8px; }
body:not(.is-admin) .medal,
body:not(.is-admin) .medal-1,
body:not(.is-admin) .medal-3 {
  width: auto;
  height: auto;
  margin: 0 auto 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}
body:not(.is-admin) .medal .crown {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
body:not(.is-admin) .medal .crown img { width: 64px; height: 64px; }
body:not(.is-admin) .winners .crown img { width: 40px; height: 40px; }
body:not(.is-admin) .medal .player-mark,
body:not(.is-admin) .avatar.placeholder .player-mark,
body:not(.is-admin) .mini-avatar.placeholder .player-mark {
  border-radius: 50%;
  object-fit: cover;
  filter: none;
  background: radial-gradient(circle at 40% 30%, #e8fbff 0%, #7af4ff 36%, #1a6cff 74%, #082456 100%);
  box-shadow: 0 0 0 2px rgba(186, 230, 255, 0.8);
}
body:not(.is-admin) .medal .player-mark,
body:not(.is-admin) .avatar.placeholder .player-mark {
  width: 72px;
  height: 72px;
}
body:not(.is-admin) .medal-1 .player-mark { width: 84px; height: 84px; }
body:not(.is-admin) .stem { border-radius: var(--r); }
body:not(.is-admin) .pedestal-score { color: var(--light); font-weight: 900; }
body:not(.is-admin) .mini-avatar.placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  background: transparent;
}
body:not(.is-admin) .mini-avatar.placeholder .player-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  filter: none;
}

body:not(.is-admin) .avatar.placeholder {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 0 2px rgba(186, 230, 255, 0.8), 0 0 22px rgba(122, 244, 255, 0.28);
}
body:not(.is-admin) .avatar.placeholder .player-mark { width: 112px; height: 112px; }
body:not(.is-admin) .star-hero { text-align: center; }
body:not(.is-admin) .star-hero strong,
body:not(.is-admin) .star-count.big { color: var(--light); }

.load-cover {
  background:
    radial-gradient(circle at 50% 40%, rgba(90, 190, 255, 0.32), transparent 26%),
    #050811;
}
.load-cover .spin-star { width: 140px; height: 140px; }
.load-cover .spin-star img {
  width: 140px;
  height: 140px;
  border-radius: 0;
  background: transparent;
}
.load-cover-text {
  margin: 8px 0 0;
  color: #e8fbff;
  font-weight: 900;
  font-size: 18px;
}

/* Admin stays a dark working tool. */
.is-admin .top { background: #0a1329; box-shadow: inset 0 -1px 0 #243656; }
.is-admin main { display: block; }
.is-admin .panel,
.is-admin .kpi,
.is-admin .clip,
.is-admin .prize,
.is-admin .star-hero {
  background: #0a1329;
  border: 1px solid #243656;
  border-radius: 12px;
  box-shadow: none;
}
.is-admin .btn,
.is-admin .btn.gold {
  background: #16325c;
  color: #fff;
  border: 1px solid #3d6ea5;
  border-radius: 12px;
  box-shadow: none;
}