/* rehearsal.css — champion select emulator.
*
* The stage is deliberately dark in BOTH site themes. Everything else on
* lafter.gg follows the theme toggle, but this panel is imitating a specific
* piece of software that has exactly one appearance, and a light-mode champion
* select would be less faithful, not more considerate. The site chrome around
* it (nav, bar) stays theme-aware, so the toggle still visibly does something.
*
* Palette is local to this file and prefixed --cs-, so it can never be
* mistaken for a site token or leak into one.
*/
.rehearsalPage {
--cs-void: #04070c;
--cs-deep: #0a1220;
--cs-panel: #101c2e;
--cs-line: #1f3552;
--cs-line-soft: #16283f;
--cs-gold: #c8aa6e;
--cs-gold-dim: #785a28;
--cs-gold-lit: #f0e6d2;
--cs-blue: #0acbe6;
--cs-blue-deep: #0a323c;
--cs-red: #ef6d75;
--cs-red-deep: #3c1418;
--cs-text: #cdd7e0;
--cs-text-dim: #7f8b99;
/* Fixed to the viewport, not min-height: this is imitating an application
window, and a champion select you have to scroll is not one. Everything
inside scrolls in its own pane instead. */
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ===== Emulator controls (site chrome, theme-aware) ===== */
.rhBar {
/* A grid, not a flex row. Centring the middle group in a flex row only
centres it between its neighbours, so it drifted left or right depending
on how wide the queue slider and the buttons happened to be. Equal 1fr
side columns put it on the page's centre line regardless. */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
padding: 7px 18px;
border-bottom: 1px solid var(--border);
background: var(--bg-card);
flex-shrink: 0;
}
.rhBarGroup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rhBarRight { margin-left: auto; }
/* Start/Restart with End beneath it, both centred on the bar's middle. */
.rhBarStack { flex-direction: column; align-items: flex-start; gap: 6px; }
.rhToggles { display: flex; align-items: center; gap: 14px; }
/* Side by side, not stacked -- two short words sit on one line, and stacking
them was what forced the bar tall enough to need the padding below. */
.rhBarCenter { flex-direction: row; align-items: center; gap: 10px; }
/* One word each now, so they need far less room -- and a size up, since these
are the two controls the page is actually driven by.
Widths are fixed per button and expressed in ch, so each is sized to the
text it holds but does not resize when that text changes. The left one says
Start or Restart depending on state; sizing it to its content would make it
jump two characters wider the moment a draft begins, shifting the button
under the cursor at exactly the moment someone might click it again. 7ch is
the longer of the two words. End is three characters and gets a width that
says so, rather than matching a neighbour it has nothing in common with. */
/* Matched against .lg, which these buttons also carry. Both selectors are two
classes, so specificity ties and source order decides -- and .rehearsalBtn.lg
is defined further down the file, so it was winning with padding: 9px 22px.
The widths here were computed as if the padding were zero, which left End
50px wide holding 44px of padding: the text had nowhere to sit and spilled
right, which is the off-centre label.
Padding and width now live in the same rule so they cannot disagree again. */
.rhBarCenter .rehearsalBtn.lg {
white-space: nowrap;
font-size: 0.82rem;
padding: 9px 18px;
text-align: center;
}
/* Start/Restart needs a locked width -- its label changes, and sizing to
content would resize it under the cursor the moment a draft begins. 7ch is
the longer word, and ch is the right unit for a monospace face.
End does not: its label never changes, so it sizes to its own content and is
centred by definition. Pinning it to 3ch was worse than useless -- ch
measures the font's "0" glyph, so it is exactly three characters only once
JetBrains Mono has loaded, and in the swap window the fallback made the box
the wrong size for its own text. A label that never changes gains nothing
from a fixed width. */
.rhBarCenter #startBtn { width: calc(7ch + 36px); }
/* Live and Access stacked, one width, so they line up as a block on the right
and neither moves when the other's label changes. */
.rhBarRight { flex-direction: column; align-items: flex-end; gap: 5px; }
/* One width for both, wide enough that "Access code On XXXXXX" stays on one
line -- the label, the state and the code all sit inside this button. */
.rhBarRight .rhBarBtn { width: 210px; justify-content: center; white-space: nowrap; }
.rhBarBtn.access {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
white-space: nowrap;
background: transparent;
border-color: var(--border);
color: var(--text-muted);
}
.rhBarBtn.access:hover { border-color: var(--gold-dim); color: var(--text); }
.rhBarBtn.access.on { border-color: var(--gold-dim); color: var(--gold); }
.accessLabel { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.accessState { font-weight: 700; }
.accessCode { font-weight: 700; letter-spacing: 0.14em; color: var(--gold); }
/* Dimmed rather than hidden: the underscores are the point -- they show the
code slots are there and empty. */
.rhBarBtn.access.noCode .accessCode { color: var(--text-muted); opacity: 0.65; }
.accessCode { cursor: copy; }
.accessCode:hover { color: var(--gold-light); }
.accessCode.copied { color: var(--verified); }
.rhBarLabel {
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.rhBarBtn {
font-family: var(--font-mono);
font-size: 0.68rem;
padding: 5px 12px;
border-radius: 6px;
border: 1px solid var(--accent-border);
background: var(--accent);
color: var(--accent-text);
cursor: pointer;
transition: filter 0.15s ease, border-color 0.15s ease;
}
.rhBarBtn:hover { filter: brightness(1.12); }
.rhBarBtn.on { border-color: var(--gold); }
.rhBarBtn.ghost {
background: transparent;
border-color: var(--border);
color: var(--text-muted);
}
.rhBarBtn.ghost:hover { border-color: var(--gold-dim); color: var(--text); }
.rehearsalToggle {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-mono);
font-size: 0.68rem; color: var(--text-muted);
cursor: pointer; user-select: none;
}
.rehearsalToggle input { accent-color: var(--gold); cursor: pointer; }
.rehearsalBtn {
padding: 5px 14px; border-radius: 6px;
font-family: var(--font-mono); font-size: 0.68rem;
border: 1px solid var(--gold-dim);
background: linear-gradient(140deg, var(--gold), var(--gold-light));
color: var(--on-gold); cursor: pointer;
transition: filter 0.12s ease;
}
.rehearsalBtn:hover { filter: brightness(1.08); }
.rehearsalBtn.danger { background: transparent; color: var(--red-x); border-color: color-mix(in srgb, var(--red-x) 40%, transparent); }
.rehearsalBtn.danger:hover { background: color-mix(in srgb, var(--red-x) 10%, transparent); }
.rehearsalBtn:disabled { opacity: 0.35; pointer-events: none; }
/* ===== The emulated client ===== */
.csStage {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
color: var(--cs-text);
background:
radial-gradient(ellipse 90% 55% at 50% 0%, #12243a 0%, transparent 70%),
linear-gradient(180deg, var(--cs-deep) 0%, var(--cs-void) 100%);
}
.csHeader {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
padding: 8px 26px 10px;
border-bottom: 1px solid var(--cs-line-soft);
flex-shrink: 0;
}
.csTeamName {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.csTeamName.blue { color: var(--cs-blue); }
.csTeamName.red { color: var(--cs-red); text-align: right; }
.csTimer { text-align: center; min-width: 210px; }
.csPhase {
font-family: var(--font-mono);
font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--cs-text-dim);
}
.csClock {
font-family: var(--font-mono);
font-size: 1.9rem; font-weight: 700; line-height: 1.1;
color: var(--cs-gold-lit);
font-variant-numeric: tabular-nums;
}
.timerBar {
width: 210px; height: 2px; margin: 4px auto 0;
background: var(--cs-line); overflow: hidden;
}
.timerFill {
height: 100%; width: 100%;
background: linear-gradient(90deg, var(--cs-gold-dim), var(--cs-gold));
transition: width 1s linear;
}
.notStarted .timerBar, .notStarted .csClock,
.finished .timerBar, .finished .csClock { opacity: 0; }
.csMain {
flex: 1;
display: grid;
grid-template-columns: 212px minmax(0, 1fr) 212px;
gap: 0;
min-height: 0;
}
/* --- team columns --- */
.csTeam { display: flex; flex-direction: column; min-height: 0; padding: 10px; }
/* The sitewide bug-report button floats bottom-left and was sitting on top of
the blue team's last slot. Clearing it here rather than moving a widget
every other page depends on. */
.csTeam.blue { padding-bottom: 52px; }
.csTeam > div { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.csSlot {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
border: 1px solid var(--cs-line-soft);
border-radius: 3px;
background: linear-gradient(180deg, var(--cs-panel), var(--cs-deep));
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.csTeam.blue .csSlot.locked { border-color: color-mix(in srgb, var(--cs-blue) 45%, transparent); }
.csTeam.red .csSlot.locked { border-color: color-mix(in srgb, var(--cs-red) 45%, transparent); }
.csSlot.active {
border-color: var(--cs-gold);
box-shadow: 0 0 0 1px var(--cs-gold-dim), 0 0 22px -6px var(--cs-gold);
}
.csSlot.hovering { border-style: dashed; }
/* The seat you claimed by clicking it.
*
* This class was being set and never styled -- there was no way to tell, in
* rehearsal itself, which slot you had claimed. It is only visible downstream:
* the payload turns it into localPlayerCellId, and the live page tints that
* draft row gold and defaults the suggestions panel to that player. So the one
* page where you set it showed nothing, and a page you were not looking at
* showed the consequence. Deliberately not gold: gold means on the clock. */
.csSlot.isYou {
border-color: color-mix(in srgb, var(--cs-gold-lit) 30%, var(--cs-line));
}
.csSlot.isYou::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--cs-gold-lit);
opacity: 0.75;
z-index: 2;
}
.csSlot.isYou .csSlotName { color: var(--cs-gold-lit); }
.csSlot.swapSelected, .csSlot.positionSwapSelected { border-color: var(--cs-gold-lit); }
/* The team-wide highlight during bans: nobody's individual slot is picking,
so the whole column lights instead of an arbitrary one. */
#myTeamSlots.teamActive, #enemyTeamSlots.teamActive {
outline: 1px solid var(--cs-gold);
outline-offset: 4px;
border-radius: 4px;
}
.csSlotArt { position: absolute; inset: 0; }
.csSlotArt img {
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 12%;
filter: saturate(0.9);
}
.csSlot:not(.locked) .csSlotArt img { filter: saturate(0.15) brightness(0.55); }
.csSlotScrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(4,7,12,0.15) 0%, rgba(4,7,12,0.55) 55%, rgba(4,7,12,0.94) 100%);
}
.csSlotRole {
position: absolute; top: 6px; left: 6px;
display: flex; align-items: center; gap: 4px;
font-family: var(--font-mono);
font-size: 0.52rem; letter-spacing: 0.14em;
color: var(--cs-text-dim);
text-shadow: 0 1px 3px #000;
}
.roleIcon { width: 11px; height: 11px; fill: currentColor; }
/* Riot's files are white on transparent. brightness(0) flattens them to black
so the sepia/saturate chain can tint from a known starting point, which is
how you colour an you cannot edit. The drawn fallback is an