/* ===== 東方 Music Room — Web Edition ===== */
:root{
  --glow: 0 0 6px rgba(220,170,255,.9), 0 0 18px rgba(160,80,255,.45);
  --ink: #f2e6ff;
  --dim: #b892e0;
  --accent: #7ff7ff;
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
html,body{ height: 100%; }
body{
  font-family: "MS Gothic","SimSun",monospace;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 30% 15%, #4a1480 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, #2a0a5a 0%, transparent 55%),
    linear-gradient(160deg, #360a63 0%, #1a0433 55%, #0d0120 100%);
  overflow: hidden;
  user-select: none;
}
/* CRT 扫描线 */
body::after{
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
/* 背景:旋转下落的黑色多边形(正方形/三角形/五边形),致敬 PC-98 音乐室 */
#bgpoly,#appBgpoly{ inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#bgpoly{ position: fixed; }
#appBgpoly{ position: absolute; }
#bgpoly b,#appBgpoly b{
  position: absolute; top: 0;
  background: rgb(58, 18, 104);
  mix-blend-mode: lighten;
  opacity: 0;
  will-change: transform, opacity;
  animation-fill-mode: both;
}
#bgpoly b.tri,#appBgpoly b.tri{ clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
#bgpoly b.pent,#appBgpoly b.pent{ clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
#bgpoly b.dia,#appBgpoly b.dia{ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
@keyframes fallA{
  0%,14%{ opacity: 0; transform: translate3d(0,-64vh,0) rotate(0deg); }
  24%,84%{ opacity: var(--shape-alpha,.82); }
  100%{ opacity: 0; transform: translate3d(0,142vh,0) rotate(360deg); }
}
@keyframes fallB{
  0%,14%{ opacity: 0; transform: translate3d(0,-64vh,0) rotate(0deg); }
  24%,84%{ opacity: var(--shape-alpha,.82); }
  100%{ opacity: 0; transform: translate3d(0,142vh,0) rotate(-360deg); }
}

#app{
  position: fixed; inset: 0; z-index: 2; height: 100%;
  display: flex; flex-direction: column; padding: 14px 22px 10px;
  text-shadow: var(--glow);
  overflow: hidden;
}
body.app-windowed #app{
  inset: 0;
  width: min(1180px, calc(100vw - 72px));
  height: min(800px, calc(100vh - 72px));
  margin: auto;
  border: 1px solid rgba(235,190,255,.62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(58,8,102,.76), rgba(22,2,48,.78)),
    rgba(20,2,44,.74);
  box-shadow:
    0 26px 90px rgba(0,0,0,.42),
    0 0 34px rgba(190,95,255,.32),
    inset 0 0 38px rgba(80,10,130,.4);
}
body.app-windowed.app-placed #app{
  inset: auto;
  left: var(--app-left, 40px);
  top: var(--app-top, 32px);
  margin: 0;
}
body.app-maximized #app,
body.app-force-max #app{
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.app-maximized header,
body.app-maximized main,
body.app-maximized footer{
  max-width: 1220px;
}

