/* Game controls — premium */
.game-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  margin: 16px 16px 14px;

  background:
    radial-gradient(700px 260px at 30% 0%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%),
    rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 40px rgba(0,0,0,.20);
}
.game-controls{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
.game-meta{
  display:flex;
  gap:14px;
  font-weight: 900;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
}
/* Image buttons (bottom dock feel). If images are present in /assets/ui/, we show them as big tappable targets. */
.ui-imgbtn{ padding: 8px 10px; }
/* Table — premium */
#game-table{
  position: relative;
  width: calc(100% - 32px);
  height: 560px;
  margin: 0 16px 18px;
  border-radius: 18px;

  background:
    radial-gradient(900px 520px at 50% 12%, rgba(255,255,255,.07), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.22) 100%),
    rgba(0,0,0,.18);

  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 50px rgba(0,0,0,.28);
  overflow:hidden;
  touch-action: none;
}
.pile-slot{
  position:absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.06);
}
.card{
  position:absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 14px;
  will-change: transform;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.card svg{
  width:100%;
  height:100%;
  display:block;
  border-radius: 14px;
}
.card.dragging{
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.35));
}
/* Hint highlight */
.card.hint-card{
  /* Card to take: GREEN (like Spider) */
  outline: 3px solid rgba(120, 255, 160, .95);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(120, 255, 160, .18), 0 0 26px rgba(120, 255, 160, .28);
  border-radius: 16px;
}
.pile-slot.hint-target,
.pile-hit.hint-target{
  border-color: rgba(255, 220, 120, .95);
  background: rgba(255, 220, 120, .10);
  box-shadow: 0 0 0 3px rgba(255, 220, 120, .20), 0 0 28px rgba(255, 220, 120, .35);
  animation: hintPulse 1.05s ease-in-out infinite;
}
.card.hint-dest{
  outline: 3px solid rgba(255, 220, 120, .85);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgba(255, 220, 120, .18), 0 0 30px rgba(255, 220, 120, .35);
  border-radius: 16px;
}
/* Soft valid-target highlighting (tap selection + drag) */
.card.selected-card{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
  border-radius: 16px;
}

/* If a hinted card is also "selected" (tap-to-select), keep the GREEN hint.
   This prevents the white selected outline from overriding the hint style. */
.card.selected-card.hint-card{
  outline: 3px solid rgba(120, 255, 160, .95) !important;
  box-shadow: 0 0 0 6px rgba(120, 255, 160, .18), 0 0 26px rgba(120, 255, 160, .28) !important;
}
.pile-slot.drop-ok{
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.pile-slot.drop-hover{
  border-color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.cardtheme-row{
  gap: 10px;
}
.cardtheme{
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cardtheme:active{ transform: scale(.98); }
.cardtheme.is-active{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
}
/* Spider drag stack */
.drag-stack .card{ position:absolute; left:0; top:0; }
.card.dragging{ will-change: transform; }
/* Fix: allow interacting with cards (slots must not block pointer events) */
/* Spider slots input */
/* Spider stock panel */
.pile-slot.stock-slot{
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.25);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
              rgba(0,0,0,.12);
}
#game-table[data-engine="spider"] .pile-slot.stock-slot::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .2px;
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}
@media (max-width: 560px){
  #game-table[data-engine="spider"] .pile-slot.stock-slot::after{ font-size: 11px; bottom: 8px; padding: 3px 9px; }
}
/* Spider premium layer */
.spider-progress{
  position:absolute;
  display:flex;
  gap:6px;
  z-index: 6;
  pointer-events:none;
}
.spider-progress__card{
  width: 18px;
  height: 26px;
  border-radius: 7px;
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding: 3px 0;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: rgba(255,255,255,.70);
}
.spider-progress__card.is-done{
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 10px 22px rgba(0,0,0,.20);
}
.spider-progress__top{ opacity:.95; }
.spider-progress__mid{ opacity:.85; }
/* Targets & hints */
.pile-slot.drop-target{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.18);
  background: rgba(255,255,255,.06);
}
.pile-slot.drop-hover{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 14px 30px rgba(0,0,0,.22);
  background: rgba(255,255,255,.09);
}
.card.hint-from{
  filter: drop-shadow(0 10px 18px rgba(255,255,255,.14)) drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.pile-slot.hint-to{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.30), 0 16px 34px rgba(0,0,0,.28);
}
/* Smooth card moves (drag disables transition inline) */
.card{
  transition: transform 180ms cubic-bezier(.2,.9,.25,1);
}
@media (prefers-reduced-motion: reduce){
  .card{ transition: none !important; }
}
/* Spider settings: radio segmented control */
.modal__seg{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
/* Spider-only pointer-events (do not affect Klondike) */
#game-table[data-engine="spider"] .pile-slot{ pointer-events:none; }
#game-table[data-engine="spider"] .pile-slot.stock-slot{ pointer-events:auto; }
/* Spider Premium progress (8 slots like classic Spider) */
#game-table[data-engine="spider"] .spider-premium-progress{
  position:absolute;
  top: 12px;
  right: 12px;
  display:flex;
  gap:6px;
  z-index: 12;
  pointer-events:none;
}
#game-table[data-engine="spider"] .spider-premium-slot{
  width: 20px;
  height: 28px;
  border-radius: 7px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}
