@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
    --card-scale: 1;
}
body {
    font-family: "PT Serif", serif;
    overflow: hidden;
    opacity: 0;
}
.main {
    padding: 16px;
}
h1 {
    font-size: 300%;
}
button {
    padding: 8px;
    border-radius: 8px;
    margin: 4px;
}
.account button, .footer button {
    background: black;
    color: white;
    fill: white;
}
#reroll {
    display: none;
    margin-top: 0;
    opacity: 0;
}
@keyframes reroll-active {
    from {
        margin-top: 0px;
        opacity: 0;
    }
    50% {
        margin-top: 0px;
        opacity: 0;
    }
    to {
        margin-top: 32px;
        opacity: 1;
    }
}
/* #preroll, #postroll, #result, #poem { display: none; } */
#postroll { width: 100%; }
#result-buttons button { cursor: default; }
#result-buttons button, #poem-buttons button {
    margin: 2px;
}
.poem-button > * { display: inline-block; }
.poem-button c {
    font-size: 50%;
    vertical-align: bottom;
}
.poem-button[disabled="true"] { background-color: #ddd; }
.poem-button.multiword { 
    padding: 8px 2px;
    font-size: 70%;
    background-color: #d8d8d8;
    margin: 1px !important;
}
.poem-button.multiword:hover { background-color: #aaa; }

input, textarea { padding: 4px; border-radius: 8px !important; margin: 2px; border: 1px black solid; overflow: hidden; }

.trash { color: gray; text-shadow: none; }
.common { color: black; text-shadow: none; }
.uncommon { color: green; text-shadow: none; }
button.common {
    background-color: #f4f4f6;
    color: black;
}
button.uncommon {
    border-color: green;
    background-color: rgba(0, 128, 0, 0.25);
}
.rare { color: blue; text-shadow: none; }
button.rare {
    border-color: blue;
    background-color: rgba(0, 0, 255, 0.25);
}
.epic { color: purple; text-shadow: none; }
button.epic {
    border-color: purple;
    background-color: rgba(128, 0, 128, 0.25);
}
.unique { color: orange; text-shadow: none; }
button.unique {
    border-color: orange;
    background-color: rgba(255, 128, 0, 0.25);
}
.mythic { color: red; text-shadow: none; }
button.mythic {
    border-color: red;
    background-color: rgba(255, 0, 0, 0.25);
}
.legendary { 
    color: yellow;
    text-shadow: 0 0 1px black, 0 0 2px black, 0 0 4px black, 0 0 8px black; 
}
button.legendary {
    border: 1px solid yellow;
    background-color: rgba(0, 0, 0, 0.25);
}
.unreal { 
    color: cyan;
    text-shadow: 0 0 1px blue, 0 0 2px blue, 0 0 4px blue, 0 0 8px blue; 
}
button.unreal {
    border: 1px solid cyan;
    background-color: rgba(0, 0, 64, 0.5);
}
@property --color {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes aura-rainbow {
    from { --color: 0deg; }
    to { --color: 360deg; }
}
.infinity { 
    color: white;
    text-shadow: 0 0 1px hsl(var(--color), 100%, 50%), 0 0 2px hsl(var(--color), 100%, 50%), 0 0 4px hsl(var(--color), 100%, 50%), 0 0 8px hsl(var(--color), 100%, 50%); 
    fill: hsl(var(--color), 100%, 50%);
    --color: 0deg;
    animation: aura-rainbow 15s linear infinite;
    animation-delay: var(--rnd);
    --rnd: 0s;
}
button.infinity {
    border: 1px solid white;
    background-color: color-mix(in oklab, hsl(var(--color), 100%, 50%) 50%, transparent 50%);
}
button.ancient {
    background-color: #dda; 
    color: #ca2;
}

#reroll.active {
    display: unset;
    animation: aura-rainbow 15s linear infinite, reroll-active 2s forwards;
}

.logged-in .when-logged-out { display: none; }
.logged-out .when-logged-in { display: none; }

.layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none !important;
}
.layer > * { pointer-events: all; }
.hover-element {
    position: absolute;
    width: 20vw;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px;
    border-radius: 16px;
}
.hover-element::before {
    content: " ";
    position: absolute;
    left: calc(50% - 8px);
    top: -14.5px;
    border-left: 8px solid transparent;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 0, 0, 0.8);
}

