/*! Solitr Engine 0.1.0 */
/* Solitr Engine — table, cards, places, feedback. Sizes come from the engine
   as --se-cw (card width), --se-ch (card height), --se-r (corner radius). */
.se-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* the cards' z-indexes (and the win effect) stay inside the table: fixed
     bars and dialogs of the page are always above it */
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.se-card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--se-cw);
  height: var(--se-ch);
  touch-action: none;
  -webkit-perspective: 800px;
  perspective: 800px;
}
.se-flip {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.se-card.up > .se-flip { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.se-face {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--se-r);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.se-front { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background-color: #fff; }
.se-back { background-color: #1f4fa3; }
.se-drag { will-change: transform; }
.se-drag > .se-flip > .se-face { box-shadow: 0 8px 18px rgba(0, 0, 0, .42); }

.se-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--se-cw);
  height: var(--se-ch);
  box-sizing: border-box;
  border-radius: var(--se-r);
  border: 2px solid rgba(255, 255, 255, .24);
  background: rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .32);
  font: 700 calc(var(--se-cw) * .36)/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.se-slot-stock { cursor: pointer; }
.se-slot-stock .se-slot-mark { font-size: calc(var(--se-cw) * .55); }
.se-stock-none .se-slot-mark, .se-stock-empty .se-slot-mark { font-size: calc(var(--se-cw) * .3); opacity: .7; }

.se-over > .se-flip > .se-face,
.se-slot.se-over { box-shadow: 0 0 0 3px #ffd54a, 0 1px 2px rgba(0, 0, 0, .35); }
.se-hint > .se-flip > .se-face,
.se-slot.se-hint { -webkit-animation: se-hint .8s ease-in-out 2; animation: se-hint .8s ease-in-out 2; }
@-webkit-keyframes se-hint {
  0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 4px #ffe066, 0 0 18px 4px rgba(255, 224, 102, .75); }
}
@keyframes se-hint {
  0%, 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 4px #ffe066, 0 0 18px 4px rgba(255, 224, 102, .75); }
}
.se-sel > .se-flip > .se-face { box-shadow: 0 0 0 3px #5cc8ff, 0 0 14px 2px rgba(92, 200, 255, .65); }
.se-paused .se-card { visibility: hidden; }

/* Crescent: the shuffle button — a ring with the number of shuffles left */
.se-slot-shuffle { cursor: pointer; }
.se-slot-shuffle .se-slot-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58%;
  height: calc(var(--se-cw) * .58);
  box-sizing: border-box;
  border-radius: 50%;
  border: calc(var(--se-cw) * .07) solid rgba(255, 255, 255, .5);
  border-right-color: rgba(255, 255, 255, .18);
  font-size: calc(var(--se-cw) * .24);
  color: rgba(255, 255, 255, .85);
}
.se-slot-shuffle.se-stock-none .se-slot-mark { display: none; }

/* win effect canvas over the table */
.se-fx { position: absolute; left: 0; top: 0; z-index: 9000; pointer-events: none; }