/* THE ONE-AND-TWENTY — room styles. Every rule scoped under #screen-vingt.
   A nursery schoolroom: slate board, little desks, a coal fire. House palette
   (Georgia serif, bone on near-black, gold accents) with chalk and coal. */

#screen-vingt .vg-room {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0.4rem 0.4rem 2rem;
  position: relative;
}

/* ---------- head / the Governess ---------- */
#screen-vingt .vg-head { margin-bottom: 0.3rem; }
#screen-vingt .vg-head .label { font-size: 0.8rem; letter-spacing: 0.34em; }
#screen-vingt .vg-gov {
  min-height: 2.1rem;
  margin: 0.25rem auto 0;
  max-width: 24rem;
  font-size: 0.86rem;
  color: var(--bone);
  transition: opacity 0.3s ease;
}

/* ---------- HUD ---------- */
#screen-vingt .vg-hud {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.3rem 0 0.45rem;
  border-bottom: 1px dashed rgba(216, 180, 90, 0.18);
  margin-bottom: 0.5rem;
}
#screen-vingt .vg-felt-coins { font-size: 1.15rem; position: relative; }
#screen-vingt .vg-bank-coins { font-size: 1.15rem; color: var(--bone); }
#screen-vingt .vg-flag { color: var(--gold-dim); width: 100%; }
#screen-vingt .vg-hold {
  position: absolute;
  top: -0.85rem;
  right: -1.6rem;
  font-size: 0.74rem;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(216, 180, 90, 0.6);
  animation: vg-hold-in 0.3s ease-out;
}
@keyframes vg-hold-in {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---------- coach ---------- */
#screen-vingt .vg-coach {
  margin: 0 auto 0.5rem;
  max-width: 24rem;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--gold-dim);
}

/* ---------- THE SLATE BOARD ---------- */
#screen-vingt .vg-board {
  position: relative;
  margin: 0 auto 0.55rem;
  width: min(100%, 26rem);
  min-height: 96px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.025), transparent 60%),
    linear-gradient(168deg, #232a2e, #1b2125 55%, #161b1e);
  border: 7px solid #3c2c1a;
  border-radius: 3px;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.75),
    0 4px 18px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(220, 228, 232, 0.05);
  padding: 0.45rem 0.6rem 0.5rem;
  text-align: center;
}
#screen-vingt .vg-board-rule {
  font-family: 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', 'Brush Script MT', cursive;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: rgba(222, 230, 234, 0.8);
  text-shadow: 0 0 6px rgba(222, 230, 234, 0.25);
}
#screen-vingt .vg-board-margin {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin: 0.35rem 0 0.25rem;
}
#screen-vingt .vg-tick {
  width: 4px;
  height: 11px;
  border-radius: 1px;
  background: rgba(222, 230, 234, 0.55);
  transform: rotate(6deg);
  transition: opacity 0.4s, background 0.4s;
}
#screen-vingt .vg-tick.spent { background: rgba(222, 230, 234, 0.12); }
#screen-vingt .vg-board-calls {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 1.05rem;
  font-size: 0.78rem;
  color: rgba(222, 230, 234, 0.72);
  font-style: italic;
}
#screen-vingt .vg-call-you { text-align: left; }
#screen-vingt .vg-call-her { text-align: right; }
#screen-vingt .vg-board-lessons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-height: 0;
  margin-top: 0.15rem;
}
#screen-vingt .vg-lesson {
  font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
  font-size: 0.86rem;
  color: rgba(228, 234, 238, 0.82);
  text-shadow: 0 0 5px rgba(228, 234, 238, 0.3);
  transform: rotate(-1.2deg);
  text-align: left;
}
#screen-vingt .vg-lesson:nth-child(2) { transform: rotate(0.8deg); margin-left: 0.5rem; }
#screen-vingt .vg-lesson:nth-child(3) { transform: rotate(-2deg); margin-left: 0.2rem; }
#screen-vingt .vg-lesson.written { animation: vg-lesson-set 0.5s ease-out; }
@keyframes vg-lesson-set {
  0% { text-shadow: 0 0 14px rgba(228, 234, 238, 0.8); }
  100% { text-shadow: 0 0 5px rgba(228, 234, 238, 0.3); }
}

