:root {
  --ink: #ece7de;
  --ink-dim: #a8a298;
  --ember: #ff8a3a;
  --ember-hot: #ffc27a;
  --soul: #d8e6ff;
  --bg: #05060a;
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --title: 'Cinzel', 'Trajan Pro', Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--bg); overflow: hidden; color: var(--ink); font-family: var(--serif); user-select: none; -webkit-user-select: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; }
.hidden { display: none !important; }

/* ───── faixas de cinema */
#letterbox .bar { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 20; transition: height 0.9s cubic-bezier(.6,0,.2,1); pointer-events: none; }
#letterbox .top { top: 0; } #letterbox .bottom { bottom: 0; }
#letterbox.on .bar { height: 11vh; }

/* ───── HUD */
#hud { position: fixed; top: 22px; left: 26px; display: flex; align-items: center; gap: 6px; z-index: 10; pointer-events: none; transition: opacity 0.6s; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
#hud.dim { opacity: 0; }
.vessel { width: 92px; height: 114px; position: relative; }
.orb { width: 100%; height: 100%; overflow: visible; }
.orb-rim { fill: none; stroke: #c9b89c; stroke-width: 3; }
.lt-iron { fill: #26222c; stroke: #c9b89c; stroke-width: 2.2; stroke-linejoin: round; }
.lt-iron-line { fill: none; stroke: #c9b89c; stroke-width: 2.4; stroke-linecap: round; }
.lt-bar { fill: none; stroke: #3a3440; stroke-width: 2.2; }
#lumeFlame { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .25s; }
.orb-bg { fill: #0a0c14; }
.orb-horn { fill: #e8e2d6; }
.orb-curl { fill: none; stroke: #e8e2d6; stroke-width: 3; stroke-linecap: round; }
#lumeFill { filter: drop-shadow(0 0 6px #b8d0ff); transition: d .2s; }
.vessel.full .orb-rim { stroke: #ffd79a; filter: drop-shadow(0 0 8px #ffa040); }
.vessel.capped .orb-rim { stroke: #9a70ff; }
.right { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
#chamas { display: flex; gap: 5px; }
.chama { width: 30px; height: 38px; position: relative; transition: transform .25s; }
.chama svg { width: 100%; height: 100%; overflow: visible; }
.chama .shell { fill: #0c0d12; stroke: #e8e2d6; stroke-width: 2.4; }
.chama .fire { fill: url(#fireG); transform-origin: 50% 80%; }
.chama.on .fire { animation: flick 1.6s ease-in-out infinite; }
.chama:not(.on) .fire { opacity: 0; }
.chama.lost { animation: lose .5s ease-out; }
.chama.gain { animation: gain .6s ease-out; }
@keyframes flick { 0%,100% { transform: scale(1,1); } 50% { transform: scale(.94,1.05); } }
@keyframes lose { 0% { transform: scale(1.5); filter: brightness(3); } 100% { transform: scale(1); } }
@keyframes gain { 0% { transform: scale(0.4); filter: brightness(4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
#fagulhas { display: flex; align-items: center; gap: 8px; font-family: var(--title); font-size: 20px; letter-spacing: 1px; }
#fagulhas .ico { width: 14px; height: 14px; transform: rotate(45deg); background: radial-gradient(circle, #fff2d0 0%, #ffae50 45%, #d05010 100%); box-shadow: 0 0 10px #ff8a3a; }
#fagAdd { color: var(--ember-hot); font-size: 15px; opacity: 0; transition: opacity .3s; }
#fagAdd.show { opacity: 1; }
#hud.hurt .vessel { animation: shake .3s; }
@keyframes shake { 0%,100% { transform: translate(0,0);} 25% { transform: translate(-4px,2px);} 75% { transform: translate(4px,-2px);} }

/* ───── barra do chefe */
#bossbar { position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(720px, 70vw); z-index: 10; text-align: center; transition: opacity .8s; }
#bossbar .name { font-family: var(--title); letter-spacing: 8px; font-size: 15px; margin-bottom: 6px; color: #e8d8c8; text-shadow: 0 0 10px #000; }
#bossbar .bar { height: 10px; border: 1.5px solid #cdbfa8; background: rgba(10,6,4,.8); position: relative; }
#bossbar .fill, #bossbar .lag { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#bossbar .lag { background: #f0e0c0; transition: width .9s .3s; }
#bossbar .fill { background: linear-gradient(#ff9a50, #b03a18); z-index: 1; transition: width .12s; box-shadow: 0 0 12px #ff6a30; }
#bossbar.p2 .fill { background: linear-gradient(#c890ff, #5a20a0); box-shadow: 0 0 12px #9a60ff; }

/* ───── títulos */
#areaTitle { position: fixed; top: 16vh; left: 0; right: 0; text-align: center; z-index: 12; pointer-events: none; animation: areaIn 5s ease forwards; }
#areaTitle .main { font-family: var(--title); font-weight: 600; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: .18em; text-shadow: 0 0 24px rgba(0,0,0,.9), 0 0 2px #000; }
#areaTitle .sub { font-style: italic; font-size: clamp(16px, 1.6vw, 22px); color: var(--ink-dim); letter-spacing: .1em; margin-bottom: 4px; text-shadow: 0 0 10px #000; }
#areaTitle .orn, #bossTitle .orn { width: min(420px, 60vw); height: 14px; margin: 10px auto; background: radial-gradient(circle at 50% 50%, var(--ink) 0 3px, transparent 4px), linear-gradient(90deg, transparent, var(--ink) 40%, var(--ink) 60%, transparent) center/100% 1.5px no-repeat; opacity: .8; }
#areaTitle.big .main { font-size: clamp(56px, 9vw, 130px); font-weight: 800; letter-spacing: .12em; }
#areaTitle.big { top: 26vh; animation: areaIn 7s ease forwards; }
@keyframes areaIn { 0% { opacity: 0; transform: translateY(8px); filter: blur(6px);} 15% { opacity: 1; transform: none; filter: none;} 80% { opacity: 1;} 100% { opacity: 0; } }
#bossTitle { position: fixed; left: 0; right: 0; bottom: 16vh; text-align: center; z-index: 22; pointer-events: none; animation: bossIn 4.5s ease forwards; }
#bossTitle .sub { font-style: italic; font-size: clamp(18px, 1.8vw, 26px); color: #d8c0a8; text-shadow: 0 0 10px #000; }
#bossTitle .main { font-family: var(--title); font-weight: 800; font-size: clamp(48px, 7vw, 104px); letter-spacing: .14em; color: #f4e6d4; text-shadow: 0 0 30px rgba(255,110,40,.45), 0 0 4px #000; }
@keyframes bossIn { 0% { opacity: 0; letter-spacing: .4em;} 18% { opacity: 1; letter-spacing: .14em;} 82% { opacity: 1;} 100% { opacity: 0; } }

/* ───── dicas */
#prompt { position: fixed; left: 50%; bottom: 14vh; transform: translateX(-50%); z-index: 11; font-size: clamp(17px, 1.5vw, 22px); color: var(--ink); text-align: center; letter-spacing: .05em; text-shadow: 0 0 12px #000, 0 0 3px #000; transition: opacity .5s; pointer-events: none; }
#prompt kbd, #card kbd, .ctrl td kbd { font-family: var(--title); font-size: .8em; border: 1px solid rgba(236,231,222,.7); padding: 1px 7px 2px; border-radius: 3px; margin: 0 3px; background: rgba(0,0,0,.4); }
#interact { position: fixed; z-index: 11; transform: translate(-50%, -100%); font-family: var(--title); font-size: 15px; letter-spacing: .12em; color: var(--ink); text-shadow: 0 0 8px #000; pointer-events: none; white-space: nowrap; animation: pop .3s ease; }
#interact::before { content: '▲'; display: block; text-align: center; font-size: 10px; opacity: .8; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px);} }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -80%);} }

/* ───── diálogo */
#dialog { position: fixed; left: 50%; top: 8vh; transform: translateX(-50%); width: min(760px, 88vw); z-index: 25; padding: 26px 44px 30px; text-align: center;
  background: radial-gradient(ellipse at center, rgba(4,5,9,.92) 0%, rgba(4,5,9,.86) 60%, rgba(4,5,9,0) 100%); animation: dlgIn .35s ease; }
#dialog .orn { position: absolute; left: 10%; right: 10%; top: 6px; height: 12px; background: radial-gradient(circle at 50% 50%, var(--ink) 0 2.5px, transparent 3.5px), linear-gradient(90deg, transparent, rgba(236,231,222,.8) 30%, rgba(236,231,222,.8) 70%, transparent) center/100% 1px no-repeat; }
#dialog .name { font-family: var(--title); font-size: 15px; letter-spacing: .3em; color: var(--ember-hot); margin-bottom: 10px; text-transform: uppercase; }
#dialog .text { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.45; min-height: 2.9em; text-shadow: 0 0 6px #000; }
#dialog .text .dim { color: var(--ink-dim); font-style: italic; }
#dialog .next { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 11px; opacity: 0; animation: bob 1s infinite; }
#dialog.done .next { opacity: .85; }
#dialog.voice { background: none; }
#dialog.voice .text { font-style: italic; color: #fff4e0; text-shadow: 0 0 18px rgba(255,170,90,.8), 0 0 3px #000; font-size: clamp(21px, 1.9vw, 28px); }
#dialog.voice .name { color: #ffd8a0; }
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, -8px); } }

#narration { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 0 12vw; text-align: center; font-size: clamp(22px, 2.3vw, 36px); font-style: italic; line-height: 1.6; color: #e8e2d8; text-shadow: 0 0 20px rgba(0,0,0,.9); pointer-events: none; }
#narration span { opacity: 0; transition: opacity 1.4s ease, filter 1.4s ease; filter: blur(4px); }
#narration span.on { opacity: 1; filter: none; }
#narration .skip { position: fixed; right: 4vw; bottom: 5vh; font-size: 14px; letter-spacing: .15em; color: #6a655e; font-style: normal; }

/* ───── cartão de habilidade */
#card { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 28; width: min(620px, 90vw); text-align: center; padding: 40px 30px 30px; animation: cardIn .8s ease;
  background: radial-gradient(ellipse at center, rgba(4,4,8,.95) 0%, rgba(4,4,8,.9) 55%, rgba(4,4,8,0) 100%); }
#card .icon { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle, #fff6e0 0%, #ffcf80 25%, #ff8030 55%, transparent 72%); filter: drop-shadow(0 0 22px #ff9a40); animation: pulse 2s infinite; }
#card .title { font-family: var(--title); font-size: clamp(30px, 3vw, 44px); letter-spacing: .16em; margin-bottom: 12px; }
#card .desc { font-size: clamp(18px, 1.5vw, 22px); color: #cfc8bc; line-height: 1.5; margin-bottom: 16px; font-style: italic; }
#card .keys { font-size: 19px; }
#card .dismiss { margin-top: 22px; font-size: 13px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-dim); opacity: 0; transition: opacity .5s; }
#card.ready .dismiss { opacity: 1; animation: bob 1.4s infinite; }
@keyframes cardIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes pulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 34px #ffb060);} }

#toast { position: fixed; left: 50%; top: 22vh; transform: translateX(-50%); z-index: 26; font-family: var(--title); letter-spacing: .15em; font-size: 20px; text-shadow: 0 0 12px #000; animation: areaIn 3.5s ease forwards; pointer-events: none; text-align: center; }

/* ───── telas */
.screen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#title { background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.75) 100%); }
.logo { text-align: center; margin-top: -10vh; margin-bottom: 7vh; animation: logoIn 3s ease; }
.logo-main { font-family: var(--title); font-weight: 800; font-size: clamp(64px, 11vw, 168px); letter-spacing: .16em; padding-left: .16em;
  background: linear-gradient(180deg, #fffaf0 0%, #eadfcc 45%, #b69a78 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,140,60,.25)) drop-shadow(0 4px 2px rgba(0,0,0,.8)); }
.logo-sub { font-style: italic; font-size: clamp(18px, 2vw, 28px); color: #cfc3b0; letter-spacing: .12em; margin-top: 4px; }
.logo-sub::before, .logo-sub::after { content: ''; display: inline-block; width: 60px; height: 1px; background: #cfc3b0; vertical-align: middle; margin: 0 18px; opacity: .6; }
@keyframes logoIn { from { opacity: 0; filter: blur(12px); letter-spacing: .4em; } }
.menu { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.menu .item { font-family: var(--title); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: .2em; padding: 6px 36px; color: var(--ink-dim); cursor: pointer; position: relative; transition: color .2s, letter-spacing .3s; }
.menu .item.sel { color: #fff; letter-spacing: .26em; text-shadow: 0 0 14px rgba(255,190,120,.6); }
.menu .item.sel::before, .menu .item.sel::after { content: '◆'; position: absolute; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--ember-hot); }
.menu .item.sel::before { left: 8px; } .menu .item.sel::after { right: 8px; }
.menu .item.disabled { opacity: .3; }
.menu .item .val { color: var(--ember-hot); margin-left: 16px; letter-spacing: .1em; }
.foot { position: absolute; bottom: 4vh; font-size: 15px; color: #8a8478; letter-spacing: .1em; font-style: italic; }
#pause, #options, #controls { background: rgba(2,3,6,.72); backdrop-filter: blur(3px); }
.panel { text-align: center; padding: 30px 40px; }
.panel.wide { width: min(900px, 94vw); }
.ptitle { font-family: var(--title); font-size: 34px; letter-spacing: .3em; margin-bottom: 24px; }
.ptitle::after { content: ''; display: block; width: 220px; height: 12px; margin: 10px auto 0; background: radial-gradient(circle at 50% 50%, var(--ink) 0 2.5px, transparent 3.5px), linear-gradient(90deg, transparent, var(--ink), transparent) center/100% 1px no-repeat; }
.ctrl { margin: 0 auto 18px; border-collapse: collapse; font-size: 18px; }
.ctrl th { font-family: var(--title); font-weight: 400; font-size: 13px; letter-spacing: .2em; color: var(--ink-dim); padding: 4px 18px; }
.ctrl td { padding: 6px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ctrl td:first-child { text-align: left; color: #fff; }
.hint { font-style: italic; color: var(--ink-dim); margin-bottom: 18px; font-size: 16px; }

#death { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#death .txt { font-family: var(--title); font-size: clamp(22px, 2.2vw, 32px); letter-spacing: .4em; color: #b8a8c8; opacity: 0; animation: deathTxt 3s ease forwards; text-shadow: 0 0 20px #6030a0; }
@keyframes deathTxt { 30% { opacity: 1; } 75% { opacity: 1;} 100% { opacity: 0; } }

#credits { position: fixed; inset: 0; z-index: 36; overflow: hidden; pointer-events: none; }
#credits .roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; }
#credits h1 { font-family: var(--title); font-weight: 800; font-size: clamp(50px, 8vw, 110px); letter-spacing: .16em; margin-bottom: 8px; background: linear-gradient(180deg, #fffaf0, #b69a78); -webkit-background-clip: text; background-clip: text; color: transparent; }
#credits h2 { font-family: var(--title); font-size: 15px; letter-spacing: .4em; color: var(--ember-hot); margin: 60px 0 10px; font-weight: 400; }
#credits p { font-size: 24px; line-height: 1.5; text-shadow: 0 0 10px #000; }
#credits .it { font-style: italic; color: #cfc8bc; }
#credits .end { margin-top: 30vh; font-family: var(--title); letter-spacing: .3em; font-size: 22px; }

#loading { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 1s; }
#loading.gone { opacity: 0; pointer-events: none; }
.l-title { font-family: var(--title); font-size: 44px; letter-spacing: .3em; color: #d8cfc0; }
.l-bar { width: 220px; height: 1px; background: #222; }
.l-bar div { height: 100%; width: 0; background: var(--ember); box-shadow: 0 0 8px var(--ember); transition: width .3s; }
.l-txt { font-style: italic; color: #777; }

@media (max-width: 700px) {
  #hud { top: 12px; left: 12px; transform: scale(.8); transform-origin: top left; }
}

#map { background: radial-gradient(ellipse at center, rgba(8,9,14,.94), rgba(2,3,6,.97)); z-index: 42; padding: 3vh 3vw; }
#map .ptitle { margin-bottom: 8px; }
#mapCanvas { width: 100%; flex: 1; }
#map .mhint { font-style: italic; color: var(--ink-dim); font-size: 15px; margin-top: 6px; }