/* Tamago: one printed sheet about one object. Print register: warm grey paper, black ink dots, one green ink. */
@font-face { font-family: "Doto"; src: url("/fonts/Doto-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("/fonts/Sligoil-Micro.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("/fonts/Sligoil-MicroMedium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sligoil"; src: url("/fonts/Sligoil-MicroBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #e6e3de;
  --paper-2: #edebe6;
  --ink: #171716;
  --ink-2: #4d4d48;
  --ink-3: #85857e;
  --green: #2f8f52;
  --green-2: #1f6b3b;
  --green-soft: rgba(47, 143, 82, 0.14);
  --lcd: #a9b8a3;

  --t-display: 84px;
  --t-title: 34px;
  --t-num: 40px;
  --t-body: 18px;
  --t-label: 16px;
  --t-big: 28px;

  --s-1: 8px; --s-2: 12px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 72px;
  --sheet-w: 1808px;
  font-synthesis: none;
}
html.night {
  --paper: #171716;
  --paper-2: #1f1f1d;
  --ink: #e6e3de;
  --ink-2: #b9b7b0;
  --ink-3: #85857e;
  --green: #5fcf87;
  --green-2: #8fe3a0;
  --green-soft: rgba(95, 207, 135, 0.16);
}
html { overflow-x: clip; }
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper) url("/img/paper.jpg") center top / 100% auto repeat-y;
  font-family: "Sligoil", ui-monospace, "Cascadia Mono", monospace;
  font-size: var(--t-body);
  line-height: 1.45;
  transition: background-color 0.9s, color 0.9s;
  -webkit-font-smoothing: antialiased;
}
html.night body { background-image: none; }
[hidden] { display: none !important; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }

/* the prints: black ink on paper. Multiply sinks the ink into the grain; at night the print goes negative. */
.print { mix-blend-mode: multiply; transition: filter 0.9s; }
html.night .print { mix-blend-mode: normal; filter: invert(1); }

.flame { position: fixed; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated; opacity: 0.9; }

.sheet {
  position: relative;
  z-index: 1;
  max-width: var(--sheet-w);
  margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-7);
}

