/* Public guide pages (/games, /games/<slug>) and the "about" block under the
   daily puzzles. Walnut ground, gold accents, Cinzel headings — the front
   door's look (layouts/login.html.erb). */
:root {
  --gd-bg: #1A1411; --gd-panel: #241B16; --gd-line: #3D3027;
  --gd-text: #F3EADB; --gd-muted: #CDBFA9; --gd-gold: #E8C77A; --gd-gold-deep: #B8923F;
}
.gd, .gd * { box-sizing: border-box; }
body.gd {
  margin: 0; background: var(--gd-bg); color: var(--gd-text);
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 18px; line-height: 1.6; -webkit-text-size-adjust: 100%;
}
.gd a { color: var(--gd-gold); }
.gd a:hover { color: var(--gd-text); }
.gd h1, .gd h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; line-height: 1.2; color: var(--gd-text); text-wrap: balance; }
.gd h1 { font-size: 2.3rem; margin: 0 0 10px; }
.gd h2 { font-size: 1.45rem; margin: 40px 0 12px; color: var(--gd-gold); }
.gd h3 { font-size: 1.1rem; margin: 22px 0 4px; color: var(--gd-text); }
.gd p { margin: 0 0 14px; }

/* header */
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 32px; border-bottom: 1px solid var(--gd-line); background: #150F0C; }
.gd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--gd-text) !important; }
.gd-brand img { width: 68px; height: 45px; object-fit: contain; }
.gd-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.gd-nav a { text-decoration: none; font-weight: 600; font-size: 1rem; color: var(--gd-muted); }
.gd-nav a:hover { color: var(--gd-text); }

