/* Pocket Dungeon — premium pixel-art SPA styles.
   Design tokens lifted from getpocketdungeon.com so the app and the
   landing page share a visual language. */

:root {
	color-scheme: dark;
	--bg: #0a0808;
	--ink: #f6efe2;
	--muted: #b9aa96;
	--gold: #e0ad59;
	--gold-soft: rgba(224, 173, 89, 0.62);
	--fire: #e3542f;
	--magma: #8c1f1e;
	--mystic: #76d8bd;
	--panel: rgba(21, 18, 20, 0.92);
	--panel-soft: rgba(21, 18, 20, 0.72);
	--line: rgba(224, 173, 89, 0.26);
	--line-strong: rgba(224, 173, 89, 0.55);
	--shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.42);
	--shadow-deep: 0 24px 56px rgba(0, 0, 0, 0.48);
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	min-height: 100%;
	margin: 0;
}

body.pd-body {
	background:
		linear-gradient(180deg, rgba(107, 21, 20, 0.32), transparent 42%),
		radial-gradient(circle at 14% 12%, rgba(227, 84, 47, 0.32), transparent 28%),
		radial-gradient(circle at 84% 8%, rgba(118, 216, 189, 0.16), transparent 32%),
		var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Pixel-grid overlay (decorative) */
.pd-bg-grid {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 8px 8px;
	mask-image: linear-gradient(to bottom, #000 0 70%, transparent);
	z-index: 0;
}

.pd-app {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	margin: 0 auto;
	/* Respect notch / status-bar / gesture-bar on mobile. The tester APK
	   uses Capacitor with a transparent status bar, so without this padding
	   the menu sits behind the clock + battery icons. */
	padding-top: max(env(safe-area-inset-top, 32px), 32px);
	padding-bottom: max(env(safe-area-inset-bottom, 0px), 32px);
	padding-left: max(env(safe-area-inset-left, 0px), clamp(14px, 4vw, 28px));
	padding-right: max(env(safe-area-inset-right, 0px), clamp(14px, 4vw, 28px));
	min-height: 100vh;
	min-height: 100dvh;
}

.pd-screen-container {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 90vh;
}

/* ── Common screen + header ─────────────────────────────────────── */

.pd-screen {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pd-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
}

.pd-back {
	width: 40px; height: 40px;
	border-radius: var(--radius-sm);
	background: var(--panel-soft);
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 22px;
	cursor: pointer;
}
.pd-back:hover { border-color: var(--gold); }

.pd-title {
	margin: 0;
	font-family: Georgia, "Iowan Old Style", serif;
	font-size: clamp(22px, 5.4vw, 30px);
	letter-spacing: 0;
	text-shadow: 0 2px 0 #210809;
}

.pd-blurb {
	color: var(--muted);
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.pd-muted { color: var(--muted); }

/* ── Menu (hero) ─────────────────────────────────────────────── */

.pd-screen-menu {
	gap: 26px;
}

.pd-hero {
	padding: 28px 4px 8px;
	text-align: left;
}

.pd-kicker {
	margin: 0 0 12px;
	color: var(--mystic);
	font: 800 12px/1.1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-shadow: 0 0 14px rgba(118, 216, 189, 0.36);
}

.pd-display-title {
	margin: 0;
	font-family: Georgia, "Iowan Old Style", serif;
	font-size: clamp(46px, 12.5vw, 84px);
	line-height: 0.92;
	letter-spacing: 0;
	text-shadow: 0 3px 0 #210809, 0 0 28px rgba(227, 84, 47, 0.48);
}

.pd-lede {
	max-width: 520px;
	margin: 18px 0 0;
	color: var(--muted);
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.55;
}

.pd-menu-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pd-menu-action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 18px 20px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	color: var(--ink);
	cursor: pointer;
	text-align: left;
	transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.pd-menu-action:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.pd-menu-action:active { transform: translateY(0); }

.pd-menu-action.pd-disabled,
.pd-menu-action:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none !important;
	border-color: var(--line);
}

.pd-menu-primary {
	background:
		linear-gradient(180deg, rgba(227, 84, 47, 0.10), transparent 70%),
		var(--panel);
	border-color: var(--line-strong);
}

.pd-menu-action-label {
	font-family: Georgia, serif;
	font-size: 22px;
	font-weight: 700;
}

.pd-menu-action-blurb {
	color: var(--muted);
	font-size: 13px;
}

/* ── Slot list ────────────────────────────────────────────────── */

.pd-slot-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pd-slot {
	display: flex;
	align-items: stretch;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color 120ms ease;
}

.pd-slot:hover { border-color: var(--gold); }

.pd-slot-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: transparent;
	border: 0;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.pd-slot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.pd-slot-name {
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 700;
}

.pd-mode-badge {
	font: 800 10px/1 ui-monospace, monospace;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid var(--line-strong);
	background: rgba(0,0,0,0.28);
	color: var(--gold);
}
.pd-mode-badge-single      { color: var(--gold); border-color: var(--gold); }
.pd-mode-badge-matchmaking { color: var(--mystic); border-color: rgba(118, 216, 189, 0.5); }
.pd-mode-badge-private    { color: var(--fire); border-color: rgba(227, 84, 47, 0.5); }

.pd-slot-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 13px;
}

.pd-slot-class { font-weight: 700; }
.pd-slot-dot { color: var(--line-strong); }
.pd-slot-seed { font-style: italic; }

.pd-slot-played {
	margin-top: 4px;
	color: var(--muted);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
}

.pd-slot-delete {
	width: 44px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--line);
	color: var(--muted);
	font-size: 16px;
	cursor: pointer;
}
.pd-slot-delete:hover { color: var(--fire); background: rgba(227, 84, 47, 0.08); }

.pd-slot-empty {
	border-style: dashed;
}
.pd-slot-empty .pd-slot-body {
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 22px 16px;
	text-align: center;
}

/* ── Mode + class card grids ────────────────────────────────── */

.pd-mode-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.pd-mode-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 18px 16px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.pd-mode-card:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-soft); }

.pd-mode-icon {
	font-size: 26px;
	line-height: 1;
	text-shadow: 0 0 18px rgba(227, 84, 47, 0.5);
}
.pd-mode-name { font-family: Georgia, serif; font-size: 19px; font-weight: 700; }
.pd-mode-blurb { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Class carousel */

.pd-pill {
	margin-left: auto;
	padding: 8px 14px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font: 700 12px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
	cursor: pointer;
}
.pd-pill:hover { border-color: var(--gold); color: var(--gold); }

.pd-carousel {
	display: flex;
	align-items: stretch;
	gap: 6px;
}

.pd-carousel-nav {
	flex: 0 0 38px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	color: var(--gold);
	font-size: 18px;
	cursor: pointer;
}
.pd-carousel-nav:hover { border-color: var(--gold); }

.pd-carousel-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background:
		linear-gradient(180deg, rgba(227, 84, 47, 0.10), transparent 60%),
		var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}

.pd-class-portrait {
	width: 88px; height: 88px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(227, 84, 47, 0.22), rgba(13, 23, 29, 0.6));
	border: 2px solid var(--gold);
	border-radius: var(--radius-md);
	font-family: Georgia, serif;
	font-size: 44px;
	font-weight: 800;
	color: var(--gold);
	text-shadow: 0 0 18px rgba(224, 173, 89, 0.6);
}

.pd-class-portrait-barbarian { box-shadow: 0 0 24px rgba(140, 31, 30, 0.5); }
.pd-class-portrait-bard      { box-shadow: 0 0 24px rgba(118, 216, 189, 0.5); }
.pd-class-portrait-cleric    { box-shadow: 0 0 24px rgba(224, 173, 89, 0.5); }
.pd-class-portrait-fighter   { box-shadow: 0 0 24px rgba(150, 170, 200, 0.4); }
.pd-class-portrait-rogue     { box-shadow: 0 0 24px rgba(80, 200, 130, 0.45); }
.pd-class-portrait-wizard    { box-shadow: 0 0 24px rgba(140, 130, 220, 0.5); }

.pd-class-head { text-align: center; }
.pd-class-name {
	margin: 0;
	font-family: Georgia, serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--gold);
	letter-spacing: 0.02em;
}
.pd-class-skills {
	margin: 4px 0 0;
	color: var(--muted);
	font: 700 11px/1.2 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-class-blurb {
	margin: 0;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.pd-class-vitals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.pd-vital {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px;
	background: rgba(0,0,0,0.32);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-vital span {
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.pd-vital strong {
	font-family: Georgia, serif;
	font-size: 22px;
	color: var(--ink);
}

.pd-abilities {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
}
.pd-ability {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 6px 2px;
	background: rgba(0,0,0,0.28);
	border: 1px solid var(--line);
	border-radius: 4px;
}
.pd-ability-label {
	font: 800 9px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	color: var(--muted);
}
.pd-ability-score {
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--gold);
}
.pd-ability-mod {
	font: 700 10px/1 ui-monospace, monospace;
	color: var(--muted);
}

.pd-class-kit {
	padding: 10px 12px;
	background: rgba(0,0,0,0.28);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-class-kit-label {
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.pd-class-kit p {
	margin: 4px 0 0;
	color: var(--ink);
	font-size: 13px;
	line-height: 1.5;
}

.pd-carousel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
}
.pd-carousel-index {
	color: var(--muted);
	font: 700 12px/1 ui-monospace, monospace;
	letter-spacing: 0.1em;
}

/* ── Forms ──────────────────────────────────────────────────── */

.pd-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px;
}

.pd-form-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.pd-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pd-field-label { color: var(--muted); font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.pd-field-help { color: var(--muted); font-size: 12px; }

.pd-input {
	width: 100%;
	padding: 12px 14px;
	background: rgba(8, 8, 11, 0.7);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font: 500 16px/1.4 ui-rounded, system-ui, sans-serif;
}
.pd-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 173, 89, 0.15); }
.pd-input.pd-input-error { border-color: var(--fire); animation: pd-shake 0.32s ease; }

@keyframes pd-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

.pd-passkey {
	font: 800 22px/1 ui-monospace, monospace;
	letter-spacing: 0.4em;
	text-align: center;
	text-transform: uppercase;
}

.pd-passkey-display {
	font: 800 40px/1 ui-monospace, monospace;
	letter-spacing: 0.32em;
	text-align: center;
	padding: 26px 12px;
	background: var(--panel);
	border: 1px solid var(--gold);
	border-radius: var(--radius-md);
	color: var(--gold);
	text-shadow: 0 0 22px rgba(224, 173, 89, 0.42);
}

.pd-button {
	min-height: 46px;
	padding: 12px 18px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: rgba(255,255,255,0.035);
	color: var(--ink);
	font-weight: 800;
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease, transform 60ms ease;
}
.pd-button:hover { border-color: var(--gold); }
.pd-button:active { transform: translateY(1px); }
.pd-button:disabled { opacity: 0.45; cursor: not-allowed; }

.pd-button-primary {
	background: var(--gold);
	border-color: var(--gold);
	color: #1a1006;
	box-shadow: 0 4px 14px rgba(224, 173, 89, 0.18);
}
.pd-button-primary:hover { background: #f0c177; }

.pd-button-secondary { background: rgba(255, 255, 255, 0.05); }

.pd-error {
	margin: 0;
	color: #ff947d;
	font: 700 13px/1.4 ui-monospace, monospace;
	min-height: 1.2em;
}

.pd-userid {
	display: inline-block;
	padding: 6px 10px;
	background: rgba(0,0,0,0.4);
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--mystic);
	font: 700 12px/1.4 ui-monospace, monospace;
	margin-bottom: 8px;
	word-break: break-all;
}

/* ── Spinner / waiting ─────────────────────────────────────── */

.pd-spinner-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 28px 12px;
}

.pd-spinner {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid var(--line);
	border-top-color: var(--gold);
	animation: pd-spin 0.95s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }

.pd-status { color: var(--muted); margin: 0; text-align: center; }

/* ── Game header / tabs ───────────────────────────────────── */

.pd-screen-game {
	gap: 10px;
}

.pd-game-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	/* Keep the menu (save/quit) + settings buttons above the combat overlay
	   (z-index 40) so they stay visible and clickable during a battle. */
	position: relative;
	z-index: 50;
}

.pd-icon-button {
	width: 40px; height: 40px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
}
.pd-icon-button:hover { border-color: var(--gold); }

.pd-game-title-block {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: center;
}
.pd-game-title { font-family: Georgia, serif; font-size: 18px; font-weight: 700; color: var(--gold); }
.pd-game-subtitle { color: var(--muted); font: 700 11px/1 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }

/* Concentration ribbon — pinned below the character title, above the
   tabs. Shown only when local player is sustaining a concentration
   spell. Soft mystic-cyan glow so it reads as "magic state" rather
   than competing with the gold accent + fire fx in the story panel. */
.pd-concentration-ribbon {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	margin: 4px 0;
	background:
		linear-gradient(90deg, rgba(118, 216, 189, 0.10), rgba(118, 216, 189, 0.02) 70%),
		var(--panel);
	border: 1px solid rgba(118, 216, 189, 0.45);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: 13px;
	box-shadow: 0 0 12px rgba(118, 216, 189, 0.20);
	animation: pd-conc-pulse 3.2s ease-in-out infinite;
}
.pd-concentration-glyph {
	color: var(--mystic);
	font-size: 16px;
	text-shadow: 0 0 8px rgba(118, 216, 189, 0.7);
}
.pd-concentration-text strong { color: var(--mystic); font-weight: 700; }
@keyframes pd-conc-pulse {
	0%, 100% { box-shadow: 0 0 12px rgba(118, 216, 189, 0.20); }
	50%      { box-shadow: 0 0 18px rgba(118, 216, 189, 0.40); }
}

.pd-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding: 2px;
	border-bottom: 1px solid var(--line);
	scrollbar-width: none;
}
.pd-tabs::-webkit-scrollbar { display: none; }

