:root{
    --bg:#071019; --panel:rgba(8,15,24,.78); --panel2:rgba(16,28,42,.82);
    --text:#dcefff; --muted:#8fb0c7; --accent:#6ee7ff; --gold:#e7c879;
    --bad:#ff7d9c; --good:#a9f5a0;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:radial-gradient(circle at 50% 5%,#142941 0,#071019 48%,#02050a 100%);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--text);overflow:hidden}
  #gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;background:linear-gradient(#122a42,#071019 55%,#03070d)}
  #hud{position:fixed;left:14px;top:14px;width:min(380px,calc(100vw - 28px));padding:14px;border:1px solid rgba(110,231,255,.22);border-radius:18px;background:var(--panel);backdrop-filter:blur(10px);box-shadow:0 12px 36px rgba(0,0,0,.35);user-select:none}
  #hud h1{margin:0 0 6px;font-size:17px;letter-spacing:.3px;color:#f4fbff}
  #hud .sub{font-size:12px;color:var(--muted);line-height:1.35;margin-bottom:10px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
  button,select,input[type=range]{width:100%}
  button{border:1px solid rgba(110,231,255,.22);background:linear-gradient(180deg,rgba(37,68,94,.9),rgba(17,31,48,.9));color:var(--text);border-radius:12px;padding:9px 10px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  button:hover{border-color:rgba(110,231,255,.55);filter:brightness(1.08)}
  button.active{outline:2px solid rgba(110,231,255,.7);background:linear-gradient(180deg,rgba(50,102,132,.95),rgba(18,52,74,.95))}
  label{display:block;font-size:12px;color:var(--muted);margin-top:8px}
  input[type=range]{accent-color:#6ee7ff}
  .check{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-top:8px;border-radius:12px;background:rgba(110,231,255,.055);border:1px solid rgba(110,231,255,.13);color:#ccefff}
  .check input{width:auto;accent-color:#6ee7ff}
  #stats{margin-top:10px;padding:10px;border-radius:14px;background:rgba(2,6,11,.38);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.45;color:#bbe8ff;white-space:pre-wrap}
  #reticle{position:fixed;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);pointer-events:none}
  #reticle:before,#reticle:after{content:"";position:absolute;background:rgba(222,247,255,.75);box-shadow:0 0 10px rgba(110,231,255,.5)}
  #reticle:before{left:8px;top:0;width:2px;height:18px}.reticle:after{left:0;top:8px;width:18px;height:2px}
  #reticle:after{left:0;top:8px;width:18px;height:2px}
  #tip{position:fixed;right:14px;bottom:14px;max-width:min(520px,calc(100vw - 28px));padding:12px 14px;border-radius:18px;border:1px solid rgba(231,200,121,.24);background:rgba(19,14,7,.72);backdrop-filter:blur(10px);color:#ffeec1;font-size:12px;line-height:1.45;box-shadow:0 12px 36px rgba(0,0,0,.33)}
  #mini{position:fixed;left:14px;bottom:14px;padding:10px 12px;border-radius:16px;background:rgba(7,14,22,.68);border:1px solid rgba(110,231,255,.18);font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#aeeaff}
  .pill{display:inline-block;padding:2px 8px;margin:2px 4px 2px 0;border-radius:999px;background:rgba(110,231,255,.1);border:1px solid rgba(110,231,255,.18);color:#dff8ff}
  .gold{color:var(--gold)} .good{color:var(--good)} .bad{color:var(--bad)}

  #materials{position:fixed;right:14px;top:14px;width:min(300px,calc(100vw - 28px));padding:13px;border-radius:18px;border:1px solid rgba(231,200,121,.24);background:rgba(8,13,20,.72);backdrop-filter:blur(10px);box-shadow:0 12px 36px rgba(0,0,0,.35);user-select:none}
  #materials h2{margin:0 0 5px;font-size:15px;color:#ffeec1}
  #materials .hint{font-size:11px;color:#c7d8df;line-height:1.32;margin-bottom:9px}
  #matList{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .matCard{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center;padding:7px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}
  .swatch{width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 14px rgba(0,0,0,.22)}
  .matName{font-size:12px;font-weight:800;color:#f4fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .matKey{font-size:10px;color:#9eb7c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media (max-width:880px){#materials{display:none}}

  body.fps-mode #hud, body.fps-mode #materials, body.fps-mode #tip, body.fps-mode #mini{display:none}
  #fpsHud{position:fixed;left:14px;top:14px;padding:10px 12px;border-radius:15px;background:rgba(4,8,12,.48);border:1px solid rgba(110,231,255,.18);backdrop-filter:blur(7px);font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.45;color:#c9f3ff;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.6)}
  #targetInfo{position:fixed;left:50%;top:calc(50% + 22px);transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(5,10,14,.42);border:1px solid rgba(255,255,255,.14);font-size:12px;color:#f2fbff;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.7)}
  #hotbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:7px;padding:8px;border-radius:18px;background:rgba(4,8,12,.55);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);box-shadow:0 12px 36px rgba(0,0,0,.35);user-select:none}
  .slot{width:62px;height:58px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;color:#e9fbff;font-size:11px;position:relative}
  .slot.active{outline:2px solid rgba(255,238,170,.88);box-shadow:0 0 22px rgba(255,229,133,.18), inset 0 1px 0 rgba(255,255,255,.18)}
  .slot .ico{font-size:23px;line-height:1}
  .slot .num{position:absolute;right:6px;top:5px;font-family:ui-monospace,Consolas,monospace;color:#ffeaa2}
  .slot .name{font-size:10px;color:#b6d6e6;margin-bottom:5px}
  #msg{position:fixed;left:50%;bottom:95px;transform:translateX(-50%);max-width:min(620px,calc(100vw - 28px));padding:8px 12px;border-radius:999px;background:rgba(7,15,20,.58);border:1px solid rgba(110,231,255,.18);color:#dcf7ff;font-size:12px;text-align:center;opacity:0;transition:opacity .22s;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.7)}
  #msg.show{opacity:1}

  .spriteIcon{width:34px;height:34px;background-image:var(--item-sheet, url('../assets/item_sheet_clean.png'));background-size:400% 400%;background-repeat:no-repeat;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));image-rendering:auto;border-radius:7px}
  .slot .spriteIcon{width:30px;height:30px;align-self:end;margin-top:5px}
  .itemCard .spriteIcon{width:38px;height:38px}

  #inventoryPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 28px));max-height:min(680px,calc(100vh - 28px));overflow:auto;padding:16px;border-radius:22px;background:rgba(8,13,18,.88);border:1px solid rgba(160,220,255,.20);box-shadow:0 22px 70px rgba(0,0,0,.55);backdrop-filter:blur(12px);z-index:5;color:#edfaff}
  #inventoryPanel.closed{display:none}
  #inventoryPanel h2{margin:0 0 5px;font-size:18px;color:#fff4c8}
  #inventoryPanel .invSub{font-size:12px;color:#a8c4d5;line-height:1.4;margin-bottom:12px}
  .invCols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .invBox{padding:12px;border-radius:17px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}
  .invBox h3{margin:0 0 9px;font-size:14px;color:#dff8ff}
  #itemGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .itemCard{min-height:74px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:7px;position:relative;overflow:hidden}
  .itemCard:before{content:"";position:absolute;inset:-20px;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.18),transparent 35%),linear-gradient(135deg,var(--skinA),var(--skinB));opacity:.28}
  .itemCard>*{position:relative}
  .itemIcon{font-size:24px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
  .itemName{font-size:10px;text-align:center;color:#d8eef8}
  .itemQty{position:absolute;right:7px;top:6px;font-family:ui-monospace,Consolas,monospace;color:#fff2ae;font-size:12px}
  #craftGrid{display:grid;gap:8px}
  .recipe{border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);padding:9px;text-align:left;color:#eefaff;cursor:pointer}
  .recipe:hover{filter:brightness(1.08);border-color:rgba(255,238,170,.45)}
  .recipe.locked{opacity:.45;cursor:not-allowed}
  .recipe .rTitle{font-weight:800;font-size:12px;color:#fff4c8}
  .recipe .rCost{font-size:11px;color:#b5cfdd;margin-top:3px}
  @media (max-width:760px){.invCols{grid-template-columns:1fr} #hotbar{gap:4px;padding:6px}.slot{width:45px;height:54px}.slot .name{font-size:9px}.slot .spriteIcon{width:26px;height:26px}}


.spriteImg{width:34px;height:34px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));border-radius:8px;display:block;pointer-events:none;user-select:none}
.slot .spriteImg{width:30px;height:30px;align-self:end;margin-top:5px}.itemCard .spriteImg{width:42px;height:42px}