@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: 100000;
	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);
}

.gw-crew-status-badge.approaching {
	background: rgba(0, 229, 255, 0.12);
	color: var(--neon-cyan);
	border: 1px solid rgba(0, 229, 255, 0.4);
}

.gw-crew-status-badge.unavailable {
	background: rgba(148, 163, 184, 0.08);
	color: var(--text-muted);
	border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Relief crew card — the approaching shift, whose bar fills with shift progress */
.gw-relief-card {
	border-color: rgba(0, 229, 255, 0.35);
	box-shadow: 0 0 12px rgba(0, 229, 255, 0.12);
}

.gw-relief-card .gw-crew-info {
	flex: 1;
}

.gw-relief-track {
	margin-top: 6px;
	width: 95%;
	height: 20px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 229, 255, 0.25);
	border-radius: 5px;
	overflow: hidden;
}

.gw-relief-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, rgba(0, 229, 255, 0.45), var(--neon-cyan));
	box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
	border-radius: 4px;
	transition: width 0.3s linear;
}

/* Parenthetical note beside the relief crew name — same colour, a bit smaller */
.gw-relief-note {
	font-size: 12px;
	font-weight: normal;
	color: #ffffff;
}

/* Auto-scrolling shift briefing (replaces the paged next/next flow) */
.gw-identity-scroll {
	max-height: 48vh;
	overflow-y: auto;
	margin-bottom: 18px;
	-webkit-overflow-scrolling: touch;
}

.gw-identity-scroll-inner {
	padding: 12px 6px;
}

/* Each briefing "page" fills roughly one scroll viewport, so the second part
   (monitors → end) reads as the next page as the panel auto-scrolls. */
.gw-identity-page {
	min-height: 44vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Ornamental power-grid divider between briefing page one and page two:
   glowing lines fading into a pulsing lightning bolt flanked by node diamonds. */
.gw-identity-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 6px 0 10px;
}

.gw-identity-divider::before,
.gw-identity-divider::after {
	content: '';
	height: 2px;
	flex: 1;
	max-width: 120px;
	border-radius: 2px;
	box-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
}

.gw-identity-divider::before { background: linear-gradient(90deg, transparent, var(--neon-cyan)); }
.gw-identity-divider::after  { background: linear-gradient(90deg, var(--neon-cyan), transparent); }

.gw-divider-node {
	color: var(--neon-cyan);
	font-size: 12px;
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

.gw-divider-bolt {
	font-size: 24px;
	line-height: 1;
	animation: gw-divider-pulse 1.8s ease-in-out infinite;
}

@keyframes gw-divider-pulse {
	0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.5)); transform: scale(1); }
	50%      { filter: drop-shadow(0 0 12px rgba(0, 240, 255, 1)); transform: scale(1.15); }
}

/* --- First-run dashboard tour --- */
.gw-tour-card {
	display: none;
	position: fixed;
	z-index: 10050;
	width: 320px;
	max-width: 92vw;
	background: linear-gradient(180deg, rgba(8, 15, 30, 0.98), rgba(4, 10, 22, 0.98));
	border: 1.5px solid var(--neon-cyan);
	border-radius: 10px;
	padding: 16px 18px;
	box-shadow: 0 0 30px rgba(0, 240, 255, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.6);
}

.gw-tour-card.active { display: block; }

/* Pointer triangle aimed at the monitor (flips to whichever edge faces it) */
.gw-tour-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	transform: translateX(-50%);
}

.gw-tour-card.place-below .gw-tour-arrow {
	top: -10px;
	border-bottom: 10px solid var(--neon-cyan);
}

.gw-tour-card.place-above .gw-tour-arrow {
	bottom: -10px;
	border-top: 10px solid var(--neon-cyan);
}

.gw-tour-step {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--neon-cyan);
	margin-bottom: 6px;
}

.gw-tour-title {
	font-size: 18px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 8px 0;
}

.gw-tour-body {
	font-size: 14px;
	line-height: 1.5;
	color: #cbd5e1;
	margin: 0 0 14px 0;
}

.gw-tour-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.gw-tour-skip {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
}

