:root {
  --bg: #eef1f6;
  --card: #ffffff;
  --card-alt: #e4e7ee;
  --ink: #2f3542;
  --text: #2f3542;
  --muted: #7a8194;
  --blue: #3b9cff;
  --blue-dark: #1f6fd1;
  --red: #ff6b6b;
  --red-dark: #c94444;
  --grey: #d6dae3;
  --grey-dark: #9aa1b1;
  --green: #74e06f;
  --yellow: #ffd952;
  --gold-dark: #a56b00;
  --topbar: #3a4256;
  --row-hover: #f2f6ff;
  --me-row: #e8f3ff;
}

[data-theme='dark'] {
  --bg: #1b1f2a;
  --card: #2a3042;
  --card-alt: #222736;
  --ink: #0f1118;
  --text: #f1f3f8;
  --muted: #9aa3b8;
  --grey: #3d4457;
  --grey-dark: #262b3a;
  --topbar: #12151f;
  --row-hover: #323950;
  --me-row: #2c3d5c;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Fredoka', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
}

a {
  color: inherit;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar {
  background: var(--topbar);
  color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 4px solid var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.war-bet-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-bottom: 3px solid var(--ink);
  background: var(--yellow);
  color: #332200;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 16px;
  cursor: pointer;
  flex-wrap: wrap;
  text-align: center;
}

[data-theme='dark'] .war-bet-banner {
  background: #caa53d;
  color: #1b1200;
}

.war-bet-banner-cta {
  text-decoration: underline;
  white-space: nowrap;
}

.war-bet-guess-field {
  margin-top: 6px;
}
.war-bet-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.war-bet-steps .btn {
  padding: 4px 9px;
  font-size: 12px;
}
.war-bet-steps .btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.war-bet-steps-gap {
  width: 10px;
}

.war-bet-recent-wrap {
  background: var(--card-alt);
  border-radius: 10px;
  padding: 10px 12px 4px;
}
.war-bet-recent-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 6px;
}
.war-bet-recent {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.war-bet-recent td {
  padding: 7px 0;
  font-size: 14px;
  border-top: 1px solid var(--grey);
}
.war-bet-recent tr:first-child td {
  border-top: none;
}
.war-bet-recent td:first-child {
  text-align: left;
}
.war-bet-recent-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.war-bet-reveal-table thead th {
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-bottom: 2px solid var(--grey);
}
.war-bet-reveal-table thead th.war-bet-reveal-name {
  text-align: left;
}
.war-bet-value-cell {
  width: 1%;
  white-space: nowrap;
}
.war-bet-recent-use {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.war-bet-recent-use .btn {
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
  flex: none;
}
.war-bet-recent-max td {
  color: var(--gold-dark);
}
.war-bet-modal .row {
  justify-content: center;
}

.brand img {
  height: 36px;
}

.brand span {
  white-space: nowrap;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.topbar nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
}

.nav-icon {
  width: 1.15em;
  height: 1.15em;
  text-align: center;
  line-height: 1;
  flex: none;
}
.nav-icon img {
  display: block;
  width: 100%;
  height: 100%;
}
.calculator-nav-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: #eaf5ff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calculator-nav-icon svg rect {
  fill: #59adff;
  stroke: #eaf5ff;
}
.calculator-nav-icon svg path {
  stroke: #21334d;
}
.nav-trade-unread,
.nav-duel-unread {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.topbar nav a.active {
  background: var(--blue);
  box-shadow: 0 3px 0 var(--blue-dark);
}

.theme-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 18px;
}

.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

.page-loading {
  min-height: calc(100vh - 180px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 700;
}
.page-loading-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: page-loading-spin 0.75s linear infinite;
}
.section-is-fetching {
  position: relative;
}
.section-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 140px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border-radius: inherit;
  font-weight: 700;
}
.war-fetch-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  font-weight: 700;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}
@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.page-title {
  font-size: 30px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.page-heading .page-title {
  margin: 0;
}

.page-link-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card-alt);
  box-shadow: 0 3px 0 var(--grey-dark);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.page-link-chip-bet {
  background: var(--yellow);
  color: #332200;
  box-shadow: 0 3px 0 #6f4c00;
}
.page-link-chip-bet-closed {
  background: var(--card-alt);
  color: var(--text);
  box-shadow: 0 3px 0 var(--grey-dark);
}
.war-bet-reveal-name {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.page-link-chip:active {
  transform: translateY(3px);
  box-shadow: none;
}
.page-link-chip:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.tech-reset-row {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 18px;
}

.page-lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
  margin: -4px 0 18px;
}

.pill {
  background: var(--topbar);
  color: #fff;
  font-size: 15px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 3px solid var(--ink);
}

.card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink);
  padding: 20px;
  margin-bottom: 18px;
}

.card-narrow {
  max-width: 440px;
  margin: 40px auto;
}

.card-title {
  margin: 0 0 12px;
  font-size: 24px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.row input {
  flex: 1;
  min-width: 180px;
}

.inline {
  display: inline;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}

input,
select {
  font: inherit;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  width: 100%;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
}

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.05s;
}

.btn:active {
  transform: translateY(3px);
  box-shadow: none !important;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-armed {
  background: var(--yellow) !important;
  color: #2f3542 !important;
  text-shadow: none;
  box-shadow: 0 3px 0 #c9a800 !important;
}

.btn-blue {
  background: var(--blue);
  box-shadow: 0 4px 0 var(--blue-dark);
}

.btn-red {
  background: var(--red);
  box-shadow: 0 4px 0 var(--red-dark);
}

.btn-green {
  background: var(--green);
  color: #2f3542;
  text-shadow: none;
  box-shadow: 0 4px 0 #4ca947;
}

.btn-grey {
  background: var(--grey);
  color: var(--text);
  text-shadow: none;
  box-shadow: 0 4px 0 var(--grey-dark);
}

.btn-outline {
  background: var(--card);
  color: var(--blue);
  text-shadow: none;
  border-color: var(--blue);
  box-shadow: 0 4px 0 var(--blue-dark);
}

.btn-big {
  font-size: 22px;
  padding: 14px 24px;
}

.btn-sm {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--blue-dark);
}

.btn-red.btn-sm {
  box-shadow: 0 3px 0 var(--red-dark);
}

.btn-grey.btn-sm {
  box-shadow: 0 3px 0 var(--grey-dark);
}

.hint {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.hint code {
  background: var(--card-alt);
  padding: 1px 5px;
  border-radius: 4px;
}

.flash {
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-weight: 600;
  color: #2f3542;
}

.flash-ok {
  background: var(--green);
}

.flash-error {
  background: var(--red);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.picker {
  position: relative;
}
.picker input {
  padding-right: 34px;
}
.picker-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  pointer-events: none;
  transform: translateY(-50%);
}
.picker-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.picker-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--ink);
}

.picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--grey);
  padding: 10px 12px;
  cursor: pointer;
}

.picker-item:last-child {
  border-bottom: 0;
}

.picker-item:hover,
.picker-item:focus {
  background: var(--row-hover);
  outline: none;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.profile-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 17px;
}

.profile-row .muted {
  color: var(--muted);
}

.pin-input {
  -webkit-text-security: disc;
  letter-spacing: 4px;
}

.pin-box {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
  background: var(--card-alt);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0;
  user-select: all;
}

.totals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.total-card {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-card img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.total-label {
  color: var(--muted);
  font-size: 14px;
}

.total-value {
  font-size: 26px;
  font-weight: 700;
}

.table-tools {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.table-tools-row,
.column-tools-row,
.column-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-tools-row .btn {
  margin-left: auto;
}

.column-tools-label {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.table-tools .inactive-toggle {
  width: auto;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
  font-size: 14px;
}

.table-tools .inactive-toggle input {
  width: auto;
}

.table-tools .inactive-toggle.asc-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.column-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card-alt);
  color: var(--muted);
  box-shadow: 0 2px 0 var(--ink);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.column-toggle:hover {
  transform: translateY(-1px);
}

.column-toggle[aria-pressed='true'] {
  background: var(--blue);
  color: #fff;
}

.column-toggle[aria-pressed='false'] {
  opacity: 0.62;
  box-shadow: none;
}

.inactive-toggle {
  width: auto;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}

.inactive-toggle input {
  width: auto;
}

.mobile-table-controls {
  display: flex;
  gap: 8px;
  width: 100%;
}

.mobile-table-controls input,
.mobile-table-controls select {
  flex: 1;
  min-width: 0;
}

.table-wrap {
  overflow-x: auto;
}
@media (min-width: 821px) {
  .war-member-table-wrap {
    overflow: visible;
  }
}

table.members {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.members th,
table.members td {
  padding: 10px 14px;
  box-shadow: inset 0 -2px 0 var(--grey);
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  vertical-align: middle;
}

table.members thead th {
  background: var(--topbar);
  color: #fff;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
}

table.members thead th:first-child {
  border-radius: 10px 0 0 0;
}

table.members th:first-child,
table.members td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
}

table.members thead tr:first-child th:first-child {
  background: var(--topbar);
  z-index: 2;
}

table.members tbody tr:first-child {
  position: relative;
  z-index: 4;
}
table.members tbody tr:first-child td:first-child {
  z-index: 5;
}
table.members tbody tr:hover,
table.members tbody tr:focus-within {
  position: relative;
  z-index: 6;
}

table.members tr.filters th:first-child {
  background: var(--card-alt);
}

table.members tbody tr.me td:first-child {
  background: var(--me-row);
}

table.members thead th:last-child {
  border-radius: 0 10px 0 0;
}

table.members th[data-sort][data-dir='asc']::after {
  content: ' ▲';
}

table.members th[data-sort][data-dir='desc']::after {
  content: ' ▼';
}

.th-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
}

table.members tr.filters th {
  background: var(--card-alt);
  padding: 6px;
  cursor: default;
}

table.members tr.filters input,
table.members tr.filters select {
  padding: 5px 8px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 14px;
  min-width: 80px;
}

table.members tbody tr:hover {
  background: var(--row-hover);
}

table.members tbody tr.me {
  background: var(--me-row);
  font-weight: 700;
}

table.members tbody tr.inactive {
  opacity: 0.55;
}

table.members td.muted {
  color: var(--muted);
}

.member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.member-card {
  margin: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.member-card.inactive {
  opacity: 0.6;
}

.member-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-tag-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}
.admin-tag-form input {
  flex: 1 1 160px;
  min-width: 0;
}

.member-name {
  font-size: 18px;
  margin-right: auto;
}

.actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--ink);
  color: #2f3542;
}

.tag-green {
  background: var(--green);
}

.tag-yellow {
  background: var(--yellow);
}

.tag-grey {
  background: var(--grey);
  color: var(--text);
}

.tag-blue {
  background: var(--blue);
  color: #fff;
}

.tag-purple {
  background: #b48cff;
  color: #2f3542;
}

.tag-xs {
  font-size: 10px;
  padding: 1px 6px;
  border-width: 1.5px;
  vertical-align: middle;
}

td.saved {
  background: rgba(180, 140, 255, 0.18);
}

.stat.saved {
  background: rgba(180, 140, 255, 0.18);
  border-radius: 8px;
  padding: 4px;
  margin: -4px;
}

.stat.saved small {
  color: #b48cff;
}

.asc-grid {
  grid-template-columns: repeat(2, 1fr);
}

.small {
  font-size: 12px;
}

.check-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  cursor: pointer;
}

.check-row input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
}

.asc-toggle {
  cursor: pointer;
}

.include-toggle {
  display: inline-block;
  margin-bottom: 14px;
}

.include-toggle span {
  font-size: 15px;
  padding: 7px 14px;
}

.asc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.asc-card .card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.asc-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.asc-card-actions .btn {
  white-space: nowrap;
}

.asc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.asc-member {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.asc-member strong {
  margin-right: 6px;
}

.asc-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.asc-toggle span {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--grey);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  transition:
    background 0.15s,
    color 0.15s;
}

.asc-toggle span::before {
  content: '○ ';
}

.asc-toggle input:checked + span {
  background: #b48cff;
  color: #2f3542;
}

.asc-toggle input:checked + span::before {
  content: '✓ ';
}

.asc-toggle input:focus-visible + span {
  outline: 3px solid var(--blue);
}

.totals-title {
  margin: 10px 0 14px;
  font-size: 24px;
}

.res-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hint-warn {
  color: var(--red);
}
.save-btn-highlight {
  animation: save-btn-glow 1.1s ease-in-out infinite;
}
@keyframes save-btn-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(255, 167, 38, 0.85),
      0 5px 0 var(--ink);
  }
  50% {
    box-shadow:
      0 0 0 12px rgba(255, 167, 38, 0),
      0 5px 0 var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .save-btn-highlight {
    animation: none;
  }
}

.res-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.res-head .btn {
  margin-left: auto;
}

.res-title {
  margin: 0;
  min-width: 110px;
  text-align: center;
  font-size: 18px;
  background: var(--topbar);
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  border: 3px solid var(--ink);
}

.res-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1;
}

.res-fields label {
  min-width: 160px;
  flex: 1;
  max-width: 240px;
}

.res-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.res-label img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.res-fields input {
  font-size: 20px;
  font-weight: 700;
}

.mobile-only {
  display: none;
}

.mobile-tools {
  display: flex;
  gap: 8px;
  padding: 10px;
}

.mobile-tools input {
  flex: 1;
  min-width: 0;
}

.mobile-tools select {
  flex: 1;
  min-width: 0;
}

@media (min-width: 601px) {
  .mobile-tools select {
    flex: 0 0 140px;
    width: 140px;
  }
}

.member-stats {
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 3px 0 var(--ink);
}

.member-stats.me {
  background: var(--me-row);
}

.member-stats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 17px;
}

.member-stats-head .muted {
  color: var(--muted);
  font-size: 12px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
}

.stat {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
}

.stat img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  grid-row: span 2;
}

.stat span {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.1;
}

.stat small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 0 16px 24px;
}

.hall-upload {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
.hall-admin-upload {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
.hall-upload .stack,
.hall-admin-upload .stack {
  max-width: 520px;
}
.hall-date-picker {
  display: grid;
  gap: 6px;
}
.date-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(18 28 49 / 0.45);
}
.date-picker-backdrop[hidden] {
  display: none;
}
.date-picker-card {
  width: min(100%, 360px);
  padding: 18px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 8px 0 var(--ink);
}
.date-picker-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  text-align: center;
}
.date-picker-head .btn {
  padding: 5px;
}
.date-picker-weekdays,
.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.date-picker-weekdays {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.date-picker-today {
  margin: -6px 0 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.date-picker-days > span {
  min-height: 38px;
}
.date-picker-day {
  min-height: 38px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--card-alt);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.date-picker-day.today {
  outline: 2px solid var(--blue-dark);
  outline-offset: 1px;
}
.date-picker-day:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.date-picker-day:hover:not(:disabled),
.date-picker-day.selected {
  border-color: var(--blue-dark);
  background: var(--blue);
  color: white;
}
.date-picker-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.date-picker-actions .btn {
  width: 100%;
  box-sizing: border-box;
}
.field-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.field-label-row {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.field-label-row .hint {
  font-weight: 400;
}
.hall-admin-upload .stack > label,
.hall-admin-upload input[type='file'],
.hall-admin-upload .btn {
  width: 100%;
  box-sizing: border-box;
}
.upload-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: upload-spin 0.7s linear infinite;
}
.btn.is-loading {
  cursor: wait;
  opacity: 0.86;
}
@keyframes upload-spin {
  to {
    transform: rotate(360deg);
  }
}
.hall-closed {
  margin: 0;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
}
.hall-confirmed-row {
  display: block;
  padding-top: 28px;
}
.hall-confirmed-row h2 {
  margin: 0 0 12px;
}
.hall-confirmed-row .btn {
  margin-top: 12px;
}
.hall-collection-hint {
  margin: 4px 0 0;
}
.hall-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hall-section-head .card-title {
  margin-bottom: 6px;
}
.hall-draft {
  position: relative;
}
.hall-draft .hall-section-head {
  padding-right: 40px;
}
.hall-draft .hall-section-head > form {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
}
.hall-draft > .hall-section-head > .hall-draft-delete {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}
.hall-draft-status {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.tag-red {
  background: var(--red);
  color: #fff;
}
.hall-war-rows-owner {
  position: relative;
}
.hall-war-rows-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  color: var(--text);
  text-align: center;
  cursor: wait;
}
.hall-war-rows-overlay .upload-spinner {
  flex: 0 0 auto;
  margin-right: 0;
}
.war-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.war-row {
  display: grid;
  grid-template-columns: 62px minmax(100px, 1fr) minmax(90px, 0.7fr) repeat(3, 38px);
  gap: 6px;
  align-items: center;
}
.war-row input,
.war-row select {
  min-width: 0;
  padding: 8px;
}
.war-row .picker {
  min-width: 0;
}
.war-row .picker > input {
  width: 100%;
  min-width: 0;
  padding: 8px;
}
.war-row .picker-list {
  z-index: 4;
}
.war-row input.is-invalid,
.war-row select.is-invalid {
  border-color: var(--red-dark);
  background: #ffe4e4;
  box-shadow: 0 0 0 2px var(--red);
}
.war-row .btn {
  padding: 5px;
  min-width: 0;
}
.war-readonly {
  display: grid;
  gap: 6px;
}
.hall-of-fame,
.hall-ranking-column {
  display: contents;
}
.hall-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.hall-admin-upload {
  width: 100%;
}
.hall-admin-upload .stack,
.hall-admin-upload .hall-date-picker,
.hall-admin-upload label {
  width: 100%;
  max-width: none;
}
.hall-upload-batches {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.hall-upload-batch {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--card-alt);
}
.hall-upload-batch.is-queued {
  border-color: var(--green);
}
.hall-upload-batch.is-failed {
  border-color: var(--red);
}
.hall-upload-thumbs {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px;
}
.hall-upload-thumbs img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: 6px;
}
.hall-editor-controls {
  display: block;
}
.hall-editor-controls #warEditor {
  width: 100%;
}
.hall-editor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
}
.hall-editor-actions .hall-draft-delete {
  display: flex;
  flex: 0 1 auto;
  align-self: stretch;
}
.hall-editor-actions .hall-draft-delete .btn {
  height: 100%;
  box-sizing: border-box;
}
.hall-editor-actions .hall-confirm-form {
  flex: 0 0 auto;
}
.hall-editor-actions > .btn,
.hall-editor-actions .hall-confirm-form,
.hall-editor-actions .hall-confirm-form .btn {
  box-sizing: border-box;
}
.hall-editor-actions > .btn,
.hall-editor-actions .hall-draft-delete,
.hall-editor-actions .hall-draft-delete .btn {
  height: auto;
  min-height: 0;
  box-sizing: border-box;
}
.war-add-row {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 12px auto 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--card-alt);
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.war-add-row:hover {
  background: var(--blue-light);
}
.hall-editor-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
.hall-editor-actions .btn,
.hall-confirm-form .btn {
  width: auto;
}
.hall-confirm-form {
  margin: 0;
}
.hall-confirm-form .btn {
  background: #f5bc35;
  border-color: #6f4c00;
  color: #332200;
  box-shadow: 0 4px 0 #6f4c00;
}
.hall-confirm-form .btn.btn-armed {
  background: var(--red);
  color: #fff;
  border-color: var(--red-dark);
  box-shadow: 0 4px 0 var(--red-dark);
}
.hall-drafts {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}
.hall-draft-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hall-draft-list .btn {
  width: auto;
}
.hall-all-time {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, #c58c16 62%, var(--ink));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #f3c75d 16%, var(--card)),
    var(--card) 58%
  );
  box-shadow: 0 6px 0 color-mix(in srgb, #a56b00 68%, var(--ink));
}
.hall-all-time::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgb(255 255 255 / 0.24), transparent 34%);
}
.hall-all-time-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hall-legend-kicker {
  display: block;
  margin-bottom: 2px;
  color: #a56b00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hall-legend-crown {
  color: #c58c16;
  font-size: 42px;
  line-height: 1;
  text-shadow:
    0 2px 0 #7c5100,
    0 0 16px rgb(224 172 37 / 0.45);
}
.hall-all-time .hall-rankings {
  position: relative;
  z-index: 1;
}
.hall-all-time .hall-rankings li:nth-child(n + 4) {
  min-height: 52px;
}
.hall-podium-1 {
  border-color: #bd8515 !important;
  background: linear-gradient(100deg, #f8dfa0, var(--card-alt)) !important;
}
.hall-podium-2 {
  border-color: #909ca6 !important;
  background: linear-gradient(100deg, #e4eaf0, #cfd6dd) !important;
  color: #25313a;
}
.hall-podium-3 {
  border-color: #ae7045 !important;
  background: linear-gradient(100deg, #efc4a3, #e0b48e) !important;
  color: #392718;
}
.hall-podium-crowned .rank {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: flex-end;
  justify-content: center;
  padding-top: 21px;
  text-align: center;
}
.hall-podium:not(.hall-podium-crowned) .rank {
  align-self: center;
  text-align: center;
}
.rank-crown {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  margin: 0;
  font-size: 20px;
  line-height: 1;
  transform: translateX(-50%);
}
.hall-extra-entry {
  display: none !important;
}
.hall-expanded .hall-extra-entry {
  display: grid !important;
}
.hall-expanded tr.hall-extra-entry {
  display: table-row !important;
}
.hall-expand-button {
  display: block;
  margin: 12px auto 0;
}
.hall-editor-actions {
  align-items: flex-start;
}
.hall-member-search {
  grid-column: 1 / -1;
  width: 100%;
}
.hall-member-search-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}
.hall-member-search-form label {
  display: grid;
  gap: 5px;
  flex: 1 1 160px;
}
.hall-member-search-form input,
.hall-member-search-form select {
  width: 100%;
}
.hall-member-search-actions {
  display: flex;
  align-items: end;
  flex: 1 1 360px;
  gap: 10px;
}
.hall-member-search-actions label {
  flex: 1 1 180px;
}
.hall-member-search-actions .btn {
  width: auto;
}
.hall-member-selection,
.hall-member-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.hall-member-selection {
  display: flex;
  flex-wrap: wrap;
}
.hall-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card-alt);
  font-weight: 700;
}
.hall-member-chip button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.hall-member-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  margin: 0;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
}
.hall-member-result small {
  grid-column: 1 / -1;
  color: var(--muted);
}
.monthly-score-summary {
  display: grid;
  justify-items: end;
  gap: 2px;
  text-align: right;
}
.monthly-score-summary > strong {
  font-size: inherit;
}
.monthly-score-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.hall-podium-1 .rank,
.hall-podium-1 .rank-crown {
  color: #a56b00;
}
.hall-podium-2 .rank,
.hall-podium-2 .rank-crown {
  color: #687683;
}
.hall-podium-3 .rank,
.hall-podium-3 .rank-crown {
  color: #94592f;
}
.hall-podium-2 strong,
.hall-podium-3 strong {
  color: inherit;
}
.hall-podium-1 strong {
  color: #704500;
}
.hall-page {
  position: relative;
}
.hall-page-coming-soon > :not(.hall-coming-soon) {
  filter: grayscale(0.35) blur(1px);
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}
.hall-coming-soon {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: start center;
  padding-top: clamp(120px, 28vh, 250px);
  background: color-mix(in srgb, var(--bg) 48%, transparent);
}
.hall-coming-soon-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 300px;
  padding: 28px 24px;
  text-align: center;
  border: 2px solid var(--blue-dark);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 8px 0 var(--blue-dark);
}
.hall-coming-soon-card strong {
  font-size: 32px;
  line-height: 1;
  color: var(--blue-dark);
}
.hall-coming-soon-card > span:last-child {
  color: var(--muted);
  font-size: 14px;
}
.hall-rankings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hall-rankings li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--card-alt);
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.hall-rankings li.hall-member-left {
  opacity: 0.48;
  filter: grayscale(1);
}
.hall-rankings li:first-child .rank {
  color: #a56b00;
}
.hall-empty {
  display: block !important;
  grid-template-columns: 1fr !important;
  white-space: normal;
}
.war-record-table td:last-child {
  font-weight: 700;
}
.hall-rankings li small {
  color: var(--muted);
}
.rank {
  font-weight: 700;
  color: var(--blue-dark);
}
.audit-filters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.audit-filters label {
  display: grid;
  gap: 5px;
  min-width: 180px;
  font-weight: 700;
}
.audit-filters select {
  width: 100%;
}
.audit-table td {
  vertical-align: top;
  white-space: normal;
}
.audit-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.audit-table {
  min-width: 980px;
}
.audit-table thead th {
  position: static;
  top: auto;
}
.audit-table th:first-child,
.audit-table td:first-child {
  position: static;
  left: auto;
  z-index: auto;
  background: transparent;
}
.audit-table thead tr:first-child th:first-child {
  background: var(--topbar);
}
.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  text-align: center;
}

