:root {
  --u: 1px;
  --fs: 1;
  --accent: #e2b04a;
  --accent2: #c0502f;
  --ink: #140e0a;
  --glass: rgba(20, 13, 9, .82);
  --line: rgba(226, 176, 74, .45);
  --text: #f6eedf;
  --muted: #cdbfa6;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --old: 'IM Fell English', 'Fraunces', Georgia, serif;
}
body[data-era="hoje"] {
  --accent: #5fd6e8;
  --accent2: #e84a8a;
  --glass: rgba(10, 14, 32, .84);
  --line: rgba(95, 214, 232, .45);
  --text: #eef3ff;
  --muted: #a9b4d6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070504; overflow: hidden; color: var(--text); font-family: var(--sans); }
body { display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; user-select: none; }
#game { position: relative; overflow: hidden; background: #0d0907; box-shadow: 0 0 80px rgba(0,0,0,.8); font-size: calc(var(--u) * 20); }
#cv, #fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#cv { touch-action: none; }
#fx { pointer-events: none; z-index: 40; }
button { font-family: var(--sans); cursor: pointer; }

/* ---------- barra superior ---------- */
#topbar { position: absolute; top: calc(var(--u)*14); left: calc(var(--u)*18); right: calc(var(--u)*18); display: flex; justify-content: space-between; align-items: center; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .6s; }
#topbar.show { opacity: 1; pointer-events: auto; }
#chlabel { font-family: var(--serif); font-style: italic; font-size: calc(var(--fs)*var(--u)*19); color: var(--text); text-shadow: 0 2px 8px rgba(0,0,0,.8); letter-spacing: .02em; }
.tb { display: flex; gap: calc(var(--u)*8); }
.tb button { background: var(--glass); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: calc(var(--u)*7) calc(var(--u)*14); font-size: calc(var(--fs)*var(--u)*15); backdrop-filter: blur(6px); transition: transform .15s, background .2s; }
.tb button:hover { transform: translateY(-2px); background: rgba(60,40,20,.9); }

/* ---------- HUD ---------- */
#hud { position: absolute; top: calc(var(--u)*58); right: calc(var(--u)*18); display: flex; flex-direction: column; gap: calc(var(--u)*8); z-index: 19; opacity: 0; transform: translateX(30px); transition: all .5s; pointer-events: none; }
#hud.show { opacity: 1; transform: none; }
.meter { display: grid; grid-template-columns: calc(var(--u)*26) calc(var(--u)*62) calc(var(--u)*150); grid-template-rows: auto auto; align-items: center; background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*14); padding: calc(var(--u)*8) calc(var(--u)*12); backdrop-filter: blur(6px); }
.meter .mi { grid-row: 1 / span 2; font-size: calc(var(--fs)*var(--u)*22); color: var(--accent); }
.meter .ml { font-weight: 800; font-size: calc(var(--fs)*var(--u)*14); text-transform: uppercase; letter-spacing: .08em; }
.meter .mv { grid-column: 2 / span 2; font-size: calc(var(--fs)*var(--u)*13); color: var(--muted); }
.meter .mb { height: calc(var(--u)*9); background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
.meter .mb i { display: block; height: 100%; border-radius: 99px; transition: background .3s; }
.meter i.gold { background: linear-gradient(90deg, #b8862a, #ffd76a); box-shadow: 0 0 10px #ffcf5a; }
.meter i.red { background: linear-gradient(90deg, #8a1f1a, #ff6b5a); box-shadow: 0 0 10px #ff4a3a; }
.meter i.blue { background: linear-gradient(90deg, #2a5aa0, #7ac8ff); box-shadow: 0 0 10px #5ab0ff; }
.m-rumor .mi { color: #ff6b5a; } .m-rede .mi { color: #7ac8ff; } .m-ouro .mi { color: #ffd76a; }
.meter.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.08); } }

#hint { position: absolute; top: calc(var(--u)*60); left: 50%; transform: translate(-50%, -20px); z-index: 21; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: calc(var(--u)*9) calc(var(--u)*20); font-size: calc(var(--fs)*var(--u)*16); opacity: 0; transition: all .4s; pointer-events: none; max-width: 62%; text-align: center; }
#hint.show { opacity: 1; transform: translate(-50%, 0); }
#toasts { position: absolute; top: calc(var(--u)*70); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*8); pointer-events: none; }
.toast { background: var(--glass); border: 1px solid var(--line); color: var(--text); padding: calc(var(--u)*10) calc(var(--u)*20); border-radius: calc(var(--u)*12); font-size: calc(var(--fs)*var(--u)*17); animation: tin .4s; transition: all .5s; backdrop-filter: blur(6px); }
.toast.out { opacity: 0; transform: translateY(-10px); }
@keyframes tin { from { opacity: 0; transform: translateY(10px) scale(.95); } }

/* ---------- diálogo ---------- */
#dcatch { position: absolute; inset: 0; z-index: 24; display: none; cursor: pointer; }
#dialog { position: absolute; left: calc(var(--u)*90); right: calc(var(--u)*90); bottom: calc(var(--u)*18); min-height: calc(var(--u)*124); z-index: 25; display: flex; gap: calc(var(--u)*18); align-items: stretch; padding: calc(var(--u)*20) calc(var(--u)*30); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*22); backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0,0,0,.6); opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2,1.3,.4,1); cursor: pointer; }
#dialog.show { opacity: 1; transform: none; pointer-events: auto; }
#portrait { width: calc(var(--u)*130); height: calc(var(--u)*130); flex: none; border-radius: calc(var(--u)*18); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), rgba(0,0,0,.25)); border: 1px solid var(--line); align-self: center; }
.dbody { flex: 1; display: flex; flex-direction: column; justify-content: center; }
#dname { font-family: var(--serif); font-weight: 700; font-size: calc(var(--fs)*var(--u)*24); color: var(--accent); margin-bottom: calc(var(--u)*6); letter-spacing: .01em; }
#dtext { font-size: calc(var(--fs)*var(--u)*23); line-height: 1.5; min-height: calc(var(--u)*70); }
#dialog.narr #dtext { font-family: var(--serif); font-style: italic; font-size: calc(var(--fs)*var(--u)*24); color: #f3e6cc; text-align: center; }
body[data-era="hoje"] #dialog.narr #dtext { color: #dfe8ff; }
#dialog.narr { justify-content: center; top: calc(var(--u)*64); bottom: auto; min-height: 0; left: calc(var(--u)*160); right: calc(var(--u)*160); padding: calc(var(--u)*18) calc(var(--u)*30); transform: translateY(-30px); }
#dialog.narr.show { transform: none; }
#dialog.narr #dtext { min-height: 0; }
#dnext { position: absolute; right: calc(var(--u)*22); bottom: calc(var(--u)*12); color: var(--accent); font-size: calc(var(--fs)*var(--u)*16); animation: nb 1s infinite; transition: opacity .2s; }
@keyframes nb { 50% { transform: translateY(4px); } }
.term { color: var(--accent); border-bottom: 2px dotted var(--accent); cursor: help; font-style: normal; }
#tip { position: absolute; z-index: 60; max-width: calc(var(--u)*380); background: #fff8e8; color: #2a1b12; padding: calc(var(--u)*12) calc(var(--u)*16); border-radius: calc(var(--u)*12); font-size: calc(var(--fs)*var(--u)*16); line-height: 1.45; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(6px); transition: all .2s; }
#tip.show { opacity: 1; transform: none; }
#tip b { display: block; font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*19); margin-bottom: calc(var(--u)*4); color: #8a3a12; }

/* ---------- escolhas ---------- */
#choices { position: absolute; left: 50%; bottom: calc(var(--u)*200); transform: translateX(-50%); width: calc(var(--u)*760); z-index: 27; display: none; flex-direction: column; gap: calc(var(--u)*10); }
#choices.show { display: flex; }
#choices.low { bottom: calc(var(--u)*40); }
.ctitle { text-align: center; font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*26); margin-bottom: calc(var(--u)*6); text-shadow: 0 2px 10px #000; }
.choice { display: flex; align-items: center; gap: calc(var(--u)*14); text-align: left; width: 100%; padding: calc(var(--u)*13) calc(var(--u)*18); background: var(--glass); color: var(--text); border: 1px solid var(--line); border-radius: calc(var(--u)*16); font-size: calc(var(--fs)*var(--u)*20); backdrop-filter: blur(8px); animation: cin .35s both cubic-bezier(.2,1.2,.4,1); transition: transform .15s, background .2s, border-color .2s; }
.choice:hover { transform: translateX(6px); border-color: var(--accent); background: rgba(70,45,22,.92); }
body[data-era="hoje"] .choice:hover { background: rgba(20,40,70,.95); }
.choice.primary { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 24px rgba(226,176,74,.25); }
.choice.disabled { opacity: .45; cursor: not-allowed; }
.ck { flex: none; width: calc(var(--u)*30); height: calc(var(--u)*30); border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 800; font-size: calc(var(--fs)*var(--u)*15); }
.ct small { display: block; color: var(--muted); font-size: calc(var(--fs)*var(--u)*15); margin-top: calc(var(--u)*3); }
@keyframes cin { from { opacity: 0; transform: translateY(14px); } }

/* ---------- cartões ---------- */
#card { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(5,3,2,.55); backdrop-filter: blur(3px); cursor: pointer; }
#card.show { display: flex; animation: fin .4s; }
@keyframes fin { from { opacity: 0; } }
.cardnext { position: absolute; bottom: calc(var(--u)*28); left: 50%; transform: translateX(-50%); font-size: calc(var(--fs)*var(--u)*16); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; animation: nb 1.2s infinite; }
.doc { position: relative; width: calc(var(--u)*720); padding: calc(var(--u)*46) calc(var(--u)*56); background: radial-gradient(ellipse at 40% 30%, #f6ead0, #dcc496 75%, #c3a571); color: #2e1d10; border-radius: calc(var(--u)*6); box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 0 60px rgba(120,80,30,.35); font-family: var(--old); font-size: calc(var(--fs)*var(--u)*27); line-height: 1.45; animation: docin .6s cubic-bezier(.2,1.2,.4,1); transform: rotate(-.8deg); }
@keyframes docin { from { transform: translateY(40px) rotate(4deg) scale(.9); opacity: 0; } }
.doc p { margin: 0 0 .6em; }
.dochead { font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*16); letter-spacing: .25em; text-transform: uppercase; color: #7a4a20; margin-bottom: calc(var(--u)*14); }
.docsign { text-align: right; font-style: italic; margin-top: calc(var(--u)*10); }
.doc .term { color: #8a3a12; border-color: #8a3a12; }
.seal { position: absolute; right: calc(var(--u)*36); bottom: calc(var(--u)*-26); width: calc(var(--u)*92); height: calc(var(--u)*92); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9443a, #7a1a12); color: #f3c2a8; display: grid; place-items: center; font-size: calc(var(--fs)*var(--u)*40); box-shadow: 0 6px 16px rgba(0,0,0,.5); transform: scale(2.6); opacity: 0; }
.seal.on { animation: stamp .35s forwards cubic-bezier(.5,0,.7,1.6); }
@keyframes stamp { to { transform: scale(1) rotate(-12deg); opacity: 1; } }
body[data-era="hoje"] .doc { background: #f4f6fb; color: #1a2034; font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*23); transform: none; border-radius: calc(var(--u)*14); }
body[data-era="hoje"] .dochead { color: #3a5aa0; }
.note { width: calc(var(--u)*680); padding: calc(var(--u)*34) calc(var(--u)*40); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*22); backdrop-filter: blur(10px); animation: docin .5s cubic-bezier(.2,1.2,.4,1); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.notek { color: var(--accent); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: calc(var(--fs)*var(--u)*14); margin-bottom: calc(var(--u)*10); }
.note p { font-size: calc(var(--fs)*var(--u)*23); line-height: 1.5; margin: 0; }
.notesrc { margin-top: calc(var(--u)*14); color: var(--muted); font-size: calc(var(--fs)*var(--u)*14); font-style: italic; }
.chap { text-align: center; animation: chin 1.2s cubic-bezier(.2,1,.3,1); }
.chk { font-size: calc(var(--fs)*var(--u)*18); letter-spacing: .4em; text-transform: uppercase; color: var(--accent); }
.chap h1 { font-family: var(--serif); font-weight: 900; font-size: calc(var(--fs)*var(--u)*110); margin: calc(var(--u)*6) 0; line-height: 1; text-shadow: 0 6px 40px rgba(0,0,0,.8); letter-spacing: -.01em; }
.chline { width: calc(var(--u)*0); height: 3px; background: var(--accent); margin: calc(var(--u)*14) auto; animation: line 1.4s .4s forwards cubic-bezier(.2,1,.3,1); }
@keyframes line { to { width: calc(var(--u)*320); } }
.chs { font-family: var(--serif); font-style: italic; font-size: calc(var(--fs)*var(--u)*26); color: var(--muted); }
@keyframes chin { from { opacity: 0; letter-spacing: .3em; filter: blur(8px); } }
#card.cchap { background: rgba(5,3,2,.72); }
.big { text-align: center; max-width: calc(var(--u)*900); font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*40); line-height: 1.35; animation: chin 1s; }
.big small { display: block; font-family: var(--sans); font-size: calc(var(--fs)*var(--u)*18); color: var(--muted); margin-top: calc(var(--u)*16); line-height: 1.5; }
.big b { color: var(--accent); }

/* ---------- painel ---------- */
#panel { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
#panel.show { display: flex; animation: fin .3s; }
.pbox { width: calc(var(--u)*760); max-height: 86%; display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*22); box-shadow: 0 30px 80px rgba(0,0,0,.7); }
#panel.wide .pbox { width: calc(var(--u)*1080); }
.phd { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u)*18) calc(var(--u)*26); border-bottom: 1px solid var(--line); }
.phd h2 { margin: 0; font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*30); }
#pclose { background: none; border: 1px solid var(--line); color: var(--text); width: calc(var(--u)*38); height: calc(var(--u)*38); border-radius: 50%; font-size: calc(var(--fs)*var(--u)*18); }
#pbody { padding: calc(var(--u)*20) calc(var(--u)*28); overflow: auto; font-size: calc(var(--fs)*var(--u)*18); line-height: 1.55; user-select: text; }
#pbody h3 { font-family: var(--serif); color: var(--accent); margin: 1em 0 .3em; }
#pbody a { color: var(--accent); }
.gloss dt { font-family: var(--serif); font-weight: 700; color: var(--accent); font-size: calc(var(--fs)*var(--u)*21); margin-top: calc(var(--u)*12); }
.gloss dt.hl { text-decoration: underline; }
.gloss dd { margin: calc(var(--u)*2) 0 0; color: var(--text); }
.chlist { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u)*12); }
.chlist button { text-align: left; padding: calc(var(--u)*16); border-radius: calc(var(--u)*14); background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text); font-size: calc(var(--fs)*var(--u)*18); }
.chlist button b { display: block; font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*24); color: var(--accent); }
.chlist button:disabled { opacity: .35; cursor: not-allowed; }
.chlist button:not(:disabled):hover { background: rgba(255,255,255,.12); }

/* ---------- tela de título ---------- */
#title { position: absolute; inset: 0; z-index: 35; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.55)); }
#title.show { display: flex; }
#title .tk { letter-spacing: .5em; text-transform: uppercase; font-size: calc(var(--fs)*var(--u)*16); color: var(--accent); animation: chin 2s; }
#title h1 { font-family: var(--serif); font-weight: 900; font-size: calc(var(--fs)*var(--u)*130); line-height: .95; margin: calc(var(--u)*10) 0; text-shadow: 0 10px 60px rgba(0,0,0,.9); animation: chin 2.2s; }
#title h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
#title .ts { font-family: var(--serif); font-style: italic; font-size: calc(var(--fs)*var(--u)*24); color: #e9dcc4; max-width: calc(var(--u)*760); animation: chin 2.6s; text-shadow: 0 2px 10px #000; }
#title .tbtns { display: flex; gap: calc(var(--u)*14); margin-top: calc(var(--u)*36); animation: chin 3s; flex-wrap: wrap; justify-content: center; }
#title .tbtns button { padding: calc(var(--u)*14) calc(var(--u)*30); border-radius: 999px; font-size: calc(var(--fs)*var(--u)*20); font-weight: 600; background: var(--glass); color: var(--text); border: 1px solid var(--line); backdrop-filter: blur(6px); transition: all .2s; }
#title .tbtns button.pri { background: var(--accent); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 40px rgba(226,176,74,.45); }
#title .tbtns button:hover { transform: translateY(-3px) scale(1.03); }
#title .warn { position: absolute; bottom: calc(var(--u)*22); font-size: calc(var(--fs)*var(--u)*14); color: #bfae92; max-width: calc(var(--u)*900); line-height: 1.5; }

/* ---------- minigames (DOM) ---------- */
#mg { position: absolute; inset: 0; z-index: 18; pointer-events: none; }
#mg > * { pointer-events: auto; }
.mgbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u)*22); display: flex; gap: calc(var(--u)*12); }
.mgbtn { position: relative; min-width: calc(var(--u)*120); padding: calc(var(--u)*12) calc(var(--u)*16); border-radius: calc(var(--u)*16); background: var(--glass); border: 1px solid var(--line); color: var(--text); font-size: calc(var(--fs)*var(--u)*17); font-weight: 600; backdrop-filter: blur(8px); transition: transform .12s, border-color .2s, opacity .2s; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*4); }
.mgbtn:hover { transform: translateY(-3px); border-color: var(--accent); }
.mgbtn:active { transform: scale(.95); }
.mgbtn canvas { width: calc(var(--u)*56); height: calc(var(--u)*44); }
.mgbtn .k { position: absolute; top: calc(var(--u)*6); left: calc(var(--u)*8); font-size: calc(var(--fs)*var(--u)*12); color: var(--accent); }
.mgbtn.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.mgbtn.off { opacity: .4; pointer-events: none; }
.mgbtn small { font-weight: 400; color: var(--muted); font-size: calc(var(--fs)*var(--u)*13); }
.mgtimer { position: absolute; top: calc(var(--u)*58); left: calc(var(--u)*18); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*14); padding: calc(var(--u)*10) calc(var(--u)*16); font-size: calc(var(--fs)*var(--u)*18); backdrop-filter: blur(6px); min-width: calc(var(--u)*200); }
.mgtimer b { font-size: calc(var(--fs)*var(--u)*26); font-family: var(--serif); display: block; }
.mgtimer .tb2 { height: calc(var(--u)*6); background: rgba(255,255,255,.12); border-radius: 9px; margin-top: calc(var(--u)*6); overflow: hidden; }
.mgtimer .tb2 i { display: block; height: 100%; background: var(--accent); }

