.solitaire-app{min-height:100dvh;display:flex;flex-direction:column;background:var(--color-bg-deep);font-family:var(--font-body);user-select:none;-webkit-user-select:none;overflow-x:hidden;position:relative}.bg-environment{position:fixed;inset:0;z-index:-2;background-image:radial-gradient(circle at 50% 10%,rgba(211,84,0,.4) 0%,transparent 50%),radial-gradient(circle at 50% 40%,rgba(251,189,8,.15) 0%,var(--color-bg-deep) 70%),repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0px,rgba(0,0,0,.1) 1px,transparent 1px,transparent 4px),linear-gradient(to bottom,var(--color-bg-wood),var(--color-bg-deep));pointer-events:none}.bg-dust{position:fixed;inset:0;z-index:-1;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");mix-blend-mode:overlay;pointer-events:none}.bg-horizon{position:fixed;bottom:0;left:0;width:100%;height:15vh;z-index:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23050201' d='M0,200 L1440,200 L1440,150 C1380,140 1320,160 1260,165 C1180,170 1100,140 1020,135 C940,130 880,150 820,155 C740,160 680,120 600,110 C520,100 460,140 380,145 C300,150 220,120 140,130 C80,135 40,150 0,160 Z'/%3E%3Cpath fill='%230a0502' d='M0,200 L1440,200 L1440,170 C1350,160 1300,180 1200,185 C1100,190 1050,170 950,165 C850,160 800,180 700,185 C600,190 550,160 450,155 C350,150 300,180 200,185 C100,190 50,170 0,175 Z'/%3E%3C/svg%3E") no-repeat bottom center;background-size:cover;pointer-events:none;opacity:.8}.game-width-inner{width:100%;max-width:900px;margin-left:auto;margin-right:auto;padding-left:clamp(.5rem,2vw,1.25rem);padding-right:clamp(.5rem,2vw,1.25rem)}.game-header-inner{display:flex;justify-content:space-between;align-items:center}.controls-bar-inner{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:.5rem}.game-header{padding:clamp(.75rem,2vw,1.5rem) 0;position:relative;z-index:10}.header-brand{display:flex;flex-direction:column}.game-title{font-family:var(--font-heading);font-size:clamp(1.75rem,5vw,2.625rem);font-weight:400;color:var(--color-gold);text-shadow:2px 2px 4px rgba(0,0,0,.8),0 0 20px rgba(212,175,55,.3);letter-spacing:2px;line-height:1;margin:0}.game-subtitle{font-family:var(--font-body);font-size:clamp(.55rem,1.5vw,.625rem);text-transform:uppercase;letter-spacing:4px;color:var(--color-text-muted);margin:.25rem 0 0}.header-stats{display:flex;gap:clamp(1rem,3vw,2rem);align-items:flex-start}.stat-group{display:flex;flex-direction:column;align-items:flex-end}.stat-label{font-size:clamp(.5rem,1.2vw,.625rem);text-transform:uppercase;letter-spacing:2px;color:var(--color-text-muted);margin-bottom:2px;font-family:var(--font-body)}.stat-value{font-family:var(--font-card);font-size:clamp(1.1rem,3vw,1.5rem);font-weight:600;color:var(--color-parchment);text-shadow:1px 1px 2px rgba(0,0,0,.8);line-height:1}.controls-bar{padding:.35rem 0;background:#0006;border-top:1px solid rgba(212,175,55,.08);border-bottom:1px solid rgba(212,175,55,.08);position:relative;z-index:10}.controls-group{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.game-table{flex:1;padding:clamp(.5rem,2vw,1.25rem);position:relative;z-index:10}.top-row{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.5vw,10px);margin-bottom:clamp(.5rem,1.5vw,.75rem);align-items:start}.top-spacer{visibility:hidden}.tableau-row{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.5vw,10px);align-items:start}.pile{position:relative;border-radius:6px;aspect-ratio:5 / 7;cursor:pointer;min-height:1px;background:#0000004d;border:1px solid rgba(212,175,55,.15);box-shadow:inset 0 4px 10px #000c,0 1px #ffffff0a}.tableau-pile{aspect-ratio:unset;min-height:calc(var(--card-height) + 4px)}.pile:focus-visible{outline:2px solid var(--color-gold-bright);outline-offset:2px}.empty-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.2rem,3.5vw,2.2rem);color:#d4af371f;border-radius:6px;pointer-events:none}.suit-hearts,.suit-diamonds{color:#8a030340}.suit-spades,.suit-clubs{color:#d4af3726}:root{--card-width: clamp(34px, 9.6vw, 66px);--card-height: calc(var(--card-width) * 1.4);--card-radius: 5px;--stack-offset-down: clamp(20px, 7vw, 36px);--stack-offset-faceup: clamp(44px, 10vw, 70px)}.card{position:absolute;width:var(--card-width);height:var(--card-height);border-radius:var(--card-radius);cursor:pointer;transition:transform .1s,box-shadow .1s;touch-action:none}.card:focus-visible{outline:2px solid var(--color-gold-bright);outline-offset:2px}.card-back{background-color:var(--color-card-back);background-image:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.6) 100%),repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(212,175,55,.1) 10px,rgba(212,175,55,.1) 12px),repeating-linear-gradient(-45deg,transparent,transparent 10px,rgba(212,175,55,.1) 10px,rgba(212,175,55,.1) 12px);border:2px solid #2a0404;box-shadow:1px 2px 4px #0009;overflow:hidden}.card-back:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:70%;border:1px solid var(--color-gold-muted);border-radius:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Cpath d='M50 10 L90 75 L50 140 L10 75 Z' fill='none' stroke='%23d4af37' stroke-width='2' opacity='0.5'/%3E%3Ccircle cx='50' cy='75' r='12' fill='none' stroke='%23d4af37' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E") center / contain no-repeat}.card-face{background-color:var(--color-parchment);background-image:radial-gradient(ellipse at center,transparent 60%,rgba(139,69,19,.15) 100%);border:1px solid #dcd0b3;box-shadow:1px 2px 5px #00000080,-1px 1px 3px #0000004d;display:flex;flex-direction:column;padding:clamp(4px,1.2vw,8px);overflow:hidden}.card-face.red{color:var(--color-card-red)}.card-face.black{color:var(--color-card-dark)}.card-corner{display:flex;flex-direction:column;align-items:flex-start;line-height:1;flex-shrink:0}.card-rank{font-family:var(--font-card);font-weight:700;font-size:clamp(1rem,3.25vw,1.7rem);line-height:1}.card-suit-sm{font-size:clamp(.85rem,2.6vw,1.3rem);line-height:1}.card-corner-bottom{position:absolute;bottom:clamp(4px,1.2vw,8px);right:clamp(4px,1.2vw,8px);transform:rotate(180deg)}.card-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(1.4rem,4.5vw,2.6rem);opacity:.8;pointer-events:none}.card.selected{box-shadow:0 0 0 2px var(--color-gold-bright),0 0 15px #d4af3780,2px 4px 8px #0009;transform:translateY(-5px);z-index:50!important}.pile.drop-target>.empty-placeholder,.card.drop-target{box-shadow:0 0 0 2px var(--color-gold-bright),0 0 10px #d4af3766}.drag-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.9;transform:rotate(3deg);top:0;left:0}#win-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:998;pointer-events:none;display:none}.win-overlay{position:fixed;inset:0;background:#0a0603e6;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;backdrop-filter:blur(4px)}.win-overlay[hidden]{display:none}.win-card{background:linear-gradient(170deg,var(--color-bg-wood) 0%,var(--color-bg-deep) 100%);border:2px solid var(--color-gold);border-radius:12px;padding:2rem;max-width:420px;width:100%;text-align:center;box-shadow:0 0 0 1px var(--color-gold-muted),0 20px 60px #000c;position:relative;overflow:hidden}.win-card:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,transparent 0px,rgba(255,255,255,.015) 1px,transparent 2px,transparent 8px);pointer-events:none}.win-stars{font-size:1.5rem;color:var(--color-gold-bright);margin-bottom:.5rem;letter-spacing:.5em;text-shadow:0 0 10px var(--color-gold);position:relative}.win-title{font-family:var(--font-heading);font-size:clamp(1.75rem,6vw,2.5rem);font-weight:400;color:var(--color-gold);text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 20px rgba(212,175,55,.3);margin:0 0 .75rem;line-height:1.1;position:relative}.win-quote{font-family:var(--font-card);font-style:italic;color:var(--color-text-muted);font-size:clamp(.75rem,2.5vw,.875rem);margin:0 0 1.5rem;position:relative}.win-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem;position:relative}.win-stat{display:flex;flex-direction:column;align-items:center}.win-stat-label{font-size:.625rem;text-transform:uppercase;letter-spacing:2px;color:var(--color-text-muted);font-family:var(--font-body)}.win-stat-value{font-family:var(--font-card);font-size:1.5rem;font-weight:700;color:var(--color-gold-bright)}.btn{background:transparent;border:1px solid var(--color-gold-muted);color:var(--color-gold);font-family:var(--font-body);text-transform:uppercase;letter-spacing:2px;font-size:clamp(.6rem,1.5vw,.75rem);padding:.75rem clamp(.75rem,3vw,2rem);border-radius:30px;cursor:pointer;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;box-shadow:inset 0 0 10px #00000080,0 4px 6px #0006;position:relative;overflow:hidden;min-height:44px}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(212,175,55,.2),transparent);transition:left .5s ease}.btn:hover{background:#d4af3714;border-color:var(--color-gold);box-shadow:inset 0 0 15px #d4af371f,0 4px 10px #0009}.btn:hover:before{left:100%}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--color-gold-bright);outline-offset:2px}.btn-primary{background:#5a0b0b4d;border-color:#7a1515;color:#fff}.btn-primary:hover{background:#8a030373;border-color:#c22}.btn-compact{padding:.35rem clamp(.5rem,1.5vw,.9rem);font-size:clamp(.55rem,1.4vw,.7rem);min-height:36px}.btn-autocomplete{background:#14501440;border-color:#3a7a3a;color:#7aba7a}.btn-autocomplete:hover{background:#1e781e66;border-color:#5c5;color:#aaeaaa}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (max-width: 640px){.game-header{flex-direction:column;align-items:center;gap:.75rem;text-align:center}.header-brand,.stat-group{align-items:center}.controls-bar{justify-content:center;gap:.6rem}.controls-group{justify-content:center}}@media (min-width: 769px){.game-table{max-width:900px;margin-left:auto;margin-right:auto;width:100%}}@media (max-height: 500px){.game-table{max-width:500px;margin-left:auto;margin-right:auto;width:100%}.game-header{padding:.3rem clamp(.5rem,2vw,1rem)}.game-title{font-size:1.2rem}.game-subtitle{display:none}.stat-value{font-size:1rem}.controls-bar{padding:.2rem 0}.btn-compact{min-height:28px;padding:.2rem clamp(.4rem,1vw,.6rem)}}@media (prefers-reduced-motion: reduce){.card,.btn,.btn:before,.theme-btn,.btn-compact{transition:none}}.settings-modal{position:fixed;inset:0;background:#0a0603e0;display:flex;align-items:center;justify-content:center;z-index:1001;padding:1rem;backdrop-filter:blur(4px)}.settings-modal[hidden]{display:none}.settings-card{background:linear-gradient(170deg,var(--color-bg-wood) 0%,var(--color-bg-deep) 100%);border:2px solid var(--color-gold);border-radius:12px;padding:1.5rem;max-width:340px;width:100%;box-shadow:0 0 0 1px var(--color-gold-muted),0 20px 60px #000c;position:relative;overflow:hidden}.settings-card:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,transparent 0px,rgba(255,255,255,.015) 1px,transparent 2px,transparent 8px);pointer-events:none}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;border-bottom:1px solid rgba(212,175,55,.2);padding-bottom:.75rem;position:relative}.settings-title{font-family:var(--font-heading);font-size:1.4rem;font-weight:400;color:var(--color-gold);margin:0;text-shadow:0 1px 3px rgba(0,0,0,.6)}.settings-close-btn{min-height:unset;padding:.2rem .55rem;font-size:.9rem;border-radius:50%;line-height:1.4}.settings-body{display:flex;flex-direction:column;gap:1rem;position:relative}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}.settings-label{font-family:var(--font-body);font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--color-text-muted)}.theme-toggle-group{display:flex;gap:.4rem}.theme-btn{font-family:var(--font-body);font-size:clamp(.6rem,1.4vw,.7rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background:transparent;border:1px solid rgba(212,175,55,.25);border-radius:20px;padding:.3rem .8rem;cursor:pointer;min-height:32px;transition:border-color .2s,color .2s,background .2s}.theme-btn:hover{border-color:var(--color-gold);color:var(--color-gold-bright)}.theme-btn[aria-pressed=true]{background:#d4af371f;border-color:var(--color-gold);color:var(--color-gold);box-shadow:0 0 8px #d4af3726}.theme-btn:focus-visible{outline:2px solid var(--color-gold-bright);outline-offset:2px}.solitaire-app[data-theme=light]{--color-bg-deep: #d0b07a;--color-bg-wood: #e8cfa0;--color-gold: #7a5200;--color-gold-muted: #5e3e00;--color-gold-bright: #9a6800;--color-text-muted: #5a3a18}.solitaire-app[data-theme=light] .bg-environment{background-image:radial-gradient(circle at 50% 10%,rgba(200,140,40,.25) 0%,transparent 50%),radial-gradient(circle at 50% 40%,rgba(230,190,80,.15) 0%,var(--color-bg-deep) 70%),repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0px,rgba(0,0,0,.04) 1px,transparent 1px,transparent 4px),linear-gradient(to bottom,var(--color-bg-wood),var(--color-bg-deep))}.solitaire-app[data-theme=light] .stat-value{color:#3a2010;text-shadow:none}.solitaire-app[data-theme=light] .controls-bar{background:#0000001a;border-top-color:#64460a33;border-bottom-color:#64460a33}.solitaire-app[data-theme=light] .pile{background:#00000014;border-color:#64460a33}.solitaire-app[data-theme=light] .btn{box-shadow:inset 0 0 10px #00000014,0 2px 4px #0000001f}.solitaire-app[data-theme=light] .btn:hover{background:#7a52001a;border-color:var(--color-gold);box-shadow:inset 0 0 12px #7a52001a,0 2px 6px #0003}.solitaire-app[data-theme=light] .btn-primary{background:#5a0b0b33;border-color:#7a1515;color:#5a1010}.solitaire-app[data-theme=light] .btn-primary:hover{background:#8a030359;border-color:#c22;color:#3a0808}.solitaire-app[data-theme=light] .win-overlay{background:#b48c46eb}.solitaire-app[data-theme=light] .settings-modal{background:#a07832e0}
