/* =========================================================
   Poker Clock – Website Styles
   ========================================================= */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --live:        #d80000;
  --live-dim:    #5a0000;
  --live-glow:   rgba(216, 0, 0, 0.35);
  --break:       #00a844;
  --break-dim:   #004d1e;
  --break-glow:  rgba(0, 168, 68, 0.30);
  --bg:          #080808;
  --surface:     #111111;
  --surface-2:   #1a1a1a;
  --border:      rgba(255,255,255,0.07);
  --text:        #f0f0f0;
  --text-muted:  #888;
  --text-faint:  #444;
  --radius:      14px;
  --radius-lg:   22px;
  --max-w:       1160px;
  --nav-h:       64px;
  --transition:  0.22s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Utility ---------- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--live);
  background: rgba(216,0,0,0.12);
  border: 1px solid rgba(216,0,0,0.25);
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--live);
  color: #fff;
  box-shadow: 0 4px 24px var(--live-glow);
}
.btn-primary:hover { box-shadow: 0 8px 32px var(--live-glow); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8,8,8,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nav-logo img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.nav-logo span em { color: var(--live); font-style: normal; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}

.nav-cta { margin-left: 8px; }

/* The App Store button in the nav is a .btn, but it also matches `.nav-links a`, which is
   the more specific selector (one class plus an element beats one class). That was winning
   twice over: the label rendered in muted grey instead of the button's own colour, and on
   hover the rule's translucent white background replaced the red fill entirely. These two
   rules are scoped tightly enough to win back.

   Black label on red reads better than white at this size, and hover keeps the fill,
   brightens the label, lifts and grows the button slightly, and adds a ring of glow.

   Heavier than the base .btn weight on purpose: the label is small (13px) and sits on a
   saturated red, where thin black strokes lose definition. Slight negative tracking stops
   the extra weight from crowding the letters together. */
.nav-cta .btn-primary {
  color: #000;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--live);
  transition: transform var(--transition), box-shadow var(--transition),
              color var(--transition), background var(--transition);
}
.nav-cta .btn-primary:hover {
  color: #fff;
  background: var(--live);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 0 4px rgba(216, 0, 0, 0.22), 0 10px 34px var(--live-glow);
}
.nav-cta .btn-primary:active {
  transform: translateY(0) scale(1.02);
}


/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + 60px) 24px 80px;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(ellipse, rgba(216,0,0,0.10) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(0,168,68,0.07) 0%, transparent 70%);
  border-radius: 50%;
}

/* Animated ring decorations */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  opacity: 0;
  animation: ring-expand 6s ease-out infinite;
}
.hero-ring:nth-child(1) { width: 400px; height: 400px; top: 50%; left: 50%; margin: -200px 0 0 -200px; border-color: rgba(216,0,0,0.12); animation-delay: 0s; }
.hero-ring:nth-child(2) { width: 600px; height: 600px; top: 50%; left: 50%; margin: -300px 0 0 -300px; border-color: rgba(216,0,0,0.07); animation-delay: 2s; }
.hero-ring:nth-child(3) { width: 800px; height: 800px; top: 50%; left: 50%; margin: -400px 0 0 -400px; border-color: rgba(216,0,0,0.04); animation-delay: 4s; }

@keyframes ring-expand {
  0%   { transform: scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.hero-content { position: relative; z-index: 1; max-width: 720px; }

.hero-title-img {
  display: block;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 28px;
  filter: drop-shadow(0 4px 28px rgba(216, 0, 0, 0.30));
}

.hero-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.hero-badge-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.hero-sub {
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.appstore-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.appstore-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,0.15); }
.appstore-btn svg { flex-shrink: 0; }
.appstore-btn-text { text-align: left; line-height: 1.3; }
.appstore-btn-text small { display: block; font-size: 10px; font-weight: 500; opacity: 0.6; letter-spacing: 0.04em; text-transform: uppercase; }

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  animation: scroll-hint 2.5s ease-in-out infinite;
}
.hero-scroll span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes scroll-hint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Section commons ---------- */
section { padding: 96px 0; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-header h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.section-header p {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- Features ---------- */
.features { background: var(--surface); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.feature-card {
  background: var(--surface-2);
  padding: 36px 32px;
  transition: background var(--transition);
}
.feature-card:hover { background: #202020; }

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}
.feature-icon.red  { background: rgba(216,0,0,0.12);  }
.feature-icon.green{ background: rgba(0,168,68,0.10); }
.feature-icon.blue { background: rgba(80,120,255,0.12);}
.feature-icon.gold { background: rgba(220,170,0,0.12); }
.feature-icon.gray { background: rgba(160,160,160,0.10); }
.feature-icon.teal { background: rgba(0,180,160,0.10); }

.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.feature-card p  { font-size: 14px; color: var(--text-muted); line-height: 1.65; }

/* ---------- Screenshots ---------- */
.screenshots-section { overflow: hidden; }

.screenshot-group {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* Standard 2-column row */
.screenshot-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.screenshot-item.reverse { direction: rtl; }
.screenshot-item.reverse > * { direction: ltr; }

/* iPhone row: text left (narrower), image right (wider landscape) */
.screenshot-item--iphone {
  grid-template-columns: 2fr 3fr;
  align-items: center;
}

.screenshot-info h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}
.screenshot-info p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

.screenshot-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.screenshot-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
}
.screenshot-bullets li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  margin-top: 6px;
  flex-shrink: 0;
}
.screenshot-bullets li.green::before { background: var(--break); }

.screenshot-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Shared mockup wrapper — images already include their device frames */
.device-mockup {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  filter:
    drop-shadow(0 24px 48px rgba(0, 0, 0, 0.80))
    drop-shadow(0 0 60px rgba(216, 0, 0, 0.10));
}
.device-mockup img {
  width: 100%;
  height: auto;
  display: block;
}

/* iPhone mockup — landscape, fills more of its column */
.device-mockup--iphone {
  max-width: 100%;
  filter:
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 50px rgba(216, 0, 0, 0.12));
}

