/* ===== Shared Puzzle Styles ===== */

/* Puzzle header */
.puzzle-header{text-align:center;margin-bottom:1.5rem;}
.puzzle-header h1{font-size:1.8rem;margin-bottom:0.3rem;}
.puzzle-header p{color:var(--text-secondary);font-size:0.95rem;}
.puzzle-back{display:inline-flex;align-items:center;gap:0.4rem;color:var(--text-secondary);font-size:0.85rem;text-decoration:none;margin-bottom:0.75rem;}
.puzzle-back:hover{color:var(--primary);}

/* Stats bar */
.puzzle-stats{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.25rem;flex-wrap:wrap;}
.puzzle-stat{text-align:center;}
.puzzle-stat-value{font-size:1.4rem;font-weight:700;color:var(--text-primary);}
.puzzle-stat-label{font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.03em;}

/* Intro screen */
.puzzle-intro{text-align:center;padding:2rem 0;}
.puzzle-intro h2{font-size:1.5rem;margin-bottom:0.75rem;}
.puzzle-intro p{color:var(--text-secondary);margin-bottom:1.5rem;max-width:400px;margin-left:auto;margin-right:auto;}
.puzzle-difficulty{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem;}
.puzzle-difficulty button{padding:0.5rem 1.25rem;border-radius:0.5rem;border:2px solid var(--border);background:var(--bg);font-weight:600;cursor:pointer;transition:all 0.15s;}
.puzzle-difficulty button:hover,.puzzle-difficulty button.active{border-color:var(--primary);background:var(--primary);color:#fff;}

/* Results screen */
.puzzle-results{text-align:center;padding:1.5rem 0;}
.puzzle-results h2{font-size:1.6rem;margin-bottom:0.5rem;}
.puzzle-results .emoji{font-size:3rem;margin-bottom:0.5rem;}
.puzzle-results .score-text{font-size:1.1rem;color:var(--text-secondary);margin-bottom:1.5rem;}
.puzzle-share-grid{display:flex;flex-direction:column;align-items:center;gap:0.25rem;margin:1rem 0;font-family:monospace;font-size:1.2rem;line-height:1;}

/* Action buttons */
.puzzle-actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem;}

