/* ── style/00-tokens.css ── */

:root{
    --white:#ffffff;

  --gray-25:#f3f6fc;
  --gray-50:#eef3fa;
  --gray-75:#e9eff8;
  --gray-100:#e6edf6;
  --gray-200:#d6e1ef;
  --gray-500:#6b7d92;
  --gray-700:#42566b;
  --gray-900:#1b2c40;

  --blue-50:#e8f1ff;
  --blue-200:#9ec8f1;
  --blue-400:#5aa0ff;
  --blue-500:#2f86ff;
  --blue-600:#1e6ce0;

  --navy-500:#2a7fd4;
  --navy-900:#0f3f7f;

  --indigo-500:#5b5ff0;
  --indigo-900:#2b2f9e;

  --violet-400:#a98ff0;
  --violet-500:#8a6fe0;

  --amber-100:#ffe2a6;
  --amber-300:#ffd35e;
  --amber-400:#ffc657;
  --amber-500:#f0a92b;
  --amber-600:#e0951f;

  --coral-100:#ffd4d8;
  --coral-400:#ff7e8c;
  --coral-500:#f0596a;
  --rose-600:#e4405f;

  --green-400:#48cf99;
  --green-500:#22b07a;

  --silver-300:#c7d2dd;
  --silver-500:#94a3b3;
  --bronze-300:#e6a473;
  --bronze-500:#cf7d4a;

    --color-bg:var(--gray-25);
  --color-surface:var(--white);
  --color-surface-sunken:var(--gray-25);
  --color-surface-muted:var(--gray-75);
  --color-text:var(--gray-900);
  --color-text-secondary:var(--gray-700);
  --color-text-muted:var(--gray-500);
  --color-border:var(--gray-100);
  --color-border-subtle:var(--gray-50);
  --color-border-strong:var(--gray-200);
  --color-accent:var(--blue-500);
  --color-accent-strong:var(--blue-600);
  --color-accent-soft:var(--blue-50);
  --color-star:var(--amber-500);
  --color-star-idle:var(--gray-200);
  --color-heart:var(--coral-500);
  --color-heart-soft:var(--coral-100);
  --color-danger:var(--rose-600);
  --color-gold:var(--amber-500);
  --color-gold-strong:var(--amber-600);
  --color-gold-soft:var(--amber-100);

    --on-color:var(--white);
  --on-color-muted:rgba(255,255,255,.9);
  --on-color-accent:var(--blue-200);
  --glass:rgba(255,255,255,.2);
  --glass-strong:rgba(255,255,255,.3);
  --glass-border:rgba(255,255,255,.45);
  --sheen:rgba(255,255,255,.25);
  --glyph-strong:rgba(255,255,255,.22);
  --glyph-soft:rgba(255,255,255,.12);
  --shade:rgba(0,0,0,.18);
  --shade-strong:rgba(0,0,0,.28);
  --scrim-light:rgba(11,26,45,.32);
  --scrim-control:rgba(6,30,64,.55);
  --scrim-heavy:rgba(9,23,45,.86);

    --grad-brand:linear-gradient(120deg,var(--blue-500),var(--violet-500));
  --grad-brand-flat:linear-gradient(90deg,var(--blue-500),var(--violet-500));
  --grad-blue:linear-gradient(150deg,var(--blue-400),var(--blue-500));
  --grad-violet:linear-gradient(150deg,var(--violet-400),var(--violet-500));
  --grad-navy:linear-gradient(150deg,var(--navy-500),var(--navy-900));
  --grad-indigo:linear-gradient(150deg,var(--indigo-500),var(--indigo-900));
  --grad-amber:linear-gradient(150deg,var(--amber-400),var(--amber-500));
  --grad-coral:linear-gradient(150deg,var(--coral-400),var(--coral-500));
  --grad-green:linear-gradient(150deg,var(--green-400),var(--green-500));
  --grad-gold:linear-gradient(150deg,var(--amber-300),var(--amber-500));
  --grad-silver:linear-gradient(150deg,var(--silver-300),var(--silver-500));
  --grad-bronze:linear-gradient(150deg,var(--bronze-300),var(--bronze-500));

    --tone-0:var(--blue-500);
  --tone-1:var(--violet-500);
  --tone-2:var(--amber-500);
  --tone-3:var(--coral-500);
  --tone-4:var(--green-500);
  --tone-5:var(--blue-400);
  --tone-6:var(--violet-400);
  --tone-7:var(--amber-400);
  --tone-8:var(--coral-400);
  --tone-9:var(--green-400);

    --font-sans:"Poppins", ui-sans-serif, system-ui, sans-serif;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  --text-2xs:11px;
  --text-xs:12.5px;
  --text-sm:13.5px;
  --text-base:14.5px;
  --text-md:15px;
  --text-lg:16px;
  --text-xl:20px;
  --text-2xl:22px;
  --text-3xl:25px;
  --text-4xl:30px;
  --text-display:34px;

  --leading-none:1;
  --leading-tight:1.05;
  --leading-normal:1.5;
  --leading-relaxed:1.62;

  --tracking-tighter:-.6px;
  --tracking-tight:-.4px;
  --tracking-snug:-.2px;
  --tracking-wide:.05em;

    --icon-xs:13px;
  --icon-sm:15px;
  --icon-md:17px;
  --icon-lg:18px;
  --icon-xl:20px;
  --icon-2xl:30px;

    --space-0-5:2px;
  --space-1:4px;
  --space-1-5:6px;
  --space-2:8px;
  --space-2-5:10px;
  --space-3:12px;
  --space-3-5:14px;
  --space-4:16px;
  --space-4-5:18px;
  --space-5:20px;
  --space-5-5:22px;
  --space-6:24px;
  --space-6-5:26px;
  --space-7:28px;
  --space-8:32px;
  --space-9:36px;
  --space-11:44px;
  --space-15:60px;

    --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-2xl:22px;
  --radius-full:999px;

    --shadow-xs:0 1px 2px 0 rgba(27,44,64,.10);
  --shadow-nav:0 3px 10px -8px rgba(27,44,64,.26);
  --shadow-sm:0 8px 18px -8px rgba(27,44,64,.4);
  --shadow-lift:0 20px 34px -20px rgba(27,44,64,.5);
  --shadow-panel:0 20px 44px -30px rgba(27,44,64,.55);
  --shadow-popover:0 8px 24px rgba(15,40,80,.14);
  --shadow-toast:0 10px 26px -10px rgba(8,37,82,.55);
  --shadow-float-sm:0 8px 20px -6px rgba(0,0,0,.5);
  --shadow-float:0 14px 34px -10px rgba(0,0,0,.5);
  --shadow-accent:0 8px 18px -8px rgba(47,134,255,.7);
  --shadow-gold:0 22px 40px -26px rgba(240,169,43,.8);
  --ring:0 0 0 3px var(--color-accent-soft);

    --ease-spring:cubic-bezier(.34,1.4,.5,1);
  --duration-fast:.15s;
  --duration-base:.2s;
  --duration-slow:.3s;

    --z-raised:2;
  --z-overlay:3;
  --z-toast:5;
  --z-panel:6;
  --z-popover:30;
  --z-nav:40;
  --z-fullscreen:80;

    --page-max:1340px;
  --gutter:var(--space-8);
}