.pd-tab {
	flex: 0 0 auto;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	color: var(--muted);
	font: 700 13px/1 ui-rounded, sans-serif;
	cursor: pointer;
}
.pd-tab:hover { color: var(--ink); }
.pd-tab-active {
	background: var(--panel);
	border-color: var(--line);
	border-bottom-color: transparent;
	color: var(--gold);
}

.pd-tab-panels {
	flex: 1;
	min-height: 50vh;
	min-width: 0;            /* let children shrink within flex parent */
	max-width: 100%;
	overflow-x: hidden;      /* never scroll the whole game horizontally */
}

.pd-panel {
	display: none;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere; /* break any unwrappable token in any child */
}
.pd-panel-active { display: flex; }

.pd-panel-empty {
	color: var(--muted);
	text-align: center;
	padding: 16px 4px;
	font-size: 14px;
}
.pd-panel-empty em { font-style: italic; opacity: 0.7; }

/* Story panel internals */

.pd-party-band {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 0 6px;
	scrollbar-width: none;
}
.pd-party-band::-webkit-scrollbar { display: none; }

.pd-party-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 64px;
	padding: 6px 4px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-size: 11px;
	color: var(--muted);
}
.pd-party-chip-self { border-color: var(--gold); color: var(--gold); }
.pd-party-chip-npc { color: var(--mystic); }
.pd-party-avatar {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, rgba(227, 84, 47, 0.18), transparent);
	border-radius: 4px;
	font-size: 18px;
	color: var(--gold);
}
.pd-party-name {
	font: 800 11px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pd-location-card {
	position: relative;
	padding: 14px 16px;
	background:
		linear-gradient(180deg, rgba(91, 18, 21, 0.4), rgba(13, 23, 29, 0.5)),
		var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4);
}
.pd-location-name { font-family: Georgia, serif; font-size: 19px; font-weight: 700; }
.pd-location-type { color: var(--muted); font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }

.pd-conn-strip {
	position: absolute;
	right: 14px; top: 14px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--muted);
	box-shadow: 0 0 10px currentColor;
}
.pd-conn-connected { background: var(--mystic); color: var(--mystic); }
.pd-conn-connecting,
.pd-conn-reconnecting { background: var(--gold); color: var(--gold); animation: pd-pulse 1.2s ease-in-out infinite; }
.pd-conn-disconnected { background: var(--fire); color: var(--fire); }
@keyframes pd-pulse { 50% { opacity: 0.4; } }

.pd-narration {
	font-family: Georgia, "Iowan Old Style", serif;
	font-size: 17px;
	line-height: 1.62;
	color: var(--ink);
	white-space: pre-wrap;
	overflow-wrap: anywhere;     /* break long unwrappable tokens */
	word-wrap: break-word;
	margin: 0 0 10px;
	padding: 4px 2px 12px;
	max-width: 100%;
	border-bottom: 1px solid var(--line);
}

.pd-deadline {
	color: var(--muted);
	font: 700 12px/1 ui-monospace, monospace;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	min-height: 1em;
}

.pd-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pd-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pd-choice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	text-align: left;
	font: 700 14px/1.4 ui-rounded, sans-serif;
	background: var(--panel);
	border: 1px solid var(--line);
	border-left-width: 4px;
	color: var(--ink);
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.pd-choice:hover:not(:disabled) { background: rgba(224, 173, 89, 0.06); }
.pd-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.pd-choice-icon {
	flex: 0 0 auto;
	width: 22px;
	font-size: 18px;
	line-height: 1;
	padding-top: 1px;
}
.pd-choice-text { flex: 1 1 auto; }
.pd-choice-combat { border-left-color: var(--fire); }
.pd-choice-social { border-left-color: var(--mystic); }
.pd-choice-stealth { border-left-color: var(--ink); }
.pd-choice-investigate { border-left-color: var(--gold); }
.pd-choice-flavor { border-left-color: var(--line-strong); }
.pd-choice-combat:hover:not(:disabled) { border-color: var(--fire); }
.pd-choice-social:hover:not(:disabled) { border-color: var(--mystic); }
.pd-choice-investigate:hover:not(:disabled) { border-color: var(--gold); }

.pd-custom-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pd-custom-form .pd-input { flex: 1 1 200px; }
.pd-custom-form .pd-button { flex: 0 0 auto; }

/* Sheet panel */

.pd-stats {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.pd-sheet-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

/* Sectioned sheet cards (Identity / Vitals / Abilities / Saves / Features) */
.pd-sheet-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	margin-bottom: 0;
}
.pd-sheet-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font: 800 11px/1 ui-rounded, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold);
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--line);
}
.pd-inspiration-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: linear-gradient(180deg, rgba(224, 173, 89, 0.30), rgba(224, 173, 89, 0.10));
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--gold);
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pd-sheet-feature-bg span:last-child { color: var(--mystic); }
.pd-sheet-card-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pd-sheet-row-wrap {
	flex-wrap: wrap;
	gap: 6px 12px;
}
.pd-sheet-prof-text {
	font: 500 12px/1.45 Georgia, serif;
	color: var(--ink);
	flex: 1 1 auto;
}
.pd-ability-save {
	border-color: var(--gold) !important;
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.10), transparent 60%),
		var(--panel);
}
.pd-ability-save-dot {
	display: inline-block;
	margin-left: 4px;
	color: var(--gold);
	font-size: 8px;
	vertical-align: 1px;
}
.pd-sheet-feature {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font: 500 12px/1.4 Georgia, serif;
	color: var(--ink);
}
.pd-sheet-traits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pd-sheet-traits-list li {
	font: 500 12px/1.4 Georgia, serif;
	color: var(--ink);
	padding-left: 14px;
	position: relative;
}
.pd-sheet-traits-list li::before {
	content: '◆';
	color: var(--gold);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 10px;
}
.pd-sheet-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pd-sheet-row strong {
	margin-left: auto;
	font: 700 16px/1 Georgia, serif;
	color: var(--ink);
}
.pd-sheet-row-bar strong { margin-left: 0; }
.pd-sheet-label {
	color: var(--muted);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-hp-bar {
	flex: 1;
	height: 8px;
	background: rgba(0,0,0,0.42);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.pd-hp-bar-sm { height: 6px; }
.pd-hp-bar-xs { height: 4px; min-width: 36px; }
.pd-hp-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--magma), var(--fire), var(--gold));
	box-shadow: 0 0 12px rgba(227, 84, 47, 0.4);
	transition: width 200ms ease;
}

/* XP bar — green-gold so it doesn't read as damage */
.pd-xp-bar {
	flex: 1;
	height: 8px;
	background: rgba(0,0,0,0.42);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.pd-xp-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--mystic), var(--gold));
	box-shadow: 0 0 10px rgba(118, 216, 189, 0.35);
	transition: width 200ms ease;
}
.pd-xp-fill-max {
	background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}
.pd-sheet-skills {
	display: flex;
	gap: 10px;
	padding: 10px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: 14px;
}

/* Map panel */

