:root {
	--bg: #000;
	/* theme base (outside color fallback) */
	--frame: #fff;
	/* border + text color (outside starts white) */
	--text: var(--frame);
	--panel: #000;
	/* solid fill INSIDE the rotating frame */
	--transition: 750ms;
	/* global UI transitions (frame/title) */
	--box-rot: 60ms;
	/* rotation duration for small boxes */
	--text-fade: 20ms;
	/* fade timing for box text crossfades */
	--box-fade: 1000ms;
	/* fade timing for boxes appearing/disappearing */
	/* fade timing for box text crossfades */
	--overscan: clamp(24px, 15vmin, 96px);
	/* extra bleed for the inner panel so no gaps show during rotation */
	--box-bg-opacity: 70%;
	/* default opacity for box backgrounds */
	--panel-alpha: 0.8;
	/* default opacity for the inner panel underlay */
}

body.inverted {
	--bg: #fff;
	--frame: #000;
	--text: var(--frame);
	--panel: #fff;
	background-image: url('bgwhite.png');
}

/* Disable animations/transitions while loading to prevent jank */
body.is-preload *:not(#loader):not(#loader *),
body.is-preload *:not(#loader):not(#loader *)::before,
body.is-preload *:not(#loader):not(#loader *)::after {
  animation: none !important;
  transition: none !important;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	/* Keep color and layout props here; set the image in state-specific rules below */
	background-color: var(--bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	opacity: 1;
	transition: background-color var(--transition) ease-in-out,
	            background-image var(--transition) ease-in-out,
	            opacity 800ms ease;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.stage {
  opacity: 1;
  transition: opacity 800ms ease;
}
body.is-preload .stage { opacity: 0; }

/* White links; light grey after visited */
a {
  color: #fff;
  text-decoration: underline;
}

a:visited {
  color: #c7c7c7; /* light grey */
}

/* Optional: nicer interactions */
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
}

.stage {
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vmin, 32px);
  position: relative;
  overflow: hidden;
}

.corner-badge {
  position: absolute;
  right: 10px;   /* hang it outside the frame */
  bottom: -60px;
  width: 80px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 50;                          /* above the border pseudo */
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition) ease-in-out,
              transform var(--transition) ease-in-out;
  width: 5%;
  min-width: 32px;
  max-width: 96px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  padding: 8%;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
}

/* fade state you already toggle from JS */
.corner-badge.is-faded {
  opacity: 0;
  transform: translateY(6px);
}

/* Faded state used on submit */
.corner-badge.is-faded {
  opacity: 0;
  transform: translateY(6px);
}

.frame {
	height: min(88vmin, 640px);
	width: min(88vmin, 640px);
	aspect-ratio: 1 / 1;
	border: transparent;
	border-radius: clamp(12px, 2vmin, 24px);
	display: grid;
	place-items: center;
	background: transparent;
	will-change: transform;
	position: relative;
	overflow: visible;
	background-clip: padding-box;
	transform-origin: 50% 50%;
    transition:
        transform var(--transition) ease-in-out,
        border-color var(--transition) ease-in-out,
        background-color var(--transition) ease-in-out,
        width var(--transition) ease-in-out,
        height var(--transition) ease-in-out;
}

.frame--fillvh {
  /* After 90° rotation: width == visual height, height == visual width */
  height: calc(100% - 80px);
  margin-top: 0px;
  margin-bottom: 80px;
  aspect-ratio: auto !important;   /* fix the !important syntax */
}

.frame-underlay {
	position: absolute;
	inset: 0;
	/* fill the frame */
	background: var(--panel);
	/* same color as your panel */
	opacity: var(--panel-alpha);
	z-index: 0;
	/* behind content */
	pointer-events: none;
	transition: opacity var(--transition) ease-in-out;
	border-radius: clamp(12px, 2vmin, 24px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25)
}

.frame.panel-transparent {
	--panel-alpha: 0;
}

.frame-viewport {
	position: absolute;
	inset: 0;
	place-items: center center;   /* vertical start, horizontal center */
    align-content: start;        /* prevent row stretching */
    row-gap: clamp(8px, 2vmin, 16px); /* explicit spacing */
	place-items: center;
	overflow: hidden;
	transform-origin: 50% 50%;
	transform: rotate(0deg);
	transition: transform var(--transition) ease-in-out;
	background: transparent;
	z-index: 1;
}

.frame-viewport::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--overscan));
	background: transparent;
	opacity: 0.8;
	transition: background-color var(--transition) ease-in-out;
	z-index: -1;
}

