/* Burn simulator: plain sides, a centred column with a title band and the table; the paper fills the table,
   the fire rail and the tool rail float over its edges. */

:root {
  --bk: 1;
  --bg: #141110;
  --surface: #ece2de;
  --surface-2: #ddd0ca;
  --field: #f6efec;
  --bar: #3d3533;
  --disc: #efe4de;
  --ink: #2f2927;
  --ink-2: #6a554e;
  --ink-3: #a08c84;
  --line: #4a3f3b;
  --accent: #e8a873;
  --on-dark: #f1e6df;
  --tap: 44px;
  --band: 56px;
  --edge: 10px;
}

body {
  background: var(--bg);
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.col {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #2a2320;
}

/* ---------- title band ---------- */
.band {
  position: relative;
  flex: none;
  height: var(--band);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bar);
}

.title {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--title-weight);
  font-size: calc(var(--band) * 0.5 * var(--bk));
  line-height: 1;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  color: var(--on-dark);
  white-space: nowrap;
  cursor: pointer;
}

html[lang="en"] .title {
  letter-spacing: 0.08em;
  padding-left: 0.08em;
}

.lang {
  position: absolute;
  right: var(--edge);
  top: 50%;
  display: flex;
  height: calc(30px * var(--bk));
  margin-top: calc(-15px * var(--bk));
  border: 1.5px solid rgba(241, 230, 223, 0.55);
  border-radius: calc(15px * var(--bk));
}

.lang-opt {
  position: relative;
  min-width: calc(40px * var(--bk));
  height: calc(30px * var(--bk) - 3px);
  padding: 0 calc(10px * var(--bk));
  font-size: calc(13px * var(--bk));
  line-height: calc(30px * var(--bk) - 3px);
  color: var(--on-dark);
  opacity: 0.6;
}

/* the touch area stays 44 px tall and at least 44 px wide however small the switch is drawn */
.lang-opt::after {
  content: '';
  position: absolute;
  left: calc(20px * var(--bk) - 22px);
  right: calc(20px * var(--bk) - 22px);
  top: calc((30px * var(--bk) - 47px) / 2);
  bottom: calc((30px * var(--bk) - 47px) / 2);
}

.lang-opt:first-child {
  border-radius: calc(15px * var(--bk) - 1px) 0 0 calc(15px * var(--bk) - 1px);
}

.lang-opt:last-child {
  border-radius: 0 calc(15px * var(--bk) - 1px) calc(15px * var(--bk) - 1px) 0;
}

.lang-opt.is-on {
  background: var(--on-dark);
  color: var(--bar);
  opacity: 1;
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.table,
.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.scene {
  touch-action: none;
}

.stencil {
  position: absolute;
  pointer-events: none;
}

.hint {
  position: absolute;
  left: 50%;
  margin: 0;
  pointer-events: none;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.hint.is-hidden {
  opacity: 0;
}

.hint-ink {
  display: block;
}

.hint-text {
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- tool rail: attached to the right edge of the column, floating over the paper ---------- */
.rail {
  position: absolute;
  top: var(--edge);
  right: 0;
  max-height: calc(100% - var(--edge) * 2);
  display: flex;
  flex-direction: column;
  padding: 4px;
  border-radius: 12px 0 0 12px;
  background: var(--bar);
  z-index: var(--z-rail);
}

.rail .disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bar);
}

.rail .disc::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  z-index: -1;
  border-radius: 50%;
  background: var(--disc);
}

.rail .disc {
  z-index: 0;
}

.rail .disc canvas {
  width: 26px;
  height: 26px;
}

.rail .disc .icon {
  width: 18px;
  height: 18px;
}

.rail .disc[disabled] {
  opacity: 0.38;
  cursor: default;
}

.rail.is-short {
  display: grid;
  grid-template-columns: 44px 44px;
  grid-template-rows: 44px 44px 44px;
  grid-auto-flow: column;
}

