:root {
  --ink: #120a28; --navy: #1a1240; --navy2: #261a5c; --pink: #ff3d8a; --yel: #ffd23c; --cyan: #3ce8ff; --wht: #fff;
  --jp: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif; --num: 'Russo One', 'Dela Gothic One', sans-serif; --body: 'Zen Kaku Gothic New', sans-serif;
  --u: min(1vw, 1.6vh);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d0820; color: #fff; font-family: var(--body); user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#smokeOv { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at 30% 40%, rgba(70,40,110,.95) 0 18%, transparent 30%), radial-gradient(circle at 70% 55%, rgba(60,30,100,.95) 0 20%, transparent 34%), radial-gradient(circle at 50% 80%, rgba(80,50,120,.9) 0 22%, transparent 36%), radial-gradient(circle at 45% 20%, rgba(70,40,110,.9) 0 16%, transparent 30%); }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#fade { position: absolute; inset: 0; background: #0d0820; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 50; }
#fade.on { opacity: 1; }
.hide { display: none !important; }

/* ---------- 読みこみ ---------- */
#loading { position: absolute; inset: 0; z-index: 60; background: radial-gradient(ellipse at 50% 40%, #2a1a6a, #0d0820 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; transition: opacity .5s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading .lg { font-family: var(--num); font-size: calc(var(--u) * 7); letter-spacing: .04em; font-style: italic; background: linear-gradient(180deg, #fff, #ffd23c 60%, #ff8a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 #ff3d8a); }
#loading .bar { width: min(60vw, 420px); height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; transform: skewX(-20deg); }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ce8ff, #ff3d8a); transition: width .2s; }
#loading .tip { font-weight: 700; opacity: .7; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--num); }
#hItem { position: absolute; left: calc(var(--u) * 2.5); top: calc(var(--u) * 2.5); }
#hItem .slot { width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 22%; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.25), rgba(20,10,50,.65)); border: calc(var(--u) * .6) solid #fff; box-shadow: 0 0 0 calc(var(--u) * .5) var(--ink), 0 8px 20px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; transform: rotate(-4deg); }
#hItem.spin .slot { animation: slotPulse .12s infinite alternate; }
@keyframes slotPulse { to { transform: rotate(-4deg) scale(1.06); } }
#hItem canvas { width: 84%; height: 84%; }
#itemN { position: absolute; right: -6px; bottom: -6px; font-size: calc(var(--u) * 3.4); color: #fff; text-shadow: 0 3px 0 var(--ink), 0 0 6px var(--ink); }
#hTop { position: absolute; top: calc(var(--u) * 2.5); right: calc(var(--u) * 2.5); text-align: right; }
#hLap { font-size: calc(var(--u) * 5.4); font-style: italic; color: #fff; text-shadow: 0 4px 0 var(--ink), 0 0 12px rgba(0,0,0,.5); line-height: 1; }
#hLap b { font-size: .5em; color: var(--yel); margin-right: .25em; }
#hLap i { font-size: .6em; opacity: .7; margin: 0 .1em; }
#hTime { font-size: calc(var(--u) * 2.8); margin-top: 4px; text-shadow: 0 3px 0 var(--ink); letter-spacing: .03em; }
#hLapTimes { font-size: calc(var(--u) * 1.8); opacity: .85; margin-top: 2px; text-shadow: 0 2px 0 var(--ink); line-height: 1.4; }
#mini { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 17); width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
#hList { position: absolute; left: calc(var(--u) * 2.5); top: calc(var(--u) * 19); display: flex; flex-direction: column; gap: 3px; }
#hList .r { display: flex; align-items: center; gap: 6px; font-size: calc(var(--u) * 1.75); padding: 2px 10px 2px 4px; border-radius: 4px; background: rgba(18,10,40,.55); transform: skewX(-12deg); transition: transform .3s; width: calc(var(--u) * 15); }
#hList .r.me { background: linear-gradient(90deg, var(--pink), rgba(255,61,138,.4)); }
#hList .r b { width: 1.6em; text-align: center; }
#hList .r img { width: 1.7em; height: 1.7em; border-radius: 5px; border: 2px solid #fff; object-fit: cover; transform: skewX(12deg); }
#hList .r span { font-family: var(--jp); font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.5em; }
#hPos { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); font-style: italic; line-height: .8; }
#hPos #posN { font-size: calc(var(--u) * 16); background: linear-gradient(180deg, #fff 30%, var(--yel) 70%, #ff8a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 var(--ink)) drop-shadow(0 0 2px var(--ink)); }
#hPos small { font-size: calc(var(--u) * 5.5); color: #fff; text-shadow: 0 4px 0 var(--ink); }
#hPos.p1 #posN { background: linear-gradient(180deg, #fff 20%, #ffe14d 50%, #ffa800); -webkit-background-clip: text; background-clip: text; }
#hPos.bump { animation: bump .35s; }
@keyframes bump { 40% { transform: scale(1.25) rotate(-6deg); } }
#hSpeed { position: absolute; right: calc(var(--u) * 19); bottom: calc(var(--u) * 2.5); width: calc(var(--u) * 20); height: calc(var(--u) * 11.6); }
#hSpeed canvas { width: 100%; height: 100%; }
#hCoin { position: absolute; left: calc(var(--u) * 2.5); bottom: calc(var(--u) * 3); display: flex; align-items: center; gap: 8px; font-size: calc(var(--u) * 4.4); text-shadow: 0 4px 0 var(--ink); font-style: italic; }
#hCoin i { width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc928 50%, #c07800); border: 3px solid var(--ink); box-shadow: inset 0 0 0 4px rgba(255,255,255,.25); }
#hCoin.max span { color: var(--yel); }
#hMsg { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-family: var(--jp); font-size: calc(var(--u) * 5); text-shadow: 0 5px 0 var(--ink), 0 0 18px rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
#hMsg.on { opacity: 1; animation: pop .4s; }
#hMsg small { display: block; font-family: var(--num); font-size: .55em; color: var(--yel); }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
#hBig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--num); font-style: italic; font-size: calc(var(--u) * 22); color: #fff; text-shadow: 0 10px 0 var(--ink); pointer-events: none; }
#hBig span { display: inline-block; animation: countIn .6s cubic-bezier(.2,1.6,.4,1); }
#hBig span.go { background: linear-gradient(180deg, #fff 20%, #7dff8a 55%, #1ac040); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 0 var(--ink)); }
#hBig span.goal { font-size: .7em; background: linear-gradient(180deg, #fff 20%, var(--yel) 55%, #ff8a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 0 var(--ink)); }
@keyframes countIn { 0% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
#hWarn { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); font-family: var(--jp); font-size: calc(var(--u) * 3.6); padding: 6px 22px; background: #e8203a; border: 4px solid #fff; border-radius: 10px; box-shadow: 0 0 0 4px var(--ink); opacity: 0; }
#hWarn.on { opacity: 1; animation: blink .3s infinite alternate; }
@keyframes blink { to { opacity: .55; } }
#hDrift { position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); display: flex; gap: 8px; opacity: 0; transition: opacity .15s; }
#hDrift.on { opacity: 1; }
#hDrift i { width: calc(var(--u) * 4.5); height: calc(var(--u) * 1.4); border-radius: 4px; background: rgba(255,255,255,.2); border: 2px solid var(--ink); transform: skewX(-20deg); }
#hDrift i.l1 { background: #4aa8ff; box-shadow: 0 0 12px #4aa8ff; }
#hDrift i.l2 { background: #ff9a1a; box-shadow: 0 0 12px #ff9a1a; }
#hDrift i.l3 { background: #c060ff; box-shadow: 0 0 14px #c060ff; }
#hGhost { position: absolute; left: 50%; top: calc(var(--u) * 3); transform: translateX(-50%); font-size: calc(var(--u) * 2.4); text-shadow: 0 3px 0 var(--ink); }
#hGhost.ahead { color: #7dff8a; } #hGhost.behind { color: #ff7a8a; }

/* ---------- タッチ ---------- */
#touch { position: absolute; inset: 0; pointer-events: none; }
#tSteer { position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 16px; pointer-events: auto; }
#tSteer > div, #tBtns > div { border-radius: 50%; background: rgba(20,10,50,.42); border: 3px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; touch-action: none; }
#tL, #tR { width: 96px; height: 96px; }
#tL svg, #tR svg { width: 48%; }
#tBtns { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 250px; height: 220px; pointer-events: auto; }
#tBtns > div span { font-family: var(--jp); font-size: 14px; }
#tDrift { position: absolute; right: 0; bottom: 0; width: 118px; height: 118px; background: rgba(255,61,138,.45) !important; }
#tDrift span { font-size: 16px !important; }
#tItem { position: absolute; right: 128px; bottom: 56px; width: 92px; height: 92px; background: rgba(255,210,60,.35) !important; }
#tBrake { position: absolute; right: 18px; bottom: 136px; width: 76px; height: 76px; }
#tBrake span { font-size: 12px !important; }
#touch .on { background: rgba(255,255,255,.45) !important; transform: scale(.94); }
#tPause { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 12px; background: rgba(20,10,50,.5); border: 2px solid rgba(255,255,255,.5); display: flex; gap: 6px; align-items: center; justify-content: center; pointer-events: auto; z-index: 5; }
#tPause i { width: 6px; height: 20px; background: #fff; border-radius: 2px; }

/* ---------- メニュー ---------- */
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#ui > .scr { position: absolute; inset: 0; pointer-events: auto; animation: scrIn .35s ease-out; }
@keyframes scrIn { from { opacity: 0; transform: translateY(12px); } }
.btn { pointer-events: auto; cursor: pointer; font-family: var(--jp); color: #fff; background: linear-gradient(180deg, #34277a, #1f1650); border: 3px solid rgba(255,255,255,.9); border-radius: 10px; padding: .55em 1.4em; font-size: calc(var(--u) * 2.6); box-shadow: 0 6px 0 var(--ink), 0 10px 22px rgba(0,0,0,.35); transform: skewX(-10deg); transition: transform .12s, background .12s; display: inline-flex; align-items: center; gap: .6em; position: relative; }
.btn > * { transform: skewX(10deg); }
.btn:hover, .btn.f { background: linear-gradient(180deg, #ff5aa0, #e02a74); transform: skewX(-10deg) scale(1.04); }
.btn.f::after { content: ''; position: absolute; left: -16px; top: 50%; width: 0; height: 0; border: 10px solid transparent; border-left-color: var(--yel); transform: translateY(-50%) skewX(10deg); }
.btn:active { transform: skewX(-10deg) scale(.97); }
.btn.sm { font-size: calc(var(--u) * 2); padding: .45em 1em; }
.btn.yel { background: linear-gradient(180deg, #ffe46a, #ffb800); color: var(--ink); }
.btn.yel.f, .btn.yel:hover { background: linear-gradient(180deg, #fff2a0, #ffcf3a); }
.btn svg { width: 1.3em; height: 1.3em; }
.panel { background: linear-gradient(180deg, rgba(38,26,92,.92), rgba(20,12,52,.92)); border: 3px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 4px var(--ink), 0 20px 50px rgba(0,0,0,.45); }
.ttl { font-family: var(--jp); font-size: calc(var(--u) * 4.4); text-shadow: 0 5px 0 var(--ink); letter-spacing: .02em; }
.ttl small { display: block; font-family: var(--num); font-size: .42em; color: var(--yel); letter-spacing: .2em; font-style: italic; }
.hint { position: absolute; bottom: calc(var(--u) * 2); left: 0; right: 0; text-align: center; font-weight: 700; font-size: calc(var(--u) * 1.8); opacity: .75; text-shadow: 0 2px 0 var(--ink); }

/* タイトル */
.title { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(13,8,32,.15), rgba(13,8,32,.05) 50%, rgba(13,8,32,.65)); }
.logo { text-align: center; transform: rotate(-4deg); animation: logoIn .9s cubic-bezier(.2,1.5,.4,1); }
@keyframes logoIn { from { transform: rotate(-4deg) scale(.3); opacity: 0; } }
.logo .a { font-family: var(--num); font-style: italic; font-size: calc(var(--u) * 13); line-height: .9; background: linear-gradient(180deg, #fff 25%, #ffd23c 60%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 0 #ff3d8a) drop-shadow(0 14px 0 var(--ink)) drop-shadow(0 0 30px rgba(255,61,138,.6)); letter-spacing: -.01em; }
.logo .b { font-family: var(--jp); font-size: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); text-shadow: 0 5px 0 var(--ink); letter-spacing: .4em; padding-left: .4em; }
.logo .star { display: inline-block; width: .7em; height: .7em; background: var(--yel); clip-path: polygon(50% 0, 61% 36%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0 38%, 39% 36%); vertical-align: middle; margin: 0 .1em; filter: drop-shadow(0 0 6px #fff); animation: spinStar 3s linear infinite; }
@keyframes spinStar { to { transform: rotate(360deg); } }
.press { margin-top: calc(var(--u) * 8); font-family: var(--jp); font-size: calc(var(--u) * 3); text-shadow: 0 4px 0 var(--ink); animation: blink .7s infinite alternate; }

/* メインメニュー */
.menu { display: flex; align-items: center; padding-left: calc(var(--u) * 8); background: linear-gradient(90deg, rgba(13,8,32,.85) 0%, rgba(13,8,32,.5) 40%, transparent 70%); }
.menu .col { display: flex; flex-direction: column; gap: calc(var(--u) * 2); align-items: flex-start; }
.menu .btn { font-size: calc(var(--u) * 3.2); min-width: calc(var(--u) * 38); }
.menu .btn small { font-family: var(--body); font-weight: 700; font-size: .5em; opacity: .75; margin-left: auto; }
.menu .lgS { font-family: var(--num); font-style: italic; font-size: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 2); background: linear-gradient(180deg, #fff 25%, #ffd23c 60%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 #ff3d8a) drop-shadow(0 8px 0 var(--ink)); transform: rotate(-3deg); }

/* キャラ選択 */
.sel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); gap: calc(var(--u) * 3); overflow-y: auto; }
.sel .left { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1.4); }
.card { position: relative; cursor: pointer; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 3px solid rgba(255,255,255,.6); background: linear-gradient(160deg, var(--c), #120a28 120%); box-shadow: 0 5px 0 var(--ink); transition: transform .12s; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card b { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--jp); font-size: calc(var(--u) * 1.9); padding: 4px 6px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); text-align: center; }
.card.f, .card:hover { border-color: var(--yel); transform: translateY(-4px) scale(1.04); box-shadow: 0 8px 0 var(--ink), 0 0 0 4px var(--yel); }
.info { padding: calc(var(--u) * 2.2) calc(var(--u) * 2.6); }
.info .nm { font-family: var(--jp); font-size: calc(var(--u) * 4.6); text-shadow: 0 4px 0 var(--ink); }
.info .nm small { font-family: var(--num); font-size: .45em; color: var(--yel); margin-left: .6em; font-style: italic; }
.info .line { font-weight: 900; color: var(--cyan); margin: 4px 0 8px; font-size: calc(var(--u) * 2); }
.info .bio { font-weight: 700; font-size: calc(var(--u) * 1.8); opacity: .9; line-height: 1.6; min-height: 3.2em; }
.stats { margin-top: calc(var(--u) * 1.6); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; font-weight: 900; font-size: calc(var(--u) * 1.8); }
.stats .b { display: flex; gap: 4px; }
.stats .b i { flex: 1; height: calc(var(--u) * 1.5); border-radius: 3px; background: rgba(255,255,255,.15); transform: skewX(-20deg); }
.stats .b i.on { background: linear-gradient(90deg, var(--yel), #ff8a1a); box-shadow: 0 0 8px rgba(255,180,40,.6); }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tabs .btn { font-size: calc(var(--u) * 2); padding: .4em 1em; }
.tabs .btn.on { background: linear-gradient(180deg, #ffe46a, #ffb800); color: var(--ink); }
.foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* コース選択 */
.course { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 3); gap: calc(var(--u) * 2.4); background: rgba(13,8,32,.55); overflow-y: auto; }
.cups { display: flex; gap: calc(var(--u) * 2); flex-wrap: wrap; justify-content: center; }
.cup { cursor: pointer; width: calc(var(--u) * 28); padding: calc(var(--u) * 2.4); display: flex; flex-direction: column; gap: 10px; transition: transform .12s; }
.cup.f, .cup:hover { transform: scale(1.04); box-shadow: 0 0 0 4px var(--yel), 0 20px 50px rgba(0,0,0,.45); }
.cup h3 { font-family: var(--jp); white-space: nowrap; font-size: calc(var(--u) * 2.2); display: flex; align-items: center; gap: 10px; }
.cup h3 svg { width: 1.4em; height: 1.4em; }
.cup .ths { display: flex; gap: 8px; }
.cup .ths canvas { flex: 1; width: 0; aspect-ratio: 1; border-radius: 10px; background: rgba(0,0,0,.25); }
.cup .cn { display: flex; gap: 8px; font-weight: 900; font-size: calc(var(--u) * 1.3); }
.cup .cn span { flex: 1; text-align: center; }
.cup .tr { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: calc(var(--u) * 1.6); }
.cup .tr svg { width: 1.8em; height: 1.8em; }
.cup .tro { display: flex; flex-direction: column; align-items: center; flex: 1; }
.cup .tro small { font-size: .75em; opacity: .7; }
.clist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); width: min(100%, calc(var(--u) * 82)); }
.cc { cursor: pointer; padding: calc(var(--u) * 1.1); display: flex; flex-direction: column; gap: 6px; transition: transform .12s; }
.cc.f, .cc:hover { transform: scale(1.04); box-shadow: 0 0 0 4px var(--yel), 0 20px 50px rgba(0,0,0,.45); }
.cc canvas { width: 100%; aspect-ratio: 3; border-radius: 10px; background: rgba(0,0,0,.25); }
.cc b { font-family: var(--jp); font-size: calc(var(--u) * 2.2); }
.cc span { font-family: var(--num); font-size: calc(var(--u) * 1.7); color: var(--yel); }
.cc p { display: none; }
.cdesc { font-weight: 700; font-size: calc(var(--u) * 1.9); text-shadow: 0 2px 0 var(--ink); min-height: 1.6em; text-align: center; }
.cdesc b { font-family: var(--jp); font-weight: 400; color: var(--yel); }

/* 結果 */
.res { display: flex; align-items: center; justify-content: center; background: rgba(13,8,32,.45); }
.res .panel { padding: calc(var(--u) * 3) calc(var(--u) * 4); min-width: min(92vw, calc(var(--u) * 70)); }
.rows { display: flex; flex-direction: column; gap: 5px; margin: calc(var(--u) * 2) 0; }
.row { display: grid; grid-template-columns: 3em 2.2em 1fr auto auto; gap: 12px; align-items: center; padding: 6px 14px; border-radius: 8px; background: rgba(255,255,255,.07); font-weight: 900; font-size: calc(var(--u) * 2.1); transform: skewX(-8deg); animation: rowIn .4s backwards; }
.row > * { transform: skewX(8deg); }
@keyframes rowIn { from { opacity: 0; transform: translateX(40px) skewX(-8deg); } }
.row.me { background: linear-gradient(90deg, rgba(255,61,138,.85), rgba(255,61,138,.3)); }
.row .p { font-family: var(--num); font-style: italic; font-size: 1.2em; }
.row .face { width: 2.2em; height: 2.2em; border-radius: 8px; border: 2px solid #fff; object-fit: cover; transform: skewX(8deg); }
.row .n { font-family: var(--jp); }
.row .t { font-family: var(--num); font-size: .9em; opacity: .85; }
.row .pt { font-family: var(--num); color: var(--yel); min-width: 3.5em; text-align: right; }
.row .pt small { color: #7dff8a; font-size: .7em; margin-right: 6px; }
.res .foot { justify-content: center; margin-top: 8px; }
.newrec { font-family: var(--num); font-style: italic; color: var(--yel); font-size: calc(var(--u) * 4); text-align: center; animation: pop .5s, blink .5s .5s infinite alternate; text-shadow: 0 4px 0 var(--ink); }
.laps { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; font-family: var(--num); font-size: calc(var(--u) * 2.4); margin: calc(var(--u) * 2) 0; }
.laps .k { color: var(--yel); font-style: italic; }

/* 表彰台 */
.podium { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(var(--u) * 3); background: linear-gradient(180deg, rgba(13,8,32,.55), transparent 30%, transparent 70%, rgba(13,8,32,.75)); }
.podium .big { font-family: var(--num); font-style: italic; font-size: calc(var(--u) * 7); background: linear-gradient(180deg, #fff 25%, #ffd23c 60%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 var(--ink)); text-align: center; }
.podium .sub { font-family: var(--jp); font-size: calc(var(--u) * 3); text-align: center; text-shadow: 0 4px 0 var(--ink); }

/* せってい・あそびかた */
.set { display: flex; align-items: center; justify-content: center; background: rgba(13,8,32,.6); }
.set .panel { padding: calc(var(--u) * 3) calc(var(--u) * 4); width: min(94vw, calc(var(--u) * 84)); max-height: 92vh; overflow-y: auto; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 900; font-size: calc(var(--u) * 2.1); }
.opt .ch { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.opt .ch .btn { font-size: calc(var(--u) * 1.8); padding: .35em .9em; }
.opt .ch .btn.on { background: linear-gradient(180deg, #ffe46a, #ffb800); color: var(--ink); }
.opt input[type=range] { width: calc(var(--u) * 26); accent-color: var(--pink); }
.how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 2); margin-top: 12px; }
.how h4 { font-family: var(--jp); font-size: calc(var(--u) * 2.4); color: var(--yel); margin-bottom: 6px; }
.how p, .how li { font-weight: 700; font-size: calc(var(--u) * 1.75); line-height: 1.7; }
.how ul { list-style: none; }
.key { display: inline-block; min-width: 1.8em; padding: 0 .4em; border-radius: 5px; background: #fff; color: var(--ink); font-family: var(--num); font-size: .85em; text-align: center; box-shadow: 0 3px 0 #8a86a8; margin: 0 2px; }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.items div { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(var(--u) * 1.6); }
.items canvas { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); flex: none; }
.items b { font-family: var(--jp); font-weight: 400; margin-right: 4px; }
.sparks { display: flex; gap: 10px; margin: 6px 0; }
.sparks span { padding: 2px 10px; border-radius: 6px; font-weight: 900; color: var(--ink); }

/* ポーズ */
.pause { display: flex; align-items: center; justify-content: center; background: rgba(13,8,32,.6); backdrop-filter: blur(3px); }
.pause .panel { padding: calc(var(--u) * 3) calc(var(--u) * 5); display: flex; flex-direction: column; gap: 14px; align-items: stretch; min-width: calc(var(--u) * 40); }
.pause .btn { justify-content: center; }

/* 紹介（コース名） */
.intro { display: flex; align-items: flex-end; justify-content: flex-start; padding: calc(var(--u) * 6); pointer-events: none !important; }
.intro .nm { font-family: var(--jp); font-size: calc(var(--u) * 7); text-shadow: 0 6px 0 var(--ink), 0 0 24px rgba(0,0,0,.6); animation: slideIn .7s cubic-bezier(.2,1.4,.4,1); }
.intro .nm small { display: block; font-family: var(--num); font-style: italic; font-size: .38em; color: var(--yel); letter-spacing: .15em; }
.intro .cupn { font-family: var(--jp); font-size: calc(var(--u) * 2.6); opacity: .9; text-shadow: 0 3px 0 var(--ink); }
@keyframes slideIn { from { transform: translateX(-60px); opacity: 0; } }
.skip { position: absolute; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); pointer-events: auto; }

@media (max-height: 820px) {
  .info .bio { display: none; }
  .info { padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2); }
  .stats { margin-top: calc(var(--u) * 0.8); gap: 3px 12px; }
  .grid { gap: calc(var(--u) * 1); }
}
@media (max-width: 760px), (max-height: 520px) {
  :root { --u: min(1.25vw, 2vh); }
  .sel { grid-template-columns: 1fr; overflow-y: auto; align-content: start; }
  .sel .right { display: none; }
  .menu { padding-left: calc(var(--u) * 4); }
  .clist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how { grid-template-columns: 1fr; }
  #hList { display: none; }
  #mini { top: calc(var(--u) * 15); }
  #hSpeed { display: none; }
  #hPos { bottom: auto; top: calc(var(--u) * 36); right: calc(var(--u) * 2.5); }
  #hPos #posN { font-size: calc(var(--u) * 11); }
  #hCoin { bottom: auto; top: calc(var(--u) * 17); left: calc(var(--u) * 3); }
  #hDrift { bottom: 150px; }
}
@media (orientation: portrait) {
  :root { --u: min(1.9vw, 1.2vh); }
  .sel { grid-template-columns: 1fr; }
  .cups { flex-direction: column; }
  .clist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tL, #tR { width: 84px; height: 84px; }
  #tSteer { gap: 12px; }
  #tBtns { width: 124px; height: 318px; }
  #tDrift { right: 0; bottom: 0; width: 112px; height: 112px; }
  #tItem { right: 12px; bottom: 126px; width: 90px; height: 90px; }
  #tBrake { right: 20px; bottom: 230px; width: 72px; height: 72px; }
  #hPos { top: auto; bottom: calc(var(--u) * 50); right: calc(var(--u) * 3); }
}

/* タッチ操作のときの配置（右下はボタンなので空ける） */
@media (orientation: landscape) {
  body.touchmode #mini { top: 6px; right: auto; left: calc(50% + 34px); width: 104px; height: 104px; }
  body.touchmode #hPos { top: calc(var(--u) * 13); bottom: auto; right: calc(var(--u) * 2.5); }
  body.touchmode #hPos #posN { font-size: calc(var(--u) * 10); }
  body.touchmode #hPos small { font-size: calc(var(--u) * 3.6); }
  body.touchmode #hSpeed, body.touchmode #hList { display: none; }
  body.touchmode #hDrift { bottom: 22px; }
}

/* ---------- オンライン ---------- */
#toast { position: absolute; left: 50%; top: 12%; transform: translateX(-50%) translateY(-20px); z-index: 70; padding: 10px 22px; border-radius: 12px; background: #120a28; border: 3px solid #fff; font-weight: 900; font-size: calc(var(--u) * 2.2); opacity: 0; transition: .25s; pointer-events: none; }
#toast.on { opacity: 1; transform: translateX(-50%); }
.crow { display: flex; gap: 6px; flex-wrap: wrap; }
.crow img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 10px; border: 3px solid rgba(255,255,255,.35); cursor: pointer; object-fit: cover; transition: transform .1s; }
.crow img.on { border-color: var(--yel); transform: scale(1.1); box-shadow: 0 0 0 3px var(--ink); }
.opt input:not([type]) , .opt input[id] { font-family: var(--jp); font-size: calc(var(--u) * 2.2); padding: 8px 14px; border-radius: 10px; border: 3px solid #fff; background: #120a28; color: #fff; width: calc(var(--u) * 28); outline: none; }
#oCode { width: calc(var(--u) * 14) !important; text-align: center; letter-spacing: .3em; font-family: var(--num) !important; }
.obtns { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.join { display: flex; gap: 10px; align-items: center; }
.rooms { margin-top: 10px; font-weight: 900; }
.rooms > b { font-family: var(--jp); font-weight: 400; color: var(--yel); }
#oRooms { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 26vh; overflow-y: auto; font-size: calc(var(--u) * 1.9); }
.room { display: grid; grid-template-columns: 5em 1fr auto auto; gap: 14px; align-items: center; padding: 8px 14px; border-radius: 10px; background: rgba(255,255,255,.08); cursor: pointer; }
.room:hover { background: rgba(255,61,138,.5); }
.room b { font-family: var(--num); letter-spacing: .15em; color: var(--yel); }
.scr.busy { pointer-events: none; opacity: .7; }
.lob { width: min(96vw, calc(var(--u) * 110)) !important; }
.lhead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lhead .code { font-family: var(--num); font-size: calc(var(--u) * 6); letter-spacing: .2em; color: var(--yel); text-shadow: 0 5px 0 var(--ink); padding: 0 16px; border: 3px dashed rgba(255,255,255,.5); border-radius: 12px; }
.lhead .chint { font-weight: 900; opacity: .75; }
.lbody { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 14px 0; }
.lcol { display: flex; flex-direction: column; gap: 10px; }
.lcol > b { font-family: var(--jp); font-weight: 400; color: var(--yel); }
.pls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pl { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font-family: var(--jp); font-size: calc(var(--u) * 1.9); }
.pl.me { background: rgba(255,61,138,.45); }
.pl img { width: 2.2em; height: 2.2em; border-radius: 8px; border: 2px solid #fff; object-fit: cover; }
.pl .cr { width: 1.4em; display: inline-block; }
.pl .cr svg { width: 100%; }
.bub { position: absolute; right: 6px; top: -14px; background: #fff; color: var(--ink); font-style: normal; font-weight: 900; font-family: var(--body); font-size: .8em; padding: 2px 10px; border-radius: 10px; opacity: 0; pointer-events: none; }
.bub.on { animation: bubble 2.4s; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.stamps { display: flex; flex-wrap: wrap; gap: 6px; }
.stamps span { cursor: pointer; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.12); font-weight: 900; font-size: calc(var(--u) * 1.7); border: 2px solid rgba(255,255,255,.3); }
.stamps span:hover { background: var(--pink); }
.mcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mcs.ro { pointer-events: none; }
.mc { cursor: pointer; border-radius: 10px; padding: 6px; background: rgba(255,255,255,.06); border: 3px solid transparent; text-align: center; font-weight: 900; font-size: calc(var(--u) * 1.5); }
.mc canvas { width: 100%; border-radius: 6px; background: rgba(0,0,0,.25); display: block; margin-bottom: 4px; }
.mc.on { border-color: var(--yel); background: rgba(255,210,60,.15); }
.wait { font-weight: 900; opacity: .8; animation: blink .8s infinite alternate; }
@media (max-width: 760px), (orientation: portrait) {
  .lbody { grid-template-columns: 1fr; }
}

/* リプレイ */
body.replay #app::before, body.replay #app::after { content: ''; position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 20; pointer-events: none; }
body.replay #app::before { top: 0; } body.replay #app::after { bottom: 0; }
#rpTag { position: absolute; z-index: 21; left: calc(var(--u) * 3); top: 2vh; display: flex; align-items: baseline; gap: 16px; pointer-events: none; }
#rpTag b { font-family: var(--num); font-style: italic; font-size: calc(var(--u) * 3.4); color: #ff3a4a; animation: blink .8s infinite alternate; }
#rpTag span { font-weight: 900; font-size: calc(var(--u) * 1.6); opacity: .8; }
.lob .foot { position: sticky; bottom: calc(var(--u) * -3); padding: 12px 0 6px; background: linear-gradient(180deg, rgba(20,12,52,0), rgba(20,12,52,.96) 30%); z-index: 2; }