Tobias Leuschner
ada86e77f4
All checks were successful
Deploy via FTP / deploy (push) Successful in 3s
253 lines
6.6 KiB
CSS
253 lines
6.6 KiB
CSS
/* ── Reset & base ── */
|
|
html,body { height:100%; margin:0; padding:0; }
|
|
html,body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
|
|
|
|
body {
|
|
font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
|
|
background: #0c0c14;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: env(safe-area-inset-top);
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
/* Subtle ambient background */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -5%, rgba(120,60,255,0.12) 0%, transparent 70%),
|
|
radial-gradient(ellipse 55% 40% at 90% 110%, rgba(0,180,130,0.07) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ── Stage ── */
|
|
#stage {
|
|
flex: 1;
|
|
min-height: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
touch-action: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ── Legal footer ── */
|
|
#legal-bar {
|
|
flex-shrink: 0;
|
|
text-align: center;
|
|
padding: 7px 16px;
|
|
padding-bottom: max(7px, env(safe-area-inset-bottom));
|
|
background: rgba(255,255,255,0.02);
|
|
border-top: 1px solid rgba(255,255,255,0.06);
|
|
z-index: 100;
|
|
}
|
|
#legal-bar a {
|
|
color: rgba(255,255,255,0.55);
|
|
font-size: 11px;
|
|
text-decoration: none;
|
|
margin: 0 6px;
|
|
transition: color 150ms ease;
|
|
}
|
|
#legal-bar a:hover { color: rgba(255,255,255,0.85); }
|
|
#legal-bar span { color: rgba(255,255,255,0.4); font-size: 11px; }
|
|
|
|
/* ── Overlay card ── */
|
|
#overlay {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 28px;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.09);
|
|
border-radius: 20px;
|
|
padding: 20px 28px 16px;
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
box-shadow: 0 4px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
|
|
pointer-events: none;
|
|
width: max-content;
|
|
max-width: calc(100vw - 48px);
|
|
z-index: 10;
|
|
transition: opacity 220ms ease, transform 220ms ease;
|
|
}
|
|
|
|
#overlay.hidden {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-6px);
|
|
}
|
|
|
|
#overlay h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
background: linear-gradient(135deg, #c084fc 0%, #818cf8 45%, #34d399 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
#overlay p {
|
|
margin: 0 0 4px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: rgba(255,255,255,0.65);
|
|
}
|
|
|
|
.hint {
|
|
font-size: 12px !important;
|
|
color: rgba(255,255,255,0.55) !important;
|
|
margin-top: 4px !important;
|
|
}
|
|
|
|
/* ── Finger circles ── */
|
|
.finger {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 88px;
|
|
height: 88px;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, calc(-50% - -12px));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
color: rgba(255,255,255,0.88);
|
|
background: rgba(255,255,255,0.07);
|
|
border: 5px solid rgba(255,255,255,0.14);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
box-shadow:
|
|
0 0 0 1px rgba(255,255,255,0.04),
|
|
0 8px 28px rgba(0,0,0,0.35);
|
|
transition:
|
|
transform 130ms ease,
|
|
opacity 250ms ease,
|
|
border-color 160ms ease,
|
|
background 160ms ease,
|
|
box-shadow 160ms ease,
|
|
color 160ms ease;
|
|
}
|
|
|
|
.finger .label {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* ── Player colours (assigned in JS by join order) ── */
|
|
.finger.c1 { border-color: rgba(192,132,252,0.7); background: rgba(192,132,252,0.13); }
|
|
.finger.c2 { border-color: rgba(96,165,250,0.7); background: rgba(96,165,250,0.13); }
|
|
.finger.c3 { border-color: rgba(251,146,60,0.7); background: rgba(251,146,60,0.13); }
|
|
.finger.c4 { border-color: rgba(244,114,182,0.7); background: rgba(244,114,182,0.13); }
|
|
.finger.c5 { border-color: rgba(34,211,238,0.7); background: rgba(34,211,238,0.13); }
|
|
.finger.c6 { border-color: rgba(250,204,21,0.7); background: rgba(250,204,21,0.13); }
|
|
.finger.c7 { border-color: rgba(248,113,113,0.7); background: rgba(248,113,113,0.13); }
|
|
.finger.c8 { border-color: rgba(163,230,53,0.7); background: rgba(163,230,53,0.13); }
|
|
|
|
/* Highlight: amber glow */
|
|
.finger.highlight {
|
|
border-color: #f59e0b;
|
|
background: rgba(245,158,11,0.14);
|
|
color: #fef3c7;
|
|
box-shadow:
|
|
0 0 0 2px rgba(245,158,11,0.18),
|
|
0 0 32px rgba(245,158,11,0.28),
|
|
0 8px 28px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
/* Winner: green gradient + strong glow */
|
|
.finger.winner {
|
|
background: linear-gradient(135deg, #34d399, #059669);
|
|
border-color: #10b981;
|
|
color: #022c22;
|
|
font-weight: 900;
|
|
box-shadow:
|
|
0 0 0 3px rgba(52,211,153,0.28),
|
|
0 0 48px rgba(52,211,153,0.35),
|
|
0 8px 30px rgba(0,0,0,0.4);
|
|
transform: translate(-50%, calc(-50% - 18px)) scale(1.08);
|
|
}
|
|
|
|
/* Lost: shrink and fade */
|
|
.finger.lost {
|
|
opacity: 0;
|
|
transform: translate(-50%, calc(-50% - 18px)) scale(0.45);
|
|
transition: opacity 380ms ease, transform 380ms cubic-bezier(0.4,0,0.6,1);
|
|
}
|
|
|
|
/* Pulse animation for winner */
|
|
.pulse { animation: pulse 1400ms ease-in-out infinite; }
|
|
|
|
@keyframes pulse {
|
|
0% { transform: translate(-50%, calc(-50% - 18px)) scale(1.08); }
|
|
50% { transform: translate(-50%, calc(-50% - 18px)) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); }
|
|
100% { transform: translate(-50%, calc(-50% - 18px)) scale(1.08); }
|
|
}
|
|
|
|
/* ── Install hint banner ── */
|
|
#install-hint {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 12px 9px 16px;
|
|
background: rgba(129,140,248,0.07);
|
|
border-top: 1px solid rgba(129,140,248,0.14);
|
|
z-index: 50;
|
|
animation: hintSlide 280ms ease;
|
|
}
|
|
|
|
#install-hint svg {
|
|
flex-shrink: 0;
|
|
color: #818cf8;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#install-hint-text {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,0.55);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
#install-hint-text strong {
|
|
color: rgba(255,255,255,0.85);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#install-hint-close {
|
|
flex-shrink: 0;
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255,255,255,0.25);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
padding: 0 4px;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition: color 150ms;
|
|
}
|
|
|
|
#install-hint-close:hover,
|
|
#install-hint-close:active { color: rgba(255,255,255,0.6); }
|
|
|
|
@keyframes hintSlide {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (min-width: 600px) {
|
|
.finger { width: 80px; height: 80px; }
|
|
.finger .label { font-size: 19px; }
|
|
}
|