/* RiaNest Studio page styles. System fonts only. Header, footer and color tokens live in css/nav.css. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--font); }
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.2em; }
h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* buttons and badges */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.5rem; border-radius: 999px; border: 2px solid transparent; font: 800 1rem var(--font); text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--yellow); color: var(--navy); box-shadow: 0 4px 0 #b98500; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #b98500; }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #b98500; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--surface); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: center; margin: 1.6rem 0 0; }
.badge { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--yellow); color: var(--navy); font-size: 0.85rem; font-weight: 800; }
.status-line { font-weight: 700; color: var(--muted); }
.eyebrow-dark { margin: 0 0 0.5rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--muted); }

/* hero */
.hero { padding: 3rem 0 2rem; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--grad-a), var(--grad-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 1.3rem 0 0; font-size: 1.25rem; color: var(--muted); max-width: 31rem; }
.stack { position: relative; display: block; min-height: 25rem; text-decoration: none; color: #fff; }
.poster { position: absolute; right: 0; top: 0; width: min(100%, 22rem); aspect-ratio: 3 / 4; padding: 1.4rem; border-radius: 32px; background: var(--g-bg); box-shadow: 0 30px 60px var(--g-shadow); transform: rotate(3deg); overflow: hidden; display: block; }
.poster b { display: block; font-size: 1.6rem; letter-spacing: -0.02em; }
.poster .gtag { display: block; color: var(--g-tag); font-weight: 800; }
.poster .phone { width: 78%; margin: 1.2rem auto 0; padding: 10px; border-radius: 28px; }
.chip { z-index: 2; position: absolute; left: 0; bottom: 3rem; padding: 0.8rem 1.1rem; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 14px 30px rgba(20, 32, 54, 0.18); font-weight: 800; transform: rotate(-4deg); }
.stack .fl { position: absolute; }
.stack .f1 { display: none; }
@media (min-width: 52rem) { .hero { padding: 4.5rem 0 3rem; } .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; } .stack { min-height: 30rem; } }
@media (max-width: 51.99rem) { .stack .f1, .stack .f5 { display: none; } .poster { position: relative; margin: 0 auto; transform: rotate(2deg); } .stack { min-height: 0; } .chip { left: 0.5rem; bottom: 1.5rem; } }
@media (prefers-reduced-motion: no-preference) { .poster { transition: transform 0.25s ease; } .stack:hover .poster { transform: rotate(1deg) translateY(-4px); } }

