@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Permanent+Marker&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --wood-dark: #050810;
  --wood-mid: #0a0f1a;
  --wood-light: #111a2e;
  --wood-grain: #0d1525;
  --card-bg: #e8eaf0;
  --card-border: #8090b0;
  --text: #c8d8f0;
  --text-muted: #5a7a9a;
  --border: rgba(80,140,220,0.18);
  --neon-pink: #ff2d78;
  --neon-blue: #00cfff;
  --neon-yellow: #ffe600;
  --red: #cc2200;
  --accent: #3a6aaa;
  --steel: #8898b8;
  --chrome: #b8c8e0;
  --radius: 6px;
}

html, body {
  min-height: 100%;
  font-family: 'Oswald', sans-serif;
}

body {
  background-color: #050810;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(20,50,120,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(10,30,80,0.3) 0%, transparent 55%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(255,255,255,0.015) 60px,
      rgba(255,255,255,0.015) 61px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 60px,
      rgba(255,255,255,0.01) 60px,
      rgba(255,255,255,0.01) 61px
    );
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  position: relative;
}

/* TABLE SURFACE OVERLAY — real generated wood table background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("./table-top.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  filter: brightness(1.35) saturate(1.1);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
  z-index: 0;
}

/* CARVINGS & GRAFFITI — scattered all over the table */
.table-art {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  color: rgba(255,200,120,0.13);
  user-select: none;
  transform-origin: center;
}
.carving { color: rgba(140,180,220,0.12); text-shadow: 1px 1px 0 rgba(0,0,0,0.8); }
.deep-carving { color: rgba(100,150,210,0.16); text-shadow: 2px 2px 0 rgba(0,0,0,0.9), -1px -1px 0 rgba(80,140,220,0.06); }
.scratched { color: rgba(120,170,230,0.07); letter-spacing: 3px; }

/* NEON SIGNS */
.neon-sign {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0.18;
  animation: flicker 4s infinite;
}
.neon-pink {
  color: var(--neon-pink);
  text-shadow: 0 0 4px var(--neon-pink), 0 0 10px #ff006640;
}
.neon-blue {
  color: var(--neon-blue);
  text-shadow: 0 0 4px var(--neon-blue), 0 0 10px #00cfff30;
}
.neon-yellow {
  color: var(--neon-yellow);
  text-shadow: 0 0 4px var(--neon-yellow), 0 0 10px #ffe60030;
}


@keyframes slideIn {
  from { transform: translateX(-50%) translateY(-12px) rotate(0deg); opacity: 0.5; }
  to   { transform: translateX(-50%) translateY(0)     rotate(0deg); opacity: 1; }
}
@keyframes pilePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(60,120,220,0); }
  50%      { box-shadow: 0 0 0 6px rgba(60,120,220,0.25); }
}
.pile-wrapper.ready { animation: pilePulse 1.2s ease-in-out infinite; border-radius: 6px; }

@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% { opacity: 1; }
  20%,24%,55% { opacity: 0.4; }
}
@keyframes flicker2 {
  0%,30%,32%,65%,67%,100% { opacity: 1; }
  31%,66% { opacity: 0.3; }
}
@keyframes flicker3 {
  0%,45%,47%,80%,82%,100% { opacity: 1; }
  46%,81% { opacity: 0.5; }
}
.neon-sign.f2 { animation: flicker2 6s infinite; }
.neon-sign.f3 { animation: flicker3 3s infinite; }

/* BURN RING (old beer mug stain) */
.burn-ring {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(60,120,200,0.08);
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 8px rgba(40,100,180,0.06);
}

/* MAIN CONTENT */
#app {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 560px;
  padding: 1rem;
  pointer-events: auto;
}

/* LOBBY */
#lobby { text-align: center; padding: 1rem; }
#lobby h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  color: var(--chrome);
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 20px rgba(60,120,220,0.3);
  margin-bottom: 4px;
  letter-spacing: 8px;
  text-transform: uppercase;
  display: none;
}

.tagline { font-size: 13px; color: var(--text-muted); margin-bottom: 1.5rem; letter-spacing: 2px; text-transform: uppercase; }
.lobby-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1.2rem;
  margin-bottom: 1rem;

  position: relative;
}
.lobby-card h2 { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.8rem; }
input[type="text"] {
  width: 100%; padding: 9px 12px; border-radius: 5px;
  border: 1px solid rgba(150,90,30,0.4);
  background: rgba(10,5,0,0.6);
  color: var(--text); font-size: 16px; font-family: 'Oswald', sans-serif;
  margin-bottom: 8px; outline: none;
}
input[type="text"]::placeholder { color: rgba(150,100,50,0.5); }
input[type="text"]:focus { border-color: rgba(60,120,220,0.6); }
button {
  width: 100%; padding: 10px; border-radius: 5px; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.35; cursor: default; }