@media (min-width: 601px) and (max-width: 750px) {
  .mount-fields label {
    flex: 1 1 calc(50% - 8px);
  }
}

@media (max-width: 600px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  .topbar {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    min-height: 64px;
  }
  .brand {
    font-size: 18px;
    gap: 6px;
  }
  .brand img {
    height: 30px;
  }
  .brand-long {
    display: none;
  }
  .topbar nav {
    margin-left: auto;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .topbar nav a {
    padding: 6px 10px;
    font-size: 14px;
  }
  .theme-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .page {
    padding: 12px 12px 40px;
  }
  .page-title {
    font-size: 24px;
    margin: 0 0 14px;
  }
  .page-heading {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 14px;
  }
  .page-heading .page-title {
    flex: 0 1 auto;
  }
  .page-link-chip {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 13px;
  }
  .page-lead {
    font-size: 15px;
    margin: -2px 0 14px;
  }
  .tech-reset-row {
    margin: -2px 0 16px;
  }
  .card {
    padding: 16px;
    margin-bottom: 16px;
  }
  .totals {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .total-card {
    padding: 8px 10px;
    gap: 8px;
    box-shadow: 0 3px 0 var(--ink);
  }
  .total-card img {
    width: 34px;
    height: 34px;
  }
  .total-label {
    font-size: 12px;
  }
  .total-value {
    font-size: 20px;
  }
  .res-row {
    gap: 10px;
  }
  .res-title {
    font-size: 18px;
    padding: 6px 12px;
    min-width: 0;
  }
  .res-head {
    gap: 8px;
  }
  .asc-toggle span {
    font-size: 13px;
    padding: 4px 10px;
  }
  .res-fields {
    gap: 10px;
  }
  .res-fields label {
    min-width: 0;
    max-width: none;
    flex: 1 1 calc(50% - 5px);
  }
  .res-label {
    font-size: 14px;
    gap: 6px;
  }
  .res-label img {
    width: 26px;
    height: 26px;
  }
  /* Reserve one shared label row so wrapped names do not stagger the inputs. */
  .res-fields label {
    display: grid;
    grid-template-rows: 52px auto;
  }
  .res-label {
    min-height: 52px;
    align-items: center;
  }
  .res-fields input {
    align-self: end;
  }
  .res-fields input {
    font-size: 18px;
    padding: 8px 10px;
  }
  .btn-big {
    font-size: 20px;
    padding: 12px 20px;
  }
  .member-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mobile-only .mobile-tools {
    flex-direction: column;
    align-items: stretch;
  }
  .mobile-only .inactive-toggle {
    align-self: stretch;
    justify-content: center;
  }
  .mobile-only .inactive-toggle span {
    white-space: nowrap;
  }
  .hall-of-fame {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .war-row {
    grid-template-columns: 52px minmax(0, 1fr) 82px repeat(3, 32px);
    gap: 4px;
  }
  .war-row input,
  .war-row select {
    padding: 7px 5px;
    font-size: 14px;
  }
  .war-row .btn {
    font-size: 13px;
    padding: 4px;
  }
  .hall-rankings li {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding: 8px;
    font-size: 14px;
  }
  .hall-rankings li span:last-child {
    text-align: right;
  }
  .hall-section-head form {
    width: 100%;
  }
  .hall-draft .hall-section-head > form {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    width: auto;
  }
  .hall-editor-actions {
    align-items: stretch;
  }
  .hall-editor-actions > .btn,
  .hall-editor-actions .hall-draft-delete,
  .hall-editor-actions .hall-confirm-form,
  .hall-editor-actions .hall-draft-delete .btn,
  .hall-editor-actions .hall-confirm-form .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
  }
  .hall-editor-actions .hall-confirm-form {
    flex: 1 1 auto;
  }
  .hall-editor-actions > .btn {
    flex: 0 1 auto;
  }
}

.war-days {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
}
.war-options {
  margin: -4px 0 4px;
}
.war-total .war-options {
  margin: 6px 0 0;
}
.war-total .include-toggle {
  margin-bottom: 0;
}

.war-total {
  text-align: center;
}

.war-total .total-label {
  font-size: 15px;
}

.war-total-value {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
}

.war-breakdown {
  white-space: normal;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-right: 16px;
}

.war-chip {
  background: var(--card-alt);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}

.title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.save-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.save-bar .btn {
  flex: 1;
}

.bubble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.bubble {
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble-max {
  border-color: var(--green);
  box-shadow: 0 4px 0 var(--green);
}

.bubble-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bubble-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bubble-title strong {
  font-size: 15px;
}

.bubble-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  flex: none;
}

.bubble-desc {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.bubble-level {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 600px) {
  .war-total-value {
    font-size: 32px;
  }
  .bubble-grid {
    grid-template-columns: 1fr 1fr;
  }
  .war-chip {
    font-size: 12px;
  }
}

.nav-primary,
.nav-secondary {
  display: contents;
}
.drawer-primary {
  display: none;
}

@media (min-width: 1300px) {
  /* Full desktop header: preserve the banner at left and keep the text-only links in one right-aligned row. */
  .topbar {
    flex-wrap: nowrap;
  }
  .topbar nav {
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .topbar nav a .nav-icon {
    display: none;
  }
}

.drawer-theme-label {
  display: none;
}

.nav-scrim,
.drawer-close,
.drawer-head {
  display: none;
}

.burger {
  display: none;
}

.war-sub {
  font-size: 20px;
  margin: 18px 0 10px;
}

.war-member {
  margin-bottom: 10px;
  padding: 12px 14px;
  box-shadow: 0 3px 0 var(--ink);
}

.war-member.me {
  background: var(--me-row);
}

.war-member-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.war-member-points {
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .nav-primary {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .nav-primary a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    font-size: 23px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
  }

  .burger:focus-visible,
  .drawer-close:focus-visible,
  .drawer-theme:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }

  .nav-secondary {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: max(18px, env(safe-area-inset-top)) 16px 16px;
    width: min(320px, 86vw);
    background: var(--bg);
    color: var(--text);
    border-left: 4px solid var(--ink);
    border-radius: 20px 0 0 20px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(105%);
    transition: transform 0.24s ease;
  }

  .nav-secondary.open {
    transform: translateX(0);
  }

  .drawer-primary {
    display: contents;
  }

  .nav-secondary a {
    text-align: left;
    padding: 13px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--ink);
  }

  .nav-secondary a:active {
    transform: translateY(3px);
    box-shadow: none;
  }

  .nav-secondary a.active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 0 var(--blue-dark);
  }

  .drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 3px solid var(--grey);
  }

  .drawer-head strong {
    flex: 1;
    font-size: 19px;
    color: var(--text);
    text-shadow: none;
  }

  .drawer-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink);
  }

  .drawer-theme {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
    margin-top: auto;
    color: var(--text);
    background: var(--card-alt);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .drawer-theme .theme-icon {
    font-size: 21px;
  }
  .drawer-theme-label {
    display: inline;
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 130;
  }

  body.drawer-open {
    overflow: hidden;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 150;
  }

  .war-days {
    padding: 8px;
    gap: 6px;
  }
  .war-days .btn {
    flex: 1 1 calc(33.333% - 4px);
  }
  .bubble-grid {
    grid-template-columns: 1fr;
  }
  .bubble-desc {
    display: none;
  }
  .save-bar {
    position: sticky;
    bottom: 10px;
  }
}

@media (min-width: 601px) and (max-width: 1299px) {
  /* At widths that cannot hold the full desktop row, use the drawer instead of wrapping over the banner. */
  .topbar {
    flex-wrap: nowrap;
  }
  .topbar nav {
    margin-left: auto;
  }
  .nav-primary {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    font-size: 23px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
  }
  .burger:focus-visible,
  .drawer-close:focus-visible,
  .drawer-theme:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }
  .nav-secondary {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 18px 16px 16px;
    width: min(320px, 86vw);
    background: var(--bg);
    color: var(--text);
    border-left: 4px solid var(--ink);
    border-radius: 20px 0 0 20px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(105%);
    transition: transform 0.24s ease;
  }
  .nav-secondary.open {
    transform: translateX(0);
  }
  .drawer-primary {
    display: contents;
  }
  .nav-secondary a {
    text-align: left;
    padding: 13px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--ink);
  }
  .nav-secondary a.active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 0 var(--blue-dark);
  }
  .drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 3px solid var(--grey);
  }
  .drawer-head strong {
    flex: 1;
    font-size: 19px;
    color: var(--text);
    text-shadow: none;
  }
  .drawer-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }
  .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--ink);
  }
  .drawer-theme {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
    margin-top: auto;
    color: var(--text);
    background: var(--card-alt);
    border: 3px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .drawer-theme .theme-icon {
    font-size: 21px;
  }
  .drawer-theme-label {
    display: inline;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 130;
  }
}

/* Keep the primary routes visible through compact layouts; collapse only at phone widths. */
@media (max-width: 375px) {
  .nav-primary a:nth-child(3) {
    display: none;
  }
}
@media (max-width: 350px) {
  .nav-primary a:nth-child(2) {
    display: none;
  }
}
@media (max-width: 320px) {
  .nav-primary a:nth-child(1) {
    display: none;
  }
}

.war-actions summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
}

.war-actions[open] summary {
  margin-bottom: 12px;
}

.war-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}

.war-split-item {
  background: var(--card-alt);
  border-radius: 14px;
  padding: 10px 12px;
}

.war-split-label {
  color: var(--muted);
  font-size: 13px;
}

.war-split-value {
  font-size: 20px;
  font-weight: 700;
}

.war-split-count {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 600px) {
  .war-split {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .war-split-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .war-split-value {
    font-size: 17px;
  }
}

/* Keep war action points usable on narrow screens: action labels scroll within their own cell while points remain visible. */
table.members.war-points-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.war-points-table th:first-child,
.war-points-table td:first-child {
  position: static;
  z-index: auto;
  background: transparent;
}

.war-points-table thead th:first-child {
  background: var(--topbar);
}
.war-points-table th:first-child,
.war-points-table td:first-child {
  width: calc(100% - 104px);
}
.war-points-table th:last-child,
.war-points-table td:last-child {
  width: 104px;
  text-align: right;
}

.war-action-cell {
  overflow: hidden;
}
.war-action-scroll {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.war-points-value {
  font-weight: 700;
}
.war-actions .table-wrap {
  margin-top: 14px;
  overflow: hidden;
}
.war-actions .hint {
  margin-top: 16px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .hall-secondary {
    grid-template-columns: 1fr;
  }
  .hall-member-search-actions {
    flex-basis: 100%;
  }
}

@media (max-width: 600px) {
  .war-points-table th,
  .war-points-table td {
    padding: 10px;
  }
  .war-points-table th:first-child,
  .war-points-table td:first-child {
    width: calc(100% - 96px);
  }
  .war-points-table th:last-child,
  .war-points-table td:last-child {
    width: 96px;
  }
  .war-points-table th:last-child {
    white-space: normal;
    line-height: 1.1;
  }
  .hall-secondary {
    grid-template-columns: 1fr;
  }
  .hall-editor-controls {
    display: block;
  }
  .hall-confirm-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .hall-editor-actions .hall-confirm-form {
    margin-top: 0;
    align-self: flex-start;
  }
  .hall-editor-actions > .btn {
    align-self: flex-start;
  }
}

.claim-card {
  padding: 14px 16px;
}

.claim-ready {
  border-color: var(--green);
  box-shadow: 0 5px 0 var(--green);
}

.claim-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#claimCard .claim-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: start;
  gap: 8px 16px;
  min-height: 0;
}
#claimCard .claim-main > * {
  min-height: 0;
}
#claimCard .claim-main > .claim-today-reward {
  margin-top: 0;
}
#claimCard .claim-reset {
  grid-column: 1 / -1;
  display: block;
  padding-top: 3px;
}
#claimCard .claim-today-reward {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  padding: 14px 16px;
  border: 3px dashed;
  border-radius: 14px;
}
#claimCard .claim-today-reward.is-unclaimed {
  background: #ffe1e1;
  border-color: #a53434;
}
#claimCard .claim-today-reward.is-claimed {
  background: #e0f5dc;
  border-color: #3e7e46;
}
.claim-today-reward-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.is-unclaimed .claim-today-reward-title {
  color: #8c2626;
}
.is-claimed .claim-today-reward-title {
  color: #276633;
}
.claim-today-reward-value {
  color: #2f3542;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
}
.claim-today-reward-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.claim-today-reward .btn {
  justify-self: end;
}
.claim-coin-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 84px;
  min-height: 78px;
  padding: 8px 10px;
  color: var(--ink);
  text-align: center;
  line-height: 1;
}
.claim-coin-card > span {
  font-size: 24px;
}
.claim-coin-card strong {
  font-size: 19px;
}
.claim-coin-card small {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.totals-title {
  margin: 8px 0 14px;
  font-size: 24px;
}
.mine-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 48px auto 22px;
  padding: 9px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--card-alt), #dbeaff);
  box-shadow: 0 4px 0 var(--blue-dark);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mine-divider-emblem {
  display: inline-flex;
  align-items: end;
  gap: 3px;
  height: 18px;
}
.mine-divider-emblem i {
  display: block;
  width: 5px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--blue);
}
.mine-divider-emblem i:nth-child(1) {
  height: 7px;
}
.mine-divider-emblem i:nth-child(2) {
  height: 13px;
  background: var(--yellow);
}
.mine-divider-emblem i:nth-child(3) {
  height: 10px;
  background: var(--purple);
}

.claim-coin {
  font-size: 34px;
  line-height: 1;
}

.claim-text {
  flex: 1 1 190px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 820px) {
  #claimCard .claim-text {
    flex: 0 0 auto;
  }
}

.claim-text strong {
  font-size: 18px;
}
.streak-label {
  display: block;
  color: var(--blue-dark);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.streak-value {
  display: block;
  color: var(--text);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.1;
}
.streak-value strong {
  font-size: 1.35em;
  margin-right: 0.12em;
}
@media (max-width: 820px) {
  /* Stack the streak card top-to-bottom: title, coin pill, streak line, actions, reset hint, next reward. */
  #claimCard .claim-card-title {
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 14px;
  }
  #claimCard .claim-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-height: 0;
  }
  #claimCard .claim-coin-card {
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 10px 14px;
    width: 100%;
  }
  #claimCard .claim-coin-card > span {
    font-size: 20px;
  }
  #claimCard .claim-coin-card strong {
    font-size: 17px;
  }
  #claimCard .claim-coin-card small {
    margin-top: 0;
  }
  #claimCard .claim-text {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
    margin-bottom: 4px;
  }
  #claimCard .streak-label {
    font-size: 15px;
  }
  #claimCard .streak-value {
    font-size: 20px;
  }
  #claimCard .claim-today-reward {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 14px;
    margin: 8px 0 0;
    text-align: center;
  }
  #claimCard .claim-today-reward-title {
    font-size: 13px;
  }
  #claimCard .claim-today-reward-value {
    font-size: 22px;
  }
  #claimCard .claim-today-reward .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 13px 14px;
    font-size: 16px;
    white-space: nowrap;
  }
  #claimCard .claim-today-reward-note {
    font-size: 13px;
  }
  #claimCard .claim-next-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px;
    margin: 8px 0 0;
    border: 3px dashed var(--blue);
    border-radius: 14px;
    background: var(--card-alt);
  }
  #claimCard .claim-next-reward-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue-dark);
  }
  #claimCard .claim-next-reward-value {
    font-size: 20px;
    font-weight: 700;
  }
}
@media (min-width: 821px) {
  .claim-mobile-only {
    display: none;
  }
}
.claim-status {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}

.claim-actions .claim-status {
  padding: 12px 20px;
  font-size: 17px;
  border-width: 3px;
  border-radius: 12px;
  align-self: center;
}
.claim-status.is-claimed {
  background: var(--green);
  color: #20352a;
}
.claim-status.is-unclaimed {
  background: var(--red);
  color: #fff;
  animation: claim-unclaimed-pulse 1.6s ease-in-out infinite;
}
@keyframes claim-unclaimed-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(230, 70, 70, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(230, 70, 70, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .claim-status.is-unclaimed {
    animation: none;
  }
}

.claim-streak {
  margin: 8px 0 0;
}

.pull-result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
}

.pull-rarity {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pull-name {
  font-size: 22px;
  font-weight: 700;
}

.collection-country {
  font-size: 20px;
  margin: 22px 0 10px;
}

.pill-done {
  background: var(--green);
  color: #2f3542;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.collectible {
  position: relative;
  margin: 0;
  padding: 12px 9px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 220px;
}

.collectible-art {
  width: 74px;
  height: 74px;
  display: block;
  margin: 0 auto 6px;
}

.collectible-unknown {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: var(--muted);
  background: var(--card-alt);
  border-radius: 18px;
}

.pull-art {
  width: 84px;
  height: 84px;
  flex: none;
}

.collectible-name {
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
}

.collectible-rarity {
  font-size: 12px;
  color: var(--muted);
}

.collectible-count {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  background: var(--card-alt);
  border-radius: 999px;
  padding: 1px 7px;
}
.collectible-badges {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 3;
}
.collectible-badges .collectible-count {
  position: static;
}

/* Ascension level is intentionally visible as overlapping icons, not a text multiplier. */
.collectible-stars {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}
.collectible-stars img {
  width: 18px;
  height: 18px;
  display: block;
  margin-left: 0;
}
.collectible-stars img:first-child {
  margin-left: 0;
}
.collectible-stars.stars-below-action {
  margin-top: 0;
}

/* Keep ascended and unascended cards unmistakably different, using each card's accent ring. */
.collectible.rarity-common[class*='stars-'],
.collectible.rarity-rare[class*='stars-'],
.collectible.rarity-epic[class*='stars-'],
.collectible.rarity-legendary[class*='stars-'],
.collectible.rarity-mythic[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 0 3px var(--m2),
    0 0 25px 8px color-mix(in srgb, var(--m2) 72%, transparent);
}

.collectible.locked {
  opacity: 0.5;
}
.collectible.is-equippable {
  cursor: pointer;
}
.collectible.is-equippable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--ink);
}
.collectible.is-equipped {
  background: var(--blue);
  color: #fff;
}
.collectible.is-equipped .collectible-rarity,
.collectible.is-equipped .hint {
  color: rgba(255, 255, 255, 0.85);
}
.collectible.is-equipped .collectible-count {
  background: var(--ink);
  color: #fff;
}

.collectible-ascend-badge {
  position: relative;
  min-width: 68px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: #332200;
  border: 2px solid #6f4c00;
  box-shadow: 0 2px 0 #6f4c00;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
}
.collectible-ascend-badge:active {
  transform: translateY(2px);
  box-shadow: none;
}
.collectible-tap-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 10px 0 0;
  line-height: 1.32;
}
.collectible.is-open .equip-btn {
  margin-top: auto;
}
.collectible.is-open {
  min-height: 300px;
}
.rarity-chip-btn {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  border: 2px solid var(--grey-dark);
  background: var(--grey);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: none;
}
.rarity-chip-btn:active {
  transform: none;
  box-shadow: none;
}

.collectible.locked .collectible-name {
  color: var(--muted);
}

.rarity-rare {
  border-color: var(--blue);
}

.rarity-epic {
  border-color: #b48cff;
}

.rarity-legendary {
  border-color: var(--yellow);
}

.rarity-clan {
  border-color: #2fb8ab;
}

.rarity-mythic {
  border-color: var(--red);
}

@media (max-width: 600px) {
  .collection-grid {
    grid-template-columns: 1fr 1fr;
  }
  .claim-coin {
    font-size: 28px;
  }
  .pull-art {
    width: 64px;
    height: 64px;
  }
}

.claim-spaced {
  margin-top: 26px;
}

.claim-top {
  margin-bottom: 22px;
}

.coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.coin-ready {
  background: var(--yellow);
  color: #2f3542;
  text-shadow: none;
}

.coin-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--topbar);
  animation: coin-pulse 1.4s ease-in-out infinite;
}

@keyframes coin-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
}

.art-wrap,
.pull-art-wrap {
  position: relative;
  display: inline-block;
}

.art-flag {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 17px;
  line-height: 1;
  background: var(--card);
  border-radius: 999px;
  padding: 2px 3px;
  box-shadow: 0 0 0 2px var(--ink);
}

.pull-art-wrap .art-flag {
  font-size: 22px;
  top: -2px;
  right: -4px;
}

