/* Monster Selection Modal Styles */
/* Renamed from .setup-modal to .monster-selection-modal */
.cmp-monster-selection.monster-selection-modal { 
	position: fixed; inset: 0; display:flex; justify-content:center; align-items:center; padding:4vh 0 6vh; z-index:15050; /* Above blackout (7000) & profiles (<=15020) */
	/* Lighter overlay */
	background: rgba(0,0,0,.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	transition: opacity .40s ease, transform .45s ease; will-change: opacity, transform; opacity:1; transform: translateY(0) scale(1); visibility:visible; pointer-events:auto;
	overflow:auto; width:100%; box-sizing:border-box;
}
.cmp-monster-selection.monster-selection-modal.demoted {
	/* Drop below profiles and remove backdrop to avoid a full-screen black state */
	z-index: 15010; /* below profiles 15020 */
	background: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none;
  /* While demoted, do not intercept any mouse/touch events */
  pointer-events: none;
}
.cmp-monster-selection.monster-selection-modal.hidden { opacity:0; transform: translateY(24px) scale(.94); visibility:hidden; pointer-events:none; }


.cmp-monster-selection .setup-frame { 
	/* Dark, bold in-game panel styling (lightened more per feedback) */
	background: linear-gradient(180deg,#353535 0%, #2c2c2c 100%);
	border:4px solid #111; box-shadow: 14px 14px 0 #000, 0 0 0 2px #000 inset, 0 22px 42px -14px rgba(0,0,0,.85);
	border-radius:0; padding:24px 28px 14px; width: min(96vw, 1180px); display:flex; flex-direction:column; position:relative; overflow:hidden; margin:0 auto; /* ensure horizontal centering */
	color:#e6e6e6;
}
/* Internal scroll region so only monster list / sidebar scrolls, footer stays accessible */
.cmp-monster-selection .setup-body { flex:1 1 auto; min-height:0; padding-right:0; }
.cmp-monster-selection .setup-body > .selection-sidebar { padding-right:4px; }
.cmp-monster-selection .selection-sidebar { padding-right:4px; }
.cmp-monster-selection { color:#e6e6e6; }
.cmp-monster-selection .setup-title { font-family:'Bangers', cursive; font-size:52px; color:#FFD700; text-align:center; letter-spacing:2px; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000; margin-bottom:20px; filter: drop-shadow(0 5px 0 #000); }
.cmp-monster-selection .setup-controls { display:grid; grid-template-columns: 240px 1fr 240px; gap:16px; align-items:center; margin-bottom:18px; }
.cmp-monster-selection .setup-controls [data-action="profiles"],
.cmp-monster-selection .setup-controls [data-action="random"] { width:100%; justify-self:stretch; white-space:nowrap; }
.cmp-monster-selection .setup-controls .player-count { justify-self:center; display:flex; justify-content:center; }
.cmp-monster-selection { --control-h: 48px; --control-font: 20px; --tile-bg: #fff; }
.cmp-monster-selection .setup-controls .player-count { justify-self:center; }
.cmp-monster-selection .pill-btn { background: #223246 !important; border:3px solid #111; border-radius:0; padding:0 18px; height: var(--control-h); font-weight:900; box-shadow:8px 8px 0 #000; cursor:pointer; letter-spacing:1px; text-transform:uppercase; position:relative; transition:transform .18s ease, box-shadow .18s ease, filter .28s ease; color:#fff !important; font-size: var(--control-font); font-family:'Bangers',cursive; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.cmp-monster-selection .pill-btn.gold { background: linear-gradient(var(--color-brand-gold,#ffd700), #ffb400); color:#000; }
.cmp-monster-selection .pill-btn:hover,
.cmp-monster-selection .start-btn:not([disabled]):hover { transform: translateY(-2px); box-shadow:5px 5px 0 #000; filter:brightness(1.04) saturate(1.05); }
.cmp-monster-selection .pill-btn:active,
.cmp-monster-selection .start-btn:not([disabled]):active { transform: translateY(0) scale(.97); box-shadow:4px 4px 0 #000; filter:brightness(.97); }
.cmp-monster-selection .pill-btn:focus-visible,
.cmp-monster-selection .start-btn:focus-visible { outline:3px solid #666; outline-offset:3px; }
.cmp-monster-selection .dropdown { position:relative; }
.cmp-monster-selection .dropdown-toggle { position:relative; display:flex; align-items:center; justify-content:space-between; min-width:210px; font-family:'Bangers',cursive; font-size: var(--control-font); letter-spacing:1px; padding:0 16px 0 26px; height: var(--control-h); border:4px solid #000; border-radius:0; background:linear-gradient(180deg,#ffc21f 0%, #ff9500 55%, #ffae00 56%, #ffdf7a 100%); color:#000; transition:transform .18s ease, box-shadow .18s ease, filter .3s; }
.cmp-monster-selection .dropdown-toggle:hover { transform:translateY(-2px); filter:brightness(1.05) saturate(1.05); }
.cmp-monster-selection .dropdown.open .dropdown-toggle { transform:translateY(0) scale(.98); }
.cmp-monster-selection .dropdown .chev { font-weight:900; font-size:26px; line-height:1; display:inline-block; transition:transform .25s ease; text-shadow:none; }
.cmp-monster-selection .dropdown.open .dropdown-toggle .chev { transform:rotate(180deg); }
.cmp-monster-selection .dropdown-menu { position:absolute; top:108%; left:0; background:#fffef8; border:4px solid #000; box-shadow:8px 8px 0 #000; list-style:none; padding:8px 0 10px; margin:0; min-width:230px; display:block; opacity:0; transform:translateY(10px) scale(.96); pointer-events:none; transition:opacity .25s ease, transform .3s cubic-bezier(.22,1.15,.32,1); z-index:120; font-family:'Bangers',cursive; border-radius:0; }
.cmp-monster-selection .dropdown.open .dropdown-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.cmp-monster-selection .dropdown-menu::before { content:""; position:absolute; top:-14px; left:34px; width:26px; height:14px; background:#fffef8; border:4px solid #000; border-bottom:none; clip-path:polygon(0 100%,50% 0,100% 100%); box-sizing:border-box; }
.cmp-monster-selection .dropdown-menu li { padding:12px 18px; cursor:pointer; font-weight:900; font-size: var(--control-font); color:#000 !important; letter-spacing:.5px; text-transform:uppercase; position:relative; }
.cmp-monster-selection .dropdown-menu li+li { border-top:2px dotted rgba(0,0,0,.15); }
.cmp-monster-selection .dropdown-menu li:hover { background:linear-gradient(90deg,#ffe9a8,#ffd76a); }
.cmp-monster-selection .dropdown-menu li:active { background:linear-gradient(90deg,#ffc843,#ffad0a); }
.cmp-monster-selection .setup-body { display:flex; flex-direction:column; gap:16px; flex:1; min-height:0; }
.cmp-monster-selection .selection-sidebar { display:flex; flex-direction:column; gap:16px; align-items:center; width:100%; }
.cmp-monster-selection .cards-sidebar { display:flex; flex-direction:column; gap:16px; align-items:center; width:100%; overflow-y:auto; }
.cmp-monster-selection .monster-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 12px; font-family:'Bangers',cursive; letter-spacing:1px; color:#fff; }
.cmp-monster-selection .monster-pager .pager-btn { background:#223246 !important; border:3px solid #111; box-shadow:8px 8px 0 #000; padding:0 14px; height: var(--control-h); min-width: 48px; cursor:pointer; font-family:'Bangers',cursive; font-size: var(--control-font); color:#fff !important; line-height:1; transition:transform .18s ease, box-shadow .18s ease, filter .25s ease; border-radius:0; display:inline-flex; align-items:center; justify-content:center; letter-spacing:1px; white-space:nowrap; font-weight:900; }
.cmp-monster-selection .monster-pager .pager-btn:hover:not([disabled]) { transform:translate(-2px,-2px); box-shadow:5px 5px 0 #000; filter:brightness(1.05); }
.cmp-monster-selection .monster-pager .pager-btn:active:not([disabled]) { transform:translate(0,0); box-shadow:2px 2px 0 #000; }
.cmp-monster-selection .monster-pager .pager-btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:2px 2px 0 #000; }
.cmp-monster-selection .monster-pager .pager-status { font-size: var(--control-font); color:#fff; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000; display:flex; align-items:center; justify-content:center; height: var(--control-h); line-height:1; padding:0 6px; white-space:nowrap; }

/* When viewport is very short, shift alignment upward so top is visible */
@media (max-height: 640px) {
	.cmp-monster-selection.monster-selection-modal { align-items:flex-start; }
}
.cmp-monster-selection .cards-grid { display:flex; flex-direction:row; gap:16px; padding:4px; overflow-x:auto; overflow-y:hidden; flex:1; min-height:0; align-items:stretch; }
.cmp-monster-selection .cards-list { display:flex; flex-direction:row; flex-wrap:nowrap; gap:12px; width:100%; justify-content:center; align-items:stretch; overflow-x:auto; padding:20px 0; }
.cmp-monster-selection .cards-grid::-webkit-scrollbar,
.cmp-monster-selection .cards-list::-webkit-scrollbar { height:10px; }
.cmp-monster-selection .cards-grid::-webkit-scrollbar-track,
.cmp-monster-selection .cards-list::-webkit-scrollbar-track { background:#161616; border:2px solid #111; box-shadow:inset 2px 2px 0 #000; }
.cmp-monster-selection .cards-grid::-webkit-scrollbar-thumb,
.cmp-monster-selection .cards-list::-webkit-scrollbar-thumb { background:#2a2a2a; border:2px solid #111; box-shadow:2px 2px 0 #000; }
.cmp-monster-selection .cards-grid::-webkit-scrollbar-thumb:hover,
.cmp-monster-selection .cards-list::-webkit-scrollbar-thumb:hover { background:#333; }
.cmp-monster-selection [data-monster-card].is-unavailable { opacity:.6; filter: grayscale(100%); cursor:not-allowed; }
.cmp-monster-selection [data-monster-card][draggable="true"] { cursor: grab; }
.cmp-monster-selection [data-monster-card][draggable="true"]:active { cursor: grabbing; }
.cmp-monster-selection .monster-card { 
	background: transparent; 
	border: none; 
	box-shadow: none; 
	padding: 0; 
	position: relative; 
	cursor: pointer; 
	flex-shrink: 0; 
	width: 130px; 
	min-width: 100px; 
}
.cmp-monster-selection .monster-card:hover { transform: none; } /* Hover handled by polaroid now */
.cmp-monster-selection .mini-list { display:flex; flex-wrap:nowrap; gap:12px; width:100%; justify-content:center; align-items:stretch; overflow-x:auto; padding:4px 0; }
.cmp-monster-selection .mini-card { width:110px; max-width:130px; flex-grow:0; flex-shrink:2; aspect-ratio:1; border:3px solid #111; box-shadow:6px 6px 0 #000; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 6px; background: var(--mini-bg, #1f1f1f); color:#e6e6e6; flex-direction:column; min-width:70px; }
.cmp-monster-selection .mini-card.vertical { width:110px; max-width:130px; flex-grow:0; flex-shrink:2; aspect-ratio:1; }
.cmp-monster-selection .mini-card.human-placeholder { background:#2a2a1a; align-items:center; justify-content:center; }
.cmp-monster-selection .mini-card.human-placeholder .mini-photo.placeholder { font-family:'Bangers',cursive; font-size:40px; color:#fff; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border:none; background:transparent; box-shadow:none; }
.cmp-monster-selection .mini-card.human-placeholder .mini-name { display:none; }
.cmp-monster-selection .mini-card .mini-name { display:none; } /* Hide names on all mini-cards */
.cmp-monster-selection .mini-card[data-has-monster] { background:#ffffff !important; } /* White background when monster is assigned */
.cmp-monster-selection .mini-card.human { background: var(--mini-bg, #26222a); }
.cmp-monster-selection .mini-card.cpu { background: #1e2a33; flex-direction:column; align-items:center; justify-content:center; padding-left:0; color:#e6e6e6; text-align:center; }
.cmp-monster-selection .mini-card.cpu.vertical { width:110px; max-width:130px; flex-grow:0; flex-shrink:2; aspect-ratio:1; align-items:center; padding:8px 6px; }
.cmp-monster-selection .mini-card.droppable { outline:3px solid transparent; }
.cmp-monster-selection .mini-card.droppable.drag-over { outline-color:#ffb400; box-shadow:0 0 0 4px #000 inset, 6px 6px 0 #000; }
.cmp-monster-selection .mini-card[draggable="true"] { cursor: grab; }
.cmp-monster-selection .mini-card[draggable="true"]:active { cursor: grabbing; }
.cmp-monster-selection .mini-photo {
	width:70px; height:70px; border:2px solid #111;
	/* Let the monster theme color subtly tint the photo area if provided */
	background:
		linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.34) 100%),
		var(--mini-bg, #0f0f0f);
	display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 2px #222;
}
.cmp-monster-selection .mini-photo img { width:100%; height:100%; object-fit:contain; }
.cmp-monster-selection .mini-name { font-weight:900; font-size:15px; text-align:center; }
.cmp-monster-selection .cpu-label { font-family:'Bangers', cursive; font-size:36px; font-weight:900; color:#ffdf3d; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; }
.cmp-monster-selection .cpu-sub { display:none; }
.cmp-monster-selection .setup-footer { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.cmp-monster-selection .reset-link { background:#223246 !important; border:3px solid #000; color:#fff !important; font-weight:900; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; filter: drop-shadow(0 2px 0 #000); padding:0 16px; height: var(--control-h); font-size: var(--control-font); box-shadow:6px 6px 0 #000; border-radius:0; font-family:'Bangers',cursive; letter-spacing:1px; flex-shrink:0; white-space:nowrap; }
.cmp-monster-selection .monster-pager { flex:1; display:flex; align-items:center; justify-content:center; gap:14px; margin:0; font-family:'Bangers',cursive; letter-spacing:1px; color:#fff; }
.cmp-monster-selection .start-btn { background:#3a3a3a; color:#e6e6e6; border:3px solid #111; box-shadow:8px 8px 0 #000; padding:0 20px; height: var(--control-h); font-size: var(--control-font); font-family:'Bangers',cursive; font-weight:900; letter-spacing:1px; cursor:not-allowed; transition:transform .18s ease, box-shadow .18s ease, filter .28s ease; position:relative; border-radius:0; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; white-space:nowrap; }
/* Footer controls now inherit the global --control-h / --control-font so they scale with mobile breakpoints */
.cmp-monster-selection .setup-footer .footer-actions { margin-left:auto; display:flex; gap:12px; align-items:center; }
.cmp-monster-selection .reset-link { background:#223246 !important; border:3px solid #000; color:#fff !important; font-weight:900; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; filter: drop-shadow(0 2px 0 #000); padding:0 16px; height: var(--control-h); font-size: var(--control-font); box-shadow:6px 6px 0 #000; border-radius:0; font-family:'Bangers',cursive; letter-spacing:1px; }
.cmp-monster-selection .start-btn { background:#3a3a3a; color:#e6e6e6; border:3px solid #111; box-shadow:8px 8px 0 #000; padding:0 20px; height: var(--control-h); font-size: var(--control-font); font-family:'Bangers',cursive; font-weight:900; letter-spacing:1px; cursor:not-allowed; transition:transform .18s ease, box-shadow .18s ease, filter .28s ease; position:relative; border-radius:0; display:inline-flex; align-items:center; justify-content:center; }
.cmp-monster-selection .start-btn:not([disabled]) { background:#2f7a2f; cursor:pointer; color:#fff; }
.cmp-monster-selection .setup-close { position:absolute; top:14px; right:14px; background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%); border:2px solid #000; color:#fff; width:48px; height:48px; font-size:26px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:3px 3px 0 #000; border-radius:0; transition: transform .18s ease, box-shadow .18s ease, filter .25s ease; }
.cmp-monster-selection .setup-close:hover { transform:translateY(-2px); box-shadow:4px 4px 0 #000; filter:brightness(1.05); }
.cmp-monster-selection .setup-close:active { transform:translateY(0) scale(.96); box-shadow:2px 2px 0 #000; }
.cmp-monster-selection .setup-close:focus-visible { outline:3px solid #666; outline-offset:3px; }
@media (max-width: 1180px) { .cmp-monster-selection .setup-frame { width:min(96vw,1080px); } }
@media (max-width: 980px) { .cmp-monster-selection .setup-frame { padding:20px 22px 24px; } .cmp-monster-selection .setup-body { grid-template-columns: 1fr; } .cmp-monster-selection .selection-sidebar { align-items:center; } }
@media (max-width: 640px) { .cmp-monster-selection .setup-title { font-size:44px; } }

/* Mobile-first adaptations - Full screen modal */
@media (max-width: 720px) {
	.cmp-monster-selection.monster-selection-modal { 
		align-items: stretch; 
		padding: 0; 
		justify-content: stretch;
	}
	.cmp-monster-selection .setup-frame {
		width: 100vw; 
		height: 100vh; 
		max-height: 100vh; 
		margin: 0;
		padding: 12px 10px 8px; 
		border-width: 0; 
		box-shadow: none;
		display: flex; 
		flex-direction: column;
		border-radius: 0;
		--control-h: 40px;
		--control-font: 14px;
	}
	.cmp-monster-selection .setup-title { font-size: 32px; margin-bottom: 8px; }
	
	/* Top controls: equal width side buttons; centered dropdown */
	.cmp-monster-selection .setup-controls { display:grid; grid-template-columns: 140px 1fr 140px; gap:8px; align-items:center; margin-bottom:10px; }
	.cmp-monster-selection .setup-controls [data-action="profiles"],
	.cmp-monster-selection .setup-controls [data-action="random"] { width:100%; justify-self:stretch; }
	.cmp-monster-selection .setup-controls .player-count { justify-self:center; }
	
	/* Consistent button styling for all controls (inherit var-based sizing; adjust only padding) */
	.cmp-monster-selection .dropdown-toggle { padding: 0 12px 0 16px; }
	.cmp-monster-selection .pill-btn { padding: 0 12px; }
	
	/* Improve cards-sidebar positioning for better name visibility */
	.cmp-monster-selection .cards-sidebar { 
		overflow-y: auto; 
		flex: 1; 
		min-height: 0;
	}
	
	.cmp-monster-selection .mini-card, .cmp-monster-selection .mini-card.vertical { 
		width: 80px; 
		min-height: 80px; 
		max-height: 90px;
		padding: 6px 4px; 
		border-width: 2px;
		box-shadow: 3px 3px 0 #000;
	}
	.cmp-monster-selection .mini-photo { width: 50px; height: 50px; border-width: 1px; }
	.cmp-monster-selection .mini-name { font-size: 12px; }
	.cmp-monster-selection .cpu-label { font-size: 22px; }
	
	/* Footer: three elements - reset, pager, start */
	.cmp-monster-selection .setup-footer { 
		position: sticky; 
		bottom: 0; 
		left: 0; 
		right: 0; 
		padding: 8px 4px 4px; 
		background: linear-gradient(to top, rgba(28,28,28,.98), rgba(28,28,28,.65) 55%, rgba(28,28,28,0)); 
		display: flex;
		flex-direction: row;
		align-items: center; 
		justify-content: space-between; 
		gap: 8px;
	}
	.cmp-monster-selection .reset-link { 
		flex: 0 0 auto;
		width: auto; 
		padding: 0 12px; 
		min-width: 120px;
	}
	.cmp-monster-selection .monster-pager {
		flex: 0 0 auto;
		margin: 0;
	}
	.cmp-monster-selection .start-btn { 
		flex: 0 0 auto;
		width: auto; 
		padding: 0 12px; 
		min-width: 120px;
	}
}
/* Landscape small screens: optimized for horizontal orientation */
@media (max-height: 480px) and (orientation: landscape) {
	.cmp-monster-selection.monster-selection-modal { padding: 0; }
	.cmp-monster-selection .setup-frame { padding: 8px 10px 6px; border-width: 0; box-shadow: none; }
	.cmp-monster-selection .setup-title { font-size: 24px; margin-bottom: 4px; }
	.cmp-monster-selection .setup-controls { gap: 6px; margin-bottom: 8px; }
	.cmp-monster-selection .cards-grid { gap: 10px; overflow: hidden; }
	.cmp-monster-selection .mini-card, .cmp-monster-selection .mini-card.vertical { min-height: 70px; padding: 4px 3px; }
	.cmp-monster-selection .mini-photo { width: 45px; height: 45px; }
	.cmp-monster-selection .mini-name { font-size: 11px; }
	.cmp-monster-selection .cpu-label { font-size: 20px; }
	.cmp-monster-selection .pill-btn { height: 32px; font-size: 12px; padding: 0 10px; }
	.cmp-monster-selection .dropdown-toggle { height: 32px; font-size: 13px; }
}
/* Very small mobile devices - optimized single column layout */
@media (max-width: 480px) {
	.cmp-monster-selection .setup-frame {
		--control-h: 36px;
		--control-font: 13px;
	}
	.cmp-monster-selection .setup-controls { 
		flex-direction: column;
		gap: 6px; 
	}
	.cmp-monster-selection .setup-controls [data-action="profiles"],
	.cmp-monster-selection .setup-controls .player-count,
	.cmp-monster-selection .setup-controls [data-action="random"] {
		width: 100%;
		min-width: auto;
		max-width: none;
	}
	.cmp-monster-selection .cards-grid { grid-template-columns: 1fr; gap: 10px; }
	.cmp-monster-selection .setup-title { font-size: 28px; }
	.cmp-monster-selection .pill-btn { padding: 6px 10px; }
	.cmp-monster-selection .dropdown-toggle { padding: 0 12px; }
	
	/* Enhanced cards-sidebar for very small screens */
	.cmp-monster-selection .cards-sidebar { 
		padding-top: 10px; 
		padding-bottom: 16px;
		overflow-y: auto; 
		flex: 1; 
		min-height: 0;
	}
	
	.cmp-monster-selection .mini-card, .cmp-monster-selection .mini-card.vertical { min-height: 60px; max-height: 70px; padding: 4px 3px; }
	.cmp-monster-selection .mini-photo { width: 45px; height: 45px; }
	.cmp-monster-selection .mini-name { font-size: 11px; }
	.cmp-monster-selection .cpu-label { font-size: 20px; }
	
	/* Monster cards mobile sizing - smaller for very small screens */
	.cmp-monster-selection .monster-card { width: 110px; min-width: 90px; }
	
	/* Footer adjustments for very small screens */
	.cmp-monster-selection .setup-footer {
		flex-direction: column;
		gap: 6px;
		padding: 6px 4px 4px;
	}
	.cmp-monster-selection .reset-link,
	.cmp-monster-selection .start-btn { 
		width: 100%;
		min-width: auto;
	}
	.cmp-monster-selection .monster-pager {
		order: 1;
		width: 100%;
		gap: 8px;
	}
	.cmp-monster-selection .reset-link {
		order: 2;
	}
	.cmp-monster-selection .start-btn {
		order: 3;
	}
}

/* Polaroid styles for monster selection cards */
.cmp-monster-selection .monster-card .polaroid {
	background: linear-gradient(145deg, #fefefe 0%, #f8f8f8 50%, #f0f0f0 100%);
	padding: 8px 8px 28px 8px;
	box-shadow: 
		0 2px 4px rgba(0,0,0,0.25),
		0 4px 8px rgba(0,0,0,0.15),
		0 8px 16px rgba(0,0,0,0.1),
		inset 0 1px 0 rgba(255,255,255,0.9),
		inset 0 -1px 0 rgba(0,0,0,0.05);
	border-radius: 2px;
	border: 2px solid #ffffff;
	position: relative;
	width: 130px;
	height: 160px;
	background-image: 
		radial-gradient(circle at 20% 20%, rgba(255,248,220,.3) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(245,245,220,.2) 0%, transparent 50%),
		linear-gradient(145deg, #fefefe 0%, #f8f8f8 50%, #f0f0f0 100%);
	background-size: 130px 130px, 98px 98px, 100% 100%;
	transform: rotate(var(--rotation, 0deg));
	transition: all 0.3s ease;
}

.cmp-monster-selection .monster-card .polaroid img {
	width: 114px;
	height: 95px;
	object-fit: cover;
	border-radius: 1px;
	display: block;
	margin: 0 auto;
	border: 1px solid #000;
	box-shadow: 
		inset 0 0 0 1px rgba(0,0,0,0.08),
		0 2px 4px rgba(0,0,0,0.15);
	background: var(--monster-tint, #ffffff);
	filter: contrast(0.95) saturate(0.9) sepia(0.05);
}

.cmp-monster-selection .polaroid-caption {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%) rotate(-1deg);
	font-family: 'Kalam', cursive;
	font-size: 13px;
	color: #2c2c2c;
	font-weight: 600;
	text-align: center;
	width: calc(100% - 16px);
	letter-spacing: 0.3px;
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.cmp-monster-selection .polaroid-fallback {
	width: 114px;
	height: 95px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e0e0e0;
	font-family: 'Bangers', cursive;
	font-size: 16px;
	color: #666;
	border: 1px solid #000;
	border-radius: 1px;
}

.cmp-monster-selection .monster-card:hover .polaroid {
	transform: translateY(-4px) scale(1.05) rotate(0deg);
	box-shadow: 
		0 4px 8px rgba(0,0,0,0.35),
		0 8px 16px rgba(0,0,0,0.25),
		0 12px 24px rgba(0,0,0,0.15),
		inset 0 1px 0 rgba(255,255,255,0.9),
		inset 0 -1px 0 rgba(0,0,0,0.05);
}

.cmp-monster-selection .monster-card:hover .polaroid img {
	filter: contrast(1.05) saturate(1.1) sepia(0);
}

.cmp-monster-selection .monster-card.selected .polaroid {
	opacity: 0.5;
	filter: grayscale(0.5);
}

.cmp-monster-selection .monster-card.is-unavailable .polaroid {
	opacity: 0.5;
	filter: grayscale(0.5);
}

/* Responsive polaroid sizing */
@media (max-width: 1024px) {
	.cmp-monster-selection .monster-card .polaroid {
		width: 110px;
		height: 140px;
		padding: 6px 6px 24px 6px;
	}
	
	.cmp-monster-selection .monster-card .polaroid img {
		width: 98px;
		height: 82px;
	}
	
	.cmp-monster-selection .polaroid-caption {
		font-size: 12px;
		bottom: 8px;
	}
	
	.cmp-monster-selection .polaroid-fallback {
		width: 98px;
		height: 82px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.cmp-monster-selection .monster-card .polaroid {
		width: 100px;
		height: 130px;
		padding: 5px 5px 22px 5px;
	}
	
	.cmp-monster-selection .monster-card .polaroid img {
		width: 90px;
		height: 75px;
	}
	
	.cmp-monster-selection .polaroid-caption {
		font-size: 11px;
		bottom: 6px;
	}
	
	.cmp-monster-selection .polaroid-fallback {
		width: 90px;
		height: 75px;
		font-size: 12px;
	}
}

/* Reset Confirmation Dialog */
.cmp-monster-selection .reset-confirmation-overlay {
	position: fixed; /* Changed from absolute to ensure centering on viewport */
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cmp-monster-selection .reset-confirmation-overlay.visible {
	opacity: 1;
	visibility: visible;
}

.cmp-monster-selection .reset-confirmation-dialog {
	background: linear-gradient(180deg, #353535 0%, #2c2c2c 100%);
	border: 4px solid #111;
	box-shadow: 8px 8px 0 #000;
	padding: 24px;
	border-radius: 0;
	max-width: 400px;
	text-align: center;
	color: #e6e6e6;
}

.cmp-monster-selection .reset-confirmation-title {
	font-family: 'Bangers', cursive;
	font-size: 24px;
	color: #FFD700;
	margin-bottom: 12px;
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.cmp-monster-selection .reset-confirmation-message {
	font-size: 16px;
	margin-bottom: 20px;
	line-height: 1.4;
}

.cmp-monster-selection .reset-confirmation-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.cmp-monster-selection .reset-confirm-btn,
.cmp-monster-selection .reset-cancel-btn {
	background: linear-gradient(#fafafa, #e3e3e3);
	border: 3px solid #111;
	box-shadow: 3px 3px 0 #000;
	padding: 8px 16px;
	font-family: 'Bangers', cursive;
	font-size: 16px;
	color: #000;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	border-radius: 0;
}

.cmp-monster-selection .reset-confirm-btn {
	background: linear-gradient(#ff6b6b, #ff5252);
	color: #fff;
}

.cmp-monster-selection .reset-confirm-btn:hover,
.cmp-monster-selection .reset-cancel-btn:hover {
	transform: translateY(-2px);
	box-shadow: 5px 5px 0 #000;
}

.cmp-monster-selection .reset-confirm-btn:active,
.cmp-monster-selection .reset-cancel-btn:active {
	transform: translateY(0);
	box-shadow: 2px 2px 0 #000;
}