/* ============================================================
   CLAUDE'S ROOM
   A cozy, interactive side-view room built with pure CSS.
   ============================================================ */

:root {
  --wall:       #ede4d8;
  --wall-side:  #e0d4c6;
  --floor:      #c4a478;
  --floor-alt:  #b89468;
  --ceil:       #f2ece4;
  --trim:       #d0c0aa;
  --baseboard:  #a89070;

  --wood:       #8b6b4a;
  --wood-lt:    #a88460;
  --wood-dk:    #6b5030;
  --wood-med:   #9a7850;

  --accent:     #d4956b;
  --warm-glow:  rgba(255,215,145,0.10);

  --text:       #3d3229;
  --text2:      #7a6b5d;
  --text3:      #a89880;
  --panel-bg:   #faf7f2;

  --f: 0.15s;
  --m: 0.3s;
  --s: 0.6s;

  /* Room dimensions */
  --rw: 820px;
  --rh: 520px;
  --side-w: 70px;    /* left-wall visible width */
  --floor-h: 110px;  /* floor visible height */
  --ceil-h: 28px;
}

body.dark {
  --wall:      #3a3530;
  --wall-side: #332f2a;
  --floor:     #4a3f34;
  --floor-alt: #423828;
  --ceil:      #403a34;
  --trim:      #4a4035;
  --baseboard: #3d3428;
  --wood:      #5a4a38;
  --wood-lt:   #6a5a48;
  --wood-dk:   #4a3a28;
  --wood-med:  #5f5040;
  --panel-bg:  #2e2924;
  --text:      #d4c8bb;
  --text2:     #a89880;
  --text3:     #7a6b5d;
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{
  background:#2c2419;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--s);
}
body.dark{background:#1a1510}

/* === INTRO === */
#intro{
  position:fixed;inset:0;z-index:9999;
  background:#2c2419;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease,visibility .8s;
}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-inner{text-align:center;color:#e8ddd3}
.intro-inner h1{
  font-size:34px;font-weight:400;letter-spacing:8px;
  text-transform:lowercase;margin-bottom:6px;
}
.intro-inner p{
  font-size:13px;color:#a89880;letter-spacing:3px;margin-bottom:44px;
}
#enter-btn{
  background:none;border:1px solid #7a6b5d;color:#e8ddd3;
  padding:10px 36px;font:14px Georgia,serif;letter-spacing:3px;
  cursor:pointer;border-radius:2px;transition:all var(--m);
}
#enter-btn:hover{background:rgba(255,255,255,.06);border-color:#c0b098}

/* === SCENE === */
#scene{
  position:relative;
  width:var(--rw);
  opacity:0;
  transition:opacity 1s ease .3s;
}
#scene.on{opacity:1}

/* === ROOM === */
#room{
  position:relative;
  width:var(--rw);
  height:var(--rh);
  overflow:hidden;
  border-radius:6px;
  box-shadow:0 12px 60px rgba(0,0,0,.35);
}

/* -- walls & floor -- */
#back-wall{
  position:absolute;
  top:var(--ceil-h);
  left:var(--side-w);right:0;
  bottom:var(--floor-h);
  background:var(--wall);
  transition:background var(--s);
}
#left-wall{
  position:absolute;
  top:var(--ceil-h);left:0;
  width:var(--side-w);
  bottom:var(--floor-h);
  background:var(--wall-side);
  border-right:3px solid var(--trim);
  transition:background var(--s);
}
#floor-area{
  position:absolute;
  bottom:0;left:0;right:0;
  height:var(--floor-h);
  background:repeating-linear-gradient(
    90deg,var(--floor) 0 58px,var(--floor-alt) 58px 60px
  );
  border-top:3px solid var(--wood-dk);
  transition:background var(--s);
}
#ceiling-strip{
  position:absolute;top:0;left:0;right:0;
  height:var(--ceil-h);
  background:var(--ceil);
  border-bottom:3px solid var(--trim);
  transition:background var(--s);
}

