:root { color-scheme: dark; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #071a25; user-select: none; -webkit-user-select: none; -webkit-touch-callout:none; }
#game {
  position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden;
  touch-action: none; isolation: isolate;
  background-color:#153c54;
  background-image:linear-gradient(#06192718,#071d2930),url("assets/images/backgrounds/frog-swamp-lounge-v3.png");
  background-size:cover;
  background-position:center center;
}
.pond-shimmer { position:absolute; inset:39% 0 0; z-index:-1; overflow:hidden; pointer-events:none; opacity:.34; mix-blend-mode:screen; }
.pond-shimmer span { position:absolute; width:30%; height:3px; border-radius:50%; background:linear-gradient(90deg,transparent,#ccece7aa,transparent); filter:blur(.4px); animation:ripple 7s ease-in-out infinite; }
.pond-shimmer span:nth-child(1){left:5%;top:19%}.pond-shimmer span:nth-child(2){right:4%;top:35%;animation-delay:-2.4s}.pond-shimmer span:nth-child(3){left:34%;top:8%;animation-delay:-4.8s}
/* Invisible landing anchor matching the large lily pad painted into the scene. */
.lily-pad { position:absolute; left:50%; bottom:2%; width:min(78vw,1180px); height:30%; transform:translateX(-50%); pointer-events:none; }
.frog-rig { position:absolute; left:0; top:0; width:clamp(270px,42vw,540px); aspect-ratio:3/2; transform-origin:center 72%; cursor:grab; touch-action:none; outline:none; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; filter:drop-shadow(0 15px 12px #05161bb5); will-change:transform; --glasses-x:0px; --glasses-y:0px; --glasses-r:0deg; }
.frog-rig.grabbed { cursor:grabbing; filter:drop-shadow(0 20px 16px #05161bd0) brightness(1.035); }
.frog-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent; }
.frog-layer[hidden] { display:none !important; }
.body { z-index:1; }
.face-layer { z-index:2; visibility:hidden; }
.face-layer.active { visibility:visible; }
.glasses { z-index:3; transform:translate(var(--glasses-x),var(--glasses-y)) rotate(var(--glasses-r)); transform-origin:50% 20.51%; }
.game-controls { position:absolute; z-index:10; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:flex; gap:8px; }
.game-controls button { min-height:44px; padding:9px 13px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d6eee455; border-radius:999px; color:#e9f6ef; background:#071d25b8; backdrop-filter:blur(8px); font:600 13px/1 system-ui,sans-serif; cursor:pointer; box-shadow:0 5px 18px #02101635; }
.game-controls button:hover,.game-controls button:focus-visible { background:#17404a; outline:2px solid #cae8d2; outline-offset:2px; }
#musicButton[aria-pressed="true"] { color:#ffdda0; border-color:#ffc86c88; background:#3f2e1dbd; }
@keyframes ripple { 50% { transform:translateX(20%) scaleX(1.3); opacity:.25 } }
@media (max-width:520px){
  #game{background-position:center center}
  .frog-rig{width:clamp(255px,74vw,360px)}
  .lily-pad{width:94vw;height:28%;bottom:1%}
  .pond-shimmer{opacity:.25}
  .game-controls{left:max(10px,env(safe-area-inset-left));right:auto;top:max(10px,env(safe-area-inset-top))}
  .game-controls button{padding:8px 11px;font-size:12px}
}
@media (orientation:landscape) and (max-height:600px){
  .frog-rig{width:clamp(230px,min(42vw,72vh),420px)}
  .lily-pad{height:24%}
  .game-controls{left:auto;right:max(8px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top))}
  .game-controls button{min-height:40px;padding:7px 11px}
}
@media (prefers-reduced-motion:reduce){ .pond-shimmer span{animation:none} }