.pd-map-brief {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	background:
		linear-gradient(180deg, rgba(91, 18, 21, 0.30), rgba(13, 23, 29, 0.4)),
		var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
}
.pd-map-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pd-map-row strong {
	margin-left: auto;
	color: var(--gold);
	font: 700 14px/1 Georgia, serif;
}
.pd-map-label {
	color: var(--muted);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-map-flavor {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
	font-style: italic;
}

.pd-map-trail {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.pd-map-trail-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pd-tag-chip {
	padding: 4px 10px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font: 700 10px/1.4 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
	background: rgba(0, 0, 0, 0.3);
}
.pd-tag-chip-combat     { color: var(--fire); border-color: rgba(227, 84, 47, 0.5); }
.pd-tag-chip-exploration{ color: var(--mystic); border-color: rgba(118, 216, 189, 0.5); }
.pd-tag-chip-social     { color: var(--gold); }
.pd-tag-chip-rest       { color: var(--muted); border-color: var(--line); }
.pd-tag-chip-puzzle     { color: #b89cff; border-color: rgba(184, 156, 255, 0.4); }

/* Party / Roster panel */

.pd-roster {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pd-roster li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-roster-name { font-weight: 700; }
.pd-roster-kind {
	color: var(--muted);
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-left: 6px;
}
.pd-roster-status {
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.pd-status-active    { color: var(--mystic); }
.pd-status-inactive  { color: var(--fire); }
.pd-status-connected { color: var(--mystic); }
.pd-status-deciding  { color: var(--gold); }
.pd-status-ready     { color: var(--mystic); }
.pd-status-companion { color: var(--muted); }
.pd-status-disconnected { color: var(--fire); }

/* Bag panel */

.pd-bag {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pd-bag-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.10), transparent 60%),
		var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	font: 700 12px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-bag-count { color: var(--muted); }
.pd-bag-gold { color: var(--gold); }
.pd-bag-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-bag-item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.pd-bag-item-name { font: 700 14px/1.2 Georgia, serif; color: var(--ink); }
.pd-bag-item-type {
	color: var(--gold);
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-bag-item-detail {
	color: var(--muted);
	font: 700 11px/1.2 ui-monospace, monospace;
	letter-spacing: 0.04em;
}
.pd-bag-item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.pd-bag-action {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 8px 14px;
	font: 700 12px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Dice panel basic actions */

.pd-action-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 4px 0 8px;
}
.pd-action-button {
	min-height: 44px;
	font: 700 13px/1.2 ui-rounded, sans-serif;
	text-align: center;
}

.pd-dice-log-head {
	margin-top: 8px;
	color: var(--muted);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Dice panel */

.pd-dice-buttons {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	padding: 6px 0 12px;
}
.pd-dice-button {
	padding: 14px 0;
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.08), transparent 60%),
		var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
	color: var(--gold);
	font: 800 16px/1 Georgia, serif;
	cursor: pointer;
	transition: transform 60ms ease, border-color 120ms ease;
}
.pd-dice-button:hover { border-color: var(--gold); }
.pd-dice-button:active { transform: translateY(1px); }

.pd-dice-log {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 60vh;
	overflow-y: auto;
}
.pd-dice-row {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-dice-die {
	color: var(--muted);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-dice-value {
	font: 700 22px/1 Georgia, serif;
	color: var(--gold);
}
.pd-dice-time {
	color: var(--muted);
	font: 700 11px/1 ui-monospace, monospace;
}

.pd-empty { color: var(--muted); font-style: italic; padding: 8px 0; list-style: none; }

/* Toast */

.pd-toast {
	position: fixed;
	left: 50%; bottom: 24px;
	transform: translateX(-50%);
	padding: 10px 16px;
	background: var(--panel);
	border: 1px solid var(--gold);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-weight: 700;
	box-shadow: var(--shadow-deep);
	z-index: 100;
	max-width: 90vw;
	text-align: center;
}

/* Wider screens */
@media (min-width: 720px) {
	.pd-mode-grid { grid-template-columns: 1fr 1fr; }
	.pd-class-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
	.pd-mode-grid { grid-template-columns: 1fr 1fr 1fr; }
	.pd-class-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Story-tab skill-check roll widget ────────────────────────────── */
/* Appears during RESOLVING when the server detects an action that
   needs a d20. The Roll button gates story progression — tapping fires
   the dice, the value tumbles, then the result banner shows briefly. */

.pd-roll-area {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 14px;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.pd-roll-prompt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}

.pd-roll-prompt-text {
	font: 600 13px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
}
.pd-roll-prompt-action {
	font: 700 14px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
	font-style: italic;
}

.pd-roll-button {
	font: 800 16px/1.2 ui-rounded, sans-serif;
	background: linear-gradient(180deg, rgba(227, 84, 47, 0.92), rgba(140, 31, 30, 0.92));
	border: 1px solid var(--line-strong);
	color: var(--ink);
	padding: 14px 18px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	letter-spacing: 0.5px;
	box-shadow: var(--shadow-soft);
	transition: transform 80ms ease, box-shadow 80ms ease, background 200ms ease;
}
.pd-roll-button:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--shadow-deep);
	background: linear-gradient(180deg, rgba(227, 84, 47, 0.98), rgba(140, 31, 30, 0.96));
	border-color: var(--gold);
}
.pd-roll-button:active:not(:disabled) {
	transform: translateY(1px) scale(0.97);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	background: linear-gradient(180deg, rgba(140, 31, 30, 0.96), rgba(100, 20, 20, 0.96));
	transition: transform 40ms ease, box-shadow 40ms ease;
}
.pd-roll-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Advice row (forgo advantage / spend Inspiration) — subtle ghost buttons
   that sit above the main Roll call-to-action. Selected state shown via
   transform + gold flash so the player sees their choice registered. */
.pd-roll-prompt-advice {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 2px 0;
}
.pd-roll-advice-btn {
	display: block;
	width: 100%;
	min-height: 42px;
	padding: 10px 14px;
	font: 700 13px/1.3 ui-rounded, sans-serif;
	text-align: center;
	color: var(--gold-soft);
	background: rgba(224, 173, 89, 0.04);
	border: 1px solid rgba(224, 173, 89, 0.18);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 100ms ease, border-color 100ms ease, color 100ms ease, transform 60ms ease;
}
.pd-roll-advice-btn:hover {
	background: rgba(224, 173, 89, 0.08);
	border-color: rgba(224, 173, 89, 0.40);
	color: var(--gold);
}
.pd-roll-advice-btn:active {
	background: rgba(224, 173, 89, 0.16);
	border-color: var(--gold);
	color: var(--ink);
	transform: scale(0.98);
}
.pd-roll-advice-btn.pd-roll-advice-inspire {
	color: var(--mystic);
	background: rgba(118, 216, 189, 0.05);
	border-color: rgba(118, 216, 189, 0.20);
}
.pd-roll-advice-btn.pd-roll-advice-inspire:hover {
	background: rgba(118, 216, 189, 0.10);
	border-color: rgba(118, 216, 189, 0.45);
	color: var(--mystic);
}
.pd-roll-advice-btn.pd-roll-advice-inspire:active {
	background: rgba(118, 216, 189, 0.20);
	border-color: var(--mystic);
	color: var(--ink);
	transform: scale(0.98);
}

/* Help picker — horizontal row of ally name chips */
.pd-roll-prompt-help {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0;
}
.pd-roll-help-label {
	font: 600 12px/1.2 ui-rounded, sans-serif;
	color: var(--muted);
	flex-shrink: 0;
}
.pd-roll-help-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
}
.pd-roll-help-btn {
	min-height: 38px;
	padding: 8px 14px;
	font: 700 13px/1.2 ui-rounded, sans-serif;
	color: var(--mystic);
	background: rgba(118, 216, 189, 0.06);
	border: 1px solid rgba(118, 216, 189, 0.20);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 100ms ease, border-color 100ms ease, transform 60ms ease;
}
.pd-roll-help-btn:hover {
	background: rgba(118, 216, 189, 0.12);
	border-color: rgba(118, 216, 189, 0.45);
}
.pd-roll-help-btn:active {
	background: rgba(118, 216, 189, 0.22);
	border-color: var(--mystic);
	transform: scale(0.96);
}

.pd-roll-passive {
	font: 600 13px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
	text-align: center;
	padding: 8px 0;
	font-style: italic;
}

.pd-roll-tumble {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
}
.pd-roll-tumble-label {
	font: 600 12px/1.2 ui-rounded, sans-serif;
	color: var(--muted);
	letter-spacing: 1px;
	text-transform: uppercase;
}
.pd-roll-die {
	font: 800 38px/1 ui-rounded, sans-serif;
	color: var(--gold);
	background: var(--panel);
	border: 2px solid var(--line-strong);
	border-radius: var(--radius-md);
	padding: 14px 22px;
	min-width: 86px;
	text-align: center;
	box-shadow: var(--shadow-soft);
	font-variant-numeric: tabular-nums;
}
.pd-roll-die-tumbling { animation: pd-die-shake 0.12s ease-in-out infinite alternate; }
.pd-roll-die-settled  { color: var(--ink); border-color: var(--gold); }
.pd-roll-die-success  { color: var(--mystic); border-color: var(--mystic); }
.pd-roll-die-failure  { color: var(--fire); border-color: var(--fire); }

@keyframes pd-die-shake {
	from { transform: translateY(-1px) rotate(-1deg); }
	to   { transform: translateY(1px) rotate(1deg);  }
}

.pd-roll-banner {
	font: 700 14px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
	text-align: center;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	background: var(--panel);
	border: 1px solid var(--line);
}
.pd-roll-banner-success { border-color: var(--mystic); color: var(--mystic); }
.pd-roll-banner-failure { border-color: var(--fire); color: var(--fire); }

/* Tier 2.11 — natural-20 / natural-1 banner accents. Crit success gets
   a gold pulsing border + soft yellow-green glow; crit failure gets a
   red-orange pulse. Layered ON TOP of the success/failure base classes
   so the verdict + math text still reads in the matching color. */
.pd-roll-banner-crit.pd-roll-banner-success {
	border-color: var(--gold);
	color: var(--gold);
	box-shadow: 0 0 12px rgba(212, 175, 55, 0.6), inset 0 0 8px rgba(120, 220, 90, 0.25);
	animation: pd-crit-pulse-good 1.4s ease-out 2;
}
.pd-roll-banner-crit.pd-roll-banner-failure {
	border-color: hsl(15, 90%, 55%);
	color: hsl(15, 100%, 75%);
	box-shadow: 0 0 12px rgba(220, 70, 30, 0.65), inset 0 0 8px rgba(220, 70, 30, 0.25);
	animation: pd-crit-pulse-bad 1.4s ease-out 2;
}
@keyframes pd-crit-pulse-good {
	0%   { box-shadow: 0 0 4px rgba(212, 175, 55, 0.3),  inset 0 0 0    rgba(120, 220, 90, 0.0); }
	30%  { box-shadow: 0 0 22px rgba(212, 175, 55, 0.95), inset 0 0 14px rgba(120, 220, 90, 0.45); }
	100% { box-shadow: 0 0 12px rgba(212, 175, 55, 0.6),  inset 0 0 8px rgba(120, 220, 90, 0.25); }
}
@keyframes pd-crit-pulse-bad {
	0%   { box-shadow: 0 0 4px rgba(220, 70, 30, 0.3),  inset 0 0 0    rgba(220, 70, 30, 0.0); }
	30%  { box-shadow: 0 0 24px rgba(220, 70, 30, 1.0),  inset 0 0 14px rgba(220, 70, 30, 0.5); }
	100% { box-shadow: 0 0 12px rgba(220, 70, 30, 0.65), inset 0 0 8px  rgba(220, 70, 30, 0.25); }
}

/* ── Map-tab quest log ─────────────────────────────────────────── */
/* Main quest at top, side quests below. Each card shows the quest
   title, the goal description, and a checklist of sub-objectives. */

.pd-quest-log {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.pd-quest-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.pd-quest-section-main { border-color: var(--gold-soft); }
.pd-quest-section-side { border-color: var(--line); }

.pd-quest-heading {
	font: 800 14px/1.2 ui-rounded, sans-serif;
	color: var(--gold);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
}
.pd-quest-section-side .pd-quest-heading { color: var(--muted); }

.pd-quest-empty {
	font: 500 13px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
	font-style: italic;
	margin: 0;
}

.pd-quest-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.pd-quest-title {
	font: 700 15px/1.3 ui-rounded, sans-serif;
	color: var(--ink);
	margin: 0;
}

.pd-quest-desc {
	font: 500 13px/1.5 ui-rounded, sans-serif;
	color: var(--muted);
	margin: 0;
}

.pd-quest-progress {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 6px 0 2px;
}
.pd-quest-progress-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.pd-quest-progress-label {
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--muted);
}
.pd-quest-progress-count {
	font: 700 12px/1 ui-monospace, monospace;
	color: var(--gold);
}
.pd-quest-progress-track {
	height: 6px;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.pd-quest-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--gold-soft), var(--gold));
	transition: width 0.4s ease;
}

/* ── Background wizard step ──────────────────────────────────── */

.pd-screen-background {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 24px;
}
.pd-bg-card {
	gap: 10px;
}
.pd-bg-portrait {
	font-size: 40px;
	line-height: 1;
	text-align: center;
	padding: 12px 0 4px;
}
.pd-bg-feature {
	margin: 0;
	font: 500 12px/1.45 Georgia, serif;
	color: var(--ink);
}
.pd-bg-equipment {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pd-bg-equipment li {
	font: 500 11px/1.3 ui-monospace, monospace;
	color: var(--muted);
	padding-left: 12px;
	position: relative;
}
.pd-bg-equipment li::before {
	content: '·';
	color: var(--gold);
	position: absolute;
	left: 4px;
	top: 0;
}

.pd-quest-subs {
	list-style: none;
	padding: 0;
	margin: 4px 0 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pd-quest-sub {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font: 500 13px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
}

.pd-quest-sub-done {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-color: var(--gold-soft);
}

.pd-quest-check {
	color: var(--gold);
	font-weight: 700;
	flex: 0 0 14px;
	line-height: 1.4;
}
.pd-quest-sub-done .pd-quest-check { color: var(--mystic); }

/* ── Sheet tab — extended sections (inventory, conditions) ──────── */

.pd-sheet-section {
	margin-top: 14px;
	padding: 12px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

.pd-sheet-section-heading {
	margin: 0 0 8px;
	font: 800 12px/1.2 ui-rounded, sans-serif;
	color: var(--gold);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.pd-sheet-empty {
	margin: 0;
	font: 500 13px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
	font-style: italic;
}

.pd-sheet-inventory {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-inv-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	padding: 8px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font: 600 13px/1.3 ui-rounded, sans-serif;
}
.pd-inv-name { color: var(--ink); }
.pd-inv-meta { color: var(--muted); font-size: 12px; }

.pd-cond-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pd-cond-chip {
	display: inline-block;
	padding: 4px 10px;
	background: var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font: 700 11px/1.2 ui-rounded, sans-serif;
	color: var(--fire);
	text-transform: capitalize;
}

/* ── Party tab — full member cards ──────────────────────────────── */

.pd-party-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	margin-bottom: 10px;
	list-style: none;
}
.pd-party-card-self { border-color: var(--gold); }
.pd-party-card-npc { border-color: var(--line); opacity: 0.92; }

.pd-party-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.pd-party-card-name {
	font: 800 15px/1.2 ui-rounded, sans-serif;
	color: var(--ink);
}
.pd-party-card-you {
	font-size: 10px;
	letter-spacing: 1.5px;
	color: var(--gold);
	margin-left: 6px;
	vertical-align: middle;
}

.pd-party-card-status {
	font: 700 10px/1.2 ui-rounded, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	color: var(--muted);
}

.pd-party-card-sub {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font: 600 12px/1.3 ui-rounded, sans-serif;
	color: var(--muted);
	letter-spacing: 0.5px;
}

.pd-party-card-role {
	font: 700 10px/1 ui-rounded, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	color: var(--gold);
}
.pd-party-card-role-healer    { color: var(--mystic); border-color: var(--mystic); }
.pd-party-card-role-defender  { color: var(--gold);   border-color: var(--gold-soft); }
.pd-party-card-role-striker   { color: var(--fire);   border-color: var(--fire); }
.pd-party-card-role-scout     { color: var(--ink);    border-color: var(--line-strong); }
.pd-party-card-role-caster    { color: #b07cff;       border-color: rgba(176, 124, 255, 0.5); }
.pd-party-card-role-support   { color: var(--mystic); border-color: var(--gold-soft); }

/* Identity chips row — race · alignment · background */
.pd-party-card-identity {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 4px 0;
}
.pd-party-id-chip {
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.04em;
	padding: 3px 7px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--panel-soft, rgba(0, 0, 0, 0.20));
}
.pd-party-id-race  { color: var(--ink);    border-color: var(--line-strong); }
.pd-party-id-align { color: var(--gold);   border-color: var(--gold-soft); }
.pd-party-id-bg    { color: var(--mystic); border-color: var(--gold-soft); }
.pd-party-card-bg-feature {
	display: flex;
	gap: 6px;
	align-items: baseline;
	margin-top: 4px;
	font: 500 11px/1.35 Georgia, serif;
	color: var(--muted);
}
.pd-party-card-bg-feature-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pd-party-card-abilities {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.pd-party-card-ability {
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding: 4px 8px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font: 700 12px/1 ui-rounded, sans-serif;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.pd-party-card-ability .pd-sheet-label { font-size: 9px; }
.pd-party-card-mod {
	color: var(--gold);
	font-size: 11px;
	font-weight: 700;
}

.pd-party-card-gear {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 4px;
}

.pd-party-card-gear-row {
	display: flex;
	gap: 6px;
	align-items: baseline;
	font: 600 12px/1.3 ui-rounded, sans-serif;
	color: var(--ink);
}
.pd-party-card-gear-row .pd-sheet-label { font-size: 10px; min-width: 36px; }

/* ── Narration highlights ──────────────────────────────────────── */
/* Inline spans wrapping party / story-NPC / item names so the player
   spots important info at a glance. Subtle weight bump + color, no
   underline (avoid looking like a hyperlink). */

.pd-narration .pd-narr-self,
.pd-narration .pd-narr-ally,
.pd-narration .pd-narr-npc,
.pd-narration .pd-narr-item {
	font-weight: 700;
	/* No nowrap — long item titles ("Map of the Sunken Vault of …")
	   would otherwise force the narration column wider than the screen
	   and turn the Story tab into a horizontally-scrollable mess. */
}

.pd-narration .pd-narr-self  { color: var(--gold); }
.pd-narration .pd-narr-ally  { color: var(--mystic); }
.pd-narration .pd-narr-npc   { color: #d8a670; }            /* warm bronze */
.pd-narration .pd-narr-item  { color: var(--fire); font-style: italic; }

/* ── Kinetic word animation keyframes ──
 * Each mood gets a looping motion animation that persists while the word
 * is visible. No color coding — only motion distinguishes moods:
 *   shout    → sharp scale pulse (combat intensity)
 *   warm     → gentle up-down float (comfort / reassurance)
 *   distant  → slow horizontal drift (memory / fade)
 *   rise     → fast alert bounce (urgency / danger)
 *   tension  → subtle shudder (creep / suspense)
 *   wonder   → slow brightness shimmer (awe / magic)
 *   pain     → wobble-and-shudder (hurt / grief)
 *   weight   → slow downward settle (gravity / solemnity)
 * Each animation loops infinitely with a noticeable pause between
 * cycles so the motion feels organic, not mechanical. */
@keyframes pw-shout-in {
  0%, 80%, 100% { transform: scale(1); }
  90%           { transform: scale(1.25); }
}
@keyframes pw-warm-in {
  0%, 70%, 100% { transform: translateY(0); }
  35%           { transform: translateY(-2px); }
}
@keyframes pw-distant-in {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(3px); }
}
@keyframes pw-rise-in {
  0%, 75%, 100% { transform: scale(1); }
  50%           { transform: scale(1.15); }
  62%           { transform: scale(0.95); }
}
@keyframes pw-tension-in {
  0%, 70%, 100% { transform: translateX(0); }
  10%           { transform: translateX(-1px); }
  20%           { transform: translateX(1px); }
  30%           { transform: translateX(-1px); }
  40%           { transform: translateX(1px); }
  50%           { transform: translateX(0); }
}
@keyframes pw-wonder-in {
  0%, 70%, 100% { filter: brightness(1); }
  35%           { filter: brightness(1.3); }
}
@keyframes pw-pain-in {
  0%, 70%, 100% { transform: translateX(0) rotate(0); }
  10%           { transform: translateX(-1px) rotate(-1deg); }
  20%           { transform: translateX(1px) rotate(1deg); }
  30%           { transform: translateX(-1px) rotate(-0.5deg); }
  40%           { transform: translateX(0) rotate(0); }
}
@keyframes pw-weight-in {
  0%, 65%, 100% { transform: translateY(0); }
  80%           { transform: translateY(-1px); }
  90%           { transform: translateY(1px); }
}

.pd-narration .pw-t-shout   { animation: pw-shout-in 2.5s ease-in-out infinite; }
.pd-narration .pw-t-warm    { animation: pw-warm-in 3.5s ease-in-out infinite; }
.pd-narration .pw-t-distant { animation: pw-distant-in 4s ease-in-out infinite; }
.pd-narration .pw-t-rise    { animation: pw-rise-in 2s ease-in-out infinite; }
.pd-narration .pw-t-tension { animation: pw-tension-in 3s ease-in-out infinite; }
.pd-narration .pw-t-wonder  { animation: pw-wonder-in 3.5s ease-in-out infinite; }
.pd-narration .pw-t-pain    { animation: pw-pain-in 4s ease-in-out infinite; }
.pd-narration .pw-t-weight  { animation: pw-weight-in 4s ease-in-out infinite; }

/* ── Initiative bar (top of Story tab during combat) ───────────── */
/* Compact, scrollable horizontally so even a 6-combatant fight fits
   on a phone screen without stacking. Round indicator on the left,
   pills in initiative order to the right. */

.pd-initiative-bar {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 14px;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.pd-initiative-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pd-initiative-round {
	font: 800 11px/1 ui-rounded, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
}

.pd-initiative-list {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
}
.pd-initiative-list::-webkit-scrollbar { height: 0; }

.pd-initiative-pill {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 8px;
	min-width: 100px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font: 700 10px/1.1 ui-rounded, sans-serif;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pd-initiative-pill-top {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.pd-initiative-pill-active {
	border-color: var(--gold);
	box-shadow: 0 0 0 2px rgba(224, 173, 89, 0.30);
	transform: translateY(-1px);
}
.pd-initiative-hpbar {
	position: relative;
	height: 10px;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.pd-initiative-hpfill {
	height: 100%;
	background: linear-gradient(90deg, #4d7a3a, #6ea84a);
	transition: width 0.35s ease;
}
.pd-initiative-hpbar-mid .pd-initiative-hpfill {
	background: linear-gradient(90deg, #b08540, var(--gold));
}
.pd-initiative-hpbar-low .pd-initiative-hpfill {
	background: linear-gradient(90deg, #6e1f1e, var(--fire));
}
.pd-initiative-hp-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 9px/1 ui-monospace, monospace;
	color: var(--ink);
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.65);
	letter-spacing: 0.04em;
}
.pd-initiative-stats {
	margin-left: auto;
	color: var(--muted);
	font: 700 10px/1 ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pd-initiative-conds {
	display: inline-flex;
	gap: 3px;
	align-items: center;
}

.pd-reaction-ready {
	color: var(--gold);
	font-size: 12px;
	line-height: 1;
	text-shadow: 0 0 4px rgba(212, 175, 55, 0.55);
}

/* Tier 2.3 — reaction already burned this round. Dim + no glow so the
   contrast vs. ready ⚡ reads at a glance. */
.pd-reaction-spent {
	color: var(--muted);
	font-size: 12px;
	line-height: 1;
	opacity: 0.45;
	filter: grayscale(1);
}

/* Tier 2.8 — action-economy strip. Three small bullets per combatant,
   left-to-right: Action / Bonus / Reaction. Bright when in the bank,
   muted + 0.35 opacity when spent. Color-coded per slot so a glance
   reads "which budget did Mavis burn?" without hovering. */
.pd-econ-strip {
	display: inline-flex;
	gap: 2px;
	align-items: center;
	margin-left: 4px;
	line-height: 1;
}
.pd-econ-strip span {
	font-size: 10px;
	line-height: 1;
}
.pd-econ-action.pd-econ-ready { color: hsl(210, 90%, 70%); text-shadow: 0 0 4px rgba(60, 130, 220, 0.45); }
.pd-econ-bonus.pd-econ-ready  { color: hsl(140, 70%, 60%); text-shadow: 0 0 4px rgba(60, 200, 120, 0.45); }
.pd-econ-react.pd-econ-ready  { color: var(--gold);        text-shadow: 0 0 4px rgba(212, 175, 55, 0.55); }
.pd-econ-spent {
	color: var(--muted);
	opacity: 0.35;
	filter: grayscale(1);
	text-shadow: none;
}

/* Tier 2.10 — combat-action status chips on enemy cards + initiative
   pills. Colored per action to read at a glance: dodging = shield-blue,
   hidden = shadow-violet, dashing = wind-cyan, disengaging = muted. */
.pd-combat-status-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.pd-initiative-combat-status {
	display: inline-flex;
	gap: 3px;
	margin-left: 6px;
}
.pd-combat-status-chip {
	display: inline-block;
	padding: 1px 6px;
	font: 700 9px/1.4 ui-rounded, sans-serif;
	border-radius: 6px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.pd-status-dodging {
	color: hsl(210, 95%, 80%);
	background: rgba(40, 100, 180, 0.22);
	border: 1px solid hsl(210, 85%, 55%);
}
.pd-status-hidden {
	color: hsl(280, 90%, 80%);
	background: rgba(100, 40, 140, 0.25);
	border: 1px solid hsl(280, 75%, 55%);
}
.pd-status-dashing {
	color: hsl(180, 95%, 78%);
	background: rgba(40, 160, 180, 0.22);
	border: 1px solid hsl(180, 80%, 50%);
}
.pd-status-disengaging {
	color: var(--muted);
	background: rgba(120, 120, 120, 0.15);
	border: 1px solid rgba(180, 180, 180, 0.3);
}

.pd-initiative-pill-self    { border-color: var(--gold); color: var(--gold); }
.pd-initiative-pill-pc      { color: var(--ink); }
.pd-initiative-pill-ally    { color: var(--mystic); border-color: var(--gold-soft); }
.pd-initiative-pill-enemy   { color: var(--fire); border-color: var(--magma); background: rgba(140, 31, 30, 0.28); }
.pd-initiative-pill-downed  { opacity: 0.55; border-color: var(--fire); }
.pd-initiative-pill-dead    { opacity: 0.35; border-color: var(--magma); text-decoration: line-through; }

.pd-initiative-deathsave {
	display: inline-block;
	min-width: 18px;
	text-align: center;
	padding: 1px 6px;
	background: rgba(140, 31, 30, 0.42);
	border-radius: 8px;
	color: var(--fire);
	font: 700 10px/1 ui-rounded, sans-serif;
	letter-spacing: 0.5px;
}

.pd-initiative-name {
	font-weight: 700;
}

.pd-initiative-roll {
	display: inline-block;
	min-width: 18px;
	text-align: center;
	padding: 1px 5px;
	background: rgba(0,0,0,0.42);
	border-radius: 8px;
	color: var(--gold);
	font-size: 10px;
}

/* ── Enemy roster (below narration during combat) ──────────────── */

.pd-enemy-roster {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 14px;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.pd-enemy-roster-head {
	font: 800 10px/1 ui-rounded, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fire);
	padding: 0 0 4px;
}

.pd-enemy-card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 6px;
	padding: 6px 8px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	align-items: center;
}
.pd-enemy-card-name {
	font: 700 12px/1.2 ui-rounded, sans-serif;
	color: var(--ink);
	grid-column: 1;
}

.pd-enemy-card-downed-tag {
	display: inline-block;
	margin-left: 6px;
	font-size: 9px;
	letter-spacing: 1px;
	color: var(--fire);
	background: rgba(140, 31, 30, 0.32);
	padding: 1px 5px;
	border-radius: 6px;
	vertical-align: middle;
}

.pd-enemy-card-bar {
	height: 4px;
	background: rgba(0,0,0,0.42);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	grid-column: 1 / -1;
}

.pd-enemy-card-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--magma), var(--fire));
	transition: width 220ms ease;
}

.pd-enemy-card-stats {
	display: flex;
	gap: 12px;
	font: 700 11px/1 ui-rounded, sans-serif;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.pd-combat-cond-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

.pd-combat-cond-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	min-height: 18px;
	padding: 2px 5px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(118, 216, 189, 0.42);
	background: rgba(118, 216, 189, 0.10);
	color: var(--mystic);
	font: 800 9px/1 ui-rounded, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pd-enemy-card-downed { opacity: 0.55; }
.pd-enemy-card-downed .pd-enemy-card-fill { background: var(--muted); }

.pd-party-card-stats {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: 4px;
}

.pd-party-card-stat {
	display: flex;
	gap: 6px;
	align-items: center;
	font: 700 13px/1.3 ui-rounded, sans-serif;
}
.pd-party-card-stat .pd-sheet-label { font-size: 10px; }
.pd-party-card-stat strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.pd-party-card-hp { flex: 1; min-width: 100px; }

.pd-party-card-conds {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}

/* ── Story tab — compact HP indicator on party chips ────────────── */

.pd-party-chip-hp {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 2px;
	width: 100%;
	max-width: 60px;
	align-items: center;
}

.pd-party-chip-hp-text {
	font: 700 9px/1 ui-rounded, sans-serif;
	color: var(--muted);
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
}

.pd-party-chip-downed {
	opacity: 0.55;
	border-color: var(--fire);
}
.pd-party-chip-downed .pd-party-chip-hp-text { color: var(--fire); }

/* Condition badges on party chips — compact icon row below HP bar */
.pd-party-chip-conds {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2px;
}
.pd-cond-badge {
	font-size: 13px;
	line-height: 1;
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
	opacity: 0.9;
}
.pd-cond-exhaustion {
	font-size: 10px;
	color: var(--fire);
	background: rgba(227, 84, 47, 0.15);
	border-radius: 3px;
	padding: 0 3px;
	font-weight: 700;
}

/* ── Gender + Race wizard screens ─────────────────────────────── */

.pd-screen-gender,
.pd-screen-race {
	gap: 14px;
}

.pd-subtitle {
	font: 600 13px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
	text-align: center;
	margin: 0;
}

.pd-gender-card .pd-mode-card-meta {
	margin-top: 6px;
	font: 700 11px/1 ui-monospace, monospace;
	color: var(--gold);
	letter-spacing: 0.06em;
}

.pd-race-card {
	min-height: 360px;
}

.pd-race-portrait {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--magma), var(--panel));
	border: 2px solid var(--gold-soft);
	display: grid;
	place-items: center;
	font: 800 36px/1 Georgia, serif;
	color: var(--gold);
	margin: 0 auto 8px;
}

.pd-race-traits {
	margin: 0;
	padding: 0 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font: 500 13px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
}

.pd-race-traits li { list-style: disc; }

/* ── Sheet — race + traits sections ──────────────────────────── */

.pd-sheet-pronouns {
	display: inline-block;
	margin-left: 8px;
	font: 700 10px/1 ui-monospace, monospace;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pd-sheet-hd-die {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font: 700 10px/1.4 ui-monospace, monospace;
	color: var(--muted);
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 6px;
	letter-spacing: 0.04em;
}

.pd-trait-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-trait-item {
	padding: 8px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font: 500 13px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
}

/* ── Level-up modal ──────────────────────────────────────────── */

.pd-modal-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
	display: grid;
	place-items: center;
	z-index: 1000;
	padding: 16px;
}

.pd-modal-card {
	background: linear-gradient(180deg, rgba(227, 84, 47, 0.18), var(--panel));
	border: 2px solid var(--gold);
	border-radius: var(--radius-lg);
	padding: 24px 22px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 32px rgba(224, 173, 89, 0.25);
	max-width: 360px;
	width: 100%;
	text-align: center;
}

.pd-levelup-banner {
	font: 800 22px/1.2 Georgia, serif;
	color: var(--gold);
	letter-spacing: 1px;
	text-shadow: 0 0 18px rgba(224, 173, 89, 0.55);
	margin-bottom: 8px;
}

.pd-levelup-level {
	font: 700 16px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
	margin-bottom: 14px;
}

.pd-levelup-level strong {
	color: var(--gold);
	font-weight: 800;
	font-size: 18px;
}

.pd-levelup-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 18px;
}

.pd-levelup-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font: 700 14px/1.2 ui-rounded, sans-serif;
}

.pd-levelup-row span { color: var(--muted); }
.pd-levelup-row strong { color: var(--gold); font-variant-numeric: tabular-nums; }

.pd-levelup-ok {
	width: 100%;
}

/* ── Bag full state ──────────────────────────────────────────── */

.pd-bag-head-full .pd-bag-count {
	color: var(--fire);
}

/* ── Combat quick-fill action panel ────────────────────────── */

.pd-combat-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 14px;
	margin: 0;
	background: transparent;
	border: none;
	border-top: 1px solid var(--line);
	border-radius: 0;
}

.pd-combat-actions-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font: 800 11px/1 ui-rounded, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gold);
}

.pd-combat-actions-meta {
	font: 700 10px/1 ui-rounded, sans-serif;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: none;
}

.pd-combat-actions-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.pd-combat-action-btn {
	flex: 1 1 auto;
	min-width: calc(50% - 4px);
	padding: 10px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font: 600 13px/1.3 ui-rounded, sans-serif;
	text-align: left;
	cursor: pointer;
	transition: transform 70ms ease, border-color 70ms ease, background 70ms ease;
}
.pd-combat-action-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: var(--gold);
	background: rgba(224, 173, 89, 0.06);
}

.pd-combat-action-btn strong {
	color: var(--ink);
	font-weight: 800;
}

.pd-combat-action-sub {
	display: block;
	margin-top: 2px;
	font: 500 11px/1.2 ui-rounded, sans-serif;
	color: var(--muted);
}

.pd-combat-action-attack {
	border-color: var(--magma);
}
.pd-combat-action-attack strong { color: var(--fire); }

.pd-combat-action-cantrip strong { color: var(--mystic); }
.pd-combat-action-leveled strong { color: var(--gold); }

.pd-combat-action-item strong { color: var(--mystic); }

.pd-combat-action-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ── Prominent single-target Roll Attack button ──────────────── */

.pd-combat-roll-attack-wrap {
	display: flex;
	padding: 4px 0 8px;
}
.pd-combat-roll-attack {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 16px;
	min-height: 64px;
	background:
		linear-gradient(180deg, rgba(140, 31, 30, 0.20), transparent 70%),
		var(--panel);
	border: 2px solid var(--fire);
	border-radius: var(--radius-md);
	color: var(--ink);
	cursor: pointer;
	transition: transform 0.08s ease, background 0.12s ease;
}
.pd-combat-roll-attack:hover:not([disabled]) {
	background:
		linear-gradient(180deg, rgba(140, 31, 30, 0.35), transparent 70%),
		var(--panel);
	transform: translateY(-1px);
}
.pd-combat-roll-attack:active:not([disabled]) {
	transform: translateY(1px);
}
.pd-combat-roll-attack[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.pd-combat-roll-attack strong {
	font: 800 16px/1 ui-rounded, sans-serif;
	color: var(--fire);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.pd-combat-roll-attack-sub {
	font: 600 11px/1 ui-monospace, monospace;
	color: var(--muted);
	letter-spacing: 0.06em;
}

/* ── PC interactive turn prompt (streaming combat) ───────────── */

.pd-pc-turn {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 8px 14px;
	margin: 4px 0;
	background:
		linear-gradient(180deg, rgba(212, 168, 80, 0.12), transparent 70%),
		var(--panel);
	border: 1px solid var(--gold);
	border-radius: var(--radius-md);
	animation: pdPcTurnPulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes pdPcTurnPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 80, 0.0); }
	50%      { box-shadow: 0 0 0 4px rgba(212, 168, 80, 0.18); }
}

.pd-pc-turn-head {
	font: 800 12px/1 ui-rounded, sans-serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gold);
}

.pd-pc-turn-sub {
	font: 600 13px/1.3 ui-rounded, sans-serif;
	color: var(--ink);
}

.pd-pc-turn-roll {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 16px;
	min-height: 56px;
	background: var(--panel);
	border-radius: var(--radius-md);
	color: var(--ink);
	cursor: pointer;
	transition: transform 0.08s ease, background 0.12s ease;
}
.pd-pc-turn-roll:hover:not([disabled]) {
	transform: translateY(-1px);
}
.pd-pc-turn-roll:active:not([disabled]) {
	transform: translateY(1px);
}
.pd-pc-turn-roll[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
.pd-pc-turn-roll strong {
	font: 800 15px/1 ui-rounded, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pd-pc-turn-roll-attack {
	background:
		linear-gradient(180deg, rgba(140, 31, 30, 0.20), transparent 70%),
		var(--panel);
	border: 2px solid var(--fire);
}
.pd-pc-turn-roll-attack:hover:not([disabled]) {
	background:
		linear-gradient(180deg, rgba(140, 31, 30, 0.35), transparent 70%),
		var(--panel);
}
.pd-pc-turn-roll-attack strong { color: var(--fire); }

.pd-pc-turn-roll-damage {
	background:
		linear-gradient(180deg, rgba(212, 168, 80, 0.22), transparent 70%),
		var(--panel);
	border: 2px solid var(--gold);
}
.pd-pc-turn-roll-damage:hover:not([disabled]) {
	background:
		linear-gradient(180deg, rgba(212, 168, 80, 0.38), transparent 70%),
		var(--panel);
}
.pd-pc-turn-roll-damage strong { color: var(--gold); }

.pd-pc-turn-waiting {
	font: 700 18px/1 ui-monospace, monospace;
	color: var(--muted);
	text-align: center;
	letter-spacing: 0.4em;
	padding: 8px 0;
}

/* ── Combat log (per-swing narration feed) ───────────────────── */

/* ── Combat zone ── */
.pd-combat-zone {
	background: linear-gradient(180deg, rgba(227,84,47,0.06) 0%, rgba(224,173,89,0.04) 100%);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 0;
	margin: 8px 0;
	display: flex;
	flex-direction: column;
	max-height: 65vh;
	overflow: hidden;
}
.pd-combat-zone-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font: 800 13px/1 ui-rounded, sans-serif;
	color: var(--fire);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 14px 8px;
	border-bottom: 1px solid var(--line);
	background: rgba(227,84,47,0.04);
	position: sticky;
	top: 0;
	z-index: 1;
	flex-shrink: 0;
}
.pd-combat-zone-head sub {
	font: 600 10px/1 ui-rounded, sans-serif;
	color: var(--muted);
	letter-spacing: 0.04em;
	text-transform: none;
}
.pd-combat-zone-body {
	overflow-y: auto;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 6px 0;
}
/* Subtle inset stripes — enemy roster and combat log get a hairline bg */
.pd-combat-zone-body > .pd-enemy-roster {
	background: rgba(227,84,47,0.03);
	padding-top: 4px;
	padding-bottom: 6px;
	margin-bottom: 2px;
}
.pd-combat-zone-body > .pd-enemy-roster + .pd-initiative-bar {
	padding-top: 2px;
}
.pd-combat-zone-body > .pd-combat-log {
	background: rgba(224,173,89,0.03);
	padding-top: 6px;
	margin-top: 2px;
}
@media (max-width: 480px) {
	.pd-combat-zone { max-height: 72vh; }
	.pd-combat-zone-body { gap: 4px; padding: 4px 0; }
}
.pd-combat-log {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
	max-height: none;
	overflow: visible;
	background: transparent;
	border: none;
	border-radius: 0;
}
.pd-combat-log-head {
	font: 800 10px/1 ui-rounded, sans-serif;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--gold);
	padding: 0 14px 6px;
	border-bottom: 1px dashed var(--line);
	margin: 0;
}
.pd-combat-log-list {
	list-style: none;
	margin: 0;
	padding: 4px 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pd-combat-log-item {
	padding: 5px 8px;
	border-left: 3px solid var(--line);
	background: var(--panel);
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.pd-combat-log-prose {
	font: 500 13px/1.4 Georgia, serif;
	color: var(--ink);
}
.pd-combat-log-math {
	font: 600 10px/1.3 ui-monospace, monospace;
	color: var(--muted);
	letter-spacing: 0.02em;
	margin-top: 1px;
}
.pd-combat-log-item.pd-combat-log-party {
	border-left-color: var(--gold);
}
.pd-combat-log-item.pd-combat-log-enemy {
	border-left-color: var(--fire);
}

/* Tier 2.2 — damage modifier badge inside the prose line */
.pd-combat-log-mod {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	font: 700 9px/1.4 ui-monospace, monospace;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 6px;
	vertical-align: middle;
}
.pd-combat-log-item.pd-combat-log-mod-resistant .pd-combat-log-mod {
	color: hsl(200, 90%, 80%);
	background: rgba(40, 100, 180, 0.22);
	border: 1px solid hsl(200, 80%, 50%);
}
.pd-combat-log-item.pd-combat-log-mod-vulnerable .pd-combat-log-mod {
	color: hsl(20, 100%, 80%);
	background: rgba(200, 80, 30, 0.28);
	border: 1px solid hsl(20, 90%, 55%);
}
.pd-combat-log-item.pd-combat-log-mod-immune .pd-combat-log-mod {
	color: var(--muted);
	background: rgba(120, 120, 120, 0.18);
	border: 1px solid rgba(180, 180, 180, 0.3);
}

/* ── Persistent shop chip + shop footer ───────────────────────── */

.pd-shop-chip-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	margin: 6px 0;
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.10), transparent 70%),
		var(--panel);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
}
.pd-shop-chip-head {
	color: var(--gold);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pd-shop-chip-button {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 10px 14px;
	min-height: 48px;
	background: var(--panel-soft);
	border: 1px solid var(--gold);
	border-radius: var(--radius-sm);
	color: var(--ink);
	cursor: pointer;
	text-align: left;
}
.pd-shop-chip-button strong {
	font: 700 14px/1.1 Georgia, serif;
	color: var(--ink);
}
.pd-shop-chip-sub {
	font: 600 11px/1 ui-monospace, monospace;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.pd-shop-chip-button:hover {
	background: rgba(224, 173, 89, 0.10);
}

.pd-shop-footer {
	display: flex;
	gap: 8px;
	padding: 12px 0 4px;
}
.pd-shop-footer .pd-button {
	flex: 1;
}

/* ── Key items section in Bag tab ──────────────────────────────── */

.pd-bag-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 12px;
	margin-top: 4px;
	color: var(--gold);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	border-bottom: 1px dashed var(--line);
	list-style: none;
}
.pd-bag-section-head:first-child { margin-top: 0; }
.pd-bag-section-sub {
	color: var(--muted);
	font: 500 10px/1 ui-monospace, monospace;
	letter-spacing: 0.04em;
	text-transform: none;
}

/* ── Spells tab ──────────────────────────────────────────────────
   Mirrors the Bag-tab structure: header strip (class + slot pips),
   then a section per spell level. Each row has a Cast button that
   prefills the custom-action input. Slot pips disabled state when
   the player is mid-combat with no leveled slots remaining. */
.pd-spells {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pd-spells-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}
.pd-spells-title {
	font-family: Georgia, serif;
	font-size: 17px;
	font-weight: 700;
}
.pd-spells-sub {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font: 600 12px/1.3 ui-monospace, monospace;
	letter-spacing: 0.03em;
	flex-wrap: wrap;
}
.pd-spells-dot { color: var(--line-strong); }
.pd-spells-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pd-spells-section-head {
	color: var(--gold);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--line);
}
.pd-spell-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.pd-spell-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.pd-spell-name {
	font-family: Georgia, serif;
	font-size: 15px;
	font-weight: 700;
}
.pd-spell-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.4;
}
.pd-spell-kind {
	font: 600 10px/1.4 ui-monospace, monospace;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mystic);
}
.pd-spell-desc { flex: 1; }
.pd-spell-cast {
	font: 700 12px/1 ui-rounded, sans-serif;
	letter-spacing: 0.04em;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	background: var(--gold);
	color: #2a1607;
	border: 1px solid var(--gold);
	cursor: pointer;
	white-space: nowrap;
	transition: filter 100ms ease, transform 80ms ease;
}
.pd-spell-cast:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pd-spell-cast:active { transform: translateY(0); }
.pd-spell-cast-disabled,
.pd-spell-cast:disabled {
	background: var(--panel);
	color: var(--muted);
	border-color: var(--line);
	cursor: not-allowed;
	transform: none;
}
.pd-bag-key-item {
	border-color: var(--gold);
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.08), transparent 70%),
		var(--panel);
}
.pd-bag-key-item .pd-bag-item-name {
	color: var(--gold);
}

