@font-face{font-family:GTH;src:url('/fonts/ebg-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--paper:#e5e8df;--muted:#a7b6bb;--line:#8c8e8447;--ice:#c7e2ed;--page:#080e12}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--paper);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--ice);outline-offset:4px}button,a{-webkit-tap-highlight-color:transparent}
header{height:76px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(5%,calc((100vw - 1440px)/2));background:linear-gradient(#142027,#081016);border-bottom:1px solid var(--line)}.header-brand{display:flex;flex-shrink:0}header img{width:116px;height:auto}header nav{display:flex;align-items:center;gap:28px}.nav-text{font-size:12px;color:#bccace;padding:14px 0}.nav-text:hover{color:white}.header-account{display:flex;gap:6px;padding:4px 0 4px 20px;border-left:1px solid var(--line)}
.button,.join,dialog button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:5px 12px;border:6px solid transparent;border-image:url('/img/jogo/botao-0.png') 6 fill / 6px stretch;background:none;color:#eef3f6;text-shadow:0 1px 2px #000;font:13px Arial,sans-serif;border-radius:0;cursor:pointer}.button:hover,.join:hover,dialog button:hover{border-image-source:url('/img/jogo/botao-1.png')}.button:active,.join:active,dialog button:active{border-image-source:url('/img/jogo/botao-2.png')}.join{white-space:nowrap;min-height:36px;font-size:12px;padding:4px 11px}
.hero{position:relative;isolation:isolate;height:calc(100svh - 76px);min-height:550px;max-height:790px;overflow:hidden;background:#080e12}.hero video,.veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.veil{z-index:-1;background:linear-gradient(90deg,#071017ed 0%,#071017b8 24%,#07101730 54%,transparent 80%),linear-gradient(0deg,#080e12,transparent 24%)}.copy{position:relative;margin-left:7%;padding-top:clamp(28px,6vh,65px);width:365px}.gth-lore-line{font:15px GTH,Georgia,serif;letter-spacing:.08em;margin:0 0 7px;color:#c1cecc}h1{font:400 clamp(35px,3.6vw,51px)/1.06 GTH,Georgia,serif;margin:0 0 12px;letter-spacing:0;white-space:nowrap}h1 span{color:#d5dfda}.intro{font-size:13px;line-height:1.7;color:#c0ccce;margin:0 0 22px}.gth-entry{display:flex;flex-direction:column;gap:8px;width:217px}.gth-window{width:217px}.gth-window>img{display:block;width:217px;height:auto}.gth-window-body{padding:8px;background:#04101ac7;border-left:2px solid #8c8e84;border-right:2px solid #8c8e84;text-align:center}.gth-window-body .button{width:100%}.small{font-size:10px;color:#a9bac0;margin:8px 0 12px}.gth-login{display:block;font-size:12px;color:#c7e2ed;padding:8px 0 2px}.gth-login:hover{text-decoration:underline}.gth-entry>#trailer,.discord-game{width:217px;font-weight:bold}#trailer{filter:sepia(.9) saturate(2.2);color:#fff5da}#trailer:hover{filter:sepia(.9) saturate(2.5) brightness(1.1)}
.gth-entry>.discord-game{position:relative;isolation:isolate;border-image:none;background:none;gap:9px;color:white}.discord-game:before{content:"";position:absolute;inset:-6px;z-index:-1;border:6px solid transparent;border-image:url('/img/jogo/botao-0.png') 6 fill / 6px stretch;filter:hue-rotate(105deg) saturate(2.6) brightness(1.7)}.discord-game:hover:before{border-image-source:url('/img/jogo/botao-1.png')}.discord-game:active:before{border-image-source:url('/img/jogo/botao-2.png')}.discord-icone{width:17px;height:13px;flex:0 0 auto;background:currentColor;-webkit-mask:radial-gradient(circle at 30% 45%,#000 2.2px,transparent 2.3px),radial-gradient(circle at 70% 45%,#000 2.2px,transparent 2.3px),radial-gradient(ellipse 52% 50% at 50% 50%,#000 99%,transparent);mask:radial-gradient(circle at 30% 45%,#000 2.2px,transparent 2.3px),radial-gradient(circle at 70% 45%,#000 2.2px,transparent 2.3px),radial-gradient(ellipse 52% 50% at 50% 50%,#000 99%,transparent);-webkit-mask-composite:xor;mask-composite:exclude}
.controls{position:absolute;bottom:18px;right:5%;display:flex;gap:18px;align-items:center;font-size:9px;letter-spacing:2px;color:#bec9c9}.controls button{border:0;background:none;color:#bac7cb;font-size:11px;cursor:pointer;padding:9px 0;text-shadow:0 1px 3px #000}.controls button:hover{text-decoration:underline;color:white}
.begin-journey{padding:65px 7% 60px;max-width:1600px;margin:0 auto;scroll-margin-top:100px}.journey-art{border:1px solid #8c8e8460;background:#03090c}.journey-art img{display:block;width:100%;height:auto}.journey-guide{margin-top:38px}.journey-heading{display:flex;justify-content:space-between;align-items:end;gap:24px}.journey-kicker{font:13px GTH,Georgia,serif;letter-spacing:2px;color:#b4c5c7;margin:0 0 8px}h2{font:40px/1.1 GTH,Georgia,serif;margin:0}.journey-intro{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 3px}.journey-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;padding:0;margin:30px 0 0}.journey-steps li{border-top:1px solid var(--line);padding-top:22px;display:flex;gap:16px}.journey-index{font:24px GTH,Georgia,serif;color:#aabfbc;flex:0 0 22px}.journey-steps h3{font:25px/1.15 GTH,Georgia,serif;margin:0 0 10px}.journey-steps p{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 13px;max-width:340px}.journey-link{font-size:12px;color:var(--ice)}.journey-link span{padding-left:8px}.journey-link:hover{text-decoration:underline}footer{border-top:1px solid var(--line);padding:25px 7%;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#91a4ac;font-size:11px}footer nav{display:flex;flex-wrap:wrap;gap:20px}footer p{margin:0}footer a:hover{color:var(--paper)}dialog{padding:18px;border:1px solid #8c8e84;background:#08131a;color:var(--paper);width:min(94vw,1050px);max-height:95svh}dialog::backdrop{background:#000d}dialog video{display:block;width:100%;max-height:78svh;margin-top:12px}dialog button{display:flex;margin-left:auto;min-height:34px}
@supports(background-clip:text){h1,.gth-lore-line{width:fit-content;background:linear-gradient(110deg,#bcc9c9 0%,#e0e4dc 40%,#fff 48%,#eefcff 50%,#fff 52%,#d0d9d6 60%,#bcc9c9 100%);background-size:300% 100%;background-position:150% 0;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 2px #000);animation:silver 7s ease-in-out infinite}h1 span{color:inherit;-webkit-text-fill-color:inherit}.gth-lore-line{animation-delay:.12s}}@keyframes silver{0%,20%{background-position:150% 0}55%,100%{background-position:-50% 0}}
@media(max-width:900px){header nav{gap:18px}.journey-steps{gap:20px}.journey-steps li{gap:10px}.journey-steps h3{font-size:23px}}
@media(max-width:700px){header{height:64px;padding:0 16px;gap:14px}header img{width:86px}header nav{gap:10px}.header-account{padding:0;border:0}.nav-text{display:none}.hero{height:calc(100svh - 64px);min-height:475px;max-height:760px}.hero video{object-position:58% center}.veil{background:linear-gradient(90deg,#071017d9,#07101792 40%,#0710171a),linear-gradient(0deg,#080e12,transparent 35%)}.copy{margin-left:6%;padding-top:17px;width:88%}.gth-lore-line{font-size:12px;margin-bottom:4px}h1{font-size:33px;margin-bottom:9px}.intro{font-size:12px;line-height:1.5;margin-bottom:13px}.gth-entry{gap:6px}.gth-window-body{padding:6px 8px}.gth-window-body .small{margin:6px 0 9px}.button{min-height:38px}.controls{bottom:8px;right:6%}.controls span{display:none}.begin-journey{padding:32px 6% 38px;scroll-margin-top:80px}.journey-guide{margin-top:25px}.journey-heading{display:block}.journey-intro{margin-top:12px}h2{font-size:34px}.journey-steps{grid-template-columns:1fr;gap:22px;margin-top:24px}.journey-steps li{padding-top:18px;gap:16px}.journey-steps h3{font-size:25px}.journey-steps p{font-size:12px;max-width:none}.journey-index{flex-basis:24px}footer{display:block;padding:22px 6%}footer nav{margin-top:17px;gap:17px}}
@media(max-width:380px){header{padding:0 10px;gap:8px}header img{width:72px}.join{font-size:11px;padding:4px 7px}.copy h1{font-size:30px}}
.why-gth{max-width:1600px;margin:auto;padding:32px 7% 0}.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.feature-card{position:relative;isolation:isolate;min-height:310px;overflow:hidden;border:1px solid #8c8e8460;background:#09131a}.feature-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#040a10 0%,#040a10df 12%,#040a1030 65%,#040a1010)}.feature-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2}.feature-card:nth-child(2) img{object-position:60% center}.feature-copy{position:absolute;bottom:25px;left:22px;right:18px;border-top:1px solid #b7a78370;padding-top:17px}.feature-copy h2{font:400 clamp(24px,2.3vw,34px)/1.1 GTH,Georgia,serif;color:#ede5ce;text-shadow:0 2px 5px #000}.feature-copy p{font-size:12px;line-height:1.6;color:#c7d2d3;margin:9px 0 0}@media(max-width:700px){.why-gth{padding:22px 6% 0}.why-grid{grid-template-columns:1fr;gap:14px}.feature-card{min-height:220px}.feature-copy{bottom:20px}.feature-copy h2{font-size:29px}.feature-card img{object-position:65% 43%}}.feature-card:nth-child(2) img{object-position:60% 55%}
/* Original inventory window ornaments, matching the supplied reference. */
.gth-window>img:first-child{height:30px;object-fit:fill}.gth-window>img:last-child{height:16px;object-fit:fill}.gth-window-body{border-left:1px solid #a5a38b;border-right:1px solid #a5a38b;background:linear-gradient(90deg,#272921e8,#121c1ee6 45%,#291815e6);box-shadow:inset 2px 0 #151a18,inset -2px 0 #151a18}
/* Original-size artwork, plain stretches cropped to fit the panel. */
.inventory-edge{display:grid;grid-template-columns:12px minmax(0,1fr) 12px;width:217px}
.inventory-edge span{display:block;background-repeat:no-repeat}
.inventory-edge-top{height:38px}.inventory-edge-top span{background-image:url('/img/janela_topo.png');background-size:auto}
.inventory-edge-bottom{height:12px}.inventory-edge-bottom span{background-image:url('/img/janela_rodape.png');background-size:auto}
.inventory-edge span:first-child{background-position:left bottom}.inventory-edge span:nth-child(2){background-position:center bottom}.inventory-edge span:last-child{background-position:right bottom}.gth-window>img.original-panel-bottom{display:block;width:217px;height:21px;object-fit:contain}
.panel-community{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #a5a38b55}
.panel-community #trailer,.panel-community .discord-game{width:100%;font-weight:bold}
.panel-community .discord-game{position:relative;isolation:isolate;border-image:none;background:none;gap:9px;color:white}
/* Shared game-metal finish; Discord keeps a restrained brand tint. */
.panel-community #trailer{filter:sepia(.85) saturate(1.65);color:#fff0d2}.panel-community #trailer:hover{filter:sepia(.85) saturate(1.65) brightness(1.1);color:#fff5e3}
.panel-community .discord-game:before{filter:hue-rotate(105deg) saturate(2.6) brightness(1.7)}
.panel-community .discord-game{color:white}
.gth-window-body{background:#101a1de8}
dialog video{height:auto;aspect-ratio:16/9}

/* ── Integracao no site (12/10/2026) ─────────────────────────────────────
   Tudo acima e' o home.css aprovado, com os url() apontando para os
   arquivos que o site ja serve. O que segue nao muda o visual: cobre o que
   o piloto nao tinha -- o link de pular para o conteudo, a saida de quem
   esta logado (um POST com o token antiforgery) e quem pede ao sistema
   menos movimento. */
.pular{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--ice);color:var(--page)}
.pular:focus{left:8px;top:8px}
.header-account{align-items:center}
.header-account form{display:flex;margin:0}
/* Login do visitante: link discreto na fonte do jogo, antes do botao de
   criar conta. O foco usa o mesmo contorno de todo link da home. */
.topo-login{font:15px GTH,Georgia,serif;letter-spacing:.04em;color:var(--ice);padding:10px 8px}
.topo-login:hover{color:#fff;text-decoration:underline}
/* Logado sao tres botoes no topo (Account, Collision Coins, Sign out): em
   390 px passavam 7 px da tela. Ate 420 px eles usam a mesma medida que o
   piloto ja da a .join abaixo de 380 px. */
@media (max-width:420px){.header-account:has(form) .join{font-size:11px;padding:4px 7px}}
@media (prefers-reduced-motion:reduce){h1,.gth-lore-line{animation:none}}

/* ── Primeira dobra = janela (13/10/2026) ────────────────────────────────
   Topo mais baixo e hero do tamanho exato que sobra: altura do topo +
   altura da hero = altura visivel da janela, em todo breakpoint. Saem o
   min-height fixo (550/475 px empurravam a dobra para fora em janelas
   baixas) e o teto de 790/760 px (a hero acabava antes da janela em telas
   altas). Se o conteudo nao couber numa janela muito baixa, a hero cresce o
   necessario em vez de cortar botao. O video segue em object-fit:cover:
   proporcao original, sem esticar. --topo amarra o topo a hero. */
:root{--topo:58px}
header{height:var(--topo)}
header img{width:96px}
.hero{height:auto;max-height:none;min-height:calc(100vh - var(--topo));min-height:calc(100svh - var(--topo))}
@media(max-width:700px){:root{--topo:54px}header img{width:76px}}
@media(max-width:380px){header img{width:68px}}
/* Celular (13/10/2026): a janela de entrada -- Download, Create account,
   Watch gameplay, Discord -- fica no centro da largura da tela. So' na
   horizontal, com os mesmos 217 px; o texto acima segue alinhado como
   aprovado. O .copy ja tem 6% de cada lado, entao margem automatica dentro
   dele centraliza na tela. */
@media(max-width:700px){.gth-entry{margin-left:auto;margin-right:auto}}
/* Desktop (13/10/2026): o conjunto da esquerda sobe um pouco -- em janela
   baixa ele ficava mais perto do pe' da hero que do topo. So' o respiro
   acima diminui, e mais nas janelas baixas: 600 px de altura vai de 36 para
   25 px, 768 de 46 para ~38, 1080 de 65 para 61. E' metade da primeira
   subida, que o dono achou demais. Fontes, botoes e bordas nao mudam; o
   celular segue com os 17 px dele. */
@media(min-width:701px){.copy{padding-top:clamp(20px,7.5vh - 20px,65px)}}
/* Celular (13/10/2026): o conjunto inteiro no mesmo eixo da janela de
   entrada -- texto de um lado e caixa no centro nao fecha. O titulo e a
   linha de cima tem largura fit-content (ver o @supports do brilho), entao
   alem do text-align precisam de margem automatica para o bloco centrar.
   Na vertical, o .copy fica no meio da area sob o topo: a hero vira coluna
   flex e reparte a sobra acima e abaixo, pela altura real do conteudo. Os
   17 px de cima seguem como margem minima; os 44 px de baixo guardam o
   "Play background", que fica no pe' da hero. Se nao couber, a hero
   cresce (height:auto), nada e' cortado. */
@media(max-width:700px){.copy{text-align:center;padding-bottom:44px}.gth-lore-line,.copy h1{margin-left:auto;margin-right:auto}.hero{display:flex;flex-direction:column;justify-content:center}}
/* /#play (15/10/2026): o destino de "How to play" e' o guia -- titulo e os
   tres passos --, e nao a secao inteira, que abre com a arte grande: quem
   clicava chegava vendo os cards e a arte. A margem poe o titulo logo abaixo
   do topo fixo (--topo: 58 px; 54 no celular) com um respiro. */
.journey-guide{scroll-margin-top:calc(var(--topo) + 20px)}