/* ==========================================================================
   INDECISION - UNIFIED STYLES (index.html + game.html)
   ========================================================================== */
:root{
  --table:#006400;
  --card-white:#fff;
  --ui-bg:#f4f4f4;
  --text-dark:#111;
  --overlay:rgba(0,0,0,0.7);
  --accent:#1e90ff;
  --card-h:104px;              /* base card height */
  --card-aspect:0.71;          /* width = height * aspect */
  --ai-visible:0.2;            /* show ~20% of next AI card in stacks */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,Arial,sans-serif;background:var(--table);color:#fff}

/* ===== Fixed ad bars + app region (mobile-first) ===== */
.adbar{
  position:fixed; left:0; right:0; height:var(--ad-h); z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:#0e7a35; box-shadow:0 4px 12px rgba(0,0,0,.25);
}
#adTop{ top:0; padding-top: max(8px, env(safe-area-inset-top)); }
#adBottom{ bottom:0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.adplaceholder{
  width:320px; max-width:calc(100% - 16px); height:50px; background:#2aa04f;
  border-radius:10px; display:grid; place-items:center; position:relative; overflow:hidden;
}
.adplaceholder::before{
  content:"AD"; color:#fff; font-weight:800; letter-spacing:2px; opacity:.75
}
#app{
  position:fixed; left:0; right:0;
  top: calc(var(--ad-h) + env(safe-area-inset-top));
  bottom: calc(var(--ad-h) + env(safe-area-inset-bottom));
  overflow:auto; -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
}


/* ==========================================================================
   INDEX.HTML (SPLASH + MENU + MODALS + PICKERS)
   ========================================================================== */

/* Generic hidden helper (used by #main-menu). We specially override this on splash. */
.hidden{display:none}
/* Splash screen */
#splash-screen{
  position:fixed; inset:0; z-index:1000;
  background:var(--table);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1s ease;
}
/* When we hide splash, keep it displayed for the fade, then JS sets display:none. */
#splash-screen.hidden{display:flex; opacity:0; pointer-events:none}
.splash-logo{width:clamp(180px,50vw,320px);height:auto;display:block}

@media (max-width: 600px){
  .splash-logo{
    width: 95%;
    height: auto;
  }
}

/* Main menu container */
#main-menu{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:20px; text-align:center; min-height:100dvh;
}
/* Optional legacy id some JS referenced earlier; harmless if unused */
#menu-screen{display:none}

/* Menu logo slightly larger than buttons */
.menu-logo{width:clamp(240px,58vw,340px);height:auto;display:block;margin:0 auto 8px}

/* Menu buttons */
.menubutton{
  appearance:none; background:#fff; color:#000; font-weight:700;
  border:0; border-radius:40em; box-shadow:#ADCFFF 0 -12px 6px inset;
  padding:.6rem 1.2rem; width:min(92vw,300px);
  cursor:pointer; transition:transform .08s ease;
}
.menubutton:hover{transform:translateY(-1px)}

/* Menu ad placeholder */
#ads-placeholder{
  margin:12px auto; padding:12px; width:100%; max-width:728px;
  height: clamp(50px, 12vw, 90px);
  background:#eee; color:#333; border:1px dashed #bbb; border-radius:8px;
}

/* Site credit footer */
#site-credit{color:#fff;text-align:center;font-size:.9rem;padding:1rem 0}