/* ── Rarity badges + colored item names ─────────────────────── */

.pd-rarity-common      { color: var(--ink); }
.pd-rarity-uncommon    { color: #4ade80; }   /* mossy green */
.pd-rarity-rare        { color: #6aa9ff; }   /* clear blue */
.pd-rarity-very-rare   { color: #b07cff; }   /* arcane violet */
.pd-rarity-legendary   { color: #ffb347; text-shadow: 0 0 8px rgba(255, 179, 71, 0.55); }

.pd-rarity-chip {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	font: 800 9px/1.4 ui-rounded, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 1px solid currentColor;
	background: rgba(0, 0, 0, 0.42);
}

/* Loot toast styled by rarity — overrides the default toast color. */
.pd-toast-loot.pd-rarity-uncommon  { border-color: #4ade80; color: #4ade80; }
.pd-toast-loot.pd-rarity-rare      { border-color: #6aa9ff; color: #6aa9ff; }
.pd-toast-loot.pd-rarity-very-rare { border-color: #b07cff; color: #b07cff; }
.pd-toast-loot.pd-rarity-legendary {
	border-color: #ffb347;
	color: #ffb347;
	box-shadow: 0 0 24px rgba(255, 179, 71, 0.45);
}

/* ── Equip-or-swap modal ────────────────────────────────────── */

.pd-swap-card {
	max-width: 420px;
	text-align: left;
}

.pd-swap-banner {
	font: 800 18px/1.2 Georgia, serif;
	color: var(--fire);
	text-align: center;
	margin-bottom: 10px;
}

.pd-swap-prompt {
	font: 500 14px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
	margin: 0 0 12px;
}
.pd-swap-prompt strong { color: var(--ink); }

.pd-swap-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 280px;
	overflow-y: auto;
}

.pd-swap-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 10px;
	padding: 8px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.pd-swap-item-name { grid-column: 1 / 2; font-weight: 700; }
.pd-swap-item-meta { grid-column: 1 / 2; grid-row: 2; font-size: 11px; color: var(--muted); }
.pd-swap-discard   { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; }

.pd-swap-skip {
	width: 100%;
}

/* ── Equipped chip on bag items ─────────────────────────────────── */

.pd-equipped-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font: 700 9px/1 ui-rounded, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bg);
	background: var(--gold);
	border-radius: 999px;
	vertical-align: 2px;
}

/* Tier 2.4 — magic item attunement + identify chips */
.pd-attune-chip,
.pd-identify-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font: 700 9px/1.4 ui-rounded, sans-serif;
	letter-spacing: 0.05em;
	border-radius: 6px;
	vertical-align: middle;
}
.pd-attune-chip-on {
	color: var(--bg);
	background: var(--gold);
	box-shadow: 0 0 6px rgba(212, 175, 55, 0.45);
}
.pd-attune-chip-off {
	color: var(--gold);
	background: rgba(212, 175, 55, 0.12);
	border: 1px solid rgba(212, 175, 55, 0.4);
}
.pd-identify-chip {
	color: hsl(280, 80%, 80%);
	background: rgba(120, 40, 160, 0.22);
	border: 1px solid hsl(280, 70%, 55%);
}
.pd-bag-att {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	font: 700 10px/1.4 ui-rounded, sans-serif;
	color: var(--bg);
	background: var(--gold);
	border-radius: 6px;
	letter-spacing: 0.05em;
}

/* ── In-combat weapon picker row ────────────────────────────────── */

.pd-combat-weapon-row {
	gap: 6px;
	flex-wrap: wrap;
	align-items: center;
}

.pd-combat-weapon-label {
	font: 600 11px/1 ui-rounded, sans-serif;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-right: 4px;
}

.pd-combat-weapon-btn {
	padding: 4px 10px;
	font: 600 12px/1.2 ui-rounded, sans-serif;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.pd-combat-weapon-btn-active {
	background: var(--gold-soft);
	color: var(--bg);
	border-color: var(--gold);
}

/* ── Quest-completed celebration card ───────────────────────────── */

.pd-quest-celebrate-card {
	max-width: 460px;
	text-align: center;
	padding: 22px 24px;
	background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
	border: 2px solid var(--gold);
	box-shadow: 0 0 32px rgba(204, 167, 99, 0.35);
}

.pd-quest-celebrate-banner {
	font: 800 14px/1.2 ui-rounded, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 8px;
}

.pd-quest-celebrate-card .pd-quest-title {
	font: 800 22px/1.2 Georgia, serif;
	color: var(--ink);
	margin-bottom: 12px;
}

.pd-quest-celebrate-xp {
	font: 700 18px/1 ui-rounded, sans-serif;
	color: var(--bronze);
	margin-bottom: 14px;
}

.pd-quest-celebrate-levelups {
	margin: 0 0 14px;
}

.pd-quest-celebrate-levelup {
	font: 600 13px/1.4 ui-rounded, sans-serif;
	color: var(--gold);
	margin: 4px 0;
}

.pd-quest-celebrate-rewards-head {
	font: 700 11px/1 ui-rounded, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}

.pd-quest-celebrate-rewards {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pd-quest-celebrate-rewards li {
	font: 600 13px/1.3 ui-rounded, sans-serif;
	padding: 4px 8px;
	background: var(--panel);
	border-radius: var(--radius-sm);
}

.pd-quest-celebrate-reward-rarity {
	font-size: 11px;
	color: var(--muted);
}

.pd-quest-celebrate-ok {
	width: 100%;
}

/* ── Shop overlay ──────────────────────────────────────────────── */

.pd-shop-scrim {
	align-items: flex-start;
	padding-top: 20px;
}

.pd-shop-card {
	width: min(640px, calc(100vw - 24px));
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	padding: 16px 18px;
}

.pd-shop-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
}

.pd-shop-title {
	font: 800 18px/1.2 Georgia, serif;
	color: var(--ink);
}

.pd-shop-gold {
	font: 700 16px/1 ui-rounded, sans-serif;
	color: var(--gold);
}

.pd-shop-line {
	font: italic 500 13px/1.4 Georgia, serif;
	color: var(--muted);
	margin-bottom: 12px;
	padding: 8px 10px;
	border-left: 3px solid var(--gold-soft);
	background: var(--panel);
}

.pd-shop-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	flex: 1;
	overflow: hidden;
	margin-bottom: 12px;
}

@media (max-width: 600px) {
	.pd-shop-cols {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
}

.pd-shop-col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.pd-shop-col-head {
	font: 800 11px/1 ui-rounded, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}

.pd-shop-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 50vh;
}

.pd-shop-slot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.pd-shop-slot-disabled {
	opacity: 0.55;
}

.pd-shop-slot-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.pd-shop-slot-info strong {
	font: 700 13px/1.2 ui-rounded, sans-serif;
}

.pd-shop-slot-detail {
	font: 500 11px/1.3 ui-rounded, sans-serif;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.pd-shop-slot-stock {
	font: 500 10px/1 ui-rounded, sans-serif;
	color: var(--muted);
	margin-top: 2px;
}

.pd-shop-slot-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin-left: 8px;
}

.pd-shop-slot-price {
	font: 700 12px/1 ui-rounded, sans-serif;
	color: var(--gold);
}

.pd-shop-buy, .pd-shop-sell {
	font: 700 11px/1 ui-rounded, sans-serif;
	padding: 4px 10px;
	min-height: 0;
}

.pd-shop-close {
	width: 100%;
}

/* ── Bag item button group (Action + Drop) ──────────────────────── */

.pd-bag-item-buttons {
	display: flex;
	gap: 6px;
	align-items: center;
}

.pd-bag-discard {
	font: 700 11px/1 ui-rounded, sans-serif;
	padding: 4px 10px;
	min-height: 0;
	color: var(--muted);
	background: transparent;
	border: 1px solid var(--line);
}

.pd-bag-discard:not([disabled]):hover {
	color: var(--ink);
	border-color: var(--fire);
	background: rgba(160, 60, 30, 0.12);
}

.pd-button-ghost {
	background: transparent;
	border: 1px solid var(--line);
}

/* ── Attack chips (narrative state combat triggers) ─────────────── */

.pd-attack-chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
	padding: 10px 12px;
	background: linear-gradient(180deg, rgba(160, 60, 30, 0.10) 0%, rgba(160, 60, 30, 0.04) 100%);
	border: 1px solid rgba(160, 60, 30, 0.35);
	border-radius: var(--radius-sm);
}

.pd-attack-chips-head {
	font: 800 11px/1 ui-rounded, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fire);
}

.pd-attack-chips-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.pd-attack-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 8px 12px;
	font: 700 13px/1.2 ui-rounded, sans-serif;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--fire);
	border-radius: var(--radius-sm);
	cursor: pointer;
	min-height: 0;
	flex: 0 1 auto;
}