/* Title area */
.title-wrap {
	position: relative;
	left: 50%;
	margin-top: clamp(12px, 3vmin, 32px);
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	display: grid;
	grid-area: 'title';
	place-items: center;
	align-self: center;
	overflow: visible;
	z-index: 2;
	// pointer-events: none;
}

.title-row {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 0;
	margin-top: 0.5em;
}

.title-part {
	font-weight: 400;
	font-size: clamp(20px, 5vmin, 36px);
	color: var(--text);
	letter-spacing: 0.5em;
	margin: 0;
	white-space: nowrap;
    align-items: center;
	align-self: center;
}

.dot {
	font-weight: 700;
	font-size: clamp(28px, 6vmin, 48px);
	color: var(--text);
	opacity: 0.9;
	display: inline-block;
	margin: 0 clamp(0.55em, 1.4vmin, 0.8em);
}

.stack-wrap {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	clip-path: inset(0 round 4px);
}

.stack-lane {
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	transition: transform var(--transition) ease-in-out;
	will-change: transform;
}

.inner {
	width: min(86%, 560px);
	max-width: 560px;
	display: grid;
	text-align: center;
	z-index: 3;
	padding: clamp(5px, 2.2vmin, 16px);
	padding-top: 0px;
	margin-top: 1%;
	justify-self: center;
	align-self: baseline;
	grid-template-areas: 'title' 'label''stack''status''hint';
}


label {
	color: var(--text);
	font-size: clamp(12px, 2vmin, 18px);
	opacity: .7;
	user-select: none;
	grid-area: label;
	transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;
}

/* Ensure helper copy uses the theme color in both states */
body:not(.inverted) .inner label,
body:not(.inverted) .hint {
	color: var(--text);
	opacity: 1;
	grid-area: hint;
	transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;
	margin-top: 0px;
}

/* helper class: slide-in gently from left */
.from-left {
	opacity: 0;
	transform: translateX(-16px);
}

body.inverted .inner label,
body.inverted .hint {
	color: #000;
}

form {
	width: 100%;
	grid-area: stack;
}

#storyForm {
position: relative;
}

#storyHelpBtn {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: clamp(15px, 4vmin, 28px);
    height: clamp(15px, 4vmin, 28px);
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    border: none;
    font-size: clamp(12px, 2vmin, 25px);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin: 9px;
    opacity: 1;
    transition: opacity var(--transition) ease-in-out;
}

textarea {
	width: 100%;
	padding: clamp(12px, 2.4vmin, 18px) clamp(14px, 2.6vmin, 22px);
	background: transparent;
	color: var(--text);
	border: 2px solid var(--frame);
	border-radius: 12px;
	font-size: clamp(12px, 2vmin, 18px);
	outline: none;
	caret-color: var(--text);
	transition: border-color var(--transition) ease-in-out, color var(--transition) ease-in-out, background-color var(--transition) ease-in-out, transform var(--transition) ease-in-out, opacity var(--transition) ease-in-out;
	resize: none;
	min-height: 2lh;
	transform: translateX(0);
	opacity: 1;
	height: clamp(60px, 18vmin,200px);
}

.slide-left-out {
	transform: translateX(-120%);
	opacity: 0;
}

textarea::placeholder {
	color: var(--text);
	opacity: .5;
}

textarea:focus {
	border-color: var(--frame);
}

.hint {
	color: var(--text);
	opacity: .6;
	font-size: clamp(9px, 2vmin, 16px);
	grid-area: hint;
	transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;
	margin-top: 0px;
}

.hint.fading {
	opacity: 0.6;
}

