:root {
  --accent: #d9b45c;
  --accent-deep: #a8842f;
  --menu-ink: #f2efe8;
  --menu-muted: rgba(242, 239, 232, 0.55);
  --menu-line: rgba(255, 255, 255, 0.14);
  --menu-fill: rgba(255, 255, 255, 0.06);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.darkmode body {    background: #222; }
.darkmode .card .back { filter: invert(100%) hue-rotate(180deg); }
.darkmode .btn.settings-btn { filter: invert(1); }

#hud {
  cursor: pointer;
  background: none;
  border: none;
  outline: 0;
  font-family: inherit;
  color: #888;
  font-size: min(4vw,4vh);
  font-weight: bold;
  padding: 0.5rem 0;
  text-align: center;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
}

#renewgame {
  transition: color 0.25s;
}
#renewgame:hover {
  color: #444;
}
.darkmode #renewgame:hover {
  color: #ccc;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

a {
  color:white;
  text-decoration:none;
  font-weight:300;
}

.credits {
    margin-top: auto;
    margin-bottom: 10px;
    padding-top: 6px;
    font-size: 0.8em;
    opacity: 0.75;
    text-align: center;
}

.prouesses {
  text-align: center;
  display: block!important;
  padding: 0.6em 0.9em;
  border: 1px solid var(--menu-line);
  border-radius: 12px;
  background-color: var(--menu-fill);
  font-size: 0.92em;
}

.prouesses:not(.prou-not-yet) {
  border-color: rgba(255, 255, 255, 0.38);
  background-color: rgba(255, 255, 255, 0.1);
}

.prou-not-yet{
  opacity: 0.32;
  filter: grayscale(0.65);
}

.prou-won{
  opacity: 1;
}

.menu, .score-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(14, 14, 18, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
  z-index: 9999;
  color: var(--menu-ink);
}

.menu__inner-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease-out);
}
.menu.hide .menu__inner-wrap,
.score-menu.hide .menu__inner-wrap {
  transform: translateY(16px) scale(0.985);
  opacity: 0;
}
.menu__header {
  margin-top: auto;
  margin-bottom: 8px;
  padding-top: 16px;
  font-family: 'Bell MT', Georgia, serif;
  font-size: 2.1em;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}
.menu__subheader {
  margin-bottom: 2em;
  padding-bottom: 12px;
  font-size: 0.82em;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--menu-muted);
}
.menu form, .score-menu form {
  width: 100%;
  max-width: 400px;
  padding: 0 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* options slide up + fade in, one after another, when a menu opens */
.menu .form-option, .score-menu .form-option {
  display: flex;
  align-items: center;
  margin: 14px 0;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.menu.hide .form-option, .score-menu.hide .form-option {
  opacity: 0;
  transform: translateY(12px);
  transition-duration: 0.15s;
  transition-delay: 0s;
}
.menu:not(.hide) form > :nth-child(1), .score-menu:not(.hide) form > :nth-child(1) { transition-delay: 0.05s; }
.menu:not(.hide) form > :nth-child(2), .score-menu:not(.hide) form > :nth-child(2) { transition-delay: 0.09s; }
.menu:not(.hide) form > :nth-child(3), .score-menu:not(.hide) form > :nth-child(3) { transition-delay: 0.13s; }
.menu:not(.hide) form > :nth-child(4), .score-menu:not(.hide) form > :nth-child(4) { transition-delay: 0.17s; }
.menu:not(.hide) form > :nth-child(5), .score-menu:not(.hide) form > :nth-child(5) { transition-delay: 0.21s; }
.menu:not(.hide) form > :nth-child(6), .score-menu:not(.hide) form > :nth-child(6) { transition-delay: 0.25s; }
.menu:not(.hide) form > :nth-child(7), .score-menu:not(.hide) form > :nth-child(7) { transition-delay: 0.29s; }
.menu:not(.hide) form > :nth-child(8), .score-menu:not(.hide) form > :nth-child(8) { transition-delay: 0.33s; }

.menu .form-option label, .score-menu .form-option label {
  display: block;
  width: 50%;
  padding-right: 14px;
  text-align: right;
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--menu-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.menu hr, .score-menu hr {
  border: 0;
  height: 1px;
  margin: 1.6em 0;
  background: linear-gradient(90deg, transparent, var(--menu-line) 20%, var(--menu-line) 80%, transparent);
}

.menu .form-option--select select {
  display: block;
  width: 50%;
  height: 40px;
  padding: 0 2.1em 0 0.9em;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--menu-ink);
  letter-spacing: 0.05em;
  background-color: var(--menu-fill);
  border: 1px solid var(--menu-line);
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f2efe8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  transition: border-color 0.25s, background-color 0.25s;
}
.menu .form-option--select select:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background-color: rgba(255, 255, 255, 0.1);
}
.menu .form-option--select select option {
  background-color: #17171b;
  color: var(--menu-ink);
}

.menu button, .score-menu button {
  display: block;
  width: 100%;
  height: 52px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--menu-ink);
  letter-spacing: 0.08em;
  background-color: var(--menu-fill);
  border: 1px solid var(--menu-line);
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              transform 0.15s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.menu button:hover, .score-menu button:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}
.menu button:active, .score-menu button:active {
  transform: scale(0.97);
}
.menu .menu-btn--primary {
  background: var(--menu-ink);
  border-color: transparent;
  color: #17171b;
  font-weight: 700;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}
