/* --- UI theme vars --- */
:root{
    --ui-bg: rgba(0,0,0,0.72);
    --ui-border: rgba(255,255,255,0.2);
    --ui-text: #fff;
    --ui-accent: #00bfff;
    /* altura aprox. del bar (ajústala si cambias tipografías/padding) */
    --audio-h: 52px;
  }
  
  /* --- Barra de audio anclada ARRIBA --- */
  #dwi-audio{
    position: fixed;
    left: 0;
    right: 0;
    top: calc(env(safe-area-inset-top, 0px));
    /* importante: ya no usamos bottom */
    /* bottom: 0; */
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--ui-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--ui-border); /* antes era border-top */
    pointer-events: auto;
    z-index: 2147483647;
    /* para que el alto sea estable y podamos reservar espacio */
    min-height: var(--audio-h);
    box-sizing: border-box;
  }
  
  #dwi-audio button{
    all: unset;
    display: inline-block;
    cursor: pointer;
    color: var(--ui-text);
    padding: .4rem .75rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    line-height: 1;
  }
  #dwi-audio button:hover{
    color: var(--ui-accent);
    border-color: var(--ui-accent);
  }
  #dwi-audio .status{
    color: #bbb;
    font: 500 12px/1.2 system-ui;
  }
  
  /* --- Empuje del contenido para que no quede oculto --- */
  /* Harlowe */
  tw-story{
    padding-top: calc(var(--audio-h) + env(safe-area-inset-top, 0px));
  }
  
  /* Si en algún momento usas SugarCube, descomenta lo de abajo:
  #passages{
    padding-top: calc(var(--audio-h) + env(safe-area-inset-top, 0px));
  }
  */
  
  /* Ajustes para pantallas pequeñas */
  @media (max-width: 480px){
    :root{ --audio-h: 56px; } /* un pelín más alto en móvil */
    #dwi-audio .status{ display:none; } /* simplifica la barra si falta ancho */
  }