/* ============================================================ HISTÓRIA: exploração, diálogos, menus (V0.3) */
#storyUI { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#storyUI > * { pointer-events: auto; }
#pad { position: absolute; inset: 0; pointer-events: none; }
#padZone { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#stick { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 2px solid rgba(255,230,166,0.45); background: radial-gradient(circle, rgba(20,12,40,0.25), rgba(20,12,40,0.5)); pointer-events: none; }
#stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6dc, #f2c35b 60%, #9a6a1c); box-shadow: 0 4px 14px rgba(0,0,0,.5); }
#padA, #padM { position: absolute; pointer-events: auto; display: grid; place-items: center; border-radius: 50%; font-family: Cinzel, serif; font-weight: 900; color: #2a1a08; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.2); }
#padA { right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); background: radial-gradient(circle at 35% 30%, #fff6dc, #c8b6ff 70%, #6a4fb0); opacity: .55; transition: opacity .2s, transform .2s; }
#padA b { font-size: calc(var(--u) * 1.5); line-height: 1; }
#padA span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: Outfit; font-weight: 800; font-size: calc(var(--u) * 0.8); color: var(--gold2); background: rgba(14,9,30,.85); border: 1px solid var(--line); padding: 3px 10px; border-radius: 99px; opacity: 0; transition: opacity .2s; }
#padA.lit { opacity: 1; background: radial-gradient(circle at 35% 30%, #fff6dc, #f2c35b 65%, #9a6a1c); animation: padPulse 1.4s infinite; }
#padA.lit span { opacity: 1; }
@keyframes padPulse { 50% { transform: scale(1.06); box-shadow: 0 0 22px rgba(242,195,91,.7), inset 0 -4px 0 rgba(0,0,0,.2); } }
#padM { right: calc(18px + var(--safe-r)); top: calc(14px); width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); background: rgba(14,9,30,.75); color: var(--gold2); border: 1px solid var(--line); font-size: calc(var(--u) * 1.2); }

/* faixa do nome do lugar */
#areaBan { position: absolute; left: 0; right: 0; top: 9%; text-align: center; pointer-events: none !important; opacity: 0; }
#areaBan.on { animation: areaBan 3.4s ease forwards; }
#areaBan .an { display: inline-block; font-family: Cinzel, serif; font-weight: 900; letter-spacing: .2em; font-size: calc(var(--u) * 1.9); color: var(--gold2); text-shadow: 0 2px 0 #2a1608, 0 0 26px rgba(242,195,91,.55); padding: 4px 40px; background: linear-gradient(90deg, transparent, rgba(10,6,24,.7), transparent); }
#areaBan .an i, #areaBan .as i { display: block; font-style: normal; font-family: Outfit; letter-spacing: .05em; font-size: .45em; color: var(--muted); text-shadow: none; }
#areaBan .as { font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: calc(var(--u) * .72); color: #e8dcff; margin-top: 4px; }
@keyframes areaBan { 0% { opacity: 0; transform: translateY(-10px); letter-spacing: .4em; } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* avisos */
#toasts { position: absolute; left: calc(14px + var(--safe-l)); top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 26; pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: center; padding: 7px 14px 7px 8px; border-radius: 14px; background: linear-gradient(90deg, rgba(36,24,72,.95), rgba(18,12,36,.85)); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.4); font-weight: 700; font-size: calc(var(--u) * .82); animation: toastIn .35s cubic-bezier(.2,1.4,.4,1); max-width: 60vw; }
.toast .ic { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #2a1608; font-size: 1em; flex: none; }
.toast small { display: block; font-size: .72em; letter-spacing: .18em; text-transform: uppercase; color: var(--gold2); font-weight: 800; }
.toast i { display: block; font-style: normal; font-weight: 400; color: var(--muted); font-size: .85em; }
.toast.quest .ic, .toast.questDone .ic { background: var(--teal); }
.toast.echo .ic { background: #b06bff; color: #fff; }
.toast.out { opacity: 0; transform: translateX(-20px); transition: .45s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-30px) scale(.9); } }

/* diálogo */
#dlg { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); width: min(980px, 94vw); z-index: 28; display: none; }
#dlg.on { display: flex; align-items: flex-end; gap: 0; animation: dlgIn .22s ease-out; }
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, 16px); } }
#dlg .fc { width: calc(var(--u) * 7.4); height: auto; aspect-ratio: 256/248; flex: none; border-radius: 16px; border: 2px solid var(--sc); background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.15), rgba(10,6,24,.9)); box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--sc) 40%, transparent); margin-right: -10px; position: relative; z-index: 1; animation: faceIn .3s ease-out; object-fit: cover; }
@keyframes faceIn { from { transform: translateX(-14px); opacity: 0; } }
#dlg.right { flex-direction: row-reverse; }
#dlg.right .fc { margin: 0 0 0 -10px; transform: scaleX(-1); }
#dlg .tb { flex: 1; min-height: calc(var(--u) * 6.4); position: relative; padding: 12px 20px 14px 24px; border-radius: 18px; background: linear-gradient(170deg, rgba(36,26,72,.96), rgba(14,9,30,.96)); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
#dlg .tb::before { content: ''; position: absolute; inset: 4px; border-radius: 14px; border: 1px solid rgba(255,230,166,.12); pointer-events: none; }
#dlg .nm { display: inline-block; font-family: Cinzel, serif; font-weight: 900; letter-spacing: .08em; color: var(--sc); font-size: calc(var(--u) * 1.02); margin-bottom: 4px; text-shadow: 0 0 12px color-mix(in srgb, var(--sc) 50%, transparent); }
#dlg .tx { font-size: calc(var(--u) * 1.02); line-height: 1.45; color: var(--text); }
#dlg .tx i { display: block; font-style: italic; color: var(--muted); font-size: .82em; margin-top: 4px; }
#dlg .more { position: absolute; right: 16px; bottom: 8px; color: var(--gold); font-size: calc(var(--u) * .8); opacity: 0; }
#dlg.ready .more { opacity: 1; animation: moreB .8s infinite; }
@keyframes moreB { 50% { transform: translateY(4px); } }
#dlg.narr .tb { background: linear-gradient(170deg, rgba(10,6,20,.9), rgba(4,2,10,.92)); text-align: center; border-color: rgba(200,182,255,.35); }
#dlg.narr .tx { font-family: Cinzel, serif; letter-spacing: .03em; color: #ece2ff; }
#dlg.big .tx { font-size: calc(var(--u) * 1.3); }

