/* The curses, the endless mode and the records (endless-ui.js), in the codex
   look (codex.css's variables and its .rg-lobby panel). Hand-written. */

/* The difficulty screen's button: over the screen's foot, left of START. */
.rg-curse-btn {
  position: absolute; z-index: 6; right: 330px; bottom: 46px; padding: 12px 20px; cursor: pointer; pointer-events: auto;
  font: 700 17px/1 var(--cx-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-muted);
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.9), rgba(24, 18, 12, 0.92)); border: 1px solid rgba(214, 164, 65, 0.35); border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: color .2s, border-color .2s, filter .2s;
}
.rg-curse-btn:hover { color: var(--cx-gold-hi); border-color: var(--cx-gold); }
.rg-curse-btn.on { color: #ffb59c; border-color: var(--cx-ember); filter: drop-shadow(0 0 10px rgba(196, 80, 47, 0.45)); }

/* The curse panel's and the lobby's chips: a row each, an ember diamond lit when on. */
.rg-curse-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin: 10px 0; }
.rg-curse {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 3px 10px; align-items: baseline; text-align: left;
  padding: 10px 12px 10px 30px; cursor: pointer; color: var(--cx-text); border: 0; border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(20, 16, 10, 0.55)); box-shadow: inset 0 0 0 1px rgba(214, 164, 65, 0.16);
  transition: box-shadow .2s, background .2s;
}
.rg-curse::before {
  content: ''; position: absolute; left: 11px; top: 14px; width: 8px; height: 8px; transform: rotate(45deg);
  border: 1px solid var(--cx-gold-lo); background: transparent; transition: background .2s, box-shadow .2s;
}
.rg-curse .name { font: 700 13px var(--cx-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-gold-hi); }
.rg-curse .text { grid-column: 1 / -1; font: 13px var(--cx-body); color: var(--cx-muted); }
.rg-curse .plus { font: 700 12px var(--cx-display); color: var(--cx-faint); }
.rg-curse:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(246, 217, 138, 0.45); }
.rg-curse.on { background: linear-gradient(180deg, rgba(196, 80, 47, 0.2), rgba(40, 14, 8, 0.5)); box-shadow: inset 0 0 0 1px rgba(196, 80, 47, 0.7); }
.rg-curse.on::before { background: var(--cx-ember); border-color: #ffb59c; box-shadow: 0 0 8px rgba(196, 80, 47, 0.9); }
.rg-curse.on .plus { color: #ffb59c; }
.rg-curse.moot { opacity: 0.45; }
.rg-curse:disabled { cursor: default; }
.rg-curse.endless { grid-column: 1 / -1; }
.rg-curse.endless.on { background: linear-gradient(180deg, rgba(111, 180, 214, 0.18), rgba(8, 20, 30, 0.5)); box-shadow: inset 0 0 0 1px rgba(111, 180, 214, 0.7); }
.rg-curse.endless.on::before { background: var(--cx-frost); border-color: #cdeeff; box-shadow: 0 0 8px rgba(111, 180, 214, 0.9); }
.rg-curses-total { margin: 4px 0 2px; text-align: center; font: 700 16px var(--cx-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-gold-hi); }
.rg-curses .rg-lobby-box { width: min(640px, 94vw); }

/* The lobby: under the host's settings. */
.rg-lobby-curses { margin: 10px 0 4px; }
.rg-curses-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rg-curses-head .title { font: 700 10.5px var(--cx-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-faint); }
.rg-curses-head .sum { font: 700 12px var(--cx-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-gold); }
.rg-lobby-curses .rg-curse-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; margin: 6px 0 0; }
.rg-lobby-curses .rg-curse { padding: 7px 9px 7px 26px; }
.rg-lobby-curses .rg-curse::before { left: 9px; top: 11px; }
.rg-lobby-curses .rg-curse .text { font-size: 11.5px; }
.rg-lobby-curses.compact { margin-top: 6px; }
.rg-lobby-curses.compact .rg-curse-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.rg-lobby-curses.compact .rg-curse { grid-template-columns: minmax(0, 1fr); padding: 4px 4px 4px 21px; align-content: center; min-height: 30px; }
.rg-lobby-curses.compact .rg-curse::before { left: 6px; top: 50%; margin-top: -4px; }
.rg-lobby-curses.compact .rg-curse .name { font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.1; min-width: 0; }
.rg-lobby-curses.compact .rg-curse .text { display: none; }
.rg-lobby-curses.compact .rg-curse .plus { display: none; } /* the head's sum says it */
.rg-lobby-curses.compact .rg-curse.endless { grid-column: auto; }

/* The records: a corner button by the gear (the setup screen, online). */
.rg-records-btn {
  position: absolute; z-index: 70; left: calc(36px + env(safe-area-inset-left)); top: 34px; width: 28px; height: 22px; padding: 0; cursor: pointer; pointer-events: auto;
  display: none; border: 0; border-radius: 0; font: 13px/22px sans-serif; background: rgba(10, 9, 7, 0.72);
  box-shadow: inset 0 0 0 1px rgba(214, 164, 65, 0.45); transition: box-shadow .2s;
}
.rg-records-btn.shown { display: block; }
.rg-records-btn:hover { box-shadow: inset 0 0 0 1px var(--cx-gold-hi), 0 0 12px rgba(214, 164, 65, 0.35); }
.rg-records .rg-records-box { width: min(760px, 96vw); }
.rg-records-tabs .rg-lobby-select { width: auto; min-width: 200px; flex: 1 1 200px; }
.rg-records-table { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; }
.rg-rec-row { display: grid; grid-template-columns: 42px 1fr 64px 92px; gap: 10px; align-items: center; padding: 7px 10px;
  background: linear-gradient(90deg, rgba(214, 164, 65, 0.06), transparent 70%); box-shadow: inset 0 -1px 0 rgba(214, 164, 65, 0.1); }
.rg-rec-row.endless { grid-template-columns: 42px 1fr 64px 52px 92px; }
.rg-rec-row.head { background: none; box-shadow: inset 0 -1px 0 var(--cx-hair); font: 700 10.5px var(--cx-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cx-faint); }
.rg-rec-row.me { background: linear-gradient(90deg, rgba(95, 174, 116, 0.18), transparent 80%); box-shadow: inset 2px 0 0 var(--cx-radiant); }
.rg-rec-row .place { font: 700 18px var(--cx-display); color: var(--cx-gold-hi); text-align: center; }
.rg-rec-row:nth-child(2) .place { color: #ffe08a; text-shadow: 0 0 10px rgba(246, 217, 138, 0.6); }
.rg-rec-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-rec-row .nicks { font: 15px var(--cx-body); color: var(--cx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-rec-row .sub { font: 12px var(--cx-body); color: var(--cx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-rec-row .time, .rg-rec-row .loop { font: 14px var(--cx-body); color: var(--cx-muted); text-align: right; }
.rg-rec-row .score { font: 700 16px var(--cx-display); color: var(--cx-gold-hi); text-align: right; }

/* A run: the loop under the raises label; a new loop's banner. */
.rg-loop-label { position: absolute; left: 50%; top: calc(max(92px, 13%) + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30; pointer-events: none;
  font: 700 13px var(--cx-display); letter-spacing: 0.14em; text-transform: uppercase; color: #9fd6f0; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.rg-loop-label:empty { display: none; }
body:not(.playing) .rg-loop-label { display: none; }
.rg-loop-banner { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); z-index: 46; pointer-events: none; text-align: center; opacity: 0; }
.rg-loop-banner.shown { animation: rg-loop-in 3.5s ease-out both; }
.rg-loop-banner .big { font: 700 clamp(34px, 7vh, 64px)/1 var(--cx-display); letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(176deg, #e9f8ff 0%, var(--cx-frost) 55%, #2f6f91 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(111, 180, 214, 0.45)); }
.rg-loop-banner .sub { margin-top: 8px; font: 700 16px var(--cx-display); letter-spacing: 0.2em; text-transform: uppercase; color: #ffb59c; text-shadow: 0 1px 4px #000; }
@keyframes rg-loop-in { 0% { opacity: 0; transform: translate(-50%, 16px) scale(0.96); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* The post-game's note (bottom left, where the post-game has nothing): the
   curses' factor, the loop, the place. */
.rg-postnote { position: absolute; left: calc(2% + env(safe-area-inset-left)); bottom: 11%; z-index: 45; display: none; pointer-events: none; max-width: 40%;
  padding: 8px 18px; text-align: left; background: var(--cx-grain), linear-gradient(162deg, rgba(27, 24, 19, 0.92), rgba(12, 10, 8, 0.92));
  background-size: 180px 180px, auto; background-blend-mode: soft-light, normal; box-shadow: var(--cx-frame), 0 12px 36px rgba(0, 0, 0, 0.6); }
.rg-postnote.shown { display: block; animation: cx-rise 0.45s cubic-bezier(.2, .8, .2, 1) both; }
.rg-postnote .line { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; margin: 3px 0; }
.rg-postnote .a { font: 700 14px var(--cx-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-gold-hi); }
.rg-postnote .b { font: 13px var(--cx-body); color: var(--cx-muted); }
.rg-postnote .place .a { color: #a8e8a0; }