#game-table[data-engine="spider"] .spider-premium-slot .mini{
  width: 100%;
  height: 100%;
  border-radius: 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  font-size: 10px;
  color: rgba(255,255,255,.70);
}
#game-table[data-engine="spider"] .spider-premium-slot.is-done{
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.22);
}
#game-table[data-engine="spider"] .spider-premium-slot.is-done .mini{
  color: rgba(255,255,255,.92);
}
/* Spider Premium chip */
#game-table .spider-premium-chip{
  position:absolute;
  top: 12px;
  right: 12px;
  transform: translateX(-190px);
  z-index: 51;
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 10px 22px rgba(0,0,0,.18);
  cursor:pointer;
}
#game-table .spider-premium-chip:active{
  transform: translateX(-190px) scale(0.96);
}
@media (max-width: 520px){
  #game-table .spider-premium-chip{
    right: 10px;
    transform: translateX(-170px);
    padding: 5px 9px;
    font-size: 11px;
  }
  #game-table .spider-premium-chip:active{
    transform: translateX(-170px) scale(0.96);
  }
}
/* Spider Windows-like premium slots */
#game-table .spider-premium-progress{
  position:absolute;
  top: 12px;
  right: 12px;
  display:flex;
  gap:6px;
  z-index: 50;
  pointer-events:none;
}
#game-table .spider-premium-slot{
  position: relative;
  width: 24px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  overflow: visible;
}
#game-table .spider-premium-slot::before,
#game-table .spider-premium-slot::after{
  content:'';
  position:absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
