.variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 12px;
}
.variant-card {
  --variant-accent: #adddff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  min-height: 100px;
  padding: 13px 11px;
  text-align: start;
  border: 1px solid #344960;
  border-radius: 12px;
  background: #101e2d;
}
.variant-card:nth-child(2) { --variant-accent: #f0bc81; }
.variant-card:nth-child(3) { --variant-accent: #d3b6fd; }
.variant-card {
  background: linear-gradient(145deg,color-mix(in srgb,var(--variant-accent) 18%,#151832),#10182d 83%);
  border-color: color-mix(in srgb,var(--variant-accent) 38%,#1e2247);
}
.variant-card:hover { border-color: var(--variant-accent); background: #182b3e; }
.variant-symbol {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--variant-accent);
  background: #22384c;
}
.variant-card > [data-icon] { color: var(--variant-accent); width: 15px; height: 19px; }
.variant-card strong,.variant-card small,.variant-card > span:nth-child(2) > span { display: block; }
.variant-card strong { font-size: 15px; }
.variant-card small,.variant-summary small { color: var(--variant-accent,#c4dffe); font-size: 11px; font-weight: 850; margin-block: 3px 4px; }
.variant-card > span:nth-child(2) > span { color: #bfcde0; font-size: 11px; line-height: 1.35; }
.dialog .variant-summary {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 5px 9px 8px;
  border-inline-start: 2px solid #8ebddd;
  background: #101c2a;
  font-size: 12px;
}
.room-variant { display: flex; align-items: center; gap: 8px; margin-block: 7px; }
.room-variant select { min-height: 31px; border: 1px solid #42556e; border-radius: 6px; background: #0f1d2c; padding-inline: 5px; }
.objective-status {
  position: relative;
  --indicator: #90cbf4;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: min(285px, 39vw);
  padding: 6px 8px;
  border: 1px solid #5e819375;
  border-inline-start: 2px solid var(--indicator);
  border-radius: 7px;
  color: #e4edf7;
  background: linear-gradient(120deg,color-mix(in srgb,var(--indicator) 13%,#121630),#121b32f5);
}
.objective-status [data-icon] { color: var(--indicator); width: 15px; height: 15px; }
.objective-status strong,.objective-status small { display: block; font-size: 12px; line-height: 1.18; }
.objective-status small { margin-block-start: 2px; color: #d1daef; font-size: 11px; overflow-wrap: anywhere; }
.objective-status b { color: var(--indicator); font: 800 11px ui-monospace,monospace; white-space: nowrap; direction: ltr; }
.objective-status[data-tone=warn] { --indicator: #f5c888; }
.objective-status[data-tone=danger] { --indicator: #ff9c9c; }
.objective-status[data-tone=active] { --indicator: #bdf19f; }
.power-status[data-tone=active] { --indicator: #d7c0ff; }
.getaway-status { --indicator: #7ce9ff; }
.ghost-status { --indicator: #d4b6ff; }
.pressure-status::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; height: 2px; width: var(--pressure-fill,0%); background: var(--indicator); border-radius: inherit; }
.spectate-status,.half-status {
  position: absolute;
  z-index: 2;
  inset-inline: 18%;
  inset-block-end: 6%;
  width: max-content;
  max-width: 64%;
  margin-inline: auto;
  padding: 9px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #7695ae;
  border-radius: 9px;
  background: #0d1929f2;
  color: #f4f8ff;
}
.half-status { inset-block: 38% auto; border-color: #d9bc80; }
.spectate-status [data-icon],.half-status [data-icon] { color: #f3cf9b; }
.spectate-status strong,.half-status strong { display: block; font-size: clamp(12px,1.55vw,18px); }
.spectate-status small,.half-status small { display: block; color: #bed0e0; font-size: 11px; margin-block-start: 2px; }
.spectate-status::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; height: 2px; width: var(--rescue-fill,0%); background: #bdeea6; border-radius: inherit; }
#game[data-input-locked=true] .actions,
#game[data-input-locked=true] #joystick,
#game[data-input-locked=true] #sprint-gauge,
#game[data-input-locked=true] #sprint-touch,
#game[data-input-locked=true] [data-open=pings],
#game[data-input-locked=true] [data-open=emotes],
#game[data-input-locked=true] [data-action=pass],
#game[data-input-locked=true] [data-action=drop] { display: none !important; }
.half-results { display: grid; gap: 6px; margin-block: 9px; }
.half-result { display: flex; gap: 8px; justify-content: space-between; background: #102030; border: 1px solid #3a5067; border-radius: 7px; padding: 6px 8px; }
.half-result strong { color: #eed19d; }
.weekly-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-block-start: 14px;
  padding: 13px 17px;
  border: 1px solid #5a4a62;
  border-inline-start: 3px solid #d6b5f4;
  border-radius: 12px;
  background: linear-gradient(105deg,#261b32,#152132);
}
.weekly-card h3 { margin: 3px 0; font-size: clamp(15px,2.1vw,22px); }
.weekly-card p { margin: 0; color: #c7bad2; font-size: 12px; }
.weekly-card small,.weekly-reward { color: #d9bfec; font-weight: 800; }
.weekly-card .btn { flex: none; }
.weekly-ghost-options,.ghost-result {
  display: grid; gap: 6px; padding: 10px 12px; margin-block: 8px;
  color: #edddff; background: linear-gradient(115deg,#33214f,#171c38);
  border: 1px solid #7a5eaa; border-inline-start: 3px solid #cba6ff; border-radius: 10px;
}
.weekly-ghost-options label { display: grid; gap: 5px; color: #f3e7ff; font-weight: 800; }
.weekly-ghost-options select {
  width: 100%; min-height: 44px; color: #f4ecff; background: #1e2141;
  border: 1px solid #9577c8; border-radius: 7px; padding-inline: 9px;
}
.weekly-ghost-options small,.ghost-result small { color: #dfc9f7; line-height: 1.3; }
.ghost-result { display: flex; align-items: center; }
.ghost-result > [data-icon] { flex: none; color: #d8b7ff; }
.ghost-result > div { min-width: 0; overflow-wrap: anywhere; }
.ghost-result small { display: block; }
.weekly-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 12px; }
.weekly-facts span { padding: 5px 8px; border: 1px solid #516783; background: #122135; border-radius: 6px; font-size: 12px; font-weight: 750; }
.invite-link { display: grid; gap: 5px; margin-block: 9px; min-width: 0; }
.invite-link input {
  min-width: 0; width: 100%; color: #d7eafa; background: #0f1a2b;
  border: 1px solid #465b74; border-radius: 7px; padding: 6px 7px; font: 12px ui-monospace,monospace;
}
.tactic-status { --indicator: #d8b9fc; }
.result-tactics { margin-block: 8px; color: #dbeaf8; }
.result-tactics summary { cursor: pointer; font-weight: 800; font-size: 13px; }
.summary-stage { display: grid; gap: 6px; margin-block: 8px; }
.summary-stage canvas { display: block; width: 100%; aspect-ratio: 2; border: 1px solid #40556e; border-radius: 7px; background: #101725; }
.summary-events { display: grid; gap: 4px; max-height: 122px; overflow: auto; }
.summary-events button {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px;
  padding: 4px 6px; text-align: start; border: 1px solid #3d516c; background: #111d2c;
  color: #e5eef9; border-radius: 6px; min-height: 30px; font-size: 11px;
}
.summary-events button[aria-pressed=true] { border-color: #f3cc85; }
.summary-events button b { color: #f4d5a1; }
.rematch-progress { display: flex; flex-wrap: wrap; gap: 7px; min-height: 20px; color: #bed3e9; font-size: 11px; }
.rematch-progress time { font: 800 11px ui-monospace,monospace; color: #edcb94; }
@media (max-width: 650px) {
  .variant-grid { grid-template-columns: 1fr; gap: 6px; }
  .variant-card { min-height: 63px; padding: 8px; align-items: center; }
  .weekly-card { padding: 10px; }
  .weekly-card .btn { padding-inline: 7px; font-size: 11px; }
}
@media (max-height: 440px) and (orientation: landscape) {
  .spectate-status,.half-status { padding: 5px 8px; inset-block-end: 5%; }
  .half-status { inset-block: 39% auto; }
  .objective-status { max-width: min(39vw,225px); padding: 4px 6px; }
  .objective-status strong { font-size: 11px; }
  .objective-status small { font-size: 10px; }
}