/* 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]>.status,#app[data-phase=shuffling]>.finish-shuffle,#app[data-phase=shuffling]>.shuffle-note{position:absolute;z-index:30;left:50%;transform:translateX(-50%);margin:0;text-align:center}
#app[data-phase=shuffling]>.status{top:43%;width:54%;background:#19191985;padding:7px;border-radius:3px}
#app[data-phase=shuffling]>.finish-shuffle{top:57%;white-space:nowrap}
#app[data-phase=shuffling]>.shuffle-note{top:71%;width:47%;background:#19191985;padding:6px;border-radius:3px;font-size:12px}

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