:root{
      --panel: rgba(8, 14, 20, .64);
      --panel2: rgba(8, 14, 20, .50);
      --line: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
    }

    body{
      margin:0;
      min-height:100svh;
      color:var(--text);
      font-family:"Noto Sans JP", system-ui, -apple-system, sans-serif;
      overflow-x:hidden;

      background:
  radial-gradient(1200px 800px at 58% 34%, rgba(60, 200, 255, .16), transparent 60%),
  linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.20)),
  url("../assets/img/Lounge.png") center center / cover no-repeat fixed;
    }

    .wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 22px 14px 60px;
      position: relative;
      z-index: 2;
    }

    header{
      text-align:center;
      margin: 6px 0 10px;
    }
    .title{
      font-family:"Playfair Display", serif;
      letter-spacing:.10em;
      margin:0;
      font-size: clamp(26px, 3.6vw, 40px);
    }
    .sub{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
      letter-spacing:.14em;
    }

    .stage{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  justify-content:flex-start;
  margin-top:18px;
  min-height:auto;
}

.leftStack,
.rightStack{
  width:min(1000px, 94vw);
}

.leftStack,
.rightStack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.menu h2{
  display:none;
}

.menu a{
  margin-top:0;
  min-width:120px;
  text-align:center;
}
    .card{
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 16px;
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      position: relative;
      z-index: 2;
    }

   .counter{
  width:94%;
  max-width:none;
}

    .card h2{
      margin:0 0 10px;
      font-size: 14px;
      letter-spacing:.07em;
    }
    .card p{
      margin:0 0 10px;
      line-height: 1.85;
      color: var(--muted);
      font-size: 14px;
    }
    .mini{
      font-size:12px;
      color: rgba(255,255,255,.58);
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      padding-top: 10px;
    }

    /* 右：看板メニュー */
    .menu a{
      display:block;
      text-decoration:none;
      color: var(--text);
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--panel2);
      margin-top: 10px;
      transition: transform .08s ease, background .2s ease;
    }
    .menu a:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.06);
    }
    .menu .label{
      font-size: 14px;
      letter-spacing:.04em;
    }
    .menu .hint{
      margin-top: 4px;
      font-size: 12px;
      color: rgba(255,255,255,.62);
    }

    /* ラジオバナー */
    .radioBanner{
      display:block;
      margin-top: 14px;
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid var(--line);
      background: rgba(0,0,0,.25);
      text-decoration:none;
      color: var(--text);
    }
    .radioBanner img{
      display:block;
      width:100%;
      height:auto;
    }
    .radioBanner .cap{
      padding: 12px 12px 14px;
      background: rgba(0,0,0,.25);
    }
    .radioBanner .cap strong{
      display:block;
      font-size: 14px;
      letter-spacing:.04em;
      margin-bottom: 4px;
      font-family:"Playfair Display", serif;
    }
    .radioBanner .cap span{
      font-size: 12px;
      color: rgba(255,255,255,.70);
    }

    /* BGMボタン */
    .soundToggle{
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(8,14,20,.72);
      color: rgba(255,255,255,.92);
      font: inherit;
      font-size: 13px;
      cursor: pointer;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
      transition: transform .08s ease, background .2s ease;
    }
    .soundToggle:hover{
      transform: translateY(-1px);
      background: rgba(12, 22, 32, .82);
    }

    /* 泡：画面の左右端から */
    .bubbles{
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
    }

    .bubble{
      position: absolute;
      bottom: -140px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(255,255,255,.10) 55%, rgba(255,255,255,.03) 100%);
      border: 1px solid rgba(255,255,255,.18);
      opacity: .45;
      filter: blur(.2px);
      animation: bubbleRise linear infinite;
    }

    .bubble.left{ left: 2%; }
    .bubble.right{ right: 2%; }

    .bubble.b1{ width: 14px; height: 14px; animation-duration: 14s; animation-delay: 0s; }
    .bubble.b2{ width: 22px; height: 22px; animation-duration: 18s; animation-delay: 2s; }
    .bubble.b3{ width: 10px; height: 10px; animation-duration: 12s; animation-delay: 5s; }
    .bubble.b4{ width: 18px; height: 18px; animation-duration: 16s; animation-delay: 1s; }
    .bubble.b5{ width: 12px; height: 12px; animation-duration: 13s; animation-delay: 7s; }
    .bubble.b6{ width: 26px; height: 26px; animation-duration: 20s; animation-delay: 3s; }

    .bubble.left.b1{ left: 2%; }
    .bubble.left.b2{ left: 6%; }
    .bubble.left.b3{ left: 10%; }
    .bubble.right.b4{ right: 3%; }
    .bubble.right.b5{ right: 7%; }
    .bubble.right.b6{ right: 11%; }

    @keyframes bubbleRise{
      0%{
        transform: translateY(0) translateX(0) scale(.9);
        opacity: 0;
      }
      10%{
        opacity: .38;
      }
      70%{
        opacity: .28;
      }
      100%{
        transform: translateY(-115vh) translateX(18px) scale(1.15);
        opacity: 0;
      }
    }

    /* 本館へ浮上 */
    body.surface-leave{
      animation: surfaceUp .72s ease forwards;
    }

    @keyframes surfaceUp{
      0%{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
      }
      100%{
        transform: translateY(-120px);
        filter: blur(8px);
        opacity: 0;
      }
    }

    footer{
      margin-top: 18px;
      text-align:center;
      color: rgba(255,255,255,.55);
      font-size: 12px;
      line-height: 1.7;
      position: relative;
      z-index: 2;
    }
    footer a{
      color: rgba(255,255,255,.75);
      text-decoration:none;
      border-bottom: 1px dashed rgba(255,255,255,.25);
    }

    @media (max-width: 640px){
      .soundToggle{
        right: 10px;
        bottom: 10px;
        padding: 9px 12px;
        font-size: 12px;
      }
}
.videoShelf{
  min-height:auto;
}

