@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Share+Tech+Mono&display=swap');

/* --- CSS Variables & Root --- */
.wp-block-gridworks-game {
	--bg-primary: #05070c;
	--bg-monitor: #0c101b;
	--border-crt: #1e293b;
	--neon-cyan: #00f0ff;
	--neon-green: #39ff14;
	--neon-amber: #ffaa00;
	--neon-red: #ff003c;
	--text-light: #f8fafc;
	--text-muted: #64748b;
	--font-mono: 'Share Tech Mono', monospace;
	--font-sans: 'Outfit', sans-serif;
	
	all: unset;
	display: block;
	box-sizing: border-box;
	font-family: var(--font-sans);
	background-color: var(--bg-primary);
	color: var(--text-light);
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	padding: 20px;
	overflow: hidden;
	user-select: none;
}

.wp-block-gridworks-game *,
.wp-block-gridworks-game *::before,
.wp-block-gridworks-game *::after {
	box-sizing: border-box;
}

/* --- CRT Screen Overlay and Scanlines --- */
.gw-crt-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: radial-gradient(circle at center, #151d30 0%, #05070c 100%);
	padding: 10px;
	border-radius: 12px;
	border: 3px solid #334155;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 240, 255, 0.1);
	overflow: hidden;
}

.gw-crt-wrapper::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.2) 50%);
	background-size: 100% 4px;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.75;
}

/* --- Console Header --- */
.gw-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	border-bottom: 2px solid #334155;
	background: rgba(15, 23, 42, 0.6);
	margin-bottom: 12px;
	border-radius: 6px;
}

.gw-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gw-brand-logo {
	color: var(--neon-cyan);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.gw-brand-sub {
	font-size: 11px;
	text-transform: uppercase;
	color: var(--text-muted);
	letter-spacing: 1px;
}

.gw-top-telemetry {
	display: flex;
	gap: 20px;
	font-family: var(--font-mono);
	font-size: 16px;
}

.gw-telemetry-item {
	display: flex;
	gap: 8px;
}

.gw-telemetry-label {
	color: var(--text-muted);
}

.gw-telemetry-val {
	color: var(--neon-cyan);
	text-shadow: 0 0 5px rgba(0, 240, 255, 0.4);
}

/* --- The 4-Monitor Quad Layout --- */
.gw-quad-grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 16px;
	height: calc(100% - 70px);
}

@media (max-width: 900px) {
	.gw-quad-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(4, 1fr);
		overflow-y: auto;
	}
}

/* --- Monitor Panel Styling --- */
.gw-monitor {
	position: relative;
	background: var(--bg-monitor);
	border: 6px solid var(--border-crt);
	border-radius: 12px;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 4px 10px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 14px;
	transition: border-color 0.3s, box-shadow 0.3s;
}