/* cartões de pista (devassa) */
.clues { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u)*24); display: flex; gap: calc(var(--u)*12); }
.clue { width: calc(var(--u)*190); padding: calc(var(--u)*14); border-radius: calc(var(--u)*14); background: linear-gradient(160deg, #f6ead0, #dcc496); color: #2e1d10; border: 0; text-align: left; font-family: var(--sans); font-size: calc(var(--fs)*var(--u)*15); line-height: 1.35; box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: transform .15s; animation: cin .35s both; }
.clue b { display: block; font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*19); color: #8a3a12; margin-bottom: calc(var(--u)*4); }
.clue:hover { transform: translateY(-8px) rotate(-1deg); }
.clue.cancel { background: var(--glass); color: var(--text); border: 1px solid var(--line); display: grid; place-items: center; font-size: calc(var(--fs)*var(--u)*17); }
.testimony { position: absolute; left: calc(var(--u)*90); right: calc(var(--u)*90); bottom: calc(var(--u)*18); padding: calc(var(--u)*14) calc(var(--u)*24); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*22); backdrop-filter: blur(10px); }
.testimony .tw { font-family: var(--serif); color: var(--accent); font-size: calc(var(--fs)*var(--u)*22); font-weight: 700; display: flex; justify-content: space-between; }
.testimony .tw small { font-family: var(--sans); font-weight: 400; color: var(--muted); font-size: calc(var(--fs)*var(--u)*15); }
.testimony .tt { font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*23); line-height: 1.35; margin: calc(var(--u)*6) 0 calc(var(--u)*10); min-height: calc(var(--u)*30); animation: fin .3s; }
.testimony .tbtns2 { display: flex; gap: calc(var(--u)*10); justify-content: flex-end; flex-wrap: wrap; }
.testimony .tbtns2 button { padding: calc(var(--u)*10) calc(var(--u)*18); border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text); font-size: calc(var(--fs)*var(--u)*17); }
.testimony .tbtns2 button.pri { background: var(--accent2); border-color: var(--accent2); color: #fff; font-weight: 800; }
.testimony .tbtns2 button:hover { filter: brightness(1.2); }
.hearts { position: absolute; top: calc(var(--u)*58); left: calc(var(--u)*18); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*14); padding: calc(var(--u)*8) calc(var(--u)*14); font-size: calc(var(--fs)*var(--u)*16); }
.hearts span { color: var(--accent); font-size: calc(var(--fs)*var(--u)*22); letter-spacing: .1em; }
.stampbig { position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-8deg) scale(3); font-family: var(--serif); font-weight: 900; font-size: calc(var(--fs)*var(--u)*96); color: #fff; background: var(--accent2); padding: calc(var(--u)*8) calc(var(--u)*40); border: calc(var(--u)*6) solid #fff; border-radius: calc(var(--u)*12); opacity: 0; animation: bigstamp 1.6s forwards; box-shadow: 0 20px 60px rgba(0,0,0,.6); pointer-events: none; white-space: nowrap; z-index: 29; }
@keyframes bigstamp { 12% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1); } 80% { opacity: 1; transform: translate(-50%,-50%) rotate(-8deg) scale(1.04); } 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(1.1); } }

