/* A scratch ticket: the painting, and the boxes laid over its panels. Sizes inside follow the
   ticket's width (cqw), so a box reads the same on a phone as on a desk. */
.scratch-ticket {
    --ticket-paper: #fff4d6;
    --ticket-ink: #23182f;
    --ticket-accent: #e2336b;
    position: relative;
    width: min(100%, 460px);
    aspect-ratio: 2 / 3;
    max-height: 88vh;
    margin: 0 auto;
    border: 3px solid var(--ticket-ink);
    border-radius: 6px;
    background: var(--ticket-paper);
    color: var(--ticket-ink);
    box-shadow: 7px 7px 0 var(--ticket-ink);
    overflow: hidden;
    container-type: inline-size;
    user-select: none;
    -webkit-user-select: none;
}

.scratch-ticket[data-format="tall"] { width: min(100%, 380px); }
.scratch-ticket[data-format="square"] { width: min(100%, 560px); }
.scratch-ticket[data-format="landscape"] { width: min(100%, 780px); }
.scratch-ticket[data-format="wide"] { width: min(100%, 860px); }

/* A ticket not painted yet, drawn plainly in its own colours. */
.scratch-sketch {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4cqw;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--ticket-accent) 20%, transparent) .4cqw, transparent .5cqw) 0 0 / 3cqw 3cqw,
        var(--ticket-paper);
    color: var(--ticket-ink);
    text-align: center;
}

