/* Product Dilemmas — facilitator walkthrough styles.
 *
 * EXPERIMENTAL comic-book reskin (game-styling branch) — a hand-drawn,
 * sketchy-panel look, moving away from the earlier clean/digital theme.
 * The wobbly box technique throughout (irregular per-corner border-radius,
 * a couple of degrees of rotate(), hard offset box-shadow instead of a
 * blurred one) is adapted from https://codepen.io/mp/pen/kBEeKw. This is a
 * trial — may get reverted wholesale, so it's kept to this one file rather
 * than touching any template markup. */

@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Kalam:wght@400;700&display=swap');

:root {
	--pd-bg: #f4ecd8;
	--pd-fg: #1a1a1a;
	--pd-muted: #6b6355;
	--pd-accent: #2f6fed;
	--pd-accent-fg: #fff8ec;
	--pd-card-bg: #fffdf7;
	--pd-border: #1a1a1a;
	--pd-positive: #2f9e44;
	--pd-negative: #d7263d;
}

* {
	box-sizing: border-box;
}

body.pd-play {
	margin: 0;
	background: var(--pd-bg);
	color: var(--pd-fg);
	font-family: 'Kalam', cursive;
	font-size: 20px;
	line-height: 1.5;
}

.pd-screen {
	max-width: 900px;
	margin: 0 auto;
	padding: 48px 32px 80px;
}

/* Round-announcement: a centred title screen, not a scrolling document. */
.pd-screen-round {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Wider, so the Action grid below has room to lay out multiple columns —
 * and the Choose-a-Scenario, Board and Recap screens match it, so moving
 * between these doesn't visually jump narrower/wider. */
.pd-screen-scenario,
.pd-screen-choice,
.pd-screen-board,
.pd-screen-recap {
	max-width: 1200px;
}

.pd-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pd-muted);
	font-size: 0.8em;
	margin: 0 0 8px;
}

h1, h2, h3 {
	font-family: 'Bangers', cursive;
	font-weight: normal;
	letter-spacing: 0.02em;
}

h1 {
	font-size: 3em;
	margin: 0 0 24px;
	transform: rotate(-1deg);
}

h2 {
	font-size: 1.8em;
	margin: 40px 0 16px;
}

h3 {
	font-size: 1.4em;
	margin: 0 0 8px;
}

.pd-body-text p {
	margin: 0 0 1em;
}

.pd-note {
	color: var(--pd-muted);
	font-size: 0.9em;
}

/* The Host's live "🚩 N" counter, next to the Scenario title on the
 * Scenario-reveal screen — sized in em against the h1's own 3em, so it
 * reads as a chunky companion badge to the title, not a tiny label. */
.pd-flag-counter {
	display: inline-block;
	margin-left: 12px;
	vertical-align: middle;
	font-family: 'Bangers', cursive;
	font-size: 0.45em;
	letter-spacing: 0.02em;
	background: var(--pd-card-bg);
	color: var(--pd-fg);
	border: 2px solid var(--pd-border);
	border-radius: 999px;
	padding: 4px 14px;
}

/* The Board's own counter (screen-board.php) — always visible, right below
 * the Tracks and above the Role row, right-aligned into the same margin
 * the pending-card panel occupies higher up the page (.pd-tracks is only
 * 66% wide for exactly this reason). Follows whichever Scenario is
 * currently "live" server-side rather than being tied to one Scenario —
 * see pdInitBoardFlagCounter() in frontend.js. Deliberately smaller here
 * and in rem (not em, unlike the Scenario-reveal one above) — this sits in
 * a plain flex row, not a giant h1, so it needs its own fixed size rather
 * than inheriting the h1's badge sizing. */
.pd-board-flag-row {
	display: flex;
	justify-content: flex-end;
	margin: 8px 0 24px;
}

.pd-board-flag-row .pd-flag-counter {
	margin-left: 0;
	font-size: 0.75rem;
}

