/* =========================================================
   TecnoAventura V0.7 — identidad visual «fantasía tecnológica»
   (se carga después de styles.css; no modifica las reglas de la V0.6)
   ========================================================= */
:root {
  --tf-deep: #120b3a; --tf-violet: #5b3fd1; --tf-blue: #2f6bff; --tf-cyan: #5fd3ff; --tf-gold: #f2c14e;
  --tf-panel: rgba(18, 12, 58, .74); --tf-line: rgba(127, 214, 255, .35);
}
.px-view, .px-portrait, .g-pixel-view canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* ---------- Menú: fondo panorámico, Centinelas y capa de contraste ---------- */
.hub-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hub-bg { position: absolute; inset: -2%; background: radial-gradient(900px 500px at 50% 20%, #4b2bd1, transparent 60%), linear-gradient(180deg, #0d0830, #2a1878 45%, #6a3cc4 80%, #2a1858); }
.hub-decor.ready .hub-bg { background-image: linear-gradient(180deg, rgba(10, 6, 40, .25), rgba(10, 6, 40, .15) 40%, rgba(10, 6, 40, .55)), url('../assets/ui/reino-panorama.webp'); background-size: cover; background-position: center 30%; }
@media (max-width: 1000px) { .hub-decor.ready .hub-bg { background-image: linear-gradient(180deg, rgba(10, 6, 40, .35), rgba(10, 6, 40, .55)), url('../assets/ui/reino-panorama-960.webp'); } }
.sentinel { position: absolute; bottom: 0; width: clamp(210px, 21vw, 440px); height: auto; opacity: 0; transition: opacity .8s; filter: drop-shadow(0 0 18px rgba(95, 211, 255, .35)); }
.hub-decor.ready .sentinel { opacity: .95; }
.sentinel.left { left: max(-30px, calc(50% - 980px)); }
.sentinel.right { right: max(-30px, calc(50% - 980px)); transform: scaleX(-1); }
.sentinel-eye { display: none; }
@media (max-width: 1099px) { .sentinel { display: none; } }   /* pantallas pequeñas: sin estatuas */
@media (min-width: 1100px) and (max-width: 1439px) { .hub-decor.ready .sentinel { opacity: .55; } }

/* Animación ambiental (se desactiva en Ajustes, con «Animaciones» apagadas o con reducir movimiento) */
@keyframes tfDrift { from { transform: scale(1.02) translateX(-6px); } to { transform: scale(1.05) translateX(6px); } }
@keyframes tfGlow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(95, 211, 255, .25)); } 50% { filter: drop-shadow(0 0 28px rgba(127, 249, 255, .7)); } }
@keyframes tfTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }
.hub-decor.ready .hub-bg { animation: tfDrift 40s ease-in-out infinite alternate; }
.hub-decor.ready .sentinel { animation: tfGlow 5s ease-in-out infinite; }
.hub-decor::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(2px 2px at 78% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 30%, #bff8ff, transparent), radial-gradient(2px 2px at 64% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 34%, #bff8ff, transparent); animation: tfTwinkle 4s ease-in-out infinite; }
html.no-ambient .hub-decor .hub-bg, html.no-ambient .hub-decor .sentinel, html.no-ambient .hub-decor::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hub-decor .hub-bg, .hub-decor .sentinel, .hub-decor::after { animation: none !important; } }