/* Instruction / generic modal */
.modal{display:none; position:fixed; inset:0; z-index:1000; background:var(--overlay); overflow:auto}
.modal-content{
  background:#fff; color:var(--text-dark);
  margin:6dvh auto; padding:20px; width:90vw; max-width:800px;
  border-radius:1rem; box-shadow:0 4px 12px rgba(0,0,0,.3);
  position:relative; max-height:86dvh; display:flex; flex-direction:column;
  text-align:center; /* center modal content */
}
.close{position:absolute; top:12px; right:16px; font-size:2rem; font-weight:700; color:#111; cursor:pointer}
.modal-buttons{margin-top:15px}
.modal-buttons button{margin:0 10px; padding:.5rem 1rem; border:0; border-radius:10px; background:#4285f4; color:#fff; font-weight:700; cursor:pointer}

/* Video inside instruction modal */
video{width:100%; max-width:420px; height:auto; margin:0 auto 14px; display:block; border-radius:8px}

/* Deck/back pickers (used in deck modal on index) */
.deck-grid{display:grid; grid-template-columns:repeat(3, minmax(90px,1fr)); gap:12px; margin-bottom:10px}
.back-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:12px; margin-bottom:12px}
.deck-option,.back-option{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px; border:2px solid transparent; border-radius:10px;
  background:#fff; color:var(--text-dark); cursor:pointer
}
.deck-option img,.back-option img{height:80px;width:auto;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.deck-option[aria-checked="true"],.back-option[aria-checked="true"]{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,144,255,.2)
}

/* Difficulty options (Level modal) */
.diff-list{display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:10px}
.diff-option{
  padding:12px 16px; border-radius:10px; border:2px solid transparent;
  background:#fff; color:#111; font-weight:700; cursor:pointer; text-align:left
}
.diff-option[aria-checked="true"]{border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,144,255,.2)}

/* ==========================================================================
   GAME.HTML (TABLE, CARDS, MODALS, ADS)
   ========================================================================== */

/* Ads used on game page too */
.ad-box{display:grid; place-items:center; width:100%; max-width:728px; height:clamp(50px,12vw,90px); background:#eee; border:1px dashed #bbb; color:#333; border-radius:8px; margin:6px auto; padding:4px; overflow:hidden}


@media (max-width:480px){
  .ad-box{max-width:100%; height:50px; margin:4px auto}

  /* Fit exactly 6 cards into ~95% of the viewport width on phones */
  #hand.six-cards {
    --hand-gap-6: 4px;            /* tighter spacing between cards */
    gap: var(--hand-gap-6);
    overflow-x: visible;          /* no scrolling needed */
    scroll-snap-type: none;
  }

  #hand.six-cards .card {
    margin-inline: 0;             /* override default mobile margin */
    width: calc((95vw - (5 * var(--hand-gap-6))) / 6);
    height: calc( ( (95vw - (5 * var(--hand-gap-6))) / 6 ) / var(--card-aspect) );
    flex: 0 0 auto;
  }

  /* Keep deck / pile / STOP visible on phones */
  #center-area { min-height: var(--card-h); }
  #deck-and-pile .card,
  #deck-and-pile .stop-zone { height: var(--card-h); }
}



/* --- Ensure center area is always visible --- */
#center-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--card-h);
}

#deck-and-pile {
  display: flex;            /* guard in case inline styles get overridden */
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;               /* keep above any overlapping rows */
}

#deck-and-pile .card {
  height: var(--card-h);
  width: auto;
}

#deck-and-pile .stop-zone {
  height: var(--card-h);
  aspect-ratio: var(--card-aspect);
}

/* Score modal specific tweaks */
#scoreModal .modal-content{max-height:85vh; max-width:min(92vw,800px); overflow:hidden}
#scoreContent{flex:1 1 auto; min-height:0; overflow:auto; padding-right:4px; text-align:left}
#scoreModal .modal-buttons{position:sticky; bottom:0; background:#fff; padding-top:8px; border-top:1px solid #eee}


/* ===== Scoring modal layout tweaks ===== */
.breakdown-player { margin-bottom: 12px; }
.breakdown-player h3 { margin: 8px 0 4px; }