.pd-attack-chip:not(:disabled):hover,
.pd-attack-chip:not(:disabled):focus {
	background: rgba(160, 60, 30, 0.18);
}

.pd-attack-chip:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pd-attack-chip-sub {
	font: 500 10px/1 ui-rounded, sans-serif;
	color: var(--muted);
	margin-top: 2px;
}

.pd-attack-begin {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	font: 800 12px/1 ui-rounded, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bg);
	background: var(--fire);
	border: 1px solid var(--fire);
	border-radius: var(--radius-sm);
	cursor: pointer;
	min-height: 0;
}

.pd-attack-begin:not(:disabled):hover,
.pd-attack-begin:not(:disabled):focus {
	filter: brightness(1.15);
}

.pd-attack-begin:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── Reaction prompt overlay (BG3-style "Ask") ──────────────────── */

.pd-reaction-scrim {
	align-items: flex-start;
	padding-top: 24px;
}

.pd-reaction-card {
	max-width: 460px;
	padding: 18px 20px;
	background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
	border: 2px solid var(--gold);
	box-shadow: 0 0 28px rgba(204, 167, 99, 0.30);
	text-align: left;
}

.pd-reaction-banner {
	font: 800 12px/1 ui-rounded, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 8px;
}

.pd-reaction-label {
	font: 800 18px/1.2 Georgia, serif;
	color: var(--ink);
	margin-bottom: 10px;
}

