/* Lost Relics — telas e painel (o tabuleiro é desenhado no canvas, em game.js).
   Direção: templo antigo na penumbra, luz dourada vinda do alto, brasas subindo.
   Ouro metálico fino sobre pedra escura; serifas clássicas; as joias são a única cor forte.
   Visual único (escuro), sem tema claro: o jogo é um mundo só. */
:root {
  --void: #0a0907;
  --ash: #17140f;
  --stone: #24201a;
  --stone-hi: #342e25;
  --gold: #d4a84b;
  --gold-hi: #f7e2a1;
  --gold-lo: #7c5a1c;
  --bone: #ece3cf;
  --bone-dim: #a89c84;
  --ember: #e0703a;
  --jade: #7fc79a;
  --f-logo: 'Uncial Antiqua', Georgia, serif;
  --f-display: 'Uncial Antiqua', Georgia, 'Times New Roman', serif;
  --f-event: 'Comico', 'Switzer', sans-serif;
  --f-body: 'Switzer', 'Segoe UI', system-ui, sans-serif;
  --tex-dark: none; --tex-slab: none; --tex-temple: none; --tex-sandstone: none;
  --gold-metal: linear-gradient(180deg, #fff3c4 0%, #f0cf7a 22%, #c7943a 48%, #8e6420 62%, #d9ae58 80%, #fbe7a8 100%);
  --hairline: 1px solid rgba(212,168,75,.55);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; max-width: 100vw; overflow-x: clip; margin: 0; background: var(--void); color: var(--bone); font-family: var(--f-body); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* texto em ouro metálico (títulos) */
.metal {
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(240,190,90,.28));
}
/* divisor ornamental: linha — losango — linha */
.orn { display: flex; align-items: center; gap: 10px; color: var(--gold); width: 100%; }
.orn::before, .orn::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-hi)); }
.orn::after { background: linear-gradient(270deg, transparent, var(--gold) 40%, var(--gold-hi)); }
.orn i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-hi); box-shadow: 0 0 10px rgba(247,226,161,.8); }