/* The player-facing password form (includes/player-gate.php). */
.pd-gate-form {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pd-gate-form input[type="password"] {
	font-family: 'Kalam', cursive;
	font-size: 1em;
	padding: 10px 14px;
	border: 3px solid var(--pd-border);
	border-radius: 8px;
	background: var(--pd-card-bg);
	color: var(--pd-fg);
}

.pd-gate-error {
	color: var(--pd-negative);
}

.pd-button {
	display: inline-block;
	background: var(--pd-accent);
	color: var(--pd-accent-fg);
	border: 3px solid var(--pd-border);
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	padding: 14px 28px;
	font-family: 'Bangers', cursive;
	font-size: 1.2em;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	margin-top: 16px;
	box-shadow: 4px 4px 0 var(--pd-border);
	transform: rotate(-1deg);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.pd-button:hover,
.pd-button:focus {
	transform: rotate(-1deg) translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--pd-border);
}

.pd-button:active {
	transform: rotate(-1deg) translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--pd-border);
}

/* Used by the Board's pending-card Done button while its delta checklist
 * isn't fully ticked yet — see pdInitDeltaChecklistGate in frontend.js. */
.pd-button:disabled {
	opacity: 0.5;
	cursor: default;
}

.pd-button:disabled:hover,
.pd-button:disabled:focus,
.pd-button:disabled:active {
	transform: rotate(-1deg);
	box-shadow: 4px 4px 0 var(--pd-border);
}

.pd-button-secondary {
	background: var(--pd-card-bg);
	color: var(--pd-fg);
}

.pd-scenario-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.pd-board-update-block {
	margin: 16px 0 32px;
}

.pd-board-update {
	font-weight: 600;
	margin: 0 0 4px;
}

.pd-hidden {
	display: none;
}

.pd-fade-in {
	animation: pd-fade-in 0.3s ease;
}

@keyframes pd-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* The Game End card's Won/Lost celebration (pdShowEmojiShower) — a
 * full-viewport rain of emoji, purely decorative (pointer-events: none) so
 * it never blocks clicking the "See the recap" link underneath it. */
.pd-emoji-shower {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 500;
}

.pd-emoji-shower-piece {
	position: absolute;
	top: -40px;
	animation-name: pd-emoji-fall;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

@keyframes pd-emoji-fall {
	from {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	to {
		transform: translateY(110vh) rotate(360deg);
		opacity: 0.9;
	}
}

.pd-delta-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-weight: 600;
}

/* A subtle break before Time, so it reads as separate from the Risk/Strain
 * changes above it. */
.pd-delta-time {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid var(--pd-border);
}

/* The Board's pending-card checklist (pdDeltaChecklistHtml) — the
 * facilitator ticks off each change as they make it on the physical board,
 * which gates the card's Done button (pdInitDeltaChecklistGate). */
.pd-delta-check-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.pd-delta-checkbox {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--pd-positive);
	cursor: pointer;
}

.pd-action-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
	align-items: stretch;
}

.pd-action-card {
	background: var(--pd-card-bg);
	border: 3px solid var(--pd-border);
	border-radius: 3% 97% 4% 96% / 96% 4% 97% 3%;
	box-shadow: 5px 5px 0 var(--pd-border);
	padding: 18px;
	font-size: 0.85em;
	display: flex;
	flex-direction: column;
}

.pd-action-card h3 {
	font-size: 1.3em;
}

.pd-action-card .pd-delta-list {
	flex-grow: 1;
	font-size: 0.95em;
}

.pd-action-card .pd-button {
	align-self: flex-start;
}

/* The Board's pending-Action card's "Choose a different action" link — a
 * quieter, secondary alternative to the primary Done button above it, not
 * another full button competing for attention. */
.pd-card-link-action {
	align-self: flex-start;
	margin-top: 10px;
	background: none;
	border: none;
	padding: 0;
	font-family: 'Kalam', cursive;
	font-size: 0.85em;
	color: var(--pd-muted);
	text-decoration: underline;
	cursor: pointer;
}

.pd-card-link-action:hover,
.pd-card-link-action:focus {
	color: var(--pd-fg);
}

.pd-action-card.pd-defer-card {
	background: #efe0ff;
}

.pd-action-button.pd-selected {
	background: var(--pd-positive);
}

.pd-action-button:disabled {
	opacity: 0.5;
	cursor: default;
}

.pd-action-button.pd-selected:disabled {
	opacity: 1;
}

.pd-die {
	font-family: 'Bangers', cursive;
	font-size: 5em;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	text-align: center;
	background: var(--pd-card-bg);
	border: 4px solid var(--pd-border);
	border-radius: 10% 90% 8% 92% / 92% 8% 90% 10%;
	box-shadow: 6px 6px 0 var(--pd-border);
	margin: 24px 0;
}

.pd-die-rolling {
	animation: pd-die-spin 0.08s linear infinite;
}