/* fades out but still reserves space */
.hint.hidden {
	display: none;
}

#hintPopup, #termsPopup, #deletePopup, #storyInstructionsPopup, #creditsPopup {
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  display: inline; /* for centering */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: rgba(0, 0, 0, 0.9); /* glassy dark */
  border: 2px solid transparent;
  border-radius: clamp(10px, 1.6vmin, 16px);
  padding: clamp(16px, 3vmin, 24px);
  z-index: 1000;
  width: 100%;
  max-height: 100%;
  height: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,0.20);
  color: #fff;
  font-size: clamp(12px, 2vmin, 16px);
  text-align: center;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--frame) transparent;
  scrollbar-gutter: stable both-edges;
}

#hintPopup a, #termsPopup a, #deletePopup a, #storyInstructionsPopup a, #creditsPopup a {
  display: inline;
  white-space: nowrap; /* optional, keeps the link and surrounding text on same line */
}

#hintPopup::-webkit-scrollbar, #termsPopup::-webkit-scrollbar, #deletePopup::-webkit-scrollbar, #storyInstructionsPopup::-webkit-scrollbar, #creditsPopup::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#hintPopup::-webkit-scrollbar-track, #termsPopup::-webkit-scrollbar-track, #deletePopup::-webkit-scrollbar-track, #storyInstructionsPopup::-webkit-scrollbar-track, #creditsPopup::-webkit-scrollbar-track {
  background: transparent;
  border: 2px solid var(--frame);
  border-radius: 8px;
}
#hintPopup::-webkit-scrollbar-thumb, #termsPopup::-webkit-scrollbar-thumb, #deletePopup::-webkit-scrollbar-thumb, #storyInstructionsPopup::-webkit-scrollbar-thumb, #creditsPopup::-webkit-scrollbar-thumb {
  background: var(--frame);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
#hintPopup::-webkit-scrollbar-thumb:hover,  #termsPopup::-webkit-scrollbar-thumb:hover, #deletePopup::-webkit-scrollbar-thumb:hover, #storyInstructionsPopup::-webkit-scrollbar-thumb:hover, #creditsPopup::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--frame) 80%, transparent);
}
hintPopup::-webkit-scrollbar-corner,  termsPopup::-webkit-scrollbar-corner, deletePopup:::-webkit-scrollbar-corner, #storyInstructionsPopup::-webkit-scrollbar-corner, #creditsPopup::-webkit-scrollbar-corner {
  background: transparent;
}

#closeHintPopup, #closeTermsPopup, #closeDeletePopup, #closeStoryInstructionsPopup, #closeCreditsPopup {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: box-shadow 0.2s, background 0.2s;
  z-index: 1;
}

#closeHintPopup:hover, #closeTermsPopup:hover, #closeDeletePopup:hover, #closeStoryInstructionsPopup:hover, #closeCreditsPopup:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  background: #fff;
}

#hintPopup.show, #termsPopup.show, #deletePopup.show, #storyInstructionsPopup.show, #creditsPopup.show {
  opacity: 1;
  pointer-events: auto;
}
#hintPopup.hide, #termsPopup.hide, #deletePopup.hide, #storyInstructionsPopup.hide, #creditsPopup.hide {
  opacity: 0;
  pointer
}

/* removed from layout AFTER fade */

/* Floating ambient pairs (outside the frame) */
.ambient {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.ambient-pair {
	position: absolute;
	/* subtle in-place float via CSS vars set by JS */
	--tx: 0px;
	--ty: 0px;
	--rot: 0deg;
	/* per-box theme vars (default follow global theme) */
	--box-bg: var(--bg);
	--box-frame: var(--frame);
	transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot));
	will-change: transform, opacity;
	/* smaller square boxes */
	width: clamp(110px, 15vmin, 190px);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	font-size: clamp(10px, 1.5vmin, 13px);
	line-height: 1.3;
	text-align: center;
	/* box styling similar to main frame */
	border: clamp(6px, 1vmin, 10px) solid var(--box-frame);
	border-radius: clamp(10px, 1.6vmin, 16px);
	background: color-mix(in srgb, var(--box-bg) var(--box-bg-opacity), transparent);
	opacity: 0.7;
	padding: clamp(8px, 1vmin, 12px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: opacity var(--box-fade) ease-in-out, background-color var(--text-fade) ease-in-out, border-color var(--text-fade) ease-in-out, transform var(--box-rot) ease-in-out, box-shadow var(--text-fade) ease-in-out, filter var(--text-fade) ease-in-out;
	opacity: 0;
	pointer-events: none;
	/* initially hidden */
	cursor: pointer;
}