.btn-primary {
  background: linear-gradient(135deg,#0a2a5a,#1a4aaa);
  color: #00cfff; border: 2px solid #00cfff;
  letter-spacing: 2px;
  box-shadow: 0 0 12px rgba(0,207,255,0.3), inset 0 0 12px rgba(0,207,255,0.05);
  text-shadow: 0 0 8px rgba(0,207,255,0.5);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg,#0d3a7a,#2a5aee);
  box-shadow: 0 0 20px rgba(0,207,255,0.5);
}
.btn-secondary { background: rgba(20,10,5,0.8); color: var(--text-muted); border: 1px solid rgba(150,90,30,0.3); margin-top: 6px; }

/* GENERATED BUTTON ART — baked-in label plaques, replaces color/border/text styling */
.btn-plaque {
  display: block;
  width: min(280px, 92%);
  aspect-ratio: 4 / 3;
  margin: 10px auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  font-size: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}
.btn-plaque:hover:not(:disabled) { filter: brightness(1.18); transform: translateY(-1px); }
.btn-plaque:active:not(:disabled) { transform: scale(0.96); filter: brightness(0.88); }
.btn-plaque:disabled { filter: grayscale(0.7) brightness(0.55); cursor: default; }

#enter-bar-btn        { background-image: url('./btn-enter-bar.png'); }
#join-room-btn        { background-image: url('./btn-join-room.png'); width: min(240px, 85%); margin-top: 8px; }
#create-room-lobby-btn{ background-image: url('./btn-create-room.png'); width: min(240px, 85%); margin-bottom: 8px; }
#play-again-btn        { background-image: url('./btn-play-again.png'); width: min(230px, 85%); margin-bottom: 6px; }
#quit-game-btn          { background-image: url('./btn-quit.png'); width: min(190px, 75%); }
/* #deal-btn, #play-btn, #confirm-chosen keep their own dedicated rules further down (higher specificity order) */
.room-code-display {
  font-family: 'Oswald', sans-serif;
  font-size: 2.4rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--chrome);
  text-shadow: 1px 2px 0 rgba(0,0,0,0.8), 0 0 15px rgba(180,120,30,0.25);
  margin: 0.6rem 0;
}
.waiting-msg { font-size: 12px; color: var(--text-muted); margin-top: 6px; letter-spacing: 1px; }
#lobby-status { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 6px; }

/* SETUP */
#setup { display: none; padding: 1rem; }
#setup h2 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--chrome); text-shadow: 1px 1px 0 rgba(0,0,0,0.8); margin-bottom: 4px; text-align: center; letter-spacing: 4px; text-transform: uppercase; }
.setup-instructions { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 12px; letter-spacing: 1px; }
.mini-hierarchy { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px; margin: 0 auto 14px; max-width: 340px; }
.mini-hierarchy .mh-label { font-size: 8px; color: var(--text-muted); letter-spacing: 1px; margin: 0 4px; }
.mini-hierarchy .mh-card { background: var(--card-bg); color: #111; border-radius: 3px; padding: 2px 6px; font-size: 11px; font-weight: 700; font-family: Oswald, sans-serif; }
.mini-hierarchy .mh-card.special { background: #1a3a6a; color: #1a8aee; border: 1px solid #1a8aee; }
.chosen-slot {
  width: 52px; height: 72px; border-radius: 5px;
  border: 1.5px dashed rgba(150,90,30,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted);
}
#confirm-chosen {
  background-image: url('./btn-lock-in.png');
  width: min(220px, 80%);
}

/* GAME */
#game {
  display: none;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 8px;
  backdrop-filter: blur(1px);
}
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.game-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px; color: var(--chrome); text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(60,120,220,0.3); letter-spacing: 6px; text-transform: uppercase; }
.score-row { display: flex; gap: 6px; margin-bottom: 8px; }
.score-pill {
  flex: 1; background: rgba(5,10,20,0.75); border: none;
  border-radius: 0; padding: 6px 10px; text-align: center;
  position: relative;
}
.score-pill .pname { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }
.score-pill .pcount { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; color: var(--chrome); }
#status-msg {
  text-align: center; font-size: 12px; color: var(--text-muted);
  min-height: 32px; margin-bottom: 6px; padding: 0 6px;
  letter-spacing: 0.5px;
}
.zone-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; text-align: center; }
.divider {
  border: none;
  height: 1px;
  margin: 10px 0;
  background: rgba(150,160,180,0.15);
}

