/* Shared "royal" visual theme for amokgaming.com pages (points.html, profile.html, ...).
   Extracted from points.html so every page looks consistent without duplicating CSS. */

:root {
  --royal-bg: #070b16;
  --royal-panel: #0e1730;
  --royal-panel-2: #101a36;
  --royal-border: #caa24a;
  --royal-border-dim: #7a6634;
  --royal-gold: #f3cf7a;
  --royal-gold-bright: #ffe9b0;
  --royal-text: #ece6d6;
  --royal-muted: #a89d84;
}

body {
  background: radial-gradient(ellipse 120% 60% at 50% 0%, #2a2350 0%, #0e1330 35%, var(--royal-bg) 70%);
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.app {
  max-width: 860px;
}

/* --- Banner --- */
.royal-banner {
  text-align: center;
  padding: 32px 16px 20px;
  position: relative;
}
.royal-crown {
  font-size: 34px;
  filter: drop-shadow(0 0 12px rgba(255, 213, 128, 0.6));
}
.royal-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 1.1;
  margin: 4px 0 0;
  background: linear-gradient(180deg, #fff3d6 0%, var(--royal-gold) 45%, #b9862c 55%, var(--royal-gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(243, 207, 122, 0.35);
  letter-spacing: 1px;
}
.royal-subtitle-band {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 28px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--royal-gold-bright);
  background: linear-gradient(180deg, #1c2547, #0d1226);
  border-top: 2px solid var(--royal-border);
  border-bottom: 2px solid var(--royal-border);
}
.royal-tagline {
  margin-top: 14px;
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--royal-muted);
  letter-spacing: 0.5px;
}

/* --- Ornate frame (approximates a carved-gold border without real artwork) --- */
.royal-frame {
  position: relative;
  background: var(--royal-panel);
  border: 2px solid var(--royal-border);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(202, 162, 74, 0.25),
    inset 0 0 0 4px rgba(10, 14, 26, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.55);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.royal-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--royal-border-dim);
  border-radius: 9px;
  pointer-events: none;
}
.royal-corner {
  position: absolute;
  font-size: 16px;
  color: var(--royal-gold);
  text-shadow: 0 0 6px rgba(243, 207, 122, 0.6);
}
.royal-corner.tl { top: -10px; left: -10px; }
.royal-corner.tr { top: -10px; right: -10px; }
.royal-corner.bl { bottom: -10px; left: -10px; }
.royal-corner.br { bottom: -10px; right: -10px; }

