:root{
  --gold:#d5b06a;
  --gold-soft:#b78b42;
  --gold2:#8e6a32;
  --paper:#f2e5c9;
  --muted:#c8b894;
  --ink:#12100d;
  --glass:rgba(8,9,12,.46);
  --glass-strong:rgba(8,9,12,.68);
  --line:rgba(213,176,106,.33);
  --shadow:rgba(0,0,0,.68);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#050608;color:var(--paper);font-family:Georgia,'Times New Roman',serif}
body{overflow:hidden}
.ark-app{position:relative;min-height:100vh;overflow:hidden;background:#050608}
.ark-bg,.ark-video-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .85s ease, filter .85s ease, transform 12s ease}
.ark-bg{background-image:url('assets/imagenes/nebora_nocturna.webp');background-size:cover;background-position:center;filter:saturate(.95) contrast(1.08) brightness(.8);transform:scale(1.035);opacity:1}
.ark-video-bg{z-index:0;opacity:0;filter:saturate(.9) contrast(1.05) brightness(.72);transform:scale(1.02)}
.ark-video-bg.active{opacity:1}
.ark-video-bg.active + .ark-bg{opacity:0}
.ark-motion-fx{position:fixed;inset:-10%;z-index:1;pointer-events:none;opacity:.24;background:radial-gradient(circle at 25% 15%,rgba(213,176,106,.08),transparent 20%),radial-gradient(circle at 75% 85%,rgba(75,38,120,.12),transparent 25%);mix-blend-mode:screen;animation:arkFloat 18s ease-in-out infinite alternate}
.ark-motion-fx.rain_glass:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,rgba(255,255,255,.10) 0 1px,transparent 1px 9px);opacity:.16;filter:blur(.2px);animation:rainSlide 1.35s linear infinite}
.ark-motion-fx.slow_drift{opacity:.28;animation:arkDrift 28s ease-in-out infinite alternate}
.ark-motion-fx.slow_breath{opacity:.2;animation:arkBreath 15s ease-in-out infinite alternate}
.ark-vignette{position:fixed;inset:0;z-index:2;background:radial-gradient(circle at center,rgba(0,0,0,.02),rgba(0,0,0,.68) 78%),linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 45%,rgba(0,0,0,.55));pointer-events:none}
@keyframes arkFloat{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,-1%,0) scale(1.03)}}
@keyframes arkDrift{from{transform:translate3d(-2%,1%,0) scale(1.02)}to{transform:translate3d(2%,-1.5%,0) scale(1.08)}}
@keyframes arkBreath{from{transform:scale(1.01);filter:brightness(.92)}to{transform:scale(1.045);filter:brightness(1.04)}}
@keyframes rainSlide{from{transform:translate3d(0,-2%,0)}to{transform:translate3d(-2%,6%,0)}}
.hidden{display:none!important}
button{font-family:inherit}
.ark-start{position:relative;z-index:4;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.28))}
.ark-start-card{width:min(900px,92vw);padding:2.2rem;border:1px solid rgba(213,176,106,.24);border-radius:24px;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.52));box-shadow:0 30px 120px rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.ark-kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.16em;font-size:.84rem;margin:0 0 1rem}
.ark-start h1{font-size:clamp(2rem,5vw,5.5rem);letter-spacing:.05em;margin:0 0 1rem;text-shadow:0 4px 25px #000;line-height:1.03}
.ark-start p{font-size:1.15rem;opacity:.9;margin-bottom:2rem}
.ark-start small{display:block;margin-top:1rem;color:var(--muted)}
.ark-start button,.ark-choices button,.ark-actions button,.ark-restore{background:linear-gradient(180deg,rgba(36,28,18,.92),rgba(12,10,8,.86));color:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.74rem 1rem;font-size:.95rem;cursor:pointer;box-shadow:0 0 18px rgba(0,0,0,.35);transition:border-color .2s ease,transform .2s ease,background .2s ease,opacity .2s ease}
.ark-start button:hover,.ark-choices button:hover,.ark-actions button:hover,.ark-restore:hover{border-color:var(--gold);color:#fff;transform:translateY(-1px)}
.ark-reader{position:relative;z-index:4;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;gap:.9rem}
.ark-topbar{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.56rem .75rem;backdrop-filter:blur(8px);box-shadow:0 12px 50px rgba(0,0,0,.25)}
.ark-scene-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:1rem}
#chapterLabel{color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
#locationLabel{opacity:.72;margin-left:.75rem;color:var(--muted)}
.ark-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ark-actions button{font-size:.84rem;padding:.42rem .68rem;border-radius:9px}
.ark-reader-bottom{width:min(1180px,calc(100vw - 2rem));margin:0 auto 0.65rem;display:flex;flex-direction:column;gap:.55rem;transition:opacity .25s ease,transform .25s ease}
.ark-textbox{width:100%;max-height:34vh;overflow:auto;background:linear-gradient(180deg,rgba(12,10,8,.58),rgba(5,5,6,.66));border:1px solid var(--line);border-radius:18px;padding:.95rem 1.2rem;box-shadow:0 18px 70px rgba(0,0,0,.55), inset 0 0 18px rgba(213,176,106,.045);backdrop-filter:blur(12px)}
.ark-textbox p{font-size:clamp(1.0rem,1.7vw,1.24rem);line-height:1.48;margin:.42rem 0;text-shadow:0 2px 8px #000}
.ark-textbox .choiceEcho{color:var(--gold);font-style:italic;border-left:2px solid var(--gold2);padding-left:1rem}
.ark-choices{width:100%;display:flex;flex-direction:column;gap:.42rem}
.ark-choices button{text-align:left;line-height:1.3;background:linear-gradient(180deg,rgba(24,18,12,.62),rgba(8,8,10,.72));backdrop-filter:blur(10px);padding:.58rem .82rem;border-radius:10px}
.view-compact .ark-textbox{max-height:7.4rem;padding:.75rem 1rem;background:linear-gradient(180deg,rgba(12,10,8,.44),rgba(5,5,6,.54))}
.view-compact .ark-textbox{max-height:13.5rem;overflow-y:auto}.view-compact .ark-textbox p{font-size:clamp(.92rem,1.25vw,1.04rem);line-height:1.34;margin:.22rem 0}.view-compact .ark-choices{opacity:.92}.view-immersive .ark-reader-bottom,.view-immersive .ark-topbar{opacity:0;pointer-events:none;transform:translateY(18px)}.view-immersive .ark-restore{display:block!important}.ark-reader.ui-hidden .ark-topbar,.ark-reader.ui-hidden .ark-reader-bottom{opacity:0;pointer-events:none;transform:translateY(18px)}.ark-restore{position:absolute;z-index:5;right:1rem;bottom:1rem;display:none;background:rgba(0,0,0,.54);backdrop-filter:blur(8px)}.ark-reader.ui-hidden .ark-restore{display:block!important}
@media(max-width:800px){body{overflow:auto}.ark-reader{padding:.75rem}.ark-topbar{position:relative;top:auto;left:auto;right:auto;flex-direction:column;gap:.5rem;align-items:flex-start;margin-top:.5rem}.ark-reader-bottom{width:100%;margin-bottom:.5rem}.ark-textbox{max-height:42vh;padding:.85rem}.ark-actions{justify-content:flex-start}.ark-actions button{font-size:.78rem}.ark-start-card{padding:1.3rem}.ark-start h1{font-size:clamp(1.7rem,9vw,3.2rem)}}

/* V3 — Controles de audio inmersivo */
.ark-volume{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--muted);
  border:1px solid rgba(213,176,106,.22);
  border-radius:9px;
  padding:.31rem .55rem;
  background:linear-gradient(180deg,rgba(22,17,12,.58),rgba(6,6,8,.62));
  font-size:.82rem;
  box-shadow:0 0 18px rgba(0,0,0,.25);
}
.ark-volume input[type="range"]{
  width:92px;
  accent-color:var(--gold);
  cursor:pointer;
}
.ark-actions button.is-off{
  opacity:.62;
  color:#c7b89a;
}
@media(max-width:800px){
  .ark-volume{font-size:.76rem;padding:.28rem .45rem}
  .ark-volume input[type="range"]{width:72px}
}


/* V4 — Biblioteca musical, URL y MP3 local */
.ark-music-panel{
  position:absolute;
  right:1rem;
  top:4.85rem;
  z-index:6;
  width:min(430px,calc(100vw - 2rem));
  border:1px solid rgba(213,176,106,.34);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(10,9,8,.82),rgba(5,5,7,.88));
  box-shadow:0 28px 100px rgba(0,0,0,.62), inset 0 0 18px rgba(213,176,106,.035);
  backdrop-filter:blur(14px);
  padding:.85rem;
}
.ark-music-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;color:var(--gold);letter-spacing:.04em}
.ark-music-head button{padding:.25rem .55rem;border-radius:8px;font-size:1rem}
.ark-field{display:flex;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.88rem;margin-bottom:.65rem}
.ark-field select,.ark-url-row input{
  width:100%;
  background:rgba(0,0,0,.45);
  color:var(--paper);
  border:1px solid rgba(213,176,106,.26);
  border-radius:10px;
  padding:.58rem .7rem;
  font-family:inherit;
}
.ark-url-row{display:grid;grid-template-columns:1fr auto;gap:.45rem;margin-bottom:.65rem}
.ark-url-row button,.ark-music-actions button{padding:.56rem .72rem}
.ark-file-label{
  display:block;
  padding:.65rem .75rem;
  border:1px dashed rgba(213,176,106,.38);
  border-radius:12px;
  color:var(--muted);
  background:rgba(0,0,0,.22);
  margin-bottom:.65rem;
  cursor:pointer;
}
.ark-file-label input{display:block;margin-top:.45rem;width:100%;color:var(--paper)}
.ark-music-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.55rem}
.ark-current-track{font-size:.86rem;color:var(--gold);margin:.4rem 0}
.ark-music-note{font-size:.78rem;line-height:1.35;color:#b8aa8a;margin:.45rem 0 0}
@media(max-width:800px){
  .ark-music-panel{position:fixed;top:auto;right:.75rem;left:.75rem;bottom:.75rem;width:auto;max-height:62vh;overflow:auto}
  .ark-url-row{grid-template-columns:1fr}
}


/* V6: selector de capítulos y lectura larga */
.ark-chapter-jump {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(184,139,75,.45);
  border-radius: 10px;
  padding: .32rem .55rem;
  background: rgba(15,10,5,.52);
  color: #e7c985;
  font-size: .86rem;
  white-space: nowrap;
}
.ark-chapter-jump select {
  background: rgba(18,12,7,.92);
  color: #f3dfb2;
  border: 1px solid rgba(184,139,75,.5);
  border-radius: 8px;
  padding: .28rem .45rem;
  max-width: 190px;
}
.ark-reader-bottom { max-height: 48vh; }
.ark-textbox { max-height: 34vh; overflow-y: auto; }
.ark-textbox::-webkit-scrollbar { width: 8px; }
.ark-textbox::-webkit-scrollbar-thumb { background: rgba(184,139,75,.35); border-radius: 6px; }
@media (max-width: 850px) {
  .ark-chapter-jump { order: 10; width: 100%; justify-content: space-between; }
  .ark-chapter-jump select { max-width: 60vw; }
}

/* V8 — Navegación atrás, storage seguro y encuadre de imagen */
.ark-actions button:disabled,
.ark-actions button.is-disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none!important;
  border-color:rgba(213,176,106,.18);
}
.ark-app.bg-fit-contain .ark-bg{
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  transform:none;
  filter:saturate(.95) contrast(1.04) brightness(.82);
}
.ark-app.bg-fit-contain .ark-video-bg{
  object-fit:contain;
  transform:none;
  background:#050608;
}
.ark-app.bg-fit-cover .ark-bg{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}
.ark-app.bg-fit-cover .ark-video-bg{
  object-fit:cover;
}


