/* =====================================================
   bubby's room — athena's styles.
   colors come from the vars in style.css (--ink, --paper,
   --paper-deep, --wax, --bloom, --water, --leaf) so the
   room still looks right when the lights go out.
   the drawing itself lives in bubby-room.js.
===================================================== */

/* hanging lamp — follows the window's evening */
.room-bubby .hang-brass{fill:var(--paper-deep);}
.room-bubby .hang-shade{fill:var(--paper);}
.room-bubby .hang-lit{
  fill:var(--bloom-center);stroke:none;opacity:0;
  transition:opacity 2.8s ease;
}
.room-bubby .hang-glow{
  fill:var(--bloom-center);stroke:none;opacity:0;
  transition:opacity 2.8s ease;
}
.room-bubby .hang-open{fill:var(--paper-deep);transition:fill 2.8s ease;}
.room-bubby.sky-sunset .hang-glow,
.room-bubby.sky-night .hang-glow{opacity:.42;}
.room-bubby.sky-sunset .hang-lit,
.room-bubby.sky-night .hang-lit{opacity:.4;}
.room-bubby.sky-sunset .hang-open,
.room-bubby.sky-night .hang-open{fill:var(--bloom-center);}
@media (prefers-reduced-motion:no-preference){
  .room-bubby.sky-sunset .hang-glow,
  .room-bubby.sky-night .hang-glow{
    animation:hang-glow 5.8s ease-in-out infinite;
  }
  @keyframes hang-glow{
    0%,100%{opacity:.32;}
    50%{opacity:.52;}
  }
}

/* the heart on the wall */
.room-bubby .bubby-heart{fill:none;stroke:var(--wax);stroke-width:1.4;}

/* snake plant under the heart */
.room-bubby .snake-leaf path:first-child{fill:var(--leaf);}
.room-bubby .snake-band{opacity:.45;}
@media (prefers-reduced-motion:no-preference){
  .room-bubby .snake-sway{
    transform-box:fill-box;transform-origin:center bottom;
    animation:snake-sway 7.4s ease-in-out infinite;
  }
  .room-bubby .snake-sway:nth-child(2){animation-duration:8.6s;animation-delay:-1.8s;}
  .room-bubby .snake-sway:nth-child(3){animation-duration:6.8s;animation-delay:-3.2s;}
  .room-bubby .snake-sway:nth-child(4){animation-duration:9.1s;animation-delay:-.6s;}
  .room-bubby .snake-sway:nth-child(5){animation-duration:7.9s;animation-delay:-4.1s;}
  .room-bubby .snake-sway:nth-child(6){animation-duration:8.3s;animation-delay:-2.4s;}
  .room-bubby .snake-sway:nth-child(7){animation-duration:6.4s;animation-delay:-1.1s;}
  @keyframes snake-sway{
    0%,100%{transform:rotate(-.7deg);}
    50%{transform:rotate(.9deg);}
  }
}

/* flip phone on the nightstand */
.room-bubby .phone-glass{fill:var(--paper-deep);}
.room-bubby .phone-screen-heart{fill:var(--wax);stroke:none;}
.room-bubby .phone-keys circle{fill:var(--paper-deep);}
@media (prefers-reduced-motion:no-preference){
  .room-bubby .phone-screen-heart{
    transform-box:fill-box;transform-origin:center;
    animation:phone-heart 4.8s ease-in-out infinite;
  }
  @keyframes phone-heart{
    0%,100%{opacity:.85;}
    50%{opacity:.45;}
  }
}