@keyframes pd-die-spin {
	0% { transform: rotate(-4deg); }
	50% { transform: rotate(4deg); }
	100% { transform: rotate(-4deg); }
}

.pd-screen-board {
	position: relative;
	min-height: 70vh;
}

/* Backlog pile and Strain supply share a row, grouped on the left —
 * deliberately NOT spread across the full row width, since the pending
 * Action/Scenario-effect card panel anchors top-right and collides with
 * anything placed over there (see .pd-board-card-panel below). No Back link
 * here any more — see .pd-card-link-action's "Choose a different action". */
.pd-board-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

/* The Board's pending Action/Scenario-effect card, fixed top-right — free
 * dragging kept covering the Tracks, so instead it's a small tab the
 * facilitator can click to unfurl the full card downward, and tuck away
 * again the same way. Starts unfurled (same visibility as before); the tab
 * itself never moves, so it's always easy to find. A z-index is needed
 * because it's earlier in the DOM than .pd-tracks — without one, the later
 * track counters (z-index: 2) paint on top of it. */
.pd-board-card-panel {
	position: absolute;
	top: 48px;
	right: 32px;
	width: 300px;
	z-index: 50;
	box-shadow: 5px 5px 0 var(--pd-border);
	border-radius: 12px;
}

.pd-board-card-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: var(--pd-card-bg);
	border: 3px solid var(--pd-border);
	border-radius: 12px;
	color: var(--pd-fg);
	font-family: 'Bangers', cursive;
	letter-spacing: 0.02em;
	font-size: 1em;
	padding: 10px 16px;
	cursor: pointer;
	text-align: left;
}

/* Square off the tab's bottom corners and drop its own bottom border while
 * open, so it reads as flush with the card body below it rather than a
 * separate rounded pill sitting on top of it. */
.pd-board-card-panel:not(.pd-board-card-collapsed) .pd-board-card-tab {
	border-radius: 12px 12px 0 0;
	border-bottom: none;
}

