@charset "UTF-8";
/***************************/
/***************************/
/********** RESET **********/
/***************************/
/***************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --padding: 1rem;
  --padding-body: calc(var(--padding) * 1.5);
}
@media screen and (max-width: 1000px) {
  :root {
    --padding-body: var(--padding);
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  background-color: white;
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: #f4f2e9;
  background-image: url("images/bg.webp");
  font-family: "Cantora One", sans-serif;
}
body.no-scroll {
  overflow: hidden;
}

#app {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app-content {
  width: 100%;
  position: relative;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 1.1rem;
}

hr {
  color: rgb(192, 192, 192);
  border-bottom: 0;
}

p {
  line-height: 1.5em;
}
p.explanations {
  text-align: center;
  margin-block: var(--padding);
  font-size: 1.15rem;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

a {
  color: black;
}
a:hover {
  text-decoration: none;
}

.image-large-desktop {
  position: absolute;
  height: 100%;
  z-index: 0;
}
@media screen and (max-width: 1800px) {
  .image-large-desktop {
    display: none;
  }
}
.image-large-desktop ~ * {
  position: relative;
  z-index: 1;
}
.image-large-desktop picture {
  height: 100%;
  display: flex;
  align-items: center;
}
.image-large-desktop img {
  max-height: 100%;
  width: auto;
}

[data-popin-to-open] {
  cursor: pointer;
}

#mode {
  position: relative;
}
#mode .image-large-desktop {
  left: 50px;
}

.desktop-only {
  display: block;
}
@media screen and (max-width: 1000px) {
  .desktop-only {
    display: none;
  }
}

.mobile-only {
  display: none;
}
@media screen and (max-width: 1000px) {
  .mobile-only {
    display: block;
  }
}

#actions {
  text-align: center;
  border-top: 1px solid rgb(192, 192, 192);
  border-bottom: 1px solid rgb(192, 192, 192);
  background-color: rgba(255, 255, 255, 0.7);
  padding-top: calc(var(--padding-body) * 1.5);
  padding-bottom: calc(var(--padding-body) * 2);
}
#actions > * {
  padding-inline: var(--padding-body);
}

.badge {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  aspect-ratio: 1;
  --badge-rotation: 0deg;
  --badge-scale: 1;
  transform: rotate(var(--badge-rotation)) scale(var(--badge-scale));
}
.badge[data-popin-to-open]:hover {
  --badge-scale: 1.2;
}
.badge-base {
  --badge-rotation: 5deg;
  background: radial-gradient(rgb(185.9779005525, 118.0690607735, 190.4309392265), #773a7b);
}
.badge-base-first-play-recommended {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #5cc9fc, #004299);
}
.badge-base-first-play-recommended::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgb(255, 255, 255), rgba(255, 255, 255, 0));
  border-radius: 50%;
}
.badge-goddess-mandatory, .badge-goddess-recommended {
  --badge-rotation: -45deg;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle, rgb(252, 225, 181), rgb(210, 161, 82));
  border: 1px solid rgb(121, 69, 34);
}
.badge-goddess-mandatory::after, .badge-goddess-recommended::after {
  content: "";
  width: 4px;
  height: 4px;
  left: 4px;
  top: 4px;
  background: rgb(121, 69, 34);
  position: absolute;
  border-radius: 50%;
}
.badge-titans-mandatory::before, .badge-titans-recommended::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: #5c3a1a;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
.badge-titans-mandatory::after, .badge-titans-recommended::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at center, #4c91a6 0%, #1d4e5f 100%);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
.badge-promo {
  --badge-rotation: -45deg;
  background: radial-gradient(circle at 50% 40%, #fc5c5c, #b80606);
  width: 11.2px;
  height: 11.2px;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--padding);
  margin-bottom: calc(var(--padding) * 2);
}
.buttons .btn {
  font-size: 1.45rem;
}

.btn {
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 calc(var(--padding) / 2) gray;
  border-radius: 5px;
  padding: 0.6em 0.9em;
  background-color: white;
  font-variant: small-caps;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  font-size: 1.25rem;
  cursor: pointer;
  display: inline-block;
  user-select: none;
}
@media screen and (max-width: 1000px) {
  .btn {
    min-width: 180px;
  }
}
.btn-expansion {
  background-color: #a75596;
  color: white;
}
.btn-goddess {
  background-color: #d2a152;
  color: white;
}
.btn-random {
  background-color: black;
  color: white;
}
.btn-titans {
  background-color: #41948a;
  color: white;
}
.btn:hover {
  box-shadow: 0 0 var(--padding) gray;
}
.btn:focus {
  box-shadow: 0 0 calc(var(--padding) / 2) inset gray;
}

.board-wrapper {
  overflow: hidden;
  padding-block: var(--padding-body);
}

.board {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  font-size: 1rem;
  gap: var(--padding);
  padding-inline: var(--padding-body);
}
@media screen and (max-width: 1000px) {
  .board {
    flex-direction: column;
  }
}
.board.card-the-dice-tower {
  position: relative;
  left: calc(50% + var(--padding) / 2);
}
@media screen and (max-width: 1000px) {
  .board.card-the-dice-tower {
    left: 0;
  }
}
.board .row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 190px;
  gap: var(--padding);
  width: calc((100% - 7 * var(--padding)) / 8);
}
@media screen and (max-width: 1000px) {
  .board .row {
    flex-direction: row;
    max-width: 100%;
    width: 100%;
  }
}
.board .row:first-child {
  align-self: center;
}
.board .slot {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--padding);
}
@media screen and (max-width: 1000px) {
  .board .slot {
    width: 200px;
    max-width: calc((100% - var(--padding)) / 2);
  }
}
.board .slot .card:not(:first-child) {
  margin-top: -3rem;
}
@media screen and (max-width: 1000px) {
  .board .slot .card:not(:first-child) {
    margin-top: -5rem;
  }
}

.card {
  box-shadow: 0 0 calc(var(--padding) / 2) gray;
  border-radius: calc(var(--padding) / 2);
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: calc(var(--padding) / 2);
  width: 100%;
  aspect-ratio: 174/270;
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .card {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 1000px) {
  .card {
    font-size: 1rem;
  }
}
@media screen and (max-width: 500px) {
  .card {
    font-size: 0.9rem;
  }
}
.card-badge-goddess-mandatory {
  background-color: #d2a152;
  background: radial-gradient(circle, rgb(252, 225, 181) 0%, rgb(210, 161, 82) 100%);
}
.card-badge-titans-mandatory {
  background-color: #41948a;
  background: radial-gradient(circle, rgb(161, 237, 228) 0%, rgb(65, 148, 138) 100%);
}
.card .badge {
  position: absolute;
  top: calc(var(--padding) / 2 / 2);
  right: calc(var(--padding) / 2 / 2);
}

/********/
/* COST */
/********/
.cost,
.vp {
  font-weight: bold;
  font-size: 1.6em;
  display: flex;
  justify-content: center;
}
.cost-no-cost, .cost-double,
.vp-no-cost,
.vp-double {
  margin-top: calc(var(--padding) / 1.5);
}
.cost-plus,
.vp-plus {
  margin: 0 0.2em;
}
.cost img,
.vp img {
  margin-left: 0.185em;
  height: 1em;
  width: auto;
}

