/* Паук VK Mini App — глубокий индиго, серебро. Тема единая (тёмная). */
:root {
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --bg-0: #2a1f5c;
    --bg-1: #0d0a24;
    --felt: radial-gradient(100% 64% at 50% -12%,rgba(74,122,98,.24),transparent 62%),linear-gradient(180deg,#173d35,#0b2824 60%,#071b19);

    --text: #f2effe;
    --text-dim: #a79fd8;

    --gold-1: #d9c8ff;
    --gold-2: #a98cf0;
    --gold-3: #6a4fc0;

    --panel: rgba(40, 28, 90, .55);
    --panel-border: rgba(170, 140, 255, .28);
    --panel-glow: 0 0 18px rgba(130, 90, 230, .2), inset 0 1px 0 rgba(255,255,255,.05);

    --red: #d23b4a;
    --black: #16233a;
    --accent: #8a6ef0;

    --card-w: clamp(29px, 9.3vw, 44px);
    --card-h: calc(var(--card-w) * 1.46);
}

body[data-table-bg="velvet"] { --felt: radial-gradient(100% 64% at 50% -12%,rgba(74,122,98,.24),transparent 62%),linear-gradient(180deg,#173d35,#0b2824 60%,#071b19); }
body[data-table-bg="emerald"] { --felt: radial-gradient(95% 60% at 50% -8%,rgba(75,210,164,.25),transparent 62%),radial-gradient(70% 45% at 50% 110%,rgba(11,71,57,.42),transparent 70%),linear-gradient(180deg,#145d4d,#082f2a 56%,#051b19); }
body[data-table-bg="glacier"] { --felt: radial-gradient(90% 56% at 50% -5%,rgba(161,224,255,.28),transparent 64%),linear-gradient(180deg,#215477,#102d4b 58%,#081a30); }
body[data-table-bg="ember"] { --felt: radial-gradient(90% 55% at 50% -8%,rgba(232,167,94,.23),transparent 65%),repeating-linear-gradient(92deg,rgba(255,255,255,.015) 0 2px,transparent 2px 18px),linear-gradient(180deg,#603b2b,#2e1e20 58%,#171117); }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; height: 100dvh; overscroll-behavior: none; overflow: hidden; }
body {
    font-family: var(--font); color: var(--text); font-size: 15px; line-height: 1.45;
    -webkit-font-smoothing: antialiased; background: var(--felt); background-attachment: fixed;
    touch-action: none;
}
.hidden { display: none !important; }
[hidden] { display: none !important; }
#app { width: 100%; height: 100%; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.screen {
    flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
             max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
#screen-game { position: relative; isolation: isolate; }
#screen-game::before { content: ''; position: absolute; z-index: -1; inset: 18% 3% 8%; pointer-events: none; opacity: .34; background: repeating-radial-gradient(ellipse at 50% 82%,transparent 0 70px,rgba(225,216,255,.08) 72px 74px,transparent 76px 112px); mask-image: linear-gradient(transparent,#000 25%,#000 80%,transparent); }

/* ---------- Меню ---------- */
#screen-menu { align-items: center; justify-content: safe center; gap: 6px; overflow-y: auto; touch-action: pan-y; }
.brand { text-align: center; margin-bottom: 10px; }
.brand-suits { font-size: 30px; letter-spacing: 6px; margin-bottom: 4px; color: var(--gold-1); }
.menu-title {
    /* Название в две строки съедало верх мобильного меню — держим одну строку
       на телефонах и не даём заголовку расти выше прежних 48px на широких экранах. */
    font-size: clamp(30px, 8vw, 48px); font-weight: 800; letter-spacing: 1px; text-wrap: balance;
    background: linear-gradient(180deg, var(--gold-1) 20%, var(--gold-2) 62%, var(--gold-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 12px rgba(150, 110, 240, .35));
}
.menu-subtitle { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--text-dim); margin: -2px 0 18px; }
.cloud-chip { width: max-content; max-width: 100%; margin: -9px auto 0; padding: 4px 9px; border-radius: 999px; background: rgba(20,14,54,.6); color: var(--text-dim); font-size: 9px; font-weight: 700; }
.cloud-chip i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #beaaff; box-shadow: 0 0 7px rgba(190,170,255,.7); }
.cloud-chip.ok i { background: #6fe0a4; box-shadow: 0 0 7px rgba(111,224,164,.7); }
.cloud-chip.error i { background: #ffb36f; box-shadow: none; }
.cloud-chip.local i { background: #8f87b8; box-shadow: none; }

.menu-actions { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.mode-card { display: flex; align-items: center; gap: 14px; text-align: left; font-family: var(--font); color: var(--text); cursor: pointer; background: var(--panel); border: 1.5px solid var(--panel-border); border-radius: 16px; padding: 14px 15px; box-shadow: var(--panel-glow); transition: transform .07s ease; position: relative; }
.mode-card:active { transform: scale(.98); }
.mode-card-primary { border-color: rgba(180, 150, 255, .6); box-shadow: 0 0 26px rgba(140, 100, 240, .32), inset 0 1px 0 rgba(255,255,255,.08); background: linear-gradient(165deg, rgba(90, 60, 180, .5), rgba(30, 22, 70, .7)); }
.mode-icon { flex: none; width: 48px; height: 48px; border-radius: 13px; font-size: 24px; background: rgba(20, 14, 46, .6); border: 1px solid var(--panel-border); display: flex; align-items: center; justify-content: center; }
.mode-name { display: block; font-size: 16.5px; font-weight: 800; }
.mode-sub { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 1px; }

.opt-block { width: 100%; max-width: 400px; margin-top: 16px; }
.opt-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; text-align: center; }
.seg { display: flex; gap: 5px; background: var(--panel); border: 1.5px solid var(--panel-border); border-radius: 14px; padding: 5px; box-shadow: var(--panel-glow); }
.seg-btn { flex: 1; min-height: 44px; padding: 10px 4px; border: none; border-radius: 10px; cursor: pointer; background: transparent; color: var(--text-dim); font-family: var(--font); }
.seg-btn b { font-size: 13px; font-weight: 700; }
.seg-btn.active { background: linear-gradient(165deg, rgba(180,150,255,.28), rgba(106,79,192,.2)); color: var(--gold-1); box-shadow: inset 0 0 0 1px rgba(180,150,255,.4); }
.btn-play { width: 100%; margin-top: 12px; }

.menu-stats { display: flex; align-items: stretch; gap: 4px; margin-top: 18px; width: 100%; max-width: 400px; background: var(--panel); border: 1.5px solid var(--panel-border); border-radius: 14px; padding: 12px 8px; box-shadow: var(--panel-glow); }
.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-item b { font-size: 20px; font-weight: 800; color: var(--gold-1); }
.stat-item span { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; text-align: center; }
.stat-sep { width: 1px; background: var(--panel-border); }
.menu-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 10px; }
.rules-link { min-height: 44px; padding: 8px 2px; background: none; border: none; cursor: pointer; color: var(--text-dim); font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 28px; text-decoration: underline; }

/* ---------- Шапка игры ---------- */
.game-header { width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 auto 10px; }
.icon-btn { flex: none; width: 46px; height: 46px; border-radius: 14px; cursor: pointer; background: rgba(24,17,62,.64); border: 1px solid rgba(205,188,255,.3); color: var(--text); font-size: 20px; display: flex; align-items: center; justify-content: center; font-family: var(--font); box-shadow: inset 0 1px rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.12); }
.icon-btn:active { transform: scale(.94); }
.hud { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.hud-item { min-height: 42px; display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--text); background: rgba(24,17,62,.64); border: 1px solid rgba(205,188,255,.3); border-radius: 13px; padding: 8px 13px; }
.hud-ico { font-size: 11px; }

/* ---------- Стол ---------- */
.table-wrap { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; margin: 0 auto; padding: 10px 10px 0; border: 1px solid rgba(221,210,255,.08); border-radius: 22px 22px 0 0; background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 35%); }
.top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.pile { width: var(--card-w); height: var(--card-h); border-radius: 7px; position: relative; }
.pile-stock { border: 1.5px dashed rgba(255,255,255,.22); background: rgba(0,0,0,.14); }
.pile-stock .card:not(:last-child) { display: none; }
.pile-stock:not(.is-empty)::before { content: attr(data-count); position: absolute; z-index: 60; right: -7px; top: -7px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 10px; background: #e0d2ff; color: #25194f; border: 2px solid #342565; font-size: 9px; font-weight: 900; }
.pile-stock.is-empty::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--card-w) * .42); color: rgba(255,255,255,.3); }

.foundations-mini { display: flex; flex-wrap: wrap; gap: 5px; max-width: calc(var(--card-w) * 4.6 + 30px); justify-content: flex-end; }
.pile-mini { width: calc(var(--card-w) * .56); height: calc(var(--card-h) * .56); border-radius: 5px; }
.pile-mini.is-empty { border: 1.2px dashed rgba(255,255,255,.2); background: rgba(0,0,0,.12); }
.pile-mini .card { width: 100%; height: 100%; }
.pile-mini .card .c-rank { font-size: calc(var(--card-w) * .2); }
.pile-mini .card .c-suit { font-size: calc(var(--card-w) * .16); }

.tableau-row { flex: 1; display: grid; grid-template-columns: repeat(10,minmax(0,var(--card-w))); justify-content: space-between; gap: 2px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 2px 18px; scrollbar-width: thin; scrollbar-color: rgba(213,198,255,.28) transparent; }
.pile-tableau { width: 100%; height: var(--card-h); justify-self: center; max-width: var(--card-w); border: 1.5px dashed rgba(255,255,255,.14); border-radius: 7px; }
/* Карты каскада ровно по ширине колонки — не вылезают за край на узких экранах. */
.pile-tableau .card { width: 100%; }

/* ---------- Карты ---------- */
.card { width: var(--card-w); height: var(--card-h); border-radius: calc(var(--card-w) * .12); user-select: none; flex: none; transition: box-shadow .12s,transform .12s; touch-action: none; overflow: hidden; }
.card.face {
    background: radial-gradient(circle at 72% 24%,#fff 0 7%,transparent 28%),linear-gradient(145deg,#fffefb,#edf0f5);
    border: 1px solid rgba(12,19,36,.24);
    box-shadow: 0 4px 10px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.8);
    color: var(--black);
}
.card.face::after { content: ''; position: absolute; inset: 4%; border: 1px solid rgba(24,34,53,.08); border-radius: calc(var(--card-w) * .08); pointer-events: none; }
.card.face.red { color: var(--red); }
.licensed-face-art { display: none; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; }
body[data-card-face="web"] .licensed-face-art {
    display: block;
    background-image: url('./assets/cards/english-pattern-cc0/english-pattern.webp');
    background-repeat: no-repeat;
    background-size: 1300% 400%;
    background-position:
        calc(var(--sprite-col) * 100% / 12)
        calc(var(--sprite-row) * 100% / 3);
}
body[data-card-face="web"] .card.face { background: #fffdfa; border-color: rgba(21,24,25,.58); }
body[data-card-face="web"] .card.face::after { z-index: 2; border-color: rgba(20,23,24,.14); }
body[data-card-face="web"] .card.face .card-emblem { display: none; }
body[data-card-face="web"] .card.face .corner.tl {
    z-index: 4;
    min-width: 60%;
    min-height: 24%;
    padding: calc(var(--card-w) * .035) calc(var(--card-w) * .055) calc(var(--card-w) * .045);
    left: calc(var(--card-w) * .025);
    top: calc(var(--card-w) * .02);
    align-items: center;
    border-radius: calc(var(--card-w) * .055);
    background: rgba(255,253,250,.94);
    box-shadow: 2px 2px 5px rgba(255,253,250,.72);
}
body[data-card-face="web"] .card.face.black { color: #111820; }
body[data-card-face="web"] .card.face.red { color: #d44752; }
.card.selected { transform: translateY(-3px); box-shadow: 0 0 0 4px #d9a965,0 10px 22px rgba(7,21,18,.55); }
.card .corner { position: absolute; z-index: 3; display: flex; flex-direction: row; align-items: baseline; gap: calc(var(--card-w) * .045); line-height: .9; font-weight: 900; }
.card .corner.tl { left: calc(var(--card-w) * .09); top: calc(var(--card-w) * .075); }
.card .corner.br { right: calc(var(--card-w) * .09); bottom: calc(var(--card-w) * .075); transform: rotate(180deg); opacity: .78; }
.card .corner.br { display: none; }
.card .c-rank { font-size: calc(var(--card-w) * .3); letter-spacing: -.04em; }
.card .c-suit { font-size: calc(var(--card-w) * .2); }
.card-emblem { position: absolute; inset: 25% 8% 8%; display: grid; place-items: center; }
.number-emblem i,.ace-emblem i { z-index: 1; font-style: normal; font-size: calc(var(--card-w) * .72); line-height: 1; opacity: .18; filter: saturate(.8); }
.number-emblem b,.ace-emblem b { position: absolute; right: 4%; bottom: -5%; font-size: calc(var(--card-w) * .48); line-height: 1; opacity: .055; }
.ace-emblem i { font-size: calc(var(--card-w) * .88); opacity: .28; }
.motif-ring { position: absolute; width: 80%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .12; }
.motif-ring::before,.motif-ring::after { content: ''; position: absolute; inset: 14%; border: 1px solid currentColor; border-radius: 50%; }
.motif-ring::after { inset: 31%; }
.card-emblem.court-emblem { inset: 20% 7% 5%; overflow: hidden; border: 1px solid currentColor; border-radius: calc(var(--card-w) * .1); opacity: .9; }
.court-vector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.court-vector path,.court-vector circle { vector-effect: non-scaling-stroke; }
.court-web { fill: none; stroke: currentColor; stroke-width: 1; opacity: .09; }
.court-metal { fill: #d2a94f; stroke: #8a641c; stroke-width: 1.2; }
.court-feather { fill: currentColor; opacity: .62; }
.court-hair { fill: #273047; stroke: #162035; stroke-width: 1; }
.court-head,.court-neck { fill: #e8b48f; stroke: #9a6754; stroke-width: 1; }
.court-eye { fill: #17223c; }
.court-mouth { fill: none; stroke: #9a5160; stroke-width: 1; }
.court-robe { fill: currentColor; opacity: .62; stroke: currentColor; stroke-width: 1.4; }
.court-collar { fill: #f7f0df; stroke: #b49b72; stroke-width: 1; }
.court-sash { fill: #d2a94f; opacity: .88; }
.court-medal { fill: #f7efd8; stroke: #9f792c; stroke-width: 1.2; }
.court-suit { fill: currentColor; font: 800 10px var(--font); }
.court-gem { fill: #f2d375; stroke: #8a641c; stroke-width: .8; }
.court-emblem > b { position: absolute; z-index: 2; left: 6%; bottom: 3%; font-size: calc(var(--card-w) * .22); line-height: 1; opacity: .26; }
.court-emblem > i { position: absolute; z-index: 2; right: 8%; bottom: 5%; font-style: normal; font-size: calc(var(--card-w) * .22); opacity: .75; }

body[data-card-face="web"] .card.face { background: #fffdfa; border-color: rgba(21,24,25,.58); }
body[data-card-face="web"] .card.face.black { color: #111820; }
body[data-card-face="web"] .card.face.red { color: #d44752; }
body[data-card-face="club"] .card.face { background: linear-gradient(155deg,#fff,#f4f1e8); border-color: rgba(35,29,22,.3); }
body[data-card-face="club"] .motif-ring,body[data-card-face="club"] .court-web { display: none; }
body[data-card-face="club"] .number-emblem i { opacity: .28; }
body[data-card-face="club"] .card-emblem.court-emblem { border-radius: 2px; }
body[data-card-face="contrast"] .card.face { background: linear-gradient(150deg,#fff,#f1f5f7); }
body[data-card-face="contrast"] .card.suit-s { color: #14213b; }
body[data-card-face="contrast"] .card.suit-h { color: #c32d4b; }
body[data-card-face="contrast"] .card.suit-d { color: #246bc2; }
body[data-card-face="contrast"] .card.suit-c { color: #16835a; }
body[data-card-face="contrast"] .motif-ring { opacity: .08; }
.card.back { background: linear-gradient(145deg,#6f54cb,#2b1b68); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 4px 10px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.1); }
.card.back .back-pattern { position: absolute; inset: 8%; border-radius: calc(var(--card-w) * .07); border: 1px solid rgba(255,255,255,.38); background: repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.17) 0 1px,transparent 2px 7px); }
.pile-mini .card .corner.br,.pile-mini .card-emblem { display: none; }
.drag-ghost .card { box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.hint-flash { animation: hintFlash .9s ease; border-radius: 7px; }
@keyframes hintFlash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px var(--gold-1), 0 0 18px rgba(217,200,255,.7); } }

/* ---------- Инструменты ---------- */
.tools { display: flex; gap: 8px; justify-content: center; margin: 10px auto 0; width: 100%; padding: 7px; border: 1px solid rgba(218,204,255,.14); border-radius: 18px; background: rgba(10,7,31,.28); backdrop-filter: blur(10px); }
.tool { flex: 1; max-width: 180px; min-height: 54px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(205,188,255,.28); border-radius: 13px; background: rgba(49,34,108,.62); color: #ddd6f5; font-family: var(--font); font-size: 12px; font-weight: 750; cursor: pointer; position: relative; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.tool:active { transform: scale(.95); }
.tool:disabled { opacity: .4; }
.tool-ico { font-size: 19px; }
.count-badge { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #8d6cf0; color: #fff; font-size: 10px; font-weight: 850; display: flex; align-items: center; justify-content: center; }
#sound-row { display: flex; justify-content: center; margin-top: 8px; }

/* ---------- Кнопки ---------- */
.btn { font-family: var(--font); font-weight: 800; font-size: 16px; border: none; border-radius: 14px; padding: 14px 22px; cursor: pointer; color: #fff; transition: transform .07s ease; }
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(165deg, #b79bff, #7c5cd9); box-shadow: 0 6px 18px rgba(110,70,200,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-secondary { background: var(--panel); border: 1.5px solid var(--panel-border); font-size: 14px; padding: 11px 16px; color: var(--text); }
.btn-ghost { background: none; color: var(--text-dim); font-weight: 700; font-size: 14px; padding: 8px; }

/* ---------- Оверлеи ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: rgba(10, 6, 26, .9); backdrop-filter: blur(6px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.overlay-card { width: 100%; max-width: 360px; max-height: 100%; overflow-y: auto; background: linear-gradient(180deg, #241a54, #120c32); border: 1.5px solid var(--panel-border); border-radius: 22px; padding: 26px 22px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 12px; }
.overlay-emoji { font-size: 60px; }
.overlay-title { font-size: 24px; font-weight: 800; color: var(--gold-1); }
.overlay-time { font-size: 28px; font-weight: 800; color: var(--text); }
.overlay-record { font-size: 14px; font-weight: 800; color: #34c471; }
.share-row { display: flex; gap: 8px; }
.share-row .btn { flex: 1; }
.rules-card { text-align: left; }
.rules-card .overlay-title { text-align: center; }
.rules-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rules-list li { position: relative; padding-left: 26px; font-size: 14px; }
.rules-list li::before { content: '♠'; position: absolute; left: 0; top: 0; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(20, 14, 46, .95); border: 1.5px solid var(--panel-border); color: var(--text); padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 90%; text-align: center; }

@media (max-height: 700px) { .menu-title { font-size: clamp(28px, 7vw, 40px); } }

button:focus-visible, [tabindex="0"]:focus-visible {
    outline: 3px solid var(--gold-1);
    outline-offset: 3px;
}

@media (max-width: 390px) {
    .screen { padding-left: max(4px,env(safe-area-inset-left)); padding-right: max(4px,env(safe-area-inset-right)); }
    .game-header { gap: 4px; margin-bottom: 6px; }
    .icon-btn { width: 44px; height: 44px; border-radius: 12px; }
    .hud { gap: 3px; }
    .hud-item { min-height: 36px; padding: 5px 6px; font-size: 11px; }
    .hud-ico { font-size: 9px; }
    .table-wrap { gap: 9px; padding: 7px 0 0; border-left: 0; border-right: 0; border-radius: 14px 14px 0 0; }
    .tableau-row { gap: 0; padding-inline: 0; }
    .tools { gap: 4px; margin-top: 5px; padding: 4px; border-radius: 14px; }
    .tool { min-height: 48px; padding: 5px 2px; flex-direction: column; gap: 1px; font-size: 9px; }
    .tool-ico { font-size: 15px; }
    .count-badge { top: 2px; right: 3px; min-width: 16px; height: 16px; font-size: 9px; }
    .card .corner.br { display: none; }
    .card .c-rank { font-size: calc(var(--card-w) * .34); }
    .card .c-suit { font-size: calc(var(--card-w) * .23); }
    .card-emblem { inset: 30% 6% 8%; }
    .card-emblem i { font-size: calc(var(--card-w) * .72); }
}

@media (min-width: 900px) {
    :root { --card-w: clamp(80px, 7.5vw, 96px); }
    #screen-game { width: min(1440px,100%); margin: 0 auto; padding-inline: clamp(20px,3vw,44px); }
    .game-header,.daily-gamebar,.tutorial-coach,.table-wrap { max-width: 1180px; }
    .tableau-row { gap: clamp(6px,.75vw,12px); }
    .tools { max-width: 650px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Доработки качества: скролл каскадов, подсветка целей, тряска, сплэш ---------- */
.tableau-row { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.pile.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; box-shadow: 0 0 16px -2px var(--accent), inset 0 0 12px -4px var(--accent); }
.shake { animation: shake .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }
#splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--felt); background-attachment: fixed; transition: opacity .35s ease; }
#splash.hide { opacity: 0; pointer-events: none; }
.splash-logo { font-size: 42px; letter-spacing: 8px; }
.splash-logo .red { color: var(--red); }
.splash-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--gold-1); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.overlay-sub { font-size: 14px; color: var(--text-dim); margin-top: -2px; }

/* ---------- Кросс-промо (другие наши пасьянсы) ---------- */

/* ---------- Ежедневная паутина и прогресс ---------- */
.daily-card, .journey-card {
    width: 100%; max-width: 400px; border: 1.5px solid rgba(201, 181, 255, .5);
    color: var(--text); font-family: var(--font); cursor: pointer; text-align: left;
    background: linear-gradient(145deg, rgba(105, 70, 205, .68), rgba(29, 20, 72, .9));
    box-shadow: 0 9px 30px rgba(81, 48, 171, .32), inset 0 1px 0 rgba(255,255,255,.1);
}
.daily-card { display: flex; flex-direction: column; gap: 7px; border-radius: 18px; padding: 13px 15px; }
.daily-card:active, .journey-card:active { transform: scale(.98); }
.daily-topline { display: flex; justify-content: space-between; align-items: center; color: #d9ccff; font-size: 10px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.daily-streak { color: #ffd58a; letter-spacing: 0; }
.daily-main { display: flex; align-items: center; gap: 11px; }
.daily-main > span:nth-child(2) { flex: 1; min-width: 0; }
.daily-main b { display: block; font-size: 17px; }
.daily-main small { display: block; color: #bdb4e8; font-size: 12px; margin-top: 1px; }
.daily-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 23px; background: rgba(13, 8, 39, .5); border: 1px solid rgba(210,190,255,.25); }
.daily-arrow { font-size: 30px; color: #d9ccff; }
.mission-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mission-dot { height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden; }
.mission-dot i { display: block; height: 100%; background: linear-gradient(90deg, #9a7af3, #e4d7ff); border-radius: inherit; }
.daily-mission-labels { display: flex; flex-wrap: wrap; gap: 4px 6px; color: #d8cff5; font-size: 9px; line-height: 1.25; }
.daily-mission-labels i { font-style: normal; padding: 2px 6px; border-radius: 8px; background: rgba(13,8,39,.28); }
.daily-mission-labels i.done { color: #9ff0c2; text-decoration: line-through; text-decoration-thickness: 1px; }

.journey-card { display: flex; align-items: center; gap: 12px; border-radius: 15px; padding: 11px 13px; margin-top: 10px; background: rgba(36, 26, 82, .7); }
.journey-level { flex: none; width: 43px; height: 43px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #171039; border: 1px solid rgba(205,188,255,.36); }
.journey-level b { color: #e1d4ff; font-size: 17px; line-height: 1; }
.journey-level small { color: #9e94cd; font-size: 7px; text-transform: uppercase; }
.journey-copy { flex: 1; min-width: 0; }
.journey-copy b, .journey-copy small { display: block; }
.journey-copy b { font-size: 13px; }
.journey-copy small { color: var(--text-dim); font-size: 10px; margin-top: 1px; }
.xp-track { display: block; width: 100%; height: 4px; margin-top: 6px; background: rgba(255,255,255,.13); border-radius: 4px; overflow: hidden; }
.xp-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8a6ef0, #d8c7ff); }
.journey-badge { flex: none; font-size: 25px; color: #e4d7ff; filter: drop-shadow(0 0 9px rgba(194,169,255,.6)); }

.league-card { width: 100%; max-width: 400px; display: flex; align-items: center; gap: 11px; margin-top: 4px; padding: 10px 13px; border: 1.5px solid rgba(255,210,120,.3); border-radius: 14px; background: rgba(55,38,90,.68); color: var(--text); font-family: var(--font); cursor: pointer; text-align: left; }
.league-card:active { transform: scale(.98); }
.league-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,206,103,.12); }
.league-copy { flex: 1; min-width: 0; }
.league-copy b, .league-copy small { display: block; }
.league-copy b { font-size: 13px; }
.league-copy small { color: var(--text-dim); font-size: 10px; }
.league-rank { min-width: 42px; color: #ffd98f; font-size: 15px; font-weight: 900; text-align: right; }
.meta-grid { width: 100%; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.meta-grid .journey-card, .meta-grid .league-card, .meta-grid .shop-card { width: 100%; min-width: 0; max-width: none; margin: 0; min-height: 62px; padding: 9px 10px; }
.meta-grid .journey-card { grid-column: 1 / -1; }
.meta-grid .journey-level { width: 36px; height: 36px; }
.meta-grid .journey-badge { font-size: 21px; }
.meta-grid .league-card, .shop-card { display: flex; align-items: center; gap: 8px; border: 1.5px solid rgba(255,210,120,.3); border-radius: 14px; background: rgba(55,38,90,.68); color: var(--text); font-family: var(--font); cursor: pointer; text-align: left; }
.shop-card { border-color: rgba(126,221,194,.3); }
.shop-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(103,223,160,.1); }
.shop-copy { min-width: 0; flex: 1; }
.shop-copy b, .shop-copy small { display: block; }
.shop-copy b { font-size: 11px; line-height: 1.15; }
.shop-copy small { color: var(--text-dim); font-size: 8px; line-height: 1.2; margin-top: 2px; }
.shop-current { color: #d9c8ff; font-size: 18px; }
.meta-grid .league-copy b { font-size: 11px; }
.meta-grid .league-copy small { font-size: 8px; line-height: 1.2; }
.meta-grid .league-rank { min-width: 25px; font-size: 12px; }
.pattern-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.shop-overlay-card {
    max-width: 560px;
    padding: 20px;
    gap: 10px;
    background: linear-gradient(180deg,#2b1d62 0%,#17103c 45%,#0f0a2b 100%);
    box-shadow: 0 24px 80px rgba(3,2,15,.78), inset 0 1px rgba(255,255,255,.08);
}
.shop-overlay-card .overlay-title { font-size: 21px; }
.shop-overlay-card .overlay-sub { color: #bcb3df; font-size: 11px; line-height: 1.3; }
.shop-overlay-card > .btn { position: sticky; bottom: 0; z-index: 5; margin-top: 2px; box-shadow: 0 -12px 24px #0f0a2b,0 6px 18px rgba(75,48,154,.4); }
.shop-section-title { margin-top: 4px; color: #dcd3f8; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.background-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.background-item { min-width: 0; padding: 7px; border: 1px solid rgba(190,167,255,.22); border-radius: 12px; background: rgba(56,39,116,.3); color: var(--text); font-family: var(--font); cursor: pointer; }
.background-item i { width: 100%; height: 48px; display: block; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.background-item b,.background-item small { display: block; overflow-wrap: anywhere; }
.background-item b { margin-top: 5px; font-size: 8px; line-height: 1.15; }
.background-item small { margin-top: 2px; color: var(--text-dim); font-size: 7px; }
.background-item.selected { border-color: #79e3ac; box-shadow: 0 0 0 1px rgba(121,227,172,.35); }
.background-velvet i { background: radial-gradient(circle at 50% 0,#4c806c,transparent 55%),linear-gradient(#173d35,#071b19); }
.background-emerald i { background: radial-gradient(circle at 50% 0,#3f9e7d,transparent 58%),linear-gradient(#145d4d,#051b19); }
.background-glacier i { background: radial-gradient(circle at 50% 0,#70aaca,transparent 58%),linear-gradient(#215477,#081a30); }
.background-ember i { background: repeating-linear-gradient(92deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px),linear-gradient(#754837,#171117); }
.face-style-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.face-style-item { min-width: 0; padding: 7px; border: 1px solid rgba(190,167,255,.22); border-radius: 12px; background: rgba(56,39,116,.3); color: var(--text); font-family: var(--font); cursor: pointer; }
.face-style-item.selected { border-color: #79e3ac; box-shadow: 0 0 0 1px rgba(121,227,172,.35); }
.face-style-item > b,.face-style-item > small { display: block; }
.face-style-item > b { margin-top: 6px; font-size: 9px; }
.face-style-item > small { color: var(--text-dim); font-size: 7px; }
.face-style-preview { height: 52px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.face-style-preview > i { width: 31px; height: 44px; position: relative; display: block; padding: 4px 3px; overflow: hidden; border: 1px solid rgba(18,23,37,.32); border-radius: 5px; background: #fffdf8; color: #17223c; box-shadow: 0 2px 5px rgba(0,0,0,.25); font-style: normal; text-align: left; }
.face-style-preview > i:nth-child(2) { color: #b62649; transform: translateY(-2px); }
.face-style-preview > i:nth-child(3) { color: #b62649; }
.face-style-preview b { font-size: 10px; line-height: 1; }
.face-style-preview em { margin-left: 2px; font-size: 8px; font-style: normal; }
.face-style-preview i::after { content: ''; position: absolute; width: 22px; height: 22px; left: 4px; top: 15px; border: 1px solid currentColor; border-radius: 50%; opacity: .13; }
.face-preview-web .face-style-preview > i {
    background-image: url('./assets/cards/english-pattern-cc0/english-pattern.webp');
    background-repeat: no-repeat;
    background-size: 1300% 400%;
}
.face-preview-web .face-style-preview > i:nth-child(1) { background-position: 100% 0; }
.face-preview-web .face-style-preview > i:nth-child(2) { background-position: 91.6667% 33.3333%; }
.face-preview-web .face-style-preview > i:nth-child(3) { background-position: 75% 66.6667%; }
.face-preview-web .face-style-preview i::after { display: none; }
.face-preview-web .face-style-preview b,.face-preview-web .face-style-preview em {
    position: relative;
    z-index: 1;
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(255,253,250,.9);
}
.face-preview-club .face-style-preview > i { border-radius: 2px; background: #f7f3e9; }
.face-preview-club .face-style-preview i::after { border-radius: 0; opacity: .18; }
.face-preview-contrast .face-style-preview > i:nth-child(3) { color: #246bc2; }
.face-preview-contrast .face-style-preview > i { background: #f7fbfd; }
.pattern-item { min-width: 0; padding: 7px 4px; border: 1px solid rgba(190,167,255,.22); border-radius: 12px; background: rgba(56,39,116,.35); color: var(--text); font-family: var(--font); cursor: pointer; }
.pattern-item:disabled { opacity: .42; cursor: default; }
.pattern-item.selected { border-color: #79e3ac; box-shadow: 0 0 0 1px rgba(121,227,172,.35); }
.pattern-item b, .pattern-item small { display: block; overflow-wrap: anywhere; }
.pattern-item b { margin-top: 5px; font-size: 8px; line-height: 1.1; }
.pattern-item small { margin-top: 3px; color: var(--text-dim); font-size: 7px; line-height: 1.15; }
.pattern-preview { width: 34px; height: 48px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); border-radius: 5px; color: rgba(255,255,255,.85); background: repeating-linear-gradient(48deg,#5439a8 0 6px,#3c2985 6px 12px); }
.pattern-preview i { font-style: normal; }
.pattern-drop, body[data-card-back="drop"] .card.back { background: radial-gradient(circle at 35% 25%,#c8f1ff 0 5%,transparent 6%), linear-gradient(145deg,#287b9b,#163866); }
.pattern-moon, body[data-card-back="moon"] .card.back { background: radial-gradient(circle at 62% 38%,#f4e9b1 0 16%,transparent 17%), linear-gradient(145deg,#34286d,#120d32); }
.pattern-storm, body[data-card-back="storm"] .card.back { background: repeating-linear-gradient(120deg,#49287d 0 7px,#7d4cb2 7px 9px,#202252 9px 15px); }
.pattern-crown, body[data-card-back="crown"] .card.back { background: linear-gradient(145deg,#9d6d18,#3f245d 48%,#1d163e); }
.pattern-comet, body[data-card-back="comet"] .card.back { background: linear-gradient(135deg,#eef0ff 0 3%,#8e72db 4% 10%,#20174a 28% 100%); }
.pattern-aurora, body[data-card-back="aurora"] .card.back { background: linear-gradient(125deg,#163d65,#34ad9b,#9a68d5,#20204d); }
.pattern-master, body[data-card-back="master"] .card.back { background: radial-gradient(circle,#9d83ec 0 5%,transparent 6% 18%,#7d64ce 19% 21%,transparent 22%),#171033; }

.daily-gamebar { display: flex; align-items: center; gap: 7px; min-height: 28px; margin: -2px 0 7px; padding: 5px 9px; border: 1px solid rgba(210,190,255,.26); border-radius: 9px; background: rgba(35,24,83,.75); font-size: 10px; color: var(--text-dim); }
.daily-gamebar b { color: #ded2ff; text-transform: uppercase; letter-spacing: .8px; }
.daily-game-missions { margin-left: auto; display: flex; gap: 4px; }
.daily-game-missions i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #a99ed3; font-size: 9px; font-style: normal; }
.daily-game-missions i.done { color: #0e3925; background: #67dfa0; border-color: #67dfa0; box-shadow: 0 0 7px rgba(103,223,160,.5); }

.tutorial-coach { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin: -2px 0 8px; padding: 9px 10px; border: 1px solid rgba(207,188,255,.5); border-radius: 13px; background: linear-gradient(110deg,rgba(83,57,168,.9),rgba(30,21,73,.94)); box-shadow: 0 8px 24px rgba(8,4,28,.28); }
.tutorial-step { min-width: 42px; padding: 5px 7px; border-radius: 9px; background: #d9c8ff; color: #25194f; font-size: 11px; font-weight: 900; text-align: center; }
.tutorial-copy { min-width: 0; display: flex; flex-direction: column; }
.tutorial-copy b { color: #fff; font-size: 12px; }
.tutorial-copy span { color: #bdb4e4; font-size: 10px; line-height: 1.25; }
.tutorial-skip { min-width: 44px; min-height: 44px; padding: 5px; border: 0; background: none; color: #d7cff4; font: 700 11px var(--font); text-decoration: underline; cursor: pointer; }
.tutorial-finish { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.tutorial-finish .btn { min-height: 44px; padding: 9px 12px; font-size: 12px; }
.tutorial-target { outline: 3px solid #e5d8ff !important; outline-offset: 3px; box-shadow: 0 0 22px rgba(190,155,255,.85) !important; animation: targetPulse 1.2s ease-in-out infinite; }
@keyframes targetPulse { 50% { outline-color: #75e5ae; box-shadow: 0 0 25px rgba(117,229,174,.75) !important; } }

.result-card { max-width: 430px; gap: 10px; }
.result-mark { width: 46px; height: 46px; margin: 0 auto; display: grid; place-items: center; border: 1px solid rgba(224,210,255,.55); border-radius: 15px; background: linear-gradient(145deg,#8061d8,#37266e); transform: rotate(45deg); }
.result-mark i { width: 14px; height: 22px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(0deg) translate(-2px,-2px); }
.result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.result-stats div { padding: 9px 4px; border: 1px solid rgba(190,167,255,.2); border-radius: 11px; background: rgba(54,38,112,.38); }
.result-stats b,.result-stats span { display: block; }
.result-stats b { color: #fff; font-size: 19px; }
.result-stats span { color: var(--text-dim); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.result-daily { display: grid; gap: 4px; text-align: left; }
.result-mission { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 7px; align-items: center; color: #c9c1e8; font-size: 10px; }
.result-mission i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.08); font-style: normal; }
.result-mission.done i { color: #123825; background: #67dfa0; }
.result-progress { display: grid; gap: 5px; padding: 9px 11px; border-radius: 11px; background: rgba(13,9,40,.35); text-align: left; }
.result-progress > div { display: flex; justify-content: space-between; gap: 8px; color: var(--text-dim); font-size: 10px; }
.result-progress b { color: #ded3ff; }
.result-rank { padding: 7px 10px; border-radius: 10px; background: rgba(255,211,126,.12); color: #ffe1a7; font-size: 12px; font-weight: 800; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.result-actions .btn { min-height: 44px; padding: 10px 8px; font-size: 12px; }
.win-reward { padding: 9px 12px; border-radius: 12px; background: rgba(113, 82, 204, .2); border: 1px solid rgba(192,170,255,.24); color: #ded3ff; font-size: 12px; font-weight: 700; }
.collection-card { max-width: 420px; }
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; }
.badge-item { min-width: 0; padding: 10px 3px 8px; border-radius: 12px; border: 1px solid rgba(190,167,255,.25); background: rgba(67,46,136,.32); }
.badge-item.locked { opacity: .38; filter: grayscale(1); }
.badge-item span { display: block; font-size: 25px; line-height: 1; color: #e7dcff; }
.badge-item b { display: block; margin-top: 6px; font-size: 8px; line-height: 1.15; overflow-wrap: anywhere; }
.badge-item small { display: block; color: var(--text-dim); font-size: 8px; margin-top: 3px; }
.leaderboard-card { max-width: 430px; }
.leader-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.2); }
.leader-tab { border: 0; border-radius: 9px; padding: 9px; background: transparent; color: var(--text-dim); font: 700 12px var(--font); cursor: pointer; }
.leader-tab.active { background: rgba(170,140,255,.24); color: var(--text); }
.leader-status { min-height: 20px; color: var(--text-dim); font-size: 11px; }
.leader-list { display: flex; flex-direction: column; gap: 5px; min-height: 56px; max-height: min(46vh, 360px); overflow-y: auto; list-style: none; text-align: left; }
.leader-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(190,167,255,.18); border-radius: 10px; background: rgba(53,37,111,.28); }
.leader-row.you { border-color: rgba(255,214,135,.55); background: rgba(117,82,34,.22); }
.leader-pos { color: #d9c8ff; font-size: 12px; font-weight: 900; text-align: center; }
.leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.leader-result { color: var(--text-dim); font-size: 10px; text-align: right; white-space: nowrap; }

@media (max-height: 760px) {
    #screen-menu { justify-content: flex-start; }
    .brand { margin-bottom: 3px; }
    .brand-suits { font-size: 23px; margin-bottom: 0; }
    .menu-title { font-size: clamp(26px, 7.4vw, 38px); }
    .menu-subtitle { margin-bottom: 8px; }
    .daily-card { padding: 10px 12px; gap: 5px; }
    .daily-icon { width: 34px; height: 34px; font-size: 19px; }
    .daily-main b { font-size: 15px; }
    .mode-card { padding: 10px 12px; }
    .mode-icon { width: 38px; height: 38px; font-size: 19px; }
    .meta-grid .journey-card, .meta-grid .league-card, .meta-grid .shop-card { min-height: 54px; }
    .opt-block { margin-top: 9px; }
    .menu-stats { margin-top: 10px; }
    .rules-link { margin-top: 10px; }
}

@media (max-width: 390px) {
    .daily-gamebar { font-size: 9px; padding-inline: 7px; }
    .badge-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .badge-item { padding-inline: 2px; }
    #shop-overlay { align-items: stretch; padding: max(8px,env(safe-area-inset-top)) 7px max(8px,env(safe-area-inset-bottom)); }
    .shop-overlay-card { max-width: none; padding: 14px 10px 10px; border-radius: 18px; gap: 8px; text-align: left; }
    .shop-overlay-card .overlay-title,.shop-overlay-card .overlay-sub { text-align: center; }
    .shop-overlay-card .overlay-title { font-size: 19px; }
    .shop-overlay-card .overlay-sub { font-size: 10px; }
    .shop-section-title { margin-top: 3px; font-size: 9px; }
    .background-grid { grid-template-columns: repeat(2,1fr); }
    .background-item { display: grid; grid-template-columns: 54px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 7px; padding: 6px; text-align: left; }
    .background-item i { grid-row: 1 / 3; height: 38px; }
    .background-item b { margin-top: 2px; font-size: 9px; }
    .background-item small { font-size: 8px; }
    .face-style-grid { gap: 5px; }
    .face-style-item { padding: 5px 3px; text-align: center; }
    .face-style-preview { height: 45px; gap: 1px; }
    .face-style-preview > i { width: 25px; height: 38px; padding: 3px 2px; }
    .face-style-preview i::after { width: 18px; height: 18px; left: 3px; top: 13px; }
    .face-style-item > b { margin-top: 3px; font-size: 8px; line-height: 1.05; }
    .pattern-grid { grid-template-columns: repeat(4,1fr); gap: 5px; }
    .pattern-item { padding: 5px 2px; }
    .pattern-preview { width: 29px; height: 39px; }
}

@media (orientation: landscape) and (max-height: 430px) {
    :root { --card-w: clamp(44px,7.3vw,60px); }
    .screen { padding-top: max(6px,env(safe-area-inset-top)); padding-bottom: max(6px,env(safe-area-inset-bottom)); }
    .daily-gamebar { min-height: 22px; margin-bottom: 3px; padding-block: 2px; }
    .game-header { margin-bottom: 3px; }
    .tutorial-coach { position: absolute; z-index: 70; top: max(48px,calc(env(safe-area-inset-top) + 42px)); left: max(8px,env(safe-area-inset-left)); width: min(300px,38vw); grid-template-columns: auto 1fr; }
    .tutorial-skip { grid-column: 1 / -1; min-height: 30px; padding: 0; }
    .table-wrap { gap: 6px; padding-top: 5px; }
    .tools { max-width: 560px; margin-top: 3px; padding: 3px; }
    .tool { min-height: 40px; padding: 3px 2px; flex-direction: row; justify-content: center; }
    .tool-ico { font-size: 14px; }
    .overlay { padding-block: max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-bottom)); }
    .result-card { max-width: 670px; display: grid; grid-template-columns: 90px 1fr 1fr; gap: 7px 12px; padding: 12px 16px; text-align: left; }
    .result-mark { grid-row: 1 / 4; align-self: center; }
    .result-card .overlay-title,.result-card .overlay-record { grid-column: 2 / 4; }
    .result-stats { grid-column: 2; }
    .result-progress,.result-daily { grid-column: 3; }
    .result-actions { grid-column: 2 / 4; grid-template-columns: repeat(4,1fr); }
    .win-reward,.result-rank { grid-column: 2 / 4; text-align: center; }
}

/* ---------- R5: «Гравированная ночная картотека» ---------- */
:root {
    --font-display: Georgia, 'Times New Roman', serif;
    --text: #f5efe1;
    --text-dim: #aebfb6;
    --gold-1: #f0d6a0;
    --gold-2: #c88d50;
    --gold-3: #865936;
    --panel: #102e29;
    --panel-border: rgba(211,157,91,.42);
    --panel-glow: 0 10px 28px rgba(2,14,12,.28), inset 0 1px rgba(255,255,255,.04);
    --accent: #d39d5b;
}
.ui-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 1em; height: 1em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; }
.ui-icon .fill { fill: currentColor; stroke: none; }
body { background-color: #071b19; }
#screen-game::before { opacity: .25; background: repeating-radial-gradient(ellipse at 50% 82%,transparent 0 72px,rgba(206,154,91,.12) 73px 74px,transparent 76px 116px); }
.brand { position: relative; }
.brand::after { content: ''; width: 78px; height: 1px; display: block; margin: 13px auto 0; background: linear-gradient(90deg,transparent,#c88d50,transparent); }
.brand-suits { width: 68px; height: 68px; margin: 0 auto 8px; display: grid; place-items: center; border: 1px solid rgba(211,157,91,.46); border-radius: 50%; color: #d9aa6f; background: #0c2622; box-shadow: inset 0 0 0 7px #102f29; }
.brand-suits .ui-icon { width: 38px; height: 38px; }
.menu-title { color: #f5efe1; background: none; filter: none; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.menu-subtitle { color: #b8c7be; letter-spacing: .18em; }
.cloud-chip { border: 1px solid rgba(211,157,91,.2); background: #0b231f; }
.daily-card,.mode-card,.journey-card,.league-card,.shop-card,.menu-stats,.seg {
    border-color: rgba(211,157,91,.34);
    background: #102e29;
    box-shadow: var(--panel-glow);
}
.meta-grid .league-card,.meta-grid .shop-card { border-color: rgba(211,157,91,.34); background: #102e29; }
.mode-card-primary { border-color: rgba(224,174,110,.58); background: linear-gradient(110deg,#173d35,#102e29); }
.mode-icon,.daily-icon { color: #e0b276; background: #0a2520; border-color: rgba(224,174,110,.35); }
.mode-icon .ui-icon,.daily-icon .ui-icon { width: 25px; height: 25px; }
.daily-card { position: relative; overflow: hidden; }
.daily-card::after { content: ''; position: absolute; width: 170px; height: 170px; right: -62px; bottom: -96px; border: 1px solid rgba(211,157,91,.17); border-radius: 50%; box-shadow: 0 0 0 24px rgba(211,157,91,.05),0 0 0 49px rgba(211,157,91,.035); pointer-events: none; }
.daily-topline { color: #e7c995; }
.daily-streak { display: inline-flex; align-items: center; gap: 4px; color: #d8a669; }
.daily-streak .ui-icon { width: 13px; height: 13px; }
.journey-level,.league-rank { color: #0c2823; background: #e4c18d; border-color: #f2d8a5; }
.league-icon,.shop-icon,.journey-badge,.shop-current { color: #d8a669; }
.league-icon .ui-icon,.shop-icon .ui-icon,.journey-badge .ui-icon,.shop-current .ui-icon { width: 1em; height: 1em; }
.seg-btn.active { color: #f3dcaf; background: #23483e; box-shadow: inset 0 0 0 1px rgba(224,174,110,.46); }
.icon-btn,.hud-item,.tool { border-color: rgba(224,174,110,.32); background: #0c2925; color: #f2eadc; box-shadow: inset 0 1px rgba(255,255,255,.04),0 6px 16px rgba(0,0,0,.18); }
.icon-btn .ui-icon { width: 20px; height: 20px; }
.hud-ico { color: #d8a669; }
.hud-ico .ui-icon { width: 15px; height: 15px; }
.table-wrap { border-color: rgba(211,157,91,.2); background: linear-gradient(180deg,rgba(5,18,16,.22),transparent 35%); }
.pile-tableau,.pile-stock,.pile-mini.is-empty { border-color: rgba(228,199,155,.25); }
.card.back { border-color: rgba(241,211,164,.6); background: repeating-linear-gradient(48deg,#315e52 0 7px,#24483f 7px 14px); box-shadow: 0 4px 10px rgba(0,0,0,.38),inset 0 0 0 3px rgba(240,214,160,.08); }
.card.back .back-pattern { border-color: rgba(241,211,164,.48); background: repeating-radial-gradient(circle at 50% 50%,rgba(241,211,164,.2) 0 1px,transparent 2px 7px); }
.tools { border-color: rgba(211,157,91,.2); background: #071d1a; backdrop-filter: none; }
.tool-ico { color: #e0b276; }
.tool-ico .ui-icon { width: 21px; height: 21px; }
.count-badge { background: #d39d5b; color: #102a25; }
.daily-gamebar { border-color: rgba(224,174,110,.32); background: #102e29; color: #b8c7be; }
.daily-gamebar b { color: #e6c795; }
.daily-chain { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-left: 1px solid rgba(224,174,110,.28); color: #b8c7be; }
.daily-chain b { color: #f2d8a5; }
.daily-game-missions { margin-left: 0; }
.daily-game-missions i { border-color: rgba(224,174,110,.25); background: #0b2420; color: #d4ae79; }
.daily-game-missions .ui-icon { width: 11px; height: 11px; }
.daily-game-missions i.done { color: #102a25; background: #d8bd83; border-color: #d8bd83; box-shadow: none; }
.overlay { background: rgba(3,14,12,.92); backdrop-filter: blur(3px); }
.overlay-card,.shop-overlay-card { border-color: rgba(224,174,110,.42); background: linear-gradient(180deg,#173d35,#0b2521); box-shadow: 0 24px 70px rgba(0,0,0,.62); }
.overlay-title { color: #f1d7a4; font-family: var(--font-display); font-weight: 600; }
.btn-primary { color: #132b26; background: linear-gradient(180deg,#eccf9a,#c99152); box-shadow: 0 5px 16px rgba(91,56,27,.35),inset 0 1px rgba(255,255,255,.42); }
.btn-secondary { background: #163b34; border-color: rgba(224,174,110,.35); }
.background-item,.face-style-item,.pattern-item,.badge-item,.leader-row,.result-stats div { background: #0e2b26; border-color: rgba(224,174,110,.23); }
.background-item.selected,.face-style-item.selected,.pattern-item.selected { border-color: #e1b878; box-shadow: 0 0 0 1px #e1b878; }
.shop-overlay-card > .btn { box-shadow: 0 -12px 24px #0b2521,0 5px 15px rgba(65,39,20,.35); }
.pattern-preview { color: #ead5ad; border-color: rgba(241,211,164,.48); background: repeating-linear-gradient(48deg,#315e52 0 6px,#24483f 6px 12px); }
.pattern-preview .ui-icon { width: 20px; height: 20px; }
.badge-item span { color: #d8a669; }
.badge-item span .ui-icon { width: 27px; height: 27px; }
.mission-dot { background: #0b2420; }
.mission-dot i,.xp-track i { background: linear-gradient(90deg,#b97843,#e6c58f); }
.daily-mission-labels i { display: flex; align-items: center; gap: 4px; }
.daily-mission-labels .ui-icon { width: 11px; height: 11px; color: #d8a669; }
.result-mission i { color: #d8a669; }
.result-mission i .ui-icon { width: 13px; height: 13px; }
.result-mission.done i { color: #102a25; background: #d8bd83; }
.overlay-emoji { color: #d8a669; }
.overlay-emoji .ui-icon { width: 62px; height: 62px; }
.splash-logo { color: #d8a669; }
.splash-logo .ui-icon { width: 62px; height: 62px; }
.splash-spin { border-color: rgba(224,174,110,.22); border-top-color: #d8a669; }
.pile-stock:not(.is-empty)::before { background: #e5c58f; color: #102a25; border-color: #315449; }
.tutorial-coach {
    border-color: rgba(224,174,110,.5);
    background: linear-gradient(110deg,#234b41,#102e29);
    box-shadow: 0 8px 24px rgba(4,19,16,.3);
}
.tutorial-step { background: #e5c58f; color: #17342d; }
.tutorial-copy span,.tutorial-skip { color: #c0cec6; }
.tutorial-target {
    outline-color: #f0d6a0 !important;
    box-shadow: 0 0 0 3px rgba(211,157,91,.32),0 10px 24px rgba(4,19,16,.38) !important;
}
@keyframes targetPulse {
    50% { outline-color: #d39d5b; box-shadow: 0 0 0 5px rgba(211,157,91,.2),0 10px 24px rgba(4,19,16,.38) !important; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .card.selected { transform: none; }
}

@media (min-width: 900px) and (min-height: 540px) {
    #screen-menu { width: min(1120px,100%); margin: auto; display: grid; grid-template-columns: minmax(260px,340px) minmax(440px,620px); grid-template-rows: auto auto auto auto; align-content: center; justify-content: center; column-gap: clamp(36px,6vw,80px); row-gap: 10px; overflow: hidden; }
    #screen-menu .brand { grid-column: 1; grid-row: 1 / 4; align-self: center; text-align: left; }
    #screen-menu .brand::after { margin-left: 0; }
    #screen-menu .brand-suits { margin-left: 0; }
    #screen-menu .menu-title { font-size: clamp(54px,6vw,76px); }
    #screen-menu .menu-actions { grid-column: 2; grid-row: 1; max-width: none; }
    #screen-menu .meta-grid { grid-column: 2; grid-row: 2; max-width: none; }
    #screen-menu .opt-block { grid-column: 2; grid-row: 3; max-width: none; margin-top: 2px; }
    #screen-menu .menu-stats { grid-column: 2; grid-row: 4; max-width: none; margin-top: 0; }
    #screen-menu .menu-help { grid-column: 1; grid-row: 4; justify-content: flex-start; }
    #screen-menu .menu-help { grid-column: 1 / 3; }
}

@media (max-width: 390px) {
    .brand-suits { width: 52px; height: 52px; }
    .brand-suits .ui-icon { width: 29px; height: 29px; }
    .daily-chain { padding-inline: 4px; font-size: 8px; }
    .daily-chain span { display: none; }
    .daily-game-missions i { width: 20px; height: 20px; }
}