/* A little extra play, with motion kept optional and interactions kept local. */
.logo-button{padding:0;border:0;background:none;min-height:44px;text-align:left;cursor:pointer}
.logo-button:disabled{cursor:default}
.logo-button:focus-visible{outline:3px solid var(--ink);outline-offset:5px;border-radius:4px}
@media(hover:hover) and (pointer:fine){
  .app{perspective:500px}
  .app:hover .tile{transform:translateY(-8px) rotate(-4deg) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1.04)}
  .about-lab__visual{transition:transform .3s var(--ease-out)}
  .about-lab__card:hover .about-lab__visual{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
  .btn{position:relative;overflow:hidden;isolation:isolate}
  .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);transform:translateX(-130%);transition:transform .65s var(--ease-out)}
  .btn:hover::before,.btn:focus-visible::before{transform:translateX(130%)}
}
.about-art__orbit{animation:orbit-turn 36s linear infinite}
.about-art__spark{animation:spark-breathe 5s ease-in-out infinite}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes spark-breathe{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(24deg) scale(1.12)}}
.play-sparks{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:100;contain:strict}
.play-spark{position:absolute;color:var(--accent);font-family:var(--font-display);font-size:18px;font-weight:800;line-height:1;animation:spark-burst .7s var(--ease-out) forwards}
.play-spark:nth-child(3n){color:var(--ink)}
.play-spark:nth-child(3n+1){color:var(--accent-deep)}
.play-toast{position:fixed;left:50%;bottom:24px;z-index:101;max-width:calc(100vw - 32px);padding:14px 22px;border-radius:var(--radius-pill);background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);font:600 14px var(--font-body);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,16px);transition:opacity .2s,transform .3s var(--ease-spring)}
.play-toast.is-visible{opacity:1;transform:translate(-50%,0)}
@keyframes spark-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(.15)}}
.bonus-trigger{position:absolute;right:16px;top:50%;transform:translateY(-50%);min-height:44px;padding:0 16px;border:1px solid rgba(21,23,43,.25);border-radius:var(--radius-pill);background:var(--accent);color:var(--ink);font:600 12px var(--font-body);cursor:pointer;transition:transform .25s var(--ease-spring),background .2s}
.bonus-trigger:hover{transform:translateY(-50%) rotate(-4deg);background:var(--accent-tint)}
.bonus-trigger:focus-visible,.bonus-dialog button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.bonus-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:28px;background:var(--ground);color:var(--ink);font-family:var(--font-body);box-shadow:0 32px 100px rgba(0,0,0,.3);overflow:auto}
.bonus-dialog::backdrop{background:rgba(21,23,43,.7);backdrop-filter:blur(5px)}
.bonus-dialog[open]{animation:bonus-appear .25s var(--ease-out)}
@keyframes bonus-appear{from{opacity:0}to{opacity:1}}
.bonus-head{position:relative;padding:30px 28px 20px}
.bonus-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px}
.bonus-head h2{font-family:var(--font-display);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.04em;margin-bottom:14px}
.bonus-head > p:last-child{font-size:14px;line-height:1.6;color:var(--text-2);max-width:290px}
.bonus-close{position:absolute;right:14px;top:14px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface-2);color:var(--ink);font:400 28px var(--font-body);cursor:pointer}
.bonus-close:hover{background:var(--accent-tint)}
.bonus-score{padding:0 28px 18px}
.bonus-status{font-size:13px;font-weight:600;margin-bottom:10px;min-height:20px}
.bonus-score progress{appearance:none;display:block;width:100%;height:6px;border:0;border-radius:99px;overflow:hidden;background:var(--border);accent-color:var(--accent)}
.bonus-score progress::-webkit-progress-bar{background:var(--border)}
.bonus-score progress::-webkit-progress-value{background:var(--accent);border-radius:99px;transition:width .2s}
.bonus-score progress::-moz-progress-bar{background:var(--accent);border-radius:99px}
.bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 28px}
.bonus-tile{aspect-ratio:1;min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:20px;background:var(--surface-2);color:var(--ink);cursor:pointer;display:grid;place-items:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .2s var(--ease-spring)}
.bonus-tile svg{width:46%;height:46%;fill:currentColor;opacity:0;transform:scale(.5);transition:opacity .15s,transform .25s var(--ease-spring)}
.bonus-tile.is-star{background:var(--accent);border-color:var(--accent)}
.bonus-tile.is-star svg{opacity:1;transform:scale(1)}
.bonus-tile:hover{border-color:var(--ink)}
.bonus-tile:active{transform:scale(.95)}
.bonus-tile.is-miss{animation:tiny-nudge .2s ease-out}
@keyframes tiny-nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.bonus-bottom{padding:20px 28px 28px;text-align:center}
.bonus-bottom p{font-size:11px;line-height:1.6;color:var(--text-2)}
.bonus-replay{margin-top:16px}
.bonus-replay[hidden]{display:none}
.is-won .bonus-tile{animation:victory-pop .45s var(--ease-spring) both}
@keyframes victory-pop{50%{transform:scale(.9) rotate(-5deg)}}
@media(max-width:380px){.bonus-head{padding:28px 22px 18px}.bonus-head h2{font-size:34px}.bonus-score{padding:0 22px 18px}.bonus-grid{padding:0 22px;gap:8px}.bonus-tile{border-radius:16px}.bonus-bottom{padding:18px 22px 24px}}
@media(prefers-reduced-motion:reduce){
  .play-sparks,.btn::before{display:none}
  .app:hover .tile,.about-lab__card:hover .about-lab__visual{transform:none}
  .about-art__orbit,.about-art__spark,.bonus-dialog[open],.bonus-tile.is-miss,.is-won .bonus-tile{animation:none}
  .chomp{display:block;height:56px}
  .chomp__pellets,.chomp__eater{display:none}
  .bonus-trigger:hover{transform:translateY(-50%)}
  .bonus-tile:active{transform:none}
  .bonus-score progress::-webkit-progress-value{transition:none}
  .play-toast,.play-toast.is-visible{transform:translate(-50%,0);transition:none}
}