:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#242424;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}a{color:#646cff;-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:#535bf2}body{place-items:center;min-width:320px;min-height:100vh;margin:0;display:flex}h1{font-size:3.2em;line-height:1.1}button{cursor:pointer;background-color:#1a1a1a;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{text-align:center;width:100%;max-width:1280px;margin:0 auto;padding:2rem;overflow-x:clip}.app{flex-direction:column;min-width:0;min-height:100vh;display:flex}.app-header{text-align:left;color:#141517;align-items:center;gap:24px;margin-bottom:24px;padding:12px 0;display:flex}.app-header h1{margin:0 0 6px;font-size:2.4rem;font-weight:700;line-height:1.1}.app-header p{color:#6c757d;margin:0;font-size:1.15rem;line-height:1.35}.app-logo{color:#2f6eea;background:#fff;border:2px solid #e5e7eb;border-radius:18px;flex:none;justify-content:center;align-items:center;width:76px;height:76px;font-size:1.9rem;font-weight:800;display:flex;box-shadow:0 2px 5px #0f172a0a}.app-title-block{flex:1;min-width:0}.status-badge{color:#2b2f36;font-variant-numeric:tabular-nums;white-space:nowrap;background:#fff;border:1px solid #dfe4ea;border-radius:8px;flex-direction:column;flex:none;align-self:flex-start;align-items:stretch;gap:5px;min-width:124px;margin-left:auto;padding:12px 16px 10px;display:flex;box-shadow:0 2px 6px #0f172a0d}.status-score{color:#198754;justify-content:center;align-items:center;gap:8px;line-height:1;display:flex}.status-score-label{color:#6c757d;font-size:1rem;font-weight:700}.status-score strong{font-size:1.65rem}.status-meta{border-top:1px solid #edf0f3;justify-content:center;align-items:center;gap:7px;padding-top:7px;font-size:.92rem;font-weight:800;line-height:1;display:flex}.status-errors{color:#dc3545}.status-divider{color:#aeb6c2;font-size:.9rem;font-weight:700;line-height:1}.app-main{flex:1;min-width:0;display:block}@media (width<=640px){#root{padding:12px}.app-header{gap:12px;margin-bottom:12px;padding:6px 0 8px}.app-header h1{margin-bottom:4px;font-size:1.45rem;line-height:1.12}.app-header p{font-size:.9rem;line-height:1.25}.app-logo{border-radius:12px;width:48px;height:48px;font-size:1.25rem}.app-main,.game-area{gap:16px}.controls-section{border-radius:8px;padding:10px}.action-buttons{flex-direction:column;gap:10px}.action-buttons button{width:100%;min-width:0;min-height:48px;padding:13px 16px;font-size:1rem}.status-badge{gap:5px;min-width:76px;padding:7px 8px 6px}.status-score-label{font-size:.74rem}.status-score strong{font-size:1.05rem}.status-meta{gap:5px;padding-top:5px;font-size:.72rem}}.game-area{flex-direction:column;gap:32px;min-width:0;display:flex}.controls-section{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 12px #0000001a}.action-buttons{flex-wrap:wrap;gap:16px;display:flex}.action-buttons button{cursor:pointer;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;min-width:160px;padding:16px 24px;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}.action-buttons button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.action-buttons button:disabled{opacity:.5;cursor:not-allowed}.check-button{color:#fff;background:linear-gradient(135deg,#198754,#20c997)}.check-button:hover:not(:disabled){background:linear-gradient(135deg,#157347,#1ba87e)}.reset-button{color:#fff;background:linear-gradient(135deg,#6c757d,#868e96)}.reset-button:hover:not(:disabled){background:linear-gradient(135deg,#5a6268,#727b84)}.sidebar{display:none}.round-result{background:#fff;border:1px solid #dfe4ea;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:min(100%,600px);min-height:300px;margin:32px auto 0;padding:40px 24px;display:flex;box-shadow:0 4px 12px #0f172a14}.round-result-label{color:#495057;font-size:1.1rem;font-weight:700}.round-result-score{color:#198754;margin-top:8px;font-size:4rem;line-height:1}.round-result-max,.round-result-errors{color:#6c757d}.round-result-errors{margin-top:16px;font-weight:700}.new-round-button{color:#fff;min-height:48px;font:inherit;cursor:pointer;background:#0d6efd;border:0;border-radius:8px;margin-top:28px;padding:12px 24px;font-weight:700}.new-round-button:hover{background:#0b5ed7}*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#212529;background:#f5f7fa;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.feedback-display{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 12px #0000001a}.feedback-display h3{color:#212529;margin:0 0 16px;font-size:1.5rem;font-weight:600}.feedback-display p{color:#495057;margin:0 0 16px;line-height:1.5}.feedback-display ul{color:#495057;margin:0;padding-left:20px}.feedback-display li{margin-bottom:8px;line-height:1.4}.feedback-display li:last-child{margin-bottom:0}.feedback-display.correct{background-color:#1987540d;border:2px solid #198754}.feedback-display.correct .feedback-icon{color:#fff;background:#198754;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 16px;font-size:24px;font-weight:700;display:flex}.feedback-display.correct h3{color:#198754;text-align:center}.feedback-display.correct p{text-align:center;color:#198754}.success-spinner{border:3px solid #1987542e;border-top-color:#198754;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;margin:12px auto 0;animation:.85s linear infinite spin;display:flex}.success-spinner span{color:#198754;min-width:1ch;font-size:.92rem;font-weight:800;line-height:1;animation:.85s linear infinite counter-spin;display:block}@keyframes spin{to{transform:rotate(360deg)}}@keyframes counter-spin{to{transform:rotate(-360deg)}}.feedback-display.incorrect{background-color:#dc35450d;border:2px solid #dc3545}.feedback-display.incorrect .feedback-icon{color:#fff;background:#dc3545;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin:0 auto 5px;font-size:13px;font-weight:700;display:flex}.feedback-display.incorrect h3{color:#dc3545;text-align:center;margin-bottom:4px;font-size:1rem}.feedback-display.incorrect p{text-align:center;color:#dc3545;margin-bottom:7px;font-size:.82rem}.comparison{grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;display:grid}@media (width<=768px){.comparison{grid-template-columns:1fr}}.comparison-section h4{color:#495057;margin:0 0 12px;font-size:1.1rem;font-weight:600}.morphemes-list{flex-wrap:wrap;gap:8px;display:flex}.correct-answer-list{justify-content:center;gap:5px}.morpheme-badge{border-radius:5px;flex-direction:column;align-items:center;min-width:46px;padding:4px 6px;font-size:.78rem;display:inline-flex}.morpheme-badge.correct{border:2px solid #198754}.morpheme-badge.incorrect{opacity:.7;border:2px solid #dc3545}.morpheme-badge.root{background-color:#1987541a;border:1px solid #198754}.morpheme-badge.prefix{background-color:#0d6efd1a;border:1px solid #0d6efd}.morpheme-badge.suffix{background-color:#6f42c11a;border:1px solid #6f42c1}.morpheme-badge.ending{background-color:#fd7e141a;border:1px solid #fd7e14}.morpheme-text{margin-bottom:1px;font-weight:700}.morpheme-type{color:#6c757d;font-size:.66rem}@media (width<=640px){.feedback-display{border-radius:8px;padding:14px}.feedback-display h3{margin-bottom:10px;font-size:1.15rem}.feedback-display p{margin-bottom:10px;font-size:.95rem}.comparison{gap:16px;margin-top:14px}.morphemes-list{gap:8px}.morpheme-badge{min-width:42px;padding:4px 5px}}.word-display{background:#f8f9fa;border-radius:12px;flex-direction:column;align-items:center;gap:20px;width:100%;min-width:0;padding:20px;display:flex;box-shadow:0 4px 12px #0000001a}.word-container{background:#fff;border:2px solid #e9ecef;border-radius:8px;justify-content:center;align-self:center;align-items:center;width:100%;min-width:0;max-width:800px;min-height:120px;padding:20px;display:flex;position:relative}.morpheme-symbols-container{pointer-events:none;z-index:1;position:absolute;inset:0}.morpheme-symbol-container{pointer-events:none}.morpheme-symbol-container.ending-frame{padding:0}.ending-frame-box{box-sizing:border-box;border:1.5px solid #fd7e14;border-radius:6px;width:100%;height:100%}.button-symbol{justify-content:center;align-items:center;margin-right:8px;display:inline-flex}.button-symbol svg{display:block}.morpheme-word-text{z-index:1;color:#212529;-webkit-user-select:none;user-select:none;touch-action:none;cursor:default;gap:4px;font-family:Georgia,serif;font-size:2.5rem;font-weight:700;line-height:1.2;display:flex;position:relative}.morpheme-word-text::selection{color:inherit;background:0 0}.morpheme-word-text ::selection{color:inherit;background:0 0}.letter-container{flex-direction:column;align-items:center;min-width:40px;height:60px;display:inline-flex;position:relative}.letter-touch-marker{display:none}.symbol-overlay{justify-content:flex-start;align-items:center;width:100%;height:30px;display:flex;position:absolute;top:-35px;overflow:visible}.symbol-line{justify-content:flex-start;align-items:center;height:3px;display:flex;position:absolute;top:0}.symbol-line.start{justify-content:flex-start;width:50%;left:50%}.symbol-line.middle{justify-content:center;width:100%;left:0}.symbol-line.end{justify-content:flex-start;width:50%;left:0}.symbol-char{font-size:1.8rem;font-weight:700;line-height:1;display:inline-block;position:relative;top:-2px}.symbol-line.root{border-top:3px solid #198754}.symbol-line.root .symbol-char{color:#198754;margin-left:-.5rem}.symbol-line.prefix{border-top:3px solid #0d6efd}.symbol-line.prefix .symbol-char{color:#0d6efd;margin-left:-.5rem}.symbol-line.suffix{border-top:3px solid #6f42c1}.symbol-line.suffix .symbol-char{color:#6f42c1;margin-left:-.5rem}.symbol-line.ending{border-top:3px solid #fd7e14}.symbol-line.ending .symbol-char{color:#fd7e14;margin-left:-.5rem}.letter{text-align:center;border-bottom:3px solid #0000;border-radius:6px;min-width:36px;padding:8px 4px;transition:all .2s;display:inline-block}.letter.available{cursor:crosshair}.letter.available:hover{background-color:#eef4ff;border-bottom-color:#7aa2ff;transform:translateY(-1px);box-shadow:0 6px 14px #0d6efd1f}.letter.assigned{cursor:default}.letter.selected{background-color:#e7f5ff;border-bottom:3px solid #339af0}.letter.root{background-color:#1987541a;border-bottom:3px solid #198754}.letter.prefix{background-color:#0d6efd1a;border-bottom:3px solid #0d6efd}.letter.suffix{background-color:#6f42c11a;border-bottom:3px solid #6f42c1}.letter.ending{background-color:#fd7e141f;border-bottom:3px solid #fd7e14}.type-selector{background:#fff;border:2px solid #dee2e6;border-radius:8px;width:100%;max-width:600px;height:210px;padding:20px;box-shadow:0 2px 8px #0000001a}.type-selector.result-panel{padding:0;overflow:hidden}.type-selector.result-panel .feedback-display{height:100%;box-shadow:none;border:0;border-radius:0;overflow-y:auto}.type-selector.result-panel .feedback-display.correct{padding:14px 18px;overflow:hidden}.type-selector.result-panel .feedback-display.correct .feedback-icon{width:36px;height:36px;margin-bottom:8px;font-size:18px}.type-selector.result-panel .feedback-display.correct h3{margin-bottom:6px;font-size:1.2rem}.type-selector.result-panel .feedback-display.correct p{margin-bottom:0;line-height:1.35}.type-selector.result-panel .feedback-display.incorrect{padding:10px 12px;overflow:hidden}.type-selector h3{color:#212529;text-align:center;margin:0 0 16px;font-size:1.1rem}.type-selector.inactive h3{color:#6c757d}.type-buttons{grid-template-columns:repeat(2,1fr);align-content:center;gap:12px;height:calc(100% - 42px);display:grid}.type-button{cursor:pointer;background:#fff;border:2px solid #dee2e6;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:1rem;font-weight:500;transition:all .2s;display:flex}.type-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.type-button:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.35)}.type-button:disabled:hover{box-shadow:none;transform:none}.type-button.selected{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.type-button.root{color:#198754;border-color:#198754}.type-button.root:hover,.type-button.root.selected{background-color:#1987541a}.type-button.prefix{color:#0d6efd;border-color:#0d6efd}.type-button.prefix:hover,.type-button.prefix.selected{background-color:#0d6efd1a}.type-button.suffix{color:#6f42c1;border-color:#6f42c1}.type-button.suffix:hover,.type-button.suffix.selected{background-color:#6f42c11a}.type-button.ending{color:#fd7e14;border-color:#fd7e14}.type-button.ending:hover,.type-button.ending.selected{background-color:#fd7e141a}.controls{gap:12px;display:flex}.reset-button{color:#fff;cursor:pointer;background:#6c757d;border:none;border-radius:6px;padding:12px 24px;font-size:1rem;font-weight:500;transition:all .2s}.reset-button:hover:not(:disabled){background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.reset-button:disabled{opacity:.5;cursor:not-allowed}@keyframes highlight{0%{background-color:#339af01a}50%{background-color:#339af04d}to{background-color:#339af01a}}.letter.selected{animation:1s ease-in-out infinite highlight}@media (width<=640px){.word-display{border-radius:8px;gap:14px;padding:8px}.word-container{align-items:flex-start;max-width:100%;min-height:176px;padding:46px 6px 20px;overflow:visible}.morpheme-word-text{width:100%;min-width:100%;font-size:var(--mobile-letter-font-size);justify-content:center;gap:1px;line-height:1}.morpheme-symbol-container:not(.ending-frame){transform:translateY(12px)}.letter-container{flex:0 1 var(--mobile-letter-size);min-width:0;width:var(--mobile-letter-size);height:96px}.letter{width:var(--mobile-letter-size);min-width:0;min-height:var(--mobile-letter-size);touch-action:none;border-radius:8px;justify-content:center;align-items:center;padding:4px 1px;display:inline-flex}.letter-touch-marker{left:50%;top:calc(var(--mobile-letter-size) + 20px);width:max(28px, var(--mobile-letter-size));touch-action:none;cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;height:30px;padding:0;display:inline-flex;position:absolute;transform:translate(-50%)}.letter-touch-marker:before{content:"";border-left:1.5px dashed #49505773;width:0;height:10px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.letter-container:nth-child(2n) .letter-touch-marker{top:calc(var(--mobile-letter-size) + 52px)}.letter-container:nth-child(2n) .letter-touch-marker:before{height:42px}.letter-marker-dot{background:#adb5bd;border-radius:999px;width:10px;height:10px;box-shadow:0 0 0 7px #adb5bd26}.letter-touch-marker.selected .letter-marker-dot,.letter-touch-marker.pending .letter-marker-dot{background:#0d6efd;box-shadow:0 0 0 8px #0d6efd2e}.letter-touch-marker.selected:before,.letter-touch-marker.pending:before{border-left-color:#0d6efdb3}.letter.available:hover{box-shadow:none;transform:none}.type-selector{z-index:5;border-radius:8px;max-width:none;height:196px;padding:12px;position:sticky;bottom:10px}.type-selector h3{margin-bottom:10px;font-size:.98rem;line-height:1.25}.type-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;height:calc(100% - 34px)}.type-button{border-radius:8px;gap:6px;min-height:52px;padding:10px 8px;font-size:.95rem}.button-symbol{margin-right:0}.controls{width:100%}.controls .reset-button{width:100%;min-height:48px}}@media (width<=380px){.morpheme-word-text{font-size:var(--mobile-letter-font-size)}.letter-container{width:var(--mobile-letter-size)}.letter{width:var(--mobile-letter-size);min-height:var(--mobile-letter-size)}}
