/* Jambalaia, idea A (chosen by Daniel, 11/10/2026): ivory, plum purple and orange, rounded type. Colours sampled
   from the approved screens (tmp/ui/jambalaia/); where white text on a colour was too faint, the colour is darker
   (the buttons' orange and the free tag's green pass WCAG for their text size). No text under 1rem. */
:root {
  --bg: #fcfaf5;
  --card: #ffffff;
  --ink: #2e0a4f;          /* titles */
  --text: #4a3a5c;         /* body text */
  --brand: #47066d;        /* wordmark plum */
  --orange: #e2501d;       /* buttons: white text at 1.25rem bold, contrast 3.9 */
  --purple: #51216d;       /* background of the daily game block */
  --lilac: #ede4fb;        /* soft buttons, active menu item */
  --pill: #f3eff6;         /* the menu's pill */
  --yellow: #fce041;
  --green: #1d7a22;        /* free tag: white text, contrast 5.4 */
  --line: #ece6f0;
  --shadow: 0 10px 28px rgba(71, 6, 109, .09);
  --title: Nunito, system-ui, sans-serif;     /* the rounded letters of the approved screens */
  --body: Inter, system-ui, sans-serif;
  --side: clamp(1rem, 3vw, 3rem);
}
html { font-size: 16px; }
@media (min-width: 1800px) { html { font-size: 17px; } }
@media (min-width: 2400px) { html { font-size: 18px; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.0625rem/1.5 var(--body); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2 { font-family: var(--title); color: var(--ink); font-weight: 900; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
main { max-width: 112rem; margin: 0 auto; padding: 0 var(--side) 3rem; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

/* top */
.top { max-width: 112rem; margin: 0 auto; padding: 1.25rem var(--side); display: flex; align-items: center; gap: 1.5rem; }
.top .brand img { width: clamp(10rem, 16vw, 15rem); }
.menu { display: flex; gap: .25rem; background: var(--pill); border-radius: 999px; padding: .35rem; margin: 0 auto; }
.menu a { font: 700 1.125rem var(--title); color: var(--ink); padding: .6rem 1.5rem; border-radius: 999px; }
.menu a:hover { background: #fff; }
.enter { font: 700 1.125rem var(--title); color: var(--ink); background: var(--lilac); border-radius: 999px; padding: .7rem 1.6rem; }
body[data-page="home"] .menu [data-page="home"], body[data-page="kids"] .menu [data-page="kids"],
body[data-page="stories"] .menu [data-page="stories"], body[data-page="daily"] .menu [data-page="daily"] { background: var(--lilac); }

/* buttons and tags */
.button { display: inline-block; font: 800 1.25rem var(--title); color: #fff; background: var(--orange); border-radius: 999px; padding: .9rem 2.4rem; text-align: center; }
.button:hover { filter: brightness(1.06); }
.chip { display: inline-block; font: 800 1.125rem var(--title); color: var(--ink); background: var(--yellow); border-radius: 999px; padding: .45rem 1.2rem; }
.more { font: 700 1.0625rem var(--title); color: var(--brand); background: var(--lilac); border-radius: 999px; padding: .6rem 1.3rem; white-space: nowrap; }

/* daily game block: as in the approved screens, the text on the left, the three tiles grouped on the right (S on top,
   O and L under it), the button under the text on a computer and across the whole block on a phone */
.daily { background: var(--purple); color: #fff; border-radius: 2rem; padding: clamp(1.5rem, 3.5vw, 3rem); display: grid;
  grid-template-columns: 1fr auto; grid-template-areas: "text tiles" "button tiles"; align-items: center; gap: 1rem 2rem; overflow: hidden; }
.daily-text { grid-area: text; }
.daily h2 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.5rem); }
.daily p { margin: .5rem 0; }
.daily-section { display: flex; align-items: center; gap: .6rem; font: 800 clamp(1.125rem, 2.4vw, 2.25rem) var(--title); }
.daily-icon { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #c9b3ea; }
.daily-icon img { width: 55%; }
.daily-what { color: #e7d8f6; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.daily .button { grid-area: button; justify-self: start; min-width: min(100%, 26rem); }
.tiles { grid-area: tiles; --t: clamp(4.5rem, 9vw, 9rem); display: grid; grid-template-columns: var(--t) var(--t);
  grid-template-rows: var(--t) var(--t); gap: calc(var(--t) * .12); padding: calc(var(--t) * .15) calc(var(--t) * .25); }
.tiles span { display: grid; place-items: center; border-radius: 22%; background: #fbf6ec; color: var(--purple);
  font: 900 calc(var(--t) * .62) var(--title); box-shadow: 0 calc(var(--t) * .07) 0 #d9cdbd, 0 calc(var(--t) * .14) calc(var(--t) * .25) rgba(0, 0, 0, .25); }
.tiles span:nth-child(1) { grid-column: 1 / span 2; justify-self: center; width: var(--t); transform: rotate(-9deg); }
.tiles span:nth-child(2) { transform: rotate(-7deg); }
.tiles span:nth-child(3) { transform: rotate(9deg); }

/* featured story */
.feature { position: relative; border-radius: 2rem; overflow: hidden; box-shadow: var(--shadow); }
.slide { display: grid; position: relative; min-height: clamp(20rem, 38vw, 36rem); }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 8, 50, .55), rgba(30, 8, 50, 0) 55%); }
.slide-text { position: relative; z-index: 1; align-self: center; padding: clamp(1.5rem, 4vw, 4rem); display: grid; gap: .75rem; justify-items: start; max-width: 40rem; }
.slide-title { font: 900 clamp(2.5rem, 5.5vw, 5.5rem)/1.02 var(--title); color: #fff; text-shadow: 0 .15rem .8rem rgba(0, 0, 0, .3); }
.slide-label { font: 700 clamp(1.25rem, 2vw, 1.75rem) var(--title); color: #f1e6ff; text-shadow: 0 .1rem .5rem rgba(0, 0, 0, .35); }
.slide-text .button { margin-top: .75rem; }
.dots { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 2; }
.dot { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.dot.on { background: var(--brand); }

/* shelves of cards */
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.shelf h2, .shelf h1 { font-size: clamp(1.75rem, 3vw, 3rem); }
.row, .grid { display: grid; gap: clamp(1rem, 1.5vw, 1.5rem); }
.row.games, .grid.games { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.row.stories, .grid.stories { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.card { background: var(--card); border-radius: 1.5rem; box-shadow: var(--shadow); overflow: hidden; display: grid; align-content: start; transition: transform .15s; }
.card:hover { transform: translateY(-4px); }
.cover { position: relative; display: block; }
.cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.games .cover img { aspect-ratio: 1; }
.tag { position: absolute; top: .75rem; left: .75rem; font: 800 1rem var(--title); color: #fff; background: var(--green); border-radius: 999px; padding: .35rem .9rem; }
.name { font: 800 1.25rem var(--title); color: var(--ink); padding: .9rem 1.1rem 0; }
.meta { color: var(--text); padding: .2rem 1.1rem 0; }
.card > :last-child { padding-bottom: 1rem; }

/* notice pages (Diário and Entrar under construction) */
.notice { background: var(--card); border-radius: 2rem; box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 1rem; justify-items: start; margin-top: 1rem; }
.notice h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
.notice p { font-size: 1.25rem; margin: 0; }

/* bottom */
.bottom { max-width: 112rem; margin: 0 auto; padding: 2.5rem var(--side) 3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.bottom .brand img { width: 11rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .75rem 2rem; font: 700 1.0625rem var(--title); color: var(--ink); }
.maker { margin: 0 0 0 auto; color: var(--text); }
.tabs { display: none; }

/* phone: the menu goes to a bar at the bottom; each shelf scrolls sideways, a card and a half in view. Sizes measured
   on the approved phone screen (Daniel, 12/10/2026: "deve ser mais delicado; em app fica mais nítido e organizado") */
@media (max-width: 760px) {
  main { gap: .875rem; padding-bottom: 1.5rem; }
  .menu { display: none; }
  .top { justify-content: space-between; padding: .75rem var(--side); }
  .top .brand img { width: 9.5rem; }
  .enter { font-size: 1rem; padding: .45rem 1.1rem; }
  .daily { grid-template-areas: "text tiles" "button button"; gap: .75rem 1rem; border-radius: 1.25rem; padding: 1.25rem; }
  .daily h2 { font-size: 1.875rem; }
  .daily p { margin: .35rem 0; }
  .daily-what { font-size: 1.0625rem; }
  .chip { font-size: 1rem; padding: .3rem .9rem; }
  .tiles { --t: 3.6rem; padding: 0; }
  .daily .button { justify-self: stretch; min-width: 0; font-size: 1.125rem; padding: .7rem 1rem; }
  .feature { border-radius: 1.25rem; }
  .slide { min-height: 0; grid-template-rows: auto auto; background: var(--card); }
  .slide img { position: static; aspect-ratio: 16 / 10; height: auto; }
  .slide::after { display: none; }
  .slide-text { grid-template-columns: 1fr auto; align-items: center; gap: .15rem 1rem; padding: 1rem 1.1rem; max-width: none; }
  .slide-title { grid-column: 1; color: var(--ink); text-shadow: none; font-size: 1.5rem; }
  .slide-label { grid-column: 1; color: #7a6a8c; text-shadow: none; font-size: 1rem; }
  .slide-text .button { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.125rem; padding: .65rem 1.4rem; }
  .shelf-head { margin-bottom: .75rem; }
  .shelf h2, .shelf h1 { font-size: 1.375rem; }
  .more { font-size: 1rem; padding: .4rem .9rem; }
  .card { border-radius: 1rem; }
  .name { font-size: 1.0625rem; padding: .6rem .8rem 0; }
  .meta { padding: .1rem .8rem 0; }
  .card > :last-child { padding-bottom: .75rem; }
  .tag { font-size: 1rem; padding: .25rem .7rem; top: .5rem; left: .5rem; }
  .row.games, .row.stories { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--side); margin: 0 calc(-1 * var(--side)); padding: 0 var(--side) .75rem; scrollbar-width: none; }
  .row.stories { grid-auto-columns: 78%; }
  .row .card { scroll-snap-align: start; }
  .grid.games { grid-template-columns: 1fr 1fr; }
  .bottom { padding-bottom: 7rem; flex-direction: column; align-items: flex-start; }
  .maker { margin: 0; }
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); backdrop-filter: blur(8px); }
  .tabs a { display: grid; justify-items: center; gap: .15rem; font: 700 1rem var(--title); color: #665877; }
  .tabs img { width: 2rem; opacity: .55; }
  body[data-page="home"] .tabs [data-page="home"], body[data-page="kids"] .tabs [data-page="kids"],
  body[data-page="stories"] .tabs [data-page="stories"], body[data-page="daily"] .tabs [data-page="daily"] { color: var(--brand); }
  body[data-page="home"] .tabs [data-page="home"] img, body[data-page="kids"] .tabs [data-page="kids"] img,
  body[data-page="stories"] .tabs [data-page="stories"] img, body[data-page="daily"] .tabs [data-page="daily"] img { opacity: 1; }
}