.reveal {
  animation: reveal-pop 0.5s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

.reveal .pull-art-wrap {
  animation: reveal-spin 0.6s ease-out both;
}

@keyframes reveal-pop {
  0% {
    transform: scale(0.4) rotate(-6deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.06) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes reveal-spin {
  0% {
    transform: rotate(-180deg) scale(0.2);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}

.reveal-legendary,
.reveal-clan,
.reveal-mythic {
  position: relative;
  overflow: hidden;
}

.reveal-legendary::after,
.reveal-clan::after,
.reveal-mythic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 65%
  );
  animation: shine 1.1s ease-out 0.25s both;
}

@keyframes shine {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}

.reveal-legendary {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 24px rgba(255, 217, 82, 0.6);
}

.reveal-clan {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 26px rgba(47, 184, 171, 0.65);
}

.reveal-mythic {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 26px rgba(232, 68, 58, 0.55);
}

.modal-item.rarity-legendary:not(.is-dupe),
.modal-item.rarity-mythic:not(.is-dupe) {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.modal-item.rarity-legendary:not(.is-dupe)::before,
.modal-item.rarity-mythic:not(.is-dupe)::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  clip-path: inset(0 round 14px);
  background:
    radial-gradient(circle at 5% 8%, #8a6500 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 16% 28%, #b07d00 0 2px, transparent 3px),
    radial-gradient(circle at 29% 6%, #6f4f00 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 42% 20%, #b07d00 0 2px, transparent 3px),
    radial-gradient(circle at 56% 7%, #8a6500 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 71% 26%, #6f4f00 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 87% 9%, #b07d00 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 95% 34%, #8a6500 0 2px, transparent 3px),
    radial-gradient(circle at 8% 58%, #b07d00 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 78%, #6f4f00 0 2px, transparent 3px),
    radial-gradient(circle at 38% 94%, #8a6500 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 52% 76%, #b07d00 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 66% 96%, #6f4f00 0 2px, transparent 3px),
    radial-gradient(circle at 78% 72%, #8a6500 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 91% 88%, #b07d00 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 58% 52%, #6f4f00 0 1.5px, transparent 2.5px);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(138, 101, 0, 0.9));
  animation: summon-sparkle-twinkle 1.35s ease-in-out infinite alternate;
}
.modal-item.rarity-mythic:not(.is-dupe)::before {
  background:
    radial-gradient(circle at 5% 8%, #ff526f 0 3px, transparent 4px),
    radial-gradient(circle at 16% 28%, #ff9aaa 0 2px, transparent 3px),
    radial-gradient(circle at 29% 6%, #ff385a 0 2px, transparent 3px),
    radial-gradient(circle at 42% 20%, #ff7187 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 56% 7%, #ff526f 0 3px, transparent 4px),
    radial-gradient(circle at 71% 26%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 87% 9%, #ff385a 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 95% 34%, #ff9aaa 0 2px, transparent 3px),
    radial-gradient(circle at 8% 58%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 22% 78%, #ff526f 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 38% 94%, #ff385a 0 3px, transparent 4px),
    radial-gradient(circle at 52% 76%, #ff9aaa 0 2px, transparent 3px),
    radial-gradient(circle at 66% 96%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 78% 72%, #ff526f 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 91% 88%, #ff385a 0 2px, transparent 3px),
    radial-gradient(circle at 58% 52%, #ff9aaa 0 2px, transparent 3px);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(255, 54, 86, 1)) drop-shadow(0 0 12px rgba(255, 120, 140, 0.8));
  animation: summon-mythic-sparkle 1.05s ease-in-out infinite alternate;
}
.modal-item.rarity-legendary:not(.is-dupe) > :not(.modal-new-badge),
.modal-item.rarity-mythic:not(.is-dupe) > :not(.modal-new-badge) {
  position: relative;
  z-index: 1;
}
.modal-item.rarity-legendary:not(.is-dupe) > .modal-new-badge,
.modal-item.rarity-mythic:not(.is-dupe) > .modal-new-badge {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
}
@keyframes summon-sparkle-twinkle {
  from {
    opacity: 0.6;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}
@keyframes summon-mythic-sparkle {
  from {
    opacity: 0.7;
    transform: scale(0.98) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: scale(1.02) rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-item.rarity-legendary::before,
  .modal-item.rarity-mythic::before,
  .modal.reveal-legendary::before,
  .modal.reveal-mythic::before {
    animation: none;
  }
}

.pull-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.pull-buttons .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.drop-rates {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-top: 6px;
}

.drop-rate {
  white-space: nowrap;
}

.drop-rate {
  font-weight: 700;
}

.rarity-text-common {
  color: var(--muted);
}
.rarity-text-rare {
  color: var(--blue);
}
.rarity-text-epic {
  color: #b48cff;
}
.rarity-text-legendary {
  color: #c9a800;
}
.rarity-text-clan {
  color: #2fb8ab;
}
.rarity-info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  margin-top: 28px;
}
.rarity-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
  font-weight: 700;
}
.rarity-text-mythic {
  color: var(--red);
}
.limited-hint {
  margin-bottom: 22px;
}
.rarity-limited {
  border-color: #19aaa5;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 18px rgba(25, 170, 165, 0.35);
}
.rarity-text-limited {
  color: #087d79;
}
.limited-section {
  margin-top: 24px;
}
.collection-hint-copy {
  margin: 4px 0 14px;
}
.collection-hint-image-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1100 / 700;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(
    110deg,
    var(--card-alt) 25%,
    color-mix(in srgb, var(--card) 70%, white) 45%,
    var(--card-alt) 65%
  );
  background-size: 250% 100%;
  animation: collection-hint-shimmer 1.4s linear infinite;
}
.collection-hint-image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  pointer-events: none;
}
.collection-hint-image-frame.is-loaded {
  animation: none;
  background: transparent;
}
.collection-hint-image-frame.is-loaded::before {
  opacity: 0;
}
.collection-hint-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
}
@keyframes collection-hint-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.collection-hint-img.desktop-only {
  display: block;
}
.collection-hint-img.mobile-only {
  display: none;
}
@media (max-width: 600px) {
  .collection-hint-image-frame.mobile-only {
    aspect-ratio: 390 / 700;
  }
  .collection-hint-img.desktop-only {
    display: none;
  }
  .collection-hint-img.mobile-only {
    display: block;
  }
}

body:has(.modal-scrim) {
  overflow: hidden;
}

.modal-scrim {
  overscroll-behavior: contain;
  touch-action: pan-y;
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  box-sizing: border-box;
  padding: 16px;
}
.summon-pack-scrim,
.summon-result-scrim {
  top: var(--summon-result-top, 0px);
  bottom: auto;
  height: calc(100svh - var(--summon-result-top, 0px));
}
.collection-hint-scrim {
  top: var(--collection-hint-top, 0px);
  bottom: 0;
  height: auto;
}
.collection-hint-scrim .modal {
  display: flex;
  flex-direction: column;
}
.collection-hint-actions {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 14px;
  background: var(--card);
  z-index: 2;
}
.collection-hint-actions .pulse {
  animation: trade-action-pulse 0.65s ease-in-out;
}

.modal {
  position: relative;
  margin: 0;
  width: min(820px, 100%);
  max-height: 90vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding: 24px;
}

.summon-dialog {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  height: min(620px, calc(100svh - 32px));
  max-width: 100%;
  max-height: calc(100svh - 32px);
  box-sizing: border-box;
  overflow: hidden;
}
.summon-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.summon-dialog-body {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 0;
  padding-inline: 5px;
  padding-bottom: 10px;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.summon-dialog-body::-webkit-scrollbar {
  display: none;
}
.summon-dialog .modal-grid {
  min-width: 0;
}
.summon-dialog .modal-item {
  min-width: 0;
}
.summon-dialog-actions {
  z-index: 3;
  flex: 0 0 auto;
  margin: auto -24px -24px;
  padding: 12px 24px 24px;
  background: var(--card);
}

.modal-close {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: -14px -2px -20px auto;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  font-size: 20px;
  color: var(--muted);
  box-shadow: 0 3px 0 var(--ink);
}

.modal-close:hover {
  color: var(--text);
}
.modal-close-left {
  margin-right: auto;
  margin-left: -2px;
}

.collection-result-close {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: -10px -2px -22px auto;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.save-confirm-modal {
  width: min(620px, 100%);
  padding-top: 28px;
}
.save-confirm-heading {
  position: sticky;
  top: -24px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: -24px 0 0;
  padding: 14px 0 12px;
  background: var(--card);
}
.save-confirm-heading .modal-title {
  grid-column: 2;
  margin: 0;
}
.save-confirm-heading .modal-close {
  position: static;
  grid-column: 3;
  justify-self: end;
  margin: 0;
}
.save-confirm-list {
  display: grid;
  gap: 7px;
  margin: 34px 0 14px;
  text-align: left;
}
.save-confirm-row {
  display: grid;
  grid-template-columns: 28px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 2px solid var(--grey);
  border-radius: 10px;
  background: var(--card-alt);
}
.save-confirm-row.is-changed {
  border-color: var(--blue);
}
.save-confirm-row img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.save-confirm-label {
  font-weight: 700;
}
.save-confirm-values {
  white-space: nowrap;
  color: var(--blue-dark);
}
.save-confirm-flags {
  display: grid;
  gap: 7px;
  margin: 0 0 18px;
  padding: 12px;
  border: 2px solid var(--grey);
  border-radius: 10px;
  text-align: left;
  font-size: 14px;
}
.save-confirm-flags .is-changed {
  color: var(--blue-dark);
}
.save-confirm-empty {
  margin: 24px 0;
}
.save-confirm-actions {
  position: sticky;
  bottom: -24px;
  z-index: 4;
  margin: 0 -24px -24px;
  padding: 14px 24px 24px;
  background: var(--card);
}
.save-confirm-actions .btn {
  width: 100%;
}

.mine-save-bar {
  display: flex;
}
.mine-save-bar .btn {
  flex: 1;
}

.toast-stack {
  position: fixed;
  z-index: 200;
  top: 76px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.toast-stack-bottom {
  top: auto;
  bottom: 18px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  color: #2f3542;
  font-weight: 600;
  pointer-events: auto;
}
.toast > span {
  flex: 1;
  min-width: 0;
}
.toast-success {
  background: var(--green);
}
.toast-info {
  background: var(--yellow);
}
.toast-error {
  background: var(--red);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.toast-close {
  flex: none;
  border: 0;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
.toast-action {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .audit-pagination {
    flex-wrap: wrap;
    gap: 9px;
  }
  .save-confirm-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .save-confirm-row > :last-child {
    grid-column: 2;
  }
  .toast-stack {
    top: 66px;
    right: 10px;
    width: calc(100vw - 20px);
  }
}

.modal-title {
  font-size: 22px;
  margin: 0 0 14px;
}

.modal-single .modal-art {
  width: 160px;
  height: 160px;
}

.modal-single .pull-name {
  font-size: 26px;
}

.modal-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
}
.result-new-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  box-shadow: 0 2px 0 var(--blue-dark);
}
.result-new-count strong {
  font-size: 15px;
}
.result-new-count.is-zero {
  background: var(--card-alt);
  color: var(--muted);
  box-shadow: 0 2px 0 var(--grey);
}
.summon-dialog.pull-size-1.is-dupe .modal-single {
  opacity: 0.55;
  filter: saturate(0.55);
}
.collectible-art,
.modal-art,
.modal-grid-art {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}
html,
body {
  touch-action: manipulation;
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.modal-item {
  position: relative;
  display: grid;
  grid-template-rows: 52px 2.4em 1.2em 1fr;
  align-content: start;
  min-height: 126px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 8px 6px;
  background: var(--card-alt);
  color: var(--text);
  overflow-wrap: anywhere;
}

.modal-item.is-dupe {
  opacity: 0.65;
}

.modal-item.is-new {
  z-index: 1;
  transform: translateY(-4px) scale(1.035);
  isolation: isolate;
  background: linear-gradient(145deg, #fff 0%, #e8f4ff 58%, #f4ecff 100%);
  color: var(--ink);
  border-width: 4px;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 0 3px rgba(62, 153, 245, 0.2),
    0 0 22px rgba(62, 153, 245, 0.42);
  animation: new-collectible-pop 0.55s cubic-bezier(0.2, 1.45, 0.45, 1) both;
}
.modal-new-badge {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  padding: 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--ink);
}
.modal-item.is-new.rarity-mythic .modal-new-badge {
  background: var(--red);
  color: #fff;
}
.modal-item.is-new .modal-grid-art {
  animation: new-collectible-art 0.7s 0.14s cubic-bezier(0.2, 1.5, 0.45, 1) both;
}
@keyframes new-collectible-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.72) rotate(-3deg);
  }
  70% {
    opacity: 1;
    transform: translateY(-6px) scale(1.07) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-4px) scale(1.035);
  }
}
@keyframes new-collectible-art {
  0% {
    transform: scale(0.35) rotate(-18deg);
  }
  75% {
    transform: scale(1.18) rotate(4deg);
  }
  100% {
    transform: scale(1);
  }
}

.modal-grid-art {
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto;
}

.modal-item-name {
  display: -webkit-box;
  height: 2.4em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
}

.modal-item-country {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

.modal-item-rarity {
  align-self: end;
  margin-top: auto;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
}

.modal-ok {
  width: 100%;
  margin-top: 16px;
}

@media (max-width: 600px) {
  .modal-single .modal-art {
    width: 120px;
    height: 120px;
  }
  .modal-single .pull-name {
    font-size: 21px;
  }
  .modal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .modal {
    padding: 16px 12px;
  }
  .summon-dialog {
    width: min(820px, 100%);
  }
  .summon-dialog-actions {
    margin: auto -12px -16px;
    padding: 12px 12px 16px;
    flex-wrap: wrap;
  }
  .result-coins {
    width: fit-content;
    max-width: 100%;
    align-self: center;
    margin-inline: auto;
    text-align: center;
  }
  .result-pull-options {
    justify-content: flex-end;
    margin-left: auto;
  }
  .result-summon-again {
    width: 100%;
    justify-content: center;
  }
  .modal-title {
    font-size: 19px;
  }
  .modal-grid-art {
    width: 48px;
    height: 48px;
  }
  .modal-item {
    grid-template-rows: 48px 2.4em 1.2em 1fr;
    min-height: 120px;
    padding: 8px 4px;
  }
  .modal-item-name {
    font-size: 10px;
  }
  .drop-rates {
    gap: 7px;
    font-size: 11px;
  }
  .pull-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: 0;
    width: 100%;
  }
  .pull-buttons form,
  .pull-buttons .btn {
    width: 100%;
    min-width: 0;
  }
  .modal-actions .btn {
    flex: 1 1 auto;
    padding: 12px 10px;
    font-size: 14px;
  }
}

.claim-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.claim-btn {
  padding: 12px 28px;
  font-size: 19px;
}

.claim-ready {
  animation: claim-glow 2s ease-in-out infinite;
}

@keyframes claim-glow {
  0%,
  100% {
    box-shadow: 0 5px 0 var(--green);
  }
  50% {
    box-shadow:
      0 5px 0 var(--green),
      0 0 18px rgba(116, 224, 111, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .claim-ready {
    animation: none;
  }
}

.streak-ladder {
  margin-top: 14px;
  padding-top: 12px;
}

.streak-ladder summary {
  cursor: pointer;
  font-weight: 700;
}

.ladder-strip {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 10px 2px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ladder-strip::-webkit-scrollbar {
  display: none;
}
.streak-ladder,
.streak-ladder * {
  user-select: none;
  -webkit-user-select: none;
}

.ladder-step {
  position: relative;
  flex: none;
  min-width: 92px;
  text-align: center;
  padding: 10px 8px;
  background: var(--card-alt);
  border: 3px solid var(--ink);
  border-radius: 12px;
}

.ladder-check-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  color: #7d8590;
  opacity: 0.92;
}
.ladder-check-overlay.is-current {
  color: var(--green);
}
.ladder-check-overlay svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2));
}
.ladder-check-overlay circle {
  fill: color-mix(in srgb, var(--card) 72%, transparent);
  stroke: currentColor;
  stroke-width: 3;
}
.ladder-check-overlay path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 821px) {
  .claim-today-reward-title {
    line-height: 1;
  }
  .claim-today-reward-value {
    display: flex;
    align-items: center;
    min-height: 28px;
    line-height: 1;
  }
}
.ladder-day {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.ladder-coins {
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
}

.ladder-claim-status {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.ladder-claim-status.is-claimed {
  color: var(--green);
}
.ladder-claim-status.is-unclaimed {
  color: var(--red);
}

.ladder-bonus {
  font-size: 11px;
  color: #c9a800;
  font-weight: 700;
  white-space: nowrap;
}

.ladder-step.is-bonus {
  border-color: var(--yellow);
  background: linear-gradient(180deg, rgba(242, 193, 78, 0.18), transparent);
}

.ladder-step.is-five {
  border-color: #9b8a5a;
  background: rgba(155, 138, 90, 0.12);
}

.ladder-step.is-five .ladder-bonus {
  color: #9b8a5a;
}

.ladder-step.is-done {
  opacity: 0.5;
}

.ladder-step.is-next {
  border-color: var(--blue);
  background: var(--me-row);
  box-shadow: 0 3px 0 var(--blue-dark);
}

.title-spacer {
  flex: 1;
}

.claim-chip {
  white-space: nowrap;
}

.claim-chip-ready {
  animation: chip-pulse 1.8s ease-in-out infinite;
}

@keyframes chip-pulse {
  0%,
  100% {
    box-shadow: 0 3px 0 var(--blue-dark);
  }
  50% {
    box-shadow:
      0 3px 0 var(--blue-dark),
      0 0 14px rgba(59, 156, 255, 0.8);
  }
}

.claim-balance {
  color: var(--muted);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .claim-chip-ready {
    animation: none;
  }
}

@media (max-width: 600px) {
  .title-spacer {
    display: none;
  }
  .claim-chip {
    font-size: 13px;
  }
}

.claim-actions .btn {
  padding: 12px 24px;
  font-size: 17px;
  line-height: 1.2;
}

.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.flash span {
  flex: 1;
  min-width: 0;
}

.flash-action {
  flex: none;
  white-space: nowrap;
  animation: chip-pulse 1.8s ease-in-out infinite;
}

.modal-item-country {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.2;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.modal-actions .btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-size: 16px;
}

.modal-balance {
  margin: 10px 0 0;
}

.mercy-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 12px;
}

.mercy-label {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.mercy-track {
  flex: 1 1 120px;
  max-width: 220px;
  height: 9px;
  background: var(--card-alt);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}

.mercy-fill {
  display: block;
  height: 100%;
  background: var(--yellow);
  transition: width 0.3s ease;
}

.mercy-count {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.mercy-note {
  display: block;
  margin-top: 3px;
}

.modal-mercy {
  justify-content: center;
  margin-top: 14px;
  padding-inline: 22px;
}
.modal-mercy .mercy-track {
  flex: 0 1 128px;
}

.modal-mercy-note {
  margin: 4px 0 0;
  line-height: 1.45;
  padding-bottom: 4px;
}

.collection-ladder {
  margin-top: 24px;
}

.retired-badge {
  position: absolute;
  top: 6px;
  left: 8px;
  background: var(--yellow);
  color: #2f3542;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
}

.retired-text {
  color: #c9a800;
  font-weight: 700;
}

.flair-tooltip {
  --flair-size: 28px;
  --flair-offset: 9px;
  --flair-center: calc(var(--flair-offset) + (var(--flair-size) / 2));
}
.flair-icon {
  width: var(--flair-size);
  height: var(--flair-size);
  object-fit: contain;
  vertical-align: -7px;
  margin-left: var(--flair-offset);
  border-radius: 50%;
  cursor: default;
  position: relative;
  z-index: 1;
}
.flair-icon.flair-rarity-common {
  --flair-ring: var(--muted);
  --flair-glow: rgba(150, 150, 150, 0.55);
  --flair-blur: 6px;
}
.flair-icon.flair-rarity-rare {
  --flair-ring: var(--blue);
  --flair-glow: rgba(62, 153, 245, 0.75);
  --flair-blur: 9px;
}
.flair-icon.flair-rarity-epic {
  --flair-ring: #b48cff;
  --flair-glow: rgba(180, 140, 255, 0.85);
  --flair-blur: 11px;
}
.flair-icon.flair-rarity-legendary {
  --flair-ring: var(--yellow);
  --flair-glow: rgba(242, 193, 78, 0.95);
  --flair-blur: 14px;
}
.flair-icon.flair-rarity-mythic {
  --flair-ring: var(--red);
  --flair-glow: rgba(230, 70, 70, 1);
  --flair-blur: 16px;
}
.flair-icon.flair-rarity-limited {
  --flair-ring: #19aaa5;
  --flair-glow: rgba(25, 170, 165, 0.95);
  --flair-blur: 15px;
}
.flair-icon[class*='flair-rarity-'] {
  box-shadow:
    0 0 0 2px var(--flair-ring),
    0 0 var(--flair-blur) var(--flair-glow);
}
.flair-icon.flair-rarity-mythic {
  animation: flair-mythic-pulse 1.6s ease-in-out infinite;
}
@keyframes flair-mythic-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px var(--flair-ring),
      0 0 calc(var(--flair-blur) - 4px) var(--flair-glow);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--flair-ring),
      0 0 calc(var(--flair-blur) + 6px) var(--flair-glow);
  }
}
.flair-icon.stars-1[class*='flair-rarity-'] {
  box-shadow:
    0 0 0 2px var(--flair-ring),
    0 0 var(--flair-blur) var(--flair-glow),
    0 0 6px 2px rgba(255, 255, 255, 0.55);
}
.flair-icon.stars-2[class*='flair-rarity-'] {
  box-shadow:
    0 0 0 2px var(--flair-ring),
    0 0 var(--flair-blur) var(--flair-glow),
    0 0 10px 3px rgba(255, 255, 255, 0.65);
}
.flair-icon.stars-3[class*='flair-rarity-'] {
  box-shadow:
    0 0 0 2px var(--flair-ring),
    0 0 var(--flair-blur) var(--flair-glow),
    0 0 14px 4px rgba(255, 255, 255, 0.8);
  animation: flair-ascended-shimmer 1.4s ease-in-out infinite;
}
.flair-icon.stars-3.flair-rarity-legendary {
  box-shadow:
    0 0 0 2px var(--flair-ring),
    0 0 var(--flair-blur) var(--flair-glow),
    0 0 16px 5px rgba(255, 224, 102, 0.9);
}
.flair-icon.stars-3.flair-rarity-mythic {
  box-shadow:
    0 0 0 2px var(--flair-ring),
    0 0 var(--flair-blur) var(--flair-glow),
    0 0 16px 5px rgba(255, 110, 140, 0.9);
}
@keyframes flair-ascended-shimmer {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.25);
  }
}
.flair-tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  z-index: 1;
  isolation: isolate;
}
.flair-tooltip.flair-ascended::before {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--flair-center);
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 224, 102, 0.9) 0%,
    rgba(255, 224, 102, 0.55) 35%,
    rgba(255, 224, 102, 0) 70%
  );
  z-index: 0;
  pointer-events: none;
  animation: flair-star-pulse 1.8s ease-in-out infinite;
}
.flair-tooltip.flair-ascended::after {
  content: '★';
  position: absolute;
  top: 50%;
  left: var(--flair-center);
  transform: translate(-50%, -50%);
  font-size: 40px;
  line-height: 1;
  color: #f2c14e;
  text-shadow: 0 0 6px rgba(242, 193, 78, 0.9);
  z-index: 0;
  pointer-events: none;
  animation: flair-star-spin 5s linear infinite;
}
.member-name .flair-icon {
  vertical-align: -1px;
}
@keyframes flair-star-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}
@keyframes flair-star-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.war-member-table-wrap tbody tr:first-child .flair-tooltip-bubble,
.member-list .member-card:first-child .flair-tooltip-bubble {
  top: calc(100% + 8px);
  bottom: auto;
}
.member-name-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.18);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.member-name-link:hover {
  text-decoration-color: currentColor;
}
.flair-tooltip .flair-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  white-space: nowrap;
  padding: 6px 10px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.flair-tooltip-bubble .flair-tooltip-ascended {
  margin-top: 3px;
  color: #c98a00;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.flair-tooltip-bubble .flair-tooltip-rarity {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 2px -0.04em 0 0;
}
.flair-tooltip:hover .flair-tooltip-bubble,
.flair-tooltip:focus-within .flair-tooltip-bubble {
  opacity: 1;
}

.flair-current {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.flair-current .flair-tooltip {
  --flair-size: 26px;
}
.flair-current .flair-icon {
  width: var(--flair-size);
  height: var(--flair-size);
}

.flair-form {
  margin-top: 8px;
}

.flair-btn {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
}

/* drop rates: keep all five on one line */
.drop-rates {
  gap: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}
.mercy-bar {
  font-size: 11px;
  gap: 5px;
}
.mercy-track {
  flex: 1 1 70px;
}

.pull-desc {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 42ch;
}

.modal-single .pull-desc {
  margin-inline: auto;
}

.flair-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.flair-slot {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  padding: 6px;
  cursor: pointer;
  background: var(--card-alt);
  border-width: 3px;
  border-style: solid;
  border-color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flair-slot:active {
  transform: translateY(3px);
  box-shadow: none;
}

.flair-slot-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flair-slot-empty {
  font-size: 26px;
  font-weight: 700;
  color: var(--muted);
}

.flair-slot-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.flair-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 3px solid var(--grey);
}

.flair-option {
  aspect-ratio: 1;
  padding: 5px;
  cursor: pointer;
  background: var(--card);
  border-width: 3px;
  border-style: solid;
  border-color: var(--ink);
  border-radius: 12px;
}

.flair-option:hover {
  transform: translateY(-2px);
}

.flair-option.is-active {
  border-color: var(--blue);
  box-shadow: 0 3px 0 var(--blue-dark);
}

.flair-option-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flair-option.is-none {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
}

.flair-tiers {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 3px solid var(--grey);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.flair-tier-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.flair-tier-name {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flair-tiers .flair-options {
  margin: 0;
  padding: 0;
  border: 0;
}

/* claim card: keep the streak line clear of the action button */
.claim-text {
  padding-right: 12px;
}
.claim-actions {
  flex: none;
}

/* mobile has no hover, so tapping a collectible reveals its description */
.collectible.is-open .collectible-tap-desc {
  display: block;
}

.collectible-tap-desc {
  display: none;
  margin: 6px 0 10px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
}
.collectible.is-equipped .collectible-tap-desc {
  color: #dbe9ff;
}

.coming-soon {
  color: var(--red-dark);
  font-weight: 800;
}

@media (max-width: 600px) {
  .flair-tooltip {
    --flair-size: 24px;
  }
  .flair-icon {
    width: var(--flair-size);
    height: var(--flair-size);
    vertical-align: -6px;
  }
  .claim-text {
    padding-right: 0;
  }
}

.ascend-btn {
  width: 100%;
  margin-top: auto;
  padding: 5px 6px;
  font-size: 11px;
}

.collectible-rarity {
  margin-bottom: 6px;
}
.collectible-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 800;
}
.collectible-stars img {
  width: 18px;
  height: 18px;
  display: block;
  margin-left: 0;
}

.ascend-confirm-dialog {
  width: min(calc(100vw - 32px), 420px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.ascend-confirm-item {
  margin-bottom: 14px;
}
.ascend-confirm-stars {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 auto 12px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
  text-align: center;
}
.ascend-confirm-stars div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ascend-confirm-stars span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ascend-confirm-stars strong {
  font-size: 20px;
  line-height: 1;
  color: var(--yellow);
  white-space: nowrap;
}
.ascend-confirm-stars strong,
.ascend-confirm-number {
  color: #ffd952;
  font-weight: 900;
}
/* Keep the requested bright gold legible against the light dialog surface without darkening the fill. */
:root .ascend-confirm-stars strong,
:root .ascend-confirm-number {
  text-shadow:
    -1px -1px 0 #a56b00,
    1px -1px 0 #a56b00,
    -1px 1px 0 #a56b00,
    1px 1px 0 #a56b00;
}
[data-theme='dark'] .ascend-confirm-stars strong,
[data-theme='dark'] .ascend-confirm-number {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.ascend-confirm-arrow {
  font-size: 24px !important;
  color: var(--text) !important;
}
.ascend-confirm-copy {
  margin: 0 0 16px;
  text-align: center;
}
/* Successful ascensions celebrate at the player's rarity level; particle count grows exponentially in collection.vue. */
.ascend-burst {
  --burst-color: #aeb6c2;
  --burst-flash: rgba(174, 182, 194, 0.58);
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}
.ascend-burst.rarity-common {
  --burst-color: #aeb6c2;
  --burst-flash: rgba(174, 182, 194, 0.58);
}
.ascend-burst.rarity-rare {
  --burst-color: #67b4ff;
  --burst-flash: rgba(59, 156, 255, 0.58);
}
.ascend-burst.rarity-epic {
  --burst-color: #c69aff;
  --burst-flash: rgba(180, 140, 255, 0.58);
}
.ascend-burst.rarity-legendary {
  --burst-color: #ffd952;
  --burst-flash: rgba(255, 190, 55, 0.7);
}
.ascend-burst.rarity-mythic {
  --burst-color: #ff7575;
  --burst-flash: rgba(255, 76, 110, 0.78);
}
.ascend-screen-flash {
  position: absolute;
  inset: 0;
  background: var(--burst-flash);
  mix-blend-mode: screen;
  animation: ascend-screen-flash 0.42s ease-out both;
}
.ascend-burst i {
  position: absolute;
  left: var(--burst-origin-x, 50%);
  top: var(--burst-origin-y, 50%);
  width: var(--burst-size);
  height: var(--burst-size);
  background: var(--burst-color);
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
  box-shadow: 0 0 12px 4px color-mix(in srgb, var(--burst-color) 72%, transparent);
  animation: ascend-sparkle 0.55s cubic-bezier(0.14, 0.82, 0.29, 1) var(--burst-delay) both;
}
html.ascend-screen-shake body {
  animation: ascend-screen-shake 0.42s ease-out both;
}
@keyframes ascend-screen-shake {
  0%,
  100% {
    transform: translate(0);
  }
  16% {
    transform: translate(-5px, 2px);
  }
  32% {
    transform: translate(5px, -2px);
  }
  48% {
    transform: translate(-3px, -1px);
  }
  64% {
    transform: translate(2px, 1px);
  }
}
.collectible.ascend-sparkles-entering::before,
.collectible.ascend-sparkles-entering::after,
.collectible.ascend-sparkles-entering .collectible-moving-sparkles {
  opacity: 0;
  animation: none !important;
}
.collectible[class*='stars-']::before,
.collectible[class*='stars-']::after,
.collectible-moving-sparkles {
  transition: opacity 0.18s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  html.ascend-screen-shake body {
    animation: none;
  }
}
@keyframes ascend-screen-flash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ascend-sparkle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15) rotate(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0.1)
      rotate(160deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ascend-screen-flash,
  .ascend-burst i {
    animation: none;
    opacity: 0;
  }
}
@media (max-width: 420px) {
  .ascend-confirm-dialog {
    width: calc(100vw - 20px);
    padding: 18px 14px;
  }
  .ascend-confirm-stars {
    gap: 8px;
    padding: 10px;
  }
  .ascend-confirm-stars strong {
    font-size: 18px;
  }
  .ascend-confirm-arrow {
    font-size: 20px !important;
  }
  .ascend-confirm-dialog .modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ascend-confirm-dialog .modal-actions .btn {
    min-width: 0;
    padding-inline: 10px;
  }
}

.flair-text-stars {
  font-size: 12px;
  color: #f2c14e;
  letter-spacing: -1px;
  margin-left: 5px;
}

.flair-option {
  position: relative;
}

.flair-option.stars-1,
.flair-slot.stars-1 {
  border-color: #c98a4b;
  box-shadow:
    0 3px 0 var(--ink),
    0 0 9px rgba(201, 138, 75, 0.5);
}

.flair-option.stars-2,
.flair-slot.stars-2 {
  border-color: #b9c2cc;
  box-shadow:
    0 3px 0 var(--ink),
    0 0 12px rgba(185, 194, 204, 0.6);
}

.flair-option.stars-3,
.flair-slot.stars-3 {
  border-color: #f2c14e;
  box-shadow:
    0 3px 0 var(--ink),
    0 0 16px rgba(242, 193, 78, 0.75);
}

.flair-option.is-active.is-active {
  border-color: var(--blue);
}

/* ascension frames: bronze, silver, gold */
@property --ring {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes ring-spin {
  to {
    --ring: 360deg;
  }
}

.collectible[class*='stars-'] {
  border-color: transparent;
  background-image:
    linear-gradient(var(--card), var(--card)),
    conic-gradient(from var(--ring), var(--m1), var(--m2), var(--sparkle), var(--m2), var(--m1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: none;
}
.collectible.is-equipped[class*='stars-'] {
  background-image:
    linear-gradient(var(--blue), var(--blue)),
    conic-gradient(from var(--ring), var(--m1), var(--m2), var(--sparkle), var(--m2), var(--m1));
}

.collectible.stars-1 {
  --m1: #8a4f22;
  --m2: #c98a4b;
  --m3: #f0c489;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 12px rgba(201, 138, 75, 0.45);
}

.collectible.stars-2 {
  --m1: #7d8794;
  --m2: #b9c2cc;
  --m3: #ffffff;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 16px rgba(185, 194, 204, 0.55);
}

.collectible.stars-3 {
  --m1: #b8860b;
  --m2: #f2c14e;
  --m3: #fff6cf;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 22px rgba(242, 193, 78, 0.7);
  overflow: hidden;
}

/* ascension frames get rarity-flavoured colors for legendary/mythic instead of generic bronze-silver-gold */
.collectible.rarity-legendary.stars-1 {
  --m1: #a8790a;
  --m2: #f2c14e;
  --m3: #fff2c2;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 16px rgba(242, 193, 78, 0.6);
}
.collectible.rarity-legendary.stars-2 {
  --m1: #c9960c;
  --m2: #ffd766;
  --m3: #fffbe6;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 20px rgba(255, 215, 102, 0.7);
}
.collectible.rarity-legendary.stars-3 {
  --m1: #e0a300;
  --m2: #ffe066;
  --m3: #ffffff;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 26px rgba(255, 224, 102, 0.85);
}

.collectible.rarity-mythic.stars-1 {
  --m1: #7a1f1f;
  --m2: #d94040;
  --m3: #ffb3b3;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 16px rgba(217, 64, 64, 0.6);
}
.collectible.rarity-mythic.stars-2 {
  --m1: #9c1f4d;
  --m2: #ec4d7a;
  --m3: #ffd6e3;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 20px rgba(236, 77, 122, 0.7);
}
.collectible.rarity-mythic.stars-3 {
  --m1: #c4123f;
  --m2: #ff4d6d;
  --m3: #ffffff;
  box-shadow:
    0 5px 0 var(--ink),
    0 0 28px rgba(255, 77, 109, 0.9);
}

/* Rarity owns the ascension colour; star level owns density and motion only. */
.collectible.rarity-common[class*='stars-'] {
  --m1: #66707c;
  --m2: #aeb6c2;
  --m3: #f0f3f6;
}
.collectible.rarity-rare[class*='stars-'] {
  --m1: #2d73bd;
  --m2: #67b4ff;
  --m3: #dceeff;
}
.collectible.rarity-epic[class*='stars-'] {
  --m1: #7750ba;
  --m2: #c69aff;
  --m3: #f0e6ff;
}
.collectible.rarity-legendary[class*='stars-'] {
  --m1: #a8790a;
  --m2: #ffd952;
  --m3: #fff5c4;
}
.collectible.rarity-mythic[class*='stars-'] {
  --m1: #9f2442;
  --m2: #ff7575;
  --m3: #ffd7df;
}

.collectible.stars-3::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 60%
  );
  animation: shine 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .collectible.stars-3::after,
  .collectible[class*='stars-'] {
    animation: none;
  }
}

.collection-flair-hint {
  margin: -8px 0 14px;
}

.theme-switch {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}

/* Ascension uses tier-coloured light only: no extra outer ring. */
.collectible.rarity-common[class*='stars-'],
.collectible.rarity-rare[class*='stars-'],
.collectible.rarity-epic[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 7px 1px color-mix(in srgb, var(--m2) 28%, transparent);
}
.collectible.rarity-legendary[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 16px 4px color-mix(in srgb, var(--m2) 60%, transparent);
}
.collectible.rarity-mythic[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 18px 5px color-mix(in srgb, var(--m2) 64%, transparent);
}

.theme-switch-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .theme-switch {
    flex-wrap: wrap;
  }
}

/* Collection spacing and dark-mode contrast fixes. */
.collection-flair-hint {
  margin-bottom: 22px;
}

/* Collections hub: one mixed item grid, explicit sets, and a contained trades preview. */
.collection-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.collection-page-head .page-title {
  margin-bottom: 4px;
}
.collection-page-head .hint {
  margin: 0;
}
.collection-wallet {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: #332200;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--ink);
}
.collection-mode {
  display: none;
}
.collection-section-title {
  margin: 0;
  font-size: 20px;
}
.collection-pack-control {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 3px 0 var(--ink);
}
.collection-pack-control .collection-wallet {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.collection-open-pack {
  border: 0;
  border-left: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 15px;
}
.collection-quick-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-left: auto;
}
.collection-desktop-trade {
  min-height: 34px;
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  justify-content: center;
}
.collection-desktop-trade .trade-unread {
  margin-left: 2px;
}
@media (max-width: 600px) {
  .collection-quick-actions {
    display: none;
  }
}
.menu-selection-label {
  display: block;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.collection-sticky-toolbar {
  position: sticky;
  top: calc(var(--summon-result-top, 0px) + 8px);
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 6px 0;
  background: var(--bg);
}
.collection-sticky-toolbar .menu-picker {
  flex: 1;
  min-width: 0;
}
.collection-sticky-filter {
  display: none;
}
.menu-picker {
  position: relative;
  margin: 0;
}
.menu-picker-trigger,
.menu-picker-item {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.menu-picker-trigger {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 800;
}
.menu-picker-trigger:focus-visible,
.menu-picker-item:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.menu-picker-chevron,
.collection-trigger-chevron,
.pack-rarity-chevron {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.menu-picker-progress {
  color: var(--muted);
  font-size: 0.9em;
  font-weight: 700;
}
.menu-picker-chevron {
  margin-left: auto;
}
.collection-trigger-chevron {
  width: 13px;
  height: 13px;
}
.collection-trigger-chevron svg {
  width: 13px;
  height: 13px;
}
.collection-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
}
.collection-filter-button .collection-trigger-chevron {
  transform: translateY(0);
}
.menu-picker-chevron svg,
.collection-trigger-chevron svg,
.pack-rarity-chevron svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-picker-icon {
  width: 30px;
  height: 30px;
  flex: none;
}
.menu-picker-all-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--card-alt);
  font-weight: 800;
}
.menu-picker-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 7px 0 var(--ink),
    0 16px 30px rgba(0, 0, 0, 0.18);
  transform-origin: top center;
}
.menu-picker-enter-active,
.menu-picker-leave-active {
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 1.35, 0.45, 1);
}
.menu-picker-enter-from,
.menu-picker-leave-to {
  opacity: 0;
  transform: translateY(-8px) scaleY(0.94);
}
.menu-picker-item {
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border-radius: 0;
  border-bottom-width: 0;
}
.menu-picker-item:last-child {
  border-bottom-width: 2px;
}
.menu-picker-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.menu-picker-item:hover,
.menu-picker-item.selected {
  background: var(--blue);
  color: #fff;
}
.menu-picker-item:hover small,
.menu-picker-item.selected small {
  color: rgba(255, 255, 255, 0.82);
}
.collection-mobile-pack {
  display: none;
}
.collection-scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 13px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  box-shadow:
    0 4px 0 var(--ink),
    0 8px 18px rgba(0, 0, 0, 0.2);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.collection-scroll-top > span:first-child {
  font-size: 19px;
  line-height: 1;
}
[data-theme='dark'] .collection-scroll-top {
  background: var(--yellow);
  color: #332200;
  border-color: #6f4c00;
  box-shadow:
    0 4px 0 #0f1118,
    0 8px 18px rgba(0, 0, 0, 0.38);
}
/* Ascended cards retain their unascended rarity borders, then add localized sparkle and stronger glow. */
.collectible[class*='stars-'] {
  background-image: none !important;
  border-color: var(--ink);
  isolation: isolate;
  overflow: hidden;
}
.collectible.rarity-rare[class*='stars-'] {
  border-color: var(--blue);
}
.collectible.rarity-epic[class*='stars-'] {
  border-color: #b48cff;
}
.collectible.rarity-legendary[class*='stars-'] {
  border-color: var(--yellow);
}
.collectible.rarity-clan[class*='stars-'] {
  border-color: #2fb8ab;
}
.collectible.rarity-mythic[class*='stars-'] {
  border-color: var(--red);
}
.collectible[class*='stars-']::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  filter: drop-shadow(0 0 4px var(--m2));
  animation: ascended-card-sparkle 1.4s ease-in-out infinite alternate;
}
/* 12, 18, and 24 localized sparkles make every ascension feel rich while rewarding higher stars. */
.collectible.stars-1::before {
  background:
    radial-gradient(circle at 7% 12%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 17% 39%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 27% 76%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 39% 9%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 48% 54%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 59% 89%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 67% 24%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 76% 63%, var(--m2) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 91% 14%, var(--sparkle) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 87% 85%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 12% 91%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 35% 31%, var(--m2) 0 1.5px, transparent 2.7px);
}
.collectible.stars-2::before {
  background:
    radial-gradient(circle at 7% 12%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 17% 39%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 27% 76%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 39% 9%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 48% 54%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 59% 89%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 67% 24%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 76% 63%, var(--m2) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 91% 14%, var(--sparkle) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 87% 85%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 12% 91%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 35% 31%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 53% 18%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 70% 42%, var(--m2) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 5% 60%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 29% 55%, var(--m2) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 94% 52%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 62% 72%, var(--m2) 0 1.7px, transparent 2.9px);
}
.collectible.stars-3::before {
  background:
    radial-gradient(circle at 7% 12%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 17% 39%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 27% 76%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 39% 9%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 48% 54%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 59% 89%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 67% 24%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 76% 63%, var(--m2) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 91% 14%, var(--sparkle) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 87% 85%, var(--m2) 0 1.8px, transparent 3px),
    radial-gradient(circle at 12% 91%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 35% 31%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 53% 18%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 70% 42%, var(--m2) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 5% 60%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 29% 55%, var(--m2) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 94% 52%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 62% 72%, var(--m2) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 21% 20%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 43% 91%, var(--m2) 0 1.7px, transparent 2.9px),
    radial-gradient(circle at 81% 39%, var(--sparkle) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 98% 69%, var(--m2) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 51% 35%, var(--sparkle) 0 1.3px, transparent 2.5px),
    radial-gradient(circle at 15% 52%, var(--m2) 0 1.7px, transparent 2.9px);
}
.collectible[class*='stars-'] > * {
  position: relative;
  z-index: 1;
}
.collectible.stars-3::after {
  z-index: 0;
}
/* The sparkle-layer child rule above must not pull the ascension stars back into normal card flow. */
.collectible[class*='stars-'] > .collectible-stars {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 3;
}
@keyframes ascended-card-sparkle {
  from {
    opacity: 0.52;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1.02);
  }
}
.collectible.rarity-common[class*='stars-'],
.collectible.rarity-rare[class*='stars-'],
.collectible.rarity-epic[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 18px 5px color-mix(in srgb, var(--m2) 64%, transparent);
}
.collectible.rarity-legendary[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 30px 10px color-mix(in srgb, var(--m2) 78%, transparent);
}
.collectible.rarity-mythic[class*='stars-'] {
  box-shadow:
    0 5px 0 var(--ink),
    0 0 34px 12px color-mix(in srgb, var(--m2) 82%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .collectible[class*='stars-']::before {
    animation: none;
  }
}
.collectible[class*='stars-'] > .collectible-badges {
  position: absolute;
  z-index: 3;
}
.collectible[class*='stars-'] {
  --sparkle: var(--m2);
}
.collectible.rarity-legendary[class*='stars-'] {
  --sparkle: #8a6500;
}
[data-theme='dark'] .collectible.rarity-legendary[class*='stars-'] {
  --sparkle: #ffd766;
}
.collectible[class*='stars-']::before {
  animation: ascended-card-sparkle 2.9s ease-in-out infinite;
}
@keyframes ascended-card-sparkle {
  0% {
    transform: translate(0, 0);
    opacity: 0.62;
  }
  23% {
    transform: translate(2px, -1px);
    opacity: 1;
  }
  51% {
    transform: translate(-2px, 2px);
    opacity: 0.7;
  }
  76% {
    transform: translate(1px, 2px);
    opacity: 1;
  }
  100% {
    transform: translate(-1px, -2px);
    opacity: 0.66;
  }
}
.collectible.stars-3::after {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 15% 15%, var(--sparkle) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 42% 32%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 73% 17%, var(--sparkle) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 23% 67%, var(--m2) 0 1.5px, transparent 2.7px),
    radial-gradient(circle at 58% 78%, var(--sparkle) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 88% 58%, var(--m2) 0 1.5px, transparent 2.7px);
  background-size: 50% 50%;
  filter: drop-shadow(0 0 3px var(--m2));
  animation: ascended-card-sparkle-alt 3.7s ease-in-out infinite;
}
@keyframes ascended-card-sparkle-alt {
  0% {
    transform: translate(0, 0);
    opacity: 0.6;
  }
  31% {
    transform: translate(-2px, 1px);
    opacity: 1;
  }
  64% {
    transform: translate(2px, -2px);
    opacity: 0.7;
  }
  100% {
    transform: translate(-1px, 2px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .collectible.stars-3::after {
    animation: none;
  }
}
.collectible.stars-3::after {
  animation: none;
}
.collectible[class*='stars-']::before {
  animation: none;
}
.collectible-moving-sparkles {
  position: absolute !important;
  inset: 4px;
  z-index: 0 !important;
  pointer-events: none;
  contain: layout paint;
  clip-path: inset(0 round 12px);
}
.collectible-moving-sparkles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--sparkle);
  box-shadow: 0 0 4px var(--m2);
  will-change: transform, opacity;
  animation: collectible-sparkle-drift var(--d) ease-in-out var(--delay) infinite;
}
.collectible-moving-sparkles i:nth-child(1) {
  left: 10%;
  top: 16%;
  --d: 3.1s;
  --delay: -0.4s;
  --x: 3px;
  --y: -2px;
}
.collectible-moving-sparkles i:nth-child(2) {
  left: 28%;
  top: 72%;
  --d: 4.2s;
  --delay: -1.7s;
  --x: -3px;
  --y: 2px;
}
.collectible-moving-sparkles i:nth-child(3) {
  left: 48%;
  top: 11%;
  --d: 3.7s;
  --delay: -2.4s;
  --x: 2px;
  --y: 3px;
}
.collectible-moving-sparkles i:nth-child(4) {
  left: 71%;
  top: 44%;
  --d: 4.5s;
  --delay: -0.9s;
  --x: -3px;
  --y: -2px;
}
.collectible-moving-sparkles i:nth-child(5) {
  left: 89%;
  top: 81%;
  --d: 3.4s;
  --delay: -2.9s;
  --x: 2px;
  --y: -3px;
}
.collectible-moving-sparkles i:nth-child(6) {
  left: 14%;
  top: 91%;
  --d: 4.8s;
  --delay: -1.3s;
  --x: 3px;
  --y: 1px;
}
.collectible-moving-sparkles i:nth-child(7) {
  left: 56%;
  top: 66%;
  --d: 3.9s;
  --delay: -3.1s;
  --x: -2px;
  --y: 3px;
}
.collectible-moving-sparkles i:nth-child(8) {
  left: 93%;
  top: 21%;
  --d: 4.1s;
  --delay: -0.6s;
  --x: -3px;
  --y: 2px;
}
.collectible-moving-sparkles i:nth-child(9) {
  left: 38%;
  top: 38%;
  --d: 3.3s;
  --delay: -2.1s;
  --x: 2px;
  --y: -3px;
}
.collectible-moving-sparkles i:nth-child(10) {
  left: 78%;
  top: 92%;
  --d: 4.6s;
  --delay: -1.1s;
  --x: -2px;
  --y: -3px;
}
@keyframes collectible-sparkle-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.45;
  }
  29% {
    transform: translate3d(var(--x), var(--y), 0);
    opacity: 1;
  }
  63% {
    transform: translate3d(calc(var(--x) * -0.7), calc(var(--y) * -0.7), 0);
    opacity: 0.65;
  }
}
@media (prefers-reduced-motion: reduce) {
  .collectible-moving-sparkles i {
    animation: none;
  }
}
[data-theme='dark'] .collection-grid-heading .collection-section-title {
  color: var(--text);
}
.nav-secondary {
  z-index: 210;
}
.nav-scrim {
  z-index: 200;
}
[data-theme='dark'] .trade-mini-card strong {
  color: var(--text);
}
.trade-desktop-boards .trade-offer {
  order: -1;
}
.trade-desktop-boards .trade-want {
  order: 1;
}
.confirm-label-short {
  display: none;
}
@media (max-width: 349px) {
  .confirm-label-full {
    display: none;
  }
  .confirm-label-short {
    display: inline;
  }
}

.collection-grid-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.collection-grid-heading .collection-section-title {
  font-family: Fredoka, Nunito, 'Segoe UI', sans-serif;
  font-weight: 900;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.collection-grid-heading .hint {
  color: var(--muted);
  font-family: Fredoka, Nunito, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
.collection-items-collapsed-note {
  font-size: 13px !important;
  font-weight: 500;
}
.collection-items-chevron {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.collection-items-chevron svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}
.collection-items-chevron.open svg {
  transform: rotate(180deg);
}
.collection-grid-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.collection-grid-meta .hint {
  margin: 0;
  white-space: nowrap;
}
.collection-grid-heading .hint {
  margin: 0;
}
.collection-filter-button {
  min-height: 38px;
  flex: none;
}

/* Calculator keeps the collection's expandable-section language, with a compact reference card below. */
.calculator-page {
  max-width: none;
}
.calculator-page-head {
  margin-bottom: 22px;
}
.calculator-browser {
  padding: 18px 20px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.calculator-accordion-trigger {
  padding-bottom: 0;
}
.calculator-coming-soon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border: 2px dashed color-mix(in srgb, var(--ink) 32%, transparent);
  border-radius: 12px;
  background: var(--card-alt);
}
.calculator-soon-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--yellow);
  color: #5b3d00;
  font-size: 24px;
  box-shadow: inset 0 -2px 0 rgba(91, 61, 0, 0.18);
}
.calculator-coming-soon strong {
  display: block;
  color: var(--ink);
  font-family: Fredoka, Nunito, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 900;
}
.calculator-coming-soon p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.calculator-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 20px;
  border-color: var(--blue);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--blue) 9%, var(--card)) 0%,
    var(--card) 56%
  );
}
.calculator-reference-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calculator-reference .card-title {
  margin: 0;
}
.calculator-reference .hint {
  margin: 5px 0 0;
}
.calculator-reference-link {
  flex: 0 0 auto;
  white-space: nowrap;
}
[data-theme='dark'] .calculator-coming-soon strong {
  color: var(--text);
}
[data-theme='dark'] .calculator-reference-kicker {
  color: #7ebcff;
}
@media (max-width: 520px) {
  .calculator-browser {
    padding: 16px;
  }
  .calculator-browser .collection-grid-meta {
    align-items: flex-start;
  }
  .calculator-reference {
    align-items: stretch;
    flex-direction: column;
  }
  .calculator-reference-link {
    justify-content: center;
  }
}

