:root{--bg:#323437;--surface:#2b2d30;--surface-alt:#232527;--surface-hover:#383b3f;--text:#d1d0c5;--text-muted:#8e9297;--highlight:#e2b714;--highlight-glow:#e2b71473;--highlight-glow-strong:#e2b714d9;--wrong:#ca4754;--wrong-glow:#ca475466;--success:#67a339;--opponent:#38bdf8;--dim-item:#18191b;--tap:44px;--duel:var(--wrong);--chat:var(--highlight);--practice:#fff;--learn:#38bdf8;--settings:var(--text-muted);--accent:var(--highlight);--accent-ink:#1a1a1a;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.mode-duel{--accent:var(--duel);--accent-ink:#fff}.mode-chat{--accent:var(--chat)}.mode-practice{--accent:var(--practice)}.mode-learn{--accent:var(--learn)}.mode-settings{--accent:var(--settings)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background-color:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;margin:0;font-family:inherit;overflow-x:hidden}.app{min-height:100dvh;padding:calc(.75rem + env(safe-area-inset-top)) calc(.75rem + env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) calc(.75rem + env(safe-area-inset-left));flex-direction:column;justify-content:space-between;align-items:center;gap:.75rem;max-width:440px;margin:0 auto;display:flex}.cursor{background-color:var(--accent);border-radius:2px;width:3px;height:1.1em;animation:1s infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.top-bar{justify-content:space-between;align-items:center;width:100%;padding:.25rem .5rem;display:flex}.brand-title{letter-spacing:.16em;color:var(--text);margin:0;font-size:1.35rem;font-weight:800}.brand-mode{color:var(--accent);text-shadow:0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);transition:color .2s,text-shadow .2s}.room-code-line{letter-spacing:.18em;color:var(--text-muted);justify-content:center;align-items:baseline;gap:.6rem;margin:0;font-size:.9rem;font-weight:800;display:flex}.room-code{letter-spacing:.16em;color:var(--accent);text-shadow:0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);font-size:1.6rem;font-weight:900}.muted-badge{letter-spacing:.14em;color:var(--wrong);font-size:.7rem;font-weight:700}.flashlight-container{flex-direction:column;align-items:center;gap:.5rem;width:100%;margin:.25rem 0;display:flex}.flashlight{background:radial-gradient(circle,#484b50 0%,#2f3135 65%,#232528 100%);border-radius:50%;width:130px;height:130px;transition:background 80ms,box-shadow 80ms;position:relative;box-shadow:inset 0 0 20px #000000e6,0 4px 12px #0006}.flashlight:after{content:"";pointer-events:none;background:#ffffff14;border-radius:50%;width:25%;height:15%;position:absolute;top:15%;left:20%}.flashlight.active{box-shadow:inset 0 0 12px #fff, 0 0 25px var(--highlight-glow-strong), 0 0 60px var(--highlight-glow);background:radial-gradient(circle,#fff9d6 0%,#e2b714 55%,#a67c00 100%)}.center-panel{flex-direction:column;flex:1;justify-content:center;gap:.75rem;width:100%;min-height:160px;display:flex}.panel-title{letter-spacing:.18em;color:var(--text-muted);margin:0;padding-left:1.25rem;font-size:.75rem;font-weight:700}.menu-list{flex-direction:column;align-items:flex-start;gap:.7rem;width:100%;padding:.5rem .5rem .5rem 1.25rem;display:flex}.menu-group{flex-direction:column;gap:.6rem;display:flex}.menu-item{letter-spacing:.12em;cursor:pointer;color:var(--dim-item);align-items:center;gap:.6rem;padding:.15rem 0;font-size:1.25rem;font-weight:800;transition:color .15s,text-shadow .15s;display:flex}.menu-item .arrow{color:var(--accent);visibility:hidden;width:1ch;font-weight:900}.menu-item.selected,.menu-item:hover{color:var(--accent);text-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent)}.menu-item.selected .arrow,.menu-item:hover .arrow{visibility:visible}.menu-item.open{color:color-mix(in srgb, var(--accent) 70%, var(--bg))}.submenu{flex-direction:column;gap:.5rem;padding-left:2.2rem;display:flex}.submenu .menu-item{font-size:1.1rem}.menu-item.join-inline{gap:.6rem}.join-code-chars{letter-spacing:.2em;color:#fff;align-items:center;gap:.15rem;font-size:1.35rem;font-weight:900;display:inline-flex}.join-inline.invalid .join-code-chars{color:var(--wrong);text-shadow:0 0 12px var(--wrong-glow);animation:.3s ease-in-out 2 shake}.setting-value{letter-spacing:.14em;margin-left:.75rem;font-size:.85rem}.setting-value.on{color:var(--success)}.setting-value.off{color:var(--wrong)}.controls-list{background:var(--surface-alt);letter-spacing:.06em;border-radius:10px;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:.5rem 0 0;padding:.85rem 1.25rem;font-size:.8rem;display:grid}.controls-list dt{color:var(--highlight);font-weight:800}.controls-list dd{color:var(--text-muted);margin:0}.reference-grid{grid-template-columns:repeat(6,1fr);gap:.35rem;max-height:46vh;display:grid;overflow-y:auto}.ref-item{background:var(--surface-alt);text-align:center;border-radius:8px;flex-direction:column;gap:.1rem;padding:.4rem .2rem;display:flex}.ref-char{color:var(--text);font-size:1rem;font-weight:800}.ref-morse{color:var(--highlight);letter-spacing:.06em;font-size:.85rem;font-weight:800}button{min-height:var(--tap);background:var(--surface);color:inherit;letter-spacing:.08em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:.65rem 1rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:background .12s,transform 50ms,opacity .12s;display:inline-flex}button:hover:not(:disabled){background:var(--surface-hover)}button:active:not(:disabled){transform:scale(.97)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 12px color-mix(in srgb, var(--accent) 35%, transparent);font-weight:800}button.primary:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 85%, #fff)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}.error-banner{color:#ff9da8;letter-spacing:.12em;text-align:center;background:#ca475429;border-radius:10px;margin:0;padding:.5rem .75rem;font-size:.8rem;font-weight:700;animation:.3s ease-in-out shake}.hint{text-align:center;color:var(--text-muted);margin:0;font-size:.8rem}.room{flex-direction:column;flex:1;gap:1rem;width:100%;display:flex}.lobby-panel{flex-direction:column;gap:.75rem;display:flex}.players-grid{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.player-card{background:var(--surface);border-radius:12px;flex-direction:column;gap:.4rem;padding:.75rem;display:flex}.player-card.is-you{background:color-mix(in srgb, var(--accent) 10%, var(--surface))}.player-card-header{justify-content:space-between;align-items:center;display:flex}.player-name{letter-spacing:.1em;font-size:.85rem;font-weight:800}.player-status{letter-spacing:.1em;color:var(--text-muted);font-size:.75rem;font-weight:700}.player-status.ready{color:var(--success)}.player-status.left{color:var(--wrong)}.player-card.is-away .player-name{color:var(--text-muted)}.badge{letter-spacing:.12em;border-radius:6px;padding:.15rem .4rem;font-size:.6rem;font-weight:800}.badge.host{color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, transparent)}.room-notice{text-align:center;letter-spacing:.16em;color:var(--wrong);margin:0;font-size:.8rem;font-weight:800}.lanes.opponent-left .lane-opponent{opacity:.35}.popup-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;padding:1rem;animation:.18s ease-out popup-fade;display:flex;position:fixed;inset:0}.popup{background:var(--surface);border:1px solid color-mix(in srgb, var(--wrong) 45%, transparent);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:.6rem;width:100%;max-width:360px;padding:1.5rem 1.25rem;display:flex;box-shadow:0 12px 40px #00000080}.popup-title{letter-spacing:.16em;color:var(--wrong);margin:0;font-size:1.3rem;font-weight:900}.popup-detail{color:var(--text);margin:0;font-size:.9rem}.popup-hint{letter-spacing:.16em;color:var(--text-muted);margin:.4rem 0 0;font-size:.7rem;font-weight:800}@keyframes popup-fade{0%{opacity:0}to{opacity:1}}.room-finished{text-align:center;letter-spacing:.16em;color:var(--accent);margin:1rem 0;font-size:1.1rem;font-weight:800}.lanes{flex-direction:column;gap:1.25rem;display:flex}.lane{flex-direction:column;gap:.2rem;display:flex}.lane-you{--tone:var(--highlight)}.lane-opponent{--tone:var(--opponent)}.lane-label{letter-spacing:.18em;color:color-mix(in srgb, var(--tone) 60%, var(--text-muted));padding:0 .5rem;font-size:.65rem;font-weight:800}.lane-opponent .lane-label{text-align:right}.lane-window{height:4.2rem;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--fade-to));-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--fade-to));mask-image:linear-gradient(to right, transparent 0%, #000 var(--fade-to));position:relative;overflow:hidden}.lane-right .lane-window{--fade-to:72%}.lane-center .lane-window{--fade-to:46%}.lane-track{white-space:nowrap;align-items:flex-end;gap:.3rem;display:flex;position:absolute;bottom:.2rem}.lane-right .lane-track{right:.5rem}.lane-center .lane-track{right:50%}.lane-letter{flex-direction:column;align-items:center;min-width:0;animation:.22s ease-out lane-in;display:inline-flex;overflow:hidden}@keyframes lane-in{0%{opacity:0;max-width:0}to{opacity:1;max-width:6rem}}.lane-letter.space{width:1rem}.lane-char{text-transform:uppercase;color:var(--text);font-size:1.9rem;font-weight:800;line-height:1.1}.lane-morse{letter-spacing:.06em;color:var(--tone);font-size:.85rem;font-weight:800}.lane-letter.space .lane-morse{opacity:.35}.lane-letter.pending .lane-char{color:var(--tone);text-shadow:0 0 12px color-mix(in srgb, var(--tone) 55%, transparent)}.lane-caret{background:color-mix(in srgb, var(--text-muted) 35%, transparent);border-radius:2px;align-self:stretch;width:4px;margin-left:.15rem;transition:none}.lane-caret.on{background:var(--tone);box-shadow:0 0 14px var(--tone), 0 0 4px var(--tone)}.duel-progress{grid-template-columns:5.5rem 1fr 3.5rem;align-items:center;gap:.5rem;display:grid}.duel-progress .lane-label{text-align:left}.duel-progress-bar{appearance:none;background:var(--surface);border:none;border-radius:3px;width:100%;height:6px;overflow:hidden}.duel-progress-bar::-webkit-progress-bar{background:var(--surface)}.duel-progress-bar::-webkit-progress-value{background:var(--tone)}.duel-progress-bar::-moz-progress-bar{background:var(--tone)}.duel-progress-count{letter-spacing:.06em;text-align:right;color:var(--text-muted);font-size:.75rem;font-weight:800}.target{background:var(--surface);border-radius:12px;flex-wrap:wrap;justify-content:center;gap:.6rem 0;padding:.75rem .5rem;display:flex}.target-word{display:inline-flex}.target-letter{border-radius:6px;flex-direction:column;align-items:center;min-width:1.4rem;padding:0 .1rem;display:inline-flex}.target-letter.space{min-width:1rem}.target-char{text-transform:uppercase;color:var(--text-muted);font-size:1.3rem;font-weight:800;line-height:1.1}.target-morse{letter-spacing:.04em;color:color-mix(in srgb, var(--text-muted) 60%, transparent);font-size:.7rem;font-weight:800}.target-letter.done .target-char,.target-letter.done .target-morse{color:var(--success)}.target-letter.wrong .target-char,.target-letter.wrong .target-morse{color:var(--wrong)}.target-letter.next{background:color-mix(in srgb, var(--accent) 16%, transparent)}.target-letter.next .target-char{color:var(--text)}.target-letter.next .target-morse{color:var(--accent)}.control-hints{letter-spacing:.12em;width:100%;min-height:2.2rem;color:var(--text-muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.3rem;font-size:.9rem;font-weight:700;display:flex}.hint-keys{color:var(--highlight);font-weight:900}.hold-meter{background:var(--surface-alt);border-radius:8px;place-items:center;width:100%;height:2.2rem;display:grid;position:relative;overflow:hidden}.hold-fill{background:color-mix(in srgb, var(--wrong) 55%, transparent);width:0;animation:hold-fill var(--hold-ms) linear forwards;position:absolute;inset:0 auto 0 0}@keyframes hold-fill{to{width:100%}}.hold-label{color:var(--text);position:relative}.input-pads{grid-template-columns:1fr 1fr;gap:.85rem;width:100%;height:180px;display:grid}.pad-btn{background:var(--surface);border-radius:18px;flex-direction:column;gap:.75rem;height:100%;transition:transform 50ms,background .12s,box-shadow .12s}.pad-btn.pressed,.pad-btn:active:not(:disabled){background:color-mix(in srgb, var(--highlight) 14%, var(--surface));box-shadow:0 0 18px var(--highlight-glow);transform:scale(.96)}@media (hover:hover){.pad-btn:hover:not(:disabled){background:var(--surface-hover)}}.pad-btn .dot-icon{background-color:var(--highlight);width:20px;height:20px;box-shadow:0 0 12px var(--highlight-glow-strong);border-radius:50%}.pad-btn .dash-icon{background-color:var(--highlight);width:44px;height:14px;box-shadow:0 0 12px var(--highlight-glow-strong);border-radius:7px}.pad-hint{letter-spacing:.12em;min-height:1.5rem;color:var(--text-muted);align-items:center;gap:.45rem;font-size:.9rem;font-weight:700;display:inline-flex}.pad-key{background:var(--surface-alt);color:var(--text);border-radius:5px;padding:.1rem .4rem;font-size:.8rem}@media (height<=700px){.flashlight{width:105px;height:105px}.input-pads{height:140px}}