* {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:#F9F6F0;text-decoration:none} .nav-links a {color:#F9F6F0;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;min-height:0} .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 {flex:0 0 40px;padding:0;box-sizing:border-box;line-height:0} .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;margin-bottom:0;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)}