/* === ALL YOUR ORIGINAL STYLES (100% unchanged) === */
* { box-sizing: border-box; }
:root {
  --bg-color: #f4f4f9;
  --cell-bg: #fff;
  --cell-border: #333;
  --cell-given: #e0e0e0;
  --cell-selected: #b3d4fc;
  --cell-highlight: #e6f3ff;
  --cell-error: #ffcccc;
  --text-color: #333;
  --button-bg: #007bff;
  --button-text: #fff;
  --grid-border: #333;
  --dark-bg: #1e1e1e;
  --dark-cell-bg: #333;
  --dark-text: #e0e0e0;
  --dark-button-bg: #4a90e2;
  --menu-bg: #fff;
  --menu-text: #333;
  --menu-hover: #007bff;
  --secondary-menu-bg: #f8f9fa;
  --switch-bg: #ccc;
  --switch-toggle: #fff;
  --switch-on: #28a745;
  --hint-glow: #ffd700;
  --modal-bg: rgba(0,0,0,0.5);
  --modal-content-bg: #fff;
  --modal-text: #333;
}
body {
  font-family: 'Inter', Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden;
}
.dark-mode {
  --bg-color: var(--dark-bg);
  --cell-bg: var(--dark-cell-bg);
  --cell-border: #555;
  --cell-given: #444;
  --cell-selected: #4a90e2;
  --cell-highlight: #3a3a3a;
  --cell-error: #a33;
  --text-color: var(--dark-text);
  --button-bg: #4a90e2;
  --menu-bg: #2a2a2a;
  --menu-text: #e0e0e0;
  --menu-hover: #4a90e2;
  --secondary-menu-bg: #2a2a2a;
  --switch-bg: #555;
  --switch-on: #4a90e2;
  --hint-glow: #ffeb3b;
  --modal-content-bg: #333;
  --modal-text: #e0e0e0;
}

/* Ad Placeholders */
.ad-placeholder { background:#e0e0e0; border:2px dashed #999; display:flex; align-items:center; justify-content:center; text-align:center; color:#666; font-size:clamp(0.8rem,2vw,1rem); margin:0.5rem auto; max-width:100%; }
.ad-vertical { width:clamp(120px,15vw,160px); min-height:600px; max-height:100vh; }
.ad-horizontal { width:clamp(300px,90vw,728px); min-height:90px; max-width:100%; }

/* Layout */
.content-wrapper { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; width:100%; max-width:1200px; padding:0 0.5rem; gap:clamp(0.5rem,2vw,1rem); flex-wrap:wrap; }
.invisible-container { display:flex; flex-direction:column; align-items:center; gap:1rem; width:100%; max-width:600px; }

/* Menus */
.main-menu { width:100%; background:var(--menu-bg); box-shadow:0 2px 4px rgba(0,0,0,0.1); z-index:1000; }
.main-menu-container { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:0.5rem 1rem; flex-wrap:wrap; }
.main-menu h1 { font-size:clamp(1.2rem,4vw,1.5rem); margin:0; font-weight: 900; }
.main-menu h1 a { color:var(--menu-text); text-decoration:none; transition:color .3s; }
.main-menu h1 a:hover { color:var(--menu-hover); }
.nav-links { display:flex; gap:clamp(0.5rem,2vw,1.5rem); }
.nav-links a { color:var(--menu-text); text-decoration:none; font-size:clamp(0.9rem,3vw,1rem); transition:color .3s; }
.nav-links a:hover { color:var(--menu-hover); }
.menu-toggle { display:none; flex-direction:column; justify-content:space-between; width:30px; height:20px; cursor:pointer; }
.menu-toggle span { width:100%; height:3px; background:var(--menu-text); transition:all .3s ease; }
.menu-toggle.close span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.close span:nth-child(2) { opacity:0; }
.menu-toggle.close span:nth-child(3) { transform:rotate(-45deg) translate(7px,-7px); }

.secondary-menu { width:100%; background:var(--secondary-menu-bg); padding:0.5rem 1rem; display:flex; justify-content:center; gap:clamp(0.5rem,2vw,1rem); flex-wrap:wrap; align-items:center; }
.secondary-menu button, #difficulty-btn { padding:0.5rem clamp(0.8rem,2vw,1rem); background:var(--button-bg); color:var(--button-text); border:none; border-radius:4px; cursor:pointer; font-size:clamp(0.9rem,3vw,1rem); transition:background .2s; }
.secondary-menu button:hover, #difficulty-btn:hover { background:#0056b3; }

/* Switch */
.switch { position:relative; display:inline-block; width:clamp(50px,10vw,60px); height:clamp(28px,6vw,34px); }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--switch-bg); transition:.4s; border-radius:34px; }
.slider:before { position:absolute; content:""; height:clamp(22px,5vw,26px); width:clamp(22px,5vw,26px); left:4px; bottom:4px; background:var(--switch-toggle); transition:.4s; border-radius:50%; }
input:checked + .slider { background:var(--switch-on); }
input:checked + .slider:before { transform:translateX(clamp(22px,5vw,26px)); }
.switch-label { display:flex; align-items:center; gap:0.5rem; font-size:clamp(0.9rem,3vw,1rem); }