/* ---------- celular ---------- */
#phone { position: absolute; right: calc(var(--u)*60); top: 50%; width: calc(var(--u)*360); height: calc(var(--u)*640); transform: translate(140%, -50%) rotate(8deg); z-index: 22; transition: transform .7s cubic-bezier(.2,1.1,.3,1); }
#phone.show { transform: translate(0, -50%) rotate(0); }
#phone.left { right: auto; left: calc(var(--u)*60); }
.pscreen { position: absolute; inset: 0; border-radius: calc(var(--u)*46); background: #0b0f1c; border: calc(var(--u)*10) solid #15192a; box-shadow: 0 40px 80px rgba(0,0,0,.7), 0 0 0 2px #2a3048; overflow: hidden; display: flex; flex-direction: column; }
.pnotch { position: absolute; top: calc(var(--u)*8); left: 50%; transform: translateX(-50%); width: calc(var(--u)*100); height: calc(var(--u)*24); background: #000; border-radius: 99px; z-index: 2; }
.phead { display: flex; gap: calc(var(--u)*10); align-items: center; padding: calc(var(--u)*44) calc(var(--u)*14) calc(var(--u)*10); background: #14203a; font-size: calc(var(--fs)*var(--u)*16); }
.phead small { display: block; color: #8aa0c8; font-size: calc(var(--fs)*var(--u)*12); }
.pav { width: calc(var(--u)*38); height: calc(var(--u)*38); border-radius: 50%; background: #2a3a5a; display: grid; place-items: center; }
.pmsgs { flex: 1; overflow-y: auto; padding: calc(var(--u)*12); display: flex; flex-direction: column; gap: calc(var(--u)*8); background: #0e1426; scrollbar-width: none; }
.pm { max-width: 86%; background: #1c2742; border-radius: calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*4); padding: calc(var(--u)*8) calc(var(--u)*11); font-size: calc(var(--fs)*var(--u)*15); line-height: 1.38; animation: pmin .35s cubic-bezier(.2,1.3,.4,1); position: relative; }
.pm.me { align-self: flex-end; background: #1e5a52; border-radius: calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*4) calc(var(--u)*14); }
.pm.sys { align-self: center; background: rgba(255,255,255,.08); font-size: calc(var(--fs)*var(--u)*12); color: #a9b4d6; }
@keyframes pmin { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.pfrom { font-weight: 800; font-size: calc(var(--fs)*var(--u)*13); margin-bottom: calc(var(--u)*2); }
.pfwd { font-style: italic; color: #8aa0c8; font-size: calc(var(--fs)*var(--u)*12); }
.ptime { text-align: right; font-size: calc(var(--fs)*var(--u)*11); color: #7a88a8; margin-top: calc(var(--u)*2); }
.pimg { height: calc(var(--u)*120); border-radius: calc(var(--u)*10); background: linear-gradient(135deg, #3a3a4a, #5a5a6a); display: grid; place-items: center; margin: calc(var(--u)*4) 0; filter: blur(.4px); position: relative; overflow: hidden; }
.pimg span { font-size: calc(var(--fs)*var(--u)*36); opacity: .6; }
.pimg em { position: absolute; bottom: calc(var(--u)*6); left: calc(var(--u)*8); font-size: calc(var(--fs)*var(--u)*11); color: #ccd; }
.paudio { display: flex; align-items: center; gap: calc(var(--u)*8); }
.paudio span { width: calc(var(--u)*30); height: calc(var(--u)*30); border-radius: 50%; background: #5fd6e8; color: #0b0f1c; display: grid; place-items: center; font-size: calc(var(--fs)*var(--u)*13); }
.wave { display: flex; gap: 2px; align-items: center; height: calc(var(--u)*24); }
.wave i { width: 2px; background: #8aa0c8; border-radius: 2px; animation: wv 1s infinite alternate; }
.wave i:nth-child(3n) { animation-delay: .2s; } .wave i:nth-child(3n+1) { animation-delay: .4s; }
@keyframes wv { from { height: 20%; } to { height: 100%; } }
.paudio small { color: #8aa0c8; font-size: calc(var(--fs)*var(--u)*11); }
.pfoot { display: flex; justify-content: space-between; align-items: center; margin: calc(var(--u)*8); padding: calc(var(--u)*10) calc(var(--u)*14); border-radius: 99px; background: #1a2238; color: #6a78a0; font-size: calc(var(--fs)*var(--u)*14); }
.pfoot i { color: #5fd6e8; font-style: normal; }
.mirror { margin-top: calc(var(--u)*6); padding: calc(var(--u)*7) calc(var(--u)*10); border-radius: calc(var(--u)*8); background: linear-gradient(135deg, #f1e2bf, #d8be8a); color: #3a2410; font-family: var(--old); font-size: calc(var(--fs)*var(--u)*15); line-height: 1.3; opacity: 0; transform: scaleY(0); transform-origin: top; transition: all .6s cubic-bezier(.2,1.2,.4,1); }
.mirror.on { opacity: 1; transform: none; }
.mirror span { display: inline-block; font-family: var(--sans); font-weight: 800; font-size: calc(var(--fs)*var(--u)*11); background: #7a3a12; color: #f6ead0; padding: 1px 6px; border-radius: 4px; margin-right: 6px; }

/* ---------- rede de boatos (ato III) ---------- */
.netbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--u)*20); display: flex; gap: calc(var(--u)*10); }
.netlegend { position: absolute; left: calc(var(--u)*18); bottom: calc(var(--u)*20); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*14); padding: calc(var(--u)*10) calc(var(--u)*14); font-size: calc(var(--fs)*var(--u)*14); line-height: 1.7; }
.netlegend i { display: inline-block; width: calc(var(--u)*12); height: calc(var(--u)*12); border-radius: 50%; margin-right: calc(var(--u)*6); vertical-align: -1px; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* ---------- abertura do TDE ---------- */
#intro { position: absolute; inset: 0; z-index: 36; display: none; pointer-events: none; }
#intro.show { display: block; }
#intro .ik { position: absolute; top: calc(var(--u)*30); left: 0; right: 0; text-align: center; font-size: calc(var(--fs)*var(--u)*15); letter-spacing: .3em; text-transform: uppercase; color: var(--accent); text-shadow: 0 2px 8px #000; }
#intro .ibox { position: absolute; left: 50%; bottom: calc(var(--u)*70); transform: translateX(-50%); width: calc(var(--u)*980); padding: calc(var(--u)*24) calc(var(--u)*36); background: var(--glass); border: 1px solid var(--line); border-radius: calc(var(--u)*22); backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
#intro h2 { margin: 0 0 calc(var(--u)*10); font-family: var(--serif); font-weight: 900; font-size: calc(var(--fs)*var(--u)*40); line-height: 1.1; }
#intro .icap { font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*21); line-height: 1.5; color: #f1e6d0; }
#intro .icap span { opacity: .18; transition: opacity .35s; }
#intro .icap span.on { opacity: 1; }
#intro .icard { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); width: calc(var(--u)*900); text-align: center; animation: chin 1.4s; }
#intro .icard .iu { font-family: var(--serif); font-size: calc(var(--fs)*var(--u)*22); color: #e9dcc4; line-height: 1.5; }
#intro .icard h1 { font-family: var(--serif); font-weight: 900; font-size: calc(var(--fs)*var(--u)*64); margin: calc(var(--u)*14) 0 calc(var(--u)*6); }
#intro .icard .itema { font-family: var(--serif); font-style: italic; font-size: calc(var(--fs)*var(--u)*26); color: var(--accent); }
#intro .icard .ipeople { display: flex; justify-content: center; gap: calc(var(--u)*40); margin-top: calc(var(--u)*30); }
#intro .icard .ipeople div { font-size: calc(var(--fs)*var(--u)*15); color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
#intro .icard .ipeople b { display: block; font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: calc(var(--fs)*var(--u)*24); color: var(--text); margin-top: calc(var(--u)*6); }
#intro .ictrl { position: absolute; bottom: calc(var(--u)*22); left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: calc(var(--u)*16); pointer-events: auto; }
#intro .dots { display: flex; gap: calc(var(--u)*8); }
#intro .dots i { width: calc(var(--u)*10); height: calc(var(--u)*10); border-radius: 50%; background: rgba(255,255,255,.25); transition: all .3s; }
#intro .dots i.on { background: var(--accent); width: calc(var(--u)*28); border-radius: 99px; }
#intro .ictrl button { background: var(--glass); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: calc(var(--u)*8) calc(var(--u)*18); font-size: calc(var(--fs)*var(--u)*15); }
.refs p { margin: 0 0 .9em; text-indent: 0; }
.refs h3 { margin-top: 1.2em; }
#intro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(8,5,3,.55), rgba(8,5,3,.15) 70%); }
#intro .icard, #intro .ibox, #intro .ik, #intro .ictrl { z-index: 1; }
#intro .icard .iu, #intro .icard h1, #intro .icard .ipeople { text-shadow: 0 2px 14px rgba(0,0,0,.9); }
#intro .ibox { top: calc(var(--u)*70); bottom: auto; }
body.clean #topbar, body.clean #hud, body.clean #hint, body.clean #toasts, body.clean .mgtimer, body.clean #dialog { display: none !important; }

/* =========================================================
   MULTIDISPOSITIVO
   ========================================================= */
html, body { height: 100%; height: 100dvh; overscroll-behavior: none; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
#game { touch-action: none; }
#pbody, .pmsgs, #choices { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* telas pequenas (fonte ampliada): layout compacto */
body.compact #dialog { left: calc(var(--u)*40); right: calc(var(--u)*40); bottom: calc(var(--u)*12); padding: calc(var(--u)*14) calc(var(--u)*22); gap: calc(var(--u)*14); min-height: 0; }
body.compact #dialog.narr { left: calc(var(--u)*70); right: calc(var(--u)*70); top: calc(var(--u)*56); }
body.compact #portrait { width: calc(var(--u)*104); height: calc(var(--u)*104); }
body.compact #choices { width: calc(var(--u)*980); bottom: calc(var(--u)*16); max-height: calc(var(--u)*600); overflow-y: auto; gap: calc(var(--u)*8); }
body.compact .choice { padding: calc(var(--u)*10) calc(var(--u)*16); }
body.compact .doc, body.compact .note { width: calc(var(--u)*1000); max-height: calc(var(--u)*640); overflow: auto; padding: calc(var(--u)*30) calc(var(--u)*40); }
body.compact .chap h1 { font-size: calc(var(--u)*110); }
body.compact .testimony { left: calc(var(--u)*30); right: calc(var(--u)*30); bottom: calc(var(--u)*10); }
body.compact .clue { width: calc(var(--u)*220); }
body.compact .clues { flex-wrap: wrap; justify-content: center; width: calc(var(--u)*1200); bottom: calc(var(--u)*12); }
body.compact #hud { top: calc(var(--u)*52); gap: calc(var(--u)*6); }
body.compact .meter { grid-template-columns: calc(var(--u)*24) calc(var(--u)*58) calc(var(--u)*120); padding: calc(var(--u)*6) calc(var(--u)*10); }
body.compact .meter .mv { display: none; }
body.compact .tb button { padding: calc(var(--u)*6) calc(var(--u)*12); }
body.compact #hint { max-width: 70%; white-space: normal; text-align: center; border-radius: calc(var(--u)*18); }
body.compact .pbox, body.compact #panel.wide .pbox { width: calc(var(--u)*1180); max-height: 94%; }
body.compact #phone { height: calc(var(--u)*660); width: calc(var(--u)*400); right: calc(var(--u)*30); }
body.compact .mgbtn { min-width: calc(var(--u)*130); }
body.compact #intro .ibox { width: calc(var(--u)*1150); padding: calc(var(--u)*16) calc(var(--u)*26); top: calc(var(--u)*60); }
body.compact #title .tbtns { margin-top: calc(var(--u)*20); }
body.compact #title .warn { display: none; }

/* controles de toque (só aparecem no celular, enquanto se anda pela cena) */
#touch { position: absolute; inset: 0; z-index: 23; pointer-events: none; opacity: 0; transition: opacity .25s; }
#touch.show { opacity: 1; }
#touch.show button { pointer-events: auto; }
#touch button { position: absolute; border: 2px solid rgba(255,255,255,.55); background: rgba(20,13,9,.5); color: #fff; border-radius: 50%; backdrop-filter: blur(4px); display: grid; place-items: center; user-select: none; -webkit-user-select: none; }
#touch button.on { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: scale(.94); }
#touch .pad button { bottom: calc(var(--u)*34); width: calc(var(--u)*124); height: calc(var(--u)*124); font-size: calc(var(--u)*48); }
#touch .tb-l { left: calc(var(--u)*34); }
#touch .tb-r { left: calc(var(--u)*176); }
#touch .tb-act { right: calc(var(--u)*40); bottom: calc(var(--u)*40); width: calc(var(--u)*150); height: calc(var(--u)*150); font-size: calc(var(--u)*58); opacity: .45; transition: opacity .2s, transform .1s; }
#touch.ready .tb-act { opacity: 1; border-color: var(--accent); box-shadow: 0 0 calc(var(--u)*30) rgba(226,176,74,.6); animation: pulse 1.4s infinite; }
#touch .tb-act small { position: absolute; bottom: calc(var(--u)*-34); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: calc(var(--fs)*var(--u)*17); background: rgba(20,13,9,.75); padding: 2px 8px; border-radius: 99px; max-width: calc(var(--u)*320); overflow: hidden; text-overflow: ellipsis; }
#touch .tb-act small:empty { display: none; }
@keyframes pulse { 50% { box-shadow: 0 0 calc(var(--u)*50) rgba(226,176,74,.9); } }

/* botão de tela cheia (celular) */
#btn-full { display: none; }
body.mobile #btn-full { display: inline-block; }
body.mobile .tb button:hover { transform: none; }

/* aviso para girar o celular */
#rotate { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; box-sizing: border-box; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #0d0907; color: #f6eedf; text-align: center; padding: 24px; font-family: var(--sans); }
#rotate b { font-family: var(--serif); font-size: 26px; }
#rotate span { color: #cdbfa6; font-size: 16px; max-width: 280px; }
body.portrait #rotate { display: flex; }
body.portrait #game { display: none; }
#rotate .phoneicon { width: 54px; height: 92px; border: 4px solid #e2b04a; border-radius: 12px; position: relative; animation: rot 2.2s ease-in-out infinite; }
#rotate .phoneicon::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 12px; height: 4px; margin-left: -6px; border-radius: 4px; background: #e2b04a; }
@keyframes rot { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
body.compact #title h1 { font-size: calc(var(--u)*112); margin: calc(var(--u)*4) 0; }
body.compact #title .tk { font-size: calc(var(--u)*15); }
body.compact #title .ts { font-size: calc(var(--fs)*var(--u)*19); max-width: calc(var(--u)*1000); }
body.compact #title .tbtns { gap: calc(var(--u)*10); }
body.compact #title .tbtns button { padding: calc(var(--u)*12) calc(var(--u)*24); font-size: calc(var(--fs)*var(--u)*18); }
body.compact #title .ts + .ts, body.compact #title .tbtns + .ts { font-size: calc(var(--fs)*var(--u)*13) !important; margin-top: calc(var(--u)*14) !important; }