/* ===== Page random uniquement ===== */

body[data-page="random"] .site-main{
  min-height:calc(100vh - var(--header-height));
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px 14px 14px;
}

body[data-page="random"] .random-page{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

body[data-page="random"] .random-page > .container{
  display:none;
}

/* ===== Carte ===== */
body[data-page="random"] .card{
  width:min(460px, 92vw);
  height:min(680px, calc(100vh - 120px));
  background:linear-gradient(180deg,#1b1e26,#12141a);
  border-radius:18px;
  padding:12px;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  gap:10px;
  box-sizing:border-box;
  overflow:hidden;
}

/* ===== Header ===== */
body[data-page="random"] .card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin:0;
  padding:0;
}

body[data-page="random"] .card-header h1{
  font-size:1.02rem;
  margin:0;
  flex:1;
  min-width:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.2;
  max-height:2.4em;
}

body[data-page="random"] .btn-random{
  border-radius:999px;
  border:2px solid #9aa8ff;
  background:rgba(18,18,34,.9);
  color:#fff;
  padding:7px 14px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* ===== Icônes ===== */
body[data-page="random"] .icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body[data-page="random"] .icon-shuffle{
  width:22px;
  height:18px;
}

@media (max-width:1024px){
  body[data-page="random"] .btn-random{
    display:none;
  }
}

/* ===== Cover ===== */
body[data-page="random"] #swipeZone.cover-frame{
  display:flex;
  justify-content:center;
  align-items:center;
  flex:1;
  min-height:0;
  touch-action:pan-y;
  user-select:none;
  border-radius:14px;
  margin:0;
  padding:0;
}

body[data-page="random"] .cover-inner{
  position:relative;
  display:inline-block;
  max-width:100%;
  max-height:100%;
  line-height:0;
}

body[data-page="random"] #albumCover{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:14px;
  -webkit-user-drag:none;
}

body[data-page="random"] .cover-inner .swipe-hint{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:20;
  font-size:.84rem;
  opacity:.92;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
  backdrop-filter:blur(6px);
  text-shadow:0 1px 10px rgba(0,0,0,.65);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

@media (min-width:1025px){
  body[data-page="random"] .cover-inner .swipe-hint{
    display:none;
  }
}

/* ===== Player ===== */
body[data-page="random"] .player{
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  flex:0 0 auto;
}

body[data-page="random"] iframe{
  border:none;
}

/* ===== Feedback swipe ===== */
body[data-page="random"] .cover-frame.swiping{
  outline:2px solid rgba(154,168,255,.45);
  box-shadow:0 0 0 6px rgba(154,168,255,.12);
}

/* ===== Responsive ===== */
@media (max-width:1024px){
  body[data-page="random"] .site-main{
    align-items:flex-start;
    padding-top:14px;
  }

  body[data-page="random"] .card{
    gap:8px;
    padding:10px;
    height:auto;
    min-height:0;
  }

  body[data-page="random"] #swipeZone.cover-frame{
    flex:0 0 auto;
    align-items:flex-start;
  }

  body[data-page="random"] .cover-inner{
    max-height:52vh;
  }

  body[data-page="random"] #albumCover{
    max-height:52vh;
  }
}