/* Centaur world in 3D (harbor.js): the town fills the map's pane, with its labels, one standing line and a card over it. */
.cp-page:is([data-view="game"], [data-view="dashboard"]) .cp-view { overflow: hidden; min-height: 70dvh; }
.cp-world { position: absolute; inset: 0; overflow: hidden; background: var(--bg-primary); font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; touch-action: none; user-select: none; -webkit-user-select: none; }
.cw3-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.cw3-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* The broadcast's player lies behind the canvas, which is clear over the screen's picture (harbor/broadcast.js). */
.cw3-air { position: absolute; inset: 0; background: #000; pointer-events: none; }
.cw3-air-box { background: #000; backface-visibility: hidden; pointer-events: none !important; }
.cw3-air-box iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.cw3-lab { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent); background: var(--bg-primary); border: 1px solid var(--brand-primary-light); will-change: transform; }
.cw3-lab.minor { font-size: 10px; letter-spacing: 0.04em; text-transform: none; color: var(--text-secondary); border-color: transparent; background: color-mix(in srgb, var(--bg-primary) 60%, transparent); }
/* Words over a knight, and the key to press: filled with the accent, as live things are. */
.cw3-lab:is(.say, .key) { font-weight: 600; color: var(--bg-primary); background: var(--brand-accent); border-color: var(--brand-accent); }
.cw3-lab.say { text-transform: none; letter-spacing: 0; white-space: normal; width: max-content; max-width: min(16rem, 60%); overflow-wrap: anywhere; }
.cw3-lab.say[data-state="pending"] { opacity: 0.55; }
.cw3-lab.say[data-state="failed"] { color: var(--text-primary); background: var(--bg-primary); border-color: rgb(var(--loss-accent-rgb)); }
.cw3-lab.key { padding: 1px 6px; font-weight: 700; }
/* One interface over the town: the standing and the camera on top, the gestures and the town's input bottom left, the
   card of what Centaur stands by bottom right. All share the map's frame (frame.css). */
.cw3-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem; padding: 0.75rem; pointer-events: none; }
.cw3-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; width: 100%; }
.cw3-chips, .cw3-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cw3-tools { justify-content: flex-end; }
.cw3-bar > *, .cw3-social > *, .cw3-flight { pointer-events: auto; }
.cw3-chip[hidden] { display: none; }
[data-unread] { margin-left: 0.3rem; font-weight: 600; color: var(--brand-accent); }
[data-unread][hidden] { display: none; }
.cw3-chip, .cw3-ui .btn-group, .cw3-more, .cw3-say input { background: color-mix(in srgb, var(--bg-primary) 86%, transparent); }
.cw3-chip { padding: 0.35rem 0.6rem; font-size: 0.75rem; border: 1px solid var(--border-color); font-variant-numeric: tabular-nums; }
.cw3-chip b { color: var(--brand-accent); font-weight: 600; }
.cw3-ui .btn.active { color: var(--bg-primary); background: var(--brand-accent); border-color: var(--brand-accent); }
.cw3-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 0; }
.cw3-social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cw3-social[hidden], .cw3-say[hidden] { display: none; }
/* The town's input: the switch says who hears the line, the town or your own Centaur, and the line follows. The one
   that hears is filled like every pressed control here. An ask of Centaur is typed on Centaur's blue. */