@media (max-width:760px){
  :root{ --gutter:var(--space-4-5); }
}
/* ── style/10-base.css ── */

*, ::before, ::after, ::backdrop{
  box-sizing:border-box;
  margin:0;
  padding:0;
  border:0 solid;
}

html{
  line-height:var(--leading-normal);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  tab-size:4;
  scrollbar-gutter:stable;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-sans);
  font-size:var(--text-md);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, h4, h5, h6{ font-size:inherit; font-weight:inherit; }
a{ color:inherit; text-decoration:inherit; }
b, strong{ font-weight:bolder; }
ol, ul, menu{ list-style:none; }

img, svg, video, canvas, iframe{ display:block; vertical-align:middle; }
img, video{ max-width:100%; height:auto; }

button, input, select, textarea{
  font:inherit;
  letter-spacing:inherit;
  color:inherit;
  background-color:transparent;
  border-radius:0;
  opacity:1;
}
button{ cursor:pointer; }
button:disabled{ cursor:default; }
::placeholder{ opacity:1; color:color-mix(in oklab, currentcolor 50%, transparent); }

[hidden]:where(:not([hidden=until-found])){ display:none !important; }

::selection{ background:var(--color-accent-soft); }

:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

[data-lucide]{ width:1em; height:1em; display:inline-block; }
svg.lucide{ stroke-width:2; }

@media (prefers-reduced-motion:reduce){
  *, ::before, ::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* ── style/20-atoms.css ── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border:1.5px solid transparent; border-radius:var(--radius-md);
  font-size:var(--text-base); font-weight:var(--weight-semibold);
  transition:background var(--duration-base), border-color var(--duration-base),
    filter var(--duration-fast), transform var(--duration-base) var(--ease-spring);
}
.btn svg{ width:var(--icon-sm); height:var(--icon-sm); }

