/* ===== CRK Team Build Maker ===== */
@font-face {
	font-family: "CookieRun";
	src: url("assets/CookieRun Bold_en.ttf") format("truetype");
	font-weight: 400 700;
	font-style: normal;
}

* { box-sizing: border-box; }

input, button, select, textarea { font-family: inherit; }

:root {
	--bg: #1b1530;
	--panel: #262040;
	--panel-2: #322a52;
	/* Card/content-box fills — overridden by the Cards settings (color + alpha).
	   Kept separate from --panel so the topbar, settings and modals stay opaque. */
	--card-bg: var(--panel);
	--card-bg-2: var(--panel-2);
	--edge: #453a6e;
	--text: #f0eafc;
	--muted: #a99cc9;
	--accent: #ffb340;
	--accent-2: #7c5cff;
	--danger: #ff5c7a;
	--radius: 12px;
	--hover-brightness: 1.15;
}

html {
	background: var(--bg);
}
html, body {
	margin: 0;
	padding: 0;
	color: var(--text);
	font-family: "CookieRun", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
/* Transparent so the decorative ::before layer (z-index:-1) shows through. */
body { background: transparent; }

/* Decorative background layer (user-selectable via Settings). Sits behind
   everything; the inset overscan hides the blurred edges from bleeding in. */
body::before {
	content: "";
	position: fixed;
	inset: -60px;
	z-index: -1;
	pointer-events: none;
	background-image: var(--app-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(var(--app-bg-blur, 0px))
		brightness(var(--app-bg-brightness, 1))
		saturate(var(--app-bg-saturate, 1));
	transition: filter .15s ease;
}

/* Frosted-glass cards: blur the background seen through the cookie cards and
   content boxes (never the topbar/settings). Only visible when the card color
   has alpha < 1 (so the bg shows through). */
:root.card-glass .slot-card,
:root.card-glass .treasure-slot,
:root.card-glass .rally-slot,
:root.card-glass .bea-section,
:root.card-glass .notes-section {
	backdrop-filter: blur(var(--card-blur, 0px));
	-webkit-backdrop-filter: blur(var(--card-blur, 0px));
}

/* ===== Top bar / nav ===== */
.topbar {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 68px 14px 22px;
	background: var(--panel);
	border-bottom: 2px solid var(--edge);
}
.app-title { font-size: 24px; margin: 0; color: var(--accent); }

.title-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.discord-icon {
	width: 12px;
	height: 12px;
	vertical-align: -1px;
	color: #5865F2;
}

.credits {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--muted);
	border-left: 1px solid var(--edge);
	padding-left: 10px;
}

.info-hover { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.info-icon {
	width: 44px;
	height: 44px;
	background: url("assets/icon/gnome_warning.png") center / contain no-repeat;
	border: none;
	cursor: help;
	padding: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.info-hover:hover .info-icon,
.info-hover:focus-within .info-icon {
	transform: scale(1.08);
}
.info-hover .info-popover {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	min-width: 240px;
	max-width: 340px;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 10px 12px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.35);
	z-index: 20;
}
.info-hover:hover .info-popover,
.info-hover:focus-within .info-popover { display: block; }
.info-popover h4 { margin: 0 0 6px; font-size: 12px; color: var(--accent); }
.info-popover h4 + h4 { margin-top: 10px; }
.info-popover ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--muted); }
.info-popover li { margin-bottom: 4px; }
.info-popover .empty { color: var(--muted); font-style: italic; }

.version-badge {
	flex-shrink: 0;
	font-size: 11px;
	font-family: inherit;
	color: var(--muted);
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 10px;
	padding: 2px 8px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.version-badge:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.changelog-entry { margin-bottom: 16px; }
.changelog-entry:last-child { margin-bottom: 0; }
.changelog-entry h4 {
	margin: 0 0 4px;
	font-size: 14px;
	color: var(--accent);
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.changelog-entry .changelog-date { font-size: 11px; color: var(--muted); font-weight: normal; }
.changelog-entry ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.changelog-entry li { margin-bottom: 3px; }

.tabs { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tab {
	background: var(--panel-2);
	color: var(--muted);
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
}
.tab.active { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

main { padding: 20px 22px 60px; max-width: 1280px; margin: 0 auto; }

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 12px;
}
.team-actions { display: flex; align-items: center; gap: 10px; }
.team-actions[hidden] { display: none; }
.section-head h2 { margin: 0; font-size: 17px; }
.section-head-title { display: flex; align-items: center; gap: 6px; }
.hint { font-size: 12px; font-weight: normal; color: var(--muted); }

/* ===== Settings menu ===== */
.settings-hover { position: absolute; top: 50%; right: 22px; transform: translateY(-50%); display: flex; }
.settings-gear-btn {
	width: 34px;
	height: 34px;
	background: url("assets/icon/settings_cog.png") center / contain no-repeat;
	border: none;
	padding: 0;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s ease, transform .12s ease;
}
.settings-gear-btn:hover { opacity: 1; transform: rotate(60deg); }
.settings-gear-btn.pressed { transform: rotate(60deg) scale(.9); }
.settings-popover {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	min-width: 340px;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 10px 14px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.35);
	z-index: 20;
}
.settings-hover.open #settings-popover { display: block; }
/* Background flyout: hidden until opened, anchored just left of the settings menu. */
.bg-popover { right: 356px; }
.settings-hover.open .bg-popover,
.settings-hover .bg-popover { display: none; }
.settings-hover.bg-open .bg-popover { display: block; }
.settings-submenu-row { padding-top: 2px; }
.settings-submenu-btn { font-size: 15px; padding: 5px 12px; }
.settings-popover h4 {
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.settings-group { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-group h4 { flex: 0 0 100%; }
.settings-group-head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 100%;
	gap: 12px;
}
.settings-group-head h4 { flex: 0 0 auto; margin: 0; }
.settings-badge-grid {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 14px;
}
.settings-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 5px 0;
	font-size: 16px;
	flex: 0 1 auto;
	max-width: 100%;
	min-width: 0;
}
.settings-toggle-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	flex: none;
}
.settings-toggle-btn img { width: auto; height: 24px; display: block; transition: transform .1s ease; }
.settings-toggle-btn.pressed img { transform: scale(.82); }
.settings-row-disabled { opacity: .4; }
.settings-row-disabled .settings-toggle-btn { cursor: not-allowed; }

/* Background image selector thumbnails */
.settings-bg-grid {
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 4px;
}
.settings-bg-thumb {
	position: relative;
	width: 72px;
	height: 44px;
	border-radius: 6px;
	border: 2px solid var(--edge);
	background: var(--panel) center / cover no-repeat;
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	color: var(--muted);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .12s ease, transform .1s ease;
}
.settings-bg-thumb:hover { transform: translateY(-1px); }
.settings-bg-thumb.active { border-color: var(--accent-2); }
.settings-bg-thumb.active::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 2px rgba(124,92,255,.6);
}
.settings-bg-thumb-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(0,0,0,.6);
	color: var(--text);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	z-index: 1;
}
.settings-bg-thumb-remove:hover { background: var(--danger); }
.settings-bg-upload {
	flex-direction: column;
	gap: 1px;
	background: var(--panel);
	border-style: dashed;
	font-size: 11px;
	line-height: 1.1;
}
.settings-bg-upload span { font-size: 16px; }
.settings-bg-upload:hover { border-color: var(--accent-2); color: var(--text); }
.settings-bg-solid { border-style: solid; }