/* ---------- botões ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 54px; padding: 0 30px; border-radius: 4px; border: 0;
  font-family: var(--f-body); font-weight: 600; font-size: 19px; letter-spacing: .14em; text-transform: uppercase;
  color: #2a1a06; text-shadow: 0 1px 0 rgba(255,240,200,.55);
  background: var(--gold-metal);
  box-shadow: inset 0 0 0 1px rgba(255,245,210,.6), inset 0 0 0 3px rgba(90,60,15,.55), 0 0 0 1px #3a2708, 0 8px 22px rgba(0,0,0,.6), 0 0 26px rgba(212,168,75,.18);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  transition: transform .14s ease, filter .14s ease;
}
.btn:hover { filter: brightness(1.08) saturate(1.05); }
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.95); }
.btn.dark {
  color: var(--gold-hi); text-shadow: 0 0 10px rgba(240,190,90,.35), 0 1px 0 #000;
  background: var(--tex-dark), linear-gradient(180deg, var(--stone-hi), var(--stone));
  background-size: 180px, auto; background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(212,168,75,.7), inset 0 0 0 4px rgba(0,0,0,.45), inset 0 1px 0 5px rgba(255,230,170,.05), 0 6px 18px rgba(0,0,0,.6);
}
.btn.small { min-height: 44px; font-size: 14px; padding: 0 20px; letter-spacing: .14em; }
.btn .sub { display: block; font-family: var(--f-body); font-size: 13px; letter-spacing: .02em; font-weight: 600; font-style: italic; opacity: .85; text-transform: none; }
.btn.stack { flex-direction: column; gap: 0; line-height: 1.1; padding-block: 6px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--tex-dark), radial-gradient(circle at 40% 30%, var(--stone-hi), var(--void));
  background-size: 120px, auto; background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(212,168,75,.75), inset 0 0 0 4px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.6);
}
.icon-btn svg { width: 18px; height: 18px; fill: var(--gold-hi); filter: drop-shadow(0 0 4px rgba(240,190,90,.5)); }

/* ---------- telas ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 10; }

#screen-menu { justify-content: center; gap: 18px; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); text-align: center; }
.logo-wrap { margin: 0; width: min(640px, 100%); }
#logo { display: block; width: 100%; height: auto; max-width: 100%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(240,190,90,.18)); animation: logoIn 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes logoIn { from { opacity: 0; transform: scale(.86); filter: blur(6px) brightness(.4); } }
.tagline { margin: -8px 0 4px; font-family: var(--f-body); font-style: italic; font-size: 19px; color: var(--bone-dim); letter-spacing: .04em; }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; width: min(300px, 100%); margin-top: 6px; }
.menu-toggles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.menu-foot { font-family: var(--f-body); font-size: 11px; color: rgba(168,156,132,.6); letter-spacing: .35em; margin-top: 8px; }
.menu-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* mapa: medalhões hexagonais de joia subindo a pirâmide */
#screen-map { background: #0a0907; }
.map-head {
  position: absolute; top: 0; left: 0; z-index: 40 !important;
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 18px;
  background: linear-gradient(180deg, rgba(8,7,5,.95), rgba(8,7,5,.7) 70%, transparent);
}
.map-title { flex: 1; min-width: 0; text-align: center; display: grid; gap: 2px; padding-inline: 44px; }
.map-title small { font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: .45em; color: var(--gold); }
.map-title strong { font-family: var(--f-display); font-weight: 900; font-size: clamp(17px, 5.2vw, 30px); letter-spacing: .03em; line-height: 1.05; text-wrap: balance; }
.map-title em { font-family: var(--f-display); font-style: normal; font-weight: 700; font-size: clamp(12px, 3.4vw, 18px); letter-spacing: .08em; color: var(--gold-hi); text-shadow: 0 2px 0 #000, 0 0 14px rgba(240,190,90,.35); }
.map-stars { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--bone-dim); font-variant-numeric: tabular-nums; }
.map-stars img { width: 16px; height: 16px; }
.coin-pill {
  position: absolute; right: 12px; top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 3px; padding: 4px 6px 4px 4px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #2b251c, #120f0b); box-shadow: inset 0 0 0 1.5px rgba(212,168,75,.7), 0 4px 12px rgba(0,0,0,.6);
  font-family: var(--f-display); font-weight: 900; font-size: 14px; color: var(--gold-hi); font-variant-numeric: tabular-nums;
}
.coin-pill img { width: 26px; height: 26px; }
.coin-pill i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-left: 2px; background: var(--jade); color: #0d1f12; font-size: 14px; line-height: 1; }
#mapScroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; z-index: 1; -webkit-overflow-scrolling: touch; }
#mapScroll::-webkit-scrollbar { display: none; }
#mapInner { position: relative; background-repeat: no-repeat; overflow-x: clip; transition: background-position .2s ease-out; }
/* camada que desliza de lado junto com o desenho do mapa (câmera segue o caminho ao rolar) */
.map-pan { position: absolute; inset: 0; transition: transform .2s ease-out; pointer-events: none; }
.map-pan.fx { z-index: 5; }
.map-pan.nodes { z-index: 26; } /* acima da névoa (25), como as fases eram antes */
.map-pan.nodes .node { pointer-events: auto; }
#mapInner svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.node { position: absolute; width: 44px; height: 49px; margin: -25px 0 0 -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; transition: transform .15s ease; }
.node:not(.locked):hover { transform: scale(1.06); }
.node .hex-frame, .node .hex-gem { position: absolute; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.node .hex-frame { inset: 0; background: linear-gradient(180deg, #fff3c4, #d4a84b 40%, #7c5a1c 70%, #e6c06a); filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.node .hex-gem { inset: 4px 4px; }
.g-emerald { background: radial-gradient(circle at 35% 25%, #b9ffd6 0, #34d07a 22%, #0b7a3c 55%, #033a1b 100%); box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.g-night { background: radial-gradient(circle at 35% 25%, #6c86d8 0, #263f9a 30%, #0e1a4a 70%, #070b20 100%); }
.g-amethyst { background: radial-gradient(circle at 35% 25%, #d9a6ff 0, #7a35c4 32%, #351061 70%, #14052a 100%); }
.node .hex-gem::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 40%), linear-gradient(315deg, rgba(0,0,0,.35), transparent 50%); }
.node .num { position: relative; font-family: var(--f-display); font-weight: 900; font-size: 18px; color: #fff3c4; text-shadow: 0 2px 0 #3a2504, 0 0 10px rgba(0,0,0,.6); }
.node .lock { position: relative; width: 15px; height: 15px; fill: #e8c06a; filter: drop-shadow(0 2px 2px #000); }
.node .scarab { position: relative; width: 32px; height: 32px; filter: drop-shadow(0 3px 4px #000) saturate(.8); }
.node.locked { cursor: default; }
.node.locked .hex-frame { filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)) saturate(.6) brightness(.75); }
.node.boss { width: 54px; height: 60px; margin: -30px 0 0 -27px; }
.node.boss .num { font-size: 22px; }
.node.current { width: 60px; height: 67px; margin: -34px 0 0 -30px; }
.node.current .num { font-size: 34px; }
.node.current .hex-frame { animation: nodeGlow 2s ease-in-out infinite; }
@keyframes nodeGlow { 0%,100% { filter: drop-shadow(0 0 8px rgba(80,255,150,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.7)); } 50% { filter: drop-shadow(0 0 24px rgba(80,255,150,.85)) drop-shadow(0 6px 10px rgba(0,0,0,.7)); } }
.node .cur-label { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: .1em; color: #fff3c4; text-shadow: 0 2px 0 #000, 0 0 10px rgba(240,190,90,.6); white-space: nowrap; }
.node .cur-bar { position: absolute; bottom: -18px; left: 50%; width: 110px; height: 12px; transform: translateX(-50%); border-radius: 8px; background: #120f0b; box-shadow: inset 0 0 0 1.5px #d4a84b, 0 4px 10px rgba(0,0,0,.6); overflow: hidden; }
.node .cur-bar i { position: absolute; inset: 2px auto 2px 2px; border-radius: 6px; background: linear-gradient(90deg, #8e6420, #ffd36a, #fff3c4); box-shadow: 0 0 10px rgba(255,210,110,.8); }
.node .st { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); display: flex; gap: 1px; }
.node .st img { width: 13px; height: 13px; }
.map-end { position: absolute; left: 16px; right: 16px; text-align: center; color: var(--bone-dim); font-size: 16px; font-style: italic; }
.map-end strong { display: block; font-family: var(--f-display); font-style: normal; color: var(--gold); font-size: 15px; letter-spacing: .3em; margin-bottom: 6px; text-transform: uppercase; }

/* animações do mapa */
.map-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.map-fx i { position: absolute; display: block; transform: translate(-50%, -50%); border-radius: 50%; }
.fx-torch { width: var(--r); height: var(--r); mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,190,90,.55), rgba(255,120,30,.18) 45%, transparent 70%); animation: torch 1.1s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes torch { 0% { opacity: .65; transform: translate(-50%,-50%) scale(.92); } 40% { opacity: 1; } 60% { opacity: .8; transform: translate(-50%,-52%) scale(1.06); } 100% { opacity: .95; transform: translate(-50%,-50%) scale(1); } }
.fx-door { width: var(--r); height: var(--r); mix-blend-mode: screen; background: radial-gradient(circle, rgba(255,230,140,.75), rgba(255,200,90,.2) 40%, transparent 70%); animation: door 3s ease-in-out infinite; }
@keyframes door { 50% { opacity: .55; transform: translate(-50%,-50%) scale(1.15); } }
.fx-gem { width: 14px; height: 14px; mix-blend-mode: screen; background: radial-gradient(circle, #fff 0, rgba(255,255,255,.7) 20%, transparent 70%); animation: gemTwinkle 4s ease-in-out infinite; animation-delay: var(--d); opacity: 0; }
.fx-gem::before, .fx-gem::after { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: translate(-50%,-50%); }
.fx-gem::after { transform: translate(-50%,-50%) rotate(90deg); }
@keyframes gemTwinkle { 0%, 70%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(0deg); } 80% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(45deg); } 90% { opacity: .4; } }
.fx-disc { width: var(--r); height: calc(var(--r) * .42); border-radius: 50%; mix-blend-mode: screen; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,215,120,.35) 25%, transparent 30% 70%, rgba(255,215,120,.35) 75%, transparent 80%); animation: disc 6s linear infinite; }
@keyframes disc { to { filter: hue-rotate(0deg); background-position: 0 0; transform: translate(-50%,-50%) rotate(360deg) scaleY(1); } }
.fx-fly { width: 5px; height: 5px; background: radial-gradient(circle, #fff6c0, rgba(255,210,90,.6) 40%, transparent 70%); box-shadow: 0 0 8px 2px rgba(255,210,90,.6); animation: fly var(--t) ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes fly { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: 1; } 50% { transform: translate(14px,-60px); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px,-130px); } }

/* moedas, loja e vantagens */img.coin { width: 1.1em; height: 1.1em; vertical-align: -0.18em; margin-right: .2em; }
.final-score img.coin { width: 1em; height: 1em; }
.wallet { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--f-display); font-weight: 900; font-size: 30px; color: var(--gold-hi); }
.wallet img.coin { width: 42px; height: 42px; }
.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15)); box-shadow: inset 0 0 0 1px rgba(212,168,75,.25); }
.shop-item > img { width: 54px; height: 54px; }
.shop-item b { display: block; font-family: var(--f-display); font-size: 15px; color: var(--bone); }
.shop-item span { display: block; font-size: 15px; line-height: 1.25; color: var(--bone-dim); }
.shop-item small { display: block; margin-top: 2px; font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .1em; color: var(--jade); }
.shop-item .buy { min-width: 92px; padding: 0 12px; font-size: 15px; letter-spacing: .04em; }
.shop-item .buy:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.shop-note { font-size: 15px !important; color: var(--bone-dim) !important; font-style: italic; }
.boosts { display: grid; gap: 8px; }
.boost-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.boost { position: relative; display: grid; justify-items: center; gap: 2px; width: 96px; padding: 8px 6px; border: 0; border-radius: 6px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(212,168,75,.35); color: var(--bone-dim); }
.boost img { width: 40px; height: 40px; }
.boost span { font-family: var(--f-body); font-weight: 600; font-size: 10px; letter-spacing: .04em; line-height: 1.15; }
.boost b { position: absolute; top: 4px; right: 6px; font-family: var(--f-display); font-size: 11px; color: var(--gold-hi); }
.boost.on { background: rgba(127,199,154,.18); box-shadow: inset 0 0 0 2px var(--jade), 0 0 14px rgba(127,199,154,.35); color: var(--bone); }
.link-btn { align-self: center; border: 0; background: none; font-family: var(--f-body); font-size: 12px; letter-spacing: .12em; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; padding: 6px; }
.tool-btn { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 4px; padding: 6px 14px 6px 8px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #2b251c, #120f0b); box-shadow: inset 0 0 0 1.5px rgba(212,168,75,.75), 0 6px 16px rgba(0,0,0,.7); font-family: var(--f-display); font-weight: 900; color: var(--gold-hi); }
.tool-btn img { width: 40px; height: 40px; }
.tool-btn.on { box-shadow: inset 0 0 0 2px var(--jade), 0 0 22px rgba(127,199,154,.6); animation: nodeGlow 1.2s ease-in-out infinite; }
/* martelo pintado (15/10): botão de pedra redondo + martelo + selo com o número; armado = martelo aceso pulsando */
.tool-btn.painted { width: 74px; height: 74px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; background: var(--h-btn) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 5px 8px rgba(0,0,0,.7)); transition: transform .12s; }
.tool-btn.painted:active { transform: translateX(-50%) scale(.92); }
.tool-btn.painted #hammerIc { width: 64%; height: 64%; object-fit: contain; transform: rotate(-8deg); }
.tool-btn.painted.on { box-shadow: none; animation: hammerArm 1s ease-in-out infinite; }
.tool-btn.painted.on #hammerIc { width: 84%; height: 84%; }
.tool-btn.painted #hammerCount { position: absolute; right: -16px; bottom: -4px; width: 40px; height: 27px; padding: 5px 9px; box-sizing: border-box; background: var(--h-badge) center / 100% 100% no-repeat; }
.tool-btn.painted #hammerCount img { height: 100%; width: auto; }
@keyframes hammerArm { 0%, 100% { filter: drop-shadow(0 5px 8px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(255,190,70,.5)); } 50% { filter: drop-shadow(0 5px 8px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,200,80,.95)); } }
/* ---------- painel do jogo ---------- */
#hud {
  position: fixed; left: 0; right: 0; top: 0; z-index: 5;
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 16px;
  background: linear-gradient(180deg, rgba(6,5,4,.94) 0%, rgba(6,5,4,.78) 70%, transparent);
  max-width: 660px; margin: 0 auto;
}
#hud::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,75,.6), transparent); }
.lbl { display: block; font-family: var(--f-body); font-size: 9px; letter-spacing: .3em; color: var(--bone-dim); font-weight: 700; }
.hud-moves {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--tex-dark), radial-gradient(circle at 40% 30%, #2e2820, #0c0a07 75%);
  background-size: 140px, auto; background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px rgba(0,0,0,.6), inset 0 0 0 6px rgba(212,168,75,.35), 0 0 22px rgba(240,190,90,.15), 0 6px 16px rgba(0,0,0,.7);
}
.hud-moves .lbl { font-size: 7.5px; letter-spacing: .18em; margin-bottom: 1px; }
#moves { font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
#moves.low { animation: throb .9s ease-in-out infinite; }
#moves.low.metal { background: linear-gradient(180deg, #ffd2b0, var(--ember) 60%, #8a2a0c); -webkit-background-clip: text; background-clip: text; }
@keyframes throb { 50% { transform: scale(1.14); } }
.hud-goals { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-width: 0; }
.chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 62px; padding-top: 2px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(18,15,11,.92), rgba(30,26,20,.92));
  box-shadow: inset 0 0 0 1px rgba(212,168,75,.45), inset 0 3px 8px rgba(0,0,0,.6);
}
.chip img { width: 36px; height: 36px; }
.chip b { font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1; margin-top: 1px; color: var(--bone); font-variant-numeric: tabular-nums; }
.chip.done { box-shadow: inset 0 0 0 1px var(--jade), inset 0 3px 8px rgba(0,0,0,.6), 0 0 12px rgba(127,199,154,.35); }
.chip.done b { color: var(--jade); }
.chip.bump { animation: bump .3s ease; }
@keyframes bump { 50% { transform: scale(1.15); } }
.hud-score { text-align: right; min-width: 100px; }
#score { display: block; font-family: var(--f-display); font-size: 23px; font-weight: 700; color: var(--bone); font-variant-numeric: tabular-nums; line-height: 1.15; }
.starbar { position: relative; height: 8px; margin-top: 7px; border-radius: 4px; background: rgba(0,0,0,.7); box-shadow: inset 0 0 0 1px rgba(212,168,75,.45); }
#starfill { position: absolute; inset: 1px auto 1px 1px; width: 0; border-radius: 4px; background: linear-gradient(90deg, #7c5a1c, var(--gold), var(--gold-hi)); box-shadow: 0 0 10px rgba(240,190,90,.6); transition: width .35s ease; }
.starbar img { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; transition: transform .25s; }
.starbar img.on { transform: scale(1.3); filter: drop-shadow(0 0 6px rgba(247,226,161,.9)); }

/* ---------- janelas ---------- */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(4,3,2,.55), rgba(4,3,2,.85)); }
.card {
  position: relative; width: min(410px, 100%); max-height: calc(100% - 16px); overflow-y: auto; scrollbar-width: none;
  padding: 34px 26px 26px; text-align: center;
  background: var(--tex-dark), linear-gradient(180deg, #221d16, #110e0a);
  background-size: 220px, auto; background-blend-mode: multiply, normal;
  box-shadow: inset 0 0 0 1px rgba(212,168,75,.8), inset 0 0 0 5px rgba(0,0,0,.55), inset 0 0 0 6px rgba(212,168,75,.3), inset 0 0 60px rgba(0,0,0,.7), 0 30px 80px rgba(0,0,0,.8), 0 0 60px rgba(212,168,75,.08);
  animation: rise .34s cubic-bezier(.2,1.1,.3,1);
  display: flex; flex-direction: column; gap: 16px;
}
.card::before {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  background: var(--corner-tl) top left / 46px no-repeat, var(--corner-tr) top right / 46px no-repeat, var(--corner-bl) bottom left / 46px no-repeat, var(--corner-br) bottom right / 46px no-repeat;
}
@keyframes rise { from { transform: translateY(18px) scale(.97); opacity: 0; } }
.card h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: .06em; text-wrap: balance; line-height: 1.1; }
.card .eyebrow { font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .45em; color: var(--bone-dim); margin-bottom: -8px; }
.card .boss-tag { align-self: center; font-family: var(--f-body); font-weight: 600; font-size: 12px; letter-spacing: .35em; color: var(--ember); text-shadow: 0 0 12px rgba(224,112,58,.6); }
.card p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.4; color: var(--bone); }
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal-row { display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 14px 8px 10px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.15)); box-shadow: inset 0 0 0 1px rgba(212,168,75,.22); font-size: 19px; font-weight: 600; }
.goal-row img { width: 44px; height: 44px; flex: none; }
.goal-row b { margin-left: auto; font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.tut { display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; background: rgba(212,168,75,.06); box-shadow: inset 0 0 0 1px rgba(212,168,75,.3); }
.tut img { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 0 10px rgba(240,190,90,.3)); }
.tut p { font-size: 17px; font-style: italic; color: var(--bone); }
.moves-line { font-family: var(--f-body); font-weight: 600; font-size: 13px; letter-spacing: .3em; color: var(--bone-dim); }
.moves-line b { font-size: 24px; letter-spacing: .02em; color: var(--gold-hi); margin-left: 6px; }
.btns { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.stars-big { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 92px; }
.stars-big img { width: 66px; height: 66px; opacity: .18; transform: scale(.7); filter: grayscale(1); transition: transform .4s cubic-bezier(.2,1.6,.4,1), opacity .2s, filter .3s; }
.stars-big img:nth-child(2) { width: 84px; height: 84px; }
.stars-big img.on { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 16px rgba(247,226,161,.75)); }
/* estrelas pintadas (Solar com gema): a arte já traz os raios, então a caixa é maior e elas se encostam */
.stars-big.painted { gap: 0; height: 112px; margin: -6px 0 -4px; }
.stars-big.painted img { width: 92px; height: 92px; margin: 0 -10px; filter: grayscale(1) brightness(.5); }
.stars-big.painted img:nth-child(2) { width: 116px; height: 116px; }
.stars-big.painted img.on { filter: none; }
/* "FASE CONCLUÍDA!" pintado no lugar do título em texto */
.win-word { margin: 0; line-height: 0; }
.win-word img { width: 100%; max-width: 330px; height: auto; }
/* com a moldura pintada, o título sobe e brilha em cima da placa lisa do topo */
.ui-kit .win-word { margin: calc(var(--cw) * -.1945 - 6px) calc(var(--cw) * -.05) 0; }
.ui-kit .win-word img { width: calc(var(--cw) * .62); max-width: none; }
.stars-big.painted.slots img:not(.on) { filter: none; opacity: 1; transform: scale(.86); }
.final-score { font-family: var(--f-display); font-size: 42px; font-weight: 900; font-variant-numeric: tabular-nums; }
.best { font-style: italic; font-size: 17px; color: var(--bone-dim); }
.best.new { color: var(--gold-hi); text-shadow: 0 0 12px rgba(247,226,161,.5); }
.toggle-row { display: flex; gap: 10px; } .toggle-row > * { flex: 1; }

