/* ============================================================
   AFGROND — dark isometric ARPG. UI styling.
   Palette: ember, ash, blood, old gold on black.
   ============================================================ */
:root{
  --ink:#0a0807; --ash:#16110d; --stone:#241c15; --stone-lt:#3a2d22;
  --gold:#c8a046; --gold-dim:#7a5f2a; --blood:#8c1c13; --ember:#d8732a;
  --life:#c0241c; --mana:#1f5fc0; --xp:#caa23a;
  --txt:#cdbfa6; --txt-dim:#8a7c64;
  --rar-normal:#d8d2c4; --rar-magic:#6d79ff; --rar-rare:#e8d84a;
  --rar-set:#28b828; --rar-unique:#b07b3a; --rar-gold:#e0b94a;
  --font: "Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}
html,body{height:100%;overflow:hidden;background:#000;color:var(--txt);font-family:var(--font)}
#game-root{position:fixed;inset:0;cursor:none}
canvas#game{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;background:#000}

/* ---------- HUD ---------- */
#hud{position:absolute;left:0;right:0;bottom:0;height:118px;display:flex;align-items:flex-end;
  justify-content:space-between;padding:0 8px 6px;pointer-events:none;z-index:20}
.globe{position:relative;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#2a2018,#0c0907 70%);
  border:3px solid #0c0907;box-shadow:0 0 0 2px #2c2118,inset 0 4px 12px #000;
  overflow:hidden;pointer-events:auto}
.globe-fill{position:absolute;left:0;right:0;bottom:0;height:100%;transition:height .18s}
#globe-life .globe-fill{background:linear-gradient(#e8483a,#7c0f0a)}
#globe-mana .globe-fill{background:linear-gradient(#4a8af0,#0f2f7c)}
.globe-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:bold;color:#fff;text-shadow:0 1px 2px #000;letter-spacing:.5px}
.globe::after{content:"";position:absolute;left:18%;top:12%;width:34%;height:24%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}

#action-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 10px 4px}
#xp-bar{width:min(560px,70vw);height:9px;background:#0c0907;border:1px solid #2c2118;border-radius:3px;
  position:relative;overflow:hidden}
