:root{
    --bg:#0e0f13; --panel:#171922; --line:#262a36;
    --fg:#e7e9ee; --muted:#9aa0ad; --accent:#6ea8fe;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--fg);
    font:15px/1.5 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:0; transition:padding-bottom .3s ease;
    position:relative;
  }
  body::before{
    content:""; position:fixed; top:50%; left:50%;
    width:min(1400px,180vw); height:min(1400px,180vw);
    transform:translate(-50%,-50%);
    background:url("mandala.svg") center/contain no-repeat;
    opacity:.18; pointer-events:none; z-index:0;
  }
  .wrap{ position:relative; z-index:1 }
  body.player-visible{ padding-bottom:80px }
  .wrap{max-width:1100px; margin:0 auto; padding:40px 20px 40px}

  /* ── grid ── */
  #list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:34px; align-items:start;
  }
  .mix{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:14px 14px 12px; display:flex; flex-direction:column;
    cursor:default;
  }
  .cover{
    width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
    border-radius:9px; border:1px solid var(--line); margin:0 0 11px; background:#0b0c10;
    cursor:zoom-in;
  }

  /* ── cover lightbox ── */
  #lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(8,9,12,.88);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    display:none; align-items:center; justify-content:center;
    padding:28px; cursor:zoom-out;
  }
  #lightbox.open{ display:flex }
  #lightbox img{
    max-width:min(92vw,900px); max-height:92vh;
    border-radius:12px; border:1px solid var(--line);
    box-shadow:0 24px 70px rgba(0,0,0,.6);
    animation:lb-in .18s ease;
  }
  @keyframes lb-in{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
  .mix h2{margin:0 0 3px; font-size:15px; font-weight:600}
  .meta{color:var(--muted); font-size:11px; margin:0 0 9px; display:flex; gap:8px; flex-wrap:wrap}

  /* ── card waveform ── */
  .player{margin-top:auto}
  .wave-row{display:flex; align-items:center; gap:6px; margin-bottom:0}

  /* card play/pause button */
  .btn-play{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--accent); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    padding:0; transition:filter .15s;
  }
  .btn-play:hover{filter:brightness(1.1)}
  .btn-play svg{width:12px; height:12px; fill:#0b1020}
  .waveform-wrap{
    flex:1; height:52px; border-radius:7px; overflow:hidden; min-width:0;
    background:#0b0d11; position:relative; cursor:pointer; touch-action:none;
  }
  .waveform-canvas{display:block; width:100%; height:100%}
  .waveform-wrap:hover .waveform-canvas{opacity:.82}
  .playhead{
    position:absolute; top:0; bottom:0; width:2px; display:none;
    background:rgba(255,255,255,.75); pointer-events:none;
    transform:translateX(-50%);
    box-shadow:0 0 5px rgba(255,255,255,.35);
  }

  /* small download icon */
  .btn-dl{
    width:30px; height:30px; flex-shrink:0; border-radius:7px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(110,168,254,.1); border:1px solid rgba(110,168,254,.22);
    color:var(--accent); text-decoration:none; transition:background .15s;
  }
  .btn-dl:hover{background:rgba(110,168,254,.22)}
  .btn-dl[aria-disabled="true"]{opacity:.3; pointer-events:none}
  .btn-dl svg{width:13px; height:13px}

  /* tracklist */
  details{margin-top:9px}
  summary{cursor:pointer; color:var(--muted); font-size:11px; user-select:none}
  summary:hover{color:var(--fg)}
  .tl{
    margin:7px 0 0; display:grid;
    grid-template-columns:1.5em 1fr 1fr;
    column-gap:6px; row-gap:2px;
    font-size:11px; color:#c7ccd6;
  }
  .tl-n{color:var(--muted); text-align:right; user-select:none}
  .tl-a{color:#dde0e8}
  .tl-t{color:var(--muted)}
  /* Layers are a separate list from the running order, so they get their own
     heading and a rule above them rather than continuing the track numbers. */
  .tl-head{
    margin:11px 0 0; padding-top:8px; border-top:1px solid var(--line);
    font-size:10px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--muted);
  }
  .tl-head-main{
    margin-top:8px; padding-top:0; border-top:0;
  }
  .tl-layers{margin-top:5px}
  .process ul{
    margin:7px 0 0; padding-left:18px;
    color:#c7ccd6; font-size:11px;
  }
  .process li{margin:0 0 4px}
  .build-link{
    color:var(--accent); text-decoration:none; font-size:11px;
    margin-top:9px; display:inline-block;
  }
  .build-link:hover{text-decoration:underline}

  .empty{color:var(--muted); border:1px dashed var(--line); border-radius:14px; padding:40px; text-align:center}
  #foot-static{color:#5b616e; font-size:11px; margin-top:36px; text-align:center}

  /* ═══════════════════════════════════════════
     FOOTER PLAYER
  ═══════════════════════════════════════════ */
  #fp{
    position:fixed; bottom:0; left:0; right:0; z-index:100;
    background:rgba(18,20,26,0.92);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-top:1px solid var(--line);
    height:80px;
    display:flex; align-items:center; gap:14px;
    padding:0 20px;
    transform:translateY(100%);
    transition:transform .3s ease;
  }
  #fp.visible{ transform:translateY(0) }

  /* cover thumbnail */
  #fp-cover{
    width:48px; height:48px; border-radius:6px;
    object-fit:cover; border:1px solid var(--line);
    background:#0b0c10; flex-shrink:0; display:none;
  }
  #fp-cover.shown{ display:block }

  /* title */
  #fp-title{
    font-size:13px; font-weight:500; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
    width:130px; flex-shrink:0;
  }

  /* play/pause */
  #fp-play{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--accent); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    padding:0; transition:filter .15s;
  }
  #fp-play:hover{filter:brightness(1.1)}
  #fp-play svg{width:13px; height:13px; fill:#0b1020}

  /* time */
  #fp-time{
    font-size:11px; color:var(--muted); white-space:nowrap;
    font-variant-numeric:tabular-nums; flex-shrink:0; width:108px; text-align:center;
  }

  /* waveform */
  #fp-wave-wrap{
    flex:1; height:40px; border-radius:6px; overflow:hidden; min-width:0;
    background:#0b0d11; position:relative; cursor:pointer; touch-action:none;
  }
  #fp-wave-canvas{ display:block; width:100%; height:100% }
  #fp-playhead{
    position:absolute; top:0; bottom:0; width:2px; display:none;
    background:rgba(255,255,255,.8); pointer-events:none;
    transform:translateX(-50%);
    box-shadow:0 0 4px rgba(255,255,255,.4);
  }

  /* volume */
  #fp-vol-wrap{display:flex; align-items:center; gap:6px; flex-shrink:0}
  #fp-vol-wrap svg{width:13px; height:13px; fill:var(--muted)}
  input[type=range].fp-vol{
    -webkit-appearance:none; appearance:none;
    width:72px; height:3px; border-radius:2px;
    background:var(--line); outline:none; cursor:pointer;
  }
  input[type=range].fp-vol::-webkit-slider-thumb{
    -webkit-appearance:none; width:12px; height:12px;
    border-radius:50%; background:var(--accent); cursor:pointer;
  }

  /* ── mobile footer player ── */
  @media (max-width:600px){
    body.player-visible{ padding-bottom:64px }
    #fp{
      height:64px; gap:9px; padding:0 12px;
      padding-bottom:env(safe-area-inset-bottom);
    }
    #fp-cover{ width:40px; height:40px }
    #fp-title{ display:none }
    #fp-play{ width:34px; height:34px }
    #fp-time{ width:auto; font-size:10px }
    #fp-vol-wrap{ display:none }   /* touch devices: use system volume */
  }
  @media (max-width:380px){
    #fp-time{ display:none }       /* keep waveform usable on very narrow screens */
  }

