/* ==========================================================================
   FLUX FIELD — Experience skin (kid-authorable Particle Life)
   Edit = a tech "rules board" (live 2-particle demos + strength selectors);
   Play = the emergent field. Only this app's styling; chrome from shared.css.
   <=4 font sizes; UI neutrals are alpha of one white; species colors = content.
   ========================================================================== */
:root {
  --bg: #08070d;
  /* The field's own ground. Deliberately NOT --bg: renderField clears to
     transparent, so without this the body colour showed through the canvas and
     the two could never be tuned apart. A canvas colour, so it's unbound. */
  --field-bg: #08070d;
  --panel: #0e0d15;
  --line: rgba(255, 255, 255, 0.15);
  --line2: rgba(255, 255, 255, 0.06);
  --text: #ecebf4;
  --accent: #ff4ecb;
  --dim: rgba(236, 235, 244, 0.8);
  --faint: rgba(236, 235, 244, 0.5);
  --accent-ink: #12040d;
  /* Rule semantics: green = attract, red = flee. Feeds the arrow glyphs,
     captions, and legend (JS reads these at load). Content-adjacent accents,
     not general UI colors — nothing outside the rules board may use them. */
  --chase: #55e07f;
  --flee: #ff5a64;
  --fs-xl: 26px;
  --fs-lg: 14px;
  --fs-md: 12px;
  --fs-sm: 10px;
  --mono: "Space Mono", monospace;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* Fixed-size world, centered; JS sets width/height to the contain-fit scale.
   On larger screens the plum ground frames it and the floating panels sit in
   the margin. Hairline + soft shadow read the field as a deliberate "tank". */
.field {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 1;
  background: var(--field-bg);
  /* content-box so the hairline sits outside the width/height layout() sets.
     Under the global border-box it would eat into the drawing surface instead,
     squeezing the 1280x720 bitmap by 2px — skewing both the aspect ratio and
     the pointer-to-world mapping, which reads off the same box. */
  box-sizing: content-box;
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* --- Top chrome -------------------------------------------------------- */
.brand {
  position: fixed;
  z-index: 5;
  top: 16px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand__name b {
  color: var(--accent);
}

/* Top-center mode switch: the three Edit tabs as one pill, then Play set apart
   as a round icon button. Centered as a group; stays put in both modes so Play
   can always jump back into a specific Edit tab. One fewer row than the old
   Edit/Play toggle + tabs row. */
.modeswitch {
  position: fixed;
  z-index: 6;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(14, 13, 21, 0.7);
  backdrop-filter: blur(12px);
}
.nav__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.nav__btn:hover {
  color: var(--text);
}
.nav__btn--on {
  background: var(--accent);
  color: var(--accent-ink);
}
/* Play: round icon button, visually its own kind of thing next to the tab pill.
   Accent-filled while the world is running (see .playtoggle--on). */
.playtoggle {
  appearance: none;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(14, 13, 21, 0.7);
  backdrop-filter: blur(12px);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.playtoggle:hover {
  border-color: var(--dim);
  background: rgba(255, 255, 255, 0.06);
}
.playtoggle__icon {
  width: 18px;
  height: 18px;
}
/* Triangle needs a nudge to sit optically centred; the symmetric pause bars
   don't. Edit shows play; while running the button shows pause. */
.playtoggle__icon--play {
  margin-left: 2px;
}
.playtoggle__icon--pause {
  display: none;
}
.playtoggle--on .playtoggle__icon--play {
  display: none;
}
.playtoggle--on .playtoggle__icon--pause {
  display: block;
}
.playtoggle--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.hud {
  position: fixed;
  z-index: 5;
  top: 15px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud__greeting {
  font-size: var(--fs-md);
  color: var(--dim);
  padding: 0 4px;
}
.hud__greeting span {
  color: var(--text);
  font-weight: 600;
}
.hud__btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(14, 13, 21, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
}
.hud__btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.hud__btn--ghost {
  color: var(--dim);
  font-weight: 500;
}
.hud__class {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.hud__class-input {
  width: 88px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  padding: 7px 10px;
  border-radius: 9px;
}
.hud__class-input::placeholder {
  color: var(--faint);
}
.hud__class-badge {
  display: none;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--accent);
}
.hud__class-leave {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--dim);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  display: none;
  padding: 0;
}
.hud__class-leave:hover {
  color: var(--text);
}
/* Joined state. auth.js adds .active and writes the code into the badge — it
   never touches the input's value — so visibility is driven by .active, not by
   whether the badge is empty (auth.js also leaves stale badge text on leave).
   The code + leave button form a chip that stands in for the input. */
.hud__class.active {
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.hud__class.active .hud__class-input {
  display: none;
}
.hud__class.active .hud__class-badge {
  display: inline;
}
.hud__class.active .hud__class-leave {
  display: inline-flex;
}

/* Starter presets on the Rules tab: a labelled row of chips. Each loads a rule
   set; its description is the tooltip. */
.starters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.starters__label {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.starters__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.starter {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.starter:hover {
  border-color: var(--dim);
  background: rgba(255, 255, 255, 0.06);
}

/* --- EDIT board -------------------------------------------------------- */
.board {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  padding: 70px 18px 28px;
  overflow-y: auto;
  background: var(--bg);
}
.tab {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.tab--on {
  display: flex;
}
.tab__title {
  font-family: var(--mono);
  font-size: var(--fs-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.tab__hint {
  font-size: var(--fs-md);
  color: var(--dim);
}
.board__title {
  font-family: var(--mono);
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

/* One roomy card per creature: avatar + the full size scale. */
.creatures {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
}
.creature-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.creature-card__avatar {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  font-size: 36px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.creature-card__avatar:hover {
  border-color: var(--dim);
  background: rgba(255, 255, 255, 0.06);
}
.creature-card__avatar img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.creature-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.creature-card__label {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Shared option set: every choice shown, active one lit. */
.optset {
  display: flex;
  gap: 4px;
}
.optset__btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  flex: 1;
  padding: 7px 6px;
  border-radius: 8px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.optset__btn:hover {
  border-color: var(--dim);
  color: var(--text);
}
.optset__btn--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.picker {
  position: fixed;
  z-index: 8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: rgba(18, 16, 26, 0.98);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(16px);
}
.picker--open {
  display: flex;
}
.picker__title {
  font-family: var(--mono);
  font-size: var(--fs-md);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.picker__emoji {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 24px;
  height: 38px;
  border-radius: 8px;
}
.picker__emoji:hover {
  background: rgba(255, 255, 255, 0.08);
}
.picker__dots {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.picker__dot {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0;
  transition: transform 0.1s;
}
.picker__dot:hover {
  transform: scale(1.18);
}
.picker__action {
  appearance: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  border: 1px dashed var(--line);
  border-radius: 9px;
  padding: 9px;
  cursor: pointer;
}
.picker__action:hover {
  border-color: var(--dim);
}
/* The drawing this species is using right now — shown above the options so the
   kid can see what "Edit Species in Art Studio" is about to open. */
.picker__current {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9px;
}
.picker__current--on {
  display: flex;
}
/* Drawings are cropped to their artwork, so aspect ratios vary — contain,
   never stretch (same reason the field sprite letterboxes). */
.picker__current-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.picker__current-text {
  display: flex;
  flex-direction: column;
  min-width: 0; /* lets the name ellipsis instead of stretching the popover */
}
.picker__current-label {
  font-size: var(--fs-sm);
  color: var(--dim);
}
.picker__current-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Standing reminder under "Create on Art Studio" — always visible. */
.picker__hint {
  margin: -4px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--dim);
}
/* Shown only when a picked drawing has been deleted in Art Studio. */
.picker__note {
  display: none;
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--dim);
}
.picker__note--on {
  display: block;
}
/* "Edit in Art Studio" — hidden until this species actually has a drawing. */
.picker__action--edit {
  display: none;
}
.picker__action--on {
  display: block;
}

/* Rules board: facing-pair cards (both directions side by side) + arrows */
.board__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 1080px;
}
.pair-card {
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px 12px;
}
.pair-card__stage {
  display: flex;
  align-items: center;
}
.pair-card__crea {
  width: 138px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pair-card__emoji {
  font-size: 38px;
  line-height: 1;
}
.pair-card__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.pair-card__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
}
.pair-card__rel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pair-card__ctrls {
  display: flex;
  margin-top: 12px;
}
.pair-card__ctrls--self {
  justify-content: center;
}
.pair-card__gap {
  flex: 1;
}
.pair-sel {
  width: 138px;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.pair-card__cap {
  margin-top: 13px;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.4;
  min-height: 20px;
}
.pair-card__sub {
  font-size: 19px;
  vertical-align: -3px;
}
.pair-card__subimg {
  width: 19px;
  height: 19px;
  object-fit: contain;
  vertical-align: -4px;
}
.pair-card__subdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.pair-card__g {
  color: var(--chase);
  font-weight: 700;
}
.pair-card__r {
  color: var(--flee);
  font-weight: 700;
}
.pair-card__n {
  color: var(--dim);
  font-weight: 600;
}
.pair-card__collide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pair-card__collide-lbl {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-right: 2px;
}
.collide-opt {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  height: 30px;
  min-width: 30px;
  padding: 0 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.collide-opt:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--dim);
}
.collide-opt--on {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
}
.collide-opt__none {
  color: var(--dim);
  font-size: var(--fs-lg);
}
.cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
}
.cell__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-md);
  color: var(--dim);
  margin-bottom: 8px;
}
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.dot--lg {
  width: 30px;
  height: 30px;
}
.cell__arrow {
  color: var(--faint);
}
.cell__verb {
  margin-left: auto;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--fs-sm);
}
.demo {
  display: block;
  width: 230px;
  height: 80px;
  border-radius: 5px;
  background: #050409;
  border: 1px solid var(--line2);
}
.seg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-top: 9px;
}
.seg__b {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  height: 30px;
  padding: 0 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.seg__b:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--dim);
}
.seg__b svg {
  display: block;
}
/* All three states share one rule — the glyph says which relationship it is,
   the white border says it's picked (accent stays out of the now-coloured rows). */
.seg__b--on {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--text);
}

.board__foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 2px;
}
.board__legend {
  font-size: var(--fs-md);
  color: var(--dim);
}
.board__attract {
  color: var(--chase);
}
.board__repel {
  color: var(--flee);
}
.board__btns {
  display: flex;
  gap: 6px;
}
.board__btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.board__btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dim);
}
.board__btn--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.ctouch {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}
.ctouch__l {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 2px;
}
.ctouch__b {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 7px;
  cursor: pointer;
}
.ctouch__b:hover {
  color: var(--text);
}
.ctouch__b--on {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--dim);
  color: var(--text);
}

/* --- Play -------------------------------------------------------------- */
.playbar {
  position: fixed;
  z-index: 5;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 10px;
  padding: 8px;
  background: rgba(14, 13, 21, 0.72);
  border: 1px solid var(--line);
  border-radius: 12px;
  backdrop-filter: blur(12px);
}
body.is-playing .playbar {
  display: flex;
}
.playbar__btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(14, 13, 21, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
}
.playbar__btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.playbar__tool {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(14, 13, 21, 0.6);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.playbar__tool:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dim);
}
.playbar__tool--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Selected buttons hover exactly like unselected ones — same neutral fill, same
   text. Only the accent-ink text needs resetting: the neutral :hover rules above
   already drop the accent fill, and left as-is that put near-black text on a
   near-black button. Must stay after every one of those :hover rules. */
