:root {
  --page-bg: #e8ddc4;
  --felt-dark: #18442d;
  --felt-mid: #1f5a36;
  --felt-light: #2a7044;
  --panel-border: #d6c8a8;
  --text-main: #2c2418;
  --text-soft: #655845;
  --accent: #b8872f;
  --card-red: #b02828;
  --card-black: #1f1f22;
  --shadow-soft: 0 16px 40px rgba(24, 27, 20, 0.12);
  --shadow-card: 0 8px 18px rgba(16, 22, 17, 0.18);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.55), transparent 24%),
    linear-gradient(180deg, #efe5cf 0%, var(--page-bg) 60%, #dccda9 100%);
}
button,input,select,textarea { font: inherit; }
a { color: inherit; }
.page-shell { width: min(1560px, calc(100vw - 48px)); margin: 0 auto; padding: 18px 0 48px; }
.hero { display: block; margin-bottom: 14px; }
.hero-copy,.hero-panel,.intro-panel,.content-panel,.faq-panel,.status-bar,.mobile-play-panel {
  background: rgba(246,239,223,0.9);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}
.hero-copy { padding: 16px 18px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.88rem; font-weight: 700; }
.crumb-link { text-decoration: none; }
h1,h2,h3 { margin: 0; font-weight: 700; }
h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin-bottom: 10px; }
.lead { max-width: 72ch; font-size: 1.05rem; line-height: 1.6; color: var(--text-soft); margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.primary-button,.secondary-button {
  border-radius: 999px; border: 0; padding: 13px 20px; cursor: pointer; font-size: 1rem; font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.primary-button { background: linear-gradient(180deg, #d8ae53, #b8872f); color: #fff9ef; box-shadow: 0 8px 18px rgba(184,135,47,0.28); }
.secondary-button { background: #e7dcc2; color: var(--text-main); border: 1px solid #cfbf99; }
.primary-button:hover,.secondary-button:hover { transform: translateY(-1px); }
.secondary-button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.status-bar { padding: 12px 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.status-group { display: flex; flex-direction: column; gap: 4px; }
.status-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.76rem; color: var(--text-soft); }
.status-group strong { display: block; font-size: 1.12rem; line-height: 1.25; min-height: 1.4em; overflow-wrap: anywhere; word-break: break-word; }
.mobile-play-panel { padding: 12px 18px; margin-bottom: 12px; }
.mobile-play-note { margin: 0; color: var(--text-soft); line-height: 1.6; }
.table-area {
  position: relative;
  background: radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 28%), linear-gradient(180deg, var(--felt-light), var(--felt-mid) 28%, var(--felt-dark));
  border-radius: 28px; padding: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), var(--shadow-soft); border: 1px solid rgba(23,52,35,0.4); overflow: hidden;
}
.game-board { min-height: 780px; }
.board-top { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.stock-panel,.foundation-panel {
  min-width: 0; background: rgba(11,28,19,0.16); border: 2px dashed rgba(255,255,255,0.18); border-radius: 18px; padding: 10px;
}
.zone-label { margin: 0 0 8px; color: rgba(255,250,239,0.88); font-size: 0.9rem; letter-spacing: 0.03em; }
.slot {
  position: relative; min-height: 132px; border-radius: 16px; border: 2px dashed rgba(255,255,255,0.24); background: rgba(255,255,255,0.05);
}
.slot.actionable { cursor: pointer; }
.slot-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,250,239,0.72); font-size: 0.88rem; text-align: center; padding: 12px;
}
.foundation-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.foundation-slot {
  position: relative; min-height: 132px; border-radius: 16px; border: 2px dashed rgba(255,255,255,0.24); background: rgba(255,255,255,0.05);
}
.foundation-slot.selected,.column-drop.selected,.slot.selected {
  border-color: rgba(255,232,173,0.95); box-shadow: 0 0 0 4px rgba(255,232,173,0.16);
}
.foundation-hint {
  position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,250,239,0.65); font-size: 1.6rem;
}
.tableau { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.column { min-width: 0; }
.column-label { margin: 0 0 8px; color: rgba(255,250,239,0.88); font-size: 0.88rem; letter-spacing: 0.03em; }
.column-drop {
  position: relative; min-height: 420px; border-radius: 18px; border: 2px dashed rgba(255,255,255,0.18); background: rgba(11,28,19,0.12); padding: 6px;
}
.cards-stack { position: relative; min-height: 404px; }
.stacked-card { position: absolute; left: 0; right: 0; height: 132px; }
.card {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,251,245,0.98), rgba(245,235,217,0.98));
  border: 2px solid rgba(78,63,41,0.18); border-radius: 16px; box-shadow: var(--shadow-card); color: var(--card-black); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease; width: 100%; height: 132px;
}
.card.red { color: var(--card-red); }
.card.selected { transform: translateY(-4px); box-shadow: 0 0 0 4px rgba(255,232,173,0.28), var(--shadow-card); }
.card:hover { transform: translateY(-4px); }
.corner { position: absolute; display: flex; flex-direction: column; align-items: center; font-weight: 700; line-height: 1; }
.corner-top { top: 8px; left: 8px; }
.corner-bottom { right: 8px; bottom: 8px; transform: rotate(180deg); }
.rank { font-size: 1.05rem; }
.suit { font-size: 0.95rem; margin-top: 3px; }
.card-center { font-size: 2.35rem; line-height: 1; }
.win-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,22,16,0.42); backdrop-filter: blur(2px); }
.win-overlay[hidden] { display: none; }
.win-panel { width: min(420px, calc(100% - 32px)); padding: 26px 28px; border-radius: 24px; background: rgba(250,244,231,0.96); border: 1px solid var(--panel-border); box-shadow: var(--shadow-soft); text-align: center; }
.win-kicker { margin: 0 0 6px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; }
.win-summary { color: var(--text-soft); line-height: 1.65; margin: 12px 0 20px; }
.hero-panel,.intro-panel,.content-panel,.faq-panel { padding: 22px 24px; }
.hero-panel h2 { margin-bottom: 14px; }
.hero-panel ul { margin: 0; padding-left: 22px; color: var(--text-soft); line-height: 1.7; }
.intro-panel p,.content-panel p,.faq-panel p { margin: 10px 0 0; color: var(--text-soft); line-height: 1.7; }
.seo-content { margin-top: 12px; }
.content-grid,.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.faq-item { padding: 18px; border-radius: 18px; background: rgba(255,250,241,0.72); border: 1px solid rgba(214,200,168,0.9); }
@media (min-width: 961px) {
  .page-shell { width: min(1600px, calc(100vw - 56px)); }
  .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 18px; }
  .hero-copy .eyebrow,.hero-copy .lead { grid-column: 1 / -1; }
  .hero-actions { margin-top: 0; justify-content: flex-end; }
  .status-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 14px; }
  .status-group { flex: 1 1 160px; min-width: 0; }
  .status-group strong { font-size: 1rem; }
}
@media (max-width: 1300px) {
  .foundation-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tableau { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .content-grid,.faq-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-shell { width: min(100vw - 20px, 100%); padding: 12px 0 34px; }
  .hero-copy,.hero-panel,.intro-panel,.content-panel,.faq-panel,.status-bar,.mobile-play-panel { padding: 16px; border-radius: 18px; }
  .status-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .board-top { grid-template-columns: 1fr; gap: 12px; }
  .foundation-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tableau { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .column-drop,.cards-stack { min-height: 340px; }
}
@media (max-width: 520px) {
  .hero-actions { gap: 8px; }
  .primary-button,.secondary-button { min-height: 44px; padding: 11px 16px; font-size: 0.95rem; }
  .table-area { padding: 12px; }
  .foundation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tableau { grid-template-columns: 1fr; }
  .card { height: 124px; }
  .card-center { font-size: 2rem; }
}