/* Base styles for the white noise music site */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Use a dark fractal backdrop with a subtle overlay to allow neon colours to stand out. */
/* Regular */
@font-face {
    font-family: 'Google Sans Code';
    src: url('fonts/Google_Sans_Code/GoogleSansCode-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

/* Regular */
@font-face {
    font-family: 'Syne';
    src: url('fonts/Syne/Syne-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

/*.background-layer {*/
/*    position: absolute;*/
/*    top: -50vh;       !* 顶部向上扩展 10% 视口高度 *!*/
/*    left: -10vw;      !* 左侧向左扩展 10% 视口宽度 *!*/
/*    width: 100vw;     !* 宽度比视口多出 20% *!*/
/*    height: 100vh;    !* 高度比视口多出 20% *!*/
/*    min-height: 100vh;*/
/*    !*background-image: url("imgs/covers/track1.jpg");*!*/
/*    background-repeat: repeat;*/
/*    background-size: clamp(20px,1vw,800px) 300px;*/
/*    background-position: top left;*/
/*    !*background-color: #000000;*!*/
/*    filter: url(#distortFilter); !* 滤镜只加在背景图上 *!*/
/*    z-index: -1;*/
/*    pointer-events: none;*/
/*    scale: 2;*/
/*}*/

/*.background-layer::before {*/
/*    content: '';*/
/*    position: fixed; !* 背景层不会滚动 *!*/
/*    top: 0;*/
/*    left: -20px;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    !*background-color: rgb(0, 0, 0);*!*/
/*    z-index: -1; !* 在背景图和内容之间 *!*/
/*    background-color: rgb(31, 31, 34);*/
/*    pointer-events: none;*/
/*    !*mix-blend-mode: saturation;*!*/
/*}*/
.my_body {
    align-items: center;
}
html, body {
    /*display: flex;*/
    flex-direction: column;
    justify-content: center;
    /*max-width: 2000px;*/
    overflow-x: hidden;
    /*overflow-y: hidden;*/
  margin: 0;
    height: 100%;
    padding: 0 clamp(1vw,2px, 2000px);
    font-family: 'Google Sans Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #af9d9d;
  /* Dark minimalist background similar to musicforprogramming.net */
  background-color: #1f1f22;
    background-color: rgb(31, 31, 34);
}

/* Dark overlay to tone down the busy background image */
/* Hide the overlay by default when using a plain background */
#background-overlay {
  display: none;
}
#datetime {
    z-index: 10;
    mix-blend-mode: difference;
    font-family: 'PixelMplus', cursive;
    scale: 0.8;
    color: white;
    position: fixed;
    top: -15px;
    right: -15px;
    padding: -20px -4px;
    font-weight: bold;
    font-size: 15px;
}
#datetime:hover {
    scale: 0.85;
    right: -10px;
}
.name {
    font-family: 'Playfair Display', serif;
    /*font-size: 20px*/
}
.titles {
    font-family: 'Playfair Display', serif;
    color: #fff0f0;
    z-index: 10;
    scale: 70%;
    position: fixed;
    top: -20px;
    left: 1px;
    mix-blend-mode: difference;
    padding: 0px 0px 0px 0px;
    margin: 0px;
}

.titles2 {
    z-index: 10;
    scale: 65%;
    position: fixed;
    top: 3px;
    left: 4.5vw;
    padding: 0px 0px 0px 0px;
    margin: 0px;

}
.explanation{
    font-family: 'Playfair Display', serif;
    position: relative;
    top: -25px;
    color: rgba(0, 255, 115, 0.65);
}

.sub_title {
    font-family: 'Playfair Display', serif;
    align-items: center;
    display: inline-flex;
    position: absolute;
    top: 35px;
    left: 40vw;
    text-decoration: none;
}
.sub_title a {
    box-shadow: 5px 5px 10px rgb(146, 220, 36);
    display: flex;
    scale: 1.4;
    margin: 0px 8vw 00px;
    z-index: 0;
    padding: 0px 2vw;
    background: #000;
    color: #00ff29;
    border: 1px solid rgba(241, 233, 160, 0.98);
    cursor: pointer;
    text-decoration: none;
}
.sub_title a:hover {
    scale: 1.6;
    text-decoration: underline;
}


.album-name {
    /*mix-blend-mode: difference;*/
    text-align: left;
    margin-top: 120px;
    margin-bottom: -15px;
    margin-left:  3%;
}

.album-name h1 {
    font-family: "Syne",monospace;
  font-size: 3.5rem;
  color: #f8f6f6;
    font-weight: 740;
    letter-spacing: 4px;
    word-spacing: 5px;
  /*text-shadow: 10px 5px 10px rgba(209, 235, 244, 0.71);*/
}

/* Introduction function block */
#introduction {
  width: 85vw;
  margin: 0 0 40px 3vw;
  padding: 10px;
    color: #d8d7d7;
  background: rgba(17, 17, 17, 0.77);
  border-left: 4px solid #00bfff;
  box-shadow: 10px 5px 30px rgba(0, 191, 255, 0.42);
}