.gw-monitor::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(circle at center, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Monitor Color Themes */
.gw-monitor.cyan-theme {
	border-color: rgba(0, 240, 255, 0.15);
	box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.gw-monitor.cyan-theme .gw-mon-title { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); }

.gw-monitor.green-theme {
	border-color: rgba(57, 255, 20, 0.15);
	box-shadow: inset 0 0 15px rgba(57, 255, 20, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.gw-monitor.green-theme .gw-mon-title { color: var(--neon-green); text-shadow: 0 0 8px rgba(57, 255, 20, 0.5); }

.gw-monitor.red-theme {
	border-color: rgba(255, 0, 60, 0.2);
	box-shadow: inset 0 0 15px rgba(255, 0, 60, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.gw-monitor.red-theme .gw-mon-title { color: var(--neon-red); text-shadow: 0 0 8px rgba(255, 0, 60, 0.5); }
.gw-monitor.red-theme.alert-active {
	border-color: var(--neon-red);
	animation: monitor-pulse-red 2s infinite alternate;
}

.gw-monitor.amber-theme {
	border-color: rgba(255, 170, 0, 0.15);
	box-shadow: inset 0 0 15px rgba(255, 170, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.gw-monitor.amber-theme .gw-mon-title { color: var(--neon-amber); text-shadow: 0 0 8px rgba(255, 170, 0, 0.5); }

.gw-mon-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding-bottom: 6px;
	margin-bottom: 10px;
	z-index: 2;
}

.gw-mon-title {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gw-mon-badge {
	font-family: var(--font-mono);
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-muted);
}

.gw-mon-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	z-index: 2;
	overflow: hidden;
}

/* --- Monitor 1: Telemetry & Stability (Cyan) --- */
.gw-telemetry-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.gw-tel-card {
	background: rgba(15, 23, 42, 0.4);
	border: 1px solid rgba(0, 240, 255, 0.1);
	border-radius: 8px;
	padding: 8px 12px;
	text-align: center;
}

.gw-tel-lbl {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	margin-bottom: 2px;
}

.gw-tel-val {
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 700;
	color: var(--neon-cyan);
}

.gw-stability-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.gw-stability-header {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--text-muted);
	margin-bottom: 4px;
	text-transform: uppercase;
}

.gw-stability-track {
	height: 20px;
	background: #090c13;
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}

.gw-stability-sweet {
	position: absolute;
	left: 45%;
	width: 10%;
	height: 100%;
	background: rgba(57, 255, 20, 0.15);
	border-left: 1.5px dashed var(--neon-green);
	border-right: 1.5px dashed var(--neon-green);
}

.gw-stability-pointer {
	position: absolute;
	top: 0; bottom: 0;
	width: 6px;
	background: #ffffff;
	border-radius: 3px;
	transform: translateX(-50%);
	transition: left 0.15s ease-out;
	box-shadow: 0 0 8px #ffffff;
}

.gw-stability-pointer.stable { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
.gw-stability-pointer.warning { background: var(--neon-amber); box-shadow: 0 0 10px var(--neon-amber); }
.gw-stability-pointer.danger { background: var(--neon-red); box-shadow: 0 0 10px var(--neon-red); }

.gw-stability-status {
	margin-top: 8px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: bold;
	padding: 4px;
	border-radius: 4px;
	background: rgba(0, 240, 255, 0.05);
	color: var(--neon-cyan);
	border: 1px solid rgba(0, 240, 255, 0.1);
}
.gw-stability-status.stable { color: var(--neon-green); border-color: rgba(57, 255, 20, 0.2); background: rgba(57, 255, 20, 0.05); }
.gw-stability-status.warning { color: var(--neon-amber); border-color: rgba(255, 170, 0, 0.2); background: rgba(255, 170, 0, 0.05); }
.gw-stability-status.danger { color: var(--neon-red); border-color: rgba(255, 0, 60, 0.2); background: rgba(255, 0, 60, 0.05); animation: flash-bg-red 1s infinite alternate; }

/* --- Monitor 2: Crew Crew management (Green) --- */
.gw-crew-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	overflow-y: auto;
}

.gw-crew-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(15, 23, 42, 0.4);
	border: 1px solid rgba(57, 255, 20, 0.15);
	border-radius: 8px;
	padding: 8px 12px;
	transition: all 0.2s ease;
}

.gw-crew-info {
	display: flex;
	flex-direction: column;
}

.gw-crew-name {
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
}

.gw-crew-assignment {
	font-size: 11px;
	color: var(--text-muted);
}

.gw-crew-status-badge {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
}

.gw-crew-status-badge.available {
	background: rgba(57, 255, 20, 0.1);
	color: var(--neon-green);
	border: 1px solid rgba(57, 255, 20, 0.3);
}

.gw-crew-status-badge.busy {
	background: rgba(255, 170, 0, 0.1);
	color: var(--neon-amber);
	border: 1px solid rgba(255, 170, 0, 0.3);
}

/* --- Monitor 3: Alerts Feed (Red) --- */
.gw-alerts-feed {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	overflow-y: auto;
}

.gw-alert-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 0, 60, 0.05);
	border: 1px solid rgba(255, 0, 60, 0.2);
	border-radius: 8px;
	padding: 8px 12px;
	animation: border-flicker 3s infinite alternate;
}

.gw-alert-item.critical {
	background: rgba(255, 0, 60, 0.1);
	border-color: var(--neon-red);
}

.gw-alert-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-right: 12px;
}

.gw-alert-title {
	font-size: 13px;
	font-weight: bold;
	color: #ffffff;
}

.gw-alert-desc {
	font-size: 11px;
	color: var(--text-muted);
}

.gw-alert-timer {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--neon-red);
	margin-top: 2px;
}

