/* Rennko — Tokyo night-street neon. Tube lettering, flickering signs, wet asphalt. */
:root {
  --paper: #0b0714; --paper-2: #1a1029; --white: #140d22; --ink: #fff3fb; --ink-2: #d9c9ea; --gray: #9a88b5;
  --red: #ff2bd6; --red-dark: #b5179a; --gold: #ffe14d; --cyan: #22f0ff; --lime: #39ff88; --night: #07040d;
  --tone: radial-gradient(circle, rgba(255,255,255,.18) 0.9px, transparent 1.25px) 0 0 / 6px 6px;
  --tone-fine: radial-gradient(circle, rgba(255,255,255,.07) 0.7px, transparent 1px) 0 0 / 4px 4px;
  --display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", Impact, sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", -apple-system, system-ui, sans-serif;
  --border: 2px solid var(--cyan);
  --mast-h: 64px;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 500 16px/1.55 var(--body); overflow-x: hidden;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased; user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--red); color: var(--white); }
img { display: block; }
[hidden] { display: none !important; }

/* ---------- masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 30; height: var(--mast-h); display: flex; align-items: center; gap: 18px;
  padding: 0 20px; background: var(--paper); border-bottom: var(--border);
}
.mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px; background: var(--tone-fine); opacity: .5; pointer-events: none; }
body.desktop.mac .mast { padding-left: 86px; -webkit-app-region: drag; }
body.desktop .mast button { -webkit-app-region: no-drag; }
.logo { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; }
.hanko {
  display: grid; place-items: center; width: 38px; height: 38px; background: var(--red); color: var(--white);
  font: 28px/1 var(--display); border-radius: 6px; transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--ink);
  transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.logo:hover .hanko { transform: rotate(6deg) scale(1.12); }
.logo .word { font: 26px/1 var(--display); letter-spacing: .04em; }
.mast nav { display: flex; gap: 4px; margin-left: 12px; }
.mast nav button {
  display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 3px; padding: 7px 14px 6px;
  border: 2px solid transparent; background: none; border-radius: 0; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .12s;
}
.mast nav button b { font: 17px/1 var(--display); letter-spacing: 0; }
.mast nav button:hover { border-color: var(--ink); transform: rotate(-2deg); }
.mast nav button.on { background: var(--ink); color: var(--white); transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--red); }
.mast nav .gear { justify-content: center; padding: 0 10px; }
.mast nav .gear:hover svg { animation: spin .8s cubic-bezier(.3,1.5,.5,1); }
@keyframes spin { to { transform: rotate(180deg); } }

.ki {
  margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; background: var(--white);
  border: var(--border); box-shadow: 4px 4px 0 var(--ink); min-width: 210px; transition: transform .12s;
}
.ki:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.ki-glyph { display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: var(--white); font: 20px/1 var(--display); border-radius: 50%; }
.ki.pulse .ki-glyph { animation: kipulse .35s ease-out; }
@keyframes kipulse { 40% { transform: scale(1.35) rotate(-10deg); background: var(--red); } }
.ki-body { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 10px; flex: 1; text-align: left; }
.ki-num { font: 19px/1 var(--display); font-variant-numeric: tabular-nums; }
.ki-rank { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--red); text-align: right; }
.ki-bar { grid-column: 1 / -1; height: 7px; margin-top: 5px; border: 2px solid var(--ink); background: var(--white); overflow: hidden; }
.ki-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--red) 0 5px, var(--red-dark) 5px 8px); transition: width .3s; }

main#view { min-height: calc(100vh - var(--mast-h)); padding: 34px 28px 160px; max-width: 1320px; margin: 0 auto; }

/* ---------- shared bits ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: var(--border); background: var(--white);
  font-weight: 900; font-size: 14px; letter-spacing: .04em; box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s; text-decoration: none; color: var(--ink);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.btn.ink { background: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--red); }
.btn.ink:hover { box-shadow: 5px 5px 0 var(--red); }
.btn.red { background: var(--red); color: var(--white); }
.btn.big { font: 22px/1 var(--display); padding: 16px 26px; letter-spacing: .03em; box-shadow: 6px 6px 0 var(--ink); }
.btn.big.ink { box-shadow: 6px 6px 0 var(--red); }
.btn.big:hover { animation: jitter .18s steps(2) infinite; }
@keyframes jitter { 0% { transform: translate(-2px,-2px) rotate(-.6deg); } 100% { transform: translate(-1px,-3px) rotate(.6deg); } }
.btn[disabled] { opacity: .5; pointer-events: none; }

.kicker { display: inline-block; background: var(--ink); color: var(--white); font-weight: 900; font-size: 12px; letter-spacing: .2em; padding: 4px 10px; text-transform: uppercase; }
.narr { background: var(--white); border: var(--border); padding: 12px 16px; box-shadow: 4px 4px 0 var(--ink); }
.say {
  position: relative; background: var(--white); border: var(--border); border-radius: 50% / 46%; padding: 18px 28px; font-weight: 700; text-align: center;
}
.say::after { content: ""; position: absolute; left: 22%; bottom: -16px; width: 22px; height: 22px; background: var(--white); border-right: var(--border); border-bottom: var(--border); transform: skewX(30deg) rotate(30deg); }

.sfx {
  font: 64px/1 var(--display); color: var(--ink); -webkit-text-stroke: 7px var(--white); paint-order: stroke fill; letter-spacing: -.02em;
  transform: rotate(-10deg); pointer-events: none; white-space: nowrap;
}

/* focus lines (集中線) */
.focus {
  position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0deg .7deg, transparent .7deg 3.1deg, var(--ink) 3.1deg 3.5deg, transparent 3.5deg 7deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 82%); mask: radial-gradient(closest-side, transparent 38%, #000 82%);
  pointer-events: none;
}
.focus.live { animation: flicker .24s steps(1) infinite; }
@keyframes flicker { 50% { transform: rotate(1.7deg) scale(1.02); } }

/* ---------- shelf ---------- */
.splash {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 4px solid var(--ink); background: var(--white);
  box-shadow: 8px 8px 0 var(--ink); margin-bottom: 46px; overflow: hidden; min-height: 300px;
}
.splash .hero { position: relative; padding: 34px 38px; overflow: hidden; border-right: 4px solid var(--ink); }
.splash .hero .focus { opacity: .14; inset: -60%; }
.splash h1 { position: relative; font: clamp(40px, 5.4vw, 74px)/.95 var(--display); margin: 14px 0 12px; letter-spacing: -.01em; }
.splash h1 em { font-style: normal; color: var(--red); }
.splash .hero p { position: relative; max-width: 460px; margin: 0 0 20px; font-weight: 700; color: var(--ink-2); }
.splash .stats { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.splash .stat { border: var(--border); padding: 8px 14px; background: var(--paper); }
.splash .stat b { display: block; font: 26px/1 var(--display); }
.splash .stat span { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.splash .pick { position: relative; display: flex; flex-direction: column; background: var(--tone-fine), var(--paper); }
.splash .pick .label { padding: 12px 18px; border-bottom: var(--border); background: var(--white); font-weight: 900; letter-spacing: .12em; font-size: 12px; text-transform: uppercase; display: flex; justify-content: space-between; }
.splash .pick .panel { flex: 1; border: 0; box-shadow: none; margin: 0; min-height: 230px; }

.sec-head { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 22px; }
.sec-head h2 { margin: 0; font: 34px/1 var(--display); }
.sec-head h2 small { font: 900 13px/1 var(--body); letter-spacing: .18em; color: var(--red); margin-left: 10px; vertical-align: middle; }
.sec-head .rule { flex: 1; height: 4px; background: var(--ink); margin-bottom: 8px; }

.shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; perspective: 1400px; padding: 10px 6px 0; }
.shelf-board { height: 18px; margin: 14px -10px 0; background: var(--ink); box-shadow: 0 8px 0 var(--tone-fine); position: relative; }
.shelf-board::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: var(--tone-fine); opacity: .6; }