.ambient-pair .neg,
.ambient-pair .pos {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	text-align: center;
	/* keep text horizontal while parent rotates */
	transform: rotate(calc(-1 * var(--rot)));
	transition: opacity var(--text-fade) ease-in-out, transform var(--box-rot) ease-in-out;
	color: #000;
	opacity: 0;
}

.ambient-pair .neg {
	color: #fff;
	opacity: 1;
}

.ambient-pair .pos {
	color: #000;
	opacity: 0;
	transition: opacity var(--text-fade) ease-in-out;
}

/* ensure contrast when box is locally flipped (bg becomes var(--frame)) */
.ambient-pair.local-flip .pos {
	color: var(--bg);
}

body.show-positive .ambient-pair:not(.local-flip) .neg {
	opacity: 0;
}

body.show-positive .ambient-pair:not(.local-flip) .pos {
	opacity: 1;
}

.ambient-pair.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* visible state */
.ready .ambient-pair:not(.is-hidden) {
	opacity: 1;
	pointer-events: auto;
}

/* per-box local flip: invert colors and text visibility for this box only */
.ambient-pair.local-flip {
	--box-bg: var(--frame);
	--box-frame: var(--bg);
}

.ambient-pair.local-flip .neg,
.ambient-pair.local-flip .pos {
	opacity: 0;
}

body.show-positive .ambient-pair.local-flip .neg {
	opacity: 1;
}

body:not(.show-positive) .ambient-pair.local-flip .pos {
	opacity: 1;
}

/* Force white state (used on submit) — wins over local flips */
.ambient-pair.force-white {
	--box-bg: #fff;
	--box-frame: #000;
}

.ambient-pair.force-white .neg,
.ambient-pair.force-white .pos {
	color: #000;
}

/* Explicit background images per state */
body:not(.inverted) {
	background-image: url('bgglass.png');
}

body.inverted {
	background-image: url('bgglass.png');
}

/* Story display and swap animations */
.story-display {
	grid-area: stack;
	width: 100%;
	border: 2px solid var(--frame);
	border-radius: 12px;
	padding: clamp(12px, 2.4vmin, 18px) clamp(14px, 2.6vmin, 22px);
	color: var(--text);
	background: transparent;
	transform: translateX(-120%);
	opacity: 0;
	visibility: hidden;
	transition: transform var(--transition) ease-in-out, opacity var(--transition) ease-in-out, visibility 0s linear var(--transition);
	white-space: pre-wrap;
	overflow: auto;
	word-wrap: break-word;
	-webkit-overflow-scrolling: touch;
	user-select: text;
	/* anchor start exactly where textarea was; set from JS on submit */
	margin-top: var(--story-offset, 0px);
	height: var(--story-h, auto);
	max-height: var(--story-h, auto);
	margin-bottom: 9px;
	font-size: clamp(12px, 2vmin, 18px);
}

.story-display.show {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	transition: transform var(--transition) ease-in-out, opacity var(--transition) ease-in-out, visibility 0s linear 0s;
}

/* Progress bar */
.progress {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 8px);
	bottom: clamp(12px, 2.6vmin, 18px);
	width: min(86%, 560px);
	opacity: 0;
	transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;
	pointer-events: none;
}

.progress.active {
	opacity: 1;
	transform: translate(-50%, 0);
}

.progress .bar {
	height: 4px;
	width: 0;
	background: var(--frame);
	border-radius: 6px;
}

