/* ERAWLN: bold type, honest borders, flat colour. */
:root {
  --bg: #f3f0e5;
  --surface: #fffdf5;
  --raised: #e6e2d6;
  --line: #171717;
  --text: #171717;
  --muted: #55544f;
  --subtle: #68665f;
  --red: #f24c32;
  --red-hover: #ff694f;
  --green: #304d32;
  --paper: #fffdf5;
  --radius: 0;
  color-scheme: light;
}
html {
  scroll-behavior: auto;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}
button,
input,
select,
textarea,
dialog {
  border-radius: 0 !important;
}
h1,
h2,
h3,
.brand > span,
.wallet-number strong,
.club-footer > span:first-child {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}
.reveal {
  opacity: 1;
  transform: none;
}
.overline,
.mini-label,
.collection-meta,
.collection-foot,
.machine-topline,
.machine-bottomline,
.feature-caption > span,
.fair-note > span,
.identity small,
.topup-row small {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.4px;
  font-size: 10px;
}
.club-header {
  max-width: 1440px;
  height: 96px;
  border-bottom: 3px solid var(--line);
  padding: 0 4%;
  gap: 24px;
}
.brand {
  gap: 10px;
}
.brand > svg {
  width: 42px;
  height: 42px;
  padding: 5px;
  border: 2px solid var(--line);
  background: var(--red);
  color: var(--text);
}
.brand > span {
  font-size: 31px;
  letter-spacing: -2px;
}
.brand small {
  color: var(--text);
  font:
    700 8px 'Courier New',
    monospace;
  letter-spacing: 2px;
}
.club-nav {
  gap: 0;
}
.club-nav .nav-link {
  border: 2px solid transparent;
  padding: 13px 16px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.club-nav .nav-link.selected {
  border-color: var(--line);
  background: var(--red);
}
.club-nav .nav-link:hover {
  background: var(--raised);
}
.club-nav .nav-link.selected:hover {
  background: var(--red);
}
.club-nav .nav-link::after {
  display: none;
}
.nav-link b {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0;
  font-size: 9px;
}
.identity {
  border: 2px solid var(--line);
  padding: 9px 12px;
  gap: 9px;
  background: var(--paper);
}
.identity-avatar {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
  font-weight: 900;
}
.identity small {
  font-size: 8px;
}
.identity b {
  font:
    700 10px 'Courier New',
    monospace;
  letter-spacing: 0.3px;
}
.identity > svg {
  stroke: var(--text);
}
.club-main {
  max-width: 1360px;
  padding: 0 4%;
}
.page-heading {
  align-items: flex-end;
  padding: 44px 0 32px;
  gap: 28px;
}
.page-heading h1 {
  font-size: clamp(54px, 7.8vw, 108px);
  line-height: 0.91;
  letter-spacing: -0.075em;
  margin-top: 19px;
}
.page-heading h1 > span {
  color: var(--red);
}
.heading-note {
  padding-bottom: 5px;
  flex-shrink: 0;
}
.heading-note p {
  font-size: 12px;
  color: var(--text);
  line-height: 1.7;
  margin-top: 16px;
}
.live-chip {
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 7px 10px;
  font:
    700 10px 'Courier New',
    monospace;
  color: var(--text);
  letter-spacing: 0.5px;
}
.live-chip i {
  background: var(--red);
  border-radius: 0;
  box-shadow: none;
  width: 7px;
  height: 7px;
}
.play-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.85fr);
  gap: 22px;
}
.machine-panel {
  border: 3px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--line);
}
.machine-topline {
  padding: 16px 20px;
  border-bottom: 2px solid var(--line);
  background: var(--raised);
}
.machine-topline > span:first-child {
  color: var(--text);
}
.machine-topline > span:last-child {
  font-size: 9px;
}
.machine-bottomline {
  padding: 14px 20px;
  border-top: 2px solid var(--line);
  font-size: 8px;
}
.machine-bottomline i {
  border-radius: 0;
  width: 6px;
  height: 6px;
}
.wheel-stage {
  height: 420px;
  perspective: none;
}
.stage-orbit,
.stage-cross,
.wheel-floor,
.rim-studs {
  display: none;
}
.wheel-assembly {
  width: 350px;
  height: 350px;
  transform: none;
  filter: none;
}
.wheel-case {
  border: 3px solid var(--line);
  background: var(--red);
  padding: 10px;
  box-shadow: 7px 7px 0 var(--line);
}
.wheel-case::after {
  display: none;
}
.wheel-face {
  border: 3px solid var(--line);
  box-shadow: none;
}
.wheel-center {
  background: var(--text);
  color: var(--paper);
  border: 3px solid var(--line);
  width: 66px;
  height: 66px;
  box-shadow: none;
  gap: 4px;
}
.wheel-center > svg {
  width: 26px;
  height: 26px;
}
.wheel-center > span {
  color: var(--paper);
  font:
    700 6px 'Courier New',
    monospace;
  letter-spacing: 1px;
}
.wheel-pointer {
  top: -18px;
  width: 32px;
  height: 43px;
  transform: translateX(-50%);
  filter: none;
}
.wheel-pointer::before {
  border-radius: 0;
  background: var(--text);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.wheel-pointer span {
  display: none;
}
.spin-panel {
  border: 3px solid var(--line);
  border-radius: 0;
  padding: 25px;
  background: var(--red);
  box-shadow: 6px 6px 0 var(--line);
  color: var(--text);
}
.wallet-number {
  margin-top: 13px;
}
.wallet-number strong {
  font-size: 86px;
  letter-spacing: -7px;
  line-height: 1;
}
.wallet-number strong span {
  font:
    700 20px Arial,
    sans-serif;
  letter-spacing: -1px;
}
.token-dots i {
  border-radius: 0;
  border: 2px solid var(--line);
  background: transparent;
  box-shadow: none;
}
.token-dots i.filled {
  background: var(--text);
  border-color: var(--text);
  box-shadow: none;
}
.wallet-description {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
}
.spin-mode {
  color: var(--text);
  font:
    700 10px 'Courier New',
    monospace;
  padding-top: 12px;
}
.spin-button {
  border: 2px solid var(--line);
  background: var(--text);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--paper);
  border-radius: 0;
  font-size: 14px;
  font-weight: 800;
  padding: 21px;
}
.spin-button:hover:not(:disabled) {
  background: var(--paper);
  color: var(--text);
  box-shadow: 4px 4px 0 var(--text);
  transform: none;
}
.spin-button:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.spin-hint {
  color: var(--text);
  font-size: 10px;
}
.sound-toggle,
.sound-toggle[aria-pressed='false'] {
  color: var(--text);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wallet-divider {
  background: var(--text);
  height: 2px;
  margin: 22px 0;
}
.topup-row small {
  font-size: 8px;
}
.topup-row strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
}
.topup-row strong span {
  color: var(--text);
}
.round-link {
  border: 2px solid var(--line);
  border-radius: 0;
  color: var(--text);
  background: var(--paper);
  width: 42px;
  height: 42px;
}
.round-link:hover {
  background: var(--text);
  color: var(--paper);
  transform: none;
}
.transfer-note {
  border: 0;
  border-top: 2px solid var(--line);
  background: transparent;
  border-radius: 0;
  padding: 17px 0 0;
}
.transfer-note p,
.transfer-note strong,
.transfer-note > span {
  color: var(--text);
}
.feature-strip {
  margin-top: 42px;
  gap: 0;
  border: 3px solid var(--line);
}
.feature-caption {
  border-right: 3px solid var(--line);
  padding: 24px;
  background: var(--text);
  color: var(--paper);
}
.feature-caption > span {
  color: #cecac0;
}
.feature-caption h2 {
  font-size: 37px;
  line-height: 0.95;
  letter-spacing: -2px;
}
.feature-caption .text-link {
  color: var(--paper);
  font-size: 10px;
}
.featured-wink,
.featured-cash {
  border: 0;
  border-radius: 0;
  background: var(--surface);
  padding: 24px;
  overflow: hidden;
  min-width: 0;
}
.featured-wink {
  border-right: 3px solid var(--line);
}
.featured-wink h3,
.featured-cash h3 {
  color: var(--text);
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.5px;
}
.featured-wink p {
  color: var(--muted);
}
.featured-wink img {
  border: 2px solid var(--line);
  border-radius: 0;
  transform: none;
  width: 92px;
  height: 92px;
  padding: 0;
}
.featured-cash img {
  mix-blend-mode: multiply;
  transform: none;
}
.mini-label {
  font-size: 9px;
}
.stock-badge {
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
  border-radius: 0;
  font-size: 8px;
}
.text-link,
.featured-cash .text-link {
  color: var(--text);
}
.text-link:hover {
  color: var(--red);
}
.fair-note {
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  margin-top: 28px;
  padding: 22px 0;
}
.fair-note p {
  color: var(--muted);
}
.fair-note button {
  color: var(--text);
  font-weight: 700;
}
.club-footer {
  border-top: 0;
  color: var(--text);
}
.club-footer > span:first-child {
  color: var(--text);
}
.club-footer small,
.club-footer p,
.club-footer > span:last-child {
  color: var(--muted);
}
.section-description {
  color: var(--muted);
  font-size: 12px;
}
.collection-grid {
  gap: 20px;
}
.collection-card {
  background: var(--surface);
  border: 3px solid var(--line);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--line);
}
.collection-card:hover {
  transform: none;
  border-color: var(--line);
}
.collection-card.cash {
  background: #f7c0ad;
}
.collection-card.zonk {
  background: #dedbd0;
}
.collection-card h2 {
  color: var(--text);
  font-size: 30px;
  font-weight: 900;
}
.collection-card p {
  color: var(--muted);
}
.collection-foot {
  border-top: 2px solid var(--line);
  font-size: 8px;
}
.collection-card.wink img {
  border-radius: 0;
  transform: none;
  border: 2px solid var(--line);
}
.collection-art img,
.collection-card.cash img {
  transform: none;
}
.filter-tabs {
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 0;
  background: var(--surface);
}
.filter-tabs button {
  color: var(--text);
  padding: 12px 16px;
  font-size: 12px;
}
.filter-tabs button.active {
  background: var(--text);
  color: var(--paper);
}
.search-field {
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
}
.search-field input {
  color: var(--text);
  font-size: 12px;
}
.search-field input::placeholder {
  color: var(--muted);
}
.history-item {
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.history-item img {
  border-radius: 0;
  border: 1px solid var(--line);
}
.history-item :is(h3, strong, button, time) {
  color: var(--text);
}
.history-item p,
.history-item small,
.empty-state {
  color: var(--muted);
}
.empty-state {
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: 0;
}
.help-index {
  border: 3px solid var(--line);
  background: var(--red);
  color: var(--text);
  padding: 24px;
}
.help-index > span,
.help-index > p,
.help-contact small,
.help-contact strong,
.help-contact button {
  color: var(--text);
}
.help-contact {
  border-top: 2px solid var(--line);
}
.faq-list details {
  border-bottom: 2px solid var(--line);
}
.faq-list summary {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}
.faq-list summary span {
  color: var(--red);
}
.faq-list p {
  color: var(--muted);
  font-size: 13px;
}
.secondary-button {
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}
.secondary-button:hover {
  background: var(--raised);
  color: var(--text);
  border-color: var(--line);
  transform: none;
}
.result-dialog,
.contact-dialog,
.confirm-dialog {
  border: 3px solid var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: 8px 8px 0 var(--line);
}
dialog::backdrop {
  background: #17171799;
  backdrop-filter: none;
}
.result-dialog h2,
.contact-dialog h2 {
  font-weight: 900;
  color: var(--text);
}
.result-dialog p,
.contact-dialog p,
.result-contact {
  color: var(--muted);
}
.result-art {
  background: transparent;
}
.result-art img {
  border-radius: 0;
  transform: none;
}
.claim-box,
.account-row,
.contact-id {
  border: 2px solid var(--line);
  background: var(--raised);
  color: var(--text);
  border-radius: 0;
}
.account-row small,
.account-row strong,
.account-row button {
  color: var(--text);
}
.cash-claim label {
  color: var(--text);
}
.cash-claim textarea {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--line);
}
.dialog-close {
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--text);
}
.copy-notice,
.copy-notice.visible {
  color: #24572a;
}
.toast {
  border: 2px solid var(--line);
  background: var(--text);
  color: var(--paper);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--red);
}
.preview-banner,
.maintenance-banner {
  border-bottom: 2px solid var(--line);
  background: #f5d97b;
  color: var(--text);
}
.mobile-nav {
  background: var(--surface);
  border-top: 3px solid var(--line);
  backdrop-filter: none;
}
.mobile-nav .nav-link {
  color: var(--muted);
  font-weight: 700;
}
.mobile-nav .nav-link.selected {
  color: var(--text);
  background: var(--red);
}
.mobile-nav .nav-link.selected::before {
  display: none;
}
.mobile-spin-dock:not([hidden]) {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--line);
  backdrop-filter: none;
}
.mobile-spin-dock strong,
.mobile-spin-dock small {
  color: var(--text);
}
.mobile-spin-dock button {
  background: var(--red);
  color: var(--text);
  font-weight: 800;
}