/* Image vs Color/Gradient mode toggle */
.settings-bg-modes {
	flex: 0 0 100%;
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}
.settings-bg-mode {
	flex: 1 1 0;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--muted);
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 8px;
	cursor: pointer;
}
.settings-bg-mode:hover { color: var(--text); border-color: var(--accent-2); }
.settings-bg-mode.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }

/* Sub-heading inside the background flyout (e.g. "Cards") */
.settings-bg-subhead { margin-top: 12px !important; }

/* Native color-picker row */
.settings-color-row input[type="color"] {
	width: 100%;
	height: 24px;
	padding: 0;
	border: 1px solid var(--edge);
	border-radius: 6px;
	background: none;
	cursor: pointer;
}
.settings-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.settings-color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

/* Range sliders (blur / brightness / saturation) */
.settings-slider-row {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: 88px 1fr 44px;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-size: 15px;
}
.settings-slider-row .settings-slider-val {
	text-align: right;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.settings-slider-row input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 3px;
	background: var(--edge);
	cursor: pointer;
}
.settings-slider-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent-2);
	border: 2px solid var(--text);
	cursor: pointer;
}
.settings-slider-row input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent-2);
	border: 2px solid var(--text);
	cursor: pointer;
}
.settings-slider-row.settings-row-disabled input[type="range"] { cursor: not-allowed; }
.settings-reset-btn {
	flex: 0 0 auto;
	font-size: 12px;
	padding: 3px 10px;
}

