/* HUD/オーバーレイ。サイズは --u (画面短辺の 1%) 基準なので解像度・アスペクトに依存しない */
:root { --u: 1vmin; --yellow: #ffd400; --ink: #14102a; --red: #ff4848; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 900; color: #fff; }
#stage { position: fixed; inset: 0; overflow: hidden; background: #000; }
#gl { width: 100%; height: 100%; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
body[data-mode="attract"] #hud .gameonly, body[data-mode="result"] #hud .gameonly { display: none; }
.stroke { -webkit-text-stroke: calc(var(--u) * .55) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .45) 0 rgba(0,0,0,.35); }

/* 残り時間 */
#timeBox { position: absolute; top: calc(var(--u) * 1.6); left: 50%; transform: translateX(-50%); text-align: center; line-height: 1; }
#timeBox .lbl { display: block; font-size: calc(var(--u) * 2.2); color: var(--yellow); letter-spacing: .18em; }
#timeVal { font-size: calc(var(--u) * 8.5); font-variant-numeric: tabular-nums; -webkit-text-stroke: calc(var(--u) * .7) var(--ink); paint-order: stroke fill; }
#timeBox.warn #timeVal { color: var(--red); animation: beat .5s infinite; display: inline-block; }
@keyframes beat { 50% { transform: scale(1.12); } }

/* 順位表 */
#board { position: absolute; top: calc(var(--u) * 1.8); left: calc(var(--u) * 1.8); display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
#board .row { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 1); width: calc(var(--u) * 33); height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1.4);
  background: rgba(10, 6, 30, .62); border-radius: calc(var(--u) * 1.2); border-left: calc(var(--u) * 1) solid var(--c); transition: transform .3s; font-size: calc(var(--u) * 2.6); }
#board .row.me { background: rgba(255, 210, 0, .3); box-shadow: 0 0 0 calc(var(--u) * .35) rgba(255, 230, 120, .85) inset; }
#board .pos { width: calc(var(--u) * 3.2); font-size: calc(var(--u) * 3.2); color: var(--yellow); }
#board .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#board .sc { font-size: calc(var(--u) * 3.4); font-variant-numeric: tabular-nums; }
#board .row.bump .sc { animation: bump .3s; }
@keyframes bump { 40% { transform: scale(1.35); color: var(--yellow); } }
#board .it { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); font-size: calc(var(--u) * 2); line-height: calc(var(--u) * 2.6); text-align: center; border-radius: 50%; background: #ff5a2a; opacity: 0; }
#board .it.on { opacity: 1; }

/* ミニマップ */
#minimap { position: absolute; right: calc(var(--u) * 1.8); top: calc(var(--u) * 1.8); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 14%;
  background: rgba(10, 30, 20, .45); border: calc(var(--u) * .4) solid rgba(255,255,255,.7); }

/* 自分のスコア */
#myBox { position: absolute; left: calc(var(--u) * 1.8); top: calc(var(--u) * 24.5); line-height: 1; }
#myBox .lbl { font-size: calc(var(--u) * 2.3); color: #ffb0e8; }
#myVal { font-size: calc(var(--u) * 8); font-variant-numeric: tabular-nums; }
#myRank { font-size: calc(var(--u) * 3); color: var(--yellow); margin-top: calc(var(--u) * .4); }

