:root {
	--bg: #1b1620;
	--panel: #251d2c;
	--panel-border: #453a54;
	--text: #f3ede4;
	--muted: #b6a9c4;
	--accent: #d1a441;
	--link: #b79bee;
	--good: #2fbf6a;
	--bad: #e0555a;
	--fatal: #7c1d2a;
	--unattempted: #4a4056;
}

* {
	box-sizing: border-box;
}

body {
	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	display: flex;
	flex-direction: column;
}

header {
	padding: 14px 16px 6px;
	text-align: center;
}

h1 {
	margin: 0;
	font-size: 22px;
}

.accent a {
	color: var(--accent);
	text-decoration: none;
}

.hub-link {
	color: var(--muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: normal;
	margin-left: 8px;
}

.hub-link:hover {
	color: var(--text);
}

#subtitle {
	font-size: 13px;
	font-style: italic;
	color: var(--muted);
	margin-top: 2px;
}

main {
	flex: 1;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 12px 16px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 10px;
	padding: 16px;
}

.hidden {
	display: none !important;
}

.banner {
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
}

.banner-error {
	background: rgba(224, 85, 90, 0.18);
	border: 1px solid var(--bad);
	color: var(--text);
}

#adventure-banner {
	text-align: center;
}

#adventure-title {
	margin: 0 0 4px;
	font-size: 19px;
	letter-spacing: 0.5px;
	color: var(--accent);
}

#adventure-date {
	font-size: 13px;
	color: var(--muted);
}

#picker-panel label {
	display: block;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 6px;
}

#class-select {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--panel-border);
	border-radius: 6px;
	margin-bottom: 10px;
}

button {
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	padding: 12px 16px;
	width: 100%;
	border: none;
	border-radius: 6px;
	background: var(--accent);
	color: #241a08;
	cursor: pointer;
}

button:disabled {
	opacity: 0.5;
	cursor: default;
}

button:not(:disabled):hover {
	filter: brightness(1.08);
}

.hint {
	font-size: 12px;
	color: var(--muted);
	margin: 10px 0 0;
}

.muted {
	color: var(--muted);
	font-size: 13px;
}

.char-header {
	text-align: center;
	margin-bottom: 12px;
}

#char-name {
	margin: 0 0 2px;
	font-size: 24px;
	color: var(--accent);
}

#char-line {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--text);
}

.char-abilities {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.3px;
	word-break: break-word;
}

#char-sheet-detail {
	margin: 0;
	word-break: break-word;
}

.beat-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 12px 0;
}

.beat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 6px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--panel-border);
	font-size: 18px;
	cursor: default;
}

.beat-cleared {
	border-color: var(--good);
}

.beat-failed {
	border-color: var(--bad);
}

.beat-fatal {
	border-color: var(--fatal);
	background: rgba(124, 29, 42, 0.35);
}

.beat-unattempted {
	border-color: var(--unattempted);
	opacity: 0.55;
}

.prose {
	line-height: 1.55;
	font-size: 15.5px;
	margin: 8px 0 14px;
}

.renown-line {
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 4px;
	color: var(--accent);
}

#community-line {
	text-align: center;
	margin: 0 0 8px;
}

.new-badge {
	text-align: center;
	font-weight: bold;
	color: var(--good);
	margin: 4px 0;
	font-size: 14px;
}

.share-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.share-row button {
	width: auto;
	flex: 1;
}

#share-status {
	min-width: 60px;
}

.album-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.album-badge {
	background: rgba(209, 164, 65, 0.14);
	border: 1px solid var(--accent);
	color: var(--text);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12.5px;
	cursor: default;
}

footer {
	padding: 16px;
}

.site-footer {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--muted);
}

.site-footer a {
	color: var(--link);
}

@media (max-width: 400px) {
	.char-abilities {
		font-size: 13.5px;
	}

	.beat {
		font-size: 16px;
		padding: 5px 6px;
	}
}