/* ==========================================================================
   TODOREALM — Realm theme
   A dark-fantasy repaint of the Techsotope design system. Everything here is
   scoped to `body.realm`, so the studio pages keep their cyan/violet identity
   untouched. Layout classes are inherited from style.css; this file only
   re-tints the tokens and adds the fantasy-specific components.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

body.realm{
  /* Navy-black ground, sampled from the app icon */
  --bg-void:      #0a0f18;
  --bg-panel:     #101827;
  --bg-panel-2:   #16223a;

  /* Antique gold rules */
  --line:         rgba(201, 162, 39, 0.20);
  --line-strong:  rgba(212, 175, 55, 0.45);

  /* Primary accent — gold (mapped onto the --cyan slot) */
  --cyan:         #c9a227;
  --cyan-dim:     #cba53a;

  /* Secondary — parchment (mapped onto the --violet slot) */
  --violet:       #d8c9a8;
  --violet-dim:   #a8946c;

  /* Parchment type on navy */
  --text-primary: #ece0c8;
  --text-muted:   #a49b88;
  --text-faint:   #6f7789;

  /* Realm-only tokens */
  --parchment:      #ece0c8;
  --parchment-deep: #d8c9a8;
  --gold-bright:    #e8c86a;
  --ink:            #2a2114;

  --f-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-body: 'EB Garamond', Georgia, 'Times New Roman', serif;

  background: var(--bg-void);
  color: var(--text-primary);
  font-size: 1.06rem;
}

/* ---------- Ground texture: warm vellum instead of the lab grid ---------- */
body.realm::before{
  background-image:
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(201,162,39,0.13), transparent 72%),
    radial-gradient(ellipse 65% 50% at 8% 24%, rgba(30,48,82,0.75), transparent 72%),
    radial-gradient(ellipse 60% 45% at 92% 70%, rgba(24,38,66,0.65), transparent 72%),
    repeating-linear-gradient(94deg, rgba(201,162,39,0.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(4deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 4px);
  background-size: auto, auto, auto, 7px 7px, 9px 9px;
  mask-image: none;
  opacity: 0.9;
}

body.realm ::selection{ background: var(--cyan); color: var(--ink); }
body.realm :focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }

body.realm h1, body.realm h2, body.realm h3{
  letter-spacing: 0.005em;
  line-height: 1.16;
}
body.realm p{ line-height: 1.68; }

/* ---------- Shell: nav & footer in realm colours ---------- */
body.realm .nav{
  background: rgba(10,15,24,0.85);
  border-bottom: 1px solid var(--line-strong);
}
body.realm .brand img{ border: 1px solid var(--line-strong); }
body.realm .nav-links a.current{ color: var(--gold-bright); }
body.realm .btn{ border-radius: 3px; }
body.realm .btn-primary{
  background: linear-gradient(178deg, var(--gold-bright), var(--cyan));
  color: var(--ink);
  border-color: var(--gold-bright);
}
body.realm .btn-primary:hover{
  background: linear-gradient(178deg, #f0d98a, var(--gold-bright));
  box-shadow: 0 0 22px rgba(201,162,39,0.35);
}
body.realm .btn-ghost:hover{ border-color: var(--gold-bright); color: var(--gold-bright); }
body.realm .nav-toggle{ border-radius: 3px; }

body.realm footer{ border-top: 1px solid var(--line-strong); }
body.realm .footer-links a:hover{ color: var(--gold-bright); }
body.realm .footer-links a.footer-privacy{
  color: var(--parchment);
  border-bottom: 1px solid var(--line-strong);
}
body.realm .footer-links a.footer-privacy:hover{ color: var(--gold-bright); }

@media (max-width: 720px){
  body.realm .nav-links{ background: var(--bg-void); border-bottom: 1px solid var(--line-strong); }
}

/* ---------- Ornament ---------- */
/* Gold hairline with a diamond centrepiece — used between sections. */
body.realm .divider{ background: transparent; height: auto; }
.realm-rule{
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  position: relative;
  z-index: 1;
}
.realm-rule::before,
.realm-rule::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.realm-rule span{
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--line-strong);
  background: var(--bg-panel);
  flex-shrink: 0;
}

/* Panels get corner brackets rather than plain borders. */
.realm-panel{
  position: relative;
  background: linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));
  border: 1px solid var(--line);
  border-radius: 4px;
}
.realm-panel::before,
.realm-panel::after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}
.realm-panel::before{ top: 7px; left: 7px; border-right: none; border-bottom: none; }
.realm-panel::after{ bottom: 7px; right: 7px; border-left: none; border-top: none; }

/* Eyebrow reads as an inscription in this theme. */
body.realm .eyebrow{
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: var(--cyan-dim);
}
body.realm .eyebrow::before{
  border-radius: 0;
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  box-shadow: 0 0 7px var(--cyan);
}

body.realm .section-head h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

/* ---------- Hero ---------- */
.realm-hero{
  padding: clamp(2.6rem, 7vw, 5rem) var(--edge) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  position: relative;
}
.realm-appmark{
  width: clamp(92px, 13vw, 126px);
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
  border-radius: 23%;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(201,162,39,0.18));
}
.realm-hero h1{
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  background: linear-gradient(168deg, #fbf1d6 8%, var(--gold-bright) 48%, #9d7d1c 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.realm-hero .tagline{
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 2.2vw, 1.28rem);
  color: var(--parchment);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 1rem;
}
.realm-hero .lede{
  max-width: 56ch;
  margin: 1.2rem auto 0;
  font-size: 1.1rem;
}
.realm-hero .hero-actions{ justify-content: center; }

