.dom-game{position:absolute;inset:0;background:#05182b;overflow:hidden;image-rendering:pixelated}
.game-house{position:absolute;inset:2%;border:4px solid #18b7df;border-radius:8px;background:#071a2d url('/assets/retro-house-v1.png') center/100% 100% no-repeat;overflow:hidden;box-shadow:inset 0 0 0 4px #071a2d}
.room-wall{position:absolute;display:block;background:#7b8f99}.wall-v{width:5px;height:36%;left:50%;top:0}.wall-v:after{content:'';position:absolute;width:5px;height:36%;left:0;top:178% ;background:#7b8f99}.wall-h{height:5px;width:39%;top:50%;left:0}.wall-h:after{content:'';position:absolute;height:5px;width:39%;left:156%;top:0;background:#7b8f99}
.front-door{position:absolute;width:78px;height:12px;background:#8b5a2b;bottom:0;left:calc(50% - 39px)}
.dom-player,.dom-leak,.dom-pet,.dom-tool{position:absolute;z-index:4}.dom-player{width:8%;aspect-ratio:1/1.35;background:url('/assets/retro-plumber-v1.png') center/contain no-repeat;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px rgba(0,0,0,.65));transition:filter .15s}.dom-player span{display:none}.dom-player.moving{filter:drop-shadow(0 4px 2px rgba(0,0,0,.65)) brightness(1.08)}
.dom-leak{width:7%;aspect-ratio:1/1;background:url('/assets/retro-water-leak-v1.png') center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(24,183,223,.8));animation:leakSpout .55s steps(2) infinite}.dom-leak b,.dom-leak i{display:none}.dom-leak:after{content:'';position:absolute;left:8%;right:8%;bottom:-8px;height:6px;background:linear-gradient(90deg,#f47b20 var(--repair,0%),#fff var(--repair,0%));box-shadow:0 2px 0 #071a2d;opacity:0}.dom-leak.near:after{opacity:1}.dom-leak.fixed{width:28px;aspect-ratio:1;background:#168a46;border:3px solid #9ff0ba;border-radius:50%;filter:none;animation:none}
.dom-pet{width:6%;aspect-ratio:1/1;border-radius:0;color:transparent;display:grid;place-items:center;font:bold 10px Arial;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5));animation:petBob .5s steps(2) infinite}.dom-pet.dog{background:url('/assets/retro-dog-v1.png') center/contain no-repeat}.dom-pet.cat{background:url('/assets/retro-cat-v1.png') center/contain no-repeat}.dom-tool{width:38px;height:38px;border-radius:50%;background:#ffd34f;color:#071a2d;display:grid;place-items:center;font:bold 11px Arial;box-shadow:0 0 0 5px rgba(255,211,79,.25)}
@keyframes leakSpout{50%{transform:translate(-50%,-52%) scale(1.06);filter:drop-shadow(0 0 9px rgba(24,183,223,.95))}}@keyframes petBob{50%{margin-top:-3px}}
.basement-water{position:absolute;z-index:2;left:0;right:0;bottom:0;height:0;background:linear-gradient(rgba(113,231,255,.8),rgba(0,105,168,.88));border-top:4px solid #bff7ff;transition:height .18s linear;overflow:hidden}.basement-water:before,.basement-water:after{content:'';position:absolute;left:-10%;top:-7px;width:120%;height:14px;background:repeating-radial-gradient(ellipse at 15px 8px,transparent 0 10px,#bff7ff 11px 13px,transparent 14px 26px);animation:waterMove 1.2s linear infinite}.basement-water:after{top:9px;opacity:.35;animation-direction:reverse}@keyframes waterMove{to{transform:translateX(26px)}}
@media(max-width:800px){.dom-player{width:11%}.dom-pet{width:30px;height:30px}.dom-leak{width:19px;height:19px}.game-house{inset:1%}}
.audio-toggle{position:absolute;z-index:8;right:12px;top:12px;border:2px solid #18b7df;border-radius:6px;background:#071a2d;color:#fff;padding:7px 10px;font:800 12px Arial;cursor:pointer;box-shadow:0 3px 0 #03101d}.audio-toggle[aria-pressed="true"]{color:#9fb1bc;border-color:#607684}.game-house:after{content:"";position:absolute;right:2.5%;bottom:2.5%;width:20%;aspect-ratio:2048/848;background:url("/assets/essex-emergency-plumbing-arcade-v1.png") center/contain no-repeat;image-rendering:pixelated;opacity:.94;z-index:2;pointer-events:none}.dom-player,.dom-pet,.dom-leak,.dom-tool{z-index:3}.dom-player.slowed{filter:drop-shadow(0 0 8px #ffd34f) saturate(.7)}.dom-player.slowed:after{content:'SLOW!';position:absolute;left:50%;top:-14px;transform:translateX(-50%);padding:2px 4px;background:#ffd34f;color:#071a2d;border:2px solid #071a2d;font:900 8px Arial;white-space:nowrap}

@media(max-width:800px){
  .canvas-wrap{height:min(110vw,460px);min-height:360px;aspect-ratio:auto}
  .game-overlay{padding:12px}
  .overlay-card{max-height:calc(100% - 8px);padding:20px 16px;overflow-y:auto}
  .overlay-card h2{font-size:30px;margin:10px 0 12px}
  .overlay-card p{font-size:15px;line-height:1.4;margin-bottom:14px}
  .overlay-card button{width:100%;min-height:50px;padding:12px 16px}
  .overlay-card .key-help{display:none}
  .audio-toggle{right:8px;top:8px}
}