/*
File: carousel/css/standalone-carousel.css
Version: 2.0.0 - SIMPLIFIED: Generate button moved to generate-button.css
Date: 2026-01-09
~160 lines (was ~300)
Carousel layout only - generate button styles in generate-button.css
*/
/* ═══════════════════════════════════════════════════════════════════════════
CSS VARIABLES - Aspect ratio driven by data attributes
═══════════════════════════════════════════════════════════════════════════ */
/* --image-width / --image-height / --image-aspect set on .carousel-standalone
by the Django template from IMAGE_BASE. Fallbacks here for safety. */
.carousel-standalone {
--default-width: var(--image-width, 512px);
--default-height: var(--image-height, 768px);
/* UNIFIED with the :root seed (#1a1a2e, fieldsets-base.css) — this scope used
to override to #161618, so every color-mix/box/gradient/translucent-bubble
backdrop resolved against a DIFFERENT base on the cards than on the page
chat fieldset: the whole card read duller/darker with a shifted hue. One
base everywhere = card colors match the page. */
--card-base: #1a1a2e;
/* Lighter work surface for the card faces — keeps dark slot colours visible
instead of blending into near-black card-base (what the old hardcoded #22222a
did, but tokenized + neutral). Tune the white % to taste. */
--card-surface: color-mix(in srgb, white 6%, var(--card-base));
--card-gap: 20px;
--card-zoom: 1;
/* End-card centering runway, CSS-owned and card-size-agnostic. 50% each side lets ANY
card — including the narrow height-driven grid card — scroll until its centre meets
the strip centre. LIVE percentage: recomputes on rotate/resize, and scroll-snap
(mandatory, align:center) re-snaps the centred card for free — that's the rotate
self-correction the measure-once JS padding used to break. The old value
(50% - IMAGE_WIDTH/4) was tuned to one card size and drifted once the card derived
its width from the grid row. scroll-snap keeps every card dead-centre; the extra
runway is unreachable slack it corrects, never empty space you rest in.
Mobile portrait overrides to 4px below (full-width card needs no runway). */
--strip-padding: 50%;
}
/* ═══════════════════════════════════════════════════════════════════════════
ASPECT RATIO SYSTEM — derives from --image-width (portrait base)
Landscape: height becomes width (swap), Square: base x base
═══════════════════════════════════════════════════════════════════════════ */
/* Per-element role re-resolution — the fix for "every card takes the centered
card's colour." Roles are seeded on .aurora-standalone (body) so AMBIENT chrome
(page bg, header) follows the centered card. But a custom property's var()
resolves on the element where the ROLE is DECLARED — so a card reading
var(--secondary) would get the BODY's (centered/ambient) --slot-2, not its own.
Redeclare the roles HERE, on every element that carries its OWN inline --slot-N,
so they resolve against THIS card/slot. In-carousel HAL cards carry no inline
slots → var(--slot-N) inherits the ambient value → they stay ambient, as intended. */
.strip-card,
.roster-strip-thumb {
--primary: var(--slot-1);
--secondary: var(--slot-2);
}
.strip-card {
--card-width: var(--image-width, 512px);
--card-aspect: var(--image-aspect, 2 / 3);
--card-ar: 0.6667; /* same ratio as --card-aspect, as a plain number
(width ÷ height) so calc() can turn an available
height into a width — used by the mobile fit. */
}
.strip-card[data-aspect-ratio="landscape"] {
--card-width: var(--image-height, 768px);
--card-aspect: 3 / 2;
--card-ar: 1.5;
}
.strip-card[data-aspect-ratio="square"] {
--card-width: var(--image-width, 512px);
--card-aspect: 1 / 1;
--card-ar: 1;
}
/* ═══════════════════════════════════════════════════════════════════════════
FILM STRIP CONTAINER
═══════════════════════════════════════════════════════════════════════════ */
.film-strip-container {
width: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* ═══════════════════════════════════════════════════════════════════════════
SCROLLING STRIP
═══════════════════════════════════════════════════════════════════════════ */
.scrolling-strip {
order: 2;
display: flex;
align-items: center; /* No-op when height = card height; kept for the mobile-landscape variant that height-drives the cards */
gap: var(--card-gap);
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding-top: 0px;
padding-bottom: 5px;
padding-left: var(--strip-padding); /* Space so first card can center + filmstrip runway */
padding-right: var(--strip-padding); /* Space so last card can center */
/* Strip height = card height. The earlier calc(100vh - 60px) left
inches of whitespace above and below the cards and pushed the
preview fieldset past the viewport by the transport bar's height
on every page (gallery, character detail, scene detail). Mobile
portrait already overrode this to height:auto for the same
reason; mobile landscape still height-drives the cards. */
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
visibility: hidden; /* Hidden until JS filmstrip positions and reveals */
}
/* TRAILING RUNWAY so the LAST card can scroll to centre. padding-right can't do this —
flex scroll containers clip their end padding out of the scroll range, so the right
50% gave the last card nothing to scroll into (the "brick wall", last card only). A
::after is a REAL flex item, so it extends the scroll range like a card would — "the
only thing that drives the conveyor is more product." And it's ALWAYS the last flex
child, so generated cards appendChild'd to the strip land BEFORE it: no trailing
spacer wedged between the old cards and the new one (the gap bug from before). 50% =
half the strip, more than the (stripW - cardW)/2 any card needs. CSS, so it recomputes
on rotate. Mobile portrait needs none (full-width card centres with no runway). */
.scrolling-strip::after {
content: '';
flex: 0 0 50%;
pointer-events: none;
}
@media (max-width: 700px) {
.scrolling-strip::after { flex-basis: 4px; }
}
.scrolling-strip::-webkit-scrollbar { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
STRIP CARD
═══════════════════════════════════════════════════════════════════════════ */
.strip-card {
flex: 0 0 auto;
width: calc(var(--card-width) * var(--card-zoom, 1));
max-width: calc(100vw - 40px);
aspect-ratio: var(--card-aspect);
scroll-snap-align: center;
border-radius: 12px;
overflow: visible;
position: relative;
cursor: pointer;
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, opacity 220ms ease;
background: transparent;
}
/* Pure-HTML navigation overlay: non-centered scene cards have an
anchor stretched across the card. Browser follows the href
on click — no JS. Buttons inside cards stack above via z-index
so they remain clickable. The centered card never renders this
anchor (rendered conditionally in template), so its existing
click/flip behavior is unaffected. */
.strip-card-nav-link {
position: absolute;
inset: 0;
z-index: 1;
display: block;
text-decoration: none;
border-radius: inherit;
}
/* Z-index protection only on non-centered cards — that's where the
.strip-card-nav-link exists. On the centered card, absolute-
positioned controls (.card-front-reset, .card-front-chat-tts,
etc.) need to keep their own `position:
absolute`; a blanket .strip-card button { position: relative } here
beats those single-class selectors on specificity and flattens them
into the flex flow.
EXCEPTION: .prompt-card-close (the × on PromptCard cards — auth,
upgrade, confirm) is a corner-overlay button that MUST stay
position:absolute. PromptCard cards have no .strip-card-nav-link, so
they don't need this protection. Without the :not() the × flattens to
the top-LEFT while the card slides in (before it's .centered), then
snaps right once centered — the left-flash. */
.strip-card:not(.centered) button:not(.prompt-card-close),
.strip-card:not(.centered) input,
.strip-card:not(.centered) select,
.strip-card:not(.centered) .deck-orb,
.strip-card:not(.centered) .builder-tag {
position: relative;
z-index: 2;
}
/* v9.4: FILM STRIP DEPTH SYSTEM
═══════════════════════════════════════════════════════════════════════════
THE STORY:
1. Side cards: small & recessed (waiting in the wings)
2. Hover side card: perks up slightly ("pick me!")
3. Centered card: full size, hero moment (front of the strip)
4. Flipped card: lifts toward user (ready to work with forms)
WHY translateY not scale for flipped:
Scale changes element geometry which breaks Select2 overlay positioning.
TranslateY lifts visually without changing dimensions.
═══════════════════════════════════════════════════════════════════════════ */
/* Base: side cards are smaller and recessed */
.strip-card {
transform: scale(0.92);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Hover side card: perks up */
.strip-card:hover {
transform: scale(0.95);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* Centered card: full size hero */
.strip-card.centered {
transform: scale(1.0);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* Centered + hover: same as centered (already the hero) */
.strip-card.centered:hover {
transform: scale(1.0);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* Flipped: same as centered - no translateY needed anymore.
The size difference (0.92 → 1.0) already creates the "lifted" feel.
Keeping scale(1.0) preserves geometry for Select2 overlays. */
.strip-card.flipped {
transform: scale(1.0);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* ═══════════════════════════════════════════════════════════════════════════
CARD IMAGE
═══════════════════════════════════════════════════════════════════════════ */
.strip-card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.strip-card-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--card-base) 0%, var(--card-base) 50%, color-mix(in srgb, var(--primary) 5%, var(--card-base)) 100%);
color: rgba(255, 255, 255, 0.4);
border-radius: inherit;
}
.strip-card-placeholder-icon { font-size: 4rem; margin-bottom: 1rem; }
.strip-card-placeholder-text { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; }
/* ═══════════════════════════════════════════════════════════════════════════
CARD OVERLAY
═══════════════════════════════════════════════════════════════════════════ */
.strip-card-overlay {
position: absolute;
bottom: 4px;
top: auto;
left: 4px;
right: 4px;
padding: 0.5rem 0.75rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.25));
color: rgba(255, 255, 255, 0.92);
opacity: 0;
transition: opacity 0.3s ease-out;
pointer-events: none;
border-radius: 0 0 10px 10px;
text-align: center;
}
/* Mobile: show by default, hide when chat or elements active */
@media (max-width: 768px) {
.strip-card-overlay {
opacity: 1;
}
.strip-card:has(.card-front-chat-overlay) .strip-card-overlay {
opacity: 0;
}
}
.strip-card:hover .strip-card-overlay { opacity: 1; }
/* Hide name overlay when the chat overlay is mounted (always-on for the
centered card on the scene page — gives the chat input room). */
.carousel-standalone[data-entity-type="scene"] .strip-card.centered:hover .strip-card-overlay {
opacity: 0;
}
/* Gallery (character carousel): the centered card's overlay is always
visible. The point of the gallery is to read this metadata to pick
a character; hiding it behind a hover defeats the purpose. Side
cards still hover-to-show as before. */
.carousel-standalone[data-entity-type="character"] .strip-card.centered .strip-card-overlay {
opacity: 1;
}
/* ...and ONLY the centered card. On the gallery the metadata overlay never
shows on side cards — not on desktop hover, not on every card on mobile.
Higher specificity (0,5,0) than both the global .strip-card:hover reveal and
the mobile .strip-card-overlay{opacity:1}, so it wins in every viewport. */
.carousel-standalone[data-entity-type="character"] .strip-card:not(.centered) .strip-card-overlay {
opacity: 0;
}
/* Global toggle — scene control "Overlay" button strips every floating control
off the card fronts so you see a clean image. Covers:
- name/title overlay
- card-front generate orb (not the big GENERATE on placeholder cards)
- chat input + conversation scrollback (the persistent
`.card-front-chat-overlay` container — user can still chat from
the scene_update form). The in-row buttons (elements toggle, TTS,
aspect, lock) ride that display:none for free.
- the top-left reset orb. */
.carousel-standalone.overlays-off .strip-card .strip-card-overlay,
.carousel-standalone.overlays-off .strip-card .card-front-chat-overlay,
.carousel-standalone.overlays-off .strip-card.centered .card-front-reset {
display: none;
}
.strip-card-title {
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: color-mix(in srgb, var(--primary) 45%, white);
text-shadow: 0 0 6px color-mix(in srgb, var(--secondary) 50%, rgba(0, 0, 0, 0.6));
}
/* Chub V2 metadata on imported gallery cards. Sits under the title in
the bottom overlay strip. Empty when card has no creator_notes/tags
(Aurora-native characters) — template skips the wrapper so there's
no dead space. */
.strip-card-meta {
margin-top: 0.35rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
text-shadow: 0 0 4px color-mix(in srgb, var(--secondary) 50%, rgba(0, 0, 0, 0.65));
}
.strip-card-desc {
font-size: 0.75rem;
line-height: 1.25;
color: white;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.strip-card-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem;
}
.strip-card-tag {
font-size: 0.65rem;
line-height: 1;
padding: 0.18rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--primary) 30%, transparent);
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
color: white;
white-space: nowrap;
}
/* ── Editor gallery: EDITABLE tags on the card front (gallery-tags.js) ──
The read-only chips become removable builder-tag bubbles + a select2 add-
input, stacked below the pile and above the owner byline. The overlay is
pointer-events:none by default; only the CENTERED card's edit region takes
pointer events, so the picker + × are live there and inert elsewhere. */
.strip-card-meta--edit {
margin-top: 0.35rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
align-items: stretch;
text-shadow: none;
}
.strip-card.centered .strip-card-meta--edit,
.strip-card.centered .strip-card-meta--edit * {
pointer-events: auto;
}
.strip-card-tags--edit {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem;
}
/* Editable bubble = the read-only chip scale, with an inline × remove. */
.strip-card-tags--edit .builder-tag {
display: inline-flex;
align-items: center;
gap: 0.15rem;
font-size: 0.65rem;
line-height: 1;
padding: 0.18rem 0.4rem;
border-radius: 999px;
background: color-mix(in srgb, var(--primary) 30%, transparent);
border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
color: white;
white-space: nowrap;
}
.strip-card-tags--edit .tag-remove {
border: none;
background: none;
padding: 0;
font: inherit;
font-size: 0.85em;
line-height: 1;
cursor: pointer;
color: white;
opacity: 0.65;
}
.strip-card-tags--edit .tag-remove:hover { opacity: 1; }
/* Add-tag select2 — below the pile, full width, aligned card-to-card above the
username. Styled after the card-back mood field: dark inset box, defined
border, small type. dropdownParent is body, so the list isn't card-clipped. */
.strip-card-meta--edit .select2-container { width: 100%; }
.strip-card-meta--edit .select2-container--default .select2-selection--single {
height: auto;
min-height: 1.7rem;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.strip-card-meta--edit .select2-selection--single .select2-selection__rendered,
.strip-card-meta--edit .select2-selection--single .select2-selection__placeholder {
font-size: 0.7rem;
line-height: 1.6;
color: white;
padding-left: 0.3rem;
}
/* Editor notes — author-curated blurb. Sits below the chub tags
and above the owner byline. A touch larger/brighter than
creator-notes so it reads as "what the editor wants you to know
about this character." Two-line clamp keeps cards from growing
on long entries. */
.strip-card-editor-notes {
margin-top: 0.35rem;
font-size: 0.78rem;
line-height: 1.3;
color: color-mix(in srgb, var(--primary) 25%, white);
text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Owner byline — sits at the very bottom of the overlay, below the
chub tags. Quiet text so it doesn't compete with the title/tags. */
.strip-card-owner {
margin-top: 0.35rem;
font-size: 0.65rem;
line-height: 1;
text-align: center;
opacity: 0.65;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.65);
}
/* Gallery card-front CTA — Chat (everyone) + Edit (own gallery). Lets a new
user skip the center-into-a-slot dance entirely: click Chat, land in the
conversation. The overlay is pointer-events:none and only shown on the
centered card, so re-enable pointer-events on the pills — they're live only
where the overlay is visible. Grey chrome (toolbar/private-toggle convention)
so it reads on any character's colours; the icon + label carry meaning. */
.strip-card-actions {
display: flex;
justify-content: center;
gap: 0.4rem;
margin-top: 0.5rem;
}
.strip-card-cta {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.34rem 0.72rem;
border-radius: 999px;
cursor: pointer;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
background: color-mix(in srgb, white 10%, var(--card-base));
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
transition: background 0.15s ease-out, color 0.15s ease-out;
}
.strip-card-cta:hover {
background: color-mix(in srgb, white 16%, var(--card-base));
color: rgba(255, 255, 255, 0.98);
}
.strip-card-cta svg { opacity: 0.85; }
/* ═══════════════════════════════════════════════════════════════════════════
NAV PIPS
═══════════════════════════════════════════════════════════════════════════ */
/* PAGE TITLE — LAST row of the preview grid (pips 1, carousel 2, roster 3, title 4),
the mirror of the pip row at the bottom of the fieldset. Both are 6% tracks, so they
balance and the card reads centred between them.
Caps + the pip's muted neutral: it's a where-am-i marker, not a heading, and it
carries no slot colour (same reasoning as the pips — it indexes the page, not the
character). */
.strip-title {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
container-type: size; /* so the label can be a share of this row */
}
.strip-title-label {
font-size: 40cqh; /* a share of the title row */
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
color: rgba(255, 255, 255, 0.3); /* matches the idle pip */
}
.strip-nav {
order: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 0;
position: relative;
container-type: size; /* so the dot can be a share of this row */
}
.strip-pip {
height: 34cqh; /* a share of the pip row */
aspect-ratio: 1;
width: auto;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: none;
cursor: pointer;
transition: all 0.2s ease-out;
padding: 0;
}
.strip-pip:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.2);
}
.strip-pip.active {
/* System-level neutral, NOT the character's outfit colour. The pips index
the gallery/strip (shared across characters), so a per-character dress
accent bled across navigation and persisted between the two galleries.
Matches the inactive/hover pips, which are already neutral whites. */
background: rgba(255, 255, 255, 0.85);
transform: scale(1.3);
}
/* ═══════════════════════════════════════════════════════════════════════════
FLIP CARD
═══════════════════════════════════════════════════════════════════════════ */
.flip-container {
width: 100%;
aspect-ratio: inherit;
position: relative;
perspective: 1200px;
transform-style: preserve-3d;
border-radius: 12px;
}
.flip-container > .flip-front,
.flip-container > .flip-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box; /* Padding + border stay inside card bounds */
backface-visibility: hidden;
border-radius: 12px;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ── Standardized face chrome — ALL 4 faces share ONE recipe so they can't drift
(front / back / memories / chat). Eyes (slot-2) tint from the TOP-RIGHT corner
(225deg) fading to the lighter --card-surface grey, with an eyes border + glow.
The chat fieldset stays transparent so it shows this same face gradient; the
assistant bubbles (eyes) then sit in the opposite corner against the plain
surface — the balance the chat fieldset had. Replaces the four hair + hardcoded
#22222a copies. ── */
.flip-container > .flip-front,
.flip-container > .flip-back,
.flip-container > .flip-memories,
.flip-container > .flip-chat {
background: linear-gradient(225deg,
color-mix(in srgb, var(--secondary) 22%, var(--card-surface)) 0%,
color-mix(in srgb, var(--secondary) 10%, var(--card-surface)) 40%,
var(--card-surface) 60%,
var(--card-surface) 100%);
border: 2px solid color-mix(in srgb, var(--secondary) 40%, rgba(255, 255, 255, 0.15));
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.4),
0 0 15px color-mix(in srgb, var(--secondary) 20%, transparent),
inset 0 2px 6px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.flip-container > .flip-front {
transform: rotateY(0deg);
overflow: hidden;
padding: 4px;
}
.flip-container > .flip-front .strip-card-image,
.flip-container > .flip-front .strip-card-placeholder {
border-radius: 10px;
box-shadow:
inset 0 2px 6px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.flip-container > .flip-back {
transform: rotateY(180deg);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 4px;
}
.flip-container > .flip-back::before { display: none ; }
.strip-card.flipped .flip-container > .flip-front { transform: rotateY(-180deg); }
.strip-card.flipped .flip-container > .flip-back { transform: rotateY(0deg); }
/* ═══ Third face: Memories ═══════════════════════════════════════════
A sibling face (can't nest a 3D flip inside .flip-back — its overflow
flattens preserve-3d). Same chrome as .flip-back; parked at rotateY(180)
behind the back. The Memories button adds .showing-memories, which rotates
the back away (0→180) and this in (180→0) — a real flip from the back. */
.flip-container > .flip-memories {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
backface-visibility: hidden;
border-radius: 12px;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 4px;
}
/* .showing-memories rides alongside .flipped; declared after the .flipped rules
so it wins for the back + memories faces when both classes are present.
The back rotates -180 (NOT +180) so it sweeps the SAME direction as the
front->back flip — otherwise the two halves cross and the flip reads funny. */
.strip-card.showing-memories .flip-container > .flip-front { transform: rotateY(-180deg); }
.strip-card.showing-memories .flip-container > .flip-back { transform: rotateY(-180deg); }
.strip-card.showing-memories .flip-container > .flip-memories { transform: rotateY(0deg); }
/* Homing rules live AFTER .showing-chat (below) so they win — see there. */
/* ═══ Fourth face: Chat ═══ Parked at rotateY(180) behind the others (same as
memories); .showing-chat rotates memories away (0→-180) and this in (180→0).
The forward flip reaches it after memories; the wrap (chat→front) uses the
homing spin above. Slice-1 chrome; the full-thread fieldset fills it next. */
.flip-container > .flip-chat {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
backface-visibility: hidden;
border-radius: 12px;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 4px;
}
.strip-card.showing-chat .flip-container > .flip-front { transform: rotateY(-180deg); }
.strip-card.showing-chat .flip-container > .flip-back { transform: rotateY(-180deg); }
.strip-card.showing-chat .flip-container > .flip-memories { transform: rotateY(-180deg); }
.strip-card.showing-chat .flip-container > .flip-chat { transform: rotateY(0deg); }
/* Homing: the LAST step of the forward flip (memories→front on a 3-face card,
chat→front on a 4-face card) continues the SAME direction as the other flips
— the front spins another -180 (right→left) to the resting front — instead of
un-winding left→right (the "morph"). MUST be declared after every .showing-*
rule (same specificity) so it wins while both classes are on the card; being
above .showing-chat is exactly what made the chat→front flip morph. The JS
snaps home under .flip-no-anim once the spin lands (rotateY(-360)==0 visually). */
.strip-card.flip-homing .flip-container > .flip-front { transform: rotateY(-360deg); }
.strip-card.flip-homing .flip-container > .flip-back { transform: rotateY(-180deg); }
.strip-card.flip-homing .flip-container > .flip-memories { transform: rotateY(-180deg); }
.strip-card.flip-homing .flip-container > .flip-chat { transform: rotateY(-180deg); }
.strip-card.flip-no-anim .flip-container > .flip-front,
.strip-card.flip-no-anim .flip-container > .flip-back,
.strip-card.flip-no-anim .flip-container > .flip-memories,
.strip-card.flip-no-anim .flip-container > .flip-chat { transition: none; }
.flip-chat-placeholder {
margin: auto;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}
/* The chat fieldset lives INSIDE the chat flip-face. CRUCIAL: the scene page's
`.entity-2col .entity-fields .fieldset--chat` rules (the 100svh height, the
conversation sizing) ALSO match this nested card copy and OUT-SPECIFY a plain
`.flip-chat` selector — that's why it clipped with no scrollbar (fieldset got
the VIEWPORT height, my overflow was ignored). Prefix with the card ancestor
chain so these win: drop the fieldset's own eyes border/tint, FILL the face,
SCROLL the conversation, and pin the input + footers visible. */
.strip-card .flip-container .flip-chat .fieldset--chat {
border: none;
background: none;
margin: 0;
height: auto;
min-height: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.strip-card .flip-container .flip-chat .fieldset--chat .chat-conversation-wrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.strip-card .flip-container .flip-chat .fieldset--chat .chat-conversation {
flex: 1 1 auto;
height: auto;
min-height: 0;
overflow-y: auto; /* SCROLL the messages instead of growing past the input */
}
.strip-card .flip-container .flip-chat .fieldset--chat .chat-form-input,
.strip-card .flip-container .flip-chat .fieldset--chat .chat-followups,
.strip-card .flip-container .flip-chat .fieldset--chat .chat-voice-row--footer {
flex: 0 0 auto; /* pin visible; the conversation above scrolls */
}
/* Chat text keyed to the card-back / memory vmax master, nudged one notch up from
the panes' clamp(11px, 1.5vmax, 13px) so the conversation reads a touch larger. */
.strip-card .flip-container .flip-chat .fieldset--chat .chat-msg {
font-size: clamp(11px, 1.6vmax, 14px);
}
/* Scale the card-face avatar down so it covers less of the conversation and frees
the header row — the h2's clear-padding shrinks with it, exposing more of the
character switcher (select2). */
.strip-card .flip-container .flip-chat .fieldset--chat .chat-avatar-thumb {
width: 3.6rem; /* was 5rem → ~5.4rem tall at the 2/3 aspect */
}
.strip-card .flip-container .flip-chat .fieldset--chat > h2 {
padding-left: 4.8rem; /* was 6.4rem — less avatar to clear */
}
/* Blocked-state CTA under the now-smaller avatar: shrink the Upgrade button toward
the avatar's width, and let the "Daily limit… 00:00 UTC" flag fill + CENTER the
freed space so UTC stays on the top line instead of wrapping. */
.strip-card .flip-container .flip-chat .fieldset--chat .tier-info-upgrade {
padding: 0.3rem 0.5rem; /* was 0.35rem 0.95rem */
font-size: 0.68rem; /* was 0.75rem */
margin-left: calc(-6.125rem + 21px); /* nudge the broken-out button right (was +11px) */
}
/* Pull the whole blocked drawer up ~10px — the L-header left too much gap above the
black box. (Base margin-top is 0.15rem.) */
.strip-card .flip-container .flip-chat .fieldset--chat .tier-info-drawer.open {
margin-top: calc(0.15rem - 10px);
}
/* Center the flag on the BLACK BOX, not the button-skewed flex space: as a flex
item its centering was dragged left by the button's negative-margin breakout.
Absolute-fill the CTA row so text-align centers on the box regardless. */
.strip-card .flip-container .flip-chat .fieldset--chat .tier-info-cta {
position: relative;
}
.strip-card .flip-container .flip-chat .fieldset--chat .tier-info-flag {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
text-align: center;
}
/* Expand the black tier box left into the void the smaller avatar left behind
(its clear-margin was tuned to the old 5rem avatar), and give it a 2px right gap
(it touched the right edge with no padding). */
.strip-card .flip-container .flip-chat .fieldset--chat .tier-info-block {
margin-left: calc(5.75rem - 17px); /* was -14px — 3px further left */
margin-right: 2px;
}
/* Line the card-face avatar's left edge up with the conversation's left border on
mobile (it sat ~7px to the right of it). */
@media (max-width: 700px) {
.strip-card .flip-container .flip-chat .fieldset--chat .chat-avatar-well {
left: calc(0.6rem - 7px);
}
/* The L-header bar (the raised box behind the switcher + deck buttons) sits too
LOW on mobile, so the select overshoots its top edge. Raise it ~6px. (Desktop
reads a touch high but the select still clears it, so it's left alone.) */
.strip-card .flip-container .flip-chat .fieldset--chat:has(.chat-avatar-well)::before {
top: calc(0.6rem - 6px);
}
}
/* Memories face — mirrors the cast fieldset: swatch/name header, a thumb +
nodes row, then the detail panel filling the rest. The whole face is a flex
column; the two content sections (nodes beside the thumb, panel below) grow
to the card's border padding as beveled containers. */
.flip-memories-header {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 0 0 auto;
padding: 0.3rem 0.45rem 0.35rem;
}
.flip-memories-name {
font-size: 1.2em; /* em off the master scale (below) so it tracks the card */
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ui-text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Thumb + nodes row. The nodes container is a beveled inset that fills the
space beside the (square) thumb. */
.flip-memories-row {
display: flex;
gap: 0.4rem;
flex: 0 0 auto;
align-items: stretch;
padding: 0 0.4rem;
min-height: 0;
}
.flip-memories-thumb {
/* Portrait (2/3) avatar matching the card back's flipping portrait — same
vmax avatar scale the gallery card-back uses, so it isn't oversized. The
thumb defines the row height; the nodes inset stretches to it. */
flex: 0 0 auto;
width: clamp(52px, 8.5vmax, 74px);
align-self: flex-start;
}
.flip-memories-row .card-back-memory-nodes {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center; /* centre the (single) user node vertically beside the portrait */
overflow-y: auto;
/* Node bubbles sit FLAT on the card-face surface like the builder-tags — the
recessed dark inset box (bg rgba(0,0,0,0.18) + inset shadows + radius) is
removed so they read as tags ON the top surface, not sunk into a container. */
padding: 0.2rem;
}
/* Delicate scrollbar (matches the memory panel) — was the OS default once the
recessed box's own overflow lost its dark backing. */
.flip-memories-row .card-back-memory-nodes { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--secondary) 25%, rgba(255, 255, 255, 0.1)) transparent; }
.flip-memories-row .card-back-memory-nodes::-webkit-scrollbar { width: 6px; }
.flip-memories-row .card-back-memory-nodes::-webkit-scrollbar-track { background: transparent; }
.flip-memories-row .card-back-memory-nodes::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--secondary) 25%, rgba(255, 255, 255, 0.1)); border-radius: 3px;
}
/* Add-a-memory input reads as a plain typing line (like the observation lines
above it) — no field box at all. The panel is a .field, so fieldsets-base's
`.field input[type="text"]` (0,2,1 — the attribute selector) was painting it
as a bordered/tinted field; this 3-class scope + the attribute beats it. */
.flip-memories .cast-scene-memory-panel .cb-obs-add-input[type="text"] {
width: 100%;
box-sizing: border-box;
height: auto;
margin-top: 0.2em;
font-family: inherit;
font-size: 0.85em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
/* Left pad in em (scales with the master) lines the placeholder up under
the observation text — the obs list is padding-left 1.1em, ~1 char
further in. The title tooltip is affordance enough — no underline. */
padding: 0.1em 0.1em 0.1em 1.9em;
}
.flip-memories .cast-scene-memory-panel .cb-obs-add-input[type="text"]:hover,
.flip-memories .cast-scene-memory-panel .cb-obs-add-input[type="text"]:focus {
outline: none;
background: transparent;
border: none;
box-shadow: none;
}
.flip-memories .cast-scene-memory-panel .cb-obs-add-input::placeholder {
color: rgba(255, 255, 255, 0.35);
font-style: italic;
}
/* Detail panel below the row fills the remaining height. The injected
.cast-scene-memory-panel (.field--bevel) is capped + content-sized, so it
collapsed around a one-line description; stretch it to fill the card down to
the border padding. */
.flip-memories > .card-back-memory-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin: 0.4rem 0.4rem 0.1rem;
}
.flip-memories .card-back-memory-panel .cast-scene-memory-panel {
flex: 1 1 auto;
min-height: 0;
max-height: none; /* drop the 220px cap so the bevel fills the card */
margin-top: 0;
overflow-y: auto;
}
/* Memories button removed — the flip cycle reaches the memories face now. */
/* ── Memories face scale — it's essentially a gallery card back, so scale the
pills + detail text the same way: a vmax master on the direct children,
everything deeper in em off it (mirrors .card-back-info--character). Beats the
cast fieldset's fixed-rem sizes via the extra class in the selector. ── */
.flip-memories > * {
font-size: clamp(11px, 1.5vmax, 13px);
}
.flip-memories .cast-scene-memory-bubbles {
flex-wrap: wrap;
gap: 0.3em;
}
.flip-memories .cast-scene-memory-bubbles .memory-node-bubble {
font-size: 0.85em;
padding: 0.22em 0.5em;
gap: 0.3em;
max-width: 100%;
min-width: 0;
white-space: nowrap;
}
.flip-memories .cast-scene-memory-bubbles .memory-node-bubble .tag-name {
overflow: hidden;
text-overflow: ellipsis;
}
.flip-memories .memory-node-detail__name { font-size: 1em; }
.flip-memories .memory-node-detail__type { font-size: 0.7em; }
.flip-memories .memory-node-detail__obs { padding-left: 1.1em; gap: 0.3em; }
.flip-memories .memory-node-detail__obs li { font-size: 0.9em; gap: 0.45em; }
.flip-memories .memory-node-detail__none { font-size: 0.88em; }
/* Subtle RESTING tint per provenance (--tag-color: system=hair, user=neutral,
fly=eyes — set by the cast-fieldset rules) so the pills are distinguishable
without hover (mobile has none). Hover/active deepen it (higher specificity
here so they still win over the resting tint). */
.flip-memories .cast-scene-memory-bubbles .memory-node-bubble {
background: color-mix(in srgb, var(--tag-color) 15%, transparent);
border-color: color-mix(in srgb, var(--tag-color) 32%, rgba(255, 255, 255, 0.1));
}
.flip-memories .cast-scene-memory-bubbles .memory-node-bubble:hover,
.flip-memories .cast-scene-memory-bubbles .memory-node-bubble:focus-visible {
background: color-mix(in srgb, var(--tag-color) 32%, rgba(255, 255, 255, 0.06));
}
.flip-memories .cast-scene-memory-bubbles .memory-node-bubble.active {
background: color-mix(in srgb, var(--tag-color) 45%, rgba(255, 255, 255, 0.08));
border-color: color-mix(in srgb, var(--tag-color) 55%, transparent);
}
/* Swatches match the card-back scale (vmax, not the bigger base size). */
.flip-memories .color-swatches { gap: clamp(2px, 0.35vmax, 3px); flex-wrap: wrap; }
.flip-memories .color-swatch {
flex: 0 0 auto;
width: clamp(7px, 1.7vmax, 14px);
height: auto;
aspect-ratio: 1;
border-width: 1px;
border-radius: 18%;
}
/* Subscribe offer injected onto a quota-exhausted scene card's back: the
auth-surface brings its own frame, so drop the card-back padding and let it
fill edge-to-edge. */
.flip-container > .flip-back.flip-back--subscribe {
padding: 0;
}
.flip-back--subscribe > .upgrade-surface {
flex: 1 1 auto;
border-radius: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
UPGRADE FACE — front face content for scenes whose image generation was
blocked by the daily quota. The model's snapshot still lives on the back
face; the front swaps ![]()
for an intro-card-style tease that reads as
native to the carousel instead of a heavy black overlay. Reuses
.generate-card (grid backdrop + chrome) so it sits in the same visual
family as the introduction / prompt cards. Inner layout: usage subject
("3/3"), the "Daily Limit Reached" headline, single Upgrade pill below.
═══════════════════════════════════════════════════════════════════════════ */
.card-front-upgrade {
position: absolute;
inset: 0;
}
.card-front-upgrade__inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.7rem;
padding: 1.4rem 1.2rem;
text-align: center;
}
.card-front-upgrade__subject {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.85;
}
.card-front-upgrade__title {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.3;
color: inherit;
}
.card-front-upgrade__cta {
margin-top: 0.5rem;
padding: 0.55rem 1.4rem;
border: 1px solid color-mix(in srgb, var(--primary) 60%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--primary) 75%, transparent);
color: inherit;
font-weight: 600;
text-decoration: none;
transition: transform 80ms ease, background 120ms ease, border-color 120ms ease;
}
.card-front-upgrade__cta:hover {
background: var(--primary);
transform: translateY(-1px);
color: inherit;
text-decoration: none;
}
.card-front-upgrade__cta:active {
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════════════════════════════
CREATOR CARD — the gallery's 'New character' door. Reuses .generate-card
(grid backdrop + slot-tinted gradient) so it reads as native to the carousel;
the whole card is a link to /new/. A giant + (the slot-card + writ large) over
a small label. Colors come from the slot swatches via color-mix, like the rest
of the generate-card family.
═══════════════════════════════════════════════════════════════════════════ */
.creator-card {
text-decoration: none;
color: inherit;
cursor: pointer;
}
.creator-card__inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.6rem;
padding: 1.2rem;
text-align: center;
}
.creator-card__plus {
font-size: 5.5rem;
font-weight: 300;
line-height: 0.8;
color: color-mix(in srgb, var(--primary) 75%, white);
text-shadow: 0 0 24px color-mix(in srgb, var(--primary) 45%, transparent);
transition: transform 120ms ease, color 120ms ease, text-shadow 120ms ease;
}
.creator-card__label {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: color-mix(in srgb, var(--primary) 70%, white);
opacity: 0.85;
}
.creator-card:hover .creator-card__plus {
transform: translateY(-2px) scale(1.04);
color: color-mix(in srgb, var(--primary) 90%, white);
text-shadow: 0 0 34px color-mix(in srgb, var(--primary) 60%, transparent);
}
/* ═══════════════════════════════════════════════════════════════════════════
CARD-BACK INFO PANEL — gallery only. Renders on .flip-back when the
strip is in character mode. Server-side per-card, themed by the
card's own slot vars (already on the .strip-card wrapper). Reuses
the .char-identity-row / .char-row-with-thumb / .card-tab-strip /
.card-pane structure from the bottom fieldset so the typography
matches the rest of the form chrome.
═══════════════════════════════════════════════════════════════════════════ */
.card-back-info {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.6rem;
box-sizing: border-box;
container-type: inline-size; /* swatches (and the scene thumb) size off the card width */
overflow: hidden;
color: inherit;
font-size: 0.85rem;
/* --accent feeds the shared select2-theme.css scope; setting it
to slot-1 (the character's hair color) paints each card-back
select2's left border + hover tint with that character's hair,
so the chrome reads "this is X's panel" at a glance. Same
pattern fieldsets-env / fieldsets-base use to slot-tint
their own dropdowns. */
--accent: var(--primary);
}
.card-back-info .char-identity-row {
display: flex;
justify-content: space-around;
gap: 0.5rem;
padding: 0.3rem 0;
}
.card-back-info .char-identity-row .identity-field {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
flex: 1;
min-width: 0;
}
/* Chat read-only identity — inline with the CHARACTER h2 title (no extra line).
Subtle next to the title: smaller, dimmer, normal-weight, not uppercased. */
.cast-h2-identity {
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
opacity: 0.6;
}
.card-back-info .char-identity-row label {
font-size: 0.65rem;
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.card-back-info .char-identity-row .identity-readonly {
font-size: 0.85rem;
font-weight: 600;
/* Was var(--primary) — dark-haired characters vanished against the
work-surface grey. --ui-text-strong is the same token .card-tab-
btn.active uses for the same reason (readable on ANY slot). */
color: var(--ui-text-strong);
}
/* Gallery-only overrides for the thumb area. Scoped to --character so
scene-mode card-backs fall through to the base .char-row-with-thumb
grid in fieldsets-layout.css (auto thumb + 1fr fields, two-row
areas) — same scaling the bottom character fieldset uses. The
gallery only puts two children in this row (.char-thumb + .card-
back-join-area), so we don't fight the base's named template-areas
— we just override the column widths to give the join panel more
room than the thumb. */
/* The gallery card-back must FILL its face for the memory panel to hold a
stable lower portion. height:100% wasn't resolving down the aspect-ratio flip
chain (.flip-container has aspect-ratio:inherit, no explicit height), so
card-back-info sat at content-height — panel collapsed + a bottom gap. Pin it
to the back face: .flip-back is position:absolute, so inset:0 fills it cleanly
with no percentage chain. Gallery-only; the scene card-back is untouched. */
.card-back-info--character {
position: absolute;
inset: 0;
gap: 0.3rem; /* tighten header/row/panel spacing (base is 0.5rem) */
/* Content sizes off vmax — the device's LONG side — NOT the card. Card-relative
units (cqw/cqh/cqmin) change when the card resizes, and the card resizes when
you rotate the phone — so the content kept rescaling on flip, and a big
landscape card got tiny content ("giant with a tiny head"). vmax is identical
in portrait and landscape (rotating just swaps width↔height) and immune to the
URL bar, so the content holds ONE size across the flip. clamp() bounds it on a
big desktop screen. Tune the vmax coefficients / caps here + below. */
--cb-avatar-w: clamp(52px, 8.5vmax, 74px); /* avatar short side; bumped a bit; cap ≈ mobile size so desktop matches */
}
/* ── MASTER SCALE — one knob for the whole card-back ─────────────────────────
font on the CHILDREN (not the container); everything deeper is em off this, so
header/name, tags and descriptions scale as one unit. vmax-based (see the note
above) so it's steady across the portrait↔landscape flip. Tune the 1.5 for overall
text size, the 7.5 above for the avatar; the caps ≈ the mobile size so desktop
MATCHES mobile (raise a cap to let desktop grow, lower it to shrink it). */
.card-back-info--character > *,
.card-back-info--scene > * {
font-size: clamp(11px, 1.5vmax, 13px);
}
.card-back-info--character .card-back-header .card-back-character-name {
font-size: 1.2em; /* em off the master so the name tracks the card too
(was a fixed 0.9rem that never scaled) */
}
.card-back-info--character .char-row-with-thumb {
/* Avatar column AUTO-sizes to the thumb (which is the portrait thumb rotated
per aspect — see below), so a wide landscape thumb gets the room it needs;
nodes take the rest. Row height = the portrait thumb height; a landscape thumb
is shorter and sits at the top. */
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6em;
align-items: start;
flex: 0 0 auto;
height: calc(var(--cb-avatar-w) * 1.5);
}
/* Square cards: the avatar is var(--cb-avatar-w) tall (square), so size the row to
THAT, not the portrait 1.5× — otherwise ~var×0.5 of dead space sits below the
square avatar before the details. (Landscape uses the 2-col grid below.) */
.strip-card[data-aspect-ratio="square"] .card-back-info--character .char-row-with-thumb {
height: var(--cb-avatar-w);
}
.card-back-info--character .char-thumb.card-back-thumb {
/* The thumb is the SAME little card in every aspect — a "portrait on its side":
its SHORTER side is always --cb-avatar-w, the longer side follows the aspect.
Portrait/square constrain the WIDTH (tall/square thumb); landscape constrains
the HEIGHT (wide thumb) — see the override below. var(--card-aspect) + the img's
object-fit: cover then fill the box without a portrait crop. ~slot-card sized. */
aspect-ratio: var(--card-aspect);
width: var(--cb-avatar-w);
height: auto;
align-self: start;
border-radius: 8px;
overflow: hidden;
background: color-mix(in srgb, var(--secondary) 20%, transparent);
}
/* Landscape: the SHORT side is the HEIGHT — the portrait thumb laid on its side.
height = the portrait's width (--cb-avatar-w); width grows to the aspect. */
.strip-card[data-aspect-ratio="landscape"] .card-back-info--character .char-thumb.card-back-thumb {
width: auto;
height: var(--cb-avatar-w);
}
/* ── Landscape cards: 2-column card-back ─────────────────────────────────────
The wide landscape thumb leaves a big area, so use it: identity (the wide avatar
OVER its nodes) is a narrow left column; the memory details fill a tall justified
column on the right. Keyed on the card ASPECT, so it's the same in mobile-portrait
and mobile-landscape. char-row stays a real box (just becomes a flex column) and
the panel stays a real grid child — NO display:contents (that collapsed it before),
and the avatar's align-self:start keeps it from stretching in the column. */
.strip-card[data-aspect-ratio="landscape"] .card-back-info--character {
display: grid;
/* Left column = the AVATAR's width (short side --cb-avatar-w × the 3/2 landscape
aspect), NOT auto — so the avatar governs the column, not a long node name.
Nodes wrap / ellipsis to fit it. Track it via --cb-avatar-w so it scales with
the avatar dial. 10px to the details (your padding). */
grid-template-columns: calc(var(--cb-avatar-w) * 1.5) 1fr;
grid-template-rows: auto 1fr; /* swatch/name across the top, then the body */
column-gap: 10px;
}
.strip-card[data-aspect-ratio="landscape"] .card-back-info--character .card-back-header {
grid-column: 1 / -1; /* swatch/name across the top */
}
.strip-card[data-aspect-ratio="landscape"] .card-back-info--character .char-row-with-thumb {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column; /* avatar OVER nodes (not beside) */
gap: 0.4em;
height: auto; /* drop the fixed avatar-row height; the grid row sizes it */
min-height: 0;
}
.strip-card[data-aspect-ratio="landscape"] .card-back-info--character .card-back-memory-nodes {
flex: 1; /* fill below the avatar (scrolls — overflow-y:auto is set in the base) */
min-height: 0;
}
.strip-card[data-aspect-ratio="landscape"] .card-back-info--character .card-back-memory-panel {
grid-column: 2;
grid-row: 2;
text-align: justify; /* the newspaper column */
}
.card-back-info--character .char-thumb.card-back-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Gallery card-back memory (read-only) ───────────────────────────────
Reuses the global .memory-node-bubble / .memory-node-detail chrome from
cast-fieldset.css. This only lays the loaded fragment out — nodes in the
avatar row's 2nd column, the detail panel below the row — and drives the
read-only reveal (the cast fieldset's reveal is scoped to .fieldset--cast-
scene, so it doesn't reach here). Both containers start empty; the card-back
memory loader fills them on flip. */
.card-back-info--character .card-back-memory-nodes {
min-width: 0;
min-height: 0;
align-self: stretch;
overflow-y: auto; /* node bubbles scroll within the fixed upper row */
}
.card-back-info--character .card-back-memory-nodes .cast-scene-memory-bubbles {
flex-wrap: wrap;
gap: 0.3em;
}
/* Node tags in em off the master: 1em IS the master size, padding/gap relative,
so tags and their text scale with the whole card. nowrap keeps a long name one
line; the tag-name ellipsises if it ever exceeds the column. */
.card-back-info--character .memory-node-bubble {
font-size: 0.85em; /* smaller than the master so ~3 rows of tags fit
clean beside the avatar without cutoff. Tune. */
padding: 0.22em 0.5em;
gap: 0.3em;
max-width: 100%;
min-width: 0;
white-space: nowrap;
}
.card-back-info--character .memory-node-bubble .tag-name {
overflow: hidden;
text-overflow: ellipsis;
}
.card-back-info--character .card-back-memory-panel {
flex: 1; /* fill the lower portion of the card-back */
min-height: 0;
display: flex; /* host the injected bevel field as a fill-the-area child */
flex-direction: column;
/* No extra top margin: the ~10px gap to the avatar row comes from
card-back-info's own flex gap, matching the side insets. */
}
/* The loader appends .cast-scene-memory-panel (a .field--bevel) INTO the panel.
Two global rules (cast-fieldset.css) fight the fill: it sizes to content (a
small node collapsed it to ~2 lines) AND it's capped at max-height:220px (the
~40px bottom gap on a tall card) with its own margin-top. Override all three:
flex-fill the panel, drop the cap, zero the margin; observations scroll. */
.card-back-info--character .card-back-memory-panel .cast-scene-memory-panel {
flex: 1;
min-height: 0;
max-height: none;
margin: 0;
padding: 0.3em 0.85em 0.7em; /* trimmed TOP (closes the gap above the details); em scales with master */
overflow-y: auto;
}
/* one detail visible at a time (the loader / first-node default sets .active) */
.card-back-info--character .card-back-memory-panel .memory-node-detail { display: none; }
.card-back-info--character .card-back-memory-panel .memory-node-detail.active { display: block; }
/* ── Owner card-back memory EDITOR (Phase A: editable Conversation fields) ──
The card back is the character's memory editor for its owner. A Conversation
group of card-field bubbles sits above the read-only memory nodes; clicking a
bubble reveals its blur-save textarea in the shared panel. em-scaled like the
rest of the card. */
.card-back-info--character .card-back-memory-nodes .node-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3em;
width: 100%;
padding: 0.3em 0.4em 0.4em;
margin-bottom: 0.3em;
border-radius: 0.6em;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-back-info--character .card-back-memory-nodes .node-group-label {
flex-basis: 100%;
text-align: center;
font-size: 0.6em;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
/* Card-field bubbles reuse the memory-node bubble look (hair tint, clickable). */
.card-back-info--character .card-back-memory-nodes .detail-bubble {
--tag-color: var(--primary);
font-size: 0.85em;
padding: 0.22em 0.5em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.card-back-info--character .card-back-memory-nodes .detail-bubble:hover,
.card-back-info--character .card-back-memory-nodes .detail-bubble:focus-visible {
background: color-mix(in srgb, var(--tag-color) 32%, rgba(255, 255, 255, 0.06));
outline: none;
}
.card-back-info--character .card-back-memory-nodes .detail-bubble.active {
background: color-mix(in srgb, var(--tag-color) 42%, rgba(255, 255, 255, 0.08));
border-color: color-mix(in srgb, var(--tag-color) 55%, transparent);
}
/* Memory pip on the card back — flips the field's *_enabled flag. Ported from
the cast fieldset's .tag-switch; slot-1 tint (the bubble's --tag-color). */
:is(.card-back-info--character, .flip-memories) .card-back-memory-nodes .detail-toggle {
position: relative;
width: 1.7em;
height: 1em;
margin-left: 0.35em;
border-radius: 0.5em;
background: color-mix(in srgb, var(--tag-color) 20%, rgba(255, 255, 255, 0.1));
border: 1px solid color-mix(in srgb, var(--tag-color) 35%, rgba(255, 255, 255, 0.18));
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s, border-color 0.2s;
}
:is(.card-back-info--character, .flip-memories) .card-back-memory-nodes .detail-toggle .tag-knob {
position: absolute;
top: 0.12em;
left: 0.12em;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: color-mix(in srgb, var(--tag-color) 55%, rgba(255, 255, 255, 0.4));
transition: left 0.2s, background 0.2s;
}
:is(.card-back-info--character, .flip-memories) .card-back-memory-nodes .detail-toggle.on {
background: color-mix(in srgb, var(--tag-color) 35%, rgba(255, 255, 255, 0.1));
border-color: color-mix(in srgb, var(--tag-color) 55%, rgba(255, 255, 255, 0.25));
}
:is(.card-back-info--character, .flip-memories) .card-back-memory-nodes .detail-toggle.on .tag-knob {
left: 0.98em;
background: var(--tag-color, rgba(255, 255, 255, 0.7));
}
/* Card-field details share the panel's one-at-a-time show/hide. Active fills the
panel so the textarea has the whole area and scrolls internally. */
.card-back-info--character .card-back-memory-panel .cb-cardfield-detail { display: none; }
/* Active card-field fills the (definite-height) panel so its textarea runs to
the bottom of the card, not just a couple of lines. */
.card-back-info--character .card-back-memory-panel .cb-cardfield-detail.active {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.card-back-info--character .cb-cardfield-input {
flex: 1;
min-height: 3em;
width: 100%;
box-sizing: border-box;
margin-top: 0.4em;
resize: none;
/* Match the read-only detail text (.memory-node-detail__obs li) — plain
font-family:inherit + 0.9em so the em resolves against the card master,
not a textarea UA default that renders fixed-large on small cards. */
font-family: inherit;
font-size: 0.9em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.3em;
padding: 0.4em 0.5em;
overflow-y: auto;
}
.card-back-info--character .cb-cardfield-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--primary) 40%, rgba(255, 255, 255, 0.2));
}
.card-back-info--character .cb-cardfield-input::placeholder {
color: rgba(255, 255, 255, 0.35);
font-style: italic;
}
/* Editor Memories flip-face: the editable card-field editor now lives here too,
but the rules above are scoped to .card-back-info--character (the gallery card
back). Mirror the card-field detail toggle + input fill for the flip face so
its sub-sections show ONE at a time (the active one filling the panel) instead
of every group stacking open with its own scrollbar. */
.flip-memories .card-back-memory-panel .cb-cardfield-detail { display: none; }
.flip-memories .card-back-memory-panel .cb-cardfield-detail.active {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.flip-memories .cb-cardfield-input {
flex: 1;
min-height: 3em;
width: 100%;
box-sizing: border-box;
}
/* ...and the node-group sub-container + its label (the Memory / Conversation
groups with the subtle background), likewise gallery-scoped above — so each
section reads as its own grouped container with the label on its own line,
not the label + all its nodes on one wrapped line. */
.flip-memories .card-back-memory-nodes .node-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.3em;
width: 100%;
padding: 0.3em 0.4em 0.4em;
margin-bottom: 0.3em;
border-radius: 0.6em;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.flip-memories .card-back-memory-nodes .node-group-label {
flex-basis: 100%;
text-align: center;
font-size: 0.6em;
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
/* ...and the card-field bubbles' system tint (slot-1) so Description / Persona /
Identity / the Conversation fields read as SYSTEM nodes, distinct from the
user (neutral) and on-the-fly (slot-2) memory nodes — whose kind colors come
from the global .memory-node--{system,user,fly} rules and already reach here.
Only this detail-bubble tint was gallery-scoped. */
.flip-memories .card-back-memory-nodes .detail-bubble {
--tag-color: var(--primary);
font-size: 0.85em;
padding: 0.22em 0.5em;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.flip-memories .card-back-memory-nodes .detail-bubble:hover,
.flip-memories .card-back-memory-nodes .detail-bubble:focus-visible {
background: color-mix(in srgb, var(--tag-color) 32%, rgba(255, 255, 255, 0.06));
outline: none;
}
.flip-memories .card-back-memory-nodes .detail-bubble.active {
background: color-mix(in srgb, var(--tag-color) 42%, rgba(255, 255, 255, 0.08));
border-color: color-mix(in srgb, var(--tag-color) 55%, transparent);
}
/* Card-back Identity pills (C2) — ported from the cast fieldset's
.detail-field[data-field="identity"], em-scaled to the card. race/gender/age
as collapsing select2 pills; the boxed select2 chrome is stripped so each pill
shows just its value over the slot-1 bubble fill. Identity is 3 short pills, so
its detail doesn't fill the panel like the textareas do. */
:is(.card-back-info--character, .flip-memories) .cb-identity-detail.active { height: auto; }
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pills-row {
display: flex;
flex-wrap: wrap;
/* Top-align: age was reading a few px low when centred (same as the cast
fieldset), and the pills are a uniform height anyway. */
align-items: flex-start;
justify-content: center;
gap: 0.4em 0.6em;
padding-top: 0.3em;
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-field {
display: flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill {
gap: 0.4em;
max-width: 100%;
min-width: 3.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
align-items: center;
background: color-mix(in srgb, var(--primary) 25%, transparent);
border-color: color-mix(in srgb, var(--primary) 50%, rgba(255, 255, 255, 0.2));
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill-label {
font-size: 0.6em;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.55;
flex: 0 0 auto;
white-space: nowrap;
cursor: pointer;
line-height: 1;
align-self: center;
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill .select2-container { flex: 0 1 auto; min-width: 0; }
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill .select2-container--default .select2-selection--single {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
/* Taller than the cast fieldset's 1.5rem: the select2 search overlay has a
fixed height that won't shrink, so give the pill room to clear it. */
height: 1.9em;
min-height: 0;
padding: 0;
display: flex;
align-items: center;
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill .select2-container--default .select2-selection--single:hover {
background: transparent;
border: none;
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill .select2-container--default .select2-selection__rendered {
padding: 0;
line-height: 1;
font-size: 0.85em;
overflow: hidden;
text-overflow: ellipsis;
}
:is(.card-back-info--character, .flip-memories) .cb-identity-detail .identity-pill .select2-selection__arrow { display: none; }
/* Hand-install-a-memory input (C4b) — a subtle "type in a line" field under a
node's observations: no box, just a faint underline (no slot-colour accent,
which read as a red border on a red-haired character). */
/* Add-a-memory input reads as a plain typing line (no field box) — same as the
Memories face. The panel is a .field, so fieldsets-base's `.field
input[type=text]` (0,2,1 + its hover/focus accent) was painting it as a
bordered/tinted field; the 3-class + attribute scope here beats it. Indented
to line up under the observation text. */
.card-back-info--character .cast-scene-memory-panel .cb-obs-add-input[type="text"] {
width: 100%;
box-sizing: border-box;
height: auto;
margin-top: 0.2em;
font-family: inherit;
font-size: 0.85em;
line-height: 1.4;
color: rgba(255, 255, 255, 0.85);
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0.1em 0.1em 0.1em 1.9em;
}
.card-back-info--character .cast-scene-memory-panel .cb-obs-add-input[type="text"]:hover,
.card-back-info--character .cast-scene-memory-panel .cb-obs-add-input[type="text"]:focus {
outline: none;
background: transparent;
border: none;
box-shadow: none;
}
.card-back-info--character .cast-scene-memory-panel .cb-obs-add-input::placeholder {
color: rgba(255, 255, 255, 0.35);
font-style: italic;
}
/* Description / node-detail text in em off the master (2-class scope beats
cast-fieldset's 1-class fixed-rem rules) so the descriptions scale in lockstep
with the tags and the rest of the card. */
.card-back-info--character .memory-node-detail__head { gap: 0.5em; margin-bottom: 0.4em; }
.card-back-info--character .memory-node-detail__name { font-size: 1em; }
.card-back-info--character .memory-node-detail__type { font-size: 0.7em; }
.card-back-info--character .memory-node-detail__obs { padding-left: 1.1em; gap: 0.3em; }
.card-back-info--character .memory-node-detail__obs li { font-size: 0.9em; gap: 0.45em; }
.card-back-info--character .memory-node-detail__none { font-size: 0.88em; }
/* Scene/chat (+ editor clone) card-back: scale the thumb with the CARD, not the
field content. The base .char-thumb is height:100% — sized by the mood/
activity/description content height — so it stayed FIXED as the card shrank
and ate the fields. Make the card-back a query container and size the thumb
as a fraction of ITS width; --thumb-aspect (set per scene aspect) derives the
height. Now the thumb tracks the card. (Gallery --character keeps its own
1fr path above; the base grid / bottom fieldset are untouched.) Tune the
38cqw to trade thumb size against field room. */
.card-back-info--scene {
container-type: inline-size;
/* Scene thumb short side on vmax (device long side) — flip-stable, like the
gallery avatar; replaces 38cqw, which rescaled the thumb on every rotation
(the same flip-shrink we fought on the gallery). SAME dial as the gallery
avatar — this card-back fits as much content (or more), so match its size. */
--cb-avatar-w: clamp(52px, 8.5vmax, 74px);
/* One gap dial for the scene card-back: ~5px on small/mobile cards (where we need
the room to fit description) up to the page's 10px target on desktop. vmax so it's
flip-stable. Overrides the base .card-back-info gap + padding (both single-class,
so --scene wins on source order). */
--cb-gap: clamp(5px, 0.6vmax, 10px);
gap: var(--cb-gap);
padding: var(--cb-gap);
}
.card-back-info--scene .char-thumb {
width: var(--cb-avatar-w);
height: auto;
align-self: start;
}
/* Landscape: constrain the HEIGHT to the dial (the short side), like the gallery —
the width grows to the aspect (a wide thumb). Without this the width stays the
dial and the aspect-ratio collapses the height to var×0.67, so landscape rendered
smaller than portrait/square. Now all three share the same --cb-avatar-w short side. */
.strip-card[data-aspect-ratio="landscape"] .card-back-info--scene .char-thumb {
width: auto;
height: var(--cb-avatar-w);
}
.card-back-info .card-back-join-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
text-align: center;
}
/* .join-question removed 2026-05-27 — the wrapping description
above the button blew up the fixed-aspect card on mobile. Button
label IS the affordance now (Chat / Room Full). */
.card-back-info .join-btn {
appearance: none;
border: 1px solid rgba(255, 255, 255, 0.2);
background: color-mix(in srgb, var(--primary) 75%, transparent);
color: inherit;
border-radius: 8px;
padding: 0.6rem 1.2rem;
font: inherit;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
width: 100%;
transition: transform 80ms ease, background 120ms ease,
box-shadow 120ms ease;
}
.card-back-info .join-btn:hover {
background: var(--primary);
box-shadow: 0 3px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
.card-back-info .join-btn:active {
transform: translateY(1px);
}
/* Roster-full: keep the Join button in its slot so the layout
doesn't shift, just grey it out with the standard busy-lockout
recipe (opacity:0.35 + pointer-events:none + cursor) used
elsewhere on the page. The .join-question--full label sits
where "Add X to your roster?" did. */
.card-back-info .join-question--full {
font-size: 0.8rem;
line-height: 1.3;
color: rgba(220, 80, 80, 0.9);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.card-back-info .join-btn--disabled,
.card-back-info .join-btn[disabled] {
opacity: 0.35;
pointer-events: none;
cursor: not-allowed;
}
/* Gallery roster — 3 mini-thumbs below the Chat / Room Full
button, one per clone in the user's cast. Reuses the cast-slot
avatar bevel recipe at a smaller scale so the gallery shows
the same character art the scene-page cast row uses. Width-
capped so the thumbs don't fill the full join-area column —
"a bit smaller" per the user's feedback. */
.card-back-info .gallery-roster {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.3rem;
max-width: 70%;
margin: 0.2rem auto 0;
}
.card-back-info .gallery-roster-thumb {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
background: linear-gradient(
135deg,
color-mix(in srgb, var(--primary) 18%, #22222a) 0%,
#22222a 50%
);
border: 2px solid color-mix(in srgb, var(--primary) 40%, rgba(255, 255, 255, 0.15));
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.3),
0 0 6px color-mix(in srgb, var(--primary) 18%, transparent),
inset 0 2px 4px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.card-back-info .gallery-roster-thumb:hover {
border-color: color-mix(in srgb, var(--primary) 65%, rgba(255, 255, 255, 0.25));
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.4),
0 0 14px color-mix(in srgb, var(--primary) 35%, transparent),
inset 0 2px 4px rgba(0, 0, 0, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.card-back-info .gallery-roster-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-back-info .gallery-roster-initial {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
}
/* ── Gallery roster strip ───────────────────────────────────────────────
The gallery's character/conversation manager, docked inside the toolbar's
.control-panel so it inherits the bar's position: a horizontal strip in the
portrait bottom bar, a vertical strip in the landscape side rail. Borrows
the .scrolling-strip scroll feel (flex + overflow + snap) but is its OWN
class — no carousel JS, no visibility:hidden reveal gate. Thumbnail-height;
eats a little preview height (tune later). */
.roster-strip {
display: flex;
gap: 10px; /* fixed — was var(--layout-gap), which is now 0 (would collapse the slots together) */
align-items: center;
justify-content: safe center; /* centered when it fits; `safe` falls back to
start-align once it overflows so the end
cards aren't clipped (plain center clips). */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
/* padding = the selected slot's overhang headroom (it grows both ways from centre),
so the cards + toolbar footprint don't move when a slot is selected. */
padding: 12px 0.2rem 7px;
margin: 0; /* margin-bottom: 12px removed — legacy from when the roster
floated above the toolbar and had to "grow the preview to
meet the footer". In the grid the title row owns that
space, so the 12px just read as an unneeded line below the
slots. */
position: relative;
z-index: 5;
background: none; /* no chrome of its own — sits on the preview surface */
}
.roster-strip::-webkit-scrollbar { display: none; }
/* EMPTY roster → remove the row. Its padding + margin (12 + 7 + 12 = 31px) rendered even
with no slots, so a gap sat between the card and the title on every logged-out surface.
The grid's `auto` track then collapses to nothing on its own. */
body:has(.roster-strip):not(:has(.roster-strip-item)) .roster-strip { display: none; }
.roster-strip-item {
position: relative;
flex: 0 0 auto;
scroll-snap-align: start;
}
/* The selected slot sits a few px bigger than the rest — in place, no overhang.
z-index keeps the slightly-larger card cleanly above its neighbours. */
.roster-strip-item:has(.roster-strip-thumb--selected) {
z-index: 2;
}
.roster-strip-thumb {
display: block;
height: var(--roster-slot-h, 13svh); /* base slot size; --roster-slot-h is the
landscape/desktop override. Fraction of the card, so ~same
on phone + desktop (was fixed 66px → too small on desktop). */
width: auto;
aspect-ratio: 2 / 3; /* little portrait, like the cards */
border-radius: 5px;
overflow: hidden;
cursor: pointer;
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 18%, #22222a) 0%, #22222a 50%);
border: 2px solid color-mix(in srgb, var(--primary) 40%, rgba(255, 255, 255, 0.15));
transition: border-color 0.15s ease, height 0.15s ease, margin 0.15s ease;
}
/* The centered card is a few px bigger, grown EVENLY top + bottom: the extra
height splits into equal negative top + bottom margins so it overhangs the row
symmetrically (margin box stays base → row height + toolbar don't move), and the
strip's top/bottom headroom shows both sides. Sharp: real height, no transform. */
.roster-strip-item:has(.roster-strip-thumb--selected) .roster-strip-thumb {
height: calc(var(--roster-slot-h, 13svh) + 12px);
margin-top: -6px;
margin-bottom: -6px;
}
/* × rides up with the 6px-taller top. */
.roster-strip-item:has(.roster-strip-thumb--selected) .roster-strip-x {
top: -11px;
}
/* No glow / colour change on the selected slot — the main carousel's centered
card has none either, so the SIZE (the :has zoom below) is the only cue. The
selected slot keeps its normal hair border, just bigger. */
.roster-strip-thumb:hover {
border-color: color-mix(in srgb, var(--primary) 65%, rgba(255, 255, 255, 0.25));
}
.roster-strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Empty slot — a dashed frame with a + at the same portrait scale; click sets it
to the centered character. It's a