/* ==========================================================================
   INDECISION - UNIFIED STYLES (index.html + game.html)
   ========================================================================== */
:root{ --menu-scale:1; 
  --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 */
  --tablet-w: 600px;
  --splash-max: calc(var(--tablet-w) * 0.95);

}
*,*::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: var(--table);   
}
#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:hidden;padding:8px}


/* ==========================================================================
   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}
/* Cap splash content to 95% of a tablet width, stay fluid below that */
.splash-logo{
  width: min(95vw, var(--splash-max));
  max-width: var(--splash-max);
  height: auto;
  display: block;
}




/* Main menu container */

/* 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:10000; 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 */
}


/* Hide all ad UI while a blocking modal is open (policy-safe) */
body.modal-open #adTop,
body.modal-open #adBottom,
body.modal-open .adbar,
body.modal-open .ad-box,
body.modal-open .adplaceholder,
body.modal-open .adsbygoogle,
body.modal-open .ad-slot {
  display: none !important;
}




.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; padding-bottom:10px; 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;      
  align-items: center;
  gap: 4px;
  white-space: nowrap;       
  overflow-x: auto;          
}
.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{ --menu-scale:1; --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{ --menu-scale:1; --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"],
  #instructionModal[style*="display: block"]{
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px; /* breathing room on small screens */
}


@media (max-width: 600px){
  #turnModal .modal-content,
  #gameOverModal .modal-content,
  #instructionModal .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: 95%;
    max-width: 95%;
    margin-inline: auto;
    display: block;
  }
}

/* === 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 between ad bars when open (matches deckModal pattern) */
#instructionModal[style*="display: block"]{
  inset: calc(var(--ad-h) + env(safe-area-inset-top)) 8px
         calc(var(--ad-h) + env(safe-area-inset-bottom)) 8px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0;
}
#instructionModal[style*="display: block"] .modal-content{
  position:relative;
  margin:0 !important;
  width:min(92vw,720px);
  max-height: calc(
    100svh
    - (2 * var(--ad-h))
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
    - 12px
  ) !important;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:12px;
}


/* 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);
}

/* ===== FIXED GREEN AD BARS + SQUARE PLACEHOLDER + DYNAMIC GAME HEIGHT ===== */
:root{ --menu-scale:1; 
  --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{ --menu-scale:1; 
    --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;
}




/* ==== Vertical hands: stack so only tops are visible (3- and 4-player layouts) ==== */
:root{ --menu-scale:1; 
  --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; }


/* === Compact mobile layout tweaks (reduce gaps; fit without scroll) === */
#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:hidden;padding:8px}
.menu-logo{ width:clamp(150px,48vw,260px); margin:2px auto 6px; }

.menubutton{ padding:clamp(8px,1.8vh,12px) 1.1rem; font-size:clamp(.9rem,1.8vh,1.05rem); }
#site-credit{ margin-top:6px; font-size:clamp(12px,1.6vh,14px); opacity:.9; }
/* ===================================================================== */


/* === Compact mobile layout + dynamic fit === */
#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:hidden;padding:8px}

/* Menu layout: stack, minimal gaps */


/* Logo + credit spacing */
.menu-logo{ width:clamp(140px,40vw,240px); margin:2px auto 6px; }
#site-credit{ margin:6px 0 2px 0; font-size:clamp(12px,1.6vh,14px); opacity:.9; }

/* Buttons compact + responsive */
.menubutton{
  margin:4px 0;
  padding:clamp(8px,1.6vh,12px) 1rem;
  font-size:clamp(.95rem,1.9vh,1.05rem);
  width:min(92vw,340px);
}
/* === End compact rules === */

/* Menu layout v3 */
.menu-logo{ margin:clamp(10px,3vh,22px) auto 8px; width:clamp(150px,48vw,280px); height:auto; display:block; }
#menu-top, #menu-mid, #menu-bottom{ width:100%; display:flex; flex-direction:column; align-items:center; }
#menu-mid{ gap:clamp(6px,1.6vh,10px); }
.menubutton{
  margin:0;
  padding:calc(12px * var(--menu-scale)) 1.05rem;
  font-size:calc(1rem * var(--menu-scale));
  width:min(92vw,340px);
  line-height:1.1;
}
#site-credit{ margin:6px 0 6px 0; font-size:calc(14px * var(--menu-scale)); opacity:.9; }








/* ===== Menu layout v6: CSS vars + exact-fit without transforms ===== */
:root{
  --btn-pad-y: 12px;
  --btn-font: 16px;
  --logo-width: 240px;
  --btn-gap: 8px;
}

#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:hidden; padding:8px;
}