/* MINI STACKS */
.deck-row { display: flex; align-items: center; gap: 8px; }
.deck-section { text-align: center; }
.endgame-box {
  border: 1px dashed rgba(130,120,105,0.3);
  border-radius: 6px;
  background: transparent;
  padding: 5px 8px 4px;
  position: relative;
  opacity: 0.6;
}
.endgame-box-label {
  font-size: 7px;
  color: rgba(210,195,165,0.95);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 4px;
}
.endgame-box .deck-row-inner { display: flex; gap: 8px; }
.deck-label { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.deck-count { font-size: 8px; color: var(--text-muted); margin-top: 2px; }
.mini-stack { position: relative; width: 36px; height: 52px; margin: 0 auto; }
.mini-stack .mcard { position: absolute; width: 32px; height: 46px; border-radius: 4px; }
.mini-stack .mcard:nth-child(1) { transform: rotate(-6deg) translate(-4px,0); }
.mini-stack .mcard:nth-child(2) { transform: rotate(0); }
.mini-stack .mcard:nth-child(3) { transform: rotate(6deg) translate(4px,0); }
.mcard.blind-back { background: #14120e; border: 1px solid rgba(130,120,105,0.4); }
.mcard.chosen-back { background: #14120e; border: 1px solid rgba(130,120,105,0.4); }

/* PLAY PILE */
.pile-wrapper {
  position: relative;
  width: 70px;
  height: 90px;
  margin: 0 auto;
}
.pile-card {
  position: absolute;
  width: 50px; height: 70px; border-radius: 5px;
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #1a1008;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.6);
  left: 50%; transform: translateX(-50%);
  bottom: 0;
}
.pile-card .corner { position: absolute; top: 2px; left: 3px; font-size: 9px; line-height: 1.2; font-weight: 700; }
.pile-card.red { color: var(--red); }
.pile-card.red .corner { color: var(--red); }
.pile-card.pile-face-down { background: #0a1428; border-color: #2a5aaa; }
.pile-card.pile-face-down::after { content: "✦"; font-size: 14px; color: #4a7aaa; }
.pile-card.pile-top-card { z-index: 10; }
.pile-card.empty-pile {
  background: rgba(255,255,255,0.02);
  border: 1.5px dashed rgba(80,120,200,0.2);
  box-shadow: none;
}
.pile-count { font-size: 9px; color: var(--text-muted); margin-top: 4px; text-align: center; }

/* CARDS */
.card {
  width: 50px; height: 70px; border-radius: 5px;
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #1a1008;
  position: relative; user-select: none; flex-shrink: 0;
  transition: transform 0.12s;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.5);
}
.card .corner { position: absolute; top: 2px; left: 3px; font-size: 9px; line-height: 1.2; font-weight: 700; }
.card.red { color: var(--red); }
.card.red .corner { color: var(--red); }
.card.face-down { background: #0a1428; border-color: #2a5aaa; box-shadow: 1px 2px 4px rgba(0,0,0,0.7); }
.card.face-down::after { content: '✦'; font-size: 16px; color: #4a7aaa; }
.card.chosen-down { background: #061428; border-color: #1a7aaa; }
.card.chosen-down::after { content: '✦'; font-size: 16px; color: #2a9aaa; }
.card.playable { cursor: pointer; border-color: #4a8aee; box-shadow: 0 0 0 2px rgba(60,120,220,0.4), 1px 2px 4px rgba(0,0,0,0.5); }
.card.playable:hover { transform: translateY(-8px); }
.card.selected { transform: translateY(-12px); border-color: var(--neon-yellow); box-shadow: 0 0 0 2px var(--neon-yellow), 0 0 8px #ffe60060; }
.card.setup-selected { transform: translateY(-10px); border-color: var(--neon-yellow); box-shadow: 0 0 0 2px var(--neon-yellow), 0 0 8px #ffe60060; }

.opp-hand-row { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.hand-scroll { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 76px; }

#play-btn {
  display: none;
  background-image: url('./btn-play-card.png');
  width: min(190px, 70%);
  margin: 8px auto 0;
}

/* CHAT */
#chat-area {
  background: rgba(3,6,15,0.85);
  border: 1px solid rgba(150,90,30,0.2);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  height: 160px; margin-top: 8px; overflow: hidden;
}
#chat-messages { flex: 1; overflow-y: auto; padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; }
#chat-messages::-webkit-scrollbar { width: 3px; }
#chat-messages::-webkit-scrollbar-thumb { background: rgba(150,90,30,0.3); }
.chat-msg { font-size: 12px; line-height: 1.4; color: var(--text); }
.chat-msg .chat-name { font-family: 'Oswald', sans-serif; font-size: 11px; color: var(--steel); margin-right: 5px; }
.chat-msg.mine .chat-name { color: var(--chrome); }
.chat-msg.system { color: var(--text-muted); font-style: italic; font-size: 11px; }
#chat-input-row { display: flex; gap: 5px; padding: 5px 8px; border-top: 1px solid rgba(150,90,30,0.2); }
#chat-input {
  flex: 1; padding: 5px 8px; border-radius: 4px;
  border: 1px solid rgba(150,90,30,0.3);
  background: rgba(5,10,20,0.75); color: var(--text);
  font-size: 16px; font-family: 'Oswald', sans-serif; outline: none;
}
#chat-input:focus { border-color: rgba(200,130,40,0.5); }
#chat-send {
  width: auto; padding: 5px 12px; font-size: 12px;
  background: #1a3a6a; color: var(--chrome);
  border-radius: 4px; border: 1px solid #2a5aaa;
  cursor: pointer; font-family: Oswald, sans-serif; letter-spacing: 1px;
}

/* WINNER */
#winner-overlay {
  display: none; position: fixed; inset: 0;
  background: #000; z-index: 1000;
  align-items: center; justify-content: center;
  overflow: hidden;
}
#winner-overlay.show { display: flex; }
#winner-video {
  display: none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 0;
}
#winner-overlay::before {
  /* dark scrim so text stays legible over whatever the video is doing —
     sits above the video but below .winner-box */
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.winner-box {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 1.5rem 4vh;
  background: none; border: none; box-shadow: none; backdrop-filter: none;
  pointer-events: none;
}
.winner-box button { pointer-events: auto; }
.winner-box h2 {
  font-family: 'Oswald', sans-serif; font-size: 1.8rem;
  color: var(--neon-yellow); text-shadow: 0 0 10px #ffe60080;
  margin-bottom: 8px; letter-spacing: 2px;
}
.winner-box p { font-size: 12px; color: var(--text-muted); margin-bottom: 1rem; letter-spacing: 1px; text-shadow: 0 2px 6px rgba(0,0,0,0.9); }

/* FLYING */
.flying-card {
  position: fixed; width: 50px; height: 70px; border-radius: 5px;
  background: var(--card-bg); border: 1.5px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; pointer-events: none; z-index: 9999;
  color: #1a1008; box-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}
.flying-card.red { color: var(--red); }


/* BULLET HOLES */
.bullet-hole {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #1a1a1a 0%, #000 40%, transparent 70%);
  box-shadow:
    0 0 0 2px #222,
    0 0 0 4px #333,
    2px 2px 6px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 3;
}
.bullet-hole::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%,
    rgba(60,60,60,0.4) 0%,
    rgba(40,40,40,0.2) 40%,
    transparent 70%
  );
  /* crack lines via box-shadow trick */
  box-shadow:
    6px -8px 0 -5px rgba(50,50,50,0.6),
    -8px -6px 0 -5px rgba(50,50,50,0.5),
    10px 4px 0 -5px rgba(50,50,50,0.4),
    -4px 10px 0 -5px rgba(50,50,50,0.5);
}



/* WAITING OVERLAY */
#waiting-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#waiting-overlay.show {
  display: flex;
  pointer-events: none;
}
#waiting-overlay .waiting-inner {
  text-align: center;
  animation: waitingPulse 1.8s ease-in-out infinite;
}
#waiting-overlay .waiting-text {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--chrome);
  text-shadow: 0 0 20px rgba(60,120,220,0.6), 0 2px 4px rgba(0,0,0,0.9);
}
#waiting-overlay .waiting-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 6px;
}
@keyframes waitingPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.96); }
}

