/* html {
    margin: 0;
    padding: 0;
    background: #111;
}

body {
    margin: 0;
    padding: 0;
    color: white;
    background: linear-gradient(to bottom, #222, #111);

    font-family: "NokioSlabAlt-Light";
    font-size: 16px;
}

html:has(.scan),
body:has(.scan),
.root:has(.scan) {
    height: 100%;
} */

.message {
    padding: 30px;
    text-align: left;
}

.cardfan-wrap {
    position: relative;
    box-sizing: border-box;
    width: fit-content;
}

.root .cardfan-wrap {
    /* Enough padding to show the under cardfan elements */
    --padding-cards: 20px;
    padding: var(--padding-cards);
}

.root .cardfan-wrap .overlay {
    position: absolute;
    left: var(--padding-cards);
    top: var(--padding-cards);
    width: calc(100% - (2 * var(--padding-cards)));
    height: calc(100% - (2 * var(--padding-cards)));
}

.cardfan {
    position: relative;
}

.cardfan, .translated {
    --bleed: 3;

    z-index: 0;
}
.cardfan img {
    position: absolute;
    left: calc(-1 * var(--bleed) * var(--scale));
    top: calc(-1 * var(--bleed) * var(--scale));
    /* width: calc((var(--card-width) + (2 * var(--bleed))) * var(--scale)); */
    /* height: calc((var(--card-height) + (2 * var(--bleed))) * var(--scale)); */
    width: calc(var(--card-width) * var(--scale));
    height: calc(var(--card-height) * var(--scale));
}

.cardfan .cardfan-element {
    /* width: calc(var(--card-width) * var(--scale)); */
    /* height: calc(var(--card-height) * var(--scale)); */
    width: calc((var(--card-width) - (2 * var(--bleed))) * var(--scale));
    height: calc((var(--card-height) - (2 * var(--bleed))) * var(--scale));

    overflow: hidden;
    border-radius: calc(4 * var(--scale));

    box-shadow: 0 0 5px black;

    z-index: 100;
}

.cardfan .cardfan-element {
    position: absolute;
    left: calc(var(--i) * -5px);
    top: calc(var(--i) * -5px);
    z-index: calc(100 - var(--i));
}
.cardfan .cardfan-element:first-child {
    position: relative;
    --i: 0;
}
.cardfan .cardfan-element:nth-child(2) { --i: 1; }
.cardfan .cardfan-element:nth-child(3) { --i: 2; }
.cardfan .cardfan-element:nth-child(4) { --i: 3; }

.cardpanel {
    display: flex;
    flex-direction: column;
    gap: 10px;

    text-align: center;

    max-width: 100%;
    box-sizing: border-box;

    overflow: scroll;
    flex-grow: 1;

    /* align-items: center; */
}

.root {
    --scale: 5px;

    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    text-align: center;

    box-sizing: border-box;

    background: #111;
}

.scanned {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: auto 0;
    box-sizing: border-box;
    padding: 50px;
    pointer-events: none;
}

.flagpanel {
    display: flex;
    flex-direction: row;
    gap: 10px;
    /* align-items: center; */
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;

    /* border-right: solid 0.5px rgba(255, 255, 255, 0.5); */
    /* padding-right: 20px; */
}
.flagpick-wrap {
    position: fixed;
    left: 0;
    top: 0;
    background: #111;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.flagpick {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto;
    padding: 30px;
}

.flagpick-wrap input {
    background: #222;
    width: 260px;
    font-family: "SofiaSansCondensed-Regular";
    font-size: 20px;
    padding: 6px 10px 5px;
    border-radius: 5px;
    border: solid 1px white;
    margin: 0 auto;
    display: block;
    color: white;
}

.flagpanel-element,
.flagpick-element {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    font-size: 12px;

    cursor: pointer;

    position: relative;
}

.flagpanel-element.flagpanel-element-experimental::after,
.flagpick-element.flagpick-element-experimental::after {
    content: "BETA";
    position: absolute;
    font-family: "NokioSlabAlt-Bold";
    font-size: 20px;
    color: white;
    transform: translate(0, 0) rotate(-20deg);
    text-shadow: 0 0 5px black;
    pointer-events: none;
}