.btn {
	background: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
}
.btn:hover { border-color: var(--accent-2); }
.btn-primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn-primary:disabled { opacity: .45; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.btn-danger:disabled { opacity: .45; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }
.btn-danger:disabled:hover { border-color: var(--edge); color: var(--text); }
.btn-ghost { background: none; color: var(--muted); font-size: 12px; }
.btn-ghost.active { color: #fff; background: var(--danger); border-color: var(--danger); }
.btn-icon {
	background: none;
	border: none;
	color: var(--muted);
	font-size: 16px;
	cursor: default;
	padding: 0;
	line-height: 0;
}
.btn-icon:hover { color: var(--text); }
.btn-icon-img { width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer; }
.btn-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn-with-icon .btn-icon-label { width: 14px; height: 14px; object-fit: contain; flex: 0 0 auto; transform: scale(1.43); }
.btn-with-icon .btn-icon-label-lg { width: 22px; height: 22px; }

/* ===== Team row ===== */
.team-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
}
@media (max-width: 1000px) { .team-row { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

.slot-card {
	background: var(--card-bg);
	border: 1px solid var(--card-bg);
	border-radius: var(--radius);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}
/* The remove button overhangs the top-right corner, past the card's own edge.
   Later cards paint over earlier ones by default, so give each card a z-index
   that descends left-to-right — that keeps every card (and its overhanging
   button) above the card to its right instead of being obscured by it. */
.team-row .slot-card:nth-child(1) { z-index: 5; }
.team-row .slot-card:nth-child(2) { z-index: 4; }
.team-row .slot-card:nth-child(3) { z-index: 3; }
.team-row .slot-card:nth-child(4) { z-index: 2; }
.team-row .slot-card:nth-child(5) { z-index: 1; }
.slot-card.empty {
	border: 2px dashed var(--edge);
	background: transparent;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	cursor: pointer;
	color: var(--muted);
	font-size: 14px;
}
.slot-card.empty:hover { border-color: var(--accent-2); color: var(--text); }
.slot-card.empty .plus { font-size: 34px; line-height: 1; }
.slot-card.empty .empty-portrait {
	width: 60%;
	max-width: 140px;
	aspect-ratio: 1;
	object-fit: contain;
	opacity: .6;
	margin-bottom: 4px;
}

/* ===== Export graphic preview (modal) ===== */
.export-preview {
	display: block;
	max-width: 100%;
	border-radius: var(--radius);
	border: 1px solid var(--edge);
	margin-bottom: 12px;
}

.export-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 0;
	color: var(--muted);
}
.export-loading img { width: 64px; height: 64px; }
.export-loading p { margin: 0; }

.portrait-wrap { position: relative; cursor: pointer; aspect-ratio: 1; }
/* :has() excludes the ICD badge so hovering it doesn't also trigger the
   swap-cookie art highlight underneath — the two controls get distinct cues. */
.portrait-wrap:hover:not(:has(.icd-badge:hover)) img.portrait { filter: brightness(var(--hover-brightness)); }
.portrait-wrap img.portrait {
	/* border.png's painted frame occupies the outer ~8% of the image, with a
	   transparent hole in the middle — shrink the portrait to match that hole
	   (rather than growing the border past the card) so the frame lines up
	   snugly without changing the card's footprint. */
	position: absolute;
	inset: 5%;
	width: 90%;
	height: 90%;
	border-radius: 20px;
	object-fit: contain;
	display: block;
	background: var(--panel-2);
}
.portrait-wrap.no-border img.portrait {
	/* No frame to line up with — fill more of the card and use a subtler radius. */
	inset: 2%;
	width: 96%;
	height: 96%;
	border-radius: 10px;
}
.portrait-wrap .portrait-border {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	pointer-events: none;
	z-index: 1;
}
.slot-remove {
	position: absolute;
	top: 0px; right: 0px;
	transform: translate(30%, -30%);
	background: rgba(0,0,0,.55);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px; height: 40px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slot-remove:hover { background: var(--danger); }
.slot-remove-icon { width: 36px; height: 36px; object-fit: contain; display: block; }
.awaken-toggle {
	background: rgba(0,0,0,.55);
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 6px;
	font-size: 11px;
	padding: 3px 7px;
	cursor: pointer;
}
.awaken-toggle.on { background: var(--accent); color: #241a00; }

.slot-name {
	font-size: 14px;
	text-align: center;
	min-height: 2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

/* Rarity/role/position badges stacked top-to-bottom in a card's top-left corner */
.corner-badge-left {
	--corner-offset: 0px;
	position: absolute;
	top: var(--corner-offset);
	left: var(--corner-offset);
	width: 15%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	z-index: 2;
	pointer-events: none;
}
.corner-badge-left .corner-badge-icon {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: rgba(0,0,0,.55);
	border-radius: 50%;
	padding: 0px;
}
.corner-badge-left.corner-badge-sm {
	--corner-offset: -1px;
	width: 25%;
	gap: 0px;
}
.corner-badge-left.corner-badge-sm .corner-badge-icon { padding: 2px; }

/* Rarity banner (alt. to the corner rarity badge, toggled in Settings): a
   full-width strip across the card's top edge. aspect-ratio pins its height to
   the exact same fraction of the container's width that the corner badge's
   height would be (15% default / 22% "sm"), so switching styles doesn't
   change how much of the card the rarity indicator occupies. */
.rarity-banner {
	--banner-scale: 0.75;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 100 / 15;
	object-fit: cover;
	z-index: 2;
	pointer-events: none;
	/* Scales from the element's own center by default, so bumping --banner-scale
	   grows/shrinks the banner in place instead of shifting it. */
	transform: scale(var(--banner-scale));
	/* Matches the corner badges' rgba(0,0,0,.55) backing — drop-shadow (not
	   box-shadow) hugs the banner's actual ribbon silhouette instead of its
	   rectangular bounding box, since the PNG is transparent outside the ribbon. */
	filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.rarity-banner.rarity-banner-sm {
	--banner-scale: 1;
	/* This box is narrower (relative to height) than the banner art itself, so
	   `cover` would crop text off the left/right edges — `contain` here still
	   spans the full width (this box's proportions are the tighter constraint)
	   and only letterboxes a sliver top/bottom. */
	object-fit: contain;
}
/* When the rarity banner is showing, drop any remaining role/position badges
   below it instead of stacking at the top-left corner (which would otherwise
   sit on top of — and obscure — the banner's text). margin-top percentages
   resolve against the *width* of the containing block (a CSS quirk, same one
   the classic aspect-ratio padding-top hack relies on), so this lines up
   exactly with .rarity-banner's own width-relative height above. */
.corner-badge-left.corner-badge-under-banner { margin-top: 15%; }
.corner-badge-left.corner-badge-sm.corner-badge-under-banner { margin-top: 22%; }

/* Element badges fanned along the bottom-left corner, left→right with overlap.
   Offsets mirror the other corner badges so the row pokes slightly outside.
   top:auto guards against the shared .corner-badge-sm rule setting `top`. */
.corner-badge-elements {
	--corner-offset: 0px;
	position: absolute;
	top: auto;
	bottom: var(--corner-offset);
	left: var(--corner-offset);
	width: 20%;
	display: flex;
	flex-direction: row;
	z-index: 2;
	pointer-events: auto;
}
/* Fanned-out badges can overflow the row's own width; let them draw over
   whatever's next to the card, and jump the whole row above it while doing so. */
.corner-badge-elements:hover { z-index: 5; }
/* On the tall team-slot cards the row anchors to the portrait, which sits
   inset by the card's 10px padding — overhang by that much so it pokes past
   the card edge exactly like the rarity/role badges do. */
.slot-card .corner-badge-elements { --corner-offset: -10px; }
/* Wrapper takes the fan's layout slot; the backing circle (.corner-badge-elem-bg)
   and the icon are separate layers within it so that, once badges overlap,
   the icon layer of every badge paints above the backing circle of every
   badge — a later badge's dark circle never covers an earlier badge's icon. */
.corner-badge-elements .corner-badge-elem-wrap {
	position: relative;
	width: 100%;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	transition: margin-left .18s ease;
}
.corner-badge-elements .corner-badge-elem-wrap + .corner-badge-elem-wrap { margin-left: -60%; }
/* Hovering the badge cluster fans the icons out flat so overlapping ones
   become fully visible instead of half-hidden behind their neighbor. */
.corner-badge-elements:hover .corner-badge-elem-wrap + .corner-badge-elem-wrap { margin-left: -20%; }
.corner-badge-elements .corner-badge-elem-bg {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	border-radius: 50%;
	z-index: 1;
}
.corner-badge-elements .corner-badge-icon {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 3px;
	box-sizing: border-box;
}
.corner-badge-elements.corner-badge-sm {
	--corner-offset: -1px;
	width: 25%;
}

/* ICD (initial cooldown) box pinned to the bottom-right corner of the cookie
   art (.portrait-wrap). Click arms it for editing (.editing); the next
   keypress supplies the value. */
.icd-badge {
	position: absolute;
	right: 6px;
	bottom: 6px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	background: rgba(0,0,0,.55);
	border: 1px solid var(--edge);
	border-radius: 18px;
	padding: 3px 5px;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
/* Hover cue is a plain border/background tint — kept visually distinct from
   both the cookie art's brightness-filter highlight and the pulsing .editing
   ring below, so hovering vs. armed-for-input read as different states. */
.icd-badge:hover:not(.editing) {
	border-color: var(--accent-2);
	background: rgba(20,14,40,.85);
}
.icd-badge.editing {
	border-color: var(--accent-2);
	box-shadow: 0 0 0 2px var(--accent-2);
}
/* Text sized at 1.5x .bea-substats (20px/700 -> 30px); icon scaled to match
   at the same icon:text ratio used elsewhere in this badge (~1.5:1). */
.icd-badge .icd-icon {
	width: 46px;
	height: 46px;
	object-fit: contain;
	display: block;
}
.icd-badge .icd-value {
	min-width: 16px;
	color: var(--text);
	font-size: 30px;
	font-weight: 700;
	text-align: center;
}
.icd-badge.editing .icd-value {
	animation: icd-blink 1s step-start infinite;
}
@keyframes icd-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: .25; }
}
.icd-badge .icd-suffix {
	font-size: 30px;
	font-weight: 700;
	color: var(--muted);
}
.corner-badge-elements.corner-badge-sm .corner-badge-icon { padding: 2px; }

/* ===== Tart + toppings radial widget (spec §5.1) ===== */
.tart-stage {
	position: relative;
	width: 94%;
	aspect-ratio: 1;
	margin: 2px auto 0;
}
.tart-base {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	cursor: pointer;
	border-radius: 50%;
}
.tart-base:hover { filter: brightness(var(--hover-brightness)); }
.topping-item {
	position: absolute;
	left: 50%; top: 50%;
	width: 30%;
	aspect-ratio: 1;
	transform-origin: 50% 100%;
	/* anchor each petal's inner tip at the tart center (translate -100% puts the
	   box's bottom-center on the stage center), rotate about that tip, then push
	   outward along the rotated axis — so the flower is centered on the tart */
	transform: translate(-50%, -100%) rotate(var(--angle)) translateY(calc(-1 * var(--dist)));
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.topping-img {
	width: 150%; height: 150%;
	object-fit: contain;
	pointer-events: none;
}
/* Hover brightness is pixel-accurate (app.js toppingHitAt), not a plain
   box :hover, since petals overlap and their art has transparent padding. */
.topping-item.px-hover .topping-img { filter: brightness(var(--hover-brightness)); }
/* Match the .topping-img footprint (same 150% size) so the empty marker's
   center coincides with where a real topping would sit, then draw a small
   '+' circle centered inside it. */
.topping-item.empty .topping-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150%; height: 150%;
	pointer-events: none;
	/* keep the '+' upright regardless of the petal's rotation (spec §5.1) */
	transform: rotate(calc(-1 * var(--angle)));
}
.topping-item.empty .topping-plus::before {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40%; aspect-ratio: 1;
	border: 1px dashed var(--edge);
	border-radius: 50%;
	background: rgba(20,14,40,.15);
	color: var(--muted);
	font-size: 13px;
	line-height: 1;
}
.topping-item.empty.px-hover .topping-plus::before { border-color: var(--accent-2); color: var(--text); }

/* ===== Beascuit section (spec §5.1) ===== */
.bea-section {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 9px;
	background: var(--card-bg-2);
	border: 1px solid var(--card-bg-2);
	border-radius: 10px;
	padding: 8px 9px;
	cursor: pointer;
}
.bea-section:hover .beascuit-composite img { filter: brightness(var(--hover-brightness)); }
.bea-section.empty {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-style: dashed;
	color: var(--muted);
	gap: 8px;
	padding: 16px 12px;
}
.bea-section.empty:hover { border-color: var(--accent-2); color: var(--text); }
.bea-section.disabled { cursor: default; opacity: .55; }
.bea-section.disabled:hover { border-color: var(--edge); color: var(--muted); }
.bea-section .bea-plus { font-size: 24px; line-height: 1; }
.bea-add-label { font-size: 14px; }
.bea-body { display: flex; }
/* Icon fills the card; substats + tainted badge overlay on top of a darkened icon */
.bea-icon {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
}
.bea-darken {
	position: absolute;
	inset: 0;
	background: rgba(10, 6, 22, .6);
}
.bea-tainted-badge {
	position: absolute;
	top: 6px; left: 6px;
	background: rgba(0,0,0,.6);
	border: 1px solid var(--danger);
	color: var(--danger);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 6px;
	border-radius: 5px;
}
.bea-substats {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	list-style: none;
	margin: 0; padding: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	text-shadow: 0 1px 4px rgba(0,0,0,.85);
	line-height: 1.3;
}
.bea-substats li { white-space: nowrap; }
.bea-substats li.elem { color: var(--accent); }

/* ===== Notes (spec §5.6) ===== */
/* Text sized to match the beascuit "Tainted" badge (12px) per request. */
.notes-section {
	background: var(--card-bg-2);
	border: 1px solid var(--card-bg-2);
	border-radius: 10px;
	padding: 7px 8px;
	cursor: pointer;
}
.notes-section:hover { border-color: var(--accent-2); }
.notes-section.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-style: dashed;
	color: var(--muted);
	padding: 12px;
}
.notes-section.empty:hover { color: var(--text); }
/* Empty-state affordance matches the beascuit empty state (24px +, 14px label) */
.notes-section.empty .notes-plus { font-size: 24px; line-height: 1; }
.notes-add-label { font-size: 14px; }
.notes-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* Bullet text/icons sized to match the beascuit substats (20px / 700) */
.notes-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}
/* Bullet marker for icon-less lines; icon replaces it when present. */
.notes-item.no-icon::before {
	content: "";
	flex: 0 0 auto;
	width: 6px; height: 6px;
	margin: 0 6px;
	border-radius: 50%;
	background: var(--muted);
}
.notes-item-icon { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; }
.notes-item-text { min-width: 0; overflow-wrap: anywhere; }

/* Team-level notes block below the team row. Column count (1–5) and fill
   direction are user-controlled (see .notes-layout-controls below) and spread
   the list across evenly-sized columns; per-cookie notes keep the base
   single-column flex layout untouched. */
.team-notes-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 6px;
	font-size: 14px;
	color: var(--muted);
}
/* Column-dominant: native multicol — fills top-to-bottom, then next column.
   column-count (not column-width) so the count is exactly what's chosen,
   with columns splitting the available width evenly ("space evenly"). */
.team-notes .notes-list.flow-column {
	display: block;
	column-count: var(--notes-cols, 3);
	column-gap: 20px;
}
.team-notes .notes-list.flow-column .notes-item { break-inside: avoid; }
.team-notes .notes-list.flow-column .notes-item:not(:last-child) { margin-bottom: 6px; }
/* Row-dominant: a grid so items fill left-to-right then wrap, still with
   evenly-split (1fr) columns. */
.team-notes .notes-list.flow-row {
	display: grid;
	grid-template-columns: repeat(var(--notes-cols, 3), 1fr);
	grid-auto-flow: row;
	column-gap: 20px;
	row-gap: 6px;
}

/* Team Notes header controls: column-count picker + fill-direction toggle */
.notes-layout-controls { display: flex; align-items: center; gap: 8px; }
.notes-cols-group { display: flex; gap: 3px; }
.notes-cols-btn {
	width: 22px; height: 22px;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 6px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}
.notes-cols-btn:hover { border-color: var(--accent-2); color: var(--text); }
.notes-cols-btn.active { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 700; }
.notes-flow-btn {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 6px;
	color: var(--muted);
	font-size: 12px;
	padding: 3px 9px;
	cursor: pointer;
	white-space: nowrap;
}
.notes-flow-btn:hover { border-color: var(--accent-2); color: var(--text); }

/* Notes editor modal */
.notes-editor { display: flex; flex-direction: column; gap: 12px; min-width: min(560px, 80vw); }
.notes-rows { display: flex; flex-direction: column; gap: 10px; }
.notes-row-wrap { display: flex; flex-direction: column; gap: 6px; }
.notes-row { display: flex; align-items: center; gap: 8px; }

/* Per-row icon trigger — shows the chosen icon, or a neutral dot when unset */
.note-icon-select {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 7px;
	cursor: pointer;
	padding: 4px;
}
.note-icon-select:hover { border-color: var(--accent-2); }
.note-icon-select.empty { border-style: dashed; }
/* width/height:100% (not max-width/height) so this also sizes a composite
   beascuit wrapper <div>, which has no intrinsic size of its own. */
.note-icon-select-img { width: 100%; height: 100%; object-fit: contain; }
.note-icon-select-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }

/* Inline icon picker panel that drops below a row */
.note-icon-panel {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.note-icon-panel[hidden] { display: none; }
.note-icon-panel-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-icon-tabs { display: flex; gap: 4px; }
.note-icon-tab {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 7px;
	color: var(--text);
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
}
.note-icon-tab:hover { border-color: var(--accent-2); }
.note-icon-tab.active { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 700; }
.note-icon-none {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 7px;
	color: var(--muted);
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
}
.note-icon-none:hover { border-color: var(--danger); color: var(--danger); }
.note-icon-search {
	flex: 1 1 140px;
	min-width: 0;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 7px;
	color: var(--text);
	padding: 5px 9px;
	font-size: 12px;
}
.note-icon-search:focus { outline: none; border-color: var(--accent-2); }
.note-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 5px;
	max-height: 190px;
	overflow-y: auto;
}
/* Section heading within the Gear tab's grid (Toppings / Tarts / Beascuit) —
   spans the full grid width so items resume below it. */
.note-icon-group-label {
	grid-column: 1 / -1;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--muted);
	margin-top: 4px;
}
.note-icon-group-label:first-child { margin-top: 0; }
.note-icon-opt {
	aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 7px;
	cursor: pointer;
	padding: 4px;
}
.note-icon-opt:hover { border-color: var(--accent-2); }
.note-icon-opt.active { background: var(--accent); border-color: var(--accent); }
/* width/height:100% (not max-width/height) so this also sizes a composite
   beascuit wrapper <div>, which has no intrinsic size of its own. */
