/* ============================================================
   racing.css — ซิ่งสกัด แกรนด์ปรีซ์ · สไตล์การ์ตูนเส้นเข้มแบบเกมชุดเดิม (โลกเกมสีเดียว ไม่สลับธีม)
   ============================================================ */
.rc-app{
  --ink:#16202A; --ink2:#4B5968; --paper:#FFFDF7; --mango:#FFC23D; --teal:#15AE9F; --chili:#FF5A4E; --leaf:#6CC94F; --sky:#BDE3FF;
  position:relative; max-width:560px; margin:0 auto; height:100vh; height:100svh; background:#0F1720; color:var(--ink);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,"Segoe UI",sans-serif; -webkit-text-size-adjust:100%;
}
.rc-app *{box-sizing:border-box}
.rc-app .nb{white-space:nowrap}
.rc-stage{position:absolute; inset:0; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.rc-canvas{position:absolute; left:0; top:0; display:block}
.rc-stage.rc-shake{animation:rcShake .28s linear}
@keyframes rcShake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* ---------- HUD ---------- */
.rc-hud{position:absolute; inset:0; z-index:5; pointer-events:none; font-family:"Mitr","IBM Plex Sans Thai",sans-serif}
.rc-top{position:absolute; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:flex-start;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 0}
.rc-tl{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.rc-place{display:flex; align-items:baseline; gap:2px; background:var(--paper); border:2.5px solid var(--ink); border-radius:14px; padding:0 12px 2px; box-shadow:0 3px 0 var(--ink)}
.rc-place b{font-size:34px; font-weight:600; line-height:1.15}
.rc-place span{font-size:15px; color:var(--ink2)}
.rc-lap{font-size:13.5px; font-weight:500; background:var(--paper); border:2px solid var(--ink); border-radius:99px; padding:1px 10px}
.rc-tr{display:flex; align-items:center; gap:8px}
.rc-coin{display:flex; align-items:center; gap:5px; background:var(--paper); border:2.5px solid var(--ink); border-radius:99px; padding:3px 12px 3px 5px; box-shadow:0 3px 0 var(--ink)}
.rc-coin img{width:24px; height:24px}
.rc-coin b{font-size:18px; font-weight:600; min-width:1.2em; text-align:center; font-variant-numeric:tabular-nums}
.rc-iconbtn{pointer-events:auto; width:42px; height:42px; border-radius:13px; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 0 var(--ink); cursor:pointer; padding:0}
.rc-iconbtn svg{width:20px; height:20px}
.rc-iconbtn:focus-visible, .rc-btn:focus-visible, .rc-item:focus-visible, .rc-chip:focus-visible, .rc-kart:focus-visible, .rc-track:focus-visible{outline:3px solid #FFFFFF; outline-offset:2px}

.rc-ranks{position:absolute; left:10px; top:calc(112px + env(safe-area-inset-top, 0px)); display:flex; flex-direction:column; gap:4px}
.rc-rk{position:relative; width:34px; height:34px; border-radius:50%; background:#FFFFFF; border:2px solid var(--ink); overflow:hidden; opacity:.9}
.rc-rk img{position:absolute; left:50%; top:-2px; width:44px; transform:translateX(-50%)}
.rc-rk b{position:absolute; right:-1px; bottom:-1px; min-width:15px; height:15px; border-radius:8px; background:var(--ink); color:#fff; font-size:10px; line-height:15px; text-align:center}
.rc-rk.me{border-color:var(--mango); box-shadow:0 0 0 2.5px var(--ink); opacity:1; width:40px; height:40px}

.rc-map{position:absolute; right:12px; top:calc(60px + env(safe-area-inset-top, 0px)); width:84px; height:84px; border-radius:16px;
  background:rgba(15,23,32,.30); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}   /* แผนที่ย่อใต้เหรียญ/ปุ่มพัก */
.rc-q{position:absolute; left:58px; right:12px; top:calc(152px + env(safe-area-inset-top, 0px)); max-width:420px; margin-left:auto;
  background:var(--paper); border:2.5px solid var(--ink); border-radius:16px; padding:7px 12px 9px; box-shadow:0 4px 0 var(--ink); text-align:center}
.rc-q .k{font-size:12.5px; color:var(--ink2)}
.rc-q .w{font-size:17px; font-weight:600; line-height:1.3; margin:1px 0 6px}
.rc-q .lanes{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.rc-q .ln{display:flex; flex-direction:column; align-items:center; background:var(--c); border:2px solid var(--ink); border-radius:10px; padding:2px 4px 3px}
.rc-q .ln i{font-style:normal; font-size:11px; color:var(--ink2)}
.rc-q .ln b{font-size:14px; font-weight:600; line-height:1.2}
.rc-q.rc-ans.ok{border-color:#0E6B45; box-shadow:0 4px 0 #0E6B45}
.rc-q.rc-ans.no{border-color:#9A2A22; box-shadow:0 4px 0 #9A2A22}
.rc-q.rc-ans .ln{opacity:.45}
.rc-q.rc-ans .ln.right{opacity:1; box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--ink)}

.rc-toasts{position:absolute; left:0; right:0; top:38%; display:flex; flex-direction:column; align-items:center; gap:6px}
.rc-toast{display:flex; flex-direction:column; align-items:center; background:var(--paper); border:2.5px solid var(--ink); border-radius:14px; padding:4px 14px 6px;
  box-shadow:0 3px 0 var(--ink); animation:rcPop .25s cubic-bezier(.2,1.5,.5,1) both; transition:opacity .3s ease, transform .3s ease; max-width:88%}
.rc-toast b{font-size:19px; font-weight:600; line-height:1.3}
.rc-toast span{font-size:12.5px; color:var(--ink2); text-align:center}
.rc-toast.good{background:#DDF5E9} .rc-toast.bad{background:#FFE3E0} .rc-toast.item{background:#FFF1CC} .rc-toast.lap{background:var(--mango)}
.rc-toast.bye{opacity:0; transform:translateY(-10px)}
@keyframes rcPop{from{opacity:0; transform:scale(.6)}}

.rc-items{position:absolute; right:14px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); display:flex; align-items:flex-end; gap:8px}
.rc-item{pointer-events:auto; position:relative; width:74px; height:74px; border-radius:50%; border:3px solid var(--ink); background:rgba(255,253,247,.55);
  box-shadow:0 4px 0 var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; touch-action:none}
.rc-item.has{background:var(--mango); animation:rcItem 1.2s ease-in-out infinite}
.rc-item.sub{width:52px; height:52px; order:-1; pointer-events:none}
.rc-item img{width:72%; height:72%; object-fit:contain}
.rc-item .q{font-size:26px; font-weight:600; color:var(--ink2)}
.rc-item .nm{position:absolute; bottom:-19px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:500;
  background:var(--ink); color:#FFFFFF; border-radius:8px; padding:0 7px}
.rc-item.sub .nm{display:none}
@keyframes rcItem{50%{transform:scale(1.06)}}

.rc-hint{position:absolute; left:14px; right:100px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); font-size:12.5px; line-height:1.45;
  color:#FFFFFF; background:rgba(22,32,42,.72); border-radius:12px; padding:6px 10px; transition:opacity .5s ease}
.rc-hint.bye{opacity:0}
.rc-count{position:absolute; left:0; right:0; top:28%; text-align:center; font-size:96px; font-weight:600; color:#FFFFFF; line-height:1;
  -webkit-text-stroke:7px var(--ink); paint-order:stroke fill; text-shadow:0 6px 0 var(--ink); opacity:0}
.rc-count.on{opacity:1; animation:rcCount .9s ease-out infinite}
.rc-count.go{opacity:1; color:var(--mango); animation:rcGo .7s ease-out forwards}
@keyframes rcCount{0%{transform:scale(1.4)}40%{transform:scale(1)}}
@keyframes rcGo{0%{transform:scale(.6)}40%{transform:scale(1.15)}100%{transform:scale(1.3); opacity:0}}
.rc-thumb{position:absolute; width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%; border:2.5px dashed rgba(255,255,255,.75); background:rgba(22,32,42,.18)}
.rc-thumb::after{content:""; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  background:rgba(255,255,255,.85); border:2.5px solid var(--ink); transform:translateX(var(--dx, 0px))}

/* ---------- หน้าจอซ้อน ---------- */
.rc-screens{position:absolute; inset:0; z-index:10; pointer-events:none}
.rc-screen{position:absolute; inset:0; pointer-events:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px)); background:rgba(15,23,32,.35)}
.rc-card{margin:auto 0; background:var(--paper); border:3px solid var(--ink); border-radius:22px; box-shadow:0 6px 0 var(--ink); padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:12px; width:100%}
.rc-card h2{font-family:"Mitr",sans-serif; font-size:20px; font-weight:600; margin:0; line-height:1.3}
.rc-kicker{font-family:"Mitr",sans-serif; font-size:13px; color:var(--ink2)}
.rc-btn{font-family:"Mitr",sans-serif; font-size:17px; font-weight:600; padding:11px 18px; border-radius:14px; border:3px solid var(--ink); background:var(--mango);
  color:var(--ink); box-shadow:0 4px 0 var(--ink); cursor:pointer}
.rc-btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink)}
.rc-btn.big{font-size:20px; padding:13px 18px; width:100%}
.rc-btn.ghost{background:#FFFFFF}
.rc-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rc-fine{font-size:12px; color:var(--ink2); margin:0; text-align:center}

.rc-title{background:linear-gradient(180deg, rgba(15,23,32,.2), rgba(15,23,32,.55))}
.rc-cover{display:block; width:100%; border:3px solid var(--ink); border-radius:20px; box-shadow:0 6px 0 var(--ink); margin-bottom:12px}
.rc-logo{font-family:"Mitr",sans-serif; font-size:clamp(28px, 8.4vw, 38px); font-weight:600; margin:0; line-height:1.15; color:var(--chili);
  -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; text-shadow:0 4px 0 var(--ink); letter-spacing:.01em}
.rc-how{margin:0; padding:0 0 0 20px; display:flex; flex-direction:column; gap:4px; font-size:15px; line-height:1.5}

.rc-pick .rc-card{gap:10px; margin-bottom:0}
.rc-chars{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.rc-chip{display:flex; flex-direction:column; align-items:center; gap:0; background:#FFFFFF; border:2.5px solid var(--ink); border-radius:14px; padding:6px 4px 4px; cursor:pointer;
  font-family:"Mitr",sans-serif; font-size:13.5px; color:var(--ink)}
.rc-chip img{height:70px; width:auto; max-width:100%; object-fit:contain}
.rc-chip.on{background:var(--mango); box-shadow:0 3px 0 var(--ink)}
.rc-karts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rc-kart{display:grid; grid-template-columns:62px 1fr; gap:6px; align-items:center; text-align:left; background:#FFFFFF; border:2.5px solid var(--ink); border-radius:14px;
  padding:6px 8px; cursor:pointer; color:var(--ink)}
.rc-kart img{width:62px; height:56px; object-fit:contain}
.rc-kart .tx b{display:block; font-family:"Mitr",sans-serif; font-size:13.5px; font-weight:600; line-height:1.25; margin-bottom:2px}
.rc-kart .st{display:flex; flex-direction:column; gap:1px}
.rc-kart .sr{display:grid; grid-template-columns:36px 1fr; align-items:center; gap:4px; font-size:10.5px; color:var(--ink2)}
.rc-kart .sr i{font-style:normal}
.rc-kart .bar{display:flex; gap:2px}
.rc-kart .bar em{flex:1; height:5px; border-radius:2px; background:#E1E7EC}
.rc-kart .bar em.on{background:var(--teal)}
.rc-kart.on{background:#FFF1CC; box-shadow:0 3px 0 var(--ink)}
.rc-note{font-size:14px; margin:0; color:var(--ink2); line-height:1.5}
.rc-tracks{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.rc-track{position:relative; min-height:64px; border:2.5px solid var(--ink); border-radius:14px; background-size:cover; background-position:center 70%;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:6px 8px; cursor:pointer; overflow:hidden; text-align:left}
.rc-track::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,32,0) 20%, rgba(15,23,32,.72))}
.rc-track b, .rc-track span{position:relative; color:#FFFFFF; font-family:"Mitr",sans-serif; text-shadow:0 1px 2px rgba(0,0,0,.6)}
.rc-track b{font-size:14.5px; font-weight:600; line-height:1.2}
.rc-track span{font-size:11.5px}
.rc-track.on{box-shadow:0 0 0 3px var(--mango), 0 3px 0 5px var(--ink)}
.rc-dock{position:sticky; bottom:-18px; margin:4px -16px -18px; padding:12px 16px 16px; background:var(--paper); border-top:2px solid var(--ink); border-radius:0 0 19px 19px}

.rc-pausebox .rc-card{gap:10px}
.rc-result .rc-card{gap:10px}
.rc-rhead{display:flex; align-items:center; gap:12px}
.rc-rchar{width:92px; height:auto; flex:0 0 auto}
.rc-bigplace{font-size:32px !important; color:var(--chili); -webkit-text-stroke:4px var(--ink); paint-order:stroke fill; text-shadow:0 3px 0 var(--ink)}
.rc-sub{font-size:13.5px; color:var(--ink2); line-height:1.45}
.rc-best{align-self:flex-start; font-family:"Mitr",sans-serif; font-size:13px; background:var(--mango); border:2px solid var(--ink); border-radius:99px; padding:1px 10px}
.rc-mini{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px}
.rc-mini div{text-align:center; border:2px solid var(--ink); border-radius:12px; padding:6px 2px; background:#FFFFFF}
.rc-mini b{display:block; font-family:"Mitr",sans-serif; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums}
.rc-mini span{font-size:11.5px; color:var(--ink2)}
.rc-standings{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; counter-reset:p}
.rc-standings li{counter-increment:p; display:grid; grid-template-columns:22px 34px 1fr auto; grid-template-rows:auto auto; column-gap:8px; align-items:center;
  padding:5px 6px; border-top:1.5px dashed #D5DEE5}
.rc-standings li:first-child{border-top:0}
.rc-standings li::before{content:counter(p); grid-row:span 2; font-family:"Mitr",sans-serif; font-weight:600; font-size:16px; text-align:center}
.rc-standings li img{grid-row:span 2; width:34px; height:34px; object-fit:cover; object-position:top; border-radius:50%; border:2px solid var(--ink); background:#FFFFFF}
.rc-standings .n{font-family:"Mitr",sans-serif; font-size:14px}
.rc-standings .k{grid-column:3; font-size:11.5px; color:var(--ink2)}
.rc-standings .t{grid-column:4; grid-row:1 / span 2; font-family:"Mitr",sans-serif; font-size:13px; font-variant-numeric:tabular-nums}
.rc-standings li.me{background:#FFF1CC; border-radius:10px}
.rc-missed{display:flex; flex-direction:column; gap:4px; border:2px dashed #D5DEE5; border-radius:12px; padding:8px 10px}
.rc-missed p{margin:0; font-size:14px; line-height:1.45}
.rc-missed b{font-family:"Mitr",sans-serif; font-weight:500}

@media (prefers-reduced-motion: reduce){
  .rc-stage.rc-shake, .rc-item.has, .rc-count.on, .rc-count.go, .rc-toast{animation:none}
}

/* จอแคบ (≤ 380 px): การ์ดรถกระชับขึ้น แถบค่าพลังไม่บีบจนอ่านไม่ออก */
@media (max-width:380px){
  .rc-kart{grid-template-columns:46px 1fr; padding:5px 6px; gap:5px}
  .rc-kart img{width:46px; height:44px}
  .rc-kart .sr{grid-template-columns:32px 1fr; font-size:10px}
  .rc-chip img{height:60px}
}

/* ปุ่มเพลง/เสียง */
.rc-soundbar{position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:12px; z-index:12; display:flex; gap:8px}
.rc-soundbar[hidden]{display:none}
.rc-snd.off{background:#E1E7EC; color:#6E7C89}
.rc-sndrow{display:flex; gap:10px; justify-content:center; align-items:center}
.rc-sndrow .rc-iconbtn{width:48px; height:48px}
.rc-title .rc-card, .rc-pick .rc-card{margin-top:auto}
.rc-title{padding-top:calc(64px + env(safe-area-inset-top, 0px))}
.rc-pick{padding-top:calc(64px + env(safe-area-inset-top, 0px))}


/* ---------- v0.3: โหมด · แซว · โพเดียม · ถ้วย ---------- */
.rc-modes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px}   /* minmax(0,…): คำไทยยาวห้ามดันคอลัมน์ขวาล้นกรอบ (จอ 360 เคยเกิน 27px) */
.rc-mode{display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; background:#FFFFFF; border:2.5px solid var(--ink); border-radius:14px; padding:7px 10px; cursor:pointer; color:var(--ink)}
.rc-mode b{font-family:"Mitr",sans-serif; font-size:15px; font-weight:600; line-height:1.25}
.rc-mode span{font-size:11.5px; color:var(--ink2); line-height:1.35}
.rc-mode.on{background:var(--mango); box-shadow:0 3px 0 var(--ink)}
.rc-mode:focus-visible{outline:3px solid #FFFFFF; outline-offset:2px}
.rc-tracks.cup .rc-track{cursor:default}
.rc-tracks.cup .rc-track.on{box-shadow:0 0 0 2px var(--mango)}

.rc-q .k{line-height:1.4}
.rc-q.t-price .lanes .ln b, .rc-q.t-real .lanes .ln b{font-size:13px; line-height:1.3}
.rc-q.t-price .w{display:none}
.rc-q.t-real .w{font-size:16.5px}

.rc-taunt{position:absolute; left:52px; top:44%; display:flex; align-items:flex-end; gap:6px; max-width:72%; animation:rcPop .25s cubic-bezier(.2,1.5,.5,1) both; transition:opacity .3s ease, transform .3s ease}
.rc-taunt img{width:52px; height:auto; flex:0 0 auto; filter:drop-shadow(0 3px 0 rgba(22,32,42,.5))}
.rc-taunt .tx{position:relative; background:#FFFFFF; border:2.5px solid var(--ink); border-radius:14px 14px 14px 4px; padding:4px 10px 6px; box-shadow:0 3px 0 var(--ink)}
.rc-taunt .tx b{display:block; font-size:11.5px; color:var(--ink2); font-weight:500}
.rc-taunt .tx span{font-size:15px; font-weight:600; line-height:1.3}
.rc-taunt.bye{opacity:0; transform:translateY(-8px)}
.rc-cfly{position:absolute; width:28px; height:28px; z-index:6; pointer-events:none; transition:transform .45s cubic-bezier(.3,.8,.4,1), opacity .45s ease}
.rc-item.rolling{animation:rcRoll .18s linear infinite; background:#FFF1CC}
.rc-item.rolling img{filter:saturate(1.3)}
@keyframes rcRoll{50%{transform:rotate(-6deg) scale(1.05)}}

.rc-podium{display:flex; justify-content:center; align-items:flex-end; gap:6px; margin-top:-2px}
.rc-podium .pc{display:flex; flex-direction:column; align-items:center; width:31%; max-width:120px}
.rc-podium .pc img{width:78%; height:auto; margin-bottom:-4px; filter:drop-shadow(0 4px 0 rgba(22,32,42,.35))}
.rc-podium .pc.p1 img{width:96%; animation:rcBounce 1.2s ease-in-out infinite}
.rc-podium .pc b{font-family:"Mitr",sans-serif; font-size:13px; font-weight:600; margin:2px 0}
.rc-podium .pc.me b{color:var(--chili)}
.rc-podium .step{width:100%; border:2.5px solid var(--ink); border-radius:10px 10px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:4px}
.rc-podium .step span{font-family:"Mitr",sans-serif; font-weight:600; font-size:22px; line-height:1; color:#FFFFFF; -webkit-text-stroke:3px var(--ink); paint-order:stroke fill}
.rc-podium .step i{font-style:normal; font-family:"Mitr",sans-serif; font-size:12px; margin-top:2px}
.rc-podium .p1 .step{height:74px; background:linear-gradient(180deg,#FFE27A,#FFC23D)}
.rc-podium .p2 .step{height:54px; background:linear-gradient(180deg,#F1F4F7,#C9D3DE)}
.rc-podium .p3 .step{height:40px; background:linear-gradient(180deg,#F2C49B,#D9925A)}
@keyframes rcBounce{50%{transform:translateY(-6px)}}
.rc-confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.rc-confetti i{position:absolute; top:-14px; width:8px; height:13px; border-radius:2px; animation:rcConf 3s linear infinite}
@keyframes rcConf{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
.rc-result .rc-card{position:relative; z-index:1}
.rc-trophy{align-self:center; width:96px; height:96px; animation:rcBounce 1.4s ease-in-out infinite}
.rc-trophy svg{width:100%; height:100%}
.rc-cupfinal .rc-card{text-align:center; align-items:stretch}
@media (prefers-reduced-motion: reduce){ .rc-podium .pc.p1 img, .rc-trophy, .rc-item.rolling, .rc-confetti i{animation:none} }
.rc-result{padding-top:calc(64px + env(safe-area-inset-top, 0px))}

/* ตัวละครลับ */
.rc-chars{grid-template-columns:repeat(3, 1fr)}
.rc-chip.locked{background:#2B3440; color:#FFFFFF; border-style:dashed; cursor:default; justify-content:center; min-height:104px; gap:2px; padding:6px 4px}
.rc-chip.locked .qm{font-family:"Mitr",sans-serif; font-size:30px; font-weight:600; line-height:1; color:var(--mango)}
.rc-chip.locked small{font-family:"IBM Plex Sans Thai",sans-serif; font-size:10.5px; line-height:1.35; color:#C9D3DE; text-align:center}
.rc-chip.locked.soon{background:#FFF1CC; color:var(--ink); border-style:solid}
.rc-chip.locked.soon small{color:var(--ink2)}
.rc-chip.secret{background:linear-gradient(180deg,#FFFFFF,#FFF1CC)}
.rc-unlock{display:flex; align-items:center; gap:12px; background:var(--mango); border:3px solid var(--ink); border-radius:16px; padding:8px 12px; box-shadow:0 4px 0 var(--ink); animation:rcPop .4s cubic-bezier(.2,1.5,.5,1) both}
.rc-unlock .pic{width:64px; height:64px; flex:0 0 auto; border-radius:14px; background:#FFFFFF; border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden}
.rc-unlock .pic img{width:100%; height:100%; object-fit:contain}
.rc-unlock .pic span{font-family:"Mitr",sans-serif; font-size:34px; font-weight:600}
.rc-unlock b{display:block; font-family:"Mitr",sans-serif; font-size:19px; font-weight:600; line-height:1.25}
.rc-unlock span{font-size:12.5px; line-height:1.4}
.rc-podium .p1 .step{height:84px} .rc-podium .p2 .step{height:64px} .rc-podium .p3 .step{height:54px}
.rc-track.rc-cup{grid-column:span 1; min-height:86px}
.rc-track.rc-cup span{font-size:11px; line-height:1.35}
.rc-trophy img{width:100%; height:100%; object-fit:contain}
/* ทีม TIBD: แถบสีประจำตัวใต้ชื่อ (สีเดียวกับแถบแขนเสื้อ) */
.rc-sub{font-family:"Mitr",sans-serif; font-size:15px; font-weight:600; margin:2px 0 -2px; display:flex; align-items:center; gap:8px}
.rc-sub::after{content:""; flex:1; height:2px; background:var(--ink); opacity:.15; border-radius:2px}
.rc-chip.team{background:linear-gradient(180deg,#FFFFFF 70%,#E3F6F3)}
.rc-chip.team span{border-bottom:4px solid var(--tc, var(--teal, #15AE9F)); border-radius:2px; padding:0 4px 1px}
.rc-chip.team.on{background:var(--mango)}
/* Avatar ของคนที่ล็อกอิน */
.rc-chip.team{position:relative}
.rc-chip.team.mine{box-shadow:0 0 0 3px var(--teal), 0 3px 0 3px var(--ink)}
.rc-chip.team .you{position:absolute; top:4px; right:4px; font-style:normal; font-family:"Mitr",sans-serif; font-size:11px; line-height:1; background:var(--teal); color:#FFFFFF; border:2px solid var(--ink); border-radius:99px; padding:2px 6px}
/* โลโก้ TIBD (ไฟล์จริง) */
.rc-kickrow{display:flex; align-items:center; gap:8px}
.rc-brand{width:36px; height:36px; flex:0 0 auto; border-radius:50%; box-shadow:0 0 0 2px var(--ink)}
.rc-trophy{position:relative}
.rc-trophy .rc-trophy-logo{position:absolute; left:50%; bottom:6%; width:30%; height:auto; transform:translateX(-50%); border-radius:50%; box-shadow:0 0 0 2px var(--ink)}
/* ป้ายความยากบนการ์ดคำถาม */
.rc-q .k .lv{display:inline-block; font-family:"Mitr",sans-serif; font-size:11px; font-weight:600; line-height:1.4; border:1.5px solid var(--ink); border-radius:99px; padding:0 7px; margin-right:6px; vertical-align:1px}
.rc-q .k .lv-easy{background:#9ED67A} .rc-q .k .lv-medium{background:var(--mango)} .rc-q .k .lv-hard{background:#FF8A7A}
.rc-note.rc-preview{font-size:12px; margin-top:-2px}

/* ท่าทางทีม (art-poses.js) */
.rc-rk img.face{left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%; transform:none}
.rc-face{position:absolute; left:10px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); width:96px; pointer-events:none; filter:drop-shadow(0 3px 0 rgba(22,32,42,.45))}
.rc-face img{display:block; width:100%; height:auto}
.rc-face.pop{animation:rcFacePop .3s cubic-bezier(.2,1.5,.5,1) both}
.rc-face.bye{opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease}
@keyframes rcFacePop{from{opacity:0; transform:translateY(34px) scale(.7)} to{opacity:1; transform:none}}
.rc-q.has-face{padding-right:68px}
.rc-qface{position:absolute; right:5px; bottom:5px; height:calc(100% - 10px); max-height:124px; width:auto; max-width:62px; object-fit:contain; object-position:50% 100%; pointer-events:none}
.rc-turn{display:flex; justify-content:center; align-items:flex-end; height:170px; margin:8px 0 2px}
.rc-turn img{height:100%; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 4px 0 rgba(22,32,42,.25))}
@media (prefers-reduced-motion: reduce){ .rc-face.pop{animation:none} }
/* หน้าเลือกรถ: แท่นหมุนโชว์รถ + คนขับ · ปุ่มรถมีคนขับนั่ง */
.rc-kshow{height:210px; margin:4px 0 2px}
.rc-kshow canvas{display:block; width:100%; height:100%}
.rc-kart canvas{width:62px; height:56px; object-fit:contain}
@media (max-width:380px){ .rc-kart canvas{width:46px; height:44px} .rc-kshow{height:190px} }

/* ---------- หน้าเลือก: แถวปัดซ้ายขวา (แทนตารางยาว) · ลูกศรกระพริบบอกว่าเลื่อนต่อได้ ---------- */
.rc-hrow{position:relative; margin:0 -16px}
.rc-hscroll{display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  padding:6px 16px 10px; scroll-padding:0 16px; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y}
.rc-hscroll::-webkit-scrollbar{display:none}
.rc-hscroll > *{flex:0 0 auto; scroll-snap-align:start}
.rc-hscroll.rc-chars > *{width:calc((100% - 24px) / 3.4)}
.rc-hscroll.rc-karts > *{width:calc((100% - 16px) / 2.5)}
.rc-hscroll.rc-tracks > *{width:calc((100% - 8px) / 2.25)}
.rc-hscroll.rc-tracks.cup > *{width:calc((100% - 8px) / 1.35)}
/* การ์ดรถในแถว: รูปบน ชื่อ แล้วค่าพลัง */
.rc-hscroll .rc-kart{grid-template-columns:1fr; justify-items:stretch; gap:4px; padding:6px 8px 8px}
.rc-hscroll .rc-kart canvas, .rc-hscroll .rc-kart img{width:100%; height:74px; object-fit:contain}
.rc-hscroll .rc-kart .tx b{min-height:2.5em; text-align:center}
@media (max-width:380px){
  .rc-hscroll .rc-kart{grid-template-columns:1fr; padding:5px 6px 7px}
  .rc-hscroll .rc-kart canvas, .rc-hscroll .rc-kart img{width:100%; height:64px}
}
/* ขอบแถวจางลง + ลูกศรกระพริบ (มีให้ปัดทางไหนก็โชว์ทางนั้น) */
.rc-hrow::before, .rc-hrow::after{content:""; position:absolute; top:0; bottom:10px; width:34px; pointer-events:none; z-index:1; opacity:0; transition:opacity .2s}
.rc-hrow::before{left:0; background:linear-gradient(90deg, var(--paper), rgba(255,255,255,0))}
.rc-hrow::after{right:0; background:linear-gradient(270deg, var(--paper), rgba(255,255,255,0))}
.rc-hrow.can-l::before, .rc-hrow.can-r::after{opacity:1}
.rc-swipe{position:absolute; top:50%; z-index:2; width:34px; height:34px; margin-top:-22px; padding:0; border-radius:50%; border:2.5px solid var(--ink);
  background:var(--mango); color:var(--ink); box-shadow:0 2px 0 var(--ink); display:none; align-items:center; justify-content:center; cursor:pointer}
.rc-swipe svg{width:18px; height:18px}
.rc-swipe.r{right:4px}
.rc-swipe.l{left:4px}
.rc-swipe.l svg{transform:scaleX(-1)}
.rc-hrow.can-r .rc-swipe.r{display:flex; animation:rc-nudge-r 1.1s ease-in-out infinite}
.rc-hrow.can-l .rc-swipe.l{display:flex; animation:rc-nudge-l 1.1s ease-in-out infinite}
@keyframes rc-nudge-r{0%, 100%{opacity:1; transform:translateX(0)} 50%{opacity:.7; transform:translateX(5px)}}
@keyframes rc-nudge-l{0%, 100%{opacity:1; transform:translateX(0)} 50%{opacity:.7; transform:translateX(-5px)}}
/* เลื่อนลง: ป้ายกระพริบเหนือปุ่มออกสตาร์ต */
.rc-dock{position:sticky; z-index:4}   /* ลูกศรปัดของแถวรถ (z 2) ต้องมุดใต้แถบปุ่มออกสตาร์ต */
.rc-more{position:absolute; left:50%; top:-46px; transform:translateX(-50%); display:none; align-items:center; gap:4px; padding:5px 12px 5px 8px;
  border-radius:999px; border:2.5px solid var(--ink); background:var(--mango); color:var(--ink); box-shadow:0 2px 0 var(--ink);
  font-family:"Mitr",sans-serif; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; white-space:nowrap}
.rc-more svg{width:16px; height:16px; transform:rotate(90deg)}
.rc-pick.can-down .rc-more{display:flex; animation:rc-bob 1.1s ease-in-out infinite}
@keyframes rc-bob{0%, 100%{transform:translate(-50%, 0); background:var(--mango)} 50%{transform:translate(-50%, 5px); background:#FFE08A}}
@media (prefers-reduced-motion: reduce){ .rc-swipe, .rc-more, .rc-pick.can-down .rc-more, .rc-hrow.can-r .rc-swipe.r, .rc-hrow.can-l .rc-swipe.l{animation:none} }

/* ---------- จับเวลา: อันดับทีม + เลือกรถผีของเพื่อน ---------- */
.rc-hscroll.rc-ghosts > *{width:calc((100% - 24px) / 3.3)}
.rc-gchip{position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; background:#FFFFFF; border:2.5px solid var(--ink); border-radius:14px;
  padding:7px 4px 6px; cursor:pointer; color:var(--ink); font-family:"Mitr",sans-serif; min-width:0}
.rc-gchip img, .rc-gchip .gi{width:50px; height:50px; border-radius:50%; border:2px solid var(--ink); background:#E6F6F3; object-fit:cover; object-position:50% 8%}
.rc-gchip .gi{display:flex; align-items:center; justify-content:center; border-style:dashed; color:var(--ink2); font-size:20px; background:#FFFFFF}
.rc-gchip b{font-size:13px; font-weight:600; line-height:1.25; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rc-gchip .gt{font-size:12px; color:var(--ink2); font-variant-numeric:tabular-nums; line-height:1.2}
.rc-gchip .rk{position:absolute; top:5px; left:7px; font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink2)}
.rc-gchip.mine img{border-color:var(--teal); box-shadow:0 0 0 2px var(--teal)}
.rc-gchip.on{background:var(--mango); box-shadow:0 3px 0 var(--ink)}
.rc-gchip.on .gt, .rc-gchip.on .rk{color:var(--ink)}
.rc-teamboard{display:flex; flex-direction:column; gap:6px}

/* ---------- แข่งสด: ห้องรอ ---------- */
.rc-btn:disabled{opacity:.55; cursor:default; box-shadow:none}
.rc-live{display:flex; flex-direction:column; gap:8px; padding:12px; border:2.5px solid var(--ink); border-radius:16px; background:#EAF7F4}
.rc-live .rc-sub{margin:0}
.rc-joinrow{display:grid; grid-template-columns:1fr auto; gap:8px}
.rc-code{min-width:0; font-family:"Mitr",sans-serif; font-size:20px; font-weight:600; letter-spacing:.3em; text-align:center; padding:8px 10px; border:2.5px solid var(--ink);
  border-radius:12px; background:#FFFFFF; color:var(--ink)}
.rc-code::placeholder{letter-spacing:0; font-size:15px; font-weight:500; color:#8A97A5}
.rc-code:focus-visible{outline:3px solid var(--teal); outline-offset:1px}
.rc-roomhead{display:flex; align-items:baseline; justify-content:center; gap:10px; font-family:"Mitr",sans-serif}
.rc-roomhead span{font-size:15px; color:var(--ink2)}
.rc-roomcode{font-size:38px; font-weight:700; letter-spacing:.14em; color:var(--ink); line-height:1.1}
.rc-liveplayers{display:flex; flex-direction:column; gap:6px}
.rc-lp{display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:8px; background:#FFFFFF; border:2px solid var(--ink); border-radius:12px; padding:5px 8px}
.rc-lp img{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 8%; border:2px solid var(--ink); background:#E6F6F3}
.rc-lp .tx{display:flex; flex-direction:column; min-width:0}
.rc-lp .tx b{font-family:"Mitr",sans-serif; font-size:14px; font-weight:600; line-height:1.25}
.rc-lp .tx span{font-size:12px; color:var(--ink2); line-height:1.3}
.rc-lp em{font-style:normal; font-size:11px; font-weight:600; background:var(--mango); border:1.5px solid var(--ink); border-radius:999px; padding:1px 7px; white-space:nowrap}
.rc-lp.me{background:#FFF1CC}
.rc-lp.empty{grid-template-columns:1fr; border-style:dashed; background:transparent; color:#8A97A5; text-align:center; font-size:12.5px; padding:9px}
.rc-err{margin:0; color:#B42318; font-weight:600; font-size:13.5px}

/* ป้ายบริษัท (TIBD · VISBIO) ข้างชื่อ */
.rc-org{display:inline-block; margin-left:5px; padding:1px 6px; border-radius:999px; background:var(--oc, #15AE9F); color:#FFFFFF;
  font-family:"Mitr",sans-serif; font-style:normal; font-size:10px; font-weight:600; line-height:1.4; letter-spacing:.02em; vertical-align:middle}
.rc-gchip .rc-org{margin:1px 0 0}
.rc-org.rc-bottag{background:#5C6370}   /* บอทเติมกริดในแข่งสด */

/* ---------- การ์ดบริการ: แถบสีตามหมวดบริการ · ชื่อพลัง (มุก) · บริการจริง + ราคาจากรายการราคา ---------- */
.rc-hscroll.rc-svcs > *{width:calc((100% - 16px) / 2.3)}
.rc-svc{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; background:#FFFFFF; border:2.5px solid var(--ink); border-radius:14px;
  padding:0 0 8px; overflow:hidden; cursor:pointer; color:var(--ink); font-family:inherit}
.rc-svc .g{align-self:stretch; background:var(--gc); border-bottom:2px solid var(--ink); font-size:11.5px; font-weight:600; line-height:1.3; padding:3px 8px}
.rc-svc b{font-family:"Mitr",sans-serif; font-size:15px; font-weight:600; line-height:1.25; padding:2px 8px 0}
.rc-svc .fx{font-size:12px; line-height:1.4; color:var(--ink2); padding:0 8px}
.rc-svc .real{align-self:stretch; font-size:11.5px; font-weight:500; line-height:1.35; padding:5px 8px 0; margin-top:auto; border-top:1.5px dashed #C9D3DB}
.rc-svc .pr{font-size:11px; color:var(--ink2); padding:0 8px}
.rc-svc.on{background:#FFF1CC; box-shadow:0 3px 0 var(--ink)}
.rc-svc:focus-visible{outline:3px solid #FFFFFF; outline-offset:2px}
.rc-cardb{font-size:12px; font-weight:600; line-height:1.5; background:var(--mango); border:2px solid var(--ink); border-radius:99px; padding:0 9px}
.rc-hud:has(.rc-q:not([hidden])) .rc-cardb{visibility:hidden}   /* กล่องคำถามทับป้ายการ์ด → ซ่อนป้ายระหว่างมีคำถาม */
.rc-cardmemo{display:flex; flex-direction:column; gap:1px; background:#F3F7FA; border:2px solid var(--ink); border-radius:12px; padding:7px 10px; margin-top:8px; font-size:13px; line-height:1.45}
.rc-cardmemo b{font-family:"Mitr",sans-serif; font-weight:600}

/* สีแถบแขน Avatar ผู้เล่น (เว็บสาธารณะ fdathailand.co · opts.colors) */
.rc-swatches{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0 4px}
.rc-swatches .lbl{font-size:13px; color:var(--ink2); margin-right:2px}
.rc-sw{width:30px; height:30px; border-radius:50%; border:2.5px solid var(--ink); background:var(--sw); padding:0; cursor:pointer}
.rc-sw.on{box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--ink)}
.rc-swatches.busy{opacity:.55; pointer-events:none}

/* ลิงก์ไปหน้าบริการบนการ์ด (เว็บสาธารณะ · opts.svcLink) */
div.rc-svc{cursor:pointer}
.rc-svc a.lnk{display:inline-block; margin:2px 8px 0; padding:3px 0; font-size:11.5px; font-weight:600; color:#0B5CAD; text-decoration:underline; text-underline-offset:2px}
.rc-cardmemo a.lnk{display:inline-block; margin-top:3px; font-size:12px; font-weight:600; color:#0B5CAD; text-decoration:underline}

/* ห้องสาธารณะ: นับถอยหลังเริ่มเอง (เว็บ · LIVE.quick) */
.rc-live .rc-autoin{margin:4px 0 2px; font-family:"Mitr",sans-serif; font-size:16px; font-weight:600; color:#B35400}