/* ===================== the life counter's colours, backgrounds and zombies =====================
   Kept out of app.css so the counter's looks can change without touching the rest of the app.
   Every background is CSS, so nothing downloads and it all works offline at the table.
   A background is picked per seat (counter.js, pickLook) and drawn on .lc-seat; .lc-skin is the
   same thing in miniature, for the dot on the setup screen and the tiles in the picker. */

/* Four more seat colours, past the pod's own six. */
.ac-purple { --ac: #7B4FD6; --ac-ink: #FFFFFF; }
.ac-teal   { --ac: #1F9E9A; --ac-ink: #04201F; }
.ac-pink   { --ac: #E0569B; --ac-ink: #FFFFFF; }
.ac-orange { --ac: #EE7A2F; --ac-ink: #1F0E02; }

.lc-skin { position: relative; overflow: hidden; background: var(--ac); color: var(--ac-ink); }

/* ---- tinted by the seat's own colour ---- */
.lc-seat.sk-glow, .lc-skin.sk-glow {
  background: radial-gradient(130% 100% at 50% 35%, color-mix(in srgb, var(--ac) 70%, #fff) 0%, var(--ac) 42%, color-mix(in srgb, var(--ac) 50%, #000) 100%);
}
.lc-seat.sk-solid, .lc-skin.sk-solid { background: var(--ac); }
.lc-seat.sk-foil, .lc-skin.sk-foil {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 78%, #fff), var(--ac) 50%, color-mix(in srgb, var(--ac) 58%, #000));
}
.lc-seat.sk-stripes, .lc-skin.sk-stripes {
  background: repeating-linear-gradient(135deg, var(--ac) 0 16px, color-mix(in srgb, var(--ac) 78%, #000) 16px 32px);
}

/* A foil card's sheen, sweeping slowly across. It moves a layer rather than repainting the
   background, so six seats of it stay smooth on a phone. */
.lc-seat.sk-foil::before, .lc-skin.sk-foil::before,
.lc-seat.sk-treasure::before, .lc-skin.sk-treasure::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; right: -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .34) 44%, rgba(255, 120, 215, .24) 48%, rgba(120, 225, 255, .26) 52%, rgba(255, 250, 160, .22) 56%, transparent 65%);
  animation: sk-sheen 6.5s ease-in-out infinite alternate;
  will-change: transform;
}
.lc-seat.sk-treasure::before, .lc-skin.sk-treasure::before {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  animation-duration: 5s;
}
@keyframes sk-sheen { from { transform: translateX(-30%); } to { transform: translateX(30%); } }

/* ---- scenes of their own; the seat's colour stays as a ring so you know whose is whose ---- */
.lc-seat.sk-stars, .lc-skin.sk-stars {
  background:
    radial-gradient(1.4px 1.4px at 12px 18px, rgba(255, 255, 255, .95) 50%, transparent 55%) 0 0 / 97px 83px,
    radial-gradient(1px 1px at 61px 44px, rgba(255, 255, 255, .8) 50%, transparent 55%) 0 0 / 97px 83px,
    radial-gradient(1.8px 1.8px at 40px 70px, rgba(255, 255, 255, .9) 50%, transparent 55%) 0 0 / 131px 109px,
    radial-gradient(1px 1px at 90px 15px, rgba(255, 255, 255, .7) 50%, transparent 55%) 0 0 / 131px 109px,
    radial-gradient(90% 70% at 75% 85%, color-mix(in srgb, var(--ac) 70%, transparent), transparent 70%),
    radial-gradient(70% 60% at 15% 10%, color-mix(in srgb, var(--ac) 35%, transparent), transparent 70%),
    #090A18;
  color: #F3F1FF;
}
.lc-seat.sk-island, .lc-skin.sk-island {
  background:
    repeating-radial-gradient(ellipse 140% 60% at 50% 125%, rgba(255, 255, 255, .12) 0 2px, transparent 3px 22px),
    radial-gradient(110% 55% at 50% 115%, rgba(120, 230, 240, .75), transparent 60%),
    linear-gradient(180deg, #0A2F57 0%, #0E5E99 55%, #1793BD 100%);
  color: #F2FBFF;
}
.lc-seat.sk-mountain, .lc-skin.sk-mountain {
  background:
    radial-gradient(2.5px 2.5px at 13px 41px, rgba(255, 200, 90, .9) 50%, transparent 55%) 0 0 / 71px 89px,
    radial-gradient(1.5px 1.5px at 52px 17px, rgba(255, 150, 60, .8) 50%, transparent 55%) 0 0 / 97px 61px,
    radial-gradient(2px 2px at 31px 77px, rgba(255, 120, 40, .7) 50%, transparent 55%) 0 0 / 113px 131px,
    radial-gradient(100% 55% at 50% 112%, #FFC04A 0%, #FF5A1F 28%, rgba(160, 30, 15, .6) 52%, transparent 70%),
    linear-gradient(180deg, #150807 0%, #34100D 55%, #5E170F 100%);
  color: #FFF4E8;
}
.lc-seat.sk-forest, .lc-skin.sk-forest {
  background:
    radial-gradient(55% 45% at 18% 18%, rgba(190, 240, 140, .32), transparent 70%),
    radial-gradient(45% 40% at 85% 80%, rgba(110, 210, 130, .28), transparent 70%),
    repeating-linear-gradient(80deg, rgba(0, 0, 0, .14) 0 5px, transparent 5px 19px),
    linear-gradient(170deg, #0C301C, #1A5631 55%, #2A733F);
  color: #EFFFF2;
}
.lc-seat.sk-swamp, .lc-skin.sk-swamp {
  background:
    radial-gradient(90% 40% at 50% 105%, rgba(120, 210, 100, .40), transparent 70%),
    radial-gradient(55% 45% at 82% 12%, rgba(160, 100, 220, .40), transparent 70%),
    radial-gradient(3.5px 3.5px at 23px 51px, rgba(160, 230, 120, .45) 50%, transparent 58%) 0 0 / 83px 107px,
    radial-gradient(2px 2px at 61px 19px, rgba(160, 230, 120, .35) 50%, transparent 58%) 0 0 / 127px 73px,
    linear-gradient(180deg, #110D18, #21182C 60%, #18251A);
  color: #EEE7F8;
}
.lc-seat.sk-plains, .lc-skin.sk-plains {
  background:
    repeating-conic-gradient(from 0deg at 50% 118%, rgba(255, 255, 255, .28) 0deg 5deg, transparent 5deg 13deg),
    radial-gradient(90% 75% at 50% 112%, #FFF8DD 0%, #F7DC8E 42%, #E7AE45 100%);
  color: #3A2805;
}
.lc-seat.sk-synthwave, .lc-skin.sk-synthwave {
  background:
    repeating-linear-gradient(90deg, rgba(255, 90, 215, .55) 0 1px, transparent 1px 26px) 0 100% / 100% 36% no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 90, 215, .55) 0 1px, transparent 1px 13px) 0 100% / 100% 36% no-repeat,
    radial-gradient(circle 56px at 50% 100%, #FFD66E 0, #FF7AB6 96%, transparent 100%) 0 0 / 100% 64% no-repeat,
    linear-gradient(180deg, #1A0A38 0%, #47106C 42%, #B02F7C 64%, #1E0630 64.2%, #10041C 100%);
  color: #FFF1FB;
}
.lc-seat.sk-aurora, .lc-skin.sk-aurora {
  background:
    radial-gradient(70% 30% at 28% 28%, rgba(90, 255, 190, .50), transparent 70%),
    radial-gradient(60% 28% at 74% 46%, rgba(170, 120, 255, .45), transparent 70%),
    radial-gradient(50% 22% at 52% 12%, rgba(90, 210, 255, .38), transparent 70%),
    radial-gradient(1px 1px at 30px 40px, rgba(255, 255, 255, .8) 50%, transparent 55%) 0 0 / 89px 77px,
    linear-gradient(180deg, #03111A, #0A2130 60%, #0A1826);
  color: #ECFFF8;
}
.lc-seat.sk-treasure, .lc-skin.sk-treasure {
  background:
    radial-gradient(2px 2px at 17px 29px, rgba(255, 255, 255, .85) 50%, transparent 55%) 0 0 / 67px 83px,
    radial-gradient(1.2px 1.2px at 48px 11px, rgba(255, 255, 255, .7) 50%, transparent 55%) 0 0 / 101px 59px,
    radial-gradient(2.5px 2.5px at 9px 71px, rgba(255, 248, 220, .6) 50%, transparent 55%) 0 0 / 139px 113px,
    radial-gradient(95% 85% at 50% 40%, #FFEBA8 0%, #E7BA4C 50%, #9A6A13 100%);
  color: #3A2503;
}

.lc-seat.sk-moon, .lc-skin.sk-moon {
  background:
    radial-gradient(circle 40px at 70% 26%, #FFE1D8 0, #F2937B 72%, transparent 76%),
    radial-gradient(circle 110px at 70% 26%, rgba(255, 80, 50, .38), transparent 70%),
    radial-gradient(1.2px 1.2px at 21px 33px, rgba(255, 230, 225, .8) 50%, transparent 55%) 0 0 / 89px 71px,
    radial-gradient(1px 1px at 57px 9px, rgba(255, 230, 225, .6) 50%, transparent 55%) 0 0 / 113px 97px,
    linear-gradient(180deg, #2C0609 0%, #14030A 65%, #07020A 100%);
  color: #FFEDEA;
}
.lc-seat.sk-frost, .lc-skin.sk-frost {
  background:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 19px),
    radial-gradient(95% 75% at 50% 18%, #FFFFFF 0%, #DCEFFA 45%, #94C3E2 100%);
  color: #0E2A3D;
}

/* The seat's colour, as a ring round a scene. */
.lc-seat.sk-scene::after, .lc-skin.sk-scene::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 4px var(--ac), inset 0 0 22px color-mix(in srgb, var(--ac) 55%, transparent);
}
.lc-skin.sk-scene::after { box-shadow: inset 0 0 0 3px var(--ac); }
/* The ring sits over the seat's own edge, so low life and "drop it here" draw on the ring instead. */
.lc-seat.sk-scene.lc-low::after { box-shadow: inset 0 0 0 4px var(--danger), inset 0 0 26px color-mix(in srgb, var(--danger) 50%, transparent); }
.lc-seat.sk-scene.lc-drop::after { box-shadow: inset 0 0 0 4px var(--fg); }

/* A number readable on a busy picture. Poisoned totals are drawn with their own fill, so they are left alone. */
.lc-seat.sk-scene .lc-total:not(.poisoned), .lc-seat.sk-foil .lc-total:not(.poisoned) { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.lc-seat.sk-plains .lc-total:not(.poisoned), .lc-seat.sk-treasure .lc-total:not(.poisoned), .lc-seat.sk-frost .lc-total:not(.poisoned) { text-shadow: 0 1px 10px rgba(255, 255, 255, .55); }

/* Out is out, whatever the background. */
.lc-seat.lc-out { background: color-mix(in srgb, var(--ac) 30%, #1A1A1A); color: var(--ac-ink); }
.lc-seat.lc-out::before, .lc-seat.lc-out::after { display: none; }

/* ---- zombies: dead, still playing ---- */
.lc-seat.lc-zombie { box-shadow: inset 0 0 0 4px #6FCF4A, inset 0 0 40px rgba(110, 207, 74, .45); }
.lc-seat.sk-scene.lc-zombie::after { box-shadow: inset 0 0 0 4px #6FCF4A, inset 0 0 40px rgba(110, 207, 74, .45); }
.lc-seat.lc-zombie .lc-total:not(.poisoned) { color: #B6F27E; text-shadow: 0 0 16px rgba(110, 230, 70, .6), 0 2px 0 rgba(0, 0, 0, .35); }
.lc-token-zombie { padding: 0 4px; background: #17301A; color: #B6F27E; border-color: #6FCF4A; }
.lc-zombie-face {
  display: inline-flex; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  align-items: center; justify-content: center; background: #2B4A27;
  filter: sepia(1) hue-rotate(50deg) saturate(2.6) brightness(.95);
  animation: lc-shamble 2.4s ease-in-out infinite;
}
.lc-zombie-face img { width: 100%; height: 100%; object-fit: cover; }
.lc-zombie-face svg { width: 32px; height: auto; }
.lc-zombie-face.lc-face-initials { font-size: 12px; font-weight: 800; color: #E8FFD8; }
@keyframes lc-shamble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-1px); } }

/* ---- the picker ---- */
.lc-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; justify-items: center; }
.lc-swatches .lc-dot { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.lc-swatches .lc-dot[aria-pressed="true"], .lc-skinpick[aria-pressed="true"] .lc-skin { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--fg); }
.lc-swatch-who { font-size: 13px; font-weight: 800; color: var(--ac-ink); }
.lc-skins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lc-skinpick {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 0;
  border: 0; background: none; color: var(--fg); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.lc-skinpick .lc-skin { height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.lc-skinpick .lc-skin b { position: relative; z-index: 1; font-family: var(--f-code); font-size: 24px; }

@media (prefers-reduced-motion: reduce) {
  .lc-seat.sk-foil::before, .lc-skin.sk-foil::before, .lc-seat.sk-treasure::before, .lc-skin.sk-treasure::before,
  .lc-zombie-face { animation: none; }
}

/* ---- setting up ---- */
/* A seat nobody has claimed yet says so, in the same colour as the commander link under it. */
.lc-seatname .lc-pickwho { font-size: 11px; font-weight: 700; color: var(--link); }
/* The tonight tally: the name, then the numbers under it, never run together. */
.lc-tallywho { display: flex; flex-direction: column; min-width: 0; }