/* The Cozy Home scene and the pages. Scene units are art pixels; .cena is scaled by --e as one piece. */
@media (max-width: 899px) {
  #app[data-rota="home"] #folha { display: none !important; }
  /* a page covers the house: nothing of the house's own controls may sit on top of it */
  #app:not([data-rota="home"]) .ao-vivo, #app:not([data-rota="home"]) .fita-novidade, #app:not([data-rota="home"]) .placa-juntos { display: none !important; }
}

.palco { place-items: end center; }
.casa { position: relative; --e: 1.5; }
.casa::before { content: ''; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 100vh;
  background: url(/img/casa-parede.png?v=2) left bottom / calc(22px * var(--e)) repeat; image-rendering: pixelated; }
.casa.noite::before { background-image: url(/img/casa-noite-parede.png?v=2); }
.casa::after { content: ''; position: absolute; left: calc(128px * var(--e)); bottom: calc(100% - 1px); height: max(0px, calc(var(--acima, 0px) - 11px * var(--e) - 58px)); width: calc(1px * var(--e)); background: var(--chocolate); }
.cena { position: absolute; left: 0; top: 0; width: 256px; height: 384px; transform: scale(var(--e)); transform-origin: 0 0; overflow: hidden; }
.fundo { position: absolute; inset: 0; width: 256px; height: 384px; display: block; user-select: none; -webkit-user-drag: none; }