/* ---------- THE SCHOOLROOM ---------- */
#screen-vingt .vg-schoolroom {
  position: relative;
  width: min(100%, 26rem);
  margin: 0 auto;
  border: 1px solid #241c12;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at 14% 96%, rgba(214, 120, 40, 0.13), transparent 46%),
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.5), transparent 60%),
    linear-gradient(175deg, #0d0f11, #0a0c0d 60%, #07090a);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.8), 0 10px 34px rgba(0, 0, 0, 0.7);
  padding: 0.5rem 0.55rem 0.6rem;
  overflow: hidden;
  transition: filter 1.1s ease;
}
#screen-vingt .vg-room[data-lessons='1'] .vg-schoolroom { filter: brightness(0.9); }
#screen-vingt .vg-room[data-lessons='2'] .vg-schoolroom { filter: brightness(0.78) saturate(0.92); }
#screen-vingt .vg-room[data-lessons='3'] .vg-schoolroom { filter: brightness(0.62) saturate(0.8); }
#screen-vingt .vg-room.vg-hush .vg-schoolroom { filter: brightness(0.55) saturate(0.6); }
#screen-vingt .vg-room.vg-kept .vg-schoolroom { filter: brightness(0.5) saturate(0.55) sepia(0.1); }

#screen-vingt .vg-schoolroom.vg-shake { animation: vg-shake 0.28s ease-out; }
@keyframes vg-shake {
  0% { transform: translateY(0); }
  25% { transform: translateY(2.5px); }
  55% { transform: translateY(-1.5px); }
  100% { transform: translateY(0); }
}

/* the coal fire — its lean is the breath's visual twin */
#screen-vingt .vg-fire {
  position: absolute;
  left: 10px;
  bottom: 8px;
  width: 46px;
  height: 44px;
  pointer-events: none;
}
#screen-vingt .vg-coals {
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
  height: 9px;
  border-radius: 4px 4px 2px 2px;
  background: radial-gradient(ellipse at 50% 100%, #6e2a10, #3a1408 70%, #1c0d06);
  box-shadow: 0 0 12px rgba(214, 110, 36, 0.5);
}
#screen-vingt .vg-flame {
  position: absolute;
  bottom: 7px;
  width: 11px;
  height: 24px;
  border-radius: 50% 50% 48% 52% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 86%, #f0b04a, #d9712a 52%, #8c3010 86%, transparent);
  filter: blur(0.4px);
  transform-origin: 50% 100%;
  opacity: 0.92;
  transition: height 1.4s ease, opacity 1.4s ease;
}
#screen-vingt .vg-flame.f1 { left: 7px; animation: vg-flick 1.7s ease-in-out infinite; }
#screen-vingt .vg-flame.f2 { left: 18px; height: 30px; animation: vg-flick 1.3s ease-in-out infinite 0.4s; }
#screen-vingt .vg-flame.f3 { left: 29px; height: 21px; animation: vg-flick 2.1s ease-in-out infinite 0.8s; }
@keyframes vg-flick {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(-1.5deg); }
  30% { transform: scaleY(1.12) scaleX(0.92) rotate(2deg); }
  60% { transform: scaleY(0.9) scaleX(1.06) rotate(-2.5deg); }
  80% { transform: scaleY(1.05) scaleX(0.95) rotate(1deg); }
}
/* heavy breath: the fire leans low and sullen; light: it stands tall */
#screen-vingt .vg-room[data-breath='heavy'] .vg-flame { height: 14px; opacity: 0.7; }
#screen-vingt .vg-room[data-breath='heavy'] .vg-flame.f2 { height: 18px; }
#screen-vingt .vg-room[data-breath='heavy'] .vg-coals { box-shadow: 0 0 8px rgba(170, 70, 24, 0.4); }
#screen-vingt .vg-room[data-breath='light'] .vg-flame { height: 30px; opacity: 1; }
#screen-vingt .vg-room[data-breath='light'] .vg-flame.f2 { height: 38px; }
#screen-vingt .vg-room[data-breath='light'] .vg-coals { box-shadow: 0 0 18px rgba(232, 140, 48, 0.65); }
#screen-vingt .vg-room.vg-hush .vg-flame,
#screen-vingt .vg-room.vg-kept .vg-flame { animation-play-state: paused; height: 10px; opacity: 0.45; }