.videoRail{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:4px 2px 10px;
}

.videoCard{
  flex:0 0 170px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--panel2);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  padding:0;
}

.videoCard img{
  display:block;
  width:100%;
  aspect-ratio:9 / 16;
  object-fit:cover;
}

.videoCard span{
  display:block;
  padding:8px 10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.leftStack{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}

.videoShelf{
  align-self:start;
}

.movieShelf{
  min-height:auto;
}
.videoModal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,8,16,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.videoModal.is-open{
  display:flex;
}

.videoModal__inner{
  width:min(280px, 92vw);
}

.videoModal__frame{
  aspect-ratio:9 / 16;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}

.videoModal__frame iframe{
  width:100%;
  height:100%;
  border:0;
}

.videoModal__close{
  margin-top:10px;
  width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px;
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
}

.modalVideo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#000;
}
audio{
  width:100%;
}

.videoCard{
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.videoCard span{
  font-size:16px;
  color:white;
}
/* ===== Lounge Ver2 layout override ===== */

.stage{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  justify-content:flex-start;
  margin-top:18px;
  min-height:auto;
}

.leftStack,
.rightStack{
  width:min(1000px, 94vw);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.menu h2{
  display:none;
}

.menu a{
  margin-top:0;
  min-width:120px;
  text-align:center;
}
.leftStack,
.rightStack{
  align-items:stretch;
}

.counter{
  width:auto;
}
.card{
  width:min(1200px, 92vw);
  margin:0 auto;
}

.menu{
  order:-10;
}

#radio{
  order:1;
}

#short{
  order:2;
}

#movie{
  order:3;
}

.videoRail{
  justify-content:center;
}
body{
  outline:10px solid red !important;
}
.loungePanel {
  display: none !important;
}