#help, #user {
    height: calc(100% - 64px);
    margin: 32px;
    padding: 32px;
    border: 4px solid black;
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
}
#alert, #enchant {
    width: min(calc(100% - 64px), 640px);
    margin: 32px;
    padding: 32px;
    border: 4px solid black;
    background-color: rgba(255, 255, 255, 0.9);
    display: none;
}
.help-tab { display: none; }
#help.active, .help-tab.active, #alert.active, #user.active, #enchant.active { display: flex; }
@keyframes enchant-scroll { from { height: 0; } to { height: 50vh; } }
#enchant.active {
    animation: enchant-scroll cubic-bezier(0.19, 1, 0.22, 1) 2s forwards;
    animation-delay: 0;
}
.alert-nav, .help-nav {
    margin: -32px;
    border-bottom: 4px solid black;
}
.help-nav > button, .alert-nav > button { 
    border: 4px solid black; 
    margin: -3px -2px;
    border-radius: 0;
}
.help-nav > button.active, .leaderboard-nav > button.active, .time-nav > button.active {
    background-color: black;
    color: white; 
} 
.alert-nav > p {
    padding: 8px;
}
.help-tab, .alert-tab {
    margin-top: 64px;
}
#help-main, #leaderboard-, #help-changelog, #help-infinities, #user-main, #enchant-main {
    overflow-y: scroll;
    padding-right: 16px;
    height: 1px;
}
.lb-entry {
    margin-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid lightgray;
    align-items: center;
}
#leaderboard- .spacer {
    flex: 999 1 auto !important;
}

h2 {
    font-size: 200%;
    line-height: 1.5;
    margin-top: 8px;
}
h3 {
    font-size: 150%;
    line-height: 1.5;
    margin-top: 8px;
}
#help-changelog p, #help-main p {
    line-height: 1.25;
}

button svg {
    width: 16px;
}

