:root {
  /* Interface labels retro notes:** from Use variable axes move casual rounded prompts. This creates expressive-variable typography seed without relying overused pure styling. */
  --cream: #FFF2D8;
  --strawberry: #F7B7C6;
  --mint: #A7D7C5;
  --lavender: #6E5AE8;
  --amber: #F6C85F;
  --sky: #7EC8E3;
  --raisin: #3A2E39;
  --green: #76B041;
  --tea-shadow: rgba(58, 46, 57, 0.24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--raisin);
  background:
    radial-gradient(circle at 12% 8%, rgba(247, 183, 198, 0.65), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(126, 200, 227, 0.55), transparent 24rem),
    linear-gradient(135deg, var(--cream), #ffe9bd 55%, #f8dfbe);
  font-family: "Nunito Sans", sans-serif;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(rgba(58,46,57,0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(58,46,57,0.28) 0 1px, transparent 1.5px);
  background-size: 100% 6px, 18px 18px;
  z-index: 20;
}

button { font: inherit; color: inherit; }

.ambient-grid {
  position: fixed;
  inset: 1rem;
  border: 3px double rgba(58,46,57,0.24);
  border-radius: 2rem;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(167,215,197,0.26) 1px, transparent 1px),
    linear-gradient(rgba(167,215,197,0.26) 1px, transparent 1px);
  background-size: 42px 42px;
}

.quest-cabinet {
  width: min(1500px, calc(100% - 32px));
  margin: 16px auto;
  border: 10px solid var(--cream);
  outline: 4px solid var(--raisin);
  border-radius: 34px;
  box-shadow: 0 30px 0 rgba(58,46,57,0.18), 0 38px 70px rgba(58,46,57,0.28), inset 0 0 0 3px rgba(246,200,95,0.42);
  background: rgba(255,242,216,0.62);
  overflow: hidden;
}

.quest-room {
  min-height: 100vh;
  padding: clamp(18px, 4vw, 46px);
  position: relative;
}

.cabinet-topline, .chapter-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 18px;
  font-family: "Recursive", monospace;
  font-variation-settings: "MONO" 0.75, "CASL" 0.8, "wght" 720;
}

.brand-chip, .system-note, .chapter-band span, .receipt-label, .tiny-label, .terminal-prompt {
  border: 2px solid var(--raisin);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: var(--cream);
  box-shadow: 3px 4px 0 var(--tea-shadow);
  font-family: "Recursive", monospace;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.led-strip { display: flex; gap: 0.5rem; }
.led-strip i {
  width: 16px;
  height: 16px;
  border: 2px solid var(--raisin);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 16px var(--amber);
  animation: ledBob 2.4s ease-in-out infinite;
}
.led-strip i:nth-child(2) { background: var(--mint); animation-delay: .25s; }
.led-strip i:nth-child(3) { background: var(--strawberry); animation-delay: .5s; }

.bento { display: grid; gap: clamp(12px, 2vw, 22px); }
.room-one-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(120px, auto); }
.room-two-grid { grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(132px, auto); }
.room-three-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(135px, auto); }

.tile {
  position: relative;
  border: 4px solid var(--raisin);
  border-radius: 28px;
  background: var(--cream);
  padding: clamp(16px, 2.5vw, 28px);
  box-shadow: 9px 11px 0 var(--tea-shadow), inset 0 0 0 5px rgba(255,255,255,0.32);
  overflow: hidden;
  transform: translateY(24px) scale(0.94);
  opacity: 0;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dotted rgba(58,46,57,0.24);
  border-radius: 20px;
  pointer-events: none;
}

.tile.is-visible { animation: bounceEnter .72s cubic-bezier(.2,1.45,.35,1) forwards; }
.tile.wiggle { animation: wiggle .62s ease-in-out; }

h1, h2, h3 {
  font-family: "Fraunces", serif;
  margin: 0;
  line-height: 0.88;
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 72, "wght" 780;
}

h1 { font-size: clamp(4.2rem, 13vw, 12rem); letter-spacing: -0.075em; color: var(--lavender); text-shadow: 5px 6px 0 var(--amber); }
h2 { font-size: clamp(2.4rem, 6vw, 6rem); color: var(--raisin); }
h3 { font-size: clamp(1.8rem, 3vw, 3rem); }
p { font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.45; margin: 0.85rem 0 0; }

