/* What is on the hologram screen in each room: the forms, the Wallet, the game, a bill, the questions, the
   reading pages. The pages keep their own names for things (claim-*, bill-*, play-*, faq-*, page-*); here those
   names are drawn the building's way: plain words for actions, soft green blocks for boxes, no plates, no studded
   boxes, no buttons, nothing underlined. Only the building's colours. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.holo a:not(.word):not(.claim-send):not(.claim-add):not(.claim-vault) {
    color: #fff;
}

.holo a:not(.word):not(.claim-send):not(.claim-add):not(.claim-vault):hover {
    color: #d1dacf;
}

/* ---------- Headings ---------- */

.claim-plate,
.claim-heading,
.page-heading {
    margin: 0 0 14px;
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
}

.claim-plate {
    font-size: clamp(24px, 3vw, 36px);
}

.claim-heading,
.page-heading {
    margin-top: 26px;
    font-size: 20px;
}

.page-panel:first-child .page-heading {
    margin-top: 0;
}

/* ---------- Words that do something: SEND, LOGIN, BACK, SAVE, PLAY ---------- */

.claim-bottom {
    margin-top: 18px;
}

/* the banker of the old screens is gone: the building's own banker stands beside the screen */
.claim-banker {
    display: none;
}

.claim-send,
.claim-scan,
.claim-vault,
.claim-check,
.claim-small a {
    font-family: 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
}

.claim-send {
    display: inline-block;
    padding: 14px 0;
    border: 0;
    background: none;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.claim-send::before {
    content: '> ';
}

.claim-send:hover,
.claim-scan:hover,
.claim-vault:hover {
    color: #c7e9c0;
}

.claim-send[disabled] {
    color: #65bb52;
    cursor: default;
}

.claim-scan,
.claim-vault {
    display: inline-block;
    padding: 14px 0;
    border: 0;
    background: none;
    font-size: 12px;
    line-height: 1;
    color: #d1dacf;
    cursor: pointer;
    white-space: nowrap;
}

.claim-vault small {
    display: block;
    margin-top: 6px;
    font-family: 'Hershey Duplex', sans-serif;
    letter-spacing: 0;
    font-size: 13px;
}

.claim-logout {
    display: flex;
    justify-content: flex-end;
    margin: -14px 0 0;
}

/* ---------- Fields ---------- */

.claim-fields,
.claim-details {
    display: grid;
    gap: 10px;
    max-width: 560px;
}

.claim-status,
.claim-done-note,
.claim-owner {
    margin: 0;
    color: #d1dacf;
}

.claim-status {
    min-height: 1.5em;
}

.claim-status-error {
    color: #fff;
}

.claim-field {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(94, 197, 72, 0.16);
}

.claim-field-error {
    outline: 2px solid #fff;
}

.claim-input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 13px 14px;
    border: 0;
    background: none;
    font: 18px/1.3 'Hershey Duplex', sans-serif;
    color: #fff;
}

.claim-input::placeholder {
    color: #c7e9c0;
    opacity: 0.85;
}

.claim-input:focus {
    outline: 3px solid #c7e9c0;
    outline-offset: 0;
}

.claim-field .claim-scan {
    padding: 14px;
}

.claim-small {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
    font-size: 15px;
    color: #d1dacf;
}

.claim-small a,
.claim-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 12px;
}

.claim-check input {
    width: 18px;
    height: 18px;
    accent-color: #5ec548;
}

.claim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
}

/* the camera, while a QR code is being scanned */
.claim-viewfinder {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    background: #0f160d;
    overflow: hidden;
}

.claim-viewfinder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- The Wallet ---------- */

.claim-greeting {
    display: block;
    margin-bottom: 2px;
    font: 600 20px/1.2 'Lexend', sans-serif;
    color: #fff;
}

.claim-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.claim-card,
.claim-row,
.claim-add,
.faq-item,
.bill-facts {
    background: rgba(94, 197, 72, 0.12);
}

.claim-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
}

.claim-card-label,
.bill-fact dt,
.land-part-title {
    font: 12px/1.2 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    color: #d1dacf;
}

.claim-card-value {
    font: 600 28px/1.15 'Lexend', sans-serif;
    color: #fff;
}

