:root { --ink:#f6f7ff; --muted:#929bb5; --border:rgba(255,255,255,.11); --ease:cubic-bezier(.16,1,.3,1); }
*,*::before,*::after { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; }
body { min-height:100vh; overflow:hidden; display:grid; place-items:center; padding:28px; color:var(--ink); background:#060916; font-family:"Manrope",sans-serif; }
button,a { font:inherit; color:inherit; } a { text-decoration:none; }
.ambient { position:fixed; border-radius:50%; filter:blur(110px); pointer-events:none; }
.ambient--one { width:520px;height:520px;right:-140px;top:-190px;background:#334ec4;opacity:.25; }
.ambient--two { width:460px;height:460px;left:-180px;bottom:-230px;background:#7338b6;opacity:.18; }
.game-shell { position:relative; z-index:1; width:min(980px,100%); }
.game-window { overflow:hidden; border:1px solid rgba(255,255,255,.15); border-radius:22px; background:#101426; box-shadow:0 42px 120px rgba(0,0,0,.62); }
.game-window__bar { height:58px;padding:0 18px;display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--border);background:rgba(255,255,255,.025); }
.game-window__title { display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em; }.game-window__title i { width:6px;height:6px;border-radius:50%;background:#768aff;box-shadow:0 0 9px #768aff; }
.icon-button { justify-self:end;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;transition:background .2s,transform .2s; }.icon-button:hover { background:rgba(255,255,255,.08);transform:rotate(6deg); }
.game-hud { display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;min-height:76px;padding:12px 28px;border-bottom:1px solid var(--border); }
.game-hud>div { display:flex;align-items:baseline;gap:10px; }.game-hud span { color:#727d9b;font:800 9px "IBM Plex Mono",monospace;letter-spacing:.14em; }.game-hud strong { font-size:22px;font-variant-numeric:tabular-nums; }.game-hud__message { justify-content:center;color:#aab3cd;font-size:12px; }.game-hud .game-hud__time { justify-content:flex-end; }
.arena { height:min(590px,72vh);min-height:430px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#17234c,#0a0d1d 68%); }
.arena__grid { position:absolute;inset:0;background-image:linear-gradient(rgba(115,133,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(115,133,255,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000,transparent 80%); }
.game-feedback { position:absolute;z-index:4;top:28px;left:50%;max-width:min(86%,620px);padding:10px 17px;border:1px solid rgba(126,148,255,.28);border-radius:99px;color:#d9e1ff;background:rgba(12,18,42,.82);backdrop-filter:blur(9px);font:700 11px "IBM Plex Mono",monospace;letter-spacing:.09em;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-12px) scale(.94);transition:opacity .2s,transform .3s var(--ease); }
.game-feedback.is-visible { opacity:1;transform:translate(-50%,0) scale(1); }.game-feedback--danger{color:#ffadb5;border-color:rgba(255,93,111,.46);background:rgba(55,12,26,.84)}.game-feedback--warning{color:#ffe0a0;border-color:rgba(245,190,78,.42);background:rgba(46,31,10,.84)}.game-feedback--good{color:#a7f0d0;border-color:rgba(89,222,171,.4);background:rgba(9,43,35,.84)}
.game-start { position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px;text-align:center;background:rgba(7,10,24,.75);backdrop-filter:blur(7px);transition:opacity .3s,visibility .3s; }
.game-start.is-hidden { opacity:0;visibility:hidden; }.game-start__index { margin-bottom:10px;color:#687796;font:700 9px "IBM Plex Mono",monospace;letter-spacing:.16em; }.game-start__rat { width:132px;height:132px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(101,119,255,.42));animation:ratFloat 2.5s ease-in-out infinite; }.game-start h1 { margin:-6px 0 8px;font-family:"Instrument Serif",serif;font-size:58px;font-weight:400; }.game-start p { max-width:430px;margin:0 0 24px;color:#a6aec4;font-size:13px;line-height:1.7; }.game-start>button { display:flex;align-items:center;gap:18px;border:0;border-radius:99px;padding:12px 14px 12px 24px;background:linear-gradient(135deg,#617cf8,#915ee6);font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 10px 35px rgba(104,91,238,.35);transition:transform .2s; }.game-start>button:hover { transform:translateY(-3px); }.game-start>button span { display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:#4d5fba; }.game-start small { margin-top:12px;color:#626c87;font-size:10px; }
.target { --size:82px;position:absolute;z-index:2;width:var(--size);height:var(--size);padding:0;border:0;border-radius:42%;background:transparent;cursor:crosshair;opacity:0;transform:scale(.4);transition:left .12s,top .12s,transform .15s var(--ease),opacity .15s; }.target::before { content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(122,137,255,.42),rgba(103,77,222,.12) 48%,transparent 72%);filter:blur(8px);animation:ratPulse 1.1s ease-in-out infinite; }.target img { position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 7px rgba(111,129,255,.75)) drop-shadow(0 7px 8px rgba(0,0,0,.48));transition:transform .16s var(--ease),filter .16s;pointer-events:none; }.target:hover img { filter:drop-shadow(0 0 12px rgba(147,159,255,.95)) drop-shadow(0 8px 9px rgba(0,0,0,.5)); }.target.is-active{opacity:1;transform:scale(1)}.target:focus-visible{outline:2px solid #fff;outline-offset:5px}.target.hit{transform:scale(1.55);opacity:0}
@keyframes ratPulse{50%{transform:scale(1.3);opacity:.55}} @keyframes ratFloat{50%{transform:translateY(-7px) rotate(-2deg)}}
@media(max-width:680px){body{padding:8px}.game-window{border-radius:16px}.game-window__bar{grid-template-columns:1fr 1fr}.game-window__title{display:none}.game-hud{padding:10px 16px;grid-template-columns:1fr 1fr}.game-hud__message{display:none!important}.arena{height:75vh;min-height:390px}.game-start__rat{width:110px;height:110px}.game-start h1{font-size:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}