/* THE LAST SEVEN CREATIONS — the painting and its frame are drawn on a canvas; this file styles the museum label beside
   it (a cream card, small capitals, an italic instruction, and the helper's voice in its own clean type), the room
   cards, the parchment you write on, the coda's paintbox and the menus.
   No inline styles anywhere: the page runs under a strict Content Security Policy. */
:root {
  --serif: Palatino, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ink: #2e2014;
  --paper: #f1e8d4;
  --gold: #c9a24e;
  --gold2: #f2d27a;
  --ochre: #b8742a;
  --silver: #a9b4be;
  --voice: #4e5c68;
  color-scheme: dark; /* one look: a dark gallery wall */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0e1410; color: var(--paper); overflow: hidden; }
body { font-family: var(--serif); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button { font-family: inherit; }
#wall { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#stage { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
[hidden] { display: none !important; }

/* ——— the label ——— */
.plaque { position: fixed; z-index: 3; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
/* phone browsers float their own toolbars over the bottom of the page: leave room to scroll the label up past them */
.below .plaque { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }
.side .plaque { padding: 16px 0; }
.side .card { margin: auto; }
.card { pointer-events: auto; width: 100%; max-width: 460px; margin: 0 auto; background: linear-gradient(170deg, #f3ead7 0%, #e9ddc3 100%); color: var(--ink);
  padding: 16px 18px 12px; border-radius: 2px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(120, 90, 50, 0.18); }
.where { margin: 0; font-size: 11.5px; letter-spacing: 0.17em; text-transform: uppercase; color: #8a643a; min-height: 1em; }
.card h1 { margin: 3px 0 6px; font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: 0.01em; }
.side .card h1 { font-size: 26px; }
.intro { margin: 0 0 6px; font-style: italic; font-size: 16px; line-height: 1.45; color: #3a2a1a; }
.hint { margin: 0 0 6px; font-size: 13.5px; color: #75603f; }
.voice { margin: 8px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.4; color: var(--voice); letter-spacing: 0.005em; opacity: 0; transition: opacity 1.4s ease; min-height: 0; }
.voice:empty { margin: 0; }
.voice.show { opacity: 1; }
.voice.warm { color: #6a4e30; }
.summary { margin: 10px 0 0; font-size: 14.5px; font-style: italic; color: #4a3a26; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions:empty { margin-top: 0; }
button.go, button.ghost { font: 600 16px/1.15 var(--serif); padding: 11px 16px; border-radius: 3px; cursor: pointer; min-height: 44px; }
button.go { background: linear-gradient(#d8b462, #a17a32); color: #24160a; border: 1px solid #7a5a22; box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6); flex: 1 1 auto; }
button.go:hover, button.go:focus-visible { background: linear-gradient(#e6c472, #b08840); outline: none; }
button.ghost { background: transparent; color: #5a4024; border: 1px solid rgba(120, 90, 50, 0.45); flex: 0 1 auto; }
button.ghost:hover, button.ghost:focus-visible { border-color: #8a643a; outline: none; background: rgba(120, 90, 50, 0.08); }
button:disabled { opacity: 0.4; cursor: default; }

.card.fresh .where, .card.fresh h1, .card.fresh .intro { animation: fresh 1.1s ease both; }
.card.fresh h1 { animation-delay: 0.15s; } .card.fresh .intro { animation-delay: 0.35s; }
@keyframes fresh { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* the ledger: whose work each of the forty-two was. Ochre: your hands. Silver: its. */
.ledger { display: flex; gap: 2px; height: 7px; margin-top: 14px; }
.seg { flex: 1 1 0; background: rgba(110, 90, 60, 0.13); position: relative; overflow: hidden; }
.seg.done { background: var(--silver); }
.seg.now { box-shadow: 0 0 0 1px #8a643a; }
.seg.coda { flex: 2.2 1 0; margin-left: 4px; }
.seg .you { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ochre); }
.seg.coda .you { background: linear-gradient(90deg, #b8742a, #e0a44a); }
.legend { margin: 6px 0 0; font-size: 11.5px; color: #8a7458; display: none; }
.reveal .legend { display: block; }
.legend .k { display: inline-block; width: 10px; height: 7px; margin: 0 4px 0 0; vertical-align: 1px; }
.legend .k.its { margin-left: 10px; background: var(--silver); }
.legend .k.you { background: var(--ochre); }
.foot { display: flex; justify-content: flex-end; gap: 14px; margin-top: 10px; }
button.link { background: none; border: none; padding: 6px 2px; font: 13px var(--serif); color: #8a643a; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; }
button.link:hover, button.link:focus-visible { color: #4a2e14; outline: none; text-decoration: underline; }

/* ——— the coda's paintbox ——— */
.tools { margin-top: 12px; }
.pigments, .sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pigments { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.pig { width: 100%; max-width: 38px; aspect-ratio: 1; height: auto; border-radius: 50%; border: 2px solid rgba(60, 40, 20, 0.35); cursor: pointer; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.25), inset 0 3px 5px rgba(255, 255, 255, 0.2); }
.pig[aria-pressed="true"] { border-color: #2e2014; box-shadow: 0 0 0 3px #f2d27a, inset 0 -3px 6px rgba(0, 0, 0, 0.25); }
.pig-ultramarine { background: #2a4da8; } .pig-vermilion { background: #d2452a; } .pig-leadTin { background: #e8c64a; }
.pig-malachite { background: #3f8f5a; } .pig-ochre { background: #c08a3e; } .pig-umber { background: #5b4128; } .pig-leadWhite { background: #f2ead8; }
.size { width: 44px; height: 38px; border-radius: 3px; border: 1px solid rgba(120, 90, 50, 0.45); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.size[aria-pressed="true"] { background: rgba(120, 90, 50, 0.16); border-color: #5a4024; }
.size .dot { display: block; border-radius: 50%; background: #3a2a1a; }
.size-0 .dot { width: 5px; height: 5px; } .size-1 .dot { width: 10px; height: 10px; } .size-2 .dot { width: 18px; height: 18px; }
.tools .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tools .bar .sizes { margin: 0; gap: 6px; }
.tools .bar .size { width: 40px; height: 40px; }
.tools .bar .ghost { min-height: 40px; padding: 8px 12px; }
.tools .bar .go { min-height: 40px; padding: 8px 12px; flex: 1 1 96px; }
/* while you paint, the label keeps only what you need */
.painting .ledger, .painting .legend, .painting .hint { display: none; }

/* ——— the parchment you write on ———
   The words are laid out here but drawn in ink on the painting (games/writing.js), so the text itself is invisible:
   only the caret, the placeholder and the selection show. */
.write { position: fixed; z-index: 2; display: flex; flex-direction: column; font-family: var(--serif); font-style: italic; color: transparent; line-height: 1.4; }
.wprompt { margin: 0 0 2px; }
.write textarea { flex: 1 1 auto; width: 100%; background: transparent; border: none; resize: none; padding: 0; margin: 0; font: inherit; color: transparent; -webkit-text-fill-color: transparent; caret-color: #3a2414; line-height: inherit; outline: none; -webkit-appearance: none; appearance: none; border-radius: 0; }
.write textarea::placeholder { color: rgba(58, 36, 20, 0.5); -webkit-text-fill-color: rgba(58, 36, 20, 0.5); }
.write textarea::selection { background: rgba(160, 120, 60, 0.25); }
.wmirror { position: absolute; visibility: hidden; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; font: inherit; line-height: inherit; padding: 0; margin: 0; pointer-events: none; }
.ink { white-space: pre-wrap; overflow: hidden; }
.ink .ai, .ink .fix { font-family: var(--sans); font-style: normal; font-size: 0.9em; }

/* ——— the name of each room, over the painting as it is painted ——— */
.roomcard { position: fixed; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(14, 10, 6, 0.72) 0%, rgba(14, 10, 6, 0.4) 55%, rgba(14, 10, 6, 0) 85%); padding: 20px; }
.roomcard.show { animation: room 5.2s ease forwards; }
.roomcard .num { font-size: 54px; color: var(--gold2); letter-spacing: 0.08em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.roomcard .name { font-size: 22px; color: #f6ecd2; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 2px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.roomcard .line { font-style: italic; font-size: 15px; color: #efe2c4; margin-top: 10px; max-width: 26ch; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
@keyframes room { 0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ——— the helper, now and then, in a small grey box ——— */
.toast { position: fixed; z-index: 4; transform: translateX(-50%); padding: 7px 14px; border-radius: 3px; background: rgba(28, 34, 40, 0.88); color: #dde6ee; font: 14px var(--sans); pointer-events: none; white-space: nowrap; }
.toast.show { animation: toast 2.4s ease forwards; }
@keyframes toast { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ——— modal panels: the menu, links, signing your work ——— */
.layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: rgba(6, 10, 7, 0.74); }
.form { width: min(100%, 440px); max-height: 100%; overflow-y: auto; background: #f1e8d4; color: var(--ink);
  border: 1px solid #8a643a; outline: 1px solid rgba(138, 100, 58, 0.5); outline-offset: -6px; padding: 20px 20px 16px; border-radius: 2px; font: 15px/1.45 var(--serif); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }
.form h2 { margin: 0 0 10px; font-size: 21px; text-align: center; font-weight: 600; }
.form p { margin: 0 0 12px; color: #3a2a1a; font-size: 15px; }
.form label { display: block; margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: #8a643a; }
.form input, .form textarea { width: 100%; font: italic 18px/1.4 var(--serif); color: var(--ink); background: #fffaf0; border: 1px solid #b09060; border-radius: 2px; padding: 9px 10px; }
.form input:focus, .form textarea:focus { outline: 2px solid #c9a24e; outline-offset: 1px; }
.form .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.form a.go { flex: 1 1 auto; font: 600 16px/1.15 var(--serif); padding: 12px 14px; border-radius: 3px; text-align: center; text-decoration: none; background: linear-gradient(#d8b462, #a17a32); color: #24160a; border: 1px solid #7a5a22; }
.form .link { word-break: break-all; background: #fffaf0; border: 1px dashed #b09060; padding: 10px; font: 13px var(--sans); color: #4a3420; user-select: all; -webkit-user-select: all; border-radius: 2px; }
.form .fine { font-size: 12.5px; color: #75603f; margin: 10px 0 0; }
.form .err { color: #a8342a; font-size: 13px; margin: 8px 0 0; }
.form h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a643a; font-weight: 600; }
.form .menu-item { display: block; width: 100%; margin: 6px 0 0; padding: 12px 14px; font: 16px/1.2 var(--serif); text-align: left; cursor: pointer;
  color: var(--ink); background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(138, 100, 58, 0.4); border-radius: 2px; }
.form .menu-item:hover, .form .menu-item:focus-visible { border-color: #8a643a; outline: none; background: rgba(255, 255, 255, 0.7); }
.jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 5px; }
.jump .num { padding: 8px 2px; font: 14px var(--serif); background: rgba(255, 255, 255, 0.35); border: 1px solid rgba(138, 100, 58, 0.4); border-radius: 2px; cursor: pointer; color: var(--ink); }
.jump .num:hover, .jump .num:focus-visible { border-color: #8a643a; outline: none; background: rgba(255, 255, 255, 0.75); }
.jump .num.wide { grid-column: 1 / -1; }

@media (min-width: 1100px) and (min-height: 760px) {
  .side .card { padding: 22px 26px 16px; }
  .side .card h1 { font-size: 30px; }
  .side .intro { font-size: 18.5px; }
  .side .voice { font-size: 17px; }
  .side .where { font-size: 12.5px; }
  .side .hint { font-size: 15px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  .card { padding: 12px 14px 10px; }
  .card h1 { font-size: 20px; }
  .intro { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .roomcard.show { animation-duration: 3s; }
  .voice { transition: none; }
  .card.fresh .where, .card.fresh h1, .card.fresh .intro { animation: none; }
}