/* ---------- VORATH DELVE — jewel-on-jet-black arcade sandbox ---------- */
  html,body{
    margin:0; height:100%; background:#05040a; overflow:hidden;
    font-family:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    color:#e9e3ff; user-select:none; -webkit-user-select:none;
    touch-action:none;
  }
  #wrap{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;}
  canvas{
    image-rendering:pixelated; background:#05040a;
    box-shadow:0 0 60px rgba(120,60,255,0.25), inset 0 0 0 1px rgba(120,60,255,0.15);
    max-width:100%; max-height:100%;
  }
  /* ---------- HUD ---------- */
  #hud{position:fixed; inset:0; pointer-events:none; z-index:10;}
  #topbar{
    position:absolute; top:10px; left:12px; right:12px;
    display:flex; justify-content:space-between; align-items:flex-start;
    font-size:13px; letter-spacing:1px; text-shadow:0 0 8px rgba(0,0,0,0.9);
  }
  #topbar .badge{
    background:rgba(12,8,24,0.72); border:1px solid rgba(140,90,255,0.4);
    border-radius:8px; padding:6px 11px; backdrop-filter:blur(3px);
  }
  #title{color:#c9a8ff; font-weight:bold; letter-spacing:3px;}
  #title small{color:#8a7bb8; font-weight:normal; letter-spacing:1px;}
  #depth b{color:#ff7de0;}
  #hotbar{
    position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
    display:flex; gap:6px; padding:7px; border-radius:12px;
    background:rgba(10,6,20,0.7); border:1px solid rgba(140,90,255,0.35);
    backdrop-filter:blur(4px);
  }
  .slot{
    width:46px; height:46px; border-radius:9px; position:relative;
    border:2px solid rgba(120,90,200,0.35); background:rgba(255,255,255,0.03);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
  }
  .slot.sel{ border-color:#ffd86b; box-shadow:0 0 14px rgba(255,216,107,0.6); }
  .slot .sw{ width:26px; height:26px; border-radius:5px; }
  .slot .num{ position:absolute; top:1px; left:4px; font-size:9px; color:#9c8fc4; }
  .slot .cnt{ position:absolute; bottom:0px; right:3px; font-size:10px; color:#fff; text-shadow:0 0 3px #000; }
  #overlay{
    position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at center, rgba(30,10,50,0.82), rgba(3,2,8,0.95));
    backdrop-filter:blur(2px); text-align:center; cursor:pointer;
  }
  #overlay .card{ max-width:560px; padding:0 24px; }
  #overlay h1{
    font-size:58px; margin:0; letter-spacing:10px; font-weight:900;
    background:linear-gradient(90deg,#ff5ec4,#a06bff,#5ec8ff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 40px rgba(160,80,255,0.4);
  }
  #overlay .sub{ color:#b49cff; letter-spacing:6px; font-size:14px; margin:6px 0 22px; }
  #overlay p{ color:#cdc3ef; line-height:1.9; font-size:14px; }
  #overlay kbd{
    background:rgba(140,90,255,0.18); border:1px solid rgba(160,110,255,0.5);
    border-radius:5px; padding:1px 7px; font-family:inherit; color:#fff; font-size:13px;
  }
  #overlay .go{ margin-top:24px; color:#ffd86b; letter-spacing:3px; font-size:15px; animation:pulse 1.4s infinite; }
  @keyframes pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }
  #hint{
    position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
    font-size:11px; color:#8878b0; letter-spacing:2px; text-shadow:0 0 6px #000;
  }
  /* ---------- Glyph Altar crafting panel ---------- */
  #craft{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:30; display:none; width:380px; padding:18px 20px 20px;
    background:rgba(12,7,22,0.94); border:1px solid rgba(255,210,120,0.4);
    border-radius:14px; box-shadow:0 0 44px rgba(255,180,80,0.25); backdrop-filter:blur(5px);
  }
  #craft h2{
    margin:0 0 3px; font-size:19px; letter-spacing:4px; color:#ffe08a; font-weight:900;
  }
  #craft .csub{ color:#b49cff; letter-spacing:2px; font-size:11px; margin-bottom:14px; }
  .recipe{
    display:flex; align-items:center; gap:11px; padding:9px 10px; margin:7px 0;
    border:1px solid rgba(140,90,255,0.3); border-radius:9px; background:rgba(255,255,255,0.02);
    cursor:pointer; transition:border-color .12s, background .12s;
  }
  .recipe:hover{ border-color:#ffd86b; background:rgba(255,216,107,0.06); }
  .recipe.no{ opacity:0.42; cursor:not-allowed; }
  .recipe.have{ border-color:#7dffb0; }
  .recipe .ico{ width:30px; height:30px; border-radius:6px; flex:none; box-shadow:inset 0 0 0 2px rgba(0,0,0,0.4); }
  .recipe .rt{ flex:1; }
  .recipe .rn{ font-size:13px; color:#f2ecff; font-weight:bold; }
  .recipe .rd{ font-size:10px; color:#9c8fc4; letter-spacing:0.3px; }
  .recipe .rc{ font-size:11px; color:#ffd86b; text-align:right; white-space:nowrap; }
  #craft .cclose{ margin-top:12px; text-align:center; font-size:11px; color:#8878b0; letter-spacing:2px; }

/* NSP IDG return chrome */
.nsp-return{position:fixed;z-index:10050;top:10px;left:10px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.nsp-return a{pointer-events:auto;min-height:40px;padding:0 12px;display:inline-grid;place-items:center;border-radius:5px;text-decoration:none;font:800 10px/1 Inter,Segoe UI,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(102,247,237,.45);background:linear-gradient(145deg,rgba(3,7,16,.92),rgba(10,8,24,.8));color:#66f7ed;backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.nsp-return a:hover{border-color:#f7ce66;color:#f7ce66}
.nsp-return a.secondary{border-color:rgba(148,163,184,.35);color:#94a3b8;font-weight:700}
.nsp-return a.secondary:hover{border-color:#66f7ed;color:#66f7ed}