/* =========================================================
   Likkle Coders — v14 landing + glossy game theme  (v417)
   ---------------------------------------------------------
   1. Landing hero rebuilt to match the UI/UX board's branding
      panel: "Learn. Play. Code. Succeed!", four glossy 3D
      pillar tiles, and the real 3D robot + chess mascots.
   2. A shared GLOSSY GAME THEME applied across every game
      surface (Play Zone, STEM Arcade, Tots/ECI games) so they
      all read as one Pixar-style set.

   Board palette: purple #6A3DFF · green #14C76F · blue #3A86FF
   · orange #FF8C32 · yellow #FFC93C · pink #FF4D94 · teal #00B8B8

   EASY REVERT: delete this file's <link> in index.html + its
   service-worker SHELL entry.
   ========================================================= */
:root{
  --lp-purple:#6A3DFF; --lp-green:#14C76F; --lp-blue:#3A86FF;
  --lp-orange:#FF8C32; --lp-yellow:#FFC93C; --lp-pink:#FF4D94; --lp-teal:#00B8B8;
}

/* ---------- LANDING HERO ---------- */
.lp-h1{
  font-size: clamp(2rem, 5.4vw, 3.2rem); font-weight: 900; line-height: 1.06;
  letter-spacing: -.02em; margin: .4rem 0 .6rem;
}
.lp-h1-green{ color: var(--lp-green); }
.lp-sub{ max-width: 30ch; }

/* four glossy pillar tiles */
.lp-pillars{ display: flex; flex-wrap: wrap; gap: 18px; margin: 1.4rem 0 1.5rem; }
.lp-pillar{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 900; font-size: .72rem; letter-spacing: .06em;
  color: var(--c, var(--lp-purple));
}
.lp-pillar img{
  width: 74px; height: 74px; object-fit: contain;
  filter: drop-shadow(0 8px 16px color-mix(in oklab, var(--c,#6A3DFF) 45%, transparent));
  transition: transform .18s ease;
}
.lp-pillar:hover img{ transform: translateY(-5px) scale(1.06); }

/* real 3D mascots — replace the old CSS-drawn robot */
.bh-hero-bot{ display: none !important; }
.lp-mascots{ position: absolute; left: 8px; bottom: 6px; pointer-events: none; z-index: 1; }
.lp-mascot-bot{ width: 132px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.lp-mascot-chess{
  width: 64px; margin-left: -14px; vertical-align: bottom;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.26));
}
@media (max-width: 900px){ .lp-mascots{ display: none; } }

/* =========================================================
   GLOSSY GAME THEME — one look across every game surface
   (Play Zone · STEM Arcade · Tots/ECI games)
   ========================================================= */
.kg-tile, .kg-card-front, .kg-pat-opt, .kg-arrow, .kg-chip,
.bot-part, .rb-card, .mq-opt, .ws-cell, .cw-cell,
.eg-opt, .tots-tile, .tots-big-btn, .bp-block{
  position: relative;
}

/* soft top-light sheen on every interactive game surface */
.kg-tile::after, .kg-pat-opt::after, .kg-arrow::after, .kg-chip::after,
.rb-card::after, .bot-part::after, .tots-tile::after, .bp-block::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.05) 46%, rgba(0,0,0,.05) 100%);
}

/* chunkier, glossier game buttons */
.kg-btn, .kg-play{
  background-image: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 5px 0 rgba(0,0,0,.18), 0 10px 22px rgba(11,37,69,.18);
}
.kg-btn:hover:not(:disabled){ filter: saturate(1.08) brightness(1.03); }

/* Pixar-ish depth on the game tiles + cards */
.kg-tile{ box-shadow: 0 14px 30px rgba(11,37,69,.22), inset 0 -6px 14px rgba(0,0,0,.12); }
.kg-card-front, .kg-card-back{ box-shadow: 0 8px 18px rgba(11,37,69,.2), inset 0 -4px 10px rgba(0,0,0,.1); }
.kg-pat-opt, .rb-card, .bot-part{ box-shadow: 0 8px 20px rgba(11,37,69,.14); }

/* the little 3D icons inside game surfaces get a lift */
.kg-tile-art .lc-e3d, .rb-badge .lc-e3d, .bot-part-ico .lc-e3d, .tots-tile-icon .lc-e3d{
  filter: drop-shadow(0 4px 6px rgba(11,37,69,.28));
}

/* Tots / ECI tiles — glossy pastel with a lift */
.tots-tile{
  border-radius: 24px !important;
  box-shadow: 0 10px 24px rgba(11,37,69,.16), inset 0 -6px 12px rgba(0,0,0,.07);
}
.tots-tile-icon{ font-size: 2.6rem; }

/* game stages get the soft studio-gradient backdrop from the board */
.kg-robi-stage, .rb-stage, .bot-stage{
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%);
}

@media (prefers-reduced-motion: reduce){
  .lp-pillar img{ transition: none; }
  .lp-pillar:hover img{ transform: none; }
}