/* the little desks — pupils you never quite see */
#screen-vingt .vg-desks {
  --nudge: 0px;
  display: flex;
  justify-content: space-evenly;
  padding: 0.1rem 1.4rem 0.35rem;
  transform: translateY(var(--nudge));
  transition: transform 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#screen-vingt .vg-desk {
  position: relative;
  width: 30px;
  height: 22px;
  transition: transform 1.3s ease;
}
#screen-vingt .vg-desk::before { /* the lid */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 5px;
  background: linear-gradient(#4a3824, #2c2012);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#screen-vingt .vg-desk::after { /* the legs */
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 13px;
  height: 9px;
  background:
    linear-gradient(#241a0e, #140e07) left / 3px 100% no-repeat,
    linear-gradient(#241a0e, #140e07) right / 3px 100% no-repeat;
}
#screen-vingt .vg-pupil { /* a shape behind the desk, mostly dark */
  position: absolute;
  left: 9px;
  top: -4px;
  width: 12px;
  height: 13px;
  border-radius: 50% 50% 30% 30%;
  background: rgba(206, 200, 186, 0.07);
  transition: background 1.2s ease;
}
#screen-vingt .vg-desk.turned { transform: scaleX(-1) translateY(2px); }
#screen-vingt .vg-desk.turned .vg-pupil {
  background: rgba(222, 224, 218, 0.22); /* a pale oval, facing you now */
  box-shadow: 0 0 7px rgba(222, 224, 218, 0.18);
}
#screen-vingt .vg-desk-corner { opacity: 0.75; }

/* ---------- the table: her cards, yours, the breath ---------- */
#screen-vingt .vg-table { position: relative; min-height: 196px; padding: 0 0.2rem; }
#screen-vingt .vg-her-row,
#screen-vingt .vg-your-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 84px;
}
#screen-vingt .vg-her-row { min-height: 72px; }
#screen-vingt .vg-row-label {
  width: 2.6rem;
  text-align: right;
  flex: 0 0 auto;
  letter-spacing: 0.14em;
}
#screen-vingt .vg-her-cards,
#screen-vingt .vg-your-cards {
  display: flex;
  gap: 0.32rem;
  flex-wrap: wrap;
  transition: opacity 0.8s ease;
}
#screen-vingt .vg-worn { opacity: 0.22; }

/* the cards — bone paper, worked by many hands */
#screen-vingt .vg-card {
  position: relative;
  width: 52px;
  height: 74px;
  border-radius: 4px;
  background: linear-gradient(148deg, #ded8c6, #cfc9b8 55%, #b3ab96);
  border: 1px solid #7c7460;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 252, 240, 0.4);
  color: #232019;
  font-family: Georgia, serif;
  flex: 0 0 auto;
}
#screen-vingt .vg-card b {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
#screen-vingt .vg-card i {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 1.05rem;
  font-style: normal;
}
#screen-vingt .vg-card.red { color: #7c1f16; }
#screen-vingt .vg-card.her { filter: brightness(0.88); width: 46px; height: 66px; }
#screen-vingt .vg-card.her b { font-size: 1.15rem; }

/* landings — the sound's visual twins */
#screen-vingt .vg-card.land-heavy { animation: vg-land-heavy 0.22s cubic-bezier(0.5, 0, 0.7, 0.4); }
@keyframes vg-land-heavy {
  0% { transform: translateY(-52px) scale(1.16); opacity: 0.6; box-shadow: 0 22px 26px rgba(0, 0, 0, 0.5); }
  78% { transform: translateY(1.5px) scale(0.99); }
  100% { transform: none; opacity: 1; }
}
#screen-vingt .vg-card.land-light { animation: vg-land-light 0.55s ease-out; }
@keyframes vg-land-light {
  0% { transform: translateY(-26px) rotate(2.5deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; }
}
#screen-vingt .vg-card.land-even { animation: vg-land-even 0.32s ease-out; }
@keyframes vg-land-even {
  0% { transform: translateY(-34px); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}

/* THE BOY — slate-grey, from no deck, facing the corner */
#screen-vingt .vg-boycard {
  background: linear-gradient(152deg, #41474b, #32383b 55%, #24292c);
  border-color: #15181a;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.8), inset 0 0 14px rgba(0, 0, 0, 0.55);
}
#screen-vingt .vg-boycard::before { /* the corner he faces — two walls of the card */
  content: '';
  position: absolute;
  inset: 5px;
  border-top: 1px solid rgba(222, 230, 234, 0.13);
  border-right: 1px solid rgba(222, 230, 234, 0.13);
  border-radius: 2px;
}
#screen-vingt .vg-boyfig {
  position: absolute;
  top: 13px;
  right: 11px;
  width: 14px;
  height: 38px;
}
#screen-vingt .vg-boyfig::before { /* the head, from behind */
  content: '';
  position: absolute;
  top: 0;
  left: 2.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16191b;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
