/* ============================================================
   OAKSPIRE STUDIOS: shared styles for every page.
   Brand layer : gold on obsidian (matches the logo).
   Game layers : Dungeon Tycoon uses the base look; Bakery Merge
                 pages add body.bm (warm cream and strawberry).
   ============================================================ */

:root{
  --obsidian:  #0a0806;
  --pitch:     #0f0c09;
  --soot:      #16110d;
  --earth:     #1e1610;

  --gold:      #d9a94e;
  --gold-lite: #f4d99a;
  --gold-deep: #8a6321;

  --ember:     #ff7a2e;
  --gem:       #3fd6b8;
  --arcane:    #9a6bff;

  --cream:     #f6ecd9;
  --muted:     #9c8d78;

  --serif:   'Cinzel', Georgia, serif;
  --display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body:    'Nunito', system-ui, -apple-system, sans-serif;

  --edge: 3px solid #0a0806;
  --r: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--obsidian);color:var(--cream);
  overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* logo art is a true transparent cutout — no blend mode needed */
.logo-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

/* ---------- image slot with graceful placeholder ---------- */
.slot{position:relative;overflow:hidden;
  background:repeating-linear-gradient(45deg,#171208 0 14px,#1d1610 14px 28px)}
.slot::after{content:attr(data-label);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-family:var(--body);font-weight:700;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#6b5a3f;
  text-align:center;padding:1rem;pointer-events:none}
.slot img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.slot img[data-loaded="0"]{display:none}
/* once real art lands, drop the placeholder label + stripes (art may be transparent) */
.slot.filled{background:none}
.slot.filled::after{display:none}

/* ---------- type ---------- */
h1,h2,h3{line-height:1.06;letter-spacing:-.01em}
.serif{font-family:var(--serif);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chunky{font-family:var(--display);font-weight:800}
.stroke{text-shadow:
  -3px -3px 0 #0a0806, 3px -3px 0 #0a0806, -3px 3px 0 #0a0806, 3px 3px 0 #0a0806,
  0 -3px 0 #0a0806, 0 3px 0 #0a0806, -3px 0 0 #0a0806, 3px 0 0 #0a0806, 0 9px 0 rgba(0,0,0,.45)}
/* gradient text: kill the inherited stroke shadow (it paints through transparent
   glyphs and hides the gradient) and re-add depth with a drop-shadow filter */
.gold-grad{background:linear-gradient(180deg,#fbeec4 0%,var(--gold) 48%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 3px 0 #0a0806) drop-shadow(0 -2px 0 #0a0806)
         drop-shadow(2px 0 0 #0a0806) drop-shadow(-2px 0 0 #0a0806)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);
  font-weight:800;font-size:1.03rem;padding:.82rem 1.75rem;border-radius:999px;
  border:var(--edge);cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.55);
  transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 rgba(0,0,0,.55)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.55)}
.btn-gold{background:linear-gradient(180deg,#fae5b4,#c9922f);color:#241300}
.btn-gem{background:linear-gradient(180deg,#63f5da,#12b39a);color:#032b25}
/* The solid buttons carry a 3px border in the page background colour, so it reads as
   invisible — you only see the 53px fill inside it. A ghost button with a *visible*
   3px border therefore looks 6px taller at the identical box size. Fix: give the ghost
   the same invisible outer border and draw its gold ring as an inset shadow, so both
   buttons present the same visible shape. */
.btn-ghost{background:rgba(217,169,78,.07);color:var(--gold-lite);
  border:var(--edge);box-shadow:inset 0 0 0 2px rgba(217,169,78,.45)}
.btn-ghost:hover{background:rgba(217,169,78,.16);
  box-shadow:inset 0 0 0 2px rgba(217,169,78,.75)}
.btn-ghost:active{box-shadow:inset 0 0 0 2px rgba(217,169,78,.75)}

/* ---------- layout ---------- */
.wrap{width:min(1180px,92vw);margin-inline:auto}
section{position:relative;padding:clamp(4rem,9vw,8rem) 0}
.eyebrow{display:inline-block;font-family:var(--serif);font-weight:700;font-size:.74rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(217,169,78,.35);background:rgba(217,169,78,.07);
  padding:.4rem 1.05rem;border-radius:999px;margin-bottom:1.2rem}
.eyebrow.gem{color:var(--gem);border-color:rgba(63,214,184,.35);background:rgba(63,214,184,.07)}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:.75rem clamp(1rem,4vw,2.5rem);
  transition:background .3s, backdrop-filter .3s, box-shadow .3s;
  /* scrim keeps the logo and links readable over bright hero art.
     No border-bottom at rest — a transparent 1px border rendered as a dark hairline
     against the hero. The scrolled rule uses an inset shadow instead, so there's
     also no 1px layout jump when the class flips. */
  background:linear-gradient(180deg, rgba(10,8,6,.92) 0%, rgba(10,8,6,.6) 55%, transparent 100%);
  box-shadow:none}
nav.scrolled{background:rgba(10,8,6,.9);backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 rgba(217,169,78,.28)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand .mark{height:42px;width:auto;flex:none}
.brand .word{height:20px;width:auto}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{position:relative;font-family:var(--serif);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .2s;
  padding:.35rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .25s ease}
.nav-links a:hover{color:var(--gold-lite)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--gold)}

/* hamburger */
.menu-btn{display:none;width:44px;height:44px;border:1px solid rgba(217,169,78,.3);
  border-radius:12px;background:rgba(10,8,6,.6);cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--gold-lite);
  border-radius:2px;transition:transform .25s ease, opacity .2s ease}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:99;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;
  background:radial-gradient(ellipse 80% 45% at 50% 32%, rgba(217,169,78,.09), transparent 65%),
             linear-gradient(180deg,#0b0907,#16110d)}
.drawer.open{display:flex;animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer a{font-family:var(--serif);font-weight:700;font-size:1.1rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);padding:.9rem 2rem;border-radius:12px}
.drawer a:active,.drawer a:hover{color:var(--gold);background:rgba(217,169,78,.08)}
.drawer .drawer-rule{width:120px;height:1px;margin:.6rem 0;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}

@media(max-width:940px){
  .nav-links{display:none}
  .menu-btn{display:flex}
}
@media(max-width:420px){.brand .word{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:5.5rem 0 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:-6% 0;z-index:0}
.hero-bg .slot{width:100%;height:100%}
.hero-bg img{object-position:center 55%}
/* veil: dark enough for legible type, light enough that the dungeon art still reads.
   The band behind the headline is the only genuinely heavy part. */
.hero-veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(ellipse 58% 26% at 50% 62%, rgba(10,8,6,.82) 0%, rgba(10,8,6,.5) 55%, transparent 100%),
  radial-gradient(ellipse 95% 80% at 50% 45%, transparent 0%, rgba(10,8,6,.45) 72%, rgba(10,8,6,.85) 100%),
  linear-gradient(180deg, rgba(10,8,6,.8) 0%, rgba(10,8,6,.12) 26%, rgba(10,8,6,.35) 58%,
    rgba(10,8,6,.8) 88%, var(--obsidian) 100%)}
.hero-inner{position:relative;z-index:3;width:min(920px,92vw)}
.game-logo .slot{aspect-ratio:16/7;width:min(620px,86vw);margin:0 auto .6rem;
  background:none;filter:drop-shadow(0 14px 26px rgba(0,0,0,.7))}
.game-logo .slot img{object-fit:contain}
.game-logo .slot::after{color:#7a6746}
.hero .hero-line{font-family:var(--display);font-weight:800;line-height:1.06;
  letter-spacing:-.01em;font-size:clamp(2.3rem,6.6vw,4.4rem);margin-bottom:.5rem}
.hero .lede{color:#e8dcc6;font-size:clamp(1rem,1.6vw,1.15rem);max-width:56ch;margin:0 auto 2.1rem}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.badge-row{margin-top:2.3rem;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;
  font-family:var(--serif);font-size:.68rem;letter-spacing:.2em;color:var(--muted)}
.badge-row span{border:1px solid rgba(217,169,78,.25);border-radius:999px;
  padding:.38rem 1rem;background:rgba(10,8,6,.55)}
.badge-row span.hot{color:var(--gem);border-color:rgba(63,214,184,.55);
  background:rgba(63,214,184,.1);box-shadow:0 0 22px rgba(63,214,184,.22)}

/* ---------- no-ads promise ---------- */
.promise{position:relative;overflow:hidden;margin-top:2.2rem;padding:1.5rem 1.6rem;
  border-radius:var(--r);border:2px solid rgba(63,214,184,.35);
  background:linear-gradient(135deg,rgba(63,214,184,.1),rgba(10,8,6,.4));
  display:flex;gap:1.1rem;align-items:center}
.promise .seal{flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:1.6rem;border:2px solid rgba(63,214,184,.5);background:rgba(63,214,184,.1);
  box-shadow:0 0 26px rgba(63,214,184,.25)}
.promise b{display:block;font-family:var(--display);font-weight:800;font-size:1.18rem;
  color:var(--gem);margin-bottom:.15rem}
.promise span{color:#cfc6b4;font-size:.96rem;line-height:1.5}
.scroll-hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--serif);font-size:.66rem;letter-spacing:.28em;color:var(--muted);
  animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold),var(--gold-deep),transparent);opacity:.6}

/* ---------- game ---------- */
.game{background:radial-gradient(ellipse 85% 60% at 18% 0%, rgba(154,107,255,.13), transparent 62%),
  linear-gradient(180deg,var(--obsidian),var(--pitch))}
.game-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.game-grid{grid-template-columns:1fr}}
.game h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.6vw,3.3rem);margin-bottom:1rem}
.game p{color:#ddd0ba;margin-bottom:1.05rem;font-size:1.04rem}
/* centred so the wrapped row reads as intentional rather than orphaned */
.pill-list{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center;margin:1.6rem 0 2rem}
/* equal-width pair — otherwise the longer label makes the secondary action look
   more important than the primary one */
.game-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.game-cta .btn{min-width:240px;justify-content:center}
@media(max-width:430px){.game-cta .btn{width:100%;min-width:0}}
.ext{font-size:.85em;opacity:.75}
.pill-list li{list-style:none;font-family:var(--display);font-weight:700;font-size:.88rem;
  background:rgba(217,169,78,.1);border:2px solid rgba(217,169,78,.3);color:var(--gold-lite);
  padding:.32rem 1rem;border-radius:999px}
.phone{position:relative;margin-inline:auto;width:min(390px,84vw);aspect-ratio:9/19;
  background:#0d0a07;border:8px solid #17120d;border-radius:44px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.7), 0 0 0 3px rgba(217,169,78,.28), 0 0 90px rgba(154,107,255,.3);
  transform:rotate(-3deg);transition:transform .4s ease}
.phone:hover{transform:rotate(0) translateY(-8px)}
.phone .slot{width:100%;height:100%}
.phone::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:38%;height:22px;background:#17120d;border-radius:0 0 16px 16px;z-index:5}
.phone-glow{position:absolute;inset:-14%;z-index:-1;filter:blur(30px);
  background:radial-gradient(circle,rgba(63,214,184,.26),transparent 65%)}

/* ---------- features ---------- */
.features{background:linear-gradient(180deg,var(--pitch),var(--soot))}
.features-head{text-align:center;margin-bottom:3.2rem}
.features-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.card{position:relative;overflow:hidden;padding:1.8rem 1.5rem 2rem;border-radius:var(--r);
  border:var(--edge);background:linear-gradient(180deg,rgba(38,29,20,.96),rgba(22,17,13,.96));
  box-shadow:0 8px 0 rgba(0,0,0,.5);transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 16px 0 rgba(0,0,0,.5)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--ember),var(--arcane),var(--gem))}
.card .icon{width:112px;height:112px;margin-bottom:1.1rem;border-radius:24px;
  border:2px solid rgba(217,169,78,.18);
  background:radial-gradient(circle at 40% 30%,rgba(217,169,78,.22),rgba(0,0,0,.32))}
.card .icon img{object-fit:contain;padding:5px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.card h3{font-family:var(--display);font-weight:800;font-size:1.28rem;margin-bottom:.5rem;color:var(--gold-lite)}
.card p{color:#c9bba4;font-size:.97rem}

/* ---------- gallery ---------- */
.gallery{background:linear-gradient(180deg,var(--soot),var(--pitch));text-align:center}
.gallery h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:2.6rem}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4rem}
.shot{position:relative;aspect-ratio:9/16;border-radius:22px;border:var(--edge);
  overflow:hidden;box-shadow:0 12px 0 rgba(0,0,0,.5);cursor:zoom-in;
  transition:transform .25s ease}
.shot:hover{transform:translateY(-10px) scale(1.02)}
.shot::before{content:"⤢";position:absolute;z-index:3;right:10px;bottom:10px;
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  font-size:1rem;color:var(--gold-lite);background:rgba(10,8,6,.75);
  border:1px solid rgba(217,169,78,.35);opacity:0;transition:opacity .2s ease}
.shot:hover::before,.shot:focus-visible::before{opacity:1}
.shot:focus-visible{outline:3px solid var(--gold);outline-offset:4px}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;
  justify-content:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,4,3,.94);backdrop-filter:blur(8px)}
