/* THOMZY.com — panels.css : Neocities-style colored panels */

.panel {
  background: rgba(0, 0, 0, 0.55);
  border: 3px dotted var(--magenta);
  padding: 10px 12px;
  position: relative;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.6);
}
.panel-magenta { border-color: var(--magenta); }
.panel-cyan    { border-color: var(--cyan); }
.panel-yellow  { border-color: var(--yellow); }
.panel-violet  { border-color: var(--violet); }
.panel-crimson { border-color: var(--crimson); }

.panel-h {
  font-size: 16px;
  margin: -10px -12px 10px -12px;
  padding: 4px 10px;
  background: repeating-linear-gradient(
    -45deg,
    currentColor 0 6px,
    rgba(0,0,0,0.4) 6px 12px
  );
  color: #000;
  text-shadow: 1px 1px 0 #fff;
  border-bottom: 2px dashed currentColor;
  font-family: 'Comic Sans MS', sans-serif;
}
.panel-magenta > .panel-h { color: var(--magenta); }
.panel-cyan    > .panel-h { color: var(--cyan); }
.panel-yellow  > .panel-h { color: var(--yellow); }
.panel-violet  > .panel-h { color: var(--violet); }
.panel-crimson > .panel-h { color: var(--crimson); }

.panel-h::before { content: ""; }

/* === navigation list === */
.nav { list-style: none; margin: 0; padding: 0; font-family: var(--mono); }
.nav li { padding: 2px 0; }
.nav a { font-weight: bold; }
.nav a.active { color: var(--magenta); background: rgba(255,232,58,0.15); padding: 0 4px; box-shadow: inset 0 0 0 1px var(--magenta); }
.nav a.active::before { content: "★ "; }

/* === stats lines === */
.stat-line { margin: 2px 0; font-family: var(--mono); }
.stat-line strong { color: var(--yellow); }
.stat-playtime {
  display: inline-block;
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--cyan) !important;
  text-shadow: 0 0 8px var(--cyan), 0 0 2px #fff;
  font-variant-numeric: tabular-nums;
}
.tiny { font-size: 10px; opacity: 0.75; font-family: var(--mono); }

/* === blinkies wall === */
.blinkies { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.blinkies img { display: block; image-rendering: pixelated; }
.blinkies .placeholder {
  font-size: 10px; opacity: 0.6; font-family: var(--mono); padding: 6px;
  border: 1px dashed var(--yellow);
}

/* === track lists (queue + history) === */
.track-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  border: 1px inset rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.4);
}
.track-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  cursor: grab;
}
.track-list li:hover { background: rgba(255,62,201,0.15); }
.track-list li.dragging { opacity: 0.4; }
.track-list li.now { background: rgba(255,232,58,0.2); border-left: 3px solid var(--yellow); }
.track-list .thumb {
  width: 40px; height: 40px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--cyan);
}
.track-list .meta { flex: 1; min-width: 0; font-size: 11px; }
.track-list .meta .t { font-weight: bold; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-list .meta .a { color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-list .actions { display: flex; gap: 4px; flex-shrink: 0; }
.track-list .actions button {
  background: #000; color: var(--magenta); border: 1px outset var(--magenta);
  font-family: var(--mono); font-size: 10px; cursor: pointer; padding: 2px 4px;
}
.track-list .actions button:hover { background: var(--magenta); color: #000; }

.add-form { display: flex; gap: 6px; margin-bottom: 8px; align-items: stretch; }
.add-form input[type="url"] {
  flex: 1;
  background: #000; color: var(--yellow);
  border: 2px inset var(--cyan);
  font-family: var(--mono); padding: 6px 6px;
}

.add-btns {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.add-btns-row {
  display: flex;
  gap: 4px;
}
.add-btns-row .btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#btn-clear-queue {
  height: 28px;
  padding: 0 4px;
  font-size: 11px;
  align-self: stretch;
}

/* ===== local file upload UI ===== */

.upload-progress {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upload-progress .up-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name meta"
    "bar  bar"
    "status status";
  gap: 2px 8px;
  padding: 6px 8px;
  background: #000;
  border: 2px ridge var(--magenta);
}
.upload-progress .up-row.ok  { border-color: var(--cyan); }
.upload-progress .up-row.err { border-color: #ff4040; background: rgba(255,0,0,0.08); }
.upload-progress .up-name {
  grid-area: name;
  color: var(--yellow);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-progress .up-meta { grid-area: meta; color: var(--cyan); }
.upload-progress .up-bar {
  grid-area: bar;
  height: 6px;
  background: #111;
  border: 1px inset var(--cyan);
  overflow: hidden;
}
.upload-progress .up-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  transition: width 120ms linear;
}
.upload-progress .up-status { grid-area: status; color: var(--fg); }
.upload-progress .up-row.ok  .up-status { color: var(--cyan); }
.upload-progress .up-row.err .up-status { color: #ff8080; }