/* the phone's little page */
.card.phone{max-width:440px;}
.card.phone .phone-status{font-family:var(--hand);font-size:16px;color:var(--ink-soft);}
.card.phone .phone-empty{
  font-family:var(--hand);font-size:18px;color:var(--ink-soft);
  margin-top:18px;
}
.phone-list{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.phone-clip{
  display:flex;gap:12px;align-items:center;width:100%;
  text-align:left;cursor:pointer;
  background:var(--paper-deep);border:1.4px solid var(--ink);
  padding:8px 10px;color:var(--ink);
  font-family:var(--hand);
}
.phone-clip:hover{background:var(--paper);}
.phone-clip.did{opacity:.55;}
.phone-thumb{
  width:44px;height:58px;flex:none;overflow:hidden;
  border:1px solid var(--ink);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.phone-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.phone-glyph{
  width:18px;height:26px;border:1.4px solid var(--ink);
  border-radius:4px 4px 6px 6px;position:relative;
}
.phone-glyph::after{
  content:"";position:absolute;left:4px;right:4px;top:5px;bottom:8px;
  border:1px solid var(--wax);
}
.phone-clip-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.phone-clip-note{
  font-size:18px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.phone-clip-meta{font-size:14px;color:var(--ink-soft);}
.phone-back{
  font-family:var(--hand);font-size:17px;color:var(--ink-soft);
  background:none;border:none;cursor:pointer;padding:0;margin:0 0 8px;
}
.phone-back:hover{color:var(--ink);}
.phone-player{
  position:relative;width:100%;
  aspect-ratio:9/16;max-height:52vh;
  background:var(--paper-deep);border:1.4px solid var(--ink);
  margin:8px 0 14px;overflow:hidden;
}
.phone-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.phone-player.wide{aspect-ratio:16/9;max-height:40vh;}
.phone-watch-foot{margin-top:8px;}

/* games shelf — boxes on the case */
.room-bubby .game-box-wax{fill:var(--wax);fill-opacity:.32;}
.room-bubby .game-box-water{fill:var(--water);fill-opacity:.38;}
.room-bubby .game-box-bloom{fill:var(--bloom);}
.room-bubby .game-box-leaf{fill:var(--leaf);}
.room-bubby .game-box-deep{fill:var(--paper-deep);}

/* the shelf's little page */
.card.games{max-width:440px;}
.card.games .games-status{font-family:var(--hand);font-size:16px;color:var(--ink-soft);}
.card.games .games-empty{
  font-family:var(--hand);font-size:18px;color:var(--ink-soft);
  margin-top:18px;
}
.games-list{display:flex;flex-direction:column;gap:8px;margin-top:18px;}
.games-item{
  display:flex;gap:12px;align-items:center;width:100%;
  text-align:left;cursor:pointer;
  background:var(--paper-deep);border:1.4px solid var(--ink);
  padding:8px 10px;color:var(--ink);
  font-family:var(--hand);
}
.games-item:hover{background:var(--paper);}
.games-item.did{opacity:.55;}
.games-thumb{
  width:36px;height:48px;flex:none;
  border:1.4px solid var(--ink);background:var(--paper);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.games-thumb::after{
  content:"";position:absolute;left:6px;right:6px;top:8px;bottom:10px;
  border:1px solid var(--wax);
}
.games-thumb:has(.games-mark)::after,
.games-thumb:has(.games-fav)::after{display:none;}
.games-mark{width:22px;height:22px;color:var(--ink);display:block;}
.games-fav{width:18px;height:18px;display:block;}
.games-icons{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;}
.games-icon{
  width:34px;height:34px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1.3px solid var(--ink-soft);
  color:var(--ink);
}
.games-icon.active{border-color:var(--ink);background:var(--paper-deep);}
.games-icon .games-mark{width:20px;height:20px;}
.games-item-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.games-item-title{
  font-size:18px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.games-item-meta{font-size:14px;color:var(--ink-soft);}
.games-back{
  font-family:var(--hand);font-size:17px;color:var(--ink-soft);
  background:none;border:none;cursor:pointer;padding:0;margin:0 0 8px;
}
.games-back:hover{color:var(--ink);}
.games-watch-foot{margin-top:8px;}
.games-thumb.ldq::after{
  content:"?";border:none;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hand);font-size:22px;color:var(--wax);
}
.games-thumb.trivia::after{
  content:"!";border:none;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--hand);font-size:22px;color:var(--wax);
}
.games-thumb.weird::after{
  content:"";border:none;left:7px;right:7px;top:10px;bottom:12px;
  box-shadow:inset 0 0 0 1.2px var(--wax);
  background:linear-gradient(var(--wax),var(--wax)) center/1px 100% no-repeat;
}
.trivia-answer{
  font-family:var(--hand);font-size:18px;line-height:1.3;
  color:var(--wax);margin:12px 0 0;
}
.trivia-guess{margin:10px 0 4px;}
#trivia-empty:empty{display:none;}
#trivia-go{margin-top:8px;}
.trivia-clock{color:var(--wax);}
.trivia-verdict{
  font-family:var(--hand);font-size:18px;line-height:1.3;
  margin:12px 0 0;
}
.trivia-verdict.right{color:var(--ink);}
.trivia-verdict.wrong{color:var(--wax);}
.ldq-slip .btn.ghost{margin-top:12px;}

/* long distance questions */
.ldq-picks{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:10px;font-family:var(--hand);font-size:17px;color:var(--ink-soft);
}
.ldq-wait{
  font-family:var(--hand);font-size:18px;color:var(--ink-soft);
  margin-top:18px;
}
.ldq-slip{
  margin:16px 0 8px;padding:18px 16px 14px;
  background:var(--paper-deep);border:1.4px solid var(--ink);
}
.ldq-q{
  font-family:var(--hand);font-size:22px;line-height:1.35;
  color:var(--ink);margin:0 0 10px;
}
.ldq-meta{font-family:var(--hand);font-size:15px;color:var(--ink-soft);margin:0;}

/* the picture window */
.room-bubby .win-sky{fill:url(#bubby-sky);}
.room-bubby .win-sea{fill:url(#bubby-sea);}
.room-bubby .win-wave{fill:none;}
@media (prefers-reduced-motion:no-preference){
  .room-bubby .win-wave-a{animation:bubby-wave-r 7.2s linear infinite;}
  .room-bubby .win-wave-b{animation:bubby-wave-l 5.4s linear infinite;}
  .room-bubby .win-wave-c{animation:bubby-wave-r 8.6s linear infinite;}
  @keyframes bubby-wave-l{from{transform:translateX(0);}to{transform:translateX(-36px);}}
  @keyframes bubby-wave-r{from{transform:translateX(0);}to{transform:translateX(36px);}}
}
.room-bubby .win-bld{fill:var(--paper-deep);}
.room-bubby .win-wins{opacity:.55;}
.room-bubby.sky-night .win-wins{stroke:var(--paper);opacity:.7;}
.room-bubby.sky-night .win-lit{stroke:var(--paper);}
.room-bubby .win-city{font-family:var(--hand);font-size:16px;fill:var(--ink-soft);}
.room-bubby .win-sun{fill:var(--bloom-center);}
.room-bubby .win-moon{fill:var(--paper);stroke:var(--ink);}
.room-bubby .win-moon-cut{fill:url(#bubby-sky);stroke:none;}
.room-bubby .win-stars{fill:var(--paper);stroke:none;opacity:0;}
.room-bubby .win-lit{opacity:0;}
.room-bubby .win-sun-low,.room-bubby .win-moon,.room-bubby .win-moon-cut{opacity:0;}
.room-bubby.sky-day .sky-top{stop-color:var(--water);stop-opacity:.45;}
.room-bubby.sky-day .sky-mid{stop-color:var(--paper);}
.room-bubby.sky-day .sky-bot{stop-color:var(--paper-deep);stop-opacity:.35;}
.room-bubby.sky-day .sea-top{stop-color:var(--water);stop-opacity:.55;}
.room-bubby.sky-day .sea-bot{stop-color:var(--water);stop-opacity:.2;}
.room-bubby.sky-sunset .sky-top{stop-color:var(--bloom);stop-opacity:.85;}
.room-bubby.sky-sunset .sky-mid{stop-color:var(--wax);stop-opacity:.45;}
.room-bubby.sky-sunset .sky-bot{stop-color:var(--paper-deep);stop-opacity:.5;}
.room-bubby.sky-sunset .sea-top{stop-color:var(--wax);stop-opacity:.4;}
.room-bubby.sky-sunset .sea-bot{stop-color:var(--water);stop-opacity:.35;}
.room-bubby.sky-sunset .win-sun-high{opacity:0;}
.room-bubby.sky-sunset .win-sun-low{opacity:.95;}
.room-bubby.sky-night .sky-top{stop-color:var(--ink);stop-opacity:.7;}
.room-bubby.sky-night .sky-mid{stop-color:var(--paper-deep);}
.room-bubby.sky-night .sky-bot{stop-color:var(--ink);stop-opacity:.35;}
.room-bubby.sky-night .sea-top{stop-color:var(--ink);stop-opacity:.45;}
.room-bubby.sky-night .sea-bot{stop-color:var(--paper-deep);}
.room-bubby.sky-night .win-sun-high,.room-bubby.sky-night .win-sun-low{opacity:0;}
.room-bubby.sky-night .win-moon,.room-bubby.sky-night .win-moon-cut{opacity:1;}
.room-bubby.sky-night .win-stars{opacity:.85;}
.room-bubby.sky-night .win-lit{opacity:.8;}

/* draggable curtains */
.win-curtain-g{cursor:grab;touch-action:none;}
.win-curtain-g.dragging{cursor:grabbing;}
.win-curtain-hit{fill:transparent;stroke:none;}

/* two little cats */
svg.room .cubby-ear-a{fill:var(--wax);stroke:none;}
svg.room .cubby-cat-name{
  font-family:var(--hand);font-size:13px;fill:var(--ink-soft);
}
svg.room .cubby-cat{cursor:grab;touch-action:none;}
svg.room .cubby-cat.dragging{cursor:grabbing;}
svg.room .cubby-cat-hit{fill:transparent;stroke:none;}
svg.room .cubby-cat.selected .cubby-cat-hit{
  stroke:var(--wax);stroke-width:1.2;opacity:.55;
}
svg.room .cubby-cat.kissing{cursor:default;}
svg.room .cubby-kiss{
  opacity:0;
  transition:opacity 1.1s ease;
}
svg.room .cubby-kiss.up{opacity:1;}
svg.room .cubby-kiss-heart{fill:var(--wax);stroke:none;}
@media (prefers-reduced-motion:no-preference){
  svg.room .cubby-kiss.up .cubby-kiss-bob{
    animation:cubby-kiss-float 2.8s ease infinite;
  }
}
@keyframes cubby-kiss-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-5px);}
}

/* the cats' two poses, and their little movements. transforms here live on
   elements that carry no transform attribute of their own (see initCubby) */
svg.room .cubby-cat .cat-walk{opacity:0;transition:opacity .16s ease;}
svg.room .cubby-cat .cat-sit{opacity:1;transition:opacity .16s ease;}
svg.room .cubby-cat.walking .cat-walk{opacity:1;}
svg.room .cubby-cat.walking .cat-sit{opacity:0;}
svg.room .cubby-cat .cat-eyes{fill:var(--ink);stroke:none;transform-box:fill-box;transform-origin:center;transition:transform .07s ease;}
svg.room .cubby-cat.blink .cat-eyes{transform:scaleY(.12);}
svg.room .cubby-cat .cat-ear{transform-box:fill-box;transform-origin:bottom center;}
svg.room .cubby-cat .cat-tail{transform-box:fill-box;transform-origin:right bottom;}
svg.room .cubby-cat .cat-walk .cat-tail{transform-origin:right bottom;}
svg.room .cubby-cat .cat-leg{transform-box:fill-box;transform-origin:top center;}
svg.room .cubby-cat .cat-sit > path:nth-child(2){transform-box:fill-box;transform-origin:left bottom;}
@media (prefers-reduced-motion:no-preference){
  svg.room .cubby-cat .cat-sit .cat-tail{animation:cat-tail-sway 4.6s ease-in-out infinite;}
  #cat-k .cat-sit .cat-tail{animation-duration:5.3s;animation-delay:-2s;}
  @keyframes cat-tail-sway{0%,100%{transform:rotate(0deg);}35%{transform:rotate(-9deg);}70%{transform:rotate(5deg);}}
  svg.room .cubby-cat .cat-walk .cat-tail{animation:cat-tail-walk 1.1s ease-in-out infinite;}
  @keyframes cat-tail-walk{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(8deg);}}
  svg.room .cubby-cat.twitch .cat-ear{animation:cat-ear-twitch .5s ease;}
  @keyframes cat-ear-twitch{0%,100%{transform:rotate(0deg);}30%{transform:rotate(-16deg);}60%{transform:rotate(6deg);}}
  svg.room .cubby-cat.walking .cat-leg.leg-1{animation:cat-leg .46s ease-in-out infinite;}
  svg.room .cubby-cat.walking .cat-leg.leg-2{animation:cat-leg .46s ease-in-out infinite -.23s;}
  @keyframes cat-leg{0%,100%{transform:rotate(-22deg);}50%{transform:rotate(22deg);}}
  svg.room .cubby-cat.stretching .cat-sit > path:nth-child(2){animation:cat-stretch 1.9s ease-in-out;}
  @keyframes cat-stretch{0%,100%{transform:scale(1,1);}40%{transform:scale(1.14,.86);}65%{transform:scale(1.14,.86);}}
  svg.room .cubby-cat.stretching .cat-sit .cat-tail{animation:cat-tail-up 1.9s ease-in-out;}
  @keyframes cat-tail-up{0%,100%{transform:rotate(0deg);}40%,65%{transform:rotate(-24deg);}}
}

/* off the floor: legs tucked, no gait; a little squash on landing */
svg.room .cubby-cat.airborne .cat-walk{opacity:1;}
svg.room .cubby-cat.airborne .cat-sit{opacity:0;}
svg.room .cubby-cat.airborne .cat-leg{animation:none;}
svg.room .cubby-cat.airborne .cat-leg.leg-1{transform:rotate(-24deg);}
svg.room .cubby-cat.airborne .cat-leg.leg-2{transform:rotate(14deg);}
svg.room .cubby-cat .cubby-cat-draw{transform-box:fill-box;transform-origin:center bottom;transition:transform .12s ease-out;}
svg.room .cubby-cat.land .cubby-cat-draw{transform:scale(1.12,.86);}
/* a cat riding on the other one keeps its name to itself */
svg.room .cubby-cat.perched .cubby-cat-name{opacity:0;}

/* sprinting: ears back, legs reaching, and dust kicked up behind */
svg.room .cubby-cat.running .cat-leg.leg-1{animation:cat-leg-run .26s ease-in-out infinite;}
svg.room .cubby-cat.running .cat-leg.leg-2{animation:cat-leg-run .26s ease-in-out infinite -.13s;}
svg.room .cubby-cat.running .cat-walk .cat-ear{transform:rotate(-28deg);}
svg.room .cubby-cat.running .cat-walk .cat-tail{animation-duration:.5s;}
@keyframes cat-leg-run{0%,100%{transform:rotate(-34deg);}50%{transform:rotate(34deg);}}
.cat-dust{pointer-events:none;}
.cat-dust-puff{transform-box:fill-box;transform-origin:left center;animation:cat-dust .5s ease-out forwards;stroke:var(--ink-soft);}
@keyframes cat-dust{0%{opacity:.7;transform:translate(0,0) scale(.6);}100%{opacity:0;transform:translate(-9px,-6px) scale(1.4);}}

/* the little wall ledges the cats climb (drawn from LEDGES in bubby-room.js) */
.cat-ledges{stroke:var(--ink);}

/* a piano key going down under a cat */
.cat-key-down{fill:var(--ink);opacity:.35;pointer-events:none;animation:cat-key .38s ease-out forwards;}
@keyframes cat-key{0%{opacity:.4;}100%{opacity:0;}}

/* today's hanging board */
.room-bubby .daily-face{fill:var(--paper);}
.room-bubby .daily-marker{fill:var(--wax);stroke:var(--ink);}
.card.daily{max-width:440px;}
.card.daily .daily-kind{
  font-family:var(--hand);font-size:17px;color:var(--ink-soft);
  margin-bottom:8px;
}
.card.daily .daily-body{
  font-family:var(--hand);font-size:22px;line-height:1.4;
  color:var(--ink);margin-bottom:16px;
}
.card.daily .daily-note{
  font-family:var(--hand);font-size:16px;color:var(--ink-soft);
  margin-bottom:0;
}

/* weird windows */
.card.games.weird{max-width:540px;}
.weird-row{display:flex;gap:12px;margin-top:14px;}
.weird-pane{
  flex:1;min-width:0;
  border:1.4px solid var(--ink);background:var(--paper-deep);
  padding:8px 8px 6px;
}
.weird-label{
  font-family:var(--hand);font-size:15px;color:var(--ink-soft);
  margin:0 0 6px;text-align:center;
}
.weird-pic{width:100%;height:auto;display:block;background:var(--paper);}
.weird-shutter{
  aspect-ratio:200/150;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--ink-soft);
  position:relative;overflow:hidden;
}
.weird-shutter::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-18deg,transparent,transparent 6px,var(--ink-soft) 6px,var(--ink-soft) 7px);
  opacity:.28;
}
.weird-shutter span{
  font-family:var(--hand);font-size:17px;color:var(--ink-soft);
  position:relative;
}
.weird-cap{
  font-family:var(--hand);font-size:16px;color:var(--ink);
  margin:8px 0 2px;text-align:center;line-height:1.25;
}
.weird-verdict{margin-top:14px;}
.weird-result{
  font-family:var(--hand);font-size:17px;line-height:1.35;
  color:var(--ink);margin:0 0 6px;
}
.weird-play .note-foot{flex-wrap:wrap;justify-content:flex-end;}
.weird-play .games-status{margin-right:auto;}