:root {
  --felt: #0f5d38;
  --felt-deep: #0a3d28;
  --ink: #f6edd2;
  --gold: #e4cc7a;
  --gold-deep: #b8963c;
  --ins: #efd14a;
  --wood: #5a3018;
  --wood-deep: #2d160c;
  --brass: #c4a35a;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #06140e;
  color: var(--ink);
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
}

#frame {
  width: min(390px, 100%);
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #083022;
  box-shadow: 0 0 0 1px #0008;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen[hidden] {
  display: none;
}

/* Landscape lock */
#rotate {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  #rotate {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 80;
    background: #06140e;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-variant: small-caps;
    letter-spacing: 0.12em;
  }
  #rotate .sub {
    opacity: 0.7;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    font-variant: normal;
  }
}

/* Attract / stack */
.attract-felt {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, #1a8a54 0%, transparent 55%),
    repeating-linear-gradient(0deg, #0d5c38 0 2px, #0c5534 2px 4px);
  filter: contrast(1.05);
}

.attract-felt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 80%, transparent 30%, #02140ccc 100%);
}

.attract-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(28px + var(--safe-t)) 22px calc(24px + var(--safe-b));
  text-align: center;
}

.eyebrow {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

h1 {
  margin: 8px 0 0;
  font-size: 3.15rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f8efd0;
  text-shadow: 0 2px 0 #072418, 0 10px 28px #0006;
}

.tag {
  margin: 6px 0 18px;
  opacity: 0.82;
}

.fan {
  position: relative;
  width: 210px;
  height: 118px;
  margin-bottom: 22px;
}

.mini-card {
  position: absolute;
  width: 72px;
  height: 102px;
  border-radius: 8px;
  box-shadow: 0 10px 18px #0005;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.mini-card.back {
  left: 18px;
  top: 10px;
  transform: rotate(-18deg);
  background:
    repeating-linear-gradient(45deg, #1b2a4a 0 6px, #24355c 6px 12px),
    #1b2a4a;
  border: 3px solid #d7c27a;
}

.mini-card.face {
  left: 68px;
  top: 0;
  background: #f7f0de;
  color: #111;
  border: 1px solid #c9b896;
  flex-direction: column;
  gap: 2px;
}

.mini-card.face.hearts {
  color: #b42318;
}

.mini-card.face span {
  font-size: 1.6rem;
}

.mini-card.cut {
  left: 122px;
  top: 14px;
  transform: rotate(16deg);
  background: linear-gradient(#f5e15a, #e0c43a);
  color: #2a2208;
  font-weight: 700;
  letter-spacing: 0.18em;
  border: 2px solid #b89620;
}

.disclaimer,
.stack-note,
.help-flag {
  background: #071910ee;
  border: 1px solid #e4cc7a44;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: left;
  max-width: 340px;
}

.disclaimer {
  margin-bottom: 18px;
}

.stack-amt {
  margin: 8px 0 10px;
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.stack-tower {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  height: 92px;
  margin: 10px 0 4px;
}

.stack-chip {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  box-shadow: 0 6px 0 #0005, inset 0 0 0 4px #fff3;
}

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 52px;
  padding: 0 22px;
  width: min(340px, 100%);
  font: inherit;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 10px;
}

.btn.primary {
  background: linear-gradient(#f3e4b2, #d7b45a);
  color: #2c1d08;
  font-weight: 650;
  box-shadow: 0 3px 0 #8a6a22, 0 8px 16px #0004;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid #f3e4b255;
}

.btn.tiny {
  width: auto;
  min-height: 36px;
  padding: 0 14px;
  margin: 0;
  background: #123525;
  color: var(--ink);
  border: 1px solid #e4cc7a55;
}

.btn:disabled {
  opacity: 0.35;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

/* Help */
#screen-help {
  background: #071910;
  padding: calc(12px + var(--safe-t)) 14px calc(16px + var(--safe-b));
}

.help-sheet {
  background: #0c2a1d;
  border: 1px solid #e4cc7a33;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #e4cc7a22;
}

.help-head h2,
#screen-stack h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.help-body {
  overflow: auto;
  padding: 14px 16px 24px;
  font-size: 0.95rem;
  line-height: 1.45;
  -webkit-overflow-scrolling: touch;
}

.help-body h3 {
  margin: 18px 0 8px;
  color: var(--gold);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.help-body ul {
  margin: 0;
  padding-left: 1.1em;
}

.help-body li {
  margin: 0.4em 0;
}

/* Table */
#screen-table {
  background: #082418;
}

.hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 78px 1fr 54px 32px;
  align-items: center;
  gap: 6px;
  padding: calc(8px + var(--safe-t)) 10px 6px;
  background: linear-gradient(#0b2c1c, #082418);
  border-bottom: 1px solid #e4cc7a22;
}

.hud-kicker {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.hud-stack {
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}

.hud-msg {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
  opacity: 0.92;
}

.hud-help,
.hud-mute {
  height: 32px;
  border: 1px solid var(--gold);
  background: #123525;
  color: var(--gold);
  font: inherit;
  cursor: pointer;
}

.hud-help {
  width: 32px;
  border-radius: 50%;
}

.hud-mute {
  width: 52px;
  border-radius: 8px;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0;
}

.hud-mute.is-muted {
  color: #f6edd2;
  border-color: #f6edd266;
  opacity: 0.75;
}

.felt-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.felt-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.felt-print {
  fill: #f3e6b8;
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  font-variant: small-caps;
  letter-spacing: 2.2px;
}

.felt-print-bj {
  font-size: 15px;
}

.felt-print-ins {
  font-size: 14px;
  fill: #1c1404;
  font-weight: 700;
  letter-spacing: 1.6px;
}

.felt-print-s17 {
  font-size: 10.2px;
  letter-spacing: 1.15px;
}

.felt-micro {
  fill: #d7c27a;
  font-size: 9px;
  letter-spacing: 2.4px;
  font-variant: small-caps;
  opacity: 0.55;
}

.shoe {
  position: absolute;
  top: 6.4%;
  right: 4%;
  width: 54px;
  height: 42px;
}

.shoe-deck {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2a1a10, #120c08);
  border: 1px solid var(--brass);
  border-radius: 4px 10px 6px 4px;
  box-shadow: 0 4px 8px #0005;
}

.shoe-lip {
  position: absolute;
  right: 4px;
  top: 7px;
  width: 22px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(#f5e15a, #d7b43a);
  border: 1px solid #8a7018;
}

.dealer-well,
.player-well {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}

.dealer-well {
  top: 15.5%;
  width: 78%;
}

.player-well {
  top: 45%;
  width: 92%;
  align-items: flex-end;
  z-index: 5;
}

.hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hand.active .cards {
  filter: drop-shadow(0 0 8px #f3e6b866);
}

.hand-tag {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 2px #0008;
}

.cards {
  display: flex;
  align-items: flex-end;
}

.card {
  width: 80px;
  height: 112px;
  border-radius: 8px;
  position: relative;
  margin-left: -30px;
  background: #f6f0de;
  border: 1px solid #c9b896;
  box-shadow: 0 6px 10px #0004;
  color: #161616;
  overflow: hidden;
}

.card.flying {
  z-index: 8;
  will-change: transform, opacity;
}

.cards .card:first-child {
  margin-left: 0;
}

.card.red {
  color: #b42318;
}

.card.back {
  background:
    repeating-linear-gradient(45deg, #1c2c4e 0 5px, #243860 5px 10px),
    #1c2c4e;
  border: 3px solid #d7c27a;
}

.card.back::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #d7c27a88;
  border-radius: 3px;
  background: radial-gradient(circle, #d7c27a33, transparent 55%);
}

.card-idx {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 1.42rem;
  line-height: 0.92;
  font-weight: 800;
  text-align: center;
  z-index: 2;
}

.card-idx .s {
  display: block;
  font-size: 1.12rem;
}

.card.rank-10 .card-idx {
  font-size: 1.12rem;
  letter-spacing: -0.05em;
}

.card-idx.br {
  top: auto;
  left: auto;
  right: 5px;
  bottom: 4px;
  transform: rotate(180deg);
}

.card-pips {
  position: absolute;
  inset: 22px 10px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pip-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.pip-row.center {
  justify-content: center;
}

.pip {
  font-size: 1.2rem;
  line-height: 1;
}

.card.face-royal .pip-royal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.card.face-royal .r {
  font-size: 3.15rem;
  font-weight: 800;
  line-height: 0.85;
}

.card.face-royal .s {
  font-size: 1.7rem;
  line-height: 1;
}

.card.ace-card .card-pips {
  justify-content: center;
  gap: 2px;
}

.card.ace-card .ace-letter {
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 0.85;
}

.card.ace-card .ace-suit {
  font-size: 1.7rem;
  line-height: 1;
}

.hand-total {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 28px;
  margin-bottom: 2px;
  padding: 1px 10px 2px;
  border-radius: 999px;
  background: #071910ee;
  border: 1px solid #e4cc7a88;
  color: #fff6d4;
  text-shadow: 0 1px 2px #0008;
}

.hand-total.hidden-total {
  visibility: hidden;
}

.total-n {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.total-soft {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.bet-spot {
  position: absolute;
  left: 50%;
  top: 68.4%;
  width: 118px;
  height: 86px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bet-stack {
  position: relative;
  width: 54px;
  height: 54px;
}

.bet-stack .chip {
  position: absolute;
  left: 0;
  width: 54px;
  height: 54px;
  margin: 0;
}

.banner {
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 5%;
  transform: translateX(-50%);
  width: min(340px, 92%);
  padding: 7px 10px;
  border-radius: 8px;
  background: #071910e6;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  z-index: 3;
  pointer-events: none;
}

.shout {
  position: absolute;
  left: 50%;
  top: 37%;
  transform: translate(-50%, -50%);
  width: min(370px, 96%);
  z-index: 8;
  text-align: center;
  pointer-events: none;
}

.shout[hidden] {
  display: none;
}

.shout-line {
  margin: 0;
  padding: 12px 10px;
  border-radius: 12px;
  background: #04140ef5;
  border: 3px solid #f3e4b2;
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff8e4;
  text-shadow:
    0 3px 0 #04140e,
    0 0 18px #04140ecc;
}

.shout.win .shout-line {
  color: #ffe9a3;
}

.shout.bust .shout-line {
  color: #ffb3a6;
}

.shout.lose .shout-line {
  color: #e8e8e8;
}

.shout.push .shout-line {
  color: #e4cc7a;
}

.shout-sub {
  margin: 8px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6edd2;
}

.cut-fx,
.shuffle-fx {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cut-fx {
  top: 58%;
  z-index: 3;
  align-items: flex-end;
  padding-bottom: 8%;
}

.cut-fx[hidden],
.shuffle-fx[hidden],
.banner[hidden] {
  display: none;
}

.cut-card {
  width: 70px;
  height: 98px;
  border-radius: 7px;
  background: linear-gradient(#f8e76a, #e0c43a);
  border: 2px solid #8a7018;
  color: #2a2208;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.2em;
  box-shadow: 0 12px 24px #0006;
  animation: cut-slide 1.15s ease;
}

@keyframes cut-slide {
  0% {
    transform: translate(120px, -160px) rotate(18deg);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  70% {
    transform: translate(0, 0) rotate(-4deg);
  }
  100% {
    transform: translate(-40px, 80px) rotate(-12deg);
    opacity: 0;
  }
}

.shuffle-fx {
  background: #04150ccc;
  pointer-events: none;
  flex-direction: column;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shuffle-fx .sub {
  margin: 6px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.8;
}

/* Rail */
.rail {
  flex: 0 0 auto;
  padding: 0 0 2px;
}

.rail-wood {
  height: 86px;
  margin: 0;
  padding: 8px 10px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background:
    linear-gradient(#0000, #0005),
    repeating-linear-gradient(90deg, #6a3a1c 0 7px, #5a3018 7px 14px, #7a4624 14px 16px);
  border-top: 3px solid var(--brass);
  box-shadow: inset 0 8px 10px #0004;
}

.tray {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chip {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  color: #1a1208;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 0 #0006,
    inset 0 0 0 3px #fff8,
    inset 0 0 0 6px currentColor;
  cursor: pointer;
}

.chip:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0005, inset 0 0 0 3px #fff8, inset 0 0 0 6px currentColor;
}

.chip:disabled {
  opacity: 0.32;
}

.chip-c25 {
  background: #e6c34a;
  color: #6a4e10;
}

.chip-c100 {
  background: #f4f1ea;
  color: #4a4a4a;
}

.chip-c500 {
  background: #c0392b;
  color: #6a1510;
}

.chip-c2500 {
  background: #1f7a46;
  color: #0c3d22;
}

.clear-bet {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #e4cc7a55;
  background: #2d160ccc;
  color: var(--ink);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Actions */
.actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px calc(10px + var(--safe-b));
  background: #071910;
}

.act {
  min-height: 54px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: #123525;
  color: #f6edd2;
  box-shadow: inset 0 0 0 1px #e4cc7a44, 0 3px 0 #04140e;
}

.act.wide {
  grid-column: 1 / -1;
}

.act.deal,
.act.even {
  background: linear-gradient(#f3e4b2, #d7b45a);
  color: #2c1d08;
}

.act.ins {
  background: #efd14a;
  color: #2c2208;
}

.act:disabled {
  opacity: 0.32;
}

.act:active:not(:disabled) {
  transform: translateY(1px);
}

.result-strip {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0.85;
  margin: -2px 0 0;
}

.broke {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.82rem;
}

@media (max-height: 700px) {
  .card {
    width: 72px;
    height: 102px;
    margin-left: -26px;
  }
  .card.face-royal .r {
    font-size: 2.7rem;
  }
  .card.ace-card .ace-letter {
    font-size: 2.5rem;
  }
  .shout-line {
    font-size: 2rem;
  }
  .chip,
  .bet-stack,
  .bet-stack .chip {
    width: 50px;
    height: 50px;
  }
  .felt-print-bj {
    font-size: 14px;
  }
}

@media (max-height: 620px) {
  .hud-msg {
    font-size: 0.7rem;
  }
  .rail-wood {
    height: 76px;
  }
  .act {
    min-height: 48px;
  }
}

/* Fred: no on-table cut-card position visual. Shuffle logic unchanged. */
.shoe,
.shoe-deck,
.shoe-lip,
.cut-fx,
.mini-card.cut {
  display: none !important;
}