/* The slopped.site playing card and table felt, shared by every card game (cards.js on the games page and the
   standalone card games). Markup comes from /cardkit/art.js (faceHTML). A .felt sets the sizes:
   --cw / --ch (card width / height, 1 : 1.4) and --font (the index size, bigger on phones because it's what shows). */
.felt { --red: #c0281c; --face: #fffdf6; position: relative; border: 1px solid #17181520; border-radius: 5px; background-color: var(--paper, #f4f1e8); background-image: linear-gradient(#17181512 1px, transparent 1px), linear-gradient(90deg, #17181512 1px, transparent 1px); background-size: 32px 32px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.felt.cascading { overflow: clip; }
.felt .slot { position: absolute; top: 0; left: 0; display: grid; place-items: start center; box-sizing: border-box; width: var(--cw); height: var(--ch); padding-top: calc(var(--ch) * .3); border: 2px dashed #17181530; border-radius: calc(var(--cw) * .09); color: #17181540; font: 700 calc(var(--cw) * .38)/1 Arial, Helvetica, sans-serif; cursor: pointer; }
.felt .slot.found::before { content: attr(data-mark); }
.felt .slot.found.red { color: #c0281c55; }
.felt .slot.cell { background: #17181508; }
.felt .slot.stock.empty::before { content: "↻"; color: #17181566; }
.felt .slot.tab { border-color: transparent; }
.felt .slot.tab.empty { border-color: #17181530; }
.felt .slot:focus-visible { outline: 3px solid #728600; outline-offset: 3px; }
.felt .slot.hot, .felt .slot.selected { border: 2px solid var(--ink, #171815); background: #e3ff5999; }
.felt .card { position: absolute; top: 0; left: 0; width: var(--cw); height: var(--ch); cursor: grab; touch-action: none; transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
.felt.instant .card { transition: none; }
.felt .card.down { cursor: default; }
.felt .card.covered .pip, .felt .card.covered .court { visibility: hidden; }
.felt .card .face, .felt .card .back { position: absolute; inset: 0; overflow: hidden; border-radius: calc(var(--cw) * .09); }
.felt .card.down .face, .felt .card:not(.down) .back { display: none; }
.felt .face { box-sizing: border-box; border: 1px solid #1718154d; background: var(--face); box-shadow: 0 1px 0 #1718151f; color: var(--ink, #171815); }
.felt .face.red { color: var(--red); }
.felt .idx { position: absolute; top: calc(var(--font) * .16); left: calc(var(--font) * .22); display: flex; align-items: baseline; font: 700 var(--font)/1 Arial, Helvetica, sans-serif; letter-spacing: -.06em; white-space: nowrap; }
.felt .idx i { margin-left: .04em; font-size: .86em; font-style: normal; letter-spacing: 0; }
.felt .pip { position: absolute; top: 64%; left: 50%; font: calc(var(--cw) * .46)/1 Arial, Helvetica, sans-serif; transform: translate(-50%, -50%); }
.felt .pip.ace { font-size: calc(var(--cw) * .66); }
.felt .court { position: absolute; top: 67%; left: 50%; display: grid; place-items: center; width: 62%; height: 48%; border-radius: calc(var(--cw) * .07); background: var(--acid, #e3ff59); transform: translate(-50%, -50%); }
.felt .court b { font: 1000 calc(var(--cw) * .4)/1 "Archivo Black", "Arial Black", "Archivo Black Fallback", Arial, sans-serif; font-synthesis: none; letter-spacing: -.04em; }
.felt .court i { margin-top: -18%; font: calc(var(--cw) * .2)/1 Arial, sans-serif; font-style: normal; }
.felt .back { box-sizing: border-box; border: 1px solid var(--ink, #171815); background: url(/favicon.png) center / 58% no-repeat, repeating-linear-gradient(45deg, #e3ff5914 0 3px, transparent 3px 7px), var(--ink, #171815); box-shadow: inset 0 0 0 calc(var(--cw) * .05) var(--ink, #171815), inset 0 0 0 calc(var(--cw) * .05 + 1.5px) var(--acid, #e3ff59); }
.felt .card.sel .face { box-shadow: 0 0 0 3px var(--acid, #e3ff59), 0 0 0 4.5px var(--ink, #171815); }
.felt .card.hint .face { box-shadow: 0 0 0 3px var(--acid, #e3ff59), 0 0 0 4.5px var(--ink, #171815); animation: card-pop .5s ease-out 2; }
.felt .card.lift { z-index: 2000; cursor: grabbing; transition: none; }
.felt .card.lift .face { box-shadow: 0 12px 24px #17181540; }
.felt .card.glow .face { box-shadow: 0 0 0 3px var(--acid, #e3ff59), 0 0 0 4.5px var(--ink, #171815); animation: card-pop .4s ease-out; }
.felt .card.nope .face, .felt .card.nope .back { box-shadow: 0 0 0 2px var(--red); animation: card-nope .3s; }
.felt .card.flip .face { animation: card-flip .26s ease-out; }
.felt .card.dim .face { filter: saturate(.4) brightness(.86); }
@keyframes card-pop { 40% { transform: scale(1.08); } }
@keyframes card-nope { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@keyframes card-flip { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .felt .card { transition-duration: .01s; }
  .felt .card.glow .face, .felt .card.nope .face, .felt .card.nope .back, .felt .card.flip .face, .felt .card.hint .face { animation: none; }
}