.pixel-room{overflow:hidden;border:1px solid #5c447b;border-radius:13px;background:#171226;box-shadow:0 10px 28px #08051178}
.room-heading,.room-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px}
.room-heading h1{font-size:clamp(1.45rem,3vw,2.45rem);letter-spacing:-.045em}
.room-identity{display:grid;justify-items:end;max-width:100%;overflow-wrap:anywhere}
.room-identity strong{color:#e9d4ff}.room-identity span{font: .72rem var(--mono);color:var(--cyan)}
.room-hud{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:#4a355e;border-block:1px solid #4a355e}
.room-hud div{display:grid;gap:2px;background:#241933;padding:7px 11px;min-width:0}
.room-hud span{color:#d1bde4;font-size:.72rem}.room-hud b{font:700 .93rem var(--mono);overflow-wrap:anywhere}
.room-stage{position:relative;width:min(100%,930px);margin:auto;isolation:isolate}
.room-art{display:block;width:100%;height:auto;background:#241934;image-rendering:pixelated}
.room-hit{position:absolute;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:0 1px 4px;border:1px solid transparent;background:transparent;border-radius:5px}
.room-hit span{background:#1b112bed;border:1px solid #735792;border-radius:4px;color:#fff0ff;font:700 clamp(.55rem,1.28vw,.77rem) var(--mono);padding:3px 5px;line-height:1.1;white-space:nowrap;pointer-events:none}
.room-hit:hover,.room-hit:focus-visible{background:#eacaff15;border-color:#d0aaff;box-shadow:inset 0 0 20px #cb8aff50}
.room-hit:hover span,.room-hit:focus-visible span{background:#593e76}
.room-toolbar{border-top:1px solid #503862;background:#20172e}
.room-controls,.room-shirt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.room-control{padding:6px 8px;font-size:.8rem;background:#2b2040;border-color:#513966}
.room-control[aria-pressed=true],.room-swatch[aria-pressed=true]{border-color:#c69aff;background:#47315f}
.room-shirt{font:700 .76rem var(--mono);color:var(--muted)}
.room-swatch{display:grid;place-items:center;width:28px;height:28px;padding:4px;border-radius:4px}
.room-swatch span{width:13px;height:13px;border:1px solid #ffffff55}
.room-panel{margin:0 12px 12px;border-color:#57416f;animation:room-panel-in .24s ease-out}
.room-panel .panel-head{margin:0}
.room-timer,.room-timer-chip{font:700 1rem var(--mono);color:#f6d5a0}
.room-timer-chip{position:absolute;right:10px;top:8px;padding:6px 8px;background:#231730;border:1px solid #8c6796;border-radius:5px;z-index:3;font-size:.8rem}
.room-star{animation:room-twinkle 4s ease-in-out infinite}.room-star:nth-child(3n){animation-delay:-1.6s}.room-star:nth-child(even){animation-delay:-2.6s}
.room-person{transform-box:fill-box;transform-origin:center bottom;animation:room-idle 3.2s steps(2,end) infinite}
.room-eyes{animation:room-blink 5s steps(1,end) infinite}
.room-prop{display:none}
.pixel-room[data-mode=walking] .room-person{animation:room-step .22s steps(2,end) infinite}
.pixel-room[data-mode=walking] .room-leg{animation:room-feet .22s steps(2,end) infinite}
.pixel-room[data-mode=walking] .room-leg.right{animation-delay:-.11s}
.pixel-room[data-mode=working] .room-person{animation:room-work .7s steps(2,end) infinite}
.pixel-room[data-mode=working] .room-laptop,.pixel-room[data-mode=studying] .room-book,.pixel-room[data-mode=watering] .room-water,.pixel-room[data-mode=resting] .room-sleep{display:inline}
.pixel-room[data-mode=studying] .room-book,.pixel-room[data-mode=watering] .room-water,.pixel-room[data-mode=resting] .room-sleep{animation:room-prop 1.15s steps(3,end) infinite}
.pixel-room[data-mode=resting] .room-person{animation:none;transform:translate(2px,-4px) rotate(-77deg) scale(.8)}
.pixel-room[data-mode=portaling] .room-gate{animation:room-portal .42s ease-out both}
.room-particles{position:absolute;inset:0;pointer-events:none}
.room-particles i{position:absolute;top:45%;left:49%;width:7px;height:7px;background:#ffdd99;opacity:0}
.room-particles i:nth-child(3n){background:#b2f7e5}.room-particles i:nth-child(even){background:#f4b7ff}
.room-particles i:nth-child(4n+1){--dx:-140px;--dy:-54px}.room-particles i:nth-child(4n+2){--dx:150px;--dy:-65px}
.room-particles i:nth-child(4n+3){--dx:75px;--dy:-140px}.room-particles i:nth-child(4n){--dx:-74px;--dy:-120px}
.room-particles i:nth-child(3n){animation-delay:.13s}.room-particles i:nth-child(3n+1){animation-delay:.25s}
.room-quest-done .room-particles i,.room-level-up .room-particles i{animation-name:room-burst;animation-duration:.8s;animation-fill-mode:both}
.room-level-up{animation:room-level 1s ease-out}
@keyframes room-twinkle{50%{opacity:.22}}
@keyframes room-idle{50%{transform:translateY(-1px)}}
@keyframes room-blink{94%,98%{opacity:0}}
@keyframes room-step{50%{transform:translateY(-3px)}}
@keyframes room-feet{50%{transform:translateY(-3px)}}
@keyframes room-work{0%,100%{transform:translateY(3px) scaleY(.91)}50%{transform:translateY(4px) scaleY(.89)}}
@keyframes room-prop{50%{transform:translateY(-2px);opacity:.57}}
@keyframes room-portal{60%{fill:#db9fff;filter:drop-shadow(0 0 9px #e2afff)}}
@keyframes room-panel-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes room-burst{0%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(90deg)}}
@keyframes room-level{45%{box-shadow:0 0 25px #ddb0ff99}}
@media(max-width:600px){
  .room-heading,.room-toolbar{padding:8px}.room-hud{grid-template-columns:repeat(3,minmax(0,1fr))}
  .room-hud div{padding:5px 7px}.room-hud b{font-size:.8rem}.room-heading{align-items:end}
  .room-hit span{padding:2px}.room-controls{gap:5px}.room-control{min-height:38px}.room-panel{margin:0 8px 8px}
}
@media(prefers-reduced-motion:reduce){.pixel-room,.pixel-room *{animation:none!important;transition:none!important}}