.tank {
  --c: var(--red); position: relative; aspect-ratio: 2 / 3; border: none; padding: 0; background: none; transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,1.4,.4,1); transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
}
.tank:hover { transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-12px) scale(1.04); }
.tank .face {
  position: absolute; inset: 0; display: flex; flex-direction: column; border: 4px solid var(--ink); background: var(--white); overflow: hidden;
  box-shadow: 8px 10px 0 rgba(20,18,16,.85); transform-origin: left center; backface-visibility: hidden; transition: transform .6s cubic-bezier(.6,0,.3,1);
}
.tank .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); z-index: 2; }
.tank .top { display: flex; justify-content: space-between; padding: 8px 10px 6px 18px; font-size: 10px; font-weight: 900; letter-spacing: .2em; border-bottom: 3px solid var(--ink); }
.tank .art { position: relative; flex: 1; display: grid; place-items: center; background: var(--c); overflow: hidden; }
.tank .art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.28) 1.1px, transparent 1.5px) 0 0/7px 7px; -webkit-mask: linear-gradient(160deg, transparent 30%, #000); mask: linear-gradient(160deg, transparent 30%, #000); }
.tank .art .focus { opacity: 0; transition: opacity .2s; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,253,248,.9) 0 .8deg, transparent .8deg 5deg); }
.tank:hover .art .focus { opacity: 1; animation: flicker .24s steps(1) infinite; }
.tank .big { position: relative; font: clamp(64px, 7.5vw, 112px)/1 var(--display); color: var(--white); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); transition: transform .3s cubic-bezier(.2,1.8,.4,1); }
.tank:hover .big { transform: scale(1.12) rotate(-6deg); }
.tank .meta { padding: 10px 12px 12px 18px; border-top: 3px solid var(--ink); background: var(--white); text-align: left; }
.tank .vol { font: 13px/1 var(--display); color: var(--c); -webkit-text-stroke: .4px var(--ink); }
.tank .name { font: clamp(16px, 1.6vw, 22px)/1.05 var(--display); margin: 4px 0 8px; }
.tank .dots { display: flex; gap: 3px; flex-wrap: wrap; }
.tank .dots i { width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; }
.tank .dots i.on { background: var(--red); }
.tank.opening .face { transform: rotateY(-115deg); }
.tank .inside { position: absolute; inset: 0; overflow: hidden; border: 4px solid var(--ink); background: var(--white); display: grid; place-items: center; font: 22px/1.2 var(--display); text-align: center; padding: 14px; transform: translateZ(-1px); }
.tank .inside .focus { opacity: .25; inset: -30%; }

.recent { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scrollbar-width: thin; }
.recent .chip { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; border: var(--border); background: var(--white); padding: 6px 14px 6px 6px; box-shadow: 3px 3px 0 var(--ink); font-weight: 900; transition: transform .12s; }
.recent .chip:hover { transform: translate(-2px,-2px) rotate(-1deg); }
.recent .chip .g { width: 36px; height: 36px; display: grid; place-items: center; background: var(--ink); color: var(--white); font: 20px/1 var(--display); }

/* ---------- volume page ---------- */
.vol-head { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-bottom: 30px; padding: 22px 26px; border: 4px solid var(--ink); background: var(--white); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.vol-head .focus { opacity: .1; inset: -80%; }
.vol-head .g { position: relative; width: 104px; height: 104px; display: grid; place-items: center; background: var(--c); color: var(--white); font: 64px/1 var(--display); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; border: 4px solid var(--ink); transform: rotate(-5deg); box-shadow: 5px 5px 0 var(--ink); }
.vol-head h1 { position: relative; margin: 6px 0 4px; font: clamp(34px, 4vw, 56px)/1 var(--display); }
.vol-head p { position: relative; margin: 0; font-weight: 700; color: var(--ink-2); }
.vol-head .count { position: relative; text-align: right; }
.vol-head .count b { display: block; font: 44px/1 var(--display); }
.vol-head .count span { font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.vol-tabs { display: flex; gap: 8px; margin: -10px 0 26px; flex-wrap: wrap; }
.vol-tabs button { border: var(--border); background: var(--white); padding: 6px 12px; font-weight: 900; font-size: 13px; transition: transform .12s; }
.vol-tabs button:hover { transform: translateY(-2px) rotate(-2deg); }
.vol-tabs button.on { background: var(--ink); color: var(--white); }
.vol-tabs button b { font-family: var(--display); font-weight: 400; margin-right: 6px; }

.page { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 132px; grid-auto-flow: dense; gap: 14px; padding: 14px; background: var(--ink); border: 4px solid var(--ink); box-shadow: 10px 10px 0 rgba(20,18,16,.25); }

.panel {
  --pc: var(--red); position: relative; grid-column: span var(--c, 4); grid-row: span var(--r, 2); border: 0; padding: 0; text-align: left;
  background: var(--white); overflow: visible; isolation: isolate; outline: 3px solid var(--white); outline-offset: -3px;
  transition: transform .2s cubic-bezier(.2,1.6,.4,1), z-index 0s .2s; animation: panelIn .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(26px) rotate(var(--rot, 1.5deg)) scale(.94); } }
.panel:hover { transform: scale(1.03) rotate(var(--rot, -.6deg)); z-index: 5; transition: transform .2s cubic-bezier(.2,1.6,.4,1), z-index 0s; }
.panel .clip { position: absolute; inset: 0; overflow: hidden; }
.panel .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1) contrast(1.45) brightness(1.1); transition: filter .35s, transform .6s cubic-bezier(.2,1,.3,1); }
.panel .clip::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(20,18,16,.42) .85px, transparent 1.25px) 0 0 / 5px 5px; mix-blend-mode: multiply; transition: opacity .35s; pointer-events: none; }
.panel:hover .shot { filter: none; transform: scale(1.06); }
.panel:hover .clip::after { opacity: 0; }
.panel .ink-art { position: absolute; inset: 0; display: grid; place-items: center; background: var(--white); transition: background .3s; }
.panel .ink-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--ink) 1px, transparent 1.5px) 0 0/7px 7px; -webkit-mask: linear-gradient(200deg, transparent 40%, #000 120%); mask: linear-gradient(200deg, transparent 40%, #000 120%); opacity: .45; }
.panel .ink-art .kanji { position: relative; font: min(13vw, 190px)/1 var(--display); color: transparent; -webkit-text-stroke: 3px var(--ink); transform: rotate(-6deg); transition: color .3s, transform .4s cubic-bezier(.2,1.6,.4,1); }
.panel:hover .ink-art { background: var(--pc); }
.panel:hover .ink-art .kanji { color: var(--white); transform: rotate(4deg) scale(1.08); }
.panel .speed { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(100deg, transparent 0 14px, rgba(255,253,248,.85) 14px 16px, transparent 16px 40px); mix-blend-mode: screen; transition: opacity .2s; pointer-events: none; }
.panel:hover .speed { opacity: .8; animation: zoomlines .35s linear infinite; }
@keyframes zoomlines { to { background-position: 80px 0; } }
.panel .gl { position: absolute; left: 10px; top: 10px; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; background: var(--white); border: var(--border); font: 26px/1 var(--display); transition: transform .25s cubic-bezier(.2,1.8,.4,1), background .2s; }
.panel:hover .gl { transform: rotate(-12deg) scale(1.15); background: var(--pc); color: var(--white); -webkit-text-stroke: 1.5px var(--ink); }
.panel .cap { position: absolute; left: 10px; bottom: 10px; z-index: 2; max-width: calc(100% - 20px); }
.panel .cap b { display: inline-block; background: var(--ink); color: var(--white); font: 18px/1.1 var(--display); padding: 6px 10px 7px; }
.panel .cap span { display: block; width: fit-content; max-width: 340px; background: var(--white); border: 3px solid var(--ink); border-top: 0; padding: 4px 10px 6px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.panel[style*="--r: 1"] .cap span, .panel.small .cap span { display: none; }
.panel .fx-sfx { position: absolute; right: -10px; top: -18px; z-index: 6; font-size: 44px; -webkit-text-stroke-width: 6px; opacity: 0; transform: rotate(-12deg) scale(.4); transition: opacity .12s, transform .3s cubic-bezier(.2,2,.4,1); }
.panel:hover .fx-sfx { opacity: 1; transform: rotate(-12deg) scale(1); }
.panel .tag { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-size: 10px; font-weight: 900; letter-spacing: .16em; padding: 3px 7px; background: var(--white); border: 2px solid var(--ink); }
.panel .tag.soon { background: var(--ink); color: var(--white); }
.panel .read { position: absolute; right: 10px; top: 10px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border: 3px solid var(--red); color: var(--red); border-radius: 50%; font: 20px/1 var(--display); background: rgba(255,253,248,.85); transform: rotate(14deg); }
.panel .new { position: absolute; right: 10px; top: 12px; z-index: 3; background: var(--red); color: var(--white); font-weight: 900; font-size: 11px; letter-spacing: .14em; padding: 3px 8px; transform: rotate(4deg); box-shadow: 2px 2px 0 var(--ink); }
.panel:active { transform: scale(.98); }

/* ---------- chapter sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: rgba(20,18,16,.55); padding: 40px 24px; }
.sheet .pagecard {
  position: relative; max-width: 1080px; margin: 0 auto; background: var(--paper); border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  display: grid; grid-template-columns: 1.05fr 1fr; animation: sheetIn .45s cubic-bezier(.2,1.3,.3,1);
}
@keyframes sheetIn { from { transform: translateY(40px) rotate(2deg); opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sheet .close { position: absolute; right: -18px; top: -18px; z-index: 5; width: 46px; height: 46px; border: var(--border); background: var(--red); color: var(--white); font: 22px/1 var(--display); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); transition: transform .2s cubic-bezier(.2,1.8,.4,1); }
.sheet .close:hover { transform: rotate(90deg) scale(1.1); }
.sheet .art { position: relative; border-right: 4px solid var(--ink); min-height: 460px; background: var(--white); overflow: hidden; }
.sheet .art .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sheet .art .tone { position: absolute; inset: 0; background: radial-gradient(circle, rgba(20,18,16,.4) .9px, transparent 1.3px) 0 0/5px 5px; mix-blend-mode: multiply; -webkit-mask: linear-gradient(to top, #000, transparent 55%); mask: linear-gradient(to top, #000, transparent 55%); }
.sheet .art .kanji-bg { position: absolute; inset: 0; display: grid; place-items: center; background: var(--pc); }
.sheet .art .kanji-bg b { font: 300px/1 var(--display); color: var(--white); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 12px 12px 0 var(--ink); transform: rotate(-8deg); }
.sheet .art .kanji-bg .focus { inset: -40%; opacity: .5; background: repeating-conic-gradient(from 0deg, rgba(255,253,248,.85) 0 .8deg, transparent .8deg 5deg); }
.sheet .art .sfx { position: absolute; right: 18px; bottom: 24px; font-size: 86px; -webkit-text-stroke-width: 10px; animation: sfxPop .5s .25s cubic-bezier(.2,2,.4,1) both; }
@keyframes sfxPop { from { transform: rotate(-10deg) scale(.2); opacity: 0; } }
.sheet .art .chno { position: absolute; left: 0; top: 18px; background: var(--ink); color: var(--white); padding: 6px 16px 6px 14px; font-weight: 900; letter-spacing: .2em; font-size: 12px; }
.sheet .info { padding: 34px 34px 30px; display: flex; flex-direction: column; gap: 16px; }
.sheet h1 { margin: 0; font: clamp(36px, 4vw, 56px)/1 var(--display); }
.sheet .say { margin: 6px 0 12px; align-self: flex-start; max-width: 100%; font-size: 17px; }
.sheet .summary { font-size: 15px; line-height: 1.65; }
.sheet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: f; }
.sheet ol li { counter-increment: f; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; font-size: 14px; font-weight: 700; }
.sheet ol li::before { content: counter(f); display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--white); font: 14px/1 var(--display); transform: rotate(-4deg); }
.sheet .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.sheet .links { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet .links a { font-size: 13px; font-weight: 900; color: var(--ink); text-decoration: underline 2px; text-underline-offset: 3px; cursor: pointer; }
.sheet .links a:hover { color: var(--red); }
.sheet .hint { font-size: 12px; font-weight: 700; color: var(--gray); }
.sheet .readcount { font-size: 12px; font-weight: 900; letter-spacing: .14em; color: var(--red); }

/* ---------- reader ---------- */
#reader { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--ink); animation: readerIn .5s cubic-bezier(.7,0,.2,1); }
@keyframes readerIn { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.reader-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--paper); border-bottom: 4px solid var(--ink); }
body.desktop.mac .reader-bar { padding-left: 86px; -webkit-app-region: drag; }
body.desktop .reader-bar button { -webkit-app-region: no-drag; }
.reader-bar .btn { padding: 6px 12px; font-size: 13px; }
.reader-title { flex: 1; display: flex; gap: 10px; align-items: baseline; min-width: 0; white-space: nowrap; overflow: hidden; }
.reader-title b { font: 20px/1 var(--display); }
.reader-title span { font-size: 13px; font-weight: 700; color: var(--gray); overflow: hidden; text-overflow: ellipsis; }
#reader iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* ---------- cards ---------- */
.book-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: 26px; }
.book-head h1 { margin: 0; font: 52px/1 var(--display); }
.book-head .prog { width: min(360px, 40vw); }
.prog .bar { height: 22px; border: var(--border); background: var(--white); overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.prog .bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--red) 0 8px, var(--red-dark) 8px 12px); transition: width .6s cubic-bezier(.2,1.4,.4,1); }
.prog .lbl { display: flex; justify-content: space-between; font-weight: 900; font-size: 13px; margin-bottom: 6px; }
.book-vol { margin: 30px 0 14px; display: flex; align-items: center; gap: 12px; font: 22px/1 var(--display); }
.book-vol i { flex: 1; height: 3px; background: var(--ink); }
.book-vol span { font: 900 12px/1 var(--body); letter-spacing: .14em; color: var(--gray); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; perspective: 900px; }
.card {
  --pc: var(--red); position: relative; aspect-ratio: 5 / 7; border: 4px solid var(--ink); background: var(--white); padding: 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink); transition: transform .3s cubic-bezier(.2,1.6,.4,1); transform: rotateX(var(--rx,0)) rotateY(var(--ry,0));
}
.card:hover { transform: rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px) scale(1.04); }
.card .no { position: absolute; left: 6px; top: 6px; z-index: 2; background: var(--ink); color: var(--white); font: 11px/1 var(--display); padding: 3px 6px; }
.card .pic { position: relative; flex: 1; background: var(--pc); overflow: hidden; display: grid; place-items: center; }
.card .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.4); mix-blend-mode: multiply; }
.card .pic b { position: relative; font: 66px/1 var(--display); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.card .shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 48%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: var(--sx, 150%) 0; mix-blend-mode: overlay; pointer-events: none; }
.card .nm { padding: 7px 8px 8px; border-top: 3px solid var(--ink); font: 14px/1.1 var(--display); text-align: left; }
.card .nm small { display: block; font: 900 10px/1 var(--body); letter-spacing: .12em; color: var(--red); margin-top: 4px; }
.card.locked { background: var(--ink); }
.card.locked .pic { background: var(--ink); }
.card.locked .pic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,253,248,.18) 1px, transparent 1.4px) 0 0/6px 6px; }
.card.locked .pic b { color: var(--ink); -webkit-text-stroke: 2px rgba(255,253,248,.5); text-shadow: none; }
.card.locked .nm { color: rgba(255,253,248,.6); border-color: rgba(255,253,248,.3); }
.card.locked .q { position: absolute; right: 8px; bottom: 6px; font: 40px/1 var(--display); color: var(--red); }