.gw-dispatch-btn {
	background: linear-gradient(135deg, var(--neon-red) 0%, #cc0033 100%);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 6px 12px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 2px 6px rgba(255, 0, 60, 0.3);
}

.gw-dispatch-btn:hover {
	transform: scale(1.03);
	box-shadow: 0 4px 10px rgba(255, 0, 60, 0.5);
}

.gw-dispatch-btn:active {
	transform: scale(0.97);
}

.gw-dispatch-btn:disabled {
	background: #334155;
	color: var(--text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.gw-alerts-empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	font-size: 13px;
	text-transform: uppercase;
	font-family: var(--font-mono);
	letter-spacing: 1px;
}

/* --- Monitor 4: Service Tickets & Upgrades (Amber) --- */
.gw-tickets-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.gw-tickets-header-actions {
	display: flex;
	gap: 8px;
}

.gw-shop-toggle-btn {
	flex: 1;
	background: rgba(255, 170, 0, 0.1);
	border: 1px solid rgba(255, 170, 0, 0.4);
	color: var(--neon-amber);
	border-radius: 6px;
	padding: 8px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	transition: all 0.2s;
}

.gw-shop-toggle-btn:hover {
	background: var(--neon-amber);
	color: #000000;
	box-shadow: 0 0 10px rgba(255, 170, 0, 0.4);
}

.gw-ticket-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	overflow-y: auto;
}

.gw-ticket-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255, 170, 0, 0.03);
	border: 1px solid rgba(255, 170, 0, 0.2);
	border-radius: 8px;
	padding: 6px 10px;
}

.gw-ticket-info {
	display: flex;
	flex-direction: column;
}

.gw-ticket-title {
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
}

.gw-ticket-reward {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--neon-amber);
}

