/* style.css — all styling */
:root{
  --bg:#070b12; --bg2:#141d2b; --fg:#e8eef7; --muted:#8a98ad;
  --accent:#ff7a3d; --accent2:#ffd166; --danger:#ff4d4d; --good:#5fd08a;
  --card:rgba(20,29,43,0.82); --border:rgba(255,255,255,0.09);
  --tier-common:#8a98ad; --tier-uncommon:#5fd08a; --tier-rare:#5b9eff; --tier-epic:#c97bff;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{--bg:#e9eef5;--bg2:#dde4ee;--fg:#16202e;--muted:#56627a;--card:rgba(255,255,255,0.85);--border:rgba(0,0,0,0.10);color-scheme:light;}
}
html[data-theme="dark"]{--bg:#070b12;--bg2:#141d2b;--fg:#e8eef7;--muted:#8a98ad;--card:rgba(20,29,43,0.82);--border:rgba(255,255,255,0.09);color-scheme:dark;}
html[data-theme="light"]{--bg:#e9eef5;--bg2:#dde4ee;--fg:#16202e;--muted:#56627a;--card:rgba(255,255,255,0.85);--border:rgba(0,0,0,0.10);color-scheme:light;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden;}
#root{position:relative;width:100%;height:100%;overflow:hidden;user-select:none;}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}

#hud{position:absolute;top:0;left:0;right:0;padding:10px 12px;display:flex;align-items:center;gap:8px;z-index:5;pointer-events:none;}
.hud-left{display:flex;gap:8px;}
.stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:5px 10px;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;min-width:56px;}
.stat .lbl{font-size:8px;letter-spacing:1.5px;color:var(--muted);font-weight:700;}
.stat .val{font-size:18px;font-weight:800;color:var(--fg);line-height:1.1;}
.hp-wrap{flex:1;max-width:220px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 9px;backdrop-filter:blur(8px);}
.hp-label{font-size:9px;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-bottom:4px;}
.hp-label span{color:var(--danger);}
.hp-bar{height:9px;border-radius:5px;background:rgba(255,77,77,0.18);overflow:hidden;}
.hp-fill{height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#ff4d4d,#ff7a3d 60%,#ffd166);transition:width .2s ease;}
.hud-right{display:flex;gap:6px;pointer-events:auto;}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--card);backdrop-filter:blur(8px);color:var(--fg);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s;}
.icon-btn:active{transform:scale(0.92);background:rgba(255,255,255,0.12);}
#pauseBtn{font-size:14px;}

.weapon-row{position:absolute;bottom:140px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;pointer-events:auto;}
.wbtn{position:relative;width:58px;height:58px;border-radius:14px;border:1px solid var(--border);background:var(--card);backdrop-filter:blur(6px);color:var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;touch-action:none;transition:transform .08s,filter .15s;overflow:hidden;}
.wic{font-size:24px;line-height:1;z-index:1;}
.wcd{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);border-radius:0 0 14px 14px;transform:scaleX(0);transform-origin:bottom;transition:transform .05s linear;z-index:2;}
.wbtn.ready .wcd{transform:scaleX(1);}
.wbtn:not(.ready){opacity:0.55;filter:grayscale(0.3);}
.wbtn:active{transform:scale(0.9);}
.wbtn kbd{position:absolute;top:3px;right:4px;font-size:9px;font-weight:700;color:var(--muted);opacity:0.7;}

#controls{position:absolute;left:0;right:0;bottom:0;padding:0 18px 18px;display:flex;justify-content:flex-start;z-index:5;pointer-events:none;}
#joy{position:relative;width:120px;height:120px;border-radius:50%;background:var(--card);border:1px solid var(--border);backdrop-filter:blur(6px);touch-action:none;pointer-events:auto;}
.joy-ring{position:absolute;inset:14px;border-radius:50%;border:2px dashed rgba(255,255,255,0.14);}
#knob{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#ffb18a,var(--accent));box-shadow:0 4px 14px rgba(0,0,0,0.4),inset 0 -3px 5px rgba(0,0,0,0.25);transition:transform .04s linear;}

.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);animation:fade .25s ease;}
.overlay.hidden{display:none;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 28px;text-align:center;max-width:360px;box-shadow:0 16px 48px rgba(0,0,0,0.5);}
.panel h2{margin:0 0 8px;font-size:20px;letter-spacing:1px;color:var(--accent);}
.panel h3{margin:0 0 6px;font-size:16px;color:var(--accent2);}
.panel p{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5;}
.panel .eul{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.5;}
.panel .eul b{color:var(--fg);}
.sm-btn{border:none;cursor:pointer;padding:10px 22px;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:1px;color:#1a0d05;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 6px 18px rgba(255,122,61,0.35);transition:transform .12s,box-shadow .15s,opacity .15s;}
.sm-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,122,61,0.5);}
.sm-btn:active{transform:scale(0.97);}
.skull{font-size:42px;animation:bob 2s ease-in-out infinite;}
.pause-icon{font-size:36px;margin-bottom:4px;animation:bob 2s ease-in-out infinite;}