/* Moldings */
#molding-top{
  position:absolute;
  top:var(--ceil-h);left:var(--side-w);right:0;
  height:4px;background:var(--trim);
  box-shadow:0 2px 3px rgba(0,0,0,.04);
  z-index:2;
}
#molding-mid{
  position:absolute;
  bottom:calc(var(--floor-h) + 120px);
  left:var(--side-w);right:0;
  height:2px;background:var(--trim);
  z-index:2;
}

/* wainscoting pattern on back wall */
#back-wall::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:120px;
  background:
    linear-gradient(180deg,var(--trim) 0 2px,transparent 2px),
    repeating-linear-gradient(90deg,transparent 0 68px,rgba(0,0,0,.025) 68px 70px);
}

/* wainscoting on left wall */
#left-wall::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:120px;
  background:linear-gradient(180deg,var(--trim) 0 2px,transparent 2px);
}

/* baseboard */
#floor-area::before{
  content:'';position:absolute;top:-10px;left:0;right:0;
  height:10px;background:var(--baseboard);
}

/* === CLICKABLE === */
.clickable{
  cursor:pointer;
  transition:filter var(--f),transform var(--f);
  position:absolute;
  z-index:10;
}
.clickable:hover{filter:brightness(1.08)}
.clickable:active{transform:scale(.98)}
.book{cursor:pointer;transition:transform var(--f)}
.book:hover{transform:translateY(-5px) !important;filter:brightness(1.12)}

/* ==================================================================
   BACK-WALL OBJECTS
   ================================================================== */

/* ── Window ── */
#window{
  top:55px;left:130px;
  width:240px;height:230px;
}
.win-frame{
  position:absolute;
  top:15px;left:28px;
  width:184px;height:155px;
  border:7px solid var(--wood);
  background:#87ceeb;
  overflow:hidden;
  border-radius:2px;
}
.win-frame canvas{display:block;width:100%;height:100%}
.win-bar{position:absolute;background:var(--wood);z-index:2}
.win-bar-v{top:0;left:50%;width:5px;height:100%;margin-left:-2.5px}
.win-bar-h{top:50%;left:0;width:100%;height:5px;margin-top:-2.5px}

