/* Shared visual polish for Toby levels. Keeps gameplay lightweight on mobile. */
:root{--glass:rgba(12,22,34,.72);--edge:rgba(255,255,255,.18);--glow:0 10px 30px rgba(0,0,0,.28)}
html,body{background:#0b1721;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% -10%,#284960 0,#101b28 46%,#071019 100%)}
#game{filter:saturate(1.16) contrast(1.055) brightness(1.035);transition:filter .35s ease}
.card,.hud-panel,.objective,.bark-meter,.toast{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--glow);border:1px solid var(--edge)}
.card{background:linear-gradient(180deg,rgba(22,40,59,.93),rgba(8,18,29,.91));box-shadow:0 22px 70px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.12)}
.card h1,.card h2{text-shadow:0 3px 12px rgba(0,0,0,.45)}
.primary,.primary-link{box-shadow:0 8px 24px rgba(70,180,255,.28),inset 0 1px 0 rgba(255,255,255,.18)}
.actions button,.joystick-ring{box-shadow:0 8px 20px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2)}
.actions button{border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(47,73,99,.96),rgba(14,28,43,.95));transition:transform .08s ease,filter .15s ease,box-shadow .15s ease}
.actions button:active{transform:scale(.9);filter:brightness(1.2);box-shadow:0 3px 9px rgba(0,0,0,.35),0 0 20px rgba(114,215,255,.3)}
.actions button.bark{background:linear-gradient(180deg,rgba(71,112,145,.98),rgba(20,46,67,.98))}
.stick{box-shadow:0 6px 16px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.32)}
#hearts{filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.objective{animation:objectivePulse 3.2s ease-in-out infinite}
@keyframes objectivePulse{0%,100%{box-shadow:var(--glow)}50%{box-shadow:0 12px 34px rgba(44,173,255,.18)}}
#fxLayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:25}
.fx-vignette{position:absolute;inset:-2%;background:radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.2) 88%,rgba(0,0,0,.34) 100%);mix-blend-mode:multiply}
.fx-ambient-glow{position:absolute;width:48vw;height:48vw;left:26vw;top:-28vw;border-radius:50%;background:radial-gradient(circle,rgba(121,218,255,.14),transparent 68%);filter:blur(20px);animation:skyGlow 6s ease-in-out infinite alternate}
@keyframes skyGlow{from{opacity:.45;transform:translateY(0) scale(1)}to{opacity:.8;transform:translateY(2vh) scale(1.08)}}
.fx-particle{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);animation:fxBurst .68s cubic-bezier(.14,.72,.18,1) forwards;box-shadow:0 0 12px currentColor}
.fx-particle.spark{background:#fff3a4;color:#ffd95a}
.fx-particle.energy{background:#7cecff;color:#4bd8ff;width:10px;height:10px}
.fx-particle.dust{background:rgba(216,192,154,.78);color:#d5b98d;width:7px;height:5px;border-radius:45%}
@keyframes fxBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.1) rotate(var(--r))}}
.game-started .fx-ambient-glow{opacity:.7}
@media (max-width:850px){.card{max-height:88vh;overflow:auto}.actions button{transform:translateZ(0)}#game{filter:saturate(1.13) contrast(1.045) brightness(1.02)}.fx-vignette{background:radial-gradient(circle at center,transparent 58%,rgba(0,0,0,.16) 94%,rgba(0,0,0,.24) 100%)}.fx-ambient-glow{width:70vw;height:70vw;left:15vw;top:-42vw}}
@media (prefers-reduced-motion:reduce){.objective,.fx-ambient-glow,.fx-particle{animation:none!important}.fx-particle{display:none}}