.control-panel[data-v-b36b2320]{width:100%;margin:.5rem 0;padding:.5rem 1rem;background:#f8f9fa;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:1rem}.stats-row[data-v-b36b2320]{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.stat-item[data-v-b36b2320]{display:flex;align-items:center;gap:.375rem;background:transparent;border:none;padding:0;position:relative}.stat-item[data-v-b36b2320]:not(:last-child):after{content:"";position:absolute;right:-.75rem;top:50%;transform:translateY(-50%);width:1px;height:20px;background:#e5e7eb}.clear-button[data-v-b36b2320]{flex-shrink:0}.clear-btn[data-v-b36b2320]{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:#e5e7eb;border:none;border-radius:6px;font-size:.75rem;font-weight:500;color:#4b5563;transition:all .2s ease}.clear-btn[data-v-b36b2320]:hover:not(:disabled){background:#d1d5db}.clear-btn[data-v-b36b2320]:disabled{opacity:.4;cursor:not-allowed}.stat-content[data-v-b36b2320]{display:flex;align-items:center;gap:.5rem}.stat-header[data-v-b36b2320]{display:flex;align-items:center;gap:.375rem}.stat-icon[data-v-b36b2320]{font-size:1rem}.stat-label[data-v-b36b2320]{font-size:.75rem;font-weight:500;color:#6b7280;white-space:nowrap}.stat-value[data-v-b36b2320]{font-family:IBM Plex Mono,monospace;font-size:1.25rem;font-weight:600;color:#111827}.stat-value.highlight[data-v-b36b2320]{color:#94b54f}.stat-item.clear-button button[data-v-b36b2320]{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:#e5e7eb;border:none;border-radius:6px;font-size:.75rem;font-weight:500;color:#4b5563;transition:all .2s ease}.stat-item.clear-button button[data-v-b36b2320]:hover:not(:disabled){background:#d1d5db}.stat-item.clear-button button[data-v-b36b2320]:disabled{opacity:.4;cursor:not-allowed}.button-icon[data-v-b36b2320]{font-size:.875rem}@media (max-width: 768px){.stats-row[data-v-b36b2320]{flex-direction:column;align-items:stretch;gap:.75rem}.stat-item[data-v-b36b2320]{min-width:100%}.stat-item.clear-button button[data-v-b36b2320]{width:100%;justify-content:center}}@media (max-width: 480px){.control-panel[data-v-b36b2320]{padding:1rem}.stat-item[data-v-b36b2320]{padding:.75rem}.stat-icon[data-v-b36b2320]{width:28px;height:28px;font-size:1rem}.stat-label[data-v-b36b2320]{font-size:.7rem}.stat-value[data-v-b36b2320]{font-size:1.25rem}.stat-item.clear-button button[data-v-b36b2320]{padding:.625rem 1rem;font-size:.8125rem}}.keys-display-container[data-v-b36b2320]{margin:1rem 0}.keys-display-bg[data-v-b36b2320]{position:relative;min-height:100px;border:1px solid #959292;border-radius:6px;box-shadow:6px 6px 13px #52576333,-3px -3px 6px #f8f6f2bf,inset 1px 1px #f8f6f26b;background:linear-gradient(180deg,#fbef8d,#ee130d);padding:0}.level-display-bg[data-v-b36b2320]{position:relative;min-height:280px;border:1px solid #959292;border-radius:6px;box-shadow:6px 6px 13px #52576333,-3px -3px 6px #f8f6f2bf,inset 1px 1px #f8f6f26b;background:radial-gradient(circle at 22% 28%,#bed276eb,#7bb542e6 28%,#375e2eeb 64%,#262626f5),linear-gradient(145deg,#a8c45d,#708d3d);padding:0}.level-display-bg[data-v-b36b2320]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;background:repeating-linear-gradient(0deg,rgba(38,38,38,.12) 0,rgba(38,38,38,.12) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,rgba(55,94,46,.14) 0,rgba(55,94,46,.14) 1px,transparent 1px,transparent 4px);background-size:4px 4px;pointer-events:none}.keys-display-bg[data-v-b36b2320]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;background:repeating-linear-gradient(0deg,rgba(38,38,38,.12) 0,rgba(38,38,38,.12) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,rgba(55,94,46,.14) 0,rgba(55,94,46,.14) 1px,transparent 1px,transparent 4px);background-size:4px 4px;pointer-events:none}.keys-display[data-v-b36b2320]{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;min-height:80px;padding:0}.key-item[data-v-b36b2320]{background:none;border:none;border-radius:0;box-shadow:none;min-width:40px;text-align:center;padding:4px 6px;font-size:24px;font-weight:600;color:#333;text-transform:uppercase;flex-shrink:0;line-height:1}.key-item.pressed[data-v-b36b2320]{background:none;border:none;border-radius:0;box-shadow:none;animation:pulse-b36b2320 .5s ease-in-out;font-size:120px;font-weight:900;position:relative;z-index:1;padding:0;line-height:.8}.key-item.pressed[data-v-b36b2320]:before{content:attr(data-key);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:120px;font-weight:900;color:#000c;transform:translate(4px,4px);z-index:-1;animation:pulse-shadow-b36b2320 .5s ease-in-out}.key-item.pressed[data-v-b36b2320]:after{content:attr(data-key);color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5);display:block;animation:pulse-b36b2320 .5s ease-in-out}@keyframes pulse-b36b2320{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes pulse-shadow-b36b2320{0%{transform:translate(4px,4px) scale(1)}50%{transform:translate(4.5px,4.5px) scale(1.1)}to{transform:translate(4px,4px) scale(1)}}.level-display[data-v-b36b2320]{position:relative;z-index:1;display:flex;flex-direction:row;gap:8px;justify-content:space-between;align-items:stretch;flex-wrap:nowrap;padding:.5rem;background:none;border-radius:0;border:none;width:100%;max-width:100%;height:auto}.level-item[data-v-b36b2320]{transition:all .3s ease;cursor:pointer;position:relative;background:#0003;border-radius:8px;border:1px solid rgba(255,255,255,.1);flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.level-item[data-v-b36b2320]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #94b54f4d}.level-img-wrapper[data-v-b36b2320]{position:relative;width:100%;display:flex;justify-content:center;align-items:center}.level-item img[data-v-b36b2320]{border-radius:6px;transition:all .5s ease;display:block;width:100%;height:auto;max-height:200px;-o-object-fit:contain;object-fit:contain;filter:brightness(.1) contrast(.5) grayscale(.8)}.level-item.active img[data-v-b36b2320]{filter:brightness(1) saturate(1) grayscale(0);transform:scale(1)}.question-mark[data-v-b36b2320]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9rem;font-weight:700;color:#fff9;text-shadow:0 2px 4px rgba(0,0,0,.5);transition:all .5s ease;z-index:10}.level-item.active .question-mark[data-v-b36b2320]{opacity:0;transform:translate(-50%,-50%) scale(.33)}.level-name[data-v-b36b2320]{width:100%;text-align:center;font-size:1.125rem;font-weight:900;color:#fef08a;text-shadow:0 2px 4px rgba(0,0,0,1),0 0 10px rgba(251,191,36,.8);white-space:nowrap;z-index:20;background:linear-gradient(180deg,#000000e6,#000000b3);padding:6px 14px;border-radius:0 0 8px 8px;border-top:2px solid #fbbf24;box-shadow:0 4px 12px #0009,inset 0 1px #fff3;margin-top:auto}.level-item.active .level-name[data-v-b36b2320]{color:#6ee7b7;border-color:#34d399;text-shadow:0 2px 4px rgba(0,0,0,1),0 0 15px rgba(52,211,153,.9);box-shadow:0 4px 12px #0009,0 0 20px #34d39966,inset 0 1px #fff3}.keyboard-wrapper[data-v-b36b2320]{width:100%;overflow-x:auto;overflow-y:hidden;display:flex;justify-content:center;padding:10px 0;margin:2rem 0;flex:0 0 auto}[data-v-b36b2320] .keyboard-canvas{margin:0 auto;box-sizing:border-box;flex:0 0 auto;display:block;width:auto;height:auto}@media (max-width: 1200px){.level-display[data-v-b36b2320]{flex-wrap:wrap;justify-content:flex-start}.level-item img[data-v-b36b2320]{width:150px;height:auto}}@media (max-width: 768px){.level-display[data-v-b36b2320]{gap:6px;padding:.5rem}.level-item img[data-v-b36b2320]{width:120px;height:auto}.stats-card[data-v-b36b2320]{flex-wrap:wrap;justify-content:center;gap:1rem}.keyboard-selector[data-v-b36b2320]{width:100%}.selector-buttons[data-v-b36b2320]{width:100%;justify-content:center}}@media (max-width: 640px){.level-item img[data-v-b36b2320]{width:90px;height:auto}}@media (max-width: 480px){.level-display[data-v-b36b2320]{gap:4px;padding:.25rem}.level-item img[data-v-b36b2320]{width:70px;height:auto}}.keyboard-loading[data-v-b36b2320]{width:100%;min-height:300px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#e6e3de,#d8d5cf);border:2px solid #959292;border-radius:12px;font-family:Rajdhani,sans-serif;font-size:16px;color:#708d3d;animation:pulse-b36b2320 1.5s ease-in-out infinite}@keyframes pulse-b36b2320{0%,to{opacity:.6}50%{opacity:1}}
