.game-page{padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-12);min-height:100vh;background:var(--color-bg)}.game-container{max-width:640px;margin:0 auto;padding:0 var(--space-4)}.game-header{display:flex;justify-content:space-between;align-items:center;background:var(--color-bg-elevated);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm)}.game-stat{text-align:center}.game-stat__label{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold)}.game-stat__value{font-size:var(--text-2xl);font-weight:var(--weight-extrabold);color:var(--color-primary);margin-top:var(--space-1)}.game-board{background:var(--color-bg-elevated);border:1px solid var(--color-border-light);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md);text-align:center}.start-screen{text-align:center;padding:var(--space-12) 0}.start-screen__icon{font-size:4rem;margin-bottom:var(--space-4)}.start-screen__title{font-size:var(--text-3xl);font-weight:var(--weight-extrabold);color:var(--color-primary);margin-bottom:var(--space-3)}.start-screen__desc{font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:var(--leading-relaxed)}.difficulty-select{display:flex;gap:var(--space-3);justify-content:center;margin-bottom:var(--space-6);flex-wrap:wrap}.difficulty-btn{padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-semibold);border:2px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s;font-family:var(--font-primary);background:var(--color-bg-elevated);color:var(--color-text-secondary);min-width:100px}.difficulty-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.difficulty-btn--easy{border-color:var(--color-success);color:var(--color-success)}.difficulty-btn--easy.selected,.difficulty-btn--easy:active{background:var(--color-success);color:white}.difficulty-btn--medium{border-color:var(--color-warning);color:var(--color-warning)}.difficulty-btn--medium.selected,.difficulty-btn--medium:active{background:var(--color-warning);color:white}.difficulty-btn--hard{border-color:var(--color-error);color:var(--color-error)}.difficulty-btn--hard.selected,.difficulty-btn--hard:active{background:var(--color-error);color:white}.rules-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:100;display:none;align-items:center;justify-content:center;padding:var(--space-4)}.rules-overlay.show,.rules-overlay.active{display:flex;animation:fadeIn 0.3s ease;animation-fill-mode:both}.rules-box{background:var(--color-bg-elevated);border-radius:var(--radius-xl);padding:var(--space-8);max-width:480px;width:100%;box-shadow:var(--shadow-xl);animation:slideUp 0.3s ease}.rules-box__title{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-text-primary);margin-bottom:var(--space-4)}.rules-box ul{list-style:none;padding:0;margin-bottom:var(--space-6)}.rules-box li{padding:var(--space-2) 0;font-size:var(--text-sm);color:var(--color-text-secondary);display:flex;align-items:flex-start;gap:var(--space-2)}.rules-box li::before{content:"•";color:var(--color-primary);font-weight:var(--weight-bold);flex-shrink:0}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:200;display:none;align-items:center;justify-content:center;padding:var(--space-4)}.modal-overlay.show,.modal-overlay.active{display:flex}.modal-box{background:var(--color-bg-elevated);border-radius:var(--radius-xl);padding:var(--space-8);max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow-xl);animation:slideUp 0.3s ease}.modal-score{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);color:var(--color-primary);margin-bottom:var(--space-2)}.modal-detail{font-size:var(--text-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-6)}.modal-buttons{display:flex;gap:var(--space-3);justify-content:center}.modal{background:var(--color-bg-elevated);border-radius:var(--radius-xl);padding:var(--space-10);max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow-elevated);animation:modalIn 0.3s ease-out}.modal__icon{font-size:3.5rem;margin-bottom:var(--space-4)}.modal__title{font-size:var(--text-2xl);font-weight:var(--weight-extrabold);color:var(--color-primary);margin-bottom:var(--space-2)}.modal__subtitle{font-size:var(--text-base);color:var(--color-text-secondary);margin-bottom:var(--space-6)}.modal__score{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);color:var(--color-primary);margin-bottom:var(--space-2)}.modal__max{font-size:var(--text-sm);color:var(--color-text-tertiary);margin-bottom:var(--space-6)}.modal__stats{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-8)}.modal__stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.modal__stat-value{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--color-primary)}.modal__stat-label{font-size:var(--text-xs);color:var(--color-text-tertiary)}.modal__actions{display:flex;gap:var(--space-3);justify-content:center}.feedback{position:static;min-height:0;margin:0;font-size:var(--text-base);font-weight:var(--weight-semibold)}.feedback--success{color:var(--color-success)}.feedback--error{color:var(--color-error)}.feedback--info{color:var(--color-primary)}.game-toast{position:fixed;top:calc(var(--nav-height) + var(--space-4));left:50%;transform:translateX(-50%);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-semibold);z-index:300;animation:fadeIn 0.2s ease;pointer-events:none}.game-toast--success{background:var(--color-success);color:white}.game-toast--error{background:var(--color-error);color:white}.game-toast--info{background:var(--color-primary);color:white}.feedback-toast{display:none;pointer-events:none;visibility:hidden}.feedback-toast.show,.feedback-toast.active{display:block;visibility:visible;animation-fill-mode:both}.score-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--text-lg);font-weight:var(--weight-extrabold);pointer-events:none;z-index:10;opacity:0;visibility:hidden}.score-popup.show{display:block;visibility:visible;animation:popScore 0.8s ease-out forwards;animation-fill-mode:both}.streak-display{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:var(--color-bg-subtle);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-bold)}.streak-display__icon{font-size:var(--text-base)}.streak-display__text{color:var(--color-accent)}.streak{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-accent)}.streak-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 var(--space-2);background:var(--color-accent);color:white;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-bold)}.game-btn{padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-primary);display:inline-flex;align-items:center;gap:var(--space-2)}.game-btn--primary{background:var(--color-primary);color:white}.game-btn--primary:hover{background:var(--color-primary-dark,#001D3D);transform:translateY(-1px);box-shadow:var(--shadow-md)}.game-btn--hint{background:var(--color-bg-muted);color:var(--color-text-secondary)}.game-btn--hint:hover{background:var(--color-bg-subtle);color:var(--color-text-primary)}.game-btn--next{background:var(--color-accent);color:white}.game-btn--next:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.game-btn--secondary{background:var(--color-bg-muted);color:var(--color-text-primary)}.game-btn--secondary:hover{background:var(--color-border)}.start-btn{padding:var(--space-4) var(--space-10);background:var(--color-primary);color:white;border:none;border-radius:var(--radius-full);font-size:var(--text-lg);font-weight:var(--weight-bold);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-primary)}.start-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-start{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-8);background:var(--color-primary);color:white;border:none;border-radius:var(--radius-full);font-size:var(--text-lg);font-weight:var(--weight-bold);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-primary)}.btn-start:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-start:active{transform:translateY(0)}.btn-modal{padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-size:var(--text-base);font-weight:var(--weight-semibold);cursor:pointer;transition:all var(--transition-fast);border:none;font-family:var(--font-primary)}.btn-modal--primary{background:var(--color-primary);color:white}.btn-modal--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-modal--secondary{background:var(--color-bg-muted);color:var(--color-text-primary)}.btn-modal--secondary:hover{background:var(--color-border)}.progress-bar{width:100%;height:8px;background:var(--color-bg-muted);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-4)}.progress-bar__fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width 0.3s ease}.timer-bar{width:100%;height:4px;background:var(--color-bg-muted);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-4)}.timer-bar__fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width 0.3s ease}.timer-bar__fill.danger{background:var(--color-error)}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)}.option-btn{padding:var(--space-4) var(--space-3);background:var(--color-bg-elevated);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);text-align:center}.option-btn:hover{border-color:var(--color-primary);background:var(--color-bg-subtle);transform:translateY(-1px)}.action-row{display:flex;gap:var(--space-3);justify-content:center;margin-top:var(--space-4)}.how-to-play{background:var(--color-bg-subtle);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4);text-align:left}.how-to-play h3{font-size:var(--text-lg);margin-bottom:var(--space-2);color:var(--color-primary)}.how-to-play ul{list-style:disc;padding-left:var(--space-5)}.how-to-play li{color:var(--color-text-secondary);margin-bottom:var(--space-1);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.control-buttons{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}.selected{border-color:var(--color-primary) !important;background:var(--color-bg-subtle)}.option-btn.correct,.option-card.correct,.answer-input.correct,.task-card.correct,.sort-btn.correct,.feedback-flash.correct,.sort-item.correct,.word-chip.correct,.use-item.correct{border-color:var(--color-success) !important;background:rgba(46,125,50,0.08);color:var(--color-success)}.option-btn.wrong,.option-card.wrong,.answer-input.wrong,.task-card.wrong,.sort-btn.wrong,.feedback-flash.wrong,.sort-item.wrong,.word-chip.wrong,.use-item.wrong{border-color:var(--color-error) !important;background:rgba(198,40,40,0.08);color:var(--color-error);animation:wrongShake 0.3s ease}.feedback-flash.correct{background:rgba(46,125,50,0.15) !important;opacity:1 !important}.feedback-flash.wrong{background:rgba(198,40,40,0.15) !important;opacity:1 !important}.success{color:var(--color-success)}.error{color:var(--color-error)}.warning{color:var(--color-warning)}.danger{color:var(--color-error)}.modal-overlay.show,.modal-overlay.active{display:flex !important;animation-fill-mode:both}.feedback-toast.show,.feedback-toast.active{display:block;visibility:visible;animation-fill-mode:both}.game-toast.show{display:block}.streak-badge.show{display:inline-flex;opacity:1;animation-fill-mode:both}.score-popup.show{display:block;visibility:visible;animation-fill-mode:both}.active{}.disabled{cursor:default;opacity:0.7;pointer-events:none}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes modalIn{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes correctPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes wrongShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes popScore{0%{transform:translate(-50%,-50%) scale(0.3);opacity:0}30%{transform:translate(-50%,-80%) scale(1.2);opacity:1}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}.navbar__back{display:flex;align-items:center;gap:var(--space-1);color:var(--color-text-secondary);text-decoration:none;font-size:var(--text-sm);font-weight:var(--weight-medium);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);transition:all 0.2s ease;margin-right:auto;flex-shrink:0;white-space:nowrap}.navbar__back:hover{color:var(--color-primary);background:var(--color-bg-subtle)}.navbar__back svg{flex-shrink:0}.game-nav .navbar__inner{gap:var(--space-2)}.game-nav .navbar__logo{flex-shrink:0}@media (max-width:768px){.navbar__back .back-label{display:none}.game-nav .navbar__links{position:fixed;top:var(--nav-height);left:0;right:0;background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border-light);box-shadow:var(--shadow-md);flex-direction:column;padding:var(--space-4);gap:var(--space-2);transform:translateY(-100%);opacity:0;transition:all 0.3s ease;z-index:99}.game-nav .navbar__links.open{transform:translateY(0);opacity:1}.game-nav .navbar__toggle{display:flex}}@media (min-width:769px){.navbar__back .back-label{display:inline}}@media (max-width:480px){.game-header{flex-wrap:wrap;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.game-stat__value{font-size:var(--text-xl)}.game-board{padding:var(--space-6) var(--space-4)}.game-container{padding:var(--space-4)}.difficulty-btn{min-width:80px;padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.options-grid{grid-template-columns:1fr}.modal-box,.modal{padding:var(--space-6)}.modal__stats{gap:var(--space-4)}}