.gw-tour-skip:hover { color: #ffffff; }

/* Spotlight glow on the monitor currently being explained */
.gw-tour-highlight {
	position: relative;
	z-index: 5;
	border-radius: 8px;
	animation: gw-tour-glow 1.6s ease-in-out infinite;
}

@keyframes gw-tour-glow {
	0%, 100% { box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.55), 0 0 18px rgba(0, 240, 255, 0.5); }
	50%      { box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.85), 0 0 30px rgba(0, 240, 255, 0.85); }
}

/* During the tour, dim every monitor so the spotlit one stands out.
   The highlighted monitor keeps full opacity (and its glow). All return
   to normal when the tour ends and gw-tour-active is removed. */
.gw-tour-active .gw-monitor {
	opacity: 0.3;
	transition: opacity 0.25s ease;
}

.gw-tour-active .gw-monitor.gw-tour-highlight {
	opacity: 1;
}

/* Crew-arrival door countdown banner (final phase) */
.gw-door-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 12px 20px;
	background: linear-gradient(90deg, rgba(120, 20, 20, 0.96), rgba(160, 60, 0, 0.96));
	border-bottom: 2px solid var(--neon-amber);
	font-family: var(--font-mono);
	animation: gw-door-pulse 1s ease-in-out infinite;
}

.gw-door-text {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
}

.gw-door-timer {
	color: var(--neon-amber);
	font-size: 22px;
	font-weight: 800;
	text-shadow: 0 0 10px rgba(255, 170, 0, 0.8);
}

.gw-door-buy-btn {
	background: rgba(255, 170, 0, 0.15);
	color: var(--neon-amber);
	border: 1px solid var(--neon-amber);
	border-radius: 6px;
	padding: 6px 14px;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s, box-shadow 0.2s;
}

.gw-door-buy-btn:hover:not(:disabled) {
	background: rgba(255, 170, 0, 0.3);
	box-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

.gw-door-buy-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@keyframes gw-door-pulse {
	0%, 100% { box-shadow: 0 0 18px rgba(255, 170, 0, 0.4); }
	50%      { box-shadow: 0 0 34px rgba(255, 170, 0, 0.85); }
}


/* --- 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: 860px;
	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-card.green-border {
	border-color: var(--neon-green);
	box-shadow: 0 0 30px rgba(57, 255, 20, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
}

/* Win-screen celebration canvas: confetti + balloons + fireworks behind the card */
.gw-celebrate-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

#gw-shift-complete-overlay .gw-overlay-card {
	position: relative;
	z-index: 1;
}

.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;
}

/* --- HEADER RIGHT GROUP + SKILLS CONSOLE BUTTON (v5.1.0) --- */
.gw-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.gw-skills-btn {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--neon-cyan);
	background: rgba(0, 240, 255, 0.08);
	border: 1.5px solid var(--neon-cyan);
	border-radius: 8px;
	padding: 8px 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, box-shadow 0.15s;
}

.gw-skills-btn:hover {
	background: rgba(0, 240, 255, 0.18);
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

/* --- SKILLS Q&A CONSOLE (v5.1.0) --- */
.gw-qa-emergency {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: rgba(255, 0, 60, 0.12);
	border: 1.5px solid var(--neon-red);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-family: var(--font-mono);
	font-size: 20px;
	color: var(--neon-red);
	animation: gw-emergency-pulse 0.7s infinite;
}

/* Whole banner flashes/pulses (background + glow + slight scale) to grab attention. */
@keyframes gw-emergency-pulse {
	0%, 100% {
		background: rgba(255, 0, 60, 0.12);
		box-shadow: 0 0 0 rgba(255, 0, 60, 0);
		transform: scale(1);
	}
	50% {
		background: rgba(255, 0, 60, 0.38);
		box-shadow: 0 0 22px rgba(255, 0, 60, 0.75);
		transform: scale(1.03);
	}
}

/* Repair-job nudge while studying: calm yellow, no blink (only real emergencies flash red). */
.gw-qa-repair {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: rgba(255, 170, 0, 0.12);
	border: 1.5px solid var(--neon-amber);
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 16px;
	font-family: var(--font-mono);
	font-size: 18px;
	color: var(--neon-amber);
}

.gw-qa-go-btn {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: var(--neon-amber);
	color: #1a1205;
	border: none;
	border-radius: 6px;
	padding: 8px 14px;
	cursor: pointer;
	white-space: nowrap;
}
.gw-qa-go-btn:hover { filter: brightness(1.15); }

.gw-qa-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 1px;
	margin-bottom: 10px;
}
.gw-qa-cat { color: var(--neon-amber); text-transform: uppercase; font-weight: 700; }
.gw-qa-score { color: var(--neon-cyan); }

