@charset "utf-8";
/* =========================================================
   Tournament Brackets - design system
   ========================================================= */
:root{
  --ink:#e9ecf8;
  --ink-dim:#9aa3c4;
  --ink-faint:#5f688a;
  --bg:#07070f;
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);
  --stroke-2:rgba(255,255,255,.18);
  --v1:#8b5cf6;   /* violet */
  --v2:#d946ef;   /* fuchsia */
  --v3:#22d3ee;   /* cyan   */
  --win:#34d399;
  --bad:#fb7185;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
/* the UA rule for [hidden] is display:none, which ANY author display beats -
   several components below set display:flex, so hidden needs to win outright */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,.cname,.title-input{font-family:Outfit,Inter,"Segoe UI",system-ui,sans-serif}
h2{font-size:17px;font-weight:600;margin:0;letter-spacing:-.2px}
button{font:inherit}
input{font:inherit;color:inherit}
::selection{background:rgba(139,92,246,.4)}

/* ---------- animated backdrop ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -20%, #14142b 0%, #07070f 60%)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.b1{width:52vw;height:52vw;left:-10vw;top:-14vw;background:radial-gradient(circle,#7c3aed,transparent 70%);animation:drift1 26s var(--ease) infinite alternate}
.b2{width:46vw;height:46vw;right:-12vw;top:6vh;background:radial-gradient(circle,#d946ef,transparent 70%);opacity:.36;animation:drift2 32s var(--ease) infinite alternate}
.b3{width:44vw;height:44vw;left:22vw;bottom:-22vw;background:radial-gradient(circle,#0ea5e9,transparent 70%);opacity:.34;animation:drift3 28s var(--ease) infinite alternate}
.grid{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 30%,transparent 75%);
}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-10vw,10vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(6vw,-8vh,0) scale(1.18)}}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* ---------- glass surface ---------- */
.glass{
  position:relative;
  background:linear-gradient(160deg,var(--glass),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 22px;
  background:linear-gradient(180deg,rgba(7,7,15,.86),rgba(7,7,15,.55));
  border-bottom:1px solid var(--stroke);
  backdrop-filter:blur(14px);
  animation:dropIn .6s var(--ease) both;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px)}}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{
  display:grid;place-items:center;width:30px;height:30px;
  filter:drop-shadow(0 4px 16px rgba(167,139,250,.5));
  animation:bob 4.5s ease-in-out infinite;
}
.logo svg{width:26px;height:26px}
@keyframes bob{50%{transform:translateY(-4px) rotate(-6deg)}}
.title-input{
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:21px;font-weight:800;letter-spacing:-.4px;padding:6px 10px;
  width:min(44vw,340px);
  background-image:linear-gradient(92deg,#fff,#c4b5fd 45%,#67e8f9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.title-input:hover{border-color:var(--stroke)}
.title-input:focus{outline:none;border-color:rgba(139,92,246,.7);background-color:rgba(255,255,255,.04)}

.tabs{position:relative;display:flex;gap:4px;padding:5px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.tab{
  position:relative;z-index:1;display:flex;align-items:center;gap:8px;
  background:transparent;border:0;color:var(--ink-dim);cursor:pointer;
  padding:8px 18px;border-radius:var(--r-sm);font-weight:600;
  transition:color .25s var(--ease),transform .25s var(--spring);
}
.tab:hover{color:var(--ink)}
.tab:active{transform:scale(.96)}
.tab.is-active{color:#fff}
.tab-ico{font-size:14px}
.tab-glider{
  position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:0;border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(139,92,246,.85),rgba(217,70,239,.7));
  box-shadow:0 6px 22px -6px rgba(139,92,246,.9);
  transition:transform .45s var(--spring),width .45s var(--spring);
}
.topbar-actions{margin-left:auto;display:flex;gap:8px}

.pill{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:rgba(255,255,255,.1);border:1px solid var(--stroke);color:var(--ink);
  transition:transform .3s var(--spring);
}
.pill.bump{transform:scale(1.35)}
.chip{
  font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink-dim);padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);
}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  border-radius:var(--r-sm);border:1px solid var(--stroke-2);
  background:rgba(255,255,255,.06);color:var(--ink);
  padding:10px 16px;cursor:pointer;font-weight:600;
  transition:transform .3s var(--spring),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:transform .6s var(--ease);
}
.btn:hover{background:rgba(255,255,255,.12);border-color:var(--stroke-2);transform:translateY(-2px)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--v1),var(--v2) 60%,#f472b6);
  box-shadow:0 12px 30px -12px rgba(168,85,247,.9);
}
.btn.primary:hover{box-shadow:0 18px 40px -14px rgba(168,85,247,1)}
.btn.ghost{background:rgba(255,255,255,.03);border-color:var(--stroke)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.danger{color:#ffc2cb;border-color:rgba(251,113,133,.35)}
.btn.danger:hover{background:rgba(251,113,133,.16)}
.btn.wide{width:100%;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn .arrow{transition:transform .35s var(--spring)}
.btn.wide:hover .arrow{transform:translateX(5px)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn[disabled]::after{display:none}

.icon-btn{
  width:30px;height:30px;border-radius:9px;line-height:1;cursor:pointer;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--ink-dim);
  transition:transform .25s var(--spring),color .2s,background .2s,border-color .2s;
}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,.14);transform:translateY(-2px)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.del:hover{background:rgba(251,113,133,.22);border-color:rgba(251,113,133,.5);color:#ffd9df}
.icon-btn[disabled]{opacity:.3;cursor:not-allowed}

/* ---------- layout ---------- */
main{padding:26px 22px 70px;max-width:1560px;margin:0 auto}
.view{display:none}
.view.is-active{display:block;animation:viewIn .5s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.995)}}
.layout{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.form-card,.list-card{padding:22px;animation:cardIn .6s var(--ease) both;animation-delay:calc(var(--i,0)*.09s + .05s)}
@keyframes cardIn{from{opacity:0;transform:translateY(22px)}}
.form-card{position:sticky;top:92px}
@media (max-width:900px){.form-card{position:static}}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.card-head h2{display:flex;align-items:center;gap:9px}
.head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- form ---------- */
.field{display:block;margin-bottom:16px}
.field span{
  display:block;font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:7px;
}
.field input,.p-name{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.field input::placeholder,.p-name::placeholder{color:var(--ink-faint)}
.field input:focus,.p-name:focus{
  outline:none;background:rgba(255,255,255,.07);
  border-color:rgba(139,92,246,.8);box-shadow:0 0 0 4px rgba(139,92,246,.16);
}
.players{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
/* solo entrants get a single, centred slot */
.players.solo{grid-template-columns:minmax(0,220px);justify-content:center}
.player{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.p-name{text-align:center}

.photo-drop{
  position:relative;width:96px;height:96px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(circle at 30% 25%,rgba(139,92,246,.28),transparent 60%),
    rgba(255,255,255,.04);
  border:2px dashed rgba(255,255,255,.22);
  color:var(--ink-dim);font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  transition:transform .35s var(--spring),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.photo-drop .photo-hint{display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.photo-drop .photo-hint b{font-size:20px;line-height:1}
.photo-drop:hover,.photo-drop:focus-visible{
  transform:translateY(-3px) scale(1.05);outline:none;
  border-color:rgba(217,70,239,.8);color:#fff;
  box-shadow:0 16px 34px -16px rgba(217,70,239,.9);
}
.photo-drop.dragover{border-color:var(--v3);box-shadow:0 0 0 6px rgba(34,211,238,.18)}
.photo-drop .preview{display:none;width:100%;height:100%;object-fit:cover}
.photo-drop.has-photo{border-style:solid;border-color:rgba(255,255,255,.5)}
.photo-drop.has-photo .preview{display:block;animation:photoIn .5s var(--spring) both}
.photo-drop.has-photo .photo-hint{display:none}
@keyframes photoIn{from{opacity:0;transform:scale(1.35)}}
.photo-drop .ring{
  position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  border:2px solid rgba(217,70,239,.55);opacity:0;
}
.photo-drop:hover .ring{animation:ringPulse 1.6s var(--ease) infinite}
@keyframes ringPulse{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.22)}}
.photo-clear{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;line-height:1;cursor:pointer;
  background:rgba(0,0,0,.6);border:1px solid var(--stroke-2);color:#fff;
  transition:background .2s,transform .25s var(--spring);
}
.photo-clear:hover{background:var(--bad);transform:scale(1.15)}

.hint{font-size:12.5px;color:var(--ink-faint);margin:10px 0 16px}
.form-actions{display:flex;gap:10px}
.error{color:#ffc2cb;font-size:13px;margin:12px 0 0;animation:shake .4s var(--ease)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ---------- team list ---------- */
.team-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.team-row{
  display:grid;grid-template-columns:32px auto 1fr auto;align-items:center;gap:14px;
  padding:11px 13px;border-radius:var(--r-md);cursor:grab;
  background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid var(--stroke);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),border-color .25s,opacity .25s;
}
/* only rows that just arrived animate in; reorders glide via FLIP instead */
.team-row.fresh{animation:rowIn .45s var(--ease) both;animation-delay:calc(var(--i,0)*.045s)}
.team-row.fresh.now{animation-delay:0s}
@keyframes rowIn{from{opacity:0;transform:translateX(-16px)}}
.team-row:hover{transform:translateY(-3px);border-color:var(--stroke-2);box-shadow:0 16px 34px -22px rgba(139,92,246,.95)}
.team-row.dragging{opacity:.35;cursor:grabbing;transform:scale(.98)}
.team-row.drop-above{box-shadow:inset 0 3px 0 var(--v3)}
.team-row.drop-below{box-shadow:inset 0 -3px 0 var(--v3)}
.seed{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,rgba(139,92,246,.85),rgba(217,70,239,.6));
  box-shadow:0 6px 16px -8px rgba(139,92,246,.9);
}
.avatars{display:flex}
.avatars img,.avatars .ph{
  width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(12,12,24,.9);background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-dim);
  transition:transform .3s var(--spring);
}
.avatars>*+*{margin-left:-12px}
.team-row:hover .avatars img,.team-row:hover .avatars .ph{transform:translateY(-2px) scale(1.06)}
.team-row:hover .avatars>*+*{margin-left:-6px}
.team-meta{min-width:0}
.team-meta .tn{font-weight:650;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team-meta .pn{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-actions{display:flex;gap:5px;opacity:.45;transition:opacity .25s var(--ease)}
.team-row:hover .row-actions{opacity:1}

.empty{
  text-align:center;color:var(--ink-faint);font-size:14px;
  padding:34px 18px;border:1px dashed var(--stroke);border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.empty-ico{font-size:28px;opacity:.85;animation:bob 5s ease-in-out infinite}

/* ---------- bracket ---------- */
.bracket-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:18px;
}
.bracket-info{color:var(--ink-dim);font-size:13px;font-weight:500}
.zoom{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-dim);
  padding:2px 4px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.zoom span{min-width:38px;text-align:center;font-variant-numeric:tabular-nums}

.bracket-scroll{overflow:auto;padding:10px 6px 26px;scrollbar-color:rgba(255,255,255,.2) transparent}
.bracket-zoom{transform-origin:top left;width:max-content;transition:zoom .25s var(--ease)}
.bracket{position:relative;display:flex;gap:64px;align-items:stretch;width:max-content;min-width:100%}
.connectors{position:absolute;inset:0;pointer-events:none;overflow:visible}
.connectors path{stroke-linejoin:round;fill:none;stroke-width:2}
.connectors path.draw{animation:drawIn .9s var(--ease) both;animation-delay:calc(var(--d,0)*.05s + .15s)}
@keyframes drawIn{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.connectors path.flow{
  stroke:rgba(52,211,153,.85);stroke-dasharray:7 9;
  animation:flow 1.1s linear infinite;
  filter:drop-shadow(0 0 5px rgba(52,211,153,.5));
}
@keyframes flow{to{stroke-dashoffset:-32}}

/* two rows: every round label lands on the same baseline, matches fill below */
.round{display:grid;grid-template-rows:auto 1fr;gap:14px;min-width:250px;position:relative;z-index:1}
.round-body{display:flex;flex-direction:column;justify-content:space-around;gap:16px}
.round-label{
  text-align:center;font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ink-faint);
}
.round-label b{
  display:inline-block;padding:5px 13px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);color:var(--ink-dim);font-weight:800;
}
.round:last-child .round-label b{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--v1),var(--v2));
  box-shadow:0 8px 22px -10px rgba(139,92,246,.95);
}

.match{
  border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid var(--stroke);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.95);
  animation:matchIn .55s var(--ease) both;animation-delay:calc(var(--d,0)*.05s);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);
}
.no-anim .match,.no-anim .team-row,.no-anim .connectors path{animation:none}
@keyframes matchIn{from{opacity:0;transform:translateY(18px) scale(.96)}}
.match:hover{transform:translateY(-4px);border-color:var(--stroke-2);box-shadow:0 26px 50px -26px rgba(139,92,246,.85)}
.match.decided{border-color:rgba(52,211,153,.28)}
.match-head{
  display:flex;justify-content:space-between;gap:8px;
  padding:6px 12px;font-size:9.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink-faint);background:rgba(0,0,0,.28);border-bottom:1px solid var(--stroke);
}
.match-head .st{color:var(--ink-dim)}
.match.live .match-head .st{color:#fff}
.match.live .match-head .st::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;
  background:var(--v2);box-shadow:0 0 0 0 rgba(217,70,239,.7);animation:ping 1.8s var(--ease) infinite;
}
.match-head .st:empty::before{margin-right:0}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(217,70,239,0)}100%{box-shadow:0 0 0 0 rgba(217,70,239,0)}}