.progress .prog-label {
	margin-top: 6px;
	text-align: center;
	font-size: clamp(12px, 1.8vmin, 14px);
	color: var(--text);
	opacity: .7;
}

@keyframes grow {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

/* Fade helpers and status styling */
.faded {
	opacity: 0 !important;
	transform: translateY(-6px);
}

.status {
    transform: translateY(6px);
    transition: opacity var(--transition) ease-in-out, transform var(--transition) ease-in-out;
    pointer-events: none;
    display: none;                 /* no space initially */
    grid-area: status;
    width: 100%;
    justify-self: center;
    opacity: 0;
    transform: translateY(6px);
    overflow: hidden;
    pointer-events: none;
    transition:
    opacity var(--transition) ease-in-out,
    transform var(--transition) ease-in-out
}

/* Stage 1: reinsert into layout, still collapsed */
.status.pre-enter {
    display: block;
}

.status.show {
	opacity: 1;
	display: block;
	transform: translateY(0);
}

.status-bar {
	height: 6px;
	border: 2px solid var(--frame);
	border-radius: 8px;
	overflow: hidden;
	background: transparent;
}

.status-bar .fill {
	height: 100%;
	width: 0%;
	background: var(--frame);
	transition: width var(--transition) ease-in-out;
}

.status-label {
	margin-top: 8px;
	text-align: center;
	font-size: clamp(12px, 1.8vmin, 14px);
	color: var(--text);
	opacity: .8;
}

/* "Submit Another Story" button (outside the frame, centered under it) */
.again-btn {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, 0);
	width: clamp(200px, 30vmin, 280px);
	padding: 10px 14px;
	text-align: center;
	cursor: pointer;
	user-select: none;
	border: none;
	border-radius: clamp(12px, 2vmin, 24px);
	background: rgba(255, 255, 255, 0.72);
	color: #111;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition) ease-in-out, filter var(--text-fade) ease-in-out, background 220ms;
	z-index: 20;
	backdrop-filter: blur(4px);
	font-size: clamp(12px, 2.4vmin, 20px);
}

.again-btn:hover {
	box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

.again-btn.show {
	opacity: 1;
	pointer-events: auto;
}

.again-btn.show {
	opacity: 1;
	pointer-events: auto;
}

.again-btn.inline{
  position: relative;          /* flow with text */
  left: 0; top: 100%;     /* reset abs offsets */
  transform: none;
  display: inline-block;     /* or 'block' if you prefer full width */
  margin: 0.75rem 0 0;       /* spacing in the stream */
  opacity: 1;                /* override base 0 */
  pointer-events: auto;      /* clickable */
  z-index: auto;
  background: rgb(255 255 255 / 100%);
  color: #000000;
}

.again-btn:focus-visible {
	outline: 2px dashed var(--frame);
	outline-offset: 4px;
}

#loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;   /* centers loader-content */
  background: #000;      /* solid fallback during preload */
  z-index: 9999;
  transition: opacity 400ms ease;
}

/* Fade loader out when not preloading */
body:not(.is-preload) #loader {
  opacity: 0;
  visibility: hidden;
}

/* Spinner + text alignment */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* space between spinner and text */
}

/* Spinner stays centered */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Loading text */
.loading-text {
  font-family: sans-serif;
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
}

/* Fancy scrollbars for the story input & display */
#story,
.story-display {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--frame) transparent;
  /* (optional) reserve space to avoid layout jump when bars appear */
  scrollbar-gutter: stable both-edges;
}

/* WebKit (Chrome, Edge, Safari) */
#story::-webkit-scrollbar,
.story-display::-webkit-scrollbar {
  width: 10px;                /* vertical bar */
  height: 10px;               /* horizontal bar */
}

#story::-webkit-scrollbar-track,
.story-display::-webkit-scrollbar-track {
  background: transparent;
  border: 2px solid var(--frame);
  border-radius: 8px;
}

#story::-webkit-scrollbar-thumb,
.story-display::-webkit-scrollbar-thumb {
  background: var(--frame);
  border-radius: 8px;
  border: 2px solid var(--bg); /* creates the ring look against panel */
}