.gw-qa-question {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	margin: 6px 0 20px;
	color: var(--text-light);
}

.gw-qa-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
	width: 100%;
	margin: 0 auto;
}

.gw-qa-option {
	font-size: 15px;
	text-align: left;
	background: rgba(255, 255, 255, 0.04);
	border: 1.5px solid #475569;
	border-radius: 8px;
	padding: 14px 16px;
	cursor: pointer;
	color: var(--text-light);
	transition: background 0.15s, border-color 0.15s;
}
.gw-qa-option:hover:not(:disabled) { background: rgba(0, 240, 255, 0.08); border-color: var(--neon-cyan); }
.gw-qa-option:disabled { cursor: default; }
.gw-qa-option.correct { border-color: var(--neon-green); background: rgba(57, 255, 20, 0.12); color: var(--neon-green); }
.gw-qa-option.wrong { border-color: var(--neon-red); background: rgba(255, 0, 60, 0.1); opacity: 0.7; }

.gw-qa-feedback {
	font-size: 14px;
	line-height: 1.45;
	margin: 16px auto 0;
	max-width: 520px;
	text-align: center;
}
.gw-qa-feedback.good { color: var(--neon-green); }
.gw-qa-feedback.bad { color: var(--neon-red); }

.gw-qa-next-wrap { text-align: center; margin-top: 16px; }

/* --- SHIFT BRIEFING / IDENTITY MODAL (v5.0.0) --- */
.gw-identity-title {
	font-size: 48px;
	line-height: 1.12;
	text-align: center;
	margin: 0 0 18px 0;
}

/* Assessment-intro subheading between the big title and the body. */
.gw-qa-subhead {
	text-align: center;
	color: var(--neon-cyan);
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 18px 0;
	text-shadow: 0 0 12px rgba(0, 240, 255, 0.45);
}

.gw-identity-body {
	text-align: center;
	font-size: 22px;
	line-height: 1.5;
	color: var(--text-light);
	margin: 8px auto 24px;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Target the p directly so the theme's paragraph styles can't override the briefing size. */
.gw-identity-body p {
	margin: 0;
	font-size: 22px;
	line-height: 1.5;
	color: var(--text-light);
}

/* Wider briefing + assessment card than the default overlay (mini-games stay at 860px). */
#gw-identity-overlay .gw-overlay-card,
#gw-qa-overlay .gw-overlay-card {
	width: 90%;
	max-width: 960px;
}

