@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap";
.card{aspect-ratio:70/98;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;perspective:1000px;width:100%;font-size:clamp(12px,20%,18px);transition:transform .2s,box-shadow .2s;position:relative;container-type:inline-size}.card-inner{width:100%;height:100%;transform-style:preserve-3d;position:relative}.card.face-up .card-inner{transform:rotateY(180deg)}.card-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--radius-card);width:100%;height:100%;position:absolute;overflow:hidden;box-shadow:0 1px 3px #00000040,0 1px 2px #00000026}.card-face-front{background:#fff;transform:rotateY(180deg)}.card-face-back{background:#fff}.card:active{cursor:grabbing}.card:hover:not(.face-down):not(.selected):not(.top-card) .card-face{filter:brightness(1.02);box-shadow:0 4px 12px #0003,0 2px 4px #0000001a}.card.top-card:hover:not(.face-down):not(.selected) .card-face{filter:brightness(1.03);box-shadow:0 4px 12px #0003,0 2px 4px #0000001a}.card.selected:not(.dragging){z-index:50!important;transform:translateY(-8.16%)!important}.card.selected:not(.dragging) .card-face{box-shadow:0 0 0 2px var(--accent-500)}.card.selected+.card{transform:translateY(8.16%)!important}.card.dragging .card-face{box-shadow:var(--shadow-4)!important}.card.dragging{z-index:100}.card.face-down{cursor:pointer}.card.animating{transform-style:preserve-3d;transition:none}
.card-content{flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:.286em;font-size:1em;font-weight:700;display:flex}.card-corner{font-size:.857em;line-height:1}@container (min-width:85px){.card-corner{font-size:1.3em}}@container (min-width:100px){.card-corner{font-size:1.5em}}@container (min-width:150px){.card-corner{font-size:2em}}@container (min-width:200px){.card-corner{font-size:3em}}.card-corner.top-left{align-self:flex-start}.card-corner.bottom-right{align-self:flex-end;transform:rotate(180deg)}.card-center{align-self:center;font-size:1.714em;line-height:1}.card-content .red{color:#d32f2f}.card-content .black{color:#212121}
.card-back{background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);border-radius:.571em;width:100%;height:100%;position:relative;overflow:hidden}.card-back-pattern{background-image:repeating-linear-gradient(45deg,#0000,#0000 10px,#ffffff0d 10px 20px),repeating-linear-gradient(-45deg,#0000,#0000 10px,#ffffff0d 10px 20px);width:100%;height:100%;position:absolute;top:0;left:0}.card-back:before{content:"";aspect-ratio:1;z-index:1;background:#ffffff1a;border-radius:50%;width:2.857em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-back:after{content:"♠";color:#ffffff4d;z-index:2;font-size:2.286em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.card-content.modern{flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:.286em;font-size:1em;font-weight:700;display:flex;position:relative}.card-content.modern .card-corner{flex-direction:column;align-items:center;font-size:.857em;line-height:1.2;display:flex}@container (min-width:85px){.card-content.modern .card-corner{font-size:1.3em}}@container (min-width:100px){.card-content.modern .card-corner{font-size:1.5em}}@container (min-width:150px){.card-content.modern .card-corner{font-size:2em}}@container (min-width:200px){.card-content.modern .card-corner{font-size:3em}}.card-content.modern .card-corner.top-left{align-self:flex-start}.card-content.modern .card-corner.bottom-right{align-self:flex-end;transform:rotate(180deg)}.card-content.modern .card-corner .rank{font-size:1.1em;font-weight:900}.card-content.modern .card-corner .suit{font-size:1.2em}.card-content.modern .card-center{justify-content:center;align-self:center;align-items:center;display:flex}.card-content.modern .suit-large{font-size:3.5em;line-height:1}@container (min-width:85px){.card-content.modern .suit-large{font-size:4em}}@container (min-width:100px){.card-content.modern .suit-large{font-size:5em}}@container (min-width:150px){.card-content.modern .suit-large{font-size:6em}}.card-content.modern .red{color:#d32f2f}.card-content.modern .black{color:#212121}
.card-back.modern{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:.571em;width:100%;height:100%;position:relative;overflow:hidden}.card-back-geometric{width:100%;height:100%;position:absolute;top:0;left:0}.card-back.modern .shape{opacity:.3;border-radius:50%;position:absolute}.card-back.modern .shape-1{background:#fff3;border:2px solid #ffffff4d;width:60%;height:60%;top:-20%;left:-20%}.card-back.modern .shape-2{background:#ffffff26;border:2px solid #ffffff40;width:70%;height:70%;bottom:-20%;right:-20%}.card-back.modern .shape-3{background:#ffffff40;border:1px solid #fff6;width:30%;height:30%;top:50%;left:50%;transform:translate(-50%,-50%)}.card-back.modern:before{content:"◆";color:#fff3;z-index:3;font-size:3em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.card-content.realistic{flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:.286em;font-size:1em;font-weight:700;display:flex;position:relative}.card-content.realistic .card-corner{z-index:2;flex-direction:column;align-items:center;font-size:.857em;line-height:1.2;display:flex}.card-content.realistic .card-corner .rank{font-size:1.1em;font-weight:900}.card-content.realistic .card-corner .suit{font-size:1.2em}.card-content.realistic .card-corner.bottom-right{transform:rotate(180deg)}.card-content.realistic .card-middle{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.15em;padding:.2em 0;display:flex}.card-content.realistic .symbols-center{justify-content:center;align-items:center;display:flex}.card-content.realistic .symbols-row{justify-content:center;align-items:center;line-height:1;display:flex}.card-content.realistic .symbols-row-top,.card-content.realistic .symbols-row-bottom{gap:.2em;margin:.1em 0;font-size:1.2em}.card-content.realistic .symbols-row-middle{gap:.15em;margin:.05em 0;font-size:.9em}.card-content.realistic .symbols-content{justify-content:center;align-items:center;gap:.15em;display:inline-flex}.card-content.realistic .symbols-content.small{font-size:.85em}.card-content.realistic .symbol{display:inline-block}.card-content.realistic .card-center.face-card{flex:1;justify-content:center;align-items:center;display:flex}.card-content.realistic .suit-large{font-size:4em;line-height:1}@container (min-width:85px){.card-content.realistic .card-corner{font-size:1.3em}.card-content.realistic .symbols-row-top,.card-content.realistic .symbols-row-bottom{font-size:1.4em}.card-content.realistic .suit-large{font-size:5em}}@container (min-width:100px){.card-content.realistic .card-corner{font-size:1.5em}.card-content.realistic .symbols-row-top,.card-content.realistic .symbols-row-bottom{font-size:1.6em}.card-content.realistic .suit-large{font-size:6em}}@container (min-width:150px){.card-content.realistic .card-corner{font-size:2em}.card-content.realistic .symbols-row-top,.card-content.realistic .symbols-row-bottom{font-size:2.2em}.card-content.realistic .suit-large{font-size:7em}}@container (min-width:200px){.card-content.realistic .card-corner,.card-content.realistic .symbols-row-top,.card-content.realistic .symbols-row-bottom{font-size:3em}.card-content.realistic .suit-large{font-size:8em}}.card-content.realistic .red{color:#d32f2f}.card-content.realistic .black{color:#212121}
.card-back.realistic{background:linear-gradient(135deg,#1e3c72 0%,#2a5298 100%);border-radius:.571em;width:100%;height:100%;position:relative;overflow:hidden}.card-back.realistic .card-back-pattern{background-image:repeating-linear-gradient(45deg,#0000,#0000 10px,#ffffff0d 10px 20px),repeating-linear-gradient(-45deg,#0000,#0000 10px,#ffffff0d 10px 20px);width:100%;height:100%;position:absolute;top:0;left:0}.card-back.realistic:before{content:"";aspect-ratio:1;z-index:1;background:#ffffff1a;border-radius:50%;width:2.857em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-back.realistic:after{content:"♠";color:#ffffff4d;z-index:2;font-size:2.286em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.card-content.velvet{background:#fff;border-radius:.571em;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:.35em;font-family:Playfair Display,Georgia,serif;font-size:1em;display:flex;position:relative}.card-content.velvet .card-corner{flex-direction:column;align-items:center;font-size:.857em;line-height:1.1;display:flex}@container (min-width:85px){.card-content.velvet .card-corner{font-size:1.3em}}@container (min-width:100px){.card-content.velvet .card-corner{font-size:1.5em}}@container (min-width:150px){.card-content.velvet .card-corner{font-size:2em}}@container (min-width:200px){.card-content.velvet .card-corner{font-size:3em}}.card-content.velvet .card-corner.top-left{align-self:flex-start}.card-content.velvet .card-corner.bottom-right{align-self:flex-end;transform:rotate(180deg)}.card-content.velvet .card-corner .rank{letter-spacing:-.02em;font-size:1.15em;font-weight:700}.card-content.velvet .card-corner .suit{margin-top:0;font-size:1em}.card-content.velvet .card-center{justify-content:center;align-self:center;align-items:center;gap:.05em;display:flex}.card-content.velvet .rank-large{font-size:1.6em;font-weight:700;line-height:1}.card-content.velvet .suit-large{font-size:1.4em;line-height:1}@container (min-width:85px){.card-content.velvet .rank-large{font-size:1.8em}.card-content.velvet .suit-large{font-size:1.6em}}@container (min-width:100px){.card-content.velvet .rank-large{font-size:2.2em}.card-content.velvet .suit-large{font-size:1.8em}}@container (min-width:150px){.card-content.velvet .rank-large{font-size:2.8em}.card-content.velvet .suit-large{font-size:2.2em}}.card-content.velvet .red{color:#d42b2b}.card-content.velvet .black{color:#1a1a1a}
.card-back.velvet{background:linear-gradient(160deg,#1a3a6e 0%,#1e4785 50%,#1a3a6e 100%);border-radius:.571em;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #12305c,inset 0 0 0 5px #ffffff1f}.card-back.velvet .card-back-lattice{background-image:repeating-linear-gradient(45deg,#0000,#0000 8px,#ffffff0a 8px 9px),repeating-linear-gradient(-45deg,#0000,#0000 8px,#ffffff0a 8px 9px);border:1px solid #ffffff26;border-radius:2px;position:absolute;inset:6% 8%}.card-back.velvet .card-back-ornament{justify-content:center;align-items:center;width:30%;height:30%;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-back.velvet .card-back-ornament:before{content:"";border:1px solid #ffffff26;border-radius:50%;width:100%;height:100%;position:absolute}.card-back.velvet .card-back-ornament:after{content:"♠";color:#fff3;font-size:2.2em}
.language-selector{border-radius:var(--radius-ui);padding:calc(var(--spacing-base)*1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-1);background:#ffffff14;border:1px solid #ffffff1f}.lang-select{color:#fff;border-radius:var(--radius-button);width:100%;padding:calc(var(--spacing-base)*1.5)calc(var(--spacing-base)*2);cursor:pointer;-webkit-appearance:none;appearance:none;background:#ffffff0d url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-position:right calc(var(--spacing-base)*2)center;padding-right:calc(var(--spacing-base)*6);border:1px solid #ffffff26;outline:none;font-size:13px;font-weight:500;transition:all .2s}.lang-select:hover{background:#ffffff1a;border-color:#ffffff40}.lang-select:focus{border-color:#fff6;box-shadow:0 0 0 2px #ffffff1a}.lang-select:active{transform:translateY(1px)}.lang-select option{color:#fff;padding:calc(var(--spacing-base)*2);background:#1e1e1ef2}@media (max-width:768px){.lang-select{padding:calc(var(--spacing-base)*1.5)calc(var(--spacing-base)*2);min-height:44px;font-size:14px}}
.game-layout{background:radial-gradient(at 50% 40%,#2d6b4566 0%,#0000 70%),linear-gradient(135deg,#1a4a2e 0%,#1f5c38 30%,#2d6b45 50%,#1f5c38 70%,#1a4a2e 100%);width:100%;min-height:100vh;display:flex;position:relative}.game-layout:before{content:"";pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");background-size:200px 200px;position:absolute;inset:0}.game-layout>*{z-index:1;position:relative}.game-main{min-width:0;padding:calc(var(--spacing-base)*8)calc(var(--spacing-base)*5);flex:3}.game-sidebar{padding:calc(var(--spacing-base)*8)calc(var(--spacing-base)*5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border-left:1px solid #ffffff1a;flex:1.5;min-width:320px}.sidebar-content{gap:calc(var(--spacing-base)*8);flex-direction:column;display:flex}.ad-placeholder{color:#fff6;border-radius:var(--radius-ui);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffff0d;border:1px solid #ffffff1a;justify-content:center;align-items:center;width:100%;min-height:250px;display:flex}.ad-placeholder p{font-size:14px;font-weight:500}@media (max-width:1200px){.game-layout{flex-direction:column}.game-main{padding:calc(var(--spacing-base)*4)calc(var(--spacing-base)*3)}.game-sidebar{padding:calc(var(--spacing-base)*6)calc(var(--spacing-base)*3);border-top:1px solid #ffffff1a;border-left:none}.sidebar-content{gap:calc(var(--spacing-base)*6)}}@media (max-width:768px){.game-main{padding:calc(var(--spacing-base)*3)calc(var(--spacing-base)*2)}.game-sidebar{padding:calc(var(--spacing-base)*4)calc(var(--spacing-base)*2);min-width:unset}}
.pile{box-sizing:border-box;width:100%;min-width:0;max-width:100%;position:relative}.pile-tableau{flex:1;width:100%;min-height:0}.pile-foundation,.pile-stock{box-sizing:border-box;aspect-ratio:70/98;width:100%;min-width:0;max-width:100%;position:relative}.pile-waste{aspect-ratio:70/98;width:100%;overflow:visible}.pile-empty{aspect-ratio:70/98;background:#0000001a;border:2px dashed #ffffff40;border-radius:8px;width:100%}.pile-foundation .pile-empty{background:#ffffff0d;border-color:#ffffff4d}.pile-empty-foundation{justify-content:center;align-items:center;display:flex}.pile-empty-suit{color:#ffffff40;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:clamp(16px,3cqi,28px);line-height:1}