*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  min-height:100vh;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
p{margin:0}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-fill);color:#fff;text-shadow:none}

/* ---------- scrollbars ----------
   The browser's default bar is the one light rectangle on the whole page.
   Firefox takes the two-colour form, WebKit and Chromium take the parts. */
html{scrollbar-width:thin;scrollbar-color:var(--accent-edge) var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid var(--ink);
  background:linear-gradient(180deg,var(--accent),var(--accent-fill));background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}
::-webkit-scrollbar-corner{background:var(--ink)}

/* ---------- furigana ----------
   The reading sits over the title and is never selected with it. */
.furi-stack{display:block}
.furi-stack .furi-line{display:block;font-family:var(--f-body);font-size:max(10px,.5em);font-weight:400;
  letter-spacing:.04em;line-height:1.4;color:var(--bone-3);margin-bottom:.2em;user-select:none}
.furi-stack .furi-base{display:block}
.dos-jp .furi-line,.rl-win-jp .furi-line,h2 .furi-line,h3 .furi-line{color:var(--bone-2)}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ambient layers ---------- */
#bg{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%}
#veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(255,61,119,.10),transparent 55%),
    radial-gradient(90% 70% at 100% 100%,rgba(53,228,232,.07),transparent 60%),
    linear-gradient(180deg,rgba(6,6,11,.15) 0%,rgba(6,6,11,.72) 100%);
}
/* manga screentone + broadcast scanlines */
#tone{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) .6px,transparent .7px);
  background-size:auto,6px 6px;
  mix-blend-mode:screen;
}

/* ============================================================
   GATE — jellyfin-style server connect → profile → key
   ============================================================ */
#gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--s5);
  background:radial-gradient(110% 90% at 50% 0%,rgba(14,15,32,.80) 0%,rgba(6,6,11,.95) 70%);backdrop-filter:blur(2px)}
#gate.out{animation:gateout .7s var(--tap) forwards}
@keyframes gateout{to{opacity:0;transform:scale(1.06);visibility:hidden}}

.gate-wrap{width:min(880px,100%);text-align:center}
.mark{font-family:var(--f-mark);letter-spacing:.16em;line-height:1}
.gate-mark{font-size:clamp(34px,7vw,68px);position:relative;display:inline-block;
  color:var(--bone);text-shadow:2px 0 0 rgba(255,61,119,.65),-2px 0 0 rgba(53,228,232,.55)}
.gate-mark::after{content:'';position:absolute;left:-6%;right:-6%;bottom:-14px;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent)}
.gate-sub{font-family:var(--f-ui);font-size:12px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--bone-3);margin-top:var(--s6)}
.gate-jp{font-size:13px;letter-spacing:.5em;color:var(--bone-3);margin-top:var(--s5)}

.boot{margin:var(--s7) auto 0;width:min(420px,100%);text-align:left;font-family:var(--f-ui);font-size:12.5px;color:var(--bone-3)}
.boot-line{display:flex;justify-content:space-between;gap:var(--s4);padding:5px 0;opacity:0;
  border-bottom:1px solid var(--line-soft);animation:bootin .3s var(--tap) forwards}
.boot-line b{color:var(--good);font-weight:500;letter-spacing:.08em}
@keyframes bootin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.boot-bar{height:2px;background:var(--line);margin-top:var(--s5);overflow:hidden;border-radius:2px}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:bootbar 1.9s var(--tap) forwards}
@keyframes bootbar{to{width:100%}}

/* the sign-in card: a name and a password, and never a list of who exists */
.keypad .who{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.keypad .who .av{width:88px;height:88px;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.9)}
.keypad .who .av svg{display:block;width:100%;height:100%}
.keypad .who .nm{font-family:var(--f-ui);font-size:16px;font-weight:600;letter-spacing:.05em}
.signin{display:flex;flex-direction:column;gap:var(--s2)}
.signin label{margin-top:var(--s3)}
.signin label:first-child{margin-top:0}
.signin .btn{margin-top:var(--s4)}
.gate-actions{display:flex;gap:var(--s3);justify-content:center;margin-top:var(--s4);flex-wrap:wrap}

