/* AZRION GAME portal — cyberpunk arcade. Dark base, neon cyan/magenta,
   subtle grid + scanlines, cabinet-style cards. CSS only, no libraries.
   Japanese body text keeps clean contrast; display type for Latin/numbers. */
:root{
  --bg:#07081a; --bg2:#0a0c22; --panel:#101330; --panel2:#141840;
  --ink:#eef1ff; --body:#c9cdf0; --sub:#9aa3d4; --faint:#6d76ab;
  --line:#262a5e; --line2:#1b1e42;
  --cyan:#22e6ff; --magenta:#ff2ea6; --violet:#8b5bff; --yellow:#ffe94a;
  --disp:"Futura","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{background:var(--bg);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:14px;line-height:1.85;-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:-48px;z-index:0;pointer-events:none;animation:gridDrift 48s linear infinite;
  background:
    radial-gradient(900px 480px at 85% -5%,rgba(255,46,166,.10),transparent 60%),
    radial-gradient(1000px 560px at 8% -10%,rgba(34,230,255,.12),transparent 60%),
    linear-gradient(rgba(34,230,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,230,255,.045) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px}
@keyframes gridDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,44px,0)}}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
::selection{background:var(--magenta);color:#fff}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
img{display:block;max-width:100%}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
/* header — a slim, quiet bar that melts into the night-arcade world
   (owner, 2026-10-31: the old cabinet band read cheap). No neon edge
   line, no halo, no glass pill: just a small lockup and plain text
   links resting on a soft dark wash. Nav items and their targets are
   unchanged; only the dress is quieter and smaller. */
header.site{position:fixed;inset:0 0 auto 0;z-index:50;
  background:linear-gradient(180deg,rgba(7,8,26,.86),rgba(7,8,26,.66));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(238,241,255,.06)}
header.site .bar{max-width:1020px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:6px 22px;position:relative;z-index:1}
.brand{display:block;line-height:0;position:relative;flex:none}
.brand .logo-lockup{height:30px;width:auto;position:relative;filter:drop-shadow(0 0 10px rgba(34,230,255,.16))}
/* menu — plain text links on the night wash; hover only brightens */
nav.main{position:relative;display:flex;gap:2px 24px;justify-content:flex-end;align-items:center;flex-wrap:wrap;line-height:1.5;font-size:12px}
nav.main a{position:relative;text-decoration:none;white-space:nowrap;color:var(--sub);padding:6px 1px;
  transition:color .3s var(--ease)}
nav.main a:hover{color:#fff}
main{padding-top:66px;position:relative;z-index:1}
/* hero — neon marquee over a receding grid floor: horizon glow, drifting
   particles and an arcade PRESS START button; the world opens here. */
.hero{position:relative;padding:42px 0 26px;text-align:center;overflow:hidden}
.hero>*{position:relative;z-index:2}
.hero::before{content:"";position:absolute;left:50%;bottom:-4px;width:min(980px,150%);height:168px;z-index:0;pointer-events:none;
  transform:translateX(-50%) perspective(340px) rotateX(63deg);transform-origin:50% 100%;
  background:
    linear-gradient(rgba(34,230,255,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,230,255,.15) 1px,transparent 1px);
  background-size:46px 26px;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9) 25%,transparent 92%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.9) 25%,transparent 92%);
  animation:floorDrift 5.5s linear infinite}
