@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body{font-family:"Lexend Deca",serif;background:linear-gradient(#e3f0e9 0%,#ecf0f4 100%);min-height:100vh;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;overflow:hidden;transition:all .3s ease;position:fixed;width:100%;top:0;left:0}
html{background:linear-gradient(#e3f0e9 0%,#ecf0f4 100%)}
body.dark-mode{background:linear-gradient(#20413a 0%,#22252e 100%);color:#e5e7eb}
html.dark-mode{background:#1a1a2e}
.game-container{background:#fff;border-radius:20px;box-shadow:0 20px 40px #0000001a;padding:20px;max-width:600px;width:95%;height:100vh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden;transition:all .3s ease}
.dark-mode .game-container{background:#1e242e;box-shadow:0 20px 40px #0000004d}
.header{text-align:center;margin-bottom:10px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mode-selector{display:flex;background:#f3f4f6;border-radius:14px;padding:4px;margin-bottom:8px;transition:all .3s ease}
.dark-mode .mode-selector{background:#323c4d}
.mode-button{background:transparent;border:none;padding:8px 20px;border-radius:10px;font-size:.8em;font-weight:600;cursor:pointer;transition:all .3s ease;color:#6b7280;font-family:"Lexend Deca",serif}
.mode-button.active{background:#4b9c35;color:#fff;box-shadow:0 2px 8px #4b9c354d}
.mode-button:not(.active):hover{color:#374151}
.dark-mode .mode-button:not(.active){color:#9ca3af}
.dark-mode .mode-button:not(.active):hover{color:#e5e7eb}
.header-buttons{position:absolute;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.header-buttons-left{display:flex;gap:8px;pointer-events:none}
.header-buttons-right{display:flex;gap:8px;pointer-events:none}
.header-button{background:#f3f4f6;border:none;border-radius:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:700;cursor:pointer;transition:all .3s ease;color:#374151;box-shadow:0 2px 4px #0000001a;pointer-events:auto}
.archive-button{display:none}
.dark-mode .header-button{background:#323c4d;color:#e2e8f0;box-shadow:0 2px 4px #0003}
.header-button:hover{background:#e5e7eb;transform:scale(1.05)}
.dark-mode .header-button:hover{background:#5a6578}
.header-content{display:flex;flex-direction:column;align-items:center}
.game-title{font-size:2.2em;font-weight:700;color:#000;margin-bottom:5px;transition:color .3s ease;display:none}
.dark-mode .game-title{color:#f7fafc}
.score-display{font-size:1.6em;font-weight:700;color:#4b9c35;margin-bottom:10px;position:relative;transition:all .3s ease}
.daily-goal{font-size:.9em;color:#6b7280;margin-top:8px;font-weight:600;transition:all .3s ease;min-width:240px;text-align:center}
.dark-mode .daily-goal{color:#9ca3af}
.goal-reached{color:#6acc50!important}
.goal-progress{display:flex;gap:8px;margin-top:6px;transition:all .3s ease}
.goal-progress-section{flex:1;background:#e5e7eb;height:24px;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.dark-mode .goal-progress-section{background:#374151}
.goal-progress-bar{background:linear-gradient(90deg,#83c127,#4b9c35);height:100%;border-radius:12px;transition:width .5s ease;min-width:2px;position:absolute;left:0;top:0}
.goal-progress-bar.letters{background:linear-gradient(90deg,#f59e0b,#d97706)}
.goal-complete .goal-progress-bar{background:linear-gradient(90deg,#83c127,#4b9c35)}
.goal-complete .goal-progress-bar.letters{background:linear-gradient(90deg,#f59e0b,#d97706)}
.goal-target-text{color:#374151;font-weight:500;font-size:.65em;z-index:10;position:relative;transition:all .3s ease;text-align:center}
.dark-mode .goal-target-text{color:#f3f4f6}
.goal-complete .goal-target-text{color:#fff}
.score-bounce{animation:scoreBounce .6s ease-out}
@keyframes scoreBounce {
0%{transform:scale(1)}
30%{transform:scale(1.15);color:#54b738}
60%{transform:scale(1.05);color:#5bcc3c}
100%{transform:scale(1);color:#4b9c35}
}
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:all .3s ease}
.popup-overlay.active{opacity:1;visibility:visible}
.popup{background:#fff;border-radius:20px;padding:30px;max-width:380px;width:90%;max-height:85vh;overflow-y:auto;position:relative;transform:scale(0.8);transition:all .3s ease;box-shadow:0 20px 40px #0003}
.dark-mode .popup{background:#2d3748;box-shadow:0 20px 40px #0006}
.popup-overlay.active .popup{transform:scale(1)}
.popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.popup-title{font-size:1.5em;font-weight:700;color:#000;transition:color .3s ease}
.dark-mode .popup-title{color:#f7fafc}
.close-button{background:none;border:none;font-size:1.5em;cursor:pointer;color:#6b7280;padding:5px;border-radius:50%;width:35px;height:35px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.close-button:hover{background:#f3f4f6;color:#374151}
.dark-mode .close-button:hover{background:#5a6578}
.dark-mode .game-over-content .close-button{color:#9ca3af}
.dark-mode .game-over-content .close-button:hover{background:#5a6578;color:#e2e8f0}
.popup-content{line-height:1.6;color:#374151;transition:color .3s ease}
.dark-mode .popup-content{color:#e2e8f0}
.popup-content h3{color:#000;margin:15px 0 10px;font-size:1.1em;transition:color .3s ease}
.dark-mode .popup-content h3{color:#f7fafc}
.popup-content p{margin-bottom:15px}
.popup-content ul{margin:10px 0 15px 20px}
.popup-content li{margin-bottom:8px}
.menu-item{display:flex;align-items:center;padding:15px 0;border-bottom:1px solid #e5e7eb;cursor:pointer;transition:all .3s ease;text-decoration:none;color:#374151}
.dark-mode .menu-item{border-bottom:1px solid #323c4d;color:#e2e8f0}
.menu-item:hover{background:#f9fafb;border-radius:10px;padding-left:10px;margin:0 -10px}
.dark-mode .menu-item:hover{background:#323c4d}
.menu-item:last-child{border-bottom:none}
.menu-item-icon{font-size:1.2em;margin-right:15px;width:24px;text-align:center}
.menu-item-text{font-weight:500}
.game-board{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:6px;border-radius:10px;padding:0;margin-bottom:20px;aspect-ratio:1;max-width:380px;width:90%;margin-left:auto;margin-right:auto}
.grid-cell{background:#edf3f8;border-bottom:4px solid #0000001a;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.8em;font-weight:700;transition:all .1s ease;cursor:pointer;position:relative;aspect-ratio:1;width:100%;height:auto;will-change:transform,background-color}
.dark-mode .grid-cell{background:#323c4d;border-bottom:4px solid #ffffff1a}
.grid-cell.occupied{background:#66b051;border-bottom:4px solid #00000026;color:#fff!important;font-weight:700}
.grid-cell.initial-letter{background:#f59e0b;border-bottom:4px solid #0003;color:#fff!important;font-weight:700;position:relative;box-shadow:0 0 15px #f59e0b66}
.grid-cell.initial-letter::before{content:'⭐';position:absolute;top:3px;right:3px;font-size:.5em;z-index:10}
.grid-cell.valid-drop{background:#b7dfab;border-color:4px solid #00000026;transform:scale(1.05);transition:all .1s ease}
.dark-mode .grid-cell.valid-drop{background:#3e5238}
.grid-cell.word-highlight{background:#fecaca;border-color:4px solid #00000026;animation:wordPulse .8s ease-in-out;position:relative;overflow:visible;color:#fff!important}
.grid-cell.exploding{animation:cellExplode .6s ease-out forwards;color:#fff!important}
@keyframes wordPulse {
0%,100%{transform:scale(1);background:#ffc532;color:#fff}
25%{transform:scale(1.15);background:#ffbd32;color:#fff}
50%{transform:scale(1.2);background:#ff9c35;color:#fff}
75%{transform:scale(1.15);background:#ff8b35;color:#fff}
}
@keyframes cellExplode {
0%{transform:scale(1);opacity:1;background:#f56f0b;border-color:#d97706;color:#fff!important}
30%{transform:scale(1.3);opacity:.8;background:#e5591d;border-color:#f59e0b;color:#fff!important}
60%{transform:scale(1.5) rotate(180deg);opacity:.6;background:#e95a3b;border-color:#e6773d;color:#fff!important}
80%{transform:scale(1.8) rotate(270deg);opacity:.3;background:#ffa536;border-color:#fdba74;color:#fff!important}
100%{transform:scale(0) rotate(360deg);opacity:0;background:transparent;border-color:transparent;color:transparent}
}
.shapes-container{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;min-height:120px;align-items:flex-start;padding:10px 0;flex:1;margin-top:auto}
.shape{padding:10px;cursor:grab;transition:none;touch-action:none;display:flex;flex-direction:column;align-items:center;gap:8px;height:100px;width:100px;justify-content:center;position:relative}
.shape:active{cursor:grabbing}
.shape.dragging{opacity:.9;transform:scale(1.0);z-index:1000;position:fixed;pointer-events:none;transition:none;background:transparent;border:none;box-shadow:none;padding:0;will-change:transform;transform:translateZ(0)}
.shape.dragging .shape-cell{width:56px;height:56px;font-size:1.8em;border-radius:8px}
.shape.dragging .shape-cell.filled{background:#66b051;color:#fff;border-bottom:4px solid #00000026;box-shadow:0 4px 8px #0003}
.shape.disabled{opacity:.5;cursor:not-allowed}
.shape-grid{display:grid;gap:2px;min-height:60px;min-width:60px;align-content:center;justify-content:center;margin-bottom:15px}
.shape-cell{width:32px;height:32px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.9em;font-weight:700}
.shape-cell.filled{background:#66b051;color:#fff;border-bottom:2px solid #00000026}
.shape-cell.empty{background:transparent}
.dark-mode .btn-primary:hover{background:#48546a}
.share-button{font-family:"Lexend Deca",serif;color:#fff;background:#4b9c35;border-bottom:3px solid #00000026;margin-top:10px}
.rotate-btn{font-family:"Lexend Deca",serif;background:#e3e9f3;color:#000;border:none;border-radius:50%;padding:6px;font-size:.9em;font-weight:700;cursor:pointer;transition:all .3s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);z-index:10}
.dark-mode .rotate-btn{background:#323c4d;color:#f7fafc}
.rotate-btn:hover{background:#dae1ed}
.dark-mode .rotate-btn:hover{background:#5a6578}
.controls{display:flex;justify-content:center;gap:10px;margin-bottom:20px}
.btn{padding:10px 20px;border:none;border-radius:8px;font-size:.9em;font-weight:700;cursor:pointer;transition:all .3s ease}
.btn:hover{opacity:.85}
.btn-primary{font-family:"Lexend Deca",serif;background:#e3e9f3;border-bottom:3px solid #00000026;color:#000;transition:all .3s ease}
.dark-mode .btn-primary{background:#48546a;color:#f7fafc;border-bottom:3px solid #ffffff26}
.btn-primary:hover{background:#dae1ed}
.dark-mode .btn-primary:hover{background:#5a6578}
.grid-cell.game-over-fill{animation:gameOverFill .8s ease-out forwards}
@keyframes gameOverFill {
0%{background:#edf3f8;transform:scale(1);opacity:1}
30%{background:#d1d5db;transform:scale(1.1);opacity:.9}
60%{background:#9ca3af;transform:scale(1.05);opacity:.8}
100%{background:#6b7280;transform:scale(1);opacity:.7}
}
.game-over-wave{animation:gameOverWave .3s ease-out forwards}
@keyframes gameOverWave {
0%{transform:scale(1);background:#edf3f8}
50%{transform:scale(1.2);background:#e5e7eb}
100%{transform:scale(1);background:#9ca3af}
}
.game-over{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000;display:flex;align-items:center;justify-content:center;z-index:2000;animation:gameOverBackdrop .8s ease-out forwards}
@keyframes gameOverBackdrop {
0%{background:#0000}
100%{background:#000000b3}
}
.game-over-content{background:#fff;padding:25px 30px;border-radius:20px;text-align:center;max-width:380px;width:90%;transform:scale(0);animation:gameOverPopup .6s ease-out forwards;animation-delay:.2s;transition:background .3s ease;position:relative}
.dark-mode .game-over-content{background:#2d3748}
.dark-mode .game-over-content h3{color:#f7fafc!important}
.dark-mode .game-over-content .stats-container{background:#00000040!important}
@keyframes gameOverPopup {
0%{transform:scale(0) rotate(-10deg);opacity:0}
60%{transform:scale(1.1) rotate(2deg);opacity:1}
100%{transform:scale(1) rotate(0deg);opacity:1}
}
.game-over h2{font-size:1.8em;color:#000;margin-bottom:10px;transition:color .3s ease}
.dark-mode .game-over h2{color:#f7fafc}
.final-score{font-size:1.8em;color:#4b9c35;margin-bottom:10px}
.best-score{font-size:1.5em;color:#000;margin:10px 0;transition:color .3s ease}
.dark-mode .best-score{color:#f7fafc}
.countdown-timer{font-size:1.4em;color:#373d4a;margin:15px 0;font-weight:500;transition:color .3s ease}
.dark-mode .countdown-timer{color:#c7cfdc}
.switch-mode-btn{font-family:"Lexend Deca",serif;background:#6b7280;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:.9em;font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:10px}
.switch-mode-btn:hover{background:#4b5563}
.loading{text-align:center;padding:20px;color:#6b7280}
.word-animation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5em;font-weight:700;color:#4b9c35;pointer-events:none;opacity:0;animation:scoreFloat 2s ease-out forwards;z-index:9998;background:#ffffffe6;padding:4px 12px;border-radius:15px;border:1px solid #6acc50;backdrop-filter:blur(2px)}
@keyframes scoreFloat {
0%{opacity:1;transform:translate(-50%,-50%)}
100%{opacity:0;transform:translate(-50%,-150%)}
}
.word-score-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.2em;font-weight:700;color:#4b9c35;background:#fffffff2;padding:8px 16px;border-radius:20px;border:2px solid #6acc50;box-shadow:0 4px 20px #10b9814d;pointer-events:none;z-index:9999;animation:scorePopup 2s ease-out forwards;backdrop-filter:blur(2px)}
@keyframes scorePopup {
0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
40%{transform:translate(-50%,-50%) scale(1)}
70%{opacity:1;transform:translate(-50%,-80%) scale(1)}
100%{opacity:0;transform:translate(-50%,-150%) scale(0.8)}
}
.bomb-cell{position:relative}
.bomb-cell::before{content:'💣';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8em;z-index:1}
@keyframes bombPulse {
0%,100%{box-shadow:0 0 10px #dc262680 0 0 20px #dc26264d;transform:scale(1)}
50%{box-shadow:0 0 20px #dc2626cc 0 0 30px #dc262680;transform:scale(1.05)}
}
.bomb-explosion{animation:cellExplode 1.3s ease-out forwards!important;z-index:1000!important;position:relative!important}
@keyframes bombExplode {
0%{transform:scale(1);background:#ff8b35;color:#fff;opacity:1}
25%{transform:scale(1.3);background:#ff9c35;color:#fff;opacity:.75}
50%{transform:scale(1.5);background:#ffbd32;color:#fff;opacity:.5}
75%{transform:scale(1.8);background:#ffc532;color:#fff;opacity:.25}
100%{transform:scale(2);background:#ffc532;color:#fff;opacity:0}
}
.bomb-blast-effect{position:absolute;width:100%;height:100%;background:radial-gradient(circle,#e37644cc 0%,#f59e0b99 30%,transparent 70%);border-radius:50%;pointer-events:none;animation:blastWave .8s ease-out forwards;z-index:1001}
@keyframes blastWave {
0%{transform:scale(0);opacity:1}
100%{transform:scale(8);opacity:0}
}
.blast-particle{position:absolute;width:8px;height:8px;background:radial-gradient(circle,#e6773d 0%,#f59e0b 70%,transparent 100%);border-radius:50%;pointer-events:none;z-index:150}
@keyframes particleBlast {
0%{opacity:1;transform:scale(1)}
100%{opacity:0;transform:scale(0.2)}
}
.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:15000;opacity:0;visibility:hidden;transition:all .3s ease}
.tutorial-overlay.active{opacity:1;visibility:visible}
.tutorial-content{background:#fff;border-radius:20px;padding:30px;max-width:380px;width:90%;text-align:center;transform:scale(0.8);transition:all .3s ease}
.dark-mode .tutorial-content{background:#2d3748}
.tutorial-overlay.active .tutorial-content{transform:scale(1)}
.tutorial-title{font-size:1.8em;font-weight:700;color:#000;margin-bottom:15px}
.dark-mode .tutorial-title{color:#f7fafc}
.tutorial-text{font-size:1.1em;color:#374151;margin-bottom:25px;line-height:1.5}
.dark-mode .tutorial-text{color:#e2e8f0}
.tutorial-demo{position:relative;margin:20px 0;height:120px;display:flex;align-items:center;justify-content:center}
.tutorial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-right:40px}
.tutorial-cell{width:30px;height:30px;background:#edf3f8;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.9em;font-weight:700;border-bottom:3px solid #0000001a}
.dark-mode .tutorial-cell{background:#323c4d;border-bottom:3px solid #ffffff1a}
.tutorial-cell.filled{background:#66b051;color:#fff}
.tutorial-shape{display:flex;flex-direction:column;align-items:center;gap:4px}
.tutorial-shape-cell{width:25px;height:25px;background:#66b051;color:#fff;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.8em;font-weight:700;border-bottom:2px solid #00000026}
.tutorial-hand{position:absolute;font-size:2em;z-index:10;pointer-events:none;opacity:0}
.tutorial-hand.grab{animation:tutorialGrab 3s ease-in-out infinite}
.tutorial-hand.drag{animation:tutorialDrag 3s ease-in-out infinite}
@keyframes tutorialGrab {
0%,100%{transform:translate(100px,0) scale(1);opacity:0}
15%{opacity:1;transform:translate(100px,0) scale(1)}
25%{transform:translate(100px,0) scale(0.9)}
30%{transform:translate(100px,0) scale(1)}
45%{transform:translate(-20px,-10px) scale(1)}
70%{transform:translate(-20px,-10px) scale(0.9)}
75%{transform:translate(-20px,-10px) scale(1);opacity:1}
85%{opacity:0}
}
.tutorial-arrow{position:absolute;font-size:1.5em;color:#66b051;animation:tutorialArrow 3s ease-in-out infinite;opacity:0}
@keyframes tutorialArrow {
0%,100%{opacity:0;transform:translate(60px,-5px)}
35%,65%{opacity:1;transform:translate(20px,-5px)}
}
.tutorial-skip{background:#e5e7eb;color:#374151;border:none;padding:8px 16px;border-radius:8px;font-size:.9em;cursor:pointer;margin-right:10px;transition:all .3s ease}
.tutorial-skip:hover{background:#d1d5db}
.tutorial-start{font-family:"Lexend Deca",serif;background:#4b9c35;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:1em;font-weight:700;cursor:pointer;transition:all .3s ease}
.tutorial-start:hover{background:#3b8527}
.archive-calendar-wrapper{max-width:320px;margin:0 auto}
.archive-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.archive-nav-btn{background:#e5e7eb;border:none;border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-size:1.1em}
.dark-mode .archive-nav-btn{background:#323c4d;color:#e2e8f0}
.archive-nav-btn:hover{background:#d1d5db}
.dark-mode .archive-nav-btn:hover{background:#5a6578}
.archive-header{text-align:center;font-weight:700;color:#374151;font-size:1em}
.dark-mode .archive-header{color:#e2e8f0}
.archive-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:8px}
.archive-weekday{text-align:center;font-size:.7em;font-weight:600;color:#6b7280;padding:4px 0}
.dark-mode .archive-weekday{color:#9ca3af}
.archive-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.archive-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:.8em;font-weight:500;position:relative;min-height:32px}
.archive-day.available{background:#f3f4f6;color:#374151;border:2px solid transparent}
.dark-mode .archive-day.available{background:#323c4d;color:#e2e8f0}
.archive-day.available:hover{background:#e5e7eb;transform:scale(1.05)}
.dark-mode .archive-day.available:hover{background:#5a6578}
.archive-day.completed{background:#6acc50;color:#fff;border:2px solid #4b9c35}
.archive-day.completed::after{content:'✓';position:absolute;bottom:2px;right:2px;font-size:.7em}
.archive-day.won{background:#6acc50;color:#fff;border:2px solid #4b9c35}
.archive-day.won::after{content:'🏆';position:absolute;bottom:1px;right:1px;font-size:.6em}
.archive-day.lost{background:#ef4444;color:#fff;border:2px solid #dc2626}
.archive-day.lost::after{content:'❌';position:absolute;bottom:1px;right:1px;font-size:.5em}
.archive-day.partial{background:#fbbf24;color:#fff;border:2px solid #f59e0b}
.archive-day.partial::after{content:'⏳';position:absolute;bottom:1px;right:1px;font-size:.6em}
.archive-day.today{background:#4b9c35;color:#fff;border:2px solid #3b8527;font-weight:700}
.archive-day.unavailable{background:#f9fafb;color:#d1d5db;cursor:not-allowed}
.dark-mode .archive-day.unavailable{background:#1f2937;color:#4b5563}
.archive-container{max-height:400px;overflow:hidden}
.archive-legend{display:flex;justify-content:center;gap:12px;margin-bottom:20px;font-size:.75em;transition:color .3s ease}
.archive-legend span{display:flex;align-items:center;gap:4px;color:#6b7280}
.dark-mode .archive-legend span{color:#9ca3af!important}
@media (max-width: 600px) {
body{padding:0;margin:0}
.game-container{width:100%;height:100vh;border-radius:0;padding:15px;box-shadow:none}
.mode-selector{margin-bottom:10px}
.mode-button{padding:6px 16px;font-size:.85em}
.tutorial-content{padding:20px}
.tutorial-title{font-size:1.5em}
.tutorial-text{font-size:1em}
.tutorial-demo{height:100px}
.tutorial-cell{width:25px;height:25px;font-size:.8em}
.tutorial-shape-cell{width:20px;height:20px;font-size:.7em}
.tutorial-hand{font-size:1.5em}
@keyframes tutorialGrab {
0%,100%{transform:translate(80px,0) scale(1);opacity:0}
15%{opacity:1;transform:translate(80px,0) scale(1)}
25%{transform:translate(80px,0) scale(0.9)}
30%{transform:translate(80px,0) scale(1)}
45%{transform:translate(-15px,-8px) scale(1)}
70%{transform:translate(-15px,-8px) scale(0.9)}
75%{transform:translate(-15px,-8px) scale(1);opacity:1}
85%{opacity:0}
}
@keyframes tutorialArrow {
0%,100%{opacity:0;transform:translate(50px,-5px)}
35%,65%{opacity:1;transform:translate(15px,-5px)}
}
.game-title{font-size:1.8em}
.shapes-container{min-height:100px;gap:35px;padding:5px 0}
.shape{height:75px;width:75px;padding:6px}
.shape-grid{min-height:45px;min-width:45px;margin-bottom:8px}
.game-board{max-width:92%;width:92%;gap:5px;margin-bottom:15px}
.score-display{font-size:1.6em}
.daily-goal{font-size:.8em;margin-top:6px}
.goal-progress{height:20px;margin-top:4px}
.goal-target-text{font-size:.75em}
.grid-cell{font-size:1.6em;border-bottom:3px solid #0000001a}
.shape-cell{width:28px;height:28px;font-size:.75em}
.shape.dragging .shape-cell{width:42px;height:42px;font-size:1.2em}
.popup{padding:20px;width:95%;margin:10px}
.popup-title{font-size:1.3em}
.archive-calendar-wrapper{max-width:290px}
.archive-day{min-height:28px;font-size:.75em}
.archive-nav-btn{width:24px;height:24px;font-size:1em}
.archive-header{font-size:.9em}
.archive-weekday{font-size:.65em;padding:2px 0}
.archive-weekdays{gap:2px;margin-bottom:6px}
.archive-calendar{gap:2px}
.archive-container{max-height:320px}
.archive-legend{gap:8px!important;font-size:.7em!important;margin-bottom:15px!important}
.archive-legend span{gap:3px!important}
.archive-legend div{width:10px!important;height:10px!important}
}