.collection-rarity-filter.rarity-filter-common {
  color: #69727f;
  border-color: #69727f;
}
.collection-rarity-filter.rarity-filter-rare {
  color: #277ed1;
  border-color: #277ed1;
}
.collection-rarity-filter.rarity-filter-epic {
  color: #8058c9;
  border-color: #8058c9;
}
.collection-rarity-filter.rarity-filter-legendary {
  color: #a26d00;
  border-color: #b68508;
}
.collection-rarity-filter.rarity-filter-mythic {
  color: #c53631;
  border-color: #c53631;
}
.collection-rarity-filter.rarity-filter-limited {
  color: #087d79;
  border-color: #19aaa5;
}
.collection-rarity-filter.btn-blue,
.collection-rarity-all.btn-blue {
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 4px 0 var(--blue-dark);
  outline: 0;
}
.collection-show-filter.btn-blue {
  border-color: var(--blue);
}
.collection-filter-dialog {
  width: min(480px, calc(100% - 28px));
  padding: 20px;
}
.collection-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.collection-filter-head .modal-title {
  margin: 0;
}
.collection-filter-dialog > .hint {
  margin: 10px 0 18px;
}
.collection-filter-dialog h3 {
  margin: 18px 0 8px;
  font-size: 14px;
  text-align: left;
}
.filter-option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.collection-filter-done {
  width: 100%;
  min-height: 44px;
  margin-top: 24px;
  justify-content: center;
}

