@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Public+Sans:wght@500;650;750;850&display=swap");

:root {
  --n1-paper: #f7edda;
  --n1-paper-deep: #f1e3c8;
  --n1-ink: #28160e;
  --n1-red: #c94536;
  --n1-red-dark: #913027;
  --n1-yellow: #e7c451;
  --n1-green: #3f7852;
  --n1-green-mid: #6ca57a;
  --n1-mint: #c2e9c4;
  --n1-blue: #a9dded;
  --n1-line: 2px;
  --n1-shadow: 5px 6px 0 var(--n1-ink);
}

/* ------------------------------------------------------------------------
   Shared casino entry shell

   Blackjack and Hold'em use different engines, but their entry experience
   should feel like one room: the same header, game switcher, room facts and
   setup surface. The room-specific CSS starts after this shared contract.
   ------------------------------------------------------------------------ */
:root {
  --n1-violet: #8e75bf;
  --n1-violet-soft: #eee8fb;
  --n1-surface: #fff9ed;
  --n1-surface-muted: #f3e9d2;
  --n1-line-soft: #d4c4b0;
}

html,
body {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0; /* the browser default margin was the page's only scrollbar */
  background-color: var(--n1-paper);
}

/* Visibility utility shared by every casino page. The hall loads only this
   stylesheet, and its modals, the cage, and the wallet all toggle this class. */
.hide-element {
  display: none !important;
}

#main-menu {
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

.n1-casino-hero {
  position: relative;
  inset: auto;
  min-height: 292px;
  height: auto;
  padding: 54px clamp(24px, 5vw, 72px) 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px 34px;
  background: var(--n1-paper);
  border-bottom: var(--n1-line) solid var(--n1-ink);
}

.n1-hero-copy {
  min-width: 0;
}

.n1-casino-hero .n1-hero-copy > p:first-child {
  margin: 0;
  color: var(--n1-red-dark);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#main-menu .n1-casino-hero #blackjack-title,
.n1-casino-hero-holdem #holdem-title {
  width: auto;
  margin: 15px 0 0;
  color: var(--n1-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -0.06em;
  text-align: left;
}

.n1-hero-deck {
  max-width: 470px;
  margin: 16px 0 0;
  color: #6d594d;
  font-size: 14px;
  line-height: 1.4;
}

.n1-game-tabs {
  position: static;
  left: auto;
  top: auto;
  display: flex;
  align-self: center;
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: var(--n1-shadow);
}

.n1-game-tab {
  min-width: 170px;
  min-height: 66px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 9px;
  align-items: center;
  color: #675247;
  background: var(--n1-surface);
  border: 0;
  border-right: 1px solid var(--n1-line-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.n1-game-tab:last-child {
  border-right: 0;
}

.n1-game-tab i {
  grid-row: 1 / span 2;
  margin: 0;
  font-size: 16px;
}

.n1-game-tab small {
  color: #927d6d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.n1-game-tab.is-active,
.n1-game-tab[aria-current="page"] {
  color: white;
  background: var(--n1-green);
}

.n1-game-tab.is-active small,
.n1-game-tab[aria-current="page"] small {
  color: var(--n1-mint);
}

.n1-game-tab:hover:not(.is-active):not([aria-current="page"]) {
  color: var(--n1-ink);
  background: var(--n1-yellow);
}

.n1-hero-status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  padding-top: 16px;
  border-top: 1px solid var(--n1-line-soft);
  color: #6d594d;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.n1-hero-status span:first-child {
  color: var(--n1-green);
}

.n1-hero-status i {
  margin-right: 6px;
  font-size: 7px;
  vertical-align: middle;
}

.n1-entry-grid {
  width: min(1140px, calc(100% - 48px));
  margin: 30px auto 0;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(430px, 1.18fr);
  gap: 24px;
  align-items: start;
}

.n1-room-directory {
  display: grid;
  gap: 12px;
}

.n1-directory-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 5px;
  border-bottom: 1px solid var(--n1-line-soft);
  text-transform: uppercase;
}

.n1-directory-heading span {
  color: var(--n1-red-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.n1-directory-heading strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 15px;
}

.n1-room-card {
  padding: 17px 17px 16px;
  color: var(--n1-ink);
  background: var(--n1-surface);
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: var(--n1-shadow);
}

.n1-room-card-poker {
  background: var(--n1-violet-soft);
  border-color: var(--n1-violet);
  box-shadow: 5px 6px 0 #654c8f;
}

.n1-room-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
}

.n1-room-index {
  color: var(--n1-red-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.n1-room-state {
  color: var(--n1-green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.n1-room-state.is-preview {
  color: var(--n1-violet);
}

.n1-room-state i {
  margin-right: 5px;
  font-size: 7px;
}

.n1-room-art {
  position: relative;
  height: 112px;
  margin: 13px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--n1-green);
  border: 2px solid var(--n1-ink);
  overflow: hidden;
}

.n1-room-art::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 249, 237, 0.48);
  pointer-events: none;
}

.n1-room-art-poker {
  background: var(--n1-violet);
}

.n1-room-art img {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(40, 22, 14, 0.52));
}

.n1-room-art img:first-child {
  transform: rotate(-9deg) translateX(5px);
}

.n1-room-art img:nth-child(2) {
  transform: rotate(9deg) translateX(-5px);
}

.n1-room-art strong {
  position: absolute;
  right: 13px;
  bottom: 9px;
  z-index: 2;
  color: var(--n1-yellow);
  font-family: "Archivo Black", sans-serif;
  font-size: 22px;
  letter-spacing: -0.06em;
}

.n1-room-card h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.n1-room-card p {
  min-height: 40px;
  margin: 7px 0 13px;
  color: #6d594d;
  font-size: 12px;
  line-height: 1.42;
}

.n1-room-facts {
  margin: 0;
  padding: 10px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--n1-line-soft);
  border-bottom: 1px solid var(--n1-line-soft);
}

.n1-room-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.n1-room-facts div + div {
  padding-left: 9px;
  border-left: 1px solid var(--n1-line-soft);
}

.n1-room-facts dt {
  color: #927d6d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.n1-room-facts dd {
  margin: 0;
  color: var(--n1-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.n1-room-card-cta {
  position: relative;
  overflow: hidden;
  min-height: 40px;
  margin-top: 13px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.n1-room-card-cta:hover {
  color: white;
  background: var(--n1-red);
  transform: translate(-1px, -1px);
}

.n1-room-card-poker .n1-room-card-cta {
  background: #d8c8f1;
}

.n1-entry-content {
  min-width: 0;
}

#main-box {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-height: 468px;
  margin: 0;
  transform: none;
}

.n1-form-note {
  padding: 12px 3px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  color: #6d594d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.n1-form-note span:first-child {
  color: var(--n1-green);
}

.n1-form-note i {
  margin-right: 5px;
}

#credits {
  position: relative;
  right: auto;
  bottom: auto;
  display: block;
  width: min(1140px, calc(100% - 48px));
  margin: -54px auto 26px;
  color: #6d594d;
  text-align: right;
}

/* The Hold'em entry reuses the same hero and panel anatomy. */
#h-entry {
  min-height: 100vh;
  padding-top: 72px;
  overflow: visible;
  color: var(--n1-ink);
}

#h-entry .n1-casino-hero {
  margin: 0;
}

@media (max-width: 900px) {
  .n1-casino-hero {
    min-height: 245px;
    padding: 34px 22px 24px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
  }

  #main-menu .n1-casino-hero #blackjack-title,
  .n1-casino-hero-holdem #holdem-title {
    font-size: 56px;
  }

  .n1-game-tab {
    min-width: 132px;
    min-height: 58px;
    padding: 10px 11px;
    font-size: 11px;
  }

  .n1-entry-grid {
    width: min(680px, calc(100% - 36px));
    grid-template-columns: 1fr;
  }

  .n1-room-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .n1-directory-heading {
    grid-column: 1 / -1;
  }

  #main-box {
    min-height: 0;
  }

  #credits {
    width: calc(100% - 36px);
    margin-top: -48px;
  }
}

@media (max-width: 600px) {
  .n1-world-header {
    padding-inline: 14px;
  }

  .n1-world-header-actions {
    gap: 8px;
  }

  .n1-casino-hero {
    min-height: 302px;
    padding: 28px 18px 20px;
    display: block;
  }

  #main-menu .n1-casino-hero #blackjack-title,
  .n1-casino-hero-holdem #holdem-title {
    margin-top: 13px;
    font-size: 48px;
  }

  .n1-hero-deck {
    max-width: 300px;
    margin-top: 12px;
    font-size: 12px;
  }

  .n1-game-tabs {
    width: 100%;
    margin-top: 22px;
    box-shadow: 4px 5px 0 var(--n1-ink);
  }

  .n1-game-tab {
    flex: 1 1 0;
    min-width: 0;
  }

  .n1-hero-status {
    margin-top: 20px;
    padding-top: 12px;
    gap: 6px 14px;
    font-size: 9px;
  }

  .n1-entry-grid {
    width: calc(100% - 28px);
    margin-top: 22px;
    padding-bottom: 54px;
  }

  .n1-room-directory {
    grid-template-columns: 1fr;
  }

  .n1-directory-heading {
    grid-column: auto;
  }

  .n1-room-card {
    padding: 14px;
  }

  .n1-room-art {
    height: 96px;
  }

  .n1-room-card p {
    min-height: 0;
  }

  #main-box {
    padding-inline: 16px;
  }

  #main-box .n1-panel-heading {
    margin-inline: -16px;
  }

  .n1-form-note {
    display: grid;
    justify-content: stretch;
  }

  #credits {
    display: none;
  }
}

