:root {
  --crt-aubergine: #170B2E;
  --pixel-cream: #FFF0C9;
  --angry-cherry: #FF3F6E;
  --tamagotchi-mint: #63F2B7;
  --cartridge-blue: #4B7BFF;
  --lemon-save: #FFE65A;
  --dusty-crt: #3A315C;
  --pixel-font: "Press Start 2P", "Courier New", monospace;
  --caption-font: "Jersey 10", "Impact", "Arial Black", sans-serif;
  --body-font: "Noto Sans JP", Inter, system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", "Courier New", monospace; /* IBM Plex Mono only for checksums */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }

body {
  margin: 0;
  background: var(--crt-aubergine);
  color: var(--pixel-cream);
  font-family: var(--body-font);
  overflow-x: hidden;
  image-rendering: pixelated;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(75, 123, 255, .12), transparent 28%),
    radial-gradient(circle at 80% 72%, rgba(255, 63, 110, .12), transparent 30%);
  z-index: 80;
  mix-blend-mode: screen;
}

.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(255,63,110,.04), rgba(99,242,183,.025), rgba(75,123,255,.04));
  box-shadow: inset 0 0 80px #000, inset 0 0 24px rgba(255, 240, 201, .15);
}

.pixel-rain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .45;
}

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--lemon-save);
  box-shadow: 9px 0 var(--angry-cherry), 0 9px var(--tamagotchi-mint);
  animation: rainFall var(--fall, 7s) linear infinite;
}

@keyframes rainFall { from { transform: translateY(-10vh); } to { transform: translateY(110vh); } }

.bootloader { position: relative; z-index: 2; }

.chapter {
  min-height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 64px);
  isolation: isolate;
}

.scene-label {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 12;
  font-family: var(--caption-font);
  font-size: clamp(34px, 7vw, 86px);
  letter-spacing: .04em;
  color: var(--lemon-save);
  text-shadow: 5px 0 var(--angry-cherry), -5px 0 var(--cartridge-blue), 0 6px #000;
  transform: rotate(-1.5deg);
}

