:root{
  --blue:#448cf2; --yellow:#fff422; --acid:#b5ff27; --pink:#ff579c;
  --ink:#0a0a0a;
  --head:'Clash Display',sans-serif; --mono:'Space Mono',monospace;
  --body:'Satoshi',sans-serif; --hand:'White Cloth','Caveat',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:#050505;}
body{
  font-family:var(--body); color:#fff;
  display:flex; flex-direction:column; align-items:center;
  position:relative; min-height:100vh;
}

/* ---------- atmosphere: room background ---------- */
/* locked to the source art's real aspect ratio (2752x1536) so props (radio/tv) never drift
   off their spot at different viewport sizes, same fix as the login page background */
.room-bg-wrap{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  animation:glowShift 16s ease-in-out infinite;
}
.bg-scale{
  position:absolute; top:0; left:50%; transform:translate(-50%,0);
  width:100vw; aspect-ratio:2752/1536;
  max-width:calc(100vh * 2752 / 1536); max-height:100vh;
}
.room-bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block; }
.wall-painting-wrap{
  position:absolute; z-index:1; left:17%; top:16%; width:9.8%; height:11.38%;
}
.wall-painting-wrap::before{
  content:''; position:absolute; inset:-40%; z-index:0; background:#0f0e20;
}
.wall-painting{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:cover; display:block;
}
.bg-scale::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 240px rgba(0,0,0,.85); pointer-events:none; }
.room-bg-wrap{ background:#0a0a1a; }
@keyframes glowShift{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.12); }
}
.lamp-flicker{
  position:absolute; z-index:1; left:50%; top:20%; width:11%; aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,235,180,1), rgba(255,200,120,.7) 40%, rgba(255,180,90,.25) 65%, transparent 78%);
  border-radius:50%; mix-blend-mode:screen; pointer-events:none;
  animation:lampFlicker2 4.5s ease-in-out infinite;
}
@keyframes lampFlicker2{
  0%,100%{ opacity:1; } 48%{ opacity:1; } 50%{ opacity:.55; } 52%{ opacity:.95; } 73%{ opacity:.85; } 75%{ opacity:1; }
}
.tv-video{
  position:absolute; z-index:1; left:77%; top:50%; width:12%; height:16.2%;
  object-fit:cover; border-radius:1%;
  box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}
.beams{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; mix-blend-mode:screen;
  background:conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(255,255,255,.05) 6deg, transparent 14deg, transparent 40deg, rgba(255,255,255,.04) 46deg, transparent 54deg);
}
.skyline{
  position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:0; pointer-events:none;
  opacity:.14; filter:blur(.5px);
}
.vignette-corners{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 0% 0%, rgba(0,0,0,.55), transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 0%, rgba(0,0,0,.55), transparent 60%),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(0,0,0,.5), transparent 60%),
    radial-gradient(ellipse 70% 55% at 100% 100%, rgba(0,0,0,.5), transparent 60%);
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.floor{
  position:fixed; left:0; right:0; bottom:0; height:38vh; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(68,140,242,.08), transparent 70%), linear-gradient(180deg, transparent, rgba(255,255,255,.02) 40%, rgba(0,0,0,.3));
}
.dust{ position:fixed; z-index:1; pointer-events:none; border-radius:50%; background:rgba(255,255,255,.55); filter:blur(.4px); animation:drift linear infinite; }
@keyframes drift{
  0%{ transform:translate(0,0); opacity:0; }
  10%{ opacity:.7; }
  90%{ opacity:.5; }
  100%{ transform:translate(var(--dx,30px), -160px); opacity:0; }
}

.top{ text-align:center; padding:112px 0 6px; z-index:3; position:relative; }
.mark{ font-family:var(--head); font-weight:600; font-size:28px; line-height:.95; letter-spacing:-.01em; position:relative; display:inline-block; }
.mark .scribble-underline{ position:absolute; left:-6%; right:-6%; bottom:-10px; width:112%; height:14px; }
.sub{ font-family:var(--mono); font-size:11px; color:var(--acid); margin-top:16px; text-transform:uppercase; letter-spacing:.08em; }