/* --- Tabs styled as gold banner tabs --- */
.tabs-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.royal-frame .tabs {
  gap: 8px;
}
#profileTabBtn {
  cursor: pointer;
}
.royal-frame .tab-btn {
  background: var(--royal-panel-2);
  color: var(--royal-muted);
  border: 1px solid var(--royal-border-dim);
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.royal-frame .tab-btn.active {
  background: linear-gradient(180deg, #f3cf7a, #b9862c);
  color: #241a06;
  border-color: var(--royal-gold);
}

/* --- Inputs --- */
.royal-frame .modal-field {
  color: var(--royal-muted);
}
.royal-frame input[type="text"],
.royal-frame input[type="password"] {
  background: #060a16;
  border: 1px solid var(--royal-border-dim);
  color: var(--royal-text);
}
.royal-frame input[type="text"]:focus,
.royal-frame input[type="password"]:focus {
  outline: none;
  border-color: var(--royal-border);
  box-shadow: 0 0 0 2px rgba(202, 162, 74, 0.2);
}

/* --- Buttons --- */
.royal-frame button.primary {
  background: linear-gradient(180deg, #f8dfa0, #caa24a 55%, #97742c);
  color: #241a06;
  border: 1px solid var(--royal-border);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(202, 162, 74, 0.35);
}
.royal-frame button.secondary {
  background: var(--royal-panel-2);
  color: var(--royal-gold);
  border: 1px solid var(--royal-border-dim);
}

.royal-frame .stat-card {
  background: #060a16;
  border-color: var(--royal-border-dim);
}
.royal-frame .stat-value {
  color: var(--royal-gold);
}

.royal-frame table th {
  color: var(--royal-muted);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}
.royal-frame .points {
  color: var(--royal-gold);
}
.royal-frame .empty {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-style: italic;
  color: var(--royal-muted);
  padding: 24px 0;
}
.royal-frame .empty::before,
.royal-frame .empty::after {
  content: '✦';
  color: var(--royal-border);
  margin: 0 10px;
}

/* --- Podium (top 3) — same image/positions as the OBS overlay (public/overlay.html),
   untouched there; this is an independent copy for the cloud page. --- */
.podium-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
}
.podium-bg {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  border-radius: 8px;
}
.podium-avatar-img {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2f3a;
}
.podium-text {
  position: absolute;
  z-index: 3;
  text-align: center;
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
}
.podium-plate {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  overflow: hidden;
}
.podium-name {
  font-weight: 800;
  color: var(--royal-text);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
.podium-points {
  font-weight: 700;
  color: var(--royal-gold);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
.podium-title {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--royal-gold-bright);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  padding: 1px 5px;
}
#podiumAvatar1 { left: 40.39%; top: 42%; width: 18.25%; height: 13.45%; }
#podiumAvatar2 { left: 12.53%; top: 55.67%; width: 15.88%; height: 11.23%; }
#podiumAvatar3 { left: 70.61%; top: 56.6%; width: 15.46%; height: 10.06%; }
#podiumName1 { left: 49.5%; top: 65%; width: 28%; font-size: 15px; }
#podiumPoints1 { left: 49.5%; top: 69%; width: 22%; font-size: 13px; }
#podiumName2 { left: 20.5%; top: 76%; width: 24%; font-size: 13px; }
#podiumPoints2 { left: 20.5%; top: 80%; width: 20%; font-size: 11px; }
#podiumName3 { left: 78.3%; top: 77%; width: 24%; font-size: 13px; }
#podiumPoints3 { left: 78.3%; top: 81%; width: 20%; font-size: 11px; }
#podiumPlate1 { left: 49.5%; top: 63.5%; width: 29%; height: 8%; }
#podiumPlate2 { left: 20.5%; top: 74.5%; width: 25%; height: 8%; }
#podiumPlate3 { left: 78.3%; top: 75.5%; width: 25%; height: 8%; }

/* --- Podium character (Knight/Elf avatar) — sits on the banner flag below each name plate,
   overlaid on TOP of the podium artwork (unlike the round photo frame, which sits BEHIND it in
   a cutout hole — this banner is opaque painted art, so the character has to draw over it, like
   a figure standing in front of the flag). Coordinates measured directly against
   public/frames/podium_template.png (718x858) — see the user's annotated screenshot for the
   general area, refined by cropping/inspecting the actual asset. Title+level sits directly below
   the character, in the banner's tapered lower point. */
/* .podium-character-box is the bounding box (sized via the per-rank #podiumCharacterN rules
   below); .podium-character-sprite is a child sized/positioned by JS (points.js) to a
   contain-fit, bottom-anchored rectangle within it, playing the same idle sprite-strip animation
   as profile.html (pixel-stepped background-position, not CSS steps() — see that file's comments
   for why). Whatever animation a player has equipped will show here too once the future
   points-shop lets them choose beyond idle — both pages read the same equipped state. */
.podium-character-box {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.podium-character-sprite {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
}
/* Character + title/level both bottom-anchored to the same line near the pedestal base (the
   "blue line" in the user's annotated screenshot) — title's top is the same across all three
   ranks so they line up together; character sits directly above it, sized per rank. */
/* Rank1 character is the baseline size; rank2/3 are scaled to 80%/70% of it per the user's
   request, bottom-anchored to the same title line (top=94%) for all three. */
#podiumCharacter1 { left: 37.5%; top: 74.5%; width: 24%; height: 19.5%; }
#podiumTitle1 { left: 49.5%; top: 94%; width: 24%; font-size: 10px; }
#podiumCharacter2 { left: 10.9%; top: 78.4%; width: 19.2%; height: 15.6%; }
#podiumTitle2 { left: 20.5%; top: 94%; width: 20%; font-size: 8px; }
#podiumCharacter3 { left: 69.9%; top: 80.35%; width: 16.8%; height: 13.65%; }
#podiumTitle3 { left: 78.3%; top: 94%; width: 20%; font-size: 8px; }