.romaji-shell{max-width:980px}.romaji-select-card{padding:22px}.romaji-top-nav{margin-bottom:14px}.romaji-select-card h1{margin:0;font-size:28px}.romaji-lead{margin:6px 0 20px;color:#667085}.romaji-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.romaji-mode-grid button,.romaji-choice button{border:1px solid #dce3eb;background:#fff;border-radius:14px;padding:14px;text-align:left;color:#27364a}.romaji-mode-grid button strong{display:block;font-size:17px}.romaji-mode-grid button span{display:block;margin-top:4px;color:#778397;font-size:12px}.romaji-mode-grid button.is-selected,.romaji-choice button.is-selected{border-color:#2563eb;background:#eef5ff;box-shadow:0 0 0 2px #2563eb18}.romaji-typing-settings{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid #e8edf4}.romaji-typing-settings h2{font-size:14px;margin:0 0 8px}.romaji-choice{display:flex;gap:7px}.romaji-choice button{flex:1;padding:10px;text-align:center;font-weight:900}.romaji-start{display:block;width:min(360px,100%);margin:24px auto 0;border:0;border-radius:13px;background:#2563eb;color:#fff;padding:14px;font-size:17px;font-weight:950}.romaji-medal-panel{margin:0 0 10px;padding:11px 14px;border:1px solid #dce3eb;border-radius:14px;background:#fff}.romaji-medal-head{display:flex;justify-content:space-between;gap:10px;font-size:13px}.romaji-gauge-track{height:10px;margin-top:8px;border-radius:999px;background:#edf1f5;overflow:hidden}.romaji-gauge-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#5a91ee,#285ec7);transition:width .25s}.romaji-practice{max-width:760px;margin:auto}.romaji-question{text-align:center;padding:28px 14px}.romaji-question .prompt{font-size:clamp(25px,5vw,42px);font-weight:950}.romaji-question input{display:block;width:min(420px,92%);margin:18px auto 8px;border:2px solid #d8e0ea;border-radius:13px;padding:13px;text-align:center;font-size:24px}.romaji-answer-buttons{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}.romaji-answer-buttons button{min-width:120px;border:1px solid #ccd6e3;border-radius:12px;background:#fff;padding:12px;font-weight:900}.romaji-message{min-height:28px;margin-top:10px;font-weight:900}.romaji-message.ok{color:#16803b}.romaji-message.ng{color:#c43b3b}.romaji-next{border:0!important;background:#2563eb!important;color:#fff}.gauge-guest-note{margin-top:5px;color:#8a94a3;font-size:11px}@media(max-width:640px){.romaji-mode-grid,.romaji-typing-settings{grid-template-columns:1fr}.romaji-select-card{padding:16px}}
.romaji-practice .typed{font-size:24px;font-weight:900;min-height:38px;margin:12px auto;color:#2563eb}
/* ローマ字入力のソフトキーボードはタイピングLABO v10と同じ配列。11列を共通基準にし、Pと「ー」を必ず同一列に置く。 */
.romaji-practice .keyboard{--kg:6px;width:100%;max-width:none;margin:12px 0 0;padding:8px 4px;border:1px solid #dce3eb;border-radius:16px;background:#fff;user-select:none;overflow:hidden}
.romaji-practice .keyrow{display:flex;gap:var(--kg);margin:5px 0;width:100%}
.romaji-practice .keyrow.utility .spacer{height:48px;min-width:0;flex:1 1 0}
.romaji-practice .keyrow.qrow:after{content:"";display:block;flex:1 1 0}
.romaji-practice .keyrow.homerow:before,.romaji-practice .keyrow.bottomrow:before{content:"";display:block;flex:.5 1 0}
.romaji-practice .keyrow.homerow:after,.romaji-practice .keyrow.bottomrow:after{content:"";display:block;flex:1.5 1 0}
.romaji-practice .key{flex:1 1 0;width:auto;min-width:0;height:48px;border:1px solid #d7dee8;border-bottom-width:3px;border-radius:9px;background:#fff;font-weight:900;position:relative;box-shadow:inset 0 1px 0 #fff,0 2px 5px #0f172a0b}
.romaji-practice .f-lp,.romaji-practice .f-rp{background:#fff8fb}.romaji-practice .f-lr,.romaji-practice .f-rr{background:#faf8ff}.romaji-practice .f-lm,.romaji-practice .f-rm{background:#f6faff}.romaji-practice .f-li,.romaji-practice .f-ri{background:#f6fff9}
.romaji-practice .hint-key{flex:1 1 0;min-width:0;height:48px;border:1px solid #b9cef7;border-bottom-width:3px;border-radius:9px;background:#eef5ff;color:#2457a6;font:inherit;font-size:12px;font-weight:950;box-shadow:inset 0 1px 0 #fff,0 2px 5px #0f172a0b}.romaji-practice .hint-key:active{transform:translateY(2px);border-bottom-width:1px}.romaji-practice .home:after{content:"";position:absolute;width:16px;height:3px;border-radius:3px;background:#64748b;bottom:5px;left:50%;transform:translateX(-50%)}
.romaji-practice .finger{font-size:12px;text-align:center;color:#667085;font-weight:850;margin-top:7px}
@media(max-width:720px){.romaji-practice .keyboard{--kg:4px;padding:6px 2px}.romaji-practice .key{height:42px;font-size:12px}.romaji-practice .hint-key{height:42px;font-size:11px;padding:0 2px}.romaji-practice .keyrow.utility .spacer{height:42px}}
.romaji-kana-keyboard,.romaji-write-keyboard{width:min(760px,100%);margin:12px auto 0}.romaji-kana-page{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.romaji-kana-key,.romaji-kana-gap{aspect-ratio:1/1;min-width:0}.romaji-kana-key{border:1px solid #d4dae4;border-radius:9px;background:#fff;color:#1d2536;font:inherit;font-size:clamp(16px,4vw,25px);font-weight:900}.romaji-kana-actions{display:grid;grid-template-columns:1.15fr 1fr 1.25fr;gap:6px;margin-top:8px}.romaji-kana-actions button{min-height:48px;border:0;border-radius:11px;background:#edf0f4;color:#394255;font:inherit;font-size:13px;font-weight:900}.romaji-kana-actions button:first-child{background:#e8f5f2;color:#22675c}.romaji-kana-page[hidden]{display:none}.romaji-write-keyboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.romaji-write-key{aspect-ratio:1.05/1;min-width:0;border:1px solid #d4dae4;border-radius:12px;background:#fff;color:#1d2536;font:inherit;display:flex;align-items:baseline;justify-content:center;gap:1px}.romaji-write-key span{font-size:clamp(18px,3.5vw,27px);font-weight:900}.romaji-write-key small{font-size:clamp(13px,2.5vw,19px);font-weight:800;color:#697084}.romaji-write-delete{aspect-ratio:auto;min-height:52px;background:#edf0f4;font-weight:900}.romaji-write-hint{aspect-ratio:auto;min-height:52px;background:#eef5ff;color:#2457a6;font-weight:900}.romaji-write-key.is-hint{outline:0;transform:translateY(-2px);border-color:#4f9ee8;background:#4f9ee8;color:#fff;box-shadow:0 0 0 2px #fff,0 0 16px #4f9ee8,0 4px 10px #0f172a18}.romaji-write-key.is-hint small{color:#fff}@media(max-width:720px){.romaji-write-keyboard{gap:5px}.romaji-kana-page{gap:3px}}

.romaji-practice-nav{display:flex;justify-content:flex-start;padding:12px 14px 0}.romaji-back-button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid #d7dee8;border-radius:11px;background:#fff;color:#344054;font-size:14px;font-weight:900;text-decoration:none}.romaji-back-button:hover{background:#f7f9fc}.romaji-question input[readonly]{background:#fff;cursor:default}.romaji-question input.has-mismatch{border-color:#ef9a9a;color:#c62828;background:#fffafa}.romaji-practice .typed[hidden]{display:none!important}

/* v5: feedback is shown above the question, and overflow mistakes reset with a shake. */
.romaji-message-top{display:flex;align-items:center;justify-content:center;min-height:50px;margin:0 auto 8px;font-size:clamp(20px,4vw,30px);font-weight:950;line-height:1.1;opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s}
.romaji-message-top.is-visible,.romaji-message-top.ok{opacity:1;transform:none}
.romaji-message-top.ok{color:#16803b}
.romaji-question input.is-shaking{animation:romaji-input-shake .34s ease-in-out}
@keyframes romaji-input-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* v6: typing level/speed are subordinate options attached to the Typing card. */
.romaji-mode-grid{align-items:start}
.romaji-mode-item{min-width:0}
.romaji-mode-button{display:block;width:100%;min-height:82px}
.romaji-mode-grid .romaji-mode-item>.romaji-mode-button{border:1px solid #dce3eb;background:#fff;border-radius:14px;padding:14px;text-align:left;color:#27364a}
.romaji-mode-grid .romaji-mode-item>.romaji-mode-button.is-selected{border-color:#2563eb;background:#eef5ff;box-shadow:0 0 0 2px #2563eb18}
.romaji-typing-item.is-open{border:1px solid #b9cef7;border-radius:14px;background:#f8fbff;box-shadow:0 0 0 2px #2563eb10;overflow:hidden}
.romaji-typing-item.is-open>.romaji-mode-button{border:0;border-bottom:1px solid #d7e3f8;border-radius:0;background:#eef5ff;box-shadow:none}
.romaji-typing-settings{display:block;margin:0;padding:13px 14px 14px;border-top:0;background:#f8fbff}
.romaji-typing-settings[hidden]{display:none!important}
.romaji-option-group+.romaji-option-group{margin-top:12px}
.romaji-option-label{margin:0 0 7px;color:#526071;font-size:12px;font-weight:900}
.romaji-typing-settings .romaji-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.romaji-typing-settings .romaji-choice button{min-width:0;padding:9px 4px;border-radius:10px;font-size:13px}
@media(max-width:640px){.romaji-mode-button{min-height:auto}.romaji-typing-item.is-open{margin-bottom:2px}}

/* v8: touch-typing guide. Base finger colors stay very pale; only the recommended next key lights vividly. */
.romaji-practice .key{transition:background .1s,border-color .1s,box-shadow .1s,transform .08s,color .1s}
.romaji-practice .key.next{outline:0;transform:translateY(-2px);border-color:transparent;box-shadow:0 0 0 2px #fff,0 0 16px currentColor,0 4px 10px #0f172a18}
.romaji-practice .f-lp.next,.romaji-practice .f-rp.next{background:#f06fa9;color:#fff}
.romaji-practice .f-lr.next,.romaji-practice .f-rr.next{background:#9b7bea;color:#fff}
.romaji-practice .f-lm.next,.romaji-practice .f-rm.next{background:#4f9ee8;color:#fff}
.romaji-practice .f-li.next,.romaji-practice .f-ri.next{background:#42b978;color:#fff}
.romaji-practice .key.hit{transform:translateY(2px);border-bottom-width:1px}

/* v13: typing monthly ranking on romaji top */
.romaji-ranking-block{margin-top:28px;padding-top:24px;border-top:1px solid #e7ebf0}.romaji-ranking-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.romaji-ranking-head span{font-size:12px;font-weight:900;color:#7b8798}.romaji-ranking-head h2{margin:3px 0 0;font-size:20px}.romaji-ranking-head>strong{font-size:13px;color:#667085}.romaji-ranking-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.romaji-ranking-tabs button{border:0;border-radius:999px;padding:8px 12px;background:#f1f4f8;color:#425066;font-weight:900;cursor:pointer}.romaji-ranking-tabs button.is-active{background:#173f8f;color:#fff}.romaji-ranking-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}.romaji-ranking-list li{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:46px;padding:8px 10px;border-radius:12px;background:#f8fafc}.romaji-ranking-list li.is-me{background:#eef5ff}.romaji-ranking-list .rank{text-align:center;font-weight:900}.romaji-ranking-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.romaji-ranking-list small{padding:2px 6px;border-radius:999px;background:#dbe9ff;color:#2c5ca5;font-size:10px;font-weight:900}.romaji-ranking-list li.me-separator{display:block;min-height:1px;height:1px;margin:7px 0;padding:0;border-radius:0;background:#dce3ec}.romaji-ranking-empty{margin:12px 0 0;color:#7b8798;font-size:13px}@media(max-width:640px){.romaji-ranking-list li{grid-template-columns:42px minmax(0,1fr) auto}.romaji-ranking-list small{display:none}.romaji-ranking-tabs{gap:5px}.romaji-ranking-tabs button{padding:7px 10px;font-size:12px}}