/* Raito.studio v3 — 来兎's arcade cabinet, NEO-NAHA build
   Night city, a full moon with the rabbit pounding mochi, and a cyberpunk arcade cabinet:
   neon 1P magenta / 2P cyan, chamfered HUD frames, scanlines, chromatic aberration, glitches.
   Chakra Petch + Share Tech Mono + DotGothic16 (Japanese, subset) + Geist for body text. All SIL OFL, self-hosted. */

@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url(chakra-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url(chakra-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: italic; font-display: swap; src: url(chakra-700i.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-display: swap; src: url(sharetech-mono.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "DotGothic16"; font-weight: 400; font-display: swap; src: url(dotgothic16-sub.woff2) format("woff2"); unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Geist"; font-weight: 100 900; font-display: swap; src: url(geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --night: #07060f;
  --night-2: #0e0c1e;
  --night-3: #17142f;
  --moon: #e9f1ff;
  --moon-2: rgba(233, 241, 255, .76);
  --moon-3: rgba(233, 241, 255, .52);
  --line: rgba(5, 217, 232, .22);
  --p1: #ff2a6d;
  --p2: #05d9e8;
  --gold: #f9f002;
  --disp: "Chakra Petch", "DotGothic16", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --sans: "Geist", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
  --mono: "Share Tech Mono", "DotGothic16", ui-monospace, "SF Mono", Menlo, "Hiragino Sans", monospace;
  --pad: clamp(18px, 4vw, 64px);
  --hud: 64px;
  --skew: 0deg;
  --chamfer: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --rgb: 2px 0 rgba(255, 42, 109, .75), -2px 0 rgba(5, 217, 232, .75);
  --ease: cubic-bezier(.2, .8, .1, 1);
  --snap: cubic-bezier(.7, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hud) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-width: 320px; overflow-x: clip; background: radial-gradient(120% 70% at 50% 0%, #17143a 0%, var(--night) 55%) fixed, var(--night); color: var(--moon); font: 400 1.0625rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
.lang-ja, :lang(ja) body { line-height: 1.95; letter-spacing: .03em; }
body::before { /* CRT: scanlines + vignette */
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px), radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.55));
  opacity: .35; mix-blend-mode: multiply;
}
::selection { background: var(--p1); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em, i { font-style: normal; }
kbd { font: 600 .62rem var(--mono); padding: 1px 4px; border: 1px solid currentColor; border-radius: 3px; opacity: .7; margin-left: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; padding: 10px 16px; background: var(--gold); color: var(--night); font: 700 .85rem var(--mono); }
.skip:focus { top: 12px; }
.anchor { position: absolute; top: calc(var(--hud) * -1); }
.arw { display: inline-block; font-size: .7em; transform: translateY(-.08em); transition: transform .3s var(--ease); }
a:hover .arw { transform: translate(.25em, -.08em); }
.btn, .ghost { display: inline-flex; align-items: center; gap: .6em; min-height: 50px; padding: 0 26px; font: 700 .86rem var(--mono); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background .2s, color .2s, transform .2s; }
.btn { background: var(--p1); color: #fff; }
.btn:hover { background: var(--moon); color: var(--night); }
.ghost { background: var(--night-3); color: var(--moon); }
.ghost:hover { background: var(--p2); color: var(--night); }
.fine { margin-top: 20px; font: .7rem/1.6 var(--mono); color: var(--moon-3); }
.scr-label { display: inline-flex; align-items: center; gap: 10px; font: 700 .76rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--moon-2); }
.scr-label b { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; background: var(--p1); color: #fff; transform: skewX(var(--skew)); }
.scr-title { font: 700 clamp(2.6rem, 6.6vw, 7.6rem)/.9 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left bottom; text-wrap: balance; }
:lang(ja) .scr-title, .lang-ja .scr-title { font-weight: 800; line-height: 1.12; font-size: clamp(2.1rem, 5vw, 5.4rem); }
.scr-lead { color: var(--moon-2); max-width: 34em; font-size: clamp(1.02rem, 1.25vw, 1.2rem); }
.scr { position: relative; padding: clamp(88px, 13vh, 160px) var(--pad) clamp(56px, 8vh, 100px); }
.scr-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vh, 64px); }

/* ---------------------------------------------------------------- HUD */
.hud { position: fixed; inset: 0 0 auto; z-index: 88; height: var(--hud); display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 0 var(--pad); background: linear-gradient(to bottom, rgba(11,10,23,.92), rgba(11,10,23,.6) 70%, transparent); }
.hud-logo img { width: 62px; filter: invert(1); }
.hud-life { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-1p { padding: 2px 8px; background: var(--p1); font: 700 .74rem var(--disp); letter-spacing: .06em; transform: skewX(var(--skew)); }
.hud-name { font: 700 .95rem var(--disp); letter-spacing: .1em; }
.hud-bar { position: relative; flex: 1; max-width: 260px; height: 12px; background: rgba(255,45,85,.22); transform: skewX(-30deg); border: 1px solid rgba(243,238,227,.4); }
.hud-bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--gold), #ffe9a6); transform: scaleX(var(--life, 1)); transition: transform .2s linear; }
.hud-round { grid-column: 3; padding: 4px 16px; font: 700 1rem var(--disp); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); background: rgba(11,10,23,.6); transform: skewX(var(--skew)); }
.hud-right { grid-column: 5; display: flex; align-items: center; gap: 8px; }
.hud-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--night-3); transform: skewX(var(--skew)); transition: background .2s, color .2s; }
.hud-btn > * { transform: skewX(calc(var(--skew) * -1)); }
.hud-btn:hover { background: var(--moon); color: var(--night); }
.hud-sound i { width: 8px; height: 8px; border-radius: 50%; background: var(--moon-3); }
.hud-sound[aria-pressed="true"] { background: var(--p2); color: var(--night); }
.hud-sound[aria-pressed="true"] i { background: var(--night); box-shadow: 0 0 0 3px rgba(11,10,23,.25); }
.hud-menu { background: var(--p1); color: #fff; }
.hud-langs { display: flex; gap: 2px; font: 700 .7rem var(--mono); }
.hud-langs a { padding: 6px 7px; color: var(--moon-3); }
.hud-langs a[aria-current] { color: var(--moon); box-shadow: inset 0 -2px var(--gold); }
@media (max-width: 899px) {
  :root { --hud: 58px; }
  .hud { grid-template-columns: auto 1fr auto; gap: 10px; }
  .hud-life, .hud-round { display: none; }
  .hud-right { grid-column: 3; }
  .hud-sound span, .hud-menu kbd { display: none; }
  .hud-langs { display: none; }
}

/* ---------------------------------------------------------------- pause menu */
.pause { position: fixed; inset: 0; z-index: 85; display: grid; align-content: center; gap: 28px; padding: 96px var(--pad) 48px; background: rgba(11,10,23,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pause[hidden] { display: none; }
.pause-title { font: 700 clamp(1rem, 1.4vw, 1.2rem) var(--mono); letter-spacing: .5em; color: var(--gold); }
.pause-list { display: grid; gap: 2px; }
.pause-list a { position: relative; display: flex; align-items: baseline; gap: 22px; padding: 6px 18px; font: 700 clamp(2rem, 6vw, 4.8rem)/1.05 var(--disp); text-transform: uppercase; isolation: isolate; transition: color .15s, padding .25s var(--ease); }
:lang(ja) .pause-list a { font-weight: 800; }
.pause-list a b { font: 700 .8rem var(--mono); color: var(--moon-3); }
.pause-list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--p1); transform: skewX(var(--skew)) scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.pause-list a:hover, .pause-list a:focus-visible, .pause-list a[aria-current] { padding-left: 34px; outline: 0; }
.pause-list a:hover::before, .pause-list a:focus-visible::before { transform: skewX(var(--skew)) scaleX(1); }
.pause-list a[aria-current] b { color: var(--gold); }
.pause-keys { font: 600 .74rem var(--mono); letter-spacing: .08em; color: var(--moon-3); }
.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- title screen */
.title { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; justify-items: center; align-items: center; padding: calc(var(--hud) + 8px) var(--pad) 28px; overflow: hidden; text-align: center; isolation: isolate; }
.sky { position: absolute; inset: 0; z-index: -2; }
.sky canvas { width: 100%; height: 100%; }
.moon { position: absolute; z-index: -1; left: 50%; top: 47%; width: min(76vh, 88vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: url(moon-760.webp) center / cover no-repeat; filter: brightness(1.1) contrast(1.06);
  box-shadow: 0 0 60px 6px rgba(255,240,215,.16), 0 0 220px 50px rgba(150,130,255,.10); }
@media (min-width: 700px) and (min-resolution: 1.5dppx), (min-width: 1100px) { .moon { background-image: url(moon.webp); } }
.title > * { grid-column: 1; }
.title-eyebrow { grid-row: 1; align-self: start; position: relative; z-index: 2; margin-top: 1vh; padding: 6px 14px; font: 700 .74rem var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--moon); background: var(--night); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.title-logo { grid-row: 2; width: min(60vh, 70vw); }
.title-logo img { width: 100%; filter: drop-shadow(0 6px 30px rgba(11,10,23,.25)); }
.title-manifesto { grid-row: 3; margin-top: -1vh; -webkit-text-stroke: 7px var(--night); paint-order: stroke fill; font: 700 clamp(1.6rem, 3.6vw, 3.6rem)/1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); text-shadow: 0 4px 30px rgba(11,10,23,.8); }
.title-manifesto em { color: var(--p1); }
:lang(ja) .title-manifesto { font-weight: 800; line-height: 1.2; }
.title-start { grid-row: 4; display: grid; justify-items: center; gap: 12px; margin-top: 3vh; }
.press { font: 700 clamp(1.4rem, 2.6vw, 2.2rem) var(--disp); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 18px rgba(255,207,63,.45); }
@media (prefers-reduced-motion: no-preference) { .press span { animation: blink 1.1s steps(2, jump-none) infinite; } }
@keyframes blink { 50% { opacity: .1; } }
.press-sound { font: 700 .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--moon-2); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.press-sound:hover { color: var(--p2); border-color: var(--p2); }
.title-foot { grid-row: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-top: 3vh; font: 600 .7rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--moon-3); }
.title-foot a { color: var(--moon); }
.title-foot a:hover { color: var(--p2); }
@media (max-width: 640px) { .moon { top: 38%; width: 92vw; } .title-logo { width: 78vw; } }

/* ---------------------------------------------------------------- mode select */
.mode { padding: clamp(80px, 12vh, 140px) var(--pad) clamp(40px, 6vh, 80px); }
.mode .scr-label { margin-bottom: 26px; }
.mode-list { border-top: 1px solid var(--line); }
.mode-list a { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 28rem); align-items: center; gap: 18px; padding: 10px 18px; border-bottom: 1px solid var(--line); isolation: isolate; transition: padding .25s var(--ease); }
.mode-list a::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; background: linear-gradient(90deg, var(--p1), rgba(255,45,85,.15)); transform: skewX(var(--skew)) scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.mode-list a::after { content: "▶"; position: absolute; left: 0; top: 50%; translate: 0 -50%; color: var(--gold); opacity: 0; transition: opacity .2s, left .25s var(--ease); }
.mode-list a:hover, .mode-list a:focus-visible, .mode-list a.is-cursor { padding-left: 40px; outline: 0; }
.mode-list a:hover::before, .mode-list a:focus-visible::before, .mode-list a.is-cursor::before { transform: skewX(var(--skew)) scaleX(1); }
.mode-list a:hover::after, .mode-list a:focus-visible::after, .mode-list a.is-cursor::after { opacity: 1; left: 12px; }
.mode-list b { font: 700 .8rem var(--mono); color: var(--moon-3); }
.mode-name { font: 700 clamp(2.2rem, 6vw, 6.4rem)/1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
.mode-desc { font-size: .92rem; color: var(--moon-2); line-height: 1.5; }
.mode-desc em { color: var(--moon); }
.mode-keys { margin-top: 16px; font: 600 .7rem var(--mono); letter-spacing: .08em; color: var(--moon-3); }
@media (max-width: 760px) { .mode-list a { grid-template-columns: 2.4rem 1fr; } .mode-desc { grid-column: 2; } }

/* ---------------------------------------------------------------- select screen */
.select { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.preview { position: sticky; top: calc(var(--hud) + 16px); display: grid; gap: 12px; padding: 18px; background: linear-gradient(160deg, rgba(255,45,85,.16), rgba(28,25,57,.9) 40%); border-left: 4px solid var(--p1); }
.pv-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night-2); clip-path: polygon(0 0, 100% 0, 100% 86%, 92% 100%, 0 100%); }
.pv-art img { width: 100%; height: 100%; object-fit: cover; }
.pv-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(4rem, 9vw, 9rem)/1 var(--disp); color: transparent; -webkit-text-stroke: 2px var(--moon-2); transform: skewX(var(--skew)); }
.pv-art img[src=""], .pv-art img:not([src]) { display: none; }
.pv-cat { font: 700 .72rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--p2); }
.pv-title { font: 700 clamp(2rem, 3.6vw, 3.8rem)/.95 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left; }
:lang(ja) .pv-title { line-height: 1.2; }
.pv-alt { font-size: .86rem; color: var(--moon-3); }
.pv-alt:empty { display: none; }
.pv-roles { font: 600 .8rem var(--mono); letter-spacing: .04em; color: var(--moon-2); }
.pv-roles b { color: var(--gold); margin-left: .6em; }
.pv-sum { font-size: .95rem; color: var(--moon-2); }
.pv-client { font: 600 .72rem var(--mono); color: var(--moon-3); }
.pv-client:empty, .pv-sum:empty { display: none; }
.pv-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.preview.is-swap .pv-title, .preview.is-swap .pv-art { animation: swap .35s var(--snap); }
@keyframes swap { from { opacity: 0; transform: translateX(-18px) skewX(var(--skew)); } }