.keypad{margin:var(--s6) auto 0;width:min(360px,100%);text-align:left}
.keypad label{display:block;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-3);margin-bottom:var(--s2)}
.field{display:flex;gap:var(--s2)}
input[type=password],input[type=text],input[type=search]{
  flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;color:var(--bone);font-family:var(--f-ui);letter-spacing:.12em}
input::placeholder{color:var(--bone-3);letter-spacing:.06em}
input:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(53,228,232,.14)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r-s);border:1px solid var(--line);
  background:var(--panel-2);color:var(--bone);transition:.2s var(--tap);white-space:nowrap}
.btn:hover{border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.btn.pri{background:var(--accent-fill);color:#fff;border-color:var(--accent-edge);font-weight:600;letter-spacing:.14em}
.btn.pri:hover{background:var(--accent-edge);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 14px;font-size:11.5px}
.hint{font-family:var(--f-ui);font-size:12px;font-weight:500;color:var(--bone-2);margin-top:var(--s3);letter-spacing:.03em}
.err{color:var(--crit);font-family:var(--f-ui);font-size:12px;margin-top:var(--s3);min-height:18px;letter-spacing:.06em}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ============================================================
   SHELL
   ============================================================ */
#app{position:relative;z-index:3;display:none;min-height:100vh}
#app.on{display:block}

.hud{position:sticky;top:0;z-index:30;height:var(--hud);display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s5);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(9,10,20,.94),rgba(9,10,20,.78));backdrop-filter:blur(14px)}
.hud .brand{font-family:var(--f-mark);font-size:15px;letter-spacing:.2em;color:var(--bone)}
.hud .brand span{color:var(--accent)}
.hud .div{width:1px;height:22px;background:var(--line)}
/* one line, always: the label and the countdown keep their place and the
   title between them is cut short, with the whole of it on hover */
.ticker{flex:1;min-width:0;overflow:hidden;display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  font-family:var(--f-ui);font-size:12.5px;color:var(--bone-2);letter-spacing:.05em}
.ticker .tk-t{min-width:0;max-width:40ch;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .16s}
.ticker .tk-t:hover{color:var(--accent-2)}
.ticker b{flex:none;color:var(--accent-2);font-weight:500}
.ticker .lbl{flex:none;color:var(--bone-3);text-transform:uppercase;font-size:10px;letter-spacing:.24em}
.clock{font-family:var(--f-ui);font-size:12.5px;color:var(--bone-2);display:flex;gap:var(--s4);align-items:center}
.clock .zone{color:var(--bone-3);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.hud .who{display:flex;align-items:center;gap:var(--s2);font-family:var(--f-ui);font-size:12px}
.hud .who .av{width:28px;height:28px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.hud .who .av svg{display:block;width:100%;height:100%}

.layout{display:grid;grid-template-columns:var(--rail) 1fr;align-items:start}
.layout>*{min-width:0}

/* The rail holds a dozen sections; on a short window the last of them used to
   fall off the bottom with no way to reach them. It scrolls now, with the bar
   hidden, and the scroll is kept inside the rail so the page does not move
   with it. */
.rail{position:sticky;top:var(--hud);height:calc(100vh - var(--hud));display:flex;flex-direction:column;
  gap:var(--s1);padding:var(--s4) 0;border-right:1px solid var(--line-soft);background:rgba(9,10,20,.5);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{width:0;height:0;display:none}
/* a hint that there is more, which fades out at either end */
.rail{--fade:18px;
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%)}
.rail.at-top{mask-image:linear-gradient(180deg,#000 calc(100% - var(--fade)),transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--fade)),transparent 100%)}
.rail.at-end{mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade))}
.rail.at-top.at-end{mask-image:none;-webkit-mask-image:none}
.rail .nav{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:14px 0;
  color:var(--bone-3);position:relative;transition:.2s var(--tap)}
.rail .nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rail .nav em{font-style:normal;font-family:var(--f-ui);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.rail .nav:hover{color:var(--bone)}
.rail .nav.on{color:var(--bone)}
.rail .nav.on::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--accent)}
.rail .nav .badge{position:absolute;top:8px;right:20px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--accent);color:var(--accent-ink);font-family:var(--f-ui);font-size:9.5px;font-weight:700;
  display:grid;place-items:center}