/********************/
/* NAME AND PICTURE */
/********************/
.card-name {
  font-variant: small-caps;
}

.card-name-and-picture {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  color: black;
}
.card-name-and-picture .card-name {
  font-size: 1.3em;
  margin: 0.2em 0 0.5em;
}
.card-name-and-picture .img-wrapper {
  flex-grow: 1;
  position: relative;
}
.card-name-and-picture img {
  width: auto;
  height: auto;
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

section.click-description {
  text-align: center;
  padding-inline: var(--padding-body);
  margin-bottom: calc(var(--padding-body) * 1.5);
}

#popin-content-wrapper[data-popin-wrapper-name=codex] {
  max-width: 100%;
  width: 100%;
  background-image: url("images/bg-codex.webp");
  background-attachment: local;
  color: white;
}

[data-popin-name=codex] header {
  text-align: center;
}
[data-popin-name=codex] header h2 {
  font-size: 2rem;
}
[data-popin-name=codex] h3 {
  text-align: center;
  margin-block: calc(var(--padding) * 2) var(--padding);
}
[data-popin-name=codex] .box-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding);
  justify-content: center;
}
[data-popin-name=codex] .card {
  width: 150px;
  max-width: calc(50% - var(--padding) / 2);
  text-align: center;
  color: black;
}