#screen-vingt .vg-boyfig::after { /* the small coat */
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 14px;
  height: 29px;
  border-radius: 42% 42% 16% 16% / 26% 26% 8% 8%;
  background: linear-gradient(#1b1f21, #111415);
}

/* the breath, in words — twin of the slap */
#screen-vingt .vg-breathwords {
  min-height: 1.2rem;
  text-align: center;
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(207, 201, 184, 0.6);
}
#screen-vingt .vg-room[data-breath='heavy'] .vg-breathwords { color: rgba(216, 158, 110, 0.78); }
#screen-vingt .vg-room[data-breath='light'] .vg-breathwords { color: rgba(200, 212, 218, 0.7); }

/* ---------- toast ---------- */
#screen-vingt .vg-toast {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, 0) scale(0.94);
  background: rgba(8, 7, 4, 0.93);
  border: 1px solid #4a3d22;
  border-radius: 3px;
  color: var(--bone);
  padding: 0.5rem 0.85rem;
  font-size: 0.86rem;
  max-width: 86%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 5;
}
#screen-vingt .vg-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#screen-vingt .vg-toast[data-kind='win'],
#screen-vingt .vg-toast[data-kind='bank'] { color: var(--gold); border-color: var(--gold-dim); }
#screen-vingt .vg-toast[data-kind='lose'] { color: #c98e86; border-color: #5e3a35; }
#screen-vingt .vg-toast[data-kind='push'] { color: var(--bone); }
#screen-vingt .vg-toast[data-kind='boy'] {
  color: #b8c2c8;
  border-color: #4a5258;
  box-shadow: 0 0 22px rgba(150, 165, 175, 0.25);
  letter-spacing: 0.05em;
}

/* ---------- HIT / STAND — the two biggest buttons in the House ---------- */
#screen-vingt .vg-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  width: min(100%, 26rem);
  margin: 0.6rem auto 0;
}
#screen-vingt .vg-actions button {
  min-height: 76px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  transition: box-shadow 0.25s, border-color 0.25s, opacity 0.25s, background 0.25s;
}
#screen-vingt .vg-actions .vg-act-word { font-size: 1.55rem; letter-spacing: 0.34em; text-indent: 0.34em; }
#screen-vingt .vg-actions .vg-act-sub { font-size: 0.68rem; font-style: italic; opacity: 0.75; letter-spacing: 0.06em; }
#screen-vingt .vg-hit {
  background: #12150f;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
}
#screen-vingt .vg-stand {
  background: #101214;
  color: var(--bone);
  border: 1px solid #5a5346;
}
#screen-vingt .vg-actions.vg-live .vg-hit:not(:disabled) {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(216, 180, 90, 0.22), inset 0 0 12px rgba(216, 180, 90, 0.06);
}
#screen-vingt .vg-actions.vg-live .vg-stand:not(:disabled) {
  border-color: #8a8470;
  box-shadow: 0 0 12px rgba(207, 201, 184, 0.14);
}
#screen-vingt .vg-actions button:not(:disabled):active { transform: translateY(1px); }
#screen-vingt .vg-actions button:disabled { opacity: 0.38; cursor: default; }

/* ---------- the chips, the deal, the satchel ---------- */
#screen-vingt .vg-stakes {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0.55rem auto 0;
  width: min(100%, 26rem);
  flex-wrap: wrap;
}
#screen-vingt .vg-chipbtns { display: flex; gap: 0.45rem; }
#screen-vingt .vg-chipbtn {
  min-width: 52px;
  min-height: 50px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  background: #0d1014;
  color: var(--bone);
  border: 1px solid #4a3d22;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