.scratch-sketch header strong {
    display: block;
    color: var(--ticket-accent);
    font-size: 8cqw;
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.scratch-sketch header span,
.scratch-sketch footer p {
    display: block;
    margin: 1cqw 0 0;
    font-size: 2.6cqw;
    font-weight: 700;
    line-height: 1.3;
}

.scratch-sketch footer b {
    color: var(--ticket-accent);
    font-size: 2.6cqw;
    letter-spacing: .1em;
}

.scratch-prize-card {
    display: block;
    height: 3.2em;
    aspect-ratio: 5 / 7;
    margin: 0 auto;
    border-radius: .3em;
    object-fit: cover;
}

.scratch-box.is-prize .scratch-prize-card { height: 55cqh; }

.scratch-prize-name {
    max-width: 100%;
    overflow: hidden;
    font-size: min(12cqh, 9cqw);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scratch-ticket-painting {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Where the painting's panels could not be matched to the game, plain paper over them for the page's own. */
.scratch-cover {
    position: absolute;
    border: .6cqw solid var(--ticket-ink);
    border-radius: 2cqw;
    background: var(--ticket-paper);
    box-shadow: .8cqw .8cqw 0 color-mix(in srgb, var(--ticket-ink) 70%, transparent);
}

.scratch-ticket-play {
    position: absolute;
    inset: 0;
    touch-action: none;
}

/* A printed ticket's finishes are a card's (card-foil.css, the prismatic film): they lie over the whole
   ticket, latex and all, under the coin. A foil ticket stays flat under the light, to be scratched. */
.scratch-ticket[data-card-foil] { rotate: none; }
.scratch-ticket > .card-rarity-effect {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: auto;
    height: auto;
    border-radius: inherit;
    background: none;
    box-shadow: none;
    isolation: auto;
    mix-blend-mode: hard-light;
    pointer-events: none;
}
.scratch-ticket > .card-rarity-effect > .prismatic-surface { mix-blend-mode: normal; }
.scratch-ticket.is-negative { filter: invert(1); }
.scratch-ticket > .misprint-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
}
.scratch-ticket > .misprint-art .misprint-layer { pointer-events: none; }

/* A torn copy is half a ticket, the paper white where it gave; lying with its other half, thread holds the seam. */
.scratch-ticket-tear {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
/* The marks of the tear are a card's (trading-card.js, trading-card.css). */
.scratch-ticket-tear .card-tear-pulp { fill: #fbf8f0; }
.scratch-ticket-tear .card-tear-shade {
    fill: none;
    stroke: #3b2a1a52;
    stroke-width: 1px;
    stroke-width: .3cqw;
    vector-effect: non-scaling-stroke;
}
.scratch-ticket-tear .card-tear-crease {
    fill: none;
    stroke: #fffdf6cc;
    stroke-width: 1.5px;
    stroke-width: .45cqw;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.scratch-ticket-thread, .scratch-ticket-thread-edge {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}
.scratch-ticket-thread-edge {
    stroke: #f6f1e6b3;
    stroke-width: 4px;
    stroke-width: 1.5cqw;
}
.scratch-ticket-thread {
    stroke: #1d1a21;
    stroke-width: 2px;
    stroke-width: .8cqw;
}
.scratch-ticket.is-torn { box-shadow: none; }

/* A ticket someone holds, held up like a card on a stage that tilts under the pointer. */
.scratch-ticket-stage > .inspector-object {
    width: 100%;
}

.scratch-ticket-stage .scratch-ticket {
    max-height: none;
}

/* A ticket only shown, as a thumbnail: nothing scratches it. */
.scratch-ticket.is-still .scratch-ticket-play {
    pointer-events: none;
    touch-action: auto;
}

@media (pointer: fine) {
    .scratch-ticket-play { cursor: none; }
}

.scratch-box {
    position: absolute;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .4cqw;
    padding: 1cqw;
    border-radius: 1.6cqw;
    background: color-mix(in srgb, var(--ticket-paper) 70%, #fff);
    box-shadow: inset 0 0 0 .5cqw color-mix(in srgb, var(--ticket-ink) 25%, transparent);
    text-align: center;
    overflow: hidden;
    /* What a box holds is sized to the box, however large the model painted its panel. */
    container-type: size;
    transition: background .3s, transform .3s;
}

.scratch-symbol {
    display: block;
    width: auto;
    max-width: 82%;
    height: auto;
    max-height: 72%;
    min-height: 0;
    object-fit: contain;
}

.scratch-box.is-symbol .scratch-symbol { max-height: 86%; }
.scratch-box.is-symbol:has(em) .scratch-symbol { max-height: 64%; }

.scratch-box strong.is-word {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: min(24cqh, 16cqw);
    line-height: 1;
}

.scratch-box strong.is-letter { font-size: min(62cqh, 62cqw); }

.scratch-symbol.is-word {
    font-size: min(14cqh, 12cqw);
    font-weight: 900;
    text-transform: uppercase;
}

.scratch-box small {
    max-width: 100%;
    overflow: hidden;
    font-size: min(12cqh, 9cqw);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}

.scratch-box strong {
    font-size: min(36cqh, 30cqw);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}

.scratch-box strong i {
    margin-left: .6cqw;
    font-size: .45em;
    font-style: normal;
    letter-spacing: 0;
}

.scratch-box em {
    color: var(--ticket-accent);
    font-size: min(18cqh, 16cqw);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.scratch-box.is-prize strong { font-size: min(44cqh, 30cqw); }

.scratch-ticket.is-winner .scratch-box.is-winning {
    z-index: 1;
    background: var(--ticket-accent);
    color: var(--ticket-paper);
    transform: scale(1.06) rotate(-2deg);
    animation: scratch-winning 1.2s ease-in-out infinite alternate;
}

.scratch-ticket.is-winner .scratch-box.is-winning em { color: var(--ticket-paper); }

@keyframes scratch-winning {
    to { box-shadow: 0 0 0 1.2cqw color-mix(in srgb, var(--ticket-accent) 45%, transparent); }
}

.scratch-legend {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1.5cqw;
    margin: 0;
    padding: 0 2cqw;
    border-radius: 1.4cqw;
    background: color-mix(in srgb, var(--ticket-paper) 85%, #fff);
    box-shadow: inset 0 0 0 .4cqw color-mix(in srgb, var(--ticket-ink) 30%, transparent);
    list-style: none;
}

.scratch-legend li {
    display: flex;
    align-items: center;
}

.scratch-legend-symbol {
    width: 3.6cqw;
    height: 3.6cqw;
    margin-right: -.8cqw;
    object-fit: contain;
}

.scratch-legend-symbol.is-word {
    width: auto;
    font-size: 1.6cqw;
}

.scratch-legend b {
    margin-left: 1.6cqw;
    font-size: 2.8cqw;
    font-weight: 900;
}

.scratch-latex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* A ticket only looked at: nothing plays on it, and the pointer stays a pointer. */
.scratch-ticket-play.is-face {
    cursor: inherit;
    pointer-events: none;
    touch-action: auto;
}

/* The latex of a ticket only looked at, where the painting has no panel: brushed silver, as the coin finds it. */
.scratch-latex-panel {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 1cqw;
    background: linear-gradient(135deg, #c9ccd1, #eef0f2 35%, #a9adb4 50%, #dfe2e6 70%, #9ea3aa);
    color: rgb(40 44 52 / .5);
    font: 800 clamp(7px, 2.4cqw, 12px) Sora, system-ui, sans-serif;
}

.scratch-coin {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 0;
    height: 0;
    pointer-events: none;
}

.scratch-coin[hidden] { display: none; }

.scratch-coin-hand {
    position: absolute;
    left: -6.5cqw;
    top: -11.5cqw;
    display: block;
    width: 13cqw;
    height: 13cqw;
    filter: drop-shadow(3px 6px 3px rgb(0 0 0 / .35));
    transform: rotate(-18deg);
    transition: transform .12s ease-out;
}

.scratch-coin.is-pressing .scratch-coin-hand {
    transform: perspective(220px) rotateX(46deg) rotate(-18deg) translateY(8px);
}

.scratch-coin-hand .bouzopp-coin {
    width: 100%;
    height: 100%;
}

.scratch-coin-plain {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #c3c8ce 45%, #7b828a);
    box-shadow: inset 0 0 0 4px #9aa1a8;
}

.scratch-flake {
    position: absolute;
    z-index: 2;
    border-radius: 1px;
    background: #b3b8bf;
    pointer-events: none;
}

.scratch-ticket-result {
    position: absolute;
    right: 4%;
    z-index: 4;
    display: grid;
    gap: .4cqw;
    max-width: 70%;
    padding: 2cqw 3.6cqw;
    border: 1cqw double var(--ticket-ink);
    background: var(--ticket-paper);
    color: var(--ticket-ink);
    text-align: center;
    opacity: 0;
    transform: translateY(-12%) rotate(-5deg) scale(1.6);
    pointer-events: none;
}

/* On a wide ticket the stamp stays small, off the prize box. */
.scratch-ticket:is([data-format="landscape"], [data-format="wide"]) .scratch-ticket-result {
    max-width: 42%;
    font-size: .7em;
}

.scratch-ticket:is([data-format="landscape"], [data-format="wide"]) .scratch-ticket-result strong { font-size: 2.6cqw; }
.scratch-ticket:is([data-format="landscape"], [data-format="wide"]) .scratch-ticket-result span { font-size: 2cqw; }

.scratch-ticket-result.is-shown {
    opacity: 1;
    transform: translateY(-12%) rotate(-5deg) scale(1);
    transition: opacity .18s ease-out, transform .28s cubic-bezier(.2, 1.6, .5, 1);
}

.scratch-ticket-result strong {
    font-size: 4.4cqw;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.scratch-ticket-result span {
    font-size: 3.2cqw;
    font-weight: 800;
}

/* What a printed copy's finishes multiply its credits by, stamped beside what it won. */
.scratch-ticket-times {
    font-size: 2.6cqw;
    font-style: normal;
    font-weight: 900;
    color: var(--ticket-accent);
}

.scratch-ticket.is-winner .scratch-ticket-result {
    border-color: var(--ticket-accent);
    background: var(--ticket-accent);
    color: var(--ticket-paper);
    box-shadow: 1cqw 1cqw 0 var(--ticket-ink);
}

.scratch-ticket-serial {
    position: absolute;
    right: 2%;
    bottom: .6%;
    padding: .2cqw 1cqw;
    background: color-mix(in srgb, var(--ticket-paper) 80%, transparent);
    font: 700 1.9cqw ui-monospace, SFMono-Regular, Consolas, monospace;
}

.motion-reduced .scratch-ticket.is-winner .scratch-box.is-winning { animation: none; }
.motion-reduced .scratch-ticket-result.is-shown,
.motion-reduced .scratch-coin-hand,
.motion-reduced .scratch-box { transition: none; }