.pd-reaction-prompt {
	font: 500 14px/1.4 ui-rounded, sans-serif;
	color: var(--muted);
	margin-bottom: 12px;
}

.pd-reaction-ctx {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
	padding: 8px 10px;
	background: var(--panel);
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
}

.pd-reaction-ctx-row {
	display: flex;
	justify-content: space-between;
	font: 500 12px/1 ui-rounded, sans-serif;
}

.pd-reaction-ctx-row span {
	color: var(--muted);
}

.pd-reaction-ctx-row strong {
	color: var(--ink);
}

.pd-reaction-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}

.pd-reaction-no {
	background: var(--panel);
	border: 1px solid var(--line);
}

.pd-reaction-pref {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font: 500 11px/1 ui-rounded, sans-serif;
	color: var(--muted);
}

.pd-reaction-pref-select {
	padding: 6px 8px;
	font: 500 13px/1 ui-rounded, sans-serif;
	color: var(--ink);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

/* ── Class feature chips (Sheet tab) ────────────────────────────── */

.pd-feat-chips {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-feat-chip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.pd-feat-icon {
	font-size: 18px;
	width: 28px;
	text-align: center;
}

.pd-feat-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pd-feat-label {
	font: 700 13px/1.2 ui-rounded, sans-serif;
	color: var(--ink);
}

.pd-feat-counter {
	font: 600 12px/1 ui-rounded, sans-serif;
	color: var(--gold);
}

.pd-feat-rest {
	font: 500 10px/1 ui-rounded, sans-serif;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ── Menu "About" link + About screen ───────────────────────────── */

.pd-menu-about {
	margin-top: 14px;
	align-self: center;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--muted);
	font: 600 11px/1 ui-monospace, monospace;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	cursor: pointer;
}
.pd-menu-about:hover {
	color: var(--ink);
	border-color: var(--line-strong);
}

.pd-screen-about {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px 32px;
}
.pd-about-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px 2px 24px;
	color: var(--ink);
}
.pd-about-lede {
	font: 500 14px/1.45 Georgia, serif;
	color: var(--ink);
	margin: 4px 0 8px;
}
.pd-about-h {
	margin: 8px 0 0;
	color: var(--gold);
	font: 700 11px/1 ui-monospace, monospace;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.pd-about-p {
	margin: 0;
	font: 400 13px/1.5 Georgia, serif;
	color: var(--ink);
}
.pd-about-url {
	font: 600 12px/1.4 ui-monospace, monospace;
	color: var(--gold);
	word-break: break-all;
}

/* ── Alignment wizard step ───────────────────────────────────────── */

.pd-screen-alignment {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 24px;
}
.pd-alignment-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 4px 0 12px;
}
.pd-alignment-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 8px;
	min-height: 92px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.pd-alignment-tile:hover {
	border-color: var(--line-strong);
}
.pd-alignment-tile.pd-alignment-selected {
	border-color: var(--gold);
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.10), transparent 70%),
		var(--panel);
}
.pd-alignment-name {
	font: 700 12px/1.1 Georgia, serif;
	color: var(--ink);
}
.pd-alignment-short {
	font: 700 10px/1 ui-monospace, monospace;
	color: var(--gold);
	letter-spacing: 0.08em;
}
.pd-alignment-blurb {
	font: 500 10px/1.3 ui-monospace, monospace;
	color: var(--muted);
}

/* ── Skills wizard step ─────────────────────────────────────────── */

.pd-screen-skills {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 16px 24px;
}
.pd-skill-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin: 4px 0 12px;
}
.pd-skill-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 10px 12px;
	min-height: 52px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.pd-skill-tile.pd-skill-selected {
	border-color: var(--gold);
	background:
		linear-gradient(180deg, rgba(224, 173, 89, 0.10), transparent 70%),
		var(--panel);
}
.pd-skill-name {
	font: 700 12px/1.1 Georgia, serif;
	color: var(--ink);
}
.pd-skill-ability {
	font: 700 10px/1 ui-monospace, monospace;
	color: var(--gold);
	letter-spacing: 0.08em;
}
.pd-skill-counter {
	flex: 1;
	font: 700 11px/1 ui-monospace, monospace;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── HTML `hidden` attribute fix ───────────────────────────────────
 * The Story tab's combat/roll/action panels all use `display: flex`
 * which overrides the UA stylesheet's `[hidden] { display: none }`.
 * Result: empty placeholder bars under the narration even when those
 * panels have no content. Force-override here so [hidden] wins.
 * This single rule eliminates the persistent unlabeled panels JJ
 * reported between the narration and the action options. */
[hidden] { display: none !important; }

/* ────────────────────────────────────────────────────────────────
 * Combat FX library — HP-change flashes, hit/miss feedback, spell
 * casts, dice rolls. All CSS-only (transform + opacity) so they
 * run at 60fps in WebView without paint pressure. Each animation
 * is short (≤700ms) so combat rounds feel snappy.
 * ─────────────────────────────────────────────────────────────── */

/* HP-change card flashes — applied via JS for ~700ms. */
@keyframes pd-fx-hit-flash {
	0%   { background-color: var(--panel); box-shadow: 0 0 0 0 rgba(140, 31, 30, 0); }
	18%  { background-color: rgba(140, 31, 30, 0.55); box-shadow: 0 0 0 4px rgba(140, 31, 30, 0.40); transform: translateX(-2px); }
	30%  { transform: translateX(2px); }
	42%  { transform: translateX(-1px); }
	100% { background-color: var(--panel); box-shadow: 0 0 0 0 rgba(140, 31, 30, 0); transform: translateX(0); }
}
@keyframes pd-fx-heal-flash {
	0%   { background-color: var(--panel); box-shadow: 0 0 0 0 rgba(110, 168, 74, 0); }
	18%  { background-color: rgba(110, 168, 74, 0.30); box-shadow: 0 0 0 4px rgba(110, 168, 74, 0.40); }
	100% { background-color: var(--panel); box-shadow: 0 0 0 0 rgba(110, 168, 74, 0); }
}
@keyframes pd-fx-killed-flash {
	0%   { background-color: var(--panel); }
	24%  { background-color: rgba(110, 26, 26, 0.85); }
	100% { background-color: var(--panel); opacity: 0.45; filter: grayscale(0.55); }
}
@keyframes pd-fx-downed-flash {
	0%   { background-color: var(--panel); }
	30%  { background-color: rgba(140, 31, 30, 0.40); }
	100% { background-color: var(--panel); opacity: 0.60; }
}
.pd-fx-hit    { animation: pd-fx-hit-flash    600ms ease-out 1; }
.pd-fx-heal   { animation: pd-fx-heal-flash   620ms ease-out 1; }
.pd-fx-killed { animation: pd-fx-killed-flash 700ms ease-out 1; animation-fill-mode: forwards; }
.pd-fx-downed { animation: pd-fx-downed-flash 680ms ease-out 1; animation-fill-mode: forwards; }

/* Floating delta popup ("-7" / "+5"). Positioned over the target. */
.pd-fx-popup {
	position: absolute;
	top: -4px;
	right: 6px;
	font: 800 13px/1 ui-rounded, sans-serif;
	letter-spacing: 0.04em;
	pointer-events: none;
	z-index: 10;
	animation: pd-fx-popup-rise 900ms ease-out forwards;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.85);
}
.pd-fx-popup-damage { color: var(--fire); }
.pd-fx-popup-heal   { color: #6ea84a; }
@keyframes pd-fx-popup-rise {
	0%   { transform: translateY(0) scale(0.9); opacity: 0; }
	18%  { transform: translateY(-4px) scale(1.15); opacity: 1; }
	100% { transform: translateY(-22px) scale(0.95); opacity: 0; }
}

/* Make pills + cards positioning-aware so the popup anchors. */
.pd-initiative-pill, .pd-enemy-card { position: relative; }

/* ────────────────────────────────────────────────────────────────
 * Dice roll animations — d4 / d6 / d8 / d10 / d12 / d20 / d100.
 * Shape-correct silhouettes via clip-path. Tumble sequence flickers
 * the number for 500ms then settles on the rolled value with a
 * subtle bounce. Reusable across in-combat and out-of-combat rolls.
 * ─────────────────────────────────────────────────────────────── */

.pd-die {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: linear-gradient(180deg, var(--panel-soft), var(--panel));
	border: 2px solid var(--gold);
	color: var(--ink);
	font: 800 18px/1 ui-rounded, sans-serif;
	font-variant-numeric: tabular-nums;
	position: relative;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.pd-die-tumbling { animation: pd-die-tumble 480ms steps(8) infinite; }
.pd-die-settled  { animation: pd-die-settle 220ms ease-out 1; }
.pd-die-success  { border-color: #6ea84a; box-shadow: 0 0 12px rgba(110, 168, 74, 0.55); }
.pd-die-failure  { border-color: var(--fire); box-shadow: 0 0 12px rgba(140, 31, 30, 0.55); }
.pd-die-crit     { border-color: #f1c655; box-shadow: 0 0 18px rgba(241, 198, 85, 0.85); animation: pd-die-crit-pulse 700ms ease-out infinite; }
@keyframes pd-die-tumble {
	0%   { transform: rotate(0deg) scale(1); }
	25%  { transform: rotate(45deg) scale(1.06); }
	50%  { transform: rotate(-30deg) scale(0.96); }
	75%  { transform: rotate(60deg) scale(1.04); }
	100% { transform: rotate(0deg) scale(1); }
}
@keyframes pd-die-settle {
	0%   { transform: scale(1.20); }
	60%  { transform: scale(0.92); }
	100% { transform: scale(1); }
}
@keyframes pd-die-crit-pulse {
	0%, 100% { box-shadow: 0 0 18px rgba(241, 198, 85, 0.85); }
	50%      { box-shadow: 0 0 26px rgba(241, 198, 85, 1); }
}

/* Per-die shapes via clip-path. d20 uses the full hex; d4 a triangle. */
.pd-die-d4   { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); border-radius: 0; }
.pd-die-d6   { border-radius: 8px; }
.pd-die-d8   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); border-radius: 0; }
.pd-die-d10  { clip-path: polygon(50% 0%, 95% 35%, 80% 95%, 20% 95%, 5% 35%); border-radius: 0; }
.pd-die-d12  { clip-path: polygon(25% 0%, 75% 0%, 100% 35%, 87% 87%, 50% 100%, 13% 87%, 0% 35%); border-radius: 0; }
.pd-die-d20  { clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); border-radius: 0; }
.pd-die-d100 { border-radius: 50%; }

