/* Candy HUD: the landing's look on the in-game plates and buttons (the top bar, the stats ribbon, the round card, the title card,
   the stage label, the chaos feed, the favourite and camera panels, the enter button and the last-burn card).
   Ink outlines, saturated violet / gold / mint / lava candy, solid ink drop shadows, white Fredoka on the dark plates.
   Look only: sizes and positions stay those of style.css and stats.css, so every breakpoint keeps its layout.
   Loaded last (after candy-ui.css). Sans only, never italic. */
:root{
  --ch-plate:linear-gradient(160deg,#8a4dff 0%,#6a2ae6 46%,#4d16b0 100%);
  --ch-plate-shadow:inset 0 2px 0 #ffffff33,inset 0 -4px 0 #34108a,0 5px 0 var(--cu-ink),0 12px 22px #2a0c5c2e;
  --ch-plate-shadow-sm:inset 0 2px 0 #ffffff33,inset 0 -3px 0 #34108a,0 4px 0 var(--cu-ink),0 9px 16px #2a0c5c26;
  --ch-gold:linear-gradient(180deg,#fff0a8 0%,#ffd84f 48%,#ffc21f 100%);
  --ch-mint:linear-gradient(180deg,#c4fcec 0%,#7ff0cf 48%,#4fdcb3 100%);
  --ch-lava:linear-gradient(180deg,#ffc39a 0%,#ff9152 50%,#ff6f7d 100%);
  --ch-label:#5b2fa0;
}

/* ---------- top bar: the brand + reward pool panel and the buttons ---------- */
.hud-home{border:3px solid var(--cu-ink);background:var(--ch-plate);box-shadow:var(--ch-plate-shadow)}
.pool-stat{border-left:2px solid #ffffff2b}
.pool-stat small{color:var(--cu-mint-2)}
.pool-stat strong{font-weight:700;color:var(--cu-gold);text-shadow:var(--cu-outline-2),0 4px 0 var(--cu-ink)}
.pool-spark{color:var(--cu-gold)}
.topbar nav .hud-button,.topbar .icon-button,.topbar .auto-toggle{border:3px solid var(--cu-ink);color:#fff;
  background:linear-gradient(180deg,#b18cff 0%,#8a4dff 55%,#7338f0 100%);
  box-shadow:inset 0 -4px 0 var(--cu-violet-d),inset 0 2px 0 #ffffff66,0 4px 0 var(--cu-ink)}
.topbar nav .hud-button:active,.topbar .icon-button:active,.topbar .auto-toggle:active{box-shadow:inset 0 -3px 0 var(--cu-violet-d),inset 0 2px 0 #ffffff55,0 1px 0 var(--cu-ink)}
.topbar nav .hud-button span{font-weight:600;text-shadow:0 2px 0 #3a0f8a99}
.topbar .hud-button svg{filter:drop-shadow(0 2px 0 #23093f59)}
.topbar .icon-button{color:#fff}
.topbar nav .leaderboard-button{background:var(--ch-gold);border-color:var(--cu-ink);color:var(--cu-ink);box-shadow:inset 0 -4px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 4px 0 var(--cu-ink)}
.topbar nav .leaderboard-button:active{box-shadow:inset 0 -3px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 1px 0 var(--cu-ink)}
.topbar nav .leaderboard-button span{text-shadow:none}
.topbar .auto-toggle i{background:var(--cu-mint)}

/* ---------- stats ribbon: this round (gold ticket), burn reserve (mint), total burned (lava) ---------- */
.stats-ribbon .ribbon-stat{border:3px solid var(--cu-ink);background:var(--ch-plate);box-shadow:var(--ch-plate-shadow-sm)}
.stats-ribbon .ribbon-stat small{color:var(--cu-text-2)}
.stats-ribbon .ribbon-stat strong{font-weight:600;color:#fff;text-shadow:0 2px 0 var(--cu-ink)}
.stat-icon{filter:drop-shadow(0 2px 0 #23093f66)}
.stats-ribbon .prize-stat{background:var(--ch-gold);border-color:var(--cu-ink);box-shadow:inset 0 -4px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 4px 0 var(--cu-ink),0 9px 16px #2a0c5c26}
.stats-ribbon .prize-stat small,.prize-caption{color:#7a4300}
.stats-ribbon .prize-stat strong{color:var(--cu-violet-d);text-shadow:0 2px 0 #fff3b8}
.stats-ribbon .reserve-stat{background:var(--ch-mint);box-shadow:inset 0 -4px 0 var(--cu-mint-d),inset 0 2px 0 #ffffffa6,0 4px 0 var(--cu-ink),0 9px 16px #2a0c5c26}
.stats-ribbon .reserve-stat small{color:#0e5c46}
.stats-ribbon .reserve-stat strong{color:var(--cu-ink);text-shadow:0 2px 0 #e6fff7}
.stats-ribbon .burn-stat{background:var(--ch-lava);border-color:var(--cu-ink);box-shadow:inset 0 -4px 0 var(--cu-lava-d),inset 0 2px 0 #ffffff80,0 4px 0 var(--cu-ink),0 9px 16px #2a0c5c26}
.stats-ribbon .burn-stat small{color:#6e1a00}
.stats-ribbon .burn-stat strong{color:#fff;text-shadow:var(--cu-outline-2),0 3px 0 var(--cu-ink)}
.stats-context>span:first-child{color:var(--cu-text-2);background:#2a0c66;border:2px solid var(--cu-ink);border-radius:8px;box-shadow:0 2px 0 var(--cu-ink)}
.stats-context #stats-token-market,.stats-context a{color:var(--ch-label)}

/* ---------- round card ---------- */
.round-card{color:var(--cu-text);border:3px solid var(--cu-ink);border-radius:22px;background:var(--ch-plate);box-shadow:var(--ch-plate-shadow)}
.eyebrow{color:var(--cu-text-2)}
.round-card .eyebrow>span:last-child{opacity:.8;padding-left:8px}
.eyebrow .green-dot{background:var(--cu-mint);box-shadow:0 0 0 3px #5fe6bf40}
.remaining>strong{font-weight:700;color:#fff;text-shadow:0 4px 0 var(--cu-ink)}
.remaining>span{color:var(--cu-violet-2)}
.remaining small{color:var(--cu-text-2)}
.population-track{background:#230c3f;box-shadow:inset 0 2px 0 #0000004d,0 1px 0 #ffffff26}
.population-track i{background:linear-gradient(90deg,var(--cu-mint),#b6fbe6)}
.round-meta{color:var(--cu-text-2)}
.round-meta #round-clock{color:var(--cu-gold);font-variant-numeric:tabular-nums}
.stage-progress span{background:#2f0f78;color:var(--cu-text-2);border:2px solid var(--cu-ink);box-shadow:0 2px 0 var(--cu-ink)}
.stage-progress .active{background:var(--ch-gold);color:var(--cu-ink)}
.stage-progress .done{background:var(--ch-mint);color:var(--cu-ink)}

/* ---------- title card (lobby and stage headline) ---------- */
.headline{border:3px solid var(--cu-ink);background:var(--ch-plate);box-shadow:var(--ch-plate-shadow)}
.headline .mini-tag,body[data-stage="2"] .headline .mini-tag{background:var(--ch-gold);border:2.5px solid var(--cu-ink);color:var(--cu-ink);box-shadow:0 2px 0 var(--cu-ink)}
.headline h1,body[data-phase=playing] .headline h1,body[data-stage="2"]:not([data-phase="lobby"]) .headline h1{font-weight:700;color:#fff;text-shadow:0 3px 0 var(--cu-ink)}
.headline em{color:var(--cu-gold)}
.headline p,body[data-phase=playing] .headline p,body[data-stage="2"]:not([data-phase="lobby"]) .headline p{color:var(--cu-text-2)}

/* ---------- stage label (Stage 1 of 3 · Cloud Clash) ---------- */
/* the plate's left edge lines up with the round card; it grows right and down */
.arena-label{padding:5px 8px 5px 5px;border:3px solid var(--cu-ink);border-radius:16px;background:var(--ch-plate);box-shadow:var(--ch-plate-shadow-sm)}
.arena-label,body[data-stage="2"]:not([data-phase="lobby"]) .arena-label{color:#fff}
.arena-label small,body[data-stage="2"]:not([data-phase="lobby"]) .arena-label small{color:var(--cu-text-2)}
.arena-label strong{font-weight:600}
.map-icon{background:var(--ch-gold);border:2.5px solid var(--cu-ink);color:var(--cu-violet-d);box-shadow:inset 0 -3px 0 var(--cu-gold-d)}
.arena-label button,body[data-stage="2"] .arena-label button{display:grid;place-items:center;font:700 15px/1 var(--cu-display);color:#fff;background:var(--cu-violet-2);border:2.5px solid var(--cu-ink);box-shadow:0 2px 0 var(--cu-ink)}
.arena-label button:hover{background:#c4a6ff}

/* ---------- the chaos feed ---------- */
.feed-card{width:220px;padding:12px 10px 4px;border:3px solid var(--cu-ink);border-radius:20px;background:var(--ch-plate);box-shadow:var(--ch-plate-shadow)}
.feed-heading,body[data-stage="2"]:not([data-phase="lobby"]) .feed-heading{color:var(--cu-text-2);border-bottom:2px dashed #ffffff2e;padding-bottom:10px}
.feed-card ol{margin:12px 0}
.feed-card li,body[data-stage="2"] .feed-card li{color:#fff;background:#2a0c66;border:2px solid #ffffff1a;border-radius:12px}
.feed-card li small{color:var(--cu-muted)}
.feed-card .feed-empty{color:var(--cu-text-2)}

/* ---------- your favourite ---------- */
/* the plate's left edge lines up with the round card and its content moves up; tighter gaps pay for the padding, so the enter button, the camera panel,
   the caption and the footer keep their room */
.follow-card{gap:8px;padding:7px 4px 7px 8px;border:3px solid var(--cu-ink);border-radius:20px;background:var(--ch-plate);box-shadow:var(--ch-plate-shadow-sm)}
.follow-card,body[data-stage="2"]:not([data-phase="lobby"]) .follow-card{color:#fff}
.follow-card small,.follow-card>div>span,body[data-stage="2"]:not([data-phase="lobby"]) :is(.follow-card small,.follow-card>div>span){color:var(--cu-text-2)}
.follow-card strong{font-weight:600}
.follow-card button{margin-left:0}
@media(max-width:1000px){.follow-card{gap:5px}}
.follow-card button,body[data-stage="2"] .follow-card button{color:var(--cu-ink);background:var(--ch-gold);border:2.5px solid var(--cu-ink);box-shadow:inset 0 -3px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 3px 0 var(--cu-ink);transition:transform .16s,box-shadow .16s}
.follow-card button:hover{transform:translateY(-2px);box-shadow:inset 0 -3px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 5px 0 var(--cu-ink)}
.follow-card button:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--cu-gold-d),0 1px 0 var(--cu-ink)}

/* ---------- camera panel (zoom and highlight) ---------- */
/* 2 px thicker border, 2 px less padding: the panel keeps its size */
.camera-controls{padding:3px}
.camera-controls,body[data-stage="2"] .camera-controls,body[data-zoomed=yes] .camera-controls{border:3px solid var(--cu-ink);border-radius:16px;background:var(--ch-plate);box-shadow:var(--ch-plate-shadow-sm)}
.zoom-controls{border-right:2px solid #ffffff2b}
.camera-controls button,.camera-controls .zoom-button,body[data-stage="2"] .camera-controls .zoom-button,.camera-controls #highlight-button{color:#fff}
.camera-controls .zoom-button:hover,.camera-controls button:hover{background:#ffffff26;color:#fff}
.camera-controls .selected,.camera-controls #highlight-button.selected{background:var(--ch-gold);color:var(--cu-ink);box-shadow:inset 0 -3px 0 var(--cu-gold-d),0 2px 0 var(--cu-ink)}
.camera-controls>span{color:var(--ch-label)}

/* ---------- enter button, captions, replay controls, footer ---------- */
.start-button{color:var(--cu-ink);background:var(--ch-gold);border:3px solid var(--cu-ink);border-radius:18px;
  box-shadow:inset 0 -5px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 6px 0 var(--cu-ink),0 14px 24px #2a0c5c33;transition:transform .16s,box-shadow .16s}
.start-button:hover{background:var(--ch-gold);transform:translateY(-2px);box-shadow:inset 0 -5px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 8px 0 var(--cu-ink),0 18px 26px #2a0c5c3d}
.start-button:active{transform:translateY(4px);box-shadow:inset 0 -3px 0 var(--cu-gold-d),inset 0 2px 0 #ffffffa6,0 2px 0 var(--cu-ink)}
.ready-caption{color:var(--ch-label);font-weight:500}
.play-controls>p{color:var(--ch-label)}
.replay-controls{border:3px solid var(--cu-ink);background:var(--ch-plate);box-shadow:var(--ch-plate-shadow-sm)}
.replay-controls button{color:#fff}
.replay-controls button:hover{background:#ffffff26}
footer{color:#7a55b0;border-top-color:#5b2fa033}
body[data-stage="2"]:not([data-phase="lobby"]) footer{border-top-color:#fff0d833}
footer>span:nth-child(2){color:var(--ch-label)}
body[data-stage="2"]:not([data-phase="lobby"]) footer>span:nth-child(2){color:#fff0d8}

/* ---------- last round's buy and burn (lobby) ---------- */
.burn-news{color:var(--cu-ink);border:3px solid var(--cu-ink);background:var(--ch-lava);box-shadow:inset 0 -4px 0 var(--cu-lava-d),inset 0 2px 0 #ffffff80,0 5px 0 var(--cu-ink),0 12px 22px #2a0c5c2e}
.burn-news-icon{color:#fff;text-shadow:0 2px 0 var(--cu-ink)}
.burn-news>small{color:#6e1a00}
.burn-news>strong{font-weight:700;color:#fff;text-shadow:var(--cu-outline-2),0 3px 0 var(--cu-ink)}
.burn-news>p{color:#4a1400}
.burn-news .burn-tx-links a{color:var(--cu-ink);background:#fff4ea;border:2px solid var(--cu-ink);box-shadow:0 2px 0 var(--cu-ink)}
.burn-news .burn-tx-links a:hover{background:#fff}

/* ---------- the "your pick" marker over the favourite guy ---------- */
.follow-marker{color:var(--cu-ink);background:var(--cu-gold);border:2px solid var(--cu-ink);box-shadow:0 2px 0 var(--cu-ink)}
.follow-marker span{color:var(--cu-ink)}

/* Short desktop screens: the feed keeps its three newest entries so its plate ends above the camera panel; with the last-burn card
   in the lobby (it pushes the feed down) the feed steps aside. Narrow desktops: the feed plate stays off the arena's right edge. */
@media(min-width:1001px) and (max-height:900px){.feed-card li:nth-child(n+4){display:none}}
@media(min-width:1001px) and (max-height:820px){body[data-phase="lobby"][data-burn-news="yes"] .feed-card{display:none}}
@media(min-width:1001px) and (max-width:1240px){.feed-card{width:198px;padding:10px 8px 2px}}
/* Title card in the top bar (shorter desktops, and 800-1000 wide): more room above the title for the gold tag. */
@media(min-width:1001px) and (max-height:1009px){.headline{padding-top:10px}}
@media(min-width:800px) and (max-width:1000px) and (min-aspect-ratio:4/5){.headline{padding-top:14px}}
/* 1001-1100 wide: the find button shows its icon only, so the favourite plate stays clear of the centred enter button. */
@media(min-width:1001px) and (max-width:1100px){.follow-card button span{display:none}}

/* Phones: the reward pool sits in the top bar as its own plate. */
@media(max-width:640px){
  .pool-stat{border:3px solid var(--cu-ink);background:var(--ch-plate);box-shadow:var(--ch-plate-shadow-sm)}
  .round-card{border-radius:16px}
  .headline{border-radius:16px}
  .arena-label{padding:2px 6px 2px 2px;margin-top:-5px;border-radius:13px}
  .follow-card{left:16px;padding:4px 4px 4px 4px;border-radius:16px}
  .start-button{border-radius:14px}
  .camera-controls{padding:2px}
  .stage-progress span{border-width:1.5px;box-shadow:0 1.5px 0 var(--cu-ink)}
}