/* Apple TV — CSS bezel since tv@2x.png is a raw screenshot */
.device-tv {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.device-tv-frame {
  background: #141414;
  border-radius: 14px;
  padding: 10px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 32px 64px rgba(0,0,0,0.70),
    0 0 80px rgba(0,168,68,0.08);
}
.device-tv-screen {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1440/833;
  background: #000;
}
.device-tv-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.device-tv-stand {
  width: 36px;
  height: 18px;
  background: linear-gradient(to bottom, #2a2a2a, #1e1e1e);
  border-radius: 0 0 3px 3px;
  margin: 0 auto;
}
.device-tv-base {
  width: 100px;
  height: 5px;
  background: #1e1e1e;
  border-radius: 0 0 3px 3px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.device-tv-requires {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.device-tv-requires img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.85;
}
.device-tv-requires span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ---------- Premium / CTA strip ---------- */
.premium-strip {
  background: linear-gradient(135deg, #0f0000 0%, #0a0a0a 50%, #000f04 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 0;
}

.premium-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}

.premium-copy h2 {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.premium-copy p { font-size: 16px; color: var(--text-muted); max-width: 480px; }

.premium-perks {
  display: flex;
  gap: 48px;
  margin-top: 32px;
}
.premium-perk {}
.premium-perk strong { display: block; font-size: 28px; font-weight: 800; color: var(--live); margin-bottom: 4px; }
.premium-perk span { font-size: 13px; color: var(--text-muted); }

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
  padding: calc(var(--nav-h) + 64px) 24px 56px;
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(28px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}
.page-hero p { font-size: 17px; color: var(--text-muted); max-width: 440px; margin: 0 auto; }

/* ---------- Contact page ---------- */
.contact-section { padding: 0 0 96px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}

.contact-info h2 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.contact-info p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 28px; }

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  color: var(--text-muted);
}
.contact-item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.contact-item-text strong { display: block; font-weight: 600; color: var(--text); margin-bottom: 2px; }

.contact-form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--text);
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-faint); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--live);
  box-shadow: 0 0 0 3px rgba(216,0,0,0.15);
}
.form-group textarea { resize: vertical; min-height: 130px; }

.form-success {
  display: none;
  text-align: center;
  padding: 32px;
}
.form-success.visible { display: block; }
.form-success .success-icon { font-size: 48px; margin-bottom: 16px; }
.form-success h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.form-success p { color: var(--text-muted); font-size: 15px; }

.form-note { font-size: 12px; color: var(--text-faint); margin-top: 8px; text-align: center; }
.form-note a { color: var(--text-muted); text-decoration: underline; }

/* ---------- Privacy page ---------- */
.privacy-section { padding: 0 0 96px; }

.privacy-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 56px;
  max-width: 420px;
}
.privacy-toc h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 14px; }
.privacy-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.privacy-toc ol li { counter-increment: toc; }
.privacy-toc ol li a { font-size: 14px; color: var(--text-muted); transition: color var(--transition); }
.privacy-toc ol li a::before { content: counter(toc) ". "; color: var(--live); font-weight: 600; }
.privacy-toc ol li a:hover { color: var(--text); }

