/* Sand Arena website. Native game layout and input remain inside the iframe. */
:root {
  color-scheme: dark;
  --bg: #121617;
  --sidebar: #181c1d;
  --surface: #1b2021;
  --raised: #23292a;
  --line: #303637;
  --text: #f3f0e9;
  --muted: #9aa2a2;
  --gold: #e6bb72;
  --gold-dark: #b58d4b;
  --green: #94c7a4;
  --red: #ed9c91;
  --font:
    "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --rune-font: var(--font);
  --sidebar-width: 224px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button,
fieldset {
  margin: 0;
}
fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  flex-shrink: 0;
}
button {
  border: 0;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a,
button {
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    transform 0.18s;
}
::selection {
  background: #e6bb7240;
  color: #fff;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
input:focus-visible,
select:focus-visible {
  outline-offset: 1px;
}
#page-title:focus {
  outline: none;
}
/* These controls sit inside clipped frames, so their focus ring is drawn inside. */
.game-art:focus-visible,
.favourite-button:focus-visible,
.game-filters button:focus-visible,
.connection-details > summary:focus-visible,
.credential-fields input:focus-visible,
.copy-button:focus-visible,
#collapse-game:focus-visible,
.nav-scrim:focus-visible {
  outline-offset: -3px;
}
.icon {
  width: 20px;
  height: 20px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -70px;
  z-index: 2000;
  background: var(--gold);
  color: #211c14;
  padding: 12px 20px;
  border-radius: 5px;
}
.skip-link:focus {
  top: 15px;
}
.site-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  background: var(--sidebar);
  border-right: 1px solid #2b3031;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 31px 18px 22px;
  overflow-y: auto;
}
.brand {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  flex-shrink: 0;
  color: var(--gold);
  border-radius: 3px;
}
.brand-logo {
  width: 188px;
  height: auto;
  transition: filter 0.18s;
}
.brand:hover .brand-logo {
  filter: brightness(1.1);
}
.site-sidebar > .brand {
  margin: 0 auto;
}
.sidebar-caption {
  font-size: 8px;
  letter-spacing: 2px;
  color: #93938a;
  margin: 17px 12px 29px;
  text-align: center;
}
.main-nav {
  display: grid;
  gap: 7px;
}
.main-nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 46px;
  padding: 0 13px;
  border-radius: 6px;
  font-size: 13px;
  color: #aab0ac;
}
.main-nav a:hover,
.sidebar-help:hover {
  color: var(--text);
  background: #252a29;
}
.main-nav a[aria-current="page"] {
  color: var(--gold);
  background: #e6bb720d;
  box-shadow: inset 2px 0 var(--gold);
}
.main-nav .icon {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}
.nav-live {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  margin-left: auto;
}
.sidebar-divider {
  height: 1px;
  background: var(--line);
  margin: 27px 13px 18px;
}
.sidebar-help {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 13px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
}
.sidebar-help .icon {
  width: 18px;
  height: 18px;
}
.sidebar-bottom {
  margin-top: auto;
  padding: 50px 12px 0;
}
.practice-status {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--green);
}
.status-light {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px #94c7a408;
  flex-shrink: 0;
}
body[data-world-state="error"] .world-status .status-light {
  background: var(--red);
  box-shadow: 0 0 0 4px #ed9c9108;
}
body[data-world-state="connecting"] .world-status .status-light,
body[data-world-state="reconnecting"] .world-status .status-light,
body[data-world-state="login-required"] .world-status .status-light,
body[data-world-state="signed-out"] .world-status .status-light {
  background: var(--gold);
  box-shadow: 0 0 0 4px #e6bb7208;
}
.sidebar-bottom p {
  font-size: 11px;
  color: #a0a59e;
  line-height: 1.7;
  margin: 11px 0 7px;
}
.sidebar-bottom small {
  display: block;
  font-size: 10px;
  color: #7f8784;
  line-height: 1.6;
}
.sidebar-domain {
  display: block;
  margin-top: 25px;
  font-size: 10px;
  color: #707976;
  letter-spacing: 0.4px;
}
.site-body {
  margin-left: var(--sidebar-width);
  min-width: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 80px;
  padding: 0 36px;
  border-bottom: 1px solid #292e2f;
  background: #121617f5;
  backdrop-filter: blur(12px);
}
.header-title,
.header-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-title h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.world-status {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10px;
  color: #aab1a8;
}
.header-wallet {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: #d1d3c9;
}
.header-wallet:hover {
  color: var(--gold);
}
.header-wallet .icon {
  width: 18px;
  height: 18px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 43px;
  padding: 11px 21px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--gold);
  color: #242015;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  white-space: normal;
}
.button .icon {
  width: 17px;
  height: 17px;
}
.button:hover:not(:disabled) {
  background: #f2cf91;
  transform: translateY(-1px);
}
.button-small {
  min-height: 37px;
  font-size: 11px;
  padding: 10px 15px;
}
.button-outline {
  border-color: #505348;
  background: transparent;
  color: #ddd8c8;
}
.button-outline:hover:not(:disabled) {
  background: #34382f;
  color: #f5e0b6;
}
.quiet-button,
.text-link {
  background: none;
  color: var(--gold);
  font-size: 11px;
  padding: 0;
}
.quiet-button:hover,
.text-link:hover {
  color: #f7dfb6;
}
.text-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  font-weight: 550;
}
.text-link .icon {
  width: 15px;
  height: 15px;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 35px;
  height: 35px;
  color: #c4c9bc;
}
.icon-button:hover {
  color: var(--gold);
  border-color: #77715a;
  background: #2b302b;
}
.menu-toggle {
  display: none;
}
.nav-close {
  display: none;
}
.page-shell {
  max-width: 1520px;
  margin: 0 auto;
  padding: 28px 36px 0;
}
.eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 1.4px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 9px;
}
.lobby-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 355px;
  overflow: hidden;
  background: #29312b;
  border: 1px solid #48503a;
  border-radius: 13px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 32px 0 29px 36px;
}
.hero-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b9c3a7;
  font-size: 8px;
  letter-spacing: 1.9px;
  font-weight: 600;
}
.hero-kicker > span {
  height: 4px;
  width: 4px;
  background: var(--gold);
  border-radius: 50%;
}
.hero-copy h2 {
  font-size: clamp(37px, 4.3vw, 59px);
  line-height: 1.07;
  font-weight: 650;
  letter-spacing: -2.4px;
  margin: 17px 0 16px;
}
.hero-copy h2 em {
  font-style: normal;
  color: #efcb8a;
}
.hero-copy > p {
  color: #bbc4b7;
  font-size: 12px;
  line-height: 1.75;
  max-width: 338px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-top: 22px;
}
.hero-actions .text-link {
  font-size: 10px;
  color: #e3dfcc;
}
.hero-facts {
  display: flex;
  gap: 19px;
  margin-top: 28px;
  color: #afb9a5;
  font-size: 9px;
}
.hero-facts > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-facts .icon {
  width: 13px;
  height: 13px;
  color: #d6c79a;
}
.hero-art {
  position: relative;
  min-width: 0;
  isolation: isolate;
}
.hero-art img,
.hero-art canvas {
  position: absolute;
  width: 115%;
  max-width: none;
  height: 108%;
  object-fit: contain;
  bottom: -5%;
  right: -5%;
  filter: drop-shadow(0 18px 16px #0d110e66);
  z-index: 1;
}
.hero-art canvas {
  visibility: hidden;
  pointer-events: none;
}
.hero-art.is-animated canvas {
  visibility: visible;
}
.hero-art.is-animated .hero-still {
  visibility: hidden;
}
.hero-motion-toggle {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 3;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #d7c58b40;
  border-radius: 5px;
  background: #171e19e6;
  color: #d7d3bd;
  font-size: 10px;
}
.hero-motion-toggle:hover {
  background: #30392e;
  color: #fff1cf;
  border-color: #d7c58b80;
}
@media (max-width: 620px) {
  .hero-motion-toggle {
    top: auto;
    bottom: 12px;
    min-height: 40px;
  }
}
.hero-arch {
  position: absolute;
  right: 18%;
  bottom: -40px;
  width: 240px;
  height: 365px;
  border: 1px solid #a2986233;
  border-radius: 125px 125px 0 0;
  background: #9ca07208;
  transform: rotate(13deg);
}
.hero-orbit {
  position: absolute;
  right: 10%;
  top: 24%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: #bbae4917;
  filter: blur(50px);
}
.hero-seal {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  transform: rotate(-7deg);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #aaa98b;
  text-align: center;
}
.hero-seal b {
  font-weight: 500;
  display: block;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #d4c7a3;
  margin-top: 2px;
}
.lobby-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 17px 0 32px;
  padding: 0 3px;
  font-size: 10px;
  color: #929e92;
}
.lobby-note > .icon {
  width: 15px;
  height: 15px;
  color: #aeb995;
}
.lobby-note strong {
  color: #bfc9b7;
  font-weight: 500;
}
.lobby-note a {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  margin-left: auto;
  color: #cbc6aa;
  font-size: 9px;
}
.lobby-note a:hover {
  color: var(--gold);
}
.lobby-note a .icon {
  width: 13px;
  height: 13px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 21px;
}
.section-heading h2 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.section-heading p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}
.game-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 230px;
  padding: 0 13px;
  height: 39px;
  border: 1px solid #636b69;
  border-radius: 6px;
  background: #1a1f20;
  color: #7f8a87;
}
.game-search .icon {
  width: 16px;
  height: 16px;
}
.game-search input {
  border: 0;
  padding: 0;
  min-width: 0;
  background: none;
  min-height: 35px;
  font-size: 11px;
  outline: none;
  width: 100%;
}
.game-search:focus-within {
  border-color: var(--gold);
}
.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.game-filters {
  display: flex;
  gap: 6px;
}
.game-filters button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 13px;
  min-height: 35px;
  font-size: 10px;
  color: #a4aaa4;
  background: transparent;
  white-space: nowrap;
}
.game-filters button:hover {
  background: #222929;
  color: #e6e5d9;
}
.game-filters button[aria-pressed="true"] {
  color: #e6cf9f;
  border-color: #74684a;
  background: #e6bb720c;
}
.game-filters .icon {
  height: 13px;
  width: 13px;
}
.game-count {
  color: #7e8883;
  font-size: 10px;
  white-space: nowrap;
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.game-card {
  position: relative;
  min-width: 0;
  border: 1px solid #2c3232;
  border-radius: 9px;
  overflow: hidden;
  background: #1b2021;
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
.game-card:hover,
.game-card:focus-within {
  border-color: #706044;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px #0002;
}
.game-art {
  position: relative;
  display: block;
  width: 100%;
  height: 174px;
  padding: 0;
  overflow: hidden;
  background: var(--card-tone);
}
.tone-amber {
  --card-tone: #3b3429;
}
.tone-purple {
  --card-tone: #342b3e;
}
.tone-blue {
  --card-tone: #2a3b44;
}
.tone-gold {
  --card-tone: #40372a;
}
.tone-rose {
  --card-tone: #3d2d34;
}
.tone-green {
  --card-tone: #2e3b31;
}
.tone-slate {
  --card-tone: #30383e;
}
.tone-olive {
  --card-tone: #393c2d;
}
.tone-indigo {
  --card-tone: #303449;
}
.game-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateY(7px) scale(1.06);
  transition: transform 0.28s;
  filter: drop-shadow(0 8px 6px #0003);
}
.game-card:hover .game-art img {
  transform: translateY(3px) scale(1.11);
}
.game-type {
  position: absolute;
  top: 13px;
  left: 14px;
  z-index: 1;
  color: #eee9ddba;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.game-play {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 43px;
  width: 43px;
  transform: translate(-50%, -35%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f2cf91;
  color: #342619;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  box-shadow: 0 3px 18px #0006;
}
.game-art:hover .game-play,
.game-art:focus-visible .game-play {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.game-play .icon {
  height: 19px;
  width: 19px;
  margin-left: -2px;
}
.favourite-button {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #11161535;
  color: #d9d7c799;
  width: 33px;
  height: 33px;
}
/* A larger tap area around the star, so a near miss does not open the game. */
.favourite-button::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.favourite-button .icon {
  width: 15px;
  height: 15px;
}
.favourite-button:hover {
  background: #1116158a;
  color: var(--gold);
}
.favourite-button[aria-pressed="true"] {
  color: var(--gold);
}
.favourite-button[aria-pressed="true"] .icon {
  fill: var(--gold);
}
.game-card-body {
  padding: 13px 14px 16px;
}
.game-card-body > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.game-card-body > button:hover {
  color: var(--gold);
}
.game-card-body .icon {
  width: 14px;
  height: 14px;
  color: #6b7672;
}
.game-card-body p {
  font-size: 11px;
  color: #959e96;
  margin-top: 5px;
  line-height: 1.55;
}
.game-empty {
  padding: 45px 20px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
}
.lobby-bottom-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.duel-banner {
  display: flex;
  align-items: center;
  gap: 19px;
  background: #232b26;
  border: 1px solid #384039;
  border-radius: 9px;
  padding: 25px;
}
.duel-medallion {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid #79725466;
  border-radius: 50%;
  background: #323b2d;
  color: var(--gold);
  flex-shrink: 0;
}
.duel-medallion .icon {
  width: 29px;
  height: 29px;
}
.duel-banner h3 {
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -0.3px;
}
.duel-banner p {
  font-size: 11px;
  line-height: 1.7;
  color: #a4b0a0;
  margin-top: 5px;
  max-width: 270px;
}
.duel-banner .text-link {
  margin-top: 12px;
}
.fairness-callout {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  background: #1c2223;
  border-radius: 9px;
  padding: 25px;
}
.fairness-callout:hover {
  border-color: #6c6b51;
  background: #22292a;
}
.fairness-callout > .icon:first-child {
  color: #b9bd92;
  width: 30px;
  height: 30px;
}
.fairness-callout h3 {
  font-size: 14px;
  font-weight: 550;
}
.fairness-callout p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 6px;
}
.fairness-callout > .icon:last-child {
  color: #919884;
  width: 17px;
  height: 17px;
  margin-left: auto;
}
.help-section {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 50px;
  margin: 55px 0 45px;
  padding-top: 4px;
}
.help-intro h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.25;
  max-width: 250px;
}
.help-intro > p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 12px;
  max-width: 280px;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 0 0 17px;
  margin-bottom: 17px;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-size: 12px;
  list-style: none;
  color: #dadbd0;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary .icon {
  width: 15px;
  height: 15px;
  color: #999c84;
  transition: transform 0.2s;
}
.faq-list details[open] summary .icon {
  transform: rotate(90deg);
}
.faq-list details p {
  font-size: 11px;
  line-height: 1.9;
  color: #a3aca0;
  padding-top: 13px;
  max-width: 540px;
}
.faq-list details a {
  color: var(--gold);
}
.page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 7px 0 27px;
}
.page-intro h2 {
  font-size: 33px;
  font-weight: 550;
  letter-spacing: -1.1px;
  line-height: 1.2;
}
.page-intro p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 10px;
  max-width: 590px;
}
.page-intro .session-status {
  font-size: 11px;
  color: var(--green);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}