.cw3-say { display: flex; align-items: stretch; }
.cw3-say .btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.cw3-say .btn[hidden] { display: none; }
.cw3-say .btn:not([hidden]) ~ .btn:not([hidden]) { margin-left: -1px; }
.cw3-say .bi { font-size: 0.8rem; line-height: 1; }
.cw3-mark { display: block; width: 0.95rem; height: 0.95rem; }
.cw3-mark svg { display: block; width: 100%; height: 100%; }
.cw3-mark .c { fill: var(--brand-accent); }
.cw3-mark .e { fill: var(--brand-primary-light); }
.cw3-mark .k { fill: var(--bg-primary); }
.cw3-say .btn.active .cw3-mark .c { fill: var(--bg-primary); }
.cw3-say .btn.active .cw3-mark .e { fill: var(--brand-primary-light); }
.cw3-say .btn.active .cw3-mark .k { fill: var(--brand-accent); }
.cw3-say input { width: 14rem; min-width: 0; margin-left: -1px; font-family: inherit; font-size: 0.75rem; color: var(--text-primary); border-color: var(--border-color); }
.cw3-say[data-to="centaur"] input { border-color: var(--brand-primary-light); background: color-mix(in srgb, var(--brand-primary-light) 34%, var(--bg-primary)); }
/* A card taller than the room under the bar scrolls in place. */
.cw3-cards { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; min-width: 0; min-height: 0; max-height: 100%; margin-left: auto; }
.cw3-card[data-open] { min-height: 0; overflow-y: auto; }
/* A card comes up from the foot and goes back down. Closed, it takes no room. */
.cw3-card { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s; pointer-events: auto; }
.cw3-card[data-open] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cw3-card { width: min(21rem, 100%); padding: 0.75rem 0.9rem; font-size: 0.75rem; user-select: text; -webkit-user-select: text; }
.cw3-card:not([data-open]) { position: absolute; right: 0; bottom: 0; }
.cw3-card-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-accent); overflow-wrap: anywhere; }
.cw3-card-kind { margin-bottom: 0.5rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.cw3-card-kind:empty { display: none; }
.cw3-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0.5rem 0 0; }
.cw3-card dl:empty { display: none; }
.cw3-card dt { font-weight: 400; color: var(--text-secondary); }
.cw3-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cw3-card .btn { margin-top: 0.6rem; }
.cw3-card[data-wardrobe] { width: min(24rem, 100%); }
.cw3-close { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.6rem; }
.cw3-pieces { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem; }
.cw3-pieces .btn { margin-top: 0; }
.cw3-pieces .cw3-locked { border-style: dashed; color: var(--text-muted); }
.cw3-note { min-height: 1.2em; color: var(--slot-color-2); }
/* A narrow view keeps the bar to one row: the chip says less, and the camera and the quality fold under one button. */
.cw3-more { display: none; }
.cw3-view { display: contents; }
.cp-world[data-narrow] .cw3-bar { flex-wrap: nowrap; gap: 0.35rem; }
.cp-world[data-narrow] .cw3-chips { flex: 0 1 auto; min-width: 0; }
.cp-world[data-narrow] .cw3-chip { padding: 0.3rem 0.45rem; font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-world[data-narrow] .cw3-chip-more { display: none; }
.cp-world[data-narrow] .cw3-tools { position: relative; flex: none; flex-wrap: nowrap; gap: 0.35rem; }
.cp-world[data-narrow] .cw3-tools .btn { padding-inline: 0.5rem; }
.cp-world[data-narrow] .cw3-more { display: inline-block; }
.cp-world[data-narrow] .cw3-view { display: none; position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 2; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.cp-world[data-narrow][data-more-open] .cw3-view { display: flex; }
/* A narrow view stacks the foot: a card over the gestures, and the town's input on a row of its own. Its text is large
   enough that a phone does not zoom the page to it. */
.cp-world[data-narrow] .cw3-foot { flex-direction: column-reverse; align-items: stretch; }
.cp-world[data-narrow] .cw3-cards { margin-left: 0; }
.cp-world[data-narrow] .cw3-card { width: 100%; }
/* A narrow view's card of the flight you came down from stands at the top, beside the small chart, clear of Centaur. */
.cp-world[data-narrow] :is(.cw3-foot, .cw3-cards):has([data-card][data-aside][data-open]) { position: static; }
.cp-world[data-narrow] .cw3-card[data-card][data-aside] { position: absolute; left: 0.75rem; top: 3.1rem; width: calc(100% - 104px - 2.1rem); }
.cp-world[data-narrow] .cw3-social { flex-wrap: nowrap; gap: 0.35rem; }
.cp-world[data-narrow] .cw3-social .btn { padding-inline: 0.45rem; font-size: 0.6875rem; letter-spacing: 0.02em; }
.cp-world[data-narrow] .cw3-say { flex: 1 1 0; min-width: 0; }
.cp-world[data-narrow] .cw3-say input { flex: 1 1 0; width: auto; font-size: 16px; }
.cp-world[data-narrow] .cw3-say input::placeholder { font-size: 0.75rem; }
/* Beside the gestures the switch is its two marks. In the input, the gestures step aside and it has its words. */
.cp-world[data-narrow]:not(:has(.fh:not([hidden]))) [data-emotes]:not([hidden]) ~ .cw3-say:not(:has(input:focus)) .cw3-to { display: none; }
.cp-world[data-narrow] .cw3-say .btn { min-width: 2.4rem; justify-content: center; }
.cp-world[data-narrow] .cw3-social:has(.cw3-say input:focus) [data-emotes] { display: none; }
/* The step through your door: the view goes dark and comes back. */
.cw3-fade { position: absolute; inset: 0; background: var(--bg-primary); opacity: 0; pointer-events: none; transition: opacity 0.16s linear; }
.cp-world[data-fade] .cw3-fade { opacity: 1; }
.cw3-pin { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; pointer-events: none; background: var(--text-primary); }
.cw3-pin > * { width: 100%; height: 100%; }
/* The loading screen: the town at night under a scrim, the lockup at its foot, and a rule that fills as the town arrives.
   The empty pane shows the same picture before the script runs. It fades into the live town on the first frame. */
.cp-world:empty, .cw3-boot { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 35%, transparent) 0%, color-mix(in srgb, var(--bg-primary) 20%, transparent) 38%, color-mix(in srgb, var(--bg-primary) 80%, transparent) 76%, var(--bg-primary) 100%), url("boot.webp") 50% 50% / cover no-repeat var(--bg-primary); }
.cw3-boot { position: absolute; inset: 0; z-index: 5; display: grid; align-content: end; padding: 0 6% max(2rem, 7%); container-type: size; transition: opacity 0.9s ease; }
.cw3-boot[data-done] { opacity: 0; pointer-events: none; }
.cw3-boot-name { margin: 0; font: 700 clamp(1.75rem, 6.4cqi, 5.5rem) / 0.95 "Poppins", sans-serif; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text-primary); }
.cw3-boot-name span { display: block; }
.cw3-boot-sub { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: clamp(0.6rem, 1.4cqi, 1.25rem) 0 0; font: clamp(0.72rem, 1.9cqi, 1.3rem) var(--bs-font-monospace); letter-spacing: 0.32em; text-transform: uppercase; color: var(--brand-accent); }
.cw3-boot-line { height: 2px; margin-top: clamp(0.7rem, 1.4cqi, 1.25rem); background: color-mix(in srgb, var(--brand-accent) 35%, transparent); }
.cw3-boot-line i { display: block; width: 0; height: 100%; background: var(--brand-accent); transition: width 0.3s ease; }
@container (max-width: 520px) { .cw3-boot-name { font-size: 7.6cqi; } .cw3-boot-sub { letter-spacing: 0.22em; } }
@media (prefers-reduced-motion: reduce) { .cw3-card, .cw3-fade, .cw3-boot, .cw3-boot-line i { transition: none; } }

