* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
	background: #111;
	color: #eee;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* Static decorative background layer */
body::before {
	content:"";
	position:fixed;
	inset:0;
	z-index:-1;
	background:
		radial-gradient(circle at 50% 35%, #20364c, #0b141c 60%, #060a0f 85%),
		url('src/assets/images/background.png') center/cover no-repeat;
	image-rendering:crisp-edges;
	pointer-events:none;
	animation:bgPulse 22s linear infinite;
	mix-blend-mode:normal;
	opacity:0.9;
}
/* Loading Screen */
.loading-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#0b1118; z-index:300; flex-direction:column; gap:2rem; font-family:inherit; }
.loading-inner { display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.loading-text { font-size:1rem; letter-spacing:.5px; color:#dbeafe; font-weight:600; text-shadow:0 0 12px #3b82f650; }
.progress-bar { width:240px; height:10px; background:#1e293b; border:1px solid #334155; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px #000 inset,0 4px 10px -4px #000; }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,#3b82f6,#0ea5e9,#6366f1); background-size:300% 100%; animation:barShift 3s linear infinite; box-shadow:0 0 10px 2px #2563eb55; }
@keyframes barShift { 0% { background-position:0 0; } 100% { background-position:300% 0; } }
.spinner-hex { width:70px; height:70px; position:relative; }
.spinner-hex::before, .spinner-hex::after { content:""; position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,#3b82f6,#0ea5e9); animation:spin 2.2s linear infinite; mask: radial-gradient(circle at 50% 50%, transparent 46%, #000 48%); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 46%, #000 48%); }
.spinner-hex::after { background:linear-gradient(135deg,#6366f1,#0ea5e9); animation-direction:reverse; animation-duration:3.4s; filter:blur(4px) brightness(1.2); opacity:.65; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-screen.fade-out { animation:loadingFade .55s ease forwards; pointer-events:none; }
@keyframes loadingFade { to { opacity:0; visibility:hidden; } }
@keyframes bgPulse {
	0% { filter:brightness(1) saturate(1); }
	50% { filter:brightness(1.08) saturate(1.15); }
	100% { filter:brightness(1) saturate(1); }
}
header {
	padding: .75rem 1rem;
	background: linear-gradient(135deg,#222,#181818);
	border-bottom: 1px solid #333;
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	align-items:center;
}
header h1 { font-size: 1.4rem; margin:0; }
.controls { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
button {
	background:#2563eb;
	border:1px solid #1d4ed8;
	color:#fff;
	padding:.5rem .9rem;
	border-radius:6px;
	font-size:.95rem;
	cursor:pointer;
	font-weight:600;
	letter-spacing:.5px;
}
button:disabled { opacity:.45; cursor:not-allowed; }
button:hover:not(:disabled){ background:#1d4ed8; }
main { display:flex; flex:1; padding:1rem; gap:1.5rem; align-items:center; justify-content:center; }
canvas { background:#0a0d14; border:1px solid #222; border-radius:12px; box-shadow:0 0 0 1px #000,0 4px 16px -4px #000 inset; }
.legend { max-width:260px; font-size:.85rem; line-height:1.3; background:#1c1c1c; padding:1rem 1rem 1.25rem; border:1px solid #262626; border-radius:10px; box-shadow:0 0 0 1px #000; }
.legend h2 { margin-top:0; font-size:1rem; }
.status { font-size:.9rem; min-width:200px; }
.mode-toggle { font-size:.75rem; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
.mode-toggle input { transform:scale(1.2); }
.hand { display:flex; gap:.4rem; align-items:center; min-height:54px; }
.card { position:relative; padding:.45rem .55rem .5rem; border:1px solid #333; background:#1e1e1e; border-radius:8px; font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; cursor:pointer; display:flex; flex-direction:column; gap:2px; box-shadow:0 2px 4px -2px #000 inset,0 0 0 1px #000; }
.card[data-type="grass"] { background:linear-gradient(135deg,#1b3d16,#274a1f); border-color:#2f5d27; }
.card[data-type="sand"] { background:linear-gradient(135deg,#5a4a1f,#7a6322); border-color:#8c722b; }
.card[data-type="water"] { background:linear-gradient(135deg,#0d2d4d,#154b78); border-color:#1f5d9f; }
.card.used { opacity:.35; filter:saturate(.4); }
.card.selected { outline:2px solid #fff; box-shadow:0 0 0 2px #fff,0 0 10px 2px #fff5; }
.card span.small { font-size:.55rem; font-weight:400; opacity:.8; letter-spacing:.75px; }
.card:active { transform:translateY(1px); }
footer { text-align:center; padding:.5rem 0; font-size:.65rem; color:#666; }
ol { padding-left:1.1rem; }
/* Start screen */
.start-screen { position:fixed; inset:0; background:linear-gradient(135deg,#0a0d14e6,#111c28e6); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); z-index:100; }
.start-panel { background:#151b24; padding:1.75rem 2.1rem 2.1rem; border:1px solid #222c37; border-radius:16px; width:820px; max-width:820px; min-width:820px; height:560px; max-height:560px; min-height:560px; box-shadow:0 10px 40px -10px #000,0 0 0 1px #0d141c inset; display:flex; flex-direction:column; gap:1.35rem; overflow:hidden; }
.start-panel form { flex:1; display:flex; flex-direction:column; min-height:0; }
.start-panel form > .step-content { flex:1; overflow:auto; padding-right:.35rem; }
.start-panel form > #stepMaps.step-content { overflow:visible; padding-right:0; }
.start-panel form > .step-content::-webkit-scrollbar { width:10px; }
.start-panel form > .step-content::-webkit-scrollbar-track { background:#111923; }
.start-panel form > .step-content::-webkit-scrollbar-thumb { background:#253544; border-radius:6px; }
.start-panel form > .step-content::-webkit-scrollbar-thumb:hover { background:#2e4253; }

.start-panel .steps-header { display:flex; gap:.75rem; justify-content:center; margin-bottom:.25rem; }
.step-pill { font-size:.6rem; text-transform:uppercase; letter-spacing:.9px; padding:.35rem .7rem; border-radius:999px; background:#1f2933; border:1px solid #2d3946; color:#8fa3b8; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.step-pill.active { background:#2563eb; color:#fff; border-color:#1d4ed8; box-shadow:0 0 0 1px #1d4ed880,0 0 10px -2px #1d4ed8; }
.step-content { display:none; animation:fadeStep .35s ease; }
.step-content.active { display:block; }
@keyframes fadeStep { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }
.map-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1.05rem; margin-top:.85rem; align-items:stretch; }
.map-pagination-bar { display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.25rem 0 .35rem; font-size:.6rem; letter-spacing:.8px; color:#93a6ba; }
.map-page-indicator { padding:.35rem .75rem; background:#1e2935; border:1px solid #2a3a4a; border-radius:999px; font-weight:600; min-width:88px; text-align:center; }
.map-page-btn { background:#1e2935; border:1px solid #2a3a4a; color:#d1e3f4; padding:.45rem .75rem; border-radius:10px; font-size:.7rem; font-weight:600; letter-spacing:.7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:46px; transition:.18s background,.18s border-color,.18s color, .18s transform; }
.map-page-btn:hover:not(:disabled){ background:#253244; }
.map-page-btn:active:not(:disabled){ transform:translateY(1px); }
.map-page-btn:disabled { opacity:.4; cursor:not-allowed; }
.map-page-btn:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
.map-card { position:relative; background:#1d2631; border:2px solid #283545; border-radius:14px; padding:.7rem .75rem .8rem; display:flex; flex-direction:column; gap:.55rem; cursor:pointer; transition:.18s border-color,.18s transform, .18s box-shadow, .18s background; }
.map-card:hover { border-color:#3d5065; }
.map-card:focus-within, .map-card:focus { outline:none; border-color:#60a5fa; box-shadow:0 0 0 2px #3b82f6cc,0 0 0 4px #1e293b inset; }
.map-card.selected { border-color:#fff; box-shadow:0 0 0 2px #fff,0 4px 14px -4px #fff8,0 0 0 5px #1e293b; background:#202f3d; }
.map-thumb { aspect-ratio:4/3; background:#0d1218; border-radius:10px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:.55rem; letter-spacing:.5px; color:#94a3b8; box-shadow:0 0 0 1px #1e293b, 0 2px 10px -4px #000 inset; }
.map-thumb::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35)); opacity:.6; }
.map-thumb canvas { width:100%; height:auto; max-height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }
.map-meta { display:flex; flex-direction:column; gap:.25rem; }
.map-name { font-size:.72rem; font-weight:600; letter-spacing:.75px; color:#fff; line-height:1.15; }
.map-size { font-size:.56rem; color:#94a3b8; letter-spacing:.55px; }
.step-actions { display:flex; justify-content:space-between; margin-top:1rem; gap:.75rem; }
/* Sticky action bar inside scrollable step content */
#stepMaps .step-actions { position:sticky; bottom:0; background:linear-gradient(180deg,rgba(21,27,36,0) 0%, #151b24 40%); padding-top:1.25rem; margin-top:1.25rem; backdrop-filter:blur(3px); }
#stepMaps .step-actions::before { content:""; position:absolute; left:-2rem; right:-2rem; top:0; height:1px; background:linear-gradient(90deg,transparent,#2a3a4d,transparent); opacity:.6; }
.step-actions button { flex:1; }
.divider { height:1px; width:100%; background:linear-gradient(90deg,transparent,#2a3a4d,transparent); margin:.25rem 0 .35rem; border:none; }
.empty-hint { font-size:.6rem; text-align:center; color:#8091a3; padding:.5rem 0; }
.start-panel h2 { margin:0 0 .5rem; font-size:1.4rem; text-align:center; }
.player-config { background:#1d2631; padding:1.05rem 1.05rem .95rem; border:1px solid #243041; border-radius:14px; flex:1; display:flex; flex-direction:column; gap:.7rem; min-width:0; position:relative; }
.player-config::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 1px #0e141b,0 4px 10px -4px #000 inset; }
.player-config h3 { margin:.2rem 0 .25rem; font-size:1rem; letter-spacing:.5px; }
.player-config .player-name{ display:inline-block; padding:2px 6px 3px; border-radius:6px; cursor:text; min-width:80px; outline:none; transition:background .15s, box-shadow .15s; }
.player-config .player-name:hover{ background:rgba(255,255,255,0.06); }
.player-config .player-name:focus{ background:rgba(59,130,246,0.15); box-shadow:0 0 0 2px rgba(59,130,246,0.35); }
.player-config .player-name.editing{ background:rgba(255,255,255,0.12); }
.player-config label { font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; display:flex; flex-direction:column; gap:.35rem; font-weight:600; color:#ccd5e1; }
.player-config input[type=color] { display:none; }
.color-picker-label { font-size:.6rem; text-transform:uppercase; letter-spacing:.9px; color:#8fa3b8; }
.color-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr)); gap:.5rem; margin-top:.25rem; }
.color-item { position:relative; aspect-ratio:1/1; border:2px solid #283545; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.55rem; font-weight:600; letter-spacing:.5px; background:#0e141b; transition:.18s border-color,.18s transform,.18s box-shadow; }
.color-item::after { content:""; position:absolute; inset:2px; border-radius:6px; background:var(--c); box-shadow:0 2px 6px -2px #000 inset; }
.color-item:hover { border-color:#3d5065; }
.color-item.selected { border-color:#fff; box-shadow:0 0 0 2px #fff,0 0 12px -2px #fff8; }
.color-item.selected::before { content:'✓'; position:absolute; top:4px; right:6px; font-size:.65rem; background:#111d; padding:2px 4px; border-radius:4px; }
.player-config select { background:#0e141b; color:#fff; border:1px solid #2d3a49; border-radius:6px; padding:.45rem .6rem; font-size:.75rem; }
.avatar-picker-label { font-size:.6rem; text-transform:uppercase; letter-spacing:.9px; color:#8fa3b8; margin-top:.25rem; }
.avatar-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:.65rem; margin-top:.25rem; }
.avatar-item { position:relative; border:2px solid #283545; background:#0e141b; border-radius:12px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; transition:.18s border-color, .18s transform, .18s box-shadow, .18s background; }
.avatar-item:focus, .avatar-item:focus-visible { outline:none; border-color:#60a5fa; box-shadow:0 0 0 2px #3b82f6cc,0 0 0 4px #1e293b; }
.avatar-item img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-item:hover { border-color:#3d5065; background:#14202b; }
.avatar-item.selected { border-color:#fff; box-shadow:0 0 0 2px #fff,0 4px 14px -4px #fff8,0 0 0 5px #1e293b; background:#182837; }
.avatar-item.selected::after { content:'✓'; position:absolute; top:4px; right:6px; font-size:.7rem; background:#111d; padding:2px 4px; border-radius:4px; }
.start-panel form { display:block; }
.players-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; align-items:stretch; }
.step-content { padding:.25rem .15rem; }
.step-actions { margin-top:1.15rem; }
.step-actions button { font-size:.75rem; letter-spacing:.8px; padding:.6rem .9rem; border-radius:10px; }
.step-actions button#startGameBtn { font-size:.85rem; font-weight:600; }
.alt-start-btn { background:#10b981; border:1px solid #059669; }
.alt-start-btn:hover { background:#059669; }
.alt-start-btn:focus-visible { outline:2px solid #34d399; outline-offset:2px; }

/* Keyboard focus for step pills */
.step-pill { position:relative; }
.step-pill:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }

/* Compact adjustments below 620px */
@media (max-width: 900px){
	/* Responsive fallback when viewport narrower/shorter */
	.start-panel { width:clamp(300px, 94vw, 820px); min-width:auto; max-width:94vw; height: clamp(480px, 92vh, 560px); max-height:92vh; min-height:480px; padding:1.55rem 1.55rem 1.75rem; }
}
@media (max-width: 620px){
	.start-panel { padding:1.4rem 1.35rem 1.6rem; height: clamp(460px, 94vh, 560px); }
	.players-grid { grid-template-columns:1fr; }
	.avatar-list { grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:.55rem; }
	.map-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
	.map-card { padding:.6rem .6rem .7rem; border-radius:12px; }
	.map-name { font-size:.68rem; }
	.map-thumb { border-radius:8px; }
	.step-actions button { padding:.55rem .75rem; }
}

/* Ensure vertical overflow is scrollable if content taller than viewport */
.start-screen { overflow:auto; }
.start-screen::-webkit-scrollbar { width:10px; }
.start-screen::-webkit-scrollbar-track { background:#0d141c; }
.start-screen::-webkit-scrollbar-thumb { background:#243041; border-radius:6px; }
.start-screen::-webkit-scrollbar-thumb:hover { background:#2e4253; }

/* Larger screens: tighten vertical space and allow denser map grid */
@media (min-width: 1100px){
	.map-grid { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
	.start-panel { width:clamp(400px,60vw,900px); }
}
.start-panel .actions { grid-column:1 / -1; display:flex; justify-content:center; }
.start-panel button[type=submit]{ font-size:1rem; padding:.7rem 1.6rem; }
.start-screen.hidden { display:none; }
@media (max-width: 1000px) {
	main { flex-direction:column; }
	canvas { width:100%; height:auto; }
	.legend { max-width:100%; }
	.start-panel form { grid-template-columns:1fr; }
}