/* 周回とアイテム */
#lapBox { position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 20); font-size: calc(var(--u) * 3.4); color: #9fe0ff; }
#lapBox b { font-size: calc(var(--u) * 5.4); color: #fff; }
#lapBox small { display: block; font-size: calc(var(--u) * 2.1); color: #fff; opacity: .85; }
#itemBox { position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 1.5); }
#itemSlot { width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: calc(var(--u) * 3); background: rgba(0,0,0,.5); border: calc(var(--u) * .5) solid rgba(255,255,255,.55); position: relative; }
#itemSlot i { position: absolute; inset: 12%; background: no-repeat center / contain; }
#itemSlot.on { border-color: var(--yellow); background: rgba(255, 90, 40, .55); animation: itemGlow .8s infinite alternate; }
#itemSlot.on i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg transform='rotate(-45 50 50)'%3E%3Cpath d='M50 6 C62 18 64 34 64 50 L64 74 L36 74 L36 50 C36 34 38 18 50 6Z' fill='%23f2f2f2' stroke='%23222' stroke-width='4'/%3E%3Cpath d='M36 58 L22 80 L36 76Z M64 58 L78 80 L64 76Z' fill='%23e83030' stroke='%23222' stroke-width='4'/%3E%3Cpath d='M42 74 L50 96 L58 74Z' fill='%23ffb020'/%3E%3Ccircle cx='50' cy='36' r='7' fill='%23e83030'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes itemGlow { to { box-shadow: 0 0 calc(var(--u) * 3) #ff9a2a; } }
#itemHint { font-size: calc(var(--u) * 2.4); max-width: calc(var(--u) * 26); line-height: 1.3; }

#speedBox { position: absolute; right: calc(var(--u) * 2.4); bottom: calc(var(--u) * 2.4); text-align: right; line-height: 1; }
#speedVal { font-size: calc(var(--u) * 9.5); font-variant-numeric: tabular-nums; }
#speedBox small { font-size: calc(var(--u) * 2.8); margin-left: .3em; color: var(--yellow); }
#speedBox .gauge { width: calc(var(--u) * 24); height: calc(var(--u) * 2); background: rgba(0,0,0,.5); border-radius: 99px; margin: calc(var(--u) * .6) 0 0 auto; overflow: hidden; border: calc(var(--u) * .3) solid #000; }
#boostBar { display: block; height: 100%; width: 50%; background: linear-gradient(90deg, #2a9cff, #9ff0ff); }
#speedBox.full #boostBar { background: linear-gradient(90deg, #ff7a00, #ffe14a); }
#speedBox.on .gauge { box-shadow: 0 0 calc(var(--u) * 1.5) #6cf; }
#speedBox .glbl { font-size: calc(var(--u) * 1.8); color: #9fe0ff; margin-top: calc(var(--u) * .3); }
#heldSlot { display: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: calc(var(--u) * 3); background: rgba(0,0,0,.5); border: calc(var(--u) * .5) solid rgba(255,255,255,.55); position: relative; }
body.veh-bike #heldSlot, body.veh-shovel #heldSlot { display: block; }
body.veh-shovel #heldSlot i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='70' width='50' height='16' rx='8' fill='%23333'/%3E%3Crect x='16' y='48' width='34' height='22' fill='%23ffc21a' stroke='%23222' stroke-width='4'/%3E%3Cpath d='M44 52 L72 22 L88 46' fill='none' stroke='%23ffc21a' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M80 44 L96 50 L88 64 Z' fill='%23333'/%3E%3C/svg%3E") !important; }
#heldSlot b { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255, 200, 40, .45); border-radius: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4); height: 0; }
#heldSlot i { position: absolute; inset: 14%; background: no-repeat center / contain; opacity: .25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='18' r='12' fill='%23f3c9a0' stroke='%23222' stroke-width='4'/%3E%3Cpath d='M50 30 L50 62 M50 38 L22 22 M50 38 L80 30 M50 62 L32 92 M50 62 L70 92' stroke='%23222' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M50 30 L50 62 M50 38 L22 22 M50 38 L80 30 M50 62 L32 92 M50 62 L70 92' stroke='%23ff5a5a' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); }
#heldSlot.on { border-color: #7affb0; background: rgba(40, 180, 90, .45); }
#heldSlot.on i { opacity: 1; animation: heldWiggle .4s infinite alternate; }
@keyframes heldWiggle { to { transform: rotate(14deg); } }
body.is-touch #speedBox { bottom: auto; top: calc(var(--u) * 32); }

