*{box-sizing:border-box;margin:0;padding:0}html,body{overflow-x:hidden;max-width:100vw}html{font-size:18px}
    body{background:#06030f;color:#e2d9f3;font-family:"Caudex",Georgia,serif;line-height:1.5}

    /* ── Contención global de texto de usuario ───────────────────────────────
       Cualquier texto escrito por jugadoras/narradora respeta el ancho del
       contenedor y rompe en múltiples líneas antes de desbordar el layout.   */
    *{min-width:0}
    p,span,div,li,td,th,label,button,a{
      overflow-wrap:break-word;
      word-break:break-word;
    }
    /* Los inputs y textareas no deben desbordarse nunca */
    input,textarea,select{max-width:100%;width:100%}
    ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#0d0820}::-webkit-scrollbar-thumb{background:#4a2f8a;border-radius:3px}
    input,textarea,select,button{font-family:inherit}
    input::placeholder,textarea::placeholder{color:#8070b0}
    @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes diceIn{0%{transform:rotate(-20deg) scale(.7);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}
    @keyframes dotPulse{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
    @keyframes revealIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
    @keyframes diceReveal{from{opacity:0;transform:scale(.6) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
    @keyframes diceChoose{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1.08)}}
    @keyframes numberBoom{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
    .reveal-1{animation:revealIn .25s ease both;animation-delay:.1s}
    .reveal-2{animation:diceReveal .3s cubic-bezier(.175,.885,.32,1.275) both;animation-delay:.25s}
    .reveal-2b{animation:diceReveal .3s cubic-bezier(.175,.885,.32,1.275) both;animation-delay:.35s}
    .reveal-choose{animation:diceChoose .35s ease both;animation-delay:.7s}
    .reveal-3{animation:revealIn .25s ease both;animation-delay:.85s}
    .reveal-4{animation:numberBoom .4s cubic-bezier(.175,.885,.32,1.275) both;animation-delay:1.05s}
    .reveal-5{animation:revealIn .25s ease both;animation-delay:1.3s}
    .reveal-6{animation:revealIn .25s ease both;animation-delay:1.5s}
    @keyframes overlayOut{from{opacity:1}to{opacity:0}}
    @keyframes panelIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
    @keyframes panelOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
    .fadeUp{animation:fadeUp .28s ease}.pulse{animation:pulse 2s infinite}
    .spin{animation:spin .8s linear infinite}.diceIn{animation:diceIn .4s cubic-bezier(.175,.885,.32,1.275)}
    .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;animation:dotPulse 1.4s infinite ease-in-out;margin:0 2px}
    .dot:nth-child(1){animation-delay:0s}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}
    .overlay-enter{animation:overlayIn .2s ease forwards}
    .overlay-exit{animation:overlayOut .18s ease forwards}
    .panel-enter{animation:panelIn .22s cubic-bezier(.2,.8,.4,1) forwards}
    .panel-exit{animation:panelOut .18s ease forwards}
    .card-hover{transition:all .25s}.card-hover:hover{transform:translateY(-2px)}
    .opt{transition:all .2s;cursor:pointer}
    .session-grid{display:grid;grid-template-columns:1fr 320px;gap:1.25rem}
    .session-pad{max-width:1200px;margin:0 auto;padding:1.5rem}
    .dado-movil{display:none}
    .dado-sidebar{display:flex;flex-direction:column;gap:1.25rem}
    .char-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
    .char-grid-2b{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
    .char-pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.8rem}
    .dash-pad{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}
    .sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
    .sc-dots{display:none}
    @media(max-width:639px){
      .sc-grid{display:flex;flex-direction:row;overflow-x:auto;gap:.85rem;padding:0 .75rem .75rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
      .sc-grid::-webkit-scrollbar{display:none}
      .sc-grid>*{flex-shrink:0;width:82vw;scroll-snap-align:start}
      .sc-dots{display:flex;justify-content:center;gap:.4rem;padding-top:.65rem}
    }
    @media(max-width:700px){
      html{font-size:15px}
      .session-grid{grid-template-columns:1fr}
      .session-pad{padding:1rem .75rem}
      .char-grid-2{grid-template-columns:1fr}
      .char-grid-2b{grid-template-columns:1fr}
      .char-pos-grid{grid-template-columns:1fr}
      .dash-pad{padding:1.25rem .75rem}
      .dado-movil{display:flex;flex-direction:column;gap:1.25rem}
      .dado-sidebar{display:none}
      .ciudad-mapa-grid{display:flex!important;flex-direction:column!important;gap:.75rem!important}
      .ciudad-mapa-centro{order:1!important;width:100%!important}
      .ciudad-mapa-norte{order:2!important;width:100%!important}
      .ciudad-mapa-oeste{order:3!important;width:100%!important}
      .ciudad-mapa-este{order:4!important;width:100%!important}
      .ciudad-mapa-sur{order:5!important;width:100%!important}
      .ciudad-modal-content{padding:.75rem!important;max-height:82vh!important}
      .ciudad-tabs{gap:.25rem!important}
      .ciudad-tabs button{padding:.35rem .55rem!important;font-size:.78rem!important}
    }