/* ANCHOR:BASE */
:root{
  --felt:#0b6a2b;
  --card-bg:#ffffff;
  --card-border:#e6e6e6;
  --red:#c62828;
  --black:#111;
  --gap: min(1.6vw, 1.6vh);
  --pad: min(2.2vw, 2.2vh);
  --topbar-h: clamp(44px, 6vh, 64px);

  /* Content section palette */
  --content-bg: #fbf8f4;
  --content-text: #1f2937;
  --content-muted: #6b7280;
  --content-accent: #0b6a2b;
  --content-link: #166534;
  --content-card-bg: #ffffff;
  --content-border: #e5e7eb;

  /* ANCHOR:RESPONSIVE */
  --card-w: clamp(56px, min(10.5vw, 12vh), 120px);
  --card-h: calc(var(--card-w) * 1.45);
  --card-radius: calc(var(--card-w) * 0.08);
  --fan-small: calc(var(--card-h) * 0.28);
  --fan-large: calc(var(--card-h) * 0.36);
  /* /ANCHOR:RESPONSIVE */
}

*{box-sizing:border-box}

/* ANCHOR:VIEWPORT-FIX
   The previous version had `html, body { height: 100% }` which prevented the
   body from scrolling — the game-then-content layout requires natural document
   scroll. We now set min-height on html/body and let the body grow naturally.
   The game itself lives in #game-stage which is min-height: 100dvh.
*/
html, body {
  margin:0;
  min-height:100%;
  /* explicitly NOT height:100% — that would lock the body to one viewport */
}
body{
  background:var(--felt);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color:#fff;
  -webkit-tap-highlight-color: transparent;
}
/* /ANCHOR:VIEWPORT-FIX */

/* ANCHOR:GAME-STAGE
   Fills the viewport on initial load. Uses 100dvh (dynamic viewport height)
   which correctly handles mobile browser chrome that collapses on scroll.
   100svh fallback for older browsers; 100vh as the last resort.
*/
#game-stage{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
  background: var(--felt);
  user-select:none;
}
/* /ANCHOR:GAME-STAGE */

.topbar{
  height:var(--topbar-h);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 0 var(--pad);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  position:sticky; top:0; z-index:3;
}
.topbar .left{justify-self:start}
.topbar .center{justify-self:center}
.topbar .right{justify-self:end}

.toggle{
  display:flex; gap:.5rem; align-items:center;
  font-size: .95rem;
  cursor: pointer;
}

/* ANCHOR:STATUS-DISPLAY
   The center status block: board number · time · moves. Always visible during
   play. Tabular numerals on the timer so digits don't shift the layout each
   second. */
.status{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
}
.status-board{ color:#ffd166; }
.status-sep{ opacity:.4; }
.status-time{ font-variant-numeric: tabular-nums; min-width: 3.2em; display:inline-block; }
.status-moves{ font-variant-numeric: tabular-nums; }
.status-best{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #ffd166;
  font-weight: 600;
}
.status-best[hidden]{ display: none; }
.status-best-label{ font-weight: 500; opacity: .85; }
/* /ANCHOR:STATUS-DISPLAY */

@media (max-width: 480px){
  .topbar { padding: 0 8px; }
  .topbar .btn { padding: 0 10px; height: 36px; font-size: .9rem; }
  .toggle-label { display: none; } /* checkbox-only on narrow screens */
  .status { font-size: .9rem; gap: .3rem; }
}

#board{
  flex:1;
  padding: var(--pad);
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  overflow:hidden;
  touch-action: none; /* drags on cards never trigger page scroll */
}

.top-row{
  display:grid;
  grid-template-columns: var(--card-w) var(--card-w) 1fr repeat(4, var(--card-w));
  align-items:start;
  gap: var(--gap);
  min-height: var(--card-h);
}

.spacer{width:100%;}

.foundations{
  display:grid;
  grid-template-columns: repeat(4, var(--card-w));
  gap: var(--gap);
}

.tableau{
  display:grid;
  grid-template-columns: repeat(7, var(--card-w));
  gap: var(--gap);
  align-items:start;
  flex:1;
  overflow:hidden;
}

/* ANCHOR:PILES */
.pile{
  position:relative;
  width: var(--card-w);
  min-height: var(--card-h);
  border-radius: var(--card-radius);
  outline: 2px dashed rgba(255,255,255,0.15);
  outline-offset: -4px;
}
.pile.column{outline-style: solid; outline-color: rgba(255,255,255,0.12);}
.pile.stock{background: rgba(255,255,255,0.06);}
.pile.waste{background: rgba(0,0,0,0.05);}
.pile.foundation{background: rgba(0,0,0,0.07);}
/* /ANCHOR:PILES */

