.bingo-card{background:var(--white);border-radius:var(--radius-xl);padding:clamp(.375rem,1.5vw,.75rem);box-shadow:var(--shadow-xl);width:100%;max-width:min(90vw,500px);margin:0 auto;position:relative;overflow:hidden;border:2px solid var(--primary-color);box-sizing:border-box}.bingo-header{text-align:center;margin-bottom:clamp(.25rem,1vh,.5rem)}.bingo-title{font-size:clamp(.875rem,3vw,1.125rem);font-weight:700;color:var(--primary-color);text-shadow:2px 2px 4px rgba(0,0,0,.1);margin-bottom:clamp(.125rem,.5vh,.25rem);line-height:1.2}.bingo-container{display:flex;flex-direction:column;gap:clamp(.125rem,.5vh,.375rem)}.bingo-column-headers{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(2px,.3vw,.375rem);margin-bottom:clamp(.125rem,.5vh,.375rem)}.column-header{background:var(--gradient-primary);color:var(--white);font-size:clamp(.875rem,3vw,1.125rem);font-weight:700;text-align:center;padding:clamp(.25rem,1vw,.5rem);border-radius:var(--radius-md);box-shadow:var(--shadow-md);text-shadow:2px 2px 4px rgba(0,0,0,.3);min-height:clamp(30px,6vw,40px);display:flex;align-items:center;justify-content:center}.bingo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(2px,.3vw,.375rem);background:var(--medium-gray);padding:clamp(.25rem,.75vw,.375rem);border-radius:var(--radius-md);box-shadow:inset 0 2px 4px #0000001a}.bingo-cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-weight:700;transition:all var(--transition-normal);position:relative;cursor:default;-webkit-user-select:none;user-select:none;min-height:clamp(30px,6vw,40px);font-size:clamp(.625rem,2vw,.875rem)}.bingo-cell.not-drawn{background:linear-gradient(135deg,var(--light-gray) 0%,var(--white) 100%);border:2px solid var(--medium-gray);color:var(--dark-gray);box-shadow:var(--shadow-sm)}.bingo-cell.drawn{background:var(--gradient-success);border:2px solid var(--success-color);color:var(--white);box-shadow:var(--shadow-md);animation:pulse .5s ease;transform:scale(.95)}.bingo-cell.drawn .letter{font-size:clamp(.75rem,2.5vw,1rem);text-shadow:1px 1px 2px rgba(0,0,0,.3)}.bingo-cell.bingo-free{background:var(--gradient-secondary);border:3px solid var(--secondary-color);color:var(--white);box-shadow:var(--shadow-lg)}.free-space{display:flex;flex-direction:column;align-items:center;gap:clamp(.125rem,.5vw,.25rem)}.free-icon{font-size:clamp(.75rem,2.5vw,1rem);animation:bounce 2s infinite}.free-text{font-size:clamp(.5rem,1.25vw,.625rem);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3);letter-spacing:.5px}.letter{font-size:clamp(.75rem,2.5vw,1rem);font-weight:700;line-height:1}.draw-order{font-size:clamp(.5rem,1.25vw,.625rem);opacity:.8;margin-top:clamp(.125rem,.5vw,.25rem);background:#fff3;padding:1px 4px;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.bingo-cell.drawn:hover{transform:scale(1);animation:wiggle .5s ease-in-out}.bingo-cell.not-drawn:hover{background:linear-gradient(135deg,var(--white) 0%,var(--light-gray) 100%);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 480px){.bingo-card{padding:.375rem;max-width:100vw;border-radius:var(--radius-lg)}.bingo-title{font-size:clamp(.75rem,3vw,1rem)}}@media (min-width: 481px) and (max-width: 768px){.bingo-card{max-width:85vw}}@media (min-width: 769px){.bingo-card{max-width:min(500px,85vw)}.column-header{min-height:45px;font-size:1.25rem}.bingo-cell{min-height:45px}.letter{font-size:1.125rem}}.bingo-cell.just-drawn{animation:pulse 1s ease,bounce .5s ease .5s}@media (prefers-contrast: high){.bingo-cell.drawn{border-width:3px;color:var(--black)}.bingo-cell.bingo-free{border-width:4px}}.bingo-cell.bingo-empty{background:transparent;border:2px dashed var(--medium-gray);opacity:.3}.extra-letters{margin-top:clamp(.375rem,1.5vh,.75rem);padding:clamp(.375rem,1vw,.5rem);background:var(--light-gray);border-radius:var(--radius-md);border:2px solid var(--medium-gray)}.extra-letters-title{font-size:clamp(.625rem,2vw,.875rem);font-weight:700;color:var(--primary-color);text-align:center;margin-bottom:clamp(.125rem,.5vh,.375rem)}.extra-letters-list{display:flex;flex-wrap:wrap;gap:clamp(.25rem,.75vw,.375rem);justify-content:center}.extra-letter{background:linear-gradient(135deg,var(--light-gray) 0%,var(--white) 100%);border:2px solid var(--medium-gray);border-radius:var(--radius-sm);padding:clamp(.25rem,.75vw,.375rem);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:clamp(30px,6vw,40px);min-height:clamp(30px,6vw,40px);font-weight:700;transition:all var(--transition-normal);cursor:default;-webkit-user-select:none;user-select:none;color:var(--dark-gray);box-shadow:var(--shadow-sm)}.extra-letter.drawn{background:var(--gradient-success);border-color:var(--success-color);color:var(--white);box-shadow:var(--shadow-md);animation:pulse .5s ease;transform:scale(.95)}.extra-letter.drawn .letter{font-size:clamp(.75rem,2.5vw,1rem);text-shadow:1px 1px 2px rgba(0,0,0,.3)}.extra-letter:not(.drawn):hover{background:linear-gradient(135deg,var(--white) 0%,var(--light-gray) 100%);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 480px){.extra-letter{min-width:clamp(28px,6vw,35px);min-height:clamp(28px,6vw,35px)}}@media (min-width: 769px){.extra-letter{min-width:45px;min-height:45px}}.game-controls{width:100%;max-width:500px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-lg)}.start-section{text-align:center;padding:var(--spacing-xl)}.last-draw-section{background:var(--gradient-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);text-align:center;box-shadow:var(--shadow-md);border:2px solid var(--secondary-color)}.last-draw-label{font-size:var(--font-size-lg);color:var(--white);margin-bottom:var(--spacing-sm);text-shadow:1px 1px 2px rgba(0,0,0,.3);font-weight:700}.last-draw-letter{font-size:var(--font-size-4xl);font-weight:700;color:var(--white);text-shadow:3px 3px 6px rgba(0,0,0,.4);background:#fff3;border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin:0 auto;border:3px solid rgba(255,255,255,.3)}.bottom-controls{background:var(--white);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-lg);border:2px solid var(--medium-gray);display:flex;flex-direction:column;gap:var(--spacing-md)}.progress-section{text-align:center}.progress-text{font-size:var(--font-size-lg);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.progress-bar{width:100%;height:20px;background:var(--medium-gray);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--spacing-md);box-shadow:inset 0 2px 4px #0000001a;border:2px solid var(--dark-gray)}.progress-fill{height:100%;background:var(--gradient-success);border-radius:var(--radius-md);transition:width var(--transition-slow);position:relative}.progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.control-btn{background:var(--gradient-primary);border:none;border-radius:var(--radius-lg);padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg);font-weight:700;color:var(--white);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);text-shadow:1px 1px 2px rgba(0,0,0,.2);font-family:var(--font-family);border:2px solid transparent;min-height:60px}.control-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.control-btn:active{transform:translateY(0);box-shadow:var(--shadow-md)}.start-btn{background:var(--gradient-success);border-color:var(--success-color);font-size:var(--font-size-xl);padding:var(--spacing-xl) var(--spacing-2xl)}.reset-btn{background:var(--gradient-secondary);border-color:var(--secondary-color)}.completion-message{text-align:center;margin-top:var(--spacing-md)}.celebration{font-size:var(--font-size-xl);font-weight:700;color:var(--success-color);text-shadow:2px 2px 4px rgba(0,0,0,.1);animation:bounce 1s infinite}@media (max-width: 480px){.last-draw-letter{font-size:var(--font-size-3xl);width:70px;height:70px}.last-draw-label,.progress-text{font-size:var(--font-size-md)}.progress-bar{height:15px}.control-btn{font-size:var(--font-size-md);padding:var(--spacing-md) var(--spacing-lg);min-height:50px}.start-btn,.celebration{font-size:var(--font-size-lg)}}@media (min-width: 769px){.last-draw-letter{font-size:var(--font-size-4xl);width:100px;height:100px}.control-btn{font-size:var(--font-size-xl)}}.control-btn:focus{outline:3px solid var(--accent-color);outline-offset:2px}.drawn-letters{background:var(--white);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;margin:0 auto}.drawn-title{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color);text-align:center;margin-bottom:var(--spacing-lg);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.drawn-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:var(--spacing-sm);max-height:200px;overflow-y:auto;padding:var(--spacing-sm);background:var(--light-gray);border-radius:var(--radius-md);box-shadow:inset 0 2px 4px #0000001a}.drawn-item{background:var(--gradient-success);border-radius:var(--radius-sm);padding:var(--spacing-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--white);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);cursor:pointer;min-height:60px}.drawn-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);animation:wiggle .5s ease-in-out}.drawn-item:nth-child(6n+1){background:var(--gradient-primary)}.drawn-item:nth-child(6n+2){background:var(--gradient-secondary)}.drawn-item:nth-child(6n+3){background:linear-gradient(135deg,#ff9a9e,#fecfef)}.drawn-item:nth-child(6n+4){background:linear-gradient(135deg,#a18cd1,#fbc2eb)}.drawn-item:nth-child(6n+5){background:linear-gradient(135deg,#fad0c4,#ffd1ff)}.drawn-item:nth-child(6n){background:linear-gradient(135deg,#ffecd2,#fcb69f)}.drawn-letter{font-size:var(--font-size-xl);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3);line-height:1}.drawn-number{font-size:var(--font-size-xs);opacity:.8;margin-top:var(--spacing-xs);background:#fff3;padding:2px 6px;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.drawn-item:last-child{animation:slideInUp .5s ease-out}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.drawn-list::-webkit-scrollbar{width:8px}.drawn-list::-webkit-scrollbar-track{background:var(--medium-gray);border-radius:var(--radius-sm)}.drawn-list::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:var(--radius-sm);transition:background var(--transition-normal)}.drawn-list::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}@media (max-width: 480px){.drawn-letters{padding:var(--spacing-md)}.drawn-title{font-size:var(--font-size-lg)}.drawn-list{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:var(--spacing-xs);max-height:150px}.drawn-item{min-height:50px;padding:var(--spacing-xs)}.drawn-letter{font-size:var(--font-size-lg)}.drawn-number{font-size:10px}}@media (min-width: 769px){.drawn-list{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));max-height:250px}.drawn-item{min-height:80px}.drawn-letter{font-size:var(--font-size-2xl)}}.drawn-list:empty:after{content:"Nenhuma letra sorteada ainda 🎲";grid-column:1 / -1;text-align:center;color:var(--dark-gray);font-style:italic;padding:var(--spacing-lg)}.drawn-item:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (prefers-reduced-motion: reduce){.drawn-item:last-child{animation:none}.drawn-item:hover{animation:none}}.game-settings{position:relative;z-index:1000}.settings-toggle{background:var(--gradient-primary);border:none;border-radius:50%;width:50px;height:50px;font-size:var(--font-size-xl);color:var(--white);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}.settings-toggle:hover{transform:rotate(90deg) scale(1.1);box-shadow:var(--shadow-lg)}.settings-toggle:active{transform:rotate(90deg) scale(1)}.settings-panel{position:absolute;top:60px;right:0;background:var(--white);border-radius:var(--radius-lg);padding:0;box-shadow:var(--shadow-xl);min-width:280px;max-width:90vw;animation:slideInDown .3s ease-out;border:2px solid var(--primary-color)}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.settings-header{background:var(--gradient-primary);color:var(--white);padding:var(--spacing-md);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;justify-content:space-between;align-items:center}.settings-header h3{font-size:var(--font-size-lg);margin:0;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.close-settings{background:#fff3;border:none;border-radius:50%;width:30px;height:30px;font-size:var(--font-size-md);color:var(--white);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.close-settings:hover{background:#ffffff4d;transform:scale(1.1)}.settings-content{padding:var(--spacing-lg)}.setting-group{margin-bottom:var(--spacing-lg)}.setting-group:last-child{margin-bottom:0}.setting-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:var(--font-size-md);color:var(--black);transition:color var(--transition-normal)}.setting-label:hover{color:var(--primary-color)}.setting-label input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary-color);cursor:pointer}.setting-text{font-weight:500}.setting-title{display:block;font-size:var(--font-size-md);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm)}.speed-options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.speed-option{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-sm);transition:all var(--transition-normal)}.speed-option:hover{background:var(--light-gray)}.speed-option input[type=radio]{width:18px;height:18px;accent-color:var(--primary-color);cursor:pointer}.speed-option input[type=radio]:disabled{opacity:.5;cursor:not-allowed}.speed-text{font-size:var(--font-size-md);font-weight:500}.setting-note{font-size:var(--font-size-sm);color:var(--warning-color);margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:#feca571a;border-radius:var(--radius-sm);border-left:3px solid var(--warning-color)}@media (max-width: 480px){.settings-toggle{width:45px;height:45px;font-size:var(--font-size-lg)}.settings-panel{right:-10px;left:10px;min-width:auto;max-width:calc(100vw - 40px)}.settings-content{padding:var(--spacing-md)}.speed-options{gap:var(--spacing-xs)}.speed-option{padding:var(--spacing-xs)}}@media (min-width: 769px){.settings-panel{min-width:320px}}.settings-toggle:focus,.close-settings:focus,.setting-label:focus-within,.speed-option:focus-within{outline:2px solid var(--accent-color);outline-offset:2px}.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0000001a;z-index:999;animation:fadeIn .3s ease-out}.game-stats{background:var(--white);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-lg);width:100%;max-width:500px;margin:0 auto;border:2px solid var(--medium-gray)}.stats-title{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color);text-align:center;margin-bottom:var(--spacing-lg);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.stat-item{background:var(--light-gray);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;text-align:center;transition:all var(--transition-normal);border:2px solid transparent}.stat-item:hover{background:var(--gradient-success);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--success-color)}.stat-item:nth-child(odd):hover{background:var(--gradient-primary);border-color:var(--primary-color)}.stat-item:nth-child(4n):hover{background:var(--gradient-secondary);border-color:var(--secondary-color)}.stat-label{font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs);opacity:.8}.stat-item:hover .stat-label{opacity:1;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.stat-value{font-size:var(--font-size-lg);font-weight:700;color:var(--primary-color)}.stat-item:hover .stat-value{color:var(--white);text-shadow:1px 1px 2px rgba(0,0,0,.3)}.recent-draws{border-top:2px solid var(--medium-gray);padding-top:var(--spacing-lg)}.recent-title{font-size:var(--font-size-lg);font-weight:700;color:var(--secondary-color);text-align:center;margin-bottom:var(--spacing-md);text-shadow:1px 1px 2px rgba(0,0,0,.1)}.recent-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.recent-item{background:var(--gradient-success);border-radius:var(--radius-md);padding:var(--spacing-md);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--spacing-md);color:var(--white);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);cursor:pointer}.recent-item:hover{transform:translate(5px);box-shadow:var(--shadow-md);animation:wiggle .5s ease-in-out}.recent-item:nth-child(2n){background:var(--gradient-primary)}.recent-item:nth-child(3n){background:var(--gradient-secondary)}.recent-letter{font-size:var(--font-size-xl);font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.3);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff3;border-radius:50%;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.recent-order{font-size:var(--font-size-sm);font-weight:700;opacity:.9;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.recent-time{font-size:var(--font-size-xs);opacity:.8;background:#fff3;padding:4px 8px;border-radius:var(--radius-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-family:monospace}.recent-item:first-child{animation:slideInLeft .5s ease-out}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 480px){.game-stats{padding:var(--spacing-md)}.stats-title{font-size:var(--font-size-lg)}.stats-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}.stat-item{padding:var(--spacing-sm)}.stat-label{font-size:var(--font-size-xs)}.stat-value,.recent-title{font-size:var(--font-size-md)}.recent-item{padding:var(--spacing-sm);gap:var(--spacing-sm)}.recent-letter{width:35px;height:35px;font-size:var(--font-size-lg)}.recent-order{font-size:var(--font-size-xs)}.recent-time{font-size:10px;padding:2px 6px}}@media (min-width: 481px) and (max-width: 768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 769px){.stats-grid{grid-template-columns:repeat(3,1fr)}}.game-stats:empty:after{content:"Inicie um jogo para ver as estatísticas! 🎮";display:block;text-align:center;color:var(--dark-gray);font-style:italic;padding:var(--spacing-xl)}.stat-item:focus,.recent-item:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (prefers-reduced-motion: reduce){.recent-item:first-child,.recent-item:hover{animation:none}}.keyboard-shortcuts{position:relative;z-index:1000}.shortcuts-toggle{background:var(--gradient-secondary);border:none;border-radius:50%;width:45px;height:45px;font-size:var(--font-size-lg);color:var(--white);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;margin-left:var(--spacing-sm)}.shortcuts-toggle:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--shadow-lg)}.shortcuts-toggle:active{transform:translateY(0) scale(1)}.shortcuts-panel{position:absolute;top:55px;right:0;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);min-width:320px;max-width:90vw;animation:slideInDown .3s ease-out;border:2px solid var(--secondary-color);overflow:hidden}.shortcuts-header{background:var(--gradient-secondary);color:var(--white);padding:var(--spacing-md);display:flex;justify-content:space-between;align-items:center}.shortcuts-header h3{font-size:var(--font-size-lg);margin:0;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.close-shortcuts{background:#fff3;border:none;border-radius:50%;width:30px;height:30px;font-size:var(--font-size-md);color:var(--white);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.close-shortcuts:hover{background:#ffffff4d;transform:scale(1.1)}.shortcuts-content{padding:var(--spacing-lg)}.shortcut-item{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm);border-radius:var(--radius-sm);transition:all var(--transition-normal)}.shortcut-item:hover{background:var(--light-gray);transform:translate(5px)}.shortcut-item:last-child{margin-bottom:0}.shortcut-key{background:var(--gradient-primary);color:var(--white);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-family:Courier New,monospace;font-size:var(--font-size-sm);font-weight:700;min-width:60px;text-align:center;box-shadow:var(--shadow-sm);text-shadow:1px 1px 2px rgba(0,0,0,.2);border:2px solid rgba(255,255,255,.2)}.shortcut-action{font-size:var(--font-size-md);color:var(--black);font-weight:500;flex:1}.shortcuts-footer{background:var(--light-gray);padding:var(--spacing-md);border-top:1px solid var(--medium-gray)}.shortcuts-note{font-size:var(--font-size-sm);color:var(--dark-gray);margin:0;text-align:center;font-style:italic}.shortcut-key{position:relative;overflow:hidden}.shortcut-key:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left var(--transition-slow)}.shortcut-item:hover .shortcut-key:before{left:100%}@media (max-width: 480px){.shortcuts-toggle{width:40px;height:40px;font-size:var(--font-size-md)}.shortcuts-panel{right:-10px;left:10px;min-width:auto;max-width:calc(100vw - 40px)}.shortcuts-content{padding:var(--spacing-md)}.shortcut-item{gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.shortcut-key{min-width:50px;padding:var(--spacing-xs);font-size:var(--font-size-xs)}.shortcut-action{font-size:var(--font-size-sm)}}.shortcuts-toggle:focus,.close-shortcuts:focus{outline:2px solid var(--accent-color);outline-offset:2px}.shortcut-item:focus-within{background:var(--light-gray);outline:2px solid var(--accent-color);outline-offset:2px}@keyframes keyPress{0%{transform:scale(1);box-shadow:var(--shadow-sm)}50%{transform:scale(.95);box-shadow:inset 0 2px 4px #0003}to{transform:scale(1);box-shadow:var(--shadow-sm)}}.shortcut-key.active{animation:keyPress .2s ease-in-out}.sort-button-container{width:100%;max-width:500px;margin:0 auto var(--spacing-lg) auto;display:flex;justify-content:center}.sort-button{background:var(--gradient-primary);border:none;border-radius:var(--radius-xl);padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-xl);font-weight:700;color:var(--white);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);text-shadow:2px 2px 4px rgba(0,0,0,.3);font-family:var(--font-family);display:flex;align-items:center;gap:var(--spacing-md);border:3px solid var(--primary-color);min-height:70px;min-width:250px;justify-content:center}.sort-button:hover:not(:disabled){transform:translateY(-3px) scale(1.05);box-shadow:var(--shadow-xl);background:linear-gradient(135deg,#667eea,#764ba2)}.sort-button:active:not(:disabled){transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-lg)}.sort-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:var(--shadow-md)}.sort-icon{font-size:var(--font-size-2xl);line-height:1}.sort-text{font-weight:700;letter-spacing:1px}@media (max-width: 480px){.sort-button{font-size:var(--font-size-lg);padding:var(--spacing-md) var(--spacing-xl);min-height:60px;min-width:200px}.sort-icon{font-size:var(--font-size-xl)}}@media (min-width: 769px){.sort-button{font-size:var(--font-size-2xl);padding:var(--spacing-xl) var(--spacing-2xl);min-height:80px;min-width:300px}.sort-icon{font-size:var(--font-size-3xl)}}.sort-button:focus{outline:3px solid var(--accent-color);outline-offset:3px}.card-generator-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease}.card-generator-modal{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.card-generator-header{background:var(--gradient-primary);color:var(--white);padding:1.25rem;border-radius:var(--radius-xl) var(--radius-xl) 0 0;display:flex;justify-content:space-between;align-items:center}.card-generator-header h2{margin:0;font-size:clamp(1rem,4vw,1.25rem);font-weight:700}.close-btn{background:#fff3;border:none;color:var(--white);font-size:1.75rem;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);line-height:1;padding:0}.close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.card-generator-content{padding:1.5rem}.description{color:var(--dark-gray);font-size:.875rem;margin:0 0 1.5rem;line-height:1.5}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:700;color:var(--black);margin-bottom:.5rem;font-size:.9rem}.card-count-select,.card-size-select{width:100%;padding:.75rem;border:2px solid var(--medium-gray);border-radius:var(--radius-md);font-size:.95rem;font-family:var(--font-family);background:var(--white);color:var(--black);cursor:pointer;transition:all var(--transition-normal)}.card-count-select:hover:not(:disabled),.card-size-select:hover:not(:disabled){border-color:var(--primary-color)}.card-count-select:focus,.card-size-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.card-count-select:disabled,.card-size-select:disabled{opacity:.5;cursor:not-allowed}.form-help{display:block;margin-top:.375rem;font-size:.75rem;color:var(--dark-gray);font-style:italic}.info-box{background:var(--light-gray);border-left:4px solid var(--accent-color);padding:1rem;border-radius:var(--radius-md);margin-bottom:1.5rem;font-size:.85rem}.info-box strong{display:block;margin-bottom:.5rem;color:var(--accent-color)}.info-box ul{margin:0;padding-left:1.25rem;color:var(--dark-gray)}.info-box li{margin-bottom:.25rem;line-height:1.4}.card-generator-actions{display:flex;gap:.75rem;flex-wrap:wrap}.generate-btn,.cancel-btn{flex:1;min-width:120px;padding:.875rem 1.25rem;border:none;border-radius:var(--radius-lg);font-size:.95rem;font-weight:700;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;gap:.5rem}.generate-btn{background:var(--gradient-success);color:var(--white);box-shadow:var(--shadow-md)}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.generate-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.cancel-btn{background:var(--medium-gray);color:var(--dark-gray)}.cancel-btn:hover:not(:disabled){background:var(--dark-gray);color:var(--white)}.spinner{display:inline-block;width:16px;height:16px;border:3px solid rgba(255,255,255,.3);border-top-color:var(--white);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 480px){.card-generator-modal{max-width:95vw;margin:.5rem}.card-generator-header,.card-generator-content{padding:1rem}.card-generator-actions{flex-direction:column}.generate-btn,.cancel-btn{width:100%}.info-box{font-size:.8rem}}.card-generator-modal::-webkit-scrollbar{width:8px}.card-generator-modal::-webkit-scrollbar-track{background:var(--light-gray)}.card-generator-modal::-webkit-scrollbar-thumb{background:var(--medium-gray);border-radius:4px}.card-generator-modal::-webkit-scrollbar-thumb:hover{background:var(--dark-gray)}.cookie-consent-overlay{position:fixed;bottom:0;left:0;right:0;z-index:10000;background:#000000b3;padding:0;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cookie-consent-banner{max-width:1200px;margin:0 auto;background:#fff;padding:20px 24px;box-shadow:0 -4px 20px #00000026;border-top-left-radius:12px;border-top-right-radius:12px;display:flex;flex-direction:column;gap:16px}.cookie-consent-content h3{margin:0 0 12px;font-size:1.1rem;color:#333;font-family:Fredoka,Comic Sans MS,cursive,sans-serif}.cookie-consent-content p{margin:0 0 8px;font-size:.9rem;color:#555;line-height:1.5}.cookie-consent-small{font-size:.8rem!important;color:#777!important}.cookie-consent-content a{color:#667eea;text-decoration:underline}.cookie-consent-content a:hover{color:#5568d3}.cookie-consent-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.cookie-consent-btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:Fredoka,Comic Sans MS,cursive,sans-serif}.cookie-consent-accept{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.cookie-consent-accept:hover{transform:scale(1.05);box-shadow:0 4px 12px #667eea66}.cookie-consent-reject{background:#f0f0f0;color:#666}.cookie-consent-reject:hover{background:#e0e0e0}@media (max-width: 768px){.cookie-consent-banner{padding:16px;border-radius:0}.cookie-consent-content h3{font-size:1rem}.cookie-consent-content p{font-size:.85rem}.cookie-consent-small{font-size:.75rem!important}.cookie-consent-actions{flex-direction:column}.cookie-consent-btn{width:100%;padding:14px}}@media (min-width: 1200px){.cookie-consent-overlay{background:transparent;bottom:20px;right:20px;left:auto;max-width:400px}.cookie-consent-banner{border-radius:12px;box-shadow:0 8px 32px #0003}}:root{--primary-color: #ff6b6b;--secondary-color: #4ecdc4;--accent-color: #45b7d1;--success-color: #96ceb4;--warning-color: #feca57;--danger-color: #ff9ff3;--white: #ffffff;--light-gray: #f8f9fa;--medium-gray: #e9ecef;--dark-gray: #6c757d;--black: #343a40;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--gradient-rainbow: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);--shadow-sm: 0 2px 4px rgba(0,0,0,.1);--shadow-md: 0 4px 12px rgba(0,0,0,.15);--shadow-lg: 0 8px 25px rgba(0,0,0,.15);--shadow-xl: 0 20px 25px rgba(0,0,0,.1);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-family: "Fredoka", "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--font-size-4xl: 2.5rem;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-family);background:var(--gradient-rainbow);min-height:100vh;color:var(--black);line-height:1.6;overflow-x:hidden}.app{min-height:100vh;padding:clamp(.375rem,1.5vw,.75rem);display:flex;align-items:center;justify-content:center}.app-container{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:clamp(.375rem,1.5vh,.75rem);align-items:center;padding:0}.app-header{width:100%;display:flex;justify-content:flex-end;position:relative;z-index:100;margin-bottom:clamp(.125rem,.5vh,.375rem)}.header-controls{display:flex;align-items:center;gap:clamp(.25rem,1vw,.5rem)}.load-game-btn,.demo-toggle-btn,.generate-cards-btn{background:var(--gradient-success);border:none;border-radius:var(--radius-lg);padding:clamp(.25rem,1vw,.5rem) clamp(.5rem,1.5vw,.75rem);font-size:clamp(.625rem,1.75vw,.75rem);font-weight:700;color:var(--white);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);font-family:var(--font-family);text-shadow:1px 1px 2px rgba(0,0,0,.2)}.load-game-btn:hover,.demo-toggle-btn:hover,.generate-cards-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.generate-cards-btn{background:var(--gradient-primary)}.demo-toggle-btn{background:var(--gradient-secondary);width:clamp(35px,8vw,40px);height:clamp(35px,8vw,40px);border-radius:50%;padding:0;font-size:clamp(.875rem,2vw,1rem)}@keyframes bounce{0%,20%,53%,80%,to{transform:translateY(0)}40%,43%{transform:translateY(-10px)}70%{transform:translateY(-5px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes wiggle{0%,7%{transform:rotate(0)}15%{transform:rotate(-15deg)}20%{transform:rotate(10deg)}25%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}40%,to{transform:rotate(0)}}@keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes confetti{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti{position:fixed;top:-10px;width:10px;height:10px;border-radius:50%;animation:confetti linear;z-index:1000;pointer-events:none}.celebration-animation{animation:bounce 1s infinite}@media (max-width: 480px){.app{padding:.25rem}.app-container{gap:.375rem}html{font-size:13px}}@media (min-width: 481px) and (max-width: 768px){html{font-size:14px}.app{padding:.5rem}}@media (min-width: 769px){html{font-size:15px}.app{padding:.75rem}}@media (min-width: 1024px){.app-container{gap:1rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme: dark){:root{--black: #f8f9fa;--white: #343a40;--light-gray: #495057;--medium-gray: #6c757d;--dark-gray: #adb5bd}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:Fredoka,Comic Sans MS,Trebuchet MS,cursive,sans-serif;background:#4ecdc4;min-height:100vh;color:#343a40;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::selection{background:#ff6b6b;color:#fff;text-shadow:none}::-moz-selection{background:#ff6b6b;color:#fff;text-shadow:none}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(45deg,#ff6b6b,#4ecdc4);border-radius:10px;border:2px solid #f1f1f1}::-webkit-scrollbar-thumb:hover{background:linear-gradient(45deg,#4ecdc4,#ff6b6b)}input,button,select,textarea{font-family:inherit}button{cursor:pointer;border:none;outline:none;background:none}button:disabled{cursor:not-allowed}a:focus,button:focus,input:focus,textarea:focus,select:focus{outline:2px solid #45b7d1;outline-offset:2px}@media (prefers-reduced-motion: no-preference){.fade-in{animation:fadeIn .5s ease-out}.slide-up{animation:slideUp .5s ease-out}.bounce-in{animation:bounceIn .8s ease-out}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}@media (hover: none) and (pointer: coarse){button,.clickable{min-height:44px;min-width:44px}}@media (prefers-color-scheme: dark){body{color:#f8f9fa}}@media print{body{background:#fff!important;color:#000!important}.no-print{display:none!important}}