.gw-identity-tag {
	text-align: center;
	color: var(--neon-cyan);
	font-family: var(--font-mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 13px;
	margin-top: 4px;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

/* --- MINI-GAME BRIEFING SCREEN --- */
/* Shown after "Respond" and before the mini-game so the player reads what happened. */
.gw-briefing {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 16px 16px;
	max-width: 560px;
	margin: 0 auto;
}

.gw-briefing-icon {
	font-size: 64px;
	line-height: 1;
	margin-bottom: 12px;
	animation: gw-briefing-pulse 1.2s ease-in-out infinite;
}

@keyframes gw-briefing-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

.gw-briefing-headline {
	font-family: var(--font-mono);
	font-size: 30px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.1;
	margin: 0 0 16px 0;
	text-shadow: 0 0 14px currentColor;
}

.gw-briefing-body {
	font-size: 16px;
	color: var(--text-light, #d6dee8);
	line-height: 1.5;
	margin: 0 0 14px 0;
}

.gw-briefing-body:last-of-type {
	margin-bottom: 28px;
}

.gw-briefing-label {
	font-family: var(--font-mono);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.gw-briefing-btn {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: rgba(0, 0, 0, 0.45);
	border: 2px solid currentColor;
	border-radius: 10px;
	padding: 14px 32px;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.2s ease;
	box-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

.gw-briefing-btn:hover {
	transform: scale(1.05);
	box-shadow: 0 0 24px currentColor;
}

.gw-briefing-btn:active {
	transform: scale(0.98);
}

@media (max-width: 600px) {
	.gw-briefing-headline { font-size: 22px; }
	.gw-briefing-body { font-size: 14px; }
	.gw-briefing-icon { font-size: 48px; }
}

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

/* Squirrel Scramble (Canvas + Grid) */
.gw-squirrel-canvas-container {
	position: relative;
	width: 640px;
	height: 640px;
	background: #080b11;
	border: 2px solid rgba(255, 0, 60, 0.3);
	border-radius: 8px;
	margin: 0 auto 16px auto;
	overflow: hidden;
}

#gw-sq-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.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 Step 1 — lane-dodge driving (v4.0.0) */
.gw-drive-stage {
	position: relative;
	width: 560px;
	max-width: 100%;
	margin: 0 auto 10px;
	border: 2px solid rgba(255, 0, 60, 0.3);
	border-radius: 8px;
	overflow: hidden;
	background: #080b11;
}

.gw-integrity-bar { background: var(--neon-green); }

/* Truck-wrecked choice overlay (v4.6.0) */
.gw-truck-wrecked {
	position: absolute;
	inset: 0;
	background: rgba(8, 11, 17, 0.93);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 20px;
}

.gw-tw-title {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--neon-red);
	text-shadow: 0 0 14px var(--neon-red);
}

.gw-tw-text {
	font-size: 14px;
	color: var(--text-light);
	max-width: 360px;
	line-height: 1.4;
}

.gw-tw-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.gw-tw-buy,
.gw-tw-abandon {
	font-family: var(--font-mono);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 8px;
	padding: 12px 22px;
	cursor: pointer;
	border: 2px solid;
	background: transparent;
}

.gw-tw-buy { border-color: var(--neon-green); color: var(--neon-green); background: rgba(57, 255, 20, 0.1); }
.gw-tw-buy:disabled { opacity: 0.4; cursor: not-allowed; border-color: #475569; color: #94a3b8; background: transparent; }
.gw-tw-abandon { border-color: var(--neon-red); color: var(--neon-red); background: rgba(255, 0, 60, 0.1); }
.gw-tw-buy:not(:disabled):hover,
.gw-tw-abandon:hover { filter: brightness(1.25); }

.gw-tw-note { font-size: 12px; color: var(--neon-red); }

#gw-drive-canvas {
	display: block;
	width: 100%;
	height: auto;
}

.gw-drive-progress-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--text-muted);
	text-align: center;
	margin-bottom: 4px;
}

.gw-drive-controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.gw-drive-controls .gw-sq-btn {
	width: 72px;
	font-size: 20px;
}

/* 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);
}

/* Storm Step 2 — isolate circuit, live-voltage tension (v4.1.0) */
.gw-switch-live {
	animation: gw-switch-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes gw-switch-pulse {
	0% { border-color: #475569; box-shadow: none; }
	100% { border-color: var(--neon-red); box-shadow: 0 0 14px rgba(255, 0, 60, 0.55); }
}

.gw-volt-panel {
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	border: 2px solid var(--neon-red);
	border-radius: 10px;
	padding: 14px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gw-volt-panel.live {
	animation: gw-volt-flash 0.7s steps(1, end) infinite;
}

.gw-volt-panel.safe {
	border-color: var(--neon-green);
	background: rgba(57, 255, 20, 0.07);
	box-shadow: 0 0 12px rgba(57, 255, 20, 0.3);
	animation: gw-volt-settle 0.5s ease-out;
}

.gw-volt-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-muted);
}

.gw-volt-reading {
	font-family: var(--font-mono);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}

.gw-volt-panel.live .gw-volt-reading { color: var(--neon-red); text-shadow: 0 0 14px var(--neon-red); }
.gw-volt-panel.safe .gw-volt-reading { color: var(--neon-green); text-shadow: 0 0 14px var(--neon-green); }

.gw-volt-status {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
}

.gw-volt-panel.live .gw-volt-status { color: var(--neon-red); }
.gw-volt-panel.safe .gw-volt-status { color: var(--neon-green); }

.gw-volt-instruction {
	font-size: 13px;
	text-align: center;
	margin: 14px 0 10px;
	color: var(--text-light);
}

@keyframes gw-volt-flash {
	0% { border-color: var(--neon-red); background: rgba(255, 0, 60, 0.14); box-shadow: 0 0 18px rgba(255, 0, 60, 0.4); }
	50% { border-color: rgba(255, 0, 60, 0.3); background: rgba(255, 0, 60, 0.03); box-shadow: none; }
}

@keyframes gw-volt-settle {
	0% { transform: scale(1.06); box-shadow: 0 0 28px var(--neon-green); }
	100% { transform: scale(1); box-shadow: 0 0 12px rgba(57, 255, 20, 0.3); }
}

/* Storm Step 3 — chainsaw timing bar (v4.2.0) */
.gw-saw-tree {
	font-size: 44px;
	line-height: 1;
	margin-bottom: 6px;
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform-origin: bottom center;
}
.gw-saw-tree.gw-saw-hit { animation: gw-saw-shake 0.18s ease; }
.gw-saw-tree.gw-saw-fell { transform: rotate(72deg) translateY(8px); opacity: 0.4; }

@keyframes gw-saw-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px) rotate(-3deg); }
	75% { transform: translateX(4px) rotate(3deg); }
}

