.neo-message {
  border: 1px solid rgba(92, 255, 139, .28);
  background: linear-gradient(90deg, rgba(0, 24, 10, .72), rgba(6, 54, 24, .28));
  box-shadow: inset 0 0 20px rgba(47, 255, 105, .06);
}

.neo-message strong,
.neo-message time { color: #75ff9c; }

.neo-choice {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid #67ff8e;
  border-radius: 3px;
  color: #a3ffba;
  background: #001b09;
  box-shadow: 0 0 7px rgba(58, 255, 106, .55), inset 0 0 14px rgba(44, 255, 98, .16);
  font: 800 .77rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: neo-flicker 2.7s steps(1, end) infinite;
}

.neo-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(119, 255, 151, .13) 2px 3px);
}

.neo-choice:hover,
.neo-choice:focus-visible {
  color: #001b09;
  background: #78ff99;
  box-shadow: 0 0 18px rgba(78, 255, 120, .9);
}

@keyframes neo-flicker {
  0%, 9%, 12%, 47%, 49%, 88%, 100% { opacity: 1; transform: translateX(0); }
  10%, 48% { opacity: .45; transform: translateX(1px); }
  11%, 89% { opacity: .82; transform: translateX(-1px); }
}

#neo-world {
  position: fixed;
  z-index: 10000;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  background: #000;
  transition: opacity .45s ease;
}

#neo-world.visible { opacity: 1; }
#neo-world canvas { display: block; width: 100%; height: 100%; }
#neo-world.at-table canvas { cursor: default; }

#neo-world::before,
#neo-world::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

#neo-world::before {
  opacity: .22;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 4px);
  animation: neo-scan 7s linear infinite;
}

#neo-world::after {
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 8, 3, .12) 78%, rgba(0, 0, 0, .52) 100%);
  box-shadow: inset 0 0 8vw rgba(0, 0, 0, .34);
}

@keyframes neo-scan { to { background-position-y: 40px; } }

.neo-game-hud {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 20px;
  left: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}

#neo-world.at-table .neo-game-hud {
  opacity: 1;
  transform: none;
}

#neo-world.at-table .neo-crosshair { opacity: 0; }

.neo-wake-curtain {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .42) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at center, rgba(38, 255, 102, .2), rgba(0, 10, 4, .97) 58%, #000 100%);
}

#neo-world.visible .neo-wake-curtain {
  animation: neo-wake-curtain 2.45s cubic-bezier(.64, 0, .2, 1) forwards;
}

@keyframes neo-wake-curtain {
  0% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.7); }
  28% { opacity: .96; clip-path: inset(47.5% 0 47.5% 0); filter: brightness(2.4); }
  42% { opacity: .86; clip-path: inset(49.6% 0 49.6% 0); }
  54% { opacity: .92; clip-path: inset(0 0 0 0); filter: brightness(1.1); }
  100% { opacity: 0; visibility: hidden; filter: brightness(.7); }
}

.neo-game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(64vw, 760px);
}

.neo-game-meta span,
.neo-game-turn {
  padding: 8px 13px;
  border: 1px solid rgba(224, 184, 108, .72);
  border-radius: 5px;
  color: #f5eddc;
  background: rgba(4, 15, 10, .86);
  box-shadow: 0 0 13px rgba(35, 255, 100, .1), inset 0 0 12px rgba(35, 255, 100, .05);
  font: 700 .95rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .045em;
  text-shadow: 0 1px 3px #000;
}

.neo-game-meta .neo-suit {
  font-size: 1.65em;
  line-height: 0;
  vertical-align: -.16em;
}

