:root {
  --bg: #06060a;
  --panel: #0d0f1a;
  --bj-purple: #531c7f;
  --bj-deep-purple: #2a0f45;
  --bj-green: #70ff3a;
  --bj-lime: #c0ff5a;
  --bj-orange: #ff952a;
  --text: #d6deff;
  --muted: #9ba3c6;
  --danger: #ff5a7f;
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, #1a1430 0%, transparent 45%),
    radial-gradient(circle at 78% 82%, #142511 0%, transparent 40%),
    linear-gradient(160deg, #05050b 0%, #0b0f1d 45%, #09080f 100%);
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 100% 3px,
    repeating-linear-gradient(
      90deg,
      transparent 0 36px,
      rgba(112, 255, 58, 0.03) 36px 37px
    );
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: scan-drift 8s linear infinite;
}

.app-shell {
  width: min(1120px, 100%);
}

.top-bar {
  background: linear-gradient(180deg, #181e2c, #0e111c);
  border: 1px solid rgba(112, 255, 58, 0.25);
  box-shadow: var(--shadow), inset 0 0 20px rgba(112, 255, 58, 0.1);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.top-bar h1 {
  margin: 0;
  letter-spacing: 0.05em;
  font-size: clamp(1.2rem, 2.6vw, 1.95rem);
  color: var(--bj-lime);
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(112, 255, 58, 0.45),
    0 0 26px rgba(112, 255, 58, 0.2);
}

.subhead {
  margin-left: 0.6rem;
  font-size: 0.55em;
  color: var(--bj-orange);
  letter-spacing: 0.2em;
}

.scoreboard {
  display: flex;
  gap: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.table {
  position: relative;
  background: linear-gradient(145deg, #1a1230, #2c1541 35%, #1f132a 100%);
  border-radius: 28px;
  box-shadow: var(--shadow), 0 0 40px rgba(120, 34, 194, 0.25);
  padding: 0.9rem;
}

.table-rail {
  border-radius: 22px;
  padding: 0.38rem;
  background: linear-gradient(130deg, #221630, #0e0f1a, #2d1750);
}

.table-inner {
  position: relative;
  border-radius: 20px;
  padding: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(70, 16, 110, 0.62) 0%, rgba(12, 16, 24, 0.98) 74%),
    linear-gradient(120deg, rgba(24, 70, 20, 0.28), rgba(14, 18, 29, 0.8));
  border: 2px solid rgba(112, 255, 58, 0.25);
  box-shadow: inset 0 0 60px rgba(112, 255, 58, 0.08);
}

.table-inner::before,
.table-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.table-inner::before {
  background: linear-gradient(
    105deg,
    transparent 0 42%,
    rgba(173, 255, 82, 0.14) 49%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(173, 255, 82, 0.14) 51%,
    transparent 58% 100%
  );
  transform: translateX(-90%);
  animation: warning-sweep 5.4s cubic-bezier(0.33, 0.01, 0.67, 1) infinite;
}

.table-inner::after {
  background: radial-gradient(circle at 50% 50%, rgba(123, 47, 255, 0.12), transparent 60%);
  mix-blend-mode: screen;
}

.warning-strip {
  margin: -1rem -1rem 0.8rem;
  padding: 0.4rem 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.76rem;
  color: #1e1202;
  background: repeating-linear-gradient(
    -45deg,
    var(--bj-orange) 0 14px,
    #f7cf4a 14px 28px
  );
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  animation: warning-flicker 1.2s steps(2, jump-none) infinite;
}

.hud-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(112, 255, 58, 0.08) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(112, 255, 58, 0.08) 1px, transparent 1px) 0 0 / 28px 100%;
  opacity: 0.22;
}

#vfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.multiplayer-panel,
.bankroll-panel,
.status-panel,
.player-area,
.dealer-area {
  position: relative;
  z-index: 4;
}

.multiplayer-panel,
.bankroll-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  border: 1px solid rgba(155, 163, 198, 0.28);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(160deg, rgba(15, 18, 34, 0.85), rgba(26, 15, 48, 0.7));
}

.bankroll-panel {
  margin-top: 0.7rem;
}

.seat-label,
.bankroll,
.bet {
  margin: 0;
  font-weight: 700;
  color: var(--bj-lime);
}

.seat-actions,
.chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.seat-status-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 700;
}

.chip {
  border: 1px solid rgba(112, 255, 58, 0.6);
  background: radial-gradient(circle at 30% 28%, #272f1f 0%, #11150f 100%);
  color: var(--bj-lime);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: inset 0 0 14px rgba(112, 255, 58, 0.25);
}

.chip.active {
  box-shadow:
    0 0 0 1px #081003,
    0 0 0 3px rgba(112, 255, 58, 0.7),
    0 0 18px rgba(112, 255, 58, 0.5);
}

.hand-area {
  margin-top: 0.9rem;
}

.dealer-area,
.player-area {
  border: 1px solid rgba(112, 255, 58, 0.2);
  border-radius: 12px;
  padding: 0.65rem 0.75rem;
  background: linear-gradient(180deg, rgba(12, 17, 28, 0.78), rgba(10, 13, 20, 0.8));
}

.hand-area header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}

h2 {
  margin: 0;
  color: var(--bj-lime);
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.total {
  margin: 0;
  color: var(--bj-orange);
  font-weight: 700;
}

.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.players-grid.single-player {
  grid-template-columns: 1fr;
}

.player-area.is-hidden {
  display: none;
}

.cards {
  min-height: 108px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.card {
  width: 70px;
  height: 100px;
  border-radius: 8px;
  border: 1px solid rgba(112, 255, 58, 0.28);
  background: linear-gradient(180deg, #f4f6ff, #dce2f7);
  color: #161622;
  padding: 0.32rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(112, 255, 58, 0.2);
  transform: translateY(15px) scale(0.96);
  opacity: 0;
  animation: deal-in 260ms cubic-bezier(0.18, 0.86, 0.26, 1.06) forwards;
}

.card .rank {
  font-size: 1rem;
  font-weight: 800;
}

.card .suit {
  font-size: 1.2rem;
  align-self: flex-end;
}

.card.red {
  color: #b80e2f;
}

.card.back {
  background:
    repeating-linear-gradient(45deg, #411e6e 0 8px, #2d144d 8px 16px),
    linear-gradient(180deg, #2a1748, #11091e);
  color: #d3f7aa;
  border: 1px solid rgba(112, 255, 58, 0.5);
}

.status-panel {
  margin-top: 0.85rem;
  border: 1px solid rgba(112, 255, 58, 0.28);
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(10, 17, 23, 0.88), rgba(20, 10, 28, 0.8));
  padding: 0.75rem 0.9rem;
}

#status {
  margin: 0;
  font-weight: 800;
  color: #f1ffda;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(112, 255, 58, 0.45);
}

#status.pulse {
  animation: status-pulse 280ms ease;
}

.round-result {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: clamp(1.6rem, 5.8vw, 3.7rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  border: 2px solid transparent;
  animation: result-pop 420ms cubic-bezier(0.14, 0.84, 0.24, 1.08);
}

.round-result.win {
  color: #d6ffd1;
  border-color: rgba(112, 255, 58, 0.8);
  background: linear-gradient(180deg, rgba(37, 83, 28, 0.7), rgba(17, 44, 12, 0.65));
  text-shadow: 0 0 12px rgba(112, 255, 58, 0.7), 0 0 28px rgba(112, 255, 58, 0.35);
}

.round-result.loss {
  color: #ffe1e9;
  border-color: rgba(255, 90, 127, 0.85);
  background: linear-gradient(180deg, rgba(90, 24, 43, 0.7), rgba(49, 12, 24, 0.68));
  text-shadow: 0 0 12px rgba(255, 90, 127, 0.75), 0 0 28px rgba(255, 90, 127, 0.35);
}

.round-result.push {
  color: #ffe9c8;
  border-color: rgba(255, 149, 42, 0.9);
  background: linear-gradient(180deg, rgba(97, 52, 9, 0.7), rgba(58, 28, 5, 0.7));
  text-shadow: 0 0 12px rgba(255, 149, 42, 0.78), 0 0 28px rgba(255, 149, 42, 0.35);
}

.hidden {
  display: none !important;
}

.actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.btn {
  border: 1px solid rgba(112, 255, 58, 0.35);
  border-radius: 10px;
  padding: 0.62rem 1rem;
  background: linear-gradient(165deg, #1d2440, #12162a);
  color: #e4f4cf;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    transform 120ms ease,
    filter 120ms ease,
    opacity 120ms ease,
    box-shadow 120ms ease;
}

.btn:hover:not(:disabled),
.chip:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.btn:disabled,
.chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  border-color: rgba(112, 255, 58, 0.8);
  background: linear-gradient(165deg, #27482b, #102113);
  box-shadow: 0 0 16px rgba(112, 255, 58, 0.24);
  animation: button-throb-green 1.5s ease-in-out infinite;
}

.btn-accent {
  border-color: rgba(255, 149, 42, 0.75);
  background: linear-gradient(165deg, #5a2d14, #2a1509);
  box-shadow: 0 0 16px rgba(255, 149, 42, 0.24);
  animation: button-throb-orange 1.2s ease-in-out infinite;
}

.danger {
  color: var(--danger) !important;
  text-shadow: 0 0 8px rgba(255, 90, 127, 0.3);
}

.fx-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--fx-color, var(--bj-lime));
  box-shadow: 0 0 18px var(--fx-color, var(--bj-lime));
  left: var(--fx-x);
  top: var(--fx-y);
  transform: translate(-50%, -50%);
  animation: fx-burst 700ms cubic-bezier(0.07, 0.79, 0.11, 0.99) forwards;
}

.fx-ring {
  position: absolute;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--fx-color, var(--bj-lime));
  box-shadow: 0 0 30px var(--fx-color, var(--bj-lime));
  animation: ring-boom 620ms ease-out forwards;
}

.fx-shard {
  position: absolute;
  left: var(--fx-x);
  top: var(--fx-y);
  width: 4px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), var(--fx-color, var(--bj-lime)));
  box-shadow: 0 0 20px var(--fx-color, var(--bj-lime));
  transform-origin: center;
  animation: shard-dash 820ms ease-out forwards;
}

.fx-banner {
  position: absolute;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--fx-color, var(--bj-lime));
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.65),
    0 0 18px var(--fx-color, var(--bj-lime)),
    0 0 34px var(--fx-color, var(--bj-lime));
  animation: banner-spike 680ms ease-out forwards;
  white-space: nowrap;
}

