.cheer-ui { font-size: 14px; }
.cheer-ui [hidden], .cheer-layer [hidden] { display: none !important; }
.cheer-ui h2 { margin: 0; font-size: 20px; text-wrap: balance; }
.cheer-ui p { line-height: 1.6; text-wrap: pretty; }
.cheer-ui button { border-radius: 3px; }
.cheer-ui .cheer-primary { background: var(--gold); color: var(--black); font-weight: bold; border: 1px solid var(--gold); }
.cheer-ui .cheer-primary:hover:not(:disabled) { color: var(--black); background: var(--paper); }
.cheer-entry { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; flex-wrap: wrap; }
#cheer-open { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 240px; min-height: 52px; font-size: 18px; }
#cheer-open > span:last-child { margin-left: auto; }
#cheer-list-open { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); }
#cheer-status:empty, #cheer-error:empty, .cheer-error-row:has(#cheer-error:empty) { display: none; }
.cheer-heading, .cheer-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cheer-ui input[type="text"], .cheer-ui input[type="url"] { display: block; width: 100%; min-height: 48px; padding: 10px 12px; color: var(--paper); background: var(--black); border: 1px solid var(--border); border-radius: 3px; font: inherit; }
.cheer-dialog { inset: 0; width: min(400px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 20px; overflow: auto; color: var(--paper); background: var(--black); border: 1px solid var(--gold); }
.cheer-dialog::backdrop { background: rgb(0 0 0 / .6); }
.cheer-dialog h2 { overflow-wrap: anywhere; }
.cheer-preview { display: grid; place-items: center; min-height: 112px; color: var(--gold); }
.cheer-preview .cheer-figure { width: 112px; height: 132px; }
#cheer-card-place { text-align: center; color: var(--quiet); font-variant-numeric: tabular-nums; }
.cheer-sharing h3 { margin: 20px 0 12px; font-size: 16px; color: var(--gold); }
.cheer-owner-actions { display: flex; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 16px; }
#cheer-withdraw { color: var(--quiet); }
.cheer-owner-note { margin: 4px 0 0; font-size: 12px; color: var(--quiet); }
.cheer-report { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 12px; font-size: 12px; color: var(--quiet); }
.cheer-report summary { cursor: pointer; }
#cheer-report-form { display: grid; gap: 8px; margin-top: 12px; }
#cheer-report-reason { width: 100%; min-width: 0; min-height: 44px; font: inherit; }
#cheer-report-submit { min-height: 44px; border: 1px solid var(--border); }
#cheer-report-status { margin: 0; }
#cheer-report-status:empty { display: none; }
#cheer-people { list-style: none; padding: 0; }
#cheer-people button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border-bottom: 1px solid var(--border); }
#cheer-people small { margin-left: auto; color: var(--quiet); white-space: nowrap; }
#cheer-people span:not(.cheer-figure) { overflow-wrap: anywhere; }
body.cheer-editing main, body.cheer-editing #mobile-player { display: none !important; }
.cheer-editor { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; color: var(--paper); background: var(--black); }
.cheer-editor::backdrop { background: var(--black); }
.cheer-editor-inner { max-width: 1600px; min-height: 100%; margin: auto; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 20px; }
.cheer-editor-header { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 16px; }
.cheer-steps { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; color: var(--quiet); }
.cheer-steps li { display: flex; align-items: center; gap: 8px; }
.cheer-steps li[aria-current] { color: var(--gold); }
.cheer-steps li span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 50%; font-variant-numeric: tabular-nums; }
.cheer-steps li[aria-current] span { background: var(--gold); color: var(--black); border-color: var(--gold); }
.cheer-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 28%); gap: 16px; }
#cheer-scene { min-width: 0; }
.cheer-editor #street { height: clamp(300px, calc(100dvh - 370px), 600px); }
/* Step 2 is about the name and figure: the scene steps back so the choices fit. */
.cheer-editor[data-step="2"] #street { height: clamp(200px, calc(100dvh - 600px), 420px); }
.cheer-editor #runner { display: none; }
.cheer-editor .cheer-marker:not([data-cheer-id="draft"]) { pointer-events: none; }
.cheer-map-panel { position: relative; min-width: 0; border: 1px solid var(--border); background: #eee9df; }
#cheer-map { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.cheer-map-tools { position: absolute; bottom: 8px; left: 50%; z-index: 4; transform: translateX(-50%); display: flex; background: var(--black); border: 1px solid var(--border); }
.cheer-map-tools button { padding: 8px; }
#cheer-map-error { position: absolute; top: 4px; left: 56px; right: 4px; z-index: 4; background: var(--black); font-size: 11px; }
.cheer-settings { display: flex; flex-direction: column; flex: 1; gap: 16px; min-height: 0; margin: 0; }
#cheer-place-fields, #cheer-person-fields { width: min(100%, 960px); margin: auto; }
.cheer-place-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#cheer-location { font-size: 24px; font-variant-numeric: tabular-nums; }
#cheer-distance { width: 100%; min-height: 44px; margin: 4px 0 0; }
.cheer-range-ends { display: flex; justify-content: space-between; color: var(--quiet); font-size: 11px; }
.cheer-ui fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cheer-ui legend { margin-bottom: 8px; }
.cheer-segments { display: flex; gap: 4px; }
.cheer-segments label, .cheer-avatars label { position: relative; cursor: pointer; }
.cheer-segments input, .cheer-avatars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cheer-segments input + span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--border); border-radius: 3px; white-space: nowrap; }
.cheer-segments input:checked + span, .cheer-avatars input:checked + span { color: var(--gold); border-color: var(--gold); background: #2d2b22; }
.cheer-segments input:focus-visible + span, .cheer-avatars input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.cheer-person-fields { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr); align-items: start; gap: 32px; }
.cheer-name-field input { margin-top: 8px; }
.cheer-text-fields { display: grid; gap: 12px; min-width: 0; }
.cheer-message-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#cheer-message-count { font-size: 11px; color: var(--quiet); font-variant-numeric: tabular-nums; }
#cheer-message-count.is-over { color: var(--gold); font-weight: bold; }
.cheer-card-message { text-align: center; font-size: 20px; overflow-wrap: anywhere; }
#cheer-people .cheer-list-message { display: block; margin: 4px 0 0; white-space: normal; color: var(--paper); }
.cheer-avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cheer-ui .cheer-kyoto { margin-top: 16px; padding: 8px; border: 3px double var(--gold); border-radius: 3px; }
.cheer-kyoto > legend { margin: 0 auto; padding: 4px 16px; color: var(--black); background: var(--gold); border-radius: 2px; font-weight: bold; }
.cheer-avatar-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 3px; font-size: 12px; text-align: center; }
.cheer-avatars [data-avatar] { display: grid; place-items: end center; height: 72px; }
.cheer-avatars .cheer-figure { width: 64px; height: 72px; }
.cheer-avatars label:not(:has(input:checked)):not(:hover) .cheer-figure * { animation-play-state: paused; }
/* The next action stays visible while the name/figure choices scroll. */
.cheer-editor-actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; padding: 16px 0 12px; border-top: 1px solid var(--border); background: var(--black); text-align: initial; }
#cheer-submit { min-width: 200px; min-height: 52px; font-size: 16px; }
.cheer-error-row { width: min(100%, 960px); margin: 0 auto; }
.cheer-error-row p { margin: 0; }
@media (max-width: 760px) {
  .cheer-entry { gap: 8px; }
  #cheer-open { flex: 1; min-width: 0; min-height: 48px; font-size: 16px; gap: 6px; padding: 8px; white-space: nowrap; }
  #cheer-open > span:last-child { display: none; }
  #cheer-open .icon { width: 18px; height: 18px; }
  .cheer-editor-inner { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 14px; display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "header header" "scene scene" "map fields" "error error" "actions actions"; }
  .cheer-editor-header { min-height: 44px; grid-area: header; }
  .cheer-editor-header h2 { font-size: 18px; }
  .cheer-steps { gap: 12px; font-size: 12px; }
  .cheer-steps li { gap: 4px; }
  .cheer-steps li span { width: 20px; height: 20px; }
  .cheer-workspace, .cheer-settings { display: contents; }
  #cheer-scene { grid-area: scene; }
  .cheer-editor .mounting { padding: 4px; }
  .cheer-editor #street { height: clamp(180px, calc(100dvh - 570px), 280px); }
  .cheer-map-panel { grid-area: map; align-self: start; }
  #cheer-map { position: relative; aspect-ratio: 1; height: auto; }
  .cheer-map-tools { position: static; transform: none; border: 0; justify-content: center; }
  /* The small phone map keeps the credit button out of the way. */
  .cheer-map-panel .map-attribution { top: 4px; left: 4px; width: 28px; }
  .cheer-map-panel .map-attribution summary { width: 28px; height: 28px; min-height: 28px; padding: 4px; font-size: 14px; }
  .cheer-map-panel .map-attribution .map-credit { top: 32px; }
  .cheer-map-tools button { min-width: 32px; font-size: 11px; padding: 4px; }
  #cheer-place-fields, #cheer-person-fields { grid-area: fields; margin: 0; width: 100%; }
  .cheer-place-row { gap: 16px; flex-direction: column; }
  #cheer-location { font-size: 20px; }
  .cheer-segments input + span { padding: 8px; }
  .cheer-person-fields { display: flex; flex-direction: column; gap: 12px; }
  .cheer-name-field { width: 100%; }
  .cheer-text-fields { width: 100%; }
  .cheer-message-field > span { font-size: 12px; gap: 4px; }
  /* The map cannot be used while naming; phones give its space to the choices. */
  .cheer-editor[data-step="2"] .cheer-editor-inner { grid-template-areas: "header header" "scene scene" "fields fields" "error error" "actions actions"; }
  .cheer-editor[data-step="2"] .cheer-map-panel { display: none; }
  .cheer-editor[data-step="2"] #street { height: clamp(180px, calc(100dvh - 570px), 280px); }
  .cheer-avatars { width: 100%; }
  .cheer-avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cheer-avatars [data-avatar] { height: 56px; }
  .cheer-avatars .cheer-figure { width: 48px; height: 56px; }
  .cheer-avatar-choice { font-size: 11px; }
  .cheer-error-row { grid-area: error; }
  .cheer-editor-actions { grid-area: actions; padding: 12px 0 8px; margin: 0; }
  #cheer-submit { min-width: 156px; min-height: 48px; }
}
.cheer-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Far sidewalk (2) < runner (3) < near sidewalk (4), scoped to the mounting. */
.cheer-side-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cheer-side-layer[data-side="right"] { z-index: 4; }
.cheer-marker { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; transform: translate(-50%, -100%); color: var(--black); pointer-events: auto; }
.cheer-marker .cheer-figure { flex: 0 0 auto; }
.cheer-marker-art { position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 44px; height: 44px; transform: scale(var(--cheer-scale, 1)); transform-origin: 50% 100%; }
.cheer-figure { display: inline-block; width: 40px; height: 36px; flex-shrink: 0; }
.cheer-figure > svg { display: block; width: 100%; height: 100%; transform: scale(var(--supporter-size, 1)); transform-origin: 50% 100%; }
.cheer-flip { display: block; margin-bottom: 12px; }
.cheer-flip > span { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--gold); border-radius: 3px; color: var(--gold); }
.cheer-flip-icon { font-size: 24px; line-height: 1; }
.cheer-flip-state { margin-left: auto; font-size: 12px; }
.cheer-flip-on { display: none; }
.cheer-avatars .cheer-flip input:checked + span { background: var(--gold); color: var(--black); }
.cheer-flip input:checked + span .cheer-flip-off { display: none; }
.cheer-flip input:checked + span .cheer-flip-on { display: inline; }
.cheer-name { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 8px; line-height: 1.4; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; background: var(--paper); border-radius: 2px; }
.cheer-message { --bubble-outline: #aaa191; position: absolute; bottom: calc(var(--supporter-height, 36px) + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 84px; padding: 4px 5px; border-radius: 5px; box-shadow: 0 0 0 .5px var(--bubble-outline); color: var(--black); background: #fff; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; text-align: left; }
.cheer-message::after { content: ''; position: absolute; bottom: -3px; left: calc(50% - 3px); width: 6px; height: 6px; background: #fff; box-shadow: .5px .5px 0 0 var(--bubble-outline); transform: rotate(45deg); }
.cheer-marker.is-selected { z-index: 1; }
.cheer-marker.is-selected .cheer-name { background: var(--gold); }
.cheer-marker.is-dense .cheer-name { visibility: hidden; }
.cheer-marker.is-dense .cheer-message { visibility: hidden; }
.cheer-marker[data-cheer-id="draft"] { pointer-events: none; }
.puppet-joint { transform-origin: 0 0; animation: puppet-sway var(--puppet-duration) ease-in-out var(--puppet-delay) infinite; }
@keyframes puppet-sway { 0%, 100% { transform: rotate(calc(-1 * var(--puppet-swing))); } 50% { transform: rotate(var(--puppet-swing)); } }
.cheer-layer.is-paused *, .cheer-marker[hidden] *, .cheer-hidden .cheer-figure *, .cheer-ui dialog:not([open]) * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cheer-figure * { animation: none !important; } }