.flagpanel-image,
.flagpick-image {
    width: 30px;
    height: 20px;
    border-radius: 2px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.flagpanel-element-selected {
    font-family: "NokioSlabAlt-Bold";
    font-size: 16px;
    cursor: default;
}
.flagpanel-element-selected .flagpanel-image {
    width: 50px;
    height: 30px;
    border-radius: 5px;
}

.numberpanel {
    margin-left: auto;

    display: flex;
    flex-direction: row;
    gap: 0 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

    position: relative;
    /* padding-left: 35px; */
    padding-left: 10px;
    box-sizing: border-box;

    align-content: flex-start;
}

/* .numberpanel::before,
.numberpanel::after {
    content: "";
    background: black;
    border: solid 2px white;
    border-radius: 5px;
    transform: rotate(-10deg);
    width: 12px;
    height: 19px;
    position: absolute;
    left: 5px;
    top: 0;
}
.numberpanel::after {
    transform: rotate(10deg);
    left: 10px;
    top: 5px;
} */

.numberpanel-element {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    font-size: 20px;

    cursor: pointer;

    height: 24px;
    box-sizing: border-box;
}

.numberpanel-element-selected {
    font-family: "NokioSlabAlt-Bold";
    font-size: 25px;
    cursor: default;
    transform: translateY(-5px);
}

.scan {
    position: relative;
    width: 100%;
    height: 100%;
}

.scan video {
    width: 100%;
    height: 100%;
}
.scan .captured {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.scan .captured > img {
    display: block;
    width: 100%;
    height: auto;
    left: 0;
}

.scan-animation {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    --margin: 30px;
    --height: 160px;
    --bottom: 150px;
}

.scan-animation::before {
    content: "";
    position: absolute;
    left: var(--margin);
    bottom: var(--bottom);
    width: calc(100% - (2 * var(--margin)));
    height: var(--height);
    border: solid 0.5px white;
    border-radius: 20px;
    box-shadow: 0 0 5px black, inset 0 0 50px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
}
.scan-animation::after {
    content: "Keep the title and flavor text sharp.";
    position: absolute;
    left: 50%;
    bottom: calc(var(--bottom) + var(--height) - 25px);
    padding: 4px 10px 5px;
    color: black;
    background: white;
    width: max-content;
    font-family: "Noto Sans";
    font-size: 12px;
    height: 25px;
    box-sizing: border-box;
    transform: translateX(-50%);
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.scan-animation-scanner {
    --scan-animation-height: 60px;
    --scan-animation-margin: 0px;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--scan-animation-height);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);

    animation: scan-vertical 2s ease-in-out infinite alternate;
}

@keyframes scan-vertical {
    from {
        top: calc(0% + var(--scan-animation-margin) + (var(--scan-animation-height) / 2));
    }
    to {
        top: calc(100% - var(--scan-animation-margin) - (var(--scan-animation-height) / 2));
    }
}

.first-header,
.header {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    align-items: center;
}

.header {
    background: linear-gradient(to bottom, #262626, #202020);
    box-shadow: 0 0 10px black;
    z-index: 1;
}

.first-header {
    position: absolute;
    left: 0;
    top: 0;
}

.close {
    margin-left: auto;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;

    border-radius: 100%;
    background: white url("icons/cross.png") no-repeat center center / 80% auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.photo {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;

    background: transparent url("icons/photo.png") no-repeat center center / contain;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));

    position: relative;
}
.photo-message {
    font-family: "Noto Sans";
    font-size: 13px;
    width: max-content;
    text-align: center;
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: black;
    padding: 5px 10px 5px;
    box-sizing: border-box;
    border-radius: 2px;
}
.photo-message::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    --triangle-width: 20px;
    border-left: calc(var(--triangle-width) / 2) solid transparent;
    border-right: calc(var(--triangle-width) / 2) solid transparent;
    border-bottom: 10px solid white;
}

.close.disabled,
.photo.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.search {
    background: white;

    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 4px;
    border-radius: 5px;
    box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.5);
}

body:focus-within .search {
    margin: 0 auto;
}

.search::before {
    content: "";
    display: block;
    background: transparent url("icons/search.png") no-repeat left center / auto calc(100% - (2 * 2px));
    width: 22px;
    height: 22px;
    margin-left: 6px;
    pointer-events: none;
}

.search > div {
    color: black;
    padding: 2px 3px 0 0;
    font-family: "SofiaSansCondensed-Regular";
}

.search > div,
.search > input {
    font-size: 20px;
}

