:root {
  color-scheme: dark;
  --bg: #05060a;
  --bg-soft: #090c12;
  --surface: rgb(13 17 25 / .78);
  --surface-strong: #0d1119;
  --surface-light: rgb(255 255 255 / .045);
  --line: rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .16);
  --text: #f5f7fb;
  --muted: #929aaa;
  --muted-bright: #bcc3cf;
  --accent: #a4f1ff;
  --accent-rgb: 164 241 255;
  --accent-soft: color-mix(in srgb, var(--accent), white 28%);
  --accent-deep: color-mix(in srgb, var(--accent), #05060a 66%);
  --danger: #ff5470;
  --success: #76f7b7;
  --shell: min(1380px, calc(100% - 56px));
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --shadow: 0 28px 80px rgb(0 0 0 / .42);
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", Inter, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: rgb(var(--accent-rgb) / .3); color: white; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}
h1, h2, h3, p { margin-top: 0; }
code {
  padding: .12em .38em;
  border: 1px solid rgb(var(--accent-rgb) / .16);
  border-radius: 6px;
  color: var(--accent-soft);
  background: rgb(var(--accent-rgb) / .07);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: .88em;
}
.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 9999;
  left: 20px;
  top: -100px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #05060a;
  background: var(--accent-soft);
  font-weight: 800;
  transition: top .2s ease;
}
.skip-link:focus { top: 20px; }

/* Ambient page field */
.ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% -10%, rgb(var(--accent-rgb) / .13), transparent 36%),
    linear-gradient(180deg, rgb(8 10 16 / .4), var(--bg) 70%);
}
.ambient-orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .18; }
.ambient-orb-one { width: 520px; height: 520px; top: 9%; right: -220px; background: var(--accent); }
.ambient-orb-two { width: 440px; height: 440px; top: 58%; left: -250px; background: #774dff; opacity: .12; }
.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(rgb(255 255 255 / .12) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
.ambient-noise {
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: radial-gradient(rgb(255 255 255 / .28) .55px, transparent .55px);
  background-size: 4px 4px;
}

/* Header and navigation */
.site-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 84px;
  border-bottom: 1px solid transparent;
  transition: height .25s ease, background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled {
  height: 72px;
  border-color: var(--line);
  background: rgb(5 6 10 / .8);
  backdrop-filter: blur(22px) saturate(1.3);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(var(--accent-rgb) / .36);
  border-radius: 13px 4px 13px 4px;
  background: linear-gradient(145deg, rgb(var(--accent-rgb) / .18), rgb(255 255 255 / .02));
  box-shadow: 0 0 28px rgb(var(--accent-rgb) / .14), inset 0 0 20px rgb(var(--accent-rgb) / .08);
}
.brand-mark::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(255 255 255 / .1); border-radius: 9px 2px 9px 2px; }
.brand-mark img { width: 27px; height: 27px; object-fit: contain; filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / .46)); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 850 16px/1 var(--font-display); letter-spacing: .21em; }
.brand-copy small { margin-top: 6px; color: var(--muted); font: 700 8px/1 var(--font-body); letter-spacing: .28em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 5px; }
.site-nav > a {
  position: relative;
  padding: 10px 14px;
  color: var(--muted-bright);
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 650;
  transition: color .2s ease, background .2s ease;
}
.site-nav > a:hover, .site-nav > a.is-active { color: white; background: rgb(255 255 255 / .045); }
.site-nav > a.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 1px;
  background: var(--accent-soft);
  box-shadow: 0 0 8px var(--accent);
}
.site-nav .nav-play { display: flex; align-items: center; gap: 8px; }
.nav-play i { padding: 2px 6px; color: var(--accent-soft); border: 1px solid rgb(var(--accent-rgb) / .22); border-radius: 20px; background: rgb(var(--accent-rgb) / .08); font-size: .63rem; font-style: normal; letter-spacing: .06em; }
.site-nav .nav-mobile { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.header-actions form { display: flex; }
.account-chip {
  max-width: 190px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / .035);
  font-size: .8rem;
  font-weight: 700;
}
.account-chip img, .avatar-fallback { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.account-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-fallback { display: grid; place-items: center; color: #05060a; background: var(--accent-soft); }
.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: .2s ease;
}
.icon-button:hover { color: white; border-color: var(--line-strong); transform: rotate(-45deg); }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .035); }
.nav-toggle > span:not(.sr-only) { display: block; height: 1px; margin: 4px 0; background: white; transition: .2s ease; }

/* Buttons and shared type */
.button {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--text);
  background: rgb(255 255 255 / .025);
  font-size: .85rem;
  font-weight: 760;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.button::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / .14), transparent 80%); transform: translateX(-100%); transition: transform .45s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:hover::before { opacity: 1; transform: translateX(100%); }
.button-primary {
  border-color: rgb(var(--accent-rgb) / .5);
  color: #05070a;
  background: var(--accent-soft);
  box-shadow: 0 10px 34px rgb(var(--accent-rgb) / .15), inset 0 1px rgb(255 255 255 / .5);
}
.button-primary:hover { box-shadow: 0 14px 40px rgb(var(--accent-rgb) / .24), inset 0 1px rgb(255 255 255 / .55); }
.button-ghost { background: rgb(255 255 255 / .025); }
.button-ghost:hover { border-color: rgb(var(--accent-rgb) / .38); background: rgb(var(--accent-rgb) / .07); }
.button-large { min-height: 52px; padding-inline: 23px; border-radius: 13px; font-size: .93rem; }
.button-complete { color: var(--success); border-color: rgb(118 247 183 / .3); background: rgb(118 247 183 / .07); }
.button:disabled { cursor: not-allowed; opacity: .7; transform: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--accent-soft); font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow > span { position: relative; width: 22px; height: 1px; background: var(--accent-soft); box-shadow: 0 0 8px var(--accent); }
.eyebrow > span::after { content: ""; position: absolute; right: -1px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-soft); }
.eyebrow-plain { color: var(--muted-bright); }
.section { padding-block: 110px; }
.section-heading { max-width: 820px; margin-bottom: 50px; }
.section-heading > div:first-child { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.section-index { color: var(--accent-soft); font: 800 .68rem/1 "Cascadia Code", monospace; }
.section-heading h2, .final-cta h2 {
  margin-bottom: 20px;
  font: 760 clamp(2.35rem, 5.1vw, 5rem)/.98 var(--font-display);
  letter-spacing: -.055em;
}
.section-heading h2 em, .final-cta h2 em, .page-hero h1 em, .private-profile h1 em, .rift-page-header h1 em, .daily-preview h2 em {
  color: var(--accent-soft);
  font-style: normal;
  text-shadow: 0 0 38px rgb(var(--accent-rgb) / .14);
}
.section-heading > p, .section-heading > div > p { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 1.04rem; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.15fr .68fr; align-items: end; gap: 80px; }
.split-heading > div > div { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.split-heading h2 { margin-bottom: 0; }
.centered-heading { max-width: 900px; margin-inline: auto; text-align: center; }
.centered-heading > div:first-child { justify-content: center; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-soft); font-size: .82rem; font-weight: 800; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }

/* Home hero */
.site-main { min-height: 70vh; }
.home-hero { min-height: 790px; padding-top: 150px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 56px; }
.hero-copy { position: relative; z-index: 3; padding-bottom: 60px; }
.hero-copy h1 {
  max-width: 760px;
  margin: 24px 0 26px;
  font: 790 clamp(3.7rem, 6.2vw, 6.85rem)/.88 var(--font-display);
  letter-spacing: -.075em;
}
.hero-copy h1 em { display: inline-block; color: var(--accent-soft); font-style: normal; text-shadow: 0 0 50px rgb(var(--accent-rgb) / .14); }
.hero-lead { max-width: 660px; margin-bottom: 30px; color: var(--muted-bright); font-size: 1.09rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-proof { margin-top: 44px; display: flex; gap: 42px; }
.hero-proof div { display: flex; flex-direction: column; }
.hero-proof strong { font: 770 1.45rem/1 var(--font-display); letter-spacing: -.03em; }
.hero-proof span { margin-top: 7px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-visual { position: relative; min-height: 690px; perspective: 1400px; isolation: isolate; }
.hero-visual::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  left: 50%;
  top: 48%;
  border: 1px solid rgb(var(--accent-rgb) / .1);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .1), transparent 64%);
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 90px rgb(var(--accent-rgb) / .04);
}
.hero-radar { position: absolute; width: 490px; height: 490px; left: 50%; top: 48%; border: 1px solid rgb(var(--accent-rgb) / .16); border-radius: 50%; transform: translate(-50%, -50%); animation: radar-spin 28s linear infinite; }
.hero-radar::before, .hero-radar::after, .hero-radar i { content: ""; position: absolute; border: 1px solid rgb(var(--accent-rgb) / .09); border-radius: 50%; }
.hero-radar::before { inset: 12%; }
.hero-radar::after { inset: 26%; }
.hero-radar i:nth-child(1) { width: 8px; height: 8px; top: 5%; left: 49%; border: 0; background: var(--accent-soft); box-shadow: 0 0 12px var(--accent); }
.hero-radar i:nth-child(2) { inset: 50% 0 auto; height: 1px; border: 0; border-top: 1px dashed rgb(var(--accent-rgb) / .15); border-radius: 0; }
.hero-radar i:nth-child(3) { inset: 0 50% 0 auto; width: 1px; border: 0; border-left: 1px dashed rgb(var(--accent-rgb) / .15); border-radius: 0; }
@keyframes radar-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .15);
  border-radius: 18px;
  background: #0a0d13;
  box-shadow: var(--shadow), 0 0 60px rgb(var(--accent-rgb) / .08);
  transform-style: preserve-3d;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.hero-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 42%, rgb(255 255 255 / .15) 49%, transparent 56%); transform: translateX(-130%); transition: transform .8s ease; }