.btn--primary{ background:var(--color-accent); color:var(--on-color); box-shadow:var(--shadow-accent); }
.btn--primary:hover{ background:var(--color-accent-strong); transform:translateY(-1px); }

.btn--brand{ background:var(--grad-brand); color:var(--on-color); }
.btn--brand:hover{ filter:brightness(1.07); }

.btn--lg{ font-size:var(--text-md); font-weight:var(--weight-bold); }
.btn--lg svg{ width:var(--icon-md); height:var(--icon-md); }
.btn--block{ display:flex; width:100%; }

.btn--control{
  gap:var(--space-1-5); height:34px; padding:0 var(--space-3-5);
  border:1px solid var(--color-border); border-radius:var(--radius-full);
  background:var(--color-surface-sunken); color:var(--color-text);
  font-size:var(--text-sm);
  transition:border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}
.btn--control:hover{ border-color:var(--color-border-strong); }
.btn--control:disabled{ opacity:.65; }
.btn--control.is-liked{ color:var(--color-heart); border-color:var(--color-heart-soft); }
.btn--control.is-liked svg{ fill:var(--color-heart); }
.btn--icon-only{ width:34px; padding:0; }
.btn__star{ color:var(--color-star); font-size:var(--icon-sm); line-height:var(--leading-none); }

.icon-btn{
  --icon-btn-size:38px;
  display:grid; place-items:center; flex:none;
  width:var(--icon-btn-size); height:var(--icon-btn-size);
  border-radius:var(--radius-md); color:var(--on-color);
  transition:background var(--duration-fast), border-color var(--duration-fast);
}
.icon-btn svg{ width:var(--icon-lg); height:var(--icon-lg); }
.icon-btn--sm{ --icon-btn-size:36px; }
.icon-btn--lg{ --icon-btn-size:44px; }
.icon-btn--round{ border-radius:50%; }
.icon-btn--glass{ background:var(--glass); }
.icon-btn--glass:hover{ background:var(--glass-strong); }
.icon-btn--scrim{ background:var(--scrim-control); }

.play-btn{
  --play-size:58px;
  position:relative; display:grid; place-items:center;
  width:var(--play-size); height:var(--play-size); border-radius:50%;
  background:var(--color-surface); color:var(--color-text);
  box-shadow:var(--shadow-float-sm);
  transition:transform var(--duration-slow) var(--ease-spring);
}
.play-btn svg{ width:var(--icon-xl); height:var(--icon-xl); margin-left:3px; fill:currentColor; }
.play-btn--lg{ --play-size:84px; color:var(--color-accent); box-shadow:var(--shadow-float); }
.play-btn--lg svg{ width:var(--icon-2xl); height:var(--icon-2xl); margin-left:4px; }
button.play-btn:hover{ transform:scale(1.07); }

.chip{
  display:inline-flex; align-items:center; flex:none; gap:var(--space-2);
  padding:var(--space-2) var(--space-3-5);
  border:1.5px solid var(--color-border); border-radius:var(--radius-full);
  background:var(--color-surface); color:var(--color-text);
  font-size:var(--text-sm); font-weight:var(--weight-semibold);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.chip:hover{ border-color:var(--color-border-strong); }
.chip.is-active{ background:var(--color-accent); border-color:var(--color-accent); color:var(--on-color); }
.chip svg{ width:var(--icon-sm); height:var(--icon-sm); }
.chip__count{ font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--color-text-muted); }
.chip.is-active .chip__count{ color:var(--on-color-muted); }

.pill{
  display:inline-flex; align-items:center; gap:var(--space-1-5);
  height:34px; padding:0 var(--space-3-5);
  border:1px solid var(--color-border); border-radius:var(--radius-full);
  background:var(--color-surface-sunken); color:var(--color-text);
  font-size:var(--text-sm); font-weight:var(--weight-semibold);
}

.tag{
  display:inline-block;
  padding:var(--space-1) var(--space-2-5); border-radius:var(--radius-full);
  background:var(--shade); color:var(--on-color);
  font-size:var(--text-2xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  backdrop-filter:blur(2px);
}
.tag--flag{ padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); background:var(--shade-strong); letter-spacing:normal; }

.badge{
  display:inline-block;
  padding:var(--space-0-5) var(--space-2); border-radius:var(--radius-xs);
  background:var(--color-accent); color:var(--on-color);
  font-size:var(--text-2xs); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-wide);
}

.medal{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:var(--on-color); font-size:var(--text-sm); font-weight:var(--weight-extrabold);
  box-shadow:var(--shadow-float-sm);
}
.medal--1{ background:var(--grad-gold); }
.medal--2{ background:var(--grad-silver); }
.medal--3{ background:var(--grad-bronze); }

