/* =========================================================
   今日うま ランダム抽選ゲーム  (#kyouma-lottery 配下のみに適用)
   ワールド座標の基準: 1672 x 941 (背景画像サイズ)
   ========================================================= */
#kyouma-lottery {
  --ku-tile: calc(200cqw * 0.0897);      /* 矢印タイル幅 = ワールド幅 × 150/1672（スマホはワールド幅 = 200cqw） */
  --ku-ink: #2b241a;
  --ku-paper: #f6efdc;
  --ku-red: #ff2b2b;
  container-type: inline-size;
  container-name: ku;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 2em;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
#kyouma-lottery *,
#kyouma-lottery *::before,
#kyouma-lottery *::after { box-sizing: border-box; }
#kyouma-lottery p { margin: 0; padding: 0; }
#kyouma-lottery img {
  display: block; max-width: none; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* ---------- フレーム ---------- */
#kyouma-lottery .ku-frame {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #0a1233;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---------- ヘッダー（タイトル・操作） ---------- */
#kyouma-lottery .ku-head {
  position: relative;
  z-index: 6;
  padding: 18px 14px 16px;
  text-align: center;
  background:
    linear-gradient(rgba(8, 14, 48, .35), rgba(8, 14, 48, .78)),
    var(--ku-bg-url, none) 50% 14% / 300% auto no-repeat,
    #101a4a;
}
#kyouma-lottery .ku-title {
  font-size: clamp(19px, 6.9cqw, 40px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 2px 0 #0b1846, 2px 0 0 #0b1846, -2px 0 0 #0b1846, 0 -2px 0 #0b1846,
    2px 2px 0 #0b1846, -2px 2px 0 #0b1846, 2px -2px 0 #0b1846, -2px -2px 0 #0b1846,
    0 5px 10px rgba(0, 0, 0, .55);
}
#kyouma-lottery .ku-title .ku-tl { display: block; }   /* スマホは2行 */
#kyouma-lottery .ku-title .ku-un {
  color: var(--ku-red);
  font-size: 1.1em;
  text-shadow:
    0 2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff,
    0 0 0 #fff, 0 4px 0 #6b0000, 0 6px 12px rgba(0, 0, 0, .6);
}
#kyouma-lottery .ku-lead {
  margin-top: .55em;
  font-size: clamp(13px, 3.6cqw, 22px);
  font-weight: 700;
  line-height: 1.55;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 10px rgba(0, 0, 40, .6);
}
#kyouma-lottery .ku-lead span { display: block; }

#kyouma-lottery .ku-controls {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}
#kyouma-lottery .ku-count {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 6px 6px 6px 10px;
  border-radius: 10px;
  background: linear-gradient(#fdfdfd, #dfe3ea);
  box-shadow: 0 3px 0 #9aa2b1, 0 6px 14px rgba(0, 0, 0, .35);
  color: #1b2233;
  font-size: clamp(12px, 3.6cqw, 14px);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
#kyouma-lottery .ku-select-wrap { position: relative; }
#kyouma-lottery .ku-select-wrap::after {
  content: "";
  position: absolute;
  right: 10px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -6px;
  border-right: 2.5px solid #1b2233;
  border-bottom: 2.5px solid #1b2233;
  transform: rotate(45deg);
  pointer-events: none;
}
#kyouma-lottery .ku-select {
  -webkit-appearance: none; appearance: none;
  display: block;
  width: auto;
  min-width: 74px;
  height: 42px;
  margin: 0;
  padding: 0 26px 0 10px;
  border: 1.5px solid #8a92a3;
  border-radius: 7px;
  background: #fff;
  color: #111;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 40px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12);
  cursor: pointer;
}
#kyouma-lottery .ku-select:focus-visible { outline: 3px solid #ffcf3a; outline-offset: 2px; }
#kyouma-lottery .ku-select:disabled { opacity: .6; cursor: default; }

