@font-face {
   font-family: "ChakraPetch";
   src: url(fonts/ChakraPetch-Medium.ttf);
}


@font-face {
   font-family: "BC";
   src: url(fonts/LibreBarcode128-Regular.ttf);
}

@font-face {
   font-family: "HW";
   src: url(fonts/NothingYouCouldDo-Regular.ttf);
}

:root {
   --genSize: 70%;
   --genMargin: 0rem;

   --w: rgb(204, 204, 204);
   --bl: rgb(11, 12, 17);
   --tbl: #000000d7;

   --brd: .15rem solid;
   --lg: rgb(204, 204, 204);
   --gr: rgb(128, 128, 128);
   --dg: rgb(39, 39, 39);
   --vdg: rgb(15, 15, 15);
   --grad: linear-gradient(55deg, #a700a7, rgb(88, 5, 88));
   --en: rgb(127, 255, 76);

   --yl: rgba(221, 199, 0);
   --pk: #e106e1;
   --pu: rgba(128, 0, 128);

   --ms: rgba(221, 199, 0);

   --med: rgba(0, 255, 147);
   --sc: var(--med);

   --shd: 0 0 .2rem .15rem var(--bl);

   /* structure shadows */

   --glowRange: 0 0 .2rem .05rem;
   --pkShd: var(--glowRange) var(--pk);
   --grShd: 0 0 1rem .5rem var(--dg) inset;


   --pkText: 0 0 .15em var(--pk), 0 0 .2em var(--pk);

   --txtShd: 0 0 .25em var(--bl), 0 0 .2em var(--bl), 0 0 .3em var(--bl), 0 0 .35em var(--bl);
   --popupShadow: 0 0 5rem 5rem var(--bl);
   --greyHatch: repeating-linear-gradient(-45deg, var(--bl) 0 .5rem, var(--dg) .5rem 1rem);

   --orange: rgb(255, 153, 0);
   --red: rgb(175, 0, 0);
   --dr: rgb(105, 0, 0);
   --ddr: rgb(85, 0, 0);
   --t: teal;
   --lt: #68b3b3;
   /* light teal */
   --sh: 0 0 .4rem .1rem;
}

html {
   background: var(--bl);
   font-family: "ChakraPetch";
   color: var(--w);
}

html.performance *:not(#night-glow) {
   box-shadow: none !important;
   filter: none !important;

   [data-entry] {

      --new: color-mix(white, var(--hl));
      color: var(--new);

      svg {
         fill: var(--new) !important;
      }

      &:hover {
         text-decoration: underline;
      }
   }

   [data-group] {
      --new: color-mix(white, var(--hl));

      polyline {
         stroke: var(--new);
      }

      text {
         fill: var(--new)
      }
   }

   .gen-icon {
      --col: var(--hl);
      opacity: .60;
   }

   h3,
   h2 {
      color: color-mix(white, var(--cl));
      border-color: var(--w) !important;
   }
}




* {
   box-sizing: border-box;
   scrollbar-width: thin;
   scrollbar-color: var(--w) var(--bl);
   position: relative;
   overscroll-behavior: none;
}

/* general rules */

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
}

h1 {
   font-size: 4rem;
}

::selection {
   background-color: var(--dg);
   text-decoration: underline var(--pk);

}

/* game title */
#game-title {
   font-style: normal;
   text-align: center;
}

[data-icon="title"] {
   display: block;
}

#game-title>span {
   font-size: 140%;

   display: inline-flex;
   justify-content: center;
   align-items: center;
}

#game-title>span::after {
   content: '';
   position: absolute;
   box-shadow: 0 0 .5rem .35rem var(--pk);
   height: 20%;
   border-radius: 100%;
   animation: pulse 5s infinite;
}


h3 {
   text-align: center;
   border-bottom: var(--brd);
   padding: .25rem;
   margin-block: 1.5rem;
}

h3:first-child {
   margin-top: 0;
}

ul {
   margin: 0;
   padding-left: 1.5em;
   height: fit-content;
}

ul li {
   padding: .3rem;
   text-align: left;
}



strong {
   font-size: 1.25rem;
}

hr {
   background-color: var(--w);
   height: 1px;
   border: 0;
   margin-block: .5rem;
}

p:empty {
   display: none !important;
}

p>p {
   margin: 0 !important;
}