.avatar{
  --avatar-size:42px;
  display:grid; place-items:center; flex:none;
  width:var(--avatar-size); height:var(--avatar-size); border-radius:50%;
  background:var(--avatar-bg, var(--color-accent)); color:var(--on-color);
  font-size:var(--text-lg); font-weight:var(--weight-extrabold);
}
.avatar svg{ width:var(--icon-lg); height:var(--icon-lg); }
.avatar--sm{ --avatar-size:36px; font-size:var(--text-md); }
.avatar--lg{ --avatar-size:64px; font-size:var(--text-3xl); }
.avatar--xl{ --avatar-size:78px; font-size:var(--text-4xl); }
.avatar--raised{ box-shadow:var(--shadow-sm); }
.avatar--brand{ background:var(--grad-brand); }
.avatar--anon{ background:var(--color-surface-muted); color:var(--color-text-secondary); }
.avatar--glass{ border-radius:var(--radius-xl); background:var(--glass); border:2px solid var(--glass-border); }
.avatar--tone-0{ --avatar-bg:var(--tone-0); }
.avatar--tone-1{ --avatar-bg:var(--tone-1); }
.avatar--tone-2{ --avatar-bg:var(--tone-2); }
.avatar--tone-3{ --avatar-bg:var(--tone-3); }
.avatar--tone-4{ --avatar-bg:var(--tone-4); }
.avatar--tone-5{ --avatar-bg:var(--tone-5); }
.avatar--tone-6{ --avatar-bg:var(--tone-6); }
.avatar--tone-7{ --avatar-bg:var(--tone-7); }
.avatar--tone-8{ --avatar-bg:var(--tone-8); }
.avatar--tone-9{ --avatar-bg:var(--tone-9); }

.rating{ display:inline-flex; align-items:center; gap:var(--space-1); font-weight:var(--weight-bold); color:var(--color-text); }
.rating svg{ width:var(--icon-xs); height:var(--icon-xs); color:var(--color-star); fill:currentColor; }

.num{ display:inline-block; text-align:center; }

.field-label{
  font-size:var(--text-sm); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--color-text-muted);
}
.input{
  padding:var(--space-3) var(--space-4);
  border:1.5px solid var(--color-border); border-radius:var(--radius-md);
  background:var(--color-surface-sunken);
  font-size:var(--text-lg); font-weight:var(--weight-semibold);
  outline:none; transition:border-color var(--duration-fast);
}
.input:focus{ border-color:var(--color-accent); }
.form-error{
  display:flex; align-items:center; gap:var(--space-2);
  color:var(--color-danger); font-size:var(--text-base); font-weight:var(--weight-semibold);
}
.form-error svg{ width:var(--icon-md); height:var(--icon-md); flex:none; }

.progress{ height:9px; border-radius:var(--radius-full); background:var(--color-border); overflow:hidden; }
.progress__bar{ display:block; width:var(--value, 0%); height:100%; border-radius:var(--radius-full); background:var(--grad-brand-flat); }

.toast{
  display:inline-flex; align-items:center; gap:var(--space-1-5);
  padding:var(--space-2) var(--space-3-5); border-radius:var(--radius-full);
  background:var(--color-surface); color:var(--color-text);
  font-size:var(--text-base); font-weight:var(--weight-bold);
  box-shadow:var(--shadow-toast); pointer-events:none;
  animation:toast-pop 2.2s ease forwards;
}
.toast--hint{ font-weight:var(--weight-semibold); color:var(--color-text-muted); }
.toast__accent{ color:var(--color-accent); }
@keyframes toast-pop{
  0%{ opacity:0; transform:translateY(10px) scale(.9); }
  10%{ opacity:1; transform:translateY(0) scale(1); }
  80%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(-16px); }
}

.prose{ max-width:62ch; font-size:var(--text-base); line-height:var(--leading-relaxed); }
.prose p{ margin-bottom:var(--space-3); }
.prose p:last-child{ margin-bottom:0; }
.prose h4{
  display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2);
  font-size:var(--text-sm); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-wide);
}
.prose p + h4{ margin-top:var(--space-4-5); }
.prose h4 svg{ width:var(--icon-sm); height:var(--icon-sm); }
.prose--inverse{ color:var(--on-color-muted); }
.prose--inverse h4{ color:var(--on-color); }
.prose--inverse h4 svg{ color:var(--on-color-accent); }