#kyouma-lottery .ku-draw {
  -webkit-appearance: none; appearance: none;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  min-height: 54px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(#3fcf55, #16a12f 55%, #0b7f22);
  box-shadow: 0 4px 0 #075417, 0 8px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: #fff;
  font: inherit;
  font-size: clamp(14px, 4.6cqw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 60, 10, .6);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s, box-shadow .08s, filter .2s;
}
#kyouma-lottery .ku-draw::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-right: .45em;
  border-style: solid;
  border-width: .5em 0 .5em .78em;
  border-color: transparent transparent transparent #fff;
  vertical-align: -.06em;
}
#kyouma-lottery .ku-draw:hover { filter: brightness(1.07); }
#kyouma-lottery .ku-draw:active { transform: translateY(3px); box-shadow: 0 1px 0 #075417, 0 4px 10px rgba(0, 0, 0, .4); }
#kyouma-lottery .ku-draw:focus-visible { outline: 3px solid #ffcf3a; outline-offset: 3px; }
#kyouma-lottery .ku-draw:disabled {
  cursor: default;
  filter: saturate(.55) brightness(.85);
  transform: none;
}
#kyouma-lottery .ku-draw:disabled::before { animation: ku-blink .6s steps(2) infinite; }

/* ---------- ステージ（競馬場） ---------- */
#kyouma-lottery .ku-stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 1672 / 860;   /* スマホ: ワールド y=230〜660 の範囲を表示 */
  background: #0d1530;
}
#kyouma-lottery .ku-world {
  --ku-pan: 0px;
  position: absolute;
  left: 0; top: 0;
  width: 200%;
  aspect-ratio: 1672 / 941;
  transform: translate3d(var(--ku-pan), -24.44%, 0);
  will-change: transform;
}
#kyouma-lottery .ku-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* START / GOAL の光 */
#kyouma-lottery .ku-glow {
  position: absolute;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
#kyouma-lottery .ku-glow-start { left: 1%; top: 34.6%; width: 15%; height: 19%; background: radial-gradient(closest-side, rgba(180, 255, 190, .9), rgba(60, 255, 120, 0)); }
#kyouma-lottery .ku-glow-goal { left: 87.6%; top: 22%; width: 12%; height: 40%; background: radial-gradient(closest-side, rgba(255, 240, 160, 1), rgba(255, 90, 60, .4) 60%, rgba(255, 60, 60, 0)); }
#kyouma-lottery .ku-glow.is-on { animation: ku-glow 1.1s ease-out; }

/* 矢印ストリップ */
#kyouma-lottery .ku-arrows {
  position: absolute;
  left: 0; right: 0;
  top: 59.6%;
  height: 7.4%;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(6, 10, 22, 0), rgba(6, 10, 22, .62) 22%, rgba(6, 10, 22, .62) 78%, rgba(6, 10, 22, 0));
}
#kyouma-lottery .ku-arrows-glow {
  position: absolute;
  left: 13.5%; right: 13.5%;
  top: 14%; bottom: 14%;
  filter: drop-shadow(0 0 4px rgba(255, 210, 80, .9)) drop-shadow(0 0 10px rgba(80, 255, 110, .55));
  opacity: .32;
  transition: opacity .4s;
}
#kyouma-lottery .ku-arrows-run {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #22d047, #a8ee3a 24%, #ffd21f 42%, #ff9c1a 55%, #ffd21f 70%, #7ef03e 84%, #22d047);
  --ku-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 50'%3E%3Cg fill='none' stroke='%23000' stroke-width='9' stroke-linejoin='miter'%3E%3Cpath d='M14 8 32 25 14 42'/%3E%3Cpath d='M36 8 54 25 36 42'/%3E%3Cpath d='M58 8 76 25 58 42'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--ku-chev);
  mask-image: var(--ku-chev);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--ku-tile) 100%;
  mask-size: var(--ku-tile) 100%;
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
}
#kyouma-lottery .ku-sweep {
  position: absolute;
  top: 46%; height: 8%;
  left: 0; width: 22%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 250, 210, .95) 80%, #fff);
  box-shadow: 0 0 10px 2px rgba(255, 220, 120, .8);
  opacity: 0;
}
#kyouma-lottery.is-running .ku-arrows-glow { opacity: 1; }
#kyouma-lottery.is-running .ku-arrows-run { animation: ku-arrows .42s linear infinite; }
#kyouma-lottery.is-running .ku-sweep { opacity: 1; animation: ku-sweep .9s linear infinite; }
#kyouma-lottery.is-boost .ku-arrows-run { animation-duration: .24s; }
#kyouma-lottery.is-boost .ku-sweep { animation-duration: .55s; }