.drop-icon{font-size:44px;margin-bottom:4px;animation:bob 1.5s ease-in-out infinite;}
.supply-score-p{margin:0 0 4px!important;color:var(--muted);font-size:13px;}
.supply-score-p b{color:var(--accent2);font-size:15px;}
.supply-tier{font-size:10px;font-weight:800;letter-spacing:1.5px;margin-bottom:12px;color:var(--tier-common);}
.supply-tier.tier-uncommon{color:var(--tier-uncommon);}
.supply-tier.tier-rare{color:var(--tier-rare);}
.supply-tier.tier-epic{color:var(--tier-epic);}
.supply-choices{display:flex;flex-direction:column;gap:8px;}
.supply-hint{font-size:11px;color:var(--muted);margin:12px 0 10px;line-height:1.4;}
.supply-done{margin-top:4px;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 8px 22px rgba(255,122,61,0.5);font-size:15px;padding:13px 32px;opacity:1;animation:donepulse 1.1s ease-in-out infinite;}
.supply-done:hover{box-shadow:0 10px 26px rgba(255,122,61,0.6);transform:translateY(-1px);}
.supply-done.ready{background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 8px 22px rgba(255,122,61,0.5);opacity:1;animation:donepulse 1.1s ease-in-out infinite;}
@keyframes donepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.choice-btn{border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,0.04);padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;text-align:left;color:var(--fg);}
.choice-btn:hover{background:rgba(255,255,255,0.08);border-color:var(--accent);transform:translateX(2px);}
.choice-btn:active{transform:scale(0.98);}
.choice-btn.picked{border-color:var(--accent2);background:rgba(255,209,102,0.12);box-shadow:0 0 0 2px rgba(255,209,102,0.35),0 6px 18px rgba(255,122,61,0.25);transform:translateX(2px);}
.choice-btn.tier-uncommon{border-left:3px solid var(--tier-uncommon);}
.choice-btn.tier-rare{border-left:3px solid var(--tier-rare);background:rgba(91,158,255,0.06);}
.choice-btn.tier-epic{border-left:3px solid var(--tier-epic);background:rgba(201,123,255,0.08);box-shadow:0 0 12px rgba(201,123,255,0.15);}
.c-icon{font-size:28px;width:40px;text-align:center;flex-shrink:0;}
.c-info{display:flex;flex-direction:column;gap:2px;flex:1;}
.c-name{font-size:13px;font-weight:700;color:var(--fg);display:flex;align-items:center;gap:8px;}
.c-tier{font-size:8px;font-weight:800;letter-spacing:1px;padding:2px 6px;border-radius:4px;background:var(--tier-common);color:#0a0e14;text-transform:uppercase;}
.tier-uncommon .c-tier{background:var(--tier-uncommon);}
.tier-rare .c-tier{background:var(--tier-rare);}
.tier-epic .c-tier{background:var(--tier-epic);}
.c-desc{font-size:11px;color:var(--muted);}

.settings-panel p{margin:0 0 14px;color:var(--muted);font-size:12px;}
.key-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;text-align:left;}
.key-slot{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);}
.key-lbl{font-size:13px;font-weight:600;color:var(--fg);}
.key-edit{display:flex;align-items:center;gap:6px;}
.key-cur{font-size:11px;color:var(--muted);padding:3px 8px;border-radius:6px;background:rgba(255,255,255,0.06);min-width:18px;text-align:center;font-weight:600;cursor:pointer;}
.key-new{display:none;align-items:center;justify-content:center;width:38px;height:30px;border-radius:8px;background:var(--accent);color:#1a0d05;font-size:13px;font-weight:800;animation:pulse .8s ease-in-out infinite;}
.key-new.show{display:flex;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}

#pauseOver .panel{min-width:220px;}
#pauseOver kbd{font-size:11px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,0.1);color:var(--fg);}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (max-width:400px){
  #joy{width:100px;height:100px;}
  #knob{width:38px;height:38px;}
  .weapon-row{bottom:120px;gap:5px;}
  .wbtn{width:48px;height:48px;}
  .wic{font-size:19px;}
  .hud-left{gap:5px;}
  .stat{padding:4px 8px;min-width:48px;}
  .stat .val{font-size:15px;}
  .hp-wrap{max-width:180px;padding:5px 7px;}
  .panel{padding:18px 20px;}
}
@media (min-width:600px){
  #joy{width:136px;height:136px;}
  #knob{width:50px;height:50px;}
  .wbtn{width:62px;height:62px;}
  .wic{font-size:26px;}
}