[data-popin-name=faq] .card-image.desktop-only.image-counter-1 {
  float: right;
  margin-left: var(--padding);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-2 {
  float: left;
  margin-right: calc(var(--padding) * 2);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-3 {
  float: right;
  margin-left: var(--padding);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-4 {
  float: left;
  margin-right: calc(var(--padding) * 2);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-5 {
  float: right;
  margin-left: var(--padding);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-6 {
  float: left;
  margin-right: calc(var(--padding) * 2);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-7 {
  float: right;
  margin-left: var(--padding);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-8 {
  float: left;
  margin-right: calc(var(--padding) * 2);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-9 {
  float: right;
  margin-left: var(--padding);
}
[data-popin-name=faq] .card-image.desktop-only.image-counter-10 {
  float: left;
  margin-right: calc(var(--padding) * 2);
}
[data-popin-name=faq] h2 {
  text-align: center;
}
[data-popin-name=faq] section {
  margin-top: 1em;
  text-align: justify;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=faq] h3 {
    text-align: center;
  }
}
[data-popin-name=faq] li + li {
  margin-top: 0.5rem;
}

.flags {
  font-size: 0;
  position: absolute;
  top: 0;
  right: 0;
  margin-right: var(--padding-body);
}

.flag {
  margin-left: var(--padding);
  display: inline-block;
}
.flag img {
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.flag img:hover {
  opacity: 1;
}
.flag-selected img {
  box-shadow: 0 0 calc(var(--padding) / 2) gray;
  opacity: 1;
}

footer {
  position: relative;
  text-align: center;
}
footer > * {
  padding-inline: var(--padding-body);
  padding-block: var(--padding-body);
}
@media screen and (max-width: 1000px) {
  footer > * {
    padding-block: calc(var(--padding-body) * 1.5);
  }
}
footer .image-large-desktop {
  padding-block: calc(var(--padding-body) * 1.3) calc(var(--padding-body) * 2);
  top: 0;
  right: 50px;
}
footer .image-large-desktop img {
  max-width: 400px;
}
footer .footer-codex-and-faq {
  display: flex;
  justify-content: center;
  gap: calc(2 * var(--padding));
}
@media screen and (max-width: 1000px) {
  footer .footer-codex-and-faq {
    flex-direction: column;
    gap: var(--padding);
  }
}
footer .footer-codex-and-faq div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--padding);
}
footer .footer-codex-and-faq div:last-child p {
  text-align: right;
}
footer .footer-codex-and-faq .separator {
  width: 1px;
  background-color: gray;
  margin: calc(1.75 * var(--padding));
}
@media screen and (max-width: 1000px) {
  footer .footer-codex-and-faq .separator {
    display: none;
  }
}
footer .footer-codex-and-faq hr {
  display: none;
}
@media screen and (max-width: 1000px) {
  footer .footer-codex-and-faq hr {
    display: block;
    width: 100%;
  }
}
footer .footer-codex-and-faq img {
  max-height: 80px;
  max-width: 80px;
  height: auto;
  width: auto;
}
footer .footer-codex-and-faq p {
  max-width: 240px;
  text-align: left;
  font-size: 1.1rem;
}
footer .legend {
  border-top: 1px solid rgb(192, 192, 192);
  border-bottom: 1px solid rgb(192, 192, 192);
  background-color: rgba(255, 255, 255, 0.7);
}

#goodies {
  margin-block: var(--padding-body);
  font-size: 0;
  padding: 0;
}
#goodies [data-visible="0"] {
  height: 0;
  overflow: hidden;
  opacity: 0;
  display: none;
}
#goodies [data-visible="0"].transitioning {
  display: block;
}
#goodies-click {
  font-size: 1.25rem;
  padding-inline: var(--padding-body);
}
#goodies-click[data-visible="0"] {
  padding: 0;
}
#goodies-click .nb {
  background-color: #fc5c5c;
  padding-inline: 0.5em;
  border-radius: calc(var(--padding) / 2);
  color: white;
}
#goodies-selection {
  transition: opacity 0.3s;
  opacity: 1;
  font-size: 1rem;
  border-top: 1px solid rgb(192, 192, 192);
  border-bottom: 1px solid rgb(192, 192, 192);
  padding-top: var(--padding);
}
#goodies-selection[data-visible="0"] {
  padding: 0;
}
#goodies-selection > * {
  padding-inline: var(--padding-body);
}
#goodies #goodies-select-buttons {
  margin-bottom: var(--padding);
}
#goodies #goodies-select-buttons .btn[data-visible="0"] {
  display: none;
}
#goodies h3 + p {
  margin-bottom: var(--padding);
}
#goodies .card-name {
  font-weight: bold;
}