.margin-note{
  position:absolute; z-index:4; font-family:var(--hand); font-size:19px; line-height:1.15;
  pointer-events:none; text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.margin-note.pink{ color:var(--pink); }
.margin-note.blue{ color:var(--blue); }

/* ---------- the scene: bookcase alcove ---------- */
.scene{
  flex:1; width:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; perspective:1600px;
  position:relative; z-index:2; padding:65px 20px 40px; gap:40px;
  pointer-events:none;
}
.scene-inner{ display:flex; align-items:flex-end; gap:56px; pointer-events:auto; }

.bookcase{
  position:relative; padding:34px 34px 0;
  background:linear-gradient(160deg,#2a1c10,#1a1108 60%,#120b05);
  border-radius:6px;
  box-shadow:0 40px 90px rgba(0,0,0,.65), inset 0 2px 0 rgba(255,255,255,.05), inset 0 0 60px rgba(0,0,0,.5);
}
.bookcase::before{
  content:''; position:absolute; inset:8px 8px auto 8px; height:10px; border-radius:3px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent);
}
.bookcase-inner{
  background:radial-gradient(ellipse 500px 260px at 50% 0%, rgba(255,180,90,.10), transparent 70%), #0d0906;
  border-radius:4px; padding:26px 26px 0; box-shadow:inset 0 12px 30px rgba(0,0,0,.7), inset 0 -6px 20px rgba(0,0,0,.6);
}

.shelf-wrap{ position:relative; }

.shelf{
  display:flex; align-items:flex-end; gap:9px;
  padding:0 10px 0; height:300px;
  transform-style:preserve-3d;
}

.book{
  position:relative; width:40px; height:296px; cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  transform-origin:bottom center;
}
.book:nth-child(1){ transform:rotate(-1.2deg); }
.book:nth-child(2){ transform:rotate(0.6deg); }
.book:nth-child(3){ transform:rotate(-0.4deg); }
.book:nth-child(4){ transform:rotate(1deg); }
.book:nth-child(5){ transform:rotate(-0.8deg); }
.book:nth-child(6){ transform:rotate(0.5deg); }

/* light spines (yellow/acid) need dark text - white failed contrast */
.book.light-spine .spine-title{ color:#171204; text-shadow:0 1px 2px rgba(255,255,255,.3); }
.book.light-spine .spine-tag{ color:rgba(10,8,2,.82); }
.book-shadow{
  position:absolute; left:50%; bottom:-14px; width:70%; height:16px;
  background:radial-gradient(ellipse, rgba(0,0,0,.65), transparent 72%);
  transform:translateX(-50%); transition:opacity .4s ease, transform .4s ease; z-index:-1;
}
.book.unlocked:hover{ transform:translateY(-30px) rotateZ(-1.5deg) !important; }
.book.unlocked:hover .book-shadow{ opacity:.35; transform:translateX(-50%) scale(1.15); }
.book.locked:hover{ transform:translateY(-8px) rotateZ(1deg) !important; }

.spine{
  position:absolute; inset:0;
  background:var(--spine);
  border-radius:2px 2px 0 0;
  overflow:hidden;
  box-shadow:2px 0 0 rgba(0,0,0,.35), inset -4px 0 8px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:16px 0 16px 0;
}
.spine::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 16%, transparent 30%),
    linear-gradient(90deg, transparent 80%, rgba(0,0,0,.35) 92%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 22%, transparent 78%, rgba(0,0,0,.3));
  pointer-events:none;
}
.pages-edge{
  position:absolute; top:3px; bottom:3px; right:0; width:7px;
  background:repeating-linear-gradient(180deg,#f2ead2 0 2px, #d9cfae 2px 3px);
  box-shadow:inset 2px 0 4px rgba(0,0,0,.3); z-index:1;
}
.ribbon{
  position:absolute; top:0; left:34%; width:9px; height:56%;
  background:var(--acid); z-index:2;
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);
  box-shadow:1px 0 3px rgba(0,0,0,.3);
}
.spine-title{
  font-family:var(--hand); font-weight:400; font-size:23px; letter-spacing:.01em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); position:relative; z-index:2;
}
.spine-tag{
  font-family:var(--mono); font-size:8px; color:rgba(255,255,255,.9);
  writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.1em; position:relative; z-index:2;
}

.cover{
  position:absolute; top:0; left:100%; height:100%; aspect-ratio:6/9; width:auto;
  background:var(--spine); border-radius:0 4px 4px 0;
  transform:rotateY(-90deg); transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  box-shadow:10px 0 26px rgba(0,0,0,.5);
  backface-visibility:hidden; overflow:hidden;
}
.cover::before{
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(115deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.05) 22%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 20%, transparent 80%, rgba(0,0,0,.32));
  pointer-events:none;
}
.cover-img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; background:var(--spine); }
.book.unlocked:hover .cover{ transform:rotateY(-20deg); }
.book.locked:hover .cover{ transform:rotateY(-8deg); }