#screen-vingt .vg-chipbtn .vg-chipface { color: var(--gold-dim); font-size: 0.85rem; }
#screen-vingt .vg-chipbtn.picked {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(216, 180, 90, 0.25);
}
#screen-vingt .vg-chipbtn.picked .vg-chipface { color: var(--gold); }
#screen-vingt .vg-chipbtn:disabled { color: #5a5346; cursor: default; box-shadow: none; }
#screen-vingt .vg-dealbtn {
  flex: 1 1 auto;
  min-height: 50px;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  cursor: pointer;
  background: #0f130d;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  transition: box-shadow 0.25s, border-color 0.25s, opacity 0.25s;
}
#screen-vingt .vg-dealbtn:not(:disabled) {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(216, 180, 90, 0.25);
}
#screen-vingt .vg-dealbtn:disabled { opacity: 0.42; cursor: default; }
#screen-vingt .vg-bankbtn {
  flex: 1 1 auto;
  min-height: 50px;
  font-family: inherit;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  cursor: pointer;
  background: #0e1110;
  color: var(--bone);
  border: 1px solid #5a5346;
  border-radius: 3px;
  transition: box-shadow 0.25s, border-color 0.25s, opacity 0.25s;
}
#screen-vingt .vg-bankbtn:not(:disabled):hover { box-shadow: 0 0 14px rgba(216, 180, 90, 0.3); border-color: var(--gold-dim); color: var(--gold); }
#screen-vingt .vg-bankbtn:disabled { opacity: 0.42; cursor: default; }
#screen-vingt .vg-bankbtn.urge {
  border-color: var(--red);
  color: #d4837d;
  animation: vg-urge 1.1s ease-in-out infinite;
}
@keyframes vg-urge {
  0%, 100% { box-shadow: 0 0 4px rgba(168, 54, 46, 0.2); }
  50% { box-shadow: 0 0 18px rgba(168, 54, 46, 0.55); }
}

/* ---------- footer ---------- */
#screen-vingt .vg-footer {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.6rem;
}

/* ---------- explainer (the vestibule) ---------- */
#screen-vingt .vg-explainer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 5, 6, 0.94);
  overflow-y: auto;
  padding: 1.6rem 0.8rem 2.4rem;
  text-align: center;
}
#screen-vingt .vg-explainer-house {
  font-style: italic;
  color: var(--bone);
  max-width: 26rem;
  margin: 1.2rem auto 1rem;
}
#screen-vingt .vg-dismiss { min-height: 48px; letter-spacing: 0.2em; }
#screen-vingt .vg-howto {
  text-align: left;
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--bone);
}
#screen-vingt .vg-howto li { margin-bottom: 0.45rem; }
#screen-vingt .vg-howto b { color: var(--gold); font-weight: 600; }