/* buttons */
.gd-btn { display: inline-block; padding: 12px 26px; border-radius: 8px; text-decoration: none; font-weight: 700;
  background: linear-gradient(180deg, var(--gd-gold), var(--gd-gold-deep)); color: #1A1411 !important; border: 1px solid var(--gd-gold); }
.gd-btn:hover { filter: brightness(1.08); }
.gd-btn-sm { padding: 7px 16px; font-size: 0.95rem; }
.gd-btn-ghost { background: transparent; color: var(--gd-gold) !important; }
.gd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* page body */
.gd-main { max-width: 1040px; margin: 0 auto; padding: 24px 32px 56px; }
.gd-crumbs { font-size: 0.9rem; color: var(--gd-muted); margin-bottom: 18px; }
.gd-crumbs a { color: var(--gd-muted); }
.gd-hero { display: flex; gap: 32px; align-items: center; padding: 16px 0 8px; }
.gd-hero-index { display: block; text-align: center; padding: 28px 0 12px; }
.gd-hero-index .gd-lede { max-width: 720px; margin-left: auto; margin-right: auto; }
.gd-hero-index .gd-cta-row { justify-content: center; }
.gd-crest { width: 190px; height: 190px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.gd-hero-text { min-width: 0; }
.gd-aka { color: var(--gd-muted); font-style: italic; margin-bottom: 8px; }
.gd-lede { font-size: 1.15rem; color: var(--gd-text); }
.gd-facts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gd-facts li { padding: 4px 12px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-panel);
  font-size: 0.92rem; color: var(--gd-muted); }

.gd-text { max-width: 760px; margin: 0 auto; }
.gd-text b { color: #FFF4DC; }
.gd-art { text-align: center; margin: 6px 0 18px; }
.gd-art img { max-width: 100%; height: auto; border-radius: 6px; }
.gd-tips { padding-left: 22px; margin: 0 0 14px; }
.gd-tips li { margin-bottom: 10px; }

/* card fans / tile rows / captions carried over from the lounge's How to Play */
.gd .lounge-howto-cards { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 10px 0 12px; flex-wrap: wrap; }
.gd .lounge-howto-cards img { width: 64px; height: auto; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.gd .lounge-howto-cards .lounge-howto-cut { margin-left: 16px; }
.gd .lounge-howto-caption { text-align: center; font-size: 0.9rem; color: var(--gd-muted); margin: -2px 0 16px; }
.gd .lounge-howto-tiles { display: flex; gap: 6px; justify-content: center; margin: 4px 0 6px; }
.gd .lounge-howto-tile { width: 52px; height: 52px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.3rem; color: #3a2a12;
  background: url('/images/classic_tile_light.png') center / cover no-repeat; box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.gd .lounge-howto-tile.dark { background-image: url('/images/classic_tile_dark.png'); color: #f0e4c0; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* games index grid */
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 28px 0 8px; }
.gd-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
  padding: 20px 18px 16px; border: 1px solid var(--gd-line); border-radius: 12px; background: var(--gd-panel); color: var(--gd-text) !important; }
.gd-card:hover { border-color: var(--gd-gold-deep); }
.gd-card img { width: 150px; height: 150px; object-fit: contain; margin-bottom: 8px; }
.gd-card h2 { font-size: 1.15rem; margin: 4px 0 6px; color: var(--gd-gold); }
.gd-card p { font-size: 0.95rem; line-height: 1.45; color: var(--gd-muted); margin: 0 0 10px; }
.gd-card-more { margin-top: auto; font-size: 0.92rem; font-weight: 700; color: var(--gd-gold); }

/* more games strip */
.gd-more { max-width: 1040px; margin: 24px auto 0; }
.gd-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gd-more-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none;
  border: 1px solid var(--gd-line); border-radius: 10px; background: var(--gd-panel); color: var(--gd-text) !important;
  font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.gd-more-card:hover { border-color: var(--gd-gold-deep); }
.gd-more-card img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }

/* footer */
.gd-foot { display: flex; flex-wrap: wrap; gap: 32px 56px; padding: 40px 32px 28px; border-top: 1px solid var(--gd-line); background: #150F0C; }
.gd-foot-col { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.gd-foot-wide { flex: 1 1 380px; }
.gd-foot-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 20px; }
.gd-foot-h { font-weight: 700; color: var(--gd-text); margin-bottom: 4px; }
.gd-foot a { text-decoration: none; font-size: 0.95rem; color: var(--gd-muted); }
.gd-foot a:hover { color: var(--gd-text); }
.gd-foot-copy { flex: 1 1 100%; font-size: 0.85rem; color: var(--gd-muted); }

@media (max-width: 720px) {
  body.gd { font-size: 17px; }
  .gd-top { padding: 10px 16px; }
  .gd-brand span { display: none; }
  .gd-nav { gap: 14px; }
  .gd-nav a { font-size: 0.92rem; }
  .gd-main { padding: 16px 16px 40px; }
  .gd h1 { font-size: 1.7rem; }
  .gd h2 { font-size: 1.25rem; margin-top: 32px; }
  .gd-hero { flex-direction: column; text-align: center; gap: 12px; }
  .gd-crest { width: 150px; height: 150px; }
  .gd-facts, .gd-cta-row { justify-content: center; }
  .gd-foot { padding: 28px 16px 20px; }
  .gd .lounge-howto-cards img { width: 50px; }
}

/* ── "About" block under the daily puzzles (play/_puzzle_about) ── */
.gd-about { background: var(--gd-bg); color: var(--gd-text); border-top: 1px solid var(--gd-line);
  font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.6;
  text-align: left; position: relative; z-index: 1; }
.gd-about-inner { max-width: 760px; margin: 0 auto; padding: 12px 20px 56px; }
.gd-about h2 { font-family: Georgia, 'Times New Roman', serif; letter-spacing: 0.2px; }
.gd-about .gd-more-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.gd-about b { color: #FFF4DC; }

/* ── Hand calculator (ecrib-calculator.js) ── */
.calc { border: 1px solid var(--gd-line); border-radius: 12px; background: var(--gd-panel); padding: 18px 16px; margin: 8px 0 12px; }
.calc button { font: inherit; cursor: pointer; }
.calc-slots { display: flex; justify-content: center; align-items: flex-start; gap: 8px; }
.calc-slotwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.calc-slot { width: 68px; height: 96px; padding: 0; border-radius: 7px; border: 2px dashed #5a4737; background: #1A1411; }
.calc-slot.full { border-style: solid; border-color: transparent; background: none; }
.calc-slot img { width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.calc-slot-cut { border-color: var(--gd-gold-deep); }
.calc-slotcap { font-size: 0.78rem; color: var(--gd-muted); }
.calc-plus { align-self: center; padding-bottom: 20px; font-size: 1.4rem; color: var(--gd-muted); }
.calc-bar { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.calc-modes { display: inline-flex; border: 1px solid var(--gd-line); border-radius: 8px; overflow: hidden; }
.calc-mode { padding: 6px 16px; border: 0; background: transparent; color: var(--gd-muted); font-weight: 700; }
.calc-mode.on { background: var(--gd-gold); color: #1A1411; }
.calc-act { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--gd-line); background: transparent; color: var(--gd-gold); font-weight: 600; }
.calc-act:hover { border-color: var(--gd-gold-deep); }
.calc-out { min-height: 64px; margin: 8px 0 14px; }
.calc-hint { text-align: center; color: var(--gd-muted); padding: 18px 0; }
.calc-total { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.calc-total b { font-size: 3rem; line-height: 1; color: var(--gd-gold); font-variant-numeric: tabular-nums; }
.calc-total span { font-size: 1.1rem; color: var(--gd-muted); }
.calc-lines { list-style: none; padding: 0; margin: 12px auto 8px; max-width: 460px; }
.calc-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 2px; border-bottom: 1px solid var(--gd-line); }
.calc-pts { font-weight: 700; color: var(--gd-gold); font-variant-numeric: tabular-nums; }
.calc-lbl { font-weight: 700; color: var(--gd-text); white-space: nowrap; }
.calc-lbl.red { color: #F08A7B; }
.calc-say, .calc-zero, .calc-note { text-align: center; font-size: 0.95rem; color: var(--gd-muted); margin-top: 6px; }
.calc-zero { padding: 8px 0; }
.calc-grid { display: flex; flex-direction: column; gap: 5px; }
.calc-row { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.calc-chip { padding: 7px 0; min-height: 40px; border-radius: 6px; border: 1px solid #cdbfa9; background: #F3EADB; color: #1A1411;
  font-weight: 700; font-size: 0.95rem; line-height: 1.1; }
.calc-chip i { font-style: normal; display: block; font-size: 0.9em; }
.calc-chip.red { color: #B3261E; }
.calc-chip:hover { background: #fff; }
.calc-chip.on { background: var(--gd-gold); border-color: var(--gd-gold); box-shadow: inset 0 0 0 2px #1A1411; }
.calc-full .calc-chip:not(.on) { opacity: 0.45; cursor: default; }
@media (max-width: 520px) {
  .calc { padding: 14px 8px; }
  .calc-slots { gap: 5px; }
  .calc-slot { width: 54px; height: 76px; }
  .calc-row { gap: 2px; }
  .calc-chip { font-size: 0.8rem; padding: 5px 0; min-height: 38px; border-radius: 4px; }
}

/* ── /cribbage_calculator ── */
.gd-calc-page h1 { margin-top: 6px; }
.gd-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 0.98rem; }
.gd-table th, .gd-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gd-line); vertical-align: top; }
.gd-table thead th { color: var(--gd-muted); font-weight: 600; font-size: 0.88rem; }
.gd-table tbody th { color: var(--gd-text); font-weight: 700; white-space: nowrap; }
.gd-table td { color: var(--gd-muted); }
.gd-table .num { text-align: right; color: var(--gd-gold); font-weight: 700; white-space: nowrap; }