* {margin: 0; padding: 0; box-sizing: border-box; font-display: block} html {font-display: block} body {font-display: block} :root {--primary-bg: #F9F6F0; --primary-text: #2B2B2B; --secondary-text: #5A5A5A; --accent-color: #8B4513; --border-color: #D4D4D4; --button-bg: #8B4513; --button-hover: #A0522D; --grid-border: rgba(0,0,0,0.35); --grid-cell-bg: #FFFFFF; --grid-cell-hover: #F5F5DC} html, body {width: 100%; min-width: 320px; max-width: 100vw} body {font-family: 'Merriweather', serif; background-color: var(--primary-bg); color: var(--primary-text); line-height: 1.6; font-size: 16px} .container {max-width: 1200px; margin: 0 auto; padding: 0 15px; width: 100%} .navbar {background-color: #2B2B2B; color: #F9F6F0; padding: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1)} .nav-container {display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 15px} .nav-logo {font-family: 'Merriweather', serif; font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700; color: var(--primary-bg); text-decoration: none} .nav-links a {color: var(--primary-bg); text-decoration: none; margin-left: 1.5rem; transition: color 0.3s ease; font-size: 1rem; font-weight: 500; font-family: 'Merriweather', serif} .nav-links a:hover {color: #D4D4D4} .hero-section {background: var(--primary-bg); padding: clamp(2rem, 5vw, 3rem) 0; text-align: center; border-bottom: none} .hero-section h1 {font-family: 'Merriweather', serif; font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; color: var(--primary-text); line-height: 1.2} .hero-section .cta-button {margin-top: 1rem} .game-area {padding: clamp(1.5rem, 4vw, 3rem) 0; background: var(--primary-bg); margin: 0; border-top: none; border-bottom: 2px solid var(--border-color)} .game-controls {display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem} .difficulty-selector {display:none} [id*="ad-banner"], [class*="ad-banner"], [id*="ad-"], [class*="ad-"] {display: none !important} .difficulty-selector label {font-weight: 700; color: var(--primary-text); font-size: 0.9rem} .difficulty-selector select {padding: 0.5rem; border: 2px solid var(--border-color); border-radius: 4px; font-family: 'Merriweather', serif; background-color: white; font-size: 0.9rem} .difficulty-nav {display: flex !important; gap: 0.5rem; overflow: visible; padding: 0.25rem 0 0.5rem 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; justify-content: flex-start; align-items: center; margin: 0; width: fit-content; min-width: auto; flex-wrap: nowrap; background-color: transparent} .difficulty-nav button {flex-shrink: 0; white-space: nowrap; min-width: fit-content} .difficulty-nav .diff-pill {flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--border-color); border-radius: 9999px; padding: 0.35rem 0.75rem; font-size: 0.9rem; background: #FEFCF8; cursor: pointer} .difficulty-nav .diff-pill.active {background: #eae3d3; border-color: var(--accent-color)} .difficulty-nav .diff-pill.locked {opacity: 0.6; cursor: not-allowed} .game-area .container {display: flex; flex-direction: column; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 2rem; overflow: visible} .difficulty-section {width: 100%; margin-bottom: 1rem; display: flex !important; justify-content: flex-start; align-items: center; overflow: visible; padding: 0; text-align: left; box-sizing: border-box; align-self: flex-start; gap: 0.5rem; margin: 1rem 0; flex-wrap: wrap; transform: translateX(-25%); background-color: transparent} .game-main {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 800px; box-sizing: border-box; background: transparent; border-radius: 0; padding: 1rem; box-shadow: none} .game-content {display: flex; gap: 1.5rem; align-items: stretch; justify-content: center; width: 100%; box-sizing: border-box} @media (max-width: 768px) {.game-main {flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 100%} .game-content {flex-direction: column; align-items: center; gap: 1rem} .sudoku-board {width: 100%; max-width: 400px; height: auto; aspect-ratio: 1; box-sizing: border-box} .sudoku-grid {width: 100% !important; height: 100% !important; aspect-ratio: 1; box-sizing: border-box} .game-panel {width: 100%; max-width: 400px; height: auto; min-height: auto; max-height: none; box-sizing: border-box; flex: none} .difficulty-nav {justify-content: center; align-items: center; overflow-x: auto; padding: 0.25rem 0.5rem; width: 100%; box-sizing: border-box; gap: 0.3rem; margin: 0 auto} .difficulty-nav .diff-pill {padding: 0.25rem 0.5rem; font-size: 0.8rem; flex-shrink: 0; white-space: nowrap}} @media (max-width: 480px) {.sudoku-board {max-width: 320px} .sudoku-grid {max-width: 320px} .game-panel {max-width: 320px} .container {padding: 0 0.5rem}} .sudoku-board {flex: 0 0 auto; width: 550px; height: 550px; margin: 0; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center} .sudoku-grid {display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; background-color: var(--grid-border); border: 3px solid var(--grid-border); width: 100% !important; height: 100% !important; box-shadow: none; border-radius: 2px; box-sizing: border-box} .sudoku-grid.paused .sudoku-cell {color: transparent !important; text-shadow: none !important; caret-color: transparent !important} #pause-overlay {background: #ffffff !important; border: 3px solid var(--grid-border); box-sizing: border-box; width: 100% !important; height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 2px} #pause-overlay::after {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; background: #ffffff; pointer-events: none; z-index: 1} .game-panel {flex: 0 0 240px; width: 240px; max-width: 100%; display: flex; flex-direction: column; height: 550px; box-sizing: border-box; margin: 0; padding: 0; background: transparent; border-radius: 8px; border: none; align-self: stretch} .game-info {display: flex; justify-content: space-between; margin-bottom: 0.5rem; padding: 0.6rem; background-color: #F5F1E8; border-radius: 8px; border: 2px solid #E8DCC6; flex-shrink: 0; box-sizing: border-box} .game-controls-wrapper {flex: 1; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; margin-top: 0.5rem} .game-controls-middle {display: flex; flex-direction: column; gap: 1rem; flex: 1; justify-content: center} .time-display, .mistakes-display {text-align: center; display: flex; align-items: center; gap: 0.25rem} .time-display {display: flex; align-items: center; gap: 0.5rem; flex-direction: row; justify-content: center} .time-display .time-col {display:flex; flex-direction:column; align-items:center; min-width: 60px; text-align:center} .mistakes-display {display: flex; flex-direction: row; align-items: center; gap: 0.5rem; justify-content: center} .time-display .label {margin: 0} .time-display #timer {margin-right: 2px; display: inline-block; min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; font-family: inherit} .mistakes-display #mistakes {display: inline-block; min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1} .time-display .label, .mistakes-display .label {display: block; font-size: 1rem; color: var(--secondary-text); margin-bottom: 0.25rem} #timer, #mistakes {display: block; font-size: 1rem; font-weight: 700; color: var(--primary-text)} #pause-btn {padding: 8px; box-sizing: border-box; line-height: 0; width: 50px !important; height: 50px !important; min-width: 50px; min-height: 50px; max-width: 50px; max-height: 50px; border-radius: 50%; background-color: #ffffff; border: 2px solid #e0e0e0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); flex-shrink: 0; flex-grow: 0} #pause-btn:hover {background-color: var(--accent-color) !important; border-color: var(--accent-color) !important; transform: scale(1.05); box-shadow: 0 4px 8px rgba(139, 69, 19, 0.2) !important} #pause-btn:hover svg {fill: white !important} #pause-btn:active {transform: scale(0.95)} .action-buttons {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem} .action-btn {background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0.6rem; cursor: pointer; transition: all 0.2s ease; font-size: 1.1rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)} .action-btn:hover {background-color: var(--accent-color); color: white} .action-btn.active {background-color: var(--accent-color); color: white} .hint-badge {position: absolute; top: -6px; right: -6px; background: #8B4513; color: #fff; font-size: 0.9rem; font-weight: 700; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25)} .hint-badge.decrement {animation: hintPop 320ms ease-out} @keyframes hintPop {0% {transform: scale(1)} 30% {transform: scale(1.2)} 100% {transform: scale(1)}} .hint-badge.gray {background: #6c757d} .number-buttons {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem} .number-btn {background-color: #FEFCF8; border: 2px solid #E8DCC6; border-radius: 8px; padding: 0.8rem 0; font-size: clamp(1.1rem, 3vw, 1.6rem); font-weight: 600; color: #999; cursor: pointer; transition: all 0.2s ease; font-family: 'Merriweather', serif; aspect-ratio: 1; display: flex; align-items: center; justify-content: center} .number-btn:hover {background-color: var(--accent-color); color: white; border-color: var(--accent-color)} .number-btn.selected {background-color: var(--accent-color); color: white; border-color: var(--accent-color)} .new-game-section {text-align: center; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; flex-shrink: 0; justify-content: center} .restart-btn {background-color: #B8860B; color: white; border: none; border-radius: 8px; padding: 0.8rem 1.5rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; width: 100%; font-family: 'Merriweather', serif} .restart-btn:hover {background-color: #CD853F} .restart-btn:disabled, .restart-btn.disabled {background-color: #7f7f7f !important; cursor: not-allowed !important; opacity: 0.8 !important} .new-game-btn {background-color: var(--accent-color); color: white; border: none; border-radius: 8px; padding: 0.95rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; width: 100%; font-family: 'Merriweather', serif} .new-game-btn:hover {background-color: var(--button-hover)} .new-game-btn:disabled, .new-game-btn.disabled {background-color: #7f7f7f !important; cursor: not-allowed !important; opacity: 0.8 !important} .modal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(2px)} .modal.hidden {display: none} .modal-content {background-color: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); max-width: 400px; width: 90%; padding: 0; overflow: hidden; animation: modalAppear 0.3s ease-out} @keyframes modalAppear {from {opacity: 0; transform: scale(0.9) translateY(-20px)} to {opacity: 1; transform: scale(1) translateY(0)}} .modal-header {background-color: var(--accent-color); color: white; padding: 1.5rem; text-align: center} .modal-header h2 {margin: 0; font-family: 'Merriweather', serif; font-size: 1.5rem} .modal-body {padding: 2rem 1.5rem; text-align: center} .modal-body p {margin: 0 0 1rem 0; color: var(--secondary-text); line-height: 1.6} .modal-body p:last-child {margin-bottom: 0} .modal-footer {padding: 1.5rem; text-align: center; border-top: 1px solid #eee; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem} .modal-actions-row {display: flex; gap: 0.75rem} .modal-btn {background-color: var(--accent-color); color: white; border: none; border-radius: 8px; padding: 0.75rem 2rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; font-family: 'Merriweather', serif; min-width: 120px} .modal-btn .btn-line1 {display:block; line-height:1.05} .modal-btn .btn-line2 {display:block; font-size:0.92em; opacity:0.95; line-height:1.05} .modal-btn:hover {background-color: var(--button-hover)} .modal-btn.secondary {background-color: #6c757d; margin-right: 0} .modal-btn.secondary:hover {background-color: #5a6268} .completion-stats {background-color: #f8f9fa; border-radius: 8px; padding: 1.5rem; margin: 1rem 0} .completion-stats p {margin: 0.5rem 0; font-size: 1.1rem; font-weight: 500} .completion-stats span {font-weight: 700; color: var(--accent-color)} #game-complete-modal .modal-footer {text-align: center} #game-complete-modal .modal-btn {margin: 0} #game-complete-modal .modal-content.compact-modal.newspaper-modal {border: 2px solid var(--border-color); box-shadow: 0 6px 24px rgba(0,0,0,0.18)} #game-complete-modal .modal-header h2 {font-family: 'Merriweather', serif; color: var(--accent-color)} #game-complete-modal .achievement-text, #game-complete-modal .ranking-text, #game-complete-modal .encourage-text {color: var(--primary-text)} .share-section {margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e9ecef} .share-prompt {font-size: 0.95rem; color: var(--secondary-text); margin-bottom: 1rem; font-weight: 500} .share-buttons {display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap} .share-btn.disabled, .share-btn:disabled {filter: grayscale(0.3); opacity: 0.65; cursor: not-allowed; transform: none} .share-icon {display: inline-flex; align-items: center; justify-content: center} .cooldown-tip {margin-top: 0.5rem; color: var(--secondary-text); font-size: 0.95rem} .share-btn {display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; color: white; min-width: 90px; justify-content: center} .share-btn.twitter {background-color: #000000} .share-btn.twitter:hover {background-color: #333333; transform: translateY(-2px)} .share-btn.facebook {background-color: #4267b2} .share-btn.facebook:hover {background-color: #365899; transform: translateY(-2px)} .share-btn.reddit {background-color: #ff4500} .share-btn.reddit:hover {background-color: #e63e00; transform: translateY(-2px)} .share-btn.copy {background-color: #6c757d} .share-btn.copy:hover {background-color: #5a6268; transform: translateY(-2px)} .share-btn.copy.copied {background-color: #28a745} .share-icon {font-size: 1.1rem} .compact-modal {max-width: 420px; background: linear-gradient(135deg, #f8f5f0 0%, #f1ede6 50%, #e8e1d4 100%); border: 2px solid var(--grid-border); border-radius: 0; box-shadow: 0 0 0 1px #d4c4a8, 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); overflow: hidden; font-family: 'Merriweather', serif; position: relative} .newspaper-modal::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 25% 25%, #f0f0f0 1px, transparent 1px), radial-gradient(circle at 75% 75%, #e0e0e0 1px, transparent 1px); background-size: 15px 15px; opacity: 0.4; pointer-events: none; z-index: 1} .newspaper-modal::after {content: ''; position: absolute; top: 15px; left: 15px; right: 15px; height: 1px; background: var(--grid-border); z-index: 2} .compact-modal .modal-header {background: transparent; color: #2F1B14; padding: 0.8rem 1.5rem 0.2rem; text-align: center; margin: 0; position: relative; z-index: 3} .compact-modal .modal-header h2 {margin: 0; font-size: 2rem; font-weight: 700; font-family: 'Merriweather', serif; color: #8B4513; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); letter-spacing: 1px} .achievement-summary {padding: 0.1rem 1.5rem 0.2rem; text-align: center; background: transparent; position: relative; z-index: 3} .achievement-text, .ranking-text, .encourage-text {font-size: 1.1rem; color: #2F1B14; margin: 0 0 0.4rem 0; line-height: 1.3; font-family: 'Merriweather', serif; font-weight: 400} #game-complete-modal .achievement-text, #game-complete-modal .ranking-text, #game-complete-modal .encourage-text {font-family: 'Merriweather', serif} #game-complete-modal .encourage-text {font-size: 0.95rem; font-style: italic; color: var(--secondary-text); margin-top: 1.8rem} #game-complete-modal .compact-achievements {display: flex; flex-direction: column; gap: 6px; padding: 0 1.5rem} #game-complete-modal .badge-row {display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: #2e5d2e; font-family: 'Merriweather', serif} #game-complete-modal .badge-row .dot {width: 10px; height: 10px; border-radius: 50%; background: #2e7d32} #game-complete-modal .achievement-text, #game-complete-modal .ranking-text {font-size: 1.1rem; margin: 0 0 0.3rem 0} #game-complete-modal .modal-header {padding-bottom: 0.15rem} #game-complete-modal .modal-body {padding-top: 0.1rem} .time-highlight, .difficulty-highlight, .ranking-highlight {color: #8B4513; font-weight: 700} .compact-share-buttons {display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; padding: 0.4rem 1.5rem 0.2rem; background: transparent; border-top: 1px solid var(--grid-border); position: relative; z-index: 3; justify-items: center} .share-btn-compact {display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1rem; border: none; border-radius: 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; color: white; position: relative; overflow: hidden; width: 100%; max-width: 150px; justify-self: center} .share-icon-svg {width: 20px; height: 20px} .share-btn-compact.facebook {background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%)} .share-btn-compact.facebook:hover {background: linear-gradient(135deg, #0C63D4 0%, #1877F2 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4)} .share-btn-compact.reddit {background: linear-gradient(135deg, #FF4500 0%, #E63E00 100%)} .share-btn-compact.reddit:hover {background: linear-gradient(135deg, #E63E00 0%, #FF4500 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 69, 0, 0.4)} .share-btn-compact.twitter {background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%)} .share-btn-compact.twitter:hover {background: linear-gradient(135deg, #333333 0%, #000000 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)} .share-btn-compact.copy {background: linear-gradient(135deg, #6C757D 0%, #495057 100%)} .share-btn-compact.copy:hover {background: linear-gradient(135deg, #495057 0%, #6C757D 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4)} .share-btn-compact.copy.copied {background: linear-gradient(135deg, #28A745 0%, #20C997 100%)} .compact-modal .modal-footer {padding: 0.1rem 1.5rem 0.6rem; background: transparent; text-align: center; position: relative; z-index: 3; display: flex; justify-content: center} .compact-modal .modal-footer .modal-btn {background-color: var(--accent-color); color: white; border: none; border-radius: 8px; padding: 1rem 2rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease; font-family: 'Merriweather', serif; min-width: 150px; max-width: 200px} .compact-modal .modal-footer .modal-btn:hover {background-color: var(--button-hover)} .visual-share-section {margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e0e0e0; text-align: center} .visual-share-label {font-size: 0.85rem; color: var(--secondary-text); margin-bottom: 0.8rem; font-style: italic} .download-btn {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; padding: 0.7rem 1.2rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; margin: 0 auto; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3)} .download-btn:hover {transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4)} .download-icon {font-size: 1.1rem} .sudoku-cell {background-color: #FEFCF8; border: none; font-family: 'Merriweather', serif; font-size: clamp(1.2rem, 3.5vw, 1.8rem); font-weight: 600; text-align: center; cursor: pointer; transition: background-color 0.2s ease; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999} .sudoku-cell:hover {background-color: var(--grid-cell-hover)} .sudoku-cell:focus {outline: 2px solid var(--accent-color); background-color: var(--grid-cell-hover)} .sudoku-cell.fixed {background-color: #F0F0F0; color: var(--primary-text); font-weight: 700; cursor: not-allowed} .sudoku-cell.hinted {background-color: #F5F1E8; color: #28a745; font-weight: 600} .sudoku-cell.error {background-color: #FFE6E6; color: #D32F2F} .sudoku-cell.selected {background-color: var(--grid-cell-hover); outline: 2px solid var(--accent-color)} .sudoku-cell.highlighted-row {background-color: #e3f2fd !important} .sudoku-cell.highlighted-col {background-color: #e3f2fd !important} .sudoku-cell.highlighted-same-number {background-color: #fff3e0 !important} .action-icon {width: 20px; height: 20px; filter: opacity(0.7); transition: filter 0.2s ease} .action-btn:hover .action-icon {filter: brightness(0) invert(1)} .sudoku-cell:nth-child(3n):not(:nth-child(9n)) {border-right: 2px solid var(--grid-border)} .sudoku-cell:nth-child(n+19):nth-child(-n+27), .sudoku-cell:nth-child(n+46):nth-child(-n+54) {border-bottom: 2px solid var(--grid-border)} .how-to-play {padding: clamp(2rem, 5vw, 3rem) 0; background-color: var(--primary-bg)} .how-to-play h2 {font-family: 'Merriweather', serif; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; color: var(--primary-text)} .how-to-play h3 {font-family: 'Merriweather', serif; font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 1.5rem 0 0.5rem 0; color: var(--primary-text)} .how-to-play p {margin-bottom: 1rem; color: var(--secondary-text); font-size: clamp(0.9rem, 2vw, 1rem)} .how-to-play ul {margin-left: 2rem; color: var(--secondary-text)} .how-to-play li {margin-bottom: 0.5rem; font-size: clamp(0.9rem, 2vw, 1rem)} .how-to-play, .faq-preview {padding: clamp(2rem, 5vw, 3rem) 0; background-color: var(--primary-bg); max-width: 800px; margin: 2rem auto} .how-to-play .container, .faq-preview .container {padding: 0 2rem} .content-card {background-color: white; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); padding: 2rem; border: 1px solid #f0f0f0} .content-card h2 {font-family: 'Merriweather', serif; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; color: var(--primary-text); text-align: center} .intro-text {margin-bottom: 2rem; color: var(--secondary-text); font-size: clamp(0.95rem, 2.2vw, 1.1rem); line-height: 1.6; text-align: center} .rules-section {background-color: #f8f9fa; border-radius: 8px; padding: 1.5rem; margin-top: 1.5rem} .rules-section h3 {font-family: 'Merriweather', serif; font-size: clamp(1.2rem, 3vw, 1.4rem); margin-bottom: 1rem; color: var(--primary-text); text-align: center} .rules-list {list-style: none; padding: 0; margin: 1.5rem 0; text-align: left} .rules-list li {color: var(--secondary-text); font-size: clamp(0.9rem, 2vw, 1rem); margin-bottom: 0.5rem; text-align: center; list-style: none} .rules-list li:last-child {margin-bottom: 0} .share-btn.copy.copy-success {background-color: #4CAF50 !important; color: white !important; transform: scale(1.05); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); transition: all 0.3s ease} .share-btn.copy.copy-success .share-icon {color: white !important} .share-btn.copy.copy-success .share-label {color: white !important} .ach-stats {display: flex; justify-content: space-around; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap} .ach-stat {background-color: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #f0f0f0; flex: 1; min-width: 150px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center} .ach-stat h4 {font-family: 'Merriweather', serif; font-size: 0.9rem; color: var(--secondary-text); margin: 0 0 0.5rem 0; font-weight: 500} .ach-stat .val {font-family: 'Merriweather', serif; font-size: 2rem; font-weight: 700; color: var(--accent-color); margin: 0} .faq-preview h2 {font-family: 'Merriweather', serif; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; color: var(--primary-text)} .faq-preview p {margin-bottom: 2rem; color: var(--secondary-text); font-size: clamp(0.9rem, 2vw, 1rem)} .faq-links {margin: 1.5rem 0; text-align: left} .faq-links h3 {margin-bottom: 0.8rem} .faq-links a {color: var(--accent-color); text-decoration: none; font-family: 'Merriweather', serif; font-size: clamp(0.95rem, 2.2vw, 1.1rem); transition: all 0.3s ease; display: block; padding: 0.8rem 1rem; margin-bottom: 0.8rem; background-color: white; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1)} .faq-links a:hover {color: var(--button-hover); background-color: #f8f9fa; transform: translateX(4px); box-shadow: 0 3px 8px rgba(0,0,0,0.15)} .btn-view-all {display: block; background-color: var(--button-bg); color: white; padding: 0.8rem 1.5rem; text-decoration: none; border-radius: 4px; margin: 1rem auto 0; transition: background-color 0.3s ease; font-size: clamp(0.9rem, 2vw, 1rem); text-align: center; width: fit-content} .btn-view-all:hover {background-color: var(--button-hover)} .site-footer {background-color: var(--primary-text); color: var(--primary-bg); padding: 2rem 0; margin-top: 3rem} .footer-links {display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.8rem; font-family: 'Merriweather', serif; font-size: 1rem} .footer-links a {color: var(--primary-bg); text-decoration: none; font-family: 'Merriweather', serif; font-size: 1rem} .footer-links a:hover {color: #FFFFFF} .copyright {text-align: center; color: var(--primary-bg); font-size: 0.85rem; margin-bottom: 0.27rem; font-family: 'Merriweather', serif} .footer-contact {display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-family: 'Merriweather', serif; font-size: 0.7rem} .footer-contact a {color: #B0B0B0 !important; text-decoration: none !important; font-family: 'Merriweather', serif; font-size: 0.7rem} .footer-contact a:hover {color: #FFFFFF !important} .footer-contact a:link, .footer-contact a:visited {color: #B0B0B0 !important; text-decoration: none !important} .footer-contact a:active, .footer-contact a:focus {color: #B0B0B0 !important; text-decoration: none !important} @media (max-width: 768px) {.footer-content {flex-direction: column; align-items: center; text-align: center} .footer-right {align-items: center} .footer-links {justify-content: center} .footer-legal {justify-content: center}} .copyright .legal-links {font-size: 0.7rem; opacity: 0.85; margin-top: 0.35rem} .footer-bottom {display: flex; flex-direction: column; align-items: center; gap: 0.27rem; margin: 0.16rem auto 0; max-width: clamp(360px, 20%, 720px); padding: 0 8px} .footer-bottom .contact-info {font-size: 0.7rem; color: #999; opacity: 0.8} .footer-bottom .contact-info a {color: #999 !important; text-decoration: none !important} .footer-bottom .contact-info a:hover {color: #999 !important; text-decoration: none !important} .footer-bottom .copyright {white-space: nowrap; display: inline-block} .footer-bottom .contact-info {display: flex; justify-content: center; gap: 2rem; align-items: center} .footer-bottom .contact-info span, .footer-bottom .contact-info a {color: #999 !important; text-decoration: none !important; white-space: nowrap} .footer-bottom .legal-links {margin-top: 0} .footer-bottom .contact a {color: #D4D4D4; text-decoration: none} .footer-bottom .contact a:hover {text-decoration: underline} @media (max-width: 640px) {.footer-bottom {flex-direction: column; align-items: center; gap: 0.25rem}} .copyright .contact-line {margin-top: 0.35rem} .copyright .legal-links a {color: #D4D4D4; text-decoration: none} .copyright .legal-links a:hover {text-decoration: underline} .page-header {text-align: center; padding: clamp(2rem, 5vw, 3rem) 0; background-color: var(--primary-bg); margin-bottom: 2rem} .page-header h1 {font-family: 'Merriweather', serif; font-size: clamp(1.8rem, 5vw, 2.5rem); margin-bottom: 1rem; color: var(--primary-text)} .page-header p {font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--secondary-text); max-width: 600px; margin: 0 auto} .faq-content, .about-content, .legal-content {max-width: 800px; margin: 0 auto} .faq-item, .about-item, .legal-item {margin-bottom: 3rem; padding: clamp(1.5rem, 4vw, 2rem); background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1)} .faq-item h2, .about-item h2, .legal-item h2 {font-family: 'Merriweather', serif; font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin-bottom: 1rem; color: var(--primary-text)} .faq-item h3, .about-item h3, .legal-item h3 {font-family: 'Merriweather', serif; font-size: clamp(1.1rem, 3vw, 1.3rem); margin: 1.5rem 0 0.5rem 0; color: var(--primary-text)} .faq-item p, .about-item p, .legal-item p {margin-bottom: 1rem; color: var(--secondary-text); line-height: 1.7; font-size: clamp(0.9rem, 2vw, 1rem)} .faq-item ul, .faq-item ol, .about-item ul, .about-item ol, .legal-item ul, .legal-item ol {margin: 1rem 0 1rem 2rem; color: var(--secondary-text)} .faq-item li, .about-item li, .legal-item li {margin-bottom: 0.5rem; line-height: 1.6; font-size: clamp(0.9rem, 2vw, 1rem)} .cta-section {text-align: center; padding: clamp(2rem, 5vw, 3rem) 0; margin-top: 3rem} .blog-content + .cta-section {margin-top: 1rem; padding: 1rem 0} .cta-section h2 {font-family: 'Merriweather', serif; font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; color: var(--primary-text)} .cta-section p {margin-bottom: 2rem; color: var(--secondary-text); font-size: clamp(1rem, 2.2vw, 1.1rem)} @media (max-width: 1024px) {.game-controls {flex-direction: column; align-items: stretch; gap: 1rem} .sudoku-game-container {flex-direction: column; align-items: center; gap: 1.5rem} .game-panel {max-width: 400px; width: 100%}} @media (max-width: 768px) {.nav-links {display: none} .sudoku-grid {width: min(90vw, 450px); max-width: 450px} .game-panel {min-width: auto; max-width: 350px} .action-buttons {grid-template-columns: repeat(2, 1fr); gap: 0.75rem} .footer-links {flex-direction: column; align-items: center; gap: 1rem}} @media (max-width: 480px) {.container {padding: 0 10px} .difficulty-selector select {width: 100%; max-width: 250px} .sudoku-grid {width: min(95vw, 380px); max-width: 380px} .modal-content {width: 95%; max-width: 350px} .modal-header {padding: 1rem} .modal-body {padding: 1.5rem 1rem} .modal-footer {padding: 1rem} .share-buttons {display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem} .share-btn {min-width: auto; width: 100%; font-size: 0.8rem; padding: 0.5rem 0.7rem} .compact-modal {max-width: 95vw; margin: 1rem} .achievement-summary {padding: 1rem} .achievement-text {font-size: 1rem} .ranking-text {font-size: 1.1rem} .compact-share-buttons {grid-template-columns: 1fr; gap: 0.6rem; padding: 0.8rem 1rem} .share-btn-compact {padding: 0.7rem 0.8rem; font-size: 0.85rem} .visual-share-section {margin-top: 1rem; padding-top: 0.8rem} .download-btn {padding: 0.6rem 1rem; font-size: 0.8rem}} @media (max-width: 360px) {.sudoku-grid {width: 95vw; max-width: 280px} .sudoku-cell {font-size: 0.75rem}} .blog-content {margin-bottom: 2rem} .blog-item {margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-color)} .blog-item:last-child {border-bottom: none} .blog-item h2 {font-family: 'Merriweather', serif; font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin-bottom: 1rem; color: var(--primary-text); text-align: center} .blog-item p {margin-bottom: 1rem; color: var(--secondary-text); font-size: clamp(0.9rem, 2vw, 1rem); line-height: 1.7} .category-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.5rem} .category-card {background: var(--primary-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); transition: all 0.3s ease; text-decoration: none; color: inherit; display: block; cursor: pointer} .category-card:hover {background: white; border-color: var(--accent-color)} .category-card h3 {color: var(--accent-color); margin-bottom: 1rem; font-size: clamp(1.1rem, 3vw, 1.3rem); font-family: 'Merriweather', serif} .topic-icon {width: 22px; height: 22px; margin-right: 8px; vertical-align: -3px; color: var(--accent-color)} .category-card p {font-size: clamp(0.9rem, 2vw, 1rem); color: var(--secondary-text); line-height: 1.6; margin: 0} .articles-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 1rem} .article-card {background: var(--primary-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); transition: all 0.3s ease} .article-card:hover {background: white; border-color: var(--accent-color)} .article-card h3 {margin-bottom: 1rem} .article-card h3 a {color: var(--accent-color); text-decoration: none; font-size: clamp(1.1rem, 3vw, 1.3rem); font-family: 'Merriweather', serif; font-weight: 600} .article-card h3 a:hover {text-decoration: underline} .article-excerpt {color: var(--secondary-text); line-height: 1.7; margin-bottom: 1rem; font-size: clamp(0.9rem, 2vw, 1rem)} .article-meta {display: flex; gap: 1rem; font-size: 0.9rem; color: var(--secondary-text); align-items: center; flex-wrap: wrap; row-gap: 0.5rem} .article-card .article-meta {display: flex; justify-content: space-between; align-items: center; margin-top: 1rem} .article-meta .publish-date {display: inline; margin: 0; text-align: left; margin-left: auto; margin-right: 3.5rem; line-height: 1.5; vertical-align: middle} .article-meta .read-time {display: inline} @media (max-width: 768px) {.article-meta .publish-date {text-align: left}} .article-meta .author {margin-left: auto} .learn-more {color: var(--accent-color); font-size: 0.85rem; font-family: 'Merriweather', serif; text-decoration: none; transition: all 0.3s ease; margin-left: auto; display: flex; align-items: center; gap: 0.3rem} .article-excerpt .learn-more {margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; float: right} .learn-more::after {content: ''; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; transition: transform 0.3s ease} .learn-more:hover {color: var(--button-hover)} .learn-more:hover::after {transform: translateX(4px)} .category {background: var(--accent-color); color: white; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.9rem; display: inline-flex; align-items: center; line-height: 1.5; vertical-align: middle} .articles-list {margin-top: 1rem; max-width: 700px; margin-left: auto; margin-right: auto} .article-list-item {margin-bottom: 1.5rem; padding: 1rem; background: var(--primary-bg); border-radius: 8px; border: 1px solid var(--border-color); transition: all 0.3s ease} .article-list-item:hover {background: white; border-color: var(--accent-color)} .article-list-item h4 {margin-bottom: 0.5rem} .article-list-item h4 a {color: var(--accent-color); text-decoration: none; font-size: clamp(1.1rem, 3vw, 1.3rem); font-family: 'Merriweather', serif; font-weight: 600} .article-list-item p {font-size: clamp(0.9rem, 2vw, 1rem); color: var(--secondary-text); line-height: 1.6; margin-bottom: 0.5rem} .article-list-item h4 a:hover {text-decoration: underline} .publish-date {font-size: 0.9rem; color: var(--secondary-text); margin-top: 0.5rem; display: block} .blog-article {max-width: 800px; margin: 0 auto} .article-header {text-align: center; margin-bottom: 3rem; padding-bottom: 2rem} .article-header h1 {color: var(--accent-color); margin-bottom: 1rem; font-size: 2.5rem} .article-content {line-height: 1.8; font-size: 1.1rem} .article-content h2 {color: var(--accent-color); margin-top: 2.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem} .article-content h3 {color: var(--accent-color); margin-top: 2rem; margin-bottom: 1rem} .article-content blockquote {background: #F8F6F0; border-left: 4px solid var(--accent-color); margin: 2rem 0; padding: 1rem 1.5rem; font-style: italic} .article-content code {background: #F0F0F0; padding: 0.25rem 0.5rem; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 0.95em} .article-cta {padding: 0.5rem 0.9rem 0.75rem; text-align: center; margin: 0.75rem 0} .article-cta h3 {margin: 0 0 0.5rem 0} .article-cta p {margin: 0 0 1rem 0} .related-articles {background: #F8F6F0; padding: 0.5rem 0.9rem; border-radius: 8px; margin-top: 0.75rem; border: 2px solid var(--border-color)} .related-articles h3 {color: var(--accent-color); margin: 0 0 0.4rem 0} .related-articles ul {margin: 0} .related-articles li:last-child {margin-bottom: 0} .related-articles ul {list-style: none; padding: 0} .related-articles li {margin-bottom: 0.5rem} .related-articles a {color: var(--accent-color); text-decoration: none} .related-articles a:hover {text-decoration: underline} .cta-button {display: inline-block; background-color: var(--button-bg); color: #fff; text-decoration: none; border-radius: 8px; padding: 1rem 2rem; font-weight: 700; font-family: 'Merriweather', serif; transition: background-color 0.3s ease, transform 0.05s ease; font-size: clamp(1rem, 2.4vw, 1.25rem)} .cta-button:hover {background-color: var(--button-hover)} .cta-button:active {transform: translateY(1px)} .article-navigation {display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; margin: 0.5rem 0} .nav-prev, .nav-next {color: var(--accent-color); text-decoration: none; font-family: 'Merriweather', serif; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; transition: color 0.3s ease} .nav-prev::before {content: '«'; margin-right: 0.2rem; font-size: 0.7rem; transition: transform 0.3s ease} .nav-next::after {content: '»'; margin-left: 0.2rem; font-size: 0.7rem; transition: transform 0.3s ease} .nav-prev:hover, .nav-next:hover {color: var(--button-hover)} .nav-prev:hover::before {transform: translateX(-4px)} .nav-next:hover::after {transform: translateX(4px)}