:root{--color-sky: #DDEEF6;--color-sky-deep: #B9DCEC;--color-cloud: #FFFFFF;--color-pasture: #2E5E3A;--color-pasture-dark: #234A2D;--color-meadow: #6FA05C;--color-hay: #D9A13B;--color-saddle: #5C3D25;--color-saddle-soft: #8A6A4F;--color-clay: #B65C3F;--color-fence: #E7DCC9;--color-gait-walk: #6FA05C;--color-gait-trot: #4A90B8;--color-gait-canter: #D9A13B;--color-gait-gallop: #C7502F;--font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;--font-ui: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;--radius-panel: 12px;--radius-card: 20px;--radius-pill: 999px;--shadow-soft: 0 8px 24px rgba(46, 62, 42, .12);--shadow-lift: 0 12px 32px rgba(46, 62, 42, .18);--duration-quick: .12s;--duration-gait: .4s}*{box-sizing:border-box}body{margin:0;background:var(--color-sky);color:var(--color-saddle);font-family:var(--font-ui);font-size:16px;line-height:1.6}button{font-family:inherit}.screen{display:none}#app[data-phase=loading] #screen-loading{display:grid}.btn{display:inline-flex;align-items:center;gap:12px;font-size:18px;font-weight:700;border:0;cursor:pointer;border-radius:var(--radius-pill);padding:12px 48px;transition:transform var(--duration-quick),background var(--duration-quick)}.btn:focus-visible{outline:3px solid var(--color-hay);outline-offset:3px}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--color-pasture);color:var(--color-cloud);box-shadow:var(--shadow-soft)}.btn-primary:hover{background:var(--color-pasture-dark)}.btn-secondary{background:var(--color-cloud);color:var(--color-pasture);border:2px solid var(--color-pasture);padding:8px 24px;font-size:15px}.key-hint{font-family:var(--font-mono);font-size:13px;font-weight:400;border:1px solid currentColor;border-radius:6px;padding:0 8px;line-height:1.6}#screen-loading{min-height:100vh;place-items:center}.loading-text{color:var(--color-saddle-soft);letter-spacing:.2em}#screen-title{min-height:100vh;background:linear-gradient(180deg,var(--color-sky-deep) 0%,var(--color-sky) 55%,#CFE6C4 85%,#A8C98F 100%);grid-template-rows:1fr auto}#app[data-phase=title] #screen-title{display:grid}.hero{display:grid;place-content:center;text-align:center;gap:16px;padding:64px 32px}.game-title{font-family:var(--font-display);font-size:64px;font-weight:700;letter-spacing:.12em;margin:0;color:var(--color-pasture-dark)}.game-subtitle{font-size:20px;letter-spacing:.2em;margin:0}.game-copy{margin:8px 0 0;color:var(--color-saddle-soft)}.title-horse{display:grid;justify-items:center;margin-top:24px}.title-horse img{height:180px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(46,62,42,.25))}.start{margin-top:32px;display:grid;justify-items:center;gap:12px}.device-note{font-size:13px;color:var(--color-saddle-soft)}.title-footer{text-align:center;padding:16px;font-size:13px;color:var(--color-saddle-soft);background:#fff6}#screen-select{min-height:100vh;grid-template-rows:auto 1fr auto}#app[data-phase=select] #screen-select{display:grid}.select-header{text-align:center;padding:32px 16px 16px}.select-header h1{font-family:var(--font-display);font-size:36px;letter-spacing:.15em;margin:0;color:var(--color-pasture-dark)}.select-header p{margin:8px 0 0;color:var(--color-saddle-soft)}.horse-groups{display:grid;gap:32px;align-content:start;max-width:1180px;margin:0 auto;padding:0 24px 48px}.horse-group-title{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0 0 12px;color:var(--color-pasture-dark)}.horse-group-count{margin-left:8px;font-size:13px;font-weight:400;color:var(--color-saddle-soft)}.horse-group-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.horse-card{background:var(--color-cloud);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);overflow:hidden;border:3px solid transparent;position:relative;cursor:pointer;transition:transform var(--duration-quick),border-color var(--duration-quick);text-align:left;padding:0}.horse-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}.horse-card[data-selected=true]{border-color:var(--color-hay)}.horse-card[data-selected=true]:after{content:"えらんだ馬";position:absolute;top:8px;right:8px;background:var(--color-hay);color:var(--color-cloud);font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill)}.horse-photo{height:110px;display:grid;place-items:center;background:linear-gradient(160deg,#cfe6c4,#a8c98f)}.horse-photo img{max-height:96px;max-width:90%;object-fit:contain}.horse-meta{padding:8px 12px 12px}.horse-name{font-family:var(--font-display);font-size:16px;font-weight:600;margin:0}.horse-note{font-size:12px;color:var(--color-saddle-soft);margin:2px 0 0;line-height:1.5}.horse-best{display:inline-block;margin-top:4px;font-family:var(--font-mono);font-size:11px;color:var(--color-pasture);background:var(--color-sky);border-radius:var(--radius-pill);padding:0 8px}.action-bar{position:sticky;bottom:0;display:flex;justify-content:center;align-items:center;gap:24px;padding:16px;background:#ffffffd9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-top:1px solid var(--color-fence)}.nav-hint{font-size:13px;color:var(--color-saddle-soft)}#screen-play{min-height:100vh;place-items:center;padding:16px}#app[data-phase=play] #screen-play{display:grid}.play-frame{width:min(1100px,96vw);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-lift);background:linear-gradient(180deg,var(--color-sky-deep) 0%,var(--color-sky) 42%,#CFE6C4 58%,#8FBF75 70%,#6FA05C 100%);display:grid;grid-template-rows:auto 1fr auto auto;min-height:640px;position:relative}.topbar{display:flex;align-items:center;gap:24px;padding:16px 24px}.course{flex:1;position:relative;height:14px;background:#fff9;border-radius:var(--radius-pill)}.course-done{position:absolute;inset:0 auto 0 0;width:0%;background:var(--color-meadow);border-radius:var(--radius-pill);transition:width .2s}.course-marker{position:absolute;top:-12px;left:0%;transform:translate(-50%);transition:left .2s}.course-marker svg{width:34px;color:var(--color-saddle);fill:currentColor}.course-goal{position:absolute;right:-2px;top:-14px;font-size:18px}.timer{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--color-pasture-dark);background:#ffffffb3;border-radius:var(--radius-pill);padding:2px 16px}#stage{min-height:280px}#stage canvas{display:block}.gait-gauge{position:absolute;top:64px;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:8px;background:#ffffffd9;border-radius:var(--radius-pill);padding:4px 12px;box-shadow:var(--shadow-soft);transition:outline-color var(--duration-gait);outline:2px solid transparent}.shoe{width:22px;height:22px;color:var(--color-fence);transition:color var(--duration-gait),transform var(--duration-gait)}.gait-name{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:.1em;padding-left:8px;border-left:2px solid var(--color-fence)}.gait-name .yomi{font-family:var(--font-ui);font-size:11px;color:var(--color-saddle-soft);margin-left:4px}#app[data-gait=walk] .shoe:nth-child(-n+1){color:var(--color-gait-walk)}#app[data-gait=walk] .gait-name{color:var(--color-gait-walk)}#app[data-gait=trot] .shoe:nth-child(-n+2){color:var(--color-gait-trot)}#app[data-gait=trot] .gait-name{color:var(--color-gait-trot)}#app[data-gait=canter] .shoe:nth-child(-n+3){color:var(--color-gait-canter)}#app[data-gait=canter] .gait-name{color:var(--color-gait-canter)}#app[data-gait=gallop] .shoe:nth-child(-n+4){color:var(--color-gait-gallop);transform:scale(1.12);filter:drop-shadow(0 0 6px rgba(217,161,59,.9))}#app[data-gait=gallop] .gait-name{color:var(--color-gait-gallop)}#app[data-gait=gallop] .gait-gauge{outline-color:var(--color-hay)}.panel-slot{padding:0 32px 24px}.typing-panel{background:var(--color-cloud);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:16px 32px;text-align:center;border-bottom:6px solid var(--color-fence)}.word-kanji{font-family:var(--font-display);font-size:56px;font-weight:600;letter-spacing:.08em;margin:0;line-height:1.15}.word-kana{font-size:20px;color:var(--color-saddle-soft);letter-spacing:.2em;margin:4px 0 12px}.word-guide{font-family:var(--font-mono);font-size:28px;letter-spacing:.12em;margin:0}.word-guide .done{color:var(--color-meadow)}.word-guide .now{color:var(--color-saddle);background:var(--color-sky);border-bottom:3px solid var(--color-pasture);border-radius:4px;padding:0 2px}.word-guide .rest{color:#c9bfb2}.word-count{font-size:13px;color:var(--color-saddle-soft);margin:8px 0 0}.typing-panel.is-miss .now{border-bottom-color:var(--color-clay);color:var(--color-clay);animation:shake var(--duration-quick) 2}@keyframes shake{25%{transform:translate(-2px)}75%{transform:translate(2px)}}#screen-result{min-height:100vh;place-items:center;padding:24px}#app[data-phase=result] #screen-result{display:grid}.result-card{width:min(560px,94vw);background:var(--color-cloud);border-radius:var(--radius-card);box-shadow:var(--shadow-lift);padding:32px;text-align:center}.result-card.is-record{outline:3px solid var(--color-hay)}.result-badge{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.1em;border-radius:var(--radius-pill);padding:4px 18px;margin:0 0 16px;background:var(--color-sky);color:var(--color-pasture)}.result-card.is-record .result-badge{background:var(--color-hay);color:var(--color-cloud)}.horse-line{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}.horse-face{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#cfe6c4,#a8c98f);overflow:hidden}.horse-face img{max-width:48px;max-height:48px;object-fit:contain}.horse-line .name{font-family:var(--font-display);font-size:20px;font-weight:600}.horse-line .note{font-size:13px;color:var(--color-saddle-soft)}.time{font-family:var(--font-mono);font-size:48px;font-weight:700;color:var(--color-pasture-dark);margin:0;line-height:1.1}.time-label{font-size:13px;color:var(--color-saddle-soft);letter-spacing:.2em}.stats{display:flex;justify-content:center;gap:32px;margin:16px 0 24px}.stat .value{font-family:var(--font-mono);font-size:22px;font-weight:700}.stat .label{font-size:13px;color:var(--color-saddle-soft)}.stat .value[data-status=updated]{color:var(--color-hay)}.stat .value[data-status=kept]{color:var(--color-pasture)}.actions{display:grid;justify-items:center;gap:12px}.ranking{margin:0 0 24px;text-align:left}.ranking-title{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--color-pasture-dark);border-bottom:2px solid var(--color-fence);margin:0 0 8px;padding-bottom:4px}.ranking-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}.ranking-row{display:grid;grid-template-columns:44px 76px 1fr auto;align-items:baseline;gap:8px;font-size:13px;padding:3px 8px;border-radius:var(--radius-pill)}.ranking-row .rank{font-weight:700;color:var(--color-saddle-soft)}.ranking-row .time{font-family:var(--font-mono);font-weight:700;color:var(--color-pasture-dark)}.ranking-row .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-row .date{font-size:11px;color:var(--color-saddle-soft)}.ranking-row.is-current{background:var(--color-sky);outline:2px solid var(--color-hay)}.ranking-row.is-current .rank{color:var(--color-hay)}#screen-unsupported{min-height:100vh;place-content:center;text-align:center;padding:32px;background:linear-gradient(180deg,var(--color-sky-deep) 0%,var(--color-sky) 55%,#CFE6C4 85%,#A8C98F 100%)}#app[data-phase=unsupported] #screen-unsupported{display:grid}.notice-card{display:grid;gap:16px;justify-items:center}.notice-horse{width:160px;color:var(--color-saddle);fill:currentColor}.notice-card h1{font-family:var(--font-display);font-size:24px;letter-spacing:.1em;margin:0;color:var(--color-pasture-dark)}.notice-card p{margin:0;line-height:1.8}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}