view release on metacpan or  search on metacpan

lib/Chandra/Game/Tetris/Engine.pm  view on Meta::CPAN

		.block-4 { background: #00c000 !important; }
		.block-5 { background: #f00000 !important; }
		.block-6 { background: #f0a000 !important; }
		.block-7 { background: #0000f0 !important; }

		/* Right panel */
		.tetris-game-area-right {
			display: flex;
			flex-direction: column;
			gap: calc(var(--cell) * 0.5);
			width: var(--panel-w);
			color: rgb(240, 244, 247);
			font-family: monospace;
		}

		.score-wrapper,
		.lines-wrapper,
		.next-block-wrapper,
		.start-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.25rem;
		}

		.score-wrapper h2,
		.lines-wrapper h2,
		.next-block-wrapper h2 {
			font-size: clamp(0.6rem, calc(var(--cell) * 0.35), 1rem);
			text-transform: uppercase;
			letter-spacing: 0.15em;
			color: rgb(160, 164, 167);
		}

		#score,
		#lines {
			font-size: clamp(0.8rem, calc(var(--cell) * 0.5), 1.5rem);
			font-weight: bold;
		}

		#next-block {
			width: calc(var(--cell) * 4);
			height: calc(var(--cell) * 4);
			border: var(--border);
			background: var(--cell-bg);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#start {
			width: 100%;
			padding: calc(var(--cell) * 0.2) 0;
			background: rgb(60, 180, 100);
			color: var(--color);
			border: none;
			font-family: monospace;
			font-size: clamp(0.7rem, calc(var(--cell) * 0.35), 1rem);
			letter-spacing: 0.1em;
			text-transform: uppercase;
			cursor: pointer;
			border-radius: 2px;
		}

		#start:hover {
			background: rgb(80, 200, 120);
		}

		/* Next block preview */
		.tetris-block {
			border-collapse: collapse;
			table-layout: fixed;
			margin: auto;
		}

		.tetris-block-row {
			height: calc(var(--cell) * 0.8);
		}

		.tetris-cell {
			width: calc(var(--cell) * 0.8);
			height: calc(var(--cell) * 0.8);
			padding: 0;
			border: 1px solid transparent;
		}

		.tetris-cell.filled {
			border-color: rgba(0,0,0,0.3);
		}

		.tetris-cell.empty {
			background: transparent;
		}

		.tetris-cell > div {
			width: 100%;
			height: 100%;
		}

		.start-modal {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-family: monospace;
			font-size: clamp(2rem, 10vw, 6rem);
			font-weight: bold;
			background: rgba(0,0,0,0.6);
			pointer-events: none;
		}

		.start-modal.small {
			font-size: clamp(1rem, 4vw, 2rem);
			text-align: center;
			padding: 1rem;
		}

		.hide {