:root {
	color-scheme: dark;
	font-family: 'DM Sans', sans-serif;
	background: #121512;
	color: #f1f1e9;
	font-synthesis: none;
	--bg: #121512;
	--panel: #191d19;
	--panel-raised: #20251f;
	--line: #343a31;
	--muted: #92978c;
	--text: #f1f1e9;
	--lime: #d1f36a;
	--coral: #e66e4b;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background-color: var(--bg);
	background-image: linear-gradient(rgba(188, 216, 113, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(188, 216, 113, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
}

button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.app-shell { width: min(1320px, calc(100% - 64px)); margin: 0 auto; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; font: 12px 'DM Mono', monospace; letter-spacing: 0; }
.brand strong { color: var(--lime); font-weight: 500; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: #151912; background: var(--lime); font: 700 12px 'DM Mono', monospace; }
.top-actions { display: flex; gap: 10px; }
.button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 2px; color: var(--text); background: transparent; font-size: 12px; font-weight: 600; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; }
.button-quiet:hover { border-color: #798069; background: var(--panel-raised); }
.button-accent { border-color: var(--lime); color: #161a12; background: var(--lime); }
.button-accent:hover, .button-submit:hover { border-color: #e0ff91; background: #e0ff91; }

.intro { min-height: 205px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 12px; color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: 0; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font: 700 62px/0.95 'Barlow Condensed', sans-serif; text-transform: uppercase; }
h1 em { color: var(--lime); font-style: normal; }
.intro-copy { margin: 0; color: #a8aca1; font-size: 13px; }
.library-count { display: flex; align-items: center; gap: 12px; padding-right: 12px; }
.count-number { color: var(--lime); font: 600 54px/1 'Barlow Condensed', sans-serif; }
.count-label { color: var(--muted); font: 9px/1.6 'DM Mono', monospace; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 44px; padding: 34px 0 56px; }
.library-panel { min-width: 0; }
.panel-heading { min-height: 52px; display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading .eyebrow, .add-panel .eyebrow { margin-bottom: 6px; }
h2 { margin-bottom: 0; font: 600 27px/1 'Barlow Condensed', sans-serif; }
.toolbar { display: flex; gap: 10px; padding: 18px 0 16px; border-top: 1px solid var(--line); }
.search-box { height: 40px; min-width: 0; flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid var(--line); background: #171a17; }
.search-icon { color: var(--lime); font-size: 21px; line-height: 1; transform: rotate(-20deg); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.search-box input::placeholder, input::placeholder, textarea::placeholder { color: #74796f; }
.filter-box select, form select { height: 40px; padding: 0 28px 0 11px; border: 1px solid var(--line); border-radius: 0; color: var(--text); background: #171a17; font-size: 12px; }
.table-wrap { min-width: 0; min-height: 290px; border-top: 1px solid var(--line); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px; padding-top: 18px; }
.game-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); animation: card-arrive 240ms ease-out both; }
/* .cover-art { position: relative; display: grid; aspect-ratio: 2 / 3; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #35402a 0%, #20271e 44%, #171b17 100%); } */
.cover-art::after { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.06); content: ''; pointer-events: none; }
.cover-art img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 240ms ease; }
.game-card:hover .cover-art img { transform: scale(1.035); }
.cover-placeholder { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; gap: 9px; padding: 12px; text-align: center; }
.cover-placeholder-mark { color: rgba(209, 243, 106, 0.92); font: 700 46px/1 'Barlow Condensed', sans-serif; }
.cover-placeholder-title { max-width: 100%; color: #aeb5a2; font: 9px/1.5 'DM Mono', monospace; text-transform: uppercase; overflow-wrap: anywhere; }
.card-actions { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity 150ms ease; }
.card-edit, .card-remove { min-width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 0; color: white; background: rgba(13, 15, 13, 0.88); font: 14px 'VT323', monospace; }
.card-edit { padding: 0 8px; border-color: var(--lime); color: var(--lime); }
.card-remove { font-size: 19px; }
.game-card:hover .card-actions, .card-actions:focus-within { opacity: 1; }
#game-list.admin-mode .card-actions { opacity: 1; }
.card-edit:hover { color: #17150f; background: var(--lime); }
.card-remove:hover { border-color: var(--coral); color: #fff; background: #8c3d2c; }
.card-meta { min-height: 82px; padding: 11px 11px 12px; }
.game-name { display: block; overflow: hidden; margin-bottom: 5px; color: var(--text); font: 600 17px/1.05 'Barlow Condensed', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.game-details { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.delete-game:hover { border-color: #72473d; color: #ff9b7b; }
.empty-state { display: none; min-height: 245px; place-content: center; justify-items: center; text-align: center; }
.empty-state.visible { display: grid; }
.empty-symbol { width: 37px; height: 37px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid #4e5940; color: var(--lime); font-size: 20px; }
.empty-state h3 { margin-bottom: 6px; font: 600 20px 'Barlow Condensed', sans-serif; }
.empty-state p { margin: 0; color: var(--muted); font-size: 11px; }

.add-panel { align-self: start; padding: 22px 20px 18px; border: 1px solid var(--line); border-top: 2px solid var(--lime); background: rgba(25, 29, 25, 0.88); }
.add-panel h2 { margin-bottom: 22px; }
form { display: grid; }
form label { margin: 0 0 7px; color: #c7c9c0; font-size: 11px; font-weight: 600; }
form input, form select, form textarea { width: 100%; margin-bottom: 15px; border: 1px solid var(--line); border-radius: 0; color: var(--text); background: #131613; font-size: 12px; }
form input { height: 39px; padding: 0 10px; }
form select { margin-bottom: 15px; }
form textarea { min-height: 72px; padding: 10px; resize: vertical; }
.cover-input-row { min-height: 54px; display: flex; align-items: center; gap: 10px; margin: 0 0 15px; }
.cover-picker { min-height: 42px; flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px dashed #51594a; color: #c8cdbd; background: #131613; font-size: 11px; cursor: pointer; }
.cover-picker:hover { border-color: var(--lime); color: var(--lime); }
.cover-picker-icon { color: var(--lime); font-size: 19px; }
#cover-preview { width: 36px; height: 54px; border: 1px solid var(--line); object-fit: cover; }
.cover-picker-row { display: flex; }
.storage-note { margin-top: 13px; }
.game-form-cover-hint { margin: -8px 0 13px; color: var(--muted); font-size: 9px; }
.required { color: var(--coral); }
.optional { float: right; color: #73796e; font: 8px 'DM Mono', monospace; }
.button-submit { width: 100%; border-color: var(--lime); color: #161a12; background: var(--lime); }
.button-submit span { margin-right: 5px; font-size: 16px; vertical-align: -1px; }
.form-feedback { min-height: 16px; margin: 8px 0 0; color: var(--lime); font-size: 10px; }
.form-feedback.error { color: #ff9b7b; }
.storage-note { margin: 13px 0 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font: 9px 'DM Mono', monospace; }
.storage-note span { margin-right: 5px; color: var(--lime); font-size: 8px; }
.footer { display: flex; justify-content: space-between; padding: 17px 0 22px; border-top: 1px solid var(--line); color: #777d72; font: 9px 'DM Mono', monospace; }
.footer i { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--lime); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
	.app-shell { width: min(100% - 40px, 720px); }
	.workspace { grid-template-columns: 1fr; gap: 28px; }
	.add-panel { width: 100%; }
}

@media (max-width: 560px) {
	.app-shell { width: calc(100% - 32px); }
	.topbar { height: 66px; }
	.brand { gap: 8px; font-size: 10px; }
	.brand > span:last-child { display: none; }
	.brand-mark { width: 29px; height: 29px; }
	.top-actions { gap: 6px; }
	.button { min-height: 36px; padding: 0 9px; font-size: 10px; }
	.intro { min-height: 175px; }
	h1 { font-size: 52px; }
	.intro-copy { max-width: 230px; font-size: 11px; line-height: 1.5; }
	.count-number { font-size: 40px; }
	.count-label { font-size: 8px; }
	.workspace { padding-top: 26px; }
	.toolbar { flex-direction: column; }
	.filter-box select { width: 100%; }
	.game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.card-meta { min-height: 76px; padding: 9px; }
	.card-actions { opacity: 1; }
	.add-panel { padding: 20px 16px 16px; }
}

@keyframes card-arrive {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

:root {
	color-scheme: dark;
	font-family: 'VT323', monospace;
	background: #111411;
	color: #ede9d5;
	--bg: #111411;
	--panel: #191d19;
	--panel-raised: #252b25;
	--line: #4b5147;
	--muted: #9da392;
	--text: #ede9d5;
	--lime: #e3b85c;
	--coral: #ed765f;
	--arcade-cyan: #72d4c0;
}

body {
	position: relative;
	background-color: var(--bg);
	background-image:
		linear-gradient(rgba(227, 184, 92, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(114, 212, 192, 0.03) 1px, transparent 1px),
		radial-gradient(ellipse at 50% 10%, #25261d, #111411 70%);
	background-size: 24px 24px, 24px 24px, auto;
}

body::before {
	position: fixed;
	z-index: 20;
	inset: 0;
	background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, 0.14) 4px 5px);
	content: '';
	pointer-events: none;
}

.app-shell { position: relative; z-index: 1; }
.topbar { height: 82px; border-bottom: 2px solid var(--line); }
.brand { font: 10px 'Press Start 2P', monospace; line-height: 1.8; }
.brand-mark { border: 2px solid #111411; outline: 1px solid var(--lime); color: #161710; background: var(--lime); font-family: 'Press Start 2P', monospace; font-size: 8px; box-shadow: 3px 3px 0 #765d32; }
.top-actions { align-items: center; gap: 8px; }
.admin-tools { display: flex; align-items: center; gap: 8px; }
.button { min-height: 38px; padding: 0 12px; border: 1px solid #727768; border-radius: 0; color: var(--text); background: #1b201b; box-shadow: 3px 3px 0 #070907; font: 14px 'VT323', monospace; letter-spacing: 0; }
.button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #070907; }
.button-quiet:hover { border-color: var(--arcade-cyan); color: var(--arcade-cyan); background: #202823; }
.button-accent, .button-submit { border-color: var(--lime); color: #17150f; background: var(--lime); box-shadow: 3px 3px 0 #6d552c; }
.button-accent:hover, .button-submit:hover { border-color: #ffda84; color: #17150f; background: #ffda84; }

.intro { min-height: 215px; border-bottom: 2px solid var(--line); }
.eyebrow { color: var(--arcade-cyan); font: 8px 'Press Start 2P', monospace; line-height: 1.8; }
.eyebrow span { color: var(--coral); }
h1 { font: 72px/0.8 'VT323', monospace; letter-spacing: 0; text-transform: uppercase; text-shadow: 3px 3px 0 #563d20; }
h1 em { color: var(--lime); }
.intro-copy { color: #c2bfae; font: 19px 'VT323', monospace; }
.count-number { color: var(--lime); font: 60px/1 'VT323', monospace; text-shadow: 2px 2px 0 #684e29; }
.count-label { color: var(--arcade-cyan); font: 8px/2 'Press Start 2P', monospace; }

.workspace { gap: 28px; padding-top: 30px; }
.workspace:not(.admin-open) { grid-template-columns: minmax(0, 1fr); }
.workspace.admin-open { grid-template-columns: minmax(0, 1fr) 330px; }
.panel-heading { min-height: 58px; }
h2 { font: 30px/1 'VT323', monospace; letter-spacing: 0; }
.toolbar { border-top: 2px solid var(--line); }
.search-box, .filter-box select, form select { border: 1px solid #626b5e; border-radius: 0; background: #121612; box-shadow: inset 2px 2px 0 #080a08; }
.search-box:focus-within { border-color: var(--arcade-cyan); }
.search-box input { font: 17px 'VT323', monospace; }
.search-box input::placeholder, input::placeholder, textarea::placeholder { color: #878d7d; }
.search-icon { color: var(--lime); font: 24px 'VT323', monospace; }
.filter-box select, form select { font: 16px 'VT323', monospace; }
.table-wrap { border-top: 2px solid var(--line); }
.game-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 18px; padding-top: 20px; }
.game-card { position: relative; border: 2px solid #555c4c; border-radius: 0; background: #181c18; box-shadow: 4px 4px 0 #080a08; }
.game-card:hover { border-color: var(--lime); transform: translate(-1px, -2px); box-shadow: 5px 6px 0 #070907; }
.cover-placeholder-mark { color: var(--lime); font: 52px/1 'VT323', monospace; text-shadow: 3px 3px 0 #624523; }
.cover-placeholder-title { color: var(--arcade-cyan); font: 8px/1.8 'Press Start 2P', monospace; }
.card-remove { border-color: #ee8e76; color: #ffe3d9; background: rgba(33, 19, 15, 0.9); font: 20px 'VT323', monospace; }
.card-meta { min-height: 74px; padding: 10px; }
.game-name { font: 21px/1 'VT323', monospace; }
.game-details { color: #b6bdac; font: 15px 'VT323', monospace; }
.empty-state { min-height: 280px; }
.empty-symbol { border: 2px solid var(--lime); color: var(--lime); font: 25px 'VT323', monospace; box-shadow: 3px 3px 0 #080a08; }
.empty-state h3 { font: 26px 'VT323', monospace; }
.empty-state p { color: var(--muted); font: 18px 'VT323', monospace; }

.add-panel { position: relative; align-self: start; border: 2px solid #69705c; border-top: 4px solid var(--lime); border-radius: 0; background: #191d19; box-shadow: 5px 5px 0 #080a08; }
.add-panel::before { display: block; margin: -10px 0 15px; color: var(--arcade-cyan); content: 'PLAYER 1  /  EDIT MODE'; font: 7px 'Press Start 2P', monospace; line-height: 1.8; }
.add-panel[hidden]::before { content: none; }
.add-panel h2 { margin-bottom: 20px; color: var(--lime); }
form label { color: #d9d6c6; font: 16px 'VT323', monospace; }
form input, form textarea { border: 1px solid #5f6657; border-radius: 0; background: #111511; box-shadow: inset 2px 2px 0 #080a08; font: 17px 'VT323', monospace; }
form input:focus, form textarea:focus, form select:focus { border-color: var(--arcade-cyan); }
.cover-picker { border: 1px dashed #8d855d; color: #d8d2b9; background: #111511; font: 16px 'VT323', monospace; }
.cover-picker:hover { border-color: var(--arcade-cyan); color: var(--arcade-cyan); }
.cover-picker-icon { color: var(--lime); font: 22px 'VT323', monospace; }
.form-feedback { min-height: 19px; font: 15px 'VT323', monospace; }
.storage-note { border-top: 1px solid var(--line); color: var(--arcade-cyan); font: 8px 'Press Start 2P', monospace; line-height: 1.8; }
.storage-note span { color: var(--lime); }
.footer { border-top: 2px solid var(--line); color: #a2a695; font: 8px 'Press Start 2P', monospace; line-height: 1.8; }
.footer i { border-radius: 0; background: var(--arcade-cyan); box-shadow: 0 0 8px rgba(114, 212, 192, 0.6); }

.login-dialog { position: relative; width: min(420px, calc(100% - 32px)); padding: 30px; border: 2px solid var(--lime); border-radius: 0; color: var(--text); background: #171b17; box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.65); }
.login-dialog::backdrop { background: rgba(4, 7, 5, 0.82); backdrop-filter: blur(2px); }
.login-dialog form { position: relative; }
.login-dialog h2 { margin: 0 0 24px; color: var(--lime); font-size: 34px; }
.login-dialog label { margin: 0 0 6px; }
.login-dialog input { height: 42px; margin-bottom: 16px; padding: 0 10px; color: var(--text); }
.login-error { min-height: 18px; margin: -7px 0 8px; color: var(--coral); font: 8px 'Press Start 2P', monospace; line-height: 1.8; }
.demo-warning { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: #c2bfae; font: 15px/1.15 'VT323', monospace; }
.dialog-close { position: absolute; top: -13px; right: -11px; width: 30px; height: 30px; border: 1px solid var(--coral); color: var(--coral); background: #171b17; font: 23px 'VT323', monospace; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
	.workspace.admin-open { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
	.app-shell { width: calc(100% - 28px); }
	.topbar { min-height: 78px; height: auto; gap: 8px; }
	.brand { gap: 8px; font-size: 7px; }
	.brand > span:last-child { display: none; }
	.top-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
	.admin-tools { justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
	.button { min-height: 34px; padding: 0 8px; font-size: 13px; }
	.intro { min-height: 165px; }
	h1 { font-size: 54px; }
	.intro-copy { max-width: 225px; font-size: 17px; }
	.count-number { font-size: 44px; }
	.count-label { font-size: 6px; }
	.game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
	.card-meta { min-height: 65px; }
	.card-remove { opacity: 1; }
	.workspace { padding-top: 22px; }
	.footer { gap: 10px; font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	body::before { display: none; }
	.game-card, .button, .cover-art img { animation: none; transition: none; }
}

/* Warm, simple storefront styling */
:root {
	color-scheme: light;
	font-family: Georgia, 'Times New Roman', serif;
	background: #c9743d;
	color: #29251e;
	--bg: #c9743d;
	--panel: #d4c5a8;
	--panel-raised: #dfd2b9;
	--line: #796b53;
	--muted: #625c4f;
	--text: #29251e;
	--lime: #386c42;
	--coral: #a44b31;
	--arcade-cyan: #295d67;
}

body {
	min-width: 320px;
	background: #c9743d;
}

body::before { display: none; }

.app-shell {
	width: min(940px, calc(100% - 32px));
	min-height: 100vh;
	margin: 12px auto;
	padding: 0 22px;
	border: 4px ridge #755337;
	background: #c4b395;
	box-shadow: 0 2px 8px rgba(50, 29, 13, 0.5);
}

.topbar {
	min-height: 68px;
	height: auto;
	border-bottom: 2px solid #786b53;
}

.brand {
	gap: 10px;
	color: #2c261d;
	font: bold 15px Georgia, 'Times New Roman', serif;
}

.brand strong { color: #74401f; font-weight: bold; }

.brand-mark {
	width: 36px;
	height: 36px;
	border: 2px ridge #75624a;
	outline: none;
	color: #382718;
	background: #d6c6a5;
	font: bold 13px Georgia, serif;
	box-shadow: 1px 1px 2px #55442f;
}

.top-actions, .admin-tools { display: flex; flex-wrap: wrap; gap: 6px; }

.button {
	min-height: 31px;
	padding: 3px 10px;
	border: 2px outset #b5a485;
	border-radius: 3px;
	color: #282319;
	background: #d8c9a8;
	box-shadow: 1px 1px 2px rgba(43, 31, 17, 0.45);
	font: 13px Arial, sans-serif;
	transition: none;
}

.button:hover, .button-quiet:hover {
	transform: none;
	border-color: #88734f;
	color: #241d14;
	background: #e6d8b9;
	box-shadow: 1px 1px 2px rgba(43, 31, 17, 0.45);
}

.button-accent, .button-submit {
	border-color: #756344;
	color: #262116;
	background: #c5b18b;
	box-shadow: 1px 1px 2px rgba(43, 31, 17, 0.45);
}

.button-accent:hover, .button-submit:hover { border-color: #705b3b; background: #d9c69f; }

.intro {
	min-height: 130px;
	margin-top: 12px;
	padding: 17px 20px;
	border: 3px ridge #76674e;
	background: #d1c1a1;
}

.eyebrow {
	margin-bottom: 7px;
	color: #67583f;
	font: bold 10px Arial, sans-serif;
}

h1 {
	margin: 0 0 5px;
	color: #3b2b1d;
	font: bold 34px/1.1 Georgia, 'Times New Roman', serif;
	text-shadow: none;
}

h1 em { color: #874c29; font-style: normal; }
.intro-copy { color: #514a3d; font: 14px Arial, sans-serif; }
.count-number { color: #704323; font: bold 38px Georgia, serif; text-shadow: none; }
.count-label { color: #514936; font: bold 10px/1.5 Arial, sans-serif; }

.workspace {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0 24px;
}

.workspace:not(.admin-open) { grid-template-columns: minmax(0, 1fr); }
.workspace.admin-open { grid-template-columns: minmax(0, 1fr) 280px; }
.library-panel { padding: 13px; border: 3px ridge #807157; background: #d2c3a5; }
.panel-heading { min-height: 47px; }
.panel-heading .eyebrow { color: #705c3c; }
h2 { color: #3d3020; font: bold 23px Georgia, 'Times New Roman', serif; }
.toolbar { gap: 8px; padding: 10px 0; border-top: 1px solid #908168; }
.search-box, .filter-box select, form select {
	height: 32px;
	border: 2px inset #9b8c6c;
	border-radius: 2px;
	background: #e1d5bb;
	box-shadow: none;
}
.search-box { padding: 0 7px; }
.search-box:focus-within { border-color: #5d7651; }
.search-box input { color: #2c281f; font: 13px Arial, sans-serif; }
.search-box input::placeholder, input::placeholder, textarea::placeholder { color: #77705f; }
.search-icon { color: #66543a; font: 20px Georgia, serif; transform: none; }
.filter-box select, form select { padding: 0 23px 0 8px; color: #29251e; font: 13px Arial, sans-serif; }
.table-wrap { min-height: 250px; border-top: 1px solid #908168; }
.game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding-top: 14px; }
.game-card {
	border: 2px ridge #8c7b5e;
	border-radius: 1px;
    height: 100%;
	background: #c6b697;
	box-shadow: 1px 2px 3px rgba(49, 33, 16, 0.35);
	animation: none;
}
.game-card:hover { border-color: #6e5736; transform: none; box-shadow: 1px 2px 3px rgba(49, 33, 16, 0); }
.cover-art::after { border: 1px solid rgba(48, 37, 23, 0.2); }
.cover-art img, .game-card:hover .cover-art img { transition: none; transform: none; }
.cover-placeholder { background: #aaa086; }
.cover-placeholder-mark { color: #654a2b; font: bold 36px Georgia, serif; text-shadow: none; }
.cover-placeholder-title { color: #4b4436; font: bold 9px Arial, sans-serif; }
.status-tag {
	bottom: 6px;
	left: 6px;
	padding: 3px 5px;
	border: 1px solid #5f6748;
	color: #314629;
	background: rgba(231, 222, 198, 0.94);
	font: bold 10px Arial, sans-serif;
}
.status-tag[data-status="Playing"] { border-color: #99633d; color: #783e27; }
.status-tag[data-status="Completed"] { border-color: #517365; color: #315d4b; }
.status-tag[data-status="Backlog"] { border-color: #656f82; color: #444f67; }
.card-actions { top: 5px; right: 5px; gap: 3px; }
.card-edit, .card-remove {
	min-width: 27px;
	height: 25px;
	border: 1px outset #a59674;
	border-radius: 2px;
	color: #29251e;
	background: #e0d2b1;
	font: bold 11px Arial, sans-serif;
}
.card-edit { padding: 0 5px; border-color: #8a7552; color: #30281c; }
.card-remove { border-color: #9a6045; color: #603622; font-size: 16px; }
.card-edit:hover { color: #1e1a14; background: #eee1c2; }
.card-remove:hover { border-color: #8a4d35; color: #542817; background: #dfbca4; }
.card-meta { min-height: 61px; padding: 8px; }
.game-name { color: #2e281f; font: bold 15px Arial, sans-serif; }
.game-details { color: #5a5345; font: 12px Arial, sans-serif; }
.empty-state { min-height: 205px; }
.empty-symbol { width: 30px; height: 30px; margin-bottom: 9px; border: 2px ridge #807157; color: #6b4a2b; font: 20px Georgia, serif; box-shadow: none; }
.empty-state h3 { color: #3c3021; font: bold 19px Georgia, serif; }
.empty-state p { color: #5e5546; font: 13px Arial, sans-serif; }

.add-panel {
	position: relative;
	align-self: start;
	padding: 17px;
	border: 3px ridge #807157;
	border-top: 3px ridge #807157;
	border-radius: 5px;
	background: #d2c3a5;
	box-shadow: 1px 2px 4px rgba(49, 33, 16, 0.4);
}
.add-panel::before { color: #67583f; font: bold 10px Arial, sans-serif; content: 'ADMINISTRATION'; }
.add-panel[hidden]::before { content: none; }
.add-panel h2 { margin-bottom: 15px; color: #3d3020; }
form label { color: #393226; font: bold 12px Arial, sans-serif; }
form input, form textarea {
	border: 2px inset #9b8c6c;
	border-radius: 2px;
	color: #29251e;
	background: #e1d5bb;
	box-shadow: none;
	font: 13px Arial, sans-serif;
}
form input:focus, form textarea:focus, form select:focus { border-color: #5d7651; }
.cover-picker { border: 1px dashed #887b60; border-radius: 2px; color: #4b4436; background: #e1d5bb; font: 12px Arial, sans-serif; }
.cover-picker:hover { border-color: #5c7652; color: #314a2c; }
.cover-picker-icon { color: #5b4a30; font: 18px Arial, sans-serif; }
.form-actions { display: flex; gap: 7px; }
.form-actions .button-submit { flex: 1; }
.form-feedback { color: #3c6238; font: 12px Arial, sans-serif; }
.form-feedback.error { color: #8b3524; }
.storage-note { border-top: 1px solid #9a8b6d; color: #62583f; font: bold 10px Arial, sans-serif; }
.storage-note span { color: #4d783f; }
.footer { padding: 12px 4px 18px; border-top: 1px solid #8f8065; color: #514936; font: 10px Arial, sans-serif; }
.footer i { width: 7px; height: 7px; border-radius: 50%; background: #4d783f; box-shadow: none; }

.login-dialog {
	width: min(390px, calc(100% - 30px));
	padding: 22px;
	border: 3px ridge #75664c;
	border-radius: 5px;
	color: #29251e;
	background: #cfc09f;
	box-shadow: 2px 4px 9px rgba(48, 29, 12, 0.55);
}
.login-dialog::backdrop { background: rgba(45, 29, 16, 0.55); backdrop-filter: none; }
.login-dialog h2 { margin-bottom: 18px; color: #382b1e; font: bold 22px Georgia, serif; }
.login-dialog .eyebrow { color: #66583f; font: bold 10px Arial, sans-serif; }
.login-dialog label { margin-bottom: 5px; color: #393226; font: bold 12px Arial, sans-serif; }
.login-dialog input { height: 34px; margin-bottom: 13px; padding: 0 8px; }
.login-error { min-height: 16px; margin: -5px 0 7px; color: #8b3524; font: bold 11px Arial, sans-serif; }
.demo-warning { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #9a8b6d; color: #5b5243; font: 12px/1.35 Arial, sans-serif; }
.dialog-close { top: 7px; right: 7px; width: 25px; height: 25px; border: 1px outset #a59674; border-radius: 2px; color: #433724; background: #dfd1af; font: 16px Arial, sans-serif; }

@media (max-width: 900px) {
	.app-shell { width: min(100% - 24px, 720px); padding: 0 14px; }
	.workspace.admin-open { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.app-shell { width: calc(100% - 16px); margin: 8px auto; padding: 0 9px; }
	.topbar { min-height: 58px; gap: 6px; }
	.brand { gap: 6px; font: bold 12px Georgia, serif; }
	.brand-mark { width: 30px; height: 30px; font-size: 11px; }
	.top-actions, .admin-tools { gap: 4px; }
	.button { min-height: 29px; padding: 3px 6px; font-size: 11px; }
	.intro { min-height: 112px; padding: 12px; }
	h1 { font-size: 28px; }
	.intro-copy { max-width: 220px; font-size: 12px; line-height: 1.35; }
	.count-number { font-size: 30px; }
	.count-label { font-size: 8px; }
	.workspace { padding-top: 12px; }
	.library-panel { padding: 9px; }
	.game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.card-actions { opacity: 1; }
	.card-meta { min-height: 55px; padding: 6px; }
	.game-name { font-size: 13px; }
	.game-details { font-size: 11px; }
	.footer { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.site-settings { margin: 0 0 16px; border: 1px solid #98886a; background: #c9b999; }
.site-settings summary { padding: 8px 9px; color: #443723; background: #ddd0b2; font: bold 13px Arial, sans-serif; cursor: pointer; }
.site-settings[open] summary { border-bottom: 1px solid #9a8b6d; }
.site-settings form { padding: 10px; }
.site-settings form input { height: 31px; margin-bottom: 10px; }
.site-settings .form-actions { flex-wrap: wrap; }
.site-settings .form-actions .button-submit { flex-basis: 100%; }
.site-settings .form-feedback { margin-bottom: 0; }
.logo-input-row { min-height: 48px; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
#site-logo-preview { width: 56px; height: 44px; border: 1px solid #98886a; background: #e1d5bb; object-fit: contain; }
.game-notes { display: -webkit-box; overflow: hidden; margin-top: 5px; color: #625a4a; font: 11px/1.25 Arial, sans-serif; overflow-wrap: anywhere; line-clamp: 2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.option-settings { margin: 0 0 16px; border: 1px solid #98886a; background: #c9b999; }
.option-settings summary { padding: 8px 9px; color: #443723; background: #ddd0b2; font: bold 13px Arial, sans-serif; cursor: pointer; }
.option-settings[open] summary { border-bottom: 1px solid #9a8b6d; }
.option-editor { padding: 9px 10px 4px; }
.option-editor + .option-editor { border-top: 1px solid #a99a7b; }
.option-editor h3 { margin: 0 0 7px; color: #51432e; font: bold 12px Arial, sans-serif; }
.option-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.option-add-form input { min-width: 0; height: 29px; margin: 0; padding: 0 7px; font-size: 12px; }
.option-add-form .button { min-height: 29px; padding: 3px 8px; }
.option-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 5px; padding: 0; list-style: none; }
.option-list li { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; padding: 3px 4px 3px 7px; border: 1px solid #9a8b6e; background: #ddd0b3; color: #3d3529; font: 11px Arial, sans-serif; }
.option-list li span { overflow-wrap: anywhere; }
.option-remove { width: 19px; height: 19px; flex: 0 0 auto; border: 1px outset #b09d7a; border-radius: 2px; color: #603622; background: #e8dcc0; font: 14px Arial, sans-serif; line-height: 1; }
.option-remove:hover { border-color: #8a4d35; background: #dfbca4; }
.option-settings > .form-feedback { margin: 0 10px 8px; }
.toolbar { flex-wrap: wrap; align-items: center; }
.platform-filters { display: flex; align-items: center; gap: 9px; margin: 0; padding: 4px 8px 5px; border: 1px solid #98886a; }
.platform-filters legend { padding: 0 4px; color: #62583f; font: bold 11px Arial, sans-serif; }
.platform-filters label { display: inline-flex; align-items: center; gap: 4px; color: #393226; font: 12px Arial, sans-serif; cursor: pointer; }
.platform-filters input { width: 14px; height: 14px; margin: 0; accent-color: #4d783f; }
.wishlist-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; cursor: pointer; }
.wishlist-toggle input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: #4d783f; }
#game-platform:disabled { opacity: 0.5; }
.sort-box select { height: 32px; padding: 0 20px 0 8px; border: 2px inset #9b8c6c; border-radius: 2px; color: #29251e; background: #e1d5bb; font: 13px Arial, sans-serif; }
.view-switch {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 3px;
	padding: 3px;
	border: 1px solid #98886a;
	background: #c9b999;
}
.view-button {
	min-width: 48px;
	min-height: 27px;
	padding: 4px 9px;
	border: 1px solid transparent;
	border-radius: 2px;
	color: #51432e;
	background: transparent;
	font: bold 12px Arial, sans-serif;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.view-button:hover:not([aria-pressed="true"]) {
	border-color: #a39474;
	background: #e1d5bb;
}
.view-button[aria-pressed="true"] {
	border-color: #3c6337;
	color: #fff8e8;
	background: #4d783f;
	box-shadow: inset 0 1px 2px rgba(25, 39, 21, 0.35);
}

.game-card:not(.list-row) {
	height: auto;
	align-self: start;
	border: 0;
	box-shadow: inset 0 0 0 1px #8c7b5e;
	background: #c6b697;
}

@media (max-width: 560px) {
	.site-settings summary { font-size: 12px; }
	.game-notes { font-size: 10px; }
}

@media (min-width: 1200px) {
	.app-shell {
		width: calc(100% - clamp(32px, 4vw, 96px));
		max-width: none;
		margin: 16px auto;
		padding-right: clamp(20px, 2vw, 38px);
		padding-left: clamp(20px, 2vw, 38px);
	}

	.workspace.admin-open { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
	.game-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 205px)); justify-content: start; }
}

@media (min-width: 2000px) {
	.app-shell { border-width: 5px; }
	.game-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 225px)); gap: 16px; }
	.intro { min-height: 150px; }
	.workspace { gap: 22px; }
}

@media (max-width: 1199px) and (min-width: 561px) {
	.app-shell { width: calc(100% - 32px); max-width: none; padding-right: 16px; padding-left: 16px; }
	.game-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

@media (max-width: 560px) {
	.app-shell { width: calc(100% - 16px); max-width: none; padding-right: 9px; padding-left: 9px; }
	.intro { gap: 8px; }
	.workspace.admin-open { grid-template-columns: minmax(0, 1fr); }
	.toolbar { align-items: stretch; }
	.search-box, .sort-box, .filter-box { min-width: 0; }
	.platform-filters { justify-content: center; }
}

.game-card:not(.list-row) { display: flex; flex-direction: column; }
.game-card:not(.list-row) .cover-art {
	width: 100%;
	flex: 0 0 auto;
	height: auto;
	aspect-ratio: var(--cover-ratio, 2 / 3);
	background-image: var(--cover-background);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.game-card:not(.list-row) .cover-art img { object-fit: contain; }
.game-card:not(.list-row) .cover-art img {
	box-sizing: border-box;
	border: 1px solid #8c7b5e;
}
.game-card:not(.list-row) .card-meta { flex: 0 0 auto; min-height: 78px; padding: 8px 9px 10px; }
.game-card:not(.list-row) .game-name {
	min-height: 2.15em;
	margin-bottom: 4px;
	line-height: 1.08;
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.game-card:not(.list-row) .game-details { margin-top: 0; }

.game-grid:not(.list-view) {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 205px));
	justify-content: start;
	align-items: start;
	gap: 14px;
}

.game-card:not(.list-row) {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	border: 0;
	box-shadow: none;
}

.game-card:not(.list-row):hover {
	box-shadow: none;
}

.game-card:not(.list-row) .cover-art {
	border: 0;
	box-shadow: none;
	overflow: visible;
}

.game-card:not(.list-row) .card-meta {
	min-height: 0;
	padding: 9px 10px 11px;
	border-top: 1px solid #aa9876;
}

.game-card:not(.list-row) .game-name {
	min-height: 0;
	color: #30291e;
	font-size: 16px;
	line-height: 1.1;
}

.game-card:not(.list-row) .game-details {
	color: #51452f;
	font-size: 12px;
	line-height: 1.35;
	white-space: normal;
}

.game-grid:not(.list-view) .card-meta { text-align: center; }
.game-grid:not(.list-view) .game-name { margin-bottom: 4px; }
.game-region {
	margin-top: 2px;
	color: #51452f;
	font-size: 12px;
	line-height: 1.25;
}
.game-grid:not(.list-view) .game-region { display: none; }
.game-grid:not(.list-view) .game-notes {
	display: none;
	color: #51452f;
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}

.game-grid.list-view {
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 8px;
}

.game-grid.list-view .game-card {
	position: relative;
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 128px;
	padding: 8px;
	border: 1px solid #8c7b5e;
	background: #c6b697;
}
.game-grid.list-view .cover-art {
	position: relative;
	width: 76px;
	height: auto;
	aspect-ratio: var(--cover-ratio, 2 / 3);
	display: grid;
	place-items: center;
	overflow: hidden;
	border: 1px solid #8c7b5e;
	background-image: none;
}

.game-grid.list-view .cover-art img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.game-grid.list-view .card-meta {
	min-width: 0;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	align-items: center;
	column-gap: 10px;
	padding: 0;
	border: 0;
	text-align: left;
}

.game-grid.list-view .game-name {
	display: block;
	min-height: 0;
	margin: 0;
	white-space: normal;
}

.game-grid.list-view .game-details { margin-top: 4px; white-space: normal; }
.game-grid.list-view .game-region { grid-column: 1; }
.game-grid.list-view .game-notes {
	display: -webkit-box;
	grid-column: 1;
}
.game-grid.list-view .card-actions {
	position: static;
	grid-column: 2;
	grid-row: 1 / -1;
	opacity: 1;
}

.library-panel {
	padding: 0;
	border: 0;
	background: transparent;
}

@media (min-width: 2000px) {
	.game-grid:not(.list-view) { grid-template-columns: repeat(auto-fill, minmax(190px, 225px)); gap: 16px; }
}

@media (max-width: 560px) {
	.game-grid:not(.list-view) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.game-card:not(.list-row) .card-meta { min-height: 0; padding: 8px; }
	.game-card:not(.list-row) .game-name { font-size: 14px; }
}
/* Keep admin edit panel in view while scrolling */
@media (min-width: 901px) {
	.workspace.admin-open .add-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
}

/* Smoother motion */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }
html { scroll-behavior: smooth; }
.button, .card-actions, .search-box, .platform-filters label, .option-list li { transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out), color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out), opacity 220ms var(--ease-out); }
.button:active { transform: translateY(0) scale(0.98); }
.game-card { will-change: transform, opacity; transition: border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out); animation: card-arrive 420ms var(--ease-out) both; }
.cover-art img { transition: transform 600ms var(--ease-out); }
.add-panel { animation: panel-in 380ms var(--ease-out) both; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.game-card, .add-panel { animation: none; }
}

/* Sticky search/filter/view toolbar */
.library-panel .toolbar { position: sticky; top: 0; z-index: 20; margin: 0; padding-left: 0; padding-right: 0; background-color: #c4b395; border-bottom: 1px solid #908168; }

/* List view: consistent text sizing */
.game-grid.list-view .game-name { font: bold 15px/1.25 Arial, sans-serif; }
.game-grid.list-view .game-details, .game-grid.list-view .game-region, .game-grid.list-view .game-notes { font: 12px/1.35 Arial, sans-serif; letter-spacing: 0; }
.game-grid.list-view .game-region { margin-top: 4px; color: #5a5345; }
.game-grid.list-view .game-notes { margin-top: 4px; }

/* List view: fixed row height so every row is identical */
.game-grid.list-view .game-card { height: 132px; min-height: 132px; box-sizing: border-box; overflow: hidden; }
.game-grid.list-view .cover-art { width: 76px; height: 100%; aspect-ratio: auto; }
.game-grid.list-view .card-meta { max-height: 100%; overflow: hidden; }
.game-grid.list-view .game-name { display: -webkit-box; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.game-grid.list-view .game-details { overflow: hidden; }

/* Tile view: cards in a row match height; the text area stretches, covers are untouched */
.game-grid:not(.list-view) { align-items: stretch; }
.game-card:not(.list-row) { height: 100%; }
.game-card:not(.list-row) .card-meta { flex: 1 1 auto; min-height: 84px; }
.game-card:not(.list-row) .game-name { min-height: 2.2em; line-height: 1.1; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.game-card:not(.list-row) .game-details { overflow: hidden; }

/* Tile view: covers without art use a typical box-art ratio; details sit at a consistent spot */
.game-card:not(.list-row) .cover-art:not([style]) { aspect-ratio: 4 / 5; }
.game-card:not(.list-row) .card-meta { display: flex; flex-direction: column; justify-content: flex-start; }
.game-card:not(.list-row) .game-details { margin-top: auto; padding-top: 4px; }

/* Latency status row */
.storage-note.ping-row { display: flex; align-items: center; gap: 8px; font: 12px/1.4 system-ui, 'Segoe UI', Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.ping-row .ping-dot { flex: none; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #8b8b80; font-size: 0; transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
.ping-row .ping-label { font-weight: 600; }
.ping-row .ping-value { margin: 0 0 0 auto; color: inherit; font: 600 12px/1.4 ui-monospace, 'SF Mono', Consolas, monospace; font-variant-numeric: tabular-nums; }
.ping-row[data-state='good'] .ping-dot { background: #2e9e57; box-shadow: 0 0 0 3px rgba(46, 158, 87, 0.2); }
.ping-row[data-state='fair'] .ping-dot { background: #d9a21b; box-shadow: 0 0 0 3px rgba(217, 162, 27, 0.2); }
.ping-row[data-state='bad'] .ping-dot { background: #c9442f; box-shadow: 0 0 0 3px rgba(201, 68, 47, 0.2); }

/* Single centred footer */
.footer { justify-content: center; margin-top: 24px; padding: 20px 8px 26px; text-align: center; font: 500 12px/1.5 system-ui, 'Segoe UI', Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }

/* Wishlist buy links */
.cover-art { position: relative; }
.buy-links { position: absolute; z-index: 5; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; opacity: 0; transition: opacity 200ms var(--ease-out); }
.game-card:hover .buy-links, .buy-links:focus-within, .buy-links.open { opacity: 1; }
.buy-links-list { display: none; }
.buy-button { display: inline-block; padding: 7px 14px; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 4px; color: #fff; background: rgba(28, 32, 28, 0.92); font: 600 12px/1.2 system-ui, 'Segoe UI', Arial, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.buy-button:hover { background: #2e7d4a; transform: translateY(-1px); }
.buy-menu { display: none; min-width: 150px; max-width: 220px; flex-direction: column; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 4px; background: rgba(28, 32, 28, 0.97); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.buy-links.open .buy-menu { display: flex; animation: panel-in 160ms var(--ease-out) both; }
.buy-menu-item { padding: 8px 12px; color: #fff; font: 12px/1.3 system-ui, 'Segoe UI', Arial, sans-serif; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-menu-item:hover, .buy-menu-item:focus-visible { background: #2e7d4a; }
.buy-menu-item + .buy-menu-item { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.game-grid.list-view .cover-art .buy-links { display: none; }
.game-grid.list-view .buy-links-list { display: flex; position: relative; grid-column: 1; left: auto; bottom: auto; margin-top: 6px; transform: none; opacity: 1; align-items: flex-start; flex-direction: column-reverse; }
.game-grid.list-view .buy-links-list .buy-menu { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; z-index: 6; }
@media (hover: none) { .buy-links { opacity: 1; } }

.links-editor { margin: 12px 0 4px; }
.links-title { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.link-row input { min-width: 0; height: 32px; padding: 0 8px; box-sizing: border-box; font: 12px Arial, sans-serif; }
.links-editor[hidden] { display: none; }

/* Buy links: match the parchment theme */
.buy-links { gap: 4px; }
.buy-button { padding: 3px 10px; min-height: 25px; box-sizing: border-box; border: 2px outset #b5a485; border-radius: 3px; color: #282319; background: #d8c9a8; box-shadow: 1px 1px 2px rgba(43, 31, 17, 0.45); font: bold 12px/1.4 Arial, sans-serif; }
.buy-button:hover { transform: none; border-color: #88734f; color: #241d14; background: #e6d8b9; }
.buy-menu { border: 2px outset #b5a485; border-radius: 3px; background: #d8c9a8; box-shadow: 1px 2px 4px rgba(43, 31, 17, 0.5); }
.buy-menu-item { color: #282319; font: 12px/1.3 Arial, sans-serif; }
.buy-menu-item:hover, .buy-menu-item:focus-visible { color: #1e1a14; background: #eee1c2; }
.buy-menu-item + .buy-menu-item { border-top: 1px solid #aa9876; }
.links-title { color: #3d3020; font: bold 12px Arial, sans-serif; }
.link-row input { border: 2px inset #9b8c6c; border-radius: 2px; color: #29251e; background: #e1d5bb; }

/* Change log dialog */
.changelog-dialog { width: min(640px, calc(100% - 32px)); max-height: 85vh; padding: 18px; border: 3px ridge #807157; border-radius: 3px; color: #29251e; background: #d2c3a5; font: 13px Arial, sans-serif; box-shadow: 0 8px 30px rgba(30, 20, 10, 0.55); }
.changelog-dialog::backdrop { background: rgba(30, 22, 12, 0.55); }
.changelog-dialog[open] { animation: panel-in 220ms var(--ease-out) both; }
.changelog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.changelog-head h2 { margin: 0; }
.changelog-form { display: grid; grid-template-columns: 1fr 160px; gap: 8px; margin-bottom: 8px; }
.changelog-form textarea, .changelog-form .button { grid-column: 1 / -1; }
.changelog-form input, .changelog-form textarea { min-width: 0; box-sizing: border-box; padding: 6px 8px; border: 2px inset #9b8c6c; border-radius: 2px; color: #29251e; background: #e1d5bb; font: 13px Arial, sans-serif; }
.changelog-list { display: grid; gap: 8px; margin-top: 10px; }
.changelog-entry { padding: 10px 12px; border: 1px solid #8c7b5e; background: #c6b697; }
.changelog-entry header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.changelog-entry time { margin-right: auto; color: #5a5345; font-size: 12px; }
.changelog-entry p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.changelog-empty { margin: 0; color: #5a5345; }

.activity-actor { padding: 1px 7px; border: 1px solid #8c7b5e; border-radius: 2px; background: #d8c9a8; font-size: 11px; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #2e9e57; vertical-align: middle; animation: live-pulse 1.8s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.changelog-form[hidden] { display: none; }

/* Tile cards: restore the outline */
.game-card:not(.list-row) { border: 2px ridge #8c7b5e; box-shadow: 1px 2px 3px rgba(49, 33, 16, 0.35); }
.game-card:not(.list-row):hover { border-color: #6e5736; box-shadow: 1px 2px 3px rgba(49, 33, 16, 0.35); }

/* Larger list covers */
.game-grid.list-view .game-card { grid-template-columns: 120px minmax(0, 1fr) auto; height: 176px; min-height: 176px; }
.game-grid.list-view .cover-art, .game-grid.list-view .cover-art:not([style]) { width: 120px; height: auto; max-height: 160px; aspect-ratio: var(--cover-ratio, 2 / 3); align-self: center; }

@media (max-width: 560px) {
	.game-grid.list-view .game-card { grid-template-columns: 90px minmax(0, 1fr) auto; height: 140px; min-height: 140px; gap: 10px; }
	.game-grid.list-view .cover-art, .game-grid.list-view .cover-art:not([style]) { width: 90px; max-height: 124px; }
	.game-grid.list-view .game-name { font-size: 14px; }
	.game-grid.list-view .game-details, .game-grid.list-view .game-region, .game-grid.list-view .game-notes { font-size: 11px; }
	.game-grid.list-view .card-meta { grid-template-columns: minmax(0, 1fr); }
	.game-grid.list-view .card-actions { grid-column: 3; }
}

@media (max-width: 560px) {
	.library-panel .toolbar { flex-wrap: wrap; gap: 6px; }
	.library-panel .toolbar > * { min-width: 0; }
	.library-panel .toolbar select, .library-panel .toolbar input[type="search"], .library-panel .toolbar input[type="text"] { max-width: 100%; }
	body { overflow-x: hidden; }
}

/* Wishlist priority groups */
.priority-heading { grid-column: 1 / -1; margin: 10px 0 0; padding: 4px 0 6px; border-bottom: 2px solid #8c7b5e; color: #3a2a14; font: bold 14px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.priority-heading:first-child { margin-top: 0; }
.priority-heading { display: flex; align-items: center; gap: 8px; }
.priority-heading .trophy-icon { flex: 0 0 auto; width: 28px; height: 35px; object-fit: contain; filter: none; }
.priority-heading.priority-want-first { color: #2a7fb8; border-bottom-color: #5aa9d6; }
.priority-heading.priority-want-soon { color: #a87a0a; border-bottom-color: #d4a72c; }
.priority-heading.priority-want-later { color: #666e78; border-bottom-color: #9aa1a9; }
.priority-heading.priority-maybe { color: #9a5428; border-bottom-color: #c27a4a; }

/* Loading screen */
body.is-loading { overflow: hidden; }
.loading-screen { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #c9743d; color: #2b1d0e; transition: opacity 350ms ease; }
.loading-screen.done { opacity: 0; pointer-events: none; }
.loading-spinner { width: 54px; height: 54px; border: 5px solid rgba(43, 29, 14, 0.2); border-top-color: #2b1d0e; border-radius: 50%; animation: loading-spin 0.9s linear infinite; }
.loading-title { margin: 12px 0 0; font: 700 22px/1.2 Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.loading-status { margin: 0; font: 13px/1.4 Arial, sans-serif; letter-spacing: .04em; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
.priority-heading.priority-none { color: #6b6150; }

/* Colour themes: the page is hue-rotated; images and swatches are counter-rotated so they keep true colours */
html { --theme-hue: 0deg; filter: hue-rotate(var(--theme-hue)); transition: filter .4s ease; }
html[data-theme="forest"] { --theme-hue: 95deg; }
html[data-theme="ocean"] { --theme-hue: 195deg; }
html[data-theme="plum"] { --theme-hue: 275deg; }
img:not(.cover-art img), .cover-art { filter: hue-rotate(calc(var(--theme-hue) * -1)); }
.theme-picker { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.theme-swatch { --own: 0deg; width: 22px; height: 22px; padding: 0; border: 2px solid #5a5345; border-radius: 50%; background: #c9743d; cursor: pointer; filter: hue-rotate(calc(var(--own) - var(--theme-hue))); transition: transform .2s ease; }
.theme-swatch[data-theme-choice="forest"] { --own: 95deg; }
.theme-swatch[data-theme-choice="ocean"] { --own: 195deg; }
.theme-swatch[data-theme-choice="plum"] { --own: 275deg; }
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.active { box-shadow: 0 0 0 2px #f1e6cc, 0 0 0 4px #29251e; }

/* Dialogs sit in the browser top layer, so they need the theme applied directly */
dialog { filter: hue-rotate(var(--theme-hue)); }