/* Shared Doobin glass language: lit, translucent surfaces over the panda world. */
:root {
  color-scheme:dark;
  --purple:#dec0ff;
  --muted:#d0c5d8;
  --gold:#f2cf94;
  --glass-fill:linear-gradient(135deg,rgba(255,250,244,.12),rgba(255,255,255,.025) 60%),rgba(38,29,49,.56);
  --glass-edge:rgba(255,238,255,.24);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 1px 0 0 rgba(255,255,255,.04),0 18px 48px rgba(8,5,15,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  background:#1c1723;
}
html {scroll-padding-top:112px;scrollbar-color:#a88bb5 #211a28}
body {background:transparent;color:#fff8f5}
.ambient {background:radial-gradient(ellipse at 4% 8%,rgba(154,105,193,.40),transparent 48%),radial-gradient(ellipse at 100% 62%,rgba(181,123,66,.27),transparent 55%),linear-gradient(125deg,#221b2c,#1b1721 48%,#292021)}
.topbar {position:sticky;top:16px;z-index:20;width:min(1120px,calc(100% - 48px));height:68px;margin:16px auto 0;padding:0 24px;border:1px solid var(--glass-edge);border-radius:22px;background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,.025)),rgba(33,26,42,.72);box-shadow:var(--glass-shadow);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}
.topbar > div {gap:6px}
.topbar > div a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:12px;transition:background .3s,border-color .3s,color .3s;color:#d8cde1}
.topbar > div a:hover,.topbar > div a[aria-current="location"] {color:#fff6ff;background:rgba(225,190,255,.12);border-color:rgba(239,213,255,.2)}
.scroll-progress {z-index:30;background:linear-gradient(90deg,#cbb0f0,#f2cf94)}
.hero {padding-top:40px}
.hero header {width:min(960px,100%);padding:28px 40px;border:1px solid var(--glass-edge);border-radius:32px;background:linear-gradient(120deg,rgba(205,166,241,.13),rgba(255,255,255,.025) 55%,rgba(249,209,157,.07)),rgba(42,31,51,.36);box-shadow:var(--glass-shadow);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%)}
.hero h1 {font-size:clamp(3rem,9vw,7.1rem);letter-spacing:-.075em;text-shadow:0 2px 0 rgba(64,43,84,.5),0 8px 36px rgba(0,0,0,.15)}
.hero h1 span {color:#dec0ff}
.profile-orbit {margin-bottom:20px}
.intro {color:#e1d4e9;margin:20px 0 28px}
.live-card,.link,.short-card,.cinema,.loadout-card,.weekly-spotlight,.leaderboard-wrap,.next-stream,.schedule-row {
  background:var(--glass-fill);border-color:var(--glass-edge);box-shadow:var(--glass-shadow);
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
}
.live-card {margin-bottom:0;background:rgba(23,17,31,.30);box-shadow:inset 0 1px rgba(255,255,255,.06);border-color:rgba(255,238,255,.16)}
.live-card a {background:linear-gradient(130deg,rgba(229,193,255,.22),rgba(229,193,255,.09));border:1px solid rgba(235,206,255,.35);box-shadow:inset 0 1px rgba(255,255,255,.15);color:#f3deff;transition:background .25s,translate .3s var(--ease),box-shadow .3s}
.home-links {width:min(800px,100%);margin-top:24px}
.links {max-width:none;gap:12px}
.link {min-height:78px;border-radius:18px;transition:transform .35s var(--ease),background .3s,border-color .3s,box-shadow .35s}
.link.featured {color:#f7eaff;background:linear-gradient(130deg,rgba(221,180,255,.27),rgba(221,180,255,.10)),rgba(43,30,56,.48);border-color:rgba(233,201,255,.44);box-shadow:var(--glass-shadow)}
.link .icon {background:rgba(245,221,255,.065);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.link .status {color:#ddcce8}
.section-heading p,.collection-note,.spotlight-copy p {color:var(--muted)}
.eyebrow,.small-label {color:#d9c0ee}
.section-heading h2 em,.armory-copy h2 em {color:#d5b3f2}
.short-card {border-radius:24px}
.short-caption {background:linear-gradient(120deg,rgba(255,255,255,.055),transparent);border-top:1px solid rgba(255,240,255,.13)}
.cinema {border-radius:26px}
.cinema-bar {background:rgba(242,214,255,.065);border-bottom:1px solid rgba(255,240,255,.14)}
.vod-caption {background:rgba(242,214,255,.025)}
.play-mark {color:#fff3ff;background:rgba(39,26,52,.68);border-color:rgba(255,241,255,.48);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 28px rgba(0,0,0,.18)}
.interlude {color:rgba(231,210,248,.24);border-color:rgba(255,235,255,.12);background:rgba(226,190,255,.025)}
.loadout-card {border-radius:22px}
.panda-halo {background:radial-gradient(ellipse,rgba(223,178,255,.16),rgba(221,180,255,.02) 66%,transparent 70%);border-color:rgba(240,211,255,.16);box-shadow:0 0 80px rgba(187,132,228,.07)}
.panda-plinth {background:linear-gradient(150deg,rgba(222,196,244,.20),rgba(64,40,84,.38));border-color:rgba(236,207,255,.30);box-shadow:inset 0 2px rgba(255,239,255,.19),0 16px 40px rgba(0,0,0,.18)}
.showcase-badge {color:var(--gold);background:rgba(34,26,42,.72);border-color:rgba(242,207,148,.30);backdrop-filter:blur(16px)}
.weekly-spotlight {background:linear-gradient(125deg,rgba(220,173,255,.15),rgba(255,255,255,.025) 60%,rgba(236,188,125,.065)),rgba(36,27,46,.50);border-radius:28px}
.leaderboard-wrap {border-radius:22px}
.coin-leaderboard thead {background:rgba(255,237,255,.055)}
.coin-leaderboard th,.coin-leaderboard td {border-color:rgba(255,239,255,.10)}
.coin-leaderboard tbody tr {transition:background .25s}
.coin-leaderboard tbody tr:hover {background:rgba(229,193,255,.06)}
.coin-leaderboard td:last-child {color:var(--gold)}
.next-stream {border-radius:24px;background:linear-gradient(120deg,rgba(218,177,247,.16),rgba(255,255,255,.025)),rgba(37,28,47,.50)}
#stream-countdown {color:var(--gold)}
.schedule-row {border-radius:16px;transition:background .25s,border-color .25s}
.schedule-row:hover {background-color:rgba(238,212,255,.08);border-color:rgba(239,213,255,.35)}
input,select,.dressing-controls select,#balance-search {color:#fff4ff;background:rgba(22,16,30,.38);border-color:rgba(238,214,255,.28);border-radius:10px;min-height:44px;transition:border-color .2s,box-shadow .2s}
select option {background:#302737;color:#fff4ff}
button,.primary-button,.outline-button {transition:background .25s,border-color .25s,box-shadow .3s var(--ease),translate .3s var(--ease)}
.primary-button {background:linear-gradient(135deg,#f8dbac,#e5b875);color:#2a2011;border:1px solid #ffe5bd;border-radius:14px;box-shadow:inset 0 1px rgba(255,255,255,.5),0 6px 22px rgba(209,153,71,.13)}
.primary-button:hover {background:linear-gradient(135deg,#ffe8c4,#f2c88a);color:#2a2011;box-shadow:0 8px 28px rgba(209,153,71,.22)}
.showcase-controls button,.balance-actions button,.outline-button,.random-dialog-bar button {min-height:44px;border-radius:11px;background:rgba(232,198,255,.09);border:1px solid rgba(238,213,255,.25);box-shadow:inset 0 1px rgba(255,255,255,.06);color:#f3e3ff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {outline:2px solid var(--gold);outline-offset:4px}
.is-live .live-card {background:rgba(126,86,37,.16);border-color:rgba(242,207,148,.45);box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 35px rgba(211,155,68,.09)}
.is-live .live-card>span {color:var(--gold)}
.is-live .avatar {border-color:#c9a46e;box-shadow:0 10px #695037,0 0 45px rgba(242,207,148,.22)}
.is-live .ambient {background:radial-gradient(ellipse at 4% 8%,rgba(154,105,193,.40),transparent 48%),radial-gradient(ellipse at 100% 62%,rgba(181,123,66,.33),transparent 55%),linear-gradient(125deg,#221b2c,#1b1721 48%,#292021)}
#random-short-dialog {background:linear-gradient(135deg,rgba(226,196,249,.12),rgba(255,255,255,.025)),rgba(30,23,39,.91);border:1px solid var(--glass-edge);border-radius:24px;box-shadow:var(--glass-shadow),0 30px 100px rgba(0,0,0,.4);backdrop-filter:blur(24px)}
#random-short-dialog::backdrop {background:rgba(12,8,18,.45);backdrop-filter:blur(8px)}
#random-short-dialog[open] {animation:glass-open .35s var(--ease) both}
@keyframes glass-open {from{opacity:0;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
.reveal {transition:opacity .75s var(--ease),translate .85s var(--ease);transition-delay:calc(var(--i,0)*65ms)}
.js-motion .reveal:not(.visible) {opacity:0;translate:0 24px}
.reveal.visible {opacity:1;translate:0 0}
footer {border-color:rgba(255,236,255,.16)}
@media(hover:hover) and (pointer:fine) {
  .link:hover {background-color:rgba(238,206,255,.10);border-color:rgba(246,221,255,.5);box-shadow:var(--glass-shadow),0 12px 32px rgba(0,0,0,.14)}
  .primary-button:hover,.live-card a:hover {translate:0 -2px}
  .showcase-controls button:hover,.balance-actions button:hover,.outline-button:hover {background:rgba(235,204,255,.16);border-color:rgba(245,223,255,.42)}
}
@media(max-width:760px) {
  html {scroll-padding-top:96px}
  .topbar {top:10px;width:calc(100% - 24px);height:62px;padding:0 12px;border-radius:18px;margin-top:10px}
  .topbar .brand {font-size:.95rem;white-space:nowrap}
  .topbar > div {gap:0}
  .topbar > div a {padding:0 7px;font-size:.72rem;min-height:44px}
  .hero {padding-top:36px}
  .hero header {padding:28px 16px 24px;border-radius:26px}
  .hero h1 {font-size:clamp(2.8rem,11.2vw,5.2rem)}
  .live-card {padding:14px 12px}
  .home-links {width:100%}
  .link {min-height:78px;padding:14px;border-radius:16px}
  .links {gap:10px}
  .hero header,.live-card,.link,.short-card,.cinema,.loadout-card,.weekly-spotlight,.leaderboard-wrap,.next-stream,.schedule-row {backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%)}
  .weekly-spotlight {border-radius:24px}
  .js-motion .reveal:not(.visible) {translate:0 14px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root {--glass-fill:linear-gradient(135deg,#403447,#29232f)}
  .hero header,.weekly-spotlight,.next-stream,.topbar {background:linear-gradient(135deg,#403447,#29232f)}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.js-motion .reveal:not(.visible) {opacity:1;translate:none}
  .primary-button:hover,.live-card a:hover {translate:none}
}