.night {
  background:
    radial-gradient(circle at 80% 7%, #fff1ad 0 18px, transparent 19px),
    radial-gradient(circle at 78% 6%, #384a64 0 18px, transparent 19px),
    linear-gradient(#33445e 0 35%, #826b59 35% 36%, #a87857 36%);
}

.board {
  isolation: isolate;
  border-radius: 26px 26px 10px 10px;
  background: linear-gradient(180deg, #9c704f00 0 72%, #825b42aa 100%);
}

.pile-scene { position: absolute; inset: 0; pointer-events: none; }
.pile-scene .rug {
  position: absolute; left: 5%; right: 5%; top: 4%; bottom: 9%;
  border: 3px solid #e1b77d55; border-radius: 48% 52% 45% 55%;
  background: repeating-radial-gradient(ellipse at center, #bf8d6455 0 18px, #8e644555 19px 23px);
  box-shadow: inset 0 0 35px #4f332855, 0 12px 20px #33241933;
}
.pile-scene .basket {
  position: absolute; right: -17px; bottom: 37px; width: 115px; height: 82px;
  border: 5px solid #9d673f; border-radius: 18px 18px 42px 42px;
  background: repeating-linear-gradient(100deg, #d7a263 0 9px, #b87947 10px 13px);
  box-shadow: 0 10px 14px #2f211d55; transform: rotate(-18deg);
}
.pile-scene .basket:before { content: ''; position: absolute; left: 12px; right: 12px; top: -19px; height: 28px; border: 7px solid #a96f43; border-bottom: 0; border-radius: 28px 28px 0 0; }
.pile-scene b { position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); color: #f9dfac99; font-size: 9px; letter-spacing: 3px; white-space: nowrap; }
.pile-scene .paw { position: absolute; width: 15px; height: 12px; border-radius: 50%; background: #69493444; transform: rotate(20deg); }
.pile-scene .paw:before,.pile-scene .paw:after { content: ''; position: absolute; top: -7px; width: 6px; height: 7px; border-radius: 50%; background: #69493444; }
.pile-scene .paw:before { left: 0; }.pile-scene .paw:after { right: 0; }
.pile-scene .paw-one { left: 9%; bottom: 38px; }.pile-scene .paw-two { left: 15%; bottom: 18px; transform: rotate(36deg); }

#objects { inset: 5px 0 0; }
.object {
  width: 14.5%; height: 14%; padding: 4px; border-radius: 16px;
  box-shadow: 0 8px 13px #38251d66, inset 0 2px #fff;
}
.object svg { width: 39px; height: 39px; }
.object.blocked { filter: brightness(.72) saturate(.76); }
.object.blocked svg { opacity: .78; }
.object.blocked span { opacity: 0; }
.object.available { outline: 1px solid #fff8df66; }
.object.available:after { content: ''; position: absolute; inset: -3px; border-radius: 20px; box-shadow: 0 0 0 2px #ffe3a41f; }
.tray-slot.filled { animation: slotLand .28s ease-out; }
.pickup-ghost { position: fixed; z-index: 9999; margin: 0; padding: 5px; border: 0; border-radius: 18px; pointer-events: none; background: linear-gradient(145deg,#fffdf3,#eadbc2); box-shadow: 0 8px 13px #38251d66; animation: trayFly .4s cubic-bezier(.3,.05,.25,1) forwards; }
.pickup-ghost svg { width: 100%; height: 100%; }.pickup-ghost span { display: none; }
.board.pile-shift #objects { animation: pileShift .85s ease-in-out; }

.tray { grid-template-columns: repeat(7, 1fr); gap: 4px; background: #765442; box-shadow: inset 0 4px 7px #3c2e2377; }
.tray-slot svg { width: 36px; height: 36px; }

@keyframes pileShift { 25% { transform: translateX(7px) rotate(.5deg); } 55% { transform: translateX(-6px) rotate(-.5deg); } 80% { transform: translateX(3px); } }
@keyframes slotLand { 55% { transform: translateY(-5px) scale(1.1); background: #fff0b5; } }
@keyframes trayFly { to { transform: translate(var(--fly-x),var(--fly-y)) rotate(0deg) scale(.48); opacity: .3; } }
@media(max-height:790px){
  .game{height:100dvh;min-height:0}
  .topbar{height:46px;padding:6px 13px}
  .topbar b{font-size:15px}.topbar small{font-size:8px}
  .sound-controls button{width:33px;height:33px}
  .mission{height:48px;margin:0 10px;padding:5px 9px;border-radius:14px}
  .mission-icon{width:30px;height:30px}.mission strong{font-size:11px}
  .dog-row{height:44px;margin:3px 11px;gap:6px}
  .dog-card{height:44px}.dog-card svg{width:38px;height:38px}
  .board{height:calc(100dvh - 314px);min-height:0;margin:0 8px}
  #objects{width:min(100%,calc(100dvh - 314px));left:50%;right:auto;transform:translateX(-50%)}
  .pile-scene .basket{width:80px;height:57px;bottom:20px}.pile-scene b{bottom:4px}
  .bottom{height:168px;padding:7px 12px max(8px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .tray-head{margin-bottom:4px}.tray{padding:5px}.tray-slot{height:40px}
  .tray-slot svg{width:31px;height:31px}.controls{margin-top:6px;gap:6px}.controls button{height:43px}
}
@media(max-width:365px){.object{width:14.5%;height:14%}.object svg{width:80%;height:80%}.object span{font-size:6px}}