/* DRAW DECK */
.draw-deck-wrapper { position: relative; }
.draw-deck-card {
  position: absolute;
  width: 50px; height: 70px; border-radius: 5px;
  background: #0a1428; border: 2px solid #00cfff;
  box-shadow: 0 0 14px rgba(0,207,255,0.7), 1px 2px 4px rgba(0,0,0,0.6);
  left: 50%; transform: translateX(-50%);
}
.draw-deck-card::after { content: "✦"; font-size: 14px; color: #00cfff; text-shadow: 0 0 6px rgba(0,207,255,0.8); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.draw-deck-card:nth-child(1) { transform: translateX(-50%) rotate(-4deg); bottom: 4px; }
.draw-deck-card:nth-child(2) { transform: translateX(-50%) rotate(-1deg); bottom: 2px; }
.draw-deck-card:nth-child(3) { transform: translateX(-50%) rotate(2deg); bottom: 0; }
.draw-deck-wrapper.can-draw { animation: pilePulse 1.2s ease-in-out infinite; border-radius: 6px; }
.mini-stack.can-draw {
  animation: miniStackReady 1s ease-in-out infinite;
  border-radius: 6px;
  outline: 2px solid rgba(0,207,255,0.85);
  outline-offset: 3px;
}
@keyframes miniStackReady {
  0%,100% {
    box-shadow: 0 0 8px 2px rgba(0,207,255,0.5);
    outline-color: rgba(0,207,255,0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 28px 10px rgba(0,207,255,0.95), 0 0 46px 16px rgba(0,207,255,0.45);
    outline-color: rgba(0,207,255,1);
    transform: scale(1.1);
  }
}
.draw-deck-wrapper.empty .draw-deck-card { opacity: 0.2; }


.blown-pile-wrapper { position: relative; }
.blown-card {
  position: absolute;
  width: 44px; height: 62px; border-radius: 5px;
  background: var(--card-bg); border: 1.5px solid #884400;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.7);
}
.blown-card.red { color: var(--red); }
.blown-card .corner { position:absolute;top:2px;left:3px;font-size:8px;line-height:1.2;font-weight:700; }
.pile-mini-card {
  width: 26px; height: 36px; border-radius: 3px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #111; flex-shrink: 0;
  position: relative;
}
.pile-mini-card.red { color: var(--red); }
.pile-mini-card .mcorner { position:absolute;top:1px;left:2px;font-size:7px;line-height:1; }

.table-area {
  aspect-ratio: 2933 / 1857;
  background-image: url('./table-home-screen.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: none;
  border-radius: 0;
  padding: 8vw 8vw;
  margin-bottom: 8px;
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .table-area {
    background-image: url('./bar-scene-mobile.png');
    aspect-ratio: unset;
    padding: 14vw 8vw;
  }
}
/* ── COIN TOSS ── */
#coin-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.coin-inner { text-align: center; }
.coin {
  width: 130px; height: 130px;
  margin: 0 auto 16px;
  position: relative;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7));
}
.coin-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image: url('./coin-heads.png');
  background-size: cover;
  background-position: center;
}
/* Simple, bulletproof "spin": squish the single face flat and back out
   repeatedly while JS swaps which image is showing underneath — no 3D
   transforms, no backface-visibility, nothing that can silently fail. */