.slot{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;
  width:100%;padding:9px 12px;text-align:left;color:inherit;cursor:pointer;
  background:transparent;border:0;border-left:3px solid transparent;
  transition:background .25s var(--ease),opacity .25s var(--ease),border-color .25s var(--ease),transform .25s var(--spring);
}
.slot+.slot{border-top:1px solid var(--stroke)}
.slot:hover:not(.empty){background:rgba(255,255,255,.09)}
.slot:active:not(.empty){transform:scale(.985)}
.slot .av{display:flex}
.slot .av img,.slot .av .ph{
  width:32px;height:32px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(12,12,24,.9);background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-dim);
  transition:transform .3s var(--spring)}
.slot .av>*+*{margin-left:-10px}
.slot:hover .av img,.slot:hover .av .ph{transform:scale(1.08)}
.slot .info{min-width:0}
.slot .name{font-weight:650;font-size:14px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .sub{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .mark{font-size:13px;font-weight:800;color:transparent}
.slot.winner{
  border-left-color:var(--win);
  background:linear-gradient(90deg,rgba(52,211,153,.20),rgba(52,211,153,.03));
}
.slot.winner .mark{color:var(--win);animation:markPop .45s var(--spring) both}
@keyframes markPop{from{opacity:0;transform:scale(.2) rotate(-25deg)}}
.slot.loser{opacity:.38}
.slot.empty{cursor:default}
.slot.empty .name{font-style:italic;font-weight:500;color:var(--ink-faint)}
.slot.pop{animation:pickPop .55s var(--spring)}
@keyframes pickPop{30%{transform:scale(1.035)}}

/* ---------- the win celebration ---------- */
.slot.flash{animation:winGlow .8s var(--ease) both}
@keyframes winGlow{
  0%{box-shadow:inset 0 0 0 0 rgba(52,211,153,.6)}
  28%{box-shadow:inset 0 0 44px -2px rgba(52,211,153,.5)}
  100%{box-shadow:inset 0 0 0 0 rgba(52,211,153,0)}
}
.slot.flash::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(52,211,153,.42),transparent);
  transform:translateX(-100%);animation:winSweep .8s var(--ease) both;
}
@keyframes winSweep{to{transform:translateX(100%)}}
.slot.flash .av>*{animation:hop .6s var(--spring) both}
.slot.flash .av>*:last-child{animation-delay:.07s}
@keyframes hop{35%{transform:translateY(-8px) scale(1.12)}70%{transform:translateY(0) scale(1.02)}}
.slot.flash .name{animation:nudge .6s var(--spring) both}
@keyframes nudge{40%{transform:translateX(4px)}}