.goodies-type {
  border-top: 1px solid rgb(192, 192, 192);
}
.goodies-type:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.7);
}
.goodies-type-presentation {
  margin-right: var(--padding);
}
@media screen and (max-width: 1000px) {
  .goodies-type-presentation {
    margin-right: 0;
  }
}
.goodies-type-description {
  margin-block: calc(var(--padding) / 2) var(--padding);
}
.goodies-type-content {
  padding-block: var(--padding);
  max-width: 1300px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  .goodies-type-content {
    flex-direction: column;
  }
}

.goodies {
  display: flex;
  justify-content: flex-end;
  gap: var(--padding);
}
@media screen and (max-width: 500px) {
  .goodies {
    flex-direction: column;
  }
}

.goodie {
  padding: calc(var(--padding) / 2);
  border-radius: calc(var(--padding) / 2);
  background-color: white;
  user-select: none;
  cursor: default;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 0 calc(var(--padding) / 2) gray;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .goodie {
    width: auto;
    flex: 1;
  }
}
@media screen and (max-width: 500px) {
  .goodie {
    width: 100%;
    flex-direction: row;
  }
}
.goodie[data-selected="1"] {
  background-color: #773a7b;
  color: white;
}
.goodie .unique-card-label {
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  border: 1px solid rgb(192, 192, 192);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: calc(var(--padding) / 2);
}
.goodie .name-and-cost {
  margin-bottom: 0.5em;
  font-variant: small-caps;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 0.3em 0.5em;
  font-size: 1.2rem;
}
@media screen and (max-width: 500px) {
  .goodie .name-and-cost {
    margin-right: 0.4em;
  }
}
.goodie .cost {
  white-space: nowrap;
  display: inline-flex;
  font-size: 1.2rem;
}
.goodie .cost img {
  height: 1.1rem;
  margin-top: 0.05em;
}
.goodie .image {
  max-width: 120px;
  margin: auto;
}
.goodie .image img {
  max-width: 100%;
  max-height: 120px;
  height: auto;
  display: block;
  margin: auto;
}
.goodie input[type=checkbox] {
  width: 20px;
  height: 20px;
  accent-color: #773a7b;
  border: 0;
  border: none;
  border-image-width: 0;
  border: white;
}
.goodie .check {
  position: absolute;
  bottom: 5px;
  left: 2px;
}

header {
  position: relative;
}
header h1 {
  text-align: center;
  font-size: 0;
  margin-top: var(--padding-body);
}
header h1 img {
  width: 300px;
  max-width: 90%;
  height: auto;
}
header .image-large-desktop {
  top: 0;
  margin-left: var(--padding-body);
  display: block;
}
@media screen and (max-width: 1000px) {
  header .image-large-desktop {
    display: none;
  }
}

#popin-content-wrapper[data-popin-wrapper-name=how-to] .popin-previous {
  display: none;
}
#popin-content-wrapper[data-popin-wrapper-name=how-to] .flags {
  top: var(--padding-body);
  left: var(--padding-body);
  right: auto;
  z-index: 1;
  display: block;
}
#popin-content-wrapper[data-popin-wrapper-name=how-to] .flag:first-child {
  margin-left: 0;
}
#popin-content-wrapper[data-popin-wrapper-name=how-to] .flag img {
  width: 2.25rem;
  height: 2.25rem;
}
#popin-content-wrapper[data-popin-wrapper-name=how-to] .btn {
  font-size: 1.5rem;
}

