:root {
  --ink: #17151F;
  --paper: #FFF3D6;
  --red: #FF3B30;
  --cyan: #21D4D8;
  --violet: #7B2CFF;
  --yellow: #FFD23F;
  --matcha: #2F8F5B;
  --pink: #FF8BCB;
  --display: Impact, Haettenschweiler, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  --body: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --label: "Space Grotesk", "Grotes", "Grotesk*", "Grotesk**", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --hand: "Comic Sans MS", "Marker Felt", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 18%, var(--red) 0 9px, transparent 10px),
    radial-gradient(circle at 82% 12%, var(--cyan) 0 12px, transparent 13px),
    linear-gradient(45deg, transparent 0 45%, rgba(123,44,255,.16) 46% 50%, transparent 51%),
    repeating-linear-gradient(90deg, rgba(23,21,31,.05) 0 1px, transparent 1px 44px),
    var(--paper);
  background-size: 170px 160px, 230px 190px, 95px 95px, 44px 44px, auto;
}

button, a { font: inherit; color: inherit; }
button { cursor: pointer; }

.cursor-stamp {
  position: fixed;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--violet);
  font-family: var(--display);
  font-size: 26px;
  pointer-events: none;
  z-index: 20;
  box-shadow: 5px 5px 0 var(--cyan), -3px -3px 0 var(--red);
  transform: translate(-50%, -50%) rotate(-12deg);
  transition: width .2s, height .2s, opacity .2s;
}

.test-tabs {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.tab {
  pointer-events: auto;
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: 8px 15px;
  font-family: var(--label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  clip-path: polygon(4% 0, 100% 9%, 94% 100%, 0 91%);
  box-shadow: 4px 5px 0 var(--violet);
}
.tab:nth-child(2n) { transform: rotate(4deg); background: var(--yellow); box-shadow: 4px 5px 0 var(--cyan); }
.tab:nth-child(3n) { transform: rotate(-5deg); background: var(--pink); box-shadow: 4px 5px 0 var(--red); }
.tab.active { background: var(--cyan); color: var(--ink); }

.room {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 88px 6vw 56px;
  isolation: isolate;
}

h1, h2 {
  font-family: var(--display);
  line-height: .92;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: .02em;
}
h1 { font-size: clamp(48px, 9vw, 132px); }
h2 { font-size: clamp(38px, 6vw, 92px); }
p { font-size: clamp(18px, 2vw, 27px); line-height: 1.25; }

.entrance-room { background: transparent; }
.desk-pattern, .corridor-room::before, .garden-room::before, .door-room::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    linear-gradient(28deg, transparent 0 60%, var(--cyan) 61% 67%, transparent 68%),
    linear-gradient(128deg, transparent 0 34%, var(--pink) 35% 43%, transparent 44%),
    radial-gradient(circle, var(--ink) 0 2px, transparent 3px);
  background-size: 220px 220px, 180px 180px, 28px 28px;
  transform: rotate(-3deg);
}

.exam-sheet {
  width: min(1120px, 91vw);
  min-height: 68vh;
  background: var(--paper);
  border: 6px solid var(--ink);
  padding: clamp(28px, 5vw, 70px);
  position: relative;
  transform: rotate(-4deg) skew(-3deg);
  box-shadow: 16px 16px 0 var(--cyan), -12px -10px 0 var(--red), 30px 34px 0 var(--ink);
  clip-path: polygon(1% 3%, 98% 0, 100% 92%, 92% 100%, 0 96%);
  transition: transform .6s cubic-bezier(.2,1.4,.2,1), filter .6s;
}
.exam-sheet.crumple { transform: rotate(-13deg) skew(-10deg) translateY(-24px) scale(.94); filter: drop-shadow(0 16px 0 var(--violet)); }
.exam-label, .room-title span, .stamp-heading span, .abacus-copy span, .door-label {
  font-family: var(--label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 14px;
}
.exam-label { margin: 0 0 22px; background: var(--yellow); display: inline-block; padding: 8px 14px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--violet); }
.clue-copy { max-width: 620px; font-weight: 800; }
.stamp-domain {
  position: absolute;
  right: 4%;
  bottom: 18%;
  border: 7px solid var(--red);
  color: var(--red);
  border-radius: 18px;
  padding: 14px 24px;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 66px);
  transform: rotate(-19deg);
  opacity: .88;
  mix-blend-mode: multiply;
}
.sheet-hole { position: absolute; left: 18px; width: 22px; height: 22px; border: 4px solid var(--ink); border-radius: 50%; background: var(--cyan); }
.h1 { top: 22%; } .h2 { top: 48%; } .h3 { top: 74%; }
.answer-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.answer-card {
  border: 4px solid var(--ink);
  background: var(--yellow);
  padding: 16px 21px;
  font-family: var(--label);
  font-weight: 900;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(var(--r, -2deg));
  transition: transform .2s, box-shadow .2s;
}
.answer-card:nth-child(2) { --r: 3deg; background: var(--cyan); }
.answer-card:hover { transform: translate(-3px,-7px) rotate(6deg); box-shadow: 10px 13px 0 var(--violet); }