* {
  box-sizing: border-box;
}

html {
  overflow: hidden;
  font-family: "Public Sans", Arial, sans-serif;
}

body {
  min-height: 100vh;
  overflow: hidden;
  color: var(--n1-ink);
  background-color: var(--n1-paper);
  background-image:
    linear-gradient(rgba(67, 45, 27, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 45, 27, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}

button,
input {
  font: inherit;
}

.n1-world-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10000;
  height: 72px;
  padding: 10px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 249, 237, 0.96);
  border-bottom: var(--n1-line) solid var(--n1-ink);
}

.n1-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--n1-ink);
  text-decoration: none;
}

.n1-stamp {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--n1-red);
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: 4px 5px 0 var(--n1-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
}

.n1-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.n1-brand-copy strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.n1-brand-copy small {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.n1-lobby-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--n1-ink);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.n1-lobby-link span {
  font-size: 24px;
}

.n1-world-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The seeds wallet — one bankroll across every casino game. */
#n1-wallet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  color: var(--n1-ink);
  background: var(--n1-mint);
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-size: 12px;
  font-weight: 850;
}

#n1-wallet.hide-element {
  display: none;
}

/* Leaving a table settles the wallet first: dim everything, show the
   settling card, release when the balance has landed. */
.n1-settle {
  position: fixed;
  inset: 0;
  z-index: 10008;
  display: grid;
  place-items: center;
  background: rgba(40, 22, 14, 0.45);
}

.n1-settle-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 3px solid var(--n1-ink);
  box-shadow: 6px 6px 0 var(--n1-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.n1-settle-card::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 3px solid var(--n1-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: n1-cage-spin 700ms linear infinite;
}

/* Signed-out visitors meet a hard sign-in gate before any table. */
.n1-signin-gate {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--n1-paper);
}

.n1-signin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(360px, 100%);
  padding: 30px 26px 26px;
  text-align: center;
  background: #fff9ed;
  border: 3px solid var(--n1-ink);
  box-shadow: 6px 6px 0 var(--n1-ink);
}

.n1-signin-card .n1-stamp {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff9ed;
  background: var(--n1-red);
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 17px;
}

.n1-signin-card strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 19px;
}

.n1-signin-card p {
  margin: 0;
  color: #6d594d;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
}

.n1-signin-btn {
  margin-top: 8px;
  padding: 13px 22px;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  box-shadow: 0 4px 0 #b8963a, 0 6px 0 var(--n1-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: transform 100ms, box-shadow 100ms;
}

.n1-signin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #b8963a, 0 8px 0 var(--n1-ink);
}

/* -------- /auth: the casino's own door (identity service stays backstage) - */
.n1-auth-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.n1-auth-tabs {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.n1-auth-tab {
  flex: 1;
  padding: 9px 0;
  color: var(--n1-ink);
  background: transparent;
  border: 2px solid var(--n1-ink);
  cursor: pointer;
  font-family: "Archivo Black", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.55;
  transition: opacity 100ms, background 100ms, box-shadow 100ms;
}

.n1-auth-tab.active {
  background: var(--n1-yellow);
  box-shadow: 2px 2px 0 var(--n1-ink);
  opacity: 1;
}

.n1-auth-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  color: var(--n1-ink);
  background: #fff;
  border: 2px solid var(--n1-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
}

.n1-auth-card input:focus {
  outline: none;
  box-shadow: 2px 2px 0 var(--n1-ink);
}

button.n1-signin-btn {
  cursor: pointer;
}

.n1-signin-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.n1-gate-err {
  min-height: 15px;
  margin: 2px 0 0;
  color: var(--n1-red);
  font-size: 11.5px;
  font-weight: 700;
}

/* Round trip: the invite link lives as an icon in the header. */
.n1-share {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 13px;
  cursor: pointer;
}

.n1-share:hover { background: var(--n1-yellow); }

/* Locked rooms: visibly parked, not clickable, no hover theatrics. */
.n1-room-card.is-locked {
  cursor: default;
  filter: saturate(0.5);
}

.n1-room-card.is-locked .n1-room-card-cta::before { display: none; }

.n1-room-card.is-locked:hover .n1-room-card-cta,
.n1-room-card.is-locked:hover .n1-room-card-cta > span:first-child,
.n1-room-card.is-locked:hover .n1-room-card-cta > i {
  color: var(--n1-ink);
}

.n1-room-mode.is-locked-badge {
  color: var(--n1-ink);
  background: var(--n1-paper-deep);
}

/* Currency icons: the red chip is chips, the N1 coin is credits. */
.n1-ico {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
}

.n1-ico.n1-ico-s {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

#n1-exchange .n1-ex-actions button .n1-ico {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}

/* The cage calls the world ledger — show the wait, block double-submits. */
#n1-exchange.busy .n1-ex-actions button,
#n1-exchange.busy #n1-ex-amount {
  opacity: 0.45;
  pointer-events: none;
}

#n1-exchange.busy #n1-ex-msg::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  vertical-align: -1px;
  border: 2px solid var(--n1-ink);
  border-top-color: transparent;
  border-radius: 50%;
  animation: n1-cage-spin 700ms linear infinite;
}

@keyframes n1-cage-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton shimmer while the balance is still being fetched. */
#n1-wallet.loading b {
  min-width: 36px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  color: transparent;
  background: linear-gradient(100deg, #e6d9bd 30%, #fff9ed 50%, #e6d9bd 70%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: n1-wallet-shimmer 1.1s linear infinite;
}

@keyframes n1-wallet-shimmer {
  to { background-position: -200% 0; }
}

#n1-wallet .n1-wallet-label {
  color: var(--n1-green);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#n1-wallet b {
  font-family: "Archivo Black", sans-serif;
  font-size: 15px;
}

#n1-wallet .n1-wallet-unit {
  color: #6d594d;
  font-size: 10px;
}

/* Solo CTA — the primary action on the entry panel */
.h-solo-cta {
  margin: 18px 0 4px;
  text-align: center;
}

.solo-primary {
  width: 80% !important;
  min-height: 56px !important;
  font-size: 17px !important;
  font-family: "Archivo Black", sans-serif !important;
  color: white !important;
  background: var(--n1-green) !important;
  box-shadow: 0 6px 0 #2a5c3a, 0 9px 0 var(--n1-ink) !important;
}

.solo-primary:hover {
  background: #4a8a62 !important;
  transform: translate(-2px, -2px);
  box-shadow: 0 8px 0 #2a5c3a, 0 11px 0 var(--n1-ink) !important;
}

.h-solo-note {
  margin: 8px 0 0;
  color: #6d594d;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.h-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 4px;
  color: #a08d7c;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.h-divider::before,
.h-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d4c4b0;
}

/* Lobby */
#main-menu {
  height: 100vh;
  padding-top: 72px;
  overflow: hidden;
  color: var(--n1-ink);
}

.n1-casino-hero {
  position: absolute;
  inset: 72px 0 auto 0;
  height: 250px;
  padding: 62px 50px 30px;
  border-bottom: var(--n1-line) solid var(--n1-ink);
}

.n1-casino-hero > p {
  margin: 0;
  color: var(--n1-red-dark);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#main-menu #blackjack-title {
  position: static;
  display: block;
  width: auto;
  margin: 18px 0 0;
  color: var(--n1-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 400;
  line-height: 0.76;
  letter-spacing: -0.07em;
  text-align: left;
}

.n1-game-tabs {
  position: absolute;
  left: 39%;
  top: 105px;
  display: flex;
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: var(--n1-shadow);
}

.n1-game-tabs span {
  min-width: 190px;
  padding: 20px 26px;
  color: #675247;
  background: #fff9ed;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.n1-game-tabs .active {
  color: white;
  background: var(--n1-green);
}

/* Next game on the hall shelf: visible, priced in, not yet open. */
.n1-game-tabs .coming-soon {
  position: relative;
  color: #a08d7c;
  background: #f3e9d2;
  cursor: pointer;
  box-shadow: none;
}

.n1-game-tabs .coming-soon small {
  position: absolute;
  top: -9px;
  right: 8px;
  padding: 2px 7px;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.n1-game-tabs i {
  margin-right: 9px;
}

.n1-play-chip {
  position: absolute;
  right: 50px;
  top: 112px;
  padding: 15px 20px;
  color: var(--n1-green);
  background: var(--n1-mint);
  border: var(--n1-line) solid var(--n1-green);
  box-shadow: 3px 3px 0 rgba(40, 22, 14, 0.8);
  font-size: 14px;
  font-weight: 850;
  text-transform: uppercase;
}

#main-box {
  position: absolute;
  top: 350px;
  left: 50%;
  width: min(460px, 92vw);
  margin: 0;
  padding: 0 26px 18px;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 28px;
  transform: translateX(-50%);
  color: var(--n1-ink);
  background: #fff9ed;
  border: var(--n1-line) solid var(--n1-ink);
  border-radius: 0;
  box-shadow: var(--n1-shadow);
  text-align: center;
}

#main-box .n1-panel-heading {
  margin: 0 -26px 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--n1-yellow);
  border-bottom: var(--n1-line) solid var(--n1-ink);
  text-align: left;
  text-transform: uppercase;
  grid-column: 1 / -1;
}