.title-tile { grid-column: 1 / span 4; grid-row: span 3; background: linear-gradient(145deg, var(--cream), #ffe7b8); }
.locked-tile { background: var(--strawberry); display: grid; place-items: center; text-align: center; }
.option-a { grid-column: 5 / span 2; }
.option-b { grid-column: 5 / span 1; }
.third-peek { grid-column: 6 / span 1; background: var(--amber); cursor: pointer; text-align: center; }
.sprite-tile { grid-column: 5 / span 2; background: var(--mint); }
.lock-icon { font-family: "Fraunces"; font-size: 5rem; color: var(--cream); text-shadow: 3px 3px 0 var(--raisin); }
.number-three, .door-number { display: block; font-family: "Fraunces"; font-size: clamp(4rem, 9vw, 8rem); color: var(--lavender); line-height: .8; }
.cursor-row { margin-top: 2rem; font-family: "Recursive", monospace; font-size: 1.25rem; }
.cursor-blink { color: var(--green); animation: blink .9s steps(2,end) infinite; }

.helper-sprite { width: 100px; height: 82px; position: relative; margin: 1rem auto; }
.helper-sprite span { position: absolute; border: 4px solid var(--raisin); background: var(--sky); border-radius: 18px; box-shadow: 4px 5px 0 var(--tea-shadow); }
.helper-sprite span:nth-child(1) { width: 52px; height: 52px; left: 22px; top: 4px; }
.helper-sprite span:nth-child(2), .helper-sprite span:nth-child(3) { width: 24px; height: 24px; bottom: 0; }
.helper-sprite span:nth-child(2) { left: 8px; background: var(--amber); }
.helper-sprite span:nth-child(3) { right: 8px; background: var(--strawberry); }

.chapter-band h2 { font-size: clamp(2.4rem, 7vw, 7rem); color: var(--lavender); text-shadow: 4px 5px 0 rgba(246,200,95,.8); }
.photo-card { grid-column: span 2; grid-row: span 2; background: #fff7e7; }
.map-tile { grid-column: span 1; grid-row: span 2; background: var(--mint); }
.terminal-tile { grid-column: span 2; background: var(--raisin); color: var(--cream); }
.sticky-tile { grid-column: span 2; background: var(--amber); transform: rotate(-1deg) translateY(24px) scale(.94); }
.switch-tile { grid-column: span 1; background: var(--sky); }
.expanded-third { grid-column: 2 / span 4; grid-row: span 2; background: linear-gradient(135deg, var(--strawberry), var(--cream) 44%, var(--mint)); transition: grid-column .45s ease, transform .35s ease; }
.expanded-third.open { transform: translateY(0) scale(1.02); box-shadow: 14px 16px 0 rgba(110,90,232,.22), inset 0 0 0 5px rgba(255,255,255,.5); }

.fake-photo { height: 280px; border: 12px solid var(--cream); border-bottom-width: 38px; border-radius: 18px; box-shadow: inset 0 0 50px rgba(58,46,57,.25); position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(126,200,227,.9), rgba(247,183,198,.78)), repeating-linear-gradient(90deg, rgba(58,46,57,.22) 0 4px, transparent 4px 42px); }
.door { position: absolute; bottom: 0; width: 22%; height: 70%; border: 4px solid var(--raisin); border-bottom: 0; border-radius: 14px 14px 0 0; background: rgba(255,242,216,.7); }
.d1 { left: 9%; } .d2 { left: 39%; } .d3 { left: 69%; background: var(--amber); animation: doorGlow 1.5s ease-in-out infinite; }
.photo-stamp { position: absolute; right: 26px; bottom: 20px; font-family: "Recursive"; color: var(--lavender); transform: rotate(-5deg); }
.caption-label { display: inline-block; background: var(--cream); border: 2px solid var(--raisin); border-radius: 12px; padding: .4rem .65rem; transition: transform .25s ease, background .25s ease; }
.photo-card.revealed .caption-label { background: var(--lavender); color: var(--cream); transform: translateY(-8px) rotate(-2deg); }

.circuit-map { height: 210px; position: relative; margin-top: 1rem; background: radial-gradient(circle at 50% 50%, var(--cream) 0 8px, transparent 9px); }
.circuit-map i { position: absolute; background: var(--green); border: 2px solid var(--raisin); border-radius: 999px; }
.circuit-map i:nth-child(1) { width: 70%; height: 14px; left: 10%; top: 28%; }
.circuit-map i:nth-child(2) { width: 14px; height: 62%; left: 45%; top: 14%; }
.circuit-map i:nth-child(3) { width: 54%; height: 14px; right: 8%; bottom: 23%; }
.circuit-map b { position: absolute; right: 10%; bottom: 8%; font-family: "Fraunces"; font-size: 4rem; color: var(--lavender); }
.scanline-slot { height: 48px; border-radius: 999px; border: 3px inset var(--cream); margin-top: 1.2rem; background: repeating-linear-gradient(0deg, var(--green) 0 3px, #558b32 3px 7px); }
.tape-strip { position: absolute; top: 10px; left: 30%; width: 40%; height: 28px; border-radius: 6px; background: rgba(255,242,216,.7); transform: rotate(2deg); }
.switch { width: 112px; height: 58px; border: 4px solid var(--raisin); border-radius: 999px; background: var(--cream); box-shadow: inset 5px 5px 0 rgba(58,46,57,.15); cursor: pointer; padding: 5px; margin-top: 1.2rem; }
.switch span { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--raisin); background: var(--strawberry); transition: transform .28s cubic-bezier(.2,1.6,.45,1); }
.switch.on span { transform: translateX(50px); background: var(--green); }
.keycap-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.keycap-row span { border: 3px solid var(--raisin); border-radius: 14px; padding: .7rem 1rem; background: var(--cream); box-shadow: 4px 5px 0 var(--tea-shadow); font-family: "Recursive"; }

.log-tile { grid-column: span 2; background: var(--cream); }
.log-tile.wide { grid-column: span 3; background: var(--mint); }
.badge-tile { grid-column: span 1; display: grid; place-items: center; text-align: center; background: var(--strawberry); }
.badge-tile.amber { background: var(--amber); }
.badge-tile span { font-size: 4rem; color: var(--lavender); }
.artifact-tile { grid-column: span 2; background: var(--sky); }
.third-door-panel { grid-column: 3 / span 4; grid-row: span 2; background: linear-gradient(140deg, var(--lavender), #8f7cff); color: var(--cream); cursor: pointer; text-align: left; }
.third-door-panel::before { border-color: rgba(255,242,216,.4); }
.third-door-panel h2 { color: var(--cream); text-shadow: 4px 5px 0 rgba(58,46,57,.28); }
.third-door-panel.opened { animation: doorBounce .72s cubic-bezier(.2,1.5,.35,1) both; }
.floppy { width: 140px; height: 120px; border: 4px solid var(--raisin); border-radius: 12px; background: var(--lavender); box-shadow: 8px 10px 0 var(--tea-shadow); position: relative; }
.floppy span { position: absolute; top: 14px; left: 24px; width: 64px; height: 38px; border: 3px solid var(--raisin); background: var(--cream); }

@keyframes bounceEnter { 0% { opacity: 0; transform: translateY(34px) scale(.88); } 62% { opacity: 1; transform: translateY(-10px) scale(1.035); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ledBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes doorGlow { 50% { box-shadow: 0 0 28px var(--amber); transform: translateY(-4px); } }
@keyframes wiggle { 20% { transform: rotate(-2deg) scale(1.02); } 45% { transform: rotate(2deg) scale(1.02); } 70% { transform: rotate(-1deg) scale(1.01); } }
@keyframes doorBounce { 0% { transform: scale(1); } 45% { transform: scale(1.045) rotate(-1deg); } 100% { transform: scale(1.015); } }

@media (max-width: 900px) {
  .room-one-grid, .room-two-grid, .room-three-grid { grid-template-columns: 1fr 1fr; }
  .title-tile, .expanded-third, .third-door-panel, .log-tile.wide { grid-column: 1 / -1; }
  .photo-card, .terminal-tile, .sticky-tile, .artifact-tile, .log-tile { grid-column: span 2; }
  .option-a, .option-b, .third-peek, .sprite-tile, .map-tile, .switch-tile, .badge-tile { grid-column: span 1; }
  .cabinet-topline, .chapter-band { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .quest-cabinet { width: calc(100% - 18px); margin: 9px auto; border-width: 6px; border-radius: 24px; }
  .quest-room { padding: 18px; }
  .room-one-grid, .room-two-grid, .room-three-grid { grid-template-columns: 1fr; }
  .tile, .photo-card, .terminal-tile, .sticky-tile, .artifact-tile, .log-tile, .option-a, .option-b, .third-peek, .sprite-tile, .map-tile, .switch-tile, .badge-tile { grid-column: 1 / -1; }
  h1 { font-size: 4rem; }
}