/* The same typography and borders carry into the control room. */
.admin-body {
  background: var(--bg);
  color: var(--text);
}
.admin-landing-header {
  border-bottom: 3px solid var(--line);
}
.maintenance-brand,
.maintenance-brand small {
  color: var(--text);
}
.maintenance-brand {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
}
.control-login {
  border: 3px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 7px 7px 0 var(--line);
}
.control-login-art {
  background: var(--red);
  border-right: 3px solid var(--line);
}
.brutal-login-logo {
  font:
    900 clamp(130px, 23vw, 280px) / 0.9 Arial,
    sans-serif;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.08em;
}
.brutal-login-logo span {
  display: block;
  margin-top: 22px;
  font:
    700 10px 'Courier New',
    monospace;
  letter-spacing: 2px;
}
.login-art-caption,
.control-login-form > p,
.login-note,
.admin-landing-header > span {
  color: var(--muted);
}
.login-art-caption {
  color: var(--text);
}
.control-login-form h1 {
  font-weight: 900;
}
.control-login-form h1 span {
  color: var(--red);
}
.control-login-form label {
  color: var(--text);
}
.password-field,
.admin-card .password-field {
  border: 2px solid var(--line);
  background: var(--surface);
  border-radius: 0;
}
.password-field input,
.password-field button,
.admin-card .password-field > button {
  color: var(--text);
}
.admin-sidebar {
  background: var(--surface);
  border-right: 3px solid var(--line);
  min-width: 0;
}
.admin-tabs button {
  color: var(--text);
  font-size: 12px;
  border: 2px solid transparent;
}
.admin-tabs button > span {
  color: var(--muted);
}
.admin-tabs button:hover {
  background: var(--raised);
  color: var(--text);
}
.admin-tabs button.selected {
  background: var(--red);
  border-color: var(--line);
  color: var(--text);
}
.admin-tabs .selected > span {
  color: var(--text);
}
.sidebar-section-label,
.sidebar-bottom > a,
.logout-button,
.admin-identity small {
  color: var(--muted);
}
.sidebar-bottom > a {
  border-color: var(--line);
}
.admin-avatar {
  background: var(--red);
  border: 2px solid var(--line);
  border-radius: 0;
  color: var(--text);
}
.admin-identity strong,
.admin-topbar strong,
.admin-topbar > div > span,
.admin-connection {
  color: var(--text);
}
.admin-topbar {
  border-bottom: 2px solid var(--line);
}
.admin-page-heading h1 {
  font-weight: 900;
  letter-spacing: -2px;
}
.admin-page-heading > p,
.admin-page-heading > .overline {
  color: var(--muted);
}
.metric-grid article,
.control-card {
  border: 2px solid var(--line);
  background: var(--surface);
  border-radius: 0;
}
.metric-grid article:first-child {
  background: var(--red);
}
.metric-grid article > span,
.metric-grid small,
.metric-grid strong {
  color: var(--text);
}
.metric-grid strong {
  font-family: Arial, sans-serif;
  font-weight: 900;
}
.control-card > p,
.control-card > .overline,
.context-note > span,
.context-note > p,
.field-hint,
.panel-toolbar > span,
.rule-row small {
  color: var(--muted);
}
.control-card h2,
.context-note h3,
.quick-actions span,
.rule-row strong {
  color: var(--text);
  font-weight: 800;
}
.control-card h2 {
  font-weight: 800;
}
.context-note .text-link {
  color: var(--text);
}
.status-pill,
.status-pill.paused {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--raised);
  color: var(--text);
}
.status-pill.paused {
  background: #f7c0ad;
}
.status-detail,
.quick-actions button,
.rule-row,
.account-manager {
  border-color: var(--line);
}
.status-detail > span,
.status-detail strong,
.quick-actions small,
.quick-actions b {
  color: var(--muted);
}
.admin-card label {
  color: var(--text);
}
.admin-card input,
.admin-card select,
.admin-card textarea {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: 0;
  font-size: 13px;
}
.admin-card input::placeholder,
.admin-card textarea::placeholder {
  color: var(--muted);
}
.preset-buttons button,
.rule-shortcuts button,
.rule-row > button,
.row-actions button {
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
}
.rule-summary {
  background: var(--raised);
  border: 2px solid var(--line);
  color: var(--text);
  border-radius: 0;
}
.mode-option {
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
}
.mode-option:has(input:checked) {
  background: #f7c0ad;
  border-color: var(--line);
  box-shadow: 4px 4px 0 var(--line);
}
.mode-option strong,
.mode-option span,
.mode-option p,
.mode-option small {
  color: var(--text);
}
.mode-option small {
  border-color: var(--line);
}
.maintenance-switch-row,
.maintenance-message-preview {
  background: var(--raised);
  color: var(--text);
  border-color: var(--line);
  border-radius: 0;
}
.admin-body th {
  background: var(--raised);
  color: var(--text);
  border-bottom: 2px solid var(--line);
}
.admin-body td {
  color: var(--text);
  border-color: #b8b5aa;
}
.admin-body .table-wrap {
  border: 2px solid var(--line);
  background: var(--surface);
  border-radius: 0;
}
.admin-body td :is(strong, code, button),
.admin-body .key-text {
  color: var(--text);
}
.admin-body td small {
  color: var(--muted);
}
.admin-body .table-wrap tr:hover {
  background: var(--raised);
}
.admin-footer,
.admin-footer a {
  color: var(--muted);
  border-color: var(--line);
}
.confirm-dialog > p {
  color: var(--muted);
}
.confirm-dialog .spin-button,
.admin-card .spin-button {
  box-shadow: 4px 4px 0 var(--red);
}

