:root{
    --bg0:#0a0e2a; --bg1:#141a4d; --neon:#3ef0ff; --neon2:#c93bff;
    --gold:#ffd54a; --green:#5dffb0; --red:#ff5a6e; --ui:#e8ecff;
    --panel:rgba(14,20,60,.86); --panelb:#3ef0ff66;
    --f-display:'Michroma','Chakra Petch',sans-serif;
    --f-body:'Chakra Petch','Trebuchet MS',sans-serif;
    --f-data:'Space Mono','Trebuchet MS',monospace;
  }
  *{box-sizing:border-box; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;overflow:hidden;background:#05071a;touch-action:none;overscroll-behavior:none;
    font-family:var(--f-body);color:var(--ui);}
  #game{position:fixed;inset:0;display:block;touch-action:none;}
  .screen{position:fixed;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;justify-content:safe center;z-index:20;padding:24px;overflow-y:auto;
    background:
      repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px),
      radial-gradient(circle at 50% 22%,#1b2570 0%,#070a22 62%,#05061a 100%);}
  .hidden{display:none!important;}
  h1{font-family:var(--f-display);font-size:clamp(28px,6.4vw,60px);margin:0 0 6px;letter-spacing:4px;
    color:#fff;text-shadow:0 0 18px var(--neon),0 0 40px var(--neon2);position:relative;
    display:inline-block;}
  #start h1{ isolation:isolate; }
  #start h1::before,#start h1::after{content:'STAR HAVEN';position:absolute;left:0;top:0;width:100%;
    opacity:0;mix-blend-mode:screen;pointer-events:none;}
  #start h1::before{color:var(--neon2);animation:glitchA 6.5s ease-in-out infinite;}
  #start h1::after{color:var(--neon);animation:glitchB 6.5s ease-in-out infinite;}
  @keyframes glitchA{
    0%,88%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0);}
    89%{opacity:.75;transform:translate(-3px,1px);clip-path:inset(10% 0 60% 0);}
    91%{opacity:.75;transform:translate(3px,-1px);clip-path:inset(55% 0 15% 0);}
    93%{opacity:0;transform:translate(0,0);}
    100%{opacity:0;}
  }
  @keyframes glitchB{
    0%,86%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0);}
    87%{opacity:.7;transform:translate(3px,-2px);clip-path:inset(30% 0 40% 0);}
    90%{opacity:.7;transform:translate(-2px,2px);clip-path:inset(70% 0 5% 0);}
    92%{opacity:0;transform:translate(0,0);}
    100%{opacity:0;}
  }
  .tag{font-family:var(--f-body);color:var(--neon);letter-spacing:9px;font-size:13px;margin-bottom:28px;
    text-transform:uppercase;font-weight:600;}
  .tag::before,.tag::after{content:'—';color:var(--neon2);margin:0 10px;opacity:.7;}
  .heroes{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;max-width:920px;margin-bottom:22px;}
  .hcard{width:200px;background:var(--panel);border:2px solid var(--panelb);
    border-top:2px solid var(--panelb);
    border-radius:4px 4px 18px 18px;padding:16px;cursor:pointer;transition:.15s;text-align:center;
    position:relative;overflow:hidden;}
  .hcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--neon),var(--neon2));opacity:.55;transition:.15s;}
  .hcard:hover{transform:translateY(-6px);border-color:var(--neon);box-shadow:0 10px 30px #3ef0ff44;}
  .hcard:hover::before{opacity:1;}
  .hcard.sel{border-color:var(--gold);box-shadow:0 0 26px var(--gold);}
  .hcard.sel::before{background:var(--gold);opacity:1;}
  .hcard canvas{width:96px;height:96px;}
  .hname{font-family:var(--f-display);font-size:15px;font-weight:400;margin:8px 0 3px;letter-spacing:.5px;}
  .hrole{color:var(--neon);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-weight:600;}
  .hstats{font-size:12px;text-align:left;line-height:1.7;color:#bcd0ff;font-weight:500;}
  .bar{height:6px;background:#1b2350;border-radius:4px;overflow:hidden;margin:2px 0 6px;}
  .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--neon),var(--neon2));}
  button.play,button.again{margin-top:6px;padding:14px 46px;font-family:var(--f-body);font-size:17px;font-weight:700;
    color:#06203a;background:linear-gradient(90deg,var(--neon),var(--green));border:none;
    border-radius:6px;cursor:pointer;letter-spacing:3px;box-shadow:0 0 24px var(--neon);}
  button.play:disabled{opacity:.4;cursor:default;box-shadow:none;}
  button.play:hover:enabled,button.again:hover{transform:scale(1.05);}
  .briefing{margin-top:22px;max-width:760px;}
  .briefing-head{color:var(--neon2);font-size:11px;letter-spacing:4px;text-transform:uppercase;
    text-align:center;margin-bottom:10px;font-weight:600;}
  .briefing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 18px;
    background:rgba(10,14,42,.5);border:1px solid #3ef0ff33;border-radius:10px;padding:14px 18px;}
  .briefing-grid .bi{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:#a9bce8;}
  .briefing-grid .bi .ico{flex:0 0 auto;font-size:16px;line-height:1.3;}
  .briefing-grid .bi b{color:#dbe6ff;font-weight:600;}
  .hint{margin-top:12px;color:#7488b8;font-size:11.5px;max-width:640px;text-align:center;line-height:1.6;}

  /* HUD */
  #hud{position:fixed;inset:0;z-index:10;pointer-events:none;}
  .top{position:absolute;top:10px;left:10px;right:10px;display:flex;
    justify-content:space-between;align-items:flex-start;gap:10px;}
  .pill{position:relative;overflow:hidden;background:var(--panel);backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);border:1px solid var(--panelb);border-radius:4px 4px 14px 14px;
    padding:8px 14px;font-size:13px;font-weight:600;letter-spacing:.3px;display:flex;gap:8px;align-items:center;}
  .pill::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--neon),var(--neon2));opacity:.65;}
  .pill b{color:var(--gold);font-size:18px;font-family:var(--f-data);}
  .basebar{width:min(40vw,360px);}
  .basebar .bar{height:14px;margin:6px 0 0;}
  .basebar .bar>i{background:linear-gradient(90deg,var(--green),var(--neon));transition:width .2s;}
  .corruptbar>i{background:linear-gradient(90deg,#7d4bd0,#ff3b3b)!important;}
  .pill.basebar:has(.corruptbar)::before{background:linear-gradient(90deg,#7d4bd0,#ff3b3b);}
  /* prominent hero health bar, bottom-centre */
  #heroHpWrap{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;
    width:min(50vw,460px);pointer-events:none;text-align:center;z-index:6;}
  #heroHpWrap .hp-label{color:var(--green);font-weight:700;letter-spacing:4px;font-size:12px;
    text-transform:uppercase;text-shadow:0 0 8px #000,0 0 14px #000;margin-bottom:4px;}
  #heroHpWrap .hp-track{position:relative;height:24px;background:#0a1430cc;border:2px solid #0a2138;
    border-radius:13px;overflow:hidden;box-shadow:0 0 18px #000a, inset 0 0 10px #0008;}
  #heroHp{display:block;height:100%;width:100%;border-radius:11px;
    background:linear-gradient(90deg,var(--green),var(--neon));transition:width .15s ease, background .3s;}
  #heroHpWrap .hp-txt{position:absolute;left:0;right:0;top:0;line-height:24px;font-size:13px;
    font-weight:bold;color:#fff;text-shadow:0 0 4px #000,0 1px 2px #000;letter-spacing:1px;}
  #finprompt{position:absolute;top:64px;left:50%;transform:translateX(-50%);pointer-events:none;
    background:#1a0726ee;border:2px solid #b06bff;border-radius:30px;padding:8px 22px;font-size:14px;
    font-weight:bold;color:#e8c9ff;letter-spacing:1px;box-shadow:0 0 16px #b06bff88;}
  #finprompt.ready{border-color:#ff3b3b;color:#ffd9d9;box-shadow:0 0 24px #ff3b3b;
    animation:finpulse .6s infinite alternate;}
  @keyframes finpulse{from{transform:translateX(-50%) scale(1);}to{transform:translateX(-50%) scale(1.06);}}
  #modbar{position:absolute;left:14px;top:118px;display:flex;flex-direction:column;gap:5px;max-width:160px;}
  #modbar .mod{background:#1a0f33cc;backdrop-filter:blur(6px);border:1px solid #ff5dd2aa;border-radius:3px 3px 10px 10px;
    padding:3px 9px;font-size:11px;letter-spacing:.2px;color:#ffc6f0;font-weight:700;}
  #modbar .mod.legend{background:#322404cc;border:1px solid var(--gold);color:#ffe9a3;
    box-shadow:0 0 10px #ffd54a55;}
  #equipbar{position:absolute;left:14px;top:auto;bottom:108px;display:flex;flex-wrap:wrap;gap:5px;max-width:200px;}
  #equipbar .eq{background:#1a0f33dd;backdrop-filter:blur(6px);border:1px solid #b06bff;border-radius:3px 3px 9px 9px;padding:3px 7px;
    font-size:15px;color:#e8d6ff;box-shadow:0 0 8px #b06bff55;}
  #equipbar .eq b{font-size:11px;font-family:var(--f-data);}
  #kitbar{position:absolute;left:14px;bottom:64px;display:flex;gap:8px;align-items:center;pointer-events:auto;}
  #kitbar .kbtn{position:relative;overflow:hidden;background:#0c2a1ecc;backdrop-filter:blur(6px);border:1px solid #5dffb0;
    border-radius:3px 3px 12px 12px;padding:7px 12px;font-size:12.5px;font-weight:700;letter-spacing:.3px;
    color:#dffff0;cursor:pointer;transition:.12s;}
  #kitbar .kbtn::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#5dffb0;opacity:.7;}
  #kitbar .kbtn:hover{transform:translateY(-2px);box-shadow:0 0 12px #5dffb0;}
  #kitbar .kbtn.cant{opacity:.4;cursor:default;}
  .pwr{position:absolute;bottom:14px;left:14px;display:flex;gap:10px;}
  .pwr .p{position:relative;overflow:hidden;background:#0c1238cc;backdrop-filter:blur(6px);border:1px solid var(--gold);
    border-radius:3px 3px 12px 12px;padding:6px 10px;font-size:11.5px;text-align:center;min-width:70px;}
  .pwr .p::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);opacity:.7;}
  .pwr .p .t{color:var(--gold);font-weight:700;font-family:var(--f-data);}
  /* Shop */
  #shop{position:absolute;overflow:hidden;right:10px;bottom:10px;width:222px;background:var(--panel);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1px solid var(--panelb);border-radius:4px 4px 16px 16px;padding:10px;pointer-events:auto;}
  #shop::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--neon),var(--neon2));opacity:.7;}
  #shop h3{font-family:var(--f-display);margin:0 0 7px;font-size:10.5px;font-weight:400;
    letter-spacing:2px;color:var(--neon);text-transform:uppercase;}
  .shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .sbtn{position:relative;overflow:hidden;background:#101846;border:1px solid #2b3a86;
    border-radius:3px 3px 10px 10px;padding:6px 4px;
    cursor:pointer;text-align:center;transition:.12s;font-size:10.5px;line-height:1.25;}
  .sbtn::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#2b3a86;transition:.12s;}
  .sbtn:hover{border-color:var(--neon);transform:translateY(-2px);}
  .sbtn:hover::before{background:var(--neon);}
  .sbtn.sel{border-color:var(--gold);box-shadow:0 0 14px var(--gold);}
  .sbtn.sel::before{background:var(--gold);}
  .sbtn .ico{font-size:18px;line-height:1.1;}
  .sbtn .tico{display:block;margin:0 auto;width:34px;height:30px;}
  .sbtn .nm{font-weight:700;margin-top:1px;}
  .sbtn .cost{color:var(--gold);font-weight:700;font-family:var(--f-data);font-size:10px;}
  .sbtn.cant{opacity:.45;}
  .upgrades{margin-top:7px;border-top:1px solid #2b3a86;padding-top:6px;font-size:10.5px;}
  .urow{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:3px 0;}
  .urow > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ubtn{background:#16205a;border:1px solid #3a4ba0;border-radius:3px 3px 7px 7px;color:var(--ui);
    padding:3px 6px;cursor:pointer;font-size:10px;font-family:var(--f-data);white-space:nowrap;}
  .ubtn:hover{border-color:var(--neon);}
  .ubtn.cant{opacity:.4;}
  #buildhint{position:absolute;top:64px;left:50%;transform:translateX(-50%);backdrop-filter:blur(6px);
    background:#0c1238dd;border:1px solid var(--gold);border-radius:30px;padding:8px 20px;
    font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--gold);pointer-events:none;}
  .toast{position:absolute;top:120px;left:50%;transform:translateX(-50%);backdrop-filter:blur(6px);
    background:#0c1238dd;border:1px solid var(--neon);border-radius:30px;padding:10px 26px;
    font-family:var(--f-display);font-size:19px;font-weight:400;color:#fff;text-shadow:0 0 14px var(--neon);pointer-events:none;
    transition:opacity .4s;letter-spacing:1px;}
  #pausebtn{pointer-events:auto;cursor:pointer;}
  #bossbanner{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);text-align:center;
    pointer-events:none;z-index:6;width:100%;}
  #bossbanner .bb-main{font-family:var(--f-display);font-size:clamp(28px,6.5vw,62px);font-weight:400;color:#ff3030;letter-spacing:3px;
    text-shadow:0 0 18px #ff0000,0 0 44px #6a0a6a;animation:bbpulse .5s infinite alternate;}
  #bossbanner .bb-sub{font-size:clamp(14px,2.6vw,22px);color:#e8c9ff;letter-spacing:5px;margin-top:8px;
    text-shadow:0 0 12px #b06bff;font-weight:600;}
  @keyframes bbpulse{from{transform:scale(1);opacity:.85;}to{transform:scale(1.08);opacity:1;}}
  #mutscene{position:absolute;left:0;right:0;bottom:8%;z-index:9;text-align:center;pointer-events:none;}
  #mutscene .ms-tag{color:#b06bff;letter-spacing:5px;font-size:13px;text-shadow:0 0 12px #b06bff;}
  #mutscene .ms-ico{font-size:40px;margin:4px 0;}
  #mutscene .ms-name{font-size:clamp(22px,5vw,40px);font-weight:bold;color:#fff;letter-spacing:2px;
    text-shadow:0 0 16px #ff3bd2,0 0 36px #6a0a6a;}
  #mutscene .ms-flav{color:#d7c2e8;font-size:clamp(13px,2.6vw,18px);margin-top:6px;font-style:italic;}
  #devourscene{position:absolute;left:0;right:0;top:30%;z-index:9;text-align:center;pointer-events:none;}
  #devourscene .dv-line{font-size:clamp(34px,8vw,72px);font-weight:bold;color:#ff3030;letter-spacing:4px;
    text-shadow:0 0 18px #ff0000,0 0 44px #6a0000;animation:bbpulse .5s infinite alternate;}
  #devourscene .dv-sub{color:#f0c0c0;font-size:clamp(14px,2.8vw,20px);margin-top:8px;font-style:italic;letter-spacing:2px;}
  #go .stat{font-size:18px;color:#bcd0ff;margin:4px 0;}
  #go .big{font-size:46px;color:var(--gold);text-shadow:0 0 20px var(--gold);font-family:var(--f-data);}
  /* Final-act choice overlay */
  #finale{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 40%,rgba(60,5,30,.55),rgba(5,2,12,.82));}
  .finbox{max-width:600px;margin:0 20px;background:var(--panel);border:2px solid #ff3030;border-radius:20px;
    padding:26px 28px;text-align:center;box-shadow:0 0 40px #ff003088;}
  .finbox h2{margin:0 0 12px;font-size:clamp(24px,5vw,38px);color:#ff5a6e;letter-spacing:2px;
    text-shadow:0 0 16px #ff0000;}
  .finbox p{color:#d7c2e8;line-height:1.7;font-size:15px;margin:0 0 22px;}
  .finbtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
  .finbtns button{flex:1;min-width:220px;padding:16px 18px;font-size:16px;font-weight:bold;cursor:pointer;
    border-radius:14px;border:2px solid;transition:.15s;background:#140a22;color:#fff;}
  #finAttack{border-color:#ff3030;}#finAttack:hover{background:#3a0a14;box-shadow:0 0 20px #ff3030;transform:translateY(-3px);}
  #finSuccumb{border-color:#5dffb0;}#finSuccumb:hover{background:#0a2a1e;box-shadow:0 0 20px #5dffb0;transform:translateY(-3px);}
  #ending{background:radial-gradient(circle at 50% 30%,#1a0726 0%,#05020c 70%);
    overflow:hidden;display:block;}
  #ending h1{color:#ff5a6e;text-shadow:0 0 18px #ff0000,0 0 40px #6a0a6a;}
  .endtext{max-width:680px;margin:6px 24px 18px;color:#d7c2e8;line-height:1.85;font-size:16px;text-align:center;}
  #creditsWrap{position:absolute;inset:0;overflow:hidden;cursor:pointer;}
  #credits{position:absolute;left:0;right:0;top:100%;width:100%;text-align:center;
    padding-bottom:40vh;will-change:transform;}
  #credits.rolling{animation-name:creditsScroll;animation-timing-function:linear;animation-fill-mode:forwards;}
  @keyframes creditsScroll{ to{ transform:translateY(var(--rollDist,-100vh)); } }
  .credit-block{margin:26px auto 0;max-width:520px;}
  .credit-role{color:var(--neon);letter-spacing:4px;font-size:12px;text-transform:uppercase;margin:18px 0 4px;}
  .credit-name{color:#f0e6ff;font-size:18px;font-weight:bold;letter-spacing:1px;}
  .credit-skip{position:absolute;bottom:14px;right:18px;color:#7d6a9a;font-size:12px;letter-spacing:2px;
    z-index:2;pointer-events:none;}
  #endAgain{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;}
  #reflectscene{position:fixed;inset:0;z-index:28;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-end;padding-bottom:14%;pointer-events:auto;background:transparent;}
  #reflectscene .rs-line{max-width:640px;margin:0 24px;text-align:center;font-size:clamp(18px,3.4vw,30px);
    color:#e8d6ff;font-style:italic;letter-spacing:1px;text-shadow:0 0 18px #b06bff,0 0 40px #6a0a6a;}
  #reflectscene .rs-skip{margin-top:22px;color:#7d6a9a;font-size:13px;letter-spacing:3px;}
  @keyframes rsfade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
  #transformscene{position:fixed;left:0;right:0;bottom:9%;z-index:29;text-align:center;pointer-events:none;}
  #transformscene .tx-tag{color:#ff5a6e;letter-spacing:5px;font-size:13px;text-shadow:0 0 12px #ff0000;}
  #transformscene .tx-name{font-size:clamp(30px,7vw,64px);font-weight:bold;color:#fff;letter-spacing:4px;
    text-shadow:0 0 18px #ff2a2a,0 0 44px #6a0a0a;animation:bbpulse .5s infinite alternate;}
  #transformscene .tx-flav{color:#f0c8c8;font-size:clamp(14px,2.8vw,20px);margin-top:8px;font-style:italic;}

  /* ===== Safe-area insets (notch) ===== */
  .top{ top:calc(10px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left));
        right:calc(10px + env(safe-area-inset-right)); }

  /* ===== Touch controls (shown only on touch devices) ===== */
  #touchUI{ position:absolute; inset:0; pointer-events:none; z-index:11; display:none; }
  body.touch #touchUI{ display:block; }
  #joystick{ position:absolute; left:calc(20px + env(safe-area-inset-left));
    bottom:calc(20px + env(safe-area-inset-bottom)); width:124px; height:124px; border-radius:50%;
    background:radial-gradient(circle,#1a2350aa,#0a103088); border:2px solid #3ef0ff66; pointer-events:auto;
    touch-action:none; }
  #joynub{ position:absolute; left:50%; top:50%; width:54px; height:54px; border-radius:50%;
    transform:translate(-50%,-50%); background:radial-gradient(circle,#5fe0ff,#2a7fa8);
    border:2px solid #cfefff; box-shadow:0 0 14px #3ef0ff; }
  #touchbtns{ position:absolute; right:calc(14px + env(safe-area-inset-right));
    bottom:calc(150px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px;
    pointer-events:auto; }
  #touchbtns .tbtn{ width:62px; height:62px; border-radius:50%; font-size:24px; font-weight:bold;
    background:#0c1238dd; border:2px solid #5dffb0; color:#fff; position:relative; touch-action:none;
    display:flex; align-items:center; justify-content:center; }
  #touchbtns .tbtn:active{ transform:scale(.92); }
  #touchbtns .tbtn span{ position:absolute; bottom:2px; right:6px; font-size:12px; color:var(--gold); }
  #tFin{ border-color:#7d4bd0; opacity:.45; }
  #tFin.ready{ border-color:#ff3b3b; opacity:1; box-shadow:0 0 16px #ff3b3b;
    animation:finpulse .6s infinite alternate; }

  /* lift the hero bar above the joystick/buttons on touch devices */
  body.touch #heroHpWrap{ bottom:calc(156px + env(safe-area-inset-bottom)); width:min(64vw,300px); }
  /* ===== Phone-size responsive tweaks ===== */
  @media (max-width:860px){
    .pill{ font-size:12px; padding:6px 10px; } .pill b{ font-size:16px; }
    .basebar{ width:min(46vw,300px); }
    #shop{ width:min(44vw,200px); padding:8px; right:8px; bottom:8px; }
    #shop h3{ font-size:9.5px; } .sbtn{ padding:5px 3px; font-size:9.5px; } .sbtn .tico{ width:28px; height:25px; } .sbtn .ico{ font-size:15px; }
    #modbar{ top:96px; max-width:130px; } #modbar .mod{ font-size:10px; padding:2px 6px; }
    #equipbar{ bottom:170px; max-width:150px; }
    .toast{ font-size:18px; padding:8px 18px; top:96px; }
  }
  /* hide desktop kit buttons on touch — replaced by the touch cluster */
  body.touch #kitbar{ display:none; }
  body.touch .hint .kbd-note{ display:none; }
  body.touch .hint .touch-note{ display:inline !important; }