:root{
    --navy:#2E1745; --cream:#F5F0E2; --cream-2:#EDE6D2; --gold:#C6A24E; --gold-soft:#D8BE86;
    --slate:#6B5A82; --ink:#33224A; --muted:#8A93A6;
    --metal:linear-gradient(175deg,#F6E9BE 0%,#DCC076 22%,#C6A24E 45%,#93701F 62%,#D9BE7C 82%,#F3E4B4 100%);
    --bookscale:1;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  .app{min-height:100vh; display:flex; flex-direction:column;
    background:radial-gradient(120% 90% at 50% 0%, #241436 0%, #150c22 60%, #0d0717 100%);
    font-family:"Segoe UI",Helvetica,Arial,sans-serif; color:var(--cream); overflow:hidden}

  .topbar{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    padding:12px 16px 6px}
  .brand{font-family:Georgia,serif; font-size:15px; color:var(--gold-soft); letter-spacing:.02em}
  .prog{display:flex; align-items:center; gap:9px; font-size:12px; color:#CDBBE0}
  .bar{width:150px; height:7px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden}
  .bar > i{display:block; height:100%; width:0; border-radius:5px; background:var(--metal); transition:width .5s}
  .prog b{font-variant-numeric:tabular-nums; color:#fff; font-weight:700}
  .btn{font:inherit; font-size:12px; font-weight:700; letter-spacing:.04em; color:#2A1F06;
    background:var(--metal); border:none; border-radius:20px; padding:7px 15px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.3)}
  .btn.ghost{background:transparent; color:var(--gold-soft); box-shadow:inset 0 0 0 1px rgba(198,162,78,.6)}
  .btn:active{transform:translateY(1px)}

  .bookwrap{flex:1; position:relative; display:flex; align-items:center; justify-content:center;
    min-height:0; padding:6px 60px}
  .scaler{transform-origin:center center}
  .book{position:relative; width:1200px; height:780px; perspective:2400px}
  .half{position:absolute; top:0; width:600px; height:780px; overflow:hidden}
  .half.left{left:0} .half.right{left:600px}
  .spine{position:absolute; top:0; bottom:0; left:600px; width:34px; transform:translateX(-50%);
    z-index:6; pointer-events:none;
    background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.34) 34%, rgba(0,0,0,.55) 48%,
      rgba(0,0,0,.10) 50%, rgba(0,0,0,.55) 52%, rgba(0,0,0,.34) 66%, rgba(0,0,0,0))}

  .navbtn{position:absolute; top:50%; transform:translateY(-50%); z-index:8; width:46px; height:46px;
    border-radius:50%; border:none; cursor:pointer; background:rgba(20,10,34,.72); color:var(--gold-soft);
    box-shadow:inset 0 0 0 1px rgba(198,162,78,.6); font-size:22px; line-height:1; display:grid; place-items:center}
  .navbtn:disabled{opacity:.25; cursor:default}
  .navbtn.prev{left:8px} .navbtn.next{right:8px}

  /* ---------- turning page ---------- */
  .turn{position:absolute; top:0; width:600px; height:780px; transform-style:preserve-3d; z-index:20;
    transition:transform .82s cubic-bezier(.42,.02,.2,1)}
  .turn.fwd{left:600px; transform-origin:left center}
  .turn.fwd.go{transform:rotateY(-179.9deg)}
  .turn.bwd{left:0; transform-origin:right center}
  .turn.bwd.go{transform:rotateY(179.9deg)}
  .face{position:absolute; inset:0; backface-visibility:hidden; overflow:hidden}
  .turn.fwd .f-back{transform:rotateY(180deg)}
  .turn.bwd .f-back{transform:rotateY(-180deg)}
  .face::after{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,0) 30%)}
  .turn.fwd .f-front::after{background:linear-gradient(to left, rgba(0,0,0,.28), rgba(0,0,0,0) 32%)}

  /* ---------- pages ---------- */
  .page{width:600px; height:780px; position:relative; background:var(--navy); color:var(--cream); overflow:hidden}
  .page.cover{background-image:var(--coverbg); background-size:cover; background-position:center;
    display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:42px 40px 36px; text-align:center}
  .page.back{background-image:var(--coverbg); background-size:cover; background-position:center}
  .pg{background-image:var(--darkbg); background-size:cover; background-position:center}
  .frame{position:absolute; inset:13px; border:2px solid var(--gold); pointer-events:none; z-index:2}
  .frame::after{content:""; position:absolute; inset:6px; border:1px solid rgba(198,162,78,.5)}
  .corner{position:absolute; width:15px; height:15px; border:2px solid var(--gold); z-index:3}
  .corner.tl{top:19px;left:19px;border-right:none;border-bottom:none}
  .corner.tr{top:19px;right:19px;border-left:none;border-bottom:none}
  .corner.bl{bottom:19px;left:19px;border-right:none;border-top:none}
  .corner.br{bottom:19px;right:19px;border-left:none;border-top:none}
  .pageinner{position:relative; z-index:2; height:100%; padding:36px 22px 26px; display:flex; flex-direction:column}

  /* cover pieces */
  .ribbon{width:100%; aspect-ratio:1024/236; color:var(--navy); position:relative;
    background-image:var(--plq); background-size:100% 100%; background-repeat:no-repeat;
    padding:0 7%; display:flex; flex-direction:column; align-items:center; justify-content:center}
  .ribbon h1{font-family:Georgia,serif; font-weight:700; margin:0; font-size:27px; letter-spacing:.02em}
  .ribbon .q{display:block; color:#8A6A1C; font-size:12px; letter-spacing:.3em; margin-top:5px; font-weight:700}
  .tag{color:var(--gold-soft); font-size:11px; letter-spacing:.34em; text-transform:uppercase; font-weight:700; margin-top:22px}
  .emblem{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px 0; margin:6px 0}
  .emblem img{width:100%; max-width:340px; max-height:100%; object-fit:contain}
  .plate{width:84%; aspect-ratio:1024/236; color:var(--navy); position:relative;
    background-image:var(--plq); background-size:100% 100%; background-repeat:no-repeat;
    padding:0 7%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
  .plate .big{font-family:Georgia,serif; font-size:16px; letter-spacing:.05em; font-weight:700; line-height:1.15}
  .plate .sub{font-size:10.5px; color:#6B5A82; margin-top:4px; letter-spacing:.04em}

  /* interior head + grid — usa la placa de cuerda para cohesion con la portada */
  .head{align-self:center; width:78%; aspect-ratio:1024/236; color:var(--navy); position:relative;
    background-image:var(--plq); background-size:100% 100%; background-repeat:no-repeat;
    border:none; padding:0 8%; margin-bottom:2px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    animation:titleUp .7s .15s cubic-bezier(.2,.9,.3,1) both}
  .head > div{display:flex; flex-direction:column; align-items:center; gap:2px}
  .head .grp{color:#8A6A1C; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
    font-weight:700; display:block}
  .head h2{font-family:Georgia,serif; margin:0; font-size:15px; font-weight:700; line-height:1.15;
    color:var(--navy); text-wrap:balance}
  .grid{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-content:center; flex:1; margin:6px auto 0}
  .ga{max-width:552px} .gb{max-width:372px}

  .pega{align-self:center; display:flex; align-items:center; gap:11px; margin:10px auto 0;
    padding:6px 17px; border-radius:22px;
    background:linear-gradient(160deg, rgba(44,21,68,.85), rgba(18,8,33,.9));
    box-shadow:inset 0 0 0 1px rgba(198,162,78,.6)}
  .pega span{font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#E3C77F; white-space:nowrap}
  .pega::before,.pega::after{content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--metal)}
  .foot{margin-top:10px; display:flex; justify-content:space-between; color:var(--gold-soft);
    font-size:10px; letter-spacing:.18em; text-transform:uppercase}

  /* ---------- slot (hueco) ---------- */
  .hueco{position:relative; width:178px; height:200px; border-radius:11px; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    padding:16px 11px 13px; gap:3px;
    background:linear-gradient(160deg, rgba(40,19,62,.9), rgba(17,7,31,.95));
    box-shadow:inset 0 0 0 1px rgba(255,243,205,.5), inset 0 0 0 5px var(--gold),
      inset 0 0 0 6px rgba(105,78,16,.9), inset 0 10px 24px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42);
    transition:box-shadow .18s}
  .hueco::before{content:""; position:absolute; inset:11px; border:1px dashed rgba(198,162,78,.5); border-radius:6px}
  .hueco > *{position:relative; z-index:1}
  .hueco.hot{box-shadow:inset 0 0 0 1px #FFF3CD, inset 0 0 0 5px var(--gold-soft),
      inset 0 0 0 6px rgba(105,78,16,.9), 0 0 26px rgba(214,190,134,.85), 0 4px 12px rgba(0,0,0,.42)}
  .h-num{font-family:Georgia,serif; font-size:42px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
    background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
  .h-name{font-family:Georgia,serif; font-size:12px; font-weight:700; color:#FBF3DF; line-height:1.2; margin-top:2px}
  .h-team{font-size:7.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#D9BE7C;
    border-top:1px solid rgba(198,162,78,.45); padding-top:5px; margin-top:4px; width:78%}
  .h-ico{width:26px; height:26px; margin-top:7px; fill:none; stroke:var(--gold); stroke-width:2.6;
    stroke-linecap:round; stroke-linejoin:round; opacity:.9}

  /* ---------- lamina ---------- */
  .lm{width:178px; height:200px; border:2px solid var(--gold); border-radius:8px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--cream); color:var(--ink);
    box-shadow:inset 0 0 0 2px var(--cream), inset 0 0 0 3px rgba(198,162,78,.55)}
  .lm.gold{box-shadow:inset 0 0 0 2px var(--cream), inset 0 0 0 4px var(--gold)}
  .lm.justplaced{animation:stamp .5s cubic-bezier(.2,1.3,.4,1)}
  @keyframes stamp{0%{transform:scale(1.22)}55%{transform:scale(.97)}100%{transform:scale(1)}}
  .lm-top{flex:0 0 auto; height:19px; background:var(--navy); display:flex; align-items:center;
    justify-content:space-between; gap:4px; padding:0 6px}
  .lm-team{font-size:6px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--gold);
    flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .lm-state{flex:0 0 auto; font-size:5.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
    color:#403004; background:var(--metal); padding:1.5px 5px; border-radius:7px}
  .lm-num{flex:0 0 auto; font-family:Georgia,serif; font-size:14px; font-weight:700; line-height:1;
    font-variant-numeric:tabular-nums; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lm-img{flex:0 0 auto; height:58px; position:relative; display:flex; align-items:center; justify-content:center;
    padding-bottom:14px; background-image:linear-gradient(rgba(46,23,69,.5),rgba(46,23,69,.68)),var(--darkbg);
    background-size:cover; background-position:center}
  .lm-img svg{width:32px; height:32px; fill:none; stroke:#EBD59B; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
  .lm-apodo{position:absolute; left:0; right:0; bottom:0; text-align:center; background:var(--metal);
    color:#3A2B04; font-family:Georgia,serif; font-size:11px; font-weight:700; padding:2px 0; border-top:1px solid rgba(255,247,214,.7)}
  .lm-body{flex:1; min-height:0; position:relative; padding:6px 7px 7px; display:flex; flex-direction:column}
  .lm-body::before{content:""; position:absolute; right:2px; top:8px; width:74px; height:74px;
    background-image:var(--shield); background-size:contain; background-repeat:no-repeat; background-position:center; opacity:.12}
  .lm-body > *{position:relative}
  .lm-lab{display:block; font-size:5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--gold)}
  .lm-ini{margin:0 0 4px; font-size:8.5px; font-weight:700; color:var(--navy); line-height:1.2}
  .lm-okr{margin:0; font-size:7px; color:var(--slate); line-height:1.3}
  .lm-res{margin-top:auto; border-top:1px solid rgba(198,162,78,.5); padding-top:3px}
  .lm-reslab{display:block; font-size:5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:#9A6E12}
  .lm-big{display:block; font-family:Georgia,serif; font-size:19px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums;
    background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lm-unit{display:block; font-size:6px; color:var(--slate)}
  .lm.soon .lm-img{filter:saturate(.55)}
  .lm.soon .lm-big{background:none; -webkit-text-fill-color:#8A93A6; color:#8A93A6}

  /* ---------- tray ---------- */
  .tray-wrap{padding:6px 16px 14px; background:rgba(10,6,18,.55); border-top:1px solid rgba(198,162,78,.25)}
  .tray-hint{text-align:center; font-size:11px; color:#B9A7CF; letter-spacing:.03em; margin:0 0 6px}
  .tray{display:flex; gap:12px; overflow-x:auto; padding:8px 6px 10px; justify-content:flex-start; min-height:150px; align-items:flex-start}
  .tray::-webkit-scrollbar{height:8px} .tray::-webkit-scrollbar-thumb{background:rgba(198,162,78,.5); border-radius:6px}
  .tray-lam{flex:0 0 auto; width:117px; height:132px; position:relative; cursor:grab; touch-action:none;
    transition:transform .15s; filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
  .tray-lam:hover{transform:translateY(-4px)}
  .tray-lam .lm{transform:scale(.657); transform-origin:top left; pointer-events:none}
  .tray-lam.taken{opacity:.35; pointer-events:none}

  .drag-clone{position:fixed; z-index:999; left:0; top:0; width:178px; height:200px; pointer-events:none;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)); transform-origin:top left}

  .flash{position:fixed; z-index:900; border-radius:11px; pointer-events:none; animation:flash .6s ease-out forwards;
    box-shadow:0 0 0 2px #FFF3CD, 0 0 40px 8px rgba(214,190,134,.9)}
  @keyframes flash{0%{opacity:.9}100%{opacity:0; transform:scale(1.1)}}

  .toast{position:fixed; left:50%; top:20px; transform:translateX(-50%) translateY(-20px); z-index:1000;
    background:var(--metal); color:#2A1F06; font-weight:700; font-size:14px; padding:10px 22px; border-radius:24px;
    box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; transition:opacity .4s, transform .4s; letter-spacing:.02em}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  /* ====== ANIMACIONES ====== */
  @keyframes coverIn { 0%{opacity:0; transform:scale(.92) translateY(20px); filter:blur(6px)} 60%{opacity:1; filter:blur(0)} 100%{opacity:1; transform:scale(1) translateY(0); filter:blur(0)} }
  @keyframes emblemFloat { 0%,100%{transform:translateY(0) rotate(-.4deg)} 50%{transform:translateY(-9px) rotate(.4deg)} }
  @keyframes emblemGlow { 0%,100%{filter:drop-shadow(0 0 22px rgba(214,190,134,.45))} 50%{filter:drop-shadow(0 0 44px rgba(255,220,140,.9))} }
  @keyframes ribbonShine { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
  @keyframes titleUp { 0%{opacity:0; transform:translateY(14px)} 100%{opacity:1; transform:translateY(0)} }
  @keyframes shimmer { 0%{background-position:-160% 50%} 100%{background-position:260% 50%} }
  @keyframes slotPulse { 0%,100%{box-shadow:inset 0 0 0 1px rgba(255,243,205,.5), inset 0 0 0 5px var(--gold), inset 0 0 0 6px rgba(105,78,16,.9), inset 0 10px 24px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42), 0 0 0 rgba(214,190,134,0)} 50%{box-shadow:inset 0 0 0 1px rgba(255,243,205,.5), inset 0 0 0 5px var(--gold), inset 0 0 0 6px rgba(105,78,16,.9), inset 0 10px 24px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42), 0 0 28px rgba(214,190,134,.35)} }
  @keyframes numShine { 0%,100%{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))} 50%{filter:drop-shadow(0 0 12px rgba(255,220,140,.85))} }
  @keyframes stampBig { 0%{transform:scale(1.35) rotate(-6deg); opacity:.6; filter:blur(2px)} 40%{transform:scale(.94) rotate(2deg); opacity:1; filter:blur(0)} 70%{transform:scale(1.04) rotate(-1deg)} 100%{transform:scale(1) rotate(0); opacity:1} }
  @keyframes shockwave { 0%{opacity:.9; transform:translate(-50%,-50%) scale(.4)} 100%{opacity:0; transform:translate(-50%,-50%) scale(2.2)} }
  @keyframes sparkFly { 0%{opacity:1; transform:translate(-50%,-50%) rotate(var(--ang)) translateX(0) scale(1)} 100%{opacity:0; transform:translate(-50%,-50%) rotate(var(--ang)) translateX(var(--dist)) scale(.2)} }
  @keyframes floatUp { 0%{opacity:0; transform:translateY(20px)} 60%{opacity:1} 100%{opacity:0; transform:translateY(-30px)} }
  @keyframes trayIn { 0%{opacity:0; transform:translateY(24px) scale(.9)} 100%{opacity:1; transform:translateY(0) scale(1)} }
  @keyframes trayHintBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
  @keyframes confetti { 0%{opacity:1; transform:translate(0,0) rotate(0)} 100%{opacity:0; transform:translate(var(--dx),110vh) rotate(var(--rot))} }

  /* aplicar */
  .page.cover{animation:coverIn .9s cubic-bezier(.2,.9,.3,1) both}
  .page.cover .ribbon{animation:titleUp .8s .2s cubic-bezier(.2,.9,.3,1) both}
  .page.cover .tag{animation:titleUp .8s .4s cubic-bezier(.2,.9,.3,1) both}
  .page.cover .plate{animation:titleUp .8s .5s cubic-bezier(.2,.9,.3,1) both}
  .page.cover .emblem{animation:titleUp .8s .3s cubic-bezier(.2,.9,.3,1) both}
  .page.cover .emblem img{animation:emblemFloat 6s ease-in-out infinite, emblemGlow 4.5s ease-in-out infinite}

  /* medalla dorada en el titulo del ribbon */
  .page.cover .ribbon h1{background:linear-gradient(90deg,#2E1745 0%,#5A3B12 30%,#B08920 45%,#E9CB78 50%,#B08920 55%,#5A3B12 70%,#2E1745 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:ribbonShine 3.5s linear infinite}

  /* casillas vacias con pulso sutil dorado */
  .hueco{animation:slotPulse 3s ease-in-out infinite}
  .hueco::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
    background:linear-gradient(115deg, transparent 30%, rgba(255,240,190,.28) 47%, rgba(255,240,190,.5) 50%, rgba(255,240,190,.28) 53%, transparent 70%);
    background-size:200% 200%; animation:shimmer 4.5s linear infinite}
  .hueco:hover::after{opacity:1}
  .hueco .h-num{animation:numShine 3s ease-in-out infinite}
  .hueco.hot{animation:none; transform:scale(1.03); transition:transform .15s}
  .hueco.hot .h-num{animation:none; filter:drop-shadow(0 0 18px rgba(255,220,140,1))}

  /* laminas recien pegadas: sello dramatico */
  .lm.justplaced{animation:stampBig .55s cubic-bezier(.2,1.3,.4,1) both}

  /* pega ribbon con brillo bailando */
  .pega span{background:linear-gradient(90deg,#E3C77F 0%,#FFF3CD 50%,#E3C77F 100%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 3s linear infinite}

  /* bandeja: entrada + hint que respira */
  .tray-lam{animation:trayIn .5s cubic-bezier(.2,.9,.3,1) both}
  .tray-lam:nth-child(2){animation-delay:.05s} .tray-lam:nth-child(3){animation-delay:.10s}
  .tray-lam:nth-child(4){animation-delay:.15s} .tray-lam:nth-child(5){animation-delay:.20s}
  .tray-lam:nth-child(6){animation-delay:.25s} .tray-lam:nth-child(7){animation-delay:.30s}
  .tray-lam:nth-child(8){animation-delay:.35s} .tray-lam:nth-child(9){animation-delay:.40s}
  .tray-hint{animation:trayHintBob 2.4s ease-in-out infinite}
  .tray-lam:active{cursor:grabbing; transform:scale(1.05) rotate(-2deg)}

  /* boton pulso suave para invitar al clic */
  #autoBtn{position:relative; overflow:hidden}
  #autoBtn::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); background-size:200% 100%; animation:shimmer 2.5s linear infinite}

  /* onda de choque y chispas al pegar */
  .shockwave{position:fixed; z-index:895; width:60px; height:60px; border-radius:50%;
    border:3px solid rgba(255,220,140,.85); pointer-events:none; animation:shockwave .55s ease-out forwards}
  .spark{position:fixed; z-index:896; width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle,#FFF7D6,#E9CB78 40%,transparent 70%); pointer-events:none;
    animation:sparkFly .7s ease-out forwards}
  .float-msg{position:fixed; z-index:897; font-family:Georgia,serif; font-weight:700; font-size:22px;
    color:#FFE07A; text-shadow:0 2px 12px rgba(0,0,0,.7), 0 0 20px rgba(255,220,140,.7); pointer-events:none;
    transform:translateX(-50%); animation:floatUp 1.4s ease-out forwards}

  /* confeti final */
  .confetti-piece{position:fixed; top:-20px; width:8px; height:14px; z-index:998; pointer-events:none;
    animation:confetti 3.2s cubic-bezier(.15,.65,.4,1) forwards}

  /* progreso: barra con brillo cuando avanza */
  .bar > i{position:relative; overflow:hidden}
  .bar > i::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); background-size:200% 100%; animation:shimmer 1.8s linear infinite}

  /* botones de navegacion: hover suave */
  .navbtn{transition:transform .18s, background .18s}
  .navbtn:hover:not(:disabled){transform:translateY(-50%) scale(1.1); background:rgba(60,30,90,.85)}

/* ============ MODO MÓVIL: una página a la vez, a todo el ancho ============ */
body.mobile .book{width:600px}
body.mobile .half.right, body.mobile .spine{display:none}
body.mobile .half.left{width:600px}
body.mobile .bookwrap{padding:4px 6px}
body.mobile .navbtn{width:40px; height:40px; font-size:20px; background:rgba(20,10,34,.85)}
body.mobile .navbtn.prev{left:2px}
body.mobile .navbtn.next{right:2px}

@media (max-width:860px){
  .topbar{gap:8px 12px; padding:8px 10px 4px}
  .brand{font-size:12px}
  .prog{font-size:11px}
  .bar{width:96px}
  /* la bandeja de láminas: un poco más compacta en el teléfono */
  .tray-wrap{padding:4px 8px 10px}
  .tray{gap:9px; min-height:140px}
}