/* Home B: a playful product-first layout on the shared Blupoli design foundation.
 * Brand colors and semantics come from packages/ui/blupoli-design.css.
 */
body:has(.home-hero) { --content-max: 1380px; }
body:has(.home-hero) main { padding-bottom: 58px; }
.home-hero, .home-section, .home-daily, .home-signup { width:min(calc(100% - 48px),var(--content-max)); margin-inline:auto; }
.home-hero {
  min-height: 440px; display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:clamp(12px,3vw,48px); align-items:center;
  padding:36px clamp(22px,3vw,48px);
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:32px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
.home-hero .hero-copy { z-index:1; }
.home-hero .eyebrow { margin-bottom:15px; font-size:var(--type-caption); letter-spacing:.06em; }
.home-hero h1 { font-size:clamp(2.7rem,4.8vw,5.5rem); max-width:730px; line-height:1.02; margin:0 0 19px; letter-spacing:-.065em; }
.home-hero h1 span { display:block; color:var(--app-accent-ink); }
.home-hero .hero-lead { max-width:540px; font-size:clamp(1.03rem,1.45vw,1.19rem); line-height:1.6; margin-bottom:23px; }
.home-hero .hero-actions { gap:11px; }
.home-hero .button-primary, .home-daily .button-primary, .home-signup .button-primary {
  background:var(--brand-violet); border-color:var(--brand-violet); color:white;
  box-shadow:var(--shadow-soft);
}
.home-hero .button-primary:hover, .home-daily .button-primary:hover, .home-signup .button-primary:hover { background:var(--brand-violet); filter:brightness(.95); }
.home-hero .button { border-radius:14px; min-height:48px; }
.hero-art { position:relative; min-width:0; align-self:stretch; display:grid; place-items:center; }
.hero-art img { display:block; width:min(100%,650px); max-height:410px; height:auto; object-fit:contain; }
.hero-motto { position:absolute; inset-inline-end:6px; inset-block-start:10px; max-width:110px; text-align:center; transform:rotate(8deg); color:var(--app-accent-ink); font-size:.84rem; font-style:italic; font-weight:800; line-height:1.35; }
.home-section { padding-top:42px; border:0; }
.home-section .section-heading { max-width:800px; margin-bottom:20px; }
.home-section .section-kicker { margin-bottom:5px; letter-spacing:.07em; }
.home-section .section-heading h2 { font-size:clamp(1.55rem,2.7vw,2.4rem); line-height:1.15; letter-spacing:-.045em; margin-bottom:7px; }
.home-section .section-heading p:last-child { line-height:1.5; }
.products .product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; align-items:stretch; }
.products .product-card {
  min-height:0; display:flex; flex-direction:column; padding:22px; gap:10px;
  border:1px solid var(--line); border-radius:23px; overflow:hidden; box-shadow:var(--shadow-soft);
  background:var(--surface2);
}
.products .product-card[data-product="puzzles"] { --product-accent:var(--brand-violet); }
.products .product-card[data-product="cards"] { --product-accent:var(--brand-coral); }
.products .product-card-brain { --product-accent:var(--brand-yellow); }
.products .product-copy { align-items:stretch; flex:1; }
.products .product-card-head { margin:0 0 10px; gap:11px; }
.products .product-card .product-icon { width:48px; height:48px; border-radius:15px; background:var(--surface2); }
.products .product-card .product-icon.puzzles-icon { border-color:var(--line); }
.products .product-card .puzzles-icon i { background:var(--brand-violet); }
.products .product-card .cards-icon { border-color:var(--line); }
.products .product-card .product-label { font-size:.78rem; letter-spacing:.03em; color:var(--text-secondary); }
.products .product-card .product-status { color:var(--app-accent-ink); }
.products .product-card h3 { font-size:clamp(1.75rem,2.1vw,2.2rem); margin-bottom:10px; }
.products .product-card .product-summary { max-width:35ch; font-size:.9rem; line-height:1.55; margin-bottom:15px; }
.products .product-card .product-features { gap:5px; margin-bottom:0; }
.products .product-card .product-features span { padding:4px 8px; font-size:.68rem; background:var(--surface-soft); }
.products .product-card .product-preview {
  display:flex; align-items:center; justify-content:center; min-height:0; padding:0;
  margin-top:auto; aspect-ratio:2/1; overflow:hidden;
  border:1px solid var(--line); border-radius:15px;
  background:var(--surface2);
}
.products .product-card .product-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.products .product-card .product-cta {
  display:flex; width:100%; min-height:41px; justify-content:center; gap:8px;
  margin-top:14px; border-radius:12px; background:var(--surface); border:1px solid var(--line);
  color:var(--app-accent-ink); font-size:.88rem;
}
.products .product-card[data-product="cards"] .product-cta { color:var(--app-accent-ink); }
.products .product-card-brain .brain-icon { font-size:1.55rem; border-color:var(--line); }
.products .product-card .product-cta-disabled { color:var(--text-subtle); background:var(--surface-soft); }
.home-daily {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:22px; padding:24px 32px; min-height:188px; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-soft);
  background:var(--surface2);
}
.home-daily-copy { display:flex; align-items:flex-start; gap:18px; position:relative; z-index:1; }
.home-daily-symbol { display:grid;place-items:center; flex:none; width:56px; height:56px; border-radius:15px; background:var(--brand-violet); color:white; font-size:2rem; }
.home-daily h2 { margin:0 0 8px; font-size:clamp(1.5rem,2.35vw,2.1rem); line-height:1.18; }
.home-daily p:not(.section-kicker) { max-width:55ch; color:var(--muted); line-height:1.5; margin:0 0 17px; }
.home-daily .section-kicker { margin-bottom:4px; }
.home-daily .button { min-height:43px; padding:9px 18px; }
.home-daily-art { display:flex;align-items:center;justify-content:center;gap:0; flex:none; min-width:225px; height:160px; }
.home-daily-art span { display:grid;place-items:center; width:93px; height:126px; border:5px solid white; border-radius:15px; background:#fff; color:#25234F; font-family:Georgia,serif; font-size:4rem; box-shadow:0 12px 23px rgba(25,20,70,.15); transform:rotate(-15deg) translateX(23px); }
.home-daily-art span:nth-child(2) { z-index:1; color:var(--brand-yellow); transform:rotate(4deg) translateY(-9px); }
.home-daily-art span:nth-child(3) { color:var(--brand-coral); transform:rotate(18deg) translateX(-21px); }
.home-featured { padding-top:33px; }
.featured-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.featured-game {
  min-width:0; padding:12px 10px 13px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:3px; border:1px solid var(--line); border-radius:17px;
  background:var(--surface); box-shadow:var(--shadow-soft); transition:transform .15s ease,border-color .15s ease;
}
.featured-game:is(:hover,:focus-visible) { border-color:var(--brand-violet); transform:translateY(-3px); }
.featured-icon {
  display:grid;place-items:center;width:100%;max-width:134px;height:85px;border-radius:13px;
  background:var(--surface2);
  color:var(--app-accent-ink); font-size:3.1rem; font-weight:800; line-height:1;
}
.featured-game-nonogram .featured-icon,.featured-game-freecell .featured-icon { background:var(--surface2); color:var(--app-accent-ink); }
.featured-game-klondike .featured-icon,.featured-game-kakuro .featured-icon { background:var(--surface2); }
.featured-game-spider .featured-icon { background:var(--surface2); }
.featured-game strong { font-size:.85rem; line-height:1.25; padding-top:6px; }
.featured-game small { font-size:.72rem; color:var(--muted); }
.home-discover .ecosystem { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; min-height:0; }
.home-discover .ecosystem-core { display:none; }
.home-discover .ecosystem-primary,.home-discover .ecosystem-editorial { display:contents; }
.home-discover .ecosystem-node { padding:18px; min-height:150px; gap:9px; border:1px solid var(--line); border-radius:18px; }
.home-discover .ecosystem-node-icon { width:40px;height:40px;flex-basis:40px; }
.home-discover .ecosystem-node strong { font-size:1rem; }
.home-discover .ecosystem-node em { font-size:.75rem; }
.home-discover .ecosystem-node-arrow { inset:12px 13px auto auto; }
.home-section.latest { padding-top:36px; }
.latest .latest-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.latest-grid .latest-card:first-child { display:flex;grid-column:auto;flex-direction:column;min-height:0; }
.latest-grid .latest-card:first-child .latest-card-cover { height:auto;aspect-ratio:1200/630; }
.latest-grid .latest-card:first-child .latest-card-body { min-height:0; padding:20px; }
.latest-grid .latest-card:first-child h3 { font-size:1.18rem; }
.latest .latest-card-body { min-height:215px; }
.latest .latest-card p { font-size:.87rem; }
.home-signup {
  margin-top:24px; padding:22px 30px; border-radius:22px; border:1px solid var(--line);
  background:var(--surface2);
  display:flex; gap:18px; align-items:center; box-shadow:var(--shadow-soft);
}
.home-signup-icon { display:grid;place-items:center; width:66px; height:66px; flex:none; font-size:2.5rem; border-radius:20px; background:var(--surface); }
.home-signup > div:nth-child(2) { flex:1; }
.home-signup h2 { font-size:1.3rem;line-height:1.2;margin-bottom:5px; }
.home-signup p { margin:0; color:var(--muted); font-size:.87rem; }
.home-signup .button { flex:none; }
@media (max-width:1050px) {
  .home-hero { grid-template-columns:1fr 1fr; padding:30px; }
  .hero-motto { display:none; }
  .products .product-grid { gap:12px; }
  .products .product-card { padding:17px; }
  .featured-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-discover .ecosystem { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .home-hero,.home-section,.home-daily,.home-signup { width:min(calc(100% - 28px),var(--content-max)); }
  .home-hero { grid-template-columns:1fr; padding:26px 22px 10px; gap:0; }
  .home-hero h1 { font-size:clamp(2.45rem,8vw,4.15rem); }
  .hero-art img { max-height:320px; }
  .products .product-grid { grid-template-columns:1fr; }
  .products .product-card .product-preview { min-height:110px; }
  .home-daily { padding:19px; }
  .home-daily-art { min-width:145px; transform:scale(.8); transform-origin:center right; }
  .latest .latest-grid { grid-template-columns:1fr 1fr; }
  .home-signup { flex-wrap:wrap; }
}
@media (max-width:510px) {
  .home-hero .hero-actions .button { width:100%; }
  .home-hero .hero-lead { font-size:.98rem; }
  .hero-art img { max-height:270px; }
  .home-daily { padding:20px; }
  .home-daily-symbol { width:45px;height:45px;font-size:1.55rem; }
  .home-daily-copy { gap:12px; }
  .home-daily-art { display:none; }
  .home-daily .button { width:100%; }
  .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-discover .ecosystem { grid-template-columns:1fr; }
  .home-discover .ecosystem-primary .ecosystem-node,.home-discover .ecosystem-editorial .ecosystem-node { min-height:0; }
  .latest .latest-grid { grid-template-columns:1fr; }
  .home-signup { padding:18px; }
  .home-signup .button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .featured-game { transition:none; }
}