.pd-die-roll-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
}
.pd-die-roll-label {
	font: 700 10px/1 ui-monospace, monospace;
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Canvas-backed 3D polyhedron die — internal 80×80 pixel buffer scaled
 * up via image-rendering: pixelated for the 16-bit look. Sized smaller
 * in the combat strip (cramped) and larger in the interactive roll
 * area (focal point). */
.pd-poly-die-canvas {
	width: 80px;
	height: 80px;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	display: block;
}
.pd-combat-dice .pd-poly-die-canvas {
	width: 64px;
	height: 64px;
}
.pd-roll-tumble .pd-poly-die-canvas {
	width: 96px;
	height: 96px;
}

/* Two-die layout for advantage / disadvantage rolls. The kept die
 * keeps its rainbow / outcome glow; the discarded one gets dimmed +
 * desaturated via .pd-poly-die-discarded so the player can see at a
 * glance which die counted. */
.pd-roll-tumble-dice {
	display: flex;
	flex-direction: row;
	gap: 14px;
	align-items: flex-end;
	justify-content: center;
}
.pd-die-roll-row {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: flex-end;
	justify-content: center;
}
.pd-poly-die-discarded {
	opacity: 0.4;
	filter: grayscale(1);
}

/* Combat dice strip — sits above the combat log during active rounds.
 * Each event's d20 (attack) and damage die get rendered here in
 * sequence; the strip clears between events so the player follows
 * one swing at a time. */
.pd-combat-dice {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding: 12px 8px;
	margin: 6px 0;
	min-height: 78px;
	background: var(--panel-soft);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md);
}

/* ────────────────────────────────────────────────────────────────
 * Spell / cantrip / heal / divine FX — applied as flash classes
 * on caster + target combatant cards. Color-coded by school.
 * ─────────────────────────────────────────────────────────────── */

@keyframes pd-fx-cast-arcane {
	0%   { box-shadow: 0 0 0 0 rgba(110, 80, 200, 0); }
	30%  { box-shadow: 0 0 0 6px rgba(110, 80, 200, 0.65); }
	100% { box-shadow: 0 0 0 0 rgba(110, 80, 200, 0); }
}
@keyframes pd-fx-cast-divine {
	0%   { box-shadow: 0 0 0 0 rgba(241, 198, 85, 0); }
	30%  { box-shadow: 0 0 0 6px rgba(241, 198, 85, 0.75); }
	100% { box-shadow: 0 0 0 0 rgba(241, 198, 85, 0); }
}
@keyframes pd-fx-cast-heal {
	0%   { box-shadow: 0 0 0 0 rgba(110, 168, 74, 0); }
	30%  { box-shadow: 0 0 0 6px rgba(110, 168, 74, 0.65); }
	100% { box-shadow: 0 0 0 0 rgba(110, 168, 74, 0); }
}
@keyframes pd-fx-cast-cantrip {
	0%   { box-shadow: 0 0 0 0 rgba(180, 160, 100, 0); }
	30%  { box-shadow: 0 0 0 3px rgba(180, 160, 100, 0.50); }
	100% { box-shadow: 0 0 0 0 rgba(180, 160, 100, 0); }
}
.pd-fx-arcane  { animation: pd-fx-cast-arcane  650ms ease-out 1; }
.pd-fx-divine  { animation: pd-fx-cast-divine  650ms ease-out 1; }
.pd-fx-heal-cast { animation: pd-fx-cast-heal  650ms ease-out 1; }
.pd-fx-cantrip { animation: pd-fx-cast-cantrip 480ms ease-out 1; }

/* Critical hit screen-edge flash — applied to combat panel briefly. */
@keyframes pd-fx-crit-edge {
	0%   { box-shadow: inset 0 0 0 0 rgba(241, 198, 85, 0); }
	25%  { box-shadow: inset 0 0 24px 4px rgba(241, 198, 85, 0.75); }
	100% { box-shadow: inset 0 0 0 0 rgba(241, 198, 85, 0); }
}
.pd-fx-crit-edge { animation: pd-fx-crit-edge 800ms ease-out 1; }

/* ── SRD group check panel (2026-06-10) ────────────────────────────── */
/* Per-member rolls + group verdict, beneath the roll banner. Pass rows
   tint mystic-green; fail rows tint ember. The panel border follows the
   GROUP outcome since that's what drives the narration + XP. */

.pd-group-check {
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	background: var(--panel);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pd-group-check-pass { border-color: var(--mystic); }
.pd-group-check-fail { border-color: var(--fire); }
.pd-group-check-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font: 700 11px/1.4 ui-rounded, sans-serif;
	color: var(--ink);
	letter-spacing: 0.03em;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--line);
}
.pd-group-check-verdict { color: var(--muted); font-weight: 600; }
.pd-group-check-pass .pd-group-check-verdict { color: var(--mystic); }
.pd-group-check-fail .pd-group-check-verdict { color: var(--fire); }
.pd-group-check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 11px/1.5 ui-monospace, monospace;
}
.pd-gc-name { flex: 1; color: var(--ink); }
.pd-gc-math { color: var(--muted); }
.pd-gc-mark { width: 16px; text-align: center; font-weight: 800; }
.pd-group-check-row.pd-gc-pass .pd-gc-mark { color: var(--mystic); }
.pd-group-check-row.pd-gc-fail .pd-gc-mark { color: var(--fire); }
.pd-group-check-row.pd-gc-fail { opacity: 0.75; }

/* ── Crit feel: toasts + screen shake (2026-06-10) ─────────────────── */
/* Skill-check crits get a centered burst toast; combat crits shake the
   whole viewport — aggressive ~1s for a crit hit, slower droop for a
   nat-1 swing. Animations live on <body> so every surface moves. */

.pd-crit-toast {
	position: fixed;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	padding: 12px 22px;
	border-radius: 12px;
	font: 900 18px/1.2 ui-rounded, sans-serif;
	letter-spacing: 0.08em;
	pointer-events: none;
	animation: pd-crit-toast-pop 2.6s ease-out forwards;
}
.pd-crit-toast-success {
	color: #1c1607;
	background: linear-gradient(135deg, hsl(48, 95%, 62%), hsl(40, 90%, 50%));
	box-shadow: 0 0 24px rgba(232, 188, 60, 0.85), 0 0 60px rgba(120, 220, 90, 0.35);
}
.pd-crit-toast-failure {
	color: #fff;
	background: linear-gradient(135deg, hsl(8, 85%, 45%), hsl(355, 80%, 32%));
	box-shadow: 0 0 24px rgba(220, 60, 30, 0.85), 0 0 60px rgba(220, 60, 30, 0.3);
}
@keyframes pd-crit-toast-pop {
	0%   { opacity: 0; transform: translateX(-50%) scale(0.4); }
	12%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
	20%  { transform: translateX(-50%) scale(1.0); }
	80%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-14px); }
}

/* Aggressive crit-hit shake: high frequency, ~1s. */
body.pd-shake-hard {
	animation: pd-shake-hard 1s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes pd-shake-hard {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	10% { transform: translate(-9px, 4px) rotate(-0.6deg); }
	20% { transform: translate(10px, -5px) rotate(0.6deg); }
	30% { transform: translate(-11px, 2px) rotate(-0.5deg); }
	40% { transform: translate(9px, 5px) rotate(0.5deg); }
	50% { transform: translate(-8px, -4px) rotate(-0.4deg); }
	60% { transform: translate(7px, 3px) rotate(0.4deg); }
	70% { transform: translate(-5px, -2px) rotate(-0.25deg); }
	80% { transform: translate(4px, 2px) rotate(0.2deg); }
	90% { transform: translate(-2px, -1px) rotate(-0.1deg); }
}

/* Slow crit-miss shake: low frequency droop, ~1.4s — reads as a stumble. */
body.pd-shake-slow {
	animation: pd-shake-slow 1.4s ease-in-out;
}
@keyframes pd-shake-slow {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	18% { transform: translate(-6px, 3px) rotate(-0.35deg); }
	40% { transform: translate(5px, 6px) rotate(0.3deg); }
	62% { transform: translate(-4px, 8px) rotate(-0.2deg); }
	82% { transform: translate(2px, 4px) rotate(0.1deg); }
}

/* ── Post-combat loot screen (2026-06-10) ──────────────────────────── */

.pd-loot-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(8, 6, 6, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.pd-loot-card {
	width: min(440px, 94vw);
	max-height: 80vh;
	overflow-y: auto;
	background: var(--panel);
	border: 1px solid var(--gold-soft);
	border-radius: var(--radius-md);
	box-shadow: 0 0 40px rgba(212, 175, 55, 0.18), var(--shadow-soft);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
}
.pd-loot-head {
	font: 800 16px/1.2 ui-rounded, sans-serif;
	color: var(--gold);
	letter-spacing: 0.05em;
	text-align: center;
}
.pd-loot-coins {
	text-align: center;
	font: 700 13px/1.4 ui-rounded, sans-serif;
	color: var(--gold);
	background: rgba(212, 175, 55, 0.08);
	border: 1px solid rgba(212, 175, 55, 0.3);
	border-radius: 8px;
	padding: 6px;
}
.pd-loot-coins-note { color: var(--muted); font-weight: 500; font-size: 11px; }
.pd-loot-rows { display: flex; flex-direction: column; gap: 8px; }
.pd-loot-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--line);
	border-radius: 8px;
}
.pd-loot-row-info { display: flex; flex-direction: column; gap: 2px; }
.pd-loot-row-sub { font: 600 10px/1.4 ui-rounded, sans-serif; color: var(--muted); }
.pd-loot-empty { text-align: center; color: var(--muted); font: 500 12px/1.5 Georgia, serif; padding: 10px; }
.pd-loot-foot { display: flex; gap: 10px; justify-content: center; }

/* ── Biome map-tab banner (2026-06-11) ─────────────────────────────
   Scene-aware environment art. Fixed-height crop (not full page),
   pixel-art crispness, and a bottom fade that melts into the UI. */
