/* ==========================================================
   nullzoro — menu v3 "disc shelf"
   a wii-style shelf of disc cases inside the purple chrome
   metalheart. dark chrome bars, hud lines, violet only.
   ========================================================== */
html, body { height: 100%; overscroll-behavior: none; }
body.shelf-page {
  overflow: hidden;
  background: #05020a;
  touch-action: none;   /* swipes page the shelf; no browser pan / back gesture / pull-to-refresh */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body.shelf-page::before { display: none; }
body.shelf-page::after { opacity: .2; }
body.has-cursor, body.has-cursor * { cursor: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- the scene ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #05020a; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s ease; }
#gl.on { opacity: 1; }
.flat { display: none; }

/* ---------- top bar: small chrome wordmark ---------- */
.topbar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(14px, 2.4vh, 26px) clamp(16px, 2.6vw, 40px) 0;
  pointer-events: none;
}
.brand { display: flex; flex-direction: column; gap: 6px; }
.wm {
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 34px);
  line-height: 1;
  letter-spacing: -.01em;
  display: flex; gap: .26em; align-items: baseline;
}
.wm .nl-chrome {
  background:
    linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .9) 50%, transparent 56%) 0 0 / 260% 100% no-repeat,
    var(--chrome);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .6px rgba(5, 2, 10, .55);
  filter: drop-shadow(0 1px 0 #0e0719) drop-shadow(0 0 14px rgba(139, 92, 246, .45));
  animation: shine 7s ease-in-out infinite;
}
@keyframes shine { 0%, 62% { background-position: 130% 0, 0 0; } 100% { background-position: -40% 0, 0 0; } }
.wm-zoro {
  color: transparent;
  background: repeating-linear-gradient(0deg, rgba(196, 181, 253, .6) 0 1px, rgba(196, 181, 253, .1) 1px 3px);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 1px #c4b5fd;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, .55));
}
.brand .tag { color: rgba(196, 181, 253, .62); font-size: 9px; }
.top-r { display: flex; gap: 14px; align-items: center; padding-top: 6px; }
.top-r .nl-label { color: rgba(196, 181, 253, .7); }
.top-r .nl-label::before { content: "▚ "; color: var(--violet-2); }

