/* =============================================================
   IJ7 Game: Core UI system
   Domain: https://www.ij7game.com/
   Loaded on every page. Page-specific rules go in a sibling
   file (e.g. css/home.css) loaded after this one.
   ============================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  --ink:        #0d0405;
  --surface-0:  #170609;
  --surface-1:  #1f090d;
  --surface-2:  #2a0e13;
  --surface-3:  #3a141a;
  --line:       #431720;
  --line-soft:  #5c1f28;

  --brand:      #e0212c;
  --brand-lt:   #ff5a63;
  --brand-dk:   #900e16;
  --go:         #f0b429;
  --go-lt:      #ffd166;
  --go-dk:      #c78a00;
  --gold:       #ffd166;

  --text:       #f9ecec;
  --text-mid:   #cfa3a7;
  --text-dim:   #8f6468;
  --white:      #ffffff;
  --danger:     #ff6b6b;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  --sh-sm: 0 2px 10px rgba(8, 2, 2, .55);
  --sh-md: 0 12px 34px rgba(8, 2, 2, .6);
  --sh-lg: 0 26px 70px rgba(8, 2, 2, .7);
  --glow-brand: 0 10px 34px rgba(224, 33, 44, .35);
  --glow-go: 0 10px 34px rgba(240, 180, 41, .3);

  --ease: .22s cubic-bezier(.4, 0, .2, 1);
  --spring: .5s cubic-bezier(.16, 1, .3, 1);
  --head: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --container: 1140px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--body);
  background-color: var(--ink);
  background-image:
    radial-gradient(900px 620px at 88% -6%, rgba(224, 33, 44, .16), transparent 62%),
    radial-gradient(760px 560px at 4% 8%, rgba(240, 180, 41, .08), transparent 60%);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* overflow-x: hidden here would implicitly turn overflow-y: auto on both
   elements (CSS spec), creating nested scroll containers that break
   position: sticky on .site-header in some browsers, notably Safari.
   overflow: clip does not establish a scroll container, so it blocks
   horizontal scroll without that side effect. */
html, body { overflow-x: clip; overflow-y: visible; max-width: 100vw; }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--brand-lt); text-decoration: none; }
a:hover { color: var(--brand); }
strong { color: var(--white); }
:focus-visible { outline: 2px solid var(--brand-lt); outline-offset: 2px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.18; color: var(--white); font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }
p  { color: var(--text-mid); }
.lede { font-size: clamp(1.02rem, .98rem + .4vw, 1.2rem); color: var(--text); max-width: 62ch; }
.eyebrow {
  display: inline-block; font-family: var(--head); font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-lt);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8vw, 96px); }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }
.section-head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 40px); }
.section-head p { margin-top: 10px; }
.stack > * + * { margin-top: 1rem; }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--text-mid); }
.prose li + li { margin-top: .4rem; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--head); font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .85em 1.4em; border-radius: var(--r-pill); border: 1px solid var(--line-soft);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--white); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: .6em 1em; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-brand { --btn-bg: var(--brand); --btn-fg: #04160e; border-color: transparent; box-shadow: var(--glow-brand); }
.btn-go { --btn-bg: var(--go); --btn-fg: #241500; border-color: transparent; box-shadow: var(--glow-go); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--brand); color: #04160e; font-weight: 700;
  padding: 10px 16px; border-radius: var(--r-sm); transition: top var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--surface-0); border-bottom: 1px solid var(--line);
  font-size: .8rem; color: var(--text-dim);
  padding-top: var(--safe-t);
}
.topbar-inner { display: flex; gap: 6px; align-items: center; justify-content: center; padding-block: 7px; }
.topbar-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(224, 33, 44, .6); animation: pulse-dot 2.4s ease-out infinite; }
.topbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-text strong { color: var(--text); }
.topbar-text em { color: var(--gold); font-style: normal; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--ease), background var(--ease), border-color var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-md); background: color-mix(in srgb, var(--ink) 96%, transparent); border-color: var(--line-soft); }
.nav-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--head); font-weight: 800; color: var(--white); min-width: 0; }
.brand:hover { color: var(--white); }
.brand-mark { border-radius: 8px; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(224, 33, 44, .5)); }
.brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { color: var(--brand-lt); }
.nav { margin-left: auto; min-width: 0; }
.nav-list { display: flex; gap: 2px; list-style: none; }
.nav-list a {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  font-family: var(--head); font-weight: 600; font-size: .87rem; color: var(--text-mid);
  white-space: nowrap; transition: color var(--ease), background var(--ease);
}
.nav-list a:hover { color: var(--white); background: var(--surface-2); }
.nav-list a.is-active { color: var(--brand-lt); background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; flex-shrink: 0; }

