/* Sit & Go styles — rooms filling live, the seats, the standings. Colours from tokens.css only. */
.sg-rooms { display: grid; gap: 14px; }
.sg-room { --c: var(--blue); --cd: var(--blue-deep); display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 12px 14px; min-height: 104px;
  box-shadow: 0 6px 0 var(--cd); border-left: 12px solid var(--c); transition: transform 0.08s, box-shadow 0.08s; }
.sg-room:active { transform: translateY(6px); box-shadow: 0 0 0 var(--cd); }
.sg-room-24 { --c: var(--green); --cd: var(--green-deep); } .sg-room-64 { --c: var(--grape); --cd: var(--grape-deep); }
.sg-room-n { flex: 0 0 64px; height: 64px; border-radius: 18px; background: var(--c); color: var(--chalk); display: grid; place-items: center; align-content: center; line-height: 1; }
.sg-room-n b { font-size: 1.8rem; font-weight: 900; } .sg-room-n small { font-size: 0.7rem; font-weight: 900; }
.sg-room-24 .sg-room-n { color: var(--navy-deep); }
.sg-room-mid { flex: 1; min-width: 0; display: block; }
.sg-room-mid b { display: block; font-size: 1.25rem; font-weight: 900; }
.sg-room-mid small { display: block; font-weight: 800; color: var(--ink-soft); font-size: 0.9rem; }
.sg-fill { display: block; height: 14px; background: var(--paper-2); border-radius: 7px; overflow: hidden; margin: 6px 0 2px; }
.sg-fill i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 7px; transition: width 0.6s ease-out; }
.sg-room-go { flex: 0 0 auto; background: var(--red); color: var(--chalk); font-weight: 900; border-radius: var(--r-pill); padding: 10px 16px; font-size: 1.1rem; box-shadow: 0 4px 0 var(--red-deep); }
.sg-tipped .sg-room-count { color: var(--red); }
html[data-grade="1"] .sg-room { min-height: 120px; }
.sg-count { text-align: center; font-weight: 900; font-size: 1.15rem; color: var(--yellow); margin: -6px 0 8px; font-variant-numeric: tabular-nums; }
.sg-seats .sg-seat { color: var(--chalk); font-weight: 900; font-size: 0.72rem; transition: background 0.2s, transform 0.2s; }
.sg-seats .sg-seat svg { width: 70%; height: 70%; }
.sg-filling .sg-seat.sg-new { animation: sg-sit 0.25s cubic-bezier(.3,1.8,.5,1); }
.sg-seats .sg-seat.you { box-shadow: 0 0 0 3px var(--yellow); }
.sg-seats64 { gap: 4px; }
.sg-seats64 .sg-seat { border-radius: 6px; font-size: 0.55rem; }
@keyframes sg-sit { from { transform: scale(0.4); } }
.sg-legend { display: flex; justify-content: center; gap: 18px; font-weight: 800; color: var(--wood-line); font-size: 0.9rem; }
.sg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sg-key { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; color: var(--chalk); }
.sg-key svg { width: 80%; height: 80%; }
.sg-key-you { background: var(--red); border: 2px solid var(--red-deep); } .sg-key-bot { background: var(--blue); border: 2px solid var(--blue-deep); }
.sg-hud { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin: 0 0 6px; }
.sg-hud .hud-box { text-align: left; }
.sg-hud .sg-hb-pts { text-align: center; }
.sg-rd { font-size: 1.2rem !important; }
.sg-pts { color: var(--yellow); font-variant-numeric: tabular-nums; }
.sg-feed { min-height: 1.6em; }
.sg-rank { display: flex; flex-direction: column; align-items: center; background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 10px; margin: 0 0 12px; box-shadow: 0 6px 0 var(--wood-deep); }
.sg-rank b { font-size: 3rem; font-weight: 900; color: var(--red); line-height: 1; }
.sg-rank span { font-weight: 800; color: var(--ink-soft); }
.sg-rank-out b { color: var(--ink-soft); }
.sg-note { margin: 0 0 8px; }
.sg-list .sg-mini { width: 26px; height: 26px; flex: 0 0 26px; color: var(--blue-deep); }
.sg-list .sg-mini svg { width: 100%; height: 100%; }
.sg-list small { font-size: 0.75rem; color: var(--ink-soft); font-weight: 800; }
.sg-list li.sg-out { opacity: 0.55; }
.sg-tag-out { background: var(--paper-2); border-radius: var(--r-pill); padding: 2px 8px; }
.sg-final { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; text-align: left; }
.sg-final li { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border-radius: var(--r-sm); padding: 6px 10px; font-weight: 800; }
.sg-final li b { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--chalk); display: grid; place-items: center; font-size: 0.85rem; flex: 0 0 26px; }
.sg-final li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-final li em { font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; }
.sg-final li.sg-me { background: var(--yellow); }
.sg-banking { font-weight: 800; color: var(--ink-soft); margin: 8px 0; }
@media (prefers-reduced-motion: reduce) { .sg-filling .sg-seat.sg-new { animation: none; } .sg-fill i { transition: none; } }
.sg-stage .qc-pic { min-height: 0; margin-bottom: 6px; }
.sg-stage .qc-pic svg { max-height: 96px; }