/* Toby Premium v9 — lightweight visual polish for mobile + desktop */
:root{--toby-cyan:#75e8ff;--toby-gold:#ffd55c;--toby-blue:#5ba7ff;--glass:rgba(11,20,34,.64);--glass2:rgba(18,31,48,.78);--edge:rgba(255,255,255,.18);--shadow:0 14px 38px rgba(0,0,0,.34)}
html,body{background:#07111a;overscroll-behavior:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle at 50% 38%,transparent 40%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.38) 100%);mix-blend-mode:multiply}
#game{filter:saturate(1.18) contrast(1.055) brightness(1.025);transition:filter .28s ease,transform .12s ease;will-change:transform,filter}
body.power-active #game{filter:saturate(1.35) contrast(1.075) brightness(1.08) drop-shadow(0 0 12px rgba(255,221,88,.15))}
body.damage-flash:after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;background:radial-gradient(circle at center,transparent 25%,rgba(255,38,38,.48));animation:damageFlash .42s ease-out both}
@keyframes damageFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.card,.hud-panel,.objective,.bark-meter,.toast{backdrop-filter:blur(13px) saturate(1.2);-webkit-backdrop-filter:blur(13px) saturate(1.2);border:1px solid var(--edge);box-shadow:var(--shadow)}
.card{background:linear-gradient(180deg,rgba(24,40,60,.94),rgba(8,17,28,.92));position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 28%,transparent 70%,rgba(91,167,255,.06))}
.hud-panel,.objective,.bark-meter{background:linear-gradient(180deg,rgba(16,29,45,.84),rgba(7,15,25,.78))}
.objective{font-weight:800;letter-spacing:.01em}
.primary,.primary-link{box-shadow:0 9px 26px rgba(63,177,255,.29),inset 0 1px 0 rgba(255,255,255,.24);transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
button:active,.primary-link:active{transform:scale(.96)!important;filter:brightness(1.08)}
.actions button,.joystick-ring{box-shadow:0 9px 24px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.18)}
.actions button{background:linear-gradient(180deg,rgba(49,74,99,.95),rgba(15,28,42,.96));position:relative;overflow:hidden}
.actions button:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.2),transparent 44%);pointer-events:none}
.actions button.bark{background:linear-gradient(180deg,rgba(58,103,137,.98),rgba(17,43,62,.98))}
.stick{box-shadow:0 7px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
#hearts{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.fx-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--p,#fff);box-shadow:0 0 12px var(--p,#fff);animation:fxBurst var(--dur,.65s) cubic-bezier(.18,.72,.21,1) forwards}
@keyframes fxBurst{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}}
.fx-ring{position:fixed;width:44px;height:44px;border:3px solid var(--ring,#8deeff);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 22px var(--ring,#8deeff);animation:ring .5s ease-out forwards}
@keyframes ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
.fx-confetti{position:fixed;width:8px;height:14px;border-radius:2px;animation:confetti 1.8s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes confetti{0%{opacity:1;transform:translateY(-10vh) rotate(0)}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}}
body.power-active .objective{box-shadow:0 0 30px rgba(255,213,92,.26),var(--shadow);border-color:rgba(255,213,92,.42)}
body.power-active .bark-meter{color:#fff4b3}
@media(max-width:850px){body:before{background:radial-gradient(circle at 50% 42%,transparent 48%,rgba(0,0,0,.2) 88%,rgba(0,0,0,.35) 100%)}.card{max-height:89vh;overflow:auto}.actions button{transform:translateZ(0)}#game{filter:saturate(1.14) contrast(1.045) brightness(1.02)}body.power-active #game{filter:saturate(1.28) contrast(1.06) brightness(1.06)}}
@media(prefers-reduced-motion:reduce){.fx-particle,.fx-ring,.fx-confetti{display:none!important}#game{transition:none}}
