html,body{min-height:100%}body{background:#09111a;color:#f4fbff;font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;margin:0;overflow-x:hidden;-webkit-user-select:none;user-select:none}.typing-game{background:radial-gradient(circle at 18% 12%,rgb(52 180 217 / 28%),transparent 28%),linear-gradient(135deg,#0a1721 0%,#102b34 48%,#18242b 100%);min-height:100vh;padding:28px}.typing-start,.typing-play,.typing-result{display:none}.typing-start.is-active,.typing-play.is-active,.typing-result.is-active{display:block}.typing-start{align-items:center;min-height:calc(100vh - 56px)}.typing-start.is-active{display:flex}.typing-start__inner,.typing-result__inner{background:rgb(255 255 255 / 94%);border:1px solid rgb(255 255 255 / 42%);border-radius:8px;box-shadow:0 24px 80px #00000047;color:#17222c;margin:0 auto;max-width:860px;padding:42px;width:min(100%,860px)}.typing-start__label,.typing-result__label{color:#0e88a3;font-size:13px;font-weight:800;letter-spacing:.08em;margin:0 0 10px;text-transform:uppercase}.typing-start__title{font-size:42px;line-height:1.25;margin:0 0 12px}.typing-start__lead{color:#4d5e66;font-size:16px;font-weight:600;line-height:1.85;margin:0 0 30px}.typing-menu{display:grid;gap:24px}.typing-menu__title{color:#26343c;font-size:15px;font-weight:800;margin:0 0 10px}.typing-choice{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}.typing-choice__btn{background:#eef6f8;border:2px solid #d7e8ed;border-radius:8px;color:#1d343d;cursor:pointer;font-size:16px;font-weight:800;min-height:54px}.typing-choice__btn.is-active{background:#143746;border-color:#2ec6e6;box-shadow:0 0 0 4px #2ec6e62e;color:#fff}.typing-menu__note{background:#f5fafb;border-left:4px solid #2ec6e6;color:#53646c;font-size:13px;font-weight:700;line-height:1.7;margin:0;padding:12px 14px}.typing-start__actions,.typing-result__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.typing-start__shortcut{color:#647781;font-size:13px;font-weight:800;margin:14px 0 0}.typing-primary-btn,.typing-secondary-btn{border-radius:8px;cursor:pointer;font-size:17px;font-weight:800;min-height:54px;padding:0 26px}.typing-primary-btn{background:#14b8d7;border:2px solid #14b8d7;color:#fff}.typing-secondary-btn{background:#fff;border:2px solid #bdd6df;color:#24404a}.typing-play{margin:0 auto;max-width:1180px}.typing-hud{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:20px}.typing-hud__item{background:rgb(255 255 255 / 11%);border:1px solid rgb(255 255 255 / 16%);border-radius:8px;padding:14px 16px}.typing-hud__item span,.typing-input span,.typing-result__grid span{color:#9fc6d2;display:block;font-size:12px;font-weight:800;margin-bottom:5px}.typing-hud__item strong{color:#fff;font-size:24px}.typing-board{background:rgb(255 255 255 / 94%);border-radius:8px;box-shadow:0 22px 70px #0000003d;color:#17222c;margin-bottom:16px;min-height:290px;padding:30px;text-align:center}.typing-board__count{color:#0e88a3;font-size:14px;font-weight:800;margin:0 0 18px}.typing-board__kana{font-size:clamp(30px,5vw,54px);font-weight:900;line-height:1.4;margin:0 0 18px}.typing-board__romaji{color:#a7b0b5;font-family:Menlo,Consolas,monospace;font-size:clamp(22px,3vw,34px);font-weight:800;line-height:1.45;min-height:54px;overflow-wrap:anywhere}.typing-board__romaji .is-done{color:#13a4c2}.typing-board__romaji .is-next{background:#ffe66b;border-radius:5px;color:#17222c;padding:0 3px}.typing-board__hint{color:#d04a31;font-size:18px;font-weight:900;min-height:30px;margin:18px 0 0}.typing-input{background:rgb(0 0 0 / 22%);border:1px solid rgb(255 255 255 / 14%);border-radius:8px;margin-bottom:18px;min-height:78px;padding:14px 18px}.typing-input strong{color:#fff;display:block;font-family:Menlo,Consolas,monospace;font-size:24px;min-height:32px;overflow-wrap:anywhere}.typing-keyboard{display:grid;gap:8px}.typing-keyboard__row{display:flex;gap:8px;justify-content:center}.typing-key{align-items:center;background:linear-gradient(#f8fcff,#dbe8ee);border:1px solid #a9c0c9;border-radius:7px;box-shadow:0 5px #79909a;color:#182932;display:flex;flex-direction:column;font-weight:900;height:54px;justify-content:center;min-width:48px;padding:0 8px;transition:transform .08s,box-shadow .08s,background .12s}.typing-key small{color:#61727b;font-size:10px;font-weight:800;margin-top:2px}.typing-key.is-next{background:linear-gradient(#fff2a4,#ffd84d);border-color:#ffcf22;box-shadow:0 5px #b48b00,0 0 18px #ffd84d8c}.typing-key.is-pressed{box-shadow:0 1px #55727d;transform:translateY(4px)}.typing-key.is-wrong{background:linear-gradient(#ffb1a4,#ff6a55);border-color:#ff6a55;box-shadow:0 5px #a13e2f;color:#fff}.typing-result{align-items:center;min-height:calc(100vh - 56px)}.typing-result.is-active{display:flex}.typing-result__inner{text-align:center}.typing-result__rank{color:#0e88a3;font-size:88px;line-height:1;margin:0 0 24px}.typing-result__grid{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));text-align:left}.typing-result__grid div{background:#f3f8fa;border-radius:8px;padding:16px}.typing-result__grid strong{color:#17222c;font-size:26px}.typing-result__save{color:#53646c;font-size:13px;font-weight:700;min-height:22px;margin:18px 0 0}@media screen and (max-width: 860px){.typing-game{padding:16px}.typing-start__inner,.typing-result__inner{padding:26px}.typing-choice,.typing-hud,.typing-result__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.typing-key{height:46px;min-width:36px;padding:0 5px}}@media screen and (max-width: 568px){.typing-start__title{font-size:32px}.typing-choice,.typing-hud,.typing-result__grid{grid-template-columns:1fr}.typing-board{min-height:250px;padding:22px 16px}.typing-keyboard{gap:6px;overflow-x:auto;padding-bottom:8px}.typing-keyboard__row{justify-content:flex-start;min-width:max-content}}