.grad-blue{ background:var(--grad-blue); }
.grad-violet{ background:var(--grad-violet); }
.grad-navy{ background:var(--grad-navy); }
.grad-indigo{ background:var(--grad-indigo); }
.grad-amber{ background:var(--grad-amber); }
.grad-coral{ background:var(--grad-coral); }
.grad-green{ background:var(--grad-green); }
/* ── style/30-shell.css ── */

.site-header{
  position:sticky; top:0; z-index:var(--z-nav);
  display:flex; justify-content:center;
  padding:var(--space-3) var(--space-6) var(--space-2-5);
  background:linear-gradient(var(--color-bg) 68%, transparent);
}
.topnav{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3-5);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-full);
  box-shadow:var(--shadow-nav);
}
.topnav__logo{ display:flex; align-items:center; padding:var(--space-0-5) var(--space-1-5) var(--space-0-5) var(--space-1); }
.topnav__divider{ flex:none; width:1px; height:26px; margin:0 var(--space-2); background:var(--color-border); }
.topnav__link{
  position:relative; padding:var(--space-2) var(--space-5); border-radius:var(--radius-full);
  color:var(--color-text-secondary); font-size:var(--text-base); font-weight:var(--weight-semibold);
  transition:color var(--duration-fast);
}
.topnav__link:hover{ color:var(--color-text); }
.topnav__link.is-active{ color:var(--color-accent-strong); }
.topnav__link.is-active::after{
  content:""; position:absolute; left:50%; bottom:1px; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:var(--color-accent);
}
.topnav__avatar{ margin-left:var(--space-1); transition:box-shadow var(--duration-fast); }
.topnav__avatar:hover, .topnav__avatar.is-active{ box-shadow:var(--ring); }

@media (max-width:560px){
  .site-header{ padding:var(--space-2-5) var(--space-3) var(--space-2); }
  .topnav{ gap:0; max-width:100%; padding:var(--space-1-5) var(--space-2); }
  .topnav__divider{ margin:0 var(--space-1); }
  .topnav__logo{ padding:var(--space-0-5); }
  .topnav__logo svg{ width:auto; height:24px; }
  .topnav__link{ padding:var(--space-2) var(--space-3); white-space:nowrap; font-size:var(--text-sm); }
  .topnav__avatar{ --avatar-size:32px; margin-left:var(--space-0-5); font-size:var(--text-sm); }
}

.page{
  display:flex; flex-direction:column; flex:1 0 auto;
  width:100%; max-width:var(--page-max); margin:0 auto;
  padding:var(--space-5) var(--gutter) var(--space-15);
}

.page-head{ margin:0 var(--space-1) var(--space-5-5); }
.page-head__title{
  margin-bottom:var(--space-1-5);
  font-size:var(--text-4xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tighter);
}
.page-head__sub{ color:var(--color-text-muted); font-size:var(--text-md); }
.page-head--inline{ display:flex; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-3-5); }
.page-head--inline .page-head__title{ margin:0; }
.page-head__meta{ color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--weight-medium); }
@media (max-width:760px){
  .page-head__title{ font-size:var(--text-3xl); }
}
@media (max-width:560px){
  .page-head--inline{ gap:var(--space-2-5); margin:0 0 var(--space-3); }
}

.breadcrumbs{
  display:flex; align-items:center; gap:var(--space-2); margin:0 var(--space-1) var(--space-4-5);
  color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--weight-medium);
}
.breadcrumbs a:hover{ color:var(--color-accent); }
.breadcrumbs__sep{ opacity:.5; }
.breadcrumbs__current{ color:var(--color-text); font-weight:var(--weight-semibold); }

.site-footer{
  margin-top:auto; padding-top:var(--space-6); border-top:1px solid var(--color-border);
  text-align:center; color:var(--color-text-muted); font-size:var(--text-md); font-weight:var(--weight-medium);
}
.site-footer a{ color:var(--color-accent); font-weight:var(--weight-bold); }
.site-footer__heart{
  display:inline-block; width:1.05em; height:1.05em; margin:0 3px; vertical-align:-.2em;
  color:var(--color-accent); fill:currentColor;
}

.empty-state{ grid-column:1/-1; padding:var(--space-15) 0; text-align:center; color:var(--color-text-muted); }
/* ── style/40-catalog.css ── */

