*{margin:0;padding:0;box-sizing:border-box}:root{--unit: min(100vw, 100vh)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#1e3c72,#2a5298);min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}.app{width:var(--unit);height:var(--unit);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--unit) * .02);font-size:clamp(10px,calc(var(--unit) * .015),16px)}.header{background:#fffffff2;border-radius:calc(var(--unit) * .006);padding:calc(var(--unit) * .01) calc(var(--unit) * .015);margin-bottom:calc(var(--unit) * .01);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:calc(var(--unit) * .01);box-shadow:0 calc(var(--unit) * .002) calc(var(--unit) * .004) #0000001a;width:calc(var(--unit) * .95);max-width:100%}h1{color:#2a5298;font-size:calc(var(--unit) * .025);font-weight:700;margin:0}.controls{display:flex;gap:calc(var(--unit) * .015);align-items:center;flex-wrap:wrap;font-weight:600;color:#495057;font-size:calc(var(--unit) * .013)}.btn-primary{padding:calc(var(--unit) * .006) calc(var(--unit) * .012);border:none;border-radius:calc(var(--unit) * .004);background:#28a745;color:#fff;font-size:calc(var(--unit) * .012);font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#218838;transform:translateY(calc(var(--unit) * -.002));box-shadow:0 calc(var(--unit) * .004) calc(var(--unit) * .008) #0003}.game-area{background:linear-gradient(135deg,#1a5632,#2d7a4d,#1f6840,#2d7a4d,#1a5632);border-radius:calc(var(--unit) * .006);padding:calc(var(--unit) * .01);width:calc(var(--unit) * .98);max-width:100%;display:flex;flex-direction:column;flex:1;max-height:calc(var(--unit) * .94);box-shadow:inset 0 calc(var(--unit) * .002) calc(var(--unit) * .008) #0000004d,0 calc(var(--unit) * .004) calc(var(--unit) * .012) #0003;touch-action:none;-webkit-user-select:none;user-select:none}.top-row{display:flex;justify-content:center;align-items:center;margin-bottom:calc(var(--unit) * .015);gap:calc(var(--unit) * .008);width:100%}.spacer{width:calc(var(--unit) * .119)}.card-pile{width:calc(var(--unit) * .119);height:calc(var(--unit) * .168);border:calc(var(--unit) * .002) dashed rgba(255,255,255,.3);border-radius:calc(var(--unit) * .008);position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s}.card-pile.stock{cursor:pointer}.card-pile.stock:hover{border-color:#fff9;transform:scale(1.05)}.card-pile.foundation{background:#ffffff0d}.card{width:calc(var(--unit) * .119);height:calc(var(--unit) * .168);background:#fff;border-radius:calc(var(--unit) * .008);position:absolute;top:0;left:0;box-shadow:0 calc(var(--unit) * .002) calc(var(--unit) * .004) #0003;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--unit) * .005);font-size:calc(var(--unit) * .085);cursor:grab;transition:transform .2s;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;line-height:1;font-family:Segoe UI,Arial,sans-serif;color:#000;overflow:hidden;touch-action:none}.card[draggable=true]{cursor:grab;transition:opacity .2s;-webkit-user-drag:element}.card[draggable=true]:active{cursor:grabbing}.card-dragging{opacity:0!important}.card-flying{animation:flyToFoundation .4s ease-in-out forwards;z-index:1000}@keyframes flyToFoundation{0%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(calc(var(--unit) * -.15)) scale(1.1);opacity:.9}to{transform:translateY(calc(var(--unit) * -.3)) translate(calc(var(--unit) * .2)) scale(.8);opacity:0}}.card img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block;animation:cardShimmer 8s ease-in-out infinite}@keyframes cardShimmer{0%{filter:brightness(1) contrast(1) saturate(1)}25%{filter:brightness(1.05) contrast(1.02) saturate(1.1)}50%{filter:brightness(1.08) contrast(1.05) saturate(1.15) hue-rotate(2deg)}75%{filter:brightness(1.05) contrast(1.02) saturate(1.1)}to{filter:brightness(1) contrast(1) saturate(1)}}.card-loading{background:#ffffff80;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:.8}}.card-rank{font-size:calc(var(--unit) * .035);font-weight:700}.card-suit{font-size:calc(var(--unit) * .045);font-family:Segoe UI Symbol,Arial Unicode MS,sans-serif}.card[data-suit=hearts] .card-rank,.card[data-suit=hearts] .card-suit,.card[data-suit=diamonds] .card-rank,.card[data-suit=diamonds] .card-suit{color:#dc143c}.card[data-suit=spades] .card-rank,.card[data-suit=spades] .card-suit,.card[data-suit=clubs] .card-rank,.card[data-suit=clubs] .card-suit{color:#000}.card[draggable=true]:hover{transform:translateY(calc(var(--unit) * -.003));box-shadow:0 calc(var(--unit) * .003) calc(var(--unit) * .006) #0000004d}.card.face-down{background:linear-gradient(135deg,#667eea,#764ba2);color:#ffffff4d;cursor:default}.card.face-down:hover{transform:none}.card-back{width:100%;height:100%;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:calc(var(--unit) * .008);position:absolute;top:0;left:0;box-shadow:0 calc(var(--unit) * .002) calc(var(--unit) * .004) #0003;display:flex;align-items:center;justify-content:center;font-size:calc(var(--unit) * .085);color:#ffffff4d;-webkit-user-select:none;user-select:none;overflow:hidden}.card-back img{width:100%;height:100%;object-fit:cover;pointer-events:none;display:block;animation:cardBackGlow 10s ease-in-out infinite}@keyframes cardBackGlow{0%{filter:brightness(1) saturate(1) hue-rotate(0deg)}33%{filter:brightness(1.1) saturate(1.2) hue-rotate(5deg)}66%{filter:brightness(1.15) saturate(1.3) hue-rotate(-5deg)}to{filter:brightness(1) saturate(1) hue-rotate(0deg)}}.card-empty{width:calc(var(--unit) * .119);height:calc(var(--unit) * .168);background:#ffffff0d;border-radius:calc(var(--unit) * .008);position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--unit) * .065);color:#ffffff80;-webkit-user-select:none;user-select:none}.pile-placeholder{font-size:calc(var(--unit) * .045);color:#fff3;font-weight:700;-webkit-user-select:none;user-select:none}.tableau{display:flex;gap:calc(var(--unit) * .008);justify-content:center;flex:1;align-items:flex-start}.tableau-column{width:calc(var(--unit) * .119);min-height:calc(var(--unit) * .168);border:calc(var(--unit) * .002) dashed rgba(255,255,255,.2);border-radius:calc(var(--unit) * .008);position:relative;padding-top:0;display:flex;align-items:flex-start;justify-content:center}.tableau-column .card{left:0}.tableau-column .card{position:absolute}@media (max-width: 768px) and (max-height: 600px){.app{padding:min(1vh,1vw)}.header{padding:min(1vh,1vw);margin-bottom:min(1vh,1vw)}h1{font-size:min(3vh,3vw)}.controls{font-size:min(1.5vh,1.5vw)}.btn-primary{font-size:min(1.5vh,1.5vw);padding:min(.8vh,.8vw) min(1.5vh,1.5vw)}.game-area{padding:min(2vh,2vw)}.top-row{gap:min(2vh,2vw);margin-bottom:min(2vh,2vw)}.stock-waste,.foundations,.tableau{gap:min(1vh,1vw)}}body{margin:0;padding:0}