/* Pack opening follows the collection dialogs, while result cards retain the existing new/dupe flair. */
.pack-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: calc(var(--summon-result-height, 100dvh) - 16px);
  overflow-y: auto;
  padding: 22px;
}
.pack-dialog-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pack-dialog-head .modal-title {
  flex: 1;
  margin: 0;
  text-align: left;
}
.pack-dialog-balance {
  display: inline-flex;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: #332200;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.summon-menu-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 0 9px;
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--card-alt);
}
.summon-menu-picker button {
  min-height: 64px;
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.summon-menu-picker button:not(:last-child) {
  box-shadow: inset -1px 0 0 var(--grey);
}
.summon-menu-picker button.selected {
  background: var(--red);
  color: #fff;
}
.summon-menu-picker.has-selection-error {
  border-color: var(--red);
  animation: summon-menu-selection-pulse 0.9s ease-in-out 2;
}
.summon-menu-error {
  margin: -3px 0 10px;
  color: var(--red-dark);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}
@keyframes summon-menu-selection-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(230, 70, 70, 0.55);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(230, 70, 70, 0);
  }
}
.summon-menu-icons {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 33px;
  gap: 3px;
}
.summon-menu-icons img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.summon-menu-picker button:first-child .summon-menu-icons img {
  width: 13px;
  height: 13px;
}
.summon-menu-picker button:not(:first-child) .summon-menu-icons {
  flex-direction: row;
}
.war-bet-modal,
.war-bet-result {
  border-color: var(--yellow);
  box-shadow: 0 5px 0 #6f4c00;
}

.piggy-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-top: -6px;
}
.piggy-svg {
  width: 280px;
  max-width: 90%;
  height: auto;
  animation: piggy-bounce 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.piggy-coin {
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.piggy-coin.is-filled {
  opacity: 1;
  transform: scale(1);
}
.piggy-tail {
  animation: piggy-wag 1.4s ease-in-out infinite;
  transform-origin: 14px 92px;
}
.piggy-label {
  font-size: 14px;
  font-weight: 700;
}
.piggy-label strong {
  color: var(--gold-dark);
}
[data-theme='dark'] .piggy-label strong,
[data-theme='dark'] .war-bet-recent-max td {
  color: var(--yellow);
}
.war-bet-result-star {
  font-size: 48px;
  text-align: center;
  animation: piggy-bounce 1.4s ease-in-out infinite;
}
.war-bet-result-payout {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}

@keyframes piggy-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.02);
  }
}

@keyframes piggy-wag {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-12deg);
  }
}

.pack-mercy {
  margin-top: 8px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
}
.pack-mercy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.pack-mercy-row strong,
.pack-mercy-count {
  white-space: nowrap;
}
.pack-mercy-row .mercy-track {
  flex: 1;
  min-width: 44px;
}
.pack-mercy .hint {
  margin: 6px 0 0;
  font-size: 11px;
  text-align: left;
}
.pack-rarity-chances {
  margin-top: 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
}
.pack-rarity-chances summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.pack-rarity-chances[open] .pack-rarity-chevron {
  transform: rotate(180deg);
}
.pack-rarity-chevron {
  transition: transform 0.22s ease;
}
.pack-rates-scroll {
  max-height: 126px;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--grey) transparent;
}
.pack-rarity-chances[open] .pack-rate-row {
  animation: pack-expand-row 0.24s both;
}
.pack-rarity-chances[open] .pack-rate-row:nth-of-type(2) {
  animation-delay: 0.03s;
}
.pack-rarity-chances[open] .pack-rate-row:nth-of-type(3) {
  animation-delay: 0.06s;
}
@keyframes pack-expand-row {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pack-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--grey);
  font-size: 13px;
}
.pack-rate-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pack-rate-label i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.pack-rate-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
}
.pack-rate-value b {
  display: block;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.pack-rate-value em {
  display: block;
  height: 100%;
  min-width: 5px;
  border-radius: inherit;
  background: currentColor;
  transition: width 0.36s ease;
}
.pack-choice-title {
  margin: 26px 0 10px;
  font-size: 15px;
}
.pack-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.pack-option {
  min-height: 60px;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--card);
  color: inherit;
  box-shadow: 0 3px 0 var(--ink);
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}
.pack-option:not(:disabled):hover,
.pack-option.selected {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--ink);
}
.pack-option strong {
  font-size: 21px;
}
.pack-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.pack-option.selected {
  background: var(--red);
  color: #fff;
  border-color: var(--ink);
}
.pack-option.selected span {
  color: rgba(255, 255, 255, 0.85);
}
.pack-option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.pack-open-action {
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  justify-content: center;
}
.result-coins {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: #332200;
  box-shadow: 0 2px 0 var(--ink);
  font-weight: 800;
  white-space: nowrap;
}
.result-pull-options {
  display: flex;
  gap: 6px;
  flex: 1;
}
.result-pull-option {
  min-width: 46px;
  min-height: 40px;
  display: grid;
  place-content: center;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease;
}
.result-pull-option.selected {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 var(--blue-dark);
}
.result-pull-option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.result-pull-option small {
  color: var(--red);
  font-size: 9px;
  line-height: 1.1;
  font-weight: 800;
}
.result-summon-again {
  min-height: 42px;
  white-space: nowrap;
}
.summon-button-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: upload-spin 0.7s linear infinite;
}
@media (max-width: 349px) {
  .pack-rate-label i,
  .pack-rate-value b {
    display: none;
  }
  .pack-rate-value {
    min-width: 0;
    margin-left: auto;
  }
}
@media (max-width: 299px) {
  .pack-mercy .mercy-track,
  .modal-mercy .mercy-track,
  .summon-dialog .collection-result-close {
    display: none;
  }
  .pack-mercy-count {
    margin-left: auto;
  }
}
@media (min-width: 601px) {
  .pack-dialog {
    width: min(760px, calc(100% - 48px));
    padding: 28px;
  }
  .pack-dialog .modal-title {
    font-size: 28px;
  }
  .pack-dialog-balance {
    padding: 7px 11px;
    font-size: 15px;
  }
  .pack-mercy {
    margin-top: 12px;
    padding: 13px 15px;
  }
  .pack-mercy-row {
    gap: 10px;
    font-size: 15px;
  }
  .pack-mercy .hint {
    margin-top: 8px;
    font-size: 14px;
  }
  .pack-rarity-chances summary {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 15px;
  }
  .pack-rate-row {
    padding: 10px 13px;
    font-size: 15px;
  }
  .pack-choice-title {
    margin-top: 30px;
    font-size: 20px;
  }
  .summon-menu-picker {
    gap: 7px;
    padding: 6px;
  }
  .summon-menu-picker button {
    min-height: 82px;
    font-size: 14px;
  }
  .pack-option {
    min-height: 72px;
  }
  .pack-option strong {
    font-size: 25px;
  }
  .pack-option span {
    font-size: 14px;
  }
  .pack-open-action {
    min-height: 66px;
    margin-top: 20px;
    font-size: 20px;
  }
  .summon-dialog-actions {
    margin-top: 14px;
  }
  .result-pull-options {
    justify-content: flex-end;
    margin-left: auto;
  }
  .result-summon-again {
    width: 100%;
    justify-content: center;
  }
}

