html,body{
  margin:0;padding:0;background:#0b0d12;color:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}

.wrap{
  width:100%;max-width:1100px;margin:0 auto;padding:10px;
  display:flex;flex-direction:column;gap:12px;
}
header{text-align:center}
.stageTitle{margin:0;font-weight:800;font-size:clamp(18px,3.8vw,26px)}
.main{display:grid;grid-template-columns:1fr;gap:12px;place-items:center;width:100%}

/* ステージ */
.stageArea{
  position:relative;aspect-ratio:16/9;background:#000;
  border-radius:16px;overflow:hidden;width:min(640px,100%);max-width:100%;
}
.stageImage{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.bandLayer{position:absolute;inset:0}
.member{position:absolute;transform:translate(-50%,-100%);width:clamp(100px,18vw,240px)}

/* 観客 */
.audienceBlock{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.guestRow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;max-width:100%}
.guestRow img{width:clamp(22px,5vw,38px);height:auto}
.meter{
  display:flex;align-items:center;gap:10px;
  background:#131821;border:2px solid #3c4558;border-radius:12px;
  padding:8px 12px;max-width:100%;
}
.meter b{font-size:clamp(13px,3.2vw,18px);white-space:nowrap}
.audBar{
  position:relative;flex:1 1 auto;min-width:220px;
  height:14px;background:#1c2431;border:2px solid #5e6a83;border-radius:999px;overflow:hidden;
}
.audFill{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,#09f,#0ff);transition:width .35s ease;
}

/* サムネイル */
.grid{width:100%;max-width:900px;display:grid;margin:0 auto;gap:10px;grid-template-columns:repeat(3,1fr)}
@media(min-width:768px){
  .grid{grid-template-columns:repeat(8,1fr);max-width:1000px;gap:6px}
}
.icon{
  background:none;border:none;width:100%;aspect-ratio:1/1;
  display:flex;justify-content:center;align-items:center;
  cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;
}
.icon img{width:92%;height:auto;user-select:none;pointer-events:none;display:block;max-width:100%}
.icon.active{transform:scale(.96);box-shadow:0 0 0 2px red inset;border-radius:6px}

/* ボタン */
.bottomControls{
  display:flex;justify-content:center;align-items:center;
  gap:10px;width:100%;margin-top:6px;flex-wrap:wrap;
}
.btn{background:#ff4757;border:0;color:#fff;font-weight:700;padding:12px 18px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block}
.btnNext{background:#1e90ff;border:0;color:#fff;font-weight:800;padding:12px 18px;border-radius:10px;cursor:pointer;display:none}
.btn.sub{background:#5352ed}
.btn.linklike{background:#2ed573}
.saveToast{min-height:1em;font-size:14px;opacity:.9}

/* 曲情報 */
.songInfo{
  margin-top:12px;text-align:center;font-size:clamp(14px,3vw,18px);
  opacity:0;animation:fadein .8s ease forwards;
}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* =========================
   スマホ：上部固定（追従）
   タイトル + ステージ + 観客率
   ========================= */
@media (max-width: 767px) {

  header,
  .stageArea,
  .audienceBlock {
    width: min(640px, 100%);
    left: 50%;
    transform: translateX(-50%);
    background: #0b0d12;
  }

  header{
    position: fixed;
    top: 0;
    z-index: 1002;
    padding: 8px 10px;
  }

  .stageArea{
    position: fixed;
    top: var(--headerH, 56px);
    z-index: 1001;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  }

  .audienceBlock{
    position: fixed;
    top: calc(var(--headerH, 56px) + var(--stageH, 200px));
    z-index: 1000;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .main{
    padding-top: calc(
      var(--headerH, 56px)
      + var(--stageH, 200px)
      + var(--audienceH, 100px)
      + 14px
    );
  }
}

/* =========================
   セレクト画面 共通
   ========================= */
.selectWrap{
  width:100%;max-width:1100px;margin:0 auto;padding:16px 12px 28px;
  display:flex;flex-direction:column;gap:16px;
}
.selectHead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.selectTitle{margin:0;font-size:clamp(20px,4vw,28px);font-weight:800}
.selectGrid{
  display:grid;gap:12px;grid-template-columns:repeat(2,1fr);
}
@media(min-width:768px){
  .selectGrid{grid-template-columns:repeat(3,1fr)}
}
.card{
  background:#111827;border:2px solid #334155;border-radius:14px;padding:14px 14px 16px;
  display:flex;flex-direction:column;gap:10px;position:relative;min-height:150px;
}
.card h3{margin:0 0 4px 0;font-size:18px}
.card p{margin:0;color:#bcd}
.card .actions{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  position:absolute;top:10px;right:10px;font-size:12px;padding:4px 8px;border-radius:999px;
  background:#22c55e;color:#06170c;font-weight:800;
}
.badge.lock{background:#475569;color:#cbd5e1}
.card.lock{opacity:.65;filter:grayscale(25%)}
.card a.btn{padding:10px 16px;border-radius:10px}