.chip-bar{ position:relative; margin:0 var(--space-1) var(--space-5-5); }
.chip-bar::before, .chip-bar::after{
  content:""; position:absolute; top:0; bottom:0; z-index:var(--z-raised); width:var(--space-11);
  pointer-events:none; opacity:0; transition:opacity var(--duration-base);
}
.chip-bar::before{ left:0; background:linear-gradient(90deg, var(--color-bg) 30%, transparent); }
.chip-bar::after{ right:0; background:linear-gradient(270deg, var(--color-bg) 30%, transparent); }
.chip-bar.has-overflow-left::before, .chip-bar.has-overflow-right::after{ opacity:1; }
.chip-bar__track{
  display:flex; flex-wrap:nowrap; gap:var(--space-2); padding:var(--space-0-5);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity;
}
.chip-bar__track::-webkit-scrollbar{ display:none; }
.chip-bar__track .chip{ scroll-snap-align:start; }
.chip-bar__group{ display:contents; }
.chip-bar__end{ flex:none; display:inline-flex; gap:var(--space-2); margin-left:auto; padding-left:var(--space-3-5); }

@media (max-width:900px){
  .chip-bar .chip{ gap:var(--space-1-5); padding:var(--space-2) var(--space-3); }
  .chip-bar__end{ gap:var(--space-1-5); padding-left:var(--space-3); }
}
@media (max-width:560px){
  .chip-bar{ margin:0 calc(-1 * var(--gutter)) var(--space-4-5); }
  .chip-bar__track{ padding:var(--space-0-5) var(--gutter); scroll-padding-inline:var(--gutter); }
}

.game-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(212px, 1fr)); gap:var(--space-5); }
@media (max-width:560px){
  .game-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--space-3); }
}

.game-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl);
  transition:transform var(--duration-slow) var(--ease-spring), box-shadow var(--duration-slow) var(--ease-spring);
}
.game-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.game-card__art{
  position:relative; display:flex; align-items:flex-end; overflow:hidden;
  aspect-ratio:4/3; padding:var(--space-3);
}
.game-card__art::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 78% 22%, var(--sheen), transparent 45%);
}
.game-card__glyph{
  position:absolute; right:-10px; bottom:-34px;
  font-size:130px; font-weight:var(--weight-extrabold); line-height:var(--leading-none); color:var(--glyph-strong);
}
.game-card__cat{ position:relative; z-index:var(--z-raised); }
.game-card__flag{ position:absolute; top:var(--space-3); left:var(--space-3); z-index:var(--z-raised); }
.game-card__play{
  position:absolute; inset:0; z-index:var(--z-overlay);
  display:grid; place-items:center; opacity:0; transition:opacity var(--duration-slow);
}
.game-card__play::before{ content:""; position:absolute; inset:0; background:var(--scrim-light); }
.game-card__play .play-btn{ transform:scale(.7); }
.game-card:hover .game-card__play{ opacity:1; }
.game-card:hover .game-card__play .play-btn{ transform:scale(1); }
.game-card__body{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3) var(--space-3-5) var(--space-4); }
.game-card__title{ font-size:var(--text-md); font-weight:var(--weight-bold); letter-spacing:var(--tracking-snug); }
.game-card__meta{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--weight-medium);
}
/* ── style/50-player.css ── */

.player{
  overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-panel);
}

.player__stage{
  position:relative; display:grid; place-items:center; overflow:hidden;
  padding:var(--space-6-5); aspect-ratio:16/9;
    width:100%; max-height:calc(100dvh - 250px); min-height:340px;
  background:linear-gradient(135deg, var(--stage-from, var(--blue-400)), var(--stage-to, var(--blue-500)));
}
.player__stage::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 85% 12%, var(--sheen), transparent 55%);
}
.player__stage:fullscreen{ aspect-ratio:auto; max-height:none; min-height:0; }
.player__stage.is-fake-fullscreen{
  position:fixed; inset:0; z-index:var(--z-fullscreen);
  width:100vw; height:100dvh; max-height:none; min-height:0;
  padding:0; border-radius:0; aspect-ratio:auto;
}
html.is-scroll-locked, html.is-scroll-locked body{ overflow:hidden; }
.player__fs-exit{ position:absolute; top:var(--space-3); right:var(--space-3); z-index:var(--z-panel); display:none; }
.player__stage.is-fake-fullscreen .player__fs-exit{ display:grid; }
.player__glyph{
  position:absolute; left:-30px; bottom:-50px; pointer-events:none;
  font-size:300px; font-weight:var(--weight-extrabold); line-height:var(--leading-none); color:var(--glyph-soft);
}

.player__preplay{ position:relative; z-index:var(--z-overlay); text-align:center; color:var(--on-color); }
.player__preplay .play-btn{ margin:0 auto; }
.player__preplay-title{
  margin:var(--space-4) 0 var(--space-1-5);
  font-size:var(--text-4xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tighter);
}
.player__preplay-text{ margin-bottom:var(--space-5-5); color:var(--on-color-muted); font-weight:var(--weight-medium); }