.menu .menu-btn--primary:hover {
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
}
.menu .menu-btn--small {
  width: 50%;
  height: 38px;
  font-size: 0.85rem;
  border-radius: 10px;
}

/* checkboxes as toggle switches */
.menu .form-option--checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 46px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 13px;
  background-color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.25s var(--ease-out);
}
.menu .form-option--checkbox input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s var(--ease-spring);
}
.menu .form-option--checkbox input:checked {
  background-color: var(--menu-ink);
}
.menu .form-option--checkbox input:checked::after {
  transform: translateX(20px);
  background-color: #17171b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

@media (max-width: 840px) {
  .menu .form-option select, .menu .form-option input {
    outline: none;
  }
}

.close-menu-btn, .score-close-menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.5em;
  opacity: 0.65;
  transition: opacity 0.25s, transform 0.4s var(--ease-out);
}
/* block display kills the inline-baseline gap that would offset the pivot */
.close-menu-btn svg, .score-close-menu-btn svg {
  display: block;
}
.close-menu-btn:hover, .score-close-menu-btn:hover {
  opacity: 1;
  transform: rotate(90deg);
}

.btn, .menu-btn {
  cursor:pointer;
}

/**************/

#menu-bar {
  display: flex;
    justify-content: space-between;
    padding-top: 1rem;
}

#elstats {
  position:absolute;
  bottom:0;
  right:0;
  margin:0 20px 20px 0;
  color: #bbb;
}

#score {
  position:absolute;
  bottom:20px;
  left:1.5rem;
  
  color: #bbb;
}
#colline {
  position:absolute;
  text-align:right;
  bottom:0;
  right:1.5rem;
  bottom:20px;
  color: #bbb;
}

#menu-bar button, #menu-bar span {
  cursor: pointer;
    background: none;
    border: none;
    outline: 0;
  font-family:inherit;
  color: #888;
    font-size: min(4vw,4vh);

    font-weight: bold;
    padding: 0.5rem 0;
  transition: color 0.25s;
}
#newgame2:hover {
  color: #444;
}
.darkmode #newgame2:hover {
  color: #ccc;
}
.settings-btn svg {
  display: block;
  opacity: 0.8;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.settings-btn:hover svg {
  opacity: 1;
  transform: scale(1.12);
}

#topbar {
    position: fixed;
    top: 0;
    left: 0;
    text-align: left!important;
  width:auto;
  background-color:transparent!important;
  padding:0;
}



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  background:#eee;
  font-family: 'Bell MT', sans-serif;
  color: #333;
  padding: 0 2rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#container {
  position: fixed;
  top: calc(50% + 1.5rem);
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.card {
  position: absolute;
  display: inline-block;
  left: -1.9375rem;
  top: -2.75rem;
  /*width: 3.875rem;*/
  /*height: 5.5rem;*/
  height:15vmin;
  aspect-ratio:0.7045;
  /*background-color: #fff;*/
  background-color: transparent;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  box-shadow: 0 1px 1px rgba(0,0,0,0.15);
  cursor: grab!important;
  will-change: auto;
  transition: box-shadow 0.4s ease-out;
  box-shadow: 0;

}

/* Only hint the compositor while a card is actually moving/dragging, so the
   52 idle cards don't each hold a permanent GPU layer. Toggled from deck.js. */
.card.animating {
  will-change: transform;
}

.zoom .card {
  height:20vmin;
}

.card:hover{
  transition: box-shadow 0.2s ease-out;
  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
}

.card .face {
  height: 100%;
  background-position: 50% 50%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: .375em;
  /*animation:;*/
  /*-webkit-backface-visibility: visible!important;*/
    /*backface-visibility: visible!important*/
  
}
.card .back {
  position: absolute;
  background-image: url("./img/b.png");
  background-position: 50% 50%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius:5px;
}