/* 馬（番号なし） */
#kyouma-lottery .ku-horse {
  position: absolute;
  left: 0; top: 0;
  width: 20%;
  z-index: 3;
  transform-origin: 60% 90%;
  will-change: transform, opacity;
  transition: opacity .25s;
}
#kyouma-lottery .ku-horse .ku-body { position: relative; z-index: 2; width: 100%; }
#kyouma-lottery .ku-horse .ku-ghost {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  width: 100%;
  opacity: 0;
  filter: blur(3px) brightness(1.3);
  transform: translateX(-9%);
  transition: opacity .3s;
}
#kyouma-lottery.is-running .ku-horse .ku-ghost { opacity: .32; }
#kyouma-lottery .ku-horse .ku-shadow {
  position: absolute;
  left: 18%; right: 14%;
  bottom: 2%;
  height: 9%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}

#kyouma-lottery .ku-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }

/* 疾走感のビネット */
#kyouma-lottery .ku-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 20, .55));
  opacity: 0;
  transition: opacity .5s;
}
#kyouma-lottery.is-running .ku-stage::after { opacity: 1; }

/* 実況バナー */
#kyouma-lottery .ku-status {
  position: absolute;
  left: 0; right: 0;
  top: 7%;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
#kyouma-lottery .ku-status span {
  display: inline-block;
  padding: .1em .7em .18em;
  font-size: clamp(20px, 7cqw, 40px);
  font-weight: 800;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  text-shadow: 0 2px 0 #0b1846, 2px 0 0 #0b1846, -2px 0 0 #0b1846, 0 -2px 0 #0b1846, 0 0 16px rgba(255, 200, 60, .9);
}
#kyouma-lottery .ku-status span.is-show { animation: ku-pop 1.25s cubic-bezier(.2, .9, .3, 1.2) forwards; }
#kyouma-lottery .ku-status span.is-goal {
  color: #ffe36b;
  font-size: clamp(30px, 11cqw, 64px);
  text-shadow: 0 3px 0 #7a1200, 3px 0 0 #7a1200, -3px 0 0 #7a1200, 0 -3px 0 #7a1200, 0 0 24px rgba(255, 120, 40, 1);
  animation: ku-goal 1.6s cubic-bezier(.2, .9, .3, 1.25) forwards;
}

/* ---------- 馬券風エリア ---------- */
#kyouma-lottery .ku-ticket-wrap {
  position: relative;
  z-index: 6;
  padding: 14px 10px 4px;
  background: linear-gradient(#1c3a17, #10240e);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
#kyouma-lottery .ku-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  color: var(--ku-ink);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(115deg, rgba(150, 120, 60, .035) 0 2px, rgba(0, 0, 0, 0) 2px 6px),
    var(--ku-paper);
  box-shadow:
    inset 0 0 0 5px var(--ku-paper),
    inset 0 0 0 6.5px #cdb98a,
    inset 0 0 0 9px var(--ku-paper),
    inset 0 0 0 10px #ddcba0;
  -webkit-mask: radial-gradient(circle 11px at 0 50%, transparent 10px, #000 11px) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, transparent 10px, #000 11px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, transparent 10px, #000 11px) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 50%, transparent 10px, #000 11px) right / 51% 100% no-repeat;
}
#kyouma-lottery .ku-tk-brand {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding: 14px 16px 8px 18px;
  border-bottom: 2px dashed rgba(120, 100, 60, .35);
}
#kyouma-lottery .ku-tk-logo { font-size: clamp(20px, 6.6cqw, 28px); font-weight: 800; line-height: 1.1; letter-spacing: .02em; white-space: nowrap; }
#kyouma-lottery .ku-tk-sub { font-size: clamp(10px, 3.2cqw, 13px); font-weight: 800; line-height: 1.3; white-space: nowrap; }
#kyouma-lottery .ku-tk-sub small { display: block; font-size: 11px; letter-spacing: .1em; font-family: Arial, Helvetica, sans-serif; color: #4b4232; }
#kyouma-lottery .ku-tk-mark { width: clamp(38px, 12cqw, 56px); opacity: .9; }
#kyouma-lottery .ku-tk-en { display: none; }
#kyouma-lottery .ku-tk-band { display: none; }

