:root {
  --papel: #EDE9DE;
  --papel-2: #E2DCCB;
  --cartao: #F8F5EC;
  --tinta: #2A2721;
  --suave: #6B6558;
  --linha: #D3CCB9;
  --verde: #3E6B4A;
  --verde-claro: #DCE6D8;
  --vermelho: #A33B2E;
  --vermelho-claro: #F0DAD3;
  --ouro: #F0C982;
  --titulo: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --texto: "Inter", system-ui, -apple-system, sans-serif;
  --r: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--papel); }
body { color: var(--tinta); font: 400 16px/1.4 var(--texto); -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--titulo); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }

#app {
  max-width: 480px; margin: 0 auto; min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 100px);
  display: flex; flex-direction: column; gap: 14px;
}
#app.sessao { padding-bottom: calc(env(safe-area-inset-bottom) + 210px); }

/* Navegação */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  background: var(--tinta);
  padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px);
}
.nav div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; max-width: 460px; }
.nav button { min-height: 52px; border: 0; border-radius: 12px; background: transparent; color: #BDB6A5; font-weight: 600; font-size: 15px; }
.nav button.on { background: var(--papel); color: var(--tinta); }

/* Hoje */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topo h1 { font-size: 26px; line-height: 1.1; }
.topo small { display: block; color: var(--suave); font: 500 13px var(--texto); margin-top: 2px; }
.setas { display: flex; gap: 6px; }
.seta { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); font-size: 20px; }
.seta:disabled { opacity: .35; }

