:root {
  color-scheme: light;
  --ink: #17201f;
  --muted: #5c6b67;
  --paper: #fffdf7;
  --line: #d8e1d8;
  --felt: #0f6a58;
  --felt-deep: #072f2b;
  --gold: #d8a84a;
  --rose: #ad1f3f;
  --blue: #245e9c;
  --card: #fff8e8;
  --shadow: 0 22px 60px rgba(8, 24, 22, .22);
  --radius: 8px;
  --card-w: clamp(46px, 4.7vw, 66px);
  --card-h: calc(var(--card-w) * 1.42);
  --gap: clamp(6px, .55vw, 10px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 16% 0, rgba(216, 168, 74, .16), transparent 32%), linear-gradient(135deg, #f8f4e9, #ebe5d8); color: var(--ink); min-width: 320px; }
button, a { touch-action: manipulation; }
button { font: inherit; }
.skip-link { position: absolute; left: 12px; top: -60px; background: #fff; padding: 10px; z-index: 50; }
.skip-link:focus { top: 12px; }
.site-header { min-height: 74px; width: min(92vw, 1460px); margin: 18px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 18px; background: linear-gradient(135deg, rgba(14, 26, 26, .9), rgba(30, 42, 42, .82)); backdrop-filter: blur(18px); border: 1px solid rgba(255, 253, 247, .14); border-radius: 20px; box-shadow: 0 18px 40px rgba(12, 28, 26, .25), inset 0 1px 0 rgba(255,255,255,.18); position: sticky; top: 10px; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; color: #fffdf7; font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 2.5vw, 42px); font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand span:last-child::first-letter { color: #fffdf7; }
.brand span:last-child { background: linear-gradient(90deg, #fffdf7 0 58%, #d8a84a 58%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #ffe39a, #c8912f); color: #0b302a; font-size: 26px; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px rgba(0,0,0,.24); }
.top-nav, .site-footer nav { display: flex; gap: 10px; align-items: center; }
.top-nav a { color: rgba(255, 253, 247, .9); text-decoration: none; font-weight: 760; padding: 13px 18px; border-radius: 999px; white-space: nowrap; }
.top-nav a.active { background: linear-gradient(135deg, #43c98b, #10784d); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px rgba(0,0,0,.25); }
.site-footer a { color: var(--muted); text-decoration: none; font-weight: 650; }
.header-actions { display: flex; gap: 10px; }
.header-actions button { width: 46px; height: 46px; border-radius: 15px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fffdf7; font-size: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.game-shell { padding: clamp(12px, 2vw, 24px); max-width: 1480px; margin: 0 auto; }
.game-top { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 18px; align-items: end; }
.eyebrow { margin: 0 0 4px; color: var(--gold); font-weight: 850; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
h1 { font-size: clamp(28px, 4vw, 54px); line-height: 1; margin: 0 0 8px; letter-spacing: 0; }
h2 { font-size: clamp(19px, 2vw, 25px); margin: 0 0 12px; }
.intro { max-width: 760px; margin: 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); }
.toolbar { display: flex; gap: 10px; overflow: auto; padding: 14px 0 12px; scrollbar-width: thin; }
.toolbar button, .mobile-actions button, .win-card button { border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(27,38,39,.94), rgba(17,28,29,.94)); color: #fffdf7; border-radius: 14px; padding: 11px 15px; font-weight: 780; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 9px 20px rgba(10,22,20,.16); }
.toolbar button:first-child, .mobile-actions button:first-child { background: linear-gradient(135deg, #42d690, #0f8c57); border-color: rgba(255,255,255,.28); }
.toolbar button:hover, .mobile-actions button:hover, .stock:hover { border-color: var(--gold); }
.toolbar button:active, .mobile-actions button:active, .stock:active { transform: translateY(1px); }
.toolbar button[aria-pressed=false] { color: #7d343e; background: #fff1f1; }
.score-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.score-strip div { background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; }
.score-strip span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.score-strip strong { font-size: clamp(18px, 2.2vw, 25px); line-height: 1.15; }
.game-play-grid { display: grid; grid-template-columns: minmax(0, auto) minmax(260px, 330px); gap: 16px; align-items: start; justify-content: center; }
.table-wrap { overflow: auto; border-radius: 16px; box-shadow: var(--shadow); background: linear-gradient(135deg, #062824, #0c493f); border: 1px solid rgba(255, 253, 247, .16); max-width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 42px); justify-self: center; }
.felt { position: relative; width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 42px); min-height: calc(var(--card-h) * 7.4); padding: 18px 21px 46px; background: radial-gradient(circle at 12% 8%, rgba(255, 235, 154, .12), transparent 22%), radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .16), transparent 34%), radial-gradient(circle at 80% 18%, rgba(216, 168, 74, .12), transparent 28%), linear-gradient(135deg, #096149, #052d29); isolation: isolate; overflow: visible; }
.felt:before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1.4px), linear-gradient(90deg, rgba(255,255,255,.03), transparent 28%, rgba(255,255,255,.02)); background-size: 16px 16px, 100% 100%; pointer-events: none; }
.felt:after { content: "SolitaireDirect"; position: absolute; right: 22px; bottom: 16px; color: rgba(255, 253, 247, .1); font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 6vw, 82px); font-weight: 700; pointer-events: none; }
.stock-row { position: relative; display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; z-index: 1; }
.stock { width: var(--card-w); height: var(--card-h); border-radius: calc(var(--card-w) * .095); border: 2px solid rgba(255, 248, 232, .76); background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22), transparent 21%), radial-gradient(circle at 50% 50%, rgba(216, 168, 74, .7) 0 2px, transparent 3px), repeating-linear-gradient(45deg, #d8a84a, #d8a84a 7px, #0c473d 7px, #0c473d 14px); box-shadow: 0 12px 20px rgba(0, 0, 0, .28); position: relative; }
.stock[disabled] { opacity: .45; }
.stock span { position: absolute; right: -7px; top: -9px; display: grid; place-items: center; min-width: 25px; height: 25px; border-radius: 999px; background: #fff; color: var(--felt-deep); font-weight: 900; }
.finish-zone { display: flex; gap: 6px; min-height: var(--card-h); align-items: center; justify-content: flex-end; flex: 1; }
.columns { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(10, var(--card-w)); gap: var(--gap); align-items: start; justify-content: center; }
.column { min-height: var(--card-h); border-radius: 9px; position: relative; padding-bottom: calc(var(--card-h) * .36); }
.column.empty { outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: -2px; }
.card { width: 100%; height: var(--card-h); border-radius: calc(var(--card-w) * .105); background: radial-gradient(circle at 50% 36%, rgba(216, 168, 74, .13), transparent 34%), linear-gradient(145deg, #fffaf0, #f3e5ca); border: 1px solid rgba(83, 57, 24, .3); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .78), inset 0 0 0 5px rgba(216, 168, 74, .11), 0 6px 13px rgba(0, 0, 0, .26); position: absolute; left: 0; display: grid; grid-template-rows: .78fr 2.45fr .78fr; padding: calc(var(--card-w) * .07); user-select: none; touch-action: none; cursor: grab; transition: transform .16s ease, box-shadow .16s ease, outline-color .16s ease, opacity .12s ease; will-change: transform; overflow: hidden; }
.card:active { cursor: grabbing; }
.card:before { content: ""; position: absolute; inset: calc(var(--card-w) * .07); border: 1px solid rgba(111, 81, 36, .18); border-radius: calc(var(--card-w) * .06); pointer-events: none; }
.card:after { content: ""; position: absolute; inset: calc(var(--card-w) * .12); border-radius: calc(var(--card-w) * .045); background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 45%); pointer-events: none; }
.card-center:before, .card-center:after { content: ""; position: absolute; top: 7%; bottom: 7%; width: 18%; opacity: .78; background: radial-gradient(ellipse at 50% 15%, rgba(216,168,74,.9) 0 8%, transparent 9%), radial-gradient(ellipse at 42% 32%, rgba(216,168,74,.75) 0 7%, transparent 8%), radial-gradient(ellipse at 58% 50%, rgba(216,168,74,.7) 0 7%, transparent 8%), radial-gradient(ellipse at 42% 68%, rgba(216,168,74,.7) 0 7%, transparent 8%), linear-gradient(90deg, transparent 46%, rgba(216,168,74,.85) 47% 53%, transparent 54%); pointer-events: none; }
.card-center:before { left: 0; transform: rotate(-9deg); }
.card-center:after { right: 0; transform: scaleX(-1) rotate(-9deg); }
.card.face-down { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16), transparent 18%), radial-gradient(circle at 50% 50%, rgba(216, 168, 74, .82) 0 2px, transparent 3px), linear-gradient(135deg, #0d4d45, #071f1d); border-color: rgba(255, 255, 255, .38); box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .1), inset 0 0 0 10px rgba(216, 168, 74, .28), 0 4px 9px rgba(0, 0, 0, .25); }
.card.face-down:after { content: "SD"; margin: auto; color: rgba(255, 253, 247, .9); font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: calc(var(--card-w) * .25); letter-spacing: .03em; background: none; border-radius: 0; }
.card.selected, .card.hint { outline: 3px solid #ffd365; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 211, 101, .18), 0 13px 24px rgba(0, 0, 0, .24); }
.card.dragging { opacity: .22; transform: scale(.985); }
.corner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min-content; min-width: calc(var(--card-w) * .18); line-height: .86; font-family: Georgia, "Times New Roman", serif; font-weight: 900; }
.corner-bottom { align-self: end; justify-self: end; transform: rotate(180deg); }
.rank { font-size: calc(var(--card-w) * .23); letter-spacing: 0; }
.suit { font-size: calc(var(--card-w) * .19); margin-top: 2px; }
.card-center { position: relative; z-index: 1; align-self: stretch; justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); place-items: center; margin: 0 calc(var(--card-w) * .035); }
.pip { font-size: calc(var(--card-w) * .2); line-height: 1; opacity: .96; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)); font-family: Georgia, "Times New Roman", serif; }
.pip-invert { transform: rotate(180deg); }
.pip-ace { grid-column: 1 / -1; grid-row: 1 / -1; font-size: calc(var(--card-w) * .58); }
.pip-top { grid-column: 2; grid-row: 1; }
.pip-bottom { grid-column: 2; grid-row: 5; transform: rotate(180deg); }
.pip-middle { grid-column: 2; grid-row: 3; }
.pip-top-left { grid-column: 1; grid-row: 1; }
.pip-top-right { grid-column: 3; grid-row: 1; }
.pip-upper-middle { grid-column: 2; grid-row: 2; }
.pip-upper-middle-left { grid-column: 1; grid-row: 2; }
.pip-upper-middle-right { grid-column: 3; grid-row: 2; }
.pip-middle-left { grid-column: 1; grid-row: 3; }
.pip-middle-right { grid-column: 3; grid-row: 3; }
.pip-lower-middle { grid-column: 2; grid-row: 4; transform: rotate(180deg); }
.pip-lower-middle-left { grid-column: 1; grid-row: 4; transform: rotate(180deg); }
.pip-lower-middle-right { grid-column: 3; grid-row: 4; transform: rotate(180deg); }
.pip-bottom-left { grid-column: 1; grid-row: 5; transform: rotate(180deg); }
.pip-bottom-right { grid-column: 3; grid-row: 5; transform: rotate(180deg); }
.court-card { grid-template-columns: 1fr; grid-template-rows: 1fr; margin: 0 calc(var(--card-w) * .02); }
.court-frame { width: 82%; height: 98%; border-radius: calc(var(--card-w) * .085); border: 1px solid rgba(216, 168, 74, .48); background: radial-gradient(circle at 50% 18%, rgba(216, 168, 74, .24), transparent 32%), linear-gradient(145deg, rgba(255,255,255,.4), rgba(216,168,74,.12)); display: grid; place-items: center; grid-template-rows: 1fr 1.35fr 1fr; box-shadow: inset 0 0 0 2px rgba(255,255,255,.32); }
.court-crown { color: var(--gold); font-size: calc(var(--card-w) * .2); align-self: end; }
.court-letter { font-family: Georgia, "Times New Roman", serif; font-size: calc(var(--card-w) * .36); font-weight: 900; line-height: 1; }
.court-suit { font-size: calc(var(--card-w) * .24); align-self: start; }
.side-widgets { display: grid; gap: 14px; position: sticky; top: 104px; }
.side-card { border-radius: 18px; background: linear-gradient(145deg, rgba(25,37,38,.9), rgba(50,59,58,.78)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 16px 36px rgba(8,24,22,.22), inset 0 1px 0 rgba(255,255,255,.14); color: #fffdf7; padding: 14px; overflow: hidden; }
.side-title { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.side-title span { color: var(--gold); font-size: 22px; }
.side-title strong { font-size: 17px; }
.side-title em { margin-left: auto; font-size: 12px; color: rgba(255,253,247,.72); font-style: normal; }
.daily-visual { min-height: 132px; border-radius: 14px; padding: 16px; display: grid; align-content: end; background: linear-gradient(180deg, rgba(7,35,42,.1), rgba(7,18,20,.75)), url("/assets/lancement-prochain-solitairedirect.png") center/cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.daily-medal { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #ffd66f; display: grid; place-items: center; color: #ffd66f; font-size: 25px; margin-bottom: 8px; }
.daily-visual span { font-size: 13px; color: rgba(255,253,247,.86); }
.daily-visual strong { font-size: 30px; line-height: 1; }
.daily-card button { width: 100%; margin-top: 12px; border: 0; border-radius: 999px; padding: 14px 16px; color: #fff; font-weight: 850; background: linear-gradient(135deg, #44d890, #0b8751); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 22px rgba(0,0,0,.25); }
.compact-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-stats .side-title { grid-column: 1 / -1; margin-bottom: 2px; }
.mini-stat { min-height: 72px; border-radius: 12px; background: linear-gradient(145deg, rgba(255,253,247,.9), rgba(232,243,235,.86)); color: #12211f; padding: 12px; display: grid; align-content: center; }
.mini-stat span { color: #54615d; font-size: 12px; }
.mini-stat strong { font-size: 22px; line-height: 1.1; }
.side-leaderboard { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.side-leaderboard li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,253,247,.9); color: #15221f; }
.side-leaderboard span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #ffd66f, #d89a2d); font-weight: 900; }
.side-leaderboard strong { font-size: 13px; }
.side-leaderboard em { font-style: normal; color: #32413d; font-variant-numeric: tabular-nums; }
.red { color: var(--rose); }
.black { color: #202a28; }
.drag-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: visible; }
.drag-stack { position: absolute; width: var(--card-w); pointer-events: none; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .28)); }
.drag-stack .card { position: absolute; width: var(--card-w); }
.mobile-actions { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; }
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.panel { background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.panel p { color: var(--muted); margin-top: 0; }
.leaderboard { padding-left: 22px; margin: 8px 0 0; }
.leaderboard li { padding: 5px 0; color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.stats-grid div { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: #fff; }
.stats-grid dt { color: var(--muted); font-size: 12px; font-weight: 750; }
.stats-grid dd { margin: 2px 0 0; font-size: 20px; font-weight: 900; }
.seo-copy { max-width: 850px; margin: 24px auto 36px; padding: 0 18px; color: var(--muted); }
.seo-copy h2 { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; background: #142c28; color: #fff; padding: 12px 16px; border-radius: 999px; box-shadow: var(--shadow); z-index: 60; transition: .2s ease; max-width: min(92vw, 520px); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.win-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(12, 32, 28, .72); z-index: 80; padding: 20px; }
.win-modal[hidden] { display: none; }
.win-card { position: relative; overflow: hidden; background: #fffdf8; border-radius: 12px; padding: 28px; max-width: 430px; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
.sparkles { position: absolute; inset: 0; background: radial-gradient(circle at 15% 25%, #ffd365 0 5px, transparent 6px), radial-gradient(circle at 85% 20%, #ba3450 0 4px, transparent 5px), radial-gradient(circle at 75% 82%, #245e9c 0 5px, transparent 6px); animation: twinkle 1s ease-in-out infinite alternate; pointer-events: none; }
.win-card h2, .win-card p, .win-card button { position: relative; }
.site-footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; padding: 22px clamp(14px, 4vw, 40px); background: #fffdf8; color: var(--muted); flex-wrap: wrap; }
.legal-page { max-width: 860px; margin: 0 auto; padding: 36px 18px 60px; }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.65; }
.legal-page a { color: var(--felt-deep); font-weight: 750; }
body.info-page { min-height: 100svh; background: #f7f6f2; color: #17201f; }
.info-page .legal-page { width: min(860px, calc(100% - 36px)); padding: 40px 0 56px; }
.info-page .legal-page h1 { margin: 0 0 24px; color: #17201f; font-size: 34px; line-height: 1.15; }
.info-page .legal-page h2 { margin: 28px 0 9px; color: #17201f; font-size: 20px; line-height: 1.3; }
.info-page .legal-page p, .info-page .legal-page li { margin-bottom: 16px; color: #465751; line-height: 1.7; }
.info-page .legal-page ul { padding-left: 22px; }
.info-page .legal-page a { color: #07583e; text-decoration: underline; text-underline-offset: 3px; }
.info-page .legal-page { max-width: 920px; }
.info-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; color: #61716b; font-size: 13px; }
.info-breadcrumb a { font-weight: 600 !important; }
.info-page .legal-page h1 { max-width: 780px; margin-bottom: 14px; font-size: clamp(30px, 4vw, 42px); }
.info-intro { max-width: 760px; margin: 0 0 30px !important; color: #34443e !important; font-size: 18px; line-height: 1.65 !important; }
.info-updated { margin: 0 0 30px !important; color: #64736d !important; font-size: 13px; }
.info-page .legal-page h2 { margin-top: 36px; padding-top: 20px; border-top: 1px solid #d9dfd8; font-size: 22px; }
.info-page .legal-page h3 { margin: 24px 0 8px; color: #1b2b25; font-size: 17px; line-height: 1.4; }
.info-page .legal-page p, .info-page .legal-page li { max-width: 78ch; font-size: 16px; line-height: 1.78; }
.info-page .legal-page ul, .info-page .legal-page ol { padding-left: 23px; }
.info-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 26px 0 34px; border-top: 1px solid #d9dfd8; }
.info-facts > div { display: grid; grid-template-columns: minmax(110px, .75fr) 1.25fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid #d9dfd8; }
.info-facts dt { color: #53635c; font-size: 14px; font-weight: 700; }
.info-facts dd { min-width: 0; margin: 0; color: #1d2b26; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.info-callout { margin: 26px 0; padding: 17px 20px; border-left: 3px solid #287357; background: #e9f0ea; color: #273b33; }
.info-callout p { margin: 0 0 8px !important; }
.info-callout p:last-child { margin-bottom: 0 !important; }
.info-page .legal-page .info-callout a { color: #064f38; }
.info-page .legal-page table { width: 100%; margin: 22px 0 28px; border-collapse: collapse; text-align: left; }
.info-page .legal-page th, .info-page .legal-page td { padding: 12px; border-bottom: 1px solid #d9dfd8; vertical-align: top; line-height: 1.6; }
.info-page .legal-page th { color: #263831; font-size: 14px; }
.info-page .legal-page td { color: #465751; }
.info-page .legal-page .info-toc { margin: 24px 0 34px; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.info-page .legal-page .info-toc li { break-inside: avoid; margin: 0 0 8px; font-size: 14px; }
.info-page .legal-page .info-toc a { font-weight: 600; }
.info-page .legal-page .contact-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 26px 0; }
.info-page .legal-page .contact-options h3 { margin-top: 0; }
.info-page .legal-page .contact-options section { padding: 18px 0; border-top: 1px solid #d9dfd8; }
.info-page .legal-page .contact-options p { margin-bottom: 8px; }
.info-page .legal-page .source-links { font-size: 14px; }
.info-page .legal-page code { padding: 2px 5px; border: 1px solid #d9dfd8; background: #f0f2ed; color: #20342a; font-size: .9em; overflow-wrap: anywhere; }
.info-page .site-footer { width: 100%; max-width: none; background: #fffdf8; }
.consent-preferences { margin: 28px 0; padding: 20px; border: 1px solid #ccd7ce; border-radius: 8px; background: #fffdf8; }
.consent-preferences h2 { margin-top: 0 !important; }
.consent-preferences label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid #e3e8e1; }
.consent-preferences label small { display: block; margin-top: 4px; color: #5b6c64; }
.consent-preferences input { width: 22px; height: 22px; accent-color: #176c4f; flex: none; }
.consent-preferences button { min-height: 44px; padding: 9px 14px; border: 1px solid #07583e; border-radius: 6px; background: #07583e; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.consent-preferences #consentStatus { margin: 12px 0 0; }
@keyframes twinkle { from { transform: scale(1); opacity: .55; } to { transform: scale(1.08); opacity: .95; } }
@media (max-width: 1380px) {
  .game-play-grid { grid-template-columns: minmax(0, auto) minmax(250px, 320px); }
}
@media (max-width: 1120px) {
  .site-header { width: calc(100% - 20px); margin-top: 10px; }
  .top-nav { overflow: auto; flex: 1; justify-content: center; }
  .top-nav a { padding: 11px 14px; }
  .header-actions { display: none; }
}
@media (max-width: 640px) {
  .info-facts { grid-template-columns: 1fr; }
  .info-facts > div { grid-template-columns: minmax(82px, .7fr) minmax(0, 1.3fr); }
  .info-page .legal-page .info-toc { columns: 1; }
  .info-page .legal-page .contact-options { grid-template-columns: 1fr; }
  .info-page .legal-page table { display: block; overflow: visible; }
  .info-page .legal-page thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .info-page .legal-page tbody, .info-page .legal-page tr, .info-page .legal-page td { display: block; width: 100%; }
  .info-page .legal-page tr { padding: 10px 0; border-bottom: 1px solid #d9dfd8; }
  .info-page .legal-page td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 5px 0; border: 0; font-size: 13px; }
  .info-page .legal-page td::before { content: attr(data-label); color: #263831; font-size: 12px; font-weight: 700; }
}
@media (max-width: 900px) {
  :root { --card-w: 52px; --gap: 5px; }
  .site-header { height: 58px; }
  .top-nav { gap: 10px; font-size: 14px; }
  .game-top { grid-template-columns: 1fr; }
  .game-play-grid { display: block; }
  .side-widgets { position: static; margin-top: 14px; grid-template-columns: 1fr; }
  .toolbar { padding-top: 12px; }
  .toolbar button { padding: 9px 10px; }
  .score-strip { grid-template-columns: repeat(5, minmax(60px, 1fr)); overflow: auto; }
  .score-strip div { min-width: 68px; padding: 7px; }
  .table-wrap { max-width: 100%; }
  .felt { width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 28px); min-height: calc(var(--card-h) * 8.2); padding: 14px 14px 42px; }
  .columns { gap: 5px; }
  .panels { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .mobile-actions { display: grid; }
  .site-footer { display: block; }
  .site-footer nav { margin-top: 10px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  :root { --card-w: 48px; --gap: 4px; }
  .brand span:last-child { font-size: 16px; }
  .top-nav a:first-child { display: none; }
  .game-shell { padding: 10px 6px; }
  .intro { font-size: 14px; }
  .toolbar { gap: 6px; }
  .toolbar button { font-size: 13px; padding: 8px 9px; }
  .score-strip { gap: 5px; }
  .stock-row { margin-bottom: 12px; }
  .felt { width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 24px); padding: 12px 12px 38px; }
  .side-card { border-radius: 15px; padding: 12px; }
  .compact-stats { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .panel { padding: 13px; }
  .finish-pile { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* SolitaireDirect premium game surface */
:root {
  --card-w: clamp(62px, 5.35vw, 86px);
  --card-h: calc(var(--card-w) * 1.43);
  --gap: clamp(5px, .5vw, 9px);
  --gold: #e1b552;
  --felt: #075442;
  --felt-deep: #032f29;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  background:
    linear-gradient(rgba(255, 255, 255, .82), rgba(250, 248, 242, .94)),
    repeating-linear-gradient(90deg, #f5f2ea 0 1px, #fbfaf6 1px 5px);
}

.site-header {
  min-height: 70px;
  width: min(calc(100% - 36px), 1530px);
  margin-top: 14px;
  padding: 9px 16px 9px 20px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(48, 59, 61, .97), rgba(23, 33, 35, .98)),
    #172123;
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 11px 25px rgba(12, 24, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.brand {
  gap: 11px;
  font-size: clamp(25px, 2.25vw, 38px);
  text-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

.brand > span:last-child {
  color: #fffdf7;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.brand > span:last-child > span { color: #edc466; }

.brand-mark {
  width: 42px;
  height: 42px;
  color: #1b302d;
  background: linear-gradient(160deg, #ffe89e, #d89c31 75%);
}

.top-nav { gap: 6px; }

.top-nav a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border-radius: 999px;
  font-size: 14px;
}

.top-nav a span { font-size: 20px; color: #f0ce73; }

.top-nav a.active {
  background: linear-gradient(180deg, #31765f, #155844);
  border: 1px solid rgba(104, 228, 169, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 7px 17px rgba(0, 0, 0, .24);
}

.top-nav a.active span { color: #fff; }

.header-actions button {
  border-radius: 14px;
  background: rgba(8, 20, 22, .28);
}

.game-shell {
  max-width: 1530px;
  padding: 12px 18px 22px;
}

.game-play-grid {
  grid-template-columns: minmax(0, auto) minmax(270px, 320px);
  gap: 15px;
  align-items: stretch;
}

.game-stage { min-width: 0; }

.table-wrap {
  max-width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 46px);
  border-radius: 15px;
  border: 2px solid #c58b2d;
  outline: 1px solid rgba(255, 232, 151, .68);
  outline-offset: -5px;
  background: #063e34;
  box-shadow: 0 15px 34px rgba(8, 28, 25, .3), inset 0 0 0 4px rgba(55, 28, 5, .5);
}

.felt {
  width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 42px);
  min-height: clamp(590px, 70vh, 730px);
  padding: 21px 21px 36px;
  background:
    radial-gradient(ellipse at 12% 2%, rgba(255, 255, 255, .11), transparent 27%),
    linear-gradient(105deg, transparent 47%, rgba(255, 255, 255, .025) 48%, transparent 49%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .022) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #087057 0%, #04513f 48%, #02382f 100%);
  box-shadow: inset 0 0 55px rgba(0, 0, 0, .24);
}

.felt:before {
  background:
    linear-gradient(122deg, transparent 0 72%, rgba(255, 255, 255, .025) 72.3% 72.6%, transparent 73%),
    repeating-linear-gradient(14deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 4px);
  background-size: 100% 100%, 8px 8px;
  opacity: .9;
}

.felt:after {
  content: "♠";
  right: 50%;
  bottom: 8%;
  transform: translateX(50%);
  color: rgba(213, 179, 85, .065);
  font-size: 160px;
}

.stock-row {
  justify-content: flex-start;
  align-items: center;
  min-height: var(--card-h);
  margin-bottom: 26px;
}

.stock {
  flex: 0 0 auto;
  border: 0;
  background: #f8ead0 url("/assets/card-back-v1.svg") center / cover no-repeat;
  box-shadow: 3px 4px 0 #e9dcc5, 5px 7px 0 #c6b69c, 0 12px 18px rgba(0, 0, 0, .32);
}

.stock:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}

.stock span {
  right: -9px;
  top: -9px;
  border: 2px solid #dfaf47;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

.empty-stock {
  width: var(--card-w);
  height: var(--card-h);
  display: grid;
  place-items: center;
  margin-left: 10px;
  border: 2px dashed rgba(225, 239, 220, .48);
  border-radius: calc(var(--card-w) * .09);
  color: rgba(220, 238, 219, .2);
  font-size: calc(var(--card-w) * .5);
}

.finish-zone {
  margin-left: auto;
  gap: 5px;
  min-width: 0;
}

.finish-pile {
  width: calc(var(--card-w) * .49);
  height: calc(var(--card-h) * .62);
  border: 2px solid rgba(205, 225, 204, .32);
  background: rgba(5, 63, 51, .42);
  color: rgba(225, 196, 109, .86);
  font-size: calc(var(--card-w) * .22);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .12);
}

.columns { align-items: start; }

.column {
  min-height: calc(var(--card-h) * 2.1);
  border-radius: calc(var(--card-w) * .09);
}

.column.empty {
  outline: 2px dashed rgba(222, 239, 219, .38);
  background: rgba(0, 0, 0, .035);
}

.card {
  height: var(--card-h);
  border-radius: calc(var(--card-w) * .075);
  padding: calc(var(--card-w) * .075);
  grid-template-rows: .68fr 2.65fr .68fr;
  border: 1px solid rgba(171, 116, 27, .7);
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .8) 0 1px, transparent 1.5px),
    repeating-linear-gradient(118deg, rgba(135, 95, 28, .025) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #fffdf3, #f5ead5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .95),
    inset 0 0 13px rgba(170, 111, 22, .09),
    0 5px 9px rgba(0, 0, 0, .3);
  transition: transform 150ms cubic-bezier(.2, .75, .25, 1), box-shadow 150ms ease, opacity 120ms ease;
}

.card:before {
  inset: calc(var(--card-w) * .055);
  border-color: rgba(205, 155, 58, .34);
}

.card:after {
  inset: auto 8% 4% 8%;
  height: 20%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(221, 170, 57, .35), transparent 62%),
    linear-gradient(120deg, transparent 35%, rgba(227, 183, 79, .22) 36% 38%, transparent 39%);
}

.card.face-down {
  background: #f8ead0 url("/assets/card-back-v1.svg") center / cover no-repeat;
  border-color: rgba(245, 217, 135, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), 0 4px 8px rgba(0, 0, 0, .33);
}

.card.face-down:before,
.card.face-down:after { display: none; }

.corner {
  align-items: flex-start;
  line-height: .79;
  font-family: Georgia, "Times New Roman", serif;
}

.corner-bottom { align-items: flex-start; }

.rank { font-size: calc(var(--card-w) * .25); }
.suit { font-size: calc(var(--card-w) * .17); margin: 3px 0 0 2px; }

.red { color: #c51d2c; }
.black { color: #101a1b; }

.card-center:before,
.card-center:after {
  width: 23%;
  top: 2%;
  bottom: 2%;
  opacity: .8;
  background:
    radial-gradient(ellipse at 50% 12%, #d9a63e 0 8%, transparent 9%),
    radial-gradient(ellipse at 32% 27%, #dfb34c 0 7%, transparent 8%),
    radial-gradient(ellipse at 62% 42%, #d5a039 0 7%, transparent 8%),
    radial-gradient(ellipse at 35% 58%, #dfb34c 0 7%, transparent 8%),
    radial-gradient(ellipse at 58% 74%, #d5a039 0 7%, transparent 8%),
    linear-gradient(90deg, transparent 46%, #d6a43f 47% 53%, transparent 54%);
}

.pip { font-size: calc(var(--card-w) * .22); }
.pip-ace { font-size: calc(var(--card-w) * .62); filter: drop-shadow(0 2px 0 rgba(216, 165, 57, .5)); }

.court-frame {
  width: 92%;
  height: 104%;
  border: 0;
  border-radius: calc(var(--card-w) * .045);
  background-color: transparent;
  background-image: url("/assets/court-portraits-v3.webp");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  box-shadow: none;
}

.rank-11 .court-frame { background-position: left center; }
.rank-12 .court-frame { background-position: center center; }
.rank-13 .court-frame { background-position: right center; }
.court-frame > * { display: none; }

.card.selected,
.card.hint {
  outline: 3px solid #ffe07c;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 218, 108, .23), 0 13px 24px rgba(0, 0, 0, .3);
}

.drag-stack {
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .42));
  transform-origin: top left;
}

.control-dock {
  min-height: 78px;
  margin-top: 12px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(44, 55, 56, .98), rgba(20, 30, 32, .99));
  box-shadow: 0 11px 25px rgba(12, 24, 24, .23), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.dock-primary { padding-right: 11px; border-right: 1px solid rgba(255, 255, 255, .18); }

.control-dock button {
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.control-dock .primary-action {
  min-height: 52px;
  padding: 0 19px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #32c982, #068d55);
  border: 1px solid #57e3a0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 8px 16px rgba(0, 0, 0, .3);
  font-weight: 850;
  white-space: nowrap;
}

.primary-action span { font-size: 28px; font-weight: 300; }

.dock-tools {
  display: flex;
  justify-content: space-around;
  min-width: 0;
}

.dock-tools button {
  min-width: 48px;
  min-height: 55px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 3px 6px;
  border-radius: 8px;
}

.dock-tools button:hover { background: rgba(255, 255, 255, .08); }
.dock-tools button > span { font-size: 25px; line-height: 1; }
.dock-tools small { font-size: 10px; line-height: 1.1; }
.dock-tools button:nth-child(n+5) { display: none; }

.score-strip {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(3, 14, 16, .3);
}

.score-strip div {
  min-width: 67px;
  padding: 2px 12px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  color: #fff;
}

.score-strip div:last-child { border-right: 0; }
.score-strip span { color: rgba(255, 255, 255, .7); font-size: 10px; }
.score-strip strong { color: #fff; font-size: 18px; }
.score-secondary { display: none; }

.side-widgets {
  gap: 12px;
  position: static;
  align-content: start;
}

.side-card {
  border-radius: 18px;
  padding: 13px;
  background: linear-gradient(145deg, rgba(67, 77, 78, .97), rgba(34, 44, 46, .98));
  border-color: rgba(255, 255, 255, .23);
  box-shadow: 0 13px 28px rgba(8, 24, 22, .25), inset 0 1px 0 rgba(255, 255, 255, .17);
}

.side-title { margin-bottom: 10px; }
.side-title strong { font-size: 16px; }

.daily-visual {
  min-height: 130px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, transparent 15%, rgba(3, 17, 20, .86)),
    url("/assets/daily-landscape-v1.webp") center / cover no-repeat,
    linear-gradient(145deg, #6ba7bc, #153c38);
}

.daily-card button { border-radius: 999px; }

.mini-stat {
  min-height: 66px;
  border-radius: 11px;
  background: linear-gradient(145deg, #eff9f4, #fffaf0);
}

.side-leaderboard li { border-radius: 7px; }

.mobile-actions { display: none; }

.panels,
.seo-copy,
.site-footer { position: relative; }

@media (max-width: 1370px) {
  :root { --card-w: clamp(59px, 5.25vw, 72px); --gap: 5px; }
  .game-play-grid { grid-template-columns: minmax(0, auto) minmax(250px, 290px); }
  .control-dock { grid-template-columns: auto minmax(290px, 1fr) auto; gap: 7px; }
  .dock-tools button { min-width: 40px; padding-inline: 3px; }
}

@media (max-width: 1040px) {
  .site-header { width: calc(100% - 18px); margin-top: 9px; min-height: 60px; }
  .top-nav a { padding: 10px; }
  .top-nav a span { font-size: 18px; }
  .game-play-grid { display: block; }
  .table-wrap { max-width: 100%; margin: 0 auto; }
  .side-widgets {
    margin-top: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .control-dock { grid-template-columns: auto minmax(280px, 1fr) auto; }
}

@media (max-width: 760px) {
  :root { --card-w: clamp(36px, 9.1vw, 48px); --gap: 3px; }
  body { background: #063c33; }
  .site-header {
    position: sticky;
    top: 6px;
    padding: 7px 9px;
    border-radius: 16px;
  }
  .brand { font-size: clamp(20px, 6vw, 28px); }
  .brand-mark { width: 36px; height: 36px; font-size: 23px; }
  .top-nav { margin-left: auto; flex: 0 0 auto; }
  .top-nav a { display: none; }
  .top-nav a.active,
  .top-nav a:nth-child(3),
  .top-nav a:nth-child(4) {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 0;
  }
  .top-nav a span { font-size: 19px; }
  .header-actions { display: none; }
  .game-shell { padding: 8px 5px 18px; }
  .table-wrap {
    border-radius: 11px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .felt {
    width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 20px);
    min-height: 610px;
    padding: 12px 10px 30px;
  }
  .stock-row { margin-bottom: 18px; }
  .empty-stock { margin-left: 5px; }
  .finish-zone { gap: 2px; }
  .finish-pile { width: calc(var(--card-w) * .41); border-width: 1px; }
  .rank { font-size: calc(var(--card-w) * .29); }
  .suit { font-size: calc(var(--card-w) * .2); }
  .pip { font-size: calc(var(--card-w) * .24); }
  .control-dock {
    position: sticky;
    bottom: 5px;
    z-index: 18;
    min-height: 70px;
    grid-template-columns: auto 1fr;
    padding: 8px;
    border-radius: 17px;
  }
  .control-dock .primary-action { min-height: 50px; padding: 0 14px; font-size: 14px; }
  .dock-tools button { min-width: 45px; }
  .dock-tools button:nth-child(1),
  .dock-tools button:nth-child(5),
  .dock-tools button:nth-child(6),
  .dock-tools button:nth-child(7),
  .dock-tools button:nth-child(8) { display: none; }
  .score-strip { display: none; }
  .mobile-actions { display: none; }
  .side-widgets {
    display: flex;
    overflow-x: auto;
    gap: 9px;
    padding: 4px 1px 12px;
    scroll-snap-type: x mandatory;
  }
  .side-card {
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: start;
  }
  .panels { margin-top: 6px; }
  .panel { background: #fffdf8; }
  .seo-copy,
  .site-footer { background: #fffdf8; }
}

@media (max-width: 430px) {
  :root { --card-w: 35px; --gap: 2px; }
  .brand { gap: 7px; font-size: 20px; }
  .brand-mark { width: 33px; height: 33px; }
  .top-nav a:nth-child(3) { display: none; }
  .felt { width: calc((var(--card-w) * 10) + (var(--gap) * 9) + 20px); min-height: 570px; }
  .control-dock { grid-template-columns: minmax(128px, auto) 1fr; }
  .dock-primary { padding-right: 7px; }
  .control-dock .primary-action { padding: 0 10px; font-size: 13px; }
  .primary-action span { font-size: 22px; }
  .dock-tools button { min-width: 42px; }
  .dock-tools button > span { font-size: 23px; }
}