/* Papelzinho — identidade "papel de caderno"
   Capa azul do caderno ao fundo; tudo que a pessoa toca é papel.
   Nomes sempre à mão, em azul de caneta. Status = marca-texto. */

:root {
  --cover: #2443D6;
  --cover-deep: #1A31A8;
  --cover-soft: #3A57E4;
  --on-cover: #FFFFFF;
  --on-cover-muted: #C9D4FF;
  --paper: #FFFFFF;
  --paper-2: #F4F7FF;
  --rule: #D3E3F6;
  --margin: #F47FA0;
  --ink: #1B2A6B;
  --ink-muted: #5A6699;
  --pen: #1F3BC4;
  --marker: #FFE24A;
  --marker-press: #D9B91F;
  --mint: #41E09B;
  --mint-ink: #0B6B45;
  --postit: #FFEB7A;
  --danger: #D93848;
  --focus: #FFB800;
  --shadow-ink: rgba(10, 20, 80, .28);

  --font-ui: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-text: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --gutter: 16px;
  --column: 560px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cover: #0E1647;
    --cover-deep: #080E33;
    --cover-soft: #18226A;
    --on-cover-muted: #A9B5EE;
    --paper: #161F55;
    --paper-2: #1E2866;
    --rule: #26306E;
    --margin: #B85476;
    --ink: #E6EBFF;
    --ink-muted: #A3AEDD;
    --pen: #9DB4FF;
    --postit: #E8D45C;
    --shadow-ink: rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--cover);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 1.6px),
    linear-gradient(180deg, var(--cover-soft) 0, var(--cover) 320px);
  background-size: 18px 18px, 100% 100%;
  color: var(--on-cover);
  font: 17px/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