#kyouma-lottery .ku-tk-main {
  position: relative;
  z-index: 1;
  padding: 12px 14px 14px;
  text-align: center;
}
#kyouma-lottery .ku-tk-label {
  position: relative;
  display: inline-block;
  padding: .12em 1.3em;
  font-size: 15px;
  font-weight: 800;
  border-top: 2px solid var(--ku-ink);
  border-bottom: 2px solid var(--ku-ink);
  background: rgba(255, 255, 255, .5);
}
#kyouma-lottery .ku-tk-label::before,
#kyouma-lottery .ku-tk-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .95em; height: .95em;
  border: 2px solid var(--ku-ink);
  border-width: 2px 0 0 2px;
  background: transparent;
}
#kyouma-lottery .ku-tk-label::before { left: -.15em; transform: translateY(-50%) rotate(-45deg); }
#kyouma-lottery .ku-tk-label::after { right: -.15em; transform: translateY(-50%) rotate(135deg); }

#kyouma-lottery .ku-balls {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 4cqw, 26px);
  margin: 12px 0 8px;
}
#kyouma-lottery .ku-slot { position: relative; display: flex; align-items: flex-end; }
#kyouma-lottery .ku-ban { margin-left: 3px; padding-bottom: .1em; font-size: 18px; font-weight: 800; }

/* ビリヤード風ボール */
#kyouma-lottery .ku-ball {
  --c-hi: #ffffff; --c: #f0f0f0; --c-lo: #a9adb6; --t: #111; --ts: rgba(255, 255, 255, .7);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(54px, 17cqw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, .55) 10%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 62% 88%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 38% 32%, var(--c-hi) 0%, var(--c) 42%, var(--c-lo) 100%);
  box-shadow: 0 7px 9px -3px rgba(0, 0, 0, .45), 0 2px 3px rgba(0, 0, 0, .25), inset 0 -4px 8px rgba(0, 0, 0, .18);
  color: var(--t);
  font-family: "M PLUS Rounded 1c", "Arial Black", "Hiragino Sans", sans-serif;
  font-size: clamp(26px, 8.4cqw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 1px 2px var(--ts);
}
#kyouma-lottery .ku-ball.is-2d { font-size: clamp(22px, 7.2cqw, 36px); }
#kyouma-lottery .ku-ball.c-white  { --c-hi: #ffffff; --c: #f2f2f2; --c-lo: #a7acb7; --t: #111; --ts: rgba(255, 255, 255, .8); }
#kyouma-lottery .ku-ball.c-black  { --c-hi: #7a7a7a; --c: #232323; --c-lo: #000; --t: #fff; --ts: rgba(0, 0, 0, .9); }
#kyouma-lottery .ku-ball.c-red    { --c-hi: #ff8080; --c: #e3141f; --c-lo: #7d0007; --t: #fff; --ts: rgba(80, 0, 0, .9); }
#kyouma-lottery .ku-ball.c-blue   { --c-hi: #86b9ff; --c: #1559d6; --c-lo: #062a70; --t: #fff; --ts: rgba(0, 10, 60, .9); }
#kyouma-lottery .ku-ball.c-yellow { --c-hi: #fff8b8; --c: #ffd500; --c-lo: #b08500; --t: #111; --ts: rgba(255, 255, 220, .7); }
#kyouma-lottery .ku-ball.c-green  { --c-hi: #84f397; --c: #12a336; --c-lo: #044f16; --t: #fff; --ts: rgba(0, 50, 10, .95); }
#kyouma-lottery .ku-ball.c-orange { --c-hi: #ffcd85; --c: #f68a0c; --c-lo: #9c4a00; --t: #111; --ts: rgba(255, 230, 190, .7); }
#kyouma-lottery .ku-ball.c-pink   { --c-hi: #ffd6ea; --c: #f48bbe; --c-lo: #b2437c; --t: #111; --ts: rgba(255, 235, 245, .7); }
#kyouma-lottery .ku-ball.is-empty {
  --c-hi: #ffffff; --c: #d9d6cc; --c-lo: #8f8a7c; --t: #8b8574; --ts: rgba(255, 255, 255, .8);
  opacity: .85;
}
#kyouma-lottery .ku-ball.is-rolling { animation: ku-roll .7s ease-in-out infinite; }
#kyouma-lottery .ku-slot:nth-child(2) .ku-ball.is-rolling { animation-delay: .12s; }
#kyouma-lottery .ku-slot:nth-child(3) .ku-ball.is-rolling { animation-delay: .24s; }
#kyouma-lottery .ku-ball.is-pop { animation: ku-ballpop .6s cubic-bezier(.2, 1.4, .4, 1) both; }