.giant-pencil { position: absolute; right: -90px; top: 18%; width: 390px; height: 50px; background: var(--yellow); border: 5px solid var(--ink); transform: rotate(28deg); box-shadow: 8px 8px 0 var(--pink); }
.giant-pencil::before { content: ""; position: absolute; left: -66px; top: -5px; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 66px solid var(--ink); }
.giant-pencil::after { content: ""; position: absolute; right: -38px; top: -5px; width: 36px; height: 50px; background: var(--pink); border: 5px solid var(--ink); }
.spirit { position: absolute; font-family: var(--display); font-size: 105px; color: var(--violet); text-shadow: 7px 7px 0 var(--yellow), -5px 4px 0 var(--red); animation: floaty 3.4s infinite alternate ease-in-out; }
.q-one { left: 8%; bottom: 9%; }
.margin-note, .chalk-note { font-family: var(--hand); transform: rotate(-8deg); color: var(--red); font-size: clamp(20px, 2.5vw, 34px); }
.note-one { position: absolute; right: 8%; bottom: 9%; max-width: 260px; }

.corridor-room { background: var(--violet); grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr); gap: 4vw; color: var(--paper); }
.slab-red { background: var(--red); color: var(--paper); border: 6px solid var(--ink); padding: 30px; transform: rotate(-5deg); box-shadow: 14px 14px 0 var(--cyan), 26px 25px 0 var(--ink); clip-path: polygon(0 7%, 96% 0, 100% 86%, 8% 100%); }
.corridor-stack { display: grid; gap: 20px; width: min(620px, 90vw); }
.wrong-strip {
  position: relative;
  border: 5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 22px 28px;
  text-align: left;
  font-family: var(--label);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 42px);
  box-shadow: 9px 9px 0 var(--yellow);
  transform: rotate(var(--turn, 2deg));
  transition: transform .35s, background .35s;
}
.wrong-strip:nth-child(2) { --turn: -3deg; }
.wrong-strip:nth-child(3) { --turn: 4deg; }
.wrong-strip:nth-child(4) { --turn: -1deg; background: var(--cyan); }
.wrong-strip::after { content: ""; position: absolute; left: 5%; top: 50%; width: 0; height: 9px; background: var(--red); transform: rotate(-3deg); transition: width .35s; }
.wrong-strip.crossed::after, .wrong-strip:hover::after { width: 88%; }
.wrong-strip.crossed { transform: translateX(25px) rotate(-7deg); background: var(--pink); }
.red-portal { position: absolute; right: 8%; bottom: 9%; width: 210px; height: 210px; transform: rotate(45deg); }
.red-portal span { position: absolute; left: 50%; top: 0; width: 26px; height: 100%; background: var(--red); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--cyan); }
.red-portal span:nth-child(2) { transform: rotate(90deg); }
.side-caption { position: absolute; left: 5%; bottom: 7%; max-width: 480px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); padding: 17px; box-shadow: 7px 8px 0 var(--red); }
.bent-ruler { position: absolute; right: 5%; top: 18%; background: var(--yellow); color: var(--ink); border: 4px solid var(--ink); padding: 14px 50px; transform: rotate(15deg) skew(-16deg); font-family: var(--label); font-weight: 900; }

.blackboard-room { background: var(--matcha); color: var(--paper); grid-template-columns: 1fr 1fr; gap: 5vw; }
.fold-board { width: min(680px, 92vw); display: grid; grid-template-columns: 1fr 1fr; perspective: 1000px; filter: drop-shadow(17px 17px 0 var(--ink)); }
.board-panel { min-height: 210px; border: 5px solid var(--ink); background: #17151F; padding: 24px; display: grid; place-items: center; }
.panel-a { grid-column: span 2; background: var(--ink); transform-origin: bottom; transition: transform .7s; }
.panel-b { background: var(--cyan); color: var(--ink); transform-origin: right; transition: transform .7s; }
.panel-c { background: var(--yellow); color: var(--ink); font-family: var(--display); font-size: 46px; transform-origin: left; transition: transform .7s; }
.fold-board.folded .panel-a { transform: rotateX(18deg); }
.fold-board.folded .panel-b { transform: rotateY(-24deg); }
.fold-board.folded .panel-c { transform: rotateY(24deg); }
.tile-wheel { display: grid; grid-template-columns: repeat(2, minmax(120px, 190px)); gap: 18px; }
.flip-tile { height: 150px; position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,1.4,.3,1); border: 0; background: transparent; }
.flip-tile span, .flip-tile b { position: absolute; inset: 0; display: grid; place-items: center; border: 5px solid var(--ink); box-shadow: 8px 8px 0 var(--red); font-family: var(--display); font-size: 42px; backface-visibility: hidden; }
.flip-tile span { background: var(--paper); color: var(--red); }
.flip-tile b { background: var(--yellow); color: var(--violet); transform: rotateY(180deg); }
.flip-tile.flipped { transform: rotateY(180deg) rotate(5deg); }
.chalk-note { position: absolute; left: 7%; bottom: 7%; color: var(--paper); }
.protractor { position: absolute; right: -80px; bottom: -80px; width: 330px; height: 165px; border: 18px solid var(--cyan); border-bottom: 0; border-radius: 330px 330px 0 0; opacity: .8; }