h1[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- moldura ---------- */
.shell { width: 100%; max-width: calc(var(--column) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter) calc(48px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 0 6px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 800 24px/1 var(--font-ui); letter-spacing: -.01em; color: var(--on-cover); }
.brand .pipo { width: 40px; height: 44px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.avatar-btn { text-decoration: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: var(--cover-deep) center/cover no-repeat; color: #fff; font: 700 16px/1 var(--font-ui); display: grid; place-items: center; cursor: pointer; padding: 0; }

.page { display: grid; gap: 18px; padding-top: 8px; }
.page-title { margin: 4px 0 0; font: 800 clamp(30px, 8vw, 40px)/1.05 var(--font-ui); letter-spacing: -.015em; color: var(--on-cover); text-wrap: balance; }
.page-lead { margin: -6px 0 0; color: var(--on-cover-muted); max-width: 36ch; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--on-cover-muted); text-decoration: none; font: 600 16px/1 var(--font-ui); padding: 6px 0; }
.back-link:hover { color: var(--on-cover); }

/* ---------- papel ---------- */
/* Folha arrancada do caderno: picotes no topo e margem rosa. */
.sheet {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0 0 10px 10px;
  padding: 26px 20px 22px 44px;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 4.5px, #000 5px) top / 15px 100% repeat-x;
          mask: radial-gradient(circle at 50% 0, transparent 4.5px, #000 5px) top / 15px 100% repeat-x;
}
.sheet::before { content: ''; position: absolute; top: 0; bottom: 0; left: 30px; width: 2px; background: var(--margin); opacity: .75; pointer-events: none; }
.sheet h2, .sheet h3 { margin: 0 0 6px; font: 700 22px/1.2 var(--font-ui); color: var(--ink); }
.sheet p { margin: 0 0 12px; }
.sheet .muted, .muted { color: var(--ink-muted); }
.sheet > :last-child { margin-bottom: 0; }

/* Post-it: para quem organiza e para dicas do Pipo. */
.postit {
  position: relative;
  background: var(--postit);
  color: #3B2F00;
  padding: 22px 20px 20px;
  border-radius: 2px 2px 18px 2px;
  transform: rotate(-1.2deg);
  box-shadow: 0 14px 22px -14px var(--shadow-ink);
}
.postit::before { content: ''; position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(2deg); background: rgba(255,255,255,.55); border-radius: 2px; }
.postit h2 { margin: 0 0 4px; font: 800 24px/1.15 var(--font-ui); color: #3B2F00; }
.postit p { margin: 0 0 14px; }

/* ---------- escrita à mão ---------- */
.hand { font-family: var(--font-hand); color: var(--pen); font-weight: 700; letter-spacing: .01em; }

/* ---------- botões ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 10px 22px;
  border: 0; border-radius: 14px;
  background: var(--marker); color: #1B2A6B;
  font: 800 18px/1.1 var(--font-ui);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--marker-press);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active:not(:disabled) { transform: translateY(3px) scale(.985); box-shadow: 0 1px 0 var(--marker-press); }
.btn:disabled { cursor: not-allowed; filter: grayscale(.6) opacity(.6); }
.btn.blue { background: var(--cover); color: #fff; box-shadow: 0 4px 0 var(--cover-deep); }
.btn.blue:active:not(:disabled) { box-shadow: 0 1px 0 var(--cover-deep); }
.btn.white { background: #fff; color: #1B2A6B; box-shadow: 0 4px 0 #B8C4F2; }
.sheet .btn.white, .dialog .btn.white { background: var(--paper-2); color: var(--pen); box-shadow: 0 4px 0 var(--rule); }
.sheet .btn.white:active:not(:disabled), .dialog .btn.white:active:not(:disabled) { box-shadow: 0 1px 0 var(--rule); }
.btn.ghost { background: transparent; color: inherit; box-shadow: none; min-height: 44px; padding: 8px 12px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn.ghost:active:not(:disabled) { transform: scale(.97); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.btn.danger:active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 0 0 2px var(--danger); }
.btn.small { min-height: 40px; padding: 6px 14px; font-size: 16px; border-radius: 12px; box-shadow: 0 3px 0 var(--marker-press); }
.btn.small.blue { box-shadow: 0 3px 0 var(--cover-deep); }
.btn.wide { width: 100%; }
.btn.small.danger { box-shadow: inset 0 0 0 2px var(--danger); }
.btn .ico { width: 20px; height: 20px; flex: none; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); animation: ripple .55s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- formulários ---------- */
.field { display: grid; gap: 6px; margin: 0 0 14px; }
.field > span, .field-label { font: 700 16px/1.2 var(--font-ui); color: var(--ink); }
.field small, .hint { font-size: 14px; color: var(--ink-muted); line-height: 1.4; }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 50px;
  padding: 12px 14px;
  border: 0; border-bottom: 2px solid var(--ink-muted);
  border-radius: 12px 12px 4px 4px;
  background: var(--paper-2); color: var(--ink);
  font-size: 18px; line-height: 1.3;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 90px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cover); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marker) 70%, transparent); }
.input.hand-input { font: 700 28px/1.1 var(--font-hand); color: var(--pen); }
.code-input { font: 800 26px/1 var(--font-ui) !important; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.code-input::placeholder { letter-spacing: .14em; opacity: .35; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-form { display: flex; gap: 10px; align-items: stretch; }
.inline-form .input { flex: 1; min-width: 0; }
@media (max-width: 420px) {
  .inline-form.stack-sm { flex-direction: column; }
}
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16px; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--cover); flex: none; }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 14px; cursor: pointer; }
.switch input { appearance: none; width: 54px; height: 32px; border-radius: 999px; background: var(--rule); position: relative; flex: none; cursor: pointer; transition: background .2s; margin: 0; }
.switch input::after { content: ''; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked { background: var(--mint); }
.switch input:checked::after { transform: translateX(22px); }
.form-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--danger) 12%, var(--paper)); color: var(--danger); font-weight: 700; font-size: 15px; }
.form-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--mint) 18%, var(--paper)); color: var(--ink); font-size: 15px; }

/* ---------- chips de evento (data, local, valor) ---------- */
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fact { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--on-cover); font: 600 15px/1.2 var(--font-ui); }
.fact svg { width: 17px; height: 17px; opacity: .85; }
.sheet .fact { background: var(--paper-2); color: var(--ink); }

/* ---------- lista de nomes (status) ---------- */
.names, .finale-chain { list-style: none; margin: 0; padding: 0; background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 35px); }
.names li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; line-height: 35px; }
.names .who { font: 700 26px/35px var(--font-hand); color: var(--pen); position: relative; z-index: 0; padding: 0 4px; margin-left: -4px; overflow-wrap: anywhere; }
/* Marca-texto verde em quem já pegou. */
.names li.done .who::before {
  content: ''; position: absolute; z-index: -1; left: -2px; right: -6px; top: 9px; bottom: 6px;
  background: var(--mint); opacity: .55; border-radius: 3px 8px 4px 9px; transform: rotate(-1deg) skewX(-8deg);
  transform-origin: left; animation: swipe .5s ease-out both;
}
@keyframes swipe { from { transform: rotate(-1deg) skewX(-8deg) scaleX(0); } }
.status-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 700 14px/1 var(--font-ui); color: var(--ink-muted); }
.names li.done .status-tag { color: var(--mint-ink); }
@media (prefers-color-scheme: dark) { .names li.done .status-tag { color: var(--mint); } }
.status-tag svg { width: 18px; height: 18px; }
.count-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.count-line h2 { margin: 0; }
.progress { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin: 0 0 12px; }
.progress > i { display: block; height: 100%; background: var(--mint); border-radius: inherit; transition: width .5s ease; }

/* ---------- Pipo ---------- */
.pipo { width: 96px; height: 104px; overflow: visible; }
.pipo .pipo-body { animation: float 4.5s ease-in-out infinite; transform-origin: 60px 120px; }
.pipo .pipo-eyes { animation: blink 5s infinite; transform-origin: 60px 62px; transform-box: view-box; }
.pipo .pipo-wave { animation: wave 1.6s ease-in-out infinite; transform-origin: 98px 70px; transform-box: view-box; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
.pipo-says { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px; }
.bubble {
  position: relative; align-self: center;
  background: #fff; color: #1B2A6B;
  border-radius: 18px 18px 18px 6px; padding: 12px 16px;
  font-size: 16px; line-height: 1.4;
  box-shadow: 0 10px 20px -14px var(--shadow-ink);
}
.bubble::before { content: ''; position: absolute; left: -8px; bottom: 10px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble b { font-weight: 700; }

/* ---------- home ---------- */
.hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; padding: 6px 0 4px; }
.hero h1 { margin: 0; font: 800 clamp(34px, 10vw, 50px)/1 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
.hero p { margin: 10px 0 0; color: var(--on-cover-muted); font-size: 18px; max-width: 30ch; }
.hero .pipo { width: 120px; height: 132px; margin-bottom: -8px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--marker); color: #1B2A6B; font: 800 18px/1 var(--font-ui); }
.steps b { display: block; font: 700 18px/1.3 var(--font-ui); }
.room-link { display: block; text-decoration: none; color: inherit; padding: 12px 0; border-bottom: 2px dashed var(--rule); }
.room-link:last-child { border-bottom: 0; padding-bottom: 0; }
.room-link .title { font: 700 20px/1.2 var(--font-ui); display: block; }
.room-link .meta { font-size: 14px; color: var(--ink-muted); }
.footer { margin-top: 26px; text-align: center; color: var(--on-cover-muted); font-size: 14px; }

/* ---------- criar sala ---------- */
.stepper { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stepper li { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); }
.stepper li.on { background: var(--marker); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--paper-2); color: var(--pen); font: 700 22px/1.4 var(--font-hand); }
.chip.dup { background: color-mix(in srgb, var(--danger) 15%, var(--paper)); color: var(--danger); }
.chip button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; }
.chip button:active { transform: scale(.9); }
.chip button svg { width: 16px; height: 16px; }
.rule-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 2px dashed var(--rule); }
.rule-row .hand { font-size: 22px; }

/* ---------- painel do líder ---------- */
.share-box { display: grid; gap: 12px; }
.big-code { font: 800 clamp(36px, 11vw, 48px)/1 var(--font-ui); letter-spacing: .08em; color: var(--ink); }
.person-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 35px; }
.person-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.pcode { font: 800 16px/1 var(--font-ui); letter-spacing: .12em; padding: 4px 8px; border-radius: 8px; background: var(--paper-2); color: var(--ink); }
.danger-zone { border-top: 2px dashed var(--rule); padding-top: 14px; margin-top: 6px; }
.finale-chain { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.finale-chain li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 26px/35px var(--font-hand); color: var(--pen); opacity: 0; animation: chain-in .45s ease-out forwards; animation-delay: calc(var(--i) * 420ms); }
.finale-chain li svg { width: 22px; height: 22px; color: var(--margin); }
@keyframes chain-in { from { opacity: 0; transform: translateY(8px) rotate(-1deg); } to { opacity: 1; transform: none; } }

/* ---------- janelas (folha que sobe) ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center; background: rgba(8, 14, 51, .55); backdrop-filter: blur(3px); animation: fade .2s ease-out; }
.overlay.center { align-items: center; }
.dialog {
  width: min(100%, 560px); max-height: calc(100dvh - 24px); overflow: auto;
  background: var(--paper); color: var(--ink);
  border-radius: 22px 22px 0 0; padding: 24px 20px calc(22px + env(safe-area-inset-bottom));
  animation: rise .28s cubic-bezier(.2, .9, .3, 1.1);
  overscroll-behavior: contain;
}
.overlay.center .dialog { border-radius: 22px; margin: 12px; width: min(calc(100% - 24px), 480px); }
.dialog h2 { margin: 0 0 8px; font: 800 24px/1.2 var(--font-ui); }
.dialog .btn-row { margin-top: 14px; }
.dialog-close { position: sticky; top: -8px; float: right; margin: -10px -8px 0 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(40px); opacity: .5; } }

.toast-host { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { max-width: 520px; background: #0E1647; color: #fff; padding: 12px 18px; border-radius: 14px; font: 600 16px/1.35 var(--font-ui); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); animation: rise .25s ease-out; }
.toast.ok { background: #0B6B45; }
.toast.error { background: #A3182A; }

.loading { display: grid; justify-items: center; gap: 12px; padding: 60px 0; color: var(--on-cover-muted); font: 600 17px/1.3 var(--font-ui); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: var(--marker); animation: spin .8s linear infinite; }
.sheet .spinner, .dialog .spinner { border-color: var(--rule); border-top-color: var(--cover); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- o papelzinho (a revelação) ---------- */
.reveal-screen { position: fixed; inset: 0; z-index: 60; overflow: auto; background: radial-gradient(120% 80% at 50% 0%, var(--cover-soft), var(--cover-deep)); color: #fff; display: grid; justify-items: center; align-content: start; gap: 18px; padding: calc(28px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); animation: fade .25s ease-out; }
.reveal-screen h2 { margin: 0; font: 800 26px/1.15 var(--font-ui); text-align: center; text-wrap: balance; }
.reveal-hint { margin: 0; color: var(--on-cover-muted); text-align: center; font: 600 17px/1.3 var(--font-ui); min-height: 1.3em; }
.slip-stage { perspective: 1400px; width: min(88vw, 340px); padding-top: 8px; }
.slip { position: relative; width: 100%; transform-style: preserve-3d; cursor: pointer; border: 0; padding: 0; background: none; display: block; color: inherit; text-align: center; }
.slip:disabled { cursor: default; }
.slip-panel { display: block; position: relative; height: 128px; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, 1.35, .45, 1); }
.slip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: #FFFFFF; color: #1B2A6B; display: grid; place-items: center; padding: 10px 18px 10px 40px; background-image: repeating-linear-gradient(to bottom, transparent 0 30px, #D3E3F6 30px 32px); }
.slip-face::before { content: ''; position: absolute; top: 0; bottom: 0; left: 26px; width: 2px; background: #F47FA0; opacity: .8; }
.slip-top .slip-face { border-radius: 6px 6px 0 0; }
.slip-bottom .slip-face { border-radius: 0 0 6px 6px; }
.slip-back { transform: rotateX(180deg); background: #F2F5FF; background-image: radial-gradient(circle at 10px 10px, #D3DDFB 2px, transparent 2.5px); background-size: 20px 20px; }
.slip-back::before { display: none; }
.slip-top { transform-origin: 50% 100%; z-index: 3; }
.slip-bottom { transform-origin: 50% 0%; z-index: 2; }
.slip-middle { z-index: 1; }
.slip-middle .slip-face { box-shadow: 0 0 0 1px rgba(27,42,107,.04); }
/* Dobrado em três: a aba de baixo sobe, a de cima desce por cima. */
.slip.folded .slip-top { transform: rotateX(-178deg); }
.slip.folded .slip-bottom { transform: rotateX(179.4deg); }
.slip.folded { animation: slip-in .7s cubic-bezier(.2, 1.2, .4, 1) both; }
.slip.folded.ready { animation: slip-idle 2.6s ease-in-out infinite; }
.slip.opening .slip-bottom { transition-delay: .55s; }
.slip-label { font: 700 19px/1.2 var(--font-ui); color: #5A6699; }
.slip-name { font: 700 clamp(44px, 14vw, 60px)/1 var(--font-hand); color: #1F3BC4; display: block; clip-path: inset(0 100% 0 0); overflow-wrap: anywhere; }
.slip.open .slip-name { animation: write 1.1s .15s steps(14, end) forwards; }
.slip-small { font: 600 15px/1.35 var(--font-text); color: #5A6699; }
.seal { position: absolute; z-index: 5; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: #F47FA0; color: #fff; box-shadow: 0 6px 0 #C9557A; transform: translateZ(30px) rotate(-8deg); transition: transform .35s ease-in, opacity .35s ease-in; }
.seal svg { width: 32px; height: 32px; }
.slip.opening .seal, .slip.open .seal { transform: translateZ(60px) translate(80px, -140px) rotate(140deg) scale(.6); opacity: 0; }
@keyframes slip-in { from { transform: translateY(70px) rotate(-14deg) scale(.6); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
@keyframes slip-idle { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
.reveal-after { display: grid; gap: 12px; width: min(100%, 420px); opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
.reveal-after.show { opacity: 1; transform: none; }
.reveal-after > * { margin: 0; }
.wish-note { background: var(--postit); color: #3B2F00; border-radius: 2px 2px 14px 2px; padding: 14px 16px; transform: rotate(1deg); }
.wish-note b { font: 800 16px/1.2 var(--font-ui); display: block; margin-bottom: 2px; }
.wish-note .hand { color: #3B2F00; font-size: 24px; line-height: 1.15; }
.print-tip { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px; font-size: 16px; }
.print-tip svg { width: 26px; height: 26px; flex: none; }
.reveal-screen .check { color: #fff; }
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media (min-width: 720px) {
  .page { gap: 22px; }
  .sheet { padding: 30px 28px 26px 52px; }
  .sheet::before { left: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .slip-name { clip-path: none; }
}

/* =========================================================
   Alexia — a anfitriã das brincadeiras (cada brincadeira tem o seu mascote)
   Mesmo caderno do Papelzinho; a cor de cada jogo entra por --game.
   ========================================================= */
.small { font-size: 14px; }
.stack { display: grid; gap: 12px; }
.stack > * { margin: 0; }
.sheet.stack > h2 { margin: 0; }

/* marca */
/* logo: o nome com o laço da Alexia no lugar do pingo do "i" */
.alexia-logo { padding: 12px 4px 2px; }
.logo-word { display: inline-flex; align-items: baseline; font: 800 31px/1 var(--font-ui); letter-spacing: -.01em; color: #fff; text-shadow: 0 3px 0 var(--cover-deep); }
.logo-i { position: relative; display: inline-block; }
.logo-bow { position: absolute; left: 50%; top: -.5em; width: 1.08em; max-width: none; height: auto; overflow: visible; transform: translateX(-50%) rotate(-10deg); transform-origin: 50% 60%; filter: drop-shadow(0 2px 0 var(--cover-deep)); }
.alexia-logo:hover .logo-bow, .alexia-logo:focus-visible .logo-bow { animation: bow-wiggle .6s ease-in-out; }
@keyframes bow-wiggle { 0%, 100% { transform: translateX(-50%) rotate(-10deg); } 35% { transform: translateX(-50%) rotate(10deg) scale(1.12); } 70% { transform: translateX(-50%) rotate(-18deg); } }
.topbar { flex-wrap: wrap; }
.game-chip { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--on-cover); text-decoration: none; font: 700 15px/1 var(--font-ui); }
.game-chip svg { width: 30px; height: 34px; overflow: visible; }

/* mascotes */
.mascot { overflow: visible; }
.mascot .m-eyes { transform-box: fill-box; transform-origin: center; transition: transform .08s; }
.mascot .m-eyes.m-blink { transform: scaleY(.12); }
.mascot .m-look { transition: transform .12s ease-out; }
.alexia .m-wave { animation: wave 1.6s ease-in-out infinite; transform-box: view-box; transform-origin: 78px 100px; }
.game-art .mascot, .secret-mascot { animation: float 4.5s ease-in-out infinite; transform-origin: 50% 90%; }

/* início da Alexia */
.alexia-hero { display: grid; gap: 6px; padding: 10px 0 2px; }
.alexia-kicker { margin: 0 0 4px; font: 700 16px/1.2 var(--font-ui); color: var(--marker); }
.alexia-hero h1 { margin: 0; font: 800 clamp(32px, 9vw, 46px)/1.02 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
.alexia-hero p { margin: 8px 0 0; color: var(--on-cover-muted); max-width: 32ch; }

.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.game-card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center;
  padding: 14px 10px 14px; border-radius: 18px; text-decoration: none;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--game) 72%, #000), 0 14px 24px -18px var(--shadow-ink);
  border-top: 6px solid var(--game);
  transition: transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.game-card:hover { transform: translateY(-3px) rotate(-.6deg); }
.game-card:active { transform: translateY(2px) scale(.98); box-shadow: 0 2px 0 var(--game); }
.game-card .game-art { width: 74px; height: 88px; display: grid; place-items: center; }
.game-card .game-art svg { width: 74px; height: 88px; }
.game-text { display: grid; gap: 3px; }
.game-text b { font: 800 19px/1.1 var(--font-ui); color: var(--ink); }
.game-text > span { font-size: 14px; line-height: 1.3; color: var(--ink-muted); }
.game-text small { font: 700 12px/1.2 var(--font-ui); color: color-mix(in srgb, var(--game) 80%, var(--ink)); }
.game-card.soon { background: color-mix(in srgb, var(--paper) 80%, transparent); box-shadow: none; border-top-style: dashed; cursor: default; }
.game-card.soon:hover { transform: none; }
.game-card.soon .game-art { filter: saturate(.55); opacity: .8; }
.soon-tag { justify-self: center; padding: 3px 9px; border-radius: 999px; background: var(--postit); color: #3B2F00 !important; }
@media (min-width: 560px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Alexia passeando no rodapé */
body:has(.alexia-walker) .shell { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.alexia-walker { position: fixed; left: 0; bottom: calc(4px + env(safe-area-inset-bottom)); z-index: 40; width: 88px; pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(.45, .05, .55, .95); will-change: transform; }
.alexia-btn { pointer-events: auto; display: block; width: 88px; height: 110px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.alexia-btn .mascot { width: 88px; height: 110px; transition: transform .25s ease; }
.alexia-walker.facing-left .alexia-btn .mascot { transform: scaleX(-1); }
.alexia-walker.walking .mascot { animation: alexia-bob .42s ease-in-out infinite; }
.alexia-walker.facing-left.walking .mascot { animation-name: alexia-bob-left; }
.alexia-walker.walking .m-leg-l { animation: alexia-step .42s ease-in-out infinite; transform-box: view-box; transform-origin: 52px 126px; }
.alexia-walker.walking .m-leg-r { animation: alexia-step .42s ease-in-out infinite reverse; transform-box: view-box; transform-origin: 68px 126px; }
.alexia-walker.hop .alexia-btn { animation: alexia-hop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes alexia-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes alexia-bob-left { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2deg); } 50% { transform: scaleX(-1) translateY(-5px) rotate(2deg); } }
@keyframes alexia-step { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes alexia-hop { 0% { transform: none; } 35% { transform: translateY(-26px) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.06, .92); } 100% { transform: none; } }
.alexia-bubble { position: absolute; bottom: 104px; left: 6px; width: max-content; max-width: min(230px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: #1B2A6B; font: 600 15px/1.3 var(--font-ui); box-shadow: 0 10px 22px -12px rgba(0,0,0,.45); animation: rise .25s ease-out; pointer-events: auto; }
.alexia-walker.edge-right .alexia-bubble { left: auto; right: 6px; border-radius: 16px 16px 4px 16px; }

/* cabeçalho de cada brincadeira */
.game-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.game-hero .game-art { width: 88px; height: 100px; display: grid; place-items: center; border-radius: 26px; background: color-mix(in srgb, var(--game) 45%, transparent); }
.game-hero .game-art svg { width: 78px; height: 94px; }
.game-hero .game-art.big { width: 104px; height: 118px; }
.game-hero .game-art.big svg { width: 92px; height: 110px; }
.game-hero h1 { margin: 0; font: 800 clamp(28px, 8vw, 38px)/1.05 var(--font-ui); letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere; }
.game-hero p { margin: 4px 0 0; color: var(--on-cover-muted); }
.game-hero .alexia-kicker { margin: 0 0 2px; }

/* escolher o próprio nome */
.name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.name-btn { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 10px; border: 2px solid var(--rule); border-radius: 14px; background: var(--paper-2); color: var(--pen); cursor: pointer; box-shadow: 0 4px 0 var(--rule); -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.name-btn .hand { font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.name-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--rule); }
.name-btn.taken { opacity: .55; box-shadow: none; border-style: dashed; }
.name-btn.taken small { display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1 var(--font-ui); color: var(--mint-ink); }
.name-btn.taken small svg { width: 15px; height: 15px; }
.names li.out .who { text-decoration: line-through; text-decoration-thickness: 3px; opacity: .55; }

/* cronômetro do Espião */
.timer-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--paper); color: var(--ink); border-left: 8px solid var(--game, var(--cover)); }
.timer-box span { font: 700 16px/1.2 var(--font-ui); color: var(--ink-muted); }
.timer-box b { font: 800 clamp(30px, 10vw, 42px)/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.timer-box.over { border-left-color: var(--danger); }
.timer-box.over b { font-size: 20px; color: var(--danger); line-height: 1.2; text-align: right; }
.sheet .timer-box { padding: 10px 0 10px 14px; border-radius: 0; background: none; }

/* lugares possíveis */
.places-box > summary, .narrator > summary, .secret-places > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.places-box > summary::-webkit-details-marker, .narrator > summary::-webkit-details-marker, .secret-places > summary::-webkit-details-marker { display: none; }
.places-box > summary::after, .narrator > summary::after { content: '+'; font: 800 26px/1 var(--font-ui); color: var(--ink-muted); }
.places-box[open] > summary::after, .narrator[open] > summary::after { content: '–'; }
.places-box > summary h2, .narrator > summary h2 { margin: 0; }
.place-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.place-list li { padding: 4px 12px; border-radius: 999px; background: var(--paper-2); color: var(--pen); font: 700 20px/1.3 var(--font-hand); }
.narrator .steps { margin-top: 12px; }

/* carta secreta (vira em 3D) */
.party-reveal { background: radial-gradient(120% 80% at 50% 0%, var(--game), color-mix(in srgb, var(--game) 55%, #050a2e)); }
.secret-card { width: min(88vw, 340px); perspective: 1400px; cursor: pointer; outline-offset: 6px; -webkit-tap-highlight-color: transparent; }
.secret-inner { display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.3, .45, 1); }
.secret-card.open .secret-inner { transform: rotateY(180deg); }
.secret-side { grid-area: 1 / 1; min-height: 360px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 22px 40px -22px rgba(0,0,0,.6); }
.secret-front { display: grid; justify-items: center; align-content: center; gap: 8px; background: #fff; color: #1B2A6B; background-image: radial-gradient(circle at 12px 12px, color-mix(in srgb, var(--game) 25%, #fff) 2.4px, transparent 3px); background-size: 24px 24px; border: 8px solid #fff; outline: 3px dashed color-mix(in srgb, var(--game) 60%, #fff); outline-offset: -14px; }
.secret-front svg { width: 120px; height: 140px; animation: float 4.5s ease-in-out infinite; }
.secret-front b { font: 800 28px/1 var(--font-ui); }
.secret-front small { font: 700 15px/1 var(--font-ui); color: #5A6699; }
.secret-back { transform: rotateY(180deg); background: #fff; color: #1B2A6B; display: grid; }
.secret-face { display: grid; justify-items: center; align-content: center; gap: 6px; padding: 24px 20px; text-align: center; }
.secret-face > p { margin: 0; }
.secret-mascot { width: 84px; height: 98px; }
.secret-kicker { font: 700 17px/1.2 var(--font-ui); color: #5A6699; }
.secret-big { font: 800 clamp(34px, 11vw, 46px)/1.02 var(--font-ui); color: var(--game); overflow-wrap: anywhere; text-wrap: balance; }
.secret-face.agent .secret-big { font: 700 clamp(44px, 14vw, 58px)/1 var(--font-hand); color: #1F3BC4; }
.secret-job { font: 600 18px/1.3 var(--font-ui); }
.secret-job b { font: 700 26px/1.1 var(--font-hand); color: #1F3BC4; }
.secret-tip { font-size: 15px; line-height: 1.4; color: #5A6699; max-width: 30ch; }
.secret-face.role-assassino .secret-big { color: #C21F3A; }
.secret-face.role-anjo .secret-big { color: #B98A00; }
.secret-face.role-detetive .secret-big { color: #24307A; }
.secret-places { background: rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; color: #fff; }
.secret-places > summary { font: 700 16px/1.2 var(--font-ui); }
.secret-places .place-list li { background: #fff; color: #1F3BC4; font-size: 18px; }
.party-reveal .reveal-after .btn { color: #1B2A6B; }

/* revelação e times */
.answer h2 { font-size: 26px; }
.answer .hand { font-size: 28px; }
.role-list .status-tag { font-size: 15px; color: var(--ink); }
.status-tag.role-assassino { color: #C21F3A; }
.status-tag.role-detetive { color: var(--pen); }
.status-tag.role-anjo { color: #9A7300; }
@media (prefers-color-scheme: dark) { .status-tag.role-assassino { color: #FF8A9B; } .status-tag.role-anjo { color: #F4CF5C; } .name-btn.taken small { color: var(--mint); } }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.team-card { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 16px 12px; border-top: 8px solid var(--team); box-shadow: 0 12px 22px -16px var(--shadow-ink); animation: rise .35s ease-out both; }
.team-card h2 { margin: 0 0 6px; font: 800 20px/1.2 var(--font-ui); color: var(--team); }
.team-card ul { list-style: none; margin: 0; padding: 0; }
.team-card li { font-size: 25px; line-height: 1.25; overflow-wrap: anywhere; }
.team-card:nth-child(2) { animation-delay: .08s; } .team-card:nth-child(3) { animation-delay: .16s; } .team-card:nth-child(4) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .alexia-walker { transition: none !important; }
  .secret-inner { transition: none !important; }
}
p .ico, .muted .ico { display: inline-block; vertical-align: -3px; width: 17px; height: 17px; }
.print-tip .ico { width: 26px; height: 26px; }
.share-box .btn-row .btn { flex: 1 1 auto; }