* { box-sizing: border-box; }

:root {
  --felt: #0a5a3b;
  --felt-dark: #063d29;
  --panel: rgba(0,0,0,.20);
  --text: #f7f3e8;
  --card-w: clamp(74px, 8.2vw, 112px);
  --card-h: calc(var(--card-w) * 1.42);
  --radius: 10px;
  --board-gap: 10px;
}

html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.05), transparent 36%),
    linear-gradient(160deg, var(--felt), var(--felt-dark));
}

button { font: inherit; }
a { color: inherit; }

.app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.toolbar {
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:var(--panel);
  border-radius:16px;
  backdrop-filter: blur(10px);
}

.brand-block { min-width: 0; }
h1 { margin:0; font-size:clamp(1.35rem, 2.5vw, 2.1rem); line-height:1.05; }
.tagline { margin:.25rem 0 0; opacity:.72; font-size:.9rem; }
.toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.btn { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.11); color:white; padding:9px 13px; border-radius:10px; cursor:pointer; }
.btn:hover { background:rgba(255,255,255,.17); }
.btn.primary { background:#b51f2e; border-color:#d34b58; }

.stats { display:flex; gap:22px; margin:12px 2px 18px; opacity:.92; font-size:.95rem; flex-wrap:wrap; }
.stats strong { margin-left:5px; }
.game-board { min-height:650px; width:100%; }
.top-row { display:flex; justify-content:space-between; gap:28px; width:100%; }
.left-piles, .foundation-piles { display:flex; gap:12px; }
.pile { position:relative; width:var(--card-w); height:var(--card-h); border:2px solid rgba(255,255,255,.17); border-radius:var(--radius); flex:0 0 auto; }
.foundation .placeholder { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(1.3rem,3vw,2rem); opacity:.22; }

.tableau {
  display:grid;
  grid-template-columns:repeat(7, minmax(0, var(--card-w)));
  justify-content:space-between;
  gap:var(--board-gap);
  margin-top:28px;
  width:100%;
}
.tableau-col { position:relative; min-width:0; min-height:calc(var(--card-h) + 240px); }

.card {
  position:absolute;
  width:var(--card-w);
  height:var(--card-h);
  border-radius:var(--radius);
  background:#fffdf8;
  color:#111;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:0 5px 14px rgba(0,0,0,.25);
  user-select:none;
  cursor:pointer;
  overflow:hidden;
  transform:translateZ(0);
  touch-action:manipulation;
}
.card.red { color:#b11226; }
.card.face-down {
  color:transparent;
  background-color:#050505;
  background-image:url('card-back.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:4px solid #b51f2e;
  outline:1px solid rgba(0,0,0,.38);
}
.card-corner { position:absolute; top:6px; left:7px; display:flex; flex-direction:column; align-items:center; font-weight:800; font-size:clamp(.9rem,1.7vw,1.22rem); line-height:.9; }
.card-corner.bottom { top:auto; left:auto; bottom:6px; right:7px; transform:rotate(180deg); }
.card-center { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(2rem,4.8vw,4rem); font-family:Georgia, serif; }
.face-letter { font-size:clamp(2.4rem,5vw,4.4rem); font-weight:700; font-family:Georgia, serif; }
.face-decoration { position:absolute; inset:28% 18%; border:2px solid currentColor; border-radius:50% 50% 45% 45%; opacity:.16; }

.card.selected { outline:4px solid rgba(255,220,70,.95); outline-offset:2px; }
.card.hint { animation:pulse .8s ease-in-out 2; }
.pile.hint-pile { animation:pulsePile .8s ease-in-out 2; }
@keyframes pulse { 50% { transform:translateY(-8px); box-shadow:0 10px 24px rgba(255,230,80,.55); } }
@keyframes pulsePile { 50% { transform:translateY(-6px); box-shadow:0 0 0 4px rgba(255,220,70,.9), 0 10px 24px rgba(255,230,80,.45); } }

.message { min-height:32px; margin-top:12px; text-align:center; font-weight:700; }
.win { font-size:1.15rem; }

.site-footer {
  margin-top:24px;
  background:rgba(0,0,0,.20);
  border-top:1px solid rgba(255,255,255,.10);
}
.footer-inner {
  width:min(1180px,100%);
  margin:0 auto;
  padding:18px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  font-size:.9rem;
  opacity:.88;
}
.footer-links { display:flex; gap:18px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { text-decoration:underline; }

@media (max-width: 760px) {
  :root {
    --board-gap: 4px;
    --card-w: calc((100vw - 44px) / 7);
    --radius: 7px;
  }

  .app-shell { padding:10px; }
  .toolbar { align-items:stretch; flex-direction:column; gap:12px; padding:12px; }
  h1 { font-size:clamp(1.25rem, 7vw, 1.8rem); }
  .tagline { font-size:.8rem; }
  .toolbar-actions { justify-content:flex-start; display:grid; grid-template-columns:repeat(3,1fr); }
  .btn { padding:9px 7px; font-size:.88rem; white-space:nowrap; }
  .stats { justify-content:space-between; gap:8px; margin:10px 2px 14px; font-size:.86rem; }

  .top-row {
    display:grid;
    grid-template-columns:repeat(6, var(--card-w));
    gap:var(--board-gap);
    justify-content:space-between;
  }
  .left-piles, .foundation-piles { display:contents; }
  .foundation-piles .pile { order:2; }
  .left-piles .pile { order:1; }

  .tableau { margin-top:20px; gap:var(--board-gap); }
  .tableau-col { min-height:calc(var(--card-h) + 310px); }

  .card { box-shadow:0 3px 9px rgba(0,0,0,.24); }
  .card.face-down { border-width:2px; }
  .card-corner { top:4px; left:4px; font-size:clamp(.62rem,3.1vw,.9rem); }
  .card-corner.bottom { bottom:4px; right:4px; }
  .card-center { font-size:clamp(1.15rem,7vw,2rem); }
  .face-letter { font-size:clamp(1.45rem,8vw,2.2rem); }
  .foundation .placeholder { font-size:clamp(.78rem,4vw,1.15rem); }

  .footer-inner { padding:14px 10px calc(14px + env(safe-area-inset-bottom)); flex-direction:column; gap:8px; text-align:center; }
}

@media (max-width: 390px) {
  :root { --card-w: calc((100vw - 40px) / 7); --board-gap:3px; }
  .btn { font-size:.8rem; padding:8px 5px; }
  .stats { font-size:.8rem; }
}