:root{--ink:#0b0d14;--ink2:#151927;--line:#2a3045;--A:#ff4058;--B:#22c4ff;--Y:#ffd400;--txt:#f4f6fb;--dim:#9aa3b8;
  --jp:'BIZ UDPGothic',system-ui,sans-serif;--big:'Dela Gothic One','BIZ UDPGothic',system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#05060a;color:var(--txt);font-family:var(--jp);overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{position:relative;height:100dvh;max-width:520px;margin:0 auto;overflow:hidden;
  background:var(--ink) repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 24px)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:none}
#top{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:20;pointer-events:none}
#top>*{pointer-events:auto}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--big);font-size:15px;letter-spacing:.5px}
.logo b{background:var(--Y);color:#111;padding:1px 7px 3px;border-radius:5px;transform:skewX(-10deg);display:inline-block}
.tr{display:flex;gap:8px;align-items:center}
#snd{font-size:15px;line-height:1;width:34px;height:31px;border:2px solid var(--txt);border-radius:999px;background:rgba(0,0,0,.35)}
#lang{font-family:var(--big);font-size:13px;padding:5px 12px;border:2px solid var(--txt);border-radius:999px;background:rgba(0,0,0,.35)}
.scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:stretch;padding:56px 16px 18px;overflow-y:auto}
.scr.on{display:flex}
.ttl{font-family:var(--big);font-weight:400;font-size:24px;line-height:1.25;margin:4px 0 8px;text-align:center;letter-spacing:.5px}
.hint{color:var(--dim);font-size:13px;line-height:1.5;text-align:center;margin:2px 0 10px}