/* escolhas */
#choice { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(var(--u) * 8.4); z-index: 29; display: none; flex-direction: column; gap: 6px; min-width: min(380px, 70vw); max-width: 80vw; }
#choice.on { display: flex; animation: dlgIn2 .2s ease-out; }
@keyframes dlgIn2 { from { opacity: 0; transform: translateX(16px); } }
#choice .q { font-family: Cinzel, serif; color: var(--gold2); text-align: right; font-size: calc(var(--u) * .9); text-shadow: 0 2px 6px #000; }
#choice .q i { display: block; font-style: italic; font-family: Outfit; color: var(--muted); font-size: .8em; }
#choice button { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(36,26,72,.97), rgba(18,12,36,.95)); border: 1px solid rgba(255,255,255,.15); font-weight: 700; font-size: calc(var(--u) * .92); box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .12s, border-color .12s; }
#choice button i { display: block; font-style: italic; font-weight: 400; color: var(--muted); font-size: .82em; }
#choice button em { font-style: normal; width: 1.6em; height: 1.6em; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(242,195,91,.2); color: var(--gold2); font-size: .8em; }
#choice button.sel, #choice button:hover { border-color: var(--gold); transform: translateX(-6px); }

/* confirmação bonita */
#prompt { position: absolute; inset: 0; z-index: 32; display: none; place-items: center; background: radial-gradient(circle, rgba(10,6,24,.35), rgba(4,2,10,.7)); backdrop-filter: blur(3px); }
#prompt.on { display: grid; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
#prompt .pbox { position: relative; width: min(440px, 88vw); text-align: center; padding: 34px 22px 18px; border-radius: 22px; background: linear-gradient(170deg, #2a1f52, #130d26); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 50px rgba(242,195,91,.15); animation: pIn .35s cubic-bezier(.2,1.5,.4,1); }
#prompt .pbox::after { content: ''; position: absolute; inset: 6px; border-radius: 17px; border: 1px solid rgba(255,230,166,.15); pointer-events: none; }
@keyframes pIn { from { opacity: 0; transform: scale(.85) translateY(10px); } }
#prompt .pic { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 35% 30%, #fff6dc, #f2c35b 65%, #9a6a1c); color: #2a1608; box-shadow: 0 0 24px rgba(242,195,91,.6); }
#prompt h3 { margin: 0 0 6px; font-family: Cinzel, serif; font-size: calc(var(--u) * 1.25); color: var(--gold2); letter-spacing: .04em; }
#prompt h3 i, #prompt p i { display: block; font-style: italic; font-family: Outfit; font-weight: 400; color: var(--muted); font-size: .72em; letter-spacing: 0; }
#prompt p { margin: 0 0 12px; color: #ddd3ee; font-size: calc(var(--u) * .88); line-height: 1.45; }
#prompt .row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
#prompt .btn i { display: block; font-style: normal; font-weight: 400; font-size: .75em; opacity: .75; }