.pd-board-card-chevron {
	display: inline-block;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.pd-board-card-panel:not(.pd-board-card-collapsed) .pd-board-card-chevron {
	transform: rotate(180deg);
}

/* Clips the slide so collapsing genuinely hides the card rather than just
 * scrolling it — overflow:hidden here, not on the panel, so the tab's own
 * box-shadow/border aren't clipped too. */
.pd-board-card-body {
	max-height: 600px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.pd-board-card-panel.pd-board-card-collapsed .pd-board-card-body {
	max-height: 0;
}

.pd-board-card-panel .pd-action-card {
	font-size: 0.9em;
	margin: 0;
	border-radius: 0 0 12px 12px;
	border-top: none;
	box-shadow: none;
}

.pd-board-card-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.pd-board-card-actions .pd-button {
	margin-top: 0;
	flex: 1;
	text-align: center;
}

@media (max-width: 760px) {
	.pd-board-card-panel {
		position: static;
		width: auto;
		margin-top: 32px;
	}

	.pd-tracks {
		--pd-track-label-width: 90px;
		/* Card panel stacks below the tracks here instead of floating over
		 * them (see .pd-board-card-panel above), so there's no overlap to
		 * leave room for — let the tracks use the full width again. */
		width: 100%;
	}

	.pd-track-label {
		font-size: 0.7em;
	}
}

/* --- Tracks --- */

.pd-tracks {
	--pd-track-label-width: 150px;
	--pd-track-row-height: 52px;
	position: relative;
	width: 66%;
	height: calc(var(--pd-track-count) * var(--pd-track-row-height));
	margin: 32px 0 48px;
}

.pd-track-row {
	display: flex;
	align-items: stretch;
	height: var(--pd-track-row-height);
}

.pd-track-label {
	width: var(--pd-track-label-width);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	font-family: 'Bangers', cursive;
	font-size: 1em;
	letter-spacing: 0.01em;
	color: var(--pd-fg);
	padding-right: 12px;
}

.pd-track-cells {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	padding: 6px 0;
}

/* Each square gets its own hand-drawn wobble (irregular per-corner
 * border-radius) plus a slight alternating tilt, so the row reads as
 * loosely sketched rather than a tidy digital grid — see the file header
 * for the technique's source. */
.pd-track-cell {
	background: var(--pd-card-bg);
	border: 2px solid var(--pd-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Bangers', cursive;
	font-size: 0.9em;
	color: var(--pd-fg);
}

.pd-track-cell:nth-child(odd) {
	border-radius: 81% 4% 88% 1% / 12% 122% 10% 90%;
	transform: rotate(-0.6deg);
}

.pd-track-cell:nth-child(even) {
	border-radius: 81% 4% 88% 1% / 12% 122% 10% 90%;
	transform: rotate(0.6deg);
}

.pd-track-counter {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pd-accent);
	border: 3px solid var(--pd-bg);
	box-shadow: 0 0 0 2px var(--pd-border), 3px 3px 0 var(--pd-border);
	transform: translate(-50%, -50%);
	cursor: grab;
	z-index: 2;
}

.pd-track-counter:active {
	cursor: grabbing;
}

/* --- Roles, bowls, Strain chequers --- */

.pd-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 32px 0;
}

/* Each bowl gets one of 3 hand-drawn "panel" shapes (irregular per-corner
 * border-radius, alternating tilt) cycling by nth-child — directly adapted
 * from the CodePen's .box1/.box2/.box3 pattern, so no two bowls in a row
 * look quite the same. */
.pd-role-bowl {
	background: var(--pd-card-bg);
	border: 3px solid var(--pd-border);
	box-shadow: 5px 5px 0 var(--pd-border);
	padding: 16px;
	min-width: 160px;
	flex: 1;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-role-bowl:nth-child(3n+1) {
	border-radius: 95% 4% 92% 5% / 4% 95% 6% 95%;
	transform: rotate(-0.7deg);
}

.pd-role-bowl:nth-child(3n+2) {
	border-radius: 4% 95% 6% 95% / 95% 4% 92% 5%;
	transform: rotate(0.7deg);
}

.pd-role-bowl:nth-child(3n+3) {
	border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
	transform: rotate(-0.5deg);
}

.pd-role-bowl.pd-bowl-maxed {
	border-color: var(--pd-negative);
	box-shadow: 5px 5px 0 var(--pd-negative);
}

.pd-role-name-button {
	display: block;
	width: 100%;
	background: none;
	border: none;
	color: var(--pd-fg);
	font-family: 'Bangers', cursive;
	font-size: 1.3em;
	letter-spacing: 0.02em;
	text-align: center;
	cursor: pointer;
	padding: 0 0 10px;
	text-decoration: underline dotted;
}

.pd-role-name-button:hover {
	color: var(--pd-accent);
}

.pd-bowl-tokens {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 56px;
	justify-content: center;
}

/* A Role bowl showing its character (set as an inline background-image in
 * screen-board.php), a fixed 48px in the middle, with chequers resting on
 * top of it. */
.pd-bowl-tokens.pd-bowl-has-character {
	min-height: 64px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 48px 48px;
	image-rendering: pixelated;
}

.pd-chequer {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--pd-negative);
	border: 2px solid var(--pd-bg);
	box-shadow: 0 0 0 2px var(--pd-border);
	cursor: grab;
	flex-shrink: 0;
}

.pd-chequer:active {
	cursor: grabbing;
}

/* A small, loosely-piled Strain supply, in the header row — not a
 * full-width tray, so it doesn't push the Tracks down the page. */
.pd-strain-supply {
	background: var(--pd-card-bg);
	border: 2px dashed var(--pd-border);
	border-radius: 12px;
	padding: 8px 14px;
}

.pd-strain-supply .pd-bowl-tokens {
	max-width: 150px;
	gap: 0;
}

/* Overlap the chequers and give them a slight alternating tilt so they
 * read as a loose pile of coins rather than a tidy grid — matches the
 * "imprecise is fine" look of the rest of the board. */
.pd-strain-supply .pd-chequer {
	margin: -5px;
}

.pd-strain-supply .pd-chequer:nth-child(3n) {
	transform: rotate(8deg);
}

.pd-strain-supply .pd-chequer:nth-child(3n + 1) {
	transform: rotate(-6deg);
}

.pd-strain-supply .pd-chequer:nth-child(3n + 2) {
	transform: translateY(3px) rotate(3deg);
}

/* --- Backlog pile --- */

/* In the header row, between the back link and Strain supply — NOT the
 * header's top-right corner, since the pending Action/Scenario-effect
 * card panel anchors there and occupies a fixed 300px-wide box even when
 * collapsed, which made an earlier version of this unreadable. Titles
 * only, on purpose: this is a reference pile, not a way back into a
 * deferred Scenario (that only happens via The Reckoning's dice roll). */
.pd-backlog-pile {
	background: var(--pd-card-bg);
	border: 2px dashed var(--pd-border);
	border-radius: 12px;
	padding: 8px 14px;
	max-width: 100%;
}

/* Deferred Scenarios pile up as an overlapping stack, newest on top (later
 * in the markup = drawn on top) and fully readable, so the pile only grows
 * ~50px per card instead of a whole card's width. */
.pd-backlog-chips {
	display: flex;
	justify-content: flex-start;
}

.pd-backlog-chip {
	background: var(--pd-bg);
	border: 1px solid var(--pd-border);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 0.7em;
	color: var(--pd-muted);
	width: 150px;
	flex-shrink: 0;
	box-shadow: -2px 2px 0 rgba(0, 0, 0, 0.15); /* separates each card from the one below */
}

.pd-backlog-chip + .pd-backlog-chip {
	margin-left: -100px;
}

.pd-backlog-chip:nth-child(3n) {
	transform: rotate(-2deg);
}

.pd-backlog-chip:nth-child(3n + 1) {
	transform: rotate(1.5deg);
}

.pd-backlog-chip:nth-child(3n + 2) {
	transform: rotate(-1deg);
}

.pd-backlog-empty {
	margin: 0;
	font-size: 0.75em;
	color: var(--pd-muted);
	font-style: italic;
}

/* --- Round/Scenario/Reckoning overlay (board-overlay-nav experiment) --- */

/* One shared width for every screen shown in the overlay (Round, Choose,
 * Scenario reveal, Reckoning, Game End). 960px leaves ~875px inside for
 * content (after the iframe border, .pd-screen's 32px side padding and a
 * scrollbar) — enough for 3 Action cards per row (.pd-action-list needs
 * 3 × 230px + gaps = 722px); the old 800px left ~715px, just short, so
 * they wrapped 2 per row. */
.pd-overlay-modal {
	background: transparent;
	border: none;
	padding: 0;
	width: 90vw;
	max-width: 960px;
	height: 85vh;
	max-height: 85vh;
}

.pd-overlay-modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.pd-overlay-modal iframe {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--pd-bg);
	border: 3px solid var(--pd-border);
	border-radius: 12px;
	box-shadow: 8px 8px 0 var(--pd-border);
}

