/* ゆびさき大運動会「ちょっと遊んでみる」の枠の中身(ゆび100m走)。アプリのプレイ画面(上に場面 / 下に自分の陣地)と同じ並び・配色。
   大きさは幅 320 を基準にした単位 --kt-u(try.js が入れる)。フォントはアプリ同梱のものを、使う文字だけに絞ったもの。 */
@font-face { font-family: "FP Display"; src: url(fonts/DelaGothicOne.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "FP Body"; font-weight: 700; src: url(fonts/ZenMaruGothic-Bold.woff2) format("woff2"); font-display: swap; }
.kt-try[data-kt-try="dash100"] { --kt-accent: #E94F37; --kt-accent-edge: #A8321F; --kt-accent-ink: #fff; --kt-bezel: #2A1D16; --kt-panel: #3B2A20; }
.kt-try[data-kt-try="dash100"] .kt-lead { color: #6E5B4E; }
.kt-try[data-kt-try="dash100"] .kt-cta-main span { display: inline-block; }
.kt-try[data-kt-try="dash100"] .kt-phone { box-shadow: 0 0 0 2px #5a463a inset, 0 18px 36px rgba(59,42,32,.25); }
.fd { --u: var(--kt-u, 1px); --me: #1F6FEB; position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: calc(var(--u) * 34);
  background: #FFF6E5; color: #3B2A20; font-family: "FP Body", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; font-weight: 700; }
.fd-scene { position: relative; height: calc(var(--u) * 272); }
.fd-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fd-zone { position: relative; flex: 1; min-height: 0; margin: calc(var(--u) * 6); overflow: hidden; border: calc(var(--u) * 2) solid rgba(31,111,235,.5);
  border-radius: calc(var(--u) * 16); background: #E7E9EE; outline: none; cursor: pointer; touch-action: manipulation;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.fd-zone:focus-visible { border-color: var(--me); box-shadow: 0 0 0 calc(var(--u) * 2) var(--me); }
.fd:not([data-phase="ready"]):not([data-phase="result"]) .fd-zone { touch-action: none; }
.fd-name { position: absolute; left: calc(var(--u) * 12); top: calc(var(--u) * 8); color: var(--me); font-size: calc(var(--u) * 16); line-height: 1.2; }
.fd-bar { height: calc(var(--u) * 10); margin: calc(var(--u) * 36) calc(var(--u) * 16) 0; overflow: hidden; border-radius: calc(var(--u) * 5); background: rgba(31,111,235,.2); }
.fd-bar i { display: block; height: 100%; background: var(--me); transform: scaleX(0); transform-origin: 0 50%; }
.fd-stat { margin-top: calc(var(--u) * 4); text-align: center; font-size: calc(var(--u) * 16); line-height: 1.3; font-variant-numeric: tabular-nums; white-space: pre; }
.fd-pad { position: absolute; left: 0; right: 0; top: calc(var(--u) * 66); bottom: calc(var(--u) * 34); display: grid; place-items: center; }
.fd-pad > * { grid-area: 1 / 1; }
.fd-btn { display: grid; place-items: center; width: calc(var(--u) * 120); height: calc(var(--u) * 120); border-radius: 50%; background: var(--me); color: #fff;
  opacity: .35; transition: transform .06s; }
.fd-btn svg { width: 50%; height: 50%; }
.fd-btn svg { visibility: hidden; }
.fd[data-phase="playing"] .fd-btn { opacity: 1; }
.fd[data-phase="playing"] .fd-btn svg { visibility: visible; }
.fd[data-phase="finished"] .fd-btn, .fd-done .fd-btn, .fd-done .fd-stat { visibility: hidden; }
.fd-btn.fd-down { transform: scale(.92); }
/* READY の長押し: 押している間だけ輪が満ちる */
.fd-ring { --p: 0; position: relative; display: grid; place-items: center; width: calc(var(--u) * 120); height: calc(var(--u) * 120); text-align: center;
  font-size: calc(var(--u) * 16); line-height: 1.35; }
.fd-ring[hidden] { display: none; }
.fd-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--me) calc(var(--p) * 360deg), rgba(31,111,235,.2) 0);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--u) * 8), #000 calc(100% - var(--u) * 7.5));
  mask: radial-gradient(closest-side, transparent calc(100% - var(--u) * 8), #000 calc(100% - var(--u) * 7.5)); }
.fd-ring span { position: relative; }
.fd[data-phase="ready"] .fd-ring { animation: fd-pulse 1.4s ease-in-out infinite; }
.fd-big { font-family: "FP Display", "Hiragino Sans", sans-serif; font-weight: 400; font-size: calc(var(--u) * 56); line-height: 1; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 calc(var(--u) * 6) #E7E9EE, 0 0 calc(var(--u) * 6) #E7E9EE; }
.fd-big[hidden] { display: none; }
.fd-big.fd-ok { font-size: calc(var(--u) * 32); color: var(--me); }
.fd-big.fd-go { color: #E94F37; }
.fd-big.fd-fin { font-size: calc(var(--u) * 36); }
.fd-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 10); margin: 0; text-align: center; font-size: calc(var(--u) * 13); line-height: 1.4; color: #6E5B4E; pointer-events: none; }
.fd-hint small { display: none; font-size: calc(var(--u) * 10.5); }
@media (hover: hover) and (pointer: fine) { .fd-hint small { display: block; } .fd-hint { bottom: calc(var(--u) * 6); } }
.fd[data-phase="finished"] .fd-hint, .fd[data-phase="result"] .fd-hint { visibility: hidden; }
.fd-result { position: absolute; left: 0; right: 0; top: calc(var(--u) * 56); display: flex; justify-content: center; align-items: baseline; gap: calc(var(--u) * 12);
  pointer-events: none; animation: fd-pop .25s linear both; }
.fd-result[hidden] { display: none; }
.fd-result b { font-family: "FP Display", "Hiragino Sans", sans-serif; font-weight: 400; font-size: calc(var(--u) * 40); line-height: 1.15; color: var(--me); }
.fd-result span { font-family: "FP Display", "Hiragino Sans", sans-serif; font-weight: 400; font-size: calc(var(--u) * 24); font-variant-numeric: tabular-nums; }
.fd-impact { position: absolute; width: calc(var(--u) * 48); height: calc(var(--u) * 48); margin: calc(var(--u) * -24) 0 0 calc(var(--u) * -24); border-radius: 50%;
  border: calc(var(--u) * 6) solid rgba(31,111,235,.6); pointer-events: none; animation: fd-impact .32s linear both; }
@keyframes fd-impact { to { transform: scale(3.5); opacity: 0; border-width: calc(var(--u) * 1); } }
@keyframes fd-pulse { 50% { transform: scale(1.05); } }
@keyframes fd-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fd-ring, .fd-result { animation: none !important; } }