/* Capa de contraste: los paneles del menú tienen fondo oscuro translúcido sobre la ilustración */
.hub.v07 .hud { background: var(--tf-panel); border: 1px solid var(--tf-line); border-radius: 22px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin-top: 10px; }
.hub.v07 .hub-hero { background: linear-gradient(170deg, rgba(30, 20, 90, .86), rgba(14, 9, 46, .86)); border: 2px solid var(--tf-line); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 18px 40px rgba(5, 2, 25, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hub.v07 .menu-tile { box-shadow: 0 6px 0 rgba(0, 0, 0, .28), 0 10px 26px rgba(5, 2, 25, .45); }
.hub.v07 .tile-label, .hub.v07 .tile-sub { text-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
html.high-contrast .hub-decor .hub-bg { background: #120b3a !important; }
html.high-contrast .sentinel { display: none; }

/* ---------- Héroe en el menú ---------- */
.hero-stage.px { display: grid; grid-template-columns: 34px auto 34px; align-items: center; justify-items: center; gap: 6px; width: 100%; }
.hero-stage.px .hub-hero-px { grid-column: 2; grid-row: 1; position: relative; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.hero-stage.px .hero-platform { grid-column: 1 / -1; grid-row: 1; align-self: end; width: 220px; height: 34px; margin: 0 0 -6px; background: radial-gradient(closest-side, rgba(95, 211, 255, .95), rgba(91, 63, 209, .45) 60%, transparent); border-radius: 50%; }
.hs-arrow { grid-row: 1; width: 34px; height: 54px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.hs-arrow:hover, .hs-arrow:focus-visible { background: rgba(95, 211, 255, .35); }
.hs-arrow.left { grid-column: 1; } .hs-arrow.right { grid-column: 3; }
.hero-stage-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.hero-px-name { font-weight: 800; color: #bff8ff; }
.hs-change { color: #fff; border-color: var(--tf-line); background: rgba(255, 255, 255, .1); }
.hero-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.hs-face { padding: 0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 10px; background: rgba(10, 6, 40, .6); cursor: pointer; overflow: hidden; }
.hs-face canvas { width: 30px; height: 30px; }
.hs-face.sel { border-color: var(--tf-cyan); box-shadow: 0 0 10px rgba(95, 211, 255, .8); }
.hs-face.locked canvas { filter: grayscale(1) brightness(.55); }
.menu-tile.mystery { background: linear-gradient(140deg, #2a1878, #4b2bd1 55%, #0f6e9e); }
.menu-tile.mystery.locked { filter: saturate(.65); }

/* ---------- Pantalla «Mi personaje» ---------- */
.heroes .tabs { margin: 10px 0; flex-wrap: wrap; }
.heroes-grid { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: 16px; align-items: start; }
.heroes-main { display: flex; flex-direction: column; gap: 14px; }
.hero-detail { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.hd-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 14px 18px 0; border-radius: 22px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--hc) 45%, #1b1046), #120b3a 70%); min-width: 230px; }
.hd-stage .hd-big { position: relative; z-index: 1; }
.hd-platform { width: 190px; height: 26px; margin-top: -18px; border-radius: 50%; background: radial-gradient(closest-side, var(--hc), transparent); opacity: .9; }
.hd-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hd-title h2 { margin: 0; }
.hd-spec { font-weight: 800; color: var(--primary-2); margin: 2px 0 8px; }
.hd-anims, .hd-dirs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.hd-anims .btn.sel, .hd-dirs .btn.sel { background: var(--primary); color: #fff; }
.hero-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.hero-card { position: relative; background: #fff; border-radius: 18px; border: 3px solid transparent; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.hero-card.sel { border-color: var(--hc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc) 40%, transparent), 0 5px 0 rgba(0, 0, 0, .15); }
.hc-pick { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); font: inherit; }
.hc-art { width: 100%; display: flex; justify-content: center; border-radius: 12px; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--hc) 55%, #fff), #1b1046 80%); padding: 4px 0; }
.hero-card.st-bloqueado .hc-art canvas { filter: saturate(.4) brightness(.8); }
.hc-name { font-family: var(--font-title); font-size: 1.1em; }
.hc-spec { font-size: .76em; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.15; }
.hc-desc { font-size: .8em; margin: 0; color: var(--ink-soft); }
.hc-foot { display: flex; justify-content: space-between; align-items: center; gap: 4px; flex-wrap: wrap; }
.hc-price { font-weight: 800; font-size: .85em; } .hc-price.free { color: var(--go-2); }
.tag.own { background: #e0e7ff; color: #3730a3; } .tag.free { background: #dcfce7; color: #166534; }
.hero-shop { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hero-shop .hc-art canvas { width: 128px; height: 192px; }
.cos-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cos-opt { border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; min-width: 84px; }
.cos-opt.sel { border-color: var(--primary); background: var(--paper-2); }
.cos-opt.locked { opacity: .8; }
.cos-opt small { font-size: .72em; font-weight: 800; color: var(--ink-soft); }
.cos-sw { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); border: 2px solid #fff; box-shadow: 0 0 0 1px #0002; }
.hs-list { list-style: none; padding: 0; margin: 4px 0; }
.hs-example { margin: 4px 0; padding: 8px 12px; border-left: 4px solid var(--primary); background: var(--paper-2); border-radius: 8px; font-style: italic; }
@media (max-width: 900px) { .heroes-grid { grid-template-columns: 1fr; } .hero-detail { grid-template-columns: 1fr; justify-items: center; } }
@media (max-width: 480px) { .hd-stage .hd-big { width: 144px; height: 216px; } .hd-stage { min-width: 0; } }

/* ---------- Habilidad del héroe (misiones) ---------- */
.hero-ability-row { margin-top: 6px; }
.hero-ability { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(120deg, #2a1878, #5b3fd1); color: #fff; border: 0; }
.hero-ability small { opacity: .8; font-weight: 700; }
.hero-ability .ha-mini { width: 24px; height: 36px; }
.guide-bubble.hero-voice { border-color: var(--primary); background: #f4f1ff; }
.res-hero-wrap { display: flex; justify-content: center; margin: 4px 0; }

/* ---------- Guardianes pixel art ---------- */
.g-pixel-view { display: flex; align-items: flex-end; justify-content: center; }
.g-pixel-view canvas { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.g-pixel-view.sil canvas { filter: brightness(0) drop-shadow(0 0 6px rgba(155, 93, 229, .7)); opacity: .85; }
.g-portrait canvas, .rd-portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.gh-strips { margin-top: 8px; }
.px-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.px-cell { margin: 0; display: flex; flex-direction: column; align-items: center; background: var(--paper-2); border-radius: 12px; padding: 4px 6px; }
.px-cell canvas { width: 48px; height: auto; }
.px-cell figcaption { font-size: .7em; font-weight: 800; color: var(--ink-soft); }

/* ---------- Reino de los Misterios ---------- */
.my-hero { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; background: linear-gradient(140deg, #1b1046, #2a1878 60%, #0f3b6e); color: #fff; }
.my-art { position: relative; height: 200px; border-radius: 18px; background: radial-gradient(circle at 50% 60%, #5b3fd1, #120b3a 70%); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.my-moon { position: absolute; top: 14px; right: 18px; font-size: 34px; }
.my-door { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 64px; filter: drop-shadow(0 0 16px #c77dff); }
.my-bit { position: relative; margin-bottom: 8px; }
.mysteries.locked .my-zone.veiled { filter: saturate(.3); }
.my-stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.my-stages .chip { background: rgba(255, 255, 255, .15); color: #fff; }
.my-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.my-zone { display: flex; flex-direction: column; gap: 4px; }
.my-zone.play { border: 3px solid #c77dff; }
.mz-icon { font-size: 34px; }
.mz-world { color: var(--ink-soft); font-weight: 700; }
.mc-stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.mc-stage { padding: 4px 10px; border-radius: 99px; background: #e9e6f5; font-weight: 800; font-size: .85em; }
.mc-stage.on { background: var(--primary); color: #fff; } .mc-stage.done { background: #dcfce7; color: #166534; }
.mc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0; }
.mc-item { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 8px 10px; cursor: pointer; font: inherit; }
.mc-item.seen { border-color: #a78bfa; background: #f4f1ff; } .mc-item.sel { border-color: var(--go); background: #e7fff7; }
.mc-ic { font-size: 26px; }
.mc-notes { margin: 0; padding-left: 18px; }
.mc-choices { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mc-feedback.ok { color: #166534; font-weight: 800; } .mc-feedback.bad { color: #9d174d; font-weight: 800; }
.mc-stamp { display: inline-block; font-family: var(--font-title); font-size: 1.6em; color: #7c3aed; border: 4px solid #7c3aed; border-radius: 12px; padding: 4px 14px; transform: rotate(-4deg); }
.mc-guide .guide-chip { display: flex; align-items: flex-end; gap: 4px; }
@media (max-width: 700px) { .my-hero { grid-template-columns: 1fr; } }
.ai-hero { display: flex; align-items: center; gap: 12px; background: var(--paper-2); border-radius: 16px; padding: 6px 12px; margin: 8px 0; flex-wrap: wrap; }
.ai-hero p { margin: 0; flex: 1 1 200px; }
.mc-guide { display: flex; align-items: center; gap: 10px; }
.mc-guide .guide-bubble { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .mc-guide { flex-direction: column; align-items: stretch; } .mc-guide .guide-chip { justify-content: center; } }
.my-hero .help { color: #d9d2ff; }
.mysteries .section-title { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); margin: 18px 0 10px; }
.hero-strip { gap: 3px; flex-wrap: nowrap; }
.hs-face canvas { width: 28px; height: 28px; }
@media (max-width: 380px) { .hero-strip { flex-wrap: wrap; } }

/* ---------- V0.7.2: avatares del perfil (Robo, Nova, Pixel, Byte) y personalización unificada ---------- */
.av-view { display: inline-block; line-height: 0; }
.av-view svg { display: block; overflow: visible; }
.menu-tile.c10 { background: linear-gradient(140deg, #ff8a3d, #2ec4b6); }
.cust-guide { margin: 0 0 14px; padding: 12px 16px; }
.cust-guide p { margin: 0 0 8px; }
.cust-guide .row-btns { margin: 0; gap: 8px; flex-wrap: wrap; }
.av-anims, .av-dirs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.av-anims .btn.sel, .av-dirs .btn.sel { background: var(--primary); color: #fff; border-color: var(--primary); }
.cust-preview .lbl { color: #fff; margin: 4px 0 0; }
.av-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.av-card { gap: 2px; }
.av-card .av-title { font-weight: 800; color: var(--primary-d, #3a0ca3); }
.tabs .tab.tab-link { border-style: dashed; opacity: .9; }
.char-card .char-wrap svg, .av-card .char-wrap svg { overflow: visible; }
.hero-name-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero-name-row .hero-name { margin: 0; }
.hub-avatar { border: 0; background: rgba(255,255,255,.14); border-radius: 50%; width: 76px; height: 76px; padding: 0; display: grid; place-items: center; overflow: visible; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.hub-avatar:hover { background: rgba(255,255,255,.24); }
.hub-avatar .char-wrap svg { width: 70px; height: 77px; margin-top: -6px; }
/* V0.7.2: en pantallas angostas la vista previa del avatar no desborda */
.cust-grid > * { min-width: 0; }
.cust-preview { max-width: 100%; box-sizing: border-box; }
.cust-preview .char-big .char-wrap svg { max-width: 100%; height: auto; }