/* ============ Oh Stuffing! — playful card-table theme ============ */
:root{
  --bg0:#160a29;
  --bg1:#241046;
  --panel:rgba(46, 27, 82, .55);
  --panel-2:rgba(60, 36, 105, .45);
  --stroke:rgba(168, 132, 255, .22);
  --stroke-strong:rgba(190, 160, 255, .40);
  --ink:#f3ecff;
  --ink-dim:#b9a9e0;
  --ink-faint:#8f7fbf;
  --violet:#8b5cf6;
  --violet-2:#a855f7;
  --pink:#ec4899;
  --cyan:#22d3ee;
  --gold:#ffd24a;
  --silver:#d7dbe6;
  --bronze:#e29a5b;
  --good:#34d399;
  --bad:#fb7185;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --radius:22px;
  /* semantic surfaces (flipped in the light theme) */
  --fill:rgba(255,255,255,.07);
  --fill-hover:rgba(255,255,255,.14);
  --sunken:rgba(0,0,0,.28);
  --input-bg:rgba(0,0,0,.22);
  --zebra:rgba(255,255,255,.025);
  --table-head:#241243;
  --table-rnd:#211040;
  --toast-bg:#2b1550;
  --app-bg:
    radial-gradient(1200px 700px at 12% -10%, #3a1c6e 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, #6d1f5a 0%, transparent 50%),
    linear-gradient(160deg, var(--bg1), var(--bg0));
  --orb-1:var(--violet);
  --orb-2:var(--pink);
  --orb-opacity:.35;
}

/* =================== LIGHT THEME =================== */
:root[data-theme="light"]{
  --bg0:#efe9fb;
  --bg1:#f5f0fd;
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(255,255,255,.55);
  --stroke:rgba(110,70,190,.20);
  --stroke-strong:rgba(110,70,190,.38);
  --ink:#2c1c53;
  --ink-dim:#5d4b8a;
  --ink-faint:#8b7ab3;
  --violet:#7c3aed;
  --violet-2:#9333ea;
  --pink:#db2777;
  --cyan:#0e8aa8;
  --gold:#b07a00;
  --silver:#8b93a7;
  --bronze:#b06a30;
  --good:#0a9d6b;
  --bad:#e11d48;
  --shadow:0 18px 45px -22px rgba(80,40,140,.4);
  --fill:rgba(90,55,170,.07);
  --fill-hover:rgba(90,55,170,.14);
  --sunken:rgba(90,55,170,.07);
  --input-bg:rgba(255,255,255,.8);
  --zebra:rgba(90,55,170,.04);
  --table-head:#ece3fb;
  --table-rnd:#f1eafc;
  --toast-bg:#ffffff;
  --app-bg:
    radial-gradient(1200px 700px at 12% -10%, #e7dcfb 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 10%, #fcdcef 0%, transparent 50%),
    linear-gradient(160deg, #f3edfc, #ede6fa);
  --orb-opacity:.22;
}
:root[data-theme="light"] .dealer-chip{
  background:rgba(255,196,0,.2);border-color:rgba(176,122,0,.45);color:#8a5c00
}
:root[data-theme="light"] .lb-row.r1 .rank-badge{color:#5a3d00}
:root[data-theme="light"] .primary-btn{box-shadow:0 12px 26px -12px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.35)}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* allow normal scrolling but block pinch-zoom and double-tap-to-zoom */
html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:"Nunito", system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--app-bg);
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-orbs::before,.bg-orbs::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:var(--orb-opacity)
}
.bg-orbs::before{width:340px;height:340px;left:-60px;bottom:-80px;background:var(--orb-1)}
.bg-orbs::after{width:300px;height:300px;right:-40px;top:30%;background:var(--orb-2)}

button{font-family:inherit;cursor:pointer;border:none;color:inherit}
button:disabled{cursor:not-allowed;opacity:.4}
input{font-family:inherit}
h1,h2,h3{font-family:"Fredoka", "Nunito", sans-serif;margin:0}

/* ---------------- Top bar ---------------- */
.topbar{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px clamp(14px,3vw,28px);
}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{
  font-size:30px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation:bob 3.2s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-4px) rotate(-4deg)}}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-family:"Fredoka";font-weight:700;font-size:22px;letter-spacing:.3px}