/* V10 — pruebas arkémicas / minijuegos piloto */

.ark-interactive-box{
  width:100%;
  background:linear-gradient(180deg,rgba(15,12,9,.56),rgba(7,7,8,.68));
  border:1px solid rgba(213,176,106,.26);
  border-radius:16px;
  padding:.85rem 1rem;
  box-shadow:0 14px 55px rgba(0,0,0,.42), inset 0 0 14px rgba(213,176,106,.035);
  backdrop-filter:blur(10px);
}
.ark-interactive-box h3{
  margin:.1rem 0 .35rem;
  color:var(--gold);
  font-size:1rem;
  letter-spacing:.04em;
}
.ark-interactive-box p{
  margin:.18rem 0 .55rem;
  color:#e8dcc0;
  line-height:1.42;
}
.ark-interactive-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.55rem;
}
.ark-interactive-meta span{
  font-size:.76rem;
  color:#d6c39a;
  padding:.22rem .48rem;
  border-radius:999px;
  border:1px solid rgba(213,176,106,.24);
  background:rgba(0,0,0,.24);
}
.ark-interactive-actions,.ark-interactive-secondary{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.ark-interactive-actions button,.ark-interactive-secondary button,
.ark-puzzle-options button,.ark-clue-btn{
  background:linear-gradient(180deg,rgba(30,22,14,.78),rgba(10,9,8,.84));
  color:var(--paper);
  border:1px solid rgba(213,176,106,.26);
  border-radius:10px;
  padding:.56rem .8rem;
  cursor:pointer;
  font-family:inherit;
}
.ark-interactive-note{
  margin-top:.7rem;
  padding:.7rem .8rem;
  border-left:2px solid rgba(213,176,106,.65);
  background:rgba(0,0,0,.18);
  color:#f2e7c9;
  border-radius:0 10px 10px 0;
}
.ark-interactive-success{
  margin-top:.75rem;
  padding:.72rem .85rem;
  border:1px solid rgba(213,176,106,.3);
  border-radius:12px;
  background:rgba(16,12,9,.48);
}
.ark-puzzle-modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
}
.ark-puzzle-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(6px);
}
.ark-puzzle-card{
  position:relative;
  width:min(1180px,calc(100vw - 2rem));
  max-height:min(90vh,940px);
  overflow:auto;
  border:1px solid rgba(213,176,106,.34);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,9,8,.92),rgba(5,5,7,.96));
  box-shadow:0 28px 120px rgba(0,0,0,.72);
}
.ark-puzzle-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1rem;
  color:var(--gold);
  border-bottom:1px solid rgba(213,176,106,.18);
}
.ark-puzzle-head button{
  background:transparent;
  color:var(--paper);
  border:1px solid rgba(213,176,106,.26);
  border-radius:10px;
  padding:.22rem .62rem;
  font-size:1.1rem;
  cursor:pointer;
}
.ark-puzzle-body{
  display:grid;
  grid-template-columns:minmax(280px,46%) 1fr;
  gap:1rem;
  padding:1rem;
}
.ark-puzzle-media img{
  width:100%;
  display:block;
  border-radius:16px;
  border:1px solid rgba(213,176,106,.22);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.ark-puzzle-intro{line-height:1.48;color:#eadfc4}
.ark-puzzle-clues{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.7rem 0;
}
.ark-clue-panel{
  margin:.45rem 0 .75rem;
  padding:.75rem .85rem;
  border-radius:12px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(213,176,106,.14);
  color:#efe4ca;
  line-height:1.45;
}
.ark-puzzle-question{
  margin:.8rem 0 .5rem;
  font-weight:bold;
  color:#f2dfb6;
}
.ark-puzzle-options{
  display:flex;
  flex-direction:column;
  gap:.48rem;
}
.ark-puzzle-feedback{
  min-height:2.8rem;
  margin-top:.8rem;
  color:#f0e2c0;
}
.ark-puzzle-feedback.is-ok{color:#f6e1a9}
.ark-puzzle-feedback.is-bad{color:#d9c7a5}
@media(max-width:900px){
  .ark-puzzle-body{grid-template-columns:1fr}
}


/* V11 — registro de pruebas y minijuegos avanzados */

.ark-quest-panel{
  position:absolute;
  right:1rem;
  top:4.85rem;
  z-index:7;
  width:min(460px,calc(100vw - 2rem));
  max-height:72vh;
  overflow:auto;
  border:1px solid rgba(213,176,106,.34);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(10,9,8,.88),rgba(5,5,7,.94));
  box-shadow:0 28px 100px rgba(0,0,0,.64), inset 0 0 18px rgba(213,176,106,.035);
  backdrop-filter:blur(14px);
  padding:.85rem;
}
.ark-quest-head{display:flex;align-items:center;justify-content:space-between;color:var(--gold);margin-bottom:.45rem}
.ark-quest-head button{padding:.25rem .55rem;border-radius:8px;font-size:1rem}
.ark-quest-intro{font-size:.82rem;line-height:1.35;color:#cdbf9e;margin:.35rem 0 .75rem}
.ark-quest-list{display:flex;flex-direction:column;gap:.5rem}
.ark-quest-item{border:1px solid rgba(213,176,106,.18);border-radius:12px;padding:.65rem .72rem;background:rgba(0,0,0,.23)}
.ark-quest-item.is-solved{border-color:rgba(213,176,106,.48);background:rgba(47,33,15,.32)}
.ark-quest-title{display:flex;align-items:center;justify-content:space-between;gap:.7rem;color:#efdfbd;font-weight:bold}
.ark-quest-title span:last-child{font-size:.75rem;color:#cdb47e}
.ark-quest-item p{margin:.35rem 0 0;font-size:.8rem;line-height:1.32;color:#bfb293}
.ark-quest-actions{margin-top:.7rem;display:flex;justify-content:flex-end}
.ark-quest-actions button{background:rgba(0,0,0,.34);color:var(--paper);border:1px solid rgba(213,176,106,.22);border-radius:9px;padding:.48rem .68rem;cursor:pointer}
.ark-sequence-wrap,.ark-match-wrap,.ark-selection-wrap{display:flex;flex-direction:column;gap:.6rem}
.ark-sequence-pool,.ark-sequence-current,.ark-selection-items{display:flex;flex-wrap:wrap;gap:.45rem}
.ark-sequence-current{min-height:64px;padding:.6rem;border:1px dashed rgba(213,176,106,.35);border-radius:12px;background:rgba(0,0,0,.18)}
.ark-token{background:linear-gradient(180deg,rgba(35,25,15,.86),rgba(10,9,8,.9));color:#f0e2c3;border:1px solid rgba(213,176,106,.28);border-radius:10px;padding:.5rem .68rem;cursor:pointer}
.ark-token.is-used{opacity:.34;pointer-events:none}
.ark-sequence-controls{display:flex;gap:.45rem;flex-wrap:wrap}
.ark-match-card{display:grid;grid-template-columns:1fr minmax(210px,42%);gap:.65rem;align-items:center;border:1px solid rgba(213,176,106,.16);border-radius:12px;padding:.62rem .72rem;background:rgba(0,0,0,.19)}
.ark-match-card label{line-height:1.3;color:#eddfc1}
.ark-match-card select{background:rgba(0,0,0,.5);color:var(--paper);border:1px solid rgba(213,176,106,.25);border-radius:9px;padding:.5rem .6rem;font-family:inherit}
.ark-selection-item{display:flex;align-items:center;gap:.5rem;padding:.52rem .68rem;border:1px solid rgba(213,176,106,.18);border-radius:10px;background:rgba(0,0,0,.2);cursor:pointer}
.ark-selection-item input{accent-color:var(--gold)}
.ark-puzzle-action-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.65rem}
.ark-puzzle-action-row button{background:linear-gradient(180deg,rgba(30,22,14,.78),rgba(10,9,8,.84));color:var(--paper);border:1px solid rgba(213,176,106,.26);border-radius:10px;padding:.56rem .8rem;cursor:pointer;font-family:inherit}
@media(max-width:800px){.ark-quest-panel{position:fixed;top:auto;right:.75rem;left:.75rem;bottom:.75rem;width:auto;max-height:66vh}.ark-match-card{grid-template-columns:1fr}}


/* V13 — narrador y modo compacto sin pérdida de texto */

.ark-narrator-panel{
  position:absolute;right:1rem;top:4.85rem;z-index:7;
  width:min(440px,calc(100vw - 2rem));
  border:1px solid rgba(213,176,106,.34);border-radius:18px;
  background:linear-gradient(180deg,rgba(10,9,8,.9),rgba(5,5,7,.94));
  box-shadow:0 28px 100px rgba(0,0,0,.64);backdrop-filter:blur(14px);padding:.85rem;
}
.ark-narrator-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem;color:var(--gold)}
.ark-narrator-head button{padding:.25rem .55rem;border-radius:8px;font-size:1rem}
.ark-narrator-note{font-size:.82rem;line-height:1.35;color:#c9bb9d;margin:.2rem 0 .7rem}
.ark-narrator-range{display:grid;grid-template-columns:76px 1fr 54px;align-items:center;gap:.55rem;margin:.55rem 0;color:var(--muted);font-size:.86rem}
.ark-narrator-range input{width:100%;accent-color:var(--gold)}
.ark-narrator-range span{text-align:right;color:#ead8ad}
.ark-narrator-auto{display:block;margin:.6rem 0;color:#d8c9a9;font-size:.86rem}
.ark-narrator-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}
.ark-narrator-actions button{background:linear-gradient(180deg,rgba(36,28,18,.92),rgba(12,10,8,.86));color:var(--paper);border:1px solid var(--line);border-radius:9px;padding:.52rem .68rem;cursor:pointer;font-family:inherit}
.ark-narrator-status{margin:.65rem 0 0;color:var(--gold);font-size:.82rem;min-height:1.1rem}
.view-compact .ark-reader-bottom{max-height:42vh}
.view-compact .ark-textbox::-webkit-scrollbar{width:8px}
.view-compact .ark-textbox::-webkit-scrollbar-thumb{background:rgba(184,139,75,.35);border-radius:6px}
@media(max-width:800px){.ark-narrator-panel{position:fixed;top:auto;right:.75rem;left:.75rem;bottom:.75rem;width:auto;max-height:70vh;overflow:auto}}


/* V14 — catálogo musical Pixabay e importación local */
.ark-pixabay-note{
  margin:.7rem 0;
  padding:.7rem .8rem;
  border-left:2px solid var(--gold2);
  border-radius:0 10px 10px 0;
  background:rgba(0,0,0,.25);
  color:#d9c9a7;
  font-size:.82rem;
  line-height:1.4;
}
.ark-pixabay-catalog{
  display:grid;
  gap:.55rem;
  margin-top:.6rem;
  max-height:34vh;
  overflow:auto;
  padding-right:.15rem;
}
.ark-pixabay-card{
  padding:.65rem .72rem;
  border:1px solid rgba(213,176,106,.2);
  border-radius:12px;
  background:rgba(0,0,0,.2);
}
.ark-pixabay-title{display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:#efdfbb}
.ark-pixabay-card p{font-size:.78rem;line-height:1.35;color:#cdbf9f;margin:.35rem 0}
.ark-pixabay-card small{color:#a99c80}
.ark-pixabay-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.ark-pixabay-actions button{padding:.42rem .58rem;font-size:.76rem}
.ark-content-id{
  color:#e3c07c;
  border:1px solid rgba(227,192,124,.36);
  border-radius:999px;
  padding:.12rem .4rem;
  font-size:.67rem;
  white-space:nowrap;
}


/* V18 estable — introducción, escenas dinámicas y objetos */
.ark-bg-layer{z-index:0;opacity:0;pointer-events:none;will-change:opacity,transform;background-repeat:no-repeat}
.ark-bg-layer.is-active{opacity:1}
.ark-video-bg{z-index:1}
.ark-video-bg.active~.ark-bg-layer.is-active{opacity:.08}.ark-video-bg.active~.ark-bg-layer:not(.is-active){opacity:0}
.ark-motion-fx{z-index:2}.ark-vignette{z-index:3}
.ark-start,.ark-reader{z-index:5}
.ark-topbar,.ark-reader-bottom{position:relative;z-index:8}
.ark-topbar{position:absolute}
.ark-hotspot-layer{position:fixed;inset:0;z-index:7;pointer-events:none}
.ark-hotspot{--spot-size:46px;position:absolute;left:50%;top:50%;width:var(--spot-size);height:var(--spot-size);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(245,210,132,.9);background:radial-gradient(circle,rgba(255,231,169,.98) 0 12%,rgba(211,167,85,.28) 15% 38%,rgba(211,167,85,.06) 42% 62%,transparent 64%);box-shadow:0 0 0 8px rgba(211,167,85,.07),0 0 24px rgba(227,185,96,.8);pointer-events:auto;cursor:pointer;opacity:1;animation:arkSpotPulse 2.2s ease-in-out infinite}
.ark-hotspot:hover,.ark-hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 10px rgba(211,167,85,.1),0 0 34px rgba(244,207,126,.95);outline:none}
.ark-hotspot.is-observed{opacity:.58;filter:saturate(.45)}
.ark-hotspot-label{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;padding:.28rem .46rem;border:1px solid rgba(213,176,106,.35);border-radius:8px;background:rgba(5,5,7,.9);color:#f2dfb7;font-size:.76rem;opacity:0;pointer-events:none;transition:opacity .18s ease}
.ark-hotspot:hover .ark-hotspot-label,.ark-hotspot:focus-visible .ark-hotspot-label{opacity:1}
.hotspots-off .ark-hotspot-layer{display:none}
@keyframes arkSpotPulse{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.25)}}
.ark-object-panel{position:fixed;z-index:30;right:1.2rem;top:5.4rem;width:min(440px,calc(100vw - 2rem));padding:1rem;border:1px solid rgba(213,176,106,.42);border-radius:18px;background:linear-gradient(180deg,rgba(12,10,8,.96),rgba(4,5,7,.97));box-shadow:0 28px 100px rgba(0,0,0,.72);backdrop-filter:blur(16px)}
.ark-object-head{display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-size:1.06rem}.ark-object-head button{background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.2rem .55rem;cursor:pointer}.ark-object-panel p{line-height:1.5;color:#e8dcc1}.ark-object-clue{margin:.75rem 0;padding:.7rem .8rem;border-left:3px solid var(--gold);background:rgba(213,176,106,.07);color:#f1dcae}.ark-object-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}.ark-object-actions button,.ark-guide-actions button{background:linear-gradient(180deg,rgba(36,28,18,.92),rgba(12,10,8,.9));color:var(--paper);border:1px solid var(--line);border-radius:9px;padding:.58rem .82rem;cursor:pointer}
.ark-intro-card{max-width:980px}.ark-start-hook{max-width:820px;margin:0 auto 1.25rem!important;line-height:1.55}.ark-role-box{max-width:760px;margin:0 auto 1.2rem;padding:.8rem 1rem;text-align:left;border:1px solid rgba(213,176,106,.25);border-radius:14px;background:rgba(0,0,0,.24)}.ark-role-box strong{color:var(--gold)}.ark-role-box p{font-size:1rem;margin:.35rem 0 0}.ark-start-actions{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap}.ark-secondary-btn{opacity:.82}
.ark-guide{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:1.2rem;background:rgba(2,3,5,.82);backdrop-filter:blur(10px)}.ark-guide-card{width:min(920px,96vw);max-height:92vh;overflow:auto;padding:1.25rem;border:1px solid rgba(213,176,106,.38);border-radius:20px;background:linear-gradient(180deg,rgba(14,12,10,.98),rgba(5,6,8,.98));box-shadow:0 30px 120px rgba(0,0,0,.8)}.ark-guide-head{display:flex;justify-content:space-between;align-items:center}.ark-guide-head h2{margin:.2rem 0 1rem}.ark-guide-head button{background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.25rem .6rem;cursor:pointer}.ark-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.ark-guide-grid article{padding:1rem;border:1px solid rgba(213,176,106,.22);border-radius:14px;background:rgba(255,255,255,.025)}.ark-guide-grid article>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;margin-bottom:.6rem;background:var(--gold);color:#15100a;font-weight:bold}.ark-guide-grid strong{color:#f2dfb7}.ark-guide-grid p{color:#d7c9aa;line-height:1.45}.ark-guide-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1rem}
@media(max-width:800px){.ark-guide-grid{grid-template-columns:1fr}.ark-object-panel{top:auto;right:.75rem;left:.75rem;bottom:.75rem;width:auto}.ark-hotspot{--spot-size:40px}}


/* Hotfix - Cuaderno de pistas */
.ark-notebook-panel{
  position:absolute;
  right:1rem;
  top:5.4rem;
  z-index:25;
  width:min(420px,calc(100vw - 2rem));
  max-height:70vh;
  overflow:auto;
  padding:1rem;
  border:1px solid rgba(213,176,106,.38);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(12,10,8,.96),rgba(4,5,7,.98));
  box-shadow:0 22px 80px rgba(0,0,0,.7);
  backdrop-filter:blur(14px);
}
.ark-notebook-head{display:flex;align-items:center;justify-content:space-between;color:var(--gold);margin-bottom:.45rem}
.ark-notebook-head button{background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.25rem .55rem;cursor:pointer}
.ark-notebook-intro{font-size:.86rem;line-height:1.4;color:#cdbf9e;margin:.35rem 0 .8rem}
.ark-notebook-list{display:flex;flex-direction:column;gap:.55rem}
.ark-notebook-entry{border:1px solid rgba(213,176,106,.2);border-radius:12px;padding:.7rem .75rem;background:rgba(255,255,255,.025)}
.ark-notebook-entry strong{display:block;color:#efdcae;margin-bottom:.3rem}
.ark-notebook-entry p{margin:0;color:#e7dcc3;line-height:1.42}
.ark-notebook-empty{color:#b8aa8b;font-style:italic;padding:.75rem;border:1px dashed rgba(213,176,106,.24);border-radius:12px}
@media(max-width:800px){.ark-notebook-panel{position:fixed;top:auto;left:.75rem;right:.75rem;bottom:.75rem;width:auto;max-height:58vh}}


/* Vision Arkemica - iluminacion reveladora ambar/violeta */
.ark-app.ark-vision-active .ark-bg-layer.is-active,
.ark-app.ark-vision-active .ark-video-bg.active{
  filter:brightness(1.16) contrast(1.12) saturate(1.08) hue-rotate(336deg);
}
.ark-app.ark-vision-active .ark-motion-fx{
  opacity:.72;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,190,82,.24),transparent 30%),
    radial-gradient(circle at 70% 24%,rgba(154,82,255,.22),transparent 34%),
    radial-gradient(circle at 24% 72%,rgba(93,50,185,.18),transparent 38%),
    linear-gradient(115deg,rgba(255,186,74,.12),rgba(112,50,198,.16));
  mix-blend-mode:screen;
}
.ark-app.ark-vision-active .ark-vignette{
  background:
    radial-gradient(circle at center,rgba(255,203,116,.10),rgba(132,68,214,.10) 58%,rgba(12,6,24,.24) 100%),
    linear-gradient(to top,rgba(255,190,82,.08),rgba(155,83,255,.10) 45%,rgba(255,221,150,.05));
}
.ark-app.ark-vision-active::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,213,129,.18),transparent 34%),
    radial-gradient(circle at 72% 28%,rgba(164,86,255,.20),transparent 38%),
    radial-gradient(circle at 22% 18%,rgba(255,170,58,.10),transparent 36%),
    linear-gradient(135deg,rgba(255,200,104,.10),rgba(118,58,210,.14));
  mix-blend-mode:screen;
  opacity:.88;
}
.ark-app.ark-vision-active .ark-hotspot{
  border-color:rgba(255,205,100,.98);
  background:radial-gradient(circle,rgba(255,247,196,.98) 0 10%,rgba(239,178,67,.48) 13% 34%,rgba(158,78,255,.34) 39% 62%,transparent 66%);
  box-shadow:0 0 0 10px rgba(158,78,255,.18),0 0 36px rgba(255,205,100,.84),0 0 62px rgba(158,78,255,.54);
}
.ark-app.ark-vision-active .ark-hotspot::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(166,87,255,.28),rgba(255,205,100,.16) 42%,transparent 68%);
  pointer-events:none;
  animation:arkVisionPulse 2.6s ease-in-out infinite;
}
@keyframes arkVisionPulse{
  0%,100%{opacity:.48;transform:scale(.92)}
  50%{opacity:.96;transform:scale(1.08)}
}
.ark-notebook-panel{width:min(460px,calc(100vw - 2rem))}
.ark-notebook-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:.65rem 0 .55rem;padding:.28rem;border:1px solid rgba(213,176,106,.18);border-radius:10px;background:rgba(0,0,0,.28)}
.ark-notebook-tabs button{min-width:0;padding:.48rem .42rem;border:1px solid transparent;border-radius:8px;background:transparent;color:#cdbf9e;font:inherit;font-size:.78rem;cursor:pointer}
.ark-notebook-tabs button.is-active{border-color:rgba(213,176,106,.42);background:linear-gradient(180deg,rgba(54,39,17,.82),rgba(12,10,8,.76));color:#f4dfaf;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.ark-notebook-rpg-list{max-height:48vh;overflow:auto;padding-right:.25rem}
.ark-notebook-entry{position:relative}
.ark-notebook-entry.is-inventory{border-left:3px solid rgba(170,84,255,.72)}
.ark-notebook-entry.is-journal{border-left:3px solid rgba(213,176,106,.72)}
.ark-notebook-entry.is-quests{border-left:3px solid rgba(179,151,255,.65)}
.ark-notebook-status{display:inline-block;margin-top:.5rem;padding:.18rem .45rem;border:1px solid rgba(213,176,106,.28);border-radius:999px;color:#d9c38d;font-size:.72rem;background:rgba(0,0,0,.28)}
@media(max-width:800px){.ark-notebook-tabs{grid-template-columns:1fr}.ark-notebook-rpg-list{max-height:38vh}}


/* Fase 12 - Portada asimetrica cinematica */
.ark-start{
  align-items:flex-end;
  justify-content:flex-start;
  text-align:left;
  padding:clamp(1.25rem,4vw,4.5rem);
  background:
    linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.52) 26%,rgba(0,0,0,.18) 52%,rgba(0,0,0,.02) 74%),
    linear-gradient(0deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.08) 100%);
}
.ark-start-card{
  width:min(520px,92vw);
  margin:0 0 clamp(1rem,4vh,3rem) 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.ark-intro-card{max-width:520px}
.ark-kicker{
  margin:0 0 .8rem;
  color:#d6b56f;
  font-size:.76rem;
  letter-spacing:.18em;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.ark-start h1{
  max-width:12ch;
  margin:0 0 .85rem;
  font-size:clamp(2.35rem,5.7vw,5.8rem);
  line-height:.94;
  letter-spacing:.02em;
  text-shadow:0 8px 34px rgba(0,0,0,.95);
}
.ark-start-hook{
  max-width:500px;
  margin:0 0 1.1rem!important;
  color:#efe3ca;
  font-size:clamp(.98rem,1.15vw,1.12rem)!important;
  line-height:1.48!important;
  text-shadow:0 2px 16px rgba(0,0,0,.86);
}
.ark-role-box{
  max-width:500px;
  margin:0 0 1.15rem;
  padding:.72rem .85rem;
  border-left:2px solid rgba(213,176,106,.58);
  border-top:0;
  border-right:0;
  border-bottom:0;
  border-radius:0;
  background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.16));
}
.ark-role-box p{
  font-size:.92rem;
  line-height:1.38;
  color:#d9cdb3;
}
.ark-start-actions{
  justify-content:flex-start;
  align-items:stretch;
  gap:.55rem;
}
.ark-start-actions button{
  min-width:11rem;
  border-radius:6px;
  background:linear-gradient(180deg,rgba(33,26,17,.88),rgba(8,8,9,.82));
}
.ark-start small{
  max-width:500px;
  margin-top:.85rem;
  color:#a99b82;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
@media(max-width:800px){
  .ark-start{
    align-items:flex-end;
    padding:1rem;
    background:linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.52) 54%,rgba(0,0,0,.08) 100%);
  }
  .ark-start-card{width:100%;margin-bottom:.4rem}
  .ark-start h1{max-width:11ch;font-size:clamp(2rem,12vw,3.8rem)}
  .ark-role-box{display:none}
  .ark-start-actions{display:grid;grid-template-columns:1fr}
  .ark-start-actions button{width:100%}
}


/* Fase 12.5 - Modos de juego y feedback RPG */
.ark-mode-select{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:.25rem;
  margin:0 0 .55rem;
  padding:.24rem;
  border:1px solid rgba(213,176,106,.24);
  border-radius:8px;
  background:rgba(0,0,0,.34);
}
.ark-mode-select button{
  min-width:9.5rem;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:#cdbf9e;
  box-shadow:none;
}
.ark-mode-select button.is-active{
  border-color:rgba(213,176,106,.48);
  background:linear-gradient(180deg,rgba(54,39,17,.86),rgba(12,10,8,.82));
  color:#f5dfad;
}
.ark-mode-status{
  max-width:500px;
  margin:.15rem 0 .85rem!important;
  color:#cfc0a2!important;
  font-size:.9rem!important;
  line-height:1.35!important;
}
.ark-choices button.is-locked,
.ark-choices button:disabled{
  cursor:not-allowed;
  opacity:.78;
  border-color:rgba(170,84,255,.34);
  color:#e8d6ff;
  background:linear-gradient(180deg,rgba(29,14,42,.70),rgba(8,8,10,.82));
}
.ark-toast{
  position:fixed;
  z-index:60;
  top:5.3rem;
  left:50%;
  max-width:min(520px,calc(100vw - 2rem));
  transform:translate(-50%,-12px);
  opacity:0;
  pointer-events:none;
  padding:.72rem 1rem;
  border:1px solid rgba(213,176,106,.42);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(12,10,8,.95),rgba(5,6,8,.96));
  color:#f4dfaf;
  box-shadow:0 18px 70px rgba(0,0,0,.65);
  transition:opacity .22s ease, transform .22s ease;
}
.ark-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}
.ark-toast.is-progress{
  border-color:rgba(170,84,255,.48);
  color:#f4defd;
}
@media(max-width:800px){
  .ark-mode-select{display:grid;grid-template-columns:1fr;width:100%}
  .ark-mode-select button{min-width:0;width:100%}
  .ark-toast{top:auto;bottom:1rem}
}


/* Hotfix 3 - Capas RPG: los fondos nunca capturan interacción */
.ark-app{isolation:isolate}
.ark-bg-layer{z-index:0!important;pointer-events:none!important}
.ark-video-bg{z-index:0!important;pointer-events:none!important}
.ark-motion-fx,.ark-vignette{pointer-events:none!important}
.ark-hotspot-layer{z-index:40!important;pointer-events:none}
.ark-hotspot{z-index:41!important;pointer-events:auto!important}
.ark-start,.ark-reader{z-index:50!important}
.ark-topbar,.ark-reader-bottom{z-index:55!important}
.ark-object-panel,.ark-notebook-panel,.ark-narrator-panel,.ark-music-panel,.ark-quest-panel{z-index:80!important}
.ark-guide,.ark-puzzle-modal{z-index:90!important}
.ark-toast{z-index:100!important}


/* Hotfix 4 - Las esferas quedan por encima del lienzo de lectura */
.ark-reader{z-index:50!important;pointer-events:none}
.ark-topbar,.ark-reader-bottom,.ark-restore{pointer-events:auto}
.ark-hotspot-layer{z-index:70!important;pointer-events:none!important}
.ark-hotspot{z-index:71!important;pointer-events:auto!important}
.ark-topbar,.ark-reader-bottom{z-index:75!important}
.ark-object-panel,.ark-notebook-panel,.ark-narrator-panel,.ark-music-panel,.ark-quest-panel{z-index:90!important;pointer-events:auto}


/* Hotfix 6 - Inventario RPG con iconos canónicos */
.ark-notebook-entry.is-inventory{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:.75rem;
  align-items:center;
  min-height:74px;
}
.ark-inventory-icon{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(213,176,106,.38);
  box-shadow:0 8px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  background:#070708;
}
.ark-notebook-entry-content{min-width:0}
.ark-notebook-entry-content strong{margin-bottom:.2rem}


/* Hotfix 8 - Novela gráfica interactiva */
.ark-reader-bottom{
  width:min(1040px,calc(100vw - 2rem));
  gap:.7rem;
}
.ark-textbox{
  border-radius:8px;
  border:1px solid rgba(230,196,126,.42);
  background:linear-gradient(180deg,rgba(9,9,10,.72),rgba(4,4,5,.78));
  box-shadow:0 18px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.035);
}
.ark-textbox p{
  max-width:72ch;
  margin:.45rem auto;
}
.ark-choices{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:.6rem;
}
.ark-choices button{
  flex:1 1 280px;
  max-width:520px;
  border-radius:22px 22px 22px 8px;
  padding:.72rem .95rem;
  border:1px solid rgba(230,196,126,.46);
  background:linear-gradient(180deg,rgba(242,229,201,.94),rgba(196,176,134,.9));
  color:#17120b;
  text-shadow:none;
  box-shadow:0 12px 35px rgba(0,0,0,.42);
}
.ark-dialog-choice{
  position:relative;
  border-color:rgba(170,84,255,.44)!important;
  background:linear-gradient(180deg,rgba(235,220,255,.95),rgba(177,140,222,.9))!important;
  color:#13091d!important;
}
.ark-dialog-choice:before{
  content:"";
  position:absolute;
  left:1.2rem;
  bottom:-9px;
  width:18px;
  height:18px;
  background:inherit;
  border-left:1px solid rgba(170,84,255,.35);
  border-bottom:1px solid rgba(170,84,255,.35);
  transform:rotate(45deg);
}
.ark-bg-layer{
  image-rendering:auto;
}
@media(max-width:800px){
  .ark-reader-bottom{width:100%}
  .ark-choices{flex-direction:column}
  .ark-choices button{max-width:none;flex-basis:auto}
  .ark-textbox p{max-width:100%}
}


/* Hotfix 10 - anomalias visibles solo con Vision Arkemica */
.ark-hotspot.hidden-anomaly{
  opacity:0!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) scale(.64);
}
.ark-app.ark-vision-active .ark-hotspot.hidden-anomaly{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate(-50%,-50%) scale(1);
  border-color:rgba(170,84,255,.98);
  background:radial-gradient(circle,rgba(255,235,160,.98) 0 9%,rgba(170,84,255,.48) 13% 42%,rgba(218,171,67,.22) 45% 64%,transparent 68%);
  box-shadow:0 0 0 14px rgba(102,42,176,.24),0 0 48px rgba(170,84,255,.96),0 0 72px rgba(218,171,67,.45);
}
.ark-app.ark-vision-active .ark-hotspot.hidden-anomaly .ark-hotspot-label{
  border-color:rgba(170,84,255,.55);
  color:#f4defd;
  box-shadow:0 0 24px rgba(170,84,255,.24);
}

/* Reboot Visual Canónico - fondos HD 16:9 */
.ark-bg,
.ark-bg-layer{
  background-size:cover!important;
  background-position:center center!important;
  image-rendering:auto;
}
.ark-app.bg-fit-contain .ark-bg,
.ark-app.bg-fit-contain .ark-bg-layer{
  background-size:contain!important;
}


/* Hotfix 11 - transición del río tras la visión */
@keyframes fadeOutVision{
  0%{opacity:1;filter:saturate(1.05) contrast(1.08) brightness(.86)}
  45%{opacity:.72;filter:saturate(.82) contrast(1.02) brightness(.72)}
  100%{opacity:0;filter:saturate(.55) contrast(.94) brightness(.56)}
}
.ark-bg-layer.transition-water,
.ark-bg.transition-water{
  transition:opacity 3s ease, filter 3s ease, transform 3s ease!important;
}
.ark-bg-layer.transition-water.is-fading-out,
.ark-bg.transition-water.is-fading-out{
  animation:fadeOutVision 3s ease forwards;
}


/* Hotfix 13 - opciones Ink y misiones RPG */
.ink-choice-btn{
  border-radius:18px 18px 18px 6px!important;
  border:1px solid rgba(232,196,126,.52)!important;
  background:linear-gradient(180deg,rgba(19,16,18,.94),rgba(8,7,10,.96))!important;
  color:#f3dfb2!important;
  box-shadow:0 16px 42px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.035)!important;
  text-align:left;
}
.ink-choice-btn:hover,.ink-choice-btn:focus-visible{
  border-color:rgba(255,210,120,.82)!important;
  background:linear-gradient(180deg,rgba(48,34,19,.96),rgba(17,12,18,.98))!important;
  color:#fff3cf!important;
  transform:translateY(-1px);
  outline:none;
}
.ark-quest-empty{
  padding:.85rem;
  border:1px dashed rgba(213,176,106,.28);
  border-radius:10px;
  color:#cdbf9e;
  font-style:italic;
}
.ark-quest-item.is-active,.ark-quest-item.is-updated{
  border-left:3px solid rgba(255,205,100,.72);
}
.ark-quest-item.is-completed,.ark-quest-item.is-completada,.ark-quest-item.is-solved{
  border-left:3px solid rgba(126,205,142,.72);
}