/* ---- header ---- */
header{
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  align-self: center;
}
header .hrow{
  display: flex; align-items: baseline; gap: 14px;
  font-size: 22px; white-space: nowrap; overflow: hidden;
}
body.app-windowed header{ cursor: grab; }
body.app-windowed.dragging-window header{ cursor: grabbing; }
.series{
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.series i{ font-style: italic; font-family: "Times New Roman", serif; }
.nav{ cursor: pointer; color: var(--dim); flex-shrink: 0; }
.nav:hover{ color: #fff; }
.nowplaying{
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  font-size: 20px;
  color: #ffe9ff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.windowBtn{
  width: 32px;
  min-width: 32px;
  height: 24px;
  padding: 0;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
body.app-force-max .windowBtn{
  opacity: .38;
  pointer-events: none;
}

/* 模式切换 */
.modes{ display: inline-flex; margin-left: 22px; flex-shrink: 0; }
.modes button{
  font-size: 14px; padding: 3px 14px; border: 1px solid rgba(220,170,255,.5);
  background: rgba(60,15,110,.4); color: var(--dim);
}
.modes button:first-child{ border-radius: 4px 0 0 4px; }
.modes button:last-child{ border-radius: 0 4px 4px 0; border-left: none; }
.modes button.on{ background: rgba(170,90,255,.55); color: #fff; box-shadow: 0 0 12px rgba(170,90,255,.7); }

/* ---- main ---- */
main{
  flex: 1;
  display: flex;
  gap: 26px;
  min-height: 0;
  margin-top: 10px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  align-self: center;
}

#tracklist{ width: clamp(380px, 30vw, 400px); flex-shrink: 0; display: flex; flex-direction: column; font-size: 19px; }
#tracklist .up,#tracklist .down{ color: var(--dim); text-align: center; font-size: 14px; }
#songs{ list-style: none; flex: 1; overflow-y: auto; padding: 6px 0; }
#songs li{
  display: flex; gap: 12px; padding: 2px 6px; cursor: pointer; white-space: nowrap;
}
#songs li .no{ width: 52px; flex-shrink: 0; }
#songs li .name{ overflow: hidden; text-overflow: ellipsis; }
#songs li.sel{ background: rgba(190,130,255,.18); box-shadow: inset 0 0 0 1px rgba(220,170,255,.5); }
#songs li.playing .name{ color: var(--accent); }
#songs li:hover{ background: rgba(190,130,255,.12); }
#songs li.hdr{
  font-size: 13px; color: #ffcf5e; margin-top: 9px; padding: 2px 6px;
  border-bottom: 1px solid rgba(220,170,255,.25); text-shadow: 0 0 6px rgba(255,180,80,.6);
  cursor: default; pointer-events: none; white-space: normal; line-height: 1.35;
}
#songs li.hdr:first-child{ margin-top: 0; }
#songs li.hdr i{ font-style: italic; opacity: .85; }
#songs .star{ color: #ffd24a; margin-right: 4px; text-shadow: 0 0 6px rgba(255,200,60,.9); }
#songs li.orig .name{ color: #ffe9a8; }
#tracklist .hint{ font-size: 14px; line-height: 1.5; color: var(--dim); margin-top: 8px; }

/* ---- stage ---- */
#stage{ flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; }

#vizbox{
  position: relative; flex: 0 0 auto;
  width: 100%;
  max-width: 1080px;
  align-self: center;
  border: 1px solid rgba(220,170,255,.45);
  box-shadow: 0 0 24px rgba(140,60,255,.35), inset 0 0 40px rgba(40,0,80,.6);
  background: rgba(10,0,26,.55);
  overflow: hidden;
}
#viz{ display: block; width: 100%; }

.loadbtns{ display: flex; gap: 8px; margin-top: 10px; }
.loadbtns button{ flex: 1; padding: 5px 0; font-size: 14px; }
button{
  font: inherit; color: var(--ink); background: rgba(120,50,200,.35);
  border: 1px solid rgba(220,170,255,.6); padding: 6px 16px; cursor: pointer;
  text-shadow: var(--glow);
}
button:hover{ background: rgba(160,80,255,.5); }

#comment{
  flex-shrink: 0; border: 1px solid rgba(220,170,255,.35);
  background: rgba(20,2,44,.5); padding: 12px 18px; min-height: 108px;
  overflow: hidden;
}
#commentText{ font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
#commentMeta{ margin-top: 8px; font-size: 13px; color: var(--dim); text-align: right; overflow-wrap: anywhere; line-height: 1.35; }
#settingsBar{
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: -6px;
  font-size: 13px;
}
.settingGroup{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.settingGroup.hidden{ display: none; }
.settingLabel{ color: var(--dim); white-space: nowrap; }
.toneGroup{ align-items: flex-start; }
.toneGroup .settingLabel{ padding-top: 5px; }
.toneStack{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.segBtns{ display: inline-flex; align-items: stretch; }
.segBtns button{
  min-width: 62px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--dim);
  background: rgba(42,8,82,.5);
  border-color: rgba(220,170,255,.42);
}
.segBtns button:first-child{ border-radius: 4px 0 0 4px; }
.segBtns button:last-child{ border-radius: 0 4px 4px 0; }
.segBtns button + button{ border-left: none; }
.segBtns button.on{
  color: #fff;
  background: rgba(108,117,248,.72);
  box-shadow: 0 0 12px rgba(108,117,248,.55);
}
.midiDeviceGroup{
  display: flex;
  width: 100%;
  min-width: 0;
}
.midiDeviceGroup.hidden{ display: none; }
#systemMidiSelect{
  width: 100%;
  max-width: 232px;
  min-width: 186px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: rgba(20,2,44,.78);
  border: 1px solid rgba(220,170,255,.42);
  text-shadow: var(--glow);
  outline: none;
}
#systemMidiSelect:disabled{
  color: rgba(226,205,255,.58);
}
body.mode-mp3 #settingsBar{ justify-content: flex-start; }
body.mode-mp3 #settingsBar .settingGroup{ max-width: 100%; }
#creditNote{
  flex-shrink: 0;
  margin-top: -12px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(226,205,255,.72);
  text-align: left;
  overflow-wrap: anywhere;
}
#creditNote a{
  color: rgba(239,222,255,.88);
  text-decoration: none;
  border-bottom: 1px dotted rgba(239,222,255,.38);
}
#creditNote a:hover{
  color: #fff;
  border-bottom-color: rgba(255,255,255,.7);
}

