/* Original vector deck. Material vocabulary: Luma's lit rim and light pool,
   Gita Light & Story's separate engraving, chromatic foil and glare masks. */
.playing-card {
  --card-px: 50%; --card-py: 35%; --card-rx: 0deg; --card-ry: 0deg;
  --card-light: #b5d0ac; --card-ink: #254d43;
  position: relative; display: inline-block; flex: 0 0 auto;
  width: var(--card-width, 92px); aspect-ratio: 5 / 7; padding: 0; border: 0;
  background: transparent; border-radius: 7.4%; isolation: isolate;
  color: var(--card-ink); perspective: 900px;
  vertical-align: middle; overflow: visible; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button.playing-card { cursor: pointer; touch-action: manipulation; }
.playing-card:focus-visible { outline: 2px solid #f4d9a1; outline-offset: 6px; }
.playing-card:disabled { cursor: default; }
.pcard-tilt, .pcard-turner, .pcard-face, .pcard-art,
.pcard-foil, .pcard-grain, .pcard-glare, .pcard-rim, .pcard-back-shine {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit;
}
.pcard-tilt { transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)); transform-style: preserve-3d; transition: transform .28s ease; }
.playing-card[data-lit] .pcard-tilt { transition: transform .12s ease-out; }
.pcard-turner { transform-style: preserve-3d; transform: rotateY(0); transition: transform .5s cubic-bezier(.22,.7,.2,1); }
.playing-card[data-face-down="true"] .pcard-turner { transform: rotateY(180deg); }
.pcard-face { background: var(--card-paper,#efeade); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 0 #fff7d4a0, 0 3px 0 #9e9984, 0 8px 18px #0005; }
.pcard-front { transform: translateZ(.8px); }
.pcard-back { background: #18352e; transform: rotateY(180deg) translateZ(.8px); }
.pcard-art { object-fit: fill; pointer-events: none; }
.pcard-fallback,.pcard-back-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5%; color:var(--card-ink); font:clamp(12px,4vw,32px) Georgia,serif; background:var(--card-paper,#efeade); border-radius:inherit; }
.pcard-fallback b { position:absolute; top:6%; left:7%; font-size:.7em; font-weight:normal; color:var(--card-ink); }
.pcard-fallback { color:var(--suit-ink,var(--card-ink)); }
.pcard-back-fallback { background:#18352e; color:#d6c18b; font-size:25px; }
.pcard-back-fallback small { font:5px -apple-system,sans-serif; letter-spacing:1.2px; }
.pcard-edge { position:absolute; top:1%; height:98%; width:1.6px; background:repeating-linear-gradient(#dfd3b9 0px,#7d7a65 .5px,#f4eddb 1px,#bfb396 1.5px); transform-style:preserve-3d; backface-visibility:visible; pointer-events:none; }
.pcard-edge-left { left:0; transform:rotateY(-90deg) translateX(-.8px); transform-origin:left center; }
.pcard-edge-right { right:0; transform:rotateY(90deg) translateX(.8px); transform-origin:right center; }
.pcard-mask-preview { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,#92ffcb,#7ad7f1 40%,#cd9ffb); opacity:0; -webkit-mask-image:var(--foil-mask); mask-image:var(--foil-mask); -webkit-mask-size:100% 100%; mask-size:100% 100%; pointer-events:none; }
.pcard-halo {
  position: absolute; inset: -9%; border-radius: 12%; pointer-events: none;
  background: radial-gradient(ellipse at var(--card-px) var(--card-py), var(--card-light), transparent 72%);
  filter: blur(12px); opacity: 0; transition: opacity .35s;
}
.playing-card[data-lit] > .pcard-halo,
.playing-card:focus-visible > .pcard-halo { opacity: .38; }
.pcard-foil {
  background-image: repeating-linear-gradient(117deg,#ac79c9 0%,#72b7c6 12%,#d8c879 24%,#9fd1af 36%,#ce85b7 48%,#ac79c9 60%),
    repeating-linear-gradient(34deg,#fff5 0px,#ffffff05 1px,#0007 2px,#fff2 3px);
  background-size: 380% 380%, 160% 160%;
  background-position: var(--card-px) var(--card-py), var(--card-px) var(--card-py);
  background-blend-mode: overlay; mix-blend-mode: color-burn; opacity: .29;
  -webkit-mask-image: var(--foil-mask); mask-image: var(--foil-mask);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  pointer-events: none; transition: opacity .3s;
}
.playing-card[data-lit] .pcard-foil { opacity: .62; }
.pcard-grain {
  background-image: repeating-radial-gradient(circle at 23% 62%,#fff8 0px,#fff0 .7px,#0000 1.6px);
  background-size: 7px 7px; mix-blend-mode: soft-light; opacity: .06; pointer-events: none;
  -webkit-mask-image: var(--foil-mask); mask-image: var(--foil-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.pcard-glare {
  background: radial-gradient(ellipse at var(--card-px) var(--card-py),#ffffffb3 0%,#fff1 32%,#fff0 65%);
  mix-blend-mode: soft-light; opacity: .3; pointer-events: none; transition: opacity .3s;
}
.playing-card[data-lit] .pcard-glare { opacity: .75; }
.pcard-rim { box-shadow: inset 0 0 0 1px #fff6, inset 0 0 0 2px #9f8e5c30; pointer-events: none; }
.pcard-rim::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.1px;
  background: radial-gradient(ellipse at var(--card-px) var(--card-py),#fff9da, var(--card-light) 26%,#d4bb7c44 68%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.pcard-back-shine { background: linear-gradient(125deg,transparent 10%,#f8df9d19 40%,#faffdc30 49%,#84ceb912 56%,transparent 72%); background-size: 200%; background-position: var(--card-px) var(--card-py); pointer-events: none; }
.playing-card--compact { --card-width: 52px; }
.playing-card--compact .pcard-face { box-shadow: 0 1px 0 #fff4, 0 2px 0 #9e9984, 0 4px 9px #0004; }
[data-motion="reduced"] .pcard-tilt { transform: none !important; transition: none; }
[data-motion="reduced"] .pcard-turner { transition: none; }
[data-motion="reduced"] .pcard-foil { opacity: .18; background-position: 50% 35%; transition: none; }
[data-motion="reduced"] .pcard-glare, [data-motion="reduced"] .pcard-halo { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pcard-tilt { transform: none !important; transition: none; }
  .pcard-turner, .pcard-foil, .pcard-glare, .pcard-halo { transition: none; }
  .pcard-halo { display: none; }
}
/* A material inspector of the actual table component, not a second deck. */
.deck-studio { --deck-accent:#e7b69b; --deck-muted:#9eac9a; color:#eae6d8; font-family:inherit; min-width:0; padding:2px; }
.deck-studio * { box-sizing:border-box; }
.deck-studio button,.deck-studio input { font:inherit; }
.deck-studio button:focus-visible,.deck-studio input:focus-visible { outline:2px solid var(--deck-accent); outline-offset:3px; }
.deck-studio-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:20px; }
.deck-eyebrow { font-size:7px; letter-spacing:1.5px; color:#a7b399; margin:0 0 9px; }
.deck-studio-heading h2 { font:30px/1.15 Georgia,serif; font-weight:normal; margin:0 0 12px; letter-spacing:-.5px; }
.deck-studio-heading p:last-child { font-size:10px; line-height:1.8; margin:0; color:var(--deck-muted); max-width:450px; }
.deck-button { padding:9px 11px; color:#d6dec9; background:#f4eddb06; border:1px solid #d5ddc31c; border-radius:6px; font-size:9px!important; cursor:pointer; }
.deck-button:hover { background:#e7b69b0f; border-color:#e7b69b45; }
.deck-button[aria-pressed=true] { background:#e7b69b13; border-color:#e7b69b69; color:#f3c9ad; }
.deck-close { font-size:22px!important; padding:0; width:30px; height:30px; flex:none; }
.deck-studio-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr)); gap:23px; align-items:start; }
.deck-visual-column,.deck-control-column { min-width:0; }
.deck-scene { position:relative; height:390px; width:100%; border:1px solid #b9c7a51f; border-radius:13px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 36%,#4162594a,transparent 68%),linear-gradient(145deg,#202d27,#111d18); perspective:1100px; }
.deck-scene:before { content:''; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(circle,#d1ddbf1a .65px,transparent .9px); background-size:18px 18px; mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent); -webkit-mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent); }
.deck-scene-mark { position:absolute; left:10px; right:10px; text-align:center; font-size:5px; letter-spacing:1px; color:#9caf9677; pointer-events:none; z-index:4; }
.deck-scene-mark-top { top:15px; }
.deck-scene-mark-bottom { bottom:15px; font-size:4.7px; }
.deck-studio-shadow { position:absolute; width:60%; height:18px; background:#0008; filter:blur(14px); left:20%; bottom:42px; border-radius:50%; transform:scaleX(.82); }
.deck-choreography { position:absolute; left:50%; top:50%; margin-left:-98px; margin-top:-137px; width:196px; height:274.4px; transform-style:preserve-3d; z-index:2; }
.deck-object { position:relative; width:100%; height:100%; transform:rotateX(-7deg) rotateY(0); transform-style:preserve-3d; transition:transform .14s ease-out; }
.deck-object .playing-card,.deck-fan-ghost .playing-card { --card-width:196px; width:196px; height:274.4px; max-width:none; }
.deck-object .playing-card { transform-style:preserve-3d; isolation:auto; }
.deck-scene .pcard-glare { background-size:180% 180%; background-position:var(--card-px) var(--card-py); }
.deck-scene .pcard-front { transform:translateZ(1.2px); }
.deck-scene .pcard-back { transform:rotateY(180deg) translateZ(1.2px); }
.deck-scene .pcard-edge { width:2.4px; }
.deck-scene .pcard-edge-left { transform:rotateY(-90deg) translateX(-1.2px); }
.deck-scene .pcard-edge-right { transform:rotateY(90deg) translateX(1.2px); }
.deck-scene[data-foil=off] .pcard-foil { opacity:0!important; }
.deck-scene[data-engraving=off] .pcard-grain { opacity:0!important; }
.deck-scene[data-glare=off] .pcard-glare,.deck-scene[data-glare=off] .pcard-back-shine { opacity:0!important; }
.deck-scene[data-bezel=off] .pcard-rim,.deck-scene[data-bezel=off] .pcard-halo { opacity:0!important; }
.deck-scene[data-thickness=off] .pcard-edge { display:none; }
.deck-scene[data-mask=on] .pcard-art { opacity:.3; }
.deck-scene[data-mask=on] .pcard-foil,.deck-scene[data-mask=on] .pcard-grain,.deck-scene[data-mask=on] .pcard-glare { opacity:0!important; }
.deck-scene[data-mask=on] .pcard-mask-preview { opacity:.92; }
.deck-face-controls { display:flex; gap:5px; margin:12px 0; }
.deck-face-controls .deck-button { flex:1; padding-inline:6px; }
.deck-range-label { position:relative; display:block; color:#b2c0a7; font-size:8px; line-height:1.5; margin:12px 0; }
.deck-range-label output { float:right; color:#e6c2a5; font-size:8px; font-variant-numeric:tabular-nums; }
.deck-range-label input[type=range] { display:block; width:100%; height:15px; margin:8px 0 0; accent-color:#e5b69b; cursor:pointer; }
.deck-card-facts { display:flex; justify-content:space-between; flex-wrap:wrap; gap:7px; border-top:1px solid #c1cbb21a; padding-top:13px; margin:16px 0 0; line-height:1.5; }
.deck-card-facts strong { color:#e1d7be; font-size:10px; font-weight:500; }
.deck-card-facts span { font-size:7px; color:#8c9d82; }
.deck-fieldset { padding:0; margin:0 0 20px; border:0; min-width:0; }
.deck-fieldset legend { display:block; width:100%; color:#c0caaf; font-size:8px; text-transform:uppercase; letter-spacing:1.3px; margin-bottom:11px; padding:0; }
.deck-suit-picker,.deck-rank-picker { display:flex; gap:5px; }
.deck-suit-picker .deck-button { flex:1; color:var(--deck-suit-color); font:22px Georgia,serif!important; padding:8px 3px; }
.deck-suit-picker .deck-button small { display:block; font:5px -apple-system,sans-serif; color:#98a78e; margin-top:4px; }
.deck-rank-picker { margin-top:7px; }
.deck-rank-picker .deck-button { flex:1; padding:8px 2px; font-size:11px!important; }
.deck-rank-picker small { display:block; font-size:5px; color:#879d7e; margin-top:4px; }
.deck-layer-option { display:flex; align-items:center; gap:9px; margin:0; padding:9px 0; border-bottom:1px solid #b7c7aa0d; cursor:pointer; }
.deck-layer-option input { accent-color:#e7b69b; width:13px; height:13px; margin:0; flex:none; }
.deck-layer-option span { font-size:10px; color:#d1dbc2; line-height:1.4; }
.deck-layer-option small { display:block; color:#889d7e; font-size:7px; line-height:1.7; margin-top:3px; }
.deck-light-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.deck-light-controls .deck-range-label { margin:0; }
.deck-presets { margin-top:21px; padding:20px 0 15px; border-top:1px solid #c1cbb21a; }
.deck-presets h3 { font:20px Georgia,serif; font-weight:normal; color:#d4ddc5; margin:0 0 13px; }
.deck-preset-buttons { display:flex; gap:6px; flex-wrap:wrap; }
.deck-preset-buttons .deck-button { font-size:8px!important; }
.deck-motion-note { color:#8c9f82; font-size:9px; line-height:1.8; margin:12px 0 0; min-height:17px; }
.deck-mask-key { display:flex; flex-wrap:wrap; gap:8px 18px; border-top:1px solid #c1cbb21a; padding-top:13px; color:#7f9476; font-size:7px; line-height:1.6; }
.deck-mask-key span { display:flex; gap:5px; align-items:center; }
.deck-mask-key i { width:5px; height:5px; border-radius:50%; background:#9cddc5; }
.deck-mask-key span:nth-child(2) i { background:#e7b69b; }
.deck-mask-key span:nth-child(3) i { background:#e6e0cf; }
.deck-fan-ghosts { position:absolute; inset:0; z-index:1; pointer-events:none; }
.deck-fan-ghost { position:absolute; left:50%; top:50%; margin-left:-98px; margin-top:-137px; width:196px; height:274.4px; transform-origin:50% 85%; opacity:0; }
.deck-scene[data-study=celebrate]:after { content:'✦'; position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font:250px Georgia,serif; color:#e2cf9829; animation:deck-winning-star 1.18s ease-out 1; z-index:3; }
.deck-scene[data-study=table-slam]:after { content:''; position:absolute; left:50%; top:50%; margin:-132px 0 0 -110px; width:220px; height:264px; border:1px solid #e2cf9880; border-radius:50%; pointer-events:none; animation:deck-slam-ring .76s ease-out 1; z-index:3; }
@keyframes deck-winning-star { 0% { opacity:0; transform:scale(.3) rotate(-15deg); } 50% { opacity:1; } 100% { opacity:0; transform:scale(1.65) rotate(20deg); } }
@keyframes deck-slam-ring { 0%,30% { opacity:0; transform:scale(.75); } 42% { opacity:.7; } 100% { opacity:0; transform:scale(1.6,.82); } }
[data-motion=reduced] .deck-object,.deck-scene[data-motion=reduced] .deck-object { transition:none; }
[data-motion=reduced] .deck-scene:after,.deck-scene[data-motion=reduced]:after { animation:none!important; display:none; }
@supports not (transform-style:preserve-3d) {
  .pcard-front,.pcard-back,.pcard-turner { transform:none!important; backface-visibility:visible; }
  .pcard-back { display:none; }
  .playing-card[data-face-down=true] .pcard-front { display:none; }
  .playing-card[data-face-down=true] .pcard-back { display:block; }
  .pcard-edge { display:none; }
  .deck-object { transform:none!important; }
}
@media(max-width:540px) { .deck-studio-heading h2 { font-size:26px; }.deck-scene { height:360px; }.deck-studio-grid { gap:19px; }.deck-presets h3 { font-size:19px; }.deck-motion-note { font-size:8px; } }