diff --git a/css/bars.css b/css/bars.css
new file mode 100644
index 0000000..3bcf74d
--- /dev/null
+++ b/css/bars.css
@@ -0,0 +1,38 @@
+.barBase {
+ overflow: hidden;
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+ display:table
+}
+
+.barBorder {
+ border: 2px solid;
+ border-radius: 10px;
+ border-color: var(--color);
+ overflow: hidden;
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+ margin:0
+}
+
+.overlayTextContainer {
+ z-index: 3;
+ border-radius: 10px;
+ vertical-align: middle;
+ display: flex;
+ justify-content: center;
+ align-items: left;
+ position: absolute;
+}
+
+.fill {
+ background-color: var(--color);
+ z-index:2;
+ position: absolute;
+ overflow: hidden;
+ margin-left: -0.5px;
+ transition-duration: 0.2s;
+
+}
+
+.overlayText {
+ z-index: 6;
+}
\ No newline at end of file
diff --git a/css/components.css b/css/components.css
new file mode 100644
index 0000000..ac42fd6
--- /dev/null
+++ b/css/components.css
@@ -0,0 +1,166 @@
+.upg {
+ min-height: 120px;
+ width: 120px;
+ border-radius: 25%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+ font-size: 10px;
+ overflow: visible;
+}
+
+.achievement {
+ height: 90px;
+ width: 90px;
+ border-radius: 25%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+ font-size: 10px;
+ color: white;
+ text-shadow: 0 0 2px #000000;
+}
+.achievement:hover {
+ box-shadow: 0 0 10px var(--points);
+ z-index: 7;
+}
+
+.buyable {
+ height: 200px;
+ width: 200px;
+ border-radius: 25%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+ font-size: 10px;
+ position:relative;
+}
+
+.milestone {
+ width: 100%;
+ min-width: 120px;
+ padding-left: 5px;
+ padding-right: 5px;
+ height: 75px;
+ background-color: #bf8f8f;
+ border: 4px solid;
+ border-radius: 4px;
+ border-color: rgba(0, 0, 0, 0.125);
+ color: rgba(0, 0, 0, 0.5);
+}
+
+.milestoneDone {
+ width: 100%;
+ min-width: 120px;
+ padding-left: 5px;
+ padding-right: 5px;
+
+ height: 75px;
+ background-color: #77bf5f;
+ border: 4px solid;
+ border-radius: 4px;
+ border-color: rgba(0, 0, 0, 0.125);
+ color: rgba(0, 0, 0, 0.5);
+}
+
+.challenge {
+ background-color: #bf8f8f;
+ position: relative;
+ border: 4px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+ color: rgba(0, 0, 0, 0.5);
+ width: 300px;
+ height: 300px;
+ font-size: 15px;
+ border-radius: 33.33%;
+}
+
+.challenge.done {
+ background-color: #77bf5f;
+}
+
+.challenge.canComplete {
+ background-color: #ffbf00;
+}
+
+/* Infoboxes */
+.story {
+ width: 600px;
+ max-width: 95%;
+ border-bottom: solid 4px;
+ border-radius: 8px;
+ margin-bottom: 8px;
+ text-align: left;
+}
+
+.story-title {
+ text-align: left;
+ font-size: 24px;
+ color: black;
+ cursor: pointer;
+ border: none;
+ padding: 2px;
+ border-radius: 8px 8px 0 0;
+}
+
+.story-toggle {
+ border: none;
+ background: black;
+ color: white;
+ font-size: 20px;
+ pointer-events: none;
+ width: 1em;
+ display: inline-block;
+}
+
+.story-text {
+ padding: 2px;
+ border: solid 4px;
+ border-color: inherit;
+ border-radius: inherit;
+ border-top-left-radius: 0;
+ margin-bottom: -2px;
+}
+
+
+/* Tiles are gridables */
+.tile {
+ height: 80px;
+ width: 80px;
+ border-radius: 15%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+ font-size: 10px;
+ overflow: visible;
+}
+
+.tile.can:hover {
+ box-shadow: 0 0 10px var(--points);
+ transform: scale(1.1, 1.1);
+ z-index: 7;
+}
+
+.upgBig {
+ height: 200px;
+ width: 200px;
+ border-radius: 25%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+}
+
+/* Used for respec button and similar */
+.longUpg {
+ height: 50px;
+ width: 120px;
+ background: var(--points);
+ border-radius: 50%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+ font-size: 10px;
+}
+
+.smallUpg {
+ height: 40px;
+ width: 40px;
+ border-radius: 25%;
+ border: 2px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+}
+
diff --git a/css/general-style.css b/css/general-style.css
new file mode 100644
index 0000000..0173a2d
--- /dev/null
+++ b/css/general-style.css
@@ -0,0 +1,41 @@
+/* Global things */
+body {
+ color: var(--color);
+ overflow: hidden;
+ --background: #0f0f0f;
+ --color: #dfdfdf;
+ --points: #ffffff;
+ background: var(--background)
+}
+
+/* General text */
+h1, h2, h3, b, input {
+ display: inline;
+ font-family: "Lucida Console", "Courier New", monospace
+}
+
+/* These are styles for different states of components. You can make layer-specific versions with .c.locked, for example */
+.locked {
+ background-color: #bf8f8f;
+ cursor: not-allowed;
+}
+
+/* Can meens can be clicked/bought/etc */
+.can {
+ cursor: pointer;
+}
+
+.can:hover {
+ transform: scale(1.15, 1.15);
+ box-shadow: 0 0 20px var(--points)
+}
+
+.bought {
+ background-color: #77bf5f;
+ cursor: default;
+}
+
+#points {
+ color: var(--points);
+ text-shadow: 0 0 10px var(--points);
+}
diff --git a/css/misc.css b/css/misc.css
new file mode 100644
index 0000000..0cb6234
--- /dev/null
+++ b/css/misc.css
@@ -0,0 +1,83 @@
+
+/* Prestige button */
+.reset {
+ height: 120px;
+ width: 180px;
+ border-radius: 25%;
+ border: 4px solid;
+ border-color: rgba(0, 0, 0, 0.125);
+}
+
+.tabButton {
+ background-color: transparent;
+ color: var(--color);
+ font-size: 20px;
+ cursor: pointer;
+ padding: 5px 20px;
+ margin: 5px;
+ border-radius: 10px;
+ border: 2px solid;
+ color: var(--color);
+
+}
+
+.tabButton:hover {
+ transform: scale(1.1, 1.1);
+ text-shadow: 0 0 7px var(--color);
+}
+
+.tooltip {
+ pointer-events: none;
+ text-align: center;
+ width: 150px;
+ font-size: 16px;
+ line-height: 1.2;
+ bottom: 100%;
+ left: 50%;
+ margin-bottom: 5px;
+ margin-left: -80px;
+ padding: 7px;
+ font-family: "Lucida Console", "Courier New", monospace;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ opacity: 0;
+ transition: opacity 0.5s;
+
+ position: absolute;
+ z-index: 20000 ;
+
+ background-color: var(--background_tooltip);
+ color: var(--points);
+ content: attr(tooltip);
+ font-size:14px;
+
+ }
+
+ .tooltip::after {
+ content: " ";
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+
+ top: 100%;
+ left: 50%;
+ margin-left: -5px;
+ border-width: 5px;
+ border-style: solid;
+ border-color: var(--background_tooltip) transparent transparent transparent;
+ }
+
+/* Horizontal/vertical lines */
+.vl {
+ border-left: 6px solid var(--color);
+ height: 100%;
+ position: absolute;
+ left: 50%;
+ margin-left: -3px;
+ top: 0
+}
+
+.hl {
+ border-top: 3px solid var(--color);
+}
diff --git a/css/other-tabs.css b/css/other-tabs.css
new file mode 100644
index 0000000..e6f3a58
--- /dev/null
+++ b/css/other-tabs.css
@@ -0,0 +1,111 @@
+
+#optionWheel {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 50px;
+ width: 50px;
+ cursor: pointer;
+}
+
+#optionWheel:hover {
+ transform: rotate(360deg);
+}
+
+#info {
+ font-size: 20px;
+ color: white;
+ position: absolute;
+ top: 50px;
+ left: 4px;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ -webkit-text-stroke-width: 1px;
+ -webkit-text-stroke-color: #02f2f2;
+}
+
+#info:hover {
+ transform: scale(1.2, 1.2);
+ text-shadow: 5px 0 10px #02f2f2,
+ -3px 0 12px #02f2f2;
+}
+
+#discord {
+ position: absolute;
+ top: 120px;
+ left: 4px;
+ width: 40px;
+ height: 40px;
+}
+
+#discord img {
+ width: 100%;
+ height: 100%;
+}
+
+#discord-links {
+ position: absolute;
+ top: 0;
+ padding-top: 44px;
+ left: -244px;
+ width: 200px;
+ transition: left .3s ease;
+}
+
+#discord:hover #discord-links {
+ left: -4px;
+}
+
+#version {
+ position: absolute;
+ right: 4px;
+ top: 4px;
+ text-align: right;
+ color: var(--points);
+ text-shadow: 0 0 10px var(--points);
+ cursor: pointer;
+}
+
+#version:hover {
+ transform: scale(1.1, 1.1);
+ right: 4.8px;
+}
+
+a {
+ color: #007fff;
+ text-decoration-line: none;
+ cursor: pointer
+}
+
+.link {
+ display: block;
+ font-size: 20px;
+ color: #41f5f5;
+ cursor: pointer;
+ font-family: "Lucida Console", "Courier New", monospace;
+ -webkit-text-stroke-width: 1px;
+ -webkit-text-stroke-color: #02f2f2;
+ text-decoration: none;
+}
+
+.link:hover {
+ transform: scale(1.2, 1.2);
+ text-shadow: 5px 0 10px #02f2f2,
+ -3px 0 12px #02f2f2;
+}
+
+.opt {
+ height: 100px;
+ width: 100px;
+ border-radius: 25%;
+ border: 4px solid;
+ background-color: var(--color);
+ border-color: rgba(0, 0, 0, 0.125);
+ color: rgba(0, 0, 0, 0.5);
+ cursor: pointer;
+}
+
+.opt:hover {
+ background-color: #439ea3;
+}
\ No newline at end of file
diff --git a/popup.css b/css/popup.css
similarity index 100%
rename from popup.css
rename to css/popup.css
diff --git a/css/system-style.css b/css/system-style.css
new file mode 100644
index 0000000..e180dc5
--- /dev/null
+++ b/css/system-style.css
@@ -0,0 +1,248 @@
+* {
+ transition-duration: 0.5s;
+ text-align: center;
+ font-family: "Inconsolata", monospace;
+ font-weight: bold;
+ table-align: center;
+ margin: auto;
+ -webkit-text-size-adjust: none;
+ text-size-adjust: none;
+
+}
+
+*:focus {
+ outline: none;
+ webkit-outline: none;
+}
+
+html, body {
+ min-height: 100%;
+ height: 100%;
+}
+
+td {
+ padding: 0
+}
+
+.upgTable {
+ display: flex !important;
+ flex-flow: column wrap;
+ justify-content: center;
+ align-items: center;
+ max-width: 100%;
+ margin: 0 auto;
+}
+
+.upgRow {
+ display: flex !important;
+ flex-flow: row wrap;
+ justify-content: center;
+ align-items: center;
+ max-width: 100%;
+ margin: 0 auto;
+}
+
+.upgAlign {
+ vertical-align: 0
+}
+
+.bigUpgAlign {
+ vertical-align: 0
+}
+
+.treeThing {
+ margin: 0 10px 0 10px;
+ vertical-align: middle;
+}
+
+.can.upg:hover {
+ z-index: 2
+}
+
+.can.buyable:hover {
+ z-index: 2
+}
+
+.back {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: transparent;
+ border: 1px solid transparent;
+ color: var(--color);
+ font-size: 40px;
+ cursor: pointer;
+}
+
+.other-back {
+ position: absolute;
+ top: 0;
+ left: 60px;
+ background-color: transparent;
+ border: 1px solid transparent;
+ color: var(--color);
+ font-size: 60px;
+ cursor: pointer;
+}
+
+.back:hover {
+ transform: scale(1.1, 1.1);
+ text-shadow: 0 0 7px var(--color);
+}
+
+.hidden {
+ visibility: hidden;
+ height: 50px !important;
+}
+
+.canvas {
+ top: 0;
+ left: 0;
+ position: absolute;
+ z-index: -999;
+}
+
+.left {
+ position: absolute;
+ left: 0;
+}
+
+.remove {
+ height: 24px;
+ width: 24px;
+ cursor: pointer;
+}
+
+.remove:hover {
+ transform: scale(1.1, 1.1);
+}
+
+.col {
+ min-width: 49.5%;
+ max-width: 49.5%;
+ width: 49.5%;
+ height: 100%;
+ min-height: 100%;
+ column-span: 1;
+ position: absolute;
+ overflow-y: auto;
+ overflow-x: auto;
+ transition-duration: 0s
+}
+
+.instant {
+ transition-duration: 0s !important
+}
+
+.fast {
+ transition:color none
+}
+
+.col.right {
+ top: 0;
+ right: 0;
+}
+
+#app {
+ column-count: 2;
+ column-width: 50%;
+ min-height: 100%;
+}
+
+.vl2 {
+ border-left: 3px solid var(--color);
+ height: 100%;
+}
+
+ul {
+ list-style-type: none;
+}
+
+.fullWidth {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ min-width: 100%;
+ overflow-y: auto;
+ overflow-x: auto;
+ transition-duration: 0s
+}
+
+.tooltipBox {
+ position: relative;
+ display: inline-block;
+ }
+
+ .tooltipBox:hover .tooltip{
+ opacity: 1;
+ }
+
+ .forceTooltip .tooltip{
+ opacity: 1;
+ }
+
+
+#loadingSection {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.treeOverlay {
+ pointer-events:none;
+ overflow:hidden;
+}
+
+.front {
+ z-index: 30000
+}
+
+.overlayThing {
+ z-index: 10000;
+ pointer-events:auto;
+}
+
+.sideLayers {
+ z-index: 10000;
+ pointer-events:auto;
+ position: absolute;
+ right: 55px;
+ top: 65px;
+ background-color: transparent;
+}
+
+button > * {
+ pointer-events:none;
+}
+
+.ghost {
+ visibility: hidden
+}
+
+#treeTab td button {
+ margin: 0 10px;
+}
+
+.bg {
+ z-index: -9000;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-color: transparent;
+ top: 0
+}
+
+.bg2 {
+ z-index: -9009;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0
+}
+
+.noBackground {
+ background: transparent !important;
+ background-image: none !important;
+ --background: transparent !important;
+}
+
diff --git a/css/tree-node.css b/css/tree-node.css
new file mode 100644
index 0000000..73ff441
--- /dev/null
+++ b/css/tree-node.css
@@ -0,0 +1,103 @@
+/* Tree nodes, button nodes, and side layers */
+.treeNode {
+ height: 100px;
+ width: 100px;
+ border: var(--hqProperty1);
+ border-color: rgba(0, 0, 0, 0.125);
+ border-radius: 50%;
+ box-shadow: var(--hqProperty2a), var(--hqProperty2b);
+ font-size: 40px;
+ font-family: "Lucida Console", "Courier New", monospace;
+ color: rgba(0, 0, 0, 0.5);
+ text-shadow: var(--hqProperty3);
+ padding: 0;
+ margin: 0 10px 0 10px;
+}
+
+.treeButton {
+ height: 100px;
+ width: 100px;
+ border: var(--hqProperty1);
+ border-color: rgba(0, 0, 0, 0.125);
+ border-radius: 33%;
+ box-shadow: var(--hqProperty2a), var(--hqProperty2b);
+ font-size: 40px;
+ font-family: "Lucida Console", "Courier New", monospace;
+ color: rgba(0, 0, 0, 0.5);
+ text-shadow: var(--hqProperty3);
+ padding: 0;
+}
+
+.smallNode {
+ height: 60px;
+ width: 60px;
+ font-size: 30px;
+}
+
+.resetNotify {
+ box-shadow: var(--hqProperty2a), 0 0 8px #ffffff;
+}
+
+.treeNode.can:hover {
+ transform: scale(1.15, 1.15);
+ box-shadow: var(--hqProperty2a), 0 0 20px var(--points);
+}
+
+.notify {
+ transform: scale(1.05, 1.05);
+ border-color: rgba(0, 0, 0, 0.125);
+ box-shadow: var(--hqProperty2a), 0 0 20px #ff0000;
+}
+
+
+
+.mark {
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ z-index: 10000;
+ margin-left: 0.9em;
+ margin-right: 0.9em;
+ margin-bottom: 1.2em;
+ border-right: 0.3em solid transparent;
+ border-bottom: 0.7em solid transparent;
+ border-left: 0.3em solid transparent;
+ font-size: 10px;
+ overflow:auto;
+ pointer-events: none;
+}
+
+.star {
+ position: relative;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ z-index: 10000;
+ margin-left: 0.9em;
+ margin-right: 0.9em;
+ margin-bottom: 1.2em;
+ border-right: 0.3em solid transparent;
+ border-bottom: 0.7em solid #ffcc00;
+ border-left: 0.3em solid transparent;
+ font-size: 10px;
+ pointer-events: none;
+
+}
+
+.star:before, .star:after {
+ content: "";
+ width: 0;
+ height: 0;
+ position: absolute;
+ top: .6em;
+ left: -1em;
+ border-right: 1em solid transparent;
+ border-bottom: 0.7em solid #ffcc00;
+ border-left: 1em solid transparent;
+ transform: rotate(-35deg);
+}
+
+.star:after {
+ transform: rotate(35deg);
+}
\ No newline at end of file
diff --git a/demo.html b/demo.html
index a4bd643..144fa28 100644
--- a/demo.html
+++ b/demo.html
@@ -2,8 +2,14 @@
-
-
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index 8e03186..237fd69 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,14 @@
-
+
+
+
+
+
+
+
+
diff --git a/js/components.js b/js/components.js
index c51ab1e..8ab36cb 100644
--- a/js/components.js
+++ b/js/components.js
@@ -138,7 +138,7 @@ function loadVue() {
props: ['layer', 'data'],
template: `
+ v-bind:class="['challenge', challengeStyle(layer, data), inChallenge(layer, data) ? 'resetNotify' : '']" v-bind:style="tmp[layer].challenges[data].style">
diff --git a/style.css b/style.css
deleted file mode 100644
index 164e71b..0000000
--- a/style.css
+++ /dev/null
@@ -1,785 +0,0 @@
-* {
- transition-duration: 0.5s;
- text-align: center;
- font-family: "Inconsolata", monospace;
- font-weight: bold;
- table-align: center;
- margin: auto;
- -webkit-text-size-adjust: none;
- text-size-adjust: none;
-
-}
-
-*:focus {
- outline: none;
- webkit-outline: none;
-}
-
-body {
- color: var(--color);
- overflow: hidden;
- --background: #0f0f0f;
- --color: #dfdfdf;
- --points: #ffffff;
- background: var(--background)
-}
-
-html, body {
- min-height: 100%;
- height: 100%;
-}
-
-td {
- padding: 0
-}
-
-.upgTable {
- display: flex !important;
- flex-flow: column wrap;
- justify-content: center;
- align-items: center;
- max-width: 100%;
- margin: 0 auto;
-}
-
-.upgRow {
- display: flex !important;
- flex-flow: row wrap;
- justify-content: center;
- align-items: center;
- max-width: 100%;
- margin: 0 auto;
-}
-
-.upgAlign {
- vertical-align: 0
-}
-
-.bigUpgAlign {
- vertical-align: 0
-}
-
-h1, h2, h3, b, input {
- display: inline;
- font-family: "Lucida Console", "Courier New", monospace
-}
-
-
-
-.treeNode {
- height: 100px;
- width: 100px;
- border: var(--hqProperty1);
- border-color: rgba(0, 0, 0, 0.125);
- border-radius: 50%;
- box-shadow: var(--hqProperty2a), var(--hqProperty2b);
- font-size: 40px;
- font-family: "Lucida Console", "Courier New", monospace;
- color: rgba(0, 0, 0, 0.5);
- text-shadow: var(--hqProperty3);
- padding: 0;
- margin: 0 10px 0 10px;
-}
-
-
-.treeButton {
- height: 100px;
- width: 100px;
- border: var(--hqProperty1);
- border-color: rgba(0, 0, 0, 0.125);
- border-radius: 33%;
- box-shadow: var(--hqProperty2a), var(--hqProperty2b);
- font-size: 40px;
- font-family: "Lucida Console", "Courier New", monospace;
- color: rgba(0, 0, 0, 0.5);
- text-shadow: var(--hqProperty3);
- padding: 0;
-}
-
-.treeThing {
- margin: 0 10px 0 10px;
- vertical-align: middle;
-}
-
-.smallNode {
- height: 60px;
- width: 60px;
- font-size: 30px;
-}
-
-
-.locked {
- background-color: #bf8f8f;
- cursor: not-allowed;
-}
-
-.can {
- cursor: pointer;
-}
-
-.can:hover {
- transform: scale(1.15, 1.15);
- box-shadow: 0 0 20px var(--points)
-}
-
-.can.upg:hover {
- z-index: 2
-}
-
-.can.buyable:hover {
- z-index: 2
-}
-
-.resetNotify {
- box-shadow: var(--hqProperty2a), 0 0 8px #ffffff;
-}
-
-.treeNode.can:hover {
- transform: scale(1.15, 1.15);
- box-shadow: var(--hqProperty2a), 0 0 20px var(--points);
-}
-
-.notify {
- transform: scale(1.05, 1.05);
- border-color: rgba(0, 0, 0, 0.125);
- box-shadow: var(--hqProperty2a), 0 0 20px #ff0000;
-}
-
-.bought {
- background-color: #77bf5f;
- cursor: default;
-}
-
-.back {
- position: absolute;
- top: 0;
- left: 0;
- background-color: transparent;
- border: 1px solid transparent;
- color: var(--color);
- font-size: 40px;
- cursor: pointer;
-}
-
-.other-back {
- position: absolute;
- top: 0;
- left: 60px;
- background-color: transparent;
- border: 1px solid transparent;
- color: var(--color);
- font-size: 60px;
- cursor: pointer;
-}
-
-
-.back:hover {
- transform: scale(1.1, 1.1);
- text-shadow: 0 0 7px var(--color);
-}
-
-.barBase {
- overflow: hidden;
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- display:table
-}
-
-.barBorder {
- border: 2px solid;
- border-radius: 10px;
- border-color: var(--color);
- overflow: hidden;
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- margin:0
-}
-
-.overlayTextContainer {
- z-index: 3;
- border-radius: 10px;
- vertical-align: middle;
- display: flex;
- justify-content: center;
- align-items: left;
- position: absolute;
-}
-
-.fill {
- background-color: var(--color);
- z-index:2;
- position: absolute;
- overflow: hidden;
- margin-left: -0.5px;
- transition-duration: 0.2s;
-
-}
-
-.overlayText {
- z-index: 6;
-}
-
-.tabButton {
- background-color: transparent;
- color: var(--color);
- font-size: 20px;
- cursor: pointer;
- padding: 5px 20px;
- margin: 5px;
- border-radius: 10px;
- border: 2px solid;
- color: var(--color);
-
-}
-
-.tabButton:hover {
- transform: scale(1.1, 1.1);
- text-shadow: 0 0 7px var(--color);
-}
-
-.reset {
- height: 120px;
- width: 180px;
- border-radius: 25%;
- border: 4px solid;
- border-color: rgba(0, 0, 0, 0.125);
-}
-
-.upg {
- min-height: 120px;
- width: 120px;
- border-radius: 25%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
- font-size: 10px;
- overflow: visible;
-}
-
-.achievement {
- height: 90px;
- width: 90px;
- border-radius: 25%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
- font-size: 10px;
- color: white;
- text-shadow: 0 0 2px #000000;
-}
-.achievement:hover {
- box-shadow: 0 0 10px var(--points);
- z-index: 7;
-}
-
-.buyable {
- height: 200px;
- width: 200px;
- border-radius: 25%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
- font-size: 10px;
- position:relative;
-}
-
-.tile {
- height: 80px;
- width: 80px;
- border-radius: 15%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
- font-size: 10px;
- overflow: visible;
-}
-
-.tile.can:hover {
- box-shadow: 0 0 10px var(--points);
- transform: scale(1.1, 1.1);
- z-index: 7;
-}
-
-.upgBig {
- height: 200px;
- width: 200px;
- border-radius: 25%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
-}
-
-.longUpg {
- height: 50px;
- width: 120px;
- background: var(--points);
- border-radius: 50%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
- font-size: 10px;
-}
-
-.smallUpg {
- height: 40px;
- width: 40px;
- border-radius: 25%;
- border: 2px solid;
- border-color: rgba(0, 0, 0, 0.125);
-}
-
-#points {
- color: var(--points);
- text-shadow: 0 0 10px var(--points);
-}
-
-#optionWheel {
- position: absolute;
- top: 0;
- left: 0;
- height: 50px;
- width: 50px;
- cursor: pointer;
-}
-
-#optionWheel:hover {
- transform: rotate(360deg);
-}
-
-#info {
- font-size: 20px;
- color: white;
- position: absolute;
- top: 50px;
- left: 4px;
- cursor: pointer;
- width: 40px;
- height: 40px;
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: #02f2f2;
-}
-
-#info:hover {
- transform: scale(1.2, 1.2);
- text-shadow: 5px 0 10px #02f2f2,
- -3px 0 12px #02f2f2;
-}
-
-#discord {
- position: absolute;
- top: 120px;
- left: 4px;
- width: 40px;
- height: 40px;
-}
-
-#discord img {
- width: 100%;
- height: 100%;
-}
-
-#discord-links {
- position: absolute;
- top: 0;
- padding-top: 44px;
- left: -244px;
- width: 200px;
- transition: left .3s ease;
-}
-
-#discord:hover #discord-links {
- left: -4px;
-}
-
-#version {
- position: absolute;
- right: 4px;
- top: 4px;
- text-align: right;
- color: var(--points);
- text-shadow: 0 0 10px var(--points);
- cursor: pointer;
-}
-
-#version:hover {
- transform: scale(1.1, 1.1);
- right: 4.8px;
-}
-
-a {
- color: #007fff;
- text-decoration-line: none;
- cursor: pointer
-}
-
-.link {
- display: block;
- font-size: 20px;
- color: #41f5f5;
- cursor: pointer;
- font-family: "Lucida Console", "Courier New", monospace;
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: #02f2f2;
- text-decoration: none;
-}
-
-.link:hover {
- transform: scale(1.2, 1.2);
- text-shadow: 5px 0 10px #02f2f2,
- -3px 0 12px #02f2f2;
-}
-
-.opt {
- height: 100px;
- width: 100px;
- border-radius: 25%;
- border: 4px solid;
- background-color: var(--color);
- border-color: rgba(0, 0, 0, 0.125);
- color: rgba(0, 0, 0, 0.5);
- cursor: pointer;
-}
-
-.opt:hover {
- background-color: #439ea3;
-}
-
-.hidden {
- visibility: hidden;
- height: 50px !important;
-}
-
-.canvas {
- top: 0;
- left: 0;
- position: absolute;
- z-index: -999;
-}
-
-.milestone {
- width: 100%;
- min-width: 120px;
- padding-left: 5px;
- padding-right: 5px;
- height: 75px;
- background-color: #bf8f8f;
- border: 4px solid;
- border-radius: 4px;
- border-color: rgba(0, 0, 0, 0.125);
- color: rgba(0, 0, 0, 0.5);
-}
-
-.milestoneDone {
- width: 100%;
- min-width: 120px;
- padding-left: 5px;
- padding-right: 5px;
-
- height: 75px;
- background-color: #77bf5f;
- border: 4px solid;
- border-radius: 4px;
- border-color: rgba(0, 0, 0, 0.125);
- color: rgba(0, 0, 0, 0.5);
-}
-
-.left {
- position: absolute;
- left: 0;
-}
-
-.remove {
- height: 24px;
- width: 24px;
- cursor: pointer;
-}
-
-.remove:hover {
- transform: scale(1.1, 1.1);
-}
-
-.col {
- min-width: 49.5%;
- max-width: 49.5%;
- width: 49.5%;
- height: 100%;
- min-height: 100%;
- column-span: 1;
- position: absolute;
- overflow-y: auto;
- overflow-x: auto;
- transition-duration: 0s
-}
-
-.instant {
- transition-duration: 0s !important
-}
-
-.fast {
- transition:color none
-}
-
-.col.right {
- top: 0;
- right: 0;
-}
-
-#app {
- column-count: 2;
- column-width: 50%;
- min-height: 100%;
-}
-
-.vl {
- border-left: 6px solid var(--color);
- height: 100%;
- position: absolute;
- left: 50%;
- margin-left: -3px;
- top: 0
-}
-
-.vl2 {
- border-left: 3px solid var(--color);
- height: 100%;
-}
-
-.hl {
- border-top: 3px solid var(--color);
-}
-
-ul {
- list-style-type: none;
-}
-
-.hChallenge {
- background-color: #bf8f8f;
- position: relative;
- border: 4px solid;
- border-color: rgba(0, 0, 0, 0.125);
- color: rgba(0, 0, 0, 0.5);
- width: 300px;
- height: 300px;
- font-size: 15px;
- border-radius: 33.33%;
-}
-
-.hChallenge.done {
- background-color: #77bf5f;
-}
-
-.hChallenge.canComplete {
- background-color: #ffbf00;
-}
-
-.fullWidth {
- position: absolute;
- height: 100%;
- width: 100%;
- min-width: 100%;
- overflow-y: auto;
- overflow-x: auto;
- transition-duration: 0s
-}
-
-.tooltipBox {
- position: relative;
- display: inline-block;
- }
-
- .tooltipBox:hover .tooltip{
- opacity: 1;
- }
-
- .forceTooltip .tooltip{
- opacity: 1;
- }
-
- .tooltip {
- pointer-events: none;
- text-align: center;
- width: 150px;
- font-size: 16px;
- line-height: 1.2;
- bottom: 100%;
- left: 50%;
- margin-bottom: 5px;
- margin-left: -80px;
- padding: 7px;
- font-family: "Lucida Console", "Courier New", monospace;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- opacity: 0;
- transition: opacity 0.5s;
-
- position: absolute;
- z-index: 20000 ;
-
- background-color: var(--background_tooltip);
- color: var(--points);
- content: attr(tooltip);
- font-size:14px;
-
- }
-
- .tooltip::after {
- content: " ";
- position: absolute;
- bottom: 100%;
- left: 50%;
-
- top: 100%;
- left: 50%;
- margin-left: -5px;
- border-width: 5px;
- border-style: solid;
- border-color: var(--background_tooltip) transparent transparent transparent;
- }
-
-#loadingSection {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
-
-.treeOverlay {
- pointer-events:none;
- overflow:hidden;
-}
-
-.front {
- z-index: 30000
-}
-
-.overlayThing {
- z-index: 10000;
- pointer-events:auto;
-}
-
-.sideLayers {
- z-index: 10000;
- pointer-events:auto;
- position: absolute;
- right: 55px;
- top: 65px;
- background-color: transparent;
-
-}
-
-button > * {
- pointer-events:none;
-}
-
-.ghost {
- visibility: hidden
-}
-
-.story {
- width: 600px;
- max-width: 95%;
- border-bottom: solid 4px;
- border-radius: 8px;
- margin-bottom: 8px;
- text-align: left;
-}
-
-.story-title {
- text-align: left;
- font-size: 24px;
- color: black;
- cursor: pointer;
- border: none;
- padding: 2px;
- border-radius: 8px 8px 0 0;
-}
-
-.story-toggle {
- border: none;
- background: black;
- color: white;
- font-size: 20px;
- pointer-events: none;
- width: 1em;
- display: inline-block;
-}
-
-.story-text {
- padding: 2px;
- border: solid 4px;
- border-color: inherit;
- border-radius: inherit;
- border-top-left-radius: 0;
- margin-bottom: -2px;
-}
-
-#treeTab td button {
- margin: 0 10px;
-}
-
-.mark {
- position: relative;
- display: inline-block;
- width: 30px;
- height: 30px;
- z-index: 10000;
- margin-left: 0.9em;
- margin-right: 0.9em;
- margin-bottom: 1.2em;
- border-right: 0.3em solid transparent;
- border-bottom: 0.7em solid transparent;
- border-left: 0.3em solid transparent;
- font-size: 10px;
- overflow:auto;
- pointer-events: none;
-}
-
-.star {
- position: relative;
- display: inline-block;
- width: 0;
- height: 0;
- z-index: 10000;
- margin-left: 0.9em;
- margin-right: 0.9em;
- margin-bottom: 1.2em;
- border-right: 0.3em solid transparent;
- border-bottom: 0.7em solid #ffcc00;
- border-left: 0.3em solid transparent;
- font-size: 10px;
- pointer-events: none;
-
-}
-
-.star:before, .star:after {
- content: "";
- width: 0;
- height: 0;
- position: absolute;
- top: .6em;
- left: -1em;
- border-right: 1em solid transparent;
- border-bottom: 0.7em solid #ffcc00;
- border-left: 1em solid transparent;
- transform: rotate(-35deg);
-}
-
-.star:after {
- transform: rotate(35deg);
-}
-
-.bg {
- z-index: -9000;
- width: 100%;
- height: 100%;
- position: absolute;
- background-color: transparent;
- top: 0
-}
-
-.bg2 {
- z-index: -9009;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0
-}
-
-.noBackground {
- background: transparent !important;
- background-image: none !important;
- --background: transparent !important;
-}
-