/* ボールの尾（色付きの光跡） */
#kyouma-lottery .ku-trail {
  position: absolute;
  right: 55%;
  top: 22%;
  z-index: 0;
  width: 70%;
  height: 50%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--trail, #fff));
  filter: blur(4px);
  opacity: 0;
  transform-origin: right center;
}
#kyouma-lottery .ku-slot.is-on .ku-trail { animation: ku-trail .8s ease-out both; }

#kyouma-lottery .ku-tk-ratio {
  font-family: "M PLUS Rounded 1c", Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
#kyouma-lottery .ku-tk-ratio .ku-dots { font-size: .55em; letter-spacing: .25em; color: #6f6550; vertical-align: .25em; }
#kyouma-lottery .ku-tk-ratio b { color: #d31010; font-weight: 900; }
#kyouma-lottery .ku-tk-sketch {
  position: absolute;
  right: 6px; bottom: 4px;
  width: 30%;
  max-width: 150px;
  opacity: .32;
  z-index: 0;
}

#kyouma-lottery .ku-notes {
  position: relative;
  z-index: 6;
  padding: 8px 14px 14px;
  background: #10240e;
  color: #f2f2f2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
#kyouma-lottery .ku-notes span { display: block; }
#kyouma-lottery .ku-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================
   スマホ専用レイアウト（コンテナ幅 680px 未満）
   タイトル → 説明 → 操作 → 競馬場 → 馬券 の縦積み
   ========================================================= */
@container ku (max-width: 679px) {
  /* --- タイトル・説明 --- */
  #kyouma-lottery .ku-head { padding: 20px 14px 18px; }
  #kyouma-lottery .ku-title { font-size: clamp(21px, 7cqw, 34px); }
  #kyouma-lottery .ku-lead { margin-top: .6em; font-size: clamp(13px, 3.75cqw, 17px); }

  /* --- 操作：頭数（1段目）＋ 幅広の抽選ボタン（2段目） --- */
  #kyouma-lottery .ku-controls { flex-wrap: wrap; gap: 12px; margin-top: 16px; }
  #kyouma-lottery .ku-count {
    flex: 1 1 100%;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 12px;
    font-size: 16px;
  }
  #kyouma-lottery .ku-select { min-width: 100px; height: 44px; line-height: 42px; font-size: 20px; padding: 0 30px 0 14px; }
  #kyouma-lottery .ku-draw {
    flex: 1 1 100%;
    max-width: none;
    min-height: 60px;
    border-radius: 12px;
    font-size: clamp(19px, 5.8cqw, 24px);
  }

  /* --- 競馬場：縦に余裕を持たせ、背景を 2.5 倍に拡大してカメラで追う ---
     表示範囲: ワールド y=170〜691、横 669px 分（START → GOAL へパン） */
  #kyouma-lottery .ku-frame { --ku-tile: calc(250cqw * 0.0658); }   /* 矢印タイル 110px 相当：間隔を詰めて個数を増やす */
  #kyouma-lottery .ku-stage { aspect-ratio: 1672 / 1302; }
  #kyouma-lottery .ku-world { width: 250%; transform: translate3d(var(--ku-pan), -18.07%, 0); }
  #kyouma-lottery .ku-arrows { top: 59.2%; height: 8.2%; }
  #kyouma-lottery .ku-arrows-glow { left: 2%; right: 2%; top: 12%; bottom: 12%; opacity: .45; }
  #kyouma-lottery .ku-status { top: 5%; }
  #kyouma-lottery .ku-status span { font-size: clamp(24px, 8cqw, 40px); }
  #kyouma-lottery .ku-status span.is-goal { font-size: clamp(40px, 14cqw, 72px); }

  /* --- 馬券：横幅いっぱい・大きな文字とボール --- */
  #kyouma-lottery .ku-ticket-wrap { padding: 14px 8px 4px; }
  #kyouma-lottery .ku-tk-brand { padding: 16px 18px 10px 20px; }
  #kyouma-lottery .ku-tk-logo { font-size: clamp(22px, 7.2cqw, 30px); }
  #kyouma-lottery .ku-tk-sub { font-size: clamp(11px, 3.3cqw, 14px); }
  #kyouma-lottery .ku-tk-main { padding: 14px 10px 18px; }
  #kyouma-lottery .ku-tk-label { font-size: clamp(14px, 4.3cqw, 18px); }
  #kyouma-lottery .ku-balls { gap: clamp(8px, 3.2cqw, 22px); margin: 16px 0 12px; }
  #kyouma-lottery .ku-ball { width: clamp(56px, 18.5cqw, 96px); font-size: clamp(28px, 9.6cqw, 48px); }
  #kyouma-lottery .ku-ball.is-2d { font-size: clamp(24px, 8.2cqw, 42px); }
  #kyouma-lottery .ku-ban { font-size: clamp(15px, 4.6cqw, 20px); }
  #kyouma-lottery .ku-tk-ratio { font-size: clamp(16px, 5cqw, 21px); }
  #kyouma-lottery .ku-notes { padding: 10px 16px 16px; font-size: clamp(12px, 3.4cqw, 14px); }
}
/* 極小幅（320px 未満） */
@container ku (max-width: 319px) {
  #kyouma-lottery .ku-head { padding-left: 10px; padding-right: 10px; }
  #kyouma-lottery .ku-title { font-size: 6.6cqw; }
  #kyouma-lottery .ku-lead { font-size: 3.9cqw; }
  #kyouma-lottery .ku-tk-ratio .ku-dots { display: none; }
}

