/* Pentaura · a página do jogo no navegador (/jogar/): a tela inteira para o Unity e uma carga à altura do jogo. */
@font-face { font-family: 'Cinzel'; src: url('/fontes/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('/fontes/sora.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
:root { --base: #060a20; --txt: #eef2ff; --sub: #aab6e6; --ouro-1: #ffd975;
  --ouro: linear-gradient(135deg, #fff3c4 0%, #ffd975 28%, #f3b53a 58%, #c98912 82%, #f7cd63 100%); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--txt); font: 400 15px/1.5 'Sora', system-ui, sans-serif; -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: none; }
#unity-container { position: fixed; inset: 0; }
/* o canvas ocupa a janela toda; o Unity casa a resolução com o tamanho (e com o devicePixelRatio do jogo.js) */
#unity-canvas { display: block; width: 100vw; height: 100vh; height: 100dvh; background: var(--base); outline: none; }

.carga { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--base); transition: opacity .6s ease, visibility .6s; }
.carga.pronta { opacity: 0; visibility: hidden; }
.carga-fundo { position: absolute; inset: 0; background: url('/img/capa-1280.webp') center / cover no-repeat; opacity: .28; filter: blur(3px); transform: scale(1.03); }
@media (orientation: portrait) { .carga-fundo { background-image: url('/img/capa-vertical-720.webp'); } }
.carga::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(6, 10, 32, .4), rgba(6, 10, 32, .95)); }
.carga-centro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; width: min(440px, 86vw); text-align: center; }
.titulo { margin: 0; font: 900 clamp(2.4rem, 9vw, 4.2rem)/1 'Cinzel', serif; letter-spacing: .08em; background: var(--ouro); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(40, 20, 0, .5)); }
/* as cinco auras girando: o pentágono do logo */
.auras { position: relative; width: 84px; height: 84px; animation: girar 3.2s linear infinite; }
.auras i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; box-shadow: 0 0 14px currentColor; background: currentColor; }
.auras i:nth-child(1) { color: #ff7a2e; transform: rotate(0deg) translateY(-34px); }
.auras i:nth-child(2) { color: #f2b04a; transform: rotate(72deg) translateY(-34px); }
.auras i:nth-child(3) { color: #6be36b; transform: rotate(144deg) translateY(-34px); }
.auras i:nth-child(4) { color: #5fe3ff; transform: rotate(216deg) translateY(-34px); }
.auras i:nth-child(5) { color: #b57cff; transform: rotate(288deg) translateY(-34px); }
@keyframes girar { to { transform: rotate(360deg); } }
.barra { width: 100%; height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 212, 120, .3); overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.estado { margin: 0; color: var(--sub); font-weight: 600; font-variant-numeric: tabular-nums; }
.dica { margin: 0; min-height: 3em; color: var(--txt); opacity: .85; font-size: .9rem; transition: opacity .4s ease; }
.dica.trocando { opacity: 0; }
.voltar { position: absolute; z-index: 1; left: 16px; top: calc(14px + env(safe-area-inset-top)); color: var(--sub); text-decoration: none; font-weight: 600; font-size: .85rem; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); }

.erro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(6, 10, 32, .9); padding: 16px; }
.erro[hidden] { display: none; }
.erro-caixa { width: min(460px, 100%); display: grid; gap: 14px; text-align: center; padding: 28px 22px; border-radius: 24px; background: rgba(10, 18, 56, .9); border: 1px solid rgba(255, 212, 120, .42); }
.erro h2 { margin: 0; font: 800 1.5rem/1.2 'Cinzel', serif; }
.erro p { margin: 0; color: var(--sub); }
.erro-acoes { display: grid; gap: 10px; }
.bt { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px; border: 1px solid rgba(120, 162, 255, .2); background: rgba(255, 255, 255, .08); color: var(--txt); font: 700 1rem 'Sora', sans-serif; text-decoration: none; cursor: pointer; }
.bt-ouro { background: var(--ouro); color: #2a1a02; border: 0; }

.tela-cheia { position: fixed; z-index: 5; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(6, 10, 32, .5); color: var(--txt); cursor: pointer; opacity: .55; transition: opacity .2s; }
.tela-cheia:hover { opacity: 1; }
.tela-cheia svg { width: 22px; height: 22px; }
.tela-cheia[hidden] { display: none; }
.aviso { position: fixed; z-index: 30; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: rgba(12, 20, 60, .95); border: 1px solid rgba(255, 212, 120, .42); font-weight: 600; transition: opacity .3s, transform .3s; }
.aviso.mostra { opacity: 1; transform: translate(-50%, 0); }
.aviso.ruim { border-color: #ff5a5f; }
@media (prefers-reduced-motion: reduce) { .auras { animation: none; } }