/* The wardrobe's sections, the badges, a letter to write and the map of places: all in the card's own frame. */
.cw3-card:is([data-wardrobe], [data-panel]) { width: min(24rem, 100%); }
.cw3-tabs { display: flex; flex-wrap: wrap; margin: 0 1.6rem 0.75rem 0; }
.cw3-tabs .btn { margin-top: 0; }
.cw3-quests { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.cw3-quests li { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.6rem; align-items: start; color: var(--text-secondary); }
.cw3-quests li > div { display: grid; }
.cw3-quests b { font-weight: 600; color: var(--text-primary); }
.cw3-quests li.earned :is(.bi, b) { color: var(--brand-accent); }
.cw3-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.95rem; color: var(--brand-accent); }
.cw3-write { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.cw3-write textarea { font-family: inherit; font-size: 0.8rem; color: var(--text-primary); background: var(--bg-primary); border-color: var(--border-color); resize: none; }
.cw3-write-foot { display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cw3-write-foot .btn { margin-top: 0; }
.cw3-note[data-state="ok"] { color: var(--brand-accent); }
/* The map (harbor/atlas.js): the chart of the world beside the lists of places and of who is here now. It takes the
   whole view under the bar. */
.cw3-foot:has(> .cw3-cards > [data-panel][data-kind="map"]) { position: static; }
.cw3-cards:has(> [data-panel][data-kind="map"]) { position: absolute; inset: 3.5rem 0.75rem 0.75rem auto; width: min(66rem, calc(100% - 1.5rem)); max-height: none; z-index: 3; justify-content: flex-end; }
/* The flight readouts wait under the map. */
.cw3-ui:has([data-panel][data-kind="map"]) :is(.fh, .fh-side) { visibility: hidden; }
.cw3-card[data-panel][data-kind="map"] { width: 100%; height: 100%; padding: 0; overflow: hidden; }
.cw3-atlas { display: grid; grid-template: "chart title" auto "chart side" minmax(0, 1fr) / minmax(0, 1fr) 17rem; height: 100%; }
.cw3-atlas > .cw3-card-title { grid-area: title; padding: 0.75rem 0.9rem 0; }
.cw3-atlas-chart { grid-area: chart; position: relative; min-height: 0; border-right: 1px solid var(--border-color); background: var(--bg-primary); touch-action: none; user-select: none; -webkit-user-select: none; }
.cw3-atlas-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw3-atlas-zoom { position: absolute; right: 0.5rem; bottom: 0.5rem; background: var(--bg-primary); }
.cw3-card .cw3-atlas-zoom .btn { margin-top: 0; }
.cw3-atlas-side { grid-area: side; min-height: 0; padding: 0 0.9rem 0.75rem; overflow-y: auto; }
.cw3-atlas-head { margin: 0.8rem 0 0; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cw3-atlas-here { flex-direction: column; flex-wrap: nowrap; }
.cw3-atlas-member { display: flex; align-items: center; gap: 0.5rem; text-align: left; text-transform: none; letter-spacing: 0; }
.cw3-atlas-member i { flex: none; width: 7px; height: 7px; background: var(--brand-accent); }
.cw3-atlas-member[data-state="home"] i { background: none; box-shadow: inset 0 0 0 1.5px var(--brand-accent); }
.cw3-atlas-member[data-state="fly"] i { width: 9px; height: 9px; clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); }
.cw3-atlas-member span { margin-left: auto; font-size: 0.6875rem; color: var(--text-secondary); }
.cw3-atlas-none { margin: 0.4rem 0 0; color: var(--text-secondary); }
.cp-world[data-narrow] .cw3-cards:has(> [data-panel][data-kind="map"]) { top: 3.1rem; }
/* A narrow view stacks them: the chart over the lists. Two fingers zoom the chart. */
.cp-world[data-narrow] .cw3-atlas { grid-template: "title" auto "chart" minmax(0, 11fr) "side" minmax(0, 9fr) / minmax(0, 1fr); }
.cp-world[data-narrow] .cw3-atlas > .cw3-card-title { padding: 0.55rem 0.9rem; }
.cp-world[data-narrow] .cw3-atlas-chart { border-right: 0; border-block: 1px solid var(--border-color); }
.cp-world[data-narrow] .cw3-atlas-zoom .btn:not(:last-child) { display: none; }
/* The small chart in the view's corner, under the tools. A press opens the map. */
.cw3-mini { position: absolute; right: 0.75rem; top: 3.5rem; width: 172px; height: 172px; padding: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 0; background: color-mix(in srgb, var(--bg-primary) 86%, transparent); cursor: pointer; pointer-events: auto; }
.cw3-mini[hidden] { display: none; }
.cw3-mini:is(:hover, :focus-visible) { border-color: var(--brand-accent); outline: none; }
.cw3-mini canvas { display: block; width: 100%; height: 100%; }
.cw3-mini kbd { position: absolute; left: 4px; bottom: 4px; padding: 0 5px; font: 600 10px/1.5 inherit; border: 1px solid var(--border-color); border-radius: 0; color: var(--text-secondary); background: var(--bg-primary); }
.cp-world[data-narrow] .cw3-mini { top: 3.1rem; width: 104px; height: 104px; }
.cw3-places { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.cw3-places .btn { margin-top: 0; }
/* A letter in a list, the same at your mailbox and in the chat column (letters-chat.js). */
.cl-list { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.cl-letter { display: grid; gap: 0.3rem; }
.cl-letter[data-fresh] .cl-from::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; background: var(--brand-accent); }
.cl-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-size: 11px; color: var(--text-secondary); }
.cl-from { font-weight: 600; letter-spacing: 0.06em; color: var(--brand-accent); }
.cl-when { margin-left: auto; font-variant-numeric: tabular-nums; }
.cl-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.cl-acts { display: flex; gap: 0.3rem; }
.cl-acts .btn, .cl-blocked .btn { margin-top: 0; }
.cl-blocked { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--text-secondary); }
.cl-none { margin: 0; color: var(--text-secondary); }
/* Touch flight: a stick for pitch and bank, and two buttons. */
.cw3-flight { display: flex; align-items: flex-end; gap: 0.75rem; }
.cw3-flight[hidden] { display: none; }
.cw3-stick { position: relative; width: 104px; height: 104px; border: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-primary) 60%, transparent); touch-action: none; }
.cw3-stick i { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; background: var(--brand-accent); opacity: 0.85; }
.cw3-flight .btn { padding: 0.7rem 0.9rem; }

