:root{
    --bg:#04060c; --fg:#e2e9f4; --dim:#78899f; --line:#1d2a3d;
    --good:#3ddc84; --warn:#ffb020; --bad:#ff4d4d;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  /* Column flex so anything spliced above the game (the hosted site's back-bar)
     keeps its height and the play area takes the rest. Standalone, #wrap is the
     only child and fills the viewport exactly as before. */
  body{display:flex;flex-direction:column}
  /* The hosted back-bar is written by the site build and its note can wrap to
     many lines on a narrow or short viewport. Cap its share so the game is
     never squeezed into a sliver; it scrolls internally if it needs to. */
  body > .hosted-bar{flex:0 0 auto;max-height:20vh;overflow:auto}
  #wrap{position:relative;flex:1 1 auto;min-height:0}
  canvas{display:block;width:100%;height:100%;touch-action:none}

  .panel{position:absolute;background:rgba(5,10,20,.62);border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;backdrop-filter:blur(3px)}
  #hud{top:12px;left:12px;font-size:13px;line-height:1.55;min-width:216px}
  #hud .row{display:flex;justify-content:space-between;gap:20px}
  #hud .lbl{color:var(--dim)}
  .bar{height:6px;background:#16202f;border-radius:3px;margin:3px 0 7px;overflow:hidden}
  .bar > i{display:block;height:100%;width:0%;background:var(--good);transition:width .05s linear}
  #thrbar > i{background:#5aa9ff}
  #fuelbar > i{background:var(--warn)}
  #keys{top:12px;right:12px;font-size:12px;color:var(--dim);line-height:1.7;text-align:right;max-width:220px}
  #keys b{color:var(--fg);font-weight:600}
  #cue{position:absolute;left:50%;top:16px;transform:translateX(-50%);font-size:15px;
    letter-spacing:2px;font-weight:600;padding:7px 16px;border-radius:8px;display:none;
    border:1px solid var(--line);background:rgba(5,10,20,.7)}
  #score{bottom:12px;left:12px;font-size:12px;color:var(--dim);line-height:1.7}
  #score b{color:var(--fg)}
  .ok{color:var(--good)} .no{color:var(--bad)} .mid{color:var(--warn)}

  #msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
    background:rgba(3,6,12,.74);backdrop-filter:blur(3px);padding:16px}
  #msg .card{border:1px solid #24344b;background:#08101d;border-radius:16px;padding:26px 34px;max-width:460px}
  #msg h1{margin:0 0 8px;font-size:25px;letter-spacing:1px}
  #msg p{margin:5px 0;font-size:13px;color:var(--dim);line-height:1.6}
  #mstats{margin-top:16px;font-size:13px;line-height:1.8;text-align:left;display:inline-block}
  #mstats .k{color:var(--dim);display:inline-block;min-width:104px}
  #msg small{display:block;margin-top:18px;color:var(--dim);font-size:12px}

  /* click-and-hold controls: mouse, pen and finger all land on the same handlers */
  button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #pad{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
    display:flex;gap:8px;align-items:stretch}
  #pad button{width:104px;height:54px;border:1px solid var(--line);border-radius:12px;
    background:rgba(12,22,38,.72);color:#9db2cf;font-size:12px;letter-spacing:1.5px;
    display:grid;place-items:center;backdrop-filter:blur(3px);transition:background .06s,color .06s}
  #pad button.wide{width:132px}
  #pad button.on{background:rgba(60,120,190,.55);color:#eaf2ff;border-color:#4e7db5}
  #pad button.burn.on{background:rgba(210,120,40,.6);border-color:#c8802e;color:#fff3e0}
  #sys{position:absolute;right:12px;bottom:16px;display:flex;gap:8px}
  #sys button{width:52px;height:34px;border:1px solid var(--line);border-radius:9px;
    background:rgba(12,22,38,.72);color:#7c8ea6;font-size:11px;letter-spacing:1px}
  #sys button:hover{color:#cfe0f5}
  .cardbtn{margin-top:18px;padding:11px 26px;border:1px solid #35507a;border-radius:10px;
    background:#12233c;color:#dceaff;font-size:13px;letter-spacing:1.5px}
  .cardbtn:hover{background:#1b3357;border-color:#4a70a8}

  body.touch #keys{display:none}
  body.touch #pad{left:6px;right:6px;bottom:6px;transform:none;gap:6px}
  body.touch #pad button{width:auto;height:15vh;flex:1}
  body.touch #pad button.wide{width:auto;flex:1.25}
  @media (max-width: 720px){
    #keys{display:none}
    #hud{font-size:11px;min-width:158px;padding:8px 9px}
    #score{font-size:11px;bottom:86px}
    #msg .card{padding:20px 22px}
    #msg h1{font-size:20px}
    #pad button{width:88px;height:50px}
    #pad button.wide{width:110px}
  }

/* replaces inline style= attributes, which the site's CSP refuses */
#hud .row.gap{margin-top:9px}
#hud .row.gap-sm{margin-top:2px}
#hud .row[hidden]{display:none}
#mstats .lvl{color:var(--fg)}
#mstats .lim{color:#4d5c72}