@media (max-width: 1100px) {
  .club-nav .nav-link {
    padding: 12px 10px;
    font-size: 11px;
  }
  .club-header {
    gap: 15px;
  }
  .identity-avatar {
    display: none;
  }
  .wheel-assembly {
    width: 310px;
    height: 310px;
  }
  .wheel-stage {
    height: 390px;
  }
  .spin-panel {
    padding: 22px;
  }
  .feature-caption {
    padding: 22px 18px;
  }
  .feature-caption h2 {
    font-size: 30px;
  }
  .featured-wink,
  .featured-cash {
    padding: 22px 18px;
  }
  .featured-wink h3,
  .featured-cash h3 {
    font-size: 28px;
  }
  .featured-wink img {
    width: 75px;
    height: 75px;
  }
}
@media (max-width: 850px) {
  .club-header {
    height: 80px;
  }
  .page-heading h1 {
    font-size: clamp(53px, 9vw, 78px);
  }
  .heading-note {
    flex-shrink: 1;
  }
  .heading-note p {
    font-size: 11px;
  }
  .play-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(255px, 0.8fr);
    gap: 16px;
  }
  .wheel-assembly {
    width: 270px;
    height: 270px;
  }
  .wheel-stage {
    height: 370px;
  }
  .machine-topline,
  .machine-bottomline {
    padding: 13px;
    font-size: 8px;
  }
  .machine-topline > span:last-child {
    font-size: 7px;
  }
  .machine-bottomline > span:last-child {
    display: none;
  }
  .feature-strip {
    grid-template-columns: 1fr 1fr;
  }
  .feature-caption {
    grid-column: 1/-1;
    border-right: 0;
    border-bottom: 3px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
  }
  .feature-caption h2 {
    font-size: 26px;
    margin: 0;
  }
  .feature-caption h2 br {
    display: none;
  }
  .feature-caption .text-link {
    margin: 0;
  }
  .admin-sidebar {
    border-right: 0;
    border-bottom: 3px solid var(--line);
  }
  .admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .control-login-art {
    border-right: 0;
    border-bottom: 3px solid var(--line);
  }
}
@media (max-width: 620px) {
  .club-header {
    padding: 0 18px;
    gap: 12px;
    height: 79px;
  }
  .brand > svg {
    width: 34px;
    height: 34px;
    padding: 3px;
  }
  .brand > span {
    font-size: 27px;
  }
  .brand small {
    font-size: 7px;
  }
  .identity {
    padding: 8px;
    gap: 6px;
    max-width: 150px;
  }
  .identity > svg {
    display: none;
  }
  .identity small {
    font-size: 7px;
    margin-bottom: 3px;
  }
  .identity b {
    font-size: 8px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .club-main {
    padding: 0 18px;
  }
  .page-heading {
    display: block;
    padding: 31px 0 23px;
  }
  .page-heading h1 {
    font-size: clamp(42px, 10.8vw, 66px);
    letter-spacing: -0.065em;
    margin-top: 17px;
  }
  .heading-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    margin-top: 22px;
    padding: 0;
  }
  .heading-note p {
    margin: 0;
    font-size: 9px;
    line-height: 1.5;
  }
  .live-chip {
    font-size: 8px;
    flex-shrink: 0;
    padding: 7px;
  }
  .overline {
    font-size: 9px;
  }
  .play-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 23px;
  }
  .wheel-stage {
    height: 350px;
  }
  .wheel-assembly {
    width: 280px;
    height: 280px;
  }
  .machine-panel,
  .spin-panel {
    box-shadow: 4px 4px 0 var(--line);
  }
  .machine-topline {
    padding: 14px;
    font-size: 9px;
  }
  .machine-topline > span:last-child {
    font-size: 7px;
  }
  .machine-bottomline {
    padding: 13px 14px;
    font-size: 8px;
  }
  .machine-bottomline > span:last-child {
    display: block;
    font-size: 6px;
  }
  .spin-panel {
    padding: 22px;
  }
  .wallet-number strong {
    font-size: 80px;
  }
  .wallet-description {
    font-size: 12px;
  }
  .spin-button {
    padding: 21px;
    font-size: 15px;
  }
  .feature-strip {
    margin-top: 32px;
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-caption {
    display: block;
  }
  .feature-caption h2 {
    font-size: 33px;
    margin: 15px 0;
  }
  .featured-wink {
    border-right: 0;
    border-bottom: 3px solid var(--line);
  }
  .featured-wink,
  .featured-cash {
    min-height: 186px;
    padding: 22px;
  }
  .featured-wink img {
    width: 96px;
    height: 96px;
  }
  .featured-cash img {
    width: 160px;
  }
  .fair-note {
    padding: 19px 0;
  }
  .fair-note p {
    font-size: 11px;
  }
  .club-footer {
    padding: 30px 18px 180px;
  }
  .history-toolbar {
    gap: 15px;
  }
  .filter-tabs {
    width: 100%;
    display: flex;
  }
  .filter-tabs button {
    flex: 1;
    padding: 11px 8px;
    font-size: 11px;
  }
  .search-field {
    width: 100%;
  }
  .collection-card {
    padding: 22px;
  }
  .result-dialog,
  .contact-dialog {
    box-shadow: 4px 4px 0 var(--line);
  }
  .control-login {
    box-shadow: 4px 4px 0 var(--line);
  }
  .control-login-art {
    min-height: 235px;
  }
  .brutal-login-logo {
    font-size: 150px;
  }
  .admin-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .admin-content {
    min-width: 0;
  }
  .admin-tabs {
    min-width: 0;
    max-width: 100%;
  }
  .admin-page-heading h1 {
    font-size: 32px;
  }
}
@media (max-width: 370px) {
  .club-main {
    padding: 0 14px;
  }
  .club-header {
    padding: 0 14px;
  }
  .brand > span {
    font-size: 24px;
  }
  .brand > svg {
    width: 30px;
    height: 30px;
  }
  .identity {
    max-width: 135px;
  }
  .wheel-assembly {
    width: 250px;
    height: 250px;
  }
  .wheel-stage {
    height: 318px;
  }
  .heading-note p {
    max-width: 170px;
  }
}

