/* WebCraft UI — pixel-flavoured chrome over a WebGL canvas. */

* { box-sizing: border-box; }

:root {
  --panel: #c6c6c6;
  --panel-dark: #8b8b8b;
  --panel-light: #ffffff;
  --slot: #8b8b8b;
  --slot-dark: #373737;
  --text: #f4f4f4;
  --shadow: #3f3f3f;
  --accent: #55ff55;
  --font: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
}

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #14161c; color: var(--text);
  font-family: var(--font);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui.hidden > *:not(.screen-overlay):not(.cursor-stack) { display: none !important; }

img.icon { image-rendering: pixelated; image-rendering: crisp-edges; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 20px; }

/* ------------------------------------------------------------------ loading */
#loading {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#10131a, #1d2430);
}
.loading-inner { text-align: center; width: min(460px, 82vw); }
.loading-logo { font-size: 40px; letter-spacing: 7px; font-weight: 700; text-shadow: 4px 4px 0 #23262e; margin-bottom: 26px; }
.loading-track { height: 14px; background: #0c0e13; border: 2px solid #4b5162; border-radius: 2px; overflow: hidden; }
#loading-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4caf50, #8bd66e); transition: width .18s ease; }
#loading-text { margin-top: 12px; font-size: 13px; opacity: .8; letter-spacing: 1px; }

/* ------------------------------------------------------------------ buttons */
.mc-btn {
  font-family: var(--font); font-size: 14px; letter-spacing: .6px;
  color: #fff; background: #6b6b6b;
  border: 2px solid #000; border-top-color: #a8a8a8; border-left-color: #a8a8a8;
  box-shadow: inset -2px -2px 0 #4a4a4a, inset 2px 2px 0 #9c9c9c;
  padding: 9px 16px; cursor: pointer; text-shadow: 2px 2px 0 #262626;
  pointer-events: auto; min-width: 170px; margin: 3px;
}
.mc-btn:hover { background: #7f8f6f; box-shadow: inset -2px -2px 0 #56634b, inset 2px 2px 0 #a9bd97; }
.mc-btn:active { box-shadow: inset 2px 2px 0 #4a4a4a; transform: translateY(1px); }
.mc-btn.primary { background: #4a7a3a; box-shadow: inset -2px -2px 0 #33532a, inset 2px 2px 0 #6fa85a; }
.mc-btn.primary:hover { background: #57913f; }
.mc-btn.danger { background: #8a3a34; box-shadow: inset -2px -2px 0 #5e2622, inset 2px 2px 0 #b45a52; }
.mc-btn.small { min-width: 86px; padding: 7px 10px; font-size: 12px; }

/* ------------------------------------------------------------------ title */
.title-screen {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  pointer-events: auto; overflow-y: auto;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(120,167,255,.35), transparent 60%),
    linear-gradient(#1b2434, #0e1118);
}
.title-wrap { text-align: center; padding: 32px 16px 60px; width: min(860px, 94vw); }
.logo { display: flex; justify-content: center; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.logo-ch {
  font-size: clamp(26px, 6.4vw, 54px); font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(#e8e8e8, #9a9a9a); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 4px 0 rgba(0,0,0,.45);
  transform: translateY(0);
  animation: bobch 3.2s ease-in-out infinite;
}
.logo-ch:nth-child(2n) { animation-delay: .18s; }
.logo-ch:nth-child(3n) { animation-delay: .36s; }
@keyframes bobch { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.tagline { opacity: .72; font-size: 13px; margin-bottom: 26px; letter-spacing: .5px; }
.title-menu { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.title-menu.wide { width: min(620px, 92vw); margin: 0 auto; }
.title-menu h2 { font-size: 18px; font-weight: 600; margin: 6px 0 12px; letter-spacing: 1px; }
.title-footer { position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; opacity: .45; }

.world-list {
  width: 100%; max-height: 46vh; overflow-y: auto; background: rgba(0,0,0,.35);
  border: 2px solid #000; padding: 6px; margin-bottom: 10px; text-align: left;
}
.world-item {
  display: flex; align-items: center; gap: 8px; padding: 8px; margin-bottom: 4px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); cursor: pointer;
}
.world-item:hover { background: rgba(255,255,255,.12); }
.world-info { flex: 1; min-width: 0; }
.world-name { font-size: 14px; margin-bottom: 3px; }
.world-meta { font-size: 11px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { padding: 22px; text-align: center; opacity: .55; font-size: 13px; }
.btn-row { display: flex; justify-content: center; flex-wrap: wrap; }
.form-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; justify-content: space-between; }
.form-row label { font-size: 13px; opacity: .85; }
.text-input {
  font-family: var(--font); font-size: 13px; padding: 8px 10px; color: #fff;
  background: #0d0d0d; border: 2px solid #a0a0a0; outline: none; flex: 1; max-width: 340px;
}
.text-input:focus { border-color: var(--accent); }

.help-modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid; place-items: center; z-index: 70; padding: 16px; }
.help-box {
  background: #24262e; border: 3px solid #000; box-shadow: inset 0 0 0 2px #4d5160;
  max-width: 640px; max-height: 82vh; overflow-y: auto; padding: 22px; font-size: 13px; line-height: 1.65;
}
.help-box h2 { margin-top: 0; }
.help-box ul { padding-left: 20px; }
.help-box li { margin-bottom: 6px; }
.help-box code { background: #11131a; padding: 1px 5px; border-radius: 2px; color: #9fe08a; }

/* ------------------------------------------------------------------ hud */
.crosshair {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  mix-blend-mode: difference; opacity: .85;
}
.crosshair::before, .crosshair::after {
  content: ''; position: absolute; background: #fff;
}
.crosshair::before { left: 9px; top: 1px; width: 2px; height: 18px; }
.crosshair::after { top: 9px; left: 1px; height: 2px; width: 18px; }

.vignette {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(120,0,0,.85) 100%);
}
.damage-flash { position: absolute; inset: 0; background: rgba(190,20,20,.55); opacity: 0; transition: opacity .12s; }
.water-overlay { position: absolute; inset: 0; display: none; background: rgba(40,90,180,.34); }

.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.item-name { font-size: 14px; text-shadow: 2px 2px 0 #000; opacity: 0; transition: opacity .3s; height: 18px; }

.stats-row { display: flex; justify-content: space-between; width: 372px; align-items: flex-end; }
.stats-left, .stats-right { display: flex; flex-direction: column-reverse; gap: 2px; }
.stats-right { align-items: flex-end; }
.stat-bar { display: flex; gap: 1px; }
.pip { width: 9px; height: 9px; }
.pip.heart, .pip.food {
  clip-path: polygon(50% 100%, 0 55%, 0 22%, 16% 6%, 34% 6%, 50% 22%, 66% 6%, 84% 6%, 100% 22%, 100% 55%);
}
.pip.heart.full { background: #ff3b3b; }
.pip.heart.half { background: linear-gradient(90deg, #ff3b3b 50%, #4a1010 50%); }
.pip.heart.empty { background: #4a1010; }
.pip.food.full { background: #d98a3a; }
.pip.food.half { background: linear-gradient(90deg, #d98a3a 50%, #3d2a14 50%); }
.pip.food.empty { background: #3d2a14; }
.pip.armor { clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%); }
.pip.armor.full { background: #dcdcdc; }
.pip.armor.half { background: linear-gradient(90deg, #dcdcdc 50%, #34343a 50%); }
.pip.armor.empty { background: #34343a; }
.pip.air { border-radius: 50%; }
.pip.air.full { background: #9fd8ff; box-shadow: inset -2px -2px 0 rgba(0,0,0,.3); }
.pip.air.empty { background: transparent; }

.xp-row { display: flex; align-items: center; justify-content: center; width: 372px; position: relative; height: 14px; }
.xp-bar { width: 100%; height: 8px; background: #1c1c1c; border: 1px solid #000; }
.xp-fill { height: 100%; width: 0%; background: linear-gradient(#a7f542, #63c412); transition: width .15s; }
.xp-level {
  position: absolute; left: 50%; transform: translateX(-50%); top: -6px;
  color: #7fff2f; font-size: 14px; font-weight: 700; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}

.hotbar { display: flex; gap: 2px; padding: 3px; background: rgba(0,0,0,.42); border: 2px solid #000; }
.hslot {
  width: 42px; height: 42px; position: relative;
  background: rgba(139,139,139,.65);
  box-shadow: inset 2px 2px 0 rgba(55,55,55,.9), inset -2px -2px 0 rgba(255,255,255,.35);
}
.hslot.selected { outline: 3px solid #fff; outline-offset: 1px; z-index: 2; }
.hslot img.icon, .slot img.icon { position: absolute; left: 5px; top: 5px; width: 32px; height: 32px; }
.hslot .count, .slot .count, .cursor-stack .count {
  position: absolute; right: 2px; bottom: 0; font-size: 12px; font-weight: 700;
  text-shadow: 2px 2px 0 #000; pointer-events: none;
}
.hslot .dur, .slot .dur {
  position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #000; display: none;
}
.dur-fill { height: 100%; width: 100%; background: #4caf50; }

/* chat */
.chat-log {
  position: absolute; left: 10px; bottom: 128px; width: min(560px, 62vw);
  max-height: 210px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 12px; line-height: 1.5;
}
.chat-log.open { overflow-y: auto; background: rgba(0,0,0,.42); padding: 4px 6px; pointer-events: auto; }
.chat-line { text-shadow: 2px 2px 0 #000; transition: opacity .5s; word-break: break-word; }
.chat-input {
  position: absolute; left: 10px; bottom: 100px; width: min(620px, 76vw);
  font-family: var(--font); font-size: 13px; padding: 7px 9px;
  background: rgba(0,0,0,.72); color: #fff; border: 2px solid #8f8f8f; outline: none; pointer-events: auto;
}

/* debug */
.debug {
  position: absolute; left: 8px; top: 8px; font-size: 12px; line-height: 1.55;
  background: rgba(0,0,0,.5); padding: 6px 9px; text-shadow: 1px 1px 0 #000; max-width: 60vw;
}
.fps { position: absolute; right: 10px; top: 8px; font-size: 12px; background: rgba(0,0,0,.45); padding: 4px 8px; }

.toast {
  position: absolute; left: 50%; top: 16%; transform: translate(-50%, -8px);
  background: rgba(0,0,0,.72); padding: 8px 16px; font-size: 13px;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* death */
.death-screen {
  position: absolute; inset: 0; background: rgba(120,0,0,.55);
  display: flex; align-items: center; justify-content: center; pointer-events: auto;
}
.death-box { text-align: center; }
.death-box h1 { font-size: 44px; color: #ff5b5b; text-shadow: 3px 3px 0 #000; margin-bottom: 8px; }
.death-msg { opacity: .85; margin-bottom: 18px; }

/* ------------------------------------------------------------------ screens */
.screen-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); pointer-events: auto; overflow-y: auto; padding: 14px;
}
.screen-pad { display: flex; align-items: center; justify-content: center; min-height: 100%; width: 100%; }
.panel {
  background: #c6c6c6; color: #3f3f3f; border: 3px solid #000;
  box-shadow: inset 2px 2px 0 #ffffff, inset -2px -2px 0 #555a5a;
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.panel-title { font-size: 15px; color: #3f3f3f; align-self: flex-start; margin-bottom: 2px; letter-spacing: .5px; }
.panel-sep { height: 2px; background: #8b8b8b; width: 100%; margin: 2px 0; }

.slot-grid { display: grid; gap: 2px; }
.slot {
  width: 40px; height: 40px; position: relative; cursor: pointer;
  background: #8b8b8b; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #ffffff;
}
.slot:hover { background: #b6b6b6; }
.slot img.icon { left: 4px; top: 4px; width: 32px; height: 32px; }
.slot .count { color: #fff; }
.hotbar-grid { margin-top: 6px; }
.result-slot { width: 48px; height: 48px; background: #9c9c9c; }
.result-slot img.icon { left: 8px; top: 8px; }
.armor-slot { background: #7d7d7d; }

.inv-top { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.inv-top.center { justify-content: center; align-items: center; }
.mini-label { font-size: 11px; color: #4a4a4a; margin-bottom: 3px; }
.armor-wrap, .craft-wrap { display: flex; flex-direction: column; }
.craft-wrap { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.craft-wrap .mini-label { width: 100%; }
.arrow { font-size: 22px; color: #555; padding: 0 4px; }

.player-preview { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 74px; }
.doll { position: relative; width: 62px; height: 108px; }
.doll > div { position: absolute; background: #4a7ab8; box-shadow: inset -3px -3px 0 rgba(0,0,0,.22); }
.doll-head { left: 17px; top: 0; width: 28px; height: 28px; background: #c9a17a; }
.doll-body { left: 17px; top: 30px; width: 28px; height: 40px; background: #3f8ac4; }
.doll-arm-l { left: 3px; top: 30px; width: 12px; height: 38px; background: #c9a17a; }
.doll-arm-r { right: 3px; top: 30px; width: 12px; height: 38px; background: #c9a17a; }
.doll-leg-l { left: 17px; top: 72px; width: 13px; height: 34px; background: #3a4f8a; }
.doll-leg-r { left: 32px; top: 72px; width: 13px; height: 34px; background: #3a4f8a; }

/* furnace */
.furnace-top { gap: 14px; }
.furnace-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flame { width: 22px; height: 22px; background: #6d6d6d; position: relative; overflow: hidden; }
.flame-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0%; background: linear-gradient(#ffd24a, #ff7a1e); }
.cook-arrow { width: 46px; height: 16px; background: #6d6d6d; position: relative; overflow: hidden; }
.cook-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #e8e8e8, #ffffff); }

/* creative */
.panel.creative { max-width: min(560px, 94vw); }
.tabs { display: flex; flex-wrap: wrap; gap: 2px; align-self: stretch; }
.tab {
  font-family: var(--font); font-size: 11px; padding: 5px 8px; cursor: pointer;
  background: #7d7d7d; color: #eee; border: 2px solid #000; border-bottom: none;
}
.tab.active { background: #c6c6c6; color: #2a2a2a; }
.creative-list { width: 100%; max-height: 40vh; overflow-y: auto; background: #8b8b8b; padding: 3px; }
.creative-grid { justify-content: center; }
.search {
  font-family: var(--font); font-size: 12px; padding: 6px 8px; width: 100%;
  background: #000; color: #fff; border: 2px solid #555; outline: none;
}
.search:focus { border-color: var(--accent); }

/* menus */
.panel.menu { min-width: min(380px, 92vw); align-items: center; }
.panel.settings { min-width: min(440px, 94vw); }
.setting-row { width: 100%; display: flex; flex-direction: column; gap: 3px; margin: 3px 0; }
.setting-row label { font-size: 12px; color: #3a3a3a; }
.setting-row input[type=range] { width: 100%; accent-color: #4a7a3a; cursor: pointer; }
.control-list { width: 100%; font-size: 12px; }
.control-row { display: flex; justify-content: space-between; padding: 3px 2px; border-bottom: 1px solid #b0b0b0; }
.ctrl-key { color: #1f1f1f; font-weight: 700; }

/* cursor stack + tooltip */
.cursor-stack { position: fixed; z-index: 80; pointer-events: none; width: 36px; height: 36px; }
.cursor-stack img.icon { width: 36px; height: 36px; }
.slot-tooltip {
  position: fixed; z-index: 85; pointer-events: none; background: rgba(16,0,26,.94);
  border: 2px solid #2d0a52; padding: 6px 9px; font-size: 12px; color: #fff; max-width: 250px;
}
.tt-line { color: #a8a8a8; font-size: 11px; margin-top: 2px; }
.tt-id { color: #5a5a5a; font-size: 10px; margin-top: 4px; }

/* ------------------------------------------------------------------ touch */
.touch-controls { position: absolute; inset: 0; pointer-events: none; display: none; }
body.touch .touch-controls { display: block; }
.tc-stick {
  position: absolute; left: 18px; bottom: 96px; width: 108px; height: 108px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25); pointer-events: auto;
}
.tc-knob {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(255,255,255,.35);
}
.tc-buttons { position: absolute; right: 14px; bottom: 92px; display: grid; grid-template-columns: 68px 68px; gap: 8px; }
.tc-btn {
  pointer-events: auto; width: 68px; height: 54px; font-family: var(--font); font-size: 13px;
  background: rgba(0,0,0,.42); color: #fff; border: 2px solid rgba(255,255,255,.35);
}
body.touch .hud-bottom { bottom: 4px; }
body.touch .chat-log { bottom: 168px; }

@media (max-width: 640px) {
  .stats-row, .xp-row { width: 300px; }
  .hslot { width: 34px; height: 34px; }
  .hslot img.icon { left: 3px; top: 3px; width: 28px; height: 28px; }
  .slot { width: 34px; height: 34px; }
  .slot img.icon { left: 3px; top: 3px; width: 28px; height: 28px; }
  .slot-grid { grid-template-columns: repeat(9, 34px) !important; }
  .creative-grid { grid-template-columns: repeat(9, 34px) !important; }
}