/* Darts: what only the oche has. The rest comes from /rooms/room.css. */

/* the scoreboard: a chalkboard at the top left */
.dt-board { position: absolute; z-index: 3; left: calc(14px + env(safe-area-inset-left, 0px)); top: calc(72px + env(safe-area-inset-top, 0px)); min-width: 190px; max-width: 260px;
  padding: 12px 14px; border-radius: 12px; background: rgba(18, 22, 20, .86); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 10px 26px #0008;
  color: #e9efe9; font: 14px/1.3 var(--font, system-ui); }
.dt-board[hidden] { display: none; }
.dt-head { display: grid; margin-bottom: 8px; }
.dt-head strong { font: 600 13px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #d9b26b; }
.dt-head span { font-size: 12px; color: #a9b3ad; }
.dt-line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; }
.dt-line.now { background: rgba(217, 178, 107, .14); box-shadow: inset 3px 0 0 #d9b26b; }
.dt-line.out { opacity: .4; text-decoration: line-through; }
.dt-line .who { color: #cfd8d2; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-line b { font: 700 26px/1 "Segoe UI", Arial, sans-serif; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.dt-line small { grid-column: 1 / -1; color: #93a099; font-size: 11px; }
.dt-visit { display: flex; gap: 6px; margin-top: 8px; }
.dt-visit i { flex: 1; min-width: 0; height: 26px; display: grid; place-items: center; border-radius: 6px; border: 1px dashed rgba(255,255,255,.18); font: 700 12px var(--font); font-style: normal; color: #fff; }
.dt-visit i.thrown { border-style: solid; background: rgba(255,255,255,.08); }
.dt-hint { margin: 8px 0 0; font-size: 12px; color: #a9b3ad; }
.dt-hint b { color: #f1d59a; }
.dt-cricket { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.dt-cricket th, .dt-cricket td { padding: 2px 6px; text-align: center; }
.dt-cricket thead th { font-size: 11px; color: #a9b3ad; font-weight: 600; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-cricket thead th.now { color: #f1d59a; }
.dt-cricket tbody th { color: #d9b26b; text-align: left; }
.dt-cricket td { font: 700 15px var(--font); color: #fff; }
.dt-cricket td.closed { color: #7fd69a; }
.dt-cricket tr.pts td { border-top: 1px solid rgba(255,255,255,.15); color: #f1d59a; }
@media (max-width: 760px) {
  .dt-board { top: auto; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px; max-width: none; padding: 8px 10px; }
  .dt-line b { font-size: 20px; }
}

/* what a dart scored, where it landed */
.dt-pops { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.dt-pop { position: absolute; transform: translate(-50%, -50%); font: 800 18px/1 var(--font); color: #fff; white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,.9), 0 2px 3px #000; animation: dtpop 1.1s ease-out forwards; }
.dt-pop.big { font-size: 24px; color: #ffe9a8; }
@keyframes dtpop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -240%); } }

/* the shop */
.swatch-dart { min-height: 90px; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle, #2a2522, #0d0b0a); }
/* the dart itself on a slant (the box stays square in its card) */
.swatch-dart > span { display: flex; align-items: center; transform: rotate(-20deg); }
.swatch-dart i { display: block; height: 8px; }
.swatch-dart i.f { width: 26px; height: 22px; background: linear-gradient(var(--flight) 50%, var(--flight2) 50%); clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%); }
.swatch-dart i.b { width: 46px; border-radius: 4px; background: linear-gradient(var(--barrel), #0006); box-shadow: inset 0 2px 0 #fff4; }
.swatch-dart i.p { width: 26px; height: 3px; background: #c9ccd2; }
.swatch-board { min-height: 90px; height: 100%; display: grid; place-items: center; background: #0d0b0a; }
.swatch-board b { width: 70px; height: 70px; border-radius: 50%; border: 6px solid #111;
  background: radial-gradient(circle, var(--red) 0 7%, var(--green) 7% 14%, transparent 14%),
    repeating-conic-gradient(from -9deg, var(--dark) 0 18deg, var(--light) 18deg 36deg); box-shadow: 0 0 0 3px #555; }
.swatch-board.glow b { box-shadow: 0 0 14px var(--red), 0 0 0 3px #555; }
.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: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #333 0 60%, var(--surround) 61%); box-shadow: 0 6px 12px #000a; }

/* a visit's total, called: bigger and brighter the higher it is */
.dt-total { position: absolute; left: 50%; top: 34%; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; }
.dt-total strong { display: block; font: 900 40px/1 var(--font, system-ui); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  text-shadow: 0 3px 0 #0006, 0 0 18px #0009; -webkit-text-stroke: 1px #0005; }
.dt-total.on { animation: dtcall 1.3s ease-out forwards; }
.dt-total.good strong { color: #ffe9a8; }
.dt-total.ton strong { color: #ffd76a; text-shadow: 0 4px 0 #0007, 0 0 26px #ffb84d99; }
.dt-total.ton.on { animation: dtcallbig 1.9s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.dt-total.huge strong { color: #ffb347; text-shadow: 0 4px 0 #0008, 0 0 34px #ff8a1ecc, 0 0 70px #ff5a1e66; }
.dt-total.huge.on { animation: dtcallbig 1.9s cubic-bezier(.2, 1.8, .4, 1) forwards, dtshake .45s linear 2; }
.dt-total.max strong { color: #ffd84a; -webkit-text-stroke: 2px #7a3500; text-shadow: 0 5px 0 #7a3500, 0 8px 0 #0007, 0 0 30px #ffb000, 0 0 80px #ff7a1acc; }
.dt-total.max.on { animation: dtcallmax 2.6s cubic-bezier(.2, 2, .4, 1) forwards, dtshake .35s linear 4; }
@keyframes dtcall { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
@keyframes dtcallbig { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05); } }
@keyframes dtcallmax { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); } 16% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(3deg); } 28% { transform: translate(-50%, -50%) scale(1) rotate(0); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
@keyframes dtshake { 0%, 100% { margin-left: 0; } 25% { margin-left: -6px; } 75% { margin-left: 6px; } }
@media (prefers-reduced-motion: reduce) { .dt-total.on, .dt-total.ton.on, .dt-total.huge.on, .dt-total.max.on { animation: dtfade 1.8s ease-out forwards; } }
@keyframes dtfade { 0%, 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }