-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
250 lines (249 loc) · 60.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html data-theme = "light" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100% Orange Juice Avatar Creator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon-32x32.png">
<meta content="100% Orange Juice Avatar Creator" property="og:title">
<meta content="An online avatar creator for the game 100% Orange Juice, fully in your web browser!" property="og:description">
<meta content="100% Orange Juice Avatar Creator" property="og:site_name">
<meta content='https://pixepchief.github.io/100oj/images/siteLogo.png' property='og:image'>
<meta name="theme-color" content="#FFBE64">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
<script>
tailwind.config = {
theme: {
extend: {
animation: {
"jello-horizontal": "jello-horizontal 0.8s ease both infinite",
"spin": "spin 5.5s linear infinite"
},
keyframes: {
"jello-horizontal": {
"0%": {
transform: "scale3d(1, 1, 1)"
},
"50%": {
transform: "scale3d(1, 0.985, 1)"
},
"100%": {
transform: "scale3d(1, 1, 1)"
}
},
"spin": {
from: {
transform: "rotate(0deg)"
},
to: {
transform: "rotate(360deg)"
}
}
},
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body id = "tsparticles" class = "w-full h-screen">
<div class = "fixed mt-2 w-full h-12 bg-[#FFBE64] flex justify-center md:justify-between z-50">
<div class = "flex flex-row gap-4 mx-4 items-center">
<img title = "Yo" class = "md:block hidden w-2/12" src="./images/siteLogo.png" alt="">
<a id = "musicOption" class = "md:block hidden text-white forceBtn hover:text-lg transition-all cursor-pointer">Music Disabled</a>
<a id = "particlesBtn" class = "md:block hidden text-white forceBtn hover:text-lg transition-all cursor-pointer">Particles Enabled</a>
<a id = "sfxBtn" class = "md:block hidden text-white forceBtn hover:text-lg transition-all cursor-pointer">SFX Enabled</a>
</div>
<img class = "w-[200px] h-[200px] absolute z-30 md:-right-24 -bottom-16 animate-spin" src="./images/Citral.png" alt="">
<!-- <div class = "relative rotate-90 !z-[20] h-full top-32 w-54 flex flex-col items-center justify-center gap-8 z-50">
<a class = "md:block bg-white w-full text-center p-4 rounded-r-3xl border-[6px] border-t-4 border-b-4 border-l-0 text-[#606060] btnClass border-[#FFCF94] text-2xl relative right-2 hover:right-0 cursor-pointer" >Avatar Creator</a>
<a href = "./deck/" class = "md:block bg-white w-full text-center p-4 rounded-r-3xl border-[6px] border-t-4 border-b-4 border-l-0 text-[#606060] btnClass border-[#FFCF94] text-2xl brightness-75 relative right-2 hover:right-0 cursor-pointer" >Deck Builder</a>
</div> -->
</div>
<div class = "fixed h-full w-54 flex flex-col items-center justify-center gap-2 z-50">
<a class = "md:block hidden bg-white w-full text-center p-4 rounded-r-3xl border-[6px] border-t-4 border-b-4 border-l-0 text-[#606060] btnClass border-[#FFCF94] text-2xl relative right-2 hover:right-0 cursor-pointer" >Avatar Creator</a>
<a href = "./deck/" class = "hidden md:block bg-white w-full text-center p-4 rounded-r-3xl border-[6px] border-t-4 border-b-4 border-l-0 text-[#606060] btnClass border-[#FFCF94] text-2xl brightness-75 relative right-2 hover:right-0 cursor-pointer" >Deck Builder</a>
</div>
<div class = "fixed w-full h-full pb-8 flex flex-col justify-end gap-2 z-[40]">
<p class = "px-4 bg-black text-white text-xl bg-opacity-30 rounded-r-3xl py-1 forceBtn w-fit">Change how your avatar looks.</p>
<p class = "md:hidden block px-4 bg-black text-white text-xs bg-opacity-30 rounded-r-3xl py-1 forceBtn w-fit">For the best experience, please use this website on PC.</p>
<p class = "px-4 bg-black text-white text-sm bg-opacity-30 rounded-r-3xl py-1 forceBtn w-fit">Created by @PixepChief | Alpha</p>
</div>
<div class = "md:flex hidden fixed w-full h-full pb-8 flex flex-col justify-end items-end z-[40]">
<div class = "flex flex-row-reverse bg-white rounded-3xl border-4 border-[#FFCF94] btnClass mr-8 p-4 w-1/4 justify-between items-center">
<div class = "w-full">
<img src="./images/suguri46_00_04.png" alt="">
</div>
<div class = "flex flex-col">
<h2 class = "text-xl">Help needed!</h2>
<p class = "text-sm">Are you a 100%OJ modder? If so, I need your help with the hair gradients for all the units, feel free to send me a message at @pixepchief on Discord!</p>
</div>
</div>
</div>
<div class = "w-full h-full fixed flex items-center justify-center z-[40]">
<div class = "bg-white rounded-3xl border-4 border-[#FFCF94] btnClass p-0 md:p-4">
<div class = "w-full flex justify-center relative top-4">
<div class = "relative origin-bottom bg-white animate-jello-horizontal">
<img id = "alphamask" class = "absolute z-[30] mix-blend-screen invert" src="" alt="">
<img id = "glassOverlay" class = "absolute z-[47]" src="" alt="">
<img id = "accessory" class = "absolute z-[45]" src="" alt="">
<img id = "currentChar" class = "z-[15] bg-transparent h-[256px] w-[256px] relative" src="./images/marc_00_00.png" alt="">
<!-- <img id = "currentCharSec" class = "z-[14] bg-transparent h-[256px] w-[256px] absolute top-0" src="" alt=""> -->
<img id = "secondaryChar" class = "z-[15] bg-transparent top-0 right-12 absolute brightness-50" src="" alt="">
</div>
<div class = "grid grid-cols-2 grid-rows-4 gap-3 h-fit relative right-4 md:right-0 md:static z-50">
<div class = "">
<img class = "cursor-pointer windowBtn" data-window = "poses" src="./images/PosesIcon.png" alt="">
<div id = "poses" class = "z-50 hidden w-8/12 flex-wrap gap-1 px-4 -top-12 ml-4 flex-row absolute btnClass bg-white rounded-3xl border-4 border-[#FFCF94] p-2">
</div>
</div>
<div>
<img class = "cursor-pointer windowBtn" data-window = "clothes1" src="./images/UnitColorsIcon.png" alt="">
<div id = "clothes1" class = "z-50 hidden w-8/12 gap-1 px-4 -top-18 md:-top-12 ml-4 flex-row flex-wrap absolute btnClass bg-white rounded-3xl border-4 border-[#FFCF94] p-2">
</div>
</div>
<div>
<img id = "clothes2Btn" class = "cursor-pointer opacity-50 windowBtn" data-window = "clothes2" src="./images/UnitColorsIcon2.png" alt="">
<div id = "clothes2" class = "z-50 hidden w-8/12 gap-1 px-4 -top-12 ml-4 flex-row flex-wrap absolute btnClass bg-white rounded-3xl border-4 border-[#FFCF94] p-2"></div>
</div>
<img class = "cursor-pointer opacity-50" src="./images/HairColorsIcon.png" alt="">
<div>
<img class = "cursor-pointer windowBtn" data-window = "accessoriesDiv" src="./images/AccessoriesIcon.png" alt="">
<div id = "accessoriesDiv" class = "z-50 hidden w-[150px] md:w-8/12 gap-1 px-4 -top-12 ml-4 flex-row flex-wrap absolute btnClass bg-white rounded-3xl border-4 border-[#FFCF94] p-2">
<img data-hat = '69' class = 'cursor-pointer accessoryBtn' src="./images/1_Icon.png" alt="">
</div>
</div>
<div>
<img class = "cursor-pointer windowBtn" data-window = "glasses" src="./images/GlassesIcon.png" alt="">
<div id = "glasses" class = "z-50 hidden w-[100px] md:w-7/12 gap-1 px-4 top-16 ml-4 flex-row flex-wrap absolute btnClass bg-white rounded-3xl border-4 border-[#FFCF94] p-2">
</div>
</div>
<div id = "headBtn" class = "cursor-pointer relative hidden">
<img id = "charSwitchIco" class = "z-[18] absolute w-[48px] h-[51px]" src="./images/Mimyuuhead.png" alt="">
<img class = "absolute top-0 w-full h-full z-[17]" src="./images/Empty_Icon.png" alt="">
</div>
</div>
</div>
<div class = "flex flex-row gap-2 items-center">
<img class = "hover:-translate-y-1 z-50 w-[40px] md:w-[50px]" src="./images/PlayerPlateIcon.png" alt="">
<img class = "hover:-translate-y-1 z-50 w-[40px] md:w-[50px]" src="./images/PetsIcon.png" alt="">
<a id = "changeCharBtn" onclick = "characterSelection.showModal();" class = "cursor-pointer w-fit h-fit mx-2 md:pt-2 md:mx-6 text-[#606060]">Change Character</a>
<dialog id="characterSelection" class="modal bg-black bg-opacity-70">
<div class = "modal-box bg-transparent shadow-none max-w-[88rem] h-[50rem] m-auto">
<div class="frontpagecharacterchart" style="border-radius: .7em;">
<div class="frontpagecharacterwrapper hoverimage" style="position:relative;">
<p class = "grid grid-cols-4 md:block"><span class = "static md:absolute" style="left:20em; top:0em;"><span class="character-icon" data-card2="Kyupita" style="white-space:pre;"><span title="Kyupita"><span class="ajaxttlink -Kyupita"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/9/9f/Kyupita.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:28em; top:0em;"><span class="character-icon" data-card2="Mimyuu (Jailbird)" style="white-space:pre;"><span title="Mimyuu (Jailbird)"><span class="ajaxttlink -Mimyuu__Jailbird_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/f/f6/Mimyuu_%28Jailbird%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:36em; top:0em;"><span class="character-icon" data-card2="Teotoratta" style="white-space:pre;"><span title="Teotoratta"><span class="ajaxttlink -Teotoratta"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/3/34/Teotoratta.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:52em; top:0em;"><span class="character-icon" data-card2="Alicianrone" style="white-space:pre;"><span title="Alicianrone"><span class="ajaxttlink -Alicianrone"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d1/Alicianrone.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:60em; top:0em;"><span class="character-icon" data-card2="Natsumi (Sweet Blogger)" style="white-space:pre;"><span title="Natsumi (Sweet Blogger)"><span class="ajaxttlink -Natsumi__Sweet_Blogger_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/f/f2/Natsumi_%28Sweet_Blogger%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:68em; top:0em;"><span class="character-icon" data-card2="Chris" style="white-space:pre;"><span title="Chris"><span class="ajaxttlink -Chris"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/3/31/Chris.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:16em; top:4em;"><span class="character-icon" data-card2="Saki (Sweet Maker)" style="white-space:pre;"><span title="Saki (Sweet Maker)"><span class="ajaxttlink -Saki__Sweet_Maker_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/2e/Saki_%28Sweet_Maker%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:24em; top:4em;"><span class="character-icon" data-card2="QP (Dangerous)" style="white-space:pre;"><span title="QP (Dangerous)"><span class="ajaxttlink -QP__Dangerous_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/1c/QP_%28Dangerous%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:32em; top:4em;"><span class="character-icon" data-card2="Tomato" style="white-space:pre;"><span title="Tomato & Mimyuu"><span class="ajaxttlink -multiple" data-tt-tags="["Tomato", "Mimyuu"]"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/8/86/Tomato_%26_Mimyuu.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:40em; top:4em;"><span class="character-icon" data-card2="Ceoreparque" style="white-space:pre;"><span title="Ceoreparque"><span class="ajaxttlink -Ceoreparque"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d3/Ceoreparque.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:48em; top:4em;"><span class="character-icon" data-card2="Miusaki" style="white-space:pre;"><span title="Miusaki"><span class="ajaxttlink -Miusaki"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/b/b0/Miusaki.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:56em; top:4em;"><span class="character-icon" data-card2="Yuki (Dangerous)" style="white-space:pre;"><span title="Yuki (Dangerous)"><span class="ajaxttlink -Yuki__Dangerous_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/77/Yuki_%28Dangerous%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:64em; top:4em;"><span class="character-icon" data-card2="Yuuki" style="white-space:pre;"><span title="Yuuki"><span class="ajaxttlink -Yuuki"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/e5/Yuuki.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:72em; top:4em;"><span class="character-icon" data-card2="Krilalaris (Pajamas)" style="white-space:pre;"><span title="Krilalaris (Pajamas)"><span class="ajaxttlink -Krilalaris__Pajamas_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/1e/Krilalaris_%28Pajamas%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:12em; top:8em;"><span class="character-icon" data-card2="Hime (Moonlight)" style="white-space:pre;"><span title="Hime (Moonlight)"><span class="ajaxttlink -Hime__Moonlight_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/9/97/Hime_%28Moonlight%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:20em; top:8em;"><span class="character-icon" data-card2="Suguri (Ver.2)" style="white-space:pre;"><span title="Suguri (Ver.2)"><span class="ajaxttlink -Suguri__Ver.2_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/10/Suguri_%28Ver.2%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:28em; top:8em;"><span class="character-icon" data-card2="QP" style="white-space:pre;"><span title="QP"><span class="ajaxttlink -QP"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/73/QP.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:36em; top:8em;"><span class="character-icon" data-card2="Store Manager" style="white-space:pre;"><span title="Store Manager"><span class="ajaxttlink -Store_Manager"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d8/Store_Manager.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:44em; top:8em;"><span class="character-icon" data-card2="Sweet Breaker" style="white-space:pre;"><span title="Sweet Breaker"><span class="ajaxttlink -Sweet_Breaker"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/21/Sweet_Breaker.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:52em; top:8em;"><span class="character-icon" data-card2="Syura" style="white-space:pre;"><span title="Syura"><span class="ajaxttlink -Syura"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d6/Syura.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:60em; top:8em;"><span class="character-icon" data-card2="Yuki" style="white-space:pre;"><span title="Yuki"><span class="ajaxttlink -Yuki"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d3/Yuki.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:68em; top:8em;"><span class="character-icon" data-card2="Sora class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"& Sham (Cuties)" style="white-space:pre;"><span title="Sora class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"& Sham (Cuties)"><span class="ajaxttlink -Sora___Sham__Cuties_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/7c/Sora_%26_Sham_%28Cuties%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:0em; top:12em;"><span class="character-icon" data-card2="Hyper Ellie" style="white-space:pre;"><span title="Hyper Ellie"><span class="ajaxttlink -Hyper_Ellie"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/1a/Hyper_Ellie.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:16em; top:12em;"><span class="character-icon" data-card2="Suguri (46 Billion Years)" style="white-space:pre;"><span title="Suguri (46 Billion Years)"><span class="ajaxttlink -Suguri__46_Billion_Years_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/78/Suguri_%2846_Billion_Years%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:24em; top:12em;"><span class="character-icon" data-card2="Suguri" style="white-space:pre;"><span title="Suguri"><span class="ajaxttlink -Suguri"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d1/Suguri.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:32em; top:12em;"><span class="character-icon" data-card2="Kyousuke" style="white-space:pre;"><span title="Kyousuke"><span class="ajaxttlink -Kyousuke"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/72/Kyousuke.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:40em; top:12em;"><span class="character-icon" data-card2="Mei" style="white-space:pre;"><span title="Mei"><span class="ajaxttlink -Mei"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/6f/Mei.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:48em; top:12em;"><span class="character-icon" data-card2="Natsumi" style="white-space:pre;"><span title="Natsumi"><span class="ajaxttlink -Natsumi"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/5/55/Natsumi.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:56em; top:12em;"><span class="character-icon" data-card2="Nico" style="white-space:pre;"><span title="Nico"><span class="ajaxttlink -Nico"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/0/04/Nico.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:64em; top:12em;"><span class="character-icon" data-card2="Star Breaker" style="white-space:pre;"><span title="Star Breaker"><span class="ajaxttlink -Star_Breaker"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/63/Star_Breaker.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:72em; top:12em;"><span class="character-icon" data-card2="Hoshino Reika" style="white-space:pre;"><span title="Hoshino Reika"><span class="ajaxttlink -Hoshino_Reika"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d1/Hoshino_Reika.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:4em; top:16em;"><span class="character-icon" data-card2="Mio (Festive)" style="white-space:pre;"><span title="Mio (Festive)"><span class="ajaxttlink -Mio__Festive_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/17/Mio_%28Festive%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:12em; top:16em;"><span class="character-icon" data-card2="Shifu" style="white-space:pre;"><span title="Shifu"><span class="ajaxttlink -Shifu"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/f/fa/Shifu.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:20em; top:16em;"><span class="character-icon" data-card2="Shifu Robot" style="white-space:pre;"><span title="Shifu Robot"><span class="ajaxttlink -Shifu_Robot"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/2d/Shifu_Robot.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:28em; top:16em;"><span class="character-icon" data-card2="Saki" style="white-space:pre;"><span title="Saki"><span class="ajaxttlink -Saki"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d0/Saki.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:36em; top:16em;"><span class="character-icon" data-card2="Chicken" style="white-space:pre;"><span title="Chicken"><span class="ajaxttlink -Chicken"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/a/a3/Chicken.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:44em; top:16em;"><span class="character-icon" data-card2="Kiriko" style="white-space:pre;"><span title="Kiriko"><span class="ajaxttlink -Kiriko"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/f/fb/Kiriko.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:52em; top:16em;"><span class="character-icon" data-card2="Krilalaris" style="white-space:pre;"><span title="Krilalaris"><span class="ajaxttlink -Krilalaris"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/4/43/Krilalaris.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:60em; top:16em;"><span class="character-icon" data-card2="Sora" style="white-space:pre;"><span title="Sora"><span class="ajaxttlink -Sora"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/9/99/Sora.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:68em; top:16em;"><span class="character-icon" data-card2="Tsih" style="white-space:pre;"><span title="Tsih"><span class="ajaxttlink -Tsih"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/60/Tsih.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:76em; top:16em;"><span class="character-icon" data-card2="Bourbon" style="white-space:pre;"><span title="Bourbon"><span class="ajaxttlink -Bourbon"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/5/57/Bourbon.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:0em; top:20em;"><span class="character-icon" data-card2="Mother Poppo" style="white-space:pre;"><span title="Mother Poppo"><span class="ajaxttlink -Mother_Poppo"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/5/53/Mother_Poppo.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:8em; top:20em;"><span class="character-icon" data-card2="Halena" style="white-space:pre;"><span title="Halena"><span class="ajaxttlink -Halena"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/0/0e/Halena.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:16em; top:20em;"><span class="character-icon" data-card2="Sumika" style="white-space:pre;"><span title="Sumika"><span class="ajaxttlink -Sumika"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/74/Sumika.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:24em; top:20em;"><span class="character-icon" data-card2="Robo Ball" style="white-space:pre;"><span title="Robo Ball"><span class="ajaxttlink -Robo_Ball"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/b/b5/Robo_Ball.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:32em; top:20em;"><span class="character-icon" data-card2="NoName" style="white-space:pre;"><span title="NoName (Normal & Head)"><span class="ajaxttlink -multiple" data-tt-tags="["NoName (Normal)", "NoName (Head)"]"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/9/91/NoName_%28Normal_%26_Head%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:40em; top:20em;"><span class="character-icon" data-card2="Aru (Scramble)" style="white-space:pre;"><span title="Aru (Scramble)"><span class="ajaxttlink -Aru__Scramble_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/7c/Aru_%28Scramble%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:48em; top:20em;"><span class="character-icon" data-card2="Arthur" style="white-space:pre;"><span title="Arthur"><span class="ajaxttlink -Arthur"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/5/50/Arthur.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:56em; top:20em;"><span class="character-icon" data-card2="Nath" style="white-space:pre;"><span title="Nath"><span class="ajaxttlink -Nath"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/8/87/Nath.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:64em; top:20em;"><span class="character-icon" data-card2="Sora (Military)" style="white-space:pre;"><span title="Sora (Military)"><span class="ajaxttlink -Sora__Military_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/77/Sora_%28Military%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:72em; top:20em;"><span class="character-icon" data-card2="Grain" style="white-space:pre;"><span title="Grain"><span class="ajaxttlink -Grain"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/66/Grain.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:80em; top:20em;"><span class="character-icon" data-card2="Malt" style="white-space:pre;"><span title="Malt"><span class="ajaxttlink -Malt"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/de/Malt.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:4em; top:24em;"><span class="character-icon" data-card2="Sweet Creator" style="white-space:pre;"><span title="Sweet Creator"><span class="ajaxttlink -Sweet_Creator"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/74/Sweet_Creator.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:12em; top:24em;"><span class="character-icon" data-card2="Maynie" style="white-space:pre;"><span title="Maynie"><span class="ajaxttlink -Maynie"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/66/Maynie.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:20em; top:24em;"><span class="character-icon" data-card2="Mio" style="white-space:pre;"><span title="Mio"><span class="ajaxttlink -Mio"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/23/Mio.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:28em; top:24em;"><span class="character-icon" data-card2="Nanako" style="white-space:pre;"><span title="Nanako"><span class="ajaxttlink -Nanako"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/62/Nanako.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:36em; top:24em;"><span class="character-icon" data-card2="Kyoko" style="white-space:pre;"><span title="Kyoko"><span class="ajaxttlink -Kyoko"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/a/a1/Kyoko.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:44em; top:24em;"><span class="character-icon" data-card2="Aru" style="white-space:pre;"><span title="Aru"><span class="ajaxttlink -Aru"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/db/Aru.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:52em; top:24em;"><span class="character-icon" data-card2="Mira" style="white-space:pre;"><span title="Mira"><span class="ajaxttlink -Mira"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/2a/Mira.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:60em; top:24em;"><span class="character-icon" data-card2="Sham" style="white-space:pre;"><span title="Sham"><span class="ajaxttlink -Sham"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/b/bc/Sham.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:68em; top:24em;"><span class="character-icon" data-card2="Islay" style="white-space:pre;"><span title="Islay"><span class="ajaxttlink -Islay"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/d/d3/Islay.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:76em; top:24em;"><span class="character-icon" data-card2="Fernet (Noble)" style="white-space:pre;"><span title="Fernet (Noble)"><span class="ajaxttlink -Fernet__Noble_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/ec/Fernet_%28Noble%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:0em; top:28em;"><span class="character-icon" data-card2="Dark Lulu" style="white-space:pre;"><span title="Dark Lulu"><span class="ajaxttlink -Dark_Lulu"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/a/a8/Dark_Lulu.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:8em; top:28em;"><span class="character-icon" data-card2="Cook" style="white-space:pre;"><span title="Cook"><span class="ajaxttlink -Cook"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/61/Cook.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:16em; top:28em;"><span class="character-icon" data-card2="Ellie" style="white-space:pre;"><span title="Ellie"><span class="ajaxttlink -Ellie"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/ef/Ellie.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:24em; top:28em;"><span class="character-icon" data-card2="Tomomo" style="white-space:pre;"><span title="Tomomo"><span class="ajaxttlink -multiple" data-tt-tags="["Tomomo (Unsoftened)", "Tomomo (Softened)"]"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/e1/Tomomo.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:32em; top:28em;"><span class="character-icon" data-card2="Kae" style="white-space:pre;"><span title="Kae"><span class="ajaxttlink -Kae"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/c/c9/Kae.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:40em; top:28em;"><span class="character-icon" data-card2="Iru" style="white-space:pre;"><span title="Iru"><span class="ajaxttlink -Iru"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/3/33/Iru.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:48em; top:28em;"><span class="character-icon" data-card2="Alte" style="white-space:pre;"><span title="Alte"><span class="ajaxttlink -Alte"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/20/Alte.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:56em; top:28em;"><span class="character-icon" data-card2="Fernet" style="white-space:pre;"><span title="Fernet"><span class="ajaxttlink -Fernet"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/25/Fernet.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:64em; top:28em;"><span class="character-icon" data-card2="Sherry" style="white-space:pre;"><span title="Sherry"><span class="ajaxttlink -Sherry"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/60/Sherry.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:72em; top:28em;"><span class="character-icon" data-card2="Tequila" style="white-space:pre;"><span title="Tequila"><span class="ajaxttlink -Tequila"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/9/9f/Tequila.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:80em; top:28em;"><span class="character-icon" data-card2="Mescal" style="white-space:pre;"><span title="Mescal"><span class="ajaxttlink -Mescal"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/3/38/Mescal.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:4em; top:32em;"><span class="character-icon" data-card2="Watty" style="white-space:pre;"><span title="Watty"><span class="ajaxttlink -Watty"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/7/72/Watty.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:12em; top:32em;"><span class="character-icon" data-card2="Arnelle" style="white-space:pre;"><span title="Arnelle"><span class="ajaxttlink -Arnelle"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/b/ba/Arnelle.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:20em; top:32em;"><span class="character-icon" data-card2="Tomomo (Casual + Sweet Eater)" style="white-space:pre;"><span title="Tomomo (Casual + Sweet Eater)"><span class="ajaxttlink -multiple" data-tt-tags="["Tomomo (Casual)", "Tomomo (Sweet Eater)"]"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/0/0f/Tomomo_%28Casual_%26_Sweet_Eater%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:28em; top:32em;"><span class="character-icon" data-card2="Marie Poppo" style="white-space:pre;"><span title="Marie Poppo"><span class="ajaxttlink -Marie_Poppo"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/5/52/Marie_Poppo.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:36em; top:32em;"><span class="character-icon" data-card2="Hime" style="white-space:pre;"><span title="Hime"><span class="ajaxttlink -Hime"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/3/35/Hime.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:44em; top:32em;"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()" title="Random Character"><img alt="Random Character" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/e5/Center_Select.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span>
<span class = "static md:absolute" style="left:52em; top:32em;"><span class="character-icon" data-card2="Marc" style="white-space:pre;"><span title="Marc"><span class="ajaxttlink -Marc"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/f/f9/Marc.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:60em; top:32em;"><span class="character-icon" data-card2="Peat" style="white-space:pre;"><span title="Peat"><span class="ajaxttlink -Peat"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/26/Peat.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:68em; top:32em;"><span class="character-icon" data-card2="Seagull" style="white-space:pre;"><span title="Seagull"><span class="ajaxttlink -Seagull"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/9/9a/Seagull.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:76em; top:32em;"><span class="character-icon" data-card2="Lone Rider" style="white-space:pre;"><span title="Lone Rider"><span class="ajaxttlink -Lone_Rider"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/6/62/Lone_Rider.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:0em; top:36em;"><span class="character-icon" data-card2="Kai (Hero)" style="white-space:pre;"><span title="Kai (Hero)"><span class="ajaxttlink -Kai__Hero_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/f/fd/Kai_%28Hero%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:8em; top:36em;"><span class="character-icon" data-card2="Pomeranius" style="white-space:pre;"><span title="Pomeranius"><span class="ajaxttlink -Pomeranius"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/4/4d/Pomeranius.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:16em; top:36em;"><span class="character-icon" data-card2="Lulu" style="white-space:pre;"><span title="Lulu"><span class="ajaxttlink -Lulu"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/1f/Lulu.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:24em; top:36em;"><span class="character-icon" data-card2="Marie Poppo (Mixed)" style="white-space:pre;"><span title="Marie Poppo (Mixed)"><span class="ajaxttlink -Marie_Poppo__Mixed_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/5/5a/Marie_Poppo_%28Mixed%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:32em; top:36em;"><span class="character-icon" data-card2="Kai" style="white-space:pre;"><span title="Kai"><span class="ajaxttlink -Kai"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/29/Kai.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:40em; top:36em;"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()" title="Random Character"><img alt="Random Character" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/e5/Center_Select.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span>
<span class = "static md:absolute" style="left:48em; top:36em;"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()" title="Random Character"><img alt="Random Character" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/e/e5/Center_Select.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span>
<span class = "static md:absolute" style="left:56em; top:36em;"><span class="character-icon" data-card2="Marc (Pilot)" style="white-space:pre;"><span title="Marc (Pilot)"><span class="ajaxttlink -Marc__Pilot_"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/8/8e/Marc_%28Pilot%29.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:64em; top:36em;"><span class="character-icon" data-card2="Flying Castle" style="white-space:pre;"><span title="Flying Castle"><span class="ajaxttlink -Flying_Castle"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/c/c3/Flying_Castle.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
<span class = "static md:absolute" style="left:72em; top:36em;"><span class="character-icon" data-card2="Merchant" style="white-space:pre;"><span title="Merchant"><span class="ajaxttlink -Merchant"><a class = "cursor-pointer hover:brightness-150 transition-all" onclick = "characterSelection.close()"><img alt="" src="https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/1/19/Merchant.png" decoding="async" width="95" height="95" data-file-width="95" data-file-height="95"></a></span></span></span></span>
</p>
</div>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<img class = "w-[40px] md:w-[58px]" src="./images/Default_Homemark_Icon.png" alt="">
<img class = "w-[40px] md:w-[58px]" src="./images/Default_Dice.png" alt="">
</div>
</div>
</div>
<script src="./particles.js"></script>
<script src="./script.js"></script>
</body>
</html>