.note-icon-opt-img { width: 100%; height: 100%; object-fit: contain; }

/* Layered base+core beascuit icon (mirrors .beascuit-composite) — a wrapper
   carrying one of the size classes above (note-icon-select-img/-opt-img/
   notes-item-icon) plus this class for the absolute-positioned layering. */
.note-icon-composite { position: relative; }
.note-icon-composite-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.note-text-input {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 7px;
	color: var(--text);
	padding: 7px 10px;
	font-size: 13px;
}
.note-text-input:focus { outline: none; border-color: var(--accent-2); }
.note-row-remove {
	flex: 0 0 auto;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	line-height: 0;
	opacity: .7;
}
.note-row-remove:hover { opacity: 1; }
.note-row-remove-icon { width: 16px; height: 16px; object-fit: contain; }
.notes-add-btn { align-self: flex-start; }
.notes-add-btn:disabled { opacity: .45; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }
.notes-actions { display: flex; gap: 10px; }
.notes-actions .btn { flex: 1 1 0; }

/* Composite beascuit art: base layer + core icon centered on top */
.beascuit-composite { position: relative; width: 100%; height: 100%; }
.beascuit-composite img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
}

/* ===== Treasures ===== */
.treasure-row { display: flex; gap: 14px; flex-wrap: wrap; }
.treasure-slot {
	width: 89.5px;
	background: var(--card-bg);
	border: 1px solid var(--card-bg);
	border-radius: var(--radius);
	padding: 5px;
	text-align: center;
	position: relative;
}
.treasure-slot.empty {
	border: 2px dashed var(--edge);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 98.5px;
	font-size: 13px;
}
.treasure-slot.empty:hover { border-color: var(--accent-2); color: var(--text); }