@keyframes floorDrift{from{background-position:0 0,0 0}to{background-position:0 26px,0 0}}
.hero::after{content:"";position:absolute;left:50%;bottom:112px;width:min(760px,120%);height:64px;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(34,230,255,.20),rgba(255,46,166,.07) 55%,transparent 75%);filter:blur(4px)}
.stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:#bdf6ff;box-shadow:0 0 8px rgba(34,230,255,.8);opacity:.45;animation:starFloat 7s ease-in-out infinite alternate}
.stars span:nth-child(1){left:12%;top:16%}
.stars span:nth-child(2){left:24%;top:38%;background:#ffc7ec;box-shadow:0 0 8px rgba(255,46,166,.8);animation-delay:-2s}
.stars span:nth-child(3){left:38%;top:10%;animation-delay:-4s}
.stars span:nth-child(4){left:55%;top:26%;background:#d9ccff;box-shadow:0 0 8px rgba(139,91,255,.85);animation-delay:-1s}
.stars span:nth-child(5){left:66%;top:12%;animation-delay:-5s}
.stars span:nth-child(6){left:78%;top:34%;background:#ffc7ec;box-shadow:0 0 8px rgba(255,46,166,.8);animation-delay:-3s}
.stars span:nth-child(7){left:88%;top:18%;animation-delay:-6s}
.stars span:nth-child(8){left:8%;top:52%;animation-delay:-2.5s}
.stars span:nth-child(9){left:92%;top:55%;background:#d9ccff;box-shadow:0 0 8px rgba(139,91,255,.85);animation-delay:-4.5s}
.stars span:nth-child(10){left:47%;top:6%;animation-delay:-.6s}
@keyframes starFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.hero .kicker{font-family:var(--disp);font-size:10.5px;letter-spacing:.34em;color:var(--cyan);font-weight:800;text-shadow:0 0 12px rgba(34,230,255,.8);display:flex;align-items:center;justify-content:center;gap:14px}
.hero .kicker::before,.hero .kicker::after{content:"";width:30px;height:2px;flex:none;transform:skewX(-24deg)}
.hero .kicker::before{background:linear-gradient(90deg,transparent,var(--cyan));box-shadow:0 0 8px rgba(34,230,255,.6)}
.hero .kicker::after{background:linear-gradient(90deg,var(--magenta),transparent);box-shadow:0 0 8px rgba(255,46,166,.6)}
.hero h1{font-size:clamp(24px,5.4vw,37px);line-height:1.45;font-weight:800;letter-spacing:.02em;margin:14px 0 10px;color:#fff;text-shadow:0 0 18px rgba(34,230,255,.35),2px 2px 0 rgba(255,46,166,.35)}
.hero p{color:var(--sub);font-size:13px;max-width:560px;margin:0 auto}
.hero .press{margin-top:20px}
.press-btn{display:inline-block;font-family:var(--disp);font-size:13px;letter-spacing:.24em;font-weight:800;color:var(--yellow);text-decoration:none;text-shadow:0 0 12px rgba(255,233,74,.6);
  padding:11px 30px;border-radius:8px;border:1px solid rgba(255,233,74,.6);
  background:linear-gradient(180deg,rgba(255,233,74,.16),rgba(255,46,166,.10) 135%);
  box-shadow:0 0 24px rgba(255,233,74,.25),inset 0 0 16px rgba(255,233,74,.10),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.press-btn:hover{transform:translateY(-1px);box-shadow:0 0 36px rgba(255,233,74,.45),inset 0 0 20px rgba(255,233,74,.16),inset 0 1px 0 rgba(255,255,255,.3)}
.press-btn .blink{display:inline-block;margin-right:7px;animation:blink 2.2s steps(2,start) infinite}
.hero .press-note{display:block;margin-top:9px;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;font-size:10.5px;letter-spacing:.14em;color:var(--sub);text-shadow:none;font-weight:600}
@keyframes blink{50%{opacity:.15}}
.hero .cue{margin:26px auto 0;width:2px;height:44px;border-radius:2px;background:linear-gradient(var(--cyan),var(--magenta),transparent);box-shadow:0 0 12px rgba(34,230,255,.6);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{opacity:.3}50%{opacity:1}}
/* flowing stream — neon rail */
.stream{position:relative;padding:34px 0 10px}
.stream::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(transparent,rgba(34,230,255,.55) 6%,rgba(255,46,166,.55) 55%,rgba(34,230,255,.55) 94%,transparent)}
.stream::after{content:"";position:absolute;left:50%;margin-left:-1px;width:2px;height:150px;top:-170px;border-radius:2px;pointer-events:none;background:linear-gradient(transparent,rgba(34,230,255,.85) 45%,rgba(180,250,255,.95) 50%,rgba(255,46,166,.7) 55%,transparent);filter:drop-shadow(0 0 6px rgba(34,230,255,.55));opacity:0;animation:railFlow 14s linear infinite}
@keyframes railFlow{0%{top:-170px;opacity:0}6%{opacity:.55}94%{opacity:.55}100%{top:100%;opacity:0}}
.stop{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:30px 0}
.stop .fig{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel);box-shadow:0 0 0 1px rgba(34,230,255,.08),0 18px 44px rgba(0,0,0,.5),0 0 26px rgba(34,230,255,.08);transition:box-shadow .5s var(--ease),border-color .5s var(--ease)}
.stop .fig:hover{border-color:rgba(34,230,255,.55);box-shadow:0 0 0 1px rgba(34,230,255,.25),0 18px 44px rgba(0,0,0,.5),0 0 38px rgba(34,230,255,.22)}
.stop .fig img{width:100%;aspect-ratio:10/13;object-fit:cover;object-position:top;transform:scale(1.06);will-change:transform}
.stop:nth-child(even) .fig{order:2}
.stop .meta .no{font-family:var(--disp);font-size:10.5px;letter-spacing:.26em;color:var(--cyan);font-weight:800;text-shadow:0 0 10px rgba(34,230,255,.6)}
.stop h2{font-size:21px;margin:6px 0 2px;color:#fff;text-shadow:0 0 16px rgba(139,91,255,.35)}
.stop .genre{font-size:11px;color:var(--sub);letter-spacing:.08em}
.stop .desc{font-size:12.5px;color:var(--sub);margin:10px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.chip{font-size:10.5px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--sub);text-decoration:none;background:rgba(16,19,48,.7);transition:border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
a.chip:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 12px rgba(34,230,255,.25)}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;background:linear-gradient(135deg,var(--magenta),#c218d8);color:#fff;text-decoration:none;font-size:12px;font-weight:800;padding:9px 20px;border-radius:6px;letter-spacing:.08em;box-shadow:0 0 18px rgba(255,46,166,.35),inset 0 0 0 1px rgba(255,255,255,.15);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease)}
.btn.ghost{background:rgba(34,230,255,.06);color:var(--cyan);border:1px solid rgba(34,230,255,.55);box-shadow:0 0 14px rgba(34,230,255,.15);font-weight:700}
.btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 0 26px rgba(255,46,166,.55),inset 0 0 0 1px rgba(255,255,255,.2)}
.btn.ghost:hover{box-shadow:0 0 22px rgba(34,230,255,.4)}
/* button hierarchy (owner, 2026-10-31): wherever a primary action and
   sub-actions sit together, one primary leads by size and the ghosts
   step back small — never three near-equal buttons in a row. The
   feature contexts (flagship, selector info) scale this up further. */
.btns .btn{font-size:12.5px;padding:11px 24px}
.btns .btn.ghost{font-size:11.5px;padding:9px 16px}
/* reveal */
.rv{opacity:0;transform:translateY(12px) scale(.995);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}
/* sections */
section.block{padding:44px 0 6px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.sec-head h2{font-size:17px;color:#fff;text-shadow:0 0 14px rgba(34,230,255,.3)}
.sec-head .en{font-family:var(--disp);font-size:10px;letter-spacing:.28em;color:var(--magenta);font-weight:800;text-shadow:0 0 10px rgba(255,46,166,.6)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:16px;text-decoration:none;display:block;box-shadow:inset 0 1px 0 rgba(34,230,255,.12),0 10px 26px rgba(0,0,0,.35);transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity 1.05s var(--ease)}
.card:hover{transform:translateY(-2px);border-color:rgba(34,230,255,.6);box-shadow:inset 0 1px 0 rgba(34,230,255,.25),0 14px 30px rgba(0,0,0,.45),0 0 22px rgba(34,230,255,.18)}
.card h3{font-size:13.5px;margin-bottom:4px;color:#fff}
.card p{font-size:11.5px;color:var(--sub);line-height:1.7}
.card .cnt{font-family:var(--disp);font-size:10.5px;color:var(--cyan);letter-spacing:.12em;margin-bottom:6px;font-weight:700}
.about{border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:26px;box-shadow:inset 0 1px 0 rgba(255,46,166,.14),0 14px 34px rgba(0,0,0,.4)}
.about h2{font-size:16px;margin-bottom:8px;color:#fff}
.about p{font-size:12.5px;color:var(--sub);margin-bottom:10px}
.about ul{list-style:none;font-size:12.5px;color:var(--sub)}
.about li{padding:7px 0;border-top:1px solid var(--line2)}
.about li b{color:var(--cyan)}
/* detail / collection / article */
.crumb{font-size:11px;color:var(--faint);padding:22px 0 0}
.crumb a{color:var(--sub);text-decoration:none}
.crumb a:hover{color:var(--cyan)}
.page-head{padding:14px 0 6px}
.page-head .kicker{font-family:var(--disp);font-size:10.5px;letter-spacing:.3em;color:var(--cyan);font-weight:800;text-shadow:0 0 10px rgba(34,230,255,.6)}
.page-head h1{font-size:clamp(21px,4.6vw,29px);line-height:1.5;margin:8px 0 8px;color:#fff;text-shadow:0 0 16px rgba(34,230,255,.28),2px 2px 0 rgba(255,46,166,.28)}
.page-head .lead{color:var(--sub);font-size:13px;max-width:640px}
.herofig{border-radius:10px;overflow:hidden;border:1px solid var(--line);margin:18px 0 6px;max-width:520px;box-shadow:0 0 0 1px rgba(255,46,166,.08),0 18px 44px rgba(0,0,0,.5),0 0 26px rgba(139,91,255,.12)}
.herofig img{width:100%;aspect-ratio:10/11;object-fit:cover;object-position:top}
.prose{max-width:680px}
.prose h2{font-size:16px;margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line2);color:#fff}
.prose h2:first-child{border-top:none;padding-top:6px}
.prose p{font-size:13px;color:var(--body);margin-bottom:10px}
.prose ul,.prose ol{font-size:13px;color:var(--body);margin:0 0 12px 20px}
.prose li{margin-bottom:5px}
.prose a{color:var(--cyan)}
table.spec{width:100%;border-collapse:collapse;font-size:12.5px;margin:8px 0 4px}
table.spec th{text-align:left;color:var(--sub);font-weight:600;width:32%;padding:8px 10px 8px 0;border-top:1px solid var(--line2);vertical-align:top}
table.spec td{padding:8px 0;border-top:1px solid var(--line2);color:var(--body)}
.gamelist{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.grow{display:grid;grid-template-columns:118px 1fr;gap:16px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:14px;align-items:center;box-shadow:inset 0 1px 0 rgba(34,230,255,.1);transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),opacity 1.05s var(--ease)}
.grow:hover{transform:translateY(-1px);border-color:rgba(34,230,255,.5);box-shadow:inset 0 1px 0 rgba(34,230,255,.2),0 0 20px rgba(34,230,255,.14)}
.grow .th{border-radius:6px;overflow:hidden}
.grow .th img{width:100%;aspect-ratio:10/12;object-fit:cover;object-position:top}
.grow h3{font-size:14.5px;margin-bottom:2px;color:#fff}
.grow h3 a{text-decoration:none}
.grow p{font-size:12px;color:var(--sub)}
.grow .btns{margin-top:10px}
.note{font-size:11.5px;color:var(--faint);margin-top:14px}
/* footer — slim, neon top edge */
footer.site{border-top:1px solid var(--line);margin-top:52px;padding:20px 0 26px;background:rgba(7,8,26,.7);box-shadow:0 -1px 0 rgba(255,46,166,.22);position:relative;z-index:1}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;justify-content:space-between}
footer.site .fm{font-family:var(--disp);font-size:10.5px;letter-spacing:.3em;font-weight:800;color:#fff;text-shadow:0 0 10px rgba(34,230,255,.6)}
footer.site nav{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--sub)}
footer.site nav a{text-decoration:none}
footer.site nav a:hover{color:var(--cyan)}
footer.site .cp{width:100%;font-size:10.5px;color:var(--faint);margin-top:8px}
@media (max-width:760px){
  .stop{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .stop:nth-child(even) .fig{order:0}
  .stream::before{left:10px}
  .stream::after{left:10px;margin-left:0}
  .stop{padding-left:22px}
  .cards{grid-template-columns:1fr 1fr}
  header.site .bar{padding:8px 16px 7px;flex-wrap:wrap}
  .brand .logo-lockup{height:26px}
  nav.main{flex:1 1 100%;justify-content:space-between;gap:2px 12px;font-size:11px}
  nav.main a{padding:4px 1px}
  main{padding-top:92px}
  html{scroll-padding-top:100px}
  .hero{padding-top:32px}
  .hero::after{bottom:96px}
}
@media (max-width:460px){.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::before{animation:none}
  .hero::before{animation:none}
  .stars span{animation:none}
  .press-btn .blink{animation:none}
  .stream::after{animation:none;display:none}
  .rv{opacity:1;transform:none;transition:none}
  .hero .cue{animation:none}
  .stop .fig img{transform:none}
  .btn:hover,.card:hover,.grow:hover{transform:none}
}

/* game selector — the AZRION BRAND flagship rack grammar (owner,
   2026-10-29 21:12, superseding the great-circle arc): one large
   focused card centred on a sideways rail over a blurred wash of its
   own art (JS swaps .arc-back with the selection), neighbours peeking
   smaller and dimmer on both sides, dots under the rail, and the title
   name large in the info panel below with the play buttons ahead of
   the description so the essentials never sit under the browser
   chrome. Genre, play time and badges live only in the info typography
   under the art — nothing sits ON the art. The rail is a plain
   horizontal scroller, so it renders and scrolls even without JS;
   JS adds the scroll-driven focus falloff (transform/opacity only). */
.arcsec{padding:26px 0 calc(34px + env(safe-area-inset-bottom))}
.rk-stage{position:relative;border-radius:14px;overflow:hidden;
  background:radial-gradient(820px 380px at 50% -90px,rgba(34,230,255,.05),transparent 65%)}
.rk-rail{--rkW:min(320px,78vw);position:relative;z-index:1;display:flex;gap:20px;overflow-x:auto;
  padding:30px calc(50% - var(--rkW)/2) 34px;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;user-select:none;-webkit-user-select:none}
.rk-rail::-webkit-scrollbar{display:none}
.rk-rail:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* backdrop wash is a PRE-BLURRED static file (/img/blur/): the live
   blur(24px) filter that used to sit here repainted a full-stage layer
   on every selection change and was the selector's heaviest paint */
.arc-back{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50% 16%;pointer-events:none;
  transform:scale(1.06);opacity:.5;transition:opacity .28s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,1) 27%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,1) 27%)}
.arc-back.swap{opacity:.12}
/* edge shade — the rail dissolves into the stage at the sides and the
   bottom instead of being cut by a hard frame: absolutely-positioned
   gradient veils above the rail, no borders anywhere. Static
   gradients, so they rasterize once. */
.rk-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,5,14,.55) 0,rgba(4,5,14,0) 64px),
    linear-gradient(270deg,rgba(4,5,14,.55) 0,rgba(4,5,14,0) 64px),
    linear-gradient(0deg,rgba(4,5,14,.5) 0,rgba(4,5,14,0) 48px)}
.rk-card,.rk-card img{-webkit-user-drag:none}
/* the work itself, unframed: no border, no inset ring — only a soft,
   deep cast shadow separates the art from the wall, plus the JS-driven
   scale falloff toward the neighbours. The shadow is never
   transitioned: interpolating a large-blur box-shadow while scrolling
   repainted the focused card every frame on phones (2026-10-29 fix). */
.rk-card{flex:none;width:var(--rkW);aspect-ratio:10/13;border-radius:10px;overflow:hidden;background:var(--panel);text-decoration:none;position:relative;
  scroll-snap-align:center;will-change:transform,opacity;
  box-shadow:0 30px 56px rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.30)}
.rk-card img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
/* focus reads as a quiet halo behind the work: this layer's OPACITY
   eases in (.45s), so the "スッと滲む" swell costs a composite, not a
   repaint. No ring is drawn on the art itself. */
.rk-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s cubic-bezier(.22,.8,.24,1);
  box-shadow:0 0 72px rgba(34,230,255,.20)}
.rk-card.focus::before{opacity:1}
/* position dots under the rail — the current title's dot stretches
   into a short pill (big-platform pattern), the rest stay quiet */
.rk-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin:16px auto 0;padding:2px 10px}
.rk-dot{width:6px;height:6px;border-radius:99px;border:none;padding:0;background:rgba(154,163,212,.35);cursor:pointer;
  transition:width .35s var(--ease),background .35s var(--ease)}
.rk-dot.is-on{width:20px;background:var(--cyan)}
.rk-dot:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* the badge is typography now, not a pill: a small coloured word that
   sits beside the title in the info block under the art */
.ai-badge{font-family:var(--disp);font-weight:800;letter-spacing:.14em;pointer-events:none;font-size:11px;align-self:center}
.ai-badge.b-new{color:#ff8ae0}
.ai-badge.b-pick{color:#ffe94a}
.ai-badge[hidden]{display:none}
.arc-info{text-align:center;max-width:640px;margin:12px auto 0;padding:0 6px;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.arc-info.swap{opacity:0;transform:translateY(5px)}
.arc-info .ai-no{font-family:var(--disp);font-size:11.5px;letter-spacing:.26em;color:var(--cyan);font-weight:800;text-shadow:0 0 10px rgba(34,230,255,.6)}
.ai-titleline{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.arc-info h2{font-size:clamp(30px,6.4vw,42px);line-height:1.3;font-weight:800;color:#fff;margin:6px 0 2px;text-shadow:0 0 16px rgba(139,91,255,.35)}
.arc-info .ai-genre{font-size:12.5px;color:var(--sub);letter-spacing:.08em}
.arc-info .ai-tag{font-size:16.5px;font-weight:800;color:#fff;letter-spacing:.03em;margin:10px 0 0;text-shadow:0 0 14px rgba(34,230,255,.35)}
.arc-info .btns{justify-content:center;margin-top:16px}
.arc-info .btn{font-size:16px;padding:16px 40px;border-radius:9px}
.arc-info .btn.ghost{font-size:12px;padding:10px 18px}
.arc-info .ai-desc{font-size:12.5px;color:var(--sub);margin:14px 0 0}
/* collection links under the description: quiet text, no pills — the
   words sit in the whitespace like a gallery caption's small print */
.arc-info .chips{justify-content:center;margin:16px 0 0;gap:8px}
.arc-info .chip{font-size:11px;border:none;background:none;padding:2px 1px;color:var(--sub);box-shadow:none}
.arc-info .chip:not(:last-child)::after{content:"・";margin-left:8px;color:var(--faint)}
.arc-info a.chip:hover{color:var(--cyan);box-shadow:none}
.arc-ctl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.arc-btn{width:46px;height:46px;border-radius:50%;border:none;background:none;color:var(--sub);font-size:26px;line-height:1;cursor:pointer;font-family:var(--disp);transition:color .35s var(--ease)}
.arc-btn:hover{color:#fff}
.arc-btn:disabled{opacity:.28;cursor:default}
.arc-btn:disabled:hover{color:var(--sub)}
.arc-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.arc-count{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--sub)}
.arc-hint{width:100%;text-align:center;font-size:10.5px;color:var(--faint)}
/* quick-jump index — one tap spins any title straight to the apex.
   A typographic index now, not a row of pills: plain words in the
   whitespace, the current work simply turns white with a hairline. */
.arc-jump{display:flex;gap:4px 18px;overflow-x:auto;max-width:640px;margin:20px auto 0;padding:2px 4px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.arc-jump::-webkit-scrollbar{display:none}
.aj-chip{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--faint);background:none;border:none;border-radius:0;padding:7px 1px;cursor:pointer;font-family:inherit;transition:color .2s var(--ease)}
.aj-chip.on{color:#fff;box-shadow:inset 0 -2px 0 rgba(34,230,255,.65)}
.aj-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* full index list — every title's links stay in the DOM under the arc */
.all-list{list-style:none;border-top:1px solid var(--line2)}
.all-list li{display:flex;align-items:baseline;gap:14px;padding:9px 2px;border-bottom:1px solid var(--line2)}
.al-name{font-weight:800;color:#fff;text-decoration:none;font-size:13.5px;white-space:nowrap;transition:color .3s var(--ease)}
.al-name:hover{color:var(--cyan)}
.al-meta{font-size:11.5px;color:var(--sub);flex:1}
.al-play{font-size:11px;color:var(--magenta);text-decoration:none;font-weight:800;letter-spacing:.06em;white-space:nowrap}
@media (max-width:760px){
  /* the focused card spans nearly the whole stage width on phones, so
     the edge dissolve must stay thin and faint there */
  .rk-shade{background:
    linear-gradient(90deg,rgba(4,5,14,.5) 0,rgba(4,5,14,0) 30px),
    linear-gradient(270deg,rgba(4,5,14,.5) 0,rgba(4,5,14,0) 30px),
    linear-gradient(0deg,rgba(4,5,14,.5) 0,rgba(4,5,14,0) 40px)}
  .rk-rail{--rkW:min(300px,74vw);gap:16px;padding-top:24px;padding-bottom:28px}
  .arc-info h2{font-size:32px}
  .arc-info .ai-tag{font-size:15.5px}
  .arc-info .btn{padding:13px 26px}
  .arc-info .btn.ghost{padding:12px 20px}
  .al-meta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rk-card::before{transition:none}
  .rk-dot{transition:none}
  .arc-info{transition:none}
  .arc-back{transition:none}
  .aj-chip{transition:none}
}


/* scroll entrance v2 — a five-stage walk to the game center (top page
   only). The normal portal is the shop floor; on the session's first
   visit a tall runway stands in front of it and scrolling walks the
   camera through five real stage photographs: the street corner, the
   storefront (original welcome plate; the real logo rides on its blank
   signboard while that stage leads), close on the glass doors, the
   doors open, and the arcade floor inside. Stages crossfade while each
   one dollies at its own rate, which is what makes the parallax; no
   blur filter and no white flash anywhere, so every scroll position
   stays sharp. Fully reversible — scroll back and you are outside
   again. entry.js drives layer opacity/transform from progress;
   stage.dataset.p exposes it for verification. */
body.has-sentry main{padding-top:0}
body.has-sentry .hero{padding-top:180px}
/* header v2 stays the shop's header: parked away while you are still
   out on the street, it slides in as you step inside (entry.js toggles
   .sentry-inside). Without .sentry-on it is simply visible. */
body.has-sentry header.site{transition:transform .6s var(--ease),opacity .6s var(--ease)}
body.sentry-on:not(.sentry-inside) header.site{transform:translateY(-103%);opacity:0;pointer-events:none}
.sentry{display:none}
body.sentry-on .sentry{display:block;position:relative;height:520svh}
.sentry-stage{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(700px 380px at 50% -8%,rgba(139,91,255,.14),transparent 62%),
    radial-gradient(560px 320px at 88% 110%,rgba(255,46,166,.08),transparent 60%),
    radial-gradient(560px 320px at 10% 108%,rgba(34,230,255,.10),transparent 60%),
    #04050e}
.sentry-scene{position:relative;flex:none;width:max(100vw,50dvh);aspect-ratio:1/2;
  --lg-l:39.7%;--lg-t:20.3%;--lg-w:21.4%;
  --sb-t:34.4%;
  --bl-l:19.5%;--bl-w:61%;--bl-t1:19.8%;--bl-t2:36.9%}
.slayer{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
.slayer picture,.slayer picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slayer-1{opacity:1;transform-origin:50% 58%}
.slayer-2{transform-origin:49.8% 55.8%}
.slayer-3{transform-origin:50% 48%}
.slayer-4{transform-origin:50% 48%}
.slayer-5{transform-origin:50% 50%}
/* the neon sign rides inside stage 2, so it crossfades and dollies
   with the storefront photograph itself (photo-% geometry) */
.sentry-signov{position:absolute;inset:0;pointer-events:none}
.sentry-logo{position:absolute;left:var(--lg-l);top:var(--lg-t);width:var(--lg-w);height:auto;
  filter:drop-shadow(0 0 6px rgba(190,245,255,.85)) drop-shadow(0 0 16px rgba(34,230,255,.55)) drop-shadow(0 0 38px rgba(139,91,255,.35))}
/* 入口の締め（2026-10-29）：旅の最後に AZRION GAME ロゴが静かに現れて
   終わる。entry.js が p=0.895→0.95 でフェード＋小さな上昇を駆動し、
   ステージ全体のフェードアウト（0.955→1）と溶けて店内へ渡す。
   再訪・スキップ時は .sentry 自体が表示されず、ロゴはヘッダーに静的。 */
.sentry-finale{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 64% at 50% 50%,rgba(3,4,12,.68),rgba(3,4,12,.30) 55%,transparent 78%)}
.sentry-finale img{width:min(190px,48vw);height:auto;
  filter:drop-shadow(0 0 10px rgba(190,245,255,.85)) drop-shadow(0 0 26px rgba(34,230,255,.5)) drop-shadow(0 0 54px rgba(139,91,255,.35))}
.sentry-sign-sub{position:absolute;left:0;right:0;top:var(--sb-t);text-align:center;margin:0;
  font-family:var(--disp);font-size:clamp(8px,2.6vw,13px);letter-spacing:.52em;text-indent:.52em;color:#bffcff;font-weight:800;
  text-shadow:0 0 6px rgba(34,230,255,.95),0 0 16px rgba(34,230,255,.75),0 0 34px rgba(34,230,255,.4)}
.sentry-bulbs{position:absolute;left:var(--bl-l);width:var(--bl-w);display:flex;justify-content:space-between}
.sentry-bulbs-t{top:var(--bl-t1)}
.sentry-bulbs-b{top:var(--bl-t2)}
.sentry-bulbs span{flex:none;width:6px;height:6px;border-radius:50%;background:#54450f;
  animation:sentryBulb 2.08s linear infinite;animation-delay:calc(var(--d)*.13s)}
@keyframes sentryBulb{
  0%,100%{background:#54450f;box-shadow:0 0 0 rgba(255,233,74,0)}
  7%{background:#ffe94a;box-shadow:0 0 10px rgba(255,233,74,.95),0 0 22px rgba(255,233,74,.45)}
  20%{background:#7d641a;box-shadow:0 0 3px rgba(255,233,74,.25)}
}
/* entrance UI — tagline and PRESS START ride over the street corner */
.sentry-ui{position:absolute;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:13px;padding:0 18px;text-align:center}
.sentry-tag{font-size:12px;line-height:1.8;color:#d7dcff;text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.6)}
.sentry-start{font-family:var(--disp);font-size:14.5px;letter-spacing:.24em;font-weight:800;color:var(--yellow);cursor:pointer;
  text-shadow:0 0 12px rgba(255,233,74,.6);padding:12px 38px 10px;border-radius:8px;border:1px solid rgba(255,233,74,.65);
  background:linear-gradient(180deg,rgba(255,233,74,.16),rgba(255,46,166,.10) 135%);
  box-shadow:0 0 26px rgba(255,233,74,.28),inset 0 0 16px rgba(255,233,74,.10),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sentry-start:hover{transform:translateY(-1px);box-shadow:0 0 40px rgba(255,233,74,.48),inset 0 0 20px rgba(255,233,74,.16),inset 0 1px 0 rgba(255,255,255,.3)}
.sentry-start:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sentry-blink{display:inline-block;margin-right:8px;animation:blink 2.2s steps(2,start) infinite}
.sentry-start-jp{display:block;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;font-size:10px;
  letter-spacing:.4em;text-indent:.4em;color:var(--sub);text-shadow:none;font-weight:600;margin-top:3px}
.sentry-cue{margin:2px 0 0;font-family:var(--disp);font-size:9.5px;letter-spacing:.42em;text-indent:.42em;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:7px}
.sentry-cue-line{display:block;width:1px;height:30px;background:linear-gradient(180deg,rgba(34,230,255,.0),rgba(34,230,255,.75));
  animation:sentryCue 2.4s var(--ease) infinite;transform-origin:50% 0}
@keyframes sentryCue{0%{transform:scaleY(.25);opacity:.35}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.25);opacity:.35}}
/* quiet progress furniture: where you are on the walk, bottom-left */
.sentry-hud{position:absolute;left:16px;bottom:calc(15px + env(safe-area-inset-bottom));z-index:5;
  display:flex;flex-direction:column;gap:7px;pointer-events:none}
.sentry-step{margin:0;font-size:11px;letter-spacing:.13em;color:#cfd6ff;
  text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.65)}
.sentry-dots{display:flex;gap:6px}
.sentry-dots span{width:14px;height:2px;background:rgba(215,220,255,.22);transition:background .3s var(--ease)}
.sentry-dots span.on{background:var(--cyan);box-shadow:0 0 6px rgba(34,230,255,.7)}
.sentry-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:5;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);opacity:.55;
  background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.sentry-skip{position:absolute;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:6;background:none;border:none;cursor:pointer;padding:9px 6px;
  font-family:inherit;font-size:11.5px;letter-spacing:.08em;color:var(--faint);transition:color .3s var(--ease),opacity .3s var(--ease)}
.sentry-skip:hover{color:var(--cyan)}
.sentry-skip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* the portal leans in a step to meet you as you arrive inside */
#inside.hero-greet{animation:heroGreet 1.25s var(--ease)}
@keyframes heroGreet{from{transform:scale3d(1.045,1.045,1) translateY(8px)}to{transform:scale3d(1,1,1) translateY(0)}}
@media (min-width:761px){
  /* landscape plate geometry (1600x1067) */
  .sentry-scene{width:max(100vw,149.95dvh);aspect-ratio:1600/1067;
    --lg-l:41.6%;--lg-t:13.2%;--lg-w:11.6%;
    --sb-t:35.4%;
    --bl-l:21%;--bl-w:53%;--bl-t1:11.7%;--bl-t2:38.2%}
  .sentry-bulbs span{width:7px;height:7px}
}
@media (max-width:760px){
  .sentry-start{padding:11px 30px 9px;font-size:13.5px}
  body.has-sentry .hero{padding-top:172px}
}
@media (prefers-reduced-motion:reduce){
  .sentry-bulbs span{animation:none;background:#7d641a}
  .sentry-blink,.sentry-cue-line{animation:none}
  body.has-sentry header.site{transition:none}
  #inside.hero-greet{animation:none}
}

/* ===== 下部ドック（CENTER 第2弾 Phase B・2026-10-29／作り直し 同日） =====
   入口演出・セレクターの邪魔にならない浮遊ピル型。演出中は center-dock.js が
   .dock-in を付けない（=画面外に待機）。フッター末尾はドック分あける。
   作り直し：4項目を均等幅（flex:1）にし、ラベルは絶対に折らない（nowrap）。
   選択中は MENISCUS 文法——アイコンの背後にビーズ（ピル型ハイライト）が
   スッと広がる。押下時は項目全体が小さく沈む。 */
footer.site{padding-bottom:96px}
.dock{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:70;display:flex;width:min(428px,calc(100vw - 24px));padding:6px;border-radius:999px;background:rgba(10,12,32,.88);border:1px solid rgba(120,140,255,.35);box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(190,200,255,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:translate(-50%,140%);visibility:hidden;transition:transform .5s cubic-bezier(.22,.8,.24,1),visibility 0s .5s}
.dock.dock-in{transform:translate(-50%,0);visibility:visible;transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.dock-item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px 4px;border-radius:999px;color:#aeb6e8;text-decoration:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .08s ease,color .2s ease}
.dock-item:active{transform:scale(.93)}
.dock-ic{position:relative;width:42px;height:27px;display:flex;align-items:center;justify-content:center;flex:none}
.dock-ic::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg,rgba(34,211,238,.30),rgba(34,211,238,.13));box-shadow:0 0 14px rgba(34,211,238,.35),inset 0 0 0 1px rgba(34,211,238,.5);opacity:0;transform:scale(.55);transition:opacity .25s ease,transform .38s cubic-bezier(.22,.8,.24,1)}
.dock-item[aria-current="page"]{color:#eafcff}
.dock-item[aria-current="page"] .dock-ic::before{opacity:1;transform:scale(1)}
.dock-ic svg{position:relative;width:21px;height:21px;flex:none}
.dock-ic img{position:relative;width:21px;height:21px;border-radius:6px;flex:none}
.dock-lb{font-size:10px;font-weight:600;letter-spacing:.03em;line-height:1.2;white-space:nowrap}
.dock-item[data-dock="center"]{position:relative}
.dock-item.dock-on::after{content:"";position:absolute;top:3px;right:calc(50% - 21px);width:6px;height:6px;border-radius:50%;background:#37d99a;box-shadow:0 0 6px rgba(55,217,154,.8)}
.dock-face svg{width:24px;height:24px;border-radius:50%;background:#1a1e45;padding:2px;box-sizing:border-box}
.dock-face img{width:24px;height:24px;object-fit:cover;border-radius:50%}

/* ===== フラッグシップ特集（2026-10-30 アズサバイバル3D完全フラッグシップ化） =====
   ヒーロー直下・セレクター手前に置く全面KV特集。夕景の写真が主役なので
   装飾はグラデの影と小さいキッカーだけに抑え、文字は左下に静かに置く。 */
.flagship{position:relative;overflow:hidden;margin:36px 0 4px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.fg-media{position:absolute;inset:0}
.fg-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.fg-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,18,.93) 0%,rgba(5,6,18,.55) 44%,rgba(5,6,18,.06) 74%),linear-gradient(90deg,rgba(5,6,18,.5) 0%,transparent 56%)}
.fg-inner{position:relative;max-width:1020px;margin:0 auto;padding:296px 20px 34px}
.fg-kicker{font-family:var(--disp);font-size:11px;letter-spacing:.34em;color:#f2a54a;font-weight:800}
.fg-kicker span{margin-left:14px;font-size:10.5px;letter-spacing:.22em;color:#e6d7bf}
.fg-genre{margin-top:16px;font-family:var(--disp);font-size:10.5px;letter-spacing:.26em;color:rgba(238,241,255,.78);font-weight:700}
.fg-name{margin-top:6px;font-size:clamp(32px,5.4vw,46px);line-height:1.25;font-weight:800;letter-spacing:.02em;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.fg-tag{margin-top:8px;font-size:16px;font-weight:700;color:#ffd9a8}
.fg-lead{margin-top:10px;max-width:560px;font-size:13.5px;line-height:1.9;color:rgba(233,236,255,.94)}
.fg-btns{margin-top:20px;gap:10px 12px;align-items:center}
.fg-btns .btn{flex:1 1 100%;max-width:430px;text-align:center;font-size:16.5px;padding:17px 30px;border-radius:10px;letter-spacing:.14em}
.fg-btns .btn.ghost{flex:0 0 auto;font-size:11.5px;padding:8px 15px;border-radius:999px;letter-spacing:.06em;background:rgba(10,12,32,.45)}
.fg-meta{margin-top:14px;font-size:11.5px;letter-spacing:.04em;color:rgba(200,205,240,.85)}
@media (max-width:760px){
  .flagship{margin-top:26px}
  .fg-inner{padding:172px 20px 26px}
  .fg-name{font-size:31px}
  .fg-tag{font-size:15px}
  .fg-lead{font-size:13px}
  .fg-btns .btn{padding:16px 22px}
  .fg-btns .btn.ghost{padding:8px 14px}
}

/* ===== dock tab views — センター／プロフをポータル内で完結（2026-10-31） =====
   切替は portal-tabs.js。ゲームビュー以外ではサイトフッターを隠し、
   ビュー自体がドック分の余白を持つ。 */
body.tv-on footer.site{display:none}
.tabview{padding:26px 0 118px}
.tv-wrap{max-width:640px}
.tv-kicker{font-size:10px;letter-spacing:.34em;color:var(--faint);font-weight:700}
.tv-title{font-size:22px;margin:2px 0 16px;letter-spacing:.06em;line-height:1.4}
.tv-card{border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,var(--panel2),var(--panel));padding:18px;margin:0 0 14px;box-shadow:inset 0 1px 0 rgba(34,230,255,.10),0 10px 26px rgba(0,0,0,.30)}
.tv-loading{color:var(--sub);font-size:12px}
.tv-note{color:var(--sub);font-size:12px;margin-top:8px}
.tv-label{font-size:11px;letter-spacing:.18em;color:var(--sub);font-weight:700;margin-bottom:10px}
.tv-member{display:flex;gap:14px;align-items:center}
.tv-face{width:54px;height:54px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:#1a1e45;flex:none;color:var(--sub)}
.tv-face img{width:100%;height:100%;object-fit:cover}
.tv-face svg{width:58%;height:58%}
.tv-face-lg{width:72px;height:72px}
.tv-name{font-size:16px;font-weight:800;line-height:1.4}
.tv-id,.tv-state{font-size:11.5px;color:var(--sub);line-height:1.5}
.tv-coin{display:flex;align-items:baseline;gap:8px}
.tv-coinnum{font-family:var(--disp);font-size:34px;font-weight:700;line-height:1}
.tv-coinunit{font-size:12px;color:var(--sub)}
.tv-buy{margin-top:12px}
.tv-txt{font-size:13px;color:var(--body)}
.tv-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tv-srow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:13px}
.tv-srow:first-of-type{border-top:0}
.tv-sval{color:var(--sub);white-space:nowrap}
.tv-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tv-chips::-webkit-scrollbar{display:none}
.tv-chip{flex:none;border:1px solid var(--line);background:rgba(34,230,255,.05);color:var(--body);font-size:12px;padding:6px 12px;border-radius:999px;cursor:pointer;font-family:inherit}
.tv-chip[aria-pressed="true"]{background:rgba(34,230,255,.16);color:#eafcff;border-color:rgba(34,230,255,.55)}
.tv-rrow{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-top:1px solid var(--line2);font-size:13px}
.tv-rrow:first-of-type{border-top:0}
.tv-rk{font-family:var(--disp);width:22px;color:var(--faint);flex:none}
.tv-rname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-rscore{font-family:var(--disp);color:var(--sub)}
.tv-myrank{margin-top:10px;font-size:12.5px;color:#eafcff}
.tv-rows{padding-top:6px;padding-bottom:6px}
.tv-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line2);text-decoration:none;font-size:13.5px}
.tv-row:first-child{border-top:0}
.tv-row-note{font-size:11px;color:var(--faint);white-space:nowrap}
.tv-prow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line2);font-size:13px}
.tv-prow:first-of-type{border-top:0}
.tv-logout{margin-top:4px;width:100%;background:none;border:1px solid var(--line);color:var(--sub);border-radius:8px;padding:12px;font-size:13px;font-family:inherit;cursor:pointer}
.tv-logout:disabled{opacity:.55}