/* =============================================================================
   solitairecardgames.org — оформление поверх общего site.css (THEME_CSS).
   Вариант C: Как kartenspiele-kostenlos.de (медный). Основа — theme-kk.css kartenspiele-kostenlos.de
   (раскладка, плитки «Plakat», значки); здесь свои цвета. 01.10.2026.
   ========================================================================== */

@font-face{font-family:Archivo;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}

/* ------------------------------------------------ тёмная тема */
:root{
  --ff-dis:Archivo,"Segoe UI",-apple-system,sans-serif;
  --suit:#d42a3c;

  --chrome:#121b14; --chrome-2:#1a261c; --chrome-line:#2b3b2d;
  --page:#0e1510;   --panel:#162018;    --panel-2:#1c281e;
  --line:#253427;   --line-soft:#1d2a1f;
  --txt:#eef3ec;    --txt-2:#b2c0b0;    --txt-3:#8c9a8a;
  --accent:#f28c4b; --accent-ink:#1d0d02; --accent-soft:rgba(242,140,75,.16);
  --hot:#e2574c;
  --sb-track:#1a2b21; --sb-thumb:#3d7a4b; --sb-hover:#4f9c61;
}
/* ------------------------------------------------ светлая тема (по умолчанию: DEFAULT_LOOK mode light) */
html[data-mode="light"]{
  --chrome:#16301f; --chrome-2:#1d3a27; --chrome-line:#2c4d36;
  --page:#ffffff;   --panel:#ffffff;    --panel-2:#f5f8f4;
  --line:#dbe3d8;   --line-soft:#e8eee6;
  --txt:#15201a;    --txt-2:#4b5a50;    --txt-3:#6a786e;
  --accent:#b4541a; --accent-ink:#ffffff; --accent-soft:rgba(180,84,26,.12);
  --hot:#c0392b;
}
/* обвязка (шапка, панель, подвал) тёмная в обеих темах — акцент на ней светлый */
html[data-mode="light"] .bar,html[data-mode="light"] .dock,html[data-mode="light"] footer,
html[data-mode="light"] .drop,html[data-mode="light"] .fs-toast{--accent:#f28c4b;--accent-ink:#1d0d02}

/* ------------------------------------------------------------------ логотип */
.logo svg{width:32px;height:32px}
.logo b{font:800 21px/1 var(--ff-dis);letter-spacing:-.015em}
@media (max-width:900px){.logo b{font-size:17.5px}}
@media (max-width:560px){.logo svg{width:27px;height:27px}.logo b{font-size:15.5px}}
@media (max-width:360px){.logo b i{display:none}}   /* самый узкий телефон: «Kartenspiele» */

/* --------------------------------------------------------------- заголовки
   Archivo шире Fraunces и без засечек: чуть меньше трекинг, 800 вместо 900 */
.prose h1,.h h1,.h h2,.today h2{font-weight:800;letter-spacing:-.02em}
.prose h2,.prose h3,.dlg-h h2{letter-spacing:-.012em}
.fs-pause-box b,.fs-win-box>b{font-weight:800;letter-spacing:-.02em}

/* ------------------------------------------------ панель внизу у флеша и рамки
   На телефоне панель встаёт в два ряда: верхний — кнопки движка и часы.
   У флеша и рамки их нет, и верхний ряд оставался пустой полосой — отдаём
   эти 44 px игре. (То же есть на EN/DE — записано для окна EN.) */
@media (max-width:700px), (max-width:900px) and (min-height:700px){
  /* своя игра сайта (Durak, src 'own') — два ряда, как у пасьянсов: сверху «Neues Spiel» */
  body.page-game:not(.has-engine):not([data-src="own"]){--bottom:calc(60px + env(safe-area-inset-bottom, 0px))}
  body.page-game:not(.has-engine):not([data-src="own"]) .dock-break{display:none}
}

/* ------------------------------------------------ сукно у рамки и флеша
   Движок рисует у рамок (iframe) и флеша своё сукно bg/bg5.webp («Green baize»),
   а у пасьянсов — родное сукно движка. Здесь у всех страниц игр одно, родное
   (владелец 24.09, 16:07: «на покере другой фон, не дефолтный»). Выбранный
   в «Aussehen» стол site.js ставит поверх (стилем элемента) — он по-прежнему главнее. */
body.page-game:not(.has-engine) .table{background:#1c5c37 url(bg/native.png) repeat}
@media (min-width:1280px){
  body.lay-side:not(.has-engine){background:#1c5c37 url(bg/native.png) repeat fixed}
}

/* ------------------------------------------------ кнопки движка: крупнее
   Neustart, Zurück, Tipp, Anpassen — значки движка: 16 px на тёмном кружке, знак
   внутри ещё вдвое меньше (владелец 24.09, 19:22: «сильно мелкие»). Кружок убираем,
   значок крупнее, знак светлый — как наши значки рядом (пауза, «?»).
   Знак занимает меньше половины своего квадрата, поэтому квадрат большой, а поля
   у кнопки маленькие. */
.dock-eng svg._89_{width:32px !important;height:32px !important;background:none !important;
  box-shadow:none !important;border-radius:0 !important}
.dock-eng svg._89_ path{fill:#e3ece2}
.dock-eng ._87_:hover svg._89_ path{fill:#fff}
@media (min-width:1280px){
  body.side-nav .dock-eng svg._89_{width:36px !important;height:36px !important}
  body.side-nav .dock-eng ._87_:nth-child(n+3){padding:1px 2px !important}
}
@media (min-width:1280px) and (max-width:1499px){
  body.side-nav .dock-eng ._87_:nth-child(2){padding:1px 2px !important}   /* «Neustart» здесь значком */
}

/* ------------------------------------------------ плитки игр: «Plakat»
   Каталог на главной, разделы, 404 (владелец 24.09, 22:03: вариант C из четырёх —
   чтобы плитки не были похожи на solitaire-kostenlos.com). Плитка — кусок сукна:
   превью сверху уходит в тёмную растяжку, под ним крупное название заглавными и
   оценка; текста нет (он есть на странице игры). Медная полоса снизу растёт при
   наведении. Страница вокруг — белая (светлая тема по умолчанию, DEFAULT_LOOK). */
.grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{border:0;border-radius:10px;aspect-ratio:4/3.4;
  background:linear-gradient(180deg,#1c5c37 0%,#123d25 55%,#0b2415 100%);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.06)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);
  transform:scaleX(.18);transform-origin:left;transition:transform .25s ease;z-index:3}
.card:hover{transform:translateY(-3px);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card .thumb{position:absolute;left:0;right:0;top:0;height:66%;aspect-ratio:auto}
.card .thumb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:2;
  background:linear-gradient(180deg,rgba(18,61,37,0),#133f26 92%)}
.card-b{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 14px 15px;gap:5px;pointer-events:none}
.card-b h3{font:900 19px/1.08 var(--ff-dis);letter-spacing:.01em;text-transform:uppercase;pointer-events:auto}
.card-b h3 a{color:#fff}
.card-b p{display:none}
.card .stars{color:#c9d4c6}
.card .stars svg.off{fill:rgba(255,255,255,.25)}
.card .badge{top:8px;bottom:auto;left:8px}
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .card-b{padding:8px 10px 12px}
  .card-b h3{font-size:14px}
}
html[data-mode="light"] .card{box-shadow:0 12px 24px -15px rgba(10,40,20,.6),inset 0 0 0 1px rgba(255,255,255,.06)}
/* рубашка в живых превью — узор и цвет из «Aussehen» (site.js ставит --mback) */
.mc.b{background:var(--mback,var(--deck) 0 100%/1300% 500% no-repeat)}

/* ------------------------------------------------ пустые места на столе: «Doppelrahmen»
   Владелец 01.10 (вариант C из трёх; на solitairemania.com — тёмная плашка и «A»).
   Плашку рисует site.js по SLOT_PLATE из config.php: почти прозрачная, двойная тонкая
   светлая рамка. Здесь — буква на пустом доме (SLOT_ACE): «A» шрифтом заголовков сайта
   (Archivo) и под ней четыре масти, всё белое и бледное. Размеры — в единицах стола:
   движок масштабирует стол целиком. */
._85_.fs-found > ._90_[data-rank]::after,._85_.fs-found > ._90_[data-rank="A"]::after{content:attr(data-rank);
  font:800 30px/1 Archivo,"Segoe UI",sans-serif;color:#fff;opacity:.26;padding-bottom:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22'%3E%3Cg fill='%23fff'%3E%3Cpath d='M11 1C4 7 1 10.5 1 13.5 1 16 3 18 5.5 18 7.5 18 9 17 10 15.5L9 21h4l-1-5.5c1 1.5 2.5 2.5 4.5 2.5 2.5 0 4.5-2 4.5-4.5 0-3-3-6.5-10-12.5z'/%3E%3Cpath transform='translate(26 0)' d='M11 20C4 14 1 10 1 6.5 1 3.5 3.5 1.5 6 1.5c2 0 4 1.3 5 3.3 1-2 3-3.3 5-3.3 2.5 0 5 2 5 5 0 3.5-3 7.5-10 13.5z'/%3E%3Cg transform='translate(52 0)'%3E%3Ccircle cx='11' cy='6' r='4.6'/%3E%3Ccircle cx='5.6' cy='12.6' r='4.6'/%3E%3Ccircle cx='16.4' cy='12.6' r='4.6'/%3E%3Cpath d='M10 12l-1 9h4l-1-9z'/%3E%3C/g%3E%3Cpath transform='translate(78 0)' d='M11 1l9 10-9 10-9-10z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 76%/54% auto}

/* ------------------------------------------------ значки сайта — как значки движка
   Пауза, звезда «в избранное», «?», облик и полный экран в панели, низ колонки
   (Aussehen / тема / Vollbild) были 17 px — рядом со значками движка (Zurück, Tipp,
   Anpassen) смотрелись мелко (владелец 01.10). Как на solitaireclassic.net (26.09):
   кнопки 40 px, знак ≈17–20 px — и у наших значков, и у значков движка (его квадрат
   28 → 32 px, правило выше); в строке над столом (от 1280 px) знак ≈19–22 px.
   Невыбранная звезда светлая (серая казалась выключенной), выбранная — медная.
   На телефоне «Aussehen» из панели убран: он есть в шапке, а места в ряду мало. */
.dock .ico:not(.ico-label){width:40px;height:40px}
.dock .ico svg{width:28px;height:28px}
.dock-sub .favbtn{width:40px;height:40px;font-size:26px;color:#e3ece2}
.dock-sub .favbtn.on{color:var(--accent)}
@media (max-width:560px){
  .dock > .ico[data-open="mLook"]{display:none}
}
.side-tools{gap:2px}
.side-tools button{height:38px;gap:6px;padding:0 6px;font-size:13px}
.side-tools svg{width:24px;height:24px}
@media (min-width:1280px){
  body.side-nav .dock .ico{width:40px;height:40px}
  body.side-nav .dock .ico svg{width:34px;height:34px}
  body.side-nav .dock-sub .favbtn{width:40px;height:40px;font-size:28px}
}

/* ------------------------------------------------ сукно этого сайта: в мини-превью каталога,
   у рамок и флеша, у своих игр (site.css рисует зелёное родное сукно) */
.thumb.live{background:#1c5c37 url(bg/native.png) repeat}
body[data-src="own"] .table{background:#1c5c37 url(bg/native.png) repeat}
@media (min-width:1280px){body.lay-side[data-src="own"]{background:#1c5c37 url(bg/native.png) repeat fixed}}

/* ------------------------------------------------ логотип 1b «Веер» (SVG, две строки, для тёмной обвязки):
   крупнее движкового (у того одна строка) — в шапке 40 / 37 / 34 px, в колонке 58 px, в подвале 48 px */
.logo-img img{height:40px;width:auto}
@media (max-width:900px){.logo-img img{height:37px}}
@media (max-width:560px){.logo-img img{height:34px}}
.side-top .logo-img{padding:8px 8px 4px}
.side-top .logo-img img{height:58px}
@media (min-width:1280px) and (max-height:700px){.side-top .logo-img img{height:50px}}
.foot-brand .logo-img img{height:48px}
/* ссылки на сайты сети на главной: картинка и подпись */
.home-text .sites{display:flex;flex-wrap:wrap;gap:14px}
.home-text .sites a{display:flex;flex-direction:column;gap:6px;font-weight:700;text-decoration:none}
.home-text .sites img{border-radius:10px;object-fit:cover;width:200px;height:150px}

/* длинные адреса в тексте (Privacy Policy) не распирают страницу на телефоне */
.prose a{overflow-wrap:anywhere}

/* ------------------------------------------------ меню разделов в колонке справа (владелец 01.10, 20:08):
   две колонки — значок раздела и название, «All games» отдельной строкой внизу; выбранный раздел — медная
   полоска слева и медный значок. Значки выводит render.php (fs_side_icon). Список игр раздела выезжает слева. */
.side-cat > a::before{display:none}
.side-cat > a,.side-cat > button{position:relative}
.side-ico{display:inline-flex;flex:0 0 auto;width:18px;height:18px;color:#93ad99}
.side-ico svg{width:18px;height:18px}
.side-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-cat.on > a::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--accent)}
.side-cat.on > a .side-ico,.side-cat:hover > a .side-ico,.side-cat > a:focus-visible .side-ico,.side-cat-all .side-ico{color:var(--accent)}
@media (min-width:1280px){
  body.side-nav .side-menu{padding:6px}
  body.side-nav .side-menu ul{display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
  body.side-nav .side-cat-all{grid-column:1 / -1}
  body.side-nav .side-cat > a,body.side-nav .side-cat > button{gap:8px;padding:7px 6px 7px 9px;font-size:14.5px}
}
/* низкое окно (ноутбук 1366×768 и ниже) — строки плотнее */
@media (min-width:1280px) and (max-height:700px){
  body.side-nav .side-cat > a,body.side-nav .side-cat > button{padding:5px 6px 5px 9px;font-size:14px}
}

/* ------- выпадающие списки разделов: наши игры, разделитель, остальные (владелец 01.10, 21:21) ------- */
.side-fly-sep{display:block;height:1px;margin:5px 8px;background:var(--chrome-line)}
.drop-sep{height:1px;margin:6px 4px;background:var(--chrome-line)}
/* верхняя панель (шире 1000 px): длинный список не уходит за низ окна — прокручивается весь список,
   столбцы делятся поровну (раньше у списка был предел 56vh, и лишнее вылезало вбок) */
@media (min-width:1001px){
  .drop{max-height:calc(100vh - var(--bar) - 12px);overflow-y:auto;overscroll-behavior:contain}
  .drop-in{max-height:none}
}
/* колонка справа: высоту и сдвиг списка по месту ставит site.js (fitSideFly), здесь — запас */
.side-fly{overscroll-behavior:contain}

/* ------- главная: под каталогом (HOME_LIST, 60 игр) — кнопка окна «All games» (владелец 01.10, 22:01) ------- */
.home-more{display:flex;justify-content:center;margin:18px 0 8px}

/* ------- встроенная игра без шапки её сайта (games.php: 'crop' => px; владелец 01.10, 21:20) -------
   Фрейм выше на --crop и сдвинут вверх: шапка уходит за край, игра видна целиком. */
.frame.crop{position:relative;overflow:hidden}
.frame.crop iframe{margin-top:calc(-1 * var(--crop));
  min-height:calc(100svh - var(--bar) - var(--sub) - var(--bottom) + var(--crop))}