.aof{--gold:#f2c770;background:#091723;color:#eef4f7;border:2px solid #7c6034;border-radius:15px;max-width:1150px;margin:20px auto;padding:13px;box-shadow:0 18px 55px #0005;font-family:system-ui,-apple-system,Arial,sans-serif}.aof *{box-sizing:border-box}.aof button,.aof select,.aof input{font:inherit}.aof button{cursor:pointer;border:1px solid #9b7a43;background:#1a3547;color:#fff;padding:10px 13px;border-radius:8px;font-weight:700}.aof button:hover{filter:brightness(1.2)}.aof-header{display:flex;align-items:center;gap:15px;border-bottom:1px solid #51677a;padding-bottom:9px}.aof-header>img{width:85px;height:72px;object-fit:contain;image-rendering:pixelated}.aof-header>div{flex:1}.aof-header strong{color:#ffd785;font-size:clamp(19px,3vw,26px);display:block;letter-spacing:2px}.aof-header small{font-size:11px;color:#a6c0cf;display:block}.aof-hud{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px;margin:12px 0;color:#fff3cf}.aof-hud span{background:#203747;padding:6px 12px;border:1px solid #445c63;border-radius:6px}.aof-stage{position:relative;background:#1a3429;border:3px solid #6e855c;overflow:hidden}.aof canvas{width:100%;height:auto;aspect-ratio:5/3;display:block;image-rendering:pixelated;touch-action:none}.aof-overlay{position:absolute;inset:0;background:#061322c9;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}.aof-panel{text-align:center;max-width:420px;background:#0d2234e8;border:2px solid #ad8d4d;border-radius:15px;padding:10px 20px}.aof-panel>img{height:100px;max-width:95%;object-fit:contain}.aof-panel h2{margin:0;color:#ffe1a2}.aof-panel p{font-size:13px}.aof-panel label{display:block;margin-bottom:5px}.aof-panel select{width:100%;background:#203646;color:#fff;padding:9px;border:1px solid #9e854c;margin-bottom:10px}.aof .aof-gold{background:linear-gradient(#eecb74,#a8772c);color:#1e1b16;border:1px solid #fff2a4}.aof-muted{font-size:12px!important;color:#b9c8d6}.aof-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:10px}.aof-pad{text-align:center}.aof-pad>button{display:block;margin:auto auto 4px;min-width:52px}.aof-pad>div{display:flex;gap:5px}.aof-pad button{min-width:54px;min-height:45px;touch-action:none;user-select:none}.aof-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.aof-actions button{min-height:51px;touch-action:none}.aof-bottom{border-top:1px solid #344c62;margin-top:13px;padding:10px 0 0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px}.aof-bottom>div:last-child{display:flex;gap:6px;flex-wrap:wrap}.aof-modal{position:fixed;inset:0;z-index:100000;background:#020b16c9;display:flex;align-items:center;justify-content:center;padding:15px}.aof-dialog{position:relative;width:min(540px,100%);max-height:90vh;overflow:auto;background:#10263a;border:2px solid #be9046;border-radius:15px;padding:25px;color:#f4f5ef}.aof-dialog h2{color:#f2cc80}.aof-close{position:absolute;right:8px;top:8px}.aof-dialog form{display:flex;flex-direction:column;gap:9px;margin:12px 0}.aof-dialog input{background:#f0f5f7;color:#1b2630;border-radius:6px;border:1px solid #91a5b5;padding:12px;width:100%}.aof-dialog a{color:#a9d8ff}.aof-products{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:13px 0}.aof-products button{text-align:left;display:flex;flex-direction:column;gap:5px}.aof-products small{color:#b2cdda}.aof-products strong{color:#ffe1a2}.aof [hidden]{display:none!important}@media(max-width:550px){.aof{padding:7px;border-radius:6px}.aof-header>img{width:55px;height:55px}.aof-header{gap:7px}.aof-header button{font-size:10px;padding:8px}.aof-header small{font-size:9px}.aof-hud{gap:4px}.aof-hud span{font-size:11px;padding:4px 6px}.aof-panel{padding:6px 10px}.aof-panel>img{height:65px}.aof-panel h2{font-size:18px}.aof-panel p{font-size:11px;margin:6px 0}.aof-panel select{padding:5px}.aof-panel button{padding:6px 10px}.aof-actions button{padding:8px;font-size:12px;min-height:44px}.aof-pad button{min-width:40px;min-height:42px}.aof-products{grid-template-columns:1fr}}

/* AGE OF FORCE Survivor Evolution 1.1.0 — ampliaciones, sin retirar estilos originales */
.aof { --gold:#f3cd7c; background:linear-gradient(140deg,#0b1924,#081e1c 48%,#081522); border-color:#897049; }
.aof-header { flex-wrap:wrap; }
.aof-header>div { min-width:150px; }
.aof-quality-wrap { display:flex;flex-direction:column;gap:3px;color:#e1c483;font-size:10px;font-weight:800;letter-spacing:1px; }
.aof-quality-wrap select { min-width:102px;border:1px solid #9b7a43;border-radius:7px;padding:7px 8px;background:#183347;color:#fff; }
.aof-hud { margin:9px 0 7px; }
.aof-hud span { background:#173341;border-color:#496360; }
.aof-exp { position:relative;background:#142a36;border:1px solid #3b6081;border-radius:7px;height:21px;overflow:hidden;margin-bottom:8px;text-align:center; }
.aof-exp>div { position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#397fbb,#70bdec);transition:width .12s; }
.aof-exp strong { z-index:1;position:relative;font-size:12px;line-height:19px;text-shadow:0 1px 2px #142132; }
.aof-stage { border-color:#587b5b;border-radius:8px; }
.aof-controls { justify-content:space-between;align-items:center; }
.aof-stick { position:relative;flex:0 0 118px;height:118px;border:2px solid #829b79;border-radius:50%;background:radial-gradient(circle at center,#5a805c55,#183647);box-shadow:inset 0 0 0 12px #101f2b66;touch-action:none;user-select:none;cursor:grab; }
.aof-stick::before { content:"↕";position:absolute;inset:4px;color:#aec7ba75;font-size:24px;display:flex;align-items:center;justify-content:center;pointer-events:none; }
.aof-stick-knob { position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(0,0);margin-top:-24px;margin-left:-24px;background:linear-gradient(150deg,#a7c6b4,#41756a);border:3px solid #d9f2db;border-radius:50%;box-shadow:0 3px 9px #06131c;pointer-events:none; }
.aof-pad { opacity:.86; }
.aof-actions { flex:1;max-width:495px; }
.aof-actions button { flex:1 1 98px;white-space:nowrap; }
.aof-actions #aof-dash { background:linear-gradient(135deg,#514681,#293458); }
.aof-actions #aof-auto[aria-pressed="true"] { background:linear-gradient(120deg,#2a6754,#1a463d);border-color:#7fcbb3; }
.aof-overlay { background:linear-gradient(#05111edb,#061924dc);z-index:2; }
.aof-panel { max-width:455px;width:100%;box-shadow:0 15px 65px #0009; }
.aof-panel .aof-load { display:block;margin:8px auto;background:#285b54;border-color:#81b998; }
.aof-upgrade-list { display:grid;grid-template-columns:1fr;gap:10px;margin:18px 0; }
.aof-upgrade-list button { width:100%;text-align:left;display:flex;flex-direction:column;gap:5px;background:linear-gradient(125deg,#1a3f4d,#263c50);border-color:#7d9eac;padding:12px 15px;min-height:68px; }
.aof-upgrade-list button:focus-visible,.aof-upgrade-list button:hover { outline:2px solid #eecb74;outline-offset:1px; }
.aof-upgrade-list button strong { color:#f6dea5;font-size:17px; }
.aof-upgrade-list button small { font-size:13px;color:#d8e8eb; }
.aof [role=application] { -webkit-tap-highlight-color:transparent; }
@media(max-width:750px) {
  .aof { margin:8px auto; }
  .aof-header>img { width:68px;height:56px; }
  .aof-header button { font-size:11px; }
  .aof-stick { flex-basis:105px;height:105px; }
  .aof-pad { display:none; }
  .aof-actions { max-width:calc(100% - 118px); }
  .aof-actions button { flex:1 1 44%;font-size:11px;min-height:44px;padding:8px; }
  .aof-controls { gap:7px; }
}
@media(max-width:390px) {
  .aof-header strong { font-size:17px;letter-spacing:1px; }
  .aof-header>img { width:45px;height:46px; }
  .aof-header>div { min-width:125px; }
  .aof-quality-wrap { flex-direction:row;align-items:center; }
  .aof-quality-wrap select { min-width:85px; }
  .aof-stick { flex-basis:92px;height:92px; }
  .aof-stick-knob { width:42px;height:42px;margin-top:-21px;margin-left:-21px; }
  .aof-actions { max-width:calc(100% - 100px); }
}

/* Audio Cinemático también disponible si el usuario incrusta el shortcode. */
.aof-boss-alert{position:absolute;top:24%;left:50%;transform:translateX(-50%);z-index:12;pointer-events:none;background:#7d1420ea;color:#fff1b3;border:2px solid #efbd5c;padding:9px 12px;border-radius:12px;text-align:center;font-weight:900;max-width:95%;box-shadow:0 0 24px #b22b2b8f}
.aof-boss-alert[hidden]{display:none!important}
.aof-audio-hint{color:#e6ce83;font-size:12px}
.aof-audio-settings{display:grid;gap:10px}
.aof-audio-settings label{display:grid;gap:5px}
.aof-audio-settings input[type=range]{width:100%;accent-color:#edc57b}
.aof-audio-settings input[type=checkbox]{width:20px}
.aof-audio-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}

/* VB 1.3.2: Tienda optimizada para móviles horizontales */
.aof-modal .aof-dialog{display:flex;flex-direction:column;width:min(690px,96vw);max-height:min(96dvh,640px);overflow:auto;padding:clamp(9px,1.8vh,18px);gap:5px;overscroll-behavior:contain}
.aof-dialog h2{font-size:clamp(17px,3.2vh,23px);margin:0 34px 3px 0}
.aof-dialog p{font-size:clamp(11px,2vh,13px);margin:2px 0 5px}
.aof-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:5px 0}
.aof-products button{padding:7px 9px;gap:1px;min-height:0;font-size:12px;line-height:1.3}
.aof-products small{font-size:10px;line-height:1.3}
.aof-products strong{font-size:11px}
#aof-return{position:sticky;bottom:0;z-index:2;align-self:stretch;padding:9px 12px;margin-top:auto;box-shadow:0 -6px 10px #10263a}
.aof-zoom-controls{position:absolute;top:calc(50% - 52px);left:8px;z-index:9;display:flex;flex-direction:column;gap:3px;pointer-events:auto}
.aof-zoom-controls button{font-size:13px;min-width:31px;min-height:28px;padding:4px;border:1px solid #e2b867;background:#112c3ddc;color:#fff}
@media (orientation:landscape) and (max-height:550px){.aof-modal{padding:4px}.aof-modal .aof-dialog{width:min(690px,95vw);max-height:96dvh;padding:8px}.aof-products{grid-template-columns:repeat(2,minmax(0,1fr))}.aof-products button{padding:5px 8px;font-size:11px}.aof-products small{font-size:10px}.aof-dialog p{font-size:11px}}


/* VB 1.3.3 — Zoom real y tienda compacta horizontal */
.aof-zoom-controls{right:9px;left:auto;top:45%;transform:translateY(-50%);background:#071824a6;border:1px solid #cfad65;border-radius:10px;padding:5px;box-shadow:0 6px 24px #0007}
.aof-zoom-controls button{min-width:39px;min-height:34px;border-radius:7px;font-weight:800;cursor:pointer;touch-action:manipulation}
.aof-zoom-controls button:focus-visible{outline:2px solid #fff0ba}
.aof-zoom-controls button[aria-pressed="true"]{background:#c79c46;color:#171d23}
.aof-dialog{overscroll-behavior:contain}
#aof-return{position:sticky;bottom:-1px;width:100%;text-align:center;background:linear-gradient(#f6d88c,#ad8031);border:1px solid #ffe3a0;color:#182331;font-weight:900}
@media(max-height:520px) and (orientation:landscape){
 .aof-modal{padding:3px}.aof-modal .aof-dialog{max-height:97dvh;width:min(680px,96vw);padding:8px;gap:3px}
 .aof-dialog h2{font-size:16px;margin:0 32px 2px 0}
 .aof-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .aof-products button{padding:6px;min-height:0;line-height:1.1}
 .aof-products small,.aof-products strong{font-size:10px}
 .aof-products button em{font-size:10px}
 #aof-return{padding:6px;font-size:12px;min-height:32px}
}

/* VB 1.5.3 — Cartelas cinematográficas legibles, sin capturar controles. */
.aof-cinema{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:14;
  pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:min(580px,88%);padding:13px 20px;text-align:center;
  color:#fff0cd;background:linear-gradient(95deg,#090e15e8,#301b18ed,#090e15e8);
  border-top:2px solid #d7a364;border-bottom:2px solid #d7a364;
  box-shadow:0 0 40px #dd662c4d;animation:aof153-entry .26s ease-out}
.aof-cinema strong{font-size:clamp(18px,3vw,33px);letter-spacing:1.2px;text-shadow:0 3px 7px #000}
.aof-cinema span{font-size:clamp(10px,1.5vw,14px);color:#ffcf96}
.aof-cinema[hidden]{display:none!important}
@keyframes aof153-entry{from{opacity:0;transform:translate(-50%,-14px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(orientation:landscape) and (max-height:460px){.aof-cinema{top:13%;padding:7px 12px}.aof-cinema strong{font-size:19px}}
@media(prefers-reduced-motion:reduce){.aof-cinema{animation:none}}

/* Urban Legends VB 2.0.0 · Rebrand y galería de héroes, horizontal PWA */
.aof-header>img{image-rendering:auto;object-fit:contain}
.aof-header strong{letter-spacing:1px}
.aof-hero-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:5px auto 4px;width:100%;max-width:420px}
.aof .aof-hero-card{min-width:0;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:4px 3px;background:#183044;border:1px solid #526777;border-radius:8px;color:#d3e4e8;line-height:1.1;box-shadow:none}
.aof .aof-hero-card img{width:auto;max-width:100%;height:clamp(39px,10vh,77px);object-fit:contain;image-rendering:auto;pointer-events:none}
.aof .aof-hero-card span{font-size:clamp(9px,1.7vh,11px);font-weight:750;white-space:normal}
.aof .aof-hero-card.is-selected{border-color:#ffdf85;background:#3c3034;box-shadow:inset 0 0 0 1px #c3994e}
.aof .aof-hero-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
.aof #aof-hero-portrait{image-rendering:auto;max-height:52px;height:7vh;min-height:30px;width:auto;object-fit:contain;margin:1px auto}
.aof .aof-hero-detail{font-size:10px!important;color:#e7d7ac;margin:2px 0!important}
@media (orientation:landscape) and (max-height:430px){.aof .aof-hero-card img{height:35px}.aof #aof-hero-portrait{display:none}.aof .aof-hero-detail{display:none}}

/* Urban Legends VB 2.0.1 — dificultad legible y personajes mejor proporcionados */
.aof-difficulty-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 0}
.aof .aof-difficulty-options button{display:flex;flex-direction:column;gap:7px;min-width:0;padding:12px 8px;background:#1b3545;border:1px solid #78919a;text-align:center}
.aof .aof-difficulty-options button strong{color:#ffdc96;font-size:clamp(12px,2.4vh,16px)}
.aof .aof-difficulty-options button small{font-size:clamp(10px,1.7vh,12px);color:#e0e8e5;line-height:1.3}
.aof .aof-difficulty-options button.is-selected{border:2px solid #f7d783;background:#31584e}
#aof-difficulty-label{color:#f6dda0;font-weight:800}
.aof-panel #aof-difficulty{border-color:#e5c077;background:#19434d;color:#fff3d1;font-weight:800}
@media(max-height:420px) and (orientation:landscape){.aof-difficulty-options{gap:4px}.aof .aof-difficulty-options button{padding:6px 4px;gap:3px}.aof-panel #aof-difficulty{padding:3px;margin-bottom:3px}}