/* =========================================================
   PC / 横長：添付見本どおり背景の上に全要素を重ねる
   ========================================================= */
@container ku (min-width: 680px) {
  #kyouma-lottery .ku-frame { aspect-ratio: 1672 / 941; }
  #kyouma-lottery .ku-stage { position: absolute; inset: 0; aspect-ratio: auto; }
  #kyouma-lottery .ku-world { width: 100%; transform: none; }
  #kyouma-lottery .ku-head {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 1.5cqw 0 0;
    background: none;
  }
  #kyouma-lottery .ku-head::before {
    content: "";
    position: absolute;
    left: 22%; right: 22%; top: 0;
    height: 30cqw;
    max-height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse 50% 45% at 50% 30%, rgba(5, 10, 40, .5), rgba(5, 10, 40, 0));
  }
  #kyouma-lottery .ku-title { font-size: max(20px, 3.05cqw); }
  #kyouma-lottery .ku-title .ku-tl { display: inline; }   /* PCは1行 */
  #kyouma-lottery .ku-lead { margin-top: .3em; font-size: max(12px, 1.38cqw); line-height: 1.5; }
  #kyouma-lottery .ku-controls { gap: 1.6cqw; margin-top: 1.1cqw; }
  #kyouma-lottery .ku-count { min-height: max(46px, 4.6cqw); padding: 0 .9cqw 0 1.8cqw; gap: 1cqw; font-size: max(13px, 1.25cqw); }
  #kyouma-lottery .ku-select { height: max(38px, 3.2cqw); line-height: max(36px, 3.1cqw); min-width: max(84px, 7.6cqw); font-size: max(16px, 1.75cqw); }
  #kyouma-lottery .ku-draw { flex: 0 0 auto; width: max(230px, 25cqw); max-width: none; min-height: max(46px, 4.6cqw); font-size: max(17px, 2.15cqw); }

  #kyouma-lottery .ku-status { top: 30%; }
  #kyouma-lottery .ku-status span { font-size: max(24px, 3.6cqw); }
  #kyouma-lottery .ku-status span.is-goal { font-size: max(36px, 6cqw); }

  #kyouma-lottery .ku-ticket-wrap {
    position: absolute;
    left: 11.2%; right: 11.6%;
    bottom: 4.9%;
    min-height: 26.6%;
    display: flex;
    padding: 0;
    background: none;
  }
  #kyouma-lottery .ku-ticket {
    flex: 1;
    grid-template-columns: 25.4% 4.9% 1fr 26%;
    -webkit-mask: radial-gradient(circle 1.1cqw at 0 50%, transparent 1cqw, #000 1.1cqw) left / 51% 100% no-repeat,
                  radial-gradient(circle 1.1cqw at 100% 50%, transparent 1cqw, #000 1.1cqw) right / 51% 100% no-repeat;
    mask: radial-gradient(circle 1.1cqw at 0 50%, transparent 1cqw, #000 1.1cqw) left / 51% 100% no-repeat,
          radial-gradient(circle 1.1cqw at 100% 50%, transparent 1cqw, #000 1.1cqw) right / 51% 100% no-repeat;
  }
  #kyouma-lottery .ku-tk-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.2cqw .8cqw;
    border-bottom: 0;
    text-align: center;
  }
  #kyouma-lottery .ku-tk-logo { font-size: max(20px, 2.75cqw); }
  #kyouma-lottery .ku-tk-sub { margin-top: .35cqw; font-size: max(10px, 1.15cqw); }
  #kyouma-lottery .ku-tk-sub small { display: none; }
  #kyouma-lottery .ku-tk-mark { width: max(46px, 6.4cqw); margin-top: .7cqw; }
  #kyouma-lottery .ku-tk-en { display: block; font-family: Arial, Helvetica, sans-serif; font-size: max(10px, 1.2cqw); font-weight: 700; letter-spacing: .04em; }
  #kyouma-lottery .ku-tk-band { display: block; background: linear-gradient(#b3e6d3, #92d6bd); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .5), inset -2px 0 0 rgba(0, 0, 0, .05); }
  #kyouma-lottery .ku-tk-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1cqw .5cqw; }
  #kyouma-lottery .ku-tk-label { font-size: max(12px, 1.3cqw); }
  #kyouma-lottery .ku-balls { gap: 2.1cqw; margin: .9cqw 0 .6cqw; }
  #kyouma-lottery .ku-ball { width: max(46px, 6.4cqw); font-size: max(22px, 3.2cqw); }
  #kyouma-lottery .ku-ball.is-2d { font-size: max(19px, 2.75cqw); }
  #kyouma-lottery .ku-ban { font-size: max(13px, 1.65cqw); }
  #kyouma-lottery .ku-tk-ratio { font-size: max(12px, 1.6cqw); }
  #kyouma-lottery .ku-tk-sketch { top: 6%; bottom: 6%; right: 2%; width: auto; height: 88%; max-width: 25%; object-fit: contain; object-position: right center; opacity: .5; }

  #kyouma-lottery .ku-notes {
    position: absolute;
    left: 0; right: 0; bottom: .9%;
    padding: 0 2%;
    background: none;
    text-align: center;
    font-size: max(11px, 1.08cqw);
  }
  #kyouma-lottery .ku-notes span { display: inline; }
  #kyouma-lottery .ku-notes span + span { margin-left: 2.4em; }
}
@container ku (min-width: 680px) {
  #kyouma-lottery .ku-frame { --ku-tile: calc(100cqw * 0.0897); } /* ワールド幅 = 100cqw */
}

