150 lines
4.2 KiB
CSS
Executable File
150 lines
4.2 KiB
CSS
Executable File
/* =========================================================
|
|
🔧 Controls (tweak these)
|
|
========================================================= */
|
|
:root {
|
|
--snake-cell-size: 32px;
|
|
}
|
|
|
|
/* =========================================================
|
|
Container & Board Base
|
|
========================================================= */
|
|
#snake-board {
|
|
position: relative;
|
|
background-color: var(--card, #1e2030);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 5%, transparent);
|
|
padding: 4px;
|
|
}
|
|
|
|
/* =========================================================
|
|
Snake Board Layout
|
|
========================================================= */
|
|
.snake-row {
|
|
display: flex;
|
|
}
|
|
|
|
.snake-cell {
|
|
width: var(--snake-cell-size);
|
|
height: var(--snake-cell-size);
|
|
background-color: var(--muted, #2f334d);
|
|
border: 1px solid var(--border, #3b3f5c);
|
|
box-sizing: border-box;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
/* =========================================================
|
|
Snake Rendering
|
|
========================================================= */
|
|
.snake-cell.snake-head {
|
|
background-color: var(--accent, #ffc777);
|
|
box-shadow:
|
|
0 0 8px color-mix(in srgb, var(--accent, #ffc777) 70%, transparent),
|
|
inset 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 90%, transparent);
|
|
position: relative;
|
|
}
|
|
|
|
.snake-cell.snake-head.dir-up {
|
|
border-radius: 6px 6px 2px 2px;
|
|
}
|
|
|
|
.snake-cell.snake-head.dir-down {
|
|
border-radius: 2px 2px 6px 6px;
|
|
}
|
|
|
|
.snake-cell.snake-head.dir-left {
|
|
border-radius: 6px 2px 2px 6px;
|
|
}
|
|
|
|
.snake-cell.snake-head.dir-right {
|
|
border-radius: 2px 6px 6px 2px;
|
|
}
|
|
|
|
.snake-cell.snake-head::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60%;
|
|
height: 30%;
|
|
background: radial-gradient(circle, var(--accent-foreground, #1b1d2b) 30%, transparent 60%);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.snake-cell.snake-body {
|
|
background-color: var(--accent, #ffc777);
|
|
opacity: 0.7;
|
|
box-shadow: inset 0 0 3px color-mix(in srgb, var(--accent, #ffc777) 50%, transparent);
|
|
}
|
|
|
|
.snake-cell.snake-tail {
|
|
background-color: var(--accent, #ffc777);
|
|
opacity: 0.5;
|
|
box-shadow: 0 0 4px color-mix(in srgb, var(--accent, #ffc777) 40%, transparent);
|
|
}
|
|
|
|
.snake-cell.snake-tail.dir-up {
|
|
border-radius: 6px 6px 2px 2px;
|
|
}
|
|
|
|
.snake-cell.snake-tail.dir-down {
|
|
border-radius: 2px 2px 6px 6px;
|
|
}
|
|
|
|
.snake-cell.snake-tail.dir-left {
|
|
border-radius: 6px 2px 2px 6px;
|
|
}
|
|
|
|
.snake-cell.snake-tail.dir-right {
|
|
border-radius: 2px 6px 6px 2px;
|
|
}
|
|
|
|
/* =========================================================
|
|
Collision Effect
|
|
========================================================= */
|
|
.snake-cell.collision {
|
|
background-color: var(--destructive, #c53b53) !important;
|
|
box-shadow:
|
|
0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 90%, transparent),
|
|
0 0 24px color-mix(in srgb, var(--destructive, #c53b53) 60%, transparent),
|
|
inset 0 0 8px color-mix(in srgb, var(--destructive, #c53b53) 70%, transparent) !important;
|
|
animation: collision-pulse 0.5s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes collision-pulse {
|
|
0% {
|
|
box-shadow:
|
|
0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 90%, transparent),
|
|
0 0 24px color-mix(in srgb, var(--destructive, #c53b53) 60%, transparent),
|
|
inset 0 0 8px color-mix(in srgb, var(--destructive, #c53b53) 70%, transparent);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 20px color-mix(in srgb, var(--destructive, #c53b53) 100%, transparent),
|
|
0 0 40px color-mix(in srgb, var(--destructive, #c53b53) 80%, transparent),
|
|
inset 0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 90%, transparent);
|
|
}
|
|
}
|
|
|
|
/* =========================================================
|
|
Food Rendering
|
|
========================================================= */
|
|
.snake-cell.food {
|
|
background-color: var(--chart-2, #c3e88d);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 8px color-mix(in srgb, var(--chart-2, #c3e88d) 60%, transparent),
|
|
inset 0 0 4px color-mix(in srgb, var(--chart-2, #c3e88d) 80%, transparent);
|
|
position: relative;
|
|
}
|
|
|
|
.snake-cell.food::after {
|
|
content: "🍎";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 12px;
|
|
}
|
|
|