:root{
  --bg:#0b1014; --panel:#141c22e6; --panel2:#1b2630; --line:#2c3b47;
  --acc:#5fd39a; --acc2:#39a97a; --text:#e7f0ef; --dim:#8ea3a8; --danger:#e0685f;
  --slot:#0f171dcc; --slotb:#33454f;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:"Trebuchet MS","Segoe UI",Roboto,system-ui,sans-serif;user-select:none}
#app{position:fixed;inset:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none !important}

#uw{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at 50% 50%,#1e6ea855 0%,#0b3f6bcc 100%);mix-blend-mode:screen}
#uw.on{opacity:.85}
#damage{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 55%,transparent 45%,#c0302688 100%)}
#damage.hit{animation:hit .45s ease-out}
@keyframes hit{0%{opacity:1}100%{opacity:0}}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 55%,#00000070 100%)}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
#crosshair i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  background:#fff;border-radius:50%;box-shadow:0 0 3px #000;opacity:.85}
#crosshair svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:#ffffff22;stroke-width:3}
.ring-fg{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:106.8;stroke-dashoffset:106.8;transition:stroke-dashoffset .05s linear}

#topleft{position:absolute;left:14px;top:12px;display:flex;flex-direction:column;gap:8px}
#clock{display:flex;align-items:center;gap:8px;background:#0d151bb3;border:1px solid var(--line);
  border-radius:10px;padding:6px 12px;font-size:13px;letter-spacing:.04em;backdrop-filter:blur(6px)}
#clock-icon{font-size:15px}
#debug{background:#0d151bcc;border:1px solid var(--line);border-radius:10px;padding:8px 12px;
  font:12px/1.55 ui-monospace,Consolas,monospace;color:var(--dim);white-space:pre}

#tutorial{position:absolute;left:50%;top:56px;transform:translateX(-50%);max-width:min(560px,86vw);
  text-align:center;background:#0d151bd9;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:10px;padding:10px 18px;font-size:14px;line-height:1.45;backdrop-filter:blur(6px);
  animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
#toast{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);display:flex;
  flex-direction:column;gap:6px;align-items:center}
.toast{background:#0d151be6;border:1px solid var(--line);border-radius:9px;padding:7px 15px;font-size:13px;
  animation:up .35s ease;opacity:1;transition:opacity .3s}
.toast.warn{border-color:#7a4a3d;color:#f0b8a8}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

#bottom{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;
  flex-direction:column;align-items:center;gap:7px}