.loungePanel.is-active {
  display: block !important;
  width: min(820px, 90vw);
  min-height: 360px;
  max-height: calc(100svh - 190px);
  margin-top: 18px;
  overflow: auto;

  background: rgba(8, 18, 28, .42);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.panelArea {
  width: min(1200px, 92vw);
  min-height: 360px;
  max-height: calc(100svh - 190px);
  overflow: hidden;
  position: relative;
}

.loungePanel {
  display: block !important;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(42px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  overflow-x: auto;
  overflow-y: hidden;
}

.loungePanel.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* ===== final align fix ===== */

body{
  outline: none !important;
}

.wrap{
  max-width: none;
  width: 100%;
}

.stage{
  width: min(1280px, 96vw);
  margin: 18px auto 0;
}

.menu,
.panelArea{
  width: 100%;
  box-sizing: border-box;
}

.panelArea{
  height: min(420px, calc(100svh - 190px));
  min-height: 360px;
  position: relative;
  overflow: hidden;
}

.loungePanel{
  width: 100% !important;
  height: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

.loungePanel.is-active{
  width: 100% !important;
  margin: 0 !important;
}
.radioUnit{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.radioStatus{
  color:#8de5ff;
  letter-spacing:.15em;
  font-size:12px;
}

.radioTitle{
  font-size:22px;
  font-weight:700;
}

.radioDesc{
  color:var(--muted);
}

.radioProgress{
  height:10px;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
}

.radioProgressBar{
  width:0%;
  height:100%;
  background:rgba(120,220,255,.8);
}

.radioPlay{
  background:var(--panel2);
  color:white;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px;
  cursor:pointer;
}
/* =========================
   Deep Sea Terminal - Machine Skin
========================= */

.radioUnit{
  max-width: 520px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    rgba(3, 10, 18, .78);
  border: 1px solid rgba(180,240,255,.28);
  box-shadow:
    inset 0 0 22px rgba(120,220,255,.08),
    0 18px 45px rgba(0,0,0,.45);
}

.radioUnit::before{
  content:"";
  display:block;
  height: 10px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: repeating-linear-gradient(
    90deg,
    rgba(130,230,255,.7) 0 8px,
    transparent 8px 14px
  );
  opacity:.55;
}

.radioStatus{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(120,220,255,.10);
  border:1px solid rgba(120,220,255,.22);
}

.radioTitle{
  padding:18px;
  border-radius:18px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
}

.radioProgress{
  height:14px;
  background:rgba(0,0,0,.28);
}

.radioPlay{
  max-width: 220px;
  margin: 0 auto;
  box-shadow:
    inset 0 0 12px rgba(120,220,255,.10),
    0 0 18px rgba(120,220,255,.10);
}
.radioDeck{
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:18px;
  align-items:stretch;
}

.terminalTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:rgba(180,240,255,.75);
  letter-spacing:.12em;
  margin-bottom:12px;
}

.signalBox{
  margin:12px 0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(120,220,255,.18);
  color:rgba(180,240,255,.82);
  font-size:12px;
  letter-spacing:.12em;
}

.signalBars{
  display:inline-block;
  margin:0 8px;
  color:rgba(120,220,255,.9);
}

.waveMeter{
  display:flex;
  justify-content:center;
  align-items:end;
  gap:6px;
  height:36px;
  margin:12px 0;
}

.waveMeter span{
  width:6px;
  height:10px;
  border-radius:999px;
  background:rgba(120,220,255,.75);
  animation:waveIdle 1.4s ease-in-out infinite;
}

.waveMeter span:nth-child(2){ animation-delay:.1s; }
.waveMeter span:nth-child(3){ animation-delay:.2s; }
.waveMeter span:nth-child(4){ animation-delay:.3s; }
.waveMeter span:nth-child(5){ animation-delay:.4s; }

.radioUnit.is-playing .waveMeter span{
  animation-name:wavePlay;
}

@keyframes waveIdle{
  0%,100%{ height:8px; opacity:.35; }
  50%{ height:14px; opacity:.65; }
}

@keyframes wavePlay{
  0%,100%{ height:8px; }
  50%{ height:32px; }
}

.radioUnit.is-playing .radioStatus{
  animation:terminalPulse 1.4s ease-in-out infinite;
}

@keyframes terminalPulse{
  0%,100%{ box-shadow:0 0 0 rgba(120,220,255,0); }
  50%{ box-shadow:0 0 18px rgba(120,220,255,.35); }
}

.playlistUnit{
  padding:18px;
  border-radius:24px;
  background:rgba(3,10,18,.62);
  border:1px solid rgba(180,240,255,.22);
  box-shadow:inset 0 0 18px rgba(120,220,255,.06);
}

.playlistUnit h3{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.14em;
  color:rgba(180,240,255,.85);
}

.playlistItem{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.playlistItem span{
  color:var(--muted);
  font-size:12px;
}

.playlistItem.is-current{
  border-color:rgba(120,220,255,.45);
  box-shadow:0 0 18px rgba(120,220,255,.12);
}

@media (max-width: 720px){
  .radioDeck{
    grid-template-columns:1fr;
  }

  .terminalTop{
    flex-direction:column;
  }
}
/* ===== Radio terminal layout fix ===== */

.panelArea{
  height: min(560px, calc(100svh - 150px));
  min-height: 500px;
}

.radioDeck{
  width: min(760px, 94vw);
  margin: 0 auto;
  grid-template-columns: minmax(360px, 1fr) 220px;
  gap: 14px;
}

.radioUnit{
  max-width: none;
}

.playlistUnit{
  max-width: 220px;
}

.loungePanel{
  overflow: hidden;
}

@media (max-width: 720px){
  .panelArea{
    height: auto;
    min-height: 560px;
  }

  .radioDeck{
    width: 100%;
    grid-template-columns: 1fr;
  }

  .playlistUnit{
    max-width: none;
  }
}
.waterLight{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.08),
      transparent 60%
    );

  mix-blend-mode:screen;

  animation:
    waterMove 18s ease-in-out infinite;
}

@keyframes waterMove{
  0%{
    transform:translateX(-3%) translateY(0);
  }

  50%{
    transform:translateX(3%) translateY(2%);
  }

  100%{
    transform:translateX(-3%) translateY(0);
  }
}
.waterSparkle{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.35) 0,
      transparent 2px
    );

  background-size:
    200px 200px;

  animation:
    sparkleMove 20s linear infinite;
}