#story::-webkit-scrollbar-thumb:hover,
.story-display::-webkit-scrollbar-thumb:hover {
  /* subtle focus/hover affordance */
  background: color-mix(in srgb, var(--frame) 80%, transparent);
}

#story::-webkit-scrollbar-corner,
.story-display::-webkit-scrollbar-corner {
  background: transparent;
}

/* one chip per row: Valence, Internality, Stability, Globality */
.story-display .content-card .ratings {
  display: grid;
  grid-template-columns: 1fr;   /* single column */
  grid-auto-rows: auto;
  row-gap: 8px;                 /* space between rows */
}

/* each child (chip or <details>) sits on its own row */
.story-display .content-card .ratings > * {
  justify-self: start;          /* keep chips left-aligned */
  width: 100%;           /* chips keep natural width */
}

/* polish for a <details> valence chip */
.story-display .content-card .ratings details {
  display: block;               /* ensure it behaves like a row item */
}
.story-display .content-card .ratings details > summary {
  list-style: none;
  cursor: pointer;
}
.story-display .content-card .ratings details > summary::-webkit-details-marker {
  display: none;
}

/* inside story-display, stream text first, then cards */
.story-display .stream-log { margin-bottom: 1rem; }
.story-display .cards { display: grid; gap: 12px; white-space: normal; }

/* cards live *inside* the story-display */
.story-display .cards {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  white-space: normal; /* override story-display's pre-wrap just for cards */
}

/* each widget */
.story-display .content-card {
  border: 1.5px solid var(--frame);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 85%, var(--frame) 15%);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}

.story-display .content-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .story-display .content-card { opacity: 1; transform: none; transition: none; }
  .story-display .content-card.reveal { opacity: 1; transform: none; }
}

.story-display .content-card .stmt { margin-bottom: 8px; font-weight: 600; }
.story-display .content-card .orient { margin-top: 8px; opacity: .9; }

/* clickable chip using <details>/<summary> */
.story-display details.chip {
  display: inline-block;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  border: 1.5px solid var(--frame);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 92%, var(--frame) 8%);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  overflow: hidden;               /* hide sliding content */
  will-change: transform;
}

.story-display details.chip > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 10px;
  font-size: 13px;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.story-display details.chip > summary::-webkit-details-marker { display: none; }