/* ---------- ren room ---------- */
.room { display: grid; grid-template-columns: 420px 1fr; gap: 30px; align-items: start; }
.room .stage { position: sticky; top: calc(var(--mast-h) + 24px); border: 4px solid var(--ink); background: var(--white); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.room .stage .focus { opacity: .12; }
.room .stage.charging .focus { opacity: .55; animation: flicker .1s steps(1) infinite; }
.room .stage .ren-big { position: relative; height: 380px; display: grid; place-items: center; cursor: pointer; }
.room .stage .ren-big svg { width: 300px; height: 300px; }
.room .stage .rank { position: relative; border-top: 4px solid var(--ink); padding: 14px 18px; background: var(--paper); }
.room .stage .rank b { font: 30px/1 var(--display); }
.room .stage .rank small { display: block; font-weight: 900; font-size: 12px; letter-spacing: .14em; color: var(--red); }
.room .stage .rank .prog { margin-top: 10px; }
.room .stage .tip { padding: 10px 18px 14px; font-size: 13px; font-weight: 700; background: var(--paper); color: var(--ink-2); }
.room h2 { font: 26px/1 var(--display); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.room h2 small { font: 900 12px/1 var(--body); letter-spacing: .14em; color: var(--gray); }
.room section { margin-bottom: 30px; }
.kipanel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kipanel .narr b { display: block; font: 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.kipanel .narr span { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.ups { display: grid; gap: 12px; }
.up { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; border: var(--border); background: var(--white); padding: 10px 12px; box-shadow: 4px 4px 0 var(--ink); text-align: left; transition: transform .12s; }
.up:hover { transform: translate(-2px,-2px); }
.up:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.up .g { width: 56px; height: 56px; display: grid; place-items: center; background: var(--ink); color: var(--white); font: 30px/1 var(--display); }
.up b { font: 18px/1.1 var(--display); }
.up p { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.up .cost { font: 18px/1 var(--display); text-align: right; }
.up .cost small { display: block; font: 900 10px/1 var(--body); letter-spacing: .14em; color: var(--gray); margin-top: 4px; }
.up.poor { opacity: .55; }
.up.poor .cost { color: var(--red); }
.outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.outfit { border: var(--border); background: var(--white); padding: 10px 12px; text-align: left; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s; }
.outfit b { display: block; font: 16px/1.1 var(--display); }
.outfit small { font-weight: 900; font-size: 11px; letter-spacing: .1em; color: var(--gray); }
.outfit.on { background: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--red); }
.outfit.on small { color: var(--red); }
.outfit.lock { opacity: .45; pointer-events: none; background: var(--tone-fine), var(--white); }
.outfit:hover { transform: rotate(-2deg); }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ach { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; border: var(--border); background: var(--white); padding: 8px 10px; }
.ach .g { width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid var(--red); color: var(--red); border-radius: 50%; font: 22px/1 var(--display); transform: rotate(-10deg); }
.ach b { display: block; font-size: 14px; font-weight: 900; }
.ach span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.ach.lock { background: var(--tone-fine), var(--paper); }
.ach.lock .g { border-color: var(--gray); color: var(--gray); }
.ach.lock b, .ach.lock span { color: var(--gray); }

/* ---------- Ren dock ---------- */
#ren-dock { position: fixed; right: 18px; bottom: 6px; z-index: 50; display: flex; align-items: flex-end; pointer-events: none; }
#ren-dock .ren-wrap { width: 140px; height: 140px; pointer-events: auto; cursor: pointer; touch-action: none; }
#ren-dock.hide { transform: translateY(170px); transition: transform .4s cubic-bezier(.6,0,.3,1); }
#ren-dock { transition: transform .5s cubic-bezier(.2,1.5,.4,1); }
.bubble {
  position: relative; margin: 0 -14px 104px 0; max-width: 300px; background: var(--white); border: 3px solid var(--ink); border-radius: 26px; padding: 12px 18px 13px;
  font-weight: 700; font-size: 15px; line-height: 1.4; pointer-events: auto; box-shadow: 4px 4px 0 var(--ink); animation: bubbleIn .3s cubic-bezier(.2,1.8,.4,1); transform-origin: 100% 100%;
}
.bubble::after { content: ""; position: absolute; right: 18px; bottom: -15px; width: 20px; height: 20px; background: var(--white); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: skewX(-30deg) rotate(-5deg); }
.bubble .ja { display: block; font-size: 12px; color: var(--red); font-weight: 900; margin-bottom: 2px; }
.bubble.shout { border-radius: 4px; clip-path: none; font-family: var(--display); font-weight: 400; font-size: 18px; transform: rotate(-2deg); }
@keyframes bubbleIn { from { transform: scale(.3) rotate(8deg); opacity: 0; } }

/* Ren SVG parts */
.ren { width: 100%; height: 100%; overflow: visible; }
.ren .bob { animation: bob 2.6s ease-in-out infinite; transform-origin: 100px 180px; }
@keyframes bob { 50% { transform: translateY(-5px) scaleY(1.02); } }
.ren .ear-l { transform-origin: 66px 58px; } .ren .ear-r { transform-origin: 134px 58px; }
.ren.twitch .ear-l { animation: twitchL .4s; } .ren.twitch .ear-r { animation: twitchR .4s .08s; }
@keyframes twitchL { 40% { transform: rotate(-14deg); } } @keyframes twitchR { 40% { transform: rotate(14deg); } }
.ren .tail { transform-origin: 128px 158px; animation: swish 3.2s ease-in-out infinite; }
@keyframes swish { 50% { transform: rotate(-12deg); } }
.ren .scarf-end { transform-origin: 122px 144px; animation: flap 1.4s ease-in-out infinite; }
@keyframes flap { 50% { transform: rotate(12deg) skewY(-6deg); } }
.ren .eyes > g { display: none; }
.ren .e-open { display: inline !important; }
.ren.blink .e-open, .ren.happy .e-open, .ren.charge .e-open, .ren.sleep .e-open, .ren.wow .e-open { display: none !important; }
.ren.blink .e-shut, .ren.sleep .e-shut { display: inline !important; }
.ren.happy .e-happy { display: inline !important; }
.ren.charge .e-fierce { display: inline !important; }
.ren.wow .e-wow { display: inline !important; }
.ren .mouth > * { display: none; }
.ren .m-cat { display: inline !important; }
.ren.talking .m-cat, .ren.charge .m-cat, .ren.wow .m-cat { display: none !important; }
.ren.talking .m-open { display: inline !important; animation: yap .16s steps(1) infinite; }
.ren.charge .m-grit, .ren.wow .m-o { display: inline !important; }
@keyframes yap { 50% { transform: scaleY(.35); } }
.ren .m-open { transform-origin: 100px 112px; }
.ren .squish { transform-origin: 100px 180px; transition: transform .25s cubic-bezier(.2,2.2,.4,1); }
.ren.poked .squish { transform: scale(1.12, .86); transition: transform .05s; }
.ren.charge .squish { animation: shake .06s steps(2) infinite; }
@keyframes shake { 50% { transform: translate(2px,-1px) scale(1.04,.97); } }
.ren .aura { opacity: 0; transition: opacity .3s; transform-origin: 100px 110px; }
.ren.has-aura .aura { opacity: .9; animation: aura 1.2s ease-in-out infinite; }
.ren.charge .aura { opacity: 1; animation: aura .2s steps(2) infinite; }
@keyframes aura { 50% { transform: scale(1.06, 1.1); } }
.ren .acc { display: none; }
.ren.w-hachimaki .acc-hachimaki, .ren.w-beret .acc-beret, .ren.w-crown .acc-crown, .ren.w-glasses .acc-glasses { display: inline; }
.ren.w-gold .body-ink { fill: #1d1608; stroke: var(--gold); stroke-width: 3; }
.ren .zzz { display: none; font: 22px var(--display); fill: var(--ink); }
.ren.sleep .zzz { display: inline; animation: zz 2s ease-in-out infinite; }
@keyframes zz { 50% { transform: translate(6px,-8px); opacity: .5; } }
.ren .sweat { display: none; }
.ren.wow .sweat { display: inline; }

/* ---------- cover ---------- */
#cover { position: fixed; inset: 0; z-index: 90; background: var(--paper); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
#cover .focus { opacity: .9; inset: -30%; }
#cover .burst { position: absolute; width: min(70vmin, 640px); aspect-ratio: 1; background: var(--white); clip-path: polygon(50% 0,58% 30%,85% 8%,70% 38%,100% 40%,73% 55%,95% 80%,63% 68%,55% 100%,45% 70%,15% 92%,30% 62%,0 55%,28% 42%,8% 15%,40% 30%); border: 0; animation: burstSpin 18s linear infinite; }
@keyframes burstSpin { to { transform: rotate(360deg); } }
#cover .stack { position: relative; display: grid; justify-items: center; text-align: center; }
#cover .title { font: clamp(80px, 15vw, 210px)/.85 var(--display); color: var(--ink); -webkit-text-stroke: 10px var(--white); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--red); transform: rotate(-4deg); letter-spacing: -.02em; animation: titleIn .7s cubic-bezier(.2,1.8,.4,1) both .1s; }
@keyframes titleIn { from { transform: rotate(-4deg) scale(2.4); opacity: 0; filter: blur(6px); } }
#cover .jp { position: absolute; left: -70px; top: 0; writing-mode: vertical-rl; font: 34px/1 var(--display); background: var(--red); color: var(--white); padding: 12px 8px; border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); animation: slideDown .5s .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes slideDown { from { transform: translateY(-60px); opacity: 0; } }
#cover .ren-cover { width: min(34vmin, 300px); height: min(34vmin, 300px); margin-top: -30px; animation: renPop .6s .45s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes renPop { from { transform: translateY(80px) scale(.3); opacity: 0; } }
#cover .sub { margin-top: 6px; font-weight: 900; letter-spacing: .3em; font-size: 14px; background: var(--ink); color: var(--white); padding: 6px 14px; animation: slideDown .4s .8s both; }
#cover .press { margin-top: 26px; font: 22px/1 var(--display); animation: blinkP 1.1s steps(1) infinite 1.2s; opacity: 0; }
@keyframes blinkP { 0% { opacity: 1; } 50% { opacity: 0; } }
#cover.leave { animation: coverOut .55s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes coverOut { to { transform: perspective(1600px) rotateY(-95deg); transform-origin: left center; opacity: .2; } }
#cover { transform-origin: left center; }

/* ---------- onboarding ---------- */
#onboard { position: fixed; inset: 0; z-index: 85; background: var(--paper); overflow-y: auto; padding: 40px 24px; }
.ob { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding: 14px; background: var(--ink); }
.ob .p { position: relative; background: var(--white); min-height: 220px; padding: 22px; overflow: hidden; animation: panelIn .5s cubic-bezier(.2,1.4,.4,1) both; }
.ob .p .focus { opacity: .1; }
.ob .p1 { grid-column: span 4; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 10px; }
.ob .p1 .renbox { height: 220px; }
.ob .p2 { grid-column: span 2; display: grid; place-items: center; background: var(--red); }
.ob .p2 .sfx { font-size: 72px; }
.ob .p3 { grid-column: span 6; }
.ob .p4 { grid-column: span 6; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ob h2 { margin: 0 0 16px; font: 30px/1.1 var(--display); position: relative; }
.ob h2 small { display: block; margin-top: 6px; }
.ob .choices { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { position: relative; text-align: left; border: 4px solid var(--ink); background: var(--white); padding: 20px; min-height: 170px; box-shadow: 6px 6px 0 var(--ink); transition: transform .15s; overflow: hidden; }
.choice b { display: block; font: 26px/1.1 var(--display); margin-bottom: 8px; }
.choice p { margin: 0; font-weight: 700; font-size: 14px; color: var(--ink-2); max-width: 340px; }
.choice .g { position: absolute; right: -10px; bottom: -30px; font: 140px/1 var(--display); color: transparent; -webkit-text-stroke: 3px var(--paper-2); }
.choice:hover { transform: translate(-3px,-3px) rotate(-1deg); }
.choice.on { background: var(--ink); color: var(--white); box-shadow: 6px 6px 0 var(--red); }
.choice.on p { color: rgba(255,253,248,.8); }
.choice.on .g { -webkit-text-stroke-color: rgba(255,253,248,.18); }
.choice.on::after { content: "決定"; position: absolute; right: 16px; top: 14px; border: 3px solid var(--red); color: var(--red); font: 18px/1 var(--display); padding: 6px; transform: rotate(12deg); background: var(--white); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-weight: 900; font-size: 12px; letter-spacing: .14em; }
input.ink { font: 700 20px var(--body); border: var(--border); padding: 10px 14px; background: var(--white); width: 280px; outline: none; box-shadow: 4px 4px 0 var(--ink); user-select: text; }
input.ink:focus { box-shadow: 4px 4px 0 var(--red); }

/* ---------- settings ---------- */
#settings { border: 4px solid var(--ink); padding: 0; background: var(--paper); box-shadow: 10px 10px 0 var(--ink); width: min(520px, 92vw); color: var(--ink); }
#settings::backdrop { background: rgba(20,18,16,.55); }
#settings .head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: var(--ink); color: var(--white); }
#settings .head b { font: 24px/1 var(--display); }
#settings .head button { background: none; border: 0; color: var(--white); font: 22px/1 var(--display); }
#settings .body { padding: 18px; display: grid; gap: 16px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.row b { display: block; font-weight: 900; }
.row small { font-weight: 700; color: var(--gray); }
.seg { display: flex; border: var(--border); }
.seg button { border: 0; background: var(--white); padding: 7px 12px; font-weight: 900; font-size: 13px; }
.seg button + button { border-left: var(--border); }
.seg button.on { background: var(--ink); color: var(--white); }
.danger { color: var(--red); }

/* ---------- fx layers ---------- */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 95; pointer-events: none; }
#floaters { position: fixed; inset: 0; z-index: 96; pointer-events: none; }
.floater { position: absolute; font: 22px/1 var(--display); color: var(--ink); -webkit-text-stroke: 4px var(--white); paint-order: stroke fill; animation: floatUp .9s cubic-bezier(.2,1,.4,1) forwards; white-space: nowrap; }
.floater.red { color: var(--red); }
.floater.big { font-size: 34px; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(.4) rotate(var(--r,0)); opacity: 0; } 20% { transform: translate(-50%, -14px) scale(1.15) rotate(var(--r,0)); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1) rotate(var(--r,0)); opacity: 0; } }
#toasts { position: fixed; right: 18px; top: calc(var(--mast-h) + 16px); z-index: 97; display: grid; gap: 10px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; width: 320px; background: var(--white); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--red); padding: 10px 14px 10px 10px; animation: toastIn .45s cubic-bezier(.2,1.6,.4,1), toastOut .4s 3.6s forwards; }
.toast .g { width: 54px; height: 54px; display: grid; place-items: center; border: 4px solid var(--red); color: var(--red); border-radius: 50%; font: 26px/1 var(--display); transform: rotate(-12deg); }
.toast small { display: block; font-weight: 900; font-size: 11px; letter-spacing: .16em; color: var(--red); }
.toast b { display: block; font: 18px/1.1 var(--display); }
.toast span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
@keyframes toastIn { from { transform: translateX(120%) rotate(6deg); } }
@keyframes toastOut { to { transform: translateX(130%); opacity: 0; } }

#wipe { position: fixed; inset: 0; z-index: 99; pointer-events: none; background: var(--ink); clip-path: polygon(120% 0, 140% 0, 140% 100%, 100% 100%); }
#wipe .wipe-tone { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,253,248,.25) 1px, transparent 1.4px) 0 0/7px 7px; }

#impact { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center; background: var(--white); pointer-events: none; overflow: hidden; }
#impact .focus { inset: -30%; animation: flicker .08s steps(1) infinite; }
#impact b { position: relative; font: clamp(90px, 16vw, 220px)/1 var(--display); color: var(--ink); -webkit-text-stroke: 12px var(--white); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--red); animation: impactText .5s cubic-bezier(.2,2,.4,1) both; }
@keyframes impactText { from { transform: scale(3) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); } }
#impact.inv { filter: invert(1); }
body.shake #app { animation: screenShake .35s cubic-bezier(.3,0,.6,1); }
@keyframes screenShake { 10% { transform: translate(-8px, 4px) rotate(-.5deg); } 30% { transform: translate(7px,-5px) rotate(.4deg); } 50% { transform: translate(-5px,3px); } 70% { transform: translate(3px,-2px); } }

.stampbig { position: fixed; left: 50%; top: 46%; z-index: 98; pointer-events: none; display: grid; place-items: center; width: 260px; height: 260px; margin: -130px 0 0 -130px; border: 10px solid var(--red); border-radius: 50%; color: var(--red); background: rgba(255,253,248,.9); text-align: center; animation: stampIn .5s cubic-bezier(.3,1.6,.5,1) both, stampOut .5s 1.5s forwards; }
.stampbig b { display: block; font: 76px/1 var(--display); }
.stampbig span { display: block; font: 900 15px/1.2 var(--body); letter-spacing: .1em; color: var(--ink); max-width: 200px; }
.stampbig::before { content: ""; position: absolute; inset: 8px; border: 3px solid var(--red); border-radius: 50%; }
@keyframes stampIn { 0% { transform: scale(2.6) rotate(-30deg); opacity: 0; } 60% { transform: scale(.92) rotate(-10deg); opacity: 1; } 100% { transform: scale(1) rotate(-12deg); } }
@keyframes stampOut { to { transform: scale(1.15) rotate(-12deg); opacity: 0; } }

.rankup { position: fixed; inset: 0; z-index: 98; display: grid; place-items: center; background: var(--white); cursor: pointer; overflow: hidden; animation: fadeIn .2s; }
.rankup .focus { inset: -30%; animation: flicker .12s steps(1) infinite; }
.rankup .inner { position: relative; text-align: center; display: grid; justify-items: center; }
.rankup .lbl { font-weight: 900; letter-spacing: .4em; background: var(--red); color: var(--white); padding: 6px 16px; border: 3px solid var(--ink); animation: slideDown .4s .2s both; }
.rankup h1 { margin: 10px 0 0; font: clamp(70px, 11vw, 150px)/1 var(--display); -webkit-text-stroke: 10px var(--white); paint-order: stroke fill; text-shadow: 8px 8px 0 var(--red); animation: impactText .55s cubic-bezier(.2,2,.4,1) both; }
.rankup .ren-rk { width: 220px; height: 220px; animation: renPop .5s .3s cubic-bezier(.2,1.8,.4,1) both; }
.rankup p { font-weight: 900; margin: 0; background: var(--ink); color: var(--white); padding: 8px 16px; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .shelf { grid-template-columns: repeat(3, 1fr); }
  .room { grid-template-columns: 1fr; }
  .room .stage { position: relative; top: 0; }
}
@media (max-width: 760px) {
  :root { --mast-h: 58px; }
  .mast { gap: 8px; padding: 0 10px; }
  .logo .word { display: none; }
  .mast nav { margin-left: 0; }
  .mast nav button { padding: 6px 7px; font-size: 9px; white-space: nowrap; }
  .mast nav button b { font-size: 14px; white-space: nowrap; }
  .ki { min-width: 0; padding: 4px 8px 4px 4px; }
  .ki-rank, .ki-bar { display: none; }
  main#view { padding: 20px 14px 150px; }
  .splash { grid-template-columns: 1fr; }
  .splash .hero { border-right: 0; border-bottom: 4px solid var(--ink); padding: 24px; }
  .shelf { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .page { grid-auto-rows: 110px; gap: 10px; padding: 10px; }
  .panel { grid-column: span 12 !important; grid-row: span 2 !important; }
  .vol-head { grid-template-columns: auto 1fr; }
  .vol-head .count { display: none; }
  .vol-head .g { width: 72px; height: 72px; font-size: 44px; }
  .sheet { padding: 20px 10px; }
  .sheet .pagecard { grid-template-columns: 1fr; }
  .sheet .art { min-height: 260px; border-right: 0; border-bottom: 4px solid var(--ink); }
  .sheet .close { right: 6px; top: 6px; }
  .ob .p1, .ob .p2, .ob .p3, .ob .p4 { grid-column: span 6; }
  .ob .p1 { grid-template-columns: 1fr; }
  .ob .choices { grid-template-columns: 1fr; }
  .book-head { grid-template-columns: 1fr; }
  .book-head .prog { width: 100%; }
  .kipanel { grid-template-columns: 1fr 1fr; }
  #ren-dock .ren-wrap { width: 96px; height: 96px; }
  .bubble { margin-bottom: 74px; max-width: 230px; font-size: 13px; }
  #cover .jp { left: -10px; top: -60px; font-size: 22px; }
}
body.calm *, body.calm *::before, body.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

/* =================== NEON =================== */
/* tube(c): a lit neon tube in colour c */
body {
  background-color: var(--night);
  background-image:
    radial-gradient(ellipse 70% 40% at 15% -5%, rgba(255,43,214,.16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 95% 0%, rgba(34,240,255,.12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 72px),
    linear-gradient(#0d0818, #07040d 60%);
  background-attachment: fixed;
}
@keyframes neonFlicker { 0%, 18%, 20.5%, 23%, 54%, 56.5%, 100% { opacity: 1; } 19%, 22%, 55% { opacity: .35; } }
@keyframes buzz { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.n-pink { --g: var(--red); } .n-cyan { --g: var(--cyan); }

.mast { background: rgba(9,5,16,.9); backdrop-filter: blur(8px); border-bottom: 2px solid var(--red); box-shadow: 0 0 10px var(--red), 0 0 30px rgba(255,43,214,.35); }
.mast::after { display: none; }
.hanko { background: transparent; color: var(--red); border: 2px solid var(--red); box-shadow: 0 0 8px var(--red), inset 0 0 8px rgba(255,43,214,.6); text-shadow: 0 0 6px var(--red), 0 0 16px var(--red); }
.logo .word { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--red), 0 0 24px var(--red), 0 0 48px var(--red); animation: neonFlicker 7s infinite; }
.mast nav button { color: var(--ink-2); }
.mast nav button b { color: #fff; }
.mast nav button:hover { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.mast nav button.on { background: transparent; color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan), 0 0 22px rgba(34,240,255,.5), inset 0 0 10px rgba(34,240,255,.4); }
.mast nav button.on b { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.ki { background: var(--white); border: 2px solid var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 24px rgba(255,225,77,.35), inset 0 0 8px rgba(255,225,77,.25); }
.ki:hover { box-shadow: 0 0 12px var(--gold), 0 0 34px rgba(255,225,77,.5); }
.ki-glyph { background: transparent; color: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 8px var(--gold); text-shadow: 0 0 8px var(--gold); }
.ki-num { color: #fff; text-shadow: 0 0 8px rgba(255,225,77,.8); }
.ki-rank { color: var(--gold); }
.ki-bar, .prog .bar { background: var(--night); border: 1.5px solid rgba(255,255,255,.25); }
.ki-bar i, .prog .bar i { background: linear-gradient(90deg, var(--red), var(--cyan)); box-shadow: 0 0 10px var(--red); }

.btn { background: rgba(34,240,255,.06); color: #fff; border: 2px solid var(--cyan); box-shadow: 0 0 8px var(--cyan), inset 0 0 8px rgba(34,240,255,.3); text-shadow: 0 0 6px var(--cyan); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 14px var(--cyan), 0 0 34px rgba(34,240,255,.5), inset 0 0 12px rgba(34,240,255,.45); }
.btn:active { transform: translateY(1px); box-shadow: 0 0 4px var(--cyan); }
.btn.ink, .btn.red { background: rgba(255,43,214,.1); color: #fff; border-color: var(--red); box-shadow: 0 0 8px var(--red), 0 0 22px rgba(255,43,214,.45), inset 0 0 10px rgba(255,43,214,.4); text-shadow: 0 0 8px var(--red); }
.btn.ink:hover, .btn.red:hover, .btn.big.ink { box-shadow: 0 0 14px var(--red), 0 0 40px rgba(255,43,214,.6), inset 0 0 14px rgba(255,43,214,.5); }
.btn.big { box-shadow: 0 0 12px var(--cyan), 0 0 30px rgba(34,240,255,.4), inset 0 0 12px rgba(34,240,255,.35); }
.kicker { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); box-shadow: 0 0 6px var(--gold), inset 0 0 6px rgba(255,225,77,.3); text-shadow: 0 0 6px var(--gold); }
.narr { background: rgba(20,13,34,.85); border: 1.5px solid rgba(255,255,255,.16); box-shadow: none; color: var(--ink-2); }
.say { background: rgba(20,13,34,.95); border: 2px solid var(--cyan); box-shadow: 0 0 10px var(--cyan), inset 0 0 10px rgba(34,240,255,.25); color: #fff; }
.say::after { background: #140d22; border-color: var(--cyan); }
.sfx { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 4px #fff, 0 0 10px var(--red), 0 0 24px var(--red), 0 0 50px var(--red); }
.focus { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(34,240,255,.7) 0deg .45deg, transparent .45deg 3.4deg, rgba(255,43,214,.7) 3.4deg 3.8deg, transparent 3.8deg 7deg); }

.splash { background: rgba(20,13,34,.9); border: 2px solid var(--red); box-shadow: 0 0 12px var(--red), 0 0 40px rgba(255,43,214,.3), inset 0 0 16px rgba(255,43,214,.15); }
.splash .hero { border-right: 2px solid rgba(255,43,214,.6); }
.splash .hero .focus { opacity: .08; }
.splash h1 { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.7), 0 0 26px rgba(34,240,255,.5); }
.splash h1 em { color: var(--red); text-shadow: 0 0 6px var(--red), 0 0 20px var(--red), 0 0 46px var(--red); animation: neonFlicker 9s infinite 2s; }
.splash .hero p { color: var(--ink-2); }
.splash .stat { background: transparent; border: 1.5px solid rgba(34,240,255,.6); box-shadow: inset 0 0 10px rgba(34,240,255,.15); }
.splash .stat b { color: #fff; text-shadow: 0 0 8px var(--cyan); }
.splash .pick { background: var(--night); }
.splash .pick .label { background: transparent; border-bottom: 1.5px solid rgba(255,255,255,.15); color: var(--cyan); text-shadow: 0 0 6px var(--cyan); }
.sec-head h2 { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 20px var(--cyan); }
.sec-head h2 small { color: var(--red); text-shadow: 0 0 6px var(--red); }
.sec-head .rule { height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan), 0 0 20px var(--cyan); }

.tank .face { background: #0f0a1b; border: 2px solid var(--c); box-shadow: 0 0 10px var(--c), 0 0 34px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
.tank:hover .face { box-shadow: 0 0 16px var(--c), 0 0 60px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 20px color-mix(in srgb, var(--c) 40%, transparent); }
.tank .spine { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), transparent); }
.tank .top { border-bottom: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--ink-2); }
.tank .art { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%), #0b0714; }
.tank .art::before { background: var(--tone-fine); -webkit-mask: none; mask: none; }
.tank .art .focus { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 70%, transparent) 0 .6deg, transparent .6deg 5deg); }
.tank .big { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 4px #fff, 0 0 12px var(--c), 0 0 30px var(--c), 0 0 60px var(--c); animation: buzz 2.4s ease-in-out infinite; }
.tank .meta { background: transparent; border-top: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent); }
.tank .vol { color: var(--c); -webkit-text-stroke: 0; text-shadow: 0 0 6px var(--c); }
.tank .name { color: #fff; }
.tank .dots i { border: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent); }
.tank .dots i.on { background: var(--c); box-shadow: 0 0 6px var(--c); }
.tank .inside { background: #0b0714; border: 2px solid var(--c); color: var(--c); text-shadow: 0 0 10px var(--c); }
.shelf-board { height: 4px; background: var(--red); box-shadow: 0 0 10px var(--red), 0 0 30px var(--red), 0 18px 40px rgba(255,43,214,.25); }
.shelf-board::after { top: 14px; height: 60px; background: linear-gradient(rgba(255,43,214,.12), transparent); opacity: 1; }
.recent .chip { background: rgba(20,13,34,.9); border: 1.5px solid var(--cyan); box-shadow: 0 0 8px rgba(34,240,255,.6); color: #fff; }
.recent .chip .g { background: transparent; color: var(--red); text-shadow: 0 0 8px var(--red); border: 1.5px solid var(--red); }

.vol-head { background: rgba(20,13,34,.9); border: 2px solid var(--c); box-shadow: 0 0 12px var(--c), 0 0 40px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.vol-head .focus { opacity: .06; }
.vol-head .g { background: transparent; color: #fff; -webkit-text-stroke: 0; border: 2px solid var(--c); box-shadow: 0 0 10px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); text-shadow: 0 0 8px var(--c), 0 0 24px var(--c); }
.vol-head h1 { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 22px var(--c); }
.vol-head .count b { color: var(--c); text-shadow: 0 0 10px var(--c); }
.vol-tabs button { background: rgba(20,13,34,.9); border: 1.5px solid rgba(255,255,255,.2); color: var(--ink-2); }
.vol-tabs button:hover { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.vol-tabs button.on { background: transparent; color: var(--red); border-color: var(--red); box-shadow: 0 0 8px var(--red), inset 0 0 8px rgba(255,43,214,.35); text-shadow: 0 0 6px var(--red); }

.page { background: transparent; border: 0; box-shadow: none; padding: 6px; gap: 18px; }
.panel { background: #0f0a1b; outline: 0; box-shadow: 0 0 0 2px var(--pc), 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent), 0 0 30px color-mix(in srgb, var(--pc) 25%, transparent); }
.panel:hover { box-shadow: 0 0 0 2px var(--pc), 0 0 20px var(--pc), 0 0 60px color-mix(in srgb, var(--pc) 55%, transparent); }
.panel .shot { filter: grayscale(1) contrast(1.25) brightness(.6); }
.panel .clip::after { background: linear-gradient(140deg, color-mix(in srgb, var(--pc) 85%, transparent), rgba(34,240,255,.55)), repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); mix-blend-mode: color; }
.panel .clip::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); pointer-events: none; transition: opacity .35s; }
.panel:hover .clip::before { opacity: 0; }
.panel .ink-art { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pc) 18%, transparent), transparent 70%), #0b0714; }
.panel .ink-art::before { background: var(--tone-fine); -webkit-mask: none; mask: none; opacity: 1; }
.panel .ink-art .kanji { color: transparent; -webkit-text-stroke: 2.5px var(--pc); filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(0 0 18px var(--pc)); }
.panel:hover .ink-art { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pc) 35%, transparent), transparent 75%), #0b0714; }
.panel:hover .ink-art .kanji { color: #fff; }
.panel .speed { background: repeating-linear-gradient(100deg, transparent 0 14px, color-mix(in srgb, var(--pc) 70%, transparent) 14px 15px, transparent 15px 40px); }
.panel .gl { background: rgba(11,7,20,.85); border: 2px solid var(--pc); color: #fff; box-shadow: 0 0 8px var(--pc); text-shadow: 0 0 8px var(--pc); }
.panel:hover .gl { background: rgba(11,7,20,.85); -webkit-text-stroke: 0; color: #fff; box-shadow: 0 0 14px var(--pc), inset 0 0 10px var(--pc); }
.panel .cap b { background: rgba(9,5,16,.88); color: #fff; border-left: 3px solid var(--pc); text-shadow: 0 0 8px var(--pc); }
.panel .cap span { background: rgba(9,5,16,.82); border: 0; border-left: 3px solid color-mix(in srgb, var(--pc) 50%, transparent); color: var(--ink-2); }
.panel .read { background: rgba(9,5,16,.8); border: 2px solid var(--lime); color: var(--lime); box-shadow: 0 0 8px var(--lime), inset 0 0 8px rgba(57,255,136,.4); text-shadow: 0 0 8px var(--lime); }
.panel .new { background: transparent; border: 1.5px solid var(--red); color: #fff; box-shadow: 0 0 8px var(--red), inset 0 0 8px rgba(255,43,214,.5); text-shadow: 0 0 6px var(--red); animation: neonFlicker 5s infinite; }
.panel .tag { background: rgba(9,5,16,.85); border: 1.5px solid var(--gold); color: var(--gold); text-shadow: 0 0 6px var(--gold); }
.panel .tag.soon { background: rgba(9,5,16,.85); color: var(--cyan); border-color: var(--cyan); text-shadow: 0 0 6px var(--cyan); }
.panel .fx-sfx { text-shadow: 0 0 4px #fff, 0 0 10px var(--pc), 0 0 26px var(--pc), 0 0 50px var(--pc); }

.sheet { background: rgba(5,3,10,.78); backdrop-filter: blur(4px); }
.sheet .pagecard { background: #0f0a1b; border: 2px solid var(--pc); box-shadow: 0 0 16px var(--pc), 0 0 60px color-mix(in srgb, var(--pc) 40%, transparent); }
.sheet .close { background: transparent; color: var(--red); border: 2px solid var(--red); box-shadow: 0 0 10px var(--red), inset 0 0 8px rgba(255,43,214,.5); text-shadow: 0 0 8px var(--red); background-color: #0f0a1b; }
.sheet .art { background: #0b0714; border-right: 2px solid color-mix(in srgb, var(--pc) 60%, transparent); }
.sheet .art .tone { background: linear-gradient(to top, rgba(11,7,20,.9), transparent 55%); mix-blend-mode: normal; -webkit-mask: none; mask: none; }
.sheet .art .kanji-bg { background: radial-gradient(circle, color-mix(in srgb, var(--pc) 28%, transparent), transparent 70%), #0b0714; }
.sheet .art .kanji-bg b { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 8px #fff, 0 0 24px var(--pc), 0 0 60px var(--pc), 0 0 100px var(--pc); animation: buzz 2s infinite; }
.sheet .art .kanji-bg .focus { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--pc) 60%, transparent) 0 .5deg, transparent .5deg 5deg); opacity: .4; }
.sheet .art .chno { background: rgba(9,5,16,.85); color: var(--gold); border: 1.5px solid var(--gold); border-left: 0; text-shadow: 0 0 6px var(--gold); }
.sheet .art .sfx { text-shadow: 0 0 4px #fff, 0 0 12px var(--pc), 0 0 30px var(--pc), 0 0 60px var(--pc); }
.sheet h1 { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 24px var(--pc); }
.sheet .summary { color: var(--ink-2); }
.sheet ol li { color: var(--ink-2); }
.sheet ol li::before { background: transparent; color: var(--cyan); border: 1.5px solid var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.sheet .links a { color: var(--cyan); text-shadow: 0 0 6px rgba(34,240,255,.6); }
.sheet .readcount { color: var(--lime); text-shadow: 0 0 6px var(--lime); }
.reader-bar { background: #0b0714; border-bottom: 2px solid var(--red); box-shadow: 0 0 12px var(--red); }
.reader-title b { color: #fff; text-shadow: 0 0 10px var(--red); }

.book-head h1, .room h2 { color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6), 0 0 22px var(--cyan); }
.book-vol { color: #fff; text-shadow: 0 0 10px var(--red); }
.book-vol i { height: 2px; background: var(--red); box-shadow: 0 0 8px var(--red); }
.card { background: #0f0a1b; border: 2px solid var(--pc); box-shadow: 0 0 10px var(--pc), 0 0 30px color-mix(in srgb, var(--pc) 30%, transparent); }
.card .no { background: rgba(9,5,16,.85); color: var(--gold); border: 1px solid var(--gold); }
.card .pic { background: radial-gradient(circle, color-mix(in srgb, var(--pc) 30%, transparent), transparent 70%), #0b0714; }
.card .pic img { filter: saturate(1.2) brightness(.8); mix-blend-mode: normal; }
.card .pic b { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 6px #fff, 0 0 16px var(--pc), 0 0 36px var(--pc); }
.card .nm { color: #fff; border-top: 1.5px solid color-mix(in srgb, var(--pc) 60%, transparent); }
.card .nm small { color: var(--lime); }
.card.locked { background: #0b0714; border-color: rgba(255,255,255,.14); box-shadow: none; }
.card.locked .pic { background: #0b0714; }
.card.locked .pic::before { background: var(--tone-fine); }
.card.locked .pic b { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22); text-shadow: none; }
.card.locked .nm small { color: var(--gray); }
.card.locked .q { color: var(--red); text-shadow: 0 0 8px var(--red), 0 0 20px var(--red); animation: neonFlicker 6s infinite; }

.room .stage { background: #0f0a1b; border: 2px solid var(--red); box-shadow: 0 0 12px var(--red), 0 0 46px rgba(255,43,214,.3); }
.room .stage .focus { opacity: .1; }
.room .stage .rank, .room .stage .tip { background: rgba(9,5,16,.6); border-top-color: rgba(255,43,214,.6); color: var(--ink-2); }
.room .stage .rank b { color: #fff; text-shadow: 0 0 6px #fff, 0 0 20px var(--red); }
.room .stage .rank small { color: var(--red); }
.room h2 small { color: var(--red); }
.kipanel .narr b { color: #fff; text-shadow: 0 0 10px var(--gold); }
.up { background: #0f0a1b; border: 1.5px solid var(--cyan); box-shadow: 0 0 8px rgba(34,240,255,.6), inset 0 0 8px rgba(34,240,255,.15); color: #fff; }
.up:hover { box-shadow: 0 0 14px var(--cyan), inset 0 0 12px rgba(34,240,255,.3); }
.up .g { background: transparent; color: var(--red); border: 1.5px solid var(--red); text-shadow: 0 0 10px var(--red); box-shadow: inset 0 0 10px rgba(255,43,214,.4); }
.up p { color: var(--ink-2); }
.up .cost { color: var(--gold); text-shadow: 0 0 8px var(--gold); }
.up.poor { opacity: .45; }
.outfit { background: #0f0a1b; border: 1.5px solid rgba(255,255,255,.25); color: #fff; box-shadow: none; }
.outfit.on { background: transparent; color: #fff; border-color: var(--red); box-shadow: 0 0 10px var(--red), inset 0 0 10px rgba(255,43,214,.35); }
.outfit.on small { color: var(--red); }
.outfit.lock { background: var(--tone-fine), #0b0714; }
.ach { background: #0f0a1b; border: 1.5px solid rgba(255,255,255,.18); color: #fff; }
.ach:not(.lock) { border-color: var(--lime); box-shadow: 0 0 8px rgba(57,255,136,.5); }
.ach .g { border: 2px solid var(--lime); color: var(--lime); box-shadow: 0 0 8px var(--lime); text-shadow: 0 0 6px var(--lime); }
.ach span { color: var(--ink-2); }
.ach.lock { background: #0b0714; }
.ach.lock .g { border-color: rgba(255,255,255,.2); color: var(--gray); box-shadow: none; text-shadow: none; }

.ren { filter: drop-shadow(0 0 1.5px var(--red)) drop-shadow(0 0 7px rgba(255,43,214,.85)) drop-shadow(0 0 22px rgba(255,43,214,.35)); }
.room .stage.charging .ren, .ren.charge { filter: drop-shadow(0 0 2px var(--cyan)) drop-shadow(0 0 12px var(--cyan)) drop-shadow(0 0 34px var(--cyan)); }
.bubble { background: rgba(15,10,27,.96); color: #fff; border: 2px solid var(--cyan); box-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(34,240,255,.35), inset 0 0 10px rgba(34,240,255,.2); }
.bubble::after { background: #0f0a1b; border-color: var(--cyan); }
.bubble .ja { color: var(--red); text-shadow: 0 0 6px var(--red); }
.bubble.shout { color: #fff; text-shadow: 0 0 10px var(--red); border-color: var(--red); box-shadow: 0 0 14px var(--red), 0 0 40px rgba(255,43,214,.5); }
.bubble.shout::after { border-color: var(--red); }

#cover { background: radial-gradient(ellipse at 50% 60%, #1a0d2a, #07040d 70%); }
#cover .focus { opacity: .55; }
#cover .burst { background: #0f0a1b; opacity: .9; }
#cover .title { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 6px #fff, 0 0 16px var(--red), 0 0 40px var(--red), 0 0 90px var(--red), 0 0 140px var(--red); animation: titleIn .7s cubic-bezier(.2,1.8,.4,1) both .1s, neonFlicker 6s infinite 1.4s; }
#cover .jp { background: transparent; color: var(--cyan); border: 2px solid var(--cyan); box-shadow: 0 0 10px var(--cyan), inset 0 0 12px rgba(34,240,255,.4); text-shadow: 0 0 10px var(--cyan); }
#cover .sub { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); box-shadow: 0 0 10px var(--gold); text-shadow: 0 0 6px var(--gold); }
#cover .press { color: var(--cyan); text-shadow: 0 0 10px var(--cyan), 0 0 26px var(--cyan); }

#onboard { background: radial-gradient(ellipse at 50% 0%, #1a0d2a, #07040d 70%); }
.ob { background: transparent; gap: 18px; }
.ob .p { background: #0f0a1b; border: 2px solid var(--cyan); box-shadow: 0 0 10px rgba(34,240,255,.6), inset 0 0 12px rgba(34,240,255,.12); color: #fff; }
.ob .p2 { background: #0f0a1b; border-color: var(--red); box-shadow: 0 0 12px var(--red), inset 0 0 20px rgba(255,43,214,.3); }
.ob h2 { color: #fff; text-shadow: 0 0 18px var(--cyan); }
.choice { background: #0b0714; color: #fff; border: 2px solid rgba(255,255,255,.25); box-shadow: none; }
.choice p { color: var(--ink-2); }
.choice .g { -webkit-text-stroke-color: rgba(255,255,255,.08); }
.choice.on { background: rgba(255,43,214,.08); color: #fff; border-color: var(--red); box-shadow: 0 0 14px var(--red), inset 0 0 16px rgba(255,43,214,.3); }
.choice.on b { text-shadow: 0 0 10px var(--red); }
.choice.on .g { -webkit-text-stroke-color: rgba(255,43,214,.35); }
.choice.on::after { background: transparent; color: var(--lime); border-color: var(--lime); box-shadow: 0 0 8px var(--lime); text-shadow: 0 0 8px var(--lime); }
input.ink { background: #0b0714; color: #fff; border: 2px solid var(--cyan); box-shadow: 0 0 8px rgba(34,240,255,.5); }
input.ink:focus { box-shadow: 0 0 14px var(--cyan); }
.field span { color: var(--cyan); }

#settings { background: #0f0a1b; color: #fff; border: 2px solid var(--red); box-shadow: 0 0 16px var(--red), 0 0 60px rgba(255,43,214,.35); }
#settings::backdrop { background: rgba(5,3,10,.75); }
#settings .head { background: transparent; border-bottom: 1.5px solid rgba(255,43,214,.6); }
#settings .head b { text-shadow: 0 0 10px var(--red); }
.seg { border: 1.5px solid var(--cyan); box-shadow: 0 0 6px rgba(34,240,255,.5); }
.seg button { background: transparent; color: var(--ink-2); }
.seg button + button { border-left: 1.5px solid rgba(34,240,255,.5); }
.seg button.on { background: var(--cyan); color: #07040d; box-shadow: 0 0 12px var(--cyan); }
.row small { color: var(--gray); }

.floater { color: var(--gold); -webkit-text-stroke: 0; text-shadow: 0 0 6px var(--gold), 0 0 16px var(--gold); }
.floater.red { color: #fff; text-shadow: 0 0 6px var(--red), 0 0 18px var(--red), 0 0 34px var(--red); }
.toast { background: #0f0a1b; color: #fff; border: 2px solid var(--lime); box-shadow: 0 0 12px var(--lime), 0 0 34px rgba(57,255,136,.3); }
.toast .g { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 8px var(--lime); text-shadow: 0 0 8px var(--lime); }
.toast small { color: var(--lime); }
.toast span { color: var(--ink-2); }
#wipe { background: #07040d; }
#wipe .wipe-tone { background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(255,43,214,.5) 22px 24px, transparent 24px 60px), repeating-linear-gradient(80deg, transparent 0 40px, rgba(34,240,255,.35) 40px 41px, transparent 41px 90px); }
#impact { background: #07040d; }
#impact b { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 6px #fff, 0 0 20px var(--red), 0 0 60px var(--red), 0 0 120px var(--red); }
.stampbig { background: rgba(9,5,16,.9); border: 4px solid var(--lime); color: var(--lime); box-shadow: 0 0 20px var(--lime), 0 0 60px rgba(57,255,136,.4), inset 0 0 20px rgba(57,255,136,.35); }
.stampbig::before { border: 1.5px solid var(--lime); }
.stampbig b { text-shadow: 0 0 10px var(--lime), 0 0 30px var(--lime); }
.stampbig span { color: #fff; }
.rankup { background: radial-gradient(ellipse at 50% 50%, #1a0d2a, #07040d 70%); }
.rankup .lbl { background: transparent; color: var(--gold); border: 2px solid var(--gold); box-shadow: 0 0 10px var(--gold); text-shadow: 0 0 8px var(--gold); }
.rankup h1 { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 6px #fff, 0 0 20px var(--red), 0 0 60px var(--red), 0 0 110px var(--red); }
.rankup p { background: transparent; border: 1.5px solid var(--cyan); color: #fff; box-shadow: 0 0 8px var(--cyan); }
body.calm .logo .word, body.calm #cover .title { animation: none; }