/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; overflow: hidden; font-family: 'Courier New', monospace; color: #ffe81f; }
#c { display: block; width: 100vw; height: 100vh; }

/* ── Start overlay ── */
#ov {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.75) 0%, #000 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 200;
}

/* Title panel */
.tp {
  border: 2px solid #ffe81f;
  box-shadow: 0 0 40px #ffe81f55, inset 0 0 60px rgba(0,0,0,.9);
  padding: 2.2rem 3.5rem 1.8rem; text-align: center;
  max-width: 660px; width: 90%;
  background: rgba(0,0,10,.93); border-radius: 4px; margin-bottom: 1.8rem;
}
.tp .epi { font-size: .68rem; letter-spacing: .5em; color: #666; margin-bottom: .6rem; }
.tp h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: .25em;
  color: #ffe81f; text-shadow: 0 0 20px #ffe81f, 0 0 50px #ff8800; line-height: 1.1;
}
.tp .mid { color: #ff4400; font-size: 1rem; letter-spacing: .4em; margin: .45rem 0; }
.tp .sub { font-size: .8rem; letter-spacing: .35em; color: #aaa; }
.tp .tag { margin-top: .9rem; font-size: .68rem; color: #444; font-style: italic; }

/* Controls box */
.cb {
  font-size: .8rem; line-height: 2.1; color: #ccc;
  background: rgba(255,232,31,.04); border: 1px solid rgba(255,232,31,.15);
  padding: 1.1rem 2.2rem; border-radius: 3px; margin-bottom: 1.4rem; text-align: left;
}
.cb span { color: #ffe81f; font-weight: 700; display: inline-block; min-width: 120px; }

/* Start button */
.btn {
  font-size: 1rem; letter-spacing: .35em; background: none;
  border: 2px solid #ffe81f; color: #ffe81f; padding: .7rem 2.2rem;
  cursor: pointer; font-family: inherit; transition: all .25s;
}
.btn:hover { background: rgba(255,232,31,.12); box-shadow: 0 0 25px #ffe81f44; }

/* ── Loading screen ── */
#ld {
  position: fixed; inset: 0; background: #000;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  z-index: 300;
}
#ld p { font-size: 1rem; letter-spacing: .3em; color: #ffe81f; margin-bottom: 1rem; }
.bar-wrap { width: 280px; height: 6px; background: #222; border: 1px solid #ffe81f44; border-radius: 3px; }
.bar { height: 100%; background: #ffe81f; border-radius: 3px; width: 0%; transition: width .15s; }
.ld-sub { margin-top: .8rem; font-size: .7rem; color: #555; letter-spacing: .15em; }

/* ── HUD ── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; display: none; }

/* Crosshair */
#xh { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; }
#xh::before, #xh::after { content: ''; position: absolute; background: rgba(255,255,255,.9); }
#xh::before { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
#xh::after  { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }

/* Stats */
#st { position: absolute; top: 1rem; left: 1rem; font-size: .72rem; line-height: 2; text-shadow: 1px 1px 3px #000; }
#st .l { color: #666; }

/* Compass */
#cp { position: absolute; top: 1rem; right: 8.5rem; text-align: center; font-size: 1.1rem; }
#cp .d { font-size: .62rem; color: #777; }

/* Minimap */
#mm { position: absolute; top: 1rem; right: 1rem; border: 1px solid rgba(255,232,31,.3); border-radius: 3px; }

/* Hotbar */
#hb { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.sl {
  width: 52px; height: 52px; border: 2px solid rgba(255,255,255,.2); border-radius: 3px;
  background: rgba(0,0,0,.55); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: .54rem; color: #aaa; position: relative;
  transition: border-color .1s;
}
.sl.on { border-color: #ffe81f; box-shadow: 0 0 12px #ffe81f44; }
.sl .k { position: absolute; top: 2px; left: 4px; font-size: .5rem; color: #555; }
.sl .sw { width: 26px; height: 26px; border-radius: 2px; margin-bottom: 3px; }

/* Hint */
#hint {
  position: absolute; bottom: 5.8rem; left: 50%; transform: translateX(-50%);
  font-size: .65rem; color: #555; white-space: nowrap; letter-spacing: .1em;
}

/* Pause overlay */
#paus {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; z-index: 150;
  pointer-events: none; cursor: pointer;
}
#paus h2 { font-size: 1.8rem; color: #ffe81f; letter-spacing: .3em; text-shadow: 0 0 20px #ffe81f; }
#paus .paus-hint { color: #888; font-size: .75rem; margin-top: .6rem; letter-spacing: .12em; }