.search > input.search-prefix,
.search > input.search-input {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    font-family: "SofiaSansCondensed-Regular";
    --border-radius: 5px;
    padding: 4px 1px 3px;
    box-sizing: border-box;
    color: black;
}
.search > input.search-prefix {
    width: 18px;
    text-align: right;
    pointer-events: none;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.search > input.search-input {
    width: 80px;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.search:focus-within > input {
    background: #DDD;
}

.header-title {
    font-family: "SyneMono-Regular";
    padding: 0 10px;
    margin-left: auto;
    font-size: 20px;
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.search > input:focus {
    outline: none;
    background: #DDD;
}

.translated {
    position: absolute;
    color: black;
    font-family: "SofiaSansCondensed-Regular";
    font-size: calc(3 * var(--scale));

    overflow: hidden;

    filter: drop-shadow(0 1px 1px black);

    /* top: calc(((var(--y) * (var(--card-height) + (2 * var(--bleed))) - var(--bleed)) * var(--scale))); */
    /* left: calc(((var(--x) * (var(--card-width) + (2 * var(--bleed))) - var(--bleed)) * var(--scale))); */
    /* width: max(calc(20 * var(--scale)), calc((var(--width) * (var(--card-width) + (2 * var(--bleed))) * var(--scale)))); */
    /* height: calc((var(--height) * (var(--card-height) + (2 * var(--bleed))) * var(--scale))); */

    top: calc((((var(--y) * var(--card-height)) - var(--bleed)) * var(--scale)));
    left: calc((((var(--x) * var(--card-width)) - var(--bleed)) * var(--scale)));
    width: max(calc(20 * var(--scale)), calc(var(--width) * var(--card-width) * var(--scale)));
    height: calc((var(--height) * var(--card-height) * var(--scale)));

    display: flex;
}

.translated.resizable {
    height: auto;
    /* min-height: calc((var(--height) * (var(--card-height) + (2 * var(--bleed))) * var(--scale))); */
    min-height: calc((var(--height) * var(--card-height) * var(--scale)));
    overflow: visible;
    cursor: pointer;
}

/* .translated.resizable:hover {
    z-index: 1;
} */
/* .translated.resizable > div {
    transition: transform 0.05s ease-out;
    transition-delay: 1s;
    transform-origin: bottom left;
}
.translated.resizable:hover > div {
    transition-delay: 0s;
    transform: translate(-20px, -97%) rotate(-2deg) !important;
} */
/* .translated.resizable > div {
    transition: opacity 0.05s ease-out;
}
.translated.resizable:hover > div {
    opacity: 0.25;
} */

.translated > div {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: calc(2 * var(--scale)) calc(15 * var(--scale) / 5);
    box-sizing: border-box;

    position: relative;
    /* height: fit-content; */
    /* width: fit-content; */
}

/* .translated:has(.thinking) > div {
    color: rgba(0, 0, 0, 0.25);
} */

/* .translated .edit {
    position: absolute;
    right: -12px;
    top: -12px;
    background: transparent url("icons/edit.png") no-repeat center center / contain;
    width: 25px;
    height: 25px;
    cursor: pointer;
    filter: drop-shadow(0 0 4px white);
}
.translated.resizable > div.edit {
    opacity: 0;
}
.translated.resizable:hover > div.edit {
    opacity: 1;
} */

.span-wrap-big {
    font-family: "SofiaSansCondensed-Bold";
}

.span-wrap-small {
    font-family: "SofiaSansCondensedItalic-LightItalic";
}

.span-wrap-strong {
    font-family: "SofiaSansCondensed-Bold";
}

body:has(.modal) {
    background: #111;
    height: 100%;
    overflow: scroll;
}
.modal {
    position: relative;
    padding: 30px;
}

.modal-in {
    max-width: 300px;
    margin: 0 auto;
}

.modal .close {
    position: fixed;
    right: 10px;
    top: 10px;
}

.modal .original,
.modal .cached,
.modal .proposed {
    margin: 0 auto;
    font-family: "Noto Sans";
    font-size: 16px;
}

.modal .original {
    padding: 10px;
}

.modal .cached {
    padding: 10px;
}

.modal .proposed {
    width: 100%;
}

.modal textarea,
.modal input,
.modal .buttons {
    width: 100%;
}

.modal textarea,
.modal input {
    box-sizing: border-box;
    background: none;
    border: solid 1px #888;
    border-radius: 4px;
    color: white;
    display: block;
    outline: none;
    background: #444;
}
.modal textarea:focus,
.modal input:focus {
    border-color: white;
}

.modal textarea {
    font-family: "Noto Sans";
    font-size: 20px;
    height: 150px;
    padding: 8px 10px 5px;
    margin-top: 20px;
}
.modal input {
    font-family: "Noto Sans";
    font-size: 16px;
    padding: 6px 10px 5px;
    margin-top: 10px;
}

.modal textarea.disabled,
.modal input.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.modal .buttons.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.modal .proposed .text {
    color: #888;
}
.modal .proposed.accepted .text {
    color: lightgreen;
}
.modal .proposed.rejected .text {
    text-decoration: line-through;
    text-decoration-thickness: 0.5px;
    text-decoration-color: #DDD;
}

.modal .list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0 0;
}

.modal .buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.modal .buttons::before {
    content: "↳";
    font-size: 15px;
    display: block;
    margin-top: 1px;
}

.modal .buttons > div {
    font-family: "Noto Sans";
    font-size: 14px;
    border: solid 1px #777;
    padding: 4px 8px 6px;
    background: #444;
    border-radius: 4px;

    cursor: pointer;
}
.modal .buttons > div:hover {
    background: #666;
}

.modal .text-wrap {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.modal .cached .text-wrap {
    color: black;
}

.modal .text-wrap .copy {
    visibility: hidden;
}
.modal .text-wrap:hover .copy {
    visibility: visible;
}

.modal .copy {
    mask-image: url("icons/copy.png");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    background: white;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.modal .cached .copy {
    background: black;
}

.modal > .buttons {
    margin: 10px auto 30px;
    padding-left: 40px;
}

.modal .author {
    font-family: "Noto Sans";
    font-size: 11px;
    margin-top: 5px;
}
.modal .author::before {
    content: "- ";
}


.thinking {
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    --size: 10px;
}
.thinking::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 70%;
    aspect-ratio: 1;
    border-radius: 100%;
    outline: solid 0 white;
    outline-offset: 0;
    outline-width: 0;
    box-sizing: border-box;
    animation: thinkingPulsIn 2.5s ease-in-out infinite;
    filter: drop-shadow(0 0 var(--size) white);
    opacity: 0;
}

@keyframes thinkingPulsIn {
    0%, 10% {
        outline-offset: 0;
        outline-width: 0;
        opacity: 0;
    }
    50% {
        outline-offset: 0;
        outline-width: var(--size);
        opacity: 1;
    }
    90%, 100% {
        outline-offset: var(--size);
        outline-width: 0;
    }
}

.buttons {
    /* margin-bottom: 30px; */
    padding: 10px;
}
.buttons .thinking {
    position: relative;
    width: 100px;
    margin: 0 auto;
}

.chat-experimental {
    bottom: 0;
    width: 100%;
}
.overlay-experimental {
    top: 0;
    height: 100%;
    background: #111;
}
.chat-experimental,
.overlay-experimental {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 200;
    padding: 20px;
    box-sizing: border-box;
}

.chat-experimental .chat-experimental-text,
.overlay-experimental .overlay-experimental-text {
    font-family: "NokioSlabAlt-Light";
    font-size: 16px;
    text-align: center;

    max-width: 500px;
    margin: 0 auto;

    padding: 0 30px;
    box-sizing: border-box;
}

.chat-experimental .chat-experimental-button,
.overlay-experimental .overlay-experimental-button {
    font-family: "NokioSlabAlt-Bold";
    font-size: 20px;
    width: fit-content;
    margin: 30px auto;
    border-bottom: solid 1px white;
    cursor: pointer;
}

.log {
    position: absolute;
    left: 0;
    bottom: 100px;
    width: 100%;
    box-sizing: border-box;
    /* pointer-events: none; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;

    background: rgba(0, 0, 0, 0.5);
    white-space: pre-wrap;

    z-index: 1;
    overflow: scroll;
    max-height: calc(100% - 200px);
}
.log > div {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
}

.takephoto {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.takephoto > canvas
.takephoto > img {
    position: absolute;
    display: block;
}
.takephoto > img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.takephoto > canvas {
    max-width: 100%;
    max-height: 100%;
}

.retry {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    background: rgba(0, 0, 0, 0.9);

    cursor: pointer;
}

.retry::before,
.retry::after {
    display: block;
    width: fit-content;
    max-width: 200px;
    margin: 5px auto;
    text-align: center;
    color: white;
}

.retry::before {
    content: "Detection failed.";
    font-family: "SofiaSansCondensed-Regular";
    font-size: 14px;
}
.retry::after {
    content: "Try again";
    font-family: "SofiaSansCondensed-Bold";
    font-size: 20px;
    border-bottom: solid 1px white;
}


.root .options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    background: #191919;
    border: solid 1px #333;
    border-radius: 5px;
    padding: 20px 50px;
    margin-top: 30px;
    position: relative;
}
.root .option-photo,
.root .option-camera,
.root .option-search {
    cursor: pointer;
    font-family: "Noto Sans";
    font-size: 16px;
    padding: 5px 10px 8px;
    border-radius: 5px;
    outline: solid 1px #545454;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background: #2e2e2e;
}
.root .option-error {
    font-family: "Noto Sans";
    font-size: 14px;
    padding-right: 20px;
    text-align: left;
}

.root .option-photo::before,
.root .option-camera::before,
.root .option-search::before {
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 20px;
    display: inline-block;
    height: 20px;
    margin-right: 8px;
}
.root .option-photo::before {
    background-image: url("icons/photo.png");
    transform: translateY(3px);
}
.root .option-camera::before {
    background-image: url("icons/camera.png");
    transform: translateY(4px);
}
.root .option-search::before {
    background-image: url("icons/search.png");
    transform: translateY(4px);
}

.root .options .close,
.scan .close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.root .option-search input {
    border: none;
    background: none;
    outline: none;
    font-family: "Noto Sans";
    font-size: 16px;
    border-radius: 4px;
}
.root .option-search input:focus {
    background: #585858;
    padding: 5px 8px;
    margin: 3px 0 2px;
}