/* Readable interface; shared Start menu retains its own type. */
.window>h1{left:22%;width:56%;top:-29px;height:26px;font-size:24px;line-height:26px}
#app h2{font-size:16px}
#app .card-name,#app[data-phase=reading] .card-name{font-size:15px;line-height:1.3}
#app .card-name small,#app .short{font-size:14px;line-height:1.4}
#app .status,#app .asked{font-size:16px}
#app .deck-controls,#app .reveal-label,#app .again,#app[data-phase=reading] .again{font-size:14px}
#app[data-phase=reading] .meaning{font-size:calc(16px * var(--meaning-text-scale,1));line-height:1.45;overflow-y:auto;overscroll-behavior:contain}
#app[data-phase=reading] .meaning h3{font-size:calc(18px * var(--meaning-text-scale,1))}
#app[data-phase=reading] .orientation-label{font-size:calc(14px * var(--meaning-text-scale,1))}
@container(max-width:500px){#app .card-name,#app[data-phase=reading] .card-name{font-size:13px}#app h2{font-size:14px}.window>h1{font-size:22px}}


/* The card lap uses the whole interior; controls remain above it. */
#app[data-phase=shuffling]{position:relative;isolation:isolate;overflow:hidden}
#app[data-phase=shuffling]>.motion-fan{position:absolute;inset:8px;z-index:1;pointer-events:none}
#app[data-phase=shuffling]>.shuffle-controls{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,82%);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 24px;background:#24202d;border:1px solid #8d819e;box-shadow:4px 4px 0 #100e16;text-align:center}
#app[data-phase=shuffling] .shuffle-controls .status{position:static;transform:none;margin:0;padding:0;width:auto;color:#f1edf6!important;text-shadow:none!important;font-size:17px;line-height:1.45;background:none}
#app[data-phase=shuffling] .shuffle-controls .finish-shuffle{position:static;transform:none;margin:0;white-space:nowrap;font-size:16px}
#app[data-phase=shuffling] .shuffle-controls .shuffle-note{position:static;transform:none;margin:0;padding:0;width:auto;color:#d3cadf;font-size:14px;line-height:1.45;background:none}

.motion-card{will-change:transform;backface-visibility:hidden}

/* Flat cards retain their stacking order for the entire shuffle. */
.swim-fan{transform-style:flat;perspective:none}
.swim-card{will-change:transform;backface-visibility:hidden;z-index:auto;transition:none!important;animation:none!important}

/* User-supplied card back: preserve its colors and the existing card box. */
.supplied-back{background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
#app .back img.supplied-card-art,.back img.supplied-card-art,.year-card-back img.supplied-card-art{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:fill;filter:none!important;border-radius:0;pointer-events:none}

/* Printed-foil glints: static on the moving deck to keep shuffling lightweight. */
.supplied-back::after,.reading-card.face::after{content:"";position:absolute;inset:4% 5%;border-radius:7% / 4%;pointer-events:none;background:linear-gradient(var(--foil-angle,125deg),transparent 12%,#a9e8ff18 28%,#f1c0ff30 39%,#ffffff65 47%,#d2fff133 53%,#fff0b221 64%,transparent 82%);background-size:230% 230%;background-position:45% 50%;opacity:.65;box-shadow:inset 0 0 0 1px #ffffff25}
.reading-card.face::after{inset:1% 3%;opacity:.32}
#app[data-phase=ready] .illustration .supplied-back::after{animation:card-foil 8s ease-in-out infinite alternate}
#app[data-phase=ready] .place:nth-child(2) .supplied-back::after{animation-delay:-2.6s}
#app[data-phase=ready] .place:nth-child(3) .supplied-back::after{animation-delay:-5.2s}
.deck-card:hover .supplied-back::after,.deck-card:focus-visible .supplied-back::after,.reading-card:hover::after{background-position:65% 45%;opacity:.82}
@keyframes card-foil{from{background-position:25% 40%;opacity:.4}to{background-position:70% 60%;opacity:.75}}
#app .ribbon{padding:30px 16px 26px;min-height:166px}
#app .deck-card{transform:translateY(var(--lift,0px)) rotate(var(--tilt,0deg));margin-right:var(--overlap,-35px);transition:transform .18s ease-out!important}
#app .deck-card:last-child{margin-right:0}
#app .deck-card:hover,#app .deck-card:focus-visible{transform:translateY(calc(var(--lift,0px) - 8px)) rotate(var(--tilt,0deg));z-index:2}
@media(prefers-reduced-motion:reduce){#app .supplied-back::after{animation:none!important}#app .deck-card{transition:none!important}}