PageSourceSearch

https://numbergoup.gg/cosmetics

html numbergoup.gg collected 2026-09-24 11:05:43 UTC 60,010 bytes, 992 lines download raw bytes

1<!DOCTYPE html>
2<html
3    lang="en"
4    class="w-full min-h-screen dark"
5>
6<head>
7    <meta charset="utf-8"/>
8    <meta name="viewport" content="width=device-width, initial-scale=1"/>
9    <meta name="csrf-token" content="s5lAP8R6xg7tHFd6XSz4IkwF6iQ8H6fPHjX3lhi3">
10
11    <title>Number Go Up</title>
12
13    <link rel="icon" type="image/png" href="/img/favico/favicon-96x96.png" sizes="96x96">
14<link rel="icon" type="image/svg+xml" href="/img/favico/favicon.svg">
15<link rel="shortcut icon" href="/img/favico/favicon.ico">
16<link rel="apple-touch-icon" sizes="180x180" href="/img/favico/apple-touch-icon.png">
17<link rel="manifest" href="/img/favico/site.webmanifest">
18<meta name="theme-color" content="#081512">
19    <link rel="preload" as="style" href="https://numbergoup.gg/build/assets/app-BWuoH69w.css" /><link rel="stylesheet" href="https://numbergoup.gg/build/assets/app-BWuoH69w.css" data-navigate-track="reload" />
20    
20<script type="text/javascript" src="/js/vendor/msal-browser.min.js"></script>
20
21
22            
22<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
22
23        
23<script>
24            window.OneSignalDeferred = window.OneSignalDeferred || [];
25            OneSignalDeferred.push(async function (OneSignal) {
26                await OneSignal.init({ appId: '76074049-f5f6-4c70-baac-062bba8759b1' });
27
28                // Tie the browser's push subscription to the NGU user id so the
29                // backend can target it by External ID; drop the association on
30                // logout so a shared browser doesn't leak notifications.
31                                    await OneSignal.logout();
32                            });
33        </script>
33
34    
35            
35<script src="https://cdn.usefathom.com/script.js" data-site="JQZSFTIB" defer></script>
35
36        
36<script>
37            document.addEventListener('livewire:navigated', () => {
38                if (window.fathom) { window.fathom.trackPageview(); }
39            });
40        </script>
40
41    <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.list-item][wire\:loading\.list-item], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}dialog#livewire-error::backdrop {background-color: rgba(0, 0, 0, .6);}</style>
42</head>
43<body
44    class="w-full min-h-screen bg-abyss-950 font-inter text-white antialiased"
45>
46<div
47    class="sticky top-0 z-50 bg-abyss-950/60 backdrop-blur-xl py-3 px-4 lg:px-8">
48    <nav class="container m-auto relative flex items-center justify-between gap-x-5 min-h-11">
49        <a wire:navigate href="https://numbergoup.gg"
50           class="flex items-center gap-x-2.5 shrink-0 transition-opacity duration-200 hover:opacity-80">
51            <img class="size-8" src="https://numbergoup.gg/img/logo.png" alt="Number Go Up Logo"/>
52            <span class="hidden sm:inline font-display text-xl tracking-tight text-gold-100">Number Go Up</span>
53        </a>
54
55        <div class="absolute left-1/2 -translate-x-1/2 hidden lg:flex items-center gap-x-1 rounded-full bg-abyss-900/70 ring-1 ring-abyss-700/50 backdrop-blur px-1.5 py-1.5 shadow-sm">
56                            <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg">
57    Home
58</a>
59            
60            
61            <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-semibold text-seafoam-200 bg-abyss-700 shadow-sm ring-1 ring-abyss-600/70 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/cosmetics">
62    Cosmetics
63</a>
64
65            <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/smugglers-market">
66    Smuggler's Market
67</a>
68
69            <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/events">
70    Events
71</a>
72
73            <a wire:navigate class="inline-flex items-center rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200" href="https://numbergoup.gg/tools">
74    Tools
75</a>
76
77                        <div class="group/more relative">
78                <button
79                    type="button"
80                    id="more-menu-button"
81                    aria-expanded="false"
82                    aria-haspopup="true"
83                    class="inline-flex items-center gap-x-1 rounded-full px-4 py-1.5 text-sm font-medium text-seafoam-200/70 hover:text-gold-100 hover:bg-abyss-700/60 focus:outline-hidden transition-all duration-200"
84                >
85                    More
86                    <svg class="size-4 -rotate-90 transition-transform duration-200 group-hover/more:translate-y-
86px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
87  <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
88</svg>
89                </button>
90
91                <div class="absolute left-1/2 -translate-x-1/2 hidden origin-top pt-4 group-hover/more:block z-40">
92                    <div
93                        class="w-48 divide-y divide-abyss-700/70 rounded-2xl bg-abyss-900/95 backdrop-blur-xl shadow-lg ring-1 ring-abyss-700/50 focus:outline-hidden"
94                        role="menu"
95                        aria-orientation="vertical"
96                        aria-labelledby="more-menu-button"
97                        tabindex="-1"
98                    >
99                        <div class="group py-1" role="none">
100                            <a wire:navigate href="https://numbergoup.gg/tools/custom-seas-servers">
101                                <button
102	type="button"
103	class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200"
104	role="menuitem"
105	tabindex="-1"
106>
107	<svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
108  <circle cx="12" cy="12" r="9.25" />
109  <path d="M15.6 8.4 13.5 13.5 8.4 15.6 10.5 10.5 15.6 8.4Z" fill="currentColor" stroke="none" />
110  <circle cx="12" cy="12" r="1" fill="currentColor" stroke="none" />
111</svg>
112	Custom Seas
113</button>                            </a>
114                        </div>
115                        <div class="group py-1" role="none">
116                            <a href="https://numbergoup.gg#faq">
117                                <button
118	type="button"
119	class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200"
120	role="menuitem"
121	tabindex="-1"
122>
123	<svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
124  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
125</svg>	FAQ
126</button>                            </a>
127                        </div>
128                        <div class="group py-1" role="none">
129                            <a wire:navigate href="https://numbergoup.gg/support">
130                                <button
131	type="button"
132	class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200"
133	role="menuitem"
134	tabindex="-1"
135>
136	<svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
137    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
138</svg>
139	Support
140</button>                            </a>
141                        </div>
142                        <div class="group py-1" role="none">
143                            <a wire:navigate href="https://numbergoup.gg/release-notes">
144                                <button
145	type="button"
146	class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200"
147	role="menuitem"
148	tabindex="-1"
149>
150	<svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
151  <path fill-rule="evenodd" d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.
151036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z" clip-rule="evenodd" />
152</svg>	Release Notes
153</button>                            </a>
154                        </div>
155                        <div class="group py-1" role="none">
156                            <a wire:navigate href="https://numbergoup.gg/about">
157                                <button
158	type="button"
159	class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200"
160	role="menuitem"
161	tabindex="-1"
162>
163	<svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
164    <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
165</svg>
166	About
167</button>                            </a>
168                        </div>
169                        <div class="group py-1" role="none">
170                            <a href="https://ko-fi.com/numbergoup" target="_blank" rel="noopener">
171                                <button
172	type="button"
173	class="cursor-pointer px-4 py-2 w-full flex items-center group-hover:bg-abyss-700/60 font-medium text-seafoam-100 group-hover:text-gold-100 text-sm transition-colors duration-200"
174	role="menuitem"
175	tabindex="-1"
176>
177	<svg class="mr-3 h-5 w-5 text-seafoam-200/70 group-hover:text-seafoam-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
178    <path fill-rule="evenodd"
179          d="M2.25 7.5A1.5 1.5 0 0 1 3.75 6h12a1.5 1.5 0 0 1 1.5 1.5v.75h1.125a3.375 3.375 0 1 1 0 6.75h-1.36a6.75 6.75 0 0 1-6.265 4.5h-3a6.75 6.75 0 0 1-6.75-6.75V7.5Zm15 5.25h1.125a1.875 1.875 0 1 0 0-3.75H17.25v3.75Z"
180          clip-rule="evenodd"/>
181    <path d="M4.5 21a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 0 1.5h-9A.75.75 0 0 1 4.5 21Z"/>
182</svg>
183	Buy me a Coffee
184</button>                            </a>
185                        </div>
186                    </div>
187                </div>
188            </div>
189        </div>
190
191        <div x-data="{ sidebarOpen: false }" x-on:sidebar-state.window="sidebarOpen = $event.detail.open"
192             class="ml-auto flex items-center gap-x-3">
193            
194                            <div class="hidden md:flex items-center gap-x-3">
195                    <a href="/login/microsoft"
196                       class="rounded-full px-5 py-2 text-sm font-semibold text-seafoam-100 ring-1 ring-inset ring-abyss-600 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200">
197                        Login
198                    </a>
199
200                    <a wire:navigate href="https://numbergoup.gg/signup"
201                       class="group inline-flex items-center gap-x-2 rounded-full bg-gradient-to-b from-seafoam-500 to-seafoam-600 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-seafoam-600/25 ring-1 ring-inset ring-white/15 hover:from-seafoam-400 hover:to-seafoam-500 hover:shadow-seafoam-500/40 hover:-translate-y-px transition-all duration-200">
202                        <svg class="size-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
203  <path fill-rule="evenodd" d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 0 1 .75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 0 1 9.75 22.5a.75.75 0 0 1-.75-.75v-4.131A15.838 15.838 0 0 1 6.382 15H2.25a.75.75 0 0 1-.75-.75 6.75 6.75 0 0 1 7.815-6.666ZM15 6.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" clip-rule="evenodd" />
204  <path d="M5.26 17.242a.75.75 0 1 0-.897-1.203 5.243 5.243 0 0 0-2.05 5.022.75.75 0 0 0 .625.627 5.243 5.243 0 0 0 5.022-2.051.75.75 0 1 0-1.202-.897 3.744 3.744 0 0 1-3.008 1.51c0-1.23.592-2.323 1.51-3.008Z" />
205</svg>
206                        Sign Up
207                    </a>
208                </div>
209            
210            <button
211                type="button"
212                x-on:click="sidebarOpen ? $dispatch('close-sidebar') : $dispatch('open-sidebar', ['partials.mobile-navigation'])"
213                :aria-expanded="sidebarOpen"
214                class="lg:hidden p-2 -mr-2 rounded-full text-seafoam-200 hover:bg-abyss-800 transition-colors cursor-pointer"
215            >
216                <span class="sr-only">Toggle menu</span>
217                <template x-if="!sidebarOpen">
218                    <svg
219    class="size-6 stroke-gray-100"
220    xmlns="http://www.w3.org/2000/svg"
221    fill="none"
222    viewBox="0 0 24 24"
223    stroke-width="1.5"
224    stroke="currentColor"
225>
226    <path
227        stroke-linecap="round"
228        stroke-linejoin="round"
229        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
230    />
231</svg>
232                </template>
233                <template x-if="sidebarOpen">
234                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
235                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
236                    </svg>
237                </template>
238            </button>
239        </div>
240    </nav>
241</div>
242
243<main class="w-full inline-block m-auto min-h-screen pb-20 text-gray-100">
244    <div wire:key="lw-3437951620-0-0" wire:snapshot="{&quot;data&quot;:{&quot;component&quot;:null,&quot;properties&quot;:null},&quot;memo&quot;:{&quot;id&quot;:&quot;D90ZfFRpowjKOdFRhzPr&quot;,&quot;name&quot;:&quot;layout.sidebar&quot;,&quot;path&quot;:&quot;cosmetics&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;682ff077a6889c9a6aa0e63681ac0967aa243b12116a957f4f6ed7f332cd6bf9&quot;}" wire:effects="[]" wire:id="D90ZfFRpowjKOdFRhzPr" wire:name="layout.sidebar"
245    x-cloak
246    x-data="{ show: false }"
247    x-init="
248        $watch('show', (value) => {
249            if (value) {
250                document.body.classList.add('overflow-y-hidden')
251            } else {
252                document.body.classList.remove('overflow-y-hidden')
253            }
254            $dispatch('sidebar-state', { open: value })
255        })
256    "
257    x-on:open-sidebar.window="
258        () => {
259            $wire.component = $event.detail[0]
260            $wire.properties = $event.detail[1]
261            $wire.$refresh()
262            show = true
263        }
264    "
265    x-on:close-sidebar.window="show = false"
266    x-on:close.stop="show = false"
267    x-on:keydown.escape.window="show = false"
268    x-show="show"
269    id="sidebar-container"
270    class="fixed inset-0 z-40"
271    aria-labelledby="slide-over-title"
272    role="dialog"
273    aria-modal="true"
274>
275    
276    <div class="fixed inset-0 flex justify-end" x-on:click.self="show = false">
277        
278        <div
279            x-show="show"
280            class="absolute inset-0 bg-black/50 backdrop-blur-sm"
281            x-transition:enter="duration-300 ease-out"
282            x-transition:enter-start="opacity-0"
283            x-transition:enter-end="opacity-100"
284            x-transition:leave="duration-200 ease-in"
285            x-transition:leave-start="opacity-100"
286            x-transition:leave-end="opacity-0"
287        ></div>
288
289        
290        <div
291            x-show="show"
292            class="relative w-screen max-w-sm"
293            x-transition:enter="transition duration-300 ease-out"
294            x-transition:enter-start="translate-x-full"
295            x-transition:enter-end="translate-x-0"
296            x-transition:leave="transition duration-200 ease-in"
297            x-transition:leave-start="translate-x-0"
298            x-transition:leave-end="translate-x-full"
299        >
300            <div class="flex h-full flex-col bg-abyss-900 shadow-2xl">
301                
302                <div class="flex items-center justify-between px-5 py-4 border-b border-abyss-800">
303                    <div class="flex items-center gap-x-3">
304                        <img class="size-8" src="https://numbergoup.gg/img/logo.png" alt="Number Go Up Logo"/>
305                        <span class="text-lg font-bold text-white">Number Go Up</span>
306                    </div>
307                    <button
308                        type="button"
309                        x-on:click="show = false"
310                        class="close-button p-2 -mr-2 rounded-lg text-seafoam-300/60 hover:text-seafoam-100 hover:bg-abyss-700 transition-colors cursor-pointer"
311                    >
312                        <span class="sr-only">Close menu</span>
313                        <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
314                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
315                        </svg>
316                    </button>
317                </div>
318
319                
320                <div class="flex-1 overflow-y-auto px-3 py-4">
321                    <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->                </div>
322            </div>
323        </div>
324    </div>
325</div>    <div
326    x-cloak
327    x-init="
328        $watch('show', (on) => {
329            if (on) {
330                let numberRuns = showFor / 100 - 1
331
332                progressBarInterval = setInterval(() => {
333                    let runningWidth =
334                        progressBar.style.width || progressBar.offsetWidth
335
336                    let decreaseBy = container.offsetWidth / numberRuns
337
338                    progressBar.style.width = parseInt(runningWidth) - decreaseBy + 'px'
339                }, 100)
340            } else {
341                clearInterval(progressBarInterval)
342            }
343        })
344    "
345    x-data="{
346        show: false,
347        type: 'success',
348        title: null,
349        message: null,
350        showFor: 3500,
351        size: 'small',
352        themes: {
353            'success': {
354                'icon': 'text-seafoam-400',
355                'ring': 'ring-seafoam-500/30',
356                'glow': 'shadow-seafoam-950/40',
357                'bar': 'bg-gradient-to-r from-seafoam-600 to-seafoam-400',
358            },
359            'error': {
360                'icon': 'text-rose-400',
361                'ring': 'ring-rose-500/30',
362                'glow': 'shadow-rose-950/40',
363                'bar': 'bg-gradient-to-r from-rose-600 to-rose-400',
364            },
365        },
366        timeout: null,
367        container: document.getElementById('large-status-message-container'),
368        progressBar: document.getElementById('status-message-progress-bar'),
369        progressBarInterval: null,
370    }"
371    x-on:show-message.window="
372        () => {
373            clearTimeout(timeout)
374            title = event.detail[0].title || null
375            message = event.detail[0].message || 'Saved'
376            type = event.detail[0].type || 'success'
377            size = event.detail[0].size || 'small'
378            showFor = event.detail[0].showFor || showFor
379            show = true
380            timeout = setTimeout(() => {
381                show = false
382            }, showFor)
383        }
384    "
385    x-on:hide-message.window="show = false"
386    x-show="show"
387    class="z-50"
388>
389    
390    <div
391        x-show="size == 'small' && show"
392        class="fixed left-1/2 top-5 z-50 flex min-w-fit -translate-x-1/2 -translate-y-0 transform items-center gap-x-3 overflow-hidden rounded-2xl border px-4 py-3 shadow-lg ring-1 backdrop-blur-xl transition-all border-abyss-600/70 bg-abyss-900/90"
393        :class="themes[type].ring + ' ' + themes[type].glow"
394        x-transition:enter="transition duration-300 ease-out"
395        x-transition:enter-start="-translate-y-3 scale-95 opacity-0"
396        x-transition:enter-end="translate-y-0 scale-100 opacity-100"
397        x-transition:leave="transition duration-200 ease-in"
398        x-transition:leave-start="translate-y-0 scale-100 opacity-100"
399        x-transition:leave-end="-translate-y-3 scale-95 opacity-0"
400    >
401        <div class="shrink-0" :class="themes[type].icon">
402            <span x-show="type == 'success'">
403                <svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
404  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
405</svg>            </span>
406            <span x-show="type == 'error'">
407                <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
408  <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
409</svg>            </span>
410        </div>
411        <p
412            x-text="message"
413            class="whitespace-nowrap text-sm font-medium text-gold-100"
414        ></p>
415    </div>
416
417    
418    <div
419        id="large-status-message-container"
420        x-show="size == 'large' && show"
421        class="fixed left-1/2 top-5 z-50 w-11/12 min-w-fit max-w-md -translate-x-1/2 transform overflow-hidden rounded-2xl border shadow-xl ring-1 backdrop-blur-xl transition-all border-abyss-600/70 bg-abyss-900/90"
422        :class="themes[type].ring + ' ' + themes[type].glow"
423        x-transition:enter="transition duration-300 ease-out"
424        x-transition:enter-start="-translate-y-3 scale-95 opacity-0"
425        x-transition:enter-end="translate-y-0 scale-100 opacity-100"
426        x-transition:leave="transition duration-200 ease-in"
427        x-transition:leave-start="translate-y-0 scale-100 opacity-100"
428        x-transition:leave-end="-translate-y-3 scale-95 opacity-0"
429    >
430        <div class="flex p-4">
431            <div class="shrink-0" :class="themes[type].icon">
432                <span x-show="type == 'success'">
433                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
434  <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
435</svg>                </span>
436                <span x-show="type == 'error'">
437                    <svg class="size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
438  <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
439</svg>                </span>
440            </div>
441            <div class="ml-3 flex-1">
442                <h3
443                    class="text-sm font-semibold text-gold-100"
444                    x-text="title"
445                    x-show="title"
446                ></h3>
447                <div class="text-sm text-gold-100/70" :class="title ? 'mt-1' : ''">
448                    <p x-text="message"></p>
449                </div>
450            </div>
451            <div class="ml-auto pl-3">
452                <div class="-mx-1.5 -my-1.5">
453                    <button
454                        @click="show = false"
455                        type="button"
456                        class="inline-flex cursor-pointer rounded-lg p-1.5 transition text-gold-100/50 hover:bg-abyss-800/70 hover:text-gold-100"
457                    >
458                        <span class="sr-only">Dismiss</span>
459                        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
460  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
461</svg>                    </button>
462                </div>
463            </div>
464        </div>
465        <div class="h-1 w-full bg-abyss-950/70">
466            <div
467                id="status-message-progress-bar"
468                class="h-1 w-full rounded-r-full"
469                :class="themes[type].bar"
470            ></div>
471        </div>
472    </div>
473</div>
474    <div wire:snapshot="{&quot;data&quot;:{&quot;criteria&quot;:null,&quot;selectedReward&quot;:null},&quot;memo&quot;:{&quot;id&quot;:&quot;pARE3zEs3bLP6YsNz0T8&quot;,&quot;name&quot;:&quot;pages.cosmetics.index&quot;,&quot;path&quot;:&quot;cosmetics&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;711d002051b31576194264da12fa9db6238233f6a7bc4471b1cc68af51c3d8a0&quot;}" wire:effects="[]" wire:id="pARE3zEs3bLP6YsNz0T8" wire:name="pages.cosmetics.index">
475    
476    <section class="relative overflow-hidden">
477        <div class="absolute inset-0 -z-10 hero-glow"></div>
478        <div class="absolute inset-0 -z-10 map-grain opacity-50"></div>
479        <div class="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-48 bg-gradient-to-b from-transparent to-abyss-950"></div>
480        <div class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-px bg-gradient-to-r from-transparent via-gold-500/30 to-transparent"></div>
481
482        <div class="max-w-2xl mx-auto px-5 pt-12 lg:pt-20 pb-24 lg:pb-32 text-center">
483            <p class="text-sm font-semibold uppercase tracking-[0.25em] text-gold-400">The Vault</p>
484            <h1 class="mt-4 font-display text-4xl lg:text-6xl tracking-tight text-gold-100">Cosmetics</h1>
485            <p class="mt-5 text-base lg:text-lg text-seafoam-200/80">
486                Search every reward in Sea of Thieves and uncover exactly which commendation unlocks it.
487            </p>
488
489            <div class="relative mt-9">
490                <div class="pointer-events-none absolute -inset-2 -z-10 rounded-3xl bg-seafoam-500/10 blur-xl"></div>
491                <input
492                    wire:model.live.debounce.400ms="criteria"
493                    class="w-full rounded-2xl border-0 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600 px-12 py-4 text-base text-seafoam-50 placeholder:text-seafoam-200/40 shadow-lg shadow-black/20 outline-hidden focu
493s:ring-2 focus:ring-seafoam-500/50 transition-all duration-200"
494                    type="text"
495                    placeholder="i.e. Obsidian, Gold Hoarders, Dawn Hunter, etc."
496                    autocomplete="off"
497                    spellcheck="false"
498                    aria-label="Search for an item"
499                    autofocus/>
500                <div class="pointer-events-none absolute inset-y-0 left-4 flex items-center" aria-hidden="true">
501                    <svg class="size-5 stroke-seafoam-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
502     stroke="currentColor">
503    <path stroke-linecap="round" stroke-linejoin="round"
504          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
505</svg>
506                </div>
507                <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->            </div>
508
509            <!--[if BLOCK]><![endif]-->                <div class="mt-6 flex flex-wrap items-center justify-center gap-2">
510                    <span class="text-sm text-seafoam-200/50">Try:</span>
511                    <!--[if BLOCK]><![endif]-->                        <button wire:click="$set('criteria', 'Obsidian')"
512                                class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer">
513                            Obsidian
514                        </button>
515                                            <button wire:click="$set('criteria', 'Gold Hoarders')"
516                                class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer">
517                            Gold Hoarders
518                        </button>
519                                            <button wire:click="$set('criteria', 'Dawn Hunter')"
520                                class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer">
521                            Dawn Hunter
522                        </button>
523                                            <button wire:click="$set('criteria', 'Ghost')"
524                                class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer">
525                            Ghost
526                        </button>
527                                            <button wire:click="$set('criteria', 'Reaper')"
528                                class="rounded-full px-3.5 py-1.5 text-sm font-medium text-seafoam-100 bg-abyss-800/70 ring-1 ring-inset ring-abyss-600/70 hover:ring-seafoam-500/60 hover:text-seafoam-300 transition-all duration-200 cursor-pointer">
529                            Reaper
530                        </button>
531                    <!--[if ENDBLOCK]><![endif]-->                </div>
532            <!--[if ENDBLOCK]><![endif]-->        </div>
533    </section>
534
535    
536    <div class="max-w-6xl mx-auto px-5 pb-20">
537        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->    </div>
538
539    <div
540    x-data="{ show: false }"
541    x-on:click="show = false"
542    x-on:open-lightbox.window="show = true"
543    x-on:close-lightbox.window="show = false"
544    x-on:close.stop="show = false"
545    x-on:keydown.escape.window="show = false"
546    x-show="show"
547    id="lightbox-container"
548    class="fixed inset-0 z-40 overflow-y-auto px-4 py-6 sm:px-0"
549    style="display: none"
550>
551    <div
552        x-show="show"
553        class="fixed inset-0 transform transition-all"
554        x-on:click="show = false"
555        x-transition:enter="duration-300 ease-out"
556        x-transition:enter-start="opacity-0"
557        x-transition:enter-end="opacity-100"
558        x-transition:leave="duration-200 ease-in"
559        x-transition:leave-start="opacity-100"
560        x-transition:leave-end="opacity-0"
561    >
562        <div
563            class="absolute inset-0 z-40 bg-abyss-950/80 backdrop-blur-sm"
564        ></div>
565    </div>
566
567    <div
568        x-show="show"
569        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-2xl ring-1 ring-gold-500/25 shadow-2xl shadow-black/50 transition-all sm:mx-auto"
570        x-transition:enter="duration-300 ease-out"
571        x-transition:enter-start="opacity-0 sm:scale-95"
572        x-transition:enter-end="opacity-100 sm:scale-100"
573        x-transition:leave="duration-200 ease-in"
574        x-transition:leave-start="opacity-100 sm:scale-100"
575        x-transition:leave-end="opacity-0 sm:scale-95"
576    >
577        <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->    </div>
578</div>
579</div>
580    </main>
581
582<footer class="border-t border-abyss-700/60 bg-abyss-900/40">
583    <div class="container m-auto px-4 py-14 lg:px-8 lg:py-16">
584        <div class="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_repeat(3,minmax(0,1fr))] lg:gap-8">
585            
586            <div class="max-w-sm">
587                <a wire:navigate href="https://numbergoup.gg"
588                   class="flex items-center gap-x-2.5 transition-opacity duration-200 hover:opacity-80">
589                    <img class="size-8" src="https://numbergoup.gg/img/logo.png" alt="Number Go Up Logo"/>
590                    <span class="font-display text-xl tracking-tight text-gold-100">Number Go Up</span>
591                </a>
592                <p class="mt-4 text-sm leading-6 text-seafoam-300/70">
593                    Your Sea of Thieves companion. Track your commendations, achievements, chest,
594                    cosmetics, guilds, fleet, events, and the Smuggler's Market all in one place
595                    &mdash; and watch the number go up.
596                </p>
597                <div class="mt-6">
598                    <div class="flex flex-wrap items-center gap-3 justify-center lg:justify-start">
599                    <a href="https://apps.apple.com/us/app/number-go-up-pirates-log/id6784696493" target="_blank" rel="noopener noreferrer"
600               class="transition-transform duration-200 hover:-translate-y-0.5">
601                <img class="h-[44px] w-[122px] object-contain"
602                     src="https://numbergoup.gg/img/marketing/download-numbergoup-on-the-app-store.webp"
603                     alt="Download Number Go Up on the App Store"/>
604            </a>
605                            <a href="https://play.google.com/store/apps/details?id=com.hopperlabs.numbergoup" target="_blank" rel="noopener noreferrer"
606               class="transition-transform duration-200 hover:-translate-y-0.5">
607                <img class="h-[44px] w-[122px] object-contain"
608                     src="https://numbergoup.gg/img/marketing/download-numbergoup-in-the-android-play-store.png"
609                     alt="Get Number Go Up on Google Play"/>
610            </a>
611            </div>
612                </div>
613            </div>
614
615            
616            <div>
617                <p class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-seafoam-300/40">Explore</p>
618                <ul class="mt-4 flex flex-col gap-y-3 text-sm">
619                    <li><a wire:navigate href="https://numbergoup.gg/cosmetics" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Cosmetics</a></li>
620                    <li><a wire:navigate href="https://numbergoup.gg/smugglers-market" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Smuggler's Market</a></li>
621                    <li><a wire:navigate href="https://numbergoup.gg/events" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Events</a></li>
622                    <li><a wire:navigate href="https://numbergoup.gg/tools" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Tools</a></li>
623                    <li><a wire:navigate href="https://numbergoup.gg/tools/custom-seas-servers" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Custom Seas</a></li>
624                </ul>
625            </div>
626
627            
628            <div>
629                <p class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-seafoam-300/40">Help</p>
630                <ul class="mt-4 flex flex-col gap-y-3 text-sm">
631                    <li><a wire:navigate href="https://numbergoup.gg/support" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Support</a></li>
632                    <li><a wire:navigate href="https://numbergoup.gg/about" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">About</a></li>
633                    <li><a wire:navigate href="https://numbergoup.gg/release-notes" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Release Notes</a></li>
634                    <li><a href="https://ko-fi.com/numbergoup" target="_blank" rel="noopener" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Buy me a Coffee</a></li>
635                </ul>
636            </div>
637
638            
639            <div>
640                <p class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-seafoam-300/40">Legal</p>
641                <ul class="mt-4 flex flex-col gap-y-3 text-sm">
642                    <li><a wire:navigate href="https://numbergoup.gg/privacy-policy" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Privacy Policy</a></li>
643                    <li><a wire:navigate href="https://numbergoup.gg/data-deletion" class="text-seafoam-300/70 transition-colors duration-200 hover:text-gold-300">Data Deletion</a></li>
644                </ul>
645            </div>
646        </div>
647
648        
649        <div class="mt-12 flex flex-col gap-y-4 border-t border-abyss-800/70 pt-6 text-xs text-seafoam-300/50 sm:flex-row sm:items-center sm:justify-between">
650            <div class="flex flex-col items-center gap-y-1 text-center sm:flex-row sm:items-center sm:gap-x-4 sm:text-left">
651                <p class="flex items-center gap-x-1">
652                    Made by <strong class="font-semibold text-seafoam-300/70">Mr Mancer</strong>
653                    <svg class="size-3.5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
654    <path
655        d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"/>
656</svg>
657                </p>
658            </div>
659            <p class="max-w-md text-center sm:text-right">
660                Not affiliated with, endorsed by, or associated with Rare Ltd or Microsoft.
661            </p>
662        </div>
663    </div>
664</footer>
665
666<div x-persist="pirate-chatbot">
667    
668    <div
669    x-cloak
670    x-data="aiChatbot(true, false, null)"
671    x-show="visible"
672    x-on:keydown.escape.window="open = false"
673    x-on:polly-visibility-changed.window="visible = $event.detail.visible; if (! visible) { open = false; }"
674>
675    
676    <div x-show="!open" class="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4">
677        
678        <div
679            x-show="!dismissed"
680            x-transition:leave="transition ease-in duration-200"
681            x-transition:leave-start="opacity-100"
682            x-transition:leave-end="opacity-0"
683            class="relative bg-abyss-900/95 backdrop-blur-xl ring-1 ring-gold-500/25 rounded-2xl pl-4 pr-6 py-3 shadow-lg shadow-abyss-950/40 max-w-64 text-left"
684        >
685            <button x-on:click.stop="dismiss()" class="absolute top-1.5 right-2 text-seafoam-200/70 hover:text-seafoam-300 text-sm leading-none cursor-pointer">&times;</button>
686            <p class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-gold-400">
687                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm3.5-11.5L10 11l-1.5 4.5L14 13l1.5-4.5Z"/></svg>
688                Pirate Assistant
689            </p>
690            <p class="mt-1 text-sm font-bold text-gold-100">
690Charting a course, matey?</p>
691            <p class="mt-0.5 text-xs text-seafoam-200/70">Tap the compass and I'll help ye with commendations, lore &amp; more.</p>
692            
693            <div class="absolute -bottom-2 right-7">
694                <div class="w-4 h-4 bg-abyss-900/95 border-b border-r border-gold-500/25 rotate-45"></div>
695            </div>
696        </div>
697
698        
699        <button
700            x-transition:enter="transition ease-out duration-200"
701            x-transition:enter-start="opacity-0 scale-75"
702            x-transition:enter-end="opacity-100 scale-100"
703            x-on:click="toggle()"
704            aria-label="Open the Pirate Assistant"
705            class="group relative w-16 h-16 cursor-pointer"
706        >
707            
708            <span aria-hidden="true" class="absolute inset-0 rounded-full fab-pulse"></span>
709
710            
711            <span aria-hidden="true" class="absolute -inset-1 rounded-full compass-ring opacity-80 group-hover:opacity-100 transition-opacity duration-300"></span>
712
713            
714            <span class="absolute inset-0 rounded-full overflow-hidden flex items-center justify-center bg-gradient-to-b from-abyss-700 to-abyss-950 ring-2 ring-inset ring-gold-400/60 shadow-lg shadow-abyss-950/50 transition-all duration-300 group-hover:ring-gold-300 group-hover:scale-105">
715                <img src="/img/ai-chatbot.png" alt="" class="w-10 h-10 object-contain -scale-x-100 drop-shadow-md transition-transform duration-300 group-hover:scale-110">
716                
717                <span aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent"></span>
718            </span>
719
720            
721            <span aria-hidden="true" class="absolute top-0.5 right-0.5 flex h-3.5 w-3.5">
722                <span class="absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75 animate-ping"></span>
723                <span class="relative inline-flex h-3.5 w-3.5 rounded-full bg-seafoam-400 ring-2 ring-abyss-900"></span>
724            </span>
725        </button>
726    </div>
727
728    
729    <div
730        x-show="open"
731        x-transition:enter="transition ease-out duration-300"
732        x-transition:enter-start="opacity-0 translate-y-4 scale-95"
733        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
734        x-transition:leave="transition ease-in duration-200"
735        x-transition:leave-start="opacity-100 translate-y-0 scale-100"
736        x-transition:leave-end="opacity-0 translate-y-4 scale-95"
737        class="fixed inset-0 sm:inset-auto sm:bottom-6 sm:right-6 z-50 w-full sm:w-96 h-[100dvh] sm:h-[600px] flex flex-col bg-abyss-950/95 backdrop-blur-xl rounded-none sm:rounded-2xl shadow-2xl shadow-abyss-950/30 ring-0 sm:ring-1 sm:ring-gold-500/25 overflow-hidden"
738    >
739        
740        <div class="relative flex items-center gap-3 px-4 py-3 bg-abyss-900/80 border-b border-abyss-700/60">
741            
742            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-gold-500/40 to-transparent"></div>
743
744            
745            <span class="relative w-11 h-11 shrink-0 rounded-full overflow-hidden flex items-center justify-center bg-gradient-to-b from-abyss-700 to-abyss-950 ring-2 ring-inset ring-gold-400/60 shadow-md shadow-abyss-950/40">
746                <img src="/img/ai-chatbot.png" alt="Pirate Assistant" class="w-7 h-7 object-contain drop-shadow">
747                <span aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent"></span>
748            </span>
749
750            <div class="flex-1">
751                <h3 class="font-display text-lg leading-tight tracking-tight text-gold-100">Polly</h3>
752                <p class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-gold-400">
753                    <span class="relative flex h-1.5 w-1.5">
754                        <span class="absolute inline-flex h-full w-full rounded-full bg-seafoam-400 opacity-75 animate-ping"></span>
755                        <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-seafoam-500"></span>
756                    </span>
757                    Sea of Thieves Guide
758                </p>
759            </div>
760            <button x-on:click.stop="open = false" aria-label="Close" class="p-1.5 rounded-full text-seafoam-200/70 hover:text-seafoam-300 hover:bg-abyss-800/60 transition-colors cursor-pointer">
761                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
762                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
763                </svg>
764            </button>
765        </div>
766
767        
768        <div x-ref="messages" class="relative flex-1 overflow-y-auto px-4 py-4 space-y-5">
769            
770            <div class="pointer-events-none absolute inset-0 map-grain opacity-40 opacity-60"></div>
771
772            <template x-for="(msg, i) in messages" :key="i">
773                <div class="relative" x-show="msg.role === 'user' || msg.text">
774                    
775                    <template x-if="msg.role === 'user'">
776                        <div class="flex justify-end">
777                            <div
778                                class="bg-gradient-to-b from-gold-300 to-gold-400 text-abyss-950 rounded-2xl px-4 py-2.5 max-w-[85%] text-sm leading-relaxed break-words shadow-sm shadow-gold-600/20 [&_a]:underline [&_a]:font-semibold"
779                                x-html="formatMessage(msg.text)"
780                            ></div>
781                        </div>
782                    </template>
783                    
784                    <template x-if="msg.role === 'bot'">
785                        <div>
786                            <img src="/img/ai-chatbot.png" alt="Polly" class="w-8 h-8 object-contain drop-shadow mb-1.5">
787                            <div
788                                class="text-[15px] leading-relaxed break-words text-seafoam-50 [&>p:first-child]:indent-0 [&_a]:text-seafoam-300 [&_a]:underline [&_p]:my-0 [&_p+p]:mt-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-2 [&_li]:my-1 [&_li]:pl-1 [&_strong]:font-bold [&_strong]:text-white [&_em]:italic [&_code]:bg-abyss-950/60 [&_code]:px-1 [&_code]:rounded [&_code]:text-xs [&_pre]:bg-abyss-950 [&_pre]:p-2 [&_pre]:rounded [&_pre]:my-2 [&_pre]:overflow-x-auto [&_h1]:font-display [&_h1]:text-base [&_h1]:my-1.5 [&_h2]:font-display [&_h2]:text-sm [&_h2]:my-1.5 [&_h3]:font-semibold [&_h3]:my-1 [&_blockquote]:border-l-2 [&_blockquote]:border-gold-400/50 [&_blockquote]:pl-2 [&_blockquote]:italic [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_td]:px-2 [&_td]:py-1"
789                                x-html="formatMessage(msg.text)"
790                            ></div>
791                        </div>
792                    </template>
793                </div>
794            </template>
795
796            
797            <div x-show="loading && (!messages.length || !messages[messages.length - 1].text)" class="flex items-center gap-2.5">
798                <img src="/img/ai-chatbot.png" alt="Polly" class="w-8 h-8 object-contain animate-bounce" style="animation-duration: 1.2s">
799                <span class="text-sm text-seafoam-200/60">Polly is thinking&hellip;</span>
800            </div>
801        </div>
802
803        
804        <div class="relative p-3 border-t border-abyss-700/60 bg-abyss-900/80">
805            <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gold-500/40 to-transparent"></div>
806            <form x-on:submit.prevent="send()" class="flex items-center gap-2">
807                <input
808                    x-ref="input"
809                    x-model="question"
810                    type="text"
811                    :placeholder="disabled ? 'Polly isn\'t takin\' yer questions.' : 'Speak yer mind, sailor…'"
812                    maxlength="500"
813                    :disabled="disabled"
814                    class="flex-1 !rounded-full !py-2.5 !px-4 text-sm !ring-1 !ring-inset !ring-abyss-700/70 !bg-abyss-800/70 focus:!ring-2 focus:!ring-gold-500/40 disabled:opacity-50 disabled:cursor-not-allowed"
815                >
816                <button
817                    type="submit"
818                    :disabled="disabled || loading || cooldown || !question.trim()"
819                    aria-label="Send"
820                    class="shrink-0 grid place-items-center w-10 h-10 rounded-full bg-gradient-to-b from-gold-400 to-gold-500 hover:from-gold-300 hover:to-gold-400 ring-1 ring-inset ring-white/15 disabled:opacity-40 text-abyss-950 transition-all duration-200 cursor-pointer disabled:cursor-not-allowed"
821                >
822                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
823                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 19V5M5 12l7-7 7 7"/>
824                    </svg>
825                </button>
826            </form>
827            <p class="mt-2 text-center text-[10px] text-seafoam-200/50">Not affiliated with Rare Ltd or Microsoft. AI-generated responses may contain mistakes.</p>
828        </div>
829    </div>
830</div>
831
832<script>
833document.addEventListener('alpine:init', () => {
834    Alpine.data('aiChatbot', (visible = true, disabled = false, disabledMessage = null) => ({
835        visible,
836        disabled,
837        disabledMessage: disabledMessage || 'Arrr, I\'ll not be takin\' yer questions, matey. Yer access to Polly has been revoked.',
838        open: false,
839        dismissed: localStorage.getItem('chatbot-dismissed') === '1',
840        messages: [],
841        question: '',
842        loading: false,
843        cooldown: false,
844        welcomed: false,
845        newConversation: true,
846        firstWelcome: 'Ahoy, matey! I be Polly, yer trusty pirate guide for Sea of Thieves. Here be the sorts o\' questions I can answer:\n\n- **Commendations** \u2014 how to earn \u2018em, what they unlock, and which ye still be missin\u2019\n- **Lore & tall tales** \u2014 the stories, factions, and secrets o\u2019 the seas\n- **Strategies & tips** \u2014 voyages, emissaries, combat, and gold-makin\u2019\n- **Yer own progress** \u2014 ask about yer stats, reputation, and what to chase next\n\nWhat be on yer mind, sailor?',
847        returnWelcome: 'Arrr, what can I do for ye?',
848
849        formatMessage(text) {
850            return window.renderPirateMessage(text);
851        },
852
853        dismiss() {
854            this.dismissed = true;
855            localStorage.setItem('chatbot-dismissed', '1');
856        },
857
858        toggle() {
859            this.open = !this.open;
860            this.dismiss();
861            if (this.open) {
862                if (!this.welcomed) {
863                    if (this.disabled) {
864                        this.typeWelcome(this.disabledMessage);
865                    } else {
866                        const seen = localStorage.getItem('pirate-assistant-welcomed');
867                        const message = seen ? this.returnWelcome : this.firstWelcome;
868                        this.typeWelcome(message);
869                        if (!seen) localStorage.setItem('pirate-assistant-welcomed', '1');
870                    }
871                    this.welcomed = true;
872                }
873                this.$nextTick(() => this.$refs.input?.focus());
874            }
875        },
876
877        async typeWelcome(message) {
878            this.messages.push({ role: 'bot', text: '' });
879            const idx = this.messages.length - 1;
880            for (let i = 0; i < message.length; i++) {
881                this.messages[idx].text += message[i];
882                await new Promise(r => setTimeout(r, 15));
883                this.scrollToBottom();
884            }
885        },
886
887        scrollToBottom() {
888            this.$nextTick(() => {
889                const el = this.$refs.messages;
890                if (el) el.scrollTop = el.scrollHeight;
891            });
892        },
893
894        async send() {
895            const question = this.question.trim();
896            if (!question || this.loading || this.cooldown || this.disabled) return;
897
898            this.messages.push({ role: 'user', text: question });
899            this.question = '';
900            this.loading = true;
901            this.scrollToBottom();
902
903            this.messages.push({ role: 'bot', text: '' });
904            const botIdx = this.messages.length - 1;
905
906            try {
907                const response = await fetch('/pirate-chat/stream', {
908                    method: 'POST',
909                    headers: {
910                        'Content-Type': 'application/json',
911                        'Accept': 'text/event-stream',
912                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
913                    },
914                    body: JSON.stringify({ question, new_conversation: this.newConversation }),
915                });
916
917                if (response.status === 419) {
918                    this.messages[botIdx].text = 'Session expired, please refresh the page.';
919                    this.loading = false;
920                    return;
921                }
922
923                // An admin can revoke access mid-session; lock the composer the
924                // moment the server says so rather than on the next page load.
925                if (response.status === 403) {
926                    const body = await response.json().catch(() => ({}));
927                    this.disabled = true;
928                    this.disabledMessage = body.message || this.disabledMessage;
929                    this.messages[botIdx].text = this.disabledMessage;
930                    this.loading = false;
931                    return;
932                }
933
934                if (!response.ok) {
935                    this.messages[botIdx].text = 'Arrr, something went wrong! Try again, matey.';
936                    this.loading = false;
937                    return;
938                }
939
940                const reader = response.body.getReader();
941                const decoder = new TextDecoder();
942                let buffer = '';
943
944                while (true) {
945                    const { done, value } = await reader.read();
946                    if (done) break;
947
948                    buffer += decoder.decode(value, { stream: true });
949                    const lines = buffer.split('\n');
950                    buffer = lines.pop();
951
952                    for (const line of lines) {
953                        if (!line.startsWith('data: ')) continue;
954                        const data = line.slice(6);
955
956                        if (data === '[DONE]') break;
957
958                        try {
959                            const parsed = JSON.parse(data);
960                            if (parsed.type === 'text_delta' && parsed.delta) {
961                                this.messages[botIdx].text += parsed.delta;
962                                this.scrollToBottom();
963                            }
964                        } catch (e) {}
965                    }
966                }
967
968                if (this.messages[botIdx].text) {
969                    this.messages[botIdx].text = this.messages[botIdx].text.trim();
970                }
971            } catch (e) {
972                this.messages[botIdx].text = 'Arrr, something went wrong! Try again, matey.';
973            }
974
975            this.loading = false;
976            this.newConversation = false;
977            this.cooldown = true;
978            setTimeout(() => this.cooldown = false, 3000);
979            this.scrollToBottom();
980            this.$nextTick(() => this.$refs.input?.focus());
981        },
982    }));
983});
984</script>
984
985</div>
986
987<script src="https://numbergoup.gg/flux/flux.min.js?id=1ea4120f" data-navigate-once></script>
vendor: 1 bytes, line 987
987
988<script src="https://numbergoup.gg/livewire-8a07a834/livewire.min.js?id=1c586ae0"   data-csrf="s5lAP8R6xg7tHFd6XSz4IkwF6iQ8H6fPHjX3lhi3" data-module-url="https://numbergoup.gg/livewire-8a07a834" data-update-uri="https://numbergoup.gg/livewire-8a07a834/update" data-navigate-once="true"></script>
vendor: 1 bytes, line 988
988
989<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a40150cb1f2c72d1',t:'MTc5MDI0Nzk0Mg=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
989</body>
990
991<link rel="modulepreload" as="script" href="https://numbergoup.gg/build/assets/app-BnVb_3Ow.js" />
991<script type="module" src="https://numbergoup.gg/build/assets/app-BnVb_3Ow.js" data-navigate-track="reload"></script>
991
992</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.