.coin.spinning .coin-face {
  animation: coinFlutter 0.12s linear infinite;
}
@keyframes coinFlutter {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.12); }
}
.coin-result {
  font-family: Oswald, sans-serif;
  font-size: 1.4rem; font-weight: 700;
  color: var(--chrome); letter-spacing: 4px;
  text-shadow: 0 0 16px rgba(60,120,220,0.6);
  opacity: 0;
  animation: fadeInResult 0.5s ease-out 2s forwards;
}
@keyframes fadeInResult {
  to { opacity: 1; }
}

/* ── BIGGER WAITING OVERLAY ── */
#waiting-overlay {
  background: transparent;
}
#waiting-overlay .waiting-text {
  font-size: 2.8rem;
  animation: waitingPulse 1s ease-in-out infinite, waitingSlide 1.5s ease-in-out infinite alternate;
  color: #fff;
  text-shadow: 0 0 30px rgba(60,160,255,0.9), 0 0 60px rgba(60,120,255,0.5);
}
#waiting-overlay .waiting-sub {
  font-size: 13px; letter-spacing: 4px;
  color: var(--neon-blue);
  text-shadow: 0 0 8px var(--neon-blue);
  animation: waitingPulse 1s ease-in-out infinite reverse;
}
@keyframes waitingSlide {
  from { transform: translateX(-6px); }
  to   { transform: translateX(6px); }
}

/* ── BIGGER CARDS ── */
.card {
  width: 62px !important; height: 88px !important;
  font-size: 20px !important;
  border-radius: 8px !important;
}
.card .corner { font-size: 11px !important; top: 3px !important; left: 4px !important; }
.pile-card { width: 62px !important; height: 88px !important; font-size: 20px !important; }
.pile-card .corner { font-size: 11px !important; }

/* ── CHAT POP ── */
#chat-area {
  position: relative;
  z-index: 601;
  background: rgba(5,15,35,0.95) !important;
  border: 1px solid rgba(60,120,255,0.35) !important;
  box-shadow: 0 0 16px rgba(30,80,220,0.2), inset 0 0 20px rgba(10,30,80,0.3) !important;
  height: 190px !important;
}
#chat-input-row {
  border-top: 1px solid rgba(60,120,255,0.25) !important;
  background: rgba(10,20,50,0.8) !important;
}
#chat-input {
  background: rgba(15,30,70,0.9) !important;
  border: 1px solid rgba(60,120,220,0.3) !important;
  color: var(--chrome) !important;
}
.chat-msg { color: var(--chrome) !important; font-size: 13px !important; }
.chat-msg .chat-name { color: var(--neon-blue) !important; font-size: 12px !important; }
.chat-msg.mine .chat-name { color: var(--neon-pink) !important; text-shadow: 0 0 6px var(--neon-pink) !important; }

/* ── BLOWN DECK FONT ── */
.blown-card {
  font-family: Oswald, sans-serif !important;
  font-size: 15px !important;
  color: #ff6030 !important;
  text-shadow: 0 0 6px #ff603060 !important;
}
.blown-card.red { color: #ff2020 !important; }

/* ── QUIT BUTTON ── */
#quit-btn-wrap { margin-top: 6px; position: relative; z-index: 600; }

/* ── CONFETTI ── */
#confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  display: none;
}
.winner-box {
  animation: winnerPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes winnerPop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
#winner-title {
  font-size: 2rem !important;
  animation: titleGlow 1.5s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from { text-shadow: 0 0 10px rgba(255,220,0,0.5); }
  to   { text-shadow: 0 0 30px rgba(255,220,0,0.9), 0 0 60px rgba(255,150,0,0.5); }
}

