/* Jailhouse Poker marketing + legal site / felt-and-brass design system */
:root {
  --bg: #090f0c;
  --panel: #101b15;
  --panel2: #15241b;
  --felt: #16543a;
  --felt-light: #207247;
  --text: #f5f0e4;
  --muted: #b7c0b7;
  --muted2: #91a397;
  --gold: #d7b876;
  --gold-light: #f0d9a6;
  --red: #c22f34;
  --line: rgba(215,184,118,.22);
  --line-soft: rgba(215,184,118,.11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse 760px 570px at 50% 150px, rgba(27,104,67,.48), transparent 76%),
    radial-gradient(ellipse 680px 700px at 95% 48%, rgba(132,104,45,.09), transparent 75%),
    radial-gradient(ellipse 600px 650px at 0% 82%, rgba(25,90,63,.24), transparent 74%),
    linear-gradient(180deg, #0d2117 0%, #09140f 46%, #08110d 100%);
}
a { color: var(--gold-light); }
a:hover { color: #fff2d6; }
a:focus-visible, button:focus-visible { outline: 3px solid #f3d79e; outline-offset: 4px; }
.wrap { width: min(1090px, calc(100% - 36px)); margin: 0 auto; }
nav { display:flex; align-items:center; justify-content:space-between; min-height:78px; border-bottom:1px solid var(--line); gap:20px; }
.brand { color:var(--text); text-decoration:none; font-weight:850; letter-spacing:.065em; text-transform:uppercase; font-size:.9rem; white-space:nowrap; }
.brand span { color:var(--gold); }
.nav-links { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:17px; }
.nav-link { color:#c7d0c6; text-decoration:none; font-weight:650; font-size:.87rem; }
.nav-link:hover { color:var(--gold-light); }
.nav-play { color:#0b1711; border:1px solid #d0af70; background:var(--gold); padding:9px 14px; border-radius:8px; font-weight:800; }
.nav-play:hover { color:#0b1711; background:var(--gold-light); }

.home-main { text-align:center; padding:44px 0 22px; }
.hero { padding-bottom:48px; }
.logo { width:min(380px, 78vw); height:auto; display:block; margin:0 auto 23px; filter:drop-shadow(0 18px 26px rgba(0,0,0,.45)); }
.eyebrow, .section-kicker { display:inline-flex; align-items:center; justify-content:center; color:var(--gold-light); font-size:.75rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow { padding:9px 16px; border-radius:999px; border:1px solid rgba(215,184,118,.36); background:rgba(215,184,118,.08); }
h1 { font-size:clamp(2.2rem,5.5vw,4.6rem); line-height:1.05; margin:21px auto 15px; max-width:920px; letter-spacing:-.047em; }
h1 em { font-style:normal; color:var(--gold); }
h2,h3 { letter-spacing:-.025em; }
.lead { max-width:750px; margin:0 auto; color:var(--muted); font-size:clamp(1rem,2.1vw,1.21rem); line-height:1.65; }
.platform-strip { margin:28px auto 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.platform-pill { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); padding:11px 15px; border-radius:13px; background:linear-gradient(160deg,rgba(28,49,35,.82),rgba(17,29,22,.95)); text-align:left; min-width:166px; }
.platform-pill span { font-size:.94rem; font-weight:820; color:#f4efe2; line-height:1.15; }
.platform-pill small { display:block; font-size:.69rem; margin-top:4px; color:var(--muted); font-weight:600; }
.brand-icon { width:25px; height:29px; object-fit:contain; flex:none; filter:invert(1); }
.android-icon { filter:invert(75%) sepia(15%) saturate(1163%) hue-rotate(91deg) brightness(95%); }
.html-icon { filter:invert(54%) sepia(83%) saturate(2701%) hue-rotate(333deg) brightness(101%); }
.actions { display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; margin:30px 0 12px; }
.btn { text-decoration:none; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; padding:14px 24px; border-radius:12px; font-weight:850; border:1px solid var(--line); transition:transform .15s ease, border-color .15s ease, background .15s ease; }
.btn:hover,.playstore-badge:hover { transform:translateY(-2px); }
.btn.primary { background:linear-gradient(180deg,#237649,#125337); border:1px solid #b8a366; box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 25px rgba(0,0,0,.24); color:#fff; }
.browser-action { min-width:min(100%,360px); }
.action-main { font-size:.95rem; letter-spacing:.015em; }
.action-sub { font-size:.73rem; font-weight:600; color:#d7e9d9; margin-top:5px; }
.playstore-badge { text-decoration:none; border:1px solid #8d8b85; background:#080908; border-radius:10px; display:inline-flex; align-items:center; min-height:70px; min-width:218px; padding:10px 19px; gap:13px; color:#fff; transition:transform .15s ease, border-color .15s ease; }
.playstore-badge:hover { border-color:#e5e1d6; }
.playstore-badge .playstore-icon { width:30px; height:34px; filter:invert(1); flex:none; }
.playstore-badge span { display:flex; flex-direction:column; align-items:flex-start; line-height:1.08; }
.playstore-badge small { font-size:.65rem; letter-spacing:.12em; font-weight:600; }
.playstore-badge strong { font-size:1.33rem; letter-spacing:-.02em; }
.hero-note { margin:14px auto 0; color:#a9b5ab; font-size:.83rem; }

.iphone-feature { position:relative; text-align:left; max-width:930px; margin:4px auto 74px; padding:30px 34px 28px; border:1px solid rgba(215,184,118,.46); border-radius:21px; background:linear-gradient(130deg,rgba(30,76,54,.85),rgba(16,37,26,.97) 53%,rgba(14,27,21,.98)); box-shadow:0 20px 50px rgba(0,0,0,.27), inset 0 1px rgba(241,211,151,.12); overflow:hidden; }
.iphone-feature:after { content:""; position:absolute; width:230px; height:230px; border:1px solid rgba(215,184,118,.10); border-radius:50%; top:-140px; right:-95px; pointer-events:none; }
.iphone-header { display:flex; align-items:center; gap:18px; }
.iphone-emblem { display:flex; align-items:center; justify-content:center; width:65px; height:65px; border:1px solid var(--line); border-radius:16px; background:rgba(5,14,9,.42); flex:none; }
.iphone-emblem img { width:34px; height:38px; filter:invert(1); }
.iphone-feature h2 { font-size:clamp(1.58rem,3.5vw,2.46rem); line-height:1.17; margin:9px 0 0; }
.iphone-feature h2 span { color:var(--gold-light); }
.iphone-intro { margin:18px 0 22px; max-width:750px; color:#d6e3d5; line-height:1.62; font-size:1rem; }
.install-steps { padding:0; margin:0 0 20px; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.install-steps li { display:flex; align-items:flex-start; gap:12px; padding:16px 13px; border:1px solid rgba(215,184,118,.2); background:rgba(6,17,11,.42); border-radius:13px; }
.step-no { color:var(--gold-light); font-weight:900; font-size:.8rem; background:rgba(215,184,118,.10); padding:6px; border-radius:6px; }
.install-steps strong { display:block; font-size:.9rem; color:#f4f0e6; margin-bottom:4px; }
.install-steps small { display:block; font-size:.8rem; color:#c1d1c1; line-height:1.42; }
.iphone-action { background:var(--gold); border-color:var(--gold-light); color:#102217; flex-direction:row; gap:12px; min-height:47px; font-size:.89rem; }
.iphone-action:hover { background:var(--gold-light); color:#09150e; }
.beta-disclaimer { margin:16px 0 0; max-width:795px; font-size:.82rem; line-height:1.5; color:#b9c8ba; }
.beta-disclaimer strong { color:#efe2bb; }

.games-section { padding:0 0 58px; scroll-margin-top:20px; }
.games-section h2 { margin:13px 0 12px; font-size:clamp(1.8rem,4.4vw,3.25rem); }
.games-section h2 span { color:var(--gold); }
.section-lead { max-width:710px; margin:0 auto 26px; color:var(--muted); font-size:1rem; line-height:1.6; }
.games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; text-align:left; }
.game-tile { min-height:168px; position:relative; padding:20px 19px; border-radius:15px; border:1px solid var(--line); background:linear-gradient(155deg,rgba(25,85,52,.90),rgba(13,37,24,.98)); overflow:hidden; }
.game-tile:after { position:absolute; content:""; inset:auto -20px -44px auto; width:135px; height:135px; border:1px solid rgba(215,184,118,.08); border-radius:50%; pointer-events:none; }
.game-mark { color:var(--gold); display:block; margin-bottom:13px; line-height:1; font-size:1.3rem; }
.game-group { color:#dfc991; letter-spacing:.10em; font-size:.66rem; font-weight:850; }
.game-tile h3 { margin:6px 0 6px; font-size:1.37rem; color:#f5f1e7; }
.game-tile p { color:#c3d0c1; margin:0; font-size:.85rem; line-height:1.5; }
.more-tile { background:linear-gradient(135deg,rgba(64,55,30,.8),rgba(23,28,18,.96)); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:0 auto 51px; text-align:left; }
.card { padding:24px 22px; border-radius:15px; border:1px solid var(--line-soft); background:rgba(21,34,26,.58); }
.card strong { display:block; margin:0 0 9px; color:var(--gold-light); font-size:1.01rem; }
.card p { margin:0; color:var(--muted); font-size:.91rem; line-height:1.58; }

/* Legal pages use the same felt, brass, charcoal, buttons and typography. */
.legal-main { padding:50px 0 50px; }
.legal-header { max-width:820px; margin:0 auto 29px; text-align:center; }
.legal-header h1 { margin:15px 0 13px; font-size:clamp(2rem,5vw,3.5rem); }
.legal-header p { margin:0; color:var(--muted); line-height:1.65; }
.legal-meta { margin-top:12px !important; font-size:.92rem; }
.legal-card { width:min(860px,100%); margin:0 auto; border:1px solid var(--line); border-radius:18px; padding:clamp(22px,4vw,42px); background:linear-gradient(150deg,rgba(24,48,32,.77),rgba(11,24,17,.94)); box-shadow:0 22px 50px rgba(0,0,0,.22); }
.legal-card h2 { margin:33px 0 12px; color:var(--gold-light); font-size:1.32rem; }
.legal-card h2:first-child { margin-top:0; }
.legal-card h3 { margin:23px 0 9px; color:#f2e6c9; font-size:1.05rem; }
.legal-card p,.legal-card li { color:#d8dfd4; line-height:1.76; }
.legal-card ul,.legal-card ol { padding-left:1.35rem; }
.legal-card li+li { margin-top:6px; }
.legal-card a { text-decoration-color:rgba(215,184,118,.55); text-underline-offset:3px; }
.notice { border:1px solid rgba(215,184,118,.38); background:rgba(215,184,118,.08); border-radius:14px; padding:16px 18px; margin:22px 0; }
.notice strong { color:var(--gold-light); }
.contact-box { border:1px solid var(--line); background:rgba(215,184,118,.055); border-radius:14px; padding:18px; margin-top:18px; }

.divider { height:1px; background:var(--line); margin-bottom:26px; }
footer { padding:0 0 32px; display:flex; flex-wrap:wrap; gap:16px 20px; justify-content:space-between; color:#a1ada2; font-size:.82rem; }
.footer-links { display:flex; gap:14px; flex-wrap:wrap; }
footer a { color:#c6d5c7; text-decoration:none; }
footer a:hover { color:var(--gold-light); }
.icon-attribution { flex-basis:100%; font-size:.70rem; color:#86968b; }
.icon-attribution a { color:#afbaa6; }

@media (max-width:840px) {
  nav { align-items:flex-start; padding:18px 0; }
  .nav-links { gap:12px; }
  .install-steps { grid-template-columns:1fr; gap:10px; }
  .iphone-feature { padding:24px; }
  .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid { grid-template-columns:1fr; }
  .card { text-align:center; }
}
@media (max-width:600px) {
  .wrap { width:calc(100% - 30px); }
  nav { flex-direction:column; align-items:center; gap:14px; }
  .nav-links { justify-content:center; gap:12px; }
  .nav-link { font-size:.79rem; }
  .home-main { padding-top:28px; }
  .hero { padding-bottom:34px; }
  .logo { width:min(282px,80vw); margin-bottom:19px; }
  .eyebrow { font-size:.66rem; letter-spacing:.085em; padding:8px 11px; }
  h1 { margin-top:17px; }
  .lead { line-height:1.55; }
  .platform-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:22px; }
  .platform-pill { min-width:0; flex-direction:column; gap:7px; padding:12px 4px 10px; text-align:center; }
  .platform-pill span { font-size:.81rem; }
  .platform-pill small { font-size:.64rem; }
  .brand-icon { height:25px; width:26px; }
  .actions { flex-direction:column; margin-top:22px; gap:10px; }
  .browser-action { width:100%; }
  .playstore-badge { width:100%; max-width:365px; justify-content:center; }
  .iphone-feature { padding:20px 16px; margin-bottom:52px; border-radius:16px; }
  .iphone-header { align-items:flex-start; gap:12px; }
  .iphone-emblem { width:48px; height:48px; border-radius:11px; }
  .iphone-emblem img { width:26px; height:30px; }
  .iphone-feature h2 { font-size:1.57rem; }
  .iphone-intro { font-size:.92rem; }
  .iphone-action { width:100%; }
  .games-grid { gap:9px; }
  .game-tile { min-height:156px; padding:16px 13px; }
  .game-tile h3 { font-size:1.17rem; }
  .games-section { padding-bottom:42px; }
  .legal-main { padding-top:32px; }
  .legal-card { padding:21px 17px; }
  footer { text-align:center; justify-content:center; }
  .footer-links { justify-content:center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .btn,.playstore-badge { transition:none; } }

/* Local icon size guarantees and layout resilience. */
.platform-pill > img.brand-icon { display:block; width:26px; height:29px; max-width:26px; max-height:29px; flex:0 0 26px; }
.iphone-emblem > img { display:block; width:34px; height:38px; max-width:34px; max-height:38px; }
.playstore-badge > img.playstore-icon { display:block; width:30px; height:34px; max-width:30px; max-height:34px; flex:0 0 30px; }
.install-steps li > span:last-child { display:block; flex:1; min-width:0; }
@media (max-width:600px) {
  .platform-pill > img.brand-icon { width:26px; height:25px; max-height:25px; }
  .iphone-emblem > img { width:26px; height:30px; max-width:26px; max-height:30px; }
}


/* 2026-10-25: Layout refinement for compact, easy-to-use mobile navigation. */
nav > .nav-play { flex: none; white-space: nowrap; }
.nav-links { min-width: 0; }
.nav-link, .btn, .playstore-badge { -webkit-tap-highlight-color: rgba(215,184,118,.17); }
@media (hover:hover) {
  .nav-play:hover { transform: translateY(-1px); }
}
@media (max-width:840px) and (min-width:601px) {
  nav { gap:14px; }
  .nav-links { gap:12px; }
}
@media (max-width:600px) {
  /* Brand + primary action stay on the first row; auxiliary links below. */
  nav { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; align-items:center; min-height:0; padding:15px 0 12px; }
  nav .brand { grid-column:1; grid-row:1; justify-self:start; margin:0; font-size:.82rem; letter-spacing:.04em; white-space:nowrap; }
  nav > .nav-play { grid-column:2; grid-row:1; justify-self:end; font-size:.80rem; padding:9px 14px; }
  nav .nav-links { grid-column:1/-1; grid-row:2; width:100%; display:flex; align-items:center; justify-content:center; gap:10px 18px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--line-soft); }
  nav .nav-links .nav-link { font-size:.77rem; }
  .home-main { padding-top:24px; }
  .hero { padding-bottom:36px; }
  .logo { width:min(262px,77vw); margin-bottom:18px; }
  .lead { max-width:34rem; }
  .iphone-feature { box-shadow:0 14px 32px rgba(0,0,0,.19); }
}
@media (max-width:355px) {
  nav .brand { font-size:.75rem; }
  nav > .nav-play { padding:8px 10px; font-size:.74rem; }
  nav .nav-links { gap:9px 13px; }
  nav .nav-links .nav-link { font-size:.74rem; }
}