.cover-mark{ font-family:var(--mono); font-weight:700; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.85); position:relative; z-index:2; }
.cover-city{ font-family:var(--hand); font-size:40px; color:rgba(0,0,0,.6); line-height:1; position:relative; z-index:2; text-shadow:0 1px 0 rgba(255,255,255,.25); }
.cover-stamp{
  position:relative; z-index:2; font-family:var(--mono); font-weight:700; font-size:8.5px;
  letter-spacing:.08em; text-transform:uppercase; border:1.5px solid rgba(0,0,0,.55); color:rgba(0,0,0,.6);
  padding:3px 8px; border-radius:99px; transform:rotate(-4deg);
}

.locked-cover{ background:#1c1c1c !important; }
.locked-cover::before{ display:none; }
.locked-cover .lock{ font-size:26px; opacity:.55; position:relative; z-index:2; }
.locked-cover .cover-note{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--spine); position:relative; z-index:2; }
.tape-lock{
  position:absolute; top:14px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:74px; height:22px; background:rgba(255,244,34,.85); z-index:2;
  clip-path:polygon(3% 0,97% 6%,100% 100%,0 94%);
  font-family:var(--mono); font-size:7px; font-weight:700; color:#0a0a0a;
  display:flex; align-items:center; justify-content:center; letter-spacing:.05em;
  box-shadow:0 2px 5px rgba(0,0,0,.35);
}

.plank-wrap{ position:relative; width:100%; margin-top:-2px; }
.plank{
  height:26px; width:100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px),
    linear-gradient(180deg,#4a3520,#1e140c);
  border-radius:2px; box-shadow:0 16px 30px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.4);
  position:relative; z-index:2;
}

/* ---------- corkboard: sticky-note nav + decor ---------- */
.corkboard{
  width:230px; align-self:stretch; border-radius:6px; position:relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.08) 0 2px, transparent 3px) 0 0/18px 18px,
    linear-gradient(155deg,#8a6a45,#6b4f31 55%,#57402670);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.35), 0 0 0 8px #2a1c10;
  padding:20px 16px; display:flex; flex-direction:column; gap:16px; align-items:center;
}
.corkboard-title{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.pin-note{ transform:rotate(-3deg); }
.pin-note:nth-of-type(2){ transform:rotate(2deg); align-self:flex-end; }
.pin-note:nth-of-type(3){ transform:rotate(-2deg); }
.polaroid-pin{
  background:#fff; padding:8px 8px 26px; box-shadow:3px 6px 14px rgba(0,0,0,.4);
  transform:rotate(3deg); position:relative; margin-top:4px;
}
.polaroid-pin::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 32% 32%, #fff, #b33 45%, #700 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.5);
}
.polaroid-pin img{ width:150px; height:112px; object-fit:cover; display:block; }
.polaroid-pin span{ position:absolute; bottom:6px; left:0; right:0; text-align:center; font-family:var(--hand); font-size:14px; color:#333; }

.hand-note{
  font-family:var(--hand); font-size:22px; color:var(--acid); text-align:center;
  position:relative; z-index:3;
}

/* ---------- hanging lamps ---------- */
.hanging-light{
  position:fixed; top:0; width:2px; z-index:3; pointer-events:none;
  transform-origin:top center; animation:swing 7s ease-in-out infinite;
}
.hanging-light.left{ left:9%; animation-delay:0s; }
.hanging-light.right{ right:9%; animation-delay:-3.4s; animation-direction:reverse; }
.hanging-light .cord{
  width:2px; height:150px; margin:0 auto;
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.08));
}
.hanging-light .bulb{
  width:24px; height:32px; margin:-2px auto 0; position:relative;
  background:radial-gradient(circle at 38% 30%, #fffdf2, #ffdc9c 55%, #e8a95c 100%);
  border-radius:50% 50% 46% 46%;
  box-shadow:0 0 18px 5px rgba(255,214,140,.85), 0 0 70px 26px rgba(255,190,110,.35);
  animation:flicker 4.5s ease-in-out infinite;
}
.hanging-light .cap{
  width:14px; height:8px; margin:0 auto; background:#2a2a2a; border-radius:2px 2px 0 0;
}
.hanging-light .glow{
  position:absolute; top:100%; left:50%; width:460px; height:460px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,205,130,.16), transparent 68%);
  pointer-events:none;
}
@keyframes swing{ 0%,100%{ transform:rotate(-3.5deg); } 50%{ transform:rotate(3.5deg); } }
@keyframes flicker{ 0%,100%{ opacity:1; } 48%{ opacity:1; } 50%{ opacity:.88; } 52%{ opacity:1; } }

