when-blackout — gitlawb

repository

loading code, commits, and activity

repositories

loading repo index

#1	/* ===== BLOCKOUT 3D — Mobile-First Block Puzzle ===== */
#2
#3	:root {
#4	color-scheme: dark;
#5	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
#6	line-height: 1.5;
#7	--bg: #07070f;
#8	--surface: #0f0f1a;
#9	--surface-2: #16162a;
#10	--surface-3: #1e1e38;
#11	--border: rgba(255, 255, 255, 0.06);
#12	--border-bright: rgba(255, 255, 255, 0.12);
#13	--text: #e8e8f0;
#14	--text-dim: rgba(255, 255, 255, 0.45);
#15	--accent: #7c3aed;
#16	--accent-2: #a78bfa;
#17	--accent-glow: rgba(124, 58, 237, 0.35);
#18	--gold: #f59e0b;
#19	--green: #10b981;
#20	--red: #ef4444;
#21	--blue: #3b82f6;
#22	--cyan: #06b6d4;
#23	--cell-size: 42px;
#24	--gap: 3px;
#25	--radius: 10px;
#26	--board-pad: 8px;
#27	--cell-depth: 4px;
#28	--cell-highlight: rgba(255, 255, 255, 0.15);
#29	--cell-shadow: rgba(0, 0, 0, 0.5);
#30	}
#31
#32	* { box-sizing: border-box; margin: 0; padding: 0; }
#33
#34	html, body, #root {
#35	min-height: 100dvh;
#36	background: var(--bg);
#37	color: var(--text);
#38	overflow-x: hidden;
#39	-webkit-tap-highlight-color: transparent;
#40	-webkit-touch-callout: none;
#41	user-select: none;
#42	}
#43
#44	/* ===== LANDING PAGE ===== */
#45
#46	.landing {
#47	min-height: 100dvh;
#48	display: flex;
#49	flex-direction: column;
#50	align-items: center;
#51	justify-content: center;
#52	position: relative;
#53	overflow: hidden;
#54	padding: 2rem 1.5rem;
#55	text-align: center;
#56	}
#57
#58	.landing-bg {
#59	position: absolute;
#60	inset: 0;
#61	z-index: 0;
#62	}
#63
#64	.landing-content {
#65	position: relative;
#66	z-index: 2;
#67	display: flex;
#68	flex-direction: column;
#69	align-items: center;
#70	gap: 1.5rem;
#71	max-width: 420px;
#72	animation: landingFadeIn 1s ease-out;
#73	}
#74
#75	@keyframes landingFadeIn {
#76	from { opacity: 0; transform: translateY(30px); }
#77	to { opacity: 1; transform: translateY(0); }
#78	}
#79
#80	.landing-logo {
#81	font-size: 3rem;
#82	font-weight: 900;
#83	background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--cyan), var(--gold));
#84	background-size: 300% 300%;
#85	-webkit-background-clip: text;
#86	-webkit-text-fill-color: transparent;
#87	animation: logoShift 3s ease infinite;
#88	letter-spacing: -0.04em;
#89	line-height: 1.1;
#90	text-shadow: 0 0 60px rgba(124, 58, 237, 0.3);
#91	}
#92
#93	.landing-subtitle {
#94	font-size: 0.9rem;
#95	color: var(--text-dim);
#96	font-weight: 500;
#97	line-height: 1.6;
#98	max-width: 320px;
#99	}
#100
#101	.landing-features {
#102	display: grid;
#103	grid-template-columns: repeat(3, 1fr);
#104	gap: 0.75rem;
#105	width: 100%;
#106	}
#107
#108	.landing-feature {
#109	background: var(--surface);
#110	border: 1px solid var(--border);
#111	border-radius: var(--radius);
#112	padding: 0.75rem 0.5rem;
#113	display: flex;
#114	flex-direction: column;
#115	align-items: center;
#116	gap: 0.3rem;
#117	animation: featurePop 0.6s ease-out backwards;
#118	}
#119
#120	.landing-feature:nth-child(1) { animation-delay: 0.2s; }
#121	.landing-feature:nth-child(2) { animation-delay: 0.35s; }
#122	.landing-feature:nth-child(3) { animation-delay: 0.5s; }
#123
#124	@keyframes featurePop {
#125	from { opacity: 0; transform: scale(0.8) translateY(10px); }
#126	to { opacity: 1; transform: scale(1) translateY(0); }
#127	}
#128
#129	.landing-feature .icon { font-size: 1.3rem; }
#130	.landing-feature .label { font-size: 0.6rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
#131
#132	.play-btn {
#133	padding: 0.9rem 2.5rem;
#134	background: linear-gradient(135deg, var(--accent), #9333ea);
#135	border: none;
#136	border-radius: 50px;
#137	color: white;
#138	font-size: 1.1rem;
#139	font-weight: 800;
#140	cursor: pointer;
#141	transition: all 0.3s;
#142	box-shadow: 0 0 40px var(--accent-glow), 0 8px 24px rgba(0, 0, 0, 0.4);
#143	animation: playPulse 2s ease-in-out infinite;
#144	touch-action: manipulation;
#145	letter-spacing: 0.05em;
#146	}
#147
#148	.play-btn:hover {
#149	transform: scale(1.05);
#150	box-shadow: 0 0 60px var(--accent-glow), 0 12px 32px rgba(0, 0, 0, 0.5);
#151	}
#152
#153	.play-btn:active {
#154	transform: scale(0.97);
#155	}
#156
#157	@keyframes playPulse {
#158	0%, 100% { box-shadow: 0 0 40px var(--accent-glow), 0 8px 24px rgba(0, 0, 0, 0.4); }
#159	50% { box-shadow: 0 0 60px rgba(124, 58, 237, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); }
#160	}
#161
#162	.landing-stats {
#163	display: flex;
#164	gap: 1.5rem;
#165	opacity: 0.6;
#166	}
#167
#168	.landing-stat {
#169	text-align: center;
#170	}
#171
#172	.landing-stat .num {
#173	font-size: 1.2rem;
#174	font-weight: 800;
#175	color: var(--accent-2);
#176	}
#177
#178	.landing-stat .lbl {
#179	font-size: 0.55rem;
#180	color: var(--text-dim);
#181	text-transform: uppercase;
#182	letter-spacing: 0.08em;
#183	}
#184
#185	.landing-footer {
#186	position: absolute;
#187	bottom: 1.5rem;
#188	font-size: 0.55rem;
#189	color: rgba(255, 255, 255, 0.2);
#190	z-index: 2;
#191	}
#192
#193	@keyframes logoShift {
#194	0%, 100% { background-position: 0% 50%; }
#195	50% { background-position: 100% 50%; }
#196	}
#197
#198	/* ===== APP LAYOUT ===== */
#199
#200	.app {
#201	min-height: 100dvh;
#202	display: flex;
#203	flex-direction: column;
#204	align-items: center;
#205	padding: 0.5rem 0.5rem 0;
#206	position: relative;
#207	max-width: 100vw;
#208	}
#209
#210	/* ===== GAME LAYOUT — 3 COLUMNS ===== */
#211
#212	.game-layout {
#213	display: flex;
#214	gap: 0.75rem;
#215	align-items: flex-start;
#216	width: 100%;
#217	max-width: 900px;
#218	flex: 1;
#219	min-height: 0;
#220	justify-content: center;
#221	}
#222
#223	.game-center {
#224	display: flex;
#225	flex-direction: column;
#226	align-items: center;
#227	gap: 0.5rem;
#228	flex-shrink: 0;
#229	}
#230
#231	/* ===== SIDE PANELS ===== */
#232
#233	.side-panel {
#234	width: 160px;
#235	display: flex;
#236	flex-direction: column;
#237	gap: 0.5rem;
#238	flex-shrink: 0;
#239	position: sticky;
#240	top: 0.5rem;
#241	}
#242
#243	.panel-section {
#244	background: var(--surface);
#245	border: 1px solid var(--border);
#246	border-radius: var(--radius);
#247	padding: 0.5rem;
#248	}
#249
#250	.panel-section-title {
#251	font-size: 0.5rem;
#252	text-transform: uppercase;
#253	letter-spacing: 0.1em;
#254	color: var(--text-dim);
#255	font-weight: 700;
#256	margin-bottom: 0.4rem;
#257	padding-bottom: 0.3rem;
#258	border-bottom: 1px solid var(--border);
#259	}
#260
#261	/* Stat rows */
#262	.stat-row {
#263	display: flex;
#264	justify-content: space-between;
#265	align-items: center;
#266	padding: 0.2rem 0;
#267	}
#268
#269	.stat-row .stat-label {
#270	font-size: 0.5rem;
#271	text-transform: uppercase;
#272	letter-spacing: 0.08em;
#273	color: var(--text-dim);
#274	}
#275
#276	.stat-row .stat-value {
#277	font-size: 0.85rem;
#278	font-weight: 800;
#279	font-variant-numeric: tabular-nums;
#280	}
#281
#282	.stat-row .stat-value.score { color: var(--gold); }
#283	.stat-row .stat-value.combo { color: var(--accent-2); }
#284	.stat-row .stat-value.level { color: var(--green); }
#285	.stat-row .stat-value.xp { color: var(--blue); }
#286
#287	.xp-bar-mini {
#288	width: 100%;
#289	height: 3px;
#290	background: var(--bg);
#291	border-radius: 2px;
#292	margin-top: 0.3rem;
#293	overflow: hidden;
#294	}
#295
#296	.xp-bar-mini-fill {
#297	height: 100%;
#298	background: linear-gradient(90deg, var(--blue), var(--accent));
#299	border-radius: 2px;
#300	transition: width 0.5s ease-out;
#301	}
#302
#303	/* Challenge mini */
#304	.challenge-mini {
#305	display: flex;
#306	align-items: flex-start;
#307	gap: 0.3rem;
#308	}
#309
#310	.challenge-mini-icon { font-size: 0.85rem; flex-shrink: 0; }
#311
#312	.challenge-mini-info {
#313	display: flex;
#314	flex-direction: column;
#315	gap: 0.1rem;
#316	min-width: 0;
#317	}
#318
#319	.challenge-mini-desc {
#320	font-size: 0.55rem;
#321	font-weight: 600;
#322	color: var(--text);
#323	line-height: 1.3;
#324	}
#325
#326	.challenge-mini-goal {
#327	font-size: 0.5rem;
#328	color: var(--gold);
#329	font-weight: 700;
#330	}
#331
#332	/* Panel buttons */
#333	.panel-buttons {
#334	display: flex;
#335	flex-direction: column;
#336	gap: 0.25rem;
#337	}
#338
#339	.panel-buttons .btn {
#340	width: 100%;
#341	justify-content: center;
#342	font-size: 0.6rem;
#343	padding: 0.35rem 0.5rem;
#344	}
#345
#346	/* AI sections */
#347	.ai-section .ai-coach-text {
#348	font-size: 0.55rem;
#349	color: var(--cyan);
#350	line-height: 1.4;
#351	font-weight: 500;
#352	}
#353
#354	.ai-hint-section .ai-hint-text {
#355	font-size: 0.6rem;
#356	font-weight: 700;
#357	color: var(--green);
#358	}
#359
#360	.ai-hint-section .ai-hint-clears {
#361	color: var(--gold);
#362	}
#363
#364	/* Power-ups column */
#365	.powerups-col {
#366	display: flex;
#367	flex-direction: column;
#368	gap: 0.3rem;
#369	}
#370
#371	.powerups-col .powerup-btn {
#372	width: 100%;
#373	justify-content: space-between;
#374	font-size: 0.55rem;
#375	padding: 0.4rem 0.5rem;
#376	}
#377
#378	/* ===== HEADER ===== */
#379
#380	.header {
#381	width: 100%;
#382	max-width: 480px;
#383	display: flex;
#384	justify-content: space-between;
#385	align-items: center;
#386	padding: 0.4rem 0;
#387	gap: 0.5rem;
#388	flex-shrink: 0;
#389	}
#390
#391	.header-left {
#392	display: flex;
#393	align-items: center;
#394	gap: 0.5rem;
#395	}
#396
#397	.logo {
#398	font-size: 1.25rem;
#399	font-weight: 900;
#400	background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--cyan));
#401	background-size: 200% 200%;
#402	-webkit-background-clip: text;
#403	-webkit-text-fill-color: transparent;
#404	animation: logoShift 4s ease infinite;
#405	letter-spacing: -0.03em;
#406	}
#407
#408	.header-right {
#409	display: flex;
#410	align-items: center;
#411	gap: 0.35rem;
#412	}
#413
#414	.btn {
#415	display: inline-flex;
#416	align-items: center;
#417	gap: 0.3rem;
#418	padding: 0.4rem 0.75rem;
#419	border: 1px solid var(--border);
#420	border-radius: var(--radius);
#421	background: var(--surface);
#422	color: var(--text);
#423	font-size: 0.7rem;
#424	font-weight: 600;
#425	cursor: pointer;
#426	transition: all 0.2s;
#427	white-space: nowrap;
#428	touch-action: manipulation;
#429	}
#430
#431	.btn:hover, .btn:active {
#432	background: var(--surface-2);
#433	border-color: var(--border-bright);
#434	}
#435
#436	.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
#437	.btn-accent:hover { background: #6d28d9; }
#438	.btn-gold { background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.3); color: var(--gold); }
#439	.btn-green { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); color: var(--green); }
#440	.btn-sm { padding: 0.3rem 0.55rem; font-size: 0.65rem; }
#441	.btn-icon { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
#442
#443	/* ===== STATS BAR ===== */
#444
#445	.stats-bar {
#446	width: 100%;
#447	max-width: 480px;
#448	display: grid;
#449	grid-template-columns: repeat(4, 1fr);
#450	gap: 0.35rem;
#451	margin-bottom: 0.4rem;
#452	flex-shrink: 0;
#453	}
#454
#455	.stat-card {
#456	background: var(--surface);
#457	border: 1px solid var(--border);
#458	border-radius: var(--radius);
#459	padding: 0.4rem 0.5rem;
#460	text-align: center;
#461	position: relative;
#462	overflow: hidden;
#463	}
#464
#465	.stat-card::before {
#466	content: '';
#467	position: absolute;
#468	top: 0; left: 0; right: 0;
#469	height: 2px;
#470	background: linear-gradient(90deg, transparent, var(--accent), transparent);
#471	opacity: 0.4;
#472	}
#473
#474	.stat-label {
#475	font-size: 0.5rem;
#476	text-transform: uppercase;
#477	letter-spacing: 0.12em;
#478	color: var(--text-dim);
#479	margin-bottom: 0.1rem;
#480	}
#481
#482	.stat-value {
#483	font-size: 1rem;
#484	font-weight: 800;
#485	font-variant-numeric: tabular-nums;
#486	}
#487
#488	.stat-value.score { color: var(--gold); }
#489	.stat-value.combo { color: var(--accent-2); }
#490	.stat-value.level { color: var(--green); }
#491	.stat-value.xp { color: var(--blue); }
#492
#493	/* ===== XP BAR ===== */
#494
#495	.xp-bar-wrap {
#496	width: 100%;
#497	max-width: 480px;
#498	height: 4px;
#499	background: var(--surface);
#500	border-radius: 2px;
#501	margin-bottom: 0.5rem;
#502	overflow: hidden;
#503	border: 1px solid var(--border);
#504	flex-shrink: 0;
#505	}
#506
#507	.xp-bar-fill {
#508	height: 100%;
#509	background: linear-gradient(90deg, var(--blue), var(--accent), var(--cyan));
#510	background-size: 200% 100%;
#511	border-radius: 2px;
#512	transition: width 0.5s ease-out;
#513	animation: xpShimmer 2s linear infinite;
#514	}
#515
#516	@keyframes xpShimmer {
#517	0% { background-position: 0% 0%; }
#518	100% { background-position: 200% 0%; }
#519	}
#520
#521	/* ===== GAME AREA ===== */
#522
#523	.game-area {
#524	display: flex;
#525	flex-direction: column;
#526	gap: 0.5rem;
#527	align-items: center;
#528	width: 100%;
#529	max-width: 480px;
#530	flex: 1;
#531	min-height: 0;
#532	}
#533
#534	/* ===== BOARD — 3D CELLS ===== */
#535
#536	.board-wrapper {
#537	position: relative;
#538	perspective: 800px;
#539	}
#540
#541	.board {
#542	display: grid;
#543	grid-template-columns: repeat(8, var(--cell-size));
#544	grid-template-rows: repeat(8, var(--cell-size));
#545	gap: var(--gap);
#546	background: linear-gradient(145deg, #0c0c18, #111122);
#547	border: 2px solid var(--border);
#548	border-radius: calc(var(--radius) + 6px);
#549	padding: var(--board-pad);
#550	position: relative;
#551	box-shadow:
#552	0 0 60px rgba(124, 58, 237, 0.06),
#553	0 20px 60px rgba(0, 0, 0, 0.5),
#554	inset 0 1px 0 rgba(255, 255, 255, 0.03);
#555	transform-style: preserve-3d;
#556	transition: transform 0.3s ease;
#557	}
#558
#559	.board:hover {
#560	transform: rotateX(1deg) rotateY(-0.5deg);
#561	}
#562
#563	.board.shake {
#564	animation: shake 0.4s ease;
#565	}
#566
#567	@keyframes shake {
#568	0%, 100% { transform: translateX(0); }
#569	20% { transform: translateX(-5px); }
#570	40% { transform: translateX(5px); }
#571	60% { transform: translateX(-3px); }
#572	80% { transform: translateX(3px); }
#573	}
#574
#575	/* ===== 3D CELL ===== */
#576
#577	.cell {
#578	width: var(--cell-size);
#579	height: var(--cell-size);
#580	border-radius: 5px;
#581	background: rgba(255, 255, 255, 0.025);
#582	border: 1px solid rgba(255, 255, 255, 0.03);
#583	cursor: pointer;
#584	position: relative;
#585	transition: all 0.12s ease;
#586	transform-style: preserve-3d;
#587	}
#588
#589	.cell:hover {
#590	background: rgba(255, 255, 255, 0.06);
#591	border-color: rgba(255, 255, 255, 0.1);
#592	}
#593
#594	.cell.filled {
#595	border: none;
#596	transform: translateZ(var(--cell-depth));
#597	box-shadow:
#598	inset 0 1px 1px var(--cell-highlight),
#599	0 var(--cell-depth) 0 rgba(0, 0, 0, 0.3),
#600	0 calc(var(--cell-depth) + 2px) 8px rgba(0, 0, 0, 0.4);
#601	}
#602
#603	.cell.filled::before {
#604	content: '';
#605	position: absolute;
#606	inset: 0;
#607	border-radius: 5px;
#608	background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
#609	pointer-events: none;
#610	}
#611
#612	.cell.filled::after {
#613	content: '';
#614	position: absolute;
#615	top: 2px; right: -1px; bottom: 0; left: 2px;
#616	border-radius: 0 5px 5px 0;
#617	background: linear-gradient(90deg, transparent, rgba(0,0,0,0.2));
#618	pointer-events: none;
#619	}
#620
#621	.cell.ghost {
#622	transform: translateZ(2px);
#623	opacity: 0.35;
#624	animation: ghostPulse 1.2s ease-in-out infinite;
#625	border: 1px dashed rgba(255, 255, 255, 0.2);
#626	}
#627
#628	@keyframes ghostPulse {
#629	0%, 100% { opacity: 0.25; transform: translateZ(2px); }
#630	50% { opacity: 0.5; transform: translateZ(4px); }
#631	}
#632
#633	.cell.clearing {
#634	animation: clearFlash3D 0.5s ease-out forwards;
#635	}
#636
#637	@keyframes clearFlash3D {
#638	0% { transform: translateZ(var(--cell-depth)) scale(1); filter: brightness(2); }
#639	30% { transform: translateZ(calc(var(--cell-depth) * 3)) scale(1.15); filter: brightness(3); }
#640	100% { transform: translateZ(0) scale(0); filter: brightness(0); opacity: 0; }
#641	}
#642
#643	.cell.invalid-flash {
#644	animation: invalidFlash 0.3s ease;
#645	}
#646
#647	@keyframes invalidFlash {
#648	0%, 100% { background: rgba(255, 255, 255, 0.025); }
#649	50% { background: rgba(239, 68, 68, 0.35); border-color: rgba(239, 68, 68, 0.5); }
#650	}
#651
#652	/* ===== PARTICLE CANVAS ===== */
#653
#654	.particle-canvas {
#655	position: fixed;
#656	inset: 0;
#657	width: 100vw;
#658	height: 100dvh;
#659	pointer-events: none;
#660	z-index: 10;
#661	}
#662
#663	/* ===== PIECE TRAY ===== */
#664
#665	.piece-tray {
#666	display: flex;
#667	flex-direction: row;
#668	gap: 0.5rem;
#669	width: 100%;
#670	justify-content: center;
#671	align-items: center;
#672	padding: 0.4rem 0;
#673	flex-shrink: 0;
#674	}
#675
#676	.tray-label {
#677	display: none;
#678	}
#679
#680	.piece-slot {
#681	background: var(--surface);
#682	border: 2px solid var(--border);
#683	border-radius: calc(var(--radius) + 2px);
#684	padding: 0.6rem;
#685	cursor: pointer;
#686	transition: all 0.2s;
#687	display: flex;
#688	align-items: center;
#689	justify-content: center;
#690	min-height: 80px;
#691	min-width: 80px;
#692	position: relative;
#693	flex: 1;
#694	max-width: 120px;
#695	touch-action: manipulation;
#696	}
#697
#698	.piece-slot:active { transform: scale(0.95); }
#699	.piece-slot:hover { border-color: var(--border-bright); background: var(--surface-2); }
#700
#701	.piece-slot.selected {
#702	border-color: var(--accent);
#703	box-shadow: 0 0 20px var(--accent-glow), inset 0 0 20px rgba(124, 58, 237, 0.08);
#704	transform: translateY(-2px);
#705	}
#706
#707	.piece-slot.used { opacity: 0.2; pointer-events: none; }
#708
#709	.piece-slot .hotkey {
#710	position: absolute;
#711	top: 3px; right: 5px;
#712	font-size: 0.5rem;
#713	color: var(--text-dim);
#714	font-weight: 700;
#715	}
#716
#717	.piece-grid { display: grid; gap: 2px; }
#718
#719	.piece-cell {
#720	width: 16px;
#721	height: 16px;
#722	border-radius: 3px;
#723	box-shadow: inset 0 1px 1px rgba(255,255,255,0.15);
#724	}
#725
#726	.piece-cell.empty { background: transparent; box-shadow: none; }
#727
#728	/* ===== POWERUPS ROW ===== */
#729
#730	.powerups-row {
#731	display: flex;
#732	gap: 0.4rem;
#733	justify-content: center;
#734	width: 100%;
#735	padding: 0.3rem 0;
#736	flex-shrink: 0;
#737	}
#738
#739	.powerup-btn {
#740	display: flex;
#741	align-items: center;
#742	gap: 0.3rem;
#743	padding: 0.45rem 0.65rem;
#744	background: var(--surface);
#745	border: 1px solid var(--border);
#746	border-radius: var(--radius);
#747	cursor: pointer;
#748	transition: all 0.2s;
#749	color: var(--text);
#750	font-size: 0.6rem;
#751	font-weight: 600;
#752	touch-action: manipulation;
#753	}
#754
#755	.powerup-btn:active:not(:disabled) { transform: scale(0.93); }
#756	.powerup-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-2); }
#757	.powerup-btn:disabled { opacity: 0.25; cursor: not-allowed; }
#758	.powerup-btn .icon { font-size: 1rem; }
#759	.powerup-count { font-size: 0.55rem; color: var(--text-dim); font-weight: 800; }
#760
#761	/* ===== COMBO BADGE ===== */
#762
#763	.combo-badge {
#764	position: absolute;
#765	top: -10px; right: -10px;
#766	background: linear-gradient(135deg, var(--accent), #d946ef);
#767	color: white;
#768	font-size: 0.65rem;
#769	font-weight: 800;
#770	padding: 0.2rem 0.45rem;
#771	border-radius: 20px;
#772	animation: comboPop 0.4s ease;
#773	box-shadow: 0 0 16px var(--accent-glow), 0 4px 12px rgba(0, 0, 0, 0.3);
#774	z-index: 5;
#775	}
#776
#777	@keyframes comboPop {
#778	0% { transform: scale(0) rotate(-10deg); }
#779	60% { transform: scale(1.3) rotate(5deg); }
#780	100% { transform: scale(1) rotate(0); }
#781	}
#782
#783	/* ===== LEVEL UP BANNER ===== */
#784
#785	.level-up-banner {
#786	position: fixed;
#787	top: 50%; left: 50%;
#788	transform: translate(-50%, -50%);
#789	background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--cyan));
#790	background-size: 200% 200%;
#791	color: white;
#792	padding: 1.25rem 2.5rem;
#793	border-radius: 20px;
#794	font-size: 1.3rem;
#795	font-weight: 900;
#796	text-align: center;
#797	z-index: 100;
#798	animation: levelUp 1.8s ease forwards, logoShift 2s ease infinite;
#799	box-shadow: 0 0 80px var(--accent-glow), 0 20px 40px rgba(0, 0, 0, 0.5);
#800	}
#801
#802	.level-up-banner .sub {
#803	font-size: 0.7rem;
#804	font-weight: 500;
#805	opacity: 0.85;
#806	margin-top: 0.2rem;
#807	}
#808
#809	@keyframes levelUp {
#810	0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
#811	15% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); opacity: 1; }
#812	25% { transform: translate(-50%, -50%) scale(1) rotate(0); }
#813	80% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
#814	100% { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 0; }
#815	}
#816
#817	/* ===== ACHIEVEMENT TOAST ===== */
#818
#819	.achievement-toast {
#820	position: fixed;
#821	top: 1rem; right: 1rem;
#822	background: var(--surface-2);
#823	border: 1px solid var(--gold);
#824	border-radius: var(--radius);
#825	padding: 0.75rem 1rem;
#826	display: flex;
#827	align-items: center;
#828	gap: 0.6rem;
#829	z-index: 90;
#830	animation: slideIn 0.4s ease, slideOut 0.4s ease 2.5s forwards;
#831	box-shadow: 0 0 24px rgba(245, 158, 11, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
#832	max-width: 260px;
#833	}
#834
#835	@keyframes slideIn {
#836	from { transform: translateX(120%); opacity: 0; }
#837	to { transform: translateX(0); opacity: 1; }
#838	}
#839
#840	@keyframes slideOut {
#841	from { transform: translateX(0); opacity: 1; }
#842	to { transform: translateX(120%); opacity: 0; }
#843	}
#844
#845	.achievement-toast .icon { font-size: 1.3rem; }
#846	.achievement-toast .info .name { font-weight: 700; font-size: 0.75rem; color: var(--gold); }
#847	.achievement-toast .info .desc { font-size: 0.6rem; color: var(--text-dim); }
#848
#849	/* ===== MODALS ===== */
#850
#851	.modal-overlay {
#852	position: fixed;
#853	inset: 0;
#854	background: rgba(0, 0, 0, 0.75);
#855	backdrop-filter: blur(10px);
#856	display: grid;
#857	place-items: center;
#858	z-index: 200;
#859	animation: fadeIn 0.2s ease;
#860	padding: 1rem;
#861	}
#862
#863	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#864
#865	.modal {
#866	background: var(--surface);
#867	border: 1px solid var(--border-bright);
#868	border-radius: 20px;
#869	padding: 1.5rem;
#870	width: 100%;
#871	max-width: 420px;
#872	max-height: 85dvh;
#873	overflow-y: auto;
#874	animation: modalIn 0.3s ease;
#875	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
#876	}
#877
#878	@keyframes modalIn {
#879	from { transform: scale(0.92) translateY(20px); opacity: 0; }
#880	to { transform: scale(1) translateY(0); opacity: 1; }
#881	}
#882
#883	.modal h2 {
#884	font-size: 1.1rem;
#885	font-weight: 800;
#886	margin-bottom: 0.75rem;
#887	display: flex;
#888	align-items: center;
#889	gap: 0.4rem;
#890	}
#891
#892	/* ===== FORM ===== */
#893
#894	.form-group { margin-bottom: 0.75rem; }
#895
#896	.form-group label {
#897	display: block;
#898	font-size: 0.65rem;
#899	font-weight: 600;
#900	color: var(--text-dim);
#901	text-transform: uppercase;
#902	letter-spacing: 0.05em;
#903	margin-bottom: 0.25rem;
#904	}
#905
#906	.form-group input {
#907	width: 100%;
#908	padding: 0.55rem 0.65rem;
#909	background: var(--bg);
#910	border: 1px solid var(--border);
#911	border-radius: 8px;
#912	color: var(--text);
#913	font-size: 0.8rem;
#914	font-family: inherit;
#915	outline: none;
#916	transition: border-color 0.2s;
#917	}
#918
#919	.form-group input:focus { border-color: var(--accent); }
#920	.form-group input::placeholder { color: rgba(255, 255, 255, 0.15); }
#921
#922	.form-actions {
#923	display: flex;
#924	gap: 0.4rem;
#925	margin-top: 1rem;
#926	}
#927
#928	.form-actions .btn { flex: 1; justify-content: center; }
#929
#930	/* ===== LEADERBOARD ===== */
#931
#932	.leaderboard-list {
#933	display: flex;
#934	flex-direction: column;
#935	gap: 0.3rem;
#936	}
#937
#938	.lb-entry {
#939	display: flex;
#940	align-items: center;
#941	gap: 0.6rem;
#942	padding: 0.5rem 0.6rem;
#943	background: var(--bg);
#944	border-radius: var(--radius);
#945	border: 1px solid var(--border);
#946	}
#947
#948	.lb-entry.me {
#949	border-color: var(--accent);
#950	background: rgba(124, 58, 237, 0.06);
#951	}
#952
#953	.lb-rank { font-weight: 800; font-size: 0.8rem; min-width: 24px; text-align: center; }
#954	.lb-rank.gold { color: var(--gold); }
#955	.lb-rank.silver { color: #94a3b8; }
#956	.lb-rank.bronze { color: #d97706; }
#957
#958	.lb-info { flex: 1; min-width: 0; }
#959	.lb-name { font-weight: 600; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#960	.lb-score { font-weight: 800; font-size: 0.8rem; color: var(--gold); font-variant-numeric: tabular-nums; }
#961	.lb-addr { font-size: 0.55rem; color: var(--text-dim); font-family: ui-monospace, monospace; }
#962	.lb-date { font-size: 0.5rem; color: var(--text-dim); }
#963
#964	/* ===== EXPORT PANEL ===== */
#965
#966	.export-panel {
#967	position: fixed;
#968	inset: 0;
#969	background: rgba(0, 0, 0, 0.88);
#970	backdrop-filter: blur(14px);
#971	z-index: 300;
#972	display: grid;
#973	place-items: center;
#974	animation: fadeIn 0.2s;
#975	padding: 1rem;
#976	}
#977
#978	.export-content {
#979	background: var(--surface);
#980	border: 1px solid var(--border-bright);
#981	border-radius: 20px;
#982	padding: 1.5rem;
#983	width: 100%;
#984	max-width: 500px;
#985	max-height: 80dvh;
#986	overflow-y: auto;
#987	}
#988
#989	.export-content h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.4rem; }
#990
#991	.export-summary {
#992	display: grid;
#993	grid-template-columns: repeat(3, 1fr);
#994	gap: 0.35rem;
#995	margin: 0.75rem 0;
#996	}
#997
#998	.export-stat {
#999	background: var(--bg);
#1000	border: 1px solid var(--border);
#1001	border-radius: var(--radius);
#1002	padding: 0.5rem;
#1003	text-align: center;
#1004	}
#1005
#1006	.export-stat .num { font-size: 1.2rem; font-weight: 800; color: var(--green); }
#1007	.export-stat .lbl { font-size: 0.55rem; color: var(--text-dim); text-transform: uppercase; }
#1008
#1009	.export-table {
#1010	width: 100%;
#1011	border-collapse: collapse;
#1012	margin: 0.75rem 0;
#1013	font-size: 0.65rem;
#1014	}
#1015
#1016	.export-table th {
#1017	text-align: left;
#1018	padding: 0.35rem;
#1019	border-bottom: 1px solid var(--border);
#1020	color: var(--text-dim);
#1021	font-size: 0.55rem;
#1022	text-transform: uppercase;
#1023	letter-spacing: 0.05em;
#1024	}
#1025
#1026	.export-table td {
#1027	padding: 0.3rem 0.35rem;
#1028	border-bottom: 1px solid rgba(255, 255, 255, 0.02);
#1029	font-family: ui-monospace, monospace;
#1030	font-size: 0.6rem;
#1031	word-break: break-all;
#1032	}
#1033
#1034	.export-actions {
#1035	display: flex;
#1036	gap: 0.4rem;
#1037	margin-top: 0.75rem;
#1038	}
#1039
#1040	/* ===== GAME OVER ===== */
#1041
#1042	.game-over-overlay {
#1043	position: absolute;
#1044	inset: 0;
#1045	background: rgba(0, 0, 0, 0.85);
#1046	backdrop-filter: blur(8px);
#1047	display: grid;
#1048	place-items: center;
#1049	border-radius: calc(var(--radius) + 6px);
#1050	z-index: 50;
#1051	animation: fadeIn 0.5s ease;
#1052	}
#1053
#1054	.game-over-card {
#1055	text-align: center;
#1056	padding: 1.5rem;
#1057	}
#1058
#1059	.game-over-card h2 {
#1060	font-size: 1.6rem;
#1061	font-weight: 900;
#1062	margin-bottom: 0.4rem;
#1063	background: linear-gradient(135deg, var(--red), #f97316, var(--gold));
#1064	-webkit-background-clip: text;
#1065	-webkit-text-fill-color: transparent;
#1066	}
#1067
#1068	.game-over-card .final-score {
#1069	font-size: 2.5rem;
#1070	font-weight: 900;
#1071	color: var(--gold);
#1072	margin: 0.4rem 0;
#1073	text-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
#1074	}
#1075
#1076	.game-over-card .stats {
#1077	font-size: 0.7rem;
#1078	color: var(--text-dim);
#1079	margin-bottom: 1.25rem;
#1080	line-height: 1.8;
#1081	}
#1082
#1083	.game-over-card .btn { margin: 0.2rem; }
#1084
#1085	/* ===== PROFILE BADGE ===== */
#1086
#1087	.profile-badge {
#1088	display: flex;
#1089	align-items: center;
#1090	gap: 0.3rem;
#1091	padding: 0.25rem 0.6rem;
#1092	background: var(--surface);
#1093	border: 1px solid var(--border);
#1094	border-radius: 20px;
#1095	font-size: 0.65rem;
#1096	font-weight: 600;
#1097	cursor: pointer;
#1098	transition: all 0.2s;
#1099	}
#1100
#1101	.profile-badge:hover { border-color: var(--accent); }
#1102
#1103	.profile-badge .avatar {
#1104	width: 18px;
#1105	height: 18px;
#1106	border-radius: 50%;
#1107	background: linear-gradient(135deg, var(--accent), var(--accent-2));
#1108	display: grid;
#1109	place-items: center;
#1110	font-size: 0.5rem;
#1111	font-weight: 800;
#1112	}
#1113
#1114	/* ===== AIRDROP BADGE ===== */
#1115
#1116	.airdrop-badge {
#1117	display: inline-flex;
#1118	align-items: center;
#1119	gap: 0.2rem;
#1120	padding: 0.15rem 0.45rem;
#1121	background: rgba(124, 58, 237, 0.12);
#1122	border: 1px solid rgba(124, 58, 237, 0.25);
#1123	border-radius: 20px;
#1124	font-size: 0.55rem;
#1125	font-weight: 600;
#1126	color: var(--accent-2);
#1127	}
#1128
#1129	/* ===== CHALLENGE BANNER ===== */
#1130
#1131	.challenge-banner {
#1132	width: 100%;
#1133	max-width: 480px;
#1134	padding: 0.4rem 0.6rem;
#1135	background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(124, 58, 237, 0.1));
#1136	border: 1px solid rgba(245, 158, 11, 0.2);
#1137	border-radius: var(--radius);
#1138	display: flex;
#1139	align-items: center;
#1140	justify-content: space-between;
#1141	gap: 0.5rem;
#1142	margin-bottom: 0.4rem;
#1143	flex-shrink: 0;
#1144	}
#1145
#1146	.challenge-info {
#1147	display: flex;
#1148	align-items: center;
#1149	gap: 0.4rem;
#1150	font-size: 0.65rem;
#1151	font-weight: 600;
#1152	}
#1153
#1154	.challenge-info .icon { font-size: 1rem; }
#1155
#1156	.challenge-goal {
#1157	font-size: 0.6rem;
#1158	color: var(--gold);
#1159	font-weight: 700;
#1160	}
#1161
#1162	/* ===== STREAK BADGE ===== */
#1163
#1164	.streak-badge {
#1165	display: inline-flex;
#1166	align-items: center;
#1167	gap: 0.2rem;
#1168	padding: 0.15rem 0.45rem;
#1169	background: rgba(245, 158, 11, 0.12);
#1170	border: 1px solid rgba(245, 158, 11, 0.25);
#1171	border-radius: 20px;
#1172	font-size: 0.55rem;
#1173	font-weight: 700;
#1174	color: var(--gold);
#1175	}
#1176
#1177	/* ===== HAZARD CELL ===== */
#1178
#1179	.cell.hazard {
#1180	background: repeating-linear-gradient(
#1181	45deg,
#1182	rgba(239, 68, 68, 0.15),
#1183	rgba(239, 68, 68, 0.15) 3px,
#1184	rgba(239, 68, 68, 0.08) 3px,
#1185	rgba(239, 68, 68, 0.08) 6px
#1186	);
#1187	border-color: rgba(239, 68, 68, 0.25);
#1188	}
#1189
#1190	.cell.hazard::before {
#1191	content: '';
#1192	position: absolute;
#1193	inset: 0;
#1194	background: radial-gradient(circle, rgba(239, 68, 68, 0.3), transparent);
#1195	border-radius: 5px;
#1196	animation: hazardPulse 2s ease-in-out infinite;
#1197	}
#1198
#1199	@keyframes hazardPulse {
#1200	0%, 100% { opacity: 0.3; }
#1201	50% { opacity: 0.7; }
#1202	}
#1203
#1204	/* ===== WILD CARD ===== */
#1205
#1206	.cell.wild-card {
#1207	background: conic-gradient(from 0deg, #7c3aed, #3b82f6, #10b981, #f59e0b, #ef4444, #ec4899, #7c3aed);
#1208	animation: wildSpin 3s linear infinite;
#1209	border: none;
#1210	}
#1211
#1212	@keyframes wildSpin {
#1213	from { filter: hue-rotate(0deg); }
#1214	to { filter: hue-rotate(360deg); }
#1215	}
#1216
#1217	/* ===== ROTATE BUTTON ===== */
#1218
#1219	.rotate-btn {
#1220	position: absolute;
#1221	bottom: -28px;
#1222	left: 50%;
#1223	transform: translateX(-50%);
#1224	background: var(--surface-2);
#1225	border: 1px solid var(--border-bright);
#1226	border-radius: 50%;
#1227	width: 24px;
#1228	height: 24px;
#1229	display: grid;
#1230	place-items: center;
#1231	cursor: pointer;
#1232	font-size: 0.65rem;
#1233	color: var(--text);
#1234	transition: all 0.2s;
#1235	z-index: 2;
#1236	}
#1237
#1238	.rotate-btn:hover { background: var(--accent); border-color: var(--accent); }
#1239
#1240	/* ===== SKILL TREE MODAL ===== */
#1241
#1242	.skill-tree {
#1243	display: flex;
#1244	flex-direction: column;
#1245	gap: 0.75rem;
#1246	}
#1247
#1248	.skill-branch {
#1249	background: var(--bg);
#1250	border: 1px solid var(--border);
#1251	border-radius: var(--radius);
#1252	padding: 0.75rem;
#1253	}
#1254
#1255	.skill-branch-title {
#1256	font-size: 0.7rem;
#1257	font-weight: 700;
#1258	text-transform: uppercase;
#1259	letter-spacing: 0.08em;
#1260	margin-bottom: 0.5rem;
#1261	display: flex;
#1262	align-items: center;
#1263	gap: 0.3rem;
#1264	}
#1265
#1266	.skill-branch-title.speed { color: var(--cyan); }
#1267	.skill-branch-title.precision { color: var(--gold); }
#1268	.skill-branch-title.power { color: var(--red); }
#1269
#1270	.skill-list {
#1271	display: flex;
#1272	flex-direction: column;
#1273	gap: 0.3rem;
#1274	}
#1275
#1276	.skill-item {
#1277	display: flex;
#1278	align-items: center;
#1279	gap: 0.5rem;
#1280	padding: 0.4rem 0.5rem;
#1281	background: var(--surface);
#1282	border: 1px solid var(--border);
#1283	border-radius: 8px;
#1284	cursor: pointer;
#1285	transition: all 0.2s;
#1286	}
#1287
#1288	.skill-item:hover:not(.locked) {
#1289	border-color: var(--accent);
#1290	background: var(--surface-2);
#1291	}
#1292
#1293	.skill-item.unlocked {
#1294	border-color: var(--green);
#1295	background: rgba(16, 185, 129, 0.06);
#1296	}
#1297
#1298	.skill-item.locked {
#1299	opacity: 0.4;
#1300	cursor: not-allowed;
#1301	}
#1302
#1303	.skill-item .icon { font-size: 1rem; }
#1304
#1305	.skill-item .info {
#1306	flex: 1;
#1307	}
#1308
#1309	.skill-item .name {
#1310	font-size: 0.7rem;
#1311	font-weight: 700;
#1312	}
#1313
#1314	.skill-item .desc {
#1315	font-size: 0.55rem;
#1316	color: var(--text-dim);
#1317	}
#1318
#1319	.skill-item .cost {
#1320	font-size: 0.6rem;
#1321	font-weight: 700;
#1322	color: var(--blue);
#1323	}
#1324
#1325	.skill-points-badge {
#1326	display: inline-flex;
#1327	align-items: center;
#1328	gap: 0.2rem;
#1329	padding: 0.15rem 0.45rem;
#1330	background: rgba(59, 130, 246, 0.12);
#1331	border: 1px solid rgba(59, 130, 246, 0.25);
#1332	border-radius: 20px;
#1333	font-size: 0.55rem;
#1334	font-weight: 700;
#1335	color: var(--blue);
#1336	cursor: pointer;
#1337	transition: all 0.2s;
#1338	}
#1339
#1340	.skill-points-badge:hover {
#1341	border-color: var(--blue);
#1342	background: rgba(59, 130, 246, 0.2);
#1343	}
#1344
#1345	/* ===== TIMER BAR ===== */
#1346
#1347	.timer-bar-wrap {
#1348	width: 100%;
#1349	max-width: 480px;
#1350	height: 3px;
#1351	background: var(--surface);
#1352	border-radius: 2px;
#1353	margin-bottom: 0.3rem;
#1354	overflow: hidden;
#1355	border: 1px solid var(--border);
#1356	flex-shrink: 0;
#1357	}
#1358
#1359	.timer-bar-fill {
#1360	height: 100%;
#1361	background: var(--green);
#1362	border-radius: 2px;
#1363	transition: width 1s linear, background-color 0.5s;
#1364	}
#1365
#1366	.timer-bar-fill.warning { background: var(--gold); }
#1367	.timer-bar-fill.danger { background: var(--red); }
#1368
#1369	/* ===== AI FEATURES ===== */
#1370
#1371	.ai-coach-tip {
#1372	width: 100%;
#1373	max-width: 480px;
#1374	padding: 0.4rem 0.6rem;
#1375	background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.1));
#1376	border: 1px solid rgba(6, 182, 212, 0.2);
#1377	border-radius: var(--radius);
#1378	display: flex;
#1379	align-items: center;
#1380	gap: 0.4rem;
#1381	margin-bottom: 0.3rem;
#1382	flex-shrink: 0;
#1383	animation: fadeIn 0.3s ease;
#1384	}
#1385
#1386	.ai-coach-icon {
#1387	font-size: 0.9rem;
#1388	flex-shrink: 0;
#1389	}
#1390
#1391	.ai-coach-text {
#1392	font-size: 0.6rem;
#1393	font-weight: 600;
#1394	color: var(--cyan);
#1395	line-height: 1.4;
#1396	}
#1397
#1398	.ai-hint-badge {
#1399	width: 100%;
#1400	max-width: 480px;
#1401	padding: 0.3rem 0.6rem;
#1402	background: rgba(16, 185, 129, 0.1);
#1403	border: 1px solid rgba(16, 185, 129, 0.25);
#1404	border-radius: var(--radius);
#1405	font-size: 0.6rem;
#1406	font-weight: 600;
#1407	color: var(--green);
#1408	margin-bottom: 0.3rem;
#1409	flex-shrink: 0;
#1410	animation: fadeIn 0.3s ease;
#1411	text-align: center;
#1412	}
#1413
#1414	.ai-hint-clears {
#1415	color: var(--gold);
#1416	}
#1417
#1418	.cell.ai-hint {
#1419	box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.4), 0 0 12px rgba(16, 185, 129, 0.2);
#1420	border-color: rgba(16, 185, 129, 0.5) !important;
#1421	animation: aiHintPulse 1s ease-in-out infinite;
#1422	}
#1423
#1424	@keyframes aiHintPulse {
#1425	0%, 100% { box-shadow: inset 0 0 6px rgba(16, 185, 129, 0.3), 0 0 8px rgba(16, 185, 129, 0.15); }
#1426	50% { box-shadow: inset 0 0 12px rgba(16, 185, 129, 0.5), 0 0 16px rgba(16, 185, 129, 0.3); }
#1427	}
#1428
#1429	.btn-ai-on {
#1430	background: rgba(6, 182, 212, 0.2) !important;
#1431	border-color: var(--cyan) !important;
#1432	color: var(--cyan) !important;
#1433	}
#1434
#1435	.ai-analysis {
#1436	background: var(--bg);
#1437	border: 1px solid rgba(6, 182, 212, 0.2);
#1438	border-radius: var(--radius);
#1439	padding: 0.75rem;
#1440	margin: 0.75rem 0;
#1441	text-align: left;
#1442	}
#1443
#1444	.ai-analysis-title {
#1445	font-size: 0.75rem;
#1446	font-weight: 700;
#1447	color: var(--cyan);
#1448	margin-bottom: 0.5rem;
#1449	display: flex;
#1450	align-items: center;
#1451	gap: 0.3rem;
#1452	}
#1453
#1454	.ai-analysis-row {
#1455	display: flex;
#1456	justify-content: space-between;
#1457	align-items: center;
#1458	padding: 0.2rem 0;
#1459	font-size: 0.6rem;
#1460	}
#1461
#1462	.ai-analysis-row .ai-label {
#1463	color: var(--text-dim);
#1464	font-weight: 600;
#1465	}
#1466
#1467	.ai-analysis-row .ai-value {
#1468	color: var(--text);
#1469	font-weight: 700;
#1470	font-variant-numeric: tabular-nums;
#1471	}
#1472
#1473	.ai-analysis-suggestion {
#1474	margin-top: 0.5rem;
#1475	padding: 0.4rem 0.5rem;
#1476	background: rgba(6, 182, 212, 0.06);
#1477	border-radius: 6px;
#1478	font-size: 0.6rem;
#1479	color: var(--cyan);
#1480	font-weight: 500;
#1481	line-height: 1.5;
#1482	}
#1483
#1484	/* ===== TOAST ===== */
#1485
#1486	.toast {
#1487	position: fixed;
#1488	bottom: 5rem;
#1489	left: 50%;
#1490	transform: translateX(-50%);
#1491	background: var(--surface-2);
#1492	border: 1px solid var(--border-bright);
#1493	border-radius: var(--radius);
#1494	padding: 0.5rem 1rem;
#1495	font-size: 0.7rem;
#1496	font-weight: 600;
#1497	z-index: 90;
#1498	animation: toastIn 0.3s ease, toastOut 0.3s ease 2s forwards;
#1499	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
#1500	text-align: center;
#1501	max-width: 90vw;
#1502	}
#1503
#1504	@keyframes toastIn {
#1505	from { transform: translateX(-50%) translateY(16px); opacity: 0; }
#1506	to { transform: translateX(-50%) translateY(0); opacity: 1; }
#1507	}
#1508
#1509	@keyframes toastOut {
#1510	from { transform: translateX(-50%) translateY(0); opacity: 1; }
#1511	to { transform: translateX(-50%) translateY(16px); opacity: 0; }
#1512	}
#1513
#1514	/* ===== PRESSURE ROW ===== */
#1515
#1516	.cell.pressure {
#1517	background: rgba(245, 158, 11, 0.12);
#1518	border-color: rgba(245, 158, 11, 0.2);
#1519	animation: pressureGlow 1.5s ease-in-out infinite;
#1520	}
#1521
#1522	@keyframes pressureGlow {
#1523	0%, 100% { box-shadow: inset 0 0 4px rgba(245, 158, 11, 0.1); }
#1524	50% { box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.25); }
#1525	}
#1526
#1527	/* ===== RESPONSIVE — DESKTOP ===== */
#1528
#1529	@media (min-width: 769px) {
#1530	:root {
#1531	--cell-size: 50px;
#1532	--cell-depth: 5px;
#1533	--gap: 3px;
#1534	}
#1535
#1536	.app {
#1537	padding: 1.5rem 2rem;
#1538	justify-content: center;
#1539	}
#1540
#1541	.game-layout {
#1542	max-width: 900px;
#1543	}
#1544
#1545	.side-panel { width: 180px; }
#1546
#1547	.piece-cell {
#1548	width: 20px;
#1549	height: 20px;
#1550	}
#1551
#1552	.header { max-width: 900px; }
#1553	.timer-bar-wrap { max-width: 900px; }
#1554	.landing-logo { font-size: 4rem; }
#1555	}
#1556
#1557	/* ===== RESPONSIVE — MOBILE ===== */
#1558
#1559	@media (max-width: 768px) {
#1560	.game-layout {
#1561	flex-direction: column;
#1562	align-items: center;
#1563	gap: 0.5rem;
#1564	}
#1565
#1566	.side-panel {
#1567	width: 100%;
#1568	max-width: 380px;
#1569	flex-direction: row;
#1570	flex-wrap: wrap;
#1571	gap: 0.35rem;
#1572	position: static;
#1573	}
#1574
#1575	.side-panel .panel-section {
#1576	flex: 1;
#1577	min-width: 120px;
#1578	}
#1579
#1580	.panel-buttons {
#1581	flex-direction: row;
#1582	flex-wrap: wrap;
#1583	}
#1584
#1585	.panel-buttons .btn {
#1586	flex: 1;
#1587	min-width: 80px;
#1588	}
#1589
#1590	.powerups-col {
#1591	flex-direction: row;
#1592	gap: 0.25rem;
#1593	}
#1594
#1595	.powerups-col .powerup-btn {
#1596	flex: 1;
#1597	justify-content: center;
#1598	gap: 0.2rem;
#1599	}
#1600
#1601	.piece-tray {
#1602	flex-direction: row;
#1603	gap: 0.4rem;
#1604	width: 100%;
#1605	justify-content: center;
#1606	}
#1607
#1608	.piece-slot {
#1609	min-height: 70px;
#1610	min-width: 70px;
#1611	padding: 0.5rem;
#1612	}
#1613	}
#1614
#1615	@media (max-width: 400px) {
#1616	:root { --cell-size: 34px; --cell-depth: 3px; }
#1617	.piece-cell { width: 14px; height: 14px; }
#1618	.piece-slot { min-height: 65px; min-width: 65px; padding: 0.4rem; }
#1619	}
#1620
#1621	@media (max-width: 350px) {
#1622	:root { --cell-size: 30px; --cell-depth: 2px; }
#1623	}
#1624
#1625	/* ===== SCROLLBAR ===== */
#1626
#1627	::-webkit-scrollbar { width: 4px; }
#1628	::-webkit-scrollbar-track { background: transparent; }
#1629	::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 2px; }
#1630	::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.15); }
#1631
#1632	/* ===== SAFE AREA ===== */
#1633
#1634	@supports (padding-bottom: env(safe-area-inset-bottom)) {
#1635	.app { padding-bottom: env(safe-area-inset-bottom); }
#1636	.piece-tray { padding-bottom: max(0.4rem, env(safe-area-inset-bottom)); }
#1637	}
#1638

z6MkjiiY/when-blackout