:root{
    --bg:#101013; --card:#1A191E; --ink:#e9e9ee; --dim:#9a9aa3;
    --green:#59DF76; --red:#DF5959; --grey:#D9D9D9; --btn:#8B8B8B; --btnDark:#28272D; --ghost:#393645; --ghost2:#303030;
    box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
  body{min-height:100vh;display:grid;place-items:center;padding:16px;}
  .wrap{width:100%;max-width:560px;container-type:inline-size;}

  /* critical fix: [hidden] must always win over any display:* rule below */
  [hidden]{display:none !important;}

  .stage{--u:calc(100cqw / 348); position:relative; width:100%; aspect-ratio:348/236;}
  .card{position:absolute;left:0;top:calc(var(--u)*11);width:100%;height:calc(var(--u)*225);background:var(--card);border-radius:calc(var(--u)*8);overflow:hidden;}
  .stage.alarm .card{animation:flash .6s steps(2) infinite;}
  @keyframes flash{0%{background:#3a0f12;}100%{background:var(--card);}}

  .abs{position:absolute;}

  .titlewrap{left:0;top:calc(var(--u)*4);width:100%;display:flex;align-items:baseline;justify-content:center;gap:calc(var(--u)*7);}
  .title{margin:0;font-weight:800;font-size:calc(var(--u)*31.05);color:var(--ghost);white-space:nowrap;user-select:none;}
  .mf{font-family:Pacifico,cursive;font-weight:400;font-size:43.2px;color:var(--ghost);line-height:1;position:relative;top:3px;}
  .copy{left:calc(var(--u)*16);top:calc(var(--u)*35 + 8px);font-size:calc(var(--u)*6);color:var(--ghost2);white-space:nowrap;display:flex;align-items:center;gap:4px;}
  .copy a{display:inline-flex;color:var(--ghost2);opacity:.85;}
  .copy a:hover{opacity:1;}
  .copy svg{width:calc(var(--u)*7);height:calc(var(--u)*7);display:block;}

  .tnowlbl{left:calc(var(--u)*129);top:calc(var(--u)*60);width:calc(var(--u)*93);text-align:center;font-size:calc(var(--u)*9);color:#cfcfd6;}
  .display{left:calc(var(--u)*129);top:calc(var(--u)*81);width:calc(var(--u)*93);height:calc(var(--u)*39);background:var(--grey);color:#202024;display:grid;place-items:center;font-family:VT323,"Courier New",monospace;font-size:calc(var(--u)*34);line-height:1;}

  svg.meter{position:absolute;left:0;top:calc(var(--u)*11);width:100%;height:calc(var(--u)*225);}
  .meter .outer{fill:var(--green);}
  .meter .cut{fill:var(--card);}
  .meter .progfill{fill:var(--red);}

  .pillcol{width:calc(var(--u)*45);}
  .pillcol.loss{left:calc(var(--u)*77);top:calc(var(--u)*100);}
  .pillcol.fees{left:calc(var(--u)*229);top:calc(var(--u)*100);}
  .plbl{position:absolute;left:0;width:100%;top:calc(var(--u)*-11);text-align:center;font-size:calc(ver(--u)*7);color:#cfcfd6;}
  .pillbox{width:100%;height:calc(var(--u)*20);background:var(--grey);display:flex;align-items:center;justify-content:center;gap:3px;padding:0 4px;}
  .pillcol.loss .pillbox{border-radius:0 0 0 calc(var(--u)*18);}
  .pillcol.fees .pillbox{border-radius:0 0 calc(var(--u)*18) 0;}
  .pill{width:100%;min-width:0;border:0;background:transparent;color:#202024;font:600 calc(var(--u)*7.5) Inter,sans-serif;padding:0;text-align:center;-moz-appearance:textfield;}
  .pill::-webkit-outer-spin-button,.pill::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .pill::placeholder{color:#202024;opacity:.5;}
  .pillsuffix{flex:0 0 auto;font:700 calc(var(--u)*7) Inter,sans-serif;color:#55555d;white-space:nowrap;margin-right:calc(var(--u)*5);}
  .pillsuffix.hit{color:#8a1c2c;}

  .info{left:calc(var(--u)*229);top:calc(var(--u)*144);width:calc(var(--u)*20);height:calc(var(--u)*17);border:0;border-radius:0;background:var(--ghost);color:#fff;font-weight:800;font-size:calc(var(--u)*10);cursor:pointer;display:grid;place-items:center;}
  .info:focus-visible,.circle:focus-visible,.pill:focus-visible{outline:2px solid #fff;outline-offset:2px;}

  .circle{border:0;border-radius:50%;cursor:pointer;color:#fff;font:700 calc(var(--u)*10) Inter,sans-serif;display:grid;place-items:center;user-select:none;-webkit-user-select:none;}
  #stop{left:calc(var(--u)*71.1);top:calc(var(--u)*162.1);width:calc(var(--u)*46.8);height:calc(var(--u)*46.8);background:var(--btnDark);}
  #stopR{left:calc(var(--u)*229.1);top:calc(var(--u)*162.1);width:calc(var(--u)*46.8);height:calc(var(--u)*46.8);background:var(--btn);}
  #trade{left:calc(var(--u)*146);top:calc(var(--u)*156);width:calc(var(--u)*55);height:calc(var(--u)*55);background:var(--green);color:#06210d;font-size:calc(var(--u)*11);transition:transform .08s;}
  #trade:active{transform:scale(.94);}
  #trade.dead{background:#1c1c22;color:#55555f;cursor:default;pointer-events:none;}
  .denied{animation:shake .4s;}
  @keyframes shake{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
  .holding{box-shadow:0 0 0 3px #fff inset;}

  .dualtxt{left:calc(var(--u)*117.9);width:calc(var(--u)*111.2);top:calc(var(--u)*162.1);text-align:center;font-size:calc(var(--u)*6);line-height:1.7;}
  .dualtxt .segred{color:var(--red);}
  .dualtxt .segbtn{color:var(--btn);}
  .dualtxt .segbtn.progress{color:#ffce54;font-weight:800;}

  .banner{left:0;right:0;top:calc(var(--u)*214);text-align:center;font-size:calc(var(--u)*9);font-weight:800;color:var(--red);min-height:1.2em;}
  .lastone{color:#ffce54 !important;}

  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px;z-index:10;}
  .overlay[hidden]{display:none !important;}
  .modal{position:relative;width:100%;max-width:360px;background:#1c1c21;border-radius:16px;padding:26px 22px;box-shadow:0 0 0 1px #2c2c33;text-align:center;}
  .modal h2{margin:0 0 6px;font-size:21px;font-weight:800;}
  .modal p.sub{margin:0 0 18px;color:var(--dim);font-size:13.5px;line-height:1.4;}
  .modal .close{position:absolute;top:10px;right:12px;background:none;border:0;color:#8a8a93;font-size:18px;cursor:pointer;}

  .setup-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:left;margin-bottom:6px;}
  .setup-grid label{font-size:12px;color:#d6d6dc;display:block;}
  .setup-grid input{display:block;width:100%;margin-top:6px;height:38px;border-radius:7px;border:1px solid #34343d;background:#101013;color:var(--ink);font-size:15px;padding:0 8px;appearance:auto;}
  .err{color:#ff8a8a;font-size:12.5px;min-height:16px;margin:8px 0 0;}
  .go{margin-top:16px;width:100%;height:46px;border:0;border-radius:10px;background:var(--green);color:#06210d;font-weight:800;font-size:16px;cursor:pointer;}

  .choice-row{display:flex;gap:14px;justify-content:center;margin-top:18px;}
  .choice{width:84px;height:84px;border-radius:50%;border:0;background:var(--btn);color:#fff;font-weight:700;font-size:15px;cursor:pointer;}
  .choice:hover{filter:brightness(1.12);}

  .sign{margin-top:18px;font-family:Pacifico,cursive;font-size:17px;color:#cfcfd6;}

  @media (prefers-reduced-motion:reduce){.stage.alarm .card{animation:none;background:#3a0f12;}#trade{transition:none;}}