/* Hand strip directly under the title */
.hand-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
}
.hand-strip .hand-label {
  font-weight: 600;
}
.hand-strip .cards {
  display: inline-flex;         /* single line */
  align-items: center;
  gap: 4px;
  white-space: nowrap;          /* keep on one line */
  overflow-x: auto;             /* scroll if it ever overflows */
}
.hand-strip img.small-card {
  height: 46px;
  width: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Meld rows */
.meld-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.meld-label { font-weight: 600; }
.meld-cards {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap; /* wrap if many */
}
.meld-cards img.small-card {
  height: 46px;
  width: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Forfeit reasons list */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
}
.rules-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0;
}
.rules-list .ok  { color: #1a7f37; font-weight: 700; }
.rules-list .bad { color: #d93025; font-weight: 700; }
.forfeit-note { margin: 4px 0; font-weight: 600; }




/* Game container grid */
.wrap{ max-width:980px; margin:0 auto; padding:6px 12px 10px; text-align:center; min-height:100%; display:grid; grid-template-rows:auto auto auto auto auto auto auto 1fr auto; gap:6px }
.header-logosmall{max-width:250px; margin:0 auto}
.header-logosmall img{max-width:100%; height:auto}
.row{display:flex; justify-content:center; gap:12px; align-items:center; margin:4px 0; flex-wrap:wrap}
.hand,.pile-area{display:flex; gap:8px; align-items:center; justify-content:center}

/* Cards (dynamic size holder supports multiple source sizes) */
.card{
  height:var(--card-h); width:auto; border-radius:8px; background:var(--card-white);
  box-shadow:0 4px 8px rgba(0,0,0,.35); border:1px solid #222; display:block;
  cursor:pointer; user-select:none; -webkit-user-drag:none; object-fit:contain
}
.stop-zone{
  height:var(--card-h); aspect-ratio:var(--card-aspect);
  border:2px dotted rgba(255,255,255,.6); border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:bold; color:#fff; user-select:none; transition:background .2s
}
.stop-zone:hover{background:rgba(255,255,255,.1)}
.stop-zone[onclick]{cursor:pointer}

/* Score/Info panels */
#meld-display,#scoreboard{margin:6px auto; background:var(--ui-bg); color:var(--text-dark); padding:8px 10px; border-radius:8px; max-width:760px; text-align:left}
.info{margin:6px 0; color:#fff}

/* Mobile tweaks: keep page single-screen if possible */
@media (max-width:480px){
  body{overflow-y:hidden}
  :root{--card-h:86px}
  .row{gap:8px}
  .hand{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; scroll-snap-type:x proximity}
  .hand .card{flex:0 0 auto; scroll-snap-align:center; margin-inline:3px}
  .pile-area .card,.stop-zone{height:86px}
}
@media (max-width:360px){
  :root{--card-h:80px}
  .pile-area .card,.stop-zone{height:80px}
}

/* ===== Table grid (left / top / right around center) ===== */
.table-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;      /* left | center | right */
  grid-template-rows:auto auto;            /* top  | center */
  grid-template-areas:"left top right" "left center right";
  align-items:center; justify-items:center; gap:8px
}
#left-hand{grid-area:left}
#top-hand{grid-area:top}
#right-hand{grid-area:right}
#center-area{grid-area:center}
.ai-hand{display:flex; flex-wrap:nowrap; gap:6px}
.ai-hand.vertical{flex-direction:column; gap:6px}

/* ===== AI stacking (only for 3–4 players) ===== */
.players-3 .ai-hand.vertical .card:not(:first-child),
.players-4 .ai-hand.vertical .card:not(:first-child){
  margin-top:calc(var(--card-h) * (1 - var(--ai-visible)) * -1);
}
.players-3 #top-hand .card:not(:first-child),
.players-4 #top-hand .card:not(:first-child){
  margin-left:calc(var(--card-h) * var(--card-aspect) * (1 - var(--ai-visible)) * -1);
}

/* =========================
   Scoring button + Running total row
   ========================= */
/* === Scoring modal table — black dividers + alignment === */
.score-table{
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 0.95rem;
}
.score-table th,
.score-table td{
  padding: 6px 8px;
  border-bottom: 1px solid #000;   /* black lines */
  text-align: left;                /* default */
}
/* Center the last (points) column */
.score-table tr > *:last-child { text-align: center; }
/* Center the middle column when there are exactly 3 cells */
.score-table tr > *:nth-child(2):nth-last-child(2) { text-align: center; }
/* Center the first cell when the row has exactly 2 cells (under a rowspan) */
.score-table tr > *:first-child:nth-last-child(2) { text-align: center; }
/* Keep points bold without changing alignment */
.score-table td.points { font-weight: 600; }





/* === Scoring button + running total row (layout only) === */
.score-row{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-width: 760px;
  margin: 6px auto;
}
.score-row .menubutton{
  width: auto !important;     /* override global 300px width */
  padding: .5rem .9rem;
  white-space: nowrap;
  flex: 0 0 auto;             /* don't let buttons shrink */
}
#score-row #scoreboard{
  flex: 1 1 0;                /* scoreboard takes the squeeze */
  min-width: 0;               /* allow flex to actually shrink */
  word-break: break-word;     /* wrap long content if needed */
}