#main-menu{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
#menu-top, #menu-mid, #menu-bottom{ width:100%; display:flex; flex-direction:column; align-items:center; }

/* Logo with adjustable width */
.menu-logo{ width:var(--logo-width); max-width:48vw; height:auto; display:block; margin:14px auto 8px; }

/* Buttons: standalone styles; reliable spacing and centered text */
#menu-mid{ gap: var(--btn-gap); }
.menubutton{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:min(92vw,340px);
  padding: var(--btn-pad-y) 16px;
  font-size: calc(var(--btn-font));
  line-height:1.2;
  border:0; border-radius:999px;
  background:#fff; color:#000; font-weight:800;
  box-shadow:#ADCFFF 0 -12px 6px inset;
}
.menubutton + .menubutton{ margin-top: var(--btn-gap); } /* margin fallback if flex gap unsupported */

#site-credit{ margin:6px 0 6px 0; font-size:14px; opacity:.9; }

/* Keep credit near bottom ad */
#menu-bottom{ margin-top:auto; margin-bottom:6px; }
/* ===== End v6 ===== */


/* ===== Deck Modal — Option B exact-fit (fronts 1 row, backs 2 rows, save pinned) ===== */
#deckModal[style*="display: block"]{
  inset: calc(var(--ad-h) + env(safe-area-inset-top)) 8px
         calc(var(--ad-h) + env(safe-area-inset-bottom)) 8px !important;
  display:flex !important; align-items:center; justify-content:center; padding:0;
}
#deckModal[style*="display: block"] .modal-content{
  position:relative;
  margin:0 !important; width:min(92vw, 720px);
  max-height: calc(100svh - (2 * var(--ad-h)) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
  overflow:hidden; display:flex; flex-direction:column; padding:12px;
}
#deckModal .modal-content h2{ margin:6px 0 8px; font-size: clamp(1rem, 2.2vh, 1.15rem); }
#deckModal .modal-content h3{ margin:6px 0 6px; font-size: clamp(0.95rem, 2vh, 1.05rem); }

/* Fronts: always a single row; columns = number of decks */
#deckModal #deckGrid{
  display:grid;
  grid-template-columns: repeat(var(--frontCols, 3), 1fr);
  gap: var(--deckGap, 8px);
}
#deckModal #deckGrid .deck-option{ display:flex; flex-direction:column; align-items:center; gap:4px; }
#deckModal #deckGrid .deck-option img{ height: var(--frontH, 72px); width:auto; }

/* Backs: always 3 columns → 2 rows given 6 items */
#deckModal #backGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--deckGap, 8px);
}
#deckModal #backGrid .back-option{ display:flex; flex-direction:column; align-items:center; gap:4px; }
#deckModal #backGrid .back-option img{ height: var(--backH, 72px); width:auto; }

/* Save row pinned within the modal viewport; button width consistent */
#deckModal .modal-buttons{
  position: sticky; bottom: 0; background: #fff; padding: 8px 0 10px;
  border-top: 1px solid #eee; z-index: 2;
}
#deckModal .modal-buttons button{ width:95%; max-width:95%; margin-inline:auto; }
/* ===== End Deck Modal Option B ===== */



/* ===== App credit anchor (index + settings only) ===== */
#app{ position: fixed; } /* ensure positioned container */
#site-credit{
  position: absolute;
  left: 0; right: 0;
  bottom: max(6px, env(safe-area-inset-bottom));
  padding: 4px 8px;
  margin: 0;
  text-align: center;
  z-index: 2;
  font-size: .9rem;
}
/* ===== End app credit anchor ===== */



/* === Anchor-based menu buttons: match button style (no underline) === */
a.menubutton,
a.menubutton:link,
a.menubutton:visited,
a.menubutton:hover,
a.menubutton:focus,
a.menubutton:active{
  text-decoration: none !important;
}
/* Ensure anchors render as flex like other buttons */
a.menubutton{
  display: flex !important;
  align-items: center;
  justify-content: center;
}



/* ===== Difficulty Modal — Option B exact-fit (table fits; save pinned) ===== */
#difficultyModal[style*="display: block"]{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
#difficultyModal[style*="display: block"] .modal-content{
  position:relative;
  margin:0;
  max-height:90dvh;
  width:min(92vw,720px);
  display:flex;
  flex-direction:column;
  overflow:hidden;  /* prevent page scroll; we'll fit the table */
}