/* 吹き出し・速報・バナー */
#popups { position: absolute; inset: 0; overflow: hidden; }
.pop { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: calc(var(--u) * 3.6); color: #fff;
  -webkit-text-stroke: calc(var(--u) * .55) var(--ink); paint-order: stroke fill; animation: popIn .22s cubic-bezier(.2, 2, .4, 1); }
@keyframes popIn { from { scale: .2; } to { scale: 1; } }
.pop.pt { color: var(--yellow); font-size: calc(var(--u) * 4.2); }
.pop.half { color: #9fd8ff; font-size: calc(var(--u) * 3.2); }
.pop.multi { color: #ff6ad5; font-size: calc(var(--u) * 6.4); }
.pop.cry { color: #fff; font-size: calc(var(--u) * 3); -webkit-text-stroke: calc(var(--u) * .5) #c02a6a; }
#feed { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 32); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .5); }
#feed div { font-size: calc(var(--u) * 2.3); background: rgba(10, 6, 30, .62); padding: calc(var(--u) * .5) calc(var(--u) * 1.4); border-radius: 99px; border-right: calc(var(--u) * .9) solid var(--c); animation: feedIn .25s; }
@keyframes feedIn { from { transform: translateX(30%); opacity: 0; } }
body.is-touch #feed { top: calc(var(--u) * 44); }
#banner { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(.5); font-size: calc(var(--u) * 6.4); opacity: 0; white-space: nowrap; transition: .18s cubic-bezier(.2, 2, .4, 1);
  -webkit-text-stroke: calc(var(--u) * .9) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .8) 0 rgba(0,0,0,.4); text-align: center; line-height: 1.15; }
#banner small { display: block; font-size: .45em; color: #fff; }
#banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner.warn { color: #ffd84a; } #banner.item { color: #ff8a3a; } #banner.good { color: #7affb0; }
#count { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 22); color: var(--yellow); -webkit-text-stroke: calc(var(--u) * 1.2) var(--ink); paint-order: stroke fill; display: none; }
#count.on { display: block; animation: countIn .5s cubic-bezier(.2, 2, .4, 1); }
@keyframes countIn { from { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }

/* ワイプ (別の場所の生中継・ピクチャインピクチャ)。位置は JS が描画と合わせて決める */
#wipe { position: absolute; display: none; z-index: 2; pointer-events: none; border: calc(var(--u) * .5) solid #fff; border-radius: calc(var(--u) * 1); box-shadow: 0 0 0 calc(var(--u) * .3) #000, 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0,0,0,.5); }
#wipe.on { display: block; animation: wipeIn .25s ease-out; }
@keyframes wipeIn { from { transform: scale(.3); opacity: 0; } }
#wipe .live { position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * .8); font-size: calc(var(--u) * 2); color: #ff4040; background: rgba(0,0,0,.6); padding: calc(var(--u) * .2) calc(var(--u) * 1); border-radius: 99px; }
#wipe .cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * .6); text-align: center; background: linear-gradient(transparent, rgba(0,0,0,.75)); }

#speedlines { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1;
  background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,0) 0deg 4deg, rgba(255,255,255,.5) 4.4deg 4.8deg, rgba(255,255,255,0) 5.2deg 9deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, transparent 40%, #000 92%); mask-image: radial-gradient(ellipse at 50% 52%, transparent 40%, #000 92%); mix-blend-mode: screen; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 1; }
/* 演出カット中は上下に黒帯 */
#stage::before, #stage::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 1; pointer-events: none; transition: height .12s ease-out; }
#stage::before { top: 0; } #stage::after { bottom: 0; }
body.cinecut #stage::before, body.cinecut #stage::after { height: 7%; }

/* タイトル */
#title { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 3; }
body[data-mode="attract"] #title { display: block; }
body[data-mode="attract"] #hud > :not(#popups):not(#minimap):not(#board) { display: none; }
#title .demo { position: absolute; top: calc(var(--u) * 3); right: calc(var(--u) * 33); font-size: calc(var(--u) * 2.8); background: rgba(255, 60, 60, .85); padding: calc(var(--u) * .5) calc(var(--u) * 2); border-radius: 99px; }
#hubLink, #quitBtn { position: absolute; z-index: 5; pointer-events: auto; font: inherit; font-size: calc(var(--u) * 2.4); color: #fff; text-decoration: none; background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.55); border-radius: 99px; padding: calc(var(--u) * .7) calc(var(--u) * 2); cursor: pointer; touch-action: manipulation; }
#hubLink { left: calc(var(--u) * 1.8); bottom: calc(var(--u) * 2); }
#quitBtn { display: none; left: 50%; transform: translateX(-50%); top: calc(var(--u) * 13.2); opacity: .8; font-size: calc(var(--u) * 2); padding: calc(var(--u) * .4) calc(var(--u) * 1.6); }
body[data-mode="play"] #quitBtn, body[data-mode="countdown"] #quitBtn { display: block; }
#title .logo { position: absolute; top: 18%; left: 50%; transform: translateX(-50%) rotate(-4deg); text-align: center; white-space: nowrap; }
#title .l1 { font-size: calc(var(--u) * 12.5); color: var(--yellow); line-height: 1; -webkit-text-stroke: calc(var(--u) * 1.1) var(--ink); }
#title .l2 { font-size: calc(var(--u) * 3.8); color: #ff7a5a; letter-spacing: .4em; margin-top: calc(var(--u) * 1.2); }
#title .rule { position: absolute; top: 47%; left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 3.2); white-space: nowrap; background: rgba(0,0,0,.45); padding: calc(var(--u) * .6) calc(var(--u) * 2.4); border-radius: 99px; }
#title .press { position: absolute; bottom: calc(var(--u) * 11); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 5.4); animation: blink2 1s infinite steps(2); white-space: nowrap; }
@keyframes blink2 { 50% { opacity: .15; } }
#title .keys { position: absolute; bottom: calc(var(--u) * 2.2); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 2.2); background: rgba(0,0,0,.55); padding: calc(var(--u) * .7) calc(var(--u) * 2); border-radius: 99px; white-space: nowrap; }
/* 車種選び */
#vehSel { position: absolute; top: 56%; left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * 1.6); align-items: stretch; pointer-events: auto; }
#vehSel .lbl { align-self: center; font-size: calc(var(--u) * 2.6); color: var(--yellow); white-space: nowrap; }
#vehSel button { font: inherit; color: #fff; cursor: pointer; text-align: left; width: calc(var(--u) * 31); padding: calc(var(--u) * .9) calc(var(--u) * 1.6); background: rgba(0,0,0,.6);
  border: calc(var(--u) * .4) solid rgba(255,255,255,.45); border-radius: calc(var(--u) * 1.6); touch-action: manipulation; line-height: 1.25; }
