35 lines
2.2 KiB
CSS
35 lines
2.2 KiB
CSS
/* Mobile-first styles */
|
|
html,body,#stage{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;background:#111;color:#fff}
|
|
#stage{position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
|
|
#overlay{position:absolute;left:12px;right:12px;top:18px;text-align:center}
|
|
#overlay h1{margin:0;font-size:20px;letter-spacing:0.5px}
|
|
.hint{opacity:.7;font-size:13px}
|
|
|
|
.finger{position:absolute;pointer-events:none;width:88px;height:88px;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;background:rgba(255,255,255,0.06);border:3px solid rgba(255,255,255,0.12);backdrop-filter: blur(6px)}
|
|
.finger .label{font-size:18px}
|
|
.finger.highlight{border-color:#ffd54f;box-shadow:0 0 24px rgba(255,213,79,0.18)}
|
|
.finger.winner{background:linear-gradient(135deg,#66ff99,#00b894);border-color:#00a86b;color:#00311a;box-shadow:0 8px 30px rgba(0,168,107,0.28);transform:translate(-50%,-50%) scale(1.05)}
|
|
.finger.lost{opacity:0;transform:translate(-50%,-50%) scale(0.6);transition:all 350ms ease}
|
|
.finger{transition:all 120ms linear}
|
|
|
|
@media (min-width:600px){
|
|
.finger{width:72px;height:72px}
|
|
.finger .label{font-size:16px}
|
|
}
|
|
|
|
.pulse{animation:pulse 1200ms infinite}
|
|
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
|
|
|
|
.top-center-hint{position:absolute;left:50%;transform:translateX(-50%);top:8px;font-size:12px;opacity:.9}
|
|
|
|
/* Spinner visuals (subtle ring around centroid while selecting) */
|
|
#spinner{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transform-origin:0 0}
|
|
#spinner .ring{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;border:2px dashed rgba(255,255,255,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.35)}
|
|
#spinner .pointer{position:absolute;left:50%;top:0;width:12px;height:12px;margin-left:-6px;background:#ffd54f;border-radius:50%;box-shadow:0 6px 18px rgba(255,213,79,0.18)}
|
|
|
|
/* Transition helpers */
|
|
.finger{transition:transform 130ms linear, opacity 220ms ease, border-color 160ms ease}
|
|
|