p::first-letter {
   text-transform: uppercase;
}

/* utility */

.fade-out {
   transition: opacity .5s;
   opacity: 0;
}

.fade-in {
   transition: opacity .5s;
   opacity: 1;
}

.hidden,
[hidden] {
   display: none !important;
}

/* animations */

.shake {
   animation: shake .35s ease-in-out;
}

@keyframes shake {
   0% {
      transform: translateX(0);
      color: red;
   }

   25% {
      transform: translateX(5px);
      color: var(--w);
   }

   50% {
      transform: translateX(-5px);
      color: red;
   }

   75% {
      transform: translateX(5px);
      color: var(--w);
   }

   100% {
      transform: translateX(0);
      color: red;
   }
}

/* the +1 indicators */
.sway-up {
   position: absolute;
   width: max-content;
   text-align: center;
   animation: sway-up 2s ease-in-out;
   font-size: 200%;
   z-index: 15;
   pointer-events: none;
}

@keyframes sway-up {
   0% {
      bottom: 0;
      opacity: 1;
      transform: translateX(0)
   }

   25% {
      transform: translateX(1rem)
   }

   50% {
      transform: translateX(-1rem)
   }

   75% {
      transform: translateX(1rem)
   }

   100% {
      opacity: 0;
      bottom: 15rem;
      transform: translateX(0)
   }
}

/* mobile stuff */

html.mobile {
   font-size: 10px;
}

/* special title */

[data-title]:not(:empty)::before {
   content: '- ' attr(data-title) ' -';
   display: block;
   width: 100%;
   opacity: .5;
   padding-block: .5em;
   font-size: 1.15rem;
   text-transform: uppercase;
   text-align: center;
}

/* section names */
[data-name]::before {
   content: attr(data-name);
   position: absolute;
   place-self: center;
   text-transform: uppercase;
   color: var(--gr);
   opacity: .25;
   font-size: 5rem;
   pointer-events: none;
}

/* interactive elems */

[onclick],
[role='button'],
[data-clickable] {
   cursor: pointer;
}

button {
   color: inherit;
   font-size: inherit;
   font-family: inherit;

   border: var(--brd);
   border-radius: .5rem;

   background: transparent;
   padding: .5rem 1rem;
   cursor: pointer;
   transition: .3s;
}

button * {
   pointer-events: none;
}

/* label button */

[label] {
   display: grid;
   place-items: center;
}

[label] i {
   transition: ease-in-out .3s;
}

[label]::after {
   content: attr(label);
   text-decoration: underline;
   opacity: 0;
   position: absolute;
   font-size: .6em;
   transition: ease-in-out .3s;
}

[label]:hover {
   i {
      opacity: 0;
   }

   &::after {
      opacity: 1;
   }
}


a {
   text-decoration: underline;
   transition: .2s ease-in-out;
}


a p,
button p {
   margin: 0 !important;
}

a[href] {
   color: var(--w);
   font-weight: bold;
   letter-spacing: .1rem;

}

a[href]::after {
   content: '⇲';
   transform: rotate(-90deg);
   display: inline-block;
   font-size: .8rem;
   vertical-align: super;
}

[disabled] {
   color: var(--gr) !important;
   box-shadow: none !important;
   cursor: not-allowed !important;
}

[disabled] svg {
   fill: var(--gr) !important;
}

[disabled]:hover {
   color: var(--gr) !important;
   background-color: var(--bl) !important;
   text-shadow: none !important;
   cursor: not-allowed;
}

.disabled {
   color: var(--gr);
   text-decoration: none;
}

.debug {
   display: none;
}

html[data-debug] .debug {
   display: unset;
}

/* SVG rules */

i {
   --col: var(--w);

   display: inline-flex;
   vertical-align: middle;
   height: fit-content;
   color: var(--col);
}

i svg {
   height: 1.75em;
   width: 1.75em;
   fill: var(--col);
}

/* center */
.centered {
   display: block;
   margin: auto;
   text-align: center;
}

/* generic nested lists */
.outer-list {
   display: grid;
   height: 100%;
   width: 100%;
   border: var(--brd);
   border-radius: 1rem;
}

.outer-list::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   box-shadow: 0 0 .5em .5em var(--bl) inset;
   pointer-events: none;
   border-radius: inherit;
}