/* ---- v418: collapsible Chess Master panel ---- */
.lc-master-collapse{
  align-self:flex-start; margin-left:auto; width:38px; height:38px; flex:0 0 auto;
  border-radius:50%; border:1px solid rgba(255,255,255,.22); cursor:pointer;
  background:rgba(255,255,255,.10); color:#fff; font-size:1.1rem; line-height:1;
  transition:background .15s ease, transform .15s ease;
}
.lc-master-collapse:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }
.lc-master-card.is-collapsed{ padding-bottom:14px; }
.lc-master-card header{ display:flex; align-items:flex-start; gap:12px; }

/* ---- v419: 3D topic illustration on quiz questions ---- */
.lc-scene{ margin:0 0 12px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.lc-scene img{ width:84px; height:84px; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(11,37,69,.22)); }
.lc-scene figcaption{ font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#8A97A8; }

/* ---- v419: glossy 3D chess pieces on the board ---- */
.lc-piece-img{ width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.32)); pointer-events:none; }
.chess-sq.has-char-piece{ padding:2px; }

/* v422: lesson illustration (icon fallback variant) */
.lc-scene--ico span{ font-size:3rem; line-height:1; display:block;
  filter:drop-shadow(0 5px 9px rgba(11,37,69,.24)); }
.lc-scene--ico .lc-e3d{ width:1em; height:1em; }

/* =========================================================
   v423 — QUIZ RESULTS screen (PEP + Junior daily)
   ========================================================= */
