.sol-game-heading { display: flex; align-items: end; justify-content: space-between; gap: 45px; padding-block: 42px 30px; }
.sol-game-heading h1 { margin-bottom: 12px; font-size: clamp(2.5rem, 5vw, 4.7rem); }
.sol-game-heading > div:first-child > p { max-width: 760px; margin-bottom: 0; color: var(--sol-muted); font-size: 1.04rem; }
.sol-game-facts { display: flex; flex: 0 0 auto; gap: 25px; margin: 0; padding: 17px 20px; border: 1px solid var(--sol-line); border-radius: 16px; background: rgba(255,255,255,.55); }
.sol-game-facts div { min-width: 72px; }
.sol-game-facts dt { color: var(--sol-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.sol-game-facts dd { margin: 2px 0 0; font-weight: 850; }

.sol-game-shell { --card-w: clamp(54px, 6.5vw, 92px); --card-h: calc(var(--card-w) * 1.42); position: relative; width: min(calc(100% - 18px), 1480px); margin: 0 auto 58px; overflow: hidden; border-radius: 24px; background: #0d3024; box-shadow: 0 22px 60px rgba(9,34,25,.25); }
.sol-game-toolbar { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 15px; border-bottom: 1px solid rgba(255,255,255,.1); background: #102c23; color: #fff; }
.sol-game-toolbar__primary { display: flex; flex-wrap: wrap; gap: 5px; }
.sol-game-toolbar button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 11px; background: transparent; color: #e6efea; cursor: pointer; font-size: .78rem; }
.sol-game-toolbar button:hover { background: rgba(255,255,255,.1); }
.sol-game-toolbar button:disabled { opacity: .35; cursor: not-allowed; }
.sol-game-toolbar button > span { color: #eccf87; font-size: 1rem; }
.sol-game-metrics { display: flex; flex: 0 0 auto; gap: 18px; color: #a9c0b5; font-size: .72rem; }
.sol-game-metrics span { display: grid; min-width: 55px; }
.sol-game-metrics strong { color: #fff; font-size: .95rem; font-variant-numeric: tabular-nums; }
.sol-resume { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: #fff7df; color: var(--sol-ink); }
.sol-resume > div:first-child { display: grid; }
.sol-resume span { color: var(--sol-muted); font-size: .8rem; }
.sol-resume > div:last-child { display: flex; gap: 8px; }

.sol-game-stage { position: relative; min-height: clamp(560px, 67vh, 900px); overflow: auto; overscroll-behavior: contain; background-color: #174f39; background-image: radial-gradient(circle at 30% 18%, rgba(255,255,255,.055), transparent 28%), linear-gradient(110deg, transparent 40%, rgba(0,0,0,.06)); color: #fff; transition: background .2s; }
.sol-game-stage[data-theme="dark"] { background-color: #202b2d; background-image: radial-gradient(circle at 30% 18%, rgba(255,255,255,.04), transparent 28%); }
.sol-game-stage[data-theme="neutral"] { background-color: #687267; background-image: radial-gradient(circle at 30% 18%, rgba(255,255,255,.055), transparent 28%); }
.sol-game-stage[data-card-size="100"] { --card-scale: 1; }
.sol-game-stage[data-card-size="115"] { --card-scale: 1.15; }
.sol-game-stage[data-card-size="130"] { --card-scale: 1.3; }
.sol-game-stage[data-card-size="145"] { --card-scale: 1.45; }
.sol-game-stage:not([data-card-size="auto"]) .sol-board { --card-w: clamp(52px, calc(5.7vw * var(--card-scale)), 116px); }
.sol-game-loading, .sol-game-error { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 30px; background: inherit; text-align: center; }
.sol-loader { display: block; width: 38px; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.24); border-top-color: #fff; border-radius: 50%; animation: sol-spin .8s linear infinite; }
@keyframes sol-spin { to { transform: rotate(360deg); } }
.sol-game-error p { max-width: 520px; color: #d5e2dc; }

.sol-board { --card-w: clamp(54px, 6.5vw, 92px); --card-h: calc(var(--card-w) * 1.42); --stack-gap: clamp(20px, 3vw, 34px); min-width: min-content; min-height: 580px; padding: clamp(12px, 2vw, 28px); user-select: none; touch-action: pan-y; }
.sol-board__top { display: flex; min-width: max-content; justify-content: space-between; gap: 35px; margin-bottom: clamp(24px, 5vw, 52px); }
.sol-board__group { display: flex; gap: clamp(7px, 1vw, 14px); }
.sol-board__tableau { display: grid; grid-template-columns: repeat(var(--columns, 7), var(--card-w)); gap: clamp(7px, 1.2vw, 18px); align-items: start; min-width: max-content; }
.sol-board--spider .sol-board__tableau { --columns: 10; gap: clamp(4px, .8vw, 12px); }
.sol-board--freecell .sol-board__tableau { --columns: 8; }
.sol-board--forty .sol-board__tableau { --columns: 10; }
.sol-board--scorpion .sol-board__tableau { --columns: 7; }
.sol-board--pyramid .sol-board__tableau, .sol-board--golf .sol-board__tableau { grid-template-columns: repeat(var(--columns, 7), var(--card-w)); }

.sol-pile { position: relative; width: var(--card-w); min-height: var(--card-h); border-radius: calc(var(--card-w) * .085); }
.sol-pile::before { content: attr(data-placeholder); position: absolute; inset: 0; display: grid; place-items: center; border: 2px dashed rgba(255,255,255,.22); border-radius: inherit; color: rgba(255,255,255,.33); font: 700 calc(var(--card-w) * .42)/1 Georgia, serif; }
.sol-pile[data-type="foundation"]::before { content: "A"; }
.sol-pile[data-type="cell"]::before { content: "Я"; font-family: Inter, sans-serif; font-size: calc(var(--card-w) * .18); }
.sol-pile[data-type="stock"]::before { content: "↻"; }
.sol-pile.is-target::before { border-color: #f2d27e; background: rgba(242,210,126,.12); }
.sol-pile.is-hint::before { animation: sol-pulse 1s ease-in-out 2; border-color: #fff0a6; }
@keyframes sol-pulse { 50% { box-shadow: 0 0 0 8px rgba(255,231,134,.26); } }

.sol-card { --card-offset: 0px; position: absolute; z-index: var(--z, 1); top: var(--card-offset); left: 0; display: grid; width: var(--card-w); height: var(--card-h); grid-template-rows: auto 1fr auto; border: 0; border-radius: calc(var(--card-w) * .085); padding: calc(var(--card-w) * .075); background: #fffdf8; color: #18221e; box-shadow: 0 2px 7px rgba(0,0,0,.32), inset 0 0 0 1px rgba(0,0,0,.12); font-family: Georgia, "Times New Roman", serif; text-align: left; cursor: pointer; touch-action: none; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.sol-card[data-color="red"] { color: #a5293b; }
.sol-card__corner { display: grid; justify-items: center; width: min-content; font-size: calc(var(--card-w) * .22); font-weight: 800; line-height: .9; }
.sol-card__corner small { font-size: calc(var(--card-w) * .19); }
.sol-card__corner--bottom { align-self: end; justify-self: end; transform: rotate(180deg); }
.sol-card__pip { align-self: center; justify-self: center; font-size: calc(var(--card-w) * .52); line-height: 1; }
.sol-card:hover, .sol-card:focus-visible { transform: translateY(-3px); box-shadow: 0 7px 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.1); }
.sol-card.is-selected { box-shadow: 0 0 0 4px #f4d273, 0 9px 18px rgba(0,0,0,.38); transform: translateY(-5px); }
.sol-card.is-hint { animation: sol-card-hint 1s ease-in-out 2; }
@keyframes sol-card-hint { 50% { transform: translateY(-9px); box-shadow: 0 0 0 5px #ffe8a1, 0 12px 20px rgba(0,0,0,.35); } }
.sol-card.is-dragging { opacity: .18; }
.sol-card[data-face-up="false"] { display: block; padding: calc(var(--card-w) * .07); background-color: #e8e3d7; color: transparent; }
.sol-card[data-face-up="false"]::before { content: ""; display: block; width: 100%; height: 100%; border: calc(var(--card-w) * .045) solid #f7efe0; border-radius: calc(var(--card-w) * .045); background-color: #1b5a43; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(196,154,76,.18) 0 2px, transparent 2px 7px); box-shadow: inset 0 0 0 2px rgba(8,37,27,.38); }
.sol-game-stage[data-card-back="diamond"] .sol-card[data-face-up="false"]::before { background-color: #235981; background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25% 75%, rgba(255,255,255,.18) 75%), linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25% 75%, rgba(255,255,255,.18) 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.sol-game-stage[data-card-back="night"] .sol-card[data-face-up="false"]::before { background-color: #24283c; background-image: radial-gradient(circle, #e3bf65 1px, transparent 2px); background-size: 10px 10px; }
.sol-game-stage[data-card-back="wine"] .sol-card[data-face-up="false"]::before { background-color: #7f2f3b; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(196,154,76,.16) 0 1px, transparent 1px 6px); }
.sol-pile[data-type="tableau"] .sol-card { --card-offset: calc(var(--i) * var(--stack-gap)); }
.sol-pile[data-type="tableau"] .sol-card[data-face-up="false"] { --stack-gap: clamp(11px, 1.7vw, 19px); }
.sol-pile[data-type="waste"] .sol-card { --card-offset: 0px; transform: translateX(calc(var(--fan, 0) * min(16px, 1.4vw))); }
.sol-pile[data-type="waste"] .sol-card:hover { transform: translateX(calc(var(--fan, 0) * min(16px, 1.4vw))) translateY(-3px); }
.sol-card-drag-ghost { position: fixed; z-index: 10000; pointer-events: none; opacity: .92; filter: drop-shadow(0 16px 16px rgba(0,0,0,.32)); }

.sol-board__message { position: sticky; z-index: 10; bottom: 14px; width: max-content; max-width: 90%; margin: 20px auto 0; padding: 8px 15px; border-radius: 999px; background: rgba(5,26,19,.82); color: #fff; font-size: .82rem; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.sol-mobile-toolbar { display: none; }
.sol-noscript { margin: 0; padding: 12px 18px; background: #fff1cf; color: #432f0b; }

.sol-modal { width: min(calc(100% - 24px), 570px); max-height: min(88vh, 780px); overflow: auto; border: 0; border-radius: 22px; padding: 0; background: var(--sol-paper); color: var(--sol-ink); box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.sol-modal::backdrop { background: rgba(3,20,14,.72); backdrop-filter: blur(4px); }
.sol-modal > form, .sol-modal:not(:has(> form)) { padding: 28px; }
.sol-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.sol-modal__head h2 { margin: 0; font-size: 1.65rem; }
.sol-modal__head button { border: 0; background: none; color: var(--sol-muted); cursor: pointer; font-size: 1.8rem; }
.sol-modal form > label { display: grid; gap: 7px; margin-bottom: 20px; font-weight: 750; }
.sol-modal select { min-height: 44px; border: 1px solid #c8d1cc; border-radius: 10px; padding: 8px 10px; background: #fff; }
.sol-modal fieldset { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 20px; border: 1px solid var(--sol-line); border-radius: 14px; padding: 13px 15px 15px; }
.sol-modal legend { padding: 0 5px; font-weight: 800; }
.sol-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.sol-modal__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 22px; }
.sol-win { text-align: center; }
.sol-win .sol-confetti { margin-bottom: 10px; color: var(--sol-burgundy); font-size: 2.4rem; letter-spacing: .3em; }
.sol-win h2 { margin: 10px 0 22px; font-size: 2.5rem; }
.sol-win dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.sol-win dl div { padding: 14px; border-radius: 13px; background: #eef3ef; }
.sol-win dt { color: var(--sol-muted); font-size: .72rem; text-transform: uppercase; }
.sol-win dd { margin: 3px 0 0; font-size: 1.25rem; font-weight: 900; }
.sol-win__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.sol-win__vk { margin: 26px -28px -28px; padding: 24px 28px 28px; background: #eef5ff; text-align: left; }
.sol-win__vk h3 { margin-bottom: 6px; font-family: Inter, sans-serif; font-size: 1rem; }
.sol-win__vk p { color: #4d647e; font-size: .84rem; }
.sol-win__vk > div { display: flex; align-items: center; gap: 15px; }
.sol-stats dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 0 0 18px; }
.sol-stats dl div { padding: 13px; border-radius: 12px; background: #eef3ef; }
.sol-stats dt { color: var(--sol-muted); font-size: .72rem; text-transform: uppercase; }
.sol-stats dd { margin: 2px 0 0; color: var(--sol-green-900); font-size: 1.18rem; font-weight: 900; }
.sol-stats p { color: var(--sol-muted); font-size: .84rem; }

.sol-game-content { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: 0 8%; margin-top: 80px; }
.sol-content-nav { grid-row: span 6; position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; border-left: 1px solid var(--sol-line); }
.sol-content-nav a { padding: 7px 0 7px 18px; color: var(--sol-muted); text-decoration: none; font-size: .86rem; }
.sol-content-nav a:hover { color: var(--sol-green-800); }
.sol-game-content > section { grid-column: 2; padding-bottom: 50px; margin-bottom: 45px; border-bottom: 1px solid var(--sol-line); }
.sol-game-content > section h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sol-game-content > section p, .sol-game-content > section li { color: #425149; font-size: 1.03rem; }
.sol-game-content > section ol { display: grid; gap: 12px; padding-left: 23px; }
.sol-daily-streak { min-width: 170px; padding: 18px; border-radius: 16px; background: var(--sol-green-100); color: var(--sol-green-900); }
.sol-daily-streak span { display: block; color: var(--sol-muted); font-size: .72rem; text-transform: uppercase; }
.sol-daily-streak strong { font-size: 1.15rem; }
.sol-daily-calendar { padding-block: 50px; }
.sol-calendar-full { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 720px; }
.sol-calendar-full > span { display: grid; min-height: 64px; place-items: center; border: 1px solid var(--sol-line); border-radius: 12px; background: var(--sol-paper); }
.sol-calendar-full > span.is-header { min-height: 30px; border: 0; background: transparent; color: var(--sol-muted); font-size: .75rem; }
.sol-calendar-full > span.is-complete { background: #deede4; color: var(--sol-green-800); font-weight: 900; }
.sol-calendar-full > span.is-today { border: 2px solid var(--sol-gold); }

.sol-game-shell.is-pseudo-fullscreen { position: fixed; z-index: 900; inset: 0; width: 100%; height: 100dvh; margin: 0; border-radius: 0; }
.sol-game-shell.is-pseudo-fullscreen .sol-game-stage { height: calc(100dvh - 64px); min-height: 0; }

@media (max-width: 1050px) {
    .sol-game-heading { align-items: start; flex-direction: column; gap: 20px; }
    .sol-game-toolbar { align-items: start; flex-direction: column; }
    .sol-game-metrics { width: 100%; justify-content: flex-end; }
    .sol-board { --card-w: clamp(52px, 8vw, 82px); }
    .sol-board--spider { --card-w: clamp(43px, 7.5vw, 72px); }
}

@media (max-width: 760px) {
    .sol-game-heading { padding-block: 32px 22px; }
    .sol-game-facts { width: 100%; justify-content: space-between; }
    .sol-game-shell { width: 100%; margin-bottom: 40px; border-radius: 0; }
    .sol-game-toolbar { min-height: 54px; align-items: center; flex-direction: row; padding-inline: 10px; }
    .sol-game-toolbar__primary { display: none; }
    .sol-game-metrics { justify-content: space-around; }
    .sol-game-stage { min-height: calc(100dvh - 190px); padding-bottom: 70px; }
    .sol-board { --card-w: clamp(49px, 12vw, 70px); --stack-gap: clamp(18px, 5vw, 28px); padding: 12px; }
    .sol-board--spider, .sol-board--forty { --card-w: clamp(38px, 9.2vw, 54px); --stack-gap: clamp(16px, 4vw, 23px); }
    .sol-board__top { gap: 20px; margin-bottom: 30px; }
    .sol-board__tableau { gap: 7px; }
    .sol-board--spider .sol-board__tableau, .sol-board--forty .sol-board__tableau { gap: 4px; }
    .sol-mobile-toolbar { position: absolute; z-index: 35; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(7,29,21,.9); backdrop-filter: blur(12px); }
    .sol-mobile-toolbar button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: #fff; font-size: .76rem; }
    .sol-mobile-toolbar button:active { background: rgba(255,255,255,.12); }
    .sol-resume { align-items: stretch; flex-direction: column; }
    .sol-resume > div:last-child { flex-wrap: wrap; }
    .sol-game-content { grid-template-columns: 1fr; margin-top: 55px; }
    .sol-content-nav { position: static; grid-row: auto; flex-direction: row; overflow-x: auto; border: 0; margin-bottom: 35px; padding-bottom: 8px; }
    .sol-content-nav a { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--sol-line); border-radius: 999px; }
    .sol-game-content > section { grid-column: 1; }
}

@media (max-width: 430px) {
    .sol-game-facts { gap: 9px; padding: 13px; }
    .sol-game-facts div { min-width: 0; }
    .sol-game-shell { --card-w: 48px; }
    .sol-board { --card-w: clamp(43px, 12.5vw, 55px); }
    .sol-board--spider, .sol-board--forty { --card-w: clamp(31px, 8.7vw, 41px); }
    .sol-card__corner { font-size: calc(var(--card-w) * .25); }
    .sol-card__pip { font-size: calc(var(--card-w) * .44); }
    .sol-win dl { grid-template-columns: 1fr 1fr 1fr; }
    .sol-win dd { font-size: 1rem; }
    .sol-win__vk > div { align-items: stretch; flex-direction: column; }
}