/* V19 Hostinger - base tactil Android y futura PWA */
button,
select,
input,
.ink-choice-btn,
.ark-hotspot{
  touch-action:manipulation;
}
button,
.ark-actions button,
.ark-start-actions button,
.ark-guide-actions button,
.ark-choices button,
.ark-mobile-actionbar button{
  min-width:44px;
  min-height:44px;
}
.ark-mobile-actionbar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:80;
  display:none;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-right));
  background:linear-gradient(180deg,rgba(5,7,17,.25),rgba(5,7,17,.96) 22%,rgba(5,7,17,.98));
  border-top:1px solid rgba(232,196,126,.28);
  backdrop-filter:blur(12px);
}
.ark-mobile-actionbar button{
  border:1px solid rgba(232,196,126,.42);
  border-radius:12px;
  background:rgba(15,18,28,.92);
  color:#f6deb0;
  font-weight:800;
  font-size:12px;
}
.ark-mobile-actionbar button:first-child{
  grid-column:span 2;
  background:linear-gradient(135deg,#d8b84c,#f3dea1);
  color:#17120a;
}
.ark-loading-note{
  position:fixed;
  left:50%;
  top:14px;
  z-index:100;
  transform:translateX(-50%);
  padding:10px 14px;
  border:1px solid rgba(232,196,126,.34);
  border-radius:999px;
  background:rgba(5,7,17,.9);
  color:#f6deb0;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.ark-loading-note.is-visible{opacity:1;}
@media (max-width: 820px){
  body{overflow-x:hidden;}
  .ark-reader{padding-bottom:96px;}
  .ark-mobile-actionbar{display:grid;}
  .ark-topbar{
    align-items:flex-start;
    gap:8px;
    padding:8px;
  }
  .ark-scene-label{min-width:0;}
  .ark-actions{
    display:none;
    position:fixed;
    left:8px;
    right:8px;
    bottom:94px;
    z-index:79;
    max-height:54vh;
    overflow:auto;
    padding:10px;
    border:1px solid rgba(232,196,126,.3);
    border-radius:16px;
    background:rgba(5,7,17,.96);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .ark-app.mobile-menu-open .ark-actions{display:flex;}
  .ark-actions button,
  .ark-actions label,
  .ark-actions select{font-size:13px;}
  .ark-reader-bottom{
    left:0;
    right:0;
    bottom:78px;
    max-height:48vh;
    overflow:auto;
  }
  .ark-textbox{font-size:16px;line-height:1.55;}
  .ark-hotspot{
    width:44px!important;
    height:44px!important;
  }
  .ark-hotspot:after{
    inset:-10px!important;
  }
  .ark-choices{
    display:grid;
    gap:10px;
  }
  .ark-object-panel,
  .ark-notebook-panel,
  .ark-quest-panel,
  .ark-narrator-panel,
  .ark-music-panel{
    left:8px!important;
    right:8px!important;
    bottom:92px!important;
    max-height:62vh!important;
    overflow:auto!important;
  }
}
@media (max-width: 820px) and (orientation: portrait){
  .ark-bg,.ark-bg-layer,.ark-video-bg{
    height:48vh;
    bottom:auto;
  }
  .ark-reader-bottom{
    top:auto;
    min-height:42vh;
    background:linear-gradient(180deg,rgba(5,7,17,.78),rgba(5,7,17,.98));
  }
}
@media (max-width: 920px) and (orientation: landscape){
  .ark-reader-bottom{
    max-height:42vh;
    bottom:66px;
  }
  .ark-mobile-actionbar{
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  .ark-mobile-actionbar button:first-child{grid-column:span 1;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}