/* Sticky footer with 95% button width */
#difficultyModal .modal-buttons{
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 8px 0 10px;
  border-top: 1px solid #eee;
  z-index: 2;
}
#difficultyModal .modal-buttons button{
  width:95%;
  max-width:95%;
  margin-inline:auto;
}

/* Table sizing via CSS variables (set by JS fitter) */
#difficultyModal .diff-matrix{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  margin:8px auto 6px;
  table-layout: fixed;           /* avoid horizontal overflow */
  font-size: var(--diffFont, 16px);
}
#difficultyModal .diff-matrix th,
#difficultyModal .diff-matrix td{
  padding: var(--diffPadY, 10px) var(--diffPadX, 10px);
  text-align: center;
  word-break: break-word;
}
#difficultyModal .diff-lefthead{ text-align:left; }
/* ===== End Difficulty Modal Option B ===== */



/* ===== Difficulty table column widths + label no-wrap ===== */
#difficultyModal .diff-matrix{ table-layout: fixed; }
#difficultyModal .diff-matrix col.diff-col-label{ width:58%; }
#difficultyModal .diff-matrix col.diff-col-c{ width:14%; }
#difficultyModal .diff-lefthead{
  white-space: nowrap;
  font-size: var(--diffLabelFont, 16px);
}
/* ===== End column widths ===== */

/* NEW: unify all modal action buttons to 95% width */
.modal .modal-buttons button,
.modal .modal-buttons .menubutton {
  width: 95%;
  max-width: 95%;
  margin-inline: auto;
  display: block;
}

/* Instructions modal: side-by-side buttons (override global 95% block layout) */
#instructionModal .modal-buttons{
  display: flex;
  gap: 10px;
  width: 95%;
  margin: 8px auto 0;   /* centers the row */
}

#instructionModal .modal-buttons button,
#instructionModal .modal-buttons .menubutton{
  flex: 1 1 0;
  width: auto !important;      /* override global 95% width */
  max-width: none !important;
  display: inline-block !important;  /* override global block */
}

#instructionModal .modal-buttons button:disabled,
#instructionModal .modal-buttons .menubutton:disabled{
  opacity: 0.5;                /* fade inactive */
  cursor: not-allowed;
}


/* Red suit/highlight used by <red>…</red> in instructions */
.ins-red{
  color: #e11d48;   /* vivid red for hearts/diamonds */
  font-weight: 700; /* optional emphasis */
}


/* === Instruction modal sticky footer (pager + buttons) === */
#instructionModal .instruction-footer{
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 8px 0 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Let the text area take remaining height so content scrolls above the sticky footer */
#instructionText{
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 100%;
  margin: 0 0 8px;
}





/* === Player 3 (top) horizontal stack between players 2 & 4 — 3/4-player only === */

/* 1) Neutralise legacy per-card stacking for the top seat (we stack SLOTS now) */
.players-3 #top-hand .card,
.players-4 #top-hand .card {
  margin-left: 0 !important;
}

/* 2) Keep the top hand clipped to its grid cell so side columns can’t bleed over it */
.players-2 #top-hand.six-slot,
.players-3 #top-hand.six-slot,
.players-4 #top-hand.six-slot,
#hand.six-slot {
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

/* 3) Overlap across SLOTS (not cards) to compress width horizontally — TOP seat (3/4 players) */
   .players-3 #top-hand.six-slot .hand-slot:not(:first-child),
   .players-4 #top-hand.six-slot .hand-slot:not(:first-child){
   margin-left: calc(var(--card-h) * var(--card-aspect) * (var(--ai-visible) - 1));
}



/* === Player 1 (#hand): adaptive gap/overlap for 6 and 5 cards (same card size) === */
/* Neutralize the generic overlap rule for #hand only; we’ll compute our own */

#hand.six-slot { --ai-visible: 1; }

#hand.six-slot{
  --p1-slot-w: calc(var(--card-h) * var(--card-aspect));
  --p1-gap: 8px;
  --p1-n: 6;
  --p1-needed: calc( (var(--p1-n) * var(--p1-slot-w)) + ((var(--p1-n) - 1) * var(--p1-gap)) );
  --p1-overflow: max(0px, calc(var(--p1-needed) - 100%));
  --p1-overlap: calc( var(--p1-overflow) / (var(--p1-n) - 1) );
  gap: var(--p1-gap);
}

#hand.six-slot:has(.hand-slot.empty):not(:has(.hand-slot.empty ~ .hand-slot.empty)){
  --p1-n: 5;
}

#hand.six-slot .hand-slot:not(:first-child){
  margin-left: calc(var(--p1-overlap) * -1) !important;
}

