:root {
  --wordroom-width: 1200px;
  --wordroom-gutter: clamp(18px, 4vw, 52px);
  --nav-active-bg: color-mix(in srgb, var(--lime) 12%, var(--panel));
}

.wordroom-shell { min-height: 100dvh; }

.wordroom-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 92%, var(--panel));
  border-bottom: 1px solid var(--line);
  z-index: 8;
}

.wordroom-header-inner {
  max-width: var(--wordroom-width);
  margin-inline: auto;
  padding-inline: var(--wordroom-gutter);
  min-height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.wordroom-brand {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 9px;
  font-size: 1.45rem;
  font-weight: 820;
  letter-spacing: -.06em;
}

.wordroom-brand img { width: 37px; height: 37px; }
.wordroom-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.wordroom-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 37px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

.wordroom-nav a:hover { color: var(--text); background: var(--card); }
.wordroom-nav a[aria-current] { color: var(--lime); background: var(--nav-active-bg); }
.wordroom-header .top-actions, .wordroom-header #topStats { flex-wrap: nowrap; gap: 6px; }
.wordroom-header .pill { border-color: transparent; padding-inline: 5px; font-variant-numeric: tabular-nums; }
.wordroom-header .icon-btn { width: 42px; height: 42px; border-radius: 13px; }
.wordroom-shell .workspace { width: 100%; max-width: var(--wordroom-width); padding: 26px var(--wordroom-gutter) 50px; }
.wordroom-shell .workspace > #screen { min-width: 0; }

.wordroom-home { display: grid; gap: clamp(22px, 3.7vw, 37px); }
.wordroom-home .section-heading { margin-bottom: 13px; }
.wordroom-home .section-heading h2 { font-size: clamp(1.37rem, 2.5vw, 1.8rem); }
.wordroom-home .section-heading .text-btn { font-weight: 720; }

.home-hero {
  --hero-wash: color-mix(in srgb, var(--violet) 16%, var(--panel));
  --hero-light: color-mix(in srgb, var(--lime) 14%, var(--panel));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 316px;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, var(--violet) 33%, var(--line));
  border-radius: clamp(19px, 3vw, 31px);
  background: radial-gradient(ellipse at 84% 15%, var(--hero-light) 0%, transparent 52%), linear-gradient(124deg, var(--hero-wash), var(--panel) 75%);
}

.home-hero--illustrated { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.home-hero-copy { position: relative; z-index: 1; }
.home-hero h1 {
  max-width: 580px;
  font-size: clamp(2.05rem, 4.65vw, 4.25rem);
  line-height: 1.01;
  font-weight: 800;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.home-hero-copy > p { color: var(--muted); margin: 15px 0 18px; font-size: clamp(.9rem, 1.45vw, 1.05rem); line-height: 1.5; }
.home-hero-copy > .btn { min-height: 44px; border-radius: 12px; padding-inline: 16px; }
.home-hero-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  margin: -24px -15px;
}
.home-hero-art::before {
  position: absolute;
  z-index: -1;
  width: min(87%, 340px);
  aspect-ratio: 1;
  content: '';
  border-radius: 50%;
  opacity: .75;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 18%, transparent) 0%, transparent 72%);
  border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
}
.home-hero-art img {
  display: block;
  width: 100%;
  height: clamp(218px, 29vw, 335px);
  object-fit: contain;
  filter: drop-shadow(0 14px 17px #1211232a);
}

.home-goal { width: min(100%, 329px); margin-top: 25px; }
.home-goal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 710;
}
.home-goal-heading span { display: inline-flex; align-items: center; gap: 6px; }
.home-goal-heading strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-goal--done .home-goal-heading span { color: var(--success-ink); }
.home-goal progress {
  display: block;
  appearance: none;
  width: 100%;
  height: 7px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--line) 76%, var(--panel));
  color: var(--lime);
}
.home-goal progress::-webkit-progress-bar { background: color-mix(in srgb, var(--line) 76%, var(--panel)); }
.home-goal progress::-webkit-progress-value { border-radius: 10px; background: var(--lime); }
.home-goal progress::-moz-progress-bar { border-radius: 10px; background: var(--lime); }
.home-goal--done progress::-webkit-progress-value { background: var(--success-ink); }
.home-goal--done progress::-moz-progress-bar { background: var(--success-ink); }