/* ANCHOR:CARD */
.card{
  position:absolute;
  width: var(--card-w);
  height: var(--card-h);
  background: var(--card-bg);
  color: var(--black);
  border:1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  padding: calc(var(--card-w) * 0.08);
  font-weight: 700;
  transform-origin: top left;
  touch-action: none;
}
.card.back{
  background: #f9fafb;
  color:#111;
  border-color:#e5e7eb;
  background-size: 16px 16px;
  background-image:
    radial-gradient(circle at 8px 8px, rgba(17,24,39,.25) 2px, transparent 2px);
  /* Lighter shadow than face-up cards — face-down cards don't need to "lift",
     and the heavier shadow was bleeding onto the tableau card below the stock. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.card .rank{font-size: calc(var(--card-w) * 0.28); line-height:1;}
.card .suit{font-size: calc(var(--card-w) * 0.26);}
.card .br{margin-top:auto; align-self:flex-end; text-align:right; transform: rotate(180deg);}
.card.red{color: var(--red)}
.card.black{color: var(--black)}
.card.faceup{cursor:grab;}
.card.dragging{cursor:grabbing; opacity:.95; box-shadow: 0 10px 20px rgba(0,0,0,0.35); pointer-events:none;}
/* /ANCHOR:CARD */

/* ANCHOR:ACCESSIBILITY */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden;}
/* /ANCHOR:ACCESSIBILITY */

/* ANCHOR:SELECTION */
.card.selected{
  outline: 3px solid #ffd166;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(255,209,102,0.35), 0 8px 16px rgba(0,0,0,0.35);
}
/* /ANCHOR:SELECTION */

/* ANCHOR:LANDSCAPE */
@media (orientation: landscape){
  #board{gap: calc(var(--gap) * 0.8);}
  .tableau{gap: calc(var(--gap) * 0.9);}
}
/* /ANCHOR:LANDSCAPE */

/* Landscape on phones is a known limitation: a 13-card tableau column does
   not physically fit on a phone in landscape no matter how small the cards
   are, and free-scroll-to-explore-the-board conflicts with our drag-and-drop
   touch handling. Cardgames.io has the same constraint and accepts the
   trade-off. Users on phones should play in portrait; tablets and desktop
   in landscape work fine because they have the vertical space. */

/* ANCHOR:WIN-MODAL
   Shown when isWin() is satisfied. Full-screen overlay with a centered card
   showing time/moves/board, a personal-best message, and three actions:
   share, replay this board, or pick a new random board. */
.win-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 100;
  padding: 16px;
  user-select: none;
  animation: winModalFade .18s ease;
}
.win-modal.show{ display: flex; }
@keyframes winModalFade { from { opacity: 0; } to { opacity: 1; } }