.lightbox.open{display:flex;animation:fade .2s ease}
.lightbox img{max-width:min(100%,520px);max-height:100%;width:auto;height:auto;
  border-radius:20px;border:var(--edge);box-shadow:0 24px 60px rgba(0,0,0,.8);
  animation:zoomIn .25s cubic-bezier(.2,.8,.3,1)}
@keyframes zoomIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.lb-btn{position:absolute;z-index:2;width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--gold-lite);
  background:rgba(10,8,6,.85);border:1px solid rgba(217,169,78,.35);
  transition:background .2s, transform .2s}
.lb-btn:hover{background:var(--gold);color:#241300;transform:scale(1.08)}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.5rem,2vw,2rem)}
.lb-next{right:clamp(.5rem,2vw,2rem)}
.lb-count{position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:.72rem;letter-spacing:.2em;color:var(--muted)}
@media(max-width:620px){
  .lb-btn{width:44px;height:44px;font-size:1.2rem}
  .lb-prev{left:.4rem} .lb-next{right:.4rem}
  .lightbox img{max-width:calc(100% - 5.5rem)}
}

/* ---------- studio ---------- */
.studio{background:linear-gradient(180deg,var(--pitch),var(--obsidian))}
.studio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.studio-grid{grid-template-columns:1fr}.studio-art{order:-1}}
.studio-art{border-radius:var(--r);border:var(--edge);overflow:hidden;box-shadow:0 14px 0 rgba(0,0,0,.5)}
.studio-art .slot{aspect-ratio:4/3}
.studio h2{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.25;margin-bottom:1.1rem}
.studio p{color:#ddd0ba;margin-bottom:1rem}
.values{display:grid;gap:.9rem;margin-top:1.8rem}
.value{display:flex;gap:.9rem;align-items:flex-start}
.value b{font-family:var(--display);color:var(--gold-lite);font-size:1.04rem;display:block}
.value .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gold);
  margin-top:.6rem;box-shadow:0 0 12px var(--gold)}

