/* Showdown: loaded after ../hub.css. Same tokens; a royal blue accent and the game pieces. */
:root{ --pulse:#4d8dff; --pulse-deep:#2a5fc4; --pulse-glow:rgba(77,141,255,.35); --gold:#ffc23d; --link:#a9c8ff; }
:root[data-theme="light"]{ --pulse:#2f6fe0; --pulse-deep:#1d4ea8; --pulse-glow:rgba(47,111,224,.22); --gold:#b07800; --link:#1d4ea8; }

.sdlogo svg{color:var(--gold);filter:drop-shadow(0 0 6px rgba(255,194,61,.45))}

/* Teams: elements set --t to the team's colour */
.tchip{display:inline-flex;align-items:center;gap:.5em;border-radius:999px;padding:.3em .8em;font-weight:700;
  background:color-mix(in srgb,var(--t,#8f7dff) 16%,var(--ink-3));border:1.5px solid color-mix(in srgb,var(--t,#8f7dff) 55%,transparent);color:var(--text)}
.tchip i{width:.7em;height:.7em;border-radius:50%;background:var(--t);flex:none}
.tdot{display:inline-block;width:.8em;height:.8em;border-radius:50%;background:var(--t,#8f7dff);vertical-align:-.05em;margin-right:.35em}

/* Board */
.board{display:grid;gap:1.1vmin;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);height:100%}
.board .cat{display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:800;
  background:var(--ink-3);border:1px solid var(--line);border-radius:1.4vmin;padding:.8vmin 1vmin;line-height:1.1;overflow:hidden}
.board .sq{display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--gold);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-3));border:1.5px solid var(--line);border-radius:1.4vmin;
  transition:transform .08s,border-color .15s,box-shadow .15s;cursor:pointer;padding:0}
.board .sq:hover:not(:disabled){border-color:var(--pulse);box-shadow:0 0 0 .4vmin var(--pulse-glow);transform:translateY(-.2vmin)}
.board .sq:disabled{cursor:default}
.board .sq.played{color:transparent;background:var(--ink);border-style:dashed;position:relative}
.board .sq.played .by{color:var(--faint);font-family:var(--body);font-weight:700;font-size:.4em;display:flex;align-items:center;gap:.4em}
.board .sq.empty{visibility:hidden}

/* Wager buttons on the phone */
.wager{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wager button{border:1.5px solid var(--line);background:var(--ink-3);border-radius:12px;padding:10px 6px;font-weight:700;color:var(--text);line-height:1.2}
.wager button small{display:block;font-weight:400;color:var(--muted);font-size:.78rem;margin-top:2px}
.wager button[aria-checked="true"]{border-color:var(--pulse);background:color-mix(in srgb,var(--pulse) 20%,var(--ink-3))}

.badge{display:inline-flex;align-items:center;gap:.35em;border-radius:999px;padding:.15em .65em;font-size:.8em;font-weight:700;
  background:color-mix(in srgb,var(--gold) 22%,var(--ink-3));border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);color:var(--text)}
.pts{font-family:var(--mono);font-weight:700}
.pts.up{color:var(--mint)} .pts.down{color:var(--red)} .pts.zero{color:var(--muted)}
.rules{margin:0;padding-left:1.2em;color:var(--muted)}
.rules li{margin:.25em 0}
.rules b{color:var(--text)}