/* CRUXFRACIALES: estilos do jogo (título, painéis, HUD). Identidade da v0.1:
   dourado #c8a447 sobre azul-petróleo escuro, monoespaçada, botões inclinados. */

/* A fonte do tema Crux (`UI.Tema`): Cinzel, OFL (styles/fontes/OFL.txt). O @font-face mora aqui, e não no estilo que o
   tema injeta, para o empacotador levar a fonte em todo pacote (o `npm run build` leva o que o CSS do index.html
   referencia, e a licença ao lado da fonte). Caminho relativo a este arquivo. */
@font-face { font-family: 'Cinzel'; src: url('fontes/Cinzel%5Bwght%5D.ttf') format('truetype'); font-weight: 400 900; font-style: normal; font-display: swap; }

html, body { margin: 0; padding: 0; background: #0b1016; overflow: hidden; font-family: 'Courier New', monospace; color: #c8a447; user-select: none; }
/* o canvas não se arrasta como imagem (o Firefox arrastava ao clicar e mover) nem rola/aproxima no toque */
#game-canvas { display: block; width: 100vw; height: 100vh; -webkit-user-drag: none; touch-action: none; }
#ui-root { position: fixed; inset: 0; pointer-events: none; }

@keyframes crux-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes crux-slide { from { transform: translateY(-30px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes crux-rise { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes crux-drift { 0% { transform: translate(0, 0) rotate(0) } 100% { transform: translate(-40px, -80px) rotate(45deg) } }
@keyframes crux-pulse { from { filter: brightness(1) } to { filter: brightness(1.6) } }
@keyframes crux-glow { 0%, 100% { opacity: 0 } 50% { opacity: 1 } }

/* ------------------------------------------------------------ botões */

.crux-btn {
  position: relative; width: 290px; height: 44px; border: 1px solid #c8a447; background: rgba(15, 26, 31, 0.72);
  color: #c8a447; font-family: inherit; font-size: 14px; letter-spacing: 3px; cursor: pointer; text-align: left;
  padding-left: 48px; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); overflow: hidden; outline: none;
}
.crux-btn .ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; }
.crux-btn .label { display: inline-block; transition: transform 0.15s ease; }
.crux-btn::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%); transition: transform 0.4s ease;
  background: linear-gradient(110deg, rgba(200, 164, 71, 0) 30%, rgba(200, 164, 71, 0.2) 50%, rgba(200, 164, 71, 0) 70%);
}
.crux-btn:hover, .crux-btn.kbd, .crux-btn:focus-visible { color: #fff5d8; border-color: #fff5d8; background: rgba(40, 52, 58, 0.85); }
.crux-btn:hover::before, .crux-btn.kbd::before { transform: translateX(100%); }
.crux-btn:hover .label, .crux-btn.kbd .label { transform: translateX(4px); }
.crux-btn:active { transform: scale(0.97); }
.crux-btn.danger { border-color: #c8324a; color: #e2687a; }
.crux-btn.danger:hover, .crux-btn.danger.kbd { color: #ffd0d6; border-color: #ff8090; background: rgba(80, 20, 30, 0.6); }

/* ------------------------------------------------------------ título */

.crux-title { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: auto;
  background: linear-gradient(90deg, rgba(5, 8, 12, 0.88) 0%, rgba(5, 8, 12, 0.55) 38%, rgba(5, 8, 12, 0) 62%); }
.crux-title .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid rgba(200, 164, 71, 0.25);
  background: rgba(15, 26, 31, 0.55); font-size: 13px; letter-spacing: 2px; opacity: 0; animation: crux-fade 0.5s ease 0.05s forwards; }
.crux-title .brand { display: flex; align-items: center; gap: 10px; }
.crux-title .diamond { display: inline-block; width: 10px; height: 10px; background: #c8a447; transform: rotate(45deg); }
.crux-title .lvbadge { padding: 3px 10px; border: 1px solid #c8a447; letter-spacing: 1px; }
.crux-title .core { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-left: 7vw; }
.crux-title .title { position: relative; isolation: isolate; font-size: clamp(44px, 6.4vw, 92px); letter-spacing: 0.16em; font-style: italic; font-weight: bold;
  text-shadow: 0 0 14px rgba(200, 164, 71, 0.45); opacity: 0; animation: crux-slide 0.7s ease 0.25s forwards; }
/* O brilho que pulsa: a sombra máxima numa cópia transparente do texto, atrás das letras, animando só a opacidade
   (o compositor anima sem repintar). Animar o próprio text-shadow pedia layout e pintura do título a cada quadro. */
.crux-title .title::after { content: attr(data-glow); position: absolute; left: 0; top: 0; z-index: -1; color: transparent;
  text-shadow: 0 0 26px rgba(200, 164, 71, 0.8); pointer-events: none; opacity: 0; will-change: opacity;
  animation: crux-glow 3.2s ease-in-out 1s infinite; }
.crux-title .title .ghost { position: absolute; left: 6px; top: 6px; color: transparent; -webkit-text-stroke: 1px rgba(200, 164, 71, 0.35); pointer-events: none; }
.crux-title .ver { font-size: 11px; letter-spacing: 6px; margin-top: -10px; opacity: 0; animation: crux-fade 0.4s ease 0.55s forwards; }
.crux-title .buttons { display: flex; flex-direction: column; gap: 8px; }
.crux-title .buttons .crux-btn { opacity: 0; animation: crux-rise 0.5s ease forwards; }
.crux-title .buttons .crux-btn:nth-child(1) { animation-delay: 0.65s; }
.crux-title .buttons .crux-btn:nth-child(2) { animation-delay: 0.75s; }
.crux-title .buttons .crux-btn:nth-child(3) { animation-delay: 0.85s; }
.crux-title .buttons .crux-btn:nth-child(4) { animation-delay: 0.95s; }
.crux-title .buttons .crux-btn:nth-child(5) { animation-delay: 1.05s; }
.crux-title .bottom { display: flex; justify-content: space-between; gap: 18px; padding: 10px 18px; border-top: 1px solid rgba(200, 164, 71, 0.25);
  background: rgba(15, 26, 31, 0.55); font-size: 12px; letter-spacing: 2px; opacity: 0; animation: crux-fade 0.5s ease 1.05s forwards; }
.crux-title .float { position: fixed; color: rgba(200, 164, 71, 0.4); pointer-events: none; font-size: 14px; animation: crux-drift 18s linear infinite; }

/* ------------------------------------------------------------ painéis modais */

.crux-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 40;
  background: rgba(3, 6, 9, 0.68); animation: crux-fade 0.18s ease-out; }
.crux-box { background: rgba(13, 22, 27, 0.96); border: 1px solid #c8a447; padding: 24px 34px 26px; min-width: 360px; max-width: min(92vw, 820px);
  max-height: 88vh; overflow: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.crux-box h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: 6px; color: #fff5d8; text-align: center; }
.crux-box h2.big { font-size: 34px; letter-spacing: 10px; text-shadow: 0 0 14px rgba(200, 164, 71, 0.55); }
.crux-box h2.red { color: #ff8a8a; text-shadow: 0 0 16px rgba(220, 40, 60, 0.6); }
.crux-box .sub { text-align: center; font-size: 13px; letter-spacing: 3px; margin: -8px 0 18px; opacity: 0.85; }
.crux-box .buttons { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.crux-row-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.crux-row-btns .crux-btn { width: 220px; }
.crux-box .tip { font-size: 12px; opacity: 0.75; max-width: 560px; margin: 14px auto 0; text-align: center; line-height: 1.5; }
.crux-box .record { text-align: center; color: #ffe08a; letter-spacing: 4px; margin: -6px 0 14px; animation: crux-pulse 0.7s ease-in-out infinite alternate; }

/* cartões (bênçãos) */
.crux-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.crux-card { position: relative; width: 168px; min-height: 176px; padding: 14px 12px; border: 1px solid rgba(200, 164, 71, 0.55); background: rgba(20, 32, 38, 0.9);
  color: #e8dcc0; font-family: inherit; text-align: center; cursor: pointer; outline: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.crux-card:hover, .crux-card.kbd, .crux-card:focus-visible { transform: translateY(-4px); border-color: #fff5d8; background: rgba(36, 50, 58, 0.95); }
.crux-card b { color: #fff5d8; font-size: 14px; letter-spacing: 1px; }
.crux-card p { margin: 0; font-size: 11px; line-height: 1.45; opacity: 0.85; }
.crux-card .stat { margin-top: auto; font-size: 10px; letter-spacing: 2px; color: #c8a447; }
.crux-card.bless { width: 210px; min-height: 210px; border-color: #b070ff; background: rgba(26, 18, 40, 0.92); }
.crux-card.bless:hover, .crux-card.bless.kbd { border-color: #e6c8ff; background: rgba(44, 30, 66, 0.95); }
.crux-card.bless .icon { font-size: 42px; color: #ffd27a; text-shadow: 0 0 14px rgba(255, 210, 122, 0.6); }
.crux-card.bless .key { position: absolute; top: 6px; left: 8px; font-size: 11px; opacity: 0.7; }
.crux-choice .crux-box { border-color: #b070ff; }

/* configurações */
.crux-settings .rows { display: flex; flex-direction: column; gap: 10px; min-width: 460px; }
.crux-settings .row { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 1px; }
.crux-settings .row .k { color: #e8dcc0; }
.crux-settings .row .val { text-align: right; color: #fff5d8; }
.crux-settings input[type=range] { width: 100%; accent-color: #c8a447; cursor: pointer; }
.crux-settings input[type=range].kbd { outline: 1px solid #fff5d8; }
.crux-settings .row > .crux-toggle, .crux-settings .row > .seg { grid-column: 2 / 4; justify-self: start; }
.crux-toggle, .seg button { font-family: inherit; font-size: 12px; letter-spacing: 2px; padding: 5px 12px; cursor: pointer; outline: none;
  background: rgba(15, 26, 31, 0.8); color: #8a7a50; border: 1px solid rgba(200, 164, 71, 0.4); }
.crux-toggle.on, .seg button.on { color: #0b1016; background: #c8a447; border-color: #c8a447; }
.crux-toggle.kbd, .seg button.kbd, .crux-toggle:focus-visible, .seg button:focus-visible { outline: 1px solid #fff5d8; }
.seg { display: flex; gap: 4px; }
/* tamanho fixo: trocar de aba (GERAL/VÍDEO) não mexe na caixa; as linhas rolam dentro dela */
.crux-settings .crux-box { width: min(92vw, 600px); height: min(84vh, 560px); display: flex; flex-direction: column; overflow: hidden; }
.crux-settings .rows { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.crux-tabs { display: flex; gap: 4px; justify-content: center; margin: -4px 0 18px; }
.crux-tabs button { font-family: inherit; font-size: 12px; letter-spacing: 3px; padding: 6px 22px; cursor: pointer; outline: none;
  background: rgba(15, 26, 31, 0.8); color: #8a7a50; border: 1px solid rgba(200, 164, 71, 0.4); }
.crux-tabs button.on { color: #0b1016; background: #c8a447; border-color: #c8a447; }
.crux-tabs button.kbd, .crux-tabs button:focus-visible { outline: 1px solid #fff5d8; }
.bench-start { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(200, 164, 71, 0.3); text-align: center; }
.bench-start h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: 4px; color: #fff5d8; font-weight: normal; }
.bench-start p { margin: 0 auto 12px; max-width: 470px; font-size: 12px; line-height: 1.5; opacity: 0.85; }
.bench-start p.off { color: #8a7a50; }
.bench-start .crux-btn { width: 240px; margin: 0 auto; }

/* teste de estresse: resultado (tamanho fixo) e aviso durante a medição */
.crux-bench .crux-box { width: min(92vw, 720px); height: min(86vh, 560px); display: flex; flex-direction: column; overflow: hidden; }
.bench-verdict { text-align: center; font-size: 16px; letter-spacing: 3px; padding: 10px; margin-bottom: 10px; border: 1px solid; }
.bench-verdict.estavel { color: #a8f0a0; border-color: rgba(120, 220, 110, 0.6); }
.bench-verdict.oscila { color: #ffe08a; border-color: rgba(255, 210, 110, 0.6); }
.bench-verdict.nao-aguenta { color: #ff8a8a; border-color: rgba(230, 80, 90, 0.6); }
.bench-verdict.cancelado { color: #8a7a50; border-color: rgba(200, 164, 71, 0.4); }
.bench-verdict.erro { color: #ff8a8a; border-color: rgba(230, 80, 90, 0.6); }
.bench-note { margin: 0 0 10px; font-size: 11px; line-height: 1.45; opacity: 0.75; text-align: center; }
.bench-report { flex: 1; min-height: 0; resize: none; width: 100%; box-sizing: border-box; padding: 10px; font-family: inherit; font-size: 12px; line-height: 1.55;
  color: #e8dcc0; background: rgba(6, 10, 14, 0.7); border: 1px solid rgba(200, 164, 71, 0.35); outline: none; }
.bench-copied { margin: 6px 0 0; min-height: 15px; font-size: 11px; text-align: center; color: #a8f0a0; }
.crux-bench-hud { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 45; pointer-events: none; padding: 6px 16px; font-size: 12px;
  letter-spacing: 3px; color: #fff5d8; background: rgba(6, 10, 14, 0.78); border: 1px solid rgba(200, 164, 71, 0.6); }

/* controles */
.ctable { display: flex; flex-direction: column; min-width: 520px; font-size: 13px; }
.ctable .tr { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 6px 4px; border-bottom: 1px dotted rgba(200, 164, 71, 0.25); }
.ctable .th { font-size: 11px; letter-spacing: 2px; opacity: 0.7; }
.ctable b { color: #fff5d8; font-weight: normal; }

/* estatísticas / resumo */
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; font-size: 12px; letter-spacing: 1px; min-width: 460px; }
.sgrid div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted rgba(200, 164, 71, 0.3); padding: 5px 0; }
.sgrid b { color: #fff5d8; font-weight: normal; }
.crux-deathp .sgrid { margin-bottom: 18px; }
.wlist { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.wlist div { padding: 5px 10px; border: 1px solid; font-size: 11px; letter-spacing: 1px; }
.wlist .on { border-color: #c8a447; color: #fff5d8; }
.wlist .off { border-color: rgba(200, 164, 71, 0.2); color: rgba(200, 164, 71, 0.4); }

/* bestiário: janela de TAMANHO FIXO (trocar de ficha não mexe na caixa) em três colunas: lista, cartão com o
   modelo 3D e os números, e o texto. Em 1280×720 a ficha do chefe (5 habilidades) cabe sem rolar (o e2e mede);
   em tela menor, cada coluna rola sozinha e a caixa continua do mesmo tamanho. */
.crux-bestiary .crux-box { width: min(94vw, 1000px); max-width: none; height: min(80vh, 600px); display: flex; flex-direction: column; overflow: hidden; }
.bt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 180px 250px minmax(0, 1fr); gap: 20px; }
.bt-list, .bt-card, .bt-text { min-height: 0; overflow-y: auto; }
.bt-list { display: flex; flex-direction: column; gap: 6px; }
.bt-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(200, 164, 71, 0.45);
  background: rgba(20, 32, 38, 0.9); color: #e8dcc0; font-family: inherit; font-size: 12px; letter-spacing: 1px; text-align: left; cursor: pointer; outline: none; }
.bt-item:hover, .bt-item.kbd, .bt-item:focus-visible { border-color: #fff5d8; background: rgba(36, 50, 58, 0.95); }
.bt-item.on { border-color: #c8a447; box-shadow: inset 3px 0 0 #c8a447; color: #fff5d8; }
.bt-item.locked { cursor: default; color: rgba(200, 164, 71, 0.35); border-style: dashed; border-color: rgba(200, 164, 71, 0.22); background: rgba(10, 16, 20, 0.6); }
.crux-bestiary .tag { font-size: 9px; letter-spacing: 2px; padding: 2px 6px; border: 1px solid currentColor; white-space: nowrap; }
.crux-bestiary .tag.comum { color: #b8b0a0; }
.crux-bestiary .tag.incomum { color: #7ae0ff; }
.crux-bestiary .tag.raro { color: #c58cff; }
.crux-bestiary .tag.chefe { color: #ffd27a; }
.bt-card { display: flex; flex-direction: column; gap: 8px; }
/* moldura do modelo 3D: o canvas (2× a resolução da caixa) encolhe pra caber; o brilho do pedestal é só CSS */
.bt-model { position: relative; flex: none; height: 190px; border: 1px solid rgba(200, 164, 71, 0.3);
  background: radial-gradient(ellipse 62% 58% at 50% 64%, rgba(200, 164, 71, 0.18), rgba(8, 12, 15, 0.92) 76%); }
.bt-model canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.bt-model canvas:active { cursor: grabbing; }
.bt-model:empty::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; color: rgba(200, 164, 71, 0.2); }
.bt-info { display: flex; flex-direction: column; gap: 6px; }
.bt-text { padding-right: 6px; }
.bt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bt-head b { color: #fff5d8; font-size: 16px; letter-spacing: 2px; }
.bt-floor { font-size: 11px; letter-spacing: 2px; opacity: 0.8; }
.bt-lore { font-style: italic; font-size: 12px; line-height: 1.5; color: #e8dcc0; opacity: 0.9; margin: 0 0 4px; }
.bt-h { font-size: 11px; letter-spacing: 3px; margin: 0 0 8px; padding-bottom: 3px; border-bottom: 1px solid rgba(200, 164, 71, 0.3); }
.bt-h ~ .bt-h { margin-top: 14px; }
.bt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bt-stats div { display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; border: 1px solid rgba(200, 164, 71, 0.25); background: rgba(20, 32, 38, 0.6); }
.bt-stats span { font-size: 9px; letter-spacing: 1px; opacity: 0.8; }
.bt-stats .wide { grid-column: 1 / -1; }
.bt-stats b { color: #fff5d8; font-size: 13px; font-weight: normal; letter-spacing: 1px; }
.bt-note { font-size: 10px; line-height: 1.4; opacity: 0.65; margin: 6px 0 0; }
.bt-ab { margin: 0 0 7px; font-size: 12px; line-height: 1.45; color: #e8dcc0; opacity: 0.9; }
.bt-ab b { color: #fff5d8; font-weight: normal; letter-spacing: 1px; }
.bt-empty { font-size: 12px; line-height: 1.5; opacity: 0.75; }

/* ------------------------------------------------------------ efeitos de tela */

.crux-fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 60; transition: opacity 0.45s ease; }
.crux-fade.on { opacity: 1; }
.crux-floorcard { position: fixed; left: 0; right: 0; top: 14%; text-align: center; pointer-events: none; opacity: 0; z-index: 35; }
.crux-floorcard .n { font-size: 46px; letter-spacing: 16px; color: #fff5d8; text-shadow: 0 0 18px rgba(200, 164, 71, 0.75), 0 3px 0 #000; }
.crux-floorcard .s { font-size: 14px; letter-spacing: 5px; margin-top: 6px; text-shadow: 0 2px 0 #000; }
.crux-floorcard.on { animation: crux-card 2.6s ease forwards; }
@keyframes crux-card { 0% { opacity: 0; transform: translateY(10px) } 15% { opacity: 1; transform: none } 75% { opacity: 1 } 100% { opacity: 0 } }

/* ------------------------------------------------------------ HUD */

.crux-hud { position: fixed; inset: 0; pointer-events: none; color: #e8dcc0; font-family: 'Courier New', monospace; text-shadow: 0 1px 2px #000; }
.hud-tl { position: absolute; top: 14px; left: 16px; }
.hud-floor { font-size: 18px; letter-spacing: 4px; color: #c8a447; }
.hud-floor b { color: #fff5d8; }
.hud-meta { font-size: 12px; opacity: 0.85; margin-top: 2px; letter-spacing: 1px; }
.hud-bless { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; max-width: 260px; }
.hud-bless span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(200, 164, 71, 0.6); background: rgba(15, 26, 31, 0.75);
  font-size: 13px; color: #ffd27a; pointer-events: auto; cursor: help; }
.hud-tr { position: absolute; top: 12px; right: 12px; }
.crux-minimap { display: block; width: 168px; height: 168px; image-rendering: pixelated; border: 1px solid rgba(200, 164, 71, 0.5); background: rgba(6, 10, 14, 0.62); }
.crux-minimap.big { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(76vh, 76vw); height: min(76vh, 76vw); z-index: 20;
  background: rgba(6, 10, 14, 0.88); border-color: #c8a447; }

.hud-boss { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: min(54vw, 620px); text-align: center; }
.hud-boss .name { letter-spacing: 6px; font-size: 14px; color: #e6c8ff; text-shadow: 0 0 8px #6a2aa0, 0 2px 0 #000; margin-bottom: 5px; }
.hud-boss .bar { position: relative; height: 14px; background: rgba(10, 6, 16, 0.88); border: 1px solid #b070ff; overflow: hidden; }
.hud-boss .fill, .hud-boss .ghost { position: absolute; left: 0; top: 0; bottom: 0; }
.hud-boss .ghost { background: #fff0d0; opacity: 0.7; }
.hud-boss .fill { background: linear-gradient(180deg, #c58cff, #7a34c0); }
.hud-boss .mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.55); }
.hud-boss.enraged .fill { background: linear-gradient(180deg, #ff8a6a, #c0304a); }

.hud-bottom { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 22px; }
.hud-weapon { display: flex; align-items: center; gap: 10px; min-width: 150px; justify-content: flex-end; position: relative; }
.hud-weapon .ico { width: 16px; height: 16px; transform: rotate(45deg); border: 2px solid rgba(0, 0, 0, 0.7); box-shadow: 0 0 8px rgba(255, 255, 255, 0.15); }
.hud-weapon .txt b { color: #fff5d8; font-size: 13px; letter-spacing: 1px; font-weight: normal; }
.hud-weapon .lvl { color: #7ae0ff; font-size: 13px; }
.hud-center { display: flex; flex-direction: column; align-items: center; }
.hud-hp { position: relative; width: min(38vw, 400px); height: 22px; background: rgba(24, 8, 10, 0.88); border: 2px solid #1a0a0c; box-shadow: 0 2px 0 #000; }
.hud-hp .fill, .hud-hp .ghost { position: absolute; left: 0; top: 0; bottom: 0; }
.hud-hp .ghost { background: #ffe2c0; opacity: 0.8; }
.hud-hp .fill { background: linear-gradient(180deg, #ff6a6a, #b81e2e); }
.hud-hp .fill.low { animation: crux-pulse 0.5s ease-in-out infinite alternate; }
.hud-hp .heart { position: absolute; left: -16px; top: 50%; transform: translateY(-52%); font-size: 28px; color: #ff4a5a; text-shadow: 0 2px 0 #000; }
.hud-hp .num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: bold; color: #fff; }
.hud-folego { width: 120px; height: 6px; margin: 7px auto 0; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(0, 0, 0, 0.6); }
.hud-folego i { display: block; height: 100%; width: 100%; background: #7ae0ff; box-shadow: 0 0 6px #7ae0ff; }
.hud-folego.exausto i { background: #e0a040; box-shadow: none; }
.hud-slots { display: flex; gap: 12px; min-width: 150px; }
.hud-bottom .key { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 1px; opacity: 0.6; white-space: nowrap; }
.slot { position: relative; width: 52px; height: 52px; border: 2px solid rgba(200, 164, 71, 0.7); background: rgba(15, 26, 31, 0.82); display: grid; place-items: center; }
.slot .glyph { font-size: 24px; }
.slot .cd { position: absolute; inset: 0; }
.slot.potion .glyph { color: #ff7a9a; }
.slot.potion.ready { border-color: #ff7a9a; box-shadow: 0 0 10px rgba(255, 90, 130, 0.45); }
.slot.arrows .glyph { color: #e8c88a; }
/* quantidade no canto: flechas na aljava, poções na mochila */
.slot.potion b, .slot.arrows b { position: absolute; right: 3px; bottom: 1px; font-size: 12px; color: #fff; }
.slot.potion.empty, .slot.arrows.empty { opacity: 0.45; border-color: #6a3a3a; }

.hud-prompt { position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%); padding: 7px 16px; background: rgba(10, 14, 18, 0.88);
  border: 1px solid #c8a447; color: #fff5d8; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.hud-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 52%, rgba(190, 0, 20, 0.6) 100%); opacity: 0; }
.hud-fps { position: absolute; right: 14px; bottom: 10px; font-size: 11px; opacity: 0.7; }
.hud-toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 22px; letter-spacing: 6px; color: #fff5d8; white-space: nowrap;
  text-shadow: 0 0 12px rgba(200, 164, 71, 0.85), 0 2px 0 #000; opacity: 0; transition: opacity 0.25s; }
.hud-toast.on { opacity: 1; }
/* conquista do bestiário: desce do topo central como "conquista desbloqueada"; os 3.6 s casam com CODEX_T do HUD.js */
.hud-codex { position: absolute; top: 14px; left: 50%; display: flex; align-items: center; gap: 16px; min-width: 320px; padding: 10px 18px 10px 16px;
  background: linear-gradient(180deg, rgba(34, 28, 12, 0.95), rgba(12, 14, 18, 0.95)); border: 1px solid #c8a447;
  box-shadow: 0 0 24px rgba(200, 164, 71, 0.35), 0 8px 20px rgba(0, 0, 0, 0.6); overflow: hidden; opacity: 0; transform: translate(-50%, -140%); transition: top 0.3s ease; }
.crux-hud.boss-on .hud-codex { top: 66px; }
.hud-codex.on { animation: crux-codex 3.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.hud-codex::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 230, 160, 0.3) 50%, transparent 70%); }
.hud-codex.on::after { animation: crux-shine 1.1s ease 0.35s; }
/* run parada (pausa, escolha, troca de andar, morte): a conquista congela junto com o tempo dela no HUD.js */
.crux-hud.codex-hold .hud-codex, .crux-hud.codex-hold .hud-codex::after { animation-play-state: paused; }
.hud-codex .medal { flex: none; width: 30px; height: 30px; display: grid; place-items: center; transform: rotate(45deg); border: 2px solid #ffd27a;
  background: rgba(64, 46, 12, 0.92); box-shadow: 0 0 14px rgba(255, 210, 122, 0.65); }
.hud-codex .medal i { transform: rotate(-45deg); font-style: normal; font-size: 16px; color: #ffe8b0; }
.hud-codex .txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hud-codex b { font-size: 10px; letter-spacing: 3px; color: #ffd27a; font-weight: normal; }
.hud-codex .name { font-size: 18px; letter-spacing: 2px; color: #fff5d8; text-shadow: 0 0 10px rgba(255, 210, 122, 0.55), 0 2px 0 #000; }
.hud-codex .count { align-self: flex-start; font-size: 11px; letter-spacing: 2px; color: #c8a447; }
@keyframes crux-codex { 0% { opacity: 0; transform: translate(-50%, -140%) } 9% { opacity: 1; transform: translate(-50%, 0) } 88% { opacity: 1; transform: translate(-50%, 0) } 100% { opacity: 0; transform: translate(-50%, -140%) } }
@keyframes crux-shine { to { transform: translateX(100%) } }
.hud-hint { position: absolute; left: 16px; bottom: 96px; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; font-size: 12px; max-width: 640px;
  background: rgba(10, 14, 18, 0.78); border-left: 2px solid #c8a447; opacity: 0; transition: opacity 0.6s; }
.hud-hint b { color: #c8a447; letter-spacing: 3px; font-size: 11px; }
.hud-hint.on { opacity: 1; }

/* números de dano */
.crux-damage-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.crux-dmg { position: absolute; left: 0; top: 0; font: bold 18px 'Courier New', monospace; color: #fff; white-space: nowrap; will-change: transform, opacity;
  text-shadow: 0 2px 0 #000, 0 0 4px #000; }
.crux-dmg.heavy { font-size: 26px; color: #ffd27a; }
.crux-dmg.hurt { color: #ff5a5a; }
.crux-dmg.heal { color: #7affa0; }

/* ------------------------------------------------------------ inventário (tema Crux, `UI.Tema`) */

/* Janela NÃO modal no meio da tela (o jogo segue rodando atrás), de TAMANHO FIXO: 1500 × 640 px de desenho
   (`InventoryLogic.CAIXA`) escalados pela altura da tela pelo `--k` do tema (1200 × 512 em 720p, 2000 × 853 em 1440p).
   Sobe 34 do centro para deixar a barra de habilidades do laboratório à mostra. O item preso é `position: fixed` fora da
   caixa e a ficha rola por dentro: nada do que aparece muda o tamanho dela (o e2e mede a caixa aberta, cheia, com a ficha
   e com item preso). A moldura fica 10 para dentro da caixa, para os cantos de espinho caberem nela. `--cel` é o lado da
   célula da mochila (60 em 1080p); a grade, os itens e o destino pintado são medidos nele. */
.crux-inv { --cel: calc(60 * var(--k)); position: fixed; left: 50%; top: 50%; z-index: 30; width: calc(1500 * var(--k)); height: calc(640 * var(--k));
  margin: calc(-354 * var(--k)) 0 0 calc(-750 * var(--k)); pointer-events: auto; animation: crux-fade 0.12s ease-out; }
.crux-inv .inv-painel { position: absolute; inset: calc(10 * var(--k)); }
.inv-espinho { position: absolute; left: 50%; top: calc(-9 * var(--k)); width: calc(22 * var(--k)); height: calc(28 * var(--k)); transform: translateX(-50%); overflow: visible; pointer-events: none; }

/* cabeçalho: a cruz e o título em versalete; à direita, o fechar (Tab); um filete de ouro por baixo */
.inv-head { position: absolute; left: calc(20 * var(--k)); right: calc(20 * var(--k)); top: 0; height: calc(64 * var(--k)); display: flex; align-items: center; gap: calc(14 * var(--k));
  background: linear-gradient(90deg, transparent, var(--ouro-escuro) 12%, var(--ouro) 50%, var(--ouro-escuro) 88%, transparent) left bottom / 100% 1px no-repeat; }
.inv-cruz { flex: none; width: calc(32 * var(--k)); height: calc(54 * var(--k)); margin: calc(-6 * var(--k)) 0 0 calc(-4 * var(--k)); overflow: visible;
  filter: drop-shadow(0 0 calc(6 * var(--k)) rgba(0, 0, 0, 0.9)); }
.inv-titulo { font-size: calc(26 * var(--k)); letter-spacing: 0.34em; }
.inv-close { margin-left: auto; display: flex; align-items: center; gap: calc(9 * var(--k)); font: 600 calc(13 * var(--k))/1 var(--titulo); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--pergaminho-2); cursor: pointer; }
.inv-close .crux-tecla { min-width: calc(36 * var(--k)); }
.inv-close:hover { color: var(--ouro-claro); }

/* corpo: três colunas (o equipamento em volta do boneco, a mochila com os atributos, a ficha), cada uma num quadro escuro */
.inv-corpo { position: absolute; left: calc(18 * var(--k)); right: calc(18 * var(--k)); top: calc(74 * var(--k)); bottom: calc(14 * var(--k)); display: grid;
  grid-template-columns: calc(460 * var(--k)) calc(632 * var(--k)) minmax(0, 1fr); gap: calc(14 * var(--k)); }
.inv-sec { position: relative; min-height: 0; background: linear-gradient(180deg, rgba(16, 13, 10, 0.94), rgba(6, 5, 4, 0.94)); border: 1px solid rgba(92, 69, 36, 0.85);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 calc(26 * var(--k)) rgba(0, 0, 0, 0.65); }

/* equipamento: cabeça, torso, mãos, pernas e pés à esquerda, mão principal e secundária à direita, o boneco no meio. A
   prévia ocupa o quadro inteiro, ATRÁS das colunas de slots: o herói girando cabe no quadro (o enquadramento é pelo
   cilindro dele), fica grande como no conceito, e a ponta da arma que gira passa por trás dos slots. */
.inv-eq { display: flex; justify-content: space-between; padding: calc(12 * var(--k)) calc(14 * var(--k)); }
.inv-col { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.inv-preview { position: absolute; inset: 0; z-index: 1; }
/* o tablado sob os pés e a luz de cima são só CSS, atrás do canvas transparente da prévia */
.inv-preview::before { content: ""; position: absolute; left: 27%; right: 27%; bottom: 16%; height: 10%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(184, 146, 90, 0.34), rgba(184, 146, 90, 0.1) 46%, transparent 70%); }
.inv-preview::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 45% 55% at 50% 44%, rgba(232, 205, 146, 0.09), transparent 72%); }
.inv-preview canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.inv-preview canvas:active { cursor: grabbing; }
.inv-slot { position: relative; flex: none; width: calc(92 * var(--k)); height: calc(92 * var(--k)); cursor: pointer; border: 1px solid var(--ouro-escuro);
  background: radial-gradient(circle at 50% 38%, #2a2018, #0a0807 74%);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 calc(14 * var(--k)) rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.85); }
.inv-slot::after { content: ""; position: absolute; inset: calc(3 * var(--k)); border: 1px solid rgba(184, 146, 90, 0.16); pointer-events: none; }
.inv-slot[data-slot="main"], .inv-slot[data-slot="off"] { height: calc(248 * var(--k)); }
.inv-slot:hover { border-color: var(--ouro); }
.inv-slot.cheio { border-color: color-mix(in srgb, var(--rar, #5c4524) 75%, #000);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 calc(20 * var(--k)) color-mix(in srgb, var(--rar, #000) 20%, transparent), 0 0 0 1px rgba(0, 0, 0, 0.85); }
.inv-slot.cheio:hover { border-color: var(--rar, var(--ouro)); }
/* a silhueta do slot vazio: o desenho do que vai nele, quase apagado */
.inv-sil { position: absolute; left: 50%; top: 50%; width: calc(54 * var(--k)); height: calc(54 * var(--k)); transform: translate(-50%, -50%); opacity: 0.2;
  filter: grayscale(0.5); pointer-events: none; }
.inv-slot img { position: absolute; left: calc(7 * var(--k)); top: calc(7 * var(--k)); width: calc(100% - 14 * var(--k)); height: calc(100% - 14 * var(--k));
  object-fit: contain; pointer-events: none; }
/* fantasma de duas mãos: a mão secundária mostra a arma da principal, esmaecida */
.inv-slot.twohand { cursor: default; border-style: dashed; }
.inv-slot.twohand img { opacity: 0.22; filter: grayscale(0.8); }

/* mochila 10×4: uma linha de fundo por célula (em cima e à esquerda de cada uma), a sombra de cada célula e a moldura por
   fora (box-shadow não ocupa espaço). Cada item é a caixa das células dele; a moldura da raridade (o ::before) fica
   2 para dentro, para itens vizinhos não se colarem. */
.inv-meio { display: flex; flex-direction: column; padding: calc(16 * var(--k)); }
.inv-grid { position: relative; flex: none; width: calc(10 * var(--cel)); height: calc(4 * var(--cel)); background-color: #080706;
  background-image: linear-gradient(rgba(184, 146, 90, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 146, 90, 0.16) 1px, transparent 1px),
    radial-gradient(circle at 50% 42%, rgba(74, 57, 40, 0.34), transparent 72%);
  background-size: var(--cel) var(--cel);
  box-shadow: 0 0 0 1px var(--ouro-escuro), 0 0 0 calc(3 * var(--k)) #000, inset 0 0 calc(18 * var(--k)) rgba(0, 0, 0, 0.8); }
.inv-item { position: absolute; cursor: pointer; }
.inv-item::before { content: ""; position: absolute; inset: calc(2 * var(--k)); border: 1px solid color-mix(in srgb, var(--rar) 68%, #000);
  background: radial-gradient(circle at 50% 40%, rgba(60, 46, 33, 0.94), rgba(12, 10, 8, 0.96) 78%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 calc(14 * var(--k)) color-mix(in srgb, var(--rar) 16%, transparent); }
.inv-item:hover::before { border-color: var(--rar); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 calc(16 * var(--k)) color-mix(in srgb, var(--rar) 26%, transparent),
  0 0 calc(10 * var(--k)) color-mix(in srgb, var(--rar) 40%, transparent); }
.inv-item img, .inv-held img { position: absolute; left: calc(5 * var(--k)); top: calc(5 * var(--k)); width: calc(100% - 10 * var(--k)); height: calc(100% - 10 * var(--k));
  object-fit: contain; pointer-events: none; }
.inv-lvl { position: absolute; right: calc(6 * var(--k)); bottom: calc(4 * var(--k)); z-index: 1; font-size: calc(14 * var(--k)); line-height: 1; color: var(--ouro-claro);
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, 0 0 calc(4 * var(--k)) #000; pointer-events: none; }
/* ícone ainda não pronto (ou que nunca veio): só o fundo na cor da def, que o JS põe inline */
.inv-noicon img { display: none; }
.inv-noicon::before { background: transparent; }
.inv-ghost { opacity: 0.3; }
.inv-target { position: absolute; display: none; box-sizing: border-box; pointer-events: none; z-index: 2; }
.inv-target.ok, .inv-slot.ok { box-shadow: inset 0 0 0 2px #6fd08a, 0 0 calc(10 * var(--k)) rgba(111, 208, 138, 0.35); background: rgba(70, 190, 110, 0.26); }
.inv-target.swap, .inv-slot.swap { box-shadow: inset 0 0 0 2px #f0c860, 0 0 calc(10 * var(--k)) rgba(240, 200, 96, 0.35); background: rgba(230, 180, 60, 0.26); }
.inv-target.bad, .inv-slot.bad { box-shadow: inset 0 0 0 2px #e0503a, 0 0 calc(10 * var(--k)) rgba(224, 80, 58, 0.4); background: rgba(200, 50, 40, 0.28); }
/* rodapé da mochila: a ocupação (n / 40) e as poções */
.inv-rodape { flex: none; display: flex; justify-content: space-between; align-items: center; height: calc(30 * var(--k)); margin-top: calc(10 * var(--k)); padding: 0 calc(4 * var(--k)); }
.inv-rodape > span { display: flex; align-items: center; gap: calc(9 * var(--k)); font: 600 calc(12 * var(--k))/1 var(--titulo); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pergaminho-2); }
.inv-rodape svg { width: calc(26 * var(--k)); height: calc(26 * var(--k)); }
.inv-rodape b { font-size: calc(18 * var(--k)); letter-spacing: 0.06em; color: var(--pergaminho); }
.inv-meio .crux-divisor { flex: none; margin: calc(8 * var(--k)) 0 calc(6 * var(--k)); }
/* atributos: três colunas e duas linhas, separadas por filetes, como no conceito */
.inv-atributos { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.inv-atr { display: grid; grid-template-columns: calc(42 * var(--k)) minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: calc(11 * var(--k)); align-content: center;
  padding: 0 calc(12 * var(--k)) 0 calc(14 * var(--k)); border-left: 1px solid rgba(92, 69, 36, 0.55); min-width: 0; }
.inv-atr:nth-child(3n + 1) { border-left: 0; padding-left: calc(6 * var(--k)); }
.inv-atr .ic { grid-row: 1 / 4; align-self: center; width: calc(42 * var(--k)); height: calc(42 * var(--k)); }
.inv-atr .rot { font: 600 calc(12 * var(--k))/1.25 var(--titulo); letter-spacing: 0.18em; text-transform: uppercase; color: var(--pergaminho-2); }
.inv-atr b { font-size: calc(22 * var(--k)); line-height: 1.2; color: var(--pergaminho); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 #000; }
.inv-atr i { min-height: 1.2em; font: italic calc(12.5 * var(--k))/1.2 var(--serifa); color: rgba(168, 151, 122, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ficha do item: o desenho na moldura da raridade, o nome, a raridade, o tipo, o número principal com a comparação, as
   linhas, os bônus e a descrição como citação; embaixo, fixas, as ações do mouse. O corpo rola por dentro. */
.inv-ficha { display: flex; flex-direction: column; padding: calc(14 * var(--k)) calc(14 * var(--k)) calc(12 * var(--k)) calc(16 * var(--k)); }
/* O padding de cima com a margem negativa igual dá folga ao acento das maiúsculas do nome (o Ê de "GÊMEAS"), que a
   rolagem cortaria no topo, sem mudar onde o conteúdo fica. */
.inv-ficha-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; padding-right: calc(6 * var(--k));
  padding-top: calc(6 * var(--k)); margin-top: calc(-6 * var(--k)); scrollbar-width: thin; scrollbar-color: var(--ouro-escuro) transparent; }
/* o ornamento do fim da ficha (a cruz com a pedra carmim, como no conceito): ocupa só a sobra (encolhe antes do texto,
   que não encolhe) e some quando a sobra é pouca (o quadro é um contêiner de tamanho) */
.inv-ficha .orn { flex: 1 1 0; min-height: 0; max-height: calc(110 * var(--k)); margin-top: auto; container-type: size; display: flex; align-items: center; justify-content: center; }
.inv-ficha .orn svg { height: min(calc(50 * var(--k)), 70cqh); width: auto; aspect-ratio: 24 / 40; overflow: visible; opacity: 0.5;
  filter: drop-shadow(0 0 calc(8 * var(--k)) rgba(196, 41, 31, 0.35)); }
@container (max-height: 34px) { .inv-ficha .orn svg { display: none; } }
.inv-ficha .cab { display: flex; gap: calc(13 * var(--k)); align-items: flex-start; }
.inv-ficha .arte { position: relative; flex: none; width: calc(80 * var(--k)); height: calc(118 * var(--k)); border: 1px solid color-mix(in srgb, var(--rar) 75%, #000);
  background: radial-gradient(circle at 50% 40%, #34281d, #0a0807 76%);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 calc(22 * var(--k)) color-mix(in srgb, var(--rar) 20%, transparent), 0 0 0 1px rgba(0, 0, 0, 0.8); }
.inv-ficha .arte::after { content: ""; position: absolute; inset: calc(3 * var(--k)); border: 1px solid rgba(184, 146, 90, 0.16); pointer-events: none; }
.inv-ficha .arte img { position: absolute; left: calc(7 * var(--k)); top: calc(7 * var(--k)); width: calc(100% - 14 * var(--k)); height: calc(100% - 14 * var(--k)); object-fit: contain; }
.inv-ficha .arte.inv-noicon { background-image: none; }
.inv-ficha .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--k)); }
.inv-ficha .nome { font: 600 calc(17.5 * var(--k))/1.12 var(--titulo); letter-spacing: 0.09em; text-transform: uppercase; color: var(--pergaminho); text-shadow: 0 1px 0 #000;
  overflow-wrap: break-word; }
.inv-ficha .nv { color: var(--ouro-claro); }
.inv-ficha .rar { font: 600 calc(11.5 * var(--k))/1 var(--titulo); letter-spacing: 0.24em; text-transform: uppercase; }
.inv-ficha .tipo { font: italic calc(13.5 * var(--k))/1.25 var(--serifa); color: var(--pergaminho-2); }
/* o número principal (dano, defesa ou cura) grande, com o rótulo ao lado, na linha de base */
.inv-ficha .princ { margin-top: calc(4 * var(--k)); display: flex; align-items: baseline; gap: calc(8 * var(--k)); flex-wrap: wrap; }
.inv-ficha .princ b { font-size: calc(26 * var(--k)); line-height: 1; color: var(--ouro-claro); text-shadow: 0 1px 0 #000; }
.inv-ficha .princ span { font: 600 calc(10.5 * var(--k))/1.2 var(--titulo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pergaminho-2); }
.inv-ficha .cmp { display: flex; align-items: center; gap: calc(6 * var(--k)); font: calc(13 * var(--k))/1.25 var(--serifa); color: var(--pergaminho-2); }
.inv-ficha .cmp i { flex: none; width: 0; height: 0; border-left: calc(5 * var(--k)) solid transparent; border-right: calc(5 * var(--k)) solid transparent; }
.inv-ficha .cmp.up { color: #8fd18a; }
.inv-ficha .cmp.up i { border-bottom: calc(8 * var(--k)) solid #8fd18a; }
.inv-ficha .cmp.down { color: #e2735c; }
.inv-ficha .cmp.down i { border-top: calc(8 * var(--k)) solid #e2735c; }
.inv-ficha .cmp.eq i { width: calc(9 * var(--k)); height: 2px; border: 0; background: currentColor; }
.inv-ficha .crux-divisor { margin: calc(7 * var(--k)) 0 calc(4 * var(--k)); }
.inv-ficha .lin { display: flex; align-items: baseline; gap: calc(6 * var(--k)); font: calc(14 * var(--k))/1.42 var(--serifa); color: var(--pergaminho-2); }
.inv-ficha .lin::after { content: ""; order: 2; flex: 1; border-bottom: 1px dotted rgba(168, 151, 122, 0.35); transform: translateY(calc(-4 * var(--k))); }
.inv-ficha .lin b { order: 3; font: 600 calc(14.5 * var(--k))/1 var(--titulo); color: var(--ouro-claro); white-space: nowrap; }
.inv-ficha .bonus { margin-top: calc(7 * var(--k)); display: flex; flex-direction: column; gap: calc(2 * var(--k)); }
.inv-ficha .bon { display: flex; align-items: center; gap: calc(8 * var(--k)); font: calc(13.5 * var(--k))/1.2 var(--serifa); color: #93b6e2; }
.inv-ficha .bon .ic { flex: none; width: calc(18 * var(--k)); height: calc(18 * var(--k)); }
.inv-ficha .cit { margin: calc(8 * var(--k)) 0 calc(2 * var(--k)); padding: 0 calc(4 * var(--k)); font: italic calc(13.5 * var(--k))/1.38 var(--serifa); color: var(--pergaminho-2); }
.inv-ficha .cit::before { content: "\201C"; }
.inv-ficha .cit::after { content: "\201D"; }
.inv-ficha .vazia { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(16 * var(--k)); text-align: center; }
.inv-ficha .vazia .cruz { width: calc(34 * var(--k)); height: calc(56 * var(--k)); opacity: 0.5; overflow: visible; }
.inv-ficha .vazia p { margin: 0; max-width: calc(230 * var(--k)); font: italic calc(15 * var(--k))/1.45 var(--serifa); color: var(--pergaminho-2); }
.inv-acoes { flex: none; display: flex; flex-direction: column; gap: calc(5 * var(--k)); margin-top: calc(8 * var(--k)); padding-top: calc(10 * var(--k));
  background: linear-gradient(90deg, transparent, var(--ouro-escuro) 15%, var(--ouro-escuro) 85%, transparent) left top / 100% 1px no-repeat; }
.inv-acoes .ac { display: flex; align-items: center; gap: calc(11 * var(--k)); font: calc(13.5 * var(--k))/1.25 var(--serifa); color: var(--pergaminho); }
.inv-acoes .crux-tecla { flex: none; width: calc(28 * var(--k)); height: calc(26 * var(--k)); padding: 0; }
.inv-acoes .crux-tecla svg { width: calc(12 * var(--k)); height: calc(17 * var(--k)); }
.inv-acoes .ac:last-child .crux-tecla svg { width: calc(19 * var(--k)); height: calc(19 * var(--k)); }

/* item no cursor: acima da janela, fora do fluxo, nunca recebe o mouse. É só o ícone (sem fundo nem moldura): centrado no
   cursor, ele cobre exatamente o destino pintado na grade, e a cor do destino tem de aparecer em volta. */
.inv-held { position: fixed; left: 0; top: 0; z-index: 32; display: none; box-sizing: border-box; pointer-events: none; }
.inv-held img { filter: drop-shadow(0 calc(6 * var(--k)) calc(8 * var(--k)) rgba(0, 0, 0, 0.8)); }

/* ------------------------------------------------------------ tela cheia obrigatória (UI.TelaCheia) */
/* Acima de tudo, até do console de dev (9999): enquanto falta a tela cheia, nada por baixo recebe clique.
   O display é do JS (none/flex); o "jogar mesmo assim" só aparece quando o navegador recusa a tela cheia. */
.crux-tela-cheia { position: fixed; inset: 0; z-index: 10000; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: rgba(5, 8, 12, 0.88); cursor: pointer; pointer-events: auto; text-align: center; }
.crux-tela-cheia .titulo { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.12em; font-weight: bold; color: #c8a447;
  text-shadow: 0 0 14px rgba(200, 164, 71, 0.45); }
.crux-tela-cheia .msg { font-size: 14px; letter-spacing: 1px; color: #e8dcc0; }
.crux-tela-cheia .crux-btn { width: 260px; padding-left: 0; text-align: center; }
.crux-tela-cheia [hidden] { display: none; }