/* Shared brand connects the learning area to the main site in every theme. */
.brand-suite { display: flex; align-items: center; gap: 15px; min-width: 0; }
.milana-brand {
  display: grid;
  width: fit-content;
  flex: 0 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: .94;
  letter-spacing: -1.1px;
  color: var(--text);
}
.milana-brand span { color: var(--lime); }
.brand-section { max-width: 85px; padding-left: 15px; border-left: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.4; }
.home-eyebrow { margin-bottom: 19px; color: var(--muted); font-size: .71rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; }
.home-hero h1 em { font: inherit; }
.theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The landing site's warm paper, rose, plum and editorial typography. */
:root[data-theme="milana"] {
  color-scheme: light;
  --bg: #fffaf7;
  --sidebar: #fffaf7;
  --panel: #fffdfb;
  --card: #f9edf0;
  --line: #e9d9df;
  --text: #3d2033;
  --muted: #795c6c;
  --lime: #df2865;
  --violet: #9f2855;
  --peach: #a5573c;
  --danger: #b52b4c;
  --accent-ink: #fff;
  --tint: #f9dce5;
  --hover: #f6dce5;
  --hero-bg: #f9dce5;
  --flash-bg: linear-gradient(145deg, #fffdfb 25%, #fbe9ef);
  --success-ink: #176134;
  --success-bg: #e4f5e9;
  --success-line: #74ac83;
  --radius: 18px;
  --nav-active-bg: #f9dce5;
  font-family: Arial, Helvetica, sans-serif;
}

:root[data-theme="milana"] ::selection { background: #df2865; color: #fff; }
:root[data-theme="milana"] .wordroom-header { background: #fffaf7; }
:root[data-theme="milana"] .wordroom-header-inner { min-height: 86px; }
:root[data-theme="milana"] .wordroom-nav { border-radius: 100px; background: transparent; padding: 5px; }
:root[data-theme="milana"] .wordroom-nav a { border-radius: 100px; font-weight: 600; }
:root[data-theme="milana"] .wordroom-nav a[aria-current] { color: #9f2855; }
:root[data-theme="milana"] .wordroom-header .icon-btn { border-radius: 50%; background: transparent; }
:root[data-theme="milana"] .wordroom-shell .workspace { padding-top: 30px; }
:root[data-theme="milana"] .wordroom-home { gap: 34px; }

:root[data-theme="milana"] .home-hero {
  min-height: 355px;
  padding: clamp(26px, 4.2vw, 50px);
  border-color: #eed0da;
  border-radius: 22px;
  background: #f9dce5;
}
:root[data-theme="milana"] .home-hero--illustrated { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
:root[data-theme="milana"] .home-eyebrow { color: #795c6c; font-weight: 600; }
:root[data-theme="milana"] .home-hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -.06em;
  font-weight: 600;
}
:root[data-theme="milana"] .home-hero h1 em { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; color: #df2865; }
:root[data-theme="milana"] .home-hero-copy > p { max-width: 415px; line-height: 1.65; margin-block: 19px 23px; }
:root[data-theme="milana"] .home-hero-art::before { border-color: #e9b9cb; background: radial-gradient(circle, #fff7f9 0%, transparent 70%); opacity: .6; }
:root[data-theme="milana"] .home-hero-art img { filter: drop-shadow(0 18px 20px #71374f18); }
:root[data-theme="milana"] .home-goal { margin-top: 25px; }
:root[data-theme="milana"] .home-goal-heading { font-weight: 600; }
:root[data-theme="milana"] .section-heading h2 { font-weight: 600; letter-spacing: -.04em; }

:root[data-theme="milana"] .btn { border-radius: 100px; min-height: 44px; padding: 11px 20px; font-weight: 600; }
:root[data-theme="milana"] .home-hero-copy > .btn { min-height: 49px; border-radius: 100px; padding-inline: 25px; }
:root[data-theme="milana"] .btn-secondary { background: #fffaf7; }
:root[data-theme="milana"] .btn-primary:hover { background: #be1c51; }
:root[data-theme="milana"] .panel { border-radius: 18px; }
:root[data-theme="milana"] .wordroom-shell .deck-tile { border-radius: 18px; padding: 9px; }
:root[data-theme="milana"] .wordroom-shell .deck-art { border-radius: 11px; }
:root[data-theme="milana"] .deck-info h3 { font-weight: 600; letter-spacing: -.025em; }
:root[data-theme="milana"] .deck-open-arrow { background: #f9edf0; color: #9f2855; }
:root[data-theme="milana"] .game-feature {
  --game-accent: #9f2855;
  --game-illustration: #f4aac4;
  --game-ink: #452039;
  --game-secondary: #ffe8a0;
  background: #f9e7ed;
  border-color: #e9d9df;
  border-radius: 18px;
}
:root[data-theme="milana"] .game-feature--blast { --game-accent: #a5573c; --game-illustration: #f4cd91; --game-ink: #633b2c; --game-secondary: #ef9cbb; background: #fbf0e8; }
:root[data-theme="milana"] .game-feature-copy strong { font-weight: 600; letter-spacing: -.04em; }
:root[data-theme="milana"] .game-feature-arrow { border-radius: 50%; }
:root[data-theme="milana"] .flash-face { box-shadow: 0 12px 35px #45203906; }
:root[data-theme="milana"] .flash-word { font-weight: 600; }
:root[data-theme="milana"] .flash-translation { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
:root[data-theme="milana"] .wr-space { background: radial-gradient(ellipse at top, #66334e, #2f1929); }

/* Keep the header compact without shrinking useful touch targets. */
@media (max-width: 1100px) {
  .brand-section { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .milana-brand { font-size: 19px; }
}
@media (max-width: 760px) {
  .brand-suite { gap: 8px; }
  .milana-brand { font-size: 20px; }
  :root[data-theme="milana"] .wordroom-header-inner { min-height: 70px; }
  :root[data-theme="milana"] .wordroom-nav { padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); border-radius: 0; background: #fffaf7; }
  :root[data-theme="milana"] .wordroom-nav a { border-radius: 12px; }
  :root[data-theme="milana"] .wordroom-shell .workspace { padding-top: 18px; }
  :root[data-theme="milana"] .home-hero { min-height: 295px; padding: 27px; }
  :root[data-theme="milana"] .home-hero h1 { font-size: clamp(2rem, 5vw, 2.7rem); }
  :root[data-theme="milana"] .home-eyebrow { font-size: .65rem; margin-bottom: 15px; }
  :root[data-theme="milana"] .home-hero-copy > p { margin-block: 15px 18px; }
}
@media (max-width: 550px) {
  .theme-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .milana-brand { font-size: 19px; }
  .home-eyebrow { font-size: .62rem; letter-spacing: .09em; margin-bottom: 13px; }
  :root[data-theme="milana"] .home-hero--illustrated { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; }
  :root[data-theme="milana"] .home-hero h1 { max-width: 330px; font-size: clamp(2.15rem, 8.4vw, 2.8rem); }
  :root[data-theme="milana"] .home-hero-art { position: absolute; right: -17px; bottom: -28px; width: 140px; margin: 0; opacity: .28; pointer-events: none; }
  :root[data-theme="milana"] .home-hero-art img { height: 160px; }
  :root[data-theme="milana"] .home-goal { position: relative; z-index: 1; }
  :root[data-theme="milana"] .home-goal-heading { font-size: .75rem; }
  :root[data-theme="milana"] .wordroom-home { gap: 27px; }
  :root[data-theme="milana"] .wordroom-shell .deck-tile { padding: 8px; }
  :root[data-theme="milana"] .btn { padding-inline: 16px; }
  :root[data-theme="milana"] .grades .btn { padding-inline: 10px; }
}
@media (max-width: 360px) {
  .milana-brand { font-size: 18px; }
  :root[data-theme="milana"] .home-hero { padding-inline: 20px; }
  :root[data-theme="milana"] .home-hero h1 { font-size: 2.15rem; }
}