/* Rummy Sweety - global styles */
:root{
  --maroon:#5a0f10;      /* base maroon (matches image edge) */
  --maroon-dark:#3d0808;
  --maroon-deep:#2a0505;
  --gold:#f2c94c;
  --gold-2:#e6a919;
  --cream:#fff7e0;
  --text:#f7e8c9;
  --muted:#d9b98a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--maroon);color:var(--text);font-family:'Segoe UI',Roboto,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* ------ HERO IMAGE + INVISIBLE OVERLAY BUTTONS ------ */
.hero{position:relative;width:100%;max-width:720px;margin:0 auto;background:var(--maroon-deep)}
.hero img{width:100%;height:auto;display:block}
/*
  Overlay buttons sit on top of the DOWNLOAD APP buttons drawn inside the image.
  Coordinates are % of the image (image is 720 x 1480). Adjust here if needed.
*/
.hero .tap{position:absolute;display:block;background:transparent;border:0;cursor:pointer;z-index:5}
.hero .tap-top{ left:30%; top:6%;  width:68%; height:8%;  }
.hero .tap-bottom{ left:1%; top:69%; width:98%; height:12%; }
/* uncomment next line while positioning to see the hit-boxes */
/* .hero .tap{background:rgba(0,255,0,.35)} */

/* ------ CONTENT ------ */
.wrap{max-width:820px;margin:0 auto;padding:32px 20px 60px}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;color:var(--gold);line-height:1.25}
h1{font-size:2rem;margin:.2em 0 .6em}
h2{font-size:1.5rem;margin:1.6em 0 .5em;border-bottom:1px solid rgba(242,201,76,.25);padding-bottom:.3em}
h3{font-size:1.15rem;margin:1.2em 0 .4em;color:var(--cream)}
p,li{font-size:1.02rem;color:var(--text)}
ul,ol{padding-left:1.3em;margin:.4em 0 1em}
li{margin:.35em 0}
strong{color:var(--cream)}

.cta{display:inline-block;margin:24px 0;padding:16px 34px;background:linear-gradient(180deg,#ffd966,#c98a10);
  color:#3a1a00;font-weight:800;border-radius:10px;font-size:1.1rem;letter-spacing:.5px;
  box-shadow:0 4px 0 #6a3d00, 0 8px 18px rgba(0,0,0,.35)}
.cta:hover{text-decoration:none;transform:translateY(-1px)}

.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0}
.info-grid div{background:rgba(0,0,0,.25);border:1px solid rgba(242,201,76,.25);border-radius:10px;padding:14px}
.info-grid span{display:block;color:var(--gold);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}
.info-grid b{font-size:1.15rem;color:var(--cream)}

details{background:rgba(0,0,0,.22);border:1px solid rgba(242,201,76,.2);border-radius:8px;padding:12px 16px;margin:10px 0}
details summary{cursor:pointer;color:var(--gold);font-weight:600}
details[open] summary{margin-bottom:8px}

/* ------ FOOTER ------ */
footer{background:var(--maroon-deep);border-top:2px solid var(--gold-2);padding:34px 20px;margin-top:20px}
.foot-wrap{max-width:820px;margin:0 auto;text-align:center}
.foot-links{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;margin:12px 0 18px}
.foot-links a{color:var(--muted)}
.copy{color:var(--muted);font-size:.9rem}

.topbar{background:var(--maroon-deep);text-align:center;padding:10px}
.topbar a{color:var(--gold);font-weight:600;margin:0 10px;font-size:.95rem}

@media (max-width:520px){
  h1{font-size:1.55rem}
  h2{font-size:1.25rem}
  .wrap{padding:22px 16px 40px}
}