/* cartões de capítulo */
#card { position: absolute; inset: 0; z-index: 24; display: none; place-items: center; pointer-events: none; }
#card.on { display: grid; background: radial-gradient(circle, rgba(10,6,24,.55), rgba(0,0,0,.92)); animation: fadeIn .8s; }
#card.out { opacity: 0; transition: opacity .7s; }
#card .cin { text-align: center; }
#card .ck { font-weight: 800; letter-spacing: .5em; text-transform: uppercase; color: var(--teal); font-size: calc(var(--u) * .85); animation: ckIn 1.4s ease both; }
#card .ck i, #card .ct i { display: block; font-style: italic; font-weight: 400; letter-spacing: .1em; text-transform: none; color: var(--muted); font-size: .6em; margin-top: 4px; }
#card .ct { font-family: Cinzel, serif; font-weight: 900; font-size: calc(var(--u) * 2.8); color: var(--gold2); letter-spacing: .12em; text-shadow: 0 0 30px rgba(242,195,91,.6), 0 3px 0 #2a1608; margin-top: 8px; animation: ctIn 1.6s ease both .2s; }
#card .cl { height: 2px; width: 0; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: clIn 1.6s ease forwards .5s; }
@keyframes ckIn { from { opacity: 0; letter-spacing: 1.2em; } }
@keyframes ctIn { from { opacity: 0; transform: scale(1.15); filter: blur(8px); } }
@keyframes clIn { to { width: 60vw; } }
#fader { position: absolute; inset: 0; z-index: 22; background: #000; opacity: 0; pointer-events: none; }
#fader.on { opacity: 1; }

