/* The co-op panel (lobby.js) and the co-op bits of the HUD. Hand-written:
   ui/ is the exporter's. Sized in rem off the window so it reads on phones. */
.rg-lobby { position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(6, 8, 14, 0.72); font-family: Radiance, 'Segoe UI', sans-serif; color: #e8dcc0; }
.rg-lobby.shown { display: flex; }
.rg-lobby-box { width: min(560px, 92vw); max-height: 92vh; overflow: auto; padding: 18px 20px; box-sizing: border-box;
  background: linear-gradient(#1b1712, #0f0d0a); border: 1px solid #8a6d3b; border-radius: 6px; box-shadow: 0 8px 40px #000a; }
.rg-lobby-title { font-size: 22px; letter-spacing: 2px; text-transform: uppercase; color: #f2c440; margin-bottom: 12px; text-align: center; }
.rg-lobby-error { color: #ff7a6a; margin: 6px 0 10px; text-align: center; }
.rg-lobby-note { color: #b8a888; margin: 8px 0; text-align: center; font-size: 14px; }
.rg-lobby-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.rg-lobby-input { flex: 1; min-width: 140px; font-size: 18px; padding: 8px 10px; background: #0b0a08; color: #fff;
  border: 1px solid #6a5530; border-radius: 4px; outline: none; }
.rg-lobby-input.code { flex: 0 0 120px; text-transform: uppercase; letter-spacing: 6px; text-align: center; }
.rg-lobby-btn { font: inherit; font-size: 16px; padding: 9px 16px; color: #e8dcc0; background: #2a2218; border: 1px solid #8a6d3b;
  border-radius: 4px; cursor: pointer; }
.rg-lobby-btn.main { background: linear-gradient(#b0802c, #7a5418); color: #fff; border-color: #f2c440; min-width: 160px; }
.rg-lobby-btn.main.on { background: linear-gradient(#3d8c3a, #24611f); border-color: #8fe08a; }
.rg-lobby-btn.link { background: none; border-color: transparent; color: #b8a888; text-decoration: underline; }
.rg-lobby-btn:disabled { opacity: 0.45; cursor: default; }
.rg-lobby-code { font-size: 40px; letter-spacing: 10px; color: #fff; font-weight: bold; padding: 2px 10px;
  border: 1px dashed #8a6d3b; border-radius: 4px; }
.rg-lobby-list { margin: 10px 0; }
.rg-lobby-member { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 8px; padding: 7px 8px; border-bottom: 1px solid #3a3020; }
.rg-lobby-member .state { text-align: right; color: #9a8a6a; }
.rg-lobby-member.ready .state { color: #8fe08a; }
.rg-lobby-member.away { opacity: 0.5; }
.rg-lobby-heroes { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.rg-lobby-hero { flex: 1; max-width: 150px; height: 84px; border: 2px solid #4a3c24; border-radius: 4px; cursor: pointer;
  background: #000 center / cover no-repeat; position: relative; color: #fff; font: inherit; }
.rg-lobby-hero span { position: absolute; left: 0; right: 0; bottom: 0; background: #000a; font-size: 13px; padding: 3px; }
.rg-lobby-hero.on { border-color: #f2c440; box-shadow: 0 0 10px #f2c44088; }
.rg-lobby-hero.taken { opacity: 0.35; filter: grayscale(1); cursor: default; }
.rg-lobby-btn.ready.on { background: linear-gradient(#3d8c3a, #24611f); border-color: #8fe08a; color: #fff; }
.rg-lobby-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rg-lobby-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #b8a888; }
.rg-lobby-select { font: inherit; font-size: 15px; padding: 6px; background: #0b0a08; color: #e8dcc0; border: 1px solid #6a5530; border-radius: 4px; }
/* The sound panel (the sound button's) and the language button. */
#SoundPanel { position: absolute; z-index: 71; left: calc(4px + env(safe-area-inset-left)); top: 60px; display: none; flex-direction: column; gap: 8px;
  padding: 10px 12px; background: #120f0bee; border: 1px solid #8a6d3b; border-radius: 4px; font: 13px Radiance, sans-serif; color: #e8dcc0; }
#SoundPanel.shown { display: flex; }
#SoundPanel label { display: flex; flex-direction: column; gap: 4px; }
#SoundPanel input[type=range] { width: 160px; accent-color: #f2c440; }
#SoundPanel select { font: inherit; padding: 3px 6px; background: #0b0a08; color: #e8dcc0; border: 1px solid #6a5530; border-radius: 3px; }
#Lang { position: absolute; z-index: 70; right: calc(6px + env(safe-area-inset-right)); top: 6px; padding: 3px 8px; font: bold 13px sans-serif;
  color: #f3e2c0; background: #172446cc; border: 1px solid #c9a86a; border-radius: 3px; cursor: pointer; }
body.playing #Lang { display: none; }
/* The Multiplayer button next to Play on the setup screen. */
.rg-coop-btn { margin-left: 18px; }
/* The co-op HUD: teammates' names over their bars, the card timer, spectating. */
.rg-mate-nick { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap;
  font: bold 15px Radiance, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.rg-card-timer { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5; font: bold 24px Radiance, sans-serif;
  color: #ffd27a; text-shadow: 0 2px 4px #000; pointer-events: none; }
.rg-watch { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 45; padding: 4px 6px; border-radius: 4px;
  background: #000a; color: #e8dcc0; font: 16px Radiance, sans-serif; display: none; align-items: center; gap: 10px; }
.rg-watch.shown { display: flex; }
.rg-watch button { font: bold 18px sans-serif; color: #f3e2c0; background: #2a2218; border: 1px solid #8a6d3b; border-radius: 3px;
  padding: 4px 10px; cursor: pointer; pointer-events: auto; }
/* The stats panel (held Tab / the phone's button). */
.rg-stats { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 46; display: none; min-width: min(560px, 90vw);
  padding: 12px 16px; background: #0f0d0aee; border: 1px solid #8a6d3b; border-radius: 6px; color: #e8dcc0; font: 15px Radiance, sans-serif; pointer-events: none; }
.rg-stats.shown { display: block; }
.rg-stats table { width: 100%; border-collapse: collapse; }
.rg-stats th { text-align: left; color: #f2c440; font-weight: normal; padding: 4px 8px; border-bottom: 1px solid #5a4828; }
.rg-stats td { padding: 5px 8px; border-bottom: 1px solid #2a2218; }
.rg-stats td:nth-child(n+3), .rg-stats th:nth-child(n+3) { text-align: right; }
.rg-stats tr.me td { color: #8fe08a; }
.rg-stats .team { margin-top: 8px; text-align: center; color: #b8a888; }
/* A teammate off the screen: an arrow at the edge, its way (hud.syncMateEdges). */
.rg-mate-edge { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.rg-mate-edge .arrow { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
  border-left: 30px solid var(--c); filter: drop-shadow(0 0 3px #000); }
.rg-mate-edge.down .arrow { border-left-color: #ffe080; }
.rg-mate-edge span { position: absolute; left: 0; top: 22px; transform: translateX(-50%); white-space: nowrap; font: bold 20px Radiance, sans-serif;
  color: var(--c); text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.rg-mate-edge.down span { color: #ffe080; }
#StatsBtn { display: none; position: absolute; z-index: 45; right: calc(28px + env(safe-area-inset-right)); top: calc(170px + env(safe-area-inset-top));
  width: 52px; height: 40px; font-size: 20px; border-radius: 6px; border: 1px solid #c9a86a; background: #172446cc; color: #f3e2c0; }
body.touch.playing #StatsBtn { display: block; }
.rg-online { position: absolute; right: 8px; bottom: 6px; z-index: 30; font: 12px sans-serif; color: #b8a888; pointer-events: none; opacity: 0.8; }
.rg-raises { position: absolute; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30;
  font: bold 15px Radiance, sans-serif; color: #ffe080; text-shadow: 0 1px 3px #000; pointer-events: none; }
.rg-raises:empty { display: none; }
body:not(.playing) .rg-raises { display: none; }