/* Treasure art layered on its rarity frame (home slots + picker tiles).
   Frames are shown at 50% of native resolution (159x177 → 79.5x88.5) —
   surrounding boxes are sized to fit the frame instead of scaling the frame to fit. */
.treasure-icon { position: relative; display: block; cursor: pointer; width: 79.5px; height: 88.5px; }
.treasure-icon .treasure-frame { display: block; width: 79.5px; height: 88.5px; }
.treasure-icon:hover .treasure-frame,
.treasure-icon:hover .treasure-icon-img { filter: brightness(var(--hover-brightness)); }
.treasure-icon-img {
	position: absolute;
	top: 48%; left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	pointer-events: none;
}
.treasure-icon-plus {
	position: absolute;
	top: 48%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	line-height: 1;
	color: var(--muted);
}
.treasure-icon-empty:hover .treasure-icon-plus { color: var(--text); }

.treasure-slot .treasure-icon { margin: 0 auto; }
.treasure-slot.empty .treasure-icon {
	margin: 0;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}

/* ===== Rally (adjacent to Treasures) ===== */
/* The title is always lifted out of flow and centered over the row (its left
   anchor is set by positionTitle() — the full-row centre in "centered on screen"
   mode, or the midpoint between the treasures/rally columns otherwise). Keeping
   it absolute in both modes means the row height never depends on the title, so
   the vertical layout stays consistent when the mode is toggled. min-height
   reserves the title's height for the short-row case (few/no treasures). */