.hero-card:hover::after { transform: translateX(130%); }
.hero-card:hover { border-color: rgb(var(--accent-rgb) / .45); box-shadow: 0 35px 100px rgb(0 0 0 / .5), 0 0 50px rgb(var(--accent-rgb) / .12); }
.hero-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-card-main { z-index: 3; width: 338px; aspect-ratio: 3/4; top: 92px; left: 50%; transform: translateX(-50%) rotateY(-2deg); }
.hero-card-main figcaption { position: absolute; inset: auto 0 0; padding: 32px 18px 16px; background: linear-gradient(transparent, rgb(3 5 9 / .92)); }
.hero-card-main figcaption span { display: block; color: var(--accent-soft); font: 750 .58rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.hero-card-main figcaption strong { display: block; margin-top: 5px; font-size: .88rem; }
.hero-card-back { z-index: 1; width: 218px; aspect-ratio: 3/4; top: 50px; left: 2%; transform: rotate(-10deg); filter: saturate(.75) brightness(.66); }
.hero-card-front { z-index: 4; width: 204px; aspect-ratio: 3/4; right: 1%; bottom: 61px; transform: rotate(9deg); }
.hero-hud { position: absolute; z-index: 6; border: 1px solid rgb(var(--accent-rgb) / .2); color: var(--muted-bright); background: rgb(7 10 15 / .76); backdrop-filter: blur(12px); box-shadow: 0 12px 35px rgb(0 0 0 / .35); font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-hud-top { top: 42px; right: 5%; padding: 9px 13px; border-radius: 999px; }
.hero-hud-top .status-dot { margin-right: 8px; }
.hero-hud-side { right: 0; top: 43%; padding: 12px 15px; border-radius: 10px; }
.hero-hud-side small, .hero-hud-side strong { display: block; }
.hero-hud-side small { color: var(--muted); font-size: .55rem; }
.hero-hud-side strong { margin-top: 4px; color: var(--accent-soft); font: 700 .72rem/1 "Cascadia Code", monospace; }
.hero-signature { position: absolute; z-index: 5; bottom: 26px; left: 50%; color: rgb(255 255 255 / .26); font: 600 .6rem/1 "Cascadia Code", monospace; letter-spacing: .16em; transform: translateX(-50%); white-space: nowrap; }
.signal-strip { overflow: hidden; border-block: 1px solid var(--line); background: rgb(255 255 255 / .018); transform: rotate(-1deg) scale(1.02); }
.signal-strip > div { min-width: max-content; display: flex; align-items: center; gap: 30px; padding: 13px 0; animation: signal-scroll 28s linear infinite; }
.signal-strip span { color: var(--muted-bright); font-size: .68rem; font-weight: 800; letter-spacing: .23em; }
.signal-strip i { color: var(--accent-soft); font-style: normal; font-size: .7rem; }
@keyframes signal-scroll { to { transform: translateX(-50%); } }

/* Home feature bento */
.feature-bento { display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: 470px 390px; gap: 16px; }
.bento-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgb(255 255 255 / .045), rgb(255 255 255 / .018)); box-shadow: 0 20px 60px rgb(0 0 0 / .22); }
.bento-card::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--accent); filter: blur(110px); opacity: .06; transition: opacity .3s ease; }
.bento-card:hover::before { opacity: .11; }
.bento-copy { position: relative; z-index: 3; }
.feature-number { display: block; margin-bottom: 20px; color: var(--accent-soft); font: 700 .63rem/1 "Cascadia Code", monospace; letter-spacing: .13em; }
.bento-card h3 { margin-bottom: 15px; font: 740 clamp(1.65rem, 3vw, 2.75rem)/1.02 var(--font-display); letter-spacing: -.045em; }
.bento-card p { color: var(--muted); font-size: .94rem; line-height: 1.72; }
.bento-collection { padding: 45px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; }
.bento-collection::before { right: 10%; top: 10%; }
.bento-collection .bento-copy { align-self: center; }
.bento-collection .text-link { margin-top: 10px; }
.mini-stack { position: relative; min-height: 100%; }
.mini-stack img { position: absolute; width: 170px; aspect-ratio: 3/4; object-fit: cover; border: 1px solid rgb(255 255 255 / .15); border-radius: 13px; box-shadow: 0 22px 45px rgb(0 0 0 / .42); transition: transform .35s ease, filter .35s ease; }
.mini-stack img:nth-child(1) { top: 34px; left: 0; z-index: 1; transform: rotate(-9deg); filter: brightness(.65) saturate(.8); }
.mini-stack img:nth-child(2) { top: 0; left: 26%; z-index: 3; }
.mini-stack img:nth-child(3) { top: 35px; right: -5px; z-index: 2; transform: rotate(9deg); filter: brightness(.7) saturate(.85); }
.bento-collection:hover .mini-stack img:nth-child(1) { transform: translateX(-8px) rotate(-12deg); }
.bento-collection:hover .mini-stack img:nth-child(2) { transform: translateY(-8px); }
.bento-collection:hover .mini-stack img:nth-child(3) { transform: translateX(8px) rotate(12deg); }
.bento-dungeon { padding: 42px; background: radial-gradient(circle at 72% 42%, rgb(130 79 255 / .14), transparent 34%), linear-gradient(145deg, #11101a, #0b0d13); }
.bento-dungeon::before { right: 8%; top: 18%; background: #7f55ff; opacity: .11; }
.bento-dungeon h3, .bento-dungeon p { max-width: 390px; position: relative; z-index: 2; }
.dungeon-orbit { position: absolute; width: 260px; height: 260px; right: 20px; top: 38px; display: grid; place-items: center; border: 1px solid rgb(161 121 255 / .2); border-radius: 50%; }
.dungeon-orbit::before, .dungeon-orbit::after { content: ""; position: absolute; border: 1px solid rgb(161 121 255 / .13); border-radius: 50%; }
.dungeon-orbit::before { inset: 18%; }
.dungeon-orbit::after { inset: 35%; }
.dungeon-orbit span { color: #cdb9ff; font-size: 2.2rem; filter: drop-shadow(0 0 18px #8f5bff); }
.dungeon-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ad8cff; box-shadow: 0 0 12px #ad8cff; }
.dungeon-orbit i:nth-of-type(1) { top: 15%; left: 18%; }
.dungeon-orbit i:nth-of-type(2) { right: 8%; bottom: 31%; }
.stat-line { position: absolute; inset: auto 42px 34px; display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font: 700 .61rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.stat-line span { color: var(--muted); }
.stat-line strong { color: #bfa7ff; }
.bento-profile { padding: 42px 42px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; }
.bento-profile::before { left: 15%; bottom: 0; }
.bento-profile .bento-copy { align-self: start; padding-top: 8px; }
.profile-preview-frame { align-self: end; transform: perspective(1000px) rotateY(-7deg) translateY(18px); transform-origin: bottom right; }
.profile-preview-frame img { display: block; width: 100%; border: 1px solid rgb(255 255 255 / .15); border-radius: 14px 14px 0 0; box-shadow: -20px 22px 55px rgb(0 0 0 / .42); }
.bento-economy { padding: 42px; background: radial-gradient(circle at 75% 32%, rgb(255 73 134 / .12), transparent 34%), linear-gradient(145deg, #121018, #0b0d13); }
.bento-economy::before { right: 0; bottom: 0; background: #ff437c; }
.bento-economy h3, .bento-economy p { max-width: 380px; }
.currency-cluster { position: absolute; right: 50px; top: 80px; width: 170px; height: 140px; }
.currency-cluster span { position: absolute; display: grid; place-items: center; border: 1px solid currentColor; background: rgb(5 6 10 / .65); box-shadow: 0 0 25px currentColor; }
.currency-shard { width: 66px; height: 82px; right: 52px; top: 0; color: #6eeaff; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); font-size: 1.8rem; }
.currency-amethyst { width: 52px; height: 64px; left: 0; bottom: 0; color: #bd73ff; transform: rotate(-12deg); clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%); }
.currency-ruby { width: 54px; height: 54px; right: 0; bottom: 8px; color: #ff5278; border-radius: 50%; }
.market-ticker { position: absolute; inset: auto 42px 34px; display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font: 700 .6rem/1 "Cascadia Code", monospace; }
.market-ticker span { color: var(--muted); }
.market-ticker strong { color: var(--success); }

/* Image engine gallery */
.visual-section { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgb(255 255 255 / .018), transparent); }
.visual-section::before { content: "IMAGE // GENERATION // MATRIX"; position: absolute; right: -110px; top: 50%; color: rgb(255 255 255 / .018); font: 900 8rem/1 var(--font-display); letter-spacing: .08em; transform: rotate(90deg); pointer-events: none; }
.render-gallery { display: grid; grid-template-columns: 1.55fr .72fr .72fr; gap: 14px; }
.render-tile { position: relative; min-height: 520px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #090b10; }
.render-tile img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.render-tile:not(.render-tile-wide) img { object-position: center top; }
.render-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 52%, rgb(3 4 7 / .9)); pointer-events: none; }
.render-tile:hover img { transform: scale(1.035); filter: saturate(1.08); }
.render-tile figcaption { position: absolute; z-index: 2; inset: auto 22px 20px; }
.render-tile figcaption span { display: block; color: var(--accent-soft); font: 700 .58rem/1 "Cascadia Code", monospace; letter-spacing: .14em; }
.render-tile figcaption strong { display: block; margin-top: 8px; font: 720 1.15rem/1.2 var(--font-display); }
.render-tile-wide { min-height: 520px; }
.render-tile-wide img { object-fit: cover; }
.render-note { margin-top: 15px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid rgb(var(--accent-rgb) / .13); border-radius: 14px; background: rgb(var(--accent-rgb) / .035); }
.render-note-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .25); border-radius: 10px; color: var(--accent-soft); }
.render-note p { flex: 1; margin: 0; color: var(--muted); font-size: .85rem; }
.render-note p strong { color: var(--text); }
.render-note-code { color: var(--accent-soft); font: 650 .57rem/1 "Cascadia Code", monospace; letter-spacing: .1em; white-space: nowrap; }
.index-render { user-select: none; -webkit-user-drag: none; }

/* Journey and daily teaser */
.journey-section { padding-bottom: 90px; }
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.journey-grid article { position: relative; min-height: 310px; padding: 38px 32px; border-right: 1px solid var(--line); transition: background .25s ease; }
.journey-grid article:last-child { border-right: 0; }
.journey-grid article:hover { background: rgb(var(--accent-rgb) / .035); }
.journey-grid article > span { color: var(--muted); font: 700 .6rem/1 "Cascadia Code", monospace; }
.journey-grid i { width: 58px; height: 58px; margin: 42px 0 24px; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .25); border-radius: 16px 5px 16px 5px; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .06); box-shadow: inset 0 0 24px rgb(var(--accent-rgb) / .05); font: 750 .95rem/1 "Cascadia Code", monospace; font-style: normal; }
.journey-grid h3 { margin-bottom: 10px; font: 720 1.4rem/1 var(--font-display); }
.journey-grid p { margin-bottom: 0; color: var(--muted); font-size: .85rem; }
.daily-preview { min-height: 520px; margin-block: 30px 110px; padding: 70px 72px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .16); border-radius: 34px; background: radial-gradient(circle at 78% 50%, rgb(var(--accent-rgb) / .13), transparent 32%), linear-gradient(135deg, rgb(var(--accent-rgb) / .055), rgb(255 255 255 / .018)); box-shadow: var(--shadow); }
.daily-preview-copy { position: relative; z-index: 2; }
.daily-preview h2 { max-width: 680px; margin: 19px 0 18px; font: 760 clamp(2.7rem, 5vw, 5rem)/.95 var(--font-display); letter-spacing: -.06em; }
.daily-preview p { max-width: 680px; color: var(--muted-bright); }
.daily-meta { display: flex; gap: 30px; margin: 30px 0; }
.daily-meta span { display: flex; flex-direction: column; color: var(--muted); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; }
.daily-meta strong { margin-bottom: 4px; color: var(--text); font: 750 1.05rem/1 var(--font-display); letter-spacing: 0; }
.daily-preview-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.rift-core { position: relative; width: 390px; height: 390px; justify-self: end; display: grid; place-items: center; }
.rift-ring { position: absolute; border: 1px solid rgb(var(--accent-rgb) / .18); border-radius: 50%; animation: rift-rotate 20s linear infinite; }
.rift-ring::before, .rift-ring::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 14px var(--accent); }
.ring-one { inset: 3%; border-style: dashed; }
.ring-one::before { top: 10%; left: 20%; }
.ring-one::after { right: 4%; bottom: 35%; }
.ring-two { inset: 17%; animation-direction: reverse; animation-duration: 14s; }
.ring-two::before { top: -4px; left: 50%; }
.ring-two::after { bottom: -4px; left: 50%; }
.ring-three { inset: 31%; border-color: rgb(var(--accent-rgb) / .32); animation-duration: 9s; }
.ring-three::before { left: -4px; top: 50%; }
.ring-three::after { right: -4px; top: 50%; }
.rift-gem { z-index: 2; width: 95px; height: 120px; display: grid; place-items: center; clip-path: polygon(50% 0, 94% 25%, 78% 100%, 22% 100%, 6% 25%); color: white; background: linear-gradient(150deg, var(--accent-soft), var(--accent-deep)); box-shadow: 0 0 60px rgb(var(--accent-rgb) / .46); font-size: 2.4rem; filter: drop-shadow(0 0 18px rgb(var(--accent-rgb) / .8)); animation: gem-float 3.5s ease-in-out infinite; }
.rift-core > span { position: absolute; bottom: 15%; color: var(--muted); font: 700 .55rem/1.5 "Cascadia Code", monospace; text-align: center; letter-spacing: .2em; }
@keyframes rift-rotate { to { transform: rotate(360deg); } }
@keyframes gem-float { 50% { transform: translateY(-9px) scale(1.03); } }
.final-cta { padding-block: 80px 120px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.final-cta h2 { max-width: 820px; margin: 14px 0 0; }
.final-actions { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 8px; }

/* Page hero and player discovery */
.page-hero { min-height: 520px; padding-top: 170px; padding-bottom: 80px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 100px; }
.page-hero h1, .private-profile h1, .rift-page-header h1 { margin: 22px 0 20px; font: 770 clamp(3.1rem, 5.8vw, 6rem)/.92 var(--font-display); letter-spacing: -.065em; }
.page-hero p { max-width: 660px; color: var(--muted-bright); font-size: 1.04rem; }
.profile-search { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.profile-search > label { display: block; margin-bottom: 11px; color: var(--muted-bright); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.profile-search > div { display: flex; align-items: center; gap: 9px; padding: 6px 6px 6px 15px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgb(3 5 8 / .6); }
.profile-search > div > span { color: var(--accent-soft); font-size: 1.2rem; }
.profile-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: white; background: transparent; }
.profile-search input::placeholder { color: #646c79; }
.profile-search small { display: block; margin-top: 11px; color: var(--muted); font-size: .7rem; }
.profiles-section { padding-top: 20px; padding-bottom: 100px; }
.section-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 30px; }
.section-kicker { color: var(--accent-soft); font: 700 .62rem/1 "Cascadia Code", monospace; letter-spacing: .15em; }
.section-toolbar h2 { margin: 9px 0 0; font: 720 clamp(1.8rem, 3vw, 2.7rem)/1 var(--font-display); letter-spacing: -.04em; }
.player-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.player-card { --card-accent: var(--accent); --card-accent-rgb: var(--accent-rgb); position: relative; min-height: 142px; padding: 24px; display: flex; align-items: center; gap: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgb(var(--card-accent-rgb) / .07), rgb(255 255 255 / .018)); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.player-card:hover { z-index: 2; transform: translateY(-4px); border-color: rgb(var(--card-accent-rgb) / .38); box-shadow: 0 22px 50px rgb(0 0 0 / .28), 0 0 35px rgb(var(--card-accent-rgb) / .07); }
.player-card-glow { position: absolute; width: 160px; height: 160px; right: -90px; top: -90px; border-radius: 50%; background: var(--card-accent); filter: blur(65px); opacity: .1; }
.player-avatar-wrap { position: relative; width: 70px; height: 70px; flex: 0 0 auto; padding: 4px; border: 1px solid rgb(var(--card-accent-rgb) / .38); border-radius: 20px 7px 20px 7px; }
.player-avatar-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 15px 4px 15px 4px; }
.player-avatar-wrap i { position: absolute; width: 9px; height: 9px; right: -2px; bottom: 4px; border: 2px solid var(--bg-soft); border-radius: 50%; background: var(--card-accent); box-shadow: 0 0 10px var(--card-accent); }
.player-card-copy { min-width: 0; position: relative; z-index: 2; }
.player-card-copy > small { color: color-mix(in srgb, var(--card-accent), white 30%); font: 650 .55rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.player-card-copy h3 { margin: 8px 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 720 1.16rem/1 var(--font-display); }
.player-card-copy div { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .66rem; }
.player-card-copy div span + span::before { content: "·"; margin-right: 10px; }
.player-card-arrow { position: absolute; right: 17px; top: 14px; color: var(--muted); font-size: .8rem; transition: .2s ease; }
.player-card:hover .player-card-arrow { color: color-mix(in srgb, var(--card-accent), white 30%); transform: translate(2px, -2px); }
.empty-state { min-height: 360px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / .015); }
.empty-state > span { color: var(--accent-soft); font-size: 2rem; }
.empty-state h3 { margin: 15px 0 5px; font: 720 1.5rem/1 var(--font-display); }
.empty-state p { color: var(--muted); }
.profile-privacy-note { margin-bottom: 110px; display: flex; align-items: center; gap: 16px; padding: 22px 25px; border: 1px solid var(--line); border-radius: 15px; background: rgb(255 255 255 / .02); }
.profile-privacy-note > span { color: var(--accent-soft); }
.profile-privacy-note strong { font-size: .8rem; }
.profile-privacy-note p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; }

/* Individual profile */
.private-profile { min-height: 780px; padding-top: 190px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.private-profile h1 { max-width: 900px; }
.private-profile > p { color: var(--muted); }
.private-profile > div:last-child { display: flex; gap: 10px; margin-top: 25px; }
.private-lock { position: relative; width: 130px; height: 130px; margin-bottom: 30px; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .22); border-radius: 50%; background: rgb(var(--accent-rgb) / .05); }
.private-lock span { color: var(--accent-soft); font-size: 2.5rem; }
.private-lock i { position: absolute; inset: -15px; border: 1px dashed rgb(var(--accent-rgb) / .16); border-radius: 50%; animation: rift-rotate 16s linear infinite; }
.profile-hero { min-height: 810px; padding-top: 154px; padding-bottom: 70px; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 68px; }
.profile-art-panel { position: relative; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .22); border-radius: 25px; background: #090c12; box-shadow: 0 35px 100px rgb(0 0 0 / .5), 0 0 70px rgb(var(--accent-rgb) / .08); }
.profile-art-panel::before { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border: 1px solid rgb(255 255 255 / .08); border-radius: inherit; box-shadow: inset 0 0 60px rgb(var(--accent-rgb) / .05); }
.profile-art { position: relative; z-index: 2; width: 100%; display: block; aspect-ratio: 734/485; object-fit: cover; }
.profile-art.is-failed { opacity: 0; }
.profile-art-placeholder { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; align-content: center; color: rgb(var(--accent-rgb) / .2); background: radial-gradient(circle, rgb(var(--accent-rgb) / .08), transparent 60%); }
.profile-art-placeholder span { font: 900 4rem/1 var(--font-display); letter-spacing: .2em; }
.profile-art-placeholder small { margin-top: 12px; font: 650 .55rem/1 "Cascadia Code", monospace; letter-spacing: .18em; }
.profile-art-scan { position: absolute; z-index: 4; left: 0; right: 0; height: 1px; top: 0; pointer-events: none; background: var(--accent-soft); box-shadow: 0 0 15px var(--accent), 0 8px 30px rgb(var(--accent-rgb) / .3); opacity: .55; animation: profile-scan 5s ease-in-out infinite; }
@keyframes profile-scan { 50% { top: 100%; } 100% { top: 0; } }
.profile-art-label, .profile-art-corner { position: absolute; z-index: 5; bottom: 13px; padding: 7px 10px; border: 1px solid rgb(255 255 255 / .12); border-radius: 8px; color: var(--muted-bright); background: rgb(3 5 8 / .72); backdrop-filter: blur(10px); font: 650 .5rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.profile-art-label { left: 13px; }
.profile-art-label .status-dot { margin-right: 7px; width: 5px; height: 5px; }
.profile-art-corner { right: 13px; color: rgb(255 255 255 / .42); }
.profile-identity { max-width: 590px; }
.profile-id-row { display: flex; align-items: center; gap: 18px; }
.profile-avatar { position: relative; width: 92px; height: 92px; flex: 0 0 auto; padding: 5px; border: 1px solid rgb(var(--accent-rgb) / .4); border-radius: 26px 8px 26px 8px; box-shadow: 0 0 30px rgb(var(--accent-rgb) / .1); }
.profile-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 20px 5px 20px 5px; }
.profile-avatar i { position: absolute; right: 2px; bottom: 4px; width: 12px; height: 12px; border: 3px solid var(--bg); border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 10px var(--accent); }
.profile-id-row > div:last-child > span { color: var(--accent-soft); font: 700 .59rem/1 "Cascadia Code", monospace; letter-spacing: .13em; }
.profile-id-row h1 { margin: 8px 0 6px; font: 770 clamp(2.5rem, 4vw, 4.6rem)/.9 var(--font-display); letter-spacing: -.06em; }
.copy-id { padding: 0; border: 0; color: var(--muted); background: transparent; font: 620 .58rem/1 "Cascadia Code", monospace; cursor: pointer; }
.copy-id b { margin-left: 5px; color: var(--accent-soft); }
.profile-bio { margin: 35px 0 32px; padding-left: 18px; border-left: 2px solid rgb(var(--accent-rgb) / .4); color: var(--muted-bright); font-size: 1rem; white-space: pre-line; }
.profile-rank-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding-block: 20px; border-block: 1px solid var(--line); }
.profile-rank-line > div:not(.level-track) { display: flex; flex-direction: column; }
.profile-rank-line small { color: var(--muted); font: 650 .52rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.profile-rank-line strong { margin-top: 7px; font: 750 1.38rem/1 var(--font-display); }
.level-track { height: 4px; overflow: hidden; border-radius: 4px; background: rgb(255 255 255 / .07); }
.level-track span { height: 100%; display: block; border-radius: inherit; background: var(--accent-soft); box-shadow: 0 0 12px var(--accent); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.profile-joined { display: block; margin-top: 18px; color: var(--muted); font-size: .67rem; }
.profile-dashboard { padding-bottom: 110px; }
.profile-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / .018); }
.profile-stat-grid article { min-height: 145px; padding: 28px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.profile-stat-grid article:last-child { border-right: 0; }
.profile-stat-grid span { color: var(--muted); font: 650 .56rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.profile-stat-grid strong { margin: 18px 0 8px; color: var(--accent-soft); font: 760 1.85rem/1 var(--font-display); letter-spacing: -.03em; }
.profile-stat-grid small { color: var(--muted); font-size: .67rem; }
.profile-content-grid { margin-top: 15px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; }
.profile-module { min-height: 360px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / .018); }
.profile-module > header { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 28px; }
.profile-module > header span { color: var(--accent-soft); font: 650 .55rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.profile-module > header h2 { margin: 8px 0 0; font: 720 1.65rem/1 var(--font-display); letter-spacing: -.035em; }
.profile-module > header > small { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 650 .5rem/1 "Cascadia Code", monospace; }
.achievement-module { grid-row: span 2; }
.achievement-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.achievement-grid article { position: relative; min-height: 132px; padding: 18px 8px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgb(var(--accent-rgb) / .06), rgb(255 255 255 / .015)); text-align: center; }
.achievement-grid article::before { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--accent); filter: blur(32px); opacity: .05; }
.achievement-grid img { position: relative; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 10px rgb(var(--accent-rgb) / .25)); }
.achievement-grid b { position: relative; font-size: 2rem; }
.achievement-grid strong { position: relative; max-width: 100%; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }
.achievement-slot { position: absolute; left: 7px; top: 7px; color: var(--muted); font: 650 .46rem/1 "Cascadia Code", monospace; }
.progress-list { display: grid; }
.progress-list > div { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.progress-list > div:last-child { border-bottom: 0; }
.progress-list > div > span { color: var(--muted); font: 650 .5rem/1 "Cascadia Code", monospace; }
.progress-list p { margin: 0; display: flex; flex-direction: column; }
.progress-list p strong { font-size: .76rem; }
.progress-list p small { margin-top: 3px; color: var(--muted); font-size: .59rem; }
.progress-list b { color: var(--accent-soft); font: 700 .73rem/1 "Cascadia Code", monospace; }
.album-slot-list { display: grid; gap: 8px; }
.album-slot-list article { min-height: 70px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .018); }
.album-slot-list article > span { color: var(--accent-soft); font: 650 .52rem/1 "Cascadia Code", monospace; }
.album-slot-list article div { display: flex; flex-direction: column; }
.album-slot-list article strong { font-size: .76rem; }
.album-slot-list article small { margin-top: 4px; color: var(--muted); font-size: .6rem; }
.album-slot-list i { color: var(--muted); font-style: normal; }
.module-locked, .module-empty { min-height: 210px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.module-locked span, .module-empty span { color: var(--accent-soft); font-size: 1.8rem; }
.module-locked p, .module-empty p { max-width: 330px; margin: 12px 0 0; font-size: .75rem; }

/* Documentation */
.docs-hero { min-height: 395px; padding-top: 155px; padding-bottom: 55px; display: flex; align-items: end; justify-content: space-between; gap: 40px; border-bottom: 1px solid var(--line); }
.docs-hero h1 { margin: 18px 0 13px; font: 760 clamp(2.6rem, 5vw, 5rem)/.95 var(--font-display); letter-spacing: -.055em; }
.docs-hero p { max-width: 690px; margin: 0; color: var(--muted-bright); }
.docs-signal { min-width: 210px; padding: 18px; border: 1px solid rgb(var(--accent-rgb) / .15); border-radius: 13px; background: rgb(var(--accent-rgb) / .035); }
.docs-signal span, .docs-signal small, .docs-signal strong { display: block; }
.docs-signal span { color: var(--muted); font: 650 .5rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.docs-signal strong { margin: 10px 0 6px; color: var(--success); font: 750 .9rem/1 "Cascadia Code", monospace; }
.docs-signal small { color: var(--muted); font-size: .64rem; }
.docs-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 56px; padding-top: 45px; padding-bottom: 120px; }
.docs-sidebar { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 125px); overflow-y: auto; padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgb(var(--accent-rgb) / .25) transparent; }
.docs-home-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted-bright); font-size: .72rem; }
.docs-home-link span { color: var(--accent-soft); }
.docs-home-link.is-active { border-color: rgb(var(--accent-rgb) / .26); color: white; background: rgb(var(--accent-rgb) / .06); }
.docs-nav-group { margin-top: 27px; }
.docs-nav-group > span { display: block; margin: 0 0 8px 12px; color: #606876; font: 700 .5rem/1 "Cascadia Code", monospace; letter-spacing: .14em; }
.docs-nav-group a { position: relative; display: block; padding: 7px 12px; border-radius: 7px; color: var(--muted); font-size: .72rem; transition: .15s ease; }
.docs-nav-group a:hover, .docs-nav-group a.is-active { color: white; background: rgb(255 255 255 / .03); }
.docs-nav-group a.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent-soft); box-shadow: 0 0 8px var(--accent); }
.docs-help-card { margin-top: 28px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / .02); }
.docs-help-card > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .25); border-radius: 8px; color: var(--accent-soft); font-size: .7rem; }
.docs-help-card strong { display: block; margin-top: 13px; font-size: .75rem; }
.docs-help-card p { margin: 5px 0 11px; color: var(--muted); font-size: .66rem; }
.docs-help-card a { color: var(--accent-soft); font-size: .65rem; font-weight: 700; }
.docs-main { min-width: 0; }
.docs-overview { padding-bottom: 90px; scroll-margin-top: 110px; }
.docs-overview + .docs-overview { padding-top: 75px; border-top: 1px solid var(--line); }
.docs-chapter { display: block; margin-bottom: 19px; color: var(--accent-soft); font: 700 .57rem/1 "Cascadia Code", monospace; letter-spacing: .14em; }
.docs-overview > h2, .command-heading h2 { margin-bottom: 15px; font: 740 clamp(2rem, 4vw, 3.7rem)/.98 var(--font-display); letter-spacing: -.05em; }
.docs-intro, .command-heading p { max-width: 760px; color: var(--muted-bright); }
.quickstart-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.quickstart-grid article { min-height: 235px; padding: 26px; border-right: 1px solid var(--line); background: rgb(255 255 255 / .014); }
.quickstart-grid article:last-child { border-right: 0; }
.quickstart-grid article > span { color: var(--muted); font: 650 .5rem/1 "Cascadia Code", monospace; }
.quickstart-grid code { width: max-content; margin: 35px 0 18px; display: block; font-size: .78rem; }
.quickstart-grid h3 { margin-bottom: 8px; font: 710 1.15rem/1 var(--font-display); }
.quickstart-grid p { margin-bottom: 0; color: var(--muted); font-size: .72rem; }
.callout { margin-top: 14px; display: flex; align-items: center; gap: 14px; padding: 16px 19px; border: 1px solid rgb(var(--accent-rgb) / .16); border-radius: 11px; background: rgb(var(--accent-rgb) / .035); }
.callout span { color: var(--accent-soft); font: 700 .55rem/1 "Cascadia Code", monospace; }
.callout p { margin: 0; color: var(--muted-bright); font-size: .72rem; }
.system-doc-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.system-doc-grid a { position: relative; min-height: 190px; padding: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgb(var(--accent-rgb) / .035), rgb(255 255 255 / .012)); transition: transform .2s ease, border-color .2s ease; }
.system-doc-grid a:hover { transform: translateY(-3px); border-color: rgb(var(--accent-rgb) / .3); }
.system-doc-grid a > span { color: var(--accent-soft); font: 650 .53rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.system-doc-grid strong { display: block; margin: 32px 0 8px; font: 710 1.2rem/1 var(--font-display); }
.system-doc-grid p { max-width: 420px; margin: 0; color: var(--muted); font-size: .71rem; }
.system-doc-grid i { position: absolute; right: 20px; top: 17px; color: rgb(255 255 255 / .06); font: 800 3.4rem/1 var(--font-display); font-style: normal; }
.guide-category-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.guide-category-grid > article { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .014); }
.guide-category-grid > article > span { color: var(--accent-soft); }
.guide-category-grid h3 { margin: 14px 0 7px; font: 710 1.2rem/1 var(--font-display); }
.guide-category-grid p { min-height: 42px; color: var(--muted); font-size: .7rem; }
.guide-category-grid article div { display: grid; margin-top: 16px; }
.guide-category-grid article a { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted-bright); font-size: .69rem; }
.guide-category-grid article a i { color: var(--accent-soft); font-style: normal; }
.command-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.command-heading > span { padding-bottom: 10px; color: var(--muted); font-size: .64rem; }
.command-heading > span strong { color: var(--accent-soft); font: 750 1.2rem/1 var(--font-display); }
.command-search-bar { margin: 30px 0 22px; display: grid; grid-template-columns: 1fr 220px; gap: 9px; }
.command-search-bar label { min-height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgb(3 5 8 / .55); }
.command-search-bar label span { color: var(--accent-soft); }
.command-search-bar input { min-width: 0; flex: 1; border: 0; outline: 0; color: white; background: transparent; }
.command-search-bar select { padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--muted-bright); background: #090c12; }
.command-groups { display: grid; gap: 28px; }
.command-groups > section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding-inline: 4px; }
.command-groups > section > header span { color: var(--accent-soft); font: 700 .57rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.command-groups > section > header small { color: var(--muted); font-size: .58rem; }
.command-card { border-top: 1px solid var(--line); background: transparent; }
.command-card:last-child { border-bottom: 1px solid var(--line); }
.command-card summary { min-height: 76px; display: grid; grid-template-columns: 145px 1fr 28px; align-items: center; gap: 16px; padding: 12px 16px; list-style: none; cursor: pointer; transition: background .15s ease; }
.command-card summary::-webkit-details-marker { display: none; }
.command-card summary:hover { background: rgb(var(--accent-rgb) / .028); }
.command-card summary code { width: max-content; }
.command-card summary > span { min-width: 0; display: flex; flex-direction: column; }
.command-card summary strong { font-size: .79rem; }
.command-card summary small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.command-card summary > i { color: var(--accent-soft); font-size: 1rem; font-style: normal; transition: transform .2s ease; }
.command-card[open] summary > i { transform: rotate(45deg); }
.command-details { padding: 0 16px 22px 177px; color: var(--muted-bright); }
.command-details > p { max-width: 800px; white-space: pre-line; font-size: .72rem; }
.command-details > div { margin-top: 13px; display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.command-details > div > span { color: var(--muted); font: 650 .5rem/1.6 "Cascadia Code", monospace; letter-spacing: .1em; }
.command-details > div > p { margin: 0; color: var(--muted-bright); font: 600 .65rem/1.7 "Cascadia Code", monospace; white-space: pre-line; }
.command-empty { min-height: 220px; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.command-empty:not([hidden]) { display: grid; }
.command-empty span { color: var(--accent-soft); font-size: 1.4rem; }
.docs-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 35px; color: var(--muted); font-size: .65rem; }
.docs-breadcrumb a { color: var(--accent-soft); }
.guide-content { color: var(--muted-bright); font-size: .91rem; line-height: 1.8; }
.guide-content h1, .guide-content h2, .guide-content h3 { color: var(--text); font-family: var(--font-display); letter-spacing: -.035em; }
.guide-content h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; }
.guide-content h2 { margin-top: 55px; padding-top: 25px; border-top: 1px solid var(--line); font-size: 2rem; }
.guide-content h3 { margin-top: 35px; font-size: 1.35rem; }
.guide-content a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.guide-content img { height: auto; border: 1px solid var(--line); border-radius: 14px; }
.guide-content pre { overflow-x: auto; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #080a0f; }
.guide-content blockquote { margin-inline: 0; padding: 14px 18px; border-left: 2px solid var(--accent-soft); color: var(--muted-bright); background: rgb(var(--accent-rgb) / .035); }
.guide-content table { width: 100%; border-collapse: collapse; }
.guide-content th, .guide-content td { padding: 11px; border-bottom: 1px solid var(--line); text-align: left; }
.docs-article-footer { margin-top: 70px; padding-top: 25px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); }
.docs-article-footer > div { display: flex; align-items: center; gap: 12px; }
.docs-article-footer > div > span { color: var(--accent-soft); }
.docs-article-footer p { margin: 0; display: flex; flex-direction: column; }
.docs-article-footer p strong { font-size: .74rem; }
.docs-article-footer p small { margin-top: 3px; color: var(--muted); font-size: .63rem; }

/* Daily Rift */
.daily-game-switcher { width: max-content; max-width: 100%; margin-bottom: 44px; display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .018); }
.daily-game-switcher a { min-height: 67px; padding: 12px 18px; display: grid; grid-template-columns: 30px 1fr; align-content: center; column-gap: 10px; border-right: 1px solid var(--line); color: var(--muted); transition: color .18s ease, background .18s ease; }
.daily-game-switcher a:last-child { border-right: 0; }
.daily-game-switcher a:hover, .daily-game-switcher a.is-active { color: white; background: rgb(var(--accent-rgb) / .06); }
.daily-game-switcher a > span { grid-row: 1 / span 2; align-self: center; color: var(--accent-soft); font: 700 .55rem/1 "Cascadia Code", monospace; }
.daily-game-switcher strong { font: 700 .72rem/1.2 var(--font-display); }
.daily-game-switcher small { margin-top: 4px; color: var(--muted); font-size: .56rem; }
.rift-page { padding-top: 145px; padding-bottom: 115px; }
.rift-page-header { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 80px; padding-bottom: 55px; border-bottom: 1px solid var(--line); }
.rift-page-header h1 { margin-bottom: 22px; }
.rift-page-header p { max-width: 720px; margin-bottom: 0; color: var(--muted-bright); }
.rift-daily-data { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / .018); }
.rift-daily-data > div { min-height: 92px; padding: 18px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.rift-daily-data > div:last-child { border-right: 0; }
.rift-daily-data span { color: var(--muted); font: 650 .48rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.rift-daily-data strong { margin-top: 9px; color: var(--accent-soft); font: 700 .72rem/1 "Cascadia Code", monospace; }
.rift-daily-data strong.is-complete { color: var(--success); }
.rift-layout { margin-top: 38px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 15px; }
.rift-console { position: relative; min-height: 780px; padding: 20px 30px 30px; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .19); border-radius: 22px; background: radial-gradient(circle at 50% 44%, rgb(var(--accent-rgb) / .09), transparent 34%), linear-gradient(145deg, #0b0e15, #07090e); box-shadow: var(--shadow), inset 0 0 80px rgb(var(--accent-rgb) / .025); }
.rift-console::before { content: ""; position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgb(var(--accent-rgb) / .12) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--accent-rgb) / .12) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(circle, black, transparent 72%); pointer-events: none; }
.console-topline { position: relative; display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font: 650 .5rem/1 "Cascadia Code", monospace; letter-spacing: .13em; }
.console-topline div { display: flex; gap: 6px; }
.console-topline i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.console-topline i:first-child { background: var(--danger); }.console-topline i:nth-child(2) { background: #ffc765; }.console-topline i:last-child { background: var(--success); }
.console-status { position: relative; width: min(620px, 90%); margin: 22px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.console-status > div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); }
.console-status > div:last-child { border-right: 0; }
.console-status span { color: var(--muted); font: 650 .49rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.console-status strong { margin-top: 8px; color: var(--accent-soft); font: 700 .86rem/1 "Cascadia Code", monospace; }
.rift-board-wrap { position: relative; width: min(500px, 78%); aspect-ratio: 1; margin: 32px auto 22px; display: grid; place-items: center; }
.rift-board-aura { position: absolute; inset: -8%; border: 1px solid rgb(var(--accent-rgb) / .1); border-radius: 50%; box-shadow: inset 0 0 70px rgb(var(--accent-rgb) / .04); animation: rift-rotate 35s linear infinite; }
.rift-board-aura::before, .rift-board-aura::after { content: ""; position: absolute; border: 1px dashed rgb(var(--accent-rgb) / .12); border-radius: 50%; }
.rift-board-aura::before { inset: 9%; }.rift-board-aura::after { inset: 18%; }
.rift-board { position: relative; z-index: 2; width: 82%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; transform: rotate(45deg); }
.rift-board button { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .16); border-radius: 12px; color: var(--muted-bright); background: rgb(6 10 15 / .82); cursor: pointer; transform: scale(.96); transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease; }
.rift-board button > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.25rem; transform: rotate(-45deg); }
.rift-board button > i { position: absolute; width: 5px; height: 5px; right: 7px; top: 7px; border-radius: 50%; background: rgb(255 255 255 / .13); }
.rift-board button:not(:disabled):hover { transform: scale(1); border-color: rgb(var(--accent-rgb) / .38); color: white; }
.rift-board button.is-pulse, .rift-board button.is-hit { z-index: 2; transform: scale(1.06); border-color: var(--accent-soft); color: #05070a; background: var(--accent-soft); box-shadow: 0 0 30px rgb(var(--accent-rgb) / .65); }
.rift-board button.is-error { border-color: var(--danger); color: white; background: rgb(255 84 112 / .45); box-shadow: 0 0 25px rgb(255 84 112 / .45); animation: cell-error .35s ease; }
.rift-board button:disabled { cursor: default; }
@keyframes cell-error { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.rift-core-mini { position: absolute; z-index: 4; width: 74px; height: 74px; display: grid; place-items: center; pointer-events: none; border: 1px solid rgb(var(--accent-rgb) / .32); border-radius: 50%; color: var(--accent-soft); background: #080b10; box-shadow: 0 0 25px rgb(var(--accent-rgb) / .2); font-size: 1.35rem; }
.rift-core-mini::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgb(var(--accent-rgb) / .25); border-radius: 50%; animation: rift-rotate 8s linear infinite; }
.rift-message { position: relative; min-height: 63px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rift-message strong { font: 710 .88rem/1 var(--font-display); }
.rift-message span { margin-top: 7px; color: var(--muted); font-size: .68rem; }
.rift-controls { position: relative; display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.rift-antiforgery { display: none; }
.rift-sidebar { display: grid; gap: 15px; align-self: start; }
.reward-card, .rift-rules, .streak-card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgb(255 255 255 / .035), rgb(255 255 255 / .014)); }
.reward-card { position: relative; overflow: hidden; padding: 29px; text-align: center; }
.reward-card::before { content: ""; position: absolute; width: 170px; height: 170px; left: 50%; top: 50px; border-radius: 50%; background: var(--accent); filter: blur(70px); opacity: .1; transform: translateX(-50%); }
.reward-gem { position: relative; width: 58px; height: 72px; margin: 0 auto 20px; display: grid; place-items: center; clip-path: polygon(50% 0, 94% 25%, 78% 100%, 22% 100%, 6% 25%); color: #05070a; background: var(--accent-soft); filter: drop-shadow(0 0 15px rgb(var(--accent-rgb) / .5)); }
.reward-card > span { position: relative; display: block; color: var(--muted); font: 650 .51rem/1 "Cascadia Code", monospace; letter-spacing: .13em; }
.reward-card > strong { position: relative; display: block; margin: 16px 0 5px; color: var(--accent-soft); font: 780 2.7rem/1 var(--font-display); letter-spacing: -.05em; }
.reward-card > small { position: relative; color: var(--muted-bright); font-size: .69rem; }
.reward-card > div:last-child { position: relative; margin-top: 25px; padding-top: 17px; border-top: 1px solid var(--line); }
.reward-card p { margin: 7px 0 0; display: flex; justify-content: space-between; color: var(--muted); font-size: .66rem; }
.reward-card p b { color: var(--text); }
.rift-rules { padding: 25px; }
.rift-rules > span, .streak-card > div > span { color: var(--accent-soft); font: 650 .52rem/1 "Cascadia Code", monospace; letter-spacing: .13em; }
.rift-rules ol { margin: 21px 0 0; padding: 0; list-style: none; }
.rift-rules li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.rift-rules li > i { color: var(--muted); font: 650 .48rem/1.5 "Cascadia Code", monospace; font-style: normal; }
.rift-rules li p { margin: 0; display: flex; flex-direction: column; }
.rift-rules li strong { font-size: .71rem; }
.rift-rules li small { margin-top: 4px; color: var(--muted); font-size: .61rem; }
.streak-card { padding: 23px; }
.streak-card > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.streak-card > div > strong { color: var(--muted-bright); font-size: .64rem; }
.streak-card > p { margin: 15px 0; color: var(--muted); font-size: .63rem; }
.streak-pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.streak-pips i { position: relative; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgb(255 255 255 / .015); font: 650 .5rem/1 "Cascadia Code", monospace; font-style: normal; }
.streak-pips i.is-active { border-color: rgb(var(--accent-rgb) / .35); color: var(--accent-soft); background: rgb(var(--accent-rgb) / .08); box-shadow: 0 0 12px rgb(var(--accent-rgb) / .08); }

/* Pocket Patrol */
.pocket-page { --pocket-pink: #ff8ad8; --pocket-blue: var(--accent-soft); padding-top: 145px; padding-bottom: 115px; }
.pocket-header { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: 80px; padding-bottom: 55px; border-bottom: 1px solid var(--line); }
.pocket-header h1 { margin: 22px 0; font: 770 clamp(3.1rem, 5.8vw, 6rem)/.92 var(--font-display); letter-spacing: -.065em; }
.pocket-header h1 em { color: color-mix(in srgb, var(--pocket-pink), white 14%); font-style: normal; }
.pocket-header p { max-width: 720px; margin-bottom: 0; color: var(--muted-bright); }
.pocket-daily-data { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgb(255 138 216 / .15); border-radius: 14px; background: linear-gradient(135deg, rgb(255 138 216 / .035), rgb(var(--accent-rgb) / .025)); }
.pocket-daily-data > div { min-height: 92px; padding: 18px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
.pocket-daily-data > div:last-child { border-right: 0; }
.pocket-daily-data span { color: var(--muted); font: 650 .48rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.pocket-daily-data strong { margin-top: 9px; color: color-mix(in srgb, var(--pocket-pink), white 14%); font: 700 .72rem/1 "Cascadia Code", monospace; }
.pocket-daily-data strong.is-complete { color: var(--success); }
.pocket-layout { margin-top: 38px; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 15px; }
.pocket-console { position: relative; min-height: 850px; padding: 20px 30px 30px; overflow: hidden; border: 1px solid rgb(255 138 216 / .18); border-radius: 22px; background: radial-gradient(circle at 50% 45%, rgb(255 138 216 / .09), transparent 34%), radial-gradient(circle at 18% 18%, rgb(var(--accent-rgb) / .08), transparent 25%), linear-gradient(145deg, #0d0d17, #07090f); box-shadow: var(--shadow), inset 0 0 90px rgb(255 138 216 / .025); }
.pocket-console::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(circle, rgb(255 255 255 / .28) 1px, transparent 1.5px); background-size: 34px 34px; mask-image: radial-gradient(circle, black, transparent 76%); pointer-events: none; }
.pocket-hud { position: relative; width: min(620px, 92%); margin: 20px auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.pocket-hud > div { display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); }
.pocket-hud > div:last-child { border-right: 0; }
.pocket-hud span { color: var(--muted); font: 650 .48rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.pocket-hud strong { margin-top: 8px; color: color-mix(in srgb, var(--pocket-pink), white 15%); font: 750 .9rem/1 "Cascadia Code", monospace; }
.pocket-target { position: relative; width: min(700px, 94%); min-height: 108px; margin: 22px auto 20px; padding: 13px 17px; display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 17px; overflow: hidden; border: 1px solid rgb(255 138 216 / .2); border-radius: 18px; background: linear-gradient(100deg, rgb(255 138 216 / .08), rgb(var(--accent-rgb) / .035)); }
.pocket-target::after { content: ""; position: absolute; width: 140px; height: 140px; right: -40px; border-radius: 50%; background: var(--pocket-pink); opacity: .06; filter: blur(35px); }
.pocket-target-portrait { position: relative; width: 76px; height: 76px; padding: 4px; border: 1px solid rgb(255 138 216 / .35); border-radius: 24px 24px 19px 19px; background: #0a0c12; transform: rotate(-2deg); }
.pocket-target-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; border-radius: 19px 19px 15px 15px; }
.pocket-target-portrait i { position: absolute; inset: -6px; border: 1px dashed rgb(var(--accent-rgb) / .24); border-radius: 27px; animation: pocket-orbit 12s linear infinite; }
.pocket-target > div:nth-child(2) { display: flex; flex-direction: column; }
.pocket-target > div:nth-child(2) > span { color: var(--pocket-pink); font: 700 .5rem/1 "Cascadia Code", monospace; letter-spacing: .13em; }
.pocket-target > div:nth-child(2) > strong { margin-top: 8px; font: 740 1.05rem/1 var(--font-display); }
.pocket-target > div:nth-child(2) > small { margin-top: 6px; color: var(--muted); font-size: .62rem; }
.pocket-target > b { position: relative; z-index: 2; color: var(--muted); font: 650 .5rem/1 "Cascadia Code", monospace; }
.pocket-arena { position: relative; width: min(650px, 92%); margin: 12px auto 18px; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; border: 1px solid rgb(var(--accent-rgb) / .1); border-radius: 28px; background: radial-gradient(circle at center, rgb(255 138 216 / .055), transparent 62%), rgb(3 5 9 / .35); }
.pocket-stage-lines { position: absolute; inset: 12px; z-index: 0; pointer-events: none; border: 1px dashed rgb(255 255 255 / .04); border-radius: 22px; }
.pocket-arena button { position: relative; z-index: 1; aspect-ratio: 1.08; min-width: 0; overflow: visible; border: 1px solid rgb(255 138 216 / .13); border-radius: 30px 30px 23px 23px; color: white; background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .012)); cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.pocket-arena button::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -7px; height: 13px; border-radius: 50%; background: rgb(255 138 216 / .18); filter: blur(5px); }
.pocket-arena button img { position: absolute; inset: 8px 8px 10px; width: calc(100% - 16px); height: calc(100% - 18px); z-index: 2; object-fit: cover; object-position: center 26%; border-radius: 25px 25px 18px 18px; user-select: none; }
.pocket-portal-ring { position: absolute; inset: -5px; z-index: 1; border: 1px dashed rgb(var(--accent-rgb) / .2); border-radius: 35px; animation: pocket-orbit 16s linear infinite; }
.pocket-arena button > i { position: absolute; z-index: 4; right: 2px; top: -7px; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgb(255 138 216 / .35); border-radius: 50%; color: var(--pocket-pink); background: #0b0d14; box-shadow: 0 0 12px rgb(255 138 216 / .2); font-size: .7rem; font-style: normal; }
.pocket-arena button:not(:disabled):hover { transform: translateY(-5px) rotate(1deg); border-color: rgb(255 138 216 / .42); box-shadow: 0 12px 28px rgb(0 0 0 / .3); }
.pocket-arena button.is-entering { animation: pocket-arrive .25s cubic-bezier(.2,.8,.3,1); }
.pocket-arena button.is-correct { transform: scale(1.06); border-color: var(--success); box-shadow: 0 0 28px rgb(118 247 183 / .35); }
.pocket-arena button.is-wrong { border-color: var(--danger); box-shadow: 0 0 25px rgb(255 84 112 / .35); animation: cell-error .35s ease; }
.pocket-arena button.is-dim { opacity: .34; transform: scale(.95); }
.pocket-arena button:disabled { cursor: default; }
@keyframes pocket-arrive { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@keyframes pocket-orbit { to { transform: rotate(360deg); } }
.pocket-progress { position: relative; width: min(650px, 92%); height: 4px; margin: 0 auto 20px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .06); }
.pocket-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pocket-pink), var(--accent-soft)); box-shadow: 0 0 14px rgb(255 138 216 / .4); transform-origin: left; }
.pocket-message { min-height: 68px; }
.pocket-sidebar { display: grid; gap: 15px; align-self: start; }
.pocket-reward-card, .pocket-brief, .pocket-streak-card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgb(255 138 216 / .035), rgb(255 255 255 / .014)); }
.pocket-reward-card { position: relative; overflow: hidden; padding: 27px; text-align: center; }
.pocket-reward-card::before { content: ""; position: absolute; width: 180px; height: 180px; left: 50%; top: 40px; border-radius: 50%; background: var(--pocket-pink); opacity: .09; filter: blur(65px); transform: translateX(-50%); }
.pocket-mascot { position: relative; width: 94px; height: 94px; margin: 0 auto 19px; padding: 5px; border: 1px solid rgb(255 138 216 / .32); border-radius: 36px 36px 28px 28px; background: #0a0c12; transform: rotate(3deg); }
.pocket-mascot img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; border-radius: 31px 31px 23px 23px; }
.pocket-mascot span { position: absolute; right: -8px; top: -9px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #171019; background: var(--pocket-pink); font-weight: 900; box-shadow: 0 0 16px rgb(255 138 216 / .5); }
.pocket-reward-card > span, .pocket-brief > span, .pocket-streak-card > span { position: relative; display: block; color: var(--pocket-pink); font: 650 .5rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.pocket-reward-card > strong { position: relative; display: block; margin: 14px 0 5px; color: color-mix(in srgb, var(--pocket-pink), white 15%); font: 780 2.7rem/1 var(--font-display); }
.pocket-reward-card > small { position: relative; color: var(--muted-bright); font-size: .68rem; }
.pocket-reward-card > div:last-child { position: relative; margin-top: 23px; padding-top: 16px; border-top: 1px solid var(--line); }
.pocket-reward-card p { margin: 7px 0 0; display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }
.pocket-reward-card p b { color: white; }
.pocket-brief { padding: 24px; }
.pocket-brief ol { margin: 20px 0 0; padding: 0; list-style: none; }
.pocket-brief li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.pocket-brief li > i { color: var(--muted); font: 650 .48rem/1.5 "Cascadia Code", monospace; font-style: normal; }
.pocket-brief li p { margin: 0; display: flex; flex-direction: column; }
.pocket-brief li strong { font-size: .7rem; }
.pocket-brief li small { margin-top: 4px; color: var(--muted); font-size: .6rem; }
.pocket-streak-card { padding: 23px; }
.pocket-streak-card > strong { display: block; margin-top: 11px; color: var(--muted-bright); font-size: .68rem; }
.pocket-streak-card > p { margin: 14px 0; color: var(--muted); font-size: .62rem; }

/* Footer and feedback */
.site-footer { position: relative; padding-top: 65px; border-top: 1px solid var(--line); background: rgb(3 4 7 / .55); }
.footer-grid { display: grid; grid-template-columns: 1.4fr .65fr .65fr .85fr; gap: 60px; padding-bottom: 55px; }
.footer-brand p { max-width: 390px; margin: 23px 0 0; color: var(--muted); font-size: .76rem; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links strong { margin-bottom: 7px; color: var(--muted-bright); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; }
.footer-links a { color: var(--muted); font-size: .7rem; transition: color .15s ease; }
.footer-links a:hover { color: var(--accent-soft); }
.footer-status { align-self: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(255 255 255 / .02); }
.footer-status span { display: flex; align-items: center; gap: 9px; color: var(--muted-bright); font: 650 .6rem/1 "Cascadia Code", monospace; }
.footer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 9px var(--success); }
.footer-status small { display: block; margin-top: 9px; color: var(--muted); font-size: .58rem; }
.footer-bottom { min-height: 64px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #606775; font-size: .61rem; }
.toast-region { position: fixed; z-index: 2000; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.maintenance-handoff {
  --handoff-color: var(--accent-soft);
  position: fixed;
  z-index: 12000;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(920px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px 17px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--handoff-color), transparent 52%);
  border-radius: 14px;
  color: #f7fbff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--handoff-color), transparent 91%), transparent 38%),
    rgb(6 9 14 / .97);
  box-shadow: 0 22px 70px rgb(0 0 0 / .72), inset 0 1px rgb(255 255 255 / .05);
  backdrop-filter: blur(22px);
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  transition: transform .28s ease, opacity .22s ease, border-color .2s ease;
}
.maintenance-handoff[hidden], .maintenance-handoff-actions[hidden], .maintenance-handoff-actions button[hidden] { display: none; }
.maintenance-handoff::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--handoff-color);
  box-shadow: 0 0 22px var(--handoff-color);
}
.maintenance-handoff.is-visible { transform: translate(-50%, 0); opacity: 1; }
.maintenance-handoff[data-mode="ready"] { --handoff-color: var(--success); }
.maintenance-handoff[data-mode="offline"],
.maintenance-handoff[data-mode="warning"] { --handoff-color: #ffb454; }
.maintenance-handoff[data-mode="recovering"] { --handoff-color: #8dd8ff; }
.maintenance-handoff-signal {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--handoff-color), transparent 45%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--handoff-color), transparent 88%);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--handoff-color), transparent 82%);
}
.maintenance-handoff-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--handoff-color);
  box-shadow: 0 0 14px var(--handoff-color);
  animation: maintenance-signal 1.25s ease-in-out infinite;
}
.maintenance-handoff-copy { min-width: 0; }
.maintenance-handoff-copy small,
.maintenance-handoff-status span {
  display: block;
  color: color-mix(in srgb, var(--handoff-color), white 12%);
  font: 700 .58rem/1.2 "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  letter-spacing: .13em;
}
.maintenance-handoff-copy strong { display: block; margin-top: 4px; font-size: .98rem; letter-spacing: -.015em; }
.maintenance-handoff-copy p { margin: 2px 0 0; color: #aeb8c7; font-size: .76rem; line-height: 1.35; }
.maintenance-handoff-status { min-width: 118px; text-align: right; }
.maintenance-handoff-status time {
  display: block;
  color: var(--handoff-color);
  font: 800 1.28rem/1 "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  letter-spacing: -.05em;
}
.maintenance-handoff-status span { margin-top: 6px; white-space: nowrap; font-size: .52rem; }
.maintenance-handoff-actions { grid-column: 2 / -1; justify-content: flex-end; gap: 8px; }
.maintenance-handoff-actions button {
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--handoff-color), transparent 58%);
  border-radius: 7px;
  color: #edf7ff;
  background: color-mix(in srgb, var(--handoff-color), transparent 90%);
  font: 750 .62rem/1 "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.maintenance-handoff-actions button:hover { border-color: var(--handoff-color); }