#vehSel button b { display: block; font-size: calc(var(--u) * 3); }
#vehSel button span { display: block; font-size: calc(var(--u) * 1.8); font-weight: 700; opacity: .85; }
#vehSel button.on { border-color: var(--yellow); background: rgba(255, 90, 40, .7); box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 200, 40, .7); }
body.is-touch #vehSel button b { font-size: calc(var(--u) * 3.4); }
#title .tc { display: none; } body.is-touch #title .tc { display: inline; } body.is-touch #title .pc { display: none; }
body.is-touch #title .keys { display: none; }

/* 結果 */
#result { position: absolute; inset: 0; display: none; z-index: 4; align-items: center; justify-content: center; background: radial-gradient(rgba(10,5,30,.55), rgba(10,5,30,.88)); }
body[data-mode="result"] #result { display: flex; }
#result .box { text-align: center; padding: calc(var(--u) * 3) calc(var(--u) * 5); }
#result h2 { margin: 0; font-size: calc(var(--u) * 8); color: var(--yellow); -webkit-text-stroke: calc(var(--u) * .8) var(--ink); paint-order: stroke fill; }
#result .sub { font-size: calc(var(--u) * 3); margin: calc(var(--u) * .5) 0 calc(var(--u) * 2.5); }
#result table { margin: 0 auto; border-collapse: separate; border-spacing: 0 calc(var(--u) * .8); font-size: calc(var(--u) * 3.2); }
#result td { padding: calc(var(--u) * .6) calc(var(--u) * 2); background: rgba(255,255,255,.08); }
#result td:first-child { border-radius: calc(var(--u) * 1) 0 0 calc(var(--u) * 1); border-left: calc(var(--u) * 1) solid var(--c); color: var(--yellow); }
#result td:last-child { border-radius: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0; font-variant-numeric: tabular-nums; }
#result tr.me td { background: rgba(255, 210, 0, .28); }
#result td.det { font-size: calc(var(--u) * 2.1); opacity: .85; font-weight: 700; }
#result .best { font-size: calc(var(--u) * 2.6); margin-top: calc(var(--u) * 1.6); color: #9fe0ff; }
#result .btns { margin-top: calc(var(--u) * 2.4); display: flex; gap: calc(var(--u) * 2); justify-content: center; }
#result button { font: inherit; font-size: calc(var(--u) * 3.2); color: #fff; padding: calc(var(--u) * 1.2) calc(var(--u) * 4); border-radius: 99px; border: calc(var(--u) * .4) solid #fff; background: #e8402a; cursor: pointer; touch-action: manipulation; }
#result button.sec { background: rgba(0,0,0,.5); }
#result .hint { font-size: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.4); opacity: .75; }