.card.spades.rank1 .face    {  background-image: url("./img/front-0.png");}
.card.spades.rank2 .face    {  background-image: url("./img/front-1.png");}
.card.spades.rank3 .face    {  background-image: url("./img/front-2.png");}
.card.spades.rank4 .face    {  background-image: url("./img/front-3.png");}
.card.spades.rank5 .face    {  background-image: url("./img/front-4.png");}
.card.spades.rank6 .face    {  background-image: url("./img/front-5.png");}
.card.spades.rank7 .face    {  background-image: url("./img/front-6.png");}
.card.spades.rank8 .face    {  background-image: url("./img/front-7.png");}
.card.spades.rank9 .face    {  background-image: url("./img/front-8.png");}
.card.spades.rank10 .face   {  background-image: url("./img/front-9.png");}
.card.spades.rank11 .face   {  background-image: url("./img/front-10.png");}
.card.spades.rank12 .face   {  background-image: url("./img/front-11.png");}
.card.spades.rank13 .face   {  background-image: url("./img/front-12.png");}
.card.hearts.rank1 .face    {  background-image: url("./img/front-13.png");}
.card.hearts.rank2 .face    {  background-image: url("./img/front-14.png");}
.card.hearts.rank3 .face    {  background-image: url("./img/front-15.png");}
.card.hearts.rank4 .face    {  background-image: url("./img/front-16.png");}
.card.hearts.rank5 .face    {  background-image: url("./img/front-17.png");}
.card.hearts.rank6 .face    {  background-image: url("./img/front-18.png");}
.card.hearts.rank7 .face    {  background-image: url("./img/front-19.png");}
.card.hearts.rank8 .face    {  background-image: url("./img/front-20.png");}
.card.hearts.rank9 .face    {  background-image: url("./img/front-21.png");}
.card.hearts.rank10 .face   {  background-image: url("./img/front-22.png");}
.card.hearts.rank11 .face   {  background-image: url("./img/front-23.png");}
.card.hearts.rank12 .face   {  background-image: url("./img/front-24.png");}
.card.hearts.rank13 .face   {  background-image: url("./img/front-25.png");}
.card.clubs.rank1 .face     {  background-image: url("./img/front-26.png");}
.card.clubs.rank2 .face     {  background-image: url("./img/front-27.png");}
.card.clubs.rank3 .face     {  background-image: url("./img/front-28.png");}
.card.clubs.rank4 .face     {  background-image: url("./img/front-29.png");}
.card.clubs.rank5 .face     {  background-image: url("./img/front-30.png");}
.card.clubs.rank6 .face     {  background-image: url("./img/front-31.png");}
.card.clubs.rank7 .face     {  background-image: url("./img/front-32.png");}
.card.clubs.rank8 .face     {  background-image: url("./img/front-33.png");}
.card.clubs.rank9 .face     {  background-image: url("./img/front-34.png");}
.card.clubs.rank10 .face    {  background-image: url("./img/front-35.png");}
.card.clubs.rank11 .face    {  background-image: url("./img/front-36.png");}
.card.clubs.rank12 .face    {  background-image: url("./img/front-37.png");}
.card.clubs.rank13 .face    {  background-image: url("./img/front-38.png");}
.card.diamonds.rank1 .face  {  background-image: url("./img/front-39.png");}
.card.diamonds.rank2 .face  {  background-image: url("./img/front-40.png");}
.card.diamonds.rank3 .face  {  background-image: url("./img/front-41.png");}
.card.diamonds.rank4 .face  {  background-image: url("./img/front-42.png");}
.card.diamonds.rank5 .face  {  background-image: url("./img/front-43.png");}
.card.diamonds.rank6 .face  {  background-image: url("./img/front-44.png");}
.card.diamonds.rank7 .face  {  background-image: url("./img/front-45.png");}
.card.diamonds.rank8 .face  {  background-image: url("./img/front-46.png");}
.card.diamonds.rank9 .face  {  background-image: url("./img/front-47.png");}
.card.diamonds.rank10 .face {  background-image: url("./img/front-48.png");}
.card.diamonds.rank11 .face {  background-image: url("./img/front-49.png");}
.card.diamonds.rank12 .face {  background-image: url("./img/front-50.png");}
.card.diamonds.rank13 .face {  background-image: url("./img/front-51.png");}
@media (max-width: 540px) {
  #topbar {
    text-align: left;
  }
  .gh-ribbon {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }
}
@media (min-width: 640px) {
  html {
    font-size: 125%;
  }
}