.inner-list {
   height: 100%;
   width: 100%;
   position: absolute;
   overflow: auto;
   scrollbar-width: none;
   padding: 1rem;
   gap: 1rem;
   display: flex;
   flex-direction: column;
}

/* generic hover menus */

.hover-menu {
   display: grid !important;
   place-items: center;
}

.hover-menu-icon {
   display: flex;
   align-items: center;
   font-size: 2rem;
}

.hover-menu-inner {
   position: absolute;
   top: 100%;

   display: grid;
   padding: .5rem;
   gap: .5rem;

   max-height: 0;
   width: max-content;

   background-color: var(--tbl);
   box-shadow: var(--shd);

   border: var(--brd);
   border-radius: 1rem;

   z-index: 30;

   overflow: auto;
   scrollbar-width: none;

   opacity: 0;
   transition: .5s ease-in-out;
}


.hover-menu:hover>.hover-menu-inner {
   max-height: 60vh;
   opacity: 1;
}

.hover-menu-inner:empty::after {
   content: 'No entries.';
   padding: .25rem .5rem;
   opacity: .7;
}

.no-buy {
   filter: grayscale(1);
}

/* units */

[data-unit="orgasm"],
[data-unit="subject"],
[data-unit="NT"] {
   text-shadow: 0 0 .15em var(--pk), 0 0 .2em var(--pk);
}

[data-unit="NT"]::after {
   content: ' μg';
}

[data-unit="scientist"],
[data-unit="med"] {
   text-shadow: 0 0 .15em var(--sc), 0 0 .2em var(--sc);
}

[data-unit="money"] {
   font-weight: bold;
   text-shadow: 0 0 .1em var(--yl);

   &::after {
      content: ' $';
   }
}

[data-unit="percent"]::after {
   content: ' %';
}

[data-unit="uc"]::after {
   content: ' $/μg';
}

/* toggle button */
button[data-toggle] {

   border-radius: 1em;
   width: 3em;
   padding: .2em;
   height: 1.5em;

   --shCol: var(--pk);
}

button[data-toggle]::after {
   content: '';
   display: block;
   height: 100%;
   aspect-ratio: 1/1;
   background-color: var(--w);
   border-radius: 100%;
   margin-left: 0;

   transition: .25s ease-in-out;
}

button[data-toggle]:hover {
   box-shadow: 0 0 .25rem .15rem var(--shCol);
}

button[data-toggle="true"] {
   box-shadow: 0 0 .25rem .15rem var(--shCol);

   &::after {
      margin-left: 1.5em;
   }
}

.center-but {
   margin: auto;
   min-width: 33%;
}

.details {
   display: block;
   text-align: center;
   opacity: .9;
   font-size: .85rem;
   max-width: 30vw;
}

.twee-context {
   height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
}

/* inputs */

label {
   cursor: pointer;
}

label:hover {
   text-decoration: underline;
}

input {
   background-color: transparent;

   color: var(--gr);
   border: .15em solid;
   border-radius: .25em;
   margin-inline: .5em;
   padding: .2em .4em;

   width: fit-content;
}

input:hover,
input:focus-visible {
   color: var(--w);
   text-shadow: var(--pkText);
   box-shadow: var(--pkShd);
   outline: 0;
   transition: .2s ease-in-out;
}

textarea {
   background-color: transparent;
   color: var(--w);
   min-height: 5em;
   min-width: 25em;

   &:focus-visible {

      outline: 0;
   }
}

/* overflow shade */
.shade-overflow {

   scrollbar-width: none;

   &::after,
   &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 1rem;
      z-index: 5;
   }

   &::before {
      top: 0;
      background: linear-gradient(var(--bl), transparent);
   }

   &::after {
      bottom: 0;
      background: linear-gradient(transparent, var(--bl));
   }
}

/* generic interactions list */
.inter-list {
   display: flex;
   flex-direction: column;

   a {
      padding: .5rem 1rem;
   }

   a:not(:first-child) {
      border-top: 1px solid var(--gr);
   }
}


/* Mali's smooth details css */

@keyframes details-reveal {
   0% {
      opacity: 0
   }

   to {
      opacity: revert
   }
}

details {
   max-height: 2em;
   height: 2em;
   transition: .3s ease-in-out;
}

details[open] {
   max-height: 30vh;
   height: fit-content;
}