#game-table .spider-premium-slot::before{ transform: translate(2px,2px); opacity:.65; }
#game-table .spider-premium-slot::after{ transform: translate(4px,4px); opacity:.35; }
#game-table .spider-premium-slot .spider-mini-card{
  position:absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 1px;
  opacity: 0;
}
#game-table .spider-premium-slot.is-done .spider-mini-card{ opacity: 1; }
#game-table .spider-mini-rank{
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#game-table .spider-mini-suit{
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#game-table .spider-premium-slot[data-suit="H"] .spider-mini-suit{ color: rgba(255,120,120,.95); }
#game-table .spider-premium-slot[data-suit="D"] .spider-mini-suit{ color: rgba(255,160,120,.95); }
#game-table .spider-premium-slot[data-suit="C"] .spider-mini-suit{ color: rgba(180,255,180,.90); }
#game-table .spider-premium-slot:not(.is-done){
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
#game-table .spider-premium-slot:not(.is-done)::before,
#game-table .spider-premium-slot:not(.is-done)::after{
  background: rgba(0,0,0,.08);
}
/* Chip aligned near slots */
#game-table .spider-premium-chip{
  position:absolute;
  top: 12px;
  right: 12px;
  transform: translateX(-212px);
  z-index: 51;
  border: 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.16);
  cursor:pointer;
}
#game-table .spider-premium-chip:active{
  transform: translateX(-212px) scale(0.96);
}
@media (max-width: 520px){
  #game-table .spider-premium-progress{ top: 10px; right: 10px; }
  #game-table .spider-premium-chip{
    top: 10px;
    right: 10px;
    transform: translateX(-198px);
    padding: 4px 8px;
    font-size: 10.5px;
  }
  #game-table .spider-premium-chip:active{
    transform: translateX(-198px) scale(0.96);
  }
}
/* Integrated top-right premium HUD (difficulty + progress) */
#game-table .spider-premium-chip{
  right: 12px;
  transform: translateX(-240px);
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.14);
}
#game-table .spider-premium-chip.is-open{
  background: rgba(0,0,0,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 26px rgba(0,0,0,.18);
}
/* Dropdown menu */
#game-table .spider-premium-menu{
  position:absolute;
  top: 48px;
  right: 12px;
  transform: translateX(-240px);
  z-index: 60;
  display:none;
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
#game-table .spider-premium-menu.is-open{ display:block; }
#game-table .spider-premium-menu__item{
  width: 100%;
  border: 0;
  padding: 10px 10px;
  margin: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
#game-table .spider-premium-menu__item + .spider-premium-menu__item{ margin-top: 6px; }
#game-table .spider-premium-menu__item:hover{ background: rgba(255,255,255,.10); }
#game-table .spider-premium-menu__item:active{ transform: scale(0.98); }
/* Empty slot should look like a faint card back (not blank) */
#game-table .spider-premium-slot .spider-mini-card{
  opacity: .18 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
}
#game-table .spider-premium-slot .spider-mini-rank,
#game-table .spider-premium-slot .spider-mini-suit{ opacity: 0 !important; }
#game-table .spider-premium-slot.is-done .spider-mini-card{ opacity: 1 !important; }
#game-table .spider-premium-slot.is-done .spider-mini-rank,
#game-table .spider-premium-slot.is-done .spider-mini-suit{ opacity: 1 !important; }
@media (max-width: 520px){
  #game-table .spider-premium-chip{ right: 10px; transform: translateX(-220px); }
  #game-table .spider-premium-menu{ right: 10px; transform: translateX(-220px); min-width: 170px; }
}
/* === Spider Premium HUD (Windows-like) === */
#game-table .spider-premium-hud{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 55;
  display:flex;
  align-items:center;
  gap: 10px;
}
#game-table .spider-premium-chip{
  border:0;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.14);
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
}
#game-table .spider-premium-chip.is-open{
  background: rgba(0,0,0,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 26px rgba(0,0,0,.18);
}
#game-table .spider-premium-progress{
  display:flex;
  gap:6px;
  pointer-events:none;
}
#game-table .spider-premium-slot{
  position: relative;
  width: 24px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  overflow: visible;
}
#game-table .spider-premium-slot::before,
#game-table .spider-premium-slot::after{
  content:'';
  position:absolute;
  inset: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