p::before {
    content: attr(title);
    -webkit-text-stroke: 4px white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.main-inner .fade-black p::before {
    -webkit-text-stroke: 4px black !important;
}
.main-inner .fade-black p { color: white; }

.footer {
    background: black; 
    margin: 0 -16px; 
    padding: 0 16px; 
    transform: translate(0, -16px) rotate(-1deg);
}
@keyframes slide-in {
    from { clip-path: xywh(0 0 100% 0); }
    to { clip-path: xywh(0 0 100% 120%); }
}
.footer > * {
    animation-name: slide-in;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.version {
    color: white;
    align-self: center;
}

@keyframes fade-in {
    from { opacity: 0; }
    10% { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation-name: fade-in;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fade-out {
    from { opacity: 1; }
    10% { opacity: 1; }
    to { opacity: 0; }
}
.fade-out {
    animation-name: fade-out;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
button[disabled] {
    cursor: default;
}


.card {
    --bg: white;
    border: 0px solid var(--bg) !important;
    border-radius: 8px;
    padding: 0; 
    width: 220px; 
    height: 340px;
    box-shadow: inset 0 0 16px black, 0 0 32px var(--bg);
    background-color: var(--bg) !important;
    color: black !important;
}
@keyframes card-slide-in {
    from { transform: translate(0, calc(-100vh / var(--card-scale))); }
    to { transform: translate(0, 0); }
}
.card-outer {
    animation-name: card-slide-in;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.card img {
    width: 100%;
    border-radius: 8px;
}

@keyframes fade-black {
    from { background-color: white; }
    to { background-color: black; }
}
.fade-black {
    animation-name: fade-black;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@keyframes shine-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.shine img {
    width: 100%;
    animation-name: shine-rotate;
    animation-duration: 240s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.trash .shine img { opacity: 0; }
.common .shine img { filter: brightness(85%); }
.card.uncommon { --bg: #dfd; --fg: #080; }
.uncommon .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(45deg) brightness(250%); }
.card.rare { --bg: #ddf; --fg: #00f; }
.rare .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(180deg) saturate(1000%); }
.card.epic { --bg: #fdf; --fg: #808; }
.epic .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(200deg); }
.card.unique { --bg: #fed; --fg: #f80; }
.unique .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(325deg); }
.card.mythic { --bg: #fdd; --fg: #f00; }
.mythic .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(120deg) saturate(2000%) brightness(35%) invert(1); }
.card.legendary { --bg: black; color: white !important; box-shadow: inset 0 0 16px black, 0 0 32px #ff0; --fg: #ff0; }
.card.unreal { --bg: black; color: white !important; box-shadow: inset 0 0 16px black, 0 0 32px #08f; --fg: #08f; }
.card.secret { --bg: black; color: white !important; box-shadow: inset 0 0 16px black, 0 0 32px #f0f; --fg: #f0f; }
.legendary .shine img { filter: sepia(100%) saturate(10000%); }
.unreal .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(150deg); }
.secret .shine img { filter: sepia(100%) saturate(10000%) hue-rotate(240deg); }
@supports (font: -apple-system-body) { 
    .uncommon .shine img { filter: brightness(0) saturate(100%) invert(89%) sepia(26%) saturate(602%) hue-rotate(37deg) brightness(154%) contrast(52%); }
    .card.rare { --bg: #acf; }
    .rare .shine img { filter: brightness(0) saturate(100%) invert(69%) sepia(43%) saturate(845%) hue-rotate(175deg) brightness(248%) contrast(17%); }
    .epic .shine img { filter: brightness(0) saturate(100%) invert(89%) sepia(34%) saturate(494%) hue-rotate(242deg) brightness(127%) contrast(51%); }
    .card.unique { --bg: #f8ffee; }
    .unique .shine img { filter: brightness(0) saturate(100%) invert(80%) sepia(83%) saturate(446%) hue-rotate(10deg) brightness(160%) contrast(40%); }
    .mythic .shine img { filter: brightness(0) saturate(100%) invert(100%) sepia(46%) saturate(400%) hue-rotate(-50deg) contrast(40%); }
    .legendary .shine img { filter: brightness(0) saturate(100%) invert(100%) sepia(46%) saturate(600%); }
    .unreal .shine img { filter: brightness(0) saturate(100%) invert(100%) sepia(46%) saturate(800%) hue-rotate(150deg) contrast(60%); }
    .infinity .shine img { filter: brightness(0) saturate(100%) invert(100%) sepia(46%) saturate(800%) hue-rotate(-120deg) contrast(60%); }
}

.card::after {
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    opacity: 1;
    animation-name: fade-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
.card.secret::after {
    animation-name: fade-black;
}

body {
    box-shadow: inset 0 0 64px black;
}
body.fade-white {
    box-shadow: inset 0 0 0px black;
}
@keyframes fade-white {
    from { box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
    to { box-shadow: inset 0 0 64px rgba(0, 0, 0, 1); }
} 
.fade-white {
    animation-name: fade-white;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes unpicked-fade {
    from { opacity: 1; transform: perspective(1500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1); }
    75% { width: 220px; opacity: 0; transform: perspective(1500px) rotateX(var(--x)) rotateY(var(--y)) scale3d(0.5, 0.5, 1); margin: 4px; }
    to { width: 0; opacity: 0; margin: 0; }
}
.unpicked {
    animation-name: unpicked-fade;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
@keyframes unpicked-margin {
    from { margin: 16px; }
    75% { margin: 16px; }
    to { margin: 0; }
}
.unpicked-margin {
    animation-name: unpicked-margin;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
.picked { transform: none !important; }
.picked::after {
    animation-name: fade-in;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}
.fade-white .picked::after {
    background-color: black;
    animation-name: fade-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes post-pick {
    from { box-shadow: inset 0 0 16px black, 0 0 0px var(--fg); }
    50% { box-shadow: inset 0 0 16px black, 0 0 32px var(--fg); opacity: 1; }
    to { box-shadow: inset 0 0 16px black, 0 0 64px var(--fg); opacity: 0; }
}
.fade-white .picked {
    animation-name: post-pick;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
#postroll-inner { transform-origin: 0% 50%; }
.badge-appear { --delay: 0ms; }
.badge-appear::after {
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    opacity: 1;
    animation-name: fade-out;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: var(--delay);
}

:root { --afcolor: 0deg; }
h1 { white-space: pre; }
.title-shift, .number-digit { display: inline-block; }
.affected-1 { background-color: hsla(calc(var(--afcolor) + 0deg), 100%, 50%, 0.2); }
.affected-2 { background-color: hsla(calc(var(--afcolor) + 120deg), 100%, 50%, 0.2); }
.affected-3 { background-color: hsla(calc(var(--afcolor) + 240deg), 100%, 50%, 0.2); }
.affected-4, .affected-1.affected-2 { background-color: hsla(calc(var(--afcolor) + 60deg), 100%, 50%, 0.2); }
.affected-5, .affected-1.affected-3 { background-color: hsla(calc(var(--afcolor) + 300deg), 100%, 50%, 0.2); }
.affected-6, .affected-2.affected-2 { background-color: hsla(calc(var(--afcolor) + 180deg), 100%, 50%, 0.2); }
.affected-1.affected-2.affected-3 { background-color: hsla(0deg, 0%, 50%, 0.2); }

@media (prefers-color-scheme: dark) { /* iphone can you not ??? */ }

#transitioning { display: none; }
#transitioning.active { display: block; pointer-events: all !important; }

#enchant-button { animation: aura-rainbow 15s linear infinite, fade-in 2s forwards; }
#enchant-main button.selected, .enchanted { animation: aura-rainbow 15s linear infinite; box-shadow: 0 0 4px hsl(var(--color), 100%, 50%); }
.keep-on { opacity: 1 !important; }
.clickable { cursor: pointer !important }

#user-description { word-break: break-all; }
#user-description .spacer { width: 100%; }
#user-profile { width: 128px; height: 128px; margin-left: auto; }

.likes { height: 18px; margin-left: auto; }
.likes button { height: 18px; background-color: transparent; padding: 0; }
.likes svg { fill: gray; }
.likes:hover svg { fill: #aaa; }
.likes .active svg { fill: #f88; }
.likes:hover .active svg { fill: #faa; }

sup { vertical-align: super; font-size: 70%; }