/* things you can touch in the painted house: invisible until hovered or focused, then a 1px pink outline */
.coisa { position: absolute; padding: 0; margin: 0; background: none; border: 0; z-index: 5; }
.coisa::after { content: ''; position: absolute; inset: -5px; }
.coisa:focus-visible { outline: none; }
.coisa:hover::before, .coisa:focus-visible::before { content: ''; position: absolute; left: 50%; top: -8px; width: 7px; height: 6px; margin-left: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23E58FA3'/%3E%3C/svg%3E") 0 0 / 7px 6px; animation: pisca-dica 800ms steps(1) infinite; }

/* the bears and the pair */
.urso { position: absolute; left: 0; top: 0; background-repeat: no-repeat; image-rendering: pixelated; transform-origin: 50% 100%; pointer-events: none; }
.urso-toque { position: absolute; left: 18%; right: 18%; top: 14%; bottom: 2%; padding: 0; margin: 0; border: 0; background: none; pointer-events: auto;
  cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; }
.urso-toque:focus-visible { outline: none; }
.urso-toque:focus-visible::before { content: ''; position: absolute; left: 50%; top: -2px; width: 7px; height: 6px; margin-left: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23E58FA3'/%3E%3C/svg%3E") 0 0 / 7px 6px; }
/* at night the bears take the room's light: a little dimmer and cooler */
.casa.noite .urso, .casa.noite .par { filter: brightness(.86) saturate(.88) hue-rotate(-6deg); }
.par { position: absolute; left: 0; top: 0; padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; image-rendering: pixelated; cursor: pointer; }
.part { position: absolute; background-size: 100% 100%; image-rendering: pixelated; pointer-events: none; z-index: 600; }

/* speech bubbles: pixel paper with a tail, readable text at ~14 css px whatever the scale */
.falas-urso { position: absolute; z-index: 700; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 3px; pointer-events: none; width: max-content; max-width: 118px; --rabo: 50%; }
.falas-urso[data-lado="esq"] { transform: translate(-78%, -100%); justify-items: end; --rabo: 78%; }
.falas-urso[data-lado="dir"] { transform: translate(-22%, -100%); justify-items: start; --rabo: 22%; }
.balao { margin: 0; position: relative; padding: 2px 5px 3px; background: var(--branco); opacity: 1;
  box-shadow: 0 -1px 0 var(--carvao), 0 1px 0 var(--carvao), -1px 0 0 var(--carvao), 1px 0 0 var(--carvao), 2px 2px 0 var(--sombra);
  font: 500 calc(14px / var(--e)) / 1.35 var(--f-txt); color: var(--carvao); text-align: center; overflow-wrap: anywhere; animation: balao-entra 160ms steps(3) both; }
.balao:last-child::after { content: ''; position: absolute; left: var(--rabo); bottom: -4px; width: 5px; height: 3px; margin-left: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3' shape-rendering='crispEdges'%3E%3Crect width='5' height='1' fill='%23fff'/%3E%3Crect x='0' width='1' height='1' fill='%234A3F45'/%3E%3Crect x='4' width='1' height='1' fill='%234A3F45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%234A3F45'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%234A3F45'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%234A3F45'/%3E%3C/svg%3E") 0 0 / 5px 3px; }
.balao.vivo { color: var(--chocolate); }
.balao-par { position: absolute; left: 128px; top: 150px; transform: translateX(-50%); z-index: 700; white-space: nowrap; }
.pontinhos { display: flex; gap: 2px; padding: 3px 5px; }
.pontinhos i { width: 2px; height: 2px; background: var(--carvao); animation: pontinho 900ms steps(1) infinite; }
.pontinhos i:nth-child(2) { animation-delay: 300ms; } .pontinhos i:nth-child(3) { animation-delay: 600ms; }
@keyframes pontinho { 0%, 100% { transform: none; } 33% { transform: translateY(-1px); } }
@keyframes balao-entra { from { transform: translateY(2px); } to { transform: none; } }

/* the window's sky: rain or snow falling inside the round glass */
.ceu-janela { position: absolute; left: 41px; top: 64px; width: 60px; height: 66px; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 2; }
.ceu-janela.chuva { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='1' height='3' fill='%239CC7E8'/%3E%3Crect x='8' y='7' width='1' height='3' fill='%239CC7E8'/%3E%3C/svg%3E") 0 0 / 12px 12px; animation: cai 500ms steps(4) infinite; }
.ceu-janela.neve { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' shape-rendering='crispEdges'%3E%3Crect x='3' y='2' width='1' height='1' fill='%23fff'/%3E%3Crect x='10' y='9' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 14px 14px; animation: cai 2400ms steps(14) infinite; }
@keyframes cai { to { background-position: 0 12px; } }
.casa.noite .ceu-janela.neve { animation-duration: 3000ms; }

/* notices on the house */
.fita-novidade { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px);
  padding: 8px 14px; background: var(--rosa); border: var(--px) solid var(--carvao); box-shadow: 0 0 0 3px var(--branco), 4px 4px 0 3px var(--sombra);
  font: 600 14px var(--f-px); animation: fita 1400ms steps(2) infinite; }
@keyframes fita { 50% { transform: translateX(-50%) translateY(-2px); } }
.placa-juntos { position: absolute; top: 10px; right: 12px; z-index: 25; white-space: nowrap; width: max-content; padding: 4px 10px; background: var(--chocolate); color: var(--creme);
  font: 600 13px var(--f-px); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); }
.fita-novidade:not([hidden]) ~ .placa-juntos { top: 58px; }
/* the live-talk box sits on the left three quarters of the house: the TV stands free in the front right corner */
.ao-vivo { position: absolute; left: calc(var(--casa-esq, 0px) + 8px); width: calc(var(--casa-larg, 100%) * .76 - 8px); bottom: 12px; z-index: 30; display: flex; gap: 8px; }
.ao-vivo input { flex: 1; min-width: 0; width: 0; min-height: 44px; padding: 8px 12px; background: var(--branco); border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); font: 500 16px var(--f-txt); }

/* pages */
.perfil, .janela-info { display: grid; justify-items: center; align-content: center; flex: 1 0 auto; gap: 10px; text-align: center; padding-top: 8px; }
.perfil .h3 { font: 700 17px/1.3 var(--f-txt); }
.poses-dele { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }

.dica { font-size: 13px; color: var(--chocolate); opacity: .8; }
.mensagem-do-dia { font-size: 18px; max-width: 34ch; padding: 12px 16px; background: var(--branco); border: var(--px) dashed var(--rosa-forte); }
.casa-vazia { font: 600 24px var(--f-px); color: var(--chocolate); }
@media (min-width: 900px) {
  .fita-novidade { top: 10px; left: calc(var(--casa-esq, 12px) + 8px); transform: none; animation-name: fita-pc; max-width: calc(96px * var(--e) - 16px); font-size: 13px; line-height: 1.3; text-align: left; }
  .placa-juntos { right: auto; left: calc(var(--casa-esq, 0px) + var(--casa-larg, 100%) - 8px); transform: translateX(-100%); }
  .fita-novidade:not([hidden]) ~ .placa-juntos { top: 10px; }
  @keyframes fita-pc { 50% { transform: translateY(-2px); } }
  .palco { place-items: center; background: var(--bege); }
  .casa::before, .casa::after { content: none; }
  .ao-vivo { left: calc(var(--casa-esq, 0px) + 12px); right: auto; width: calc(var(--casa-larg, 100%) * .74 - 12px); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fita-novidade, .ceu-janela { animation: none !important; } }

/* a contact shadow: two rows of soft pixels under the feet */
.sombra-urso { position: absolute; left: 0; top: 0; height: 3px; background: rgba(74, 63, 69, .16); pointer-events: none;
  clip-path: polygon(0 1px, 3px 1px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 1px, 100% 1px, 100% 2px, calc(100% - 3px) 2px, calc(100% - 3px) 3px, 3px 3px, 3px 2px, 0 2px); }
.casa.noite .sombra-urso { background: rgba(30, 26, 52, .3); }

/* holding a bear: a little heart fills up over 550 ms, then his card opens */
.urso-toque.segurando::after { content: ''; position: absolute; left: 50%; top: 4px; width: 7px; height: 6px; margin-left: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23E58FA3'/%3E%3C/svg%3E") 0 0 / 7px 6px;
  animation: enche 550ms steps(5) both; }
@keyframes enche { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* first visit: a pixel hand poking my bear */
.maozinha { position: absolute; left: 50%; top: 12px; width: 7px; height: 6px; margin-left: -3px; z-index: 2; pointer-events: none; animation: pisca-dica 800ms steps(1) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z' fill='%23E58FA3'/%3E%3C/svg%3E") 0 0 / 7px 6px; }
@keyframes pisca-dica { 50% { transform: translateY(-2px) scale(.7); } }
#app:not([data-rota="home"]) .maozinha { display: none; }
.palco.coberto *, .palco.coberto *::before, .palco.coberto *::after { animation-play-state: paused !important; }
@keyframes cutuca { 50% { transform: translateX(-2px); } }

/* the room's own life */
.nuvem-janela { position: absolute; left: -16px; top: 14px; width: 14px; height: 6px; animation: nuvem 26s steps(76) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v1h2v1h2v1h2v3H0V3h1V2h2V1h1z' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 14px 6px; }
@keyframes nuvem { to { transform: translateX(92px); } }
.estrelas-janela { position: absolute; inset: 0; display: none; animation: pisca-estrela 1600ms steps(1) infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='66' shape-rendering='crispEdges'%3E%3Crect x='12' y='20' width='1' height='1' fill='%23F6D678'/%3E%3Crect x='44' y='14' width='1' height='1' fill='%23fff'/%3E%3Crect x='30' y='40' width='1' height='1' fill='%23F6D678'/%3E%3Crect x='18' y='50' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E") 0 0 / 60px 66px; }
.casa.noite .estrelas-janela { display: block; }
.casa.noite .nuvem-janela { display: none; }
@keyframes pisca-estrela { 50% { opacity: .2; } }
.luz-lampada { position: absolute; left: 112px; top: 36px; width: 32px; height: 12px; display: none; pointer-events: none; z-index: 3;
  background: rgba(246, 214, 120, .22); animation: lampada 2400ms steps(1) infinite;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 4px 2px); }
.casa.noite .luz-lampada { display: block; }
@keyframes lampada { 0%, 100% { opacity: 1; } 47% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nuvem-janela, .estrelas-janela, .luz-lampada, .maozinha { animation: none !important; } }

/* phone: the wall above the house ends in a wooden ceiling with a lace pelmet, and a little sign hangs from it */
.teto { position: absolute; left: var(--casa-esq, 0); width: var(--casa-larg, 100%); top: 0; height: calc(11px * var(--e)); z-index: 4; pointer-events: none;
  background: url(/img/teto.png) left top / calc(8px * var(--e)) calc(11px * var(--e)) repeat-x; image-rendering: pixelated; }
.placa-casa { position: absolute; left: calc(var(--casa-esq, 0px) + var(--casa-larg, 100%) / 2); top: calc(11px * var(--e) + 18px); transform: translateX(-50%); max-width: calc(var(--casa-larg, 100%) - 24px); z-index: 4; pointer-events: none;
  padding: 6px 14px; background: var(--chocolate); color: var(--creme); font: 600 15px var(--f-px); border: var(--px) solid var(--carvao); box-shadow: 3px 3px 0 var(--sombra); white-space: nowrap; }
.placa-casa::before, .placa-casa::after { content: ''; position: absolute; bottom: 100%; width: 2px; height: 20px; background: var(--carvao); }
.placa-casa::before { left: 16px; } .placa-casa::after { right: 16px; }
.placa-casa.juntos { background: var(--rosa); color: var(--carvao); }
@media (max-width: 899px) {
  .placa-juntos { display: none !important; }
  #app:not([data-rota="home"]) .placa-casa, #app:not([data-rota="home"]) .teto, .palco.coberto .falas-urso { display: none; }
  .fita-novidade { top: calc(11px * var(--e) + 70px); }
}
@media (min-width: 900px) { .teto, .placa-casa { display: none; } }

/* live talk: the last three lines stay, faint, above the box */
.ao-vivo { flex-wrap: wrap; }
.rastro-vivo { list-style: none; margin: 0 0 2px; padding: 0; width: 100%; display: grid; gap: 1px; font-size: 13px; color: var(--chocolate); }
.rastro-vivo:empty { display: none; }
.rastro-vivo { background: var(--creme); border: var(--px) solid var(--carvao); box-shadow: 4px 4px 0 var(--sombra); padding: 4px 8px; }
.rastro-vivo li { padding: 0; justify-self: start; overflow-wrap: anywhere; color: #8A7468; }
.rastro-vivo li:last-child { color: var(--carvao); }
.rastro-vivo b { font-weight: 700; }

/* a hint is an instruction, not a line: dashed pink paper, no tail */
.balao.balao-dica { background: #FFF6F8; color: var(--chocolate); box-shadow: 2px 2px 0 var(--sombra); outline: 1px dashed var(--rosa-forte); outline-offset: 0; }
.balao.balao-dica::after { content: none; }

/* phone: a little bunting under the sign fills the wall above the house */
.varal { position: absolute; left: calc(var(--casa-esq, 0px) + 8px); width: calc(var(--casa-larg, 100%) - 16px); top: calc(11px * var(--e) + 74px); height: calc(10px * var(--e)); z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' shape-rendering='crispEdges'%3E%3Crect width='18' height='1' fill='%234A3F45'/%3E%3Cpath d='M1 1h7v1H7v2H6v2H5v2H4V6H3V4H2V2H1z' fill='%234A3F45'/%3E%3Cpath d='M2 1h5v1H6v2H5v2H4V4H3V2H2z' fill='%23F4C6CF'/%3E%3Cpath d='M10 1h7v1h-1v2h-1v2h-1v2h-1V6h-1V4h-1V2h-1z' fill='%234A3F45'/%3E%3Cpath d='M11 1h5v1h-1v2h-1v2h-1V4h-1V2h-1z' fill='%23FFF9F0'/%3E%3C/svg%3E") left top / calc(18px * var(--e)) calc(10px * var(--e)) repeat-x; image-rendering: pixelated; }
@media (min-width: 900px) { .varal { display: none; } }
#app:not([data-rota="home"]) .varal { display: none; }

/* the little TV: two frames (off / on), and a soft flicker while something is on */
.tv-casa { position: absolute; left: 204px; top: 296px; width: 48px; height: 79px; z-index: 390; pointer-events: none;
  background: url(/img/tv.png?v=1) 0 0 / 96px 79px no-repeat; image-rendering: pixelated; }
.tv-casa.ligada { background-position: -48px 0; animation: tv-tremula 900ms steps(1) infinite; }
@keyframes tv-tremula { 50% { filter: brightness(1.08); } }
.casa.noite .tv-casa { filter: brightness(.86) saturate(.88); }
.casa.noite .tv-casa.ligada { filter: none; }
@media (prefers-reduced-motion: reduce) { .tv-casa.ligada { animation: none; } }