@keyframes sparkleMove{
  from{
    background-position:0 0;
  }

  to{
    background-position:300px 200px;
  }
}
.waterLight{
  background:
    radial-gradient(ellipse at 30% 10%, rgba(180,240,255,.22), transparent 45%),
    radial-gradient(ellipse at 70% 0%, rgba(255,255,255,.16), transparent 50%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 45%, transparent 60%);
  mix-blend-mode: screen;
  opacity: .95;
  animation: waterMove 10s ease-in-out infinite;
}

@keyframes waterMove{
  0%{
    transform: translateX(-4%) translateY(-2%) scale(1.04);
  }
  50%{
    transform: translateX(4%) translateY(2%) scale(1.08);
  }
  100%{
    transform: translateX(-4%) translateY(-2%) scale(1.04);
  }
}
/* ===== Deep Sea motion boost ===== */

/* 水面ゆらぎ：背景が強くなったので少し強め */
.waterLight{
  position:fixed;
  inset:-8%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse at 25% 8%, rgba(210,255,255,.26), transparent 42%),
    radial-gradient(ellipse at 70% 2%, rgba(120,230,255,.18), transparent 48%),
    linear-gradient(115deg, transparent 20%, rgba(255,255,255,.16) 46%, transparent 62%);
  mix-blend-mode:screen;
  opacity:.9;
  animation: waterMoveBoost 8s ease-in-out infinite;
}

@keyframes waterMoveBoost{
  0%{
    transform:translateX(-4%) translateY(-2%) scale(1.04) rotate(-1deg);
    filter:blur(1px);
  }
  50%{
    transform:translateX(4%) translateY(2%) scale(1.09) rotate(1deg);
    filter:blur(3px);
  }
  100%{
    transform:translateX(-4%) translateY(-2%) scale(1.04) rotate(-1deg);
    filter:blur(1px);
  }
}

/* キラキラ粒子 */
.waterSparkle{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.75;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(120,235,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 2px);
  background-size:
    160px 190px,
    260px 300px,
    90px 120px;
  animation: sparkleMoveBoost 16s linear infinite;
}

@keyframes sparkleMoveBoost{
  from{
    background-position:0 0, 60px 120px, 20px 40px;
  }
  to{
    background-position:260px -220px, -180px -260px, 140px -180px;
  }
}

/* 泡：今の背景に負けないよう増強 */
.bubbles{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
}

.bubble{
  position:absolute;
  bottom:-120px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.25) 24%, rgba(130,235,255,.12) 58%, transparent 72%);
  border:1px solid rgba(210,255,255,.45);
  box-shadow:
    0 0 10px rgba(120,230,255,.35),
    inset 0 0 8px rgba(255,255,255,.25);
  opacity:.78;
  filter:blur(.1px);
  animation: bubbleRiseBoost linear infinite;
}

.bubble.b1{ width:20px; height:20px; animation-duration:13s; animation-delay:0s; }
.bubble.b2{ width:32px; height:32px; animation-duration:18s; animation-delay:2s; }
.bubble.b3{ width:15px; height:15px; animation-duration:11s; animation-delay:5s; }
.bubble.b4{ width:26px; height:26px; animation-duration:15s; animation-delay:1s; }
.bubble.b5{ width:18px; height:18px; animation-duration:12s; animation-delay:7s; }
.bubble.b6{ width:38px; height:38px; animation-duration:20s; animation-delay:3s; }

.bubble.left.b1{ left:4%; }
.bubble.left.b2{ left:9%; }
.bubble.left.b3{ left:15%; }
.bubble.right.b4{ right:5%; }
.bubble.right.b5{ right:10%; }
.bubble.right.b6{ right:16%; }