/* menu do jogo */
.mbody { margin-top: 10px; }
.mparty { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mhero { display: flex; gap: 10px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--ec) 22%, rgba(36,26,72,.9)), rgba(14,9,30,.95)); border: 1px solid rgba(255,255,255,.12); }
.mhero img { width: 78px; height: 76px; border-radius: 12px; border: 2px solid var(--ec); object-fit: cover; flex: none; }
.mh { flex: 1; min-width: 0; }
.mh b { font-family: Cinzel, serif; font-size: calc(var(--u) * 1.1); display: block; }
.mh > small { color: var(--muted); font-size: calc(var(--u) * .72); }
.ml { display: flex; gap: 12px; font-weight: 800; font-size: calc(var(--u) * .78); color: var(--gold2); margin: 3px 0; }
.mhero .bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.5); overflow: hidden; margin-top: 3px; }
.mhero .bar i { display: block; height: 100%; }
.mhero .bar.hp i { background: linear-gradient(90deg, #3ddc84, #b6ff7a); }
.mhero .bar.xp i { background: linear-gradient(90deg, #b06bff, #ffe6a6); }
.mn { display: flex; justify-content: space-between; font-size: calc(var(--u) * .66); color: var(--muted); }
.mst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; margin-top: 5px; font-size: calc(var(--u) * .7); color: var(--muted); }
.mst b { color: var(--text); }
.mgold { margin-top: 10px; text-align: right; font-weight: 800; color: var(--gold2); }
.meq { margin-bottom: 10px; }
.meq > b { font-family: Cinzel, serif; display: block; margin-bottom: 4px; }
.meq .li { margin-bottom: 4px; width: 100%; }
.mq { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border-left: 3px solid var(--teal); margin-bottom: 6px; }
.mq.done { opacity: .6; border-left-color: var(--green); }
.mq b { font-family: Cinzel, serif; }
.mq small { display: block; color: var(--gold2); font-size: .75em; }
.mq p { margin: 4px 0 0; font-size: calc(var(--u) * .8); }
.mq p i { display: block; color: var(--muted); }
.msys { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.danger { background: linear-gradient(180deg, #7a2236, #4a1220); }
.sect { font-family: Cinzel, serif; color: var(--gold2); margin: 12px 0 6px; }
.muted { color: var(--muted); }
.shopgold { text-align: right; font-weight: 800; color: var(--gold2); margin: 6px 0; }
.dif .up { color: var(--green); } .dif .dn { color: var(--red); }
.rewards { text-align: center; }
.rewards .rw { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.06); margin: 5px 0; font-weight: 700; }
.rewards .rw b { color: var(--gold2); font-size: 1.1em; }
.rewards .rt { display: inline-block; padding: 2px 10px; border-radius: 99px; background: rgba(127,243,255,.15); margin: 2px; font-size: .85em; }
.lvup { margin: 6px 0; padding: 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(242,195,91,.25), transparent); animation: lvIn .5s cubic-bezier(.2,1.5,.4,1) both; text-align: left; }
.lvup .blk { margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--teal); color: #0b0818; font-weight: 800; font-size: .8em; }
@keyframes lvIn { from { opacity: 0; transform: scale(.9); } }
.namebox { text-align: center; }
.namebox img { width: 110px; border-radius: 18px; border: 2px solid var(--gold); }
.namebox input { width: 80%; font: 700 calc(var(--u) * 1.3) Cinzel, serif; text-align: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.4); color: var(--gold2); margin: 6px 0 10px; user-select: text; -webkit-user-select: text; }

/* telemóvel dobrado (ecrã baixo) */
@media (max-height: 420px) {
  #dlg .fc { width: calc(var(--u) * 5.6); }
  #dlg .tb { min-height: calc(var(--u) * 5); padding: 8px 14px 10px 18px; }
  #dlg .tx { font-size: calc(var(--u) * .92); }
  #areaBan { top: 4%; }
  #choice { bottom: calc(var(--u) * 6.6); }
  .mhero img { width: 58px; height: 56px; }
  #card .ct { font-size: calc(var(--u) * 2.2); }
}

/* epílogo: néon */
#neonTease { position: absolute; inset: 0; z-index: 35; background: #000; display: grid; place-items: center; animation: fadeIn .4s; }
#neonTease .nscr { padding: 3vh 6vw; border-radius: 18px; border: 2px solid #ff2fd1; box-shadow: 0 0 30px #ff2fd1, inset 0 0 30px rgba(255,47,209,.35); background: radial-gradient(circle, rgba(60,0,60,.6), rgba(0,0,0,.9)); }
#neonTease .nclk { font-family: 'Courier New', monospace; font-weight: 900; font-size: calc(var(--u) * 4.4); letter-spacing: .12em; color: #7ff3ff; text-shadow: 0 0 8px #7ff3ff, 0 0 24px #00c8ff, 0 0 48px #ff2fd1; }
#neonTease .nbar { height: 3px; margin-top: 10px; background: linear-gradient(90deg, #ff2fd1, #7ff3ff); box-shadow: 0 0 12px #ff2fd1; animation: nbar 3.9s linear forwards; }
@keyframes nbar { from { width: 100%; } to { width: 0; } }
#neonTease.glitch .nscr { transform: translate(4px, -2px) skewX(-6deg); filter: hue-rotate(80deg) brightness(1.6); }
#neonTease.off .nscr { opacity: 0; transform: scaleY(.02); transition: .35s; }

/* títulos com legenda EN dentro de painéis */
.modal h2 i, .grimHead h2 i { display: block; font-style: italic; font-family: Outfit, sans-serif; font-weight: 400; letter-spacing: 0; color: var(--muted); font-size: .55em; margin-top: 2px; }
.mq b i { display: inline; font-size: .7em; color: var(--muted); font-family: Outfit; font-weight: 400; margin-left: 6px; }
.mq small i { display: inline; margin-left: 6px; opacity: .8; }
/* menu do título em ecrã baixo: duas colunas */
@media (max-height: 420px) {
  #titleMenu.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; min-width: min(560px, 86vw); }
  #titleMenu .btn { min-height: calc(var(--u) * 2.3); font-size: calc(var(--u) * .9); }
  #logo { width: min(48vw, 52vh * 1.47); }
}