/* ---------- How It Works ---------- */
.realm-steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.3rem;
  counter-reset: step;
}
.realm-step{
  position: relative;
  padding: 2.1rem 1.6rem 1.7rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  border-top: 2px solid var(--line-strong);
}
.realm-step .ord{
  position: absolute;
  top: -0.95rem;
  left: 1.6rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  background: var(--bg-void);
  border: 1px solid var(--line-strong);
}
.realm-step .ord i{
  transform: rotate(-45deg);
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--gold-bright);
}
.realm-step h3{
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
  color: var(--parchment);
}
.realm-step p{ margin-top: 0.7rem; font-size: 0.97rem; }

/* Side quests — compact repeating cards. */
.realm-side-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1.1rem;
}
.realm-side-card{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.realm-side-card .cadence{
  font-family: var(--f-mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--parchment-deep);
}
.realm-side-card h3{ font-size: 1rem; letter-spacing: 0.04em; color: var(--parchment); }
.realm-side-card p{ font-size: 0.93rem; }

/* ---------- Showcase band: the Play Store feature graphic ---------- */
.realm-showcase{
  position: relative;
  max-width: 600px;
  margin-inline: auto;
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-panel);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
.realm-showcase img{ width: 100%; height: auto; display: block; }

/* ---------- Quest type cards ---------- */
.realm-quest-types{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
.realm-quest-type{
  padding: 1.7rem 1.6rem;
}
.realm-quest-type h3{
  font-size: 1.14rem;
  letter-spacing: 0.05em;
  color: var(--parchment);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.realm-quest-type p{ margin-top: 0.95rem; font-size: 0.96rem; }
.realm-quest-type p.note{
  color: var(--cyan-dim);
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-size: 0.91rem;
}
.realm-quest-type strong{ color: var(--parchment); font-weight: 600; }

/* ---------- Realm tiers ---------- */
.realm-tiers{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  counter-reset: tier;
}
.realm-tiers li{
  background: var(--bg-panel);
  padding: 1.4rem 1.3rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  color: var(--parchment);
}
.realm-tiers li span{
  display: block;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.6rem;
}

/* ---------- Guilds ---------- */
.realm-guilds{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem;
}
.realm-guild{
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.6rem 1.5rem;
  transition: border-color .25s ease, transform .25s ease;
}
.realm-guild:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.realm-guild .guild-head{
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.realm-guild svg{
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--cyan);
}
.realm-guild h3{
  font-size: 1.03rem;
  letter-spacing: 0.05em;
  color: var(--parchment);
}
.realm-guild .domain{
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-top: 0.3rem;
}
.realm-guild p{ margin-top: 1rem; font-size: 0.94rem; }

/* ---------- Screenshot placeholders ---------- */
.realm-frames{
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  padding: 0.4rem 0 1.2rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.realm-frames::-webkit-scrollbar{ height: 6px; }
.realm-frames::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 4px; }
.realm-frame{
  flex: 0 0 auto;
  margin: 0;               /* figure carries a 40px side margin by default */
  width: clamp(196px, 27vw, 262px);
  scroll-snap-align: start;
}
/* Real listing art arrives with its own frame and caption baked in, so it gets
   a plain gold hairline rather than the decorative empty plate. */
.realm-frame.shot img{
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1281;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

/* ---------- Coming soon ---------- */
.realm-cta{
  text-align: center;
  padding: clamp(2.2rem, 5vw, 3.4rem);
}
.realm-cta h2{
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin-top: 0.9rem;
  color: var(--parchment);
}
.realm-cta p{ margin: 1.1rem auto 0; max-width: 50ch; }
.realm-badges{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
/* Non-interactive store badge — TodoRealm has no store listing yet. */
.realm-badge{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.3rem;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
  color: var(--text-faint);
  cursor: default;
}
.realm-badge svg{ flex-shrink: 0; opacity: 0.55; }
.realm-badge .store-text{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  font-family: var(--f-body);
}
.realm-badge .store-text small{
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.realm-badge .store-text strong{
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ---------- Policy page ----------
   Each h2 is the first child of its own <section>, so style.css's
   `.policy h2:first-child` reset matches every heading and kills its top
   margin and rule. Carry the rhythm on the section boundary instead, which is
   where it belongs semantically. */
body.realm .policy section{ padding: 0; }
body.realm .policy section + section{
  margin-top: 2.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--line);
}
body.realm .policy h2{ margin-top: 0; padding-top: 0; border-top: none; }
body.realm .policy section:first-child p{ margin-top: 0; }
/* Match the hero's measure to the prose column so the title and body align. */
body.realm .policy-hero{ max-width: 74ch; }
body.realm .policy h2{ letter-spacing: 0.04em; font-size: 1.18rem; }
body.realm .policy a{ color: var(--gold-bright); }
body.realm .policy a:hover{ color: #f3dc95; }
body.realm .policy li::marker{ color: var(--cyan-dim); }
body.realm .policy-hero h1{ letter-spacing: 0.02em; }

/* ---------- Responsive ---------- */
@media (prefers-reduced-motion: reduce){
  .realm-guild{ transition: none; }
  .realm-guild:hover{ transform: none; }
}