.mobile-spin-dock:not([hidden]) {
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--line);
  border-radius: 0;
  backdrop-filter: none;
}
.mobile-spin-dock strong {
  color: var(--text);
  font-family: Arial, sans-serif;
  font-weight: 900;
}
.wallet-number strong span {
  margin-left: 8px;
}
.collection-art img {
  border-radius: 0;
}
.result-art img {
  box-shadow: none;
  transform: none;
}
.control-login-art {
  display: grid;
  place-items: center;
}

.switch-row {
  border-color: var(--line);
}
.switch-row strong {
  color: var(--text);
  font-weight: 700;
}
.switch-row small {
  color: var(--muted);
}
.switch-control i {
  border: 2px solid var(--line);
  background: var(--raised);
  border-radius: 0;
}
.switch-control i::after {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
  background: var(--text);
  border-radius: 0;
}
.switch-control input:checked + i {
  background: var(--red);
  border-color: var(--line);
}
.switch-control input:checked + i::after {
  background: var(--text);
  transform: translateX(18px);
}
.table-filters > select {
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--text);
}
.key-tools button,
.control-footer {
  color: var(--muted);
}
.inline-feedback,
.inline-feedback.visible {
  background: #dbe7cb;
  color: #22361e;
  border: 2px solid var(--line);
  border-radius: 0;
}
.inline-feedback.error {
  background: #ffd1c5;
  color: #742416;
  border-color: var(--line);
}
.credential-row {
  background: var(--raised);
  border: 2px solid var(--line);
  border-radius: 0;
  color: var(--text);
}
.credential-row small {
  color: var(--muted);
}
.credential-copy {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.copy-notice,
.copy-notice.visible {
  background: #dbe7cb;
  color: #22361e;
  border: 2px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.result-art::before {
  display: none;
}
.result-art.wink img {
  border: 2px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.mode-option strong {
  font-family: Arial, sans-serif;
  font-weight: 900;
}
.admin-card .mode-option input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
}

.machine-panel {
  display: flex;
  flex-direction: column;
}
.machine-topline,
.machine-bottomline {
  flex-shrink: 0;
}
.wheel-stage {
  flex: 1 0 auto;
}

/* Flat, printed wheel and transparent prize cutouts. */
.wheel-stage {
  background-color: var(--surface);
  background-image:
    linear-gradient(#1717170a 1px, transparent 1px),
    linear-gradient(90deg, #1717170a 1px, transparent 1px);
  background-size: 26px 26px;
  position: relative;
}
.wheel-stamp {
  position: absolute;
  left: 20px;
  top: 20px;
  font:
    900 23px/0.9 Arial,
    sans-serif;
  letter-spacing: -1px;
  transform: rotate(-7deg);
  color: var(--text);
  border: 2px solid var(--line);
  padding: 8px;
  background: #f5d75b;
}
.wheel-case {
  background: var(--surface);
  padding: 8px;
  border: 3px solid var(--line);
  box-shadow: 5px 5px 0 var(--line);
}
.wheel-face {
  border: 3px solid var(--line);
}
.wheel-center {
  border-radius: 0;
  width: 60px;
  height: 60px;
  background: var(--red);
  border: 3px solid var(--line);
  box-shadow: 3px 3px 0 var(--line);
  color: var(--text);
  gap: 4px;
}
.wheel-center > svg {
  width: 28px;
  height: 28px;
}
.wheel-center > span {
  color: var(--text);
  font-size: 5px;
  letter-spacing: 0.8px;
}
.wheel-pointer {
  top: -12px;
  width: 34px;
  height: 38px;
}
.wheel-pointer::before {
  background: var(--text);
}
.wheel-pointer::after {
  content: '';
  position: absolute;
  inset: 4px 5px 9px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.wheel-key {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 12px 14px;
  background: var(--surface);
  border-top: 2px solid var(--line);
  font:
    700 9px 'Courier New',
    monospace;
}
.wheel-key > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wheel-key b {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
}
.key-wink {
  background: var(--surface);
}
.key-cash {
  background: var(--red);
}
.key-zonk {
  background: var(--text);
}
.featured-wink img,
.collection-card.wink img,
.result-art.wink img {
  border: 0;
  background: transparent;
  padding: 0;
  object-fit: contain;
}
.featured-cash img {
  mix-blend-mode: normal;
  object-fit: contain;
}
.collection-art img,
.history-item > img,
.result-art img {
  background: transparent;
  object-fit: contain;
  border: 0;
  box-shadow: none;
}
.history-item > img {
  padding: 3px;
}
.result-art img {
  width: 145px;
  max-width: 145px;
  height: 135px;
}
.result-art.wink img {
  width: 100px;
  height: 100px;
}
.featured-cash img {
  width: 135px;
  height: 135px;
  right: 10px;
  bottom: 18px;
}
.collection-card.cash img {
  width: 190px;
  height: 180px;
}
.collection-card.zonk img {
  width: 170px;
  height: 170px;
}
@media (max-width: 1100px) {
  .wheel-stamp {
    font-size: 18px;
    left: 12px;
    top: 12px;
    padding: 6px;
  }
  .wheel-key {
    font-size: 8px;
    gap: 9px 12px;
  }
  .featured-cash img {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 850px) and (min-width: 621px) {
  .wheel-stamp {
    display: none;
  }
  .wheel-key {
    font-size: 7px;
    padding: 12px 7px;
    gap: 8px;
  }
}
@media (max-width: 620px) {
  .wheel-stamp {
    left: 12px;
    top: 12px;
    font-size: 15px;
    padding: 5px;
  }
  .wheel-key {
    font-size: 8px;
    gap: 10px;
    padding: 12px 8px;
  }
  .wheel-center {
    width: 52px;
    height: 52px;
  }
  .wheel-center > svg {
    width: 23px;
    height: 23px;
  }
  .wheel-center > span {
    font-size: 4px;
  }
  .featured-cash img {
    width: 145px;
    height: 145px;
    right: 14px;
    bottom: 12px;
  }
}
@media (max-width: 370px) {
  .wheel-key {
    font-size: 7px;
    gap: 9px;
  }
  .wheel-stamp {
    font-size: 13px;
    left: 10px;
    top: 10px;
  }
  .wheel-center {
    width: 47px;
    height: 47px;
  }
  .wheel-center > svg {
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 1101px) {
  .wheel-assembly {
    width: 380px;
    height: 380px;
  }
  .wheel-stage {
    height: 440px;
  }
}
@media (max-width: 620px) {
  .wheel-assembly {
    width: min(320px, calc(100vw - 78px));
    height: min(320px, calc(100vw - 78px));
  }
}

/* Short, graphic motion. The logo stays still and controls stay available. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .club-header {
    animation: brutal-arrive 0.32s cubic-bezier(0.2, 0.7, 0.25, 1) both !important;
  }
  .motion-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.42s ease,
      transform 0.42s cubic-bezier(0.2, 0.7, 0.25, 1) !important;
  }
  .motion-ready .reveal.visible {
    opacity: 1;
    transform: none;
  }
  .motion-ready .play-layout > .reveal:nth-child(2) {
    transition-delay: 75ms !important;
  }
  .motion-ready .collection-card:nth-child(2) {
    transition-delay: 65ms !important;
  }
  .motion-ready .collection-card:nth-child(3) {
    transition-delay: 130ms !important;
  }
  .motion-ready .faq-list > details:nth-child(even) {
    transition-delay: 55ms !important;
  }
  .club-app .page.entering {
    animation: brutal-arrive 0.28s cubic-bezier(0.2, 0.7, 0.25, 1) !important;
  }
  .admin-body .admin-pane.active {
    animation: brutal-arrive 0.24s ease-out !important;
  }
  .club-app :is(.spin-button, .round-link, .secondary-button, .nav-link, .text-link),
  .admin-body :is(.spin-button, .secondary-button, .admin-tabs button) {
    transition:
      background-color 0.14s,
      color 0.14s,
      box-shadow 0.14s,
      transform 0.14s !important;
  }
  .club-app .spin-button:hover:not(:disabled) {
    transform: translate(-2px, -2px);
  }
  .club-app .spin-button:active:not(:disabled) {
    transform: translate(3px, 3px);
  }
  .club-app .round-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--line);
  }
  .club-app .collection-card {
    transition:
      box-shadow 0.16s,
      transform 0.16s,
      opacity 0.42s !important;
  }
  .club-app .collection-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--line);
  }
  .club-app .toast,
  .admin-body .toast {
    transition:
      opacity 0.18s,
      transform 0.18s cubic-bezier(0.2, 0.7, 0.25, 1) !important;
  }
  .club-app :is(.result-dialog, .contact-dialog)[open],
  .admin-body .confirm-dialog[open] {
    animation: brutal-dialog 0.25s cubic-bezier(0.2, 0.7, 0.25, 1) both !important;
  }
  .club-app .result-dialog[open]::backdrop,
  .club-app .contact-dialog[open]::backdrop,
  .admin-body .confirm-dialog[open]::backdrop {
    animation: brutal-dim 0.2s ease-out both !important;
  }
  .club-app .result-dialog[open][data-fresh='true'] .result-art img {
    animation: brutal-prize 0.52s cubic-bezier(0.2, 0.7, 0.25, 1) 0.06s both !important;
    transform-origin: center;
  }
  .club-app .result-dialog[open][data-result-type='zonk'] .result-art img {
    animation: brutal-zonk 0.48s ease-out 0.06s both !important;
  }
  .club-app .result-dialog[open] #resultTitle {
    animation: brutal-arrive 0.3s ease-out 0.1s both !important;
  }
  .club-app .result-dialog[open] .claim-box.visible {
    animation: brutal-stamp 0.3s ease-out 0.15s both !important;
  }
  .club-app .copy-notice.visible,
  .admin-body .inline-feedback.visible {
    animation: brutal-arrive 0.22s ease-out both !important;
  }
  .club-app .copied {
    animation: brutal-press 0.2s ease-out !important;
  }
  .spinning .wheel-pointer {
    animation: brutal-tick 0.16s ease-in-out infinite alternate !important;
    transform-origin: 50% 15%;
  }
  .spinning .wheel-stamp {
    animation: brutal-stamp 0.28s ease-out !important;
  }
}
#resultOverline {
  display: inline-flex;
  justify-content: center;
  border: 2px solid var(--line);
  padding: 7px 10px;
  background: var(--red);
  color: var(--text);
  font:
    700 9px 'Courier New',
    monospace;
  letter-spacing: 1px;
}
.result-dialog[data-result-type='zonk'] #resultOverline {
  background: var(--raised);
}
@keyframes brutal-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes brutal-dialog {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes brutal-dim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes brutal-prize {
  0% {
    opacity: 0;
    transform: translateY(-16px) rotate(-9deg) scale(1.18);
  }
  55% {
    opacity: 1;
    transform: translateY(2px) rotate(3deg) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}
@keyframes brutal-zonk {
  0% {
    opacity: 0;
    transform: translateX(-12px) rotate(-7deg) scale(0.9);
  }
  40% {
    opacity: 1;
    transform: translateX(7px) rotate(4deg) scale(1.03);
  }
  70% {
    transform: translateX(-3px) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes brutal-stamp {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(1.07);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes brutal-press {
  50% {
    transform: translateY(2px);
  }
  100% {
    transform: none;
  }
}
@keyframes brutal-tick {
  from {
    transform: translateX(-50%) rotate(-3deg);
  }
  to {
    transform: translateX(-50%) rotate(3deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .club-app .reveal {
    opacity: 1;
    transform: none;
  }
  .club-app .page,
  .admin-body .admin-pane {
    scroll-behavior: auto;
  }
}