/* Poker Bot Android — custom CSS (light mode, orange+green accents) */
:root{
  --bg:#fffaf3;
  --surface:#ffffff;
  --ink:#1a1410;
  --muted:#5b5147;
  --line:#ead9c4;
  --orange:#ea580c;
  --orange-soft:#fff1e6;
  --green:#16a34a;
  --green-soft:#e9f8ee;
  --score-bg:#fef3c7; /* tan, NOT amber-500 */
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
html{color-scheme: only light}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.6;
  font-size:17px;
}
img,svg,table,pre{max-width:100%}
a{color:var(--orange);text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-0.01em;font-size:18px;color:var(--ink);text-decoration:none}
.brand-glyph{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#ea580c,#fb923c);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:14px}
nav.top{display:flex;align-items:center;gap:18px}
nav.top a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
nav.top a:hover{color:var(--orange)}
.cta{
  display:inline-block;background:var(--orange);color:#fff !important;
  padding:9px 16px;border-radius:10px;font-weight:700;text-decoration:none;
  box-shadow:0 1px 0 #c2410c, 0 6px 14px -8px rgba(234,88,12,.6);
  font-size:14.5px;letter-spacing:.01em;
}
.cta:hover{background:#c2410c}
.cta-lg{padding:13px 22px;font-size:16px;border-radius:12px}

/* hero */
.hero{padding:46px 0 32px}
.hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.08;letter-spacing:-0.02em;margin:0 0 14px;font-weight:800;overflow-wrap:anywhere}
.hero .lede{font-size:19px;color:var(--muted);max-width:62ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center}
.hero-img{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(120,53,15,.35)}
.score-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--score-bg);color:#7c2d12;border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* sections */
section{padding:34px 0}
h2{font-size:clamp(22px,3vw,30px);margin:0 0 12px;letter-spacing:-0.015em;overflow-wrap:anywhere}
h3{font-size:19px;margin:18px 0 6px;letter-spacing:-0.01em}
p{margin:8px 0 14px}
.prose p,.prose li{font-size:17px}
.prose code{background:#fff1e6;color:#7c2d12;padding:1px 6px;border-radius:5px;font-size:.92em}
.prose pre{background:#1a1410;color:#fef3c7;padding:14px 16px;border-radius:10px;overflow-x:auto}
.prose pre code{background:transparent;color:inherit;padding:0}

/* phone mockup */
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}
.phone{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 12px 16px;box-shadow:0 14px 30px -22px rgba(20,16,10,.18)}
.phone-screen{aspect-ratio: 9 / 17;border-radius:14px;background:linear-gradient(180deg,#0c1410,#142d22);position:relative;overflow:hidden;border:1px solid #0a1b13}
.phone-screen.lite{background:linear-gradient(180deg,#fff7ed,#ffe4cc);border-color:#fed7aa}
.phone-screen.tan{background:linear-gradient(180deg,#fffaf3,#f5e9d6);border-color:#eddcc1}
.phone-title{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.fake-row{position:absolute;left:8%;right:8%;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.lite .fake-row{background:rgba(124,45,18,.18)}
.tan .fake-row{background:rgba(124,45,18,.22)}
.fake-pill{position:absolute;left:8%;height:18px;border-radius:9px;background:#16a34a}
.fake-card{position:absolute;left:8%;right:8%;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.lite .fake-card{background:rgba(255,255,255,.85);border-color:#fed7aa}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.feat .ic{width:34px;height:34px;border-radius:9px;background:var(--green-soft);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:8px}
.feat h3{margin:4px 0 4px}
.feat p{font-size:15px;color:var(--muted);margin:0}

/* compatibility table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.compat{width:100%;border-collapse:collapse;font-size:15px}
.compat th,.compat td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.compat thead th{background:var(--orange-soft);color:#7c2d12;font-weight:700;font-size:14px}
.compat tbody tr:last-child td{border-bottom:none}
.compat td .yes{color:var(--green);font-weight:700}
.compat td .no{color:#b91c1c;font-weight:700}
.compat td .meh{color:#a16207;font-weight:700}

/* verdict block */
.verdict{background:linear-gradient(135deg,#fff7ed,#ecfdf5);border:1px solid #fde4c7;border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.verdict .big{font-size:42px;font-weight:900;letter-spacing:-0.03em;color:var(--orange);line-height:1}
.verdict .out{font-size:14px;color:var(--muted)}
.verdict h3{margin:0 0 4px}

/* callout */
.callout{background:#fff1e6;border-left:4px solid var(--orange);padding:14px 16px;border-radius:8px;margin:18px 0;font-size:16px}
.callout.green{background:#e9f8ee;border-left-color:var(--green)}

/* footer */
footer{margin-top:50px;padding:30px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
footer a{color:var(--muted)}

/* breadcrumbs */
.crumb{font-size:13.5px;color:var(--muted);margin:18px 0 6px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--orange)}

/* re-assert light in dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#fffaf3;
    --surface:#ffffff;
    --ink:#1a1410;
    --muted:#5b5147;
    --line:#ead9c4;
  }
  body{background:var(--bg);color:var(--ink)}
  .feat,.tbl-wrap,.phone{background:#fff;color:var(--ink)}
  table.compat thead th{background:var(--orange-soft);color:#7c2d12}
}

/* mobile */
@media (max-width: 820px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .phone{padding:8px 6px 10px;border-radius:16px}
}
@media (max-width: 620px){
  .wrap{padding:0 18px}
  .bar{flex-wrap:wrap;gap:10px}
  nav.top{order:3;width:100%;justify-content:flex-start;gap:14px;flex-wrap:wrap}
  .features{grid-template-columns:minmax(0,1fr)}
  .verdict{flex-direction:column;align-items:flex-start}
  .cta{width:100%;text-align:center}
  nav.top .cta{width:100%}
  .hero{padding:30px 0 18px}
  .phones{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phone-title{font-size:11px}
}