/* GÉNESIS — Interfaz divina (godhud.js): orbes, consola, efectos de lanzamiento, rueda, buscador y Ojo de Dios */
body.aaa { --power: #5aa9ff; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinr { to { transform: rotate(-360deg); } }

/* ---------- Barra superior: una sola pieza con filo dorado ---------- */
body.aaa #hud-top { padding: 8px 14px 18px; gap: 8px; background: linear-gradient(180deg, rgba(4, 7, 16, .82), rgba(4, 7, 16, .45) 60%, transparent); }
body.aaa #hud-top::after { content: ''; position: absolute; left: 14px; right: 14px; top: 52px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 210, 122, .55) 20%, rgba(255, 210, 122, .55) 80%, transparent); pointer-events: none; }
body.aaa .pill { border-radius: 10px; border-color: rgba(255, 210, 122, .28); background: linear-gradient(180deg, rgba(30, 38, 66, .82), rgba(12, 16, 32, .88)); box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .5); }
body.aaa #speeds button { border-radius: 7px; min-width: 34px; font-weight: 600; }
body.aaa #speeds button.active { box-shadow: 0 0 14px rgba(255, 210, 122, .45), inset 0 0 8px rgba(255, 210, 122, .25); }
body.aaa #counters span { font-weight: 600; font-variant-numeric: tabular-nums; }
body.aaa #sysbtns button { border-radius: 8px; font-size: 14px; }
body.aaa #sysbtns button:hover { box-shadow: 0 0 12px rgba(255, 210, 122, .35); }
/* reloj solar */
#sundial { padding: 4px; }
.dial { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(255, 210, 122, .5); box-shadow: inset 0 0 8px rgba(0, 0, 0, .6); }
.dial-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #4a8ad8, #a8d0f0 55%); transition: background 1s; }
#sundial.night .dial-sky { background: linear-gradient(180deg, #060a1c, #1c2850 55%); }
.dial-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, #2c4a2a, #142010); border-top: 1px solid rgba(0, 0, 0, .5); }
.dial-hand { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: transform .6s linear; }
.dial-hand span { position: absolute; left: -7px; top: -19px; font-size: 12px; line-height: 14px; width: 14px; text-align: center; filter: drop-shadow(0 0 4px #ffd27a); }

/* ---------- Consola divina ---------- */
body.aaa #mana-wrap, body.aaa #sin-wrap { display: none; }
body.aaa #hud-bottom { padding: 0 12px 10px; align-items: flex-end; background: linear-gradient(0deg, rgba(4, 7, 16, .85), rgba(4, 7, 16, .4) 65%, transparent); }
#console-row { display: flex; align-items: flex-end; gap: 14px; }
#console { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px 9px; border-radius: 18px 18px 12px 12px; min-width: 560px; max-width: 760px;
  background: linear-gradient(180deg, rgba(34, 42, 74, .9), rgba(10, 13, 28, .94)); border: 1px solid rgba(255, 210, 122, .35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 40px rgba(0, 0, 0, .35); backdrop-filter: blur(12px) saturate(1.3); }
#console::before { content: ''; position: absolute; left: 22px; right: 22px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--power), transparent); opacity: .9; transition: background .3s; filter: drop-shadow(0 0 6px var(--power)); }
#console::after { content: ''; position: absolute; inset: 3px; border-radius: 15px 15px 9px 9px; border: 1px solid rgba(255, 255, 255, .05); pointer-events: none; }
.con-head { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; }
.con-tools { display: flex; gap: 4px; }
.con-tools button { width: 30px; height: 28px; padding: 0; border-radius: 8px; font-size: 14px; }
body.aaa #power-tabs { background: rgba(4, 6, 14, .7); border-radius: 11px; }
body.aaa #power-tabs .tab { font-weight: 600; letter-spacing: .2px; }
body.aaa #powers { min-height: 76px; gap: 7px; }
body.aaa #powers button { position: relative; min-width: 76px; padding: 7px 8px 6px; border-radius: 12px; overflow: hidden; border-color: rgba(120, 140, 200, .35);
  background: linear-gradient(180deg, rgba(44, 56, 100, .95), rgba(18, 23, 46, .98)); box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .14s cubic-bezier(.2, .9, .3, 1.4), box-shadow .2s, border-color .2s, filter .2s; }
body.aaa #powers button::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--pc) 45%, transparent), transparent 65%); opacity: .35; transition: opacity .2s; }
body.aaa #powers button::after { content: ''; position: absolute; top: -60%; left: -80%; width: 60%; height: 220%; transform: rotate(22deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transition: left .5s ease; pointer-events: none; }
body.aaa #powers button:hover:not(:disabled) { transform: translateY(-5px) scale(1.06); border-color: var(--pc); box-shadow: 0 12px 24px rgba(0, 0, 0, .55), 0 0 18px color-mix(in srgb, var(--pc) 55%, transparent); z-index: 2; }
body.aaa #powers button:hover:not(:disabled)::after { left: 130%; }
body.aaa #powers button:hover:not(:disabled)::before { opacity: .8; }
body.aaa #powers button > * { position: relative; }
body.aaa #powers button .ico { background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--pc) 55%, #fff 10%), rgba(0, 0, 0, .35) 75%); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .45), 0 0 8px color-mix(in srgb, var(--pc) 35%, transparent); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
body.aaa #powers button.active { transform: translateY(-6px); border-color: var(--pc); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 38%, #1a2040), rgba(18, 23, 46, .98)); box-shadow: 0 0 0 1px var(--pc), 0 0 26px color-mix(in srgb, var(--pc) 70%, transparent), 0 12px 24px rgba(0, 0, 0, .5); animation: powpulse 1.6s ease-in-out infinite; color: #fff; }
@keyframes powpulse { 50% { box-shadow: 0 0 0 1px var(--pc), 0 0 40px color-mix(in srgb, var(--pc) 90%, transparent), 0 12px 24px rgba(0, 0, 0, .5); } }
body.aaa #powers button.active .ct { color: #fff; }
body.aaa #powers button:disabled { filter: grayscale(.9) brightness(.7); opacity: .55; }
body.aaa #powers button.cast { animation: cast .5s ease; }
@keyframes cast { 0% { transform: scale(.9); filter: brightness(2.2); } 100% { transform: translateY(-6px); filter: none; } }
#powers button .brush { position: absolute !important; top: 3px; right: 4px; font-size: 9px; opacity: .65; }
#power-info { width: 100%; min-height: 30px; font-size: 12px; line-height: 1.3; padding: 4px 10px; border-radius: 9px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .05); text-align: center; }
#power-info .pi-meta { color: #ffd27a; white-space: nowrap; }
#power-info kbd, .pal-foot kbd { background: #1b2540; border: 1px solid #334066; border-radius: 4px; padding: 0 5px; font-family: inherit; font-size: 11px; }
body.aaa #strength-wrap { width: 100%; background: none; border: 0; box-shadow: none; padding: 0 6px; }
body.aaa #strength-wrap input { height: 4px; }

/* ---------- Orbes ---------- */
.orb { --fill: 50%; position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin-bottom: 4px; cursor: default;
  background: radial-gradient(circle at 50% 35%, #1a2036, #05070f 75%); box-shadow: 0 0 0 3px #1a1408, 0 0 0 5px #c79a3e, 0 0 0 6px #5a3e10, 0 10px 30px rgba(0, 0, 0, .7), inset 0 0 22px rgba(0, 0, 0, .9); }
.orb.red { cursor: pointer; box-shadow: 0 0 0 3px #1a0808, 0 0 0 5px #a84a3a, 0 0 0 6px #4a1410, 0 10px 30px rgba(0, 0, 0, .7), inset 0 0 22px rgba(0, 0, 0, .9); }
.orb-liq { position: absolute; inset: 0; }
.orb-liq i { position: absolute; left: -50%; width: 200%; height: 200%; top: calc(100% - var(--fill)); border-radius: 43%; transition: top .8s cubic-bezier(.3, .8, .3, 1); animation: spin 9s linear infinite; }
.orb-liq i + i { border-radius: 40%; animation: spinr 13s linear infinite; opacity: .55; margin-top: -3px; }
.orb.gold .orb-liq i { background: linear-gradient(180deg, #fff3c0, #f0b840 12%, #a86a12 55%, #5a3204); box-shadow: 0 0 24px #ffd27a; }
.orb.red .orb-liq i { background: linear-gradient(180deg, #ffb0a0, #e03a2a 12%, #8a1414 55%, #3a0606); box-shadow: 0 0 24px #ff5a3a; }
.orb-glass { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 60% 34% at 50% 14%, rgba(255, 255, 255, .5), transparent 70%), radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .14), transparent 55%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .75), inset 0 -12px 22px rgba(0, 0, 0, .45); }
.orb-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-shadow: 0 2px 6px #000, 0 0 12px rgba(0, 0, 0, .9); }
.orb-val b { font-family: var(--title, serif); font-size: 26px; line-height: 1; color: #fff; }
.orb-val span { font-size: 9px; letter-spacing: 3px; color: rgba(255, 255, 255, .8); margin-top: 3px; }
.orb-ring { position: absolute; inset: -1px; pointer-events: none; animation: spin 40s linear infinite; }
.orb-ring circle { fill: none; stroke: rgba(255, 230, 170, .35); stroke-width: 1; stroke-dasharray: 2 9; }
.orb.red .orb-ring circle { stroke: rgba(255, 150, 130, .35); }
.orb.low { animation: orblow 1s ease-in-out infinite; }
@keyframes orblow { 50% { filter: brightness(1.5) saturate(.6); } }
.orb.red.owed { box-shadow: 0 0 0 3px #1a0808, 0 0 0 5px #e06a3a, 0 0 0 6px #4a1410, 0 0 26px rgba(255, 90, 50, .6), inset 0 0 22px rgba(0, 0, 0, .9); }
.orb.red.full { animation: orbfull .9s ease-in-out infinite; }
@keyframes orbfull { 50% { box-shadow: 0 0 0 3px #1a0808, 0 0 0 5px #ff5a3a, 0 0 0 6px #4a1410, 0 0 50px rgba(255, 60, 30, .95), inset 0 0 22px rgba(0, 0, 0, .9); } }
.orb-badge { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #ffd8c8; background: rgba(60, 8, 4, .85); border: 1px solid #e06a3a; border-radius: 8px; padding: 0 6px; white-space: nowrap; }
.orb-badge:empty { display: none; }

/* ---------- Paneles y ficha ---------- */
body.aaa .panel { border-radius: 14px; border-color: rgba(255, 210, 122, .26); background: linear-gradient(180deg, rgba(24, 31, 56, .9), rgba(8, 11, 24, .93)); box-shadow: 0 16px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08); }
body.aaa .panel::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 210, 122, .7), transparent); pointer-events: none; }
body.aaa #inspector { animation: slidein .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes slidein { from { transform: translateX(-24px); opacity: 0; } }
body.aaa .insp-name { font-size: 18px; text-shadow: 0 0 14px rgba(255, 210, 122, .35); }
body.aaa .bar { height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); }
body.aaa .bar > i { border-radius: 5px; background: linear-gradient(180deg, #a4f0a0, #3a9a48); box-shadow: 0 0 8px rgba(122, 214, 122, .5); transition: width .4s; }
body.aaa .bar.red > i { background: linear-gradient(180deg, #ffa0a0, #c03030); box-shadow: 0 0 8px rgba(255, 107, 107, .5); }
body.aaa .bar.gold > i { background: linear-gradient(180deg, #fff0b8, #c8922a); box-shadow: 0 0 8px rgba(255, 210, 122, .5); }
body.aaa .bar.blue > i { background: linear-gradient(180deg, #b8e0ff, #3a7fd0); box-shadow: 0 0 8px rgba(90, 169, 255, .5); }
body.aaa .toast { animation: toastin .35s cubic-bezier(.2, .9, .3, 1.3); backdrop-filter: blur(10px); font-weight: 500; }
body.aaa #minimap { border-radius: 12px; border: 1px solid rgba(255, 210, 122, .45); box-shadow: 0 0 0 3px rgba(8, 10, 20, .8), 0 10px 26px rgba(0, 0, 0, .6); }
body.aaa #tooltip { border-radius: 10px; border-color: rgba(255, 210, 122, .4); box-shadow: 0 10px 28px rgba(0, 0, 0, .6); }
body.aaa.holding canvas { cursor: grabbing !important; }

/* ---------- Efectos de lanzamiento ---------- */
#cast-flash { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, color-mix(in srgb, var(--c, #fff) 55%, transparent) 100%); mix-blend-mode: screen; }
#cast-flash.go { animation: cflash .7s ease-out; }
@keyframes cflash { 0% { opacity: .95; } 100% { opacity: 0; } }
#app.shake canvas { animation: shake .45s cubic-bezier(.3, .7, .4, 1); }
@keyframes shake { 0%, 100% { transform: none; } 15% { transform: translate(var(--shake), calc(var(--shake) * -.6)); } 30% { transform: translate(calc(var(--shake) * -.9), calc(var(--shake) * .5)); } 45% { transform: translate(calc(var(--shake) * .6), calc(var(--shake) * .7)); } 60% { transform: translate(calc(var(--shake) * -.4), calc(var(--shake) * -.4)); } 80% { transform: translate(calc(var(--shake) * .2), 0); } }
#cast-title { position: absolute; left: 0; right: 0; top: 23%; text-align: center; pointer-events: none; z-index: 7; opacity: 0; }
#cast-title span { display: block; font-size: 44px; filter: drop-shadow(0 0 18px var(--c)); }
#cast-title b { font-family: var(--title, serif); font-size: 46px; font-weight: 600; letter-spacing: 16px; color: #fff; text-shadow: 0 0 24px var(--c), 0 0 60px var(--c), 0 4px 10px #000; padding-left: 16px; }
#cast-title.go { animation: ctitle 1.7s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes ctitle { 0% { opacity: 0; transform: scale(1.5); letter-spacing: 30px; filter: blur(8px); } 14% { opacity: 1; transform: scale(1); filter: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(.96) translateY(-14px); } }

/* ---------- Tarjeta cinematográfica ---------- */
#cine { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.cine-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .6s cubic-bezier(.3, .8, .3, 1); }
.cine-bar.top { top: 0; } .cine-bar.bot { bottom: 0; }
#cine.in .cine-bar { height: 7vh; }
.cine-card { position: absolute; left: 50%; top: 13vh; transform: translateX(-50%) translateY(-12px); width: min(760px, 86vw); text-align: center; opacity: 0; transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .3, 1);
  padding: 14px 26px 16px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(4, 6, 14, .82) 18%, rgba(4, 6, 14, .82) 82%, transparent); }
.cine-card::before, .cine-card::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #ffd27a, transparent); }
.cine-card::before { top: 0; } .cine-card::after { bottom: 0; }
#cine.in .cine-card { opacity: 1; transform: translateX(-50%); }
.cine-ico { font-size: 34px; filter: drop-shadow(0 0 14px rgba(255, 210, 122, .8)); }
.cine-title { font-family: var(--title, serif); font-size: 30px; letter-spacing: 8px; text-transform: uppercase; color: #ffd27a; text-shadow: 0 0 22px rgba(255, 210, 122, .55), 0 3px 8px #000; margin: 2px 0 6px; }
.cine-sub { font-size: 14px; line-height: 1.45; color: #e8e6df; font-style: italic; text-shadow: 0 1px 4px #000; }

/* ---------- Rueda radial ---------- */
#wheel { position: absolute; inset: 0; z-index: 25; background: radial-gradient(circle at center, rgba(4, 6, 14, .35), rgba(4, 6, 14, .7)); backdrop-filter: blur(2px); }
.wh-root { position: absolute; width: 0; height: 0; }
.wh-ring { position: absolute; left: -132px; top: -132px; width: 264px; height: 264px; border-radius: 50%; border: 1px solid rgba(255, 210, 122, .35); box-shadow: 0 0 60px rgba(0, 0, 0, .7), inset 0 0 50px rgba(0, 0, 0, .6); background: radial-gradient(circle, rgba(20, 26, 50, .92) 30%, rgba(8, 10, 22, .88) 70%); animation: whin .25s cubic-bezier(.2, .9, .3, 1.3); z-index: -1; }
.wh-ring::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(255, 210, 122, .25); animation: spin 30s linear infinite; }
@keyframes whin { from { transform: scale(.4); opacity: 0; } }
.wh-core { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; cursor: pointer; background: radial-gradient(circle at 40% 30%, #2a4a78, #0c1a30); border: 2px solid #5aa9ff; box-shadow: 0 0 20px rgba(90, 169, 255, .5); transition: transform .15s; }
.wh-core:hover { transform: scale(1.12); }
.wh-cat, .wh-pow { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); animation: whpop .28s cubic-bezier(.2, .9, .3, 1.5) backwards; animation-delay: var(--d); }
@keyframes whpop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.wh-cat { width: 66px; height: 54px; border-radius: 14px; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wh-cat i { font-style: normal; font-size: 20px; line-height: 1.1; } .wh-cat span { font-size: 10px; }
.wh-cat.on { background: linear-gradient(180deg, #4a3b14, #2e250c); border-color: #ffd27a; color: #ffd27a; box-shadow: 0 0 16px rgba(255, 210, 122, .45); }
.wh-pow { width: 52px; height: 52px; border-radius: 50%; padding: 0; border-color: color-mix(in srgb, var(--pc) 70%, transparent); background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--pc) 50%, #1a2040), #0c1020 80%); box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.wh-pow i { font-style: normal; font-size: 24px; }
.wh-pow:hover { transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(1.25) !important; box-shadow: 0 0 26px var(--pc); border-color: var(--pc); z-index: 3; }
.wh-pow.on { box-shadow: 0 0 0 2px #fff, 0 0 26px var(--pc); }
.wh-pow.dis { filter: grayscale(1) brightness(.6); }
.wh-label { position: absolute; left: -120px; width: 240px; top: 222px; text-align: center; pointer-events: none; text-shadow: 0 2px 6px #000; }
.wh-label b { display: block; font-family: var(--title, serif); font-size: 20px; letter-spacing: 3px; } .wh-label span { font-size: 12px; color: #ffd27a; }

/* ---------- Buscador ---------- */
#palette { position: absolute; inset: 0; z-index: 45; background: rgba(2, 4, 10, .55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding-top: 14vh; }
.pal-box { width: min(620px, 92vw); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(26, 33, 60, .97), rgba(10, 13, 28, .98)); border: 1px solid rgba(255, 210, 122, .4); box-shadow: 0 30px 80px rgba(0, 0, 0, .75); animation: modalin .2s ease; }
#pal-in { width: 100%; padding: 16px 18px; font-size: 17px; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; outline: none; font-family: inherit; }
.pal-it { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 8px 16px; cursor: pointer; }
.pal-it i { font-style: normal; font-size: 18px; text-align: center; } .pal-it span { color: var(--muted); font-size: 12px; }
.pal-it.on, .pal-it:hover { background: linear-gradient(90deg, rgba(255, 210, 122, .18), transparent); box-shadow: inset 3px 0 0 #ffd27a; }
.pal-none { padding: 16px; color: var(--muted); } .pal-foot { padding: 8px 16px; font-size: 11px; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, .06); }
#brush-tip { position: absolute; z-index: 8; pointer-events: none; font-size: 11px; padding: 2px 8px; border-radius: 8px; background: rgba(8, 10, 22, .8); border: 1px solid rgba(255, 210, 122, .35); color: #ffe2a0; white-space: nowrap; }

/* ---------- Ojo de Dios ---------- */
.modal-box:has(.eye-wrap) { width: min(1120px, 96vw); }
.eye-layers { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.eye-layers button { font-size: 12px; padding: 4px 10px; border-radius: 16px; }
.eye-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 210, 122, .4); box-shadow: 0 10px 30px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .5); background: #060c1c; }
#eye-map { display: block; width: 100%; height: auto; cursor: crosshair; image-rendering: auto; }
#eye-tip { position: absolute; pointer-events: none; font-size: 12px; line-height: 1.4; padding: 6px 10px; border-radius: 9px; background: rgba(8, 10, 22, .92); border: 1px solid rgba(255, 210, 122, .4); min-width: 150px; }

/* una sola fila de tarjetas (con desplazamiento si no caben) y pestañas en una línea */
body.aaa #power-tabs { flex-wrap: nowrap; }
body.aaa #power-tabs .tab { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
body.aaa #powers { flex-wrap: nowrap; justify-content: safe center; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 9px 4px 4px; scrollbar-width: none; }
body.aaa #powers::-webkit-scrollbar { display: none; }
body.aaa #powers button { flex: none; }
#console-row { max-width: 100%; }
#bottom-center { min-width: 0; }
#console { min-width: 0; flex: 0 1 auto; }

/* ---------- Pantallas estrechas ---------- */
@media (max-width: 1380px) { body.aaa #powers button { min-width: 64px; padding: 5px 5px 4px; } body.aaa #powers button .ico { width: 28px; height: 28px; line-height: 28px; font-size: 18px; } body.aaa #power-tabs .tab .ct { display: none; } body.aaa #power-tabs .tab { padding: 4px 8px; } }
@media (max-width: 1100px) { body.aaa #minimap { display: none; } #power-info { display: none; } }
@media (max-width: 1180px) { .orb { width: 86px; height: 86px; } .orb-val b { font-size: 20px; } #console { min-width: 0; } }
@media (max-width: 760px) { .orb { display: none; } body.aaa #mana-wrap, body.aaa #sin-wrap { display: block; } #console { padding: 6px; border-radius: 12px; width: 100%; } #console-row { width: 100%; } #sundial, .con-tools, #power-info { display: none; } #cast-title b { font-size: 26px; letter-spacing: 8px; } .cine-title { font-size: 20px; letter-spacing: 4px; } }