.garden-room { background: var(--yellow); grid-template-columns: .9fr 1.1fr; gap: 4vw; }
.stamp-heading { align-self: start; background: var(--paper); border: 6px solid var(--ink); padding: 30px; box-shadow: -12px 13px 0 var(--pink), 12px -10px 0 var(--cyan); transform: rotate(3deg); }
.label-garden { min-height: 440px; position: relative; width: min(620px, 92vw); }
.paper-label { position: absolute; border: 5px solid var(--ink); background: var(--paper); padding: 17px 30px; font-family: var(--display); font-size: clamp(28px, 4vw, 58px); text-transform: uppercase; box-shadow: 9px 9px 0 var(--violet); transition: transform .65s cubic-bezier(.2,1.5,.2,1), left .65s, top .65s; }
.paper-label:nth-child(1) { left: 6%; top: 5%; transform: rotate(-11deg); }
.paper-label:nth-child(2) { left: 38%; top: 23%; background: var(--cyan); transform: rotate(8deg); }
.paper-label:nth-child(3) { left: 14%; top: 52%; background: var(--pink); transform: rotate(13deg); }
.paper-label:nth-child(4) { left: 52%; top: 68%; background: var(--red); color: var(--paper); transform: rotate(-7deg); }
.label-garden.ordered .paper-label:nth-child(1) { left: 0; top: 12%; transform: rotate(-2deg); }
.label-garden.ordered .paper-label:nth-child(2) { left: 26%; top: 30%; transform: rotate(2deg); }
.label-garden.ordered .paper-label:nth-child(3) { left: 10%; top: 49%; transform: rotate(-1deg); }
.label-garden.ordered .paper-label:nth-child(4) { left: 38%; top: 66%; transform: rotate(1deg); }
.seal-field { position: absolute; left: 7%; bottom: 8%; display: flex; gap: 18px; }
.stamp-seal { width: 86px; height: 86px; border-radius: 50%; border: 6px solid var(--red); color: var(--red); background: transparent; font-family: var(--display); font-size: 42px; transform: rotate(-12deg); transition: transform .18s; }
.stamp-seal.impact { transform: scale(.78) rotate(8deg); background: rgba(255,59,48,.14); }
.origami-arrow { position: absolute; right: 8%; bottom: 9%; background: var(--matcha); color: var(--paper); border: 4px solid var(--ink); padding: 18px 28px; clip-path: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%, 10% 50%); font-family: var(--label); font-weight: 900; }