.treasure-rally-row { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; min-height: 73px; }
.treasure-col, .rally-col { display: flex; flex-direction: column; }
.rally-col { align-items: flex-end; }
.team-title-col {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.team-title-input { pointer-events: auto; }
/* Bounded box mirroring the exported title (var(--card-bg) fill, matched
   border, --radius corners). field-sizing lets the box hug the text like the
   export; where unsupported it falls back to the input's default width. */
.team-title-input {
	max-width: 480px;
	min-width: 120px;
	field-sizing: content;
	font-size: 48px;
	font-weight: 700;
	color: var(--accent);
	text-align: center;
	background: var(--card-bg);
	border: 1px solid var(--card-bg);
	border-radius: var(--radius);
	padding: 10px 20px;
}
.team-title-input::placeholder { color: var(--muted); font-weight: 400; }
.team-title-input:hover { border-color: var(--accent-2); }
.team-title-input:focus { outline: none; border-color: var(--accent); }
.rally-slot {
	width: 101px;
	background: var(--card-bg);
	border: 1px solid var(--card-bg);
	border-radius: var(--radius);
	padding: 5px;
	text-align: center;
	position: relative;
}
.rally-slot.empty {
	border: 2px dashed var(--edge);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 101px;
	font-size: 13px;
}
.rally-slot.empty:hover { border-color: var(--accent-2); color: var(--text); }
/* No rally-capable cookie on the team — slot shows the same empty art but
   isn't clickable (spec-neutral, mirrors .bea-section.disabled). */
.rally-slot.empty.disabled { cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; opacity: .55; }
.rally-slot.empty.disabled:hover { border-color: var(--edge); color: var(--muted); }
.rally-slot.empty.disabled .rally-icon { cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }

/* Rally art layered on rally_frame.png: the cookie head is centered over the
   frame regardless of the "default cookie art" setting, and the leader badge
   is pinned so its own top-right corner coincides with the frame's top-right. */
.rally-icon { position: relative; display: block; cursor: pointer; width: 91px; height: 91px; }
.rally-frame { display: block; width: 91px; height: 91px; }
.rally-icon:hover .rally-frame,
.rally-icon:hover .rally-head { filter: brightness(var(--hover-brightness)); }
.rally-head {
	position: absolute;
	top: 48%; left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	pointer-events: none;
}
.rally-leader-badge {
	position: absolute;
	top: 0; right: 0;
	width: 34px;
	height: auto;
	pointer-events: none;
}
.rally-slot .rally-icon { margin: 0 auto; }

/* ===== Cookie Order view ===== */
.order-groups { display: flex; flex-direction: column; gap: 16px; }
.order-group {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	padding: 12px;
}
.order-group h3 {
	margin: 0 0 10px;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--accent);
}
.order-group h3 img { object-fit: contain; }
.order-entry-list { display: flex; flex-wrap: wrap; gap: 0px; }
.order-entry {
	position: relative;
	padding: 4px;
	border-radius: 8px;
	border: 1px solid transparent;
}
.order-entry:hover { border-color: var(--accent-2); background: rgba(255,255,255,.05); }
.order-entry img.o-portrait { width: 100px; height: 100px; object-fit: contain; border-radius: 6px; background: var(--panel-2); display: block; }
.o-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 4px;
	background: rgba(10,6,25,.92);
	color: var(--text);
	font-size: 11px;
	line-height: 1.2;
	padding: 3px 7px;
	border-radius: 6px;
	border: 1px solid var(--edge);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 5;
}
.order-entry:hover .o-tooltip { opacity: 1; visibility: visible; }

.search-input {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	color: var(--text);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	width: 260px;
	max-width: 100%;
}
.search-input:focus { outline: none; border-color: var(--accent-2); }

/* ===== Modal ===== */
.modal-overlay[hidden], .view[hidden] { display: none !important; }
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10,6,25,.7);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 50;
	padding: 20px;
	padding-top: 7vh;
}
.modal {
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: var(--radius);
	width: min(860px, 100%);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
}
.modal-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--edge);
}
.modal-head h3 { margin: 0; font-size: 15px; flex: 0 0 auto; }
.modal-head-actions { display: flex; gap: 8px; flex: 1 1 auto; overflow-x: auto; }
.modal-head-actions:empty { display: none; }
.modal-head-actions .share-row { display: flex; gap: 8px; }
#modal-close { flex: 0 0 auto; margin-left: auto; }
.modal-body { padding: 14px 16px; overflow-y: auto; overflow-x: hidden; }

/* Picker modals keep the search/sort controls and filter chips fixed above
   a separately-scrolling grid pane, instead of relying on position:sticky
   (which detaches/jitters once the grid's remaining scroll room runs out). */
.modal-body.picker-modal-body {
	display: flex;
	flex-direction: column;
	overflow-y: hidden;
}
.picker-fixed-header { flex: none; }
.picker-grid-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
}
.picker-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 12px;
}
.picker-controls select {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	color: var(--text);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
}
.sort-btn-row { display: flex; gap: 6px; }
.sort-mode-btn.active { background: var(--accent); border-color: var(--accent); color: #241a00; }
.sort-dir-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 30px;
	height: 30px;
	flex: none;
}
.sort-dir-icon {
	width: 18px;
	height: auto;
	display: block;
}
.fav-filter-btn { display: flex; align-items: center; gap: 4px; }
.fav-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #241a00; }