#introduction pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #e0e0e0;
}

/* Main layout container */
#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}

/* Left sidebar containing album art, description and controls */
#left-column {
  flex: 1 1 28%;
  min-width: 250px;
  max-width: 350px;
  margin-right: 1.5%;
    margin-top: 20px;
  background: rgba(17, 17, 17, 0.57);
  padding: 15px;
  border: 2px solid #004d73;
    box-shadow: 0px -15px 0px rgba(255, 252, 245, 0.84);
  border-radius: 3px;
}

#left-column img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #00bfff;
  box-shadow: 0 0 6px #00bfff;
  margin-bottom: 10px;
}

#album-meta {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

#album-meta p {
  margin: 5px 0;
}

/* Stats displayed in acid green */
#stats {
  margin-bottom: 10px;
  font-size: 0.85rem;
}

#stats p {
  margin: 2px 0;
  color: #00ff90;
}

#now-playing {
  font-weight: bold;
  color: #ffc400;
  margin-bottom: 10px;
}

/* Player control buttons */
#controls button {
  background: transparent;
  border: 1px solid #00bfff;
  color: #d5d5fb;
  padding: 5px 8px;
  margin: 8px 5px;
  font-size: 0.8rem;
    font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

#controls button:hover {
  background: rgba(0, 33, 89, 0.96);
  color: #84ff00;
    /*border: 2px solid #00bfff;*/
  box-shadow: 0 -2px 1px #fbfbfb;
    cursor: pointer;
}

#controls span {
  margin: 0 5px;
  font-weight: 300;
  color: #d1ec8d;
}

/* Main content area (track list and album list) */
#main-content {
  flex: 1 1 68%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Track section styling */
#track-section, #album-section {
  /* Shared styling for both track and album sections */
  flex: 1 1 auto;
  background: rgba(12, 12, 12, 0.89);
  padding: 15px;
  /*margin-bottom: 20px;*/
    margin-top: 35px;
  border: 1px solid #004d73;
    box-shadow: 0px -5px 0px rgba(255, 252, 245, 0.82);
  border-radius: 3px;
}

/* Dedicated styling for album list column */
#album-section {
  flex-basis: 30%;
}

#track-section h2, #album-section h2 {
  margin-top: 0;
  color: #80f300;
  text-shadow: 20px 5px 5px #37ff00;
    font-weight: 500;
    letter-spacing: 3px;
}

/* List styles */
#track-list, #album-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

#track-list li, #album-links li {
  margin: 5px 0;
}

#track-list li a, #album-links li a {
  display: block;
  padding: 4px 6px;
  color: #fffafa;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}

#track-list li a:hover {
  color: #0a0a0a;
  background: #ffffff;
  border-color: #d10c0c;
}

#album-links li a:hover {
  color: #0a0a0a;
  background: #ffffff;
  border-color: #fffb00;
}

/* Override section sizes when in a row layout. The track list occupies more space than the album list */
#track-section {
  flex-basis: 65%;
  margin-right: 1.5%;
}

#album-section {
  flex-basis: 30%;
}

/* Index numbers inside track titles */
.track-index {
  /* The colour is overridden dynamically in script.js for each track */
  margin-right: 6px;
  font-weight: bold;
}

