/* Runekin · css/settings.css — toast, setup de câmara (7a), idioma (7d), como jogar (7b), créditos (7c).
   Fatia do antigo style.css (linhas 612–720); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ TOAST ============ */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 10px 18px;
  font: 400 14px var(--display); letter-spacing: 1px; text-transform: uppercase;
  z-index: 300; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none;
  max-width: min(92vw, 420px); text-align: center; clip-path: var(--e-chip);
  filter: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ CHAMBER SETUP (7a) ============ */
#setupOverlay { background: var(--ink); background-image: var(--dots-ink); background-size: 5px 5px; padding: 0; }
#setupOverlay .setup-card { --face: transparent; --sh: transparent; clip-path: none; }
#langOverlay .lang-card { --face: transparent; --sh: transparent; background: var(--paper); clip-path: var(--e-hdr-up); }
#setupOverlay .setup-card::before, #setupOverlay .setup-card::after { display: none; }
.setup-card.st { width: 100%; height: 100%; max-height: none; padding: 0; color: #fff; text-align: center; overflow: hidden; }
.st-logo { position: absolute; left: 50%; top: calc(70px + env(safe-area-inset-top)); width: 220px; transform: translateX(-50%) rotate(-4deg); }
.st-text { position: absolute; left: 24px; right: 24px; top: calc(190px + env(safe-area-inset-top)); }
.setup-eyebrow { font: 400 13px var(--display); letter-spacing: 4px; text-transform: uppercase; color: var(--c2); }
.setup-title { margin: 6px 0 0; font: 400 44px/.9 var(--display); text-transform: uppercase; }
.setup-sub { font: 400 13px var(--body); color: var(--muted-ink); margin: 10px 0 0; }
.setup-options { position: absolute; left: 24px; right: 24px; top: calc(360px + env(safe-area-inset-top)); display: grid; gap: 14px; }
.setup-check {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 12px;
  padding: 16px; color: #fff; text-align: left; cursor: pointer;
  --face: transparent; --clip: var(--e-card);
}
.setup-check::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--face); clip-path: var(--clip); }
.setup-check::after { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--clip); background: transparent; transform: translate(6px, 6px); }
.setup-check { border: 3px solid #fff; }
.setup-check.checked { border-color: transparent; --face: #fff; color: var(--ink); transform: rotate(-1deg); }
.setup-check.checked::after { background: var(--c1); }
.setup-check[data-box="B"].checked::after { background: #2ad2c9; }
.setup-check input { position: absolute; opacity: 0; pointer-events: none; }
.setup-dot { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 70px; background: none !important; }
.setup-dot span { height: 20px; display: block; }
.setup-text b { display: block; font: 400 30px/.9 var(--display); text-transform: uppercase; }
.setup-text small { display: block; font: 400 12px var(--body); color: var(--muted-ink); margin-top: 3px; }
.setup-check.checked .setup-text small { color: var(--muted); }
.setup-tick { width: 40px; height: 40px; border: 3px solid #fff; display: grid; place-items: center; font: 400 24px var(--display); }
.setup-check.checked .setup-tick { border-color: var(--ink); background: var(--ink); color: #fff; }
.setup-check.checked .setup-tick::after { content: "✓"; }
/* tema de cores (só com as duas câmaras): qual paleta o app veste */
.setup-theme { position: absolute; left: 24px; right: 24px; top: calc(566px + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: center; gap: 8px; }
.setup-theme .bs-label { color: var(--muted-ink); margin-right: 4px; }
.setup-theme .bs-btn { --face: transparent; color: #fff; border: 3px solid #fff; }
.setup-theme .bs-btn::before, .setup-theme .bs-btn::after { clip-path: none; }
.setup-theme .bs-btn.on { border-color: transparent; color: var(--ink); }
.setup-theme .bs-btn.on[data-theme="A"] { --face: #ffbf3f; }
.setup-theme .bs-btn.on[data-theme="B"] { --face: #2ad2c9; }
.st-note { position: absolute; left: 24px; right: 24px; top: calc(620px + env(safe-area-inset-top)); font: 400 12px var(--body); color: var(--muted-ink); }
.setup-confirm { position: absolute; left: 28px; right: 28px; bottom: calc(40px + env(safe-area-inset-bottom)); padding: 16px; font-size: 28px; }
.setup-close { position: absolute; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); font: 400 13px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-ink); padding: 6px; }
#setupOverlay .setup-card.st { position: relative; }
/* short screens: stack instead of absolute */
@media (max-height: 760px) {
  .setup-card.st { overflow-y: auto; }
  .st-logo { position: static; display: block; margin: calc(40px + env(safe-area-inset-top)) auto 0; transform: rotate(-4deg); }
  .st-text, .setup-options, .st-note { position: static; margin: 20px 24px 0; }
  .setup-theme { position: static; margin: 16px 24px 0; }
  .setup-confirm { position: static; margin: 24px 28px 8px; display: flex; width: auto; }
  .setup-close { position: static; display: block; margin-bottom: 20px; }
}

/* ============ LANGUAGE (7d) ============ */
#langOverlay { padding: 0; align-items: end; }
.lang-card { width: 100%; height: 600px; max-height: 88dvh; max-width: none; padding: 0; color: var(--ink); background: var(--paper); clip-path: var(--e-hdr-up); text-align: left; animation: panelUp .3s cubic-bezier(.2,.8,.2,1) both; }
.lang-card::before, .lang-card::after { display: none; }
.lang-head { position: absolute; left: 24px; right: 24px; top: 190px; display: flex; justify-content: space-between; align-items: baseline; }
.lang-head .setup-title { margin: 0; font-size: 40px; }
.lang-head .bs-label { color: var(--muted); }
.lang-list { position: absolute; left: 24px; right: 24px; top: 250px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lang-opt { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: #fff; color: var(--ink); border: 3px solid var(--ink); font: 400 20px var(--display); }
.lang-opt.active { background: var(--ink); color: #fff; }
.lang-opt .lang-code { font: 500 10px var(--mono); letter-spacing: 1px; }
.lang-tick { display: none; }
.lang-card .setup-close { position: absolute; left: 28px; right: 28px; bottom: calc(40px + env(safe-area-inset-bottom)); padding: 14px; border: 3px solid var(--ink); color: var(--ink); font: 400 22px var(--display); letter-spacing: 2px; }
@media (max-height: 700px) { .lang-head { top: 120px; } .lang-list { top: 180px; } }

/* ============ HOW TO PLAY (7b) ============ */
#screen-instrucoes { padding-bottom: 60px; }
.ht-head { height: 112px; }
.ht-lead { margin: 40px 0 0; font: 400 38px/.9 var(--display); text-transform: uppercase; }
.ht-lead mark { background: var(--c1); color: var(--ink); padding: 0 8px; }
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.step-n { width: 44px; height: 44px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 400 26px var(--display); }
.steps li b { display: block; font: 400 20px/1 var(--display); text-transform: uppercase; }
.steps li div div { font: 400 12px/1.4 var(--body); color: var(--muted); margin-top: 2px; }
.ht-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.ht-boxes div { padding: 8px 12px; border: 3px solid var(--ink); }
.ht-boxes .bs-label { color: var(--muted); display: block; }
.ht-boxes b { display: block; font: 400 16px var(--display); text-transform: uppercase; margin-top: 2px; }
.ht-note { margin: 22px 0 0; font: 400 12px/1.45 var(--body); color: var(--muted); }
.ht-cta { margin-top: 28px; padding: 14px; font-size: 24px; }
.prose h3, .prose .lead { display: none; }

/* ============ CREDITS (7c) ============ */
#screen-creditos { color: #fff; padding-bottom: 120px; }
.cr-swatches { display: flex; gap: 6px; margin-top: 40px; }
.cr-swatches span { flex: 1; height: 14px; }
.cr-logo { display: block; width: 260px; margin: 26px auto 0; transform: rotate(-3deg); }
.cred { margin-top: 26px; }
.cred-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 2px solid #333; }
.cred-row:last-child { border-bottom: 0; }
.cred-row span { font: 400 13px var(--display); letter-spacing: 3px; text-transform: uppercase; color: var(--muted-ink); }
.cred-row b { font: 400 20px var(--display); text-transform: uppercase; text-align: right; }
.cred-row b a { text-decoration: none; }
#paletteToggle { display: flex; gap: 4px; }
#paletteToggle button { font: 400 14px var(--display); text-transform: uppercase; padding: 2px 10px; border: 2px solid #fff; color: #fff; }
#paletteToggle button.on { background: #fff; color: var(--ink); }
.cred-note { font: 400 12px/1.5 var(--body); color: var(--muted-ink); text-align: center; margin-top: 26px; }
#paletteNote { text-align: left; font-size: 11px; margin-top: 4px; }
.cred-foot-band { position: fixed; left: 0; right: 0; bottom: 0; height: 70px; background: var(--c1); clip-path: var(--e-foot); max-width: 520px; margin: 0 auto; z-index: 40; }
.cred-foot { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; padding: 0 24px; font: 500 10px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink); z-index: 41; }
.cred-mark, .sigil { display: none; }