.brand-tag{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:2px}
.top-actions{display:flex;align-items:center;gap:9px}
.ghost-btn{
  background:var(--fill);border:1px solid var(--stroke);
  color:var(--ink-dim);padding:9px 14px;border-radius:999px;font-weight:700;font-size:13px;
  transition:.15s;
}
.ghost-btn:hover{background:var(--fill-hover);color:var(--ink)}
.icon-btn{
  width:40px;height:40px;border-radius:999px;flex:none;font-size:17px;line-height:1;
  background:var(--fill);border:1px solid var(--stroke);transition:.15s;
  display:grid;place-items:center;
}
.icon-btn:hover{background:var(--fill-hover);transform:rotate(-12deg)}

/* ---------------- Tab bar (mobile) ---------------- */
.tabbar{
  position:relative;z-index:2;display:flex;gap:8px;
  padding:4px clamp(14px,3vw,28px) 0;
}
.tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:12px;border-radius:16px 16px 0 0;font-weight:800;font-size:15px;
  background:var(--fill);color:var(--ink-faint);
  border:1px solid transparent;border-bottom:none;transition:.15s;
}
.tab[aria-selected="true"]{
  background:var(--panel);color:var(--ink);
  border-color:var(--stroke);box-shadow:0 -6px 20px -12px rgba(0,0,0,.6);
}
.tab .badge{background:var(--pink);color:#fff;border-radius:999px;padding:0 7px;font-size:11px}

/* ---------------- Layout ---------------- */
.layout{
  position:relative;z-index:1;
  padding:12px clamp(14px,3vw,28px) 40px;
  display:block;
}
.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:clamp(16px,2.5vw,26px);
}

/* On phones: show one panel at a time via tabs */
@media (max-width:899px){
  body[data-tab="entry"] #panel-board{display:none}
  body[data-tab="board"] #panel-entry{display:none}
  .panel{border-top-left-radius:0}
}
/* On tablet/desktop: split screen, hide tabs */
@media (min-width:900px){
  .tabbar{display:none}
  .layout{display:grid;grid-template-columns:minmax(340px,440px) 1fr;gap:22px;align-items:start}
  #panel-entry{position:sticky;top:12px}
}

/* ---------------- Section headings ---------------- */
.sec-title{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(20px,4.5vw,30px);font-weight:700;letter-spacing:.5px;
  margin-bottom:4px;
}
.sec-sub{color:var(--ink-faint);font-size:13px;margin-bottom:18px;font-weight:600}
.suit{opacity:.5}
.suit.red{color:var(--pink)}

/* ---------------- Setup: player inputs ---------------- */
.player-inputs{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.pin-row{display:flex;align-items:center;gap:10px}
.pin-grip{color:var(--ink-faint);font-size:18px;width:22px;text-align:center;user-select:none}
.pin-input{
  flex:1;background:var(--input-bg);border:1px solid var(--stroke);
  color:var(--ink);padding:13px 14px;border-radius:14px;font-size:16px;font-weight:700;
  transition:.15s;
}
.pin-input::placeholder{color:var(--ink-faint);font-weight:600}
.pin-input:focus{outline:none;border-color:var(--violet-2);background:var(--input-bg);
  box-shadow:0 0 0 3px rgba(168,85,247,.18)}
.pin-x{
  width:38px;height:38px;border-radius:11px;background:rgba(251,113,133,.12);
  color:var(--bad);font-size:18px;font-weight:800;flex:none;transition:.15s
}
.pin-x:hover{background:rgba(251,113,133,.24)}

.add-btn{
  width:100%;padding:13px;border-radius:14px;font-size:15px;font-weight:800;
  background:var(--fill);border:1.5px dashed var(--stroke-strong);color:var(--ink-dim);
  transition:.15s;
}
.add-btn:hover{background:var(--fill-hover);color:var(--ink)}

/* Preview chip */
.preview{
  display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--fill);border:1px solid var(--stroke);
  border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;color:var(--ink-dim)
}
.chip b{color:var(--ink)}
.chip.cyan{border-color:rgba(34,211,238,.4);color:var(--cyan)}

