/* ==========================================================================
   Court of Dorks Extras — portraits & borders, social links, gallery,
   d20 roller, GM Assistant notes. Uses the theme's colour tokens when present.
   ========================================================================== */

.cofd-portrait,
.cofd-notes,
.cofd-social {
	--cx-gold: var(--gold, #d9b36c);
	--cx-gold-bright: var(--gold-bright, #f1d28f);
	--cx-gold-deep: var(--gold-deep, #9c7a3c);
	--cx-ember: var(--ember-bright, #d33a3c);
	--cx-ink: var(--ink, #0b0807);
	--cx-night: var(--night, #110c0b);
	--cx-stone: var(--stone-2, #231a16);
	--cx-line: var(--line, rgba(217, 179, 108, 0.16));
	--cx-line-strong: var(--line-strong, rgba(217, 179, 108, 0.42));
	--cx-ivory: var(--ivory, #efe4cc);
	--cx-text: var(--text, #e6dcc8);
	--cx-muted: var(--muted, #b6a78f);
	--cx-display: var(--f-display, "Cinzel", Georgia, serif);
	--cx-accent: var(--f-accent, "Cormorant Garamond", Georgia, serif);
}

/* Portraits ---------------------------------------------------------------- */
.cofd-portrait { position: relative; display: block; isolation: isolate; box-sizing: border-box; }
.cofd-portrait > img,
.cofd-portrait__swatch,
.cofd-portrait__empty { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
.cofd-portrait .cofd-portrait__placeholder { object-fit: contain; padding: 22%; opacity: 0.35; background: radial-gradient(circle at 50% 40%, #2e2420, #0b0807); }
.cofd-portrait__empty { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2e2420, #0b0807); color: #b6a78f; font-size: 13px; text-align: center; }
.cofd-portrait__swatch {
	background:
		radial-gradient(circle at 50% 36%, rgba(241, 210, 143, 0.55) 0 12%, transparent 13%),
		radial-gradient(ellipse 46% 30% at 50% 88%, rgba(241, 210, 143, 0.4) 0 60%, transparent 61%),
		linear-gradient(170deg, #3a2a2a, #120c0b);
}

/* Gilded corners: the theme's classic frame, all four corners. */
.cofd-border--gilded {
	padding: 9px;
	background: linear-gradient(160deg, var(--cx-stone), var(--cx-ink));
	border: 1px solid var(--cx-line);
	border-radius: 4px;
	box-shadow: 0 26px 50px -26px #000, 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.cofd-border--gilded::after {
	content: "";
	position: absolute;
	inset: -5px;
	pointer-events: none;
	--c: var(--cx-gold);
	--l: 32px;
	background:
		linear-gradient(var(--c), var(--c)) top left / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
		linear-gradient(var(--c), var(--c)) top right / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
		linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
		linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px,
		linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
	background-repeat: no-repeat;
	opacity: 0.9;
}

/* Royal double rule with gem corners. */
.cofd-border--royal {
	border: 18px solid transparent;
	border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Crect width='90' height='90' fill='%23140e0c'/%3E%3Crect x='1.5' y='1.5' width='87' height='87' fill='none' stroke='%23d9b36c' stroke-width='3'/%3E%3Crect x='8' y='8' width='74' height='74' fill='none' stroke='%239c7a3c' stroke-width='1.4'/%3E%3Crect x='12' y='12' width='66' height='66' fill='none' stroke='%23d9b36c' stroke-width='.8' opacity='.6'/%3E%3Cg fill='%23f1d28f' stroke='%230b0807' stroke-width='1'%3E%3Cpath d='M8 0 16 8 8 16 0 8Z'/%3E%3Cpath d='M82 0 90 8 82 16 74 8Z'/%3E%3Cpath d='M8 74 16 82 8 90 0 82Z'/%3E%3Cpath d='M82 74 90 82 82 90 74 82Z'/%3E%3C/g%3E%3Cg fill='%23a91f26'%3E%3Ccircle cx='8' cy='8' r='2.4'/%3E%3Ccircle cx='82' cy='8' r='2.4'/%3E%3Ccircle cx='8' cy='82' r='2.4'/%3E%3Ccircle cx='82' cy='82' r='2.4'/%3E%3C/g%3E%3C/svg%3E") 30 stretch;
	box-shadow: 0 26px 50px -26px #000;
	background: var(--cx-ink);
}

/* Gold filigree: scrollwork corners. */
.cofd-border--filigree {
	border: 20px solid transparent;
	border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 90 90'%3E%3Cdefs%3E%3Cg id='c' fill='none' stroke='%23e3c27e' stroke-linecap='round'%3E%3Cpath d='M3 29V10q0-7 7-7h19' stroke-width='1.8'/%3E%3Cpath d='M9 29V15q0-6 6-6h14' stroke-width='.9' opacity='.7'/%3E%3Cpath d='M15 15c4-1 7 1 7 4s-3 4-5 3-1-4 1-3' stroke-width='1.3'/%3E%3Cpath d='M29 3c3 1 5 3 5 6M3 29c1 3 3 5 6 5' stroke-width='1.2'/%3E%3Ccircle cx='15' cy='15' r='1.6' fill='%23f1d28f' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Crect width='90' height='90' fill='%23120c0b'/%3E%3Cpath d='M29 3H61M29 9H61M3 29V61M9 29V61M87 29V61M81 29V61M29 87H61M29 81H61' stroke='%23e3c27e' fill='none'/%3E%3Cuse href='%23c' xlink:href='%23c'/%3E%3Cuse href='%23c' xlink:href='%23c' transform='matrix(-1 0 0 1 90 0)'/%3E%3Cuse href='%23c' xlink:href='%23c' transform='matrix(1 0 0 -1 0 90)'/%3E%3Cuse href='%23c' xlink:href='%23c' transform='matrix(-1 0 0 -1 90 90)'/%3E%3C/svg%3E") 30 stretch;
	box-shadow: 0 26px 50px -26px #000, 0 0 30px -10px rgba(227, 194, 126, 0.35);
	background: var(--cx-ink);
}

/* Runic stone: carved band with glowing runes. */
.cofd-border--runic {
	border: 17px solid transparent;
	border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%233a2f2a'/%3E%3Cstop offset='1' stop-color='%231c1512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='90' height='90' fill='url(%23s)'/%3E%3Crect x='.75' y='.75' width='88.5' height='88.5' fill='none' stroke='%239c7a3c' stroke-width='1.5'/%3E%3Crect x='21.5' y='21.5' width='47' height='47' fill='none' stroke='%23000' stroke-opacity='.7' stroke-width='1.5'/%3E%3Cg fill='none' stroke='%23f0a35a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M42 5v12M42 5l6 4-6 4M48 13v4'/%3E%3Cpath d='M42 73v12M42 79l6-6M42 79l6 6'/%3E%3Cpath d='M5 42h12M5 48h12M9 42l4 6'/%3E%3Cpath d='M73 42h12M79 42v6M73 48h12'/%3E%3Cg stroke-width='1.2'%3E%3Ccircle cx='11' cy='11' r='5'/%3E%3Ccircle cx='79' cy='11' r='5'/%3E%3Ccircle cx='11' cy='79' r='5'/%3E%3Ccircle cx='79' cy='79' r='5'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23f0a35a'%3E%3Ccircle cx='11' cy='11' r='1.6'/%3E%3Ccircle cx='79' cy='11' r='1.6'/%3E%3Ccircle cx='11' cy='79' r='1.6'/%3E%3Ccircle cx='79' cy='79' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 22 round;
	box-shadow: 0 26px 50px -26px #000, 0 0 26px -8px rgba(240, 163, 90, 0.35);
	background: #1c1512;
}

/* Arcane glow: a slowly turning ring of magic. */
@property --cofd-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cofd-border--arcane {
	padding: 5px;
	border-radius: 12px;
	background: conic-gradient(from var(--cofd-angle), #7b4bd0, #d9b36c, #3cb7b0, #c03a6b, #7b4bd0);
	box-shadow: 0 0 28px -4px rgba(123, 75, 208, 0.65), 0 26px 50px -26px #000;
	animation: cofd-arcane 7s linear infinite;
}
.cofd-border--arcane > img,
.cofd-border--arcane > .cofd-portrait__swatch,
.cofd-border--arcane > .cofd-portrait__empty { border-radius: 8px; }
.cofd-border--arcane::after { content: ""; position: absolute; inset: 5px; border-radius: 8px; box-shadow: inset 0 0 26px rgba(123, 75, 208, 0.55); pointer-events: none; }
@keyframes cofd-arcane { to { --cofd-angle: 360deg; } }

/* Ember: crimson edge with a living glow. */
.cofd-border--ember {
	padding: 4px;
	border: 2px solid var(--cx-ember);
	border-radius: 5px;
	background: #1a0a09;
	box-shadow: 0 0 0 1px #000, 0 0 22px rgba(211, 58, 60, 0.55), inset 0 0 14px rgba(211, 58, 60, 0.45);
	animation: cofd-ember 2.8s ease-in-out infinite alternate;
}
.cofd-border--ember::after {
	content: "";
	position: absolute;
	inset: 4px;
	background: linear-gradient(to top, rgba(255, 110, 50, 0.35), transparent 38%);
	mix-blend-mode: screen;
	pointer-events: none;
}
@keyframes cofd-ember {
	0% { box-shadow: 0 0 0 1px #000, 0 0 16px rgba(211, 58, 60, 0.45), inset 0 0 10px rgba(211, 58, 60, 0.35); }
	100% { box-shadow: 0 0 0 1px #000, 0 0 30px rgba(255, 110, 50, 0.6), inset 0 0 18px rgba(255, 110, 50, 0.5); }
}

/* Frost: silver ice with a passing glint. */
.cofd-border--frost {
	padding: 6px;
	border-radius: 4px;
	background: linear-gradient(135deg, #eef6fc, #8fb3cf 30%, #e7f1f9 52%, #6b8eab 75%, #dbe9f5);
	box-shadow: 0 0 22px rgba(160, 205, 240, 0.35), 0 26px 50px -26px #000;
	overflow: hidden;
}
.cofd-border--frost::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat;
	animation: cofd-glint 6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes cofd-glint { 0%, 60% { background-position: -150% 0; } 100% { background-position: 150% 0; } }

/* Simple. */
.cofd-border--none { border: 1px solid var(--cx-line); border-radius: 6px; overflow: hidden; }

/* Social links ------------------------------------------------------------- */
.cofd-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cofd-social__link {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--cx-gold);
	border: 1px solid var(--cx-line-strong);
	border-radius: 50%;
	background: rgba(11, 8, 7, 0.5);
	transition: color 0.2s, border-color 0.2s, transform 0.2s, background-color 0.2s;
}
.cofd-social__link:hover,
.cofd-social__link:focus-visible { color: var(--cx-ink); background: var(--cx-gold); border-color: var(--cx-gold); transform: translateY(-2px); }
.cofd-social__icon { width: 20px; height: 20px; }
.cofd-social .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* d20 roller ---------------------------------------------------------------- */
.cofd-d20-icon { width: 1.4em; height: 1.4em; flex: none; }
.cofd-d20-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 46px;
	padding: 0.7em 1.4em;
	font-family: var(--f-display, Georgia, serif);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ivory, #efe4cc);
	background: linear-gradient(180deg, #3a1a1a, #1a0d0c);
	border: 1px solid var(--line-strong, rgba(217, 179, 108, 0.42));
	border-radius: 4px;
	cursor: pointer;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.cofd-d20-button:hover { transform: translateY(-2px); border-color: var(--gold, #d9b36c); box-shadow: 0 10px 26px -12px rgba(217, 179, 108, 0.6); }
.cofd-d20-button .cofd-d20-icon { color: var(--gold, #d9b36c); }

.cofd-d20-fab {
	position: fixed;
	right: max(18px, env(safe-area-inset-right));
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 58px;
	padding: 0 15px;
	color: var(--gold-bright, #f1d28f);
	background: radial-gradient(circle at 30% 25%, #4a2020, #1a0b0a 70%);
	border: 1px solid var(--line-strong, rgba(217, 179, 108, 0.42));
	border-radius: 999px;
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.9), 0 0 0 4px rgba(11, 8, 7, 0.5);
	cursor: pointer;
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.cofd-d20-fab .cofd-d20-icon { width: 28px; height: 28px; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cofd-d20-fab__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--f-display, Georgia, serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: max-width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cofd-d20-fab:hover,
.cofd-d20-fab:focus-visible { transform: translateY(-3px); border-color: var(--gold, #d9b36c); box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.95), 0 0 24px -4px rgba(217, 179, 108, 0.45); }
.cofd-d20-fab:hover .cofd-d20-icon,
.cofd-d20-fab:focus-visible .cofd-d20-icon { transform: rotate(-200deg); }
.cofd-d20-fab:hover .cofd-d20-fab__label,
.cofd-d20-fab:focus-visible .cofd-d20-fab__label { max-width: 14em; }
@media (max-width: 600px) { .cofd-d20-fab { height: 52px; padding: 0 12px; right: 14px; bottom: 14px; } }
@media print { .cofd-d20-fab { display: none; } }

/* The "table": a transparent full-screen layer the die is thrown onto. Clicks pass through to the page. */
.cofd-d20-table {
	--d20-size: 160px;
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: none;
	pointer-events: none;
	overflow: hidden;
	color: var(--text, #e6dcc8);
	--cx-gold: var(--gold, #d9b36c);
	--cx-gold-bright: var(--gold-bright, #f1d28f);
	--cx-ivory: var(--ivory, #efe4cc);
	--cx-muted: var(--muted, #b6a78f);
	--cx-line-strong: var(--line-strong, rgba(217, 179, 108, 0.42));
	--cx-display: var(--f-display, "Cinzel", Georgia, serif);
	--cx-accent: var(--f-accent, "Cormorant Garamond", Georgia, serif);
}
.cofd-d20-table.is-open { display: block; animation: cofd-d20-fade-in 0.2s ease-out; }
.cofd-d20-table.is-leaving { opacity: 0; transition: opacity 0.25s ease-in; }
@keyframes cofd-d20-fade-in { from { opacity: 0; } }

.cofd-d20-flash { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; }
.cofd-d20-table.is-crit .cofd-d20-flash { background: radial-gradient(circle at 50% 50%, rgba(241, 210, 143, 0.22), transparent 60%); animation: cofd-d20-flash 1.4s ease-out forwards; }
.cofd-d20-table.is-fumble .cofd-d20-flash { background: radial-gradient(circle at 50% 50%, rgba(211, 58, 60, 0.25), transparent 60%); animation: cofd-d20-flash 1.2s ease-out forwards; }
@keyframes cofd-d20-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0.35; } }

.cofd-d20-pos { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; perspective: 1400px; will-change: transform; }
.cofd-d20-die { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.cofd-d20-face {
	position: absolute;
	left: 0;
	top: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background: linear-gradient(160deg, var(--de1, #f6dc9c), var(--de2, #a8803f) 55%, var(--de3, #6e5126));
}
.cofd-d20-face::before,
.cofd-d20-face::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(50% 5.5%, 96.6% 97.4%, 3.4% 97.4%);
}
.cofd-d20-face::before { background: radial-gradient(circle at 50% 70%, var(--df1, #8a1d24), var(--df2, #52090f) 60%, var(--df3, #2b0508)); }
/* Finish: a soft highlight for glossy dice, a brushed sheen for metal, nothing for matte. */
.cofd-d20-face::after { background: linear-gradient(165deg, rgba(255, 255, 255, 0.2), transparent 42%); z-index: 0; }
[data-finish="matte"] .cofd-d20-face::after { display: none; }
[data-finish="metal"] .cofd-d20-face::after { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 5px), linear-gradient(165deg, rgba(255, 255, 255, 0.35), transparent 50%); }
[data-finish="matte"] .cofd-d20-num { text-shadow: none; }
.cofd-d20-num {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	line-height: 1;
	font-family: var(--cx-display);
	font-weight: 700;
	z-index: 1;
	color: var(--dn, #f6dc9c);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 6px var(--dg, rgba(246, 220, 156, 0.35));
}
.cofd-d20-num.is-underlined { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; }
.cofd-d20-shade { position: absolute; inset: 0; z-index: 2; background: #000; pointer-events: none; }
.cofd-d20-shadow {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--d20-size) * 0.8);
	height: calc(var(--d20-size) * 0.32);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7), transparent 70%);
	will-change: transform;
}

/* Result card beside the settled die. */
.cofd-d20-card {
	position: absolute;
	left: -9999px;
	top: 0;
	width: min(300px, calc(100vw - 24px));
	padding: 16px 18px 16px;
	text-align: center;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(8px);
	background: linear-gradient(180deg, rgba(42, 26, 34, 0.96), rgba(14, 10, 10, 0.97));
	border: 1px solid var(--cx-line-strong);
	border-radius: 8px;
	box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.9);
	max-height: calc(100vh - 24px);
	overflow: auto;
	transition: opacity 0.25s, transform 0.25s;
}
.cofd-d20-table.is-done .cofd-d20-card { opacity: 1; transform: none; }
.cofd-d20-table.is-crit .cofd-d20-card { border-color: var(--cx-gold); box-shadow: 0 24px 50px -16px #000, 0 0 40px -8px rgba(241, 210, 143, 0.55); }
.cofd-d20-table.is-fumble .cofd-d20-card { border-color: #c22e33; box-shadow: 0 24px 50px -16px #000, 0 0 40px -8px rgba(211, 58, 60, 0.55); }
.cofd-d20-result { margin: 0; font-family: var(--cx-display); font-size: 1.45rem; line-height: 1.2; color: var(--cx-ivory); }
.cofd-d20-table.is-crit .cofd-d20-result { color: var(--cx-gold-bright); text-shadow: 0 0 18px rgba(241, 210, 143, 0.6); }
.cofd-d20-table.is-fumble .cofd-d20-result { color: #ff7a6e; }
.cofd-d20-message { margin: 0.4em 0 0; font-family: var(--cx-accent); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--text, #e6dcc8); }
.cofd-d20-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
.cofd-d20-btn.cofd-d20-btn--link { flex-basis: 100%; min-height: 32px; padding: 0.3em; border: 0; color: var(--cx-gold); text-decoration: underline; text-underline-offset: 0.25em; }
.cofd-d20-btn.cofd-d20-btn--link:hover { color: var(--cx-gold-bright); }
.cofd-d20-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cx-line-strong); text-align: left; }
.cofd-d20-sets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cofd-d20-set { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; color: var(--text, #e6dcc8); }
.cofd-d20-set:hover { border-color: var(--cx-line-strong); }
.cofd-d20-set[aria-pressed="true"] { border-color: var(--cx-gold); background: rgba(217, 179, 108, 0.1); }
.cofd-d20-set__chip { display: grid; place-items: center; width: 34px; height: 34px; font-family: var(--cx-display); font-size: 0.72rem; font-weight: 700; color: var(--sn); background: var(--sb); border: 2px solid var(--se); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.cofd-d20-set__name { font-size: 0.68rem; line-height: 1.15; text-align: center; }
.cofd-d20-custom { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 0; padding: 8px 10px 10px; border: 1px solid var(--cx-line-strong); border-radius: 6px; font-size: 0.85rem; }
.cofd-d20-custom legend { padding: 0 4px; font-family: var(--cx-display); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-gold); }
.cofd-d20-custom label { display: inline-flex; align-items: center; gap: 6px; }
.cofd-d20-custom input[type="color"] { width: 32px; height: 26px; padding: 0; border: 1px solid var(--cx-line-strong); border-radius: 4px; background: none; cursor: pointer; }
.cofd-d20-custom select { padding: 3px 6px; color: var(--cx-ivory); background: #0b0807; border: 1px solid var(--cx-line-strong); border-radius: 4px; font: inherit; }
.cofd-d20-panel__note { margin: 8px 0 0; font-size: 0.75rem; color: var(--cx-muted); }
.cofd-d20-btn {
	min-height: 40px;
	padding: 0.5em 1.1em;
	font-family: var(--cx-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text, #e6dcc8);
	background: transparent;
	border: 1px solid var(--cx-line-strong);
	border-radius: 4px;
	cursor: pointer;
}
.cofd-d20-btn:hover { color: var(--cx-ivory); border-color: var(--cx-gold); }
.cofd-d20-btn--primary { color: #fff; background: linear-gradient(180deg, #c22e33, #8d1a20); border-color: #c22e33; }
.cofd-d20-btn--primary:hover { color: #fff; filter: brightness(1.1); }
.cofd-d20-btn:disabled { opacity: 0.5; cursor: progress; }
.cofd-d20-btn:focus-visible { outline: 2px solid var(--cx-gold-bright); outline-offset: 3px; }
.cofd-d20-table.is-fumble .cofd-d20-die { animation: cofd-d20-shake 0.45s ease-in-out; }
@keyframes cofd-d20-shake {
	20% { translate: -6px 0; }
	40% { translate: 5px 0; }
	60% { translate: -4px 0; }
	80% { translate: 2px 0; }
}

/* GM Assistant notes ---------------------------------------------------------- */
.cofd-notes {
	margin: clamp(32px, 5vw, 56px) 0 0;
	padding: clamp(20px, 3.5vw, 36px);
	background: linear-gradient(180deg, rgba(35, 26, 22, 0.9), rgba(17, 12, 11, 0.9));
	border: 1px solid var(--cx-line);
	border-radius: 8px;
	color: var(--cx-text);
}
.cofd-notes__eyebrow { margin: 0 0 0.5em; font-family: var(--cx-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cx-gold); }
.cofd-notes__title { margin: 0 0 0.25em; font-family: var(--cx-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); color: var(--cx-ivory); }
.cofd-notes__meta { margin: 0 0 1.2em; color: var(--cx-muted); font-size: 0.95rem; }
.cofd-notes__recap p { margin: 0 0 1em; }
.cofd-notes__recap--verse p { font-family: var(--cx-accent); font-style: italic; font-size: 1.25rem; line-height: 1.55; color: var(--cx-ivory); }
.cofd-notes__block { margin-top: 2em; }
.cofd-notes h3 { margin: 0 0 0.8em; font-family: var(--cx-display); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--cx-ivory); }
.cofd-notes__moments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.cofd-notes__moment { margin: 0; padding: 16px 18px; background: rgba(11, 8, 7, 0.55); border: 1px solid var(--cx-line); border-left: 3px solid var(--cx-gold); border-radius: 4px; }
.cofd-notes__moment--funny { border-left-color: #e2a84a; }
.cofd-notes__moment--dramatic,
.cofd-notes__moment--epic { border-left-color: var(--cx-ember); }
.cofd-notes__moment blockquote { margin: 0; padding: 0; border: 0; }
.cofd-notes__moment blockquote p,
.cofd-notes__moment > p { margin: 0; font-family: var(--cx-accent); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--cx-ivory); }
.cofd-notes__moment blockquote p::before { content: "“"; }
.cofd-notes__moment blockquote p::after { content: "”"; }
.cofd-notes__moment figcaption { margin-top: 0.6em; font-size: 0.88rem; color: var(--cx-muted); }
.cofd-notes__moment figcaption strong { color: var(--cx-gold); }
.cofd-notes__scenes { margin: 0; padding: 0; list-style: none; counter-reset: scene; }
.cofd-notes__scenes > li { counter-increment: scene; border-top: 1px solid var(--cx-line); }
.cofd-notes__scenes > li:last-child { border-bottom: 1px solid var(--cx-line); }
.cofd-notes details > summary { cursor: pointer; list-style: none; }
.cofd-notes details > summary::-webkit-details-marker { display: none; }
.cofd-notes__scenes summary { display: flex; align-items: baseline; gap: 14px; padding: 14px 4px; font-family: var(--cx-display); color: var(--cx-ivory); }
.cofd-notes__scenes summary::before { content: counter(scene, upper-roman); min-width: 2.2em; font-size: 0.85rem; color: var(--cx-gold); }
.cofd-notes__scenes summary::after,
.cofd-notes__group > summary::after { content: "+"; margin-left: auto; color: var(--cx-gold); font-family: var(--f-body, sans-serif); }
.cofd-notes details[open] > summary::after { content: "–"; }
.cofd-notes__scenes details > :not(summary) { margin: 0 4px 16px calc(2.2em + 18px); color: var(--cx-text); }
.cofd-notes__scenes ul { padding-left: 1.1em; }
.cofd-notes__scenes li li { margin-bottom: 0.35em; }
.cofd-notes__compendium { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 2em; align-items: start; }
.cofd-notes__group { background: rgba(11, 8, 7, 0.55); border: 1px solid var(--cx-line); border-radius: 4px; }
.cofd-notes__group > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-family: var(--cx-display); color: var(--cx-ivory); }
.cofd-notes__count { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 0.4em; font-size: 0.75rem; color: var(--cx-ink); background: var(--cx-gold); border-radius: 99px; }
.cofd-notes__group dl { margin: 0; padding: 0 16px 14px; }
.cofd-notes__group dt { margin-top: 0.8em; font-weight: 700; color: var(--cx-gold); }
.cofd-notes__group dd { margin: 0.2em 0 0; font-size: 0.95rem; color: var(--cx-text); }
.cofd-notes__source { margin: 1.8em 0 0; font-size: 0.92rem; }
.cofd-notes__source a { color: var(--cx-gold); }

/* Motion preferences --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cofd-border--arcane,
	.cofd-border--ember,
	.cofd-border--frost::after,
	.cofd-d20-table.is-open,
	.cofd-d20-table .cofd-d20-flash,
	.cofd-d20-table.is-fumble .cofd-d20-die { animation: none !important; }
	.cofd-d20-table.is-crit .cofd-d20-flash,
	.cofd-d20-table.is-fumble .cofd-d20-flash { opacity: 0.35; }
	.cofd-d20-fab,
	.cofd-d20-fab .cofd-d20-icon,
	.cofd-social__link { transition: none; }
}