:root{
    --obsidian:#171310; --panel:#221b15; --line:#3a322b;
    --bone:#ece0cd; --bone-dim:#a3968a;
    --ember:#ff7a2f; --ember-hot:#ffc169; --ember-deep:#8a2f0a;
    --heal:#9be07a; --pierce:#ffd166; --boost:#d3a2ff;
    --gold:#f0c75e; --danger:#ff5252;
    /* theme accents (frost default) */
    --foe-line:#2c4a54; --foe-bg1:#1d2a30; --foe-bg2:#141b1f;
    --foe-emb1:#274953; --foe-emb2:#10222a; --foe-embline:#38626f;
    --foe-glow:#6fd8e8; --foe-pale:#d3f4fa;
  }
  body[data-th="poison"]{ --foe-line:#2c5434; --foe-bg1:#1c2e1e; --foe-bg2:#121b13; --foe-emb1:#28502c; --foe-emb2:#0f1f11; --foe-embline:#3c7042; --foe-glow:#8fe07a; --foe-pale:#dcf7d3; }
  body[data-th="fire"]{ --foe-line:#5c3220; --foe-bg1:#301d16; --foe-bg2:#1e120d; --foe-emb1:#57291a; --foe-emb2:#22100a; --foe-embline:#7c412a; --foe-glow:#ff9d5e; --foe-pale:#ffe3cf; }
  body[data-th="earth"]{ --foe-line:#54492c; --foe-bg1:#2c2718; --foe-bg2:#1b1810; --foe-emb1:#4d4226; --foe-emb2:#201b10; --foe-embline:#6d5f38; --foe-glow:#d8bd6f; --foe-pale:#f2e8cd; }
  body[data-th="air"]{ --foe-line:#484461; --foe-bg1:#25243a; --foe-bg2:#161525; --foe-emb1:#403d63; --foe-emb2:#181630; --foe-embline:#5c5887; --foe-glow:#b7aef5; --foe-pale:#e9e5ff; }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;}
  html,body{height:100%;}
  body{
    margin:0;
    background:radial-gradient(120% 90% at 50% -10%, #2a2019 0%, var(--obsidian) 55%, #0d0b09 100%);
    color:var(--bone);
    font-family:"Atkinson Hyperlegible", system-ui, sans-serif;
    overflow:hidden; touch-action:manipulation;
    user-select:none; -webkit-user-select:none;
  }
  #app{
    height:100dvh; display:flex; flex-direction:column;
    max-width:520px; margin:0 auto;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
    position:relative; z-index:1;
  }
  #fx{position:fixed; inset:0; z-index:0; pointer-events:none;}
  #flash{position:fixed; inset:0; pointer-events:none; z-index:15; opacity:0;
    background:radial-gradient(120% 100% at 50% 100%, rgba(255,60,40,.3), transparent 60%);}
  #flash.on{animation:flashout .4s;}
  @keyframes flashout{0%{opacity:1;}100%{opacity:0;}}

  header{display:flex; align-items:center; justify-content:space-between; padding:9px 14px 4px; gap:8px;}
  .wordmark{font-family:"Unbounded",sans-serif; font-weight:900; font-size:12px; letter-spacing:.05em; white-space:nowrap;}
  .wordmark .c{color:var(--ember);} .wordmark .r{color:var(--foe-glow);} .wordmark .amp,.wordmark .ii{color:var(--bone-dim); font-weight:500;}
  .hdr-right{display:flex; gap:6px; align-items:center;}
  .goldchip{
    display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--gold);
    border:1px solid #5c4a1e; background:rgba(60,45,12,.35); border-radius:999px; padding:3px 9px;
  }
  .relic-slot{
    width:26px;height:26px; border-radius:8px; border:1px dashed var(--line); background:rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .relic-slot.full{border-style:solid; border-color:#6b5320; background:rgba(255,209,102,.08); color:var(--pierce);}
  button.icon-btn{background:rgba(0,0,0,.25); border:1px solid var(--line); color:var(--bone); border-radius:999px; width:28px;height:28px; font-size:13px; cursor:pointer;}

  #strip{display:flex; justify-content:center; align-items:center; gap:6px; padding:4px 14px 7px; cursor:pointer;}
  .sdot{width:9px;height:9px; border-radius:50%; background:#2c2620; border:1px solid var(--line); transition:all .3s;}
  .sdot.major{border-radius:2px; transform:rotate(45deg);}
  .sdot.boss{width:12px;height:12px; border-radius:3px; transform:rotate(45deg);}
  .sdot.done{background:var(--ember-deep); border-color:var(--ember-deep);}
  .sdot.now{background:var(--ember); border-color:var(--ember-hot); box-shadow:0 0 10px rgba(255,122,47,.7);}
  #strip .maptag{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); font-weight:700; margin-left:4px;}

  #enemy-zone{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:4px 12px; flex-wrap:wrap;}
  .enemy{
    background:linear-gradient(180deg, var(--foe-bg1), var(--foe-bg2));
    border:1px solid var(--foe-line); border-radius:14px;
    padding:10px 10px 9px; width:130px;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    transition:transform .12s, box-shadow .2s, opacity .3s; position:relative;
  }
  .enemy.targetable{border-color:var(--ember); box-shadow:0 0 16px rgba(255,122,47,.35); cursor:pointer; animation:tpulse 1.1s infinite;}
  @keyframes tpulse{50%{box-shadow:0 0 24px rgba(255,122,47,.6);}}
  .enemy.hit{animation:shake .3s;}
  @keyframes shake{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
  .enemy.dead{opacity:0; transform:scale(.6) rotate(6deg); filter:blur(6px); pointer-events:none;
    transition:opacity .5s, transform .5s, filter .5s;}
  .foewrap{width:68px; height:68px; display:flex; align-items:center; justify-content:center;}
  .enemy.boss{width:150px;}
  .enemy.boss .foewrap{width:84px; height:84px;}
  .enemy .foe{width:100%; height:100%; overflow:visible; animation:idle 2.8s ease-in-out infinite;}
  .enemy:nth-child(2n) .foe{animation-delay:-1.4s;}
  .enemy.boss .foe{animation-duration:3.6s;}
  .foe .bd{fill:url(#foeBody); stroke:var(--foe-embline); stroke-width:1.6;}
  .foe .hood{fill:rgba(0,0,0,.45);}
  .foe .maw{fill:#0b0d10; stroke:var(--foe-embline);}
  .foe .teeth{stroke:var(--foe-pale); stroke-width:1.7; fill:none; stroke-linecap:round;}
  .foe .ln{stroke:var(--foe-pale); stroke-width:1.8; fill:none; stroke-linecap:round; opacity:.7;}
  .foe .ac{fill:var(--foe-glow); opacity:.85;}
  .foe .ac2{fill:var(--foe-glow); opacity:.6;}
  .foe .shield{fill:rgba(0,0,0,.35); stroke:var(--foe-pale); stroke-width:1.6;}
  .foe .staff{stroke:var(--foe-pale); stroke-width:2.4; stroke-linecap:round;}
  .foe .crown{fill:var(--foe-glow); opacity:.92;}
  .foe .eye{fill:var(--foe-glow); filter:drop-shadow(0 0 4px var(--foe-glow)); animation:eyepulse 2.4s ease-in-out infinite;}
  .foe .gem{animation:eyepulse 1.5s ease-in-out infinite;}
  .foe .aura{fill:none; stroke:var(--foe-glow); stroke-width:1.5; opacity:.28; transform-origin:center; animation:aurapulse 2.8s ease-in-out infinite;}
  .foe .frag{transform-origin:center; animation:idle 2.2s ease-in-out infinite;}
  .foe .f2{animation-delay:-.7s;} .foe .f3{animation-delay:-1.5s;}
  .enemy.elite .foewrap{filter:drop-shadow(0 0 9px rgba(255,209,102,.35));}
  @keyframes idle{50%{transform:translateY(-2.5px);}}
  @keyframes eyepulse{50%{opacity:.5;}}
  @keyframes aurapulse{50%{opacity:.5; transform:scale(1.06);}}
  .enemy.hit .foe{animation:hitflash .32s;}
  @keyframes hitflash{30%{filter:brightness(2.4) saturate(.4);}}
  .enemy.lunge .foe{animation:lungeanim .34s ease-in;}
  @keyframes lungeanim{45%{transform:translateY(7px) scale(1.08);}}
  .enemy .ename{font-family:"Unbounded",sans-serif; font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--foe-pale); text-align:center;}
  .hpbar{width:100%; height:8px; border-radius:99px; background:rgba(0,0,0,.5); border:1px solid var(--foe-line); overflow:hidden;}
  .hpbar > i{display:block; height:100%; background:linear-gradient(90deg, var(--foe-glow), var(--foe-pale)); transition:width .3s; border-radius:99px; opacity:.85;}
  .enemy .hptxt{font-size:10.5px; color:var(--bone-dim);}
  .enemy .hptxt b{color:var(--foe-pale);}
  .badges{display:flex; gap:4px; min-height:16px; flex-wrap:wrap; justify-content:center;}
  .badge{font-size:10px; font-weight:700; padding:1px 7px; border-radius:99px; border:1px solid var(--line); background:rgba(0,0,0,.3);}
  .badge.blk{color:#bcd3e6; border-color:#41586b;}
  .badge.dot{color:var(--heal); border-color:#3c5a34;}
  .badge.stun{color:var(--pierce); border-color:#6b5320;}
  .intent{display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; background:rgba(0,0,0,.4); border:1px solid var(--line); min-height:22px;}
  .intent.atk{color:#ff9d7a; border-color:#6b3a2a;}
  .intent.blk{color:#bcd3e6; border-color:#41586b;}
  .intent.sig{color:var(--foe-glow); border-color:var(--foe-embline);}
  .intent.crs{color:var(--boost); border-color:#4d3a63;}
  .intent.stunned{color:var(--pierce); border-color:#6b5320;}
  .intent .big{font-size:13px;}
  .intent svg{width:12px;height:12px;}
  .float-num{
    position:absolute; left:50%; top:20%; transform:translateX(-50%);
    font-family:"Unbounded",sans-serif; font-weight:900; font-size:20px;
    pointer-events:none; animation:floatup .8s forwards; text-shadow:0 2px 8px rgba(0,0,0,.8); z-index:5;
  }
  @keyframes floatup{to{transform:translate(-50%,-34px); opacity:0;}}
  .float-num.big{font-size:28px;}

  #log{text-align:center; font-size:12px; color:var(--bone-dim); min-height:18px; padding:0 16px 4px;}
  #log b{color:var(--bone);}

  #player-zone{
    background:linear-gradient(180deg, var(--panel), #191410);
    border-top:1px solid var(--line);
    padding:9px 14px calc(10px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:8px;
  }
  .pstats{display:flex; align-items:center; gap:8px;}
  .pstats .pname{font-family:"Unbounded",sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--ember-hot); text-transform:uppercase;}
  .php-wrap{flex:1; display:flex; align-items:center; gap:8px;}
  .php{flex:1; height:12px; border-radius:99px; background:#0f0a07; border:1px solid #4a2c18; overflow:hidden;}
  .php > i{display:block;height:100%; background:linear-gradient(90deg,var(--ember-deep),var(--ember),var(--ember-hot)); transition:width .3s; border-radius:99px;}
  .php-txt{font-size:12px; font-weight:700; min-width:52px; text-align:right;}
  .pchip{font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:99px; display:flex; align-items:center; gap:4px; border:1px solid #41586b; color:#bcd3e6; background:rgba(30,45,58,.5);}
  .pchip svg{width:11px;height:11px;}
  .pchip.zero{opacity:.35;}
  .pchip.dot{color:var(--heal); border-color:#3c5a34; background:rgba(30,58,34,.4);}

  #tray{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; min-height:66px; perspective:700px;}
  .die{
    width:62px; height:62px; border-radius:13px;
    cursor:pointer; position:relative;
    transition:transform .12s, box-shadow .15s, opacity .2s;
    box-shadow:0 4px 10px rgba(0,0,0,.45);
    transform-style:preserve-3d;
  }
  .cube{position:absolute; inset:0; transform-style:preserve-3d;}
  .cface{
    position:absolute; inset:0; border-radius:13px;
    background:linear-gradient(160deg,#3b3129,#241d17);
    border:1.5px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
  }
  .die .fval{font-family:"Unbounded",sans-serif; font-weight:900; font-size:19px; line-height:1;}
  .die .ficon{width:16px;height:16px;}
  .die .fname{font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); font-weight:700;}
  .die.rolling{animation:dicedrop .7s cubic-bezier(.3,.75,.3,1.05) both;}
  @keyframes dicedrop{
    0%{transform:translateY(-48px) scale(.72); opacity:0;}
    40%{opacity:1;}
    72%{transform:translateY(4px) scale(1.04);}
    88%{transform:translateY(-2px) scale(.98);}
    100%{transform:translateY(0) scale(1);}
  }
  .die.used{opacity:.28; box-shadow:none; transform:scale(.92); cursor:default;}
  .die.sel{border-color:var(--ember-hot); box-shadow:0 0 16px rgba(255,193,105,.5), 0 3px 0 #0d0a08; transform:translateY(-4px);}
  .die.boost-target{border-color:var(--boost) !important; box-shadow:0 0 14px rgba(211,162,255,.5), 0 3px 0 #0d0a08; animation:tpulse2 1s infinite; cursor:pointer;}
  .die.used.boost-target{opacity:.75;}
  @keyframes tpulse2{50%{box-shadow:0 0 22px rgba(211,162,255,.75), 0 3px 0 #0d0a08;}}
  .die.frozen .cface{background:linear-gradient(160deg,#274953,#132229); border-color:#6fd8e8;}
  .die.frozen::after{
    content:"❄"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#d3f4fa; background:rgba(111,216,232,.14); border-radius:12px; text-shadow:0 0 12px rgba(111,216,232,.9);
    transform:translateZ(34px);
  }
  .die.stunned .cface{background:linear-gradient(160deg,#4d4226,#201b10); border-color:#d8bd6f;}
  .die.stunned::after{
    content:"◎"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#f2e8cd; background:rgba(216,189,111,.12); border-radius:12px;
    transform:translateZ(34px);
  }
  .die.confused .cface{background:linear-gradient(160deg,#403d63,#181630); border-color:#b7aef5;}
  .die.cursed .cface{background:linear-gradient(160deg,#2e2638,#1b1622); border-color:#4d3a63;}
  .die.boosted::before{
    content:"+"; position:absolute; top:-6px; right:-4px; width:16px;height:16px; border-radius:50%;
    background:var(--boost); color:#221533; font-weight:900; font-size:12px; line-height:16px; text-align:center;
    transform:translateZ(36px); z-index:2;
  }
  .fc-atk{color:var(--ember);} .fc-shd{color:#bcd3e6;} .fc-heal{color:var(--heal);}
  .fc-pier{color:var(--pierce);} .fc-mult{color:#ff8f5e;} .fc-stk{color:var(--ember-hot);} .fc-bst{color:var(--boost);}
  .fc-ice{color:#8fa8b8;} .fc-bite{color:#c99be0;}
  .fc-frze{color:#6fd8e8;} .fc-psn{color:#8fe07a;} .fc-brne{color:#ff8f5e;} .fc-sndr{color:#d8bd6f;} .fc-gale{color:#b7aef5;}
  .fc-unknown{color:#b7aef5;}

  .controls{display:flex; gap:8px; align-items:stretch;}
  #stoke-btn{
    flex:1; font-family:"Unbounded",sans-serif; font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    background:rgba(255,122,47,.1); color:var(--ember-hot);
    border:1px solid var(--ember-deep); border-radius:11px; padding:11px 6px; cursor:pointer; transition:all .15s;
  }
  #stoke-btn.arm{background:rgba(255,122,47,.28); box-shadow:0 0 14px rgba(255,122,47,.35) inset; border-color:var(--ember);}
  #stoke-btn:disabled{opacity:.35; pointer-events:none;}
  #end-turn{
    flex:1.3; font-family:"Unbounded",sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:#1b0d04; background:linear-gradient(180deg,var(--ember-hot),var(--ember));
    border:none; border-radius:11px; padding:11px 6px; cursor:pointer;
    box-shadow:0 4px 14px rgba(255,122,47,.35), inset 0 1px 0 rgba(255,255,255,.4);
  }
  #end-turn:active{transform:scale(.97);}
  #end-turn:disabled{opacity:.35; pointer-events:none;}

  .overlay{
    position:fixed; inset:0; background:rgba(9,7,6,.92); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; z-index:20; padding:16px;
  }
  .overlay.hidden{display:none;}
  .panel{
    width:100%; max-width:430px;
    background:linear-gradient(180deg,#241c16,#171310);
    border:1px solid var(--line); border-radius:18px;
    padding:22px 18px 18px;
    box-shadow:0 24px 80px rgba(0,0,0,.7);
    max-height:calc(100dvh - 32px); overflow-y:auto;
  }
  .panel h1{font-family:"Unbounded",sans-serif; font-weight:900; font-size:clamp(21px,6.2vw,28px); margin:0 0 2px; line-height:1.1;}
  .panel h1 .c{color:var(--ember); text-shadow:0 0 24px rgba(255,122,47,.4);}
  .panel h1 .r{color:#6fd8e8; text-shadow:0 0 24px rgba(111,216,232,.35);}
  .panel h1 .amp{color:var(--bone-dim); font-weight:500;}
  .tagline{margin:0 0 14px; color:var(--bone-dim); font-style:italic; font-size:13px;}
  .rules{margin:0 0 16px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px;}
  .rules li{display:flex; gap:10px; font-size:12.5px; line-height:1.42;}
  .rules .glyph{flex:0 0 22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; background:rgba(255,122,47,.12); border:1px solid rgba(255,122,47,.3);}
  .rules li:nth-child(even) .glyph{background:rgba(111,216,232,.1); border-color:rgba(111,216,232,.3);}
  .primary-btn{
    width:100%; font-family:"Unbounded",sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
    color:#1b0d04; background:linear-gradient(180deg,var(--ember-hot),var(--ember));
    border:none; border-radius:12px; padding:14px; cursor:pointer;
    box-shadow:0 6px 22px rgba(255,122,47,.4), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .primary-btn:active{transform:scale(.98);}
  .primary-btn:disabled{opacity:.35; pointer-events:none;}
  .primary-btn.frosted{color:#04222a; background:linear-gradient(180deg,#d3f4fa,#6fd8e8); box-shadow:0 6px 22px rgba(111,216,232,.35), inset 0 1px 0 rgba(255,255,255,.5);}
  .ghost-btn{
    width:100%; margin-top:8px; background:transparent; border:1px solid var(--line); color:var(--bone-dim);
    border-radius:12px; padding:11px; cursor:pointer; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  }
  .reward-h{font-family:"Unbounded",sans-serif; font-weight:700; font-size:15px; margin:0 0 4px; color:var(--ember-hot);}
  .reward-sub{margin:0 0 12px; font-size:12.5px; color:var(--bone-dim); line-height:1.4;}
  .reward-sub b{color:var(--bone);}
  .rcards{display:flex; flex-direction:column; gap:8px; margin-bottom:6px;}
  .rcard{
    border:1px solid var(--line); background:rgba(0,0,0,.28); border-radius:13px;
    padding:10px 12px; cursor:pointer; transition:border-color .15s, background .15s;
  }
  .rcard:active{background:rgba(255,122,47,.08);}
  .rcard.rare{border-color:#6b5320; background:linear-gradient(180deg, rgba(255,209,102,.07), rgba(0,0,0,.28));}
  .rcard.leg{border-color:#7a5abf; background:linear-gradient(180deg, rgba(183,174,245,.1), rgba(0,0,0,.28)); box-shadow:0 0 18px rgba(183,174,245,.15);}
  .rcard.disabled{opacity:.4; pointer-events:none;}
  .rcard .rc-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; gap:8px;}
  .rcard .rc-name{font-family:"Unbounded",sans-serif; font-size:11px; font-weight:700; letter-spacing:.05em;}
  .rcard .rc-kind{font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--bone-dim); font-weight:700; white-space:nowrap;}
  .rcard.rare .rc-kind{color:var(--pierce);}
  .rcard.leg .rc-kind{color:#b7aef5;}
  .rcard .rc-desc{font-size:11.5px; color:var(--bone-dim); line-height:1.4;}
  .rcard .rc-desc b{color:var(--bone);}
  .facerow{display:flex; gap:4px; margin-top:6px; flex-wrap:wrap;}
  .facechip{
    display:flex; align-items:center; gap:3px; font-size:10px; font-weight:700;
    border:1px solid var(--line); border-radius:6px; padding:2px 6px; background:rgba(0,0,0,.3);
  }
  .facechip svg{width:10px;height:10px;}

  /* big slot-picker grid */
  .slotgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:8px 0 12px;}
  .slotchip{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    border:1.5px solid var(--line); border-radius:13px; padding:13px 4px 11px;
    background:rgba(0,0,0,.3); cursor:pointer; transition:all .15s;
    font-weight:700; font-size:12px;
  }
  .slotchip svg{width:20px;height:20px;}
  .slotchip .slotv{font-family:"Unbounded",sans-serif; font-size:15px; font-weight:900;}
  .slotchip.selbig{
    border-color:var(--ember-hot); background:rgba(255,122,47,.12);
    transform:scale(1.08); box-shadow:0 0 18px rgba(255,193,105,.4);
  }
  .swapline{display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; margin:2px 0 10px; min-height:24px; color:var(--bone-dim);}
  .swapline .facechip{font-size:11px;}

  .deck-list{display:flex; flex-direction:column; gap:8px; margin:4px 0 8px;}
  .deck-item{border:1px solid var(--line); border-radius:12px; padding:9px 11px; cursor:pointer; background:rgba(0,0,0,.25);}
  .deck-item:active{border-color:var(--ember);}
  .deck-item.disabled{opacity:.4; pointer-events:none;}
  .deck-item .rc-name{font-family:"Unbounded",sans-serif; font-size:11px; font-weight:700;}

  /* map */
  #map-status{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    border:1px solid var(--line); background:rgba(0,0,0,.28); border-radius:11px;
    padding:8px 10px; margin:0 0 10px; font-size:12px; font-weight:700;
  }
  #map-status .ms-hp{color:var(--ember-hot);}
  #map-status .ms-gold{color:var(--gold);}
  #map-status .ms-relic{color:var(--pierce);}
  #map-status .ms-dice{color:var(--bone-dim);}
  #map-status svg{width:12px;height:12px; vertical-align:-2px;}
  .map-rows{display:flex; flex-direction:column-reverse; gap:6px; margin:6px 0 10px;}
  .map-row{display:flex; justify-content:center; gap:14px; position:relative;}
  .mnode{
    width:64px; padding:7px 4px 5px; border-radius:12px;
    border:1px solid var(--line); background:rgba(0,0,0,.28);
    display:flex; flex-direction:column; align-items:center; gap:2px; opacity:.55;
  }
  .mnode svg{width:18px;height:18px;}
  .mnode .mlabel{font-size:8px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--bone-dim);}
  .mnode.done{opacity:.9; border-color:var(--ember-deep); background:rgba(138,47,10,.15);}
  .mnode.next{opacity:1; border-color:var(--ember); cursor:pointer; animation:tpulse 1.2s infinite;}
  .mnode.current{opacity:1; border-color:var(--ember-hot); box-shadow:0 0 12px rgba(255,193,105,.4);}
  .mnode.t-major, .mnode.t-boss{border-style:double; border-width:3px;}
  .rowtag{position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:9px; color:#5f544a; font-weight:700;}

  /* peek + face tooltip */
  #peek, #facetip{
    position:fixed; left:50%; bottom:0; transform:translate(-50%, 105%);
    width:min(96vw, 440px);
    background:linear-gradient(180deg,#2a211a,#1b1510);
    border:1px solid var(--line); border-bottom:none; border-radius:16px 16px 0 0;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    z-index:60; transition:transform .2s;
    box-shadow:0 -12px 40px rgba(0,0,0,.6);
  }
  #peek.show, #facetip.show{transform:translate(-50%, 0);}
  #peek .rc-name{font-family:"Unbounded",sans-serif; font-size:12px; font-weight:700; margin-bottom:2px;}
  #peek .peek-sub{font-size:10.5px; color:var(--bone-dim); margin-bottom:8px;}
  #peek .facerow .facechip{font-size:12px; padding:5px 9px;}
  #peek .facerow .facechip svg{width:13px;height:13px;}
  #facetip .ft-name{font-family:"Unbounded",sans-serif; font-size:13px; font-weight:700; margin-bottom:3px;}
  #facetip .ft-desc{font-size:12.5px; color:var(--bone-dim); line-height:1.45;}

  .gdice-row{display:flex; gap:8px; justify-content:center; margin:6px 0 8px;}
  .gdice{
    width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    font-family:"Unbounded",sans-serif;font-weight:900;font-size:20px;color:var(--ember-hot);
    background:linear-gradient(160deg,#3b3129,#241d17);border:1.5px solid var(--line);
    box-shadow:0 3px 0 #0d0a08;
  }
  .gdice.one{color:var(--danger);border-color:#6b2a2a;}

  .setrow{display:flex; align-items:center; gap:12px; margin:14px 0;}
  .setrow label{flex:1; font-size:13px; font-weight:700;}
  .setrow input[type=range]{flex:1.1; accent-color:var(--ember); min-width:110px;}
  .switch{width:46px; height:25px; border-radius:99px; background:#332b24; position:relative; cursor:pointer;
    border:1px solid var(--line); transition:background .2s, border-color .2s; flex:none;}
  .switch::after{content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
    background:var(--bone-dim); transition:left .2s, background .2s;}
  .switch.on{background:var(--ember-deep); border-color:var(--ember);}
  .switch.on::after{left:23px; background:var(--ember-hot);}

  .end-title{font-family:"Unbounded",sans-serif; font-weight:900; font-size:23px; margin:0 0 6px;}
  .end-title.win{color:var(--ember-hot); text-shadow:0 0 30px rgba(255,122,47,.5);}
  .end-title.lose{color:#6fd8e8; text-shadow:0 0 30px rgba(111,216,232,.45);}
  .end-sub{margin:0 0 16px; color:var(--bone-dim); font-size:13px; line-height:1.5;}
  .end-stats{display:flex; gap:8px; margin:0 0 16px;}
  .stat-box{flex:1; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:10px; padding:9px 4px; text-align:center;}
  .stat-box .v{font-family:"Unbounded",sans-serif; font-weight:700; font-size:15px;}
  .stat-box .k{font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin-top:2px;}

  .php.low i{animation:lowpulse .9s ease-in-out infinite;}
  @keyframes lowpulse{50%{filter:brightness(1.7);}}
  .map-rows{position:relative;}
  .map-rows::before{content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px; margin-left:-1px;
    background:repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 13px); opacity:.55;}
  .mnode{position:relative; z-index:1;}
  .overlay{animation:overfade .2s;}
  @keyframes overfade{from{opacity:0;}}
  .overlay .panel{animation:panelin .26s cubic-bezier(.2,.8,.3,1.12);}
  @keyframes panelin{from{transform:translateY(22px) scale(.96); opacity:0;}}
  .panel h1 .c{animation:cglow 3.2s ease-in-out infinite;}
  .panel h1 .r{animation:rglow 3.2s ease-in-out infinite;}
  @keyframes cglow{50%{text-shadow:0 0 38px rgba(255,122,47,.85);}}
  @keyframes rglow{50%{text-shadow:0 0 38px rgba(111,216,232,.75);}}
  @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }
  @media (max-width:370px){ .die{width:55px;height:55px;} .enemy{width:116px;} .mnode{width:56px;} .slotgrid{gap:6px;} }
  .svgdefs{position:absolute; width:0; height:0;}