.pd-biome-banner {
	position: relative;
	height: clamp(240px, 44vh, 420px);
	/* Top corners only — the bottom edge dissolves into the UI via the
	   fade, so a bottom radius would re-introduce a visible card edge. */
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	margin-bottom: 8px;
	background: var(--panel, #15121d);
}
.pd-biome-art {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	image-rendering: pixelated;
	display: block;
}
.pd-biome-fade {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 62%;
	background: linear-gradient(to bottom,
		rgba(10, 8, 8, 0) 0%,
		rgba(10, 8, 8, 0.35) 45%,
		rgba(10, 8, 8, 0.85) 78%,
		var(--bg, #0a0808) 100%);
	pointer-events: none;
}
.pd-biome-label {
	position: absolute;
	left: 12px; bottom: 8px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* Missing-asset fallbacks: thematic gradients so the banner never
   shows a broken image while the PNGs are being dropped in. */
.pd-biome-fallback-forest   { background: linear-gradient(160deg, #1d3a24, #0d1f12); }
.pd-biome-fallback-mountain { background: linear-gradient(160deg, #4a5a70, #232c3a); }
.pd-biome-fallback-desert   { background: linear-gradient(160deg, #c98e3f, #7a4d1e); }
.pd-biome-fallback-swamp    { background: linear-gradient(160deg, #3d5232, #1a2616); }
.pd-biome-fallback-coast    { background: linear-gradient(160deg, #2e6b8a, #143246); }
.pd-biome-fallback-tundra   { background: linear-gradient(160deg, #9fc3dd, #46627e); }
.pd-biome-fallback-hills    { background: linear-gradient(160deg, #6b7c43, #39431f); }
.pd-biome-fallback-dungeon  { background: linear-gradient(160deg, #3a2f28, #161210); }
.pd-biome-fallback-town     { background: linear-gradient(160deg, #7a6a52, #3c332a); }
.pd-biome-fallback-tavern   { background: linear-gradient(160deg, #8a5a2e, #3e2614); }
.pd-biome-fallback-castle   { background: linear-gradient(160deg, #5d4a63, #2a1f30); }

/* ── In-app account admin (2026-06-11) ── */
.pd-admin-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.pd-admin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 12px; border: 1px solid var(--line, #2c241e); border-radius: 10px; margin-bottom: 8px; }
.pd-admin-info strong { display: block; font-size: 14px; word-break: break-all; }
.pd-admin-meta { font-size: 12px; color: var(--muted, #9a8c7c); }
.pd-admin-btns { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.pd-admin-btn { padding: 6px 10px; font-size: 12px; }
.pd-admin-temp { border: 1px dashed var(--gold, #d4a843); border-radius: 8px; padding: 10px 12px;
	font-family: ui-monospace, monospace; font-size: 13px; user-select: all; }

/* ── Tactical battle map (2026-06-11 placeholder) ── */
.pd-battle-map { display: grid; grid-template-columns: repeat(var(--bm-cols, 16), 1fr);
	gap: 1px; background: #1d2916; border: 1px solid var(--line, #2c241e);
	border-radius: 10px; overflow: hidden; margin: 8px 0; aspect-ratio: calc(var(--bm-cols, 16) / 12); }
.pd-bm-tile { background: #3f5a2e; position: relative; min-height: 0; }
.pd-bm-tile:nth-child(odd) { background: #44602f; }
.pd-bm-rock { background: #6e675e !important; border-radius: 30%; box-shadow: inset 0 0 4px #00000088; }
.pd-bm-brush { background: #2e441f !important; }
.pd-bm-brush::after { content: '\2042'; position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center; font-size: 8px; color: #5d7c40; }
.pd-bm-tappable { cursor: pointer; }
.pd-bm-tappable:active { outline: 2px solid var(--gold, #d4a843); outline-offset: -2px; }
.pd-bm-token { position: absolute; inset: 8%; border-radius: 50%; display: flex; align-items: center;
	justify-content: center; font-size: 9px; font-weight: 700; color: #fff;
	text-shadow: 0 1px 2px #000; box-shadow: 0 1px 3px #000a; }
.pd-bm-me    { background: #2f6fb3; outline: 2px solid #9cc7f0; }
.pd-bm-ally  { background: #2e8a72; }
.pd-bm-enemy { background: #b3402f; }
.pd-bm-downed { opacity: .45; filter: grayscale(.8); }

/* ── Inline link-style button (forgot password) ── */
.pd-link-button {
	background: none;
	border: none;
	color: var(--muted, #9a8c7c);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 8px 4px;
	margin: 4px auto 0;
	display: block;
}
.pd-link-button:hover { color: var(--gold, #d4a843); }

/* ── Combat mode (rebuilt 2026-06-11): stepper → map → log → panel → dice → turn-order ── */
.pd-combat-mode {
	/* Fixed to the viewport (not .pd-app, which is taller than the screen) so
	   the frame is EXACTLY the visible area below the game header — this lets
	   the map flex-grow fill the space instead of leaving dead space, and
	   stops the frame from overlapping the header's save/quit + settings
	   buttons. top clears the safe-area inset + the ~52px game header. */
	position: fixed;
	left: 0; right: 0;
	top: calc(max(env(safe-area-inset-top, 32px), 32px) + 54px);
	bottom: 0;
	display: flex; flex-direction: column;
	background: var(--bg, #0a0808);
	z-index: 40;
	overflow: hidden;
}
/* Header */
.pd-cm-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; border-bottom: 1px solid var(--line, #2c241e); }
.pd-cm-round { font-size: 12px; color: var(--muted, #9a8c7c); }
.pd-cm-round-n { font-size: 16px; font-weight: 700; color: var(--gold, #d4a843); }
.pd-cm-encounter { font-size: 11px; color: var(--muted, #9a8c7c); }
.pd-cm-turn { font-size: 12px; color: var(--muted, #9a8c7c); padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line, #2c241e); }
.pd-cm-turn-mine { color: #7dc97f; border-color: #2f6b3a; background: #16321a; font-weight: 600; }

/* 1 · Turn-steps stepper */
.pd-cm-steps { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 9px 10px; background: #14100d; border-bottom: 1px solid var(--line, #2c241e); }
.pd-cm-steps-idle { opacity: .5; }
.pd-cm-step { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line, #2c241e); background: #1a1410; color: var(--muted, #9a8c7c); font-size: 12px; }
.pd-cm-step-ico { font-size: 13px; line-height: 1; }
.pd-cm-step-lbl { font-weight: 500; letter-spacing: .02em; }
.pd-cm-step-cur { border-color: var(--gold, #d4a843); background: #3a2a18; color: var(--gold, #d4a843); box-shadow: 0 0 8px #d4a84333; }
.pd-cm-step-done { color: #7dc97f; border-color: #2f6b3a; }
.pd-cm-step-done .pd-cm-step-ico { color: #7dc97f; }
.pd-cm-step-arrow { color: #5b4f43; font-size: 14px; padding: 0 1px; }

/* 2 · Battle map — STABLE width-based size (it no longer flex-grows, which made
   it resize whenever the log/dice/picker changed height — "the map shifts in
   size" bug). The 16:12 grid is sized purely by the fixed frame width, so it
   never moves; the dice area below absorbs all the variable slack. */
.pd-cm-map-wrap { flex: 0 0 auto; padding: 4px 8px; display: flex; justify-content: center; }
/* max-height caps the map so the two-row tracker + log + panel always fit on
   one screen; the aspect-ratio keeps it square-ish (it narrows + centers when
   capped). Fixed cap = stable size, never shifts. */
.pd-cm-map { display: grid; grid-template-columns: repeat(var(--cm-cols, 16), 1fr); gap: 1px; background: #1d2916; border: 1px solid var(--line, #2c241e); border-radius: 10px; overflow: hidden; aspect-ratio: calc(var(--cm-cols, 16) / 12); width: 100%; max-width: 100%; max-height: min(204px, 28vh); }
.pd-cm-tile { background: #3f5a2e; position: relative; min-height: 0; }
.pd-cm-tile:nth-child(odd) { background: #44602f; }
.pd-cm-rock { background: #6e675e !important; border-radius: 30%; }
.pd-cm-brush { background: #2e441f !important; }
.pd-cm-tile-move { cursor: pointer; box-shadow: inset 0 0 0 1px #d4a84355; background-color: #5a6b38 !important; }
.pd-cm-tile-move:active { box-shadow: inset 0 0 0 2px var(--gold, #d4a843); }
.pd-cm-tile-target { cursor: pointer; }
.pd-cm-tok { position: absolute; inset: 8%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; box-shadow: 0 1px 3px #000a; }
.pd-cm-tok-me { background: #2f6fb3; outline: 2px solid #9cc7f0; }
.pd-cm-tok-ally { background: #2e8a72; } .pd-cm-tok-enemy { background: #b3402f; }
.pd-cm-tok-down { opacity: .45; filter: grayscale(.8); }
.pd-cm-tok-sel { outline: 2px solid var(--gold, #d4a843); box-shadow: 0 0 8px #d4a843aa; }

/* 3 · Combat log — the ONLY scroller; capped at ~5 lines, then scrolls inside.
   Each line is (12.5px × 1.5 line-height + 4px padding); + 8px×2 box padding + 2px borders. */
.pd-cm-log { flex: 0 0 auto; min-height: 0; max-height: calc(5 * (12.5px * 1.5 + 4px) + 18px); overflow-y: auto; padding: 8px 14px; border-top: 1px solid var(--line, #2c241e); border-bottom: 1px solid var(--line, #2c241e); background: #0d0a08; }
.pd-cm-log-line { font-size: 12.5px; line-height: 1.5; padding: 2px 0; }
.pd-cm-log-sys { color: var(--muted, #9a8c7c); }
.pd-cm-log-party { color: #cfe0c0; }
.pd-cm-log-enemy { color: #e0a89f; }

/* 4 · Phase action panel. Sits directly under the capped log (content stays
   top-aligned) — the combat frame's containing block (.pd-app) can be taller
   than the viewport, so margin-top:auto would push the panel off-screen. */
.pd-cm-panel { flex: 0 0 auto; background: #171210; padding: 8px 14px; }
.pd-cm-phase { font-size: 12px; color: var(--text, #e8ddd0); margin-bottom: 8px; }
.pd-cm-phase b { color: var(--gold, #d4a843); }
.pd-cm-tgt { color: #e0a89f; font-weight: 600; }
.pd-cm-phase-hint { color: var(--muted, #9a8c7c); font-size: 10px; }
.pd-cm-watch { color: var(--muted, #9a8c7c); font-style: italic; }
.pd-cm-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.pd-cm-act { flex: 0 0 auto; padding: 9px 14px; border-radius: 9px; font-size: 13px; background: #1a1410; color: var(--text, #e8ddd0); border: 1px solid var(--line, #2c241e); cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.pd-cm-act small { font-size: 9px; color: var(--muted, #9a8c7c); margin-top: 1px; }
.pd-cm-act-attack { background: #3a2a18; border-color: var(--gold, #d4a843); color: var(--gold, #d4a843); font-weight: 500; }
.pd-cm-act-cast { background: #1d2630; border-color: #3a4655; color: #9cc7f0; }
.pd-cm-act-skip { background: #241310; border-color: #7a3328; color: #e0a08f; }
.pd-cm-act-on { box-shadow: 0 0 0 2px #d4a84366 inset; }
/* weapon / spell picker */
.pd-cm-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; padding: 8px; background: #0f0c0a; border: 1px solid var(--line, #2c241e); border-radius: 9px; }
.pd-cm-picker-head { flex: 1 0 100%; font-size: 11px; color: var(--muted, #9a8c7c); margin-bottom: 1px; }
.pd-cm-picker-head small { color: #6f6354; }
.pd-cm-pick { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; background: #1a1410; color: var(--text, #e8ddd0); border: 1px solid var(--line, #2c241e); cursor: pointer; }
.pd-cm-pick em { font-style: normal; font-size: 9.5px; color: var(--muted, #9a8c7c); }
.pd-cm-pick-eq { border-color: var(--gold, #d4a843); }
.pd-cm-pick-spell { background: #161d26; border-color: #2c3848; color: #bcd4ea; }
.pd-cm-pick-leveled em { color: #d4a843; }
.pd-cm-pick-off { opacity: .4; cursor: not-allowed; }
.pd-cm-pick-none { font-size: 12px; color: var(--muted, #9a8c7c); }
.pd-cm-writein { display: flex; gap: 8px; margin-top: 8px; }
.pd-cm-writein .pd-input { flex: 1; }

/* 5 · After-your-action (dice readout + animation) — this is the FLEX GROWER:
   it absorbs all the leftover vertical slack (and the log/picker variability),
   centering the dice roll, so the fixed-size map above never has to resize. */
.pd-cm-after { flex: 1 1 auto; min-height: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #171210; padding: 4px 14px 6px; }
.pd-cm-dice { min-height: 18px; font-size: 12px; color: var(--muted, #9a8c7c); }
.pd-cm-dice b { color: var(--gold, #d4a843); }
.pd-cm-diceanim { display: flex; justify-content: center; gap: 8px; }

/* 6 · Combatant tracker — TWO rows (party + enemies). Each cell shows the
   token, name, an HP bar + number, and condition icons, with a pulsing glow
   on whoever's turn it is. This is the at-a-glance "what's going on" panel. */
.pd-cm-init { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #2c241e); background: #14100d; }
.pd-cm-trk-row { display: flex; gap: 5px; overflow-x: auto; }
.pd-cm-trk-cell { flex: 1 1 0; min-width: 54px; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 5px; border-radius: 8px; background: #1a1410; border: 1px solid var(--line, #2c241e); position: relative; }
.pd-cm-trk-tok { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.pd-cm-trk-me  .pd-cm-trk-tok { background: #2f6fb3; outline: 1px solid #9cc7f0; }
.pd-cm-trk-ally .pd-cm-trk-tok { background: #2e8a72; }
.pd-cm-trk-enemy .pd-cm-trk-tok { background: #b3402f; }
.pd-cm-trk-name { font-size: 8.5px; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #9a8c7c); }
.pd-cm-trk-bar { width: 100%; height: 4px; border-radius: 2px; background: #3a1812; overflow: hidden; }
.pd-cm-trk-bar > span { display: block; height: 100%; background: #5fb56a; transition: width .35s ease; }
.pd-cm-trk-bar > span.pd-cm-trk-hp-mid { background: #d4a843; }
.pd-cm-trk-bar > span.pd-cm-trk-hp-low { background: #d4503f; }
.pd-cm-trk-hp { font-size: 9px; font-weight: 600; color: var(--text, #e8ddd0); line-height: 1; }
.pd-cm-trk-conds { display: flex; gap: 1px; min-height: 11px; }
.pd-cm-trk-cond { font-size: 9px; line-height: 1; }
.pd-cm-trk-down { opacity: .45; filter: grayscale(.7); }
.pd-cm-trk-active { border-color: var(--gold, #d4a843); animation: pd-cm-trk-pulse 1.4s ease-in-out infinite; }
@keyframes pd-cm-trk-pulse {
	0%, 100% { box-shadow: 0 0 0 1px var(--gold, #d4a843), 0 0 7px #d4a84377; }
	50%      { box-shadow: 0 0 0 1px var(--gold, #d4a843), 0 0 15px #d4a843cc; }
}