@font-face {
  font-family: gohu;
  src: url("/fonts/gohu-subset.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: dark;
  --bg: #0b0b16;
  --panel-bg: #0d0d1c;
  --panel-border: #232344;
  --panel-fg: #d6d9ee;
  --panel-dim: #8a90b8;
  --accent: #93ffd7;
  --accent-hover: #c7ffe9;
  --accent-hover-bg: #153329;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #191970;
  /* JS 平铺的抖动背景在 HiDPI 下会被浏览器平滑放大而偏色，
     与 #artwork 的 pixelated 渲染保持一致 */
  image-rendering: pixelated;
  font-family: "Courier New", monospace;
}

/* ---- layout: wheel left (3/5), reading column right (2/5) ---- */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* ---- wheel ---- */

.wheel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: size;
}

.wheel__inner {
  position: relative;
  width: min(58vw, calc(96vh * 320 / 197));
  width: min(96cqw, calc(96cqh * 320 / 197));
}

#artwork {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 197;
  cursor: grab;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  user-select: none;
}

#artwork.is-dragging {
  cursor: grabbing;
}

/* ---- volume labels tracking the wheel ---- */

.text-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  container-type: size;
}

.text-carousel__item {
  position: absolute;
  left: 58%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%) scale(var(--scale, 1));
  transform-origin: left center;
  color: var(--item-color, #ffffff);
  font-family: "Old English Text MT", "UnifrakturCook", "UnifrakturMaguntia",
    "Blackletter", "Times New Roman", serif;
  font-size: clamp(1.1rem, 5.5vw, 7rem);
  font-size: clamp(1.1rem, 10cqw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.03em;
  opacity: var(--opacity, 1);
  text-shadow:
    0 0 0.12em currentColor,
    0.06em 0.06em 0 #050511;
  transition:
    opacity 80ms linear,
    transform 80ms linear;
  white-space: nowrap;
  will-change: top, opacity, transform;
  pointer-events: none;
}

.text-carousel__item.is-visible {
  pointer-events: auto;
  cursor: pointer;
}

.text-carousel__item.is-current {
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.04em;
}

/* ---- reading column ---- */

.content-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--panel-border);
  container-type: inline-size;
  z-index: 2;
}

.content-panel__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--panel-border);
  color: var(--panel-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.content-panel__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.content-panel__back {
  flex: none;
  margin: 0;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--panel-dim);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
}

.content-panel__back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.content-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.6rem 0.7rem 1rem;
  color: var(--panel-fg);
  font-family: gohu, "Courier New", monospace;
  font-size: clamp(9px, 2.3vw, 14px);
  font-size: clamp(9px, 1.9cqw, 14px);
  line-height: 1.1;
  scrollbar-width: thin;
  scrollbar-color: #3a3d5c transparent;
}

.content-panel__body pre,
.content-panel__body .phile-header-meta,
.content-panel__body .phile-body-pre,
.content-panel__body .phile-footer-pre {
  white-space: pre;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.content-panel__body a {
  color: var(--accent);
  text-decoration: none;
}

.content-panel__body a:hover {
  color: var(--accent-hover);
  background: var(--accent-hover-bg);
}

.content-panel__body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.content-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.content-panel__body::-webkit-scrollbar-thumb {
  background: #3a3d5c;
}

/* idle state shown before any volume is opened */

.content-panel__idle {
  flex: 1;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  text-align: center;
  color: var(--panel-dim);
}

.content-panel__idle-title {
  margin: 0;
  color: var(--panel-fg);
  font-size: 14px;
  letter-spacing: 0.35em;
}

.content-panel__idle-hint {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ---- ansi ink colours ---- */

.ansi-black            { color: #000000; }
.ansi-red              { color: #aa0000; }
.ansi-green            { color: #00aa00; }
.ansi-yellow           { color: #aa5500; }
.ansi-blue             { color: #0000aa; }
.ansi-magenta          { color: #aa00aa; }
.ansi-cyan             { color: #00aaaa; }
.ansi-white            { color: #aaaaaa; }
.ansi-bright-black     { color: #555555; }
.ansi-bright-red       { color: #ff5555; }
.ansi-bright-green     { color: #55ff55; }
.ansi-bright-yellow    { color: #ffff55; }
.ansi-bright-blue      { color: #5555ff; }
.ansi-bright-magenta   { color: #ff55ff; }
.ansi-bright-cyan      { color: #55ffff; }
.ansi-bright-white      { color: #ffffff; }

/* ---- in-article images ---- */

.content-panel__body .phile-media {
  margin: 0.3rem 0;
  text-align: center;
  white-space: normal;
}

.content-panel__body .phile-media img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.content-panel__body .phile-image-trigger {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---- narrow screens: wheel on top, reading column below ---- */

@media (max-width: 760px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }

  .content-panel {
    border-left: 0;
    border-top: 1px solid var(--panel-border);
  }
}

#status {
  position: fixed;
  inset: auto 0 1rem;
  margin: 0;
  color: #b9bbd2;
  font: 12px/1.4 monospace;
  text-align: center;
  z-index: 10;
}

#status:empty {
  display: none;
}