:root {
  --bg: #090b11;
  --bg-soft: #0f121a;
  --panel: rgba(20, 24, 34, .84);
  --panel-solid: #151925;
  --panel-2: #1b2030;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f7f8fb;
  --muted: #959dad;
  --muted-2: #6f7788;
  --lime: #c8ff38;
  --lime-2: #8ef56b;
  --green: #5df2a5;
  --cash: #72f0a7;
  --purple: #9c7bff;
  --blue: #5ab7ff;
  --orange: #ffb45b;
  --red: #ff5e72;
  --gold: #ffd66b;
  --shadow: 0 30px 80px rgba(0, 0, 0, .42);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --transition: 180ms ease;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); color-scheme: dark; }
body { margin: 0; min-height: 100vh; font-family: var(--font); color: var(--text); background: var(--bg); overflow-x: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
button:disabled { opacity: .48; cursor: not-allowed !important; transform: none !important; }

.app-shell { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; }
.noise { pointer-events: none; position: fixed; inset: 0; opacity: .035; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.ambient { position: fixed; width: 620px; height: 620px; border-radius: 50%; filter: blur(90px); opacity: .12; z-index: -2; pointer-events: none; }
.ambient-one { background: var(--lime); top: -280px; right: -190px; }
.ambient-two { background: #6c4cff; bottom: -360px; left: -260px; opacity: .1; }

.topbar { height: 78px; position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(210px, 1fr) auto minmax(340px, 1fr); align-items: center; gap: 24px; padding: 0 34px; background: rgba(9, 11, 17, .82); border-bottom: 1px solid var(--line); backdrop-filter: blur(24px); }
.brand-button { appearance: none; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 10px; justify-self: start; cursor: pointer; }
.brand-mark { width: 42px; height: 42px; color: var(--lime); display: inline-grid; place-items: center; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; align-items: baseline; font-weight: 900; letter-spacing: -.04em; font-size: 20px; }
.brand-copy strong { color: var(--lime); }
.brand-copy span { color: white; }

.main-nav { display: inline-flex; gap: 6px; padding: 5px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 999px; }
.nav-button { border: 0; background: transparent; color: var(--muted); padding: 9px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; transition: var(--transition); }
.nav-button:hover { color: white; background: rgba(255,255,255,.05); }
.nav-button.active { color: #0a0d11; background: var(--lime); box-shadow: 0 8px 26px rgba(200,255,56,.18); }
.nav-icon { font-size: 15px; line-height: 1; }

.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.wallet-pill, .coin-pill, .profile-pill { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 999px; cursor: pointer; min-height: 44px; transition: var(--transition); }
.wallet-pill:hover, .coin-pill:hover, .profile-pill:hover { border-color: var(--line-strong); background: rgba(255,255,255,.065); transform: translateY(-1px); }
.wallet-pill { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center; text-align: left; padding: 6px 9px 6px 14px; }
.wallet-label { grid-column: 1; grid-row: 1; font-size: 9px; text-transform: uppercase; color: var(--muted); letter-spacing: .09em; align-self: end; }
.wallet-pill strong { grid-column: 1; grid-row: 2; color: var(--cash); font-size: 14px; align-self: start; }
.wallet-plus { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cash); color: #07110c; font-size: 18px; font-weight: 900; }
.coin-pill { padding: 6px 12px 6px 7px; display: flex; align-items: center; gap: 7px; }
.coin-symbol { width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#ffe58a,#dcae34); color: #4d3500; border: 2px solid #fff2b7; font-weight: 950; box-shadow: 0 4px 12px rgba(255,214,107,.18); }
.coin-symbol.large { width: 48px; height: 48px; font-size: 22px; }
.coin-pill strong { font-size: 13px; }
.profile-pill { padding: 4px 10px 4px 4px; display: flex; align-items: center; gap: 8px; }
.avatar-ring { width: 36px; height: 36px; padding: 2px; border-radius: 50%; background: conic-gradient(var(--lime), var(--green), var(--lime)); display: inline-grid; place-items: center; }
.avatar-ring.opponent { background: conic-gradient(var(--purple), var(--blue), var(--purple)); }
.avatar { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #1e2430; color: white; font-size: 13px; font-weight: 900; }
.profile-copy { display: grid; line-height: 1.1; min-width: 62px; text-align: left; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.chevron { color: var(--muted); }

.main-content { width: min(1500px, calc(100% - 64px)); margin: 0 auto; padding: 34px 0 60px; }
.view { display: none; animation: viewIn .34s ease both; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero-card { min-height: 500px; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; position: relative; background: radial-gradient(circle at 80% 40%, rgba(200,255,56,.10), transparent 30%), linear-gradient(130deg, rgba(25,29,42,.96), rgba(13,16,24,.96)); box-shadow: var(--shadow); }
.hero-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, black 45%, black); pointer-events: none; }
.hero-copy { padding: 66px 32px 58px 68px; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow { display: inline-flex; gap: 9px; align-items: center; font-size: 12px; font-weight: 800; color: #d2d8e4; letter-spacing: .07em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.live-dot, .secure-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200,255,56,.11), 0 0 18px rgba(200,255,56,.7); display: inline-block; }
.hero-copy h1 { font-size: clamp(48px, 5.2vw, 82px); letter-spacing: -.065em; line-height: .95; margin: 23px 0 20px; max-width: 780px; }
.hero-copy h1 span { color: var(--lime); text-shadow: 0 0 38px rgba(200,255,56,.16); }
.hero-copy > p { color: #adb4c2; font-size: 17px; line-height: 1.65; max-width: 610px; margin: 0 0 30px; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.primary-button, .secondary-button, .card-button, .text-button, .icon-button { cursor: pointer; transition: var(--transition); }
.primary-button { border: 0; border-radius: 13px; padding: 12px 18px; font-weight: 850; background: linear-gradient(135deg, var(--lime), #93f55b); color: #0b1009; box-shadow: 0 12px 32px rgba(200,255,56,.13); display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(200,255,56,.2); filter: saturate(1.08); }
.primary-button.xl, .secondary-button.xl { min-height: 52px; padding: 14px 22px; border-radius: 15px; font-size: 14px; }
.primary-button.full, .secondary-button.full { width: 100%; min-height: 48px; }
.secondary-button { border: 1px solid var(--line-strong); border-radius: 13px; padding: 11px 16px; font-weight: 750; background: rgba(255,255,255,.045); color: white; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.secondary-button:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); transform: translateY(-1px); }
.secondary-button.small { padding: 8px 11px; font-size: 11px; border-radius: 10px; min-height: 34px; }
.button-icon { color: var(--lime); font-size: 18px; }
.trust-row { margin-top: 28px; display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .065em; }
.trust-row b { color: white; margin-right: 4px; }

/* ---------- Player accounts ---------- */
.account-callout {
  margin: 18px 0 38px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(200,255,56,.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 25%, rgba(200,255,56,.13), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(156,123,255,.13), transparent 34%),
    linear-gradient(135deg, rgba(26,31,42,.97), rgba(15,18,27,.97));
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
}
.account-callout::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, black, transparent 78%);
}
.account-callout[hidden] { display: none !important; }
.account-callout-icon {
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--lime), var(--green));
  color: #081009;
  font-size: 25px;
  font-weight: 950;
  box-shadow: 0 12px 32px rgba(200,255,56,.18);
  transform: rotate(-4deg);
}
.account-callout-copy { position: relative; z-index: 1; min-width: 0; }
.account-callout-copy h2 { margin: 4px 0 5px; font-size: 20px; letter-spacing: -.035em; }
.account-callout-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; max-width: 760px; }
.account-callout-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.account-callout-actions button { white-space: nowrap; }

.profile-pill.guest-account {
  border-color: rgba(200,255,56,.18);
  background: rgba(200,255,56,.045);
}
.profile-pill.guest-account .avatar-ring {
  background: conic-gradient(var(--lime), var(--purple), var(--lime));
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(230px, .86fr) minmax(330px, 1.14fr);
  gap: 16px;
  margin-top: 16px;
}
.auth-visual-panel,
.auth-form-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  min-width: 0;
}
.auth-visual-panel {
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 5% 5%, rgba(200,255,56,.18), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(156,123,255,.22), transparent 43%),
    rgba(7,10,15,.72);
}
.auth-visual-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 20% 20%, black, transparent 75%);
}
.auth-visual-content,
.auth-starter-pack { position: relative; z-index: 1; }
.auth-mark {
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--lime), var(--green));
  color: #081009;
  font-size: 22px;
  font-weight: 950;
  box-shadow: 0 12px 34px rgba(200,255,56,.2);
  transform: rotate(-5deg);
}
.auth-visual-panel h3 { margin: 8px 0 9px; font-size: 27px; line-height: 1.02; letter-spacing: -.05em; }
.auth-visual-panel > .auth-visual-content > p { margin: 0; color: #aab2c1; font-size: 10px; line-height: 1.55; }
.auth-perks { display: grid; gap: 9px; margin-top: 22px; }
.auth-perk { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center; }
.auth-perk > span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(200,255,56,.08); color: var(--lime); font-size: 11px; font-weight: 900; }
.auth-perk div { display: grid; gap: 2px; }
.auth-perk strong { font-size: 9px; }
.auth-perk small { color: var(--muted); font-size: 7px; line-height: 1.35; }
.auth-starter-pack {
  margin-top: 24px;
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,214,107,.17);
  border-radius: 13px;
  background: rgba(255,214,107,.055);
}
.auth-starter-pack div { display: grid; gap: 2px; }
.auth-starter-pack small { color: var(--gold); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.auth-starter-pack strong { font-size: 10px; }
.auth-starter-pack > span { color: var(--gold); font-size: 20px; }

.auth-form-panel { padding: 22px; background: rgba(255,255,255,.025); }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(0,0,0,.16);
}
.auth-tab {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 850;
  transition: var(--transition);
}
.auth-tab:hover { color: white; background: rgba(255,255,255,.035); }
.auth-tab.active { color: #091008; background: var(--lime); box-shadow: 0 8px 22px rgba(200,255,56,.13); }
.auth-form-heading { margin-bottom: 16px; }
.auth-form-heading h3 { margin: 0 0 5px; font-size: 19px; letter-spacing: -.035em; }
.auth-form-heading p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.auth-context-message {
  margin: 0 0 15px;
  padding: 10px 11px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid rgba(90,183,255,.18);
  border-radius: 11px;
  background: rgba(90,183,255,.055);
  color: #bdc9d8;
  font-size: 8px;
  line-height: 1.45;
}
.auth-context-message > span { color: var(--blue); font-weight: 950; }
.auth-field { display: grid; gap: 6px; margin: 12px 0; }
.auth-field > label { display: flex; justify-content: space-between; gap: 10px; color: #c3c9d4; font-size: 9px; font-weight: 750; }
.auth-field > label small { color: var(--muted-2); font-size: 7px; font-weight: 600; }
.input-shell { position: relative; }
.auth-field input {
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
  color: white;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.auth-field input::placeholder { color: #697184; }
.auth-field input:hover { border-color: var(--line-strong); }
.auth-field input:focus { border-color: rgba(200,255,56,.45); background: rgba(0,0,0,.27); box-shadow: 0 0 0 4px rgba(200,255,56,.055); }
.auth-field input.has-error,
.auth-field input[aria-invalid="true"] { border-color: rgba(255,94,114,.68); box-shadow: 0 0 0 4px rgba(255,94,114,.055); }
.input-shell input[type="password"],
.input-shell input[data-password-field] { padding-right: 60px; }
.input-action {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 32px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  cursor: pointer;
  font-size: 8px;
  font-weight: 850;
}
.input-action:hover { color: white; background: rgba(255,255,255,.09); }
.field-hint { color: var(--muted-2); font-size: 7px; line-height: 1.4; }
.field-error { min-height: 10px; color: #ff8c9a; font-size: 7px; line-height: 1.35; }
.auth-form-error {
  margin: 11px 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,94,114,.2);
  border-radius: 11px;
  background: rgba(255,94,114,.06);
  color: #ff9aa6;
  font-size: 8px;
  line-height: 1.45;
}
.auth-form-error[hidden] { display: none; }
.password-strength { display: grid; gap: 6px; margin-top: 2px; }
.password-strength-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.password-strength-track span { height: 4px; border-radius: 999px; background: rgba(255,255,255,.075); transition: var(--transition); }
.password-strength[data-score="1"] .password-strength-track span:nth-child(-n+1),
.password-strength[data-score="2"] .password-strength-track span:nth-child(-n+2),
.password-strength[data-score="3"] .password-strength-track span:nth-child(-n+3),
.password-strength[data-score="4"] .password-strength-track span:nth-child(-n+4) { background: var(--lime); }
.password-strength[data-score="1"] .password-strength-track span:nth-child(-n+1) { background: var(--red); }
.password-strength[data-score="2"] .password-strength-track span:nth-child(-n+2) { background: var(--orange); }
.password-strength-copy { display: flex; justify-content: space-between; gap: 10px; color: var(--muted-2); font-size: 7px; }
.password-strength-copy strong { color: #c8ced9; }
.auth-submit { width: 100%; min-height: 49px; margin-top: 8px; }
.auth-submit[aria-busy="true"] { cursor: progress; }
.auth-legal { margin: 12px 0 0; color: var(--muted-2); font-size: 7px; line-height: 1.5; text-align: center; }
.auth-inline-link { border: 0; padding: 0; background: transparent; color: var(--lime); font-weight: 800; cursor: pointer; }

.account-identity-strip {
  margin: 12px 0 17px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
}
.account-identity-strip div { display: grid; gap: 3px; min-width: 0; }
.account-identity-strip small { color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .07em; }
.account-identity-strip strong { overflow: hidden; color: #dce1e9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-status-badge { flex: 0 0 auto; padding: 6px 8px; border-radius: 999px; background: rgba(114,240,167,.08); color: var(--cash); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.guest-account-prompt {
  margin-top: 17px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(200,255,56,.16);
  border-radius: 14px;
  background: rgba(200,255,56,.045);
}
.guest-account-prompt div { display: grid; gap: 3px; }
.guest-account-prompt strong { font-size: 10px; }
.guest-account-prompt small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.guest-account-prompt-actions { display: flex; gap: 7px; }
.profile-account-footer {
  margin-top: 17px;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.profile-account-footer p { margin: 0; color: var(--muted-2); font-size: 7px; line-height: 1.45; max-width: 330px; }
.danger-button {
  flex: 0 0 auto;
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid rgba(255,94,114,.22);
  border-radius: 11px;
  background: rgba(255,94,114,.055);
  color: #ff9ba7;
  cursor: pointer;
  font-size: 9px;
  font-weight: 850;
}
.danger-button:hover { border-color: rgba(255,94,114,.42); background: rgba(255,94,114,.09); }

.hero-visual { position: relative; min-height: 500px; overflow: hidden; }
.hero-visual::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--lime); filter: blur(110px); opacity: .08; right: 30px; top: 50px; }
.hero-orbit { position: absolute; border: 1px solid rgba(200,255,56,.12); border-radius: 50%; right: 4%; top: 7%; }
.orbit-one { width: 450px; height: 450px; animation: orbitSpin 18s linear infinite; }
.orbit-two { width: 330px; height: 330px; right: 12%; top: 18%; border-style: dashed; animation: orbitSpin 12s linear infinite reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.mini-board { position: absolute; z-index: 2; width: 410px; height: 330px; right: 9%; top: 17%; background: linear-gradient(145deg,#202637,#11151f); border: 15px solid #2a3142; border-radius: 26px; transform: perspective(900px) rotateY(-13deg) rotateX(8deg) rotateZ(3deg); box-shadow: -24px 35px 70px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.06); overflow: hidden; }
.mini-board::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 15.4%, rgba(255,255,255,.025) 15.4% 15.8%); }
.mini-board-rail { position: absolute; top: 0; bottom: 0; left: calc(50% - 12px); width: 24px; background: #303849; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); z-index: 3; }
.mini-point { position: absolute; width: 15%; height: 42%; background: rgba(200,255,56,.76); clip-path: polygon(0 0, 100% 0, 50% 100%); opacity: .9; }
.mini-point:nth-of-type(even) { background: rgba(156,123,255,.68); }
.mini-point.p1 { left: 0; top: 0; }.mini-point.p2 { left: 16.5%; top: 0; }.mini-point.p3 { left: 33%; top: 0; }
.mini-point.p4 { right: 33%; bottom: 0; transform: rotate(180deg); }.mini-point.p5 { right: 16.5%; bottom: 0; transform: rotate(180deg); }.mini-point.p6 { right: 0; bottom: 0; transform: rotate(180deg); }
.mini-checker { position: absolute; width: 42px; height: 42px; border-radius: 50%; z-index: 5; box-shadow: 0 8px 18px rgba(0,0,0,.4), inset 0 0 0 4px rgba(255,255,255,.13); }
.mini-checker.white { background: radial-gradient(circle at 34% 28%, #fff, #d9deea 58%, #9299a7); }
.mini-checker.black { background: radial-gradient(circle at 34% 28%, #4a5263, #141923 60%, #05070b); }
.mini-checker.c1 { left: 9px; top: 12px; }.mini-checker.c2 { left: 9px; top: 56px; }.mini-checker.c3 { right: 11px; bottom: 12px; }.mini-checker.c4 { right: 11px; bottom: 56px; }.mini-checker.c5 { right: 11px; bottom: 100px; }
.mini-cube { position: absolute; z-index: 6; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; color: #111; font-weight: 950; background: linear-gradient(145deg,#fff,#bcc3d1); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.floating-die { position: absolute; z-index: 6; width: 70px; height: 70px; border-radius: 17px; background: linear-gradient(145deg,#fefefe,#bfc6d4); box-shadow: 0 22px 40px rgba(0,0,0,.42); transform: rotate(14deg); display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 13px; }
.floating-die i { width: 10px; height: 10px; border-radius: 50%; background: #151922; align-self: center; justify-self: center; }
.die-a { right: 5%; top: 12%; animation: floatA 5s ease-in-out infinite; }
.die-a i:nth-child(1){grid-area:1/1}.die-a i:nth-child(2){grid-area:1/3}.die-a i:nth-child(3){grid-area:2/2}.die-a i:nth-child(4){grid-area:3/1}.die-a i:nth-child(5){grid-area:3/3}
.die-b { left: 12%; bottom: 12%; width: 58px; height: 58px; border-radius: 14px; transform: rotate(-18deg); animation: floatB 6s ease-in-out infinite; }
.die-b i:nth-child(1){grid-area:1/1}.die-b i:nth-child(2){grid-area:2/2}.die-b i:nth-child(3){grid-area:3/3}
@keyframes floatA { 50% { transform: translateY(-11px) rotate(20deg); } }
@keyframes floatB { 50% { transform: translateY(10px) rotate(-10deg); } }
.win-card, .streak-card { position: absolute; z-index: 8; border: 1px solid var(--line-strong); background: rgba(17,21,31,.86); backdrop-filter: blur(16px); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.win-card { right: 2%; bottom: 11%; padding: 12px 17px 12px 11px; display: flex; align-items: center; gap: 10px; }
.win-burst { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #10130c; background: var(--lime); font-size: 18px; }
.win-card div, .streak-card div { display: grid; }
.win-card small, .streak-card small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.win-card strong { color: var(--cash); font-size: 18px; }
.streak-card { left: 4%; top: 12%; padding: 11px 14px; display: flex; align-items: center; gap: 9px; }
.streak-card > span { font-size: 25px; }
.streak-card strong { font-size: 12px; }

.section-heading { margin: 46px 0 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.compact-heading { margin-top: 42px; }
.section-heading h2, .page-heading h1, .panel-heading h3 { margin: 4px 0 0; letter-spacing: -.035em; }
.section-heading h2 { font-size: 26px; }
.section-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--lime); font-weight: 850; }
.text-button { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 12px; padding: 6px 0; }
.text-button span { color: var(--lime); margin-left: 4px; }
.text-button:hover { color: white; }

.mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mode-card { position: relative; overflow: hidden; min-height: 285px; padding: 24px 22px 20px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(150deg, rgba(27,32,47,.92), rgba(17,20,30,.94)); display: flex; flex-direction: column; box-shadow: 0 18px 45px rgba(0,0,0,.16); transition: var(--transition); }
.mode-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.17); box-shadow: 0 25px 55px rgba(0,0,0,.27); }
.mode-card.featured { border-color: rgba(114,240,167,.3); }
.mode-card-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; filter: blur(55px); opacity: .065; right: -90px; top: -110px; background: var(--lime); pointer-events: none; }
.pvp-card .mode-card-glow { background: var(--blue); }
.cash-card .mode-card-glow { background: var(--cash); opacity: .12; }
.tournament-card .mode-card-glow { background: var(--purple); opacity: .1; }
.featured-ribbon { position: absolute; right: -37px; top: 22px; transform: rotate(42deg); background: var(--cash); color: #07150c; font-size: 8px; font-weight: 950; letter-spacing: .08em; padding: 5px 38px; }
.mode-topline { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.mode-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--lime); font-size: 18px; font-weight: 950; }
.pvp-card .mode-icon { color: var(--blue); }
.cash-card .mode-icon { color: var(--cash); }
.tournament-card .mode-icon { color: var(--purple); }
.mode-tag { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 5px 8px; font-size: 8px; font-weight: 950; letter-spacing: .09em; border: 1px solid currentColor; }
.mode-tag.free { color: var(--lime); background: rgba(200,255,56,.07); }
.mode-tag.social { color: var(--blue); background: rgba(90,183,255,.07); }
.mode-tag.cash { color: var(--cash); background: rgba(114,240,167,.07); }
.mode-tag.tourney { color: var(--purple); background: rgba(156,123,255,.08); }
.mode-card h3 { font-size: 21px; margin: 21px 0 9px; letter-spacing: -.03em; }
.mode-card p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.mode-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.mode-meta span { font-size: 9px; color: #c5cad5; padding: 5px 7px; border-radius: 8px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.055); }
.card-button { margin-top: auto; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.045); padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 850; }
.card-button span { color: var(--lime); }
.card-button:hover { background: rgba(255,255,255,.08); border-color: var(--line-strong); }
.cash-button { background: rgba(114,240,167,.1); border-color: rgba(114,240,167,.18); }
.cash-button span { color: var(--cash); }
.stake-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 16px 0 12px; }
.stake-row button { border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); padding: 7px 4px; font-size: 10px; font-weight: 850; cursor: pointer; }
.stake-row button:hover { color: #09130d; background: var(--cash); border-color: var(--cash); }

.dashboard-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 14px; margin-top: 14px; }
.panel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(20,24,35,.78); padding: 24px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading h3 { font-size: 19px; }
.panel-heading.tight h3 { font-size: 15px; }
.level-track { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 23px 0 24px; }
.level-badge { width: 70px; height: 70px; border-radius: 21px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 30% 20%, rgba(200,255,56,.2), transparent 50%), #1d2430; border: 1px solid rgba(200,255,56,.25); box-shadow: inset 0 0 28px rgba(200,255,56,.06); }
.level-badge span { color: var(--lime); font-size: 27px; line-height: 1; font-weight: 950; }
.level-badge small { color: var(--muted); font-size: 7px; letter-spacing: .1em; margin-top: 4px; }
.level-badge.large { width: 92px; height: 92px; border-radius: 28px; }
.level-badge.large span { font-size: 36px; }
.level-progress-title { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 9px; }
.level-progress-title span { color: var(--muted); }
.progress-bar { height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.04); }
.progress-bar span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--lime), var(--green)); box-shadow: 0 0 18px rgba(200,255,56,.25); }
.progress-bar.large { height: 11px; min-width: 260px; }
.level-progress-copy p { color: var(--muted); margin: 8px 0 0; font-size: 10px; }
.level-progress-copy p span { color: white; }
.reward-preview-row { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; align-items: center; }
.reward-node { display: grid; place-items: center; gap: 3px; min-width: 66px; }
.reward-node > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #222837; border: 1px solid var(--line); color: var(--muted); font-weight: 900; font-size: 11px; }
.reward-node small { color: var(--muted-2); font-size: 8px; }
.reward-node strong { font-size: 9px; }
.reward-node.claimed > span { background: var(--lime); color: #0c1009; border-color: var(--lime); }
.reward-node.current > span { border-color: var(--lime); color: var(--lime); box-shadow: 0 0 0 5px rgba(200,255,56,.06); }
.reward-node.locked { opacity: .52; }
.reward-line { height: 2px; background: var(--line); }
.reward-line.filled { background: linear-gradient(90deg,var(--lime),rgba(200,255,56,.35)); }
.daily-panel { position: relative; overflow: hidden; display: grid; align-content: start; }
.daily-panel::after { content:""; width: 220px; height: 220px; border-radius: 50%; background: var(--gold); filter: blur(75px); opacity: .06; position:absolute; right:-100px; top:-100px; }
.daily-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,214,107,.1); color: var(--gold); border: 1px solid rgba(255,214,107,.15); margin-bottom: 16px; }
.daily-panel h3 { margin: 4px 0 6px; }
.daily-panel p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; }
.daily-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 20px 0 16px; }
.daily-days > span { min-height: 45px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 9px; color: var(--muted); background: rgba(255,255,255,.025); }
.daily-days small { font-size: 8px; color: white; }
.daily-days .done { background: rgba(200,255,56,.06); color: var(--lime); }
.daily-days .today { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200,255,56,.06); }
.responsible-strip { margin-top: 14px; border: 1px solid var(--line); border-radius: 18px; padding: 15px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; background: rgba(255,255,255,.023); }
.responsible-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(90,183,255,.08); color: var(--blue); }
.responsible-strip div:nth-child(2) { display: grid; gap: 2px; }
.responsible-strip strong { font-size: 11px; }
.responsible-strip span { color: var(--muted); font-size: 9px; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 12px 0 30px; }
.page-heading h1 { font-size: 44px; margin: 6px 0 7px; }
.page-heading p { color: var(--muted); max-width: 700px; margin: 0; font-size: 13px; }
.tournament-hero { border: 1px solid rgba(156,123,255,.24); border-radius: var(--radius-xl); min-height: 330px; display: grid; grid-template-columns: 1.3fr .7fr; position: relative; overflow: hidden; background: radial-gradient(circle at 80% 50%, rgba(156,123,255,.16), transparent 34%), linear-gradient(145deg,#1b1b2d,#10131d 58%); }
.tournament-hero::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; opacity:.2; mask-image:linear-gradient(90deg,black,transparent); }
.tournament-hero-copy { padding: 42px 48px; position: relative; z-index: 2; }
.tournament-hero-copy h2 { font-size: 36px; letter-spacing: -.05em; margin: 16px 0 9px; }
.tournament-hero-copy > p { color: #aeb4c2; max-width: 650px; line-height: 1.55; font-size: 13px; }
.tournament-numbers { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.tournament-numbers > div { min-width: 110px; border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; display: grid; background: rgba(255,255,255,.035); }
.tournament-numbers small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.tournament-numbers strong { font-size: 17px; margin-top: 3px; }
.trophy-visual { display: grid; place-items: center; align-content: center; position: relative; perspective: 800px; }
.trophy-halo { position:absolute; width:250px; height:250px; border-radius:50%; border:1px solid rgba(156,123,255,.2); box-shadow:0 0 0 35px rgba(156,123,255,.035),0 0 0 70px rgba(156,123,255,.02); animation:pulseHalo 3s ease-in-out infinite; }
@keyframes pulseHalo { 50% { transform:scale(1.05); opacity:.7; } }
.trophy { color: var(--purple); font-size: 118px; text-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 42px rgba(156,123,255,.22); transform: rotateY(-8deg); z-index:2; }
.trophy-base { z-index:2; text-align:center; background:linear-gradient(145deg,#35304e,#181825); border:1px solid rgba(255,255,255,.1); padding:10px 28px; border-radius:8px; font-size:9px; font-weight:950; letter-spacing:.12em; line-height:1.4; box-shadow:0 16px 30px rgba(0,0,0,.3); }
.refresh-copy { color: var(--muted); font-size: 10px; display: inline-flex; gap: 8px; align-items:center; }
.tournament-list { display: grid; gap: 10px; }
.tournament-row { border: 1px solid var(--line); border-radius: 18px; background: rgba(20,24,35,.76); display: grid; grid-template-columns: 1.4fr repeat(4, .55fr) auto; align-items: center; gap: 16px; padding: 17px 18px; transition: var(--transition); }
.tournament-row:hover { border-color: var(--line-strong); transform: translateX(3px); }
.tournament-name { display: flex; align-items: center; gap: 12px; }
.tournament-emblem { width: 42px; height: 42px; border-radius: 13px; display:grid; place-items:center; background:rgba(156,123,255,.1); color:var(--purple); border:1px solid rgba(156,123,255,.15); font-size:18px; }
.tournament-name div { display:grid; gap:3px; }
.tournament-name strong { font-size: 13px; }
.tournament-name small { color:var(--muted); font-size:9px; }
.tournament-stat { display:grid; gap:3px; }
.tournament-stat small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.07em; }
.tournament-stat strong { font-size:13px; }
.tournament-stat .cash-value { color:var(--cash); }
.how-it-works { margin-top: 28px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:20px; background:rgba(255,255,255,.023); }
.how-step { display:flex; align-items:center; gap:13px; }
.how-step > span { flex:0 0 36px; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:rgba(200,255,56,.08); border:1px solid rgba(200,255,56,.15); color:var(--lime); font-weight:900; }
.how-step div { display:grid; gap:4px; }
.how-step strong { font-size:11px; }
.how-step p { margin:0; color:var(--muted); font-size:9px; line-height:1.45; }
.how-arrow { color:var(--muted-2); }

.rewards-heading { align-items:center; }
.reward-balance-card { min-width:180px; border:1px solid rgba(255,214,107,.2); border-radius:18px; padding:13px 16px; display:flex; gap:12px; align-items:center; background:rgba(255,214,107,.05); }
.reward-balance-card div { display:grid; }
.reward-balance-card small { color:var(--muted); font-size:9px; }
.reward-balance-card strong { font-size:22px; }
.rewards-summary-grid { display:grid; grid-template-columns:1.6fr .7fr .7fr; gap:12px; }
.rewards-level-card, .challenge-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:rgba(20,24,35,.78); padding:22px; }
.rewards-level-card { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; }
.rewards-level-card h2 { margin:4px 0 12px; font-size:23px; }
.rewards-level-card p { margin:7px 0 0; color:var(--muted); font-size:9px; }
.next-unlock { border-left:1px solid var(--line); padding-left:22px; display:grid; gap:3px; min-width:145px; }
.next-unlock small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.next-unlock strong { font-size:12px; }
.next-unlock span { color:var(--lime); font-size:9px; }
.challenge-card { display:grid; grid-template-columns:auto 1fr; gap:12px; align-content:center; position:relative; min-height:145px; }
.challenge-icon { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; background:rgba(90,183,255,.08); color:var(--blue); border:1px solid rgba(90,183,255,.13); }
.challenge-card div:nth-child(2) { display:grid; gap:4px; }
.challenge-card small { color:var(--muted); font-size:7px; letter-spacing:.08em; }
.challenge-card strong { font-size:11px; }
.challenge-card p { margin:0; color:var(--muted); font-size:9px; }
.challenge-reward { position:absolute; right:14px; bottom:12px; display:flex; align-items:center; gap:5px; font-size:10px; font-weight:900; }
.challenge-reward .coin-symbol { width:19px; height:19px; font-size:9px; border-width:1px; }
.vault-tabs { display:inline-flex; gap:6px; padding:5px; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:999px; margin:30px 0 17px; }
.vault-tab { border:0; background:transparent; color:var(--muted); border-radius:999px; padding:9px 16px; font-size:11px; font-weight:800; cursor:pointer; }
.vault-tab.active { color:#0a0e0a; background:var(--lime); }
.shop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.shop-card { border:1px solid var(--line); border-radius:var(--radius-lg); background:rgba(20,24,35,.78); overflow:hidden; transition:var(--transition); }
.shop-card:hover { transform:translateY(-4px); border-color:var(--line-strong); }
.shop-preview { height:180px; position:relative; overflow:hidden; display:grid; place-items:center; background:#11151f; }
.shop-preview.board-preview { --preview-a:#c8ff38; --preview-b:#8c6cff; --preview-bg:#141925; --preview-rail:#2d3546; }
.shop-preview.board-preview::before { content:""; position:absolute; inset:18px; border:9px solid var(--preview-rail); border-radius:15px; background:var(--preview-bg); box-shadow:0 16px 30px rgba(0,0,0,.3); }
.shop-preview.board-preview::after { content:""; position:absolute; width:82%; height:68%; background:repeating-conic-gradient(from 26deg at 50% 0,var(--preview-a) 0 16deg,transparent 16deg 31deg,var(--preview-b) 31deg 47deg,transparent 47deg 62deg); opacity:.8; mask-image:linear-gradient(black 0 46%,transparent 46% 54%,black 54%); }
.preview-emerald { --preview-a:#73f5a6 !important; --preview-b:#0c7a58 !important; --preview-bg:#08251d !important; --preview-rail:#174c3c !important; }
.preview-crimson { --preview-a:#ff6075 !important; --preview-b:#75203a !important; --preview-bg:#2a0d16 !important; --preview-rail:#5a2130 !important; }
.preview-royal { --preview-a:#ffd66b !important; --preview-b:#7f5cff !important; --preview-bg:#17122c !important; --preview-rail:#34295c !important; }
.preview-carbon { --preview-a:#d9dde6 !important; --preview-b:#4e5665 !important; --preview-bg:#0b0d11 !important; --preview-rail:#20242b !important; }
.dice-preview-set { display:flex; gap:14px; transform:rotate(-7deg); }
.preview-die { width:62px; height:62px; border-radius:15px; background:linear-gradient(145deg,#f8fafc,#aeb6c5); box-shadow:0 14px 28px rgba(0,0,0,.35); display:grid; place-items:center; color:#131720; font-size:22px; font-weight:950; }
.dice-gold .preview-die { background:linear-gradient(145deg,#fff0a4,#c99726); color:#382600; }
.dice-neon .preview-die { background:linear-gradient(145deg,#c8ff38,#5be0a4); color:#071109; box-shadow:0 0 22px rgba(200,255,56,.2),0 14px 28px rgba(0,0,0,.35); }
.dice-ruby .preview-die { background:linear-gradient(145deg,#ff6b80,#7f1027); color:white; }
.dice-cosmic .preview-die { background:radial-gradient(circle at 30% 20%,#d884ff,#5537d2 45%,#10142d); color:white; }
.badge-preview { width:95px; height:95px; border-radius:30px; display:grid; place-items:center; font-size:42px; color:var(--lime); background:radial-gradient(circle,rgba(200,255,56,.16),rgba(200,255,56,.03)); border:1px solid rgba(200,255,56,.18); box-shadow:0 0 50px rgba(200,255,56,.08); }
.shop-copy { padding:16px; }
.shop-copy-top { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.shop-copy h3 { margin:0; font-size:14px; }
.shop-rarity { font-size:7px; color:var(--purple); border:1px solid rgba(156,123,255,.22); border-radius:999px; padding:4px 6px; letter-spacing:.07em; }
.shop-copy p { color:var(--muted); font-size:9px; line-height:1.5; min-height:28px; }
.shop-action { width:100%; min-height:37px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.05); font-size:10px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
.shop-action:hover { border-color:var(--lime); color:var(--lime); }
.shop-action.equipped { background:rgba(200,255,56,.1); border-color:rgba(200,255,56,.22); color:var(--lime); }
.shop-action.locked { cursor:not-allowed; color:var(--muted); }
.shop-action .coin-symbol { width:18px; height:18px; font-size:8px; border-width:1px; }

.game-view { max-width: 1500px; margin: 0 auto; }
.game-topbar { min-height: 66px; display:grid; grid-template-columns:auto 1fr auto auto auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:18px; background:rgba(20,24,35,.82); padding:10px 13px; margin-bottom:12px; }
.icon-button { width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.04); display:grid; place-items:center; font-weight:900; }
.icon-button:hover { background:rgba(255,255,255,.08); }
.icon-button.tiny { width:29px; height:29px; border-radius:9px; font-size:11px; }
.game-mode-copy { display:flex; align-items:center; gap:10px; }
.game-mode-copy > div { display:grid; gap:2px; }
.game-mode-copy strong { font-size:13px; }
.game-mode-copy small { color:var(--muted); font-size:8px; }
.game-pot { text-align:right; display:grid; }
.game-pot small { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.game-pot strong { color:var(--cash); font-size:18px; }
.game-status-chip { border:1px solid rgba(200,255,56,.16); background:rgba(200,255,56,.055); border-radius:999px; padding:7px 10px; display:flex; gap:7px; align-items:center; color:#cbd5bd; font-size:9px; }
.secure-dot { width:6px; height:6px; }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 282px; grid-template-areas:"top sidebar" "board sidebar" "bottom sidebar"; gap:10px 12px; align-items:stretch; }
.player-rail { border:1px solid var(--line); border-radius:16px; background:rgba(20,24,35,.78); min-height:66px; padding:9px 14px; display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; }
.player-rail-top { grid-area:top; }
.player-rail-bottom { grid-area:bottom; }
.player-identity { display:flex; align-items:center; gap:10px; }
.player-identity > div { display:grid; gap:2px; }
.player-identity strong { font-size:12px; }
.player-identity small { color:var(--muted); font-size:8px; }
.player-stats { display:flex; align-items:center; gap:8px; }
.player-stats > span { min-width:70px; padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.04); display:grid; }
.player-stats small { color:var(--muted); font-size:7px; text-transform:uppercase; letter-spacing:.06em; }
.player-stats strong { font-size:12px; }
.turn-chip { min-width:86px; border-radius:999px; padding:7px 10px; border:1px solid var(--line); color:var(--muted); font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; }
.turn-chip span { width:6px; height:6px; border-radius:50%; background:var(--muted-2); }
.turn-chip.active { color:#0a1008; background:var(--lime); border-color:var(--lime); }
.turn-chip.active span { background:#0a1008; }
.board-stage { grid-area:board; min-width:0; }
.board-frame { --board-bg:#111722; --board-bg-2:#171f2d; --rail:#30394a; --rail-hi:#424d61; --point-a:#c8ff38; --point-b:#8066ff; --checker-white:#f5f7fb; --checker-white-edge:#aab1bf; --checker-black:#151a24; --checker-black-hi:#4d5667; position:relative; width:100%; aspect-ratio:1.65; max-height:680px; min-height:490px; padding:16px; border-radius:26px; background:linear-gradient(145deg,var(--rail-hi),var(--rail)); box-shadow:0 28px 70px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.07), inset 0 -8px 20px rgba(0,0,0,.24); }
.board-frame.theme-emerald { --board-bg:#08231b; --board-bg-2:#0d3126; --rail:#164837; --rail-hi:#24654f; --point-a:#73f5a6; --point-b:#087d5a; --checker-white:#f2fff9; --checker-white-edge:#8fbdaa; --checker-black:#10221c; --checker-black-hi:#3e725f; }
.board-frame.theme-crimson { --board-bg:#250b13; --board-bg-2:#35101d; --rail:#57202f; --rail-hi:#7a2d41; --point-a:#ff6075; --point-b:#7e1f3a; --checker-white:#fff6f7; --checker-white-edge:#c99fa7; --checker-black:#231016; --checker-black-hi:#75404c; }
.board-frame.theme-royal { --board-bg:#14102a; --board-bg-2:#211845; --rail:#382e60; --rail-hi:#514178; --point-a:#ffd66b; --point-b:#7858ff; --checker-white:#fff9e9; --checker-white-edge:#c6b782; --checker-black:#171128; --checker-black-hi:#5f4f8d; }
.board-frame.theme-carbon { --board-bg:#090b0f; --board-bg-2:#11151b; --rail:#22272f; --rail-hi:#3b424e; --point-a:#d7dce5; --point-b:#515965; --checker-white:#f8f9fb; --checker-white-edge:#a0a7b2; --checker-black:#07090c; --checker-black-hi:#434b57; }
.board-grid { width:100%; height:100%; border-radius:15px; overflow:hidden; background:linear-gradient(135deg,var(--board-bg),var(--board-bg-2)); display:grid; grid-template-columns:1fr 64px 1fr 48px; grid-template-rows:1fr 1fr; box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),inset 0 0 45px rgba(0,0,0,.24); }
.board-grid::before { content:""; position:absolute; inset:16px; border-radius:15px; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:30px 30px; pointer-events:none; }
.board-corner { position:absolute; width:28px; height:28px; border-radius:8px; background:linear-gradient(145deg,var(--rail-hi),var(--rail)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 4px 8px rgba(0,0,0,.25); z-index:5; }
.corner-tl{left:7px;top:7px}.corner-tr{right:7px;top:7px}.corner-bl{left:7px;bottom:7px}.corner-br{right:7px;bottom:7px}
.quadrant { display:grid; grid-template-columns:repeat(6,1fr); position:relative; min-width:0; }
.top-quadrant { align-items:start; }
.bottom-quadrant { align-items:end; }
.point { height:100%; position:relative; cursor:pointer; border:0; background:none; padding:0; min-width:0; }
.point::before { content:""; position:absolute; left:3%; right:3%; height:90%; opacity:.86; transition:var(--transition); filter:drop-shadow(0 4px 5px rgba(0,0,0,.12)); }
.top-quadrant .point::before { top:0; clip-path:polygon(0 0,100% 0,50% 100%); }
.bottom-quadrant .point::before { bottom:0; clip-path:polygon(50% 0,100% 100%,0 100%); }
.point.tone-a::before { background:linear-gradient(to bottom,var(--point-a),color-mix(in srgb,var(--point-a),black 28%)); }
.bottom-quadrant .point.tone-a::before { background:linear-gradient(to top,var(--point-a),color-mix(in srgb,var(--point-a),black 28%)); }
.point.tone-b::before { background:linear-gradient(to bottom,var(--point-b),color-mix(in srgb,var(--point-b),black 28%)); }
.bottom-quadrant .point.tone-b::before { background:linear-gradient(to top,var(--point-b),color-mix(in srgb,var(--point-b),black 28%)); }
.point-number { position:absolute; z-index:5; left:50%; transform:translateX(-50%); font-size:7px; color:rgba(255,255,255,.5); font-weight:800; pointer-events:none; }
.top-quadrant .point-number { bottom:5px; }
.bottom-quadrant .point-number { top:5px; }
.point.legal-source::before { opacity:1; filter:drop-shadow(0 0 8px rgba(200,255,56,.5)); }
.point.legal-source { box-shadow:inset 0 0 0 2px rgba(200,255,56,.55); z-index:3; }
.point.selected { box-shadow:inset 0 0 0 3px var(--lime),0 0 20px rgba(200,255,56,.18); z-index:4; }
.point.legal-destination::after { content:""; position:absolute; z-index:20; width:20px; height:20px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 7px rgba(200,255,56,.16),0 0 22px rgba(200,255,56,.6); left:50%; top:50%; transform:translate(-50%,-50%); animation:destinationPulse 1.15s ease-in-out infinite; }
@keyframes destinationPulse { 50% { transform:translate(-50%,-50%) scale(.78); opacity:.75; } }
.checker-stack { position:absolute; inset:0; z-index:10; pointer-events:none; }
.checker { position:absolute; left:50%; width:clamp(30px,4.4vw,54px); height:clamp(30px,4.4vw,54px); max-width:calc(100% - 4px); max-height:54px; aspect-ratio:1; border-radius:50%; transform:translateX(-50%); display:grid; place-items:center; font-size:10px; font-weight:950; box-shadow:0 7px 14px rgba(0,0,0,.34),inset 0 0 0 4px rgba(255,255,255,.11),inset 0 -6px 10px rgba(0,0,0,.18); }
.top-quadrant .checker { top:calc(5px + var(--stack-index) * clamp(25px,3.45vw,43px)); }
.bottom-quadrant .checker { bottom:calc(5px + var(--stack-index) * clamp(25px,3.45vw,43px)); }
.checker.white { background:radial-gradient(circle at 32% 25%,#fff,var(--checker-white) 47%,var(--checker-white-edge) 100%); color:#1a1e27; border:1px solid rgba(255,255,255,.38); }
.checker.black { background:radial-gradient(circle at 32% 25%,var(--checker-black-hi),var(--checker-black) 57%,#030509 100%); color:white; border:1px solid rgba(255,255,255,.1); }
.checker.selected-checker { box-shadow:0 0 0 4px var(--lime),0 0 28px rgba(200,255,56,.65),0 7px 14px rgba(0,0,0,.34); }
.checker-count { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(10,12,18,.72); color:white; border:1px solid rgba(255,255,255,.25); }
.bar-column { grid-column:2; grid-row:1 / span 2; z-index:4; background:linear-gradient(90deg,var(--rail),var(--rail-hi),var(--rail)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 18px rgba(0,0,0,.24); display:grid; grid-template-rows:1fr auto 1fr; padding:5px; }
.bar-spacer { display:none; }
.bar-zone { position:relative; min-height:0; border-radius:8px; cursor:pointer; transition:var(--transition); }
.bar-zone.legal-source { box-shadow:inset 0 0 0 2px var(--lime); background:rgba(200,255,56,.08); }
.bar-zone.selected { box-shadow:inset 0 0 0 3px var(--lime),0 0 18px rgba(200,255,56,.16); }
.bar-checker { position:absolute; left:50%; width:44px; height:44px; border-radius:50%; transform:translateX(-50%); display:grid; place-items:center; font-size:9px; font-weight:950; box-shadow:0 6px 12px rgba(0,0,0,.35),inset 0 0 0 4px rgba(255,255,255,.11); }
.black-bar-zone .bar-checker { top:calc(4px + var(--bar-index) * 29px); background:radial-gradient(circle at 32% 25%,var(--checker-black-hi),var(--checker-black) 57%,#030509); }
.white-bar-zone .bar-checker { bottom:calc(4px + var(--bar-index) * 29px); background:radial-gradient(circle at 32% 25%,#fff,var(--checker-white) 47%,var(--checker-white-edge)); color:#171b23; }
.cube-slot { padding:4px 0; display:grid; place-items:center; }
.doubling-cube { width:39px; height:39px; border-radius:9px; border:1px solid rgba(0,0,0,.2); background:linear-gradient(145deg,#fff,#aeb6c5); color:#131720; font-weight:950; box-shadow:0 8px 15px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.5); cursor:pointer; transform:rotate(-4deg); }
.doubling-cube:hover { transform:rotate(2deg) scale(1.06); }
.bearoff-tray { grid-column:4; border:0; padding:8px 4px; background:linear-gradient(90deg,var(--rail),var(--rail-hi)); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; position:relative; }
.bearoff-tray.black-off { grid-row:1; border-bottom:1px solid rgba(255,255,255,.04); }
.bearoff-tray.white-off { grid-row:2; }
.bearoff-tray .off-label { writing-mode:vertical-rl; font-size:7px; letter-spacing:.12em; color:rgba(255,255,255,.5); }
.bearoff-tray strong { font-size:18px; }
.bearoff-tray.legal-destination { background:linear-gradient(90deg,var(--rail),color-mix(in srgb,var(--lime),var(--rail) 65%)); box-shadow:inset 0 0 0 2px var(--lime); }
.bearoff-tray.legal-destination::after { content:""; width:13px; height:13px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px rgba(200,255,56,.6); position:absolute; }
.board-caption { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:8px; padding:8px 5px 0; }
.game-sidebar { grid-area:sidebar; display:grid; grid-template-rows:auto auto minmax(160px,1fr); gap:10px; }
.turn-panel, .match-panel, .move-log-panel { border:1px solid var(--line); border-radius:17px; background:rgba(20,24,35,.8); padding:15px; }
.turn-title { display:flex; align-items:center; gap:10px; margin:10px 0 12px; }
.turn-avatar { width:37px; height:37px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:950; }
.turn-avatar.white { background:linear-gradient(145deg,#fff,#aeb6c5); color:#131720; }
.turn-avatar.black { background:linear-gradient(145deg,#4d5667,#090c12); color:white; }
.turn-title div { display:grid; gap:2px; }
.turn-title strong { font-size:13px; }
.turn-title small { color:var(--muted); font-size:8px; line-height:1.35; }
.dice-zone { min-height:75px; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.14); margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:11px; padding:8px; }
.die-placeholder { width:48px; height:48px; border-radius:12px; border:1px dashed rgba(255,255,255,.15); color:var(--muted-2); display:grid; place-items:center; font-size:17px; }
.game-die { width:50px; height:50px; border-radius:12px; background:linear-gradient(145deg,#fff,#aeb6c5); box-shadow:0 10px 20px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.45); display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:9px; transition:var(--transition); }
.game-die.used { opacity:.25; transform:scale(.88); }
.game-die.gold { background:linear-gradient(145deg,#fff0a4,#c99726); }
.game-die.neon { background:linear-gradient(145deg,#c8ff38,#5be0a4); box-shadow:0 0 22px rgba(200,255,56,.16),0 10px 20px rgba(0,0,0,.35); }
.game-die.ruby { background:linear-gradient(145deg,#ff6b80,#7f1027); }
.game-die.cosmic { background:radial-gradient(circle at 30% 20%,#d884ff,#5537d2 45%,#10142d); }
.die-pip { width:7px; height:7px; border-radius:50%; background:#11151c; align-self:center; justify-self:center; box-shadow:inset 0 1px 1px rgba(255,255,255,.12); }
.game-die.ruby .die-pip, .game-die.cosmic .die-pip { background:white; }
.dice-zone.rolling .game-die { animation:diceRoll .5s cubic-bezier(.2,.8,.2,1); }
@keyframes diceRoll { 0%{transform:rotate(0) scale(.7)} 40%{transform:rotate(210deg) translateY(-10px) scale(1.12)} 100%{transform:rotate(360deg) scale(1)} }
.hidden { display:none !important; }
.button-dice { font-size:17px; }
.match-panel { padding-bottom:12px; }
.match-live { color:var(--muted); font-size:8px; display:flex; align-items:center; gap:6px; }
.match-detail-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding:9px 0; font-size:9px; color:var(--muted); }
.match-detail-row strong { color:white; font-size:10px; }
.match-detail-row.total strong { color:var(--cash); font-size:14px; }
.cube-row { border-top:1px solid var(--line); padding-top:10px; display:flex; justify-content:space-between; align-items:center; }
.cube-row > div { display:grid; gap:2px; }
.cube-row span { font-size:9px; }
.cube-row small { color:var(--muted); font-size:8px; }
.move-log-panel { min-height:0; display:flex; flex-direction:column; }
.move-log { margin-top:10px; overflow:auto; min-height:115px; max-height:220px; padding-right:3px; scrollbar-width:thin; }
.log-item { display:grid; grid-template-columns:auto 1fr auto; gap:7px; align-items:center; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.045); }
.log-dot { width:7px; height:7px; border-radius:50%; background:var(--muted); }
.log-dot.white { background:#f3f6fb; }.log-dot.black { background:#454d5e; }.log-dot.system { background:var(--lime); }.log-dot.cash { background:var(--cash); }
.log-item div { display:grid; gap:1px; }
.log-item strong { font-size:8px; font-weight:800; }
.log-item small { color:var(--muted); font-size:7px; }
.log-item time { color:var(--muted-2); font-size:7px; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(3,5,8,.76); backdrop-filter:blur(14px); opacity:0; pointer-events:none; transition:200ms ease; }
.modal-backdrop.open { opacity:1; pointer-events:auto; }
.modal-card { width:min(560px,100%); max-height:min(820px,calc(100vh - 48px)); overflow:auto; position:relative; border:1px solid var(--line-strong); border-radius:25px; background:linear-gradient(155deg,#1c2130,#10131c); box-shadow:0 40px 100px rgba(0,0,0,.62); padding:30px; transform:translateY(12px) scale(.98); transition:transform 200ms ease; }
.modal-backdrop.open .modal-card { transform:none; }
.modal-close { position:absolute; right:14px; top:14px; width:34px; height:34px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.045); cursor:pointer; color:var(--muted); font-size:20px; z-index:3; }
.modal-close:hover { color:white; background:rgba(255,255,255,.08); }
.modal-eyebrow { color:var(--lime); font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:900; }
.modal-card h2 { font-size:28px; letter-spacing:-.04em; margin:8px 0 8px; }
.modal-card > #modalContent > p, .modal-intro { color:var(--muted); font-size:11px; line-height:1.55; margin:0 0 20px; }
.option-grid { display:grid; gap:8px; }
.option-button { width:100%; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); padding:13px 14px; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; text-align:left; transition:var(--transition); }
.option-button:hover, .option-button.selected { border-color:var(--lime); background:rgba(200,255,56,.06); }
.option-icon { width:37px; height:37px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.055); color:var(--lime); font-weight:900; }
.option-copy { display:grid; gap:3px; }
.option-copy strong { font-size:11px; }
.option-copy small { color:var(--muted); font-size:8px; line-height:1.35; }
.option-value { font-size:13px; font-weight:900; }
.cash-stake-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
.cash-stake-picker button { min-height:58px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035); cursor:pointer; display:grid; place-items:center; font-size:15px; font-weight:900; }
.cash-stake-picker button small { color:var(--muted); font-size:7px; text-transform:uppercase; }
.cash-stake-picker button:hover, .cash-stake-picker button.selected { background:rgba(114,240,167,.1); border-color:var(--cash); color:var(--cash); }
.cash-summary { border:1px solid var(--line); border-radius:14px; padding:13px; background:rgba(0,0,0,.12); margin:12px 0 17px; }
.cash-summary-row { display:flex; justify-content:space-between; padding:6px 0; color:var(--muted); font-size:10px; }
.cash-summary-row strong { color:white; }
.cash-summary-row.total { border-top:1px solid var(--line); margin-top:4px; padding-top:10px; }
.cash-summary-row.total strong { color:var(--cash); font-size:15px; }
.modal-actions { display:flex; gap:9px; margin-top:18px; }
.modal-actions > button { flex:1; }
.notice-box { border:1px solid rgba(90,183,255,.15); border-radius:13px; background:rgba(90,183,255,.055); padding:11px 12px; color:#b8c8d9; font-size:9px; line-height:1.45; display:flex; gap:8px; }
.notice-box strong { color:white; }
.fairness-hero { border:1px solid rgba(200,255,56,.16); border-radius:18px; padding:17px; background:radial-gradient(circle at 100% 0,rgba(200,255,56,.1),transparent 45%),rgba(200,255,56,.035); display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:center; margin:16px 0; }
.fairness-icon { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; background:var(--lime); color:#0a1008; font-size:22px; font-weight:950; }
.fairness-hero div { display:grid; gap:4px; }
.fairness-hero strong { font-size:12px; }
.fairness-hero span { color:var(--muted); font-size:9px; line-height:1.4; }
.fairness-list { display:grid; gap:8px; }
.fairness-row { border:1px solid var(--line); border-radius:13px; padding:11px 12px; display:grid; grid-template-columns:auto 1fr; gap:10px; }
.fairness-row > span { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:var(--lime); background:rgba(200,255,56,.07); font-size:11px; font-weight:900; }
.fairness-row div { display:grid; gap:3px; }
.fairness-row strong { font-size:10px; }
.fairness-row small { color:var(--muted); font-size:8px; line-height:1.45; }
.hash-box { margin-top:12px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.2); padding:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:8px; color:#b5bdca; word-break:break-all; }
.profile-modal-grid { display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:center; margin:15px 0 20px; }
.profile-avatar-large { width:78px; height:78px; border-radius:25px; display:grid; place-items:center; background:linear-gradient(145deg,var(--lime),var(--green)); color:#0b1009; font-size:29px; font-weight:950; transform:rotate(-4deg); }
.profile-modal-grid h3 { margin:0 0 4px; font-size:20px; }
.profile-modal-grid p { margin:0; color:var(--muted); font-size:9px; }
.modal-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.modal-stat { border:1px solid var(--line); border-radius:12px; padding:10px; display:grid; gap:3px; background:rgba(255,255,255,.03); }
.modal-stat small { color:var(--muted); font-size:7px; text-transform:uppercase; letter-spacing:.07em; }
.modal-stat strong { font-size:15px; }
.form-group { display:grid; gap:6px; margin:13px 0; }
.form-group label { color:var(--muted); font-size:9px; }
.form-group input, .form-group select { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:rgba(0,0,0,.18); color:white; }
.tournament-bracket { display:grid; gap:10px; margin:15px 0; }
.bracket-round { border:1px solid var(--line); border-radius:13px; padding:11px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; }
.bracket-round.current { border-color:var(--purple); background:rgba(156,123,255,.07); }
.bracket-round.completed { border-color:rgba(200,255,56,.18); background:rgba(200,255,56,.045); }
.bracket-number { width:29px; height:29px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.05); font-size:9px; font-weight:900; }
.bracket-round div { display:grid; gap:2px; }
.bracket-round strong { font-size:10px; }
.bracket-round small { color:var(--muted); font-size:8px; }
.bracket-status { font-size:8px; color:var(--muted); }
.result-visual { width:90px; height:90px; margin:4px auto 15px; border-radius:28px; display:grid; place-items:center; font-size:38px; background:rgba(200,255,56,.08); border:1px solid rgba(200,255,56,.18); color:var(--lime); box-shadow:0 0 50px rgba(200,255,56,.08); }
.result-visual.loss { color:var(--red); background:rgba(255,94,114,.07); border-color:rgba(255,94,114,.15); }
.result-summary { text-align:center; }
.result-summary h2 { margin:7px 0; }
.result-summary p { color:var(--muted); font-size:10px; line-height:1.5; }
.result-rewards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:17px 0; }
.result-rewards > div { border:1px solid var(--line); border-radius:12px; padding:10px; display:grid; gap:3px; }
.result-rewards small { color:var(--muted); font-size:7px; text-transform:uppercase; }
.result-rewards strong { font-size:14px; }

.toast-stack { position:fixed; right:24px; bottom:24px; z-index:150; display:grid; gap:8px; width:min(340px,calc(100vw - 48px)); }
.toast { border:1px solid var(--line-strong); border-radius:14px; background:rgba(20,24,35,.94); backdrop-filter:blur(18px); box-shadow:0 18px 45px rgba(0,0,0,.4); padding:11px 13px; display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:center; animation:toastIn .3s ease both; }
.toast.leaving { animation:toastOut .25s ease both; }
.toast-icon { width:31px; height:31px; border-radius:10px; display:grid; place-items:center; background:rgba(200,255,56,.08); color:var(--lime); }
.toast.error .toast-icon { background:rgba(255,94,114,.08); color:var(--red); }
.toast.cash .toast-icon { background:rgba(114,240,167,.08); color:var(--cash); }
.toast div { display:grid; gap:2px; }
.toast strong { font-size:10px; }
.toast small { color:var(--muted); font-size:8px; line-height:1.3; }
@keyframes toastIn { from { opacity:0; transform:translateX(15px); } }
@keyframes toastOut { to { opacity:0; transform:translateX(15px); } }
.confetti-layer { position:fixed; inset:0; z-index:130; pointer-events:none; overflow:hidden; }
.confetti-piece { position:absolute; width:8px; height:14px; border-radius:2px; animation:confettiFall 1.8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes confettiFall { from { transform:translateY(-10vh) rotate(0); opacity:1; } to { transform:translateY(110vh) rotate(720deg); opacity:0; } }

.responsive-debug { position:fixed; z-index:220; right:12px; bottom:12px; display:none; align-items:center; min-height:30px; padding:7px 10px; border:1px solid rgba(200,255,56,.28); border-radius:999px; background:rgba(9,11,17,.92); color:var(--lime); box-shadow:0 10px 30px rgba(0,0,0,.35); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
html[data-responsive-debug="true"] .responsive-debug { display:inline-flex; }

.app-footer { min-height:50px; border-top:1px solid var(--line); padding:0 34px; display:flex; justify-content:center; align-items:center; gap:26px; color:var(--muted-2); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }

@media (max-width: 1220px) {
  .topbar { grid-template-columns:auto 1fr auto; padding:0 22px; }
  .main-nav { justify-self:center; }
  .wallet-label, .profile-copy, .chevron { display:none; }
  .wallet-pill { display:flex; padding:6px 7px 6px 11px; }
  .wallet-pill strong { font-size:12px; }
  .hero-copy { padding-left:44px; }
  .mini-board { width:360px; height:290px; right:5%; }
  .mode-grid { grid-template-columns:repeat(2,1fr); }
  .rewards-summary-grid { grid-template-columns:1fr 1fr; }
  .rewards-level-card { grid-column:1 / -1; }
  .shop-grid { grid-template-columns:repeat(3,1fr); }
  .game-layout { grid-template-columns:minmax(0,1fr) 260px; }
  .board-frame { min-height:440px; }
  .player-stats > span { min-width:62px; }
}

@media (max-width: 960px) {
  .topbar { height:auto; min-height:72px; grid-template-columns:auto 1fr; grid-template-areas:"brand actions" "nav nav"; padding:10px 18px; gap:8px; }
  .brand-button { grid-area:brand; }.topbar-actions { grid-area:actions; }.main-nav { grid-area:nav; width:100%; justify-content:center; border-radius:14px; }
  .main-content { width:min(100% - 28px, 1500px); padding-top:20px; }
  .hero-card { grid-template-columns:1fr; }
  .hero-copy { padding:50px 38px 34px; }
  .hero-visual { min-height:390px; }
  .mini-board { right:calc(50% - 190px); top:40px; }
  .streak-card { left:8%; }.win-card { right:8%; }
  .dashboard-grid { grid-template-columns:1fr; }
  .tournament-hero { grid-template-columns:1fr; }
  .trophy-visual { min-height:250px; }
  .tournament-row { grid-template-columns:1.2fr repeat(2,.5fr) auto; }
  .tournament-row .tournament-stat:nth-of-type(4), .tournament-row .tournament-stat:nth-of-type(5) { display:none; }
  .how-it-works { grid-template-columns:1fr; }
  .how-arrow { transform:rotate(90deg); justify-self:center; }
  .game-layout { grid-template-columns:1fr; grid-template-areas:"top" "board" "bottom" "sidebar"; }
  .game-sidebar { grid-area:sidebar; grid-template-columns:1fr 1fr 1fr; grid-template-rows:none; }
  .move-log { max-height:160px; }
  .board-frame { min-height:520px; }
  .app-footer { flex-wrap:wrap; padding:14px 20px; }
}

@media (max-width: 720px) {
  .main-nav .nav-button { padding:8px 10px; }
  .main-nav .nav-button span:last-child { display:none; }
  .coin-pill { display:none; }
  .topbar-actions { gap:6px; }
  .main-content { width:min(100% - 20px,1500px); }
  .hero-copy { padding:38px 24px 28px; }
  .hero-copy h1 { font-size:48px; }
  .hero-copy > p { font-size:14px; }
  .hero-actions { width:100%; }
  .hero-actions > button { width:100%; }
  .trust-row { gap:10px; }
  .hero-visual { min-height:330px; }
  .mini-board { width:300px; height:240px; right:calc(50% - 150px); top:48px; border-width:11px; }
  .floating-die { width:52px; height:52px; padding:9px; border-radius:13px; }
  .floating-die i { width:7px; height:7px; }
  .die-a { right:5%; }.die-b { left:4%; }
  .win-card { right:2%; bottom:4%; }.streak-card { left:2%; top:5%; }
  .mode-grid { grid-template-columns:1fr; }
  .reward-preview-row { grid-template-columns:repeat(4,1fr); gap:8px; }
  .reward-line { display:none; }
  .responsible-strip { grid-template-columns:auto 1fr; }
  .responsible-strip .text-button { grid-column:1/-1; text-align:left; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .page-heading h1 { font-size:36px; }
  .tournament-hero-copy { padding:30px 24px; }
  .tournament-hero-copy h2 { font-size:29px; }
  .tournament-row { grid-template-columns:1fr auto; }
  .tournament-row .tournament-stat { display:none !important; }
  .rewards-summary-grid { grid-template-columns:1fr; }
  .rewards-level-card { grid-template-columns:auto 1fr; }
  .next-unlock { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); padding:14px 0 0; }
  .progress-bar.large { min-width:0; }
  .shop-grid { grid-template-columns:repeat(2,1fr); }
  .game-topbar { grid-template-columns:auto 1fr auto; }
  .game-status-chip, .game-topbar > .secondary-button { display:none; }
  .game-mode-copy .mode-tag { display:none; }
  .player-rail { grid-template-columns:1fr auto; }
  .player-stats { display:none; }
  .game-sidebar { grid-template-columns:1fr; }
  .board-frame { min-height:0; aspect-ratio:1.3; padding:9px; border-radius:18px; }
  .board-grid { grid-template-columns:1fr 45px 1fr 35px; border-radius:10px; }
  .board-grid::before { inset:9px; }
  .board-corner { display:none; }
  .checker { width:clamp(24px,7.4vw,44px); height:clamp(24px,7.4vw,44px); }
  .top-quadrant .checker { top:calc(3px + var(--stack-index) * clamp(19px,5.5vw,33px)); }
  .bottom-quadrant .checker { bottom:calc(3px + var(--stack-index) * clamp(19px,5.5vw,33px)); }
  .doubling-cube { width:31px; height:31px; }
  .bar-checker { width:32px; height:32px; }
  .black-bar-zone .bar-checker { top:calc(3px + var(--bar-index)*23px); }
  .white-bar-zone .bar-checker { bottom:calc(3px + var(--bar-index)*23px); }
  .board-caption span:last-child { display:none; }
  .modal-card { padding:26px 20px; }
}

@media (max-width: 480px) {
  .brand-copy { font-size:16px; }.brand-mark { width:35px; height:35px; }
  .wallet-pill { display:none; }
  .topbar { grid-template-columns:1fr auto; }
  .hero-copy h1 { font-size:42px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .shop-grid { grid-template-columns:1fr; }
  .cash-stake-picker { grid-template-columns:repeat(2,1fr); }
  .modal-stat-grid, .result-rewards { grid-template-columns:1fr; }
  .rewards-level-card { grid-template-columns:1fr; }
  .level-badge.large { width:72px; height:72px; }
  .game-mode-copy strong { font-size:10px; }
  .game-pot strong { font-size:14px; }
  .board-frame { aspect-ratio:1.12; }
  .point-number { display:none; }
  .app-footer { display:grid; gap:6px; text-align:center; }
}

/* ---------- Unified responsive runtime: desktop, tablet, phone, and compact landscape ---------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(12px + var(--safe-top));
}

body {
  min-height: var(--app-height);
  overscroll-behavior-x: none;
}

body.modal-open { overflow: hidden; }

.app-shell { min-height: var(--app-height); }
.topbar, .modal-backdrop, .toast {
  -webkit-backdrop-filter: blur(24px);
}
.modal-backdrop { -webkit-backdrop-filter: blur(14px); }
.toast { -webkit-backdrop-filter: blur(18px); }

button, input, select {
  -webkit-tap-highlight-color: transparent;
}

button {
  touch-action: manipulation;
}

.board-frame,
.board-grid,
.point,
.bar-zone,
.bearoff-tray,
.doubling-cube {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.doubling-cube { position: relative; }
.doubling-cube::after {
  content: "";
  position: absolute;
  inset: -7px;
}

@media (pointer: coarse) {
  button:not(.point):not(.bearoff-tray):not(.doubling-cube) {
    min-height: 44px;
  }

  .icon-button,
  .icon-button.tiny,
  .modal-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .stake-row button,
  .shop-action,
  .vault-tab,
  .card-button,
  .text-button {
    min-height: 44px;
  }
}

@media (hover: none) {
  .primary-button:hover,
  .secondary-button:hover,
  .wallet-pill:hover,
  .coin-pill:hover,
  .profile-pill:hover,
  .doubling-cube:hover {
    transform: none;
  }
}

@media (max-width: 720px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .topbar {
    min-height: calc(64px + var(--safe-top));
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions";
    gap: 8px;
    padding: calc(8px + var(--safe-top)) max(12px, var(--safe-right)) 8px max(12px, var(--safe-left));
  }

  .brand-button {
    min-width: 0;
    overflow: hidden;
  }

  .brand-copy {
    min-width: 0;
    white-space: nowrap;
    font-size: 16px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
  }

  .topbar-actions {
    min-width: 0;
    gap: 6px;
  }

  .coin-pill { display: none; }

  .wallet-pill {
    display: flex;
    min-height: 44px;
    padding: 5px 10px;
  }

  .wallet-label,
  .wallet-plus,
  .profile-copy,
  .chevron {
    display: none;
  }

  .wallet-pill strong { font-size: 13px; }

  .profile-pill {
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    justify-content: center;
  }

  .profile-pill .avatar-ring {
    width: 36px;
    height: 36px;
  }

  .main-nav {
    position: fixed;
    z-index: 80;
    grid-area: auto;
    justify-self: stretch;
    align-self: auto;
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
    bottom: max(10px, var(--safe-bottom));
    width: auto;
    max-width: none;
    height: 64px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border-radius: 20px;
    background: rgba(15, 18, 26, .94);
    border-color: rgba(255, 255, 255, .13);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .main-nav .nav-button {
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 15px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .02em;
  }

  .main-nav .nav-button span:last-child { display: inline; }
  .main-nav .nav-icon { font-size: 17px; }

  .main-content {
    width: 100%;
    padding: 16px max(10px, var(--safe-right)) calc(100px + var(--safe-bottom)) max(10px, var(--safe-left));
  }

  .app-footer {
    padding: 14px max(16px, var(--safe-right)) 14px max(16px, var(--safe-left));
    margin-bottom: calc(82px + var(--safe-bottom));
  }

  .hero-card { border-radius: 24px; }
  .hero-copy { padding: 34px 20px 27px; }
  .hero-copy h1 { font-size: clamp(40px, 12.5vw, 50px); }
  .hero-copy > p { font-size: 14px; line-height: 1.58; }
  .eyebrow { max-width: 100%; font-size: 10px; line-height: 1.35; }

  .modal-backdrop {
    place-items: end center;
    padding: max(8px, var(--safe-top)) var(--safe-right) 0 var(--safe-left);
    overscroll-behavior: contain;
  }

  .modal-card {
    width: 100% !important;
    max-height: calc(var(--app-height) - var(--safe-top) - 8px);
    border-radius: 24px 24px 0 0;
    padding: 26px max(18px, var(--safe-right)) calc(20px + var(--safe-bottom)) max(18px, var(--safe-left));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: none;
    transition: none;
  }

  .modal-close {
    top: 10px;
    right: max(10px, var(--safe-right));
  }

  .modal-card h2 { padding-right: 40px; }
  .form-group input,
  .form-group select { font-size: 16px; }

  .toast-stack {
    left: max(10px, var(--safe-left));
    right: max(10px, var(--safe-right));
    bottom: calc(84px + var(--safe-bottom));
    width: auto;
  }

  .responsive-debug {
    right: max(10px, var(--safe-right));
    bottom: calc(84px + var(--safe-bottom));
  }

  body.is-game-view .topbar,
  body.is-game-view .app-footer {
    display: none;
  }

  body.is-game-view .game-view { animation: none; }

  body.is-game-view .main-content {
    padding-top: max(8px, var(--safe-top));
    padding-bottom: calc(18px + var(--safe-bottom));
  }

  body.is-game-view .responsive-debug {
    bottom: calc(8px + var(--safe-bottom));
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .game-topbar {
    position: sticky;
    top: max(6px, var(--safe-top));
    z-index: 42;
    min-height: 58px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 8px;
    margin-bottom: 8px;
    border-radius: 14px;
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
  }

  .game-mode-copy,
  .game-mode-copy > div {
    min-width: 0;
  }

  .game-mode-copy strong,
  .game-mode-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-mode-copy strong { font-size: 12px; }
  .game-mode-copy small { font-size: 8px; }
  .game-pot small { font-size: 7px; }
  .game-pot strong { font-size: 14px; }

  .game-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "controls"
      "board"
      "bottom"
      "match"
      "log";
    gap: 8px;
  }

  .game-sidebar { display: contents; }
  .turn-panel { grid-area: controls; }
  .match-panel { grid-area: match; }
  .move-log-panel { grid-area: log; }

  .player-rail {
    min-height: 58px;
    padding: 7px 10px;
    gap: 8px;
    border-radius: 14px;
  }

  .player-identity { min-width: 0; gap: 8px; }
  .player-identity > div { min-width: 0; }
  .player-identity strong,
  .player-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-identity .avatar-ring {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
  }

  .turn-chip {
    min-width: 78px;
    padding: 7px 8px;
    font-size: 8px;
  }

  .turn-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "kicker dice"
      "title dice"
      "action action";
    column-gap: 10px;
    row-gap: 5px;
    padding: 10px;
    border-radius: 14px;
  }

  .turn-panel > .section-kicker { grid-area: kicker; align-self: end; }
  .turn-title { grid-area: title; min-width: 0; margin: 0; gap: 8px; }
  .turn-title > div { min-width: 0; }
  .turn-title strong,
  .turn-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .turn-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  .dice-zone {
    grid-area: dice;
    min-width: 88px;
    min-height: 44px;
    margin: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(2, 36px);
    grid-auto-rows: 36px;
    gap: 4px;
    align-content: center;
    justify-content: center;
    border-radius: 11px;
  }

  .die-placeholder,
  .game-die {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }

  .game-die { padding: 6px; }
  .die-pip { width: 5px; height: 5px; }

  .turn-panel > #rollButton,
  .turn-panel > #endTurnButton {
    grid-area: action;
    min-height: 48px;
  }

  .board-frame {
    min-height: 0;
    aspect-ratio: 1.22;
    padding: 6px;
    border-radius: 18px;
  }

  .board-grid {
    grid-template-columns: 1fr 36px 1fr 28px;
    border-radius: 11px;
  }

  .board-grid::before {
    inset: 6px;
    border-radius: 11px;
  }

  .point::before { left: 1%; right: 1%; }

  .checker {
    max-width: calc(100% - 2px);
    box-shadow: 0 5px 10px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.11), inset 0 -4px 7px rgba(0,0,0,.18);
  }

  .top-quadrant .checker {
    top: calc(3px + var(--stack-index) * clamp(16px, 5vw, 26px));
  }

  .bottom-quadrant .checker {
    bottom: calc(3px + var(--stack-index) * clamp(16px, 5vw, 26px));
  }

  .bar-column { padding: 3px; }
  .doubling-cube { width: 28px; height: 28px; border-radius: 8px; }
  .bar-checker { width: 28px; height: 28px; }
  .black-bar-zone .bar-checker { top: calc(3px + var(--bar-index) * 20px); }
  .white-bar-zone .bar-checker { bottom: calc(3px + var(--bar-index) * 20px); }
  .bearoff-tray { padding: 4px 2px; }
  .bearoff-tray .off-label { display: none; }
  .bearoff-tray strong { font-size: 15px; }
  .board-caption { padding-top: 6px; font-size: 9px; }

  .match-panel,
  .move-log-panel {
    border-radius: 14px;
    padding: 12px;
  }

  .move-log { max-height: 180px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  body.is-game-view {
    height: var(--app-height);
    overflow: hidden;
  }

  body.is-game-view .app-shell,
  body.is-game-view .main-content,
  body.is-game-view .game-view {
    height: 100%;
    min-height: 0;
  }

  body.is-game-view .main-content {
    overflow: hidden;
    padding: max(5px, var(--safe-top)) max(7px, var(--safe-right)) max(5px, var(--safe-bottom)) max(7px, var(--safe-left));
  }

  .game-topbar {
    position: static;
    min-height: 48px;
    height: 48px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 4px 6px;
    margin-bottom: 6px;
    border-radius: 12px;
  }

  .game-topbar > .game-status-chip,
  .game-topbar > .secondary-button,
  .game-mode-copy > .mode-tag {
    display: none;
  }

  .game-mode-copy,
  .game-mode-copy > div { min-width: 0; }
  .game-mode-copy strong,
  .game-mode-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .game-pot small { font-size: 7px; }
  .game-pot strong { font-size: 14px; }

  .game-layout {
    height: calc(100% - 54px);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 29vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "board top"
      "board controls"
      "board bottom";
    gap: 6px;
    align-items: stretch;
  }

  .game-sidebar { display: contents; }
  .turn-panel { grid-area: controls; }
  .match-panel,
  .move-log-panel { display: none; }

  .player-rail {
    min-height: 0;
    padding: 5px 7px;
    border-radius: 12px;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .player-identity { min-width: 0; gap: 7px; }
  .player-identity > div { min-width: 0; }
  .player-identity strong,
  .player-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-identity .avatar-ring {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }

  .player-stats,
  .turn-chip { display: none; }

  .board-stage {
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
  }

  .board-frame {
    width: auto;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 1.65;
    padding: 5px;
    border-radius: 15px;
  }

  .board-grid {
    grid-template-columns: 1fr 38px 1fr 30px;
    border-radius: 10px;
  }

  .board-grid::before {
    inset: 5px;
    border-radius: 10px;
  }

  .board-corner { display: none; }
  .point::before { left: 1%; right: 1%; }
  .checker { max-width: calc(100% - 2px); }
  .top-quadrant .checker { top: calc(2px + var(--stack-index) * clamp(17px, 3.6vh, 27px)); }
  .bottom-quadrant .checker { bottom: calc(2px + var(--stack-index) * clamp(17px, 3.6vh, 27px)); }
  .bar-column { padding: 3px; }
  .doubling-cube { width: 29px; height: 29px; }
  .bar-checker { width: 29px; height: 29px; }
  .black-bar-zone .bar-checker { top: calc(2px + var(--bar-index) * 20px); }
  .white-bar-zone .bar-checker { bottom: calc(2px + var(--bar-index) * 20px); }
  .bearoff-tray { padding: 2px; }
  .bearoff-tray .off-label { display: none; }
  .bearoff-tray strong { font-size: 14px; }
  .board-caption { display: none; }

  .turn-panel {
    min-height: 0;
    padding: 7px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title dice"
      "action action";
    gap: 6px;
    align-content: center;
    overflow: hidden;
  }

  .turn-panel > .section-kicker { display: none; }
  .turn-title { grid-area: title; min-width: 0; margin: 0; gap: 6px; }
  .turn-title > div { min-width: 0; }
  .turn-title strong,
  .turn-title small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .turn-avatar { width: 32px; height: 32px; flex: 0 0 auto; }

  .dice-zone {
    grid-area: dice;
    min-width: 78px;
    min-height: 38px;
    margin: 0;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(2, 32px);
    grid-auto-rows: 32px;
    gap: 3px;
    border-radius: 9px;
  }

  .die-placeholder,
  .game-die {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .game-die { padding: 5px; }
  .die-pip { width: 4px; height: 4px; }

  .turn-panel > #rollButton,
  .turn-panel > #endTurnButton {
    grid-area: action;
    min-height: 44px;
    padding: 8px 12px;
  }
}

@media (max-width: 340px) {
  .brand-copy { font-size: 15px; }
  .brand-mark { width: 34px; height: 34px; }
  .wallet-pill { padding-inline: 8px; }
  .wallet-pill strong { font-size: 12px; }
  .hero-copy h1 { font-size: 38px; }
  .cash-stake-picker { gap: 6px; }
  .modal-card { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Keep the mobile tab bar anchored to the visual viewport. A filtered ancestor
   creates a fixed-position containing block in WebKit/Blink. */
@media (max-width: 720px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .topbar {
    background: rgba(9, 11, 17, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (pointer: coarse) {
  .modal-close {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }

  .doubling-cube::after { inset: -8px; }
}

/* Account layouts remain usable across tablet, phone, and compact landscape views. */
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: minmax(190px, .72fr) minmax(300px, 1.28fr); }
  .auth-visual-panel { padding: 20px; }
  .auth-visual-panel h3 { font-size: 23px; }
}

@media (max-width: 720px), (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .account-callout {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 17px;
    margin: 14px 0 30px;
    gap: 13px;
    border-radius: 19px;
  }
  .account-callout-icon { width: 48px; height: 48px; border-radius: 15px; }
  .account-callout-copy h2 { font-size: 18px; }
  .account-callout-copy p { font-size: 10px; }
  .account-callout-actions { grid-column: 1 / -1; width: 100%; }
  .account-callout-actions > button { flex: 1; min-width: 0; }

  .auth-layout { grid-template-columns: 1fr; gap: 10px; margin-top: 13px; }
  .auth-visual-panel { min-height: 0; padding: 17px; border-radius: 16px; }
  .auth-visual-content { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .auth-mark { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; border-radius: 14px; }
  .auth-visual-panel h3 { margin: 3px 0; font-size: 19px; }
  .auth-visual-panel > .auth-visual-content > p { font-size: 8px; }
  .auth-perks { display: none; }
  .auth-starter-pack { margin-top: 12px; padding: 10px 11px; }
  .auth-form-panel { padding: 17px; border-radius: 16px; }
  .auth-tabs { margin-bottom: 14px; }
  .auth-field input { min-height: 48px; font-size: 16px; }
  .input-action { min-width: 48px; min-height: 44px; font-size: 9px; }
  .auth-submit { min-height: 50px; }
  .guest-account-prompt { grid-template-columns: 1fr; }
  .guest-account-prompt-actions { width: 100%; }
  .guest-account-prompt-actions > button { flex: 1; }
  .profile-account-footer { align-items: flex-start; flex-direction: column; }
  .danger-button { width: 100%; min-height: 46px; }
}

@media (max-width: 420px) {
  .account-callout { grid-template-columns: 1fr; }
  .account-callout-icon { display: none; }
  .account-callout-actions { display: grid; grid-template-columns: 1fr; }
  .auth-visual-panel { display: none; }
  .auth-form-panel { padding: 15px; }
  .auth-form-heading h3 { font-size: 18px; }
  .auth-field { margin: 10px 0; }
  .account-identity-strip { align-items: flex-start; flex-direction: column; }
}

/* Cashgammon V1.5: deliberate hierarchy, quieter chrome, and richer interaction.
   Existing account, cash-entry, engine and responsive viewport contracts remain. */
.lobby-welcome { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 24px; }
.lobby-welcome .section-kicker { color:var(--muted); font-size:10px; }
.lobby-welcome h1 { margin:7px 0 0; font-size:30px; letter-spacing:-.045em; line-height:1.15; }
.fairness-link { display:flex; align-items:center; gap:9px; font-size:11px; color:#c8cfdc; min-height:44px; }
.lobby-progress-peek { display:none; }
.lobby-hub { display:grid; grid-template-columns:minmax(0,1fr) 326px; grid-template-areas:"arena rewards" "practice rewards" "account rewards"; gap:20px; align-items:start; }
.cash-arena { grid-area:arena; min-width:0; overflow:hidden; border:1px solid rgba(200,255,56,.16); border-radius:26px; background:linear-gradient(130deg,#192219 0%,#10151d 50%,#11131e 100%); box-shadow:0 22px 65px rgba(0,0,0,.15); }
.arena-hero.hero-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); position:relative; border:0; border-radius:0; padding:0; margin:0; min-height:268px; background:none; overflow:hidden; box-shadow:none; }
.arena-hero::before { display:none; }
.arena-hero .hero-copy { z-index:2; padding:30px 0 24px 30px; min-width:0; }
.arena-hero .eyebrow { font-size:9px; letter-spacing:.16em; margin-bottom:18px; color:#c8ed94; }
.arena-hero #cashArenaTitle { margin:0 0 15px; font-size:clamp(34px,3.1vw,50px); line-height:1.05; letter-spacing:-.06em; font-weight:900; }
.arena-hero #cashArenaTitle span { color:var(--lime); }
.arena-hero .hero-copy p { font-size:13px; line-height:1.7; margin:0 0 16px; color:#aeb9b4; max-width:none; }
.arena-demo-note { font-size:8px; letter-spacing:.13em; color:#b8c6b8; border-bottom:1px solid rgba(200,255,56,.25); padding-bottom:4px; }
.arena-visual.hero-visual { min-height:268px; height:100%; overflow:hidden; }
.arena-visual .mini-board { width:255px; height:225px; right:12px; top:39px; border-width:10px; border-radius:20px; transform:perspective(700px) rotateY(-18deg) rotateX(15deg) rotateZ(-12deg); }
.arena-visual .mini-checker { width:30px; height:30px; }
.arena-visual .mini-checker.c2 { top:43px; }
.arena-visual .mini-checker.c4 { bottom:43px; }
.arena-visual .mini-checker.c5 { bottom:74px; }
.arena-visual .mini-cube { width:32px; height:32px; left:calc(50% - 16px); top:calc(50% - 16px); }
.arena-visual .hero-orbit { width:280px; height:280px; top:15px; right:-20px; opacity:.6; }
.arena-visual .floating-die { width:49px; height:49px; padding:9px; border-radius:12px; right:34px; top:16px; }
.arena-visual .floating-die i { width:7px; height:7px; }
.cash-options.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; border-top:1px solid rgba(255,255,255,.09); }
.cash-duel-option { padding:24px 26px; display:flex; flex-direction:column; min-width:0; }
.cash-option-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.duel-symbol { display:flex; align-items:center; font-weight:900; font-size:25px; letter-spacing:-.055em; color:var(--cash); }
.duel-symbol span { font-size:13px; padding:0 5px; color:#87978f; }
.cash-option-heading .mode-tag { font-size:7px; border:0; background:rgba(114,240,167,.06); letter-spacing:.08em; }
.cash-options h3 { margin:12px 0 6px; font-size:24px; line-height:1.15; letter-spacing:-.04em; }
.cash-options p { font-size:12px; line-height:1.6; color:#a9b3c0; margin:0; }
.cash-duel-option .stake-row { margin:19px 0 12px; gap:7px; }
.cash-duel-option .stake-row button { min-height:44px; font-size:12px; border-radius:10px; }
.cash-duel-option .cash-button { min-height:48px; width:100%; background:linear-gradient(110deg,var(--lime),#a2f749); color:#0c1708; box-shadow:0 7px 24px rgba(171,249,54,.1); font-size:12px; justify-content:space-between; border:0; }
.cash-duel-option .cash-button span { color:#0c1708; }
.cash-tournament-option { position:relative; padding:30px 26px 24px; border-left:1px solid rgba(172,150,255,.12); background:radial-gradient(ellipse at 85% 0%,rgba(137,106,246,.14),transparent 65%),rgba(15,14,26,.5); display:flex; flex-direction:column; overflow:hidden; }
.cash-tournament-option > :not(.tournament-option-art) { position:relative; z-index:1; }
.cash-tournament-option .section-kicker { color:#bda6ff; font-size:8px; letter-spacing:.1em; max-width:calc(100% - 48px); line-height:1.5; }
.cash-tournament-option h3 { font-size:24px; margin-top:18px; }
.tournament-option-art { position:absolute; right:20px; top:16px; width:65px; height:75px; opacity:.55; transform:rotate(12deg); }
.tournament-option-art span { color:#b7a1ff; font-size:64px; line-height:1; text-shadow:0 0 35px rgba(138,106,240,.4); }
.tournament-prize-line { display:grid; gap:4px; margin:18px 0 16px; }
.tournament-prize-line span { color:#9c94b3; font-size:9px; }
.tournament-prize-line strong { color:#d9cbff; font-size:18px; letter-spacing:-.03em; }
.tournament-enter { margin-top:auto; min-height:48px; width:100%; justify-content:space-between; border-color:rgba(177,149,255,.24); background:rgba(148,111,255,.09); color:#e0d5ff; font-size:12px; }
.arena-footnote { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 26px; border-top:1px solid rgba(255,255,255,.055); font-size:9px; color:#929dad; }
.arena-footnote button { background:none; border:0; padding:8px 0; color:#c1ccb9; font-size:9px; cursor:pointer; }
.rewards-hub { grid-area:rewards; position:sticky; top:102px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(165deg,#1b1e29,#11141e 55%); border-radius:24px; padding:25px; min-width:0; scroll-margin-top:100px; }
.rewards-hub-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rewards-hub-heading .section-kicker { color:#b5b0c6; font-size:8px; letter-spacing:.1em; }
.reward-spark { font-size:20px; color:var(--gold); }
.rewards-hub h2 { margin:8px 0 0; font-size:26px; line-height:1.2; letter-spacing:-.045em; }
.rewards-hub .level-track { gap:14px; margin:23px 0 12px; }
.rewards-hub .level-badge { width:59px; height:65px; border-radius:17px; }
.rewards-hub .level-progress-copy { display:grid; gap:7px; min-width:0; }
.rewards-hub .level-progress-copy strong { font-size:12px; }
.rewards-hub .level-progress-copy > span { color:#a7adbf; font-size:10px; }
.rewards-hub .progress-bar { height:6px; }
.next-level-copy { font-size:10px; color:#929bb0; margin:0 0 20px; }
.next-level-copy strong { color:#d4d9e5; font-weight:600; }
.lobby-unlocks { display:grid; gap:7px; }
.unlock-preview { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; text-align:left; border:1px solid rgba(255,255,255,.055); border-radius:12px; background:rgba(255,255,255,.025); padding:9px; min-height:60px; cursor:pointer; }
.unlock-preview:hover { border-color:rgba(200,255,56,.3); background:rgba(255,255,255,.05); }
.unlock-preview > span:nth-child(2) { display:grid; gap:4px; }
.unlock-preview strong { font-size:11px; }
.unlock-preview small { color:#9ca3b6; font-size:9px; line-height:1.4; }
.unlock-arrow { color:#7f899a; }
.unlock-art { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; }
.gold-die { color:#fae4a0; font-size:31px; background:radial-gradient(circle at 35% 20%,rgba(255,214,107,.16),transparent 80%); transform:rotate(-7deg); }
.crimson-board { display:flex; gap:3px; align-items:center; justify-content:center; background:#361923; border:3px solid #693043; transform:rotate(6deg); padding:3px; }
.crimson-board i { width:5px; height:28px; background:#fa6c87; clip-path:polygon(0 0,100% 0,50% 100%); }
.crimson-board i:nth-child(even) { transform:rotate(180deg); background:#b43251; }
.unlock-note { color:#8790a6; font-size:9px; line-height:1.6; margin:10px 0 0; }
.streak-summary { display:flex; align-items:center; gap:7px; padding:17px 0; border-bottom:1px solid var(--line); }
.streak-summary > span { color:var(--gold); }
.streak-summary strong { font-size:11px; }
.streak-summary small { margin-left:auto; font-size:9px; color:#999fb1; }
.daily-panel.daily-inline { display:block; padding:20px 0 0; border:0; border-radius:0; background:none; margin:0; }
.daily-inline-copy { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.daily-inline-copy .section-kicker { color:var(--gold); font-size:8px; }
.daily-inline-copy h3 { font-size:18px; margin:6px 0 0; letter-spacing:-.035em; }
.daily-coin { width:33px; height:33px; display:grid; place-items:center; border:1px solid rgba(255,214,107,.35); border-radius:50%; color:var(--gold); font-size:16px; font-weight:850; box-shadow:inset 0 0 0 3px rgba(255,214,107,.05); }
.daily-inline p { font-size:10px; line-height:1.6; color:#99a1b4; margin:10px 0 14px; }
.daily-inline .primary-button { width:100%; min-height:45px; font-size:11px; background:rgba(255,214,107,.08); color:#f6d68a; border:1px solid rgba(255,214,107,.25); box-shadow:none; }
.daily-inline .primary-button:hover { background:rgba(255,214,107,.15); }
.vault-link { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin-top:11px; padding:8px 0 0; font-size:10px; color:#b3bbcb; }
.practice-lounge { grid-area:practice; min-width:0; padding:3px 1px 0; }
.practice-lounge-heading { display:flex; gap:20px; align-items:center; justify-content:space-between; margin:0 0 13px; }
.practice-lounge-heading .section-kicker { font-size:8px; color:#8d98aa; }
.practice-lounge-heading h2 { font-size:17px; margin:0; letter-spacing:-.025em; }
.practice-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.practice-option { display:grid; grid-template-columns:35px minmax(0,1fr) auto; gap:10px; align-items:center; padding:17px 14px; border:0; border-top:1px solid var(--line); border-radius:0; background:none; cursor:pointer; text-align:left; }
.practice-option:hover { background:rgba(255,255,255,.025); }
.practice-symbol { color:#9faabc; font-size:22px; font-weight:800; }
.pvp-card .practice-symbol { font-size:13px; color:#91bae0; }
.practice-option strong { font-size:13px; }
.practice-option small { font-size:10px; color:#949eb1; line-height:1.4; }
.lobby-hub .account-callout { grid-area:account; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:14px; padding:17px; margin:0; }
.lobby-hub .account-callout[hidden] { display:none; }
.lobby-hub .account-callout::before,.lobby-hub .account-callout::after { display:none; }
.lobby-hub .account-callout-icon { width:35px; height:35px; font-size:20px; background:none; border:0; }
.lobby-hub .account-callout h2 { font-size:13px; margin:0 0 4px; }
.lobby-hub .account-callout p { font-size:10px; line-height:1.5; margin:0; }
.lobby-hub .account-callout-actions { gap:8px; }
.lobby-hub .account-callout-actions button { min-height:40px; font-size:10px; padding:9px 12px; }
.lobby-hub .account-callout-actions .primary-button { background:rgba(200,255,56,.07); color:var(--lime); box-shadow:none; border:1px solid rgba(200,255,56,.16); }
#lobbyView > .responsible-strip { margin-top:24px; background:none; border-width:1px 0 0; border-radius:0; padding:18px 2px; }

/* The match header is a scoreboard, not another player card. */
.game-topbar { background:rgba(9,11,17,.93); border-width:0 0 1px; border-color:rgba(255,255,255,.1); border-radius:0; padding-left:0; padding-right:0; }
.game-mode-copy strong { font-size:14px; }
.game-mode-copy small { font-size:9px; }
.game-pot strong { font-size:23px; letter-spacing:-.04em; }
.player-rail { border:0; border-radius:0; background:none; padding-left:10px; padding-right:10px; }
.player-rail-top { grid-template-columns:auto auto minmax(0,1fr); grid-template-areas:"status stats identity"; border-bottom:1px solid rgba(171,143,255,.25); background:linear-gradient(270deg,rgba(153,123,233,.055),transparent 80%); }
.player-rail-bottom { grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"identity stats status"; border-top:1px solid rgba(200,255,56,.25); background:linear-gradient(90deg,rgba(200,255,56,.04),transparent 80%); }
.player-identity { grid-area:identity; min-width:0; }
.player-identity > div { min-width:0; }
.player-identity strong,.player-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-rail-top .player-identity { justify-self:end; flex-direction:row-reverse; text-align:right; }
.player-stats { grid-area:stats; }
.player-stats > span { background:none; border:0; min-width:62px; padding:4px 7px; }
.player-rail .turn-chip { grid-area:status; }
.game-sidebar { grid-template-rows:auto minmax(180px,1fr) auto; gap:16px; }
.turn-panel { background:linear-gradient(150deg,rgba(26,34,29,.85),rgba(16,20,29,.94)); border-color:rgba(200,255,56,.14); }
.match-panel { background:none; border:0; border-radius:0; box-shadow:none; padding:9px 4px 0; }
.match-panel .section-kicker { color:#8e9aaa; }
.match-panel h3 { font-size:13px; }
.match-detail-row { border:0; padding:7px 0; font-size:10px; }
.match-detail-row strong { font-size:11px; }
.match-detail-row.total { border-top:1px solid var(--line); margin-top:4px; padding-top:12px; }
.cube-row { margin-top:10px; }
.move-log-panel { background:rgba(19,22,32,.6); border-color:rgba(255,255,255,.06); }
.log-item strong { font-size:10px; line-height:1.5; }
.log-item small { font-size:8px; line-height:1.4; }
.log-item { padding:9px 0; }

/* Keep the triangular points clean: moves are signaled on the pieces themselves. */
.point.legal-source,.point.selected { box-shadow:none; outline:none; background:none; }
.point.legal-source::before,.point.selected::before { filter:drop-shadow(0 3px 4px rgba(0,0,0,.1)); }
.point.legal-source:not(.selected) .checker:last-child { filter:drop-shadow(0 0 5px rgba(205,255,135,.7)); }
.checker.selected-checker { box-shadow:0 0 15px rgba(200,255,56,.72),0 0 29px rgba(200,255,56,.32),0 5px 12px rgba(0,0,0,.35); animation:checkerGlow 1.9s ease-in-out infinite; z-index:2; }
@keyframes checkerGlow { 0%,100% { filter:drop-shadow(0 0 4px rgba(200,255,56,.25)); } 50% { filter:drop-shadow(0 0 11px rgba(200,255,56,.78)); } }
.point.legal-destination { background:none; box-shadow:none; }
.point.legal-destination::after { width:20px; height:20px; border:1px solid rgba(220,255,177,.75); background:radial-gradient(circle,rgba(226,255,198,.95) 0 16%,rgba(190,255,91,.13) 22% 55%,transparent 62%); box-shadow:0 0 18px rgba(200,255,56,.28); border-radius:50%; animation:destinationBreathe 1.9s ease-in-out infinite; }
@keyframes destinationBreathe { 0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(.9); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.bar-zone.legal-source,.bar-zone.selected { box-shadow:none; background:none; }
.bar-zone.legal-source .bar-checker:last-child { filter:drop-shadow(0 0 6px rgba(200,255,56,.6)); }
.bar-zone.selected .bar-checker:last-child { box-shadow:0 0 18px rgba(200,255,56,.68),0 5px 12px rgba(0,0,0,.35); animation:checkerGlow 1.9s ease-in-out infinite; }
.bearoff-tray.legal-destination { box-shadow:none; background:linear-gradient(90deg,var(--rail),color-mix(in srgb,var(--lime),var(--rail) 83%)); }
.bearoff-tray.legal-destination::after { width:14px; height:14px; background:radial-gradient(circle,var(--lime),rgba(200,255,56,.08) 70%); box-shadow:0 0 15px rgba(200,255,56,.5); top:20%; }
.point:focus-visible,.bar-zone:focus-visible { outline:2px solid #e7f9cb; outline-offset:-3px; border-radius:10px; }

/* All die faces are sampled once. Only their transforms animate. */
.dice-zone { overflow:visible; perspective:600px; }
.dice-zone.rolling .game-die { animation:diceTumble var(--dice-roll-duration,1200ms) linear both; will-change:transform; }
.dice-zone.rolling .game-die:nth-child(even) { animation-name:diceTumbleAlternate; }
@keyframes diceTumble {
  0% { transform:translate(-10px,-7px) rotate(-70deg) scale(.82); }
  16% { transform:translate(8px,-16px) rotate(105deg) scale(1.08); }
  34% { transform:translate(-5px,1px) rotate(235deg) scale(.93); }
  52% { transform:translate(4px,-10px) rotate(318deg) scale(1.03); }
  69% { transform:translate(-2px,0) rotate(368deg) scale(.97); }
  82% { transform:translate(1px,-4px) rotate(355deg); }
  92% { transform:translate(0,0) rotate(361deg); }
  100% { transform:translate(0,0) rotate(360deg) scale(1); }
}
@keyframes diceTumbleAlternate {
  0% { transform:translate(9px,-4px) rotate(85deg) scale(.86); }
  16% { transform:translate(-6px,-9px) rotate(-80deg) scale(1.04); }
  34% { transform:translate(5px,-17px) rotate(-210deg) scale(1.09); }
  52% { transform:translate(-3px,1px) rotate(-309deg) scale(.93); }
  69% { transform:translate(2px,-7px) rotate(-369deg) scale(1.02); }
  82% { transform:translate(-1px,0) rotate(-355deg); }
  92% { transform:translate(0,-2px) rotate(-362deg); }
  100% { transform:translate(0,0) rotate(-360deg) scale(1); }
}

@media (max-width:1220px) and (min-width:961px) {
  .lobby-hub { grid-template-columns:minmax(0,1fr) 292px; gap:16px; }
  .arena-visual .mini-board { right:-40px; }
  .arena-hero .hero-copy { padding-left:24px; }
  .arena-hero #cashArenaTitle { font-size:38px; }
  .cash-duel-option,.cash-tournament-option { padding-left:20px; padding-right:20px; }
  .rewards-hub { padding:20px; }
  .lobby-hub .account-callout { grid-template-columns:auto 1fr; }
  .lobby-hub .account-callout-actions { grid-column:2; }
}
@media (max-width:960px) {
  .lobby-hub { grid-template-columns:minmax(0,1fr) 282px; gap:16px; }
  .arena-hero.hero-card { grid-template-columns:1fr; min-height:0; }
  .arena-visual.hero-visual { display:none; }
  .arena-hero .hero-copy { padding:24px; }
  .arena-hero #cashArenaTitle { font-size:36px; }
  .cash-options.mode-grid { grid-template-columns:1fr; }
  .cash-tournament-option { border-left:0; border-top:1px solid rgba(172,150,255,.15); }
  .cash-tournament-option h3 { margin-top:12px; }
  .rewards-hub { padding:20px; }
  .practice-options { grid-template-columns:1fr; gap:0; }
  .practice-lounge-heading { display:block; }
  .practice-lounge-heading h2 { margin-top:7px; }
  .lobby-hub .account-callout { grid-template-columns:1fr; }
  .lobby-hub .account-callout-icon { display:none; }
  .lobby-hub .account-callout-actions { grid-column:auto; }
  .arena-footnote { flex-wrap:wrap; justify-content:flex-start; gap:5px 12px; padding:8px 20px; }
  .game-sidebar { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .game-sidebar .turn-panel { grid-row:1 / span 2; }
  .game-sidebar .move-log-panel { grid-row:1; grid-column:2; }
  .game-sidebar .match-panel { grid-row:2; grid-column:2; }
}
@media (max-width:720px) {
  .lobby-welcome { margin-bottom:15px; gap:8px; }
  .lobby-welcome h1 { font-size:24px; margin-top:5px; }
  .lobby-welcome .section-kicker { font-size:8px; }
  .fairness-link { display:none; }
  .lobby-progress-peek { display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; margin-bottom:14px; border:1px solid rgba(200,255,56,.12); border-radius:12px; background:rgba(200,255,56,.025); text-align:left; cursor:pointer; }
  .peek-level { width:31px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:var(--lime); font-size:17px; font-weight:900; border:1px solid rgba(200,255,56,.22); border-radius:9px; }
  .peek-copy { display:grid; gap:4px; min-width:0; }
  .peek-copy strong { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .peek-copy small { font-size:9px; color:#959fb1; }
  .peek-reward { font-size:9px; color:#dec991; margin-left:auto; text-align:right; max-width:90px; line-height:1.5; }
  .lobby-hub { grid-template-columns:1fr; grid-template-areas:"arena" "rewards" "practice" "account"; gap:20px; }
  .cash-arena { border-radius:20px; }
  .arena-hero.hero-card { grid-template-columns:1fr; }
  .arena-hero .hero-copy { padding:24px 20px 23px; }
  .arena-hero .eyebrow { margin-bottom:15px; }
  .arena-hero #cashArenaTitle { font-size:clamp(32px,10vw,47px); }
  .arena-hero .hero-copy p { font-size:12px; margin-bottom:13px; }
  .cash-options.mode-grid { grid-template-columns:1fr; }
  .cash-duel-option { padding:20px; }
  .cash-options h3 { font-size:23px; }
  .cash-tournament-option { padding:24px 20px 20px; }
  .tournament-prize-line { margin:15px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .tournament-prize-line strong { font-size:18px; white-space:nowrap; }
  .tournament-prize-line span { max-width:95px; line-height:1.5; }
  .arena-footnote { gap:0 15px; padding:6px 20px; font-size:9px; }
  .arena-footnote button { margin-left:auto; min-height:36px; }
  .rewards-hub { position:static; padding:22px; border-radius:20px; scroll-margin-top:90px; }
  .rewards-hub h2 { font-size:27px; }
  .rewards-hub .level-progress-copy strong { font-size:13px; }
  .rewards-hub .level-progress-copy > span { font-size:11px; }
  .unlock-preview strong { font-size:12px; }
  .unlock-preview small { font-size:10px; }
  .unlock-note { font-size:10px; }
  .daily-inline p { font-size:11px; }
  .vault-link { padding-top:10px; }
  .practice-lounge { padding:5px 1px 0; }
  .practice-option { padding:18px 4px; min-height:74px; }
  .practice-lounge-heading h2 { font-size:20px; }
  .lobby-hub .account-callout { grid-template-columns:1fr; padding:18px; }
  .lobby-hub .account-callout h2 { font-size:15px; }
  .lobby-hub .account-callout p { font-size:11px; }
  .lobby-hub .account-callout-actions { display:grid; grid-template-columns:1fr 1fr; }
  .lobby-hub .account-callout-actions button { min-height:44px; font-size:11px; }
  .player-rail-top { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"status identity"; }
  .player-rail-bottom { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"identity status"; }
  .player-rail { border-radius:0; }
}
@media (max-width:720px) and (orientation:portrait) {
  .game-topbar { border-radius:0; padding:7px 0; }
  .game-layout { grid-template-areas:"top" "controls" "board" "bottom" "log" "match"; }
  .game-sidebar .turn-panel { grid-area:controls; }
  .game-sidebar .move-log-panel { grid-area:log; }
  .game-sidebar .match-panel { grid-area:match; }
  .match-panel { border:0; border-radius:0; padding:14px 9px 10px; background:none; }
  .game-pot strong { font-size:18px; }
  .game-mode-copy strong { font-size:12px; }
  .player-rail-top .player-identity { max-width:100%; }
  .player-identity small { font-size:8px; }
  .point.legal-destination::after { width:15px; height:15px; }
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  .game-topbar { border-radius:0; padding:4px 0; }
  .player-rail-top,.player-rail-bottom { grid-template-columns:minmax(0,1fr); grid-template-areas:"identity"; border-radius:0; }
  .game-sidebar .turn-panel { grid-area:controls; }
  .player-rail { padding:5px 7px; }
  .game-pot strong { font-size:16px; }
  .lobby-hub { grid-template-columns:minmax(0,1fr) 275px; grid-template-areas:"arena rewards" "practice rewards" "account rewards"; }
  .rewards-hub { position:static; padding:18px; }
  .arena-visual.hero-visual { display:none; }
  .arena-hero.hero-card,.cash-options.mode-grid { grid-template-columns:1fr; }
}
@media (max-width:340px) {
  .lobby-welcome h1 { font-size:22px; }
  .arena-footnote { gap:0 10px; font-size:8px; }
  .arena-footnote button { font-size:8px; }
  .rewards-hub { padding:18px; }
  .game-mode-copy strong { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .checker.selected-checker,.bar-zone.selected .bar-checker:last-child,.point.legal-destination::after,.dice-zone.rolling .game-die { animation:none !important; }
}
/* Keep the active board composited at full opacity during viewport changes. */
body.is-game-view .game-view { animation:none; }
.daily-panel.daily-inline::after { display:none; }
@media (max-width:720px) {
  .arena-hero #cashArenaTitle { font-size:clamp(28px,8.6vw,42px); }
  .arena-footnote button { min-height:44px; }
}

/* V1.6: guide the next legal action, not every checker on the table.
   Pulses grow a circular halo without moving checkers or their hit targets. */
.bar-zone { border:0; padding:0; background:transparent; color:inherit; font:inherit; }
.bar-zone:disabled,.bearoff-tray:disabled { opacity:1; cursor:default; }
.point[aria-disabled="true"] { cursor:default; }
.point.legal-source:not(.selected) .checker:last-child,
.bar-zone.legal-source .bar-checker:last-child { filter:none; }

.checker.movable-checker,.bar-checker.movable-checker {
  z-index:3;
  box-shadow:0 0 10px rgba(200,255,56,.82),0 0 23px rgba(200,255,56,.38),0 5px 12px rgba(0,0,0,.4),inset 0 0 0 3px rgba(255,255,255,.14);
}
.movable-checker::after {
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,transparent 42%,rgba(233,255,196,.14) 53%,rgba(200,255,56,.8) 59%,rgba(200,255,56,.28) 66%,transparent 73%);
  box-shadow:0 0 14px rgba(200,255,56,.72),0 0 28px rgba(200,255,56,.25);
  animation:checkerGuidePulse 1.45s ease-in-out infinite;
}
@keyframes checkerGuidePulse {
  0%,100% { opacity:var(--guide-low,.28); transform:scale(.82); }
  50% { opacity:var(--guide-high,1); transform:scale(1.12); }
}
.checker.selected-checker,.bar-zone.selected .bar-checker:last-child {
  --guide-low:.55;
  --guide-high:1;
  box-shadow:0 0 15px rgba(222,255,159,.95),0 0 33px rgba(200,255,56,.72),0 0 45px rgba(200,255,56,.26),0 5px 12px rgba(0,0,0,.4);
  animation:checkerGlow 1.45s ease-in-out infinite;
  z-index:4;
}
@keyframes checkerGlow {
  0%,100% { filter:drop-shadow(0 0 2px rgba(200,255,56,.28)); }
  50% { filter:drop-shadow(0 0 9px rgba(222,255,159,.85)); }
}
/* Keep alternative sources visible but emphasize the selected piece and targets. */
.board-frame[data-move-guidance="destination"] .point:not(.selected) .movable-checker {
  --guide-low:.14;
  --guide-high:.48;
  box-shadow:0 0 8px rgba(200,255,56,.4),0 4px 12px rgba(0,0,0,.35);
}
.point.legal-destination { z-index:5; }
.point.legal-destination::after {
  width:26px;
  height:26px;
  border:1px solid rgba(238,255,211,.95);
  background:radial-gradient(circle,#f1ffdc 0 17%,rgba(200,255,56,.8) 20% 28%,rgba(200,255,56,.13) 34% 58%,transparent 64%);
  box-shadow:0 0 0 4px rgba(200,255,56,.12),0 0 24px rgba(200,255,56,.65);
  animation:destinationBreathe 1.45s ease-in-out infinite;
  pointer-events:none;
}
.bearoff-tray.legal-destination::after {
  width:18px;
  height:18px;
  background:radial-gradient(circle,#f1ffdc 0 20%,rgba(200,255,56,.7) 26%,transparent 72%);
  box-shadow:0 0 18px rgba(200,255,56,.8);
  animation:bearoffGuidePulse 1.45s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bearoffGuidePulse {
  0%,100% { opacity:.6; transform:scale(.9); }
  50% { opacity:1; transform:scale(1.15); }
}
.checker-count { position:relative; z-index:1; }
.bar-zone:focus-visible,.bearoff-tray:focus-visible { outline:2px solid #e7f9cb; outline-offset:-3px; }
#boardMoveHint { color:#cfe8a3; }
@media (max-width:720px), (max-height:520px) and (max-width:1000px) {
  .point.legal-destination::after { width:20px; height:20px; }
  .movable-checker::after { inset:-9%; }
}
@media (prefers-reduced-motion:reduce) {
  .movable-checker::after,
  .checker.selected-checker,
  .bar-zone.selected .bar-checker:last-child,
  .point.legal-destination::after,
  .bearoff-tray.legal-destination::after { animation:none !important; }
  .movable-checker::after { opacity:.85; transform:scale(1); }
  .checker.selected-checker,.bar-zone.selected .bar-checker:last-child { filter:none; }
}

/* V1.7: the desktop navigation stays with the player.
   Use a real viewport-fixed header: .app-shell has overflow:hidden, which stops
   the old sticky header from following document scrolling. Reserve its exact
   height in the shell so no view starts behind it. Phone landscape keeps the
   existing compact layout, including hidden site navigation during a match. */
:root { --desktop-header-height: calc(78px + var(--safe-top)); }
@media (min-width:961px) and (min-height:521px), (min-width:1001px) {
  html { scroll-padding-top:calc(var(--desktop-header-height) + 18px); }
  .app-shell { padding-top:var(--desktop-header-height); }
  .topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--desktop-header-height);
    padding-top:var(--safe-top);
    background:rgba(9,11,17,.97);
    border-bottom-color:rgba(255,255,255,.14);
    box-shadow:0 8px 28px rgba(0,0,0,.24);
  }
  .main-nav .nav-button { min-height:40px; }
}

/* Clear free-play destinations, with distinct identities from the cash arena.
   Each card is one semantic button; the CTA is a span, not a nested button. */
.practice-lounge { padding:8px 0 0; }
.practice-lounge-heading { align-items:flex-end; gap:18px; margin-bottom:18px; }
.practice-lounge-heading .section-kicker { color:#b3c5d9; font-size:10px; letter-spacing:.17em; }
.practice-lounge-heading h2 { margin:6px 0 0; font-size:27px; font-weight:850; letter-spacing:-.04em; }
.practice-lounge-heading p { margin:0 0 3px; color:#a5b1c5; font-size:12px; line-height:1.5; }
.practice-options { gap:16px; align-items:stretch; }
.practice-option {
  --practice-accent:#8bd7ff;
  --practice-accent-rgb:139,215,255;
  --practice-deep:#12283c;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  min-width:0;
  min-height:252px;
  padding:23px;
  border:1px solid rgba(var(--practice-accent-rgb),.36);
  border-radius:20px;
  background:radial-gradient(ellipse at 100% 0%,rgba(var(--practice-accent-rgb),.10),transparent 68%),linear-gradient(135deg,var(--practice-deep),#111722 75%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.16);
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}
.practice-option.pvp-card { --practice-accent:#c5b3ff; --practice-accent-rgb:197,179,255; --practice-deep:#282039; }
.practice-option .practice-card-top { display:flex; gap:10px; align-items:center; margin-bottom:17px; }
.practice-option .practice-symbol {
  display:grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  border-radius:13px;
  border:1px solid rgba(var(--practice-accent-rgb),.26);
  color:var(--practice-accent);
  background:rgba(var(--practice-accent-rgb),.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.practice-symbol svg { width:29px; height:29px; }
.practice-mode-badge { font-size:9px; line-height:1.5; letter-spacing:.11em; font-weight:800; color:var(--practice-accent); }
.practice-free-tag {
  margin-left:auto;
  padding:5px 8px;
  border:1px solid rgba(var(--practice-accent-rgb),.24);
  border-radius:6px;
  background:rgba(var(--practice-accent-rgb),.08);
  font-size:9px;
  font-weight:850;
  letter-spacing:.07em;
  color:var(--practice-accent);
}
.practice-option > .practice-copy { display:grid; gap:9px; margin-bottom:15px; }
.practice-option .practice-copy strong { font-size:25px; line-height:1.15; letter-spacing:-.035em; color:#f7faff; font-weight:850; }
.practice-copy > span { font-size:12px; line-height:1.65; color:#bdc7d9; max-width:380px; }
.practice-features { display:flex; align-items:center; flex-wrap:wrap; gap:7px 15px; color:#b6c5d6; font-size:10px; line-height:1.5; margin-bottom:21px; }
.practice-features > span { display:inline-flex; align-items:center; gap:6px; }
.practice-features > span::before { content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--practice-accent); }
.practice-option > .practice-card-cta {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:12px 15px;
  border-radius:11px;
  color:#0c1727;
  background:var(--practice-accent);
  font-size:12px;
  font-weight:850;
  box-shadow:0 5px 20px rgba(var(--practice-accent-rgb),.07);
}
.practice-cta-arrow { font-size:20px; line-height:1; transition:transform 180ms ease; }
.practice-option:focus-visible { outline:3px solid var(--practice-accent); outline-offset:4px; }
@media (hover:hover) {
  .practice-option:hover {
    transform:translateY(-3px);
    background:radial-gradient(ellipse at 100% 0%,rgba(var(--practice-accent-rgb),.16),transparent 68%),linear-gradient(135deg,var(--practice-deep),#151c29 75%);
    border-color:rgba(var(--practice-accent-rgb),.7);
    box-shadow:0 14px 32px rgba(0,0,0,.26),0 0 24px rgba(var(--practice-accent-rgb),.08);
  }
  .practice-option:hover .practice-cta-arrow { transform:translateX(3px); }
}
@media (max-width:1220px) and (min-width:961px) {
  .practice-option { padding:19px; }
  .practice-option .practice-copy strong { font-size:22px; }
  .practice-mode-badge { font-size:8px; letter-spacing:.06em; }
  .practice-option .practice-card-top { gap:8px; }
}
@media (max-width:960px) {
  .practice-lounge-heading p { margin-top:8px; }
  .practice-options { gap:14px; }
  .practice-option { min-height:0; padding:21px; }
}
@media (max-width:720px), (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  .practice-lounge { padding:6px 0 0; }
  .practice-lounge-heading h2 { font-size:25px; }
  .practice-lounge-heading p { font-size:11px; }
  .practice-option { padding:20px; border-radius:18px; }
  .practice-option .practice-copy strong { font-size:24px; }
  .practice-option .practice-card-top { margin-bottom:16px; }
  .practice-option > .practice-card-cta { min-height:48px; }
}
@media (prefers-reduced-motion:reduce) {
  .practice-option,.practice-cta-arrow { transition:none !important; transform:none !important; }
}

/* Cashgammon V1.10: compact player profile, celebration feedback and tighter mobile chrome. */
#modalCard[data-kind="profile"] {
  width:min(820px,calc(100vw - 48px));
  padding:28px;
}
#modalCard[data-kind="profile"] .profile-modal-grid { margin:10px 0 14px; }
#modalCard[data-kind="profile"] .account-identity-strip { margin:10px 0 14px; }
#modalCard[data-kind="profile"] .profile-stat-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
#modalCard[data-kind="profile"] .profile-stat-grid .modal-stat {
  min-width:0;
  min-height:76px;
  align-content:center;
  gap:5px;
  padding:11px 10px;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
#modalCard[data-kind="profile"] .profile-stat-grid .modal-stat:last-child { border-right:0; }
#modalCard[data-kind="profile"] .profile-stat-grid small {
  min-height:18px;
  color:#8d96a8;
  font-size:7px;
  line-height:1.3;
  letter-spacing:.06em;
}
#modalCard[data-kind="profile"] .profile-stat-grid strong {
  min-width:0;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.2;
}
#modalCard[data-kind="profile"] .profile-name-edit { margin-top:14px; }
#modalCard[data-kind="profile"] .profile-name-edit > label {
  display:block;
  margin:0 0 6px;
  color:#9aa3b4;
  font-size:8px;
}
#modalCard[data-kind="profile"] .profile-name-controls {
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  gap:9px;
}
#modalCard[data-kind="profile"] .profile-name-controls input {
  min-width:0;
  min-height:48px;
  padding:10px 13px;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:#0e121a;
  color:var(--text);
  outline:0;
  font:inherit;
  font-size:14px;
}
#modalCard[data-kind="profile"] .profile-name-controls input:focus {
  border-color:var(--lime);
  box-shadow:0 0 0 2px rgba(200,255,56,.12);
}
#modalCard[data-kind="profile"] .profile-name-controls .primary-button { min-height:48px; }
#modalCard[data-kind="profile"] .profile-command-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:10px;
}
#modalCard[data-kind="profile"] .profile-command-grid button,
#modalCard[data-kind="profile"] .profile-rewards-button { min-height:44px; }
#modalCard[data-kind="profile"] .profile-rewards-button { margin-top:10px; }
#modalCard[data-kind="profile"] .profile-account-footer {
  margin-top:13px;
  padding-top:13px;
  align-items:center;
}
#modalCard[data-kind="profile"] .profile-account-footer p { max-width:none; }
#modalCard[data-kind="profile"] .profile-account-footer .danger-button {
  width:auto;
  min-width:88px;
  min-height:42px;
}

/* Cloud reward redemption uses the same celebration layer as local rewards. */
.confetti-layer { isolation:isolate; }
.confetti-piece {
  box-shadow:0 0 10px color-mix(in srgb,currentColor 30%,transparent);
  will-change:transform,opacity;
}

@media (max-width:720px), (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  .topbar {
    min-height:calc(56px + var(--safe-top));
    padding:calc(5px + var(--safe-top)) max(10px,var(--safe-right)) 5px max(10px,var(--safe-left));
    gap:6px;
  }
  .brand-mark { width:34px; height:34px; }
  .brand-copy { font-size:15px; }
  .topbar-actions { gap:5px; }
  .wallet-pill {
    display:flex;
    min-height:40px;
    height:40px;
    padding:0 11px;
    align-items:center;
    justify-content:center;
  }
  .wallet-pill strong { font-size:13px; line-height:1; }
  .profile-pill {
    min-width:40px;
    min-height:40px;
    height:40px;
    padding:3px;
  }
  .profile-pill .avatar-ring { width:34px; height:34px; }

  #modalCard[data-kind="profile"] {
    width:100% !important;
    padding:23px max(16px,var(--safe-right)) calc(16px + var(--safe-bottom)) max(16px,var(--safe-left));
  }
  #modalCard[data-kind="profile"] .profile-modal-grid { margin:8px 0 12px; }
  #modalCard[data-kind="profile"] .account-identity-strip {
    margin:9px 0 12px;
    padding:10px 11px;
    flex-direction:row;
    align-items:center;
  }
  #modalCard[data-kind="profile"] .profile-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #modalCard[data-kind="profile"] .profile-stat-grid .modal-stat {
    min-height:67px;
    padding:9px 8px;
    border-right:1px solid var(--line);
    border-top:0;
  }
  #modalCard[data-kind="profile"] .profile-stat-grid .modal-stat:nth-child(3n) { border-right:0; }
  #modalCard[data-kind="profile"] .profile-stat-grid .modal-stat:nth-child(n+4) { border-top:1px solid var(--line); }
  #modalCard[data-kind="profile"] .profile-stat-grid strong { font-size:11px; }
  #modalCard[data-kind="profile"] .profile-name-edit { margin-top:12px; }
  #modalCard[data-kind="profile"] .profile-name-controls { grid-template-columns:minmax(0,1fr) 82px; gap:7px; }
  #modalCard[data-kind="profile"] .profile-name-controls input { min-height:46px; font-size:16px; }
  #modalCard[data-kind="profile"] .profile-name-controls .primary-button { min-height:46px; padding-inline:10px; }
  #modalCard[data-kind="profile"] .profile-command-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
  #modalCard[data-kind="profile"] .profile-command-grid button { min-height:44px; padding-inline:8px; font-size:10px; }
  #modalCard[data-kind="profile"] .profile-account-footer {
    flex-direction:row;
    align-items:center;
    gap:10px;
    margin-top:11px;
    padding-top:11px;
  }
  #modalCard[data-kind="profile"] .profile-account-footer p { font-size:7px; line-height:1.4; }
  #modalCard[data-kind="profile"] .profile-account-footer .danger-button {
    width:auto;
    min-width:78px;
    min-height:40px;
    padding-inline:10px;
  }
}

@media (max-width:340px) {
  #modalCard[data-kind="profile"] .profile-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #modalCard[data-kind="profile"] .profile-stat-grid small { font-size:6px; }
  #modalCard[data-kind="profile"] .profile-stat-grid strong { font-size:10px; }
  #modalCard[data-kind="profile"] .profile-name-controls { grid-template-columns:minmax(0,1fr) 72px; }
}

/* Keep a 44px touch target while making the visible mobile balance capsule compact. */
@media (max-width:720px), (orientation:landscape) and (max-height:520px) and (max-width:1000px) {
  .topbar { min-height:calc(54px + var(--safe-top)); }
  .wallet-pill {
    min-height:44px;
    height:44px;
    padding:5px 0;
    border:0;
    background:transparent;
  }
  .wallet-pill strong {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.035);
  }
}