/* cortina circular entre telas */
#wipe { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(circle at 50% 45%, #2a1f0e 0%, #0d0a06 55%, #050403 100%); clip-path: circle(0px at 50% 50%); }
#wipe::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(247,226,161,.18), transparent 40%); }

/* textos que aparecem sobre o tabuleiro */
.praise {
  position: fixed; left: 50%; top: 34%; z-index: 20; pointer-events: none; white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; font-size: clamp(38px, 10vw, 62px); letter-spacing: .08em;
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 22px rgba(247,200,100,.6));
  animation: praise 1.25s cubic-bezier(.2,.9,.3,1) forwards;
}
.praise.banner { font-size: clamp(28px, 7.5vw, 46px); }
.praise.info { font-family: var(--f-body); font-style: italic; font-weight: 600; font-size: 24px; letter-spacing: .02em; background: none; color: var(--bone); filter: drop-shadow(0 2px 6px #000); }
@keyframes praise { 0% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; letter-spacing: .4em; } 20% { transform: translate(-50%,-50%) scale(1); opacity: 1; letter-spacing: .08em; } 75% { opacity: 1; } 100% { transform: translate(-50%,-58%) scale(.98); opacity: 0; } }

/* anúncio da fase: entra gigante e desfocado, bate, segura e some subindo */
.announce { position: fixed; left: 50%; top: 42%; z-index: 25; pointer-events: none; text-align: center; transform: translate(-50%,-50%); max-width: 100vw; animation: annIn 2.2s cubic-bezier(.2,.9,.25,1) forwards; }
.announce span { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(54px, 15vw, 110px); letter-spacing: .06em; line-height: 1; white-space: nowrap; filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 30px rgba(255,190,90,.75)) drop-shadow(0 0 70px rgba(224,112,58,.45)); }
.announce small { display: block; margin-top: 10px; font-family: var(--f-display); font-size: clamp(14px, 3.6vw, 20px); letter-spacing: .4em; color: var(--ember); text-shadow: 0 0 14px rgba(224,112,58,.8), 0 2px 0 #000; }
.announce::before { content: ''; position: absolute; left: 50%; top: 50%; width: 100vw; height: 2px; transform: translate(-50%,-50%); background: linear-gradient(90deg, transparent, rgba(247,226,161,.9), transparent); box-shadow: 0 0 20px rgba(247,226,161,.8); animation: annLine 2.2s ease forwards; z-index: -1; }
@keyframes annIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); filter: blur(14px); } 14% { opacity: 1; transform: translate(-50%,-50%) scale(.94); filter: blur(0); } 22% { transform: translate(-50%,-50%) scale(1.04); } 30% { transform: translate(-50%,-50%) scale(1); } 78% { opacity: 1; transform: translate(-50%,-50%) scale(1.02); } 100% { opacity: 0; transform: translate(-50%,-68%) scale(1.06); } }
@keyframes annLine { 0%,10% { opacity: 0; width: 0; } 22% { opacity: 1; width: 100vw; } 75% { opacity: .7; } 100% { opacity: 0; } }

