@charset "UTF-8";
/* ============================================================
   魔王魂 リニューアル - 共通スタイル / デザイントークン
   デザインリファレンス（.dc.html）の値をCSS変数化して忠実に再現
   ============================================================ */

/* ---------- リセット ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-page);
  color:var(--fg);
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:#e5484d;text-decoration:none}
a:hover{color:#ff5a60}
img{max-width:100%;display:block}
input,button{font-family:inherit}
.ff-arch{font-family:'Archivo',system-ui,sans-serif}

/* ============================================================
   デザイントークン
   ============================================================ */
:root,
html[data-theme="dark"]{
  --bg-page:#0e0c12;
  --bg-side:#131019;
  --bg-card:#17131f;
  --bg-input:#1d1927;
  --fg:#f2eff7;
  --fg-mid:#9b93ab;
  --fg-dim:#6d6580;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --hover-bg:rgba(255,255,255,.05);
  --player-bg:rgba(19,16,25,.94);
  --bar-off:rgba(255,255,255,.18);
  --bar-dim:rgba(229,72,77,.3);
  --btn-bg:rgba(255,255,255,.08);
  --btn-fg:#f2eff7;
  --dl-bg:rgba(255,255,255,.1);
  --dl-fg:#f2eff7;
  --chip-bg:#1d1927;
  --cat-bg-a:linear-gradient(150deg,#3d1220,#1d1927);
  --cat-bg-b:linear-gradient(150deg,#241536,#1d1927);
  --cat-bg-c:linear-gradient(150deg,#12233a,#1d1927);
  --genre-tag-fg:#ff8a8e;
  --scene-tag-fg:#c9a8e8;
  --karaoke-fg:#c9a8e8;
  --weird-fg:#c9a8e8;
  --ok-bg:#17131f;
  --ok-border:rgba(255,255,255,.08);
  --bar-bg:rgba(14,12,18,.82);   /* モバイル上下バー */
  --mini-bg:rgba(29,25,39,.92);  /* モバイルミニプレイヤー */
  --se-bar-off:rgba(74,144,217,.55);
}
html[data-theme="light"]{
  --bg-page:#faf8f5;
  --bg-side:#f3efe9;
  --bg-card:#ffffff;
  --bg-input:#f0ece6;
  --fg:#17141a;
  --fg-mid:#6f6879;
  --fg-dim:#a09aa8;
  --line:rgba(23,20,26,.1);
  --line-strong:rgba(23,20,26,.28);
  --hover-bg:rgba(23,20,26,.045);
  --player-bg:rgba(255,255,255,.94);
  --bar-off:rgba(23,20,26,.16);
  --bar-dim:rgba(229,72,77,.3);
  --btn-bg:#17141a;
  --btn-fg:#fff;
  --dl-bg:#17141a;
  --dl-fg:#fff;
  --chip-bg:#f0ece6;
  --cat-bg-a:linear-gradient(150deg,#fdf0ef,#fff);
  --cat-bg-b:linear-gradient(150deg,#f5effc,#fff);
  --cat-bg-c:linear-gradient(150deg,#edf4fc,#fff);
  --genre-tag-fg:#b32b3f;
  --scene-tag-fg:#6d3a99;
  --karaoke-fg:#6d3a99;
  --weird-fg:#6d3a99;
  --ok-bg:#ffffff;
  --ok-border:rgba(23,20,26,.1);
  --bar-bg:rgba(250,248,245,.82);
  --mini-bg:rgba(255,255,255,.94);
  --se-bar-off:rgba(74,144,217,.5);
}

/* アクセント（テーマ非依存）は直値。参考:
   赤 #e5484d / 赤hover #ff5a60 / 赤(light文字) #b32b3f
   紫 #8e4ec6 / 青 #4a90d9 / 緑 #3fa66b
   ヒーローグラデ linear-gradient(120deg,#2a1030 0%,#3d1220 55%,#1a0e24 100%) */

/* ---------- ロゴ（maskで任意色に着色） ---------- */
.logo-mask{
  -webkit-mask:url('/assets/img/maou-logo.svg') center/contain no-repeat;
  mask:url('/assets/img/maou-logo.svg') center/contain no-repeat;
}

/* ============================================================
   レイアウト
   ============================================================ */
.page{min-width:1280px;background:var(--bg-page);min-height:100vh;display:flex;flex-direction:column}
.shell{display:grid;grid-template-columns:248px 1fr;flex:1}
.main{display:flex;flex-direction:column;min-width:0}

/* ============================================================
   ティッカー
   ============================================================ */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker{overflow:hidden;background:#e5484d;padding:8px 0}
.ticker__track{display:flex;width:max-content;animation:mq 24s linear infinite}
.ticker__group{display:flex;gap:36px;padding-right:36px;font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:#0e0c12;white-space:nowrap}

/* ============================================================
   サイドバー
   ============================================================ */
.side{background:var(--bg-side);border-right:1px solid var(--line);padding:26px 22px;display:flex;flex-direction:column;gap:26px}
.side__brand{display:flex;align-items:center;gap:12px}
.side__logo{width:34px;height:36px;background:#e5484d}
.side__name{font-weight:900;font-size:20px;color:var(--fg);letter-spacing:.04em}
.side__sub{font-family:'Archivo',sans-serif;font-weight:600;font-size:8.5px;letter-spacing:.22em;color:var(--fg-dim)}
.side__nav{display:flex;flex-direction:column;gap:2px}
.nav-item{padding:10px 12px;border-radius:8px;color:var(--fg-mid);font-weight:500;font-size:14px;cursor:pointer;transition:background .15s,color .15s}
.nav-item:hover{background:var(--hover-bg);color:var(--fg)}
.nav-item.is-active{background:rgba(229,72,77,.14);color:var(--fg);font-weight:700}
.side__more{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:2px}
.side__more-label{font-family:'Archivo',sans-serif;font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--fg-dim);padding:0 12px 8px}
.more-item{padding:9px 12px;border-radius:8px;color:var(--fg-mid);font-size:13.5px;cursor:pointer;transition:background .15s,color .15s}
.more-item:hover{background:var(--hover-bg);color:var(--fg)}
.more-item.is-active{background:rgba(229,72,77,.14);color:var(--fg);font-weight:700}
.side__promo{margin-top:auto;background:linear-gradient(150deg,rgba(229,72,77,.16),rgba(142,78,198,.14));border:1px solid rgba(229,72,77,.35);border-radius:12px;padding:16px}
.side__promo-t{font-weight:900;font-size:14px;color:var(--fg);line-height:1.4}
.side__promo-d{font-size:11.5px;color:var(--fg-mid);line-height:1.6;margin-top:6px}

/* ============================================================
   トップバー
   ============================================================ */
.topbar{display:flex;align-items:center;gap:16px;padding:16px 32px;border-bottom:1px solid var(--line)}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--bg-input);border:1px solid var(--line);border-radius:99px;padding:11px 18px;color:var(--fg-dim);font-size:13.5px}
.search--active{max-width:560px;border:1.5px solid #e5484d;color:var(--fg)}
.search--active i{color:#e5484d}
.search__input{border:none;background:none;outline:none;color:var(--fg);font-size:13.5px;font-family:inherit;flex:1;width:100%}
.search__input::placeholder{color:var(--fg-dim)}
.topbar__actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:99px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--fg-mid);font-size:15px;cursor:pointer;transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:#e5484d;color:var(--fg)}
.pill-ghost{padding:9px 18px;border-radius:99px;border:1px solid var(--line);color:var(--fg-mid);font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .15s,color .15s}
.pill-ghost:hover{border-color:#e5484d;color:var(--fg)}
.pill-red{padding:9px 18px;border-radius:99px;background:#e5484d;color:#fff;font-size:12.5px;font-weight:900;cursor:pointer;transition:background .15s}
.pill-red:hover{background:#ff5a60}

/* ============================================================
   セクション見出し / パンくず
   ============================================================ */
.sec-head{display:flex;align-items:baseline;gap:12px}
.sec-title{font-size:18px;font-weight:900;color:var(--fg)}
.sec-en{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--fg-dim)}
.sec-more{margin-left:auto;font-size:12px;color:var(--fg-mid);cursor:pointer;transition:color .15s}
.sec-more:hover{color:#e5484d}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--fg-dim)}
.breadcrumb a{color:var(--fg-dim)}
.breadcrumb a:hover{color:#e5484d}
.breadcrumb .cur{color:var(--fg-mid)}

/* ============================================================
   チップ / ボタン
   ============================================================ */
.chip{padding:8px 18px;border-radius:99px;background:var(--bg-input);border:1px solid var(--line);color:var(--fg-mid);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:#e5484d;color:var(--fg);background:rgba(229,72,77,.12)}
.chip.is-active{background:rgba(229,72,77,.16);border-color:rgba(229,72,77,.6);color:#e5484d;font-weight:900}
.chip--sm{padding:7px 16px;font-size:12.5px}
.chip--purple:hover{border-color:#8e4ec6;color:var(--fg);background:rgba(142,78,198,.12)}
.chip--purple.is-active{background:rgba(142,78,198,.16);border-color:rgba(142,78,198,.7);color:var(--scene-tag-fg)}
.chip--blue:hover{border-color:#4a90d9}
.chip--blue.is-active{background:rgba(74,144,217,.16);border-color:rgba(74,144,217,.6);color:#4a90d9;font-weight:900}
.sort-chip{padding:7px 16px;border-radius:8px;background:var(--chip-bg);border:1px solid var(--line);color:var(--fg-mid);font-size:12px;font-weight:700;cursor:pointer;transition:border-color .15s}
.sort-chip:hover{border-color:#e5484d}
.sort-chip.is-active{background:rgba(229,72,77,.16);border-color:rgba(229,72,77,.6);color:#e5484d}

.btn-red{display:inline-flex;align-items:center;gap:10px;background:#e5484d;color:#fff;font-weight:900;font-size:15px;padding:14px 30px;border-radius:99px;cursor:pointer;transition:background .15s,transform .15s;border:none}
.btn-red:hover{background:#ff5a60;transform:scale(1.03);color:#fff}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line-strong);color:var(--fg);font-weight:700;font-size:14px;padding:13px 26px;border-radius:99px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.btn-ghost:hover{border-color:#e5484d;color:#e5484d}

/* ============================================================
   カード
   ============================================================ */
.card{border-radius:14px;background:var(--bg-card);border:1px solid var(--line)}
.card--hover{transition:border-color .15s,transform .15s}
.card--hover:hover{border-color:rgba(229,72,77,.5);transform:translateY(-2px)}

/* ============================================================
   波形
   ============================================================ */
.wave{display:flex;align-items:center;gap:2px;overflow:hidden}
.wave__bar{border-radius:2px;background:var(--bar-off)}
.wave--flex .wave__bar{flex:1;min-width:2px}
.wave--fixed .wave__bar{width:4px}

/* ============================================================
   トラック行（一覧共通）
   ============================================================ */
.track-rank{font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;color:var(--fg-dim)}
.play-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;border:1px solid var(--line);transition:transform .15s}
.play-btn:hover{transform:scale(1.08)}
.play-btn.is-playing{background:#e5484d;color:#fff}
.track-art{width:46px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line)}
.track-title{font-size:15px;font-weight:700;color:var(--fg);transition:color .15s}
.track-title:hover{color:#e5484d;text-decoration:underline}
.track-sub{font-size:11.5px;color:var(--fg-mid);margin-top:2px}
.mini-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--fg-mid);cursor:pointer;transition:border-color .15s,color .15s}
.mini-btn:hover{border-color:#e5484d;color:#e5484d}
.dl-btn{height:34px;padding:0 14px;border-radius:8px;background:var(--dl-bg);color:var(--dl-fg);display:flex;align-items:center;gap:7px;font-size:12px;font-weight:900;cursor:pointer;transition:background .15s,color .15s;border:none}
.dl-btn:hover{background:#e5484d;color:#fff}
.karaoke-badge{padding:2px 8px;border-radius:5px;background:rgba(142,78,198,.16);border:1px solid rgba(142,78,198,.4);color:var(--karaoke-fg);font-size:9.5px;font-weight:700}

/* リストヘッダ */
.list-head{font-family:'Archivo',sans-serif;font-size:9px;font-weight:700;letter-spacing:.18em;color:var(--fg-dim)}

/* タグ（ジャンル/シーン色分け） */
.tag-genre{padding:3px 10px;border-radius:99px;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.35);color:var(--genre-tag-fg);font-size:10px;font-weight:700}
.tag-scene{padding:3px 10px;border-radius:99px;background:rgba(142,78,198,.12);border:1px solid rgba(142,78,198,.4);color:var(--scene-tag-fg);font-size:10px;font-weight:700}

/* ============================================================
   ページネーション
   ============================================================ */
.pager{display:flex;justify-content:center;gap:8px}
.pager a,.pager span{min-width:38px;height:38px;padding:0 8px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--fg-mid);font-family:'Archivo',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:border-color .15s}
.pager a:hover{border-color:#e5484d}
.pager .is-active{background:#e5484d;border-color:#e5484d;color:#fff}

/* ============================================================
   下部固定プレイヤー
   ============================================================ */
.player{position:sticky;bottom:0;height:84px;background:var(--player-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-strong);display:grid;grid-template-columns:300px 1fr 300px;align-items:center;padding:0 28px;gap:24px;z-index:40}
.player__now{display:flex;align-items:center;gap:14px;min-width:0}
.player__art{width:48px;height:48px;flex:none;border-radius:10px;background:linear-gradient(140deg,#e5484d,#8e4ec6);display:flex;align-items:center;justify-content:center}
.player__art .logo-mask{width:24px;height:25px;background:rgba(255,255,255,.9)}
.player__title{font-size:14px;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__cat{font-size:11px;color:var(--fg-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__center{display:flex;flex-direction:column;align-items:center;gap:8px}
.player__controls{display:flex;align-items:center;gap:22px}
.ctrl{color:var(--fg-mid);font-size:14px;cursor:pointer;transition:color .15s;background:none;border:none}
.ctrl:hover{color:#e5484d}
.ctrl-play{width:38px;height:38px;border-radius:50%;background:var(--fg);color:var(--bg-page);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;border:none}
.ctrl-play:hover{transform:scale(1.08)}
.player__bar{width:100%;max-width:560px;height:4px;border-radius:2px;background:var(--line)}
.player__prog{height:4px;border-radius:2px;background:#e5484d;width:0%}
.player__actions{display:flex;justify-content:flex-end;gap:10px;align-items:center}
.player__share{width:38px;height:38px;border-radius:99px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--fg-mid);cursor:pointer;transition:border-color .15s,color .15s;background:none}
.player__share:hover{border-color:#e5484d;color:#e5484d}
.player__dl{padding:9px 20px;border-radius:99px;background:#e5484d;color:#fff;font-size:12.5px;font-weight:900;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s;border:none}
.player__dl:hover{background:#ff5a60}

/* ============================================================
   トースト
   ============================================================ */
.toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%);z-index:50;background:#e5484d;color:#fff;font-size:13px;font-weight:700;padding:12px 24px;border-radius:99px;box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.is-show{opacity:1}
.toast--low{bottom:40px}
.toast--blue{background:#4a90d9}

/* ============================================================
   フッター
   ============================================================ */
.foot{margin-top:36px;padding:26px 32px 110px;border-top:1px solid var(--line);display:flex;align-items:center;gap:24px}
.foot__logo{width:22px;height:23px;background:var(--fg-dim)}
.foot__copy{font-size:11.5px;color:var(--fg-dim)}
.foot__links{margin-left:auto;display:flex;gap:20px;font-size:11.5px;color:var(--fg-mid)}
.foot__links a,.foot__links span{color:var(--fg-mid);cursor:pointer;transition:color .15s}
.foot__links a:hover,.foot__links span:hover{color:#e5484d}

/* モバイル専用要素はデスクトップでは隠す */
.m-only{display:none}
.mobilenav{display:none}

/* ============================================================
   レスポンシブ（〜767px）
   サイドバー→下部タブバー / プレイヤー→フローティングミニ化
   ============================================================ */
/* 各ページの body 内 <style> より後勝ちさせるため html プレフィックスで詳細度を上げる */
@media (max-width:767px){
  html .page{min-width:0}
  html .shell{display:block}
  html .side{display:none}

  /* 下部タブバー */
  html .mobilenav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--bar-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-strong);padding:8px 0 10px}
  html .mobilenav__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg-mid);font-size:9.5px;font-weight:500}
  html .mobilenav__item i{font-size:17px}
  html .mobilenav__item.is-active{color:#e5484d;font-weight:900}

  /* 固定UIぶんの余白を確保 */
  html .main{padding-bottom:130px}

  /* ティッカー */
  html .ticker__group{font-size:9.5px;gap:22px;padding-right:22px}

  /* トップバー */
  html .topbar{padding:12px 16px;gap:10px}
  html .search{max-width:none}
  html .topbar__actions{gap:8px}
  html .topbar .pill-red{display:none}

  /* 横パディングの共通縮小 */
  html .pad-x{padding-left:16px !important;padding-right:16px !important}
  html .pagehead,html .filterbar,html .se-cats,html .search-body,html .sort-only{padding-left:16px;padding-right:16px}
  html .song-rows,html .bgm-rows,html .pager-wrap{padding-left:16px;padding-right:16px}
  html .rule-sec,html .rule-sec--gap,html .related-wrap,html .detail-grid{padding-left:16px;padding-right:16px}
  html .foot{padding-left:16px;padding-right:16px;padding-bottom:24px}
  html .pager-wrap,html .search-body,html .rule-bottom,html .related-wrap{padding-bottom:24px}

  /* トップ */
  html .hero{margin:16px;padding:24px 20px;flex-direction:column;align-items:stretch;gap:20px}
  html .hero__bg{width:220px;height:229px;right:-30px;top:-30px}
  html .hero__h1{font-size:30px;letter-spacing:0}
  html .hero__lead{font-size:13px}
  html .hero__stats{width:auto}
  html .hero__btns{flex-wrap:wrap;gap:10px}
  html .home-who{grid-template-columns:1fr 1fr;gap:10px}
  html .home-license{grid-template-columns:1fr 1fr;margin:16px}
  html .license-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  html .license-cell:nth-child(2n){border-right:none}
  html .license-cell:nth-last-child(-n+2){border-bottom:none}
  html .weird{margin:16px;flex-wrap:wrap}
  html .weird__cta{margin-left:0;width:100%;justify-content:center}
  html .home-cats{grid-template-columns:1fr}
  html .about{grid-template-columns:1fr;padding:22px 20px;gap:20px}
  html .morita{margin:16px;flex-wrap:wrap}
  html .morita__link{margin-left:0}

  /* ページ見出しを縦積みに */
  html .pagehead__row{flex-direction:column;align-items:flex-start;gap:6px}
  html .pagehead__h1{font-size:30px}
  html .pagehead__desc{padding-bottom:0}
  html .pagehead__count{margin-left:0}

  /* 一覧行を簡素化（波形・一部の列・共有/詳細ボタンを隠し、DLのみ残す） */
  html .pop-row{grid-template-columns:22px 40px 46px 1fr auto;gap:10px}
  html .pop-row .wave,html .pop-row>div:nth-child(6),html .pop-row>div:nth-child(7){display:none}
  html .song-listhead,html .bgm-listhead{display:none}
  html .song-row{grid-template-columns:40px 46px 1fr auto;gap:10px}
  html .song-row>.track-rank{display:none}
  html .song-row .wave,html .song-row>div:nth-child(6),html .song-row>div:nth-child(7),html .song-row>div:nth-child(8){display:none}
  html .bgm-row{grid-template-columns:40px 46px 1fr auto;gap:10px}
  html .bgm-row>.track-rank{display:none}
  html .bgm-row .wave,html .bgm-row>div:nth-child(6),html .bgm-row>div:nth-child(7),html .bgm-row>div:nth-child(8){display:none}
  html .res-row{grid-template-columns:38px 46px 1fr auto;gap:10px}
  html .res-row>div:nth-child(4),html .res-row>div:nth-child(5){display:none}
  /* 共有・詳細ボタンは隠してDLのみ（タイトル幅を確保） */
  html .pop-actions .mini-btn,html .song-actions .mini-btn,html .bgm-actions .mini-btn,html .res-actions .res-share{display:none}
  html .song-title-row{flex-wrap:wrap}

  /* フィルタ列は横スクロール */
  html .tabs,html .moodrow,html .se-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html .tabs::-webkit-scrollbar,html .moodrow::-webkit-scrollbar,html .se-cats::-webkit-scrollbar{display:none}
  html .chip,html .chip--sm,html .sort-chip,html .chip--tab{flex:none}
  html .moodrow .sortrow{margin-left:12px}
  html .bgm-filter{margin-left:16px;margin-right:16px}
  html .bgm-filter__row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  html .bgm-filter__label{width:auto}

  /* 曲詳細 */
  html .song-hero{flex-direction:column;align-items:flex-start;padding:24px 20px;gap:18px}
  html .song-hero__art{width:150px;height:150px}
  html .song-hero__art .logo-mask{width:64px;height:67px}
  html .song-hero__h1{font-size:30px}
  html .song-hero__meta{flex-wrap:wrap;gap:12px}
  html .song-hero__btns{flex-wrap:wrap}
  html .wave-player{margin:16px}
  html .detail-grid{grid-template-columns:1fr}
  html .related-grid{grid-template-columns:1fr 1fr}

  /* 検索 */
  html .tophit{grid-template-columns:1fr}
  html .tophit__art{max-width:220px}
  html .type-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  html .type-tab{flex:none}

  /* 効果音 */
  html .se-grid{grid-template-columns:1fr;padding-left:16px;padding-right:16px;padding-bottom:24px}

  /* ルール */
  html .ok-grid{grid-template-columns:1fr}
  html .ng-grid{grid-template-columns:1fr}
  html .credit-row{flex-direction:column;align-items:stretch}
  html .credit-copy{justify-content:center}

  /* プレイヤー → フローティングミニ化 */
  html .player{position:fixed;left:8px;right:8px;bottom:64px;height:60px;grid-template-columns:1fr auto;gap:12px;padding:0 12px;border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);background:var(--mini-bg)}
  html .player__center{gap:0}
  html .player__bar{display:none}
  html .player__controls{gap:0}
  html .player__controls .ctrl{display:none}
  html .player__actions{display:none}
}