/* TH99 — fix layer: mobile buttons, card density, contrast, FAQ, rhythm */

:root{--text-muted:#b9ae96;--text-legal:#8c8371;--gold-fill:linear-gradient(145deg,#c69d42,#ffe8a0,#bd9034)}

/* ---------- Readability / contrast ---------- */
.card-note,.article-grid p,.about p:not(.eyebrow),.faq details p,.features small{color:var(--text-muted)}
.faq summary{color:#e2cf9d}
.caption,.cta-note,.disclosure{color:var(--text-legal)}
footer>p{color:var(--text-legal);font-size:11px;line-height:1.9}
footer>p a{color:#d3b571}
.eyebrow{color:#b79a52}

/* ---------- Hero ---------- */
.sky-hero h2{font-size:clamp(30px,4.2vw,52px);line-height:1.25;max-width:16ch}
.sky-hero div>span{font-size:16px;line-height:1.8}
.sky-hero .disclosure{display:block;max-width:56ch;margin:0;padding-top:16px;font-size:13px;line-height:1.75}
.sky-hero .hero-link{display:inline-block;margin-top:14px;font-size:13px;color:#dcbd6c;text-decoration:underline;text-underline-offset:3px}

/* ---------- Feature strip rhythm ---------- */
.features>div{padding:28px 0}
.features a{padding:12px 24px}
.features small{font-size:13px;line-height:1.75}
.features b{font-size:13px}

/* ---------- Category cards: shorter, denser ---------- */
.game-card .icon-cover{aspect-ratio:16/10;min-height:132px}
.category-icon{width:56px;height:56px;color:#120e08;filter:none}
.game-card .icon-cover:before{width:88px;height:88px;background:var(--gold-fill);border-color:#f0d58c;box-shadow:0 6px 18px #0005}
.game-card:hover .category-icon{color:#120e08}
.game-card h3{font-size:14px;padding:12px 12px 4px;text-align:left;background:none;border:0;color:#ecd9a7}
.card-note{display:block;padding:0 12px 14px;font-size:14px;line-height:1.75;text-align:left}

/* ---------- About block ---------- */
.about{align-items:center}
.about-brand{aspect-ratio:16/10;justify-content:center;padding:clamp(18px,3vw,34px)}
.about-brand img{max-height:100%;object-fit:contain}

/* ---------- FAQ accordion ---------- */
.faq details{padding:0;border-bottom:1px solid rgba(212,175,55,.22)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 14px;font-size:14px;line-height:1.7;list-style:none;border-radius:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:#e9c76e;font-size:21px;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:'\2212'}
.faq summary:hover{background:#d4af371a;color:#fff0c4}
.faq details p{padding:0 14px 18px;font-size:14px}

/* ---------- Mid CTA row (text link instead of a duplicate pill) ---------- */
.cta-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:18px 20px;border:1px solid #5d4822;border-radius:12px;background:linear-gradient(120deg,#1b1509,#0c0a05)}
.cta-mid__title{font-size:15px;color:#e3c783}
.cta-mid .disclosure{margin-top:6px}
.cta-mid .text-link{margin-top:0;font-size:14px;text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
footer .btn-login{min-height:40px}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  header{gap:8px;padding:5px 12px}
  header .logo,header .logo img{width:132px;min-width:0}
  header .logo img{max-height:56px}
  .header-actions{gap:6px;flex-shrink:0}
  .header-actions .btn-login,.header-actions .btn-register{padding:8px 10px;font-size:11px;min-height:36px}

  /* buttons fit the screen and sit centred */
  .sky-hero>div{width:100%;padding:34px 6% 26px}
  .sky-hero h2{max-width:none}
  .sky-hero .disclosure,.cta-note{font-size:12px}
  .cta-row{flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;margin-left:auto;margin-right:auto}
  .cta-row>a{display:flex;width:100%;max-width:100%;justify-content:center;text-align:center;white-space:normal;padding:12px 14px;font-size:14px;min-height:46px}
  .cta-mid{flex-direction:column;align-items:stretch;text-align:center}
  .cta-mid .text-link{align-self:center}
  footer{justify-content:center;text-align:center}
  footer nav{justify-content:center;flex-wrap:wrap}
  footer>.btn-login,footer>.btn-register{width:100%;max-width:420px;margin:0 auto;justify-content:center}
  .page-title>a.btn-register{width:100%;max-width:420px;margin:0 auto;justify-content:center}

  /* cards */
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .game-card .icon-cover{aspect-ratio:16/10;min-height:0}
  .category-icon{width:44px;height:44px}
  .game-card .icon-cover:before{width:70px;height:70px}
  .game-card h3{font-size:13px;padding:10px 10px 4px;min-height:0;display:block;place-items:initial}
  .card-note{padding:0 10px 12px;font-size:13px;line-height:1.75}

  /* bottom tab bar */
  .mobile-bottom{grid-template-columns:repeat(4,minmax(0,1fr));padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px))}
  .mobile-bottom a{min-height:56px;gap:3px;padding:4px 2px}
  .mobile-bottom svg{width:20px;height:20px}
  .mobile-bottom span{font-size:12px;line-height:1.3}
  footer{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}

  .features small{font-size:12px;line-height:1.7}
  .features a{padding:12px 12px}
  .about-brand{aspect-ratio:auto}
}

@media(max-width:480px){
  .announcement{display:none}
  .sky-hero h2{font-size:27px}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:360px){
  header .logo,header .logo img{width:112px}
  .header-actions .btn-login,.header-actions .btn-register{padding:7px 8px;font-size:10px}
}

/* =====================================================================
   TH99 — CTA clarity, hero hierarchy, card density, contrast pass
   (loaded last: overrides every earlier layer)
   ===================================================================== */
:root{--text-muted:#c2ae86;--text-legal:#9c8a66;--gold-hair:rgba(201,169,110,.2);--surface-1:#15110a}

/* ---------- Readability / contrast ---------- */
.card-note,.article-grid p,.about p:not(.eyebrow),.faq details p,.features small,
.caption,.cta-note,.disclosure,.contact-grid p,.guide .lead{color:var(--text-muted)}
footer>p{color:var(--text-muted);font-size:12px;line-height:1.95}
footer>p a{color:#f0d08f}
footer .site-meta,.page-meta{color:var(--text-legal)}
.faq summary{color:#e8d6a6}

/* ---------- Hero: bigger headline, solid ground, no copy on the photo ---------- */
.sky-hero>div{position:relative;width:min(100%,640px);max-width:640px;padding:52px 6% 46px 5%;
  background:linear-gradient(90deg,rgba(8,6,3,.94) 0%,rgba(8,6,3,.88) 58%,rgba(8,6,3,0) 100%);text-shadow:none}
.sky-hero h2{font-size:clamp(40px,4.5vw,64px);line-height:1.25;max-width:16ch}
.sky-hero div>span{display:block;margin-top:12px;font-size:16px;line-height:1.8;color:#d5c7a4}
.sky-hero .cta-row{align-items:center;gap:12px;margin-top:24px}

/* primary / secondary CTA sizing — one clear first action */
.sky-hero .btn-register,.cta-band .btn-register{min-height:54px;padding:15px 28px;font-size:15px}
.sky-hero .btn-login,.cta-band .btn-login{min-height:54px;padding:15px 24px;font-size:14px}
.btn-register:focus-visible,.btn-login:focus-visible{outline:2px solid #ffe6a6;outline-offset:3px}

/* affiliate / 18+ marker next to the primary button */
.badge-affiliate{display:inline-flex;align-items:center;font-size:12px;line-height:1.5;white-space:nowrap;
  color:#f0d49a;border:1px solid rgba(201,169,110,.45);border-radius:999px;padding:4px 12px}

/* disclosure block sits on its own surface, never on the artwork */
.hero-note{max-width:60ch;margin-top:20px;padding:14px 16px;border:1px solid var(--gold-hair);
  border-radius:10px;background:var(--surface-1)}
.hero-note .disclosure{margin:0;padding:0;max-width:none;font-size:13px;line-height:1.7;color:#c9b68c}
.hero-note .hero-link{display:inline-block;margin-top:10px;font-size:13px;color:#f0d08f;
  text-decoration:underline;text-underline-offset:3px}
.hero-note .hero-link:hover{color:#fff1c6}

/* ---------- CTA hierarchy: gold pill only in hero + closing band ---------- */
.header-actions .btn-register{background:none;border:1px solid #9b8244;color:#f0d49a;box-shadow:none}
.header-actions .btn-register:hover{background:#2a2619;border-color:#e3c377;color:#fff4ce;filter:none}
footer>.btn-login,footer .footer-cta{background:none;border:1px solid #9b8244;color:#f0d49a;box-shadow:none}
footer>.btn-login:hover,footer .footer-cta:hover{background:#2a2619;border-color:#e3c377;color:#fff4ce}

/* ---------- Feature strip rhythm ---------- */
.features>div{padding:40px 0}
.features a{padding:16px 24px;border-right:1px solid var(--gold-hair)}
.features a:last-child{border-right:0}
.features b{font-size:14px}
.features small{font-size:13px;line-height:1.75;margin-top:7px}

/* ---------- Category cards: horizontal rows, half the height ---------- */
.game-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.game-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"top top" "icon title" "icon note";column-gap:16px;align-items:start;
  padding:0 18px 44px;transform:none}
.game-card:hover{transform:none;border-color:#e4bd64}
.game-card .card-top{grid-area:top;position:relative;z-index:2;margin:0 -18px 14px;padding:8px 16px}
.game-card .favorite{position:relative;z-index:3}
.game-card .icon-cover{grid-area:icon;position:static;display:grid;place-items:center;width:48px;height:48px;
  min-height:0;aspect-ratio:auto;background:none;border:0;border-radius:0;overflow:visible;align-self:start}
.game-card .icon-cover:before{display:none}
.game-card .icon-cover:after{content:'';position:absolute;inset:0;border-radius:13px;z-index:1}
.category-icon{width:40px;height:40px;padding:0;color:#e8c572;filter:none;transform:none}
.game-card:hover .category-icon{color:#fff1c6;transform:none}
.game-card h3{grid-area:title;display:block;min-height:0;margin:0 0 6px;padding:0;background:none;border:0;
  text-align:left;font-size:15px;line-height:1.6;color:#efdcae}
.card-note{grid-area:note;display:block;padding:0;font-size:13.5px;line-height:1.75;text-align:left}
/* the card-wide link gets a readable label instead of a hover-only overlay */
.game-card .icon-cover>span{position:absolute;left:auto;right:18px;bottom:14px;z-index:2;opacity:1;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#f0d08f;font-size:13px;
  text-align:right;text-decoration:underline;text-underline-offset:3px}
.game-card:hover .icon-cover>span{color:#fff1c6}

/* ---------- About block ---------- */
.about{grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.about-brand{aspect-ratio:16/10;padding:16px;gap:10px}
.about-brand img{width:100%;max-width:300px;max-height:62%;object-fit:contain}
.about-brand small{margin-top:4px}

/* ---------- FAQ: real rows with background + hover ---------- */
.faq details{background:var(--surface-1);border:1px solid rgba(201,169,110,.18);border-radius:10px;
  margin-bottom:12px;padding:0}
.faq details:hover,.faq details[open]{border-color:#c9a96e}
.faq summary{padding:16px 20px}
.faq summary:hover{background:#d4af3714}
.faq details p{padding:0 20px 18px;max-width:72ch}

/* ---------- Mid CTA ---------- */
.cta-mid .text-link{color:#f0d08f}

@media(max-width:760px){
  .sky-hero>div{width:100%;max-width:none;padding:34px 6% 30px;
    background:linear-gradient(180deg,rgba(8,6,3,.88) 0%,rgba(8,6,3,.96) 45%,rgba(8,6,3,.98) 100%)}
  .sky-hero h2{font-size:clamp(28px,7.4vw,38px);max-width:none}
  .sky-hero div>span{font-size:14px}
  .sky-hero .cta-row{gap:10px}
  .sky-hero .btn-register,.sky-hero .btn-login,.cta-band .btn-register,.cta-band .btn-login{min-height:48px;font-size:14px;padding:13px 16px}
  .badge-affiliate{align-self:center;white-space:normal;text-align:center}
  .hero-note{max-width:none}

  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .game-card{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:0 14px 40px}
  .game-card .card-top{margin:0 -14px 12px;padding:7px 12px}
  .game-card .icon-cover{width:44px;height:44px}
  .category-icon{width:36px;height:36px}
  .game-card h3{font-size:14px}
  .card-note{font-size:13px}
  .game-card .icon-cover>span{right:14px;bottom:12px;font-size:12px}

  .about{grid-template-columns:1fr;gap:22px}
  .about-brand{aspect-ratio:16/9;padding:14px}
  .features a{padding:14px 14px;border-right:0}
}

@media(max-width:480px){
  .sky-hero h2{font-size:32px}
  .game-grid{grid-template-columns:1fr;gap:10px}
  .game-card{padding-bottom:42px}
  .card-note,.features small{font-size:14px;line-height:1.75}
  .game-card h3{font-size:15px}
  .mobile-bottom span{font-size:12px;line-height:1.4}
  .mobile-bottom a{min-height:56px}
}