/* ======================================================================================
   Combate por turnos (estilo BG3): mapa con fichas, orden de iniciativa, barra de acciones
   ====================================================================================== */
.enc { position: fixed; inset: 0; z-index: 700; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(ellipse at 50% 40%, #15100c, #070605 75%); color: #e6dcc8; font-family: var(--font); user-select: none; }
.enc.hidden, .enc-pl.none { display: none; }
.enc-dm { position: absolute; z-index: 12; }

/* ---- arriba: asalto y retratos en orden de iniciativa */
.enc-top { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px 6px; background: linear-gradient(#17120e, rgba(16,12,9,.75)); border-bottom: 1px solid #2f261d; position: relative; z-index: 3; }
.enc-round { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.enc-round small { font-family: var(--display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9a8466; }
.enc-round b { font-family: var(--display); font-size: 34px; font-weight: 900; color: #f0c868; text-shadow: 0 2px 10px rgba(240,200,104,.25); }
.enc-order { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 8px; justify-content: safe center; scrollbar-width: thin; }
.eo-card { position: relative; flex: 0 0 auto; width: 76px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(#1c1611, #100c09); border: 1px solid #3a2f24; cursor: default; transition: transform .25s, box-shadow .25s, border-color .25s; }
.enc-dm .eo-card { cursor: pointer; }
.eo-card.npc { border-color: #4a2520; }
.eo-card.on { transform: translateY(2px) scale(1.1); border-color: #e8c46a; box-shadow: 0 0 0 1px rgba(232,196,106,.5), 0 0 22px rgba(232,196,106,.35); z-index: 2; }
.eo-card.mine::after { content: ''; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; width: 10px; height: 10px; rotate: 45deg; background: #e8c46a; box-shadow: 0 0 8px #e8c46a; }
.eo-card.dead { filter: grayscale(1) brightness(.55); }
.eo-card.hidden { opacity: .55; border-style: dashed; }
.eo-face { width: 54px; height: 54px; }
.eo-n { width: 100%; text-align: center; font-size: 12px; font-weight: 700; color: #d9cbb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-init { position: absolute; top: 2px; right: 2px; min-width: 22px; height: 20px; padding: 0 4px; display: grid; place-items: center; font-family: var(--display); font-size: 13px; font-weight: 900; color: #120e0a; background: #d4a64a; border: 1px solid #f0d58e; }
.eo-card.npc .eo-init { background: #b84a3c; color: #fff1e6; border-color: #e08070; }
.eo-hp { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 4px; background: #0a0806; border: 1px solid #000; }
.eo-hp i { display: block; height: 100%; background: linear-gradient(#7fd27a, #3f9b48); }
.eo-skull { position: absolute; top: 14px; left: 50%; translate: -50% 0; width: 34px; height: 34px; opacity: .9; }
.enc-top-btns { display: flex; gap: 8px; }
.enc-mini { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; background: linear-gradient(#211a14, #14100c); border: 1px solid #5a4630; color: #e9d7b0; font-family: var(--display); font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.enc-mini:hover { border-color: #a8864e; color: #fff0cc; }
.enc-mini img { width: 22px; height: 22px; }

/* caras redondas (retrato del jugador recortado o imagen del enemigo) */
.enc-face { position: relative; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3a2d1f, #0d0a07 75%) center / cover no-repeat; border: 3px solid var(--rc, #c8a35e); box-shadow: 0 3px 10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.6); display: grid; place-items: center; flex: 0 0 auto; }
.enc-face.has { background-color: #15100c; }
.enc-face-l { font-family: var(--display); font-weight: 900; font-size: 22px; color: #e9d7b0; text-shadow: 0 2px 4px #000; }
.enc-face.has .enc-face-l { display: none; }

/* ---- centro: registro a la derecha, mapa, y (DM) cajón a la izquierda */
.enc-mid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; position: relative; }
.enc-dm .enc-mid { grid-template-columns: 340px minmax(0, 1fr) 290px; }
.enc-map { position: relative; overflow: hidden; background: #050403; min-width: 0; }
.enc.paused .enc-map .em-stage { filter: saturate(.45) brightness(.7); }
.em-view { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.em-view.panning { cursor: grabbing; }
.enc.aiming .em-view { cursor: crosshair; }
.em-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 0 0 1px #2a2119, 0 20px 60px rgba(0,0,0,.8); transition: filter .4s; }
.em-bg { position: absolute; inset: 0; background: #1a140f center / 100% 100% no-repeat; }
.em-bg.empty { background: radial-gradient(ellipse at 50% 45%, #2a2118, #120e0b 80%), url('/img/muro.jpg') center / cover; background-blend-mode: multiply; }
.em-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(0,0,0,.42) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.42) 1px, transparent 1px),
                    linear-gradient(to right, rgba(255,236,190,.07) 1px, transparent 2px), linear-gradient(to bottom, rgba(255,236,190,.07) 1px, transparent 2px); }
.em-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.em-toks, .em-floats { position: absolute; inset: 0; pointer-events: none; }
.em-tok { position: absolute; width: calc(var(--s, 1) * 64px); height: calc(var(--s, 1) * 64px); pointer-events: auto; transition: left .45s cubic-bezier(.3,.7,.3,1), top .45s cubic-bezier(.3,.7,.3,1), opacity .3s, filter .3s; cursor: pointer; }
.em-tok.dragging { transition: none; z-index: 20; cursor: grabbing; filter: drop-shadow(0 10px 14px rgba(0,0,0,.8)); }
.em-tok-face { position: absolute; inset: calc(var(--s, 1) * 5px); }
.em-tok.npc .em-tok-face { border-radius: 50%; }
.em-tok.active { z-index: 5; }
.em-tok.active .em-tok-face { box-shadow: 0 0 0 3px rgba(240,200,104,.85), 0 0 22px 4px rgba(240,200,104,.55), 0 4px 12px rgba(0,0,0,.8); animation: tokGlow 1.8s ease-in-out infinite; }
@keyframes tokGlow { 50% { box-shadow: 0 0 0 3px rgba(240,200,104,.55), 0 0 32px 8px rgba(240,200,104,.35), 0 4px 12px rgba(0,0,0,.8); } }
.em-tok.mine::before { content: ''; position: absolute; left: 50%; top: -9px; translate: -50% 0; border: 7px solid transparent; border-top: 9px solid #f0c868; filter: drop-shadow(0 2px 2px #000); }
.em-tok.sel .em-tok-face { outline: 2px dashed #f0c868; outline-offset: 4px; }
.em-tok.target .em-tok-face { box-shadow: 0 0 0 3px rgba(235,90,70,.9), 0 0 20px 4px rgba(235,90,70,.5); cursor: crosshair; }
.em-tok.target { cursor: crosshair; }
.em-tok.picked .em-tok-face { box-shadow: 0 0 0 4px #f0c868, 0 0 24px 6px rgba(240,200,104,.6); }
.em-tok.dim { opacity: .4; }
.em-tok.hidden { opacity: .5; }
.em-tok.hidden .em-tok-face { border-style: dashed; }
.em-tok.dead { filter: grayscale(1) brightness(.5); }
.em-tok.dead::after { content: ''; position: absolute; inset: 16px; background: url('/img/ui/calavera.png') center / contain no-repeat; opacity: .9; }
.em-tok.down .em-tok-face { filter: saturate(.3) brightness(.7); }
.em-tok.dodging .em-tok-face { outline: 2px solid rgba(120,170,230,.8); outline-offset: 2px; }
.em-tok-hp { position: absolute; left: 12px; right: 12px; bottom: 1px; height: 6px; background: #080605; border: 1px solid #000; box-shadow: 0 1px 3px #000; }
.em-tok-hp i { display: block; height: 100%; background: linear-gradient(#7fd27a, #3f9b48); transition: width .5s; }
.em-tok-hp[data-lvl="mid"] i { background: linear-gradient(#e7c35c, #b48a2a); }
.em-tok-hp[data-lvl="low"] i { background: linear-gradient(#e2685a, #a73428); }
.em-tok-n { position: absolute; top: 100%; left: 50%; translate: -50% 2px; white-space: nowrap; padding: 1px 7px; font-size: 13px; font-weight: 700; color: #f3e6c8; background: rgba(8,6,5,.86); border: 1px solid #3a2f24; opacity: 0; transition: opacity .2s; pointer-events: none; }
.em-tok:hover .em-tok-n, .em-tok.active .em-tok-n, .em-tok.sel .em-tok-n, .em-tok.target .em-tok-n { opacity: 1; }
.em-tok-conds { position: absolute; top: -2px; right: -6px; display: flex; flex-direction: column; gap: 1px; }
.em-tok-conds img { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px #000); }
.em-tok-ds { position: absolute; top: -12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 2px; }
.em-tok-ds:empty { display: none; }
.em-tok-ds i { width: 8px; height: 8px; border-radius: 50%; background: #1a1410; border: 1px solid #000; }
.em-tok-ds i.ok.on { background: #6fcf74; } .em-tok-ds i.ko.on { background: #e05a4a; }
.em-tok-ds b { width: 4px; }
.em-float { position: absolute; translate: -50% 0; font-family: var(--display); font-weight: 900; font-size: 34px; letter-spacing: .02em; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.9); animation: floatUp 1.9s cubic-bezier(.2,.8,.3,1) forwards; pointer-events: none; z-index: 30; }
.em-float.dmg { color: #ff6a55; } .em-float.heal { color: #7fe08a; } .em-float.miss { color: #d8ccb4; font-size: 24px; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 15% { opacity: 1; transform: translateY(-14px) scale(1.15); } 30% { transform: translateY(-22px) scale(1); } 100% { opacity: 0; transform: translateY(-70px); } }

/* ---- registro */
.enc-side { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(90deg, rgba(10,8,6,.92), rgba(16,12,9,.97)); border-left: 1px solid #2f261d; }
.enc-side-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid #2a2119; color: #d9c08a; font-family: var(--display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-align: left; }
.enc-side-h img { width: 20px; height: 20px; }
.enc-side.closed .enc-log, .enc-side.closed .enc-feed { display: none; }
.enc-mid:has(.enc-side.closed) { grid-template-columns: minmax(0, 1fr) 140px; }
.enc-dm .enc-mid:has(.enc-side.closed) { grid-template-columns: 340px minmax(0, 1fr) 140px; }
.enc-feed { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 0; }
.enc-feed:empty { display: none; }
.ef-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 6px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 22%, #120e0b), #120e0b); border-left: 3px solid var(--rc); animation: efIn .35s; transition: opacity .5s, transform .5s; }
.ef-card.out { opacity: 0; transform: translateX(20px); }
.ef-card b { font-size: 14px; color: #f3e6c8; } .ef-card span { grid-column: 1; font-size: 12px; color: #a99a80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-card strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--display); font-size: 26px; font-weight: 900; color: #f0c868; }
.ef-card em { grid-column: 1; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .ef-card em.crit { color: #7fe08a; } .ef-card em.fumble { color: #ff7a66; }
@keyframes efIn { from { opacity: 0; transform: translateX(24px); } }
.enc-log { flex: 1; overflow-y: auto; padding: 8px 10px 14px; display: flex; flex-direction: column; gap: 5px; user-select: text; }
.el-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; line-height: 1.35; color: #cdbf9f; }
.el-row img { width: 18px; height: 18px; margin-top: 1px; opacity: .85; }
.el-row.turn { color: #f0d58e; font-weight: 700; margin-top: 4px; }
.el-row.round { color: #f0c868; font-family: var(--display); font-weight: 900; letter-spacing: .08em; margin-top: 8px; padding-top: 6px; border-top: 1px solid #2f261d; }
.el-row.hit, .el-row.dmg { color: #f0a090; } .el-row.heal { color: #9fe0a0; } .el-row.miss { color: #9a8f7c; } .el-row.down { color: #ff8070; font-weight: 700; }
.el-row.spell { color: #c9b0f0; } .el-row.pause { color: #e9d7b0; font-style: italic; } .el-row.init { color: #e0cfa5; }

/* ---- abajo: barra de acciones */
.enc-bottom { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 10px 18px 12px; min-height: 64px; background: linear-gradient(rgba(14,11,9,.0), #0e0b09 30%); border-top: 1px solid #2f261d; }
.hb-wait { align-self: center; font-family: var(--display); font-size: 18px; letter-spacing: .08em; color: #b8a584; padding: 8px 0; }
.hb-econ { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-bottom: 4px; }
.hb-econ { flex-direction: row; flex-wrap: wrap; width: 200px; }
.hb-pip { width: 26px; height: 26px; display: inline-block; filter: grayscale(1) brightness(.35); transition: filter .3s; }
.hb-pip.on { filter: none; }
.hb-pip.a { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #a6f0a0, #3f9b48 60%, #1d5a25); box-shadow: 0 0 10px rgba(110,210,120,.45); }
.hb-pip.b { clip-path: polygon(50% 4%, 96% 92%, 4% 92%); background: linear-gradient(#ffd08a, #d8862e 60%, #8a4a12); }
.hb-pip.r { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(#e4c0ff, #9a5ad8 60%, #5a2a8a); }
.hb-move { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.hb-move-bar { height: 8px; background: #0a0806; border: 1px solid #3a2f24; }
.hb-move-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b48a2a, #f0c868); transition: width .4s; }
.hb-move span { font-size: 13px; color: #a99a80; } .hb-move b { color: #f3e6c8; }
.hb-groups { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; justify-content: center; max-width: 1100px; }
.hb-group { display: flex; flex-direction: column; gap: 4px; }
.hb-gt { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8d7a5c; }
.hb-row { display: flex; gap: 5px; flex-wrap: wrap; max-width: 560px; }
.hb-btn { position: relative; width: 58px; height: 58px; padding: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #241c15, #0e0b08); border: 1px solid #5a4630; box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 3px 8px rgba(0,0,0,.6); cursor: pointer; transition: transform .12s, border-color .15s, filter .2s; }
.hb-btn img { width: 50px; height: 50px; object-fit: contain; pointer-events: none; }
.hb-btn:hover { border-color: #c9a35e; transform: translateY(-2px); }
.hb-btn.on { border-color: #f0c868; box-shadow: 0 0 0 1px #f0c868, 0 0 18px rgba(240,200,104,.55); }
.hb-btn.off { filter: grayscale(1) brightness(.45); cursor: not-allowed; transform: none; }
.hb-cost { position: absolute; left: 3px; bottom: 3px; width: 11px; height: 11px; }
.hb-cost.a { border-radius: 50%; background: #5fbf6a; } .hb-cost.b { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #e09a3a; } .hb-cost.r { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #a65fe0; }
.hb-badge { position: absolute; right: 2px; bottom: 2px; padding: 0 3px; font-size: 11px; font-weight: 800; color: #f3e6c8; background: rgba(0,0,0,.72); }
.hb-slot { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; letter-spacing: 0; }
.hb-slot small { font-size: 10px; color: #b49ad8; margin-right: 1px; }
.hb-slot i { width: 9px; height: 9px; rotate: 45deg; background: #241c30; border: 1px solid #5a3a80; } .hb-slot i.on { background: #b07ce0; box-shadow: 0 0 6px rgba(176,124,224,.7); }
.hb-end { flex: 0 0 auto; width: 92px; height: 92px; margin-left: 6px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: radial-gradient(circle at 50% 35%, #3a2c1c, #16100b 70%); border: 2px solid #a8864e; box-shadow: 0 0 0 4px rgba(0,0,0,.6), 0 0 22px rgba(240,200,104,.25); color: #f3e1b4; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.hb-end img { width: 44px; height: 44px; }
.hb-end:hover { border-color: #f0c868; box-shadow: 0 0 0 4px rgba(0,0,0,.6), 0 0 30px rgba(240,200,104,.5); }
.hb-aim { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 18px; background: rgba(12,9,7,.95); border: 1px solid #a8864e; box-shadow: 0 8px 30px rgba(0,0,0,.7); font-family: var(--display); font-size: 16px; color: #f3e1b4; white-space: nowrap; }
.enc-pop { position: absolute; left: 50%; bottom: 150px; translate: -50% 0; z-index: 20; width: 320px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(#1d1813, #110e0b); border: 1px solid #7a6240; box-shadow: 0 12px 40px rgba(0,0,0,.8); }
.enc-pop-h { font-family: var(--display); color: #f0c868; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; padding: 2px 4px 6px; border-bottom: 1px solid #3a2f24; }
.enc-pop-o { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; background: #15110d; border: 1px solid #3a2f24; text-align: left; cursor: pointer; }
.enc-pop-o:hover { border-color: #c9a35e; }
.enc-pop-o img { width: 40px; height: 40px; object-fit: contain; } .enc-pop-o b { display: block; font-size: 15px; } .enc-pop-o small { color: #9fe0a0; }

/* ---- avisos grandes */
.enc-banner { position: absolute; left: 50%; top: 21%; translate: -50% 0; z-index: 8; pointer-events: none; opacity: 0; }
.enc-banner.show { animation: bannerIn 2.4s ease forwards; }
@keyframes bannerIn { 0% { opacity: 0; transform: translateY(-16px) scale(.94); } 12% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.eb-in { display: flex; align-items: center; gap: 18px; padding: 14px 34px 14px 16px; background: linear-gradient(90deg, rgba(12,9,7,0), rgba(12,9,7,.94) 18%, rgba(12,9,7,.94) 82%, rgba(12,9,7,0)); }
.eb-face { width: 84px; height: 84px; }
.eb-in small { display: block; font-family: var(--display); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: #9a8466; }
.eb-in b { font-family: var(--display); font-size: 40px; font-weight: 900; color: #f3e6c8; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.eb-in.mine b { color: #f0c868; text-shadow: 0 0 24px rgba(240,200,104,.45), 0 2px 10px #000; }
.enc-center { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.enc-center > * { pointer-events: auto; }
.enc-init { width: min(440px, 92vw); padding: 18px 20px 16px; background: linear-gradient(#1d1813, #0f0c09); border: 1px solid #7a6240; box-shadow: 0 20px 70px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.6); }
.ei-t { font-family: var(--display); font-size: 26px; font-weight: 900; text-align: center; color: #f0c868; margin-bottom: 12px; text-shadow: 0 0 18px rgba(240,200,104,.3); }
.ei-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.ei-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 10px 5px 6px; background: #14100c; border: 1px solid #2f261d; }
.ei-row span { font-size: 16px; font-weight: 700; } .ei-row b { font-family: var(--display); font-size: 22px; color: #7d6d55; }
.ei-row.done { border-color: #5a4630; } .ei-row.done b { color: #f0c868; animation: pop .3s; }
.ei-face { width: 40px; height: 40px; border-width: 2px; }
.ei-btns { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .ei-btns small { color: #8d7a5c; }
.enc-pause { display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: rgba(10,8,6,.94); border: 1px solid #a8864e; box-shadow: 0 10px 40px rgba(0,0,0,.8); }
.enc-pause img { width: 40px; height: 40px; } .enc-pause b { font-family: var(--display); font-size: 24px; color: #f3e1b4; } .enc-pause span { color: #a99a80; }

/* ---- vuelta al combate (jugador con la ficha abierta) */
.enc-pill { position: fixed; top: 12px; left: 50%; translate: -50% 0; z-index: 905; display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 10px; background: linear-gradient(#2a1d14, #160f0a); border: 1px solid #c9a35e; color: #f3e1b4; font-family: var(--display); font-size: 15px; letter-spacing: .06em; box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 18px rgba(240,200,104,.25); cursor: pointer; animation: pop .3s; }
.enc-pill img { width: 26px; height: 26px; }
.enc-pill.turn { animation: pillPulse 1.4s ease-in-out infinite; }
@keyframes pillPulse { 50% { box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 34px rgba(240,200,104,.7); } }

/* ---- DM: cajón de preparación y ficha de la ficha elegida */
.enc-drawer { min-height: 0; overflow-y: auto; background: linear-gradient(270deg, rgba(10,8,6,.92), rgba(16,12,9,.97)); border-right: 1px solid #2f261d; padding: 10px 12px 18px; display: flex; flex-direction: column; gap: 12px; }
.ed-sec { display: flex; flex-direction: column; gap: 8px; }
.ed-h { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #d9c08a; padding-bottom: 5px; border-bottom: 1px solid #2a2119; }
.ed-h img { width: 20px; height: 20px; }
.ed-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ed-row > .inp { flex: 1; min-width: 0; }
.ed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
.ed-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #a99a80; }
.ed-grid label .inp, .ed-grid label .num-step { width: 100%; }
.ed-map { position: relative; height: 120px; background: #0a0806 center / cover no-repeat; border: 1px solid #3a2f24; display: grid; place-items: center; color: #6f6455; font-size: 13px; }
.ed-map.busy::after { content: 'Pintando el mapa…'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #f0c868; font-family: var(--display); letter-spacing: .1em; animation: fade 1s infinite alternate; }
.ed-pcs { display: flex; flex-direction: column; gap: 4px; }
.ed-pc { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; background: #14100c; border: 1px solid #2f261d; }
.ed-pc .enc-face { width: 32px; height: 32px; border-width: 2px; }
.ed-pc span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-pc.out { opacity: .55; }
.ed-big { display: flex; flex-direction: column; gap: 6px; }
.ed-big .btn { justify-content: center; }
.ed-sel { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.ed-sel .enc-face { width: 56px; height: 56px; }
.ed-sel b { font-size: 17px; } .ed-sel small { display: block; color: #a99a80; }
.ed-hp { display: flex; gap: 6px; align-items: center; }
.ed-hp .inp { width: 70px; }
.ed-conds { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ed-cond { padding: 2px; background: #120e0b; border: 1px solid #2f261d; cursor: pointer; filter: grayscale(1) brightness(.6); }
.ed-cond.on { filter: none; border-color: #c9a35e; }
.ed-cond img { width: 100%; aspect-ratio: 1; display: block; }
.ed-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; background: #120e0b; border: 1px solid #3a2f24; color: #cdbf9f; cursor: pointer; }
.ed-toggle i { width: 14px; height: 14px; border: 1px solid #7a6240; background: #0a0806; rotate: 45deg; }
.ed-toggle.on { border-color: #c9a35e; color: #f3e1b4; } .ed-toggle.on i { background: #f0c868; box-shadow: 0 0 8px rgba(240,200,104,.6); }
.ed-hint { font-size: 12.5px; color: #8d7a5c; line-height: 1.4; }
.dm-body { position: relative; }
.enc .rolls-dock, .enc .trades-dock { z-index: 30; }
.enc .rolls-dock { right: 300px; bottom: 130px; max-height: 50%; }
.enc .trades-dock { right: 300px; top: 130px; }
.enc-head-btn img { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.enc-head-btn.live { border-color: #c9a35e; color: #f0c868; box-shadow: 0 0 12px rgba(240,200,104,.25); }

@media (max-width: 900px) {
  .enc-mid { grid-template-columns: minmax(0, 1fr) 0; }
  .enc-side { display: none; }
  .hb-econ { width: 140px; }
  .hb-btn { width: 48px; height: 48px; } .hb-btn img { width: 40px; height: 40px; }
  .hb-end { width: 72px; height: 72px; font-size: 10px; } .hb-end img { width: 32px; height: 32px; }
  .eo-card { width: 60px; } .eo-face { width: 42px; height: 42px; }
  .enc-top { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .enc-mini span { display: none; }
}

/* el resultado de una tirada de daño o curación: «de daño», «puntos de golpe» */
.roll-banner .rb-what { font-family: var(--display); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: #b8a584; margin-top: 2px; }

/* ataque de oportunidad (reacción fuera de tu turno) */
.hb-react { display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: linear-gradient(90deg, rgba(90,40,130,.25), rgba(14,11,9,.9)); border: 1px solid #8a5ac0; box-shadow: 0 0 24px rgba(166,95,224,.3); animation: pop .3s; }
.hb-react-t { display: flex; align-items: center; gap: 10px; }
.hb-react-t img { width: 40px; height: 40px; }
.hb-react-t b { display: block; font-family: var(--display); font-size: 17px; color: #e4c0ff; } .hb-react-t span { font-size: 14px; color: #cdbf9f; }
.el-row.opp { color: #d8b8ff; }
/* la barra de retratos no saca barra de desplazamiento vertical (el retrato del turno crece un poco) */
.enc-order { overflow-y: hidden; padding: 10px 8px 12px; }
/* durante el combate los avisos suben para no tapar la barra de acciones */
body:has(.enc:not(.hidden):not(.none)) .toasts { bottom: 132px; }

/* móvil: la barra de acciones es una tira que se desliza; el mapa ocupa el resto */
@media (max-width: 700px) {
  .enc-top { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; padding: 4px 6px; }
  .enc-round b { font-size: 24px; } .enc-round small { font-size: 9px; letter-spacing: .1em; }
  .eo-card { width: 52px; padding: 4px 2px 6px; } .eo-face { width: 36px; height: 36px; border-width: 2px; } .eo-n { font-size: 10px; }
  .eo-init { min-width: 18px; height: 16px; font-size: 11px; }
  .enc-mini { padding: 6px; } .enc-mini img { width: 20px; height: 20px; }
  .enc-bottom { justify-content: flex-start; align-items: center; gap: 10px; padding: 6px 8px 8px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; }
  .hb-econ { flex: 0 0 auto; width: 92px; gap: 4px; }
  .hb-pip { width: 18px; height: 18px; }
  .hb-move span { font-size: 11px; }
  .hb-groups { flex-wrap: nowrap; gap: 10px; max-width: none; }
  .hb-row { flex-wrap: nowrap; max-width: none; }
  .hb-gt { font-size: 9px; letter-spacing: .1em; }
  .hb-btn { width: 46px; height: 46px; flex: 0 0 auto; } .hb-btn img { width: 38px; height: 38px; }
  .hb-end { width: 64px; height: 64px; flex: 0 0 auto; font-size: 9px; } .hb-end img { width: 28px; height: 28px; }
  .hb-aim { bottom: calc(100% + 6px); font-size: 14px; white-space: normal; width: max-content; max-width: 94vw; }
  .hb-wait { font-size: 14px; }
  .hb-react { flex-wrap: wrap; }
  .eb-face { width: 54px; height: 54px; } .eb-in b { font-size: 26px; } .eb-in { padding: 10px 20px 10px 10px; }
  .enc-banner { top: 16%; width: max-content; max-width: 96vw; }
  .enc-pop { bottom: 96px; width: min(320px, 94vw); }
  .em-float { font-size: 26px; }
}

/* ---- munición en la barra: el número que queda; sin munición, en rojo */
.hb-btn.ammo .hb-badge { color: #f3dfae; }
.hb-btn.ammo.empty .hb-badge { color: #ff8a78; border-color: #7a2a20; }

/* --- terreno y niebla de guerra --- */
.em-ter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.em-fog, .em-fogg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; }
.em-fogg { mix-blend-mode: saturation; }
.em-fog { transition: opacity .3s; }
.enc.painting .em-view { cursor: crosshair; }
.enc.painting .em-tok { pointer-events: none; }
.em-tok.unseen { opacity: .38; filter: grayscale(.8); }
.em-tok.unseen .em-tok-face { border-style: dotted; }
.em-tok.lit .em-tok-face { box-shadow: 0 0 0 2px rgba(255,200,110,.55), 0 0 22px 6px rgba(255,170,60,.35); }
/* cajón del DM: herramientas del terreno */
.ed-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.ed-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; background: #0c0a09; border: 1px solid #2c251e; color: #b9a988; cursor: pointer; font-size: 11.5px; min-width: 0; }
.ed-tool i { width: 26px; height: 26px; display: block; border: 1px solid #3a2f24; }
.ed-tool i.wall { background: rgba(150,36,26,.85); border-color: #e8604a; }
.ed-tool i.block { background: linear-gradient(45deg, transparent 44%, #d6aa60 45%, #d6aa60 55%, transparent 56%), linear-gradient(-45deg, transparent 44%, #d6aa60 45%, #d6aa60 55%, transparent 56%), rgba(96,72,36,.7); }
.ed-tool i.difficult { background: repeating-linear-gradient(-45deg, rgba(232,200,110,.75) 0 2px, transparent 2px 7px), #1a140f; }
.ed-tool i.floor { background: #2a2118; }
.ed-tool i.up { background: linear-gradient(#ffe7b0, #a88c5a); clip-path: polygon(50% 8%, 92% 88%, 8% 88%); border: 0; }
.ed-tool i.down { background: linear-gradient(#5d6a7c, #1d232c); clip-path: polygon(8% 12%, 92% 12%, 50% 92%); border: 0; }
.ed-tool i.light { border-radius: 50%; background: radial-gradient(circle, #fff1c4 0 20%, #ffb54a 45%, transparent 72%); border: 0; }
.ed-tool i.erase { background: linear-gradient(45deg, transparent 45%, #c0503a 46%, #c0503a 54%, transparent 55%), #120e0b; }
.ed-tool:hover { border-color: #6b5a40; color: #f0e0bc; }
.ed-tool.on { border-color: #c9a45a; color: #fff3d6; background: linear-gradient(180deg, #2a2016, #120e0a); box-shadow: 0 0 10px rgba(220,170,80,.3); }
.ed-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.ed-seg button { padding: 6px 4px; font-size: 12px; font-weight: 600; background: #0c0a09; border: 1px solid #2c251e; color: #9c8b6c; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-seg button:hover { border-color: #6b5a40; color: #f0e0bc; }
.ed-seg button.on { border-color: #c9a45a; color: #fff3d6; background: linear-gradient(180deg, #2a2016, #120e0a); }
.ed-seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-sub { font-family: var(--display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8c7b60; margin-top: 4px; }

/* --- combate del jugador como en BG3: retrato y vida abajo a la izquierda, mochila encima del combate --- */
.hb-me { display: flex; align-items: flex-end; gap: 10px; margin-right: auto; padding-bottom: 2px; }
.enc-face.hb-me-face { width: 84px; height: 84px; border-width: 3px; box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 6px 18px rgba(0,0,0,.7); }
.hb-me-info { display: flex; flex-direction: column; gap: 5px; min-width: 170px; }
.hb-me-n { font-family: var(--display); font-size: 16px; color: #f3e1b4; letter-spacing: .04em; }
.hb-me-hp { position: relative; height: 18px; background: #1a0b08; border: 1px solid #5a2a20; overflow: hidden; }
.hb-me-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#d0463a, #8a1f17); transition: width .4s; }
.hb-me-hp.mid i { background: linear-gradient(#d88a3a, #8a4a12); }
.hb-me-hp.low i { background: linear-gradient(#a02020, #5a0c0c); }
.hb-me-hp span { position: relative; display: block; text-align: center; font-size: 12.5px; font-weight: 800; line-height: 16px; color: #fff3e0; text-shadow: 0 1px 2px #000; }
.hb-me-row { display: flex; align-items: center; gap: 5px; }
.hb-me-row img { width: 22px; height: 22px; object-fit: contain; }
.hb-me-ac { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 8px; border: 1px solid #5a4630; background: #0c0a09; color: #cdbf9f; }
.hb-me-ac small { font-size: 10px; letter-spacing: .1em; } .hb-me-ac b { font-family: var(--display); color: #f3e1b4; }
.hb-bag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; background: #120e0b; border: 1px solid #5a4630; color: #e8d6ad; font-family: var(--display); font-size: 12.5px; letter-spacing: .06em; cursor: pointer; }
.hb-bag img { width: 24px; height: 24px; }
.hb-bag:hover, .hb-bag.on { border-color: #f0c868; color: #fff3d6; box-shadow: 0 0 12px rgba(240,200,104,.35); }
.hb-pip.o { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: linear-gradient(#f5e6a8, #c9a24a 60%, #7a5a1a); }
.hb-btn .icon-emoji { font-size: 32px; line-height: 1; pointer-events: none; }
.hb-btn .icon-img { width: 46px; height: 46px; object-fit: contain; pointer-events: none; }
.enc-bagwin { position: absolute; left: 14px; top: 76px; bottom: 132px; z-index: 30; width: min(780px, calc(100vw - 360px)); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #18130e, #0d0a08); border: 1px solid #8a6a3a; box-shadow: 0 0 0 1px #000, 0 24px 70px rgba(0,0,0,.85); animation: pop .2s; }
.ebw-h { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #3a2f22; background: linear-gradient(#241a12, #140f0b); }
.ebw-h img { width: 26px; height: 26px; }
.ebw-h b { font-family: var(--display); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: #f3dfae; }
.ebw-hint { flex: 1; min-width: 0; font-size: 12px; color: #8d7a5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ebw-x { width: 30px; height: 30px; background: #120e0b; border: 1px solid #5a4630; color: #e8d6ad; cursor: pointer; font-size: 15px; }
.ebw-x:hover { border-color: #f0c868; color: #fff; }
.enc-bagwin .inv-panel { flex: 1; min-height: 0; overflow: auto; margin: 0; border: 0; box-shadow: none; max-height: none; }
@media (max-width: 900px) { .hb-me-info { min-width: 120px; } .enc-face.hb-me-face { width: 60px; height: 60px; } .enc-bagwin { width: calc(100vw - 28px); } }

/* --- Efectos activos (conjuros y rasgos que duran): ficha con icono, nombre y lo que le queda; la concentración, con brillo dorado --- */
.fx-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fx-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 3px 10px 3px 3px;
  border: 1px solid #4a3d2c; background: linear-gradient(180deg, rgba(42,32,20,.82), rgba(10,8,6,.82)); color: #ecd3a0; cursor: default; }
.fx-chip:hover { border-color: #c9a45a; }
.fx-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #2c251e;
  background: radial-gradient(circle at 50% 40%, #2a2016, #0b0907); }
.fx-ic img { width: 32px; height: 32px; object-fit: contain; }
.fx-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fx-txt b { font-family: var(--display); font-size: 14px; font-weight: 700; color: #f0dfb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-txt small { font-size: 12px; color: #a99670; }
.fx-chip.conc .fx-ic { border-color: #c9a45a; box-shadow: 0 0 0 1px rgba(201,164,90,.3), 0 0 10px rgba(232,196,122,.45); }
.fx-chip.holder { border-style: dashed; }
.fx-chip.holder .fx-ic img { opacity: .75; }
/* la cruz para terminarlo (dibujada, no un carácter) */
.fx-x { position: relative; flex: none; width: 20px; height: 20px; margin-left: 4px; padding: 0; cursor: pointer; border: 1px solid #5a4630; background: #120e0a; }
.fx-x::before, .fx-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; background: #c9a45a; transform: translate(-50%, -50%) rotate(45deg); }
.fx-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fx-x:hover { border-color: #d0603e; background: #2a120c; }
.fx-x:hover::before, .fx-x:hover::after { background: #ff9a7a; }
.fx-list.sm .fx-chip { min-height: 30px; padding: 2px 8px 2px 2px; gap: 6px; }
.fx-list.sm .fx-ic { width: 26px; height: 26px; }
.fx-list.sm .fx-ic img { width: 24px; height: 24px; }
.fx-list.sm .fx-txt b { font-size: 13px; }
.fx-list.sm .fx-txt small { font-size: 11px; }
/* en pequeño (barra de combate, cabecera del jugador) */
.fx-mini { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid #4a3d2c; background: #0d0b09; vertical-align: middle; }
.fx-mini img { width: 22px; height: 22px; object-fit: contain; }
.fx-mini b { font-family: var(--display); font-size: 12px; color: #e8c47a; }
.fx-mini.conc { border-color: #c9a45a; box-shadow: 0 0 6px rgba(232,196,122,.5); }
.hb-me-fx { display: flex; flex-wrap: wrap; gap: 3px; }
.hb-me-fx .fx-mini { width: 22px; height: 22px; }
.hb-me-fx .fx-mini img { width: 20px; height: 20px; }
.ed-fx { margin-top: 2px; }
.ed-fx .fx-chip { flex: 1 1 100%; }

/* barra como en BG3 */
.enc-bottom .hb-me { margin-right: 0; }
.enc-bottom .hb-hot { margin: 0 auto; }
.hb-hot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.hb-res { display: flex; align-items: center; gap: 16px; padding: 3px 16px; }
.hb-pips { display: flex; gap: 8px; align-items: center; }
.hb-res .hb-move { width: 190px; flex-direction: row; align-items: center; gap: 8px; }
.hb-res .hb-move-bar { flex: 1; }
.hb-res .hb-move span { white-space: nowrap; }
.hb-res .hb-gt { font-size: 11px; }
.hb-slots { display: flex; gap: 6px; }
.hb-slots .hb-slot { margin: 0; }
.hb-panel { display: flex; align-items: stretch; gap: 10px; padding: 8px 10px; background: rgba(10,8,7,.94); border: 1px solid #4a3a28;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), inset 0 0 26px rgba(0,0,0,.65), 0 6px 24px rgba(0,0,0,.6); max-width: calc(100vw - 560px); overflow-x: auto; }
.hb-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 54px); grid-auto-columns: 54px; gap: 4px; }
.hb-grid .hb-btn, .hb-wset .hb-btn { width: 54px; height: 54px; }
.hb-grid .hb-btn img, .hb-wset .hb-btn img { width: 46px; height: 46px; }
.hb-div { width: 3px; flex: 0 0 auto; align-self: stretch; background: linear-gradient(rgba(176,58,46,.15), #b03a2e 20%, #b03a2e 80%, rgba(176,58,46,.15)); box-shadow: 0 0 8px rgba(176,58,46,.45); }
.hb-tabs { display: flex; gap: 6px; }
.hb-tab { padding: 3px 16px; border-radius: 14px; background: #120e0b; border: 1px solid #4a3a28; color: #b8a584; font-family: var(--display); font-size: 12px; letter-spacing: .06em; cursor: pointer; }
.hb-tab:hover { border-color: #c9a35e; color: #f3e1b4; }
.hb-tab.on { border-color: #f0c868; color: #fff3d6; box-shadow: 0 0 10px rgba(240,200,104,.3); }
.hb-wset { display: grid; grid-template-columns: repeat(2, 54px); grid-auto-rows: 54px; gap: 4px; align-self: flex-end; padding: 6px; background: rgba(10,8,7,.9); border: 1px solid #4a3a28; box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
@media (max-width: 900px) {
  .hb-grid { grid-template-rows: repeat(2, 46px); grid-auto-columns: 46px; }
  .hb-grid .hb-btn, .hb-wset .hb-btn { width: 46px; height: 46px; }
  .hb-grid .hb-btn img, .hb-wset .hb-btn img { width: 38px; height: 38px; }
  .hb-wset { grid-template-columns: repeat(2, 46px); grid-auto-rows: 46px; }
  .hb-panel { max-width: none; }
  .hb-res { gap: 8px; padding: 2px 6px; } .hb-res .hb-move { width: 120px; }
  .hb-tab { padding: 2px 10px; font-size: 10px; }
}