:root{--bg:#dedad1;--surface:#f3f1ec;--ink:#1a1816;--muted:#a9a398;--danger:#d6231f;--success:#fff}body{color:var(--ink);background:var(--bg);margin:0;padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}.bg-layer{pointer-events:none;position:fixed;inset:-10%}.bg-window{--depth:8;background:radial-gradient(55% 45% at 22% 10%,#fff9 0%,#0000 65%)}.bg-shelves{--depth:20;background-image:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 16px);opacity:.05}@media (prefers-reduced-motion:no-preference){.bg-layer{transform:translate(calc(var(--mx,0) * var(--depth) * 1px), calc(var(--my,0) * var(--depth) * 1px));transition:transform .2s ease-out}}main{max-width:40rem;margin:0 auto;position:relative}a{color:var(--ink)}header{justify-content:space-between;align-items:center;max-width:40rem;margin:0 auto 1.5rem;display:flex;position:relative}header h1{color:var(--ink);margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:1.4rem}nav a#reset{color:var(--ink);border:2px dashed var(--muted);border-radius:999px;padding:.35rem .9rem;text-decoration:none;transition:border-color .2s,color .2s}nav a#reset:hover,nav a#reset:focus-visible{border-color:var(--danger);color:var(--danger)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#game{background:var(--surface);border-radius:1.5rem;outline:none;flex-direction:column;align-items:center;gap:2.5rem;padding:3rem 1rem;display:flex;position:relative;overflow:hidden;box-shadow:0 1.5rem 3rem -1rem #1a18164d}#game:after{content:"";mix-blend-mode:screen;pointer-events:none;background:linear-gradient(115deg,#0000 38%,#ffffff8c 50%,#0000 62%);position:absolute;inset:0}#game[data-status=ready]{animation:2.4s ease-in-out infinite invite}#outcome{text-align:center;max-width:90%;color:var(--ink);opacity:0;pointer-events:none;background:#f6eedaf2;border-radius:.75rem;margin:0;padding:.5rem 1.25rem;font-family:"Baloo 2",system-ui,sans-serif;font-size:1.6rem;font-weight:600;transition:opacity .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#game[data-status=lost] #outcome,#game[data-status=won] #outcome,#game[data-status=finished] #outcome{opacity:1}#game:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:1rem}.lives{gap:.4rem;display:none}#game[data-mode=survival] .lives{display:flex}.life{width:1.4rem;height:1.4rem;fill:var(--danger);stroke:var(--danger);stroke-width:1px;transition:fill .2s,stroke .2s,transform .2s}.life.lost{fill:none;stroke:var(--muted);transform:scale(.8)}.lanes{gap:2rem;display:flex}.lane{border:2px dashed var(--muted);border-radius:50%;justify-content:center;align-items:center;width:4rem;height:4rem;transition:border-color .2s;display:flex;position:relative}.lane .arrow{fill:none;width:1.5rem;height:1.5rem;stroke:var(--muted);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;margin:auto;position:absolute;inset:0}.lane .cue{background:var(--danger);opacity:0;border-radius:50%;width:2rem;height:2rem;transform:scale(1)}#game[data-status=ready] .lane .cue{opacity:.8;background:var(--ink);animation:1.4s ease-in-out infinite pulse}#game[data-status=ready] .lane[data-lane="0"] .cue{animation-delay:0s}#game[data-status=ready] .lane[data-lane="1"] .cue{animation-delay:.15s}#game[data-status=ready] .lane[data-lane="2"] .cue{animation-delay:.3s}.lane.active{border-color:var(--danger)}.lane.active .cue{opacity:1;animation:countdown var(--duration,1s) linear forwards}.lane.catch .cue{background:var(--success);animation:.25s ease-out forwards caught;box-shadow:0 0 16px 6px #fffc}.lane.miss .cue{animation:.3s ease-in forwards escaped}.cat{width:5.5rem;height:5rem;overflow:visible}.cat path{fill:none;stroke:var(--ink);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.cat-eye{fill:var(--ink)}.paw-left{transform-origin:32px 82px}.paw-right{transform-origin:64px 82px}#timer-bar{background:var(--muted);border-radius:999px;width:10rem;height:.35rem;display:none;overflow:hidden}#game[data-mode=timeAttack][data-status=playing] #timer-bar{display:block}#timer-bar>div{background:var(--danger);transform-origin:0;width:100%;height:100%}#timer-bar.running>div{animation:drain var(--round-duration,30s) linear forwards}#score{color:var(--ink);margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:1.6rem;font-weight:600;display:none}#game[data-mode=timeAttack] #score{display:block}.mode-timeattack{appearance:none;border:2px dashed var(--muted);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;transition:border-color .2s;display:flex}.mode-timeattack:hover,.mode-timeattack:focus-visible{border-color:var(--danger)}.hourglass{fill:none;width:1.4rem;height:1.4rem;stroke:var(--muted);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}#game[data-status=ready] .cat{animation:1.6s ease-in-out infinite idle-bounce}.cat.pounce .paw-left,.cat.pounce .paw-right{animation:.25s ease-out paw-press}.cat.startled{animation:.3s ease-in-out startled}#game[data-status=lost] .cat{animation:.6s ease-in forwards flop}#game[data-status=won] .cat{animation:.8s ease-in-out infinite cheer}#game[data-status=lost] .lane,#game[data-status=won] .lane,#game[data-status=finished] .lane{opacity:.4}@keyframes invite{0%,to{box-shadow:0 1.5rem 3rem -1rem #1a18164d}50%{box-shadow:0 1.5rem 3rem -1rem #1a18164d,0 0 0 6px #d6231f26}}@keyframes pulse{0%,to{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}@keyframes countdown{0%{background:var(--ink);transform:scale(1)}to{background:var(--danger);transform:scale(.2)}}@keyframes caught{to{opacity:0;transform:scale(1.6)}}@keyframes escaped{to{opacity:0;transform:translateY(-2rem)scale(.4)}}@keyframes idle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes paw-press{0%{transform:translateY(0)scale(1)}50%{transform:translateY(-6px)scale(1.15)}to{transform:translateY(0)scale(1)}}@keyframes startled{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes flop{to{opacity:.6;transform:rotate(90deg)translateY(20px)}}@keyframes drain{to{transform:scaleX(0)}}@keyframes cheer{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-14px)scale(1.15)}}