/* ---------- アニメーション ---------- */
@keyframes ku-arrows {
  from { -webkit-mask-position: 0 50%; mask-position: 0 50%; }
  to   { -webkit-mask-position: var(--ku-tile) 50%; mask-position: var(--ku-tile) 50%; }
}
@keyframes ku-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(460%); }
}
@keyframes ku-glow {
  0% { opacity: 0; transform: scale(.8); }
  20% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes ku-pop {
  0% { opacity: 0; transform: translateX(-30px) scale(.7) skewX(-8deg); }
  18% { opacity: 1; transform: translateX(0) scale(1.08) skewX(-8deg); }
  30% { transform: scale(1) skewX(-8deg); }
  80% { opacity: 1; transform: translateX(10px) scale(1) skewX(-8deg); }
  100% { opacity: 0; transform: translateX(40px) scale(1) skewX(-8deg); }
}
@keyframes ku-goal {
  0% { opacity: 0; transform: scale(2.4); }
  25% { opacity: 1; transform: scale(.92); }
  38% { transform: scale(1.06); }
  50%, 85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}
@keyframes ku-roll {
  0%, 100% { transform: translateY(0) rotate(0); filter: brightness(1); }
  50% { transform: translateY(-5px) rotate(-12deg); filter: brightness(1.15); }
}
@keyframes ku-ballpop {
  0% { opacity: 0; transform: translateX(-60%) scale(.3) rotate(-200deg); }
  70% { opacity: 1; transform: translateX(4%) scale(1.12) rotate(10deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ku-trail {
  0% { opacity: 0; transform: scaleX(.2); }
  35% { opacity: .95; transform: scaleX(1.4); }
  100% { opacity: .55; transform: scaleX(1); }
}
@keyframes ku-blink { 50% { opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  #kyouma-lottery.is-running .ku-arrows-run,
  #kyouma-lottery.is-running .ku-sweep { animation-duration: 1.6s; }
  #kyouma-lottery .ku-ball.is-rolling { animation: none; }
}