.nav-cta { position: relative; overflow: hidden; }
.nav-cta .btn-icon { display: none; }

.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); background: var(--surface-2); cursor: pointer;
  padding: 0; place-items: center; flex-shrink: 0; transition: background var(--ease), border-color var(--ease);
}
.nav-toggle:hover { background: var(--surface-3); }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 2px auto; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle.is-open { border-color: var(--brand); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 150; display: none; }
.drawer:not([hidden]) { display: block; }
.drawer-scrim {
  position: absolute; inset: 0; background: rgba(6, 1, 2, .68);
  backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--spring);
}
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 320px);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
  border-left: 1px solid var(--line-soft);
  padding: calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b));
  display: flex; flex-direction: column; gap: 16px;
  transform: translateX(100%); transition: transform var(--spring); box-shadow: var(--sh-lg);
}
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-close {
  align-self: flex-end; width: 40px; height: 40px; min-height: 40px; font-size: 1.5rem; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  color: var(--text); cursor: pointer; transition: background var(--ease), transform var(--ease);
}
.drawer-close:hover { background: var(--surface-3); transform: rotate(90deg); }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  padding: 14px 10px; min-height: 44px; display: flex; align-items: center;
  font-family: var(--head); font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line);
  transition: color var(--ease), padding-left var(--ease);
}
.drawer-links a:hover { color: var(--brand-lt); padding-left: 14px; }
.drawer-links a.is-active { color: var(--brand-lt); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-top: 20px; font-size: .82rem; color: var(--text-dim); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-soft); }
.breadcrumb a { color: var(--text-mid); }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: clamp(16px, 3vw, 28px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px);
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--line-soft); box-shadow: var(--sh-md); }
.card h3 { margin-bottom: 8px; }
.card-icon {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px;
  border-radius: var(--r-sm); background: var(--surface-3); color: var(--brand-lt); font-size: 1.2rem;
}

/* ---------- FAQ accordion ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 18px 4px; font-family: var(--head); font-weight: 600; font-size: 1.02rem; color: var(--white);
}
.faq-q::after { content: "+"; font-size: 1.3rem; color: var(--brand-lt); transition: transform var(--ease); }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--ease); }
.faq-item.open .faq-a { max-height: 480px; }
.faq-a p { padding: 0 4px 18px; }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--line-soft); border-left: 3px solid var(--go);
  background: var(--surface-1); border-radius: var(--r-md); padding: 16px 18px;
  font-size: .92rem;
}
.callout strong { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-0); border-top: 1px solid var(--line); margin-top: 64px; padding-top: 56px; padding-bottom: 92px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-brand .brand { margin-bottom: 14px; }
.footer-note { font-size: .88rem; }
.footer-age { font-size: .82rem; color: var(--text-dim); margin-top: 10px; }
.footer-h { font-family: var(--head); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--text-mid); font-size: .9rem; }
.footer-col a:hover { color: var(--brand-lt); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 40px; padding-block: 22px; }
.footer-bottom p { font-size: .82rem; color: var(--text-dim); }

/* ---------- Fixed download bar ---------- */
/* Bottom-center, bigger than a normal button for thumb-friendly prominence.
   Opposite corner from .scroll-top so the two never overlap. Hidden by
   default; main.js reveals it once the hero (which has its own large
   download button) is scrolled out of view, so the two are never stacked
   on screen together. On pages with no hero, main.js shows it right away. */
/* .btn.fab-download (not just .fab-download): the later `.btn { position:
   relative }` rule (for the shine-sweep effect) has equal specificity to a
   bare .fab-download and comes after it in the file, so it was silently
   winning the cascade and overriding position:fixed back to relative;
   the button was rendering inline in normal document flow the whole time,
   never actually fixed to the viewport. The compound selector here has
   higher specificity, so it wins regardless of source order. */
.btn.fab-download {
  position: fixed; left: 50%; bottom: calc(16px + var(--safe-b));
  transform: translateX(-50%) translateY(14px); z-index: 95; white-space: nowrap;
  padding: 1em 2em; font-size: 1.06rem;
  box-shadow: var(--glow-brand), var(--sh-lg);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}
.btn.fab-download.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* ---------- Scroll-to-top ---------- */
.scroll-top {
  position: fixed; right: 18px; bottom: calc(18px + var(--safe-b)); z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px) scale(.9); transition: var(--ease);
  box-shadow: var(--sh-sm);
}
.scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.scroll-top:hover { background: var(--brand); border-color: var(--brand); color: var(--white); box-shadow: var(--glow-brand); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--spring), transform .6s var(--spring); }
.reveal.visible { opacity: 1; transform: none; }

