:root { color-scheme: dark; --gold:#f3c969; --felt:#075f46; --dark:#033c2d; --card-w:clamp(76px,9vw,112px); --card-h:calc(var(--card-w)*1.38); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,"Segoe UI",sans-serif; color:#fff; background:#032e23; }
button { font:inherit; }
.hidden { display:none!important; }
.rotate-notice { display:none; }
.music-btn { position:fixed; top:18px; right:18px; z-index:120; width:46px; height:46px; display:grid; place-items:center; padding:0!important; border:1px solid #f3c96988!important; border-radius:50%!important; color:#2b210d!important; background:var(--gold)!important; box-shadow:0 8px 24px #00151088; font-size:21px!important; cursor:pointer; transition:.18s; }
.music-btn:hover { transform:scale(1.06); }
.music-btn.muted { color:#d8e5e0!important; background:#173c31!important; border-color:#ffffff33!important; }
.music-btn.muted::after { content:""; position:absolute; width:27px; height:2px; border-radius:2px; background:#e85c67; transform:rotate(-45deg); }
.loading-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 45%,rgba(25,151,111,.3),transparent 38%),linear-gradient(145deg,#032e23,#011c16); transition:opacity .55s ease,visibility .55s ease; }
.loading-overlay.finished { opacity:0; visibility:hidden; }
.loading-card { width:min(480px,100%); display:flex; flex-direction:column; align-items:center; text-align:center; }
.loading-game-logo-box { width:min(330px,72vw); aspect-ratio:1; display:grid; place-items:center; flex:none; margin:0 auto 28px; animation:logoFloat 2.2s ease-in-out infinite; }
.loading-game-logo { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 20px 34px #000a); }
.loading-cloudix-logo { width:min(250px,62vw); height:82px; flex:none; margin:0 auto 14px; object-fit:contain; filter:drop-shadow(0 12px 24px #0008); }
.loading-text { min-height:30px; margin:5px 0; color:#fff; font-size:1.08rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.loading-bar { width:min(310px,82vw); height:9px; margin:13px auto 0; overflow:hidden; border:1px solid #f3c96966; border-radius:999px; background:#ffffff12; }
.loading-bar span { display:block; width:38%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f3c969,#fff3b5,#d59125); box-shadow:0 0 18px #f3c969aa; animation:loadingSweep 1.05s ease-in-out infinite; }
@keyframes loadingSweep { from{transform:translateX(-120%)} to{transform:translateX(280%)} }
@keyframes logoFloat { 50%{transform:translateY(-9px) scale(1.02)} }
.eyebrow { margin:0 0 5px; color:var(--gold); font-size:11px; font-weight:900; letter-spacing:.2em; }
.menu-screen { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 50% 0,#178463,#064a38 55%,#032e23); }
.menu-card { width:min(900px,100%); text-align:center; }
.menu-card h1 { margin:8px 0; font:500 clamp(42px,7vw,70px)/1 Georgia,serif; }
.menu-copy { margin:14px 0 38px; color:#c4ded5; font-size:17px; }
.game-choices { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.game-choice { position:relative; min-height:300px; display:flex; flex-direction:column; align-items:flex-start; padding:28px; overflow:hidden; border:1px solid #ffffff2b; border-radius:24px; color:white; text-align:left; background:linear-gradient(145deg,#ffffff18,#001f1733); box-shadow:0 18px 50px #001d1666; cursor:pointer; transition:.2s; }
.game-choice:hover { transform:translateY(-7px); border-color:var(--gold); box-shadow:0 24px 60px #001d1699; }
.game-choice.reverse { background:linear-gradient(145deg,#83611c55,#001f1733); }
.choice-tag { position:absolute; right:18px; top:18px; padding:6px 10px; border-radius:99px; color:#35270b; background:var(--gold); font-size:10px; font-weight:900; letter-spacing:.1em; }
.choice-cards { display:flex; height:93px; margin:10px 0 24px; }
.choice-cards i { width:65px; height:88px; display:grid; place-items:center; margin-right:-25px; border-radius:8px; background:#faf9f5; color:#17191d; font:700 28px Georgia; font-style:normal; box-shadow:0 6px 15px #001e1788; transform:rotate(-7deg); }
.choice-cards i:nth-child(2) { color:#bd273b; transform:translateY(-8px); }
.choice-cards i:nth-child(3) { transform:rotate(7deg); }
.choice-logo-wrap { width:100%; height:150px; display:flex; align-items:center; justify-content:flex-start; margin:0 0 18px; }
.choice-logo { width:auto; max-width:260px; height:100%; object-fit:contain; object-position:left center; filter:drop-shadow(0 12px 20px #001e1788); }
.choice-title { font:500 30px Georgia,serif; }
.choice-desc { min-height:48px; margin:10px 0 25px; color:#c8ddd6; line-height:1.5; }
.game-choice b { color:var(--gold); }
.game-shell { position:relative; isolation:isolate; min-height:100vh; padding:32px clamp(24px,4vw,64px) 70px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; background:
  radial-gradient(ellipse at 50% -5%,rgba(32,171,160,.34),transparent 44%),
  radial-gradient(circle at 8% 80%,rgba(39,79,111,.32),transparent 35%),
  repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.024) 0 1px,transparent 1px 4px),
  linear-gradient(135deg,#073b42 0%,#052f37 48%,#031f2b 100%); }
.game-shell::before { content:""; position:absolute; inset:8px; z-index:-1; pointer-events:none; border:9px solid #4a2717; border-radius:28px; box-shadow:inset 0 0 0 2px #d4a74e,inset 0 0 85px rgba(0,7,12,.8),0 0 0 2px #1d0e08,0 8px 25px #0008; }
.game-shell::after { content:"♠   ♥   ♣   ♦"; position:absolute; left:50%; bottom:14px; z-index:-1; transform:translateX(-50%); color:rgba(243,201,105,.16); font:700 22px Georgia,serif; letter-spacing:1.2em; white-space:nowrap; pointer-events:none; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:22px; }
h2 { margin:0; font:500 clamp(28px,4vw,44px) Georgia,serif; }
.stats { display:flex; gap:35px; padding:11px 22px; border:1px solid #ffffff22; border-radius:14px; background:#001b1438; }
.stats span { color:#b9d8ce; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.stats strong { display:block; margin-top:3px; color:#fff; font-size:18px; }
.actions { display:flex; gap:10px; }
button:not(.pile):not(.game-choice) { padding:11px 16px; border:0; border-radius:10px; color:#2b210d; background:var(--gold); font-weight:800; cursor:pointer; }
button.secondary { color:#fff!important; background:#ffffff17!important; border:1px solid #ffffff2c!important; }
button:disabled { opacity:.4; cursor:not-allowed!important; transform:none!important; }
.table-top { min-height:178px; display:grid; grid-template-columns:390px 1fr auto; align-items:center; gap:25px; margin-top:12px; padding:12px 18px; border-radius:20px; background:linear-gradient(180deg,rgba(0,12,20,.28),rgba(255,255,255,.025)); border:1px solid rgba(214,174,89,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 35px rgba(0,10,15,.18); }
.table-watermark { width:min(300px,28vw); height:105px; display:grid; place-items:center; margin:auto; opacity:.18; filter:grayscale(.2) drop-shadow(0 7px 12px #0007); pointer-events:none; }
.table-watermark img { width:100%; height:100%; object-fit:contain; }
.deck-area,.foundations { display:flex; gap:14px; }
.foundations { justify-self:end; margin-left:auto; }
.pile { position:relative; width:var(--card-w); height:var(--card-h); padding:0; border:1px dashed #d9b96b70; border-radius:11px; background:#0019233d; cursor:pointer; }
.stock.has-cards,.card.face-down { border:3px solid #b9f4ff; background:
  radial-gradient(circle at 50% 48%,rgba(48,221,255,.3),transparent 35%),
  linear-gradient(135deg,transparent 0 47%,rgba(255,255,255,.12) 48% 50%,transparent 51%),
  linear-gradient(145deg,#071b4c 0%,#172c7a 44%,#6829a7 74%,#071936 100%);
  box-shadow:inset 0 0 0 3px #0a1949,inset 0 0 0 5px #43dfff,inset 0 0 24px #6d2fcbcc,0 8px 18px #001219bb,0 0 10px #38ddff55; }
.stock.has-cards::before,.card.face-down::before { content:""; position:absolute; inset:17%; background:url("cloudix-game-logo.png") center/contain no-repeat; mix-blend-mode:screen; filter:contrast(1.18) saturate(1.2); }
.stock.has-cards::after { content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.35); border-radius:6px; box-shadow:inset 0 0 12px rgba(64,224,255,.3); }
.foundation::after { content:attr(data-suit); position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); color:#ffffff24; font-size:42px; }
.foundation.has-card::after { display:none; }
.board { display:grid; grid-template-columns:repeat(7,var(--card-w)); justify-content:space-between; gap:10px; align-items:start; min-height:560px; }
.board.spider-board { grid-template-columns:repeat(10,minmax(0,var(--card-w))); }
.column { position:relative; min-height:var(--card-h); border:1px dashed #d7b96838; border-radius:11px; transition:background .15s,outline .15s; }
.column.drag-target,.foundation.drag-target { background:#f3c96924; outline:3px solid #f3c969; outline-offset:3px; }
.card { position:absolute; inset:0 auto auto 0; width:var(--card-w); height:var(--card-h); border-radius:11px; user-select:none; box-shadow:0 7px 16px #00121b8f,0 2px 3px #0007; transition:transform .15s,box-shadow .15s,filter .15s; }
.card.face-up { padding:9px; overflow:hidden; color:#10245c; text-align:left; background:linear-gradient(145deg,#ffffff 0%,#f7fbff 58%,#eeeaff 100%); border:2px solid #67dff1; cursor:grab; }
.card.face-up::before { display:none; }
.card.face-up::after { content:""; position:absolute; inset:4px; border:1px solid rgba(83,76,190,.33); border-radius:7px; box-shadow:inset 0 0 10px rgba(56,220,255,.08); pointer-events:none; }
.card.face-up:hover { transform:translateY(-5px); box-shadow:0 14px 24px #00121bb8,0 0 0 2px #50e5ff,0 0 18px #6638d088; }
.card.face-up:active { cursor:grabbing; }
.card.red { color:#d22572; }
.rank { position:relative; z-index:1; display:block; font:900 clamp(18px,2.2vw,27px)/.85 Georgia,serif; text-shadow:0 1px #fff; }
.suit { position:relative; z-index:1; display:block; margin-top:2px; font-size:21px; line-height:.8; }
.big-suit { position:absolute; right:8px; bottom:8px; display:block; font-size:clamp(17px,2vw,22px); line-height:1; opacity:.32; filter:drop-shadow(0 1px 0 #fff); pointer-events:none; }
.column > .card:not(:last-child) .suit,
.column > .card:not(:last-child) .big-suit { display:none; }
.selected { outline:4px solid #63eaff; transform:translateY(-10px) rotate(-1deg)!important; box-shadow:0 22px 30px #00121bcc,0 0 22px #744bffcc!important; z-index:30!important; }
.card.dragging { opacity:.72; transform:translateY(-15px) rotate(2deg) scale(1.04)!important; filter:drop-shadow(0 24px 20px #0009); }
.waste .card,.foundation .card { top:0!important; }
.waste .card:nth-child(1) { left:0; }
.waste .card:nth-child(2) { left:64px; }
.waste .card:nth-child(3) { left:128px; }
.waste.three-cards { width:calc(var(--card-w) + 128px); }
.message { position:fixed; left:50%; bottom:22px; z-index:20; transform:translateX(-50%) translateY(20px); opacity:0; padding:12px 20px; border-radius:99px; background:#10271fef; box-shadow:0 8px 30px #00151099; transition:.2s; pointer-events:none; }
.message.show { opacity:1; transform:translateX(-50%) translateY(0); }
.outcome-overlay { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; overflow:hidden; background:rgba(1,12,20,.7); backdrop-filter:blur(8px); }
.outcome-card { position:relative; z-index:5; width:min(480px,92vw); padding:38px 30px; border:2px solid #67e6ff; border-radius:24px; text-align:center; background:linear-gradient(145deg,#102a55f5,#321b65f5); box-shadow:0 30px 90px #000c,0 0 35px #42dfff66; animation:outcomeIn .5s cubic-bezier(.2,.9,.25,1.2); }
.outcome-card h2 { margin:6px 0 10px; font-size:clamp(38px,6vw,62px); }
.outcome-card p:not(.eyebrow) { margin:0 auto 25px; color:#d9eaff; font-size:17px; }
.outcome-icon { width:78px; height:78px; display:grid; place-items:center; margin:-78px auto 15px; border:3px solid #9ff2ff; border-radius:50%; background:linear-gradient(145deg,#25cbe7,#7041da); box-shadow:0 0 25px #55dcff99; font-size:42px; }
.outcome-overlay.lost .outcome-card { border-color:#e75f78; background:linear-gradient(145deg,#351827f5,#171a36f5); }
.outcome-overlay.lost .outcome-icon { border-color:#ff9aaa; background:linear-gradient(145deg,#da3f62,#642653); }
.outcome-actions { display:flex; justify-content:center; gap:12px; }
.confetti-piece { position:fixed; top:-30px; z-index:3; width:11px; height:20px; background:var(--confetti); animation:confettiFall var(--duration) linear var(--delay) forwards; }
.flying-card { position:fixed; left:50%; top:50%; z-index:4; width:58px; height:80px; display:grid; place-items:center; border:2px solid #64e6ff; border-radius:7px; color:var(--card-color); background:#fff; box-shadow:0 8px 18px #0008; font:900 23px Georgia,serif; animation:cardFly 1.9s ease-out var(--delay) forwards; }
.cascade-card { position:fixed; left:var(--start-x); top:var(--start-y); z-index:190; width:clamp(42px,5vw,66px); height:clamp(60px,7vw,92px); display:grid; place-items:center; border:3px solid #62e9ff; border-radius:9px; color:var(--card-color); background:linear-gradient(145deg,#fff,#edf4ff 70%,#e8e2ff); box-shadow:0 10px 20px #0009,0 0 13px #55dcff88; font:900 clamp(17px,2vw,25px) Georgia,serif; pointer-events:none; animation:cascadeBounce var(--flight-time) cubic-bezier(.2,.55,.35,1) var(--delay) forwards; }
.cascade-card::after { content:""; position:absolute; inset:4px; border:1px solid #7041da55; border-radius:5px; }
@keyframes outcomeIn { from{opacity:0;transform:scale(.72) translateY(30px)} }
@keyframes confettiFall { to{transform:translate3d(var(--drift),110vh,0) rotate(900deg)} }
@keyframes cardFly { from{transform:translate(-50%,-50%) rotate(0) scale(.5)} to{transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--spin));opacity:0} }
@keyframes cascadeBounce {
  0% { transform:translate(0,0) rotate(0deg) scale(.7); opacity:0; }
  7% { opacity:1; }
  28% { transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) scale(1); }
  49% { transform:translate(var(--x2),var(--y2)) rotate(var(--r2)); }
  69% { transform:translate(var(--x3),var(--y3)) rotate(var(--r3)); }
  84% { opacity:1; }
  100% { transform:translate(var(--x4),115vh) rotate(var(--r4)); opacity:0; }
}
@media(max-width:850px){:root{--card-w:clamp(58px,16vw,76px)}body{overflow-x:hidden}.music-btn{top:10px;right:10px;width:40px;height:40px}.loading-game-logo-box{width:min(280px,68vw);margin-bottom:22px}.loading-cloudix-logo{width:min(220px,58vw);height:72px}.game-choices{grid-template-columns:1fr}.choice-logo-wrap{height:135px}.choice-logo{max-width:235px}.game-shell{padding:18px 10px 64px}.topbar{min-width:620px;flex-wrap:wrap}.stats{order:3;width:100%;justify-content:center}.table-top{width:max-content;min-width:620px;grid-template-columns:300px 1fr auto}.table-watermark{display:none}.board{width:max-content;min-width:620px;justify-content:start;gap:7px;padding-right:12px}.board.spider-board{min-width:760px;grid-template-columns:repeat(10,var(--card-w))}.card{touch-action:manipulation}.card.face-up{padding:4px}.big-suit{display:none}.actions{gap:5px}.actions button{padding:9px!important;font-size:12px}.choice-title{font-size:26px}}
@media (max-width:900px) and (max-aspect-ratio:1/1) {
  body.solitaire-playing .rotate-notice { position:fixed; inset:0; z-index:20000; display:grid; place-content:center; justify-items:center; gap:12px; padding:28px; color:#fff; text-align:center; background:radial-gradient(circle at 50% 40%,#14795d,#032e23 72%); }
  .rotate-notice .rotate-phone { width:76px; height:118px; display:grid; place-items:center; border:4px solid #f3c969; border-radius:16px; color:#f3c969; font-size:46px; animation:turnPhone 1.5s ease-in-out infinite; }
  .rotate-notice strong { font:700 30px Georgia,serif; }
  .rotate-notice span { color:#c4ded5; font-size:16px; }
}
@keyframes turnPhone { 50% { transform:rotate(90deg); } }
@media (max-height:600px) and (min-aspect-ratio:1/1) {
  :root { --card-w:clamp(62px,16vh,82px); }
  body.solitaire-playing { width:100%; min-height:100dvh; overflow:auto; }
  .game-shell { min-height:100dvh; padding:8px 10px 28px; overflow:visible; }
  .game-shell::before { inset:3px; border-width:5px; border-radius:14px; }
  .topbar { min-width:0; display:grid; grid-template-columns:minmax(125px,1fr) auto auto; gap:8px; padding:2px 104px 2px 8px; }
  .topbar .eyebrow { display:none; }
  .topbar h2 { font-size:clamp(19px,4.5vh,27px); }
  .stats { order:initial; width:auto; gap:14px; padding:6px 10px; }
  .stats strong { font-size:14px; }
  .actions { flex-wrap:nowrap; }
  .actions button { padding:7px 9px!important; font-size:10px; white-space:nowrap; }
  .music-btn { top:auto; right:8px; bottom:8px; width:38px; height:38px; }
  .table-top { width:100%; min-width:0; min-height:calc(var(--card-h) + 12px); grid-template-columns:auto 1fr auto; gap:10px; margin-top:4px; padding:6px 10px; }
  .deck-area,.foundations { gap:7px; }
  .foundations { position:sticky; right:6px; z-index:12; justify-content:flex-end; }
  .board,.board.spider-board { width:100%; min-width:0; grid-template-columns:repeat(7,var(--card-w)); justify-content:center; gap:clamp(8px,2.2vw,18px); padding:0 8px; }
  .board.spider-board { --card-w:clamp(52px,13.5vh,66px); grid-template-columns:repeat(10,var(--card-w)); gap:clamp(3px,.75vw,7px); }
  .column,.pile,.card { border-radius:7px; }
  .card.face-up { padding:6px; }
  .rank { display:block; font-size:clamp(14px,3.8vh,18px); line-height:1.08; }
  .suit { display:block; margin-top:4px; font-size:clamp(12px,3.2vh,16px); line-height:1; }
  .big-suit { right:6px; bottom:6px; font-size:clamp(17px,4vh,22px); }
}
body.solitaire-playing.viewport-portrait .rotate-notice { position:fixed; inset:0; z-index:20000; display:grid; place-content:center; justify-items:center; gap:12px; padding:28px; color:#fff; text-align:center; background:radial-gradient(circle at 50% 40%,#14795d,#032e23 72%); }
body.solitaire-playing.viewport-landscape .rotate-notice { display:none!important; }
@media(max-height:700px){.loading-game-logo-box{width:min(245px,58vw);margin-bottom:16px}.loading-cloudix-logo{height:62px}.loading-text{margin:1px 0}.loading-bar{margin-top:8px}}
@media (prefers-reduced-motion:reduce){.loading-game-logo,.loading-bar span{animation:none}}