/* placard demos */
#screen-vingt .vg-demo {
  position: relative;
  height: 74px;
  margin: 0 auto 0.7rem;
  width: 150px;
}
/* II — the breath: a heavy card thumps, a light card floats; the fire leans */
#screen-vingt .vg-demo-breath .vg-demo-card {
  position: absolute;
  top: 10px;
  width: 34px;
  height: 48px;
  border-radius: 3px;
  background: linear-gradient(148deg, #ded8c6, #b3ab96);
  border: 1px solid #7c7460;
  color: #232019;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 48px;
}
#screen-vingt .vg-demo-breath .vg-demo-card.heavy { left: 18px; animation: vg-demo-heavy 3.4s ease-in infinite; }
#screen-vingt .vg-demo-breath .vg-demo-card.light { left: 64px; animation: vg-demo-light 3.4s ease-out infinite 1.7s; }
@keyframes vg-demo-heavy {
  0%, 8% { transform: translateY(-26px); opacity: 0; }
  16% { transform: translateY(1px); opacity: 1; }
  18%, 88% { transform: none; opacity: 1; }
  100% { opacity: 0; }
}
@keyframes vg-demo-light {
  0%, 8% { transform: translateY(-18px) rotate(3deg); opacity: 0; }
  30% { transform: none; opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
#screen-vingt .vg-demo-breath .vg-demo-fire {
  position: absolute;
  right: 14px;
  bottom: 4px;
  width: 13px;
  height: 22px;
  border-radius: 50% 50% 48% 52% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 86%, #f0b04a, #d9712a 52%, #8c3010 86%, transparent);
  transform-origin: 50% 100%;
  animation: vg-demo-fire 3.4s ease-in-out infinite;
}
@keyframes vg-demo-fire {
  0%, 18% { transform: scaleY(0.55) rotate(-2deg); opacity: 0.7; }
  50%, 88% { transform: scaleY(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scaleY(0.55); opacity: 0.7; }
}
/* III — her rule, posted */
#screen-vingt .vg-demo-rule .vg-demo-slate {
  position: absolute;
  inset: 4px 14px;
  background: linear-gradient(168deg, #232a2e, #161b1e);
  border: 4px solid #3c2c1a;
  border-radius: 2px;
  font-family: 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', cursive;
  font-size: 0.86rem;
  color: rgba(222, 230, 234, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}
/* IV — the boy: the grey card surfaces; three lessons chalk themselves */
#screen-vingt .vg-demo-boy .vg-demo-boycard {
  position: absolute;
  left: 22px;
  top: 6px;
  width: 38px;
  height: 54px;
  border-radius: 3px;
  background: linear-gradient(152deg, #41474b, #24292c);
  border: 1px solid #15181a;
  animation: vg-demo-boypulse 3s ease-in-out infinite;
}
#screen-vingt .vg-demo-boy .vg-demo-boycard i {
  position: absolute;
  top: 9px;
  right: 8px;
  width: 9px;
  height: 26px;
  border-radius: 45% 45% 14% 14% / 30% 30% 8% 8%;
  background: #16191b;
}
#screen-vingt .vg-demo-boy .vg-demo-boycard i::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 1.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16191b;
}
@keyframes vg-demo-boypulse {
  0%, 100% { filter: brightness(0.75); transform: rotate(-2deg); }
  50% { filter: brightness(1.15); transform: rotate(1.5deg); }
}
#screen-vingt .vg-demo-boy .vg-demo-lessons {
  position: absolute;
  right: 16px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#screen-vingt .vg-demo-boy .vg-demo-lessons i {
  width: 42px;
  height: 4px;
  border-radius: 2px;
  background: rgba(222, 230, 234, 0.14);
  transform: rotate(-2deg);
  animation: vg-demo-lesson 4.5s ease-out infinite;
}
#screen-vingt .vg-demo-boy .vg-demo-lessons i:nth-child(2) { animation-delay: 1.3s; transform: rotate(1deg); }
#screen-vingt .vg-demo-boy .vg-demo-lessons i:nth-child(3) { animation-delay: 2.6s; }
@keyframes vg-demo-lesson {
  0%, 16% { background: rgba(222, 230, 234, 0.14); box-shadow: none; }
  30%, 86% { background: rgba(228, 234, 238, 0.75); box-shadow: 0 0 7px rgba(228, 234, 238, 0.5); }
  100% { background: rgba(222, 230, 234, 0.14); }
}