.gw-saw-progress {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--neon-amber);
	margin-bottom: 10px;
}

.gw-saw-bar {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: 34px;
	margin: 0 auto 16px;
	background: #080b11;
	border: 2px solid #334155;
	border-radius: 8px;
	overflow: hidden;
}

.gw-saw-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(57, 255, 20, 0.18);
	border-left: 2px solid var(--neon-green);
	border-right: 2px solid var(--neon-green);
}

.gw-saw-indicator {
	position: absolute;
	top: -2px;
	bottom: -2px;
	width: 5px;
	background: var(--neon-amber);
	box-shadow: 0 0 10px var(--neon-amber);
	transform: translateX(-50%);
}

.gw-saw-flash-good { animation: gw-saw-good 0.25s ease; }
.gw-saw-flash-bad { animation: gw-saw-bad 0.25s ease; }
@keyframes gw-saw-good { 0% { box-shadow: inset 0 0 0 2px var(--neon-green); } 100% { box-shadow: none; } }
@keyframes gw-saw-bad { 0% { box-shadow: inset 0 0 0 2px var(--neon-red); } 100% { box-shadow: none; } }

/* Storm Step 4 — drag wire into socket (v4.3.0) */
.gw-wire-zone {
	position: relative;
	width: 100%;
	max-width: 460px;
	height: 200px;
	margin: 0 auto;
	background: #080b11;
	border: 2px solid #334155;
	border-radius: 10px;
	overflow: hidden;
	touch-action: none;
}

.gw-wire-socket {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 3px dashed var(--neon-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: var(--neon-cyan);
	transition: box-shadow 0.15s, border-color 0.15s, color 0.15s;
}

.gw-wire-socket.gw-wire-near {
	border-color: var(--neon-green);
	box-shadow: 0 0 16px var(--neon-green);
}

.gw-wire-socket.gw-wire-connected {
	border-style: solid;
	border-color: var(--neon-green);
	color: var(--neon-green);
	box-shadow: 0 0 22px var(--neon-green);
}

.gw-wire-plug {
	position: absolute;
	left: 44px;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(0, 240, 255, 0.08);
	border: 2px solid var(--neon-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.gw-wire-plug.gw-wire-dragging { cursor: grabbing; box-shadow: 0 0 16px var(--neon-cyan); }
.gw-wire-plug.gw-wire-locked { cursor: default; border-color: var(--neon-green); }

.gw-wire-spark {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
}

.gw-wire-spark-go { animation: gw-wire-spark-anim 0.6s ease-out; }

@keyframes gw-wire-spark-anim {
	0% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 220, 100, 0.9), 0 0 6px 4px rgba(255, 255, 255, 0.9); }
	100% { opacity: 0; box-shadow: 0 0 26px 20px rgba(255, 200, 0, 0), 0 0 12px 10px rgba(255, 255, 255, 0); }
}

/* Storm Step 5 — restore power payoff (v4.4.0) */
.gw-powerline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 6px auto 12px;
	min-height: 44px;
}