/* Phones: keep on one line, slightly tighter gap */
@media (max-width:480px){
  .score-row{
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px;
  }
  .score-row .menubutton{
    width: auto !important;
  }
}


/* ===  END of Scoring button + running total row (layout only) === */


/* ===== difficulty modal ===== */

/* Difficulty matrix */
.dm-corner{ }
/* Tighten on phones */
@media (max-width:480px){
  }

/* Difficulty matrix */
/* ===== end of difficulty modal ===== */






/* ===== Scoring modal breakdown enhancements ===== */
#scoreContent .stop-note{
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

#scoreContent .breakdown-player{
  padding: 8px 0 10px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 8px;
}

#scoreContent .breakdown-player h3{
  margin: 0 0 4px;
  font-size: 1.05rem;
}

#scoreContent .forfeit-note{
  color: #b00020;
  font-weight: 700;
  margin: 2px 0 6px;
}

#scoreContent .rules-list{
  list-style: none;
  padding: 0;
  margin: 6px 0 8px;
}
#scoreContent .rules-list li{
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  margin: 2px 0;
}
#scoreContent .rules-list .ok{ color: #0a7d00; }
#scoreContent .rules-list .bad{ color: #b00020; }

#scoreContent .meld-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  flex-wrap: wrap;
}
#scoreContent .meld-label{
  font-weight: 600;
  margin-right: 2px;
}
#scoreContent .meld-cards{
  display: inline-flex;
  gap: 4px;
}

#scoreContent .hand-strip{
  margin-top: 6px;
  font-weight: 500;
  color: #333;
}

#scoreContent .running-totals-block{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 2px solid #888;
}
#scoreContent .running-totals-title{
  font-weight: 700;
  margin-bottom: 6px;
}
#scoreContent .running-totals{
  list-style: none;
  margin: 0;
  padding: 0;
}
#scoreContent .running-totals li{
  margin: 2px 0;
  font-weight: 600;
}

/* Difficulty Matrix (table) */
.diff-matrix{width:100%;border-collapse:collapse;margin:8px auto 6px;max-width:600px}
.diff-matrix th,.diff-matrix td{border:1px solid #e5e7eb;padding:10px;text-align:center}
.diff-matrix thead th{background:#f8fafc;font-weight:600}
.diff-lefthead{font-weight:600;background:#f8fafc;text-align:left}
@media (max-width:560px){
  .diff-matrix th,.diff-matrix td{padding:8px}
}
/* End Difficulty Matrix */






/* Instruction modal: keep X on its own top row on all screen sizes */
#instructionModal .modal-content {
  display: flex;
  flex-direction: column;
}

#instructionModal .modal-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 8px;
}

#instructionModal .close {
  position: static;          /* override base absolute positioning */
  font-weight: 800;
  color: inherit !important; /* remove red; use default text color */
}




/* === Safe centering for specific modals when opened (no global modal side-effects) === */
#turnModal[style*="display: block"],
#gameOverModal[style*="display: block"]{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px; /* breathing room on small screens */
}