#hearts{display:flex;gap:3px;height:16px}
.heart{width:15px;height:14px;background:
  radial-gradient(circle at 30% 32%,#ff6a5e 55%,transparent 56%),
  radial-gradient(circle at 70% 32%,#ff6a5e 55%,transparent 56%),
  linear-gradient(#ff6a5e,#c2382d);
  -webkit-mask:radial-gradient(circle at 30% 32%,#000 55%,transparent 56%),
    radial-gradient(circle at 70% 32%,#000 55%,transparent 56%),
    linear-gradient(#000,#000);
  -webkit-mask-composite:source-over;clip-path:polygon(50% 100%,0 45%,0 18%,25% 0,50% 18%,75% 0,100% 18%,100% 45%);
  filter:drop-shadow(0 1px 1px #0008)}
.heart.half{opacity:.55}
.heart.empty{background:#2b3740;filter:none}
#itemname{font-size:13px;color:#dfe9e6;text-shadow:0 1px 3px #000;height:17px;opacity:0;transition:opacity .3s}
#itemname.show{opacity:1}
#hotbar{display:flex;gap:5px;background:#0b1116b3;border:1px solid var(--line);border-radius:12px;
  padding:5px;backdrop-filter:blur(7px)}
.slot{position:relative;width:52px;height:52px;background:var(--slot);border:1px solid var(--slotb);
  border-radius:9px;display:flex;align-items:center;justify-content:center;transition:transform .1s,border-color .1s}
.slot img{width:38px;height:38px;image-rendering:pixelated;pointer-events:none}
.slot .cnt{position:absolute;right:4px;bottom:2px;font-size:12px;font-weight:700;color:#fff;
  text-shadow:0 1px 2px #000,0 0 3px #000}
.slot .key{position:absolute;left:4px;top:1px;font-size:10px;color:#7e939b}
#hotbar .slot.sel{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 14px #5fd39a55;transform:translateY(-3px)}
#handitem{position:absolute;right:6%;bottom:2%;width:190px;height:190px;pointer-events:none;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(-6px 6px 10px #0009);transform-origin:80% 90%;image-rendering:pixelated;opacity:.98}
#handitem.swing{animation:swing .26s ease-out}
@keyframes swing{0%{transform:rotate(0) translate(0,0)}
  45%{transform:rotate(-28deg) translate(-16px,26px)}100%{transform:rotate(0) translate(0,0)}}

#lockhint{position:absolute;left:50%;top:58%;transform:translateX(-50%);background:#0d151be6;
  border:1px solid var(--acc);border-radius:10px;padding:9px 18px;font-size:13.5px;letter-spacing:.03em;
  animation:fadein .3s ease}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#101c23d9,#05090cf2);backdrop-filter:blur(4px);z-index:5}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 30px;
  min-width:330px;max-width:min(94vw,560px);display:flex;flex-direction:column;gap:11px;
  box-shadow:0 24px 60px #000a,inset 0 1px 0 #ffffff10}
.panel.wide{max-width:min(96vw,900px)}
.panel h2{font-size:19px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#cfe5dd}
.panel h2.danger{color:var(--danger)}
.logo{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:800;letter-spacing:.14em}
.logo-cube{width:26px;height:26px;background:linear-gradient(135deg,var(--acc),#2b7d5c);
  border-radius:5px;transform:rotate(45deg);box-shadow:0 0 22px #5fd39a66}
.sub{font-size:13px;letter-spacing:.16em;text-transform:lowercase;margin-bottom:8px}
.dim{color:var(--dim);font-size:13px;line-height:1.5}
.btn{appearance:none;border:1px solid var(--line);background:linear-gradient(#1d2830,#161f26);
  color:var(--text);font:600 14px/1 inherit;letter-spacing:.05em;padding:13px 18px;border-radius:11px;
  cursor:pointer;transition:.14s;text-align:center}
.btn:hover{border-color:var(--acc);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(#3fbb87,#2b8a63);border-color:#4fd39a;color:#06110c}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:#0000;color:var(--dim)}
.hints{margin-top:10px;border-top:1px solid var(--line);padding-top:12px;display:flex;
  flex-direction:column;gap:5px;font-size:12.5px;color:var(--dim)}
.row{display:grid;grid-template-columns:1fr 160px 46px;align-items:center;gap:12px;font-size:13.5px}
.row b{color:var(--acc);font-size:12.5px;text-align:right}
input[type=range]{appearance:none;height:5px;border-radius:4px;background:#2a3942;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--acc);cursor:pointer;box-shadow:0 0 8px #5fd39a88}
select{background:#1b2630;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px}

.bar{width:280px;height:6px;background:#1b2630;border-radius:4px;overflow:hidden;margin-top:18px}
#loadbar{width:8%;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .25s}
#loading{flex-direction:column;gap:10px}
#loading .logo{font-size:26px}

/* ---------- inventory ---------- */
.inv-cols{display:grid;grid-template-columns:1fr 300px;gap:26px}
.grid{display:grid;grid-template-columns:repeat(9,52px);gap:5px}
.grid.hot .slot{border-color:#455a66}
.sep{height:1px;background:var(--line);margin:12px 0}
.inv-right{border-left:1px solid var(--line);padding-left:22px;max-height:420px;overflow-y:auto}
#recipes{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.rec{display:flex;align-items:center;gap:10px;background:#101a20;border:1px solid var(--line);
  border-radius:10px;padding:7px 9px;cursor:pointer;transition:.12s}
.rec:hover{border-color:var(--acc)}
.rec.no{opacity:.38;cursor:not-allowed}
.rec img{width:32px;height:32px;image-rendering:pixelated}
.rec .meta{flex:1;min-width:0}
.rec .nm{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .ing{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .out{font-size:12px;color:var(--acc);font-weight:700}
.slot.pick{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
#drag{position:absolute;width:44px;height:44px;pointer-events:none;display:none;z-index:20}
#drag img{width:44px;height:44px;image-rendering:pixelated;filter:drop-shadow(0 3px 6px #000a)}
#drag .cnt{position:absolute;right:0;bottom:-2px;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
.inv-right::-webkit-scrollbar{width:6px}
.inv-right::-webkit-scrollbar-thumb{background:#31424c;border-radius:4px}
@media (max-height:640px){ .slot{width:44px;height:44px} .slot img{width:32px;height:32px}
  .grid{grid-template-columns:repeat(9,44px)} #handitem{width:140px;height:140px} }