/* Strata — game UI styles */
:root {
  --ink: #101418;
  --panel: #161c22;
  --line: #2b3540;
  --text: #eaf2f2;
  --dim: #9fb0ba;
  --mint: #54d0a0;
  --ember: #ff8a5c;
  --teal: #57c7d8;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); }
body { font-family: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; color: var(--text); }

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

/* Crosshair */
#crosshair {
  position: fixed; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 10;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: rgba(240, 246, 240, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
#crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

/* HUD */
#hud { position: fixed; left: 14px; top: 12px; z-index: 10; font-size: 12px; color: var(--dim);
  text-shadow: 0 1px 2px rgba(0,0,0,.8); line-height: 1.6; pointer-events: none; }
#hud b { color: var(--mint); font-weight: 600; }

/* Hotbar */
#hotbar {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 11; padding: 6px;
  background: rgba(13, 17, 22, 0.72); border: 1px solid var(--line); border-radius: 10px;
}
.slot {
  width: 52px; height: 52px; border-radius: 8px; position: relative;
  border: 2px solid var(--line); background: #0d1116;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.slot img { width: 38px; height: 38px; image-rendering: pixelated; border-radius: 4px; }
.slot .key { position: absolute; top: 2px; left: 5px; font-size: 10px; color: var(--dim); }
.slot[aria-selected="true"] { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(84, 208, 160, .35), 0 0 14px rgba(84, 208, 160, .35); }

/* Start / menu overlay */
#overlay {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(22, 30, 38, 0.86), rgba(8, 11, 15, 0.94));
}
#overlay .card {
  max-width: 420px; width: calc(100% - 32px); padding: 26px 28px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
#overlay h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: 2px; }
#overlay h1 .a { color: var(--mint); } #overlay h1 .b { color: var(--teal); }
#overlay p { color: var(--dim); font-size: 13px; margin: 8px 0 18px; }
.btn {
  display: inline-block; border: 0; border-radius: 10px; padding: 12px 26px;
  font: inherit; font-weight: 700; letter-spacing: 1px; cursor: pointer;
  background: linear-gradient(135deg, var(--mint), var(--teal)); color: #082019;
  text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); margin-left: 8px; }
#overlay .keys { margin-top: 16px; font-size: 11.5px; color: var(--dim); text-align: left; line-height: 1.8; }
#overlay .keys kbd {
  background: #0c1015; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; font: inherit; color: var(--text);
}

/* Touch controls */
#touch { position: fixed; inset: 0; z-index: 12; display: none; pointer-events: none; }
body.touch #touch { display: block; }
#touch > * { pointer-events: auto; }
#touch-pad {
  position: absolute; left: 18px; bottom: 84px; width: 128px; height: 128px; border-radius: 50%;
  background: rgba(16, 22, 28, 0.55); border: 2px solid rgba(87, 199, 216, 0.5);
  touch-action: none;
}
#touch-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(84, 208, 160, 0.75); pointer-events: none;
}
.touch-btn {
  position: absolute; width: 64px; height: 64px; border-radius: 12px; border: 2px solid var(--line);
  background: rgba(16, 22, 28, 0.65); color: var(--text); font: 700 12px/1 inherit;
  font-family: inherit; touch-action: none; letter-spacing: 1px;
}
#touch-jump { right: 18px; bottom: 150px; }
#touch-break { right: 96px; bottom: 84px; border-color: rgba(255, 138, 92, .6); }
#touch-place { right: 18px; bottom: 84px; border-color: rgba(84, 208, 160, .6); }