#xp-fill{height:100%;width:0;background:linear-gradient(#e9cf63,#8a6a1e);transition:width .3s}
#xp-label{position:absolute;inset:0;text-align:center;font-size:8px;line-height:9px;color:#000;font-weight:bold}
#belt{display:flex;gap:6px;pointer-events:auto}
.belt-slot{width:42px;height:42px;background:#0e0b08;border:2px solid #2c2118;border-radius:4px;
  position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.belt-slot .key{position:absolute;top:1px;left:3px;font-size:9px;color:var(--gold-dim)}
.belt-slot .pot{width:24px;height:30px;border-radius:6px 6px 8px 8px}
#skill-slots{display:flex;gap:8px;pointer-events:auto}
.skill-slot{width:46px;height:46px;background:#0e0b08;border:2px solid var(--gold-dim);border-radius:6px;
  position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:inset 0 0 10px #000}
.skill-slot .key{position:absolute;bottom:1px;right:3px;font-size:9px;color:var(--gold-dim)}
.skill-slot .ico{font-size:22px;filter:drop-shadow(0 0 4px var(--ember))}

#level-pip{position:absolute;left:64px;bottom:96px;z-index:21;text-align:center;color:var(--gold);
  text-shadow:0 1px 2px #000;pointer-events:none}
#level-pip #level-num{font-size:20px;font-weight:bold;display:block;line-height:1}
#level-pip small{font-size:9px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:1px}

/* ---------- minimap ---------- */
#minimap{position:absolute;top:8px;right:8px;width:200px;height:160px;z-index:18;
  background:rgba(6,5,4,.55);border:2px solid #2c2118;border-radius:4px}

/* ---------- panels ---------- */
.panel{position:absolute;top:54px;width:320px;max-height:calc(100% - 200px);overflow:auto;z-index:30;
  background:linear-gradient(#1b150f,#100c08);border:2px solid var(--gold-dim);border-radius:6px;
  box-shadow:0 8px 40px #000,inset 0 0 30px #000;padding:10px;pointer-events:auto}
#inventory{right:8px}#char-sheet{left:8px}#skill-tree{left:50%;transform:translateX(-50%)}
.panel-title{font-size:15px;color:var(--gold);border-bottom:1px solid var(--gold-dim);
  padding-bottom:6px;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase}
.panel-close{float:right;cursor:pointer;color:var(--txt-dim)}
.panel-close:hover{color:var(--life)}
.panel-sub{font-size:11px;color:var(--txt-dim);text-transform:uppercase;letter-spacing:1px;margin:10px 0 6px}

/* equipment + inventory grids */
#equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;justify-items:center}
.equip-slot{width:54px;height:54px;background:#0d0a07;border:1px solid #2c2118;border-radius:4px;
  position:relative;display:flex;align-items:center;justify-content:center;font-size:9px;color:#43372a}
#inv-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px}
.cell{aspect-ratio:1;background:#0d0a07;border:1px solid #1d160f;border-radius:2px;position:relative}
.item{position:absolute;inset:0;border-radius:3px;display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;z-index:2;border:1px solid #000}
.item.span2{z-index:3}
.item.normal{box-shadow:inset 0 0 0 1px #4a4438}
.item.magic{box-shadow:inset 0 0 0 1px var(--rar-magic);background:rgba(60,72,200,.12)}
.item.rare{box-shadow:inset 0 0 0 1px var(--rar-rare);background:rgba(180,160,40,.12)}
.item.unique{box-shadow:inset 0 0 0 1px var(--rar-unique);background:rgba(160,110,50,.16)}
.item.set{box-shadow:inset 0 0 0 1px var(--rar-set);background:rgba(40,160,40,.12)}
#gold-row{margin-top:10px;color:var(--gold);font-size:13px;text-align:right}
.item .sock,.equip-slot .sock{position:absolute;bottom:-1px;left:0;right:0;text-align:center;
  font-size:7px;line-height:7px;letter-spacing:1px;z-index:5;pointer-events:none;text-shadow:0 1px 1px #000}
.item.gem-item{background:rgba(120,90,160,.18);box-shadow:inset 0 0 0 1px #9a6cff}
.item.held{outline:2px solid #5cff7a;outline-offset:-1px;animation:pulseHeld .6s infinite alternate}
@keyframes pulseHeld{from{box-shadow:0 0 4px #5cff7a}to{box-shadow:0 0 12px #5cff7a}}

#stat-list .stat{display:flex;justify-content:space-between;padding:3px 0;font-size:13px;
  border-bottom:1px dotted #2a2018}
#stat-list .stat b{color:var(--txt)}
#stat-list .grp{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin:10px 0 4px}
.alloc{cursor:pointer;color:var(--gold);border:1px solid var(--gold-dim);border-radius:3px;padding:0 6px;margin-left:6px}
.alloc:hover{background:var(--gold-dim);color:#000}

#skill-tree-body .skill-row{display:flex;align-items:center;gap:10px;padding:6px;border-bottom:1px solid #221a12}
#skill-tree-body .s-ico{width:42px;height:42px;border:2px solid var(--gold-dim);border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;background:#0d0a07}
#skill-tree-body .s-ico.learned{border-color:var(--gold);box-shadow:0 0 8px var(--ember)}
#skill-tree-body .s-meta{flex:1}
#skill-tree-body .s-name{color:var(--gold);font-size:13px}
#skill-tree-body .s-desc{color:var(--txt-dim);font-size:11px}

/* ---------- tooltip ---------- */
#tooltip{position:absolute;z-index:60;pointer-events:none;max-width:240px;
  background:rgba(6,5,4,.96);border:1px solid #000;border-radius:4px;padding:6px 8px;font-size:12px;
  box-shadow:0 4px 18px #000}
#tooltip .t-name{font-weight:bold;text-align:center;margin-bottom:3px}
#tooltip .t-name.normal{color:var(--rar-normal)}
#tooltip .t-name.magic{color:var(--rar-magic)}
#tooltip .t-name.rare{color:var(--rar-rare)}
#tooltip .t-name.unique{color:var(--rar-unique)}
#tooltip .t-name.set{color:var(--rar-set)}
#tooltip .t-type{color:var(--txt-dim);text-align:center;font-size:11px;margin-bottom:4px}
#tooltip .t-aff{color:var(--rar-magic);font-size:11px}
#tooltip .t-req{color:var(--txt-dim);font-size:11px}

/* ---------- banners / overlays ---------- */
#zone-banner{position:absolute;top:30%;left:50%;transform:translateX(-50%);z-index:40;
  font-size:30px;color:var(--gold);text-shadow:0 2px 10px #000,0 0 30px var(--ember);
  letter-spacing:3px;text-transform:uppercase;text-align:center;transition:opacity .6s}
#death-screen{position:absolute;inset:0;z-index:80;background:radial-gradient(circle,rgba(40,0,0,.5),rgba(0,0,0,.92));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#death-screen h1{font-size:52px;color:var(--life);letter-spacing:6px;text-shadow:0 0 30px #000}
#death-screen p{color:var(--txt-dim)}

#title-screen{position:absolute;inset:0;z-index:90;
  background:radial-gradient(circle at 50% 40%,#1a0f08,#000 75%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.logo{font-size:84px;letter-spacing:14px;color:var(--gold);
  text-shadow:0 0 40px var(--ember),0 4px 0 #2a1c0e;font-weight:bold}
.tagline{color:var(--txt-dim);letter-spacing:6px;text-transform:uppercase;font-size:14px;margin-bottom:20px}
.title-hint{color:#4a3f30;font-size:12px;margin-top:24px;text-align:center;max-width:520px;line-height:1.6}
button{font-family:var(--font);cursor:pointer;background:linear-gradient(#3a2d1c,#1a130c);
  color:var(--gold);border:2px solid var(--gold-dim);border-radius:5px;padding:10px 28px;font-size:16px;
  letter-spacing:2px;text-transform:uppercase;transition:.15s}
button:hover{border-color:var(--gold);box-shadow:0 0 20px var(--ember);color:#fff}

/* ---------- character select ---------- */
#class-select{position:absolute;inset:0;z-index:92;
  background:radial-gradient(circle at 50% 30%,#160d07,#000 78%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.cs-title{color:var(--gold);font-size:34px;letter-spacing:6px;text-transform:uppercase;
  text-shadow:0 0 24px var(--ember)}
#class-cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;max-width:960px}
.class-card{width:240px;background:linear-gradient(#1c150e,#0d0a06);border:2px solid var(--gold-dim);
  border-radius:10px;padding:20px 18px;cursor:pointer;transition:.18s;text-align:center}
.class-card:hover{border-color:var(--gold);box-shadow:0 0 30px var(--ember),inset 0 0 30px #000;transform:translateY(-4px)}
.cc-icon{font-size:52px;filter:drop-shadow(0 0 10px var(--ember))}
.cc-name{font-size:22px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;margin-top:6px}
.cc-tag{font-size:12px;color:var(--ember);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.cc-blurb{font-size:13px;color:var(--txt-dim);line-height:1.5;min-height:76px}
.cc-stats{margin-top:12px;font-size:11px;color:var(--gold-dim);letter-spacing:1px;
  border-top:1px solid #2a2018;padding-top:8px}

/* ---------- vendor / stash / waypoint ---------- */
#vendor{left:8px;width:340px}
#stash{left:50%;transform:translateX(-50%);width:470px}
#waypoint{left:50%;transform:translateX(-50%);width:320px}
.shop-gold{color:var(--gold);font-size:14px;text-align:right;margin-bottom:4px}
.shop-gold b{color:#fff}
.shop-grid,.inv-grid-sm{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.cell .price{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:8px;
  color:#e0b94a;background:rgba(0,0,0,.6);z-index:4;pointer-events:none}
.gamble-row{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0}
.gamble-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:#0e0b08;border:2px solid var(--gold-dim);border-radius:5px;cursor:pointer}
.gamble-btn:hover{border-color:var(--gold);box-shadow:0 0 10px var(--ember)}
.stash-wrap{display:flex;gap:12px}
.stash-col{flex:1}
.wp-btn{padding:9px 12px;margin-bottom:6px;background:linear-gradient(#1c2638,#0d1018);
  border:1px solid #2a4a6a;border-radius:5px;color:#bfe0ff;cursor:pointer;font-size:13px;transition:.15s}
.wp-btn:hover{border-color:#5aa0ff;box-shadow:0 0 14px rgba(90,160,255,.5)}
.wp-btn.current{border-color:#5aa0ff;color:#fff;background:linear-gradient(#23364f,#12202f)}
.diff-row{display:flex;gap:6px;margin-bottom:4px}
.diff-btn{flex:1;text-align:center;padding:8px 4px;background:#0e0b08;border:2px solid var(--gold-dim);
  border-radius:5px;color:var(--txt-dim);cursor:pointer;font-size:12px;letter-spacing:1px;transition:.15s}
.diff-btn:not(.locked):hover{border-color:var(--gold);color:var(--txt)}
.diff-btn.current{font-weight:bold;box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.diff-btn.locked{opacity:.45;cursor:not-allowed;font-size:11px}
.diff-hint{font-size:11px;color:var(--txt-dim);margin-bottom:6px;font-style:italic}

/* ---------- mobile touch controls (hidden unless body.touch) ---------- */
#touch-controls{display:none}
body.touch #touch-controls{display:flex;flex-direction:column;gap:12px;
  position:absolute;right:14px;bottom:130px;z-index:23;align-items:center}
.fab{width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a2d1c,#0d0a06);
  border:2px solid var(--gold-dim);color:var(--gold);font-size:30px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 4px 16px #000;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.fab:active{border-color:var(--gold);box-shadow:0 0 18px var(--ember)}
.fab-sm{width:48px;height:48px;font-size:22px}
body.touch #opt-btn{width:44px;height:44px;font-size:22px}

/* ---------- options ---------- */
#options{left:50%;transform:translateX(-50%);width:340px}
.opt-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dotted #2a2018;font-size:14px}
.opt-row input[type=range]{width:160px;accent-color:var(--gold)}
.opt-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold)}
.opt-help{color:var(--txt-dim);font-size:11px;line-height:1.7;margin-top:12px}
#opt-btn{position:absolute;top:8px;left:8px;z-index:22;width:34px;height:34px;border-radius:6px;
  background:rgba(8,6,4,.7);border:1px solid #2c2118;color:var(--gold-dim);font-size:18px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto}
#opt-btn:hover{color:var(--gold);border-color:var(--gold-dim)}
#death-stats{color:var(--txt-dim);font-size:14px;text-align:center;line-height:1.7}

/* ---------- story / dialogue / victory ---------- */
#story-screen{position:absolute;inset:0;z-index:93;background:radial-gradient(circle at 50% 35%,#0e0805,#000 80%);
  display:flex;align-items:center;justify-content:center}
.story-box{max-width:560px;text-align:center;padding:30px;animation:fadeUp .8s ease}
.story-box h2{color:var(--gold);font-size:38px;letter-spacing:8px;text-transform:uppercase;margin-bottom:18px;text-shadow:0 0 24px var(--ember)}
.story-box p{color:var(--txt);font-size:16px;line-height:1.8;margin-bottom:12px}
.story-box .story-em{color:var(--ember);font-style:italic;margin:18px 0 24px}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

#dialogue{position:absolute;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;padding-bottom:140px;
  background:rgba(0,0,0,.4)}
.dlg-box{max-width:560px;background:linear-gradient(#1b150f,#0d0a06);border:2px solid var(--gold-dim);
  border-radius:8px;padding:18px 22px;box-shadow:0 8px 40px #000}
.dlg-name{color:var(--gold);font-size:16px;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.dlg-box p{color:var(--txt);font-size:14px;line-height:1.7;margin-bottom:8px}
.dlg-box .dlg-tip{color:var(--txt-dim);font-size:12px;font-style:italic}
.dlg-box button{margin-top:8px}

#victory-screen{position:absolute;inset:0;z-index:88;background:radial-gradient(circle,rgba(40,30,0,.5),rgba(0,0,0,.95));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:fadeUp 1s ease}
#victory-screen h1{font-size:48px;color:var(--gold);letter-spacing:5px;text-shadow:0 0 40px var(--ember);text-align:center}
#victory-screen p{color:var(--txt);max-width:520px;text-align:center}
.victory-stats{color:var(--ember) !important;font-size:14px}
.victory-btns{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap;justify-content:center}

.hidden{display:none !important}