.n1-panel-heading span {
  color: var(--n1-red-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.n1-panel-heading strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 16px;
  letter-spacing: -0.03em;
}

#main-box div {
  margin: 12px 0;
}

#main-box #avatar-box {
  grid-column: 1;
  margin: 0 0 12px;
}

#main-box #avatar-box .slideAvatars {
  width: 72px;
  height: 72px;
  background: var(--n1-blue);
  border: var(--n1-line) solid var(--n1-ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--n1-ink);
}

#main-box #avatar-box .slideAvatars img {
  border-radius: 50%;
}

#main-box #avatar-box button i {
  color: var(--n1-ink);
}

#main-box input {
  width: 70%;
  padding: 11px 12px;
  color: var(--n1-ink);
  background: var(--n1-paper-deep);
  border: 2px solid var(--n1-ink);
  border-radius: 0;
  font-size: 16px;
}

#main-box > div:has(#nickname) {
  grid-column: 1;
}

#main-box > div:has(#btnOffline),
#main-box > div:has(#btnCreate),
#main-box > div:has(#btnJoin) {
  grid-column: 1;
}

.n1-strategy-field {
  grid-column: 2;
  grid-row: 2 / span 2;
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 2px solid var(--n1-ink);
  text-align: left;
}

.n1-strategy-field span {
  color: var(--n1-red-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.n1-strategy-field small {
  margin: 5px 0 10px;
  color: #6d594d;
  font-size: 11px;
  font-weight: 650;
}

#main-box #agent-strategy {
  width: 100%;
  min-height: 132px;
  padding: 12px;
  resize: vertical;
  color: var(--n1-ink);
  background: var(--n1-paper-deep);
  border: 2px solid var(--n1-ink);
  border-radius: 0;
  outline: none;
  font-family: "Public Sans", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

#main-box #agent-strategy:focus {
  box-shadow: 4px 4px 0 var(--n1-yellow);
}

#main-box input:focus {
  box-shadow: 4px 4px 0 var(--n1-yellow);
}

#main-box .play-btns {
  width: 70%;
  min-height: 44px;
  padding: 10px 14px;
  justify-content: flex-start;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--n1-ink);
  font-size: 15px;
  font-weight: 850;
  text-transform: uppercase;
  transition: transform 120ms, box-shadow 120ms;
}

#main-box > div:has(#btnOffline) {
  grid-column: 1;
}

#main-box > div:has(#btnCreate),
#main-box > div:has(#btnJoin) {
  grid-column: 1;
}

#main-box #btnOffline {
  margin-top: 18px;
  color: white;
  background: var(--n1-green);
}

#main-box #btnCreate,
#main-box #btnJoin {
  color: var(--n1-ink);
  background: var(--n1-yellow);
}

#main-box #btnOffline:hover,
#main-box #btnCreate:hover,
#main-box #btnJoin:hover {
  background: var(--n1-red);
  color: white;
  box-shadow: 6px 6px 0 var(--n1-ink);
  transform: translate(-2px, -2px);
}

.n1-table-note {
  position: absolute;
  left: 50%;
  bottom: 20px;
  padding: 10px 16px;
  display: flex;
  gap: 24px;
  transform: translateX(-50%);
  background: #fff9ed;
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: 5px 5px 0 var(--n1-ink);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

#about-box {
  display: none;
}

#credits {
  right: 22px;
  bottom: 18px;
  left: auto;
  transform: none;
  color: var(--n1-ink);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

/* Game table — the entire viewport below the header IS the felt. */
#game-room {
  position: fixed;
  inset: 0;
  z-index: 1;
  height: 100vh;
  padding-top: 72px;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 100% at 50% 30%, #65b185 0, var(--n1-green-mid) 55%, #2a6c48 100%) !important;
}

#game-room::before {
  content: "Blackjack · Live Table";
  position: absolute;
  top: 121px;
  left: 50px;
  color: rgba(255, 249, 237, 0.75);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}

#game-room::after {
  content: none;
}

/* The felt speaks for itself — no printed rules, no decorative underlay. */
#table-graphics {
  display: none;
}

#dark-overlay {
  z-index: 25;
  /* Soft vignette instead of a full blur: the table and every hand stay
     readable while the player decides. */
  background: radial-gradient(ellipse at 50% 42%, rgba(248, 239, 220, 0) 52%, rgba(40, 22, 14, 0.22) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

#leave-button,
#leave-table,
#invite-link-box,
#users-online-box,
#volume-button,
#bg-color-box {
  border: 2px solid var(--n1-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--n1-ink);
}

/* Leave actions live together at the top-left, under the room kicker. */
#leave-button {
  position: fixed;
  top: 145px;
  left: 50px;
  right: auto;
  color: var(--n1-ink);
  background: #fff9ed;
}

#leave-table {
  position: fixed;
  top: 194px;
  left: 50px;
  right: auto;
  bottom: auto;
  color: var(--n1-ink);
  background: var(--n1-yellow);
}

#leave-table i {
  color: var(--n1-green);
}

#invite-link-box {
  position: fixed;
  top: 143px;
  left: 50%;
  width: 330px;
  height: 38px;
  margin: 0;
  transform: translateX(-50%);
  background: #fff9ed;
}

#invite-link-box #invite-link {
  color: var(--n1-ink);
  background: #fff9ed;
}

#invite-link-box #invite-label,
#invite-link-box button {
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border-radius: 0;
  text-shadow: none;
  font-weight: 850;
  text-transform: uppercase;
}

#users-online-box {
  top: 208px;
  color: var(--n1-ink);
  background: #fff9ed;
}

#users-online-box #users-online-label {
  color: var(--n1-ink);
  text-shadow: none;
}

#room-player-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 24px;
  margin-left: 8px;
  padding: 0 7px;
  border: 2px solid var(--n1-ink);
  background: var(--n1-green);
  box-shadow: 2px 2px 0 var(--n1-ink);
  color: var(--n1-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

#users-online-box ul .users-list-box {
  border-color: var(--n1-red);
}

#volume-button {
  right: 44px;
  top: 216px;
  color: var(--n1-ink);
  background: var(--n1-yellow);
}

#dealer {
  top: 6%;
  color: var(--n1-ink);
  text-shadow: none;
}

#dealer h1 {
  width: 86px;
  height: 44px;
  align-self: center;
  padding: 7px 14px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--n1-green);
  border: 2px solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
}

#dealer #dealerSum {
  top: 158px;
  z-index: 12;
}

#dealer #dealerSum,
.player-sum {
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  border-radius: 0;
}

.players {
  background: #fff9ed;
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: 4px 4px 0 var(--n1-ink);
}

.empty-slot {
  color: var(--n1-green);
}

.empty-slot i {
  text-shadow: none;
}

.player-name {
  color: var(--n1-ink);
  text-shadow: none;
  font-weight: 850;
}

/* Seated players wear their avatar dead-center in the seat ring; the
   nickname strip sits above the seat, clear of the card ladder. The
   countdown ring (r = 39 at 88px seat) sweeps the gap band between the
   avatar's outer edge (r = 38) and the seat's inner edge (r = 42). */
.player-name span {
  position: absolute;
  left: 50%;
  top: 36px;
  bottom: auto;
  width: 72px;
  height: 72px;
  margin-left: 0;
  transform: translateX(-50%);
  background: var(--n1-blue);
  border: 2px solid var(--n1-ink);
  border-radius: 50%;
  overflow: hidden;
}

/* (legacy .ready PLACE BET rules removed — that UI is gone) */

#bets-container {
  width: auto;
  height: auto;
  bottom: 20px;
  padding: 16px 16px 22px;
  display: grid;
  grid-template-columns: 58px repeat(9, 66px) 58px 58px;
  gap: 9px;
  justify-content: center;
  align-items: center;
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 0 6px 0 var(--n1-ink);
  transition: opacity 200ms;
}