@media (max-width:900px){
  .hanging-light{ display:none; }
}

/* ---------- hanging id card (about link) ---------- */
.id-card-hang{
  position:fixed; top:0; right:6%; z-index:20;
  width:46px; transform-origin:top center;
  animation:swing 6s ease-in-out infinite; animation-delay:-1.6s;
  cursor:pointer; display:block; text-decoration:none;
}
.id-card-hang img{
  width:100%; display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transition:transform .2s ease;
}
.id-card-hang:hover{ animation-play-state:paused; }
.id-card-hang:hover img{ transform:scale(1.06) rotate(-2deg); }
.id-card-hang.clicked{ animation:swingClick .6s ease-out; }
@keyframes swingClick{
  0%{ transform:rotate(0deg); }
  25%{ transform:rotate(14deg); }
  50%{ transform:rotate(-10deg); }
  75%{ transform:rotate(6deg); }
  100%{ transform:rotate(0deg); }
}
@media (max-width:700px){
  .id-card-hang{ width:34px; right:4%; }
}

/* ---------- radio widget (travel playlist) ---------- */
.radio-widget{
  position:absolute; top:52%; left:5.2%; z-index:6; width:12.8%; pointer-events:auto;
}
.radio-img{
  width:100%; display:block; cursor:pointer; position:relative; z-index:2;
  transition:transform .2s ease;
}
.radio-img:hover{ transform:scale(1.1); }
@keyframes radioWiggle{ 0%,100%{ transform:rotate(-1.2deg); } 50%{ transform:rotate(1.2deg); } }

.radio-hint{
  position:absolute; top:-24px; left:50%; transform:translateX(-50%) rotate(-3deg);
  font-size:13px; white-space:nowrap; pointer-events:none;
}
.radio-widget.is-open .radio-hint, .radio-widget.is-mini .radio-hint{ display:none; }

.radio-card{
  position:absolute; top:calc(100% + 24px); left:-10px; width:300px;
  background:#111; border-radius:12px; padding:14px 14px 16px;
  box-shadow:0 26px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-14px) scale(.95); transform-origin:top left;
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
}
.radio-widget.is-open .radio-card{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.radio-card-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.radio-card-title{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--acid);
}
.radio-min{
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:none; color:#fff; font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.radio-min:hover{ background:rgba(255,255,255,.1); }
.radio-frame{ border-radius:8px; display:block; }

.radio-mini{
  position:absolute; top:calc(100% + 20px); left:2px; width:48px; height:48px;
  border-radius:50%; background:var(--acid); border:none; cursor:pointer;
  display:none; align-items:center; justify-content:center; gap:3px;
  box-shadow:0 12px 26px rgba(0,0,0,.55);
}
.radio-widget.is-mini .radio-mini{ display:flex; }
.eq-bar{ width:3px; height:8px; background:#0a0a0a; border-radius:2px; animation:eqPulse 1s ease-in-out infinite; }
.eq-bar:nth-child(2){ animation-delay:.15s; }
.eq-bar:nth-child(3){ animation-delay:.3s; }
.eq-bar:nth-child(4){ animation-delay:.45s; }
@keyframes eqPulse{ 0%,100%{ height:6px; } 50%{ height:17px; } }

@media (max-width:900px){
  .radio-widget{ width:15%; }
  .radio-card{ width:250px; }
}

/* ---------- sparkle accents ---------- */
.sparkle{ position:absolute; z-index:4; pointer-events:none; animation:twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.25; transform:scale(.8) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(12deg); } }

@media (max-width:900px){
  .scene-inner{ flex-direction:column; align-items:center; gap:24px; }
  .corkboard{ width:280px; flex-direction:row; flex-wrap:wrap; justify-content:center; }
}
@media (max-width:700px){
  .shelf{ gap:6px; height:230px; padding:0 6px; }
  .book{ width:30px; height:226px; }
  .mark{ font-size:22px; }
  .margin-note{ display:none; }
  .bookcase{ padding:20px 20px 0; }
  .bookcase-inner{ padding:16px 16px 0; }
}