/* ===== Picker filter chips (cookie: element/role/rarity; treasure: rarity) — spec §5.3 ===== */
.picker-filters {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--edge);
}
.picker-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.picker-filter-label { font-size: 11px; color: var(--muted); width: 52px; flex: none; }
.filter-chip {
	position: relative;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 6px;
	padding: 1px;
	cursor: pointer;
	line-height: 0;
}
.filter-chip:hover { border-color: var(--accent-2); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); }
.filter-chip-img { width: 36px; height: 36px; object-fit: contain; display: block; }
.filter-chip-tooltip {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 4px;
	background: rgba(10,6,25,.92);
	color: var(--text);
	font-size: 11px;
	line-height: 1.2;
	padding: 3px 7px;
	border-radius: 6px;
	border: 1px solid var(--edge);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 6;
}
.filter-chip:hover .filter-chip-tooltip { opacity: 1; visibility: visible; }

.picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	align-items: start;
}
/* Toppings and tarts: exactly 10 flavors each — lay out as a fixed 2 rows of 5 */
.picker-grid-5col { grid-template-columns: repeat(5, 1fr); }
/* Walnut/hazelnut hidden: 8 flavors remain — lay out as a fixed 2 rows of 4.
   Constrain to 80% width (4/5) so each tile stays the same size as the 5-col
   layout instead of stretching wider/taller to fill the row. */
.picker-grid-4col { grid-template-columns: repeat(4, 1fr); max-width: 80%; margin: 0 auto; }
/* Treasure frames are shown at native size (159x177) rather than scaled to fit the tile */
.picker-grid-treasure { grid-template-columns: repeat(auto-fill, minmax(87.5px, 1fr)); }
.picker-grid-rally { grid-template-columns: repeat(auto-fill, minmax(99px, 1fr)); }
.picker-tile {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 10px;
	padding: 4px 4px;
	text-align: center;
	cursor: pointer;
	position: relative;
}
.picker-tile:hover { border-color: var(--accent-2); }
.picker-tile img.tile-img { width: 75%; object-fit: contain; }
.picker-tile-treasure .treasure-icon.tile-img { margin: 0 auto; cursor: default; }
.picker-tile-rally .rally-icon.tile-img { margin: 0 auto; cursor: default; }
.picker-tile-topping img.tile-img { width: 50%; }
.picker-tile-tart img.tile-img { width: 75%; }
.picker-tile-topping:hover img.tile-img,
.picker-tile-tart:hover img.tile-img { filter: brightness(var(--hover-brightness)); }
.picker-tile .tile-name { font-size: var(--picker-text-size, 11px); margin-top: 5px; line-height: 1.25; }
.picker-tile .tile-sub { font-size: var(--picker-text-size, 10px); color: var(--muted); }
/* Cookie picker: condensed layout matching the Cookie Order chart —
   tightly packed portraits, name shown as a hover tooltip instead of inline text. */
.picker-grid-condensed { display: flex; flex-wrap: wrap; gap: 0; }
.picker-tile-cookie {
	width: auto;
	padding: 4px;
	background: none;
	border-color: transparent;
}
.picker-tile-cookie:hover { border-color: var(--accent-2); background: rgba(255,255,255,.05); }
.picker-tile-cookie img.tile-img { width: 80px; height: 80px; object-fit: contain; border-radius: 6px; background: var(--panel-2); display: block; }
.picker-tile-cookie:hover img.tile-img { filter: brightness(var(--hover-brightness)); }
.picker-tile-cookie .tile-sub { display: none; }
.picker-tile-cookie .tile-name {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 0;
	margin-bottom: 4px;
	background: rgba(10,6,25,.92);
	color: var(--text);
	font-size: 11px;
	line-height: 1.2;
	padding: 3px 7px;
	border-radius: 6px;
	border: 1px solid var(--edge);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 5;
}
.picker-tile-cookie:hover .tile-name { opacity: 1; visibility: visible; }
.picker-tile-cookie .fav-btn,
.picker-tile-treasure .fav-btn,
.picker-tile-rally .fav-btn { top: auto; bottom: 2px; right: 2px; }
.fav-btn {
	position: absolute;
	top: 2px; right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(20, 14, 40, .55);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	opacity: .75;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	transition: opacity .15s, transform .15s, background .15s;
}
.fav-btn.faved { color: var(--accent); opacity: 1; background: rgba(20, 14, 40, .75); border-color: var(--accent); }
.fav-btn:hover { opacity: 1; transform: scale(1.12); background: rgba(20, 14, 40, .85); }
.picker-empty { color: var(--muted); font-size: 13px; padding: 18px 4px; text-align: center; }

/* Spinner shown while art is still loading (removed on load/error). */
.img-loading {
	background-image: url("assets/icon/loading.gif");
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(48px, 60%);
}

/* Placeholder for missing art */
.img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: repeating-linear-gradient(45deg, #3a3160, #3a3160 8px, #322a52 8px, #322a52 16px);
	color: var(--muted);
	font-size: 10px;
	border-radius: 8px;
	padding: 3px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	min-height: 34px;
}

