/* ===== BIRD RUNN — Warm Storybook Arcade design system =====================
   The menus are cut from the same world as the art: warm parchment panels,
   cocoa ink, honey-gold accents, sunrise glow, soft hand-crafted edges.
   Display: Lilita One (logo + headings). UI: Nunito (everything else).        */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap');

:root {
  --honey:      #f4b740;
  --honey-deep: #df9018;
  --honey-soft: #ffd877;
  --cream:      #fbf1d6;   /* main panel surface */
  --cream-2:    #f4e1b6;   /* panel bottom / warmer */
  --parchment:  #fffaf0;
  --cocoa:      #3c2918;   /* ink on cream */
  --cocoa-soft: #8a6a44;   /* muted ink on cream */
  --wood:       #b9802f;   /* warm border / wood */
  --wood-deep:  #6f4a22;
  --coral:      #e7825a;
  --dusk:       #171024;   /* dark backdrop base */
  --cream-ink:  #fdf4df;   /* light text on dark backdrops */
  --line:       rgba(90,55,20,.16);
  --line-2:     rgba(90,55,20,.30);

  --font-display: 'Lilita One', system-ui, sans-serif;
  --font-ui:      'Nunito', system-ui, -apple-system, sans-serif;

  --r-sm: 14px; --r: 20px; --r-lg: 28px; --pill: 999px;
  --shadow:    0 22px 55px rgba(50,26,6,.42);
  --shadow-sm: 0 9px 24px rgba(50,26,6,.30);
}

.br * { box-sizing: border-box; }
.br, .br body { font-family: var(--font-ui); }

/* sunrise backdrop helper (use behind menus) */
.br-sky { position:fixed; inset:0; background:url('img/story/title_bg.webp') center/cover no-repeat; }
.br-sky-warm { position:fixed; inset:0; background:
   radial-gradient(120% 90% at 50% 32%, rgba(255,196,110,.10) 0%, rgba(40,20,30,.55) 55%, rgba(16,10,24,.94) 100%); }

/* ---- logo (SVG wordmark wrapper) ---- */
.br-logo { display:block; margin:0 auto; }
.br-logo svg { display:block; width:100%; height:auto; }
.br-logo img { display:block; width:100%; height:auto;
  filter: drop-shadow(0 0 4px rgba(14,8,4,1)) drop-shadow(0 0 9px rgba(14,8,4,.9)) drop-shadow(0 0 17px rgba(14,8,4,.7)) drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* kicker / tagline */
.br-kicker {
  font-family: var(--font-ui); font-weight: 800; color: var(--honey-soft);
  letter-spacing: .32em; text-transform: uppercase; text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* headings */
.br-h1 { font-family: var(--font-display); font-weight:400; color: var(--cocoa); letter-spacing:.01em; text-align:center; }
.br-h2 { font-family: var(--font-display); font-weight:400; color: var(--cocoa); letter-spacing:.01em; }
.br-sub { font-family: var(--font-ui); color: var(--cocoa-soft); text-align:center; font-weight:600; }

/* ---- buttons ---- */
.br-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-ui); font-weight: 900; letter-spacing:.05em; text-transform:uppercase;
  border:none; cursor:pointer; text-decoration:none; color:#3a2204;
  background: linear-gradient(180deg, var(--honey-soft), var(--honey) 52%, var(--honey-deep));
  border-radius: var(--pill); padding: 16px 30px; font-size: 16px;
  box-shadow: 0 6px 0 #a4621a, 0 14px 26px rgba(223,144,24,.35);
  transition: transform .09s ease, box-shadow .09s ease;
}
.br-btn:hover { transform: translateY(-1px); filter:brightness(1.03); }
.br-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #a4621a, 0 6px 14px rgba(223,144,24,.3); }

/* cream/parchment secondary — for use on the dark sunrise backdrop */
.br-btn--cream {
  color: var(--cocoa); background: linear-gradient(180deg, var(--parchment), var(--cream-2));
  border:1.5px solid var(--wood); box-shadow: 0 5px 0 rgba(111,74,34,.45), 0 10px 22px rgba(40,20,8,.3);
}
.br-btn--cream:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(111,74,34,.45); }

/* wood secondary — for use on a cream card (endcard) */
.br-btn--wood {
  color: var(--cream-ink); background: linear-gradient(180deg, #7c552c, var(--wood-deep));
  border:1.5px solid rgba(40,22,8,.4); box-shadow: 0 5px 0 #4a3015, 0 10px 20px rgba(40,20,8,.3);
}
.br-btn--wood:active { transform: translateY(3px); box-shadow: 0 2px 0 #4a3015; }

.br-btn--sm { padding: 11px 20px; font-size: 13px; }
.br-btn--block { width:100%; }

/* ---- card / panel (warm parchment) ---- */
.br-card {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--cream) 60%, var(--cream-2) 100%);
  border:1.5px solid var(--wood); border-radius: var(--r-lg);
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,.65);
  padding: 26px; color: var(--cocoa);
}

/* quiet text link */
.br-link {
  font-family: var(--font-ui); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color: var(--cream-ink); text-decoration:none; font-size:12px; cursor:pointer; opacity:.8;
}
.br-link:hover { opacity:1; }

/* fixed top-left Home button */
.br-home {
  position: fixed; top: 14px; left: 16px; z-index: 50;
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-ui); font-weight:800; font-size:13px; letter-spacing:.05em;
  color: var(--cocoa); background: linear-gradient(180deg, var(--parchment), var(--cream-2));
  border:1.5px solid var(--wood); border-radius: var(--pill); padding: 8px 16px;
  text-decoration:none; cursor:pointer; box-shadow: 0 4px 0 rgba(111,74,34,.4);
}
.br-home:hover { transform: translateY(-1px); }