.claim-card-note {
    color: #d1dacf;
}

.claim-rows {
    display: grid;
    gap: 10px;
}

.claim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 12px 16px;
}

.claim-row img {
    width: 110px;
    height: auto;
}

.claim-row-text {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.claim-row-serial {
    color: #fff;
}

.claim-row-note {
    color: #d1dacf;
    font-size: 15px;
}

.claim-add {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
}

.claim-add span {
    font: 13px/1.2 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    color: #fff;
}

.claim-add small {
    font-size: 15px;
    color: #d1dacf;
}

.claim-add:hover span {
    color: #c7e9c0;
}

.claim-send-inline {
    justify-self: start;
}

/* ---------- The game room ----------
   The game is the room: its window is as big as the screen lets it be while still showing whole. Over it, small,
   who is playing and the sound icon; under it, small, the two score cards side by side. */

.room-game .inside-main {
    padding-top: 14px;
}

.room-game .holo {
    padding: 24px 22px 26px;
}

.play {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.play-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.play-top .claim-done-note,
.play-left {
    font-size: 14px;
}

.play-window {
    position: relative;
    width: min(100%, max(230px, calc((100vh - 190px) * 9 / 16)));
    width: min(100%, max(230px, calc((100dvh - 190px) * 9 / 16)));
    aspect-ratio: 9 / 16;
    background: #0f160d;
}

.play-screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.play-none {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #d1dacf;
}

/* The Vault. One window, one line, in order: how many they hold, what that is thought to be worth, what it is. */
.claim-card-holding {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.claim-card-holding > div {
    display: grid;
    gap: 4px;
    align-content: start;
}

.claim-card-holding .claim-card-value {
    font-size: clamp(18px, 4.6vw, 28px);
    line-height: 1.15;
}

/* the short word that an email has gone: there for a few seconds after a Hard Currency is registered, then gone */
.claim-toast {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid #5ec548;
    background: rgba(34, 80, 26, 0.9);
    color: #fff;
    animation: claim-toast-go 0.6s steps(6) 7s forwards;
}

@keyframes claim-toast-go {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ordering a Hard Currency: its picture, and beside it the price, the words and the button */
.claim-order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

/* the front, the back under it, the same size; and under them, at their side, the button */
.claim-order-bills {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.claim-order-bills img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    background: #0f160d;
}

/* the price and the words from the top; the button on the bottom line, level with the foot of the pictures */
.claim-order-words {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.claim-order-words .claim-send {
    margin-top: auto;
    margin-bottom: 0;
    padding-bottom: 0;
}

.claim-order-words .claim-done-note {
    margin: 0;
}

/* in the Vault: the two sides next to each other, and under them the price and the button on one line */
.claim-order-plain {
    grid-template-columns: minmax(0, 1fr);
}

.claim-order-plain .claim-order-bills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.claim-order-plain .claim-order-words {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
}

.claim-order-plain .claim-order-words .claim-send {
    margin-top: 0;
}

/* exchanging: on one line the quantity, the amount it comes to, and at the far side the button */
.claim-exchange {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    width: 100%;
    margin-top: auto;
}

.claim-exchange-part {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.claim-exchange .claim-card-label {
    font-weight: 700;
    color: #fff;
}

.claim-exchange .claim-exchange-qty {
    width: 78px;
    min-height: 0;
    padding: 8px 6px;
    border: 1px solid rgba(94, 197, 72, 0.7);
    background: rgba(94, 197, 72, 0.16);
    text-align: center;
    color: #fff;
}

.claim-exchange .claim-send {
    margin: 0 0 0 auto;
    padding-bottom: 0;
}

/* the payment step under exchanging (shown only when the owner switches it on) */
.claim-pay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(94, 197, 72, 0.45);
    background: rgba(20, 49, 11, 0.55);
}

.claim-pay h3,
.claim-pay p {
    margin: 0;
}

.claim-pay h3 {
    font-weight: 700;
    color: #fff;
}

.claim-pay .claim-send {
    margin: 4px 0 0;
    padding-bottom: 0;
}

.claim-order-wrap {
    margin-top: 22px;
}

@media (max-width: 520px) {
    .claim-order {
        grid-template-columns: minmax(0, 1fr);
    }
}

.claim-vault-note {
    color: #fff;
}

/* the buttons over the game: the whole screen, and the sound */
.play-buttons {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
}

/* The game's window with what stands over it, and under it, at its side, SCORE BOARD. */
.play-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* as wide as the game's window, so the word stands under the game's own right edge */
.play-under {
    display: flex;
    justify-content: flex-end;
    width: min(100%, max(230px, calc((100vh - 190px) * 9 / 16)));
    width: min(100%, max(230px, calc((100dvh - 190px) * 9 / 16)));
    padding-top: 6px;
}

/* written bold, the size of the rooms' names at the foot of the page */
.play-under .play-word-small {
    margin-top: 0;
    padding-right: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.play-stage.is-full .play-under {
    display: none;
}

/* Over the game, low in its window, until it is opened: PLAY and SCORE BOARD, written as the site's other buttons
   are (the pixel letters, white, bold, in the screen's light, with a dark edge so they read over the picture). */
.play-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 0 7%;
    pointer-events: none;
}

.play-cover > * {
    pointer-events: auto;
}

.play-word {
    padding: 4px 8px;
    border: 0;
    background: none;
    font: 700 24px/1 'Arabic Pixel 2', monospace;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 2px 0 #0f160d, 0 0 6px #0f160d, 0 0 14px rgba(94, 197, 72, 0.9);
    cursor: pointer;
}

.play-word-small {
    margin-top: 8px;
    font-size: 15px;
}

.play-word:hover,
.play-word:focus-visible {
    color: #c7e9c0;
    text-shadow: 0 2px 0 #0f160d, 0 0 6px #5ec548, 0 0 18px #5ec548;
}

.play-word:active {
    translate: 0 2px;
}

.play-cover small {
    font: 12px/1.3 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c7e9c0;
    text-shadow: 0 1px 0 #0f160d, 0 0 6px #0f160d;
    pointer-events: none;
}

.play-cover[hidden],
.play-stage.is-full .play-cover {
    display: none;
}

/* The score board, opened: a hologram standing over the game. See-through green, cut by scan lines, lit from
   within, its words in the screen's light. */
.play-holo {
    position: absolute;
    inset: 6% 6% 30%;
    z-index: 2;
    overflow: auto;
    padding: 18px 16px 14px;
    border: 1px solid rgba(94, 197, 72, 0.75);
    background: rgba(20, 49, 11, 0.9);
    box-shadow: 0 0 28px rgba(94, 197, 72, 0.5), inset 0 0 34px rgba(94, 197, 72, 0.22);
    text-shadow: 0 0 8px rgba(94, 197, 72, 0.85);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, 0.62) 2px 3px);
    mask-image: repeating-linear-gradient(180deg, #000 0 2px, rgba(0, 0, 0, 0.62) 2px 3px);
}

/* come up by itself over the intro: smaller, and always at the top of the window */
.play-holo.is-brief {
    inset: 3% 6% auto;
    max-height: 58%;
    overflow: hidden;
    padding: 12px 12px 10px;
}

.play-holo.is-brief .play-holo-close {
    display: none;
}

.play-holo.is-brief .play-board-best .claim-card-value {
    font-size: 20px;
}

.play-holo.is-brief .play-places {
    margin-top: 8px;
    padding-top: 6px;
}

.play-holo.is-brief .play-places li {
    padding: 3px 0;
    font-size: 11px;
}

.play-holo[hidden],
.play-stage.is-full .play-holo {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    .play-holo {
        animation: play-holo-on 0.45s steps(6) both;
    }
}

@keyframes play-holo-on {
    0% {
        opacity: 0;
        clip-path: inset(48% 0 48% 0);
    }

    40% {
        opacity: 1;
        clip-path: inset(0);
    }

    55% {
        opacity: 0.55;
    }

    100% {
        opacity: 1;
        clip-path: inset(0);
    }
}

.play-holo-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font: 700 20px/32px 'Arabic Pixel 2', monospace;
    color: #5ec548;
    cursor: pointer;
}

.play-holo-close:hover,
.play-holo-close:focus-visible {
    color: #fff;
}

.play-holo .play-board {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.play-holo .play-board-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.play-holo .claim-card-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: #5ec548;
}

.play-holo .play-board-best {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.play-holo .play-board-best .claim-card-value {
    font: 700 26px/1 'Arabic Pixel 2', monospace;
    letter-spacing: 2px;
    color: #fff;
}

.play-holo .play-places {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(94, 197, 72, 0.75);
}

.play-holo .play-places li {
    padding: 5px 0;
    font: 13px/1.3 'Arabic Pixel 2', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.play-holo .play-places li:first-child,
.play-holo .play-places li:first-child > * {
    color: #fff;
}

.play-holo .play-places .play-places-empty {
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
}

/* the game over the whole screen: its window is stretched over the page, the game upright and as tall as the screen */
.play-stage.is-full {
    position: fixed;
    inset: 0;
    z-index: 900;
    align-items: center;
    /* the Game Room's own wall behind the game, as on the page (not black) */
    background: #14310b url(../images/rooms/wall-game.png) center top / 96px auto repeat;
    image-rendering: pixelated;
}

.play-stage.is-full .play-window {
    width: auto;
    max-width: 100%;
    height: 100%;
}

.play-is-full {
    overflow: hidden;
}

/* While the game fills the screen, nothing round it may hold it in: the screen it stands in stops moving (a moving
   box keeps what is inside it to itself), and its part of the page comes in front of the rest. */
.play-is-full .inside-main {
    z-index: 1000;
}

.play-is-full .holo,
.play-is-full .holo > * {
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

/* ...and nothing of the room lies over the game: not the screen's scan lines, not the light that throws the screen,
   not the site's own sound icon (the game has its own cross, and the sound is as it was set) */
.play-is-full .holo::after,
.play-is-full .holo-beam,
.play-is-full .site-sound {
    display: none;
}

/* the way back to the lobby, at the head of the Game Room */
.play-back {
    flex-shrink: 0;
    padding: 6px 0;
    font-weight: 700;
}

/* Several gatherings (or archived ones): a card each, its cover over its name, days and place. Pressing one opens
   it on its own page. */
.holo-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px 14px;
    margin: 6px 0 4px;
}

.holo-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    color: #fff;
}

.holo-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    margin-bottom: 6px;
    overflow: hidden;
    border: 1px solid rgba(94, 197, 72, 0.55);
    background: #0f160d;
}

.holo-card-cover video,
.holo-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.holo-card-cover .holo-card-blank {
    object-fit: contain;
    padding: 18%;
    image-rendering: pixelated;
    opacity: 0.7;
}

.holo-card-title {
    font: 700 14px/1.3 'Arabic Pixel 2', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.holo-card small {
    font-size: 13px;
    line-height: 1.4;
    color: #c7e9c0;
}

.holo-card .holo-event-reserved {
    padding: 2px 0 0;
    font-size: 12px;
    color: #5ec548;
}

.holo-card:hover .holo-card-cover,
.holo-card:focus-visible .holo-card-cover {
    border-color: #fff;
}

.holo-card:hover .holo-card-title {
    color: #c7e9c0;
}

/* a gathering's own line of ways: RESERVE (or RESERVED and the way to give the place back), and the calendar */
.holo-event-ways {
    align-items: center;
    margin: 2px 0 12px;
}

.holo-event-ways form {
    display: contents;
}

.holo-event-ways button.word {
    border: 0;
    background: none;
    cursor: pointer;
}

.holo-event-ways .holo-event-reserve,
.holo-event-reserved {
    padding: 13px 0;
    font: 700 14px/1 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    color: #fff;
}

.holo-event-reserved {
    color: #5ec548;
}

/* in the Vault: the gatherings somebody has reserved a place at, one on each line */
.claim-gatherings {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.claim-gatherings li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 14px;
    border: 1px solid rgba(94, 197, 72, 0.45);
    background: rgba(20, 49, 11, 0.55);
}

.claim-gatherings a {
    font-weight: 600;
    color: #fff;
}

.claim-gatherings small {
    font-size: 13px;
    color: #c7e9c0;
}

.claim-gatherings .claim-gatherings-soon {
    color: #5ec548;
    font-weight: 700;
}

/* the same way back at the top of every other page */
.room-back {
    display: block;
    width: max-content;
    margin: -8px 0 12px;
}

/* who is playing, and under it the way back */
.play-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.play-head .claim-done-note {
    order: -1;
}

/* who is playing stands on the same line as BACK, level with it */
.play-head .claim-done-note {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.play-head .play-back {
    line-height: 1.2;
}

.play-full-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: rgba(20, 49, 11, 0.85);
    font: 700 22px/44px 'Arabic Pixel 2', monospace;
    color: #5ec548;
    cursor: pointer;
}

.play-stage.is-full .play-full-close {
    display: block;
}

/* the score board: one card, the highest score at its head */
.play-side {
    display: grid;
    gap: 8px;
    width: 100%;
    font-size: 14px;
}

.play-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.play-board-best {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.play-side .claim-card {
    gap: 2px;
    padding: 8px 12px;
}

.play-side .claim-card-label {
    font-size: 10px;
}

.play-side .claim-card-value {
    font-size: 18px;
}
.play-places {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.play-places li {
    display: grid;
    grid-template-columns: 2.2ch minmax(0, 1fr) auto;
    gap: 10px;
    padding: 3px 0;
}

.play-places li > :nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

.play-places-empty {
    display: block !important;
    color: #d1dacf;
}

/* the sound on / off icon: only the icon itself, no box round it */
.sound-button {
    flex-shrink: 0;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #c7e9c0;
    cursor: pointer;
}

.sound-button:hover {
    color: #fff;
}

.sound-icon {
    display: block;
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.sound-cross,
.sound-button[aria-pressed='false'] .sound-waves {
    display: none;
}

.sound-button[aria-pressed='false'] .sound-cross {
    display: inline;
}

/* ---------- A bill ---------- */

.bill {
    margin: 0;
    max-width: 520px;
}

.bill-card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    perspective: 900px;
}

.bill-turn {
    position: relative;
    display: block;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.bill-turned .bill-turn {
    transform: rotateY(180deg);
}

.bill-face {
    display: block;
    width: 100%;
    height: auto;
    backface-visibility: hidden;
}

.bill-back {
    position: absolute;
    inset: 0;
    height: 100%;
    transform: rotateY(180deg);
}

.bill-caption {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.bill-hint {
    font-size: 15px;
    color: #d1dacf;
}

.bill-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px 20px;
    margin: 0;
    padding: 16px 18px;
}

.bill-fact-wide {
    grid-column: 1 / -1;
}

.bill-fact dd {
    margin: 4px 0 0;
    color: #fff;
}

.bill-owner {
    font: 600 22px/1.2 'Lexend', sans-serif;
}

/* ---------- Questions and answers ---------- */

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-item {
    padding: 4px 16px;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    color: #fff;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-arrow {
    flex-shrink: 0;
    width: 18px;
    height: auto;
    image-rendering: pixelated;
}

.faq-item[open] .faq-arrow {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 0 12px;
    color: #d1dacf;
}

.faq-answer p {
    margin: 0 0 10px;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* ---------- Reading pages ---------- */

.page-panel p,
.page-steps {
    margin: 0 0 14px;
}

.page-steps {
    padding-left: 1.5em;
}

.page-steps li {
    margin-bottom: 6px;
}

.page-video {
    position: relative;
    margin: 4px 0 14px;
    aspect-ratio: 16 / 9;
    background: #1d5010;
}

.page-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.page-date {
    font-size: 15px;
    color: #d1dacf;
}

/* ---------- Headings: the pixel face, bold ----------
   Every heading and every question is in the pixel letters, in capitals and bold. What is read under them keeps
   its own face. */

.holo-title,
.claim-plate,
.claim-heading,
.page-heading,
.holo-event-title,
.claim-greeting,
.faq-question {
    font-family: 'Arabic Pixel 2', monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.4;
    text-transform: uppercase;
}

.holo-title,
.claim-plate {
    font-size: clamp(19px, 2.6vw, 28px);
}

.claim-heading,
.page-heading,
.holo-event-title,
.claim-greeting {
    font-size: 16px;
}

.faq-question {
    padding: 8px 0;
    font-size: 13px;
}

/* ---------- The news question, and the prize line under the score board ---------- */

.claim-news {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font: 15px/1.4 'Hershey Duplex', sans-serif;
    letter-spacing: 0;
    color: #d1dacf;
}

.claim-news input {
    flex-shrink: 0;
    margin-top: 1px;
}

.play-prize {
    grid-column: 1 / -1;
    color: #fff;
}

/* ---------- An event's own videos: the main one large, the clips small under it ---------- */

.holo-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0f160d;
}

.holo-clips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}

.holo-clips video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #0f160d;
}

/* ---------- The site's main buttons: the rooms' names in the lobby, the ways out at the foot of every room, and
   the small links under a room's words (About, Terms, Privacy). Each lights up with the screen's ">" in front of
   it, and gives a little under the press ---------- */
:is(.holo-rooms, .inside-ways, .holo-small) .word {
    position: relative;
}

:is(.holo-rooms, .inside-ways, .holo-small) .word::before {
    content: '>';
    position: absolute;
    left: -13px;
    color: #5ec548;
    opacity: 0;
}

:is(.holo-rooms, .inside-ways, .holo-small) .word:is(:hover, :focus-visible, :active) {
    color: #fff;
    text-shadow: 0 0 6px #5ec548, 0 0 14px rgba(94, 197, 72, 0.9);
}

:is(.holo-rooms, .inside-ways, .holo-small) .word:is(:hover, :focus-visible, :active)::before {
    opacity: 1;
}

:is(.holo-rooms, .inside-ways, .holo-small) .word:active {
    translate: 0 2px;
}

/* in the lobby's list the mark stands at the side of the room's name, after it, clear of the screen's edge */
.holo-rooms .word::before {
    left: auto;
    right: -16px;
}

@media (prefers-reduced-motion: no-preference) {
    :is(.holo-rooms, .inside-ways, .holo-small) .word:is(:hover, :focus-visible)::before {
        animation: holo-blink 0.7s steps(2) infinite;
    }
}

@keyframes holo-blink {
    50% {
        opacity: 0;
    }
}

/* ---------- The clips of an event: a strip to move through sideways; one opens over the whole screen ---------- */
.holo-event .holo-video {
    margin-bottom: 22px;
}

.holo-reel-label {
    margin: 26px 0 10px;
}

.holo-reel {
    display: flex;
    gap: 14px;
    margin: 0 0 28px;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #2f7a1f #14310b;
}

.holo-reel-clip {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    padding: 0;
    border: 2px solid transparent;
    background: #0f160d;
    cursor: pointer;
    scroll-snap-align: start;
}

.holo-reel-clip:hover,
.holo-reel-clip:focus-visible {
    border-color: #5ec548;
}

.holo-reel-clip video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    pointer-events: none;
}

.holo-reel-play {
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 28px;
    height: 28px;
    background: rgba(20, 49, 11, 0.85);
    font: 700 14px/28px 'Arabic Pixel 2', monospace;
    text-align: center;
    color: #5ec548;
}

/* ---------- The photos of an event or a journal entry: one large, the others a strip under it ---------- */
.holo-gallery {
    margin: 26px 0 28px;
}

.holo-gallery-stage {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #0f160d;
    cursor: zoom-in;
}

.holo-gallery-stage img {
    display: block;
    width: 100%;
    max-height: 70vh;
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

.holo-gallery-strip {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #2f7a1f #14310b;
}

.holo-gallery-thumb {
    flex: 0 0 auto;
    width: 76px;
    padding: 0;
    border: 2px solid transparent;
    background: #0f160d;
    cursor: pointer;
    opacity: 0.6;
}

.holo-gallery-thumb.is-on,
.holo-gallery-thumb:hover,
.holo-gallery-thumb:focus-visible {
    border-color: #5ec548;
    opacity: 1;
}

.holo-gallery-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.holo-gallery-count {
    margin: 2px 0 0;
    text-align: right;
}

/* a photo opened over the whole screen */
.holo-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 7, 0.96);
    cursor: zoom-out;
}

.holo-viewer[hidden] {
    display: none;
}

.holo-viewer-open {
    overflow: hidden;
}

.holo-viewer img,
.holo-viewer video {
    max-width: 94vw;
    max-height: 84vh;
    object-fit: contain;
    cursor: default;
}

.holo-viewer img[hidden],
.holo-viewer video[hidden] {
    display: none;
}

.holo-viewer-count {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font: 700 13px/1 'Arabic Pixel 2', monospace;
    letter-spacing: 1.5px;
    color: #c7e9c0;
}

.holo-viewer-close,
.holo-viewer-step {
    position: absolute;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: rgba(20, 49, 11, 0.85);
    font: 700 22px/48px 'Arabic Pixel 2', monospace;
    color: #5ec548;
    cursor: pointer;
}

.holo-viewer-close:hover,
.holo-viewer-step:hover,
.holo-viewer-close:focus-visible,
.holo-viewer-step:focus-visible {
    background: #22501a;
    color: #fff;
}

.holo-viewer-close {
    top: 12px;
    right: 12px;
}

.holo-viewer-step {
    top: 50%;
    margin-top: -24px;
}

.holo-viewer-back {
    left: 8px;
}

.holo-viewer-next {
    right: 8px;
}

.holo-viewer.is-single .holo-viewer-step {
    display: none;
}

/* ---------- A Hard Currency in the Vault: the card that turns over, its secret vault under it ---------- */

.claim-holding {
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: 14px 16px;
    background: rgba(94, 197, 72, 0.12);
}

/* the currencies after the first: no picture again, one line each: its number, the day it was claimed, its vault */
.claim-holding-line {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-items: end;
    gap: 6px 18px;
}

.claim-holding-line > div {
    display: grid;
    gap: 2px;
}

.claim-holding-line .claim-card-value {
    font-size: 20px;
}

/* The CONTACT US window (over any page) and its form (also on its own page): the site's dark green, a bright thin
   frame, the fields as soft green blocks, the word that sends it a plain word. */
.contact-window {
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 26px 24px 22px;
    border: 1px solid #5ec548;
    background: #14310b;
    box-shadow: 0 0 34px rgba(94, 197, 72, 0.45);
    color: #c7e9c0;
    font-family: 'Hershey Duplex', sans-serif;
}

.contact-window::backdrop {
    background: rgba(8, 14, 6, 0.78);
}

.contact-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    font: 700 22px/36px 'Arabic Pixel 2', monospace;
    color: #5ec548;
    cursor: pointer;
}

.contact-form {
    display: grid;
    gap: 10px;
    max-width: 460px;
}

.contact-form .contact-line {
    margin: 0 0 4px;
}

.contact-form .contact-error {
    color: #ffd9a8;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 0;
    background: rgba(94, 197, 72, 0.2);
    font: 16px/1.4 'Hershey Duplex', sans-serif;
    color: #fff;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #c7e9c0;
}

.contact-form .contact-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.contact-form .contact-send {
    justify-self: start;
    border: 0;
    background: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

/* CONTACT US under the details in the Vault */
.claim-contact {
    display: inline-block;
    margin-top: 18px;
}

/* on a phone the name of the room is not also written at the top, beside the sound icon: it is the page's own
   heading just under it */
@media (max-width: 600px) {
    .inside-where {
        display: none;
    }
}

.claim-holding .bill {
    width: 100%;
}

/* ---------- The lobby's greeting: the name and its line, close together, on the left with the list ---------- */

.holo-greeting {
    margin-bottom: 2px;
    text-align: left;
}

.holo-greeting-line {
    margin: 0 0 22px;
    text-align: left;
}

/* ---------- The small words of the sign-in screen, in capitals like LOGIN ---------- */

.claim-small a,
.claim-check {
    text-transform: uppercase;
}

/* the news question is a sentence to read, so it keeps its own letters */
.claim-news {
    text-transform: none;
}

/* ---------- Depositing from inside an account: the Master Key's field first, then LINK, then the two ways to scan.
   The camera's picture is only there while the camera is open. ---------- */
/* the first line a little way down from the top of the screen */
.claim-form-scan .claim-fields {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding-top: 26px;
}

.claim-form-scan .claim-status {
    margin: 0;
}

.claim-form-scan .claim-field {
    width: 100%;
}

/* ENTER at one side, the two ways to scan at the other, on one line */
.claim-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 22px;
    width: 100%;
}

.claim-form-scan .claim-actions-scan {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
}

.claim-scan-note:empty {
    display: none;
}

.claim-form-scan .claim-viewfinder[hidden] {
    display: none;
}