/* ---------- end panel: THE SLATE, complete ---------- */
#screen-vingt .vg-end {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(4, 5, 6, 0.94);
  padding: 0;
  text-align: center;
}
#screen-vingt .vg-end-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 2.2rem 1rem 2.4rem;
}
#screen-vingt .vg-end h3 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: 0.26em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(216, 180, 90, 0.35);
}
#screen-vingt .vg-end h3.vg-down { color: var(--red); text-shadow: 0 0 18px rgba(168, 54, 46, 0.45); }
#screen-vingt .vg-end h3.vg-kept-head {
  color: #b8c2c8;
  text-shadow: 0 0 18px rgba(150, 165, 175, 0.4);
}
#screen-vingt .vg-end-detail { margin: 0.4rem 0; color: var(--bone); letter-spacing: 0.04em; }
#screen-vingt .vg-slate {
  max-width: 24rem;
  margin: 1rem auto;
  border: 5px solid #3c2c1a;
  border-radius: 3px;
  background: linear-gradient(168deg, #20262a, #14191c);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.7);
  padding: 0.6rem 0.5rem 0.7rem;
}
#screen-vingt .vg-slate-label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--gold-dim);
  margin-bottom: 0.45rem;
}
#screen-vingt .vg-slate-row {
  display: grid;
  grid-template-columns: 1.3rem 2.4rem 4.6rem 1fr 5.4rem;
  gap: 0.3rem;
  align-items: baseline;
  font-size: 0.73rem;
  padding: 0.15rem 0.2rem;
  color: rgba(222, 230, 234, 0.78);
  font-style: italic;
}
#screen-vingt .vg-slate-row:nth-child(odd) { background: rgba(255, 250, 235, 0.022); }
#screen-vingt .vg-slate-row .vg-sl-stake { font-size: 0.73rem; color: rgba(222, 230, 234, 0.55); }
#screen-vingt .vg-slate-row .vg-sl-cards { text-align: left; letter-spacing: 0.06em; font-style: normal; }
#screen-vingt .vg-slate-row .vg-sl-cards i { font-style: normal; margin-right: 0.18rem; }
#screen-vingt .vg-slate-row .vg-sl-cards i.vr { color: #c98e86; }
#screen-vingt .vg-slate-row .vg-sl-cards .vg-sl-boy { color: #9aa6ad; }
#screen-vingt .vg-slate-row .vg-sl-call { text-align: left; }
#screen-vingt .vg-slate-row .vg-sl-res { text-align: right; }
#screen-vingt .vg-slate-row[data-kind='win'] .vg-sl-res { color: var(--gold); }
#screen-vingt .vg-slate-row[data-kind='lose'] .vg-sl-res { color: #c98e86; }
#screen-vingt .vg-slate-row[data-kind='boy'] .vg-sl-res,
#screen-vingt .vg-slate-row[data-kind='boy'] .vg-sl-call { color: #9aa6ad; }
#screen-vingt .vg-slate-lessons {
  margin: 0.5rem 0 0;
  font-family: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
  font-size: 0.8rem;
  color: rgba(228, 234, 238, 0.7);
}
#screen-vingt .vg-end-house {
  font-style: italic;
  color: #9a937e;
  max-width: 24rem;
  margin: 0.6rem auto 1rem;
}
#screen-vingt .vg-end-leave { min-height: 48px; letter-spacing: 0.18em; }

/* ---------- mobile: thumb-fair at ≤600px, no horizontal scroll ---------- */
@media (max-width: 600px) {
  #screen-vingt .vg-room { padding: 0.2rem 0.2rem 1.4rem; }
  #screen-vingt .vg-board,
  #screen-vingt .vg-schoolroom,
  #screen-vingt .vg-actions,
  #screen-vingt .vg-stakes { width: min(100%, 96vw); }
  #screen-vingt .vg-felt-coins,
  #screen-vingt .vg-bank-coins { font-size: 1rem; }
  #screen-vingt .vg-hold { right: -1.4rem; }
  #screen-vingt .vg-board-rule { font-size: 0.92rem; }
  #screen-vingt .vg-tick { width: 3px; height: 9px; }
  #screen-vingt .vg-board-calls { font-size: 0.72rem; }
  #screen-vingt .vg-card { width: 46px; height: 66px; }
  #screen-vingt .vg-card b { font-size: 1.15rem; }
  #screen-vingt .vg-card.her { width: 40px; height: 58px; }
  #screen-vingt .vg-table { min-height: 178px; }
  #screen-vingt .vg-actions button { min-height: 64px; }
  #screen-vingt .vg-actions .vg-act-word { font-size: 1.35rem; }
  #screen-vingt .vg-chipbtn { min-width: 56px; min-height: 50px; }
  #screen-vingt .vg-dealbtn,
  #screen-vingt .vg-bankbtn { flex: 1 1 100%; min-height: 52px; }
  #screen-vingt .vg-gov { font-size: 0.8rem; min-height: 1.9rem; }
  #screen-vingt .vg-toast { font-size: 0.8rem; }
  #screen-vingt .vg-slate-row { font-size: 0.68rem; grid-template-columns: 1.1rem 2rem 3.9rem 1fr 4.9rem; }
}