/* ═══════════════════════════════════════════════════════════════════════
   Mognota home page — "Tile Hero" design
   Loaded by home.html AFTER its inline <style> (and after theme.css), so
   these rules win. Same look as the games hub: colourful art tiles, chunky
   gold buttons, flat cards. Only home.html loads this file.

   Markup/links/scripts are unchanged — the only HTML edits are the old
   line icons on the hero and game tiles, swapped for /assets/art/*.svg.
   ═══════════════════════════════════════════════════════════════════════ */

body.page-home{
  --card:#141416;
  --card-line:rgba(255,255,255,.09);
  --hl-ink:#ffffff;
}
html[data-theme="light"] body.page-home{
  --card:#ffffff;
  --card-line:rgba(30,40,80,.1);
}

/* ── Buttons: the gold used on the games hub ───────────── */
.nav-cta-play,
.hero .duo-btn:not(.duo-btn-ghost),
.final-cta .duo-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),#d4a017;
  border:none;color:#0a0a0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 0 #8a6200;
}
.nav-cta-play:hover,
.hero .duo-btn:not(.duo-btn-ghost):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 0 #8a6200}
.nav-cta-play:active,
.hero .duo-btn:not(.duo-btn-ghost):active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6200}
.hero .duo-btn{height:54px;padding:0 30px;border-radius:12px}
.hero .duo-btn-ghost{border:1px solid var(--card-line);background:rgba(255,255,255,.04);box-shadow:none}
html[data-theme="light"] .hero .duo-btn-ghost{background:#fff;box-shadow:0 2px 8px rgba(30,40,80,.08)}

/* ── Hero ──────────────────────────────────────────────── */
.hero{gap:28px;padding-top:64px}
.hero-badge{color:#ffab40;background:rgba(244,124,0,.1);border-color:rgba(244,124,0,.4)}
html[data-theme="light"] .hero-badge{color:#c2410c}
.hero-text h1{font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:-.03em}
.hero-text p{font-size:16.5px}
.hero-mini-stat .num{font-size:26px}
.hero-mini-stat .lbl{font-size:10.5px;letter-spacing:.12em}

.hero-collage{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:470px;aspect-ratio:auto;
}
.hero-collage .hc-tile{
  position:relative;inset:auto;width:auto;aspect-ratio:1/1.12;
  justify-content:flex-end;align-items:flex-start;padding:14px;gap:0;
  border:none;border-radius:24px;
  box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-collage .hc-tile::before{display:none}
.hero-collage .hc-tile:hover{box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 0 2px rgba(255,182,39,.85),inset 0 1px 0 rgba(255,255,255,.2)}
.hero-collage .hc-1{background:linear-gradient(160deg,#059669,#022c22);transform:rotate(-4deg)}
.hero-collage .hc-2{background:linear-gradient(160deg,#0284c7,#082f49);transform:rotate(3deg) translateY(18px)}
.hero-collage .hc-3{background:linear-gradient(160deg,#c026d3,#4a044e);transform:rotate(3deg)}
.hero-collage .hc-4{background:linear-gradient(160deg,#be185d,#500724);transform:rotate(-3deg) translateY(18px)}
.hero-collage .hc-tile .ic{position:absolute;top:16%;left:50%;margin-left:-48px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.4))}
.hero-collage .hc-tile .ic img{display:block;width:96px;height:96px}
.hero-collage .hc-tile:hover .ic{transform:scale(1.08) rotate(-4deg)}
.hero-collage .hc-tile .lb{position:relative;font-size:15px;font-weight:900;letter-spacing:.01em;text-transform:none;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
@media(max-width:900px){
  .hero{padding-top:34px}
  .hero-collage{max-width:380px;gap:12px}
  .hero-collage .hc-tile .ic{top:14%;margin-left:-40px}
  .hero-collage .hc-tile .ic img{width:80px;height:80px}
  .hero .duo-btn{height:50px;padding:0 24px}
}

/* ── Section headings ──────────────────────────────────── */
.home-section-hd .eyebrow{color:#f47c00;letter-spacing:.2em}
html[data-theme="light"] .home-section-hd .eyebrow{color:#d96f00}
.home-section-hd h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em}
.home-section-hd p{font-size:15px}

/* ── Feature cards ─────────────────────────────────────── */
.feat-card.duo-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:22px;
  box-shadow:none;padding:24px;
}
html[data-theme="light"] .feat-card.duo-card{box-shadow:0 8px 24px rgba(30,40,80,.08)}
.feat-card::before{display:none}
.feat-card:hover{transform:translateY(-3px);border-color:rgba(var(--glow),.45);box-shadow:0 16px 30px -14px rgba(var(--glow),.45)}
.feat-card .fc-ico{width:46px;height:46px;border-radius:14px;font-size:22px;margin-bottom:16px;box-shadow:none;background-image:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
.feat-card h3{font-size:16px}
.feat-card p{font-size:13.5px}

/* ── Game tiles ────────────────────────────────────────── */
.home-games-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.home-games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.hg-card.duo-card{
  --t1:#334155;--t2:#0f172a;
  position:relative;height:230px;justify-content:flex-end;
  background:linear-gradient(160deg,var(--t1),var(--t2));
  border:none;border-radius:24px;color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2);
}
html[data-theme="light"] .hg-card.duo-card{box-shadow:0 12px 24px rgba(30,40,80,.22),inset 0 1px 0 rgba(255,255,255,.3)}
@media(max-width:600px){.hg-card.duo-card{height:196px;border-radius:22px}}
.hg-card.duo-pressable:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(0,0,0,.45),0 0 0 2px rgba(255,182,39,.85)!important;
  border-color:transparent;
}
html[data-theme="light"] .hg-card.duo-pressable:hover{box-shadow:0 18px 36px rgba(30,40,80,.3),0 0 0 2px rgba(245,158,11,.95)!important}
.hg-card::after{display:none}
.hg-banner{position:absolute;inset:0;height:auto;background:none!important;font-size:0;pointer-events:none}
.hg-banner::before,.hg-banner::after{display:none}
.hg-banner span{
  position:absolute;top:15%;left:50%;width:clamp(74px,46%,110px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  transform:translateX(-50%) rotate(-5deg);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
  transition:transform .25s;
}
.hg-banner span img{width:100%;height:100%;display:block}
.hg-card:hover .hg-banner span{transform:translateX(-50%) rotate(-5deg) scale(1.07)}
.hg-body{position:relative;padding:12px 14px 14px;z-index:2}
.hg-title{font-size:clamp(14px,1.3vw,16px);font-weight:900;letter-spacing:.01em;color:#fff;margin-bottom:7px;text-shadow:0 1px 6px rgba(0,0,0,.35)}
/* description stays in the page (search engines / screen readers) but is visually tucked away, like on the games hub */
.hg-desc{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hg-tags{gap:4px 5px;margin:0}
.hg-card .tag{background:rgba(0,0,0,.32)!important;border:none!important;box-shadow:none;color:rgba(255,255,255,.9)!important;font-size:9px;padding:3px 8px}
.home-games-more{margin-top:26px}
.home-games-more a{color:#ff9d2f;font-size:13px;letter-spacing:.1em}
html[data-theme="light"] .home-games-more a{color:#d96f00}

/* ── Steps ─────────────────────────────────────────────── */
.home-step.duo-card{background:var(--card);border:1px solid var(--card-line);border-radius:22px;box-shadow:none;padding:22px}
html[data-theme="light"] .home-step.duo-card{box-shadow:0 8px 24px rgba(30,40,80,.08)}
.home-step .n{
  width:34px;height:34px;border-radius:50%;margin-bottom:14px;color:#2b1700;
  background:linear-gradient(145deg,#ffb627,#f47c00);box-shadow:none;
}
.home-step h3{font-size:15px}
.home-step p{font-size:13px}

/* ── Final call-to-action: gold banner ─────────────────── */
.final-cta.duo-card{
  border:none;border-radius:30px;padding:48px 30px;
  background:linear-gradient(110deg,#ffcf4a,#f59e0b);background-size:auto;animation:none;
  color:#2b1700;box-shadow:0 20px 50px rgba(245,158,11,.25);
}
.final-cta h2{color:#2b1700;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em}
.final-cta p{color:#2b1700;opacity:.8;font-weight:600}
.final-cta .duo-btn{
  background:#2b1700;color:#ffd27a;border:none;border-radius:12px;height:54px;padding:0 30px;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.final-cta .duo-btn:hover{box-shadow:0 6px 0 rgba(0,0,0,.35)}
.final-cta .duo-btn:active{box-shadow:0 1px 0 rgba(0,0,0,.35)}
.final-cta-note{color:#2b1700!important;opacity:.7}
@media(max-width:600px){.final-cta.duo-card{padding:36px 18px}}

/* ── Footer (light) ────────────────────────────────────── */
html[data-theme="light"] .site-footer{border-top-color:rgba(30,40,80,.12)}

/* per-game tile colours (same palette as the games hub / game-registry.js) */
.hg-card[data-g="football"]{--t1:#059669;--t2:#022c22}
.hg-card[data-g="slingFootball"]{--t1:#ea580c;--t2:#431407}
.hg-card[data-g="penFight"]{--t1:#e11d48;--t2:#4c0519}
.hg-card[data-g="flickFootball"]{--t1:#0891b2;--t2:#083344}
.hg-card[data-g="slingPuck"]{--t1:#65a30d;--t2:#1a2e05}
.hg-card[data-g="classicChess"]{--t1:#7a4dff;--t2:#1c1050}
.hg-card[data-g="chess"]{--t1:#be185d;--t2:#500724}
.hg-card[data-g="checkers"]{--t1:#b91c1c;--t2:#450a0a}
.hg-card[data-g="shogi"]{--t1:#be123c;--t2:#4c0519}
.hg-card[data-g="backgammon"]{--t1:#92400e;--t2:#2a1203}
.hg-card[data-g="ludo"]{--t1:#16a34a;--t2:#052e16}
.hg-card[data-g="chaturaji"]{--t1:#6d28d9;--t2:#2e1065}
.hg-card[data-g="carrom"]{--t1:#c2410c;--t2:#431407}
.hg-card[data-g="physicsSprint"]{--t1:#0284c7;--t2:#082f49}
.hg-card[data-g="biologySprint"]{--t1:#16a34a;--t2:#052e16}
.hg-card[data-g="chemistrySprint"]{--t1:#7c3aed;--t2:#2e1065}
.hg-card[data-g="mathSprint"]{--t1:#db2777;--t2:#500724}
.hg-card[data-g="sudoku"]{--t1:#4f46e5;--t2:#1e1b4b}
.hg-card[data-g="sudokuTeam"]{--t1:#7c3aed;--t2:#2e1065}
.hg-card[data-g="schulte"]{--t1:#0f766e;--t2:#042f2e}
.hg-card[data-g="memoryMatch"]{--t1:#65a30d;--t2:#1a2e05}
.hg-card[data-g="cubeRace"]{--t1:#c026d3;--t2:#4a044e}
.hg-card[data-g="lexarena2"]{--t1:#2f6bff;--t2:#0b1b52}
.hg-card[data-g="bee"]{--t1:#d97706;--t2:#451a03}
.hg-card[data-g="anagram2p"]{--t1:#9333ea;--t2:#3b0764}
.hg-card[data-g="linguistics"]{--t1:#ca8a04;--t2:#422006}
.hg-card[data-g="ling2p"]{--t1:#0e7490;--t2:#083344}
.hg-card[data-g="ling4p"]{--t1:#0369a1;--t2:#082f49}
.hg-card[data-g="gk2p"]{--t1:#b45309;--t2:#451a03}
.hg-card[data-g="gk4p"]{--t1:#c2410c;--t2:#431407}
.hg-card[data-g="philosophy"]{--t1:#b91c1c;--t2:#450a0a}
.hg-card[data-g="mazeFull"]{--t1:#a16207;--t2:#2a1a05}
.hg-card[data-g="mazeFog"]{--t1:#4338ca;--t2:#0b0b24}
.hg-card[data-g="checkpointChase"]{--t1:#dc2626;--t2:#450a0a}

/* ── Games grouped by kind ─────────────────────────────── */
.hg-cat{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:38px 0 14px}
.hg-cat:first-of-type{margin-top:6px}
.hg-cat h3{font-size:clamp(19px,2vw,24px);font-weight:900;letter-spacing:-.02em;color:var(--text)}
.hg-cat-n{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim,#7f8cab);background:var(--card-line);padding:3px 10px;border-radius:100px}
.hg-cat p{flex:1 0 100%;font-size:13.5px;color:var(--text-dim,#7f8cab);line-height:1.5;margin:0}
.hg-card .hg-title{overflow-wrap:anywhere}

/* ── "New on Mognota" spotlight cards ──────────────────── */
.sp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.sp-grid{grid-template-columns:1fr;gap:12px}}
.sp-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;
  padding:22px;border-radius:24px;text-decoration:none;color:inherit;
  background:linear-gradient(160deg,rgba(var(--glow),.2),transparent 55%),var(--card);
  border:1px solid var(--card-line);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.sp-card:hover{transform:translateY(-3px);border-color:rgba(var(--glow),.6);box-shadow:0 16px 30px -14px rgba(var(--glow),.55)}
.sp-new{
  position:absolute;top:16px;right:16px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:#0a0a0d;background:#d4a017;padding:4px 10px;border-radius:100px;
}
.sp-arts{display:flex;flex-wrap:wrap;gap:8px;padding-right:48px}
.sp-art{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(160deg,var(--a),var(--b));box-shadow:0 6px 12px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.2);
}
.sp-art img{display:block;width:40px;height:40px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.sp-ico{color:#fff}
.sp-card h3{font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--text);margin-top:2px}
.sp-card p{font-size:13.5px;line-height:1.55;color:var(--text-dim,#7f8cab);flex:1}
.sp-go{
  align-self:flex-start;font-size:12.5px;font-weight:800;color:var(--text);
  background:rgba(255,255,255,.09);padding:8px 14px;border-radius:100px;transition:background .2s;
}
html[data-theme="light"] .sp-go{background:rgba(30,40,80,.08)}
.sp-card:hover .sp-go{background:rgba(var(--glow),.35)}