body{overscroll-behavior:none}#app{max-width:1200px;margin:0 auto;padding:14px clamp(12px,4vw,28px) 22px}.hp-stage{position:relative;width:min(100%,calc(82vh * 22 / 15));aspect-ratio:22 / 15;margin:8px auto 0;border-radius:var(--poc-radius);overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--poc-shadow);background:#0e2c44;touch-action:none;user-select:none;-webkit-user-select:none}@media(max-width:560px){.hp-stage{width:100%;aspect-ratio:1 / 1}}.hp-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.hp-hud{position:absolute;top:10px;left:12px;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.75)}.hp-lvl{font-family:var(--poc-serif);font-size:clamp(15px,3.4vw,21px);margin-bottom:4px}.hp-lvl-brand{display:block;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#f0c75e99;margin-top:1px}.hp-tel{display:grid;grid-template-columns:auto auto;gap:1px 14px;font-variant-numeric:tabular-nums;font-size:12px}.hp-tel span{white-space:nowrap}.hp-ah{color:var(--poc-ok)}.hp-as{color:var(--poc-brass-2)}.hp-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px;pointer-events:none}.hp-pad,.hp-stop,.hp-mid,.hp-tug{pointer-events:auto}.hp-mid{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--poc-foam);background:linear-gradient(180deg,#1e3040d9,#08121ed9);border:1px solid rgba(190,160,92,.45);box-shadow:inset 0 1px #ffffff2e,0 2px 4px #0006;border-radius:999px;padding:5px 12px;white-space:nowrap;transition:filter .12s ease,transform .06s ease}.hp-mid:hover{filter:brightness(1.15)}.hp-mid:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #0006}.hp-anchor{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;pointer-events:auto;font:inherit;font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--poc-foam);background:linear-gradient(180deg,#1e3040d9,#08121ed9);border:1px solid rgba(190,160,92,.45);box-shadow:inset 0 1px #ffffff2e,0 2px 4px #0006;border-radius:999px;padding:5px 12px;white-space:nowrap;transition:filter .12s ease,transform .06s ease}.hp-anchor:hover{filter:brightness(1.15)}.hp-anchor:active{transform:translateY(1px)}.hp-anchor-on{color:#ffe6b0;border-color:#ffd27acc;background:linear-gradient(180deg,#785c28d9,#3c2c10e6);box-shadow:inset 0 1px #fff3,0 0 10px #ffc86e73}.hp-center{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.hp-tug{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 9px 8px;border-radius:12px;border:1px solid rgba(190,160,92,.4);background:linear-gradient(180deg,#0e1e2c80,#06101a80);box-shadow:inset 0 1px #ffffff1f,inset 0 -6px 12px #0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);touch-action:none}.hp-tug-ttl{font-size:9px;letter-spacing:1.5px;color:var(--poc-brass-2)}.hp-tug-lbl{font-size:9px;letter-spacing:1px;color:#e9f1f480;margin-top:2px}.hp-tug-row{display:flex;gap:6px}.hp-tug-btn{width:clamp(30px,8vw,40px);height:clamp(24px,6.5vw,32px);border-radius:8px;font:inherit;font-size:14px;line-height:1;color:var(--poc-foam);background:linear-gradient(180deg,#3a68868c,#1a3a508c);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px #ffffff47,inset 0 -3px 5px #00000052,0 2px 4px #0006;cursor:pointer;touch-action:none;transition:transform .06s ease,filter .12s ease,background .12s ease}.hp-tug-btn:hover{filter:brightness(1.15)}.hp-tug-btn:active{transform:translateY(2px);background:linear-gradient(180deg,#4cc38a80,#28785a80);box-shadow:inset 0 2px 4px #0006}.hp-pad{position:relative;width:clamp(92px,25vw,148px);height:clamp(92px,25vw,148px);border-radius:16px;border:2px solid rgba(190,160,92,.5);background:#0816246b;box-shadow:inset 0 1px #ffffff2e,inset 0 -10px 18px #0000006b,inset 0 0 0 1px #00000059,0 3px 9px #0000006b;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);touch-action:none;overflow:hidden}.hp-pad:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(148deg,#ffffff29,#fff0 42%)}.hp-pad--throttle{background:repeating-linear-gradient(0deg,transparent 0 6.6%,rgba(255,255,255,.06) 6.6% 7.2%,transparent 7.2% 13.2%),linear-gradient(180deg,#4cc38a3d,#08162480 50%,#d4a23a3d)}.hp-pad--rudder{background:repeating-linear-gradient(90deg,transparent 0 6.6%,rgba(255,255,255,.06) 6.6% 7.2%,transparent 7.2% 13.2%),linear-gradient(90deg,#e25a4c33,#08162480 50%,#4cc38a33)}.hp-pad-lbl{position:absolute;font-size:10px;letter-spacing:1px;color:#e9f1f49e;pointer-events:none}.hp-pad-lbl--top{top:6px;left:50%;transform:translate(-50%)}.hp-pad-lbl--bot{bottom:6px;left:50%;transform:translate(-50%)}.hp-pad-lbl--l{left:6px;top:50%;transform:translateY(-50%)}.hp-pad-lbl--r{right:6px;top:50%;transform:translateY(-50%)}.hp-pad--rudder:after{content:"";position:absolute;top:10%;bottom:10%;left:50%;width:1px;background:#ffffff29}.hp-pad--throttle:after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:#ffffff29}.hp-pad-thumb{position:absolute;pointer-events:none;background:var(--poc-brass-2);border-radius:999px;box-shadow:0 0 8px #f0c75e8c}.hp-pad-thumb--v{top:9%;bottom:9%;width:5px;left:50%;transform:translate(-50%);transition:left .08s linear}.hp-pad-thumb--h{left:9%;right:9%;height:5px;top:50%;transform:translateY(-50%);transition:top .08s linear}.hp-stop{align-self:center;width:clamp(54px,15vw,74px);height:clamp(54px,15vw,74px);border-radius:50%;font:inherit;font-weight:800;font-size:13px;letter-spacing:1px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);background:radial-gradient(circle at 38% 30%,#ec6e60,#c23a2e 62%,#8a261c);border:3px solid rgba(190,160,92,.55);box-shadow:inset 0 3px 6px #ffffff52,inset 0 -7px 12px #0000006b,0 4px 10px #00000080;cursor:pointer;transition:transform .06s ease,filter .15s ease}.hp-stop:hover{filter:brightness(1.08)}.hp-stop:active{transform:translateY(2px);box-shadow:inset 0 2px 5px #0006,0 1px 3px #00000080}.hp-auto-on{color:#bfe9ff!important;border-color:#78c8ffb3!important;box-shadow:0 0 10px #78c8ff73,inset 0 0 8px #78c8ff40}.hp-toast{position:absolute;top:16%;left:50%;transform:translate(-50%,-6px);padding:8px 16px;border-radius:999px;background:#06121cdb;border:1px solid rgba(120,200,255,.55);color:#d7eeff;font:600 13px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap;box-shadow:0 4px 18px #0006,0 0 12px #78c8ff40;pointer-events:none;opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:6}.hp-toast--show{opacity:1;transform:translate(-50%)}.hp-medal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media(max-width:480px){.hp-medal-grid{grid-template-columns:1fr}}.hp-medal{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:9px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);opacity:.5}.hp-medal--got{opacity:1;background:#ffd27a14;border-color:#ffd27a66}.hp-medal-icon{font-size:22px;line-height:1;width:26px;text-align:center;flex-shrink:0}.hp-medal-title{font-weight:700;font-size:13px}.hp-medal-desc{font-size:11px;color:var(--poc-muted, #9fb2bd)}.hp-daily-pill{color:#ffe6b0!important;border-color:#ffd27ab3!important;background:linear-gradient(180deg,#785c2880,#3c2c108c)!important}.hp-daily-btn{color:#ffd27a!important;border-color:#ffd27a80!important}.hp-daily-btn:hover{filter:brightness(1.15)}.hp-chart-wrap{margin:10px 0 12px}.hp-chart-thumb{display:block;border-radius:8px;border:1px solid rgba(190,160,92,.4);box-shadow:inset 0 0 12px #00000059,0 2px 6px #0000004d}.hp-chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;font-size:11px;color:var(--poc-muted, #9fb2bd)}.hp-chart-legend b{font-style:normal}.hp-squall{color:#ffd27a!important;font-weight:700;letter-spacing:.04em;text-shadow:0 0 8px rgba(255,180,90,.6);animation:hp-squall-pulse 1.1s ease-in-out infinite}@keyframes hp-squall-pulse{0%,to{opacity:1}50%{opacity:.55}}.hp-lb-seg{display:inline-flex;gap:4px}.hp-lb-on{color:#bfe9ff!important;border-color:#78c8ff99!important;background:#78c8ff1f!important}.hp-lb-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.02em;vertical-align:middle;background:#ffffff14;border:1px solid rgba(255,255,255,.16);color:var(--poc-muted, #9fb2bd)}.hp-lb-badge--mine{background:#78c8ff29;border-color:#78c8ff80;color:#bfe9ff}