/* Scales of Prophecy — game page. Layers on home.css. No JS, no external resources, no inline styles (strict CSP). */
:root{
  --night:#181020; --night-2:#231733; --night-3:#2e2142;
  --ember:#ff5a2c; --tide:#16c4c4; --storm:#a86fe0; --sand:#e0a52c; --frost:#74c2ee; --shadow-c:#a98fe6;
  --paper-2:#fbf6ea;
}

/* ===== floating dragon helper ===== */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-15px) rotate(2.5deg)}}
.floater{position:absolute;z-index:3;pointer-events:none;animation:floaty 5.5s ease-in-out infinite;filter:drop-shadow(0 12px 16px rgba(0,0,0,.35))}
.floater img{width:100%;height:auto}

/* ===== phone mockup ===== */
.phone{position:relative;width:100%;max-width:288px;aspect-ratio:430/932;margin:0 auto;border-radius:40px;
  background:linear-gradient(160deg,#2a2433,#0d0b12);padding:11px;
  box-shadow:0 34px 70px -22px rgba(8,4,16,.7), 0 0 0 1.5px rgba(255,255,255,.06) inset, 0 1px 0 rgba(255,255,255,.18) inset;
  border:1px solid #0c0a12}
.phone__screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:#05040a;box-shadow:0 0 0 2px rgba(0,0,0,.6) inset}
.phone__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:36%;height:19px;background:#0c0a12;border-radius:0 0 13px 13px;z-index:4}
.phone__glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:30px;
  background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%)}
.phone--tilt{transform:rotate(3deg)}
.phone--tiltl{transform:rotate(-3deg)}

/* ===== hero ===== */
.gp-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(900px 480px at 80% 14%,rgba(168,111,224,.30),transparent 60%),
             linear-gradient(180deg,rgba(18,11,26,.82),rgba(13,8,19,.94)),
             url(/assets/art/biome_stormwing_hero.webp) center/cover no-repeat}