@media (max-width: 760px) {
	.pd-overlay-modal {
		width: 100vw;
		max-width: none;
		height: 100vh;
		max-height: 100vh;
	}

	.pd-overlay-modal iframe {
		border-radius: 0;
		box-shadow: none;
	}
}

/* --- Role-detail modal --- */

#pd-role-modal {
	background: var(--pd-card-bg);
	color: var(--pd-fg);
	border: 3px solid var(--pd-border);
	border-radius: 3% 97% 4% 96% / 96% 4% 97% 3%;
	box-shadow: 8px 8px 0 var(--pd-border);
	padding: 28px;
	max-width: 420px;
	width: 90vw;
}

#pd-role-modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

#pd-role-modal h2 {
	margin-top: 0;
}

#pd-role-modal h3 {
	margin-top: 24px;
	font-size: 1em;
}

/* Role title with its character to the right — 48px, matching the
 * characters in the Board's Role bowls. */
.pd-role-modal-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.pd-role-modal-heading h2 {
	margin-bottom: 0;
}

.pd-role-modal-image {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	image-rendering: pixelated;
}

#pd-role-modal form {
	margin-top: 24px;
	text-align: right;
}

/* --- Special Ability modal (pdOpenSpecialAbilityModal) --- */

/* Same comic-panel look as the Role modal. Narrower than the overlay modal
 * on purpose — it only ever holds one short question, and at 960px it would
 * read as mostly empty space. The text is bigger than body copy so it
 * can't be skimmed past. */
.pd-special-ability-modal {
	background: var(--pd-card-bg);
	color: var(--pd-fg);
	border: 3px solid var(--pd-border);
	border-radius: 3% 97% 4% 96% / 96% 4% 97% 3%;
	box-shadow: 8px 8px 0 var(--pd-border);
	padding: 36px;
	max-width: 760px; /* room for both buttons side by side, each on one line */
	width: 90vw;
}

.pd-special-ability-modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.pd-special-ability-modal .pd-body-text {
	font-size: 1.4em;
	line-height: 1.35;
}

