/* ============================================================
   ПАСЬЯНС ПАУК — стили. Та же цветовая база, что и на остальном сайте
   (фиолетовый градиент UI-кита), карты рисуются чистым CSS/HTML, без
   картинок — быстрее грузится и легко перекрашивать.
============================================================ */
/* Страница пасьянса — отдельная, не подключает общий css/menu.css (там
   обычно и лежит сброс отступов) — без этого браузерный дефолт
   body{margin:8px} оставлял по краям экрана белые полосы фона страницы
   вокруг .spider-screen. */
html,body{margin:0;padding:0}
.spider-screen{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#f5e6f0 0%,#e8d5f0 40%,#d5e8f5 100%);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}

/* ---- Экран выбора сложности ---- */
.spider-difficulty-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:24px;gap:20px;text-align:center}
.spider-difficulty-screen h1{font-size:26px;color:#3a2a4a;margin:0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.spider-beta-tag{font-size:11px;font-weight:800;letter-spacing:0.5px;color:#fff;background:linear-gradient(135deg,#c0a0e0,#9060c8);padding:4px 10px;border-radius:100px;box-shadow:0 2px 8px rgba(144,96,200,0.4);vertical-align:middle}
.spider-difficulty-screen p{color:#6a5a80;font-size:14px;max-width:420px;margin:0}
.spider-diff-options{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.spider-diff-btn{width:150px;padding:20px 16px;border-radius:18px;border:1px solid rgba(255,255,255,0.9);background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
.spider-diff-btn:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(144,96,200,0.2)}
.spider-diff-btn .diff-suits{font-size:26px;letter-spacing:4px;color:#9060c8;margin-bottom:8px}
.spider-diff-btn .diff-label{font-size:14px;font-weight:800;color:#3a2a4a}
.spider-diff-btn .diff-sub{font-size:11px;color:#8878a0;margin-top:4px}
.spider-back-link{position:absolute;top:20px;left:24px;color:#7060a0;font-size:13px;font-weight:700;text-decoration:none}
.spider-resume-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,rgba(245,208,32,0.22),rgba(224,160,32,0.16));border:1.5px solid rgba(224,160,32,0.45);border-radius:16px;padding:14px 20px;max-width:420px;width:100%;box-sizing:border-box}
.spider-resume-text{display:flex;flex-direction:column;gap:2px;text-align:left;flex:1}
.spider-resume-text b{font-size:13px;color:#5a4a10}
.spider-resume-text span{font-size:12px;color:#8a6410}
.spider-resume-btn{flex-shrink:0;padding:10px 18px;border-radius:12px;border:none;background:linear-gradient(135deg,#f5d020,#e0a020);color:#5a4a10;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(224,160,32,0.35)}
.spider-resume-btn:hover{filter:brightness(1.05)}

/* ---- Игровой экран ---- */
.spider-game-screen{display:none;flex-direction:column;flex:1;min-height:100vh;min-height:100dvh}
.spider-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:rgba(255,255,255,0.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.7)}
.spider-topbar-left{display:flex;align-items:center;gap:14px}
.spider-back-btn{background:none;border:none;color:#7060a0;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.spider-title{font-size:15px;font-weight:800;color:#3a2a4a}
.spider-topbar-stats{display:flex;align-items:center;gap:16px;font-size:12.5px;color:#5a4a6a}
.spider-topbar-stats b{color:#3a2a4a}
.spider-undo-btn{height:32px;padding:0 14px;border-radius:100px;border:none;background:rgba(144,96,200,0.14);color:#7050a0;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit}
.spider-undo-btn:hover:not(:disabled){background:rgba(144,96,200,0.24)}
.spider-undo-btn:disabled{opacity:.4;cursor:default}
.spider-hint-btn{height:32px;padding:0 14px;border-radius:100px;border:none;background:linear-gradient(135deg,#f5c842,#e0a020);color:#4a3410;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s}
.spider-hint-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(224,160,32,0.4)}
.spider-restart-btn{height:32px;padding:0 14px;border-radius:100px;border:1.5px solid rgba(200,96,96,0.35);background:rgba(224,96,96,0.1);color:#c05050;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;transition:background .15s}
.spider-restart-btn:hover{background:rgba(224,96,96,0.2)}

/* ---- Паучок-подсказка: спускается на паутине за картой, уносит её за
   верхний край экрана и сам кладёт куда нужно (см. animateHintCarry в
   spider.js). Пачка карт (.spider-hint-carried-stack) — ДОЧЕРНИЙ элемент
   самого паучка, а не отдельно летящий рядом объект: раньше у них было
   по своему transition, и даже при одинаковой длительности карта иногда
   визуально "убегала" вперёд или будто пропадала. Теперь двигается
   только сам паучок, а пачка карт жёстко висит под ним фиксированным
   отступом — физически не может ни обогнать его, ни потеряться. ---- */
.spider-hint-spider{position:fixed;z-index:9999;pointer-events:none;transition:top .9s ease,left .55s ease}
.spider-hint-emoji{position:relative;z-index:2;display:block;font-size:30px;line-height:1;animation:spiderLegWiggle .22s ease-in-out infinite alternate;filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35))}
@keyframes spiderLegWiggle{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* Нить паутины — тонкая линия ровно от верха экрана до паучка, высота
   гоняется той же transition-длительностью, что и top у самого паучка,
   поэтому нить визуально "тянется"/"сматывается" вместе с ним. */
.spider-hint-thread{position:fixed;top:0;width:2px;z-index:9998;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0.1),rgba(255,255,255,0.75));transition:height .9s ease}

/* Пачка карт, которую паучок физически несёт — висит прямо под ним
   (position:absolute относительно .spider-hint-spider, который сам
   position:fixed), поэтому двигается вместе с паучком БЕЗ отдельного
   transition. Сами настоящие карты в столбце на это время полностью
   прячутся (см. .hint-carried-hidden) — единственное, за что можно
   ухватиться, чтобы поймать карты на лету, это САМА эта пачка (см. её
   pointerdown в animateHintCarry). Если несёт не одну карту, а целую
   цепочку — внутри лежит несколько .spider-card, сдвинутых друг под
   другом. */
/* font-family ОБЯЗАТЕЛЕН тут явно, ровно по той же причине что и у
   .spider-drag-ghost/.spider-deal-flight ниже: паучок с пачкой карт
   добавляется прямо в <body>, а не внутрь .spider-screen — без этой
   строки унесённая карта на лету меняла и шрифт, и вид (мастевые символы
   рисовались другим шрифтом браузера по умолчанию, выглядело дёшево и
   заметно отличалось от той же карты в столбце). */
.spider-hint-carried-stack{position:absolute;top:26px;left:50%;z-index:1;pointer-events:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,0.4));cursor:grab;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}

/* Настоящая карта, которую сейчас несёт паучок, — на это время просто
   убрана из виду (никакой полупрозрачной "тени" на её месте); вернётся,
   если игрок поймает летящую пачку, или когда паучок сам её доставит. */
.hint-carried-hidden{visibility:hidden}
/* Момент хвата — быстрый "щипок", прежде чем карта скроется и в воздух
   поднимется её клон. */
.hint-grabbed{animation:spiderGrabPinch .22s ease}
@keyframes spiderGrabPinch{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.88) rotate(-3deg)}
}

/* Паучок, вцепившийся в карту вместе с игроком, если тот перехватил её
   руками посреди переноски (см. onSpiderPointerDown/moveSpiderGhost) —
   чуть более резкое, "встревоженное" покачивание, чем при обычном полёте. */
.spider-hint-clinging{animation:spiderClingShake .16s ease-in-out infinite alternate}
@keyframes spiderClingShake{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}

/* Реплика паучка — простое облачко со "хвостиком", как у комикса,
   всплывает рядом с самим паучком и никак не мешает кликам под собой. */
.spider-hint-bubble{position:fixed;z-index:10000;pointer-events:none;background:#fff;color:#3a2a4a;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;font-size:12px;font-weight:700;padding:7px 12px;border-radius:12px;max-width:180px;box-shadow:0 6px 18px rgba(0,0,0,0.3);animation:spiderBubblePop .18s ease}
.spider-hint-bubble::after{content:'';position:absolute;left:18px;bottom:-6px;border-width:6px 6px 0;border-style:solid;border-color:#fff transparent transparent}
@keyframes spiderBubblePop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.spider-board-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:18px 12px 40px;gap:16px;overflow-x:auto}
.spider-top-row{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:900px;gap:16px}
.spider-stock{width:70px;height:96px;position:relative;cursor:pointer}
.spider-stock-pile{position:relative;width:100%;height:100%}
.spider-stock-empty{width:70px;height:96px;border:2px dashed rgba(144,96,200,0.3);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#a090b0;font-size:11px}
.spider-foundations{display:flex;gap:6px}
.spider-foundation-slot{width:34px;height:46px;border-radius:6px;border:1.5px solid rgba(144,96,200,0.25);background:rgba(255,255,255,0.4);display:flex;align-items:center;justify-content:center;font-size:16px}
.spider-foundation-slot.filled{background:linear-gradient(135deg,#f5c842,#e0a020);border-color:#e0a020}

.spider-tableau{display:grid;grid-template-columns:repeat(10,minmax(56px,1fr));gap:8px;width:100%;max-width:900px}
.spider-pile{position:relative;min-height:140px;background:rgba(255,255,255,0.18);border-radius:8px;border:1px solid rgba(144,96,200,0.12);overflow:visible}
/* Базовый вид — для карт, ЗА которыми лежит ещё одна карта (т.е. видна
   только узкая полоска сверху): маленький "индекс" в левом верхнем углу,
   ранг и масть РЯДОМ по горизонтали (не одно над другим), чтобы обе части
   целиком помещались в эту полоску. Последняя карта столбца (.front —
   она видна целиком) переопределяется ниже отдельным правилом на
   привычный крупный вид по центру. */
.spider-card{position:absolute;left:0;width:100%;aspect-ratio:5/7;border-radius:6px;background:#fff;box-shadow:0 2px 6px rgba(60,30,70,0.25);font-weight:800;cursor:pointer;user-select:none;border:1px solid rgba(0,0,0,0.06);transition:transform .18s ease,box-shadow .18s ease}
/* Как у настоящих игральных карт: индекс (ранг+масть) — в ДВУХ
   противоположных углах, верхнем левом и нижнем правом (второй развёрнут
   на 180°, чтобы читался правильно, если карту перевернуть). Оба через
   position:absolute (не flex-выравнивание всей карты) — гарантированно
   именно в углу, пиксель в пиксель, независимо от высоты карты. Верхний —
   это и есть та полоска, которая всегда видна, даже когда карта полностью
   сложена под другими; нижний в этом случае просто скрыт под следующей
   картой стопки, ровно как у настоящих карт в веере. Ранг и масть внутри
   каждого — рядом по горизонтали (align-items:baseline, не center — иначе
   цифра и значок масти визуально "прыгают" из-за разной высоты символов). */
.spider-card-index,.spider-card-index-bottom{position:absolute;display:flex;flex-direction:row;align-items:baseline;gap:2px}
.spider-card-index{top:2px;left:4px}
/* Без rotate(180deg): на настоящих картах низ перевёрнут, потому что
   карту физически берут в руки и смотрят с любой стороны — здесь карта
   всегда лежит одной стороной вверх, крутить её никто не будет, а
   перевёрнутый текст на таких маленьких картах читается просто как
   "сломанный", а не как красивая деталь дизайна. */
.spider-card-index-bottom{bottom:2px;right:4px}
/* Последняя (самая "передняя") карта столбца — видна целиком, поэтому
   виден и нижний угол тоже (у заваленных карт он скрыт под следующей
   картой). Шрифт индекса ОДИНАКОВЫЙ у всех карт (см. .spider-card-rank/
   .spider-card-suit ниже) — раньше карта, которую накрыли другой,
   визуально "уменьшалась" (текст мельчал), теперь вместо этого просто
   больше расстояние между картами в столбце (CARD_STACK_STEP_PX в
   spider.js), а шрифт остаётся тем же, что и на полностью открытой карте. */
.spider-card.back{background:linear-gradient(135deg,#9060c8,#6a3a9a)}
.spider-card.back::after{content:'';position:absolute;inset:4px;border:1px solid rgba(255,255,255,0.25);border-radius:4px}
.spider-card.back.stacked{position:absolute;top:0}
/* Недопустимое действие (взять карту, которая не образует цепочку;
   положить не туда) — лёгкая тряска + красный градиент по краям вместо
   молчаливого игнорирования клика (см. flashSpiderInvalid в spider.js).
   Градиент через ::before (не сам background карты) — так под ним всё
   ещё виден настоящий цвет/индекс карты, а не сплошная красная заливка. */
.spider-card.invalid-shake{animation:spiderInvalidShake .4s ease}
.spider-card.invalid-shake::before{
  content:'';position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background:radial-gradient(circle,transparent 50%,rgba(224,60,90,0.65) 100%);
  box-shadow:inset 0 0 0 2px rgba(224,60,90,0.85);
}
@keyframes spiderInvalidShake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}
.spider-card.red{color:#c8305a}
.spider-card.black{color:#2a2035}
.spider-card.selected{box-shadow:0 0 0 2.5px #f5c842,0 4px 12px rgba(0,0,0,0.3);z-index:5}
.spider-card-rank{font-size:12px;line-height:1}
.spider-card-suit{font-size:14px;line-height:1}
.spider-card:not(.back){touch-action:none} /* иначе тач-скролл страницы перехватывал бы перетаскивание карты на телефоне */

/* Карта(ы), которые сейчас тащат — оригинал в столбце гасим (не удаляем
   из DOM совсем, чтобы позиции/индексы других карт не съезжали), вместо
   неё за курсором летает .spider-drag-ghost. */
.spider-card.dragging-source{opacity:.25}

/* font-family ОБЯЗАТЕЛЕН тут явно: .spider-drag-ghost добавляется прямо в
   <body> (см. startSpiderDrag в spider.js), а не внутрь .spider-screen —
   поэтому шрифт из .spider-screen{font-family:...} сюда не наследуется,
   и без этой строки карта в руке во время перетаскивания шрифтом
   отличалась от остальных карт на столе. */
.spider-drag-ghost{position:fixed;z-index:900;pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.4));transform:scale(1.04);border-radius:6px;transition:box-shadow .1s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
/* Подсветка ПРЯМО НА карте, которую тащишь (не на фоне столбца-цели под
   ней — тот вариант было плохо видно, если в целевом столбце уже много
   карт друг на друге). Зелёное свечение — сюда можно положить, красное —
   нельзя; обновляется в реальном времени, ещё до того как отпустил. */
.spider-drag-ghost.drag-ok{box-shadow:0 0 0 3px #6abf7a,0 0 18px 4px rgba(106,191,122,0.7)}
.spider-drag-ghost.drag-bad{box-shadow:0 0 0 3px #e0607a,0 0 18px 4px rgba(224,96,122,0.7)}

/* Карта, "летящая" из колоды добора в свой столбец (см. animateDealCard
   в spider.js) — position:fixed поверх всего, left/top меняются JS-ом
   сразу после появления в DOM, а плавность даёт этот transition. */
/* Та же причина, что и у .spider-drag-ghost выше — эта карта тоже
   добавляется прямо в <body>, минуя .spider-screen, и без явного
   font-family использовала бы шрифт браузера по умолчанию. */
.spider-deal-flight{position:fixed;z-index:850;pointer-events:none;transition:left .26s cubic-bezier(.2,.7,.3,1),top .26s cubic-bezier(.2,.7,.3,1);box-shadow:0 6px 16px rgba(0,0,0,0.35);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}

.spider-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#2a1f3d;color:#fff;padding:10px 20px;border-radius:100px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:500;box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.spider-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* font-family ОБЯЗАТЕЛЕН тут явно — .spider-win-modal лежит ПОСЛЕ
   закрывающего </div> у .spider-screen (не внутри неё), поэтому шрифт,
   заданный там, сюда не наследуется и подставлялся шрифт браузера по
   умолчанию, из-за чего и текст модалки победы, и цифры награды выглядели
   чужеродно на общем фоне сайта. */
.spider-win-modal{position:fixed;inset:0;background:rgba(20,10,30,0.6);display:none;align-items:center;justify-content:center;z-index:600;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
/* Канвас конфетти — рисуется ПЕРВЫМ ребёнком модалки (см. launchSpiderConfetti
   в spider.js), поэтому в порядке отрисовки ложится позади самой белой
   карточки — салют летит вокруг неё, не перекрывая текст и кнопку. */
#spiderConfettiCanvas{position:absolute;inset:0;pointer-events:none}
.spider-win-card{position:relative;z-index:1;background:#fff;border-radius:20px;padding:36px 40px;text-align:center;max-width:340px}
.spider-win-card h2{margin:0 0 10px;font-size:22px;color:#3a2a4a}
.spider-win-card p{margin:0 0 20px;color:#6a5a80;font-size:14px}
/* Награда за победу (очки рейтинга + монеты) — показывается только
   авторизованным игрокам, после того как сервер подтвердит начисление
   (см. reportSpiderWinToServer в spider.js). До ответа сервера/у гостей
   этот блок просто остаётся display:none, поставленный в разметке. */
.spider-win-reward{margin:0 0 20px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(245,200,66,0.18),rgba(224,160,32,0.14));border:1.5px solid rgba(224,160,32,0.35);color:#8a6410;font-weight:700;font-size:14px}
.spider-win-card button{width:100%;padding:12px;border-radius:12px;border:none;background:linear-gradient(135deg,#c0a0e0,#9060c8);color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.spider-exit-confirm-actions{display:flex;flex-direction:column;gap:10px}
.spider-exit-confirm-no{background:rgba(144,96,200,0.1) !important;color:#7060a0 !important;border:1.5px solid rgba(160,110,200,0.35) !important}

/* ---- Мобильная версия — исходный вид: один ряд из 10 столбцов, все
   помещаются на экран целиком, БЕЗ горизонтальной прокрутки (пробовали и
   свайп-карусель, и два ряда по 5 — оба варианта признаны неудачными).
   Единственный способ уместить 10 столбцов на экране ~360-430px шириной —
   уменьшить сам минимальный размер колонки: на десктопе minmax(56px,1fr)
   у .spider-tableau, здесь переопределяем на гораздо более узкий минимум,
   и соответственно уменьшаем шрифт индекса и всё остальное в топбаре,
   чтобы не вылезало за пределы такой узкой колонки. ---- */
@media (max-width:880px){
  .spider-tableau{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
  .spider-card-rank{font-size:9px}
  .spider-card-suit{font-size:10px}
  .spider-card-index,.spider-card-index-bottom{gap:1px}
  .spider-card-index{top:1px;left:2px}
  .spider-card-index-bottom{bottom:1px;right:2px}
  .spider-pile{min-height:90px}
  .spider-topbar{padding:10px 12px;flex-wrap:wrap;row-gap:8px}
  .spider-title{font-size:13px}
  .spider-topbar-stats{gap:10px;font-size:11px}
  .spider-hint-btn,.spider-undo-btn,.spider-restart-btn{height:30px;padding:0 11px;font-size:11.5px}
  .spider-board-area{padding:12px 6px 30px;overflow-x:hidden}
  .spider-stock{width:40px;height:56px}
  .spider-stock-empty{width:40px;height:56px;font-size:9px}
  .spider-foundations{gap:3px}
  .spider-foundation-slot{width:20px;height:28px;font-size:11px}
}