:root {
    --white: #ffffff;
    --ink: #000000;
    --soft-ink: #4a4a4a;
    --silver: #c0c0c0;
    --shadow: #808080;
    --highlight: #dfdfdf;
    --navy: #000080;
    --moss: #7fa36b;
    --moss-tired: #a7ad98;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --old: Tahoma, Verdana, "Segoe UI", sans-serif;
    --times: "Times New Roman", Times, serif;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }
  html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--white); }
  body {
    height: 100%; margin: 0; background: var(--white); color: var(--ink);
    font-family: var(--serif); font-size: 17px; line-height: 1.55;
  }
  img { max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }
  [hidden] { display: none !important; }

  /* ---------- Home: split in half ---------- */
  .home { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
  .left { display: flex; min-height: 0; padding: 32px 32px 32px 36px; }
  .right {
    border-left: 1px solid var(--ink);
    padding: 32px 36px 32px 32px; display: flex; min-height: 0;
  }

  .reading { text-align: center; margin: 4px auto 0; max-width: 34ch; }
  .reading .title { font-size: 26px; line-height: 1.2; font-style: italic; margin: 0; }
  .reading .author { color: var(--soft-ink); margin: 4px 0 0; }
  .reading .progress { color: var(--soft-ink); font-size: 14px; margin: 2px 0 0; }

  /* Listening */
  .listening h2, .chess-block h2 { font-size: 15px; font-weight: 500; margin: 0 0 6px; }
  .listening p { margin: 0 0 8px; }
  .listening .stamp { color: var(--soft-ink); font-size: 13px; }

  .empty-note { color: var(--soft-ink); font-style: italic; }

  /* ---------- The old-fashioned scrollbox ---------- */
  .window {
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    background: var(--silver); padding: 3px;
    border: 1px solid; border-color: var(--highlight) var(--ink) var(--ink) var(--highlight);
    box-shadow: inset 1px 1px var(--white), inset -1px -1px var(--shadow);
  }
  .window-bar {
    font: 11px/1 var(--old); color: var(--ink);
    display: flex; justify-content: space-between; padding: 5px 4px 6px;
  }
  .scrollbox {
    flex: 1; min-height: 0; overflow-y: scroll; background: var(--white);
    border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--highlight);
    padding: 14px 16px;
  }
  @supports not selector(::-webkit-scrollbar) {
    .scrollbox { scrollbar-color: var(--silver) #e8e8e8; scrollbar-width: auto; }
  }
  .scrollbox::-webkit-scrollbar { width: 17px; }
  .scrollbox::-webkit-scrollbar-track {
    background-color: var(--white);
    background-image: conic-gradient(var(--silver) 25%, var(--white) 0 50%, var(--silver) 0 75%, var(--white) 0);
    background-size: 2px 2px;
  }
  .scrollbox::-webkit-scrollbar-thumb {
    background: var(--silver); min-height: 24px;
    border: 1px solid; border-color: var(--highlight) var(--ink) var(--ink) var(--highlight);
    box-shadow: inset 1px 1px var(--white), inset -1px -1px var(--shadow);
  }
  .scrollbox::-webkit-scrollbar-button:single-button {
    display: block; height: 17px; width: 17px;
    background-color: var(--silver); background-repeat: no-repeat; background-position: center;
    border: 1px solid; border-color: var(--highlight) var(--ink) var(--ink) var(--highlight);
    box-shadow: inset 1px 1px var(--white), inset -1px -1px var(--shadow);
  }
  .scrollbox::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 4h7L3.5 0z'/%3E%3C/svg%3E");
  }
  .scrollbox::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7L3.5 4z'/%3E%3C/svg%3E");
  }
  .scrollbox::-webkit-scrollbar-button:single-button:active {
    border-color: var(--shadow); box-shadow: none; background-position: calc(50% + 1px) calc(50% + 1px);
  }

  .shelf { list-style: none; margin: 0; padding: 0; }
  .shelf li { margin: 0 0 28px; }
  .shelf img { display: block; width: 100%; height: auto; }
  .shelf .cap { font: 14px/1.4 var(--times); margin: 6px 0 0; }
  .shelf .cap .date { color: var(--shadow); }
  .scrollbox .empty-note { font: italic 15px var(--times); }

  .owner-link {
    position: fixed; left: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    font: 12px var(--old); color: var(--soft-ink);
  }

  /* ---------- Classic buttons (shared) ---------- */
  .btn {
    font: 12px var(--old); color: var(--ink); background: var(--silver);
    padding: 5px 14px; cursor: pointer;
    border: 1px solid; border-color: var(--white) var(--ink) var(--ink) var(--white);
    box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--highlight);
  }
  .btn:active { border-color: var(--ink) var(--white) var(--white) var(--ink); box-shadow: inset 1px 1px var(--shadow); }
  .btn:disabled { color: var(--shadow); cursor: default; }
  .btn.small { padding: 2px 8px; font-size: 11px; }

  /* ---------- Mobile pop-up ---------- */
  .popup-scrim {
    position: fixed; inset: 0; z-index: 50; background: rgba(255,255,255,.85);
    display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  .popup { width: min(320px, 100%); background: var(--silver); padding: 3px;
    border: 1px solid; border-color: var(--highlight) var(--ink) var(--ink) var(--highlight);
    box-shadow: inset 1px 1px var(--white), inset -1px -1px var(--shadow), 4px 4px 0 rgba(0,0,0,.25); }
  .popup-title { background: var(--navy); color: var(--white); font: bold 12px var(--old); padding: 4px 6px; }
  .popup-body { padding: 22px 18px 18px; text-align: center; }
  .popup-body p { font: 22px/1.3 var(--serif); margin: 0 0 20px; }

  /* ---------- Dashboard ---------- */
  .dash { max-width: 680px; margin: 0 auto; padding: 48px 24px 96px; }
  .dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .dash h1 { font-size: 30px; font-weight: 400; margin: 0; }
  .dash h2 { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
  .dash section { border-top: 1px solid var(--ink); padding: 26px 0 30px; margin-top: 28px; }
  .dash .hint { color: var(--soft-ink); font-size: 14px; margin: 0 0 16px; }
  .field { display: block; margin: 0 0 14px; }
  .field span { display: block; font-size: 14px; margin-bottom: 3px; }
  .field input[type=text], .field input[type=password], .field input[type=url], .field input[type=number], .field textarea {
    width: 100%; font: 16px var(--serif); padding: 6px 8px; background: var(--white); color: var(--ink);
    border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow);
    box-shadow: inset 1px 1px var(--ink); border-radius: 0;
  }
  .field textarea { min-height: 70px; resize: vertical; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
  .field input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid var(--shadow); background: var(--white); }
  .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .msg { font-size: 14px; color: var(--soft-ink); }
  .msg.err { color: #a00000; }
  .cover-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .cover-preview img { width: 54px; height: 78px; object-fit: cover; border: 1px solid var(--shadow); }
  .drop {
    border: 2px dashed var(--shadow); padding: 26px 16px; text-align: center; margin-bottom: 14px;
    font-size: 15px; color: var(--soft-ink); cursor: pointer;
  }
  .drop.over { border-color: var(--ink); color: var(--ink); background: #f4f4f4; }
  .manage { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .manage li { font-size: 13px; }
  .manage img { width: 100%; height: 110px; object-fit: cover; display: block; border: 1px solid var(--highlight); }
  .manage .cap { margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .notice { max-width: 46ch; margin: 30vh auto 0; text-align: center; padding: 0 24px; }

  @media (max-width: 820px) {
    .home { grid-template-columns: 1fr; height: auto; }
    .left { padding: 20px 16px; }
    .right { border-left: 0; border-top: 1px solid var(--ink); padding: 20px 16px; height: 80vh; }
    .row, .row3 { grid-template-columns: 1fr; gap: 0; }
  }

/* Additions for the self-hosted version */
.listening a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.login { max-width: 340px; margin: 22vh auto 0; padding: 0 24px; }
.login h1 { font-size: 30px; font-weight: 400; margin: 0 0 18px; }
.spotify-state { margin: 0 0 14px; }
.or { text-align: center; color: var(--soft-ink); font-size: 14px; margin: 18px 0; }


/* Chess */
.board-frame {
  position: relative; background: var(--silver); padding: 3px;
  border: 1px solid; border-color: var(--highlight) var(--ink) var(--ink) var(--highlight);
  box-shadow: inset 1px 1px var(--white), inset -1px -1px var(--shadow);
}
.board {
  display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1;
  border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow);
}
.sq {
  position: relative; border: 0; padding: 0; margin: 0; aspect-ratio: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; cursor: default;
  background: var(--white); color: var(--ink);
}
.sq.dark { background: var(--silver); }
.sq.last { box-shadow: inset 0 0 0 999px rgba(0, 0, 128, .12); }
.sq.check { box-shadow: inset 0 0 0 3px #b00020; }
.sq.movable { cursor: pointer; }
.sq.selected { box-shadow: inset 0 0 0 3px var(--navy); }
.sq.target { cursor: pointer; }
.sq.target::after {
  content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: var(--navy); opacity: .45; pointer-events: none;
}
.sq.target.capture::after { width: 86%; height: 86%; background: none; border: 3px solid var(--navy); opacity: .5; }
.sq:focus-visible { outline: 2px dotted var(--ink); outline-offset: -3px; }
.pc { width: 84%; height: 84%; display: block; pointer-events: none; overflow: visible; }
.pc * { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pc.w * { fill: #ffffff; stroke: #000000; }
.pc.b * { fill: #000000; stroke: #000000; }
.pc .ln { fill: none !important; }
.pc.b .ln, .pc.b .dt { stroke: #ffffff; }
.pc.b .dt { fill: #ffffff; }
.pc.w .dt { fill: #000000; stroke: none; }
.pc .ln.solid { stroke: #000000 !important; stroke-width: 2.5; }
.promo {
  position: absolute; inset: 0; background: rgba(255,255,255,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.promo p { margin: 0; font: 13px var(--old); }
.promo-row { display: flex; gap: 6px; }
.promo-row .btn { width: 46px; height: 46px; padding: 4px; display: flex; align-items: center; justify-content: center; }
.chess-status { font-size: 14px; color: var(--soft-ink); margin: 8px 0 6px; min-height: 2.6em; }
.chess-status.err { color: #a00000; }

/* ---------- Left half: four apps in a 2 × 2 grid, no visible borders ---------- */
.apps {
  flex: 1; min-height: 0; min-width: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 28px 36px;
}
.app { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.app-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; }
.app-text { font-size: 15px; line-height: 1.5; margin-top: 12px; }
.app-text p { margin: 0 0 8px; }
.app-text a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.app-text .stamp { color: var(--soft-ink); font-size: 13px; }

/* 3D book and album: take the space left over, but never get tiny */
.app-stage { flex: 1 0 150px; min-height: 150px; position: relative; cursor: grab; touch-action: pan-y; }
.app-stage:active { cursor: grabbing; }
.app-stage canvas { display: block; width: 100%; height: 100%; }
#albumItem { flex: 1 0 auto; display: flex; flex-direction: column; }
.app .reading { margin-top: 2px; max-width: none; }
.app .reading .title { font-size: 20px; }
.app .reading .title a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.app .reading .author { font-size: 15px; margin-top: 2px; }
.app .reading .progress { font-size: 13px; }
#bookNote { text-align: center; white-space: pre-line; }
#bookNote:empty, #listeningBody:empty { display: none; }

/* Guestbook */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guest-form input, .guest-form textarea {
  display: block; width: 100%; font: 15px/1.4 var(--serif); padding: 6px 8px; margin-bottom: 6px;
  background: var(--white); color: var(--ink); border-radius: 0;
  border: 2px solid; border-color: var(--shadow) var(--white) var(--white) var(--shadow);
  box-shadow: inset 1px 1px var(--ink);
}
.guest-form textarea { resize: none; }
.guest-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.guest-row .msg { font-size: 13px; }
.guestbook { list-style: none; margin: 14px 0 0; padding: 0; }
.guestbook li { border-top: 1px dotted var(--shadow); padding: 10px 0; }
.guestbook .who { font: 14px/1.4 var(--times); margin: 0 0 4px; }
.guestbook .who .date { color: var(--shadow); }
.guestbook .said { font-size: 15px; line-height: 1.5; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.app .empty-note { font-size: 15px; margin: 14px 0 0; }

/* Chess: the board sizes itself to fit whatever space it has */
.chess-body { overflow: hidden; container-type: size; align-items: center; justify-content: center; }
.chess-body .board-frame { width: min(100cqw, 100cqh - 56px); flex: none; }
.chess-body .chess-status { text-align: center; margin: 6px 0 4px; min-height: 0; font-size: 13px; }

/* Phones: stack the four apps, each with a sensible height */
@media (max-width: 820px) {
  .apps { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 36px; }
  .apps .app:nth-child(1), .apps .app:nth-child(2) { height: 420px; }
  .apps .app:nth-child(3) { height: 420px; }
  .apps .app:nth-child(4) { height: auto; }
  .chess-body { container-type: normal; overflow: visible; }
  .chess-body .board-frame { width: 100%; max-width: 360px; }
}

/* Dashboard: guestbook */
.gadmin { list-style: none; margin: 0; padding: 0; }
.gadmin li { border-top: 1px dotted var(--shadow); padding: 12px 0; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.gadmin .who { font: 14px var(--times); margin: 0 0 4px; color: var(--soft-ink); }
.gadmin .said { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }