/* Bloomstroke. One canvas, one bar of very large buttons, nothing else. */

:root {
  --ink: #2b2118;
  --parchment: #f3e9d2;
  --ground: #e3d6ba;
  --bar: #efe3c8;
  --tool: #fbf5e6;
  /* Twelve controls -- seven brushes, undo, three holds and the small info
     button -- have to share one row on a tablet without any of them dropping
     below a comfortable toddler-sized target. The divisor counts the eleven
     full-size buttons plus the gaps; 200px covers the padding and the info
     button. Below 60px the groups wrap instead of shrinking further. */
  --button: clamp(60px, calc((100vw - 200px) / 12), 88px);
  --gap: clamp(8px, 1.4vw, 16px);
  --bar-height: calc(var(--button) + 24px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ground);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ----------------------------------------------------------- canvas */

#stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}

#map {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ---------------------------------------------------------- toolbar */

#toolbar {
  flex: 0 0 auto;
  min-height: var(--bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 12px clamp(10px, 1.6vw, 20px);
  background: var(--bar);
  border-top: 2px solid rgba(43, 33, 24, 0.18);
  touch-action: none;
}

.group {
  display: flex;
  align-items: center;
  justify-content: center;
  /* A safety net at widths the sums above did not anticipate: buttons wrap
     within their group rather than shrinking under a fingertip or spilling
     off the bar. */
  flex-wrap: wrap;
  gap: var(--gap);
}

.tool {
  position: relative;
  width: var(--button);
  height: var(--button);
  flex: 0 0 auto;
  border: 2px solid rgba(43, 33, 24, 0.25);
  border-radius: 50%;
  background: var(--tool);
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.tool canvas {
  width: calc(var(--button) * 0.73);
  height: calc(var(--button) * 0.73);
}

.tool svg {
  width: calc(var(--button) * 0.52);
  height: calc(var(--button) * 0.52);
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool.active {
  border-color: var(--ink);
  border-width: 5px;
  box-shadow: 0 0 0 4px rgba(43, 33, 24, 0.12);
  transform: translateY(-4px) scale(1.05);
}

.tool:disabled {
  opacity: 0.32;
  cursor: default;
}

.tool.busy { opacity: 0.5; }

/* The way in to the grown-ups' page. Deliberately the smallest and quietest
   control on the bar: it is not part of the toy, and a child looking for
   something to press should find a brush first. */
#info {
  width: calc(var(--button) * 0.54);
  height: calc(var(--button) * 0.54);
  border-width: 2px;
  opacity: 0.55;
}

#info svg {
  width: 58%;
  height: 58%;
  stroke-width: 3.6;
}

#info.hold::after { inset: -6px; }
#info.holding, #info.fired { opacity: 1; }

/* The fullscreen button shows the way out once you are in. */
.tool .exit { display: none; }
body.is-fullscreen .tool .enter { display: none; }
body.is-fullscreen .tool .exit { display: block; }

/* Hold-to-fire ring. --hold runs 0 -> 1 while the button is held. */
.tool.hold::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--hold, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  opacity: var(--hold, 0);
  pointer-events: none;
}

.tool.holding { transform: scale(0.94); }

.tool.fired {
  animation: pop 340ms ease;
}

@keyframes pop {
  0% { transform: scale(0.94); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tool, .tool.fired { transition: none; animation: none; }
}

/* ----------------------------------------------------------- rename */

#rename {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(43, 33, 24, 0.45);
  z-index: 10;
}

#rename[hidden] { display: none; }

#rename .sheet {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--parchment);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  max-width: min(560px, 92vw);
}

#rename input {
  flex: 1 1 auto;
  min-width: 0;
  font: italic 30px/1.2 Georgia, "Times New Roman", serif;
  color: var(--ink);
  padding: 12px 16px;
  border: 2px solid rgba(43, 33, 24, 0.3);
  border-radius: 12px;
  background: #fff;
}

#rename button {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--parchment);
  display: grid;
  place-items: center;
  cursor: pointer;
}

#rename button svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------- about */

/* Everything a grown-up might want and a child never should: the tip link,
   privacy, licence. Small text throughout, and folded shut so the panel opens
   as four quiet lines rather than a wall of policy. */
#about {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(43, 33, 24, 0.5);
  z-index: 20;
}

#about[hidden] { display: none; }

#about .sheet {
  position: relative;
  width: min(460px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px 24px 18px;
  border-radius: 18px;
  background: var(--parchment);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  /* The one place in the app where text is worth selecting: a grown-up may
     want to copy a link out of it. */
  -webkit-user-select: text;
  user-select: text;
}

#about h1 {
  margin: 0;
  font-size: 26px;
  font-weight: normal;
}

#about .tagline {
  margin: 2px 0 18px;
  font-style: italic;
  opacity: 0.65;
}

#about .menu {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

/* A line of small text, never a button. The whole point of burying the tip
   link is that nobody arrives at it by tapping the biggest thing on screen. */
#about .menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--ink);
  text-decoration: none;
}

/* The underline sits on the words only. Run it under the cup as well and the
   icon reads as struck through rather than drawn. */
#about .menu a span {
  border-bottom: 1px solid rgba(43, 33, 24, 0.4);
}

/* Our own cup, in the same ink and the same stroke as every glyph on the map,
   rather than Ko-fi's mark: a hotlinked logo would be the only thing on the
   page fetched from somewhere else, which is exactly the claim the privacy
   note two lines below it makes. */
#about .menu .cup {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The one filled shape in the app. Outlined, a heart this small collapses into
   a smudge at the size this actually ships at; solid, it still reads. */
#about .menu .cup .heart {
  fill: currentColor;
  stroke: none;
}

#about details {
  border-top: 1px solid rgba(43, 33, 24, 0.18);
  padding-bottom: 4px;
}

#about summary {
  padding: 9px 0;
  cursor: pointer;
  list-style: none;
}

#about summary::-webkit-details-marker { display: none; }
#about summary::after { content: "+"; float: right; opacity: 0.45; }
#about details[open] summary::after { content: "\2013 "; }

#about details p {
  margin: 0 0 9px;
  opacity: 0.82;
}

#about .colophon {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(43, 33, 24, 0.18);
  font-size: 11px;
  opacity: 0.6;
}

#about .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  opacity: 0.5;
  display: grid;
  place-items: center;
  cursor: pointer;
}

#about .close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

/* Narrow portrait phones: eight buttons cannot share one row and stay big
   enough for a small finger, so give the brushes and the actions a row each. */
@media (max-width: 860px) and (min-height: 461px) {
  #toolbar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px var(--gap);
  }
  .group { flex: 1 0 100%; }
}

/* Landscape phones: twelve small controls still beat two rows on a screen that
   is 390px tall, so keep one row and trim everything instead. */
@media (max-height: 460px) {
  :root { --button: clamp(46px, 6.2vw, 66px); }
  #toolbar { padding-top: 8px; padding-bottom: 8px; }
}