.maintenance-editor-locked { cursor: wait; }
@keyframes maintenance-signal { 50% { opacity: .35; transform: scale(.72); } }
@media (max-width: 680px) {
  .maintenance-handoff { grid-template-columns: auto minmax(0, 1fr); gap: 11px 13px; padding: 13px 14px; }
  .maintenance-handoff-status { grid-column: 2; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .maintenance-handoff-status time { font-size: 1rem; }
  .maintenance-handoff-status span { margin: 0 0 0 10px; }
  .maintenance-handoff-actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .maintenance-handoff { transition: none; }
  .maintenance-handoff-signal i { animation: none; }
}
.toast { min-width: 260px; padding: 13px 16px; border: 1px solid rgb(var(--accent-rgb) / .24); border-radius: 11px; color: var(--text); background: rgb(9 12 18 / .94); box-shadow: var(--shadow); backdrop-filter: blur(14px); font-size: .72rem; animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Reveal enhancement */
body.reveal-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
body.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Existing utility pages */
.validation-summary-errors, .field-validation-error { color: var(--danger); }
input, textarea { accent-color: var(--accent); }

.auth-body { min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.auth-result { position: relative; z-index: 2; width: min(680px, calc(100% - 30px)); padding: 55px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgb(var(--accent-rgb) / .2); border-radius: 28px; background: rgb(9 12 18 / .82); box-shadow: var(--shadow), 0 0 80px rgb(var(--accent-rgb) / .08); backdrop-filter: blur(20px); text-align: center; }
.auth-result > .brand { position: absolute; left: 25px; top: 22px; }
.auth-sigil { position: relative; width: 112px; height: 112px; margin: 30px 0 35px; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .3); border-radius: 50%; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .06); box-shadow: inset 0 0 30px rgb(var(--accent-rgb) / .06), 0 0 35px rgb(var(--accent-rgb) / .08); }
.auth-sigil span { font: 600 2.4rem/1 var(--font-display); }
.auth-sigil i { position: absolute; inset: -11px; border: 1px dashed rgb(var(--accent-rgb) / .2); border-radius: 50%; animation: rift-rotate 14s linear infinite; }
.auth-result h1 { margin: 19px 0; font: 760 clamp(2.7rem, 8vw, 4.5rem)/.94 var(--font-display); letter-spacing: -.055em; }
.auth-result h1 em { color: var(--accent-soft); font-style: normal; }
.auth-result > p { max-width: 530px; color: var(--muted-bright); }
.auth-status { width: min(420px, 100%); margin: 18px 0 27px; padding: 14px 17px; display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 2px 10px; border: 1px solid rgb(118 247 183 / .18); border-radius: 11px; background: rgb(118 247 183 / .035); text-align: left; }
.auth-status > span { grid-row: 1 / span 2; }
.auth-status strong { font-size: .72rem; }
.auth-status small { color: var(--muted); font-size: .61rem; }
.auth-status.is-error { border-color: rgb(255 84 112 / .2); background: rgb(255 84 112 / .035); }
.auth-status.is-error > span { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 9px var(--danger); }

@media (max-width: 1220px) {
  :root { --shell: min(100% - 40px, 1180px); }
  .header-inner { gap: 20px; }
  .site-nav > a { padding-inline: 10px; }
  .account-chip span:last-child { display: none; }
  .home-hero { grid-template-columns: .9fr 1.1fr; gap: 20px; }
  .hero-card-back { left: -2%; }
  .hero-card-front { right: -2%; }
  .feature-bento { grid-template-rows: 440px 370px; }
  .bento-collection { padding: 35px; grid-template-columns: 1fr 1fr; }
  .mini-stack img { width: 145px; }
  .bento-dungeon, .bento-profile, .bento-economy { padding: 35px; }
  .currency-cluster { opacity: .65; }
  .profile-hero { gap: 40px; }
  .achievement-grid { grid-template-columns: repeat(4, 1fr); }
  .rift-page-header { grid-template-columns: 1fr; gap: 35px; }
  .rift-daily-data { max-width: 650px; }
  .pocket-header { grid-template-columns: 1fr; gap: 35px; }
  .pocket-daily-data { max-width: 650px; }
}

@media (max-width: 980px) {
  .site-header, .site-header.is-scrolled { height: 72px; background: rgb(5 6 10 / .82); border-color: var(--line); backdrop-filter: blur(20px); }
  .header-inner { gap: 12px; }
  .nav-toggle { order: 3; display: block; margin-left: 2px; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 72px 20px auto; display: none; padding: 12px; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 16px; background: rgb(8 10 15 / .96); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
  .site-nav.is-open { display: flex; animation: nav-open .2s ease; }
  @keyframes nav-open { from { opacity: 0; transform: translateY(-8px); } }
  .site-nav > a { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding-inline: 14px; }
  .site-nav > a.is-active::after { display: none; }
  .site-nav .nav-mobile { display: flex; }
  .site-nav .nav-mobile-form { display: block; }
  .nav-mobile-form button { width: 100%; min-height: 48px; padding-inline: 14px; border: 0; color: var(--muted-bright); background: transparent; text-align: left; cursor: pointer; }
  .nav-mobile-form button:hover { color: white; background: rgb(255 255 255 / .045); }
  .header-login { display: none; }
  .header-actions { margin-left: auto; }
  .home-hero { min-height: 1150px; padding-top: 140px; grid-template-columns: 1fr; gap: 5px; }
  .hero-copy { padding-bottom: 0; text-align: center; }
  .hero-copy .eyebrow, .hero-actions, .hero-proof { justify-content: center; }
  .hero-lead { margin-inline: auto; }
  .hero-visual { width: min(690px, 100%); min-height: 650px; margin-inline: auto; }
  .section { padding-block: 85px; }
  .split-heading { grid-template-columns: 1fr; gap: 25px; }
  .feature-bento { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .bento-card { min-height: 390px; }
  .bento-collection { min-height: 460px; }
  .bento-dungeon { min-height: 410px; }
  .bento-profile { min-height: 430px; }
  .bento-economy { min-height: 390px; }
  .render-gallery { grid-template-columns: 1fr 1fr; }
  .render-tile-wide { grid-column: 1 / -1; }
  .render-tile { min-height: 430px; }
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-grid article:nth-child(2) { border-right: 0; }
  .journey-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .daily-preview { grid-template-columns: 1fr; text-align: center; }
  .daily-preview .eyebrow, .daily-meta { justify-content: center; }
  .daily-preview p { margin-inline: auto; }
  .rift-core { justify-self: center; order: -1; width: 300px; height: 300px; }
  .final-cta { flex-direction: column; align-items: start; }
  .page-hero { grid-template-columns: 1fr; gap: 40px; }
  .profile-search { max-width: 720px; }
  .player-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-hero { min-height: auto; padding-top: 130px; grid-template-columns: 1fr; }
  .profile-art-panel { max-width: 820px; }
  .profile-identity { max-width: 820px; }
  .profile-content-grid { grid-template-columns: 1fr; }
  .achievement-module { grid-row: auto; }
  .achievement-grid { grid-template-columns: repeat(5, 1fr); }
  .docs-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
  .quickstart-grid { grid-template-columns: repeat(2, 1fr); }
  .quickstart-grid article:nth-child(2) { border-right: 0; }
  .quickstart-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .rift-layout { grid-template-columns: 1fr; }
  .rift-sidebar { grid-template-columns: repeat(3, 1fr); }
  .reward-card, .rift-rules, .streak-card { min-height: 100%; }
  .pocket-layout { grid-template-columns: 1fr; }
  .pocket-sidebar { grid-template-columns: repeat(3, 1fr); }
  .pocket-reward-card, .pocket-brief, .pocket-streak-card { min-height: 100%; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-status { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 28px); }
  .brand-copy small { display: none; }
  .header-invite { min-height: 39px; padding: 8px 12px; font-size: .72rem; }
  .account-chip { padding-right: 5px; }
  .home-hero { min-height: 1020px; padding-top: 120px; }
  .hero-copy h1 { font-size: clamp(3.15rem, 15vw, 5rem); }
  .hero-lead { font-size: .96rem; }
  .hero-proof { gap: 24px; }
  .hero-proof strong { font-size: 1.15rem; }
  .hero-visual { min-height: 560px; }
  .hero-visual::before { width: 450px; height: 450px; }
  .hero-radar { width: 390px; height: 390px; }
  .hero-card-main { width: 275px; top: 88px; }
  .hero-card-back { width: 155px; top: 62px; left: 0; }
  .hero-card-front { width: 150px; right: 0; bottom: 56px; }
  .hero-hud-side { right: 0; top: 48%; }
  .section { padding-block: 70px; }
  .section-heading { margin-bottom: 35px; }
  .section-heading h2, .final-cta h2 { font-size: clamp(2.25rem, 11vw, 3.5rem); }
  .bento-card { border-radius: 22px; }
  .bento-collection { min-height: 650px; padding: 28px; grid-template-columns: 1fr; }
  .mini-stack { min-height: 310px; }
  .mini-stack img { width: 145px; }
  .mini-stack img:nth-child(1) { left: 4%; }
  .mini-stack img:nth-child(2) { left: 32%; }
  .mini-stack img:nth-child(3) { right: 2%; }
  .bento-dungeon, .bento-profile, .bento-economy { padding: 28px; }
  .dungeon-orbit { width: 210px; height: 210px; right: -30px; opacity: .55; }
  .bento-profile { min-height: 610px; grid-template-columns: 1fr; }
  .profile-preview-frame { transform: translateY(15px); }
  .currency-cluster { top: 170px; right: 15px; opacity: .38; }
  .render-gallery { grid-template-columns: 1fr; }
  .render-tile-wide { grid-column: auto; min-height: 330px; }
  .render-tile { min-height: 520px; }
  .render-note { align-items: start; }
  .render-note-code { display: none; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid article { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
  .journey-grid article:last-child { border-bottom: 0; }
  .journey-grid i { margin-block: 25px 18px; }
  .daily-preview { margin-bottom: 75px; padding: 45px 24px; border-radius: 24px; }
  .daily-meta { gap: 15px; }
  .daily-preview-actions { justify-content: center; }
  .rift-core { width: 245px; height: 245px; }
  .final-cta { padding-block: 65px 85px; }
  .final-actions { width: 100%; flex-direction: column; }
  .page-hero { min-height: auto; padding-top: 130px; padding-bottom: 65px; }
  .page-hero h1, .private-profile h1, .rift-page-header h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .profile-search > div { flex-wrap: wrap; }
  .profile-search input { width: calc(100% - 35px); flex: none; }
  .profile-search button { width: 100%; }
  .section-toolbar { align-items: start; flex-direction: column; }
  .player-grid { grid-template-columns: 1fr; }
  .profile-privacy-note { align-items: start; }
  .profile-hero { gap: 34px; }
  .profile-art-label { bottom: 8px; left: 8px; }
  .profile-art-corner { display: none; }
  .profile-id-row { align-items: start; }
  .profile-avatar { width: 74px; height: 74px; }
  .profile-id-row h1 { font-size: 2.7rem; }
  .profile-rank-line { grid-template-columns: 1fr 1fr; }
  .profile-rank-line .level-track { grid-column: 1 / -1; grid-row: 2; }
  .profile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-stat-grid article:nth-child(2) { border-right: 0; }
  .profile-stat-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-module { padding: 23px; }
  .docs-hero { min-height: auto; padding-top: 130px; align-items: start; flex-direction: column; }
  .docs-layout { display: block; }
  .docs-sidebar { position: static; max-height: none; margin-bottom: 45px; }
  .docs-sidebar nav { display: none; }
  .docs-help-card { display: none; }
  .quickstart-grid, .system-doc-grid, .guide-category-grid { grid-template-columns: 1fr; }
  .quickstart-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .quickstart-grid article:last-child { border-bottom: 0; }
  .command-heading { align-items: start; flex-direction: column; }
  .command-search-bar { grid-template-columns: 1fr; }
  .command-search-bar select { min-height: 50px; }
  .command-card summary { grid-template-columns: 105px 1fr 20px; gap: 10px; padding-inline: 7px; }
  .command-card summary small { white-space: normal; line-height: 1.35; }
  .command-details { padding-left: 7px; }
  .docs-article-footer { align-items: start; flex-direction: column; }
  .rift-page { padding-top: 120px; }
  .rift-page-header { gap: 30px; }
  .rift-daily-data { grid-template-columns: 1fr; }
  .rift-daily-data > div { min-height: 70px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rift-daily-data > div:last-child { border-bottom: 0; }
  .rift-console { min-height: 690px; padding-inline: 15px; }
  .console-status { width: 100%; }
  .rift-board-wrap { width: min(440px, 92%); }
  .rift-controls { align-items: stretch; flex-direction: column; }
  .rift-sidebar { grid-template-columns: 1fr; }
  .pocket-page { padding-top: 120px; }
  .pocket-header { gap: 30px; }
  .pocket-daily-data { grid-template-columns: 1fr; }
  .pocket-daily-data > div { min-height: 70px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pocket-daily-data > div:last-child { border-bottom: 0; }
  .pocket-console { min-height: 760px; padding-inline: 15px; }
  .pocket-target { grid-template-columns: 70px 1fr; }
  .pocket-target > b { display: none; }
  .pocket-arena { width: min(560px, 100%); padding: 15px; gap: 9px; }
  .pocket-sidebar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-brand, .footer-status { grid-column: 1 / -1; }
  .footer-bottom { align-items: start; flex-direction: column; justify-content: center; gap: 5px; }
}

@media (max-width: 430px) {
  .header-actions { display: none; }
  .nav-toggle { margin-left: auto; }
  .header-invite span { display: none; }
  .hero-actions .button { width: 100%; }
  .hero-proof { gap: 14px; }
  .hero-proof span { letter-spacing: .06em; }
  .hero-card-back, .hero-card-front { width: 120px; }
  .hero-card-main { width: 250px; }
  .hero-hud-top { right: 0; }
  .hero-hud-side { display: none; }
  .mini-stack img { width: 125px; }
  .market-ticker { grid-template-columns: auto 1fr; }
  .daily-meta { flex-wrap: wrap; }
  .daily-preview-actions .button { width: 100%; }
  .daily-game-switcher { width: 100%; grid-template-columns: 1fr; }
  .daily-game-switcher a { border-right: 0; border-bottom: 1px solid var(--line); }
  .daily-game-switcher a:last-child { border-bottom: 0; }
  .profile-id-row { flex-direction: column; }
  .profile-stat-grid { grid-template-columns: 1fr; }
  .profile-stat-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-stat-grid article:last-child { border-bottom: 0; }
  .profile-actions .button { width: 100%; }
  .command-card summary { grid-template-columns: 1fr 20px; }
  .command-card summary code { grid-column: 1; margin-top: 7px; }
  .command-card summary > span { grid-column: 1; }
  .command-card summary > i { grid-column: 2; grid-row: 1 / span 2; }
  .rift-board { gap: 5px; }
  .rift-board button { border-radius: 8px; }
  .pocket-header h1 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .pocket-target { width: 100%; padding-inline: 11px; gap: 11px; }
  .pocket-target > div:nth-child(2) > small { display: none; }
  .pocket-arena { padding: 10px; gap: 6px; border-radius: 20px; }
  .pocket-arena button { border-radius: 20px 20px 15px 15px; }
  .pocket-arena button img { inset: 5px 5px 7px; width: calc(100% - 10px); height: calc(100% - 12px); border-radius: 17px 17px 12px 12px; }
  .pocket-portal-ring { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body.reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ========================================================================== */
/* INDEX ANIME GAME ART DIRECTION                                             */
/* ========================================================================== */

:root {
  --anime-cyan: #77efff;
  --anime-blue: #378cff;
  --anime-pink: #ff8bcf;
  --anime-gold: #ffd477;
  --anime-violet: #9f78ff;
  --anime-ink: #070b1c;
  --anime-panel: rgb(10 17 39 / .92);
  --anime-edge: rgb(189 242 255 / .52);
  --anime-shadow: 0 22px 0 rgb(1 5 18 / .34), 0 42px 90px rgb(0 0 0 / .55);
  --font-anime: "Trebuchet MS", "Segoe UI Variable Display", "Segoe UI", sans-serif;
}

.anime-game-body {
  background:
    radial-gradient(circle at 50% -10%, rgb(var(--accent-rgb) / .18), transparent 33rem),
    linear-gradient(180deg, #090d24, #050715 55%, #03040b);
  font-family: "Segoe UI Variable Text", "Segoe UI", sans-serif;
}
.anime-game-body h1,
.anime-game-body h2,
.anime-game-body h3 { font-family: var(--font-anime); }
.anime-game-body .site-main { isolation: isolate; }
.anime-game-body .site-header {
  height: 82px;
  border-bottom: 2px solid rgb(151 229 255 / .12);
  background: linear-gradient(180deg, rgb(5 9 24 / .92), rgb(8 13 31 / .72));
  box-shadow: 0 8px 0 rgb(0 0 0 / .16), 0 20px 55px rgb(0 0 0 / .24);
  backdrop-filter: blur(15px) saturate(1.3);
}
.anime-game-body .site-header::before {
  content: "";
  position: absolute;
  inset: auto 0 -7px;
  height: 7px;
  background: linear-gradient(90deg, transparent 3%, var(--accent), var(--anime-pink), var(--accent), transparent 97%);
  clip-path: polygon(0 0, 28% 0, 29% 100%, 71% 100%, 72% 0, 100% 0, 100% 20%, 0 20%);
  opacity: .42;
}
.anime-game-body .site-header.is-scrolled { height: 70px; background: rgb(5 9 24 / .94); }
.anime-game-body .brand-mark {
  border: 2px solid rgb(var(--accent-rgb) / .58);
  border-radius: 50% 14% 50% 14%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .3), rgb(8 13 31 / .95) 68%);
  box-shadow: 0 0 0 3px rgb(5 9 24), 0 0 0 4px rgb(var(--accent-rgb) / .2), 0 0 28px rgb(var(--accent-rgb) / .3);
  transform: rotate(-4deg);
}
.anime-game-body .brand-mark img { transform: rotate(4deg); }
.anime-game-body .brand-copy strong { font: 900 17px/1 var(--font-anime); text-shadow: 2px 2px 0 rgb(38 80 130 / .5); }
.anime-game-body .brand-copy small { color: var(--accent-soft); }
.anime-game-body .site-nav { gap: 2px; }
.anime-game-body .site-nav > a {
  border-radius: 4px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  font-family: var(--font-anime);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.anime-game-body .site-nav > a:hover,
.anime-game-body .site-nav > a.is-active { background: linear-gradient(120deg, rgb(var(--accent-rgb) / .2), rgb(126 111 255 / .12)); }
.anime-game-body .site-nav > a.is-active::after { left: 8px; right: 8px; bottom: 0; height: 2px; }
.anime-game-body .nav-play i { border-radius: 3px; }

.button-anime,
.anime-game-body .button-primary {
  min-height: 48px;
  padding-inline: 22px;
  border: 2px solid rgb(219 249 255 / .62);
  border-radius: 4px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  font-family: var(--font-anime);
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 2px rgb(7 12 31 / .48), 0 7px 0 rgb(3 8 24 / .72), 0 14px 30px rgb(var(--accent-rgb) / .18);
}
.button-anime::before,
.anime-game-body .button-primary::before {
  content: "";
  position: absolute;
  inset: 3px 40% 55% 6px;
  background: linear-gradient(100deg, rgb(255 255 255 / .5), transparent);
  clip-path: polygon(5px 0, 100% 0, 94% 100%, 0 100%);
  opacity: .5;
}
.button-anime i { margin-left: 8px; padding: 2px 7px; border: 1px solid currentColor; font-size: .57rem; font-style: normal; letter-spacing: .12em; opacity: .78; }
.button-anime:hover { transform: translateY(-3px); filter: brightness(1.12); }
.anime-game-body .button-ghost { background: rgb(7 13 32 / .74); }

.ambient-anime-moon {
  position: absolute;
  width: 32rem;
  aspect-ratio: 1;
  right: -12rem;
  top: 28vh;
  border: 1px solid rgb(var(--accent-rgb) / .12);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgb(255 255 255 / .18), rgb(var(--accent-rgb) / .06) 42%, transparent 68%);
  box-shadow: 0 0 80px rgb(var(--accent-rgb) / .06);
}
.sakura-field { position: absolute; inset: 0; overflow: hidden; }
.sakura-field i {
  --size: calc(7px + (var(--petal) * .22px));
  position: absolute;
  width: var(--size);
  height: calc(var(--size) * .68);
  left: calc(2% + (var(--petal) * 5.45%));
  top: -30px;
  border-radius: 90% 15% 90% 15%;
  background: linear-gradient(135deg, #ffe1f4, #ff79be 70%);
  box-shadow: 0 0 7px rgb(255 126 196 / .34);
  opacity: .55;
  animation: sakura-fall calc(9s + (var(--petal) * .41s)) linear infinite;
  animation-delay: calc(var(--petal) * -1.21s);
}
@keyframes sakura-fall {
  0% { translate: 0 -5vh; rotate: 0deg; }
  35% { translate: 7vw 36vh; rotate: 230deg; }
  70% { translate: -4vw 74vh; rotate: 510deg; }
  100% { translate: 5vw 112vh; rotate: 760deg; }
}

/* Character 420 sprite atlas: four 500x800 frames */
.index-chibi {
  --chibi-size: 280px;
  --sprite-x: 0%;
  position: relative;
  width: var(--chibi-size);
  aspect-ratio: 5 / 8;
  display: block;
  isolation: isolate;
  filter: drop-shadow(0 18px 12px rgb(2 6 20 / .48));
  animation: chibi-idle 3.2s ease-in-out infinite;
}
.index-chibi-sprite { position: absolute; z-index: 2; inset: 0; background: url("/images/anime/index-chibis-v2.webp?v=2000x800") var(--sprite-x) 0 / 400% 100% no-repeat; }
.index-chibi-aura {
  position: absolute;
  z-index: 0;
  width: 77%;
  aspect-ratio: 1;
  left: 12%;
  bottom: 7%;
  border: 2px solid rgb(var(--accent-rgb) / .38);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--accent-rgb) / .23), transparent 68%);
  box-shadow: 0 0 38px rgb(var(--accent-rgb) / .2), inset 0 0 30px rgb(var(--accent-rgb) / .12);
  animation: chibi-aura 2.2s ease-in-out infinite;
}
.index-chibi-aura::before,
.index-chibi-aura::after { content: ""; position: absolute; inset: -8%; border: 1px dashed rgb(var(--accent-rgb) / .28); border-radius: 50%; animation: rift-rotate 12s linear infinite; }
.index-chibi-aura::after { inset: 11%; animation-direction: reverse; animation-duration: 8s; }
.index-chibi-shadow { position: absolute; z-index: 1; width: 68%; height: 6%; left: 16%; bottom: 1%; border-radius: 50%; background: rgb(0 0 0 / .58); filter: blur(7px); }
.index-chibi-charm {
  position: absolute;
  z-index: 4;
  right: 2%;
  top: 26%;
  width: 44px;
  aspect-ratio: 1;
  display: none;
  place-items: center;
  border: 2px solid white;
  border-radius: 50%;
  color: #071226;
  background: var(--anime-gold);
  box-shadow: 0 5px 0 rgb(7 18 38 / .45), 0 0 20px currentColor;
  font: 900 18px/1 var(--font-anime);
}
.index-chibi-core,
.index-chibi-core-star { --sprite-x: 0%; }
.index-chibi-ramen,
.index-chibi-ramen-spicy { --sprite-x: 33.333%; }
.index-chibi-festival,
.index-chibi-festival-moon { --sprite-x: 66.666%; }
.index-chibi-shrine,
.index-chibi-shrine-star { --sprite-x: 100%; }
.index-chibi-core-star .index-chibi-charm { display: grid; background: #ffe87b; }
.index-chibi-core-star .index-chibi-charm::before { content: "★"; }
.index-chibi-ramen-spicy .index-chibi-charm { display: grid; background: #ff7a74; }
.index-chibi-ramen-spicy .index-chibi-charm::before { content: "火"; }
.index-chibi-festival-moon .index-chibi-charm { display: grid; color: white; background: #755cff; }
.index-chibi-festival-moon .index-chibi-charm::before { content: "月"; }
.index-chibi-shrine-star .index-chibi-charm { display: grid; color: #08203b; background: #a4f5ff; }
.index-chibi-shrine-star .index-chibi-charm::before { content: "星"; }
@keyframes chibi-idle { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-9px) rotate(.8deg); } }
@keyframes chibi-aura { 0%, 100% { scale: .94; opacity: .64; } 50% { scale: 1.05; opacity: 1; } }

/* Opening episode */
.anime-opening { position: relative; min-height: 980px; overflow: hidden; isolation: isolate; background: #071026; }
.anime-opening-art { position: absolute; z-index: -4; inset: -3%; width: 106%; height: 106%; max-width: none; object-fit: cover; object-position: center; opacity: .56; animation: anime-opening-pan 24s ease-in-out infinite alternate; }
.anime-opening-tint { position: absolute; z-index: -3; inset: 0; background: linear-gradient(90deg, rgb(3 7 24 / .95) 0%, rgb(4 8 26 / .77) 34%, rgb(7 12 35 / .08) 69%, rgb(4 6 22 / .28)), linear-gradient(180deg, rgb(4 7 20 / .28), transparent 55%, #050817 100%); }
.anime-opening-tint::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 43%, rgb(var(--accent-rgb) / .18), transparent 28%); mix-blend-mode: screen; }
.anime-speed-lines { position: absolute; inset: 0; z-index: -1; opacity: .13; background: repeating-linear-gradient(108deg, transparent 0 18px, rgb(255 255 255 / .28) 19px, transparent 20px 56px); mask-image: linear-gradient(90deg, transparent 20%, black 62%, transparent); animation: speed-lines 18s linear infinite; }
@keyframes anime-opening-pan { from { transform: scale(1.02) translate3d(-.7%, 0, 0); } to { transform: scale(1.08) translate3d(.8%, -1.2%, 0); } }
@keyframes speed-lines { to { background-position: 620px 0; } }
.anime-opening-hud { position: relative; min-height: 980px; padding-top: 150px; display: grid; grid-template-columns: minmax(520px, .9fr) minmax(300px, .62fr) 270px; grid-template-rows: auto 1fr; gap: 24px 30px; align-items: center; }
.rpg-location { grid-column: 1 / -1; justify-self: start; display: grid; grid-template-columns: 11px auto auto auto; align-items: center; gap: 8px 13px; padding: 9px 18px 9px 11px; border: 1px solid rgb(193 241 255 / .35); background: linear-gradient(90deg, rgb(6 14 38 / .9), rgb(6 14 38 / .36)); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 7px 50%); box-shadow: 0 7px 0 rgb(0 0 0 / .2); }
.rpg-location > i { width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: ui-pulse 1.5s ease-in-out infinite; }
.rpg-location span { color: var(--accent-soft); font: 900 .59rem/1 var(--font-anime); letter-spacing: .16em; }
.rpg-location strong { font: 900 .72rem/1 var(--font-anime); letter-spacing: .08em; }
.rpg-location small { padding-left: 13px; border-left: 1px solid rgb(255 255 255 / .2); color: #8fffc6; font: 800 .54rem/1 var(--font-anime); letter-spacing: .14em; }
@keyframes ui-pulse { 50% { opacity: .45; scale: .75; } }
.anime-opening-copy { align-self: center; padding-bottom: 70px; }
.anime-episode { display: flex; align-items: center; gap: 12px; color: #dbe8ff; font: 800 .66rem/1 var(--font-anime); letter-spacing: .14em; text-transform: uppercase; }
.anime-episode b { padding: 6px 9px; color: #081021; background: var(--accent-soft); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); font-size: .58rem; }
.anime-episode i { width: 38px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.anime-opening-copy h1 { max-width: 750px; margin: 24px 0 24px; font: 950 clamp(4.3rem, 7vw, 7.7rem)/.83 var(--font-anime); letter-spacing: -.075em; text-shadow: 3px 4px 0 rgb(19 57 104 / .65), 0 12px 35px rgb(0 0 0 / .7); }
.anime-opening-copy h1 em { display: inline-block; color: var(--accent-soft); font-style: normal; -webkit-text-stroke: 1px rgb(255 255 255 / .25); text-shadow: 3px 4px 0 color-mix(in srgb, var(--accent), #12305e 58%), 0 0 28px rgb(var(--accent-rgb) / .3); }
.anime-opening-copy > p { max-width: 650px; color: #e1e8f4; font-size: 1.05rem; font-weight: 560; line-height: 1.72; text-shadow: 0 2px 8px rgb(0 0 0 / .9); }
.anime-opening-actions { margin-top: 29px; display: flex; flex-wrap: wrap; gap: 12px; }
.anime-party-stats { margin-top: 35px; max-width: 690px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgb(191 238 255 / .25); background: rgb(5 11 31 / .68); box-shadow: 0 9px 0 rgb(0 0 0 / .19); backdrop-filter: blur(8px); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.anime-party-stats > div { min-height: 76px; padding: 13px 16px; display: grid; grid-template-columns: auto 1fr; align-items: end; border-right: 1px solid rgb(255 255 255 / .11); }
.anime-party-stats > div:last-child { border-right: 0; }
.anime-party-stats span { grid-column: 1 / -1; color: #9bb1cf; font: 800 .54rem/1 var(--font-anime); letter-spacing: .14em; }
.anime-party-stats strong { font: 950 1.45rem/1 var(--font-anime); }
.anime-party-stats small { padding: 0 0 2px 7px; color: var(--accent-soft); font: 700 .57rem/1 var(--font-anime); }
.anime-opening-character { position: relative; align-self: end; justify-self: center; width: 360px; height: 700px; }
.anime-opening-character > .index-chibi { --chibi-size: 410px; position: absolute; z-index: 2; left: -25px; bottom: 24px; }
.anime-dialogue { position: absolute; z-index: 5; width: 310px; padding: 15px 18px 17px; border: 2px solid rgb(214 248 255 / .7); background: linear-gradient(135deg, rgb(15 30 65 / .96), rgb(7 13 34 / .93)); box-shadow: inset 0 0 0 3px rgb(111 216 255 / .1), 7px 9px 0 rgb(4 8 22 / .42), 0 18px 35px rgb(0 0 0 / .35); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 24px 100%, 13px calc(100% - 10px), 0 calc(100% - 10px)); }
.anime-dialogue::after { content: ""; position: absolute; right: 18px; bottom: 7px; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); animation: dialogue-next .8s ease-in-out infinite alternate; }
.anime-dialogue small { color: var(--accent-soft); font: 900 .56rem/1 var(--font-anime); letter-spacing: .13em; }
.anime-dialogue p { margin: 7px 0 0; color: white; font: 700 .77rem/1.5 var(--font-anime); }
.anime-opening-character > .anime-dialogue { left: -60px; top: 56px; }
@keyframes dialogue-next { to { translate: 0 3px; } }
.anime-character-name { position: absolute; z-index: 6; right: -4px; bottom: 77px; min-width: 185px; padding: 9px 18px 11px; background: linear-gradient(90deg, rgb(var(--accent-rgb) / .92), rgb(var(--accent-rgb) / .36)); color: #071124; clip-path: polygon(15px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transform: skew(-5deg); }
.anime-character-name > * { transform: skew(5deg); }
.anime-character-name span { display: block; font: 900 .48rem/1 var(--font-anime); letter-spacing: .2em; }
.anime-character-name strong { display: block; font: 950 1.5rem/.95 var(--font-anime); letter-spacing: .04em; }
.anime-character-name small { display: block; margin-top: 4px; font: 800 .53rem/1 var(--font-anime); }
.anime-quest-tracker { align-self: center; overflow: hidden; border: 1px solid rgb(204 242 255 / .31); background: linear-gradient(145deg, rgb(8 17 42 / .88), rgb(8 12 31 / .7)); box-shadow: 8px 10px 0 rgb(3 6 19 / .3), inset 0 0 25px rgb(var(--accent-rgb) / .05); backdrop-filter: blur(12px); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.anime-quest-tracker header { height: 42px; padding: 0 13px 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(255 255 255 / .12); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .2), transparent); font: 900 .58rem/1 var(--font-anime); letter-spacing: .14em; }
.anime-quest-tracker header b { width: 23px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #071124; background: var(--accent-soft); }
.anime-quest-tracker > a { min-height: 77px; padding: 12px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid rgb(255 255 255 / .08); transition: .2s ease; }
.anime-quest-tracker > a:hover { padding-left: 17px; background: rgb(var(--accent-rgb) / .1); }
.anime-quest-tracker > a > i { width: 27px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .35); border-radius: 50%; color: var(--accent-soft); font: 800 .56rem/1 var(--font-anime); font-style: normal; }
.anime-quest-tracker strong { display: block; font: 800 .68rem/1.2 var(--font-anime); }
.anime-quest-tracker small { display: block; margin-top: 5px; color: #8ea0bd; font-size: .56rem; }
.anime-quest-tracker > a > b { color: var(--accent); font-size: 1.2rem; }
.anime-scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 27px; display: flex; flex-direction: column; align-items: center; gap: 8px; translate: -50% 0; color: #c9d9ed; font: 800 .5rem/1 var(--font-anime); letter-spacing: .23em; }
.anime-scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--accent), transparent); animation: scroll-cue 1.5s ease-in-out infinite; }
@keyframes scroll-cue { 50% { scale: 1 1.35; opacity: .4; } }

/* World route */
.anime-world-map { position: relative; z-index: 20; min-height: 116px; margin-top: -34px; padding: 17px 22px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 2px solid rgb(205 243 255 / .42); background: linear-gradient(145deg, rgb(9 18 43 / .97), rgb(6 11 29 / .96)); box-shadow: 0 13px 0 rgb(2 6 20 / .42), 0 25px 55px rgb(0 0 0 / .42), inset 0 0 35px rgb(var(--accent-rgb) / .06); clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px); }
.world-map-route { position: absolute; left: 12%; right: 12%; top: 51%; height: 2px; background: repeating-linear-gradient(90deg, rgb(var(--accent-rgb) / .46) 0 8px, transparent 8px 15px); }
.anime-world-map > a { position: relative; z-index: 1; min-height: 80px; padding: 12px 13px; display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 10px; border-right: 1px solid rgb(255 255 255 / .12); transition: .2s ease; }
.anime-world-map > a:last-child { border-right: 0; }
.anime-world-map > a:hover { background: linear-gradient(120deg, rgb(var(--accent-rgb) / .15), transparent); translate: 0 -4px; }
.anime-world-map > a > i { width: 38px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid rgb(var(--accent-rgb) / .5); border-radius: 50%; color: var(--accent-soft); background: #081229; box-shadow: 0 0 0 4px rgb(7 13 30), 0 0 16px rgb(var(--accent-rgb) / .22); font: 900 .65rem/1 var(--font-anime); font-style: normal; }
.anime-world-map small { display: block; color: #8397b7; font: 800 .49rem/1 var(--font-anime); letter-spacing: .14em; }
.anime-world-map strong { display: block; margin-top: 6px; font: 900 .76rem/1 var(--font-anime); }
.anime-world-map > a > b { position: absolute; right: 12px; top: 8px; color: #8effc3; font: 900 .45rem/1 var(--font-anime); letter-spacing: .1em; }

/* Illustrated districts */
.anime-district { position: relative; min-height: 900px; overflow: hidden; isolation: isolate; }
.anime-district-art { position: absolute; z-index: -4; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; opacity: .56; animation: district-breathe 22s ease-in-out infinite alternate; }
.anime-district-shade { position: absolute; z-index: -3; inset: 0; }
.ramen-district .anime-district-shade { background: linear-gradient(90deg, rgb(4 8 22 / .94) 0%, rgb(4 8 22 / .77) 37%, rgb(5 8 21 / .12) 68%, rgb(3 5 14 / .2)), linear-gradient(180deg, #050817 0, transparent 13%, transparent 82%, #060715 100%); }
.festival-district .anime-district-shade { background: linear-gradient(90deg, rgb(5 7 24 / .08), rgb(5 7 24 / .22) 46%, rgb(5 7 24 / .86) 76%, rgb(5 7 24 / .96)), linear-gradient(180deg, #060715 0, transparent 18%, transparent 80%, #050716 100%); }
@keyframes district-breathe { from { transform: scale(1.015); } to { transform: scale(1.065) translateY(-1.4%); } }
.anime-district-layout { min-height: 900px; padding-block: 110px 90px; display: grid; grid-template-columns: minmax(430px, .8fr) minmax(270px, .5fr) 290px; align-items: center; gap: 30px; }
.anime-story-panel { position: relative; max-width: 610px; padding: 0 0 25px 29px; border-left: 3px solid var(--anime-gold); text-shadow: 0 3px 8px rgb(0 0 0 / .75); }
.anime-story-panel::before { content: ""; position: absolute; z-index: -1; inset: -50px -70px -45px -50px; background: radial-gradient(ellipse at left, rgb(3 7 20 / .76), transparent 71%); }
.anime-story-panel > header { width: min(410px, 100%); height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgb(255 231 180 / .32); background: linear-gradient(90deg, rgb(116 55 32 / .68), rgb(15 15 31 / .5)); color: #ffe1aa; font: 900 .54rem/1 var(--font-anime); letter-spacing: .13em; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.anime-story-panel > header b { color: #a8ffc8; font-size: .48rem; }
.anime-story-chapter { margin: 25px 0 12px; display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 11px; }
.anime-story-chapter > i { grid-row: 1 / span 2; width: 43px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #ffd99b; border-radius: 50%; color: #2b1708; background: #ffd99b; box-shadow: 0 0 25px rgb(255 184 86 / .3); font: 950 1.1rem/1 serif; font-style: normal; }
.anime-story-chapter span { color: #f2c687; font: 900 .5rem/1 var(--font-anime); letter-spacing: .18em; }
.anime-story-chapter strong { margin-top: 4px; font: 900 .92rem/1 var(--font-anime); }
.anime-story-panel h2 { margin: 15px 0 22px; font: 950 clamp(3.5rem, 5.7vw, 6.4rem)/.88 var(--font-anime); letter-spacing: -.065em; }
.anime-story-panel h2 em { color: #ffd79a; font-style: normal; text-shadow: 3px 4px 0 rgb(100 47 29 / .75), 0 0 20px rgb(255 169 91 / .22); }
.anime-story-panel > p { max-width: 570px; color: #f3e9e0; font-size: 1rem; font-weight: 600; }
.ramen-buffs { margin: 27px 0 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.ramen-buffs > span { min-width: 145px; padding: 9px 12px; display: grid; grid-template-columns: 30px 1fr; border: 1px solid rgb(255 218 161 / .36); background: rgb(38 18 18 / .72); box-shadow: 4px 5px 0 rgb(8 7 14 / .28); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.ramen-buffs i { grid-row: 1 / span 2; color: #ffd88c; font: 900 1.2rem/1.5 serif; font-style: normal; }
.ramen-buffs b { font: 850 .6rem/1.2 var(--font-anime); }
.ramen-buffs small { margin-top: 4px; color: #ffc16d; font: 800 .5rem/1 var(--font-anime); letter-spacing: .1em; }
.anime-text-link { display: inline-flex; align-items: center; gap: 10px; color: #ffe0aa; font: 900 .72rem/1 var(--font-anime); text-transform: uppercase; letter-spacing: .07em; }
.anime-text-link i { width: 24px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.ramen-event-character { position: relative; align-self: end; height: 620px; }
.ramen-event-character > .index-chibi { --chibi-size: 335px; position: absolute; left: -20px; bottom: 20px; }
.ramen-event-character > .anime-dialogue { left: -85px; top: 72px; width: 305px; }
.anime-dialogue-warm { border-color: #ffd599; background: linear-gradient(135deg, rgb(73 31 24 / .95), rgb(20 14 25 / .94)); }
.ramen-steam { position: absolute; z-index: 5; left: 70px; bottom: 365px; width: 130px; height: 160px; pointer-events: none; }
.ramen-steam i { position: absolute; bottom: 0; width: 13px; height: 90px; border-left: 5px solid rgb(255 244 217 / .55); border-radius: 50%; filter: blur(2px); animation: ramen-steam 2.5s ease-in-out infinite; }
.ramen-steam i:nth-child(2) { left: 38px; height: 130px; animation-delay: -.8s; }
.ramen-steam i:nth-child(3) { left: 79px; height: 105px; animation-delay: -1.5s; }
@keyframes ramen-steam { from { transform: translateY(15px) scale(.7); opacity: 0; } 35% { opacity: .8; } to { transform: translateY(-45px) translateX(20px) scale(1.2); opacity: 0; } }
.ramen-menu-card { align-self: end; margin-bottom: 85px; padding: 19px; border: 3px solid #492616; background: linear-gradient(145deg, rgb(254 225 175 / .96), rgb(217 170 111 / .94)); color: #26150f; box-shadow: inset 0 0 0 2px #ffedc8, 10px 13px 0 rgb(12 7 12 / .42), 0 25px 55px rgb(0 0 0 / .4); transform: rotate(1.4deg); }
.ramen-menu-card::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgb(70 31 18 / .45); pointer-events: none; }
.ramen-menu-card > span { display: block; padding-bottom: 12px; border-bottom: 2px solid #3f2118; font: 950 .7rem/1 var(--font-anime); letter-spacing: .12em; text-align: center; }
.ramen-menu-card > div { min-height: 72px; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; border-bottom: 1px dashed rgb(58 31 23 / .35); }
.ramen-menu-card > div > i { width: 25px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #3e2118; border-radius: 50%; font: 900 .55rem/1 var(--font-anime); font-style: normal; }
.ramen-menu-card p { margin: 0; }
.ramen-menu-card p strong { display: block; font: 900 .68rem/1.2 var(--font-anime); }
.ramen-menu-card p small { color: #684538; font-size: .55rem; }
.ramen-menu-card div > b { color: #a33025; font: 950 .62rem/1 var(--font-anime); }
.ramen-menu-card > small { display: block; margin-top: 12px; font-size: .48rem; text-align: center; }
.anime-lanterns { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.anime-lanterns i { position: absolute; width: 34px; height: 52px; border: 2px solid #5e221d; border-radius: 10px 10px 14px 14px; background: radial-gradient(circle, #fff3b1, #ff985d 60%, #e64f4f); box-shadow: 0 0 28px #ff9a5d; animation: lantern-sway 4s ease-in-out infinite; transform-origin: 50% -30px; }
.anime-lanterns i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 110px; background: rgb(47 25 29 / .9); }
.anime-lanterns i:nth-child(1) { left: 8%; top: 7%; }
.anime-lanterns i:nth-child(2) { left: 31%; top: 13%; animation-delay: -1s; }
.anime-lanterns i:nth-child(3) { right: 27%; top: 8%; animation-delay: -2s; }
.anime-lanterns i:nth-child(4) { right: 5%; top: 17%; animation-delay: -3s; }
@keyframes lantern-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 4deg; } }

.festival-district { min-height: 930px; }
.festival-layout { min-height: 930px; padding-block: 120px 90px; display: grid; grid-template-columns: minmax(280px, .65fr) minmax(550px, .9fr); align-items: end; gap: 60px; }
.festival-character { position: relative; min-height: 650px; align-self: end; }
.festival-character > .index-chibi { --chibi-size: 410px; position: absolute; left: 0; bottom: 15px; }
.festival-name { right: auto; left: 230px; bottom: 75px; background: linear-gradient(90deg, #ff9bd1, rgb(255 139 207 / .36)); }
.festival-event-card { position: relative; align-self: center; max-width: 700px; margin-left: auto; padding: 42px 42px 37px; border: 2px solid rgb(248 211 255 / .54); background: linear-gradient(145deg, rgb(20 18 60 / .92), rgb(9 13 39 / .88)); box-shadow: inset 0 0 0 4px rgb(255 255 255 / .04), 11px 14px 0 rgb(3 5 18 / .36), 0 32px 80px rgb(0 0 0 / .48); backdrop-filter: blur(13px); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.festival-event-card::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgb(255 255 255 / .09); clip-path: inherit; pointer-events: none; }
.festival-ribbon { position: absolute; right: -2px; top: -18px; min-width: 250px; height: 42px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; color: #2d0a28; background: linear-gradient(90deg, #ff8fca, #ffc16d); box-shadow: 7px 8px 0 rgb(7 7 21 / .38); clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%); font: 950 .53rem/1 var(--font-anime); letter-spacing: .12em; }
.festival-ribbon b { padding: 4px 7px; border: 1px solid #632452; font-size: .47rem; }
.festival-event-card h2 { margin: 21px 0 22px; font: 950 clamp(3.8rem, 6vw, 6.7rem)/.83 var(--font-anime); letter-spacing: -.07em; }
.festival-event-card h2 em { color: #ff9bd2; font-style: normal; text-shadow: 3px 4px 0 #5e285d, 0 0 25px rgb(255 139 207 / .35); }
.festival-event-card > p { color: #e7e4f4; font-weight: 600; }
.festival-stalls { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.festival-stalls a { min-height: 112px; padding: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgb(255 199 230 / .28); background: linear-gradient(145deg, rgb(255 139 207 / .1), rgb(65 93 191 / .11)); box-shadow: 0 5px 0 rgb(4 6 20 / .3); text-align: center; transition: .2s ease; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.festival-stalls a:hover { translate: 0 -5px; background: rgb(255 139 207 / .19); }
.festival-stalls a > span { color: #ffb9dd; font: 900 1.5rem/1 serif; }
.festival-stalls strong { margin-top: 7px; font: 900 .68rem/1 var(--font-anime); }
.festival-stalls small { margin-top: 6px; color: #aeb7d2; font-size: .52rem; }
.festival-event-progress { margin-top: 20px; padding: 12px; display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 12px; border-top: 1px solid rgb(255 255 255 / .12); }
.festival-event-progress > span { height: 6px; overflow: hidden; border: 1px solid rgb(255 255 255 / .2); border-radius: 9px; }
.festival-event-progress > span i { display: block; width: 82%; height: 100%; background: linear-gradient(90deg, var(--accent), #ff85c7); box-shadow: 0 0 12px var(--accent); }
.festival-event-progress p { margin: 0; }
.festival-event-progress p strong { display: block; font: 900 .55rem/1 var(--font-anime); letter-spacing: .1em; }
.festival-event-progress p small { color: #9ba8c3; font-size: .52rem; }
.festival-event-progress > b { color: #ff9bd2; font: 950 1.2rem/1 var(--font-anime); }
.festival-fireworks { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.festival-fireworks i { position: absolute; width: 130px; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, transparent 0 9deg, rgb(255 173 226 / .56) 10deg 11deg, transparent 12deg 20deg); mask-image: radial-gradient(circle, transparent 0 18%, black 19% 55%, transparent 58%); animation: festival-burst 3.8s ease-out infinite; }
.festival-fireworks i:nth-child(1) { left: 39%; top: 8%; }
.festival-fireworks i:nth-child(2) { left: 57%; top: 17%; width: 90px; animation-delay: -1.7s; }
.festival-fireworks i:nth-child(3) { right: 10%; top: 9%; width: 115px; animation-delay: -2.8s; }
@keyframes festival-burst { 0% { scale: .1; opacity: 0; } 22% { opacity: 1; } 75%, 100% { scale: 1.3; opacity: 0; rotate: 10deg; } }

/* Animated Image Engine */
.anime-engine { position: relative; padding: 120px 0 110px; overflow: hidden; background: radial-gradient(circle at 18% 30%, rgb(var(--accent-rgb) / .13), transparent 30rem), radial-gradient(circle at 88% 70%, rgb(159 120 255 / .12), transparent 30rem), linear-gradient(180deg, #050716, #080d25 50%, #050716); }
.anime-engine::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgb(141 219 255 / .25) 1px, transparent 1px), linear-gradient(90deg, rgb(141 219 255 / .25) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 75%); }
.anime-section-heading { position: relative; z-index: 1; margin-bottom: 45px; display: grid; grid-template-columns: 1fr minmax(360px, .55fr); align-items: end; gap: 45px; }
.anime-section-heading > div > span { color: var(--accent-soft); font: 900 .61rem/1 var(--font-anime); letter-spacing: .17em; }
.anime-section-heading h2 { margin: 10px 0 0; font: 950 clamp(3.5rem, 6vw, 6.6rem)/.88 var(--font-anime); letter-spacing: -.065em; }
.anime-section-heading h2 em { color: var(--accent-soft); font-style: normal; text-shadow: 3px 4px 0 rgb(43 68 134 / .7); }
.anime-section-heading > p { margin-bottom: 4px; color: #b9c6dc; font-weight: 560; }
.engine-workbench { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; }
.engine-window,
.engine-toolbox { border: 2px solid rgb(184 235 255 / .43); background: linear-gradient(145deg, rgb(10 20 48 / .96), rgb(7 12 31 / .96)); box-shadow: var(--anime-shadow), inset 0 0 0 3px rgb(255 255 255 / .025); }
.engine-window { overflow: hidden; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.engine-window-bar { height: 52px; padding: 0 13px 0 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(205 239 255 / .25); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .17), transparent 65%); }
.engine-window-bar > div { display: flex; align-items: center; gap: 7px; }
.engine-window-bar > div i { width: 9px; aspect-ratio: 1; border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; background: var(--anime-pink); }
.engine-window-bar > div i:nth-child(2) { background: var(--anime-gold); }
.engine-window-bar > div i:nth-child(3) { background: var(--accent); }
.engine-window-bar > div span { margin-left: 8px; color: #b5c8e0; font: 800 .55rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.engine-window-bar > button { min-width: 116px; height: 31px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgb(var(--accent-rgb) / .42); color: var(--accent-soft); background: rgb(var(--accent-rgb) / .08); cursor: pointer; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); font: 850 .55rem/1 var(--font-anime); text-transform: uppercase; }
.engine-window-bar > button i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.engine-window-bar > button[aria-pressed="true"] { color: #98ffc5; border-color: rgb(118 247 183 / .45); background: rgb(118 247 183 / .1); }
.engine-stage { position: relative; min-height: 590px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgb(var(--accent-rgb) / .1), transparent 44%), #050817; }
.engine-stage-grid { position: absolute; inset: 0; opacity: .27; background-image: linear-gradient(rgb(var(--accent-rgb) / .17) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--accent-rgb) / .17) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle, black 25%, transparent 75%); animation: engine-grid 16s linear infinite; }
@keyframes engine-grid { to { background-position: 34px 34px; } }
.engine-stage .index-render { position: relative; z-index: 2; width: 100%; height: 590px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 23px 30px rgb(0 0 0 / .55)); transition: opacity .25s ease, scale .35s ease; }
.engine-stage .index-render.is-loading { opacity: .25; scale: .98; }
.engine-loading { position: absolute; z-index: 4; inset: 0; display: none; place-items: center; align-content: center; gap: 11px; background: rgb(4 8 21 / .35); backdrop-filter: blur(3px); }
.engine-loading.is-active { display: grid; }
.engine-loading i { width: 45px; aspect-ratio: 1; border: 3px solid rgb(var(--accent-rgb) / .2); border-top-color: var(--accent); border-radius: 50%; animation: rift-rotate .8s linear infinite; }
.engine-loading span { color: var(--accent-soft); font: 900 .55rem/1 var(--font-anime); letter-spacing: .16em; }
.engine-live { position: absolute; z-index: 5; left: 18px; top: 18px; padding: 8px 10px; display: flex; align-items: center; gap: 7px; border: 1px solid rgb(140 255 198 / .34); color: #a0ffc8; background: rgb(5 20 22 / .75); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); font: 850 .49rem/1 var(--font-anime); letter-spacing: .1em; }
.engine-live > i { width: 6px; aspect-ratio: 1; border-radius: 50%; background: #83ffba; box-shadow: 0 0 8px currentColor; animation: ui-pulse 1.2s infinite; }
.engine-live b { padding-left: 7px; border-left: 1px solid rgb(255 255 255 / .18); }
.engine-corner { position: absolute; z-index: 3; width: 70px; height: 70px; border-color: var(--accent); opacity: .55; }
.engine-corner-a { left: 18px; bottom: 18px; border-left: 2px solid; border-bottom: 2px solid; }
.engine-corner-b { right: 18px; top: 18px; border-right: 2px solid; border-top: 2px solid; }
.engine-readout { min-height: 105px; padding: 20px 22px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 22px; border-top: 1px solid rgb(205 239 255 / .2); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .1), transparent); }
.engine-readout small { display: block; color: #8094b3; font: 800 .5rem/1 var(--font-anime); letter-spacing: .13em; }
.engine-readout strong { display: block; margin-top: 7px; font: 950 1.25rem/1 var(--font-anime); }
.engine-readout p { margin: 0; color: #acbbd1; font-size: .72rem; line-height: 1.55; }
.engine-readout > span { text-align: right; }
.engine-readout > span i { display: block; color: var(--accent-soft); font: 900 .65rem/1 var(--font-anime); font-style: normal; }
.engine-readout > span b { display: block; margin-top: 7px; color: #7185a3; font: 800 .48rem/1 var(--font-anime); letter-spacing: .1em; }
.engine-toolbox { padding: 13px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.engine-toolbox > header { height: 39px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(255 255 255 / .13); color: #9eb3d1; font: 900 .55rem/1 var(--font-anime); letter-spacing: .13em; }
.engine-toolbox > header b { width: 24px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #071124; background: var(--accent-soft); }
.engine-toolbox > button { position: relative; width: 100%; min-height: 86px; margin-top: 8px; padding: 9px; display: grid; grid-template-columns: 65px 23px 1fr auto; align-items: center; gap: 8px; overflow: hidden; border: 1px solid rgb(255 255 255 / .11); color: #dbe8f7; background: rgb(255 255 255 / .025); text-align: left; cursor: pointer; transition: .2s ease; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.engine-toolbox > button:hover { translate: -4px 0; border-color: rgb(var(--accent-rgb) / .4); }
.engine-toolbox > button.is-active { border-color: var(--accent); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .2), rgb(var(--accent-rgb) / .04)); box-shadow: inset 3px 0 var(--accent); }
.engine-toolbox button img { width: 65px; height: 62px; object-fit: cover; border: 1px solid rgb(var(--accent-rgb) / .25); background: #050817; pointer-events: none; }
.engine-toolbox button > i { color: var(--accent-soft); font: 900 .57rem/1 var(--font-anime); font-style: normal; }
.engine-toolbox button span strong { display: block; font: 900 .67rem/1 var(--font-anime); }
.engine-toolbox button span small { display: block; margin-top: 6px; color: #8195b2; font-size: .51rem; }
.engine-toolbox button > b { color: #8effbd; font: 900 .43rem/1 var(--font-anime); letter-spacing: .08em; }
.engine-layer-stack { margin-top: 14px; padding: 13px 9px 6px; border-top: 1px solid rgb(255 255 255 / .13); }
.engine-layer-stack > span { color: #8093b0; font: 900 .49rem/1 var(--font-anime); letter-spacing: .13em; }
.engine-layer-stack > div { height: 29px; margin-top: 5px; padding: 0 9px; display: flex; align-items: center; gap: 9px; border-left: 2px solid rgb(var(--accent-rgb) / calc(.22 + var(--layer, 0))); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .08), transparent); color: #aebbd0; font: 700 .53rem/1 var(--font-anime); }
.engine-layer-stack i { color: var(--accent-soft); font-style: normal; }
.engine-protection { margin-top: 27px; padding: 17px 20px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; border: 1px solid rgb(var(--accent-rgb) / .24); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .09), rgb(5 9 24 / .7)); clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }
.engine-protection > span { width: 35px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .4); border-radius: 50%; color: var(--accent-soft); }
.engine-protection p { margin: 0; }
.engine-protection p strong { display: block; font: 900 .68rem/1 var(--font-anime); }
.engine-protection p small { display: block; margin-top: 5px; color: #879ab7; font-size: .59rem; }
.engine-protection > b { color: #96ffc2; font: 900 .5rem/1 var(--font-anime); letter-spacing: .12em; }

/* Quest board and finale */
.anime-quest-board { padding-block: 115px; }
.anime-quest-board > header { max-width: 770px; margin-bottom: 43px; }
.anime-quest-board > header > span { color: var(--accent-soft); font: 900 .6rem/1 var(--font-anime); letter-spacing: .16em; }
.anime-quest-board h2 { margin: 12px 0 10px; font: 950 clamp(3.3rem, 5.5vw, 6rem)/.9 var(--font-anime); letter-spacing: -.06em; }
.anime-quest-board header p { color: #9caac1; }
.anime-quest-board > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.anime-quest { position: relative; min-height: 390px; padding: 32px 28px; display: flex; flex-direction: column; overflow: hidden; border: 2px solid rgb(190 234 255 / .32); background: linear-gradient(150deg, rgb(15 27 60 / .96), rgb(7 12 31 / .98)); box-shadow: 9px 12px 0 rgb(2 5 17 / .32), 0 25px 55px rgb(0 0 0 / .36); clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); transition: .25s ease; }
.anime-quest::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgb(var(--accent-rgb) / .2), transparent 36%); }
.quest-patrol::before { background: radial-gradient(circle at 80% 15%, rgb(255 139 207 / .22), transparent 38%); }
.quest-profiles::before { background: radial-gradient(circle at 80% 15%, rgb(255 205 116 / .18), transparent 38%); }
.anime-quest:hover { transform: translateY(-9px) rotate(.3deg); border-color: var(--accent); }
.anime-quest > i { position: absolute; right: 17px; top: 17px; padding: 5px 8px; border: 1px solid #8affbc; color: #8affbc; background: rgb(6 29 28 / .8); font: 900 .48rem/1 var(--font-anime); font-style: normal; letter-spacing: .12em; }
.anime-quest > span { position: relative; width: 100px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid rgb(var(--accent-rgb) / .43); border-radius: 50%; color: var(--accent-soft); background: radial-gradient(circle, rgb(var(--accent-rgb) / .2), transparent 70%); box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / .05), 0 0 35px rgb(var(--accent-rgb) / .2); font: 900 2.6rem/1 serif; }
.quest-patrol > span { color: #ff9cd2; border-color: rgb(255 139 207 / .45); }
.quest-profiles > span { color: #ffd477; border-color: rgb(255 212 119 / .42); }
.anime-quest > small { position: relative; margin-top: 29px; color: #8497b4; font: 900 .52rem/1 var(--font-anime); letter-spacing: .13em; }
.anime-quest h3 { position: relative; margin: 9px 0 11px; font: 950 1.8rem/1 var(--font-anime); }
.anime-quest p { position: relative; color: #aebbd0; font-size: .77rem; }
.anime-quest > b { position: relative; margin-top: auto; color: var(--accent-soft); font: 900 .58rem/1 var(--font-anime); letter-spacing: .12em; }
.anime-finale { position: relative; min-height: 700px; overflow: hidden; isolation: isolate; }
.anime-finale > img { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .56; filter: saturate(.8); }
.anime-finale > span { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgb(4 7 21 / .26), rgb(4 7 21 / .88) 53%, rgb(4 7 21 / .97)), linear-gradient(180deg, #050716, transparent 25%, #040612); }
.anime-finale > .shell { min-height: 700px; display: grid; grid-template-columns: .8fr 1fr; align-items: center; gap: 60px; }
.anime-finale-character { align-self: end; height: 570px; }
.anime-finale-character .index-chibi { --chibi-size: 410px; margin: auto; }
.anime-finale article { max-width: 680px; }
.anime-finale article > small { color: var(--accent-soft); font: 900 .6rem/1 var(--font-anime); letter-spacing: .17em; }
.anime-finale h2 { margin: 16px 0 21px; font: 950 clamp(3.7rem, 6vw, 6.8rem)/.86 var(--font-anime); letter-spacing: -.07em; }
.anime-finale h2 em { color: var(--accent-soft); font-style: normal; }
.anime-finale article > p { color: #c1cce0; }
.anime-finale article > div { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Anime daily episode shared shell */
.anime-game-page { position: relative; min-height: 100vh; padding: 116px 0 100px; overflow: hidden; isolation: isolate; background: #050717; }
.anime-game-backdrop { position: fixed; z-index: -4; inset: 0; width: 100%; height: 100vh; object-fit: cover; filter: saturate(.92) brightness(.68); animation: game-backdrop 25s ease-in-out infinite alternate; }
.anime-game-shade { position: fixed; z-index: -3; inset: 0; background: linear-gradient(180deg, rgb(4 7 23 / .54), rgb(5 7 23 / .18) 42%, rgb(4 6 18 / .88) 88%, #040612), radial-gradient(circle at 50% 34%, transparent 12%, rgb(3 5 16 / .36) 73%); }
@keyframes game-backdrop { to { transform: scale(1.055) translateY(-1%); } }
.anime-game-shell { position: relative; }
.anime-game-switcher { width: fit-content; margin: 0 auto 35px; display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); border: 2px solid rgb(196 239 255 / .4); background: rgb(7 14 36 / .9); box-shadow: 0 8px 0 rgb(2 5 17 / .35); clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }
.anime-game-switcher a { position: relative; min-height: 56px; padding: 8px 16px; display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 9px; border-right: 1px solid rgb(255 255 255 / .15); color: #8599b9; }
.anime-game-switcher a:last-child { border-right: 0; }
.anime-game-switcher a.is-active { color: white; background: linear-gradient(90deg, rgb(var(--accent-rgb) / .2), rgb(159 120 255 / .14)); box-shadow: inset 0 -3px var(--accent); }
.anime-game-switcher a > i { width: 27px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 900 .54rem/1 var(--font-anime); font-style: normal; }
.anime-game-switcher small { display: block; font: 800 .46rem/1 var(--font-anime); letter-spacing: .13em; }
.anime-game-switcher strong { display: block; margin-top: 5px; font: 900 .65rem/1 var(--font-anime); }
.anime-game-switcher a > b { color: #8affbc; font: 900 .44rem/1 var(--font-anime); letter-spacing: .1em; }
.anime-game-title { margin-bottom: 38px; display: grid; grid-template-columns: 1fr 270px; align-items: end; gap: 55px; text-shadow: 0 3px 10px rgb(0 0 0 / .8); }
.anime-game-title h1 { margin: 16px 0 14px; font: 950 clamp(4.2rem, 7vw, 7.8rem)/.82 var(--font-anime); letter-spacing: -.075em; }
.anime-game-title h1 em { color: var(--accent-soft); font-style: normal; text-shadow: 3px 4px 0 rgb(35 54 124 / .68), 0 0 24px rgb(var(--accent-rgb) / .35); }
.pocket-game-page .anime-game-title h1 em { color: #ff9dd4; text-shadow: 3px 4px 0 #66305d, 0 0 24px rgb(255 139 207 / .4); }
.anime-game-title > div > p { max-width: 760px; margin: 0; color: #e1e7f4; font-weight: 600; }
.anime-daily-card { padding: 17px; border: 2px solid rgb(204 241 255 / .43); background: linear-gradient(145deg, rgb(12 23 54 / .93), rgb(7 12 31 / .92)); box-shadow: 7px 9px 0 rgb(3 6 18 / .34); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.anime-daily-card > span { color: #8da2c2; font: 900 .53rem/1 var(--font-anime); letter-spacing: .15em; }
.anime-daily-card > strong { display: block; margin: 9px 0 13px; color: var(--accent-soft); font: 950 2rem/1 var(--font-anime); letter-spacing: .08em; }
.anime-daily-card > div { padding-top: 10px; display: flex; justify-content: space-between; border-top: 1px solid rgb(255 255 255 / .13); }
.anime-daily-card small { color: #8296b5; font: 800 .49rem/1 var(--font-anime); letter-spacing: .1em; }
.anime-daily-card b { font: 900 .58rem/1 "Cascadia Code", monospace; }
.pocket-anime-layout,
.rift-anime-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 18px; align-items: start; }
.pocket-anime-console,
.rift-anime-console { position: relative; overflow: hidden; border: 2px solid rgb(202 241 255 / .46); background: linear-gradient(150deg, rgb(11 21 49 / .96), rgb(7 12 31 / .97)); box-shadow: 10px 13px 0 rgb(3 6 18 / .4), 0 30px 80px rgb(0 0 0 / .48), inset 0 0 0 4px rgb(255 255 255 / .025); clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px); }
.pocket-console-top,
.rift-console-top { height: 66px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(212 242 255 / .2); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .15), transparent 70%); }
.pocket-mission-tag,
.rift-mission-tag { display: flex; align-items: center; gap: 11px; }
.pocket-mission-tag > i,
.rift-mission-tag > i { width: 36px; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .1); box-shadow: 0 0 17px rgb(var(--accent-rgb) / .22); font: 900 .75rem/1 serif; font-style: normal; }
.pocket-mission-tag small,
.rift-mission-tag small { display: block; color: #8297b7; font: 800 .48rem/1 var(--font-anime); letter-spacing: .13em; }
.pocket-mission-tag strong,
.rift-mission-tag strong { display: block; margin-top: 5px; font: 900 .69rem/1 var(--font-anime); }
.anime-sound-button { height: 31px; padding: 0 10px; border: 1px solid rgb(var(--accent-rgb) / .35); color: #98aeca; background: rgb(var(--accent-rgb) / .06); cursor: pointer; font: 900 .52rem/1 var(--font-anime); letter-spacing: .1em; }
.anime-sound-button b { color: #8affbd; }
.anime-game-sidebar { display: grid; gap: 14px; }
.anime-game-sidebar > div { position: relative; overflow: hidden; border: 2px solid rgb(199 237 255 / .34); background: linear-gradient(145deg, rgb(13 24 54 / .95), rgb(8 13 33 / .96)); box-shadow: 7px 9px 0 rgb(3 6 18 / .32), 0 22px 45px rgb(0 0 0 / .34); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.anime-reward-card { padding: 21px; }
.anime-reward-card > span,
.anime-streak-card > span,
.pocket-guide-card > span,
.shrine-scroll-card > span { color: #88a0c0; font: 900 .51rem/1 var(--font-anime); letter-spacing: .14em; }
.anime-reward-card > strong { display: block; margin: 12px 0 5px; color: var(--accent-soft); font: 950 3.1rem/.9 var(--font-anime); text-shadow: 2px 3px 0 rgb(37 63 125 / .55); }
.anime-reward-card > strong small { margin-left: 6px; color: #d9e5f5; font-size: .65rem; }
.anime-reward-card > p { color: #879ab8; font-size: .62rem; }
.anime-reward-card > div { padding-top: 13px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgb(255 255 255 / .12); }
.anime-reward-card > div > i { color: #bf8cff; font-style: normal; }
.anime-reward-card > div small { display: block; color: #7f93b2; font: 800 .47rem/1 var(--font-anime); }
.anime-reward-card > div b { display: block; margin-top: 4px; font: 950 1.08rem/1 var(--font-anime); }
.anime-streak-card { padding: 19px; }
.anime-streak-card > strong { display: block; margin-top: 9px; font: 950 1.3rem/1 var(--font-anime); }
.anime-streak-card > div { margin-top: 14px; display: flex; gap: 6px; }
.anime-streak-card i { width: 27px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .12); border-radius: 50%; color: #4d5b77; background: rgb(255 255 255 / .025); font-size: .57rem; font-style: normal; }
.anime-streak-card i.is-lit { color: #ffd879; border-color: rgb(255 216 121 / .5); background: rgb(255 216 121 / .1); box-shadow: 0 0 12px rgb(255 216 121 / .27); }
.anime-game-message { min-height: 73px; margin: 0 18px; padding: 15px 18px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgb(var(--accent-rgb) / .2); border-left: 4px solid var(--accent); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .1), transparent); }
.anime-game-message strong { font: 900 .76rem/1 var(--font-anime); }
.anime-game-message span { margin-top: 7px; color: #8ea1bd; font-size: .62rem; }
.anime-game-controls { min-height: 88px; padding: 17px 18px 20px; display: flex; align-items: center; gap: 15px; }
.anime-game-controls > small { max-width: 430px; color: #7e92b1; font-size: .56rem; line-height: 1.45; }

/* Pocket Patrol anime festival */
.pocket-target-card { position: relative; min-height: 164px; margin: 17px 18px 10px; padding: 14px 18px; display: grid; grid-template-columns: 125px 1fr auto; align-items: center; gap: 18px; overflow: hidden; border: 2px solid rgb(255 173 221 / .48); background: linear-gradient(110deg, rgb(74 28 70 / .7), rgb(15 24 57 / .9) 55%, rgb(9 15 39 / .92)); box-shadow: inset 0 0 35px rgb(255 139 207 / .08), 0 7px 0 rgb(3 6 18 / .25); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.pocket-target-burst { position: absolute; width: 260px; aspect-ratio: 1; left: -68px; top: -48px; opacity: .22; background: repeating-conic-gradient(from 0deg, #ff9fd5 0 3deg, transparent 3deg 12deg); border-radius: 50%; animation: rift-rotate 30s linear infinite; }
.pocket-target-art { position: relative; z-index: 2; height: 135px; display: grid; place-items: center; overflow: hidden; }
.pocket-target-art .index-chibi { --chibi-size: 103px; }
.pocket-target-card > div:nth-of-type(2) { position: relative; }
.pocket-target-card small { color: #ffacd7; font: 900 .51rem/1 var(--font-anime); letter-spacing: .14em; }
.pocket-target-card h2 { margin: 8px 0 7px; font: 950 1.8rem/1 var(--font-anime); }
.pocket-target-card p { margin: 0; color: #9cadc6; font-size: .62rem; }
.pocket-target-card > b { position: relative; padding: 6px 9px; border: 1px solid rgb(255 173 221 / .35); color: #ffb8db; font: 900 .49rem/1 var(--font-anime); letter-spacing: .1em; }
.pocket-hud-row,
.rift-hud-row { min-height: 63px; margin: 0 18px 12px; padding: 8px 13px; display: grid; grid-template-columns: repeat(3, 1fr) 1.7fr; align-items: center; gap: 12px; border: 1px solid rgb(192 235 255 / .2); background: rgb(5 11 29 / .65); }
.pocket-hud-row small,
.rift-hud-row small { display: block; color: #7086a7; font: 800 .47rem/1 var(--font-anime); letter-spacing: .11em; }
.pocket-hud-row strong,
.rift-hud-row strong { display: block; margin-top: 6px; color: var(--accent-soft); font: 950 1.1rem/1 var(--font-anime); }
.pocket-hud-row > span { height: 7px; overflow: hidden; border: 1px solid rgb(255 255 255 / .14); border-radius: 8px; background: rgb(0 0 0 / .25); }
.pocket-hud-row > span i { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, var(--accent), #ff89c9); box-shadow: 0 0 12px var(--accent); }
.pocket-chibi-crowd { margin: 0 18px 14px; padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; border: 1px solid rgb(255 188 225 / .18); background: linear-gradient(180deg, rgb(255 139 207 / .05), rgb(4 9 27 / .62)); }
.pocket-chibi-crowd > button { position: relative; min-width: 0; aspect-ratio: .92; padding: 20px 5px 4px; overflow: hidden; border: 2px solid rgb(255 215 235 / .23); color: white; background: linear-gradient(180deg, rgb(80 38 83 / .85), rgb(13 21 49 / .95)); box-shadow: inset 0 -19px rgb(4 9 25 / .38), 0 5px 0 rgb(2 5 18 / .28); cursor: pointer; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); transition: filter .2s ease, scale .2s ease, opacity .2s ease; }
.pocket-chibi-crowd > button:not(:disabled):hover { scale: 1.045; border-color: #ff9fd2; filter: brightness(1.1); }
.pocket-stall-roof { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 25px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid rgb(255 219 235 / .5); }
.pocket-stall-roof i:nth-child(odd) { background: #ed6eb1; }
.pocket-stall-roof i:nth-child(even) { background: #f6d9e9; }
.pocket-unit-art { position: absolute; z-index: 2; inset: 25px 5px 23px; display: grid; place-items: center; overflow: hidden; }
.pocket-unit-art .index-chibi { --chibi-size: min(110px, 92%); }
.pocket-stall-label { position: absolute; z-index: 6; left: 5px; right: 5px; bottom: 3px; height: 23px; padding: 0 7px; display: flex; align-items: center; justify-content: space-between; color: #c8d6e9; background: rgb(5 10 28 / .87); font: 900 .5rem/1 var(--font-anime); }
.pocket-stall-label i { color: #ff9fd2; font-style: normal; }
.pocket-hit-spark { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; color: #fff8a2; font-size: 4rem; opacity: 0; pointer-events: none; text-shadow: 0 0 25px #fff37a; }
.pocket-chibi-crowd button.is-entering .index-chibi { animation: pocket-arrive .28s ease-out; }
.pocket-chibi-crowd button.is-correct { border-color: #8dffbd; background: rgb(34 115 86 / .42); }
.pocket-chibi-crowd button.is-correct .pocket-hit-spark { animation: pocket-spark .45s ease-out; }
.pocket-chibi-crowd button.is-wrong { border-color: #ff6680; animation: pocket-wrong .34s ease; filter: saturate(.2); }
.pocket-chibi-crowd button.is-dim { opacity: .34; filter: grayscale(.55); }
@keyframes pocket-arrive { from { translate: 0 35px; scale: .65; opacity: 0; } }
@keyframes pocket-spark { 30% { opacity: 1; scale: .7; } 100% { opacity: 0; scale: 1.7; rotate: 35deg; } }
@keyframes pocket-wrong { 25% { translate: -8px 0; } 50% { translate: 8px 0; } 75% { translate: -5px 0; } }
.pocket-guide-card { min-height: 390px; padding: 20px; text-align: center; background: linear-gradient(155deg, rgb(82 33 76 / .96), rgb(9 15 37 / .98)) !important; }
.pocket-guide-card > div { height: 218px; margin: 5px 0 -5px; display: grid; place-items: center; overflow: hidden; }
.pocket-guide-card .index-chibi { --chibi-size: 180px; }
.pocket-guide-card h3 { margin: 6px 0; color: #ffb1d8; font: 950 1.35rem/1 var(--font-anime); }
.pocket-guide-card p { color: #aebbd0; font-size: .62rem; }
.pocket-guide-card blockquote,
.shrine-scroll-card blockquote { margin: 12px 0 0; padding: 10px; border: 1px solid rgb(255 255 255 / .12); color: #e8edf6; background: rgb(255 255 255 / .035); font: 700 .62rem/1.5 var(--font-anime); }

/* Resonance Rift astral shrine */
.rift-shrine-stage { position: relative; min-height: 570px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgb(109 199 255 / .11), transparent 50%); }
.rift-shrine-stage::before { content: ""; position: absolute; width: 590px; aspect-ratio: 1; border: 1px solid rgb(var(--accent-rgb) / .2); border-radius: 50%; box-shadow: 0 0 0 38px rgb(var(--accent-rgb) / .025), 0 0 0 80px rgb(var(--accent-rgb) / .018); animation: rift-rotate 28s linear infinite; }
.rift-moon-ring { position: absolute; width: 470px; aspect-ratio: 1; border: 2px dashed rgb(192 235 255 / .22); border-radius: 50%; animation: rift-rotate 20s linear infinite reverse; }
.rift-spirit-board { position: relative; z-index: 4; width: min(440px, 67%); aspect-ratio: 1; padding: 17px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; border: 2px solid rgb(205 242 255 / .42); border-radius: 50%; background: radial-gradient(circle, rgb(15 32 71 / .94), rgb(6 13 35 / .94)); box-shadow: inset 0 0 45px rgb(var(--accent-rgb) / .14), 0 0 0 9px rgb(5 11 29 / .68), 0 0 55px rgb(var(--accent-rgb) / .2); transform: rotate(45deg); }
.rift-spirit-board button { position: relative; border: 1px solid rgb(var(--accent-rgb) / .3); border-radius: 14px; color: #c5f8ff; background: linear-gradient(145deg, rgb(var(--accent-rgb) / .08), rgb(8 15 38 / .88)); box-shadow: inset 0 0 15px rgb(var(--accent-rgb) / .04), 0 3px 0 rgb(1 5 18 / .3); cursor: pointer; transform: rotate(-45deg); transition: .16s ease; }
.rift-spirit-board button::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgb(var(--accent-rgb) / .19); border-radius: 50%; }
.rift-spirit-board button span { position: relative; z-index: 2; font: 900 1.35rem/1 serif; text-shadow: 0 0 13px currentColor; }
.rift-spirit-board button b { position: absolute; inset: 18%; border-radius: 50%; background: currentColor; filter: blur(15px); opacity: 0; }
.rift-spirit-board button.is-pulse,
.rift-spirit-board button.is-hit { color: white; border-color: white; background: linear-gradient(145deg, rgb(var(--accent-rgb) / .8), #706aff); scale: 1.08; box-shadow: 0 0 25px var(--accent), inset 0 0 14px white; }
.rift-spirit-board button.is-pulse b,
.rift-spirit-board button.is-hit b { opacity: .45; }
.rift-spirit-board button.is-error { color: #fff; border-color: #ff5e7b; background: #b92850; animation: pocket-wrong .35s ease; }
.rift-guide { position: absolute; z-index: 6; right: 15px; bottom: -8px; width: 195px; height: 310px; pointer-events: none; }
.rift-guide .index-chibi { --chibi-size: 185px; position: absolute; right: 0; bottom: 0; }
.rift-guide > span { position: absolute; z-index: 6; right: 135px; top: 12px; width: 145px; padding: 10px; border: 2px solid rgb(210 244 255 / .62); color: #0a1730; background: #eafcff; box-shadow: 5px 6px 0 rgb(4 8 22 / .34); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 12px) 100%, calc(100% - 20px) calc(100% - 10px), 0 calc(100% - 10px)); font: 900 .64rem/1.35 var(--font-anime); text-align: center; }
.rift-hud-row { margin-top: 0; grid-template-columns: repeat(3, 1fr); }
.shrine-scroll-card { min-height: 310px; padding: 23px; border-color: rgb(226 214 177 / .44) !important; background: linear-gradient(145deg, rgb(242 226 183 / .97), rgb(191 161 113 / .96)) !important; color: #281c18; transform: rotate(.7deg); }
.shrine-scroll-card::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgb(66 45 31 / .35); pointer-events: none; }
.shrine-scroll-card > span { color: #67473a; }
.shrine-scroll-card > i { width: 72px; aspect-ratio: 1; margin: 24px auto 17px; display: grid; place-items: center; border: 2px solid #74392f; border-radius: 50%; color: #74392f; font: 900 1.7rem/1 serif; font-style: normal; }
.shrine-scroll-card h3 { margin: 0 0 12px; font: 950 1.35rem/1 var(--font-anime); text-align: center; }
.shrine-scroll-card p { color: #60483e; font-size: .65rem; text-align: center; }
.shrine-scroll-card blockquote { border-color: rgb(75 48 37 / .25); color: #422c25; background: rgb(255 255 255 / .2); }

/* Anime skin for Profiles and Grimoire */
.anime-game-body .page-hero,
.anime-game-body .docs-hero { position: relative; isolation: isolate; }
.anime-game-body .page-hero::before,
.anime-game-body .docs-hero::before { content: ""; position: absolute; z-index: -2; inset: 0 calc((100vw - var(--shell)) / -2); background: linear-gradient(90deg, rgb(5 8 24 / .93), rgb(5 8 24 / .62)), url("/images/anime/index-world-v2.webp") center 56% / cover; mask-image: linear-gradient(black 70%, transparent); opacity: .78; }
.anime-game-body .page-hero h1,
.anime-game-body .docs-hero h1 { text-shadow: 3px 4px 0 rgb(38 62 123 / .58), 0 15px 30px rgb(0 0 0 / .5); }
.anime-game-body .profile-search,
.anime-game-body .docs-signal,
.anime-game-body .docs-sidebar,
.anime-game-body .docs-article,
.anime-game-body .docs-overview,
.anime-game-body .profile-module { border-width: 2px; border-color: rgb(191 236 255 / .3); background: linear-gradient(145deg, rgb(13 23 52 / .95), rgb(8 13 33 / .97)); box-shadow: 7px 9px 0 rgb(2 5 17 / .28), 0 24px 55px rgb(0 0 0 / .25); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.anime-game-body .player-card { border-width: 2px; border-color: rgb(var(--card-accent-rgb) / .35); border-radius: 0; background: linear-gradient(145deg, rgb(var(--card-accent-rgb) / .12), rgb(8 13 33 / .97)); box-shadow: 7px 9px 0 rgb(2 5 17 / .28); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.anime-game-body .player-card:hover { transform: translateY(-7px) rotate(.25deg); }
.anime-game-body .quickstart-grid article,
.anime-game-body .system-doc-grid a,
.anime-game-body .guide-category-grid article,
.anime-game-body .command-card { border-radius: 0; border-color: rgb(var(--accent-rgb) / .2); background: linear-gradient(145deg, rgb(var(--accent-rgb) / .06), rgb(6 11 29 / .85)); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.anime-game-body .docs-chapter,
.anime-game-body .section-kicker { color: var(--accent-soft); font-family: var(--font-anime); font-weight: 900; letter-spacing: .14em; }
.anime-game-body .site-footer { background: linear-gradient(180deg, rgb(5 8 23 / .92), #03040b); border-top: 2px solid rgb(var(--accent-rgb) / .18); }

@media (max-width: 1220px) {
  .anime-opening-hud { grid-template-columns: minmax(470px, 1fr) minmax(280px, .62fr); }
  .anime-quest-tracker { display: none; }
  .anime-district-layout { grid-template-columns: minmax(420px, .9fr) minmax(260px, .5fr); }
  .ramen-menu-card { display: none; }
  .festival-layout { grid-template-columns: 330px 1fr; gap: 30px; }
  .engine-stage { min-height: 510px; }
  .engine-stage .index-render { height: 510px; }
  .pocket-anime-layout,
  .rift-anime-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .pocket-chibi-crowd { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .anime-game-body .site-header,
  .anime-game-body .site-header.is-scrolled { height: 72px; }
  .anime-opening { min-height: 1240px; }
  .anime-opening-hud { min-height: 1240px; padding-top: 125px; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; text-align: center; }
  .rpg-location { justify-self: center; }
  .anime-opening-copy { padding-bottom: 0; }
  .anime-opening-copy > p { margin-inline: auto; }
  .anime-opening-actions { justify-content: center; }
  .anime-party-stats { margin-inline: auto; }
  .anime-opening-character { height: 520px; align-self: end; }
  .anime-opening-character > .index-chibi { --chibi-size: 350px; left: 10px; }
  .anime-opening-character > .anime-dialogue { left: -100px; top: 15px; }
  .anime-world-map { grid-template-columns: repeat(2, 1fr); }
  .anime-world-map > a:nth-child(3) { border-right: 0; }
  .world-map-route { display: none; }
  .anime-district-layout { grid-template-columns: 1fr; align-content: center; text-align: center; }
  .anime-story-panel { max-width: 680px; margin-inline: auto; padding-left: 0; border-left: 0; border-top: 3px solid var(--anime-gold); }
  .anime-story-panel > header,
  .anime-story-chapter { margin-inline: auto; }
  .anime-story-panel > p { margin-inline: auto; }
  .ramen-buffs { justify-content: center; }
  .ramen-event-character { height: 430px; }
  .ramen-event-character > .index-chibi { left: 50%; translate: -50% 0; }
  .ramen-event-character > .anime-dialogue { left: 50%; top: 10px; translate: -90% 0; text-align: left; }
  .festival-layout { grid-template-columns: 1fr; align-content: center; }
  .festival-event-card { grid-row: 1; margin-inline: auto; }
  .festival-character { min-height: 470px; width: 420px; margin-inline: auto; }
  .festival-character > .index-chibi { left: 15px; }
  .engine-workbench { grid-template-columns: 1fr; }
  .engine-toolbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .engine-toolbox > header { grid-column: 1 / -1; }
  .engine-toolbox > button { grid-template-columns: 48px 1fr; min-height: 93px; margin: 0; text-align: center; }
  .engine-toolbox button img { width: 48px; height: 55px; }
  .engine-toolbox button > i,
  .engine-toolbox button > b { display: none; }
  .engine-layer-stack { grid-column: 1 / -1; display: flex; gap: 5px; }
  .engine-layer-stack > span { margin-right: auto; align-self: center; }
  .engine-layer-stack > div { flex: 1; }
  .anime-quest-board > div { grid-template-columns: 1fr; }
  .anime-quest { min-height: 300px; }
  .anime-finale > .shell { grid-template-columns: .7fr 1fr; }
  .anime-finale-character .index-chibi { --chibi-size: 340px; }
  .pocket-anime-layout,
  .rift-anime-layout { grid-template-columns: 1fr; }
  .anime-game-sidebar { grid-template-columns: repeat(3, 1fr); }
  .pocket-guide-card { min-height: 300px; }
  .pocket-guide-card > div { height: 150px; }
  .pocket-guide-card .index-chibi { --chibi-size: 125px; }
  .shrine-scroll-card { min-height: 100%; }
}

@media (max-width: 720px) {
  .anime-game-body .site-nav { background: rgb(7 12 31 / .98); border-width: 2px; border-radius: 0; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
  .anime-game-body .site-nav > a { clip-path: none; }
  .anime-opening { min-height: 1110px; }
  .anime-opening-hud { min-height: 1110px; padding-top: 105px; }
  .rpg-location { grid-template-columns: 9px auto auto; }
  .rpg-location small { display: none; }
  .anime-opening-copy h1 { margin-top: 19px; font-size: clamp(3.65rem, 17vw, 5.7rem); }
  .anime-opening-copy > p { font-size: .87rem; }
  .anime-opening-actions .button { width: 100%; }
  .anime-party-stats { grid-template-columns: 1fr; }
  .anime-party-stats > div { min-height: 58px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .anime-opening-character { width: 300px; height: 430px; }
  .anime-opening-character > .index-chibi { --chibi-size: 280px; left: 10px; }
  .anime-opening-character > .anime-dialogue { width: 230px; left: -45px; top: 0; }
  .anime-character-name { right: -15px; bottom: 42px; }
  .anime-world-map { margin-top: -20px; padding: 9px; grid-template-columns: 1fr; }
  .anime-world-map > a { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
  .anime-world-map > a:last-child { border-bottom: 0; }
  .anime-district { min-height: 1040px; }
  .anime-district-art { object-position: 62% center; }
  .ramen-district .anime-district-shade { background: linear-gradient(180deg, rgb(4 8 22 / .85), rgb(4 8 22 / .42) 40%, rgb(4 8 22 / .7) 75%, #060715); }
  .anime-district-layout { min-height: 1040px; padding-block: 90px 45px; }
  .anime-story-panel h2 { font-size: clamp(3.2rem, 14vw, 4.9rem); }
  .ramen-buffs > span { min-width: calc(50% - 8px); }
  .ramen-event-character > .index-chibi { --chibi-size: 285px; }
  .ramen-event-character > .anime-dialogue { width: 250px; translate: -70% 0; }
  .festival-district .anime-district-art { object-position: 46% center; }
  .festival-district .anime-district-shade { background: linear-gradient(180deg, rgb(5 7 24 / .34), rgb(5 7 24 / .45) 45%, #050718 88%); }
  .festival-layout { padding-block: 100px 50px; }
  .festival-event-card { padding: 42px 23px 28px; }
  .festival-event-card h2 { font-size: clamp(3.3rem, 15vw, 5rem); }
  .festival-stalls { grid-template-columns: 1fr; }
  .festival-character { width: 310px; min-height: 410px; }
  .festival-character > .index-chibi { --chibi-size: 310px; }
  .festival-name { left: 160px; }
  .anime-section-heading { grid-template-columns: 1fr; gap: 17px; }
  .anime-section-heading h2 { font-size: clamp(3.1rem, 14vw, 5rem); }
  .engine-window-bar > div span { display: none; }
  .engine-stage { min-height: 410px; }
  .engine-stage .index-render { height: 410px; }
  .engine-readout { grid-template-columns: 1fr; gap: 11px; }
  .engine-readout > span { text-align: left; }
  .engine-toolbox { grid-template-columns: repeat(2, 1fr); }
  .engine-layer-stack { display: none; }
  .engine-protection { grid-template-columns: 34px 1fr; }
  .engine-protection > b { grid-column: 2; }
  .anime-quest-board h2 { font-size: clamp(3.1rem, 14vw, 4.7rem); }
  .anime-finale { min-height: 880px; }
  .anime-finale > .shell { min-height: 880px; padding-top: 80px; grid-template-columns: 1fr; text-align: center; }
  .anime-finale-character { order: 2; height: 390px; }
  .anime-finale-character .index-chibi { --chibi-size: 300px; }
  .anime-finale article > div { justify-content: center; }
  .anime-game-page { padding-top: 96px; }
  .anime-game-switcher { width: 100%; grid-template-columns: 1fr; }
  .anime-game-switcher a { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .12); }
  .anime-game-title { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .anime-game-title .anime-episode { justify-content: center; }
  .anime-game-title h1 { font-size: clamp(3.7rem, 17vw, 5.6rem); }
  .anime-daily-card { max-width: 320px; width: 100%; margin-inline: auto; }
  .pocket-target-card { grid-template-columns: 100px 1fr; }
  .pocket-target-card > b { display: none; }
  .pocket-target-art { height: 118px; }
  .pocket-target-art .index-chibi { --chibi-size: 88px; }
  .pocket-hud-row,
  .rift-hud-row { grid-template-columns: repeat(3, 1fr); }
  .pocket-hud-row > span { grid-column: 1 / -1; width: 100%; }
  .pocket-chibi-crowd { grid-template-columns: repeat(3, 1fr); padding: 8px; gap: 6px; }
  .pocket-chibi-crowd > button { aspect-ratio: .82; }
  .pocket-unit-art .index-chibi { --chibi-size: min(90px, 90%); }
  .anime-game-sidebar { grid-template-columns: 1fr; }
  .anime-game-controls { flex-direction: column; align-items: stretch; text-align: center; }
  .rift-shrine-stage { min-height: 510px; }
  .rift-spirit-board { width: min(390px, 84%); }
  .rift-guide { right: -12px; width: 130px; height: 220px; }
  .rift-guide .index-chibi { --chibi-size: 125px; }
  .rift-guide > span { display: none; }
}

@media (max-width: 460px) {
  .anime-opening-copy .anime-episode { justify-content: center; font-size: .53rem; }
  .anime-opening-copy .anime-episode i { display: none; }
  .anime-opening-character > .anime-dialogue { left: 0; }
  .ramen-buffs > span { min-width: 100%; }
  .festival-event-progress { grid-template-columns: 1fr auto; }
  .festival-event-progress > span { grid-column: 1 / -1; }
  .engine-toolbox { grid-template-columns: 1fr; }
  .pocket-console-top,
  .rift-console-top { padding-inline: 11px; }
  .pocket-mission-tag small,
  .rift-mission-tag small { display: none; }
  .pocket-target-card { margin-inline: 10px; padding-inline: 9px; grid-template-columns: 82px 1fr; gap: 8px; }
  .pocket-target-card h2 { font-size: 1.25rem; }
  .pocket-target-card p { display: none; }
  .pocket-target-art .index-chibi { --chibi-size: 76px; }
  .pocket-hud-row,
  .rift-hud-row { margin-inline: 10px; gap: 5px; }
  .pocket-chibi-crowd { margin-inline: 10px; grid-template-columns: repeat(2, 1fr); }
  .pocket-unit-art .index-chibi { --chibi-size: min(108px, 92%); }
  .anime-game-message { margin-inline: 10px; }
  .rift-spirit-board { width: 92%; padding: 12px; gap: 6px; }
  .rift-spirit-board button { border-radius: 10px; }
  .rift-spirit-board button span { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .anime-opening-art,
  .anime-district-art,
  .anime-game-backdrop,
  .index-chibi,
  .index-chibi-aura,
  .sakura-field i,
  .festival-fireworks i,
  .ramen-steam i,
  .anime-lanterns i,
  .anime-speed-lines { animation: none !important; }
}

/* July 2026 interface refresh */
.footer-grid { grid-template-columns: minmax(260px, 1.4fr) minmax(140px, .65fr) minmax(140px, .65fr); }

.festival-ribbon {
  position: relative;
  inset: auto;
  width: fit-content;
  min-width: 0;
  height: auto;
  margin: -15px 0 22px auto;
  padding: 9px 10px 9px 14px;
  gap: 13px;
  border: 1px solid rgb(255 239 204 / .7);
  border-radius: 999px;
  clip-path: none;
  box-shadow: 0 8px 24px rgb(4 5 18 / .28);
  line-height: 1.2;
}
.festival-ribbon b { flex: 0 0 auto; border-radius: 999px; }

/* Animation Atelier */
.atelier-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgb(var(--accent-rgb) / .11), transparent 28rem),
    radial-gradient(circle at 92% 86%, rgb(141 105 255 / .09), transparent 32rem),
    linear-gradient(180deg, #050716, #091023 52%, #050716);
}
.atelier-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image:
    linear-gradient(rgb(168 225 255 / .2) 1px, transparent 1px),
    linear-gradient(90deg, rgb(168 225 255 / .2) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(90deg, black, transparent 78%);
  pointer-events: none;
}
.atelier-section > .shell { position: relative; z-index: 1; }
.atelier-intro {
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr);
  align-items: end;
  gap: clamp(35px, 7vw, 100px);
}
.atelier-intro > div:first-child > span,
.atelier-card-copy small,
.atelier-media > span,
.atelier-prism-panel header span,
.atelier-koth-panel header span {
  font-family: var(--font-anime);
  font-weight: 900;
  letter-spacing: .13em;
}
.atelier-intro > div:first-child > span { color: var(--accent-soft); font-size: .57rem; }
.atelier-intro h2 { margin: 14px 0 0; font: 950 clamp(3.7rem, 7vw, 7rem)/.84 var(--font-anime); letter-spacing: -.07em; }
.atelier-intro h2 em { color: var(--accent-soft); font-style: normal; text-shadow: 3px 4px 0 rgb(43 76 131 / .62); }
.atelier-intro > div:last-child p { max-width: 470px; margin: 0; color: #b8c5d8; font-size: .9rem; }
.atelier-intro > div:last-child a { width: fit-content; margin-top: 18px; display: flex; align-items: center; gap: 9px; color: var(--accent-soft); font: 900 .58rem/1 var(--font-anime); letter-spacing: .08em; }
.atelier-intro > div:last-child a i { font-size: 1rem; font-style: normal; transition: translate .2s ease; }
.atelier-intro > div:last-child a:hover i { translate: 4px 0; }

.atelier-bento { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr); gap: 12px; }
.atelier-side-stack { min-width: 0; display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.atelier-feature-card { min-width: 0; overflow: hidden; border: 1px solid rgb(194 234 255 / .19); border-radius: 18px; color: white; background: linear-gradient(145deg, rgb(11 19 43 / .94), rgb(5 9 24 / .98)); box-shadow: 0 22px 55px rgb(0 0 0 / .24); }
a.atelier-feature-card { transition: translate .2s ease, border-color .2s ease; }
a.atelier-feature-card:hover { translate: 0 -4px; border-color: rgb(var(--accent-rgb) / .48); }
.atelier-media { position: relative; min-width: 0; overflow: hidden; background: radial-gradient(circle, rgb(var(--accent-rgb) / .08), transparent 62%), #02050e; }
.atelier-profile-card .atelier-media { aspect-ratio: 1.51; }
.atelier-side-stack .atelier-media { aspect-ratio: 2.24; }
.atelier-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / .04); pointer-events: none; }
.atelier-media img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .36)); transition: scale .45s ease; }
.atelier-feature-card:hover .atelier-media img { scale: 1.015; }
.atelier-media > span { position: absolute; z-index: 2; left: 15px; top: 15px; padding: 7px 9px; border: 1px solid rgb(198 238 255 / .26); border-radius: 999px; color: #d8f6ff; background: rgb(3 7 18 / .78); backdrop-filter: blur(8px); font-size: .44rem; }
.atelier-card-copy { min-height: 92px; padding: 17px 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) auto; align-items: center; gap: 20px; border-top: 1px solid rgb(255 255 255 / .08); }
.atelier-card-copy small { color: #7287a5; font-size: .45rem; }
.atelier-card-copy h3 { margin: 7px 0 0; font: 900 1.18rem/1 var(--font-anime); }
.atelier-card-copy p { margin: 0; color: #899ab2; font-size: .62rem; }
.atelier-card-copy > b { color: var(--accent-soft); font: 900 .48rem/1 var(--font-anime); letter-spacing: .08em; }
.atelier-side-stack .atelier-card-copy { min-height: 72px; padding-block: 13px; grid-template-columns: minmax(0, 1fr) minmax(145px, .8fr); gap: 13px; }
.atelier-side-stack .atelier-card-copy h3 { font-size: .84rem; }
.atelier-side-stack .atelier-card-copy p { font-size: .55rem; }

.atelier-prism-panel { margin-top: 12px; padding: 22px; overflow: hidden; border: 1px solid rgb(194 234 255 / .16); border-radius: 18px; background: linear-gradient(145deg, rgb(10 17 38 / .92), rgb(5 9 23 / .96)); }
.atelier-prism-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.atelier-prism-panel header span { color: #7489a7; font-size: .46rem; }
.atelier-prism-panel h3 { margin: 8px 0 0; font: 900 1.25rem/1 var(--font-anime); }
.atelier-prism-panel header p { max-width: 610px; margin: 9px 0 0; color: #8596ae; font-size: .6rem; }
.atelier-prism-panel header > b { flex: 0 0 auto; color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); letter-spacing: .08em; }
.atelier-prism-rail { margin-top: 18px; padding: 2px 2px 11px; display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: thin; scrollbar-color: rgb(var(--accent-rgb) / .38) rgb(255 255 255 / .04); }
.atelier-prism-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.atelier-prism-token { position: relative; min-width: 0; min-height: 88px; padding: 10px 7px 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgb(255 255 255 / .075); border-radius: 12px; background: rgb(255 255 255 / .018); }
.atelier-prism-token::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--prism); box-shadow: 0 0 10px var(--prism); }
.atelier-prism-token img,
.atelier-prism-token > i { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 5px 8px rgb(0 0 0 / .35)); }
.atelier-prism-token > i { display: grid; place-items: center; color: var(--prism); font-style: normal; }
.atelier-prism-token span { max-width: 100%; overflow: hidden; color: #aebcd0; font: 800 .48rem/1.2 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }

.atelier-frame-panel { margin-top: 12px; padding: 22px; overflow: hidden; border: 1px solid rgb(194 234 255 / .16); border-radius: 18px; background: linear-gradient(145deg, rgb(10 17 38 / .92), rgb(5 9 23 / .96)); }
.atelier-frame-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.atelier-frame-panel header span { color: #7489a7; font: 900 .46rem/1 var(--font-anime); letter-spacing: .13em; }
.atelier-frame-panel h3 { margin: 8px 0 0; font: 900 1.25rem/1 var(--font-anime); }
.atelier-frame-panel header p { max-width: 610px; margin: 9px 0 0; color: #8596ae; font-size: .6rem; }
.atelier-frame-panel header > a { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); letter-spacing: .08em; }
.atelier-frame-panel header > a i { font-size: .9rem; font-style: normal; transition: translate .2s ease; }
.atelier-frame-panel header > a:hover i { translate: 4px 0; }
.atelier-frame-rail { margin-top: 18px; padding: 2px 2px 11px; display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: thin; scrollbar-color: rgb(var(--accent-rgb) / .38) rgb(255 255 255 / .04); }
.atelier-frame-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.atelier-frame-token { position: relative; min-width: 0; min-height: 82px; padding: 10px 12px; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgb(255 255 255 / .075); border-radius: 12px; background: rgb(255 255 255 / .018); transition: border-color .18s ease, background .18s ease, translate .18s ease; }
.atelier-frame-token::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; background: var(--frame-rarity); box-shadow: 0 0 10px var(--frame-rarity); }
.atelier-frame-token:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--frame-rarity), transparent 62%); background: rgb(255 255 255 / .035); }
.atelier-frame-token > span { width: 56px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .07); border-radius: 10px; background: rgb(3 6 16 / .52); }
.atelier-frame-token img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.atelier-frame-token > span > i { color: var(--frame-rarity); font: 900 1.2rem/1 var(--font-anime); font-style: normal; }
.atelier-frame-token p { min-width: 0; margin: 0; }
.atelier-frame-token strong,
.atelier-frame-token small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atelier-frame-token strong { font: 850 .57rem/1.2 var(--font-anime); }
.atelier-frame-token small { margin-top: 6px; color: var(--frame-rarity); font: 850 .4rem/1 var(--font-anime); letter-spacing: .08em; }
.atelier-frame-empty { margin: 18px 0 0; color: #8596ae; font-size: .62rem; }

.atelier-koth-panel { margin-top: 12px; display: grid; grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr); overflow: hidden; border: 1px solid rgb(194 234 255 / .17); border-radius: 18px; background: linear-gradient(135deg, rgb(11 19 43 / .96), rgb(5 8 22 / .98)); box-shadow: 0 22px 55px rgb(0 0 0 / .22); }
.atelier-koth-summary { min-width: 0; padding: 27px; border-right: 1px solid rgb(255 255 255 / .08); background: linear-gradient(135deg, rgb(var(--accent-rgb) / .08), transparent 68%); }
.atelier-koth-summary > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.atelier-koth-summary header span,
.atelier-koth-results header span,
.atelier-koth-empty-state > span { color: var(--accent-soft); font-size: .48rem; }
.atelier-koth-summary header b { padding: 6px 8px; border: 1px solid rgb(130 255 191 / .25); border-radius: 999px; color: #95ffc1; font: 900 .42rem/1 var(--font-anime); letter-spacing: .07em; }
.atelier-koth-summary h3 { margin: 21px 0 10px; font: 950 clamp(1.7rem, 3vw, 2.6rem)/.95 var(--font-anime); letter-spacing: -.035em; }
.atelier-koth-summary > p { margin: 0; color: #8fa0b7; font-size: .64rem; }
.atelier-koth-meta { margin-top: 22px; display: flex; gap: 8px; }
.atelier-koth-meta > * { padding: 7px 9px; border: 1px solid rgb(255 255 255 / .08); border-radius: 8px; color: #aebbd0; background: rgb(255 255 255 / .025); font: 800 .48rem/1 var(--font-anime); text-transform: uppercase; }
.atelier-koth-summary > footer { margin-top: 25px; padding-top: 16px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgb(255 255 255 / .08); color: #8495ac; font: 800 .5rem/1 var(--font-anime); }
.atelier-koth-summary code { padding: 6px 9px; border: 1px solid rgb(var(--accent-rgb) / .3); border-radius: 7px; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .06); }
.atelier-koth-results { min-width: 0; padding: 24px; }
.atelier-koth-results > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.atelier-koth-results header span { font-family: var(--font-anime); font-weight: 900; letter-spacing: .13em; }
.atelier-koth-results header small { max-width: 65%; overflow: hidden; color: #71839f; font: 800 .48rem/1 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.atelier-koth-stage { min-width: 0; margin-top: 14px; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .14); border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, rgb(var(--accent-rgb) / .1), transparent 62%), #050914; }
.atelier-koth-stage > img { width: 100%; aspect-ratio: 90 / 76; display: block; object-fit: contain; }
.atelier-koth-winner-strip { margin: 9px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; }
.atelier-koth-winner-strip li { min-width: 0; padding: 9px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid rgb(255 255 255 / .07); border-radius: 9px; background: rgb(255 255 255 / .02); }
.atelier-koth-winner-strip li.is-place-1 { border-color: rgb(255 215 109 / .24); background: rgb(255 215 109 / .045); }
.atelier-koth-winner-strip li > i { color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); font-style: normal; }
.atelier-koth-winner-strip li.is-place-1 > i { color: #ffd76d; }
.atelier-koth-winner-strip p { min-width: 0; margin: 0; }
.atelier-koth-winner-strip p strong,
.atelier-koth-winner-strip p span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atelier-koth-winner-strip p strong { font: 850 .5rem/1.2 var(--font-anime); }
.atelier-koth-winner-strip p span { margin-top: 3px; color: #71839f; font-size: .43rem; }
.atelier-koth-winner-strip li > b { color: #a9b9cc; font: 900 .48rem/1 var(--font-anime); white-space: nowrap; }
.atelier-koth-winner-strip li > b small { color: #657894; font-size: .34rem; }
.atelier-koth-empty-podium { min-width: 390px; min-height: 210px; padding: 30px 8% 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; opacity: .46; }
.atelier-koth-empty-podium i { min-height: 65px; padding: 14px; border: 1px solid rgb(255 255 255 / .12); border-bottom: 0; border-radius: 9px 9px 0 0; color: #8191aa; background: linear-gradient(180deg, rgb(255 255 255 / .06), transparent); font: 950 1.5rem/1 var(--font-anime); font-style: normal; }
.atelier-koth-empty-podium .is-place-1 { min-height: 115px; color: #d8bc6b; }
.atelier-koth-empty-podium .is-place-2 { min-height: 86px; color: #aebdca; }
.atelier-koth-empty { margin: 12px 0 0; color: #8394ac; font-size: .62rem; text-align: center; }
.atelier-koth-empty-state { display: grid; place-items: center; align-content: center; gap: 4px; color: #8192aa; text-align: center; }
.atelier-koth-empty-state > span { font-family: var(--font-anime); font-weight: 900; letter-spacing: .13em; }
.atelier-koth-empty-state p { margin: 0; font-size: .62rem; }

/* Monthly VIP */
.vip-section { position: relative; padding: 120px 0; overflow: hidden; background: radial-gradient(circle at 78% 20%, rgb(255 205 88 / .12), transparent 28rem), radial-gradient(circle at 15% 80%, rgb(164 108 255 / .12), transparent 30rem), linear-gradient(180deg, #050716, #0c0b1d 52%, #050716); }
.vip-section::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgb(255 220 137 / .22) 1px, transparent 1px), linear-gradient(90deg, rgb(255 220 137 / .22) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, transparent, black 35%, black 70%, transparent); pointer-events: none; }
.vip-section > .shell { position: relative; }
.vip-heading { margin-bottom: 42px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); align-items: end; gap: 45px; }
.vip-heading span { color: #ffd975; font: 900 .57rem/1 var(--font-anime); letter-spacing: .15em; }
.vip-heading h2 { margin: 13px 0 0; font: 950 clamp(3.7rem, 7vw, 7rem)/.86 var(--font-anime); letter-spacing: -.065em; }
.vip-heading h2 em { color: #ffd975; font-style: normal; text-shadow: 3px 4px 0 rgb(115 70 28 / .55); }
.vip-heading > p { max-width: 430px; margin: 0; color: #b6bfd0; font-size: .9rem; }
.vip-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: 16px; align-items: stretch; }
.vip-visual { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgb(255 222 139 / .26); border-radius: 22px; background: linear-gradient(145deg, rgb(30 22 40 / .96), rgb(5 7 18 / .98)); box-shadow: 0 30px 75px rgb(0 0 0 / .35); }
.vip-preview-toolbar { min-height: 72px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgb(255 255 255 / .08); background: rgb(255 255 255 / .02); }
.vip-preview-toolbar small,
.vip-preview-toolbar strong { display: block; font-family: var(--font-anime); font-weight: 900; }
.vip-preview-toolbar small { color: #8c8192; font-size: .4rem; letter-spacing: .13em; }
.vip-preview-toolbar strong { margin-top: 5px; font-size: .66rem; }
.vip-tier-tabs { flex: 0 0 auto; padding: 3px; display: flex; gap: 3px; border: 1px solid rgb(255 222 139 / .16); border-radius: 10px; background: rgb(4 5 15 / .52); }
.vip-tier-tabs button { min-width: 43px; min-height: 34px; border: 0; border-radius: 7px; color: #82788b; background: transparent; cursor: pointer; font: 900 .52rem/1 var(--font-anime); transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.vip-tier-tabs button:hover { color: #f2dfae; }
.vip-tier-tabs button.is-active { color: #2c1d06; background: linear-gradient(135deg, #fff0af, #dca942); box-shadow: 0 5px 16px rgb(221 171 67 / .18); }
.vip-tier-tabs button:focus-visible { outline: 2px solid #ffe093; outline-offset: 2px; }
.vip-artwork { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: radial-gradient(circle, rgb(255 213 103 / .06), transparent 58%), #030714; }
.vip-artwork > img { width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity .18s ease; }
.vip-artwork::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / .04); pointer-events: none; }
.vip-artwork-loading { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; padding: 8px 10px; border: 1px solid rgb(255 220 126 / .28); border-radius: 999px; opacity: 0; color: #ffe29a; background: rgb(8 7 16 / .84); font: 900 .44rem/1 var(--font-anime); letter-spacing: .11em; pointer-events: none; transition: opacity .18s ease; }
.vip-visual.is-loading .vip-artwork > img { opacity: .22; }
.vip-visual.is-loading .vip-artwork-loading { opacity: 1; }
.vip-visual figcaption { min-height: 68px; padding: 13px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid rgb(255 255 255 / .09); background: rgb(255 255 255 / .025); }
.vip-visual figcaption > b { color: #ffd975; font: 950 1rem/1 var(--font-anime); }
.vip-visual figcaption span { font: 850 .62rem/1 var(--font-anime); }
.vip-visual figcaption small { color: #8995a9; font-size: .55rem; }
.vip-visual code,
.vip-feature-panel code { color: #ffe098; }
.vip-feature-panel { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.vip-frame-card,
.vip-drop-card,
.vip-overclock-card { min-width: 0; padding: 18px; border: 1px solid rgb(255 222 139 / .16); border-radius: 17px; background: linear-gradient(145deg, rgb(33 25 46 / .88), rgb(9 10 25 / .94)); }
.vip-feature-panel section > header { display: flex; justify-content: space-between; gap: 12px; color: #8f98ab; font: 900 .47rem/1 var(--font-anime); letter-spacing: .12em; }
.vip-feature-panel section > header b { color: #ffd975; }
.vip-frame-card > div { margin-top: 15px; padding: 14px; display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 14px; border: 1px solid rgb(255 219 126 / .16); border-radius: 13px; background: linear-gradient(110deg, rgb(255 203 85 / .08), transparent); }
.vip-item-icon { width: 56px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .1); border-radius: 12px; background: rgb(4 6 17 / .55); }
.vip-item-icon img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 7px 10px rgb(0 0 0 / .35)); }
.vip-item-icon i { color: #ffda78; font: 900 1.4rem/1 var(--font-anime); font-style: normal; }
.vip-frame-card p,
.vip-drop-items p { min-width: 0; margin: 0; }
.vip-frame-card strong,
.vip-frame-card small,
.vip-drop-items strong,
.vip-drop-items small { display: block; }
.vip-frame-card strong { font: 900 .9rem/1.2 var(--font-anime); }
.vip-frame-card small { margin-top: 6px; color: #929db0; font-size: .57rem; }
.vip-drop-items { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vip-drop-items > div { min-width: 0; padding: 9px; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid rgb(255 255 255 / .07); border-radius: 11px; background: rgb(255 255 255 / .02); }
.vip-drop-items .vip-item-icon { width: 42px; border-radius: 9px; }
.vip-drop-items .vip-item-icon img { width: 34px; height: 34px; }
.vip-drop-items strong { overflow: hidden; font: 800 .56rem/1.2 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.vip-drop-items small { margin-top: 4px; color: #7f8ba0; font-size: .48rem; }
.vip-empty { margin: 20px 0 2px; color: #8e98aa; font-size: .62rem; }
.vip-overclock-card > div { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vip-overclock-card > div > span { min-width: 0; padding: 9px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid rgb(255 255 255 / .07); border-radius: 10px; background: rgb(255 255 255 / .02); }
.vip-overclock-card img { width: 30px; height: 30px; object-fit: contain; }
.vip-overclock-card i { width: 30px; color: #d4b8ff; font-style: normal; text-align: center; }
.vip-overclock-card span > b { min-width: 0; overflow: hidden; font: 800 .5rem/1.2 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.vip-overclock-card span > small { color: #ffd975; font: 900 .43rem/1 var(--font-anime); }

/* Profile artwork and multi-page featured albums */
.profile-art-panel.is-loaded .profile-art-scan { display: none; animation: none; }
.profile-art-panel.is-loaded .profile-art-placeholder { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.achievement-module { grid-row: auto; }
.album-module { grid-column: 1 / -1; min-height: 0; }
.profile-album-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.profile-album { min-width: 0; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .18); border-radius: 16px; background: rgb(3 7 19 / .72); box-shadow: 0 12px 32px rgb(0 0 0 / .2); }
.profile-album.is-community-pick { border-color: rgb(var(--accent-rgb) / .38); box-shadow: 0 12px 32px rgb(0 0 0 / .2), 0 0 28px rgb(var(--accent-rgb) / .08); }
.profile-album.is-community-pick > footer { background: linear-gradient(110deg, rgb(var(--accent-rgb) / .075), transparent 62%); }
.profile-album-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle, rgb(var(--accent-rgb) / .08), transparent 65%), #030611; }
.profile-album-art > img { position: relative; z-index: 2; width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity .2s ease; }
.profile-album.is-loading .profile-album-art > img { opacity: .18; }
.profile-album-art > img.is-failed { opacity: 0; }
.profile-album-placeholder { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; align-content: center; color: rgb(var(--accent-rgb) / .28); }
.profile-album-placeholder span { font: 900 .8rem/1 var(--font-anime); letter-spacing: .13em; }
.profile-album-placeholder small { margin-top: 8px; font: 700 .46rem/1 "Cascadia Code", monospace; letter-spacing: .12em; }
.profile-album-page { position: absolute; z-index: 4; right: 9px; bottom: 9px; padding: 6px 8px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; color: white; background: rgb(3 6 15 / .74); backdrop-filter: blur(8px); font: 750 .45rem/1 "Cascadia Code", monospace; letter-spacing: .08em; }
.profile-album > footer { min-height: 105px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgb(255 255 255 / .09); }
.profile-album > footer > div:first-child { min-width: 0; }
.profile-album > footer span { color: var(--accent-soft); font: 700 .46rem/1 "Cascadia Code", monospace; letter-spacing: .1em; }
.profile-album h3 { margin: 7px 0 5px; overflow: hidden; font: 900 1rem/1.1 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.profile-album footer small { color: var(--muted); font-size: .57rem; }
.profile-album-controls { flex: 0 0 auto; display: flex; gap: 6px; }
.profile-album-controls button { width: 34px; height: 34px; border: 1px solid rgb(var(--accent-rgb) / .25); border-radius: 50%; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .07); cursor: pointer; }
.profile-album-controls button:hover:not(:disabled) { border-color: var(--accent); background: rgb(var(--accent-rgb) / .16); }
.profile-album-controls button:disabled { opacity: .28; cursor: default; }

/* Grimoire rebuild */
.grimoire-page { position: relative; padding-bottom: 120px; }
.grimoire-hero { position: relative; min-height: 520px; overflow: hidden; border-bottom: 1px solid rgb(var(--accent-rgb) / .16); background: linear-gradient(90deg, rgb(4 8 24 / .96), rgb(5 9 28 / .6) 58%, rgb(5 8 22 / .88)), url("/images/anime/index-world-v2.webp") center 54% / cover; }
.grimoire-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, #060816); pointer-events: none; }
.grimoire-hero-inner { position: relative; z-index: 1; min-height: 520px; padding-top: 130px; padding-bottom: 60px; display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 70px; }
.grimoire-kicker { color: var(--accent-soft); font: 900 .58rem/1 var(--font-anime); letter-spacing: .16em; }
.grimoire-hero h1 { max-width: 900px; margin: 18px 0 19px; font: 950 clamp(3.7rem, 7vw, 7.4rem)/.84 var(--font-anime); letter-spacing: -.07em; text-shadow: 4px 5px 0 rgb(32 55 112 / .65), 0 20px 45px rgb(0 0 0 / .48); }
.grimoire-hero p { max-width: 730px; margin: 0; color: #c5d0e2; font-size: 1rem; }
.grimoire-cover { position: relative; width: 220px; aspect-ratio: .73; padding: 31px 24px; display: flex; flex-direction: column; border: 2px solid #b7dffa; border-left-width: 10px; border-radius: 5px 13px 13px 5px; color: #dff7ff; background: linear-gradient(145deg, #152c52, #0c1735 70%); box-shadow: inset 0 0 0 4px rgb(255 255 255 / .05), 18px 22px 35px rgb(0 0 0 / .43); rotate: 3deg; }
.grimoire-cover::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(199 238 255 / .3); }
.grimoire-cover span { position: relative; color: var(--accent-soft); font: 900 .52rem/1 var(--font-anime); letter-spacing: .2em; }
.grimoire-cover strong { position: relative; margin-top: 13px; font: 950 2rem/.9 var(--font-anime); letter-spacing: -.03em; }
.grimoire-cover i { position: relative; margin: auto; color: rgb(191 235 255 / .8); font: 400 4.5rem/1 serif; font-style: normal; }
.grimoire-cover small { position: relative; font: 900 .46rem/1 var(--font-anime); letter-spacing: .14em; }
.grimoire-mobile-wrap { display: none; }
.grimoire-layout { padding-top: 48px; display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); align-items: start; gap: clamp(35px, 5vw, 72px); }
.grimoire-sidebar { position: sticky; top: 94px; max-height: calc(100vh - 118px); min-width: 0; overflow-y: auto; padding: 17px; border: 1px solid rgb(var(--accent-rgb) / .18); border-radius: 18px; background: rgb(7 13 32 / .86); scrollbar-width: thin; scrollbar-color: rgb(var(--accent-rgb) / .25) transparent; }
.grimoire-home { min-width: 0; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid rgb(255 255 255 / .08); border-radius: 11px; color: #b2c0d5; background: rgb(255 255 255 / .02); }
.grimoire-home > span { width: 30px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .08); font: 800 .5rem/1 "Cascadia Code", monospace; }
.grimoire-home div { min-width: 0; }
.grimoire-home strong, .grimoire-home small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grimoire-home strong { font-size: .7rem; }
.grimoire-home small { margin-top: 4px; color: #72839e; font-size: .55rem; }
.grimoire-home.is-active { border-color: rgb(var(--accent-rgb) / .32); color: white; background: rgb(var(--accent-rgb) / .07); }
.grimoire-nav-section { margin-top: 25px; min-width: 0; }
.grimoire-nav-section > span { display: block; margin: 0 9px 8px; color: #667995; font: 900 .48rem/1 var(--font-anime); letter-spacing: .15em; }
.grimoire-nav-section a { position: relative; min-width: 0; padding: 8px 9px; display: flex; justify-content: space-between; gap: 8px; overflow-wrap: anywhere; border-radius: 8px; color: #8fa0ba; font-size: .66rem; line-height: 1.35; }
.grimoire-nav-section a i { flex: 0 0 auto; color: #5f718d; font: 700 .46rem/1.4 "Cascadia Code", monospace; font-style: normal; }
.grimoire-nav-section a:hover,
.grimoire-nav-section a.is-active { color: white; background: rgb(255 255 255 / .04); }
.grimoire-nav-section a.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.grimoire-support { margin-top: 26px; padding: 15px; border: 1px solid rgb(var(--accent-rgb) / .15); border-radius: 12px; background: rgb(var(--accent-rgb) / .035); }
.grimoire-support > span { color: var(--accent-soft); font: 900 .47rem/1 var(--font-anime); letter-spacing: .12em; }
.grimoire-support p { margin: 9px 0; color: #8393aa; font-size: .6rem; }
.grimoire-support a { color: #c7f6ff; font-size: .59rem; font-weight: 750; }
.grimoire-main { min-width: 0; }
.grimoire-section { min-width: 0; padding: 64px 0; scroll-margin-top: 105px; border-bottom: 1px solid rgb(255 255 255 / .09); }
.grimoire-section:first-child { padding-top: 8px; }
.grimoire-section-heading { margin-bottom: 31px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); align-items: end; gap: 35px; }
.grimoire-section-heading > div { min-width: 0; }
.grimoire-section-heading span { color: var(--accent-soft); font: 900 .55rem/1 var(--font-anime); letter-spacing: .14em; }
.grimoire-section-heading h2 { margin: 11px 0 0; font: 950 clamp(2.5rem, 5vw, 4.7rem)/.9 var(--font-anime); letter-spacing: -.055em; }
.grimoire-section-heading > p,
.grimoire-section-heading > div > p { margin: 0; color: #98a8bd; font-size: .76rem; }
.grimoire-section-heading > div > p { margin-top: 12px; }
.grimoire-steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; counter-reset: none; }
.grimoire-steps li { min-width: 0; min-height: 225px; padding: 17px; display: flex; flex-direction: column; border: 1px solid rgb(var(--accent-rgb) / .17); border-radius: 15px; background: linear-gradient(150deg, rgb(var(--accent-rgb) / .065), rgb(7 12 29 / .84)); }
.grimoire-steps li > span { color: #647893; font: 800 .52rem/1 "Cascadia Code", monospace; }
.grimoire-steps li > div { margin-top: auto; min-width: 0; }
.grimoire-steps code { display: inline-block; max-width: 100%; padding: 6px 8px; overflow-wrap: anywhere; border: 1px solid rgb(var(--accent-rgb) / .24); border-radius: 7px; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .06); font-size: .66rem; }
.grimoire-steps h3 { margin: 13px 0 8px; font: 900 1.05rem/1 var(--font-anime); }
.grimoire-steps p { margin: 0; color: #899ab2; font-size: .64rem; }
.grimoire-tip { margin-top: 12px; padding: 15px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 17px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: rgb(var(--accent-rgb) / .055); }
.grimoire-tip span { color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); letter-spacing: .12em; }
.grimoire-tip p { min-width: 0; margin: 0; color: #aebbd0; font-size: .68rem; overflow-wrap: anywhere; }
.grimoire-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.grimoire-system-grid > a { position: relative; min-width: 0; min-height: 170px; padding: 24px 70px 22px 23px; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 15px; background: linear-gradient(135deg, rgb(var(--accent-rgb) / .075), rgb(7 12 29 / .86)); transition: translate .2s ease, border-color .2s ease; }
.grimoire-system-grid > a:hover { translate: 0 -3px; border-color: rgb(var(--accent-rgb) / .32); }
.grimoire-system-grid span { color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); letter-spacing: .13em; }
.grimoire-system-grid strong { display: block; margin-top: 13px; font: 900 1.25rem/1 var(--font-anime); }
.grimoire-system-grid p { margin: 11px 0 0; color: #8fa0b7; font-size: .66rem; }
.grimoire-system-grid i { position: absolute; right: 19px; top: 19px; color: rgb(var(--accent-rgb) / .28); font: 950 2.3rem/1 var(--font-anime); font-style: normal; }
.grimoire-guide-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.grimoire-guide-shelf article { min-width: 0; padding: 22px; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: 16px; background: rgb(8 14 33 / .78); }
.grimoire-guide-shelf article > header span { display: block; color: #6f819d; font: 900 .47rem/1 var(--font-anime); letter-spacing: .13em; }
.grimoire-guide-shelf article > header strong { display: block; margin-top: 10px; overflow-wrap: anywhere; font: 900 1.35rem/1 var(--font-anime); }
.grimoire-guide-shelf article > p { min-height: 42px; color: #899ab1; font-size: .65rem; }
.grimoire-guide-shelf article > div { margin-top: 19px; border-top: 1px solid rgb(255 255 255 / .08); }
.grimoire-guide-shelf a { min-width: 0; padding: 11px 0; display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgb(255 255 255 / .07); color: #c8d4e5; font-size: .65rem; }
.grimoire-guide-shelf a span { min-width: 0; overflow-wrap: anywhere; }
.grimoire-guide-shelf a i { flex: 0 0 auto; color: var(--accent-soft); font-style: normal; }
.command-heading > b { justify-self: end; display: flex; flex-direction: column; text-align: right; }
.command-heading > b strong { color: var(--accent-soft); font: 950 2.1rem/1 var(--font-anime); }
.command-heading > b small { margin-top: 6px; color: #788ba6; font: 800 .48rem/1 var(--font-anime); letter-spacing: .11em; text-transform: uppercase; }
.grimoire-command-tools { margin-bottom: 27px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); gap: 10px; }
.grimoire-command-tools label { min-width: 0; padding: 10px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; border: 1px solid rgb(var(--accent-rgb) / .19); border-radius: 12px; background: rgb(5 10 25 / .82); }
.grimoire-command-tools label > span { color: #6f839e; font: 900 .47rem/1 var(--font-anime); letter-spacing: .12em; }
.grimoire-command-tools input,
.grimoire-command-tools select { min-width: 0; width: 100%; height: 38px; border: 0; color: white; background: transparent; outline: none; font: 650 .68rem/1 var(--font-body); }
.grimoire-command-tools select { color-scheme: dark; }
.grimoire-command-groups { min-width: 0; display: grid; gap: 30px; }
.grimoire-command-groups > section { min-width: 0; }
.grimoire-command-groups > section > header { margin-bottom: 9px; padding: 0 4px; display: flex; justify-content: space-between; gap: 12px; color: #71849f; font: 900 .52rem/1 var(--font-anime); text-transform: uppercase; letter-spacing: .12em; }
.grimoire-command-groups > section > div { min-width: 0; display: grid; gap: 7px; }
.grimoire-command { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / .09); border-radius: 12px; background: rgb(8 13 30 / .76); }
.grimoire-command[open] { border-color: rgb(var(--accent-rgb) / .26); }
.grimoire-command > summary { min-width: 0; min-height: 75px; padding: 12px 16px; display: grid; grid-template-columns: minmax(90px, 135px) minmax(0, 1fr) 25px; align-items: center; gap: 16px; cursor: pointer; list-style: none; }
.grimoire-command > summary::-webkit-details-marker { display: none; }
.grimoire-command > summary code { min-width: 0; overflow: hidden; color: var(--accent-soft); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.grimoire-command > summary > span { min-width: 0; }
.grimoire-command > summary strong { display: block; overflow-wrap: anywhere; font-size: .72rem; }
.grimoire-command > summary small { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #8294ad; font-size: .61rem; line-height: 1.45; }
.grimoire-command > summary i { color: var(--accent-soft); font-size: 1rem; font-style: normal; text-align: center; transition: rotate .2s ease; }
.grimoire-command[open] > summary i { rotate: 45deg; }
.grimoire-command > div { min-width: 0; padding: 0 16px 17px 167px; overflow-wrap: anywhere; }
.grimoire-command > div > p { margin: 0; color: #a6b4c8; font-size: .68rem; }
.grimoire-command > div > section { min-width: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .08); }
.grimoire-command > div > section > span { color: #7185a0; font: 900 .46rem/1 var(--font-anime); letter-spacing: .12em; }
.grimoire-command > div > section p,
.grimoire-command > div > section pre { max-width: 100%; margin: 8px 0 0; overflow: auto; color: #b8c7d9; font: 600 .62rem/1.6 "Cascadia Code", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.grimoire-empty { min-height: 170px; padding: 25px; display: grid; place-items: center; align-content: center; border: 1px dashed rgb(var(--accent-rgb) / .2); border-radius: 15px; color: #8799b1; text-align: center; }
.grimoire-empty span { color: var(--accent-soft); font: 900 .55rem/1 var(--font-anime); letter-spacing: .13em; }
.grimoire-empty p { margin: 12px 0 0; font-size: .68rem; }
.grimoire-article { min-width: 0; padding: clamp(23px, 5vw, 55px); overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .18); border-radius: 20px; background: rgb(8 14 33 / .82); }
.grimoire-breadcrumb { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; color: #7789a4; font-size: .62rem; overflow-wrap: anywhere; }
.grimoire-breadcrumb a { color: var(--accent-soft); }
.grimoire-article > header { margin: 43px 0 45px; padding-bottom: 30px; border-bottom: 1px solid rgb(255 255 255 / .1); }
.grimoire-article > header > span { color: var(--accent-soft); font: 900 .53rem/1 var(--font-anime); letter-spacing: .13em; }
.grimoire-article > header h2 { margin: 14px 0 11px; overflow-wrap: anywhere; font: 950 clamp(2.7rem, 6vw, 5.4rem)/.88 var(--font-anime); letter-spacing: -.06em; }
.grimoire-article > header p { margin: 0; color: #8295ad; }
.grimoire-article .guide-content { min-width: 0; max-width: 100%; color: #bdc9d9; overflow-wrap: anywhere; }
.grimoire-article .guide-content > *:first-child { margin-top: 0; }
.grimoire-article .guide-content h1,
.grimoire-article .guide-content h2,
.grimoire-article .guide-content h3,
.grimoire-article .guide-content h4 { max-width: 100%; overflow-wrap: anywhere; color: white; font-family: var(--font-anime); line-height: 1.05; }
.grimoire-article .guide-content img { max-width: 100%; height: auto; }
.grimoire-article .guide-content pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.grimoire-article .guide-content table { width: 100%; max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.grimoire-article .guide-content th,
.grimoire-article .guide-content td { min-width: 120px; padding: 10px; border: 1px solid rgb(255 255 255 / .1); }
.grimoire-article .guide-content a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.grimoire-article .guide-lede { max-width: 780px; margin-bottom: 30px; color: #eef7ff; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.75; }
.guide-shot { margin: 30px 0 18px; }
.guide-shot img { width: 100%; display: block; border-color: rgb(var(--accent-rgb) / .28) !important; border-radius: 18px !important; background: #070b17; box-shadow: 0 24px 55px rgb(0 0 0 / .3); }
.guide-shot figcaption { padding: 13px 4px 0; display: flex; align-items: baseline; gap: 12px; color: #8395af; font-size: .63rem; line-height: 1.5; }
.guide-shot figcaption span { flex: 0 0 auto; color: var(--accent-soft); font: 900 .48rem/1 var(--font-anime); letter-spacing: .13em; }
.guide-stat-strip { margin: 18px 0 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .18); border-radius: 15px; background: rgb(4 9 24 / .7); }
.guide-stat-strip > div { min-width: 0; padding: 18px; text-align: center; }
.guide-stat-strip > div + div { border-left: 1px solid rgb(255 255 255 / .08); }
.guide-stat-strip span, .guide-stat-strip strong, .guide-stat-strip small { display: block; }
.guide-stat-strip span { color: #7185a0; font: 900 .45rem/1 var(--font-anime); letter-spacing: .13em; }
.guide-stat-strip strong { margin-top: 9px; color: white; font: 900 clamp(1.1rem, 3vw, 1.6rem)/1 var(--font-anime); overflow-wrap: anywhere; }
.guide-stat-strip small { margin-top: 7px; color: #8596ad; font-size: .57rem; }
.guide-command { width: fit-content; max-width: 100%; margin: 18px 0 24px; padding: 10px 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; border: 1px solid rgb(var(--accent-rgb) / .22); border-radius: 10px; background: rgb(var(--accent-rgb) / .045); }
.guide-command code { color: var(--accent-soft); font: 750 .75rem/1.4 "Cascadia Code", monospace; }
.guide-command span { color: #6f819b; font-size: .56rem; text-transform: uppercase; }
.guide-card-grid { margin: 25px 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide-card-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-card-grid article { min-width: 0; padding: 19px; border: 1px solid rgb(255 255 255 / .09); border-radius: 14px; background: linear-gradient(145deg, rgb(var(--accent-rgb) / .055), rgb(6 11 27 / .82)); }
.guide-card-grid article > span { color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); letter-spacing: .12em; }
.guide-card-grid h3 { margin: 14px 0 9px !important; font-size: 1rem !important; }
.guide-card-grid p { margin: 0; color: #9aabc0; font-size: .66rem; line-height: 1.65; }
.guide-flow { margin: 25px 0 12px; padding: 0; display: grid; gap: 8px; list-style: none; }
.guide-flow li { padding: 15px 17px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 14px; border: 1px solid rgb(255 255 255 / .085); border-radius: 12px; background: rgb(6 11 27 / .7); }
.guide-flow li > span { width: 34px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .24); border-radius: 9px; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .05); font: 850 .55rem/1 "Cascadia Code", monospace; }
.guide-flow h3 { margin: 2px 0 5px !important; font-size: .9rem !important; }
.guide-flow p { margin: 0; color: #99aabe; font-size: .66rem; line-height: 1.6; }
.guide-checklist { margin: 24px 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.guide-checklist li { padding: 13px 15px 13px 43px; position: relative; display: grid; grid-template-columns: minmax(130px, .35fr) minmax(0, 1fr); gap: 14px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.guide-checklist li::before { content: "✓"; position: absolute; left: 12px; top: 13px; width: 20px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #8fffc5; background: rgb(100 255 176 / .09); font-size: .6rem; }
.guide-checklist strong { color: #eef6ff; font-size: .68rem; }
.guide-checklist span { color: #93a5bc; font-size: .65rem; line-height: 1.6; }
.guide-note { margin: 28px 0; padding: 18px 20px; border: 1px solid rgb(var(--accent-rgb) / .2); border-left: 3px solid var(--accent); border-radius: 0 13px 13px 0; background: linear-gradient(90deg, rgb(var(--accent-rgb) / .07), rgb(var(--accent-rgb) / .02)); }
.guide-note.is-warning { border-color: rgb(255 196 88 / .22); border-left-color: #ffc458; background: linear-gradient(90deg, rgb(255 196 88 / .08), rgb(255 196 88 / .015)); }
.guide-note span { color: var(--accent-soft); font: 900 .5rem/1 var(--font-anime); letter-spacing: .13em; }
.guide-note.is-warning span { color: #ffd88b; }
.guide-note p { margin: 10px 0 0; color: #acb9cb; font-size: .68rem; line-height: 1.65; }
.guide-formula { margin: 22px 0; padding: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgb(var(--accent-rgb) / .21); border-radius: 13px; background: rgb(var(--accent-rgb) / .045); }
.guide-formula span { color: #778ba6; font: 900 .48rem/1 var(--font-anime); letter-spacing: .12em; }
.guide-formula code { color: var(--accent-soft); font: 750 clamp(.67rem, 2vw, .82rem)/1.5 "Cascadia Code", monospace; }
.grimoire-article .guide-next { margin-top: 38px; padding: 17px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 18px; border: 1px solid rgb(var(--accent-rgb) / .24); border-radius: 13px; background: linear-gradient(115deg, rgb(var(--accent-rgb) / .085), rgb(var(--accent-rgb) / .025)); color: white; text-decoration: none; transition: translate .2s ease, border-color .2s ease; }
.grimoire-article .guide-next:hover { translate: 0 -2px; border-color: rgb(var(--accent-rgb) / .48); }
.guide-next span { color: var(--accent-soft); font: 900 .46rem/1 var(--font-anime); letter-spacing: .13em; }
.guide-next strong { grid-column: 1; font: 850 .85rem/1.35 var(--font-anime); }
.guide-next i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent-soft); font-size: 1.3rem; font-style: normal; }
.grimoire-article > footer { margin-top: 55px; padding-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgb(255 255 255 / .1); }
.grimoire-article > footer > div { min-width: 0; display: flex; align-items: center; gap: 13px; }
.grimoire-article > footer > div > span { flex: 0 0 auto; padding: 7px; border: 1px solid rgb(126 255 190 / .25); border-radius: 999px; color: #9affc5; font: 900 .44rem/1 var(--font-anime); }
.grimoire-article > footer p { min-width: 0; margin: 0; }
.grimoire-article > footer p strong,
.grimoire-article > footer p small { display: block; overflow-wrap: anywhere; }
.grimoire-article > footer p strong { font-size: .68rem; }
.grimoire-article > footer p small { margin-top: 4px; color: #7e90a9; font-size: .58rem; }

@media (max-width: 1180px) {
  .atelier-bento { grid-template-columns: 1fr; }
  .atelier-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .vip-layout { grid-template-columns: 1fr; }
  .profile-album-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grimoire-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .atelier-intro { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .atelier-intro > div:last-child p { max-width: 680px; }
  .atelier-koth-panel { grid-template-columns: 1fr; }
  .atelier-koth-summary { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .home-world-map > a:nth-of-type(2n) { border-right: 0; }
  .vip-heading { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .vip-heading > p { max-width: 650px; }
  .profile-content-grid { grid-template-columns: 1fr; }
  .album-module { grid-column: auto; }
  .grimoire-hero-inner { grid-template-columns: minmax(0, 1fr) 180px; gap: 35px; }
  .grimoire-cover { width: 170px; }
  .grimoire-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 28px; }
  .grimoire-section-heading { grid-template-columns: 1fr; align-items: start; }
  .command-heading > b { justify-self: start; text-align: left; }
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .festival-ribbon { margin-top: -13px; }
  .atelier-section { padding: 90px 0; }
  .atelier-intro h2 { font-size: clamp(3.3rem, 15vw, 5rem); }
  .atelier-side-stack { grid-template-columns: 1fr; }
  .atelier-card-copy { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .atelier-card-copy p { grid-column: 1 / -1; grid-row: 2; }
  .atelier-card-copy > b { grid-column: 2; grid-row: 1; }
  .atelier-side-stack .atelier-card-copy { grid-template-columns: 1fr; }
  .atelier-side-stack .atelier-card-copy p { grid-column: auto; grid-row: auto; }
  .atelier-prism-panel,
  .atelier-frame-panel { padding: 18px; }
  .atelier-koth-summary,
  .atelier-koth-results { padding: 20px; }
  .vip-section { padding: 90px 0; }
  .vip-heading h2 { font-size: clamp(3.4rem, 15vw, 5.4rem); }
  .profile-album-gallery { grid-template-columns: 1fr; }
  .grimoire-hero { min-height: 480px; }
  .grimoire-hero-inner { min-height: 480px; padding-top: 115px; grid-template-columns: 1fr; }
  .grimoire-cover { display: none; }
  .grimoire-mobile-wrap { display: block; }
  .grimoire-mobile-nav { margin-top: 18px; border: 1px solid rgb(var(--accent-rgb) / .2); border-radius: 13px; background: rgb(8 14 33 / .9); }
  .grimoire-mobile-nav summary { padding: 15px 17px; display: flex; justify-content: space-between; gap: 12px; color: white; cursor: pointer; font: 850 .68rem/1 var(--font-anime); list-style: none; }
  .grimoire-mobile-nav summary::-webkit-details-marker { display: none; }
  .grimoire-mobile-nav nav { max-height: 55vh; overflow-y: auto; padding: 0 10px 10px; }
  .grimoire-mobile-nav nav a { padding: 10px; display: block; border-top: 1px solid rgb(255 255 255 / .07); color: #aab9ce; font-size: .66rem; overflow-wrap: anywhere; }
  .grimoire-layout { padding-top: 25px; display: block; }
  .grimoire-sidebar { display: none; }
  .grimoire-system-grid,
  .grimoire-guide-shelf { grid-template-columns: 1fr; }
  .grimoire-command-tools { grid-template-columns: 1fr; }
  .grimoire-command > summary { grid-template-columns: minmax(75px, 100px) minmax(0, 1fr) 20px; gap: 10px; padding-inline: 12px; }
  .grimoire-command > div { padding: 0 12px 15px; }
  .guide-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grimoire-article > footer { align-items: start; flex-direction: column; }
}

@media (max-width: 520px) {
  .atelier-prism-panel > header { align-items: start; flex-direction: column; gap: 13px; }
  .atelier-prism-panel h3 { font-size: 1rem; }
  .atelier-prism-rail { grid-auto-columns: 78px; }
  .atelier-prism-token { min-height: 80px; }
  .atelier-prism-token img,
  .atelier-prism-token > i { width: 38px; height: 38px; }
  .atelier-frame-panel > header { align-items: start; flex-direction: column; gap: 13px; }
  .atelier-frame-panel h3 { font-size: 1rem; }
  .atelier-frame-rail { grid-auto-columns: 195px; }
  .atelier-frame-token { grid-template-columns: 50px minmax(0, 1fr); }
  .atelier-frame-token > span { width: 48px; }
  .atelier-frame-token img { width: 42px; height: 42px; }
  .atelier-koth-results > header { align-items: start; flex-direction: column; }
  .atelier-koth-results header small { max-width: 100%; }
  .atelier-koth-winner-strip { grid-template-columns: 1fr; }
  .vip-preview-toolbar { align-items: start; flex-direction: column; gap: 11px; }
  .vip-tier-tabs { width: 100%; }
  .vip-tier-tabs button { flex: 1; }
  .vip-visual figcaption { grid-template-columns: auto minmax(0, 1fr); }
  .vip-visual figcaption small { grid-column: 2; }
  .vip-drop-items,
  .vip-overclock-card > div { grid-template-columns: 1fr; }
  .grimoire-steps { grid-template-columns: 1fr; }
  .grimoire-steps li { min-height: 185px; }
  .grimoire-command > summary { grid-template-columns: 1fr 20px; }
  .grimoire-command > summary code { grid-column: 1; margin-bottom: 3px; }
  .grimoire-command > summary > span { grid-column: 1; }
  .grimoire-command > summary i { grid-column: 2; grid-row: 1 / span 2; }
  .guide-stat-strip { grid-template-columns: 1fr; }
  .guide-stat-strip > div + div { border-top: 1px solid rgb(255 255 255 / .08); border-left: 0; }
  .guide-card-grid,
  .guide-card-grid.is-two { grid-template-columns: 1fr; }
  .guide-checklist li { grid-template-columns: 1fr; gap: 5px; }
  .guide-shot figcaption { align-items: start; flex-direction: column; }
}

/* Midnight Ramen Rush */
.anime-game-switcher { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
.ramen-game-page { --accent: #ffc16d; --accent-rgb: 255 193 109; --accent-soft: #ffe0a8; }
.ramen-game-page .anime-game-shade { background: linear-gradient(180deg, rgb(24 8 7 / .48), rgb(20 8 10 / .14) 38%, rgb(13 6 13 / .86) 88%, #08040a), radial-gradient(circle at 50% 35%, transparent 8%, rgb(15 5 7 / .34) 74%); }
.ramen-anime-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 18px; align-items: start; }
.ramen-anime-console { position: relative; min-width: 0; overflow: hidden; border: 2px solid rgb(255 222 169 / .5); background: linear-gradient(150deg, rgb(56 24 21 / .97), rgb(20 12 23 / .98)); box-shadow: 10px 13px 0 rgb(15 6 9 / .4), 0 30px 80px rgb(0 0 0 / .48), inset 0 0 0 4px rgb(255 235 197 / .025); clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px); }
.ramen-console-top { height: 66px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgb(255 225 178 / .2); background: linear-gradient(90deg, rgb(255 166 91 / .16), transparent 72%); }
.ramen-mission-tag { min-width: 0; display: flex; align-items: center; gap: 11px; }
.ramen-mission-tag > i { width: 38px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #ffc16d; border-radius: 50%; color: #ffe3ad; background: rgb(255 157 83 / .11); box-shadow: 0 0 17px rgb(255 172 91 / .22); font: 900 .8rem/1 serif; font-style: normal; }
.ramen-mission-tag span { min-width: 0; }
.ramen-mission-tag small { display: block; color: #b9957e; font: 800 .48rem/1 var(--font-anime); letter-spacing: .13em; }
.ramen-mission-tag strong { display: block; margin-top: 5px; overflow: hidden; font: 900 .69rem/1 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.ramen-kitchen-stage { min-width: 0; padding: 24px 24px 9px; display: grid; grid-template-columns: minmax(300px, .72fr) minmax(300px, 1fr); gap: 18px; background: radial-gradient(circle at 70% 40%, rgb(255 162 82 / .08), transparent 48%); }
.ramen-order-ticket { position: relative; min-width: 0; min-height: 315px; padding: 24px; overflow: hidden; border: 3px solid #4e281d; color: #2c1711; background: linear-gradient(145deg, #ffe6b9, #dcae76); box-shadow: inset 0 0 0 2px #fff0cf, 7px 9px 0 rgb(11 5 8 / .32); rotate: -.7deg; }
.ramen-order-ticket::after { content: ""; position: absolute; inset: 9px; border: 1px dashed rgb(75 38 26 / .34); pointer-events: none; }
.ramen-order-ticket > * { position: relative; z-index: 1; }
.ramen-order-ticket > header { padding-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid rgb(69 34 24 / .45); font: 900 .53rem/1 var(--font-anime); letter-spacing: .1em; }
.ramen-order-ticket > header small { overflow: hidden; color: #795343; text-overflow: ellipsis; white-space: nowrap; }
.ramen-order-ticket h2 { margin: 26px 0 7px; overflow-wrap: anywhere; font: 950 clamp(1.8rem, 3vw, 2.8rem)/.9 var(--font-anime); letter-spacing: -.04em; }
.ramen-order-ticket > p { margin: 0; color: #765142; font-size: .62rem; }
.ramen-order-ticket > div { margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ramen-order-ticket > div > span { width: 56px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; border: 2px solid rgb(77 37 26 / .42); border-radius: 50%; color: #4d291d; background: rgb(255 255 255 / .18); font: 900 1.25rem/1 serif; transition: .2s ease; }
.ramen-order-ticket > div > span small { display: block; margin-top: 4px; font: 800 .38rem/1 var(--font-anime); }
.ramen-order-ticket > div > span.is-done { color: #f8e9c9; border-color: #5f8d48; background: #5f8d48; scale: .92; }
.ramen-order-ticket > div > i { color: #7a5140; font-style: normal; }
.ramen-counter { position: relative; min-width: 0; min-height: 315px; overflow: hidden; border: 1px solid rgb(255 209 152 / .2); border-radius: 13px; background: linear-gradient(180deg, rgb(11 10 17 / .26), rgb(9 5 10 / .66)), repeating-linear-gradient(90deg, #4a271f 0 55px, #3b1f1b 55px 57px); box-shadow: inset 0 -42px rgb(24 11 12 / .72); }
.ramen-counter::before { content: ""; position: absolute; left: 0; right: 0; bottom: 82px; height: 14px; background: #6a3929; box-shadow: 0 5px 0 #271314; }
.ramen-chef { position: absolute; left: 0; bottom: 76px; width: 190px; height: 245px; pointer-events: none; }
.ramen-chef .index-chibi { --chibi-size: 180px; position: absolute; left: -4px; bottom: -5px; }
.ramen-chef > span { position: absolute; z-index: 5; left: 108px; top: 21px; width: 132px; padding: 9px; border: 2px solid #5a2f25; border-radius: 9px; color: #371c16; background: #fff0cf; box-shadow: 4px 5px 0 rgb(13 6 8 / .3); font: 900 .57rem/1.35 var(--font-anime); text-align: center; }
.ramen-bowl { position: absolute; z-index: 4; right: 7%; bottom: 52px; width: min(220px, 48%); height: 112px; border-radius: 12px 12px 80px 80px; background: linear-gradient(180deg, #f5e4c6, #b84d42 12%, #722b2d 76%, #421c22); box-shadow: inset 0 -10px 18px rgb(31 11 15 / .45), 0 12px 12px rgb(4 2 4 / .42); transition: translate .24s ease, rotate .24s ease; }
.ramen-bowl::before { content: ""; position: absolute; z-index: 2; left: 4%; right: 4%; top: -17px; height: 40px; border: 6px solid #e3cfae; border-radius: 50%; background: radial-gradient(ellipse, #e7bd66 0 40%, #704429 42% 58%, #2f1716 60%); box-shadow: inset 0 0 12px rgb(255 231 169 / .4); }
.ramen-bowl > b { position: absolute; left: 50%; top: 51px; translate: -50% 0; color: #f6cda0; font: 950 .9rem/1 var(--font-anime); letter-spacing: .14em; }
.ramen-bowl > div { position: absolute; z-index: 5; left: 8%; right: 8%; top: -16px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.ramen-bowl > div span { width: 29px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 245 211 / .5); border-radius: 50%; color: #3b2119; background: #f6d79a; box-shadow: 0 2px 5px rgb(24 10 8 / .3); font: 900 .76rem/1 serif; animation: ramen-drop .22s ease both; }
.ramen-bowl > div span[data-ingredient="pork"] { background: #cf7760; }
.ramen-bowl > div span[data-ingredient="scallion"] { background: #8bbb68; }
.ramen-bowl > div span[data-ingredient="nori"] { color: white; background: #263e35; }
.ramen-bowl.is-served { translate: 12px -5px; }
.ramen-bowl.is-spilled { animation: ramen-spill .35s ease; }
@keyframes ramen-drop { from { opacity: 0; transform: translateY(-18px) rotate(-20deg); } }
@keyframes ramen-spill { 25% { rotate: -5deg; translate: -7px 0; } 70% { rotate: 4deg; translate: 6px 0; } }
.ramen-bowl-steam { position: absolute; z-index: 6; left: 18%; right: 18%; bottom: 100%; height: 95px; pointer-events: none; }
.ramen-bowl-steam i { position: absolute; left: 20%; bottom: 0; width: 16px; height: 70px; border-left: 4px solid rgb(255 242 215 / .48); border-radius: 50%; filter: blur(1px); animation: ramen-steam 2.2s ease-in-out infinite; }
.ramen-bowl-steam i:nth-child(2) { left: 48%; height: 83px; animation-delay: -.8s; }
.ramen-bowl-steam i:nth-child(3) { left: 74%; height: 62px; animation-delay: -1.4s; }
.ramen-hud-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgb(255 224 178 / .14); background: rgb(17 8 12 / .64); }
.ramen-hud-row > div { min-width: 0; min-height: 65px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgb(255 255 255 / .09); }
.ramen-hud-row > div:nth-child(4) { border-right: 0; }
.ramen-hud-row small { color: #a58471; font: 800 .46rem/1 var(--font-anime); letter-spacing: .1em; }
.ramen-hud-row strong { margin-top: 7px; overflow: hidden; color: #ffe1aa; font: 950 1.3rem/1 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.ramen-hud-row > span { grid-column: 1 / -1; height: 5px; overflow: hidden; background: rgb(255 255 255 / .05); }
.ramen-hud-row > span i { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #ff875f, #ffd77d); box-shadow: 0 0 12px #ffad66; }
.ramen-pantry { grid-column: 1 / -1; padding: 3px 0 7px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.ramen-pantry > button { position: relative; min-width: 0; min-height: 104px; padding: 11px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgb(255 220 167 / .18); border-radius: 11px; color: #f8e9d4; background: linear-gradient(145deg, rgb(255 178 100 / .085), rgb(19 10 16 / .76)); cursor: pointer; transition: .16s ease; }
.ramen-pantry > button:hover:not(:disabled) { translate: 0 -3px; border-color: rgb(255 205 139 / .5); background: rgb(255 172 91 / .14); }
.ramen-pantry > button:disabled { cursor: default; opacity: .48; }
.ramen-pantry > button > span { width: 43px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 222 177 / .34); border-radius: 50%; color: #ffe1a9; background: rgb(255 192 109 / .09); font: 900 1.2rem/1 serif; }
.ramen-pantry > button strong { margin-top: 9px; overflow: hidden; max-width: 100%; font: 900 .59rem/1 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.ramen-pantry > button small { position: absolute; right: 7px; top: 7px; color: #896f61; font: 750 .42rem/1 "Cascadia Code", monospace; }
.ramen-pantry > button.is-correct { color: white; border-color: #a8ffc2; background: rgb(75 155 92 / .42); box-shadow: 0 0 20px rgb(105 255 153 / .18); scale: 1.03; }
.ramen-pantry > button.is-wrong { border-color: #ff6577; background: rgb(171 42 60 / .5); animation: pocket-wrong .35s ease; }
.ramen-guide-card { min-height: 365px; padding: 20px; color: #f8e9d8; background: linear-gradient(145deg, rgb(67 30 25 / .97), rgb(25 14 24 / .97)) !important; border-color: rgb(255 211 155 / .34) !important; }
.ramen-guide-card > span { color: #d5ad84; font: 900 .51rem/1 var(--font-anime); letter-spacing: .14em; }
.ramen-guide-card > div { position: relative; height: 185px; margin: 5px -5px -2px; overflow: hidden; }
.ramen-guide-card .index-chibi { --chibi-size: 170px; position: absolute; left: 50%; bottom: -10px; translate: -50% 0; }
.ramen-guide-card h3 { margin: 10px 0 7px; font: 950 1.35rem/1 var(--font-anime); }
.ramen-guide-card p { color: #b99b8d; font-size: .62rem; }
.ramen-guide-card blockquote { margin: 14px 0 0; padding: 11px; border-left: 2px solid #ffc16d; color: #ffe1ad; background: rgb(255 189 102 / .07); font: 750 .59rem/1.45 var(--font-anime); }
.quest-ramen > span { color: #ffc16d; border-color: rgb(255 193 109 / .44); }

@media (max-width: 1220px) {
  .ramen-anime-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .ramen-kitchen-stage { grid-template-columns: minmax(280px, .8fr) minmax(280px, 1fr); }
}

@media (max-width: 980px) {
  .anime-game-switcher { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ramen-anime-layout { grid-template-columns: 1fr; }
  .ramen-game-page .anime-game-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ramen-guide-card { min-height: 300px; }
  .ramen-guide-card > div { height: 135px; }
  .ramen-guide-card .index-chibi { --chibi-size: 130px; }
}

@media (max-width: 760px) {
  .anime-game-switcher { grid-template-columns: 1fr; }
  .ramen-kitchen-stage { padding-inline: 12px; grid-template-columns: 1fr; }
  .ramen-order-ticket { min-height: 280px; }
  .ramen-counter { min-height: 300px; }
  .ramen-hud-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ramen-hud-row > div:nth-child(2) { border-right: 0; }
  .ramen-hud-row > div:nth-child(4) { border-top: 1px solid rgb(255 255 255 / .09); }
  .ramen-hud-row > div:nth-child(3) { border-top: 1px solid rgb(255 255 255 / .09); }
  .ramen-pantry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ramen-game-page .anime-game-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .ramen-console-top { padding-inline: 11px; }
  .ramen-mission-tag small { display: none; }
  .ramen-order-ticket { padding-inline: 17px; }
  .ramen-order-ticket > div { gap: 3px; }
  .ramen-order-ticket > div > span { width: 48px; }
  .ramen-chef { width: 150px; }
  .ramen-chef .index-chibi { --chibi-size: 145px; }
  .ramen-chef > span { display: none; }
  .ramen-bowl { right: 3%; width: 51%; }
  .ramen-pantry > button { min-height: 94px; }
}

@media (prefers-reduced-motion: reduce) {
  .ramen-bowl-steam i,
  .ramen-bowl > div span { animation: none !important; }
}

/* Void system relay */
.void-world-map { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.void-system-section {
  --void-violet: 157 89 255;
  --void-blue: 76 202 255;
  --void-pink: 255 87 194;
  position: relative;
  padding: 140px 0 125px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgb(var(--void-violet) / .2), transparent 22rem),
    radial-gradient(circle at 6% 18%, rgb(var(--void-blue) / .1), transparent 30rem),
    radial-gradient(circle at 92% 78%, rgb(var(--void-pink) / .08), transparent 28rem),
    linear-gradient(180deg, #050716 0%, #060310 18%, #0b061b 58%, #050716 100%);
}
.void-system-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .18;
  background-image:
    linear-gradient(rgb(157 89 255 / .16) 1px, transparent 1px),
    linear-gradient(90deg, rgb(76 202 255 / .1) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse at center, black 12%, transparent 72%);
}
.void-system-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 20%;
  width: 1px;
  height: 68%;
  background: linear-gradient(transparent, rgb(var(--void-violet) / .45), rgb(var(--void-blue) / .35), transparent);
  box-shadow: 0 0 55px 14px rgb(var(--void-violet) / .13);
}
.void-system-section > .shell { position: relative; z-index: 2; }
.void-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.void-atmosphere i {
  position: absolute;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(191 158 255 / .82);
  box-shadow: 0 0 12px 3px rgb(var(--void-violet) / .38);
  animation: void-star-drift 7s ease-in-out infinite;
}
.void-atmosphere i:nth-child(1) { left: 7%; top: 16%; animation-delay: -1s; }
.void-atmosphere i:nth-child(2) { left: 17%; top: 72%; animation-delay: -4s; }
.void-atmosphere i:nth-child(3) { left: 27%; top: 34%; animation-delay: -2.4s; }
.void-atmosphere i:nth-child(4) { left: 36%; top: 86%; animation-delay: -5.2s; }
.void-atmosphere i:nth-child(5) { left: 43%; top: 13%; animation-delay: -3.5s; }
.void-atmosphere i:nth-child(6) { left: 48%; top: 66%; animation-delay: -.3s; }
.void-atmosphere i:nth-child(7) { left: 55%; top: 29%; animation-delay: -6.1s; }
.void-atmosphere i:nth-child(8) { left: 63%; top: 80%; animation-delay: -2.8s; }
.void-atmosphere i:nth-child(9) { left: 72%; top: 17%; animation-delay: -4.7s; }
.void-atmosphere i:nth-child(10) { left: 81%; top: 57%; animation-delay: -1.7s; }
.void-atmosphere i:nth-child(11) { left: 91%; top: 27%; animation-delay: -5.6s; }
.void-atmosphere i:nth-child(12) { left: 95%; top: 84%; animation-delay: -3.1s; }
@keyframes void-star-drift {
  0%, 100% { opacity: .18; translate: 0 18px; scale: .65; }
  50% { opacity: 1; translate: 0 -18px; scale: 1.35; }
}

.void-system-heading {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
  align-items: end;
  gap: clamp(38px, 7vw, 110px);
}
.void-system-heading > div:first-child > span {
  color: #bc9aff;
  font: 900 .58rem/1 var(--font-anime);
  letter-spacing: .17em;
}
.void-system-heading h2 {
  margin: 16px 0 0;
  font: 950 clamp(4.2rem, 7.4vw, 8rem)/.8 var(--font-anime);
  letter-spacing: -.075em;
  text-wrap: balance;
}
.void-system-heading h2 em {
  color: #bda1ff;
  font-style: normal;
  text-shadow: 3px 4px 0 rgb(71 35 130 / .72), 0 0 42px rgb(var(--void-violet) / .32);
}
.void-system-heading > div:last-child > p { max-width: 620px; margin: 0; color: #c4bad4; font-size: 1rem; }
.void-text-link {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #d8c5ff;
  font: 900 .65rem/1 var(--font-anime);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.void-text-link i { font-size: 1.3rem; font-style: normal; transition: translate .2s ease; }
.void-text-link:hover i { translate: 6px 0; }

.void-relay-console {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(205 183 255 / .32);
  border-radius: 30px;
  color: #f8f4ff;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--void-card-accent) 19%, transparent), transparent 24rem),
    linear-gradient(115deg, rgb(28 11 50 / .72), rgb(4 4 13 / .96) 37% 63%, rgb(5 25 38 / .74));
  box-shadow:
    0 48px 120px rgb(0 0 0 / .55),
    inset 0 0 0 5px rgb(255 255 255 / .018),
    inset 0 0 80px rgb(var(--void-violet) / .07),
    0 0 90px rgb(var(--void-violet) / .09);
  isolation: isolate;
}
.void-relay-console::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .2;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgb(255 255 255 / .025) 6px),
    linear-gradient(90deg, rgb(var(--void-violet) / .09), transparent 24%, transparent 76%, rgb(var(--void-blue) / .07));
  pointer-events: none;
}
.void-relay-console::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 11px;
  border: 1px solid rgb(255 255 255 / .055);
  border-radius: 21px;
  clip-path: polygon(0 0, 86px 0, 100px 13px, calc(100% - 100px) 13px, calc(100% - 86px) 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.void-console-topline {
  position: relative;
  z-index: 10;
  min-height: 72px;
  padding: 0 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgb(255 255 255 / .09);
  background: linear-gradient(90deg, rgb(var(--void-violet) / .08), rgb(255 255 255 / .015), rgb(var(--void-blue) / .06));
}
.void-console-topline span,
.void-console-topline b {
  font-family: var(--font-anime);
  font-weight: 900;
  letter-spacing: .14em;
}
.void-console-topline span { color: #c3afdf; font-size: .49rem; }
.void-console-topline span i {
  width: 7px;
  aspect-ratio: 1;
  display: inline-block;
  margin-right: 8px;
  border-radius: 50%;
  background: #9dffca;
  box-shadow: 0 0 13px #72ffb2;
  animation: void-status-blink 2.3s ease-in-out infinite;
}
.void-console-topline b { color: #74ddff; font-size: .42rem; }
@keyframes void-status-blink { 0%, 100% { opacity: .42; } 48% { opacity: 1; } }

.void-servant-switcher {
  position: relative;
  z-index: 10;
  min-height: 88px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid rgb(255 255 255 / .085);
  background:
    linear-gradient(90deg, rgb(var(--void-violet) / .055), transparent 45%, rgb(var(--void-blue) / .045)),
    rgb(4 3 13 / .64);
}
.void-servant-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-inline: 1px solid rgb(255 255 255 / .065);
}
.void-servant-tab {
  position: relative;
  min-width: 0;
  padding: 15px 13px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgb(255 255 255 / .055);
  color: #766c83;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.void-servant-tab:last-child { border-right: 0; }
.void-servant-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--void-card-accent) 12%, transparent), transparent 64%),
    repeating-linear-gradient(90deg, transparent 0 13px, rgb(255 255 255 / .018) 14px);
  transition: opacity .25s ease;
}
.void-servant-tab:hover,
.void-servant-tab:focus-visible { color: #c7b7dc; background: rgb(255 255 255 / .018); outline: none; }
.void-servant-tab:focus-visible { box-shadow: inset 0 0 0 1px rgb(129 222 255 / .45); }
.void-servant-tab.is-active { color: #f2eaff; }
.void-servant-tab.is-active::before { opacity: 1; }
.void-servant-tab > b {
  position: relative;
  z-index: 1;
  width: 25px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(181 147 235 / .2);
  border-radius: 50%;
  color: #77678c;
  font: 900 .34rem/1 var(--font-anime);
}
.void-servant-tab.is-active > b {
  border-color: color-mix(in srgb, var(--void-card-accent) 52%, #9d78df);
  color: #eee2ff;
  box-shadow: 0 0 15px color-mix(in srgb, var(--void-card-accent) 18%, transparent);
}
.void-servant-tab > span { position: relative; z-index: 1; min-width: 0; }
.void-servant-tab strong,
.void-servant-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.void-servant-tab strong { font: 900 .49rem/1.1 var(--font-anime); }
.void-servant-tab small { margin-top: 7px; color: #60586b; font: 800 .29rem/1 var(--font-anime); letter-spacing: .08em; }
.void-servant-tab > i {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--void-card-accent) 84%, #b183ff), #81e6ff);
  box-shadow: 0 0 11px color-mix(in srgb, var(--void-card-accent) 55%, transparent);
}
.void-servant-tab.is-active > i { animation: void-cycle-progress 8s linear forwards; }
.void-relay-console:hover .void-servant-tab.is-active > i,
.void-relay-console:focus-within .void-servant-tab.is-active > i,
.void-relay-console.is-cycle-paused .void-servant-tab.is-active > i { animation-play-state: paused; }
@keyframes void-cycle-progress { to { width: 100%; } }
.void-cycle-arrow,
.void-cycle-toggle {
  border: 0;
  color: #89799d;
  background: transparent;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.void-cycle-arrow {
  min-width: 46px;
  font: 400 1.25rem/1 var(--font-anime);
}
.void-cycle-arrow:hover,
.void-cycle-arrow:focus-visible,
.void-cycle-toggle:hover,
.void-cycle-toggle:focus-visible { color: #d9c8f4; background: rgb(255 255 255 / .03); outline: none; }
.void-cycle-arrow:focus-visible,
.void-cycle-toggle:focus-visible { box-shadow: inset 0 0 0 1px rgb(128 222 255 / .38); }
.void-cycle-controls {
  min-width: 167px;
  display: grid;
  grid-template-columns: auto 46px 66px;
  align-items: stretch;
}
.void-cycle-controls output {
  min-width: 55px;
  padding-inline: 11px;
  display: grid;
  place-items: center;
  color: #736681;
  font: 900 .32rem/1 var(--font-anime);
  letter-spacing: .08em;
}
.void-cycle-controls .void-cycle-arrow { border-left: 1px solid rgb(255 255 255 / .055); }
.void-cycle-toggle {
  padding: 9px 7px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-left: 1px solid rgb(255 255 255 / .055);
}
.void-cycle-toggle > i {
  position: relative;
  width: 12px;
  height: 11px;
}
.void-cycle-toggle > i::before,
.void-cycle-toggle > i::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: #8bcfff;
  box-shadow: 0 0 7px rgb(93 205 255 / .38);
}
.void-cycle-toggle > i::before { left: 2px; }
.void-cycle-toggle > i::after { right: 2px; }
.void-cycle-toggle.is-paused > i::before {
  left: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #9cddff;
  border-radius: 0;
  background: transparent;
}
.void-cycle-toggle.is-paused > i::after { display: none; }
.void-cycle-toggle > span { color: #696073; font: 900 .28rem/1 var(--font-anime); letter-spacing: .09em; }

.void-relay-grid {
  min-height: 624px;
  display: grid;
  grid-template-columns: minmax(245px, .75fr) minmax(360px, 1.15fr) minmax(260px, .82fr);
}
.void-manifest-panel,
.void-route-panel {
  position: relative;
  z-index: 4;
  min-width: 0;
  padding: 31px 27px 27px;
  background: rgb(5 4 15 / .54);
}
.void-manifest-panel { border-right: 1px solid rgb(255 255 255 / .075); }
.void-route-panel { border-left: 1px solid rgb(255 255 255 / .075); }
.void-panel-label {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #9a86b7;
  font: 900 .45rem/1 var(--font-anime);
  letter-spacing: .15em;
}
.void-panel-label > span {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(191 155 255 / .3);
  border-radius: 50%;
  color: #d7c2ff;
  background: rgb(var(--void-violet) / .07);
  font-size: .42rem;
  letter-spacing: 0;
}
.void-servant-identity {
  margin-top: 34px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgb(255 255 255 / .08);
}
.void-servant-identity small {
  display: block;
  color: #9e7dd2;
  font: 850 .4rem/1 var(--font-anime);
  letter-spacing: .14em;
}
.void-servant-identity h3 {
  max-width: 12ch;
  margin: 11px 0 0;
  color: #fbf8ff;
  font: 950 clamp(1.65rem, 2.5vw, 2.5rem)/.92 var(--font-anime);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.void-servant-identity p {
  margin: 12px 0 0;
  color: #8d8499;
  font-size: .66rem;
  line-height: 1.45;
}
.void-signal-pair {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.void-signal-chip {
  position: relative;
  min-height: 113px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  justify-items: start;
  overflow: hidden;
  border: 1px solid rgb(187 145 255 / .16);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(var(--void-violet) / .095), rgb(8 7 18 / .76));
}
.void-signal-chip::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--void-card-accent), transparent);
  animation: void-signal-sweep 4.5s ease-in-out infinite;
}
.void-signal-chip:nth-child(2)::after { animation-delay: -2.25s; }
@keyframes void-signal-sweep { 0%, 100% { translate: -42% 0; opacity: .25; } 50% { translate: 42% 0; opacity: .9; } }
.void-signal-chip > small {
  color: #766c84;
  font: 850 .38rem/1 var(--font-anime);
  letter-spacing: .14em;
}
.void-emoji-socket {
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--void-card-accent) 44%, transparent);
  border-radius: 14px;
  background: radial-gradient(circle, color-mix(in srgb, var(--void-card-accent) 19%, transparent), rgb(5 4 13 / .8));
  box-shadow: inset 0 0 18px rgb(255 255 255 / .035), 0 0 18px color-mix(in srgb, var(--void-card-accent) 13%, transparent);
}
.void-emoji-socket img { width: 37px; height: 37px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--void-card-accent) 55%, transparent)); }
.void-emoji-socket i { color: #d5c1ff; font: 900 1.15rem/1 var(--font-anime); font-style: normal; }
.void-appraisal-note {
  margin-top: 17px;
  padding: 17px;
  border: 1px solid rgb(192 153 255 / .13);
  border-radius: 14px;
  background: rgb(255 255 255 / .018);
  box-shadow: inset 2px 0 color-mix(in srgb, var(--void-card-accent) 72%, #9b66ff);
}
.void-appraisal-note span { color: #9477c5; font: 850 .37rem/1 var(--font-anime); letter-spacing: .14em; }
.void-appraisal-note strong { display: block; margin-top: 9px; font: 900 .62rem/1.2 var(--font-anime); }
.void-appraisal-note p { margin: 9px 0 0; color: #7f768c; font-size: .51rem; line-height: 1.5; }
.void-servant-identity,
.void-signal-pair,
.void-servant-transit,
.void-loot-forecast > header,
.void-loot-tier-grid,
.void-loot-footnote {
  transition: opacity .17s ease, transform .17s ease, filter .17s ease;
}
.void-relay-console.is-switching .void-servant-identity,
.void-relay-console.is-switching .void-signal-pair {
  opacity: 0;
  transform: translateX(-10px);
  filter: blur(3px);
}
.void-relay-console.is-switching .void-servant-transit {
  opacity: .12;
  transform: scale(.88);
  filter: blur(7px) drop-shadow(0 28px 32px rgb(0 0 0 / .6));
}
.void-relay-console.is-switching .void-loot-forecast > header,
.void-relay-console.is-switching .void-loot-tier-grid,
.void-relay-console.is-switching .void-loot-footnote {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(3px);
}

.void-transit-stage {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 624px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--void-card-accent) 23%, transparent), transparent 30%),
    radial-gradient(ellipse at center, rgb(var(--void-blue) / .08), transparent 62%);
}
.void-transit-stage::before,
.void-transit-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}
.void-transit-stage::before {
  width: min(88%, 480px);
  aspect-ratio: 1;
  border: 1px dashed rgb(203 173 255 / .15);
  animation: void-spin 30s linear infinite;
}
.void-transit-stage::after {
  width: min(67%, 360px);
  aspect-ratio: 1;
  border: 1px solid rgb(96 218 255 / .13);
  box-shadow: 0 0 70px rgb(var(--void-violet) / .09);
}
.void-transit-grid {
  position: absolute;
  z-index: 0;
  inset: 46% -12% -22%;
  opacity: .22;
  background-image:
    linear-gradient(rgb(165 120 255 / .25) 1px, transparent 1px),
    linear-gradient(90deg, rgb(165 120 255 / .25) 1px, transparent 1px);
  background-size: 38px 27px;
  transform: perspective(360px) rotateX(61deg);
  transform-origin: center top;
  mask-image: linear-gradient(black, transparent 88%);
}
.void-conduit {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 44%;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--void-card-accent) 78%, #9c62ff), #8be9ff, transparent);
  background-size: 190% 100%;
  filter: drop-shadow(0 0 7px rgb(var(--void-violet) / .7));
  animation: void-conduit-flow 2.2s linear infinite;
}
.void-conduit::before,
.void-conduit::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d8c4ff;
  box-shadow: 0 0 12px 3px rgb(var(--void-violet) / .55);
}
.void-conduit-left { left: 0; }
.void-conduit-left::before { left: 15%; }
.void-conduit-left::after { left: 73%; }
.void-conduit-right { right: 0; rotate: 180deg; }
.void-conduit-right::before { left: 22%; }
.void-conduit-right::after { left: 82%; }
@keyframes void-conduit-flow { to { background-position: 190% 0; } }
.void-gate {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: min(78%, 420px);
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(2 1 6 / .9) 0 27%, color-mix(in srgb, var(--void-card-accent) 12%, transparent) 42%, transparent 68%);
  filter: drop-shadow(0 0 35px color-mix(in srgb, var(--void-card-accent) 28%, transparent));
}
.void-gate > i {
  position: absolute;
  inset: 4%;
  border: 1px solid rgb(206 177 255 / .27);
  border-radius: 50%;
  background: repeating-conic-gradient(from 15deg, transparent 0 11deg, rgb(209 178 255 / .22) 12deg 13deg, transparent 14deg 24deg);
  mask-image: radial-gradient(circle, transparent 0 75%, black 76% 79%, transparent 80%);
  animation: void-spin 19s linear infinite;
}
.void-gate > i:nth-child(2) { inset: 13%; border-color: rgb(98 221 255 / .22); animation-duration: 12s; animation-direction: reverse; }
.void-gate > i:nth-child(3) { inset: 23%; border-style: dashed; animation-duration: 8s; }
.void-gate > i:nth-child(4) { inset: 31%; border-color: color-mix(in srgb, var(--void-card-accent) 62%, transparent); box-shadow: inset 0 0 24px color-mix(in srgb, var(--void-card-accent) 14%, transparent); animation-duration: 5s; animation-direction: reverse; }
.void-gate > span {
  width: 36%;
  aspect-ratio: 1;
  border: 1px solid rgb(221 201 255 / .35);
  border-radius: 50%;
  background: radial-gradient(circle at 43% 38%, color-mix(in srgb, var(--void-card-accent) 35%, #171028) 0 5%, #090510 32%, #010103 72%);
  box-shadow: inset 0 0 30px #000, 0 0 30px color-mix(in srgb, var(--void-card-accent) 34%, transparent), 0 0 90px rgb(var(--void-violet) / .17);
  animation: void-gate-breathe 3s ease-in-out infinite;
}
@keyframes void-gate-breathe { 0%, 100% { scale: .9; filter: brightness(.76); } 50% { scale: 1.08; filter: brightness(1.32); } }
.void-servant-transit {
  position: relative;
  z-index: 5;
  width: clamp(220px, 22vw, 278px);
  margin: -5px 0 0;
  animation: void-servant-float 6s ease-in-out infinite;
  filter: drop-shadow(0 28px 32px rgb(0 0 0 / .6));
}
.void-servant-transit::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 1% 0;
  border: 1px solid color-mix(in srgb, var(--void-card-accent) 45%, transparent);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--void-card-accent) 12%, transparent);
  pointer-events: none;
}
.void-servant-transit::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 3%;
  right: 3%;
  top: 3%;
  height: 18%;
  opacity: .55;
  background: linear-gradient(transparent, rgb(151 226 255 / .21), transparent);
  filter: blur(2px);
  animation: void-card-scan 4.8s ease-in-out infinite;
  pointer-events: none;
}
.void-card-tuning {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  padding: 10px 13px;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  border: 1px solid rgb(188 153 255 / .25);
  border-radius: 999px;
  color: #d8c5f5;
  background: rgb(5 3 14 / .88);
  box-shadow: 0 13px 32px rgb(0 0 0 / .48), 0 0 24px color-mix(in srgb, var(--void-card-accent) 16%, transparent);
  font: 900 .32rem/1 var(--font-anime);
  letter-spacing: .1em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s ease;
}
.void-card-tuning > i {
  width: 9px;
  aspect-ratio: 1;
  border: 1px solid rgb(214 193 255 / .25);
  border-top-color: #bfeeff;
  border-radius: 50%;
  animation: void-spin .8s linear infinite;
}
.void-relay-console.is-servant-loading .void-card-tuning { opacity: 1; }
.void-servant-transit > img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.92) contrast(1.04) drop-shadow(0 0 16px color-mix(in srgb, var(--void-card-accent) 23%, transparent));
  transition: opacity .25s ease, filter .25s ease;
}
.void-relay-console.is-servant-loading .void-servant-transit > img {
  opacity: .22;
  filter: saturate(.4) blur(6px) drop-shadow(0 0 16px color-mix(in srgb, var(--void-card-accent) 16%, transparent));
}
.void-servant-transit.is-tuned::before { animation: void-card-lock .65s ease-out; }
.void-servant-transit figcaption {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: -27px;
  min-width: 148px;
  padding: 8px 12px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgb(200 172 255 / .23);
  border-radius: 999px;
  background: rgb(5 3 13 / .9);
  box-shadow: 0 8px 28px rgb(0 0 0 / .42);
  white-space: nowrap;
}
.void-servant-transit figcaption span { color: #8e7ca5; font: 850 .32rem/1 var(--font-anime); letter-spacing: .14em; }
.void-servant-transit figcaption strong { color: #e2d3ff; font: 900 .48rem/1 var(--font-anime); letter-spacing: .08em; }
.void-card-aura {
  position: absolute;
  z-index: -1;
  inset: 8% -12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--void-card-accent) 29%, transparent), transparent 68%);
  filter: blur(18px);
  animation: void-aura-pulse 3s ease-in-out infinite;
}
@keyframes void-servant-float {
  0%, 100% { translate: 0 8px; rotate: -1.2deg; }
  50% { translate: 0 -10px; rotate: 1.2deg; }
}
@keyframes void-card-scan { 0%, 100% { top: 1%; opacity: 0; } 12% { opacity: .65; } 72% { top: 82%; opacity: .42; } 82% { opacity: 0; } }
@keyframes void-aura-pulse { 0%, 100% { opacity: .45; scale: .9; } 50% { opacity: 1; scale: 1.08; } }
@keyframes void-card-lock {
  0% { opacity: 1; box-shadow: inset 0 0 22px color-mix(in srgb, var(--void-card-accent) 12%, transparent), 0 0 0 0 color-mix(in srgb, var(--void-card-accent) 65%, transparent); }
  100% { opacity: .72; box-shadow: inset 0 0 22px color-mix(in srgb, var(--void-card-accent) 12%, transparent), 0 0 0 18px transparent; }
}
.void-transit-status {
  position: absolute;
  z-index: 7;
  left: 18px;
  right: 18px;
  bottom: 20px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgb(182 148 255 / .13);
  border-radius: 11px;
  background: rgb(4 3 11 / .72);
  backdrop-filter: blur(9px);
}
.void-transit-status span,
.void-transit-status b { font: 850 .34rem/1 var(--font-anime); letter-spacing: .11em; }
.void-transit-status span { color: #8cffbc; }
.void-transit-status span i { width: 5px; aspect-ratio: 1; display: inline-block; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.void-transit-status span em { font-style: normal; }
.void-transit-status b { color: #817491; text-align: right; }

.void-route-intro {
  margin: 29px 0 20px;
  color: #91889e;
  font-size: .61rem;
  line-height: 1.55;
}
.void-route-card {
  position: relative;
  min-height: 126px;
  padding: 18px 15px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgb(118 219 255 / .16);
  border-radius: 16px;
  background: linear-gradient(120deg, rgb(var(--void-blue) / .08), rgb(5 10 19 / .78));
  box-shadow: 0 14px 30px rgb(0 0 0 / .2);
  transition: border-color .25s ease, translate .25s ease, box-shadow .25s ease;
}
.void-route-card + .void-route-card { margin-top: 11px; }
.void-route-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #61d7ff;
  box-shadow: 0 0 16px #61d7ff;
}
.void-route-card:hover {
  translate: -4px 0;
  border-color: rgb(118 219 255 / .42);
  box-shadow: 0 14px 30px rgb(0 0 0 / .25), 0 0 27px rgb(var(--void-blue) / .1);
}
.void-route-market { border-color: rgb(184 138 255 / .16); background: linear-gradient(120deg, rgb(var(--void-violet) / .09), rgb(11 7 22 / .78)); }
.void-route-market::after { background: #a979ff; box-shadow: 0 0 16px #a979ff; }
.void-route-icon {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgb(106 221 255 / .28);
  border-radius: 13px;
  color: #a9edff;
  background: rgb(var(--void-blue) / .08);
  font: 900 1.05rem/1 var(--font-anime);
}
.void-route-market .void-route-icon { border-color: rgb(186 139 255 / .27); color: #d3baff; background: rgb(var(--void-violet) / .08); }
.void-route-card div { min-width: 0; }
.void-route-card small { color: #5f89a1; font: 850 .34rem/1 var(--font-anime); letter-spacing: .14em; }
.void-route-market small { color: #8970ac; }
.void-route-card strong { display: block; margin-top: 7px; font: 950 .72rem/1 var(--font-anime); }
.void-route-card p { margin: 8px 0 0; color: #71818f; font-size: .49rem; line-height: 1.45; }
.void-route-card > b {
  position: absolute;
  right: 13px;
  top: 13px;
  color: #76ddff;
  font: 900 .31rem/1 var(--font-anime);
  letter-spacing: .12em;
}
.void-route-market > b { color: #b995ff; }

.void-loot-forecast {
  position: relative;
  z-index: 4;
  padding: 27px;
  overflow: hidden;
  border-top: 1px solid rgb(255 255 255 / .09);
  background:
    linear-gradient(90deg, rgb(var(--void-violet) / .075), transparent 33%, transparent 67%, rgb(var(--void-blue) / .065)),
    rgb(3 3 11 / .72);
}
.void-loot-forecast::before {
  content: "";
  position: absolute;
  left: -35%;
  top: 0;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d8bfff, #78e4ff, transparent);
  box-shadow: 0 0 17px rgb(159 121 255 / .78);
  animation: void-loot-scan 7s linear infinite;
}
@keyframes void-loot-scan { to { left: 100%; } }
.void-loot-forecast > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 450px);
  align-items: end;
  gap: 24px;
}
.void-loot-forecast > header span {
  color: #a888d8;
  font: 900 .42rem/1 var(--font-anime);
  letter-spacing: .16em;
}
.void-loot-forecast > header h3 {
  margin: 10px 0 0;
  color: #f7f2ff;
  font: 950 clamp(1.15rem, 2.2vw, 1.75rem)/1 var(--font-anime);
  letter-spacing: -.035em;
}
.void-loot-forecast > header p {
  max-width: 450px;
  margin: 0;
  justify-self: end;
  color: #867c92;
  font-size: .58rem;
  line-height: 1.55;
}
.void-loot-tier-grid {
  margin-top: 21px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 11px;
}
.void-loot-tier {
  position: relative;
  min-width: 0;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgb(190 151 255 / .16);
  border-radius: 16px;
  background: linear-gradient(135deg, rgb(var(--void-violet) / .075), rgb(6 5 16 / .82));
  box-shadow: inset 0 0 24px rgb(255 255 255 / .018), 0 13px 30px rgb(0 0 0 / .18);
}
.void-loot-tier::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  opacity: .6;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--void-card-accent) 72%, #a978ff), transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--void-card-accent) 35%, transparent);
}
.void-loot-tier.is-guaranteed {
  border-color: rgb(118 255 190 / .2);
  background: linear-gradient(135deg, rgb(54 189 126 / .075), rgb(6 11 15 / .84));
}
.void-loot-tier.is-guaranteed::after { background: linear-gradient(90deg, transparent, #71ffbd, transparent); box-shadow: 0 0 12px rgb(113 255 189 / .35); }
.void-loot-tier > header {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.void-loot-tier-icon,
.void-loot-item-icon {
  display: grid;
  place-items: center;
  border: 1px solid rgb(190 151 255 / .22);
  background: radial-gradient(circle, color-mix(in srgb, var(--void-card-accent) 14%, transparent), rgb(5 4 13 / .74));
}
.void-loot-tier-icon {
  width: 39px;
  aspect-ratio: 1;
  border-radius: 11px;
}
.void-loot-tier-icon img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 7px rgb(176 137 255 / .42)); }
.void-loot-tier-icon i { color: #d8c4ff; font: 900 .9rem/1 var(--font-anime); font-style: normal; }
.void-loot-tier > header div { min-width: 0; }
.void-loot-tier > header small {
  display: block;
  color: #77688c;
  font: 850 .3rem/1 var(--font-anime);
  letter-spacing: .13em;
}
.void-loot-tier > header strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #f0e8ff;
  font: 900 .56rem/1.1 var(--font-anime);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.void-loot-tier > header > b {
  padding: 7px 8px;
  border: 1px solid rgb(180 143 255 / .18);
  border-radius: 999px;
  color: #cbb2f6;
  background: rgb(160 112 255 / .07);
  font: 900 .31rem/1 var(--font-anime);
  letter-spacing: .06em;
  white-space: nowrap;
}
.void-loot-tier.is-guaranteed > header > b { border-color: rgb(112 255 187 / .2); color: #8effc4; background: rgb(68 206 138 / .07); }
.void-loot-items {
  margin-top: 13px;
  padding-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid rgb(255 255 255 / .055);
}
.void-loot-item {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgb(255 255 255 / .055);
  border-radius: 10px;
  background: rgb(255 255 255 / .018);
}
.void-loot-item-icon {
  width: 34px;
  aspect-ratio: 1;
  border-radius: 9px;
}
.void-loot-item-icon img { width: 25px; height: 25px; object-fit: contain; filter: drop-shadow(0 0 6px rgb(159 113 255 / .35)); }
.void-loot-item-icon em { color: #cfb7f8; font: 900 .75rem/1 var(--font-anime); font-style: normal; }
.void-loot-item > span { min-width: 0; }
.void-loot-item strong { display: block; color: #eefaff; font: 900 .52rem/1 var(--font-anime); }
.void-loot-item small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #756e80;
  font-size: .38rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.void-loot-footnote {
  display: block;
  margin-top: 14px;
  color: #645c70;
  font-size: .42rem;
  line-height: 1.45;
}
.void-theater {
  position: relative;
  min-height: 635px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 164px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgb(202 181 255 / .3);
  border-radius: 30px;
  background: rgb(4 3 13 / .82);
  box-shadow: 0 42px 110px rgb(0 0 0 / .52), inset 0 0 0 5px rgb(255 255 255 / .018), 0 0 90px rgb(var(--void-violet) / .1);
  isolation: isolate;
}
.void-theater::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 11px;
  border: 1px solid rgb(255 255 255 / .055);
  border-radius: 21px;
  pointer-events: none;
}
.void-offering-panel,
.void-return-panel { position: relative; z-index: 1; min-width: 0; }
.void-offering-panel { background: radial-gradient(circle at 100% 48%, rgb(var(--void-violet) / .2), transparent 48%), linear-gradient(135deg, rgb(29 12 55 / .38), transparent 64%); }
.void-return-panel { background: radial-gradient(circle at 0 48%, rgb(var(--void-blue) / .17), transparent 48%), linear-gradient(225deg, rgb(9 30 51 / .42), transparent 65%); }
.void-offering-panel > header,
.void-return-panel > header {
  min-height: 71px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgb(255 255 255 / .09);
  background: rgb(255 255 255 / .018);
}
.void-offering-panel > header span,
.void-return-panel > header span,
.void-offering-panel > header b,
.void-return-panel > header b {
  font-family: var(--font-anime);
  font-weight: 900;
  letter-spacing: .12em;
}
.void-offering-panel > header span,
.void-return-panel > header span { color: #bba6d9; font-size: .5rem; }
.void-offering-panel > header span i,
.void-return-panel > header span i { width: 7px; aspect-ratio: 1; display: inline-block; margin-right: 7px; border-radius: 50%; background: #aa7aff; box-shadow: 0 0 11px #aa7aff; }
.void-return-panel > header span i { background: #67ddff; box-shadow: 0 0 11px #67ddff; }
.void-offering-panel > header b,
.void-return-panel > header b { color: #8effbd; font-size: .43rem; white-space: nowrap; }
.void-offering-stage,
.void-return-stage { position: relative; min-height: 563px; }

.void-factor-stack { position: absolute; z-index: 4; left: 26px; top: 42px; width: 170px; display: grid; gap: 9px; }
.void-factor-stack > div {
  position: relative;
  min-height: 72px;
  padding: 13px 14px;
  overflow: hidden;
  border: 1px solid rgb(183 145 255 / .18);
  border-radius: 11px;
  background: linear-gradient(110deg, rgb(var(--void-violet) / .09), rgb(9 7 20 / .76));
  box-shadow: 0 9px 24px rgb(0 0 0 / .2);
  animation: void-factor-scan 8s ease-in-out infinite;
  animation-delay: var(--factor-delay);
}
.void-factor-stack small { display: block; color: #75698c; font: 850 .42rem/1 var(--font-anime); letter-spacing: .13em; }
.void-factor-stack strong { display: block; margin-top: 9px; color: #e2d5ff; font: 950 1rem/1 var(--font-anime); }
.void-factor-stack i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #a579ff, transparent); transform: translateX(-100%); }
@keyframes void-factor-scan {
  0%, 20%, 100% { border-color: rgb(183 145 255 / .16); }
  27%, 38% { border-color: rgb(183 145 255 / .52); box-shadow: 0 9px 24px rgb(0 0 0 / .2), 0 0 18px rgb(var(--void-violet) / .12); }
  27% { background-color: rgb(var(--void-violet) / .08); }
}
.void-factor-stack > div:nth-child(1) i { animation: void-factor-line 8s ease-in-out infinite; }
.void-factor-stack > div:nth-child(2) i { animation: void-factor-line 8s .35s ease-in-out infinite; }
.void-factor-stack > div:nth-child(3) i { animation: void-factor-line 8s .7s ease-in-out infinite; }
@keyframes void-factor-line { 0%, 18%, 42%, 100% { transform: translateX(-100%); } 27%, 34% { transform: translateX(100%); } }

.void-card {
  position: absolute;
  z-index: 6;
  width: 184px;
  aspect-ratio: 3 / 4;
  padding: 8px;
  overflow: hidden;
  border: 2px solid #b694ff;
  color: white;
  background: linear-gradient(145deg, #281747, #0a0715 68%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 24px 42px rgb(0 0 0 / .5), 0 0 27px rgb(var(--void-violet) / .3);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  transform-style: preserve-3d;
}
.void-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 5px;
  border: 1px solid rgb(219 201 255 / .3);
  clip-path: inherit;
  pointer-events: none;
}
.void-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -40% -80%;
  background: linear-gradient(105deg, transparent 43%, rgb(255 255 255 / .22) 48%, transparent 53%);
  transform: translateX(-55%) rotate(8deg);
  animation: void-card-glint 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes void-card-glint { 0%, 60% { transform: translateX(-55%) rotate(8deg); } 90%, 100% { transform: translateX(55%) rotate(8deg); } }
.void-card-art {
  position: relative;
  height: calc(100% - 60px);
  overflow: hidden;
  border: 1px solid rgb(203 178 255 / .25);
  background: radial-gradient(circle at 50% 42%, rgb(100 209 255 / .22), transparent 43%), radial-gradient(circle at center, #281d48, #080612 72%);
}
.void-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(8 4 18 / .88)); pointer-events: none; }
.void-card-art img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 13px 14px rgb(0 0 0 / .46)) saturate(.85) hue-rotate(8deg); transform: scale(1.12); transform-origin: center bottom; }
.void-card-rarity { position: absolute; z-index: 8; left: 14px; top: 14px; width: 37px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #ff87d6; border-radius: 50%; color: #ffd6f2; background: #56133e; box-shadow: 0 0 14px rgb(var(--void-pink) / .48); font: 950 .7rem/1 var(--font-anime); }
.void-card-copy { position: relative; height: 60px; padding: 8px 6px 0; }
.void-card-copy small { display: block; color: #9f83c6; font: 850 .38rem/1 var(--font-anime); letter-spacing: .12em; }
.void-card-copy strong { display: block; margin-top: 4px; font: 950 .76rem/1 var(--font-anime); letter-spacing: .06em; }
.void-card-copy span { position: absolute; right: 5px; bottom: 5px; color: #81e5ff; font: 850 .33rem/1 var(--font-anime); letter-spacing: .08em; }
.void-card-offering {
  --void-consume-x: 142px;
  --void-consume-y: 4px;
  right: 28px;
  top: 60px;
  rotate: -3deg;
  animation: void-card-surrender 8s cubic-bezier(.55, .05, .25, 1) infinite;
}
@keyframes void-card-surrender {
  0%, 8% { opacity: 0; transform: translate(-42px, 8px) scale(.86); filter: blur(2px); }
  16%, 38% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
  51% { opacity: 0; transform: translate(var(--void-consume-x), var(--void-consume-y)) rotate(28deg) scale(.08); filter: blur(7px) brightness(2); }
  52%, 78% { opacity: 0; transform: translate(var(--void-consume-x), var(--void-consume-y)) rotate(28deg) scale(.08); }
  86% { opacity: 0; transform: translate(-42px, 8px) scale(.86); }
  94%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
.void-reward-readout {
  position: absolute;
  z-index: 4;
  left: 26px;
  right: 26px;
  bottom: 24px;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid rgb(168 121 255 / .28);
  border-radius: 13px;
  background: linear-gradient(105deg, rgb(var(--void-violet) / .11), rgb(8 7 18 / .84));
  animation: void-reward-lock 8s ease-in-out infinite;
}
.void-reward-readout > span { color: #9c7bc9; font: 850 .44rem/1 var(--font-anime); letter-spacing: .14em; }
.void-reward-readout strong { display: block; margin-top: 9px; color: #d8c2ff; font: 950 .72rem/1 var(--font-anime); letter-spacing: .06em; }
.void-reward-readout small { display: block; margin-top: 9px; color: #827793; font-size: .54rem; line-height: 1.35; }
@keyframes void-reward-lock {
  0%, 42%, 100% { border-color: rgb(168 121 255 / .22); box-shadow: none; }
  52%, 72% { border-color: rgb(168 121 255 / .62); box-shadow: inset 3px 0 #a56fff, 0 0 28px rgb(var(--void-violet) / .17); }
}

.void-singularity { position: relative; z-index: 9; min-width: 0; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, rgb(var(--void-violet) / .12), transparent 66%); }
.void-singularity::before,
.void-singularity::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.void-singularity::before { width: 135px; aspect-ratio: 1; background: repeating-conic-gradient(from 9deg, transparent 0 8deg, rgb(192 151 255 / .2) 9deg 10deg, transparent 11deg 18deg); mask-image: radial-gradient(circle, transparent 0 48%, black 50% 66%, transparent 69%); animation: void-spin 16s linear infinite; }
.void-singularity::after { width: 92px; aspect-ratio: 1; background: conic-gradient(from 130deg, transparent, rgb(var(--void-blue) / .6), transparent 34%, rgb(var(--void-pink) / .38), transparent 66%); filter: blur(6px); animation: void-spin-reverse 6s linear infinite; }
.void-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgb(193 165 255 / .24); border-radius: 50%; translate: -50% -50%; animation: void-spin 10s linear infinite; }
.void-orbit i { position: absolute; left: 50%; top: -3px; width: 6px; aspect-ratio: 1; border-radius: 50%; background: #d5baff; box-shadow: 0 0 12px 3px rgb(var(--void-violet) / .6); }
.void-orbit-one { width: 128px; height: 90px; rotate: 24deg; }
.void-orbit-two { width: 108px; height: 142px; rotate: -31deg; animation-duration: 7s; animation-direction: reverse; }
.void-orbit-two i { background: #75ddff; box-shadow: 0 0 12px 3px rgb(var(--void-blue) / .6); }
.void-orbit-three { width: 148px; height: 148px; border-style: dashed; opacity: .55; animation-duration: 19s; }
.void-core { position: relative; z-index: 2; width: 65px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgb(216 194 255 / .45); border-radius: 50%; background: radial-gradient(circle at 42% 38%, #4c2c7f 0 4%, #0c0718 35%, #010104 72%); box-shadow: inset 0 0 19px #000, 0 0 25px rgb(var(--void-violet) / .44), 0 0 70px rgb(var(--void-violet) / .24); animation: void-core-pulse 2.4s ease-in-out infinite; }
.void-core i { position: absolute; left: 50%; top: 50%; width: 76px; height: 14px; border-top: 2px solid rgb(162 111 255 / .42); border-radius: 50%; translate: -50% -50%; animation: void-spin 2.8s linear infinite; }
.void-core i:nth-child(2) { width: 62px; rotate: 60deg; animation-duration: 2.1s; animation-direction: reverse; }
.void-core i:nth-child(3) { width: 50px; rotate: -60deg; animation-duration: 1.6s; }
.void-singularity > small { position: absolute; left: 50%; top: calc(50% + 91px); translate: -50% 0; color: #9d80c8; font: 900 .39rem/1 var(--font-anime); letter-spacing: .2em; white-space: nowrap; }
@keyframes void-spin { to { transform: rotate(360deg); } }
@keyframes void-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes void-core-pulse { 0%, 100% { scale: .92; filter: brightness(.8); } 50% { scale: 1.08; filter: brightness(1.4); } }

.void-return-beam { position: absolute; z-index: 2; left: 2px; top: 58px; width: 265px; height: 360px; opacity: 0; background: linear-gradient(90deg, rgb(var(--void-blue) / .36), transparent 72%); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); filter: blur(8px); animation: void-return-beam 8s ease-in-out infinite; }
@keyframes void-return-beam { 0%, 45%, 78%, 100% { opacity: 0; } 51%, 61% { opacity: .8; } }
.void-card-returned {
  --void-return-x: -142px;
  --void-return-y: 3px;
  left: 27px;
  top: 59px;
  rotate: 3deg;
  border-color: #83dcff;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .08), 0 24px 42px rgb(0 0 0 / .5), 0 0 27px rgb(var(--void-blue) / .3);
  animation: void-card-return 8s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes void-card-return {
  0%, 46% { opacity: 0; transform: translate(var(--void-return-x), var(--void-return-y)) rotate(-24deg) scale(.08); filter: blur(7px) brightness(2); }
  58% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.05); filter: blur(0) brightness(1.35); }
  65%, 88% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: brightness(1); }
  98%, 100% { opacity: 0; transform: translate(20px, -5px) rotate(3deg) scale(.95); }
}
.void-roll-feed { position: absolute; z-index: 5; right: 19px; top: 38px; width: min(248px, 48%); display: grid; gap: 8px; }
.void-roll-event {
  min-width: 0;
  min-height: 73px;
  padding: 11px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgb(126 219 255 / .14);
  border-radius: 12px;
  background: rgb(5 12 24 / .76);
  box-shadow: 0 10px 24px rgb(0 0 0 / .24);
}
.void-roll-event > span { width: 36px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(121 223 255 / .32); border-radius: 50%; color: #b8efff; background: rgb(var(--void-blue) / .09); font: 900 .48rem/1 var(--font-anime); }
.void-roll-event p { min-width: 0; margin: 0; }
.void-roll-event strong,
.void-roll-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.void-roll-event strong { font: 850 .51rem/1.2 var(--font-anime); }
.void-roll-event small { margin-top: 6px; color: #718296; font-size: .44rem; }
.void-roll-event > b { color: #77dbff; font: 950 .54rem/1 var(--font-anime); }
.void-roll-event-primary { border-color: rgb(126 219 255 / .42); background: linear-gradient(105deg, rgb(var(--void-blue) / .12), rgb(5 12 24 / .82)); animation: void-roll-alert 8s ease-in-out infinite; }
@keyframes void-roll-alert { 0%, 47%, 100% { box-shadow: 0 10px 24px rgb(0 0 0 / .24); } 58%, 76% { box-shadow: 0 10px 24px rgb(0 0 0 / .24), 0 0 24px rgb(var(--void-blue) / .18); border-color: rgb(126 219 255 / .7); } }
.void-market-ticket {
  position: absolute;
  z-index: 5;
  left: 25px;
  right: 19px;
  bottom: 24px;
  min-height: 122px;
  padding: 17px 19px;
  border: 1px solid rgb(115 217 255 / .24);
  border-radius: 13px;
  background: linear-gradient(105deg, rgb(8 29 45 / .88), rgb(7 8 19 / .9));
  box-shadow: inset 3px 0 #53cfff, 0 14px 30px rgb(0 0 0 / .28);
}
.void-market-ticket > span { color: #74cce9; font: 850 .42rem/1 var(--font-anime); letter-spacing: .14em; }
.void-market-ticket > strong { display: block; margin-top: 9px; font: 950 .72rem/1.15 var(--font-anime); }
.void-market-ticket > small { display: block; max-width: 74%; margin-top: 8px; color: #7d8e9f; font-size: .51rem; line-height: 1.4; }
.void-market-ticket > b { position: absolute; right: 16px; bottom: 15px; color: #92ffc0; font: 900 .4rem/1 var(--font-anime); letter-spacing: .1em; }
.void-market-ticket > b i { width: 6px; aspect-ratio: 1; display: inline-block; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }

@media (max-width: 1220px) {
  .void-relay-grid { grid-template-columns: minmax(220px, .7fr) minmax(330px, 1.1fr) minmax(230px, .76fr); }
  .void-manifest-panel,
  .void-route-panel { padding-inline: 21px; }
  .void-servant-transit { width: clamp(210px, 22vw, 250px); }
  .void-theater { grid-template-columns: minmax(0, 1fr) 126px minmax(0, 1fr); }
  .void-card { width: 156px; }
  .void-factor-stack { width: 145px; }
  .void-roll-feed { width: min(220px, 48%); }
}

@media (max-width: 980px) {
  .void-world-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .void-world-map > a:nth-child(3) { border-right: 1px solid rgb(255 255 255 / .12); }
  .void-world-map > a:nth-child(even),
  .void-world-map > a:last-child { border-right: 0; }
  .void-system-heading { grid-template-columns: 1fr; align-items: start; }
  .void-system-heading > div:last-child > p { max-width: 730px; }
  .void-relay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "manifest routes"
      "transit transit";
  }
  .void-manifest-panel { grid-area: manifest; border-right: 1px solid rgb(255 255 255 / .075); border-bottom: 1px solid rgb(255 255 255 / .075); }
  .void-route-panel { grid-area: routes; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / .075); }
  .void-transit-stage { grid-area: transit; min-height: 610px; }
  .void-servant-identity h3 { max-width: 18ch; }
  .void-appraisal-note { min-height: 119px; }
  .void-theater { grid-template-columns: 1fr; }
  .void-singularity { min-height: 172px; border-block: 1px solid rgb(255 255 255 / .08); }
  .void-offering-stage,
  .void-return-stage { min-height: 540px; }
  .void-card { width: 184px; }
  .void-card-offering { --void-consume-x: 0px; --void-consume-y: 275px; right: calc(50% - 92px); }
  .void-card-returned { --void-return-x: 0px; --void-return-y: -250px; left: calc(50% - 92px); }
  .void-factor-stack { width: 180px; }
  .void-roll-feed { width: min(265px, 39%); }
}

@media (max-width: 720px) {
  .void-world-map { grid-template-columns: 1fr; }
  .void-world-map > a,
  .void-world-map > a:nth-child(3) { border-right: 0; }
  .void-system-section { padding: 100px 0 90px; }
  .void-system-heading h2 { font-size: clamp(3.7rem, 17vw, 5.5rem); }
  .void-relay-console { border-radius: 22px; }
  .void-relay-console::after { border-radius: 14px; }
  .void-console-topline { min-height: 68px; padding: 14px 18px; flex-wrap: wrap; }
  .void-console-topline b { width: 100%; }
  .void-servant-switcher { grid-template-columns: 42px minmax(0, 1fr); }
  .void-servant-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(132px, 1fr));
    border-right: 0;
    scrollbar-width: thin;
    scrollbar-color: rgb(163 127 220 / .25) transparent;
  }
  .void-cycle-arrow { min-width: 42px; }
  .void-cycle-controls {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 44px;
    grid-template-columns: 1fr 46px 66px;
    border-top: 1px solid rgb(255 255 255 / .055);
  }
  .void-cycle-controls output { justify-content: start; padding-left: 17px; }
  .void-relay-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "manifest"
      "transit"
      "routes";
  }
  .void-manifest-panel,
  .void-route-panel { padding: 27px 20px 25px; border-inline: 0; }
  .void-manifest-panel { border-bottom: 1px solid rgb(255 255 255 / .075); }
  .void-route-panel { border-top: 1px solid rgb(255 255 255 / .075); border-bottom: 0; }
  .void-servant-identity h3 { max-width: 14ch; }
  .void-transit-stage { min-height: 570px; }
  .void-servant-transit { width: min(67vw, 255px); }
  .void-route-card:hover { translate: 0 -3px; }
  .void-loot-forecast { padding: 25px 20px; }
  .void-loot-forecast > header { grid-template-columns: 1fr; align-items: start; gap: 12px; }
  .void-loot-forecast > header p { justify-self: start; }
  .void-theater { border-radius: 22px; }
  .void-offering-panel > header,
  .void-return-panel > header { padding-inline: 17px; }
  .void-offering-panel > header b,
  .void-return-panel > header b { display: none; }
  .void-offering-stage { min-height: 640px; }
  .void-return-stage { min-height: 730px; }
  .void-factor-stack { left: 14px; right: 14px; top: 18px; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .void-factor-stack > div { min-width: 0; min-height: 68px; padding: 12px 9px; text-align: center; }
  .void-factor-stack small { overflow: hidden; font-size: .34rem; text-overflow: ellipsis; white-space: nowrap; }
  .void-factor-stack strong { font-size: .74rem; }
  .void-card-offering { top: 124px; right: calc(50% - 92px); }
  .void-reward-readout { left: 14px; right: 14px; bottom: 17px; }
  .void-card-returned { top: 50px; left: calc(50% - 92px); }
  .void-roll-feed { left: 14px; right: 14px; top: 330px; width: auto; }
  .void-market-ticket { left: 14px; right: 14px; bottom: 17px; }
  .void-market-ticket > small { max-width: 100%; padding-right: 0; }
  .void-market-ticket > b { position: static; display: block; margin-top: 12px; }
}

@media (max-width: 440px) {
  .void-signal-pair { gap: 7px; }
  .void-signal-chip { min-height: 102px; padding: 12px; }
  .void-emoji-socket { width: 46px; }
  .void-emoji-socket img { width: 33px; height: 33px; }
  .void-transit-stage { min-height: 510px; }
  .void-servant-transit { width: min(69vw, 224px); }
  .void-transit-status b { display: none; }
  .void-route-card { grid-template-columns: 40px minmax(0, 1fr); padding-inline: 13px; }
  .void-route-icon { width: 39px; }
  .void-servant-tabs { grid-template-columns: repeat(4, minmax(118px, 1fr)); }
  .void-servant-tab { padding-inline: 10px; }
  .void-loot-items { grid-template-columns: 1fr; }
  .void-loot-tier > header { grid-template-columns: 39px minmax(0, 1fr); }
  .void-loot-tier > header > b { grid-column: 2; width: fit-content; }
  .void-card { width: 164px; }
  .void-card-offering { right: calc(50% - 82px); }
  .void-card-returned { left: calc(50% - 82px); }
}

@media (prefers-reduced-motion: reduce) {
  .void-console-topline span i,
  .void-signal-chip::after,
  .void-transit-stage::before,
  .void-conduit,
  .void-gate > i,
  .void-gate > span,
  .void-servant-transit,
  .void-servant-transit::after,
  .void-card-aura,
  .void-loot-forecast::before,
  .void-servant-tab.is-active > i,
  .void-card-tuning > i,
  .void-servant-transit.is-tuned::before { animation: none !important; }
  .void-servant-tab.is-active > i { width: 100%; }
  .void-servant-identity,
  .void-signal-pair,
  .void-servant-transit,
  .void-servant-transit > img,
  .void-loot-forecast > header,
  .void-loot-tier-grid,
  .void-loot-footnote { transition: none !important; }
  .void-atmosphere i,
  .void-factor-stack > div,
  .void-factor-stack i,
  .void-card,
  .void-card::after,
  .void-singularity::before,
  .void-singularity::after,
  .void-orbit,
  .void-core,
  .void-core i,
  .void-return-beam,
  .void-roll-event-primary,
  .void-reward-readout { animation: none !important; }
  .void-card-offering,
  .void-card-returned { opacity: 1; transform: none; filter: none; }
  .void-return-beam { opacity: .2; }
}

/* Public item archive */
.items-hero { position: relative; min-height: 690px; display: grid; align-items: center; overflow: hidden; background: radial-gradient(circle at 76% 43%, rgb(var(--accent-rgb) / .14), transparent 26rem), radial-gradient(circle at 19% 80%, rgb(137 97 255 / .11), transparent 29rem), linear-gradient(135deg, #050716, #091126 58%, #050716); }
.items-hero::before { content: "ITEMS"; position: absolute; left: -1vw; bottom: -10vw; color: rgb(255 255 255 / .018); font: 950 clamp(12rem, 30vw, 31rem)/.72 var(--font-anime); letter-spacing: -.1em; pointer-events: none; }
.items-hero-grid { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgb(174 226 255 / .25) 1px, transparent 1px), linear-gradient(90deg, rgb(174 226 255 / .25) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(90deg, black, transparent 72%); }
.items-hero-inner { position: relative; z-index: 2; min-height: 690px; padding: 125px 0 70px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .72fr); align-items: center; gap: clamp(45px, 7vw, 105px); }
.items-hero-copy > span,
.items-catalog-heading span { color: var(--accent-soft); font: 900 .57rem/1 var(--font-anime); letter-spacing: .15em; }
.items-hero h1 { margin: 18px 0 26px; font: 950 clamp(4.5rem, 8vw, 8rem)/.82 var(--font-anime); letter-spacing: -.075em; }
.items-hero h1 em,
.items-catalog-heading h2 em { color: var(--accent-soft); font-style: normal; text-shadow: 3px 4px 0 rgb(43 76 131 / .62); }
.items-hero-copy > p { max-width: 710px; margin-bottom: 28px; color: #b7c3d5; font-size: .96rem; }
.items-hero-actions { display: flex; align-items: center; gap: 14px; }
.items-hero-actions > code { padding: 10px 13px; border-radius: 10px; color: #a8b9ce; font: 750 .68rem/1 "Cascadia Code", monospace; }
.items-hero-stats { max-width: 680px; margin: 35px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgb(255 255 255 / .1); border-radius: 15px; background: rgb(3 7 18 / .48); backdrop-filter: blur(10px); }
.items-hero-stats > div { min-width: 0; padding: 15px 18px; border-right: 1px solid rgb(255 255 255 / .08); }
.items-hero-stats > div:last-child { border-right: 0; }
.items-hero-stats dt { color: #6f839f; font: 850 .43rem/1 var(--font-anime); letter-spacing: .12em; }
.items-hero-stats dd { margin: 9px 0 0; font: 950 1.25rem/1 var(--font-anime); }
.items-hero-stats dd small { margin-left: 5px; color: #7489a7; font-size: .43rem; }

.items-shop-manifest { position: relative; width: min(535px, 100%); justify-self: end; overflow: hidden; border: 1px solid rgb(var(--accent-rgb) / .2); border-radius: 22px; background: linear-gradient(155deg, rgb(13 23 48 / .94), rgb(3 7 18 / .98)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 30px 85px rgb(0 0 0 / .34); }
.items-shop-manifest::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: linear-gradient(transparent, var(--accent-soft) 28%, rgb(137 97 255) 72%, transparent); box-shadow: 0 0 18px rgb(var(--accent-rgb) / .45); }
.items-shop-manifest > header { min-height: 72px; padding: 17px 19px 17px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgb(255 255 255 / .08); background: rgb(255 255 255 / .018); }
.items-shop-manifest > header div { display: grid; gap: 7px; }
.items-shop-manifest > header span { color: #7187a4; font: 850 .39rem/1 var(--font-anime); letter-spacing: .15em; }
.items-shop-manifest > header strong { font: 950 .68rem/1 var(--font-anime); letter-spacing: .04em; }
.items-shop-manifest > header > b { display: flex; align-items: center; gap: 7px; color: #8ceac3; font: 900 .4rem/1 var(--font-anime); letter-spacing: .1em; }
.items-shop-manifest > header > b i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: #63efb2; box-shadow: 0 0 11px #63efb2; }
.items-shop-manifest-intro { padding: 18px 22px; border-bottom: 1px solid rgb(255 255 255 / .07); background: linear-gradient(90deg, rgb(var(--accent-rgb) / .055), transparent); }
.items-shop-manifest-intro > span { color: var(--accent-soft); font: 900 .42rem/1 var(--font-anime); letter-spacing: .12em; }
.items-shop-manifest-intro > p { max-width: 440px; margin: 9px 0 0; color: #8fa0b7; font-size: .58rem; line-height: 1.5; }
.items-shop-manifest-list { display: grid; }
.items-shop-manifest-list > a { min-height: 65px; padding: 10px 18px 10px 21px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 38px; align-items: center; gap: 12px; border-bottom: 1px solid rgb(255 255 255 / .065); color: inherit; transition: border-color .18s ease, background .18s ease, padding-left .18s ease; }
.items-shop-manifest-list > a:hover { padding-left: 25px; border-color: color-mix(in srgb, var(--shop), transparent 65%); background: color-mix(in srgb, var(--shop), transparent 94%); }
.items-shop-manifest-list > a > span { width: 28px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--shop), transparent 54%); border-radius: 8px; color: var(--shop); background: color-mix(in srgb, var(--shop), transparent 92%); font: 950 .4rem/1 var(--font-anime); }
.items-shop-manifest-list > a > div { min-width: 0; display: grid; gap: 5px; }
.items-shop-manifest-list > a > div b { overflow: hidden; font: 900 .58rem/1 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.items-shop-manifest-list > a > div small { overflow: hidden; color: #70849f; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.items-shop-manifest-list code { padding: 5px 7px; border-color: rgb(255 255 255 / .06); color: #71849f; background: rgb(255 255 255 / .025); font-size: .43rem; }
.items-shop-manifest-list > a > strong { color: var(--shop); font: 950 .58rem/1 var(--font-anime); text-align: right; }
.items-shop-manifest > footer { min-height: 47px; padding: 0 20px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #5f738e; background: rgb(0 0 0 / .13); font: 850 .36rem/1 var(--font-anime); letter-spacing: .1em; }
.items-shop-manifest > footer b { color: #7188a5; }

.items-catalog { position: relative; padding: 110px 0 130px; background: radial-gradient(circle at 92% 8%, rgb(var(--accent-rgb) / .08), transparent 28rem), linear-gradient(180deg, #050716, #070b18 48%, #050716); }
.items-catalog-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .5fr); align-items: end; gap: clamp(35px, 7vw, 90px); }
.items-catalog-heading h2 { margin: 14px 0 0; font: 950 clamp(3.4rem, 7vw, 6.7rem)/.86 var(--font-anime); letter-spacing: -.065em; }
.items-catalog-heading > p { max-width: 500px; margin: 0; color: #aebace; font-size: .86rem; }
.items-catalog-tools { position: sticky; z-index: 20; top: 82px; margin-top: 42px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgb(var(--accent-rgb) / .2); border-radius: 16px; background: rgb(5 9 21 / .9); box-shadow: 0 18px 40px rgb(0 0 0 / .24); backdrop-filter: blur(18px); }
.items-catalog-tools label { min-width: 0; min-height: 48px; padding: 0 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1px solid rgb(255 255 255 / .08); border-radius: 11px; background: rgb(255 255 255 / .025); }
.items-catalog-tools label > i { color: var(--accent-soft); font: 900 1.1rem/1 var(--font-anime); font-style: normal; }
.items-catalog-tools input { min-width: 0; height: 46px; border: 0; outline: 0; color: white; background: transparent; font-size: .78rem; }
.items-catalog-tools input::placeholder { color: #6f8098; }
.items-catalog-tools kbd { min-width: 25px; padding: 5px 7px; border: 1px solid rgb(255 255 255 / .1); border-radius: 6px; color: #72839b; background: rgb(255 255 255 / .03); font: 750 .55rem/1 "Cascadia Code", monospace; text-align: center; }
.items-catalog-tools output { padding: 0 13px; color: var(--accent-soft); font: 900 .54rem/1 var(--font-anime); letter-spacing: .08em; white-space: nowrap; }
.items-shop-filters { grid-column: 1 / -1; min-width: 0; padding: 10px 2px 1px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; border-top: 1px solid rgb(255 255 255 / .07); }
.items-shop-filters > span { padding-left: 9px; color: #6d819c; font: 900 .4rem/1 var(--font-anime); letter-spacing: .12em; white-space: nowrap; }
.items-shop-filters > div { min-width: 0; padding: 0 1px 2px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--accent-rgb) / .25) transparent; }
.items-shop-filters button { flex: 0 0 auto; min-height: 37px; padding: 0 8px 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgb(255 255 255 / .075); border-radius: 9px; color: #8fa0b7; background: rgb(255 255 255 / .018); font: 850 .43rem/1 var(--font-anime); cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.items-shop-filters button:hover:not(:disabled),
.items-shop-filters button.is-active { border-color: color-mix(in srgb, var(--shop), transparent 52%); color: white; background: color-mix(in srgb, var(--shop), transparent 91%); }
.items-shop-filters button.is-active { box-shadow: inset 0 -2px 0 var(--shop); }
.items-shop-filters button:disabled { opacity: .38; cursor: not-allowed; }
.items-shop-filters button b { min-width: 25px; padding: 5px 6px; border-radius: 6px; color: var(--shop); background: color-mix(in srgb, var(--shop), transparent 90%); text-align: center; }
.items-category-nav { margin-top: 13px; padding: 3px 3px 10px; display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: rgb(var(--accent-rgb) / .3) transparent; }
.items-category-nav a { flex: 0 0 auto; min-height: 40px; padding: 0 11px 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgb(255 255 255 / .08); border-radius: 999px; color: #a6b4c8; background: rgb(255 255 255 / .02); font: 800 .49rem/1 var(--font-anime); transition: border-color .18s ease, color .18s ease, background .18s ease; }
.items-category-nav a:hover { border-color: rgb(var(--accent-rgb) / .34); color: white; background: rgb(var(--accent-rgb) / .055); }
.items-category-nav b { min-width: 23px; padding: 5px 6px; border-radius: 999px; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .09); text-align: center; }
.items-category-nav a[hidden] { display: none; }
.items-search-empty { margin: 46px 0 0; padding: 55px 25px; border: 1px dashed rgb(var(--accent-rgb) / .2); border-radius: 18px; color: #8596ae; text-align: center; }
.items-search-empty[hidden],
.items-category[hidden],
.item-card[hidden] { display: none !important; }
.items-category-list { margin-top: 42px; display: grid; gap: 60px; }
.items-category { scroll-margin-top: 235px; content-visibility: auto; contain-intrinsic-size: auto 540px; }
.items-category > header { margin-bottom: 16px; padding-bottom: 16px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 15px; border-bottom: 1px solid rgb(255 255 255 / .09); }
.items-category > header > span { width: 39px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(var(--accent-rgb) / .24); border-radius: 50%; color: var(--accent-soft); background: rgb(var(--accent-rgb) / .055); font: 900 .48rem/1 var(--font-anime); }
.items-category h3 { margin: 0; font: 950 1.5rem/1 var(--font-anime); letter-spacing: -.02em; }
.items-category header p { max-width: 720px; margin: 6px 0 0; color: #7e8fa7; font-size: .6rem; }
.items-category > header > b { min-width: 42px; padding: 8px 9px; border: 1px solid rgb(255 255 255 / .08); border-radius: 9px; color: #9bacbf; background: rgb(255 255 255 / .025); font: 900 .5rem/1 var(--font-anime); text-align: center; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 9px; }
.item-card { position: relative; min-width: 0; min-height: 126px; padding: 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 13px; overflow: hidden; border: 1px solid rgb(255 255 255 / .075); border-radius: 14px; background: linear-gradient(135deg, rgb(13 21 42 / .8), rgb(5 9 21 / .88)); transition: translate .18s ease, border-color .18s ease, background .18s ease; }
.item-card::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; opacity: .7; background: var(--rarity); box-shadow: 0 0 11px var(--rarity); }
.item-card:hover,
.item-card:target { translate: 0 -2px; border-color: color-mix(in srgb, var(--rarity), transparent 65%); background: linear-gradient(135deg, color-mix(in srgb, var(--rarity), transparent 94%), rgb(6 10 24 / .94)); }
.item-card:target { animation: item-target 1.4s ease; }
@keyframes item-target { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 28px color-mix(in srgb, var(--rarity), transparent 70%); } }
.item-card-icon { width: 62px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .08); border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--rarity), transparent 89%), transparent 70%), rgb(2 5 14 / .66); }
.item-card-icon img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 7px 9px rgb(0 0 0 / .4)); }
.item-card-icon > i { color: var(--rarity); font: 900 1.35rem/1 var(--font-anime); font-style: normal; }
.item-card-copy { min-width: 0; }
.item-card-copy > div { display: flex; align-items: center; gap: 7px; }
.item-card-copy > div > span { display: flex; align-items: center; gap: 5px; color: var(--rarity); font: 900 .39rem/1 var(--font-anime); letter-spacing: .08em; }
.item-card-copy > div > span::before { content: ""; width: 5px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.item-card-copy code { max-width: 115px; overflow: hidden; padding: 3px 5px; border: 0; color: #70839c; background: rgb(255 255 255 / .025); font-size: .42rem; text-overflow: ellipsis; white-space: nowrap; }
.item-card h4 { margin: 7px 0 5px; overflow: hidden; font: 900 .66rem/1.15 var(--font-anime); text-overflow: ellipsis; white-space: nowrap; }
.item-card p { margin: 0; display: -webkit-box; overflow: hidden; color: #7f90a8; font-size: .52rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.items-catalog-unavailable { min-height: 370px; margin-top: 45px; padding: 55px; display: grid; place-items: center; align-content: center; border: 1px dashed rgb(var(--accent-rgb) / .22); border-radius: 22px; background: rgb(var(--accent-rgb) / .025); text-align: center; }
.items-catalog-unavailable > span { color: var(--accent-soft); font: 900 .52rem/1 var(--font-anime); letter-spacing: .14em; }
.items-catalog-unavailable h2 { margin: 18px 0 12px; font: 950 clamp(2rem, 5vw, 3.8rem)/.95 var(--font-anime); }
.items-catalog-unavailable p { margin: 0; color: #8b9cb3; }

@media (max-width: 1100px) {
  .items-hero-inner { grid-template-columns: minmax(0, 1fr) 430px; gap: 35px; }
}

@media (max-width: 900px) {
  .items-hero-inner { min-height: 1120px; padding-top: 135px; grid-template-columns: 1fr; align-content: center; }
  .items-hero-copy { text-align: center; }
  .items-hero-copy > p,
  .items-hero-stats { margin-inline: auto; }
  .items-hero-actions { justify-content: center; }
  .items-shop-manifest { width: min(620px, 100%); justify-self: center; }
  .items-catalog-heading { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .items-catalog-heading > p { max-width: 700px; }
}

@media (max-width: 720px) {
  .items-hero-inner { min-height: 1080px; padding-bottom: 55px; }
  .items-hero h1 { font-size: clamp(4rem, 17vw, 6rem); }
  .items-hero-copy > p { font-size: .84rem; }
  .items-catalog { padding: 85px 0 100px; }
  .items-catalog-heading h2 { font-size: clamp(3.2rem, 15vw, 5rem); }
  .items-catalog-tools { top: 76px; }
  .items-catalog-tools kbd { display: none; }
  .items-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

@media (max-width: 520px) {
  .items-hero { min-height: 0; }
  .items-hero-inner { min-height: 0; padding: 120px 0 65px; display: block; }
  .items-hero-actions { flex-direction: column; }
  .items-hero-stats { grid-template-columns: 1fr; }
  .items-hero-stats > div { padding: 12px 15px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
  .items-hero-stats > div:last-child { border-bottom: 0; }
  .items-shop-manifest { margin-top: 35px; }
  .items-shop-manifest > header { padding-inline: 17px; }
  .items-shop-manifest-list > a { padding-inline: 16px; grid-template-columns: 28px minmax(0, 1fr) 34px; gap: 10px; }
  .items-shop-manifest-list > a:hover { padding-left: 19px; }
  .items-shop-manifest-list code { display: none; }
  .items-shop-manifest > footer b { display: none; }
  .items-catalog-tools { grid-template-columns: 1fr; }
  .items-catalog-tools output { padding-bottom: 4px; text-align: center; }
  .items-shop-filters { grid-template-columns: 1fr; gap: 9px; }
  .items-shop-filters > span { padding-left: 2px; }
  .items-category > header { grid-template-columns: 38px minmax(0, 1fr); }
  .items-category > header > b { grid-column: 2; width: fit-content; }
  .items-category-list { gap: 48px; }
  .items-grid { grid-template-columns: 1fr; }
  .items-catalog-unavailable { padding: 35px 20px; }
}

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

/* Bot-synced Index event terminal */
.index-event-district {
  min-height: 980px;
  background: #050716;
}
.index-event-district .index-event-source-art {
  filter: saturate(.82) contrast(1.04);
}
.index-event-district .anime-district-shade {
  background:
    linear-gradient(90deg, rgb(5 7 22 / .16), rgb(5 7 22 / .48) 43%, rgb(5 7 22 / .94) 72%, #050716),
    linear-gradient(180deg, #050716 0, transparent 16%, transparent 79%, #050716 100%);
}
.index-event-district.is-live { --event-state: #65ffd1; --event-state-rgb: 101 255 209; }
.index-event-district.is-standby { --event-state: #ffc96a; --event-state-rgb: 255 201 106; }
.index-event-card {
  width: min(720px, 100%);
  max-width: none;
  padding: 42px;
  border-color: rgb(var(--event-state-rgb) / .42);
  background: rgb(7 11 31 / .92);
  box-shadow:
    inset 4px 0 0 rgb(var(--event-state-rgb) / .88),
    11px 14px 0 rgb(3 5 18 / .36),
    0 34px 90px rgb(0 0 0 / .52);
}
.index-event-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 26px;
  width: 130px;
  height: 2px;
  background: var(--event-state);
  box-shadow: 0 0 18px var(--event-state);
}
.index-event-card .festival-ribbon b {
  color: #08131b;
  border-color: transparent;
  background: var(--event-state);
}
.index-event-card h2 {
  max-width: 680px;
  margin: 19px 0 18px;
  font-size: clamp(3.35rem, 5.6vw, 6.25rem);
  line-height: .88;
  overflow-wrap: anywhere;
}
.index-event-card > p {
  max-width: 630px;
  white-space: pre-line;
}
.index-event-window {
  margin-top: 25px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid rgb(var(--event-state-rgb) / .28);
  border-left: 3px solid var(--event-state);
  background: rgb(255 255 255 / .035);
}
.index-event-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--event-state);
  box-shadow: 0 0 0 5px rgb(var(--event-state-rgb) / .1), 0 0 15px var(--event-state);
  animation: index-event-pulse 2s ease-out infinite;
}
.index-event-window p { margin: 0; }
.index-event-window p small {
  display: block;
  margin-bottom: 5px;
  color: var(--event-state);
  font: 900 .48rem/1 var(--font-anime);
  letter-spacing: .14em;
}
.index-event-window p strong {
  color: #f7f7ff;
  font-size: .72rem;
}
.index-event-window code {
  padding: 7px 9px;
  color: #d8e7ff;
  border: 1px solid rgb(255 255 255 / .13);
  background: #050817;
  font: 800 .65rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
@keyframes index-event-pulse {
  70%, 100% { box-shadow: 0 0 0 12px transparent, 0 0 15px var(--event-state); }
}
.index-event-surfaces {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgb(255 255 255 / .1);
  border-bottom: 0;
}
.index-event-surfaces > div {
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-right: 1px solid rgb(255 255 255 / .1);
  border-bottom: 1px solid rgb(255 255 255 / .1);
  background: rgb(9 15 39 / .72);
}
.index-event-surfaces > div:nth-child(2n) { border-right: 0; }
.index-event-surface-icon,
.index-event-item > i {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ffd5ec;
  border: 1px solid rgb(var(--event-state-rgb) / .3);
  background: rgb(var(--event-state-rgb) / .08);
}
.index-event-surface-icon {
  width: 35px;
  height: 35px;
}
.index-event-surface-icon img,
.index-event-item img { width: 76%; height: 76%; object-fit: contain; }
.index-event-surface-icon i,
.index-event-item em { font-style: normal; }
.index-event-surfaces p { min-width: 0; margin: 0; }
.index-event-surfaces p strong,
.index-event-surfaces p small { display: block; }
.index-event-surfaces p strong {
  color: #f8f8ff;
  font: 850 .61rem/1.15 var(--font-anime);
}
.index-event-surfaces p small {
  margin-top: 5px;
  overflow: hidden;
  color: #95a4c2;
  font-size: .51rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index-event-surfaces > div > b {
  color: var(--event-state);
  font: 900 .45rem/1 var(--font-anime);
  letter-spacing: .1em;
}
.index-event-featured {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / .1);
}
.index-event-featured > header {
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.index-event-featured > header span {
  color: var(--event-state);
  font: 900 .5rem/1 var(--font-anime);
  letter-spacing: .13em;
}
.index-event-featured > header small { color: #8796b4; font-size: .5rem; }
.index-event-featured > div { display: flex; flex-wrap: wrap; gap: 8px; }
.index-event-item {
  min-width: 0;
  padding: 7px 9px 7px 7px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / .11);
  background: rgb(255 255 255 / .035);
}
.index-event-item > i { width: 29px; height: 29px; }
.index-event-item > strong {
  max-width: 120px;
  overflow: hidden;
  color: #eef2ff;
  font-size: .55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index-event-item > small {
  color: var(--event-state);
  font: 900 .52rem/1 var(--font-anime);
}
.index-event-empty { min-height: 410px; align-content: center; }
.index-event-empty h2 em { color: var(--event-state); text-shadow: 3px 4px 0 #574320; }

@media (max-width: 980px) {
  .index-event-district { min-height: 0; }
  .index-event-district .festival-layout { min-height: 980px; }
  .index-event-district .anime-district-shade {
    background: linear-gradient(180deg, rgb(5 7 22 / .42), rgb(5 7 22 / .76) 44%, #050716 88%);
  }
}

@media (max-width: 620px) {
  .index-event-card { padding: 39px 21px 25px; }
  .index-event-surfaces { grid-template-columns: 1fr; }
  .index-event-surfaces > div { border-right: 0; }
  .index-event-featured > header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .index-event-item { width: 100%; }
  .index-event-item > strong { max-width: none; }
}

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