.gw-pl-pole,
.gw-pl-bulb {
	font-size: 26px;
	filter: grayscale(1) brightness(0.55);
	transition: filter 0.3s ease;
}

.gw-pl-seg {
	width: 34px;
	height: 6px;
	border-radius: 3px;
	background: #1e293b;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.gw-powerline.energized .gw-pl-pole,
.gw-powerline.energized .gw-pl-bulb { filter: none; }
.gw-powerline.energized .gw-pl-bulb { transition-delay: 0.36s; }

.gw-powerline.energized .gw-pl-seg {
	background: var(--neon-amber);
	box-shadow: 0 0 10px var(--neon-amber);
}
.gw-powerline.energized .gw-pl-seg:nth-child(2) { transition-delay: 0s; }
.gw-powerline.energized .gw-pl-seg:nth-child(3) { transition-delay: 0.12s; }
.gw-powerline.energized .gw-pl-seg:nth-child(4) { transition-delay: 0.24s; }

.gw-restore-banner {
	font-family: var(--font-mono);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--neon-green);
	text-shadow: 0 0 16px var(--neon-green);
	text-align: center;
	margin: 4px 0 10px;
	opacity: 0;
	transform: scale(0.7);
}

.gw-restore-banner.show { animation: gw-restore-pop 0.6s ease-out forwards; }

@keyframes gw-restore-pop {
	0% { opacity: 0; transform: scale(0.7); }
	60% { opacity: 1; transform: scale(1.12); }
	100% { opacity: 1; transform: scale(1); }
}

/* 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, 110px);
	grid-template-rows: repeat(4, 110px);
	gap: 8px;
	justify-content: center;
	margin: 0 auto 16px auto;
	background: #080b11;
	padding: 12px;
	border-radius: 12px;
	border: 2px solid var(--neon-amber);
	width: 488px;
}

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

.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 — target SVG only so the cell border stays static */
.rot-0   .gw-gridlock-svg { transform: rotate(0deg); }
.rot-90  .gw-gridlock-svg { transform: rotate(90deg); }
.rot-180 .gw-gridlock-svg { transform: rotate(180deg); }
.rot-270 .gw-gridlock-svg { 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;
}

/* "Emergency fixed" resume prompt — stacked choice buttons */
.gw-resume-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.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; }

/* --- FULLSCREEN TOGGLE BUTTON --- */
.gw-fullscreen-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1001;
	background: rgba(0, 240, 255, 0.08);
	border: 1px solid rgba(0, 240, 255, 0.35);
	border-radius: 6px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	flex-shrink: 0;
	padding: 0;
}
.gw-fullscreen-btn:hover {
	background: rgba(0, 240, 255, 0.18);
	box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

/* Corner-bracket expand / compress icons */
.gw-fs-icon {
	display: block;
	position: relative;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.gw-fs-icon b {
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	border-width: 0;
	border-style: solid;
	border-color: #ffffff;
}

/* Expand: each bracket corner points outward to its respective screen corner */
.gw-fs-icon--expand b:nth-child(1) { top: 0;    left: 0;  border-top-width: 2.5px; border-left-width: 2.5px;   }
.gw-fs-icon--expand b:nth-child(2) { top: 0;    right: 0; border-top-width: 2.5px; border-right-width: 2.5px;  }
.gw-fs-icon--expand b:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 2.5px; border-left-width: 2.5px; }
.gw-fs-icon--expand b:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2.5px; border-right-width: 2.5px;}

/* Compress: each bracket corner points inward toward centre */
.gw-fs-icon--compress b:nth-child(1) { top: 0;    left: 0;  border-bottom-width: 2.5px; border-right-width: 2.5px; }
.gw-fs-icon--compress b:nth-child(2) { top: 0;    right: 0; border-bottom-width: 2.5px; border-left-width: 2.5px;  }
.gw-fs-icon--compress b:nth-child(3) { bottom: 0; left: 0;  border-top-width: 2.5px;    border-right-width: 2.5px; }
.gw-fs-icon--compress b:nth-child(4) { bottom: 0; right: 0; border-top-width: 2.5px;    border-left-width: 2.5px;  }