/* Game */
header { text-align:center; margin-top:1rem; width:100%; max-width:600px; }
.instructions { font-size:clamp(0.8rem,3vw,0.9rem); text-align:center; margin-bottom:0.5rem; }
.game-container { display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:600px; width:100%; padding:0 1rem; }
.sudoku-grid { display:grid; grid-template-columns:repeat(9,clamp(30px,10vw,40px)); grid-gap:0; background:var(--cell-bg); border:0.3mm solid var(--grid-border); }
.cell { width:clamp(30px,10vw,40px); height:clamp(30px,10vw,40px); background:var(--cell-bg); border:0.3mm solid var(--cell-border); display:flex; align-items:center; justify-content:center; font-size:clamp(0.8rem,3vw,1.2rem); cursor:pointer; position:relative; transition:background .2s; }
.cell.given { background:var(--cell-given); cursor:default; }
.cell.selected { background:var(--cell-selected); }
.cell.highlight { background:var(--cell-highlight); }
.cell.error { background:var(--cell-error); }
.cell-notes { display:grid; grid-template-columns:repeat(3,1fr); font-size:clamp(0.4rem,1.5vw,0.6rem); position:absolute; top:0; left:0; width:100%; height:100%; padding:2px; }
.note { display:flex; align-items:center; justify-content:center; }

.controls { display:flex; flex-direction:column; flex-wrap:wrap; gap:0.5rem; justify-content:center; width:100%; }
.number-buttons, .special-buttons { display:flex; flex-wrap:wrap; gap:0.25rem; justify-content:center; }
.controls button { padding:0.5rem clamp(0.8rem,2vw,1rem); background:var(--button-bg); color:var(--button-text); border:none; border-radius:4px; cursor:pointer; font-size:clamp(0.8rem,3vw,1rem); transition:background .2s; }
.controls button:hover { background:#0056b3; }
.controls button.active { background:#28a745; }

.game-meta { display:flex; flex-wrap:nowrap; gap:clamp(0.5rem,1.5vw,0.8rem); font-size:clamp(0.7rem,2.5vw,0.9rem); justify-content:center; align-items:center; width:100%; }
.game-meta span { min-width:0; flex-shrink:1; white-space:nowrap; }
.hint-button { background:none; border:none; cursor:pointer; font-size:clamp(0.9rem,3vw,1rem); color:var(--text-color); padding:0.2rem; position:relative; transition:color .2s; flex-shrink:0; }
.hint-button:hover { color:var(--hint-glow); animation:twinkle .5s ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.2)} }

/* Modals */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:var(--modal-bg); z-index:2000; justify-content:center; align-items:center; }
.modal-content { background:var(--modal-content-bg); color:var(--modal-text); padding:2rem; border-radius:8px; max-width:400px; width:90%; text-align:center; box-shadow:0 4px 8px rgba(0,0,0,.2); position:relative; }
.modal-content p { margin:0 0 1rem; font-size:clamp(1rem,3vw,1.2rem); }
.modal-close, .difficulty-option { background:var(--button-bg); color:var(--button-text); border:none; padding:0.5rem 1rem; border-radius:4px; cursor:pointer; font-size:clamp(0.9rem,3vw,1rem); transition:background .2s; margin:0.5rem; }
.modal-close:hover, .difficulty-option:hover { background:#0056b3; }
.modal-close-x { position:absolute; top:0.5rem; right:0.5rem; background:none; border:none; color:var(--modal-text); font-size:clamp(1rem,3vw,1.2rem); cursor:pointer; padding:0.2rem 0.5rem; }
.modal-close-x:hover { color:var(--menu-hover); }
.difficulty-options { display:flex; flex-direction:column; gap:0.5rem; }

/* Footer */
footer { margin-top:2rem; padding:1rem; text-align:center; font-size:clamp(0.8rem,3vw,0.9rem); color:var(--text-color); width:100%; background:var(--menu-bg); }
footer a { color:var(--text-color); text-decoration:none; transition:color .3s; }
footer a:hover { color:var(--menu-hover); }
.footer-nav { margin-top:0.5rem; font-size:clamp(0.7rem,2.5vw,0.8rem); }

/* Responsive */
@media (max-width:768px) {
  .nav-links { display:none; flex-direction:column; position:absolute; top:48px; left:0; width:100%; background:var(--menu-bg); padding:1rem; box-shadow:0 4px 8px rgba(0,0,0,.2); }
  .nav-links.active { display:flex; animation:slideDown .3s ease-in-out; }
  .menu-toggle { display:flex; }
  .sudoku-grid { grid-template-columns:repeat(9,clamp(33px,10.5vw,39px)); }
  .cell { width:clamp(33px,10.5vw,39px); height:clamp(33px,10.5vw,39px); font-size:clamp(0.9rem,3.5vw,1.4rem); }
  .cell-notes { font-size:clamp(0.4rem,1.8vw,0.7rem); }
  .ad-vertical { width:clamp(80px,12vw,120px); min-height:400px; }
}
@media (max-width:576px) {
  .sudoku-grid { border:0.15mm solid var(--grid-border); }
  .cell { border:0.15mm solid var(--cell-border); }
  .secondary-menu button:not(#difficulty-btn) { display:none; }
  #difficulty-btn { display:inline-block; }
  .ad-horizontal.mobile-ad { display:flex; width:clamp(250px,90vw,320px); min-height:100px; }
}
@media (min-width:577px) {
  #difficulty-btn, .ad-horizontal.mobile-ad { display:none; }
}
@media (max-width:400px) {
  .ad-vertical { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .cell, .nav-links.active, .hint-button:hover { transition:none; animation:none; }
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* Print */
@media print {
  .main-menu,.secondary-menu,.controls,.game-meta,footer,.modal,.ad-placeholder,.instructions { display:none; }
  .sudoku-grid { grid-template-columns:repeat(9,40px); margin:0 auto; border:0.3mm solid #000; }
  .cell { width:40px; height:40px; font-size:1.2rem; border:0.3mm solid #000; background:#fff; }
  .cell.given { background:#e0e0e0; box-shadow:inset 2px 2px 5px rgba(0,0,0,.2); }
  .cell-notes { display:none; }
}