.atelie { position: relative; border-radius: var(--r); overflow: hidden; background: #1C1915; }
.estatua { position: relative; width: 100%; height: min(56dvh, 470px); touch-action: pan-y; overflow: hidden; display: flex; justify-content: center; background: radial-gradient(circle at 45% 32%, #5B5346, #312C25 52%, #1C1915 100%); }
.estatua svg { height: 100%; width: 100%; display: block; }
.fase { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; color: #F6F1E4; pointer-events: none; }
.fase b { font: 600 21px/1.1 var(--titulo); display: block; }
.fase span { font: 500 12px var(--mono); color: #CFC8B6; }
.fase .hoje { text-align: right; }
.fase .hoje b { font: 600 21px var(--mono); }
.rumo { padding: 10px 14px 12px; color: #CFC8B6; font: 500 12px var(--mono); display: flex; flex-direction: column; gap: 6px; }
.barra { height: 6px; border-radius: 3px; background: #4A443A; overflow: hidden; }
.barra span { display: block; height: 100%; background: var(--ouro); }
.frase:empty { display: none; }
.frase { font: italic 500 16px var(--titulo); color: var(--suave); text-align: center; text-wrap: balance; }

.po { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #F4EEDF; opacity: 0; animation: po 1.05s ease-out forwards; pointer-events: none; }
@keyframes po {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); }
}
.brilho { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(240, 201, 130, .55), transparent 65%); animation: brilho 1.4s ease-out forwards; pointer-events: none; }
@keyframes brilho { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; align-items: stretch; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
.check.ok { background: var(--verde-claro); border-color: var(--verde); }
.check.fora { background: var(--vermelho-claro); border-color: var(--vermelho); }
.check .main { flex: 1; min-width: 0; min-height: 66px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; text-align: left; }
.caixa { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--suave); display: grid; place-items: center; background: var(--papel); color: #fff; }
.caixa svg { width: 22px; height: 22px; display: none; }
.ok > * .caixa, .ok .caixa { background: var(--verde); border-color: var(--verde); }
.ok .caixa svg { display: block; }
.fora .caixa { background: var(--vermelho); border-color: var(--vermelho); }
.fora .caixa svg { display: block; }
.check .n { font-weight: 600; display: block; }
.check .d { font-size: 13px; color: var(--suave); display: block; }
.btn-fora { flex: none; width: 76px; border: 0; border-left: 1px solid var(--linha); background: none; font-size: 13px; font-weight: 600; color: var(--vermelho); }
.fora .btn-fora { border-left-color: var(--vermelho); background: var(--vermelho); color: #fff; }

.rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); padding: 6px 2px; }
.rodape-acoes { display: flex; gap: 6px; }
.mini { border: 1px solid var(--linha); background: none; border-radius: 10px; min-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--suave); display: inline-flex; align-items: center; cursor: pointer; }

/* Botões e cartões */
.btn { width: 100%; min-height: 58px; border-radius: 14px; border: 2px solid var(--tinta); background: transparent; font-weight: 700; font-size: 17px; padding: 0 16px; }
.btn.pri { background: var(--tinta); color: var(--papel); }
.btn.ver { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.leve { border: 1px solid var(--linha); background: var(--cartao); font-weight: 600; min-height: 50px; font-size: 15px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Treino */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dia { min-height: 58px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); padding: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.dia small { font-size: 11px; color: var(--suave); font-weight: 600; }
.dia b { font: 600 19px var(--titulo); line-height: 1; }
.dia.hj small { color: var(--verde); }
.dia.sel { background: var(--tinta); border-color: var(--tinta); }
.dia.sel small, .dia.sel b { color: var(--papel); }
.treino-cab h1 { font-size: 30px; line-height: 1.05; }
.treino-cab p { color: var(--suave); font-size: 14px; margin-top: 4px; }
.prev { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha); }
.prev:first-child { border-top: 0; padding-top: 0; }
.prev:last-child { padding-bottom: 0; }
.prev span:first-child { font-weight: 500; }
.num { font-family: var(--mono); font-size: 13px; white-space: nowrap; color: var(--suave); }
.feito-ok { background: var(--verde-claro); border-color: var(--verde); }

.progresso { display: flex; align-items: baseline; justify-content: space-between; }
.progresso b { font: 600 30px var(--mono); }
.barra.clara { background: var(--papel-2); height: 8px; border-radius: 4px; }
.barra.clara span { background: var(--verde); }

.ex { display: flex; align-items: stretch; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; }
.ex.tudo { background: var(--verde-claro); border-color: var(--verde); }
.ex .marca { flex: none; width: 66px; border: 0; background: none; display: grid; place-items: center; }
.ex.tudo .caixa { background: var(--verde); border-color: var(--verde); }
.ex.tudo .caixa svg { display: block; }
.ex .abre { flex: 1; min-width: 0; min-height: 72px; border: 0; background: none; text-align: left; padding: 10px 12px 10px 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.ex .abre b { font-weight: 600; }
.pontos { display: flex; gap: 4px; }
.pontos i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha); }
.pontos i.on { background: var(--verde); }

.voltar { align-self: flex-start; border: 0; background: none; padding: 8px 8px 8px 0; font-weight: 600; color: var(--suave); min-height: 44px; }
.ex-tit { font-size: 28px; line-height: 1.08; }
.meta { font: 500 13px var(--mono); color: var(--suave); margin-top: 6px; }
.obs { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.sobe { background: var(--verde-claro); border: 1px solid var(--verde); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 500; }
.serie { display: grid; grid-template-columns: 28px 1fr 1fr 58px; gap: 8px; align-items: center; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 8px 8px 8px 12px; }
.serie.ok { background: var(--verde-claro); border-color: var(--verde); }
.serie > b { font: 600 19px var(--mono); }
.serie label { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; color: var(--suave); gap: 2px; min-width: 0; }
.serie input { width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--linha); background: #fff; font: 600 18px var(--mono); text-align: center; color: var(--tinta); padding: 0; }
.serie .marca { height: 58px; border: 0; background: none; display: grid; place-items: center; padding: 0; }
.serie.ok .caixa { background: var(--verde); border-color: var(--verde); }
.serie.ok .caixa svg { display: block; }

.fixo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--papel); border-top: 1px solid var(--linha); padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px); }
.fixo > div { max-width: 448px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.timer { background: var(--tinta); color: var(--papel); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.timer.fim { background: var(--verde); }
.timer .linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.timer .rel { font: 600 38px/1 var(--mono); font-variant-numeric: tabular-nums; }
.timer .ctl { display: flex; gap: 6px; }
.timer .ctl button { min-width: 54px; height: 48px; border-radius: 10px; border: 0; background: rgba(237, 233, 222, .16); color: var(--papel); font-weight: 700; font-size: 14px; }
.timer .ctl .pula { background: var(--papel); color: var(--tinta); }
.timer .barra { background: rgba(237, 233, 222, .2); height: 4px; }
.timer .lbl { font-size: 12px; font-weight: 600; opacity: .75; }

.resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resumo div { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px; }
.resumo b { display: block; font: 600 32px/1.1 var(--mono); }
.resumo span { font-size: 13px; color: var(--suave); }

.ritual { position: fixed; inset: 0; z-index: 30; background: #14120F; color: #F6F1E4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; animation: ritual 1.9s ease forwards; }
.ritual small { font: 500 14px var(--texto); color: #A9A292; }
.ritual b { font: 600 34px/1.1 var(--titulo); text-wrap: balance; }
@keyframes ritual { 0% { opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* Dieta */
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--papel-2); border-radius: 14px; padding: 4px; }
.abas button { min-height: 48px; border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: 14px; color: var(--suave); padding: 4px 8px; }
.abas button.on { background: var(--verde); color: #fff; }
.desc { color: var(--suave); font-size: 14px; }
.ref { padding: 0; gap: 0; overflow: hidden; }
.ref.ok { border-color: var(--verde); }
.ref.fora { border-color: var(--vermelho); }
.ref-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 14px 8px; }
.ref-cab h2 { font-size: 19px; line-height: 1.15; }
.item { display: flex; justify-content: space-between; gap: 12px; padding: 7px 14px; font-size: 15px; border-top: 1px solid var(--papel-2); }
.item span:last-child { font: 500 13px var(--mono); color: var(--suave); white-space: nowrap; align-self: center; }
.macros { padding: 9px 14px; font: 500 12px var(--mono); background: var(--papel-2); }
.ref-acao { display: grid; grid-template-columns: 1fr 88px; }
.ref-acao button { min-height: 58px; border: 0; font-weight: 700; background: var(--cartao); }
.ref-acao .da { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ref.ok .da { background: var(--verde-claro); color: var(--verde); }
.ref.ok .caixa { background: var(--verde); border-color: var(--verde); }
.ref.ok .caixa svg, .ref.fora .caixa svg { display: block; }
.ref.fora .caixa { background: var(--vermelho); border-color: var(--vermelho); }
.ref-acao .sai { color: var(--vermelho); border-left: 1px solid var(--papel-2); font-size: 13px; }
.ref.fora .sai { background: var(--vermelho); color: #fff; }
.total { background: var(--tinta); color: var(--papel); border-radius: var(--r); padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.total span { font: 600 12px var(--texto); opacity: .75; }
.total b { font: 600 24px var(--mono); }
.total em { font: 500 12px var(--mono); }
.nota { font-size: 13px; color: var(--suave); }

/* Cena 3D e progresso */
.estatua canvas { display: block; width: 100% !important; height: 100% !important; }
.prog { display: grid; grid-template-columns: 56px 1fr 52px; gap: 8px; align-items: center; }
.prog b { font-weight: 500; text-align: right; color: #F6F1E4; }
.peso-card svg { width: 100%; height: 64px; display: block; }
.peso-card .n { font-weight: 600; }
.credito { font-size: 12px; padding: 0 2px; }
.janela { position: fixed; inset: 0; z-index: 40; background: rgba(20, 18, 15, .6); display: flex; align-items: flex-start; justify-content: center; padding: calc(env(safe-area-inset-top) + 60px) 16px 16px; }
.janela form { width: 100%; max-width: 420px; }
.janela h2 { font-size: 23px; }
.campo { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--suave); }
.campo input { flex: 1; min-width: 0; height: 60px; border-radius: 12px; border: 1px solid var(--linha); background: #fff; font: 600 28px var(--mono); text-align: center; color: var(--tinta); }

/* Clima: bronze, mar escuro e luz natural */
:root {
  --papel: #0B0E11; --papel-2: #1A2025; --cartao: #13181C; --tinta: #E9E3D6; --suave: #9C988C; --linha: #2A3137;
  --verde: #B8935A; --verde-claro: #241E14; --vermelho: #C25F48; --vermelho-claro: #2B1813; --ouro: #C9A268;
  --titulo: "Cinzel", Georgia, serif; --epico: "Cormorant Garamond", Georgia, serif;
  color-scheme: dark;
}
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
h1, h2 { letter-spacing: .035em; font-weight: 500; }
.topo h1 { text-transform: uppercase; font-size: 25px; }
.treino-cab h1, .ex-tit { font-size: 26px; }
.atelie { margin: 0 -16px; border-radius: 0; background: none; overflow: visible; }
.estatua { height: min(60dvh, 520px); background: none; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.fase { left: 16px; right: 16px; }
.fase b { font: 500 19px/1.15 var(--titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta); }
.fase span { color: var(--suave); }
.rumo { padding: 4px 16px 6px; color: var(--suave); }
.barra { background: var(--linha); height: 4px; }
.prog b { color: var(--tinta); }
.frase { font: italic 500 19px var(--epico); color: #CDBB98; }
.nav { background: #070A0C; border-top: 1px solid var(--linha); }
.nav button { color: var(--suave); }
.nav button.on { background: none; color: var(--ouro); box-shadow: inset 0 2px 0 var(--ouro); border-radius: 0; font-family: var(--titulo); letter-spacing: .05em; }
.nav button { font-family: var(--titulo); letter-spacing: .05em; }
.caixa { background: transparent; color: #0B0E11; border-color: #6D6A61; }
.seta { background: var(--cartao); color: var(--tinta); }
.btn { font-family: var(--titulo); letter-spacing: .05em; font-weight: 500; }
.btn.pri, .btn.ver { background: var(--ouro); border-color: var(--ouro); color: #0B0E11; font-weight: 700; }
.btn.leve { background: var(--cartao); font-family: var(--texto); letter-spacing: 0; color: var(--tinta); }
.check.fora { border-color: var(--vermelho); }
.fora .btn-fora, .ref.fora .sai { color: #0B0E11; }
.serie input, .campo input { background: #0B0E11; color: var(--tinta); border-color: var(--linha); }
.fixo { background: #0B0E11; }
.timer { background: var(--papel-2); color: var(--tinta); }
.timer.fim { background: var(--ouro); color: #0B0E11; }
.timer .ctl button { background: rgba(233, 227, 214, .1); color: var(--tinta); }
.timer .ctl .pula { background: var(--tinta); color: #0B0E11; }
.dia.sel { background: var(--ouro); border-color: var(--ouro); }
.dia.sel small, .dia.sel b { color: #0B0E11; }
.dia.hj small { color: var(--ouro); }
.abas button.on { background: var(--ouro); color: #0B0E11; }
.total { background: var(--papel-2); color: var(--tinta); }
.macros { background: var(--papel-2); color: var(--suave); }
.ref.ok .da { color: var(--ouro); }
.ref-acao button { color: var(--tinta); }
.ref-acao .sai { color: var(--vermelho); }
.sobe { color: var(--tinta); }
.ritual { background: #05070A; }
.ritual small { font: italic 500 19px var(--epico); }
.ritual b { font-weight: 500; letter-spacing: .04em; font-size: 29px; }
.barra.clara { background: var(--linha); }
.resumo b { color: var(--ouro); }

/* Sem zoom e sem a estátua mudar de tamanho ao rolar */
html { touch-action: manipulation; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
body { overscroll-behavior: none; }
input { -webkit-user-select: text; user-select: text; }
.estatua { height: min(60svh, 520px); }

/* ===== Alter: amanhecer e moedas ===== */
:root {
  --papel: #0A0B0F; --papel-2: #1B1D24; --cartao: #13151B; --tinta: #F5F1E8; --suave: #A09D94; --linha: #272A32;
  --verde: #F0C574; --verde-claro: #2B2415; --vermelho: #D96B50; --vermelho-claro: #2C1711; --ouro: #F0C574;
  --titulo: "Instrument Serif", Georgia, serif; --epico: "Instrument Serif", Georgia, serif; --texto: "Inter Tight", system-ui, sans-serif;
}
body::after { display: none; }
h1, h2 { font-weight: 400; letter-spacing: -.012em; }
.topo h1 { text-transform: none; font-size: 38px; }
.treino-cab h1, .ex-tit { font-size: 34px; }
#app { padding-top: 0; }
#app > .topo:first-child, #app > .dias:first-child, #app > .voltar:first-child, #app > .progresso:first-child, #app > .treino-cab:first-child { margin-top: calc(env(safe-area-inset-top) + 14px); }
.nav div { grid-template-columns: repeat(4, 1fr); max-width: 520px; }
.nav button, .nav button.on { font-family: var(--texto); letter-spacing: 0; font-size: 14px; }
.btn, .btn.pri, .btn.ver { font-family: var(--texto); letter-spacing: 0; font-weight: 600; }
.btn.pri, .btn.ver { background: var(--ouro); border-color: var(--ouro); color: #17120A; }
.prog { grid-template-columns: 60px 1fr 56px; font: 500 12px var(--mono); color: var(--suave); }
.barra { background: var(--linha); height: 5px; }
.barra span { background: var(--ouro); }
.frase { font: italic 400 22px/1.15 var(--epico); color: #E5CFA3; }
.resumo-prog { gap: 11px; }
.caixa { color: #17120A; }

.ceu { position: relative; overflow: hidden; margin: 0 -16px; height: min(58svh, 500px); min-height: 400px; isolation: isolate;
  --c1: #05070F; --c2: #0A1024; --c3: #141A38; --c4: #232A52; --sol-y: 116%; --estrelas: 1; --reflexo: 0;
  background: linear-gradient(var(--c1) 0, var(--c2) 30%, var(--c3) 54%, var(--c4) 75%); }
.estrelas { position: absolute; inset: 0 0 26% 0; opacity: var(--estrelas);
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 28% 42%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 41% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 58% 30%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 72% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 86% 38%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 93% 11%, #fff, transparent 60%), radial-gradient(1px 1px at 18% 60%, #fff, transparent 60%), radial-gradient(1.1px 1.1px at 66% 58%, #fff, transparent 60%), radial-gradient(1px 1px at 48% 50%, #fff, transparent 60%); }
.sol { position: absolute; left: 50%; top: var(--sol-y); width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, #FFFDF2 0, #FFEFB9 45%, #FFCA6B 70.5%, transparent 71.5%);
  box-shadow: 0 0 calc(40px + 90px * var(--p, 0)) calc(18px + 38px * var(--p, 0)) rgba(255, 201, 110, .42); }
.mar { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 2; overflow: hidden;
  background: linear-gradient(color-mix(in srgb, var(--c4) 45%, #060709), #07080B 92%); }
.mar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: color-mix(in srgb, var(--c4) 75%, #fff); opacity: .7; }
.mar i { position: absolute; left: 50%; top: 0; bottom: 0; width: 150px; margin-left: -75px; opacity: var(--reflexo);
  background: repeating-linear-gradient(transparent 0 5px, rgba(255, 224, 160, .62) 5px 7px, transparent 7px 12px, rgba(255, 196, 110, .34) 12px 13px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
.ceu-topo { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 10px); display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 500; }
.ceu .seta { background: rgba(0, 0, 0, .24); border-color: rgba(255, 255, 255, .22); color: #fff; }
.ceu-txt { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(env(safe-area-inset-top) + 70px); color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .28); }
.ceu-txt h1 { font-size: clamp(50px, 15vw, 64px); line-height: .94; letter-spacing: -.025em; margin: 0; }
.ceu-txt p { margin: 9px 0 0; font-size: 15px; font-weight: 500; opacity: .9; }

.moeda { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.moeda::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(40, 25, 5, .38), inset 0 3px 10px rgba(255, 255, 255, .2); }
.moeda span { position: relative; width: 62%; color: rgba(45, 28, 6, .72); font: 400 42px var(--epico); display: grid; place-items: center; }
.moeda svg { width: 100%; display: block; }
.moeda.bronze { background: conic-gradient(from 210deg, #5B3214, #E4A472, #8E5328, #D08C54, #4E2A10, #E8AE7B, #5B3214); }
.moeda.bronze::before { background: radial-gradient(circle at 36% 28%, #E8B083, #A9683A 55%, #693A1A); }
.moeda.prata { background: conic-gradient(from 210deg, #6C7178, #FBFCFD, #9EA4AB, #E5E8EB, #5C6168, #F4F6F8, #6C7178); }
.moeda.prata::before { background: radial-gradient(circle at 36% 28%, #FFF, #BDC2C8 55%, #7C8188); }
.moeda.prata span { color: rgba(30, 34, 40, .7); }
.moeda.ouro { background: conic-gradient(from 210deg, #6F4A17, #FFF0B8, #A87527, #F5D37E, #5F3F12, #FFE7A1, #6F4A17); }
.moeda.ouro::before { background: radial-gradient(circle at 36% 28%, #FFE9A8, #C8933B 52%, #7E5519); }
.moeda.platina { background: conic-gradient(from 210deg, #2B3B69, #E9F2FF, #7DA0D8, #F6E7C6, #2B3B69, #DCE9FF, #2B3B69); }
.moeda.platina::before { background: radial-gradient(circle at 36% 28%, #F4F8FF, #91ABD8 54%, #33466F); }
.moeda.platina span { color: rgba(15, 28, 60, .72); }
.moeda.oculta { background: var(--papel-2); }
.moeda.oculta::before { box-shadow: inset 0 0 0 1px var(--linha); }
.moeda.oculta span { color: var(--suave); }

.revela { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: calc(env(safe-area-inset-top) + 24px) 26px calc(env(safe-area-inset-bottom) + 24px); background: #050507; color: var(--tinta); animation: aparece .35s ease-out; overflow: hidden; }
.revela > * { position: relative; }
.revela .clarao { position: absolute; left: 50%; top: 40%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 96, .46), transparent 62%); animation: clarao 1.1s ease-out; }
.revela.prata .clarao { background: radial-gradient(circle, rgba(215, 228, 245, .36), transparent 62%); }
.revela.platina .clarao { background: radial-gradient(circle, rgba(130, 170, 255, .5), transparent 62%); }
.revela.bronze .clarao { background: radial-gradient(circle, rgba(226, 140, 76, .34), transparent 62%); }
.revela .moeda { width: min(58vw, 225px); margin-bottom: 18px; box-shadow: 0 0 70px rgba(255, 196, 96, .3); }
.gira { animation: gira .95s cubic-bezier(.2, .8, .2, 1); }
.revela small { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.revela h2 { font-size: 46px; line-height: 1; margin: 5px 0 3px; letter-spacing: -.02em; }
.revela p { margin: 0; color: #C9C5BA; font-size: 17px; line-height: 1.35; max-width: 310px; }
.revela em { font-style: normal; color: var(--suave); font-size: 13px; margin-top: 7px; }
.revela .btn { margin-top: 28px; max-width: 320px; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes clarao { from { transform: scale(.25); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gira { from { transform: perspective(600px) rotateY(-540deg) scale(.45); opacity: 0; } to { transform: perspective(600px) rotateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gira, .revela .clarao, .revela { animation: none; } }

.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 12px; color: var(--suave); text-align: center; }
.contagem div { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 2px; }
.contagem b { display: block; color: var(--tinta); font: 400 28px/1.1 var(--epico); }
.mes-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mes-grade i { aspect-ratio: 1; display: grid; place-items: center; font: 500 12px var(--mono); border-radius: 50%; background: var(--papel-2); color: var(--suave); }
.mes-grade i.meio { background: var(--verde-claro); color: var(--ouro); }
.mes-grade i.cheio { background: var(--ouro); color: #17120A; }
.mes-grade i.agora { box-shadow: 0 0 0 1.5px var(--tinta); }
.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.carta { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; font-size: 12px; min-width: 0; }
.carta b { font-weight: 600; line-height: 1.2; }
.carta span { color: var(--suave); }
.carta.vazia b { color: var(--suave); font-weight: 500; }
.carta .moeda { width: 78%; }

/* ===== Alter: noir ===== */
:root {
  --papel: #07080B; --papel-2: #15171C; --cartao: #101217; --tinta: #F1F0EC; --suave: #8F929A; --linha: #23262D;
  --verde: #D6142F; --verde-claro: #1E0A0E; --vermelho: #8F929A; --vermelho-claro: #17181C; --ouro: #D6142F;
  --titulo: "Oswald", "Arial Narrow", sans-serif; --epico: "Oswald", "Arial Narrow", sans-serif; --r: 6px;
}
h1, h2 { font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
.topo h1 { font-size: 34px; text-transform: uppercase; }
.treino-cab h1, .ex-tit { font-size: 31px; line-height: 1.04; }
.frase { font: 400 15px/1.3 var(--texto); color: #C5C6CA; letter-spacing: 0; }
.caixa { border-radius: 4px; color: #fff; border-color: #5A5D64; }
.check, .ex, .serie, .cartao, .dia, .obs, .mini, .btn, .seta, .abas, .abas button, .contagem div, .resumo div { border-radius: 6px; }
.btn.pri, .btn.ver { background: #D6142F; border-color: #D6142F; color: #fff; }
.btn { font-family: var(--titulo); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.btn.leve { text-transform: none; font-family: var(--texto); letter-spacing: 0; }
.nav button, .nav button.on { text-transform: uppercase; font-family: var(--titulo); letter-spacing: .05em; font-size: 14px; font-weight: 500; }
.nav button.on { color: #fff; box-shadow: inset 0 2px 0 #D6142F; }
.check.ok, .ex.tudo, .serie.ok { background: #190A0D; border-color: #6F1020; }
.check.fora { background: #15161A; border-color: #4C4F56; }
.fora .caixa { background: #4C4F56; border-color: #4C4F56; }
.btn-fora { color: #9A9CA3; }
.fora .btn-fora, .ref.fora .sai { background: #4C4F56; color: #fff; }
.ref-acao .sai { color: #9A9CA3; }
.ref.ok .da { background: #190A0D; color: #FF6B7C; }
.dia.sel { background: #D6142F; border-color: #D6142F; }
.dia.sel small, .dia.sel b { color: #fff; }
.dia.hj small { color: #FF5A6C; }
.dia b { font-family: var(--titulo); font-weight: 500; }
.abas button.on { background: #D6142F; color: #fff; }
.timer.fim { background: #D6142F; color: #fff; }
.resumo b { color: #fff; }
.ritual { background: #030405; }
.ritual small { font: 400 16px var(--texto); }
.ritual b { font-size: 34px; font-weight: 500; text-transform: uppercase; }

.ceu { background: #07080B; height: min(62svh, 540px); min-height: 430px; }
.noir { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#chuva { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.ceu-topo { color: #BFC1C6; font-size: 13px; }
.ceu .seta { background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .15); }
.ceu-txt { top: calc(env(safe-area-inset-top) + 66px); text-shadow: 0 2px 16px #000; }
.ceu-txt h1 { font-size: clamp(38px, 11.4vw, 49px); line-height: 1; letter-spacing: 0; max-width: 92%; }
.ceu-pe { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 11px; display: flex; align-items: baseline; gap: 10px; color: #E9E8E4; text-shadow: 0 1px 9px #000; }
.ceu-pe b { font: 500 34px/1 var(--titulo); color: #fff; }
.ceu-pe span { font-size: 13px; color: #C0C1C6; }

.perfil { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: calc(env(safe-area-inset-top) + 20px) 4px 24px; }
.perfil small { font: 500 14px var(--titulo); letter-spacing: .28em; color: #E7223D; }
.perfil h1 { font-size: 40px; line-height: 1.02; margin: 0 0 6px; }
.linha-nome { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
.linha-nome input { height: 54px; border-radius: 6px; border: 1px solid var(--linha); background: #101217; color: var(--tinta); font: 500 18px var(--texto); padding: 0 14px; -webkit-user-select: text; user-select: text; }
.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.escolha { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #101217; border: 1px solid var(--linha); border-radius: 6px; padding: 12px 8px 11px; color: var(--tinta); font: 500 15px var(--titulo); text-transform: uppercase; letter-spacing: .06em; }
.escolha svg { height: 150px; }
.escolha path { fill: #08090C; stroke: #C9C8C4; stroke-width: 2; }
.escolha.on { border-color: #D6142F; background: #1E0A0E; }
.escolha.on path { stroke: #F01433; }
.erro { min-height: 18px; margin: 0; font-size: 13px; color: #FF6B7C; }

.moeda.bronze { background: conic-gradient(from 210deg, #17181B, #676A70, #25262A, #54575C, #111214, #73767B, #17181B); }
.moeda.bronze::before { background: radial-gradient(circle at 36% 28%, #666970, #2C2E32 58%, #131417); }
.moeda.bronze span { color: #C4C6CB; }
.moeda.prata { background: conic-gradient(from 210deg, #3F4349, #E7E9EC, #6E7379, #C5C8CC, #33363B, #F2F3F5, #3F4349); }
.moeda.prata::before { background: radial-gradient(circle at 36% 28%, #D9DCDF, #8A8E94 55%, #44474C); }
.moeda.prata span { color: #111316; }
.moeda.ouro { background: conic-gradient(from 210deg, #410610, #FF4A5D, #84101F, #E01A36, #38050D, #FF6372, #410610); }
.moeda.ouro::before { background: radial-gradient(circle at 36% 28%, #FF5B6C, #B20F27 55%, #4E0812); }
.moeda.ouro span { color: #16020A; }
.moeda.platina { background: conic-gradient(from 210deg, #020203, #4A1119, #080809, #C3102A, #030304, #5B5D62, #020203); }
.moeda.platina::before { background: radial-gradient(circle at 36% 28%, #2C2D31, #0B0B0D 60%, #020203); }
.moeda.platina span { color: #E7223D; }
.revela { background: #030405; }
.revela h2 { font-size: 44px; letter-spacing: 0; }
.revela small { color: #E7223D; }
.revela .clarao, .revela.prata .clarao, .revela.bronze .clarao { background: radial-gradient(circle, rgba(170, 176, 186, .24), transparent 62%); }
.revela.ouro .clarao, .revela.platina .clarao { background: radial-gradient(circle, rgba(222, 18, 48, .46), transparent 62%); }
.revela .moeda { box-shadow: 0 0 60px rgba(214, 20, 47, .28); }
.mes-grade i { border-radius: 4px; }
.mes-grade i.meio { background: #2C0B11; color: #FF7482; }
.mes-grade i.cheio { background: #D6142F; color: #fff; }
.contagem b { font: 500 25px/1.15 var(--titulo); }
.prog { font-family: var(--mono); }
.barra span, .barra.clara span { background: #D6142F; }

/* Transformação com as imagens da própria pessoa */
.split { position: absolute; inset: 0; --div: 50%; --brilho: .42; --linha: 1; background: #050608; }
.split-alter, .split-voce { position: absolute; inset: 0; overflow: hidden; }
.split img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.split-alter img { filter: contrast(1.12) saturate(.88) brightness(var(--brilho)); }
.split-voce { clip-path: inset(0 calc(100% - var(--div)) 0 0); }
.split-voce img { filter: grayscale(1) contrast(1.05) brightness(.72); }
.split-voce .vaga { right: 50%; }
.split-alter .vaga { left: 50%; }
.split-linha { position: absolute; top: 0; bottom: 0; left: var(--div); width: 2px; margin-left: -1px; background: #F01433; opacity: var(--linha); box-shadow: 0 0 18px 4px rgba(240, 20, 51, .72); }
.split-sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(5, 6, 8, .78) 0, transparent 34%, transparent 58%, rgba(5, 6, 8, .94) 100%); }
.vaga { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px; text-align: center; font-size: 13px; font-weight: 600; color: #D8D9DD; cursor: pointer; }
.vaga span { width: 44px; height: 44px; border: 1px solid #5A5D64; border-radius: 6px; display: grid; place-items: center; font: 400 26px var(--texto); }
.ceu-topo, .ceu-txt, .ceu-pe { pointer-events: none; }
.ceu-topo .seta { pointer-events: auto; }
#chuva { z-index: 2; }
.rodape { flex-wrap: wrap; }
.rodape-acoes { flex-wrap: wrap; justify-content: flex-end; }

/* ===== Alter: placar mecânico ===== */
:root {
  --papel: #0D0E11; --papel-2: #1C1E23; --cartao: #15171B; --tinta: #EFEBDF; --suave: #8E8F8D; --linha: #272A2F;
  --verde: #EFEBDF; --verde-claro: #1F2024; --ouro: #EFEBDF; --vermelho: #D8452E; --vermelho-claro: #271410; --r: 6px;
}
body { background: linear-gradient(160deg, #1D1F23, #0D0E11 46%, #08090B); background-attachment: fixed; }
.caixa { color: #111; }
.check.ok, .ex.tudo, .serie.ok { background: #1F2024; border-color: #5D5F60; }
.check.fora { background: #271410; border-color: #80301F; }
.fora .caixa { background: #D8452E; border-color: #D8452E; }
.fora .btn-fora, .ref.fora .sai { background: #D8452E; color: #fff; }
.btn-fora, .ref-acao .sai { color: #B7B3A8; }
.btn.pri, .btn.ver { background: #EFEBDF; border-color: #EFEBDF; color: #111; }
.nav button.on { color: #fff; box-shadow: inset 0 2px 0 #EFEBDF; }
.dia.sel, .abas button.on { background: #EFEBDF; border-color: #EFEBDF; color: #111; }
.dia.sel small, .dia.sel b { color: #111; }
.dia.hj small { color: #EFEBDF; }
.timer.fim { background: #EFEBDF; color: #111; }
.ref.ok .da { background: #1F2024; color: #EFEBDF; }
.barra span, .barra.clara span { background: #EFEBDF; }
.mes-grade i.meio { background: #26282D; color: #D9D5C8; }
.mes-grade i.cheio { background: #EFEBDF; color: #111; }
.revela { background: #08090B; }
.revela small { color: #D9D5C8; }
.perfil small { color: #D9D5C8; }
.escolha { min-height: 74px; justify-content: center; }
.escolha.on { border-color: #EFEBDF; background: #26282D; }

.placar-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: env(safe-area-inset-top); padding-top: 12px; color: #A5A6A5; font-size: 13px; font-weight: 500; }
.placar-tit { margin: -2px 0 0; font-size: 31px; line-height: 1.04; }
.chapa { position: relative; padding: 21px 15px 18px; border-radius: 5px; background: linear-gradient(145deg, #34373E, #17191D 54%, #2B2E33); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -2px 7px #000, 0 18px 40px rgba(0,0,0,.72); }
.parafuso { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #A0A4AA, #30333A 70%); box-shadow: 0 1px 1px #000; }
.parafuso::after { content: ""; position: absolute; left: 2px; right: 2px; top: 4.5px; height: 1px; background: #101114; transform: rotate(35deg); }
.nomes { display: flex; justify-content: space-between; gap: 12px; padding: 0 3px 8px; font: 500 15px var(--titulo); letter-spacing: .18em; text-transform: uppercase; color: #CFCBBE; }
.nomes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flaps { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; --h: min(26svh, 205px); perspective: 620px; }
.flap { position: relative; height: var(--h); border-radius: 6px; box-shadow: 0 5px 11px #000; color: #F1EDE1; font: 400 calc(var(--h) * .79)/var(--h) "Anton", Impact, sans-serif; text-align: center; transform-style: preserve-3d; }
.flap.fraco { color: #8D8D87; }
.meia { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.meia span { position: absolute; left: 0; right: 0; height: var(--h); }
.cima, .aba-cima { top: 0; border-radius: 6px 6px 0 0; background: linear-gradient(#2A2B2E, #1F2022); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transform-origin: 50% 100%; }
.baixo, .aba-baixo { bottom: 0; border-radius: 0 0 6px 6px; background: linear-gradient(#161719, #1B1C1F); box-shadow: inset 0 1px 0 #030304; transform-origin: 50% 0; }
.baixo span, .aba-baixo span { bottom: 0; }
.aba-cima { z-index: 2; animation: aba-cima 67ms linear forwards; }
.aba-baixo { z-index: 2; transform: rotateX(90deg); animation: aba-baixo 67ms 67ms linear forwards; }
@keyframes aba-cima { to { transform: rotateX(-90deg); filter: brightness(.55); } }
@keyframes aba-baixo { from { transform: rotateX(90deg); filter: brightness(1.35); } to { transform: rotateX(0); filter: none; } }
.pino { position: absolute; z-index: 3; top: 50%; width: 7px; height: 22px; margin-top: -11px; background: linear-gradient(#5A5D64, #1B1C20); }
.pino.e { left: 0; } .pino.d { right: 0; }
.flap.marcou { animation: pancada .25s .35s; }
@keyframes pancada { 40% { transform: translateY(2px) scale(.995); } }
.rodada { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 3px; border-top: 1px solid rgba(255,255,255,.08); font: 500 12px var(--mono); letter-spacing: .03em; color: #A5A6A5; }
.rounds { display: flex; gap: 4px; }
.rounds i { width: 22px; height: 7px; border-radius: 1px; background: #0A0B0D; box-shadow: inset 0 1px 1px #000, 0 1px 0 rgba(255,255,255,.1); }
.rounds i.v { background: #EFEBDF; }
.rounds i.d { background: #8E3423; }
.rounds i.agora { background: #6C6D6B; }
.mini-flaps { display: flex; gap: 3px; }
.mini-flaps b { width: 23px; height: 33px; border-radius: 3px; background: linear-gradient(#292A2D 0 49%, #060607 49% 51%, #17181A 51%); display: grid; place-items: center; font: 400 21px "Anton", Impact, sans-serif; color: #E9E5D9; box-shadow: 0 2px 3px #000; }
.frase { text-align: left; color: #CFCBBE; }

/* Treino em andamento, séries feitas, histórico e app só na vertical */
:root { --feito: #45B783; --feito-fundo: #11261C; --feito-borda: #2F7654; }
.serie.ok, .ex.tudo { background: var(--feito-fundo); border-color: var(--feito-borda); }
.serie.ok .caixa, .ex.tudo .caixa { background: var(--feito); border-color: var(--feito); color: #06140D; }
.pontos i.on { background: var(--feito); }
.barra.clara span { background: var(--feito); }
.fixo { bottom: calc(env(safe-area-inset-bottom) + 68px); z-index: 9; padding: 8px 16px; border-top: 1px solid var(--linha); background: #0D0E11; }
#app.sessao { padding-bottom: calc(env(safe-area-inset-bottom) + 270px); }
.prog-treino { display: flex; flex-direction: column; gap: 5px; }
.prog-txt { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: #BDBEBB; }
.volta-treino { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border: 1px solid var(--feito-borda); border-radius: 6px; background: var(--feito-fundo); color: var(--tinta); font-size: 13px; font-weight: 600; text-align: left; }
.volta-treino b { font: 500 13px var(--mono); }
.volta-treino span:last-child { flex: none; color: #8FE0B8; }
.janela > .cartao { width: 100%; max-width: 420px; }
.aviso-fim { color: #F09A84; }
.hist summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; min-height: 44px; }
.hist summary::-webkit-details-marker { display: none; }
.hist summary b { display: block; font-weight: 600; }
.hist summary small { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }
.hist-ex { padding: 8px 0 0; border-top: 1px solid var(--linha); font-size: 14px; }
.hist-ex b { display: block; font-weight: 600; }
.hist-ex span { color: var(--suave); font: 500 12px var(--mono); }
#giro { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #giro { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; gap: 6px; padding: 20px; text-align: center; background: #08090B; color: var(--tinta); font-size: 16px; }
  #giro b { font: 500 26px var(--titulo); text-transform: uppercase; }
}