/* ---------------- Primary button ---------------- */
.primary-btn{
  width:100%;padding:16px;border-radius:16px;font-size:17px;font-weight:800;letter-spacing:.3px;
  color:#fff;background:linear-gradient(135deg,var(--violet),var(--pink));
  box-shadow:0 12px 28px -12px var(--violet), inset 0 1px 0 rgba(255,255,255,.3);
  transition:.15s;margin-top:14px;
}
.primary-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.primary-btn:active:not(:disabled){transform:translateY(1px)}
.primary-btn.end{background:linear-gradient(135deg,#f59e0b,var(--pink))}

.btn-row{display:flex;gap:10px;margin-top:14px}
.btn-row .primary-btn{margin-top:0}
.sub-btn{
  padding:16px 16px;border-radius:16px;font-weight:800;font-size:15px;white-space:nowrap;
  background:var(--fill);border:1px solid var(--stroke);color:var(--ink-dim);transition:.15s;flex:none
}
.sub-btn:hover:not(:disabled){background:var(--fill-hover);color:var(--ink)}
.sub-btn.reset{color:var(--bad);border-color:rgba(251,113,133,.4)}
.sub-btn.reset:hover:not(:disabled){background:rgba(251,113,133,.14);color:var(--bad)}

/* press-and-hold to confirm */
.holdable{position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.holdable .hold-label{position:relative;z-index:1}
.holdable .hold-fill{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:var(--hold-color,rgba(251,113,133,.42));
  transform:scaleX(0);transform-origin:left center;
}
.holdable.holding{border-color:var(--bad)}

/* ---------------- Reorder list ---------------- */
.order-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.order-item{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--stroke);border-radius:14px;padding:12px 12px;
  transition:.15s;
}
.order-item.dragging{opacity:.5;border-style:dashed}
.order-item.dealer-first{border-color:rgba(255,210,74,.45);box-shadow:0 0 0 1px rgba(255,210,74,.2) inset}
.oi-num{width:26px;height:26px;border-radius:50%;background:var(--fill);
  display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--ink-dim);flex:none}
.oi-name{flex:1;font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px}
.oi-arrows{display:flex;gap:6px}
.oi-arrows button{width:34px;height:34px;border-radius:10px;background:var(--fill);
  color:var(--ink-dim);font-size:15px;font-weight:900}
.oi-arrows button:hover:not(:disabled){background:var(--fill-hover);color:var(--ink)}
.mini-note{font-size:12px;color:var(--ink-faint);font-weight:700;margin:2px 2px 12px}

/* ---------------- Play mode ---------------- */
.round-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(236,72,153,.18));
  border:1px solid var(--stroke-strong);border-radius:16px;padding:14px 16px;margin-bottom:14px;
}
.rh-left{display:flex;flex-direction:column;gap:2px}
.rh-round{font-family:"Fredoka";font-weight:700;font-size:20px}
.rh-progress{font-size:12px;color:var(--ink-dim);font-weight:700}
.rh-hand{
  text-align:center;background:var(--sunken);border:1px solid var(--stroke);
  border-radius:14px;padding:8px 14px;flex:none
}
.rh-hand .num{font-family:"Fredoka";font-size:26px;font-weight:700;line-height:1}
.rh-hand .lbl{font-size:10px;letter-spacing:1.5px;color:var(--ink-faint);text-transform:uppercase}