/* ── BIG SCREEN FLASH ── */
#big-flash {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}
#big-flash.show { display: flex; }
#big-flash-text {
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  animation: bigFlashAnim 1.8s cubic-bezier(0.2,0,0.8,1) forwards;
}
#big-flash-text.pickup {
  color: #ff2d78;
  text-shadow: 0 0 20px #ff2d78, 0 0 60px #ff006680, 2px 2px 0 #000;
}
#big-flash-text.blown {
  color: #ff6030;
  text-shadow: 0 0 20px #ff6030, 0 0 60px #ff300080, 2px 2px 0 #000;
}
@keyframes bigFlashAnim {
  0%   { transform: scale(0.3) rotate(-8deg); opacity:0; }
  20%  { transform: scale(1.2) rotate(2deg);  opacity:1; }
  40%  { transform: scale(0.95) rotate(0deg); opacity:1; }
  70%  { transform: scale(1) rotate(0deg);    opacity:1; }
  100% { transform: scale(1.1) rotate(0deg);  opacity:0; }
}

/* ── TUTORIAL ── */
.tutorial-popup {
  position: fixed;
  z-index: 800;
  background: rgba(5,15,40,0.97);
  border: 1.5px solid #1a8aee;
  border-radius: 10px;
  padding: 12px 16px;
  max-width: 280px;
  box-shadow: 0 0 20px rgba(26,138,238,0.3), 0 0 40px rgba(26,138,238,0.1);
  animation: tutPop 0.2s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
  font-family: Oswald, sans-serif;
}
@keyframes tutPop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.tutorial-popup h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: #1a8aee; margin-bottom: 8px; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(26,138,238,0.5);
}
.tutorial-popup p { font-size: 12px; color: var(--text); line-height: 1.5; margin-bottom: 6px; }
.tutorial-popup .close-tut {
  display: block; width: 100%; padding: 6px;
  background: rgba(26,138,238,0.15); border: 1px solid #1a8aee;
  border-radius: 5px; color: #1a8aee; font-size: 11px;
  letter-spacing: 2px; cursor: pointer; margin-top: 8px;
  font-family: Oswald, sans-serif; text-transform: uppercase;
}
#rules-btn {
  position: fixed; bottom: 40px; right: 12px; z-index: 700;
  width: auto; padding: 8px 16px;
  background: rgba(0,207,255,0.12); border: 2px solid #00cfff;
  border-radius: 20px; color: #00cfff; font-size: 12px;
  letter-spacing: 2px; cursor: pointer; font-family: Oswald,sans-serif;
  box-shadow: 0 0 12px rgba(0,207,255,0.3);
  text-shadow: 0 0 6px rgba(0,207,255,0.5);
  display: block;
}
#rules-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 900; background: rgba(0,0,0,0.85);
  align-items: center; justify-content: center;
}
#rules-overlay.show { display: flex !important; }
.rules-box {
  background: rgba(5,15,40,0.98); border: 1.5px solid #1a8aee;
  border-radius: 12px; padding: 20px; max-width: 320px; width: 90%;
  box-shadow: 0 0 30px rgba(26,138,238,0.3);
  max-height: 85vh; overflow-y: auto;
}
.rules-box h2 { font-family: Oswald,sans-serif; font-size: 1.2rem; color: #1a8aee; letter-spacing: 3px; margin-bottom: 12px; text-align: center; }
.rules-box h3 { font-family: Oswald,sans-serif; font-size: 11px; color: #1a8aee; letter-spacing: 2px; margin: 12px 0 6px; text-transform: uppercase; }
.rules-box p, .rules-box li { font-size: 12px; color: var(--text); line-height: 1.6; }
.rules-box ul { padding-left: 16px; }
.rules-box .card-order { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.rules-box .co-card { background: var(--card-bg); color: #111; border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: 700; font-family: Oswald,sans-serif; }
.rules-box .co-card.special { background: #1a3a6a; color: #1a8aee; border: 1px solid #1a8aee; }
.tut-toggle { display:flex; align-items:center; gap:8px; margin-top:12px; }
.tut-toggle label { font-size:11px; color:var(--text-muted); letter-spacing:1px; font-family:Oswald,sans-serif; text-transform:uppercase; }
.toggle-switch { position:relative; width:40px; height:22px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:#222; border-radius:22px; transition:0.3s; border:1px solid #1a8aee; }
.toggle-slider:before { content:""; position:absolute; height:16px; width:16px; left:2px; bottom:2px; background:#555; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .toggle-slider { background:rgba(26,138,238,0.3); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); background:#1a8aee; }

/* ── CPU MODE INDICATOR ── */
#cpu-badge {
  display: none;
  position: fixed; top: 8px; right: 8px; z-index: 600;
  background: rgba(5,15,40,0.9); border: 1px solid #1a8aee;
  border-radius: 12px; padding: 4px 10px;
  font-size: 10px; color: #1a8aee; letter-spacing: 2px;
  font-family: Oswald,sans-serif;
}

/* ── ANIMATED BAR LOBBY ── */
#lobby { padding: 1rem; max-width: 420px; width: 100%; margin: 0 auto; }

#bar-scene {
  position: relative;
  background-image: url('./bar-scene-wide.png');
  background-size: cover;
  background-position: center 35%;
  border-radius: 10px;
  border: 1px solid rgba(60,80,120,0.2);
  margin-bottom: 10px;
  overflow: hidden;
  height: 200px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}

#room-code-sign {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  width: 100%;
  text-align: center;
  font-family: Oswald, sans-serif;
  color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow), 0 0 20px #ffe60050;
  letter-spacing: 2px;
  font-size: 11px;
  animation: flicker 4s infinite;
}

#room-code-sign #copy-btn {
  display: block; width: auto; padding: 3px 12px;
  margin: 4px auto 0;
  background: transparent; border: 1px solid var(--neon-yellow);
  color: var(--neon-yellow); font-size: 9px; letter-spacing: 2px;
  border-radius: 10px; cursor: pointer; font-family: Oswald,sans-serif;
  opacity: 0.7;
}
#copy-btn:active { opacity: 1; }

.bar-seat {
  position: absolute;
  text-align: center;
  width: 80px;
}

.seat-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(80,120,200,0.4);
  background-color: rgba(10,20,40,0.8);
  background-size: cover;
  background-position: center 15%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin: 0 auto 4px;
  animation: seatIdle 3s ease-in-out infinite;
  transition: border-color 0.3s;
}

.seat-avatar.occupied {
  border-color: var(--blue-light);
  box-shadow: 0 0 12px rgba(25,118,210,0.4);
}

.seat-avatar.ready-glow {
  border-color: #00ff80;
  box-shadow: 0 0 16px rgba(0,255,128,0.5);
}

@keyframes seatIdle {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.seat-name {
  font-family: Oswald, sans-serif;
  font-size: 11px; letter-spacing: 1px;
  color: #00cfff; text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,207,255,0.4);
}

.seat-status {
  font-size: 9px; color: var(--text-muted);
  letter-spacing: 1px; margin-top: 2px; min-height: 12px;
}

/* Avatar picker */
/* Avatar picker — showcase carousel: one big featured portrait,
   peek cards on either side, name displayed underneath. */
.avatar-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 0;
  margin-bottom: 8px;
}
.avatar-carousel::-webkit-scrollbar { display: none; }
.avatar-spacer { flex: 0 0 auto; width: calc(50% - 47px); }
.avatar-card {
  flex: 0 0 auto;
  width: 94px;
  height: 132px;
  border-radius: 10px;
  background-color: rgba(10,20,40,0.85);
  background-size: cover;
  background-position: center 12%;
  border: 2px solid rgba(80,120,200,0.3);
  scroll-snap-align: center;
  cursor: pointer;
  opacity: 0.5;
  transform: scale(0.87);
  transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.avatar-card.active {
  opacity: 1;
  transform: scale(1);
  border-color: var(--neon-yellow);
  box-shadow: 0 0 16px rgba(255,230,0,0.5);
}
.avatar-name-display {
  text-align: center;
  font-family: Oswald, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00cfff;
  text-shadow: 0 0 8px rgba(0,207,255,0.5);
  margin-bottom: 12px;
  min-height: 18px;
}
.avatar-option:hover { border-color: var(--blue-light); transform: scale(1.1); }
.avatar-option.selected { border-color: var(--neon-yellow); box-shadow: 0 0 8px var(--neon-yellow); }

#deal-btn {
  background-image: url('./btn-deal-em.png');
  width: min(260px, 88%);
}
#deal-btn:not(:disabled) {
  animation: dealPulse 1.5s ease-in-out infinite;
}
#deal-btn:disabled { animation: none; }
@keyframes dealPulse {
  0%,100% { filter: brightness(1) drop-shadow(0 0 6px rgba(0,207,255,0.3)); }
  50%      { filter: brightness(1.25) drop-shadow(0 0 18px rgba(0,207,255,0.8)); }
}