#game-table .spider-premium-slot::before{ transform: translate(2px,2px); opacity:.65; }
#game-table .spider-premium-slot::after{ transform: translate(4px,4px); opacity:.35; }
#game-table .spider-mini-card{
  position:absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 18px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 1px;
  opacity: .18;
}
#game-table .spider-mini-rank,
#game-table .spider-mini-suit{ opacity: 0; }
#game-table .spider-premium-slot.is-done .spider-mini-card{ opacity: 1; }
#game-table .spider-premium-slot.is-done .spider-mini-rank,
#game-table .spider-premium-slot.is-done .spider-mini-suit{ opacity: 1; }
#game-table .spider-mini-rank{
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#game-table .spider-mini-suit{
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#game-table .spider-premium-slot[data-suit="H"] .spider-mini-suit{ color: rgba(255,120,120,.95); }
#game-table .spider-premium-slot[data-suit="D"] .spider-mini-suit{ color: rgba(255,160,120,.95); }
#game-table .spider-premium-slot[data-suit="C"] .spider-mini-suit{ color: rgba(180,255,180,.90); }
#game-table .spider-premium-menu{
  position:absolute;
  z-index: 80;
  display:none;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
#game-table .spider-premium-menu.is-open{ display:block; }
#game-table .spider-premium-menu__item{
  width: 100%;
  border: 0;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
#game-table .spider-premium-menu__item + .spider-premium-menu__item{ margin-top: 6px; }
#game-table .spider-premium-menu__item:hover{ background: rgba(255,255,255,.10); }
#game-table .spider-premium-menu__item:active{ transform: scale(0.98); }
@media (max-width: 520px){
  #game-table .spider-premium-hud{ top: 10px; right: 10px; gap: 8px; }
  #game-table .spider-premium-chip{ padding: 5px 9px; font-size: 10.5px; }
  #game-table .spider-premium-menu{ min-width: 175px; }
}
/* SPIDER_PREMIUM_HUD_V2 */
#game-table .spider-premium-progress{
  position:absolute;
  top: 12px;
  right: 12px;
  display:flex;
  gap:6px;
  z-index: 60;
  pointer-events:none;
}
#game-table .spider-premium-slot{
  width: 24px;
  height: 34px;
  border-radius: 8px;
  position: relative;
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  overflow: visible;
}
#game-table .spider-premium-slot::before,
#game-table .spider-premium-slot::after{
  content:'';
  position:absolute;
  inset: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