.gp-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:96px 22px 110px;max-width:1120px;margin:0 auto}
.gp-hero__copy{animation:rise .8s ease both}
.gp-hero .eyebrow{color:#ffe1b0}
.gp-hero__logo{width:min(440px,86%);margin:6px 0 4px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5))}
.gp-hero h1{font-size:clamp(2rem,5vw,3.3rem);margin:.4rem 0 .3rem;text-shadow:0 3px 20px rgba(0,0,0,.45)}
.gp-hero__lede{font-size:clamp(1.05rem,2.1vw,1.28rem);max-width:540px;margin:14px 0 26px;color:#f2ecf6;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.gp-hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.gp-hero__stage{position:relative;display:flex;justify-content:center}
.gp-hero .floater--a{width:118px;top:-6px;left:-6px;animation-duration:6s}
.gp-hero .floater--b{width:96px;bottom:18px;right:-10px;animation-duration:5s;animation-delay:-1.5s}
.gp-hero__fade{position:absolute;left:0;right:0;bottom:-1px;height:90px;background:linear-gradient(180deg,transparent,var(--cream));z-index:2}

/* badges row */
.gp-badges{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#efe7d6;font-size:.9rem}
.gp-badges span{display:inline-flex;align-items:center;gap:7px}
.gp-badges b{color:#fff;font-weight:700}

/* ===== generic game section ===== */
.gp-section{padding:88px 0}
.gp-section--paper{background:var(--paper-2)}
.gp-head{max-width:720px;margin:0 0 42px}
.gp-head.center{margin-left:auto;margin-right:auto;text-align:center}
.gp-head h2{font-size:clamp(1.9rem,4.2vw,2.9rem);margin:.4rem 0 .55rem}
.gp-head p{color:var(--muted);font-size:1.1rem;margin:0}

/* split layout (phone + copy) */
.gp-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.gp-split--rev{grid-template-columns:1.15fr .85fr}
.gp-split__media{position:relative;display:flex;justify-content:center}
.gp-create__float{display:block;width:132px;margin:22px 0 0 auto;animation:floaty 6s ease-in-out infinite;filter:drop-shadow(0 12px 16px rgba(36,28,18,.16))}
.gp-create__float img{width:100%;height:auto;display:block}
.gp-split h3{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .5rem}
.gp-split>div>p{color:var(--muted);font-size:1.06rem}

/* ===== LORE / story band (cinematic) ===== */
.lore{position:relative;overflow:hidden;color:#ece4f6;
  background:radial-gradient(1200px 500px at 78% -8%,rgba(168,111,224,.28),transparent 60%),
             radial-gradient(900px 500px at 8% 110%,rgba(255,90,44,.16),transparent 55%),
             linear-gradient(180deg,var(--night),#120c1a)}
.lore .wrap{padding:96px 22px;position:relative;z-index:2}
.lore .eyebrow{color:#d9b6ff}
.lore h2{color:#fff;font-size:clamp(2rem,4.4vw,3rem);margin:.4rem 0 .2rem;max-width:760px}
.lore__lead{font-size:clamp(1.12rem,2.3vw,1.42rem);color:#f3ead9;max-width:760px;margin:18px 0 0;line-height:1.55}
.lore__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 48px;margin:40px 0 0;max-width:920px}
.lore__cols h4{font-family:var(--display);color:#ffd98a;font-size:1.12rem;margin:0 0 6px;display:flex;align-items:center;gap:9px}
.lore__cols p{color:#cdc2dd;font-size:1.02rem;margin:0;line-height:1.6}
.lore__quote{margin:50px auto 0;max-width:720px;text-align:center;font-family:var(--display);
  font-size:clamp(1.3rem,3vw,2rem);line-height:1.4;color:#ffe6ad;font-weight:700;letter-spacing:-.01em}
.lore__quote span{display:block;color:#bda9dd;font-size:.92rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-top:18px}
.lore__stars{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1.4px 1.4px at 32% 68%,#fff,transparent),radial-gradient(1.6px 1.6px at 58% 16%,#fff,transparent),radial-gradient(1.2px 1.2px at 76% 52%,#fff,transparent),radial-gradient(1.5px 1.5px at 88% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 46% 84%,#fff,transparent);
  background-repeat:no-repeat}

/* ===== customization swatches & options ===== */
.create__row{margin:22px 0}
.create__row h4{font-family:var(--display);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald);margin:0 0 11px}
.swatches{display:flex;flex-wrap:wrap;gap:11px}
.sw{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.65),0 2px 6px rgba(36,28,18,.22)}
.sw--crimson{background:#c0392b}.sw--sapphire{background:#2e5bba}.sw--emerald{background:#1f9e6e}.sw--amethyst{background:#9b59b6}
.sw--obsidian{background:#1c1c24}.sw--gold{background:#d4a02f}.sw--silver{background:#c7cdd4}.sw--coral{background:#ff7f6b}
.sw--midnight{background:#1a2342}.sw--ivory{background:#f4eedd}.sw--teal{background:#14a3a3}.sw--bronze{background:#a87333}
.sw--amber{background:#f0a800}.sw--ruby{background:#c0143c}.sw--iceblue{background:#8fd4f0}.sw--violet{background:#8e5bd6}.sw--esilver{background:#cfd5db}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{font-family:var(--display);font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.opt--on{border-color:var(--emerald);background:var(--emerald-soft);color:var(--emerald-deep)}

/* ===== clans grid ===== */
.clans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.clan{position:relative;border-radius:20px;overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;box-shadow:var(--shadow-l);border:1px solid rgba(255,255,255,.08)}
.clan__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.clan:hover .clan__bg{transform:scale(1.07)}
.clan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,14,.14) 0%,rgba(8,5,14,.48) 42%,rgba(8,5,14,.8) 64%,rgba(8,5,14,.95) 100%)}
.clan__critter{position:absolute;top:12px;right:10px;width:80px;z-index:3;animation:floaty 5.5s ease-in-out infinite;filter:drop-shadow(0 6px 9px rgba(0,0,0,.55))}
.clan__body{position:relative;z-index:2;padding:20px 20px 22px}
.clan__crest{width:40px;height:40px;margin-bottom:9px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.65))}
.clan__name{font-family:var(--display);font-weight:800;font-size:1.42rem;line-height:1;letter-spacing:-.01em}
.clan__el{display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  padding:4px 11px;border-radius:999px;margin:9px 0 8px;color:#1a1018}
.clan__virtue{font-size:.97rem;opacity:.95;margin:2px 0 10px;font-style:italic;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.clan__meta{font-size:.83rem;opacity:.85;border-top:1px solid rgba(255,255,255,.2);padding-top:9px;line-height:1.5}
.clan__meta b{color:#fff;font-weight:700}
.clan--ember{border-top:4px solid var(--ember)} .clan--ember .clan__el{background:var(--ember)}
.clan--tide{border-top:4px solid var(--tide)} .clan--tide .clan__el{background:var(--tide)}
.clan--storm{border-top:4px solid var(--storm)} .clan--storm .clan__el{background:var(--storm)}
.clan--sand{border-top:4px solid var(--sand)} .clan--sand .clan__el{background:var(--sand)}
.clan--frost{border-top:4px solid var(--frost)} .clan--frost .clan__el{background:var(--frost)}
.clan--shadow{border-top:4px solid var(--shadow-c)} .clan--shadow .clan__el{background:var(--shadow-c)}

/* ===== gameplay feature cards ===== */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow-s)}
.feat__ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--emerald-soft);font-size:1.5rem;margin-bottom:13px}
.feat h3{font-size:1.15rem;margin:0 0 6px}
.feat p{color:var(--muted);font-size:.97rem;margin:0;line-height:1.55}

/* ===== kind-by-design band ===== */
.kind{background:var(--emerald);color:#fff}
.kind .wrap{padding:80px 22px}
.kind .eyebrow{color:#ffd877}
.kind h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);max-width:640px}
.kind__lead{color:#dff0e9;font-size:1.1rem;max-width:640px;margin:14px 0 36px}
.kind__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;max-width:900px}
.kind__item{display:flex;gap:14px;align-items:flex-start}
.kind__item .k{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:1.25rem}
.kind__item h4{font-family:var(--display);font-size:1.06rem;margin:0 0 3px;color:#fff}
.kind__item p{margin:0;color:#cfe7df;font-size:.97rem;line-height:1.5}

/* ===== family dragons ===== */
.kin{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.kin__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .2s ease,box-shadow .2s ease}
.kin__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.kin__art{position:relative;aspect-ratio:1;overflow:hidden}
.kin__art img{width:100%;height:100%;object-fit:cover}
.kin__el{position:absolute;top:12px;left:12px;font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(12,8,16,.6);padding:5px 11px;border-radius:999px;backdrop-filter:blur(2px)}
.kin__body{padding:18px 20px 22px}
.kin__name{font-family:var(--display);font-weight:800;font-size:1.3rem;margin:0}
.kin__by{color:var(--gold-deep);font-weight:700;font-size:.9rem;margin:1px 0 8px}
.kin__body p{color:var(--muted);font-size:.96rem;margin:0;line-height:1.55}

/* ===== final CTA ===== */
.gp-cta{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(16,8,20,.62),rgba(12,6,18,.82)),url(/assets/art/biome_emberclaw_hero.webp) center/cover no-repeat}
.gp-cta .wrap{padding:84px 22px}
.gp-cta h2{color:#fff;font-size:clamp(1.9rem,4.4vw,2.9rem);margin:0 auto;max-width:640px}
.gp-cta p{color:#f0e7d6;font-size:1.1rem;max-width:560px;margin:16px auto 28px}
.gp-cta .appstore{margin:0 auto}
.gp-cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
.gp-cta__note{display:block;color:#e9dcc2;font-size:.95rem;margin-top:20px}

/* ===== responsive ===== */
@media(max-width:900px){
  .clans{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .lore__cols{grid-template-columns:1fr}
  .kind__grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .gp-hero__grid{grid-template-columns:1fr;gap:30px;padding:78px 22px 92px;text-align:center}
  .gp-hero__lede{margin-left:auto;margin-right:auto}
  .gp-hero__cta,.gp-badges{justify-content:center}
  .gp-hero__stage{order:-1}
  .gp-hero .floater--a{width:84px} .gp-hero .floater--b{width:74px}
  .gp-split,.gp-split--rev{grid-template-columns:1fr;gap:30px}
  .gp-split__media{order:-1}
  .kin{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
  .gp-section{padding:62px 0}
  .clans,.feats{grid-template-columns:1fr}
  .lore .wrap{padding:70px 18px}
  .phone{max-width:255px}
}
@media(prefers-reduced-motion:reduce){
  .floater,.clan__critter{animation:none}
  .clan:hover .clan__bg{transform:none}
}

/* ===== real-screenshot additions ===== */
/* current 8-hue creator swatches */
.hue{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.7),0 2px 6px rgba(36,28,18,.22)}
.hue--ember{background:#ff6a00}.hue--crimson{background:#e0143c}.hue--gold{background:#ffc400}.hue--green{background:#3cb043}
.hue--teal{background:#00b3a4}.hue--blue{background:#2e6be6}.hue--purple{background:#8e44ad}.hue--pink{background:#e84393}

/* two phones side by side (red + recolored) */
.gp-duo{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.gp-duo .phone{max-width:208px}
.gp-duo__cap{text-align:center;color:var(--muted);font-size:.93rem;margin:16px auto 0;max-width:320px}

/* lore: prologue phone beside the synopsis */
.lore__top{display:grid;grid-template-columns:1.25fr .75fr;gap:46px;align-items:center;margin-top:20px}
.lore__top .phone{max-width:248px}

/* launch note pill */
.gp-note{display:inline-block;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--gold-deep);background:#fff7e6;border:1px solid #f0dca8;border-radius:999px;padding:8px 16px}
.clan-intro .gp-note{margin-top:16px}

@media(max-width:860px){
  .lore__top{grid-template-columns:1fr;gap:26px}
  .lore__top .phone{order:-1}
  .gp-duo .phone{max-width:200px}
}

/* ===== v2: visible ghost buttons, bigger media, real icons (no emoji) ===== */
.gp-hero .btn--ghost,.gp-cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.gp-hero .btn--ghost:hover,.gp-cta .btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}

/* create: give the two phones more room and make them bigger */
.create-split{grid-template-columns:1.05fr .95fr}
.gp-duo{gap:14px}
.gp-duo .phone{max-width:240px}

/* #3 bigger clan crest */
.clan{min-height:410px}
.clan__crest{width:100px;height:100px;margin-bottom:4px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.65))}

/* how-you-play: drawn game icons (replace the emoji box) */
.feat__ico{width:58px;height:58px;background:none;border-radius:0;display:block;margin-bottom:12px;font-size:0}
.feat__ico img{width:58px;height:58px;object-fit:contain}

/* kind-by-design: lucide monochromatic */
.kind__item .k{color:#fff}
.kind__item .k svg{width:22px;height:22px;display:block}

/* hero badges + lore-col lucide glyphs */
.gp-badges svg{width:17px;height:17px;stroke-width:2.2;flex:0 0 auto}
.lore__cols h4 svg{width:19px;height:19px;stroke-width:2.2;flex:0 0 auto}

@media(max-width:860px){ .gp-create__float{width:108px;margin-top:16px} }