body.action-flash::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, var(--flash-color), transparent 50%),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 6px
    );
  mix-blend-mode: screen;
  opacity: 0;
  animation: flash-pop 360ms ease-out;
}

body.action-shake .app-shell {
  animation: fx-shake 340ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

body.action-glitch .table-inner {
  animation: fx-glitch 220ms steps(2, jump-none) 2;
}

body.action-overdrive .hud-grid {
  animation: hud-frenzy 380ms linear;
}

body.action-tilt .table {
  animation: fx-tilt 440ms ease-out;
}

body.action-strobe .app-shell {
  animation: fx-strobe 520ms steps(2, jump-none);
}

body.flash-deal {
  --flash-color: rgba(112, 255, 58, 0.34);
}

body.flash-hit {
  --flash-color: rgba(157, 255, 96, 0.38);
}

body.flash-stand {
  --flash-color: rgba(255, 149, 42, 0.34);
}

body.flash-double {
  --flash-color: rgba(255, 95, 198, 0.48);
}

@keyframes deal-in {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes warning-sweep {
  0% {
    transform: translateX(-90%);
  }
  60%,
  100% {
    transform: translateX(90%);
  }
}

@keyframes warning-flicker {
  0%,
  100% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.18);
  }
  36% {
    filter: brightness(0.86);
  }
  70% {
    filter: brightness(1.16);
  }
}

