/* Ape In! — Neon High-Roller: the premium card-room layer.
   Keeps the neon synthwave brand and adds black glass, gold hairlines and casino
   typography. Loaded last, so it refines the base styles rather than replacing them. */

:root {
  --lux: #e8c06a;          /* card-room gold */
  --lux-deep: #a77b2c;
  --lux-soft: rgba(232, 192, 106, .32);
  --glass: linear-gradient(180deg, rgba(26, 14, 44, .9), rgba(10, 5, 20, .92));
  --num: 'Barlow Condensed', 'Oswald', 'Arial Narrow', var(--body);
}

/* ------------------------------------------------------------- topbar --- */
.mode-name { font-family: var(--num); font-weight: 800; font-size: 17px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lux); text-shadow: 0 0 14px rgba(232, 192, 106, .35); }
.round { font-family: var(--num); font-weight: 600; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.icon-btn { background: var(--glass); border: 1px solid var(--lux-soft); }

/* -------------------------------------------------------------- seats --- */
.seat {
  background: var(--glass); border: 1px solid var(--lux-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .35);
}
.seat::before { /* gold hairline across the top of each plaque */
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lux), transparent); opacity: .55;
}
.seat.active { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 30px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.seat.active::after { font-family: var(--num); font-size: 11px; letter-spacing: 2px; background: linear-gradient(180deg, #ffe39a, var(--lux)); color: #2a1700; box-shadow: 0 0 12px rgba(232, 192, 106, .6); }
.seat .nm { font-weight: 700; letter-spacing: .3px; }
.seat .tot { font-family: var(--num); font-weight: 800; font-size: 26px; letter-spacing: .5px; display: flex; align-items: baseline; gap: 2px; }
.seat .tot::before { /* a chip before the bank */
  content: ''; width: .62em; height: .62em; border-radius: 50%; margin-right: 4px; align-self: center; flex: none;
  background: radial-gradient(circle, var(--lux) 0 38%, #2a1700 40% 48%, var(--lux) 50%);
  box-shadow: 0 0 0 1.5px #2a1700, 0 0 8px rgba(232, 192, 106, .5);
}
.seat .tot small { font-family: var(--num); font-weight: 600; font-size: 13px; letter-spacing: .5px; }
.seat .bar { height: 4px; background: rgba(232, 192, 106, .12); }
.seat .bar span { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, var(--lux)), var(--c)); box-shadow: 0 0 10px var(--c); }
.seat .pending { font-family: var(--num); font-size: 13px; letter-spacing: .5px; color: var(--lux); }
.seats.compact .seat .tot { font-size: 21px; justify-content: center; }
.seats.compact .seat .tot::before { display: none; }
.seats::before { background: linear-gradient(90deg, transparent, var(--lux-soft) 12%, var(--lux-soft) 88%, transparent); }

/* ---------------------------------------------------------------- pot --- */
.turnbox {
  background: var(--glass); border: 1px solid var(--lux-soft); padding: 8px 18px 8px 16px; gap: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .4);
}
.turn-label { font-family: var(--num); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #d8cbf2; }
.turn-score { align-items: center; gap: 8px; }
.turn-score .pot-label {
  font-family: var(--num); font-weight: 800; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #2a1700;
  background: linear-gradient(180deg, #ffe39a, var(--lux)); padding: 2px 7px 1px 9px; border-radius: 6px;
}
.turn-score span { font-family: var(--num); font-weight: 800; font-size: 38px; color: var(--lux); text-shadow: 0 0 20px rgba(232, 192, 106, .55); letter-spacing: .5px; }
.turn-score small { font-family: var(--num); font-weight: 600; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

/* ------------------------------------------------------------ actions --- */
.act {
  font-family: var(--num); font-weight: 800; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .18); overflow: hidden;
}
.act::before { /* a glassy sheen across the top half */
  content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent); pointer-events: none;
}
.act-draw { background: linear-gradient(180deg, #8a6bff, #4a2bd6 70%, #3a1fb2); box-shadow: 0 5px 0 #24117a, 0 10px 26px rgba(90, 60, 255, .35); }
.act-roll { background: linear-gradient(180deg, #ff6fbb, #d42a7a 70%, #b01d63); box-shadow: 0 5px 0 #6e0d3e, 0 10px 26px rgba(255, 60, 160, .35); }
.act-stack { background: linear-gradient(180deg, #ffe7a3, var(--lux) 55%, var(--lux-deep)); box-shadow: 0 5px 0 #6b4a12, 0 10px 26px rgba(232, 192, 106, .4); color: #2a1700; border-color: rgba(255, 240, 200, .5); }
.thinking { background: var(--glass); border: 1px solid var(--lux-soft); }

/* --------------------------------------------------------- risk meter --- */
.riskmeter {
  --tone: var(--green); width: min(100%, 520px); padding: 8px 14px 9px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--lux-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.riskmeter.tone-green { --tone: #3ddc84; }
.riskmeter.tone-amber { --tone: #ffb43f; }
.riskmeter.tone-gold { --tone: var(--lux); }
.riskmeter.tone-red { --tone: #ff4d6d; }
.riskmeter.tone-calm { --tone: #b77dff; }
.rm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rm-who { font-family: var(--num); font-weight: 700; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-tag { font-family: var(--num); font-weight: 800; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--tone); text-shadow: 0 0 12px color-mix(in srgb, var(--tone) 60%, transparent); white-space: nowrap; }
.rm-bar {
  position: relative; height: 8px; margin: 7px 0 6px; border-radius: 99px;
  background: linear-gradient(90deg, #1fae5f, #3ddc84 35%, #ffd23f 62%, #ff9b2f 77%, #ff4d6d 92%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.rm-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 60%); }
.rm-even { position: absolute; left: 76.9%; top: -4px; bottom: -4px; width: 2px; background: #fff; opacity: .7; border-radius: 2px; }
.rm-bar i {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 35%, #fff, var(--tone)); box-shadow: 0 0 0 2px #12062a, 0 0 14px var(--tone);
  transition: left .45s cubic-bezier(.2, .9, .3, 1.2);
}
.rm-stats { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.rm-stats b { font-family: var(--num); font-weight: 800; font-size: 15px; color: #fff; letter-spacing: .5px; margin-left: 2px; }

/* the meter says everything the hint line did, so the hint steps aside */
.riskmeter:not([hidden]) ~ .hint { display: none; }

@media (max-width: 700px) {
  .riskmeter { padding: 6px 11px 7px; }
  .rm-stats span { font-size: 10.5px; }
  .rm-stats b { font-size: 13px; }
  .rm-tag { font-size: 13px; }
  .turn-score span { font-size: 32px; }
  .act { font-size: 19px; letter-spacing: 2px; }
}

/* ----------------------------------------------------------- the menu --- */
.section-title { font-family: var(--num); font-weight: 800; font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: var(--lux); }
.section-title::after { background: linear-gradient(90deg, var(--lux-soft), transparent); }
.mode-card {
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(12, 6, 24, .92) 50%), var(--glass);
  border: 1px solid color-mix(in srgb, var(--c) 32%, var(--lux-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 30px rgba(0, 0, 0, .35);
}
.mode-card::before { content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lux), transparent); opacity: .5; }
.mode-card .tier { font-family: var(--num); font-size: 11px; letter-spacing: 1.6px; }
.mode-card .chip, .chip { font-family: var(--num); font-weight: 700; font-size: 12.5px; letter-spacing: .6px; }
.mode-card .play { font-family: var(--num); font-size: 16px; letter-spacing: 1.2px; text-transform: uppercase; }
.pitch {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--lux-soft); font-family: var(--num); font-weight: 700; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase; color: #e9ddff;
}
.pitch b { color: var(--lux); }
.ticker { border-top: 1px solid var(--lux-soft); border-bottom: 1px solid var(--lux-soft); }
.ticker b { font-family: var(--num); letter-spacing: .5px; }
.style-chip { color: var(--lux); }

/* ----------------------------------------------------------- the lobby --- */
.room-head, .rules-list, .lobby-seat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.room-head { background: var(--glass); border-color: var(--lux-soft); }
.room-code { font-family: var(--num); font-weight: 800; letter-spacing: clamp(10px, 3vw, 22px); color: var(--lux); }
.eyebrow { font-family: var(--num); letter-spacing: 2.5px; color: var(--lux); }
.rules-list { background: var(--glass); border-color: var(--lux-soft); }

/* -------------------------------------------------------- result style --- */
.style-card {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 12px 16px; border-radius: 14px; text-align: left;
  background: var(--glass); border: 1px solid var(--lux-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.style-card .ico { font-size: 34px; filter: drop-shadow(0 0 12px rgba(232, 192, 106, .5)); }
.style-card .lbl { font-family: var(--num); font-weight: 700; font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lux); }
.style-card h3 { margin: 0; font-family: var(--num); font-weight: 800; font-size: 24px; letter-spacing: 1.5px; text-transform: uppercase; }
.style-card p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.style-card .nums { margin-left: auto; display: grid; grid-auto-flow: column; gap: 14px; text-align: center; }
.style-card .nums b { display: block; font-family: var(--num); font-weight: 800; font-size: 20px; color: #fff; }
.style-card .nums span { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
@media (max-width: 600px) { .style-card { flex-wrap: wrap; } .style-card .nums { margin-left: 0; width: 100%; justify-content: space-around; } }

/* scoreboard style column: never wraps; on phones the two least important columns step aside */
.scoreboard .style-chip { white-space: nowrap; font-weight: 700; font-size: 13px; }
@media (max-width: 560px) {
  .scoreboard th:nth-child(5), .scoreboard td:nth-child(5),
  .scoreboard th:nth-child(6), .scoreboard td:nth-child(6) { display: none; }
}

/* ============================================================ accounts === */

/* framed avatar chip: emoji token or a character portrait */
.seat .av .emo, .ls-av .emo, .think-av .emo, .ban-av .emo { line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.seat .av .emo { font-size: 24px; }
.seats.compact .seat .av .emo { font-size: 19px; }
.ls-av .emo { font-size: 26px; }
.ban-av .emo { font-size: 40px; }
.think-av { display: grid; place-items: center; }
.think-av .emo { font-size: 34px; }
.ls-av .av-clip img { transform: scale(1.7); transform-origin: 50% 22%; }

.me-btn { position: relative; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; }
.me-btn .dot { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #12062a, 0 0 8px var(--gold); }
.acct-chip {
  font-family: var(--num); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  padding: 7px 12px; border-radius: 99px; color: var(--lux); background: rgba(232,192,106,.08); border: 1px solid var(--lux-soft);
}
.acct-chip.reg { color: var(--green); border-color: rgba(61,220,132,.4); background: rgba(61,220,132,.08); }
.verified { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; background: var(--green); color: #062814; vertical-align: 2px; }

/* profile */
.acct, .lb { grid-template-columns: minmax(0, 1fr); }
.acct > *, .lb > * { min-width: 0; }
.acct { display: grid; gap: 14px; }
.acct-head { display: flex; align-items: center; gap: 16px; }
.acct-head .who { flex: 1; min-width: 0; }
.acct-head h2 { margin: 2px 0; font-family: var(--num); font-weight: 800; font-size: 30px; letter-spacing: 1.5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.acct-head p { margin: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-family: var(--num); font-weight: 800; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: rgba(255,210,63,.14); color: var(--gold); border: 1px solid rgba(255,210,63,.35); }
.badge.reg { background: rgba(61,220,132,.14); color: var(--green); border-color: rgba(61,220,132,.4); }
.acct-x { align-self: flex-start; padding: 6px 12px; }
.acct-card { padding: 14px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--lux-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.acct-card h3 { margin: 0 0 8px; font-family: var(--num); font-weight: 800; font-size: 16px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lux); }
.acct-card h3 small { color: var(--muted); letter-spacing: 1px; text-transform: none; font-weight: 600; }
.acct-card p { margin: 0 0 10px; color: #d8cbf2; font-size: 14px; line-height: 1.45; }
.acct-card.signin { border-color: rgba(61,220,132,.35); background: linear-gradient(160deg, rgba(61,220,132,.10), transparent 60%), var(--glass); }
.login-row { display: flex; gap: 8px; flex-wrap: wrap; }
.login-row .input { flex: 1; min-width: 150px; }
.login-row .input.code { font-family: var(--num); font-weight: 800; font-size: 24px; letter-spacing: 8px; text-align: center; max-width: 220px; }
.fine { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; line-height: 1.45; }
.edit-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.edit-row label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.edit-row .input { font-weight: 700; width: min(240px, 70vw); }
.frames { display: flex; gap: 8px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.gal { padding: 3px; border-radius: 16px; border: 1px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; transition: transform .12s; }
.gal:hover { transform: translateY(-2px); }
.gal.on { border-color: var(--lux); background: rgba(232,192,106,.10); }
.row-end { display: flex; justify-content: flex-end; margin-top: 12px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 8px 6px; border-radius: 10px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(232,192,106,.14); }
.tile b { display: block; font-family: var(--num); font-weight: 800; font-size: 22px; color: #fff; }
.tile span { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.recent { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.recent li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 24px 62px; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.03); font-size: 13.5px; }
.recent li.won { background: linear-gradient(90deg, rgba(232,192,106,.14), transparent); }
.recent .res { font-family: var(--num); font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.recent li.won .res { color: var(--lux); }
.recent .vs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent .sc { font-family: var(--num); font-weight: 800; font-size: 16px; }
.recent .sc small { color: var(--muted); font-weight: 600; }
.recent .when { color: var(--muted); font-size: 12px; text-align: right; }
.acct-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-foot .danger { color: #ff8fa3; margin-left: auto; }
.privacy { text-align: center; }
.acct-loading, .lb-empty { padding: 30px 10px; text-align: center; color: var(--muted); }
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recent li { grid-template-columns: 44px minmax(0, 1fr) auto 22px; }
  .recent .when { display: none; }
  .acct-head h2 { font-size: 24px; }
}

/* leaderboard */
.lb { display: grid; gap: 12px; }
.lb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lb-head h2 { margin: 0; font-family: var(--num); font-weight: 800; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; }
.lb-head > div:first-child { flex: 1; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--lux-soft); }
.seg button { font-family: var(--num); font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; padding: 7px 14px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.seg button.on { background: linear-gradient(180deg, #ffe39a, var(--lux)); color: #2a1700; }
.seg button:disabled { opacity: .35; cursor: default; }
.lb-boards { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn { font-family: var(--num); font-weight: 700; font-size: 13.5px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; cursor: pointer; color: #d8cbf2; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.chip-btn.on { color: var(--lux); border-color: var(--lux); background: rgba(232,192,106,.12); }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lb-list li { display: grid; grid-template-columns: 36px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: var(--glass); border: 1px solid rgba(232,192,106,.12); }
.lb-list li.me { border-color: var(--lux); box-shadow: 0 0 18px rgba(232,192,106,.25); }
.lb-list.mine { border-top: 1px dashed var(--lux-soft); padding-top: 8px; }
.lb-list .rk { font-family: var(--num); font-weight: 800; font-size: 18px; text-align: center; color: var(--muted); }
.lb-list .rk.top { font-size: 22px; }
.lb-list .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list .nm i { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 99px; background: var(--lux); color: #2a1700; vertical-align: 2px; }
.lb-list .vl { font-family: var(--num); font-weight: 800; font-size: 20px; color: var(--lux); }
.lb-cta { text-align: center; color: #d8cbf2; margin: 0; }
.lb-cta a { color: var(--lux); font-weight: 700; }

/* ============================================================ statues === */
.seat .nm .medal { margin-right: 3px; filter: drop-shadow(0 0 6px rgba(255,210,63,.6)); }
.lb-list .nm .medal { margin-right: 5px; }
.badge.statue { background: rgba(232,192,106,.16); color: var(--lux); border-color: var(--lux-soft); }

.podium { padding: 12px 14px 0; border-radius: 16px; background: radial-gradient(120% 90% at 50% 100%, rgba(232,192,106,.16), transparent 60%), var(--glass); border: 1px solid var(--lux-soft); overflow: hidden; }
.pod-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pod-reset { font-family: var(--num); font-weight: 700; font-size: 12.5px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.pod-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin-top: 8px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; }
.pod b { font-weight: 800; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { color: var(--muted); font-size: 12px; font-weight: 700; }
.pod-medal { font-size: 22px; filter: drop-shadow(0 0 8px rgba(255,210,63,.5)); }
.pod.p1 .pod-medal { font-size: 28px; }
.pod-step {
  width: 100%; margin-top: 6px; display: grid; place-items: center; font-family: var(--num); font-weight: 800; font-size: 22px; color: #12062a;
  border-radius: 10px 10px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.pod.p1 .pod-step { height: 56px; background: linear-gradient(180deg, #ffe39a, #e8b13a); }
.pod.p2 .pod-step { height: 40px; background: linear-gradient(180deg, #f4f7ff, #b9c3d6); }
.pod.p3 .pod-step { height: 30px; background: linear-gradient(180deg, #f0b07a, #b0693a); }

/* ======================================================= stakes & progress === */
.mode-card .stars { display: flex; gap: 3px; margin-top: 2px; font-size: 15px; letter-spacing: 0; }
.mode-card .stars i { font-style: normal; color: rgba(255,255,255,.18); }
.mode-card .stars i.on { color: var(--lux, #e8c06a); text-shadow: 0 0 10px rgba(232,192,106,.7); }
.mode-card .stars i.locked { font-size: 11px; opacity: .55; align-self: center; }

.stakes { display: grid; gap: 14px; }
.stakes-head { display: flex; align-items: center; gap: 14px; }
.stakes-art { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--c) 55%, transparent)); }
.stakes-art.framed { object-fit: cover; border-radius: 18px; border: 2px solid var(--c); }
.stakes-head .lbl { font-family: var(--num); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.stakes-head h2 { margin: 0; font-size: 28px; color: var(--c); }
.stakes-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.stakes-q { margin: 0; font-family: var(--num); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; color: var(--lux, #e8c06a); }
.stakes-list { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stakes-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stake {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer;
  padding: 14px; border-radius: 16px; color: inherit; font: inherit; min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid var(--panel-border);
  transition: transform .14s, border-color .14s, background .14s;
}
.stake:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255,255,255,.02)); }
.stake.default { border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.stake.locked { cursor: not-allowed; opacity: .55; }
.stake.locked:hover { transform: none; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color: var(--panel-border); }
.st-top { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.st-name { font-family: var(--num); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; }
.st-star { color: rgba(255,255,255,.2); font-size: 16px; }
.st-star.on { color: var(--lux, #e8c06a); text-shadow: 0 0 10px rgba(232,192,106,.7); }
.st-goal { font-family: var(--num); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.st-goal small { font-size: 14px; color: var(--muted); }
.st-meta { font-size: 12.5px; color: var(--muted); }
.st-blurb { font-size: 12.5px; font-weight: 600; }
@media (max-width: 560px) {
  .stakes-list, .stakes-list.cols-2 { grid-template-columns: minmax(0, 1fr); }
  .stake { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'top goal' 'meta goal' 'blurb goal'; align-items: center; column-gap: 12px; }
  .st-top { grid-area: top; } .st-goal { grid-area: goal; font-size: 30px; } .st-meta { grid-area: meta; } .st-blurb { grid-area: blurb; }
}

.unlocks { display: grid; gap: 8px; margin: 4px 0 12px; }
.unlock {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(232,192,106,.16), rgba(232,192,106,.04)); border: 1px solid rgba(232,192,106,.35);
  animation: rise .35s ease-out both;
}
.unlock:nth-child(2) { animation-delay: .12s; } .unlock:nth-child(3) { animation-delay: .24s; } .unlock:nth-child(4) { animation-delay: .36s; }
.unlock .u-ico { font-size: 24px; width: 40px; display: grid; place-items: center; color: var(--lux, #e8c06a); }
.unlock b { display: block; font-size: 15px; }
.unlock span { font-size: 13px; color: var(--muted); }
.unlock.frame { background: linear-gradient(90deg, rgba(255,79,216,.16), rgba(77,201,255,.06)); border-color: rgba(255,79,216,.4); }

@media (prefers-reduced-motion: reduce) { .unlock { animation: none; } }