.neo-game-meta .neo-suit.red { color: #ff7b72; }

.neo-bid-board,
.neo-hand-tally,
.neo-blackjack-scores {
  position: absolute;
  z-index: 4;
  left: 20px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  min-width: 172px;
  padding: 10px 12px;
  border: 1px solid rgba(224, 184, 108, .66);
  border-radius: 6px;
  color: #f5eddc;
  background: rgba(4, 15, 10, .86);
  box-shadow: 0 0 13px rgba(35, 255, 100, .1), inset 0 0 12px rgba(35, 255, 100, .05);
  font: 700 .78rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

/* The grid display above would otherwise win against the hidden attribute. */
.neo-bid-board[hidden],
.neo-hand-tally[hidden],
.neo-blackjack-scores[hidden] { display: none; }

#neo-world.at-table .neo-bid-board,
#neo-world.at-table .neo-hand-tally,
#neo-world.at-table .neo-blackjack-scores { opacity: 1; }

.neo-hand-tally > strong,
.neo-blackjack-scores > strong {
  display: block;
  margin-bottom: 5px;
  color: #e0b86c;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.neo-hand-tally-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2.6em;
  gap: 12px;
  padding: 2px 0;
}

.neo-hand-tally-row span:last-child {
  color: #e0b86c;
  text-align: right;
}

.neo-blackjack-scores {
  bottom: 58px;
  min-width: 230px;
}

.neo-blackjack-score-row {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto;
  gap: 18px;
  padding: 2px 0;
}

.neo-blackjack-score-row span:last-child {
  color: #e0b86c;
  text-align: right;
}

.neo-blackjack-score-row span.bust { color: #ff8078; }

.neo-hand-tally-row:first-of-type {
  color: rgba(198, 220, 203, .62);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.neo-bid-row {
  display: grid;
  grid-template-columns: 11px 1fr 2.6em;
  gap: 9px;
  align-items: baseline;
  opacity: .72;
}

.neo-bid-board.with-tricks .neo-bid-row {
  grid-template-columns: 11px 1fr 2.6em 2.6em;
}

.neo-bid-row.heading {
  opacity: .5;
  font-size: .84em;
  letter-spacing: .1em;
}

.neo-bid-value,
.neo-bid-won { text-align: right; }
.neo-bid-won { color: #63df8a; }

.neo-bid-row.active { opacity: 1; }
.neo-bid-arrow { color: #63df8a; }
.neo-bid-value { color: #e0b86c; }

.neo-game-turn.winner {
  animation: neo-winner-pulse .65s ease-in-out 2 alternate;
}

@keyframes neo-winner-pulse {
  to { transform: scale(1.06); box-shadow: 0 0 28px rgba(224, 184, 108, .65); }
}

.neo-game-turn {
  flex: 0 0 auto;
  color: #17130b;
  background: #e0b86c;
  box-shadow: 0 0 16px rgba(224, 184, 108, .3);
  text-shadow: none;
}

.neo-hud {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(160, 255, 183, .7);
  font: 600 .67rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-shadow: 0 0 7px #39ff6c;
}

.neo-world-chat {
  position: absolute;
  z-index: 7;
  right: 20px;
  bottom: 64px;
  width: min(430px, calc(100vw - 40px));
  padding: 13px;
  border: 1px solid rgba(224, 184, 108, .72);
  border-radius: 7px;
  color: #f5eddc;
  background: rgba(3, 14, 9, .95);
  box-shadow: 0 0 32px rgba(0, 0, 0, .7), inset 0 0 22px rgba(49, 255, 104, .06);
}

.neo-world-chat[hidden] { display: none; }

.neo-world-chat label {
  display: block;
  margin-bottom: 8px;
  color: #e0b86c;
  font: 800 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.neo-world-chat > div {
  display: flex;
  gap: 8px;
}

.neo-world-chat input {
  min-width: 0;
  flex: 1;
  padding: 10px 11px;
  border: 1px solid rgba(116, 255, 148, .42);
  border-radius: 4px;
  outline: 0;
  color: #eff8f0;
  background: #030906;
  font: 600 .82rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.neo-world-chat input:focus {
  border-color: #72ff98;
  box-shadow: 0 0 0 2px rgba(75, 255, 124, .13);
}

.neo-world-chat button {
  padding: 9px 14px;
  border: 1px solid #e0b86c;
  border-radius: 4px;
  color: #17130b;
  background: #e0b86c;
  font: 800 .76rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.neo-world-chat small {
  display: block;
  margin-top: 8px;
  color: rgba(198, 220, 203, .62);
  font: 600 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.neo-chat-history {
  position: absolute;
  z-index: 6;
  top: 82px;
  right: 20px;
  width: min(340px, calc(100vw - 40px));
  max-height: min(58vh, 560px);
  overflow: hidden;
  border: 1px solid rgba(224, 184, 108, .64);
  border-radius: 7px;
  color: #f5eddc;
  background: rgba(3, 14, 9, .91);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .58), inset 0 0 22px rgba(49, 255, 104, .045);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

.neo-leaderboard-history {
  position: absolute;
  z-index: 7;
  top: 82px;
  left: 50%;
  width: min(520px, calc(100vw - 40px));
  max-height: min(70vh, 650px);
  overflow: hidden auto;
  border: 1px solid rgba(224, 184, 108, .72);
  border-radius: 7px;
  color: #f5eddc;
  background: rgba(3, 14, 9, .95);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .68), inset 0 0 22px rgba(49, 255, 104, .045);
  transform: translateX(-50%);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.neo-leaderboard-history[hidden] { display: none; }

.neo-leaderboard-history > header {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(116, 255, 148, .18);
  color: #e0b86c;
  font: 800 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.neo-leaderboard-history > header span { color: rgba(166, 255, 187, .58); font-size: .62rem; }
.neo-leaderboard-history-content { padding: 12px 14px; }
.neo-leaderboard-history-content .match-history-heading { display: none; }
.neo-leaderboard-history-content .match-history-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.neo-leaderboard-history-content button { padding: 5px 8px; border: 1px solid rgba(224,184,108,.5); color: #d7ccb4; background: rgba(255,255,255,.05); }
.neo-leaderboard-history-content button.selected { color: #17130b; background: #e0b86c; }
.neo-leaderboard-history-content .result-row { display: grid; grid-template-columns: 1fr 48px 92px; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(116,255,148,.1); }
.neo-leaderboard-history-content .outcome { text-align: center; }
.neo-leaderboard-history-content .outcome.current { overflow: hidden; color: #b8f0d2; text-overflow: ellipsis; white-space: nowrap; }
.neo-leaderboard-history-content .result-dealer { color: rgba(198,220,203,.62); }

.neo-chat-history[hidden] { display: none; }

.neo-chat-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(116, 255, 148, .18);
  color: #e0b86c;
  font: 800 .69rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.neo-chat-history > header span {
  color: rgba(166, 255, 187, .58);
  font-size: .6rem;
}

.neo-chat-history-messages {
  max-height: calc(min(58vh, 560px) - 39px);
  overflow: hidden auto;
  scrollbar-color: rgba(116, 255, 148, .34) transparent;
}

.neo-chat-history-message {
  padding: 10px 13px 11px;
  border-bottom: 1px solid rgba(116, 255, 148, .09);
}

.neo-chat-history-message:last-child { border-bottom: 0; }

.neo-chat-history-message > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.neo-chat-history-message strong {
  color: #7cff9d;
  font: 800 .72rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.neo-chat-history-message time {
  color: rgba(198, 220, 203, .46);
  font: 600 .58rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.neo-chat-history-message p,
.neo-chat-empty {
  margin: 5px 0 0;
  color: rgba(241, 247, 240, .84);
  font: 500 .77rem/1.42 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.neo-chat-empty {
  padding: 18px 13px;
  margin: 0;
  color: rgba(198, 220, 203, .52);
}

#neo-world canvas { transition: filter .18s ease; }
#neo-world.chatting canvas,
#neo-world.leaderboard-history-open canvas { filter: brightness(.62) saturate(.72) blur(.5px); }
#neo-world.chatting .neo-crosshair { opacity: 0; }

.neo-exit,
.neo-refresh {
  padding: 8px 11px;
  border: 1px solid rgba(116, 255, 148, .44);
  border-radius: 3px;
  color: #9dffb5;
  background: rgba(0, 20, 7, .82);
  font: inherit;
}

#neo-world.neo-sync-failed .neo-refresh {
  border-color: rgba(255, 126, 105, .8);
  color: #ffb3a6;
  box-shadow: 0 0 12px rgba(255, 92, 68, .24);
}

.neo-crosshair {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(142, 255, 169, .4);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body.neo-transition::after {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .52) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 18vw #000;
  animation: neo-ui-collapse 1.45s ease both;
}

body.neo-transition > .shell {
  transform-origin: 50% 50%;
  animation: neo-shell-collapse 1.05s cubic-bezier(.68, 0, .2, 1) both;
}

body.neo-awake > .shell {
  opacity: 0;
  pointer-events: none;
}

@keyframes neo-ui-collapse {
  0% { opacity: 0; filter: none; }
  30% { opacity: .45; filter: hue-rotate(70deg) contrast(1.45); }
  62% { opacity: .9; }
  100% { opacity: 0; }
}

@keyframes neo-shell-collapse {
  0% { opacity: 1; transform: scale(1); filter: none; }
  42% { opacity: 1; transform: scale(1.018); filter: contrast(1.35) saturate(.45) hue-rotate(55deg); }
  68% { opacity: .95; transform: scaleX(1) scaleY(.018); filter: brightness(2.5) contrast(1.8); }
  100% { opacity: 0; transform: scaleX(.04) scaleY(.004); filter: brightness(4); }
}

@media (prefers-reduced-motion: reduce) {
  .neo-choice { animation: none; }
  .neo-game-turn.winner { animation: none; }
  #neo-world,
  .neo-wake-curtain,
  body.neo-transition::after,
  body.neo-transition > .shell { transition: none; animation: none; }
  .neo-wake-curtain,
  body.neo-transition::after { opacity: 0; visibility: hidden; }
}