#lobby-chat-messages::-webkit-scrollbar { width: 3px; }
#lobby-chat-messages::-webkit-scrollbar-thumb { background: rgba(60,120,220,0.3); }

/* ── NAME INPUT PULSE ── */
#player-name-input {
  font-size: 18px !important;
  text-align: center !important;
  letter-spacing: 3px !important;
  color: #00cfff !important;
  border: 2px solid #00cfff !important;
  box-shadow: 0 0 12px rgba(0,207,255,0.4) !important;
  animation: inputPulse 2s ease-in-out infinite !important;
  background: rgba(0,10,30,0.8) !important;
  padding: 14px !important;
  font-family: Oswald, sans-serif !important;
}
#player-name-input::placeholder {
  color: rgba(0,207,255,0.5) !important;
  animation: inputPulse 2s ease-in-out infinite !important;
}
@keyframes inputPulse {
  0%,100% {
    box-shadow: 0 0 10px rgba(0,207,255,0.3);
    transform: scale(1);
    border-color: rgba(0,207,255,0.6);
  }
  50% {
    box-shadow: 0 0 25px rgba(0,207,255,0.7), 0 0 50px rgba(0,207,255,0.2);
    transform: scale(1.03);
    border-color: #00cfff;
  }
}

@keyframes codeGlow {
  0%   { color:#fff; text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 30px #00cfff, 0 0 60px #00cfff, 0 0 100px #00cfff; opacity:1; }
  10%  { color:#fff; text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 30px #00cfff, 0 0 60px #00cfff, 0 0 100px #00cfff; opacity:1; }
  11%  { color:#aaf; text-shadow: none; opacity:0.3; }
  12%  { color:#fff; text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 30px #00cfff, 0 0 80px #00cfff, 0 0 120px #00cfff; opacity:1; }
  75%  { color:#fff; text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 30px #00cfff, 0 0 60px #00cfff, 0 0 100px #00cfff; opacity:1; }
  76%  { color:#aaf; text-shadow: none; opacity:0.2; }
  77%  { color:#fff; text-shadow: 0 0 7px #fff, 0 0 20px #fff, 0 0 40px #00cfff, 0 0 90px #00cfff, 0 0 150px #00cfff; opacity:1; }
  78%  { color:#aaf; text-shadow: none; opacity:0.25; }
  79%  { color:#fff; text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 30px #00cfff, 0 0 60px #00cfff, 0 0 100px #00cfff; opacity:1; }
  100% { color:#fff; text-shadow: 0 0 7px #fff, 0 0 15px #fff, 0 0 30px #00cfff, 0 0 60px #00cfff, 0 0 100px #00cfff; opacity:1; }
}

/* ── PROFILE BADGE ── */
#profile-badge {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto 10px;
  padding: 4px 14px;
  background: rgba(0,207,255,0.08);
  border: 1px solid rgba(0,207,255,0.3);
  border-radius: 20px;
  font-family: Oswald, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--chrome);
  width: fit-content;
}
.profile-badge-name { color: #00cfff; text-transform: uppercase; }
.profile-badge-stat { color: var(--text-muted); }
.profile-badge-streak { color: var(--neon-yellow); text-shadow: 0 0 6px var(--neon-yellow); }

/* ── PIN OVERLAYS ── */
#pin-setup-overlay, #pin-restore-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.88);
  align-items: center; justify-content: center;
}
.pin-box {
  background: #050d1a; border: 2px solid #00cfff;
  border-radius: 12px; padding: 22px; max-width: 300px; width: 90%;
  text-align: center;
  box-shadow: 0 0 30px rgba(0,207,255,0.3);
}
.pin-box h3 {
  font-family: Oswald, sans-serif; font-size: 1.1rem; color: #00cfff;
  letter-spacing: 3px; margin-bottom: 8px; text-shadow: 0 0 10px rgba(0,207,255,0.5);
}
.pin-box p { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.pin-box input {
  width: 100%; text-align: center; letter-spacing: 8px; font-size: 20px;
  padding: 10px; margin-bottom: 8px; border-radius: 6px;
  border: 2px solid rgba(0,207,255,0.4); background: rgba(0,10,30,0.8);
  color: #00cfff; font-family: Oswald, sans-serif;
}
.pin-box input#restore-name-input { letter-spacing: 1px; font-size: 16px; }
.pin-box .pin-status { font-size: 11px; color: var(--neon-yellow); min-height: 16px; margin-bottom: 8px; }
.pin-box .pin-btn-row { display: flex; gap: 8px; }
.pin-box button { flex: 1; }
#restore-profile-btn {
  width: auto; padding: 6px 16px; background: rgba(0,207,255,0.1);
  border: 1.5px solid rgba(0,207,255,0.5); color: #00cfff; border-radius: 12px;
  font-family: Oswald, sans-serif;
}


/* ============================================================
   MOBILE OPTIMIZATION
   ============================================================ */

/* Prevent vertically-centered content from becoming unreachable
   when it's taller than the viewport (common on phones) */
@media (max-height: 750px) {
  body { justify-content: flex-start; align-items: center; padding: 16px 0; }
}

@media (max-width: 460px) {
  /* Trim the double padding stacked from #app + #lobby so the
     card has more breathing room on narrow screens */
  #app { padding: 0.75rem; }
  #lobby { padding: 0.6rem; }
  .lobby-card { padding: 1rem; }
  

  /* Shrink avatar circles slightly so 4 fit per row without wrapping oddly */
  .avatar-card { width: 78px; height: 112px; }
  .avatar-spacer { width: calc(50% - 39px); }

  /* Bigger touch targets (Apple/Google both recommend ~44px min) */
    #restore-profile-btn, .mini-btn {
    padding: 11px 18px !important;
    font-size: 12px !important;
  }
  #copy-btn { padding: 9px 20px !important; font-size: 12px !important; }
  #chat-send { padding: 9px 14px !important; font-size: 13px !important; }
  #lobby-chat-input + button { padding: 9px 14px !important; }
  button { min-height: 40px; }
}