/* --- GLOBAL FULLSCREEN TOGGLE (dashboard header button) --- */
.gw-fullscreen-toggle {
	background: rgba(0, 240, 255, 0.08);
	border: 1px solid rgba(0, 240, 255, 0.35);
	border-radius: 6px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	flex-shrink: 0;
	padding: 0;
}
.gw-fullscreen-toggle:hover {
	background: rgba(0, 240, 255, 0.18);
	box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.gw-mute-btn {
	background: rgba(0, 240, 255, 0.08);
	border: 1px solid rgba(0, 240, 255, 0.35);
	border-radius: 6px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background 0.2s, box-shadow 0.2s;
	flex-shrink: 0;
	padding: 0;
	position: relative;
	z-index: 2001;
}
.gw-mute-btn:hover {
	background: rgba(0, 240, 255, 0.18);
	box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

#gw-identity-overlay {
	flex-direction: column;
	gap: 10px;
}
.gw-audio-badge {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--neon-cyan);
	pointer-events: none;
	white-space: nowrap;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
	animation: gw-badge-pulse 1.2s ease-in-out infinite;
}
.gw-audio-badge.visible {
	display: flex;
}
@keyframes gw-badge-pulse {
	0%, 100% { opacity: 0.4; }
	50%       { opacity: 1; }
}

/* The whole game (mount element) goes fullscreen and fills the screen, so every screen —
   monitors, briefing, mini-games — stays inside one persistent fullscreen. */
.gw-fs-root:fullscreen,
.gw-fs-root:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	overflow-y: auto;
	background: rgba(5, 7, 12, 1);
}

/* --- FULLSCREEN STATE: enlarge the mini-game card/canvas when the app is fullscreen --- */
.gw-fs-root:fullscreen #gw-minigame-overlay .gw-overlay-card,
.gw-fs-root:-webkit-full-screen #gw-minigame-overlay .gw-overlay-card {
	max-width: 95vw;
	max-height: 95vh;
	width: 95vw;
}

.gw-fs-root:fullscreen #gw-minigame-overlay .gw-squirrel-canvas-container,
.gw-fs-root:-webkit-full-screen #gw-minigame-overlay .gw-squirrel-canvas-container {
	width: min(680px, 68vmin);
	height: min(680px, 68vmin);
}

.gw-fs-root:fullscreen #gw-minigame-overlay .gw-gridlock-board,
.gw-fs-root:-webkit-full-screen #gw-minigame-overlay .gw-gridlock-board {
	grid-template-columns: repeat(4, 140px);
	grid-template-rows: repeat(4, 140px);
	width: auto;
}

.gw-fs-root:fullscreen #gw-minigame-overlay .gw-gridlock-cell,
.gw-fs-root:-webkit-full-screen #gw-minigame-overlay .gw-gridlock-cell {
	width: 140px;
	height: 140px;
}

/* --- 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); }
}

/* --- Lifelines: "grid about to collapse" offer prompt + frozen banner --- */
.gw-lifeline-prompt {
	position: fixed; /* viewport-relative so it shows from either the overlay or the dashboard */
	inset: 0;
	z-index: 10060; /* above the mini-game card */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 4, 10, 0.72);
	backdrop-filter: blur(2px);
	padding: 20px;
	animation: gw-lifeline-in 0.18s ease-out;
}

@keyframes gw-lifeline-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.gw-lifeline-box {
	width: 100%;
	max-width: 440px;
	background: var(--bg-monitor);
	border: 2px solid var(--neon-red);
	border-radius: 12px;
	box-shadow: 0 0 28px rgba(255, 0, 60, 0.45);
	padding: 26px 24px;
	text-align: center;
	animation: gw-lifeline-pulse 1.1s ease-in-out infinite;
}

@keyframes gw-lifeline-pulse {
	0%, 100% { box-shadow: 0 0 22px rgba(255, 0, 60, 0.35); }
	50% { box-shadow: 0 0 34px rgba(255, 0, 60, 0.6); }
}

