:root{--bg:#ffffff;--ink:#0f1320;--muted:#6c7686;--line:#d9e2ef;--brand:#0aa770;--brand-2:#33c3ff;--panel-soft:#f6f8fb;--radius-sm:10px;--header-h:56px;--menu-h:64px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--font:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:#fff0}body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;line-height:1.4}.header-bar{position:relative;z-index:10;height:var(--header-h);padding-top:var(--safe-top);display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:1rem;font-weight:600;box-shadow:0 12px 30px rgb(15 19 32 / .05),0 1px 0 rgb(0 0 0 / .03);user-select:none}.header-brand{display:flex;align-items:center;gap:.5ch;font-weight:600;text-decoration:none;color:var(--ink)}.header-brand:active{opacity:.8;scale:.98}.header-brand .brand-dot{width:.6em;height:.6em;border-radius:999px;background:radial-gradient(circle at 30% 30%,var(--brand-2) 0%,var(--brand) 60%);box-shadow:0 8px 24px rgb(51 195 255 / .5),0 0 40px rgb(10 167 112 / .6)}.header-subtitle{font-size:.7rem;font-weight:500;line-height:1.1;color:var(--muted);text-align:center;margin-top:2px}.header-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}.mode-bar{position:relative;z-index:9;height:var(--menu-h);background:var(--panel-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 16px 32px rgb(15 19 32 / .06);display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;user-select:none;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding:8px 12px}.mode-bar::-webkit-scrollbar{display:none}.mode-btn{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 10px;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;min-width:68px;box-shadow:0 16px 32px rgb(0 0 0 / .08);cursor:pointer;white-space:nowrap}.mode-btn .mode-icon{font-size:1rem;line-height:1}.mode-btn[data-active="true"]{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;box-shadow:0 16px 32px rgb(51 195 255 / .45),0 0 32px rgb(10 167 112 / .5);border:1px solid rgb(255 255 255 / .6)}.game-area{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.canvas-zone{position:relative;flex:1;min-height:0;touch-action:none;background:radial-gradient(circle at 50% 35%,rgb(51 195 255 / .08) 0%,#fff0 60%),radial-gradient(circle at 50% 60%,rgb(10 167 112 / .06) 0%,#fff0 70%);transition:box-shadow .25s,outline .25s}#playAreaCanvas,#targetCanvas,#drawCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.target-dot{position:absolute;left:50%;top:50%;width:12px;height:12px;margin-left:-6px;margin-top:-6px;border-radius:999px;background:#0aa770;border:2px solid #fff;box-shadow:0 0 18px rgb(10 167 112 / .8),0 10px 24px rgb(0 0 0 / .25),0 0 48px rgb(51 195 255 / .6);pointer-events:none;font-size:0;transition:opacity .2s}.hud-bar{position:relative;z-index:5;background:var(--panel-soft);border-top:1px solid var(--line);padding:12px 16px calc(12px + var(--safe-bottom));display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;row-gap:10px;column-gap:12px;box-shadow:0 -24px 60px rgb(15 19 32 / .08);font-size:.8rem}.hud-col{min-width:max-content;display:flex;flex-direction:column}.hud-label{color:var(--muted);font-size:.7rem;line-height:1.2}.hud-value{color:var(--ink);font-weight:600;font-size:1rem;line-height:1.2}.rank-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.rank-badge{display:inline-flex;align-items:center;gap:.4ch;background:#fff;padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);box-shadow:0 12px 32px rgb(0 0 0 / .12);font-size:.75rem;line-height:1.2;font-weight:600;color:var(--ink);min-height:28px}.rank-hint{font-size:.65rem;line-height:1.2;color:var(--muted)}.play-again-wrap{display:flex;align-items:flex-start;justify-content:flex-end;flex:1}#playAgain{appearance:none;border:0;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;font-weight:600;font-size:.8rem;line-height:1;padding:10px 14px;box-shadow:0 16px 32px rgb(51 195 255 / .45),0 0 32px rgb(10 167 112 / .5);cursor:pointer;border:1px solid rgb(255 255 255 / .4)}#playAgain:active{transform:scale(.98)}.tip-overlay{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:rgb(15 19 32 / .8);color:#fff;font-size:.7rem;line-height:1.3;padding:6px 10px;border-radius:10px;box-shadow:0 12px 32px rgb(0 0 0 / .4);pointer-events:none;text-align:center;max-width:80%;font-weight:500;transition:opacity .2s}.tip-overlay.hidden{opacity:0}.canvas-zone.legendary{box-shadow:0 0 32px rgb(10 167 112 / .5),0 0 64px rgb(51 195 255 / .3),inset 0 0 24px rgb(15 19 32 / .06);outline:2px solid rgb(10 167 112 / .6);outline-offset:-2px;animation:glowPulse 1.4s infinite}@keyframes glowPulse{0%{box-shadow:0 0 24px rgb(10 167 112 / .5),0 0 48px rgb(51 195 255 / .3),inset 0 0 24px rgb(15 19 32 / .06)}50%{box-shadow:0 0 42px rgb(10 167 112 / .7),0 0 80px rgb(51 195 255 / .5),inset 0 0 32px rgb(15 19 32 / .08)}100%{box-shadow:0 0 24px rgb(10 167 112 / .5),0 0 48px rgb(51 195 255 / .3),inset 0 0 24px rgb(15 19 32 / .06)}}.oob-indicator{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;opacity:0;font-weight:900;font-size:32px;color:#e05252;text-shadow:0 2px 8px rgb(0 0 0 / .35);transition:opacity .07s;z-index:9999}.oob-indicator.show{opacity:1}.center-overlay{position:absolute;right:12px;bottom:12px;pointer-events:none;opacity:0;transition:opacity .18s;display:flex;align-items:flex-end;justify-content:flex-end;max-width:70%}.center-overlay.show{opacity:1}.center-toast{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);color:#fff;padding:12px 16px;border-radius:12px;border:1px solid rgb(255 255 255 / .55);box-shadow:0 22px 60px rgb(51 195 255 / .45),0 0 36px rgb(10 167 112 / .4);font-weight:700;font-size:.9rem;line-height:1.3;text-align:left;min-width:max-content}.center-toast strong{font-size:1rem;font-weight:800;display:block}.center-toast small{display:block;font-weight:600;opacity:.9;margin-top:2px;font-size:.75rem}.playzone-label{position:absolute;left:50%;top:calc(50% + 8rem);transform:translate(-50%,-50%);font-size:.7rem;font-weight:600;color:rgb(15 19 32 / .55);text-shadow:0 2px 4px rgb(255 255 255 / .8);pointer-events:none}@media(min-width:480px){.playzone-label{font-size:.8rem}.hud-value{font-size:1.1rem}#playAgain{font-size:.8rem}}