.pd-special-ability-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

/* Keep each button's label on one line, except on phones, where there isn't
 * room: there, the buttons stack instead (flex-wrap above). */
@media (min-width: 600px) {
	.pd-special-ability-modal-actions .pd-button {
		white-space: nowrap;
	}
}

/* --- Private per-Role page (screen-role.php) --- */

/* The Role page's "Does this resonate?" card — reuses the Board's
 * .pd-board-card-panel (fixed top-right, collapsible tab) as-is; these rules
 * only make room for it. The Role details get a right margin the width of
 * the panel plus a gap, so the panel never sits on top of them. */
.pd-screen-role {
	position: relative;
	/* Wider than other screens, so the ✋ vote cards fit 3 on a row beside
	 * the flag panel: 1240 - 64 padding - 332 panel = ~840px for 3 cards. */
	max-width: 1240px;
}

.pd-screen-role .pd-role-section {
	margin-right: 332px;
}

/* --- ✋ Action voting (rest-votes.php, pdInitVoteSection /
 * pdInitHostVoteCounters in frontend.js) --- */

.pd-vote-section {
	margin-bottom: 16px;
}

/* 3 on a row, per the Role page's layout; 2 on mid-width screens and 1 on
 * phones (see the media queries below). */
.pd-screen-role .pd-vote-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 16px;
}

/* Action descriptions arrive as plain text; keep their line breaks. */
.pd-vote-description {
	white-space: pre-line;
}

.pd-vote-button.pd-selected {
	color: var(--pd-accent-fg);
}

/* At max Strain (can't vote): the explanation takes the maxed bowl's red,
 * so it reads as the reason the buttons are greyed out. */
.pd-vote-status.pd-vote-status-maxed {
	color: var(--pd-negative);
	font-weight: 600;
}

@media (max-width: 1100px) {
	.pd-screen-role .pd-vote-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.pd-screen-role .pd-vote-list {
		grid-template-columns: 1fr;
	}
}

/* The Host's "✋ N" on each Action card (screen-scenario-reveal.php) — a
 * sticker on the card's top-right corner, like Recap's 🚩 badge. Quiet
 * white at 0; the accent colour once anyone has voted for it. */
.pd-action-card {
	position: relative;
}

.pd-vote-counter {
	position: absolute;
	top: -12px;
	right: 12px;
	background: var(--pd-card-bg);
	color: var(--pd-fg);
	font-family: 'Bangers', cursive;
	letter-spacing: 0.03em;
	font-size: 1em;
	padding: 3px 10px;
	border: 2px solid var(--pd-border);
	border-radius: 8px;
	transform: rotate(3deg);
}

.pd-vote-counter.pd-vote-counter-active {
	background: var(--pd-accent);
	color: var(--pd-accent-fg);
}

/* Title on the left, the Role's pixel-art character to its right. The
 * character is a 128px GIF shown slightly smaller; "pixelated" keeps the
 * pixel art crisp instead of blurring it when scaled. */
.pd-role-heading {
	display: flex;
	align-items: center;
	gap: 24px;
}

.pd-role-character-wrap {
	flex-shrink: 0;
	text-align: center;
}

.pd-role-character {
	display: block;
	width: 86px; /* small enough for phones too, so no separate phone size */
	height: auto;
	image-rendering: pixelated;
}

/* The small ⏸ / ▶ switch under the character (its words are in aria-label
 * and the tooltip — see pdInitCharacterToggle) — kept
 * deliberately quiet (plain text, no card styling) so it doesn't compete
 * with the page. */
.pd-character-toggle {
	margin-top: 4px;
	padding: 2px 8px;
	background: none;
	border: none;
	font: inherit;
	font-size: 0.9em;
	color: var(--pd-muted);
	cursor: pointer;
}

.pd-character-toggle:hover {
	color: var(--pd-fg);
}

.pd-role-flag-panel h3 {
	margin: 0;
}

/* Plain text from the REST poll (see pd_rest_get_flags) — pre-line keeps the
 * Scenario's own paragraph breaks without needing HTML. */
.pd-flag-current-description {
	white-space: pre-line;
	margin-top: 8px;
}

.pd-flag-current-description:empty {
	display: none;
}

/* Start Game screen: one "copy link" button per Role, for pasting into
 * Zoom chat (pdInitCopyLinkButtons in frontend.js). */
.pd-role-links {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 3px solid var(--pd-border);
}

