* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #000; color: #F4EBDD; font: 500 15px/1.45 Inter, system-ui, sans-serif; }
#cena { position: fixed; inset: 0; overflow: hidden; }
button { font: inherit; border: 0; cursor: pointer; }
.ouro { background: linear-gradient(180deg, #F0CF83, #D8B05A); color: #1b1307; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.voltar { position: fixed; z-index: 7; top: max(12px, env(safe-area-inset-top)); left: 12px; padding: 10px 14px; border-radius: 999px; background: rgba(11,9,6,.7); color: #F0CF83; text-decoration: none; font-weight: 700; font-size: 14px; }
.dica { position: fixed; z-index: 4; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; pointer-events: none; padding: 24px; text-align: center; }
.dica .moldura { width: min(58vw, 240px); aspect-ratio: 1; border: 3px dashed rgba(240,207,131,.85); border-radius: 12px; display: grid; animation: respira 1.6s ease-in-out infinite; }
.dica .moldura span { display: none; }
.dica p { background: rgba(11,9,6,.75); padding: 10px 14px; border-radius: 12px; font-weight: 700; max-width: 320px; }
@keyframes respira { 50% { transform: scale(.94); opacity: .7; } }
.achou { position: fixed; z-index: 4; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: rgba(11,9,6,.75); color: #F0CF83; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; }
.barra { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(0,0,0,.65), transparent); }
.barra button { min-height: 50px; border-radius: 999px; }
.barra #lata { background: rgba(11,9,6,.75); color: #F4EBDD; border: 1.5px solid rgba(216,176,90,.5); font-weight: 700; }
.abrir { position: fixed; z-index: 6; inset: 0; background: radial-gradient(70% 50% at 50% 40%, #2a1d0c, #0B0906); display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.abrir h1 { font: 700 30px/1.05 'Playfair Display', serif; color: #F0CF83; }
.abrir ol { text-align: left; display: grid; gap: 8px; max-width: 330px; color: #cbbfa9; padding-left: 20px; } .abrir b { color: #F4EBDD; }
.abrir #comecar { min-height: 54px; padding: 0 28px; border-radius: 999px; font-size: 15px; width: min(330px, 100%); }
.abrir .livre { color: #F0CF83; font-weight: 700; font-size: 14px; }
.erro { color: #ffb08a; max-width: 330px; font-size: 14px; }
[hidden] { display: none !important; }