.player__frame{ position:absolute; inset:0; z-index:var(--z-overlay); }
.player__frame iframe{ width:100%; height:100%; background:transparent; }

.player__overlay{ position:relative; z-index:var(--z-overlay); width:100%; max-width:560px; }
.player__dialog{ padding:var(--space-6); border-radius:var(--radius-xl); background:var(--color-surface); box-shadow:var(--shadow-float); }
.player__notice{ text-align:center; }
.player__notice-title{
  color:var(--color-accent); font-size:var(--text-display); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tighter);
}
.player__notice-text{ margin-bottom:var(--space-5); color:var(--color-text-muted); font-weight:var(--weight-medium); }

.player__toast{
  position:absolute; right:var(--space-4-5); z-index:var(--z-toast);
  bottom:calc(var(--space-4-5) + var(--slot, 0) * var(--space-11));
}

.player__info{
  position:absolute; inset:0; z-index:var(--z-panel); overflow:auto;
  padding:var(--space-7) var(--space-8);
  background:var(--scrim-heavy); backdrop-filter:blur(6px); color:var(--on-color);
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease;
}
.player__info.is-open{ opacity:1; visibility:visible; }
.player__info-close{ position:absolute; top:var(--space-4); right:var(--space-4); }
.player__info-title{
  margin-bottom:var(--space-4-5);
  font-size:var(--text-3xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight);
}

.player__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); padding:var(--space-4) var(--space-5); }
.player__heading{ flex:1; min-width:0; }
.player__title{ font-size:var(--text-2xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight); }
.player__byline{ color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--weight-medium); }
@media (max-width:560px){
  .player__bar{ gap:var(--space-2-5); padding:var(--space-3-5) var(--space-4); }
  .player__heading{ flex-basis:100%; }
}

.rate-picker{ position:relative; display:inline-flex; }
.rate-picker__popover{
  position:absolute; bottom:calc(100% + var(--space-2)); left:50%; transform:translateX(-50%); z-index:var(--z-popover);
  display:none; gap:var(--space-1); padding:var(--space-1-5) var(--space-2-5);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-full);
  box-shadow:var(--shadow-popover);
}
.rate-picker__popover.is-open{ display:flex; }
.rate-picker__star{
  padding:0 var(--space-0-5);
  color:var(--color-star-idle); font-size:var(--text-xl); line-height:var(--leading-none);
  transition:color var(--duration-fast);
}
.rate-picker__star.is-lit{ color:var(--color-star); }
/* ── style/60-leaderboard.css ── */

