:root {
    --ink:#0e0820; --panel:#2b1a52; --panel-l:#41297a; --panel-d:#1c1038;
    --gold:#ffcf3a; --gold-d:#c98a12; --gold-l:#fff0a8;
    --green:#2fcf6f; --green-d:#1b9a4f; --green-l:#9af7bd;
    --red:#ff4d5e; --muted:#c9bdf0;
  }
  * { box-sizing:border-box; }
  html,body { margin:0; height:100%; overflow:hidden; background:#8fd0f7; font-family:Rubik, system-ui, sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }
  canvas { display:block; }
  img.ic { image-rendering:pixelated; image-rendering:crisp-edges; display:block; }
  .hidden { display:none !important; }
  .num { font-family:"Russo One", Rubik, sans-serif; font-weight:400; letter-spacing:.5px; }
  .ol { color:#fff; text-shadow:
    3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink),
    2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink), 0 5px var(--ink); }

  /* notched pixel frame: 4px border drawn with orthogonal shadows */
  .px { background:var(--panel); color:#fff;
        box-shadow:0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold), -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold),
                   inset 0 4px 0 0 var(--panel-l), inset 0 -4px 0 0 var(--panel-d), 0 12px 0 0 rgba(0,0,0,.35); }

  .btn { font-family:"Russo One", Rubik, sans-serif; font-size:22px; color:var(--ink); background:var(--gold); border:0; padding:13px 30px; margin:6px; cursor:pointer;
         display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
         box-shadow:0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink),
                    inset -4px -5px 0 0 var(--gold-d), inset 4px 4px 0 0 var(--gold-l), 0 9px 0 0 rgba(0,0,0,.4); }
  .btn:active { transform:translateY(5px);
         box-shadow:0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset 4px 4px 0 0 var(--gold-d), 0 4px 0 0 rgba(0,0,0,.4); }
  .btn.green { background:var(--green); color:#04210f;
         box-shadow:0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset -4px -5px 0 0 var(--green-d), inset 4px 4px 0 0 var(--green-l), 0 9px 0 0 rgba(0,0,0,.4); }
  .btn.ghost { background:var(--panel-l); color:#fff; font-size:16px; padding:10px 16px;
         box-shadow:0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), inset -4px -4px 0 0 var(--panel-d), inset 4px 4px 0 0 #6a4fb0, 0 8px 0 0 rgba(0,0,0,.4); }
  .btn.big { font-size:32px; padding:16px 54px; }
  .btn img.ic { width:22px; }
  .btn:disabled { filter:grayscale(1) brightness(.7); }

  /* ---- HUD ---- */
  #hud { position:fixed; inset:0; pointer-events:none; }
  #topL { position:absolute; top:14px; left:16px; display:flex; flex-direction:column; gap:12px; }
  #nickHud { font-size:18px; font-weight:800; }
  #dist { position:absolute; top:16px; right:18px; font-size:24px; }
  #multCard { position:absolute; top:10px; left:50%; transform:translateX(-50%); text-align:center; }
  #multTxt { font-size:clamp(40px,6vw,64px); color:var(--gold); line-height:1; }
  #multTxt.hot { color:#fff; }
  #betTxt { font-size:16px; font-weight:800; margin-top:6px; }
  #heroBal { position:fixed; left:0; top:0; font-size:clamp(28px,4.4vw,48px); white-space:nowrap; will-change:transform; pointer-events:none; }
  #heroBal .cur { color:var(--gold); font-size:.62em; margin-left:.3em; }
  #heroBal.bump { animation:bump .2s ease-out; }
  @keyframes bump { 50% { transform-origin:center; filter:brightness(1.4); } }
  #boardBtn { position:absolute; left:16px; bottom:26px; pointer-events:auto; }
  .pop { position:fixed; left:0; top:0; font-family:"Russo One", sans-serif; font-size:24px; color:#fff; pointer-events:none; animation:pop .8s ease-out forwards; z-index:5;
         text-shadow:2px 0 #0b4a24,-2px 0 #0b4a24,0 2px #0b4a24,0 -2px #0b4a24,0 4px #0b4a24; }
  .pop.big { font-size:56px; animation-duration:1.2s; }
  .pop.bad { text-shadow:3px 0 #5a0d16,-3px 0 #5a0d16,0 3px #5a0d16,0 -3px #5a0d16,0 6px #5a0d16; color:#ffd0d5; }
  .pop.good { text-shadow:3px 0 #0b4a24,-3px 0 #0b4a24,0 3px #0b4a24,0 -3px #0b4a24,0 6px #0b4a24; color:#d6ffe4; }
  @keyframes pop { from { opacity:1; margin-top:0; } 70% { opacity:1; } to { opacity:0; margin-top:-80px; } }
  #powers { display:flex; flex-direction:column; gap:10px; }
  .pw { display:flex; align-items:center; gap:10px; }
  .pw img.ic { width:30px; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45)); }
  .pw .bar { width:100px; height:14px; background:var(--ink); padding:3px; }
  .pw .bar i { display:block; height:100%; width:100%; }
  .pw b { font-family:"Russo One", sans-serif; font-weight:400; font-size:18px; }
  #flash { position:fixed; inset:0; pointer-events:none; opacity:0; z-index:4; }
  #flash.bust { background:#ff2a3d; animation:flash .9s ease-out; }
  #flash.win { background:#ffcf3a; animation:flash .7s ease-out; }
  @keyframes flash { 0% { opacity:.65; } 100% { opacity:0; } }

  /* ---- overlays ---- */
  .overlay { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding:16px; background:rgba(14,8,32,.62); color:#fff; }
  .title { margin:0; font-size:clamp(54px,12vw,112px); line-height:.9; color:var(--gold);
           text-shadow:0 5px 0 var(--gold-d), 0 10px 0 #9a4a0c, 5px 0 var(--ink), -5px 0 var(--ink), 0 -5px var(--ink),
             5px 5px var(--ink), -5px 5px var(--ink), 5px 10px var(--ink), -5px 10px var(--ink), 0 15px var(--ink), 5px -5px var(--ink), -5px -5px var(--ink); }
  .tagline { margin-top:10px; font-size:clamp(16px,2.4vw,22px); color:#fff; background:var(--red); display:inline-block; padding:4px 14px;
             box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
  .sub { margin:0; font-size:clamp(40px,8vw,64px); }
  .sub.win { color:var(--gold); } .sub.lose { color:var(--red); }
  .bigamt { font-size:clamp(34px,6vw,56px); }
  .card { padding:16px 22px; min-width:300px; text-align:left; }
  .kv { display:flex; justify-content:space-between; gap:24px; font-size:18px; font-weight:700; padding:3px 0; }
  .kv b { font-family:"Russo One", sans-serif; font-weight:400; color:var(--gold); }
  .lbl { font-size:14px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:10px 0 8px; }
  .chips { display:flex; gap:10px; flex-wrap:wrap; }
  .chip { font-family:"Russo One", sans-serif; font-size:17px; color:#fff; background:var(--panel-l); border:0; padding:9px 12px; cursor:pointer; min-width:62px;
          box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -4px 0 0 var(--panel-d); }
  .chip.on { background:var(--gold); color:var(--ink); box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-d); }
  .row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  .msg { min-height:24px; font-weight:800; color:#ffd0d5; font-size:17px; }

  /* deal popup */
  .deal { width:min(480px,100%); padding:24px; text-align:center; }
  .dealTitle { font-size:44px; color:var(--gold); margin-bottom:8px; }
  .dealText { font-size:19px; font-weight:700; line-height:1.4; margin-bottom:14px; }
  .dealText b { font-family:"Russo One", sans-serif; font-weight:400; color:var(--gold); }
  #dealTimer { height:18px; background:var(--ink); padding:3px; margin:2px 0 6px; }
  #dealTimer i { display:block; height:100%; width:100%; background:var(--gold); }
  #dealSec { font-size:30px; color:var(--gold); margin-bottom:6px; }
  #runBar { width:min(240px,40vw); height:12px; margin:8px auto 0; background:var(--ink); padding:3px; }
  #runBar i { display:block; height:100%; width:0; background:var(--gold); }
  #banner { position:fixed; left:50%; top:36%; transform:translate(-50%,-50%); z-index:6; pointer-events:none; white-space:nowrap;
            font-size:clamp(48px,9vw,96px); color:#fff; animation:bannerIn .35s ease-out;
            text-shadow:5px 0 var(--ink), -5px 0 var(--ink), 0 5px var(--ink), 0 -5px var(--ink), 4px 4px var(--ink), -4px 4px var(--ink), 4px -4px var(--ink), -4px -4px var(--ink), 0 9px var(--ink); }
  #banner.bad { color:var(--red); } #banner.good { color:var(--gold); }
  @keyframes bannerIn { from { transform:translate(-50%,-50%) scale(1.7); opacity:0; } }
  .why { font-size:18px; font-weight:700; color:var(--muted); margin-top:-6px; }
  #dealCoin { height:96px; display:flex; justify-content:center; align-items:center; }
  #dealCoin img { width:84px; animation:spin .25s linear infinite; }
  @keyframes spin { 0%,100% { transform:scaleX(1); } 50% { transform:scaleX(.08); } }
  #dealResult { font-size:58px; min-height:10px; }
  #dealResult.good { color:var(--green); } #dealResult.bad { color:var(--red); }

  /* settings */
  .panel { position:relative; width:min(480px,100%); max-height:calc(100% - 30px); overflow:auto; padding:24px 24px 14px; text-align:left; }
  .panel h3 { margin:0 0 12px; text-align:center; font-family:"Russo One", sans-serif; font-weight:400; font-size:36px; color:var(--gold); }
  .close { position:absolute; left:14px; top:14px; width:44px; height:44px; padding:0; margin:0; background:var(--red);
           box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset -3px -3px 0 0 #b3202d, inset 3px 3px 0 0 #ff8a95; }
  .close img.ic { width:18px; }
  .set { display:flex; align-items:center; gap:14px; padding:7px 0; }
  .tile { flex:none; width:54px; height:54px; background:#3a7bd5; display:grid; place-items:center;
          box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset -4px -4px 0 0 #2a5ea8, inset 4px 4px 0 0 #7fb0f0; }
  .tile img.ic { width:34px; }
  .set .txt { flex:1; min-width:0; }
  .set .t { font-size:17px; font-weight:800; margin-bottom:4px; }
  .set input, .set select { width:100%; font:inherit; font-size:17px; font-weight:700; color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:0; padding:4px 8px; outline:none; }
  .set input:focus, .set select:focus { background:#fff7d6; }
  .set .neg { color:#ff9aa5; font-weight:800; font-size:14px; margin-top:3px; }
  .switch { flex:none; width:62px; height:30px; background:#6a5f8a; position:relative; cursor:pointer;
            box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink); }
  .switch::after { content:""; position:absolute; top:4px; left:4px; width:22px; height:22px; background:#fff; box-shadow:inset -3px -3px 0 0 #c9c2ae; }
  .switch.on { background:var(--green); }
  .switch.on::after { left:36px; }
  .hint { font-size:13px; font-weight:600; color:var(--muted); line-height:1.5; margin-top:10px; }
  .ver { text-align:right; font-size:12px; color:#8a7fb0; margin-top:6px; }

  /* start screen */
  .screen { position:fixed; inset:0; z-index:10; pointer-events:none; color:#fff; }
  .screen > * { pointer-events:auto; }
  .screen .logo { position:absolute; top:18px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; white-space:nowrap; }
  .screen .title { font-size:clamp(40px,7.5vw,84px); }
  .corner { position:absolute; top:18px; right:18px; width:58px; height:58px; padding:0; margin:0; }
  .corner img.ic { width:30px; }
  .screen .msg { position:absolute; left:50%; bottom:128px; transform:translateX(-50%); white-space:nowrap; pointer-events:none;
                 font-family:"Russo One", Rubik, sans-serif; font-weight:400; font-size:clamp(22px,3.4vw,32px); }
  .bottombar { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:min(760px, calc(100% - 32px));
               display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; }
  .bottombar .cell { display:flex; flex-direction:column; gap:4px; min-width:0; }
  .bottombar .lbl { margin:0; }
  .bottombar .val { font-size:clamp(20px,3.2vw,28px); color:var(--gold); white-space:nowrap; }
  .bottombar .btn.big { margin:0; font-size:clamp(22px,3.4vw,32px); padding:14px clamp(20px,4vw,48px); }
  .stepper { display:flex; align-items:center; gap:10px; }
  .step { width:40px; height:40px; font-size:26px; line-height:1; color:#fff; background:var(--panel-l); border:0; cursor:pointer;
          box-shadow:0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -4px 0 0 var(--panel-d); }
  .step:active { transform:translateY(2px); }
  .stepper .val { min-width:84px; text-align:center; }
  @media (max-width:560px) {
    .bottombar { flex-wrap:wrap; justify-content:center; }
    .bottombar .btn.big { width:100%; }
    .screen .msg { bottom:200px; }
  }