@keyframes scan-drift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(3px);
  }
}

@keyframes status-pulse {
  0% {
    filter: brightness(1.6);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes result-pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fx-burst {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate(
      calc((var(--fx-dx) * 1px - 50%)),
      calc((var(--fx-dy) * 1px - 50%))
    ) scale(0.12) rotate(230deg);
    opacity: 0;
  }
}

@keyframes ring-boom {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(14);
    opacity: 0;
  }
}

@keyframes shard-dash {
  0% {
    transform: translate(-50%, -50%) scaleY(0.4);
    opacity: 0.95;
  }
  100% {
    transform: translate(
      calc((var(--fx-dx) * 1px - 50%)),
      calc((var(--fx-dy) * 1px - 50%))
    ) scaleY(0.08);
    opacity: 0;
  }
}

@keyframes banner-spike {
  0% {
    transform: scale(0.6) rotate(-5deg);
    opacity: 0;
    filter: blur(5px);
  }
  15% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1.12) rotate(0deg);
    opacity: 0;
    filter: blur(1px);
  }
}

@keyframes flash-pop {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  32% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fx-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  12% {
    transform: translate(-6px, 4px) rotate(-0.5deg);
  }
  24% {
    transform: translate(7px, -3px) rotate(0.6deg);
  }
  36% {
    transform: translate(-8px, -2px) rotate(-0.7deg);
  }
  48% {
    transform: translate(8px, 5px) rotate(0.5deg);
  }
  60% {
    transform: translate(-6px, 3px) rotate(-0.4deg);
  }
  72% {
    transform: translate(5px, -4px) rotate(0.4deg);
  }
  84% {
    transform: translate(-3px, 2px) rotate(-0.3deg);
  }
}