.win-modal-card{
  background: #fff;
  color: #1f2937;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  position: relative;
  user-select: text;
  animation: winModalPop .25s ease;
}
@keyframes winModalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.win-modal-close{
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.win-modal-close:hover{ color: #4b5563; background: #f3f4f6; }

.win-modal-title{
  margin: 0 0 18px;
  font-size: 1.6rem;
  color: #166534;
}

.win-modal-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 8px;
  background: #f9fafb;
  border-radius: 12px;
}
.win-modal-stat-label{
  font-size: 0.75rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.win-modal-stat-value{
  font-size: 1.3rem;
  font-weight: 700;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

.win-modal-sub{
  margin: 0 0 20px;
  color: #4b5563;
  font-size: 0.95rem;
  min-height: 1.4em;
}

.win-modal-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.win-modal-actions .btn{
  width: 100%;
  height: 44px;
}
@media (min-width: 480px){
  .win-modal-actions{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .win-modal-actions .btn[data-win-action="share"]{
    flex-basis: 100%;
  }
  .win-modal-actions .btn[data-win-action="replay"],
  .win-modal-actions .btn[data-win-action="new"]{
    flex: 1 1 0;
  }
}
/* /ANCHOR:WIN-MODAL */

/* ANCHOR:DND-HILITE */
.pile.drop-ok{
  outline-color:#ffd166;
  box-shadow: 0 0 0 3px rgba(255,209,102,0.35) inset;
}
.pile.drop-ok .card.faceup:last-of-type{
  box-shadow: 0 0 0 3px rgba(255,209,102,0.7), 0 8px 16px rgba(0,0,0,0.35);
}
.pile.drop-bad{
  outline-color:#ef4444;
}
/* /ANCHOR:DND-HILITE */

/* ANCHOR:BUTTONS-UNDO */
.btn{
  background:#1f2937; color:#fff; border:none; border-radius:.65rem; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ opacity:.92; }
.btn:active{ transform:translateY(1px); }
.btn-secondary{ background:#374151; }
.btn-primary{ background: linear-gradient(135deg, #166534, #0b6a2b); color:#fff; }
.bottombar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  padding:.4rem 1rem .65rem;
}
.bottombar-row{
  display:flex; gap:.6rem; align-items:center; justify-content:center;
}
.bottombar-secondary{
  font-size:.9rem;
  color:#e7f3ff;
}
.bottombar-secondary a{
  color:#e7f3ff;
  text-decoration:none;
  opacity:.85;
  padding:.2rem .3rem;
}
.bottombar-secondary a:hover{ opacity:1; text-decoration:underline; }
.bottombar-secondary .sep{ opacity:.45; padding:0 .15rem; }

@media (max-width: 430px){
  :root{ --card-w: clamp(48px, min(9.2vw, 11vh), 120px); --gap: min(1.0vw, 1.0vh); --pad: min(1.6vw, 1.6vh); }
}
#board, #board *{ touch-action: none; }
/* /ANCHOR:BUTTONS-UNDO */

/* ============================================================ */
/* ANCHOR:CONTENT-SECTION
   Below the game. Natural-flow scrollable area with the article,
   author bios, and cross-game links. Lives outside the green felt.
*/
/* ============================================================ */

.site-header{
  background: #ffffff;
  border-top: 1px solid var(--content-border);
  padding: 28px 16px 20px;
  text-align:center;
  color: var(--content-text);
}
.site-header .brand-link{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color: inherit;
}
.site-header .site-logo{
  height: 56px;
  width: auto;
}
.site-header .brand-sub{
  color: var(--content-muted);
  font-size:.95rem;
}

#content{
  background: var(--content-bg);
  color: var(--content-text);
  padding: 32px 20px 56px;
  user-select:text;
}
.content-inner{
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.65;
}
.content-inner h1{
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height:1.2;
  margin: 0 0 12px;
  color: var(--content-text);
  letter-spacing:-0.01em;
}
.content-inner h2{
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  margin: 36px 0 12px;
  color: var(--content-accent);
  letter-spacing:-0.01em;
}
.content-inner h3{
  font-size: 1.15rem;
  margin: 22px 0 8px;
  color: var(--content-text);
}
.content-inner p{
  margin: 0 0 14px;
}
.content-inner a{
  color: var(--content-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.content-inner a:hover{ text-decoration-thickness: 2px; }

.byline{
  font-size:.95rem;
  color: var(--content-muted);
  border-bottom: 1px solid var(--content-border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.byline strong{
  color: var(--content-text);
}

.lede{
  font-size: 1.1rem;
  color: var(--content-text);
}

.content-inner ul, .content-inner ol{
  padding-left: 1.5em;
  margin: 0 0 14px;
}
.content-inner li{
  margin-bottom: 8px;
}

/* Author cards */
.authors{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 12px 0 8px;
}
@media (min-width: 720px){
  .authors{ grid-template-columns: 1fr 1fr; }
}
.author-card{
  background: var(--content-card-bg);
  border: 1px solid var(--content-border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.author-card h3{
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.author-card .role{
  font-weight: 500;
  color: var(--content-muted);
  font-size: .95rem;
}
.author-card p{
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

/* Cross-game links */
.more-games{
  list-style: none;
  padding: 0;
  display:grid;
  gap: 10px;
}
.more-games li{
  background: var(--content-card-bg);
  border: 1px solid var(--content-border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 0;
}
.more-games a{
  font-weight: 600;
}

/* Site footer (below content) */
.site-footer{
  background: #fff;
  border-top: 1px solid var(--content-border);
  padding: 20px 16px 28px;
  text-align: center;
  color: var(--content-muted);
}
.site-footer .site-logo.small{ height: 40px; width:auto; }
.site-footer .footer-tag{
  margin: 8px 0 0;
  font-size: .9rem;
}
.site-footer a{
  color: var(--content-link);
}
/* /ANCHOR:CONTENT-SECTION */