/* ============================================================= 🎮 GAMEMAP.CSS — Premium Mobile 3D Candy-Style Game Nodes Mobile-first. Desktop map visuals live in style.css. ============================================================= */ /* ───────────────────────────────────────────────────────────── 1. KEYFRAME ANIMATIONS ───────────────────────────────────────────────────────────── */ /* Current node: playful spring bounce */ @keyframes gm-bounce { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, calc(-50% - 14px)) scale(1.09); } 55% { transform: translate(-50%, calc(-50% - 6px)) scale(1.04); } 75% { transform: translate(-50%, calc(-50% - 10px)) scale(1.06); } } /* Current node: expanding orange glow ring */ @keyframes gm-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, .60), 0 12px 0 var(--nd-shadow), 0 18px 28px rgba(0, 0, 0, .32), inset 0 4px 0 rgba(255, 255, 255, .40); } 65% { box-shadow: 0 0 0 22px rgba(255, 152, 0, 0), 0 12px 0 var(--nd-shadow), 0 18px 28px rgba(0, 0, 0, .32), inset 0 4px 0 rgba(255, 255, 255, .40); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0), 0 12px 0 var(--nd-shadow), 0 18px 28px rgba(0, 0, 0, .32), inset 0 4px 0 rgba(255, 255, 255, .40); } } /* Completed star badge pop */ @keyframes gm-star-pop { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.35) rotate(15deg); } } /* Exam node: golden 3D shimmer — preserves the hard bottom-edge depth */ @keyframes goldShine { 0%, 100% { box-shadow: 0 10px 0 var(--nd-shadow), 0 15px 25px rgba(255, 152, 0, 0.4), inset 0 4px 0 rgba(255, 255, 255, 0.4); } 50% { box-shadow: 0 10px 0 var(--nd-shadow), 0 15px 40px rgba(255, 193, 7, 0.8), inset 0 4px 0 rgba(255, 255, 255, 0.8); } } /* ───────────────────────────────────────────────────────────── 2. BASE 3D NODE (mobile only) ───────────────────────────────────────────────────────────── */ @media screen and (max-width: 768px) { /* CSS custom properties — overridden per level/status */ .node-3d-base { --nd-top: #64B5F6; /* radial highlight colour */ --nd-mid: #1E88E5; /* main face colour */ --nd-shadow: #1565C0; /* hard bottom-edge shadow */ position: absolute; z-index: 15; width: 64px; height: 64px; border-radius: 50%; /* Place at (bpt.x, bpt.y) — JS sets left/top, transform centres it */ transform: translate(-50%, -50%); cursor: pointer; user-select: none; font-family: system-ui, -apple-system, sans-serif; /* Candy-crush 3D face gradient */ background: radial-gradient(circle at 36% 30%, var(--nd-top), var(--nd-mid) 55%, var(--nd-shadow)); /* 3-layer shadow stack: layer 1 — hard bottom edge (the "depth") layer 2 — ambient drop shadow layer 3 — inset highlight on top edge (shine) */ box-shadow: 0 12px 0 var(--nd-shadow), 0 18px 28px rgba(0, 0, 0, .30), inset 0 4px 0 rgba(255, 255, 255, .40), inset 0 -4px 0 rgba(0, 0, 0, .12); border: none; display: flex; align-items: center; justify-content: center; /* Smooth press transition */ transition: transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color: transparent; } /* Physical 3-D button press */ .node-3d-base:active { transform: translate(-50%, calc(-50% + 10px)); box-shadow: 0 2px 0 var(--nd-shadow), 0 4px 8px rgba(0, 0, 0, .22), inset 0 4px 0 rgba(255, 255, 255, .25); } /* ── Inner top surface (text + badges) ─────────────────── */ .node-3d-top { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .nd-label { font-size: 7px; font-weight: 800; color: rgba(255, 255, 255, .80); text-transform: uppercase; letter-spacing: 1.3px; line-height: 1; margin-bottom: 2px; } .nd-num { font-size: 19px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, .25); } /* Badge anchors */ .nd-badge { position: absolute; font-size: 16px; line-height: 1; pointer-events: none; } .nd-badge-star { bottom: -5px; right: -5px; animation: gm-star-pop 2.4s ease-in-out infinite; } .nd-badge-lock { top: -8px; right: -8px; } /* ───────────────────────────────────────────────────────── 3. LEVEL COLOUR THEMES (CSS variable overrides) ───────────────────────────────────────────────────────── */ .node-lvl-1 { --nd-top: #90CAF9; --nd-mid: #1E88E5; --nd-shadow: #1565C0; } .node-lvl-2 { --nd-top: #FFE082; --nd-mid: #FF9800; --nd-shadow: #EF6C00; } .node-lvl-3 { --nd-top: #EF9A9A; --nd-mid: #E53935; --nd-shadow: #C62828; } .node-lvl-4 { --nd-top: #CE93D8; --nd-mid: #8E24AA; --nd-shadow: #6A1B9A; } .node-lvl-5 { --nd-top: #A5D6A7; --nd-mid: #43A047; --nd-shadow: #2E7D32; } /* ───────────────────────────────────────────────────────── 4. STATUS OVERRIDES ───────────────────────────────────────────────────────── */ /* ── LOCKED — greyed out, no press feedback ─────────────── */ .locked-node { --nd-top: #CFD8DC; --nd-mid: #90A4AE; --nd-shadow: #546E7A; opacity: .60; cursor: not-allowed; filter: grayscale(.55); } .locked-node:active { /* Cancel the press — locked nodes don't depress */ transform: translate(-50%, -50%); box-shadow: 0 12px 0 var(--nd-shadow), 0 18px 28px rgba(0, 0, 0, .25), inset 0 4px 0 rgba(255, 255, 255, .25); } /* ── COMPLETED — Keep level colors, just add brightness ──── */ .completed-node { filter: brightness(1.15); } .completed-node .nd-num { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); } .completed-node .nd-label { color: rgba(255,255,255,.9); } /* ── EXAM NODE — 3D Golden Button ───────────────────────── */ .node-exam-3d { --nd-top: #FFF59D; --nd-mid: #FFB300; --nd-shadow: #F57F17; width: 76px; height: 76px; border: 2px solid rgba(255, 255, 255, 0.6); z-index: 18; } .node-exam-3d:not(.locked-node) { animation: goldShine 3s ease-in-out infinite; } .node-exam-3d .nd-num { font-size: 28px; } /* ── CURRENT — fiery orange, bigger, bouncing + pulse ring ─ */ .current-node { --nd-top: #FFE082; --nd-mid: #FF9800; --nd-shadow: #E65100; width: 78px; height: 78px; z-index: 20; border: 3px solid rgba(255, 255, 255, .70); animation: gm-bounce 1.6s cubic-bezier(.36, .07, .19, .97) infinite, gm-pulse-ring 2.0s ease-out infinite; } .current-node:active { animation: none; transform: translate(-50%, calc(-50% + 10px)); box-shadow: 0 2px 0 var(--nd-shadow), 0 5px 10px rgba(0, 0, 0, .22), inset 0 4px 0 rgba(255, 255, 255, .25); } /* Bigger, darker text on the orange node */ .current-node .nd-num { font-size: 23px; color: #3E1A00; text-shadow: 0 1px 3px rgba(0,0,0,.20); } .current-node .nd-label { font-size: 8px; color: rgba(62, 26, 0, .70); } /* ───────────────────────────────────────────────────────── 5. PLAYER AVATAR (positions itself above current node) ───────────────────────────────────────────────────────── */ .player-avatar-wrap { position: absolute; z-index: 50; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: avatarHover 2.2s ease-in-out infinite; margin-top: -14px; } .player-avatar-label { background: #FF6F00; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; padding: 3px 10px; border-radius: 20px; margin-bottom: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.25); white-space: nowrap; } .player-avatar-ring { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9e6, #ffe082 60%, #ffb300); border: 3px solid #FF6F00; box-shadow: 0 4px 12px rgba(255,111,0,.45); display: flex; align-items: center; justify-content: center; } .player-avatar-face { font-size: 26px; line-height: 1; } .player-avatar-pointer { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #FF6F00; margin-top: 2px; } .avatar-sparkle { position: absolute; font-size: 14px; animation: sparklePop 2s ease-in-out infinite; pointer-events: none; } .avatar-sparkle:nth-child(1) { top: -8px; left: -6px; animation-delay: 0s; } .avatar-sparkle:nth-child(2) { top: -12px; right: -4px; animation-delay: .6s; } .avatar-sparkle:nth-child(3) { top: -4px; right: -14px;animation-delay: 1.2s; } } /* end @media mobile */