.game-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:2.75rem;padding:.55rem .5rem;border-radius:.75rem;border:2px solid var(--btn-color, #2563EB);background-color:#fff;color:var(--btn-color, #2563EB);font-size:.875rem;font-weight:700;line-height:1.2;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease}.game-btn--mode{--btn-color: #2563EB}.game-btn:hover{transform:translateY(-1px);background-color:color-mix(in srgb,var(--btn-color) 8%,#fff)}.game-btn.is-active{background-color:var(--btn-color);color:var(--btn-fg, #fff);box-shadow:0 3px 10px color-mix(in srgb,var(--btn-color) 35%,transparent)}.game-btn.is-active:hover{background-color:var(--btn-color);color:var(--btn-fg, #fff)}.sound-panel{padding:.85rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-bg, #f8fafc) 70%,#fff)}.sound-row{display:grid;grid-template-columns:5.5rem 1fr;gap:.65rem .85rem;align-items:center}@media(max-width:520px){.sound-row{grid-template-columns:1fr;gap:.4rem}}.sound-row-label{margin:0;font-size:.8rem;font-weight:700;color:var(--color-text);white-space:nowrap}.sound-row-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .65rem;min-width:0}.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:4.5rem;padding:.4rem .7rem;border-radius:9999px;border:2px solid #94a3b8;background:#f1f5f9;color:#64748b;font-size:.75rem;font-weight:700;transition:background-color .15s ease,color .15s ease,border-color .15s ease}.sound-toggle.is-on{border-color:#2563eb;background:#2563eb;color:#fff}.sound-field{display:inline-flex;align-items:center;gap:.4rem;min-width:0;padding:.3rem .55rem;border:1px solid var(--color-border);border-radius:.55rem;background:#fff}.sound-field--volume{flex:1 1 12rem;min-width:10rem}.sound-field--narrow{flex:0 0 auto;width:7.5rem}.sound-field-label{flex-shrink:0;font-size:.7rem;font-weight:700;color:var(--color-text-muted);letter-spacing:.02em}.sound-range{flex:1 1 auto;width:100%;min-width:0;accent-color:var(--color-accent)}.sound-select{flex:1 1 auto;min-width:0;width:100%;border:none;background:transparent;font-size:.75rem;font-weight:600;color:var(--color-text);outline:none;cursor:pointer}.countdown-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0f172a47;backdrop-filter:blur(2px)}.countdown-overlay.hidden{display:none}.countdown-number{font-size:clamp(4rem,18vw,7rem);font-weight:800;line-height:1;color:#fff;text-shadow:0 6px 24px rgba(37,99,235,.55)}.countdown-number.countdown-pop{animation:countdownPop .55s ease-out}@keyframes countdownPop{0%{transform:scale(1.45);opacity:.2}to{transform:scale(1);opacity:1}}.preview-hint{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:flex-start;justify-content:stretch;margin:0;pointer-events:none;background:transparent}.preview-hint-badge{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;padding:.4rem 1rem;border:none;border-radius:0;border-bottom:1px solid color-mix(in srgb,#2563EB 18%,transparent);background:color-mix(in srgb,#2563EB 38%,rgba(255,255,255,.35));color:#ffffffeb;font-size:clamp(.85rem,2.4vw,1rem);font-weight:700;letter-spacing:.18em;box-shadow:none;backdrop-filter:blur(3px)}.preview-hint.hidden{display:none}.start-btn{display:inline-flex;align-items:center;gap:.35rem;border-radius:9999px;padding:.85rem 2.25rem;font-weight:700;font-size:.95rem;color:#fff;background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 6px 16px #3b82f659;transition:transform .15s ease,box-shadow .15s ease}.start-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 20px #3b82f673}.start-btn:active{transform:translateY(0) scale(.98)}.start-btn--sm{padding:.6rem 1.5rem;font-size:.875rem}.result-card{border-radius:var(--radius-lg);border:1px solid var(--color-border);background:linear-gradient(180deg,#fdf4ff,#eff6ff)}.cert-panel{margin-top:.25rem;padding:.9rem 1rem;border-radius:var(--radius-md);border:1px solid color-mix(in srgb,#2563EB 28%,var(--color-border));background:color-mix(in srgb,#EFF6FF 80%,#fff)}.cert-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem 1rem;border-radius:9999px;border:none;font-size:.875rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#2563eb,#059669);box-shadow:0 4px 12px #2563eb47;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}.cert-btn--secondary{color:#1e3a5f;background:linear-gradient(135deg,#e0f2fe,#d1fae5);box-shadow:0 2px 8px #2563eb1f;border:1px solid color-mix(in srgb,#2563EB 25%,transparent)}.cert-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #2563eb59}.cert-btn--secondary:hover:not(:disabled){box-shadow:0 4px 12px #2563eb33}.cert-btn:disabled{opacity:.65;cursor:wait}.typing-hidden-input{position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;opacity:0;color:transparent;caret-color:transparent;background:transparent;font-size:16px;line-height:1;overflow:hidden;white-space:nowrap;pointer-events:none;-webkit-user-select:text;user-select:text}.game-sky{background:linear-gradient(180deg,#eff6ff,#f5f3ff);border:2px solid var(--color-border)}.game-cloud{position:absolute;border-radius:9999px;background:radial-gradient(circle,#ffffffe6,#fff0);filter:blur(2px);pointer-events:none}.typing-fall-item{position:absolute;z-index:1;transform:translate(-50%);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;white-space:nowrap;box-shadow:0 4px 8px #0003,inset -3px -3px 6px #0003,inset 3px 4px 6px #ffffff73;animation:fallEnter .25s ease-out}.typing-fall-item.is-circle{width:3rem;height:3rem;border-radius:50%}.typing-fall-item.is-pill{min-height:2.75rem;border-radius:9999px;padding:.35rem 1.1rem}.typing-fall-item.is-stack{flex-direction:column}.typing-fall-item.is-target{animation:targetPulse 1s ease-in-out infinite}.typing-fall-item .typed-part{text-decoration:underline;text-decoration-thickness:2px;opacity:1}.typing-fall-item .rest-part{opacity:.75}@keyframes fallEnter{0%{transform:translate(-50%,-14px) scale(.4);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes targetPulse{0%,to{box-shadow:0 4px 8px #0003,inset -3px -3px 6px #0003,inset 3px 4px 6px #ffffff73,0 0 #fff9}50%{box-shadow:0 4px 8px #0003,inset -3px -3px 6px #0003,inset 3px 4px 6px #ffffff73,0 0 0 6px #fff0}}.typing-fall-cleared{transition:transform .28s ease-out,opacity .28s ease-out;transform:translate(-50%,-12px) scale(1.3) rotate(8deg);opacity:0}.typing-fall-missed{animation:typingExplodeCore .32s ease-out forwards!important;pointer-events:none}@keyframes typingExplodeCore{0%{transform:translate(-50%) scale(1);opacity:1;filter:brightness(1)}35%{transform:translate(-50%) scale(1.45);opacity:1;filter:brightness(1.8)}to{transform:translate(-50%,4px) scale(.15);opacity:0;filter:brightness(2.4)}}.typing-explode-burst{position:absolute;z-index:8;width:0;height:0;pointer-events:none;transform:translate(-50%,-50%)}.typing-explode-flash{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--burst-color, #60A5FA) 45%,transparent 70%);transform:translate(-50%,-50%);animation:typingExplodeFlash .4s ease-out forwards}.typing-explode-particle{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;box-shadow:0 0 6px #ffffff8c;transform:translate(-50%,-50%);animation:typingExplodeParticle .48s cubic-bezier(.15,.75,.35,1) forwards}@keyframes typingExplodeFlash{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(-50%,-50%) scale(6.5);opacity:0}}@keyframes typingExplodeParticle{0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2) rotate(var(--rot));opacity:0}}