/* ---- footer ---- */
footer{
  display: flex; align-items: center; gap: 14px; padding-top: 8px; flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  align-self: center;
}
footer button{ width: 46px; padding: 6px 0; }
#progress{
  flex: 1; height: 12px; border: 1px solid rgba(220,170,255,.5);
  background: rgba(20,0,40,.6); cursor: pointer; position: relative;
}
#bar{ height: 100%; width: 0%; background: linear-gradient(90deg,#8f4dff,#e0aaff); box-shadow: 0 0 10px #b56dff; }
#time{ font-size: 15px; white-space: nowrap; }
.vol{ font-size: 15px; display: flex; align-items: center; gap: 6px; }
.vol input{ width: 90px; accent-color: #b56dff; }

#orientHint{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
  color: #f8ecff;
  background:
    linear-gradient(180deg, rgba(36,4,72,.94), rgba(14,1,36,.97));
  text-shadow: var(--glow);
}
#orientHint div{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}
#orientHint strong{
  font-size: 24px;
  font-weight: 400;
}
#orientHint span{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(226,205,255,.82);
}
#orientFullBtn{
  align-self: center;
  min-width: 132px;
  margin-top: 6px;
  padding: 9px 18px;
  font-size: 15px;
  color: #fff4ff;
  border-color: rgba(190,120,255,.72);
  background: rgba(62,12,116,.82);
  box-shadow: 0 0 16px rgba(176,88,255,.28);
}
#orientFullBtn:active{
  transform: translateY(1px);
}
#mobileFullBtn{
  display: none;
  position: fixed;
  right: 10px;
  top: 8px;
  z-index: 180;
  min-width: 52px;
  padding: 4px 10px;
  font-size: 12px;
  background: rgba(44,10,88,.78);
  backdrop-filter: blur(6px);
}

/* drop overlay */
#dropmask{
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(40,5,80,.75); font-size: 30px; text-shadow: var(--glow);
  border: 3px dashed rgba(220,170,255,.7);
}
#dropmask.show{ display: flex; }

::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-thumb{ background: rgba(190,130,255,.4); }
::-webkit-scrollbar-track{ background: rgba(30,5,60,.4); }
::-webkit-scrollbar-button{ width: 0; height: 0; display: none; }

@media (max-width: 1439px), (max-height: 779px){
  body.app-windowed #app{
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 980px){
  header .hrow{ gap: 8px; font-size: 19px; }
  .modes{ margin-left: 8px; }
  .modes button{ padding-left: 10px; padding-right: 10px; }
  .nowplaying{ font-size: 17px; }
  main{ gap: 18px; }
  #tracklist{ width: clamp(300px, 38vw, 360px); font-size: 17px; }
  #songs li .no{ width: 46px; }
  #comment{ padding: 10px 14px; }
  #commentText{ font-size: 15px; }
  #settingsBar{ gap: 8px 10px; align-items: flex-start; }
  #creditNote{ margin-top: -10px; font-size: 11px; }
  .settingGroup{ flex-wrap: wrap; }
  .segBtns{ flex-wrap: wrap; }
  .segBtns button{ min-width: 54px; padding: 4px 8px; }
}

@media (max-height: 620px){
  #stage{ gap: 10px; }
  #comment{ min-height: 82px; padding: 8px 12px; }
  #commentText{ font-size: 14px; line-height: 1.35; }
  #commentMeta{ margin-top: 4px; font-size: 11px; line-height: 1.25; }
  #settingsBar{ margin-top: -4px; font-size: 12px; }
  #creditNote{ margin-top: -6px; font-size: 10px; line-height: 1.25; }
}

@media (max-width: 900px) and (orientation: landscape){
  #mobileFullBtn.show{ display: block; }
  #app{ padding: 8px 10px 6px; }
  header .hrow{ gap: 6px; font-size: 17px; }
  .modes{ margin-left: 4px; }
  .modes button{ font-size: 12px; padding: 2px 8px; }
  .nowplaying{ font-size: 15px; }
  .windowBtn{ width: 28px; min-width: 28px; height: 21px; font-size: 12px; }
  main{ gap: 12px; margin-top: 6px; }
  #tracklist{ width: clamp(210px, 32vw, 270px); font-size: 14px; }
  #tracklist .up,#tracklist .down{ font-size: 11px; }
  #songs{ padding: 3px 0; }
  #songs li{ gap: 7px; padding: 1px 4px; }
  #songs li .no{ width: 40px; }
  #tracklist .hint{ display: none; }
  #stage{ gap: 6px; }
  #vizbox{ max-width: none; }
  #comment{ min-height: 54px; padding: 6px 8px; }
  #commentText{
    max-height: 34px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.25;
  }
  #commentMeta{ display: none; }
  #settingsBar{ gap: 6px; margin-top: -2px; font-size: 11px; }
  .segBtns button{ min-width: 46px; padding: 3px 6px; font-size: 11px; }
  #creditNote{ display: none; }
  footer{ gap: 8px; padding-top: 5px; }
  footer button{ width: 36px; padding: 4px 0; }
  #time{ font-size: 12px; }
  .vol{ font-size: 12px; gap: 4px; }
  .vol input{ width: 58px; }
}

@media (max-width: 760px) and (orientation: portrait){
  #orientHint{ display: flex; }
  #app{ filter: blur(1.2px) brightness(.72); }
}