#ver { position: absolute; right: calc(var(--u) * .8); bottom: calc(var(--u) * .3); font-size: calc(var(--u) * 1.5); opacity: .45; z-index: 3; pointer-events: none; }
#fps { position: absolute; left: 50%; bottom: calc(var(--u) * .5); transform: translateX(-50%); font: 600 12px monospace; color: #9f9; z-index: 9; white-space: pre; pointer-events: none; }

/* スマホの仮想キー */
#touch { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 5; }
body.is-touch #touch { display: block; }
body.is-touch[data-mode="attract"] #touch, body.is-touch[data-mode="result"] #touch { display: none; }
#touch button { pointer-events: auto; touch-action: none; border: .6vmin solid rgba(255,255,255,.85); background: rgba(20, 10, 60, .45); color: #fff; font: inherit; font-weight: 900; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
#touch button.on { background: rgba(255, 200, 40, .75); transform: scale(.94); }
#touch .tg { position: absolute; bottom: max(3vmin, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 3vmin; }
#touch .tg.left { left: max(3vmin, env(safe-area-inset-left)); }
#touch .tg.right { right: max(3vmin, env(safe-area-inset-right)); flex-wrap: wrap; justify-content: flex-end; width: 64vmin; gap: 2vmin; }
#touch .tg.left button { width: 23vmin; height: 23vmin; font-size: 9vmin; }
#touch .tg.right .big { order: 5; width: 30vmin; height: 30vmin; font-size: 8vmin; background: rgba(255, 80, 80, .55); }
#touch .tg.right .sm { width: 14vmin; height: 14vmin; font-size: 2.8vmin; }
#touch .tg.right .item { width: 17vmin; height: 17vmin; font-size: 2.8vmin; background: rgba(255, 120, 30, .5); }
#touch .tg.right .throw { display: none; background: rgba(40, 180, 90, .5); }
body.veh-bike #touch .tg.right .throw, body.veh-shovel #touch .tg.right .throw { display: block; }
#touch .tg.right .boost { background: rgba(40, 140, 255, .55); }
body.is-touch #itemBox { bottom: auto; top: calc(var(--u) * 53); }
body.is-touch #itemSlot { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
body.is-touch #lapBox { bottom: auto; top: calc(var(--u) * 41); }
body.is-touch #itemHint { display: none; }
#rotate { display: none; position: fixed; inset: 0; z-index: 20; background: var(--ink); color: #fff; align-items: center; justify-content: center; font-size: 6vw; text-align: center; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); z-index: 30; font-size: 3vmin; }
#loading.done { display: none; }