/* ---------- crest band ---------- */
.crest{padding:clamp(3rem,7vw,5.5rem) 0;text-align:center;background:var(--obsidian);
  border-block:1px solid rgba(217,169,78,.16)}
.crest img{height:clamp(150px,22vw,230px);width:auto;margin:0 auto 1.4rem}
.crest p{font-family:var(--serif);font-size:.76rem;letter-spacing:.32em;color:var(--muted)}

/* ---------- waitlist ---------- */
.waitlist{text-align:center;overflow:hidden;background:
  radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255,122,46,.2), transparent 66%),
  linear-gradient(180deg,var(--obsidian),#150f0a)}
.waitlist h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);margin-bottom:.8rem}
.waitlist p{color:#ddd0ba;max-width:52ch;margin:0 auto 2.2rem}
.waitlist form{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;max-width:560px;margin-inline:auto}
.waitlist input[type=email]{flex:1 1 280px;font-family:var(--body);font-weight:600;font-size:1rem;
  padding:.9rem 1.3rem;border-radius:999px;border:var(--edge);background:#fbf4e6;color:#241a10;outline:none}
.waitlist input[type=email]::placeholder{color:#9a8b74}
.waitlist input[type=email]:focus{box-shadow:0 0 0 4px rgba(217,169,78,.4)}
.form-note{margin-top:1rem;font-size:.84rem;color:var(--muted)}
.thanks{display:none;font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--gem)}
.thanks.show{display:block;animation:pop .4s ease}
.form-error{display:none;margin-top:1rem;font-weight:700;color:#ff9d6e}
.form-error.show{display:block}
button[disabled]{opacity:.6;cursor:wait;transform:none!important}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- contact ---------- */
.contact{background:linear-gradient(180deg,#150f0a,var(--obsidian))}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact h2{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.25;margin-bottom:1rem}
.contact p{color:#ddd0ba;margin-bottom:1rem}
.direct{display:inline-flex;align-items:center;gap:.6rem;margin-top:.6rem;
  font-weight:700;color:var(--gold-lite);border-bottom:1px solid rgba(217,169,78,.35);padding-bottom:2px}
.direct:hover{color:var(--gold)}
.form-card{padding:1.8rem;border-radius:var(--r);border:var(--edge);
  background:linear-gradient(180deg,rgba(38,29,20,.96),rgba(22,17,13,.96));
  box-shadow:0 10px 0 rgba(0,0,0,.5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-family:var(--serif);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-weight:600;
  font-size:.98rem;padding:.75rem .95rem;border-radius:12px;border:2px solid rgba(217,169,78,.22);
  background:rgba(10,8,6,.6);color:var(--cream);outline:none;transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#7d6e59}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:rgba(217,169,78,.6);box-shadow:0 0 0 3px rgba(217,169,78,.18)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
    linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat}
.field select option{background:#16110d;color:var(--cream)}

/* ---------- footer ---------- */
footer{background:#070504;padding:3.5rem 0 2.5rem;border-top:1px solid rgba(217,169,78,.2)}
.foot-grid{display:flex;justify-content:space-between;gap:2.4rem;flex-wrap:wrap;align-items:flex-start}
.foot-brand img{height:88px;width:auto;margin-bottom:.4rem}
.foot-links{display:grid;gap:.5rem;align-content:start}
.foot-links a{color:var(--muted);font-weight:600;font-size:.94rem}
.foot-links a:hover{color:var(--gold)}
.foot-title{font-family:var(--serif);font-size:.72rem;letter-spacing:.22em;color:var(--cream);margin-bottom:.6rem}
.copy a{color:inherit}.copy a:hover{color:var(--gold)}
.copy{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.07);
  color:#7c6e5b;font-size:.84rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-hint{animation:none}
}

/* ============================================================
   STUDIO HOME
   ============================================================ */
.home-hero .hero-bg img{object-position:center 40%}
.home-hero .crest-logo{height:clamp(170px,26vw,270px);width:auto;margin:0 auto 1rem}
.home-hero .tagline{font-family:var(--serif);font-weight:700;font-size:.82rem;letter-spacing:.32em;
  color:var(--gold);margin-bottom:1.3rem}

.games{background:linear-gradient(180deg,var(--obsidian),var(--pitch))}
.games-head{text-align:center;margin-bottom:3rem}
.games-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem)}
.game-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.8rem}
.game-card{display:flex;flex-direction:column;border-radius:var(--r);border:var(--edge);overflow:hidden;
  background:linear-gradient(180deg,rgba(38,29,20,.96),rgba(22,17,13,.96));
  box-shadow:0 10px 0 rgba(0,0,0,.5);transition:transform .2s ease, box-shadow .2s ease}
.game-card:hover{transform:translateY(-6px);box-shadow:0 16px 0 rgba(0,0,0,.5)}
.game-card .art{aspect-ratio:16/9}
.game-card .art img{object-fit:cover}
.game-card .body{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.game-card .head{display:flex;gap:1rem;align-items:center}
.game-card .app-icon{width:64px;height:64px;border-radius:16px;flex:none;border:2px solid rgba(217,169,78,.3)}
.game-card h3{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.15;color:var(--gold-lite)}
.game-card .status{font-family:var(--serif);font-size:.66rem;letter-spacing:.2em;color:var(--gem);
  text-transform:uppercase;margin-top:.25rem}
.game-card p{color:#c9bba4}
.game-card .pill-list{justify-content:flex-start;margin:0}
.game-card .game-cta{justify-content:center;margin-top:auto;padding-top:.6rem}
.game-card .game-cta .btn{min-width:0}
.game-card.bm-card .status{color:#ff9fb8}
.game-card.bm-card h3{color:#ffd59a}
.btn-pink{background:linear-gradient(180deg,#ffa3bb,#e45c7e);color:#3d0f1c}

/* ============================================================
   BAKERY MERGE (body.bm): warm cream, caramel and strawberry
   ============================================================ */
body.bm{--bm-cream:#fff6ea;--bm-brown:#4a2c17;--bm-soft:#7a5a43;
  --bm-pink:#ef6f8e;--bm-caramel:#f2a93b;--bm-mint:#5fc4a2;--edge:3px solid #4a2c17;
  background:var(--bm-cream);color:var(--bm-brown)}
.bm nav{background:linear-gradient(180deg,rgba(255,246,234,.95) 0%,rgba(255,246,234,.7) 60%,transparent 100%)}
.bm nav.scrolled{background:rgba(255,246,234,.92);box-shadow:inset 0 -1px 0 rgba(74,44,23,.18)}
.bm .nav-links a{color:var(--bm-soft)}
.bm .nav-links a:hover,.bm .nav-links a.active{color:#c2476a}
.bm .nav-links a::after{background:linear-gradient(90deg,transparent,var(--bm-pink),transparent)}
.bm .menu-btn{background:rgba(255,246,234,.8);border-color:rgba(74,44,23,.25)}
.bm .menu-btn span{background:var(--bm-brown)}
.bm .drawer{background:linear-gradient(180deg,#fff6ea,#ffe2c6)}
.bm .drawer a{color:var(--bm-brown)}
.bm .drawer a:hover{color:#c2476a;background:rgba(239,111,142,.1)}
.bm .drawer .drawer-rule{background:linear-gradient(90deg,transparent,var(--bm-caramel),transparent)}
.bm .eyebrow{color:#c2476a;border-color:rgba(239,111,142,.4);background:rgba(239,111,142,.1)}
.bm .btn{box-shadow:0 6px 0 rgba(74,44,23,.35)}
.bm .btn:hover{box-shadow:0 9px 0 rgba(74,44,23,.35)}
.bm .btn-ghost{background:rgba(255,255,255,.6);color:var(--bm-brown);border:3px solid transparent;
  box-shadow:inset 0 0 0 2px rgba(74,44,23,.45)}
.bm .btn-ghost:hover{background:#fff}
.bm .rule{background:linear-gradient(90deg,transparent,#f2a93b,#ef6f8e,#f2a93b,transparent)}

.bm-hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:6.5rem 0 4rem;overflow:hidden;
  background:repeating-conic-gradient(from 0deg at 30% 45%,rgba(255,255,255,.26) 0 7deg,transparent 7deg 18deg),
    radial-gradient(ellipse 80% 70% at 30% 40%,#ffe9cf 0%,#ffd2a8 60%,#ffc08e 100%)}
.bm-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.bm-hero-grid{grid-template-columns:1fr;text-align:center}}
.bm-hero h1 img{width:min(540px,86vw);height:auto;margin:0 0 1rem;
  filter:drop-shadow(0 10px 16px rgba(120,60,10,.3))}
@media(max-width:900px){.bm-hero h1 img{margin-inline:auto}}
.bm-hero .hero-line{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.1;margin-bottom:.7rem}
.bm-hero .hero-line span{color:#d24c70}
.bm-hero .lede{color:var(--bm-soft);font-size:clamp(1rem,1.5vw,1.12rem);max-width:48ch;margin-bottom:1.8rem}
@media(max-width:900px){.bm-hero .lede{margin-inline:auto}}
.bm-hero .hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-start}
@media(max-width:900px){.bm-hero .hero-btns{justify-content:center}}
.bm .badge-row{justify-content:flex-start;color:var(--bm-soft)}
@media(max-width:900px){.bm .badge-row{justify-content:center}}
.bm .badge-row span{background:rgba(255,255,255,.6);border-color:rgba(74,44,23,.2)}
.bm .badge-row span.hot{color:#c2476a;border-color:rgba(239,111,142,.6);background:rgba(255,255,255,.75);box-shadow:none}
.bm .phone{border-color:#4a2c17;background:#4a2c17;
  box-shadow:0 26px 50px rgba(120,60,10,.35),0 0 0 3px rgba(255,255,255,.6)}
.bm .phone::before{background:#4a2c17}
.bm .phone-glow{background:radial-gradient(circle,rgba(255,255,255,.7),transparent 65%)}

.bm .game{background:var(--bm-cream)}
.bm .features{background:linear-gradient(180deg,#fff6ea,#ffe9d4)}
.bm .gallery{background:linear-gradient(180deg,#ffe9d4,#ffe2c6)}
.bm .game h2,.bm .features-head h2,.bm .gallery h2{color:var(--bm-brown)}
.bm .game h2 span{color:#d24c70}
.bm .game p{color:var(--bm-soft)}
.bm .banner{border-radius:var(--r);border:var(--edge);overflow:hidden;box-shadow:0 12px 0 rgba(74,44,23,.25)}
.bm .pill-list li{background:#fff;border-color:rgba(242,169,59,.55);color:#8a4d12}
.bm .card{background:#fff;box-shadow:0 8px 0 rgba(74,44,23,.25)}
.bm .card:hover{box-shadow:0 16px 0 rgba(74,44,23,.25)}
.bm .card::before{background:linear-gradient(90deg,var(--bm-caramel),var(--bm-pink),var(--bm-mint))}
.bm .card .icon{border-color:rgba(242,169,59,.35);background:radial-gradient(circle at 40% 30%,#fff3df,#ffe0bd)}
.bm .card .icon img{filter:drop-shadow(0 4px 6px rgba(120,60,10,.25))}
.bm .card h3{color:#b5462f}
.bm .card p{color:var(--bm-soft)}
.bm .shots{grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.bm .shots{grid-template-columns:repeat(2,1fr);gap:1rem}}
.bm .shot{aspect-ratio:1080/2340;box-shadow:0 12px 0 rgba(74,44,23,.25)}
.bm .shot::before{color:#fff;background:rgba(74,44,23,.7);border-color:rgba(255,255,255,.4)}
.bm .slot{background:#ffe9d4}
.bm .lightbox{background:rgba(60,35,18,.92)}
.bm .lb-btn{background:rgba(255,246,234,.9);color:var(--bm-brown);border-color:rgba(74,44,23,.3)}
.bm .lb-count{color:#ffe2c6}

.support{background:linear-gradient(180deg,#ffe2c6,#fff6ea)}
.support-head{text-align:center}
.support-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4.2vw,3rem)}
.support-head p{color:var(--bm-soft);max-width:56ch;margin:.8rem auto 0}
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1.4rem;margin-top:2.4rem}
.support-card{padding:1.5rem;border-radius:var(--r);border:var(--edge);background:#fff;box-shadow:0 8px 0 rgba(74,44,23,.2)}
.support-card h3{font-family:var(--display);font-weight:800;font-size:1.2rem;color:#b5462f;margin-bottom:.4rem}
.support-card p{color:var(--bm-soft);font-size:.97rem}
.support-card a{color:#c2476a;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.game-card .art.dt-art{position:relative;display:grid;place-items:center;background:#0a0806}
.game-card .art.dt-art .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.game-card .art.dt-art .logo-over{position:relative;z-index:3;width:72%;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.7))}
.bm .card-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Official App Store and Google Play badges, sized by --h (the App Store badge's height). Google's image has
   clear space built in, so it is drawn taller with negative margins to match. Both shrink on small screens
   and stay side by side. */
.store-badges{--h:48px;display:flex;gap:.9rem;align-items:center;flex-wrap:nowrap;margin:1.3rem 0 .4rem}
.store-badges a{display:block;line-height:0;transition:transform .15s}
.store-badges a:hover{transform:translateY(-2px)}
.store-badges img.apple{height:var(--h);width:auto}
.store-badges img.google{height:calc(var(--h)*1.48);width:auto;margin:calc(var(--h)*-.24) calc(var(--h)*-.1875)}
.game-card .store-badges{--h:clamp(34px,10vw,48px);justify-content:center;margin:auto 0 0;padding-top:.6rem}
.game-card .store-badges + .game-cta{margin-top:0}
/* In the Bakery Merge page heading, the badges match the buttons under them: the same height and gap. */
.bm-hero .store-badges{--h:clamp(38px,11.5vw,56px);gap:1.1rem;margin:1.4rem 0 1.1rem}
@media(max-width:900px){.bm-hero .store-badges{justify-content:center}}
/* On phones the two heading buttons stay on one line too: a little less padding, and smaller text on the narrowest screens. */
@media(max-width:480px){.bm-hero .hero-btns{flex-wrap:nowrap;gap:.7rem}
  .bm-hero .hero-btns .btn{padding:.78rem clamp(.9rem,4vw,1.4rem);font-size:clamp(.86rem,3.9vw,1.03rem);white-space:nowrap}}