.podium{
    display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:end; gap:var(--space-4-5);
  margin:0 var(--space-1) var(--space-3-5);
}
.podium__place{
  position:relative; padding:var(--space-5-5) var(--space-4); text-align:center;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl);
}
.podium__place .avatar{ margin:0 auto var(--space-3); }
.podium__medal{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); }
.podium__name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--text-lg); font-weight:var(--weight-bold); letter-spacing:var(--tracking-snug);
}
.podium__score{ margin-top:var(--space-1-5); font-size:var(--text-2xl); font-weight:var(--weight-extrabold); }
.podium__level{ margin-top:var(--space-0-5); color:var(--color-text-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
.podium__place--first{ padding-top:var(--space-8); border-color:var(--color-gold-soft); box-shadow:var(--shadow-gold); }
.podium__place--first .podium__score{ color:var(--color-gold-strong); font-size:var(--text-3xl); }
.podium__crown{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:var(--icon-2xl); height:var(--icon-2xl); color:var(--color-gold); fill:currentColor;
}
@media (max-width:680px){ .podium{ gap:var(--space-2-5); } }

.leaderboard{
  overflow:hidden; margin:var(--space-4-5) var(--space-1) 0;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl);
}
.leaderboard__row{
  display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:var(--space-4);
  padding:var(--space-3-5) var(--space-5-5); border-top:1px solid var(--color-border-subtle);
}
.leaderboard__row:first-child{ border-top:0; }
.leaderboard__row.is-you{ background:var(--color-accent-soft); }
.leaderboard__rank{ text-align:center; color:var(--color-text-muted); font-size:var(--text-lg); font-weight:var(--weight-extrabold); }
.leaderboard__who{ display:flex; align-items:center; gap:var(--space-3); }
.leaderboard__name{ font-size:var(--text-md); font-weight:var(--weight-bold); letter-spacing:var(--tracking-snug); }
.leaderboard__row.is-you .leaderboard__name{ color:var(--color-accent-strong); }
.leaderboard__name .badge{ margin-left:var(--space-2); }
.leaderboard__level{ color:var(--color-text-muted); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
.leaderboard__score{ min-width:90px; text-align:right; font-size:var(--text-lg); font-weight:var(--weight-extrabold); }
@media (max-width:680px){ .leaderboard__row{ grid-template-columns:40px 1fr auto; } }
@media (max-width:560px){
  .podium__place{ padding:var(--space-4-5) var(--space-2); }
  .podium__place--first{ padding-top:var(--space-7); }
  .podium__place .avatar{ --avatar-size:48px; font-size:var(--text-2xl); }
  .podium__place--first .avatar{ --avatar-size:60px; font-size:var(--text-3xl); }
  .podium__name{ font-size:var(--text-sm); }
  .podium__score{ font-size:var(--text-xl); }
  .podium__place--first .podium__score{ font-size:var(--text-2xl); }
  .leaderboard__row{ gap:var(--space-3); padding:var(--space-3) var(--space-4); }
  .leaderboard__score{ min-width:0; }
}
/* ── style/70-account.css ── */

.profile-card{
  overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl);
}
.profile-card__banner{
  position:relative; display:flex; align-items:center; gap:var(--space-4-5);
  padding:var(--space-6-5); background:var(--grad-brand);
}
.profile-card__banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 130% at 90% 0%, var(--sheen), transparent 55%);
}
.profile-card__banner .avatar{ position:relative; }
.profile-card__who{ position:relative; flex:1; min-width:0; color:var(--on-color); }
.profile-card__name{ font-size:var(--text-2xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight); }
.profile-card__sub{ margin-top:var(--space-0-5); color:var(--on-color-muted); font-size:var(--text-base); font-weight:var(--weight-semibold); }
.profile-card__actions{ position:relative; display:flex; align-items:center; gap:var(--space-3); flex:none; }
.profile-card__rank{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
  background:var(--glass); color:var(--on-color); backdrop-filter:blur(3px);
  font-size:var(--text-lg); font-weight:var(--weight-extrabold);
}
.profile-card__rank svg{ width:var(--icon-lg); height:var(--icon-lg); }
.profile-card__rank-label{
  margin-right:1px; opacity:.85;
  font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase;
}
.profile-card__signout{ border:1.5px solid var(--glass-border); }
.profile-card__signout:hover{ border-color:var(--on-color); }
.profile-card__body{ padding:var(--space-6) var(--space-6-5) var(--space-6-5); }
.profile-card__level-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3-5); margin-bottom:var(--space-3); }
.profile-card__level{ font-size:var(--text-2xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight); }
.profile-card__xp{ color:var(--color-text-muted); font-size:var(--text-base); font-weight:var(--weight-semibold); white-space:nowrap; }
@media (max-width:560px){
  .profile-card__banner{ flex-wrap:wrap; }
  .profile-card__rank-label{ display:none; }
}

.auth-card{
  max-width:420px; padding:var(--space-7) var(--space-6-5);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl);
}
.auth-card__form{ display:flex; flex-direction:column; gap:var(--space-3); }
/* ── style/90-reference.css ── */

.ref-section{ margin:0 var(--space-1) var(--space-15); }
.ref-section__title{
  margin-bottom:var(--space-4); padding-bottom:var(--space-2); border-bottom:1px solid var(--color-border);
  font-size:var(--text-2xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight);
}
.ref-section__sub{
  margin:var(--space-6) 0 var(--space-3);
  color:var(--color-text-muted); font-size:var(--text-sm); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
}
.ref-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--space-3); }
.ref-grid--rows{ grid-template-columns:1fr; gap:var(--space-2); }
.ref-token{ display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.ref-grid--rows .ref-token{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:var(--space-4); }
.ref-token__swatch{ display:block; height:56px; border-radius:var(--radius-md); border:1px solid var(--color-border); }
.ref-token__box{ display:block; width:72px; height:56px; background:var(--color-surface); border:1px solid var(--color-border); }
.ref-token__bar{ display:block; height:12px; border-radius:var(--radius-full); background:var(--color-accent); }
.ref-token__sample{ line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ref-token__name, .ref-token__value{ font-size:var(--text-xs); overflow-wrap:anywhere; }
.ref-token__value{ color:var(--color-text-muted); }
.ref-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.ref-art{ padding:var(--space-4); border-radius:var(--radius-xl); }
.ref-art--block{ display:block; }
.ref-art--tile{ display:flex; align-items:flex-end; width:150px; aspect-ratio:4/3; padding:var(--space-3); }
.ref-grow{ flex:1; min-width:160px; }
.ref-narrow{ max-width:420px; }