:root{--cyan:#68e5ff;--yellow:#ffd85b;--panel:rgba(3,27,49,.72)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b7da8;font-family:Arial,Helvetica,sans-serif;touch-action:none}
body{position:fixed;inset:0}
#app{position:relative;width:100%;height:100%;overflow:hidden;background:#0e9fc2}
canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;left:9px;right:9px;top:max(9px,env(safe-area-inset-top));display:flex;gap:6px;justify-content:space-between;pointer-events:none}
.pill{background:linear-gradient(180deg,rgba(16,75,105,.82),rgba(4,38,64,.82));border:1px solid rgba(196,242,255,.72);box-shadow:0 4px 14px rgba(0,34,57,.28),inset 0 1px rgba(255,255,255,.25);border-radius:13px;color:#dff9ff;padding:7px 9px;font-size:11px;font-weight:900;letter-spacing:.6px;backdrop-filter:blur(7px);text-shadow:0 1px 2px #123}
.pill b{color:#fff}
#bossHud{position:absolute;top:max(57px,calc(env(safe-area-inset-top) + 50px));left:12%;right:12%;pointer-events:none}
.boss-title{text-align:center;color:#fff2a1;font-weight:900;font-size:12px;letter-spacing:2px;text-shadow:0 2px 4px #4b1b13}
.boss-bar{height:14px;background:rgba(0,0,0,.46);border-radius:12px;padding:2px;border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 12px rgba(0,0,0,.22)}
#bossFill{height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,#ffd25e,#ff744b,#ef3555)}
#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(29,180,222,.12),rgba(1,19,38,.68));padding:20px;opacity:0;pointer-events:none;transition:.25s}
#overlay.show{opacity:1;pointer-events:auto}
.card{width:min(92vw,420px);text-align:center;padding:30px 24px;border-radius:28px;background:linear-gradient(180deg,rgba(14,69,103,.9),rgba(5,34,60,.94));border:1px solid rgba(170,236,255,.6);box-shadow:0 25px 70px rgba(0,28,50,.44),inset 0 1px rgba(255,255,255,.18);color:#eafaff;backdrop-filter:blur(10px)}
.logo{font-size:42px;font-weight:1000;letter-spacing:1px;color:#fff;text-shadow:0 4px 0 #1263a1,0 8px 20px rgba(0,0,0,.35)}
.logo span{color:#ffd05a;text-shadow:0 4px 0 #b56d18,0 8px 20px rgba(0,0,0,.35)}
.card p{font-size:16px;line-height:1.45;color:#d7f7ff;margin:18px 0 24px}
button{border:0;border-radius:18px;padding:15px 28px;font-size:16px;font-weight:900;letter-spacing:.8px;color:#123753;background:linear-gradient(#fff58d,#ffc54c);box-shadow:0 8px 0 #c98524,0 14px 24px rgba(0,0,0,.24)}
button:active{transform:translateY(3px);box-shadow:0 5px 0 #c98524}
#message{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:11px 17px;background:rgba(2,34,60,.7);border:1px solid rgba(255,255,255,.45);border-radius:16px;color:#fff;font-weight:900;letter-spacing:1px;text-shadow:0 2px 4px #123;box-shadow:0 7px 18px rgba(0,0,0,.18);pointer-events:none;white-space:nowrap}
.hidden{display:none!important}

#settingsBtn{position:absolute;right:10px;top:max(53px,calc(env(safe-area-inset-top) + 46px));z-index:8}
.icon-btn{width:44px;height:44px;padding:0;border-radius:15px;font-size:23px;line-height:44px;background:linear-gradient(180deg,rgba(16,75,105,.94),rgba(4,38,64,.94));color:#fff;border:1px solid rgba(196,242,255,.72);box-shadow:0 5px 16px rgba(0,34,57,.3);touch-action:manipulation}
.modal{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,18,35,.67);backdrop-filter:blur(7px);touch-action:manipulation}
.modal-card{width:min(92vw,420px);max-height:84vh;overflow:auto;padding:24px;border-radius:25px;background:linear-gradient(180deg,rgba(14,69,103,.97),rgba(5,34,60,.98));border:1px solid rgba(170,236,255,.62);box-shadow:0 25px 70px rgba(0,0,0,.48);color:#fff;text-align:center}
.modal-card h2{margin:0 0 18px;font-size:22px;letter-spacing:1px;color:#e9fbff}
.menu-btn,.secondary-btn{display:block;width:100%;margin:12px 0 0;padding:13px 14px;border-radius:15px;font-size:14px;box-shadow:none}
.secondary-btn{background:rgba(255,255,255,.12);color:#e9fbff;border:1px solid rgba(255,255,255,.28)}
.pilot-label{display:block;text-align:left;font-size:12px;font-weight:800;color:#cdefff;letter-spacing:.5px;margin-bottom:14px}.pilot-label input{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid rgba(190,240,255,.5);border-radius:13px;background:rgba(0,20,37,.45);color:#fff;font-size:16px;outline:none}
.ranking-list{display:flex;flex-direction:column;gap:7px;margin:8px 0 18px}.rank-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:10px;border-radius:12px;background:rgba(0,19,35,.42);text-align:left}.rank-row b{color:#ffd75d}.rank-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-row strong{color:#bdf7ff}.ranking-wait{padding:18px;color:#cdefff}