body {
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
}

svg#svg-defs {
    /*
    Note that "display: none" won't work because we still want to access
    the defs using #ids.
    */
    height: 0;
    width: 0;
}

div#body-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0 auto;
}

div#game-wrapper {
    position: relative;
    aspect-ratio: 9 / 16;
    --half-moon-size: calc(30 * var(--gh));
}
/* --gh is 1% of height of div#game-wrapper */
@media (min-aspect-ratio: 9 / 16) {
    div#game-wrapper {
        height: 100vh;
        --gh: 1vh;
    }
}
@media (max-aspect-ratio: 9 / 16) {
    div#game-wrapper {
        width: 100vw;
        --gh: calc(16 / 9 * 1vw);
    }
}

div.scene {
    display: none;
}

div#background,
div.scene.visible,
div#popup-layer.visible {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}

div.scene.fading {
    pointer-events: none;
}

/* Background */

div#background {
    background: linear-gradient(
        90deg,
        rgb(124, 155, 255) 0%,
        rgb(93 122 218) 25%,
        rgb(59 84 167) 50%,
        rgb(39 60 128) 75%,
        rgb(50 65 100) 100%
    );
    /* The half moon SVG needs this: */
    overflow: hidden;
}

svg#half-moon {
    display: block;
    position: relative;
    width: var(--half-moon-size);
    top: calc(var(--half-moon-size) / -2);
    margin: 0 auto;
}

/* Loading scene */

div#loading-scene.visible {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div#loading-card-wrapper svg.card {
    position: static;
}

/* Menu scene */

div#menu-scene.visible,
div#game-static-layer,
div#progress-scene.visible,
div#custom-settings-scene.visible {
    padding-top: calc(var(--half-moon-size) * 0.55);
    box-sizing: border-box;
}

div#menu-scene > :not(:last-child) {
    margin-bottom: 4em;
}

div#menu-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2em;
    gap: 0.3em;
}

div#menu-buttons > button {
    display: block;
    padding: 0.3em 0;
    font-size: inherit;
}

p#best-record-text {
    margin-left: calc(3 * var(--gh));
    margin-right: calc(3 * var(--gh));
}

/* Game scene */

div#game-scene {
    /* In order for "fly-in" animations to work: */
    overflow: hidden;
}

div#game-floating-layer > * {
    position: absolute;
}

div#game-static-layer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: calc(3 * var(--gh));
    padding-right: calc(3 * var(--gh));
    height: 100%;
    width: 100%;
}

button#exit-button {
    top: calc(3 * var(--gh));
    left: calc(3 * var(--gh));
}

div#lunar-cards-placeholder-wrapper {
    width: 100%;
    padding: calc(3 * var(--gh)) 0;
}

div#lunar-cards-placeholder,
div#user-cards-placeholder {
    margin: 0 auto;
}

div#game-board {
    margin: calc(1.5 * var(--gh)) auto;
    box-sizing: border-box;
    height: calc(36 * var(--gh));
}

svg#edges {
    height: 100%;
}

div#lunar-score-bar,
div#user-score-bar {
    display: flex;
    gap: var(--gh);
    align-items: center;
}

div#lunar-score-bar {
    justify-content: flex-end;
}

div#user-score-bar {
    justify-content: flex-start;
}

span#lunar-score-text {
    color: #acbff3;
}

span#user-score-text {
    color: #dee7ff;
}

button#wildcards-button {
    transition: opacity 0.2s;
    float: right;
    margin-bottom: 0.6em;
}
button#wildcards-button:enabled {
    opacity: 1;
}
button#wildcards-button:disabled {
    opacity: 0;
}

div#dialogue-box {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    border: solid 2px white;
    padding: 0 0.5em;
    color: #b3bfff;
}

span.emphasized-text {
    color: white;
}

/* Game floating layer */

div#game-board-slots > button {
    position: absolute;
    background-color: #212c53;
    border: solid 2px #3b447f;
    border-radius: 0;
    padding: 0;
}
div#game-board-slots.enabled > button,
div#game-board-slots > button.forced {
    cursor: pointer;
}
div#game-board-slots > button > svg {
    padding: 6%;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s;
}
div#game-board-slots.enabled > button:hover > svg,
div#game-board-slots > button.forced > svg {
    opacity: 1;
}