.rs-wrap{ max-width:520px; margin:0 auto; }
.rs-hero{
  position:relative; overflow:hidden; border-radius:28px; padding:26px 22px 24px;
  text-align:center; color:#fff; box-shadow:0 16px 38px rgba(11,37,69,.22);
}
.rs-hero--win{ background:linear-gradient(135deg,#34D399 0%,#059669 55%,#065F46 100%); }
.rs-hero--mid{ background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 55%,#B45309 100%); }
.rs-hero--low{ background:linear-gradient(135deg,#60A5FA 0%,#3B82F6 55%,#1E40AF 100%); }
.rs-hero-char{
  position:absolute; right:-16px; bottom:-10px; width:120px; opacity:.9;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); pointer-events:none;
}
.rs-hero h3{ margin:.5rem 0 .2rem; font-size:1.35rem; font-weight:900; color:#fff; }
.rs-score{ margin:0; font-size:.95rem; opacity:.94; font-weight:700; }

/* progress ring driven by --pct */
.rs-ring{
  position:relative;
  width:132px; height:132px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(#fff calc(var(--pct,0) * 1%), rgba(255,255,255,.26) 0);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.rs-ring::before{
  content:""; position:absolute; width:104px; height:104px; border-radius:50%;
  background:rgba(0,0,0,.18);
}
.rs-ring-num{ position:relative; font-size:2.2rem; font-weight:900; color:#fff; line-height:1; }
.rs-ring-num small{ font-size:1rem; font-weight:800; opacity:.85; }
.rs-stars{ font-size:1.5rem; margin-top:10px; letter-spacing:3px; }
.rs-xp{
  display:inline-block; margin-top:12px; background:rgba(255,255,255,.2);
  border-radius:999px; padding:7px 16px; font-weight:800; font-size:.85rem;
}

/* per-subject cards */
.rs-sub-h{ margin:22px 4px 12px; font-size:1rem; font-weight:800; color:#0B2545; }
.rs-subjects{ display:flex; flex-direction:column; gap:10px; }
.rs-subject{
  display:flex; align-items:center; gap:13px; background:#fff; border-radius:18px;
  padding:12px 14px; box-shadow:0 6px 16px rgba(11,37,69,.09); border-left:5px solid var(--rc,#94A3B8);
}
.rs-subject.good{ --rc:#22C55E; }
.rs-subject.mid { --rc:#F59E0B; }
.rs-subject.low { --rc:#EF4444; }
.rs-subject-ico{
  width:44px; height:44px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center;
  font-size:1.5rem; background:color-mix(in oklab, var(--rc,#94A3B8) 15%, #fff);
}
.rs-subject-ico .lc-e3d{ width:1.2em; height:1.2em; }
.rs-subject-body{ flex:1 1 auto; min-width:0; }
.rs-subject-body strong{ display:block; font-weight:800; color:#0B2545; font-size:.95rem; }
.rs-bar{ display:block; height:8px; border-radius:5px; background:#EEF1F6; overflow:hidden; margin-top:6px; }
.rs-bar > span{ display:block; height:100%; border-radius:5px; background:var(--rc,#94A3B8); }
.rs-subject-score{ flex:0 0 auto; font-weight:900; color:var(--rc,#94A3B8); font-size:.95rem; }

@media (max-width:480px){
  .rs-hero-char{ width:92px; }
  .rs-ring{ width:116px; height:116px; }
  .rs-ring::before{ width:92px; height:92px; }
}

/* =========================================================
   v424 — GAME CARDS: cover-art layout
   The 3D icon was a small badge in the corner. Give each card a
   proper cover band at the top with the art shown large, then the
   text below, so the grid reads like a games shelf.
   ========================================================= */
.game-card{
  position:relative; overflow:hidden; border-radius:24px !important;
  padding:0 0 14px !important; text-align:left;
  display:flex; flex-direction:column; gap:0;
  box-shadow:0 12px 28px rgba(11,37,69,.18);
  transition:transform .16s ease, box-shadow .16s ease;
}
.game-card:hover{ transform:translateY(-4px); box-shadow:0 20px 38px rgba(11,37,69,.26); }

/* cover band: art sits large and centred on a lighter wash */
.game-card .game-emoji{
  position:static !important; order:-1;
  display:flex !important; align-items:center; justify-content:center;
  width:100% !important; height:104px !important; margin:0 0 12px !important;
  border-radius:0 !important; font-size:3.4rem !important;
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06)) !important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.28);
}
.game-card .game-emoji .lc-e3d{ width:1em; height:1em; filter:drop-shadow(0 6px 10px rgba(0,0,0,.3)); }

/* text block gets its own padding now the card itself has none */
.game-card h4,
.game-card .desc,
.game-card .gc-progress,
.game-card .gc-foot,
.game-card .steam-badges{ margin-left:16px !important; margin-right:16px !important; }
.game-card h4{ font-size:1.08rem !important; font-weight:900 !important; }
.game-card .desc{ opacity:.94; }

/* difficulty chip + done tick float over the cover */
.game-card .gc-diff{ position:absolute; top:12px; left:12px; z-index:2; }
.game-card .gc-check{ position:absolute; top:12px; right:12px; z-index:2; }

@media (max-width:480px){
  .game-card .game-emoji{ height:88px !important; font-size:2.8rem !important; }
}
@media (prefers-reduced-motion:reduce){
  .game-card{ transition:none; } .game-card:hover{ transform:none; }
}

/* =========================================================
   v427 — bespoke 3D art on Tots tiles + the three daily cards
   The icon is applied as a background image on the existing
   icon element, so no markup changes are needed and any
   missing file simply falls back to the emoji underneath.
   ========================================================= */
.tots-tile-icon{
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:contain !important;
}
/* when art is present, hide the emoji glyph but keep the box */
.tots-letters .tots-tile-icon,
.tots-numbers .tots-tile-icon,
.tots-colors  .tots-tile-icon,
.tots-stories .tots-tile-icon,
.tots-doodle  .tots-tile-icon,
.tots-shapes  .tots-tile-icon{
  display:block !important; width:66px !important; height:66px !important;
  margin:0 auto .55rem !important; font-size:0 !important; color:transparent !important;
}
/* hide the emoji image the 3D swapper injected, leaving only the tile art */
.tots-letters .tots-tile-icon .lc-e3d-frag,
.tots-numbers .tots-tile-icon .lc-e3d-frag,
.tots-colors  .tots-tile-icon .lc-e3d-frag,
.tots-stories .tots-tile-icon .lc-e3d-frag,
.tots-doodle  .tots-tile-icon .lc-e3d-frag,
.tots-shapes  .tots-tile-icon .lc-e3d-frag{ display:none !important; }
.tots-letters .tots-tile-icon{ background-image:url("../assets/tots/letters.png") !important; }
.tots-numbers .tots-tile-icon{ background-image:url("../assets/tots/numbers.png") !important; }
.tots-colors  .tots-tile-icon{ background-image:url("../assets/tots/colors.png") !important; }
.tots-stories .tots-tile-icon{ background-image:url("../assets/tots/stories.png") !important; }
.tots-doodle  .tots-tile-icon{ background-image:url("../assets/tots/doodle.png") !important; }
.tots-shapes  .tots-tile-icon{ background-image:url("../assets/tots/shapes.png") !important; }

/* the three daily cards */
.bh-mega--foundations .bh-mega-icon,
.bh-mega--pep .bh-mega-icon,
.bh-mega--junior .bh-mega-icon{
  background-repeat:no-repeat !important; background-position:center !important;
  background-size:contain !important; color:transparent !important; font-size:0 !important;
}
.bh-mega--foundations .bh-mega-icon .lc-e3d-frag,
.bh-mega--pep .bh-mega-icon .lc-e3d-frag,
.bh-mega--junior .bh-mega-icon .lc-e3d-frag{ display:none !important; }
.bh-mega--foundations .bh-mega-icon{ background-image:url("../assets/ui/card-foundations.png") !important; }
.bh-mega--pep         .bh-mega-icon{ background-image:url("../assets/ui/card-pep.png") !important; }
.bh-mega--junior      .bh-mega-icon{ background-image:url("../assets/ui/card-junior.png") !important; }