/* ===== Daily Word ===== */
.dw-board{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:1.25rem;}
.dw-row{display:flex;gap:6px;}
.dw-cell{width:58px;height:58px;border:2px solid var(--border);border-radius:0.4rem;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;text-transform:uppercase;transition:transform 0.15s,background 0.3s;background:var(--bg);}
.dw-cell.filled{border-color:#878a8c;animation:dw-pop 0.1s;}
.dw-cell.correct{background:#6aaa64;border-color:#6aaa64;color:#fff;}
.dw-cell.present{background:#c9b458;border-color:#c9b458;color:#fff;}
.dw-cell.absent{background:#787c7e;border-color:#787c7e;color:#fff;}
.dw-cell.reveal{animation:dw-flip 0.5s ease;}
@keyframes dw-pop{0%{transform:scale(0.8);}50%{transform:scale(1.1);}100%{transform:scale(1);}}
@keyframes dw-flip{0%{transform:rotateX(0);}50%{transform:rotateX(90deg);}100%{transform:rotateX(0);}}
.dw-keyboard{display:flex;flex-direction:column;align-items:center;gap:6px;}
.dw-kb-row{display:flex;gap:5px;}
.dw-key{min-width:34px;height:52px;border-radius:0.3rem;border:none;background:#d3d6da;font-size:0.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;text-transform:uppercase;transition:background 0.15s;padding:0 6px;}
.dw-key:hover{opacity:0.85;}
.dw-key.wide{min-width:58px;font-size:0.75rem;}
.dw-key.correct{background:#6aaa64;color:#fff;}
.dw-key.present{background:#c9b458;color:#fff;}
.dw-key.absent{background:#787c7e;color:#fff;}
.dw-message{text-align:center;min-height:2rem;font-weight:600;color:var(--text-primary);margin-bottom:0.5rem;}
@media(max-width:480px){.dw-cell{width:50px;height:50px;font-size:1.3rem;}.dw-key{min-width:28px;height:46px;font-size:0.75rem;}.dw-key.wide{min-width:48px;}}

/* ===== Sudoku ===== */
.sudoku-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:1px;border:3px solid var(--text-primary);margin:0 auto 1.25rem;max-width:400px;background:var(--border);}
.sudoku-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:600;background:var(--bg);cursor:pointer;transition:background 0.1s;position:relative;}
.sudoku-cell.given{color:var(--text-primary);font-weight:700;cursor:default;}
.sudoku-cell.selected{background:#bbdefb !important;}
.sudoku-cell.highlight{background:#e3f2fd;}
.sudoku-cell.error{color:#e53935;}
.sudoku-cell.border-right{border-right:2px solid var(--text-primary);}
.sudoku-cell.border-bottom{border-bottom:2px solid var(--text-primary);}
.sudoku-numpad{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:1rem;}
.sudoku-numpad button{width:42px;height:42px;border-radius:0.4rem;border:2px solid var(--border);background:var(--bg);font-size:1.1rem;font-weight:700;cursor:pointer;transition:all 0.15s;}
.sudoku-numpad button:hover{border-color:var(--primary);background:var(--primary);color:#fff;}
.sudoku-controls{display:flex;gap:0.75rem;justify-content:center;margin-bottom:1rem;}
@media(max-width:480px){.sudoku-grid{max-width:100%;}.sudoku-cell{font-size:1rem;}.sudoku-numpad button{width:36px;height:36px;font-size:0.95rem;}}

/* ===== Word Search ===== */
.ws-grid{display:grid;gap:2px;margin:0 auto 1rem;max-width:400px;user-select:none;}
.ws-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;text-transform:uppercase;background:var(--bg);border:1px solid var(--border);border-radius:0.2rem;cursor:pointer;transition:background 0.1s;}
.ws-cell.selected{background:#bbdefb;}
.ws-cell.found{background:#c8e6c9;color:#2e7d32;}
.ws-word-list{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-bottom:1rem;}
.ws-word{padding:0.3rem 0.75rem;border-radius:2rem;background:var(--bg-secondary);font-size:0.85rem;font-weight:600;transition:all 0.2s;}
.ws-word.found{text-decoration:line-through;opacity:0.5;background:#c8e6c9;}

/* ===== Memory Match ===== */
.mm-grid{display:grid;gap:8px;margin:0 auto 1.25rem;max-width:450px;}
.mm-card{aspect-ratio:1;perspective:600px;cursor:pointer;}
.mm-card-inner{position:relative;width:100%;height:100%;transition:transform 0.4s;transform-style:preserve-3d;}
.mm-card.flipped .mm-card-inner,.mm-card.matched .mm-card-inner{transform:rotateY(180deg);}
.mm-card-front,.mm-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:0.5rem;display:flex;align-items:center;justify-content:center;font-size:1.8rem;}
.mm-card-front{background:var(--primary);color:#fff;}
.mm-card-back{background:var(--bg);border:2px solid var(--border);transform:rotateY(180deg);}
.mm-card.matched .mm-card-back{border-color:#6aaa64;background:#f0fff0;}

/* ===== Anagram ===== */
.anagram-letters{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:1.5rem 0;}
.anagram-tile{width:48px;height:56px;border-radius:0.4rem;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;text-transform:uppercase;cursor:pointer;transition:transform 0.15s,opacity 0.15s;user-select:none;}
.anagram-tile:hover{transform:scale(1.08);}
.anagram-tile.used{opacity:0.3;pointer-events:none;}
.anagram-answer{display:flex;gap:6px;justify-content:center;min-height:56px;margin-bottom:1rem;}
.anagram-slot{width:48px;height:56px;border-radius:0.4rem;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;text-transform:uppercase;background:var(--bg);cursor:pointer;transition:border-color 0.15s;}
.anagram-slot.filled{border-style:solid;border-color:var(--primary);background:#eef2ff;}
.anagram-timer-bar{height:6px;background:var(--border);border-radius:3px;margin-bottom:1rem;overflow:hidden;}
.anagram-timer-fill{height:100%;background:var(--primary);border-radius:3px;transition:width 0.5s linear;}
.anagram-timer-fill.low{background:#e53935;}

/* ===== Sliding Puzzle ===== */
.sp-grid{display:grid;gap:4px;margin:0 auto 1.25rem;max-width:320px;}
.sp-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;background:var(--primary);color:#fff;border-radius:0.5rem;cursor:pointer;transition:transform 0.15s;user-select:none;}
.sp-tile:hover{transform:scale(0.96);}
.sp-tile.empty{background:transparent;cursor:default;pointer-events:none;}
.sp-tile.correct{background:#6aaa64;}

/* ===== Number Sequence ===== */
.ns-sequence{display:flex;gap:0.5rem;justify-content:center;flex-wrap:wrap;align-items:center;margin:1.5rem 0;}
.ns-num{padding:0.6rem 1rem;border-radius:0.4rem;background:var(--bg-secondary);font-size:1.3rem;font-weight:700;min-width:50px;text-align:center;}
.ns-blank{padding:0.6rem 1rem;border-radius:0.4rem;border:2px dashed var(--primary);font-size:1.3rem;font-weight:700;min-width:50px;text-align:center;color:var(--primary);}
.ns-input{display:flex;gap:0.75rem;justify-content:center;align-items:center;margin-bottom:1.5rem;}
.ns-input input{width:100px;padding:0.6rem;border:2px solid var(--border);border-radius:0.4rem;font-size:1.2rem;font-weight:600;text-align:center;}
.ns-input input:focus{border-color:var(--primary);outline:none;}
.ns-feedback{text-align:center;padding:0.75rem;border-radius:0.5rem;margin-bottom:1rem;font-weight:600;}
.ns-feedback.correct{background:#e8f5e9;color:#2e7d32;}
.ns-feedback.wrong{background:#ffebee;color:#c62828;}

/* ===== Crossword ===== */
.cw-container{display:flex;flex-direction:column;gap:1.25rem;}
.cw-grid{display:grid;gap:1px;margin:0 auto;background:var(--text-primary);border:2px solid var(--text-primary);max-width:100%;}
.cw-cell{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;cursor:pointer;font-size:0.9rem;font-weight:600;text-transform:uppercase;}
.cw-cell.black{background:var(--text-primary);cursor:default;}
.cw-cell.selected{background:#bbdefb !important;}
.cw-cell.highlighted{background:#e3f2fd;}
.cw-cell.correct{background:#e8f5e9;}
.cw-cell .cw-number{position:absolute;top:1px;left:2px;font-size:0.55rem;font-weight:400;color:var(--text-secondary);}
.cw-cell input{width:100%;height:100%;border:none;background:transparent;text-align:center;font-size:0.9rem;font-weight:600;text-transform:uppercase;outline:none;padding:0;}
.cw-clues{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.cw-clues h3{font-size:0.95rem;margin-bottom:0.5rem;color:var(--primary);}
.cw-clue{padding:0.3rem 0.5rem;font-size:0.8rem;cursor:pointer;border-radius:0.25rem;transition:background 0.1s;line-height:1.4;}
.cw-clue:hover{background:var(--bg-secondary);}
.cw-clue.active{background:#e3f2fd;font-weight:600;}
.cw-clue.solved{text-decoration:line-through;opacity:0.5;}
@media(max-width:600px){.cw-clues{grid-template-columns:1fr;}.cw-cell{width:28px;height:28px;font-size:0.8rem;}}

/* ===== Spot the Difference ===== */
.std-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem;}
.std-grid{display:grid;gap:2px;border:2px solid var(--border);border-radius:0.5rem;overflow:hidden;padding:4px;background:var(--bg);}
.std-grid-label{text-align:center;font-weight:600;font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.4rem;}
.std-cell{aspect-ratio:1;border-radius:3px;transition:all 0.2s;cursor:pointer;}
.std-cell.found{outline:3px solid #6aaa64;outline-offset:-1px;animation:std-pulse 0.4s;}
.std-cell.wrong{animation:std-shake 0.3s;}
@keyframes std-pulse{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}
@keyframes std-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
@media(max-width:500px){.std-container{grid-template-columns:1fr;}}

/* ===== Daily Trivia ===== */
.dt-question{padding:1.5rem;border-radius:0.75rem;background:var(--bg);border:1px solid var(--border);margin-bottom:1rem;}
.dt-question h3{font-size:1rem;margin-bottom:1rem;line-height:1.5;}
.dt-category{display:inline-block;padding:0.2rem 0.6rem;border-radius:2rem;background:#eef2ff;color:var(--primary);font-size:0.75rem;font-weight:600;margin-bottom:0.75rem;}
.dt-options{display:flex;flex-direction:column;gap:0.5rem;}
.dt-option{padding:0.75rem 1rem;border:2px solid var(--border);border-radius:0.5rem;cursor:pointer;font-weight:500;transition:all 0.15s;text-align:left;background:var(--bg);}
.dt-option:hover:not(.locked){border-color:var(--primary);background:#eef2ff;}
.dt-option.selected{border-color:var(--primary);background:#eef2ff;}
.dt-option.correct{border-color:#6aaa64;background:#e8f5e9;color:#2e7d32;}
.dt-option.wrong{border-color:#e53935;background:#ffebee;color:#c62828;}
.dt-option.locked{cursor:default;}
.dt-progress{display:flex;gap:4px;justify-content:center;margin-bottom:1rem;}
.dt-progress-dot{width:10px;height:10px;border-radius:50%;background:var(--border);}
.dt-progress-dot.correct{background:#6aaa64;}
.dt-progress-dot.wrong{background:#e53935;}
.dt-progress-dot.current{background:var(--primary);}

/* ===== Streak display ===== */
.puzzle-streak{display:inline-flex;align-items:center;gap:0.3rem;padding:0.3rem 0.75rem;border-radius:2rem;background:#fff7ed;color:#ea580c;font-size:0.85rem;font-weight:600;margin-bottom:1rem;}

/* ===== Puzzles hub ===== */
.pz-hero{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 1.75rem;margin-bottom:2rem;border-radius:1rem;border:1px solid var(--border);background:linear-gradient(135deg,#eef2ff 0%,#fafbff 60%);}
.pz-hero-label{display:inline-block;padding:0.2rem 0.7rem;border-radius:2rem;background:var(--primary);color:#fff;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.6rem;}
.pz-hero h2{font-size:1.5rem;margin:0 0 0.3rem;}
.pz-hero p{color:var(--text-secondary);margin:0;font-size:0.95rem;}
.pz-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem;}
.pz-hero-streak{font-size:0.85rem;font-weight:600;color:#ea580c;}
@media(max-width:600px){.pz-hero{flex-direction:column;align-items:flex-start;}.pz-hero-side{align-items:flex-start;}}

.pz-chips{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:2rem;}
.pz-chip{padding:0.45rem 1.1rem;border-radius:2rem;border:2px solid var(--border);background:var(--bg);font-weight:600;font-size:0.85rem;cursor:pointer;transition:all 0.15s;color:var(--text-secondary);}
.pz-chip:hover{border-color:var(--primary);color:var(--primary);}
.pz-chip.active{border-color:var(--primary);background:var(--primary);color:#fff;}

.hub-card-stats{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.6rem;font-size:0.78rem;font-weight:600;color:var(--text-secondary);}
.pz-played-tick{color:#16a34a;font-weight:700;}

.pz-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.75rem;}

/* ===== Maths Quick-Fire ===== */
.mq-question{text-align:center;font-size:2.2rem;font-weight:800;margin:1.5rem 0;min-height:3rem;letter-spacing:0.02em;}
.mq-question.mq-flash-good{animation:mq-good 0.35s;}
.mq-question.mq-flash-bad{animation:mq-bad 0.35s;}
@keyframes mq-good{0%{color:#16a34a;}100%{color:inherit;}}
@keyframes mq-bad{0%{color:#dc2626;}100%{color:inherit;}}

/* ===== Group of Four ===== */
.g4-message{text-align:center;min-height:1.6rem;font-weight:600;margin-bottom:0.5rem;}
.g4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem;}
.g4-tile{aspect-ratio:2.2/1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0.3rem;border:2px solid var(--border);border-radius:0.5rem;background:var(--bg);font-weight:700;font-size:0.82rem;text-transform:uppercase;cursor:pointer;transition:all 0.12s;word-break:break-word;line-height:1.15;}
.g4-tile:hover{border-color:var(--primary);}
.g4-tile.selected{background:#475569;border-color:#475569;color:#fff;}
@keyframes g4-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.g4-solved{display:flex;flex-direction:column;gap:8px;margin-bottom:1rem;}
.g4-solved-row{border-radius:0.5rem;padding:0.7rem 1rem;text-align:center;}
.g4-solved-row strong{display:block;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.02em;}
.g4-solved-row span{font-size:0.82rem;}
.g4-solved-row.yellow{background:#f9df6d;color:#5c4d07;}
.g4-solved-row.green{background:#a0c35a;color:#2f4009;}
.g4-solved-row.blue{background:#b0c4ef;color:#1e3a8a;}
.g4-solved-row.purple{background:#ba81c5;color:#4a1158;}
.g4-mistakes{text-align:center;font-size:0.9rem;color:var(--text-secondary);margin-bottom:0.75rem;letter-spacing:0.2em;}
@media(max-width:480px){.g4-tile{font-size:0.68rem;aspect-ratio:1.8/1;}}

/* ===== Hangman ===== */
.hm-figure{display:flex;justify-content:center;margin-bottom:1rem;color:var(--text-primary,#1e293b);}
.hm-body circle,.hm-body line{stroke:#dc2626;}
.hm-word{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:1rem;}
.hm-letter{width:34px;height:42px;border-bottom:3px solid var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;text-transform:uppercase;}
.hm-letter.shown{border-bottom-color:var(--primary);}
.hm-letter.missed{color:#dc2626;}
.hm-space{width:20px;}
.hm-hint{text-align:center;min-height:2.4rem;margin-bottom:1rem;}
.hm-hint-text{font-size:0.9rem;color:var(--text-secondary);font-weight:600;}
.dw-key[disabled]{cursor:default;opacity:0.85;}
@media(max-width:480px){.hm-letter{width:26px;height:36px;font-size:1.1rem;}}