1285 lines
29 KiB
SCSS
1285 lines
29 KiB
SCSS
// ============================================
|
|
// ARCADE GAMES LIST PAGE
|
|
// Full arcade cabinet with CRT screen, joystick, and buttons
|
|
// ============================================
|
|
|
|
.games-arcade-page {
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
background: #1a1a1a;
|
|
position: relative;
|
|
|
|
@include media-down(lg) {
|
|
padding: 0;
|
|
}
|
|
|
|
.desk {
|
|
z-index: 1;
|
|
position: fixed;
|
|
height: 35%;
|
|
}
|
|
|
|
.arcade-neon {
|
|
pointer-events: none;
|
|
.neon-sign {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
.arcade-lamp {
|
|
position: absolute;
|
|
bottom: 30%;
|
|
left: 10%;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
|
|
.lava-lamp-container {
|
|
width: 180px;
|
|
height: 400px;
|
|
|
|
.lamp-text-shadow,
|
|
.lamp-text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// ARCADE CONTAINER
|
|
// ============================================
|
|
|
|
.arcade-container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
perspective: 1500px;
|
|
z-index: 5;
|
|
position: relative;
|
|
|
|
@include media-down(lg) {
|
|
perspective: none;
|
|
}
|
|
|
|
// ============================================
|
|
// ARCADE CABINET BODY
|
|
// ============================================
|
|
|
|
.arcade-cabinet {
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba(255, 0, 255, 0.1) 0%,
|
|
rgba(0, 255, 255, 0.1) 50%,
|
|
rgba(255, 255, 0, 0.1) 100%
|
|
),
|
|
repeating-linear-gradient(90deg, #1a1a2e 0px, #2a2a4e 2px, #1a1a2e 4px),
|
|
linear-gradient(180deg, #2a2a4e 0%, #1a1a2e 100%);
|
|
border: 6px solid #5a5a8e;
|
|
border-top: none;
|
|
border-bottom: none;
|
|
position: relative;
|
|
padding-top: 30px;
|
|
box-shadow:
|
|
0 0 30px rgba(138, 43, 226, 0.3),
|
|
0 0 60px rgba(0, 255, 255, 0.2),
|
|
inset 0 0 100px rgba(138, 43, 226, 0.1);
|
|
|
|
@include media-down(lg) {
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// MARQUEE (Top of Cabinet)
|
|
// ============================================
|
|
|
|
.arcade-marquee {
|
|
position: relative;
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
#ff00ff 0%,
|
|
#00ffff 25%,
|
|
#ffff00 50%,
|
|
#ff00ff 75%,
|
|
#00ffff 100%
|
|
),
|
|
linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
|
|
background-size:
|
|
400% 100%,
|
|
100% 100%;
|
|
background-blend-mode: overlay, normal;
|
|
border: 6px solid #bcffff;
|
|
border-radius: 20px;
|
|
margin-bottom: -20px;
|
|
z-index: 9;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 255, 255, 0.9),
|
|
0 0 40px rgba(0, 255, 255, 0.7),
|
|
0 0 60px rgba(255, 0, 255, 0.6),
|
|
0 0 80px rgba(255, 255, 0, 0.5),
|
|
0 0 100px rgba(255, 0, 255, 0.4),
|
|
inset 0 2px 8px rgba(255, 255, 255, 0.3),
|
|
inset 0 -2px 4px rgba(0, 0, 0, 0.5);
|
|
animation: marqueeGradient 8s linear infinite;
|
|
|
|
@include media-down(lg) {
|
|
border-radius: 0;
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
// Sound toggle in marquee
|
|
.marquee-sound-toggle {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 80px;
|
|
transform: translateY(-50%);
|
|
text-align: center;
|
|
z-index: 10;
|
|
|
|
@include media-down(lg) {
|
|
right: 50px;
|
|
}
|
|
}
|
|
|
|
.marquee-content {
|
|
font-family: "Pixelify Sans", monospace;
|
|
|
|
@include media-down(lg) {
|
|
font-size: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.arcade-title-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.arcade-title {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
animation: arcadeTitleGlow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.arcade-subtitle {
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
letter-spacing: 3px;
|
|
color: #ffff00;
|
|
text-shadow:
|
|
0 0 10px rgba(255, 255, 0, 1),
|
|
0 0 20px rgba(255, 255, 0, 0.8),
|
|
0 0 30px rgba(255, 165, 0, 0.6);
|
|
animation: subtitlePulse 1.5s ease-in-out infinite;
|
|
|
|
@include media-down(lg) {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.marquee-light {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: radial-gradient(circle at 30% 30%, #fff, #ff00ff);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 20px rgba(255, 0, 255, 1),
|
|
0 0 40px rgba(255, 0, 255, 0.8),
|
|
0 0 60px rgba(0, 255, 255, 0.6),
|
|
inset 0 0 10px rgba(255, 255, 255, 0.5);
|
|
animation: marqueeLightCycle 2s ease-in-out infinite;
|
|
|
|
&.marquee-light-left {
|
|
left: 20px;
|
|
}
|
|
|
|
&.marquee-light-right {
|
|
right: 20px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@include media-down(lg) {
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
&.marquee-light-left {
|
|
left: 10px;
|
|
}
|
|
&.marquee-light-right {
|
|
right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes marqueeGradient {
|
|
0% {
|
|
background-position:
|
|
0% 50%,
|
|
0% 0%;
|
|
}
|
|
100% {
|
|
background-position:
|
|
400% 50%,
|
|
0% 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes marqueeLightCycle {
|
|
0%,
|
|
100% {
|
|
background: radial-gradient(circle at 30% 30%, #fff, #ff00ff);
|
|
box-shadow:
|
|
0 0 20px rgba(255, 0, 255, 1),
|
|
0 0 40px rgba(255, 0, 255, 0.8),
|
|
0 0 60px rgba(0, 255, 255, 0.6);
|
|
}
|
|
33% {
|
|
background: radial-gradient(circle at 30% 30%, #fff, #00ffff);
|
|
box-shadow:
|
|
0 0 20px rgba(0, 255, 255, 1),
|
|
0 0 40px rgba(0, 255, 255, 0.8),
|
|
0 0 60px rgba(255, 255, 0, 0.6);
|
|
}
|
|
66% {
|
|
background: radial-gradient(circle at 30% 30%, #fff, #ffff00);
|
|
box-shadow:
|
|
0 0 20px rgba(255, 255, 0, 1),
|
|
0 0 40px rgba(255, 255, 0, 0.8),
|
|
0 0 60px rgba(255, 0, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes subtitlePulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes arcadeTitleGlow {
|
|
0% {
|
|
text-shadow:
|
|
0 0 10px rgba(0, 255, 255, 1),
|
|
0 0 20px rgba(0, 255, 255, 0.8),
|
|
0 0 30px rgba(255, 0, 255, 0.6),
|
|
0 0 40px rgba(255, 0, 255, 0.4),
|
|
2px 2px 0px rgba(255, 0, 255, 0.8),
|
|
-2px -2px 0px rgba(0, 255, 255, 0.8);
|
|
filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.5));
|
|
}
|
|
100% {
|
|
text-shadow:
|
|
0 0 15px rgba(0, 255, 255, 1),
|
|
0 0 25px rgba(0, 255, 255, 0.9),
|
|
0 0 35px rgba(255, 0, 255, 0.7),
|
|
0 0 50px rgba(255, 0, 255, 0.5),
|
|
2px 2px 0px rgba(255, 0, 255, 0.9),
|
|
-2px -2px 0px rgba(0, 255, 255, 0.9);
|
|
filter: drop-shadow(0 0 30px rgba(255, 255, 0, 0.7));
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CRT SCREEN AREA
|
|
// ============================================
|
|
|
|
.arcade-screen-bezel {
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba(255, 0, 255, 0.2) 0%,
|
|
rgba(0, 255, 255, 0.2) 100%
|
|
),
|
|
linear-gradient(145deg, #3a3a5e, #2a2a4e);
|
|
padding: 30px;
|
|
margin: 30px;
|
|
margin-top: 0px;
|
|
border-radius: 12px;
|
|
border: 3px solid #5a5a8e;
|
|
box-shadow:
|
|
0 0 20px rgba(138, 43, 226, 0.3),
|
|
0 0 40px rgba(0, 255, 255, 0.2),
|
|
inset 0 4px 8px rgba(0, 0, 0, 0.6),
|
|
inset 0 -2px 4px rgba(138, 43, 226, 0.3);
|
|
position: relative;
|
|
|
|
@include media-down(lg) {
|
|
margin: 15px;
|
|
padding: 20px;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&::before {
|
|
content: "RITUAL ARCADE";
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #7dffff;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
letter-spacing: 3px;
|
|
text-shadow:
|
|
0 0 5px rgba(0, 255, 255, 0.8),
|
|
0 0 10px rgba(0, 255, 255, 0.5);
|
|
|
|
@include media-down(lg) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.arcade-screen {
|
|
width: 100%;
|
|
min-height: 500px;
|
|
background:
|
|
radial-gradient(ellipse at center, rgba(138, 43, 226, 0.05) 0%, #000 60%),
|
|
#000;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 2px solid #1a1a3e;
|
|
box-shadow:
|
|
0 0 30px rgba(138, 43, 226, 0.4),
|
|
0 0 60px rgba(0, 255, 255, 0.2),
|
|
inset 0 0 100px rgba(138, 43, 226, 0.15),
|
|
inset 0 0 80px rgba(0, 255, 255, 0.1),
|
|
inset 0 0 40px rgba(255, 0, 255, 0.08),
|
|
inset 3px 3px 8px rgba(138, 43, 226, 0.2),
|
|
inset -3px -3px 8px rgba(0, 0, 0, 0.8);
|
|
|
|
@include media-down(lg) {
|
|
min-height: 400px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
&.crt {
|
|
position: relative;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -5%;
|
|
left: -5%;
|
|
right: -5%;
|
|
bottom: -5%;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at 30% 30%,
|
|
rgba(255, 255, 255, 0.15) 0%,
|
|
transparent 40%
|
|
),
|
|
radial-gradient(
|
|
ellipse at center,
|
|
transparent 0%,
|
|
rgba(0, 0, 0, 0.3) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.15) 0px,
|
|
rgba(0, 0, 0, 0.15) 1px,
|
|
transparent 1px,
|
|
transparent 2px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
animation: scanline 8s linear infinite;
|
|
}
|
|
|
|
.screen-content {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 30px;
|
|
color: #7dffff;
|
|
z-index: 1;
|
|
font-family: monospace;
|
|
text-shadow:
|
|
0 0 10px rgba(0, 255, 255, 0.8),
|
|
0 0 20px rgba(138, 43, 226, 0.4);
|
|
|
|
@include media-down(lg) {
|
|
padding: 20px;
|
|
}
|
|
|
|
// ============================================
|
|
// GAMES GRID
|
|
// ============================================
|
|
|
|
.games-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
|
|
@include media-down(lg) {
|
|
padding-top: 10px;
|
|
grid-template-columns: 1fr;
|
|
gap: 15px;
|
|
max-height: auto;
|
|
overflow-y: auto;
|
|
@include scrollbar-custom(#7dffff, 6px);
|
|
}
|
|
}
|
|
|
|
.game-card {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(138, 43, 226, 0.08) 0%,
|
|
rgba(0, 255, 255, 0.08) 100%
|
|
);
|
|
border: 2px solid rgba(0, 255, 255, 0.3);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
|
|
|
|
@include enhance-3d-transform;
|
|
|
|
&:hover,
|
|
&.selected {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(138, 43, 226, 0.15) 0%,
|
|
rgba(0, 255, 255, 0.15) 100%
|
|
);
|
|
border-color: rgba(0, 255, 255, 0.8);
|
|
box-shadow:
|
|
0 0 20px rgba(0, 255, 255, 0.5),
|
|
0 0 40px rgba(138, 43, 226, 0.3),
|
|
inset 0 0 20px rgba(0, 255, 255, 0.1);
|
|
transform: translateY(-2px);
|
|
|
|
@include media-down(lg) {
|
|
box-shadow: 0 0;
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
&.selected {
|
|
animation: card-pulse 1s ease-in-out infinite alternate;
|
|
|
|
.game-logo {
|
|
filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8))
|
|
drop-shadow(0 0 20px rgba(138, 43, 226, 0.6));
|
|
}
|
|
|
|
.game-title {
|
|
color: #ffff00;
|
|
text-shadow:
|
|
0 0 10px rgba(255, 255, 0, 1),
|
|
0 0 20px rgba(255, 0, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
// Unreleased games styling
|
|
&.unreleased {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
filter: grayscale(0.7);
|
|
|
|
&:hover,
|
|
&.selected {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(138, 43, 226, 0.08) 0%,
|
|
rgba(0, 255, 255, 0.08) 100%
|
|
);
|
|
border-color: rgba(0, 255, 255, 0.3);
|
|
box-shadow: 0 0 10px rgba(138, 43, 226, 0.2);
|
|
transform: none;
|
|
animation: none;
|
|
}
|
|
|
|
.game-logo {
|
|
opacity: 0.7;
|
|
filter: grayscale(0.7);
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// GAME SUMMARY CARD
|
|
// ============================================
|
|
|
|
.game-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
position: relative;
|
|
|
|
.game-link {
|
|
display: contents;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.coming-soon-label {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: "Pixelify Sans", monospace;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: #ff0;
|
|
text-shadow:
|
|
0 0 10px rgba(255, 255, 0, 0.8),
|
|
0 0 20px rgba(255, 255, 0, 0.5),
|
|
2px 2px 0px rgba(0, 0, 0, 0.8);
|
|
letter-spacing: 2px;
|
|
z-index: 10;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
border: 2px solid rgba(255, 255, 0, 0.6);
|
|
animation: coming-soon-pulse 2s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
.game-thumbnail {
|
|
flex-shrink: 0;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid rgba(0, 255, 255, 0.4);
|
|
box-shadow:
|
|
0 0 10px rgba(138, 43, 226, 0.3),
|
|
inset 0 0 10px rgba(0, 255, 255, 0.1);
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: contrast(1.2) brightness(0.95) saturate(1.2);
|
|
}
|
|
}
|
|
|
|
.game-thumbnail-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.placeholder-icon {
|
|
font-size: 2rem;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.game-logo {
|
|
flex-shrink: 0;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
overflow: visible;
|
|
background: #7dffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
-webkit-mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
mask-size: contain;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.game-logo-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.placeholder-icon {
|
|
font-size: 2rem;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.game-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.game-title {
|
|
font-size: 1.2rem;
|
|
margin: 0;
|
|
color: #7dffff;
|
|
font-weight: bold;
|
|
text-shadow:
|
|
0 0 5px rgba(0, 255, 255, 0.8),
|
|
0 0 10px rgba(138, 43, 226, 0.4);
|
|
|
|
a {
|
|
color: #7dffff;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
text-shadow:
|
|
0 0 5px rgba(0, 255, 255, 0.8),
|
|
0 0 10px rgba(138, 43, 226, 0.4);
|
|
|
|
&:hover {
|
|
color: #ffff00;
|
|
text-shadow:
|
|
0 0 10px rgba(255, 255, 0, 1),
|
|
0 0 20px rgba(255, 0, 255, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
.game-description {
|
|
font-size: 0.85rem;
|
|
margin: 0 0 8px 0;
|
|
line-height: 1.4;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.game-meta {
|
|
font-size: 0.75rem;
|
|
|
|
.game-genre {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(138, 43, 226, 0.3) 0%,
|
|
rgba(0, 255, 255, 0.3) 100%
|
|
);
|
|
border: 1px solid rgba(0, 255, 255, 0.6);
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 5px rgba(138, 43, 226, 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes card-pulse {
|
|
0% {
|
|
box-shadow:
|
|
0 0 20px rgba(0, 255, 255, 0.5),
|
|
0 0 40px rgba(138, 43, 226, 0.3);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 30px rgba(0, 255, 255, 0.7),
|
|
0 0 60px rgba(138, 43, 226, 0.5),
|
|
0 0 80px rgba(255, 0, 255, 0.3);
|
|
}
|
|
}
|
|
|
|
@keyframes coming-soon-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 0.9;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// INSERT COIN MESSAGE
|
|
// ============================================
|
|
|
|
.insert-coin-message {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 2rem;
|
|
font-family: "Pixelify Sans", monospace;
|
|
color: #ff0;
|
|
text-shadow:
|
|
0 0 10px rgba(255, 255, 0, 0.8),
|
|
0 0 20px rgba(255, 255, 0, 0.5);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
|
|
&.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.blinking {
|
|
animation: blink 1.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// CONTROL PANEL
|
|
// ============================================
|
|
|
|
.control-panel {
|
|
position: relative;
|
|
|
|
// 3D perspective transform
|
|
transform-style: preserve-3d;
|
|
perspective: 1250px;
|
|
|
|
width: 113%;
|
|
transform: translateX(-50%);
|
|
margin-left: 50.25%;
|
|
margin-top: -50px;
|
|
|
|
@include media-down(lg) {
|
|
padding: 30px 20px;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.control-panel-surface {
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba(138, 43, 226, 0.15) 0%,
|
|
rgba(0, 255, 255, 0.15) 50%,
|
|
rgba(255, 0, 255, 0.15) 100%
|
|
),
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
#2a2a4e 0px,
|
|
#2a2a4e 10px,
|
|
#1a1a3e 10px,
|
|
#1a1a3e 20px
|
|
),
|
|
linear-gradient(180deg, #2a2a4e 0%, #1a1a3e 100%);
|
|
height: 225px;
|
|
padding: 40px;
|
|
position: relative;
|
|
z-index: 2; // Above the joystick
|
|
|
|
// 3D perspective transform - subtle tilt toward viewer
|
|
transform: rotateX(40deg);
|
|
transform-origin: bottom center;
|
|
transform-style: preserve-3d;
|
|
|
|
// Enhanced 3D beveled edges with neon glow
|
|
box-shadow:
|
|
// Neon glow
|
|
0 0 20px rgba(138, 43, 226, 0.3),
|
|
0 0 40px rgba(0, 255, 255, 0.2),
|
|
// Stronger outer shadow for lifted appearance
|
|
0 12px 24px rgba(0, 0, 0, 0.6),
|
|
0 8px 16px rgba(0, 0, 0, 0.4),
|
|
0 4px 8px rgba(0, 0, 0, 0.3),
|
|
// Top highlight (raised effect)
|
|
inset 0 3px 0 rgba(0, 255, 255, 0.2),
|
|
inset 0 6px 12px rgba(138, 43, 226, 0.08),
|
|
// Bottom shadow (depth)
|
|
inset 0 -3px 0 rgba(0, 0, 0, 0.7),
|
|
inset 0 -6px 12px rgba(0, 0, 0, 0.5),
|
|
// Left highlight
|
|
inset 3px 0 0 rgba(138, 43, 226, 0.15),
|
|
// Right shadow
|
|
inset -3px 0 0 rgba(0, 0, 0, 0.6);
|
|
|
|
// Subtle gradient overlay for 3D effect
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 12px;
|
|
background:
|
|
radial-gradient(
|
|
ellipse at top left,
|
|
rgba(0, 255, 255, 0.15) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
ellipse at bottom right,
|
|
rgba(138, 43, 226, 0.2) 0%,
|
|
transparent 50%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
gap: 40px;
|
|
|
|
// Ensure controls are above the overlay
|
|
> * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
@include media-down(lg) {
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
padding: 30px 20px;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.control-label {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
font-family: "Pixelify Sans", monospace;
|
|
font-size: 0.75rem;
|
|
color: #7dffff;
|
|
letter-spacing: 1px;
|
|
text-shadow:
|
|
0 0 5px rgba(0, 255, 255, 0.6),
|
|
0 0 10px rgba(138, 43, 226, 0.3);
|
|
}
|
|
|
|
// Buttons overlay - positioned absolutely to avoid perspective transform
|
|
.buttons-overlay {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 60%;
|
|
transform: translate(-50%, -50%) scaleY(0.85);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
|
|
@include media-down(lg) {
|
|
position: static;
|
|
transform: none;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// JOYSTICK
|
|
// ============================================
|
|
|
|
.joystick-container {
|
|
text-align: center;
|
|
|
|
// Position absolutely to place on control panel without perspective transform
|
|
position: absolute;
|
|
left: 12.5%;
|
|
top: 40%;
|
|
transform: translateY(-50%);
|
|
z-index: 0; // Behind the control panel surface
|
|
pointer-events: none; // Allow clicks to pass through to buttons below
|
|
|
|
@include media-down(lg) {
|
|
position: static;
|
|
transform: none;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.joystick {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 120px;
|
|
user-select: none;
|
|
|
|
@include enhance-3d-transform;
|
|
}
|
|
|
|
.joystick-base {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80px;
|
|
height: 30px;
|
|
background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 100%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
inset 0 3px 6px rgba(0, 0, 0, 0.8),
|
|
0 2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #2a2a2a;
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
&::before {
|
|
left: 10px;
|
|
}
|
|
&::after {
|
|
right: 10px;
|
|
}
|
|
}
|
|
|
|
.joystick-stick {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 20px;
|
|
height: 70px;
|
|
background: linear-gradient(90deg, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
|
|
border-radius: 10px;
|
|
box-shadow:
|
|
-2px 0 4px rgba(0, 0, 0, 0.5),
|
|
2px 0 4px rgba(255, 255, 255, 0.1);
|
|
transition: transform 0.1s ease;
|
|
transform-origin: bottom center;
|
|
|
|
@include enhance-3d-transform;
|
|
}
|
|
|
|
.joystick-ball {
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40px;
|
|
height: 40px;
|
|
background: radial-gradient(circle at 30% 30%, #00ffff 0%, #00aaaa 100%);
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
0 0 15px rgba(0, 255, 255, 0.6),
|
|
0 0 30px rgba(0, 255, 255, 0.4),
|
|
0 4px 8px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.4),
|
|
inset 2px 2px 4px rgba(0, 255, 255, 0.6);
|
|
}
|
|
|
|
.joystick.up .joystick-stick {
|
|
transform: translateX(-50%) rotate(-15deg);
|
|
}
|
|
|
|
.joystick.down .joystick-stick {
|
|
transform: translateX(-50%) rotate(15deg);
|
|
}
|
|
|
|
.joystick.left .joystick-stick {
|
|
transform: translateX(-50%) rotate(-10deg) translateX(-5px);
|
|
}
|
|
|
|
.joystick.right .joystick-stick {
|
|
transform: translateX(-50%) rotate(10deg) translateX(5px);
|
|
}
|
|
|
|
// ============================================
|
|
// ARCADE BUTTONS
|
|
// ============================================
|
|
|
|
.buttons-container {
|
|
display: flex;
|
|
gap: 30px;
|
|
min-height: auto;
|
|
pointer-events: auto;
|
|
|
|
@include media-down(lg) {
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
.arcade-button-wrap {
|
|
text-align: center;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.arcade-button {
|
|
position: relative;
|
|
width: 70px;
|
|
height: 70px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
pointer-events: auto;
|
|
z-index: 10;
|
|
|
|
@include enhance-3d-transform;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 60%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80px;
|
|
height: 80px;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
#1a1a1a 0%,
|
|
rgba(0, 0, 0, 0.8)
|
|
);
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
.button-top {
|
|
display: block;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%, #ffff00 0%, #cccc00 100%);
|
|
box-shadow:
|
|
0 0 15px rgba(255, 255, 0, 0.6),
|
|
0 0 30px rgba(255, 255, 0, 0.4),
|
|
0 6px 0 #999900,
|
|
0 8px 12px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 2px 2px 4px rgba(255, 255, 150, 0.5);
|
|
transition: all 0.1s ease;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
|
|
.arcade-button-select .button-top {
|
|
background: radial-gradient(circle at 30% 30%, #ff00ff 0%, #cc00cc 100%);
|
|
box-shadow:
|
|
0 0 15px rgba(255, 0, 255, 0.6),
|
|
0 0 30px rgba(255, 0, 255, 0.4),
|
|
0 6px 0 #990099,
|
|
0 8px 12px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 2px 2px 4px rgba(255, 100, 255, 0.5);
|
|
}
|
|
|
|
.arcade-button-back .button-top {
|
|
background: radial-gradient(circle at 30% 30%, #00ffff 0%, #00cccc 100%);
|
|
box-shadow:
|
|
0 0 15px rgba(0, 255, 255, 0.6),
|
|
0 0 30px rgba(0, 255, 255, 0.4),
|
|
0 6px 0 #009999,
|
|
0 8px 12px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 2px 2px 4px rgba(100, 255, 255, 0.5);
|
|
}
|
|
|
|
.arcade-button:active .button-top,
|
|
.arcade-button.pressed .button-top {
|
|
top: 4px;
|
|
box-shadow:
|
|
0 0 10px rgba(255, 255, 0, 0.5),
|
|
0 0 20px rgba(255, 255, 0, 0.3),
|
|
0 2px 0 #999900,
|
|
0 4px 8px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 2px 2px 4px rgba(255, 255, 150, 0.5);
|
|
}
|
|
|
|
.arcade-button-select:active .button-top,
|
|
.arcade-button-select.pressed .button-top {
|
|
box-shadow:
|
|
0 0 10px rgba(255, 0, 255, 0.5),
|
|
0 0 20px rgba(255, 0, 255, 0.3),
|
|
0 2px 0 #990099,
|
|
0 4px 8px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 2px 2px 4px rgba(255, 100, 255, 0.5);
|
|
}
|
|
|
|
.arcade-button-back:active .button-top,
|
|
.arcade-button-back.pressed .button-top {
|
|
box-shadow:
|
|
0 0 10px rgba(0, 255, 255, 0.5),
|
|
0 0 20px rgba(0, 255, 255, 0.3),
|
|
0 2px 0 #009999,
|
|
0 4px 8px rgba(0, 0, 0, 0.6),
|
|
inset -2px -2px 4px rgba(0, 0, 0, 0.3),
|
|
inset 2px 2px 4px rgba(100, 255, 255, 0.5);
|
|
}
|
|
|
|
// ============================================
|
|
// SOUND TOGGLE
|
|
// ============================================
|
|
|
|
.sound-toggle-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.sound-toggle {
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 2px solid #5a5a8e;
|
|
border-radius: 8px;
|
|
background: linear-gradient(145deg, #2a2a4e, #1a1a3e);
|
|
color: #ffff00;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
pointer-events: auto;
|
|
z-index: 10;
|
|
position: relative;
|
|
box-shadow:
|
|
0 0 15px rgba(255, 255, 0, 0.4),
|
|
0 0 30px rgba(255, 255, 0, 0.2),
|
|
inset 0 2px 4px rgba(0, 0, 0, 0.6),
|
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
|
|
|
&:hover {
|
|
background: linear-gradient(145deg, #3a3a5e, #2a2a4e);
|
|
border-color: #7a7aae;
|
|
box-shadow:
|
|
0 0 20px rgba(255, 255, 0, 0.6),
|
|
0 0 40px rgba(255, 255, 0, 0.4),
|
|
inset 0 2px 4px rgba(0, 0, 0, 0.6),
|
|
0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow:
|
|
0 0 20px rgba(255, 255, 0, 0.8),
|
|
0 0 40px rgba(255, 255, 0, 0.6),
|
|
inset 0 2px 4px rgba(0, 0, 0, 0.6),
|
|
0 0 0 2px rgba(255, 255, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.sound-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sound-label {
|
|
text-align: center;
|
|
margin-top: 8px;
|
|
font-family: "Pixelify Sans", monospace;
|
|
font-size: 0.65rem;
|
|
color: #7dffff;
|
|
letter-spacing: 1px;
|
|
text-shadow:
|
|
0 0 5px rgba(0, 255, 255, 0.6),
|
|
0 0 10px rgba(138, 43, 226, 0.3);
|
|
}
|
|
|
|
// ============================================
|
|
// CABINET BASE
|
|
// ============================================
|
|
|
|
.cabinet-base {
|
|
width: 112.5%;
|
|
margin-left: -6%;
|
|
height: 80px;
|
|
background:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba(255, 0, 255, 0.15) 0%,
|
|
rgba(0, 255, 255, 0.15) 50%,
|
|
rgba(255, 255, 0, 0.15) 100%
|
|
),
|
|
linear-gradient(180deg, #2a2a4e 0%, #1a1a2e 100%);
|
|
border: 6px solid #5a5a8e;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow:
|
|
0 0 40px rgba(138, 43, 226, 0.4),
|
|
0 0 80px rgba(0, 255, 255, 0.3),
|
|
0 30px 60px rgba(0, 0, 0, 0.9),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.2),
|
|
inset 0 -2px 4px rgba(0, 0, 0, 0.5);
|
|
|
|
@include media-down(lg) {
|
|
height: 60px;
|
|
}
|
|
}
|
|
|
|
.coin-slot {
|
|
width: 60px;
|
|
height: 6px;
|
|
background: #000;
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
inset 0 2px 4px rgba(0, 0, 0, 0.9),
|
|
0 1px 0 rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "INSERT COIN";
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 0.65rem;
|
|
color: #7dffff;
|
|
font-family: "Pixelify Sans", monospace;
|
|
letter-spacing: 1px;
|
|
white-space: nowrap;
|
|
text-shadow:
|
|
0 0 5px rgba(0, 255, 255, 0.8),
|
|
0 0 10px rgba(138, 43, 226, 0.4);
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// ACCESSIBILITY - REDUCED MOTION
|
|
// ============================================
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.arcade-container *,
|
|
.arcade-container *::before,
|
|
.arcade-container *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|