/* ============================================
   Sudoku Puzzle — style.css
   ============================================ */

/* === HERO === */
.sudoku-hero {
  min-height: 28vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-height) + 56px) 5% 48px;
  position: relative;
  overflow: hidden;
}

.sudoku-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 20% 50%, rgba(76,81,191,0.15) 0%, transparent 70%),
              radial-gradient(ellipse 50% 50% at 80% 20%, rgba(124,58,237,0.10) 0%, transparent 60%);
  pointer-events: none;
}

.sudoku-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.sudoku-hero p {
  font-size: 0.97rem;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.8;
  margin-top: 8px;
}

/* === GAME WRAPPER === */
.game-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 5% 100px;
}

.game-card {
  width: 100%;
  max-width: 600px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
}

/* === GRID CONTAINER === */
.sudoku-grid-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.span_of_1 {
  display: inline-block;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

.indiv {
  display: inline-block;
  padding: 4px;
  border-radius: 10px;
}

#tablesu {
  border-collapse: collapse;
  table-layout: fixed;
}

/* === GRID CELLS === */
.su-style-s,
.su-style {
  width: clamp(28px, 3.8vw, 52px);
  height: clamp(28px, 3.8vw, 52px);
  padding: 0;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  position: relative;
  transition: background 0.15s ease;
}

.su-style-s {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

.su-style {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(76,81,191,0.18);
}

.su-style-s:hover { background: rgba(124,58,237,0.18); }
.su-style:hover   { background: rgba(124,58,237,0.28); }

/* Error state */
.bookerror {
  background: rgba(220,38,38,0.2) !important;
  border-color: rgba(220,38,38,0.5) !important;
}

.bookerror .bookeh { color: #f87171 !important; }

/* Number shown inside cell — !important overrides the inline margin-top:27% the JS injects */
.su-style h3,
.su-style-s h3 {
  margin: 0 !important;
  padding: 0;
  font-size: clamp(10px, 1.4vw, 22px);
  font-weight: 700;
  line-height: clamp(28px, 3.8vw, 52px);
  color: var(--text);
}

.bookeh {
  color: #818cf8 !important;
  font-weight: 700;
}

/* === NUMBER PICKER POPUP (#bookx) === */
#reserve {
  display: none; /* hidden on desktop — picker moves into cells */
  width: 100%;
  justify-content: center;
}

#bookx {
  position: absolute;
  z-index: 100;
  align-self: flex-start;
}

#booky {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}

#book {
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: rgba(15,8,38,0.95);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,58,237,0.2);
}

#bookz {
  padding: 4px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book1 {
  display: flex;
  gap: 2px;
}

.su-style-sl {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.su-style-sl:hover {
  background: rgba(124,58,237,0.3);
  border-color: rgba(124,58,237,0.5);
}

.su-style-sl h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

/* Reset button (↻) */
.rsbt {
  border-color: rgba(220,38,38,0.3);
  background: rgba(220,38,38,0.08);
}

.rsbt:hover {
  background: rgba(220,38,38,0.2);
  border-color: rgba(220,38,38,0.5);
}

/* Clear button (hidden desktop, hidden mobile too — not used in current flow) */
.su-style-sll {
  display: none;
}

/* === TIMER === */
.timer {
  font-family: 'Orbitron', monospace;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 20px;
}

.timer span { color: #818cf8; }

/* === CONTROLS === */
.btcnt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

/* Start button is an <input type="submit"> — match .btn appearance */
.btcnt input.btn {
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  border: none;
  appearance: none;
}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 768px) {
  .sudoku-hero {
    padding: calc(var(--nav-height) + 36px) 5% 36px;
    min-height: 22vh;
  }

  .game-wrapper { padding: 0 4% 80px; }

  .game-card { padding: 24px 16px; gap: 20px; }

  /* On mobile: number picker is always shown below the grid */
  #reserve {
    display: flex;
  }

  #bookx {
    position: static;
    display: block;
  }

  #booky {
    flex-direction: row;
    gap: 6px;
    align-items: flex-start;
  }

  #book {
    padding: 4px;
  }

  #bookz {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 0;
  }

  .book1 {
    flex-direction: column;
    gap: 4px;
  }

  .su-style-sl {
    width: 9vw;
    height: 9vw;
    border-radius: 8px;
  }

  .su-style-sl h3 { font-size: 3.5vw; }

  .su-style-s,
  .su-style {
    width: 9vw;
    height: 9vw;
    padding: 0;
  }

  .su-style h3,
  .su-style-s h3 {
    font-size: 4.5vw;
  }

  .indiv { padding: 0; }

  .timer { font-size: 1.1rem; padding: 8px 14px; }

  .btcnt { gap: 12px; }
}

@media (max-width: 480px) {
  .su-style-s,
  .su-style {
    width: 9.5vw;
    height: 9.5vw;
    padding: 0;
  }

  .su-style h3,
  .su-style-s h3 {
    font-size: 4.8vw;
  }

  .su-style-sl {
    width: 9.5vw;
    height: 9.5vw;
  }
}