:root{
    --accent1:#9b58ff;
    --accent2:#7a20ff;
    --bg:#14121c;
    --panel:#1d1a29;
    --panel2:#252136;
    --slot:#211e30;
    --border:#34304a;
    --text:#e9e6f5;
    --sub:#a39fbd;
    --hp:#e85d6b;
    --exp:#3fd6c0;
    --gold:#f4c450;
    --rare:#5b8def;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    min-height:100vh;
    background:radial-gradient(circle at 50% -10%, #2a2240 0%, var(--bg) 55%);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
    display:flex;
    justify-content:center;
    padding:24px 14px 60px;
  }
  .wrap{width:100%;max-width:480px;}
  .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .topbar a{color:var(--sub);text-decoration:none;font-size:13px;}
  .topbar a:hover{color:var(--accent1);}
  h1{
    font-size:18px;margin:0 0 14px;text-align:center;
    background:linear-gradient(180deg,var(--accent1),var(--accent2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    font-weight:700;letter-spacing:.5px;
  }
  .panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:12px;}
  .player-row{display:flex;align-items:center;gap:12px;}
  .player-name{font-weight:700;font-size:15px;}
  .player-lv{font-size:12px;color:var(--accent1);background:rgba(155,88,255,.15);border-radius:6px;padding:2px 7px;margin-left:6px;}
  .gold{margin-left:auto;color:var(--gold);font-weight:600;font-size:14px;display:flex;align-items:center;gap:4px;}
  .barlabel{display:flex;justify-content:space-between;font-size:11px;color:var(--sub);margin:10px 0 4px;}
  .bar-bg{height:10px;border-radius:6px;background:#0e0c16;overflow:hidden;border:1px solid var(--border);}
  .bar-fill{height:100%;border-radius:6px;transition:width .25s ease;}
  .fill-hp{background:linear-gradient(90deg,#ff8a93,var(--hp));}
  .fill-exp{background:linear-gradient(90deg,#69e9d6,var(--exp));}

  .stage-label{display:flex;justify-content:space-between;align-items:baseline;}
  .stage-label .name{font-weight:700;font-size:15px;}
  .stage-label .stage{font-size:12px;color:var(--sub);}
  .monster-area{display:flex;flex-direction:column;align-items:center;padding:18px 0 6px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;}
  .monster-emoji{line-height:1;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));transition:transform .08s ease;}
  .monster-area.hit .monster-emoji{transform:scale(.86) rotate(-4deg);}
  .dmg-pop{position:fixed;font-weight:800;font-size:14px;color:#fff;pointer-events:none;animation:popUp .6s ease-out forwards;text-shadow:0 2px 4px rgba(0,0,0,.5);}
  .dmg-pop.crit{color:var(--gold);font-size:18px;}
  @keyframes popUp{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-46px) scale(1.15);}}
  .monster-name{font-size:13px;color:var(--sub);margin-top:6px;}
  .hint{font-size:11px;color:var(--sub);text-align:center;margin-top:4px;opacity:.7;}

  .tabs{display:flex;gap:6px;margin-bottom:10px;}
  .tab-btn{flex:1;background:var(--panel);border:1px solid var(--border);color:var(--sub);border-radius:10px;padding:9px 0;font-size:13px;font-weight:600;cursor:pointer;}
  .tab-btn.active{background:linear-gradient(180deg,var(--accent1),var(--accent2));color:#fff;border-color:transparent;}

  /* ---- character paperdoll ---- */
  .pd-grid{display:grid;grid-template-columns:74px 1fr 74px;gap:10px;align-items:start;}
  .pd-col{display:flex;flex-direction:column;gap:10px;}
  .pd-slot{
    position:relative;width:74px;height:74px;border-radius:12px;
    background:var(--slot);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:border-color .15s, transform .1s;
  }
  .pd-slot svg{width:38px;height:38px;}
  .pd-char svg{width:64px;height:64px;}
  .monster-emoji svg{width:84px;height:84px;}
  .dtitle svg{width:22px;height:22px;vertical-align:middle;}
  .pd-slot:active{transform:scale(.95);}
  .pd-slot.filled{border-color:rgba(155,88,255,.5);}
  .pd-slot.selected{border-color:var(--accent1);box-shadow:0 0 0 2px rgba(155,88,255,.35) inset;}
  .pd-slot .pd-lv{
    position:absolute;bottom:3px;right:5px;font-size:10px;font-weight:700;
    color:var(--accent1);background:rgba(20,18,28,.8);border-radius:5px;padding:0 3px;
  }
  .pd-slot .pd-label{
    position:absolute;top:-7px;left:50%;transform:translateX(-50%);
    font-size:9px;color:var(--sub);white-space:nowrap;background:var(--bg);padding:0 4px;
  }
  .pd-center{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:4px;}
  .pd-char{
    width:108px;height:148px;border-radius:14px;
    background:linear-gradient(180deg,var(--panel2),var(--slot));
    border:1px solid var(--border);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:relative;
  }
  .pd-char .pd-charlv{
    position:absolute;top:6px;left:6px;font-size:10px;font-weight:700;color:#fff;
    background:linear-gradient(180deg,var(--accent1),var(--accent2));border-radius:6px;padding:2px 6px;
  }
  .pd-charname{margin-top:8px;font-size:13px;font-weight:700;}
  .pd-power{margin-top:2px;font-size:11px;color:var(--sub);}

  .pd-detail{
    margin-top:14px;background:var(--panel2);border-radius:10px;padding:12px;
    border:1px solid var(--border);
  }
  .pd-detail .dtitle{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;}
  .pd-detail .dstat{font-size:12px;color:var(--sub);margin-top:6px;}
  .pd-detail .dbtnrow{display:flex;gap:8px;margin-top:10px;}
  .equip-btn{background:var(--accent1);color:#fff;border:none;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;flex:1;}
  .equip-btn:disabled{background:#3c3850;color:#75708f;cursor:not-allowed;}
  .pd-empty-hint{font-size:11px;color:var(--sub);text-align:center;margin-top:10px;}

  .stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px;}
  .stat-box{background:var(--panel2);border-radius:10px;padding:8px;text-align:center;}
  .stat-box .lbl{font-size:10px;color:var(--sub);}
  .stat-box .val{font-size:15px;font-weight:700;margin-top:2px;}

  /* ---- character tab: detail info panel ---- */
  .cd-panel{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:14px;margin-top:12px;}
  .cd-title{color:var(--text);font-weight:500;font-size:14px;}
  .cd-divider{height:1px;background:var(--border);margin:10px 0;border:none;}
  .cd-section{margin-bottom:12px;}
  .cd-section:last-child{margin-bottom:0;}
  .cd-section-title{color:var(--text);font-weight:500;font-size:12px;margin-bottom:6px;}
  .cd-row{display:flex;justify-content:space-between;font-size:12px;margin:4px 0;}
  .cd-label{color:var(--sub);}
  .cd-value{color:var(--accent1);font-weight:700;}

  /* ---- tab fade ---- */
  .tab-panel{transition:opacity .18s ease;}

  .log{max-height:220px;overflow-y:auto;font-size:12px;color:var(--sub);display:flex;flex-direction:column-reverse;gap:3px;}
  .log div span.tag{color:var(--accent1);font-weight:600;}
  .log div span.gtag{color:var(--gold);font-weight:600;}
  .log div.log-boss{background:rgba(244,196,80,.07);border-left:2px solid rgba(244,196,80,.4);padding-left:6px;border-radius:3px;}
  .log div.log-death{background:rgba(232,93,107,.07);border-left:2px solid rgba(232,93,107,.4);padding-left:6px;border-radius:3px;}
  .log div.log-dodge{color:var(--exp);opacity:.85;}

  .resetbtn{width:100%;background:none;border:1px solid var(--border);color:var(--sub);border-radius:10px;padding:8px 0;font-size:12px;cursor:pointer;margin-top:6px;}
  .levelup-flash{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,rgba(155,88,255,.35),transparent 70%);pointer-events:none;opacity:0;z-index:50;}
  .levelup-flash.show{animation:flash .8s ease-out;}
  @keyframes flash{0%{opacity:1;}100%{opacity:0;}}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1d1a29;border:1px solid var(--accent1);color:#fff;padding:10px 18px;border-radius:30px;font-size:13px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;transition:opacity .25s,transform .25s;z-index:60;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

  @media (max-width:380px){
    .pd-grid{grid-template-columns:62px 1fr 62px;}
    .pd-slot{width:62px;height:62px;font-size:26px;}
    .pd-char{width:90px;height:130px;font-size:46px;}
  }

  /* ---- enhancement modal ---- */
  .enh-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .enh-overlay.show{opacity:1;pointer-events:auto;}
  .enh-modal{
    background:var(--panel);border:1px solid var(--border);border-radius:20px;
    padding:24px 22px 20px;width:min(300px,88vw);text-align:center;
  }
  .enh-header{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text);}
  .enh-slot-icon svg{width:52px;height:52px;}
  .enh-slot-name{font-size:14px;font-weight:700;margin-top:8px;}
  .enh-levels{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 4px;}
  .enh-cur{font-size:22px;font-weight:800;color:var(--sub);}
  .enh-arrow{font-size:18px;color:var(--border);}
  .enh-next{font-size:22px;font-weight:800;color:var(--accent1);}
  .enh-stat-info{font-size:12px;color:var(--sub);margin-bottom:10px;}
  .enh-info-row{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;margin:4px 0;}
  .enh-lbl{color:var(--sub);}
  .enh-rate-val{font-weight:700;color:var(--exp);}
  .enh-cost-val{font-weight:700;color:var(--gold);}
  .enh-gold-cur{color:var(--sub);font-size:11px;}
  .enh-result{height:26px;font-size:14px;font-weight:700;margin:12px 0 4px;transition:color .2s;}
  .enh-result.success{color:var(--exp);}
  .enh-result.fail{color:var(--hp);}
  .enh-btns{display:flex;gap:10px;margin-top:10px;}
  .enh-try{
    flex:1;background:linear-gradient(180deg,var(--accent1),var(--accent2));
    color:#fff;border:none;border-radius:10px;padding:11px 0;
    font-size:13px;font-weight:700;cursor:pointer;
  }
  .enh-try:disabled{background:#3c3850;color:#75708f;cursor:not-allowed;}
  .enh-close{
    flex:1;background:none;border:1px solid var(--border);color:var(--sub);
    border-radius:10px;padding:11px 0;font-size:13px;cursor:pointer;
  }

  /* ---- boss ---- */
  .boss-glow .monster-emoji{filter:drop-shadow(0 0 12px rgba(244,196,80,.6));}
  .boss-badge{
    display:inline-block;background:linear-gradient(90deg,#ff6b35,#f4c450);
    color:#1a1000;font-size:10px;font-weight:800;padding:2px 7px;
    border-radius:8px;margin-right:6px;vertical-align:middle;
  }

  /* ---- map ---- */
  .map-panel{padding:10px;}
  #mapCanvas{display:block;margin:0 auto;border-radius:8px;image-rendering:pixelated;}
  .map-dpad{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:14px;}
  .dpad-row{display:flex;gap:5px;align-items:center;}
  .dpad-btn{
    width:54px;height:54px;
    background:var(--panel2);border:1px solid var(--border);color:var(--sub);
    border-radius:12px;font-size:22px;cursor:pointer;
    touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;
    display:flex;align-items:center;justify-content:center;
    transition:background .1s,color .1s,transform .08s;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
  }
  .dpad-btn:active,.dpad-btn.pressing{background:var(--accent1);color:#fff;border-color:var(--accent1);transform:scale(.90);}
  .dpad-center{width:54px;height:54px;}
  .map-hint{font-size:11px;color:var(--sub);text-align:center;margin-top:10px;opacity:.75;letter-spacing:.2px;}