@media screen and (max-width: 500px) {
  [data-popin-name=how-to] {
    padding-top: calc(2.25rem + var(--padding));
  }
}
@media screen and (max-width: 500px) {
  [data-popin-name=how-to].popin-heavy-text header {
    padding: 0;
    margin-bottom: var(--padding);
  }
}
[data-popin-name=how-to] h2,
[data-popin-name=how-to] h3 {
  text-align: center;
  text-decoration: underline;
}
[data-popin-name=how-to] .mobile-only {
  margin-top: var(--padding);
  text-align: center;
}
[data-popin-name=how-to] .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--padding));
  margin-top: var(--padding);
}
@media screen and (min-width: 1001px) {
  [data-popin-name=how-to] .row:first-child {
    display: none;
  }
}
[data-popin-name=how-to] .row img {
  max-height: 200px;
  max-width: 170px;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=how-to] .row img {
    max-width: 100%;
  }
}
[data-popin-name=how-to] .left,
[data-popin-name=how-to] .right {
  min-width: 170px;
  text-align: center;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=how-to] .left,
  [data-popin-name=how-to] .right {
    min-width: 0;
    max-width: 50%;
  }
}
[data-popin-name=how-to] p {
  text-align: center;
}
[data-popin-name=how-to] p:nth-child(1), [data-popin-name=how-to] p:nth-child(2) {
  font-size: 1.25rem;
}
[data-popin-name=how-to] p em {
  font-size: 1.3em;
}
[data-popin-name=how-to] p em:first-child {
  margin-right: 0.2em;
}
[data-popin-name=how-to] hr {
  margin: var(--padding) 0;
}
[data-popin-name=how-to] li {
  margin: var(--padding) auto 0;
}
[data-popin-name=how-to] li:first-child {
  margin-top: 0;
  list-style-type: "🎴 ";
}
[data-popin-name=how-to] li:nth-child(2) {
  list-style-type: "❓ ";
}
[data-popin-name=how-to] li:nth-child(3) {
  list-style-type: "📚 ";
}

section.intro {
  padding-inline: var(--padding-body);
}
section.intro .explanations {
  margin-bottom: calc(var(--padding) * 0.5);
}
section.intro hr {
  max-width: 250px;
}
section.intro ul {
  text-align: center;
  margin-bottom: calc(var(--padding) * 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
section.intro li {
  display: flex;
  align-items: center;
}
section.intro li + li:before {
  content: "•";
  display: inline-block;
  padding-inline: calc(var(--padding) / 2);
}

.legend {
  text-align: center;
  line-height: 1.5em;
}
.legend .badge-definition {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 1em;
  margin-bottom: 0.3em;
}
.legend .badge-definition:nth-of-type(odd) {
  background-color: rgba(192, 192, 192, 0.3);
}
.legend .badge {
  margin-right: 0.5em;
  top: 1px;
}

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f4f2e9;
  background-image: url("images/bg.webp");
  box-shadow: 0 0 20px black;
  z-index: 1000;
  transform: translateY(0);
  transition: transform 0.5s ease;
}
#loader[data-visible="0"] {
  transform: translateY(calc(-100% - 20px));
}
#loader[data-visible="0"] div {
  opacity: 0;
}
#loader img {
  display: inline-block;
  max-width: 80%;
  max-height: 70%;
  height: auto;
  width: auto;
}
#loader div {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  font-weight: bold;
  font-size: 2.5rem;
  margin-top: 0.8em;
  text-shadow: 0 0 20px white;
  opacity: 1;
  transition: opacity 0.5s ease;
}
@media screen and (max-width: 1000px) {
  #loader div {
    font-size: 1.5rem;
  }
}

#popin-overlay {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: var(--padding-body);
}
#popin-overlay.transition {
  opacity: 1;
}
#popin-overlay.transition #popin-content-wrapper {
  transform: scale(1);
}
#popin-overlay.open {
  display: flex;
}