.dealer-chip{
  font-size:11px;font-weight:800;background:rgba(255,210,74,.16);color:var(--gold);
  border:1px solid rgba(255,210,74,.4);border-radius:999px;padding:2px 9px;letter-spacing:.5px
}

.entry-heads{
  display:grid;grid-template-columns:minmax(66px,1fr) 100px 100px;gap:7px;align-items:center;
  padding:0 6px 8px;font-size:11px;letter-spacing:1.5px;color:var(--ink-faint);
  text-transform:uppercase;font-weight:800;
}
.entry-heads span:not(:first-child){text-align:center}
.prow{
  display:grid;grid-template-columns:minmax(66px,1fr) 100px 100px;gap:7px;align-items:center;
  background:var(--panel-2);border:1px solid var(--stroke);border-radius:14px;
  padding:10px 10px;margin-bottom:9px;transition:.15s;
}
.prow.is-dealer{border-color:rgba(255,210,74,.4)}
.prow-name{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.name-line{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.name-line .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:15px}
.prow-name .dealer-chip{margin-left:2px}
.stepper{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--sunken);border:1px solid var(--stroke);border-radius:12px;padding:4px;gap:2px;
}
.stepper button{
  width:32px;height:34px;border-radius:9px;font-size:19px;font-weight:900;line-height:1;
  background:var(--fill);color:var(--ink);transition:.12s;flex:none
}
.stepper button:hover:not(:disabled){background:var(--violet);color:#fff}
.stepper .sval{flex:1;text-align:center;font-family:"Fredoka";font-weight:700;font-size:19px;min-width:18px}
.stepper.forbidden{border-color:var(--bad);box-shadow:0 0 0 2px rgba(251,113,133,.2)}
.stepper.exact{border-color:var(--good)}

/* validity meters */
.meters{display:flex;gap:8px;flex-wrap:wrap;margin:12px 2px 2px}
.meter{
  flex:1;min-width:130px;display:flex;align-items:center;gap:8px;
  background:var(--sunken);border:1px solid var(--stroke);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:700
}
.meter .lbl{color:var(--ink-faint)}
.meter .v{margin-left:auto;font-family:"Fredoka";font-weight:700;font-size:16px}
.meter.ok{border-color:rgba(52,211,153,.45)}
.meter.ok .v{color:var(--good)}
.meter.bad{border-color:rgba(251,113,133,.45)}
.meter.bad .v{color:var(--bad)}
.warn-line{color:var(--bad);font-size:12.5px;font-weight:800;margin:8px 2px 0;min-height:16px}

/* ---------------- Board: leaderboard ---------------- */
.lb{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:9px;margin-bottom:22px;
}
.lb-row{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:7px;align-items:center;
  background:var(--panel-2);border:1px solid var(--stroke);border-radius:13px;padding:8px 9px;
  transition:.2s;
}
.lb-row .rank-badge{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:"Fredoka";font-weight:700;font-size:13px;background:var(--fill);color:var(--ink-dim)
}
.lb-row.r1{border-color:rgba(255,210,74,.5);background:linear-gradient(100deg,rgba(255,210,74,.16),var(--panel-2))}
.lb-row.r1 .rank-badge{background:linear-gradient(135deg,#ffe08a,#f5a623);color:#3a2600}
.lb-row.r2 .rank-badge{background:linear-gradient(135deg,#eef1f7,#aeb6c9);color:#2a2f3a}
.lb-row.r3 .rank-badge{background:linear-gradient(135deg,#f3b985,#c8763b);color:#3a1f00}
.lb-nm{display:flex;align-items:center;gap:5px;min-width:0}
.lb-nm .suit{font-size:12px}
.lb-nm .nm{font-weight:800;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pts{font-family:"Fredoka";font-weight:700;font-size:18px;color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums;padding-left:2px}

/* ---------------- Board: round table ---------------- */
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--stroke);-webkit-overflow-scrolling:touch}
table.score{border-collapse:collapse;width:100%;font-size:13px;min-width:max-content}
table.score th,table.score td{padding:8px 10px;text-align:center;white-space:nowrap}
table.score thead th{
  position:sticky;top:0;background:var(--table-head);z-index:3;
  font-size:11px;letter-spacing:.5px;color:var(--ink-dim);font-weight:800;
  border-bottom:1px solid var(--stroke)
}
table.score thead th.player{border-left:1px solid var(--stroke);color:var(--ink)}
table.score thead tr.sub th{top:34px;font-size:10px;color:var(--ink-faint);letter-spacing:1px}
table.score td.rnd{position:sticky;left:0;background:var(--table-rnd);font-weight:800;color:var(--ink-dim);z-index:2}
table.score td.rnd .h{font-size:10px;color:var(--ink-faint);display:block;font-weight:700}
table.score .cell{border-left:1px solid var(--stroke)}
table.score .bm{color:var(--ink-faint);font-weight:700;font-variant-numeric:tabular-nums}
table.score .bm .made{color:var(--ink)}
table.score .bm .made.hit{color:var(--good)}
table.score .bm .made.miss{color:var(--bad)}
table.score .sc{font-family:"Fredoka";font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
table.score tr:nth-child(even) td:not(.rnd){background:var(--zebra)}
table.score td.rank1{background:rgba(255,210,74,.13)!important}
table.score td.rank2{background:rgba(215,219,230,.10)!important}
table.score td.rank3{background:rgba(226,154,91,.12)!important}
table.score td.now{box-shadow:inset 0 0 0 2px rgba(168,85,247,.5)}
.mv{font-size:10px;margin-left:3px}
.mv.up{color:var(--good)}.mv.down{color:var(--bad)}

/* ---------------- Stats ---------------- */
.stats-title{font-size:18px;font-weight:700;margin:24px 0 12px;display:flex;align-items:center;gap:8px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.stat-card{
  background:var(--panel-2);border:1px solid var(--stroke);border-radius:14px;padding:13px 14px
}
.stat-card .k{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);font-weight:800}
.stat-card .v{font-family:"Fredoka";font-weight:700;font-size:24px;margin-top:3px}
.stat-card .v small{font-size:13px;color:var(--ink-dim);font-weight:600}
.stat-card .who{font-size:12px;color:var(--ink-dim);font-weight:700;margin-top:2px}

.pstat-table{width:100%;border-collapse:collapse;font-size:13px}
.pstat-table th,.pstat-table td{padding:9px 8px;text-align:center}
.pstat-table th{font-size:10.5px;letter-spacing:.5px;color:var(--ink-faint);text-transform:uppercase;font-weight:800;border-bottom:1px solid var(--stroke)}
.pstat-table td:first-child,.pstat-table th:first-child{text-align:left;font-weight:800}
.pstat-table tr:not(:last-child) td{border-bottom:1px solid var(--stroke)}

/* ---------------- Empty & winner states ---------------- */
.empty{
  text-align:center;color:var(--ink-faint);padding:40px 16px;font-weight:700
}
.empty .big{font-size:46px;margin-bottom:10px;display:block}
.winner{
  text-align:center;padding:22px 16px;
  background:linear-gradient(135deg,rgba(255,210,74,.16),rgba(236,72,153,.14));
  border:1px solid rgba(255,210,74,.4);border-radius:18px;margin-bottom:18px
}
.winner .cup{font-size:52px;display:block;animation:bob 2.4s ease-in-out infinite}
.winner .who{font-family:"Fredoka";font-weight:700;font-size:26px;margin:4px 0}
.winner .pts{color:var(--cyan);font-weight:800}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,20px);
  background:var(--toast-bg);border:1px solid var(--stroke-strong);color:var(--ink);
  padding:12px 18px;border-radius:14px;font-weight:800;font-size:14px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw;text-align:center
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.hidden{display:none!important}