/* ===== Beascuit configurator ===== */
.modal-overlay.bea-config-modal .modal { width: min(1000px, 100%); }
.bea-config {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	--bea-text-size: 12px;
	--bea-btn-size: 16px;
	font-size: var(--bea-text-size);
}
.bea-left { flex: 0 0 260px; display: flex; flex-direction: column; gap: 12px; }
.bea-right { flex: 1 1 400px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bea-field { display: flex; flex-direction: column; gap: 0px; }
.bea-field label { color: var(--muted); }
.bea-sub-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bea-sub-label-group { display: flex; align-items: center; gap: 6px; }
.bea-sub-lock-icon { width: auto; height: 14px; flex: 0 0 auto; }
.bea-sub-btns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sub-btn {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	color: var(--text);
	border-radius: 7px;
	padding: 5px 4px;
	font-size: var(--bea-btn-size);
	cursor: pointer;
	text-align: center;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}
.sub-btn span { flex: 1 1 auto; }
.sub-btn-img { height: 24px; width: auto; flex: 0 0 auto; }
.sub-btn span { line-height: 1.1; }
.sub-btn:hover { border-color: var(--accent-2); }
.sub-btn.active { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 700; }
.sub-btn:disabled { opacity: .4; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }
.sub-btn:disabled.active { opacity: .7; }
.bea-field select:disabled { opacity: .55; }
.bea-check { display: flex; align-items: center; gap: 8px; font-size: var(--bea-btn-size); }
.help-hint { position: relative; display: inline-flex; align-items: center; cursor: help; }
.help-hint-icon { width: auto; height: 24px;  }
.help-hint:hover .help-hint-icon { opacity: 1; }
.help-hint-tooltip {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	margin-left: 8px;
	background: rgba(10,6,25,.92);
	color: var(--text);
	font-size: 11px;
	line-height: 1.3;
	padding: 5px 8px;
	border-radius: 6px;
	border: 1px solid var(--edge);
	width: 200px;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 5;
}
.help-hint:hover .help-hint-tooltip { opacity: 1; visibility: visible; }
.help-hint-tooltip-left { left: auto; right: 100%; margin-left: 0; margin-right: 8px; }
.rally-head-row { display: flex; flex-direction: row; align-items: flex-start; gap: 6px; }
.rally-help { margin-top: 5px; }
.bea-elem-row { display: flex; gap: 4px; margin-bottom: 6px; }
.bea-elem-row:last-child { margin-bottom: 0; }
.elem-btn {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	color: var(--text);
	border-radius: 8px;
	padding: 4px 4px;
	font-size: var(--bea-btn-size);
	cursor: pointer;
	min-width: 0;
}
.elem-btn-img { width: 24px; height: 24px; flex: 0 0 auto; }
.elem-btn span { flex: 1 1 auto; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.elem-btn:hover { border-color: var(--accent-2); }
.elem-btn.active { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 700; }
.bea-preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	border-radius: 10px;
	padding: 11px 13px;
}
.bea-preview .bea-icon { margin: 0 auto; }
.bea-preview .bp-text { color: var(--muted); line-height: 1.4; text-align: center; font-size: var(--bea-text-size); }
.bea-error { color: var(--danger); min-height: 1.2em; display: flex; align-items: center; gap: 6px; }
.bea-error-icon { width: auto; height: 16px; flex: 0 0 auto; }
.bea-actions { display: flex; gap: 10px; margin-top: auto; width: 100%; }
.bea-actions .btn { flex: 1 1 0; font-size: var(--bea-btn-size); }
.btn-sm { padding: 5px 10px; font-size: 12px; flex: none; white-space: nowrap; }
.btn-sm:disabled { opacity: .45; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }
.apply-all-btn {
	background: var(--panel-2);
	border: 1px solid var(--edge);
	color: var(--text);
	border-radius: 7px;
	padding: 5px 4px;
	font-size: var(--bea-btn-size);
	cursor: pointer;
	flex: none;
	white-space: nowrap;
	width: calc((100% - 20px) / 6);
}
.apply-all-btn:hover { border-color: var(--accent-2); }
.apply-all-btn:disabled { opacity: .45; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }

/* ===== "Apply to all" sub-button (topping/tart picker tiles) ===== */
/* Shared format for the per-tile action buttons (Apply to all, 1 tart + 1
   topping) so they read as the same kind of control. */
.tile-apply-all-btn,
.tile-fill-remaining-btn,
.tile-combo-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	margin-top: 0px;
	padding: 3px 4px;
	font-size: var(--picker-btn-size, 12px);
	line-height: 1.3;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 5px;
	color: var(--muted);
	cursor: pointer;
}
.tile-apply-all-btn:hover,
.tile-fill-remaining-btn:hover,
.tile-combo-btn:hover { border-color: var(--accent-2); color: var(--text); }
.tile-fill-remaining-btn:disabled { opacity: .4; cursor: url("assets/icon/no_cursor.png") 12 12, not-allowed; }
.tile-fill-remaining-btn:disabled:hover { border-color: var(--edge); color: var(--muted); }
.tile-combo-label { min-width: 0; }
/* Mini tart-stage icon inside a tile action button (Apply to all / combo) */
.tile-btn-icon { flex: none; width: 26px; pointer-events: none; }
.tile-btn-icon .tart-stage { width: 100%; margin: 0; }

/* ===== Topping/tart picker live preview (spec §5.1 combo option) ===== */
.picker-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: 8px;
}
/* Width is set inline to match the home-screen tart-stage; this is a fallback. */
.picker-preview-stage { width: 188px; }
.picker-preview-stage .tart-stage { width: 100%; margin: 0; }
.picker-preview-caption { font-size: var(--picker-text-size, 12px); color: var(--muted); text-align: center; min-height: 1em; }
/* Glow the base/petal a combo pick would change */
.tart-stage-preview .preview-affected { filter: brightness(var(--hover-brightness)) }
/* Preview stage is non-interactive: no pointer cursor and no hover brightness
   (only the deliberate .preview-affected glow above should show). */
.tart-stage-preview .tart-base,
.tart-stage-preview .topping-item { cursor: default; }
.tart-stage-preview .tart-base:hover { filter: none; }
.tart-stage-preview .topping-item.px-hover .topping-img,
.tart-stage-preview .topping-item.empty.px-hover .topping-plus::before { filter: none; border-color: var(--edge); color: var(--muted); }

/* ===== Remove / Remove-all buttons (topping/tart picker) =====
   Widths mirror the picker-grid-5col columns above so each button lines up
   with (and matches the width of) a single topping/tart tile. */
.clear-btn-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.clear-btn-row .btn { width: 100%; box-sizing: border-box; font-size: var(--picker-btn-size, 13px); white-space: normal; }
.remove-all-btn { opacity: .8; }
.wh-toggle-btn { grid-column: 5; opacity: .8; }
.wh-toggle-btn.active { opacity: 1; border-color: var(--danger); color: var(--danger); }

/* ===== Translucent picker modal (cookie/treasure/topping/tart/beascuit selectors) ===== */
.modal-overlay.picker-modal-translucent .modal { opacity: .92; }

/* Topping/tart pickers: center the modal in the middle of the viewport (rather
   than anchoring it near the top) so the mouse travels the least from the
   clicked petal/plate to any choice. Size is unchanged. */
.modal-overlay.picker-modal-centered {
	align-items: center;
	padding-top: 20px;
	--picker-text-size: 12px;
	--picker-btn-size: 12px;
}

/* ===== Share dialog ===== */
.share-block { margin-bottom: 16px; }
.share-block h4 { margin: 0 0 6px; font-size: 13px; }
.share-block p { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.share-row { display: flex; gap: 8px; }
.share-row input {
	flex: 1;
	background: var(--panel-2);
	border: 1px solid var(--edge);
	color: var(--text);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12px;
}