.collection-grid-unified {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.collection-grid-unified .collectible {
  min-width: 0;
  min-height: 194px;
  padding: 22px 6px 8px;
}
.collection-grid-unified .collectible-name,
.collection-grid-unified .collectible-rarity {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.collection-grid-unified .collectible-art {
  width: 62px;
  height: 62px;
}
.collection-grid-unified .collectible-name {
  font-size: 13px;
  line-height: 1.15;
}
.collection-grid-unified .collectible-rarity {
  font-size: 11px;
}
.limited-menu-note {
  margin: -2px 0 14px;
  padding: 9px 12px;
  border: 2px solid #19aaa5;
  border-radius: 10px;
  background: #e9fffb;
  color: #087d79;
  font-weight: 800;
  text-align: center;
}
.collection-empty-state {
  grid-column: 1 / -1;
  min-height: 235px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 22px;
  border: 2px dashed var(--grey);
  border-radius: 16px;
  background: var(--card);
  color: var(--muted);
  text-align: center;
}
.collection-empty-state img {
  width: 76px;
  height: 76px;
}
.collection-empty-state strong {
  color: var(--ink);
  font-size: 18px;
}
.collection-empty-state span {
  font-size: 13px;
}
.trades-mockup {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 20px;
}
@media (min-width: 601px) {
  .trades-mockup {
    margin-top: 32px;
  }
}
.trades-mockup-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.trades-mockup > .hint {
  margin: 6px 0 16px;
}
.trades-mockup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.trades-mockup-row strong {
  font-size: 12px;
  color: var(--muted);
}
.trades-mockup .btn {
  width: 100%;
  margin-top: 14px;
}
.trades-mockup.trade-launch .btn {
  box-shadow: none;
}
@media (max-width: 600px) {
  .collection-page-head {
    align-items: center;
  }
  .collection-page-head .page-title {
    font-size: 24px;
  }
  .collection-wallet {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 12px;
  }
  .collection-pack-control {
    display: none;
  }
  .collection-sticky-toolbar {
    top: calc(var(--summon-result-top, 0px) + 6px);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 0;
  }
  .collection-sticky-filter {
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding-inline: 7px;
    font-size: 12px;
  }
  .collection-sticky-filter .collection-trigger-chevron {
    width: 16px;
    height: 16px;
  }
  .collection-sticky-filter .collection-trigger-chevron svg {
    width: 16px;
    height: 16px;
  }
  .collection-sticky-pack {
    display: none;
  }
  .collection-mobile-pack {
    position: fixed;
    z-index: 30;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .collection-scroll-top {
    display: none;
  }
  .collection-mobile-trade {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 3px solid var(--ink);
    border-radius: 999px;
    background: var(--yellow) !important;
    color: var(--ink) !important;
    box-shadow:
      0 4px 0 var(--ink),
      0 8px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
  }
  .collection-mobile-trade svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .collection-mobile-trade-unread {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--card);
    border-radius: 999px;
    background: var(--red);
  }
  .collection-scroll-top {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 8px;
  }
  .collection-scroll-top-label {
    display: none;
  }
  .collection-mobile-pack .btn {
    min-height: 42px;
    min-width: 112px;
    gap: 0;
    padding: 8px 16px;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow:
      0 4px 0 var(--ink),
      0 8px 18px rgba(0, 0, 0, 0.25);
    font-size: 13px;
  }
  .collection-mobile-coin {
    margin-right: 14px;
  }
  .collection-browser {
    padding-bottom: 58px;
  }
  .collection-set-card {
    min-height: 70px;
    padding: 8px;
  }
  .collection-set-card strong {
    font-size: 12px;
  }
  .collection-set-card span {
    font-size: 11px;
  }
  .collection-grid-unified {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .collection-grid-unified .collectible {
    min-height: 158px;
    padding: 18px 5px 7px;
  }
  .collection-grid-unified .collectible-art {
    width: 48px;
    height: 48px;
  }
  .collection-grid-unified .collectible-name {
    font-size: 11px;
  }
  .collection-grid-unified .collectible-rarity {
    font-size: 10px;
  }
  .collection-grid-unified .collectible-tap-desc {
    display: none;
  }
  .collection-grid-unified .collectible-stars {
    top: 4px;
    left: 4px;
  }
  .collection-grid-unified .collectible-badges {
    top: 4px;
    right: 4px;
    left: auto;
    transform: scale(0.82);
    transform-origin: top right;
  }
}
[data-theme='dark'] .claim-coin-card {
  color: #fff;
}
[data-theme='dark'] #claimCard .claim-today-reward.is-claimed {
  background: #1e3324;
  border-color: #4fae5f;
}
[data-theme='dark'] #claimCard .claim-today-reward.is-unclaimed {
  background: #3a1e1e;
  border-color: #c94444;
}
[data-theme='dark'] .is-claimed .claim-today-reward-title {
  color: #7fe0a0;
}
[data-theme='dark'] .is-unclaimed .claim-today-reward-title {
  color: #ff9b9b;
}
[data-theme='dark'] .claim-today-reward-value {
  color: var(--text);
}
[data-theme='dark'] .mine-section-divider {
  color: #fff;
}
[data-theme='dark'] .hall-legend-kicker {
  color: #ffe08a;
  text-shadow: 0 1px 0 #4a3200;
}
/* Five-click banner egg scene. The scrim is deliberately above navigation to lock input. */
.egg-scene {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(22, 26, 35, 0.79);
  padding: 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.egg-scene img {
  -webkit-user-drag: none;
  user-select: none;
}
.egg-scene-stage {
  position: relative;
  width: min(900px, 100%);
  height: min(600px, 84vh);
  overflow: hidden;
}
.egg-chicken {
  position: absolute;
  width: min(250px, 42vw);
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.2));
}
.egg-chicken-side {
  left: -280px;
  bottom: 22%;
  animation: egg-walk-in 1.7s cubic-bezier(0.3, 0.8, 0.4, 1) forwards;
}
.egg-chicken-side.leaving {
  animation: egg-walk-out 1.35s ease-in forwards;
}
.egg-shush {
  position: absolute;
  left: 50%;
  bottom: 17%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  color: #fff;
  font-size: clamp(25px, 5vw, 46px);
  text-shadow: 0 4px 0 #2f3542;
  animation: egg-pop 0.32s ease-out both;
}
.egg-chicken-front {
  position: static;
  width: min(220px, 42vw);
}
.egg-laying {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: min(115px, 25vw);
  transform: translateX(-50%);
  animation: egg-drop 0.5s ease-out both;
  filter: drop-shadow(2px 0 0 #2f3542) drop-shadow(-2px 0 0 #2f3542) drop-shadow(0 2px 0 #2f3542)
    drop-shadow(0 -2px 0 #2f3542) drop-shadow(0 7px 0 rgba(0, 0, 0, 0.18));
}
[data-theme='dark'] .egg-laying {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -2px 0 #fff) drop-shadow(0 7px 0 rgba(0, 0, 0, 0.35));
}
.egg-colonel {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(640px, 100%);
  padding: 26px 30px;
  animation: egg-colonel-pop 0.5s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
.egg-colonel > img {
  width: 150px;
  max-height: 220px;
  object-fit: contain;
  align-self: end;
}
.egg-colonel-copy {
  flex: 1;
  min-width: 0;
}
.egg-colonel h2,
.egg-reward h2 {
  margin: 0 0 15px;
  font-size: clamp(21px, 4vw, 30px);
}
.egg-colonel h2 {
  text-shadow: none;
}
.egg-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.egg-choice {
  flex: 1 1 0;
  min-height: 52px;
  padding: 10px 14px;
  justify-content: center;
  border-color: #087d79;
  background: #e8fffb;
  color: #075f5b;
  box-shadow: 0 3px 0 #087d79;
  font-size: 14px;
}
.egg-colonel .egg-choice {
  text-shadow: none;
}
.egg-choice:hover {
  background: #c4eee9;
}
.egg-reward {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 100%);
}
.egg-reward-dialog {
  text-align: center;
  padding: 30px;
}
.egg-hero-art {
  width: 110px;
  height: 110px;
  display: block;
  margin: 0 auto 5px;
}
.egg-coins {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  color: #056b67;
  margin-bottom: 12px;
  text-shadow: none;
}
.egg-coin-reward {
  color: #825600;
  text-shadow: none;
}
[data-theme='dark'] .egg-coins {
  color: #6ff3da;
}
[data-theme='dark'] .egg-coin-reward {
  color: #ffd666;
}
.egg-heart {
  display: block;
  color: #e8443a;
  font-size: 100px;
  line-height: 0.9;
  text-shadow: 0 5px 0 #2f3542;
}
.egg-splat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.egg-splat > img {
  position: absolute;
  width: min(740px, 110vw);
  animation: egg-splat-hit 0.44s cubic-bezier(0.1, 0.8, 0.2, 1) both;
}
.egg-splat .card {
  position: relative;
  align-self: end;
  width: min(360px, calc(100% - 30px));
  margin: 0 0 28px;
  text-align: center;
  padding: 18px 24px;
}
.egg-splat .card h2 {
  margin: 0 0 6px;
}
.egg-splat .card p {
  margin: 0 0 12px;
}
.egg-splat-drop {
  position: absolute;
  z-index: 0;
  width: 20px;
  height: 20px;
  border: 5px solid #2f3542;
  border-radius: 999px;
  background: #fffdf5;
  opacity: 0;
  animation: egg-splat-drop 0.6s 0.08s cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}
.egg-splat-drop-1 {
  --x: -310px;
  --y: -170px;
}
.egg-splat-drop-2 {
  --x: -220px;
  --y: -250px;
  width: 12px;
  height: 12px;
}
.egg-splat-drop-3 {
  --x: 120px;
  --y: -250px;
}
.egg-splat-drop-4 {
  --x: 300px;
  --y: -130px;
  width: 14px;
  height: 14px;
}
.egg-splat-drop-5 {
  --x: 330px;
  --y: 120px;
}
.egg-splat-drop-6 {
  --x: 140px;
  --y: 240px;
  width: 12px;
  height: 12px;
}
.egg-splat-drop-7 {
  --x: -180px;
  --y: 230px;
}
.egg-splat-drop-8 {
  --x: -330px;
  --y: 70px;
  width: 14px;
  height: 14px;
}
@keyframes egg-walk-in {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(min(450px, 50vw) + 155px));
  }
}
@keyframes egg-walk-out {
  from {
    transform: translateX(calc(min(450px, 50vw) + 155px));
  }
  to {
    transform: translateX(calc(100vw + 300px));
  }
}
@keyframes egg-colonel-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.egg-shush {
  animation-name: egg-shush-pop;
}
@keyframes egg-shush-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.78);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes egg-drop {
  from {
    opacity: 0;
    transform: translate(-50%, -70%) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes egg-splat-hit {
  0% {
    opacity: 0;
    transform: scale(0.22) rotate(-13deg);
  }
  58% {
    opacity: 1;
    transform: scale(1.14) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
@keyframes egg-splat-drop {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.25);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
  }
}
@media (max-width: 600px) {
  .egg-colonel {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    align-items: flex-end;
    padding: 18px;
    gap: 12px;
  }
  .egg-colonel > img {
    width: 105px;
  }
  .egg-colonel h2 {
    font-size: 19px;
  }
  .egg-choices {
    gap: 6px;
  }
  .egg-choice {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .egg-chicken-side,
  .egg-chicken-side.leaving,
  .egg-shush,
  .egg-laying,
  .egg-colonel,
  .egg-splat > img,
  .egg-splat-drop {
    animation: none;
  }
  .egg-chicken-side {
    left: calc(50% - 120px);
  }
}
.war-avail-banner {
  text-decoration: none;
  background: var(--blue);
  color: #fff;
}
[data-theme='dark'] .war-avail-banner {
  background: #3b6fd6;
  color: #fff;
}
.war-avail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-color: var(--blue);
}
.war-avail-answered {
  border-color: var(--green);
}
.war-avail-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}
.war-avail-icon {
  font-size: 28px;
  line-height: 1;
}
.war-avail-title {
  font-weight: 800;
  font-size: 16px;
}
.war-avail-head .hint {
  margin: 4px 0 0;
}
.war-avail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.war-avail-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}
.war-avail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding-top: 10px;
  border-top: 2px dashed var(--grey);
}
.war-avail-list-title {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.war-avail-member {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.war-avail-unavailable {
  width: 100%;
  margin: 0;
}
.war-avail-notify {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.war-avail-notify span {
  font-size: 13px;
  padding: 5px 12px;
}
.war-avail-potential {
  white-space: nowrap;
}

.reset-tracker summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.reset-tracker-flagged {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.reset-tracker-table th.reset-tracker-day {
  font-size: 14px;
  white-space: nowrap;
}
.reset-tracker-table th.reset-tracker-day,
.reset-tracker-table td.reset-tracker-cell {
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}
.reset-tracker-cell {
  text-align: center;
  font-weight: 900;
  font-size: 19px;
  width: 1%;
}
.reset-tracker-cell.is-yes {
  color: #2f9e44;
}
.reset-tracker-cell.is-no {
  color: var(--red);
}
.reset-tracker-cell.is-none {
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
.reset-tracker-week.is-none {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 20%, transparent);
}
.reset-tracker-bad td:first-child {
  color: var(--red);
  font-weight: 800;
}
.reset-tracker summary::-webkit-details-marker {
  display: none;
}
.reset-tracker-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}
.reset-tracker[open] .reset-tracker-chevron {
  transform: rotate(90deg);
}
.reset-tracker-cell.is-before {
  color: var(--muted);
  opacity: 0.5;
}
.reset-tracker-range {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 14px;
}
.reset-tracker-week {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.reset-tracker-cell.is-part {
  color: #c98a00;
  font-weight: 700;
}
.reset-tracker-table th.reset-tracker-day.is-current {
  color: var(--blue);
}
.reset-tracker-legend {
  margin: 8px 0 4px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.reset-tracker-cards {
  flex-direction: column;
  gap: 10px;
}
.reset-tracker-card {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
  padding: 10px 12px;
}
.reset-tracker-card.is-flagged {
  border-color: var(--red);
}
.reset-tracker-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.reset-tracker-card.is-flagged .reset-tracker-card-head strong {
  color: var(--red);
}
.reset-tracker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.reset-tracker-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 2px solid var(--grey);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.reset-tracker-chip.is-yes {
  color: #2f9e44;
  border-color: #2f9e44;
}
.reset-tracker-chip.is-no {
  color: var(--red);
  border-color: var(--red);
}
.reset-tracker-chip.is-part {
  color: #c98a00;
  border-color: #c98a00;
}
.reset-tracker-chip.is-none {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 18%, transparent);
}
.reset-tracker-chip.is-before {
  color: var(--muted);
  opacity: 0.6;
}
.reset-tracker-card-foot {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}
@media (max-width: 600px) {
  .reset-tracker-cards {
    display: flex;
  }
}
/* Calculator knowledge chat */
.assistant-page {
  max-width: none;
  width: 100%;
}
.assistant-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.assistant-kicker {
  display: block;
  color: var(--blue-dark);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.assistant-new {
  white-space: nowrap;
}
.assistant-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  min-height: 620px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 5px 0 rgba(47, 53, 66, 0.17);
}
.assistant-history {
  background: var(--card-alt);
  border-right: 3px solid var(--ink);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.assistant-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 5px 9px;
}
.assistant-icon-button,
.assistant-more,
.assistant-attach {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.assistant-icon-button {
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--yellow);
  font-weight: 900;
  font-size: 18px;
  width: 32px;
  height: 32px;
}
.assistant-thread {
  text-align: left;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  padding: 11px 10px;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title date' 'meta date';
  gap: 3px 10px;
}
.assistant-thread:hover {
  background: var(--row-hover);
}
.assistant-thread.active {
  background: var(--card);
  border-color: var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}
.assistant-thread strong {
  grid-area: title;
}
.assistant-thread span {
  grid-area: meta;
}
.assistant-thread small {
  grid-area: date;
  align-self: start;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  line-height: 1.35;
}
.assistant-thread strong,
.assistant-thread span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assistant-thread span,
.assistant-thread small {
  color: var(--muted);
  font-size: 12px;
}
.assistant-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.assistant-chat-head {
  padding: 15px 18px;
  border-bottom: 2px solid var(--grey);
  display: flex;
  align-items: center;
  gap: 10px;
}
.assistant-chat-head strong,
.assistant-chat-head span {
  display: block;
}
.assistant-chat-head span {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.assistant-orb {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--blue);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 2px 0 var(--ink);
}
.assistant-menu-wrap {
  position: relative;
  margin-left: auto;
}
.assistant-options-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 5;
  min-width: 126px;
  padding: 6px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(47, 53, 66, 0.2);
}
.assistant-delete-option {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  background: transparent;
  color: #9c2f2f;
  text-align: left;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.assistant-delete-option:hover {
  background: #fff0ef;
}
.assistant-more {
  margin-left: 0;
}
.assistant-messages {
  flex: 1;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: linear-gradient(180deg, var(--card), var(--bg));
  overflow: auto;
}
.assistant-message {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 82%;
}
.assistant-message.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.assistant-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  background: var(--yellow);
  font-size: 10px;
  font-weight: 800;
}
.assistant-message.user .assistant-avatar {
  background: var(--blue);
  color: white;
}
.assistant-bubble {
  border: 2px solid var(--ink);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 12px;
  background: var(--card);
  box-shadow: 0 2px 0 rgba(47, 53, 66, 0.16);
}
.assistant-message.user .assistant-bubble {
  background: var(--me-row);
  border-radius: 14px 14px 4px 14px;
}
.assistant-bubble p {
  margin: 0;
  line-height: 1.42;
}
.assistant-citation {
  display: block;
  margin-top: 9px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.assistant-composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border-top: 2px solid var(--grey);
  padding: 12px;
}
.assistant-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.assistant-send {
  width: auto;
  min-width: 88px;
  height: 40px;
  font-size: 15px;
}
.assistant-composer textarea {
  flex: 1;
  resize: vertical;
  max-height: 38svh;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px;
  font: inherit;
  background: var(--card);
  color: var(--text);
  min-height: 64px;
}
.assistant-attach {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 11px;
  background: var(--card-alt);
}
.assistant-attach svg {
  width: 19px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.assistant-composer-footer .assistant-send {
  width: auto;
  min-width: 88px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--blue);
  color: white;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
  flex: none;
  margin-left: auto;
}
.assistant-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.assistant-disclosure {
  margin: 0;
  padding: 0 15px 13px;
  color: var(--muted);
  font-size: 11px;
}
.assistant-page .calculator-reference {
  margin-top: 18px;
}
@media (max-width: 700px) {
  .assistant-page {
    margin-inline: -2px;
  }
  .assistant-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .assistant-new {
    width: 100%;
    justify-content: center;
  }
  .assistant-shell {
    grid-template-columns: 1fr;
    min-height: 650px;
    border-radius: 14px;
  }
  .assistant-history {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    overflow-x: auto;
    padding: 10px;
    gap: 8px;
  }
  .assistant-history-head {
    grid-column: 1/-1;
  }
  .assistant-thread {
    width: 180px;
  }
  .assistant-message {
    max-width: 93%;
  }
  .assistant-messages {
    padding: 16px;
  }
  .assistant-chat-head {
    padding: 12px;
  }
  .assistant-disclosure {
    line-height: 1.35;
  }
  .calculator-reference {
    flex-direction: column;
    align-items: flex-start;
  }
  .calculator-reference-link {
    width: 100%;
    justify-content: center;
  }
}
/* Chat history drawer replaces the permanent conversation rail. */
.assistant-shell {
  grid-template-columns: minmax(0, 1fr);
}
.assistant-history-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
}
.assistant-history-toggle svg {
  width: 21px;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
}
.assistant-history-scrim {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(18, 21, 31, 0.48);
  display: flex;
  align-items: stretch;
}
.assistant-history-drawer {
  width: min(360px, 88vw);
  background: var(--card-alt);
  border-right: 3px solid var(--ink);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
}
.assistant-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.assistant-drawer-head .assistant-more {
  font-size: 26px;
  line-height: 1;
}
.assistant-drawer-new {
  width: 100%;
  justify-content: center;
}
.assistant-thread-list {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 3px;
}
.assistant-thread-list .assistant-thread {
  flex: none;
  width: 100%;
}
.assistant-history-enter-active,
.assistant-history-leave-active {
  transition: opacity 0.22s ease;
}
.assistant-history-enter-active .assistant-history-drawer,
.assistant-history-leave-active .assistant-history-drawer {
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.assistant-history-enter-from,
.assistant-history-leave-to {
  opacity: 0;
}
.assistant-history-enter-from .assistant-history-drawer,
.assistant-history-leave-to .assistant-history-drawer {
  transform: translateX(-110%);
}
@media (max-width: 700px) {
  .assistant-history-enter-from .assistant-history-drawer,
  .assistant-history-leave-to .assistant-history-drawer {
    transform: translateY(110%);
  }
  .assistant-history-drawer {
    width: min(340px, 91vw);
    padding: 14px;
  }
  .assistant-history-scrim {
    align-items: flex-end;
  }
  .assistant-history-drawer {
    height: min(78svh, 650px);
    width: 100%;
    border: 3px solid var(--ink);
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
}
/* Conversation drawer and sticky chat controls. */
html.assistant-history-open,
html.assistant-history-open body {
  overflow: hidden;
}
.assistant-shell {
  overflow: hidden;
  overflow: clip;
}
.assistant-chat {
  border-radius: 15px 15px 0 0;
}
.assistant-chat-head {
  position: sticky;
  top: var(--assistant-sticky-top, 0px);
  z-index: 4;
  flex: none;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background: var(--card);
}
.assistant-quota {
  margin: 0;
  padding: 0 15px 13px;
  color: #9c2f2f;
  font-size: 12px;
  font-weight: 800;
}
.assistant-quota.unlimited {
  color: #9c2f2f;
}
.assistant-state {
  margin: auto;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.assistant-state-error,
.assistant-request-error,
.assistant-message-error {
  color: #9c2f2f;
}
.assistant-request-error {
  margin: 0;
  padding: 0 15px 10px;
  font-size: 12px;
}
.assistant-message.failed .assistant-bubble {
  border-color: #9c2f2f;
}
.assistant-message-error {
  margin: 8px 0 0 !important;
  font-size: 12px;
  font-weight: 700;
}
.assistant-citations {
  display: grid;
  gap: 5px;
  margin-top: 9px;
}
.assistant-citation {
  margin-top: 0;
  line-height: 1.35;
}
.assistant-composer-limit {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.assistant-composer-limit.over {
  color: #9c2f2f;
  font-weight: 800;
}
.assistant-attach:disabled,
.assistant-history-toggle:disabled,
.assistant-thread:disabled,
.assistant-drawer-new:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.assistant-more:disabled {
  cursor: default;
  opacity: 0.45;
}
.assistant-composer textarea {
  max-height: 38svh;
}
.assistant-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  color: var(--muted);
}
.assistant-message-meta small {
  font-size: 10px;
}
.assistant-retry,
.assistant-load-more,
.assistant-suggestions button {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  cursor: pointer;
}
.assistant-retry:hover,
.assistant-load-more:hover,
.assistant-suggestions button:hover {
  background: var(--row-hover);
}
.assistant-retry:disabled,
.assistant-load-more:disabled,
.assistant-suggestions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.assistant-load-more {
  align-self: center;
  margin: 4px auto 10px;
}
.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px 48px;
}
.assistant-suggestions button {
  border-radius: 10px;
  padding: 8px 11px;
}
.assistant-thread-list > .assistant-load-more {
  flex: none;
}
@media (max-width: 700px) {
  .assistant-suggestions {
    margin-left: 0;
  }
  .assistant-composer textarea {
    max-height: 34svh;
  }
}

/* Assistant status motion, unclipped options, and per-chat deletion. */
.assistant-chat-head {
  overflow: visible;
}
.assistant-options-menu {
  z-index: 8;
}
.assistant-options-menu button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.assistant-options-menu .assistant-new-chat-option {
  display: flex;
  align-items: center;
  gap: 7px;
}
.assistant-options-menu button:hover {
  background: var(--row-hover);
}
.assistant-options-menu .assistant-delete-option {
  color: #9c2f2f;
}
.assistant-working-dots::after {
  display: inline-block;
  min-width: 1.5em;
  text-align: left;
  content: '.';
  animation: assistant-working-dots 1.2s steps(1, end) infinite;
}
.assistant-status-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes assistant-working-dots {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66%,
  100% {
    content: '...';
  }
}
.assistant-thread {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
}
.assistant-thread-main {
  width: 100%;
  min-width: 0;
  min-height: 77px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 11px 10px;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(30px, auto);
  grid-template-areas: 'title date' 'meta action';
  gap: 3px 10px;
  font: inherit;
}
.assistant-thread-main:disabled,
.assistant-thread-delete:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.assistant-thread-delete {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1.5px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.assistant-thread-delete:hover {
  border-color: #9c2f2f;
  background: #fff0ef;
  color: #9c2f2f;
}
.assistant-thread-delete svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .assistant-working-dots::after {
    content: '...';
    animation: none;
  }
}

/* Assistant composer status and numeric response emphasis. */
.assistant-composer-actions {
  justify-content: flex-start;
}
.assistant-usage {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 11px;
  border: 1.5px solid var(--grey);
  border-radius: 10px;
  background: var(--card-alt);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.assistant-response-number {
  font-weight: 900;
  color: inherit;
}

/* Assistant scroll viewport and expanding composer. */
.assistant-shell {
  height: clamp(560px, 72svh, 760px);
  min-height: 0;
}
.assistant-chat {
  min-height: 0;
  overflow: hidden;
}
.assistant-chat-head {
  position: relative;
  top: auto;
}
.assistant-messages-view {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.assistant-messages {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-bottom: 66px;
}
.assistant-messages-view > .assistant-usage {
  position: absolute;
  left: 18px;
  bottom: 12px;
  z-index: 3;
  min-height: 34px;
  box-shadow: 0 2px 8px rgba(18, 21, 31, 0.12);
}
.assistant-composer {
  flex: none;
  background: var(--card);
}
.assistant-composer .assistant-disclosure {
  margin: 0;
  padding: 0;
  line-height: 1.35;
}
.assistant-composer textarea {
  box-sizing: border-box;
  flex: none;
  width: 100%;
  min-height: 46px;
  height: auto;
  max-height: min(38svh, 320px);
  resize: vertical;
  overflow-y: hidden;
}
.assistant-composer-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.assistant-composer-footer .assistant-composer-limit {
  min-width: 0;
  text-align: left;
}
.assistant-redeem-scrim {
  z-index: 180;
}
.assistant-redeem-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(360px, calc(100vw - 32px));
  padding: 28px;
  text-align: center;
}
.assistant-redeem-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.assistant-redeem-kicker {
  color: #129a91;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.assistant-redeem-art {
  width: 150px;
  height: 150px;
  margin: 4px auto 0;
}
.assistant-redeem-modal .modal-title {
  margin: 0;
}
.assistant-redeem-modal p {
  margin: 2px 0 8px;
  color: var(--muted);
}
.assistant-redeem-modal > .btn-blue {
  min-width: 150px;
}

@media (max-width: 700px) {
  .assistant-shell {
    height: clamp(520px, 72svh, 700px);
  }
  .assistant-messages-view > .assistant-usage {
    left: 14px;
    bottom: 10px;
  }
  .assistant-messages {
    padding-bottom: 62px;
  }
  .assistant-composer-footer {
    gap: 8px;
  }
  .assistant-composer textarea {
    min-height: 96px;
    max-height: min(34svh, 280px);
  }
}
.war-result-actions {
  justify-content: flex-end;
}

.rps-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rps-picker-sm .rps-throw {
  padding: 8px 12px;
}
.rps-throw {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 86px;
  padding: 12px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--card-alt);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.rps-throw:hover {
  background: var(--row-hover);
}
.rps-throw.selected {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 0 var(--ink);
}
.rps-throw:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rps-throw-icon {
  display: inline-grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  min-height: 30px;
}
.rps-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.rps-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.rps-field input,
.rps-field select {
  min-width: 150px;
}
.rps-warn {
  color: var(--red);
  font-weight: 700;
}
.rps-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
}
.rps-match-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.rps-match-who .tag {
  align-self: center;
}
.rps-open-duel .rps-match-who {
  align-items: center;
}
.rps-timer {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.rps-timer.is-soon {
  color: var(--red);
}
.rps-history.is-won {
  border-color: var(--green);
}
.rps-history.is-lost {
  border-color: var(--red);
}
.rps-history {
  align-items: flex-start;
}
.rps-history-main {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.rps-history .rps-match-who {
  align-items: center;
}
.rps-history .rps-match-who .choice-ico {
  display: inline-grid;
  place-items: center;
  line-height: 1;
  vertical-align: middle;
}
.rps-dice-rolls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-weight: 800;
}
.rps-dice-rolls span {
  white-space: nowrap;
}
.rps-game-chip {
  align-self: flex-start;
}

.rps-stake {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rps-stake-coin {
  font-size: 20px;
}
.rps-stake input {
  width: 130px;
  font-size: 18px;
  font-weight: 800;
}
.rps-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
}
.rps-balance .hint {
  margin: 0;
}
.rps-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rps-quick .hint {
  margin: 0;
}

/* Duel dashboard */
.rps-eyebrow {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.game-page-head {
  justify-content: space-between;
}
.game-page-head > div {
  min-width: 0;
}
.game-page-head .hint {
  margin-top: 5px;
}
.rps-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.8fr);
  grid-template-areas: 'start stats' 'open posted' 'recent recent';
  gap: 22px;
  align-items: start;
}
.rps-panel {
  min-width: 0;
  margin: 0;
  border-radius: 22px;
}
.rps-start-card {
  grid-area: start;
}
.rps-stats-card {
  grid-area: stats;
}
.rps-open-card {
  grid-area: open;
}
.rps-posted-card {
  grid-area: posted;
}
.rps-recent-card {
  grid-area: recent;
}
.rps-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rps-section-head .card-title {
  margin: 0;
}
.rps-section-head .pill {
  flex: none;
  padding: 3px 10px;
  font-size: 13px;
}
.rps-game-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.rps-game-card {
  display: flex;
  min-width: 0;
  min-height: 105px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px;
  border: 3px solid var(--ink);
  border-radius: 15px;
  background: var(--card-alt);
  box-shadow: 0 4px 0 var(--grey-dark);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rps-game-card:hover {
  background: var(--row-hover);
}
.rps-game-card.selected {
  background: var(--blue);
  box-shadow: 0 4px 0 var(--blue-dark);
  color: #fff;
}
.rps-game-card:focus-visible,
.rps-throw:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.rps-game-card strong {
  line-height: 1.15;
}
.rps-game-icon {
  font-size: 27px;
  line-height: 1;
}
.rps-choice-panel {
  padding: 13px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card-alt);
}
.rps-choice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rps-choice-head > div {
  display: grid;
  gap: 2px;
}
.rps-choice-label {
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}
.rps-choice-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
.rps-required {
  flex: none;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--yellow);
  color: #332400;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rps-create-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.rps-create-picker .rps-throw {
  position: relative;
  min-width: 0;
  min-height: 58px;
  flex-direction: row;
  justify-content: center;
  gap: 7px;
  padding: 9px 28px 9px 12px;
  border-width: 2px;
  border-radius: 11px;
  background: var(--card);
}
.rps-create-picker .rps-throw.selected {
  background: var(--yellow);
  color: #2f3542;
  box-shadow: 0 3px 0 var(--ink);
}
.rps-create-picker .rps-throw-icon {
  min-height: 0;
  font-size: 22px;
}
.rps-choice-check {
  position: absolute;
  top: 7px;
  right: 8px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #2f3542;
  color: #fff;
  font-size: 11px;
}
.rps-game-note {
  margin: 0;
  padding: 12px 13px;
  border: 2px solid var(--grey);
  border-radius: 13px;
  background: var(--card-alt);
  color: var(--muted);
  line-height: 1.35;
}
.rps-game-note strong {
  color: var(--text);
}
.rps-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr);
  align-items: end;
}
.rps-field {
  min-width: 0;
}
.rps-stake {
  position: relative;
}
.rps-stake-coin {
  position: absolute;
  left: 12px;
  z-index: 1;
  pointer-events: none;
}
.rps-stake input {
  width: 100%;
  padding-left: 42px;
}
.rps-opponent-field,
.rps-opponent-field .rps-combo {
  width: 100%;
}
.rps-combo-toggle {
  min-height: 48px;
}
.rps-post-button {
  width: 100%;
  min-height: 48px;
}
.rps-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.rps-open-duel,
.rps-posted-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.rps-open-card .rps-match-who,
.rps-posted-card .rps-match-who {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
.rps-player-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rps-game-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}
.rps-open-duel > .rps-picker-sm {
  grid-column: 1 / -1;
}
.rps-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rps-stat {
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
}
.rps-stat strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}
.rps-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.is-positive {
  color: #208743;
}
.is-negative {
  color: #c94444;
}
[data-theme='dark'] .is-positive {
  color: var(--green);
}
[data-theme='dark'] .is-negative {
  color: #ff8181;
}
.rps-toughest {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 2px solid var(--gold-dark);
  border-radius: 12px;
  background: color-mix(in srgb, var(--yellow) 26%, var(--card));
}
.rps-toughest > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.rps-toughest-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-width: 0;
}
.rps-toughest-values > strong {
  flex: none;
}
.rps-game-stats {
  display: grid;
  gap: 9px;
}
.rps-stat-row {
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(70px, 1fr) 38px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.rps-stat-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rps-stat-row > strong {
  text-align: right;
}
.rps-stat-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--grey);
}
.rps-stat-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}
.rps-opponent-stats {
  overflow: hidden;
  border: 2px solid var(--grey);
  border-radius: 12px;
}
.rps-opponent-head,
.rps-opponent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 54px;
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
}
.rps-opponent-head {
  background: var(--card-alt);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rps-opponent-row {
  border-top: 1px solid var(--grey);
  font-size: 12px;
}
.rps-opponent-row > :not(:first-child),
.rps-opponent-head > :not(:first-child) {
  text-align: right;
}
.rps-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rps-history {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.rps-history-main {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
}
.rps-history-opponent {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.rps-result-coins {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
  white-space: nowrap;
}
.rps-history-play {
  grid-column: 1 / -1;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
}
.rps-history-grid.details-stacked .rps-history-detail {
  flex-basis: 100%;
}
.rps-history-game-label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-weight: 900;
}
.rps-history-detail {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.rps-history-time {
  grid-column: 1 / -1;
  justify-self: end;
}
.rps-result-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--grey-dark);
  color: #fff;
  font-weight: 900;
}
.rps-result-mark.is-won {
  background: #208743;
}
.rps-result-mark.is-lost {
  background: #c94444;
}
.rps-bet-note {
  margin: -8px 0 0;
  text-align: center;
  font-size: 12px;
}
.member-identity {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.member-identity .flair-tooltip {
  flex: none;
}
.member-identity .member-flair-trigger {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
}
.member-identity .member-flair-trigger:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 50%;
}
.rps-history-opponent {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}
.rps-title-game-icon {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.rps-history-detail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 4px;
  white-space: nowrap;
}
.rps-history-detail .choice-ico {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  object-fit: contain;
  line-height: 1;
  vertical-align: middle;
}

/* Paginated clan duel history */
.duel-history-heading {
  align-items: flex-start;
}
.duel-history-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.duel-history-player-picker {
  flex: 1 1 230px;
  max-width: 340px;
}
.duel-history-tool-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.duel-history-privacy-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card-alt);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.duel-history-list {
  display: grid;
  gap: 14px;
}
.duel-history-match {
  display: grid;
  gap: 13px;
  margin: 0;
  border: 3px solid var(--grey-dark);
  border-radius: 18px;
}
.duel-history-match.involves-me {
  border-width: 5px;
  border-color: var(--blue);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--blue) 42%, transparent);
}
.duel-history-match-head,
.duel-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.duel-history-game {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.duel-history-game-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}
.duel-history-bet {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.duel-history-parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.duel-history-party {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name outcome' 'choice outcome';
  align-items: center;
  gap: 5px 12px;
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--grey);
  border-radius: 13px;
  background: var(--card-alt);
}
.duel-history-party.is-winner {
  border-color: #208743;
  background: color-mix(in srgb, #58bd70 16%, var(--card));
}
.duel-history-party.is-loser {
  border-color: #c94444;
  background: color-mix(in srgb, #ff8181 11%, var(--card));
}
.duel-history-party-name {
  grid-area: name;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 900;
}
.duel-history-choice {
  grid-area: choice;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.duel-history-choice-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.duel-history-outcome {
  grid-area: outcome;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--grey);
  color: var(--text);
  font-size: 11px;
}
.duel-history-party.is-winner .duel-history-outcome {
  background: #208743;
  color: #fff;
}
.duel-history-party.is-loser .duel-history-outcome {
  background: #c94444;
  color: #fff;
}
.duel-history-meta {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.duel-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.duel-history-dialog {
  text-align: left;
}
.duel-history-dialog-hint {
  margin: -4px 0 9px;
}
.duel-history-dialog-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  margin-top: 24px;
}
.duel-history-dialog-actions .btn {
  justify-content: center;
}
[data-theme='dark'] .duel-history-party.is-winner {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--card));
}
[data-theme='dark'] .duel-history-party.is-loser {
  border-color: #ff8181;
  background: color-mix(in srgb, #ff8181 9%, var(--card));
}

@media (max-width: 700px) {
  .duel-history-heading {
    display: grid;
  }
  .duel-history-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .duel-history-player-picker {
    grid-column: 1 / -1;
    max-width: none;
  }
  .duel-history-tool-button {
    width: 100%;
  }
  .duel-history-parties {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 300px) {
  .duel-history-match-head {
    align-items: center;
  }
  .duel-history-party {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'name' 'choice' 'outcome';
  }
  .duel-history-outcome {
    justify-self: start;
  }
  .duel-history-pagination {
    justify-content: space-between;
    gap: 8px;
  }
  .duel-history-pagination .btn {
    padding-inline: 10px;
  }
  .duel-history-bet {
    font-size: 17px;
  }
}

@media (max-width: 800px) {
  .rps-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'start' 'open' 'posted' 'recent' 'stats';
    gap: 18px;
  }
  .rps-panel {
    border-radius: 18px;
  }
  .rps-history-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .rps-game-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .rps-game-card {
    min-height: 58px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .rps-game-icon {
    width: 28px;
    text-align: center;
  }
  .rps-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .rps-section-head {
    align-items: center;
  }
  .rps-stats-grid {
    gap: 6px;
  }
  .rps-stat {
    padding: 8px;
  }
  .rps-stat strong {
    font-size: 18px;
  }
  .rps-stat-row {
    grid-template-columns: minmax(95px, auto) minmax(55px, 1fr) 34px;
  }
}
@media (max-width: 600px) {
  .rps-open-duel,
  .rps-posted-duel {
    grid-template-columns: minmax(0, 1fr);
  }
  .rps-open-duel > .btn,
  .rps-posted-duel > .btn {
    justify-self: start;
  }
  .rps-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rps-stat:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .rps-match {
    align-items: stretch;
  }
  .rps-open-duel {
    align-items: center;
  }
  .rps-match > .btn {
    align-self: center;
  }
  .rps-picker-sm {
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}
@media (min-width: 401px) and (max-width: 600px) {
  .rps-history > .tag:last-child {
    align-self: center;
  }
}
@media (max-width: 400px) {
  .rps-history-main {
    flex-basis: 100%;
  }
  .rps-history > .tag:last-child {
    order: 2;
    align-self: flex-start;
  }
}

.rps-confirm-icon {
  font-size: 48px;
  line-height: 1;
}
.rps-confirm-actions {
  justify-content: center;
}

.rps-showdown {
  min-width: min(420px, 92vw);
  overflow: visible;
}
.rps-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  overflow: hidden;
}
.rps-fighter {
  font-size: 64px;
  line-height: 1;
}
.rps-fighter-mine {
  animation: rpsFromLeft 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
.rps-fighter-theirs {
  animation: rpsFromRight 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
.rps-vs {
  font-size: 20px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.rps-vs.struck {
  animation: rpsStrike 0.45s ease both;
  color: var(--red);
}
.rps-arena-names {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.rps-arena-names span:last-child {
  grid-column: 3;
}
.rps-verdict {
  margin: 6px 0 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.04em;
  animation: rpsPop 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.rps-showdown.is-won .rps-verdict {
  color: var(--green);
}
.rps-showdown.is-lost .rps-verdict {
  color: var(--red);
}
.rps-verdict-coins {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  animation: rpsPop 0.4s 0.1s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
@keyframes rpsFromLeft {
  from {
    transform: translateX(-160%) rotate(-25deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes rpsFromRight {
  from {
    transform: translateX(160%) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes rpsStrike {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(2.1) rotate(-8deg);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes rpsPop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rps-fighter-mine,
  .rps-fighter-theirs,
  .rps-vs.struck,
  .rps-verdict,
  .rps-verdict-coins {
    animation: none;
  }
}

.rps-combo {
  position: relative;
}
.rps-combo-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 190px;
  width: 100%;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.rps-combo-toggle:hover {
  border-color: var(--blue);
}
.rps-combo-caret {
  color: var(--muted);
}
.rps-combo-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.rps-combo-panel {
  position: absolute;
  z-index: 41;
  top: calc(100% + 6px);
  left: 0;
  width: max(100%, 230px);
  padding: 8px;
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 0 rgb(47 53 66 / 0.18);
}
.rps-combo-panel input {
  margin-bottom: 8px;
}
.rps-combo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rps-combo-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.rps-combo-option:hover {
  background: var(--row-hover);
}
.rps-combo-option.selected {
  background: var(--blue);
  color: #fff;
}
.rps-combo-empty {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
}
.rps-banner {
  text-decoration: none;
  background: #b48cff;
  color: #241a3d;
}
[data-theme='dark'] .rps-banner {
  background: #8f6fd6;
  color: #fff;
}

.war-avail-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 2px solid var(--grey);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
.war-avail-pick:hover {
  border-color: var(--blue);
}
.war-avail-pick.picked {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
}
.war-avail-pick input {
  width: auto;
  margin: 0;
}
.war-avail-pick-points {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.war-avail-pick.picked .war-avail-pick-points {
  color: var(--text);
}
.war-avail-squad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-top: 10px;
}

.war-avail-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
}
.war-avail-list-head .hint {
  margin: 0;
  flex: 1 1 200px;
}
.war-avail-picks {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--grey);
  border-radius: 12px;
  overflow: hidden;
}
.avail-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid var(--grey);
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
}
.avail-row:last-child {
  border-bottom: 0;
}
.avail-row:hover {
  background: var(--row-hover);
}
.avail-row.picked {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  box-shadow: inset 4px 0 0 var(--green);
}
.avail-row-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--grey);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  color: transparent;
}
.avail-row.picked .avail-row-mark {
  border-color: var(--green);
  background: var(--green);
  color: #16331a;
}
.avail-row-flair {
  --flair-size: 24px;
  --flair-offset: 0px;
  vertical-align: middle;
  flex: none;
}
.avail-row-flair-empty {
  display: block;
}
.avail-row-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 800;
}
.avail-row-name > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.avail-row-points {
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.avail-row.picked .avail-row-points {
  color: var(--text);
}
.war-avail-squad {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--card);
  padding: 10px 0;
  margin-top: -2px;
}

.war-avail-target {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 2px dashed var(--grey);
  border-radius: 12px;
}
.war-avail-target-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}
.war-avail-target-field input {
  font-size: 18px;
  font-weight: 800;
}
.war-avail-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.war-avail-steps .btn {
  padding: 6px 4px;
  font-size: 13px;
}
.war-avail-target-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.war-avail-target-warn {
  margin: 0;
  color: var(--red);
  font-weight: 700;
}
.war-avail-selectall {
  margin-left: auto;
}
.rps-games {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rps-flip {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  animation: rpsPop 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}

.coin-stage {
  display: grid;
  place-items: end center;
  height: 170px;
  perspective: 700px;
  overflow: visible;
}
.coin {
  position: relative;
  width: 104px;
  height: 104px;
  transform-style: preserve-3d;
}
.coin.lands-heads {
  animation: coinLandHeads 1.75s cubic-bezier(0.32, 0.06, 0.24, 1) both;
}
.coin.lands-tails {
  animation: coinLandTails 1.75s cubic-bezier(0.32, 0.06, 0.24, 1) both;
}
.coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 48px;
  border-radius: 50%;
  border: 5px solid var(--ink);
  background: linear-gradient(150deg, #ffdf7a, #e0a92c);
  box-shadow: inset 0 0 0 5px rgb(255 255 255 / 0.35);
  backface-visibility: hidden;
}
.coin-tails {
  transform: rotateX(180deg);
}
.coin-called {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
@keyframes coinLandHeads {
  0% {
    transform: translateY(6px) rotateX(0);
  }
  45% {
    transform: translateY(-46px) rotateX(1080deg);
  }
  100% {
    transform: translateY(0) rotateX(2160deg);
  }
}
@keyframes coinLandTails {
  0% {
    transform: translateY(6px) rotateX(0);
  }
  45% {
    transform: translateY(-46px) rotateX(1080deg);
  }
  100% {
    transform: translateY(0) rotateX(2340deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .coin.lands-heads,
  .coin.lands-tails {
    animation: none;
  }
  .coin.lands-tails {
    transform: rotateX(180deg);
  }
}

.choice-ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  object-fit: contain;
}
.rps-throw-icon .choice-ico {
  width: 1.35em;
  height: 1.35em;
  vertical-align: middle;
}
.rps-confirm-icon .choice-ico {
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
}
.rps-fighter .choice-ico {
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
}
.coin-art {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.dice-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
  height: 160px;
}
.die-box {
  perspective: 900px;
  width: 76px;
  height: 76px;
}
.die {
  position: relative;
  width: 76px;
  height: 76px;
  transform-style: preserve-3d;
  animation: dieRoll 1.4s cubic-bezier(0.12, 0.7, 0.25, 1) both;
}
.die-late {
  animation-delay: 0.14s;
}
.die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 3px;
  padding: 10px;
  background: linear-gradient(150deg, #ffffff, #e9edf3);
  border: 3px solid #2f3542;
  border-radius: 15px;
  backface-visibility: hidden;
}
.die-face i {
  align-self: center;
  justify-self: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2f3542;
}
.df1 i {
  grid-area: 2 / 2;
}
.df2 i:nth-child(1) {
  grid-area: 1 / 1;
}
.df2 i:nth-child(2) {
  grid-area: 3 / 3;
}
.df3 i:nth-child(1) {
  grid-area: 1 / 1;
}
.df3 i:nth-child(2) {
  grid-area: 2 / 2;
}
.df3 i:nth-child(3) {
  grid-area: 3 / 3;
}
.df4 i:nth-child(1) {
  grid-area: 1 / 1;
}
.df4 i:nth-child(2) {
  grid-area: 1 / 3;
}
.df4 i:nth-child(3) {
  grid-area: 3 / 1;
}
.df4 i:nth-child(4) {
  grid-area: 3 / 3;
}
.df5 i:nth-child(1) {
  grid-area: 1 / 1;
}
.df5 i:nth-child(2) {
  grid-area: 1 / 3;
}
.df5 i:nth-child(3) {
  grid-area: 2 / 2;
}
.df5 i:nth-child(4) {
  grid-area: 3 / 1;
}
.df5 i:nth-child(5) {
  grid-area: 3 / 3;
}
.df6 i:nth-child(1) {
  grid-area: 1 / 1;
}
.df6 i:nth-child(2) {
  grid-area: 1 / 3;
}
.df6 i:nth-child(3) {
  grid-area: 2 / 1;
}
.df6 i:nth-child(4) {
  grid-area: 2 / 3;
}
.df6 i:nth-child(5) {
  grid-area: 3 / 1;
}
.df6 i:nth-child(6) {
  grid-area: 3 / 3;
}
.df1 {
  transform: translateZ(38px);
}
.df6 {
  transform: rotateY(180deg) translateZ(38px);
}
.df2 {
  transform: rotateY(90deg) translateZ(38px);
}
.df5 {
  transform: rotateY(-90deg) translateZ(38px);
}
.df3 {
  transform: rotateX(90deg) translateZ(38px);
}
.df4 {
  transform: rotateX(-90deg) translateZ(38px);
}
@keyframes dieRoll {
  from {
    transform: translateY(-80px) rotateX(calc(var(--lx) - 1080deg))
      rotateY(calc(var(--ly) - 720deg));
  }
  to {
    transform: translateY(0) rotateX(var(--lx)) rotateY(var(--ly));
  }
}
@media (prefers-reduced-motion: reduce) {
  .die {
    animation: none;
    transform: rotateX(var(--lx)) rotateY(var(--ly));
  }
}

[data-theme='dark'] .solver-board {
  background: var(--card);
}
[data-theme='dark'] .solver-list li {
  background: var(--card-alt);
  border-color: var(--grey);
}
[data-theme='dark'] .solver-rank {
  color: #7db4ff;
}
[data-theme='dark'] .code-result-modal {
  background: var(--card);
}
[data-theme='dark'] .code-result-modal.is-lose {
  background: #3a2321;
}
[data-theme='dark'] .code-result-mark {
  background: var(--card-alt);
}
[data-theme='dark'] .code-result-modal.is-lose .code-result-mark {
  background: #4d2c29;
}
[data-theme='dark'] .code-result-modal.is-win h2,
[data-theme='dark'] .code-result-modal.is-win > p:first-of-type {
  color: #63d684;
}
[data-theme='dark'] .code-result-modal.is-lose h2,
[data-theme='dark'] .code-result-modal.is-lose > p:first-of-type {
  color: #ff9089;
}

:root:not([data-theme='dark']) .games-feature-card.complete h3,
:root:not([data-theme='dark']) .games-feature-card.complete .games-arrow {
  color: var(--ink);
}
:root:not([data-theme='dark']) .games-feature-card.complete p {
  color: var(--muted);
}

.solver-tool-tip {
  --flair-size: 24px;
  --flair-offset: 0px;
  display: inline-flex;
  align-items: center;
}
.solver-tool-tip .solver-tool {
  display: block;
}

.games-feature-card.heist-card:not(.complete) {
  background: #165e70;
}
.heist-card.complete {
  background: var(--card-alt);
}
.heist-gear {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.heist-gear-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card-alt);
}
.heist-gear-item.shielded {
  border-color: var(--green);
}
.heist-gear-icon {
  width: 64px;
  height: 64px;
  flex: none;
}
.heist-gear-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.heist-gear-why {
  margin: 0;
  font-size: 12px;
}
.heist-upgrade-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.heist-upgrade {
  width: min(520px, 94vw);
}
.heist-upgrade-head {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.heist-upgrade-head .modal-title {
  margin: 0;
}
.heist-upgrade-icon {
  width: 56px;
  height: 56px;
  flex: none;
}
.heist-upgrade-warn {
  margin: 0;
  font-weight: 700;
}
.heist-feed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 45vh;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--grey) transparent;
}
.heist-feed-list::-webkit-scrollbar {
  width: 8px;
}
.heist-feed-list::-webkit-scrollbar-thumb {
  background: var(--grey);
  border-radius: 999px;
}
.heist-feed-list::-webkit-scrollbar-track {
  background: transparent;
}
.heist-feed-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card-alt);
  text-align: left;
}
.heist-feed-row.picked {
  border-color: var(--blue);
}
.heist-feed-tier {
  text-transform: capitalize;
  font-weight: 800;
}
.heist-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.heist-stepper span {
  min-width: 22px;
  text-align: center;
  font-weight: 900;
}
.heist-stepper .btn {
  padding: 4px 10px;
}
.heist-stepper .heist-all {
  margin-left: 4px;
  font-size: 12px;
}
.heist-tier-picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.heist-tier-picks .rarity-text {
  text-transform: capitalize;
  font-weight: 900;
  margin-left: 4px;
}
.heist-upgrade-sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card-alt);
  font-weight: 700;
}
.heist-gear-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}
.heist-bar {
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  overflow: hidden;
}
.heist-bar span {
  display: block;
  height: 100%;
  background: var(--blue);
  transition: width 0.5s ease;
}
.heist-bar-drill span {
  background: var(--yellow);
}
.heist-spares {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.heist-spare {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 10px;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card-alt);
}
.heist-spare-icon {
  --flair-size: 34px;
  --flair-offset: 0px;
}
.heist-spare-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.heist-spare-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heist-spare-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.heist-copies {
  width: 64px;
  padding: 6px 8px;
  font-weight: 800;
  text-align: center;
}
.heist-targets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.heist-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 52px 150px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card-alt);
}
.heist-target > .tag {
  justify-self: start;
  white-space: nowrap;
}
.heist-target > .btn,
.heist-target > .heist-status {
  justify-self: end;
}
@media (max-width: 600px) {
  .heist-target {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 6px;
    padding: 8px;
  }
  .heist-status {
    font-size: 12px;
  }
}
.heist-target.off {
  opacity: 0.55;
}
.heist-target-who {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 800;
}
.heist-target-who .member-name-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.heist-target-who .flair-tooltip {
  flex-shrink: 0;
}
.heist-chance {
  font-weight: 900;
  font-size: 16px;
  text-align: right;
}
.heist-chance.good {
  color: var(--green);
}
.heist-chance.bad {
  color: var(--red);
}
.heist-status {
  margin: 0;
  white-space: nowrap;
}
.heist-done {
  color: var(--muted);
  font-weight: 700;
}
.heist-log {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  padding: 8px 12px;
  border-left: 4px solid var(--grey);
  border-radius: 8px;
  background: var(--card-alt);
}
.heist-log.is-win {
  border-left-color: var(--green);
}
.heist-log.is-fail {
  border-left-color: var(--red);
}
.heist-log-icon {
  grid-row: 1 / 3;
  font-size: 22px;
  align-self: center;
}
.heist-log .hint {
  margin: 0;
  grid-column: 2;
}
.heist-confirm-icon {
  width: 120px;
  height: 120px;
  align-self: center;
  margin: 0 auto;
}
.heist-tier-odds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.heist-tier-odd {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 6px 8px;
  border: 2px solid var(--grey);
  border-radius: 10px;
  background: var(--card-alt);
}
.heist-tier-odd .rarity-text {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
}
.heist-tier-odd strong {
  font-size: 15px;
}
.heist-tier-odd small {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.heist-tier-odds + .hint {
  margin: 0;
}
.heist-showdown {
  min-width: min(440px, 92vw);
  overflow: hidden;
  position: relative;
}
.heist-showdown.stage-1 {
  animation: heistCam 0.07s linear infinite alternate;
}
.heist-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 40px;
  height: 150px;
  margin-bottom: 26px;
}
.heist-safe-label {
  position: absolute;
  top: 100%;
  left: -60px;
  right: -60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  line-height: 1.15;
  animation: rpsPop 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.4) 0.55s both;
  z-index: 3;
}
.heist-safe-label .rarity-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
}
.heist-scene-drill {
  position: relative;
  justify-self: end;
  width: 100px;
  height: 100px;
  animation: heistDrillIn 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) both;
  z-index: 3;
}
.heist-scene-drill img {
  width: 100%;
  height: 100%;
  display: block;
}
.heist-showdown.stage-1 .heist-scene-drill {
  animation:
    heistDrillIn 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) both,
    heistDrillBuzz 0.05s linear infinite alternate 0.9s;
}
.heist-bit {
  position: absolute;
  left: 72%;
  top: 42.5%;
  width: 23%;
  height: 15%;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #6f7889 0 3px, #e9edf3 3px 6px);
  background-size: 12px 100%;
  animation: heistBit 0.1s linear infinite;
}
.heist-showdown.stage-2 .heist-bit {
  animation: none;
}
.heist-showdown.stage-2.is-fail .heist-bit {
  animation: heistBitSnap 0.8s cubic-bezier(0.3, 0.6, 0.5, 1) forwards;
  background: repeating-linear-gradient(90deg, #4a5160 0 3px, #9aa3b8 3px 6px);
}
.heist-showdown.stage-2.is-fail .heist-scene-drill::after {
  content: '';
  position: absolute;
  left: 88%;
  top: 44%;
  width: 10px;
  height: 12px;
  background: #2f3542;
  border-radius: 0 3px 3px 0;
}
.heist-smoke {
  position: absolute;
  left: 88%;
  top: 30%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.heist-smoke i {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9aa3b8;
  opacity: 0;
}
.heist-showdown.stage-1 .heist-smoke i,
.heist-showdown.stage-2.is-fail .heist-smoke i {
  animation: heistSmoke 1.4s ease-out var(--d) infinite;
}
.heist-showdown.stage-2.is-fail .heist-smoke i {
  animation-iteration-count: 2;
}
.heist-sparks {
  position: absolute;
  left: calc(50% + 44px);
  top: 50%;
  width: 0;
  height: 0;
  z-index: 4;
}
.heist-sparks i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 7px;
  height: 4px;
  border-radius: 2px;
  background: #ffd449;
  box-shadow: 0 0 8px #ffb347;
  opacity: 0;
  transform: rotate(var(--a));
}
.heist-showdown.stage-1 .heist-sparks i {
  animation: heistSpark 0.45s ease-out var(--d) infinite;
}
.heist-shavings {
  position: absolute;
  left: calc(50% + 44px);
  top: 50%;
  width: 0;
  height: 0;
  z-index: 4;
}
.heist-shavings i {
  position: absolute;
  left: var(--x);
  top: 0;
  width: 5px;
  height: 2px;
  background: #c9d1e0;
  border-radius: 1px;
  opacity: 0;
}
.heist-showdown.stage-1 .heist-shavings i {
  animation: heistShaving 0.9s ease-in var(--d) infinite;
}
.heist-safe-wrap {
  position: relative;
  justify-self: start;
  width: 110px;
  height: 110px;
  perspective: 500px;
}
.heist-scene-safe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.heist-safe-door {
  position: absolute;
  left: 21.7%;
  top: 20%;
  width: 56.6%;
  height: 60%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 2;
}
.heist-safe-door img {
  width: 100%;
  height: 100%;
  display: block;
}
.heist-showdown.stage-1 .heist-safe-wrap {
  animation: heistSafeShake 0.09s linear infinite alternate;
}
.heist-dial {
  position: absolute;
  left: 23.5%;
  top: 25%;
  width: 53%;
  height: 50%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #c8102e;
  box-sizing: border-box;
}
.heist-showdown.stage-1 .heist-dial {
  animation: heistDial 0.5s ease-in-out infinite alternate;
}
.heist-safe-inside {
  position: absolute;
  left: 23%;
  top: 21.5%;
  width: 54%;
  height: 57%;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 50%, #ffe38a 0, #d9a51a 55%, #6b5416 100%);
  box-shadow: inset 0 0 14px #000;
  opacity: 0;
  z-index: 1;
}
.heist-inside-loot {
  --flair-size: 44px;
  --flair-offset: 0px;
  transform: scale(0);
}
.heist-showdown.stage-2.is-win .heist-inside-loot {
  animation: heistLootPop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.4) 0.55s forwards;
}
.heist-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 212, 73, 0.35) 0 12deg,
    transparent 12deg 30deg
  );
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.heist-showdown.stage-2.is-win .heist-safe-door {
  animation: heistDoorOpen 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
.heist-showdown.stage-2.is-win .heist-safe-inside {
  animation: heistInsideGlow 0.5s ease-out 0.2s forwards;
}
.heist-showdown.stage-2.is-win .heist-rays {
  animation: heistRays 2.5s linear 0.3s forwards;
}
.heist-showdown.stage-2.is-win .heist-scene-drill {
  animation: heistDrillBack 0.6s ease-out forwards;
}
.heist-showdown.stage-2.is-fail .heist-scene-drill {
  animation: heistDrillKick 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
.heist-showdown.stage-2.is-fail .heist-safe-wrap {
  animation: heistSafeRattle 0.08s linear 8 alternate;
}
.heist-alarm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(200, 16, 46, 0.35);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.heist-alarm span {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow:
    0 0 18px #c8102e,
    0 2px 0 #7a0a1c;
}
.heist-showdown.stage-2.is-fail .heist-alarm {
  animation: heistAlarm 0.28s steps(2, jump-none) 6;
}
.heist-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 9;
  pointer-events: none;
}
.heist-showdown.stage-2.is-win .heist-flash {
  animation: heistFlash 0.5s ease-out forwards;
}
.heist-drilling {
  margin: 0;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--muted);
  min-height: 20px;
}
.heist-drilling.live {
  color: var(--yellow);
  animation: heistPulse 0.3s ease-in-out infinite alternate;
}
.heist-showdown.is-win .heist-drilling {
  color: var(--green);
}
.heist-showdown.is-fail .heist-drilling {
  color: var(--red);
}
.heist-meter {
  position: relative;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card-alt);
  overflow: visible;
}
.heist-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), #b6e36b);
  animation: heistMeterFill 1.4s ease-out both;
}
.heist-meter-roll {
  position: absolute;
  top: -8px;
  width: 4px;
  height: 28px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0;
}
.heist-showdown.stage-2 .heist-meter-roll {
  animation: heistRollDrop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.heist-loot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card-alt);
  animation: rpsPop 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.4) 0.5s both;
}
.heist-loot-icon {
  --flair-size: 48px;
  --flair-offset: 0px;
}
.heist-loot div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.heist-loot .rarity-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 800;
}
.heist-showdown.is-win .rps-verdict {
  color: var(--green);
}
.heist-showdown.is-fail .rps-verdict {
  color: var(--red);
}
@keyframes heistDrillIn {
  0% {
    transform: translateX(-140px);
  }
  70% {
    transform: translateX(68px);
  }
  85% {
    transform: translateX(60px);
  }
  100% {
    transform: translateX(66px);
  }
}
@keyframes heistDrillBuzz {
  from {
    transform: translateX(65px) translateY(-1px) rotate(-0.8deg);
  }
  to {
    transform: translateX(67px) translateY(1px) rotate(0.8deg);
  }
}
@keyframes heistBit {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 12px 0;
  }
}
@keyframes heistCam {
  from {
    transform: translate(-1.5px, 1px);
  }
  to {
    transform: translate(1.5px, -1px);
  }
}
@keyframes heistSafeShake {
  from {
    transform: translateX(-2px) rotate(-0.8deg);
  }
  to {
    transform: translateX(2px) rotate(0.8deg);
  }
}
@keyframes heistDial {
  from {
    transform: rotate(-60deg);
  }
  to {
    transform: rotate(80deg);
  }
}
@keyframes heistSpark {
  0% {
    opacity: 1;
    transform: rotate(var(--a)) translateX(4px) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateX(58px) scale(0.3);
  }
}
@keyframes heistShaving {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 2), 70px) rotate(240deg);
  }
}
@keyframes heistSmoke {
  0% {
    opacity: 0.6;
    transform: translate(0, 0) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), -48px) scale(1.8);
  }
}
@keyframes heistDoorOpen {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-115deg);
  }
}
@keyframes heistLootPop {
  from {
    transform: scale(0) rotate(-20deg);
  }
  to {
    transform: scale(1) rotate(0);
  }
}
@keyframes heistInsideGlow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heistRays {
  0% {
    opacity: 0;
    transform: rotate(0) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(120deg) scale(1.3);
  }
}
@keyframes heistDrillBack {
  from {
    transform: translateX(66px);
  }
  to {
    transform: translateX(-10px) rotate(-6deg);
  }
}
@keyframes heistBitSnap {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  30% {
    transform: translate(28px, -10px) rotate(40deg);
    opacity: 1;
  }
  100% {
    transform: translate(60px, 90px) rotate(260deg);
    opacity: 0;
  }
}
@keyframes heistDrillKick {
  0% {
    transform: translateX(66px);
  }
  45% {
    transform: translateX(-50px) rotate(-16deg);
  }
  100% {
    transform: translateX(-20px) rotate(-8deg);
  }
}
@keyframes heistSafeRattle {
  from {
    transform: translate(-4px, -1px) rotate(-2deg);
  }
  to {
    transform: translate(4px, 1px) rotate(2deg);
  }
}
@keyframes heistAlarm {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heistFlash {
  0% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
@keyframes heistPulse {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
@keyframes heistMeterFill {
  from {
    width: 0;
  }
}
@keyframes heistRollDrop {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .heist-showdown,
  .heist-scene-drill,
  .heist-safe-door,
  .heist-safe-wrap,
  .heist-inside-loot,
  .heist-bit,
  .heist-dial,
  .heist-sparks i,
  .heist-shavings i,
  .heist-smoke i,
  .heist-rays,
  .heist-alarm,
  .heist-flash,
  .heist-meter-fill,
  .heist-meter-roll,
  .heist-drilling {
    animation: none !important;
    opacity: 1;
  }
  .heist-showdown.is-win .heist-safe-inside {
    opacity: 1;
  }
}
.heist-feed-box summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.heist-feed-box summary::-webkit-details-marker {
  display: none;
}
.heist-feed-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
}
.heist-feed-box[open] .heist-feed-chevron {
  transform: rotate(90deg);
}
.heist-feed-inner {
  margin-top: 12px;
}
.heist-rules {
  gap: 10px;
}
.heist-rule {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--card-alt);
}
.heist-rule span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.potato-stink {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.potato-stink li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card-alt);
  font-weight: 800;
}
.potato-rank {
  font-weight: 900;
  color: var(--muted);
}
.potato-stink .member-identity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.potato-stink .member-identity .member-name-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.potato-stink .tag {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .potato-stink li {
    grid-template-columns: 22px minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 6px 8px;
    font-size: 14px;
  }
  .potato-stink .hint {
    font-size: 11px;
  }
}
@keyframes potatoPulse {
  from {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.5);
  }
  to {
    box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
  }
}

