PageSourceSearch

https://gullesurgames.com/index.html

html gullesurgames.com collected 2026-10-02 01:30:58 UTC 48,357 bytes, 672 lines download raw bytes

1<!DOCTYPE html>
2<html class="dark" lang="en">
3
4<head>
5    <meta charset="utf-8" />
6    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
7    <title>Gullesur Games - Mobile Games Studio</title>
8
9    <!-- SEO & Social -->
10    <meta name="description"
11        content="Forging legends in the digital realm. Creators of Just Euchre and other immersive mobile experiences." />
12    <meta property="og:type" content="website" />
13    <meta property="og:title" content="Gullesur Games" />
14    <meta property="og:description" content="Forging legends in the digital realm. Creators of Just Euchre." />
15    <meta property="og:url" content="https://gullesurgames.com/" />
16    <meta property="og:image" content="https://gullesurgames.com/assets/images/splash.png" />
17    <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
18
19    <!-- Analytics -->
20    
20<script data-goatcounter="https://gullesurgames.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
20
21
22    <link href="https://fonts.googleapis.com" rel="preconnect" />
23    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
24    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;display=swap"
25        rel="stylesheet" />
26    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&amp;display=swap"
27        rel="stylesheet" />
28    <link
29        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap"
30        rel="stylesheet" />
31    
31<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
31
32    
32<script>
33        tailwind.config = {
34            darkMode: "class",
35            theme: {
36                extend: {
37                    colors: {
38                        "primary": "#f2cc0d",
39                        "primary-dark": "#c2a30a",
40                        "background-light": "#f8f8f5",
41                        "background-dark": "#121212", "surface": "#1E1E1E",
42                        "surface-highlight": "#2A2A2A",
43                    },
44                    fontFamily: {
45                        "display": ["Space Grotesk", "sans-serif"],
46                        "serif-display": ["Cinzel", "serif"],
47                        "body": ["Space Grotesk", "sans-serif"]
48                    },
49                    backgroundImage: {
50                        'brushed-gold': 'linear-gradient(135deg, #b8860b 0%, #f2cc0d 25%, #ffd700 50%, #f2cc0d 75%, #b8860b 100%)',
51                        'brushed-gold-text': 'linear-gradient(180deg, #fceda4 0%, #f2cc0d 40%, #c2a30a 100%)',
52                    },
53                    borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "2xl": "1rem", "full": "9999px" },
54                },
55            },
56        }
57    </script>
57
58    <link rel="stylesheet" href="assets/css/styles.css">
59</head>
60
61<body
62    class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-white font-display antialiased overflow-x-hidden selection:bg-primary selection:text-black">
63    <div class="flex min-h-screen w-full flex-col">
64        <header
65            class="sticky top-0 z-50 w-full border-b border-[#333333] bg-background-dark/95 backdrop-blur-sm px-6 py-4">
66            <div class="mx-auto flex max-w-7xl items-center justify-between">
67                <a href="index.html" class="flex items-center gap-3 group cursor-pointer">
68                    <div
69                        class="relative flex h-8 w-8 items-center justify-center bg-gradient-to-br from-[#fceda4] via-[#f2cc0d] to-[#b8860b] petal-shape shadow-[0_0_10px_rgba(242,204,13,0.3)]">
70                        <div
71                            class="absolute inset-[2px] bg-background-dark petal-shape flex items-center justify-center">
72                            <span class="material-symbols-outlined text-sm text-primary">flare</span>
73                        </div>
74                    </div>
75                    <h2
76                        class="text-white text-xl font-bold tracking-tight font-serif-display group-hover:text-primary transition-colors">
77                        Gullesur Games</h2>
78                </a>
79                <nav class="hidden md:flex items-center gap-8">
80                    <a class="text-gray-300 text-sm font-medium hover:text-primary transition-colors"
81                        href="#games">Games</a>
82                    <a class="text-gray-300 text-sm font-medium hover:text-primary transition-colors"
83                        href="about.html">Studio</a>
84                    <a class="text-gray-300 text-sm font-medium hover:text-primary transition-colors"
85                        href="support.html">Contact</a>
86                </nav>
87                <div class="flex md:hidden items-center gap-4">
88                    <button class="flex md:hidden text-white">
89                        <span class="material-symbols-outlined">menu</span>
90                    </button>
91                </div>
92            </div>
93        </header>
94        <section class="relative flex min-h-[600px] w-full flex-col justify-center overflow-hidden">
95            <div class="absolute inset-0 z-0 h-full w-full bg-cover bg-center"
96                data-alt="Abstract dark digital landscape with subtle golden geometric shapes"
97                style='background-image: linear-gradient(to bottom, rgba(18, 18, 18, 0.6) 0%, rgba(18, 18, 18, 0.9) 50%, rgba(18, 18, 18, 1) 100%), url("assets/images/hero-bg.jpg");'>
98            </div>
99            <div class="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center px-6 text-center py-20">
100                <div class="mb-10 flex flex-col items-center justify-center group">
101                    <div class="relative mb-6 h-32 w-32 flex items-center justify-center">
102                        <div class="absolute inset-0 sun-rays animate-pulse opacity-50"></div>
103                        <div class="absolute inset-0 rounded-full border-2 border-primary/30 rotate-12"></div>
104                        <div class="absolute inset-0 rounded-full border border-primary/20 -rotate-12 scale-110"></div>
105                        <div
106                            class="relative h-24 w-24 bg-gradient-to-br from-[#fceda4] via-[#f2cc0d] to-[#b8860b] petal-shape shadow-[0_0_30px_rgba(242,204,13,0.2)] flex items-center justify-center transform transition-transform duration-700 group-hover:rotate-180">
107                            <div
108                                class="absolute inset-[2px] bg-background-dark petal-shape flex items-center justify-center">
109                                <span
110                                    class="material-symbols-outlined text-6xl text-primary bg-clip-text text-transparent bg-brushed-gold-text">flare</span>
111                            </div>
112                        </div>
113                        <div
114                            class="absolute -left-16 top-1/2 h-[1px] w-12 bg-gradient-to-l from-primary/50 to-transparent">
115                        </div>
116                        <div
117                            class="absolute -right-16 top-1/2 h-[1px] w-12 bg-gradient-to-r from-primary/50 to-transparent">
118                        </div>
119                    </div>
120                    <h1
121                        class="font-serif-display text-5xl md:text-7xl lg:text-8xl font-black tracking-widest text-white uppercase drop-shadow-xl relative pl-4">
122                        <span class="text-brushed-gold">Gullesur</span>
123                        <span
124                            class="block text-2xl md:text-3xl font-light tracking-[0.5em] text-gray-300 mt-2 font-display uppercase border-t border-primary/30 pt-3 mx-auto w-fit">Games</span>
125                    </h1>
126                </div>
127                <h2 class="mb-10 max-w-2xl text-lg font-light leading-relaxed text-gray-400 md:text-xl font-display">
128                    Forging legends in the digital realm. Where ancient inspiration meets cutting-edge gameplay.
129                </h2>
130                <div class="flex flex-col sm:flex-row gap-4">
131                    <a href="#games"
132                        class="flex h-12 min-w-[160px] cursor-pointer items-center justify-center rounded-lg bg-primary px-8 text-base font-bold text-black transition-transform hover:scale-105 hover:bg-white hover:shadow-[0_0_20px_rgba(242,204,13,0.4)]">
133                        Explore Realms
134                    </a>
135                    <a href="about.html"
136                        class="flex h-12 min-w-[160px] cursor-pointer items-center justify-center rounded-lg border border-white/20 bg-white/5 px-8 text-base font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/10 hover:border-white/40">
137                        Our Saga
138                    </a>
139                </div>
140            </div>
141        </section>
142        <section class="w-full bg-background-dark pt-24 pb-12">
143            <div class="mx-auto max-w-7xl px-6">
144                <!-- Announcement Carousel Wrapper -->
145                <div class="relative group">
146                    <div id="announcement-carousel"
147                        class="flex w-full overflow-x-auto no-scrollbar snap-x snap-mandatory scroll-smooth rounded-3xl">
148                        
149                        <!-- Slide 1: iOS Launch -->
150                        <div class="w-full flex-shrink-0 snap-center">
151                            <div class="announcement-card announcement-glow rounded-3xl overflow-hidden bg-announcement-gradient">
152                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
153                                    <div class="p-8 lg:p-16 flex flex-col justify-center">
154                                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6 w-fit">
155                                            <span class="relative flex h-2 w-2">
156                                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
157                                                <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
158                                            </span>
159                                            New Release
160                                        </div>
161                                        <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 font-serif-display leading-tight">
162                                            Just Euchre <span class="text-brushed-gold">Arrives on iOS!</span>
163                                        </h2>
164                                        <p class="text-gray-400 text-lg mb-8 leading-relaxed max-w-xl">
165                                            The classic card game reimagined for mobile is now live on the Apple App Store! Join the tables on iPhone and iPad, featuring slick animations, dark mode aesthetics, and ranked play.
166                                        </p>
167                                        <div class="flex flex-wrap gap-4 items-center">
168                                            <a href="https://apps.apple.com/app/id6775664646" target="_blank"
169                                                class="flex h-14 px-8 items-center justify-center rounded-xl bg-primary text-black font-bold text-lg hover:bg-white hover:shadow-[0_0_20px_rgba(242,204,13,0.4)] transition-all transform hover:-translate-y-1 gap-2">
170                                                <span class="material-symbols-outlined">apple</span>
171                                                App Store
172                                            </a>
173                                            <a href="https://play.google.com/store/apps/details?id=com.gullesur.euchre" target="_blank"
174                                                class="flex h-14 px-8 items-center justify-center rounded-xl border border-white/20 bg-surface-highlight text-white font-bold text-lg hover:bg-white hover:text-black hover:border-white transition-all transform hover:-translate-y-1 gap-2">
175                                                <span class="material-symbols-outlined">android</span>
176                                                Google Play
177                                            </a>
178                                        </div>
179                                    </div>
180                                    <div class="relative aspect-square lg:aspect-auto overflow-hidden">
181                                        <img src="assets/images/euchre-gameplay.png" alt="Just Euchre iOS Release" 
182                                            class="absolute inset-0 h-full w-full object-cover transform hover:scale-105 transition-transform duration-1000">
183                                        <div class="absolute inset-0 bg-gradient-to-t from-background-dark/80 via-transparent to-transparent lg:hidden"></div>
184                                    </div>
185                                </div>
186                            </div>
187                        </div>
188
189                        <!-- Slide 2: Achievement Hunt Update -->
190                        <div class="w-full flex-shrink-0 snap-center">
191                            <div class="announcement-card announcement-glow rounded-3xl overflow-hidden bg-announcement-gradient">
192                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
193                                    <div class="p-8 lg:p-16 flex flex-col justify-center">
194                                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-6 w-fit">
195                                            <span class="relative flex h-2 w-2">
196                                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
197                                                <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
198                                            </span>
199                                            News Alert
200                                        </div>
201                                        <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 font-serif-display leading-tight">
202                                            Major Update: <span class="text-brushed-gold">The Achievement Hunt Begins!</span>
203                                        </h2>
204                                        <p class="text-gray-400 text-lg mb-10 leading-relaxed max-w-xl">
205                                            Starting May 1st, Just Euchre is getting its biggest update yet. Sign in with Google Play Services to start earning points and unlocking over 40 brand-new achievements. Hit the tables and show off your card skills!
206                                        </p>
207                                        <a href="https://play.google.com/store/apps/details?id=com.gullesur.euchre" target="_blank"
208                                            class="flex h-14 w-full sm:w-fit px-10 items-center justify-center rounded-xl bg-primary text-black font-bold text-lg hover:bg-white hover:shadow-[0_0_20px_rgba(242,204,13,0.4)] transition-all transform hover:-translate-y-1">
209                                            Update on Google Play
210                                        </a>
211                                    </div>
212                                    <div class="relative aspect-square lg:aspect-auto overflow-hidden">
213                                        <img src="assets/images/announcements/wolf-promo.png" alt="Just Euchre Achievement Hunt Update" 
214                                            class="absolute inset-0 h-full w-full object-cover transform hover:scale-110 transition-transform duration-1000">
215                                        <div class="absolute inset-0 bg-gradient-to-t from-background-dark/80 via-trans
215parent to-transparent lg:hidden"></div>
216                                    </div>
217                                </div>
218                            </div>
219                        </div>
220                    </div>
221
222                    <!-- Carousel Indicators & Nav Controls -->
223                    <div class="mt-6 flex items-center justify-between">
224                        <div class="flex items-center gap-2" id="announcement-dots">
225                            <button class="h-2.5 w-8 rounded-full bg-primary transition-all duration-300" aria-label="Announcement 1"></button>
226                            <button class="h-2.5 w-2.5 rounded-full bg-white/20 hover:bg-white/50 transition-all duration-300" aria-label="Announcement 2"></button>
227                        </div>
228                        <div class="flex gap-2">
229                            <button id="announcement-prev" aria-label="Previous Announcement"
230                                class="h-10 w-10 rounded-full bg-surface-highlight border border-white/10 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all">
231                                <span class="material-symbols-outlined">arrow_back</span>
232                            </button>
233                            <button id="announcement-next" aria-label="Next Announcement"
234                                class="h-10 w-10 rounded-full bg-surface-highlight border border-white/10 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all">
235                                <span class="material-symbols-outlined">arrow_forward</span>
236                            </button>
237                        </div>
238                    </div>
239                </div>
240            </div>
241        </section>
242
243        <section class="w-full bg-background-dark py-24" id="games">
244            <div class="mx-auto max-w-7xl px-6">
245                <div class="mb-12 flex items-center justify-between border-b border-[#333333] pb-6">
246                    <div>
247                        <h2 class="text-3xl font-bold tracking-tight text-white md:text-4xl font-serif-display">Featured
248                            Release</h2>
249                        <p class="mt-2 text-gray-400">Our latest flagship title available now.</p>
250                    </div>
251                    <div class="hidden md:flex gap-2">
252                        <span class="material-symbols-outlined text-primary">verified</span>
253                        <span class="text-sm font-medium text-primary uppercase tracking-widest">Editor's Choice</span>
254                    </div>
255                </div>
256                <div class="group relative overflow-hidden rounded-2xl border border-[#333333] bg-surface shadow-2xl">
257                    <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[600px]">
258                        <div class="flex flex-col justify-center p-8 lg:col-span-4 lg:p-12 z-10 bg-surface">
259                            <div
260                                class="mb-4 h-12 w-12 rounded-lg bg-primary/20 flex items-center justify-center text-primary">
261                                <span class="material-symbols-outlined text-3xl">playing_cards</span>
262                            </div>
263                            <h3 class="mb-4 text-4xl font-bold text-white tracking-tighter">Just Euchre</h3>
264                            <p class="mb-8 text-lg text-gray-400 leading-relaxed">
265                                The classic card game, reimagined for the modern era. Featuring slick animations, dark
266                                mode aesthetics, and a competitive ranking system.
267                            </p>
268                            <div class="flex flex-col gap-4">
269                                <div class="flex items-center gap-4 mb-4">
270                                    <div class="flex flex-col">
271                                        <span class="text-xs text-gray-500 uppercase">Rating</span>
272                                        <span class="text-white font-bold flex items-center gap-1">3.0 <span
273                                                class="material-symbols-outlined text-xs text-primary">star</span></span>
274                                    </div>
275                                    <div class="h-8 w-px bg-[#333333]"></div>
276                                    <div class="flex flex-col">
277                                        <span class="text-xs text-gray-500 uppercase">Downloads</span>
278                                        <span class="text-white font-bold">50+</span>
279                                    </div>
280                                    <div class="h-8 w-px bg-[#333333]"></div>
281                                    <div class="flex flex-col">
282                                        <span class="text-xs text-gray-500 uppercase">Platform</span>
283                                        <span class="text-white font-bold">iOS & Android</span>
284                                    </div>
285                                </div>
286                                <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
287                                    <a href="https://apps.apple.com/app/id6775664646" target="_blank"
288                                        class="inline-block transition-transform hover:scale-105">
289                                        <img src="assets/images/app-store-badge.svg" alt="Download on the App Store"
290                                            class="h-11 w-auto">
291                                    </a>
292                                    <a href="https://play.google.com/store/apps/details?id=com.gullesur.euchre" target="_blank"
293                                        class="inline-block transition-transform hover:scale-105">
294                                        <img src="assets/images/google-play-badge.svg" alt="Get it on Google Play"
295                                            class="h-11 w-auto">
296                                    </a>
297                                </div>
298                            </div>
299                        </div>
300                        <div class="relative bg-black lg:col-span-8 overflow-hidden">
301                            <div
302                                class="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-surface to-transparent z-10 hidden lg:block">
303                            </div>
304                            <div id="carousel-container"
305                                class="flex h-full w-full items-center overflow-x-auto no-scrollbar snap-x snap-mandatory py-8 lg:py-0 scroll-smooth">
306                                <div
307                                    class="w-[85%] md:w-[70%] lg:w-[80%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02]">
308                                    <div class="aspect-video w-full rounded-xl bg-cover bg-center shadow-lg border border-[#333333]"
309                                        data-alt="Just Euchre game interface showing a hand of cards with a dark modern theme"
310                                        style='background-image: url("assets/images/euchre-gameplay.png");'>
311                                        <div
312                                            class="h-full w-full bg-black/40 hover:bg-transparent transition-colors duration-500 flex items-end p-6">
313                                            <span
314                                                class="bg-black/80 px-3 py-1 text-xs text-white rounded backdrop-blur">In-Game
315                                                Match</span>
316                                        </div>
317                                    </div>
318                                </div>
319                                <div
320                                    class="w-[85%] md:w-[70%] lg:w-[80%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02]">
321                                    <div class="aspect-video w-full rounded-xl bg-cover bg-center shadow-lg border border-[#333333]"
322                                        data-alt="Just Euchre main menu with golden accents and ranked mode selection"
323                                        style='background-image: url("assets/images/euchre-lobby.png");'>
324                                        <div
325                                            class="h-full w-full bg-black/40 hover:bg-transparent transition-colors duration-500 flex items-end p-6">
326                                            <span
327                                                class="bg-black/80 px-3 py-1 text-xs text-white rounded backdrop-blur">Lobby
328                                                Interface</span>
329                                        </div>
330                                    </div>
331                                </div>
332                                <div
333                                    class="w-[85%] md:w-[70%] lg:w-[80%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02]">
334                                    <div class="aspect-video w-full rounded-xl bg-cover bg-center shadow-lg border border-[#333333]"
335                                        data-alt="Detailed view of playing cards with custom artwork on a dark felt table"
336                                        style='background-image: url("assets/images/euchre-cards.png");'>
337                                        <div
338                                            class="h-full w-full bg-black/40 hover:bg-transparent transition-colors duration-500 flex items-end p-6">
339                                            <span
340                                                class="bg-black/80 px-3 py-1 text-xs text-white rounded backdrop-blur">Trump
341                                                Picking</span>
342                                        </div>
343                                    </div>
344                                </div>
345                            </div>
346                            <!-- Carousel Controls (Static for now) -->
347                            <div class="absolute bottom-6 right-6 flex gap-2 z-20">
348                                <button id="carousel-prev"
349                                    class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all">
350                                    <span class="material-symbols-outlined">arrow_back</span>
351                                </button>
352                                <button id="carousel-next"
353                                    class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-primary hover:text-black hover:border-primary transition-all">
354                                    <span class="material-symbols-outlined">arrow_forward</span>
355                                </button>
356                            </div>
357                        </div>
358                    </div>
359                </div>
360            </div>
361        </section>
362        <section class="w-full bg-[#0d0d0d] py-24 border-t border-[#333333]" id="just-runes">
363            <div class="mx-auto max-w-7xl px-6">
364                <div class="mb-12 flex items-center justify-between">
365                    <div>
366                        <h2 class="text-3xl font-bold tracking-tight text-white md:text-4xl font-serif-display">Latest
367                            Release</h2>
368                        <p class="mt-2 text-gray-400">Available now on the Google Play Store.</p>
369                    </div>
370                </div>
371                <div class="group relative overflow-hidden rounded-2xl border border-[#333333] bg-surface shadow-2xl">
372                    <div class="grid grid-cols-1 lg:grid-cols-12 min-h-[600px]">
373                        <!-- Content -->
374                        <div
375                            class="flex flex-col justify-center p-8 lg:col-span-4 lg:p-12 z-10 bg-surface order-last lg:order-first">
376                            <div
377                                class="mb-4 h-12 w-12 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400">
378                                <span class="material-symbols-outlined text-3xl">grid_on</span>
379                            </div>
380                            <h3 class="mb-4 text-4xl font-bold text-white tracking-tighter">Just Runes</h3>
381                            <p class="mb-6 text-lg text-gray-400 leading-relaxed">
382                                Unleash the elements. Solve the mystery. Re
382imagining the classic logic puzzle with a
383                                mystical twist.
384                            </p>
385
386                            <div class="space-y-4 mb-8">
387                                <div class="flex items-start gap-3">
388                                    <span
389                                        class="material-symbols-outlined text-indigo-400 shrink-0 mt-1">auto_awesome</span>
390                                    <div>
391                                        <h4 class="text-white font-bold text-sm">Elemental Logic</h4>
392                                        <p class="text-xs text-gray-500">Place runes following the rules of nature. Fire
393                                            burns, Water flows.</p>
394                                    </div>
395                                </div>
396                                <div class="flex items-start gap-3">
397                                    <span
398                                        class="material-symbols-outlined text-indigo-400 shrink-0 mt-1">dark_mode</span>
399                                    <div>
400                                        <h4 class="text-white font-bold text-sm">Atmospheric Design</h4>
401                                        <p class="text-xs text-gray-500">Sleek, distraction-free aesthetic with glowing
402                                            runes.</p>
403                                    </div>
404                                </div>
405                                <div class="flex items-start gap-3">
406                                    <span
407                                        class="material-symbols-outlined text-indigo-400 shrink-0 mt-1">psychology</span>
408                                    <div>
409                                        <h4 class="text-white font-bold text-sm">Pure Logic</h4>
410                                        <p class="text-xs text-gray-500">No guessing. Every puzzle has a single
411                                            solution.</p>
412                                    </div>
413                                </div>
414                            </div>
415
416                            <div class="flex flex-col gap-4">
417                                <div class="flex items-center gap-4 mb-4">
418                                    <div class="flex flex-col">
419                                        <span class="text-xs text-gray-500 uppercase">Rating</span>
420                                        <span class="text-white font-bold flex items-center gap-1">-.- <span
421                                                class="material-symbols-outlined text-xs text-indigo-400">star</span></span>
422                                    </div>
423                                    <div class="h-8 w-px bg-[#333333]"></div>
424                                    <div class="flex flex-col">
425                                        <span class="text-xs text-gray-500 uppercase">Downloads</span>
426                                        <span class="text-white font-bold">50+</span>
427                                    </div>
428                                    <div class="h-8 w-px bg-[#333333]"></div>
429                                    <div class="flex flex-col">
430                                        <span class="text-xs text-gray-500 uppercase">Platform</span>
431                                        <span class="text-white font-bold">Android</span>
432                                    </div>
433                                </div>
434                                <a href="https://play.google.com/store/apps/details?id=com.gullesurgames.justrunes"
435                                    target="_blank"
436                                    class="w-full h-12 rounded-lg bg-indigo-500 font-bold text-white hover:bg-indigo-400 transition-colors flex items-center justify-center gap-2">
437                                    <span class="material-symbols-outlined">shopping_cart</span>
438                                    Buy Now
439                                </a>
440                                <a href="https://play.google.com/store/apps/details?id=com.gullesurgames.justrunes"
441                                    target="_blank" class="inline-block transition-transform hover:scale-105 mx-auto">
442                                    <img src="assets/images/google-play-badge.svg" alt="Get it on Google Play"
443                                        class="h-12 w-auto">
444                                </a>
445                            </div>
446                        </div>
447
448                        <!-- Carousel -->
449                        <div class="relative bg-black lg:col-span-8 overflow-hidden order-first lg:order-last">
450                            <div
451                                class="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-surface to-transparent z-10 hidden lg:block">
452                            </div>
453
454                            <div id="runes-carousel-container"
455                                class="flex h-full w-full items-center overflow-x-auto no-scrollbar snap-x snap-mandatory py-8 lg:py-0 scroll-smooth">
456                                <!-- Slide 1 -->
457                                <div
458                                    class="w-[60%] md:w-[45%] lg:w-[45%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02] flex justify-center">
459                                    <div
460                                        class="aspect-[9/16] h-[500px] rounded-xl bg-cover bg-center shadow-lg border border-[#333333] relative overflow-hidden group/img">
461                                        <img src="assets/images/just-runes/screenshot-1.png"
462                                            alt="Just Runes Gameplay Level 8" class="h-full w-full object-cover">
463                                        <div
464                                            class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors">
465                                        </div>
466                                    </div>
467                                </div>
468                                <!-- Slide 2 -->
469                                <div
470                                    class="w-[60%] md:w-[45%] lg:w-[45%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02] flex justify-center">
471                                    <div
472                                        class="aspect-[9/16] h-[500px] rounded-xl bg-cover bg-center shadow-lg border border-[#333333] relative overflow-hidden group/img">
473                                        <img src="assets/images/just-runes/screenshot-2.png"
474                                            alt="Just Runes Achievements" class="h-full w-full object-cover">
475                                        <div
476                                            class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors">
477                                        </div>
478                                    </div>
479                                </div>
480                                <!-- Slide 3 -->
481                                <div
482                                    class="w-[60%] md:w-[45%] lg:w-[45%] flex-shrink-0 snap-center px-4 transition-transform duration-300 hover:scale-[1.02] flex justify-center">
483                                    <div
484                                        class="aspect-[9/16] h-[500px] rounded-xl bg-cover bg-center shadow-lg border border-[#333333] relative overflow-hidden group/img">
485                                        <img src="assets/images/just-runes/screenshot-3.png"
486                                            alt="Just Runes Title Screen" class="h-full w-full object-cover">
487                                        <div
488                                            class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors">
489                                        </div>
490                                    </div>
491                                </div>
492                            </div>
493
494                            <!-- Carousel Controls -->
495                            <div class="absolute bottom-6 right-6 flex gap-2 z-20">
496                                <button id="runes-carousel-prev"
497                                    class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-indigo-500 hover:border-indigo-500 transition-all">
498                                    <span class="material-symbols-outlined">arrow_back</span>
499                                </button>
500                                <button id="runes-carousel-next"
501                                    class="h-10 w-10 rounded-full bg-black/50 border border-white/20 text-white flex items-center justify-center hover:bg-indigo-500 hover:border-indigo-500 transition-all">
502                                    <span class="material-symbols-outlined">arrow_forward</span>
503                                </button>
504                            </div>
505                        </div>
506                    </div>
507                </div>
508            </div>
509        </section>
510        <section class="w-full bg-background-dark pb-32">
511            <div class="mx-auto max-w-7xl px-6">
512                <div class="mb-16 flex flex-col items-center text-center">
513                    <span
514                        class="text-primary font-bold tracking-widest text-sm uppercase mb-2 font-display">Roadmap</span>
515                    <h2 class="text-3xl font-bold tracking-tight text-white md:text-5xl font-serif-display">On the
516                        Horizon</h2>
517                    <p class="mt-4 max-w-2xl text-gray-400">We are expanding our universe. Here is a glimpse into the
518                        future genres coming to Gullesur Games.</p>
519                </div>
520                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
521                    <!-- Roadmap items mostly unchanged, just ensured non-dead links if possible -->
522                    <div
523                        class="group relative rounded-xl bg-surface p-8 transition-all duration-300 hover:-translate-y-2 hover:bg-surface-highlight border border-transparent hover:border-primary/30 gold-glow">
524                        <div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
525                            <span class="material-symbols-outlined text-[100px] text-white">swords</span>
526                        </div>
527                        <div
528                            class="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-black transition-colors">
529                            <span class="material-symbols-outlined text-3xl">swords</span>
530                        </div>
531                        <h3 class="mb-3 text-xl font-bold text-white font-serif-display">Deep RPGs</h3>
532                        <p class="text-gray-400 text-sm leading-relaxed mb-6">
533                            Immersive narrative-driven experiences where every choice echoes through eternity. Character
534                            building reimagined.
535                        </p>
536                        <span
537                            class="inline-flex items-center text-sm font-bold text-primary group-hover:text-white transition-colors cursor-default">
538                            Coming Soon
539                        </span>
540                    </div>
541                    <div
542                        class="group relative rounded-xl bg-surface p-8 transition-all duration-300 hover:-translate-y-2 hover:bg-surface-highlight border border-transparent hover:border-primary/30 gold-glow">
543                        <div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
544                            <span class="material-symbols-outlined text-[100px] text-white">castle</span>
545                        </div>
546                        <div
547                            class="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-black transition-colors">
548                            <span class="material-symbols-outlined text-3xl">castle</span>
549                        </div>
550                        <h3 class="mb-3 text-xl font-bold text-white font-serif-display">Grand Strategy</h3>
551                        <p class="text-gray-400 text-sm leading-relaxed mb-6">
552                            Complex systems and tactical warfare. Manage empires, economies, and armies in a stark,
553                            unforgiving universe.
554                        </p>
555                        <span
556                            class="inline-flex items-center text-sm font-bold text-primary group-hover:text-white transition-colors cursor-default">
557                            Coming Soon
558                        </span>
559                    </div>
560                    <div
561                        class="group relative rounded-xl bg-surface p-8 transition-all duration-300 hover:-translate-y-2 hover:bg-surface-highlight border border-transparent hover:border-primary/30 gold-glow">
562                        <div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
563                            <span class="material-symbols-outlined text-[100px] text-white">extension</span>
564                        </div>
565                        <div
566                            class="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-lg bg-primary/10 text-primary group-hover:bg-primary group-hover:text-black transition-colors">
567                            <span class="material-symbols-outlined text-3xl">psychology</span>
568                        </div>
569                        <h3 class="mb-3 text-xl font-bold text-white font-serif-display">Mind-Bending Puzzles</h3>
570                        <p class="text-gray-400 text-sm leading-relaxed mb-6">
571                            Abstract challenges designed to test logic and perception. Beautifully minimal,
572                            frustratingly brilliant.
573                        </p>
574                        <span
575                            class="inline-flex items-center text-sm font-bold text-primary group-hover:text-white transition-colors cursor-default">
576                            Coming Soon
577                        </span>
578                    </div>
579                </div>
580            </div>
581        </section>
582        <footer class="mt-auto w-full border-t border-[#333333] bg-[#0a0a0a] py-12">
583            <div class="mx-auto max-w-7xl px-6 flex flex-col md:flex-row justify-between items-center gap-6">
584                <div class="flex flex-col gap-2">
585                    <div class="flex items-center gap-2">
586                        <div
587                            class="relative flex h-6 w-6 items-center justify-center bg-gradient-to-br from-[#fceda4] via-[#f2cc0d] to-[#b8860b] petal-shape shadow-[0_0_10px_rgba(242,204,13,0.3)]">
588                            <div
589                                class="absolute inset-[2px] bg-background-dark petal-shape flex items-center justify-center">
590                                <span class="material-symbols-outlined text-[10px] text-primary">flare</span>
591                            </div>
592                        </div>
593                        <span class="text-lg font-bold text-white font-serif-display">Gullesur Games</span>
594                    </div>
595                    <p class="text-xs text-gray-500">© 2026 Gullesur Games. All rights reserved.</p>
596                </div>
597                <div class="flex gap-6 flex-wrap justify-center md:justify-end">
598                    <a class="text-gray-400 hover:text-primary transition-colors" href="april-major/index.html">April Major Guide</a>
599                    <a class="text-gray-400 hover:text-primary transition-colors" href="privacy-policy.html">Privacy
600                        Policy</a>
601                    <a class="text-gray-400 hover:text-primary transition-colors" href="terms.html">Terms of Service</a>
602                    <a class="text-gray-400 hover:text-primary transition-colors" href="support.html">Support</a>
603                </div>
604                <div class="flex gap-4">
605                    <!-- Removed Social links as no URL provided, preventing dead links. If user has them, they can add back. -->
606                </div>
607            </div>
608        </footer>
609    </div>
610    
610<script>
611        document.addEventListener('DOMContentLoaded', () => {
612            const setupCarousel = (containerId, prevId, nextId) => {
613                const container = document.getElementById(containerId);
614                const prevBtn = document.getElementById(prevId);
615                const nextBtn = document.getElementById(nextId);
616
617                if (container && prevBtn && nextBtn) {
618                    prevBtn.addEventListener('click', () => {
619                        container.scrollBy({ left: -container.clientWidth * 0.8, behavior: 'smooth' });
620                    });
621                    nextBtn.addEventListener('click', () => {
622                        container.scrollBy({ left: container.clientWidth * 0.8, behavior: 'smooth' });
623                    });
624                }
625            };
626
627            // Existing Euchre Carousel
628            setupCarousel('carousel-container', 'carousel-prev', 'carousel-next');
629
630            // New Runes Carousel
631            setupCarousel('runes-carousel-container', 'runes-carousel-prev', 'runes-carousel-next');
632
633            // Announcement Carousel logic
634            const annContainer = document.getElementById('announcement-carousel');
635            const annPrev = document.getElementById('announcement-prev');
636            const annNext = document.getElementById('announcement-next');
637            const annDots = document.querySelectorAll('#announcement-dots button');
638
639            if (annContainer) {
640                const updateDots = () => {
641                    const index = Math.round(annContainer.scrollLeft / annContainer.clientWidth);
642                    annDots.forEach((dot, i) => {
643                        if (i === index) {
644                            dot.className = 'h-2.5 w-8 rounded-full bg-primary transition-all duration-300';
645                        } else {
646                            dot.className = 'h-2.5 w-2.5 rounded-full bg-white/20 hover:bg-white/50 transition-all duration-300';
647                        }
648                    });
649                };
650
651                if (annPrev && annNext) {
652                    annPrev.addEventListener('click', () => {
653                        annContainer.scrollBy({ left: -annContainer.clientWidth, behavior: 'smooth' });
654                    });
655                    annNext.addEventListener('click', () => {
656                        annContainer.scrollBy({ left: annContainer.clientWidth, behavior: 'smooth' });
657                    });
658                }
659
660                annDots.forEach((dot, i) => {
661                    dot.addEventListener('click', () => {
662                        annContainer.scrollTo({ left: i * annContainer.clientWidth, behavior: 'smooth' });
663                    });
664                });
665
666                annContainer.addEventListener('scroll', updateDots);
667            }
668        });
669    </script>
669
670</body>
671
672</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.