#bets-container span {
  display: grid;
  place-items: center;
}

/* Printed board-game chips with real thickness: hard offset shadows for the
   coin edge, lift on hover, press down on click. */
#bets-container button.betButtons {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 !important;
  border-radius: 50%;
  background-size: contain !important;
  box-shadow: 0 5px 0 rgba(40, 22, 14, 0.42), 0 8px 0 var(--n1-ink);
  font-size: 14px;
  font-weight: 900;
  transition: transform 110ms, box-shadow 110ms, opacity 160ms, filter 160ms;
}

#bets-container button.betButtons:hover {
  transform: translateY(-4px);
  box-shadow: 0 9px 0 rgba(40, 22, 14, 0.42), 0 12px 0 var(--n1-ink);
}

#bets-container button.betButtons:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(40, 22, 14, 0.42), 0 5px 0 var(--n1-ink);
}

/* Chips the player cannot afford right now sit flat and faded. */
#bets-container button.betButtons.chip-unaffordable {
  opacity: 0.32;
  filter: grayscale(0.95);
  pointer-events: none;
  transform: none;
  box-shadow: 0 3px 0 rgba(40, 22, 14, 0.25);
}

#bets-container .max-clear {
  width: 58px;
  height: 40px;
  margin: 0 !important;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  border-radius: 0;
  box-shadow: 0 4px 0 var(--n1-ink);
  font-size: 10px;
  font-weight: 850;
  transition: transform 110ms, box-shadow 110ms;
}

#bets-container .max-clear:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--n1-ink);
}

#bets-container .max-clear:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--n1-ink);
}

#bets-container .max-clear.noclick {
  opacity: 0.4;
  box-shadow: 0 2px 0 var(--n1-ink);
}

/* The decision panel is a bottom action dock, not a center modal — the felt,
   every hand, and the dealer stay visible while the player decides. */
.user-action-container {
  position: fixed;
  top: auto;
  bottom: 22px;
  left: 50%;
  width: 840px;
  height: 158px;
  margin: 0;
  padding: 22px 24px 14px;
  transform: translateX(-50%);
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 0 7px 0 var(--n1-ink);
  text-shadow: none;
  z-index: 32;
}

.user-action-container #your-turn-label {
  top: -17px;
  left: 18px;
  padding: 6px 12px;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-family: "Archivo Black", sans-serif;
  font-size: 13px;
}

#decision-context {
  position: absolute;
  top: -17px;
  right: 18px;
  padding: 6px 12px;
  background: #fff9ed;
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.02em;
  pointer-events: none;
}

#decision-context:empty {
  display: none;
}

.user-action-container .user-action-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* "?" helper pinned to each action's corner. Hover (or tap) reveals a paper
   tooltip explaining the move. Kept OUT of .user-action so the NodeList
   index routing in thePlay() is untouched; also usable when the box itself
   is .noclick, so gated-off moves can still be learned. */
.user-action-container .action-help {
  position: absolute;
  top: -8px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  z-index: 3;
  pointer-events: auto;
}

.user-action-container .action-help:hover,
.user-action-container .action-help:focus-visible {
  background: var(--n1-yellow);
}

.user-action-container .action-help::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: 200px;
  padding: 9px 11px;
  transform: translateX(-50%) translateY(4px);
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms, transform 140ms;
  pointer-events: none;
  z-index: 40;
}

.user-action-container .action-help:hover::after,
.user-action-container .action-help:focus-visible::after,
.user-action-container .action-help.tip-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Edge boxes: keep the tooltip inside the dock. */
.user-action-container .user-action-box:first-of-type .action-help::after {
  left: 0;
  transform: translateX(-14px) translateY(4px);
}

.user-action-container .user-action-box:first-of-type .action-help:hover::after,
.user-action-container .user-action-box:first-of-type .action-help:focus-visible::after,
.user-action-container .user-action-box:first-of-type .action-help.tip-open::after {
  transform: translateX(-14px) translateY(0);
}

.user-action-container .user-action-box:last-of-type .action-help::after {
  left: auto;
  right: -8px;
  transform: translateY(4px);
}

.user-action-container .user-action-box:last-of-type .action-help:hover::after,
.user-action-container .user-action-box:last-of-type .action-help:focus-visible::after,
.user-action-container .user-action-box:last-of-type .action-help.tip-open::after {
  transform: translateY(0);
}

/* Gated-off boxes are pointer-dead; re-arm just the helper inside them. */
.user-action-container .user-action-box.noclick .action-help {
  pointer-events: auto;
  opacity: 1;
}

.user-action-container .user-action-text {
  color: var(--n1-ink);
  font-size: 13px;
  font-weight: 850;
}

/* Keyboard hints on desktop, matched by the button each box contains. */
.user-action-container .user-action-box:has(#stand) .user-action-text::after {
  content: " · S";
  opacity: 0.55;
}

.user-action-container .user-action-box:has(#hit) .user-action-text::after {
  content: " · H";
  opacity: 0.55;
}

.user-action-container .user-action-box:has(#doubleDown) .user-action-text::after {
  content: " · D";
  opacity: 0.55;
}

.user-action-container .user-action-box:has(#surrender) .user-action-text::after {
  content: " · U";
  opacity: 0.55;
}

.user-action-container .user-action-box:has(#split) .user-action-text::after {
  content: " · P";
  opacity: 0.55;
}

/* While a decision is open, the chip tray under the dock steps aside.
   Balance stays visible for double-down math. */
body.is-deciding #bets-container {
  opacity: 0;
}

#decision-panel-toggle {
  position: fixed;
  z-index: 33;
  bottom: 30px;
  left: calc(50% + 322px);
  padding: 7px 10px;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

#decision-panel-toggle.is-cards-view {
  top: auto;
  right: auto;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
}

.user-action-container .user-action {
  width: 82px;
  height: 82px;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 2px solid var(--n1-ink);
  box-shadow: 0 5px 0 rgba(40, 22, 14, 0.4), 0 8px 0 var(--n1-ink);
  font-size: 38px;
  transition: transform 110ms, box-shadow 110ms;
}

.user-action-container .user-action:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 rgba(40, 22, 14, 0.4), 0 11px 0 var(--n1-ink);
}

.user-action-container .user-action:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(40, 22, 14, 0.4), 0 4px 0 var(--n1-ink);
}

.user-action-container #doubleDown span {
  left: 26px;
  top: 36px;
  font-size: 24px;
}

.user-action-container #stand {
  background: var(--n1-red);
  color: white;
}

.user-action-container #hit {
  background: var(--n1-mint);
}

.user-action-container #surrender {
  background: #fff9ed;
}

.user-action-container #split {
  background: var(--n1-blue);
}

/* A parked split hand: slid aside and faded while the second hand plays.
   z-index drops under the fresh hand's cards in the overlap zone. */
.player-cards img.hand-done {
  margin-left: -74px;
  opacity: 0.45;
  filter: saturate(0.8);
  z-index: 0 !important;
}

/* A surrendered hand stays on the felt, folded flat. */
.player-cards.hand-folded img {
  opacity: 0.4;
  filter: saturate(0.6);
}

#deal-start-label,
#join-mid-game-label {
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 4px 4px 0 var(--n1-ink);
  padding: 8px 14px;
  font-weight: 850;
}

#loading-screen {
  background: var(--n1-paper);
}

/* Draft chips: every pick slides one chip of that denomination from the tray
   button onto a pile in front of the local seat. CLEAR walks the pile back
   top-first, slowly — the take-back is its own beat. Local-player visual
   only; the synced .player-coin appears on PLACE BET. */
.draft-chip {
  position: fixed;
  left: 0;
  top: 0;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--n1-ink);
  filter: drop-shadow(0 3px 0 rgba(120, 96, 58, 0.9)) drop-shadow(0 3px 0 rgba(40, 22, 14, 0.95));
  font-size: 15px;
  font-weight: 900;
  opacity: 0;
  transform: translate(var(--chip-from, 0px, 0px)) scale(0.55);
  transition: transform 280ms cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 170ms;
}

.draft-chip.chip-on-table {
  opacity: 1;
  transform: translate(var(--chip-to, 0px, 0px)) rotate(var(--chip-rot, 0deg)) scale(1);
}

.draft-chip.chip-retracting {
  opacity: 0;
  transform: translate(var(--chip-from, 0px, 0px)) scale(0.5);
  transition: transform 480ms cubic-bezier(0.3, 0.7, 0.4, 1), opacity 420ms ease-in;
}

/* Commit: the pile glides onto the avatar (where the synced .player-coin
   lands) and fades there — arrival first, fade second. */
.draft-chip.chip-committing {
  opacity: 0;
  transform: translate(var(--chip-to, 0px, 0px)) rotate(var(--chip-rot, 0deg)) scale(0.85);
  transition: transform 300ms cubic-bezier(0.3, 0.8, 0.4, 1), opacity 240ms ease-in 130ms;
}