/* ═══════════════════════════════════════════
   SHARE / PERMALINK
═══════════════════════════════════════════ */
.permalink{
  color:var(--accent); text-decoration:none; font-size:11px;
  margin-top:10px; display:inline-block;
}
.permalink:hover{text-decoration:underline}

/* ── 個別ページ: カバー右上の控えめなアイコン列 ── */
.topbar{
  position:absolute; top:26px; left:26px; right:26px; z-index:3;
  display:flex; justify-content:space-between; pointer-events:none;
}
.topbar .ic{ pointer-events:auto }
.ic{
  width:32px; height:32px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,13,17,.55); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:rgba(231,233,238,.82); cursor:pointer; text-decoration:none;
  transition:background .15s, color .15s, opacity .15s;
}
.ic:hover{ background:rgba(12,13,17,.78); color:#fff }
.ic svg{ width:15px; height:15px }
.ic.busy{ opacity:.45; pointer-events:none }
.ic-story{
  background:linear-gradient(135deg,rgba(247,119,55,.72),rgba(193,53,132,.68) 45%,rgba(88,81,219,.7));
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.ic-story:hover{ background:linear-gradient(135deg,rgba(247,119,55,.9),rgba(193,53,132,.86) 45%,rgba(88,81,219,.9)) }
.ic-story:not(:first-child){ margin-left:auto }

/* ── single-mix page (<slug>.html) ── */
body.single .wrap{max-width:560px}
body.single #list{grid-template-columns:1fr; gap:0}
body.single .mix{padding:18px 18px 16px; border-radius:16px; position:relative}
body.single .mix h2{font-size:20px; margin-bottom:5px}
body.single .meta{font-size:12px; margin-bottom:14px}
body.single .waveform-wrap{height:64px}
body.single summary,
body.single .tl{font-size:12px}
body.single #foot-static{line-height:2}

/* ── 一覧カード上部 → 個別ページへのリンク ── */
.card-link{display:block; color:inherit; text-decoration:none}
.card-link .cover{cursor:pointer; transition:filter .18s, transform .18s}
.card-link h2{transition:color .15s}
.card-link:hover .cover{filter:brightness(1.08)}
.card-link:hover h2{color:var(--accent)}