/* Bamboleio, idea A (chosen by Daniel, 11/10/2026): ivory, plum purple and orange, rounded type. Colours sampled
   from the approved screens (tmp/ui/bamboleio/); 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. */
[hidden] { display: none !important; }   /* the attribute always wins over a class's display */
/* the stars of a win (celebrate() in j/diario/daily.js): the daily games and Paciência */
.stars-layer { position: absolute; z-index: 50; pointer-events: none; }
.stars-layer img { position: absolute; left: 50%; top: 50%; opacity: 0; filter: drop-shadow(0 .15rem .3rem rgba(0, 0, 0, .2)); }
: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); padding-top: calc(1.25rem + env(safe-area-inset-top)); 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: 0; border-radius: 999px; padding: .9rem 2.4rem; text-align: center; cursor: pointer; }
.button:disabled { opacity: .7; cursor: default; }
.button:hover { filter: brightness(1.06); }
.more { font: 700 1.0625rem var(--title); color: var(--brand); background: var(--lilac); border-radius: 999px; padding: .6rem 1.3rem; white-space: nowrap; }

/* 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; }
.tag.locked { background: var(--brand); }   /* Assinantes: for subscribers */
.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) */
/* form fields, shared by the institutions' contact and the sign-in */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.fields label { display: grid; gap: .35rem; font: 800 1.0625rem var(--title); color: var(--ink); }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields select, .fields textarea { min-width: 0; font: 1.0625rem var(--body); color: var(--ink); background: #fff; border: 2px solid #d9cdea; border-radius: .9rem; padding: .75rem .9rem; }
.fields input:focus, .fields select:focus, .fields textarea:focus { outline: 3px solid #b48cf0; border-color: transparent; }
.fields input[aria-invalid="true"] { border-color: #c2410c; }
.fields.one { grid-template-columns: 1fr; }
.form-note { margin: 0; color: var(--brand); font: 800 1.0625rem var(--title); }
.form-note.error { color: #b3360a; }

/* sign-in: a card with the email, the password (Mostrar shows it) and Entrar; no sign-up yet (Daniel, 13/10/2026) */
.signin { justify-self: center; width: min(100%, 34rem); margin-top: clamp(1rem, 4vw, 3rem); background: var(--card); border-radius: 2rem; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.25rem; min-width: 0; }
.signin h1 { font-size: clamp(2.25rem, 4vw, 3rem); }
.signin .button { border: 0; cursor: pointer; width: 100%; }
.assinar .explain { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.password { position: relative; display: grid; }
.password input { padding-right: 7rem; }
.show-password { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); font: 800 1rem var(--title); color: var(--brand); background: var(--lilac);
  border: 0; border-radius: 999px; padding: .45rem .9rem; cursor: pointer; }

.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; }
.notice.legal { justify-items: stretch; gap: .75rem; }
.notice.legal h2 { font-size: 1.375rem; margin-top: .5rem; }
.notice.legal ul { margin: 0; padding-left: 1.4rem; display: grid; gap: .5rem; font-size: 1.125rem; }
.notice.legal p { font-size: 1.125rem; }

/* accounts: sign-up, sign-in and the code page reuse .signin and .fields; the account pages are in conta.css */
.fields .hint { font-size: 1rem; color: #7a6a95; font-weight: 400; }
.lead { margin: 0; font: 700 1.125rem var(--title); color: #6b5a86; }
.destino { display: flex; align-items: center; gap: 1rem; background: #f5effe; border-radius: 1.25rem; padding: .75rem; }
.destino-img { width: 5rem; flex: none; display: grid; place-items: center; }
.destino-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .9rem; }
.destino-img > span { width: 100%; }
.destino p { margin: 0; font: 900 1.25rem var(--title); color: var(--ink); }
.links-row { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 0; }
.links-row a { font: 700 1.0625rem var(--title); color: var(--brand); }
.notice { background: #fff6e8; border-left: .35rem solid var(--orange); border-radius: .75rem; padding: 1rem 1.1rem; font-size: 1.0625rem; color: var(--ink); margin: 0; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.soft { font: 800 1rem var(--title); color: var(--brand); background: var(--lilac); border: 0; border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; }
.soft.danger { color: #b3360a; background: #fde8df; }
.dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none; }
.swatches { display: flex; gap: .6rem; flex-wrap: wrap; }
.swatch { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.profile-chip { display: inline-flex; align-items: center; gap: .5rem; font: 700 1.125rem var(--title); color: var(--ink); background: var(--lilac); border-radius: 999px; padding: .6rem 1.2rem; }

/* 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) {
  .fields { grid-template-columns: 1fr; }
  main { gap: .875rem; padding-bottom: 1.5rem; }
  .menu { display: none; }
  .top { justify-content: space-between; padding: .75rem var(--side); padding-top: calc(.75rem + env(safe-area-inset-top));
    position: sticky; top: 0; z-index: 20; background: rgba(252, 250, 245, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .top .brand img { width: 9.5rem; }
  .enter { font-size: 1rem; padding: .45rem 1.1rem; }
  .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; }
}