#game-table .spider-premium-slot::before{ transform: translate(2px,2px); opacity:.55; }
#game-table .spider-premium-slot::after{ transform: translate(4px,4px); opacity:.32; }
#game-table .spider-premium-slot .spider-mini-card{
  position:absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 10px 18px rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 1px;
  opacity: .22;
}
#game-table .spider-premium-slot .spider-mini-rank,
#game-table .spider-premium-slot .spider-mini-suit{ opacity: 0; }
#game-table .spider-premium-slot.is-done .spider-mini-card{ opacity: 1; }
#game-table .spider-premium-slot.is-done .spider-mini-rank,
#game-table .spider-premium-slot.is-done .spider-mini-suit{ opacity: 1; }
#game-table .spider-mini-rank{
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#game-table .spider-mini-suit{
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#game-table .spider-premium-chip{
  position:absolute;
  top: 12px;
  right: 12px;
  margin-right: 210px;
  z-index: 61;
  border: 0;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 26px rgba(0,0,0,.14);
  cursor:pointer;
  user-select:none;
  touch-action: manipulation;
}
#game-table .spider-premium-chip.is-open{ background: rgba(0,0,0,.26); }
#game-table .spider-premium-chip.flash{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 3px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.18); }
#game-table .spider-premium-menu{
  position:absolute;
  top: 52px;
  right: 12px;
  margin-right: 210px;
  z-index: 80;
  display:none;
  min-width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(0,0,0,.30);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
  pointer-events:auto;
}
#game-table .spider-premium-menu.is-open{ display:block; }
#game-table .spider-premium-menu__item{
  width:100%;
  border:0;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  text-align:left;
  cursor:pointer;
}
#game-table .spider-premium-menu__item + .spider-premium-menu__item{ margin-top: 6px; }
#game-table .spider-premium-menu__item:hover{ background: rgba(255,255,255,.10); }
#game-table .spider-premium-menu__item:active{ transform: scale(0.98); }
@media (max-width: 520px){
  #game-table .spider-premium-progress{ top:10px; right:10px; }
  #game-table .spider-premium-chip{ top:10px; right:10px; margin-right: 198px; }
  #game-table .spider-premium-menu{ right:10px; margin-right: 198px; min-width: 180px; }
}
/* Spider hint colors: source=green, destination=yellow */
#game-table .card.hint-src{ box-shadow: 0 0 0 3px rgba(0,255,120,.85), 0 0 18px rgba(0,255,120,.55); border-radius: 10px; }
#game-table .pile-slot.hint-dst{ box-shadow: inset 0 0 0 3px rgba(255,220,0,.9), 0 0 18px rgba(255,220,0,.35); border-radius: 14px; }
#game-table .card.hint-dst{ box-shadow: 0 0 0 3px rgba(255,220,0,.9), 0 0 18px rgba(255,220,0,.35); border-radius: 10px; }
@media (max-width: 720px){
  #game-table .card.hint-src{ box-shadow: 0 0 0 3px rgba(0,255,120,.95), 0 0 22px rgba(0,255,120,.65); }
  #game-table .pile-slot.hint-dst, #game-table .card.hint-dst{ box-shadow: inset 0 0 0 3px rgba(255,220,0,1), 0 0 22px rgba(255,220,0,.55); }
}
/* Spider: hide premium overlay UI (difficulty chip / progress squares) */
#game-table[data-engine="spider"] .spider-premium-chip,
#game-table[data-engine="spider"] .spider-premium-progress,
#game-table[data-engine="spider"] .spider-premium-menu{
  display: none !important;
}
#game-table[data-engine="spider"] .pile-slot.stock-slot::after{
  display:none !important;
  content:'' !important;
}
/* Spider settings: deck back swatches */
.deck-swatches{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:10px;
}
/* Hide technical stock label ("Добор") if present */
.pile-slot.stock::after, .pile-slot.stock span{ display:none !important; }
/* ===== Spider: FX layer & win overlay ===== */
#game-table .spider-fx-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 9999;
}
#game-table .spider-fx-layer .spider-complete-clone{
  position:absolute;
  will-change: transform, opacity;
  transition: transform 240ms ease-out, opacity 240ms ease-out;
  transform-origin: 50% 50%;
  pointer-events:none;
}
/* Win overlay (minimal) */
.spider-win-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: 16px;
}
.spider-win-overlay.is-open{ display:flex; }
.spider-win-card{
  width: min(420px, 100%);
  background: rgba(20,26,34,0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  padding: 18px 16px 16px;
  color: #fff;
}
.spider-win-title{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
}
.spider-win-stats{
  display:flex;
  gap: 12px;
  margin: 10px 0 14px;
}
.spider-win-stats > div{
  flex:1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 10px;
}
.spider-win-stats span{
  display:block;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 4px;
}
.spider-win-stats b{
  font-size: 18px;
}
.spider-win-actions{
  display:flex;
  gap: 10px;
}
.spider-win-btn{
  flex:1;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.spider-win-btn.primary{
  background: rgba(76, 175, 80, 0.92);
  border-color: rgba(76, 175, 80, 0.8);
}
@media (max-width: 520px){
  .spider-win-overlay{ padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}


/* Desktop – allow tableau to grow vertically (avoid long piles being cut off) */
@media (min-width: 900px){
  #game-table{
    height: auto !important;
    min-height: calc(
      var(--vh)
      - var(--header-h)
      - var(--bar-h)
      - var(--ad-top)
      - var(--ad-bottom)
    ) !important;
    overflow: visible !important;
  }
}


/* MVP engine helpers */
.pile-hit{position:absolute; border-radius:14px; background:rgba(255,255,255,0.04); outline:1px dashed rgba(255,255,255,0.10);}
.pile-hit:hover{background:rgba(255,255,255,0.06);}
.card.is-selected{outline:3px solid rgba(255,255,255,0.75); outline-offset:-3px;}