* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', 'Quicksand', sans-serif; line-height: 1.7; color: #1a1a2e; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); min-height: 100vh; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
a { color: #6c5ce7; text-decoration: none; transition: all 0.3s; }
a:hover { text-decoration: none; }

header { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 50%, #74b9ff 100%); padding: 12px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 25px rgba(108,92,231,0.25); }
header .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.logo { font-size: 28px; font-weight: 900; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); letter-spacing: -0.5px; }
.logo:hover { color: #fff; text-decoration: none; transform: scale(1.02); }
nav { display: flex; gap: 8px; flex-wrap: wrap; }
nav a { color: rgba(255,255,255,0.95); font-weight: 600; padding: 8px 14px; border-radius: 20px; font-size: 14px; background: rgba(255,255,255,0.15); }
nav a:hover { background: rgba(255,255,255,0.3); color: #fff; transform: translateY(-2px); }
nav a.active { background: #fff; color: #6c5ce7; }

.hero { background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 60%, #0984e3 100%); color: #fff; padding: 50px 15px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); animation: float 15s infinite linear; }
@keyframes float { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.hero h1 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 10px; position: relative; text-shadow: 2px 2px 8px rgba(0,0,0,0.2); }
.hero p { font-size: clamp(14px, 2.5vw, 20px); opacity: 0.95; position: relative; }

.main { padding: 35px 0; min-height: 70vh; }

h1 { font-size: 32px; margin-bottom: 15px; color: #2d3436; }
h2 { font-size: 26px; color: #6c5ce7; border-bottom: 3px solid #a29bfe; padding-bottom: 8px; display: inline-block; margin: 30px 0 15px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 25px 0; }
.card { background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(108,92,231,0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; border: 2px solid transparent; }
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(108,92,231,0.2); border-color: #a29bfe; }
.card-body { padding: 18px; text-align: center; }
.card h3 { font-size: 17px; margin-bottom: 8px; color: #2d3436; }
.card p { color: #636e72; font-size: 13px; margin-bottom: 12px; }
.card .btn { display: inline-block; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; padding: 10px 24px; border-radius: 25px; font-weight: 700; font-size: 14px; }
.card .btn:hover { transform: scale(1.05); box-shadow: 0 5px 20px rgba(108,92,231,0.4); }

.game-card { background: #fff; }
.game-card .level-badge { display: inline-block; background: linear-gradient(135deg, #00b894, #00cec9); color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.game-card.easy .level-badge { background: linear-gradient(135deg, #00b894, #55efc4); }
.game-card.medium .level-badge { background: linear-gradient(135deg, #fdcb6e, #ffeaa7); color: #2d3436; }
.game-card.hard .level-badge { background: linear-gradient(135deg, #e17055, #fab1a0); }

.game-page { background: #fff; border-radius: 20px; padding: 25px; box-shadow: 0 10px 40px rgba(108,92,231,0.12); margin: 20px auto; max-width: 600px; }
.game-page .level-selector { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.game-page .level-btn { padding: 10px 20px; border: 2px solid #a29bfe; background: #fff; border-radius: 20px; cursor: pointer; font-weight: 600; color: #6c5ce7; transition: all 0.3s; }
.game-page .level-btn:hover, .game-page .level-btn.active { background: #6c5ce7; color: #fff; }

.sudoku-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; background: #2d3436; padding: 4px; border-radius: 12px; max-width: 400px; margin: 0 auto; }
.sudoku-cell { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 4vw, 22px); font-weight: 700; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.sudoku-cell:hover { background: #f0f0f0; }
.sudoku-cell.selected { background: #a29bfe; color: #fff; }
.sudoku-cell.fixed { background: #dfe6e9; color: #2d3436; cursor: default; }
.sudoku-cell.same { background: #e4d5f7; }
.sudoku-cell.error { background: #ff7675; color: #fff; }
.sudoku-cell:nth-child(3n) { margin-right: 3px; }
.sudoku-cell:nth-child(9n) { margin-bottom: 3px; }

.number-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 350px; margin: 20px auto; }
.number-pad button { padding: 15px; font-size: 20px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; transition: all 0.2s; }
.number-pad button:hover { transform: scale(1.05); }
.number-pad button.clear { background: linear-gradient(135deg, #ff7675, #fab1a0); }

.game-controls { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.game-controls button { padding: 12px 24px; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s; }
.game-controls .btn-new { background: linear-gradient(135deg, #00b894, #55efc4); color: #fff; }
.game-controls .btn-check { background: linear-gradient(135deg, #fdcb6e, #ffeaa7); color: #2d3436; }
.game-controls .btn-solve { background: linear-gradient(135deg, #e17055, #fab1a0); color: #fff; }

.game-timer { text-align: center; font-size: 24px; font-weight: 700; color: #6c5ce7; margin-bottom: 15px; }

.article-page { background: #fff; border-radius: 20px; padding: 35px; box-shadow: 0 10px 40px rgba(108,92,231,0.08); max-width: 800px; margin: 0 auto; }
.article-page h1 { font-size: 30px; color: #2d3436; margin-bottom: 8px; }
.article-page .meta { color: #636e72; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #a29bfe; }
.article-page .content { font-size: 17px; line-height: 1.85; color: #2d3436; }
.article-page .content h2 { font-size: 22px; color: #6c5ce7; margin-top: 30px; border: none; }

footer { background: linear-gradient(135deg, #2d3436, #1a1a2e); color: #dfe6e9; padding: 30px 0; text-align: center; margin-top: 40px; }
footer a { color: #a29bfe; margin: 0 12px; }
footer a:hover { color: #fff; }

.back-link { display: inline-block; margin-bottom: 15px; color: #636e72; font-weight: 600; }
.back-link:hover { color: #6c5ce7; }

.btn { display: inline-block; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; padding: 12px 28px; border-radius: 25px; font-weight: 700; margin: 8px 5px; transition: all 0.3s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(108,92,231,0.4); color: #fff; }
.btn-secondary { background: linear-gradient(135deg, #636e72, #b2bec3); }

.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }

@media (max-width: 600px) {
.sudoku-grid { max-width: 95vw; }
.number-pad { max-width: 90vw; }
.game-page { padding: 15px; margin: 10px; }
.card-body { padding: 15px; }
}