/* ---------- Table scale-up (v11): seats, cards, coins, console ---------- */

/* The seat rows spread wider onto the bigger felt; the timer overlay must
   mirror the seat row exactly. */
#players-container,
#players-timer-container {
  width: 96%;
  margin-left: -48%;
}

.players,
.players-timer {
  width: 88px;
  height: 88px;
}

/* The ring length is set from JS (--ring-c) so it always matches the seat
   size; 301 is the historical 100px fallback. */
.players-timer .circle-animation {
  stroke-dasharray: var(--ring-c, 301);
  stroke-dashoffset: var(--ring-c, 301);
}

.players:nth-of-type(4),
.players-timer:nth-of-type(4) {
  margin-bottom: 16px;
}

.players:nth-of-type(1),
.players:nth-of-type(7),
.players-timer:nth-of-type(1),
.players-timer:nth-of-type(7) {
  margin-bottom: 156px;
}

.players:nth-of-type(2),
.players:nth-of-type(6),
.players-timer:nth-of-type(2),
.players-timer:nth-of-type(6) {
  margin-bottom: 92px;
}

.players:nth-of-type(3),
.players:nth-of-type(5),
.players-timer:nth-of-type(3),
.players-timer:nth-of-type(5) {
  margin-bottom: 44px;
}

.empty-slot:hover {
  background: var(--n1-mint);
}

/* Cards sized so a long ladder clears the dealer row; the 36px bottom gap
   leaves room for the nickname strip above the seat. */
.cardImg {
  width: 92px;
  height: 138px;
  top: -174px;
}

.card2 { margin-left: 20px; top: -192px; }
.card3 { margin-left: 40px; top: -210px; }
.card4 { margin-left: 60px; top: -228px; }
.card5 { margin-left: 80px; top: -246px; }
.card6 { margin-left: 100px; top: -264px; }
.card7 { margin-left: 120px; top: -282px; }
.card8 { margin-left: 140px; top: -300px; }
.card9 { margin-left: 160px; top: -318px; }
.card10 { margin-left: 180px; top: -336px; }
.card11 { margin-left: 200px; top: -354px; }

/* Must come after the ladder so the deal-in animation still starts off-table. */
.cardImg.cardAnimation {
  top: -620px;
}

.dealerCardImg,
.flip-card {
  width: 92px;
  height: 138px;
}

/* Nickname strip rides ABOVE the seat (base css puts it below); the avatar
   span inside it then drops back down into the seat ring. */
.player-name {
  left: calc(50% - 110px);
  bottom: auto;
  top: -30px;
  font-size: 14px;
}

/* Hand total is a tag pinned to the lower-left corner of the card fan — it
   lives on the cards, so the tray, dock and committed chip can never cover
   it, whichever seat the player takes. */
.player-sum {
  top: -52px;
  bottom: auto;
  left: 10px;
  z-index: 26;
  padding: 5px 10px;
  font-size: 15px;
  font-weight: 850;
}

.player-sum.current-player-highlight,
#dealerSum.current-player-highlight {
  color: white;
  background: var(--n1-green);
}

.player-result {
  width: 56px;
  height: 56px;
  margin-left: -28px;
  top: -118px;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  border-radius: 0;
  font-weight: 900;
}

/* The committed bet chip gets coin thickness via stacked hard drop-shadows. */
.player-coin {
  width: 76px;
  height: 76px;
  margin-left: -38px;
  background-size: 100% 100% !important;
  color: var(--n1-ink);
  font-size: 15px;
  font-weight: 900;
  filter: drop-shadow(0 3px 0 rgba(120, 96, 58, 0.9)) drop-shadow(0 3px 0 rgba(40, 22, 14, 0.95));
}

/* Result banner speaks the world's language: paper, ink, one accent. */
#player-result-big {
  width: 460px;
  height: auto;
  min-height: 96px;
  top: 48%;
  margin-top: 0;
  left: 50%;
  margin-left: -230px;
  padding: 16px 24px;
  gap: 6px;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 3px solid var(--n1-ink);
  box-shadow: 0 8px 0 var(--n1-ink);
  text-shadow: none;
  font-size: 14px;
}

#player-result-big #player-result-big-answer {
  font-family: "Archivo Black", sans-serif;
  font-size: 32px;
  letter-spacing: -0.02em;
}

#player-result-big .color-green,
#player-result-big #player-result-sum-box.color-green {
  color: var(--n1-green);
}

#player-result-big .color-red,
#player-result-big #player-result-sum-box.color-red {
  color: var(--n1-red);
}

/* Balance console, bottom-left, stacked so it never reaches the chip tray. */
#balance-bet-box {
  left: 44px;
  bottom: 26px;
  width: auto;
  flex-direction: column;
  gap: 10px;
  border-radius: 0;
}

.balance-bet {
  min-width: 132px;
  margin-left: 0;
  padding: 10px 14px;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  border-radius: 0;
  box-shadow: 0 5px 0 var(--n1-ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.balance-bet #balance,
.balance-bet #total-bet {
  margin-top: 2px;
  font-family: "Archivo Black", sans-serif;
  font-size: 21px;
  color: var(--n1-ink);
}

.balance-bet #total-bet {
  color: var(--n1-red-dark);
}

/* ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .n1-world-header {
    height: 72px;
    padding: 10px 18px;
  }

  .n1-stamp {
    width: 46px;
    height: 46px;
    font-size: 17px;
  }

  .n1-brand-copy strong {
    font-size: 17px;
  }

  .n1-brand-copy small {
    font-size: 10px;
  }

  #main-menu {
    padding-top: 72px;
    overflow-y: auto;
  }

  .n1-casino-hero {
    inset: 72px 0 auto;
    height: 210px;
    padding: 32px 22px;
  }

  #main-menu #blackjack-title {
    font-size: 58px;
  }

  .n1-game-tabs {
    left: auto;
    right: 22px;
    top: 70px;
  }

  .n1-game-tabs span {
    min-width: 0;
    padding: 15px;
    font-size: 11px;
  }

  .n1-play-chip {
    display: none;
  }

  #main-box {
    top: 315px;
    display: block;
  }

  .n1-strategy-field {
    margin: 16px 0;
    padding: 16px 0 0;
    border-top: 2px solid var(--n1-ink);
    border-left: 0;
  }

  #game-room {
    padding-top: 72px;
  }

  #players-container,
  #players-timer-container {
    width: 96%;
    margin-left: -48%;
  }

  .players,
  .players-timer {
    width: 72px;
    height: 72px;
  }

  .players:nth-of-type(4),
  .players-timer:nth-of-type(4) {
    margin-bottom: 12px;
  }

  .players:nth-of-type(1),
  .players:nth-of-type(7),
  .players-timer:nth-of-type(1),
  .players-timer:nth-of-type(7) {
    margin-bottom: 104px;
  }

  .players:nth-of-type(2),
  .players:nth-of-type(6),
  .players-timer:nth-of-type(2),
  .players-timer:nth-of-type(6) {
    margin-bottom: 64px;
  }

  .players:nth-of-type(3),
  .players:nth-of-type(5),
  .players-timer:nth-of-type(3),
  .players-timer:nth-of-type(5) {
    margin-bottom: 34px;
  }

  .cardImg {
    width: 80px;
    height: 120px;
    top: -152px;
  }

  .player-name span {
    top: 33px;
    bottom: auto;
    width: 58px;
    height: 58px;
  }

  .card2 { margin-left: 18px; top: -170px; }
  .card3 { margin-left: 36px; top: -188px; }
  .card4 { margin-left: 54px; top: -206px; }
  .card5 { margin-left: 72px; top: -224px; }
  .card6 { margin-left: 90px; top: -242px; }
  .card7 { margin-left: 108px; top: -260px; }
  .card8 { margin-left: 126px; top: -278px; }
  .card9 { margin-left: 144px; top: -296px; }
  .card10 { margin-left: 162px; top: -314px; }
  .card11 { margin-left: 180px; top: -332px; }

  .cardImg.cardAnimation {
    top: -540px;
  }

  .dealerCardImg,
  .flip-card {
    width: 80px;
    height: 120px;
  }

  #dealer {
    top: 6%;
  }

  #dealer #dealerSum {
    top: 134px;
  }

  .player-coin {
    width: 62px;
    height: 62px;
    margin-left: -31px;
    font-size: 13px;
  }

  #bets-container {
    width: calc(100% - 220px);
    max-width: 760px;
    bottom: 16px;
    padding: 10px 10px 14px;
    grid-template-columns: 44px repeat(9, minmax(34px, 1fr)) 44px 44px;
    gap: 5px;
  }

  #bets-container button.betButtons {
    width: 46px;
    max-width: 100%;
    height: 46px;
    font-size: 11px;
    box-shadow: 0 4px 0 rgba(40, 22, 14, 0.42), 0 6px 0 var(--n1-ink);
  }

  #bets-container .max-clear {
    width: 44px;
    height: 36px;
    font-size: 9px;
  }

  .ready {
    right: 16px;
    bottom: 26px;
    width: 168px !important;
    height: 56px !important;
    font-size: 15px !important;
  }

  #balance-bet-box {
    left: 14px;
    bottom: 26px;
    flex-direction: column;
    gap: 8px;
  }

  .balance-bet {
    min-width: 108px;
    padding: 7px 10px;
    font-size: 10px;
  }

  .balance-bet #balance,
  .balance-bet #total-bet {
    font-size: 17px;
  }

  .user-action-container {
    width: min(760px, calc(100vw - 20px));
    height: 140px;
    padding: 18px 14px 10px;
  }

  .user-action-container .user-action {
    width: 72px;
    height: 72px;
    font-size: 32px;
  }

  .user-action-container #doubleDown span {
    left: 23px;
    top: 31px;
    font-size: 21px;
  }

  #decision-panel-toggle {
    left: auto;
    right: 14px;
    bottom: 176px;
  }

  #game-room::before {
    top: 88px;
    left: 18px;
  }

  #invite-link-box {
    top: 84px;
  }

  #leave-button {
    top: 84px;
    left: 18px;
    right: auto;
  }

  #leave-table {
    top: 130px;
    left: 18px;
    right: auto;
  }

  #volume-button {
    right: 18px;
    top: 216px;
  }
}

@media (max-width: 600px) {
  .n1-brand-copy strong {
    font-size: 14px;
  }

  .n1-lobby-link {
    font-size: 12px;
  }

  .n1-casino-hero {
    height: 230px;
  }

  #main-menu #blackjack-title {
    font-size: 46px;
  }

  .n1-game-tabs {
    top: 156px;
    left: 22px;
    right: auto;
  }

  .n1-game-tabs span {
    padding: 10px 12px;
  }

  #main-box {
    top: 330px;
    padding-inline: 18px;
  }

  #main-box .n1-panel-heading {
    margin-inline: -18px;
  }

  #main-box input,
  #main-box .play-btns {
    width: 84%;
  }

  .n1-table-note,
  #credits {
    display: none;
  }

  #invite-link-box {
    left: auto;
    right: 12px;
    top: 84px;
    width: 200px;
    transform: none;
  }

  #players-container,
  #players-timer-container {
    width: 92%;
    margin-left: -46%;
  }

  .players,
  .players-timer {
    width: 50px;
    height: 50px;
  }

  .players:nth-of-type(4),
  .players-timer:nth-of-type(4) {
    margin-bottom: 10px;
  }

  .players:nth-of-type(1),
  .players:nth-of-type(7),
  .players-timer:nth-of-type(1),
  .players-timer:nth-of-type(7) {
    margin-bottom: 68px;
  }

  .players:nth-of-type(2),
  .players:nth-of-type(6),
  .players-timer:nth-of-type(2),
  .players-timer:nth-of-type(6) {
    margin-bottom: 44px;
  }

  .players:nth-of-type(3),
  .players:nth-of-type(5),
  .players-timer:nth-of-type(3),
  .players-timer:nth-of-type(5) {
    margin-bottom: 24px;
  }

  .empty-slot {
    font-size: 28px;
  }

  .cardImg {
    width: 66px;
    height: 99px;
    top: -101px;
  }

  .card2 { margin-left: 14px; top: -115px; }
  .card3 { margin-left: 28px; top: -129px; }
  .card4 { margin-left: 42px; top: -143px; }
  .card5 { margin-left: 56px; top: -157px; }
  .card6 { margin-left: 70px; top: -171px; }
  .card7 { margin-left: 84px; top: -185px; }
  .card8 { margin-left: 98px; top: -199px; }
  .card9 { margin-left: 112px; top: -213px; }
  .card10 { margin-left: 126px; top: -227px; }
  .card11 { margin-left: 140px; top: -241px; }

  .cardImg.cardAnimation {
    top: -440px;
  }

  .dealerCardImg,
  .flip-card {
    width: 66px;
    height: 99px;
  }

  #dealer {
    top: 8%;
  }

  #dealer h1 {
    width: 70px;
    height: 36px;
    font-size: 13px;
  }

  #dealer #dealerSum {
    top: 112px;
  }

  .player-name {
    width: 120px;
    left: calc(50% - 60px);
    bottom: auto;
    top: -26px;
    font-size: 12px;
  }

  .player-name span {
    top: 29px;
    bottom: auto;
    width: 40px;
    height: 40px;
  }

  .player-sum {
    top: -40px;
    bottom: auto;
    left: 8px;
    z-index: 26;
    padding: 3px 7px;
    font-size: 12px;
  }

  .player-result {
    width: 42px;
    height: 42px;
    margin-left: -21px;
    top: -92px;
    font-size: 11px;
  }

  .player-coin {
    width: 46px;
    height: 46px;
    margin-left: -23px;
    font-size: 11px;
  }

  #player-result-big {
    width: calc(100vw - 40px);
    margin-left: 0;
    left: 20px;
    min-height: 80px;
  }

  #player-result-big #player-result-big-answer {
    font-size: 24px;
  }

  #bets-container {
    width: calc(100% - 16px);
    bottom: 8px;
    padding: 7px 6px 10px;
    grid-template-columns: 34px repeat(9, minmax(24px, 1fr)) 34px 34px;
    gap: 3px;
    overflow: hidden;
  }

  #bets-container button.betButtons {
    width: 100%;
    max-width: 34px;
    height: auto;
    aspect-ratio: 1;
    font-size: 8px;
    box-shadow: 0 3px 0 rgba(40, 22, 14, 0.42), 0 4px 0 var(--n1-ink);
  }

  #bets-container .max-clear {
    width: 100%;
    max-width: 34px;
    height: 30px;
    font-size: 8px;
  }

  #game-room::before {
    display: none;
  }

  .ready {
    right: 8px;
    bottom: 74px;
    width: 138px !important;
    height: 48px !important;
    font-size: 13px !important;
  }

  #balance-bet-box {
    left: 8px;
    bottom: 74px;
    flex-direction: row;
    gap: 6px;
  }

  .balance-bet {
    min-width: 86px;
    padding: 5px 8px;
    font-size: 9px;
  }

  .balance-bet #balance,
  .balance-bet #total-bet {
    font-size: 14px;
  }

  .user-action-container {
    width: calc(100vw - 12px);
    height: 128px;
    bottom: 8px;
    padding: 16px 8px 8px;
  }

  .user-action-container .user-action {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .user-action-container #doubleDown span {
    left: 17px;
    top: 23px;
    font-size: 15px;
  }

  .user-action-container .user-action-text {
    font-size: 10px;
  }

  .user-action-container .user-action-box:has(#stand) .user-action-text::after,
  .user-action-container .user-action-box:has(#hit) .user-action-text::after,
  .user-action-container .user-action-box:has(#doubleDown) .user-action-text::after,
  .user-action-container .user-action-box:has(#surrender) .user-action-text::after,
  .user-action-container .user-action-box:has(#split) .user-action-text::after {
    content: none;
  }

  #decision-context {
    right: 8px;
    font-size: 10px;
  }

  #decision-panel-toggle {
    right: 8px;
    bottom: 144px;
  }

  #leave-table {
    top: 128px;
  }
}

/* Final cascade for the shared entry shell. Kept at the end so the legacy
   Blackjack selectors above cannot change the room directory geometry. */
html,
body {
  overflow-x: hidden;
  overflow-y: auto;
}

#main-menu {
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

.n1-casino-hero {
  position: relative;
  inset: auto;
  min-height: 292px;
  height: auto;
  padding: 54px clamp(24px, 5vw, 72px) 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px 34px;
  background: var(--n1-paper);
}

#main-menu .n1-casino-hero #blackjack-title,
.n1-casino-hero-holdem #holdem-title {
  width: auto;
  margin: 15px 0 0;
  color: var(--n1-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 0.84;
  letter-spacing: -0.06em;
  text-align: left;
}

.n1-hero-deck {
  max-width: 470px;
  margin: 16px 0 0;
  color: #6d594d;
  font-size: 14px;
  line-height: 1.4;
}

.n1-game-tabs {
  position: static;
  left: auto;
  top: auto;
  display: flex;
  align-self: center;
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: var(--n1-shadow);
}