/* anúncio simulado (ads.js) */
.mock-ad { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.88); padding: 16px; }
.mock-card { width: min(360px, 100%); background: #f4f1ea; color: #222; border-radius: 14px; padding: 18px; text-align: center; font-family: system-ui, sans-serif; display: flex; flex-direction: column; gap: 12px; }
.mock-tag { align-self: flex-start; font-size: 11px; font-weight: 700; background: #222; color: #fff; padding: 2px 6px; border-radius: 4px; }
.mock-slot { height: 180px; display: grid; place-items: center; border: 2px dashed #aaa; border-radius: 10px; font-size: 18px; }
.mock-close { min-height: 44px; border: 0; border-radius: 10px; background: #222; color: #fff; font-weight: 700; }

.loading { position: fixed; inset: 0; display: grid; place-items: center; z-index: 60; background: var(--void); color: var(--gold); font-family: var(--f-display); font-size: 14px; letter-spacing: .4em; }

@media (max-width: 400px) {
  #hud { gap: 7px; padding-inline: 8px; }
  .hud-moves { width: 64px; height: 64px; } #moves { font-size: 26px; }
  .chip { width: 50px; height: 56px; } .chip img { width: 30px; height: 30px; } .chip b { font-size: 14px; }
  .hud-score { min-width: 80px; } #score { font-size: 19px; }
  .card { padding: 30px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ===== kit de interface pintado (pedra, raízes, runas turquesa) — vale quando o kit carrega ===== */
/* principal v2 (Gemini, 14/10): ouro + runas. A ponta com o nó de raiz foi espelhada pra direita (botão simétrico,
   texto centralizado de verdade). 3 fatias; o texto fica só no meio liso */
/* tamanhos acompanham a largura da janela (--cw): no iPhone estreito as pontas encolhem e o texto nunca quebra linha */
.ui-kit .btn {
  --be: clamp(40px, calc(var(--cw, 440px) * .135), 60px); /* largura de cada ponta com nó de raiz */
  clip-path: none; border-radius: 0; min-height: 64px; padding: 0 calc(var(--be) - 4px); border: 0; white-space: nowrap;
  background: none; border-image: var(--ui-btn) 0 34.1% 0 34.1% fill / 0 var(--be) 0 var(--be) stretch; box-shadow: none;
  font-size: clamp(12px, calc(var(--cw, 440px) * .037), 16px); letter-spacing: .06em;
  color: #3b2a12; text-shadow: 0 1px 0 rgba(255,245,220,.55), 0 -1px 0 rgba(0,0,0,.25);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.6));
}
.ui-kit .btn.stack { min-height: 80px; line-height: 1.15; }
.ui-kit .btn .sub { font-size: clamp(10.5px, calc(var(--cw, 440px) * .03), 12.5px); opacity: 1; color: #2b1d0a; letter-spacing: 0; }
/* botões da janela avançam um pouco sobre a borda interna da moldura: mais espaço pro texto */
.ui-kit .card .btns { margin-inline: calc(var(--cw) * -.06); }
.ui-kit .btn:hover { filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)) brightness(1.08); }
.ui-kit .btn:active { transform: translateY(2px) scale(.98); filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)) brightness(.95); }
/* secundário v2 (Gemini, 14/10): pedra com musgo, centro liso. 3 fatias: pontas com raízes ficam intactas, só o meio liso estica */
.ui-kit .btn.dark {
  background: none; border: 0; color: #f7e2a1;
  --be2: clamp(34px, calc(var(--cw, 440px) * .105), 46px);
  border-image: var(--ui-btn2) 0 24% 0 24% fill / 0 var(--be2) 0 var(--be2) stretch;
  text-shadow: 0 0 10px rgba(63,216,204,.35), 0 2px 0 #000, 0 0 4px #000; min-height: 56px; padding: 0 var(--be2);
}
.ui-kit .btn.small { min-height: 48px; }
/* moldura pintada v2 (Gemini, 14/10, vertical, 687x1024): 9 fatias = cantos intactos, laterais repetem/esticam.
   Fatias = bordas da abertura na arte (x 185..503, y 212..848). Interior já é pedra escura, sem painel por trás. */
.ui-kit .card {
  background: none; box-shadow: none; border: 0;
  --cw: min(440px, calc(100vw - 32px)); width: var(--cw); max-width: 100%;
  border-image-source: var(--ui-frame); border-image-slice: 20.7% 26.8% 17.2% 27% fill; border-image-repeat: stretch round;
  border-image-width: calc(var(--cw) * .229) calc(var(--cw) * .2) calc(var(--cw) * .19) calc(var(--cw) * .2);
  padding: calc(var(--cw) * .229 + 6px) calc(var(--cw) * .18) calc(var(--cw) * .19 + 4px); max-height: none; overflow: visible; filter: drop-shadow(0 24px 40px rgba(0,0,0,.75));
}
.ui-kit .card::before { display: none; }
.ui-kit .modal { display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding-block: 28px; }
.ui-kit .modal .card { margin: auto 0; flex: none; }
.ui-kit .btn:focus-visible { outline: none; filter: drop-shadow(0 0 12px rgba(63,216,204,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.ui-kit .shop-item { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; padding: 10px; }
.ui-kit .shop-item > img { width: 40px; height: 40px; grid-row: span 2; }
.ui-kit .shop-item .buy { grid-column: 2; justify-self: start; min-height: 44px; min-width: 120px; }
.ui-kit .shop-item b { font-size: 16px; }
.ui-kit .card > * { position: relative; }
.ui-kit .hud-moves { background: var(--ui-medal) center / 100% 100% no-repeat; box-shadow: none; width: 84px; height: 84px; }
.ui-kit .hud-moves .lbl { color: #2b2214; text-shadow: 0 1px 0 rgba(255,240,210,.5); }
.ui-kit #moves { -webkit-text-fill-color: #3b2a12; background: none; filter: none; text-shadow: 0 1px 0 rgba(255,240,210,.6); }
.ui-kit .chip { background: var(--ui-tile) center / 100% 100% no-repeat; box-shadow: none; }
.ui-kit .chip b { color: #2b2214; text-shadow: 0 1px 0 rgba(255,240,210,.6); }
.ui-kit .chip.done { filter: drop-shadow(0 0 8px rgba(63,216,204,.8)); }
.ui-kit .chip.done b { color: #0f6f6a; }
.ui-kit .starbar { height: 18px; background: var(--ui-bar) center / 100% 100% no-repeat; box-shadow: none; }
.ui-kit #starfill { inset: 5px auto 5px 9px; max-width: calc(100% - 18px); background: linear-gradient(90deg, #0f6f6a, #3fd8cc, #c9fff8); box-shadow: 0 0 10px rgba(63,216,204,.8); }
.ui-kit .icon-btn { background: var(--ui-round) center / 100% 100% no-repeat; box-shadow: none; width: 48px; height: 48px; }
.ui-kit .icon-btn svg { fill: #3b2a12; filter: none; }
.ui-kit .orn { height: 26px; background: var(--ui-divider) center / auto 100% no-repeat; }
.ui-kit .orn::before, .ui-kit .orn::after, .ui-kit .orn i { display: none; }
.ui-kit .goal-row, .ui-kit .tut { background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(63,216,204,.25); }
/* ===== placar v2 pintado (Gemini, 14/10): sem rótulos escritos, número no espaço liso reservado ===== */
.ui-kit #hud .lbl { display: none; }
/* números em dígitos Solar pintados (a arte tem folga de brilho, por isso a margem negativa) */
.digits { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.digits img { height: 100%; width: auto; margin: 0 -.06em; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 4px rgba(255,190,80,.45)); }
/* movimentos: medalhão de runas, número no centro escuro */
.ui-kit .hud-moves { width: 86px; height: 86px; background: var(--ui-medal) center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.ui-kit #moves.digits { height: 40px; font-size: 40px; -webkit-text-fill-color: initial; text-shadow: none; }
/* objetivo: joia no nicho escuro de cima, número na faixa clara de baixo */
.ui-kit .chip { width: 60px; height: 64px; padding: 0; display: block; background: var(--ui-tile) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.ui-kit .chip img { position: absolute; left: 50%; top: 11%; width: 30px; height: 30px; margin-left: -15px; }
.ui-kit .chip b { position: absolute; left: 12%; right: 12%; top: 58%; height: 27%; display: grid; place-items: center; margin: 0; font-family: var(--f-body); font-weight: 800; font-size: 14px; color: #3b2a12; text-shadow: 0 1px 0 rgba(255,245,220,.5); }
.ui-kit .chip.done b { color: #0f6f6a; }
/* moedas + barra de estrelas */
.ui-kit .hud-score { width: clamp(124px, 34vw, 190px); min-width: 0; text-align: left; }
.ui-kit #score.digits { display: flex; justify-content: flex-start; width: 100%; aspect-ratio: 381 / 145; height: auto; padding: 0 8% 0 36%; box-sizing: border-box; background: var(--ui-coinbar) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.ui-kit #score.digits img { height: 58%; }
/* moedas ganhas na vitória: a mesma placa, maior */
.final-score.painted { display: flex; align-items: center; justify-content: flex-start; width: min(250px, 72%); margin: 0 auto; aspect-ratio: 381 / 145; padding: 0 8% 0 36%; box-sizing: border-box; background: var(--ui-coinbar) center / 100% 100% no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.final-score.painted .digits { height: 56%; }
.ui-kit .starbar { height: auto; aspect-ratio: 593 / 135; margin-top: 2px; border-radius: 0; background: none; box-shadow: none; }
/* canal escuro por trás, ouro líquido no meio, arte da barra (com o canal vazado) por cima */
.ui-kit .starbar::before { content: ''; position: absolute; left: 12%; right: 12%; top: 32.6%; bottom: 31.1%; background: #0b0f14; z-index: 0; }
.ui-kit #starfill { inset: 32.6% auto 31.1% 12.1%; max-width: none; border-radius: 0; z-index: 1; background: var(--ui-barfill) left center / auto 100% repeat-x; box-shadow: 0 0 10px rgba(255,200,80,.6); }
.ui-kit .starbar::after { content: ''; position: absolute; inset: 0; background: var(--ui-bar) center / 100% 100% no-repeat; z-index: 2; pointer-events: none; }
.ui-kit .starbar img { z-index: 3; width: 34%; height: auto; aspect-ratio: 1; top: 50%; margin: 0; transform: translate(-50%, -50%) scale(.55); opacity: 0; }
.ui-kit .starbar img.on { opacity: 1; transform: translate(-50%, -50%) scale(.62); filter: none; }
.ui-kit .boost.on { background: rgba(63,216,204,.16); box-shadow: inset 0 0 0 2px #3fd8cc, 0 0 14px rgba(63,216,204,.4); }
.ui-kit .coin-pill i, .ui-kit .shop-item small { background: none; }
.ui-kit .coin-pill i { background: #3fd8cc; color: #062a28; }
.ui-kit .shop-item small { color: #3fd8cc; }
/* medalhões pintados das fases (Gemini) */
.node .node-img { position: absolute; inset: -12% -10%; width: 120%; height: 124%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.75)); }
.node.current .node-img { inset: -22% -22%; width: 144%; height: 144%; animation: nodeBreath 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)); }
@keyframes nodeBreath { 50% { transform: scale(1.05); } }
/* aura solar pintada atrás da fase atual: duas camadas girando em sentidos opostos = raios tremulando */
.node .node-aura { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; max-width: none; pointer-events: none; animation: auraSpin 14s linear infinite, auraPulse 1.8s ease-in-out infinite; }
.node .node-aura.b { width: 170px; height: 170px; margin: -85px 0 0 -85px; animation: auraSpin 9s linear infinite reverse, auraPulse 2.6s ease-in-out -1.3s infinite; }
@keyframes auraSpin { to { rotate: 360deg; } }
@keyframes auraPulse { 0%, 100% { scale: .9; opacity: .55; } 50% { scale: 1.06; opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .node .node-aura { animation: none; } }
/* anúncio FASE N pintado: --L = altura da letra; as imagens têm folga de brilho em volta, por isso os fatores */
/* 16/10: menor (cabia "FASE 9", mas "FASE 26" passava da tela e cortava o número) e com a largura do próprio conteúdo, centrada */
.announce:has(.ann-art) { width: max-content; max-width: 96vw; }
.announce .ann-art { --L: min(42px, 8vw); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 4px 0 rgba(40,18,0,.7)) drop-shadow(0 0 30px rgba(255,190,90,.6)); }
.announce .ann-fase { height: calc(var(--L) * 2.33); width: auto; margin-right: calc(var(--L) * .1); }
.announce .ann-num { height: calc(var(--L) * 2); width: auto; margin: 0 calc(var(--L) * -.15); transform: translateY(calc(var(--L) * .14)); }
/* elogios pintados (Solar): cada nível maior que o anterior */
.praise.art { background: none; -webkit-text-stroke: 0; color: inherit; line-height: 0; filter: drop-shadow(0 3px 0 rgba(40,18,0,.55)) drop-shadow(0 0 24px rgba(255,180,70,.45)); }
.praise.art img { display: block; height: auto; }
.praise.art.p1 img { width: min(250px, 62vw); }
.praise.art.p2 img { width: min(310px, 78vw); }
.praise.art.p3 img { width: min(370px, 92vw); }
.praise.art.rush img { width: min(340px, 86vw); }
/* palavra FASE pintada (estilo Solar) em cima da fase atual — não usada desde 14/10 (ele pediu sem rótulo) */
.node .cur-word { position: absolute; left: 50%; top: -78px; width: 108px; margin-left: -54px; max-width: none; pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 2px rgba(40,18,0,.85)) drop-shadow(0 0 6px rgba(0,0,0,.55)); }
.node:has(.node-img) .num { font-family: var(--f-display); color: #fff3c4; text-shadow: 0 2px 0 #3a2504, 0 0 8px rgba(0,0,0,.9), 0 0 2px #000; z-index: 1; }
/* número pintado: centrado na pedra (absoluto, não depende da linha de texto) */
/* ocupa a largura toda e centraliza por flex: no Safari/Instagram o translate(-50%) usava a largura original da imagem do dígito e jogava o número pra direita */
.node .num.digits { position: absolute; left: 0; right: 0; top: 50%; height: 44%; transform: translateY(-50%); justify-content: center; z-index: 1; }
.node .num.digits img { filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(0,0,0,.8)); }
.node.current:has(.node-img) .num { font-size: 30px; }
.node.locked .node-img { filter: drop-shadow(0 5px 6px rgba(0,0,0,.75)) brightness(.85); }
.node .st img { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px #000); }
.node .cur-label { font-family: var(--f-display); font-size: 18px; top: -66px; z-index: 2; text-shadow: 0 2px 0 #3a2504, 0 0 6px #000, 0 0 12px #000; }
.node .cur-bar { bottom: -34px; }

/* som e música como ícones */
.icon-btn.toggle { width: 60px; height: 60px; }
.icon-btn.toggle svg { width: 30px; height: 30px; margin-left: -1px; fill: #23160a; stroke: #23160a; filter: drop-shadow(0 1px 0 rgba(255,240,210,.7)) drop-shadow(0 0 3px rgba(255,240,210,.5)); }
.icon-btn.toggle .slash { display: none; stroke: #b3261e; }
.icon-btn.toggle.off svg { opacity: .55; }
.icon-btn.toggle.off .slash { display: block; opacity: 1; }
.icon-btn.toggle.off .wave { display: none; }
.toggle-row.icons { justify-content: center; gap: 18px; }
.toggle-row.icons > * { flex: none; }
.menu-toggles { align-items: center; gap: 14px; }

/* centro liso nos botões redondos: esconde o glifo entalhado da arte pra o ícone ficar limpo */
.ui-kit .icon-btn { position: relative; }
.ui-kit .icon-btn::before { content: ''; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 40% 32%, #ddd2b6, #b3a685 62%, #8a7e63); box-shadow: inset 0 2px 5px rgba(0,0,0,.5), inset 0 -1px 2px rgba(255,245,220,.35), 0 1px 0 rgba(255,245,220,.35); }
.ui-kit .icon-btn svg { position: relative; z-index: 1; }
.ui-kit .icon-btn.toggle.off::before { background: radial-gradient(circle at 40% 32%, #b9ae95, #8f8469 62%, #6b614c); }

/* palavras de evento (Ótimo, Incrível, Lendário, Corrida do Tesouro, Fase N) */
.praise, .announce span { font-family: var(--f-event); font-weight: 400; letter-spacing: .03em; text-transform: none; }
.praise { font-size: clamp(46px, 12vw, 76px); background: linear-gradient(180deg,#fff6d0 0%,#ffd76a 30%,#e0a23a 55%,#9a5f12 72%,#ffd98a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #3a2208; paint-order: stroke fill; filter: drop-shadow(0 4px 0 #2a1604) drop-shadow(0 0 18px rgba(255,200,90,.6)); }
.praise.banner { font-size: clamp(28px, 7.4vw, 48px); max-width: 94vw; white-space: normal; text-align: center; line-height: 1.05; }
.announce span { font-size: clamp(64px, 17vw, 120px); -webkit-text-stroke: 2px #3a2208; }
html.ev-anton { --f-event: 'Anton', 'Switzer', sans-serif; }
html.ev-anton .praise, html.ev-anton .announce span { letter-spacing: .04em; text-transform: uppercase; }

/* tela de carregamento: logo com faixa de luz passando + barra de ouro com brilho turquesa */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-inline: 16px; background: radial-gradient(ellipse at 50% 45%, #1d1912, #070605 70%); transition: opacity .6s ease; }
.loading.done { opacity: 0; pointer-events: none; }
.ld-logo { position: relative; width: min(460px, 86vw); -webkit-mask: url('assets/logo.png') center / contain no-repeat; mask: url('assets/logo.png') center / contain no-repeat; }
.ld-logo img { display: block; width: 100%; height: auto; animation: ldIn 1.4s cubic-bezier(.2,.8,.2,1) both; }
.ld-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,240,190,.55) 48%, rgba(127,255,240,.35) 52%, transparent 65%); background-size: 250% 100%; animation: ldShine 2.2s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes ldIn { from { opacity: 0; transform: scale(.9); filter: blur(6px) brightness(.4); } }
@keyframes ldShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ld-bar { width: min(260px, 60vw); height: 8px; border-radius: 6px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(212,168,75,.6); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 40%; border-radius: 6px; background: linear-gradient(90deg, #8e6420, #ffd36a, #3fd8cc); box-shadow: 0 0 10px rgba(63,216,204,.8); animation: ldBar 1.4s ease-in-out infinite; }
@keyframes ldBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.loading p { margin: 0; font-family: var(--f-body); font-size: 13px; letter-spacing: .35em; text-transform: uppercase; color: #a89c84; }

/* mapa em tela larga: laterais com a pintura desfocada e escurecida */
#screen-map { background: #0a0907 center / cover no-repeat; }
#screen-map::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(18px) brightness(.45); -webkit-backdrop-filter: blur(18px) brightness(.45); pointer-events: none; }
#mapInner { box-shadow: 0 0 60px rgba(0,0,0,.8); }

/* névoa do desconhecido: cobre tudo acima da fase atual e recua quando uma fase nova abre */
.map-fog { position: absolute; left: 0; right: 0; top: 0; z-index: 25; pointer-events: none; overflow: hidden;
  background: linear-gradient(to bottom, rgba(9,14,12,.97) 0%, rgba(12,20,17,.9) calc(100% - 220px), rgba(14,24,20,.55) calc(100% - 90px), rgba(14,24,20,0) 100%);
  transition: height 2.4s cubic-bezier(.45,0,.2,1); }
.map-fog i { position: absolute; left: -40%; width: 180%; height: 200px; bottom: 10px; opacity: .85;
  background: radial-gradient(ellipse 20% 50% at 15% 60%, rgba(150,180,165,.35), transparent 70%), radial-gradient(ellipse 18% 45% at 45% 40%, rgba(170,200,185,.3), transparent 70%), radial-gradient(ellipse 22% 55% at 75% 65%, rgba(140,175,160,.32), transparent 70%), radial-gradient(ellipse 16% 40% at 95% 45%, rgba(160,190,175,.3), transparent 70%);
  filter: blur(6px); animation: fogDrift 26s linear infinite; }
.map-fog .c2 { bottom: 70px; opacity: .6; animation-duration: 38s; animation-direction: reverse; }
.map-fog .c3 { bottom: 160px; opacity: .45; animation-duration: 52s; }
@keyframes fogDrift { from { transform: translateX(0); } to { transform: translateX(22%); } }
@media (prefers-reduced-motion: reduce) { .map-fog, .map-fog i { transition: none; animation: none; } }
.map-head { padding-top: max(10px, env(safe-area-inset-top)); }
.map-head .map-title strong { font-size: clamp(17px, 5vw, 30px); }
.coin-pill { top: auto; bottom: -26px; right: 12px; }
.map-head { padding-bottom: 30px; }
/* mapa 3D falso (15/10): canvas WebGL atrás da coluna; a camada das fases não atrasa (acompanha o canvas quadro a quadro) */
#mapGL { position: absolute; top: 0; z-index: 0; display: block; pointer-events: none; }
#mapInner.gl { background: none !important; }
#mapInner.gl .map-pan { transition: none; }
/* martelo (15/10, pedido dele): parado = luz azul leve atrás pra saltar do cenário; armado = dourado */
.tool-btn.painted { background: var(--h-btn) center / 84% no-repeat, radial-gradient(circle, rgba(120,225,255,.55) 0%, rgba(80,200,240,.22) 48%, rgba(80,200,240,0) 70%); animation: hammerGlow 2.4s ease-in-out infinite; }
@keyframes hammerGlow { 0%, 100% { filter: drop-shadow(0 5px 8px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(110,215,255,.55)); } 50% { filter: drop-shadow(0 5px 8px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(130,225,255,.85)); } }
/* armado: o fundo volta a ser dourado, junto com o martelo aceso */
.tool-btn.painted.on { background: var(--h-btn) center / 84% no-repeat, radial-gradient(circle, rgba(255,214,120,.6) 0%, rgba(255,190,80,.25) 48%, rgba(255,190,80,0) 70%); }
.tool-btn.painted.on { animation: hammerArm 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tool-btn.painted { animation: none; } }
/* setas de fase em fase no mapa (15/10): seta pintada do Códice girada.
   16/10: único jeito de andar no mapa (sem deslizar); discretas, menores, separadas e meio apagadas */
#mapNav { position: absolute; right: 10px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; flex-direction: column; gap: 28px; }
#mapNav button { width: 46px; height: 38px; border: 0; padding: 0; background: center / contain no-repeat; cursor: pointer; opacity: .72; filter: drop-shadow(0 2px 4px rgba(0,0,0,.65)); transition: transform .12s, opacity .2s; }
#mapNav button:not(:disabled):active { opacity: 1; }
#mapNav .up { transform: rotate(-90deg); }
#mapNav .dn { transform: rotate(90deg); }
#mapNav .up:active { transform: rotate(-90deg) scale(.9); }
#mapNav .dn:active { transform: rotate(90deg) scale(.9); }
#mapNav button:disabled { opacity: .22; cursor: default; }
#mapNav button:focus-visible { outline: 2px solid var(--gold-hi, #f3d27a); outline-offset: 3px; }
.map-pan.nodes .node { will-change: translate; }

/* ---------- loja = Códice do Templo (16/10) ----------
   A janela some: fica só a página do livro pintado (389x514). Medalhas = abas; posições em % da arte. */
.card.codex, .ui-kit .card.codex {
  --bw: min(420px, calc(100vw - 24px)); width: var(--bw); max-width: 100%;
  background: none; box-shadow: none; border: 0; border-image: none; padding: 0; gap: 10px; overflow: visible; max-height: none; filter: none;
}
.card.codex::before { display: none; }
.cx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.cx-head .eyebrow { margin: 0; font-size: 12px; letter-spacing: .35em; color: var(--gold-hi, #f3d27a); text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.9); }
.cx-wallet { display: flex; align-items: center; justify-content: center; gap: 4px; width: 150px; aspect-ratio: 304 / 134; background: center / contain no-repeat;
  font-family: var(--f-display); font-weight: 900; font-size: 20px; color: #3b2a12; text-shadow: 0 1px 0 rgba(255,245,220,.6); filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.cx-wallet img.coin { width: 26px; height: 26px; margin: 0; }
.cx-book { position: relative; width: 100%; aspect-ratio: 389 / 514; background: center / 100% 100% no-repeat; filter: drop-shadow(0 24px 40px rgba(0,0,0,.75)); }
.cx-tab { position: absolute; width: 14.4%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; transform: translate(-50%, -50%); }
.cx-tab img { width: 74%; height: 74%; object-fit: contain; opacity: .55; filter: grayscale(.5) drop-shadow(0 2px 2px rgba(0,0,0,.5)); transition: opacity .2s, transform .15s; }
.cx-tab.on img { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,220,130,.9)); transform: scale(1.08); }
.cx-tab:active img { transform: scale(.92); }
.cx-tab.t0 { left: 21.9%; top: 22.4%; } .cx-tab.t1 { left: 37.3%; top: 22.4%; } .cx-tab.t2 { left: 52.2%; top: 22.4%; }
.cx-tab.t3 { left: 92%; top: 29.6%; width: 12.9%; } .cx-tab.t4 { left: 92%; top: 41.6%; width: 12.9%; }
.cx-tab.cx-close img { opacity: .9; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); width: 64%; height: 64%; }
.cx-grid { position: absolute; left: 15.4%; width: 53.6%; top: 33%; height: 44%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4% 5%; }
.cx-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 0; padding: 0; background: top center / 100% auto no-repeat; cursor: pointer; font: inherit; }
.cx-card::after { content: ''; display: block; width: 100%; aspect-ratio: 219 / 231; order: -1; }
.cx-card > img, .cx-card > i { position: absolute; left: 18%; top: 0; width: 64%; aspect-ratio: 1; margin-top: 17%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.cx-card > i { display: grid; place-items: center; font-family: var(--f-display); font-style: normal; font-weight: 900; font-size: 22px; color: rgba(243,210,122,.55); }
.cx-card span { margin-top: 2px; font-family: var(--f-display); font-weight: 900; font-size: clamp(10px, 3vw, 13px); line-height: 1; color: #3b2a12; white-space: nowrap; }
.cx-card span img.coin { width: 1em; height: 1em; margin-right: .15em; }
.cx-card em { position: absolute; right: 2%; top: 0; font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 11px; color: #f7e2a1; background: rgba(20,14,6,.85); border-radius: 8px; padding: 1px 5px; box-shadow: 0 0 0 1px rgba(212,168,75,.7); }
.cx-card.on { filter: drop-shadow(0 0 7px rgba(255,214,110,.95)); }
.cx-card.soon > img, .cx-card.soon > i { opacity: .45; filter: grayscale(1) brightness(.7); }
.cx-card.soon span { font-size: clamp(8px, 2.4vw, 10px); letter-spacing: .08em; color: #6b5532; }
.cx-card.empty { opacity: .35; cursor: default; }
.cx-detail { display: grid; gap: 4px; text-align: center; padding: 0 10px; min-height: 120px; align-content: start; justify-items: center; }
.cx-detail b { font-family: var(--f-display); font-size: 18px; color: var(--gold-hi, #f3d27a); text-shadow: 0 2px 0 #000; }
.cx-detail span { font-family: var(--f-body); font-size: 15px; line-height: 1.3; color: var(--bone); text-shadow: 0 1px 0 #000; }
.cx-detail small { font-family: var(--f-body); font-weight: 600; font-size: 11px; letter-spacing: .1em; color: var(--jade); }
.cx-buy { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; width: 170px; aspect-ratio: 304 / 134; border: 0; padding: 0; background: center / contain no-repeat; cursor: pointer;
  font-family: var(--f-display); font-weight: 900; font-size: 22px; color: #3b2a12; text-shadow: 0 1px 0 rgba(255,245,220,.6); filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.cx-buy img.coin { width: 28px; height: 28px; margin: 0; }
.cx-buy:active { transform: translateY(2px) scale(.97); }
.cx-buy:disabled { filter: grayscale(1) brightness(.55); cursor: not-allowed; }
.card.codex .shop-note { margin: 0; font-size: 13px !important; text-shadow: 0 1px 0 #000; }.modal:has(.card.codex) { background: radial-gradient(ellipse at center, rgba(4,3,2,.78), rgba(4,3,2,.94)); }

/* Trilha do Explorador (16/10): 3 vantagens na janela antes da fase, acesas até a sequência de vitórias */
.streak { display: grid; gap: 4px; justify-items: center; }
.streak-row { display: flex; align-items: center; gap: 6px; }
.streak-row img { width: 40px; height: 40px; object-fit: contain; opacity: .3; filter: grayscale(1); transition: opacity .2s; }
.streak-row img.on { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,214,110,.85)); }
.streak-row i { width: 14px; height: 2px; background: rgba(212,168,75,.5); }
.streak small { font-family: var(--f-body); font-size: 12px; color: var(--bone-dim); }
.streak-up { color: var(--gold-hi, #f3d27a) !important; }
.streak-lost { color: var(--ember) !important; }
.cx-buy.use { font-size: 18px; letter-spacing: .1em; }
/* mapa (16/10): rolagem nativa; botão discreto que volta pra fase atual (só aparece quando ela sai da tela) */
#mapBack { position: absolute; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 3; width: 54px; height: 54px; border: 0; padding: 0; background: none; cursor: pointer;
  opacity: 0; pointer-events: none; transform: scale(.85); transition: opacity .25s, transform .25s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
#mapBack.on { opacity: .85; pointer-events: auto; transform: none; }
#mapBack:active { transform: scale(.92); }
#mapBack img { width: 100%; height: 100%; object-fit: contain; }
#mapBack .digits { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 900; font-size: 16px; color: #f7e2a1; }
#mapBack .digits img { width: auto; height: 20px; margin: 0 -2px; }
/* ---------- Loja do Templo no formato do modelo dele (16/10) ---------- */
.tshop .ts-title { align-self: center; width: min(260px, 70%); aspect-ratio: 304 / 134; background: center / contain no-repeat; display: grid; place-items: center; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.tshop .ts-title span { font-family: var(--f-display); font-weight: 900; font-size: clamp(15px, 4.4vw, 20px); letter-spacing: .06em; color: #3b2a12; text-shadow: 0 1px 0 rgba(255,245,220,.6); text-transform: uppercase; }
.tshop .wallet { margin-top: -6px; font-size: 24px; }
.tshop .wallet img.coin { width: 32px; height: 32px; }
.tshop .ts-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.ui-kit .tshop .ts-tab, .tshop .ts-tab { --be: 26px; --be2: 24px; min-height: 46px; padding: 0 20px; font-size: 13px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tshop .ts-tab img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.tshop .ts-pager { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--f-body); font-weight: 600; font-size: 13px; letter-spacing: .2em; color: var(--bone-dim); }
.tshop .ts-pager button { width: 36px; height: 30px; border: 0; padding: 0; background: center / contain no-repeat; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.tshop .ts-prev { transform: scaleX(-1); }
.tshop .ts-pager button:disabled { opacity: .25; cursor: default; }
.tshop .ts-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.tshop .ts-offer { display: flex; flex-direction: column; align-items: center; gap: 0; }
.tshop .ts-frame { position: relative; width: 82%; aspect-ratio: 219 / 231; background: center / contain no-repeat; display: grid; place-items: center; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); z-index: 1; }
.tshop .ts-frame img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.tshop .ts-frame i { font-family: var(--f-display); font-style: normal; font-weight: 900; font-size: 30px; color: rgba(243,210,122,.5); }
.tshop .ts-frame em { position: absolute; right: 6%; top: 4%; font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 12px; color: #f7e2a1; background: rgba(20,14,6,.85); border-radius: 8px; padding: 1px 6px; box-shadow: 0 0 0 1px rgba(212,168,75,.7); }
/* painel de descrição: verde-escuro com filete dourado e a pontinha encostando na moldura (como no modelo) */
.tshop .ts-info { position: relative; margin-top: -10px; width: 100%; padding: 16px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 178px;
  background: linear-gradient(180deg, rgba(18,44,36,.96), rgba(8,22,18,.96)); box-shadow: inset 0 0 0 1px rgba(212,168,75,.85), inset 0 0 0 3px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.5); }
.tshop .ts-info::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: #12302a; box-shadow: -1px -1px 0 0 rgba(212,168,75,.85); }
.tshop .ts-info b { font-family: var(--f-display); font-size: 15px; line-height: 1.1; color: #f7e2a1; text-shadow: 0 2px 0 #000; text-align: center; }
.tshop .ts-info > span { font-family: var(--f-body); font-size: 12.5px; line-height: 1.3; color: var(--bone); text-align: center; flex: 1; }
.tshop .ts-info small { font-family: var(--f-body); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; color: var(--jade); }
.ui-kit .tshop .ts-info .btn, .tshop .ts-info .btn { --be: 22px; --be2: 22px; width: 100%; min-height: 54px; padding: 0 16px; font-size: 13px; margin-top: 4px; }
.tshop .ts-info .btn .sub img.coin { width: 1.1em; height: 1.1em; }
.tshop .ts-info .btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.tshop .ts-offer.soon .ts-frame { filter: grayscale(.8) brightness(.7) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.tshop .shop-note { font-size: 12px !important; }.tshop .ts-offers { align-items: stretch; }
.tshop .ts-offer { height: 100%; }
.tshop .ts-info { flex: 1; }
.tshop .ts-info .btn, .tshop .ts-info > small:last-child { margin-top: auto; }/* 16/10 (print dele no iPhone): abas passavam da moldura pela direita; 1 oferta por página, centrada; título só "Loja" */
.tshop .ts-tabs { width: 100%; box-sizing: border-box; }
.ui-kit .tshop .ts-tab, .tshop .ts-tab { --be: 20px; --be2: 18px; min-width: 0; width: 100%; box-sizing: border-box; padding: 0 12px; font-size: 12px; overflow: hidden; }
.tshop .ts-tab img { width: 20px; height: 20px; }
.tshop .ts-offers { grid-template-columns: 1fr; justify-items: center; }
.tshop .ts-offer { width: min(250px, 80%); }
.tshop .ts-frame { width: 66%; }
.tshop .ts-info { min-height: 0; padding: 18px 14px 12px; }
.tshop .ts-info b { font-size: 18px; }
.tshop .ts-info > span { font-size: 14px; }
.ui-kit .tshop .ts-info .btn, .tshop .ts-info .btn { width: 80%; }
.tshop .ts-title { width: min(200px, 55%); }
.tshop .ts-title span { font-size: clamp(18px, 5.5vw, 24px); }/* 16/10: botão de comprar só com moeda + preço, maior */
.ui-kit .tshop .ts-info .ts-buy, .tshop .ts-info .ts-buy { font-size: 20px; letter-spacing: .02em; min-height: 56px; }
.tshop .ts-buy img.coin { width: 26px; height: 26px; vertical-align: -6px; margin-right: 6px; }
/* mundos (16/10): setas pintadas dos lados do título trocam de mundo; a do próximo fica apagada até abrir a 1ª fase dele */
#mapWorlds button { position: absolute; top: 62px; z-index: 4; width: 44px; height: 36px; border: 0; padding: 0; background: center / contain no-repeat; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); opacity: .9; }
#mapWorlds .wprev { left: 14px; transform: scaleX(-1); }
#mapWorlds .wnext { right: 14px; }
#mapWorlds button:disabled { opacity: .25; filter: grayscale(1) drop-shadow(0 2px 4px rgba(0,0,0,.7)); cursor: default; }
#mapWorlds button:not(:disabled):active { transform: scale(.9); }
#mapWorlds .wprev:not(:disabled):active { transform: scaleX(-1) scale(.9); }/* 16/10: o cabeçalho do mapa (z-index 40) cobria as setas de mundo e engolia o toque */
#mapWorlds button { z-index: 45; }
/* Jogada do Dia (18/10) */
.daily-score { font-family: var(--f-display); font-weight: 900; font-size: 44px; color: var(--gold-hi, #f3d27a); text-shadow: 0 3px 0 #000, 0 0 20px rgba(255,190,90,.5); }
.daily-stars { font-size: 34px; letter-spacing: .15em; color: #ffd76a; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255,200,80,.7); }
.daily-stars span { color: rgba(255,255,255,.15); text-shadow: none; }

/* Recorde semanal: competição limpa, sem boosters; a moldura continua usando o kit pintado do jogo. */
.weekly-rules { margin: 8px 0 12px; color: var(--bone-dim); font-size: 14px; line-height: 1.35; }
.weekly-name { width: 100%; box-sizing: border-box; border: 1px solid rgba(231,190,92,.55); border-radius: 8px; padding: 12px 14px; background: rgba(8,16,12,.9); color: var(--bone); font: 700 17px var(--f-body); text-align: center; outline: none; }
.weekly-name:focus { border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(231,190,92,.25); }
.save-code { width: 100%; min-height: 126px; resize: vertical; box-sizing: border-box; border: 1px solid rgba(231,190,92,.55); border-radius: 8px; padding: 10px; background: rgba(8,16,12,.92); color: var(--bone); font: 12px/1.45 ui-monospace, Consolas, monospace; outline: none; overflow-wrap: anywhere; }
.save-code:focus { border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(231,190,92,.25); }
.save-summary { padding: 9px 12px; border-radius: 7px; background: rgba(40,120,100,.14); box-shadow: inset 0 0 0 1px rgba(83,210,190,.25); color: var(--bone-dim); font-size: 14px; line-height: 1.35; }
.weekly-board { width: 100%; margin: 10px 0 4px; display: grid; gap: 5px; }
.weekly-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 7px; background: rgba(5,18,13,.62); color: var(--bone); }
.weekly-row.me { color: var(--gold-hi); background: rgba(91,64,18,.42); }
.weekly-row i { font-style: normal; color: var(--gold); text-align: center; }
.weekly-row b { color: inherit; }
.weekly-row strong { color: var(--gold-hi); font-family: var(--f-display); }
.weekly-status { margin: 7px 0; font-size: 12px; color: var(--bone-dim); }

/* Orbe Solar no mapa (18/10): flutua em cima da fase atual; pula da anterior quando a fase avança */
.node-orb { position: absolute; left: 50%; top: -44px; width: 44px; height: 44px; margin-left: -22px; pointer-events: none; z-index: 3; }
.node-orb img { width: 100%; height: 100%; display: block; animation: orbFloat 1.9s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,190,80,.9)); }
.node-orb[data-hop] { animation: orbArrive 1.1s cubic-bezier(.4,0,.2,1) .5s backwards; }
@keyframes orbFloat { 0%, 100% { transform: translateY(0) rotate(0deg) scale(1); } 50% { transform: translateY(-7px) rotate(12deg) scale(1.06); } }
@keyframes orbArrive { 0% { transform: translate(var(--hx), var(--hy)); } 50% { transform: translate(calc(var(--hx) * .5), calc(var(--hy) * .5 - 46px)); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .node-orb img, .node-orb[data-hop] { animation: none; } }
.wallet-row { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.wallet-row img.coin { width: 26px; height: 26px; margin: 0; }
.wallet-row .digits { display: inline-flex; align-items: center; }
.wallet-row .digits img { height: 22px; width: auto; margin: 0 -2px; }

/* ---- 18/10: ícone de fase simples (círculo + número), tamanho acompanha o mapa (--ns) ---- */
.node.simple, .node.simple.boss, .node.simple.current { width: var(--ns, 52px); height: var(--ns, 52px); margin: calc(var(--ns, 52px) / -2) 0 0 calc(var(--ns, 52px) / -2); }
.node.simple .disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #5fc07a, #23773f 58%, #134a29); box-shadow: 0 0 0 calc(var(--ns, 52px) * .07) #e8c46a, 0 5px 9px rgba(0,0,0,.65); }
.node.simple.done .disc { background: radial-gradient(circle at 35% 28%, #ffe9a3, #e0b24a 58%, #a87a24); }
.node.simple.boss .disc { background: radial-gradient(circle at 35% 28%, #e9665c, #b32a28 58%, #6f1414); box-shadow: 0 0 0 calc(var(--ns, 52px) * .09) #ffd36a, 0 5px 9px rgba(0,0,0,.65); }
.node.simple.locked .disc { filter: saturate(.4) brightness(.7); }
.node.simple.current .disc { animation: nodeGlow 2s ease-in-out infinite; box-shadow: 0 0 0 calc(var(--ns, 52px) * .09) #fff3c4, 0 0 18px 4px rgba(255,210,110,.85); }
.node.simple .num, .node.simple.boss .num, .node.simple.current .num { font-family: var(--f-display); font-weight: 900; font-size: calc(var(--ns, 52px) * .5); line-height: 1; color: #fff7dc; text-shadow: 0 2px 0 rgba(30,15,0,.75), 0 0 6px rgba(0,0,0,.6); z-index: 1; }
.node.simple.done .num { color: #4a2e05; text-shadow: 0 1px 0 rgba(255,245,200,.7); }
.node.simple .st { bottom: calc(var(--ns, 52px) * -.3); }
.node.simple .cur-bar { display: none; }
.node.simple .st { bottom: calc(var(--ns, 52px) * -.42); z-index: 2; }

/* ---- 18/10: apresentação da fase com caixa estática: o card não rola, só a lista de explicação (se passar do espaço) ---- */
.card.pre { max-height: calc(100dvh - 24px); overflow: hidden; gap: 10px; padding: 26px 22px 18px; }
.card.pre h2 { font-size: 26px; }
.card.pre .goal-row { padding: 6px 12px 6px 8px; font-size: 17px; }
.card.pre .goal-row img { width: 38px; height: 38px; }
.card.pre .moves-line b { font-size: 20px; }
.card.pre .tut { flex: 1 1 auto; min-height: 84px; overflow: hidden; align-items: center; padding: 10px 12px; gap: 12px; }
.card.pre .tut img { width: 46px; height: 46px; }
.card.pre .tut-list { margin: 0; padding: 0; list-style: none; text-align: left; flex: 1 1 auto; min-width: 0; max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,168,75,.6) transparent; display: grid; gap: 5px; }
.card.pre .tut-list li { position: relative; padding-left: 14px; font-family: var(--f-body); font-size: 14.5px; line-height: 1.3; color: var(--bone); }
.card.pre .tut-list li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-hi, #f3d27a); }
.card.pre .tut-list li.weak { color: #ffe9a8; font-weight: 600; }
.card.pre .tut-list li.weak::before { background: #ff8a5c; box-shadow: 0 0 6px #ff8a5c; }
.card.pre .boost { width: 84px; padding: 6px 4px; }
.card.pre .boost img { width: 32px; height: 32px; }
.card.pre .streak-row img { width: 32px; height: 32px; }
/* altura única pra todas as fases: a caixa de explicação absorve a folga */
.card.pre { height: min(640px, calc(100dvh - 24px)); max-height: none; justify-content: space-between; }
.card.pre .tut { min-height: 0; }
.card.pre .streak small { display: none; }
.card.pre .streak { gap: 2px; }
.card.pre .streak > :first-child { font-size: 11px; }
.card.pre .tut-list.more { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); padding-bottom: 14px; }

/* ---- 19/10: botões de fase com a arte do kit (moeda de madeira / placa de areia / emblema); o número é texto por cima ---- */
.node.simple.coin, .node.simple.tile { overflow: visible; }
.node.simple .btn-img { position: absolute; left: 50%; top: 50%; width: calc(var(--ns, 52px) * 1.22); max-width: none; height: auto; transform: translate(-50%, -44.6%); filter: drop-shadow(0 4px 5px rgba(0,0,0,.55)); pointer-events: none; }
.node.simple.tile .btn-img { width: calc(var(--ns, 52px) * 1.12); transform: translate(-50%, -47%); }
.node.simple.emblem .btn-img { width: calc(var(--ns, 52px) * 1.3); transform: translate(-50%, -50%); }
.node.simple.coin .num, .node.simple.tile .num { font-family: var(--f-display); font-weight: 900; font-size: calc(var(--ns, 52px) * .52); color: #f3dfb0; text-shadow: 0 1px 0 #3a1c0c, 0 -1px 0 rgba(255,240,200,.35), 0 0 3px rgba(40,18,6,.7); z-index: 1; }
.node.simple.tile .num { color: #8a5a2c; text-shadow: 0 1px 0 rgba(255,244,214,.75), 0 -1px 0 rgba(90,50,18,.25); }
.node.simple .num.d2 { font-size: calc(var(--ns, 52px) * .4); letter-spacing: -.02em; }
.node.simple.done .btn-img { filter: drop-shadow(0 0 6px rgba(255,214,110,.75)) drop-shadow(0 4px 5px rgba(0,0,0,.55)) saturate(1.12) brightness(1.1); }
.node.simple.boss .btn-img { filter: drop-shadow(0 0 7px rgba(255,80,60,.8)) drop-shadow(0 4px 5px rgba(0,0,0,.55)) hue-rotate(-14deg) saturate(1.9) brightness(.95); }
.node.simple.current .btn-img { animation: nodeBreath 2.4s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255,214,110,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.6)) brightness(1.12); }
.node.simple.coin .disc, .node.simple.tile .disc { display: none; }
.node.simple.coin.current, .node.simple.tile.current { width: var(--ns, 52px); height: var(--ns, 52px); }
.node.simple.coin.current .num { font-size: calc(var(--ns, 52px) * .58); }
.node.simple.coin.current .num.d2 { font-size: calc(var(--ns, 52px) * .44); }
.node.simple.coin .st, .node.simple.tile .st { bottom: calc(var(--ns, 52px) * -.5); }
.node.simple.boss.current .btn-img { filter: drop-shadow(0 0 12px rgba(255,214,110,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.6)) hue-rotate(-14deg) saturate(1.9) brightness(1.05); }

/* ---- 19/10: família final de botões pintados; todos ficam estáticos e sem estrelas sobre o caminho ---- */
.card.pre h2 { width: 100%; margin-inline: auto; text-align: center; }
.node.simple.art-v2 { overflow: visible; }
.node.simple.art-v2::before { content: ''; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #4d3927, #1d1712 72%); box-shadow: inset 0 1px 4px rgba(255,220,150,.2); }
.node.simple.art-v2.state-atual::before { background: radial-gradient(circle at 38% 30%, #235b58, #101e1d 72%); }
.node.simple.art-v2.state-dificil::before { background: radial-gradient(circle at 38% 30%, #52251f, #1d1010 72%); }
.node.simple.art-v2.state-bloqueada::before { background: radial-gradient(circle at 38% 30%, #454540, #1a1a18 72%); }
.node.simple.art-v2 .btn-img,
.node.simple.art-v2.current .btn-img,
.node.simple.art-v2.boss.current .btn-img { left: 50%; top: 50%; width: 132%; height: 132%; max-width: none; object-fit: contain; transform: translate(-50%, -50%); animation: none; filter: drop-shadow(0 4px 5px rgba(0,0,0,.65)); }
.node.simple.art-v2.state-atual .btn-img { filter: drop-shadow(0 0 7px rgba(63,216,204,.72)) drop-shadow(0 4px 5px rgba(0,0,0,.65)); }
.node.simple.art-v2.state-dificil .btn-img { filter: drop-shadow(0 0 6px rgba(255,91,48,.55)) drop-shadow(0 4px 5px rgba(0,0,0,.65)); }
.node.simple.art-v2 .map-phase-num,
.node.simple.art-v2.current .map-phase-num,
.node.simple.art-v2.boss .map-phase-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; transform: none; padding: 0; font-family: var(--f-display); font-weight: 900; font-size: calc(var(--ns, 52px) * .42); font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; color: #f8e8bd; text-align: center; text-shadow: 0 2px 0 #261308, 0 0 4px #000; }
.node.simple.art-v2.state-bloqueada .map-phase-num { color: #aaa08a; opacity: .72; }
.node.simple.art-v2.state-dificil .map-phase-num { color: #ffd69a; }
.node.simple.art-v2 .st, .node.simple.art-v2 .cur-bar, .node.simple.art-v2 .node-aura, .node.simple.art-v2 .node-orb { display: none; }
.node.simple.art-v2 .lock { z-index: 3; }

.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }
.mode-pick button { min-height: 38px; border: 1px solid rgba(212,168,75,.45); border-radius: 18px; background: rgba(0,0,0,.36); color: var(--bone-dim); font: 700 12px var(--f-body); letter-spacing: .05em; }
.mode-pick button.on { border-color: #3fd8cc; color: #f7e2a1; box-shadow: inset 0 0 0 1px rgba(63,216,204,.45), 0 0 10px rgba(63,216,204,.18); }
.mode-pick button:disabled { opacity: .45; }
.hard-rules { margin: 0; color: #f0c88a; font-size: 12px; line-height: 1.3; }
.card.pre.hard-pre .weekly-list { width: 100%; max-height: 122px; overflow-y: auto; }
.card.pre.hard-pre .weekly-board { max-height: none; }
.records-levels { width: 100%; max-height: min(48vh, 360px); overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 2px; }
.record-level { min-width: 0; padding: 9px 8px; border: 1px solid rgba(231,190,92,.42); border-radius: 8px; background: rgba(5,18,13,.72); color: var(--bone); text-align: left; }
.record-level.featured { border-color: #50d8c6; background: linear-gradient(135deg, rgba(24,100,88,.72), rgba(5,18,13,.82)); box-shadow: inset 0 0 0 1px rgba(80,216,198,.22), 0 0 12px rgba(80,216,198,.12); }
.record-level.featured::before { content: attr(data-featured); display: block; margin-bottom: 3px; color: #71ead8; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.record-level span, .record-level strong { display: block; }
.record-level span { color: var(--gold-hi); font: 700 15px var(--f-display); }
.record-level strong { margin-top: 3px; color: var(--bone-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kit .card.records-hub { gap: 11px; padding-top: calc(var(--cw) * .229 + 14px); }
.ui-kit .card.records-hub .eyebrow { margin-bottom: -3px; font-size: 9px; letter-spacing: .27em; white-space: nowrap; }
.ui-kit .card.records-hub h2 { width: 100%; max-width: 260px; margin-inline: auto; font-size: clamp(22px, 5.4vw, 24px); letter-spacing: .015em; line-height: 1; white-space: normal; text-wrap: balance; }
.ui-kit .card.records-hub .orn { margin-block: -2px; }
.ui-kit .card.records-hub .weekly-rules { margin: 0 0 4px; font-size: 13px; line-height: 1.3; }
.ui-kit .card.records-hub .records-levels { max-height: min(38vh, 260px); }