@keyframes fx-glitch {
  0% {
    filter: saturate(1) contrast(1);
    transform: translate(0, 0);
  }
  25% {
    filter: saturate(1.8) contrast(1.2);
    transform: translate(-4px, 2px);
  }
  50% {
    filter: hue-rotate(15deg) saturate(2.2);
    transform: translate(3px, -2px);
  }
  75% {
    filter: hue-rotate(-10deg) contrast(1.35);
    transform: translate(-2px, -3px);
  }
  100% {
    filter: saturate(1) contrast(1);
    transform: translate(0, 0);
  }
}

@keyframes hud-frenzy {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }
  35% {
    opacity: 0.6;
    transform: scale(1.025);
  }
  70% {
    opacity: 0.45;
    transform: scale(1.01);
  }
  100% {
    opacity: 0.22;
    transform: scale(1);
  }
}

@keyframes fx-tilt {
  0%,
  100% {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
  }
  30% {
    transform: perspective(1200px) rotateX(2.6deg) rotateY(-3.4deg);
  }
  55% {
    transform: perspective(1200px) rotateX(-2deg) rotateY(3.2deg);
  }
  80% {
    transform: perspective(1200px) rotateX(1.3deg) rotateY(-1.6deg);
  }
}

@keyframes fx-strobe {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  25% {
    filter: brightness(1.55) saturate(1.4);
  }
  50% {
    filter: brightness(0.85) saturate(2);
  }
  75% {
    filter: brightness(1.45) saturate(1.8);
  }
}

@keyframes button-throb-green {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(112, 255, 58, 0.24);
  }
  50% {
    box-shadow: 0 0 30px rgba(112, 255, 58, 0.58);
  }
}

@keyframes button-throb-orange {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(255, 149, 42, 0.24);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 149, 42, 0.6);
  }
}

@media (max-width: 820px) {
  .players-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .cards {
    min-height: 92px;
    gap: 0.45rem;
  }

  .card {
    width: 62px;
    height: 88px;
  }

  .scoreboard {
    width: 100%;
    justify-content: space-between;
  }

  .subhead {
    display: block;
    margin: 0.2rem 0 0;
  }
}