/* The chat column's channels (town-chat.js): a switch in the header between the Centaur conversation, the town, your
   letters and a person you talk to, and each channel's own pane in the chat's classes. */
.centaur-widget .cw-channels { display: flex; gap: 4px; }
.centaur-widget .cw-channels[hidden] { display: none; }
.centaur-widget:has(.cw-channels:not([hidden])) .cw-name { display: none; }
.centaur-widget .cw-channel { display: inline-flex; align-items: center; gap: 5px; padding: 0.15em 0.45em; border: 1px solid var(--cw-border); background: var(--bg-primary); color: var(--cw-muted); font: 600 11px var(--cw-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.centaur-widget .cw-channel:is(:hover, :focus-visible) { color: var(--cw-text); }
.centaur-widget .cw-channel[aria-pressed="true"] { color: var(--cw-accent); border-color: var(--brand-primary-light); }
.centaur-widget .cw-channel-mark { width: 12px; height: 12px; }
.centaur-widget .cw-channel-mark svg { display: block; width: 100%; height: 100%; }
.centaur-widget .cw-channel-mark .c { fill: var(--cw-accent); }
.centaur-widget .cw-channel-mark .e { fill: var(--brand-primary-light); }
.centaur-widget .cw-channel-mark .k { fill: var(--bg-primary); }
.centaur-widget .cw-channel-dot { display: inline-block; width: 6px; height: 6px; margin-left: 1px; vertical-align: 1px; background: var(--cw-accent); }
.centaur-widget .cw-channel-dot[hidden] { display: none; }
.centaur-widget .cw-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.centaur-widget[data-channel="town"] .cw-pane[data-pane="town"], .centaur-widget[data-channel="letters"] .cw-pane[data-pane="letters"], .centaur-widget[data-channel="person"] .cw-pane[data-pane="person"] { display: flex; }
.centaur-widget:is([data-channel="town"], [data-channel="letters"], [data-channel="person"]) .cw-panel > :not(.cw-header, .cw-pane) { display: none !important; }
.centaur-widget .cw-letters { overflow-y: auto; padding: 16px; font-size: 13.5px; }
.centaur-widget .cw-person .cw-starter-list { margin: 0; padding: 0 16px 8px; list-style: none; }
.centaur-widget .cw-person .cw-starter-list[hidden], .centaur-widget .cw-person .cw-form[hidden] { display: none; }
.centaur-widget .cw-person .cw-more { display: inline-block; width: 0; height: 0; margin-left: 8px; padding: 0; background: none; cursor: pointer; }
.centaur-widget .cw-person .cw-town-text > p { display: inline; margin: 0; }
.centaur-widget .cw-town-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.centaur-widget .cw-town-line { font-size: 13.5px; overflow-wrap: anywhere; }
.centaur-widget .cw-town-line[data-state="pending"] { opacity: 0.55; }
.centaur-widget .cw-town-line[data-state="failed"] .cw-town-text { color: var(--cw-muted); }
.centaur-widget .cw-town-name { margin-right: 8px; padding: 0; border: 0; background: none; color: var(--cw-accent); font: 600 11px var(--cw-mono); letter-spacing: 0.06em; }
.centaur-widget button.cw-town-name { cursor: pointer; }
.centaur-widget button.cw-town-name:is(:hover, :focus-visible) { color: var(--cw-text); }
.centaur-widget .cw-town-line .cw-caption { display: inline; margin-left: 8px; font-style: normal; color: rgb(var(--loss-accent-rgb)); }
.centaur-widget .cw-town-line .cw-text-btn { height: auto; margin-left: 8px; }
.centaur-widget .cw-town-hidden { color: var(--cw-muted); font-size: 11px; }
/* A member's profile Scores charts, in a wide panel. */
.cw3-cards:has(> [data-panel][data-kind="scores"]) { width: min(56rem, 100%); }
.cw3-card[data-panel][data-kind="scores"] { width: 100%; }
.cw3-scores { display: block; width: 100%; height: min(34rem, 62dvh); margin-top: 0.4rem; border: 1px solid var(--border-color); background: var(--bg-primary); }
/* A first-time hint: one short line, low in the view, in the standing chip's style. */
.cw3-hint { position: absolute; left: 50%; bottom: 4.25rem; max-width: calc(100% - 2rem); padding: 0.4rem 0.75rem; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--text-primary); background: color-mix(in srgb, var(--bg-primary) 88%, transparent); border: 1px solid var(--border-color); transform: translateX(-50%); pointer-events: none; animation: cw3-hint-in 0.3s ease; }
.cw3-hint[hidden] { display: none; }
@keyframes cw3-hint-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .cw3-hint { animation: none; } }
/* The chat column folds away in the 3D view, the dashboard and the notebook on a wide screen, and the view takes its width. */
.cp-chat-toggle { display: none; }
@media (min-width: 1200px), (min-width: 992px) and (orientation: landscape) {
  .cp-page:is([data-view="game"], [data-view="dashboard"], [data-view="notebook"]) .cp-view { position: relative; }
  .cp-page:is([data-view="game"], [data-view="dashboard"], [data-view="notebook"]) .cp-chat-toggle { display: inline-flex; position: absolute; left: 0; top: 50%; z-index: 5; padding: 0.4rem 0.3rem; transform: translateY(-50%); background: color-mix(in srgb, var(--bg-primary) 86%, transparent); }
  .cp-page:is([data-view="game"], [data-view="dashboard"], [data-view="notebook"])[data-chat="hidden"] .cp-chat { display: none; }
  /* The view takes the width. Expanded, the notebook alone fills the window. */
  .cp-page:is([data-view="game"], [data-view="dashboard"], [data-view="notebook"])[data-chat="hidden"] .cp-grid { grid-template-columns: minmax(0, 1fr); }
  /* The dashboard's tables and the notebook start clear of the control. */
  .cp-page[data-view="dashboard"] .cdb, .cp-page[data-view="notebook"] .cp-notebook { padding-left: 1.75rem; }
}
/* On a narrow view Centaur stands low in the middle, so a hint sits at the top, beside the small chart. */
.cp-world[data-narrow] .cw3-hint { left: 0.75rem; top: 3.1rem; bottom: auto; max-width: calc(100% - 104px - 2.1rem); transform: none; animation: none; }
.cp-world:not([data-narrow]):has([data-social]:not([hidden])) .cw3-hint { bottom: 5.25rem; }
/* In the air a hint sits over the flight readouts, and over the landing key when that shows. */
/* Away from the city the readouts have no data row, and what stands on them comes down by its height. */
.cp-world:has(.fh[data-bare]:not([hidden])) { --fh-bare: 3.1rem; }
.cp-world:has(.fh:not([hidden])) .cw3-hint, .cp-world:not([data-narrow]):has(.fh:not([hidden])) .cw3-hint { bottom: calc(8.25rem - var(--fh-bare, 0rem)); }
.cp-world:has(.fh-cue:not([hidden])) .cw3-hint, .cp-world:not([data-narrow]):has(.fh-cue:not([hidden])) .cw3-hint { bottom: calc(9.6rem - var(--fh-bare, 0rem)); }
/* In the air the gestures give way to the flight readouts, and the input stands small over their left end: the switch
   keeps its marks and drops its words, and while you type the one that hears is named again. A view wide enough has it beside them. */
