/* 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);
  /* 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}
html,body{height:100%;}
body{
  margin:0;
  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;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
#app{min-height:100dvh; display:flex; flex-direction:column;}

.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.2);
  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}

.btn{
  background:#fff;
  color:#111;
  border:0;
  border-radius:999px;
  padding:.6em 1em;
  font-weight:600;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.toggle{
  display:flex; gap:.5rem; align-items:center;
  font-size: .95rem;
}
#status{font-weight:600;}

#board{
  flex:1;
  padding: var(--pad);
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  overflow:hidden;
  touch-action: none; /* smoother touch drags */
}

.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{
  /* High-contrast white back, same for stock & face-down tableau */
  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);
}
.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:FANNING */
/* Offsets happen via inline styles from JS */
/* /ANCHOR:FANNING */

/* 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 */

/* 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;
}
.btn:hover{ opacity:.92; } .btn:active{ transform:translateY(1px); }
.btn-secondary{ background:#374151; }
.bottombar{ display:flex; justify-content:center; align-items:center; gap:.75rem; padding:.5rem 1rem .75rem; }
.bottombar .brandlink{ font-size:.95rem; opacity:.9; color:#e7f3ff; text-decoration:none; padding:0 .25rem; }
.bottombar .brandlink:hover{ text-decoration:underline; }

@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 */