.rail .spacer{flex:1}

main{padding:var(--s6) var(--s5) var(--s8);max-width:var(--max);width:100%;min-width:0;overflow:visible}
.view{display:none;animation:viewin .4s var(--tap)}
.view.on{display:block}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.eyebrow{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:var(--s3)}
.eyebrow::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.h-sec{font-family:var(--f-ui);font-size:clamp(20px,2.4vw,27px);letter-spacing:.02em;margin:var(--s3) 0 var(--s2)}
.sub{color:var(--bone-2);font-size:14px;max-width:62ch}
.block{margin-bottom:var(--s8)}
.block-head{margin-bottom:var(--s5)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(135deg,rgba(255,61,119,.10),rgba(53,228,232,.05) 55%,transparent);
  padding:clamp(24px,4vw,48px);margin-bottom:var(--s7)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.014) 22px 23px)}
.hero-jp{position:absolute;right:-10px;top:-24px;font-family:var(--f-body);font-weight:700;
  font-size:clamp(80px,14vw,190px);line-height:1;color:rgba(255,255,255,.035);letter-spacing:.05em;pointer-events:none;user-select:none}
.hero h1{font-family:var(--f-ui);font-size:clamp(26px,4.2vw,46px);line-height:1.1;letter-spacing:-.01em;max-width:18ch}
.hero .lede{margin-top:var(--s4);color:var(--bone-2);max-width:56ch;font-size:15.5px}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

.nowbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-top:var(--s6)}
.nowcell{background:var(--ink);padding:var(--s4) var(--s5)}
.nowcell .k{font-family:var(--f-ui);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-3)}
.nowcell .v{font-family:var(--f-ui);font-size:clamp(20px,2.4vw,26px);margin-top:6px;letter-spacing:.02em}
.nowcell .v small{font-size:12px;color:var(--bone-3);letter-spacing:.14em;margin-left:4px}
/* which title the countdown belongs to, and a warmer colour under the hour */
.nowcell .sub{font-family:var(--f-ui);font-size:11.5px;color:var(--bone-3);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.nowcell .v.hot{color:var(--accent)}


/* a block heading that leads somewhere: the shelf is a taste, the section is the rest */
.block-head{position:relative}
.block-head .head-link{position:absolute;right:0;top:0}
@media (max-width:640px){
  .block-head .head-link{position:static;margin-top:var(--s3)}
}
/* a fact that is also a way in */
.nowcell .sub.link{cursor:pointer;text-align:left;max-width:100%}
.nowcell .sub.link:hover{color:var(--accent)}

/* ---- the 18+ switch ----
   Sits beside your name because it is about this visit rather than about the
   console: it is off every time you arrive, whatever it was when you left. */
.nsfw{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:99px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--bone-3);
  font-family:var(--f-ui);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  cursor:pointer;transition:.18s var(--tap);flex:none}
.nsfw:hover{border-color:var(--bone-3);color:var(--bone-2)}
.nsfw i{width:26px;height:14px;border-radius:99px;background:var(--line);position:relative;transition:.18s}
.nsfw i::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;
  background:var(--bone-3);transition:.18s}
.nsfw[aria-checked="true"]{border-color:var(--crit);color:#ffb4c6;background:rgba(255,45,85,.12)}
.nsfw[aria-checked="true"] i{background:var(--crit)}
.nsfw[aria-checked="true"] i::after{left:14px;background:#fff}
@media (max-width:900px){ .nsfw .nsfw-k{display:none} .nsfw{padding:6px 8px} }