div#user-hand.enabled > svg.card {
    cursor: pointer;
}

svg#user-card-selection-box {
    transform: scale(1.2);
    transition: opacity 0.2s, left 0.2s ease;
}

div#stars svg.star {
    position: absolute;
}

/* Progress Scene */

div#progress-scene.visible,
div#custom-settings-scene.visible {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
    padding-left: calc(3 * var(--gh));
    padding-right: calc(3 * var(--gh));
}

div#progress-buttons,
div#custom-settings-buttons {
    display: flex;
    align-items: center;
    gap: calc(3 * var(--gh));
}

div#progress-buttons > button {
    box-sizing: border-box;
    height: 100%;
}

button#leave-button {
    display: flex;
    align-items: center;
    padding: 0.35em;
}

button#leave-button > svg {
    height: 100%;
}

button#leave-button.expanded {
    gap: 0.3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

table#progress-stats th {
    font-weight: normal;
    text-align: right;
    padding-right: 0.5em;
    color: #c6d5ff;
}

div#progress-wildcard-inner {
    position: relative;
    margin: 0 auto;
    --wildcard-progress-inner-size: calc(30 * var(--gh));
    height: var(--wildcard-progress-inner-size);
    width: var(--wildcard-progress-inner-size);
}

div#progress-wildcard-inner > * {
    position: absolute;
    width: 100%;
    height: 100%;
}

div#unlocked-wildcard-icon {
    --wildcard-sprite-size: var(--wildcard-progress-inner-size);
}

/* Custom settings scene */

div#custom-settings {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: calc(2 * var(--gh));
}

div#custom-settings > label {
    text-align: right;
}

/* Popup */

div#popup-layer,
div.popup {
    display: none;
}

div.popup.visible {
    display: initial;
}

div#popup-layer.visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
}

div#popup-layer.fading {
    pointer-events: none;
}

/* Exit confirm popup */

div#exit-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: calc(3 * var(--gh));
}

/* Wildcard popup */

div#wildcard-popup-body {
    display: flex;
    height: calc(75 * var(--gh));
    justify-content: center;
}

div#wildcard-menu {
    overflow-y: auto;
    width: calc(10 * var(--gh));
    height: 100%;
    padding-top: calc(0.5 * var(--gh));
}

div#wildcard-info-container {
    overflow-y: auto;
    width: calc(36 * var(--gh));
    height: 100%;
    margin-left: calc(1.5 * var(--gh));
}

div#wildcard-menu > button {
    --wildcard-sprite-size: calc(7 * var(--gh));
    margin: 0 auto;
    cursor: pointer;
    border: none;
}
div#wildcard-menu > button:not(:last-child) {
    margin-bottom: var(--gh);
}

div#wildcard-icon {
    --wildcard-sprite-size: calc(10 * var(--gh));
    float: right;
}

p#wildcard-name {
    margin-top: 0;
}

p#wildcard-origin {
    color: #ec79a9;
}

button#wildcard-play-button:not(.display-none) {
    display: block;
    margin: calc(3 * var(--gh)) auto;
}

button#close-wildcard-popup-button {
    display: block;
    margin: 0 auto;
}

/* svg.card coloring */

svg.card {
    --white-border: #ecf1ff;
    --black-border: black;
    --gray-border: #3e558a;
    position: absolute;
    /* The actual position will be set dynamically. */
    transform-style: preserve-3d;
}

svg.card.gray path.frame {
    stroke: var(--gray-border);
    fill: #25355e;
}

svg.card.black path.frame {
    stroke: var(--black-border);
    fill: #10183a;
}

svg.card.white path.frame {
    stroke: var(--white-border);
    fill: #7697ef;
}