#hand.six-slot .hand-slot.empty{
  width: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}





/* 4) Collapse empty placeholders so the width reflects actual cards */
.players-2 #top-hand.six-slot .hand-slot.empty,
.players-3 #top-hand.six-slot .hand-slot.empty,
.players-4 #top-hand.six-slot .hand-slot.empty,
#hand.six-slot .hand-slot.empty {
  width: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* 5) Belt-and-braces: side columns shouldn’t bleed outside their grid cells either */
.players-3 #left-hand,
.players-3 #right-hand,
.players-4 #left-hand,
.players-4 #right-hand {
  overflow: hidden;
}



/* === Layout fix: constrain center column between side hands (3–4 players only) === */
.players-3 .table-grid,
.players-4 .table-grid{
  /* Make side columns size to their content (card width), center takes remaining space */
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Top seat uses a horizontal flex row so slot-overlap works (3 4 players only) */
.players-2 #top-hand.six-slot,
.players-3 #top-hand.six-slot,
.players-4 #top-hand.six-slot,
#hand.six-slot {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
  width: 100%;
}


/* Instructions modal: fullscreen, stable layout */
#instructionModal .modal-content{
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto /* header */
                       auto /* video */
                       1fr  /* text (scrolls if needed) */
                       auto /* buttons */;
  padding: calc(env(safe-area-inset-top, 0px) + 12px)
           12px
           calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* keep the video from causing jumps; your clips are 16:9 @720p */
#instructionModal #instructionVideo{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background:#000;
  display:block;
}

/* text fills available space and scrolls if long */
#instructionModal #instructionText{
  overflow:auto;
  white-space: pre-line;
  min-height: 0; /* allow grid to control height */
}

/* buttons side-by-side at 95% width (uses what you added before) */
#instructionModal .modal-buttons{
  display:flex;
  gap:10px;
  width:95%;
  margin:8px auto 0;
}
#instructionModal .modal-buttons button{
  flex:1 1 0;
  width:auto !important;
  max-width:none !important;
  display:inline-block !important;
}
#instructionModal .modal-buttons button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* Human hand slide animation: allow transform transitions (override global none !important) */
#hand.six-slot .hand-slot .card {
  transition: transform 180ms ease !important;
  will-change: transform;
}


/* Center AdSense blocks */
.ad-slot {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

/* White links in the site credit line */
#site-credit a,
#site-credit a:visited {
  color: #fff;           /* match the other text */
  text-decoration: none; /* keep it clean */
  font-weight: inherit;  /* keep the same bold from <strong> */
}

#site-credit a:hover,
#site-credit a:focus {
  color: #fff;
  text-decoration: underline; /* optional visual cue */
}

/* ===== Fixed-frame layout (global) ===== */

/* 320×50 ad bar height (change to 60px/100px if you use taller creatives) */
:root{
  --ad-h: 50px;
}

/* Page itself doesn't scroll; the app area is the viewport between bars */
html, body{
  height: 100%;
  overflow: hidden;
}

/* Fixed ad bars (no background/shadow changes) */
.adbar{
  position: fixed;
  left: 0;
  right: 0;
  height: var(--ad-h);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pin bars to edges; use *only* safe-area padding (no extra px) */
#adTop{
  top: 0;
  padding-top: env(safe-area-inset-top);
}
#adBottom{
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Make the ad images fill the bars precisely */
.adbar .adimg{
  display: block;
  width: 320px;
  height: 50px;
  border: 0;
}

/* App region sandwiched between ad bars */
#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: hidden; /* your modals/inner panes can scroll if needed */
}

/* Credit pinned just above the bottom bar, inside the app area */
#site-credit{
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(6px, env(safe-area-inset-bottom));
  text-align: center;
}

/* Keep credit links white (already in use) */
#site-credit a,
#site-credit a:visited{ color:#fff; text-decoration:none; }
#site-credit a:hover,
#site-credit a:focus{ color:#fff; text-decoration:underline; }


/* Consent modal — match other modal button spacing */
#consentModal .modal-buttons{
  display: flex;
  gap: 10px;                 /* consistent spacing between buttons */
  justify-content: center;
  flex-wrap: wrap;           /* nice wrap on narrow screens */
}

/* On phones, stack full-width like Game Over modal */
@media (max-width: 600px){
  #consentModal .modal-buttons{
    flex-direction: column;
  }
  #consentModal .modal-buttons button{
    width: 95%;
    max-width: 95%;
    margin-inline: auto;     /* center buttons */
    display: block;
  }
}