* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:#04141f; font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif; color:#d9f3ff; }
#game-canvas { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#flash { position:fixed; inset:0; opacity:0; pointer-events:none; transition:opacity .25s; z-index:5; }
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; padding:10px; }
.hud-row { display:flex; gap:8px; flex-wrap:wrap; }
.hud-chip { background:rgba(4,22,36,.75); border:1px solid #1f5d78; border-radius:8px; padding:6px 10px; font-size:12px; letter-spacing:.08em; }
.hud-chip b { color:#47ffd2; font-size:15px; margin-left:4px; }
.bars { margin-top:8px; width:min(260px,45vw); display:flex; flex-direction:column; gap:6px; }
.bar { display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.1em; }
.bar .track { flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:5px; overflow:hidden; }
.bar div div, .track div { height:100%; border-radius:5px; transition:width .2s; }
#bar-oxy { width:100%; background:linear-gradient(90deg,#2fbcd8,#7fe7ff); }
#bar-hull { width:100%; background:linear-gradient(90deg,#e8b64c,#ffd98a); }
.bar .track div.low { background:linear-gradient(90deg,#ff3f5f,#ff7a90) !important; }
#compass { position:fixed; right:18px; top:14px; width:74px; text-align:center; background:rgba(4,22,36,.7); border:1px solid #1f5d78; border-radius:10px; padding:6px 0; }
#arrow { font-size:26px; color:#47ffd2; line-height:1; transform-origin:50% 50%; }
#compass small { display:block; font-size:9px; letter-spacing:.15em; color:#7fb8d4; }
#touchpad { position:fixed; left:0; right:0; bottom:0; display:block; z-index:20; pointer-events:none; }
.pad { position:fixed; bottom:12px; display:grid; gap:6px; pointer-events:auto; }
.pad-left { left:12px; grid-template-columns:1fr 1fr; }
.pad-right { right:12px; grid-template-columns:1fr; }
.pad button { pointer-events:auto; background:rgba(20,60,84,.55); border:1px solid #2a7a99; color:#cfeeff; border-radius:10px;
  font-size:13px; padding:10px 12px; min-width:52px; touch-action:none; user-select:none; -webkit-user-select:none; }
.pad button.wide { min-width:86px; }
.pad button.on { background:rgba(71,255,210,.35); border-color:#47ffd2; }
@media (pointer:fine) {
  .pad button { opacity:.6; font-size:12px; padding:8px 10px; min-width:46px; }
  .pad button.wide { min-width:74px; }
  .pad button:hover, .pad button.on { opacity:1; }
}
@media (pointer:coarse) { .pad button { font-size:14px; padding:12px; } }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,10,18,.72); z-index:30; }
.panel { background:rgba(6,28,44,.92); border:1px solid #2a7a99; border-radius:16px; padding:26px 30px; max-width:min(480px,92vw); text-align:center; box-shadow:0 0 40px rgba(31,189,216,.25); }
.panel h1 { font-size:34px; letter-spacing:.06em; color:#e8f7ff; }
.panel h1 span { color:#47ffd2; }
.panel h2 { font-size:28px; margin-bottom:8px; }
.tag { color:#7fb8d4; margin:8px 0 14px; font-size:14px; }
.howto { list-style:none; text-align:left; font-size:13px; line-height:1.8; margin-bottom:16px; }
.howto b { color:#47ffd2; }
.score-line { font-size:20px; color:#47ffd2; margin:10px 0 16px; }
#end-msg { font-size:14px; color:#bfe0ef; line-height:1.6; }
.big-btn, .ghost-btn { display:block; width:100%; padding:13px; border-radius:10px; font-size:16px; cursor:pointer; margin-top:8px; }
.big-btn { background:linear-gradient(90deg,#19c9a4,#2fbcd8); color:#03222e; border:none; font-weight:bold; letter-spacing:.05em; }
.big-btn:hover { filter:brightness(1.15); }
.ghost-btn { background:transparent; border:1px solid #2a7a99; color:#9fd6ee; font-size:13px; }