/* SLQ Game Lobby — the shooter's screen: the picture, what is shown on top of it, the stand and the menu. */
#arena { position: fixed; inset: 0; z-index: 60; background: #0b0f14; color: #e8eef5; overflow: hidden; user-select: none; -webkit-user-select: none; }
#arena[hidden] { display: none; }
#arena .sh-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.25rem; opacity: .85; }
.sh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sh-hud { position: absolute; inset: 0; pointer-events: none; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.sh-hud.paused .sh-cross, .sh-hud.paused .sh-note { visibility: hidden; }

/* the cross in the middle: four strokes that move apart when the aim is unsteady */
.sh-cross { position: absolute; left: 50%; top: 50%; --gap: 6px; }
.sh-cross i { position: absolute; background: #fff; box-shadow: 0 0 2px #000; }
.sh-cross i:nth-child(1) { width: 2px; height: 9px; left: -1px; top: calc(-9px - var(--gap)); }
.sh-cross i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: var(--gap); }
.sh-cross i:nth-child(3) { width: 9px; height: 2px; top: -1px; left: calc(-9px - var(--gap)); }
.sh-cross i:nth-child(4) { width: 9px; height: 2px; top: -1px; left: var(--gap); }
.sh-hit { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;
  background: linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.sh-hit.head { background: linear-gradient(45deg, transparent 44%, #ffd94a 44%, #ffd94a 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ffd94a 44%, #ffd94a 56%, transparent 56%); transform: scale(1.25); }

.sh-score { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 12px; background: rgba(10, 14, 20, .55); font-size: 1.25rem; white-space: nowrap; }
.sh-score .rd, .sh-feed .rd, .sh-board .rd .hd { color: #ff6b73; }
.sh-score .bl, .sh-feed .bl, .sh-board .bl .hd { color: #6ba3ff; }
.sh-score .st { color: #ffcf33; }
.sh-score em { font-style: normal; font-size: .85rem; opacity: .75; margin-left: 14px; font-variant-numeric: tabular-nums; }
.sh-feed { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: .95rem; }
.sh-feed div { background: rgba(10, 14, 20, .55); border-radius: 8px; padding: 3px 10px; }
.sh-feed span { margin: 0 8px; opacity: .8; font-weight: 500; }
.sh-note { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); padding: 6px 16px; border-radius: 10px; background: rgba(10, 14, 20, .55); font-size: 1.1rem; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.sh-big { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: 2.6rem; font-weight: 700; opacity: 0; transition: opacity .25s; text-align: center; white-space: nowrap; text-shadow: 0 3px 14px #000; }
.sh-big.count { font-size: 7rem; color: #ffd94a; text-shadow: 0 3px 14px #000, 0 0 30px rgba(255, 200, 60, .6); }
.sh-big.go { color: #8fe36a; font-size: 4rem; }
.sh-big.kill { font-size: 1.5rem; top: 62%; color: #ffd94a; }

.sh-health { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 1.5rem; }
.sh-bar { width: 220px; height: 16px; border-radius: 9px; background: rgba(10, 14, 20, .6); overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.sh-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(#7fe36a, #45b83a); transition: width .15s; }
.sh-health.low .sh-bar i { background: linear-gradient(#ff7a6a, #d23b3b); }
.sh-weapon { position: absolute; right: 18px; bottom: 16px; text-align: right; }
.sh-weapon b { display: block; font-size: 1.2rem; }
.sh-weapon span { display: block; font-size: 1.7rem; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.sh-slots { display: flex; gap: 5px; justify-content: flex-end; margin-top: 4px; }
.sh-slots i { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: .8rem; background: rgba(10, 14, 20, .5); opacity: .35; text-shadow: none; }
.sh-slots i.own { opacity: .85; }
.sh-slots i.on { background: #ffb347; color: #1c1728; opacity: 1; }

.sh-dmg { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 150px 45px rgba(200, 25, 25, .8); }
.sh-arrow { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; opacity: 0; border-radius: 50%; border: 0 solid transparent; border-top: 10px solid rgba(255, 70, 60, .85); transform: translate(-50%, -50%); filter: blur(1px); }
.sh-scope { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at center, transparent 0, transparent 27vh, rgba(0, 0, 0, .96) 28vh), linear-gradient(#000, #000) center / 2px 56vh no-repeat, linear-gradient(#000, #000) center / 56vh 2px no-repeat; }
.sh-stat { position: absolute; left: 18px; top: 12px; font-size: .75rem; opacity: .6; font-weight: 500; font-variant-numeric: tabular-nums; }
.sh-dead { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 1.5rem; opacity: 0; text-align: center; padding: 10px 22px; border-radius: 12px; background: rgba(10, 14, 20, .6); }
.sh-shield { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); opacity: 0; font-size: .9rem; color: #9fe8ff; }
.sh-shield::after { content: 'Beskyttet et øjeblik'; }

/* the stand */
.sh-board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: min(560px, 92vw); max-width: 92vw; max-height: 86vh; overflow: auto; background: rgba(10, 14, 20, .88); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 16px 18px; pointer-events: none; }
.sh-board[hidden] { display: none; }
.sh-board .title { text-align: center; font-weight: 600; opacity: .8; margin-bottom: 10px; }
.sh-board .title.win { font-size: 1.7rem; color: #ffd94a; opacity: 1; }
.sh-board .cols { display: flex; gap: 18px; }
.sh-board .col { flex: 1; min-width: 0; }
.sh-board .hd { font-size: 1.15rem; font-weight: 700; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 2px solid rgba(255, 255, 255, .18); white-space: pre; }
.sh-board .row { padding: 3px 6px; border-radius: 6px; display: flex; justify-content: space-between; gap: 14px; }
.sh-board .row.me { background: rgba(255, 255, 255, .12); }
.sh-board .row.lbl { opacity: .55; font-size: .8rem; }
.sh-board .kd { font-variant-numeric: tabular-nums; color: #bcd0e6; white-space: nowrap; }
.sh-board .next { text-align: center; margin-top: 12px; opacity: .7; font-size: .9rem; }

/* the menu, shown whenever the mouse is free */
.sh-menu { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 10, 16, .55); cursor: pointer; }
.sh-menu[hidden] { display: none; }
.sh-menu .box { width: min(540px, 92vw); background: rgba(22, 20, 34, .94); border-radius: 18px; padding: 20px 22px; cursor: default; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.sh-menu h2 { margin: 0 0 4px; font-size: 1.6rem; }
.sh-menu p { margin: 0 0 12px; opacity: .85; }
.sh-menu .keys { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 14px; font-size: .9rem; }
.sh-menu .keys div { display: flex; gap: 8px; align-items: baseline; }
.sh-menu kbd { font: inherit; font-size: .8rem; background: rgba(255, 255, 255, .12); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.sh-menu .btn.big { width: 100%; margin-bottom: 10px; }
.sh-menu .row { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-menu .row .btn { flex: 1 1 auto; }
@media (max-width: 900px) { .sh-feed { top: 58px; font-size: .85rem; } .sh-score { font-size: 1.05rem; } }
@media (max-width: 700px) { .sh-bar { width: 130px; } .sh-big.count { font-size: 5rem; } .sh-menu .keys { grid-template-columns: 1fr; } }