/* ---------- fires: a row along the bottom of the column ---------- */
.fire-bar {
  flex: none;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--bar);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fire-bar::-webkit-scrollbar {
  display: none;
}

.fire-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: calc(var(--bar-h) - 8px);
  margin-right: 4px;
  padding: 0 6px;
  border-radius: 10px;
  color: var(--on-dark);
}

.fire-chip.is-on {
  background: rgba(241, 230, 223, 0.14);
}

.fire-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--disc);
  color: var(--bar);
}

.fire-chip.is-on .fire-face {
  box-shadow: 0 0 0 2px var(--accent);
}

.fire-face canvas {
  width: 30px;
  height: 30px;
}

.fire-face .icon {
  width: 18px;
  height: 18px;
}

.fire-name {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0.85;
}

/* the add button has no name, but keeps the line so its circle sits level with the others */
.fire-name:empty::before {
  content: '\00a0';
}

/* a preset's name in its settings: shown, not editable */
.fire-name-slot {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.fire-fixed {
  height: 36px;
  padding: 0 8px;
  font-size: 15px;
  line-height: 36px;
  color: var(--ink);
}

/* fire editor */
.fire-top {
  display: flex;
  align-items: center;
}

.fire-preview {
  flex: none;
  width: 96px;
  height: 120px;
  margin-right: 12px;
  border-radius: 10px;
  background: #efe8df;
}

.fire-fields {
  flex: 1 1 auto;
  min-width: 0;
}

.fire-row {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.fire-label {
  flex: none;
  width: 3.5em;
  font-size: 14px;
  color: var(--ink-2);
}

.fire-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  background: var(--field);
}

.fire-dial {
  flex: 1 1 auto;
  min-width: 0;
  height: 8px;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  /* the part already dragged over is a picture, not a colour, so a forced dark mode leaves it light */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' preserveAspectRatio='none'%3E%3Crect width='4' height='4' fill='%23efe4de'/%3E%3C/svg%3E") 0 0 / var(--fill, 0%) 100% no-repeat, rgba(241, 230, 223, 0.18);
  outline: none;
}

.fire-dial::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' preserveAspectRatio='none'%3E%3Crect width='4' height='4' fill='%23efe4de'/%3E%3C/svg%3E") center / 100% 100% no-repeat, #efe4de;
  border: 3px solid #3d3533;
  -webkit-appearance: none;
  appearance: none;
}

.fire-dial::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' preserveAspectRatio='none'%3E%3Crect width='4' height='4' fill='%23efe4de'/%3E%3C/svg%3E") center / 100% 100% no-repeat, #efe4de;
  border: 3px solid #3d3533;
}

.fire-row-top {
  align-items: flex-start;
  padding-top: 6px;
}