.gw-ticket-dispatch-btn {
	background: linear-gradient(135deg, var(--neon-amber) 0%, #cc8800 100%);
	color: #000000;
	border: none;
	border-radius: 4px;
	padding: 4px 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	transition: transform 0.2s;
}

.gw-ticket-dispatch-btn:hover {
	transform: scale(1.03);
}

.gw-ticket-dispatch-btn:disabled {
	background: #334155;
	color: var(--text-muted);
	cursor: not-allowed;
}

/* --- OVERLAY SCREENS (CRT retro styling) --- */
.gw-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(5, 7, 12, 0.95);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.gw-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.gw-overlay-card {
	background: var(--bg-monitor);
	border: 4px solid var(--neon-cyan);
	border-radius: 16px;
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
	width: 100%;
	max-width: 580px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	position: relative;
	max-height: 90%;
	overflow-y: auto;
}

.gw-overlay-card.red-border {
	border-color: var(--neon-red);
	box-shadow: 0 0 30px rgba(255, 0, 60, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.gw-overlay-card.amber-border {
	border-color: var(--neon-amber);
	box-shadow: 0 0 30px rgba(255, 170, 0, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.gw-overlay-title {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 8px 0;
	text-align: center;
	letter-spacing: 1px;
}

.gw-overlay-desc {
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
	margin: 0 0 20px 0;
	line-height: 1.4;
}

/* --- MINI-GAME SPECIFIC INTERFACES --- */

/* Squirrel Scramble (Canvas + Grid) */
.gw-squirrel-canvas-container {
	position: relative;
	width: 320px;
	height: 320px;
	background: #080b11;
	border: 2px solid var(--neon-red);
	border-radius: 8px;
	margin: 0 auto 16px auto;
	overflow: hidden;
}

.gw-squirrel-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(5, 1fr);
	width: 100%;
	height: 100%;
}

.gw-squirrel-cell {
	border: 1px dashed rgba(255, 255, 255, 0.05);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Maze wall cell — solid Pac-Man-style block */
.gw-squirrel-cell.wall {
	background: #0d2b6e;
	border: 2px solid #1e5fd4;
	box-shadow: inset 0 0 10px rgba(30, 95, 212, 0.6), 0 0 4px rgba(30, 95, 212, 0.4);
	border-radius: 3px;
	pointer-events: none;
}

/* Drawing wires inside squirrel scramble */
.gw-sq-wire-h::after {
	content: "";
	position: absolute;
	left: 0; right: 0; height: 4px;
	background: #334155;
	top: 50%; transform: translateY(-50%);
}
.gw-sq-wire-v::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; width: 4px;
	background: #334155;
	left: 50%; transform: translateX(-50%);
}

/* Damage states on wires */
.gw-squirrel-cell.damaged .gw-sq-wire-h::after,
.gw-squirrel-cell.damaged .gw-sq-wire-v::before {
	background: var(--neon-red);
	box-shadow: 0 0 8px var(--neon-red);
}

/* Damaged cell — visible on every cell regardless of wire class */
.gw-squirrel-cell.damaged {
	background: rgba(255, 0, 60, 0.18);
	border-color: rgba(255, 0, 60, 0.7);
	box-shadow: inset 0 0 10px rgba(255, 0, 60, 0.3);
	animation: border-flicker 1.5s infinite alternate;
}

.gw-sq-damage-icon {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 13px;
	line-height: 1;
	z-index: 8;
	pointer-events: none;
}

.gw-sq-drone {
	width: 36px;
	height: 36px;
	background: var(--neon-cyan);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	color: #000;
	position: absolute;
	z-index: 10;
	box-shadow: 0 0 12px var(--neon-cyan);
	transition: all 0.12s ease-out;
}

.gw-sq-squirrel {
	width: 32px;
	height: 32px;
	background: var(--neon-amber);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	position: absolute;
	z-index: 9;
	box-shadow: 0 0 10px var(--neon-amber);
	transition: all 0.2s linear;
}

.gw-sq-controls {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	max-width: 180px;
	margin: 0 auto;
}

.gw-sq-btn {
	background: #1e293b;
	border: 1px solid #475569;
	color: #ffffff;
	border-radius: 6px;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gw-sq-btn:hover { background: #334155; }
.gw-sq-btn:active { background: #475569; }

/* Storm Surge (QTE Sequence) */
.gw-qte-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	margin-bottom: 20px;
}

.gw-qte-step-indicator {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--neon-cyan);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.gw-qte-action-box {
	width: 100%;
	min-height: 140px;
	background: #080b11;
	border: 2px solid #334155;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	position: relative;
}

/* Multi Step Styling */
.gw-qte-tap-btn {
	background: linear-gradient(135deg, var(--neon-cyan) 0%, #0088cc 100%);
	color: #000;
	border: none;
	border-radius: 8px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	text-transform: uppercase;
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4);
}
.gw-qte-tap-btn:active { transform: scale(0.95); }

.gw-qte-switch-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.gw-qte-switch-label {
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
}

.gw-qte-knife-switch {
	width: 60px;
	height: 100px;
	background: #1e293b;
	border-radius: 8px;
	border: 3px solid #475569;
	position: relative;
	cursor: pointer;
}

.gw-qte-knife-handle {
	position: absolute;
	left: 10px;
	width: 34px;
	height: 40px;
	background: var(--neon-red);
	border: 2px solid #000;
	border-radius: 4px;
	transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

.gw-qte-knife-switch.off .gw-qte-knife-handle {
	top: 52px;
	background: #64748b;
}

.gw-qte-knife-switch.on .gw-qte-knife-handle {
	top: 4px;
	background: var(--neon-green);
	box-shadow: 0 0 10px var(--neon-green);
}

/* Drag cable puzzle */
.gw-qte-drag-zone {
	display: flex;
	justify-content: space-around;
	width: 100%;
	align-items: center;
	gap: 10px;
}

.gw-qte-socket {
	width: 80px;
	height: 80px;
	background: #1e293b;
	border: 3px dashed #475569;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: border-color 0.2s;
}

.gw-qte-socket.highlight {
	border-color: var(--neon-cyan);
}

.gw-qte-cable {
	width: 64px;
	height: 64px;
	background: var(--neon-amber);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: grab;
	box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.gw-qte-cable:active {
	cursor: grabbing;
}

.gw-qte-progress-container {
	width: 100%;
	height: 16px;
	background: #090c13;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #334155;
	margin-top: 14px;
}

.gw-qte-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--neon-cyan) 0%, #0088cc 100%);
	transition: width 0.1s ease-out;
}

/* Power Gridlock (Pipe Connection) */
.gw-gridlock-board {
	display: grid;
	grid-template-columns: repeat(4, 70px);
	grid-template-rows: repeat(4, 70px);
	gap: 8px;
	justify-content: center;
	margin: 0 auto 16px auto;
	background: #080b11;
	padding: 12px;
	border-radius: 12px;
	border: 2px solid var(--neon-amber);
	width: 328px;
}

.gw-gridlock-cell {
	width: 70px;
	height: 70px;
	background: #1e293b;
	border: 2px solid #334155;
	border-radius: 6px;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, background-color 0.2s;
}

.gw-gridlock-cell:hover {
	border-color: var(--neon-amber);
	background: #24354f;
}

.gw-gridlock-cell:active {
	transform: scale(0.95);
}

.gw-gridlock-svg {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.gw-gridlock-wire {
	stroke: var(--text-muted);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: stroke 0.25s;
}

.gw-gridlock-cell.connected .gw-gridlock-wire {
	stroke: var(--neon-amber);
	filter: drop-shadow(0 0 4px var(--neon-amber));
}

.gw-gridlock-cell.endpoint {
	background: rgba(255, 170, 0, 0.1);
	border-color: rgba(255, 170, 0, 0.4);
}

/* Rotations */
.rot-0   { transform: rotate(0deg); }
.rot-90  { transform: rotate(90deg); }
.rot-180 { transform: rotate(180deg); }
.rot-270 { transform: rotate(270deg); }

/* --- UPGRADE SHOP PANEL --- */
.gw-shop-grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gw-shop-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(15, 23, 42, 0.5);
	border: 1px solid rgba(255, 170, 0, 0.2);
	border-radius: 8px;
	padding: 10px 14px;
}

.gw-shop-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-right: 16px;
}

.gw-shop-title {
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
}

.gw-shop-desc {
	font-size: 11px;
	color: var(--text-muted);
}

.gw-shop-level {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--neon-amber);
	margin-top: 2px;
}

.gw-buy-btn {
	background: linear-gradient(135deg, var(--neon-amber) 0%, #cc8800 100%);
	color: #000;
	border: none;
	border-radius: 4px;
	padding: 8px 14px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	transition: transform 0.2s;
}

.gw-buy-btn:hover {
	transform: scale(1.03);
}

.gw-buy-btn:disabled {
	background: #334155;
	color: var(--text-muted);
	cursor: not-allowed;
}

/* --- LEADERBOARD & HIGH SCORE ENTRY --- */
.gw-scoreboard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 20px;
}

.gw-score-row {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 14px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.gw-score-row.highlight {
	border-color: var(--neon-cyan);
	color: var(--neon-cyan);
	background: rgba(0, 240, 255, 0.05);
}

.gw-name-input-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.gw-name-chars {
	display: flex;
	gap: 10px;
}

.gw-char-btn-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.gw-char-arrow {
	background: #1e293b;
	border: 1px solid #475569;
	color: var(--neon-cyan);
	width: 32px;
	height: 32px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.gw-char-arrow:hover { background: #334155; }

.gw-char-val {
	font-family: var(--font-mono);
	font-size: 32px;
	font-weight: 800;
	color: #ffffff;
	width: 40px;
	text-align: center;
	border-bottom: 3px solid var(--neon-cyan);
	padding-bottom: 4px;
}

.gw-btn-submit {
	width: 100%;
	background: linear-gradient(135deg, var(--neon-cyan) 0%, #0088cc 100%);
	color: #000000;
	border: none;
	border-radius: 6px;
	padding: 10px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}

.gw-btn-submit:hover {
	transform: scale(1.02);
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.gw-btn-primary {
	width: 100%;
	background: linear-gradient(135deg, var(--neon-cyan) 0%, #0088cc 100%);
	color: #000000;
	border: none;
	border-radius: 6px;
	padding: 12px;
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}

.gw-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.4);
}

.gw-btn-secondary {
	width: 100%;
	background: transparent;
	color: var(--text-muted);
	border: 1px solid var(--text-muted);
	border-radius: 6px;
	padding: 10px;
	font-family: var(--font-mono);
	font-size: 12px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}

.gw-btn-secondary:hover {
	color: #ffffff;
	border-color: #ffffff;
}

.gw-close-btn {
	position: absolute;
	top: 14px; right: 14px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 20px;
	cursor: pointer;
}
.gw-close-btn:hover { color: #ffffff; }

/* --- TUTORIAL CARD DETAILS --- */
.gw-tutorial-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	text-align: left;
}

.gw-tutorial-step {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	padding: 10px 14px;
}

.gw-tutorial-step strong {
	color: var(--neon-cyan);
}

.gw-tutorial-step ul {
	margin: 4px 0 0 0;
	padding-left: 16px;
	font-size: 12px;
}

/* --- EMERGENCY SALVAGE MODAL --- */
.gw-salvage-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(460px, 88%);
	z-index: 1500;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: 28px 32px;
	background: rgba(8, 10, 18, 0.97);
	border: 3px solid var(--neon-red);
	border-radius: 16px;
	box-shadow: 0 0 60px rgba(255, 0, 60, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.9);
	animation: monitor-pulse-red 1s infinite alternate;
}

.gw-salvage-bar.active-state {
	top: auto;
	bottom: 0;
	left: 0;
	transform: none;
	width: 100%;
	border-radius: 0;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 10px 20px;
	border: none;
	border-top: 2px solid var(--neon-amber);
	box-shadow: 0 -4px 20px rgba(255, 170, 0, 0.2);
	animation: none;
	background: rgba(8, 10, 18, 0.96);
}

.gw-salvage-label {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--neon-red);
	text-shadow: 0 0 10px rgba(255, 0, 60, 0.6);
}

.gw-salvage-bar.active-state .gw-salvage-label {
	color: var(--neon-amber);
	text-shadow: 0 0 10px rgba(255, 170, 0, 0.6);
}

.gw-salvage-pct {
	font-family: var(--font-mono);
	font-size: 52px;
	font-weight: bold;
	line-height: 1;
	color: var(--neon-red);
	text-shadow: 0 0 20px rgba(255, 0, 60, 0.5);
}

.gw-salvage-bar.active-state .gw-salvage-pct {
	font-size: 15px;
	color: var(--neon-amber);
	text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

.gw-salvage-desc {
	font-size: 13px;
	color: var(--text-muted);
	max-width: 360px;
	line-height: 1.5;
}

.gw-salvage-bar.active-state .gw-salvage-desc,
.gw-salvage-bar.active-state .gw-salvage-btn {
	display: none;
}

.gw-salvage-bar.cant-afford {
	top: auto;
	bottom: 0;
	left: 0;
	transform: none;
	width: 100%;
	border-radius: 0;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 20px;
	padding: 10px 20px;
	border: none;
	border-top: 2px solid var(--neon-red);
	box-shadow: 0 -4px 20px rgba(255, 0, 60, 0.2);
	animation: none;
	background: rgba(8, 10, 18, 0.96);
}

.gw-salvage-bar.cant-afford .gw-salvage-pct {
	font-size: 15px;
}

.gw-salvage-bar.cant-afford .gw-salvage-desc,
.gw-salvage-bar.cant-afford .gw-salvage-btn {
	display: none;
}

.gw-salvage-btn {
	background: linear-gradient(135deg, var(--neon-amber) 0%, #cc8800 100%);
	color: #000000;
	border: none;
	border-radius: 8px;
	padding: 12px 28px;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 4px 15px rgba(255, 170, 0, 0.4);
	min-width: 280px;
	text-align: center;
	margin-top: 4px;
}

.gw-salvage-btn:hover:not(:disabled) {
	transform: scale(1.03);
	box-shadow: 0 6px 20px rgba(255, 170, 0, 0.6);
}

.gw-salvage-btn:disabled {
	background: #334155;
	color: var(--text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes monitor-pulse-red {
	0% { box-shadow: inset 0 0 15px rgba(255, 0, 60, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 5px rgba(255, 0, 60, 0.1); }
	100% { box-shadow: inset 0 0 20px rgba(255, 0, 60, 0.15), 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 0, 60, 0.4); }
}

@keyframes flash-bg-red {
	0% { background: rgba(255, 0, 60, 0.05); }
	100% { background: rgba(255, 0, 60, 0.25); }
}

@keyframes border-flicker {
	0% { border-color: rgba(255, 0, 60, 0.2); }
	50% { border-color: rgba(255, 0, 60, 0.4); }
	100% { border-color: rgba(255, 0, 60, 0.25); }
}