.roster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tile a { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--night-3); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); transition: transform .2s var(--ease), background .2s; }
.tile-feat { grid-column: span 3; }
.tile-feat a { aspect-ratio: 16 / 10; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.7); transition: filter .3s, transform .5s var(--ease); }
.tile-mono { font: 700 clamp(1.6rem, 2.6vw, 2.8rem)/1 var(--disp); transform: skewX(var(--skew)); color: var(--tone, var(--moon)); }
.tile-p1 { --tone: var(--p1); } .tile-p2 { --tone: var(--p2); } .tile-gold { --tone: var(--gold); } .tile-moon { --tone: var(--moon); }
.tile-name { position: absolute; left: 12%; right: 8%; bottom: 6px; font: 600 .6rem/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--moon-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.tile-feat .tile-name { font: 700 clamp(1rem, 1.6vw, 1.5rem)/1 var(--disp); color: #fff; bottom: 10px; text-shadow: 0 2px 10px #000; -webkit-line-clamp: 1; }
.tile-no { position: absolute; top: 6px; left: 14%; font: 600 .58rem var(--mono); color: var(--moon-3); }
.tile-all a { background: var(--gold); color: var(--night); }
.tile-all .tile-mono { color: var(--night); }
.tile-all .tile-name { color: var(--night); }
.tile a:hover, .tile a:focus-visible, .tile.is-cursor a { background: var(--tone, var(--p1)); outline: 0; transform: translateY(-3px); }
.tile a:hover .tile-mono, .tile a:focus-visible .tile-mono, .tile.is-cursor .tile-mono { color: var(--night); }
.tile a:hover .tile-name, .tile.is-cursor .tile-name, .tile a:focus-visible .tile-name { color: var(--night); }
.tile-feat a:hover .tile-name, .tile-feat.is-cursor .tile-name { color: #fff; }
.tile a:hover img, .tile.is-cursor img, .tile a:focus-visible img { filter: none; transform: scale(1.05); }
.tile.is-cursor a::after { content: "1P"; position: absolute; top: 4px; right: 12%; padding: 0 5px; background: var(--p1); color: #fff; font: 700 .62rem var(--disp); }
.tile[hidden] { display: none; }
@media (max-width: 899px) {
  .select { grid-template-columns: 1fr; }
  .preview { position: relative; top: 0; }
  .roster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-feat { grid-column: span 2; }
}

/* ---------------------------------------------------------------- style select */
.style-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.style { position: relative; display: grid; align-content: start; gap: 14px; min-height: 340px; padding: 26px 26px 30px 34px; background: linear-gradient(180deg, var(--night-3), var(--night-2)); clip-path: polygon(22px 0, 100% 0, calc(100% - 22px) 100%, 0 100%); transition: background .3s; }
.style:hover { background: linear-gradient(180deg, rgba(51,184,255,.35), var(--night-2)); }
.style-l { font: 700 clamp(5rem, 9vw, 9rem)/.85 var(--disp); color: transparent; -webkit-text-stroke: 2px var(--p2); transform: skewX(var(--skew)); }
.style h3 { font: 700 clamp(1.7rem, 2.6vw, 2.6rem)/1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left; }
:lang(ja) .style h3 { font-weight: 800; line-height: 1.25; }
.style p { color: var(--moon-2); }
@media (max-width: 899px) { .style-list { grid-template-columns: 1fr; } .style { min-height: 0; } }

/* ---------------------------------------------------------------- hi-score */
.score { text-align: center; display: grid; justify-items: center; gap: 22px; overflow: hidden; }
.ko { font: 700 clamp(6rem, 22vw, 24rem)/.8 var(--disp); color: var(--p1); transform: skewX(var(--skew)) rotate(-4deg); text-shadow: 6px 6px 0 rgba(0,0,0,.4); -webkit-text-stroke: 3px var(--moon); margin: 10px 0 -2vh; }
.js .ko { opacity: 0; transform: skewX(var(--skew)) rotate(-4deg) scale(1.6); transition: opacity .2s, transform .45s cubic-bezier(.2, 1.6, .4, 1); }
.js .score.is-in .ko { opacity: 1; transform: skewX(var(--skew)) rotate(-4deg) scale(1); }
.statement { font: 700 clamp(2.6rem, 7.6vw, 8.8rem)/.92 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
.statement em { color: transparent; -webkit-text-stroke: 2px var(--moon); }
:lang(ja) .statement { font-weight: 800; line-height: 1.2; font-size: clamp(2.2rem, 6vw, 6.6rem); }
.statement-p { max-width: 34em; color: var(--moon-2); font-size: clamp(1.02rem, 1.3vw, 1.25rem); }
.hs { width: min(100%, 860px); margin-top: 3vh; padding: 26px clamp(16px, 3vw, 40px) 30px; background: rgba(18,16,42,.8); border: 1px solid var(--line); }
.hs-head { display: grid; gap: 6px; margin-bottom: 18px; }
.hs-head span:first-child { font: 700 .74rem var(--mono); letter-spacing: .3em; color: var(--gold); }
.hs-head span:last-child { font: 700 clamp(1.3rem, 2.4vw, 2.2rem)/1.1 var(--disp); text-transform: uppercase; }
:lang(ja) .hs-head span:last-child { line-height: 1.4; }
.hs-table li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px dashed var(--line); text-align: left; font-family: var(--mono); }
.hs-cols { font-size: .68rem; letter-spacing: .2em; color: var(--moon-3); border-top: 0 !important; }
.hs-rank { font-weight: 700; color: var(--gold); letter-spacing: .1em; }
.hs-score { font: 700 clamp(2rem, 4.6vw, 4.2rem)/1 var(--disp); color: var(--moon); letter-spacing: .02em; }
.hs-name { font-size: .78rem; letter-spacing: .14em; color: var(--moon-2); }
.hs-table li:nth-child(2) .hs-score { color: var(--gold); }
@media (prefers-reduced-motion: no-preference) { .hs-table li:nth-child(2) .hs-rank { animation: blink 1.2s steps(2, jump-none) infinite; } }

/* ---------------------------------------------------------------- player data */
.player .scr-label { margin-bottom: 30px; }
.player-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.card { position: sticky; top: calc(var(--hud) + 16px); padding: 10px; background: linear-gradient(160deg, var(--p1), #6b1030 45%, var(--night-3)); clip-path: polygon(0 0, 100% 0, 100% 92%, 90% 100%, 0 100%); }
.card-img { aspect-ratio: 4 / 5; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 91%, 90% 100%, 0 100%); }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.card figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 4px 6px; font: 700 .72rem var(--mono); letter-spacing: .14em; }
.card-1p { padding: 0 6px; background: var(--moon); color: var(--p1); font-family: var(--disp); }
.player-copy { display: grid; gap: 18px; }
.player-copy .scr-title { font-size: clamp(2.2rem, 4.8vw, 5.6rem); margin-bottom: 8px; }
:lang(ja) .player-copy .scr-title { font-size: clamp(1.8rem, 3.6vw, 3.8rem); }
.player-copy > p { color: var(--moon-2); max-width: 38em; }
.player-copy p i { color: var(--moon); font-weight: 600; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.stats > div { padding: 12px 14px; background: var(--night-3); border-left: 3px solid var(--p2); }
.stats dt { font: 700 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--p2); }
.stats dd { font-weight: 700; }
.stats a { border-bottom: 2px solid var(--p1); }
.player-copy .btn { justify-self: start; margin-top: 8px; }
@media (max-width: 899px) { .player-grid { grid-template-columns: 1fr; } .card { position: relative; top: 0; } }

/* ---------------------------------------------------------------- extra */
.extra-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.extra-card a { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; height: 100%; min-height: 320px; padding: 22px 22px 22px 26px; background: var(--night-3); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); transition: background .25s, transform .25s var(--ease); }
.extra-card a:hover { background: var(--moon); color: var(--night); transform: translateY(-4px); }
.ex-tag { justify-self: start; padding: 2px 8px; background: var(--gold); color: var(--night); font: 700 .62rem var(--mono); letter-spacing: .14em; }
.ex-name { font: 700 clamp(2.4rem, 3.6vw, 3.8rem)/1 var(--disp); transform: skewX(var(--skew)); transform-origin: left; }
.ex-cat { font: 700 .66rem var(--mono); letter-spacing: .14em; color: var(--p2); }
.extra-card a:hover .ex-cat { color: var(--p1); }
.ex-p { font-size: .92rem; color: var(--moon-2); }
.extra-card a:hover .ex-p { color: rgba(11,10,23,.75); }
.ex-more { font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.extra-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; font-weight: 600; }
.extra-links a { border-bottom: 2px solid var(--p2); }
@media (max-width: 1100px) { .extra-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .extra-list { grid-template-columns: 1fr; } .extra-card a { min-height: 0; } }

/* ---------------------------------------------------------------- continue */
.continue { display: grid; justify-items: center; gap: 22px; text-align: center; background: radial-gradient(80% 60% at 50% 60%, rgba(255,45,85,.18), transparent 70%); }
.cont-q { font: 700 clamp(2rem, 5vw, 5rem)/1 var(--disp); letter-spacing: .06em; transform: skewX(var(--skew)); color: var(--gold); }
.count { display: inline-block; min-width: 1ch; color: var(--p1); font-size: 1.5em; vertical-align: -.1em; }
.cont-mail a { display: grid; justify-items: center; gap: 8px; }
.cont-yes { font: 700 .9rem var(--mono); letter-spacing: .3em; color: var(--p2); }
.cont-mail a > span:last-child { font: 700 clamp(2.4rem, 8.6vw, 10rem)/1 var(--disp); letter-spacing: -.005em; transform: skewX(var(--skew)); transition: color .2s, text-shadow .2s; word-break: break-all; }
.cont-mail a:hover > span:last-child { color: var(--gold); text-shadow: 6px 6px 0 var(--p1); }
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 2vh; }
.social a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; background: var(--night-3); font: 700 .8rem var(--mono); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .2s, color .2s; }
.social a:hover { background: var(--p2); color: var(--night); }
.domestic { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; margin-top: 3vh; padding-top: 18px; border-top: 1px solid var(--line); font: 700 .72rem var(--mono); letter-spacing: .14em; color: var(--moon-3); }
.domestic a { font: 700 1.3rem var(--disp); color: var(--moon); border-bottom: 2px solid var(--p1); }

/* ---------------------------------------------------------------- footer */
.foot { padding: 32px var(--pad) 40px; }
.foot p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--line); font: 700 .7rem var(--mono); letter-spacing: .14em; color: var(--moon-3); }
.foot a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- roster page */
.ros-head { padding: calc(var(--hud) + 60px) var(--pad) 28px; }
.ros-title { margin: 18px 0 26px; font: 700 clamp(3.4rem, 12vw, 14rem)/.84 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left bottom; }
:lang(ja) .ros-title { font-weight: 800; line-height: 1.1; font-size: clamp(2.6rem, 7.4vw, 8rem); }
.ros-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; padding-top: 16px; border-top: 1px solid var(--line); }
.ros-lead { font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 40em; }
.ros-count { display: grid; justify-items: end; }
.ros-count strong { font: 700 clamp(4rem, 9vw, 9rem)/.85 var(--disp); color: var(--gold); transform: skewX(var(--skew)); }
.ros-count span { font: 700 .7rem var(--mono); letter-spacing: .16em; }
.ros-about, .ros-extra { margin-top: 18px; color: var(--moon-2); max-width: 52em; }
.ros-about span { font: 700 .7rem var(--mono); letter-spacing: .16em; color: var(--p2); margin-right: .6em; }
.ros-extra a { border-bottom: 2px solid var(--p2); color: var(--moon); }
.ros { padding-top: 24px; }
.ros-ctl { position: sticky; top: var(--hud); z-index: 5; display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 12px 0; margin-bottom: 18px; background: rgba(11,10,23,.94); border-bottom: 1px solid var(--line); }
.ros-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: var(--night-3); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ros-search span { font: 700 .66rem var(--mono); letter-spacing: .16em; color: var(--p2); }
.ros-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--moon); font: 500 .95rem var(--sans); outline: none; }
.ros-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ros-filters button { height: 36px; padding: 0 14px; background: var(--night-3); font: 700 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ros-filters button span { opacity: .6; margin-left: .3em; }
.ros-filters button[aria-pressed="true"] { background: var(--moon); color: var(--night); }
.ros-filters .f-p1[aria-pressed="true"] { background: var(--p1); color: #fff; } .ros-filters .f-p2[aria-pressed="true"] { background: var(--p2); color: var(--night); } .ros-filters .f-gold[aria-pressed="true"] { background: var(--gold); color: var(--night); }
.ros-n { font: 700 .72rem var(--mono); letter-spacing: .1em; color: var(--moon-3); }
.select-full { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.roster-full { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.roster-full .tile a { aspect-ratio: 3 / 4; }
.roster-full .tile-feat { grid-column: auto; }
.roster-full .tile-feat a { aspect-ratio: 3 / 4; }
.roster-full .tile-feat .tile-name { font: 600 .6rem/1.25 var(--mono); -webkit-line-clamp: 2; text-shadow: 0 1px 6px #000; }
.ros-empty { padding: 30px 0; font: 700 .9rem var(--mono); }
.ros-source { padding: 0 var(--pad) 60px; color: var(--moon-2); font-size: .92rem; }
.ros-source h2 { font: 700 1.6rem var(--disp); text-transform: uppercase; color: var(--moon); margin-bottom: 8px; }
.ros-source a { text-decoration: underline; }
@media (max-width: 899px) { .ros-ctl { grid-template-columns: 1fr; position: relative; top: 0; } .ros-cols { grid-template-columns: 1fr; } .ros-count { justify-items: start; } .select-full { grid-template-columns: 1fr; } .roster-full { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }

/* ---------------------------------------------------------------- VS page */
.vs-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: end; min-height: min(78vh, 760px); padding: calc(var(--hud) + 30px) var(--pad) 40px; overflow: hidden; isolation: isolate; }
.vs-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, #3a0c1d 0%, #1d0a1a 42%, transparent 42.2%), linear-gradient(115deg, transparent 41.8%, #0b1d36 42%, #0b1124 100%); }
.vs-p1 { display: grid; gap: 6px; padding-bottom: 4vh; }
.vs-tag { justify-self: start; padding: 2px 10px; font: 700 .8rem var(--disp); letter-spacing: .08em; background: var(--p1); color: #fff; transform: skewX(var(--skew)); }
.vs-p1 strong { font: 700 clamp(3rem, 8vw, 9rem)/.85 var(--disp); transform: skewX(var(--skew)); transform-origin: left; color: var(--moon); }
.vs-p1 small { font: 700 .76rem var(--mono); letter-spacing: .08em; color: var(--moon-2); max-width: 26em; }
.vs-mark { align-self: center; font: 700 clamp(4.4rem, 11vw, 12rem)/1 var(--disp); color: var(--gold); -webkit-text-stroke: 3px var(--night); text-shadow: 5px 5px 0 var(--p1); transform: skewX(var(--skew)); padding: 0 1vw; }
.vs-p2 { position: relative; align-self: stretch; display: grid; align-content: end; justify-items: end; text-align: right; padding-bottom: 4vh; min-height: 44vh; }
.vs-art { max-width: none; position: absolute; inset: calc((var(--hud) + 30px) * -1) calc(var(--pad) * -1) -40px -8%; width: calc(100% + 8% + var(--pad)); height: calc(100% + var(--hud) + 70px); object-fit: cover; z-index: -1; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); mask-image: linear-gradient(to top, rgba(0,0,0,.35), #000 60%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.35), #000 60%); }
.vs-mono { position: absolute; right: -2vw; top: 50%; translate: 0 -55%; z-index: -1; font: 700 clamp(10rem, 30vw, 30rem)/.8 var(--disp); color: transparent; -webkit-text-stroke: 2px var(--tone-c, var(--p2)); opacity: .45; transform: skewX(var(--skew)); }
.vs-p1 + .vs-mark + .vs-p2 .vs-tag { background: var(--p2); color: var(--night); justify-self: end; }
.vs-p2 h1 { font: 700 clamp(2.6rem, 6.6vw, 7.6rem)/.88 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: right; text-shadow: 0 4px 30px rgba(0,0,0,.6); text-wrap: balance; margin: 8px 0; }
:lang(ja) .vs-p2 h1 { font-weight: 800; line-height: 1.15; font-size: clamp(2.2rem, 5vw, 5.6rem); }
.vs-p2 small { font: 700 .76rem var(--mono); letter-spacing: .12em; color: var(--moon-2); }
.tone-p1 .vs-mono { -webkit-text-stroke-color: var(--p1); } .tone-p2 .vs-mono { -webkit-text-stroke-color: var(--p2); } .tone-gold .vs-mono { -webkit-text-stroke-color: var(--gold); } .tone-moon .vs-mono { -webkit-text-stroke-color: var(--moon); }
@media (prefers-reduced-motion: no-preference) {
  .js .vs-p1 { animation: in-l .6s var(--snap) both; }
  .js .vs-p2-txt { animation: in-r .6s var(--snap) .05s both; }
  .js .vs-mark { animation: slam .55s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
}
@keyframes in-l { from { opacity: 0; transform: translateX(-60px); } }
@keyframes in-r { from { opacity: 0; transform: translateX(60px); } }
@keyframes slam { from { opacity: 0; transform: skewX(var(--skew)) scale(2.4); } }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 16px var(--pad) 0; font: 700 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--moon-3); }
.crumbs a:hover { color: var(--gold); }
.vs-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 88px); padding: clamp(32px, 5vh, 60px) var(--pad); align-items: start; }
.vs-side { position: sticky; top: calc(var(--hud) + 16px); display: grid; gap: 14px; }
.side-label { font: 700 .72rem var(--mono); letter-spacing: .24em; color: var(--gold); }
.status { display: grid; gap: 4px; }
.status > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 10px; padding: 10px 12px; background: var(--night-3); border-left: 3px solid var(--p2); }
.status dt { font: 700 .66rem/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p2); }
.status dd { font-weight: 700; }
.vs-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-lead { font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.5; font-weight: 500; }
:lang(ja) .vs-lead { line-height: 1.8; }
.vs-sum { margin-top: 18px; color: var(--moon-2); }
.vs-sum p + p { margin-top: 1em; }
.cmd { margin-top: clamp(36px, 5vh, 56px); }
.cmd h2 { display: flex; align-items: center; gap: 12px; padding: 8px 16px; margin-bottom: 14px; background: linear-gradient(90deg, rgba(255,45,85,.35), transparent); font: 700 clamp(1.3rem, 2vw, 2rem)/1.1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
:lang(ja) .cmd h2 { line-height: 1.4; }
.cmd h2 span { color: var(--gold); font-size: .7em; }
.cmd-body dl > div { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 4px 24px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.cmd-body dt { font-weight: 700; }
.cmd-body dt small { display: block; font: 700 .7rem var(--mono); color: var(--gold); }
.cmd-body dd { color: var(--moon-2); }
.cmd-body li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.cmd-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--p2); }
.cmd-body time { margin-left: .6em; font: 600 .72rem var(--mono); color: var(--moon-3); }
.cmd-body p { color: var(--moon-2); }
.vs-note { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); font: .72rem/1.7 var(--mono); color: var(--moon-3); }
.vs-pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 0 var(--pad); margin-top: 20px; }
.vs-pn a { display: grid; gap: 6px; padding: 18px 22px; background: var(--night-3); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background .2s, color .2s; }
.vs-pn a:hover { background: var(--p1); color: #fff; }
.vs-pn a:last-child { text-align: right; }
.vs-pn span { font: 700 .7rem var(--mono); letter-spacing: .14em; color: var(--gold); }
.vs-pn a:hover span { color: #fff; }
.vs-pn strong { font: 700 clamp(1.1rem, 2vw, 1.8rem)/1.1 var(--disp); text-transform: uppercase; }
.vs-all { text-align: center; justify-items: center; background: var(--gold) !important; color: var(--night) !important; }
.vs-all span { color: var(--night) !important; }
.more { padding: 40px var(--pad) 0; }
.more h2 { font: 700 .74rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; }
.more a { display: block; padding: 12px 16px; background: var(--night-2); border-left: 3px solid var(--p2); font-weight: 600; font-size: .92rem; transition: background .2s; }
.more a:hover { background: var(--night-3); }
@media (max-width: 899px) {
  .vs-head { grid-template-columns: 1fr; min-height: 0; gap: 4px; }
  .vs-p1 { padding-bottom: 0; }
  .vs-mark { justify-self: center; }
  .vs-p2 { min-height: 40vh; }
  .vs-head::before { background: linear-gradient(170deg, #3a0c1d 0%, #1d0a1a 38%, transparent 38.2%), linear-gradient(170deg, transparent 37.8%, #0b1d36 38%, #0b1124 100%); }
  .vs-art { inset: 0 calc(var(--pad) * -1) -40px; width: calc(100% + var(--pad) * 2); height: calc(100% + 40px); clip-path: none; }
  .vs-body { grid-template-columns: 1fr; } .vs-side { position: static; }
  .cmd-body dl > div { grid-template-columns: 1fr; }
  .vs-pn { grid-template-columns: 1fr; } .vs-pn a:last-child { text-align: left; }
}

/* ---------------------------------------------------------------- extra pages (tools, guides) */
.ex { padding: calc(var(--hud) + 40px) var(--pad) 40px; }
.ex .crumbs { padding: 12px 0 28px; }
.ex .app-category { font: 700 .74rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--p2); }
.ex h1 { margin: 10px 0 20px; font: 700 clamp(3rem, 10vw, 12rem)/.84 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left bottom; }
:lang(ja) .ex h1 { font-weight: 800; line-height: 1.15; font-size: clamp(2.2rem, 6vw, 6.4rem); }
.ex-guide h1, .ex-hub h1 { font-size: clamp(2.4rem, 6vw, 6.4rem); line-height: .95; }
.ex .app-lead { font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.45; font-weight: 500; max-width: 32em; }
.ex .app-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(28px, 5vw, 88px); align-items: end; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.ex .app-summary { display: grid; gap: 18px; color: var(--moon-2); }
.ex .app-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ex .app-actions a, .ex .app-secondary { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: 0 22px; background: var(--night-3); font: 700 .76rem var(--mono); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .2s, color .2s; }
.ex .app-actions a:first-child, .ex .app-open { background: var(--p1); color: #fff; }
.ex .app-actions a::after, .ex .app-secondary::after { content: "↗"; }
.ex .app-actions a:hover, .ex .app-secondary:hover { background: var(--moon); color: var(--night); }
.ex .app-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; margin-top: 18px; }
.ex .app-facts > div { padding: 14px 16px; background: var(--night-3); border-left: 3px solid var(--gold); }
.ex .app-facts dt { font: 700 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ex .app-facts dd { font: 700 1.5rem var(--disp); text-transform: uppercase; }
.ex .app-detail, .ex .guide-callout, .ex .tools-related, .ex .tools-guides { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(28px, 5vw, 88px); padding: clamp(36px, 6vh, 64px) 0; border-bottom: 1px solid var(--line); }
.ex .app-detail > h2, .ex .guide-callout > h2, .ex .tools-related > h2, .ex .tools-guides > h2 { font: 700 clamp(1.8rem, 3vw, 3.2rem)/.95 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left; }
:lang(ja) .ex .app-detail > h2, :lang(ja) .ex .tools-related > h2 { line-height: 1.3; }
.ex .app-detail > :not(h2), .ex .guide-callout > :not(h2), .ex .tools-related > :not(h2), .ex .tools-guides > :not(h2, .app-category) { grid-column: 2; }
.ex .app-features > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-top: 1px dashed var(--line); }
.ex .app-features dt { font-weight: 700; }
.ex .app-features dd { color: var(--moon-2); }
.ex .app-steps { counter-reset: s; }
.ex .app-steps li { counter-increment: s; position: relative; padding: 14px 0 14px 3.6rem; border-top: 1px dashed var(--line); }
.ex .app-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 8px; font: 700 1.7rem var(--disp); color: var(--p1); transform: skewX(var(--skew)); }
.ex .tools-related a, .ex .guide-callout a { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px dashed var(--line); font-weight: 600; }
.ex .tools-related a::after, .ex .guide-callout a::after { content: "▶"; color: var(--p1); font-size: .7em; }
.ex .tools-intro { display: grid; gap: 16px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.ex .tools-intro > p:not(.app-category):not(.app-lead) { color: var(--moon-2); max-width: 42em; }
.ex .tools-intro .app-secondary { justify-self: start; }
.ex .tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 28px 0; }
.ex .tool-card { display: grid; align-content: start; gap: 12px; padding: 26px; background: var(--night-3); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.ex .tool-card .app-category { font: 700 clamp(3rem, 5vw, 5rem)/.9 var(--disp); color: var(--moon); letter-spacing: 0; transform: skewX(var(--skew)); transform-origin: left; }
.ex .tool-card h2 { font-size: 1.2rem; line-height: 1.4; font-weight: 700; }
.ex .tool-card p { color: var(--moon-2); }
.ex .guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex .guide-card { display: grid; gap: 10px; padding: 22px; background: var(--night-2); border-left: 4px solid var(--p2); transition: background .2s; }
.ex .guide-card:hover { background: var(--night-3); }
.ex .guide-card h3 { font: 700 1.5rem/1.05 var(--disp); text-transform: uppercase; }
:lang(ja) .ex .guide-card h3 { line-height: 1.4; }
.ex .guide-card p { color: var(--moon-2); font-size: .92rem; }
.ex .guide-heading { display: grid; gap: 14px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.ex .guide-meta { font: 600 .74rem var(--mono); color: var(--moon-3); }
.ex .guide-body { max-width: 46em; margin: 40px auto 0; }
.ex .guide-body h2 { margin: 2.2em 0 .6em; padding: 8px 16px; background: linear-gradient(90deg, rgba(255,45,85,.35), transparent); font: 700 clamp(1.4rem, 2.2vw, 2.1rem)/1.1 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
:lang(ja) .ex .guide-body h2 { line-height: 1.4; }
.ex .guide-body h3 { margin: 1.6em 0 .4em; font-size: 1.15rem; }
.ex .guide-body p, .ex .guide-body li { margin: .8em 0; color: var(--moon-2); }
.ex .guide-body ol, .ex .guide-body ul { padding-left: 1.4em; list-style: decimal; }
.ex .guide-body ul { list-style: square; }
.ex .guide-body code { font: .9em var(--mono); background: var(--night-3); padding: .1em .35em; color: var(--gold); }
.ex .guide-body a { text-decoration: underline; text-decoration-color: var(--p2); }
.table-scroll { overflow-x: auto; margin: 1.4em 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
caption { text-align: left; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding-bottom: 8px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px dashed var(--line); }
th { font: 700 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p2); border-bottom: 1px solid var(--moon-3); }
@media (max-width: 899px) {
  .ex .app-hero, .ex .app-detail, .ex .guide-callout, .ex .tools-related, .ex .tools-guides { grid-template-columns: 1fr; }
  .ex .app-detail > *, .ex .guide-callout > *, .ex .tools-related > *, .ex .tools-guides > * { grid-column: 1 !important; }
  .ex .tools-grid, .ex .guide-grid { grid-template-columns: 1fr; }
  .ex .app-features > div { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- manual (press kit) */
.man-cover { position: relative; display: grid; gap: 14px; padding: calc(var(--hud) + 60px) var(--pad) 48px; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.moon-sm { left: auto; right: -6vw; top: 52%; width: min(52vh, 56vw); transform: translateY(-50%); opacity: .9; }
.man-kicker { font: 700 .8rem var(--mono); letter-spacing: .4em; color: var(--gold); }
.man-title { font: 700 clamp(4.4rem, 18vw, 20rem)/.8 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); transform-origin: left bottom; text-shadow: 0 6px 40px rgba(11,10,23,.7); }
.man-sub { white-space: pre-line; font: 700 .82rem/1.8 var(--mono); letter-spacing: .06em; }
.man-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.man-badge { display: grid; }
.man-badge strong { font: 700 2.2rem/1 var(--disp); color: var(--p2); }
.man-badge span { font: 700 .66rem var(--mono); letter-spacing: .14em; color: var(--moon-3); }
.man-row .langs { display: flex; gap: 6px; }
.man-row .langs button { height: 44px; padding: 0 20px; background: var(--night-3); font: 700 .78rem var(--mono); letter-spacing: .1em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.man-row .langs button[aria-pressed="true"] { background: var(--p1); color: #fff; }
.man-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 72px); padding: 40px var(--pad); align-items: start; }
.man-toc { position: sticky; top: calc(var(--hud) + 16px); display: grid; gap: 10px; }
.man-toc nav { display: grid; gap: 4px; }
.man-toc a { padding: 10px 14px; background: var(--night-3); font: 700 1.15rem var(--disp); text-transform: uppercase; border-left: 3px solid var(--p1); transition: background .2s; }
.man-toc a:hover { background: var(--p1); }
.man-doc { padding: clamp(24px, 4vw, 56px); background: var(--moon); color: #16142a; box-shadow: 12px 12px 0 var(--p1); max-width: 980px; }
.man-doc ::selection { background: var(--p1); color: #fff; }
.document-title { font: 700 .78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 3px solid #16142a; margin-bottom: 18px; }
.man-doc h2 { margin: 2.2em 0 .7em; padding: 8px 14px; background: #16142a; color: var(--moon); font: 700 clamp(1.4rem, 2.2vw, 2.2rem)/1.1 var(--disp); text-transform: uppercase; scroll-margin-top: calc(var(--hud) + 16px); }
#pane-ja h2 { line-height: 1.4; }
.man-doc h3 { margin: 1.6em 0 .5em; font-size: 1.1rem; }
.man-doc p, .man-doc li { margin: .7em 0; }
.man-doc ul, .man-doc ol { padding-left: 1.3em; list-style: square; }
.man-doc ol { list-style: decimal; }
.man-doc blockquote { margin: 1.4em 0; padding: 6px 0 6px 16px; border-left: 4px solid var(--p1); }
.man-doc hr { border: 0; border-top: 1px dashed rgba(22,20,42,.3); margin: 2em 0; }
.man-doc a { color: #b0122f; text-decoration: underline; }
.man-doc th { color: #b0122f; border-bottom-color: #16142a; }
.man-doc th, .man-doc td { border-bottom-color: rgba(22,20,42,.18); }
@media (max-width: 899px) { .man-body { grid-template-columns: 1fr; } .man-toc { position: static; } .man-doc { box-shadow: 6px 6px 0 var(--p1); } }
@media print { .hud, .pause, .man-toc, .foot, .langs, body::before { display: none !important; } body { background: #fff; color: #000; } .man-doc { box-shadow: none; } }

/* ---------------------------------------------------------------- game over (404) */
.gameover { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 18px; padding: calc(var(--hud) + 40px) var(--pad) 60px; text-align: center; }
.go-lost { font: 700 .9rem var(--mono); letter-spacing: .3em; color: var(--p2); }
.go-title { font: 700 clamp(4rem, 15vw, 16rem)/.82 var(--disp); text-transform: uppercase; transform: skewX(var(--skew)); }
.go-title strong { display: block; color: var(--p1); }
.go-p { color: var(--moon-2); }
.go-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------------------------------------------------------------- VS wipe between pages */
.vs-wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: grid; place-items: center; }
.vs-wipe i { position: absolute; top: 0; bottom: 0; width: 60%; }
.vs-wipe i:first-child { left: -10%; background: var(--p1); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); transform: translateX(-110%); }
.vs-wipe i:nth-child(2) { right: -10%; background: var(--p2); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); transform: translateX(110%); }
.vs-wipe b { position: relative; font: 700 clamp(6rem, 20vw, 20rem)/1 var(--disp); color: var(--gold); -webkit-text-stroke: 4px var(--night); text-shadow: 8px 8px 0 var(--night); transform: skewX(var(--skew)) scale(2.5); opacity: 0; }
.vs-wipe.is-on i { transform: none; transition: transform .28s var(--snap); }
.vs-wipe.is-on b { transform: skewX(var(--skew)) scale(1); opacity: 1; transition: transform .3s cubic-bezier(.2, 1.6, .4, 1) .16s, opacity .1s .16s; }

/* ---------------------------------------------------------------- motion */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .title-logo { animation: title-in 1.1s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
  .js .moon { animation: moonrise 1.6s var(--ease) both; }
  .js .title-manifesto { animation: in-l .7s var(--snap) .8s both; }
  .js .title-start, .js .title-foot, .js .title-eyebrow { animation: fade 1s ease 1.1s both; }
  .shake { animation: shake .35s steps(6) both; }
}
@keyframes title-in { from { opacity: 0; transform: scale(1.35); filter: blur(10px); } }
@keyframes moonrise { from { opacity: 0; transform: translate(-50%, -38%) scale(.94); } }
@keyframes fade { from { opacity: 0; } }
@keyframes shake { 0% { transform: translate(6px, -4px); } 25% { transform: translate(-6px, 3px); } 50% { transform: translate(4px, 4px); } 75% { transform: translate(-3px, -3px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } .js .ko { opacity: 1; transform: skewX(var(--skew)) rotate(-4deg); } }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .2s ease both vt-out; }
::view-transition-new(root) { animation: .35s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.nw { white-space: nowrap; }
.pause-langs { display: flex; gap: 10px; font: 700 .9rem var(--mono); }
.pause-langs a { padding: 8px 14px; background: var(--night-3); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.pause-langs a[aria-current] { background: var(--gold); color: var(--night); }

/* =====================================================================
   NEO-NAHA layer: cyberpunk overrides (fonts are wider than Oswald, so display sizes come down)
   ===================================================================== */
body { background: radial-gradient(120% 70% at 50% 0%, #1a0f3a 0%, var(--night) 58%) fixed, var(--night); }
body::after { /* faint tech grid over everything */
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: linear-gradient(rgba(5,217,232,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(5,217,232,.045) 1px, transparent 1px);
  background-size: 48px 48px;
}
::selection { background: var(--p2); color: var(--night); }
:focus-visible { outline: 2px solid var(--p2); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(5,217,232,.25); }

/* type: neon cut, chromatic aberration */
.scr-title, .mode-name, .statement, .ros-title, .ex h1, .man-title, .go-title, .vs-p2 h1, .vs-p1 strong, .title-manifesto, .pv-title, .cont-mail a > span:last-child, .ko, .disc-h, .style h3, .ex-name, .u-name {
  font-family: var(--disp); font-weight: 700; letter-spacing: .01em; text-shadow: var(--rgb);
}
.scr-title { font-size: clamp(2.1rem, 5vw, 5.6rem); line-height: .98; }
:lang(ja) .scr-title, .lang-ja .scr-title { font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 4.6rem); line-height: 1.2; }
.mode-name { font-size: clamp(1.9rem, 4.6vw, 4.8rem); }
.statement { font-size: clamp(2.2rem, 6vw, 6.8rem); line-height: 1; }
:lang(ja) .statement { font-weight: 400; font-size: clamp(2rem, 5.4vw, 5.8rem); line-height: 1.25; }
.statement em, .hero-manifesto em { -webkit-text-stroke: 1.5px var(--p2); text-shadow: 0 0 18px rgba(5,217,232,.55); }
.ros-title { font-size: clamp(2.8rem, 9.4vw, 11rem); line-height: .9; }
:lang(ja) .ros-title, :lang(ja) .ex h1, :lang(ja) .vs-p2 h1 { font-weight: 400; }
.ex h1 { font-size: clamp(2.6rem, 8vw, 9rem); }
.ex-guide h1, .ex-hub h1 { font-size: clamp(2rem, 4.8vw, 5rem); line-height: 1.05; }
.man-title { font-size: clamp(3.4rem, 13vw, 15rem); line-height: .86; }
.go-title { font-size: clamp(3rem, 11vw, 12rem); line-height: .9; }
.vs-p1 strong { font-size: clamp(2.6rem, 6.4vw, 7rem); }
.vs-p2 h1 { font-size: clamp(2rem, 5vw, 5.8rem); line-height: .98; }
.vs-mark { font-family: var(--disp); font-style: italic; color: var(--gold); -webkit-text-stroke: 0; text-shadow: 4px 0 var(--p1), -4px 0 var(--p2), 0 0 40px rgba(249,240,2,.5); }
.pv-title { font-size: clamp(1.7rem, 2.8vw, 3rem); line-height: 1.02; }
.disc-h, .style h3 { font-size: clamp(1.4rem, 2vw, 2.1rem); }
.u-name, .ex-name { font-size: clamp(2rem, 3vw, 3.2rem); }
.cont-mail a > span:last-child { font-size: clamp(2rem, 6.8vw, 7.6rem); letter-spacing: 0; }
.ko { font-family: var(--disp); font-style: italic; color: var(--p1); -webkit-text-stroke: 0; text-shadow: 6px 0 var(--p2), -6px 0 var(--gold), 0 0 60px rgba(255,42,109,.6); font-size: clamp(5rem, 18vw, 19rem); }
.hs-score, .man-badge strong, .ros-count strong, .num, .tile-mono, .pv-mono, .vs-mono, .style-l, .disc-no { font-family: var(--disp); }
.hs-score { text-shadow: 0 0 18px currentColor; }
.tile-mono { font-size: clamp(1.3rem, 2vw, 2.2rem); text-shadow: 0 0 14px currentColor; }
.style-l { -webkit-text-stroke-color: var(--p2); filter: drop-shadow(0 0 10px rgba(5,217,232,.6)); }
.scr-label b, .hud-1p, .vs-tag, .card-1p { font-family: var(--mono); font-style: normal; }
.cmd h2, .ex .guide-body h2 { font-family: var(--disp); background: linear-gradient(90deg, rgba(255,42,109,.28), transparent); border-left: 3px solid var(--p1); }
.man-doc h2 { font-family: var(--disp); }

/* glitch: headings shudder once when they arrive, and on hover */
@media (prefers-reduced-motion: no-preference) {
  .scr.is-in .scr-title, .title-logo:hover, .mode-list a:hover .mode-name, .js .ros-title, .js .vs-p2 h1, .js .ex h1, .js .go-title, .js .man-title { animation: glitch .9s steps(1) both; }
}
@keyframes glitch {
  0% { clip-path: inset(0 0 0 0); transform: translate(0); }
  8% { clip-path: inset(12% 0 58% 0); transform: translate(-6px, 0); }
  16% { clip-path: inset(62% 0 8% 0); transform: translate(5px, 0); }
  24% { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 0); }
  32% { clip-path: inset(0 0 0 0); transform: translate(0); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

/* chamfered neon frames instead of slants */
.btn, .ghost, .hud-btn, .hud-round, .social a, .ros-search, .ros-filters button, .man-row .langs button, .pause-langs a, .vs-pn a { clip-path: var(--chamfer); transform: none; }
.hud-btn > * { transform: none; }
.btn { background: var(--p1); box-shadow: 0 0 22px rgba(255,42,109,.55); font-family: var(--mono); letter-spacing: .14em; }
.btn:hover { background: var(--p2); color: var(--night); box-shadow: 0 0 26px rgba(5,217,232,.7); }
.ghost { background: rgba(5,217,232,.08); color: var(--p2); box-shadow: inset 0 0 0 1px rgba(5,217,232,.5); font-family: var(--mono); }
.ghost:hover { background: var(--p2); color: var(--night); }
.hud { background: linear-gradient(to bottom, rgba(7,6,15,.95), rgba(7,6,15,.7) 70%, transparent); border-bottom: 1px solid rgba(5,217,232,.18); }
.hud-logo img { filter: invert(1) drop-shadow(0 0 6px rgba(5,217,232,.8)); }
.hud-1p { background: var(--p1); box-shadow: 0 0 12px var(--p1); }
.hud-name { font-family: var(--mono); letter-spacing: .2em; }
.hud-bar { transform: none; height: 10px; border: 1px solid rgba(5,217,232,.6); background: repeating-linear-gradient(90deg, rgba(5,217,232,.12) 0 8px, transparent 8px 10px); }
.hud-bar i { background: repeating-linear-gradient(90deg, var(--p2) 0 8px, transparent 8px 10px); box-shadow: 0 0 10px var(--p2); }
.hud-round { font-family: var(--mono); color: var(--p2); border-color: rgba(5,217,232,.5); text-shadow: 0 0 8px rgba(5,217,232,.8); }
.hud-menu { box-shadow: 0 0 16px rgba(255,42,109,.6); }
.scr-label { font-family: var(--mono); color: var(--p2); letter-spacing: .24em; }
.scr-label b { transform: none; clip-path: var(--chamfer); box-shadow: 0 0 12px rgba(255,42,109,.6); }
.pause { background: rgba(7,6,15,.94); }
.pause-title { color: var(--p2); text-shadow: 0 0 10px var(--p2); }
.pause-list a { font-family: var(--disp); font-size: clamp(1.8rem, 5vw, 4rem); text-shadow: var(--rgb); }
.pause-list a::before { transform: scaleX(0); background: linear-gradient(90deg, var(--p1), transparent); }
.pause-list a:hover::before, .pause-list a:focus-visible::before { transform: scaleX(1); }

/* panels: corner brackets */
.preview, .hs, .card, .extra-card a, .style, .stats > div, .status > div, .ex .tool-card, .ex .app-facts > div {
  clip-path: var(--chamfer);
}
.preview { background: linear-gradient(160deg, rgba(255,42,109,.14), rgba(14,12,30,.92) 45%); border-left: 0; box-shadow: inset 0 0 0 1px rgba(5,217,232,.35); }
.hs { background: rgba(14,12,30,.85); border: 0; box-shadow: inset 0 0 0 1px rgba(5,217,232,.35), 0 0 40px rgba(5,217,232,.08); }
.style { background: linear-gradient(180deg, rgba(23,20,47,.95), rgba(14,12,30,.95)); box-shadow: inset 0 0 0 1px rgba(5,217,232,.25); }
.style:hover { background: linear-gradient(180deg, rgba(5,217,232,.18), rgba(14,12,30,.95)); }
.extra-card a { box-shadow: inset 0 0 0 1px rgba(5,217,232,.3); }
.extra-card a:hover { background: var(--p2); color: var(--night); }
.card { background: linear-gradient(160deg, var(--p1), #4b0f3a 45%, var(--p2)); }
.tile a { clip-path: var(--chamfer); box-shadow: inset 0 0 0 1px rgba(5,217,232,.18); }
.tile a:hover, .tile a:focus-visible, .tile.is-cursor a { box-shadow: inset 0 0 0 2px var(--gold), 0 0 24px rgba(249,240,2,.4); }
.tile.is-cursor a::after { font-family: var(--mono); }
.mode-list a::before { transform: scaleX(0); }
.mode-list a:hover::before, .mode-list a:focus-visible::before, .mode-list a.is-cursor::before { transform: scaleX(1); }
.mode-list a::after { color: var(--p2); text-shadow: 0 0 8px var(--p2); }

/* title: moon above, logo on its lower edge, neon grid floor */
.title { grid-template-rows: auto 1fr auto auto auto; }
.moon { top: 40%; width: min(66vh, 86vw); filter: brightness(1.08) contrast(1.06) drop-shadow(0 0 40px rgba(170,200,255,.25)); }
.title-logo { align-self: end; width: min(42vh, 56vw); margin: 0 0 1vh; }
.title-logo img { filter: invert(1) drop-shadow(0 0 10px rgba(5,217,232,.9)) drop-shadow(0 0 30px rgba(255,42,109,.6)); }
.title-manifesto { font-size: clamp(1.4rem, 2.8vw, 2.8rem); -webkit-text-stroke: 0; text-shadow: var(--rgb), 0 0 24px rgba(7,6,15,.9); }
:lang(ja) .title-manifesto { font-weight: 400; font-size: clamp(1.6rem, 3vw, 3rem); }
.title-eyebrow { font-family: var(--mono); color: var(--p2); background: rgba(7,6,15,.85); box-shadow: inset 0 0 0 1px rgba(5,217,232,.45); clip-path: var(--chamfer); }
.press { font-family: var(--disp); color: var(--gold); text-shadow: 0 0 18px rgba(249,240,2,.7), 2px 0 var(--p1); }
.press-sound { font-family: var(--mono); }
.grid-floor { position: absolute; z-index: -1; left: -20%; right: -20%; bottom: 0; height: 38%; pointer-events: none;
  background-image: linear-gradient(rgba(255,42,109,.55) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(5,217,232,.45) 1.5px, transparent 1.5px);
  background-size: 64px 40px; transform: perspective(380px) rotateX(62deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
@media (prefers-reduced-motion: no-preference) { .grid-floor { animation: floor 1.4s linear infinite; } }
@keyframes floor { to { background-position: 0 40px, 0 0; } }
.sys { position: absolute; left: var(--pad); top: calc(var(--hud) + 16px); font: 400 .72rem/1.7 var(--mono); color: rgba(5,217,232,.7); text-align: left; letter-spacing: .08em; white-space: pre; }
.sys-r { left: auto; right: var(--pad); text-align: right; color: rgba(255,42,109,.75); }
@media (max-width: 899px) { .sys { display: none; } .moon { top: 36%; } .title-logo { width: 62vw; } }

/* sections */
.manifest, .continue { background: transparent; }
.vs-head::before { background: linear-gradient(115deg, #3d0a2a 0%, #1a0820 42%, transparent 42.2%), linear-gradient(115deg, transparent 41.8%, #04263a 42%, #070f1f 100%); }
.vs-head::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(5,217,232,.06) 0 1px, transparent 1px 4px); }
.ex .app-facts dd, .status dd, .stats dd { font-family: var(--disp); }
.ex .app-facts > div, .stats > div, .status > div { border-left-color: var(--p2); box-shadow: inset 0 0 0 1px rgba(5,217,232,.18); }
.man-doc { box-shadow: 10px 10px 0 var(--p1), -2px -2px 0 var(--p2); }
.vs-wipe i:first-child { background: var(--p1); } .vs-wipe i:nth-child(2) { background: var(--p2); }
.vs-wipe b { font-family: var(--disp); font-style: italic; -webkit-text-stroke: 0; text-shadow: 6px 0 var(--p1), -6px 0 var(--p2); }
.continue .cont-q { font-family: var(--disp); text-shadow: var(--rgb); }
.count { text-shadow: 0 0 20px currentColor; }
.title-manifesto { margin-top: 2.2vh; }
.title-logo { margin-bottom: 0; }
.hud-round { box-shadow: inset 0 0 0 1px rgba(5,217,232,.5); border: 0; }
.vs-p2-txt { position: relative; padding: 18px 0 14px 60px; background: linear-gradient(to left, rgba(7,6,15,.88) 30%, rgba(7,6,15,0)); }
.vs-p2 h1 { text-shadow: var(--rgb), 0 2px 18px rgba(7,6,15,.95); }
.moon { top: 38%; width: min(62vh, 84vw); }
@media (max-width: 899px) { .moon { top: 34%; } .vs-p2-txt { padding-left: 24px; } }
.vs-p2-txt { background: linear-gradient(to left, rgba(7,6,15,.95) 35%, rgba(7,6,15,.65) 75%, rgba(7,6,15,0)); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); padding-top: 40px; }

/* ---------------- game layer: boot, score, banners, combo, secret ---------------- */
.hud-score { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 400 .72rem var(--mono); letter-spacing: .1em; color: var(--moon-3); grid-column: 4; justify-self: end; }
.hud-score b { font-weight: 400; color: var(--gold); letter-spacing: .06em; text-shadow: 0 0 8px rgba(249,240,2,.6); min-width: 7ch; }
.hud-score b + span { margin-left: 8px; }
.hud-score b:last-child { color: var(--p2); text-shadow: 0 0 8px rgba(5,217,232,.6); }
@media (max-width: 1180px) { .hud-score span, .hud-score b:last-child { display: none; } }
@media (max-width: 899px) { .hud-score { display: none; } }
.boot { position: fixed; inset: 0; z-index: 400; display: grid; align-content: center; justify-items: start; gap: 22px; padding: 0 max(var(--pad), 14vw); background: #030208; color: var(--p2); font: 400 clamp(.85rem, 1.4vw, 1.1rem)/1.9 var(--mono); transition: opacity .5s, transform .5s; cursor: pointer; }
.boot.is-out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.boot-lines { margin: 0; min-height: 8em; text-shadow: 0 0 8px rgba(5,217,232,.7); white-space: pre; }
.boot-bar { display: grid; gap: 8px; width: min(520px, 80vw); color: var(--gold); letter-spacing: .3em; }
.boot-bar i { display: block; height: 10px; box-shadow: inset 0 0 0 1px var(--gold); }
.boot-bar b { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 13px); animation: load 1.7s steps(18) forwards; }
@keyframes load { to { width: 100%; } }
.boot-skip { margin: 0; color: var(--moon-3); font-size: .72rem; letter-spacing: .2em; animation: blink 1s steps(2, jump-none) infinite; }
.booting body { overflow: hidden; }
.fx { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.fx-pop { position: absolute; font: 700 1rem var(--disp); color: var(--gold); text-shadow: 0 0 10px rgba(249,240,2,.8), 1px 0 var(--p1); transform: translate(-50%, -50%); animation: pop .9s var(--ease) forwards; }
@keyframes pop { to { transform: translate(-50%, -260%); opacity: 0; } }
.fx-banner { position: absolute; left: 0; right: 0; top: 42%; display: grid; justify-items: center; gap: 4px; padding: 18px 0; transform: translateY(-50%); text-align: center;
  background: linear-gradient(90deg, transparent, rgba(7,6,15,.88) 15%, rgba(7,6,15,.88) 85%, transparent); border-block: 1px solid rgba(5,217,232,.5);
  animation: banner 1.3s var(--snap) forwards; }
.fx-banner small { font: 400 .9rem var(--mono); letter-spacing: .5em; color: var(--p2); }
.fx-banner b { font: 700 clamp(2.4rem, 7vw, 6rem)/1 var(--disp); color: var(--moon); text-shadow: var(--rgb); letter-spacing: .04em; }
.fx-banner em { font: 700 italic clamp(2rem, 5vw, 4rem)/1 var(--disp); color: var(--gold); text-shadow: 4px 0 var(--p1), -4px 0 var(--p2); }
@keyframes banner { 0% { clip-path: inset(50% 0 50% 0); } 14% { clip-path: inset(0 0 0 0); } 80% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(50% 0 50% 0); opacity: 0; } }
.fx-challenger { top: 50%; animation-duration: 2s; background: linear-gradient(90deg, transparent, rgba(255,42,109,.85) 12%, rgba(255,42,109,.85) 88%, transparent); border-color: var(--gold); }
.fx-challenger b { font-size: clamp(1.6rem, 4.4vw, 4rem); color: #fff; text-shadow: 3px 0 var(--p2); }
.fx-clear b, .fx-win b { color: var(--gold); }
.fx-win, .fx-secret { top: 50%; animation-duration: 1.8s; }
.fx-secret { animation-duration: 2.4s; background: linear-gradient(90deg, transparent, rgba(120,0,20,.9) 15%, rgba(120,0,20,.9) 85%, transparent); }
.fx-combo { position: absolute; right: var(--pad); top: 38%; display: grid; justify-items: end; opacity: 0; font-family: var(--disp); }
.fx-combo b { font-size: clamp(3rem, 7vw, 6rem); line-height: .9; font-style: italic; color: var(--gold); text-shadow: 4px 0 var(--p1), -3px 0 var(--p2), 0 0 30px rgba(249,240,2,.5); }
.fx-combo span { font: 400 1rem var(--mono); letter-spacing: .4em; color: var(--p1); }
.fx-combo.is-on { animation: combo .9s var(--snap) forwards; }
@keyframes combo { 0% { opacity: 1; transform: scale(1.5) translateX(20px); } 20% { transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(10px); } }
/* secret: blood moon */
.secret .moon { filter: sepia(1) saturate(6) hue-rotate(-40deg) brightness(.85) contrast(1.15) drop-shadow(0 0 60px rgba(255,20,60,.6)); transition: filter 1.2s; }
.secret { --p2: #ff2a6d; --line: rgba(255,42,109,.25); }
@media (prefers-reduced-motion: reduce) { .boot, .fx-banner, .fx-pop, .fx-combo { display: none !important; } }
.hud > * { grid-row: 1; }
[hidden] { display: none !important; }