footer {
    position: relative;  /* 固定位置 */
    left: 0;          /* 左对齐 */
    bottom: 0;        /* 底部对齐 */
    width: 100%;      /* 宽度100% */
    text-align: center; /* 文字居中 */
    font-size: 16px;  /* 字体大小 */
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1); /* 阴影效果 */
    top: 30px;
    margin-bottom: -30px;
    color: white;
}

footer a {
  color: #8aff49;
  text-decoration: underline;
}

footer a:hover {
  color: #ffffff;
}

/* ASCII 频谱示波器外观 */
/* ASCII 频谱：行距/字距/字号可按需细调 */
.ascii-scope{
    white-space: pre;
    user-select: none;
    margin-top: -5px;
    font-family: 'Google Sans Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;          /* 总体大小 */
    line-height: 1.5;         /* 上下间距：越小越紧凑 */
    letter-spacing: 4px;      /* 左右间距：适当拉开便于阅读 */
    background: transparent;  /* 保持和左栏统一的黑底/透明 */
    /*font-weight: 700;*/
}
#ascii-scope-wrap{
    padding: 1px 4px 0 4px;
}

#seekbar{
    display:flex; align-items:center; gap:8px; margin:8px 5px 0;
}
#seek{
    -webkit-appearance:none; appearance:none;
    width:180px; height:0px; background:#0b2030; border:1px solid rgba(108, 139, 239, 0.83);
    border-radius:4px; outline:none;
}
#seek::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:12px; height:7px; border-radius:0%;
    background: rgba(113, 195, 36, 0.8); border:0; cursor:pointer;
}
#seek::-moz-range-thumb{
    width:1px; height:1px; border-radius:10%;
    background: #ffffff; border:0; cursor:pointer;
}
#time-cur,#time-dur{ font-variant-numeric: tabular-nums; color:#d1ec8d; }
/* 橙色链接按钮 */

/* 基础：固定尺寸避免布局抖动；用 transform 动画不改排布 */
.btn-orange{
    display:grid;
    text-align: center;
    /*margin-left:12px;*/
    align-items: revert;
    min-width: 110px;                /* 固定宽度防止文字切换引起抖动 */
    /*min-height: 32px;*/
    margin-top: -3px;
    margin-bottom: 11px;
    padding:4px 8px;
    /*border:1px solid rgb(0, 118, 255);*/
    text-underline-mode: bicubic;
    text-underline: rgb(0, 118, 255);
    color: rgb(255, 196, 0);
    font-size:14px;
    font-weight:100;

    letter-spacing:3px;
    background: rgba(34, 34, 34, 0.53);
    /*border-radius:4px;*/
    text-decoration:none;
    will-change: transform;
    line-height:1;
    transition: background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease, opacity .2s ease;
    /*box-shadow:0 0 8px rgba(255,140,0,.35);*/
}

/* hover 常态 */
.btn-orange:hover{
    background: rgb(255,196,0);
    color:#0a0a0a;
    box-shadow: 0 0 10px rgba(255,140,0,.55);
}

/* 警告态：变红 */
.btn-orange.warn{
    background:#ff3b30;
    border-color:#ff3b30;
    color:#0a0a0a;
    box-shadow: 0 0 12px rgba(255,59,48,.6);
}

/* 灰掉禁用态 */
.btn-orange.disabled{
    /*pointer-events:none;*/
    filter: grayscale(100%);
    opacity: .55;
    /*border-color:#666;*/
    color: #ffffff;
    background:#222;
    /*box-shadow:none;*/
}

/* 抖动动画（水平，避免布局变化） */
@keyframes btn-shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
.btn-orange.shake{ animation: btn-shake 0.5s ease; }

.album-date {
    /*display: revert;*/
    /*margin-left: auto;   !* 配合 flex 可推到最右 *!*/
    align-items: flex-end;  /* 靠右对齐 */
    /*letter-spacing: 10px;*/
    font-family: "Google Sans Code", Courier, monospace;
    font-size: 26px;
    /*scale: 1 0.6;*/
    font-weight: 300;
    /*color: #9a9a9a;         !* 灰色 *!*/
    font-style: italic;     /* 斜体 */
    display: inline-block;    /* 确保单独一行 */
    /*margin-top: 2px;        !* 上边距，避免太紧 *!*/
    /*margin-bottom: -9px;*/
}