.story-display details.chip[open] {
  outline: 2px solid transparent;
  border-color: color-mix(in srgb, var(--frame) 60%, var(--accent, #5aa4ff));
}


.story-display details.chip summary::-webkit-details-marker { display: none; }
.story-display details.chip .reason { padding: 8px 10px; font-size: 13px; opacity: .85; }

/* animated panel */
.story-display details.chip {
  display: grid;
  grid-template-rows: auto 0fr;              /* summary row + collapsed body row */
  transition: grid-template-rows 260ms cubic-bezier(.2,.7,.2,1);
}
.story-display details.chip[open] {
  grid-template-rows: auto 1fr;              /* expand body row */
}

/* the *content* right after <summary> (your .reason) */
.story-display details.chip > :not(summary) {
  max-height: none;                           /* we animate the grid row, not height */
  overflow: hidden;                           /* clip while the row grows */
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 200ms ease,
    transform 260ms cubic-bezier(.2, .7, .2, 1);
  padding: 0 12px;                            /* keep your horizontal padding */
}

/* when open (or if you set [anim-open] from JS later), reveal + add vertical padding */
.story-display details.chip[open] > :not(summary),
.story-display details.chip[anim-open] > :not(summary) {
  padding-top: 8px;
  padding-bottom: 10px;
  opacity: 1;
  transform: translateY(0);
}

/* reduced motion: no animation, always visible */
@media (prefers-reduced-motion: reduce) {
  .story-display details.chip { transition: none !important; }
  .story-display details.chip > :not(summary) {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* OVERRIDE FROM HERE */

/* Keep chip size fixed; fade summary <-> reason without resizing */
.story-display details.chip {
  position: relative;
  overflow: hidden;                /* prevents growth when open */
}

/* Cross-fade targets */
.story-display details.chip summary{ /* this matches your .reason */
  /* make ease out a bit faster than ease in */
  transition: opacity 300ms ease-out, transform 300ms ease-in 600ms;
  justify-content: center;
  text-align: center;
}
.story-display details.chip > :not(summary) { /* this matches your .reason */
  transition: opacity 300ms ease-out, transform 300ms ease-in 600ms;
  justify-content: center;
  text-align: center;
}

/* Put the reason exactly on top of the summary box */
.story-display details.chip > :not(summary) {
  position: absolute;
  inset: 0;                        /* top:0; right:0; bottom:0; left:0 */
  opacity: 0;                      /* hidden by default */
  pointer-events: none;            /* clicks still hit the summary to toggle */
  display: flex;                   /* vertically center long single lines nicely */
  align-items: center;
  padding: 0 12px;                 /* match your chip’s horizontal padding */
}

/* When open: hide summary, show reason (still same chip size) */
.story-display details.chip[open] summary { opacity: 0; }
.story-display details.chip[open] > :not(summary) { opacity: 1; }

/* (Optional) if the default marker looks odd when faded out, hide it cleanly */
/* .story-display details.chip summary::marker { content: ''; } */
/* .story-display details.chip summary::-webkit-details-marker { display: none; } */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .story-display details.chip summary,
  .story-display details.chip > :not(summary) { transition: none !important; }
}

/* OVERRIDE ENDS /*

/* light theme */
body.inverted .story-display .content-card {
  background: rgba(255,255,255,0.88);
  color: #111;
  border-color: rgba(0,0,0,0.1);
}
body.inverted .story-display details.chip {
  background: rgba(255,255,255,0.92);
  color: #111;
  border-color: rgba(0,0,0,0.15);
}

.storyPopup.show {
  opacity: 1;
  pointer-events: auto;
}

.storyPopup {
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  display: flex; /* for centering */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: rgba(0, 0, 0, 0.9); /* glassy dark */
  border: 2px solid transparent;
  border-radius: clamp(10px, 1.6vmin, 16px);
  padding: clamp(16px, 3vmin, 24px);
  z-index: 1000;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,0.20);
  color: var(--text, #fff);
  font-size: clamp(12px, 2vmin, 16px);
  text-align: center;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--frame) transparent;
  scrollbar-gutter: stable both-edges;
}

.storyPopup::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.storyPopup::-webkit-scrollbar-track {
  background: transparent;
  border: 2px solid var(--frame);
  border-radius: 8px;
}
.storyPopup::-webkit-scrollbar-thumb {
  background: var(--frame);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
.storyPopup::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--frame) 80%, transparent);
}
.storyPopup::-webkit-scrollbar-corner {
  background: transparent;
}


#closeCavePopup, #closeAbcdPopup {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: box-shadow 0.2s, background 0.2s;
  z-index: 1;
}

#closeCavePopup:hover, closeAbcdPopup:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  background: #c3c3c3;
}

.storyPopup.show {
  opacity: 1;
  pointer-events: auto;
  color: #c3c3c3;
}
.storyPopup.hide {
  opacity: 0;
  pointer-events: none;
}

/* Row with left menu + centered logo */
.title-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  gap: 12px;
  margin-bottom: 6px; /* space above the title text */
  width: 80%;
}

/* Ensure placement inside the grid cells */
.title-bar .menu-button { justify-self: start; }
.title-bar .corner-badge-circle { justify-self: center; }

/* Your existing menu button styles; color inherits icon color */
.menu-button{
  display:flex;
  align-items:center;
  gap:.6rem;
  background:transparent;
  border:0;
  padding:.35rem .6rem;
  cursor:pointer;
  color:var(--text);
  font-weight:700;
  font-size:1rem;
  border-radius:999px;
  transition: color 0.4s ease;
}
.menu-button:hover{ opacity:.9; }
.menu-button:focus-visible{
  outline:2px solid #16a34a;
  outline-offset:2px;
}

.hamburger-icon{
  width:22px;
  height:22px;
  display:block;
  flex:0 0 auto;
  stroke:var(--text);
  color: var(--text);
  transition: stroke 0.4s ease, color 0.4s ease;
}