.abacus-room { background: var(--pink); grid-template-columns: .8fr 1.2fr; gap: 5vw; }
.abacus-copy { background: var(--paper); border: 6px solid var(--ink); padding: 30px; transform: rotate(-4deg); box-shadow: 12px 12px 0 var(--cyan), -10px 8px 0 var(--violet); }
.abacus { position: relative; width: min(720px, 92vw); padding: 34px 28px; background: var(--yellow); border: 8px solid var(--ink); box-shadow: 18px 18px 0 var(--matcha); transform: rotate(2deg); }
.rod { height: 86px; border-top: 7px solid var(--ink); position: relative; display: flex; align-items: center; justify-content: space-around; }
.rod:last-of-type { border-bottom: 7px solid var(--ink); }
.bead { width: 58px; height: 58px; border-radius: 50%; border: 5px solid var(--ink); background: var(--cyan); box-shadow: 6px 6px 0 var(--red); transition: transform .5s cubic-bezier(.2,1.6,.2,1), background .3s; }
.bead:nth-child(2n) { background: var(--violet); }
.abacus.constellation-mode .rod:nth-child(1) .bead:nth-child(1) { transform: translate(5px, -30px); }
.abacus.constellation-mode .rod:nth-child(1) .bead:nth-child(2) { transform: translate(28px, 22px); }
.abacus.constellation-mode .rod:nth-child(1) .bead:nth-child(3) { transform: translate(-12px, -24px); }
.abacus.constellation-mode .rod:nth-child(1) .bead:nth-child(4) { transform: translate(10px, 31px); }
.abacus.constellation-mode .rod:nth-child(2) .bead:nth-child(1) { transform: translate(16px, 28px); }
.abacus.constellation-mode .rod:nth-child(2) .bead:nth-child(2) { transform: translate(-20px, -12px); }
.abacus.constellation-mode .rod:nth-child(2) .bead:nth-child(3) { transform: translate(30px, 32px); }
.abacus.constellation-mode .rod:nth-child(2) .bead:nth-child(4) { transform: translate(-5px, -28px); }
.abacus.constellation-mode .rod:nth-child(3) .bead:nth-child(1) { transform: translate(0, -25px); }
.abacus.constellation-mode .rod:nth-child(3) .bead:nth-child(2) { transform: translate(18px, -42px); }
.abacus.constellation-mode .rod:nth-child(3) .bead:nth-child(3) { transform: translate(-24px, 15px); }
.abacus.constellation-mode .rod:nth-child(3) .bead:nth-child(4) { transform: translate(20px, -18px); }
.constellation { position: absolute; inset: 20px; pointer-events: none; opacity: 0; transition: opacity .4s; }
.constellation path { fill: none; stroke: var(--paper); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 18 16; filter: drop-shadow(3px 3px 0 var(--ink)); }
.abacus.constellation-mode .constellation { opacity: 1; }
.abacus-answer { position: absolute; right: 7%; bottom: 7%; font-family: var(--hand); color: var(--red); font-size: 31px; transform: rotate(8deg); }

.door-room { background: var(--cyan); }
.prize-door { width: min(780px, 88vw); height: min(620px, 72vh); position: relative; perspective: 900px; }
.door-face { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 24px; text-align: center; background: var(--paper); border: 8px solid var(--ink); box-shadow: 20px 20px 0 var(--violet), -14px -12px 0 var(--red); transform-origin: left; transition: transform .9s cubic-bezier(.2,1.1,.2,1); clip-path: polygon(7% 0, 100% 4%, 94% 100%, 0 93%); }
.prize-door.open .door-face { transform: rotateY(-36deg); }
.door-label { background: var(--yellow); border: 4px solid var(--ink); padding: 10px 18px; }
.final-stamp { border: 7px solid var(--red); color: var(--red); background: transparent; padding: 22px 32px; border-radius: 20px; font-family: var(--display); font-size: clamp(24px, 4vw, 48px); transform: rotate(-8deg); box-shadow: 8px 8px 0 rgba(255,59,48,.24); transition: transform .18s, background .18s; }
.final-stamp:active, .final-stamp.pounded { transform: rotate(-8deg) scale(.88); background: rgba(255,59,48,.16); }
.door-crack { position: absolute; left: 50%; top: 8%; width: 12px; height: 84%; background: var(--ink); transform: rotate(3deg); box-shadow: 0 0 0 6px var(--yellow); }
.final-message { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%) rotate(3deg) scale(.3); opacity: 0; background: var(--red); color: var(--paper); border: 5px solid var(--ink); padding: 18px 28px; font-family: var(--display); font-size: clamp(28px, 5vw, 66px); box-shadow: 9px 9px 0 var(--yellow); transition: transform .55s cubic-bezier(.2,1.8,.2,1), opacity .3s; }
.final-message.show { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
.confetti-field i { position: absolute; width: 18px; height: 24px; border: 3px solid var(--ink); background: var(--yellow); animation: burst 1s forwards ease-out; }

.room.in-view .room-title, .room.in-view .stamp-heading, .room.in-view .abacus-copy { animation: stampIn .55s both cubic-bezier(.2,1.6,.2,1); }

@keyframes floaty { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-32px) rotate(14deg); } }
@keyframes stampIn { from { transform: translateY(60px) rotate(-14deg) scale(.84); opacity: .2; } to { opacity: 1; } }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(540deg); opacity: 0; } }

@media (max-width: 820px) {
  .test-tabs { left: 8px; right: 8px; transform: none; overflow-x: auto; justify-content: flex-start; }
  .room, .corridor-room, .blackboard-room, .garden-room, .abacus-room { grid-template-columns: 1fr; align-content: center; }
  .stamp-domain { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 24px; }
  .side-caption, .seal-field, .origami-arrow, .abacus-answer, .note-one { position: relative; left: auto; right: auto; bottom: auto; top: auto; margin-top: 20px; }
  .cursor-stamp { display: none; }
}