.bios {
  background:
    linear-gradient(transparent 92%, rgba(99,242,183,.18) 92% 94%, transparent 94%),
    radial-gradient(circle at center, #241246, var(--crt-aubergine) 62%);
  background-size: 100% 24px, auto;
}

.bios-shell {
  position: relative;
  height: calc(100vh - clamp(48px, 10vw, 128px));
  border: 8px solid var(--dusty-crt);
  box-shadow: 12px 12px 0 #000, inset 0 0 40px rgba(99,242,183,.16);
  padding: clamp(22px, 4vw, 58px);
}

.checksum, .boot-log, .compile-strip { font-family: var(--mono-font); color: var(--tamagotchi-mint); }
.checksum { font-size: clamp(11px, 1.6vw, 17px); }

h1 {
  font-family: var(--pixel-font);
  font-size: clamp(28px, 7vw, 92px);
  line-height: 1.25;
  letter-spacing: -0.05em;
  margin: 12vh 0 0;
  color: var(--pixel-cream);
  text-shadow: 5px 0 var(--angry-cherry), -5px 0 var(--cartridge-blue), 0 8px #000;
}

h1 span:first-child { color: var(--lemon-save); }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.denial-stamp {
  position: absolute;
  right: 8vw;
  top: 16vh;
  font-family: var(--pixel-font);
  color: var(--angry-cherry);
  border: 7px solid var(--angry-cherry);
  padding: 18px;
  transform: rotate(11deg);
  background: rgba(23,11,46,.72);
  box-shadow: 8px 8px 0 #000;
}

.loading-rig { position: absolute; left: 7vw; bottom: 9vh; width: min(620px, 70vw); }
.load-label { font-family: var(--mono-font); color: var(--pixel-cream); margin-bottom: 10px; }
.loading-bar { height: 34px; border: 5px solid var(--pixel-cream); background: #000; padding: 4px; box-shadow: 8px 8px 0 #000; }
.loading-bar span { display: block; width: 18%; height: 100%; background: repeating-linear-gradient(90deg, var(--tamagotchi-mint) 0 18px, var(--lemon-save) 18px 26px); transition: width .5s steps(6), transform .18s; }
.broken-ok, button { cursor: pointer; font-family: var(--pixel-font); }
.broken-ok { margin-top: 16px; background: var(--pixel-cream); color: var(--crt-aubergine); border: 5px solid #000; padding: 12px 18px; box-shadow: 6px 6px 0 var(--angry-cherry); transform: rotate(-2deg); }

.mascot {
  width: 98px;
  height: 84px;
  background: var(--angry-cherry);
  border: 6px solid #000;
  box-shadow: inset -10px -10px 0 rgba(23,11,46,.35), 8px 8px 0 #000;
  position: absolute;
  clip-path: polygon(0 20%, 12% 20%, 12% 8%, 28% 8%, 28% 0, 72% 0, 72% 8%, 88% 8%, 88% 20%, 100% 20%, 100% 82%, 88% 82%, 88% 100%, 12% 100%, 12% 82%, 0 82%);
  animation: spriteStep 1.1s steps(2) infinite;
}
.horn { position: absolute; top: -16px; width: 20px; height: 22px; background: var(--lemon-save); border: 5px solid #000; }
.horn.left { left: 12px; transform: skewX(-20deg); }
.horn.right { right: 12px; transform: skewX(20deg); }
.face { position: absolute; inset: 26px 5px auto; text-align: center; font-family: var(--mono-font); font-weight: 800; font-size: 13px; color: #000; }
.tail { position: absolute; right: -24px; bottom: 14px; width: 30px; height: 18px; background: var(--tamagotchi-mint); border: 5px solid #000; }
.bios-tsun { right: 14vw; bottom: 17vh; }
.desktop-tsun { right: 12%; top: 38%; }
.room-tsun { right: 10%; bottom: 16%; background: var(--tamagotchi-mint); }
@keyframes spriteStep { 50% { transform: translateY(-5px); } }

.boot-log { position: absolute; right: 5vw; bottom: 5vh; width: min(360px, 42vw); font-size: 13px; }
.boot-log p { margin: 7px 0; opacity: 0; transform: translateX(-12px); animation: typeIn .8s steps(6) forwards; }
.boot-log p:nth-child(2) { animation-delay: .45s; }
.boot-log p:nth-child(3) { animation-delay: .9s; }
@keyframes typeIn { to { opacity: 1; transform: none; } }

.desktop {
  background-color: var(--cartridge-blue);
  background-image: linear-gradient(45deg, rgba(255,240,201,.18) 25%, transparent 25% 75%, rgba(255,240,201,.18) 75%), linear-gradient(45deg, rgba(255,240,201,.18) 25%, transparent 25% 75%, rgba(255,240,201,.18) 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
}
.desktop-surface { position: relative; height: 100vh; }
.window, .modal, .shutdown-panel, .room-window {
  background: var(--pixel-cream);
  color: var(--crt-aubergine);
  border: 7px solid #000;
  box-shadow: 13px 13px 0 #000, inset -8px -8px 0 rgba(58,49,92,.22);
}
.window { position: absolute; transition: transform .18s steps(3); }
.window header, .modal header, .room-window header { background: var(--cartridge-blue); color: var(--pixel-cream); border-bottom: 6px solid #000; padding: 10px 12px; font-family: var(--mono-font); display: flex; justify-content: space-between; align-items: center; }
.window header button { background: var(--angry-cherry); color: var(--pixel-cream); border: 4px solid #000; }
.main-window { width: min(580px, 76vw); left: 8vw; top: 23vh; transform: rotate(-2deg); }
.alert-window { width: min(390px, 64vw); right: 12vw; top: 19vh; transform: rotate(3deg); }
.window-body { padding: 25px; }
.window h2 { font-family: var(--caption-font); font-size: 54px; line-height: .9; margin: 0 0 14px; color: var(--angry-cherry); }
.dialogue { padding: 24px; font-size: 21px; }
.floppy { width: 126px; height: 118px; background: var(--dusty-crt); border: 6px solid #000; color: var(--pixel-cream); padding: 15px; box-shadow: 7px 7px 0 var(--angry-cherry); }
.floppy span { display: block; height: 35px; background: var(--tamagotchi-mint); border: 5px solid #000; margin-bottom: 18px; }
.folder { position: absolute; left: 48vw; bottom: 18vh; width: 220px; height: 150px; background: var(--lemon-save); border: 7px solid #000; box-shadow: 10px 10px 0 #000; color: var(--crt-aubergine); transform: rotate(4deg); }
.folder-tab { position: absolute; top: -32px; left: -7px; width: 92px; height: 34px; background: var(--lemon-save); border: 7px solid #000; border-bottom: 0; }
.folder strong { display: block; margin-top: 38px; font-size: 13px; }
.folder small { font-family: var(--mono-font); }
.sticky { position: absolute; background: var(--pixel-cream); color: var(--crt-aubergine); border: 5px solid #000; padding: 18px; width: 210px; box-shadow: 8px 8px 0 var(--dusty-crt); font-family: var(--mono-font); }
.note-a { right: 8vw; bottom: 24vh; transform: rotate(-7deg); }
.note-b { left: 21vw; bottom: 10vh; background: var(--tamagotchi-mint); transform: rotate(5deg); }

.forest { background: linear-gradient(#170B2E 0 52%, #3A315C 52% 63%, #63F2B7 63% 100%); }
.forest-world { position: relative; height: 100vh; }
.moon { position: absolute; right: 9vw; top: 15vh; width: 138px; height: 138px; border: 7px solid #000; background: var(--lemon-save); color: var(--crt-aubergine); display: grid; place-items: center; text-align: center; font-family: var(--pixel-font); box-shadow: 0 0 28px rgba(255,230,90,.7); }
.dither-cloud { position: absolute; width: 220px; height: 70px; background: var(--pixel-cream); opacity: .9; clip-path: polygon(0 50%, 12% 50%, 12% 28%, 28% 28%, 28% 10%, 48% 10%, 48% 28%, 72% 28%, 72% 46%, 100% 46%, 100% 76%, 0 76%); }
.cloud-one { left: 12vw; top: 20vh; animation: drift 10s linear infinite alternate; }
.cloud-two { right: 28vw; top: 33vh; transform: scale(.75); animation: drift 12s linear infinite alternate-reverse; }
@keyframes drift { to { translate: 48px 0; } }
.tile-path { position: absolute; left: -5vw; right: -5vw; bottom: 11vh; height: 96px; background: repeating-linear-gradient(90deg, var(--lemon-save) 0 48px, var(--pixel-cream) 48px 96px); border-top: 8px solid #000; border-bottom: 8px solid #000; transform: rotate(-2deg); }
.bridge { position: absolute; left: 32vw; bottom: 25vh; display: flex; gap: 12px; transform: rotate(-2deg); }
.bridge span { width: 80px; height: 28px; background: var(--dusty-crt); border: 5px solid #000; box-shadow: 0 9px 0 #000; }
.goblin { position: absolute; width: 92px; height: 74px; background: var(--angry-cherry); border: 6px solid #000; box-shadow: 8px 8px 0 #000; animation: march 2.2s steps(4) infinite alternate; }
.goblin::before { content: ""; position: absolute; inset: -18px 18px auto; height: 20px; background: var(--pixel-cream); border: 5px solid #000; }
.goblin b { position: absolute; left: -16px; top: -58px; background: var(--crt-aubergine); color: var(--tamagotchi-mint); border: 4px solid var(--tamagotchi-mint); padding: 6px; font-family: var(--mono-font); }
.goblin-a { left: 18vw; bottom: 30vh; }
.goblin-b { left: 45vw; bottom: 37vh; animation-delay: .4s; background: var(--lemon-save); }
.goblin-c { left: 68vw; bottom: 29vh; animation-delay: .8s; background: var(--cartridge-blue); }
@keyframes march { to { transform: translateX(36px) translateY(-10px); } }
.compile-strip { position: absolute; left: 7vw; bottom: 5vh; width: min(660px, 80vw); background: #000; border: 6px solid var(--tamagotchi-mint); padding: 14px 20px; box-shadow: 10px 10px 0 var(--angry-cherry); }
.compile-strip p { margin: 6px 0; }

.permission { background: radial-gradient(circle at 50% 50%, #3A315C, #170B2E 70%); }
.modal-stack { position: relative; height: 100vh; perspective: 800px; }
.modal { position: absolute; padding-bottom: 24px; }
.modal p, .modal h2 { padding-left: 26px; padding-right: 26px; }
.modal-back { width: 430px; left: 16vw; top: 21vh; transform: rotate(-9deg); background: var(--dusty-crt); color: var(--pixel-cream); }
.modal-mid { width: 520px; right: 12vw; top: 18vh; transform: rotate(7deg); }
.modal-front { width: min(690px, 86vw); left: 50%; top: 50%; transform: translate(-50%, -43%); z-index: 5; }
.modal-front h2 { font-family: var(--pixel-font); color: var(--angry-cherry); font-size: clamp(34px, 8vw, 86px); margin: 26px 0 10px; text-shadow: 4px 4px 0 #000; }
.modal-actions { display: flex; gap: 16px; padding: 10px 26px 0; flex-wrap: wrap; }
.modal-actions button, #shutdownButton { background: var(--angry-cherry); color: var(--pixel-cream); border: 6px solid #000; padding: 16px 20px; box-shadow: 7px 7px 0 #000; }
.modal-actions button:nth-child(2) { background: var(--cartridge-blue); }
.revealed-subsystem { margin: 22px 26px 0; padding: 14px; background: var(--tamagotchi-mint); border: 5px solid #000; font-family: var(--mono-font); clip-path: inset(0 100% 0 0); transition: clip-path .45s steps(8); }
.revealed-subsystem.show { clip-path: inset(0 0 0 0); }
.sigil { display: grid; grid-template-columns: repeat(2, 28px); gap: 8px; padding: 0 26px; }
.sigil span { width: 28px; height: 28px; background: var(--lemon-save); border: 4px solid #000; }

.shutdown { background: var(--crt-aubergine); }
.shutdown::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(255,240,201,.16), transparent 45%); opacity: var(--roomGlow, .1); transition: opacity .4s; }
.shutdown-panel { position: absolute; width: min(520px, 84vw); left: 10vw; top: 28vh; padding: 32px; z-index: 3; transform: rotate(-2deg); transition: transform .55s steps(6), opacity .55s; }
.shutdown-panel.fake-off { transform: translateY(80px) rotate(9deg) scale(.9); opacity: .12; }
.power-icon { font-size: 68px; color: var(--angry-cherry); text-shadow: 5px 0 var(--cartridge-blue); }
.shutdown-panel h2, .room-window h2 { font-family: var(--caption-font); font-size: 62px; line-height: .9; margin: 8px 0; }
.secret-room { position: absolute; inset: 0; opacity: 0; transform: translateY(70px); transition: opacity .7s steps(7), transform .7s steps(7); }
.secret-room.open { opacity: 1; transform: none; }
.room-window { position: absolute; right: 10vw; top: 18vh; width: min(620px, 78vw); }
.room-window h2, .room-window p { padding-left: 28px; padding-right: 28px; }
.heart-field { display: flex; gap: 18px; padding: 10px 28px 28px; }
.heart-field span { width: 32px; height: 32px; background: var(--angry-cherry); transform: rotate(45deg); box-shadow: 0 0 16px var(--angry-cherry); animation: heartFloat 1.8s steps(3) infinite alternate; }
.heart-field span:nth-child(even) { background: var(--lemon-save); animation-delay: .35s; }
@keyframes heartFloat { to { translate: 0 -18px; } }
.cartridge { position: absolute; left: 18vw; bottom: 16vh; background: var(--cartridge-blue); border: 7px solid #000; color: var(--pixel-cream); padding: 24px; font-family: var(--pixel-font); box-shadow: 12px 12px 0 #000; transform: rotate(5deg); }

.taskbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 70;
  display: flex;
  gap: 8px;
  padding: 9px;
  background: var(--dusty-crt);
  border: 6px solid #000;
  box-shadow: 0 10px 0 #000;
}
.taskbar a { color: var(--pixel-cream); text-decoration: none; font-family: var(--mono-font); font-size: 12px; padding: 10px 12px; background: var(--crt-aubergine); border: 4px solid #000; position: relative; transition: transform .16s steps(2), background .16s; }
.taskbar a.active, .taskbar a:hover { background: var(--cartridge-blue); transform: translateY(-6px); }
.taskbar a::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 8px; height: 8px; background: var(--tamagotchi-mint); transform: translateX(-50%); opacity: .35; }
.taskbar a.active::after { opacity: 1; box-shadow: 0 0 12px var(--tamagotchi-mint); }
.taskbar a.deny-bounce { animation: denyBounce .42s steps(4); }
@keyframes denyBounce { 40% { transform: translateY(-14px) rotate(-5deg); } 70% { transform: translateY(4px) rotate(4deg); } }

.toast { position: fixed; right: 22px; bottom: 92px; z-index: 72; background: var(--pixel-cream); color: var(--crt-aubergine); border: 5px solid #000; box-shadow: 8px 8px 0 var(--angry-cherry); padding: 14px 16px; font-family: var(--mono-font); max-width: 330px; transform: translateX(130%); transition: transform .35s steps(5); }
.toast.show { transform: none; }

.shake { animation: shake .28s steps(4); }
@keyframes shake { 25% { translate: -8px 0; } 50% { translate: 8px 0; } 75% { translate: -4px 0; } }

@media (max-width: 760px) {
  .chapter { padding: 18px; }
  .denial-stamp, .boot-log { position: static; margin-top: 20px; width: auto; }
  .bios-shell { height: auto; min-height: calc(100vh - 36px); }
  h1 { margin-top: 9vh; }
  .loading-rig { position: static; margin-top: 42px; width: 100%; }
  .bios-tsun { right: 18px; bottom: 34px; transform: scale(.8); }
  .scene-label { font-size: 42px; }
  .main-window, .alert-window, .folder, .sticky, .room-window, .shutdown-panel { left: 18px; right: auto; width: calc(100vw - 36px); }
  .main-window { top: 20vh; }
  .alert-window { top: 54vh; }
  .folder { bottom: 12vh; width: 190px; }
  .note-a, .note-b, .desktop-tsun { display: none; }
  .modal-back, .modal-mid { display: none; }
  .taskbar { max-width: calc(100vw - 18px); overflow: hidden; gap: 4px; }
  .taskbar a { padding: 8px 7px; font-size: 10px; }
}