:root {
  color-scheme: light;
  --bg: #f7f04a;
  --panel: #fff8df;
  --panel-2: #111111;
  --text: #111111;
  --muted: #525252;
  --line: #111111;
  --accent: #00b894;
  --accent-2: #ff4f3d;
  --gold: #ff4f3d;
  --danger: #d82020;
  --shadow: 8px 8px 0 #111111;
}

* {
  letter-spacing: 0;
}

body {
  color: var(--text);
  background: var(--bg) !important;
  font-weight: 400;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

.panel,
.game,
.section,
.games-card,
.list-panel,
.results-dialog,
.modal-dialog {
  border: 3px solid var(--line) !important;
  border-radius: 8px !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow) !important;
}

.game {
  box-shadow: inset 0 0 0 3px var(--line) !important;
}

header {
  border-bottom: 3px solid var(--line) !important;
  background: var(--panel) !important;
}

.brand,
h1,
h2,
.target,
.countdown,
.live-time,
.result-value,
.balance strong,
.games-card > strong,
.stat strong,
.keypad-display strong,
.online-stat strong {
  color: var(--text) !important;
  font-family: "Garet Heavy", ui-sans-serif, system-ui, sans-serif;
  font-weight: 950;
}

.eyebrow {
  color: var(--accent-2) !important;
  font-weight: 950 !important;
}

p,
.muted,
.small,
label,
.empty,
.auth-note,
.meta {
  color: var(--muted) !important;
}

a {
  color: var(--text) !important;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

button,
.button-link,
.nav-link {
  border: 3px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  background: #ffffff !important;
  box-shadow: 4px 4px 0 var(--line);
  font-weight: 950 !important;
  text-transform: uppercase;
}

button:hover:not(:disabled),
.button-link:hover,
.nav-link:hover {
  transform: translate(-2px, -2px) !important;
  filter: none !important;
  box-shadow: 6px 6px 0 var(--line);
}

button:active:not(:disabled),
.button-link:active,
.nav-link:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--line);
}

button:disabled {
  background: #d9d9d9 !important;
  color: #6b6b6b !important;
  box-shadow: none;
}

button:not(.secondary):not(.icon-button):not(.close-button),
.button-link:not(.secondary),
.hit-button {
  background: var(--accent) !important;
}

.hit-button {
  min-height: 86px !important;
  background: var(--accent-2) !important;
}

.secondary,
.close-button,
.icon-button {
  color: #ffffff !important;
  background: var(--panel-2) !important;
}

.danger {
  color: #ffffff !important;
  background: var(--danger) !important;
}

input {
  border: 3px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  background: #ffffff !important;
  font-weight: 800;
}

input:focus {
  border-color: var(--line) !important;
  box-shadow: 0 0 0 4px var(--accent) !important;
}

input[readonly] {
  color: var(--text) !important;
  background: #eee7cf !important;
}

.stat,
.automation-note,
.state-note,
.notice-panel,
.online-stat,
.score,
.list-row,
.list-item,
.keypad-display,
.upload-box {
  border: 3px solid var(--line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.status-chip,
.rank {
  border: 2px solid var(--line) !important;
  color: var(--text) !important;
  background: #f7f04a !important;
}

.status-chip.active,
.list-row.active {
  color: var(--text) !important;
  border-color: var(--line) !important;
  background: #9ff3dc !important;
}

.target,
.payout-note,
.notice-time,
.note-time,
.message,
.pill,
.negative {
  color: var(--accent-2) !important;
}

.result-value,
.positive {
  color: var(--accent) !important;
}

.results-modal,
.modal {
  background: rgba(17, 17, 17, .72) !important;
}

.dashboard-grid {
  border-top: 3px solid var(--line) !important;
  border-left: 3px solid var(--line) !important;
}

.dashboard-grid .section {
  border-top: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

.games-card {
  background: #9ff3dc !important;
}

.balance {
  border-color: var(--line) !important;
}

.topbar,
main {
  color: var(--text);
}

@media (max-width: 620px) {
  :root {
    --shadow: 5px 5px 0 #111111;
  }
}