svg.card.back path.frame {
    stroke: #c8d6e1;
    fill: url(#card-back-fill);
}

svg.card.gray .stars,
svg.card.gray .beams {
    fill: var(--gray-border);
}

svg.card.black .stars,
svg.card.black .beams {
    fill: var(--black-border);
}

svg.card.white .stars,
svg.card.white .beams {
    fill: var(--white-border);
}

svg.card .moon {
    fill: #40578c;
}
svg.card.back .moon {
    fill: rgb(150 163 191);
}

svg.card .phase,
svg.card .stars,
svg.card .beams,
svg.card .question-mark {
    visibility: hidden;
}

svg.card.new-moon .stars,
svg.card.waxing-crescent .stars.left,
svg.card.waxing-crescent .beams.right,
svg.card.first-quarter .stars.left,
svg.card.first-quarter .beams.right,
svg.card.waxing-gibbous .stars.left,
svg.card.waxing-gibbous .beams.right,
svg.card.waning-crescent .stars.right,
svg.card.waning-crescent .beams.left,
svg.card.final-quarter .stars.right,
svg.card.final-quarter .beams.left,
svg.card.waning-gibbous .stars.right,
svg.card.waning-gibbous .beams.left,
svg.card.full-moon .beams,
svg.card.waxing-crescent .phase.waxing-crescent,
svg.card.first-quarter .phase.first-quarter,
svg.card.waxing-gibbous .phase.waxing-gibbous,
svg.card.waning-crescent .phase.waning-crescent,
svg.card.final-quarter .phase.final-quarter,
svg.card.waning-gibbous .phase.waning-gibbous,
svg.card.full-moon .phase.full-moon,
svg.card.back .question-mark {
    visibility: visible;
}

svg.card.clickable {
    cursor: pointer;
}

/* svg.star coloring */

svg.star {
    width: calc(2.7 * var(--gh));
}
svg.star.black path {
    fill: black;
    stroke: #35467d;
}
svg.star.white path {
    fill: white;
    stroke: #8494c3;
}

/* svg#edges coloring */

/* The variable --esh (Edges SVG Height) is set in JS dynamically. */

svg#edges > line {
    stroke: #58638b;
    stroke-width: var(--esh);
}

circle.full-moon-symbol {
    fill: white;
    r: calc(1.8 * var(--esh));
}

g.phase-pair-symbol {
    stroke: white;
    stroke-width: calc(0.6 * var(--esh));
    fill: none;
}
g.phase-pair-symbol > circle {
    r: calc(1.2 * var(--esh));
}

svg#edges > line.lunar-cycle-symbol {
    stroke: white;
    stroke-width: calc(2 * var(--esh));
}

/* Slot indicator SVG */

rect.slot-indicator {
    fill: none;
    stroke: white;
    stroke-width: 3;
    stroke-dasharray: 8 4;
    height: 100%;
    width: 100%;
}

/* General stuffs */

p,
th,
td,
label {
    color: white;
}

p {
    margin: 0.2em 0;
}

a {
    color: #bdcfff;
}
a:visited {
    color: #a2bbff;
}
a:hover {
    color: #cad7ff;
}

select {
    font-family: inherit;
}

button.ui {
    font-family: inherit;
    background: linear-gradient(
        90deg,
        rgb(96 134 255) 0%,
        rgb(158 128 255) 100%
    );
    color: white;
    border-style: solid;
    border-image: url("images/button_border.png") 30 / 0.7em / 0.1em;
    padding: 0.2em 0.6em;
}
button.ui:enabled {
    cursor: pointer;
}
button.ui:enabled:hover {
    background: linear-gradient(
        90deg,
        rgb(58 104 255) 0%,
        rgb(137 101 255) 100%
    );
}

.wildcard-sprite {
    background-image: url("images/wildcard_sprites.png");
    /*
        Our sprites have transparent pixels. Some widgets (like buttons)
        have default background color and we don't want that.
    */
    background-color: transparent;
    /* background-position to be set dynamically */
    /*
        Each sprite in wildcard_sprites.png is 100x100px, and its width
        is 400px. (Unfortunately we have to hardcode the "4")
    */
    background-size: calc(4 * var(--wildcard-sprite-size)) auto;
    width: var(--wildcard-sprite-size);
    height: var(--wildcard-sprite-size);
}

.fine-print {
    font-size: calc(2.25 * var(--gh));
    color: #c6d5ff;
}
.size-normal {
    font-size: calc(2.75 * var(--gh));
}
.size-large {
    font-size: calc(3.25 * var(--gh));
}
.size-mega {
    font-size: calc(4.5 * var(--gh));
}
.centered-text {
    text-align: center;
}
.display-none {
    display: none;
}