#canada-solitaire{--red:#a51d2d;--cream:#f7f0df;--ink:#17231f;--felt:#194c46;--gold:#d6b66c;--cw:clamp(48px,9.4vw,108px);--ch:calc(var(--cw)*1.4);box-sizing:border-box;color:var(--cream);font-family:Georgia,serif}
#canada-solitaire *{box-sizing:border-box}
.solitaire-app{min-height:720px;padding:clamp(10px,3vw,34px);background:radial-gradient(circle at 50% 20%,#28675e,var(--felt) 55%,#103934)}
#canada-solitaire:fullscreen{width:100vw;height:100vh;min-height:100vh;overflow:auto}
.game-header{display:flex;justify-content:space-between;align-items:end;gap:16px;max-width:1100px;margin:auto}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font:700 11px system-ui;margin:0;color:#e4c988}
.game-header h2{margin:.2rem 0;font-size:clamp(25px,4vw,44px);color:var(--cream)}
.stats{display:flex;gap:8px;font-family:system-ui}
.stats span,.toolbar{background:#0a2926aa;border:1px solid #ffffff25;border-radius:12px;padding:9px 13px}
.toolbar{max-width:1100px;margin:18px auto;display:flex;gap:9px;align-items:center}
.toolbar button,.toolbar select{border:1px solid #f2dcc0;background:var(--cream);color:#55111a;border-radius:8px;padding:8px 12px;font-weight:700}
.toolbar button:hover{background:#fff}
.toolbar button:focus-visible,.card:focus-visible{outline:3px solid #ffd76a;outline-offset:2px}
.toolbar label{margin-left:auto;font:600 14px system-ui}
.board{max-width:1100px;margin:auto;overflow-x:auto;padding-bottom:8px}
.top-row,.tableau{display:grid;grid-template-columns:repeat(7,var(--cw));gap:clamp(4px,1.3vw,14px);justify-content:space-between;min-width:390px}
.spacer{grid-column:span 1}
.card-slot{width:var(--cw);height:var(--ch);border:2px dashed #ffffff42;border-radius:calc(var(--cw)*.09);position:relative}
.foundation:empty::after{content:'🍁';position:absolute;inset:0;display:grid;place-items:center;opacity:.23;font-size:calc(var(--cw)*.42)}
.tableau{margin-top:clamp(18px,4vw,40px)}
.column{position:relative;min-height:calc(var(--ch)*2.7)}
.card{position:absolute;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw)*.09);border:1px solid #cbbfa9;background:#fffdf8;color:#171b1a;box-shadow:0 3px 8px #061b1866;user-select:none;cursor:pointer;overflow:hidden}
.card.red{color:#b21f31}
.card.back{background-color:#173f2b;background-image:url('https://canadiancountrylife.ca/wp-content/uploads/2026/08/cropped-Canadian-Country-Life-moose-footer.png'),radial-gradient(circle at 22% 18%,#315c42 0 2%,transparent 2.4%),radial-gradient(circle at 78% 82%,#315c42 0 2%,transparent 2.4%),linear-gradient(135deg,#173f2b,#214f37 50%,#173f2b);background-repeat:no-repeat,repeat,repeat,no-repeat;background-position:center,0 0,10px 10px,center;background-size:78% auto,24px 24px,24px 24px,cover;border:3px solid #f4e7c8;box-shadow:inset 0 0 0 2px #c59a3f,inset 0 0 0 6px #173f2b,inset 0 0 0 8px #c59a3f,0 3px 8px #061b1866}
.corner{position:absolute;top:5%;left:8%;display:flex;flex-direction:column;align-items:center;font:bold calc(var(--cw)*.2)/.85 Georgia}
.corner.bottom{inset:auto 8% 5% auto;transform:rotate(180deg)}
.pip{display:grid;place-items:center;height:100%;font-size:calc(var(--cw)*.43)}
.column .card{top:var(--top)}
.message{text-align:center;min-height:1.4em;font:700 16px system-ui;color:#ffe29b}
footer{text-align:center;margin-top:35px;color:#d6ddd7;font:13px system-ui}
@media(max-width:650px){.game-header{align-items:start}
.stats{flex-direction:column}
.toolbar{flex-wrap:wrap}
.toolbar label{margin-left:0}
#canada-solitaire{--cw:52px}
.corner{font-size:calc(var(--cw)*.22)}
}
@media(prefers-reduced-motion:no-preference){.card{transition:transform .15s}
.card:hover{transform:translateY(-2px)}
}


