@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

:root { --ink:#f6f0e4; --paper:#e9e1d2; --gold:#e4b55d; --green:#123526; --deep:#07130d; --red:#bd4049; --muted:#abb3aa; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { width:100%; overflow-x:hidden; }
body { margin:0; color:var(--ink); background:var(--deep); font-family:'DM Sans',sans-serif; }
a { color:inherit; }
.grain { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main { width:100%; max-width:920px; margin:auto; overflow:hidden; background:#10291e; box-shadow:0 0 90px #0009; }
.hero { position:relative; min-height:620px; overflow:hidden; background:radial-gradient(circle at 72% 48%,#276147 0,#133a29 30%,#091b12 70%); }
nav { position:relative; z-index:4; display:flex; align-items:center; justify-content:space-between; height:70px; padding:0 25px; border-bottom:1px solid #ffffff10; color:#aeb8af; font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.back { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#ffffff0b; text-decoration:none; font-size:19px; }
.play { padding:9px 14px; color:#15231a; border-radius:8px; background:var(--gold); text-decoration:none; font-weight:700; }
.hero-content { position:relative; z-index:3; width:57%; padding:100px 0 70px 7%; }
.eyebrow { margin:0 0 8px; color:var(--gold); text-transform:uppercase; letter-spacing:.19em; font-size:10px; font-weight:700; }
h1,h2,h3 { font-family:'Playfair Display',serif; }
h1 { margin:0; font-size:clamp(55px,8vw,79px); line-height:.93; letter-spacing:-.045em; }
h1 em { color:var(--gold); font-weight:700; }
.hero-content>p:not(.eyebrow) { max-width:420px; margin:26px 0; color:#b3bcb4; line-height:1.7; font-size:14px; }
.start-reading { display:inline-flex; align-items:center; gap:18px; padding-bottom:7px; border-bottom:1px solid #e4b55d66; color:#e7dfd1; text-decoration:none; font-size:12px; font-weight:600; }
.start-reading span { color:var(--gold); }
.hero-cards { position:absolute; right:8%; top:210px; width:280px; height:280px; }
.card { position:absolute; display:block; width:126px; height:176px; border:0; border-radius:12px; object-fit:cover; background:#f4eee2; box-shadow:0 24px 45px #0008; transform:rotate(-17deg); }
.card:nth-child(2) { left:75px; top:19px; z-index:2; transform:rotate(-1deg); }
.card:nth-child(3) { left:150px; top:4px; transform:rotate(15deg); }
.red { color:var(--red) !important; }
.black { color:#18201b !important; }
.content { background:#f0e9dd; color:#1d2a22; }
.rule-section { padding:78px 7%; border-bottom:1px solid #17271c18; }
.objective { display:grid; grid-template-columns:82px 1fr; align-items:start; background:#e7dece; }
.number { color:#a98a51; font-family:'Playfair Display'; font-size:18px; font-weight:700; }
.rule-section h2 { margin:0 0 13px; font-size:clamp(29px,5vw,43px); letter-spacing:-.025em; }
.rule-section p:not(.eyebrow) { max-width:650px; margin:0; color:#58635c; line-height:1.7; font-size:14px; }
.section-heading { display:grid; grid-template-columns:82px 1fr; margin-bottom:42px; }
.turn-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:18px; align-items:center; }
.turn-flow article { min-height:245px; padding:25px 21px; border:1px solid #20322617; border-radius:16px; background:#f7f2e9; box-shadow:0 12px 28px #3341360c; }
.turn-flow article small { display:block; margin-top:19px; color:#a98a51; text-transform:uppercase; letter-spacing:.13em; font-size:8px; font-weight:700; }
.turn-flow h3,.combo-grid h3,.invalid-example h3 { margin:5px 0 8px; font-size:20px; }
.turn-flow article p:not(.eyebrow),.combo-grid article p:not(.eyebrow),.invalid-example p:not(.eyebrow) { font-size:12px; line-height:1.55; }
.step-icon { display:grid; place-items:center; width:54px; height:72px; color:#e2b55f; border:0; border-radius:7px; overflow:hidden; background:#842e37; box-shadow:0 6px 13px #0003; font-family:'Playfair Display'; font-size:24px; }
.step-icon img { width:100%; height:100%; object-fit:cover; }
.hand-icon { color:#fff; background:#1c543b; }
.discard-icon { color:var(--red); background:#f8f3e9; }
.flow-arrow { color:#b4a78f; font-style:normal; }
.note { display:grid; grid-template-columns:auto 1fr; gap:12px; max-width:680px; margin:27px auto 0; padding:14px 17px; color:#425248; border-left:3px solid var(--gold); background:#e5dbc8; font-size:11px; line-height:1.5; }
.note b { color:#93702f; text-transform:uppercase; letter-spacing:.08em; font-size:9px; }
.combinations { background:#e9e0d1; }
.combo-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.combo-grid article,.invalid-example { padding:28px; border-radius:17px; background:#f5efe5; }
.mini-hand { display:flex; height:103px; margin-bottom:20px; }
.mini-card { width:64px; height:90px; margin-right:-8px; border:0; border-radius:7px; object-fit:cover; background:#fffaf0; box-shadow:-3px 5px 10px #0002; transform:rotate(calc((var(--n, 0)) * 2deg)); }
.valid,.invalid { color:#35805b; text-transform:uppercase; letter-spacing:.12em; font-size:8px; font-weight:700; }
.invalid { color:#ae444b; }
.invalid-example { display:grid; grid-template-columns:200px 1fr; align-items:center; margin-top:16px; }
.invalid-example .mini-hand { margin:0; }
.joker-section { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:50px; color:var(--ink); background:radial-gradient(circle at 15% 50%,#286047,#123525 58%,#0d2419); }
.joker-section p:not(.eyebrow) { color:#aeb8af; }
.joker-card { display:block; width:136px; height:190px; border:0; border-radius:12px; object-fit:cover; background:#f4eee2; box-shadow:0 22px 40px #0006; transform:rotate(-7deg); }
.joker-example { display:flex; align-items:center; gap:8px; margin-top:22px; }
.joker-example>img { display:block; width:42px; height:59px; border-radius:5px; object-fit:cover; background:#f5eee1; box-shadow:0 5px 10px #0004; }
.joker-example small { margin-left:5px; color:#d8b469; font-size:9px; }
.victory { text-align:center; }
.victory>p { margin-left:auto !important; margin-right:auto !important; }
.crown { display:grid; place-items:center; width:74px; height:74px; margin:0 auto 20px; color:#a87d35; border:1px solid #b590523f; border-radius:50%; font-size:36px; }
.winning-hand { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:28px; color:#223128; font-family:'Playfair Display'; font-weight:700; }
.winning-hand span { padding:10px 13px; border-radius:8px; background:#e1d6c3; }
.winning-hand i { color:#a68856; font-style:normal; }
.tips { padding:72px 7%; color:var(--ink); background:#0b2117; }
.tips h2 { margin:0 0 25px; font-size:37px; }
.tips ul { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; padding:0; list-style:none; counter-reset:tips; }
.tips li { padding:20px; color:#aeb8af; border:1px solid #ffffff10; border-radius:13px; font-size:12px; line-height:1.6; counter-increment:tips; }
.tips li::before { content:'0' counter(tips); display:block; margin-bottom:30px; color:var(--gold); font-family:'Playfair Display'; font-size:13px; }
.tips li b { display:block; color:#ece5d9; }
footer { display:flex; align-items:center; justify-content:space-between; padding:55px 7% max(55px,env(safe-area-inset-bottom)); background:#07130d; }
footer h2 { margin:0; font-size:31px; }
footer a { display:flex; align-items:center; gap:27px; padding:14px 20px; color:#142219; border-radius:9px; background:var(--gold); text-decoration:none; font-size:12px; font-weight:700; }
footer a span { font-size:19px; }

@media (max-width:700px) {
  .hero { min-height:650px; }
  .hero-content { width:100%; padding:72px 24px 200px; }
  .hero-cards { right:50%; top:auto; bottom:-58px; width:245px; height:210px; transform:translateX(50%) scale(.82); }
  .rule-section { padding:58px 23px; }
  .objective,.section-heading { grid-template-columns:48px 1fr; }
  .turn-flow { grid-template-columns:1fr; }
  .turn-flow article { display:grid; grid-template-columns:67px 1fr; grid-template-rows:auto auto 1fr; column-gap:15px; min-height:0; padding:20px; }
  .turn-flow .step-icon { grid-row:1/4; }
  .turn-flow article small { margin-top:2px; }
  .turn-flow h3 { margin:3px 0; }
  .flow-arrow { text-align:center; transform:rotate(90deg); }
  .combo-grid { grid-template-columns:1fr; }
  .invalid-example { grid-template-columns:1fr; }
  .joker-section { grid-template-columns:1fr; gap:37px; }
  .joker-card { margin:auto; }
  .winning-hand { flex-direction:column; gap:6px; }
  .tips ul { grid-template-columns:1fr; }
  .tips li::before { margin-bottom:10px; }
  footer { flex-direction:column; align-items:stretch; gap:25px; }
  footer a { justify-content:space-between; }
}