.privacy-body { max-width: 760px; }
.privacy-body h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.privacy-body h2:first-child { border-top: none; margin-top: 0; }
.privacy-body p  { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
.privacy-body ul { margin: 0 0 16px 20px; }
.privacy-body ul li { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 6px; }
.privacy-body strong { color: var(--text); }
.privacy-meta { font-size: 13px; color: var(--text-faint); margin-bottom: 40px; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.footer-brand img { width: 24px; height: 24px; border-radius: 6px; }
.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}
.footer-links a { font-size: 13px; color: var(--text-faint); transition: color var(--transition); }
.footer-links a:hover { color: var(--text-muted); }
.footer-copy { font-size: 13px; color: var(--text-faint); }

/* ---------- Divider with glow ---------- */
.glow-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--live-glow), transparent);
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .screenshot-item,
  .screenshot-item.reverse,
  .screenshot-item--iphone { grid-template-columns: 1fr; direction: ltr; }
  .screenshot-item .screenshot-visual { order: -1; }
  .screenshot-item.reverse .screenshot-visual { order: -1; }
  .screenshot-item--iphone .screenshot-visual--iphone { order: -1; }
  .device-mockup { max-width: 440px; }
  .device-mockup--iphone { max-width: 100%; }
  .device-tv { max-width: 440px; }
  .premium-inner { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .premium-perks { gap: 32px; }
}

@media (max-width: 640px) {
  section { padding: 64px 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px 24px;
    gap: 4px;
  }
  .nav-links.open .nav-cta-mobile { display: flex; margin-top: 8px; }
  .features-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card { padding: 24px 20px; }
  .premium-perks { flex-direction: column; gap: 20px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- More page ---------- */
.more-section { padding: 0 0 96px; }

.more-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 60px;
  align-items: start;
}

.more-toc-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.more-body { max-width: 760px; }

.more-body h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.more-body h2:first-child { border-top: none; margin-top: 0; }

.more-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 10px;
}

.more-body p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.more-body ul {
  margin: 0 0 18px 20px;
}
.more-body ul li {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 6px;
}
.more-body strong { color: var(--text); }

/* Hand grid */
.hand-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.hand-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface-2);
  padding: 18px 24px;
  transition: background var(--transition);
}
.hand-card:hover { background: #202020; }
.hand-card--best { background: rgba(216,0,0,0.07); }
.hand-card--best:hover { background: rgba(216,0,0,0.11); }
.hand-card--last { background: var(--surface); }

.hand-rank {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-faint);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.hand-card--best .hand-rank { color: var(--live); }

.hand-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

.hand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.hand-example {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.card {
  font-size: 13px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", monospace;
  padding: 3px 7px;
  border-radius: 5px;
  background: #1e1e1e;
  border: 1px solid rgba(255,255,255,0.09);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.suit-spade  { color: #e8e8e8; }
.suit-club   { color: #c8c8c8; }
.suit-heart  { color: #e84040; }
.suit-diamond{ color: #e84040; }

.hand-card--best .card { border-color: rgba(216,0,0,0.25); }

.hand-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .more-layout {
    grid-template-columns: 1fr;
  }
  .more-toc-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .hand-card { padding: 14px 16px; gap: 12px; }
  .hand-desc { display: none; }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════
   SCREENSHOT GALLERIES
   Drop-in slots beneath each platform section. A slot with no image yet
   renders as a dashed placeholder naming what belongs there, so the layout
   is finished before the artwork is.
════════════════════════════════════════════ */
.shot-gallery {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  /* Sized by the shot rather than by the column count, so each screenshot stays the same
     size whether there are three of them or six, and adding one does not shrink the rest.
     At three across a full-width row they came out ~360px wide and ~740px tall, which
     towered over the landscape device mockup above. Capping the track keeps them subordinate
     to it. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 205px));
  justify-content: center;
}
.shot-gallery--wide { grid-template-columns: repeat(2, 1fr); }

.shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  /* The exact dimensions of the iPhone screenshots, so `object-fit: cover` has nothing to
     crop. If the images are replaced, change this to match them. */
  aspect-ratio: 1242 / 2540;
}
/* 4:3, matching the iPad screenshots (2752x2064). At 16/10 the shots are taller than the
   box and `object-fit: cover` crops the top and bottom off the interface. */
.shot--landscape { aspect-ratio: 4 / 3; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shot--empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.14);
}
.shot--empty .shot-label {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
  text-align: center;
  padding: 16px;
}
.shot--empty .shot-label strong {
  display: block;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .shot-gallery,
  .shot-gallery--wide { grid-template-columns: repeat(2, 1fr); }
}

/* Company link in the footer copyright. Inherits the muted footer colour so it
   reads as part of the line, and only picks up the accent on hover. */
.footer-brand-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color var(--transition), border-color var(--transition);
}
.footer-brand-link:hover {
  color: var(--text);
  border-bottom-color: var(--live);
}

/* Visually hidden but still read by crawlers and screen readers. Used for the home
   page <h1>, where the hero title is artwork and there would otherwise be no textual
   top-level heading on the site's most important page. Not display:none, which would
   remove it from the accessibility tree entirely. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}