/* ============================================================
   Technozaibi - app-game.css
   Shared layout for app and game detail pages.
   Used by: /apps/mobiles/*.html, /games/mobiles/*.html,
            /apps/tools/*.html, /games/pc/*.html, etc.
   Loaded AFTER main.css.
   ============================================================ */

/* ---------- App hero ---------- */
.app-hero{padding:clamp(2.4rem,5vw,4rem) 0 1rem}
.app-hero-grid{display:grid;grid-template-columns:280px 1fr;gap:2.4rem;align-items:center}
.app-icon{width:200px;height:200px;border-radius:38px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.app-badges{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.app-badge{font-size:.72rem;font-weight:700;padding:.35rem .7rem;border-radius:999px;background:var(--surface2);border:1px solid var(--border2);color:var(--muted)}
.app-hero h1{font-size:var(--fs-hero);margin-bottom:.4rem}
.app-hero .lead{color:var(--muted);font-size:1.05rem;margin:1rem 0 1.6rem}
.app-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-bottom:1.6rem}
.app-meta-item{display:flex;flex-direction:column;gap:.15rem}
.app-meta-item b{font-size:1.05rem}
.app-meta-item span{font-size:.82rem;color:var(--muted)}
.app-rating{display:flex;align-items:center;gap:.5rem}
.stars{color:#f5b301;letter-spacing:.05em}
.app-downloads{display:flex;flex-wrap:wrap;gap:.8rem}
.btn-store{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.2rem;border-radius:14px;background:#0b1020;color:#fff;border:1px solid var(--border2);transition:transform .18s ease,box-shadow .18s ease}
.btn-store:hover{transform:translateY(-2px);color:#fff;box-shadow:var(--shadow-lg)}
.btn-store small{display:block;font-size:.7rem;opacity:.8;line-height:1}
.btn-store b{display:block;font-size:.95rem;line-height:1.2}
.btn-store.btn-lg{padding:.9rem 1.4rem}
.btn-store.btn-amazon{background:#232f3e}

/* ---------- Screenshots ---------- */
.screens-scroll{display:flex;gap:1.2rem;overflow-x:auto;padding:.5rem .25rem 1.2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--brand) var(--border);align-items:flex-start}
.screens-scroll::-webkit-scrollbar{height:6px}
.screens-scroll::-webkit-scrollbar-track{background:var(--border);border-radius:10px}
.screens-scroll::-webkit-scrollbar-thumb{background:var(--grad);border-radius:10px}
.screens-scroll img{flex:0 0 auto;width:220px;height:440px;object-fit:cover;border-radius:20px;border:1px solid var(--border2);box-shadow:var(--shadow);background:var(--surface2);scroll-snap-align:start;transition:transform .2s ease,box-shadow .2s ease;aspect-ratio:220/440}
.screens-scroll img:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-lg)}
@media (max-width:480px){.screens-scroll img{width:170px;height:340px;border-radius:16px}.screens-scroll{gap:1rem}}

/* ---------- About + Info card ---------- */
.about-grid{display:grid;grid-template-columns:1fr 340px;gap:2.4rem;align-items:start}
.about-copy h2{font-size:var(--fs-h2);margin:.3rem 0 1rem}
.about-copy h3{margin:1.6rem 0 .6rem;font-size:1.15rem}
.about-copy p{color:var(--muted);margin-bottom:.9rem}
.about-copy ul{list-style:none;display:grid;gap:.45rem}
.about-copy li{padding-left:1.4rem;position:relative;color:var(--muted);font-size:.95rem}
.about-copy li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:900}
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;box-shadow:var(--shadow);position:sticky;top:calc(var(--nav-h) + 1rem)}
.info-card h4{margin-bottom:1rem;font-size:1.1rem}
.info-card dl{display:grid;gap:.55rem}
.info-row{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;padding-bottom:.55rem;border-bottom:1px solid var(--border)}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-row dt{color:var(--muted)}
.info-row dd{font-weight:600;text-align:right;word-break:break-word}

/* ---------- Feature grid ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.feature-card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:var(--shadow-lg)}
.f-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:var(--grad);color:#fff;box-shadow:var(--glow);margin-bottom:1rem}
.feature-card h3{font-size:1.1rem;margin-bottom:.4rem}
.feature-card p{color:var(--muted);font-size:.9rem}

/* ---------- Steps grid ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.6rem;text-align:center}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:900;margin:0 auto 1rem;box-shadow:var(--glow)}
.step-card h3{font-size:1.1rem;margin-bottom:.4rem}
.step-card p{color:var(--muted);font-size:.9rem}

/* ---------- Comparison table ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem}
.cmp thead th{background:var(--surface2);font-weight:800}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td.yes{color:#16a34a;font-weight:600}
.cmp td.no{color:#dc2626;font-weight:600}
.cmp td.maybe{color:#d97706;font-weight:600}

/* ---------- Skins / tech chips ---------- */
.skins-grid{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.skin-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;background:var(--surface);border:1px solid var(--border2);font-size:.88rem;font-weight:600}
.skin-chip .dot{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px var(--surface2)}

/* ---------- FAQ (extends .faq from main.css) ---------- */
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:.7rem;transition:border-color .2s ease}
.faq details[open]{border-color:var(--border2)}
.faq summary{cursor:pointer;font-weight:700;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--brand);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.7rem;color:var(--muted);font-size:.92rem}

/* ---------- Final CTA ---------- */
.final-cta{background:var(--grad);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem);text-align:center;color:#fff;box-shadow:var(--shadow-lg)}
.final-cta h2{font-size:var(--fs-h2);margin-bottom:.6rem;color:#fff}
.final-cta p{opacity:.92;margin-bottom:1.6rem}
.final-cta .app-downloads{justify-content:center}
.final-cta .btn-store{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.final-cta .btn-store:hover{background:rgba(255,255,255,.25)}

/* ---------- Responsive ---------- */
@media (max-width:1060px){
  .app-hero-grid{grid-template-columns:1fr;text-align:center}
  .app-hero-grid>div:first-child{margin-inline:auto}
  .app-meta,.app-downloads{justify-content:center}
  .about-grid{grid-template-columns:1fr}
  .info-card{position:static}
}