@keyframes bubbleRiseBoost{
  0%{
    transform:translateY(0) translateX(0) scale(.75);
    opacity:0;
  }
  8%{
    opacity:.82;
  }
  55%{
    opacity:.7;
  }
  100%{
    transform:translateY(-120vh) translateX(34px) scale(1.25);
    opacity:0;
  }
}

/* コンテンツはエフェクトより前 */
.wrap,
.soundToggle,
.videoModal{
  position:relative;
  z-index:5;
}
/* ===== short rail / modal fix ===== */

.loungePanel{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.videoRail{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  justify-content: flex-start;
  padding-bottom: 14px;
}

.videoCard{
  flex: 0 0 150px;
  min-width: 150px;
}

/* モーダルは必ず画面固定 */
.videoModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
}

.videoModal__inner{
  width: min(320px, 92vw);
  position: relative;
  z-index: 10000;
}
#radioPlayer{
  display:none;
}

.modalInfo{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
}

.modalInfo h3{
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: .08em;
}

.modalDesc{
  margin: 0 0 10px;
}

.modalCredit{
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  opacity: .8;
}
.modalCredit{
  white-space: pre-line;
}
.modalInfo{
  margin-top:20px;
  text-align:left;
}

.modalInfo h3{
  margin-bottom:10px;
  font-size:1.3rem;
}

.modalDesc{
  margin-bottom:15px;
  line-height:1.8;
}

.modalCredit{
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:12px;
  white-space:pre-line;
  font-size:.9rem;
  opacity:.85;
}
#radioPlayer{
  display:none;
}

.modalInfo{
  margin-top:20px;
  text-align:left;
}

.modalInfo h3{
  margin-bottom:10px;
  font-size:1.3rem;
}

.modalDesc{
  margin-bottom:15px;
  line-height:1.8;
}

.modalCredit{
  border-top:1px solid rgba(255,255,255,.2);
  padding-top:12px;
  font-size:.9rem;
  opacity:.85;
}
.videoCard{
  position: relative;
  display: block;
  flex: 0 0 150px;
  min-width: 150px;
  height: 267px;
  padding: 0;
  overflow: hidden;
}

.videoCard img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.videoCard span{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 18px 6px 8px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: linear-gradient(
    transparent,
    rgba(0,0,0,.78)
  );
}
.videoModal__frame{
  aspect-ratio:auto;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}

.modalVideo{
  width:100%;
  height:auto;
  aspect-ratio:9 / 16;
  object-fit:contain;
  display:block;

  border-radius:18px;
  background:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
/* =========================
   Lounge polish
========================= */

/* ラジオ表示領域を広げる */
.panelArea{
  height:min(680px, calc(100svh - 130px));
  min-height:620px;
}

/* ラジオ本体を少し大きく */
.radioDeck{
  width:min(920px, 96vw);
}

/* ショートサムネ大型化 */
.videoCard{
  flex:0 0 190px;
  min-width:190px;
  height:300px;
}

/* 上半身寄せ */
.videoCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 18%;
}

/* モーダル説明文を動画幅に揃える */
.modalInfo{
  width:100%;
  max-width:320px;
  margin:22px auto 0;
}

/* クレジット少し読みやすく */
.modalCredit{
  line-height:1.8;
  word-break:break-word;
}

/* スマホ微調整 */
@media (max-width:720px){

  .panelArea{
    height:auto;
    min-height:720px;
  }

  .videoCard{
    flex:0 0 170px;
    min-width:170px;
    height:280px;
  }

}
/* ===== short square cards ===== */

.videoCard{
  flex:0 0 180px;
  min-width:180px;
  height:180px;
}

.videoCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 4%;
}

.videoCard span{
  padding:26px 6px 8px;
}
/* =========================
   Short Archive
========================= */

.archiveStatus{
  margin-top:24px;
  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.15);

  text-align:center;
}

.archiveStatus h3{
  margin:0 0 16px;

  letter-spacing:.18em;
  font-size:14px;

  color:rgba(180,240,255,.9);
}

.archiveGrid{
  display:flex;
  justify-content:center;
  gap:36px;

  flex-wrap:wrap;

  margin-bottom:16px;
}

.archiveGrid span{
  display:block;

  font-size:11px;

  color:rgba(255,255,255,.55);

  letter-spacing:.08em;
}

.archiveGrid strong{
  display:block;

  margin-top:4px;

  font-size:22px;
  font-weight:700;

  color:white;
}

.archiveStatus p{
  margin:0;

  font-size:12px;

  color:rgba(255,255,255,.55);
}