/* the winner arriving in the next round */
.slot.arrive{animation:arriveIn .75s var(--spring) both}
@keyframes arriveIn{
  0%{background:rgba(52,211,153,.4);transform:scale(1.05)}
  60%{background:rgba(52,211,153,.12)}
  100%{background:transparent;transform:none}
}
.connectors circle.travel{fill:#6ee7b7;filter:drop-shadow(0 0 9px rgba(52,211,153,.95))}

/* trace a team through the bracket on hover */
.bracket.tracing .slot:not(.trace){opacity:.22}
.bracket.tracing .match:not(:has(.trace)){filter:saturate(.5)}
.slot.trace{background:rgba(139,92,246,.22);border-left-color:var(--v2)}

/* ---------- champion ---------- */
.champion{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:20px;
  padding:20px 24px;margin-bottom:20px;border-radius:var(--r-lg);
  background:linear-gradient(110deg,rgba(139,92,246,.26),rgba(217,70,239,.10) 52%,rgba(34,211,238,.18));
  border:1px solid rgba(167,139,250,.42);
  box-shadow:0 26px 60px -34px rgba(139,92,246,.9);
  animation:champIn .7s var(--spring) both;
}
@keyframes champIn{from{opacity:0;transform:translateY(-16px) scale(.97)}}
.champion::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:shine 4.5s var(--ease) infinite;
}
@keyframes shine{0%{left:-60%}55%,100%{left:130%}}
.champion .cup{
  display:grid;place-items:center;width:52px;height:52px;cursor:pointer;
  animation:bob 3s ease-in-out infinite;
  filter:drop-shadow(0 6px 20px rgba(167,139,250,.55));
  transition:transform .3s var(--spring);
}
.champion .cup:hover{transform:scale(1.12)}
.champion .cup svg{width:46px;height:46px}
.champion .lbl{font-size:10.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#c4b5fd}
.champion .cname{font-size:26px;font-weight:800;letter-spacing:-.6px}
.champion .cplayers{font-size:13px;color:var(--ink-dim)}
.champion .cav{display:flex;margin-left:auto}
.champion .cav img,.champion .cav .ph{
  width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(167,139,250,.75);background:rgba(255,255,255,.08);
  display:grid;place-items:center;font-weight:800;color:var(--ink-dim);
}
.champion .cav>*+*{margin-left:-16px}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:28px;z-index:90;
  transform:translate(-50%,26px);opacity:0;pointer-events:none;
  padding:11px 20px;border-radius:99px;font-size:14px;font-weight:500;
  background:rgba(20,20,38,.92);border:1px solid var(--stroke-2);
  box-shadow:0 20px 50px -22px rgba(0,0,0,1);backdrop-filter:blur(10px);
  transition:opacity .3s var(--ease),transform .45s var(--spring);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- points counter ---------- */
.points-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:18px;
}
.step-switch{display:flex;gap:4px;padding:4px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.step-opt{
  padding:6px 13px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  background:transparent;color:var(--ink-dim);font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;
  transition:color .2s,background .2s,transform .25s var(--spring);
}
.step-opt:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.step-opt:active{transform:scale(.94)}
.step-opt.is-on{color:#fff;background:linear-gradient(135deg,var(--v1),var(--v2));border-color:transparent}

.scoreboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.score-card{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;
  padding:15px 16px;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--glass),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 46px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  animation:cardIn .55s var(--ease) both;animation-delay:calc(var(--i,0)*.05s);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),border-color .25s var(--ease);
}
.scoreboard.no-anim .score-card{animation:none}
.score-card:hover{transform:translateY(-3px);box-shadow:0 26px 54px -28px rgba(139,92,246,.8)}
.score-card.leader{
  border-color:rgba(167,139,250,.6);
  box-shadow:0 24px 54px -28px rgba(139,92,246,.95), inset 0 1px 0 rgba(255,255,255,.09);
}
.sc-crown{
  position:absolute;top:-10px;left:16px;
  font-size:9.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#fff;
  padding:3px 9px;border-radius:99px;
  background:linear-gradient(135deg,var(--v1),var(--v2));
  box-shadow:0 6px 16px -8px rgba(139,92,246,.95);
  animation:popIn .4s var(--spring) both;
}
@keyframes popIn{from{opacity:0;transform:scale(.5)}}
.sc-id{display:flex;align-items:center;gap:12px;min-width:0}
.sc-disc{display:grid;place-items:center}
.sc-eq{display:none}
.sc-name{min-width:0}
.sc-name b{display:block;font-weight:650;font-size:15px;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-name span{display:block;font-size:11.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sc-value{
  width:106px;padding:2px 4px;text-align:center;
  font-family:Outfit,Inter,sans-serif;font-size:36px;font-weight:800;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
  background:transparent;border:1px solid transparent;border-radius:12px;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .3s var(--ease);
}
.sc-value::-webkit-outer-spin-button,.sc-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sc-value{-moz-appearance:textfield;appearance:textfield}
.sc-value:hover{border-color:var(--stroke)}
.sc-value:focus{outline:none;border-color:var(--v2);background:rgba(255,255,255,.06)}
.sc-value.up{animation:ptsUp .55s var(--spring)}
.sc-value.down{animation:ptsDown .55s var(--spring)}
@keyframes ptsUp{0%{transform:scale(1)}35%{transform:scale(1.28) translateY(-4px);color:var(--win)}100%{transform:none}}
@keyframes ptsDown{0%{transform:scale(1)}35%{transform:scale(.82) translateY(3px);color:var(--bad)}100%{transform:none}}

.sc-steps{display:grid;gap:6px}
.step{
  width:46px;height:34px;border-radius:11px;cursor:pointer;line-height:1;
  font-size:19px;font-weight:800;
  border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--ink);
  transition:transform .22s var(--spring),background .2s,border-color .2s,color .2s;
}
.step:hover{transform:translateY(-2px)}
.step:active{transform:scale(.88)}
.step.up:hover{background:rgba(52,211,153,.22);border-color:var(--win)}
.step.down:hover{background:rgba(251,113,133,.2);border-color:var(--bad)}

[data-theme="kart"] .step-switch{background:#fff3dc;border:2px solid var(--stroke)}
[data-theme="kart"] .step-opt.is-on{background:linear-gradient(180deg,#ff6b6b,var(--v1));border-color:var(--stroke)}
[data-theme="kart"] .score-card{
  background:#fff;border:3px solid var(--stroke);backdrop-filter:none;
  box-shadow:0 6px 0 0 rgba(23,26,51,.85);
}
[data-theme="kart"] .score-card:hover{transform:translateY(-3px);box-shadow:0 9px 0 0 rgba(23,26,51,.85)}
[data-theme="kart"] .score-card.leader{box-shadow:0 6px 0 0 rgba(23,26,51,.85), 0 0 0 4px rgba(255,217,61,.55)}
[data-theme="kart"] .sc-value{font-family:"Baloo 2",Outfit,sans-serif}
[data-theme="kart"] .step{
  background:#fff;border:2.5px solid var(--stroke);box-shadow:0 3px 0 0 rgba(23,26,51,.8);
}
[data-theme="kart"] .step:active{transform:translateY(2px);box-shadow:none}
[data-theme="kart"] .sc-crown{border:2px solid var(--stroke);background:linear-gradient(180deg,#ffd93d,#ffb347);color:#3d2600}

/* ---------- commander life counter ---------- */
.life-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:14px;
}
.life-bar .pts-rules label{cursor:pointer}
.use-entrants{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint);
  padding:6px 12px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);cursor:pointer;
}
.use-entrants input{width:15px;height:15px;accent-color:var(--v1);cursor:pointer}
.use-entrants:has(input:disabled){opacity:.45;cursor:not-allowed}

.life-grid{
  display:grid;gap:10px;
  height:min(74vh,860px);
}
.life-grid[data-count="2"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.life-grid[data-count="3"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.life-grid[data-count="3"] .life-panel:nth-child(3){grid-column:span 2}
.life-grid[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.life-grid[data-count="5"],.life-grid[data-count="6"]{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.life-grid[data-count="5"] .life-panel:nth-child(5){grid-column:span 2}
@media (max-width:700px){
  /* keep the seats side by side on a phone - that is the whole point of a table
     counter - and fill the real viewport height (dvh dodges the browser chrome) */
  .life-grid{height:calc(100dvh - 210px);min-height:420px;gap:7px}
  .life-grid[data-count="2"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .life-grid .cmd-strip{gap:4px}
}

/* if container query units are unavailable, drop the rotation rather than collapse */
@supports not (width:100cqh){
  .life-panel.rot-90 .life-inner,.life-panel.rot-270 .life-inner{
    width:100%;height:100%;transform:translate(-50%,-50%);
  }
}

.life-panel{
  container-type:size;                 /* lets the rotated face swap w/h in cq units */
  position:relative;overflow:hidden;
  border-radius:var(--r-md);
  background:var(--seat-bg);
  color:var(--seat-ink);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.life-panel.down{filter:saturate(.35) brightness(.7)}

.life-inner{
  position:absolute;top:50%;left:50%;
  width:100cqw;height:100cqh;
  transform:translate(-50%,-50%);
  display:grid;grid-template-rows:auto 1fr auto;
}
.life-panel.rot-180 .life-inner{transform:translate(-50%,-50%) rotate(180deg)}
.life-panel.rot-90 .life-inner{
  width:100cqh;height:100cqw;
  transform:translate(-50%,-50%) rotate(90deg);
}
.life-panel.rot-270 .life-inner{
  width:100cqh;height:100cqw;
  transform:translate(-50%,-50%) rotate(270deg);
}

.life-step{
  border:0;background:transparent;color:inherit;cursor:pointer;
  font-size:26px;font-weight:800;line-height:1;padding:10px 0;
  opacity:.75;transition:background .2s var(--ease),opacity .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.life-step:hover{background:rgba(255,255,255,.12);opacity:1}
.life-step:active{background:rgba(255,255,255,.2)}

.life-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0}
.life-name{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.6px;opacity:.85;
  max-width:90%;overflow:hidden;
}
.life-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.life-name .av{display:flex}
.life-name .av img,.life-name .av .ph{
  width:22px;height:22px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.5);background:rgba(0,0,0,.25);
  display:grid;place-items:center;font-size:8px;font-weight:700;
}
.life-name .av>*+*{margin-left:-6px}
.life-total{
  font-family:Outfit,Inter,sans-serif;
  font-size:clamp(44px,17cqmin,110px);font-weight:800;line-height:.95;
  letter-spacing:-2px;font-variant-numeric:tabular-nums;
  text-shadow:0 3px 10px rgba(0,0,0,.35);
}
.life-total.up{animation:lifeUp .5s var(--spring)}
.life-total.down-tick{animation:lifeDown .5s var(--spring)}
@keyframes lifeUp{35%{transform:translateY(-7px) scale(1.1)}}
@keyframes lifeDown{35%{transform:translateY(6px) scale(.92)}}
.life-out{
  font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.4);
}

.cmd-strip{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.cmd-chip{
  min-width:26px;height:22px;padding:0 5px;border-radius:7px;cursor:pointer;
  font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
  color:#fff;background:var(--from-bg);
  border:1px solid rgba(255,255,255,.35);
  opacity:.55;transition:opacity .2s,transform .2s var(--spring),box-shadow .2s;
}
.cmd-chip:hover{opacity:1;transform:translateY(-2px)}
.cmd-chip:active{transform:scale(.9)}
.cmd-chip.hit{opacity:1}
.cmd-chip.lethal{
  opacity:1;border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.6);
  animation:pulseLethal 1.4s ease-in-out infinite;
}
@keyframes pulseLethal{50%{box-shadow:0 0 0 5px rgba(255,255,255,.15)}}

/* ---------- darts ---------- */
.darts-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:18px;
}
#countdownPanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:20px;align-items:start}
@media (max-width:900px){#countdownPanel{grid-template-columns:1fr}}
.dart-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.dart-player{
  padding:16px;border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(150deg,var(--glass),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease),border-color .25s var(--ease);
}
.dart-player.active{
  border-color:var(--v1);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--v1) 45%, transparent), 0 20px 44px -28px rgba(0,0,0,.9);
  transform:translateY(-3px);
}
.dart-player.won{border-color:var(--win)}
.dp-name{font-size:13px;font-weight:700;letter-spacing:.4px;color:var(--ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-score{
  font-family:Outfit,Inter,sans-serif;font-size:52px;font-weight:800;line-height:1;
  letter-spacing:-2px;font-variant-numeric:tabular-nums;margin:4px 0 6px;
}
.dp-meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--ink-faint)}
.dp-meta .bust{color:var(--bad);font-weight:700}
.dp-finish{
  margin-top:8px;display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;
  background:color-mix(in srgb, var(--win) 22%, transparent);color:var(--win);
}
.throw-card{padding:18px}
.dart-entry{
  font-family:Outfit,Inter,sans-serif;font-size:46px;font-weight:800;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
  padding:8px 0 12px;color:var(--ink);
}
.quick-scores{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}
.quick-scores .quick{padding:6px 10px;font-variant-numeric:tabular-nums}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{
  padding:14px 0;border-radius:var(--r-sm);cursor:pointer;
  font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--ink);
  transition:transform .2s var(--spring),background .2s var(--ease);
}
.key:hover{background:rgba(255,255,255,.13)}
.key:active{transform:scale(.94)}
.key[disabled]{opacity:.4;cursor:not-allowed}
.key.wide{font-size:14px}
.key.enter{
  grid-column:span 3;font-size:15px;letter-spacing:.4px;
  background:linear-gradient(135deg,var(--v1),var(--v2));color:#fff;border-color:transparent;
}
.standings.mickey th.target-col{
  text-align:left;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:.4px;
  padding:9px 8px;border-top:1px solid var(--stroke);
}
.standings.mickey thead th{text-align:center;padding-bottom:12px}
.standings.mickey thead th.active{color:var(--v1)}
.standings.mickey td{text-align:center;padding:6px}
.mark{
  width:100%;min-width:42px;min-height:38px;padding:8px 0;border-radius:var(--r-sm);cursor:pointer;
  font-size:17px;font-weight:800;line-height:1.1;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);color:var(--ink);
  transition:background .2s var(--ease),transform .2s var(--spring),border-color .2s;
}
.mark:hover{background:rgba(255,255,255,.12)}
.mark:active{transform:scale(.92)}
.mark.part{border-color:var(--stroke-2)}
.mark.closed{
  background:color-mix(in srgb, var(--win) 24%, transparent);
  border-color:var(--win);color:var(--win);
}
.standings.mickey tr.special th.target-col{
  color:var(--v1);letter-spacing:.6px;
}
.standings.mickey tr.special{background:rgba(255,255,255,.03)}
.standings.mickey tr.special:first-of-type th.target-col{border-top:2px solid var(--stroke-2)}

.mickey-total th,.mickey-total td{
  font-weight:800;border-top:2px solid var(--stroke);font-variant-numeric:tabular-nums;
}
.mickey-total td.all{color:var(--win)}

/* ---------- collapsible top bar ---------- */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.bar-toggle{
  flex:none;width:34px;height:34px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--ink-dim);
  transition:background .2s var(--ease),color .2s var(--ease),transform .25s var(--spring);
}
.bar-toggle:hover{background:rgba(255,255,255,.14);color:var(--ink)}
.bar-toggle:active{transform:scale(.9)}
.chev{
  width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-135deg);margin-top:-3px;
  transition:transform .3s var(--spring),margin .3s var(--spring);
}
body.bar-collapsed .chev{transform:rotate(45deg);margin-top:-5px}

.topbar{transition:padding .3s var(--ease),gap .3s var(--ease)}
body.bar-collapsed .topbar{padding-top:6px;padding-bottom:6px;gap:10px}
body.bar-collapsed .brand,
body.bar-collapsed .topbar-actions{display:none}
/* one row when collapsed: the tab strip shrinks and scrolls, the toggle stays put */
body.bar-collapsed .topbar{flex-wrap:nowrap}
body.bar-collapsed .tabs{flex:1 1 auto;min-width:0;margin-right:0}
body.bar-collapsed .tab{padding:6px 13px;font-size:14px}
body.bar-collapsed .tab-ico{font-size:13px}

/* the counter grid gets the reclaimed height back */
body.bar-collapsed .life-grid{height:min(84vh,940px)}
@media (max-width:700px){
  body.bar-collapsed .life-grid{height:calc(100dvh - 140px)}
  body.bar-collapsed .tab{padding:7px 12px}
}

/* ---------- confirm dialog (native confirm() is unreliable in webviews) ---------- */
.modal{
  position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,4,12,.62);backdrop-filter:blur(6px);
  animation:fadeIn .22s var(--ease) both;
}
@keyframes fadeIn{from{opacity:0}}
.modal-card{
  width:min(420px,100%);padding:24px;text-align:left;
  animation:modalIn .4s var(--spring) both;
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
.modal-msg{font-family:Outfit,Inter,sans-serif;font-size:18px;font-weight:600;margin:0 0 6px}
.modal-sub{font-size:13px;color:var(--ink-faint);margin:0 0 20px}
.modal-sub:empty{margin-bottom:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.btn.solid-danger{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#fb7185,#e11d48);
  box-shadow:0 12px 28px -14px rgba(225,29,72,.95);
}
.btn.solid-danger:hover{filter:brightness(1.07)}
[data-theme="kart"] .modal{background:rgba(23,26,51,.55)}
[data-theme="kart"] .btn.solid-danger{
  background:linear-gradient(180deg,#ff6b81,#e11d48);border:2.5px solid var(--stroke);
  box-shadow:0 4px 0 0 rgba(23,26,51,.85);
}
[data-theme="kart"] .modal-sub{color:var(--ink-dim)}

/* leaving the line-up */
.team-row.removing{animation:rowOut .22s var(--ease) forwards;pointer-events:none}
@keyframes rowOut{to{opacity:0;transform:translateX(-26px) scale(.96)}}

/* ---------- theme switcher (teams page) ---------- */
.theme-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;margin-bottom:20px;
  animation:cardIn .6s var(--ease) both;
}
.theme-copy{display:flex;flex-direction:column;gap:2px}
.theme-copy b{font-family:Outfit,Inter,sans-serif;font-size:15px;font-weight:600}
.theme-copy span{font-size:12.5px;color:var(--ink-faint)}
.theme-switch{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.theme-opt{
  flex:0 0 auto;
  display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600;
  padding:7px 13px;border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--ink-dim);
  transition:color .25s var(--ease),background .25s var(--ease),transform .3s var(--spring),border-color .25s;
}
.theme-opt:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.theme-opt:active{transform:scale(.96)}
.theme-opt.is-on{color:var(--ink);background:rgba(255,255,255,.12);border-color:var(--stroke-2)}
.sw{width:22px;height:22px;border-radius:7px;border:1px solid rgba(0,0,0,.35);flex:none}
.sw-aurora{background:linear-gradient(135deg,#8b5cf6,#e879f9 55%,#22d3ee)}
.sw-kart{background:
  linear-gradient(135deg,#ff4757 0 33%,#ffd93d 33% 66%,#1d78ff 66% 100%)}
.sw-halloween{background:
  linear-gradient(135deg,#0d0714 0 30%,#ff7518 31% 66%,#7cb518 67% 100%)}
.sw-christmas{background:
  linear-gradient(135deg,#07231a 0 28%,#c1121f 29% 64%,#f4f7f2 65% 100%)}
.sw-newyear{background:
  linear-gradient(135deg,#05060c 0 30%,#e8eaf0 31% 62%,#4dabff 63% 100%)}
.sw-darts{background:
  conic-gradient(from 20deg,#0d1712 0 25%,#f2ead6 25% 50%,#c8102e 50% 75%,#1a7a44 75% 100%)}
.sw-beerpong{background:
  radial-gradient(circle at 50% 62%,#d0342c 0 34%,#7b4a24 35% 100%)}
.sw-mtg{background:
  linear-gradient(135deg,#171310 0 26%,#f3e9cf 27% 58%,#8c2f26 59% 100%)}
.sw-music{background:
  radial-gradient(circle at 50% 50%,#f1ebdf 0 12%,#e2482a 13% 34%,#17130f 35% 84%,#f1ebdf 85% 100%)}
.theme-opt .note-ico{display:inline-block}
.theme-opt.is-on .note-ico{animation:noteBob 1.8s var(--ease) infinite}
@keyframes noteBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-12deg)}}
.theme-opt .kart-ico{display:inline-block}
.theme-opt.is-on .kart-ico{animation:zoom 2.4s var(--ease) infinite}
@keyframes zoom{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(4px)}}

/* =========================================================
   GRAND PRIX SKIN - racing motifs, no third-party artwork
   ========================================================= */
[data-theme="kart"]{
  --ink:#171a33;
  --ink-dim:#4b5178;
  --ink-faint:#7c83aa;
  --bg:#8fdcff;
  --glass:#fffdf7;
  --glass-2:#fff;
  --stroke:#171a33;
  --stroke-2:#171a33;
  --v1:#ff4757;
  --v2:#1d78ff;
  --v3:#ffd93d;
  --win:#22c55e;
  --bad:#e63946;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:11px;
}
[data-theme="kart"] body{color:var(--ink)}
[data-theme="kart"] h1,[data-theme="kart"] h2,
[data-theme="kart"] .cname,[data-theme="kart"] .title-input,
[data-theme="kart"] .btn,[data-theme="kart"] .theme-copy b,
[data-theme="kart"] .round-label,[data-theme="kart"] .slot .name{
  font-family:"Baloo 2",Outfit,Inter,sans-serif;
}

/* sky, clouds, finish-line strip */
[data-theme="kart"] .aurora{
  background:linear-gradient(180deg,#6fd0ff 0%,#a5e4ff 40%,#e8f6ff 74%,#fffdf7 100%);
}
[data-theme="kart"] .blob{filter:blur(28px);opacity:.85;
  background:radial-gradient(circle,#fff 0 60%,rgba(255,255,255,0) 72%)}
[data-theme="kart"] .b1{width:34vw;height:16vw;left:4vw;top:8vh}
[data-theme="kart"] .b2{width:26vw;height:12vw;right:6vw;top:24vh;opacity:.75}
[data-theme="kart"] .b3{width:30vw;height:14vw;left:34vw;top:2vh;opacity:.7}
[data-theme="kart"] .grid{
  opacity:1;mask-image:none;-webkit-mask-image:none;
  background-image:repeating-linear-gradient(90deg,#171a33 0 46px,#fdfdfd 46px 92px);
  background-size:100% 30px;
  background-position:bottom center;
  background-repeat:repeat-x;
}
/* soft haze so the strip settles into the horizon instead of cutting it */
[data-theme="kart"] .grid::after{
  content:"";position:absolute;left:0;right:0;bottom:30px;height:56px;
  background:linear-gradient(180deg,rgba(255,253,247,0),rgba(255,253,247,.75));
}

/* cartoon panels: cream fill, hard outline, offset shadow */
[data-theme="kart"] .glass{
  background:var(--glass);
  border:3px solid var(--stroke);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 6px 0 0 rgba(23,26,51,.85), 0 18px 34px -22px rgba(23,26,51,.7);
}
[data-theme="kart"] .topbar{
  background:linear-gradient(180deg,#fffdf7,#fff2d8);
  border-bottom:3px solid var(--stroke);
  box-shadow:0 5px 0 0 rgba(23,26,51,.2);
}
[data-theme="kart"] .title-input{
  -webkit-text-fill-color:var(--ink);background-image:none;color:var(--ink);
}
[data-theme="kart"] .title-input:hover{border-color:var(--stroke)}
[data-theme="kart"] .title-input:focus{background-color:#fff;border-color:var(--v2)}
[data-theme="kart"] .logo{filter:none}
[data-theme="kart"] .logo svg{display:none}
[data-theme="kart"] .logo::before{content:"\1F3C1";font-size:24px;line-height:1}

[data-theme="kart"] .tabs{background:#fff3dc;border:2px solid var(--stroke)}
[data-theme="kart"] .tab{color:var(--ink-dim)}
[data-theme="kart"] .tab.is-active{color:#fff}
[data-theme="kart"] .tab-glider{
  background:linear-gradient(135deg,var(--v1),#ff7f50);
  box-shadow:0 3px 0 0 rgba(23,26,51,.75);
}
[data-theme="kart"] .pill,[data-theme="kart"] .chip{
  background:#fff;border:2px solid var(--stroke);color:var(--ink);font-weight:800;
}

[data-theme="kart"] .btn{
  background:#fff;border:2.5px solid var(--stroke);color:var(--ink);font-weight:700;
  box-shadow:0 4px 0 0 rgba(23,26,51,.85);
}
[data-theme="kart"] .btn:hover{background:#fff8e6;transform:translateY(-2px);box-shadow:0 6px 0 0 rgba(23,26,51,.85)}
[data-theme="kart"] .btn:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgba(23,26,51,.85)}
[data-theme="kart"] .btn.primary{
  background:linear-gradient(180deg,#ff6b6b,var(--v1));color:#fff;border-color:var(--stroke);
}
[data-theme="kart"] .btn.ghost{background:#fff}
[data-theme="kart"] .btn.danger{background:#ffe9ec;color:#b0212f;border-color:var(--stroke)}
[data-theme="kart"] .icon-btn{background:#fff;border:2px solid var(--stroke);color:var(--ink-dim);
  box-shadow:0 2px 0 0 rgba(23,26,51,.7)}
[data-theme="kart"] .icon-btn:hover{background:#fff3dc;color:var(--ink)}
[data-theme="kart"] .icon-btn:active{transform:translateY(2px);box-shadow:none}

[data-theme="kart"] .field input,[data-theme="kart"] .p-name{
  background:#fff;border:2.5px solid var(--stroke);font-weight:600;
}
[data-theme="kart"] .field input:focus,[data-theme="kart"] .p-name:focus{
  box-shadow:0 0 0 4px rgba(29,120,255,.22);border-color:var(--v2);background:#fff;
}
[data-theme="kart"] .field span{color:var(--ink-dim)}
[data-theme="kart"] .hint{color:var(--ink-dim)}

/* item-box style photo wells */
[data-theme="kart"] .photo-drop{
  background:#fff;border:3px dashed var(--v2);color:var(--ink-dim);
  box-shadow:0 4px 0 0 rgba(23,26,51,.35);
}
[data-theme="kart"] .photo-drop:hover{border-color:var(--v1);box-shadow:0 8px 0 0 rgba(23,26,51,.35)}
[data-theme="kart"] .photo-drop.has-photo{border:3px solid var(--stroke)}
[data-theme="kart"] .photo-drop .ring{border-color:rgba(255,71,87,.6)}

/* podium-coloured seed badges */
[data-theme="kart"] .seed{
  color:var(--ink);border:2px solid var(--stroke);font-weight:800;
  background:linear-gradient(180deg,#fff,#ffe9a8);box-shadow:0 2px 0 0 rgba(23,26,51,.7);
}
[data-theme="kart"] .team-row{
  background:#fff;border:2.5px solid var(--stroke);
  box-shadow:0 4px 0 0 rgba(23,26,51,.75);
}
[data-theme="kart"] .team-row:hover{background:#fffdf0;box-shadow:0 8px 0 0 rgba(23,26,51,.75)}
[data-theme="kart"] .avatars img,[data-theme="kart"] .avatars .ph,
[data-theme="kart"] .slot .av img,[data-theme="kart"] .slot .av .ph{
  border:2.5px solid var(--stroke);background:#fff3dc;color:var(--ink-dim);
}
[data-theme="kart"] .empty{border:3px dashed rgba(23,26,51,.4);color:var(--ink-dim);background:rgba(255,255,255,.5)}

/* the track */
[data-theme="kart"] .bracket-info b{color:var(--ink)}
[data-theme="kart"] .zoom{background:#fff;border:2px solid var(--stroke);color:var(--ink-dim)}
[data-theme="kart"] .round-label b{
  background:#fff;border:2.5px solid var(--stroke);color:var(--ink);letter-spacing:1.2px;
  box-shadow:0 3px 0 0 rgba(23,26,51,.75);
}
[data-theme="kart"] .round:last-child .round-label b{
  color:#fff;background:linear-gradient(135deg,var(--v1),#ff7f50);border-color:var(--stroke);
  box-shadow:0 3px 0 0 rgba(23,26,51,.75);
}
[data-theme="kart"] .match{
  background:#fff;border:2.5px solid var(--stroke);backdrop-filter:none;
  box-shadow:0 5px 0 0 rgba(23,26,51,.8);
}
[data-theme="kart"] .match:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 9px 0 0 rgba(23,26,51,.8)}
[data-theme="kart"] .match.decided{border-color:var(--stroke)}
[data-theme="kart"] .match-head{
  background:linear-gradient(180deg,#171a33,#2b2f52);color:#ffe9a8;
  border-bottom:2.5px solid var(--stroke);font-weight:800;
}
[data-theme="kart"] .match-head .st{color:#fff}
[data-theme="kart"] .slot+.slot{border-top:2px solid rgba(23,26,51,.25)}
[data-theme="kart"] .slot:hover:not(.empty){background:#fff6d9}
[data-theme="kart"] .slot.winner{
  background:linear-gradient(90deg,rgba(34,197,94,.28),rgba(34,197,94,.05));
  border-left-color:var(--win);
}
/* checkered flag stripe down the winner */
[data-theme="kart"] .slot.winner::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:
    repeating-conic-gradient(#171a33 0 25%, #fff 0 50%) 0 0/7px 7px;
}
[data-theme="kart"] .connectors path{stroke:rgba(23,26,51,.45);stroke-width:3}
[data-theme="kart"] .connectors path.flow{
  stroke:#fff;stroke-width:4;stroke-dasharray:12 10;
  filter:drop-shadow(0 0 0 transparent) drop-shadow(0 2px 0 rgba(23,26,51,.55));
}
[data-theme="kart"] .connectors text.travel{filter:drop-shadow(0 3px 4px rgba(23,26,51,.5))}

/* winner's circle */
[data-theme="kart"] .champion{
  background:
    repeating-conic-gradient(from 0deg,rgba(23,26,51,.14) 0 25%,rgba(255,255,255,.14) 0 50%) 0 0/26px 26px,
    linear-gradient(110deg,#ffd93d,#ffb347 55%,#ff7f50);
  border:3px solid var(--stroke);
  box-shadow:0 7px 0 0 rgba(23,26,51,.85), 0 22px 40px -26px rgba(23,26,51,.7);
}
[data-theme="kart"] .champion .lbl{color:#5a2b00}
[data-theme="kart"] .champion .cname,[data-theme="kart"] .champion .cplayers{color:#171a33}
[data-theme="kart"] .champion .cup svg{display:none}
[data-theme="kart"] .champion .cup{filter:none}
[data-theme="kart"] .champion .cup::before{content:"\1F3C1";font-size:40px;line-height:1}
[data-theme="kart"] .champion .cav img,[data-theme="kart"] .champion .cav .ph{
  border:3px solid var(--stroke);background:#fff;
}
[data-theme="kart"] #toast{
  background:#fffdf7;color:var(--ink);border:2.5px solid var(--stroke);font-weight:700;
  box-shadow:0 5px 0 0 rgba(23,26,51,.85);
}
[data-theme="kart"] .theme-switch{background:#fff3dc;border:2px solid var(--stroke)}
[data-theme="kart"] .theme-opt.is-on{background:#fff;border-color:var(--stroke);box-shadow:0 3px 0 0 rgba(23,26,51,.75)}


/* =========================================================
   MUSIC SKIN - record shop: warm paper, ink, spinning vinyl
   ========================================================= */
[data-theme="music"]{
  --ink:#191510;
  --ink-dim:#5d5449;
  --ink-faint:#8b8071;
  --bg:#f1ebdf;
  --glass:#fffdf8;
  --glass-2:#fffdf8;
  --stroke:#191510;
  --stroke-2:#191510;
  --v1:#e2482a;   /* sleeve orange-red */
  --v2:#0e7c73;   /* label teal */
  --v3:#d97706;
  --win:#0e7c73;
  --bad:#a02214;
  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;
}
[data-theme="music"] body{color:var(--ink)}
[data-theme="music"] h2,[data-theme="music"] .cname,[data-theme="music"] .title-input,
[data-theme="music"] .round-label b,[data-theme="music"] .champion .lbl,
[data-theme="music"] .sc-crown,[data-theme="music"] .match-head,
[data-theme="music"] .field span,[data-theme="music"] .theme-copy b{
  font-family:"Bebas Neue",Archivo,Inter,sans-serif;letter-spacing:.5px;
}
[data-theme="music"] h2,[data-theme="music"] .cname{font-size:22px;text-transform:uppercase}
[data-theme="music"] .sc-name b,[data-theme="music"] .slot .name,
[data-theme="music"] .team-meta .tn{font-family:Archivo,Inter,sans-serif;font-weight:700}

/* paper, not a light show: static grain and a couple of faint grooves */
[data-theme="music"] .aurora{
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(226,72,42,.10), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(14,124,115,.10), transparent 60%),
    #f1ebdf;
}
[data-theme="music"] .blob{display:none}
[data-theme="music"] .grid{
  opacity:1;mask-image:none;-webkit-mask-image:none;animation:none;
  background-image:
    repeating-radial-gradient(circle at 88% 12%, rgba(25,21,16,.05) 0 1px, transparent 1px 9px),
    repeating-radial-gradient(circle at 8% 88%, rgba(25,21,16,.04) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(45deg, rgba(25,21,16,.018) 0 2px, transparent 2px 5px);
}
[data-theme="music"] .grid::after{content:none}

/* opaque sleeves - nothing from the backdrop bleeds through a card */
[data-theme="music"] .glass,[data-theme="music"] .score-card,[data-theme="music"] .match{
  background:var(--glass);
  border:2px solid var(--stroke);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 26px -16px rgba(25,21,16,.45);
}
[data-theme="music"] .topbar{
  background:#fffdf8;border-bottom:2px solid var(--stroke);backdrop-filter:none;
}
[data-theme="music"] .title-input{
  background-image:none;-webkit-text-fill-color:var(--ink);color:var(--ink);
  font-size:26px;text-transform:uppercase;
}
[data-theme="music"] .title-input:focus{background-color:#f6f0e4;border-color:var(--v1)}

/* the logo is a record */
[data-theme="music"] .logo{filter:none}
[data-theme="music"] .logo svg{display:none}
[data-theme="music"] .logo::before{
  content:"";width:26px;height:26px;border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.22), transparent 30%, rgba(255,255,255,.14) 60%, transparent 90%),
    radial-gradient(circle,#fffdf8 0 9%, var(--v1) 10% 22%, #17130f 23% 100%);
  box-shadow:0 2px 8px rgba(25,21,16,.45);
  animation:spin 3.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

[data-theme="music"] .tabs,[data-theme="music"] .theme-switch,[data-theme="music"] .step-switch{
  background:#f6f0e4;border:2px solid var(--stroke);
}
[data-theme="music"] .tab{color:var(--ink-dim)}
[data-theme="music"] .tab.is-active,[data-theme="music"] .theme-opt.is-on,
[data-theme="music"] .step-opt.is-on{color:#fffdf8}
[data-theme="music"] .tab-glider,[data-theme="music"] .step-opt.is-on{
  background:var(--v1);box-shadow:none;
}
[data-theme="music"] .theme-opt.is-on{background:var(--v1);border-color:var(--stroke)}
[data-theme="music"] .pill,[data-theme="music"] .chip{
  background:#f6f0e4;border:2px solid var(--stroke);color:var(--ink);
}
[data-theme="music"] .btn{
  background:#fffdf8;border:2px solid var(--stroke);color:var(--ink);box-shadow:none;
}
[data-theme="music"] .btn:hover{background:#f6f0e4}
[data-theme="music"] .btn.primary{background:var(--v1);color:#fffdf8;border-color:var(--stroke)}
[data-theme="music"] .btn.danger{background:#fdeeeb;color:#8c1c13}
[data-theme="music"] .btn.solid-danger{background:var(--bad);color:#fffdf8;border:2px solid var(--stroke)}
[data-theme="music"] .icon-btn,[data-theme="music"] .zoom,
[data-theme="music"] .field input,[data-theme="music"] .p-name{
  background:#fffdf8;border:2px solid var(--stroke);color:var(--ink);
}
[data-theme="music"] .icon-btn:hover{background:#f6f0e4;color:var(--ink)}
[data-theme="music"] .photo-drop{background:#f6f0e4;border:2px dashed var(--v1);color:var(--ink-dim)}
[data-theme="music"] .photo-drop.has-photo{border:2px solid var(--stroke)}
[data-theme="music"] .empty{border:2px dashed rgba(25,21,16,.35);color:var(--ink-dim);background:rgba(255,253,248,.6)}
[data-theme="music"] .modal{background:rgba(25,21,16,.45);backdrop-filter:blur(3px)}
[data-theme="music"] #toast{
  background:#fffdf8;color:var(--ink);border:2px solid var(--stroke);
  box-shadow:0 10px 24px -14px rgba(25,21,16,.6);
}

/* album-art squares instead of bubbles */
[data-theme="music"] .avatars img,[data-theme="music"] .avatars .ph,
[data-theme="music"] .slot .av img,[data-theme="music"] .slot .av .ph{
  border-radius:5px;border:2px solid var(--stroke);background:#f6f0e4;color:var(--ink-dim);
}
[data-theme="music"] .avatars>*+*,[data-theme="music"] .slot .av>*+*{margin-left:4px}
[data-theme="music"] .team-row:hover .avatars>*+*{margin-left:4px}
[data-theme="music"] .seed{
  background:var(--v2);color:#fffdf8;border:2px solid var(--stroke);box-shadow:none;
  font-family:"Bebas Neue",Archivo,sans-serif;font-size:14px;
}
[data-theme="music"] .team-row{background:#fffdf8;border:2px solid var(--stroke)}
[data-theme="music"] .team-row:hover{background:#f6f0e4;box-shadow:0 10px 22px -16px rgba(25,21,16,.6)}

/* bracket: ink on paper, sleeve-spine headers */
[data-theme="music"] .round-label b{
  background:#fffdf8;border:2px solid var(--stroke);color:var(--ink);
  box-shadow:none;font-size:13px;
}
[data-theme="music"] .round:last-child .round-label b{background:var(--v1);color:#fffdf8;box-shadow:none}
[data-theme="music"] .match-head{
  background:#191510;color:#f4e9d8;border-bottom:2px solid var(--stroke);font-size:11px;
}
[data-theme="music"] .match-head .st{color:#fff}
[data-theme="music"] .slot+.slot{border-top:2px solid rgba(25,21,16,.2)}
[data-theme="music"] .slot:hover:not(.empty){background:#f6f0e4}
[data-theme="music"] .slot.winner{
  background:linear-gradient(90deg,rgba(14,124,115,.20),rgba(14,124,115,.04));
  border-left-color:var(--v2);
}
[data-theme="music"] .slot.winner .mark{color:var(--v2)}
[data-theme="music"] .connectors path{stroke:rgba(25,21,16,.35)}
[data-theme="music"] .connectors path.flow{stroke:var(--v2);filter:none}
[data-theme="music"] .champion{
  background:var(--v1);border:2px solid var(--stroke);
  box-shadow:0 12px 30px -18px rgba(25,21,16,.7);
}
[data-theme="music"] .champion .lbl{color:#fde7dc;font-size:14px}
[data-theme="music"] .champion .cname,[data-theme="music"] .champion .cplayers{color:#fffdf8}
[data-theme="music"] .champion .cup svg{display:none}
[data-theme="music"] .champion .cup{filter:none}
[data-theme="music"] .champion .cup::before{content:"\1F3A4";font-size:36px;line-height:1}
[data-theme="music"] .champion .cav img,[data-theme="music"] .champion .cav .ph{
  border:2px solid var(--stroke);border-radius:6px;
}
[data-theme="music"] .champion .cav>*+*{margin-left:6px}

/* ---- the counter, on vinyl ---- */
[data-theme="music"] .sc-disc{
  position:relative;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:radial-gradient(circle,#2b2520 0 30%,#17130f 31% 100%);
  box-shadow:0 6px 16px -8px rgba(25,21,16,.8), 0 0 0 2px var(--stroke);
}
[data-theme="music"] .sc-disc::before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.16), transparent 28%, rgba(255,255,255,.10) 55%, transparent 82%, rgba(255,255,255,.16)),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, transparent 1px 4px);
  animation:spin 9s linear infinite;
}
[data-theme="music"] .sc-disc.kick::before{animation-duration:.55s}
[data-theme="music"] .sc-disc::after{
  content:"";position:absolute;inset:23px;border-radius:50%;
  background:radial-gradient(circle,#17130f 0 9%, var(--v1) 10% 100%);
  box-shadow:inset 0 0 0 1px rgba(25,21,16,.5);
}
[data-theme="music"] .sc-value{
  position:relative;z-index:1;width:60px;
  font-family:"Bebas Neue",Archivo,sans-serif;font-size:30px;letter-spacing:1px;
  color:#fffdf8;text-shadow:0 1px 2px rgba(25,21,16,.6);
  border-color:transparent;background:transparent;
}
[data-theme="music"] .sc-value:hover{border-color:rgba(255,253,248,.5)}
[data-theme="music"] .sc-value:focus{
  background:rgba(25,21,16,.35);border-color:#fffdf8;box-shadow:none;color:#fff;
}
[data-theme="music"] .step{
  width:44px;height:36px;border-radius:9px;
  background:#fffdf8;border:2px solid var(--stroke);color:var(--ink);box-shadow:none;
}
[data-theme="music"] .step.up:hover{background:var(--v2);color:#fffdf8;border-color:var(--stroke)}
[data-theme="music"] .step.down:hover{background:#fdeeeb;color:var(--bad)}
[data-theme="music"] .score-card.leader{
  border:2px solid var(--stroke);
  box-shadow:0 0 0 3px var(--v3), 0 12px 28px -18px rgba(25,21,16,.7);
}
[data-theme="music"] .sc-crown{
  background:var(--v3);color:#241300;border:2px solid var(--stroke);
  box-shadow:none;font-size:11px;letter-spacing:1.4px;
}
/* the little meter rides with the leader only */
[data-theme="music"] .score-card.leader .sc-eq{
  display:flex;align-items:flex-end;gap:3px;height:20px;flex:none;
}
[data-theme="music"] .sc-eq i{
  width:3px;border-radius:1px;background:var(--v2);transform-origin:bottom center;
  animation:eq 1.1s ease-in-out infinite alternate;
}
[data-theme="music"] .sc-eq i:nth-child(1){height:45%;animation-duration:.8s}
[data-theme="music"] .sc-eq i:nth-child(2){height:80%;animation-duration:1.2s}
[data-theme="music"] .sc-eq i:nth-child(3){height:60%;animation-duration:.95s}
[data-theme="music"] .sc-eq i:nth-child(4){height:95%;animation-duration:1.4s}
@keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}

/* =========================================================
   HALLOWEEN SKIN - candlelit black, pumpkin orange, cobwebs
   ========================================================= */
[data-theme="halloween"]{
  --ink:#f6efe2;
  --ink-dim:#b3a08c;
  --ink-faint:#7d6a58;
  --bg:#0d0714;
  --glass:rgba(23,13,32,.93);
  --glass-2:rgba(32,19,44,.96);
  --stroke:rgba(255,117,24,.28);
  --stroke-2:rgba(255,117,24,.55);
  --v1:#ff7518;   /* pumpkin */
  --v2:#7cb518;   /* toxic green */
  --v3:#8b5cf6;   /* witch purple */
  --win:#7cb518;
  --bad:#e0301e;
}
[data-theme="halloween"] h2,[data-theme="halloween"] .cname,
[data-theme="halloween"] .title-input,[data-theme="halloween"] .champion .lbl,
[data-theme="halloween"] .round-label b,[data-theme="halloween"] .sc-crown{
  font-family:Creepster,Outfit,Inter,cursive;letter-spacing:1.5px;font-weight:400;
}
[data-theme="halloween"] h2,[data-theme="halloween"] .cname{font-size:23px}

/* a low moon, drifting fog, cobwebs in the corners */
[data-theme="halloween"] .aurora{
  background:
    radial-gradient(38% 30% at 78% 8%, rgba(255,236,190,.20), transparent 70%),
    radial-gradient(120% 90% at 50% 115%, #1e0f26 0%, #0d0714 60%);
}
[data-theme="halloween"] .blob{filter:blur(100px);opacity:.3}
[data-theme="halloween"] .b1{background:radial-gradient(circle,#ff7518,transparent 70%)}
[data-theme="halloween"] .b2{background:radial-gradient(circle,#7cb518,transparent 72%);opacity:.2}
[data-theme="halloween"] .b3{background:radial-gradient(circle,#8b5cf6,transparent 70%);opacity:.26}
[data-theme="halloween"] .grid{
  opacity:.5;
  background-image:
    repeating-conic-gradient(from 0deg at 0% 0%, rgba(246,239,226,.16) 0 .35deg, transparent .35deg 11deg),
    repeating-conic-gradient(from 0deg at 100% 0%, rgba(246,239,226,.13) 0 .35deg, transparent .35deg 13deg),
    repeating-radial-gradient(circle at 0% 0%, transparent 0 38px, rgba(246,239,226,.10) 38px 39px),
    repeating-radial-gradient(circle at 100% 0%, transparent 0 44px, rgba(246,239,226,.08) 44px 45px);
  mask-image:radial-gradient(70% 55% at 50% 40%, transparent 20%, #000 95%);
  -webkit-mask-image:radial-gradient(70% 55% at 50% 40%, transparent 20%, #000 95%);
  animation:none;
}
[data-theme="halloween"] .grid::after{content:none}

[data-theme="halloween"] .logo{filter:drop-shadow(0 0 14px rgba(255,117,24,.7));animation:flicker 3.4s infinite}
[data-theme="halloween"] .logo svg{display:none}
[data-theme="halloween"] .logo::before{content:"\1F383";font-size:25px;line-height:1}
@keyframes flicker{
  0%,100%{opacity:1}
  42%{opacity:1}
  45%{opacity:.55}
  47%{opacity:1}
  71%{opacity:.7}
  73%{opacity:1}
}
[data-theme="halloween"] .title-input{background-image:linear-gradient(92deg,#ffcf8f,#ff7518 55%,#7cb518)}
[data-theme="halloween"] .topbar{
  background:linear-gradient(180deg,rgba(13,7,20,.92),rgba(13,7,20,.6));
  border-bottom:1px solid rgba(255,117,24,.3);
}
[data-theme="halloween"] .tab-glider{
  background:linear-gradient(135deg,rgba(255,117,24,.9),rgba(139,92,246,.7));
  box-shadow:0 6px 22px -6px rgba(255,117,24,.9);
}
[data-theme="halloween"] .btn.primary{
  background:linear-gradient(135deg,#ff7518,#e0301e);
  box-shadow:0 12px 30px -12px rgba(255,117,24,.95);
}
[data-theme="halloween"] .round:last-child .round-label b{
  background:linear-gradient(135deg,#ff7518,#8b5cf6);color:#1a1020;
  box-shadow:0 8px 22px -10px rgba(255,117,24,.95);
}
[data-theme="halloween"] .slot.winner{
  background:linear-gradient(90deg,rgba(124,181,24,.22),rgba(124,181,24,.03));
  border-left-color:var(--win);
}
[data-theme="halloween"] .connectors path.flow{stroke:rgba(124,181,24,.9)}
[data-theme="halloween"] .champion{
  background:linear-gradient(110deg,rgba(255,117,24,.26),rgba(139,92,246,.14) 55%,rgba(124,181,24,.16));
  border-color:rgba(255,117,24,.5);
  box-shadow:0 26px 60px -34px rgba(255,117,24,.9);
}
[data-theme="halloween"] .champion .lbl{color:#ffcf8f;font-size:15px}
[data-theme="halloween"] .champion .cup svg{display:none}
[data-theme="halloween"] .champion .cup::before{content:"\1F47B";font-size:38px;line-height:1}
[data-theme="halloween"] .champion .cav img,[data-theme="halloween"] .champion .cav .ph{
  border-color:rgba(255,117,24,.75);
}
[data-theme="halloween"] .seed{background:linear-gradient(135deg,#ff7518,#8b5cf6);color:#1a1020}

/* counter: a guttering candle-lit number */
[data-theme="halloween"] .sc-disc{
  position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(255,117,24,.22) 0 42%, rgba(255,117,24,.04) 60%, transparent 72%);
}
[data-theme="halloween"] .sc-disc::before{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:1px solid rgba(255,117,24,.45);
  box-shadow:0 0 22px rgba(255,117,24,.35), inset 0 0 18px rgba(255,117,24,.2);
  animation:flicker 3.8s infinite;
}
[data-theme="halloween"] .sc-disc.kick::before{animation:hallowPulse .6s var(--spring)}
@keyframes hallowPulse{40%{transform:scale(1.14);box-shadow:0 0 34px rgba(255,117,24,.7)}}
[data-theme="halloween"] .sc-value{
  position:relative;z-index:1;width:74px;
  font-family:Creepster,Outfit,cursive;font-size:34px;letter-spacing:2px;
  color:#ff9d4d;text-shadow:0 0 16px rgba(255,117,24,.75);
}
[data-theme="halloween"] .step.up:hover{background:rgba(124,181,24,.25);border-color:var(--win)}
[data-theme="halloween"] .sc-crown{
  background:linear-gradient(135deg,#ff7518,#8b5cf6);color:#1a1020;font-size:11px;letter-spacing:1.6px;
}
[data-theme="halloween"] .score-card.leader{border-color:rgba(255,117,24,.65)}


/* =========================================================
   CHRISTMAS SKIN - evergreen night, falling snow, red baubles
   ========================================================= */
[data-theme="christmas"]{
  --ink:#f4f7f2;
  --ink-dim:#a9c2b1;
  --ink-faint:#7d9a86;
  --bg:#07231a;
  --glass:rgba(8,40,29,.93);
  --glass-2:rgba(12,52,38,.96);
  --stroke:rgba(226,238,229,.16);
  --stroke-2:rgba(226,238,229,.3);
  --v1:#c1121f;   /* holly red */
  --v2:#2d6a4f;   /* pine */
  --v3:#95d5b2;   /* mint */
  --win:#95d5b2;
  --bad:#e0301e;
}
[data-theme="christmas"] h2,[data-theme="christmas"] .cname,
[data-theme="christmas"] .title-input,[data-theme="christmas"] .champion .lbl,
[data-theme="christmas"] .sc-crown{
  font-family:"Mountains of Christmas",Outfit,Inter,cursive;font-weight:700;letter-spacing:.3px;
}
[data-theme="christmas"] h2{font-size:22px}
[data-theme="christmas"] .cname{font-size:30px}

/* deep pine night with two layers of falling snow */
[data-theme="christmas"] .aurora{
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(149,213,178,.16), transparent 70%),
    linear-gradient(180deg,#07231a 0%,#0a2c21 55%,#061a14 100%);
}
[data-theme="christmas"] .blob{filter:blur(110px);opacity:.22}
[data-theme="christmas"] .b1{background:radial-gradient(circle,#c1121f,transparent 70%)}
[data-theme="christmas"] .b2{background:radial-gradient(circle,#95d5b2,transparent 72%)}
[data-theme="christmas"] .b3{background:radial-gradient(circle,#2d6a4f,transparent 70%);opacity:.3}
[data-theme="christmas"] .grid{
  opacity:1;mask-image:none;-webkit-mask-image:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.4px);
  background-size:170px 170px, 110px 110px;
  background-position:0 0, 40px 60px;
  animation:snowfall 16s linear infinite;
}
[data-theme="christmas"] .grid::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.7) 2px, transparent 2.6px);
  background-size:240px 240px;
  animation:snowfallNear 9s linear infinite;
}
@keyframes snowfall{to{background-position:60px 170px, -50px 110px}}
@keyframes snowfallNear{to{background-position:-70px 240px}}

[data-theme="christmas"] .logo{filter:drop-shadow(0 0 12px rgba(149,213,178,.6))}
[data-theme="christmas"] .logo svg{display:none}
[data-theme="christmas"] .logo::before{content:"\1F384";font-size:24px;line-height:1}
[data-theme="christmas"] .title-input{background-image:linear-gradient(92deg,#fff,#95d5b2 50%,#ff8a8a)}
[data-theme="christmas"] .topbar{
  background:linear-gradient(180deg,rgba(7,35,26,.93),rgba(7,35,26,.62));
  border-bottom:2px solid transparent;
  border-image:repeating-linear-gradient(45deg,#c1121f 0 10px,#fff 10px 20px) 1;
}
[data-theme="christmas"] .tab-glider{
  background:linear-gradient(135deg,#c1121f,#e0301e);
  box-shadow:0 6px 22px -6px rgba(193,18,31,.95);
}
[data-theme="christmas"] .btn.primary{
  background:linear-gradient(135deg,#c1121f,#9b2226);
  box-shadow:0 12px 30px -12px rgba(193,18,31,.95);
}
[data-theme="christmas"] .round:last-child .round-label b{
  background:linear-gradient(135deg,#c1121f,#2d6a4f);color:#fff;
  box-shadow:0 8px 22px -10px rgba(193,18,31,.9);
}
[data-theme="christmas"] .slot.winner{
  background:linear-gradient(90deg,rgba(149,213,178,.22),rgba(149,213,178,.03));
  border-left-color:var(--win);
}
[data-theme="christmas"] .connectors path.flow{stroke:rgba(149,213,178,.95)}
[data-theme="christmas"] .champion{
  background:linear-gradient(110deg,rgba(193,18,31,.30),rgba(45,106,79,.20) 55%,rgba(149,213,178,.18));
  border-color:rgba(149,213,178,.45);
  box-shadow:0 26px 60px -34px rgba(193,18,31,.85);
}
[data-theme="christmas"] .champion .lbl{color:#95d5b2;font-size:16px}
[data-theme="christmas"] .champion .cup svg{display:none}
[data-theme="christmas"] .champion .cup::before{content:"\1F381";font-size:36px;line-height:1}
[data-theme="christmas"] .champion .cav img,[data-theme="christmas"] .champion .cav .ph{
  border-color:rgba(149,213,178,.7);
}
[data-theme="christmas"] .seed{background:linear-gradient(135deg,#c1121f,#9b2226)}

/* counter: the score hangs in a bauble */
[data-theme="christmas"] .sc-disc{
  position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%, #ff6b6b 0 8%, #c1121f 34%, #7d0d16 100%);
  box-shadow:0 8px 18px -8px rgba(0,0,0,.85), inset 0 -6px 14px rgba(0,0,0,.35);
}
[data-theme="christmas"] .sc-disc::before{      /* glass highlight */
  content:"";position:absolute;top:11px;left:16px;width:26px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));
  transform:rotate(-20deg);
}
[data-theme="christmas"] .sc-disc::after{       /* the little cap */
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:18px;height:12px;border-radius:3px;
  background:linear-gradient(180deg,#dfe6e9,#8d9aa5);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
[data-theme="christmas"] .sc-disc.kick{animation:swing .7s var(--ease)}
@keyframes swing{
  0%{transform:rotate(0)}25%{transform:rotate(7deg)}
  55%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}100%{transform:rotate(0)}
}
[data-theme="christmas"] .sc-value{
  position:relative;z-index:1;width:64px;
  font-family:"Mountains of Christmas",Outfit,cursive;font-weight:700;font-size:34px;
  color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);
}
[data-theme="christmas"] .step.up:hover{background:rgba(149,213,178,.24);border-color:var(--win)}
[data-theme="christmas"] .sc-crown{background:linear-gradient(135deg,#2d6a4f,#95d5b2);color:#04150f;font-size:13px}
[data-theme="christmas"] .score-card.leader{border-color:rgba(149,213,178,.6)}


/* =========================================================
   NEW YEAR SKIN - midnight, fireworks, silver deco
   ========================================================= */
[data-theme="newyear"]{
  --ink:#f2f4fa;
  --ink-dim:#a7aec4;
  --ink-faint:#767e96;
  --bg:#05060c;
  --glass:rgba(11,14,26,.93);
  --glass-2:rgba(18,22,38,.96);
  --stroke:rgba(226,232,247,.18);
  --stroke-2:rgba(226,232,247,.34);
  --v1:#4dabff;
  --v2:#ff5fa2;
  --v3:#e8eaf0;
  --win:#5eead4;
  --bad:#fb7185;
}
[data-theme="newyear"] h2,[data-theme="newyear"] .cname,
[data-theme="newyear"] .title-input,[data-theme="newyear"] .champion .lbl,
[data-theme="newyear"] .round-label b,[data-theme="newyear"] .sc-crown,
[data-theme="newyear"] .match-head{
  font-family:Cinzel,Outfit,Inter,serif;letter-spacing:1.2px;
}
[data-theme="newyear"] h2{font-size:19px;text-transform:uppercase}
[data-theme="newyear"] .cname{font-size:25px;text-transform:uppercase}

/* midnight sky, twinkling stars, three fireworks on a loop */
[data-theme="newyear"] .aurora{
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(77,171,255,.14), transparent 70%),
    linear-gradient(180deg,#05060c 0%,#0a0d1a 60%,#05060c 100%);
}
[data-theme="newyear"] .blob{
  width:210px;height:210px;border-radius:50%;filter:none;opacity:0;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.5) 0 .4deg, transparent .4deg 11deg),
    radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.3) 33%, transparent 36%);
  mask-image:radial-gradient(circle, transparent 26%, #000 34%, #000 46%, transparent 52%);
  -webkit-mask-image:radial-gradient(circle, transparent 26%, #000 34%, #000 46%, transparent 52%);
  animation:firework 5.4s ease-out infinite;
}
[data-theme="newyear"] .b1{left:6vw;top:5vh;color:#ff5fa2;animation-delay:0s}
[data-theme="newyear"] .b2{right:8vw;left:auto;top:2vh;color:#4dabff;animation-delay:1.8s}
[data-theme="newyear"] .b3{left:46vw;top:8vh;bottom:auto;color:#5eead4;animation-delay:3.6s}
@keyframes firework{
  0%{opacity:0;transform:scale(.15)}
  8%{opacity:.55}
  55%{opacity:.28;transform:scale(1)}
  75%,100%{opacity:0;transform:scale(1.25)}
}
[data-theme="newyear"] .grid{
  opacity:1;animation:twinkle 4.5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,255,255,.55) .8px, transparent 1.2px);
  background-size:190px 190px, 120px 120px;
  background-position:0 0, 60px 40px;
  mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 90%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 55%,transparent 90%);
}
[data-theme="newyear"] .grid::after{content:none}
@keyframes twinkle{from{opacity:.45}to{opacity:1}}

[data-theme="newyear"] .logo{filter:drop-shadow(0 0 14px rgba(77,171,255,.6))}
[data-theme="newyear"] .logo svg{display:none}
[data-theme="newyear"] .logo::before{content:"\1F942";font-size:23px;line-height:1}
[data-theme="newyear"] .title-input{background-image:linear-gradient(92deg,#fff,#cfd6e6 45%,#4dabff)}
[data-theme="newyear"] .topbar{
  background:linear-gradient(180deg,rgba(5,6,12,.92),rgba(5,6,12,.6));
  border-bottom:1px solid rgba(226,232,247,.22);
}
[data-theme="newyear"] .tab-glider{
  background:linear-gradient(135deg,rgba(226,232,247,.9),rgba(77,171,255,.75));
  box-shadow:0 6px 22px -6px rgba(77,171,255,.85);
}
[data-theme="newyear"] .tab.is-active{color:#0a0d1a}
[data-theme="newyear"] .btn.primary{
  background:linear-gradient(135deg,#e8eaf0,#a9b4cc);color:#0a0d1a;
  box-shadow:0 12px 30px -12px rgba(226,232,247,.7);
}
[data-theme="newyear"] .round:last-child .round-label b{
  background:linear-gradient(135deg,#e8eaf0,#4dabff);color:#0a0d1a;
  box-shadow:0 8px 22px -10px rgba(77,171,255,.9);
}
[data-theme="newyear"] .slot.winner{
  background:linear-gradient(90deg,rgba(94,234,212,.20),rgba(94,234,212,.03));
  border-left-color:var(--win);
}
[data-theme="newyear"] .connectors path.flow{stroke:rgba(94,234,212,.9)}
[data-theme="newyear"] .champion{
  background:linear-gradient(110deg,rgba(226,232,247,.20),rgba(77,171,255,.14) 52%,rgba(255,95,162,.16));
  border-color:rgba(226,232,247,.4);
  box-shadow:0 26px 60px -34px rgba(226,232,247,.6);
}
[data-theme="newyear"] .champion .lbl{color:#cfd6e6;font-size:13px}
[data-theme="newyear"] .champion .cup svg{display:none}
[data-theme="newyear"] .champion .cup::before{content:"\1F386";font-size:36px;line-height:1}
[data-theme="newyear"] .seed{background:linear-gradient(135deg,#e8eaf0,#4dabff);color:#0a0d1a}

/* counter: a struck-silver medallion */
[data-theme="newyear"] .sc-disc{
  position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:
    conic-gradient(from 210deg,#f7f9ff,#9aa6c2 25%,#f2f4fa 50%,#8d99b5 75%,#f7f9ff),
    #cdd5e6;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,255,255,.5);
}
[data-theme="newyear"] .sc-disc::before{
  content:"";position:absolute;inset:7px;border-radius:50%;
  border:1px solid rgba(10,13,26,.35);
  background:radial-gradient(circle,#151b2e 0 62%, #0e1322 100%);
}
[data-theme="newyear"] .sc-disc::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.75) 82%, transparent 92%);
  animation:spin 6s linear infinite;
}
[data-theme="newyear"] .sc-disc.kick::after{animation-duration:.6s}
[data-theme="newyear"] .sc-value{
  position:relative;z-index:1;width:64px;
  font-family:Cinzel,Outfit,serif;font-weight:700;font-size:26px;letter-spacing:1px;
  color:#f2f4fa;text-shadow:0 0 12px rgba(77,171,255,.7);
}
[data-theme="newyear"] .step.up:hover{background:rgba(94,234,212,.2);border-color:var(--win)}
[data-theme="newyear"] .sc-crown{
  background:linear-gradient(135deg,#e8eaf0,#4dabff);color:#0a0d1a;font-size:10.5px;letter-spacing:1.6px;
}
[data-theme="newyear"] .score-card.leader{border-color:rgba(226,232,247,.55)}

[data-theme="halloween"] .glass,[data-theme="halloween"] .score-card,[data-theme="halloween"] .match,
[data-theme="christmas"] .glass,[data-theme="christmas"] .score-card,[data-theme="christmas"] .match,
[data-theme="newyear"] .glass,[data-theme="newyear"] .score-card,[data-theme="newyear"] .match{
  background:var(--glass);
}

/* the theme switch has six options now - keep it tidy when space is tight */
@media (max-width:820px){
  .theme-bar{align-items:stretch}
  .theme-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .theme-opt{justify-content:flex-start}
}

/* ---------- seat palette (each theme overrides these) ---------- */
:root{
  --seat-1:#6d28d9;
  --seat-2:#a21caf;
  --seat-3:#0e7490;
  --seat-4:#047857;
  --seat-5:#1d4ed8;
  --seat-6:#be123c;
  --seat-ink:#f7f5ff;
}
[data-theme="kart"]{
  --seat-1:#d62828;--seat-2:#1d4ed8;--seat-3:#148f77;
  --seat-4:#2d6a4f;--seat-5:#6d28d9;--seat-6:#c2410c;--seat-ink:#fffdf8;
}
[data-theme="music"]{
  --seat-1:#c8442b;--seat-2:#0e7c73;--seat-3:#2b2520;
  --seat-4:#8a5a2b;--seat-5:#5d6f34;--seat-6:#7a3b5c;--seat-ink:#fffdf8;
}
[data-theme="halloween"]{
  --seat-1:#c2410c;--seat-2:#6d28d9;--seat-3:#4d7c0f;
  --seat-4:#1f2937;--seat-5:#7c2d12;--seat-6:#365314;--seat-ink:#f6efe2;
}
[data-theme="christmas"]{
  --seat-1:#9b2226;--seat-2:#2d6a4f;--seat-3:#1b4332;
  --seat-4:#7f1d1d;--seat-5:#14532d;--seat-6:#4c1d95;--seat-ink:#f4f7f2;
}
[data-theme="newyear"]{
  --seat-1:#1e293b;--seat-2:#1d4ed8;--seat-3:#6d28d9;
  --seat-4:#0f766e;--seat-5:#9d174d;--seat-6:#334155;--seat-ink:#f2f4fa;
}
[data-theme="mtg"]{
  /* the five colours of mana, then bronze */
  --seat-1:#8a7f5c;
  --seat-2:#1f5fa8;
  --seat-3:#2a2438;
  --seat-4:#9c2b21;
  --seat-5:#1f6b3a;
  --seat-6:#6b4b1f;
  --seat-ink:#f7f2e2;
}

.life-panel{color:var(--seat-ink)}
.life-panel[data-seat="0"]{background:var(--seat-1)}
.life-panel[data-seat="1"]{background:var(--seat-2)}
.life-panel[data-seat="2"]{background:var(--seat-3)}
.life-panel[data-seat="3"]{background:var(--seat-4)}
.life-panel[data-seat="4"]{background:var(--seat-5)}
.life-panel[data-seat="5"]{background:var(--seat-6)}
.cmd-chip[data-from="0"]{background:var(--seat-1)}
.cmd-chip[data-from="1"]{background:var(--seat-2)}
.cmd-chip[data-from="2"]{background:var(--seat-3)}
.cmd-chip[data-from="3"]{background:var(--seat-4)}
.cmd-chip[data-from="4"]{background:var(--seat-5)}
.cmd-chip[data-from="5"]{background:var(--seat-6)}

/* =========================================================
   MTG SKIN - card frame: parchment, dark wood, mana colours
   ========================================================= */
[data-theme="mtg"]{
  --ink:#241a10;
  --ink-dim:#5c4a35;
  --ink-faint:#8a7355;
  --bg:#171310;
  --glass:#f3e9cf;
  --glass-2:#fbf5e4;
  --stroke:#3b2b1a;
  --stroke-2:#3b2b1a;
  --v1:#8c2f26;
  --v2:#1f5fa8;
  --v3:#6b4b1f;
  --win:#1f6b3a;
  --bad:#9c2b21;
  --r-lg:12px;
  --r-md:9px;
  --r-sm:7px;
}
[data-theme="mtg"] body{color:var(--ink)}
[data-theme="mtg"] h2,[data-theme="mtg"] .cname,[data-theme="mtg"] .title-input,
[data-theme="mtg"] .round-label b,[data-theme="mtg"] .champion .lbl,
[data-theme="mtg"] .sc-crown,[data-theme="mtg"] .match-head,
[data-theme="mtg"] .theme-copy b,[data-theme="mtg"] .life-name{
  font-family:Cinzel,Outfit,serif;letter-spacing:.4px;
}
[data-theme="mtg"] h2{font-size:18px}
[data-theme="mtg"] .cname{font-size:24px}

/* a dark table with the light thrown on the middle of it */
[data-theme="mtg"] .aurora{
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(214,188,124,.18), transparent 65%),
    radial-gradient(120% 90% at 50% 120%, #23190f 0%, #120e0a 60%);
}
[data-theme="mtg"] .blob{display:none}
[data-theme="mtg"] .grid{
  opacity:.5;mask-image:none;-webkit-mask-image:none;animation:none;
  background-image:
    repeating-linear-gradient(58deg, rgba(214,188,124,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, rgba(214,188,124,.04) 0 1px, transparent 1px 9px);
}
[data-theme="mtg"] .grid::after{content:none}

/* every surface is a card: parchment inside a dark frame */
[data-theme="mtg"] .glass,[data-theme="mtg"] .score-card,[data-theme="mtg"] .match{
  background:linear-gradient(170deg,var(--glass-2),var(--glass));
  border:2px solid var(--stroke);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.8), inset 0 0 0 1px rgba(214,188,124,.35);
}
[data-theme="mtg"] .topbar{
  background:linear-gradient(180deg,#fbf5e4,#efe3c6);
  border-bottom:2px solid var(--stroke);backdrop-filter:none;
}
[data-theme="mtg"] .title-input{
  background-image:none;-webkit-text-fill-color:var(--ink);color:var(--ink);font-size:23px;
}
[data-theme="mtg"] .title-input:focus{background-color:#fff;border-color:var(--v1)}
[data-theme="mtg"] .logo{filter:none}
[data-theme="mtg"] .logo svg{display:none}
[data-theme="mtg"] .logo::before{content:"\1F0CF";font-size:23px;line-height:1}

[data-theme="mtg"] .tabs,[data-theme="mtg"] .theme-switch,[data-theme="mtg"] .step-switch{
  background:#e7dabb;border:2px solid var(--stroke);
}
[data-theme="mtg"] .tab{color:var(--ink-dim)}
[data-theme="mtg"] .tab.is-active,[data-theme="mtg"] .theme-opt.is-on,
[data-theme="mtg"] .step-opt.is-on{color:#f7f2e2}
[data-theme="mtg"] .tab-glider,[data-theme="mtg"] .step-opt.is-on,
[data-theme="mtg"] .theme-opt.is-on{background:var(--v1);box-shadow:none;border-color:var(--stroke)}
[data-theme="mtg"] .pill,[data-theme="mtg"] .chip{
  background:#fbf5e4;border:2px solid var(--stroke);color:var(--ink);
}
[data-theme="mtg"] .btn{
  background:#fbf5e4;border:2px solid var(--stroke);color:var(--ink);box-shadow:none;
}
[data-theme="mtg"] .btn:hover{background:#f3e9cf}
[data-theme="mtg"] .btn.primary{background:var(--v1);color:#f7f2e2;border-color:var(--stroke)}
[data-theme="mtg"] .btn.danger{background:#f6e0dc;color:#7a1f18}
[data-theme="mtg"] .btn.solid-danger{background:var(--bad);color:#fbf5e4;border:2px solid var(--stroke)}
[data-theme="mtg"] .icon-btn,[data-theme="mtg"] .zoom,
[data-theme="mtg"] .field input,[data-theme="mtg"] .p-name,
[data-theme="mtg"] .pts-rules label,[data-theme="mtg"] .pts-rules input,
[data-theme="mtg"] .use-entrants,[data-theme="mtg"] .sc-value{
  background:#fbf5e4;border:2px solid var(--stroke);color:var(--ink);
}
[data-theme="mtg"] .icon-btn:hover{background:#f0e4c6;color:var(--ink)}
[data-theme="mtg"] .photo-drop{background:#fbf5e4;border:2px dashed var(--v3);color:var(--ink-dim)}
[data-theme="mtg"] .photo-drop.has-photo{border:2px solid var(--stroke)}
[data-theme="mtg"] .empty{border:2px dashed rgba(59,43,26,.4);color:var(--ink-dim);background:rgba(251,245,228,.55)}
[data-theme="mtg"] .modal{background:rgba(23,19,16,.55)}
[data-theme="mtg"] #toast{
  background:#fbf5e4;color:var(--ink);border:2px solid var(--stroke);
  box-shadow:0 10px 22px -14px rgba(0,0,0,.7);
}
[data-theme="mtg"] .avatars img,[data-theme="mtg"] .avatars .ph,
[data-theme="mtg"] .slot .av img,[data-theme="mtg"] .slot .av .ph{
  border:2px solid var(--stroke);background:#e7dabb;color:var(--ink-dim);border-radius:6px;
}
[data-theme="mtg"] .avatars>*+*,[data-theme="mtg"] .slot .av>*+*{margin-left:3px}
[data-theme="mtg"] .seed{background:var(--v3);color:#f7f2e2;border:2px solid var(--stroke);box-shadow:none}
[data-theme="mtg"] .team-row{background:#fbf5e4;border:2px solid var(--stroke)}
[data-theme="mtg"] .team-row:hover{background:#f3e9cf}
[data-theme="mtg"] .round-label b{background:#fbf5e4;border:2px solid var(--stroke);color:var(--ink);box-shadow:none}
[data-theme="mtg"] .round:last-child .round-label b{background:var(--v1);color:#f7f2e2}
[data-theme="mtg"] .match-head{
  background:#2b2015;color:#e7dabb;border-bottom:2px solid var(--stroke);
}
[data-theme="mtg"] .match-head .st{color:#fff}
[data-theme="mtg"] .slot+.slot{border-top:2px solid rgba(59,43,26,.22)}
[data-theme="mtg"] .slot:hover:not(.empty){background:#efe3c6}
[data-theme="mtg"] .slot.winner{
  background:linear-gradient(90deg,rgba(31,107,58,.22),rgba(31,107,58,.04));border-left-color:var(--win);
}
[data-theme="mtg"] .slot.winner .mark{color:var(--win)}
[data-theme="mtg"] .connectors path{stroke:rgba(59,43,26,.4)}
[data-theme="mtg"] .connectors path.flow{stroke:var(--win);filter:none}
[data-theme="mtg"] .champion{
  background:linear-gradient(110deg,rgba(140,47,38,.22),rgba(107,75,31,.16) 55%,rgba(31,107,58,.14));
  border:2px solid var(--stroke);box-shadow:0 14px 30px -18px rgba(0,0,0,.7);
}
[data-theme="mtg"] .champion .lbl{color:#7a1f18}
[data-theme="mtg"] .champion .cup svg{display:none}
[data-theme="mtg"] .champion .cup::before{content:"\2694\FE0F";font-size:34px;line-height:1}
[data-theme="mtg"] .champion .cav img,[data-theme="mtg"] .champion .cav .ph{border:2px solid var(--stroke)}
[data-theme="mtg"] .sc-crown{background:var(--v1);color:#f7f2e2;border:2px solid var(--stroke)}
[data-theme="mtg"] .score-card.leader{box-shadow:0 0 0 3px var(--v3), 0 12px 26px -18px rgba(0,0,0,.7)}
[data-theme="mtg"] .step{background:#fbf5e4;border:2px solid var(--stroke);color:var(--ink);box-shadow:none}
[data-theme="mtg"] .step.up:hover{background:var(--win);color:#f7f2e2}
[data-theme="mtg"] .sc-value{font-family:Cinzel,Outfit,serif;font-size:28px}

/* life panels get the card frame too */
[data-theme="mtg"] .life-panel,[data-theme="music"] .life-panel,[data-theme="kart"] .life-panel{
  border:2px solid var(--stroke);
}
[data-theme="mtg"] .life-total{font-family:Cinzel,Outfit,serif;letter-spacing:0}

/* =========================================================
   DARTS SKIN - pub chalkboard, dartboard, cream chalk
   ========================================================= */
[data-theme="darts"]{
  --ink:#f2ead6;
  --ink-dim:#b6b39a;
  --ink-faint:#82806c;
  --bg:#0d1712;
  --glass:rgba(17,28,22,.94);
  --glass-2:rgba(24,38,30,.96);
  --stroke:rgba(242,234,214,.22);
  --stroke-2:rgba(242,234,214,.4);
  --v1:#c8102e;   /* double ring red */
  --v2:#1a7a44;   /* treble ring green */
  --v3:#f2ead6;   /* chalk */
  --win:#3fbf6f;
  --bad:#e0533f;
  --seat-1:#8c1024;--seat-2:#155e36;--seat-3:#1d2b24;
  --seat-4:#6b5d3a;--seat-5:#2a4a63;--seat-6:#4a2c3f;--seat-ink:#f6f1e2;
}
[data-theme="darts"] h2,[data-theme="darts"] .cname,[data-theme="darts"] .title-input,
[data-theme="darts"] .champion .lbl,[data-theme="darts"] .round-label b,
[data-theme="darts"] .sc-crown,[data-theme="darts"] .theme-copy b{
  font-family:Caveat,Outfit,cursive;font-weight:700;letter-spacing:.4px;
}
[data-theme="darts"] h2{font-size:24px}
[data-theme="darts"] .cname{font-size:32px}

/* the board hangs on the wall behind everything */
[data-theme="darts"] .aurora{
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(242,234,214,.10), transparent 65%),
    linear-gradient(180deg,#101c16 0%,#0b140f 60%,#080f0b 100%);
}
[data-theme="darts"] .blob{display:none}
[data-theme="darts"] .grid{
  opacity:.4;animation:none;
  background-image:
    repeating-conic-gradient(from 9deg at 78% 26%,
      rgba(242,234,214,.16) 0 9deg, rgba(13,23,18,.9) 9deg 18deg),
    repeating-radial-gradient(circle at 78% 26%,
      transparent 0 78px, rgba(200,16,46,.5) 78px 88px,
      transparent 88px 150px, rgba(26,122,68,.45) 150px 160px, transparent 160px 240px);
  background-repeat:no-repeat;
  mask-image:radial-gradient(circle at 78% 26%, #000 0 235px, transparent 240px);
  -webkit-mask-image:radial-gradient(circle at 78% 26%, #000 0 235px, transparent 240px);
}
[data-theme="darts"] .grid::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(96deg, rgba(242,234,214,.03) 0 1px, transparent 1px 42px);
}
[data-theme="darts"] .logo{filter:drop-shadow(0 0 12px rgba(200,16,46,.5))}
[data-theme="darts"] .logo svg{display:none}
[data-theme="darts"] .logo::before{content:"\1F3AF";font-size:24px;line-height:1}
[data-theme="darts"] .title-input{background-image:linear-gradient(92deg,#fff8e6,#f2ead6 45%,#7fe0a5)}
[data-theme="darts"] .topbar{
  background:linear-gradient(180deg,rgba(13,23,18,.94),rgba(13,23,18,.65));
  border-bottom:1px solid rgba(242,234,214,.28);
}
/* opaque so the dartboard behind never bleeds through the content */
[data-theme="darts"] .glass,[data-theme="darts"] .score-card,[data-theme="darts"] .match,[data-theme="darts"] .team-row{
  background:var(--glass);
  border-color:rgba(242,234,214,.24);
}
[data-theme="darts"] .tab-glider{
  background:linear-gradient(135deg,var(--v1),#8c1024);
  box-shadow:0 6px 22px -6px rgba(200,16,46,.9);
}
[data-theme="darts"] .btn.primary{
  background:linear-gradient(135deg,var(--v1),#8c1024);
  box-shadow:0 12px 30px -12px rgba(200,16,46,.9);
}
[data-theme="darts"] .seed{background:linear-gradient(135deg,var(--v1),var(--v2));color:#fff8e6}
[data-theme="darts"] .round:last-child .round-label b{
  background:linear-gradient(135deg,var(--v1),var(--v2));color:#fff8e6;
  box-shadow:0 8px 22px -10px rgba(200,16,46,.9);font-size:15px;
}
[data-theme="darts"] .slot.winner{
  background:linear-gradient(90deg,rgba(63,191,111,.2),rgba(63,191,111,.03));border-left-color:var(--win);
}
[data-theme="darts"] .connectors path.flow{stroke:rgba(63,191,111,.9)}
[data-theme="darts"] .champion{
  background:linear-gradient(110deg,rgba(200,16,46,.26),rgba(26,122,68,.16) 55%,rgba(242,234,214,.12));
  border-color:rgba(242,234,214,.4);
  box-shadow:0 26px 60px -34px rgba(200,16,46,.8);
}
[data-theme="darts"] .champion .lbl{color:#ffd9d0;font-size:17px}
[data-theme="darts"] .champion .cup svg{display:none}
[data-theme="darts"] .champion .cup::before{content:"\1F3AF";font-size:36px;line-height:1}
[data-theme="darts"] .sc-value{font-family:Caveat,Outfit,cursive;font-size:40px}
[data-theme="darts"] .life-total{font-family:Caveat,Outfit,cursive;letter-spacing:0}
[data-theme="darts"] .sc-crown{background:linear-gradient(135deg,var(--v1),var(--v2));color:#fff8e6;font-size:14px}


/* =========================================================
   BEER PONG SKIN - wooden table, red cups, party
   ========================================================= */
[data-theme="beerpong"]{
  --ink:#2a1a10;
  --ink-dim:#6b4a33;
  --ink-faint:#947358;
  --bg:#7b4a24;
  --glass:#fffaf2;
  --glass-2:#fff;
  --stroke:#3d2413;
  --stroke-2:#3d2413;
  --v1:#d0342c;   /* solo cup red */
  --v2:#1f6fb2;   /* blue cup */
  --v3:#f2b23e;
  --win:#2f9e57;
  --bad:#b3261e;
  --seat-1:#c62828;--seat-2:#1565c0;--seat-3:#2e7d32;
  --seat-4:#6a1b9a;--seat-5:#ad4e00;--seat-6:#37474f;--seat-ink:#fffaf2;
  --r-lg:18px;--r-md:14px;--r-sm:10px;
}
[data-theme="beerpong"] body{color:var(--ink)}
[data-theme="beerpong"] h2,[data-theme="beerpong"] .cname,[data-theme="beerpong"] .title-input,
[data-theme="beerpong"] .champion .lbl,[data-theme="beerpong"] .round-label b,
[data-theme="beerpong"] .sc-crown,[data-theme="beerpong"] .theme-copy b{
  font-family:Bangers,Outfit,cursive;letter-spacing:1.2px;font-weight:400;
}
[data-theme="beerpong"] h2{font-size:24px}
[data-theme="beerpong"] .cname{font-size:34px}

/* planks, with a rack of cups at each end */
[data-theme="beerpong"] .aurora{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 190px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    linear-gradient(180deg,#8a5527 0%,#7b4a24 45%,#63391a 100%);
}
[data-theme="beerpong"] .blob{display:none}
[data-theme="beerpong"] .grid{
  opacity:.85;animation:none;mask-image:none;-webkit-mask-image:none;
  background-image:
    radial-gradient(circle at 50% 8%, rgba(208,52,44,.85) 0 16px, transparent 17px),
    radial-gradient(circle at 44% 14%, rgba(208,52,44,.8) 0 16px, transparent 17px),
    radial-gradient(circle at 56% 14%, rgba(208,52,44,.8) 0 16px, transparent 17px),
    radial-gradient(circle at 38% 20%, rgba(208,52,44,.75) 0 16px, transparent 17px),
    radial-gradient(circle at 50% 20%, rgba(208,52,44,.75) 0 16px, transparent 17px),
    radial-gradient(circle at 62% 20%, rgba(208,52,44,.75) 0 16px, transparent 17px),
    radial-gradient(circle at 50% 94%, rgba(31,111,178,.7) 0 15px, transparent 16px),
    radial-gradient(circle at 44% 88%, rgba(31,111,178,.65) 0 15px, transparent 16px),
    radial-gradient(circle at 56% 88%, rgba(31,111,178,.65) 0 15px, transparent 16px);
  background-repeat:no-repeat;
}
[data-theme="beerpong"] .grid::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,250,242,.35) 0 45%,rgba(255,250,242,.35) 55%,transparent);
  opacity:.35;
}
[data-theme="beerpong"] .logo{filter:none}
[data-theme="beerpong"] .logo svg{display:none}
[data-theme="beerpong"] .logo::before{content:"\1F964";font-size:24px;line-height:1}
[data-theme="beerpong"] .title-input{
  background-image:none;-webkit-text-fill-color:var(--ink);color:var(--ink);font-size:27px;
}
[data-theme="beerpong"] .glass,[data-theme="beerpong"] .score-card,
[data-theme="beerpong"] .match,[data-theme="beerpong"] .team-row{
  background:var(--glass);border:2.5px solid var(--stroke);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 5px 0 0 rgba(61,36,19,.85), 0 16px 30px -20px rgba(0,0,0,.6);
}
[data-theme="beerpong"] .topbar{
  background:linear-gradient(180deg,#fffaf2,#f6e6d2);
  border-bottom:3px solid var(--stroke);backdrop-filter:none;
}
[data-theme="beerpong"] .tabs,[data-theme="beerpong"] .theme-switch,
[data-theme="beerpong"] .step-switch{background:#f6e6d2;border:2px solid var(--stroke)}
[data-theme="beerpong"] .tab{color:var(--ink-dim)}
[data-theme="beerpong"] .tab.is-active,[data-theme="beerpong"] .theme-opt.is-on,
[data-theme="beerpong"] .step-opt.is-on{color:#fffaf2}
[data-theme="beerpong"] .tab-glider,[data-theme="beerpong"] .step-opt.is-on,
[data-theme="beerpong"] .theme-opt.is-on{background:var(--v1);box-shadow:none;border-color:var(--stroke)}
[data-theme="beerpong"] .pill,[data-theme="beerpong"] .chip{
  background:#fff;border:2px solid var(--stroke);color:var(--ink);
}
[data-theme="beerpong"] .btn{
  background:#fff;border:2.5px solid var(--stroke);color:var(--ink);
  box-shadow:0 4px 0 0 rgba(61,36,19,.85);
}
[data-theme="beerpong"] .btn:hover{background:#fff4e6;transform:translateY(-2px)}
[data-theme="beerpong"] .btn:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgba(61,36,19,.85)}
[data-theme="beerpong"] .btn.primary{background:var(--v1);color:#fffaf2;border-color:var(--stroke)}
[data-theme="beerpong"] .btn.danger{background:#ffe6e2;color:#8c1a14}
[data-theme="beerpong"] .btn.solid-danger{background:var(--bad);color:#fffaf2;border:2.5px solid var(--stroke)}
[data-theme="beerpong"] .icon-btn,[data-theme="beerpong"] .zoom,
[data-theme="beerpong"] .field input,[data-theme="beerpong"] .p-name,
[data-theme="beerpong"] .pts-rules label,[data-theme="beerpong"] .pts-rules input,
[data-theme="beerpong"] .use-entrants,[data-theme="beerpong"] .sc-value{
  background:#fff;border:2px solid var(--stroke);color:var(--ink);
}
[data-theme="beerpong"] .photo-drop{background:#fff;border:3px dashed var(--v1);color:var(--ink-dim)}
[data-theme="beerpong"] .photo-drop.has-photo{border:3px solid var(--stroke)}
[data-theme="beerpong"] .empty{border:3px dashed rgba(61,36,19,.4);color:var(--ink-dim);background:rgba(255,250,242,.6)}
[data-theme="beerpong"] .modal{background:rgba(42,26,16,.5)}
[data-theme="beerpong"] #toast{
  background:#fffaf2;color:var(--ink);border:2.5px solid var(--stroke);
  box-shadow:0 5px 0 0 rgba(61,36,19,.85);
}
[data-theme="beerpong"] .avatars img,[data-theme="beerpong"] .avatars .ph,
[data-theme="beerpong"] .slot .av img,[data-theme="beerpong"] .slot .av .ph{
  border:2.5px solid var(--stroke);background:#f6e6d2;color:var(--ink-dim);
}
[data-theme="beerpong"] .seed{
  background:var(--v1);color:#fffaf2;border:2px solid var(--stroke);box-shadow:none;
  font-family:Bangers,Outfit,cursive;font-size:15px;
}
[data-theme="beerpong"] .round-label b{background:#fff;border:2.5px solid var(--stroke);color:var(--ink);box-shadow:none;font-size:15px}
[data-theme="beerpong"] .round:last-child .round-label b{background:var(--v1);color:#fffaf2}
[data-theme="beerpong"] .match-head{background:#3d2413;color:#f6e6d2;border-bottom:2.5px solid var(--stroke)}
[data-theme="beerpong"] .match-head .st{color:#fff}
[data-theme="beerpong"] .slot+.slot{border-top:2px solid rgba(61,36,19,.2)}
[data-theme="beerpong"] .slot:hover:not(.empty){background:#fff4e6}
[data-theme="beerpong"] .slot.winner{
  background:linear-gradient(90deg,rgba(47,158,87,.22),rgba(47,158,87,.04));border-left-color:var(--win);
}
[data-theme="beerpong"] .slot.winner .mark{color:var(--win)}
[data-theme="beerpong"] .connectors path{stroke:rgba(61,36,19,.4)}
[data-theme="beerpong"] .connectors path.flow{stroke:var(--win);filter:none}
[data-theme="beerpong"] .champion{
  background:var(--v1);border:3px solid var(--stroke);box-shadow:0 6px 0 0 rgba(61,36,19,.85);
}
[data-theme="beerpong"] .champion .lbl{color:#ffe0d8;font-size:17px}
[data-theme="beerpong"] .champion .cname,[data-theme="beerpong"] .champion .cplayers{color:#fffaf2}
[data-theme="beerpong"] .champion .cup svg{display:none}
[data-theme="beerpong"] .champion .cup::before{content:"\1F37A";font-size:36px;line-height:1}
[data-theme="beerpong"] .champion .cav img,[data-theme="beerpong"] .champion .cav .ph{border:3px solid var(--stroke)}
[data-theme="beerpong"] .sc-value{font-family:Bangers,Outfit,cursive;font-size:38px}
[data-theme="beerpong"] .life-total{font-family:Bangers,Outfit,cursive;letter-spacing:1px}
[data-theme="beerpong"] .step{background:#fff;border:2.5px solid var(--stroke);color:var(--ink);box-shadow:0 3px 0 0 rgba(61,36,19,.8)}
[data-theme="beerpong"] .step:active{transform:translateY(2px);box-shadow:none}
[data-theme="beerpong"] .sc-crown{background:var(--v3);color:#3d2413;border:2px solid var(--stroke);font-size:14px}
[data-theme="beerpong"] .life-panel{border:2.5px solid var(--stroke)}



/* =========================================================
   PHONES - bigger targets, scrollable tabs, no iOS zoom
   ========================================================= */
/* stop the 300ms tap delay and double-tap zoom on every control */
button,.tab,.theme-opt,.step-opt,.key,.mark,.cmd-chip,.life-step,.slot,.seat,.icon-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.life-total,.dp-score,.sc-value,.dart-entry,.life-name,.cmd-chip,.mark,.key{
  -webkit-user-select:none;user-select:none;
}
.life-grid{overscroll-behavior:contain}

@media (max-width:860px){
  /* the tab strip scrolls sideways instead of wrapping into a tall block */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;min-width:0;flex:1 1 auto}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;padding:9px 14px}
  .topbar{gap:12px;padding:10px 14px}
  .title-input{font-size:19px;width:min(60vw,260px);padding:5px 8px}
  .topbar-actions{margin-left:0}
}

@media (max-width:700px){
  main{padding:16px 14px calc(48px + env(safe-area-inset-bottom))}

  /* iOS zooms the page when a focused input is under 16px */
  .field input,.p-name,.pts-rules input,.sc-value,.standings input{font-size:16px}

  /* 44px minimum on anything you have to hit with a thumb */
  .icon-btn{width:40px;height:40px;font-size:15px}
  .row-actions{gap:6px;opacity:1}
  .step-opt{padding:10px 14px}
  .theme-opt{padding:10px 12px}
  .btn{padding:12px 16px}
  .btn.sm{padding:10px 13px}
  .step{width:56px;height:44px;font-size:22px}
  .cmd-chip{min-width:34px;height:30px;font-size:12px;opacity:.85}
  .mark{min-width:48px;min-height:46px;padding:12px 0;font-size:19px}
  .key{padding:17px 0;font-size:21px}
  .life-step{padding:16px 0;font-size:30px;opacity:.9}

  /* stacks that were still assuming a desktop width */
  .scoreboard{grid-template-columns:1fr;gap:12px}
  .score-card{grid-template-columns:minmax(0,1fr) auto auto;padding:13px}
  .sc-value{width:84px;font-size:30px}
  .dart-players{grid-template-columns:1fr 1fr;gap:10px}
  .dp-score{font-size:40px}
  .theme-bar,.points-bar,.life-bar,.darts-bar,.bracket-bar{padding:12px}
  .head-actions{gap:7px}
  .life-name{font-size:11px}
  .life-name .av img,.life-name .av .ph{width:18px;height:18px}
  .champion{gap:12px;padding:14px}
  .champion .cname{font-size:20px}
  .champion .cav img,.champion .cav .ph{width:42px;height:42px}
  .modal-card{padding:18px}
  .bracket-scroll{padding:6px 2px 18px}
}

@media (max-width:460px){
  /* room is tight: the icon carries the tab, the label follows on wider phones */
  .tab{padding:9px 11px;gap:6px}
  .dart-players{grid-template-columns:1fr}
  .theme-switch{grid-template-columns:1fr}
  .quick-scores .quick{padding:11px 14px;font-size:14px}
  .life-grid{height:calc(100dvh - 240px)}
}

/* phones are held in one hand: keep the sticky form card from eating the screen */
@media (max-width:900px) and (max-height:900px){
  .form-card{position:static}
}

[data-theme="kart"] .bar-toggle,[data-theme="music"] .bar-toggle,
[data-theme="mtg"] .bar-toggle,[data-theme="beerpong"] .bar-toggle{
  background:#fff;border:2px solid var(--stroke);color:var(--ink);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}