/* ---- head ------------------------------------------------------------------------------------------- */
.head { display: grid; grid-template-columns: 1fr minmax(320px, 620px); gap: var(--s-5) var(--s-7); align-items: end; margin-bottom: var(--s-6); }
.head-name { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.wordmark { font-family: "Doto", monospace; font-weight: 900; font-size: var(--t-display); line-height: 1.15; letter-spacing: 0.02em; color: var(--ink); }
.chip {
  font-family: "Doto", monospace; font-weight: 700; font-size: var(--t-big); line-height: 1.15;
  color: var(--green-2); padding: 10px 18px 8px;
  border: 0 solid transparent; border-image: url("/img/tag.png") 14 fill / 8px / 0 stretch;
}
.lede { font-size: 22px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }

/* ---- stage: three columns, same top edge ------------------------------------------------------------ */
.stage { position: relative; display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(360px, 400px); gap: var(--s-6); align-items: start; }
.leaders { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.col { padding-top: var(--s-4); }
.title { font-family: "Doto", monospace; font-weight: 700; font-size: var(--t-title); line-height: 1.2; color: var(--ink); margin-bottom: var(--s-4); text-wrap: balance; }
.title-2 { margin-top: var(--s-6); }
.body { color: var(--ink-2); margin-bottom: var(--s-3); max-width: 46ch; text-wrap: pretty; }
.note { color: var(--ink-2); font-size: var(--t-label); }
.link { text-decoration: underline; text-underline-offset: 3px; }

/* the ladder: name, a big dot-matrix number, the unit */
.ladder li {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: baseline; gap: var(--s-3);
  padding: 10px 14px; margin: 0 -14px; border-radius: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.ladder li:last-child { border-bottom: 0; }
.l-name { font-weight: 700; font-size: 20px; }
.l-num { font-family: "Doto", monospace; font-weight: 700; font-size: var(--t-num); line-height: 1.15; text-align: right; font-variant-numeric: tabular-nums; }
.l-unit { font-size: var(--t-label); color: var(--ink-3); width: 36px; }
.ladder li { border-width: 0 0 1px; }
.ladder li.is-now { border: 0 solid transparent; border-image: url("/img/tag.png") 14 fill / 8px / 0 stretch; background: var(--green-soft); }
.ladder li.is-now .l-name::after { content: " now"; color: var(--green-2); font-weight: 500; font-size: var(--t-label); }
#volume { margin-top: var(--s-3); }

/* the device: the print on the left of its column, the A / B / C callouts pinned to its right */
.device-col { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "device tags" "timer timer"; gap: var(--s-4) var(--s-3); align-items: end; min-width: 0; }
.device { position: relative; width: min(100%, 680px); grid-area: device; justify-self: center; }
.device-img { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.lcd-wrap { position: absolute; z-index: 1; border-radius: 6px; overflow: hidden; }
.lcd { display: block; image-rendering: pixelated; }
.hot {
  position: absolute; z-index: 2; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0;
  transition: transform 0.12s, box-shadow 0.12s;
}
.hot:hover, .hot:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 3px var(--green), 0 0 18px 4px var(--green-soft); outline: none; }
.hot:active { transform: scale(0.96); }
.hot.is-off { cursor: not-allowed; }

/* annotation tags: green print frames (nine-sliced from the generated frame) */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-label); font-weight: 500; color: var(--green-2);
  padding: 10px 18px; min-height: 48px;
  border: 0 solid transparent;
  border-image: url("/img/tag.png") 14 fill / 8px / 0 stretch;
  background: transparent; white-space: nowrap;
}
.tag b { font-family: "Doto", monospace; font-weight: 900; font-size: 22px; line-height: 1.15; color: var(--green); }
.tags { grid-area: tags; display: flex; flex-direction: column; gap: var(--s-3); align-self: end; padding-bottom: 19%; }
.tag-big { gap: var(--s-3); padding: 14px 24px; }
.timer-label { font-size: var(--t-label); color: var(--green-2); }
.timer { font-family: "Doto", monospace; font-weight: 700; font-size: var(--t-num); line-height: 1.15; color: var(--green-2); font-variant-numeric: tabular-nums; min-width: 6ch; }
.timer-tag { grid-area: timer; justify-self: center; }

/* ---- printer paper blocks (nine-sliced tractor-feed paper) ------------------------------------------ */
.feed {
  border: 0 solid transparent;
  border-image: url("/img/feedpaper.png") 44 62 44 62 fill / 30px 40px 30px 40px / 0 round;
  padding: var(--s-5) var(--s-4) var(--s-5);
  color: var(--ink);
}
html.night .feed { filter: invert(1); color: var(--paper); }
html.night .feed img, html.night .feed .brand { filter: invert(1); }
.params .title { margin-bottom: var(--s-3); }
.p-row { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-2); padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.p-key { font-size: var(--t-label); color: var(--ink-2); }
.p-key-block { margin-top: var(--s-3); }
.p-val { font-weight: 500; }
.ca {
  font-family: "Doto", monospace; font-weight: 700; font-size: 24px; line-height: 1.25;
  margin-top: 6px; min-height: 60px; overflow-wrap: anywhere; word-break: break-all; user-select: all; min-width: 0;
}
.ca.is-empty { font-family: "Sligoil", monospace; font-weight: 400; font-size: var(--t-body); color: var(--ink-2); user-select: none; }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.keys-links { margin-top: var(--s-2); }
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 26px 16px; font: inherit; font-weight: 700; font-size: var(--t-body); color: var(--ink);
  text-decoration: none; cursor: pointer; border: 0 solid transparent;
  border-image: url("/img/key.png") 60 70 74 70 fill / 22px 26px 27px 26px / 0 stretch;
  background: transparent; transition: transform 0.1s, filter 0.2s;
}
.key img { width: 26px; height: 26px; }
.key:hover, .key:focus-visible { transform: translateY(-1px); outline: none; filter: brightness(0.96); }
.key:active { transform: translateY(2px); }
.key:disabled, .key.is-off { opacity: 0.45; cursor: not-allowed; transform: none; }
.key-green { border-image-source: url("/img/key-green.png"); color: #10381f; }
.key-x { padding: 12px 22px 16px; }
.copy-fb { font-size: var(--t-label); color: var(--green-2); min-width: 8ch; min-height: 1.4em; }
.hint { font-size: var(--t-label); color: var(--ink-3); margin-top: 6px; min-height: 1.4em; }
.hint:empty { display: none; }

/* ---- floor: bowl, tape, burns --------------------------------------------------------------------- */
.floor { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(360px, 440px); gap: var(--s-6); align-items: start; margin-top: var(--s-7); }
.bowl-col { display: flex; flex-direction: column; gap: var(--s-3); }
.bowl { position: relative; width: min(100%, 320px); }
.bowl-fill { position: absolute; left: 12%; right: 12%; top: 6%; height: 40%; pointer-events: none; image-rendering: pixelated; }
.bowl-tag { flex-direction: column; align-items: flex-start; gap: 4px; }
.bowl-sol { font-family: "Doto", monospace; font-weight: 700; font-size: var(--t-num); line-height: 1.15; }
.bowl-tama { font-size: var(--t-label); }
.tape li { display: grid; grid-template-columns: 56px 1fr auto auto; gap: var(--s-3); align-items: baseline; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: var(--t-body); }
.tape li:last-child, .burns li:last-child { border-bottom: 0; }
.t-kind { font-weight: 700; }
.tape li.sell .t-kind { color: var(--ink-3); }
.t-who { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.t-sol { font-family: "Doto", monospace; font-weight: 700; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.t-time { font-size: var(--t-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tape-empty { color: var(--ink-2); padding: 9px 0; }
.records { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 2px solid var(--ink); font-size: var(--t-label); }
.r-key { color: var(--ink-2); }
.r-val { font-weight: 700; overflow-wrap: anywhere; }
.burns li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-3); padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.b-amt { font-weight: 700; }
.burns a { text-decoration: underline; text-underline-offset: 3px; }
.b-time { grid-column: 1 / -1; font-size: var(--t-label); color: var(--ink-3); }
.burn-col .note { margin-bottom: var(--s-3); }

/* ---- widths ---------------------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  :root { --t-display: 72px; }
  .stage, .floor { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(320px, 360px); gap: var(--s-5); }
  .device-col { grid-template-columns: 1fr; grid-template-areas: "device" "tags" "timer"; }
  .device { width: min(100%, 520px); }
  .tags { flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: center; padding-bottom: 0; }
  .leaders { display: none; }
}
@media (max-width: 1179px) {
  :root { --t-display: 64px; --t-num: 34px; --t-title: 30px; }
  .sheet { padding: var(--s-5) var(--s-4) var(--s-7); }
  .head { grid-template-columns: 1fr; gap: var(--s-3); margin-bottom: var(--s-5); }
  .stage { grid-template-columns: 1fr; gap: var(--s-5); }
  .device-col { order: 0; grid-template-columns: 1fr; grid-template-areas: "device" "tags" "timer"; }
  .device { width: min(100%, 520px); }
  .col-right { order: 1; padding-top: 0; }
  .col-left { order: 2; padding-top: 0; }
  .tags { flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: center; padding-bottom: 0; }
  .leaders { display: none; }
  .floor { grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-6); }
  .bowl { width: min(100%, 260px); }
}
@media (max-width: 520px) {
  :root { --t-display: 56px; --t-num: 30px; --t-big: 22px; }
  .sheet { padding: var(--s-4) var(--s-3) var(--s-6); }
  .lede { font-size: 19px; }
  .device { width: 100%; }
  .ladder li { grid-template-columns: 80px 1fr auto; margin: 0 -8px; padding: 10px 8px; }
  .tape li { grid-template-columns: 52px 1fr auto; }
  .t-time { grid-column: 2 / -1; }
  .feed { padding: var(--s-4) var(--s-3); border-image-width: 24px 30px 24px 30px; border-image-slice: 44 62 44 62 fill; }
  .p-row { grid-template-columns: 72px 1fr; }
  .key { padding: 12px 20px 16px; }
  .timer-tag { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hot, .key, .print, body { transition: none; }
}