.n1-game-tab {
  min-width: 170px;
  min-height: 66px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  column-gap: 9px;
  align-items: center;
  color: #675247;
  background: var(--n1-surface);
  border: 0;
  border-right: 1px solid var(--n1-line-soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.n1-game-tab:last-child { border-right: 0; }
.n1-game-tab i { grid-row: 1 / span 2; margin: 0; font-size: 16px; }
.n1-game-tabs .n1-game-tab > span { min-width: 0; padding: 0; color: inherit; background: transparent; font: inherit; text-transform: inherit; white-space: inherit; }
.n1-game-tab small { color: #927d6d; font-size: 9px; font-weight: 900; letter-spacing: 0.12em; }
.n1-game-tab.is-active,
.n1-game-tab[aria-current="page"] { color: white; background: var(--n1-green); }
.n1-game-tab.is-active small,
.n1-game-tab[aria-current="page"] small { color: var(--n1-mint); }
.n1-game-tab:hover:not(.is-active):not([aria-current="page"]) { color: var(--n1-ink); background: var(--n1-yellow); }

.n1-hero-status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  padding-top: 16px;
  border-top: 1px solid var(--n1-line-soft);
  color: #6d594d;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.n1-hero-status span:first-child { color: var(--n1-green); }
.n1-hero-status i { margin-right: 6px; font-size: 7px; vertical-align: middle; }

.n1-entry-grid {
  width: min(1140px, calc(100% - 48px));
  min-width: 0;
  margin: 30px auto 0;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(430px, 1.18fr);
  gap: 24px;
  align-items: start;
}

.n1-room-directory { display: grid; gap: 12px; min-width: 0; }
.n1-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 0 2px 5px; border-bottom: 1px solid var(--n1-line-soft); text-transform: uppercase; }
.n1-directory-heading span { color: var(--n1-red-dark); font-size: 10px; font-weight: 900; letter-spacing: 0.14em; }
.n1-directory-heading strong { font-family: "Archivo Black", sans-serif; font-size: 15px; }

.n1-room-card { min-width: 0; padding: 17px 17px 16px; color: var(--n1-ink); background: var(--n1-surface); border: var(--n1-line) solid var(--n1-ink); box-shadow: var(--n1-shadow); }
.n1-room-card-poker { background: var(--n1-violet-soft); border-color: var(--n1-violet); box-shadow: 5px 6px 0 #654c8f; }
.n1-room-card-head { display: flex; align-items: center; justify-content: space-between; min-height: 20px; }
.n1-room-index { color: var(--n1-red-dark); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; }
.n1-room-state { color: var(--n1-green); font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.n1-room-state.is-preview { color: var(--n1-violet); }
.n1-room-state i { margin-right: 5px; font-size: 7px; }
.n1-room-art { position: relative; height: 112px; margin: 13px 0 12px; display: flex; align-items: center; justify-content: center; background: var(--n1-green); border: 2px solid var(--n1-ink); overflow: hidden; }
.n1-room-art::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 249, 237, 0.48); pointer-events: none; }
.n1-room-art-poker { background: var(--n1-violet); }
.n1-room-art img { position: relative; z-index: 1; width: 60px; height: 88px; object-fit: contain; filter: drop-shadow(3px 3px 0 rgba(40, 22, 14, 0.52)); }
.n1-room-art img:first-child { transform: rotate(-9deg) translateX(5px); }
.n1-room-art img:nth-child(2) { transform: rotate(9deg) translateX(-5px); }
.n1-room-art strong { position: absolute; right: 13px; bottom: 9px; z-index: 2; color: var(--n1-yellow); font-family: "Archivo Black", sans-serif; font-size: 22px; letter-spacing: -0.06em; }
.n1-room-card h2 { min-width: 0; margin: 0; font-family: "Archivo Black", sans-serif; font-size: 24px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.n1-room-card p { min-height: 40px; margin: 7px 0 13px; color: #6d594d; font-size: 12px; line-height: 1.42; }
.n1-room-facts { margin: 0; padding: 10px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--n1-line-soft); border-bottom: 1px solid var(--n1-line-soft); }
.n1-room-facts div { display: grid; gap: 3px; min-width: 0; }
.n1-room-facts div + div { padding-left: 9px; border-left: 1px solid var(--n1-line-soft); }
.n1-room-facts dt { color: #927d6d; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; }
.n1-room-facts dd { margin: 0; color: var(--n1-ink); font-family: "Archivo Black", sans-serif; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n1-room-card-cta { min-height: 40px; margin-top: 13px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; color: var(--n1-ink); background: var(--n1-yellow); border: 2px solid var(--n1-ink); box-shadow: 3px 3px 0 var(--n1-ink); font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; }
.n1-room-card-cta:hover { color: white; background: var(--n1-red); transform: translate(-1px, -1px); }
.n1-room-card-poker .n1-room-card-cta { background: #d8c8f1; }
.n1-entry-content { min-width: 0; width: 100%; }

#main-box { position: relative; top: auto; left: auto; width: 100%; min-width: 0; min-height: 468px; margin: 0; transform: none; }
.n1-form-note { padding: 12px 3px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: #6d594d; font-size: 10px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.n1-form-note span:first-child { color: var(--n1-green); }
.n1-form-note i { margin-right: 5px; }
#credits { position: relative; right: auto; bottom: auto; display: block; width: min(1140px, calc(100% - 48px)); margin: -54px auto 26px; color: #6d594d; text-align: right; }

#h-entry { min-height: 100vh; padding-top: 72px; overflow: visible; color: var(--n1-ink); }
#h-entry .n1-casino-hero { margin: 0; }

@media (max-width: 900px) {
  .n1-casino-hero { min-height: 245px; padding: 34px 22px 24px; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; }
  #main-menu .n1-casino-hero #blackjack-title,
  .n1-casino-hero-holdem #holdem-title { font-size: 56px; }
  .n1-game-tab { min-width: 132px; min-height: 58px; padding: 10px 11px; font-size: 11px; }
  .n1-entry-grid { width: min(680px, calc(100% - 36px)); grid-template-columns: 1fr; }
  .n1-room-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n1-directory-heading { grid-column: 1 / -1; }
  #main-box { min-height: 0; }
  #credits { width: calc(100% - 36px); margin-top: -48px; }
}

@media (max-width: 600px) {
  .n1-world-header { padding-inline: 14px; }
  .n1-world-header-actions { gap: 8px; }
  .n1-casino-hero { min-height: 302px; padding: 28px 18px 20px; display: block; }
  #main-menu .n1-casino-hero #blackjack-title,
  .n1-casino-hero-holdem #holdem-title { margin-top: 13px; font-size: 48px; }
  .n1-hero-deck { max-width: 300px; margin-top: 12px; font-size: 12px; }
  .n1-game-tabs { width: 100%; margin-top: 22px; box-shadow: 4px 5px 0 var(--n1-ink); }
  .n1-game-tab { flex: 1 1 0; min-width: 0; }
  .n1-hero-status { margin-top: 20px; padding-top: 12px; gap: 6px 14px; font-size: 9px; }
  .n1-entry-grid { width: calc(100% - 28px); margin-top: 22px; padding-bottom: 54px; }
  .n1-room-directory { grid-template-columns: 1fr; }
  .n1-directory-heading { grid-column: auto; }
  .n1-room-card { padding: 14px; }
  .n1-room-art { height: 96px; }
  .n1-room-card p { min-height: 0; }
  #main-box { padding-inline: 16px; }
  #main-box .n1-panel-heading { margin-inline: -16px; }
  .n1-form-note { display: grid; justify-content: stretch; }
  #credits { display: none; }
}

/* Game hall: room cards are now selectable — clicking one switches the
   setup panel on the right to that game's context. */
.n1-room-card[data-game] {
  cursor: pointer;
  transition: transform 100ms, box-shadow 100ms;
}

.n1-room-card[data-game]:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 7px 0 var(--n1-ink);
}

.n1-room-card[data-game]:not(.is-active) .n1-room-card-cta {
  background: var(--n1-surface-muted);
  color: #927d6d;
  box-shadow: 2px 2px 0 var(--n1-ink);
}

.n1-room-card[data-game].is-active {
  outline: 3px solid var(--n1-ink);
  outline-offset: -1px;
}

/* The cage: N1 Credits ⇄ chips exchange (world players only). */
#n1-wallet-credits {
  color: #6d594d;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

#btnExchange {
  margin-left: 6px;
  padding: 0 9px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--n1-ink);
  background: var(--n1-yellow);
  border: 1px solid var(--n1-ink);
  border-radius: 4px;
  cursor: pointer;
}

#btnExchange:hover {
  background: var(--n1-mint);
}

#n1-exchange {
  position: fixed;
  top: 76px;
  right: 50px;
  z-index: 10001;
  width: 240px;
  padding: 14px 16px;
  color: var(--n1-ink);
  background: var(--n1-surface, #fff9ed);
  border: 2px solid var(--n1-ink);
  box-shadow: 4px 5px 0 var(--n1-ink);
  text-align: center;
}

#n1-exchange strong {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: 15px;
}

#n1-exchange p {
  margin: 6px 0 10px;
  color: #6d594d;
  font-size: 11px;
  font-weight: 750;
}

#n1-exchange input {
  width: 100%;
  padding: 8px 10px;
  background: var(--n1-paper-deep);
  border: 2px solid var(--n1-ink);
  font-size: 15px;
  text-align: center;
  box-sizing: border-box;
}

#n1-exchange .n1-ex-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