.duo-hero {
  position: relative;
  overflow: hidden;
  border-width: 3px;
}
.duo-hero.is-alive {
  border-color: var(--green);
  box-shadow: 0 6px 0 #2f8a49;
}
.duo-hero.is-dead {
  border-color: var(--red);
  box-shadow: 0 6px 0 #c94444;
}
.duo-hero-wait {
  border-color: var(--blue);
}
.duo-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.duo-hero-head .card-title {
  margin: 0;
}
.duo-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--yellow);
  color: #182640;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}
.duo-prize small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
}
.duo-prize.is-dead {
  background: var(--grey);
  color: var(--muted);
  text-decoration: line-through;
}
.duos-page {
  max-width: 720px;
  margin: 0 auto;
}
.duo-vs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 6px 0;
}
.duo-fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 10px 12px;
  border: 2px solid var(--grey);
  border-radius: 16px;
  background: var(--card-alt);
}
.duo-fighter.is-in {
  border-color: var(--green);
}
.duo-fighter.is-out {
  border-color: var(--red);
}
.duo-fighter.is-gone {
  opacity: 0.55;
}
.duo-fighter.is-gone .duo-fighter-status {
  background: var(--grey);
  color: var(--muted);
}
.duo-fighter.me {
  box-shadow: 0 0 0 3px var(--me-row);
}
.duo-fighter-status {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  background: var(--red);
  border: 3px solid var(--ink);
}
.duo-fighter.is-in .duo-fighter-status {
  background: var(--green);
  color: #14351a;
}
.duo-fighter-name {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-weight: 900;
  font-size: 17px;
}
.duo-fighter-name .member-name-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duo-fighter-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.duo-vs-mark {
  align-self: center;
  flex: none;
  font-size: 26px;
}
.duo-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.duo-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.duo-progress-bar {
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card-alt);
  overflow: hidden;
}
.duo-progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #b6e36b);
  transition: width 0.5s ease;
}
.duo-hero.is-dead .duo-progress-bar i {
  background: var(--red);
}
.duo-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.duo-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 10px;
  border: 2px solid var(--grey);
  background: var(--card-alt);
}
.duo-day.done {
  border-color: var(--green);
  background: rgba(116, 224, 111, 0.18);
}
.duo-day.missed {
  border-color: var(--red);
  background: rgba(255, 107, 107, 0.18);
}
.duo-day.today {
  border-color: var(--blue);
}
.duo-day-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}
.duo-day.today .duo-day-name {
  color: var(--blue);
}
.duo-day-dots {
  display: flex;
  gap: 3px;
}
.duo-day-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grey);
}
.duo-day-dots i.done {
  background: var(--green);
}
.duo-day-dots i.missed {
  background: var(--red);
}
.duo-day-dots i.today {
  background: var(--blue);
  opacity: 0.6;
}
.duo-nag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid var(--grey);
  background: var(--card-alt);
  font-weight: 700;
}
.duo-nag.is-late {
  border-color: var(--red);
}
.duo-nag.is-ok {
  border-color: var(--green);
}
.duo-board-row.mine {
  font-weight: 900;
}
.rps-game-stats .duo-board-row {
  display: grid;
  gap: 9px;
  padding: 12px 7px 12px 14px;
  border: 2px solid var(--grey);
  border-radius: 14px;
  background: var(--card-alt);
}
.rps-game-stats .duo-board-row.is-alive {
  border-color: color-mix(in srgb, var(--green) 34%, var(--grey));
}
.duo-board-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.duo-board-join {
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}
.duo-board-progress {
  min-width: 34px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: right;
}
.duo-board-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--grey);
}
.duo-board-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}
.duo-board-progress-track i.is-dead {
  background: var(--red);
}
.duo-board-day-track {
  display: none;
}
.rps-game-stats .duo-board-row.is-dead {
  border-color: color-mix(in srgb, var(--red) 44%, var(--grey));
}
.duo-board-row.is-dead .duo-board-day-track i.done {
  background: var(--red);
}
.rps-history .duo-board-names {
  flex-wrap: wrap;
  white-space: normal;
  row-gap: 2px;
}
.rps-match.rps-history .rps-history-main {
  grid-template-columns: minmax(0, 1fr);
}
.rps-match.rps-history .rps-history-detail {
  grid-column: 1;
  overflow-wrap: anywhere;
}
.duo-board-names {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  /* MemberIdentity owns an interactive flair tooltip; clipping it trims the icon/glow and hides the tooltip. */
  overflow: visible;
  white-space: nowrap;
}
.duo-board-row > .duo-board-names {
  /* Override the generic rps-stat-row first-column truncation for interactive profile flair. */
  overflow: visible;
}
.duo-board-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.duo-board-name:focus-within {
  position: relative;
  z-index: 21;
}
.duo-board-name .member-identity {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.duo-board-name .member-name-link {
  overflow: visible;
}
.rps-stat-bar i.is-dead {
  background: var(--red);
}
.duo-missed {
  color: var(--red);
  text-decoration: line-through;
}
.games-feature-card.duo-card-hub {
  background: #1f5c4a;
}
.games-feature-card.duo-card-hub.needs-you {
  background: #6b2f2b;
  animation: potatoPulse 1.2s ease-in-out infinite alternate;
}
.games-feature-card.duo-card-hub.needs-them {
  background: #7a5a12;
}
.games-feature-card.duo-card-hub.is-dead {
  background: #3d4457;
}
@media (max-width: 600px) {
  .rps-game-stats .duo-board-row {
    gap: 8px;
    padding: 11px 5px 11px 12px;
  }
  .duo-board-top {
    gap: 8px;
  }
  .duo-board-progress {
    min-width: 30px;
  }
  .duo-board-names {
    white-space: normal;
  }
  .duo-vs {
    gap: 6px;
  }
  .duo-vs-mark {
    font-size: 20px;
  }
  .duo-fighter {
    padding: 10px 6px;
  }
  .duo-fighter-name {
    font-size: 14px;
  }
  .duo-fighter-status {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .duo-day-dots i {
    width: 7px;
    height: 7px;
  }
  .duo-day {
    padding: 4px 1px;
  }
  .duo-day-name {
    font-size: 10px;
  }
  .duo-prize {
    font-size: 17px;
    padding: 6px 10px;
  }
}
@media (max-width: 600px) {
  .rps-game-stats .duo-board-row {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 12px;
  }
  .duo-board-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .duo-board-progress,
  .duo-board-progress-track {
    display: none;
  }
  .duo-board-day-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .duo-board-day-track i {
    height: 7px;
    border-radius: 99px;
    background: var(--grey);
  }
  .duo-board-day-track i.done {
    background: var(--green);
  }
}

.games-daily-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.games-daily-grid .games-feature-card {
  min-height: 0;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}
.games-daily-grid .games-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.games-daily-grid .games-feature-card h3 {
  font-size: 16px;
}
.games-daily-grid .games-feature-card p {
  margin: 3px 0 6px;
  font-size: 13px;
}
.games-daily-grid .games-reward {
  display: block;
  font-size: 12px;
}
.games-daily-grid .games-arrow {
  display: none;
}
@media (max-width: 699px) {
  .games-daily-grid .games-feature-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 10px;
  }
  .games-daily-grid .games-card-icon {
    width: 44px;
    height: 44px;
  }
  .games-daily-grid .games-feature-card p {
    display: none;
  }
  .games-daily-grid .games-feature-card h3 {
    font-size: 15px;
  }
}

.dive-page {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dive-page > * {
  margin: 0;
}
.dive-intro-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.dive-intro-icon {
  font-size: 40px;
  line-height: 1;
  flex: none;
}
.dive-intro-head .card-title {
  margin: 0 0 4px;
}
.dive-intro-head .hint {
  margin: 0;
}
.dive-ladder {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.dive-ladder-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 10px;
  border: 2px solid currentColor;
  background: var(--card-alt);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.15;
}
.dive-ladder-step span {
  font-size: 12px;
  color: var(--text);
  margin-top: 3px;
}
.tier-raw {
  color: #b7a48a;
}
.tier-pale {
  color: #d9b36a;
}
.tier-golden {
  color: #e0932e;
}
.tier-crispy {
  color: #c8102e;
}
.tier-secret {
  color: #7d54a8;
}
.tier-krisp {
  color: #3b2a1a;
}
[data-theme='dark'] .tier-krisp {
  color: #ffb347;
}
.dive-ocean {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 22px;
  min-height: 340px;
  padding: 22px 22px 22px 96px;
  color: #fff;
  background: linear-gradient(180deg, #f6c35c 0%, #e0932e 30%, #8a3d0f 70%, #2b1207 100%);
  box-shadow: 0 6px 0 var(--ink);
}
.dive-ocean::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: -18px;
  height: 40px;
  background: radial-gradient(circle at 10px 22px, #ffe9a8 0 10px, transparent 11px) 0 0/40px 40px
    repeat-x;
  opacity: 0.7;
  animation: diveWave 3s linear infinite;
}
.dive-bubbles i {
  position: absolute;
  left: var(--x);
  bottom: -20px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  border: 2px solid rgba(255, 240, 200, 0.7);
  background: rgba(255, 230, 160, 0.25);
  animation: diveBubble var(--t) linear var(--d) infinite;
}
.dive-rail {
  position: absolute;
  left: 44px;
  top: 26px;
  bottom: 30px;
  width: 40px;
  border-left: 3px dashed rgba(255, 255, 255, 0.4);
}
.dive-rail-mark {
  position: absolute;
  left: 8px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.dive-diver {
  position: absolute;
  left: -40px;
  transform: translateY(-50%);
  font-size: 26px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
  transition: top 1.2s cubic-bezier(0.3, 0.8, 0.3, 1);
  animation: diveBob 2.4s ease-in-out infinite;
}
.dive-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 296px;
}
.dive-live {
  align-items: stretch;
  text-align: left;
  width: 100%;
}
.dive-ready,
.dive-done,
.dive-reveal {
  width: 100%;
}
.dive-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, #6b6f7a 0 6px, #3a3d46 6px 12px);
  opacity: 0.9;
}
.dive-ready,
.dive-done,
.dive-reveal,
.dive-live {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dive-ready,
.dive-done,
.dive-reveal {
  align-items: center;
  text-align: center;
}
.dive-ocean .games-eyebrow {
  color: rgba(255, 255, 255, 0.75);
}
.dive-big {
  margin: 0;
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.dive-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}
.dive-start {
  font-size: 18px;
  padding: 12px 28px;
  animation: potatoPulse 1.4s ease-in-out infinite alternate;
}
.dive-clock {
  --p: 100;
  align-self: flex-end;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  background: conic-gradient(#74e06f calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0);
  box-shadow:
    inset 0 0 0 6px #8a3d0f,
    0 0 0 3px rgba(255, 255, 255, 0.3);
  transition: background 0.1s linear;
}
.dive-clock.low {
  background: conic-gradient(#ff6b6b calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0);
  animation: diveTick 0.5s steps(2) infinite;
}
.dive-prompt {
  margin: 0;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  animation: rpsPop 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.dive-form {
  display: flex;
  gap: 8px;
}
.dive-form input {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  font-weight: 800;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  color: #182640;
}
.dive-ask {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  font-weight: 700;
}
.dive-ask.is-warn {
  border-color: #ff6b6b;
}
.dive-ask .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dive-reveal {
  animation: diveSink 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.dive-reveal-answer {
  margin: 0;
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}
.dive-reveal-tier {
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  border: 3px solid currentColor;
  background: rgba(0, 0, 0, 0.35);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  animation: rpsPop 0.4s 0.25s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.dive-reveal-metres {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  color: #ffd449;
  animation: rpsPop 0.4s 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.dive-coins {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: #ffd449;
  animation: rpsPop 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.reveal-raw .dive-reveal-tier {
  color: #f1e3c8;
}
.reveal-pale .dive-reveal-tier {
  color: #ffe08a;
}
.reveal-golden .dive-reveal-tier {
  color: #ffc14d;
}
.reveal-crispy .dive-reveal-tier {
  color: #ff8a65;
}
.reveal-secret .dive-reveal-tier {
  color: #c9a8ff;
}
.reveal-krisp .dive-reveal-tier {
  color: #ffd449;
  border-color: #ffd449;
  box-shadow: 0 0 24px #ff6b1a;
}
.reveal-krisp {
  animation: diveGold 1.2s ease-in-out 2 alternate;
}
.reveal-miss .dive-reveal-tier {
  color: #ff9b95;
}
.reveal-miss .dive-reveal {
  animation: diveShake 0.5s ease both;
}
.dive-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dive-log-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--grey);
  border-radius: 12px;
  background: var(--card-alt);
}
.dive-log-n {
  font-weight: 900;
  color: var(--muted);
}
.dive-log-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dive-log-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.dive-log-main span {
  font-weight: 800;
}
.dive-log-main em {
  font-style: normal;
  color: #c8102e;
}
.dive-tag {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #fff;
  border: 0;
  padding: 4px 8px;
  background: #6b6f7a;
}
.dive-log-row.tier-raw .dive-tag {
  background: #8a7a62;
}
.dive-log-row.tier-pale .dive-tag {
  background: #c99a3a;
}
.dive-log-row.tier-golden .dive-tag {
  background: #e0932e;
}
.dive-log-row.tier-crispy .dive-tag {
  background: #c8102e;
}
.dive-log-row.tier-secret .dive-tag {
  background: #7d54a8;
}
.dive-log-row.tier-krisp .dive-tag {
  background: #3b2a1a;
  box-shadow: 0 0 0 2px #ffb347;
}
.dive-log-row.tier-miss .dive-tag {
  background: #b73b34;
}
.dive-log-row.tier-miss .dive-tag {
  color: var(--red);
}
.dive-log-m {
  font-weight: 900;
  white-space: nowrap;
}
.potato-stink li.me {
  border-color: var(--blue);
}
.games-feature-card.dive-card-hub {
  background: #8a3d0f;
}
@keyframes diveWave {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 40px;
  }
}
@keyframes diveBubble {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(-380px) translateX(12px);
    opacity: 0;
  }
}
@keyframes diveBob {
  0%,
  100% {
    margin-top: -3px;
  }
  50% {
    margin-top: 3px;
  }
}
@keyframes diveTick {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
@keyframes diveSink {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes diveShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}
@keyframes diveGold {
  from {
    box-shadow: 0 6px 0 var(--ink);
  }
  to {
    box-shadow:
      0 6px 0 var(--ink),
      0 0 40px #ff6b1a;
  }
}
@media (max-width: 600px) {
  .dive-ocean {
    padding: 18px 12px 18px 74px;
    min-height: 300px;
  }
  .dive-rail {
    left: 34px;
    width: 32px;
  }
  .dive-rail-mark {
    font-size: 10px;
    left: 6px;
  }
  .dive-diver {
    font-size: 22px;
    left: -32px;
  }
  .dive-ladder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dive-log-row {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }
  .dive-log-m {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dive-bubbles i,
  .dive-diver,
  .dive-start,
  .dive-clock.low,
  .dive-ocean::before,
  .reveal-eleventh {
    animation: none;
  }
}

.rps-players-tag {
  display: inline-grid;
  place-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--blue);
  vertical-align: middle;
}
.rps-players-tag.p3 {
  background: #e0932e;
}
.rps-game-card .rps-players-tag {
  margin-left: auto;
}
.party-numbers {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}
.party-number {
  aspect-ratio: 1;
  border: 2px solid var(--grey);
  border-radius: 10px;
  background: var(--card-alt);
  color: var(--text);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}
.party-number.selected {
  border-color: #e0932e;
  background: #e0932e;
  color: #fff;
  box-shadow: 0 3px 0 #8a3d0f;
}
.party-seats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.party-seat {
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px dashed var(--grey);
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.party-seat.taken {
  border-style: solid;
  border-color: #e0932e;
  color: var(--text);
}
.party-reveal {
  width: min(460px, 94vw);
  min-width: 0;
  overflow-y: auto;
  text-align: center;
}
.roulette-names {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.roulette-name {
  padding: 6px 12px;
  border: 2px solid var(--grey);
  border-radius: 999px;
  font-weight: 900;
  transition: all 0.3s;
}
.roulette-name.out {
  opacity: 0.4;
  text-decoration: line-through;
  border-color: var(--red);
}
.roulette-name.winner {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(116, 224, 111, 0.35);
}

.roulette-pull {
  min-height: 24px;
  animation: rpsPop 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
@media (max-width: 600px) {
  .party-numbers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.games-mini-card {
  position: relative;
}
.games-mini-card .rps-players-tag {
  position: absolute;
  top: 8px;
  right: 8px;
}
.party-you {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e0932e;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.roulette-name .member-identity,
.party-seat .member-identity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.party-seat {
  display: inline-flex;
  align-items: center;
}
.oil-rules {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.oil-example {
  color: var(--muted);
  font-style: italic;
}
.roulette-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 220px;
  justify-content: flex-end;
}
.roulette-sticks {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0;
  height: 30px;
  margin-bottom: -18px;
  font-size: 24px;
}
.roulette-stick {
  display: inline-block;
  transform: rotate(-20deg);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.roulette-stick:nth-child(even) {
  transform: rotate(15deg) translateY(4px);
}
.roulette-stick.gone {
  opacity: 0;
  transform: translateY(-20px);
}
.roulette-bucket {
  position: relative;
  z-index: 2;
  font-size: 72px;
  line-height: 1;
}
.roulette-flying {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 46px;
  animation: rouletteLift 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
.roulette-flying.spicy .roulette-flying-stick {
  filter: hue-rotate(-30deg) saturate(3) drop-shadow(0 0 10px #ff3b1a);
  animation: rouletteShake 0.12s linear 0.5s 6 alternate;
}
.roulette-flames {
  font-size: 20px;
  animation: rpsPop 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4) 0.45s both;
}
.party-reveal:has(.roulette-flying.spicy) {
  animation: rouletteCardShake 0.45s ease 0.5s;
}
@keyframes rouletteCardShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}
@keyframes rouletteLift {
  0% {
    transform: translate(-50%, 40px) rotate(0) scale(0.6);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -115px) rotate(-25deg) scale(1.35);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -100px) rotate(-12deg) scale(1.25);
    opacity: 1;
  }
}
@keyframes rouletteShake {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(12deg);
  }
}
.roulette-left {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

.oil7 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.oil7-players {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.oil7-player {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 18px 6px 8px;
  border: 2px solid var(--grey);
  border-radius: 14px;
  background: var(--card-alt);
  transition:
    border-color 0.3s,
    opacity 0.3s;
}
.oil7-player.me {
  border-color: #e0932e;
}
.oil7-player.winner {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(116, 224, 111, 0.35);
}
.oil7-player.lost {
  opacity: 0.6;
}
.oil7-leg {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  transform-origin: 70% 80%;
  animation: oil7Dangle 1.4s ease-in-out infinite alternate;
}
@keyframes oil7Dangle {
  from {
    transform: rotate(-26deg);
  }
  to {
    transform: rotate(-12deg);
  }
}
.oil7-player.cooked .oil7-leg {
  animation: oil7Sizzle 0.12s linear infinite alternate;
}
@keyframes oil7Sizzle {
  from {
    transform: rotate(-24deg) translateX(-1px);
  }
  to {
    transform: rotate(-16deg) translateX(1px);
  }
}
.oil7-player.winner .oil7-leg {
  animation: oil7Hop 0.6s cubic-bezier(0.3, 0, 0.3, 1) infinite alternate;
}
@keyframes oil7Hop {
  from {
    transform: rotate(-20deg) translateY(0);
  }
  to {
    transform: rotate(-8deg) translateY(-6px) scale(1.1);
  }
}
.oil7-player.lost .oil7-leg {
  filter: brightness(0);
  opacity: 0.55;
  animation: oil7Burn 0.5s ease-out both;
}
@keyframes oil7Burn {
  from {
    transform: rotate(-20deg) scale(1.2);
  }
  to {
    transform: rotate(-20deg) scale(0.9);
  }
}
.oil7-pick {
  font-size: 16px;
  font-weight: 900;
}
.oil7-player.winner .oil7-pick {
  color: var(--green);
}
.oil7-player.lost .oil7-pick {
  color: var(--muted);
  text-decoration: line-through;
}
.oil7-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}
.oil7-player.me .oil7-name {
  color: #e0932e;
}
.oil7-crown {
  position: absolute;
  top: -14px;
  left: 50%;
  margin-left: -11px;
  font-size: 22px;
  animation: oil7Crown 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
@keyframes oil7Crown {
  from {
    opacity: 0;
    transform: translateY(-18px) rotate(-30deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.oil7-steam {
  position: absolute;
  top: 6px;
  left: 50%;
  pointer-events: none;
}
.oil7-steam i {
  position: absolute;
  left: -8px;
  font-style: normal;
  font-size: 14px;
  opacity: 0;
  animation: oil7Steam 1.1s ease-out infinite;
}
.oil7-steam i:nth-child(2) {
  left: 6px;
  font-size: 12px;
  animation-delay: 0.35s;
}
.oil7-steam i:nth-child(3) {
  left: -20px;
  animation-delay: 0.7s;
}
@keyframes oil7Steam {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.6);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-22px) scale(1.1);
  }
}
.oil7-pot {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 230px;
}
.oil7-scale,
.oil7-temps {
  position: relative;
  width: 44px;
}
.oil7-scale span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}
.oil7-tube {
  --heat: 0;
  position: relative;
  width: 64px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 14px 14px 32px 32px;
  background: linear-gradient(90deg, #22160e, #4a3526 50%, #22160e);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.55),
    0 4px 0 var(--ink);
}
.oil7-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.35) 35%, transparent 60%),
    linear-gradient(
      0deg,
      hsl(calc(44 - var(--heat) * 40), 96%, calc(56% - var(--heat) * 10%)),
      hsl(52, 95%, 60%)
    );
  transition: height 0.12s linear;
}
.oil7-fill::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% + 28px);
  min-height: 56px;
  background:
    radial-gradient(circle at 30% 60%, rgba(255, 255, 255, 0.7) 0 2px, transparent 3px) 0 0 / 23px
      28px,
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 2.5px) 0 0 /
      17px 28px;
  will-change: transform;
  animation: oil7Bubble 0.9s linear infinite;
}
@keyframes oil7Bubble {
  to {
    transform: translateY(-28px);
  }
}
.oil7-stop {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 4px;
  margin-bottom: -2px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ink);
  animation: rpsPop 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.oil7-temp {
  position: absolute;
  left: 0;
  transform: translateY(50%);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: bottom 0.12s linear;
}
.oil7.stopped .oil7-temp {
  animation: rpsPop 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.oil7.stopped .oil7-tube {
  animation: oil7Jolt 0.4s ease-out;
}
@keyframes oil7Jolt {
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-1px);
  }
}
.scratch-panel {
  align-items: center;
  text-align: center;
}
.scratch-ticket {
  width: min(340px, 100%);
  padding: 14px 14px 12px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(160deg, #ffd449, #ff9f1c);
  box-shadow: 0 5px 0 var(--ink);
  color: #3b2a1a;
  transition: transform 0.3s;
}
.scratch-ticket.won {
  animation: scratchWin 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.4);
}
.scratch-ticket.lost {
  filter: saturate(0.6);
}
@keyframes scratchWin {
  40% {
    transform: scale(1.06) rotate(-2deg);
  }
  100% {
    transform: none;
  }
}
.scratch-ticket-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.scratch-field {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.scratch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #fff8e6;
}
.scratch-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(59, 42, 26, 0.15);
  font-size: 40px;
  line-height: 1;
}
.scratch-cell.match {
  background: #fff1a8;
  animation: rpsPop 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.4) both;
}
.scratch-coating {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.scratch-result {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 900;
}
.scratch-actions {
  display: flex;
  justify-content: center;
}
.scratch-prizes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scratch-prize {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--card-alt);
}
.scratch-prize-icons {
  font-size: 20px;
  letter-spacing: 2px;
}
.scratch-pot {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
}
.scratch-recent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scratch-recent-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-left: 4px solid var(--grey);
  border-radius: 10px;
  background: var(--card-alt);
}
.scratch-recent-row.is-won {
  border-left-color: var(--green);
}
.scratch-recent-row.is-won strong {
  color: var(--green);
}
.scratch-recent-row.is-lost strong {
  color: var(--muted);
}
.scratch-winner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.scratch-winner-row {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 2px;
}
.scratch-winner-row .hint {
  grid-column: 1 / -1;
}
.scratch-winner .member-name-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scratch-winner .flair-tooltip {
  flex-shrink: 0;
}