*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}
body{font-family:'VT323',monospace;font-size:20px;line-height:1.7;color:#F0E6D3;background:#0D1B2A;overflow-x:hidden;image-rendering:pixelated}

h1,h2,.crown-message{font-family:'Silkscreen',cursive;font-weight:700;color:#FFD23F;text-transform:uppercase}
h1{font-size:64px;letter-spacing:.05em}
h2,.crown-message{font-size:32px}
h3{font-family:'Silkscreen',cursive;font-weight:400;font-size:20px;color:#FFD23F;margin-bottom:8px}

/* Floors */
.floor{position:relative;min-height:100vh;padding:48px 48px 48px 128px;display:flex;flex-direction:column;justify-content:center}

/* Trunk */
.trunk-left{position:absolute;left:0;top:0;bottom:0;width:80px;background:repeating-linear-gradient(180deg,#6B4226 0px,#6B4226 14px,#3D2614 14px,#3D2614 16px);z-index:1}

/* Branch Divider */
.branch-divider{height:16px;background:repeating-linear-gradient(90deg,#6B4226 0px,#6B4226 12px,#1A3A1A 12px,#1A3A1A 14px,#4ADE50 14px,#4ADE50 18px,transparent 18px,transparent 32px);margin-left:80px}

/* Stars */
.star-field{position:absolute;inset:0;pointer-events:none;z-index:0}
.star{position:absolute;width:2px;height:2px;background:#F0E6D3;animation:twinkle 3s ease-in-out infinite alternate}
.star:nth-child(even){animation-delay:1.5s;animation-duration:4s}
@keyframes twinkle{0%{opacity:.1}100%{opacity:.5}}

/* Floor Roots */
.floor-roots{align-items:center;text-align:center;padding-left:48px}
.pixel-title{margin-bottom:8px}
.pixel-subtitle{font-family:'VT323',monospace;font-size:20px;color:#A8C686}
.pixel-arrow{width:16px;height:16px;border-right:4px solid #FFD23F;border-bottom:4px solid #FFD23F;transform:rotate(45deg);margin-top:32px;animation:bounce 1.5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(8px) rotate(45deg)}}

/* Floor Title */
.floor-title{font-size:32px;margin-bottom:32px}

/* Pixel Cards */
.bento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:640px}
.pixel-card{background:#2B1D0E;border:2px solid #1A3A1A;padding:16px;position:relative;box-shadow:4px 4px 0 #3D2614}
.pixel-card:hover{box-shadow:2px 2px 0 #3D2614}
.pixel-card.small{padding:12px}
.pixel-card.neon{border-color:#FF3F8E}
.pixel-card p{font-size:18px;color:#F0E6D3;opacity:.85}

/* Workshop Grid */
.workshop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:800px}

/* Library */
.library-scroll{max-width:640px}
.scroll-parchment{background:#F0E6D3;color:#2B1D0E;border:2px solid #6B4226;padding:24px;margin-bottom:16px;box-shadow:4px 4px 0 #3D2614}
.scroll-parchment p{color:#2B1D0E;margin-bottom:12px;opacity:1}

/* Lookout */
.floor-lookout{background:#1A3A1A}
.lookout-content{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:800px}

/* Crown */
.floor-crown{align-items:center;text-align:center;padding-left:48px}
.crown-message{margin-bottom:32px}
.crown-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:700px;margin-bottom:32px}
.pixel-crown{width:32px;height:24px;background:#FFD23F;clip-path:polygon(0 100%,15% 30%,30% 70%,50% 0%,70% 70%,85% 30%,100% 100%);animation:crownSpin 8s linear infinite}
@keyframes crownSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Lantern */
.lantern{position:absolute;width:12px;height:16px;background:#FFD23F;top:48px;right:48px;z-index:2;animation:lanternFlicker 0.5s steps(2) infinite}
.lantern::before{content:'';position:absolute;top:-6px;left:3px;width:6px;height:6px;background:#C4762B;border-radius:0}
@keyframes lanternFlicker{0%{opacity:.9}50%{opacity:.6}}

/* Card reveal */
.card{opacity:0;transform:translateY(16px);transition:opacity .4s ease-out,transform .4s ease-out}
.card.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .floor{padding-left:96px;padding-right:16px}
  .floor-roots,.floor-crown{padding-left:16px}
  .trunk-left{width:48px}
  .branch-divider{margin-left:48px}
  h1{font-size:32px}
  .workshop-grid{grid-template-columns:repeat(2,1fr)}
  .lookout-content{grid-template-columns:1fr}
  .crown-grid{grid-template-columns:1fr}
  .bento-grid{grid-template-columns:1fr}
}