.cp-world:has(.fh:not([hidden])) [data-emotes] { display: none; }
.cp-world:has(.fh:not([hidden])) .cw3-social { margin-bottom: calc(7.2rem - var(--fh-bare, 0rem)); }
.cp-world[data-wide]:has(.fh:not([hidden])) .cw3-social { margin-bottom: 0; }
.cp-world:not([data-narrow]):has(.fh:not([hidden])) .cw3-to { display: none; }
.cp-world:not([data-narrow]):has(.fh:not([hidden])) .cw3-say input { width: 9rem; }
.cp-world:not([data-narrow]):has(.fh:not([hidden])) .cw3-say:has(input:focus) .active .cw3-to { display: inline; }
.cp-world:not([data-narrow]):has(.fh:not([hidden])) .cw3-say input:focus { width: 11rem; }
.cp-world:not([data-narrow], [data-wide]):has(.fh:not([hidden])):has([data-say]:not([hidden])) .cw3-hint { bottom: calc(10.2rem - var(--fh-bare, 0rem)); }
/* On a narrow view in the air the input is a row over the readouts, the stick and its buttons stand on it, and the
   landing key goes up between them. */
.cp-world[data-narrow]:has(.fh:not([hidden])):has([data-say]:not([hidden])) .cw3-flight { margin-bottom: 0; }
.cp-world[data-narrow]:has(.fh:not([hidden])):has([data-say]:not([hidden])) .fh-cue { bottom: calc(10.4rem - var(--fh-bare, 0rem)); }
.cp-world[data-narrow]:has(.fh:not([hidden])) .cw3-hint { bottom: auto; }
/* The town square's broadcast (harbor/broadcast.js): the video over the town, in the card's frame. The town runs on behind it. */
.cw3-tv { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 0.75rem; container-type: size; background: color-mix(in srgb, var(--bg-primary) 78%, transparent); pointer-events: auto; animation: cw3-tv-in 0.16s ease; }
.cw3-tv-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; width: min(64rem, 100cqw - 1.5rem, (100cqh - 9.5rem) * 16 / 9); min-width: min(18rem, 100%); padding: 0.75rem 0.9rem; font-size: 0.75rem; border: 1px solid var(--brand-primary-light); background: var(--bg-primary); user-select: text; -webkit-user-select: text; }
.cw3-tv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.cw3-tv-words { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; min-width: 0; }
.cw3-tv-tag { padding: 1px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bg-primary); background: var(--brand-accent); }
.cw3-tv-tag[hidden] { display: none; }
.cw3-tv-title { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw3-tv-tag[hidden] + .cw3-tv-title { grid-column: 1 / -1; }
.cw3-tv-kind { grid-column: 1 / -1; color: var(--text-secondary); }
.cw3-tv-kind:empty { display: none; }
.cw3-tv-head .btn-close { flex: none; font-size: 0.6rem; }
.cw3-tv-stage { display: grid; place-items: center; aspect-ratio: 16 / 9; border: 1px solid var(--border-color); background: #000; }
.cw3-tv-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.cw3-tv-box[data-kind="discord"] { width: min(26rem, 100cqw - 1.5rem); }
.cw3-tv-box[data-kind="discord"] .cw3-tv-stage { aspect-ratio: auto; padding: 1.5rem 0; border: 0; background: none; }
.cw3-tv-box[data-kind="off"] .cw3-tv-stage { background: var(--bg-secondary); }
.cw3-tv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cw3-tv-foot > [hidden] { display: none; }
.cw3-tv-meter { display: flex; flex: 1 0 100%; align-items: center; gap: 0.75rem; }
.cw3-tv-bar { flex: 1; height: 2px; background: var(--brand-primary-light); }
.cw3-tv-bar i { display: block; height: 100%; background: var(--text-primary); }
.cw3-tv-next { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw3-tv-next b { margin-right: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cw3-tv-next span { color: var(--text-primary); }
.cw3-tv-note { color: var(--slot-color-2); }
.cw3-tv-link { margin-left: auto; color: var(--brand-accent); }
@keyframes cw3-tv-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cw3-tv { animation: none; } }
/* Thumb controls on a touch screen: a column of buttons at the right edge, over the gestures and under the minimap,
   and on a ride a stick beside them. Centaur stands left of the middle of a narrow view, so the right is clear of it.
   Each is large enough for a thumb. The E button is cyan because it acts on the thing in reach. */
.cw3-thumbs { position: absolute; right: 0.75rem; bottom: 0.75rem; display: flex; align-items: flex-end; gap: 0.5rem; pointer-events: none; }
.cw3-thumbs[hidden], .cw3-thumbs [hidden] { display: none; }
.cw3-thumb-col { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.cw3-thumbs .cw3-stick, .cw3-thumbs .btn { pointer-events: auto; user-select: none; -webkit-user-select: none; }
.cw3-thumbs .btn { min-width: 4.5rem; min-height: 2.75rem; padding: 0.5rem 0.7rem; background: color-mix(in srgb, var(--bg-primary) 86%, transparent); touch-action: manipulation; }
.cw3-thumbs .cw3-thumb-act { color: var(--brand-accent); border-color: var(--brand-accent); }
.cp-world[data-narrow] .cw3-thumbs { bottom: 3.6rem; }
/* Touch flight: the stick and its buttons stand over the flight strip, never under it. On a narrow view the stick is
   at the left thumb and the buttons at the right, with the landing cue between them. */
.cp-world:has(.fh:not([hidden])) .cw3-flight { margin-bottom: calc(7.2rem - var(--fh-bare, 0rem)); }
.cp-world[data-narrow] .cw3-flight { justify-content: space-between; }
.cp-world[data-narrow] .cw3-flight .btn { min-width: 4.5rem; min-height: 2.75rem; }
.cw3-flight .btn { background: color-mix(in srgb, var(--bg-primary) 86%, transparent); }
/* A narrow view's hint goes under the chip that names the place, when that chip shows. */
.cp-world[data-narrow]:has([data-where]:not([hidden])) .cw3-hint { top: 5.4rem; }

/* The people's palette (people-art.js): harbor.js reads each pixel's fill when it draws a person into a texture. */
.cg-person .k { fill: var(--bg-primary); }
.cg-person .h { fill: var(--hair); }
.cg-person .s { fill: var(--skin); }
.cg-person .z { fill: var(--skin2); }
.cg-person .j { fill: var(--top); }
.cg-person .y { fill: var(--top2); }
.cg-person .w { fill: var(--shirt); }
.cg-person .i { fill: var(--brand-primary); }
.cg-person .a { fill: var(--pin); }
.cg-person .t { fill: var(--legs); }
.cg-person .b { fill: var(--shoes); }
.cg-person .g { fill: var(--held); }
.cg-person .d { fill: var(--held2); }
.pk-sovereign {
  --hair: color-mix(in srgb, var(--text-primary) 66%, var(--bg-primary));
  --skin: color-mix(in srgb, var(--composite-accent) 48%, var(--text-primary));
  --skin2: color-mix(in srgb, var(--composite-accent) 85%, var(--bg-primary));
  --top: color-mix(in srgb, var(--text-primary) 26%, var(--bg-primary));
  --top2: color-mix(in srgb, var(--text-primary) 17%, var(--bg-primary));
  --shirt: color-mix(in srgb, var(--text-primary) 88%, var(--bg-primary));
  --pin: var(--proxy-accent);
  --legs: color-mix(in srgb, var(--text-primary) 20%, var(--bg-primary));
  --shoes: color-mix(in srgb, var(--text-primary) 8%, var(--bg-primary));
}
.pk-researcher {
  --hair: color-mix(in srgb, rgb(var(--loss-accent-rgb)) 28%, color-mix(in srgb, var(--composite-accent) 26%, var(--bg-primary)));
  --skin: color-mix(in srgb, var(--composite-accent) 72%, var(--bg-primary));
  --skin2: color-mix(in srgb, var(--composite-accent) 56%, var(--bg-primary));
  --top: color-mix(in srgb, var(--cloud-accent) 48%, var(--bg-primary));
  --top2: color-mix(in srgb, var(--cloud-accent) 34%, var(--bg-primary));
  --shirt: color-mix(in srgb, var(--text-primary) 82%, var(--bg-primary));
  --held: color-mix(in srgb, var(--text-primary) 86%, var(--composite-accent));
  --held2: color-mix(in srgb, var(--composite-accent) 50%, var(--bg-primary));
  --legs: color-mix(in srgb, var(--text-primary) 30%, var(--bg-primary));
  --shoes: color-mix(in srgb, var(--composite-accent) 22%, var(--bg-primary));
}
.pk-engineer {
  --hair: color-mix(in srgb, var(--composite-accent) 16%, var(--bg-primary));
  --skin: color-mix(in srgb, rgb(var(--loss-accent-rgb)) 20%, color-mix(in srgb, var(--composite-accent) 46%, var(--bg-primary)));
  --skin2: color-mix(in srgb, rgb(var(--loss-accent-rgb)) 14%, color-mix(in srgb, var(--composite-accent) 34%, var(--bg-primary)));
  --top: color-mix(in srgb, var(--ls-accent) 36%, var(--bg-primary));
  --top2: color-mix(in srgb, var(--ls-accent) 24%, var(--bg-primary));
  --shirt: color-mix(in srgb, var(--ls-accent) 55%, var(--bg-primary));
  --pin: var(--brand-accent);
  --held: color-mix(in srgb, var(--brand-accent) 70%, var(--bg-primary));
  --held2: color-mix(in srgb, var(--text-primary) 28%, var(--bg-primary));
  --legs: color-mix(in srgb, var(--composite-accent) 38%, var(--bg-primary));
  --shoes: color-mix(in srgb, var(--text-primary) 10%, var(--bg-primary));
}
.pk-curator {
  --hair: color-mix(in srgb, var(--text-primary) 40%, var(--bg-primary));
  --skin: color-mix(in srgb, var(--composite-accent) 64%, var(--bg-primary));
  --skin2: color-mix(in srgb, var(--composite-accent) 48%, var(--bg-primary));
  --top: color-mix(in srgb, var(--composite-accent) 30%, var(--bg-primary));
  --top2: color-mix(in srgb, var(--composite-accent) 20%, var(--bg-primary));
  --shirt: color-mix(in srgb, var(--text-primary) 85%, var(--bg-primary));
  --pin: var(--brand-accent);
  --held: color-mix(in srgb, var(--text-primary) 86%, var(--bg-primary));
  --held2: color-mix(in srgb, var(--composite-accent) 45%, var(--bg-primary));
  --legs: color-mix(in srgb, var(--text-primary) 24%, var(--bg-primary));
  --shoes: color-mix(in srgb, var(--composite-accent) 18%, var(--bg-primary));
}
.pk-intern {
  --hair: color-mix(in srgb, var(--composite-accent) 40%, var(--bg-primary));
  --skin: color-mix(in srgb, var(--composite-accent) 78%, var(--text-primary));
  --skin2: color-mix(in srgb, var(--composite-accent) 60%, var(--bg-primary));
  --top: color-mix(in srgb, rgb(var(--loss-accent-rgb)) 38%, var(--bg-primary));
  --top2: color-mix(in srgb, rgb(var(--loss-accent-rgb)) 26%, var(--bg-primary));
  --held: color-mix(in srgb, var(--proxy-accent) 70%, var(--bg-primary));
  --held2: color-mix(in srgb, var(--text-primary) 18%, var(--bg-primary));
  --legs: color-mix(in srgb, var(--brand-accent) 30%, var(--bg-primary));
  --shoes: color-mix(in srgb, var(--text-primary) 70%, var(--bg-primary));
}
/* The speech mark over a person with a line you have not heard. */
.cg-person .say .o, .cg-person .say .n { fill: var(--bg-primary); }
.cg-person .say .c { fill: var(--brand-accent); }