/* ==========================================================
   PALAVRAS CRUZADAS — folha de estilo
   Estilo de revista impressa; letras grandes; alto contraste.
   Sem fontes externas (funciona offline).
   ========================================================== */
:root {
  --paper: #fbf7ee;
  --paper-2: #f3ecdb;
  --desk: #e7dcc4;
  --ink: #1f2430;
  --ink-soft: #4a5263;
  --brand: #1d4e89;
  --brand-2: #163c6a;
  --accent: #f2a541;
  --ok: #1e7b4a;
  --bad: #b3261e;
  --sel: #ffd166;
  --inword: #fff1c7;
  --line: #2b2f38;
  --fs: 1;               /* escala de texto (Perfil > Tamanho da letra) */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 76px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  font-size: calc(18px * var(--fs));
  line-height: 1.5;
  color: var(--ink);
  background: radial-gradient(1200px 600px at 50% -10%, #f6efdf, var(--desk));
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0; }
p { margin: 0; }

/* ---------- Cabeçalho e navegação ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-name { font-family: var(--serif); font-weight: 700; letter-spacing: .04em; font-size: calc(19px * var(--fs)); line-height: 1; }
.brand-name small { display: block; font-family: var(--sans); font-weight: 400; letter-spacing: .02em; font-size: calc(11.5px * var(--fs)); opacity: .85; margin-top: 3px; }
.topbar .spacer { flex: 1; }
.net { font-size: calc(13px * var(--fs)); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); white-space: nowrap; }
.net.off { background: var(--accent); color: #2b1a00; font-weight: 700; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--nav-h); background: #fff; border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--ink-soft); font-size: calc(13.5px * var(--fs)); font-weight: 600;
}
.bottomnav a .ico { font-size: 22px; line-height: 1; }
.bottomnav a.on { color: var(--brand); background: #eaf1fb; box-shadow: inset 0 3px 0 var(--brand); }
main.view { padding: 16px 14px calc(var(--nav-h) + 24px); max-width: 1120px; margin: 0 auto; min-height: 100vh; }

/* ---------- Componentes gerais ---------- */
.h-title { font-family: var(--serif); font-size: calc(26px * var(--fs)); margin: 6px 0 4px; }
.lead-text { color: var(--ink-soft); margin-bottom: 14px; }
.card {
  background: #fff; border: 1px solid #d9cfb8; border-radius: 16px;
  box-shadow: 0 6px 18px rgba(60,40,10,.10); padding: 16px;
}
.grid-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 18px; border-radius: 14px; border: 2px solid var(--ink);
  background: #fff; font-weight: 700; font-size: calc(18px * var(--fs)); text-decoration: none; color: var(--ink);
}
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.accent { background: var(--accent); border-color: #7a4b00; color: #2b1a00; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn.small { min-height: 42px; font-size: calc(16px * var(--fs)); padding: 6px 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-block; font-size: calc(13px * var(--fs)); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e8efe9; color: #1f4d2c; letter-spacing: .02em; }
.pill.warn { background: #fde9c7; color: #6b4300; }
.pill.grey { background: #ececec; color: #444; }
.pill.blue { background: #dfeaf8; color: #163c6a; }
.muted { color: var(--ink-soft); font-size: calc(15px * var(--fs)); }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); max-width: 92vw; text-align: center; font-size: calc(16px * var(--fs));
  animation: fadein .2s ease-out;
}
@keyframes fadein { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
dialog { border: none; border-radius: 18px; padding: 22px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 20px 60px rgba(0,0,0,.35); color: var(--ink); }
dialog::backdrop { background: rgba(20,20,30,.5); }
dialog h3 { font-size: calc(22px * var(--fs)); margin-bottom: 8px; }
dialog p { margin-bottom: 14px; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.menu-list { display: grid; gap: 10px; }

/* ---------- Banca ---------- */
.banca-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: linear-gradient(120deg, var(--brand), #2a6bb5); color: #fff; border-radius: 20px; padding: 20px; margin-bottom: 18px; box-shadow: 0 10px 26px rgba(29,78,137,.35); }
.banca-hero h1 { color: #fff; font-size: calc(30px * var(--fs)); }
.banca-hero p { opacity: .92; }
.banca-hero .tag { font-size: calc(16px * var(--fs)); background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 10px; display: inline-block; margin-top: 8px; }
.product { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: start; }
.product .cover-thumb { width: 128px; }
.product h3 { font-size: calc(22px * var(--fs)); margin: 6px 0 4px; }
.price { font-family: var(--serif); font-size: calc(26px * var(--fs)); font-weight: 700; color: var(--brand-2); margin: 6px 0; }
.price small { font-family: var(--sans); font-size: calc(14px * var(--fs)); color: var(--ink-soft); font-weight: 400; }
.note-legal { font-size: calc(14px * var(--fs)); color: var(--ink-soft); margin-top: 8px; }

/* Capa em miniatura (CSS puro, sem imagens externas) */
.cover-thumb {
  aspect-ratio: 3 / 4; border-radius: 6px 12px 12px 6px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--c, #1d4e89), color-mix(in srgb, var(--c, #1d4e89) 70%, #000));
  color: #fff; padding: 10px; box-shadow: inset 8px 0 0 rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.25);
  display: flex; flex-direction: column; justify-content: space-between;
}
.cover-thumb .ct-mast { font-family: var(--serif); font-weight: 900; font-size: 15px; letter-spacing: .05em; line-height: 1; }
.cover-thumb .ct-num { font-size: 11px; opacity: .9; }
.cover-thumb .ct-title { font-family: var(--serif); font-size: 13px; font-weight: 700; line-height: 1.1; }
.cover-thumb .ct-grid { position: absolute; right: -10px; bottom: -10px; width: 70px; height: 70px; opacity: .25; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 14px 14px; }
.cover-thumb.lock::after { content: "Em breve"; position: absolute; top: 10px; right: -28px; transform: rotate(35deg); background: var(--accent); color: #2b1a00; font-size: 10px; font-weight: 800; padding: 2px 30px; }

.pack-card { background: linear-gradient(140deg, #fff7e4, #ffe7b3); border-color: #e4b35a; }

/* ---------- Coleção ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.chip { min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink-soft); background: #fff; font-weight: 700; font-size: calc(16px * var(--fs)); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bar { height: 12px; background: #ebe4d3; border-radius: 999px; overflow: hidden; margin: 8px 0; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, #2b8a57, #46b07a); border-radius: 999px; }
.lib-item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; }
.lib-item .cover-thumb { width: 96px; }
.lib-item h3 { font-size: calc(20px * var(--fs)); }
.status-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

/* ---------- Respostas ---------- */
.ans-edition { margin-bottom: 26px; }
.ans-edition > h2 { font-size: calc(22px * var(--fs)); margin-bottom: 10px; }
.ans-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ans-list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid #d9cfb8; border-radius: 14px; padding: 12px 14px; min-height: 60px; font-size: calc(17px * var(--fs)); font-weight: 600; }
.ans-list a span.p { font-family: var(--serif); font-size: calc(22px * var(--fs)); color: var(--brand); }

/* ---------- Perfil ---------- */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5dcc8; flex-wrap: wrap; }
.setting-row:last-child { border-bottom: none; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.seg button { min-height: 48px; padding: 6px 14px; border: none; background: #fff; font-weight: 700; font-size: calc(16px * var(--fs)); }
.seg button.on { background: var(--ink); color: #fff; }
.danger { color: var(--bad); border-color: var(--bad); }

/* ==========================================================
   LEITOR DE REVISTA
   ========================================================== */
.reader-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border: 1px solid #d9cfb8; border-radius: 16px; padding: 8px 10px; margin-bottom: 12px;
  position: sticky; top: 64px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.reader-bar .rt { font-family: var(--serif); font-weight: 700; font-size: calc(17px * var(--fs)); flex: 1; min-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-bar .pg { font-weight: 700; font-size: calc(16px * var(--fs)); color: var(--ink-soft); }
.rbtn { min-height: 46px; min-width: 46px; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; font-weight: 700; font-size: calc(16px * var(--fs)); }
.rbtn.on { background: var(--ink); color: #fff; }

.stage { position: relative; perspective: 1400px; touch-action: pan-y; }
.stage .sheet { animation: pageIn .32s ease-out both; }
.stage.turn-next .sheet { animation-name: turnNext; }
.stage.turn-prev .sheet { animation-name: turnPrev; }
@keyframes turnNext { from { transform: translateX(40px) rotateY(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes turnPrev { from { transform: translateX(-40px) rotateY(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pageIn { from { opacity: .4; } to { opacity: 1; } }

.sheet {
  position: relative; background: var(--paper); margin: 0 auto 16px; max-width: 760px;
  border-radius: 6px 14px 14px 6px; padding: 24px 22px 40px;
  box-shadow: 0 1px 0 #e6dcc4, 0 2px 0 #ebe2cc, 0 10px 26px rgba(40,30,10,.22), inset 14px 0 18px -14px rgba(0,0,0,.18);
  min-height: 60vh;
  background-image: radial-gradient(rgba(120,90,40,.05) 1px, transparent 1px); background-size: 6px 6px;
}
.sheet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, rgba(0,0,0,.12), transparent); border-radius: 6px 0 0 6px; }
.kicker { font-size: calc(13px * var(--fs)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.ptitle { font-size: calc(30px * var(--fs)); margin-bottom: 4px; }
.psub { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: calc(18px * var(--fs)); margin-bottom: 14px; }
.folio { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-family: var(--serif); font-size: calc(14px * var(--fs)); color: var(--ink-soft); }
.hint { font-size: calc(16px * var(--fs)); background: #f1ead8; border-left: 5px solid var(--accent); padding: 8px 12px; border-radius: 6px; margin-bottom: 14px; }
.lead { font-family: var(--serif); font-size: calc(19px * var(--fs)); line-height: 1.6; margin: 12px 0; }
.status { margin-top: 14px; font-weight: 700; font-size: calc(17px * var(--fs)); }
.status.ok { color: var(--ok); }
.bad { color: var(--bad); }

/* Capa */
.cover { --c: #1d4e89; background: linear-gradient(170deg, var(--cover) 0%, color-mix(in srgb, var(--cover) 70%, #000) 100%); color: #fff; min-height: 80vh; display: flex; flex-direction: column; padding: 26px 26px 34px; overflow: hidden; border: 10px solid #fff; border-radius: 4px 12px 12px 4px; background-image: none; }
.cover::before { background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 12px); border-radius: 0; }
.cover-pattern { position: absolute; inset: 0; opacity: .9; }
.cover-pattern svg { width: 100%; height: 100%; }
.cover > * { position: relative; }
.masthead { font-family: var(--serif); font-weight: 900; font-size: calc(54px * var(--fs)); letter-spacing: .03em; line-height: .95; color: var(--accent); text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.masthead.small { font-size: calc(26px * var(--fs)); color: var(--brand); text-shadow: none; margin-bottom: 10px; }
.cover-sub { font-size: calc(13px * var(--fs)); letter-spacing: .12em; margin-top: 10px; font-weight: 700; opacity: .95; }
.cover-mid { margin: auto 0; padding: 24px 0; }
.cover-mid .issue { font-family: var(--serif); font-size: calc(24px * var(--fs)); font-weight: 700; color: var(--accent); }
.cover-mid h1 { font-size: calc(40px * var(--fs)); color: #fff; margin: 4px 0 10px; }
.cover-tagline { font-family: var(--serif); font-style: italic; font-size: calc(20px * var(--fs)); }
.cover-bottom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cover .pill { background: rgba(255,255,255,.18); color: #fff; }
.cover .pill-accent { background: var(--accent); color: #2b1a00; }
.cover-foot { flex-basis: 100%; margin-top: 12px; font-size: calc(16px * var(--fs)); font-style: italic; opacity: .95; }
.cover-foot.dark { color: var(--ink-soft); }

/* Índice */
.index-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.idx-item { width: 100%; display: flex; align-items: baseline; gap: 8px; min-height: 60px; background: none; border: none; border-radius: 10px; padding: 10px 8px; text-align: left; }
.idx-item:hover, .idx-item:focus-visible { background: #f1e9d5; }
.idx-title { font-family: var(--serif); font-size: calc(21px * var(--fs)); font-weight: 700; }
.idx-title small { display: block; font-family: var(--sans); font-weight: 400; font-size: calc(15px * var(--fs)); color: var(--ink-soft); }
.idx-leader { flex: 1; border-bottom: 2px dotted #b8a980; transform: translateY(-5px); min-width: 20px; }
.idx-num { font-family: var(--serif); font-weight: 700; font-size: calc(22px * var(--fs)); color: var(--brand); }

/* Texto */
.block { margin: 16px 0; padding-bottom: 14px; border-bottom: 1px dashed #d8ccb0; }
.block h3 { font-size: calc(22px * var(--fs)); margin-bottom: 6px; color: var(--brand-2); }
.block p { font-family: var(--serif); font-size: calc(19px * var(--fs)); line-height: 1.6; }

/* ----- Passatempos ----- */
.clue-bar { background: var(--brand); color: #fff; border-radius: 12px; padding: 10px 14px; font-size: calc(17px * var(--fs)); font-weight: 600; margin-bottom: 12px; min-height: 52px; display: flex; align-items: center; }

/* Palavras cruzadas */
.cw-grid-wrap { container-type: inline-size; max-width: 620px; margin: 0 auto 16px; }
.cw-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); border: 3px solid var(--line); background: var(--line); gap: 1px; user-select: none; -webkit-user-select: none; }
.cw .cell {
  position: relative; aspect-ratio: 1; background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cw .cell.black { background: var(--line); cursor: default; }
.cw .cell .num { position: absolute; top: 1px; left: 3px; font-size: calc(100cqw / var(--cols) * .26); font-weight: 700; line-height: 1; color: var(--ink); }
.cw .cell .ch { font-family: var(--serif); font-weight: 700; font-size: calc(100cqw / var(--cols) * .56); line-height: 1; color: var(--ink); margin-top: 10%; }
.cw .cell.inword { background: var(--inword); }
.cw .cell.sel { background: var(--sel); box-shadow: inset 0 0 0 3px var(--brand); }
.cw .cell.wrong .ch { color: var(--bad); }
.cw .cell.wrong { background: #fde0dc; }
.cw .cell.solved { background: #fff; }
.cw.solved-view .cell .ch { color: var(--brand-2); }

.cw-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cw-clues h3 { font-size: calc(21px * var(--fs)); border-bottom: 3px solid var(--ink); padding-bottom: 4px; margin-bottom: 8px; }
.cw-clues ol { list-style: none; padding: 0; margin: 0; }
.cw-clues li { font-size: calc(16.5px * var(--fs)); line-height: 1.35; margin-bottom: 4px; }
.cw-clues li button { text-align: left; background: none; border: none; padding: 6px 8px; border-radius: 8px; width: 100%; min-height: 44px; }
.cw-clues li button:hover { background: #efe7d2; }
.cw-clues li.on button { background: var(--sel); font-weight: 700; }
.cw-clues li.ok { color: var(--ok); }
.cw-clues li b { color: var(--brand); }
.cw-clues .len { color: var(--ink-soft); white-space: nowrap; }
.cw.solved-view .cw-clues li { font-size: calc(15px * var(--fs)); }

/* Caça-palavras */
.ws-wrap { max-width: 620px; margin: 0 auto 16px; container-type: inline-size; }
.ws-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); border: 3px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.wcell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: calc(100cqw / var(--cols) * .5); color: var(--ink); border: 1px solid #efe9da; }
.wcell.live { background: rgba(242,165,65,.45); }
.wcell.found { color: var(--ink); }
.wcell.dim { color: #b9b1a0; }
.ws-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ws-grid .ws-overlay { z-index: 1; }
.ws-words { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 20px; }
.ws-words li { font-weight: 700; font-size: calc(18px * var(--fs)); letter-spacing: .05em; padding: 3px 0; break-inside: avoid; }
.ws-words li button { background: none; border: none; font: inherit; letter-spacing: inherit; padding: 6px 4px; min-height: 40px; text-align: left; }
.ws-words li.found { text-decoration: line-through; color: var(--ok); text-decoration-thickness: 2px; }
.ws-words li.marked { color: var(--brand); }
.ws-words li.marked button::after { content: " ✓"; }
.ws.solved-view .ws-words li { font-size: calc(16px * var(--fs)); }

/* Sudoku */
.sd-wrap { max-width: 480px; margin: 0 auto 14px; container-type: inline-size; }
.sd-grid { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border: 3px solid var(--line); background: var(--line); gap: 1px; user-select: none; -webkit-user-select: none; }
.sd-grid .scell { min-width: 0; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.sd-grid .scell:nth-child(9n+3), .sd-grid .scell:nth-child(9n+6) { border-right: 2px solid var(--line); margin-right: -1px; }
.sd-grid .scell:nth-child(n+19):nth-child(-n+27), .sd-grid .scell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--line); margin-bottom: -1px; }
.sd-grid .scell { }
.sd-grid .scell.peer { background: #f2efe6; }
.sd-grid .scell.sel { background: var(--sel); }
.sd-grid .scell.given .sv { font-weight: 800; color: var(--ink); }
.sd-grid .scell:not(.given) .sv { color: var(--brand); font-weight: 700; }
.sd-grid .sv { font-family: var(--serif); font-size: calc(100cqw / 9 * .66); line-height: 1; }
.sd-grid .scell.conflict .sv { color: var(--bad); }
.sd-grid .scell.wrong { background: #fde0dc; }
.sd-grid .notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 88%; height: 88%; font-size: calc(100cqw / 9 * .25); color: var(--ink-soft); line-height: 1; }
.sd-grid .notes i { font-style: normal; display: flex; align-items: center; justify-content: center; }
.sd.solved-view .sd-grid .scell .sv { color: var(--brand-2); }
.numpad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; max-width: 560px; margin: 0 auto 12px; }
.num-btn { min-height: 56px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; font-family: var(--serif); font-weight: 700; font-size: calc(24px * var(--fs)); }
.num-btn:active { background: var(--sel); }
@media (max-width: 480px) { .numpad { grid-template-columns: repeat(5, 1fr); } .numpad .num-btn:nth-child(n) { } }

/* Ferramentas (barra) */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.tbtn { min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--ink-soft); background: #fff; font-weight: 700; font-size: calc(16px * var(--fs)); }
.tbtn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.tbtn.on { background: var(--accent); border-color: #7a4b00; color: #2b1a00; }

/* Gabaritos */
.answers .answer-block { margin: 18px 0 26px; padding-top: 10px; border-top: 2px solid var(--ink); }
.answers .answer-ref { font-family: var(--serif); font-weight: 700; font-size: calc(18px * var(--fs)); margin-bottom: 8px; color: var(--brand); }
.answers .inner { margin: 0; padding: 0; }
.answers .inner .cw-clues li { font-size: calc(14px * var(--fs)); }
.answers .inner.puzzle .ptitle { font-size: calc(20px * var(--fs)); }
.answers .inner .ws-words li { font-size: calc(14px * var(--fs)); }
.answers .cw-grid-wrap, .answers .ws-wrap, .answers .sd-wrap { max-width: 440px; }
.answers .inner .psub, .answers .inner .kicker, .answers .inner .hint { display: none; }
.answers .inner .ptitle { font-size: calc(20px * var(--fs)); margin: 0 0 6px; }
.answers .inner .solved-view .cw-grid .cell .ch { font-size: calc(100cqw / var(--cols) * .5); }

/* Gabarito de caça-palavras: círculo colorido por palavra */
.ws.solved-view .ws-grid .wcell.found { color: var(--brand-2); }

/* Ferramentas de navegação do leitor */
.reader-nav { display: flex; gap: 10px; align-items: stretch; justify-content: space-between; margin: 4px 0 8px; }
.reader-nav .btn { flex: 1; min-height: 60px; font-size: calc(19px * var(--fs)); }
.reader-nav .mid { flex: 0 0 auto; }
.jump { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 10px; font-weight: 700; flex-wrap: wrap; }
.jump input { width: 80px; min-height: 46px; font-size: calc(18px * var(--fs)); text-align: center; border: 2px solid var(--ink); border-radius: 10px; padding: 4px; }

/* Acessível: teclado/visual forte */
.kbd-proxy { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; font-size: 16px; }

.empty { text-align: center; padding: 40px 16px; }
.empty h2 { font-size: calc(26px * var(--fs)); margin-bottom: 8px; }

@media (min-width: 900px) {
  .sheet { padding: 34px 40px 52px; }
  .cover { min-height: 84vh; }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 640px) {
  .cw-clues { grid-template-columns: 1fr; }
  .ws-words { columns: 2; }
  .product { grid-template-columns: 96px 1fr; }
  .product .cover-thumb { width: 96px; }
  .reader-bar { top: 58px; }
}
@media (prefers-reduced-motion: reduce) { .stage .sheet { animation: none !important; } * { transition: none !important; } }

/* Alto contraste (Perfil) */
body.contrast { --paper: #fff; --desk: #d8d8d8; --ink: #000; --ink-soft: #222; --line: #000; --sel: #ffe066; --inword: #ffe9a6; }
body.contrast .sheet, body.contrast .card { border-color: #000; }

/* ==========================================================
   v2 — Plataforma: coleções, jogo dos 7 erros, criptograma
   ========================================================== */
.collection { margin-bottom: 30px; }
.col-head { margin: 4px 0 12px; }
.col-head h2 { font-size: calc(24px * var(--fs)); color: var(--brand-2); }
.col-head p { margin-top: 2px; }
.product.soon { opacity: .92; }

/* Proporção de revista: em telas largas a folha segue ~ 21×28 cm (3:4) */
@media (min-width: 700px) {
  .stage .sheet { min-height: calc(min(720px, 100vw - 80px) * 1.3333); }
  .stage .sheet.cover { min-height: calc(min(720px, 100vw - 80px) * 1.3333); }
}

/* Jogo dos 7 erros */
.se-panels { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 12px; }
@media (min-width: 640px) { .se-panels { grid-template-columns: 1fr 1fr; } }
.se-panel { margin: 0; }
.se-panel figcaption { text-align: center; font-family: var(--serif); font-weight: 700; font-size: calc(16px * var(--fs)); margin-top: 6px; color: var(--ink-soft); }
.se-svg { box-sizing: border-box; max-width: 100%; width: 100%; height: auto; display: block; border: 3px solid var(--line); border-radius: 12px; background: #fff; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.se-list { columns: 2; column-gap: 24px; font-size: calc(17px * var(--fs)); margin: 12px 0 0; padding-left: 0; list-style: none; }
.se-list li { margin-bottom: 6px; break-inside: avoid; }
.se.solved-view .se-panels { margin-bottom: 6px; }
@media (max-width: 480px) { .se-list { columns: 1; } }

/* Criptograma */
.cr-text { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 16px 0 6px; }
.cr-word { display: flex; gap: 3px; }
.cr-cell { position: relative; width: clamp(30px, 8.2vw, 44px); min-height: 56px; border: 2px solid var(--line); border-radius: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2px 0 4px; cursor: pointer; }
.cr-cell .c { font-size: calc(12px * var(--fs)); color: var(--ink-soft); font-weight: 700; line-height: 1.2; }
.cr-cell .p { font-family: var(--serif); font-size: calc(24px * var(--fs)); font-weight: 700; color: var(--brand-2); line-height: 1; }
.cr-cell.same { background: #fff1c7; }
.cr-cell.sel { background: var(--sel); box-shadow: inset 0 0 0 3px var(--brand); }
.cr-cell.wrong { background: #fde0dc; }
.cr-cell.wrong .p { color: var(--bad); }
.cr-cell.solved { cursor: default; }
.cr-author { text-align: right; font-family: var(--serif); font-style: italic; margin-top: 10px; color: var(--ink-soft); }
.cr-pair { display: inline-block; margin: 2px 8px 2px 0; font-size: calc(16px * var(--fs)); }
.cr.solved-view .cr-text { gap: 6px 10px; }

/* Linha de selos do cartão da banca: quebra com elegância, sem bolhas deformadas */
.status-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.status-pill { border-radius: 8px; line-height: 1.35; white-space: normal; max-width: 100%; }


/* =============================================================
   CARROSSEL — v1: banca editorial, leitor claro e responsivo.
   Personaliza a apresentação sem alterar a lógica dos passatempos.
   ============================================================= */
:root { --nav-h: 60px; --brand:#173f68; --brand-2:#123556; --accent:#e8b966; --desk:#f4f0e7; --paper:#fffdf7; }
body { background:#f4f0e7; color:#242933; }
.topbar { padding:9px clamp(12px,3vw,42px); box-shadow:0 1px 0 #173857; }
.brand-name { font-size:18px; letter-spacing:.02em; }
.brand-name small { font-size:11px; }
.brand-mark { width:35px; height:35px; }
.bottomnav { background:#fff; border-color:#e5e1d7; box-shadow:0 -3px 16px rgba(25,34,40,.05); }
.bottomnav a { font-size:13px; }
.bottomnav a .ico { font-family:var(--serif); font-size:23px; font-weight:bold; }
.bottomnav a.on { background:#eff4f8; color:#173f68; box-shadow:inset 0 3px 0 #173f68; }
main.view { max-width:1280px; padding:22px clamp(12px,3vw,42px) calc(var(--nav-h) + 28px); }
.h-title,.shelf-heading h2 { letter-spacing:-.02em; color:#182f48; }
.card { border:1px solid #e5e0d3; box-shadow:0 3px 18px rgba(41,40,39,.06); }
.btn { min-height:44px; font-size:15px; border-radius:9px; border-width:1px; padding:10px 15px; }
.btn.primary { background:#17436d; border-color:#17436d; }
.btn.accent { background:#edc477; border-color:#edc477; color:#263142; }
.btn:hover:not([disabled]), .rbtn:hover:not([disabled]) { filter:brightness(.96); }
.eyebrow { font-size:11px; line-height:1.4; text-transform:uppercase; font-weight:800; letter-spacing:.15em; color:#a57a41; }
.carrossel-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(230px,.75fr); gap:clamp(20px,5vw,70px); align-items:center; padding:clamp(22px,4vw,55px); background:linear-gradient(130deg,#123658 0%,#1b4a71 72%,#214768 100%); border-radius:18px; color:#fff; overflow:hidden; margin-bottom:34px; }
.hero-copy h1 { font-size:clamp(30px,4.1vw,57px); max-width:600px; line-height:1.06; letter-spacing:-.025em; margin:12px 0 14px; color:#fff; }
.hero-copy .eyebrow { color:#efc982; }
.hero-sub { font-family:var(--serif); font-size:clamp(17px,1.8vw,22px); line-height:1.5; max-width:520px; }
.hero-promise { font-size:14px; color:#d8e6f3; margin-top:14px; line-height:1.5; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:24px; }
.hero-secondary { background:transparent; border:1px solid #a9c4d9; color:#fff; }
.hero-magazine { width:min(100%,254px); margin:auto; transform:rotate(4deg); }
.hero-magazine .cover-thumb { width:100%; padding:22px; aspect-ratio:3/4; box-shadow:12px 14px 32px rgba(6,25,39,.4),inset 10px 0 0 rgba(0,0,0,.2); }
.hero-magazine .ct-mast { font-size:26px; }
.hero-magazine .ct-title { font-size:24px; }
.hero-magazine .ct-num { font-size:13px; }
.hero-cover-note { display:block; text-align:center; margin-top:13px; font-size:12px; color:#e4ebef; }
.shelf-section { margin:0 0 30px; scroll-margin-top:130px; }
.shelf-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.shelf-heading h2 { font-size:clamp(23px,2.4vw,32px); margin-top:4px; }
.shelf-heading>span { font-size:13px; color:#6e747e; white-space:nowrap; }
.shelf-track { display:flex; gap:15px; overflow-x:auto; padding:2px 3px 18px; scrollbar-width:thin; scroll-snap-type:x proximity; }
.shelf-theme,.shelf-issue,.offer-card { flex:0 0 clamp(180px,21vw,235px); scroll-snap-align:start; min-width:0; }
.shelf-theme { border:1px solid #e0ddd3; border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 4px 14px rgba(30,37,50,.05); }
.theme-art { aspect-ratio:4/4.7; padding:17px; background:linear-gradient(135deg,var(--theme),color-mix(in srgb,var(--theme) 70%,black)); color:white; display:flex; flex-direction:column; justify-content:space-between; position:relative; box-shadow:inset 8px 0 0 rgba(0,0,0,.16); }
.theme-art .theme-edition { font-size:11px; letter-spacing:.1em; font-weight:700; }
.theme-art .theme-symbol { position:absolute; right:10px; top:34px; opacity:.1; font-size:170px; line-height:1; }
.theme-art strong { font-family:var(--serif); font-size:clamp(23px,2.6vw,32px); line-height:1.12; max-width:190px; z-index:1; }
.theme-art small { font-size:10px; letter-spacing:.12em; font-weight:800; }
.theme-foot { padding:12px 14px 14px; }
.theme-foot h3 { font-size:17px; margin-bottom:3px; }
.theme-foot p { font-size:13px; color:#646a72; min-height:37px; }
.soon-label { display:inline-block; color:#6b7179; font-size:12px; padding-top:7px; }
.shelf-issue { display:flex; flex-direction:column; background:#fff; padding:12px; border:1px solid #e1ddd3; border-radius:12px; }
.shelf-issue .cover-thumb { width:100%; max-width:205px; margin:auto; }
.shelf-issue .ct-mast { font-size:21px; }
.shelf-issue .ct-title { font-size:19px; }
.issue-info h3 { font-size:18px; margin:8px 0 4px; }
.issue-info p { font-size:13px; color:#656b75; min-height:36px; }
.issue-info>strong { display:block; font-size:20px; color:#173f68; margin:8px 0 3px; }
.issue-coming { display:block; margin-top:4px; font-size:12px; color:#73777b; }
.offer-card { background:#fff; border:1px solid #e0dbcf; border-radius:12px; padding:18px; min-height:218px; display:flex; flex-direction:column; gap:9px; }
.offer-eyebrow { font-size:11px; color:#9a6f39; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.offer-card h3 { font-size:21px; }
.offer-price { font-family:var(--serif); font-size:31px; color:#123e67; letter-spacing:-.03em; }
.offer-card p { font-size:13px; color:#535d68; }
.offer-card .soon-label { margin-top:auto; border-top:1px solid #e5dfd5; }
.benefits-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px 10px; border-top:1px solid #ded7ca; }
.benefits-strip>div { display:flex; align-items:center; gap:10px; }
.benefits-strip strong { font-size:26px; color:#16466c; }
.benefits-strip span { font-size:14px; font-weight:700; }
.benefits-strip small { font-size:12px; color:#757a80; font-weight:400; }
.note-legal { font-size:12px; line-height:1.4; margin:10px 3px; }
.reader-bar { padding:8px 10px; border:1px solid #e5e0d5; border-radius:12px; top:117px; gap:8px; box-shadow:0 4px 14px rgba(23,30,40,.07); }
.reader-bar .rt { font-size:15px; min-width:120px; }
.reader-bar .pg { font-size:13px; white-space:nowrap; }
.reader-back { font-size:13px; font-weight:800; color:#17466e; text-decoration:none; padding:6px; }
.reader-controls { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-left:auto; }
.rbtn { min-width:35px; min-height:36px; padding:5px 9px; font-size:14px; border:1px solid #c9d1d9; border-radius:8px; }
.rbtn[disabled] { opacity:.4; cursor:not-allowed; }
.reader-tip { text-align:center; font-size:12px; color:#707781; padding:8px; }
.stage .sheet { box-shadow:0 1px 0 #e6dcc4,0 12px 34px rgba(40,40,40,.12); border-radius:3px 9px 9px 3px; }
.stage .cw .cw-grid-wrap { width:100%; min-width:0; }
.stage .cw .clue-bar { position:sticky; top:170px; z-index:5; border-radius:8px; padding:8px 12px; min-height:38px; font-size:15px; }
.stage .cw .cw-clues li button { font-size:14px; min-height:36px; padding:5px 7px; }
.stage .cw .cw-clues h3 { font-size:19px; }
.stage .sd-wrap { max-width:min(100%,490px); width:100%; }
.stage .sd-grid .sv { font-size:clamp(13px,4cqw,28px); }
.stage .sd-grid .scell { min-width:0; min-height:0; }
.stage .sd .numpad { width:100%; grid-template-columns:repeat(9,minmax(0,1fr)); }
.stage .sd .num-btn { min-height:38px; padding:4px; font-size:17px; }
@media (min-width:850px) {
 .topbar { position:sticky; top:0; z-index:35; }
 .bottomnav { position:sticky; top:55px; bottom:auto; z-index:29; height:54px; display:flex; justify-content:center; gap:clamp(5px,2vw,25px); padding:0; box-shadow:0 4px 12px rgba(15,24,36,.04); }
 .bottomnav a { flex-direction:row; gap:8px; padding:0 18px; font-size:14px; }
 .bottomnav a .ico { font-size:20px; }
 .bottomnav a.on { box-shadow:inset 0 -3px 0 #173f68; }
 main.view { padding-bottom:36px; }
 .stage .sheet.cw:not(.solved-view) { max-width:1170px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr); gap:8px 24px; align-content:start; min-height:680px; }
 .stage .cw:not(.solved-view)>.kicker,
 .stage .cw:not(.solved-view)>.ptitle,
 .stage .cw:not(.solved-view)>.psub,
 .stage .cw:not(.solved-view)>.clue-bar { grid-column:1/-1; }
 .stage .cw:not(.solved-view)>.cw-grid-wrap { grid-column:1; grid-row:5; align-self:start; margin:0; max-width:620px; }
 .stage .cw:not(.solved-view)>.cw-clues { grid-column:2; grid-row:5; display:grid; grid-template-columns:1fr; gap:12px; align-content:start; max-height:640px; overflow:auto; padding-right:5px; }
 .stage .cw:not(.solved-view)>.toolbar,
 .stage .cw:not(.solved-view)>.status,
 .stage .cw:not(.solved-view)>.folio { grid-column:1/-1; }
}
@media (max-width:849px) {
 .reader-bar { top:53px; }
 .reader-bar .rt { display:none; }
 .stage .cw .clue-bar { top:111px; }
 .stage .cw .cw-clues { display:grid; grid-template-columns:1fr 1fr; max-height:160px; overflow:auto; gap:10px; margin-bottom:14px; }
 .stage .cw .cw-grid-wrap { margin-bottom:10px; }
 .benefits-strip { grid-template-columns:1fr 1fr; }
 .shelf-heading>span { display:none; }
 .shelf-theme,.shelf-issue,.offer-card { flex-basis:205px; }
}
@media (max-width:560px) {
 :root { --nav-h:66px; }
 .brand-name { font-size:14px; }
 .brand-name small { font-size:9px; }
 .topbar { padding:6px 10px; }
 .bottomnav a { font-size:10px; }
 .bottomnav a .ico { font-size:19px; }
 main.view { padding:10px 10px calc(var(--nav-h) + 18px); }
 .carrossel-hero { grid-template-columns:minmax(0,1fr) minmax(92px,.42fr); gap:11px; padding:17px 13px; border-radius:12px; }
 .hero-copy h1 { font-size:25px; margin:8px 0 7px; }
 .hero-sub { font-size:14px; }
 .hero-promise { font-size:11px; margin-top:9px; }
 .hero-actions { margin-top:13px; }
 .hero-actions .btn { min-height:39px; font-size:12px; padding:7px 8px; }
 .hero-magazine .cover-thumb { padding:9px; }
 .hero-magazine .ct-mast { font-size:11px; }
 .hero-magazine .ct-title { font-size:12px; }
 .hero-magazine .ct-num { font-size:9px; }
 .hero-cover-note { font-size:10px; }
 .shelf-section { margin-bottom:17px; }
 .shelf-track { gap:11px; }
 .shelf-theme,.shelf-issue,.offer-card { flex-basis:170px; }
 .shelf-heading h2 { font-size:23px; }
 .theme-art strong { font-size:24px; }
 .theme-art .theme-symbol { font-size:115px; }
 .reader-bar { margin-bottom:6px; padding:5px; gap:3px; }
 .reader-bar .pg { font-size:12px; }
 .reader-bar .how-btn { font-size:11px; padding:4px; }
 .reader-bar .font-btn { display:none; }
 .reader-controls { gap:3px; }
 .rbtn { min-height:32px; min-width:29px; padding:4px 6px; font-size:12px; }
 .stage .sheet { padding:15px 10px 36px; min-height:0; }
 .stage .sheet .ptitle { font-size:24px; }
 .stage .cw .clue-bar { top:103px; font-size:12px; }
 .stage .cw .cw-clues { grid-template-columns:1fr 1fr; font-size:12px; max-height:140px; }
 .stage .cw .cw-clues li button { font-size:12px; }
 .stage .cw .cw-clues h3 { font-size:15px; }
 .stage .sd .numpad { gap:3px; }
 .stage .sd .num-btn { min-height:34px; padding:0; font-size:16px; }
 .benefits-strip { grid-template-columns:1fr; }
}