/* Size & stacking tweaks (mobile & small screens) */
@media (max-width: 600px){
  #turnModal .modal-content,
  #gameOverModal .modal-content{
    width: 92vw;
    max-width: 520px;
    max-height: 90dvh;
    margin: 0;
  }
  #gameOverModal .modal-buttons{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #gameOverModal .modal-buttons .menubutton,
  #gameOverModal .modal-buttons button{
    width: 100%;
  }
}

/* === Per-modal centering (added) === */

/* scoreModal — centered layout when open */
#scoreModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#scoreModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(92vw,800px);
}

/* scoringHelpModal — centered layout when open */
#scoringHelpModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#scoringHelpModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(92vw,720px);
}

/* instructionModal — centered layout when open */
#instructionModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#instructionModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(92vw,720px);
}

/* deckModal — centered layout when open */
#deckModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#deckModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(92vw,720px);
}

/* difficultyModal — centered layout when open */
#difficultyModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#difficultyModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(92vw,720px);
}

/* infoModal — centered layout when open */
#infoModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#infoModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(92vw,560px);
}

/* cutModal — centered layout when open */
#cutModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#cutModal[style*="display: block"] .modal-content{
  margin:0;
  max-height:90dvh;
  width:min(95vw,920px);
}

/* ===== FIXED GREEN AD BARS + SQUARE PLACEHOLDER + DYNAMIC GAME HEIGHT ===== */
:root{
  --ad-h: 60px;     /* desktop ad bar height */
  --ad-w: 468px;    /* desktop bar content max width (not used for square) */
}

/* Mobile: slightly shorter bar */
@media (max-width: 480px){
  :root{
    --ad-h: 50px;   /* mobile ad bar height */
    --ad-w: 320px;  /* mobile bar content width */
  }
}

html, body { height: 100%; }
body { overflow: hidden; }



/* Inside each bar, show a white SQUARE placeholder centered.
   This will be replaced by the real Google ad when integrated. */


/* Placeholder label */


/* GAME AREA: dynamically takes all available height between bars */
.wrap{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--ad-h);
  bottom: var(--ad-h);
  box-sizing: border-box;
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto;
  scrollbar-width: none;
}

/* Hide webkit scrollbar in .wrap */
.wrap::-webkit-scrollbar{ display:none; }

/* Keep prior tweaks (logo and computer cards smaller) */
.header-logosmall{ max-width: 150px !important; }
.header-logosmall img{ max-width: 100%; height: auto; }

.ai-hand { gap: 6px; height: auto; }
.ai-hand .card{
  transform: scale(0.8);
  transform-origin: center center;
}