details[open] :not(summary) {
   animation: details-reveal .3s ease-in-out;
}

details[open]>summary::before {
   rotate: 90deg;
}

summary::before {
   content: '🠞';
   display: inline-block;
   padding-inline: .2rem;
   transition: .3s ease-in-out;
}

summary {
   display: block;
   cursor: pointer;
   width: fit-content;
}

summary:hover {
   text-decoration: underline
}

.right-align {
   text-align: right;
}

.center-align {
   text-align: center;
}

/* utility classes */
.boxed {
   background-color: var(--bl);
   box-shadow: var(--shd);

   border: var(--brd);
   border-radius: 2em;

   padding: 1em;
}

.grid {
   background-size: 8rem 8rem;
   background-position: 2rem 2rem;
   background-color: var(--bl);
   background-image:
      linear-gradient(to right, var(--dg) .1rem, transparent .1rem),
      linear-gradient(to bottom, var(--dg) .1rem, transparent .1rem);


   box-shadow: 0 0 2em 1em var(--bl) inset, var(--shd);
}

label[data-type="toggle"] {
   display: flex;
   margin-bottom: .5em;
   justify-content: space-between;
}

label[data-type="key"] {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 0;
   font-size: .9rem;
   gap: .5em;
}

input[type="key"] {
   min-width: 7em;
   width: fit-content;
   padding-block: 1em;
   text-align: center;
   border: 1em solid var(--dg);
   border-inline-color: var(--vdg);
   background-color: var(--bl);
   box-shadow: var(--shd);
   text-transform: uppercase;

   margin: 0;
}

input[type="key"]:hover,
input[type="key"]:focus-visible {

   text-shadow: var(--pkText);
   box-shadow: var(--pkShd), var(--shd);
   transition: .2s ease-in-out;
}

.icon-bg {
   text-shadow: 0 0 .1em var(--bl), 0 0 .1em var(--bl), 0 0 .2em var(--bl);
   display: grid;
   place-items: center;
   font-size: 2rem;

   width: 3rem;
}

.icon-bg .icon {
   position: absolute;
   z-index: -1;
   font-size: 3rem;
}

/* ending styling */

html.lock-out {

   --topLight: red !important;
   --pk: red;
}

html.lock-out body::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;

   box-shadow: 0 0 4rem 4rem var(--bl) inset;
   background-image: repeating-linear-gradient(-45deg, var(--bl) 0 3rem, var(--ddr) 3rem 4rem);
   z-index: -1;
   animation: appear 5s ease;
}

html.lock-out #right-menu button {
   color: var(--gr);
   pointer-events: none;
}

html.lock-out #right-menu svg {
   fill: var(--gr);
}

@keyframes appear {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* generic top light */
.top-light {
   --col: var(--pk);

   position: absolute;
   top: 10vh;

   width: 60vw;
   height: 0;

   box-shadow: 0 0 15vw 2vw var(--col);
}

.top-light.red {
   --col: var(--red);
}

.top-light.orange {
   --col: var(--orange);
}

#star-holder {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgb(0, 0, 27) 5vh, transparent 25vh);
   z-index: -1;
}

.scrollable {
   overflow-y: auto;
   scrollbar-width: none;
}

/* dinner invite in aug-dinner2 */
.card {
   border: 1px solid;
   padding: .5em;
   width: fit-content;
   font-style: italic;
   align-self: end;
   background-color: var(--vdg);
}

/* generic tooltip */
[data-tooltip] {
   position: absolute;
   z-index: 100;

   display: none;
   width: max-content;
   max-width: 15rem;
   text-align: center;

   font-size: .8rem;

   pointer-events: none;
   border: var(--brd);
   border-radius: .5em;
   padding: .25em .5em;

   background-color: var(--bl);
   box-shadow: var(--shd);
}

div:has(>[data-tooltip]):hover [data-tooltip] {
   display: block;
   animation: details-reveal .2s ease-in-out;
}

.barcode {
   font-family: "BC";
   opacity: .5;
   position: absolute;
   right: .5em;
   bottom: 0;
}

.dud-icons>:nth-child(2) {
   position: absolute;
   scale: .5;
   z-index: 10;
}


.dream-link {
   opacity: .8;
   font-style: italic;
   text-align: center;
   font-size: 1.2rem;
   text-decoration: none;
}