/* Shuffleboard: what only the tavern has. The rest comes from /rooms/room.css. */

.sb-score { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; max-width: min(560px, calc(100vw - 150px)); pointer-events: none; }
.sb-score:empty { display: none; }
.sb-side { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; padding: 8px 12px; min-width: 150px; border-radius: 12px;
  background: rgba(14, 10, 8, .82); border: 1px solid rgba(217, 178, 107, .25); color: #eee6d6; }
.sb-side.now { border-color: #d9b26b; box-shadow: 0 0 0 1px #d9b26b55, 0 6px 20px #0007; }
.sb-side .dot { width: 12px; height: 12px; border-radius: 50%; }
.sb-side .dot.a, .sb-left i.a { background: #c0281e; }
.sb-side .dot.b, .sb-left i.b { background: #2347b0; }
.sb-side .who { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.sb-side b { font: 700 24px/1 "Segoe UI", Arial, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.sb-left { grid-column: 1 / -1; display: flex; gap: 5px; }
.sb-left i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px #ddd8; }
.sb-left i.used { opacity: .2; }
.sb-round { width: 100%; margin: 0; text-align: center; font-size: 12px; color: #d8cdb8; text-shadow: 0 1px 3px #000; }
.sb-round span { color: #f1d59a; }
@media (max-width: 760px) { .sb-score { top: calc(64px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 20px); } .sb-side { min-width: 0; padding: 6px 10px; } }

/* the power meter: where the weight would come to rest on an empty board */
.sb-power { position: absolute; z-index: 4; right: calc(18px + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); width: 34px; height: min(52vh, 380px); border-radius: 9px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.28); overflow: hidden; pointer-events: none; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.sb-power[hidden] { display: none; }
.sb-power .band { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(0,0,0,.35); }
.sb-power .band small { font: 800 10px/1 system-ui, sans-serif; color: rgba(0,0,0,.75); letter-spacing: .02em; }
.sb-power .short { background: #3a3a3a; }
.sb-power .one { background: #c9b48a; }
.sb-power .two { background: #e3b04b; }
.sb-power .three { background: #e57a2e; }
.sb-power .four { background: #e0453a; }
.sb-power .off { background: #4a1f1c; }
.sb-power .off small { color: rgba(255,255,255,.7); }
.sb-power.bare .band, .sb-power.soft .band { display: none; }
/* Normal: the zones' colours shaded together, no edges or numbers */
.sb-power.soft { background: var(--soft); }
.sb-power.soft .fill { background: rgba(255,255,255,.22); }
.sb-power.bare .fill { background: linear-gradient(to top, rgba(255,255,255,.12), rgba(255,255,255,.4)); }
.sb-power .fill { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(255,255,255,.28); }
.sb-power .line { position: absolute; left: -2px; right: -2px; height: 3px; margin-bottom: -1.5px; background: #fff; box-shadow: 0 0 6px #fff, 0 0 0 1px rgba(0,0,0,.5); }

.swatch-weights { min-height: 90px; height: 100%; display: flex; gap: 14px; align-items: center; justify-content: center; background: radial-gradient(circle, #6b4a2a, #2a1a0e); }
.swatch-weights i { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, var(--a) 0 58%, var(--body) 60%); box-shadow: 0 4px 6px #0008, inset 0 0 0 2px #fff4; }
.swatch-weights i.b { background: radial-gradient(circle, var(--b) 0 58%, var(--body) 60%); }
.swatch-weights.glow i { box-shadow: 0 0 14px var(--a), inset 0 0 0 2px #fff4; }
.swatch-sboard { min-height: 90px; height: 100%; display: grid; place-items: center; background: var(--rail); }
.swatch-sboard b { width: 52px; height: 84px; background: linear-gradient(var(--line) 0 3px, transparent 3px 22px, var(--line) 22px 25px, transparent 25px 44px, var(--line) 44px 47px, transparent 47px), var(--wood); box-shadow: 0 0 0 4px #1118; }
.swatch-room { min-height: 90px; height: 100%; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 20%, var(--light), transparent 60%), var(--wall); }
.swatch-room b { width: 30px; height: 70px; background: linear-gradient(#a8784a, #6b4a2a); box-shadow: 0 6px 12px #000a; }