/* 副業クエスト サウンドトラック — 見た目仕様書_v1 に準拠（ゲーム本体と同じ濃紺・金・DotGothic16） */
:root{
  --navy:#0B1021; --panel:#060A1C; --gold:#E8C260; --white:#FFFFFF; --gray:#8A93A6;
  --track:#5A6786; --hl:#262529; --line:#1F2A4A;
  --font:"DotGothic16","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--navy);-webkit-text-size-adjust:100%;}
body{background:var(--navy);color:var(--white);font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit;touch-action:manipulation;}
button:focus-visible,.m-seek:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
ul{list-style:none;}
svg{display:block;fill:currentColor;}

/* 列：スマホ縦がそのまま真ん中に出る（PC専用レイアウトは作らない） */
#app{max-width:420px;margin:0 auto;padding:24px 16px calc(144px + env(safe-area-inset-bottom,0px));}
.loading{font-size:16px;line-height:24px;color:var(--gray);padding-top:24px;}
.err-box{font-size:16px;line-height:24px;color:var(--gold);padding-top:24px;}

/* ヘッダー */
.cover{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 50%;border-radius:8px;background:var(--panel);}
h1{font-size:28px;line-height:36px;font-weight:400;margin-top:16px;min-height:72px;}
.meta{font-size:16px;line-height:24px;color:var(--gray);margin-top:8px;}
.btn-main{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;height:56px;margin-top:16px;
  border-radius:8px;background:var(--gold);color:var(--navy);font-size:20px;line-height:24px;text-align:center;
  transition:filter .1s;}
.btn-main svg{width:20px;height:20px;}
.note{font-size:14px;line-height:24px;color:var(--gray);margin-top:8px;}

/* 曲リスト */
.sec{font-size:16px;line-height:24px;font-weight:400;color:var(--gold);margin-top:32px;margin-bottom:8px;}
.list li{position:relative;height:72px;}
.list li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);pointer-events:none;z-index:2;}
.row{position:relative;display:flex;align-items:center;width:100%;height:72px;padding:8px 0;transition:filter .1s;}
.jk{position:relative;flex:none;width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--panel);}
.jk img{display:block;width:56px;height:56px;object-fit:cover;}
.tx{flex:1;min-width:0;margin-left:16px;}
.ti{font-size:20px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc{font-size:16px;line-height:24px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tm{flex:none;width:40px;margin-left:8px;text-align:right;font-size:14px;line-height:20px;color:var(--gray);}
.tm span{display:block;}
.tm .lp{display:flex;justify-content:flex-end;}
.tm .lp svg{width:14px;height:14px;}

.row.playing{background:var(--hl);margin:0 -16px;width:calc(100% + 32px);padding:8px 16px;box-shadow:inset 4px 0 0 var(--gold);}
.row.playing .ti{color:var(--gold);}
.row.playing .tm span{color:var(--gold);}
.row.playing .tm .lp{color:var(--gold);}
.row.soon{cursor:default;}
.row.soon .jk img{opacity:.45;}
.row.soon .ti{color:var(--gray);}

.eq{position:absolute;right:4px;bottom:4px;display:none;gap:2px;align-items:flex-end;height:16px;
  background:rgba(11,16,33,.8);padding:2px 3px;border-radius:2px;}
.row.playing .eq{display:flex;}
.eq i{display:block;width:3px;background:var(--gold);}
.eq i:nth-child(1){height:10px;}.eq i:nth-child(2){height:14px;}.eq i:nth-child(3){height:7px;}
html[data-state="playing"] .row.playing .eq i{animation:eqmove .8s ease-in-out infinite;transform-origin:bottom;}
html[data-state="playing"] .row.playing .eq i:nth-child(2){animation-delay:-.27s;}
html[data-state="playing"] .row.playing .eq i:nth-child(3){animation-delay:-.53s;}
@keyframes eqmove{0%,100%{transform:scaleY(1);}50%{transform:scaleY(.45);}}
@media (prefers-reduced-motion:reduce){html[data-state="playing"] .row.playing .eq i{animation:none;}}

/* フッター */
.foot{margin-top:32px;}
.f-note{display:flex;align-items:center;gap:8px;font-size:14px;line-height:24px;color:var(--gray);}
.f-note svg{width:14px;height:14px;flex:none;}
.f-link{display:flex;align-items:center;height:44px;margin-top:8px;font-size:16px;color:var(--gold);text-decoration:none;}

/* 押した感（明るさを下げるだけ。揺れ・拡大はしない） */
.btn-main:active,.row:not(.soon):active,.m-play:active,.m-next:active,.m-retry:active{filter:brightness(.8);}

/* ミニプレイヤー（再生を始めたら画面下に固定） */
.mini{position:fixed;left:50%;transform:translateX(-50%);width:min(calc(100% - 16px),404px);
  bottom:calc(8px + env(safe-area-inset-bottom,0px));height:120px;z-index:10;
  border:2px solid var(--white);border-radius:8px;background:#060A1C;
  box-shadow:0 0 0 2px var(--navy),0 4px 18px rgba(0,0,0,.6);padding:16px 16px 0;}
.mini[hidden]{display:none;}
.m-top{display:flex;align-items:center;height:56px;}
.m-jk{flex:none;width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--navy);}
.m-tx{flex:1;min-width:0;margin-left:16px;margin-right:0;}
.m-ti{font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-sc{font-size:14px;line-height:20px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.m-play{flex:none;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--gold);color:var(--navy);transition:filter .1s;}
.m-play svg{width:24px;height:24px;}
.m-next{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:4px;color:var(--white);}
.m-next svg{width:20px;height:20px;}
.m-retry{flex:none;margin-left:8px;height:44px;padding:0 16px;border:2px solid var(--gold);border-radius:8px;color:var(--gold);font-size:16px;white-space:nowrap;}
.m-retry[hidden],.m-play[hidden],.m-next[hidden],.m-bar[hidden]{display:none;}
.m-bar{display:flex;align-items:center;gap:8px;height:48px;}
.m-t{font-size:14px;line-height:20px;color:var(--gray);width:40px;flex:none;}
.m-t.r{text-align:right;}
.m-seek{flex:1;min-width:0;height:48px;display:flex;align-items:center;cursor:pointer;touch-action:none;}
.track{width:100%;height:4px;border-radius:2px;background:var(--track);overflow:hidden;}
.fill{width:0;height:4px;border-radius:2px;background:var(--gold);}
.mini[data-state="error"]{height:96px;}
.mini[data-state="error"] .m-bar{display:none;}
.mini[data-state="error"] .m-play,.mini[data-state="error"] .m-next{display:none;}
.mini[data-state="error"] .m-retry{display:block;padding:0 8px;}
.mini[data-state="error"] .m-tx{margin-right:0;}
/* 幅が狭い端末では、失敗時だけジャケットを外して「再生できませんでした」を1行で読めるようにする */
@media (max-width:374px){.mini[data-state="error"] .m-jk{display:none;}.mini[data-state="error"] .m-tx{margin-left:0;}}

/* 幅別の詰め（検収報告_イロミ 3節）。390以上は仕様どおり、それ未満は曲名・場面が「…」にならないよう詰める */
@media (max-width:389px){
  .m-jk{width:40px;height:40px;}
  .m-tx{margin-left:8px;}
  .m-play{width:48px;height:48px;}
  .m-next{margin-left:0;}
}
@media (max-width:359px){
  .m-jk{display:none;}
  .m-tx{margin-left:0;}
  .jk{width:48px;height:48px;}
  .jk img{width:48px;height:48px;}
  .ti{font-size:16px;line-height:24px;}
  .sc{font-size:14px;line-height:20px;}
}