.nav__btn--on:hover,
.optset__btn--on:hover,
.board__btn--on:hover,
.playbar__tool--on:hover,
.playtoggle--on:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--dim);
  color: var(--text);
}

.playbar__sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 2px 4px;
}
/* World tab: one stacked row per setting — label + plain-language hint above,
   full-width control below. Roomy, and every option is shown (see .optset). */
.world-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 24px;
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.wrow {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wrow__label {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.wrow__hint {
  font-size: var(--fs-md);
  color: var(--faint);
  margin-top: -6px;
}
.wslider__track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  cursor: ew-resize;
  overflow: hidden;
  touch-action: none;
}
.wslider__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  background: var(--accent);
  border-radius: 5px;
}
/* Colour picker, ported from Art Studio (see makeCustomPicker) and re-skinned.
   Inline rather than in a popover: it's the World tab's last control and sits in
   the same full-width rhythm as the crowd track, so the choice stays visible
   like every other option here. The area is short instead of Art Studio's
   square — a full-width square would tower over the panel. No border on the
   area: thumbs are positioned in %, which resolves against the padding box while
   the drag maths reads the border box, so a border would offset the two. */
.cpick {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cpick__area {
  position: relative;
  width: 100%;
  height: 116px;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}
.cpick__hue {
  position: relative;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(
    to right,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );
}
/* The area thumb is filled with the picked colour by paint(), so the circle
   reads as "this is your colour". The hue thumb only marks a position along the
   strip, so it's a line — the circle shape stays reserved for the result. */
.cpick__area-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cpick__hue-thumb {
  position: absolute;
  top: 50%;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.playhint {
  position: fixed;
  z-index: 5;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-md);
  color: var(--dim);
}
.playhint b {
  color: var(--text);
}
body.is-playing .brand,
body.is-playing .hud,
body.is-playing .board {
  display: none;
}
body:not(.is-playing) .playhint {
  display: none;
}