/* Low-Poly World Explorer — HUD styling */

:root{
  --accent:#ffb35c;
  --accent-soft:rgba(255,179,92,.22);
  --panel:rgba(22,15,26,.62);
  --panel-line:rgba(255,179,92,.30);
  --ink:#fbeede;
  --ink-dim:rgba(251,238,222,.62);
  --shadow:0 6px 22px rgba(10,4,16,.45);
  --radius:12px;
  --fade:1.1s;
}

@media (prefers-color-scheme: light){
  :root{
    --panel:rgba(255,247,238,.74);
    --panel-line:rgba(150,84,20,.30);
    --ink:#3a2413;
    --ink-dim:rgba(58,36,19,.68);
    --shadow:0 6px 22px rgba(90,52,20,.22);
    --accent-soft:rgba(196,108,26,.20);
  }
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:#241a3a;
  color:var(--ink);
  font:400 13px/1.4 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action:none;
}

#scene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
  outline:none;
}
#scene:active{cursor:grabbing}
#scene:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

#hud{position:fixed;inset:0;pointer-events:none;z-index:5}

.panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

/* ---- top-right stats ---- */
#stats{
  position:absolute;
  top:14px;right:14px;
  min-width:186px;
  padding:10px 12px 9px;
}
.stat{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
  padding:2px 0;
}
.stat .k{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);
}
.stat .v{
  font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:600;
  color:var(--accent);
}
#inventory{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;padding-top:8px;
  border-top:1px solid var(--panel-line);
}
.mat{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 7px;border-radius:999px;
  background:var(--accent-soft);
  font-size:11px;letter-spacing:.02em;
  transition:transform .18s ease;
}
.mat b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent)}
.mat.bump{transform:scale(1.16)}
.sw{width:9px;height:9px;border-radius:2px;display:inline-block}
.sw-wood{background:#8a5c34}
.sw-stone{background:#8e867a}
.sw-fiber{background:#b6a24e}

/* ---- minimap ---- */
#mapwrap{
  position:absolute;
  right:14px;bottom:14px;
  width:158px;height:158px;
}
#minimap{
  width:158px;height:158px;
  display:block;
  border-radius:50%;
  border:1px solid var(--panel-line);
  background:var(--panel);
  box-shadow:var(--shadow);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.mapcard{
  position:absolute;
  font-size:9px;font-weight:700;letter-spacing:.1em;
  color:var(--accent);opacity:.75;
}
.mapcard-n{top:2px;left:50%;transform:translateX(-50%)}
.mapcard-s{bottom:2px;left:50%;transform:translateX(-50%)}
.mapcard-w{left:4px;top:50%;transform:translateY(-50%)}
.mapcard-e{right:4px;top:50%;transform:translateY(-50%)}
#coords{
  position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);
  font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---- controls hint ---- */
#hint{
  position:absolute;
  left:14px;bottom:14px;
  padding:9px 13px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--panel-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:12px;letter-spacing:.01em;
  opacity:1;
  transition:opacity var(--fade) ease;
}
#hint.faded{opacity:0}

/* ---- interaction prompt ---- */
#prompt{
  position:absolute;
  left:50%;bottom:82px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:7px 13px 7px 8px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:12.5px;white-space:nowrap;
}
#prompt[hidden]{display:none}
#prompt kbd{
  display:inline-grid;place-items:center;
  min-width:21px;height:21px;padding:0 5px;
  border-radius:6px;
  background:var(--accent);color:#2a1508;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- reticle ---- */
#reticle{
  position:absolute;left:50%;top:50%;
  width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  transition:transform .16s ease, background-color .16s ease;
}
#reticle.hot{
  transform:scale(1.9);
  background:var(--accent);
}

/* ---- toasts ---- */
#toasts{
  position:absolute;
  left:50%;bottom:132px;transform:translateX(-50%);
  display:flex;flex-direction:column-reverse;align-items:center;gap:6px;
}
.toast{
  padding:6px 12px;border-radius:999px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  font-size:12px;
  opacity:1;
  transition:opacity .5s ease, transform .5s ease;
}
.toast b{color:var(--accent)}
.toast.out{opacity:0;transform:translateY(-8px)}

/* ---- craft dialog ---- */
#craftBackdrop{
  position:absolute;inset:0;
  background:rgba(16,8,20,.44);
  pointer-events:auto;
}
#craftBackdrop[hidden]{display:none}

#craft{
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(430px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 40px));
  overflow:auto;
  padding:16px 18px 18px;
  border-radius:16px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  pointer-events:auto;
}
#craft[hidden]{display:none}
#craft header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#craft h2{
  margin:0;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}
#craftHelp{margin:6px 0 12px;font-size:12px;color:var(--ink-dim)}
#craftList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

button{font:inherit;color:inherit}
#craftClose{
  padding:5px 11px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--panel-line);
  font-size:12px;
}
#craftClose:hover{background:var(--accent-soft)}

.recipe{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  align-items:center;
  padding:10px 12px;
  border-radius:11px;
  border:1px solid var(--panel-line);
  background:var(--accent-soft);
  text-align:left;
  cursor:pointer;
  transition:transform .14s ease, background-color .14s ease;
}
.recipe:hover:not(:disabled){transform:translateX(3px)}
.recipe:disabled{opacity:.45;cursor:not-allowed}
.recipe .rn{font-size:13.5px;font-weight:650;color:var(--ink)}
.recipe .rc{
  grid-row:1 / span 2;grid-column:2;
  font-size:11px;color:var(--accent);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.recipe .rd{font-size:11.5px;color:var(--ink-dim)}
button:focus-visible,.recipe:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- loader ---- */
#loader{
  position:fixed;inset:0;z-index:20;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#2b1d46 0%,#5d3350 45%,#c26a3f 100%);
  color:#ffeeda;
  transition:opacity .7s ease;
}
#loader.done{opacity:0;pointer-events:none}
.loader-title{font-size:19px;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.loader-sub{margin-top:9px;font-size:12.5px;opacity:.78;text-align:center}

@media (max-width:640px){
  #stats{min-width:0;font-size:12px}
  #mapwrap,#minimap{width:118px;height:118px}
  #hint{font-size:11px;max-width:56vw}
}

@media (prefers-reduced-motion: reduce){
  :root{--fade:.01s}
  .mat,.recipe,.toast,#reticle,#loader{transition-duration:.01s}
}