.gw-lifeline-warn {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 800;
	color: var(--neon-red);
	text-shadow: 0 0 12px rgba(255, 0, 60, 0.6);
	margin-bottom: 12px;
}

.gw-lifeline-msg {
	color: var(--text-light);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 20px;
}

.gw-lifeline-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gw-lifeline-use {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 700;
	color: #05070c;
	background: var(--neon-amber);
	border: none;
	border-radius: 8px;
	padding: 13px 18px;
	cursor: pointer;
	box-shadow: 0 0 16px rgba(255, 170, 0, 0.5);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gw-lifeline-use:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 24px rgba(255, 170, 0, 0.75);
}

.gw-lifeline-skip {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--text-muted);
	background: transparent;
	border: 1px solid var(--border-crt);
	border-radius: 8px;
	padding: 10px 18px;
	cursor: pointer;
	transition: color 0.1s ease, border-color 0.1s ease;
}

.gw-lifeline-skip:hover {
	color: var(--text-light);
	border-color: var(--text-muted);
}

.gw-lifeline-frozen {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10055;
	max-width: 90%;
	background: rgba(0, 240, 255, 0.12);
	border: 1px solid var(--neon-cyan);
	border-radius: 8px;
	padding: 8px 16px;
	color: var(--neon-cyan);
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
	box-shadow: 0 0 16px rgba(0, 240, 255, 0.25);
	animation: gw-lifeline-frozen-pulse 1.6s ease-in-out infinite;
}

@keyframes gw-lifeline-frozen-pulse {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

/* --- Door-phase "extend or lose" prompt (sits OVER the mini-game) + one-time tip toast --- */
.gw-door-prompt {
	position: fixed;
	inset: 0;
	z-index: 10080; /* above the mini-game overlay (1000) and the Lifeline prompt (10060) */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(2, 4, 10, 0.82);
	backdrop-filter: blur(3px);
	padding: 20px;
	animation: gw-lifeline-in 0.18s ease-out;
}

.gw-door-prompt-box {
	width: 100%;
	max-width: 460px;
	background: var(--bg-monitor);
	border: 2px solid var(--neon-amber);
	border-radius: 12px;
	box-shadow: 0 0 30px rgba(255, 170, 0, 0.5);
	padding: 26px 24px;
	text-align: center;
	animation: gw-door-prompt-pulse 1s ease-in-out infinite;
}

@keyframes gw-door-prompt-pulse {
	0%, 100% { box-shadow: 0 0 24px rgba(255, 170, 0, 0.4); }
	50% { box-shadow: 0 0 38px rgba(255, 170, 0, 0.7); }
}

.gw-door-prompt-warn {
	font-family: var(--font-mono);
	font-size: 24px;
	font-weight: 800;
	color: var(--neon-amber);
	text-shadow: 0 0 12px rgba(255, 170, 0, 0.6);
	margin-bottom: 12px;
}

.gw-door-prompt-msg {
	color: var(--text-light);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 20px;
}

.gw-door-prompt-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gw-door-prompt-use {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 700;
	color: #05070c;
	background: var(--neon-amber);
	border: none;
	border-radius: 8px;
	padding: 13px 18px;
	cursor: pointer;
	box-shadow: 0 0 16px rgba(255, 170, 0, 0.5);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gw-door-prompt-use:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 24px rgba(255, 170, 0, 0.8);
}

.gw-door-prompt-skip {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--text-muted);
	background: transparent;
	border: 1px solid var(--border-crt);
	border-radius: 8px;
	padding: 10px 18px;
	cursor: pointer;
	transition: color 0.1s ease, border-color 0.1s ease;
}

.gw-door-prompt-skip:hover {
	color: var(--text-light);
	border-color: var(--text-muted);
}

.gw-buffer-tip {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10090;
	max-width: 90%;
	width: 460px;
	background: var(--bg-monitor);
	border: 1px solid var(--neon-cyan);
	border-radius: 10px;
	padding: 12px 18px;
	color: var(--neon-cyan);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
	animation: gw-buffer-tip-in 0.3s ease-out;
}

@keyframes gw-buffer-tip-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}