.race-canvas{aspect-ratio:16/6.3;background:#244629;width:100%;overflow:hidden}.race-canvas canvas{width:100%;height:100%;display:block}.race-stage.distance-selector{text-align:center;background:linear-gradient(#06100a6b,#06100a99),url(/games/keiba-typing/image/race-course.png) 50%/cover no-repeat;border:2px solid #ffffff47;border-radius:10px;flex-direction:column;align-items:stretch;height:100%;padding:10px 32px 20px;display:flex}.distance-game-title-logo{width:100%;max-width:420px;height:auto;margin:0 auto 16px;display:block}.distance-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.distance-card{text-align:center;cursor:pointer;background:#ffffffe0;border:2px solid #143c24d9;border-radius:8px;grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:8px;height:150px;padding:16px;display:grid}.distance-card:hover,.distance-card:focus-visible{background:#fff4d6b8;border-color:#c9931a;outline:none}.distance-card:disabled{cursor:default}.distance-card--selected,.distance-card--selected:hover,.distance-card--selected:focus-visible{background:#fff4d6eb;border-color:#c9931a;box-shadow:0 0 0 3px #c9931a8c,0 4px 12px #00000047}.distance-card-logo{object-fit:contain;width:auto;max-width:80%;max-height:44px}.distance-detail{color:#14301d;letter-spacing:.02em;justify-content:center;align-items:baseline;gap:0;font-size:21px;font-weight:800;display:flex}.distance-surface{text-align:center;white-space:nowrap;width:4em;font-size:18px}.distance-meters{font-variant-numeric:tabular-nums}.distance-difficulty{color:#b45309;letter-spacing:.06em;font-size:17px;font-weight:700}.horse-name-field{flex-direction:column;align-items:center;gap:6px;margin-top:20px;display:flex}.distance-start-button{color:#2a1900;letter-spacing:.12em;-webkit-text-stroke:.4px #2a1900;text-shadow:0 1px #ffffff73;cursor:pointer;background:linear-gradient(#ffe487 0%,#f6c945 48%,#e9aa1f 100%);border:2px solid #b07d12;border-radius:999px;align-self:center;margin-top:18px;padding:8px 64px;font-size:22px;font-weight:900;transition:transform .12s,box-shadow .12s,filter .12s;box-shadow:inset 0 1px #ffffffa6,0 4px 12px #00000052,0 0 0 4px #f6d3652e}.distance-start-button:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:inset 0 1px #ffffffb3,0 6px 18px #0000005c,0 0 0 5px #f6d36547}.distance-start-button:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #00000047,0 2px 6px #0000004d}.distance-start-button:focus-visible{outline-offset:3px;outline:3px solid #fff3c4}.distance-start-button:disabled{cursor:not-allowed;color:#17221a80;text-shadow:none;box-shadow:none;filter:none;background:#f6d36566;border-color:#fff3;transform:none}.race-entry-overlay{z-index:15;pointer-events:auto;background:linear-gradient(#050c0847,#050c08b8),radial-gradient(circle at 50% 46%,#f6d3653d,#0000 36%);border-radius:10px;place-items:center;animation:2s ease-in-out both race-entry-backdrop;display:grid;position:absolute;inset:0;overflow:hidden}.race-entry-overlay__gate{align-content:center;gap:22px;display:grid;position:absolute;inset:0;transform:skewY(-1deg)}.race-entry-overlay__gate span{background:linear-gradient(90deg,#0000 0%,#f7f1d4 18%,#bb1f2f 50%,#f7f1d4 82%,#0000 100%);border-block:1px solid #ffffff85;height:10px;animation:2s cubic-bezier(.2,.8,.2,1) both race-entry-gate-line;display:block;transform:translate(-110%);box-shadow:0 0 18px #00000073}.race-entry-overlay__gate span:nth-child(2){animation-delay:70ms}.race-entry-overlay__gate span:nth-child(3){animation-delay:.14s}.race-entry-overlay__logo{z-index:1;object-fit:contain;filter:drop-shadow(0 8px 18px #000000b8);width:min(420px,72%);max-height:46%;animation:2s ease-out both race-entry-logo;position:relative}.race-entry-overlay__label{z-index:1;color:#f6d365;letter-spacing:.18em;text-indent:.18em;text-shadow:0 2px 8px #000000d1,0 0 14px #f6d36585;font-size:34px;font-weight:900;animation:2s ease-out both race-entry-label;position:absolute;bottom:74px}.horse-name-input-row{align-items:center;gap:8px;display:flex}.horse-name-label{color:#f6d365;font-size:16px;font-weight:700}.horse-name-suffix{font-size:20px;font-weight:400;line-height:1}.horse-name-input{color:#17221a;text-align:center;background:#fffffff2;border:1px solid #fff6;border-radius:6px;width:11em;padding:6px 10px;font-size:20px;font-weight:700}.horse-name-input:focus-visible{border-color:#f2c94c;outline:2px solid #f2c94c}.horse-name-input[aria-invalid=true]{border-color:#ff6b6b}.horse-name-hint{color:#ffffffc7;font-size:12px;font-weight:700}.horse-name-error{color:#ffd5d5;margin:0;font-size:13px;font-weight:700}.debug-panel{background:#fff7e0eb;border:1px dashed #b453098c;border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;display:flex}.debug-panel-label{color:#b45309;letter-spacing:.04em;font-size:12px;font-weight:800}.debug-panel-buttons{flex-wrap:wrap;gap:8px;display:flex}.debug-jump-button{color:#7c2d12;cursor:pointer;background:#fff;border:1px solid #b4530980;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700}.debug-jump-button:hover{background:#fde9c8}.how-to-play{background:#e4f2e7db;border:1px solid #1c52302e;border-radius:8px;padding:20px 24px}.how-to-play h2{color:#14654a;margin:0 0 10px;font-size:18px;line-height:1.3}.how-to-play h3{color:#14654a;margin:16px 0 8px;font-size:15px;line-height:1.3}.how-to-play p{color:#28342d;margin:0 0 12px;font-size:14px;line-height:1.6}.how-to-play ol,.how-to-play ul{gap:6px;margin:0;padding-left:22px;display:grid}.how-to-play li{color:#28342d;padding-left:2px;font-size:14px;line-height:1.6}.horseshoe-indicator{z-index:10;pointer-events:none;background:#06100ad1;border:1px solid #f6d36580;border-radius:6px;flex-direction:row;align-items:flex-end;gap:10px;padding:4px 12px;display:flex;position:absolute;top:12px;left:12px;box-shadow:inset 0 0 8px #f6d36533,0 0 10px #0006}.horseshoe-row{gap:6px;display:flex}.horseshoe{object-fit:contain;filter:drop-shadow(0 0 4px #ffd7008c);width:auto;height:28px;transition:filter .16s ease-out}.horseshoe--empty{filter:grayscale();opacity:.32}.horseshoe-multiplier{color:#ffe9a3;text-shadow:0 1px 2px #000000bf,0 0 6px #ffc85080;font-size:14px;font-weight:700;line-height:1}.rank-indicator{z-index:10;color:#f6d365;pointer-events:none;text-shadow:0 0 8px #f6d365a6;background:#06100ad1;border:1px solid #f6d36580;border-radius:6px;align-items:baseline;gap:4px;padding:4px 14px 6px;display:flex;position:absolute;top:12px;right:12px;box-shadow:inset 0 0 8px #f6d36533,0 0 10px #0006}.rank-indicator__number{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:40px;font-weight:800;line-height:1}.rank-indicator__unit{font-size:18px;font-weight:700}.race-progress-indicator{z-index:10;color:#f6d365;pointer-events:none;background:#06100ad1;border:1px solid #f6d36580;border-radius:6px;gap:18px;padding:6px 16px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 8px #f6d36533,0 0 10px #0006}.race-progress-indicator__item{align-items:baseline;gap:6px;display:flex}.race-progress-indicator__label{color:#cfe6d5;font-size:12px;font-weight:700}.race-progress-indicator__value{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;line-height:1}.mute-toggle{z-index:20;color:#f6d365;cursor:pointer;pointer-events:auto;background:#06100ad1;border:1px solid #f6d36580;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;transition:color .12s,border-color .12s,background .12s;display:grid;position:absolute;bottom:12px;right:12px;box-shadow:inset 0 0 8px #f6d36533,0 0 10px #0006}.mute-toggle:hover{background:#0a1810eb;border-color:#f6d365cc}.mute-toggle:focus-visible{outline-offset:2px;outline:2px solid #f6d365}.mute-toggle--muted{color:#ffffff8c;background:#06100ab3;border-color:#ffffff47;box-shadow:0 0 8px #0006}.countdown-overlay{pointer-events:none;background:#08120c6b;border-radius:8px;place-items:center;gap:6px;display:grid;position:absolute;inset:0}.fanfare-panel{background:linear-gradient(#06100a66,#06100a94),url(/games/keiba-typing/image/race-course.png) 50%/cover no-repeat;grid-template-rows:minmax(0,1fr) auto;gap:12px;height:100%;padding:18px 20px 14px;display:grid;position:relative}.fanfare-panel--exiting{transform:none}.fanfare-panel--exiting:after{content:"";background:#050c08e0;animation:.5s ease-in both fanfare-panel-shade-in;position:absolute;inset:0}.fanfare-card{background:#06100ac7;border:1px solid #f6d3656b;border-radius:8px;grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0;padding:16px;display:grid;box-shadow:inset 0 0 18px #f6d36514,0 12px 26px #00000057}.fanfare-header{align-items:center;gap:14px;min-width:0;display:flex}.fanfare-race-logo{object-fit:contain;filter:drop-shadow(0 3px 8px #0009);flex:none;width:96px;max-height:44px}.fanfare-race-summary{color:#eafff0;white-space:nowrap;text-shadow:0 2px 8px #000000b3;align-items:baseline;gap:12px;min-width:0;font-size:17px;font-weight:800;display:flex;overflow:hidden}.fanfare-race-summary strong{color:#f6d365;text-overflow:ellipsis;min-width:0;font-size:22px;overflow:hidden}.fanfare-entry-table{grid-template-rows:44px minmax(0,1fr);gap:4px;min-height:0;display:grid}.fanfare-entry-row{direction:rtl;gap:4px;min-width:0;display:grid}.fanfare-entry-cell{text-align:center;border:1px solid #ffffff47;min-width:0}.fanfare-entry-cell--post{font-variant-numeric:tabular-nums;text-shadow:none;border-radius:4px;place-items:center;font-size:22px;font-weight:900;line-height:1;display:grid}.fanfare-entry-cell--name{color:#17221a;background:#f7fff8eb;border-radius:6px;place-items:start center;min-height:0;padding:10px 2px;font-size:18px;font-weight:800;line-height:1.05;display:grid;overflow:hidden}.fanfare-entry-cell--name span{writing-mode:vertical-rl;text-orientation:upright;max-height:100%;display:inline-block}.fanfare-entry-cell--player{border-color:#f6d365;box-shadow:0 0 0 2px #f6d365d1,0 0 14px #f6d36575}.fanfare-entry-cell--name.fanfare-entry-cell--player{color:#241a00;background:linear-gradient(#fff5c2 0%,#f6d365 100%)}.fanfare-skip-hint{color:#f6d365;text-align:center;text-shadow:0 2px 8px #000000b8;justify-self:center;min-height:1.4em;font-size:16px;font-weight:700;display:block}.countdown-overlay span{color:#eafff0;text-shadow:0 2px 10px #000000b3;font-size:20px;font-weight:700}.countdown-overlay strong{color:#f6d365;text-shadow:0 6px 22px #000c;font-size:120px;line-height:1}.typing-panel{background:#e4f2e7e6;border:1px solid #1c52302e;border-radius:8px;gap:12px;margin-top:16px;padding:18px;display:grid}.problem-line,.roman-line{grid-template-columns:88px minmax(0,1fr);align-items:baseline;gap:14px;display:grid}.problem-line>span,.roman-line>span{color:#3f5a49;font-size:13px;font-weight:700}.problem-line strong{overflow-wrap:anywhere;color:#1c2b22;min-height:34px;font-size:24px;line-height:1.4}.roman-line code{overflow-wrap:anywhere;color:#1c2b22;min-height:30px;font-family:Consolas,Courier New,monospace;font-size:18px;line-height:1.5}.roman-line code .roman-typed{color:#8a9b91}.roman-line code .roman-next{color:#b4530a}.stat-list{gap:8px;display:grid}.stat-item{border-bottom:1px solid #ffffff1a;gap:4px;padding-bottom:10px;display:grid}.stat-item:last-child{border-bottom:0;padding-bottom:0}.stat-item span{color:#cfe6d5;font-size:12px}.stat-item strong{overflow-wrap:anywhere;min-height:22px;font-size:18px}.result-status{border-bottom:1px solid #ffffff1f;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:16px;padding-bottom:10px;display:grid}.result-status span{color:#cfe6d5;align-self:center;font-size:14px;font-weight:700}.result-status strong{color:#f6d365;justify-self:start;min-height:32px;font-size:28px;line-height:1.15}.action-row{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;display:grid}.action-row button{background:#ffffff1a;border:1px solid #ffffff29;border-radius:6px;min-height:38px;font-weight:700}.action-row button:hover,.action-row button:focus-visible{background:#f2c94c24;border-color:#f2c94c;outline:none}.action-row button:disabled{cursor:not-allowed;color:#f8fafc9e;background:#ffffff0d;border-color:#ffffff1a}.ranking-registration{gap:6px;display:grid}.ranking-registration__error{color:#ffd5d5;margin:0;font-size:12px;font-weight:700}.result-overlay{z-index:20;background:#0a16106b;place-items:center;padding:16px;animation:.22s ease-out result-overlay-in;display:grid;position:absolute;inset:0;overflow-y:auto}.stat-list--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}.stat-item--race-title{box-sizing:border-box;background:linear-gradient(135deg,#f6d3652e,#ffffff0a);border:1px solid #f6d3656b;border-radius:8px;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;min-height:44px;margin-bottom:2px;padding:7px 12px 8px;display:flex}.stat-item--race-title span{color:#cfe6d5;font-size:14px;font-weight:700}.stat-item--race-title strong{color:#f6d365;overflow-wrap:anywhere;font-size:18px;line-height:1.5}.result-overlay__card{background:linear-gradient(160deg,#2e4038f5,#1e2c26f5);border:1px solid #f6d36580;border-radius:10px;gap:12px;width:min(420px,100%);padding:18px 20px;display:grid;box-shadow:0 10px 30px #00000059}.ranking-popup{z-index:100;background:#060c09ad;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.ranking-popup__card{color:#f8fafc;background:#0c1210f5;border:1px solid #f6d36585;border-radius:8px;gap:18px;width:min(380px,100%);padding:22px;display:grid;box-shadow:0 14px 36px #00000085}.ranking-popup__header{color:#f6d365;justify-content:space-between;align-items:center;gap:12px;font-size:16px;font-weight:800;display:flex}.ranking-popup__header button{color:#f8fafc;background:#ffffff14;border:1px solid #ffffff29;border-radius:6px;place-items:center;width:32px;height:32px;padding:0;font-size:20px;line-height:1;display:grid}.ranking-popup__body{text-align:center;justify-items:center;gap:6px;display:grid}.ranking-popup__horse-name,.ranking-popup__time,.ranking-popup__total{margin:0}.ranking-popup__horse-name{color:#d8f7df;font-size:18px;font-weight:800}.ranking-popup__rank{color:#f6d365;justify-content:center;align-items:baseline;gap:5px;margin:0;display:flex}.ranking-popup__rank strong{font-size:72px;line-height:.95}.ranking-popup__rank span{font-size:24px;font-weight:800}.ranking-popup__total{color:#f8fafcc7;font-size:14px;font-weight:700}.ranking-popup__time{color:#f8fafc;font-size:15px;font-weight:700}@keyframes result-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes race-entry-backdrop{0%{opacity:0}18%,72%{opacity:1}to{opacity:0}}@keyframes race-entry-gate-line{0%{opacity:0;transform:translate(-110%)}24%,68%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(110%)}}@keyframes race-entry-logo{0%{opacity:0;transform:scale(.86)}24%,70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}@keyframes race-entry-label{0%{opacity:0;transform:translateY(12px)}26%,72%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}@keyframes fanfare-panel-shade-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.result-overlay,.race-entry-overlay,.race-entry-overlay__gate span,.race-entry-overlay__logo,.race-entry-overlay__label,.fanfare-panel--exiting:after{animation:none}}:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#e8efe8;font-family:"M PLUS 1p",Yu Gothic,Hiragino Sans,Meiryo,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:900px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{color:inherit;cursor:pointer}#root,.app-shell{min-height:100vh}.app-shell{background:radial-gradient(1100px 420px at 50% -8%,#21966e29,#0000 62%),linear-gradient(160deg,#eef4ef 0%,#e6eef0 52%,#e8ecf3 100%)}.top-bar{background:#0a0f0c;border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;gap:24px;min-height:48px;padding:8px 32px;display:flex}.brand{flex-direction:column;gap:2px;display:flex}.brand-title{letter-spacing:.01em;margin:0;font-size:20px;font-weight:800;line-height:1.2}.brand-home{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0}.main-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:24px;width:min(836px,100% - 64px);margin:0 auto;padding:32px 0;display:grid}.primary-column{flex-direction:column;gap:24px;min-width:0;display:flex}.game-frame{height:504px;position:relative}.race-stage{background:#0c121038;border:2px solid #ffffff47;border-radius:10px;min-width:0;height:100%;position:relative;overflow:hidden}.race-view,.countdown-stage{position:relative}