.win-sill{
  position:absolute;top:173px;left:18px;
  width:204px;height:9px;
  background:var(--wood);border-radius:0 0 2px 2px;
}
.win-curtain{
  position:absolute;top:8px;width:26px;height:190px;
  border-radius:2px;z-index:3;
}
.win-cl{
  left:2px;
  background:linear-gradient(90deg,#c4a07a,#d4b48a);
}
.win-cr{
  right:2px;
  background:linear-gradient(90deg,#d4b48a,#c4a07a);
}
body.dark .win-cl{background:linear-gradient(90deg,#5a4a38,#6a5a48)}
body.dark .win-cr{background:linear-gradient(90deg,#6a5a48,#5a4a38)}
.win-curtain::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(0,0,0,.04) 14px 16px);
}

/* ── Poster ── */
#poster{
  top:52px;left:480px;
  width:126px;height:166px;
  border:6px solid var(--wood-dk);
  padding:4px;background:#fff;
  box-shadow:2px 3px 12px rgba(0,0,0,.15);
}
#poster canvas{display:block;width:100%;height:100%}

/* ── Clock ── */
#clock{
  top:52px;left:415px;
  width:52px;height:52px;
}
.clock-face{
  width:52px;height:52px;border-radius:50%;
  background:#faf7f2;
  border:3px solid var(--wood-dk);
  box-shadow:1px 2px 6px rgba(0,0,0,.12);
  position:relative;
}
body.dark .clock-face{background:#4a4035;border-color:#5a4a3a}
.clock-center-dot{
  position:absolute;top:50%;left:50%;
  width:5px;height:5px;border-radius:50%;
  background:var(--wood-dk);
  transform:translate(-50%,-50%);z-index:5;
}
body.dark .clock-center-dot{background:#c0b098}
.clock-hand{
  position:absolute;bottom:50%;left:50%;
  transform-origin:bottom center;border-radius:2px;
}
.clock-h{width:3px;height:13px;background:var(--wood-dk);margin-left:-1.5px}
.clock-m{width:2px;height:17px;background:var(--wood-dk);margin-left:-1px}
.clock-s{width:1px;height:19px;background:#c0392b;margin-left:-.5px}
body.dark .clock-h,body.dark .clock-m{background:#c0b098}
.tick{
  position:absolute;background:var(--wood-dk);border-radius:1px;
}
body.dark .tick{background:#c0b098}
.t12{top:4px;left:50%;width:2px;height:4px;margin-left:-1px}
.t3{right:4px;top:50%;width:4px;height:2px;margin-top:-1px}
.t6{bottom:4px;left:50%;width:2px;height:4px;margin-left:-1px}
.t9{left:4px;top:50%;width:4px;height:2px;margin-top:-1px}

/* ==================================================================
   LEFT-WALL OBJECTS
   ================================================================== */

/* ── Light switch ── */
#switch{
  top:260px;left:20px;
  width:22px;height:34px;z-index:15;
}
.switch-plate{
  width:22px;height:34px;
  background:#f0e8dd;border:2px solid #d4c8b8;
  border-radius:4px;display:flex;
  align-items:center;justify-content:center;
  box-shadow:1px 1px 4px rgba(0,0,0,.08);
}
body.dark .switch-plate{background:#4a4035;border-color:#5a4a3a}
.switch-nub{
  width:8px;height:12px;background:var(--wood);
  border-radius:2px;transition:transform var(--f);
}
.switch-nub.off{transform:translateY(3px)}
.switch-nub:not(.off){transform:translateY(-3px)}

/* ── Wall shelf ── */
#wall-shelf{
  top:110px;left:5px;
  width:60px;height:75px;z-index:11;
}
.ws-board{
  position:absolute;bottom:10px;left:0;
  width:60px;height:5px;
  background:var(--wood-med);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.ws-bracket{
  position:absolute;bottom:0;width:3px;height:10px;
  background:var(--wood-dk);
}
.ws-bl{left:8px}
.ws-br{right:8px}

/* Shelf candle */
.ws-candle{position:absolute;bottom:15px;left:10px}
.candle-stick{width:6px;height:14px;background:#f0e6d4;border-radius:1px}
.candle-flame-wrap{position:absolute;top:-9px;left:1px;width:4px;height:8px}
.candle-flame{
  width:4px;height:7px;
  background:#f5a623;
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  animation:flicker .4s ease-in-out infinite alternate;
}
.candle-glow{
  position:absolute;top:-2px;left:-3px;
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(rgba(245,166,35,.35),transparent 70%);
}
body.lights-off .candle-glow{
  width:18px;height:18px;left:-7px;top:-5px;
  background:radial-gradient(rgba(245,166,35,.5),transparent 70%);
}

@keyframes flicker{
  0%{transform:scaleY(1) scaleX(1)}
  50%{transform:scaleY(.8) scaleX(1.15)}
  100%{transform:scaleY(1.1) scaleX(.9)}
}

/* Shelf plant */
.ws-plant{position:absolute;bottom:15px;left:28px}
.ws-pot{width:10px;height:8px;background:#c07050;clip-path:polygon(8% 0%,92% 0%,75% 100%,25% 100%)}
.ws-leaf{position:absolute;width:6px;height:4px;background:#6a5;border-radius:50%}
.ws-l1{top:-6px;left:0;transform:rotate(-15deg)}
.ws-l2{top:-9px;left:2px}
.ws-l3{top:-6px;left:5px;transform:rotate(15deg)}

/* Shelf photo */
.ws-photo{position:absolute;bottom:15px;right:6px}
.ws-photo-inner{
  width:14px;height:18px;
  background:#f0e8d8;border:2px solid var(--wood-dk);
  box-shadow:1px 1px 2px rgba(0,0,0,.1);
}

/* ==================================================================
   FLOOR OBJECTS
   ================================================================== */

/* ── Rug ── */
#rug{
  position:absolute;
  bottom:12px;left:260px;
  width:210px;height:75px;z-index:3;
  background:#b85c4a;border-radius:5px;
  box-shadow:inset 0 0 0 8px #a04838,inset 0 0 0 12px #c06850;
}
body.dark #rug{background:#5a3028;box-shadow:inset 0 0 0 8px #4a2820,inset 0 0 0 12px #6a3830}
.rug-inner{
  position:absolute;inset:14px;
  border:2px solid rgba(0,0,0,.08);
  border-radius:2px;
}
.rug-diamond{
  position:absolute;top:50%;left:50%;
  width:22px;height:22px;
  background:#c06848;border:2px solid #a04838;
  transform:translate(-50%,-50%) rotate(45deg);
}
body.dark .rug-diamond{background:#5a3028;border-color:#4a2820}

/* ── Floor Lamp ── */
#lamp{
  bottom:var(--floor-h);left:80px;
  width:48px;height:200px;z-index:6;
  transform:translateY(0);
}
.lamp-shade{
  width:44px;height:30px;margin:0 auto;
  background:#e8d4b0;
  clip-path:polygon(18% 0%,82% 0%,100% 100%,0% 100%);
  border-bottom:2px solid #d0c090;
}
body.dark .lamp-shade{background:#6a5a40;border-bottom-color:#5a4a34}
.lamp-glow{
  position:absolute;top:20px;left:50%;
  width:70px;height:50px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,215,130,.2),transparent 70%);
  pointer-events:none;
  transition:opacity var(--m);
}
body.dark .lamp-glow{background:radial-gradient(ellipse,rgba(255,200,100,.35),transparent 70%)}
body.lights-off .lamp-glow{opacity:0}
.lamp-rod{width:4px;height:150px;background:var(--wood);margin:0 auto}
.lamp-foot{width:26px;height:6px;background:var(--wood-dk);border-radius:50%;margin:0 auto}

/* ── Bookshelf ── */
#bookshelf{
  bottom:var(--floor-h);right:30px;
  width:140px;height:184px;z-index:7;
}
.bs-frame{
  width:140px;height:184px;
  background:var(--wood-dk);
  border-radius:2px;
  padding:0 4px;
  display:flex;flex-direction:column;
}
.bs-shelf{height:5px;background:var(--wood-med);flex-shrink:0}
.bs-top{border-radius:2px 2px 0 0}
.bs-bottom{border-radius:0 0 2px 2px}
.bs-mid{height:4px}
.bs-row{
  display:flex;align-items:flex-end;gap:2px;
  padding:3px 5px;flex:1;
  background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 40%);
}
.book{
  width:var(--w,14px);height:var(--h,40px);
  background:var(--c,#888);
  border-radius:1px 2px 2px 1px;
  flex-shrink:0;position:relative;
}
.book::after{
  content:'';position:absolute;left:2px;top:3px;bottom:3px;
  width:1px;background:rgba(255,255,255,.15);
}

/* ── Desk area ── */
#desk-area{
  position:absolute;
  bottom:var(--floor-h);left:220px;
  width:250px;height:200px;z-index:8;
}

#desk{
  position:absolute;
  bottom:0;left:0;
  width:250px;height:130px;
}
.desk-top{
  position:absolute;top:0;left:0;
  width:250px;height:12px;
  background:var(--wood-lt);
  border:2px solid var(--wood);
  border-radius:2px;
}
.desk-top::after{
  content:'';position:absolute;top:2px;left:8px;right:8px;
  height:2px;background:rgba(255,255,255,.12);border-radius:1px;
}
.desk-drawer{
  position:absolute;top:14px;left:140px;
  width:80px;height:35px;
  background:var(--wood-lt);
  border:2px solid var(--wood);
  border-top:none;border-radius:0 0 2px 2px;
}
.drawer-handle{
  position:absolute;top:50%;left:50%;
  width:20px;height:3px;
  background:var(--wood-dk);border-radius:2px;
  transform:translate(-50%,-50%);
}
.desk-leg{
  position:absolute;bottom:0;width:8px;height:100px;
  background:var(--wood);border-radius:0 0 2px 2px;
}
.dk-l{left:15px}
.dk-r{right:15px}

/* Chair */
#chair{
  position:absolute;
  bottom:0;left:80px;
  width:60px;height:155px;z-index:-1;
}
.chair-back{
  width:50px;height:55px;margin:0 auto;
  background:var(--wood);border-radius:4px 4px 0 0;
  border:2px solid var(--wood-dk);
  position:relative;
}
.chair-back::after{
  content:'';position:absolute;top:6px;left:6px;right:6px;bottom:6px;
  border:2px solid var(--wood-dk);border-radius:2px;
}
.chair-seat{
  width:56px;height:8px;margin:0 auto;
  background:var(--wood-lt);
  border:2px solid var(--wood);
}
.chair-leg{
  position:absolute;bottom:0;width:6px;height:85px;
  background:var(--wood);
}
.ch-l1{left:6px}
.ch-l2{right:6px}

/* Desk items */
.desk-item{position:absolute;z-index:12}

#notepad{top:-48px;left:25px;width:48px;height:58px}
.np-page{
  width:48px;height:58px;
  background:#fffef5;border:1px solid #e0d8c8;
  border-radius:2px;
  padding:10px 6px 6px 14px;
  display:flex;flex-direction:column;gap:7px;
}
body.dark .np-page{background:#4a4540;border-color:#5a5048}
.np-line{height:1px;background:#c8d0e0}
body.dark .np-line{background:#5a5550}
.np-binding{
  position:absolute;top:0;left:4px;width:6px;height:100%;
  background:repeating-linear-gradient(180deg,#aaa 0 2px,transparent 2px 7px);
}

#mug{top:-28px;left:95px;width:32px;height:35px}
.mug-cup{
  width:22px;height:24px;
  background:#e8e0d4;
  border:2px solid #d4c8b8;
  border-radius:0 0 5px 5px;
  position:relative;
}
.mug-cup::before{
  content:'';position:absolute;top:-4px;left:-3px;right:-3px;
  height:5px;background:#e8e0d4;
  border:2px solid #d4c8b8;border-radius:3px 3px 0 0;
}
body.dark .mug-cup{background:#5a5048;border-color:#6a6058}
body.dark .mug-cup::before{background:#5a5048;border-color:#6a6058}
.mug-ear{
  position:absolute;top:4px;left:20px;
  width:9px;height:13px;
  border:2px solid #d4c8b8;
  border-left:none;border-radius:0 6px 6px 0;
}
body.dark .mug-ear{border-color:#6a6058}
.mug-steam{position:absolute;top:-10px;left:3px}
.ms{
  position:absolute;bottom:0;display:block;
  width:2px;height:8px;
  background:rgba(255,255,255,.3);
  border-radius:2px;
  animation:steam 2s ease-out infinite;
}
.ms1{left:0;animation-delay:0s}
.ms2{left:6px;animation-delay:.5s}
.ms3{left:12px;animation-delay:1s}
@keyframes steam{
  0%{opacity:0;transform:translateY(0) scaleX(1)}
  15%{opacity:.5}
  100%{opacity:0;transform:translateY(-16px) scaleX(1.8)}
}

#desk-lamp-item{top:-44px;right:20px;width:34px;height:48px}
.dl-shade{
  width:26px;height:16px;margin:0 auto;
  background:#444;
  clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%);
}
body.dark .dl-shade{background:#333}
.dl-arm{width:3px;height:18px;background:#555;margin:0 auto}
.dl-base{width:18px;height:4px;background:#444;border-radius:2px;margin:0 auto}
body.dark .dl-arm{background:#444}
body.dark .dl-base{background:#333}

#pen-cup{top:-35px;left:160px;width:22px;height:38px}
.pcup{
  position:absolute;bottom:0;
  width:16px;height:18px;
  background:#8a7a6a;border-radius:0 0 3px 3px;
  border:2px solid #7a6a5a;
}
.pen-stick,.pencil-stick{
  position:absolute;bottom:14px;width:3px;
  border-radius:1px 1px 0 0;
}
.pk1{left:4px;height:22px;background:#2c3e50;transform:rotate(-3deg)}
.pk2{left:9px;height:20px;background:#c0392b;transform:rotate(2deg)}
.pencil-stick{
  left:14px;height:24px;background:#f1c40f;transform:rotate(4deg);
}
.pencil-stick::before{
  content:'';position:absolute;top:-3px;left:0;
  width:3px;height:3px;background:#2c3e50;
  clip-path:polygon(50% 0%,0% 100%,100% 100%);
}

/* ── Record Player ── */
#records{
  bottom:var(--floor-h);left:510px;
  width:95px;height:100px;z-index:6;
}
.rec-body{
  width:88px;height:22px;
  background:var(--wood-dk);border:2px solid var(--wood);
  border-radius:3px;position:relative;
}
.vinyl{
  position:absolute;top:-20px;left:8px;
  width:44px;height:44px;border-radius:50%;
  background:#1a1a1a;border:1px solid #333;
}
.vinyl-label{
  position:absolute;top:50%;left:50%;
  width:14px;height:14px;border-radius:50%;
  background:#c0392b;transform:translate(-50%,-50%);
}
.vinyl-label::after{
  content:'';position:absolute;top:50%;left:50%;
  width:3px;height:3px;border-radius:50%;
  background:#111;transform:translate(-50%,-50%);
}
.vinyl-g{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
  transform:translate(-50%,-50%);
}
.vg1{width:24px;height:24px}
.vg2{width:32px;height:32px}
.vg3{width:40px;height:40px}
.vinyl.spin{animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.tonearm{position:absolute;top:-15px;right:10px}
.ta-pivot{width:7px;height:7px;background:#888;border-radius:50%}
.ta-rod{
  width:2px;height:22px;background:#aaa;
  margin-left:2.5px;transform:rotate(20deg);
  transform-origin:top center;
  transition:transform var(--m);
  border-radius:1px;
}
.tonearm.playing .ta-rod{transform:rotate(3deg)}
.rec-legs{position:relative;height:60px}
.rec-leg{position:absolute;bottom:0;width:6px;background:var(--wood)}
.rl-l{left:8px;height:60px}
.rl-r{right:14px;height:60px}

/* ── Cat ── */
#cat{
  bottom:calc(var(--floor-h) + 10px);left:340px;
  width:65px;height:50px;z-index:14;
}
.cat-wrap{position:relative;width:65px;height:50px}

.c-body{
  position:absolute;bottom:0;left:10px;
  width:40px;height:22px;
  background:#f5a623;border-radius:50% 50% 8px 8px;
}
.c-head{
  position:absolute;top:5px;left:2px;
  width:26px;height:22px;
  background:#f5a623;border-radius:50% 50% 40% 40%;
  z-index:3;
}
.c-ear{
  position:absolute;top:-5px;
  width:8px;height:10px;
  background:#f5a623;
  clip-path:polygon(50% 0%,0% 100%,100% 100%);
}
.c-ear-l{left:2px}
.c-ear-r{right:2px}
.c-ear::after{
  content:'';position:absolute;top:3px;left:2px;
  width:4px;height:5px;background:#f8b;
  clip-path:polygon(50% 0%,0% 100%,100% 100%);
}
.c-eye{
  position:absolute;top:7px;
  width:5px;height:5px;background:#5a5;border-radius:50%;
}
.c-eye-l{left:5px}
.c-eye-r{right:5px}
.c-pupil{
  position:absolute;top:1px;left:50%;
  width:2px;height:3px;background:#111;
  border-radius:50%;transform:translateX(-50%);
  transition:height var(--f);
}
#cat.blink .c-eye{height:2px;top:9px;overflow:hidden}
.c-nose{
  position:absolute;bottom:3px;left:50%;
  width:3px;height:2px;background:#e88;
  border-radius:50%;transform:translateX(-50%);
}
.c-whisker{position:absolute;bottom:4px;height:1px;width:10px;background:#dda050}
.c-wl1{left:-5px;transform:rotate(-6deg)}
.c-wl2{left:-4px;bottom:2px;transform:rotate(6deg)}
.c-wr1{right:-5px;transform:rotate(6deg)}
.c-wr2{right:-4px;bottom:2px;transform:rotate(-6deg)}
.c-tail{
  position:absolute;bottom:5px;right:-10px;
  width:22px;height:8px;
  border:3px solid #f5a623;
  border-color:#f5a623 #f5a623 transparent transparent;
  border-radius:0 12px 0 0;
  animation:wag 3s ease-in-out infinite;
}
@keyframes wag{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
.c-paw{
  position:absolute;bottom:-2px;
  width:8px;height:5px;background:#f5a623;border-radius:50%;
}
.c-pw1{left:14px}
.c-pw2{left:30px}

#cat.purr .c-body{animation:purr .25s ease-in-out infinite alternate}
@keyframes purr{to{transform:scaleY(1.06)}}
.purr-label{
  position:absolute;top:-10px;left:50%;
  transform:translateX(-50%);
  font-size:10px;color:var(--text3);
  font-style:italic;letter-spacing:1px;
  opacity:0;transition:opacity var(--m);
  white-space:nowrap;
}
#cat.purr .purr-label{opacity:.7}

/* ── Plant ── */
#plant{
  bottom:var(--floor-h);right:160px;
  width:55px;height:110px;z-index:5;
}
.plant-pot{position:absolute;bottom:0}
.pp-rim{
  width:38px;height:6px;
  background:#c07050;border-radius:3px;
  margin:0 auto;
}
.pp-body{
  width:34px;height:34px;margin:0 2px;
  background:#b06040;
  clip-path:polygon(5% 0%,95% 0%,80% 100%,20% 100%);
}
.plant-leaves{
  position:absolute;bottom:38px;left:50%;
  transform:translateX(-50%);
}
.pl{
  position:absolute;bottom:0;
  width:14px;height:30px;
  background:#5a9a45;
  border-radius:50% 50% 0 0;
  transform-origin:bottom center;
  animation:sway 4s ease-in-out infinite;
}
.pl::after{
  content:'';position:absolute;left:50%;bottom:0;
  width:1px;height:100%;background:rgba(0,0,0,.08);
}
.pl1{left:-10px;--sw:-18deg;height:36px;transform:rotate(-18deg);animation-delay:0s}
.pl2{left:6px;--sw:16deg;height:32px;transform:rotate(16deg);animation-delay:.5s}
.pl3{left:-4px;--sw:-6deg;height:40px;transform:rotate(-6deg);animation-delay:.2s}
.pl4{left:2px;--sw:24deg;height:28px;transform:rotate(24deg);animation-delay:.8s}
.pl5{left:-16px;--sw:-28deg;height:26px;transform:rotate(-28deg);animation-delay:1.2s}
@keyframes sway{
  0%,100%{transform:rotate(var(--sw,0deg))}
  50%{transform:rotate(calc(var(--sw,0deg) + 4deg))}
}

/* ── Glow overlay ── */
#glow-overlay{
  position:absolute;inset:0;
  pointer-events:none;z-index:30;
  background:var(--warm-glow);
  transition:background var(--s);
}
body.dark #glow-overlay{background:rgba(0,0,0,.22)}
body.lights-off #glow-overlay{background:rgba(0,0,0,.5)}
body.lights-off.dark #glow-overlay{background:rgba(0,0,0,.6)}

/* ==================================================================
   TITLE
   ================================================================== */
#title{
  text-align:center;padding:16px 0 0;
}
#title span{
  font-size:18px;font-weight:400;
  color:#c0a880;letter-spacing:5px;
  text-transform:lowercase;
}
#title small{
  display:block;font-size:11px;
  color:#8a7a60;letter-spacing:2px;
  margin-top:2px;
}

/* ==================================================================
   PANEL
   ================================================================== */
#panel{
  position:fixed;top:0;right:0;
  width:380px;max-width:92vw;height:100%;
  background:var(--panel-bg);
  border-left:1px solid var(--trim);
  z-index:5000;
  padding:44px 32px 32px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--m) ease,background var(--s);
  box-shadow:-4px 0 24px rgba(0,0,0,.1);
}
#panel.open{transform:translateX(0)}

#panel-x{
  position:absolute;top:10px;right:14px;
  background:none;border:none;font-size:26px;
  color:var(--text2);cursor:pointer;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;transition:background var(--f);
}
#panel-x:hover{background:rgba(0,0,0,.04)}

#p-title{
  font-size:17px;font-weight:400;color:var(--text);
  letter-spacing:1px;
  padding-bottom:12px;margin-bottom:18px;
  border-bottom:1px solid var(--trim);
}
#p-body{font-size:14px;line-height:1.75;color:var(--text2)}
#p-body p{margin-bottom:14px}

/* Book card */
.bcard{
  padding:18px;background:rgba(0,0,0,.03);
  border-radius:6px;border-left:3px solid var(--accent);
  margin-bottom:14px;
}
body.dark .bcard{background:rgba(255,255,255,.04)}
.bcard h3{font-size:15px;font-weight:400;color:var(--text);margin-bottom:3px}
.bcard .au{font-size:12px;color:var(--text3);font-style:italic;margin-bottom:10px}
.bcard .nt{font-size:13px;line-height:1.65;color:var(--text2)}

/* Thought quote */
.tq{
  font-style:italic;padding:14px 18px;
  background:rgba(0,0,0,.02);border-radius:4px;
  margin-bottom:14px;border-left:2px solid var(--text3);
}
body.dark .tq{background:rgba(255,255,255,.03)}

/* Notepad textarea */
#p-body textarea{
  width:100%;height:220px;
  background:#fffef5;border:1px solid #e0d8c8;
  border-radius:4px;padding:14px;
  font:14px/1.8 Georgia,serif;
  color:var(--text);resize:vertical;outline:none;
  transition:border-color var(--f);
}
#p-body textarea:focus{border-color:var(--accent)}
body.dark #p-body textarea{background:#3a3530;border-color:#4a4035}

/* Time display */
.time-display{text-align:center;padding:20px 0}
.time-display .t{font-size:34px;color:var(--text);letter-spacing:2px;margin-bottom:6px}
.time-display .d{font-size:13px;color:var(--text3);letter-spacing:1px}

/* ==================================================================
   TOOLTIP
   ================================================================== */
#tip{
  position:fixed;
  padding:4px 12px;
  background:rgba(50,40,30,.88);
  color:#e8ddd3;font-size:11px;letter-spacing:1px;
  border-radius:3px;pointer-events:none;
  opacity:0;transition:opacity var(--f);
  z-index:9000;white-space:nowrap;
  font-family:Georgia,serif;
}
#tip.on{opacity:1}

/* ==================================================================
   MUSIC INDICATOR
   ================================================================== */
#music{
  position:fixed;bottom:20px;left:20px;
  display:flex;align-items:flex-end;gap:3px;
  padding:8px 16px 8px 10px;
  background:rgba(50,40,30,.8);
  border-radius:20px;z-index:4000;
  cursor:pointer;
  transition:opacity var(--m);
}
#music.off{opacity:0;pointer-events:none}
#music.on{opacity:1;pointer-events:auto}
.eq{display:flex;align-items:flex-end;gap:2px}
.eq i{
  display:block;width:3px;background:var(--accent);
  border-radius:1px;animation:eqb .8s ease-in-out infinite;
}
.eq i:nth-child(1){height:8px;animation-delay:0s}
.eq i:nth-child(2){height:14px;animation-delay:.12s}
.eq i:nth-child(3){height:10px;animation-delay:.24s}
.eq i:nth-child(4){height:6px;animation-delay:.36s}
@keyframes eqb{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
#music span{
  font-size:10px;color:#e8ddd3;letter-spacing:1px;
  margin-left:6px;font-family:Georgia,serif;
}

/* ==================================================================
   ANIMATIONS & A11Y
   ================================================================== */
#room{animation:room-in 1s ease-out}
@keyframes room-in{
  from{opacity:0;transform:translateY(15px)}
  to{opacity:1;transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.05s!important;
  }
}

@media(max-width:860px){
  #scene{transform:scale(.7);transform-origin:center center}
  #panel{width:100%;max-width:100%}
}
@media(max-width:520px){
  #scene{transform:scale(.5)}
}