#n1-exchange .n1-ex-actions button {
  padding: 8px 6px;
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  cursor: pointer;
}

#n1-exchange #n1-ex-buy {
  color: white;
  background: var(--n1-green);
}

#n1-exchange #n1-ex-sell {
  color: var(--n1-ink);
  background: var(--n1-yellow);
}

#n1-exchange #n1-ex-msg {
  min-height: 14px;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 750;
  color: var(--n1-green);
}

@media (max-width: 900px) {
  #n1-exchange { right: 12px; width: 220px; }
}

/* Game hall v2: the hall is only the game cards; player setup is a modal. */
.n1-entry-grid-cards {
  display: block;
}

.n1-entry-grid-cards .n1-room-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: min(880px, 100%);
  margin: 0 auto;
}

.n1-entry-grid-cards .n1-directory-heading {
  grid-column: 1 / -1;
}

#setup-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  padding: 84px 16px 24px;
  overflow-y: auto;
}

#setup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 14, 0.55);
}

#setup-modal .n1-entry-content {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
}

/* One compact card: identity row → primary action → private table → footnote.
   Height is hard-capped to the viewport so the dialog can never stretch the
   page; worst case it scrolls inside the card. */
#setup-modal #main-box {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  min-height: 0;
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
  padding: 0 18px 12px;
  animation: setup-pop 160ms ease-out;
}

#setup-modal #main-box .n1-panel-heading {
  margin: 0 -18px 12px;
  padding: 9px 14px;
}

#setup-modal #main-box .n1-panel-heading strong {
  font-size: 14px;
}

#setup-modal #main-box div {
  margin: 6px 0;
}

/* Identity row: avatar picker and nickname share one line. */
#setup-modal #main-box .h-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#setup-modal #main-box #avatar-box {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  flex: 0 0 auto;
}

#setup-modal #main-box #avatar-box .slideAvatars {
  width: 40px;
  height: 40px;
  display: inline-flex;
  box-shadow: 2px 2px 0 var(--n1-ink);
}

#setup-modal #main-box #avatar-box .slideAvatars img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

#setup-modal #main-box #avatar-box button {
  width: 22px;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
}

#setup-modal #main-box input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 9px 10px;
  font-size: 14px;
}

#setup-modal #main-box .play-btns {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
}

#setup-modal .solo-primary {
  width: 100% !important;
  min-height: 42px !important;
  font-size: 15px !important;
}

#setup-modal #main-box #btnOffline {
  margin-top: 0;
}

#setup-modal #main-box .h-solo-cta {
  margin: 10px 0 4px;
}

#setup-modal .h-solo-note {
  margin: 14px 0 8px;
  font-size: 10px;
}

#setup-modal #main-box .h-divider {
  margin: 4px 0;
}

#setup-modal #main-box .n1-form-note {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px dashed var(--n1-line-soft);
  font-size: 9px;
}

#setup-modal #agent-link {
  margin-top: 6px;
  padding-top: 6px;
}

@keyframes setup-pop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

#setup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

#setup-close:hover {
  background: var(--n1-yellow);
}

@media (max-width: 700px) {
  .n1-entry-grid-cards .n1-room-directory {
    grid-template-columns: 1fr;
  }
}

/* Seat-mode badge on each game card: who can occupy seats. Today only
   "Human mode" ships (real players + house bots, no AI). "Agent ready" is
   the future state for tables agents may auto-join. */
.n1-room-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  cursor: help;
}

.n1-room-mode i {
  font-size: 9px;
}

.n1-room-mode.is-human {
  color: var(--n1-ink);
  background: var(--n1-blue);
}

.n1-room-mode.is-agent {
  color: var(--n1-ink);
  background: var(--n1-mint);
}

/* Hover: ink sweeps across the Play button right-to-left, then the entry
   stakes light up in yellow on top of it. */
.n1-room-card-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--n1-ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 240ms ease-out;
}

.n1-room-card-cta > * {
  position: relative;
  z-index: 1;
}

.n1-room-card:hover .n1-room-card-cta::before,
.n1-room-card:focus-visible .n1-room-card-cta::before {
  transform: scaleX(1);
}

/* Each label flips to cream exactly as the ink front reaches it:
   arrow (right) first, stakes next, PLAY (left) last. Un-hover reverses. */
.n1-room-card-cta > i {
  transition: color 90ms ease-out 150ms; /* revert: right side clears last */
}

.n1-room-card-cta > span:first-child {
  transition: color 90ms ease-out 0ms; /* revert: left side clears first */
}

.n1-room-card:hover .n1-room-card-cta > i,
.n1-room-card:focus-visible .n1-room-card-cta > i {
  color: #fff9ed;
  transition: color 90ms ease-out 20ms;
}

.n1-room-card:hover .n1-room-card-cta > span:first-child,
.n1-room-card:focus-visible .n1-room-card-cta > span:first-child {
  color: #fff9ed;
  transition: color 90ms ease-out 175ms;
}

/* Entry stakes live inside the Play button and unfold on hover. */
.n1-cta-stakes {
  max-width: 0;
  overflow: hidden;
  color: var(--n1-red-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 220ms ease-out, opacity 180ms ease-out;
}

.n1-room-card:hover .n1-cta-stakes,
.n1-room-card:focus-visible .n1-cta-stakes {
  max-width: 130px;
  color: var(--n1-yellow);
  opacity: 1;
  transition-delay: 90ms;
}

/* Hover tip anchored to the seat-mode badge (top-right of each card). */
.n1-room-mode {
  position: relative;
}

.n1-room-mode .n1-tip {
  position: absolute;
  top: calc(100% + 10px);
  right: -2px;
  z-index: 20;
  width: 212px;
  padding: 9px 11px;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 3px 3px 0 var(--n1-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}

.n1-room-mode .n1-tip::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #fff9ed;
  border-top: 2px solid var(--n1-ink);
  border-left: 2px solid var(--n1-ink);
  transform: rotate(45deg);
}

.n1-room-mode:hover .n1-tip {
  opacity: 1;
  transform: translateY(0);
}

/* Agent parking: a quiet footer link inside the setup modal (playing
   yourself is the default path), plus the modal panel. */
#agent-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px 0 0;
  color: #927d6d;
  background: none;
  border: 0;
  border-top: 1px dashed var(--n1-line-soft);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  cursor: pointer;
}

#agent-link:hover {
  color: var(--n1-green);
  text-decoration: underline;
}

#agent-link i {
  margin-right: 5px;
}

#agent-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  padding: 84px 16px 24px;
  overflow-y: auto;
}

#agent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 14, 0.55);
}

#agent-modal .n1-entry-content {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
}

#agent-box {
  position: relative;
  padding: 0 26px 22px;
  background: var(--n1-surface);
  border: var(--n1-line) solid var(--n1-ink);
  box-shadow: var(--n1-shadow);
  animation: setup-pop 160ms ease-out;
}

#agent-box .n1-panel-heading {
  margin: 0 -26px 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--n1-mint);
  border-bottom: var(--n1-line) solid var(--n1-ink);
  text-transform: uppercase;
}

#agent-box .n1-panel-heading span {
  color: var(--n1-green);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

#agent-box .n1-panel-heading strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 16px;
}

#agent-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--n1-ink);
  background: #fff9ed;
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

#agent-close:hover { background: var(--n1-yellow); }

.a-field {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}

.a-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6d594d;
}

.a-field input,
.a-field textarea {
  width: 100%;
  padding: 9px 10px;
  background: var(--n1-paper-deep);
  border: 2px solid var(--n1-ink);
  font-size: 14px;
  box-sizing: border-box;
  font-family: inherit;
}

.a-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#agent-form #a-start {
  width: 100%;
  margin: 6px 0 0;
}

#a-msg {
  min-height: 16px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 750;
  color: var(--n1-green);
}

#agent-list {
  margin-top: 16px;
  border-top: 1px solid var(--n1-line-soft);
  padding-top: 12px;
  text-align: left;
}

.a-row {
  position: relative;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--n1-paper-deep);
  border: 2px solid var(--n1-ink);
}

.a-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.a-row-sub {
  margin-top: 3px;
  font-size: 11px;
  color: #6d594d;
}

.a-live {
  padding: 1px 7px;
  background: var(--n1-mint);
  border: 1px solid var(--n1-ink);
  font-size: 9px;
  font-weight: 900;
}

.a-done {
  padding: 1px 7px;
  background: #d8cdb8;
  border: 1px solid var(--n1-ink);
  font-size: 9px;
  font-weight: 900;
}

.a-net { font-family: "Archivo Black", sans-serif; font-size: 13px; }
.a-net.up { color: var(--n1-green); }
.a-net.down { color: var(--n1-red-dark); }

.a-stop {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 4px 10px;
  color: white;
  background: var(--n1-red);
  border: 2px solid var(--n1-ink);
  box-shadow: 2px 2px 0 var(--n1-ink);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.a-empty { color: #6d594d; font-size: 12px; }