.wordroom-shell .deck-grid { gap: 13px; }
.wordroom-shell .deck-tile { padding: 8px; gap: 0; border-radius: 18px; }
.wordroom-shell .deck-tile .deck-art {
  --wash: color-mix(in srgb, var(--tone) 11%, var(--panel));
  background: radial-gradient(ellipse at 70% 5%, color-mix(in srgb, var(--tone) 30%, var(--panel)) 0%, var(--wash) 78%);
  height: clamp(77px, 9vw, 108px);
  border-radius: 11px;
}
.wordroom-shell .deck-art::before, .wordroom-shell .deck-art::after {
  inset-inline-start: 68%;
  width: 145px;
  height: 73px;
  border-radius: 16px;
}
.wordroom-shell .deck-art::before { transform: translate(-50%,-50%) rotate(-25deg); }
.wordroom-shell .deck-art::after { transform: translate(-50%,-50%) rotate(-36deg) scale(1.35); }
.deck-art-stamp {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border: 1px solid color-mix(in srgb, var(--tone) 33%, transparent);
  border-radius: 14px;
  transform: rotate(-8deg);
  background: color-mix(in srgb, var(--tone) 21%, var(--panel));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tone) 10%, var(--panel));
}
.wordroom-shell .deck-art-stamp svg { transform: none; }
.wordroom-shell .deck-info { padding: 13px 8px 7px; }
.wordroom-shell .deck-info h3 { font-size: 1.09rem; }
.wordroom-shell .deck-info p { margin: 6px 0 9px; font-size: .84rem; }
.wordroom-shell .deck-meta { gap: 8px; min-height: 30px; padding-top: 6px; font-size: .79rem; }
.wordroom-shell .deck-meta .arrow { display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); border-radius: 50%; background: var(--card); }
.wordroom-shell .deck-tile:hover .arrow { color: var(--lime); background: var(--nav-active-bg); }

.game-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.game-feature {
  --game-accent: var(--violet);
  --game-illustration: #d5baff;
  --game-ink: #452e69;
  --game-secondary: #ffc886;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 160px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 34%, var(--line));
  border-radius: 19px;
  background: radial-gradient(ellipse at 83% 22%, color-mix(in srgb, var(--game-accent) 24%, var(--panel)), var(--panel) 76%);
  transition: border-color .16s, transform .16s;
}
.game-feature--blast {
  --game-accent: var(--peach);
  --game-illustration: #ffd282;
  --game-ink: #633b2c;
  --game-secondary: #f59bba;
}
.game-feature:hover { border-color: var(--game-accent); transform: translateY(-2px); }
.game-feature-copy { display: grid; gap: 5px; width: 67%; }
.game-feature-copy > strong { font-size: clamp(1.35rem, 2.85vw, 2rem); letter-spacing: -.05em; line-height: 1.05; }
.game-feature-copy small { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.game-feature-arrow {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  margin-top: 5px;
  border-radius: 9px;
  color: var(--game-accent);
  background: color-mix(in srgb, var(--game-accent) 13%, var(--panel));
}
.game-feature-art {
  position: absolute;
  z-index: -1;
  inset: 0 4% 0 auto;
  width: 39%;
  display: grid;
  place-items: center;
}
.game-feature-art::before {
  position: absolute;
  width: min(97%, 140px);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--game-accent) 39%, transparent);
  border-radius: 50%;
  content: '';
}
.game-feature-shape, .game-feature-mascot {
  position: absolute;
  width: clamp(39px, 7.4vw, 92px);
  aspect-ratio: 1 / .8;
  border: 2px solid var(--game-ink);
  border-radius: 13px;
}
.game-feature-shape { background: var(--game-secondary); transform: translate(-14%, 9%) rotate(-17deg); }
.game-feature-mascot {
  display: grid;
  place-items: center;
  background: var(--game-illustration);
  box-shadow: inset 0 -5px 0 #1d143018, 0 6px 10px #1d143027;
  transform: translate(12%, -9%) rotate(11deg);
}
.game-feature-face {
  display: block;
  width: 19%;
  height: 14%;
  margin-top: 12%;
  border: 2px solid var(--game-ink);
  border-top: 0;
  border-radius: 0 0 50% 50%;
}
.game-feature-face::before {
  position: absolute;
  top: 38%;
  left: 32%;
  width: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--game-ink);
  box-shadow: clamp(12px, 2.4vw, 29px) 0 var(--game-ink);
  content: '';
}
.game-feature-spark {
  position: absolute;
  top: 18%;
  right: 9%;
  width: 17px;
  height: 17px;
  background: var(--game-secondary);
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}
.game-feature--blast .game-feature-shape {
  width: 37%;
  height: 9%;
  border: 0;
  border-radius: 50%;
  opacity: .66;
  transform: translate(-35%, 42%) rotate(-29deg);
}
.game-feature--blast .game-feature-mascot { border-radius: 50% 46% 55% 44%; aspect-ratio: 1; transform: translate(11%, -4%) rotate(-11deg); }
.game-feature--blast .game-feature-mascot::before {
  position: absolute;
  inset: 10% auto auto 15%;
  width: 17%;
  height: 13%;
  content: '';
  background: #fff6d1;
  border-radius: 50%;
  transform: rotate(-20deg);
  opacity: .70;
}