#popin-content-wrapper {
  background-image: url("images/bg2.webp");
  padding: var(--padding-body);
  position: relative;
  transition: transform 0.3s ease;
  transform: scale(0.85);
  display: none;
  min-width: 550px;
  max-width: 900px;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 1rem;
}
@media screen and (max-width: 1000px) {
  #popin-content-wrapper {
    min-width: 0;
  }
}
#popin-content-wrapper.open {
  display: block;
}
#popin-content-wrapper.small {
  max-width: 600px;
}
#popin-content-wrapper.big {
  max-width: 100%;
}
#popin-content-wrapper .flags {
  display: none;
}
#popin-content-wrapper .btn-wrapper {
  text-align: center;
  margin-top: var(--padding-body);
  clear: both;
  display: flex;
  justify-content: center;
  gap: var(--padding);
}
#popin-content-wrapper .btn-wrapper .btn {
  display: flex;
  align-items: center;
  gap: calc(var(--padding) / 2);
  justify-content: center;
}
#popin-content-wrapper .btn-wrapper .btn .picto {
  font-size: 2em;
}
#popin-content-wrapper .btn-wrapper .btn[data-popin-previous] .picto {
  margin-top: 0.1em;
}
#popin-content-wrapper .btn-wrapper .btn.hidden {
  display: none;
}

.popin-icon {
  position: absolute;
  top: var(--padding-body);
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  user-select: none;
}

.popin-previous {
  left: var(--padding-body);
  transition: text-shadow 0.3s ease;
  font-size: 2.8rem;
}
.popin-previous:hover {
  text-shadow: 0 0 var(--padding) gray;
}

.popin-close {
  right: var(--padding-body);
  border: 4px solid currentColor;
  border-radius: 50%;
  transition: box-shadow 0.3s ease;
}
.popin-close::before, .popin-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.35rem;
  height: 4px;
  background-color: currentColor;
  transform-origin: center;
}
.popin-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.popin-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.popin-close:hover {
  box-shadow: 0 0 var(--padding) gray;
}

.popin-content {
  display: none;
}
.popin-content.open {
  display: block;
}
.popin-content > header {
  margin: 0 calc(2.25rem + var(--padding-body));
}

.loading {
  display: none;
  align-items: flex-end;
  margin: 3rem;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  .loading {
    margin: 1.5rem;
    margin-top: 3rem;
  }
}
.loading.open {
  display: flex;
}
.loading p {
  font-size: 2rem;
  line-height: 1;
  margin-right: 0.5em;
}
@media screen and (max-width: 1000px) {
  .loading p {
    font-size: 1.5rem;
  }
}