@-webkit-keyframes pivot {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}
@keyframes pivot {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}
@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10%,20% {
        -webkit-transform: scale3d(.9,.9,.9) rotate(-3deg);
        transform: scale3d(.9,.9,.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate(3deg);
        transform: scale3d(1.1,1.1,1.1) rotate(3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate(-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}
.bgwin{
  animation: fadeToGreen 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.bglost{
  animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes fadeToRed {
  0% {
    background-color: rgba(0, 0, 0, 0.6);
  }
  100% {
    background-color: rgb(72 29 29 / 80%);
  }
}
@keyframes fadeToGreen {
  0% {
    background-color: rgba(0, 0, 0, 0.6);
  }
  100% {
    background-color: rgb(29 72 29 / 80%);
  }
}

.wiggle{
   -webkit-animation: pivot 0.5s infinite;
           animation: pivot 0.5s infinite;
  cursor: zoom-in;
}

.darkmode .card:has(.wiggle) {
  background:#222;
}

.card:has(.boom) {
  background:transparent;
}

.tada{ animation: flash 2s 3; }

.boom{   animation: flip 1s 1; }

/* Gentle flip when a card is turned face-up during play (see revealFlip). */
.revealflip{
  animation: flipInY 0.5s ease-out 1;
}

.bordsel {   border:2px solid red; }
.bordcan {   border:2px dashed orange; }

/* Respect users who ask for less motion: keep the game readable but calm. */
@media (prefers-reduced-motion: reduce) {
  .wiggle,
  .revealflip,
  .boom,
  .tada {
    animation: none !important;
  }
  .bgwin,
  .bglost {
    animation-duration: 0.01ms !important;
  }
  .card {
    transition: none !important;
  }
  .menu, .score-menu,
  .menu__inner-wrap,
  .menu .form-option, .score-menu .form-option,
  #mark-picker,
  .card .mark {
    transition: none !important;
    animation: none !important;
  }
}

#dcount {
  color: #d3d3d3;
  font-family: initial;
  position: absolute;
  width:10.5675vmin;
  text-align: center;

}

@keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
    }

    40% {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }

    50% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
    }

    80% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)
    }

    to {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
    }
}

@keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg)
    }

    60% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flash {
    0%,50%,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

.driver-popover img {
  display: block; margin-left: auto; margin-right: auto; width: 50%;
  max-width: 30vh;
}

/* --- card marks (right-click / long-press reminders) ------------------- */

.card .mark {
  position: absolute;
  top: 4.5%;
  right: 5%;
  width: 34%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  font-size: 2.5vmin;
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: none;
  z-index: 2;
}
.zoom .card .mark {
  font-size: 3.3vmin;
}
.card .mark:empty {
  display: none !important;
}
.card .mark:not(:empty) {
  animation: markPop 0.16s var(--ease-out);
}
.card .mark[data-mark="1"], .card .mark[data-mark="3"] { color: #c22b33; }
.card .mark[data-mark="0"], .card .mark[data-mark="2"] { color: #23252b; }
.card .mark[data-mark="4"] { color: #a8842f; }

.darkmode .card .mark {
  background-color: rgba(30, 30, 34, 0.94);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.darkmode .card .mark[data-mark="1"], .darkmode .card .mark[data-mark="3"] { color: #e05561; }
.darkmode .card .mark[data-mark="0"], .darkmode .card .mark[data-mark="2"] { color: #e8e8ec; }
.darkmode .card .mark[data-mark="4"] { color: var(--accent); }

@keyframes markPop {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* floating mark picker, opened by a long-press on a face-down village card */
#mark-picker {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  max-width: calc(100vw - 16px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(18, 18, 24, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  transform-origin: 50% 100%;
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-spring), visibility 0.2s;
}
#mark-picker.hide {
  transform: scale(0.85) translateY(8px);
  pointer-events: none;
}
#mark-picker button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.07);
  font-size: 1.35rem;
  font-family: Georgia, serif;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s var(--ease-spring);
}
#mark-picker button:hover {
  background-color: rgba(255, 255, 255, 0.16);
}
#mark-picker button:active {
  transform: scale(0.88);
}
#mark-picker button[data-mark="1"], #mark-picker button[data-mark="3"] { color: #e05561; }
#mark-picker button[data-mark="0"], #mark-picker button[data-mark="2"] { color: #e8e8ec; }
#mark-picker button[data-mark="4"] { color: var(--accent); }
#mark-picker .mark-clear {
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
}
#mark-picker button.sel {
  border-color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.16);
}