/* ===== TEEKAN theme: "night court" look carried over from the original หมูแบดซิ่ง app =====
   deep court-blue · cyan = team A · smash-red = team B · gold = victory · Chakra Petch + IBM Plex Sans Thai */
:root{
  --bg:#060a1c;--bg2:#0c1238;--card:#111a4c;--card2:#1a2566;
  --line:rgba(130,160,255,.18);--line2:rgba(130,160,255,.3);
  --fg:#eef1ff;--fg2:#c4cbef;--mut:#8e9ad2;--dim:#5a6598;
  --cyan:#2fe6ff;--orange:#ff4d2e;--gold:#ffcf3a;
  --a:#2fe6ff;--b:#ff4d2e;--good:#5dffa0;--bad:#ff5d7a;--panel:#111a4c;--panel-hi:#1a2566;
  --hot:linear-gradient(95deg,#ffcf3a,#ff8a2e 55%,#ff4d2e);
  --pnl:linear-gradient(180deg,rgba(26,37,102,.78),rgba(14,21,66,.78));
  --f-disp:"Chakra Petch","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai","Chakra Petch",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{background:var(--bg);font-family:var(--f-body)}
button,input,select,textarea{font-family:inherit}
#app{position:relative;z-index:1}

/* ambient arena background */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(70% 38% at 88% -4%,rgba(255,77,46,.38),transparent 70%),radial-gradient(55% 32% at -5% 12%,rgba(47,230,255,.22),transparent 70%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%)}
.bgfx::after{content:"";position:absolute;left:-60%;right:-60%;bottom:-12%;height:55%;
  background-image:linear-gradient(rgba(47,230,255,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(47,230,255,.20) 1px,transparent 1px);
  background-size:64px 64px;transform:perspective(380px) rotateX(64deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(transparent,#000 75%);mask-image:linear-gradient(transparent,#000 75%);animation:floor 3.2s linear infinite}
@keyframes floor{to{background-position:0 64px,0 0}}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-110vh);opacity:0}}

/* display type */
.h1,.h2,.kicker,.btn,.chip,.lv,.datebox b,.datebox span,.pcard .mmr,.pcard .tier,.stepper span,.seg button,.ctabs a,.nav a,
.btn-go,.btn-ghost,.h-big,.sec-t,.eyebrow,.vs-label,.vs-x,.tpow,.prob-l,.live-head,.c2,.tinfo,.rrow .sc,.rrow .gn,.resume .sc,.so-top,.clock,
.half .dg,.half .tap,.minus,.vsbar .v,.gp,.banner,.floater,.vic .big,.vic .fs,.vic .tags span,.dl .d,.sea .sn,.pod .blk,.lrow .rk,.lrow .pts,
.rules b,.pchips button,.fcard .ini,.fcard .ovr,.fcard .fs,.fcard .fw,.rkb,.stat b,.opts button,.ci-bar .cnt,#livebar .lb-s,.tchip,#sheet.gs h3,
.dchip b,.tsel select,.arena-cta b,[style*="font-style:italic"]{font-family:var(--f-disp)}
.h1{font-style:italic;letter-spacing:.01em}
.kicker{letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.logo{font-family:Kanit,var(--f-disp)!important}

/* surfaces */
.card,.list,.note,.gpanel{background:var(--pnl);border-color:var(--line)}
.card{border-radius:14px}
.list>*{border-bottom-color:var(--line)}
.input,.inp,.ptext{background:rgba(6,10,28,.6);border-color:var(--line2)}
.input:focus,.inp:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(47,230,255,.15)}
#sheet{background:rgba(2,4,14,.7)}
#sheet .box{background:linear-gradient(180deg,var(--panel-hi),var(--panel));border-color:var(--line)}
.empty{border-color:var(--line2);background:rgba(17,26,76,.35)}
.iconbtn{background:rgba(255,255,255,.04);border-color:var(--line)}
.av.ph{background:var(--card2)}
.clubmark{background:var(--hot);color:#1a0700}
.datebox{background:rgba(47,230,255,.1)}
.msgprev{background:rgba(6,10,28,.6);border-color:var(--line)}
#toast{background:var(--fg);color:var(--bg);font-weight:600}

/* buttons */
.btn{border-radius:10px;border-color:var(--line);background:rgba(255,255,255,.04);font-weight:600;letter-spacing:.02em}
.btn:active{background:rgba(255,255,255,.1)}
.btn.primary,.btn-go{background:var(--hot);border:0;color:#1a0700;font-weight:700;font-style:italic;letter-spacing:.04em;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);border-radius:0;box-shadow:0 0 24px rgba(255,120,40,.45);position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:shine 2.6s ease-in-out infinite;pointer-events:none}
.btn.primary:disabled::after{display:none}
.btn.primary:disabled{filter:grayscale(1) brightness(.55);box-shadow:none}
.btn.hot{background:var(--b);border-color:var(--b);color:#1a0700}
.btn.danger,.btn-ghost.danger{color:var(--bad);border-color:rgba(255,93,122,.4)}
.btn.line{clip-path:none;border-radius:10px}
.stepper button{background:var(--card2)}

/* selections */
.seg{background:rgba(6,10,28,.6);border-color:var(--line);border-radius:12px}
.seg button.on{background:var(--panel-hi);color:var(--fg);box-shadow:0 0 0 1px var(--line) inset}
.opt,.pick,.fchip,.dchip{background:rgba(6,10,28,.4);border-color:var(--line)}
.opt.on,.pick.on,.fchip.on,.dchip.on{border-color:var(--a);background:rgba(47,230,255,.1)}
.switch{background:var(--dim)}
.switch.on{background:var(--a)}
.chip{background:rgba(17,26,76,.8);border:1px solid var(--line)}
.chip.cyan,.chip.orange,.chip.gold{border-color:transparent}
.chip.orange{background:rgba(255,77,46,.16);color:#ff7a5c}
.live{background:rgba(255,77,46,.1);border-color:rgba(255,77,46,.4)}
.badge{background:var(--b);color:#1a0700}
.bar{background:rgba(255,255,255,.08)}
.bar>i{background:linear-gradient(90deg,var(--a),var(--gold));box-shadow:0 0 10px var(--a)}

/* club header + tabs (old app header feel) */
.chead{line-height:1.2}
.chn{font-family:var(--f-disp);font-weight:700;font-style:italic;font-size:21px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead small{display:block;font-size:11px;letter-spacing:.14em;color:var(--a);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clubmark{box-shadow:0 0 14px rgba(255,120,60,.35)}
.ctabs{background:linear-gradient(rgba(6,10,28,.92) 78%,rgba(6,10,28,0))}
.ctabs a{background:rgba(6,10,28,.55);border-color:var(--line);color:var(--mut);font-weight:600;letter-spacing:.03em}
.ctabs a.on{background:rgba(255,207,58,.1);border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(255,207,58,.25) inset}
.arena-cta{background:linear-gradient(115deg,rgba(47,230,255,.18),rgba(17,26,76,.7) 45%,rgba(255,77,46,.2));border-color:rgba(47,230,255,.35)}
.arena-cta .ac-go{background:var(--hot);color:#1a0700;box-shadow:0 0 18px rgba(255,120,40,.5)}

/* bottom nav: gold active like the original */
.nav{background:rgba(8,12,34,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top-color:var(--line)}
.nav a{position:relative;color:var(--mut);font-weight:500}
.nav a.on{color:var(--fg);font-weight:600}
.nav a.on svg{color:var(--gold);filter:drop-shadow(0 0 6px rgba(255,207,58,.8))}
.nav a.on::before{content:"";position:absolute;top:-9px;left:28%;right:28%;height:2px;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* game bits that used TEEKAN tokens */
.g .h-big span{background:linear-gradient(90deg,var(--gold),var(--b));-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px rgba(255,120,40,.35))}
.tbar i{background:linear-gradient(90deg,var(--a),var(--gold));box-shadow:0 0 10px var(--a)}
.ci-bar{background:linear-gradient(180deg,#1a2566,#111a4c)}
.fcard{--tc:#d08a4e}
.fcard .in{background:radial-gradient(130% 70% at 50% 0%,color-mix(in srgb,var(--tc) 45%,#0c1238) 0%,#0a0f30 75%)}
.fcard.add .in{background:rgba(17,26,76,.4)}
#livebar{background:linear-gradient(90deg,#ff4d2e,#ff8a2e)}
.vsbar{background:linear-gradient(90deg,#0a1440,#060a1c 40%,#060a1c 60%,#2a0d14)}
.ov{background:var(--bg)}
.vic{background:rgba(4,6,18,.92)}
.vic .big{background:linear-gradient(180deg,#fff 10%,var(--gold) 55%,#ff8a2e);-webkit-background-clip:text;background-clip:text}
.crop-ov{background:#04060f}
@media (prefers-reduced-motion:reduce){.bgfx::after{animation:none}.spark{display:none}}

.fcard .fs{font-family:var(--f-body);letter-spacing:0;font-size:7cqw}
.fcard .fs b{font-family:var(--f-disp)}
.legend b{color:var(--fg2)}
.lv-PK{background:#3A2442;color:#FFA6D9}

/* skill levels */
.lv{font-family:var(--f-disp)}
.lvb-a{background:#3A2442;color:#FFA6D9}.lvb-b{background:#14334C;color:#7FD3FF}.lvb-c{background:#4A1F1A;color:#FF8C70}.lvb-d{background:#173D2E;color:#7DF5C8}
.lvlist{display:flex;flex-direction:column;gap:6px}
.lvrow{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:center;width:100%;text-align:left;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(6,10,28,.4);color:var(--fg);font-family:inherit;cursor:pointer}
.lvrow .lv{justify-self:start;min-width:56px;height:28px;font-size:13px}
.lvrow .lvt{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.lvrow .lvt b{font-size:14px;font-weight:600}
.lvrow .lvt small{font-size:12px;color:var(--mut)}
.lvrow.on{border-color:var(--gold);background:rgba(255,207,58,.08);box-shadow:0 0 0 1px var(--gold) inset}
.lvrow.none .lv{background:rgba(255,255,255,.06);color:var(--mut)}
.lvmore{display:flex;flex-direction:column;gap:6px}
.lvmore summary{cursor:pointer;font-size:13px;color:var(--mut);padding:6px 4px;list-style:none}
.lvmore summary::before{content:"▸ "}
.lvmore[open] summary::before{content:"▾ "}
.lvmore[open]{display:flex}
.lvmore>.lvrow{margin-top:6px}