/* sections */
.section { padding: 3.5rem 0; }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.5rem; }
.sub { color: var(--muted); margin-bottom: 2rem; }
.section.alt { background: var(--surface); }
.section.alt h2 { margin-bottom: 1.5rem; }
.cols { display: grid; gap: 2.5rem; border-top: 2px solid var(--ink); padding-top: 2rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .cols { grid-template-columns: repeat(3, 1fr); } }
.cols h3 { font-size: 1.25rem; margin: 1rem 0 0.4rem; }
.cols p { color: var(--muted); }
.vshape { display: block; width: 2.4rem; height: 2.4rem; background: var(--c, var(--coral)); clip-path: var(--shape); }
.shape-circle { --shape: circle(50% at 50% 50%); } .shape-square { --shape: inset(6% round 22%); } .shape-triangle { --shape: polygon(50% 4%, 97% 92%, 3% 92%); }
.shape-diamond { --shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } .shape-hexagon { --shape: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%); }
.shape-star { --shape: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.c-coral { --c: var(--coral); } .c-yellow { --c: var(--yellow); } .c-mint { --c: var(--mint); } .c-teal { --c: var(--teal); } .c-tan { --c: var(--tan); }

/* game cards: colors, shapes and art come from games/*.json via css/games.css */
.gcards { display: grid; gap: 1.75rem; }
.gcard { position: relative; overflow: hidden; display: grid; gap: 2rem; align-items: center; padding: 2rem 1.5rem; border-radius: 36px; color: #fff; background: var(--g-bg); box-shadow: 0 24px 50px var(--g-shadow); }
.gcard .fl { position: absolute; opacity: 0.85; pointer-events: none; }
.gcard-text, .gcard-art { position: relative; z-index: 1; }
.gcard-icon { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 10px 24px rgba(10, 4, 40, 0.4); }
.gcard h3, .gcard h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 1rem 0 0.5rem; }
.gtag { margin: 0 0 0.6rem; font-size: 1.2rem; font-weight: 800; color: var(--g-tag); }
.gcard .btn-ghost { color: #fff; border-color: #fff; }
.gcard .status-line { color: #e8dcff; }
.gcard-art { display: flex; justify-content: center; }
.art-icon { width: 160px; height: 160px; border-radius: 36px; }
@media (min-width: 50rem) { .gcard { grid-template-columns: 1.1fr 0.9fr; padding: 3rem; } }
@media (prefers-reduced-motion: no-preference) { .gcard .fl { animation: bob 6s ease-in-out infinite; } .gcard .f2 { animation-delay: -1.5s; } .gcard .f3 { animation-delay: -3s; } .gcard .f4 { animation-delay: -4.5s; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(6deg); } }
.phone { width: min(100%, 270px); padding: 14px; border-radius: 36px; background: #0d1426; border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 50px rgba(10, 4, 40, 0.5); }
.phone { width: min(100%, 270px); padding: 14px; border-radius: 36px; background: #0d1426; border: 2px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 50px rgba(10, 4, 40, 0.5); }
.demo { width: 100%; height: auto; display: block; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, #7b45f0 0%, #4a22b8 50%, #2a1270 100%); }
.demo .tube { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; }
.demo .ring, .demo .combo { opacity: 0; }
.demo .combo { font: 800 20px var(--font); fill: #ffd23f; }
.demo .pc, .demo .ring, .demo .combo { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .demo .pop1, .demo .pop2, .demo .ring, .demo .combo { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  .demo .pop2 { animation-name: pop2; }
  .demo .pop1 { animation-name: pop1; }
  .demo .mv-sq { animation-name: mvsq; }
  .demo .mv-tri { animation-name: mvtri; }
  .demo .ring2 { animation-name: ring2; }
  .demo .ring1 { animation-name: ring1; }
  .demo .combo { animation-name: combo; }
}
@keyframes pop2 { 0% { opacity: 0; transform: scale(1); } 4%, 28% { opacity: 1; transform: scale(1); } 36% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes pop1 { 0% { opacity: 0; transform: scale(1); } 4%, 58% { opacity: 1; transform: scale(1); } 66% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes mvsq { 0% { opacity: 0; transform: translate(0, 0); } 4%, 12% { opacity: 1; transform: translate(0, 0); } 26%, 28% { opacity: 1; transform: translate(-70px, -76px) scale(1); } 36%, 100% { opacity: 0; transform: translate(-70px, -76px) scale(1.35); } }
@keyframes mvtri { 0% { opacity: 0; transform: translate(0, 0); } 4%, 42% { opacity: 1; transform: translate(0, 0); } 56%, 58% { opacity: 1; transform: translate(-140px, -114px) scale(1); } 66%, 100% { opacity: 0; transform: translate(-140px, -114px) scale(1.35); } }
@keyframes ring2 { 0%, 27% { opacity: 0; transform: scale(0.3); } 29% { opacity: 0.9; transform: scale(0.5); } 40%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes ring1 { 0%, 57% { opacity: 0; transform: scale(0.3); } 59% { opacity: 0.9; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes combo { 0%, 58% { opacity: 0; transform: scale(0.5); } 64% { opacity: 1; transform: scale(1.4); } 74% { opacity: 1; transform: scale(1.1); } 80%, 100% { opacity: 0; transform: scale(1); } }
/* game page */
.crumbs { padding-top: 1rem; padding-bottom: 0.75rem; font-size: 0.95rem; }
.crumbs a, .crumbs-inline a { display: inline-flex; align-items: center; min-height: 44px; }
.intro { max-width: 40rem; font-size: 1.1rem; }
.steps { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li, .feat { padding: 1.5rem; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.steps h3, .feat h3 { font-size: 1.15rem; margin: 0.9rem 0 0.4rem; }
.steps p, .feat p { margin: 0; color: var(--muted); }
.num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 800; color: var(--navy); }
.n1 { background: var(--coral); } .n2 { background: var(--yellow); } .n3 { background: var(--mint); }
.feat-grid { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
.shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.shots img { border-radius: 18px; border: 1px solid var(--line); }

/* contact band */
.band-wrap { padding: 3.5rem 0 1rem; }
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 2rem; border-radius: 36px; background: var(--navy); color: var(--cream, #f6efe6); }
.band h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); }
@media (prefers-color-scheme: dark) { .band { background: #0d1830; border: 1px solid var(--line); } }

/* document pages */
.doc { padding: 3rem 0 2rem; }
.doc .wrap { max-width: 42rem; }
.doc.wide .wrap { max-width: 54rem; }
.doc h1 { font-size: 2.4rem; margin-bottom: 0.5rem; }
.doc h2 { font-size: 1.2rem; margin: 2rem 0 0.35rem; }
.doc p { margin: 0.5rem 0; }
.lead-sm { color: var(--muted); font-size: 1.15rem; }
.meta { color: var(--muted); font-size: 0.9rem; }
.doc .back, .plain li a, .doc p > a:only-child, .doc dd > a { display: inline-flex; align-items: center; min-height: 44px; }
.mail { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.2rem; border-radius: 999px; background: var(--card); border: 2px solid var(--teal); color: var(--link); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.mail:hover { background: var(--teal); color: #fff; }
.faq dt { font-weight: 800; margin-top: 1.1rem; }
.faq dd { margin: 0.2rem 0 0; color: var(--muted); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; margin: 1rem 0 0; }
.facts dt { font-weight: 800; } .facts dd { margin: 0; }
.assets { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin-top: 0.75rem; }
.asset a { display: flex; flex-direction: column; gap: 0.6rem; min-height: 44px; padding: 0.75rem; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; }
.asset a:hover { border-color: var(--teal); }
.asset small { display: block; font-weight: 400; color: var(--muted); }
.tile { display: flex; align-items: center; justify-content: center; min-height: 7rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); padding: 0.5rem; }
.tile-dark { background: var(--navy); border-color: var(--navy); }
.tile img { max-height: 5.5rem; width: auto; }
.swatches { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin-top: 0.75rem; }
.swatches li { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.swatches small { display: block; font-weight: 400; color: var(--muted); }
.sw { display: block; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; border: 1px solid var(--line); }
.sw-navy { background: #142036; } .sw-cream { background: #f6efe6; } .sw-coral { background: #ff7a63; } .sw-yellow { background: #ffd04a; } .sw-mint { background: #8fd9b6; } .sw-teal { background: #2aa6a6; } .sw-tan { background: #c89b5a; }

/* 404 */
.nf { padding: 5rem 0 6rem; }
.nf h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
/* Quiver demo (arrows). Colors follow the game's Paper style. */
.demo.demo-q { background: #fff; }
.demo-q .qd { fill: #d5d9ee; }
.demo-q g { color: #0e1330; transform-box: fill-box; }
.demo-q g path { stroke: currentColor; }
.demo-q g polygon { fill: currentColor; stroke: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .demo-q g { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
  .demo-q .qa { animation-name: qa; }
  .demo-q .qb { animation-name: qb; }
  .demo-q .qc { animation-name: qc; }
}
@keyframes qa {
  0%, 4% { transform: translateX(0); color: #0e1330; opacity: 1; }
  8% { transform: translateX(12px); color: #ff4b5c; }
  12%, 18% { transform: translateX(0); color: #ff4b5c; }
  24%, 40% { transform: translateX(0); color: #0e1330; opacity: 1; }
  56% { transform: translateX(220px); color: #0e1330; opacity: 0; }
  57%, 95% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); color: #0e1330; opacity: 1; }
}
@keyframes qb {
  0%, 24% { transform: translateY(0); opacity: 1; }
  38% { transform: translateY(170px); opacity: 0; }
  39%, 95% { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes qc {
  0%, 62% { transform: translateX(0); opacity: 1; }
  80% { transform: translateX(220px); opacity: 0; }
  81%, 95% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}