.spinner {
  display: flex;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: black;
  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.popin-heavy-text header {
  padding: calc(var(--padding) / 2) var(--padding);
}
.popin-heavy-text section + section {
  border-top: 1px solid black;
  margin-top: var(--padding);
  padding-top: var(--padding);
}
.popin-heavy-text li + h3, .popin-heavy-text li + p,
.popin-heavy-text ol + h3,
.popin-heavy-text ol + p,
.popin-heavy-text p + h3,
.popin-heavy-text p + p,
.popin-heavy-text ul + h3,
.popin-heavy-text ul + p {
  margin-top: var(--padding);
}
.popin-heavy-text p,
.popin-heavy-text li {
  line-height: 1.25em;
}
.popin-heavy-text p img,
.popin-heavy-text li img {
  height: 1em;
  width: auto;
  position: relative;
  top: 0.15em;
}
.popin-heavy-text p img.face, .popin-heavy-text p img.other, .popin-heavy-text p img.space, .popin-heavy-text p img.token,
.popin-heavy-text li img.face,
.popin-heavy-text li img.other,
.popin-heavy-text li img.space,
.popin-heavy-text li img.token {
  height: 1.75em;
  top: 0.25em;
}
.popin-heavy-text p img.timing,
.popin-heavy-text li img.timing {
  height: 1.25em;
  top: 0.25em;
}
.popin-heavy-text p span.unbr,
.popin-heavy-text li span.unbr {
  display: inline-flex;
  align-items: baseline;
}
.popin-heavy-text p span.unbr.ws,
.popin-heavy-text li span.unbr.ws {
  gap: 0.2em;
}
.popin-heavy-text p span.unbr img.resource,
.popin-heavy-text li span.unbr img.resource {
  align-self: center;
  position: relative;
  top: -0.05em;
}
.popin-heavy-text ol,
.popin-heavy-text ul {
  padding-inline-start: 20px;
}
.popin-heavy-text ol + p,
.popin-heavy-text ul + p {
  margin-top: var(--padding);
}
.popin-heavy-text ol {
  list-style-type: decimal;
}
.popin-heavy-text ol ol {
  list-style-type: lower-alpha;
}
.popin-heavy-text ul {
  list-style-type: disc;
}
.popin-heavy-text img.face {
  border: 1px solid black;
}
.popin-heavy-text .bgg-thread {
  font-variant: small-caps;
}

[data-popin-name=rules] header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 calc(var(--padding) / 2) gray;
  border-radius: 0.7em;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=rules] header {
    margin-inline: 0;
    margin-top: var(--padding);
    flex-direction: column;
    gap: calc(var(--padding) / 2);
  }
}
[data-popin-name=rules] header.type-badge-goddess-mandatory {
  background-color: #d2a152;
  background: radial-gradient(circle, rgb(252, 225, 181) 0%, rgb(210, 161, 82) 100%);
}
[data-popin-name=rules] header.type-badge-titans-mandatory {
  background-color: #41948a;
  background: radial-gradient(circle, rgb(161, 237, 228) 0%, rgb(65, 148, 138) 100%);
}
[data-popin-name=rules] header > * {
  display: flex;
  gap: var(--padding);
  align-items: center;
}
[data-popin-name=rules] header .card-name {
  font-size: 1.8rem;
}
[data-popin-name=rules] header .vp-and-cost {
  flex-grow: 1;
  margin-left: var(--padding);
  justify-content: space-between;
  align-items: baseline;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=rules] header .vp-and-cost {
    margin-left: 0;
  }
}
[data-popin-name=rules] header .cost,
[data-popin-name=rules] header .vp {
  position: relative;
  top: 0.07em;
  margin-top: 0;
}
[data-popin-name=rules] .card-image.desktop-only {
  float: right;
  margin-block: var(--padding-body);
  margin-left: var(--padding-body);
}
[data-popin-name=rules] .card-image.mobile-only {
  text-align: center;
}
[data-popin-name=rules] .card-image img {
  width: auto;
  height: auto;
  max-width: 200px;
  max-height: 200px;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=rules] .card-image img {
    max-width: 100px;
    max-height: 100px;
  }
}
[data-popin-name=rules] .card-rules {
  margin-top: 1em;
}
[data-popin-name=rules] .card-rules section {
  display: flex;
  gap: var(--padding);
  align-items: center;
}
[data-popin-name=rules] .card-rules section > img,
[data-popin-name=rules] .card-rules section > .img {
  align-self: start;
  max-width: 100px;
  height: auto;
}
@media screen and (max-width: 1000px) {
  [data-popin-name=rules] .card-rules section > img,
  [data-popin-name=rules] .card-rules section > .img {
    max-width: 80px;
  }
}
[data-popin-name=rules] .card-rules section .img {
  text-align: center;
}
[data-popin-name=rules] .card-rules section .img > img {
  max-width: 100%;
  height: auto;
}
[data-popin-name=rules] .card-rules section .img > img + img {
  margin-top: calc(var(--padding) / 2);
}
[data-popin-name=rules] .card-rules h3.specific-interactions {
  margin-top: calc(var(--padding) * 2);
  padding-block: calc(var(--padding) * 2) var(--padding);
  border-top: 4px dashed black;
  border-bottom: 1px solid black;
}
[data-popin-name=rules] .card-rules h3.specific-interactions:before {
  content: "💥 ";
}
[data-popin-name=rules] .card-rules .flex-centered {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.suggestions {
  max-width: 860px;
  margin: auto;
}
.suggestions ul {
  column-count: 2;
  column-gap: 2rem;
  list-style-type: disc;
  list-style-position: inside;
  text-align: left;
}
@media screen and (max-width: 1000px) {
  .suggestions ul {
    column-count: 1;
    text-align: center;
    list-style-type: none;
  }
}
.suggestions li {
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1000px) {
  .suggestions li {
    margin-bottom: 1em;
  }
}

.unique-card-label {
  position: absolute;
  top: 0;
  left: 0;
  padding-inline: calc(var(--padding) / 2 / 4);
  border: 1px solid rgb(192, 192, 192);
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: calc(var(--padding) / 2);
  font-size: 0.8em;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  .unique-card-label {
    font-size: 0.9em;
  }
}
.unique-card-label .icon {
  font-size: 1.5em;
}