/* VS枠 */
.vs{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:4px;margin:4px 0 6px}
.slot{position:relative;height:150px;border-radius:6px;overflow:hidden;background:var(--ink2);clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.slot.R{clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.slot::before{content:'';position:absolute;inset:0;opacity:.55}
.slot.L::before{background:linear-gradient(160deg,var(--A),transparent 70%)}
.slot.R::before{background:linear-gradient(200deg,var(--B),transparent 70%)}
.slot img{position:absolute;inset:6px 0 24px;width:100%;height:calc(100% - 30px);object-fit:contain;display:none}
.slot.full img{display:block}
.slot .tag{position:absolute;top:6px;font-style:normal;font-family:var(--big);font-size:14px;padding:0 8px 2px;border-radius:4px;color:#fff}
.slot.L .tag{left:8px;background:var(--A)}.slot.R .tag{right:8px;background:var(--B)}
.slot .nm{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-family:var(--big);font-weight:400;font-size:16px;text-shadow:0 2px 0 #000}
.slot:not(.full) .nm{color:var(--dim);font-size:13px;font-family:var(--jp)}
.slot.wait{animation:blink 1s infinite}
@keyframes blink{50%{filter:brightness(1.5)}}
.vsmark{font-family:var(--big);font-size:28px;text-align:center;color:var(--Y);text-shadow:0 3px 0 #000;transform:skewX(-10deg)}

/* カードの並び */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;margin:2px 0 12px}
.card{position:relative;aspect-ratio:3/4.1;transform:skewX(-6deg);border-radius:5px;background:linear-gradient(180deg,#232a3d,#141826);
  border:2px solid var(--line);overflow:hidden;transition:transform .12s}
.card:active{transform:skewX(-6deg) scale(.95)}
.card .in{position:absolute;inset:0;transform:skewX(6deg) scale(1.08)}
.card img{position:absolute;left:0;right:0;top:4%;width:100%;height:62%;object-fit:contain}
.card .cn{position:absolute;left:0;right:0;bottom:calc(1.5% + 21px);text-align:center;font-family:var(--big);font-size:11.5px;line-height:1.1;white-space:nowrap;text-shadow:0 2px 0 #000}
.card .meter{position:absolute;left:12%;right:12%;bottom:calc(1.5% + 13px);height:5px;display:flex;gap:2px}
.card .meter i{flex:1;background:#39415a;border-radius:1px}.card .meter i.on{background:var(--Y)}
.card .spd{position:absolute;left:0;right:0;bottom:1.5%;text-align:center;font-size:8.5px;color:var(--dim);white-space:nowrap}
.card.sA{border-color:var(--A);box-shadow:0 0 0 2px var(--A) inset}.card.sB{border-color:var(--B);box-shadow:0 0 0 2px var(--B) inset}
.card.sA.sB{border-color:var(--Y)}
.card .pk{position:absolute;top:3px;font-style:normal;font-family:var(--big);font-size:10px;padding:0 5px 1px;border-radius:3px;display:none;color:#fff;transform:skewX(6deg)}
.card .pk.a{left:4px;background:var(--A)}.card .pk.b{right:4px;background:var(--B)}
.card.sA .pk.a,.card.sB .pk.b{display:block}
.card.rand .q{position:absolute;inset:0 0 30%;display:grid;place-items:center;font-family:var(--big);font-size:40px;color:var(--Y)}

.go{display:block;width:100%;padding:15px 0 17px;border-radius:8px;background:var(--Y);color:#111;font-family:var(--big);font-size:19px;letter-spacing:1px;
  box-shadow:0 4px 0 #9c8200;transform:skewX(-6deg);margin-top:auto}
.go:disabled{background:#3a3f50;color:#777e92;box-shadow:0 4px 0 #22252f}
.go:not(:disabled):active{transform:skewX(-6deg) translateY(3px);box-shadow:0 1px 0 #9c8200}
.nav{display:flex;gap:10px;margin-top:auto;align-items:center}.nav .go{margin:0;flex:1}
.back{padding:14px 18px;color:var(--dim);font-size:14px}
.sub{display:inline-flex;justify-content:center;align-items:center;padding:12px 10px;border:2px solid var(--line);border-radius:8px;background:var(--ink2);font-size:14px;text-decoration:none;color:var(--txt)}

/* 2倍を選ぶ・予想 */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 16px}
.big{position:relative;border-radius:10px;background:var(--ink2);border:3px solid var(--line);padding:10px 6px 14px;text-align:center}
.big img{width:100%;aspect-ratio:1/1;object-fit:contain}
.big .bn{font-family:var(--big);font-size:18px;margin-top:2px}
.big .bs{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.4}
.big.A{border-color:color-mix(in srgb,var(--A) 45%,var(--line))}.big.B{border-color:color-mix(in srgb,var(--B) 45%,var(--line))}
.big.sel{border-color:var(--Y);background:#2a2610}
.big .x2{position:absolute;top:-10px;left:50%;transform:translateX(-50%) skewX(-8deg);background:var(--Y);color:#111;font-family:var(--big);font-size:14px;padding:2px 10px 4px;border-radius:5px;white-space:nowrap;display:none}
.big.sel .x2{display:block}
.big .side{font-style:normal;position:absolute;top:8px;left:8px;font-family:var(--big);font-size:12px;padding:0 6px 1px;border-radius:3px;color:#fff}
.big.A .side{background:var(--A)}.big.B .side{background:var(--B)}

/* ゴール */
.goals{display:flex;flex-direction:column;gap:9px;margin:8px 0 14px}
.goal{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;background:var(--ink2);border:2px solid var(--line);text-align:left;transform:skewX(-5deg)}
.goal>*{transform:skewX(5deg)}
.goal:active{border-color:var(--Y)}
.goal .gi{font-size:30px;text-align:center}
.goal .gn{font-family:var(--big);font-size:17px}.goal .gs{font-size:12px;color:var(--dim);margin-top:2px}
.goal .gd{font-family:var(--big);font-size:14px;color:var(--Y);white-space:nowrap}
.match{display:flex;justify-content:center;align-items:center;gap:8px;font-family:var(--big);font-size:14px;color:var(--dim);margin:6px 0 4px;flex-wrap:wrap;text-align:center}
.match b{color:var(--Y);font-weight:400}

/* レース */
#s-race{padding:0;overflow:hidden;pointer-events:none}
#s-race button{pointer-events:auto}
#timer{position:absolute;left:0;right:0;top:50px;text-align:center;font-family:var(--big);font-size:46px;line-height:1;color:var(--Y);-webkit-text-stroke:6px #000;paint-order:stroke fill}
#timer small{font-size:24px}
#badge{position:absolute;left:50%;top:104px;transform:translateX(-50%);font-family:var(--big);font-size:13px;color:#fff;background:rgba(220,30,40,.92);padding:2px 10px 4px;border-radius:6px;white-space:nowrap;display:none}
#divider{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#s-race .side{position:absolute;bottom:92px;width:50%;padding:0 6px;text-align:center;overflow:hidden}
#pA{left:0}#pB{right:0}
#s-race .side .nm{font-family:var(--big);font-size:19px;line-height:1.2;-webkit-text-stroke:5px #000;paint-order:stroke fill}
#s-race .side .nm .x2{display:inline-block;background:var(--Y);color:#111;-webkit-text-stroke:0;font-size:12px;padding:0 6px 2px;border-radius:4px;margin-left:4px;vertical-align:3px}
.row{white-space:nowrap;line-height:1.2;font-family:var(--big);font-size:20px;color:var(--Y);-webkit-text-stroke:5px #000;paint-order:stroke fill;transform-origin:50% 50%}
.row .k{font-family:var(--jp);font-size:12px;color:#fff;margin-right:5px}
.row .u{font-size:13px;color:#fff}
.row.sm{font-size:14px;color:#fff}
.chip{display:inline-block;font-weight:700;font-size:12.5px;color:#fff;background:rgba(10,14,20,.7);border-radius:6px;padding:2px 9px 4px;margin-bottom:4px;white-space:nowrap;visibility:hidden}
.chip.on{visibility:visible}.chip.hot{background:rgba(220,30,40,.92)}
#map{position:absolute;left:18px;right:18px;bottom:30px;height:40px}
#map .track{position:absolute;left:0;right:0;top:18px;height:4px;background:rgba(255,255,255,.35);border-radius:2px}
#map .flag{position:absolute;right:-4px;top:6px;width:8px;height:28px;background:repeating-linear-gradient(0deg,#fff 0 4px,#000 4px 8px)}
#map .dot{position:absolute;top:12px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:2px solid #fff}
#map .dot.A{background:var(--A);top:4px}#map .dot.B{background:var(--B);top:20px}
#mapG{position:absolute;right:10px;top:-10px;font-size:11px;color:#fff;text-shadow:0 1px 2px #000}
#skip{position:absolute;right:10px;top:96px;font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.5)}
#photo{position:absolute;left:10px;right:10px;top:22%;height:36%;border:5px solid #fff;box-shadow:0 8px 30px rgba(0,0,0,.7);display:none}
#photo .pline{position:absolute;top:0;bottom:0;left:70%;width:3px;margin-left:-1.5px;background:rgba(235,30,40,.9)}
#photo .plab{position:absolute;top:4px;left:70%;transform:translateX(-50%);font-weight:700;font-size:12px;color:#fff;background:rgba(235,30,40,.92);padding:0 6px 2px;white-space:nowrap}
#photo .ptag{position:absolute;left:6px;bottom:6px;font-family:var(--big);font-size:12px;background:var(--Y);color:#111;padding:1px 8px 3px;border-radius:4px}
#flash{position:absolute;inset:0;background:#fff;opacity:0}
.racing #top{opacity:.85}

/* 結果 */
#s-result{background:rgba(5,6,10,.55);justify-content:flex-end}
.rcard{position:relative;border-radius:12px;background:linear-gradient(170deg,#1b2033,#0e111b);border:3px solid var(--Y);padding:14px 14px 12px;margin-bottom:12px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.rcard .wl{font-family:var(--big);font-size:13px;color:var(--dim);text-align:center}
.rcard .win{display:flex;align-items:center;justify-content:center;gap:10px}
.rcard .win img{width:84px;height:84px;object-fit:contain}
.rcard .win b{font-family:var(--big);font-weight:400;font-size:30px;color:var(--Y);line-height:1.15}
.rcard .gp{text-align:center;font-weight:700;font-size:15px;margin:6px 0 8px;line-height:1.5}
.rcard table{width:100%;border-collapse:collapse;font-size:13px}
.rcard td{padding:6px 4px;border-top:1px solid var(--line)}
.rcard td:last-child{text-align:right;font-family:var(--big);color:var(--Y);font-size:14px}
.rcard .dotA,.rcard .dotB{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.rcard .dotA{background:var(--A)}.rcard .dotB{background:var(--B)}
.rcard .guess{position:absolute;top:-12px;right:12px;font-family:var(--big);font-size:13px;padding:2px 10px 4px;border-radius:5px;transform:skewX(-8deg)}
.guess.ok{background:var(--Y);color:#111}.guess.ng{background:#444b5e;color:#fff}
.share{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch}
.share .go{margin:0}
.nav3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px}
.nav3 .sub{font-size:12px;padding:10px 4px}
.credit{font-size:11px;color:var(--dim);text-align:center;margin:10px 0 0;line-height:1.5}
.credit a{color:var(--txt)}

#loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;background:var(--ink);z-index:50;color:var(--dim);font-size:13px}
.spin{width:34px;height:34px;border-radius:50%;border:4px solid #333a50;border-top-color:var(--Y);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#toast{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:#fff;color:#111;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .2s;z-index:60;pointer-events:none}
@media (min-width:521px){#app{border-left:1px solid #1c2030;border-right:1px solid #1c2030}}