* { 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 Placeholder Styles */
.ad-placeholder { background-color: #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%; }
/* Content Wrapper for Vertical Ads */
.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; }
/* Main Menu Strip */
.main-menu { width: 100%; max-width: 100%; background-color: var(--menu-bg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 1000; }
.main-menu-container { max-width: 1200px; width: 100%; 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; }
.main-menu h1 a { color: var(--menu-text); text-decoration: none; transition: color 0.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 0.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-color: var(--menu-text); transition: all 0.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 Strip - Modified for Links */
.secondary-menu { width: 100%; max-width: 100%; background-color: var(--secondary-menu-bg); padding: 0.5rem 1rem; display: flex; justify-content: center; gap: clamp(0.5rem, 2vw, 1rem); margin-top: 0; flex-wrap: wrap; align-items: center; }
.secondary-menu a { padding: 0.5rem clamp(0.8rem, 2vw, 1rem); background-color: var(--button-bg); color: var(--button-text); text-decoration: none; border-radius: 4px; font-size: clamp(0.9rem, 3vw, 1rem); transition: background-color 0.2s; display: inline-block; border: none; cursor: pointer; text-align: center; min-width: 60px; }
.secondary-menu a:hover { background-color: #0056b3; }
.secondary-menu a.current { background-color: #28a745; }
/* On/Off 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-color: var(--switch-bg); transition: 0.4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: clamp(22px, 5vw, 26px); width: clamp(22px, 5vw, 26px); left: 4px; bottom: 4px; background-color: var(--switch-toggle); transition: 0.4s; border-radius: 50%; }
input:checked + .slider { background-color: 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); }
/* Invisible Container */
.invisible-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 600px; }
/* Game Container Adjustments */
header { text-align: center; margin-top: 1rem; margin-bottom: 0; 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-color: var(--cell-bg); border: 0.3mm solid var(--grid-border); }
.cell { width: clamp(30px, 10vw, 40px); height: clamp(30px, 10vw, 40px); background-color: 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-color 0.2s; }
.cell.given { background-color: var(--cell-given); cursor: default; }
.cell.selected { background-color: var(--cell-selected); }
.cell.highlight { background-color: var(--cell-highlight); }
.cell.error { background-color: 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%; }
.controls .number-buttons { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.controls .special-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.controls button { padding: 0.5rem clamp(0.8rem, 2vw, 1rem); background-color: var(--button-bg); color: var(--button-text); border: none; border-radius: 4px; cursor: pointer; font-size: clamp(0.8rem, 3vw, 1rem); transition: background-color 0.2s; }
.controls button:hover { background-color: #0056b3; }
.controls button.active { background-color: #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 0.2s; flex-shrink: 0; }
.hint-button:hover { color: var(--hint-glow); animation: twinkle 0.5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.2); } }
/* Modal Styles - Only for Hint Warning */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--modal-bg); z-index: 2000; justify-content: center; align-items: center; }
.modal-content { background-color: 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, 0.2); position: relative; }
.modal-content p { margin: 0 0 1rem 0; font-size: clamp(1rem, 3vw, 1.2rem); }
.modal-close { background-color: 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-color 0.2s; margin: 0.5rem; }
.modal-close:hover { background-color: #0056b3; }
footer { margin-top: 2rem; padding: 1rem; text-align: center; font-size: clamp(0.8rem, 3vw, 0.9rem); color: var(--text-color); width: 100%; max-width: 100%; background-color: var(--menu-bg); }
footer .ad-horizontal { margin-bottom: 1rem; }
footer a { color: var(--text-color); text-decoration: none; transition: color 0.3s; }
footer a:hover { color: var(--menu-hover); }
.footer-nav { margin-top: 0.5rem; font-size: clamp(0.7rem, 2.5vw, 0.8rem); }
.footer-nav a { margin: 0 0.25rem; }
@media (max-width: 768px) { .nav-links { display: none; flex-direction: column; position: absolute; top: 48px; left: 0; width: 100%; background-color: var(--menu-bg); padding: 1rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .nav-links.active { display: flex; animation: slideDown 0.3s ease-in-out; } .menu-toggle { display: flex; } .secondary-menu { flex-wrap: wrap; justify-content: center; } .main-menu-container { padding: 0.5rem; } .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); } .game-meta { font-size: clamp(0.875rem, 3.125vw, 1.125rem); } .hint-button { font-size: clamp(1.125rem, 3.75vw, 1.25rem); } .controls button { padding: 0.5rem clamp(0.75rem, 1.875vw, 1rem); font-size: clamp(0.875rem, 3.125vw, 1.125rem); } .secondary-menu a { padding: 0.4rem 0.8rem; font-size: clamp(0.875rem, 3.125vw, 1rem); min-width: 50px; } .switch { width: clamp(40px, 8vw, 50px); height: clamp(24px, 5vw, 28px); } .slider:before { height: clamp(18px, 4vw, 22px); width: clamp(18px, 4vw, 22px); } input:checked + .slider:before { transform: translateX(clamp(18px, 4vw, 22px)); } .ad-horizontal.mobile-ad { display: flex; width: clamp(250px, 90vw, 320px); min-height: 100px; } }
@media (min-width: 577px) { .ad-horizontal.mobile-ad { display: none; } }
@media (max-width: 400px) { .main-menu h1 { font-size: clamp(1rem, 3.5vw, 1.2rem); } .modal-content { padding: 1.5rem; width: 85%; } .ad-vertical { display: none; } }
@media (orientation: portrait) and (max-width: 768px) { .ad-horizontal.mobile-ad { display: flex; } }
@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 Styles */
@media print { .main-menu, .secondary-menu, .controls, .game-meta, footer, .modal, .ad-placeholder, .instructions { display: none; } .game-container { padding: 0; margin: 0; max-width: 100%; } .sudoku-grid { grid-template-columns: repeat(9, 40px); margin: 0 auto; border: 0.3mm solid #000; grid-gap: 0; } .cell { width: 40px; height: 40px; font-size: 1.2rem; border: 0.3mm solid #000; background-color: #fff; } .cell.given { background-color: #e0e0e0; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); } .cell.selected, .cell.highlight, .cell.error { background-color: #fff; } .cell-notes { display: none; } .content-wrapper { display: block; } }
/* Style links in secondary menu to look like buttons */
.secondary-menu a { text-align: center; }