/* Staggered variant: put .reveal-group on a grid/flex container and
   .reveal on each of its direct children for a cascading entrance. */
.reveal-group .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--spring), transform .6s var(--spring); }
.reveal-group.visible .reveal { opacity: 1; transform: none; }
.reveal-group.visible .reveal:nth-child(1) { transition-delay: .05s; }
.reveal-group.visible .reveal:nth-child(2) { transition-delay: .12s; }
.reveal-group.visible .reveal:nth-child(3) { transition-delay: .19s; }
.reveal-group.visible .reveal:nth-child(4) { transition-delay: .26s; }
.reveal-group.visible .reveal:nth-child(5) { transition-delay: .33s; }
.reveal-group.visible .reveal:nth-child(6) { transition-delay: .4s; }
.reveal-group.visible .reveal:nth-child(n+7) { transition-delay: .46s; }

/* ---------- Animation layer ---------- */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(224, 33, 44, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(224, 33, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 33, 44, 0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(224, 33, 44, .45)); }
  50%      { filter: drop-shadow(0 0 16px rgba(224, 33, 44, .8)); }
}
@keyframes shine-sweep {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%) skewX(-18deg); }
}
.animate-in { animation: fade-up .7s var(--spring) both; }
.animate-in--1 { animation-delay: .05s; }
.animate-in--2 { animation-delay: .15s; }
.animate-in--3 { animation-delay: .25s; }
.animate-in--4 { animation-delay: .35s; }

.btn { position: relative; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 62%);
  transform: translateX(-130%) skewX(-18deg); pointer-events: none;
}
.btn-brand:hover::before, .btn-go:hover::before { animation: shine-sweep 1.1s ease; }
.brand-mark { animation: glow-pulse 5s ease-in-out infinite; }

.card { overflow: hidden; }
.card-icon { transition: transform var(--ease), box-shadow var(--ease); }
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); box-shadow: var(--glow-brand); }

@media (prefers-reduced-motion: reduce) {
  .brand-mark, .topbar-dot { animation: none; }
  .btn::before { display: none; }
  .animate-in { animation: none; opacity: 1; transform: none; }
}

/* ---------- Related reading ---------- */
.related-links { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.related-links h2 { font-size: 1.05rem; margin-bottom: 12px; }
.related-links ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.related-links a { font-weight: 600; }

/* ---------- Logo-on-dark ---------- */
/* Brand renders are glossy art on solid black. screen blend drops the
   black to transparent against our near-black page background instead of
   showing a visible rectangle. Only for logo art with a true black backdrop;
   never apply to photos or app screenshots. */
.logo-on-dark { mix-blend-mode: screen; }

/* ---------- Icon system ---------- */
/* Every icon on the site is one of the symbols in /public/icons/icons.svg,
   referenced as <svg class="icon"><use href="...#i-name"></use></svg>.
   No emoji, no font icon webfont: plain inline SVG, styled once here. */
.icon {
  width: 1.15em; height: 1.15em; flex-shrink: 0; display: inline-block;
  vertical-align: -0.18em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon .dot { fill: currentColor; stroke: none; }

.card-icon .icon { width: 22px; height: 22px; }
.cat-chip .icon { width: 26px; height: 26px; color: var(--brand-lt); }
.take-card h3 .icon { width: 22px; height: 22px; }
.take-good h3 .icon { color: var(--brand-lt); }
.take-watch h3 .icon { color: var(--go); }
.scroll-top .icon { width: 20px; height: 20px; }
.drawer-close .icon { width: 20px; height: 20px; }
.btn .icon { width: 1.1em; height: 1.1em; }

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Below 780px the full inline nav-list gives way to the drawer.
   The primary "Get App" CTA stays visible: an app/APK site's #1
   conversion action should never disappear on mobile. */
@media (max-width: 780px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  /* .nav carried the margin-left:auto that pinned nav-actions to the right.
     With it hidden, nav-inner needs its own rule so brand/CTA don't collapse together. */
  .nav-inner { justify-content: space-between; }
}

/* Below 400px the CTA label collapses to an icon so it never
   crowds the hamburger or wraps the brand name. */
@media (max-width: 400px) {
  .nav-cta { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
  .nav-cta .btn-label { display: none; }
  .nav-cta .btn-icon { display: block; font-size: 1.05rem; }
}

@media (max-width: 560px) {
  .topbar-inner { font-size: .72rem; gap: 8px; }
  .nav-inner { gap: 10px; }
}

/* Keep the centered fixed download bar clear of .scroll-top (bottom-right)
   on narrow phones, where a full-size button could reach far enough right
   to touch it. */
@media (max-width: 400px) {
  .btn.fab-download { padding: .8em 1.5em; font-size: .95rem; }
}