/* Optional: tighten on very small screens */
@media (max-width: 420px){
  .menu-button span{ display:none; }  /* show icon only */
}

/* ===== Menu popup ===== */
#menuPopup {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
  border-radius: clamp(12px, 2vmin, 24px);
}

/* the sliding card */
#menuPopup .menu-panel {
  width: min(420px, 100%);
  background: var(--bg);
  border-radius: clamp(10px, 1.6vmin, 16px);
  color: color-mix(in srgb, var(--text) 95%, transparent);
  padding: clamp(16px, 3vmin, 24px);
  transform: translateX(-24px);      /* start slightly left */
  opacity: 0;
  transition:
    transform var(--transition) ease,
    opacity var(--transition) ease;
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  box-shadow: 0 2px 16px color-mix(in srgb, var(--text) 20%, transparent);
}

/* open state: fade in overlay + slide panel to center */
#menuPopup.show {
  opacity: 1;
  pointer-events: auto;
  z-index: 100;
}
#menuPopup.show .menu-panel {
  transform: translateX(0);
  opacity: 1;
}

/* close animation: slide panel slightly right, then fade */
#menuPopup.hide .menu-panel {
  transform: translateX(24px);
  opacity: 0;
}

/* close button (matches your other popups) */
#closeMenuPopup{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 20px;
}

/* simple list styling */
.menu-list{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.menu-item{
  display: block;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--frame) 60%, transparent);
  transition: background-color 180ms ease, border-color 180ms ease, color 400ms ease;
}
.menu-item:visited{ color: var(--text); }
.menu-item a:visited{ color: var(--text); }
.menu-item:hover,
.menu-item:focus{
  background: color-mix(in srgb, var(--frame) 14%, transparent);
  border-color: var(--frame);
  outline: none;
}

/* make menu button color transitions smooth (if not added yet) */
.menu-button{ transition: color 0.4s ease; }
.hamburger-icon{ transition: stroke 0.4s ease, color 0.4s ease; }


/* ===== Menu user block ===== */
.menu-user{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--frame) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--frame) 10%, transparent);
}

.menu-user__avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff; /* nice contrast on dark panel */
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: 2px solid var(--frame);
}

.menu-user__avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.menu-user__meta{
  min-width: 0; /* prevent overflow */
}

.menu-user__name{
  color: var(--text);
  font-weight: 700;
  font-size: clamp(14px, 2.2vmin, 16px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.menu-user__credits{
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-size: clamp(12px, 1.9vmin, 14px);
  opacity: .9;
}

/* Small screens: tuck things tighter */
@media (max-width: 380px){
  .menu-user{
    gap: 10px;
    padding: 8px 10px;
  }
  .menu-user__avatar{
    width: 42px; height: 42px;
  }
}


.menu-user{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--frame) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--frame) 10%, transparent);
}

.menu-user__info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.menu-user__meta{
  min-width: 0;
  flex: 1;
}

.menu-user__logout{
  background: transparent;
  border: 1px solid var(--frame);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease;
}

.menu-user__logout:hover{
  background: color-mix(in srgb, var(--frame) 20%, transparent);
}

#ratingWidget {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: #fffbe7;
  border-radius: 1.5em;
  padding: 0.75em 1.5em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  font-size: 1.1em;
  margin: 1.5em auto;
  max-width: 420px;
  justify-content: center;
}

#ratingWidget .star-btn {
  background: none;
  border: none;
  font-size: 1.7em;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  filter: grayscale(0.5) brightness(0.9);
  outline: none;
  padding: 0 0.1em;
}

#ratingWidget .star-btn:focus,
#ratingWidget .star-btn:hover {
  transform: scale(1.2) rotate(-8deg);
  filter: grayscale(0) brightness(1.2) drop-shadow(0 0 4px #ffd70088);
}

#ratingWidget .star-btn.selected {
  color: #ffd700;
  filter: grayscale(0) brightness(1.2);
  text-shadow: 0 0 8px #ffd70088;
}