.play-board-page{--cena-ceu-alto:color-mix(in srgb, var(--blue) 26%, var(--white));--cena-ceu-baixo:color-mix(in srgb, var(--yellow) 22%, var(--white));--cena-relva:color-mix(in srgb, var(--blue) 34%, var(--yellow));--cena-colina:color-mix(in srgb, var(--blue) 44%, var(--yellow));--cena-colina-longe:color-mix(in srgb, var(--cena-colina) 62%, var(--white));--cena-tinta:var(--ink);--traco:4px;background:var(--cena-relva);flex-direction:column;height:100dvh;min-height:0;display:flex;overflow:hidden}.play-board-page .play-header{background:color-mix(in srgb, var(--purple-dark) 88%, transparent)}.board{overscroll-behavior:contain;scrollbar-width:none;flex:1;width:100%;min-height:0;position:relative;overflow:auto}.board::-webkit-scrollbar{display:none}.board-palco{--passo-do-palco:clamp(168px, 26vh, 230px);width:100%;height:max(100%, calc(var(--paragens) * var(--passo-do-palco)));padding:max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));position:relative}.board:focus-visible{outline:3px solid var(--pink);outline-offset:-6px}.board-cenario{z-index:0;width:100%;height:100%;position:absolute;inset:0}.board-cenario-paisagem{display:none}.play-board-page>.play-header{z-index:1;position:relative}.cenario-ceu-alto{stop-color:var(--cena-ceu-alto)}.cenario-ceu-baixo{stop-color:var(--cena-ceu-baixo)}.cenario-sol{fill:color-mix(in srgb, var(--yellow) 72%, var(--white))}.cenario-colina-longe{fill:var(--cena-colina-longe)}.cenario-colina-media{fill:var(--cena-colina)}.cenario-relva{fill:var(--cena-relva)}.cenario-lago{fill:color-mix(in srgb, var(--blue) 55%, var(--white))}.cenario-lago-brilho{stroke:var(--white);stroke-width:2.5px;stroke-linecap:round;opacity:.8}.cenario-tronco{stroke:color-mix(in srgb, var(--orange-text) 70%, var(--ink));stroke-width:6px;stroke-linecap:round}.cenario-copa{fill:color-mix(in srgb, var(--cena-relva) 78%, var(--ink))}.cenario-arbustos ellipse{fill:color-mix(in srgb, var(--cena-relva) 84%, var(--ink))}.cenario-nuvem circle,.cenario-nuvem rect{fill:var(--white)}.cenario-nuvens .cenario-nuvem{animation:46s linear infinite alternate cenario-passar}.cenario-nuvens .cenario-nuvem:nth-child(2){animation-duration:62s;animation-delay:-18s}.cenario-nuvens .cenario-nuvem:nth-child(3){animation-duration:54s;animation-delay:-34s}@keyframes cenario-passar{0%{transform:translate(-14px)}to{transform:translate(14px)}}.board-trilho{width:100%;height:100%;position:absolute;inset:0}.board-trilho-paisagem{display:none}.board-trilho-chao{fill:none;stroke:color-mix(in srgb, var(--yellow) 40%, var(--white));stroke-width:30px;stroke-linecap:round;stroke-linejoin:round}.board-trilho-passos{fill:none;stroke:color-mix(in srgb, var(--orange-text) 42%, transparent);stroke-width:5px;stroke-linecap:round;stroke-dasharray:2 16}.board-paragens{margin:0;padding:0;list-style:none;position:absolute;inset:0}.board-paragem-slot{left:var(--x-retrato);top:var(--y-retrato);position:absolute;transform:translate(-50%,-50%)}.board-paragem{flex-direction:column;align-items:center;gap:2px;width:clamp(112px,30vw,150px);text-decoration:none;display:flex}.board-marca{place-items:center;width:100%;display:grid}.board-marca-desenho{width:100%;height:auto;overflow:visible}.board-marca-desenho [class^=lugar-]{stroke:var(--cena-tinta);stroke-width:var(--traco);paint-order:stroke}.board-paragem[data-board-state=por-descobrir] .board-marca-desenho [class^=lugar-]{fill:color-mix(in srgb, var(--white) 76%, var(--muted));stroke:color-mix(in srgb, var(--ink) 46%, var(--white))}.board-paragem[data-board-state=por-descobrir] .lugar-chao{fill:color-mix(in srgb, var(--ink) 14%, transparent);stroke:none}.board-paragem[data-board-state=descoberta] .lugar-chao{fill:color-mix(in srgb, var(--cena-relva) 74%, var(--ink));stroke:none}.board-paragem[data-board-state=descoberta] .lugar-parede{fill:var(--cream)}.board-paragem[data-board-state=descoberta] .lugar-telhado{fill:var(--pink)}.board-paragem[data-board-state=descoberta] .lugar-porta{fill:var(--blue)}.board-paragem[data-board-state=descoberta] .lugar-detalhe{fill:var(--yellow)}.board-paragem[data-board-state=descoberta] .lugar-riscas{stroke:var(--cena-tinta);fill:none}.board-paragem[data-board-state=descoberta] .lugar-cor-a{fill:var(--pink)}.board-paragem[data-board-state=descoberta] .lugar-cor-b{fill:var(--yellow)}.board-paragem[data-board-state=descoberta] .lugar-cor-c{fill:var(--blue)}.board-legenda{font:800 var(--text-xs) / 1.15 var(--font-display);text-align:center;text-wrap:balance;color:var(--ink);background:color-mix(in srgb, var(--white) 82%, transparent);border-radius:999px;padding:2px 10px}.board-guia{left:var(--x-retrato);top:var(--y-retrato);z-index:1;pointer-events:none;width:clamp(84px,22vw,130px);animation:board-chegada-retrato 1.5s var(--ease-out) 1 both;position:absolute}.board-guia-corpo{--afastamento:clamp(96px, 25vw, 126px);transform:translate(calc(var(--lado-retrato) * var(--afastamento) - 50%), -30%);animation:board-respirar-guia 4.2s var(--ease-out) infinite}.board-guia img{width:100%;height:auto;filter:drop-shadow(0 8px 0 color-mix(in srgb, var(--ink) 16%, transparent))}@keyframes board-respirar-guia{0%,to{transform:translate(calc(var(--lado-retrato) * var(--afastamento) - 50%), -30%)}50%{transform:translate(calc(var(--lado-retrato) * var(--afastamento) - 50%), -35%)}}.board-marca-desenho{animation:board-respirar 3.6s var(--ease-out) var(--fase) infinite;transform-origin:50% 92%}.board-trilho-passos{animation:2.4s linear infinite board-passos}.board-paragem[data-board-festa] .board-marca-desenho{animation:board-acender 1.2s var(--ease-out) 1}.board-paragem:active .board-marca-desenho{transform:scale(.95)}@media (hover:hover) and (pointer:fine){.board-paragem:hover .board-marca-desenho,.board-paragem:focus-visible .board-marca-desenho{transform:scale(1.07)}}.board-paragem:focus-visible{outline:none}.board-paragem:focus-visible .board-legenda{outline:4px solid var(--pink);outline-offset:2px}@keyframes board-respirar{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes board-passos{to{stroke-dashoffset:-36px}}@keyframes board-acender{0%{transform:scale(1)rotate(0)}30%{transform:scale(1.2)rotate(-3deg)}60%{transform:scale(.98)rotate(2deg)}to{transform:scale(1)rotate(0)}}@media (min-aspect-ratio:1){.board-cenario-retrato{display:none}.board-cenario-paisagem{display:block}.board-trilho-retrato{display:none}.board-trilho-paisagem{display:block}.board-paragem-slot{left:var(--x-paisagem);top:var(--y-paisagem)}.board-palco{--passo-do-palco:clamp(230px, 26vw, 320px);width:max(100%, calc(var(--paragens) * var(--passo-do-palco)));height:100%}.board-guia{left:var(--x-paisagem);top:var(--y-paisagem);animation-name:board-chegada-paisagem}.board-guia-corpo{transform:translate(calc(var(--lado-paisagem) * var(--afastamento) - 50%), -30%)}@keyframes board-respirar-guia{0%,to{transform:translate(calc(var(--lado-paisagem) * var(--afastamento) - 50%), -30%)}50%{transform:translate(calc(var(--lado-paisagem) * var(--afastamento) - 50%), -35%)}}}@media (max-height:480px){.board-paragem{width:clamp(104px,17vh,128px)}.board-guia{width:clamp(72px,15vh,104px)}}@media (min-width:1100px){.board-paragem{width:176px}.board-legenda{font-size:var(--text-base)}}@media (forced-colors:active){.board-marca-desenho [class^=lugar-]{fill:canvas;stroke:canvastext}.board-paragem[data-board-state=descoberta] .board-marca-desenho [class^=lugar-]{fill:highlight;stroke:highlighttext}.board-trilho-chao,.board-trilho-passos{stroke:canvastext}.board-legenda{color:canvastext;background:canvas}}@media (prefers-reduced-motion:reduce){.board-guia,.board-guia-corpo,.board-marca-desenho,.board-trilho-passos,.cenario-nuvens .cenario-nuvem,.board-paragem[data-board-festa] .board-marca-desenho{animation:none}.board-paragem:hover .board-marca-desenho,.board-paragem:focus-visible .board-marca-desenho,.board-paragem:active .board-marca-desenho{transform:none}}.board-fundo{z-index:0;background:var(--fundo-retrato) center bottom / cover no-repeat;position:absolute;inset:0}@media (min-aspect-ratio:1){.board-fundo{background-image:var(--fundo-paisagem)}}.board-marca-arte{object-fit:contain;width:100%;height:auto}.board-paragem[data-board-state=por-descobrir] .board-marca-arte{filter:grayscale()contrast(.82)brightness(1.1);opacity:.9}
