/* Game look (see docs/redesign-game-look.md): one continuous space world, chunky glossy UI, screen-to-screen
   transitions with shared elements. All art here is original CSS; nothing is copied from the references. */
:root {
  --play1: #5BE584; --play2: #1FB45A; --playlip: #0E7A3A;   /* the PLAY green */
  --gold-lip: #B07A00;
  --glass: rgba(24, 16, 74, .72);
  --hair: rgba(255, 255, 255, .1);
  --spring: cubic-bezier(.2, .9, .25, 1.15);
  --glide: cubic-bezier(.32, .72, 0, 1);
}

/* ---------- chunky glossy buttons ---------- */
.btn { font-family: var(--game); font-style: italic; font-weight: 800; letter-spacing: .2px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 0 var(--gold-lip), 0 10px 22px -10px rgba(255, 197, 61, .7);
  transition: transform 180ms var(--glide), filter 180ms var(--glide), box-shadow 180ms var(--glide); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--gold-lip); }
.btn.ghost { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 rgba(0, 0, 0, .35); }
.btn.ghost:active:not(:disabled) { box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.btn.go, .btn.play, #go, #quick { color: #fff; text-transform: uppercase; letter-spacing: .6px; text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, var(--play1), var(--play2));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .15), 0 5px 0 var(--playlip), 0 14px 28px -12px rgba(31, 180, 90, .8); }
.btn.go:active:not(:disabled), .btn.play:active:not(:disabled), #go:active:not(:disabled), #quick:active:not(:disabled) { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--playlip); }
.bigbtn.play.ranked { color: #2A1A00; text-shadow: none; background: linear-gradient(180deg, #FFE08A, #FFB21F);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 5px 0 var(--gold-lip), 0 14px 28px -12px rgba(255, 178, 31, .8); }

/* surfaces: translucent glass panels over the sky instead of flat slabs */
.card, .playcard, body .friendtray, body .pacard { background: linear-gradient(165deg, rgba(44, 34, 120, .78), rgba(25, 19, 74, .82));
  border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 40px -24px rgba(5, 3, 25, .9); }
.hero h1, .playhub h1, .shop h1 { font: italic 900 clamp(30px, 5vw, 46px)/1.05 var(--game); letter-spacing: -.3px; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }

/* ---------- one continuous world: view transitions ---------- */
.top { view-transition-name: topbar; }
.hubsky { view-transition-name: sky; }
.walker { view-transition-name: walker; }
.pedestal { view-transition-name: pedestal; }
.hub .today, .dstage .dpair { view-transition-name: daily-card; }
.hcard.hduel, .lobby .lstage { view-transition-name: duel-card; }
.hcard.hshop, .shop .shophead { view-transition-name: shop-card; }
.hcard.hunl, .unlhero { view-transition-name: unl-card; }

::view-transition-group(*) { animation-duration: 340ms; animation-timing-function: var(--glide); }
::view-transition-old(root) { animation: 220ms var(--glide) both vt-out; }
::view-transition-new(root) { animation: 340ms var(--glide) both vt-in; }
::view-transition-old(topbar), ::view-transition-new(topbar), ::view-transition-old(sky), ::view-transition-new(sky) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Daily Challenge stage ---------- */
.dstage { position: relative; padding-bottom: 8px; }
/* WikiWalk's own "map": a warm constellation of page nodes glowing behind the pair */
.dstage::before { content: ""; position: absolute; inset: 40px 0 120px; z-index: -1; pointer-events: none; opacity: .85;
  background:
    radial-gradient(4px 4px at 18% 30%, #FFD9A8, transparent), radial-gradient(3px 3px at 32% 62%, #FFB3C7, transparent),
    radial-gradient(4px 4px at 48% 22%, #FFE6B8, transparent), radial-gradient(3px 3px at 63% 70%, #FFB3C7, transparent),
    radial-gradient(4px 4px at 80% 36%, #FFD9A8, transparent), radial-gradient(3px 3px at 88% 64%, #FFC2A1, transparent),
    radial-gradient(42% 60% at 30% 50%, rgba(255, 120, 150, .28), transparent 70%),
    radial-gradient(42% 60% at 72% 46%, rgba(255, 170, 90, .26), transparent 70%); }
.dswitch { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(420px, 100%); margin: 6px auto 0;
  padding: 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.dswitch b { font: italic 900 20px/1 var(--game); text-transform: uppercase; letter-spacing: .4px; text-align: center; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsw { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff; text-decoration: none; font-size: 26px; line-height: 1; }
a.dsw { background: rgba(255, 255, 255, .08); transition: background-color 180ms var(--glide), transform 180ms var(--glide); }
a.dsw:hover { background: rgba(255, 255, 255, .16); } a.dsw:active { transform: scale(.94); }
.dstage .hero { padding-top: 18px; }
.dstage .hero h1 { font-size: clamp(26px, 4.4vw, 40px); }
.dpair { position: relative; align-items: center; margin: 22px 0 18px; }
.dpair .end { border-radius: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 0 46px -6px rgba(255, 150, 120, .55), 0 24px 40px -22px rgba(5, 3, 25, .9);
  animation: floaty 6s ease-in-out infinite alternate; }
.dpair .end + .arrow + .end { animation-delay: -3s; }
@keyframes floaty { to { transform: translateY(-6px); } }
.dpair .arrow { display: grid; justify-items: center; gap: 6px; }
.dpair .arrow i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #2A1A00; font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #FFF1C4, #FFC53D 60%, #E59A00); box-shadow: 0 0 0 6px rgba(255, 197, 61, .2), 0 0 30px rgba(255, 197, 61, .6);
  animation: dpulse 2.4s ease-in-out infinite; }
@keyframes dpulse { 50% { transform: scale(1.08); } }
.dpair .arrow b { font: italic 900 16px/1 var(--game); color: #fff; }
.dsteps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; }
.dsteps li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px 12px; border-radius: 18px; font-size: 13px; color: #D3D5F5;
  background: linear-gradient(165deg, rgba(44, 34, 120, .85), rgba(25, 19, 74, .9)); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.dsteps li span { font-size: 30px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.dsteps li b { display: block; font: italic 900 14px/1.15 var(--game); text-transform: uppercase; color: #fff; letter-spacing: .3px; }
.dplaybar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: linear-gradient(90deg, rgba(58, 40, 160, .96), rgba(88, 52, 200, .96));
  border: 2px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 40px -16px rgba(5, 3, 25, .9); }
.dplaybar #intro-cta { margin-left: auto; text-align: right !important; }
.dplaybar .btn { min-height: 54px; padding: 12px 40px; font-size: 20px; }
.dnote { margin: 0; font: italic 800 15px/1.2 var(--game); color: #D3D5F5; }
.dwalkers { margin: 0; display: flex; align-items: center; gap: 8px; font: italic 800 15px/1.2 var(--game); color: #fff; min-width: 0; }
.dfaces { letter-spacing: -6px; font-size: 22px; padding-right: 6px; }
.dstage .rules { margin-top: 16px; }
@media (max-width: 720px) {
  .dsteps { grid-template-columns: 1fr; }
  .dpair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin: 16px 0 14px; }
  .dpair .end img, .dpair .end .noimg, .dpair .end p { display: none; }
  .dpair .end { min-height: 96px; justify-content: center; padding-bottom: 12px; border-radius: 18px; }
  .dpair .end h3 { font-size: 17px; overflow-wrap: anywhere; }
  .dpair .arrow { display: grid; gap: 4px; }
  .dpair .arrow i { transform: none; width: 44px; height: 44px; font-size: 22px; }
  .dpair .arrow .diff { display: none; }
  .dsteps li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; }
  .dsteps li span { grid-row: span 2; font-size: 26px; }
  .dplaybar { border-radius: 22px; padding: 8px; flex-wrap: wrap; justify-content: center; }
  .dplaybar #intro-cta { margin: 0; width: 100%; }
  .dplaybar .btn { width: 100%; }
  .dwalkers, .dnote { justify-content: center; width: 100%; padding-top: 4px; text-align: center; }
}

/* ---------- Duels / ranked lobby ---------- */
.lobby { display: grid; gap: 18px; align-items: start; grid-template-columns: 72px minmax(0, 1fr) minmax(280px, 360px);
  grid-template-areas: "rail stage side" "rail how how"; }
.lrail { grid-area: rail; position: sticky; top: 16px; display: grid; gap: 10px; }
.lstage { grid-area: stage; } .lside { grid-area: side; display: grid; gap: 14px; } .lobby .howto { grid-area: how; }
.lrail a { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 18px; color: #fff; text-decoration: none;
  background: var(--glass); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform 180ms var(--glide), background-color 180ms var(--glide); }
.lrail a span { font-size: 26px; line-height: 1.1; }
.lrail a small { font: italic 800 11px/1.1 var(--game); text-transform: uppercase; color: #C9CCF2; }
.lrail a small b { font-size: 16px; color: #fff; }
.lrail a.on { background: linear-gradient(180deg, #5B4BE0, #3A2CB0); border-color: rgba(255, 255, 255, .25); }
.lrail a:hover { transform: translateY(-2px); }
/* the stage: WikiWalk's endless library, lit warm from below (CSS only) */
.lstage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 18px 22px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 45% at 50% 62%, rgba(255, 170, 90, .28), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(180deg, rgba(160, 120, 255, .10) 0 3px, transparent 3px 46px),
    linear-gradient(180deg, #24185F, #120C3A 75%);
  border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 50px -28px rgba(5, 3, 25, .95); }
.lstage .hubtop { width: 100%; margin-bottom: 4px; }
.lstage .hubtop h1 { margin: 0; }
.lstage .whoami { margin: 6px 0 0; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(10, 6, 40, .55); border: 1px solid var(--hair); }
.lstage .whoami b { font: italic 900 18px/1.1 var(--game); }
.lwalker { margin-top: 14px; }
.lplay { width: min(520px, 100%); margin-top: 18px; padding: 18px; text-align: center; }
.lplay > p { margin: 0 auto 14px; font-size: 14px; }
.lplay .joinrow { text-align: left; }
.lcard { padding: 16px 18px; border-radius: 22px; background: linear-gradient(165deg, rgba(58, 44, 150, .85), rgba(28, 20, 80, .9));
  border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 36px -22px rgba(5, 3, 25, .9); }
.lcard h2 { font: italic 900 24px/1.05 var(--game); margin: 2px 0 6px; }
.lcard p { margin: 0 0 6px; color: #D3D5F5; }
.lkick { font: italic 800 11px/1 var(--game); text-transform: uppercase; letter-spacing: .8px; color: #FFC53D; }
.lseason { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 197, 61, .25), transparent 60%), linear-gradient(165deg, rgba(58, 44, 150, .85), rgba(28, 20, 80, .9)); }
.lseason b { font: italic 900 18px/1 var(--game); color: #fff; }
.llevel .xpbar { margin: 8px 0; }
.lhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.lhead h3 { font: italic 900 18px/1 var(--game); margin: 0; }
.lrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lrows li { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.lrows li.me { background: rgba(255, 197, 61, .16); box-shadow: inset 0 0 0 1px rgba(255, 197, 61, .5); }
.lrows .lname { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrows .lpts { font: italic 900 15px/1 var(--game); color: #FFC53D; }
.lrows .lrank { color: #AEB4E6; font-size: 13px; text-align: right; }
.lrows .lline { display: block; background: none; padding: 2px 0; text-align: center; font: italic 800 11px/1 var(--game); color: #5BE584; text-transform: uppercase; letter-spacing: .6px; }
.lrows .lline span { padding: 0 8px; background: linear-gradient(90deg, transparent, rgba(91, 229, 132, .15), transparent); }
@media (max-width: 1099px) {
  .lobby { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "stage" "side" "how"; }
  .lrail { position: static; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .lrail a { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 6px; padding: 8px; }
  .lrail a span { font-size: 20px; }
}
@media (max-width: 720px) {
  .lstage { padding: 14px 12px 16px; border-radius: 22px; }
  .lwalker, .lwalker > svg { width: 150px; height: 150px; }
  .lwalker > img.av { width: 136px; height: 136px; }
  .lrail a small { font-size: 10px; }
}

/* ---------- shop ---------- */
.avstage { view-transition-name: walker; }
.shopwrap { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.shopstage { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; padding: 26px 12px 22px; border-radius: 28px;
  background: radial-gradient(60% 40% at 50% 70%, rgba(255, 107, 214, .25), transparent 70%), linear-gradient(180deg, rgba(44, 34, 120, .6), rgba(18, 12, 58, .6));
  border: 1px solid var(--hair); }
.shopstage .pill { margin-top: -6px; }
.shop h2 { font: italic 900 22px/1.1 var(--game); margin: 18px 0 10px; }
.shophead { padding-top: 6px; }
.wallet { background: var(--glass); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); font: italic 800 15px/1 var(--game); }
.rtag { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 6px; font: italic 900 10px/1 var(--game); text-transform: uppercase; letter-spacing: .6px;
  color: #10082E; background: var(--rc); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); z-index: 1; }
.itemcard { position: relative; padding-top: 26px; border-radius: 18px; background: linear-gradient(170deg, rgba(58, 44, 150, .7), rgba(24, 17, 70, .9));
  border: 2px solid color-mix(in srgb, var(--rc) 45%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 22px -10px var(--rc);
  transition: transform 200ms var(--glide), box-shadow 200ms var(--glide); }
button.itemcard:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 30px -6px var(--rc); }
.itemcard .rar { display: none; }
.itemcard.locked .rar { display: block; }
.itemcard .price { font: italic 900 14px/1 var(--game); color: #FFC53D; }
.bundles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bundle { position: relative; flex-direction: column; text-align: center; padding: 34px 16px 18px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 30%, rgba(255, 197, 61, .22), transparent 70%), linear-gradient(170deg, rgba(70, 50, 170, .85), rgba(28, 18, 80, .95));
  border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 40px -24px rgba(5, 3, 25, .95); }
.bundle .prev svg { width: 120px; height: 120px; filter: drop-shadow(0 12px 18px rgba(5, 3, 25, .6)); }
.bundle > div { justify-items: center; }
.bundle b { font: italic 900 22px/1.1 var(--game); }
.picksbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 10px; }
.picksbar h2 { margin: 0; }
.picksbar .timer { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: italic 800 13px/1.2 var(--game); color: #fff; }
.picksbar .btn { margin-left: auto; }
.earn { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 20px; margin: 4px 0 6px;
  background: linear-gradient(90deg, rgba(58, 40, 160, .9), rgba(88, 52, 200, .9)); border: 1px solid var(--hair); }
.earn > span { font-size: 34px; } .earn b { font: italic 900 17px/1.1 var(--game); } .earn p { margin: 4px 0 0; color: #E4E6FF; }
@media (max-width: 860px) {
  .shopwrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shopstage { position: static; padding: 14px 12px; }
  .shopstage .walker, .shopstage .walker > svg { width: 140px; height: 140px; }
  .picksbar .btn { display: none; }   /* the pill under the walker is right above */
}

/* ---------- full-screen level-up / promotion ---------- */
.celebrate { overflow: hidden; background: linear-gradient(135deg, #1A1150 0%, #2E1E86 55%, #3B2AA8 100%); }
.celrays { position: absolute; inset: -50%; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .07) 0 90px, transparent 90px 230px);
  animation: rays 14s linear infinite; }
@keyframes rays { to { transform: translateX(230px); } }
.celebrate .cel { position: relative; z-index: 1; display: grid; justify-items: center; }
.celebrate .badgebox { width: 200px; height: 200px; margin-bottom: 10px; filter: drop-shadow(0 18px 30px rgba(5, 3, 25, .6)); }
.celebrate .congrats { margin: 0; font: italic 800 clamp(16px, 2.6vw, 20px)/1.2 var(--game); color: #fff; }
.celebrate .kick { margin-top: 2px; font: italic 800 13px/1.2 var(--game); letter-spacing: 1.5px; color: #FFC53D; }
.celebrate h2 { font: italic 900 clamp(40px, 9vw, 76px)/1 var(--game); text-transform: uppercase; margin: 6px 0 10px; color: #fff;
  background: linear-gradient(180deg, #FFFFFF 30%, #C9D6FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 rgba(10, 6, 40, .55)) drop-shadow(0 0 24px rgba(160, 180, 255, .45)); }
.celebrate .sub { color: #D3D5F5; }
.celbtns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.celbtns .btn { min-width: 180px; font-size: 18px; }
.celebrate .skiphint { font: italic 700 12px/1.2 var(--game); color: rgba(255, 255, 255, .55); width: max-content; max-width: 90vw; text-align: center; }
/* a slow light burst and twinkles behind the badge, a gold ribbon for the kicker, and a staggered entrance */
.celebrate .badgebox::before { content: ""; position: absolute; inset: -70%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 107, .5), rgba(255, 214, 107, .1) 45%, transparent 70%),
    repeating-conic-gradient(rgba(255, 236, 170, .2) 0 8deg, transparent 8deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent); mask-image: radial-gradient(closest-side, #000 35%, transparent);
  animation: burst 18s linear infinite; }
.celebrate .badgebox::after { content: ""; position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(3px 3px at 12% 30%, #fff, transparent), radial-gradient(2px 2px at 86% 22%, #FFE08A, transparent),
    radial-gradient(3px 3px at 78% 82%, #fff, transparent), radial-gradient(2px 2px at 20% 78%, #B9A8FF, transparent),
    radial-gradient(2px 2px at 50% 4%, #fff, transparent);
  animation: twinkle 1.8s ease-in-out infinite; }
@keyframes burst { to { transform: rotate(360deg); } }
@keyframes twinkle { 50% { opacity: .25; } }
.celebrate .kick { margin-top: 8px; padding: 5px 16px 6px; border-radius: 6px; color: #2a1a00; letter-spacing: 2px;
  background: linear-gradient(180deg, #FFE08A, #F2A81F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #B5740A; transform: skewX(-8deg); }
.celebrate .cel > :not(.badgebox) { animation: celin 520ms var(--glide) both; }
.celebrate .cel > .kick { animation-delay: 120ms; } .celebrate .cel > h2 { animation-delay: 200ms; }
.celebrate .cel > .sub { animation-delay: 280ms; } .celebrate .cel > .celbtns { animation-delay: 360ms; }
@keyframes celin { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* big division badges (celebration, lobby) read as glossy game badges */
.bigdiv .divb { filter: drop-shadow(0 0 28px color-mix(in srgb, var(--dc) 65%, transparent)) drop-shadow(0 10px 0 rgba(10, 6, 40, .45)); }
.bigdiv .divb path { fill: color-mix(in srgb, var(--dc) 72%, #1A1150); stroke: #fff; stroke-width: 1.6; }
.bigdiv .divb::after { content: ""; position: absolute; inset: 9% 20% 56% 20%; border-radius: 50% 50% 40% 40%; background: linear-gradient(rgba(255, 255, 255, .5), transparent); pointer-events: none; }
.bigdiv .divb b { color: #fff; font-family: var(--game); font-style: italic; text-shadow: 0 3px 0 rgba(10, 6, 40, .4); }
.lstage .whoami .divb path { fill: color-mix(in srgb, var(--dc) 55%, #1A1150); }
.lstage .whoami .divb b { color: #fff; }

/* ---------- in-game: glossy HUD over the sky, the article as a lit page ---------- */
.hud { top: 8px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(76, 60, 210, .88), rgba(32, 22, 110, .92));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), 0 6px 0 rgba(10, 6, 40, .55), 0 18px 40px -14px rgba(8, 4, 40, .8); }
.hud .route { color: #E4E3FF; }
.hud .route .target { display: inline-block; padding: 3px 10px 4px; border-radius: 999px; color: #2a1a00; font: italic 800 14px/1.2 var(--game);
  background: linear-gradient(180deg, #FFE08A, #F2A81F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #B5740A; }
.hud .stat b { font: italic 900 26px/1 var(--game); color: #fff; text-shadow: 0 3px 0 rgba(10, 6, 40, .45); }
.hud .stat span { font: 800 10px/1 var(--game); letter-spacing: 1.2px; text-transform: uppercase; color: #BDB8FF; }
.depth { height: 8px; border-radius: 999px; background: rgba(10, 6, 40, .55); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); }
.depth i { border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(90deg, #5BE584, #FFC53D, #FF6B6B); }
#article { border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 0 0 6px rgba(140, 124, 255, .22), 0 26px 60px -20px rgba(8, 4, 40, .85); }
@media (max-width: 720px) {
  .hud { top: 4px; border-radius: 18px; }
  .hud .stat b { font-size: 22px; }
  /* the nav scrolls sideways on phones: fade its right edge so the cut-off reads as "more" */
  .top nav { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
/* a player without a picture keeps their (empty) avatar cell, so the name stays in its wide column */
ol.board li > img.av[hidden] { display: block; visibility: hidden; }

/* duel moments (VS, countdown, round result) live in the same world as the celebration */
body .cine:not(.celebrate) { background: radial-gradient(700px 460px at 50% 30%, rgba(140, 124, 255, .35), transparent 70%), linear-gradient(160deg, #1A1150, #2E1E86 60%, #3B2AA8); }
body .cine:not(.celebrate) h2 { font-family: var(--game); font-style: italic; font-weight: 900; text-shadow: 0 4px 0 rgba(10, 6, 40, .45); }
body :is(.rcol, .mhp, .dtgt, .xpend, .rankend, .codebox) { background: linear-gradient(165deg, rgba(58, 44, 150, .8), rgba(28, 20, 80, .88));
  border-color: var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 32px -20px rgba(5, 3, 25, .9); }