:root {
  --ink: #f4f1ea;
  --ink-dim: #b9c0cc;
  --glass: rgba(12, 16, 26, 0.62);
  --glass-hi: rgba(26, 34, 52, 0.78);
  --line: rgba(255, 255, 255, 0.14);
  --red: #e2283e;
  --gold: #f0b94a;
  --cyan: #48eaff;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
#bossHud { position:fixed; z-index:6; top:calc(12px + var(--safe-t)); left:50%; transform:translateX(-50%); width:min(380px,calc(100vw - 32px)); display:grid; gap:5px; text-align:center; padding:12px 16px; background:#100b10d9; border:1px solid #a44e42; border-radius:12px; pointer-events:none; box-shadow:0 8px 28px #0006; }
body.bossEncounter #top { top:calc(105px + var(--safe-t)); }
#bossHud[hidden],#bossSpeech[hidden] { display:none; }
#bossPhase { color:#dfaf70; font-size:9px; letter-spacing:.13em; }
#bossName { color:#f3e4d8; font-size:16px; }
.bossTrack { height:16px; position:relative; overflow:hidden; border-radius:5px; background:#392023; }
#bossFill { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ab3041,#f36862); transition:width .12s; }
#bossHp { position:absolute; inset:0; font-size:10px; display:grid; place-items:center; text-shadow:0 1px 2px black; }
#bossHud.enraged { border-color:#fc6840; box-shadow:0 0 22px #ff542e30; }
#bossSpeech { position:fixed; z-index:7; bottom:calc(124px + var(--safe-b)); left:50%; transform:translateX(-50%); width:min(400px,calc(100vw - 40px)); padding:13px 18px; border-left:3px solid #e6b770; border-radius:9px; background:#121119ec; text-align:center; color:#ffe1a9; line-height:1.5; font-size:13px; pointer-events:none; }
#bossVictory { position:fixed; inset:0; pointer-events:none; background:#fff0c9; opacity:0; z-index:8; transition:opacity .45s; }
#bossVictory.flash { opacity:.7; transition:opacity .05s; }
@media(min-width:750px) { #bossHud { top:calc(14px + var(--safe-t)); } }
#progressHud { display:grid; gap:4px; margin-top:8px; text-shadow:0 1px 3px #000; font-size:12px; }
#powerHud { color:var(--gold); }
#stats { display:none; }
.benefit { position:fixed; pointer-events:none; padding:4px 7px; border-radius:7px; background:#081520d9; color:#b8ffd0; font-size:11px; white-space:nowrap; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d1420; color: var(--ink);
  font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; }
canvas#c { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
button { font: inherit; color: inherit; }

#fxlayer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#hud > * { pointer-events: auto; }
body.noui #hud, body.noui #fxlayer .bar.hero { display: none; }

/* topo: vida do heroi + medicoes */
#top { position: absolute; left: 12px; top: calc(10px + var(--safe-t)); width: 172px; pointer-events: none; }
.who { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); text-shadow: 0 1px 2px #000; margin: 0 0 4px 2px; }
.hp { position: relative; height: 20px; border-radius: 10px; background: rgba(8, 10, 16, 0.75); border: 1.5px solid rgba(255,255,255,.22); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
#hpfill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #ff5a6a, var(--red) 55%, #a8132a); transition: width .15s; }
#hptxt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; }
#stats { margin-top: 6px; font: 600 10px/1.3 ui-monospace, Consolas, monospace; color: #d9ffe4; text-shadow: 0 1px 2px #000; white-space: nowrap; }
#stats.off { display: none; }



#toast { position: absolute; left: 50%; top: calc(34% + var(--safe-t)); transform: translate(-50%, -6px); padding: 9px 16px; border-radius: 999px;
  background: rgba(10, 12, 20, .78); border: 1px solid rgba(240,185,74,.55); color: #ffe7b0; font-weight: 800; font-size: 14px; white-space: nowrap;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#hint { position: absolute; left: 12px; right: 120px; bottom: calc(26px + var(--safe-b)); font-size: 12.5px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.6);
  pointer-events: none; transition: opacity .6s; }
#hint span { font-size: 10.5px; color: var(--ink-dim); font-weight: 600; }
#hint.off { opacity: 0; }

/* joystick flutuante */
#joy { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 4; }
#joy.on { opacity: 1; }
#joy::before { content: ""; position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); background: radial-gradient(circle, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
#knob { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 2px 8px rgba(0,0,0,.4); }

/* numeros de dano e barras */
.num { position: absolute; left: 0; top: 0; font: 900 22px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; will-change: transform, opacity;
  -webkit-text-stroke: 1.2px rgba(0,0,0,.65); text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35); white-space: nowrap; }
.num.crit { color: #ffcc33; font-size: 29px; }
.num.hurt { color: #ff5468; font-size: 20px; }
.num.soul { color: #8ff6ff; font-size: 16px; }
.num.info { color: #ffe7b0; font-size: 15px; }
.bar { position: absolute; left: 0; top: 0; width: 64px; height: 18px; display: none; will-change: transform; }
.bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 4px; background: #ff3b4e; box-shadow: 0 0 0 1.5px rgba(10,10,14,.85); }
.bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 4px; background: rgba(20,10,14,.85); box-shadow: 0 0 0 1.5px rgba(10,10,14,.85); }
.bar i { right: auto; z-index: 1; }
.bar b { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 900 12px/1 system-ui, sans-serif; color: #fff; -webkit-text-stroke: .8px rgba(0,0,0,.7); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.bar.hero { width: 70px; }
.bar.hero i { background: #3fe36a; }
.bar.boss { width: 120px; height: 22px; }
.bar.boss i, .bar.boss::before { height: 11px; }
.bar.boss b { bottom: 13px; font-size: 14px; color: #ffd0d6; }

/* carregando */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1a2a40, #0b111b); transition: opacity .5s; z-index: 10; }
#loading.done { opacity: 0; pointer-events: none; }
.lbox { width: min(300px, 80vw); text-align: center; }
.ltitle { font-size: 17px; font-weight: 900; margin-bottom: 14px; }
.lbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
#loadbar { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #8af7ff); transition: width .2s; }
.lsub { margin-top: 10px; font-size: 11.5px; color: var(--ink-dim); font-weight: 600; }

/* raridades (cor do texto/borda e fundo do quadradinho) */
.r-comum { --rc: #c9ccd1; --rbg: #2a2e35; }
.r-incomum { --rc: #5fd35f; --rbg: #183019; }
.r-rara { --rc: #4aa3ff; --rbg: #12263e; }
.r-epica { --rc: #b45cff; --rbg: #2a1640; }
.r-lendaria { --rc: #ff9a2a; --rbg: #3a2210; }
.r-mitica { --rc: #ff3b5c; --rbg: #3e1018; }
@keyframes mythicPulse { 0%, 100% { box-shadow: 0 0 6px #ff3b5c80, inset 0 0 6px #ffd16630; } 50% { box-shadow: 0 0 16px #ff3b5ccc, inset 0 0 10px #ffd16660; } }
@keyframes legendPulse { 0%, 100% { box-shadow: 0 0 4px #ff9a2a60; } 50% { box-shadow: 0 0 12px #ff9a2aaa; } }

/* botao da mochila (canto de cima, direita) */
#bBag { position: absolute; right: 12px; top: calc(10px + var(--safe-t)); width: 58px; height: 58px; border-radius: 16px; border: 1.5px solid #d6b57355;
  background: linear-gradient(160deg, #262b33ee, #12161ded); color: #f2d293; display: grid; place-items: center; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 4px 14px #0007, inset 0 1px #ffe2a020; }
#bBag:active { transform: scale(.95); }
#bBag.full { border-color: #ff5468; }
#bagBadge { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b5c; color: #fff;
  font-size: 12px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 2px 6px #0008; }
#bagBadge[hidden] { display: none; }
body.bossEncounter #bBag { top: calc(105px + var(--safe-t)); }

/* tela do personagem */
#character[hidden] { display: none; }
#character { position: fixed; inset: 0; z-index: 50; background: #05070dd9; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); display: grid; place-items: center; padding: 12px; }
.characterCard { width: min(440px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #20252b, #12171d 65%); border: 1px solid #685738; border-radius: 18px; box-shadow: 0 24px 80px #000b, inset 0 1px #ffe2a014; }
.characterCard header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; flex-shrink: 0; }
.characterCard header > div:first-child { flex: 1; min-width: 0; }
.characterEyebrow { font-size: 9px; font-weight: 700; color: #9d947e; letter-spacing: .17em; }
.characterCard h2 { margin: 3px 0 0; color: #f3e9d9; font-size: 20px; letter-spacing: -.03em; }
.characterPower { display: grid; gap: 1px; text-align: right; }
.characterPower span { font-size: 9px; color: #b6a47e; letter-spacing: .15em; }
.characterPower b { font-size: 24px; font-variant-numeric: tabular-nums; color: #f2cb7c; line-height: 1; }
#closeCharacter { width: 38px; height: 38px; border: 1px solid #ffffff15; border-radius: 10px; background: #ffffff05; color: #bdb6aa; cursor: pointer; flex-shrink: 0; }
.doll { display: grid; grid-template-columns: 58px 1fr 58px; gap: 8px; padding: 4px 16px 10px; flex-shrink: 0;
  background: radial-gradient(ellipse at 50% 60%, #4ee4eb14, transparent 62%); }
.dollCol { display: grid; gap: 6px; align-content: center; }
.dollSlot { display: grid; gap: 2px; justify-items: center; }
.dollSlot > span { font-size: 8.5px; color: #8f8775; letter-spacing: .06em; text-transform: uppercase; }
#portrait { display: block; width: 100%; height: 100%; min-height: 250px; }
.characterTabs { display: flex; gap: 4px; margin: 0 16px; padding: 4px; background: #070b0f70; border: 1px solid #ffffff08; border-radius: 10px; flex-shrink: 0; }
.characterTabs button { flex: 1; border: 0; background: transparent; color: #929ca4; padding: 9px; border-radius: 7px; font-size: 12px; cursor: pointer; }
.characterTabs button.active { color: #f4d294; background: #cba56218; box-shadow: inset 0 0 0 1px #d6b57325; }
#bagCount { color: #8f8775; font-weight: 600; margin-left: 4px; }
.characterDetails { min-height: 0; overflow: auto; padding: 12px 16px 16px; scrollbar-width: thin; scrollbar-color: #615743 transparent; }
#bagGrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
#bagGrid[hidden], #characterStats[hidden] { display: none; }

/* quadradinho de item (mochila e boneco) */
.slotTile { position: relative; width: 100%; aspect-ratio: 1; min-width: 0; border-radius: 10px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1.5px solid var(--rc, #ffffff14); color: var(--rc, #555); background: radial-gradient(circle at 50% 38%, var(--rbg, #161b22), #0c1015 78%); touch-action: manipulation; }
.slotTile svg { width: 64%; height: 64%; filter: drop-shadow(0 1px 2px #000a); }
.slotTile:active { transform: scale(.94); }
.slotTile.empty { border-style: dashed; border-color: #ffffff18; color: #ffffff22; cursor: default; background: #0c1015; }
.slotTile.cell { border: 1px solid #ffffff0a; background: #0b0f14; cursor: default; }
.slotTile.r-lendaria { animation: legendPulse 2.2s ease-in-out infinite; }
.slotTile.r-mitica { animation: mythicPulse 1.6s ease-in-out infinite; }
.slotTile.novo::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ffe066; box-shadow: 0 0 6px #ffe066; }

/* cartao do item */
#itemCard { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #000a; z-index: 2; }
#itemCard[hidden] { display: none; }
.icBox { width: min(360px, 100%); max-height: calc(100dvh - 40px); overflow: auto; border-radius: 16px; border: 1.5px solid var(--rc); padding: 14px;
  background: linear-gradient(170deg, var(--rbg), #10141a 55%); box-shadow: 0 18px 60px #000c, 0 0 24px color-mix(in srgb, var(--rc) 30%, transparent); }
.icHead { display: flex; gap: 12px; align-items: center; }
#icIcon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid var(--rc); color: var(--rc); display: grid; place-items: center; background: #0c1015; font-style: normal; }
#icIcon svg { width: 70%; height: 70%; }
#icName { display: block; font-size: 17px; color: var(--rc); line-height: 1.2; }
#icMeta { display: block; margin-top: 3px; font-size: 11px; color: #a9a39a; font-weight: 600; }
#icStats ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
#icStats li { font-size: 13px; color: #d9d4ca; font-weight: 600; }
#icStats li b { color: #7ef0a0; }
#icStats li.neg b { color: #ff7a85; }
#icStats li.wpn b { color: #f2d293; }
#icEffect { margin-top: 12px; padding: 10px 11px; border-radius: 10px; background: #00000040; border: 1px solid #ffffff10; display: grid; gap: 4px; }
#icEffect[hidden], #icCompare[hidden] { display: none; }
#icEffect b { font-size: 13px; }
#icEffect span { font-size: 12px; color: #d8d0c2; font-weight: 600; line-height: 1.4; }
#icCompare { margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff14; font-size: 12px; color: #a9a39a; }
#icCompare .up { color: #7ef0a0; } #icCompare .down { color: #ff7a85; }
.cmpRows { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-weight: 700; }
.icActions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.icActions button { flex: 1 1 auto; padding: 11px 10px; border-radius: 10px; border: 1px solid #ffffff1a; background: #ffffff0a; color: #e9e3d9; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.icActions button[hidden] { display: none; }
#icMain { background: linear-gradient(180deg, #e0b25a, #b9862e); color: #1b1408; border-color: transparent; font-weight: 800; }
#icSalvage { color: #ffb0b8; }

/* atributos */
#characterStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.attribute { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 3px; border: 1px solid #ffffff08; border-radius: 10px; background: #ffffff03; text-align: center; min-width: 0; }
.attribute.primary { background: #d6b57308; border-color: #d6b57320; }
.statIcon { font-style: normal; color: #91a5b1; font-size: 17px; line-height: 1; }
.statIcon.life { color: #e5787c; } .statIcon.attack { color: #e0b870; } .statIcon.defense { color: #83b8cf; }
.attribute span { color: #a0a6a9; font-size: 9px; line-height: 1.3; }
.attribute b { color: #e9e3d9; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attribute.primary b { font-size: 19px; }

@media (max-height: 740px) { #portrait { min-height: 200px; } .dollSlot > span { display: none; } }
@media (min-width: 760px) and (min-height: 520px) {
  .characterCard { width: 780px; display: grid; grid-template-columns: 360px 1fr; grid-template-rows: auto auto 1fr; }
  .characterCard header { grid-column: 1 / -1; }
  .doll { grid-column: 1; grid-row: 2 / 4; align-self: center; }
  .characterTabs { grid-column: 2; margin-left: 0; }
  .characterDetails { grid-column: 2; padding-left: 0; }
}

/* item no chao */
.lootLabel { position: fixed; left: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: #0b0f16d9; border: 1px solid var(--rc); color: var(--rc);
  font-size: 11px; font-weight: 800; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 2px #000; will-change: transform; }
.lootLabel.r-mitica { box-shadow: 0 0 10px #ff3b5c99; } .lootLabel.r-lendaria { box-shadow: 0 0 8px #ff9a2a88; }
.lootLabel.cheia { border-color: #ff5468; color: #ff8a95; }
.num.burn { color: #ff9a3c; font-size: 15px; }