/* ---------- floating case label (the wii tooltip) ---------- */
.case-label {
  position: fixed; left: 0; top: 0; z-index: 25;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 16px 9px;
  min-width: 120px; max-width: min(360px, 80vw);
  pointer-events: none;
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(196, 181, 253, .04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(30, 18, 54, .92), rgba(8, 4, 16, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(196, 181, 253, .22), 0 10px 26px -10px #000, 0 0 22px -6px var(--acc, #8b5cf6);
  opacity: 0;
  transform: translate(-50%, -100%) translate(var(--x, 50vw), var(--y, 40vh)) scale(.92);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, 1.4, .4, 1);
  will-change: transform, opacity;
}
.case-label.on { opacity: 1; transform: translate(-50%, -100%) translate(var(--x, 50vw), var(--y, 40vh)) scale(1); }
.case-label::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px;
  translate: -50% 0; rotate: 45deg;
  background: #0b0616; box-shadow: inset -1px -1px 0 rgba(196, 181, 253, .22);
}
.case-label::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc, #c4b5fd), transparent);
}
.cl-no { font-family: var(--pixel); font-size: 9px; letter-spacing: .18em; color: var(--acc, #a78bfa); text-transform: uppercase; }
.cl-title { font-family: var(--display); font-size: 15px; letter-spacing: .02em; color: #f3eeff; white-space: nowrap; text-shadow: 0 0 12px rgba(167, 139, 250, .5); }
.cl-genre { font-family: var(--pixel); font-size: 9px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; white-space: nowrap; }
.case-label.locked .cl-title { color: var(--dim); }
/* bottom-row cases: the label hangs under the shelf rail, its pointer aiming up at the case */
.case-label.below { transform: translate(-50%, 0) translate(var(--x, 50vw), var(--y, 40vh)) scale(.92); }
.case-label.below.on { transform: translate(-50%, 0) translate(var(--x, 50vw), var(--y, 40vh)) scale(1); }
.case-label.below::after { bottom: auto; top: -6px; box-shadow: inset 1px 1px 0 rgba(196, 181, 253, .22); background: #1e1236; }
/* a top-row label that reaches the top bar: the brand and count step back under it */
.topbar .brand, .topbar .top-r { transition: opacity .2s ease; }
body.label-on-top .topbar .brand, body.label-on-top .topbar .top-r { opacity: .12; }
.dots { transition: opacity .2s ease; }
body.label-on-dots .dots { opacity: .15; }

/* ---------- page arrows + dots ---------- */
.page-arrow {
  position: fixed; top: var(--mid, 46%); z-index: 22;
  width: 54px; height: 84px; margin-top: -42px;
  display: grid; place-items: center;
  border: 0; padding: 0; background: none; cursor: pointer;
  opacity: .55;
  transition: opacity .25s, transform .25s cubic-bezier(.2, 1.5, .4, 1), filter .25s;
}
.page-arrow svg { width: 34px; height: 56px; overflow: visible; }
.page-arrow .pa-shadow { fill: none; stroke: #05020a; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.page-arrow .pa-chrome { fill: none; stroke: url(#paChrome); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.page-arrow.prev { left: clamp(6px, 1.6vw, 28px); }
.page-arrow.next { right: clamp(6px, 1.6vw, 28px); }
.page-arrow:hover, .page-arrow:focus-visible { opacity: 1; filter: drop-shadow(0 0 12px rgba(167, 139, 250, .85)); }
.page-arrow.prev:hover { transform: translateX(-4px); }
.page-arrow.next:hover { transform: translateX(4px); }
.page-arrow:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; border-radius: 8px; }
.page-arrow.off { opacity: 0; pointer-events: none; }
.page-arrow.nudge.prev { animation: nudgeL .6s ease; }
.page-arrow.nudge.next { animation: nudgeR .6s ease; }
@keyframes nudgeL { 40% { transform: translateX(-8px); opacity: 1; } }
@keyframes nudgeR { 40% { transform: translateX(8px); opacity: 1; } }

.dots {
  position: fixed; left: 50%; z-index: 22;
  bottom: calc(var(--barH, 120px) + 12px);
  translate: -50% 0;
  display: flex; gap: 10px; align-items: center;
}
.dots button {
  width: 26px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.dots button i {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b9a8f5 40%, #2a1650 70%, #6d58b8);
  box-shadow: 0 0 0 1px rgba(5, 2, 10, .9);
  opacity: .45;
  transition: width .3s cubic-bezier(.2, 1.4, .4, 1), opacity .3s, box-shadow .3s;
}
.dots button.on i { width: 22px; border-radius: 6px; opacity: 1; box-shadow: 0 0 0 1px rgba(5, 2, 10, .9), 0 0 10px rgba(167, 139, 250, .9); background: linear-gradient(180deg, #fff, #c4b5fd 45%, #3b1d8a 52%, #8b5cf6); }

/* ---------- bottom bar: curved dark chrome, clock in the middle ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--barH, 120px);
  pointer-events: none;
}
.bar-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.bar > * { pointer-events: auto; }
.bar-bg { pointer-events: none; }
.round {
  position: absolute; bottom: calc(var(--barH, 120px) * .5 - var(--rb, 76px) / 2);
  width: var(--rb, 76px); height: var(--rb, 76px);
  border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 50%, #120a22 0 55%, transparent 56%),
    conic-gradient(from 200deg, #ffffff, #8f7ad6 12%, #1a0f30 24%, #e9e2ff 36%, #4b3590 52%, #ffffff 62%, #2a1650 76%, #c9bcf6 88%, #ffffff);
  box-shadow: 0 0 0 2px #05020a, 0 0 0 3px rgba(196, 181, 253, .35), 0 8px 20px -6px #000, 0 0 24px -6px rgba(139, 92, 246, .7);
  transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), box-shadow .25s, filter .25s;
}
.round::before {
  content: ""; position: absolute; inset: 15%; border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, rgba(196, 181, 253, .05) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 30%, #2b1a4f, #0b0616 70%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(196, 181, 253, .25);
}
.round svg { position: relative; width: 52%; height: 52%; overflow: visible; }
.round .ico { fill: none; stroke: #c4b5fd; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(139, 92, 246, .9)); transition: stroke .2s; }
.round:hover { transform: scale(1.07); box-shadow: 0 0 0 2px #05020a, 0 0 0 3px rgba(221, 214, 254, .7), 0 8px 20px -6px #000, 0 0 34px -4px rgba(167, 139, 250, .95); }
.round:hover .ico, .round[aria-expanded="true"] .ico { stroke: #fff; }
.round:active { transform: scale(.95); }
.round:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; }
.round.settings { left: var(--rx, 34px); }
.round.news { right: var(--rx, 34px); }
.round.settings[aria-expanded="true"] svg { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.news-dot {
  position: absolute; right: 9%; top: 9%; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e879f9 45%, #86198f);
  box-shadow: 0 0 0 2px #05020a, 0 0 12px #e879f9;
  animation: pulse 2.2s ease-in-out infinite;
}
.news-dot.seen { display: none; }
@keyframes pulse { 50% { transform: scale(.78); box-shadow: 0 0 0 2px #05020a, 0 0 4px #e879f9; } }

.clock {
  position: absolute; left: 50%; bottom: calc(var(--barH, 120px) - var(--flatY, 50px) + 2px);
  translate: -50% 0;
  pointer-events: none;
  padding: 0 18px;
}
.clock::before {
  /* a soft dark pool so the digits read over the floor */
  content: ""; position: absolute; left: -30px; right: -30px; top: -14px; bottom: -6px; z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 2, 10, .85), rgba(5, 2, 10, 0));
}
.time {
  font-family: var(--display);
  font-size: var(--clockS, 46px);
  line-height: 1;
  letter-spacing: .05em;
  background: linear-gradient(180deg, #ffffff 0%, #f1edff 30%, #b9a8f5 47%, #2a1650 50%, #5b43a8 56%, #cfc3fb 82%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: .8px rgba(5, 2, 10, .7);
  filter: drop-shadow(0 2px 0 #05020a) drop-shadow(0 0 14px rgba(139, 92, 246, .7));
  display: flex; align-items: baseline;
}
.time .colon { font-style: normal; display: inline-block; width: .42em; text-align: center; animation: nl-blink 2s steps(1) infinite; }
.date {
  position: absolute; left: 50%; top: calc(var(--flatY, 50px) + 12px); translate: -50% 0;
  color: #c4b5fd; font-size: 10px; letter-spacing: .32em; white-space: nowrap; text-shadow: 0 0 8px rgba(139, 92, 246, .8);
  pointer-events: none;
}

.ticker {
  position: absolute; left: calc(var(--rx, 34px) + var(--rb, 76px) + 28px); right: calc(var(--rx, 34px) + var(--rb, 76px) + 28px); bottom: 7px;
  height: 18px; overflow: hidden; white-space: nowrap;
  font-family: var(--pixel); font-size: 10px; letter-spacing: .14em; line-height: 18px;
  color: rgba(214, 204, 254, .72);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  pointer-events: none;
}
.track { display: inline-block; animation: marquee 60s linear infinite; }
.track b { color: var(--violet-2); font-weight: 400; margin: 0 16px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- panels: settings + news ---------- */
.panel {
  position: fixed; z-index: 40;
  bottom: calc(var(--barH, 120px) + 10px);
  width: min(360px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(196, 181, 253, .035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(28, 17, 50, .97), rgba(8, 4, 16, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(196, 181, 253, .22), 0 0 0 1px #05020a, 0 18px 40px -12px #000, 0 0 40px -16px rgba(139, 92, 246, .8);
  transform-origin: var(--ox, 0) 100%;
  animation: panelIn .32s cubic-bezier(.2, 1.3, .4, 1) both;
}
.panel[hidden] { display: block; visibility: hidden; pointer-events: none; animation: panelOut .2s ease both; }
.panel.never[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes panelOut { from { visibility: visible; opacity: 1; } to { opacity: 0; transform: translateY(10px) scale(.94); } }
.panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #2a1650, #e9e2ff 18%, #0e0719 19%, #6d58b8 50%, #0e0719 81%, #e9e2ff 82%, #2a1650);
}
.settings-panel { left: var(--rx, 34px); --ox: 40px; }
.news-panel { right: var(--rx, 34px); --ox: calc(100% - 40px); width: min(420px, calc(100vw - 32px)); }
.p-head { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #ece6ff; }
.p-rule { flex: 1; height: 7px; background: linear-gradient(#c4b5fd, #c4b5fd) right 50% / 1px 7px no-repeat, linear-gradient(90deg, rgba(196, 181, 253, .7), transparent) 0 50% / 100% 1px no-repeat; }
.p-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid rgba(196, 181, 253, .1); }
.p-k { flex: 1; font-family: var(--pixel); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
.p-v { width: 28px; text-align: right; font-family: var(--pixel); font-size: 10px; color: var(--dim); }
.p-foot { margin: 10px 0 0; font-size: 8px; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 150px; height: 22px; background: none; cursor: pointer; touch-action: pan-x;
}
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #8b5cf6 var(--p, 50%), #1a0f2e var(--p, 50%)); box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(196, 181, 253, .25); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #1a0f2e; box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(196, 181, 253, .25); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: #8b5cf6; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c4b5fd 40%, #2a1650 62%, #a78bfa); box-shadow: 0 0 0 1px #05020a, 0 0 10px rgba(167, 139, 250, .8); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c4b5fd 40%, #2a1650 62%, #a78bfa); box-shadow: 0 0 0 1px #05020a, 0 0 10px rgba(167, 139, 250, .8); }
input[type=range]:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; border-radius: 4px; }
.seg { display: flex; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(196, 181, 253, .3); }
.seg button {
  font-family: var(--pixel); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 10px; border: 0; cursor: pointer; color: var(--dim);
  background: linear-gradient(180deg, #1d1236, #0b0616);
  transition: color .2s, background .2s;
}
.seg button + button { box-shadow: inset 1px 0 0 rgba(196, 181, 253, .18); }
.seg button[aria-checked="true"] { color: #fff; background: linear-gradient(180deg, #c4b5fd 0%, #8b5cf6 46%, #3b1d8a 50%, #5b21b6 72%, #8b5cf6 100%); text-shadow: 0 1px 0 rgba(60, 0, 100, .6); }
.seg button:focus-visible { outline: 2px solid var(--lilac); outline-offset: -2px; }
.toggle {
  width: 50px; height: 26px; border-radius: 13px; border: 0; padding: 0; cursor: pointer; position: relative;
  background: linear-gradient(180deg, #0b0616, #1d1236); box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(196, 181, 253, .3);
  transition: background .25s;
}
.toggle i {
  position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c4b5fd 40%, #2a1650 62%, #a78bfa);
  box-shadow: 0 0 0 1px #05020a; transition: left .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s;
}
.toggle[aria-checked="true"] { background: linear-gradient(180deg, #5b21b6, #8b5cf6); }
.toggle[aria-checked="true"] i { left: 27px; box-shadow: 0 0 0 1px #05020a, 0 0 10px #c4b5fd; }
.toggle:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.panel .nl-btn.off { filter: saturate(.3) brightness(.7); }

.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.news-list button {
  width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 6px; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, rgba(42, 22, 80, .45), rgba(14, 8, 26, .6));
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .12);
  transition: box-shadow .2s, background .2s, transform .15s;
}
.news-list button:hover, .news-list button:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(221, 214, 254, .55), 0 0 18px -6px var(--acc, #8b5cf6); transform: translateX(2px); }
.news-list .stk { grid-row: span 2; }
.news-list .nt { font-family: var(--display); font-size: 12px; letter-spacing: .03em; }
.news-list .nt small { font-family: var(--pixel); font-size: 8px; letter-spacing: .14em; color: var(--acc, var(--violet-2)); margin-right: 8px; }
.news-list .nd { font-family: var(--pixel); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.news-empty { font-family: var(--pixel); font-size: 10px; color: var(--dim); padding: 8px 2px; }
/* sticker chips (same language as the 3d stickers) */
.stk {
  display: inline-grid; place-items: center; min-width: 64px; height: 24px; padding: 0 8px;
  font-family: var(--display); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.stk.new { color: #0a0612; background: linear-gradient(180deg, #ffffff, #e9d5ff 40%, #c084fc 52%, #f0abfc); }
.stk.updated { color: #f3eeff; background: linear-gradient(180deg, #8b5cf6, #3b1d8a 50%, #6d28d9); box-shadow: inset 0 0 0 1px rgba(221, 214, 254, .4); }

/* ---------- the opened case: screen + info + buttons ---------- */
.detail {
  position: fixed; z-index: 35;
  right: var(--dR, 4vw); top: var(--dT, 12vh);
  width: var(--dW, 54vw);
  display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 22px);
  pointer-events: none;
}
.detail[hidden] { display: none; }
.detail > * { pointer-events: auto; }
.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  padding: 0;
  background: #000;
  box-shadow:
    0 0 0 3px #05020a,
    0 0 0 6px #9d8ce0,
    0 0 0 7px #2a1650,
    0 0 0 9px #e9e2ff,
    0 0 0 11px #3b2a6e,
    0 0 0 12px #05020a,
    0 30px 60px -20px #000,
    0 0 70px -10px var(--acc, #8b5cf6);
  overflow: hidden;
  transform-origin: 0% 50%;
}
.screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 12px; }
.screen-glass {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 28%, transparent 29%),
    radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(10, 4, 24, .55) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 30px rgba(0, 0, 0, .6);
}
.screen-tag {
  position: absolute; left: 14px; top: 10px; font-size: 9px; color: rgba(255, 255, 255, .7);
  text-shadow: 0 1px 2px #000; padding: 3px 7px; border-radius: 3px; background: rgba(5, 2, 10, .45);
}
.screen-tag::first-letter { color: #fb7185; }
/* the tag introduces the preview, then gets out of the game's own hud */
.detail.in .screen-tag { animation: tagOut .6s ease 2.6s both; }
@keyframes tagOut { to { opacity: 0; transform: translateY(-4px); } }
.info { display: flex; gap: 18px; align-items: flex-end; justify-content: space-between; }
.info-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.d-meta { display: flex; gap: 12px; font-family: var(--pixel); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.d-meta span:first-child { color: var(--acc, var(--violet-2)); }
.detail h2 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.3vw, 40px); line-height: 1.05; letter-spacing: .01em;
  color: #f6f2ff; text-shadow: 0 2px 0 #0e0719, 0 0 22px rgba(139, 92, 246, .6);
  overflow-wrap: anywhere;
}
.detail p { margin: 0; font-family: var(--mono); font-size: clamp(12px, .9vw, 15px); line-height: 1.5; color: #cfc6ee; max-width: 62ch; }
.d-best { font-family: var(--pixel); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #86efac; text-shadow: 0 0 8px rgba(134, 239, 172, .5); min-height: 1em; }
.d-btns { display: flex; gap: 14px; align-items: center; flex: none; }
.gbtn {
  position: relative; border: 0; cursor: pointer; border-radius: 40px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em;
  padding: 0; display: grid; place-items: center;
  transition: transform .16s cubic-bezier(.2, 1.6, .4, 1), filter .2s, box-shadow .25s;
}
.gbtn span { position: relative; z-index: 1; }
.gbtn::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 4px; height: 42%; border-radius: 40px 40px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)); pointer-events: none;
}
.gbtn.start {
  min-width: clamp(170px, 13vw, 230px); height: clamp(56px, 6.4vh, 70px); font-size: clamp(16px, 1.25vw, 21px);
  color: #fff; text-shadow: 0 1px 0 rgba(40, 0, 80, .8), 0 0 14px rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, #d8ccff 0%, #9f7aff 40%, #5b21b6 52%, #7c3aed 76%, #b69cff 100%);
  box-shadow: 0 0 0 2px #05020a, 0 0 0 3px rgba(221, 214, 254, .6), inset 0 -4px 10px rgba(20, 0, 50, .55), 0 10px 26px -8px #000, 0 0 34px -2px rgba(139, 92, 246, .85);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { box-shadow: 0 0 0 2px #05020a, 0 0 0 3px rgba(221, 214, 254, .9), inset 0 -4px 10px rgba(20, 0, 50, .55), 0 10px 26px -8px #000, 0 0 52px 2px rgba(167, 139, 250, .95); } }
.gbtn.back {
  min-width: clamp(110px, 8vw, 150px); height: clamp(46px, 5.2vh, 56px); font-size: clamp(12px, .9vw, 15px);
  color: #e9e2ff; text-shadow: 0 1px 0 #05020a;
  background: linear-gradient(180deg, #4b3a80 0%, #241540 45%, #0b0616 52%, #1d1236 78%, #3b2a6e 100%);
  box-shadow: 0 0 0 2px #05020a, 0 0 0 3px rgba(196, 181, 253, .45), inset 0 -3px 8px rgba(0, 0, 0, .6), 0 8px 20px -8px #000;
}
.gbtn.back::after { opacity: .35; }
.gbtn:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.1); }
.gbtn:active { transform: translateY(1px) scale(.96); }
.gbtn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.gbtn:disabled { pointer-events: none; filter: saturate(.4) brightness(.7); animation: none; }

/* open/close choreography (js toggles .in / .out) */
.detail .screen, .detail .info { opacity: 0; }
.detail.in .screen { animation: screenIn .62s cubic-bezier(.2, 1.1, .3, 1) .18s both; }
.detail.in .info { animation: infoIn .5s cubic-bezier(.2, 1.2, .3, 1) .42s both; }
.detail.out .screen { animation: screenOut .28s ease-in both; }
.detail.out .info { animation: infoOut .22s ease-in both; }
@keyframes screenIn { from { opacity: 0; transform: perspective(1200px) rotateY(-24deg) translateX(-40px) scale(.82); filter: brightness(2.4) saturate(0); } 55% { filter: brightness(1.4) saturate(.6); } to { opacity: 1; transform: none; filter: none; } }
@keyframes screenOut { to { opacity: 0; transform: perspective(1200px) rotateY(-18deg) translateX(-30px) scale(.86); } }
@keyframes infoIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes infoOut { to { opacity: 0; transform: translateY(10px); } }
.detail.locked .gbtn.start { display: none; }

/* a crt power-on line across the screen when the loop starts */
.screen::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: #fff; box-shadow: 0 0 20px 6px rgba(196, 181, 253, .9);
  opacity: 0; pointer-events: none;
}
.detail.in .screen::after { animation: crt .5s ease-out .3s both; }
@keyframes crt { 0% { opacity: 1; transform: scaleX(0); } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1) scaleY(60); } }

/* dim the shelf ui while a case is open */
body.is-open .page-arrow, body.is-open .dots { opacity: 0; pointer-events: none; }
body.is-open .case-label { opacity: 0; }
body.is-leaving .bar, body.is-leaving .topbar, body.is-leaving .detail { opacity: 0; transition: opacity .35s ease; }

/* ---------- the cursor: chrome biomech claw with a glowing violet tip ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none;
  width: 64px; height: 64px; margin: -6px 0 0 -6px;
  transform: translate3d(-100px, -100px, 0);
  display: none;
  will-change: transform;
}
body.has-cursor .cursor { display: block; }
.cursor svg { display: block; overflow: visible; transform-origin: 6px 6px; transition: transform .16s cubic-bezier(.2, 1.5, .4, 1); filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px rgba(139, 92, 246, .45)); }
.cursor .cu-ring { opacity: 0; transform-origin: 4px 4px; transition: opacity .2s; }
.cursor .cu-glow { transform-origin: 4px 4px; transition: transform .2s; }
.cursor.hot .cu-ring { opacity: 1; animation: spin 2.4s linear infinite; }
.cursor.hot .cu-glow { transform: scale(1.8); }
.cursor.down svg { transform: scale(.88); }

/* ---------- cursor spark trail ---------- */
.trail {
  position: fixed; z-index: 2900; pointer-events: none;
  font-style: normal; line-height: 1;
  color: #fff; text-shadow: 0 0 8px var(--c, #a78bfa), 0 0 2px var(--c, #a78bfa);
  transform: translate(-50%, -50%);
  animation: trail .7s ease-out forwards;
}
@keyframes trail { to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(90deg) scale(.2); } }

/* ---------- boot sequence ---------- */
.boot {
  position: fixed; inset: 0; z-index: 1500;
  background: radial-gradient(ellipse at 50% 45%, #110822, #030106 70%);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s;
}
.boot.on { opacity: 1; pointer-events: auto; }
.boot pre {
  margin: 0; width: min(560px, 90vw);
  font-family: var(--pixel); font-size: 12px; line-height: 1.9; letter-spacing: .08em;
  color: #c4b5fd; text-shadow: 0 0 8px rgba(167, 139, 250, .8);
  white-space: pre-wrap;
}
.boot pre b { color: #86efac; font-weight: 400; }
.boot pre::after { content: "█"; animation: nl-blink .7s steps(1) infinite; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--lilac); font-family: var(--pixel); }

/* ==========================================================
   flat fallback (no webgl): a 2d shelf of css cases
   ========================================================== */
.no-gl #gl { display: none; }
.no-gl .scene {
  background:
    repeating-radial-gradient(circle at 50% 30vh, transparent 0 70px, rgba(167, 139, 250, .12) 70px 71px, transparent 71px 130px),
    linear-gradient(180deg, transparent 18vh, rgba(76, 42, 150, .2) 18vh 44vh, transparent 44vh),
    radial-gradient(ellipse at 50% 30vh, rgba(139, 92, 246, .25), transparent 60%),
    #05020a;
}
.no-gl .flat { display: block; position: absolute; inset: 0; }
.flat-track { position: absolute; left: 0; top: 0; height: 100%; display: flex; transition: transform .6s cubic-bezier(.3, 1, .3, 1); will-change: transform; }
.flat-page { flex: none; height: 100%; display: grid; align-content: center; justify-content: center; }
.fcase {
  position: relative; border: 0; padding: 0; cursor: pointer; background: none;
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), filter .3s;
}
.fcase .fc-box {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 7px; overflow: hidden;
  background: linear-gradient(180deg, #2a1a4a, #0e0719);
  box-shadow: 0 0 0 1px rgba(5, 2, 10, .9), inset 0 0 0 3px rgba(60, 36, 110, .9), inset 0 0 0 4px rgba(196, 181, 253, .35), 0 16px 26px -12px #000;
}
.fcase .fc-banner {
  position: absolute; left: 4px; right: 4px; top: 4px; height: calc(9% - 4px);
  background: var(--chrome); border-radius: 4px 4px 0 0;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--display); font-size: clamp(6px, .55vw, 9px); line-height: 1; letter-spacing: .24em; color: #140a24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.flat-veil { position: fixed; inset: 0; z-index: 33; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(10, 5, 22, .78), rgba(4, 2, 9, .92)); opacity: 0; transition: opacity .4s ease; }
.flat-veil.on { opacity: 1; }
.fcase canvas { position: absolute; left: 4px; right: 4px; bottom: 4px; width: calc(100% - 8px); height: calc(91% - 8px); display: block; border-radius: 0 0 3px 3px; }
.fcase .fc-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 42%, transparent 52%); background-size: 260% 100%; background-position: 120% 0; transition: background-position .8s ease; }
.fcase:hover .fc-shine, .fcase.sel .fc-shine { background-position: -40% 0; }
.fcase .fc-stk { position: absolute; right: -6px; top: 13%; transform: rotate(8deg); }
.fcase.sel { transform: translateY(-10px) scale(1.06); filter: drop-shadow(0 0 18px var(--acc, #8b5cf6)); }
.fcase.locked canvas { filter: saturate(.4) brightness(.8); }
.fcase.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.flat-rail { position: absolute; height: 10px; border-radius: 5px; background: var(--chrome); box-shadow: 0 0 18px rgba(139, 92, 246, .8), 0 6px 14px -4px #000; }
.flat-stage { position: fixed; z-index: 34; pointer-events: none; }
.flat-stage .fdisc { position: absolute; border-radius: 50%; box-shadow: 0 0 0 2px rgba(221, 214, 254, .6), 0 20px 40px -10px #000, 0 0 40px rgba(139, 92, 246, .6); animation: discspin 4s linear infinite; }
@keyframes discspin { to { transform: rotate(360deg); } }

/* ==========================================================
   responsive
   ========================================================== */
@media (max-width: 760px) {
  .brand .tag { display: none; }
  .case-label { padding: 6px 12px 7px; }
  .cl-title { font-size: 13px; }
  .page-arrow { width: 40px; height: 64px; margin-top: -32px; }
  .page-arrow svg { width: 24px; height: 40px; }
  .gbtn.start { min-width: 140px; }
}
/* phones (portrait): stacked detail view */
@media (max-width: 600px) {
  .page-arrow { display: none; }
  .dots { gap: 4px; }
  .dots button { width: 22px; height: 30px; }
  .detail { left: 16px; right: 16px; width: auto; top: 64px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 12px; justify-content: space-between; }
  body.is-open .bar, body.is-open .settings-panel, body.is-open .news-panel { transform: translateY(115%); transition: transform .35s ease; }
  .bar { transition: transform .35s ease; }
  .info { flex-direction: column; align-items: stretch; gap: 12px; }
  .detail h2 { font-size: 22px; }
  .detail p { font-size: 12px; }
  .d-btns { justify-content: space-between; }
  .gbtn.start { flex: 1; }
  .ticker { display: none; }
  .panel { left: 16px !important; right: 16px !important; width: auto; }
  .top-r { display: none; }
}
@media (max-height: 560px) {
  .ticker { display: none; }
  .brand .tag { display: none; }
}
/* portrait tablets too: the stacked detail view (the case opens between the screen and the info) */
@media (max-aspect-ratio: 799/1000) {
  .detail { left: 16px; right: 16px; width: auto; top: 64px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 12px; justify-content: space-between; }
  body.is-open .bar, body.is-open .settings-panel, body.is-open .news-panel { transform: translateY(115%); transition: transform .35s ease; }
  .bar { transition: transform .35s ease; }
  .info { flex-direction: column; align-items: stretch; gap: 12px; }
  .d-btns { justify-content: space-between; }
  .gbtn.start { flex: 1; }
}
/* short landscape screens (a phone on its side): the screen shrinks so title, blurb and buttons fit,
   and the bar steps away while a case is open */
@media (max-height: 560px) and (min-aspect-ratio: 4/5) {
  .detail { top: 48px; gap: 10px; }
  .screen { width: min(100%, calc((100vh - 48px - 150px) * 16 / 9)); }
  .detail h2 { font-size: 20px; }
  .detail p { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gbtn.start { height: 46px; min-width: 130px; }
  .gbtn.back { height: 40px; min-width: 96px; }
  body.is-open .bar, body.is-open .settings-panel, body.is-open .news-panel { transform: translateY(115%); transition: transform .35s ease; }
  .bar { transition: transform .35s ease; }
}

/* reduced motion: still, instant */
body.reduce *, body.reduce *::before, body.reduce *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }