/* Bear's Little World — tokens, type, the pixel paper and sticker materials (BRIEF.md). */
:root {
  --creme: #FBF5EC; --bege: #EADBC8; --rosa: #F4C6CF; --rosa-forte: #E58FA3; --chocolate: #6B4A3A;
  --carvao: #4A3F45; --branco: #FFFFFF; --vermelho: #C8434F; --noite: #3E3A5C; --creme-noite: #2E2B40;
  --sombra: rgba(74, 63, 69, .25);
  --px: 2px;                                     /* one UI pixel */
  --f-px: 'Pixelify Sans', ui-monospace, monospace;
  --f-txt: 'M PLUS Rounded 1c', system-ui, sans-serif;
  --abas-h: 72px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0;
  background: var(--bege); color: var(--carvao); font: 500 16px/1.55 var(--f-txt);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
  /* pixel paper: a quiet 1px grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='1' height='1' fill='%234A3F45' fill-opacity='.05'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%234A3F45' fill-opacity='.04'/%3E%3C/svg%3E");
  background-size: 16px 16px; image-rendering: pixelated;
}
@media (min-width: 900px) { body { font-size: 17px; } }
img, canvas { image-rendering: pixelated; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0; }
/* Pixelify draws "fi" as one odd glyph: every Pixelify text turns its ligatures and alternates off */
.titulo-px, h2, h3, .h2, .h3, .botao-px, .abas button, .plaquinha, .campo, .folha-topo h2 { font-feature-settings: 'liga' 0, 'clig' 0, 'calt' 0, 'dlig' 0; font-variant-ligatures: none; }
button { cursor: pointer; }
:focus-visible { outline: var(--px) dashed var(--rosa-forte); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type */
.titulo-px { font: 600 32px/1.1 var(--f-px); margin: 0; letter-spacing: 0; color: var(--chocolate); }
.sub { margin: 4px 0 0; color: var(--chocolate); font-size: 15px; }
h2, .h2 { font: 600 24px/1.15 var(--f-px); margin: 0; color: var(--chocolate); }
h3, .h3 { font: 600 16px/1.2 var(--f-px); margin: 0; }

/* ---------- materials: a pixel window = 2px charcoal line with stepped corners + a hard shadow */
.janela {
  position: relative; background: var(--creme); border: var(--px) solid var(--carvao);
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
}
.sombra-px { filter: drop-shadow(4px 4px 0 var(--sombra)); }
.costura { border: var(--px) dashed var(--rosa-forte); }

/* sticker button: white die-cut edge, charcoal line, hard shadow; pressing pushes it into the paper */
.botao-px {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  font: 600 16px/1 var(--f-px); color: var(--carvao); background: var(--rosa);
  border: var(--px) solid var(--carvao); box-shadow: 0 0 0 3px var(--branco), 4px 4px 0 3px var(--sombra);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.botao-px:hover { background: #F8D3DA; }
.botao-px:active { transform: translate(2px, 2px); box-shadow: 0 0 0 3px var(--branco), 2px 2px 0 3px var(--sombra); }
.botao-px.claro { background: var(--creme); }
.botao-px[disabled] { opacity: .55; cursor: default; }
.botao-ico { min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; background: none; border: 0; }

.campo { display: grid; gap: 4px; font: 600 14px/1.2 var(--f-px); color: var(--chocolate); text-align: left; }
.campo input, .campo textarea, .campo select {
  font: 500 16px/1.5 var(--f-txt); color: var(--carvao); background: var(--branco); padding: 10px 12px; min-height: 44px; width: 100%;
  border: var(--px) solid var(--carvao); border-radius: 0; box-shadow: inset 2px 2px 0 var(--bege);
}
.campo input:focus, .campo textarea:focus { outline: var(--px) solid var(--rosa-forte); outline-offset: 0; }

/* ---------- notes that the world leaves (never alert()) */
.bilhetes { position: fixed; inset: 0 0 auto 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 50; padding: 0 16px; }
.bilhete {
  pointer-events: auto; max-width: 420px; padding: 10px 16px 10px 14px; background: var(--branco); border: var(--px) solid var(--carvao);
  box-shadow: 4px 4px 0 var(--sombra); font-size: 15px; animation: bilhete-entra 200ms steps(4) both;
}
.bilhete.erro { background: #FDE9EC; }
.bilhete::before { content: '♡ '; color: var(--rosa-forte); font-family: var(--f-px); }
.bilhete.sai { animation: bilhete-sai 160ms steps(4) both; }
@keyframes bilhete-entra { from { transform: translateY(-12px) rotate(-1deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bilhete-sai { to { transform: translateY(8px); opacity: 0; } }

/* ---------- login */
.tela-entrar { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.janela-entrar { width: min(100%, 420px); padding: 28px 24px 18px; text-align: center; display: grid; gap: 18px; }
.quem { border: 0; padding: 0; margin: 0; display: flex; justify-content: center; gap: 14px; }
.quem legend { font: 600 14px var(--f-px); color: var(--chocolate); margin: 0 auto 10px; }
.urso-escolha {
  display: grid; justify-items: center; gap: 2px; padding: 8px 10px 6px; min-width: 120px; background: var(--branco);
  border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); font: 600 16px var(--f-px);
  transition: transform 120ms steps(3);
}
.urso-escolha img, .perfil img, .retrato-meu img { width: calc(95 * var(--k1, 1) * var(--d, 1px)); height: calc(95 * var(--k1, 1) * var(--d, 1px)); }
.urso-escolha[aria-pressed="true"] { background: var(--rosa); transform: translateY(-4px); box-shadow: 4px 8px 0 var(--sombra); }
.urso-escolha[aria-pressed="true"] img { animation: pulinho 480ms steps(6) 1; }
@keyframes pulinho { 0%, 100% { transform: none; } 40% { transform: translateY(-8px); } 70% { transform: translateY(0) scaleY(.94); } }
.credito { margin: 0; font-size: 12px; color: var(--chocolate); opacity: .75; }

/* ---------- the world: scene + page + tabs */
#mundo { height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
.agenda { position: relative; min-height: 0; display: grid; }
.palco { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; }
.abas {
  display: flex; justify-content: space-around; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--creme); border-top: var(--px) solid var(--carvao); box-shadow: 0 -4px 0 var(--sombra); position: relative; z-index: 20;
}
.abas button {
  flex: 1; max-width: 96px; min-height: 56px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 4px 2px;
  background: none; border: 0; font: 400 13px/1 var(--f-px); color: var(--chocolate); transition: transform 100ms steps(2);
}
.abas button[aria-current="page"] { color: var(--carvao); background: var(--rosa); outline: var(--px) dashed var(--rosa-forte); outline-offset: -5px; }
.abas button[aria-current="page"] .ico { background-color: var(--branco); }
.ico { --t: calc(16 * var(--k2, 2) * var(--d, 1px)); width: var(--t); height: var(--t); display: block; background: var(--bege) center / var(--t) var(--t) no-repeat; image-rendering: pixelated; }
.ico-home { background-image: url(/img/ui/ico-home.png); }
.ico-together { background-image: url(/img/ui/ico-together.png); }
.ico-memories { background-image: url(/img/ui/ico-memories.png); }
.ico-garden { background-image: url(/img/ui/ico-garden.png); }
.ico-mybear { background-image: url(/img/ui/ico-mybear.png); }
.ico-mail { background-image: url(/img/ui/ico-mail.png); }
.ico-radio { background-image: url(/img/ui/ico-radio.png); }

/* a page: on the phone a sheet of paper rising over the dimmed house, on the desktop the right page of the open diary */
.folha {
  position: absolute; inset: auto 0 0 0; height: 86%; z-index: 40; display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  background: var(--creme); border-top: var(--px) solid var(--carvao); box-shadow: 0 -4px 0 var(--sombra);
  animation: folha-sobe 160ms steps(4) both;
}
.folha.desdobra { animation: folha-sobe 160ms steps(4) both; }
.folha::before { content: ''; position: absolute; inset: -100vh 0 100% 0; background: repeating-conic-gradient(rgba(46, 43, 64, .32) 0 25%, transparent 0 50%) 0 0 / 4px 4px; pointer-events: none; }
@keyframes folha-sobe { from { transform: translateY(24%); } to { transform: none; } }
.folha-topo { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: var(--rosa); border-bottom: var(--px) solid var(--carvao); }
.folha-topo h2 { flex: 1; font-size: 20px; }
.folha-topo::after { content: ''; position: absolute; left: 12px; right: 12px; top: 4px; border-top: var(--px) dashed var(--rosa-forte); pointer-events: none; }
.folha-corpo { display: flex; flex-direction: column; overflow: auto; padding: 16px 16px 24px; overscroll-behavior: contain; scroll-padding-top: 16px;
  background-image: linear-gradient(var(--bege) 2px, transparent 2px); background-size: 100% 32px; background-position: 0 30px; background-attachment: local; }
.fecha { width: 44px; height: 44px; display: grid; place-items: center; background: var(--creme); border: var(--px) solid var(--carvao); font: 600 18px var(--f-px); }

.em-breve { flex: 1 0 auto; display: grid; justify-items: center; align-content: center; gap: 12px; padding: 32px 8px; text-align: center; }
.em-breve img { width: calc(16 * var(--k3, 3) * var(--d, 1px)); height: calc(16 * var(--k3, 3) * var(--d, 1px)); }
.plaquinha { padding: 8px 16px; background: var(--chocolate); color: var(--creme); font: 600 16px var(--f-px); border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); }

@media (min-width: 900px) {
  #mundo { grid-template-rows: 1fr; grid-template-columns: 1fr; padding: 24px 24px 24px 24px; place-items: center; }
  .agenda {
    width: min(1180px, calc(100vw - 140px)); height: min(820px, calc(100dvh - 48px)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    background: var(--creme); border: var(--px) solid var(--carvao); box-shadow: 8px 8px 0 var(--sombra); padding: 18px;
  }
  .agenda::after { content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%; border-left: var(--px) dashed var(--bege); }
  .palco { border: var(--px) solid var(--carvao); background: var(--bege); }
  .folha, .folha[hidden] { position: relative; display: grid !important; height: auto; inset: auto; margin-left: 18px; border: var(--px) solid var(--carvao); box-shadow: none; animation: none; }
  .folha::before { content: none; }
  .abas { position: fixed; left: calc((100vw + min(1180px, calc(100vw - 140px))) / 2 - 2px); right: auto; top: 50%; transform: translateY(-50%);
    flex-direction: column; gap: 6px; padding: 0; background: none; border: 0; box-shadow: none; }
  .abas button { min-height: 66px; width: 84px; max-width: none; padding: 6px 4px; background: var(--creme); border: var(--px) solid var(--carvao); border-left: 0;
    box-shadow: 4px 4px 0 var(--sombra); font-size: 13px; }
  .abas button[aria-current="page"] { transform: translateX(6px); }
}
#app[data-rota="home"] .bilhetes { top: var(--sob-placa, 120px); }
/* inside a page: the note takes its own row under the title bar and pushes the content down, never over it */
.folha-aviso { display: grid; padding: 0 12px; }
.folha-aviso:empty { display: none; }
.folha-aviso .bilhete { margin: 10px 0 0; max-width: none; animation-name: aviso-abre; }
@keyframes aviso-abre { from { max-height: 0; opacity: 0; } to { max-height: 120px; opacity: 1; } }
@media (min-width: 900px) { .folha.desdobra { animation: desdobra 160ms steps(4) both; } }
@keyframes desdobra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}