*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--primary:#38bdf8;--primary-hover:#0284c7;--accent:#f59e0b;--accent-gold:#fbbf24;--danger:#ef4444;--success:#22c55e;--dark-bg:#0f172ad9;--dark-card:#1e293beb;--glass-border:#ffffff2e;--text-main:#f8fafc;--text-muted:#94a3b8;--font-display:"Fredoka", "Noto Sans KR", sans-serif;--shadow-lg:0 10px 25px -5px #0006, 0 8px 10px -6px #0000004d}html,body{width:100%;height:100%;font-family:var(--font-display);color:var(--text-main);-webkit-user-select:none;user-select:none;touch-action:manipulation;background-color:#0f172a;position:fixed;overflow:hidden}#canvas-container{z-index:1;cursor:crosshair;width:100vw;height:100vh;position:absolute;top:0;left:0}canvas{width:100%;height:100%;display:block}#hud{z-index:10;pointer-events:none;width:100%;height:100%;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;justify-content:space-between;display:flex;position:absolute;top:0;left:0}.hud-top-left{top:max(16px, env(safe-area-inset-top));left:max(16px, env(safe-area-inset-left));pointer-events:auto;align-items:center;gap:10px;display:flex;position:absolute}.hud-card{background:var(--dark-bg);-webkit-backdrop-filter:blur(10px);border:2px solid var(--glass-border);border-radius:16px;align-items:center;gap:8px;padding:8px 16px;transition:transform .15s;display:flex;box-shadow:0 4px 12px #00000040}.hud-card .label{color:var(--text-muted);letter-spacing:.8px;font-size:11px;font-weight:700}.hud-card .value{color:#fff;text-shadow:0 2px 4px #0006;font-size:22px;font-weight:700}.score-card .value{color:#38bdf8}.fish-card .value{color:#fbbf24}.hud-top-center{top:max(16px, env(safe-area-inset-top));pointer-events:auto;position:absolute;left:50%;transform:translate(-50%)}.stage-switcher{align-items:center;gap:8px;display:flex}.stage-nav-btn{background:var(--dark-bg);border:2px solid var(--glass-border);color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:14px;transition:all .15s;display:flex}.stage-nav-btn:hover{background:var(--primary);border-color:#fff;transform:scale(1.08)}.stage-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(135deg,#1e3a8ae6,#0f172af2);border:2px solid #60a5fa;border-radius:999px;align-items:center;gap:8px;padding:6px 18px;font-size:14px;font-weight:700;display:flex;box-shadow:0 4px 14px #2563eb59}.stage-step{color:#fff;background:#3b82f6;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.hud-top-right{top:max(16px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));pointer-events:auto;gap:8px;display:flex;position:absolute}.hud-btn{background:var(--dark-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid var(--glass-border);color:#fff;cursor:pointer;border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;transition:all .15s;display:flex;box-shadow:0 4px 10px #0003}.hud-btn:hover{border-color:var(--primary);background:#334155f2;transform:translateY(-2px)scale(1.05)}.hud-btn.bot-btn{background:#1e293be6;gap:6px;width:auto;padding:0 12px;font-size:12px;font-weight:700}.hud-btn.bot-btn.active{background:linear-gradient(135deg,#10b981,#059669);border-color:#6ee7b7;animation:1.5s infinite alternate botPulse;box-shadow:0 0 16px #10b98199}@keyframes botPulse{0%{box-shadow:0 0 8px #10b98166}to{box-shadow:0 0 20px #10b981e6}}.hud-bottom-center{bottom:max(24px, env(safe-area-inset-bottom));pointer-events:none;position:absolute;left:50%;transform:translate(-50%)}.cast-hint{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--glass-border);color:#cbd5e1;background:#0f172abf;border-radius:999px;padding:6px 18px;font-size:13px;animation:2s ease-in-out infinite floatHint}@keyframes floatHint{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.mobile-dpad{bottom:max(20px, env(safe-area-inset-bottom));left:max(20px, env(safe-area-inset-left));pointer-events:auto;opacity:.9;z-index:20;flex-direction:column;justify-content:space-between;align-items:center;width:140px;height:140px;display:flex;position:absolute}.dpad-mid{justify-content:space-between;align-items:center;width:100%;display:flex}.dpad-btn{background:var(--dark-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid var(--glass-border);color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;font-size:16px;font-weight:800;transition:all .1s;display:flex;box-shadow:0 4px 10px #0000004d}.dpad-btn:active{background:var(--primary);border-color:#fff;transform:scale(.92)}.dpad-center{color:var(--text-muted);font-size:10px}.hud-bottom-right{bottom:max(20px, env(safe-area-inset-bottom));right:max(20px, env(safe-area-inset-right));pointer-events:auto;position:absolute}.action-btn{color:#fff;cursor:pointer;touch-action:none;background:linear-gradient(135deg,#0284c7,#0369a1);border:3px solid #38bdf8;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:88px;height:88px;transition:all .15s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 8px 25px #0284c780,inset 0 2px 4px #fff6}.action-btn:hover{transform:scale(1.08)}.action-btn:active,.action-btn.active-hold{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#fef08a;transform:scale(.92)}.action-btn.btn-strike{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#fca5a5;animation:.4s infinite alternate strikePulse}@keyframes strikePulse{0%{transform:scale(1.05)}to{transform:scale(1.18)}}.action-btn.btn-reeling{background:linear-gradient(135deg,#10b981,#059669);border-color:#6ee7b7}.action-btn .btn-icon{font-size:30px;line-height:1}.action-btn .btn-text{letter-spacing:.5px;margin-top:3px;font-size:12px;font-weight:800}.strike-overlay{z-index:25;pointer-events:none;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)}.strike-alert-box{text-align:center;background:#0f172af2;border:3px solid #ef4444;border-radius:20px;padding:16px 28px;animation:.25s cubic-bezier(.34,1.56,.64,1) bounceIn;box-shadow:0 10px 30px #ef444480}.strike-exclamation{color:#ef4444;font-size:26px;font-weight:900;animation:.3s infinite shake}@keyframes shake{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.strike-msg{color:#fff;margin:6px 0 10px;font-size:15px;font-weight:700}.strike-gauge-bg{background:#334155;border-radius:999px;width:180px;height:10px;margin:0 auto;overflow:hidden}.strike-gauge-fill{background:linear-gradient(90deg,#ef4444,#f59e0b);border-radius:999px;width:100%;height:100%;transition:width 50ms linear}.reeling-overlay{z-index:28;pointer-events:none;width:90%;max-width:440px;position:absolute;top:22%;left:50%;transform:translate(-50%)}.reeling-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172af0;border:3px solid #38bdf8;border-radius:24px;padding:20px 24px;animation:.3s modalEnter;box-shadow:0 12px 35px #00000080}.reeling-header{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.reeling-title{color:#fff;font-size:16px;font-weight:800}.reeling-status{color:#fff;background:#22c55e;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}.reeling-status.danger{background:#ef4444}.reeling-status.loose{background:#3b82f6}.tension-section{margin-bottom:16px}.tension-labels{justify-content:space-between;margin-bottom:6px;font-size:10.5px;font-weight:700;display:flex}.loose-label{color:#60a5fa}.sweet-label{color:#4ade80}.danger-label{color:#f87171}.tension-bar-track{border:2px solid var(--glass-border);background:#1e293b;border-radius:12px;width:100%;height:24px;position:relative;overflow:hidden}.tension-sweet-zone{background:#22c55e73;border-left:2px dashed #4ade80;border-right:2px dashed #4ade80;width:40%;height:100%;position:absolute;left:35%}.tension-needle{background:#fff;border-radius:4px;width:8px;height:100%;transition:left 40ms linear;position:absolute;top:0;transform:translate(-50%);box-shadow:0 0 8px #fff}.catch-progress-section{margin-bottom:12px}.progress-label-row{color:var(--text-muted);justify-content:space-between;margin-bottom:6px;font-size:12px;font-weight:700;display:flex}.progress-track{border:1px solid var(--glass-border);background:#1e293b;border-radius:999px;width:100%;height:14px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#38bdf8,#22c55e);border-radius:999px;height:100%;transition:width 50ms linear}.reeling-tip{color:var(--text-muted);text-align:center;font-size:11.5px}.catch-popup{z-index:40;pointer-events:none;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.catch-popup-content{text-align:center;background:linear-gradient(135deg,#1e293bf5,#0f172afa);border:3px solid #fbbf24;border-radius:28px;padding:24px 38px;animation:.4s cubic-bezier(.34,1.56,.64,1) popUp;box-shadow:0 14px 40px #fbbf2473}@keyframes popUp{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}.catch-stars{color:#fbbf24;letter-spacing:4px;font-size:20px}.catch-fish-emoji{filter:drop-shadow(0 6px 12px #0006);margin:6px 0;font-size:64px}.catch-fish-name{color:#fff;font-size:24px;font-weight:900}.catch-fish-stats{color:#cbd5e1;margin:4px 0;font-size:14px;font-weight:700}.catch-fish-rarity{color:#38bdf8;letter-spacing:1px;font-size:13px;font-weight:800}.catch-fish-record{color:#fff;background:linear-gradient(90deg,#f59e0b,#ef4444);border-radius:999px;margin-top:6px;padding:2px 10px;font-size:12px;font-weight:800;display:inline-block}.catch-fish-pts{color:#4ade80;margin-top:8px;font-size:20px;font-weight:800}.fishdex-popup{max-width:620px}.fishdex-summary{color:#38bdf8;text-align:center;background:#0f172a99;border-radius:12px;margin-bottom:14px;padding:8px 14px;font-size:13px;font-weight:700}.fishdex-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:380px;padding-right:4px;display:grid;overflow-y:auto}.fishdex-card{border:2px solid var(--glass-border);text-align:center;background:#0f172a80;border-radius:16px;padding:12px 8px;transition:all .15s}.fishdex-card.unlocked{background:#1e3a8a59;border-color:#38bdf8}.fishdex-card .card-emoji{font-size:34px}.fishdex-card .card-name{color:#fff;margin:4px 0 2px;font-size:13px;font-weight:800}.fishdex-card .card-count{color:var(--text-muted);font-size:11px}.fishdex-card .card-max{color:#fbbf24;margin-top:2px;font-size:11px;font-weight:700}.fishdex-card.locked{opacity:.45;filter:grayscale()}.popup-modal{-webkit-backdrop-filter:blur(6px);z-index:100;background:#000000a6;justify-content:center;align-items:center;width:100vw;height:100vh;padding:16px;display:flex;position:fixed;top:0;left:0}.popup-content{background:var(--dark-card);border:2px solid var(--glass-border);width:100%;max-width:480px;box-shadow:var(--shadow-lg);color:#fff;border-radius:24px;max-height:90vh;padding:24px;animation:.25s cubic-bezier(.34,1.56,.64,1) modalEnter;overflow-y:auto}@keyframes modalEnter{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;display:flex}.btn-close-x{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:28px}.btn-close-x:hover{color:#fff}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0284c7,#0369a1);border:none;border-radius:14px;padding:12px 20px;font-family:inherit;font-size:15px;font-weight:700;transition:all .15s;box-shadow:0 4px 14px #0284c766}.btn-primary:hover{background:linear-gradient(135deg,#0369a1,#075985);transform:translateY(-2px)}.btn-secondary{border:1px solid var(--glass-border);color:#cbd5e1;cursor:pointer;background:#334155cc;border-radius:14px;padding:10px 16px;font-family:inherit;font-size:13px;font-weight:600}.modal-footer{justify-content:space-between;gap:10px;margin-top:16px;display:flex}.btn-close-modal{border:1px solid var(--glass-border);color:#fff;cursor:pointer;background:#334155cc;border-radius:14px;width:100%;margin-top:16px;padding:12px;font-weight:700}.hud-btn.view-btn{background:#1e293be6;gap:5px;width:auto;padding:0 10px;font-size:12px;font-weight:700}.hud-btn.view-btn:hover{background:#334155f2;border-color:#38bdf8}.weather-popup{max-width:540px}.weather-grid-8{grid-template-columns:repeat(2,1fr);gap:10px;max-height:380px;margin:16px 0;display:grid;overflow-y:auto}@media (width>=480px){.weather-grid-8{grid-template-columns:repeat(4,1fr)}}.weather-opt{border:2px solid var(--glass-border);color:#fff;cursor:pointer;background:#0f172a99;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;font-family:inherit;font-size:12.5px;font-weight:700;transition:all .15s;display:flex}.weather-opt .opt-sub{color:#94a3b8;font-size:10px;font-weight:500}.weather-opt:hover{border-color:#38bdf8;transform:translateY(-2px)}.weather-opt.active{background:#1e3a8abf;border-color:#38bdf8;box-shadow:0 0 14px #38bdf866}.time-toggle-row{border-top:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;display:flex}.leaderboard-tabs{gap:8px;margin-bottom:12px;display:flex}.tab-btn{border:1px solid var(--glass-border);color:var(--text-muted);cursor:pointer;background:#0f172a99;border-radius:12px;flex:1;padding:10px;font-family:inherit;font-size:13px;font-weight:700}.tab-btn.active{color:#fff;background:#0284c7;border-color:#38bdf8}.leaderboard-list-wrap{border:1px solid var(--glass-border);background:#0f172a80;border-radius:14px;max-height:240px;overflow-y:auto}.leaderboard-table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}.leaderboard-table th{color:var(--text-muted);background:#1e293bcc;padding:10px 12px}.leaderboard-table td{border-top:1px solid #ffffff0d;padding:10px 12px}.leaderboard-submit-box{border:1px solid var(--glass-border);background:#0f172a80;border-radius:16px;margin-top:14px;padding:12px}.leaderboard-submit-box label{color:var(--text-muted);margin-bottom:6px;font-size:12px;display:block}.input-row{gap:8px;display:flex}.input-row input{border:1px solid var(--glass-border);color:#fff;background:#1e293bcc;border-radius:12px;outline:none;flex:1;padding:8px 12px;font-family:inherit;font-size:13px}.status-msg{text-align:center;margin-top:6px;font-size:12px}.help-body{flex-direction:column;gap:12px;margin-bottom:16px;font-size:13.5px;line-height:1.6;display:flex}.help-section h4{color:#38bdf8;margin-bottom:4px}.help-section ul{padding-left:20px}.help-section code{color:#fef08a;background:#0006;border-radius:6px;padding:2px 6px}.start-overlay{-webkit-backdrop-filter:blur(10px);z-index:200;background:radial-gradient(circle,#0f172ae0,#020617f5);justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.start-box{background:var(--dark-card);border:2px solid var(--glass-border);text-align:center;border-radius:28px;width:100%;max-width:440px;padding:32px 24px;animation:.3s modalEnter;box-shadow:0 20px 50px #0009}.game-logo .logo-emoji{font-size:56px;animation:2s ease-in-out infinite bobFloat;display:block}@keyframes bobFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.game-logo h1{letter-spacing:1.5px;background:linear-gradient(135deg,#38bdf8,#fbbf24);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:4px 0;font-size:34px;font-weight:900}.game-logo .subtitle{color:var(--text-muted);font-size:14px;font-weight:600}.character-preview-card{border:1px solid var(--glass-border);color:#cbd5e1;background:#0f172a99;border-radius:18px;margin:20px 0;padding:16px;font-size:13px;line-height:1.5}.btn-start-game{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0284c7,#0369a1);border:3px solid #38bdf8;border-radius:18px;width:100%;padding:16px;font-family:inherit;font-size:19px;font-weight:800;transition:all .15s;box-shadow:0 10px 25px #0284c780}.btn-start-game:hover{transform:translateY(-3px)scale(1.02)}.start-features{color:var(--text-muted);flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px;font-size:11.5px;display:flex}@media (width<=640px){.hud-card{border-radius:12px;padding:6px 12px}.hud-card .value{font-size:17px}.stage-badge{padding:4px 12px;font-size:12px}.stage-nav-btn{width:32px;height:32px;font-size:12px}.hud-btn{width:38px;height:38px;font-size:15px}.hud-btn.bot-btn{padding:0 8px;font-size:11px}.action-btn{width:76px;height:76px}.action-btn .btn-icon{font-size:26px}.reeling-card{padding:16px}}