.panel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 61px;
  padding: 12px 23px;
  border-bottom: 1px solid var(--line);
}
.panel-bar > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.panel-bar h2 {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.2px;
}
.small-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border: 1px solid #68664a66;
  border-radius: 3px;
  font-size: 8px;
  letter-spacing: 0.7px;
  color: #cfc19b;
  white-space: nowrap;
}
.panel-caption {
  font-size: 8px;
  letter-spacing: 1px;
  color: #849084;
}
.world-actions {
  display: flex;
  align-items: center;
  gap: 15px !important;
}
.world-actions .quiet-button {
  font-size: 10px;
  white-space: nowrap;
}
.world-stage {
  position: relative;
  background: #101310;
}
.onboarding {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 440px;
  background: #242d26;
}
.arena-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.arena-art img {
  position: absolute;
  right: -7%;
  bottom: -8%;
  width: 65%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 15px #0004);
}
.onboarding-content {
  position: relative;
  padding: 53px 43px 30px;
  max-width: 530px;
}
.onboarding h2 {
  font-size: 52px;
  line-height: 1.06;
  font-weight: 550;
  letter-spacing: -2px;
  color: #f0e1c6;
}
.onboarding h2 em {
  font-style: normal;
  color: var(--gold);
}
.onboarding-content > p {
  font-size: 12px;
  color: #b2beab;
  line-height: 1.85;
  margin: 19px 0 27px;
  max-width: 315px;
}
.onboarding label {
  font-size: 10px;
}
.entry-controls {
  display: flex;
  gap: 10px;
}
.entry-controls input {
  min-width: 0;
  width: 200px;
  background: #19211a;
  border-color: #6d785e;
  font-size: 12px;
}
.entry-controls .button {
  white-space: nowrap;
}
.onboarding-foot {
  display: flex;
  gap: 20px;
  margin-top: 27px;
  padding-top: 17px;
  border-top: 1px solid #6d78612e;
  font-size: 9px;
  color: #a1b19b;
}
.onboarding-foot i {
  display: inline-block;
  background: #98ad81;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin: 0 5px 2px 0;
}
.client-wrap {
  position: relative;
  width: 100%;
  height: min(65vw, 650px);
  min-height: 503px;
  background: #000;
  overflow: hidden;
}
.client-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
}
#game-client {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: #000;
}
.client-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #161b18;
  color: #c1c9b5;
  z-index: 1;
  font-size: 13px;
  pointer-events: none;
}
.world-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 23px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: #98a58f;
  background: #1d241f;
}
.world-footer p > span {
  color: #c3caae;
}
.world-footer > span {
  font-size: 9px;
  white-space: nowrap;
  color: #83907e;
}
.connection-details {
  border-top: 1px solid var(--line);
}
.connection-details > summary {
  cursor: pointer;
  padding: 16px 23px;
  font-size: 11px;
  color: #c7cbbd;
}
.connection-details > summary span {
  float: right;
  font-size: 10px;
  color: #83907e;
}
.credentials {
  padding: 5px 23px 22px;
  background: #1b211c;
}
.credentials > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 13px;
}
.credentials h3 {
  font-size: 12px;
  font-weight: 500;
}
.credentials p {
  font-size: 10px;
  color: #9daa92;
}
.credential-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.credential-fields label > span {
  display: flex;
  align-items: center;
  border: 1px solid #65725a;
  border-radius: 5px;
  overflow: hidden;
  background: #151b16;
}
.credential-fields input {
  border: 0;
  border-radius: 0;
  background: none;
  min-width: 0;
  font:
    12px ui-monospace,
    monospace;
}
.copy-button {
  align-self: stretch;
  flex-shrink: 0;
  background: #293326;
  color: #c3d0b2;
  font-size: 10px;
  padding: 0 12px;
  border-left: 1px solid #3c4b33;
}
.copy-button:hover {
  background: #3c4a34;
}
.credential-note {
  padding-top: 10px;
}
.play-tips {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 22px 3px;
  color: #9da995;
  font-size: 11px;
}
.play-tips a:hover {
  color: var(--gold);
}
label {
  display: block;
  font-size: 11px;
  color: #bec5b8;
  margin-bottom: 7px;
}
input,
select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  background: #141a1b;
  border: 1px solid #636b69;
  border-radius: 5px;
  color: #e5e5d9;
  font-size: 12px;
}
input::placeholder {
  color: #7f8a87;
}
select {
  cursor: pointer;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field {
  min-width: 0;
}
.form-message {
  font-size: 11px;
  color: var(--green);
  line-height: 1.65;
  margin-top: 13px;
  overflow-wrap: anywhere;
}
.form-message:empty {
  display: none;
}
.form-message.error {
  color: var(--red);
}
.field-hint {
  color: #98a58f;
  font-size: 10px;
  margin: 10px 0 15px;
  line-height: 1.6;
}
.account-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  align-items: start;
}
.account-primary,
.account-secondary {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.player-panel {
  padding: 24px;
}
.player-heading {
  display: flex;
  gap: 15px;
  align-items: center;
  min-width: 0;
}
.player-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #e6bb720d;
  border: 1px solid #80724d;
  color: var(--gold);
  font-size: 24px;
}
.player-heading .eyebrow {
  margin-bottom: 3px;
  font-size: 8px;
}
.player-heading h2 {
  font-size: 20px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.player-heading p {
  font-size: 11px;
  color: #94a08b;
  margin-top: 3px;
}
.signout-button {
  width: 100%;
  display: block;
  margin-top: 19px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.signout-button > span {
  float: right;
}
.balance-panel {
  padding-top: 24px;
}
.side-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.side-panel-heading h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.balance-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 24px;
}
.balance-row {
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
}
.balance-row:last-child {
  border: 0;
}
.asset-icon {
  display: block;
  width: 37px;
  height: 37px;
  flex-shrink: 0;
  object-fit: contain;
}
.asset-name {
  font-size: 12px;
  font-weight: 550;
  color: #d8dcd0;
}
.asset-name small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #899780;
  margin-top: 3px;
}
.asset-amount {
  margin-left: auto;
  text-align: right;
  font: 17px/1.3 var(--font);
  font-variant-numeric: tabular-nums;
  max-width: 60%;
  overflow-wrap: anywhere;
}
.asset-amount small {
  display: block;
  font: 10px/1.6 var(--font);
  color: #8e9b85;
  margin-top: 3px;
}
.balance-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: #222a22;
  border-top: 1px solid #394334;
  font-size: 11px;
  color: #bdc6b0;
}
.balance-foot p > span {
  display: block;
  font-size: 10px;
  color: #8e9e81;
  margin-top: 2px;
}
.cashier-panel,
.wallet-panel {
  padding: 24px;
}
.cashier-panel h2,
.wallet-panel h2 {
  font-size: 23px;
  letter-spacing: -0.5px;
  font-weight: 550;
  margin: 3px 0 14px;
}
.cashier-panel > p,
.wallet-help {
  font-size: 12px;
  color: #a2b098;
  line-height: 1.8;
}
.cashier-panel form {
  margin-top: 20px;
}
.cashier-panel .button {
  width: 100%;
  margin-top: 13px;
}
.cashier-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 10px;
  color: #929f86;
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: 20px;
  line-height: 1.8;
}
.cashier-note > span {
  font-size: 17px;
  color: #bdb88f;
}
.wallet-safety {
  font-size: 11px;
  color: #c9c0a0;
  background: #e6bb7209;
  border: 1px solid #70634966;
  border-radius: 5px;
  padding: 12px 14px;
  line-height: 1.8;
  margin-bottom: 14px;
}
.wallet-help {
  font-size: 11px;
  margin: 13px 0 20px;
}
.wallet-panel label {
  margin-top: 17px;
}
.wallet-panel label small {
  font-size: 10px;
  color: #98a489;
}
.wallet-connect-row,
.wallet-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.wallet-connect-row .button {
  min-height: 38px;
  font-size: 11px;
  padding: 9px 12px;
}
#wallet-sign-in,
#wallet-link {
  width: 100%;
  margin-top: 13px;
}
.wallet-bound {
  padding: 12px;
  background: #141a18;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 11px;
  margin-top: 12px;
}
.wallet-bound strong {
  display: block;
  color: #c2c6a6;
  margin-bottom: 6px;
}
.wallet-bound span {
  display: block;
  font:
    11px/1.7 ui-monospace,
    monospace;
  color: #9eae93;
  overflow-wrap: anywhere;
}
.account-tip {
  padding: 2px 6px;
  color: #919e86;
  font-size: 11px;
  line-height: 1.85;
}
.account-tip h3 {
  font-size: 12px;
  font-weight: 500;
  color: #c9cbb1;
  margin-bottom: 7px;
}
.operator-link {
  display: block;
  font-size: 12px;
  color: var(--gold);
}
.table-wrap,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
th {
  padding: 13px 21px;
  font-size: 9px;
  font-weight: 500;
  color: #a3b08f;
  background: #151b18;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 16px 21px;
  border-bottom: 1px solid #303a2e;
  color: #d1d9c5;
  font-size: 12px;
}
tr:last-child td {
  border-bottom: 0;
}
td > small {
  display: block;
  color: #899a7e;
  font-size: 10px;
  margin-top: 3px;
}
.empty-history {
  height: 160px;
  text-align: center !important;
  color: #8d9d80;
  font-size: 12px;
}
.empty-history > span {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}
.result-tag {
  display: inline-block;
  font-size: 9px;
  border: 1px solid #497355;
  border-radius: 4px;
  padding: 3px 7px;
  color: #a6d0ac;
  background: #244b2c30;
  white-space: nowrap;
}
.result-tag.loss {
  border-color: #60584c;
  color: #bfb19e;
  background: #4a3d2922;
}
.activity-panel {
  margin-top: 25px;
}
.activity-intro {
  padding: 22px 24px 12px;
  color: #b3bea6;
  font-size: 12px;
}
.activity-scope {
  font-size: 10px;
  color: #8fa17f;
  margin-top: 7px;
}
.activity-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 12px 24px;
}
.activity-filters select {
  margin-top: 6px;
}
.activity-explainer {
  font-size: 11px;
  color: #94a187;
  line-height: 1.75;
}
#activity-ranking-note {
  padding: 0 24px 20px;
  border-bottom: 1px solid var(--line);
}
.activity-columns {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
}
.activity-feed,
.activity-leaderboard {
  min-width: 0;
  padding: 24px;
}
.activity-feed {
  border-right: 1px solid var(--line);
}
.activity-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 19px;
}
.activity-subheading h3 {
  font-size: 17px;
  font-weight: 500;
}
.activity-subheading > span {
  font-size: 10px;
  white-space: nowrap;
  color: #95a485;
}
.activity-list {
  display: grid;
  gap: 13px;
}
.activity-card {
  background: #202823;
  border: 1px solid #384636;
  border-radius: 7px;
  padding: 17px;
  min-width: 0;
}
.activity-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.activity-card-heading > b {
  color: #dfd3ac;
  font-size: 13px;
  font-weight: 550;
}
.activity-card time {
  font-size: 9px;
  color: #8c9b7d;
}
.activity-participant {
  margin-top: 14px;
}
.activity-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.activity-player > b {
  font-size: 11px;
  overflow-wrap: anywhere;
}
.activity-money {
  min-width: 320px;
}
.activity-money td,
.activity-money th {
  padding: 7px 5px;
  white-space: nowrap;
  font-size: 10px;
}
.activity-money th {
  font-size: 8px;
  background: #151c1680;
}
.activity-money th:not(:first-child),
.activity-money td:not(:first-child) {
  text-align: right;
}
.activity-detail,
.activity-refund {
  margin-top: 10px;
  color: #9eae8e;
  font-size: 10px;
}
.activity-refund {
  color: #d0bf88;
}
.activity-empty {
  padding: 26px 12px;
  text-align: center !important;
  color: #93a385;
  font-size: 12px;
}
.ranking-table {
  min-width: 480px;
  margin-top: 15px;
}
.ranking-table th {
  padding: 10px 7px;
  font-size: 9px;
}
.ranking-table td {
  font-size: 11px;
  padding: 14px 7px;
  white-space: nowrap;
}
.ranking-table td:first-child {
  white-space: normal;
  min-width: 125px;
}
.ranking-table td b {
  font-size: 11px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.ranking-table td > small {
  font-size: 9px;
}
.ranking-table th:not(:first-child),
.ranking-table td:not(:first-child) {
  text-align: right;
}
.ranking-position {
  color: #b5aa7a;
  margin-right: 7px;
}
.positive {
  color: var(--green);
}
.negative {
  color: var(--red);
}
#activity-more,
#leaderboard-more {
  margin-top: 17px;
  font-size: 11px;
}
.fair-guide {
  margin-bottom: 24px;
  padding: 28px;
}
.fair-guide-intro {
  max-width: 720px;
}
.fair-guide-intro h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.fair-guide-intro > p,
.fair-guide-steps p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin-top: 10px;
}
.fair-guide-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 26px 0 20px;
}
.fair-guide-steps .icon {
  color: var(--gold);
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}
.fair-guide-steps h3 {
  font-size: 15px;
  font-weight: 600;
}
.fair-guide strong {
  color: var(--text);
  font-weight: 550;
}
.fair-guide-scope {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  padding: 15px 0 22px;
  border-bottom: 1px solid var(--line);
}
.fair-help {
  margin-top: 20px;
}
.fair-help details:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.fair-help summary {
  min-height: 32px;
  font-size: 13px;
}
.fair-help summary > span {
  color: var(--gold);
  font-size: 23px;
  transition: transform 0.2s;
}
.fair-help details[open] summary > span {
  transform: rotate(90deg);
}
.fair-help details p {
  max-width: 780px;
  font-size: 13px;
  color: var(--muted);
}
.fair-body {
  padding: 23px;
  display: grid;
  gap: 19px;
}
.fair-intro {
  font-size: 12px;
  color: #a9b59c;
  line-height: 1.8;
  max-width: 900px;
}
.fair-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 19px;
}
.fair-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  border: 1px solid #374232;
  border-radius: 7px;
  background: #171e18;
  padding: 20px;
}
.fair-card .eyebrow {
  margin: 0;
  font-size: 9px;
}
.fair-card code {
  display: block;
  font:
    11px/1.8 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #c9d0b8;
  overflow-wrap: anywhere;
  word-break: break-all;
  background: #101611;
  border: 1px solid #2d3a2a;
  border-radius: 4px;
  padding: 10px 12px;
}
.fair-card .field-hint {
  margin: 0;
}
.fair-card .button {
  align-self: flex-start;
  min-height: 38px;
  font-size: 11px;
}
.fair-card label {
  font-size: 11px;
  margin: 5px 0 0;
}
.fair-card .field-row {
  gap: 12px;
}
/* Seeds and hashes select in one click and sit beside a Copy button. */
.fair-card code,
.fair-seed code {
  -webkit-user-select: all;
  user-select: all;
  cursor: text;
}
.fair-value {
  display: flex;
  min-width: 0;
  border: 1px solid #2d3a2a;
  border-radius: 4px;
  background: #101611;
  overflow: hidden;
}
.fair-card .fair-value code {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
}
.fair-seed {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fair-seed code {
  display: block;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 7px;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #c9d0b8;
  background: #101611;
  border: 1px solid #2d3a2a;
  border-radius: 4px;
}
.fair-seed .quiet-button,
.fair-fill {
  flex-shrink: 0;
  font-size: 10px;
}
.fair-fill {
  display: block;
  margin-top: 6px;
}
.fair-busy {
  color: #e8b667 !important;
}
.fair-list {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.7;
  color: #b7c2a8;
  display: grid;
  gap: 4px;
}
.fair-list:empty {
  display: none;
}
.fair-panel td {
  overflow-wrap: anywhere;
}
.fair-panel td:last-child {
  max-width: 360px;
}
.loading-action {
  opacity: 0.5;
  pointer-events: none;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0 23px;
  margin-top: 42px;
  color: #85917e;
}
.footer-main {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-wordmark .brand-logo {
  width: 164px;
}
.footer-main > p {
  font-size: 10px;
  line-height: 1.75;
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 10px;
  margin-left: auto;
  color: #b3bca7;
}
.footer-links a:hover {
  color: var(--gold);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  font-size: 9px;
  color: #77836f;
}
.footer-bottom p {
  margin-left: auto;
}
.footer-bottom > span:last-child {
  color: #95a085;
  white-space: nowrap;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: calc(50% + var(--sidebar-width) / 2);
  transform: translateX(-50%);
  z-index: 1500;
  max-width: 90vw;
  padding: 14px 21px;
  background: #2a3328;
  color: #e1e6d6;
  border: 1px solid #697655;
  border-radius: 8px;
  box-shadow: 0 12px 30px #0006;
  font-size: 12px;
  text-align: center;
}
#game-dialog {
  position: fixed;
  inset: 0;
  padding: 0;
  margin: auto;
  width: 720px;
  max-width: calc(100% - 32px);
  color: var(--text);
  background: #1c2323;
  border: 1px solid #4d5140;
  border-radius: 14px;
  box-shadow: 0 30px 120px #0008;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
#game-dialog[open] {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
}
#game-dialog::backdrop {
  background: #090d0cd9;
  backdrop-filter: blur(7px);
}
.dialog-close {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 12px;
  background: #151b1be6;
  border-color: #73755a55;
}
.game-detail-art {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3e3b2e;
  border-radius: 13px 0 0 13px;
  overflow: hidden;
}
.game-detail-art img {
  width: 115%;
  max-width: 115%;
  height: auto;
  filter: drop-shadow(0 18px 12px #0005);
}
.game-detail-copy {
  padding: 42px 30px 30px;
  min-width: 0;
}
.game-detail-copy h2 {
  font-size: 30px;
  letter-spacing: -0.8px;
  font-weight: 550;
  margin: 4px 0 15px;
}
.game-detail-copy > p {
  font-size: 12px;
  color: #b1bba5;
  line-height: 1.8;
}
.game-howto {
  margin: 20px 0 25px;
  border-top: 1px solid var(--line);
  padding-top: 17px;
}
.game-howto h3 {
  font-size: 11px;
  font-weight: 550;
  color: #dbd6bc;
  margin-bottom: 7px;
}
.game-howto p {
  font-size: 11px;
  line-height: 1.85;
  color: #a0af92;
}
.game-detail-copy .button {
  width: 100%;
}
.game-detail-copy > small {
  display: block;
  font-size: 9px;
  line-height: 1.7;
  color: #88967b;
  margin-top: 12px;
  text-align: center;
}
.duel-silhouette {
  display: none;
}
.fairness-callout b {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 500;
}
.fairness-callout b .icon {
  width: 14px;
  height: 14px;
}
.play-tips p,
.play-tips a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.play-tips .icon {
  width: 15px;
  height: 15px;
}
.balance-panel > .field-hint {
  padding: 5px 24px 8px;
  font-size: 9px;
}
.account-tip {
  display: flex;
  gap: 12px;
}
.account-tip > .icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  margin-top: 4px;
}
.account-tip strong {
  font-weight: 500;
  color: #c8cfb8;
}
#name-help {
  display: block;
  color: #9dab91;
  font-size: 9px;
  margin-top: 9px;
}
#archived-balances {
  padding: 15px 24px;
  font-size: 11px;
  color: var(--muted);
}
#archived-balances summary {
  cursor: pointer;
  color: #bdc6b0;
}
#archived-balances > p {
  margin-top: 10px;
}
#archived-balance-list {
  list-style: none;
  padding: 0;
}
/* Preserve native mobile landscape input, safe areas and fullscreen behavior. */
.client-controls-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #a9b39d;
  font-size: 11px;
}
.client-controls-label select {
  min-height: 38px;
  padding: 0 8px;
  border-radius: 4px;
  font: inherit;
  width: auto;
}
.client-wrap {
  --arena-safe-top: env(safe-area-inset-top, 0px);
  --arena-safe-right: env(safe-area-inset-right, 0px);
  --arena-safe-bottom: env(safe-area-inset-bottom, 0px);
  --arena-safe-left: env(safe-area-inset-left, 0px);
}
.arena-touch .client-wrap {
  aspect-ratio: auto;
  height: max(180px, var(--arena-viewport-height, 100dvh));
}
.arena-touch .world-actions .quiet-button {
  min-height: 44px;
}
.arena-touch .world-footer {
  font-size: 12px;
  line-height: 1.4;
}
body.game-expanded {
  overflow: hidden;
  overscroll-behavior: none;
}
.client-wrap.is-expanded {
  position: fixed;
  z-index: 1000;
  left: var(--arena-viewport-left, 0px);
  top: var(--arena-viewport-top, 0px);
  width: var(--arena-viewport-width, 100vw);
  height: var(--arena-viewport-height, 100dvh);
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.client-wrap.is-expanded #game-client {
  top: calc(48px + var(--arena-safe-top));
  height: calc(100% - 48px - var(--arena-safe-top));
}
.client-expanded-toolbar {
  position: absolute;
  inset: 0 0 auto;
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--arena-safe-top) max(8px, var(--arena-safe-right)) 0
    max(12px, var(--arena-safe-left));
  color: #e2cc99;
  background: #202721;
  border-bottom: 1px solid #50593c;
  z-index: 4;
  font-size: 13px;
}
.client-expanded-toolbar small {
  display: inline-block;
  margin-left: 10px;
  color: #9ca58b;
  font-size: 10px;
}
#collapse-game {
  min-width: 88px;
  min-height: 44px;
  color: var(--gold);
  font-size: 13px;
}
.arena-touch .client-wrap.is-expanded #game-client {
  top: 0;
  height: 100%;
}
.arena-touch .client-expanded-toolbar {
  inset: max(2px, var(--arena-safe-top)) auto auto 50%;
  transform: translateX(-50%);
  min-height: 44px;
  width: 44px;
  padding: 0;
  border: 0;
  background: none;
}
.arena-touch .client-expanded-toolbar > span,
.arena-touch .collapse-label {
  display: none;
}
.arena-touch #collapse-game {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #89724699;
  background: #2b241ac9;
  border-radius: 3px;
  font-size: 22px;
  text-shadow: 1px 1px #000;
}
.arena-touch #collapse-game > span {
  margin: 0;
}
.client-rotate-prompt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: #d9bb75;
  background: #211f18;
  text-align: center;
}
.client-rotate-prompt h3 {
  color: var(--gold);
  font-size: 25px;
  font-weight: 500;
}
.client-rotate-prompt p {
  font-size: 14px;
  color: #c9ccb6;
}
.client-rotate-prompt small {
  color: #9ba489;
}
.arena-portrait #game-client {
  pointer-events: none;
}
@media (min-width: 1600px) {
  .game-art {
    height: 211px;
  }
  .hero-art img,
  .hero-art canvas {
    right: 0;
    width: 110%;
  }
  .lobby-hero {
    min-height: 385px;
  }
  .hero-copy {
    padding-top: 39px;
  }
  .hero-facts {
    margin-top: 33px;
  }
}
@media (max-width: 1190px) {
  :root {
    --sidebar-width: 200px;
  }
  .site-sidebar {
    padding-inline: 13px;
  }
  .site-sidebar .brand-logo {
    width: 170px;
  }
  .site-header {
    padding-inline: 25px;
  }
  .page-shell {
    padding-inline: 25px;
  }
  .header-meta {
    gap: 18px;
  }
  .header-meta .world-status {
    display: none;
  }
  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-copy {
    padding-left: 28px;
  }
  .hero-copy h2 {
    font-size: 43px;
  }
  .hero-art img,
  .hero-art canvas {
    width: 133%;
    right: -15%;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-actions .button {
    font-size: 11px;
    padding-inline: 15px;
  }
  .hero-facts {
    gap: 14px;
    font-size: 8px;
  }
  .hero-seal {
    right: 14px;
  }
  .hero-arch {
    right: 3%;
  }
  .lobby-note {
    align-items: flex-start;
  }
  .lobby-note a {
    display: none;
  }
  .lobby-bottom-grid {
    grid-template-columns: 1.3fr 1fr;
  }
  .duel-banner,
  .fairness-callout {
    padding: 21px;
    gap: 15px;
  }
  .duel-medallion {
    width: 47px;
    height: 47px;
  }
  .activity-columns {
    grid-template-columns: 1fr;
  }
  .activity-feed {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .fair-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 8px 15px;
  }
  .footer-bottom p {
    margin-left: 0;
  }
  .account-layout {
    grid-template-columns: 1.1fr 1fr;
  }
}
@media (max-width: 900px) {
  .nav-close {
    display: inline-flex;
    position: absolute;
    top: 27px;
    right: 10px;
    width: 36px;
    height: 40px;
    background: transparent;
    border: 0;
  }
  :root {
    --sidebar-width: 0px;
  }
  .site-sidebar {
    width: 238px;
    transform: translateX(-100%);
    transition: transform 0.22s;
    padding-inline: 20px;
  }
  .site-sidebar > .brand {
    margin-left: 0;
  }
  .site-sidebar .brand-logo {
    width: 158px;
  }
  .sidebar-caption {
    width: 158px;
    margin-left: 0;
  }
  .nav-open .site-sidebar {
    transform: translateX(0);
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: #050b09bb;
    z-index: 35;
    border: 0;
  }
  .menu-toggle {
    display: inline-flex;
    min-width: 36px;
    background: transparent;
    border: 0;
  }
  .site-header {
    height: 69px;
    padding-inline: 21px;
  }
  .header-title {
    gap: 12px;
  }
  .page-shell {
    padding: 24px 24px 0;
  }
  .hero-copy h2 {
    font-size: 48px;
  }
  .hero-art img,
  .hero-art canvas {
    width: 120%;
    right: -7%;
  }
  .help-section {
    gap: 30px;
  }
  .account-layout {
    grid-template-columns: 1.1fr 1fr;
  }
  .world-actions {
    gap: 11px !important;
  }
  .panel-bar {
    padding-inline: 19px;
  }
  .onboarding-content {
    padding-left: 32px;
  }
  .footer-bottom > span:last-child {
    margin-left: auto;
  }
}
@media (max-width: 620px) {
  .fair-guide {
    padding: 20px;
  }
  .fair-guide-intro h2 {
    font-size: 21px;
  }
  .fair-guide-steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .fair-guide-steps .icon {
    margin-bottom: 8px;
  }
  html {
    scroll-padding-top: 82px;
  }
  .site-header {
    height: 65px;
    padding: 0 13px;
    gap: 8px;
  }
  .header-title {
    gap: 7px;
  }
  .header-title h1 {
    font-size: 14px;
    letter-spacing: -0.2px;
  }
  .header-meta {
    gap: 13px;
  }
  .header-wallet > span {
    display: none;
  }
  .header-wallet .icon {
    width: 19px;
    height: 19px;
  }
  .header-meta .button {
    font-size: 10px;
    padding: 9px 11px;
    min-height: 35px;
    gap: 8px;
  }
  .header-meta .button .icon {
    display: none;
  }
  .page-shell {
    padding: 15px 15px 0;
  }
  .lobby-hero {
    display: block;
    min-height: 0;
    border-radius: 10px;
  }
  .hero-copy {
    padding: 26px 23px 0;
  }
  .hero-kicker {
    font-size: 8px;
    letter-spacing: 1.4px;
  }
  .hero-copy h2 {
    font-size: 38px;
    letter-spacing: -1.7px;
    margin-top: 17px;
  }
  .hero-copy > p {
    font-size: 12px;
    max-width: 290px;
    line-height: 1.8;
  }
  .hero-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
  }
  .hero-actions .button {
    font-size: 11px;
    min-height: 39px;
    padding: 11px 15px;
  }
  .hero-actions .text-link {
    font-size: 10px;
  }
  .hero-facts {
    display: none;
  }
  .hero-art {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 204px;
    margin-top: 12px;
    pointer-events: none;
  }
  .hero-art img,
  .hero-art canvas {
    width: 100%;
    height: 124%;
    bottom: -10%;
    right: 0;
  }
  .hero-arch {
    width: 155px;
    height: 240px;
    right: 15px;
    bottom: -70px;
  }
  .hero-orbit {
    width: 150px;
    height: 150px;
    right: 0;
    top: 0;
  }
  .hero-seal {
    display: none;
  }
  .lobby-note {
    gap: 9px;
    margin: 16px 1px 29px;
    font-size: 9px;
    line-height: 1.7;
  }
  .lobby-note > .icon {
    margin-top: 3px;
  }
  .lobby-note strong {
    display: block;
  }
  .section-heading {
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 15px;
  }
  .section-heading h2 {
    font-size: 22px;
  }
  .section-heading p {
    font-size: 10px;
  }
  .game-search {
    width: 100%;
    height: 41px;
  }
  .game-search input {
    font-size: 12px;
  }
  .game-toolbar {
    display: block;
    margin-bottom: 16px;
  }
  .game-filters {
    overflow-x: auto;
    padding: 2px 1px 5px;
    scrollbar-width: none;
    gap: 5px;
  }
  .game-filters button {
    padding: 8px 11px;
    font-size: 10px;
    min-height: 38px;
  }
  .game-count {
    display: none;
  }
  .games-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .game-art {
    height: 143px;
  }
  .game-type {
    font-size: 8px;
    left: 11px;
    top: 11px;
  }
  .favourite-button {
    width: 33px;
    height: 33px;
    right: 3px;
    top: 3px;
  }
  .game-card-body {
    padding: 12px 11px 14px;
  }
  .game-card-body > button {
    font-size: 12px;
  }
  .game-card-body p {
    font-size: 10px;
    line-height: 1.7;
    min-height: 34px;
  }
  .lobby-bottom-grid {
    grid-template-columns: 1fr;
    margin-top: 22px;
    gap: 12px;
  }
  .duel-banner,
  .fairness-callout {
    padding: 22px;
  }
  .duel-banner h3 {
    font-size: 16px;
  }
  .duel-banner p,
  .fairness-callout p {
    font-size: 11px;
  }
  .help-section {
    grid-template-columns: 1fr;
    gap: 27px;
    margin: 38px 0 30px;
  }
  .help-intro h2 {
    font-size: 27px;
    max-width: 280px;
  }
  .help-intro > p {
    font-size: 11px;
    max-width: 100%;
  }
  .faq-list summary {
    font-size: 12px;
    min-height: 25px;
  }
  .faq-list details p {
    font-size: 11px;
  }
  .page-intro {
    display: block;
    margin: 10px 0 24px;
  }
  .page-intro h2 {
    font-size: 28px;
  }
  .page-intro p {
    font-size: 11px;
  }
  .page-intro > .text-link,
  .page-intro > .session-status {
    display: inline-flex;
    margin-top: 13px;
  }
  .panel-bar {
    padding: 13px 16px;
    min-height: 54px;
  }
  .panel-bar h2 {
    font-size: 14px;
  }
  .panel-bar > div {
    gap: 8px;
  }
  .panel-caption {
    font-size: 8px;
  }
  .world-panel > .panel-bar {
    flex-wrap: wrap;
    gap: 7px;
  }
  .world-panel > .panel-bar .world-actions {
    justify-content: flex-end;
    flex: 1 1 auto;
    gap: 9px !important;
  }
  .world-panel .small-badge {
    display: none;
  }
  .client-controls-label {
    font-size: 10px;
  }
  .client-controls-label select {
    min-height: 40px;
    padding-inline: 6px;
  }
  .world-actions .quiet-button {
    font-size: 10px;
  }
  .onboarding {
    min-height: 442px;
  }
  .onboarding-content {
    padding: 35px 22px 26px;
    max-width: 100%;
  }
  .onboarding h2 {
    font-size: 44px;
  }
  .onboarding-content > p {
    font-size: 11px;
    max-width: 230px;
    margin: 17px 0 23px;
  }
  .arena-art img {
    width: 82%;
    right: -25%;
    opacity: 0.4;
    bottom: -16%;
  }
  .entry-controls {
    flex-wrap: wrap;
  }
  .entry-controls input {
    width: 100%;
    min-height: 43px;
  }
  .entry-controls .button {
    width: 100%;
    font-size: 12px;
  }
  .onboarding-foot {
    font-size: 8px;
    gap: 14px;
    margin-top: 23px;
  }
  .client-wrap {
    height: 420px;
    min-height: 340px;
  }
  .world-footer {
    padding: 14px 16px;
    font-size: 10px;
  }
  .world-footer > span {
    display: none;
  }
  .connection-details > summary {
    padding: 15px 16px;
    font-size: 10px;
  }
  .connection-details > summary span {
    font-size: 8px;
  }
  .credentials {
    padding: 0 16px 18px;
  }
  .credentials > div:first-child {
    display: block;
  }
  .credentials > div:first-child p {
    margin-top: 6px;
  }
  .credential-fields {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .play-tips {
    gap: 16px;
    font-size: 10px;
    line-height: 1.7;
  }
  .account-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .player-panel,
  .cashier-panel,
  .wallet-panel {
    padding: 21px;
  }
  .balance-list {
    padding-inline: 21px;
  }
  .side-panel-heading {
    padding-inline: 21px;
  }
  .balance-foot {
    padding-inline: 21px;
  }
  .asset-name small {
    font-size: 9px;
  }
  .asset-amount {
    font-size: 16px;
  }
  .field-row {
    gap: 11px;
  }
  .activity-panel {
    margin-top: 20px;
  }
  .activity-panel > .panel-bar {
    flex-wrap: wrap;
  }
  .activity-intro,
  .activity-feed,
  .activity-leaderboard {
    padding: 17px;
  }
  .activity-filters {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 17px 12px;
  }
  .activity-filters label {
    font-size: 10px;
  }
  #activity-ranking-note {
    padding: 0 17px 17px;
  }
  .activity-card {
    padding: 12px;
  }
  .activity-subheading h3 {
    font-size: 16px;
  }
  .history-panel table {
    min-width: 550px;
  }
  .activity-money {
    min-width: 290px;
  }
  .fair-body {
    padding: 16px;
    gap: 15px;
  }
  .fair-intro {
    font-size: 11px;
  }
  .fair-card {
    padding: 16px;
    gap: 10px;
  }
  .fair-card .field-row {
    grid-template-columns: 1fr;
  }
  .fair-panel table {
    min-width: 510px;
  }
  th,
  td {
    padding: 13px;
    font-size: 11px;
  }
  th {
    font-size: 9px;
  }
  .site-footer {
    padding-top: 25px;
    margin-top: 31px;
  }
  .footer-main {
    flex-wrap: wrap;
    gap: 19px;
  }
  .footer-main > p {
    font-size: 9px;
  }
  .footer-links {
    flex-basis: 100%;
    margin-left: 0;
    gap: 24px;
    margin-top: 3px;
  }
  .footer-bottom {
    font-size: 8px;
    gap: 10px;
  }
  .footer-bottom p {
    order: 3;
    flex-basis: 100%;
    line-height: 1.8;
  }
  .footer-bottom > span:last-child {
    font-size: 8px;
  }
  .toast {
    font-size: 11px;
    min-width: 220px;
  }
  #game-dialog {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  #game-dialog[open] {
    grid-template-columns: 1fr;
  }
  .game-detail-art {
    height: 190px;
    border-radius: 13px 13px 0 0;
  }
  .game-detail-art img {
    width: 100%;
    height: 122%;
    object-fit: contain;
  }
  .game-detail-copy {
    padding: 24px;
  }
  .game-detail-copy h2 {
    font-size: 27px;
  }
  .game-howto {
    margin: 17px 0 22px;
  }
  .game-detail-copy > small {
    font-size: 9px;
  }
}
/* iOS Safari zooms into focused fields under 16px and stays zoomed. */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea,
  .game-search input,
  .entry-controls input,
  .credential-fields input,
  .client-controls-label select {
    font-size: 16px;
  }
}

/* Forced colours drop backgrounds and shadows, so selected states use Highlight. */
@media (forced-colors: active) {
  .main-nav a[aria-current="page"],
  .game-filters button[aria-pressed="true"] {
    forced-color-adjust: none;
    border-color: Highlight;
    outline-color: CanvasText;
    background: Highlight;
    color: HighlightText;
    box-shadow: none;
  }
  .game-search:focus-within {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .game-card:hover,
  .button:hover:not(:disabled) {
    transform: none;
  }
}