.home-activity { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.home-activity h2 { font-size: 1.03rem; }
.home-activity .activity { min-width: 185px; margin: 0; gap: 6px; }
.home-activity .activity i { min-width: 23px; }
.home-activity .text-btn { white-space: nowrap; }

@media (max-width: 900px) and (min-width: 761px) {
  .wordroom-header-inner { gap: 9px; }
  .wordroom-nav a { padding-inline: 7px; gap: 5px; }
  .wordroom-nav a svg { width: 15px; height: 15px; }
  .wordroom-brand { font-size: 1.15rem; gap: 5px; }
  .wordroom-brand img { width: 28px; height: 28px; }
}

@media (max-width: 760px) {
  .wordroom-header-inner { min-height: 61px; grid-template-columns: 1fr auto; }
  .wordroom-nav {
    position: fixed;
    inset: auto 0 0;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    gap: 4px;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
  }
  .wordroom-nav a { flex-direction: column; gap: 3px; min-height: 48px; padding: 5px 1px; font-size: .75rem; }
  .wordroom-shell .workspace { padding-top: 16px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .wordroom-header .icon-btn { width: 38px; height: 38px; }
  #notice { bottom: 72px; }
  .home-hero { min-height: 245px; }
  .home-hero h1 { font-size: clamp(1.95rem, 5.8vw, 2.7rem); }
  .home-hero-art { margin-inline: -17px; }
  .home-hero-art img { height: clamp(135px, 30vw, 215px); }
}

@media (max-width: 550px) {
  :root { --wordroom-gutter: 14px; }
  .wordroom-brand { font-size: 1.25rem; gap: 6px; }
  .wordroom-brand img { width: 31px; height: 31px; }
  .wordroom-header .pill { padding-inline: 1px; font-size: .75rem; }
  .wordroom-header .top-actions, .wordroom-header #topStats { gap: 5px; }
  .home-hero { padding: 20px 17px; }
  .home-hero--illustrated { grid-template-columns: minmax(0, 1fr) minmax(0, .47fr); }
  .home-hero-copy > p { margin: 10px 0 13px; }
  .home-hero-art { margin-inline: -10px -17px; }
  .home-hero-art::before { width: 96%; }
  .home-goal { margin-top: 17px; }
  .wordroom-shell .deck-tile { grid-template-columns: 63px minmax(0, 1fr); gap: 8px; }
  .wordroom-shell .deck-tile .deck-art { min-height: 66px; height: 100%; }
  .wordroom-shell .deck-info { padding: 4px 5px 3px 2px; }
  .wordroom-shell .deck-info h3 { font-size: .99rem; }
  .wordroom-shell .deck-info p { margin: 4px 0 5px; font-size: .8rem; }
  .deck-art-stamp { width: 38px; height: 38px; border-radius: 10px; }
  .deck-art-stamp svg { width: 24px; height: 24px; }
  .game-feature { min-height: 143px; padding: 13px 10px; }
  .game-feature-copy { width: 100%; }
  .game-feature-copy > strong { padding-inline-end: 40px; }
  .game-feature-copy small { font-size: .77rem; }
  .game-feature-art { inset: 10px 9px auto auto; width: 42px; height: 42px; }
  .game-feature-shape, .game-feature-mascot { width: 32px; border-radius: 7px; }
  .game-feature-face { border-width: 1px; }
  .game-feature-face::before { box-shadow: 10px 0 var(--game-ink); }
  .game-feature-spark { width: 9px; height: 9px; top: 5%; right: 0; }
  .home-activity { flex-wrap: wrap; gap: 9px; }
  .home-activity .activity { order: 3; width: 100%; }
}

@media (max-width: 360px) {
  .home-hero--illustrated { grid-template-columns: minmax(0, 1fr) minmax(0, .37fr); }
  .home-hero h1 { font-size: 1.8rem; }
  .wordroom-brand { font-size: 1.12rem; }
  .wordroom-brand img { width: 28px; height: 28px; }
  .wordroom-header .top-actions, .wordroom-header #topStats { gap: 3px; }
  .wordroom-header .pill { font-size: .7rem; }
}