/* ===== Six-slot hand layout + pick/discard scale effects ===== */
.hand.six-slot,
.ai-hand.six-slot {
  display: grid !important;
  grid-template-columns: repeat(6, calc(var(--card-h) * var(--card-aspect)));
  grid-auto-rows: var(--card-h);
  justify-content: center;
  align-items: center;
  gap: 8px;
}
/* Vertical (left/right) hands stack top-to-bottom as 6 slots */
.ai-hand.vertical.six-slot {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, var(--card-h));
  width: calc(var(--card-h) * var(--card-aspect));
  justify-items: center;
}
/* Each slot is a fixed-size box to prevent reflow */
.hand-slot {
  width: calc(var(--card-h) * var(--card-aspect));
  height: var(--card-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Empty slot visual (subtle) */
.hand-slot.empty {
  outline: 1px dashed rgba(255,255,255,.15);
  border-radius: 8px;
}

/* Smooth transform effects for cards */
.hand-slot .card {
  transition: transform 150ms ease, outline-color 120ms ease;
}

/* Human: selected (picked) card pops a bit */
#hand .card.is-picked { outline: 3px solid #888; }

/* AI: base size is slightly smaller; when picked/discarding it grows briefly */



/* Ensure mobile width still works when using fixed 6 slots */
@media (max-width: 480px){
  .hand.six-slot,
  .ai-hand.six-slot {
    grid-template-columns: repeat(6, calc((95vw - 5*4px) / 6));
    grid-auto-rows: calc( ( (95vw - 5*4px) / 6 ) / var(--card-aspect) );
    gap: 4px;
  }
  .ai-hand.vertical.six-slot {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, calc( ( (95vw - 5*4px) / 6 ) / var(--card-aspect) ));
    width: calc((95vw - 5*4px) / 6);
  }
  .hand-slot {
    width: auto;
    height: auto;
  }
}


/* Vertical AI hands in 3- and 4-player games: cards stacked with only tops visible */
.players-3 .ai-hand.vertical .hand-slot,
.players-4 .ai-hand.vertical .hand-slot {
  margin-top: -75%; /* overlap so only top of each card is visible */
}
.players-3 .ai-hand.vertical .hand-slot:first-child,
.players-4 .ai-hand.vertical .hand-slot:first-child {
  margin-top: 0; /* first card not offset */
}



/* ==== Normalize card sizing: no scale/animation ==== */
.hand-slot .card,
#hand .card,
.ai-hand .card {
  transform: none !important;
  transition: none !important;
  height: var(--card-h);
  width: auto;
}

/* Keep selection visible without scaling */
#hand .card.is-picked {
  transform: none !important;
  outline: 3px solid #888;
}
.ai-hand .card.ai-picked {
  transform: none !important;
}



/* ==== Vertical hands: stack so only tops are visible (3- and 4-player layouts) ==== */
:root{
  --ai-top-visible: 0.22; /* 22% of card height stays visible */
}

/* Container sizing for vertical hands */
.players-3 .ai-hand.vertical.six-slot,
.players-4 .ai-hand.vertical.six-slot {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: calc(var(--card-h) * var(--card-aspect));
  height: calc( (var(--card-h) * (1 + (5 * var(--ai-top-visible)))) ); /* stacked height */
  gap: 0;
}

/* Each slot takes card width; children overlap with negative margin */
.players-3 .ai-hand.vertical.six-slot .hand-slot,
.players-4 .ai-hand.vertical.six-slot .hand-slot {
  width: calc(var(--card-h) * var(--card-aspect));
  height: var(--card-h);
  margin: 0;
}

.players-3 .ai-hand.vertical.six-slot .hand-slot:not(:first-child),
.players-4 .ai-hand.vertical.six-slot .hand-slot:not(:first-child){
  margin-top: calc(var(--card-h) * (var(--ai-top-visible) - 1));
}

/* Cards inside those slots fill height consistently */
.players-3 .ai-hand.vertical.six-slot .hand-slot .card,
.players-4 .ai-hand.vertical.six-slot .hand-slot .card {
  height: var(--card-h);
  width: auto;
}



/* ==== Prevent scrollbar flicker during animations ==== */
html, body {
  height: 100%;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}


/* ==== Remove dotted outline from empty six-slot placeholders ==== */
.hand-slot.empty {
  outline: none !important;
}

/* ===== Tighten vertical gaps around turn text, deck/hand, and running scores ===== */

/* 1) Logo ↔ Player X's turn */
.header-logosmall{ margin-bottom: 4px !important; }
#player-turn{
  display:block;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  line-height: 1.1 !important;
}

/* 2) Deck ↔ "Your hand" text and hand container */
#deck-and-pile{ margin-bottom: 4px !important; }
/* The "Your hand" label is the next sibling div after #deck-and-pile */
#deck-and-pile + div{ margin-top: 4px !important; }
#hand{ margin-top: 2px !important; margin-bottom: 4px !important; }

/* 3) Running scores modal bottom gap to bottom ad bar (small but visible) */
#scoreModal .modal-content{
  margin-top: calc(var(--ad-h) + 6px) !important;
  margin-bottom: calc(var(--ad-h) + 6px) !important;
}
#scoreContent{ padding-bottom: 4px !important; }