:root{
  --maroon:#5a0f0f;
  --gold:#d4af37;
  --bg:#fff8f3;
  --cell-bg:#fff;
  --cell-border:#b65a5a;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--maroon)}
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle,#5c1414,#2a0000);color:var(--gold);z-index:50;animation:fadeOut 1s ease 1.5s forwards}
.hidden{display:none}
.app{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(90,15,15,0.04);border-bottom:3px solid var(--gold)}
.title{font-size:1.2rem;font-weight:700}
.controls select, .controls button{margin-left:8px;padding:8px 12px;background:var(--gold);border:none;border-radius:8px;color:var(--maroon);font-weight:700;cursor:pointer}

.main{display:flex;gap:16px;padding:20px;align-items:flex-start;justify-content:center}
#boardWrap{flex:0 0 auto; position:relative;}
.board{display:grid;border:6px solid var(--maroon);background:linear-gradient(180deg,#fff,#fff);padding:6px;border-radius:8px; grid-template-columns: repeat(9, 46px); grid-auto-rows: 46px;}
.cell{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--cell-bg);border:1px solid var(--cell-border);cursor:pointer;user-select:none;border-radius:4px}
.cell.prefill{background:#f4e6d6;color:#333;font-weight:700;cursor:default}
.cell.error{background:#ffd6d6}
.cell.selected{outline:3px solid rgba(212,175,55,0.25)}

/* apply thick maroon borders via inline styles from JS for precision */

/* Sidebar & controls */
.sidebar{width:260px;display:flex;flex-direction:column;gap:12px}
.stats{background:rgba(90,15,15,0.03);padding:8px;border-radius:8px;border:2px solid rgba(212,175,55,0.12)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pad button{padding:10px;border-radius:8px;background:var(--gold);border:none;color:var(--maroon);font-weight:800;cursor:pointer}

.actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.actions button{padding:8px;border-radius:8px;background:var(--gold);border:none;cursor:pointer;color:var(--maroon);font-weight:700}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:60}
.popup{background:#fff;padding:18px;border-radius:12px;min-width:260px;max-width:90%;text-align:center;border:4px solid var(--maroon)}

.popup.fade-out{opacity:0;transition:opacity 0.35s ease}

/* Responsive */
@media (max-width:800px){
  .main{flex-direction:column;align-items:center}
  .sidebar{width:100%;display:flex;order:2}
  #boardWrap{order:1}
  .cell{width:11vw;height:11vw;font-size:4.2vw}
  .pad{grid-template-columns:repeat(9,1fr);gap:6px}
  .pad button{padding:12px}
}
/* Bottom navigation footer */
.game-footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 15px 10px;
  margin-top: 20px;
  border-top: 3px solid maroon;
}

.game-footer h3 {
  margin-bottom: 10px;
  font-size: 1.2em;
  letter-spacing: 0.5px;
}

.game-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.game-btn {
  background: maroon;
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.3s ease;
}

.game-btn:hover {
  background: #ff8800;
  transform: scale(1.05);
}

@keyframes fadeOut{to{opacity:0;visibility:hidden}}