.pd-role-links-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* The Role's character as a small icon beside its name. */
.pd-copy-link-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pd-copy-link-character {
	width: 32px;
	height: 32px;
	margin: -6px 0; /* sits in the button's padding, so buttons stay the same height */
	image-rendering: pixelated;
}

/* While flashing "Copied ✓" — light text on the green, like a chosen Action. */
.pd-copy-link-button.pd-selected {
	color: var(--pd-accent-fg);
}

@media (max-width: 760px) {
	/* Panel stacks here (see the Board's own 760px rule) — above the Role
	 * details, since it's first in the markup, so the flag button is still
	 * on screen without scrolling. */
	.pd-role-flag-panel.pd-board-card-panel {
		margin: 0 0 32px;
	}

	.pd-screen-role .pd-role-section {
		margin-right: 0;
	}
}

/* --- Recap (just the Scenarios faced) and All Scenarios (every Round's
 * full set, played ones highlighted, reached via Recap's Continue) — both
 * share this card grid. */

/* Only used by the All Scenarios screen (screen-all-scenarios.php), to
 * group cards under a heading per Round — Recap itself is one flat grid,
 * with no need to group by Round. */
.pd-recap-round {
	margin-bottom: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--pd-border);
}

.pd-recap-round:last-of-type {
	border-bottom: none;
}

/* auto-fit + a ~320px minimum lands on 3 columns at this screen's 1200px
 * width, and still wraps gracefully on narrower viewports instead of
 * needing its own breakpoints. */
.pd-recap-scenario-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.pd-recap-scenario-card {
	position: relative;
	background: var(--pd-card-bg);
	border: 3px solid var(--pd-border);
	border-radius: 3% 97% 4% 96% / 96% 4% 97% 3%;
	box-shadow: 4px 4px 0 var(--pd-border);
	padding: 16px 18px;
	font-size: 0.85em;
}

.pd-recap-scenario-card h3 {
	font-size: 1.2em;
	margin: 0 0 6px;
}

.pd-recap-scenario-card p {
	margin: 0;
	color: var(--pd-muted);
}

/* All Scenarios only — marked by pdInitAllScenarios() (frontend.js) against
 * pdGameState.history, the only record of which Scenarios were actually
 * faced this game. */
.pd-recap-scenario-played {
	background: #eaffea;
	border-color: var(--pd-positive);
}

.pd-recap-scenario-played p {
	color: var(--pd-fg);
}

.pd-recap-scenario-played::before {
	content: "Played";
	position: absolute;
	top: -12px;
	right: 12px;
	background: var(--pd-positive);
	color: var(--pd-accent-fg);
	font-family: 'Bangers', cursive;
	letter-spacing: 0.03em;
	font-size: 0.75em;
	padding: 3px 10px;
	border: 2px solid var(--pd-border);
	border-radius: 8px;
	transform: rotate(-3deg);
}

/* Recap or All Scenarios — marked by pdApplyScenarioFlags() (frontend.js)
 * against the server-side flag counts (includes/rest-flags.php). Purely
 * additive (no background/border-colour override, unlike .pd-recap-
 * scenario-played above), so a card that's both played and flagged shows
 * both badges without either one overriding the other's colour. Top-right
 * on both screens, for consistency. Shows the flag count, read from the
 * card's data-flag-count (also set by pdApplyScenarioFlags). */
.pd-recap-scenario-flagged::after {
	content: "🚩 " attr(data-flag-count);
	position: absolute;
	top: -12px;
	right: 12px;
	background: var(--pd-accent);
	color: var(--pd-accent-fg);
	font-family: 'Bangers', cursive;
	letter-spacing: 0.03em;
	font-size: 0.75em;
	padding: 3px 10px;
	border: 2px solid var(--pd-border);
	border-radius: 8px;
	transform: rotate(3deg);
}

/* All Scenarios only (Recap cards are plain white): when a card has
 * both badges, the flag count shifts left to sit just beside "Played"
 * rather than on top of it. Played gets a fixed width (in em, so it scales with its own font size) so
 * this offset — Played's right: 12px + its width + an 8px gap — always
 * lines up. */
.pd-recap-scenario-played::before {
	box-sizing: border-box; /* the global * rule doesn't reach pseudo-elements */
	width: 4.5em;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

.pd-recap-scenario-played.pd-recap-scenario-flagged::after {
	right: calc(12px + 4.5em + 8px);
}