:root {
  --space-black: #000000;
  --hud-cyan: #00e5ff;
  --hud-dim: #444;
  --error-red: #ff3333;
  --cell-bg: #080808;
  --digital-font: 'Share Tech Mono', monospace;
  --ui-font: 'Outfit', sans-serif;
}

body {
  background: var(--space-black);
  color: #fff;
  font-family: var(--ui-font);
  margin: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- SCREEN LAYOUT --- */
.v-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: radial-gradient(circle at center, #111 0%, #000 100%);
}

.v-screen.active { display: flex; }

.v-body {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* --- HUD --- */
.hud-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-family: var(--digital-font);
  color: var(--hud-cyan);
  font-size: 0.9rem;
  border-bottom: 1px solid #222;
  padding-bottom: 5px;
}

/* --- THE BOARD (REPAIRED) --- */
.board-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  padding: 4px;
  border: 1px solid #333;
  box-sizing: border-box;
}

.board {
  display: grid; /* CRITICAL FIX */
  width: 100%;
  height: 100%;
  background: #000;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--digital-font);
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  border: 1px solid #222;
  cursor: pointer;
  box-sizing: border-box;
}

/* Sub-grid lines (3x3 or 2x2 logic) */
.cell.cell-edge-r { border-right: 2px solid var(--hud-cyan); }
.cell.cell-edge-b { border-bottom: 2px solid var(--hud-cyan); }

.cell.given { color: var(--hud-dim); background: rgba(255,255,255,0.02); }
.cell.user { color: #fff; }
.cell.selected { background: rgba(0, 229, 255, 0.15); box-shadow: inset 0 0 10px var(--hud-cyan); }
.cell.error { color: var(--error-red); background: rgba(255, 0, 0, 0.1); }
.cell.hint-cell { color: #00ff00; }

/* --- CONTROLS --- */
.action-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

.btn-os {
  background: #111;
  border: 1px solid #333;
  color: #eee;
  padding: 10px 2px;
  font-size: 0.65rem;
  font-family: var(--ui-font);
  font-weight: 600;
  cursor: pointer;
}

.btn-os:hover { border-color: var(--hud-cyan); color: var(--hud-cyan); }

/* --- NUMBER PAD --- */
.number-pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 100%;
}

.num-btn {
  background: #0a0a0a;
  border: 1px solid #222;
  color: #fff;
  font-family: var(--digital-font);
  font-size: 1.4rem;
  padding: 12px 0;
  cursor: pointer;
}

.num-btn:active { background: var(--hud-cyan); color: #000; }
.num-btn-clear { grid-column: span 2; color: var(--error-red); border-color: #311; }

/* --- WIN POPUP --- */
.win-banner {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border: 1px solid var(--hud-cyan);
}
.win-banner.hidden { display: none; }