.fire-swatches {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.fire-swatch {
  width: 12.5%;
  height: 26px;
  border: 2px solid transparent;
  border-radius: 6px;
  background-clip: padding-box;
}

.fire-swatch.is-on {
  border-color: #efe4de;
}

/* ---------- toast: at the top under the title, clear of the tool rail; it only stays a moment ---------- */
.toast {
  top: calc(var(--band) + 10px);
  bottom: auto;
  max-width: calc(100% - 136px);
  text-align: center;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

/* ---------- import: three results to pick from, the sample in the top right ---------- */
.crop-note {
  display: none;
}

.crop-modes {
  display: flex;
  margin-bottom: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.crop-mode-btn {
  flex: 1 1 0;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: calc(var(--radius-sm) - 2px);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.crop-mode-btn.is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.modal.has-x .pick {
  padding-top: 44px;
}

.pick-cards {
  display: flex;
  justify-content: space-between;
}

.pick-card {
  position: relative;
  width: 31.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pick-face {
  width: 100%;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #cbb8ae;
  overflow: hidden;
}

.pick-card.is-on .pick-face {
  border-color: var(--bar);
}

.pick-face canvas {
  width: 100%;
  height: auto;
}

.pick-name {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink);
}

.pick-remove {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pick-remove .icon {
  width: 26px;
  height: 26px;
  padding: 4px;
  border-radius: 50%;
  background: var(--bar);
  color: var(--on-dark);
}

/* export dialog, top to bottom: other people's material (a small link, left), the export buttons, the studio credit.
   The credit box dissolves into the dialog's column so its two parts can sit at the top and the bottom. */
.modal-stack {
  display: flex;
  flex-direction: column;
}

.credit-box {
  display: contents;
}

.credits-row {
  -webkit-box-ordinal-group: 0;
  order: -1;
  display: flex;
  justify-content: flex-start;
  margin: 0 0 4px;
}

.credits-link {
  padding: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-3);
  text-decoration: underline;
}

/* everything on the page wobbles a little, like a hand-drawn animation, except the paper and the table under it:
   the stage itself is never filtered, only the parts laid over it and the bands around it */
.band,
.fire-bar,
.rail,
.hint,
.toast {
  -webkit-filter: url(#rough);
  filter: url(#rough);
}

/* ---------- dialogs, small panels and the toast follow the page: charcoal panel, cream type and buttons,
   the same hand-cut wobble. The shared parts read these variables, so overriding them restyles all of them. */
.modal,
.popover {
  --surface: #3d3533;
  --surface-2: #574c48;
  --field: #2c2523;
  --ink: #f1e6df;
  --ink-2: #d2c3ba;
  --ink-3: #9a8b83;
  --line: rgba(241, 230, 223, 0.6);
  --bar: #efe4de;
  --on-dark: #3d3533;
  --accent: #e8a873;
  -webkit-filter: url(#rough);
  filter: url(#rough);
}

.modal {
  border-radius: 14px;
}

.modal-overlay {
  background: rgba(20, 17, 16, 0.62);
}

.modal-head,
.modal-foot {
  border-color: rgba(241, 230, 223, 0.12);
}

.modal .btn {
  border-radius: 999px;
  border-width: 1.5px;
  background: transparent;
  color: var(--ink);
}

.modal .btn-primary {
  background: var(--bar);
  border-color: var(--bar);
  color: var(--on-dark);
}

.modal .btn-danger {
  background: transparent;
  border-color: #d98a7a;
  color: #f0b4a6;
}

.modal .credit-link,
.modal .credits-link {
  color: var(--ink-2);
}

/* the export preview shows the file only (its own see-through parts are painted in as a checkerboard);
   around it is just the dialog. The flame preview paints its own light ground. */
.modal-preview {
  background: transparent;
}

.pick-face {
  background: #2a2320;
}

.pick-sample {
  border-color: rgba(241, 230, 223, 0.3);
}

.pick-sample.is-on,
.pick-card.is-on .pick-face {
  border-color: var(--accent);
}

.pick-remove .icon {
  background: #efe4de;
  color: #3d3533;
}

.fire-input {
  border-color: rgba(241, 230, 223, 0.25);
  color: var(--ink);
}


.toast {
  border-radius: 999px;
}

/* the × over each dialog's top-right corner: small to look at, a full touch target; the first row leaves room for it */
.modal {
  position: relative;
}

.modal-x {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
}

.modal-x .icon {
  width: 16px;
  height: 16px;
}

.modal.has-x .modal-head {
  padding-right: 44px;
}

.modal.has-x .modal-body > .modal-text:first-child {
  min-height: calc(44px - var(--u) * 8);
  padding-right: 26px;
}

.modal.has-x .credits-row {
  min-height: calc(44px - var(--gap-3));
  -webkit-box-align: start;
  align-items: flex-start;
}

.modal.has-x .fire-fields > :first-child {
  padding-right: 36px;
}

.credit-box > .credit {
  margin-top: var(--gap-3);
}