body,html{margin:0;padding:0;height:100%;font-family:Arial,sans-serif}.spider-solitaire-app{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#1a6c4e,#154734);color:#fff}.game-background{flex:1;padding:20px;display:flex;flex-direction:column}.game-header{text-align:center;margin-bottom:30px}.game-header h1{font-size:2.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);margin-bottom:20px}.start-button{padding:12px 24px;font-size:1.2rem;background-color:#e0a800;color:#000;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.start-button:hover{background-color:#ffc107}.game-table{flex:1;display:flex;flex-direction:column;gap:20px}.card-area{flex:1;background-color:#0003;border-radius:8px;padding:20px;display:flex;justify-content:center;align-items:center}.placeholder{font-size:1.5rem;color:#ffffffb3}.control-area{position:fixed;bottom:0;left:0;right:0;background-color:#154734e6;padding:15px 0;z-index:1000;box-shadow:0 -3px 15px #00000080;display:flex;justify-content:center;gap:15px}.control-button{padding:8px 16px;background-color:#4a6fa5;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.control-button:hover{background-color:#5a83bd}.game-footer{text-align:center;padding:10px;background-color:#0000004d}.columns-container{display:flex;justify-content:space-around;width:100%;height:100%;padding:20px 0}.game-info{display:flex;justify-content:center;gap:30px;margin-top:10px;font-size:1.2rem}.game-info span{background-color:#0003;padding:5px 10px;border-radius:4px}.zoom-controls{position:absolute;top:10px;right:10px;display:flex;align-items:center;background-color:#0009;border-radius:20px;padding:5px 10px;z-index:100}.zoom-controls button{width:30px;height:30px;border-radius:50%;border:none;background-color:#4a6fa5;color:#fff;font-size:18px;cursor:pointer;margin:0 5px}.zoom-controls span{margin:0 10px;color:#fff}@media (max-width: 768px){.game-header h1{font-size:1.8rem}.start-button{padding:10px 20px;font-size:1rem}.columns-container{flex-wrap:wrap;gap:10px;padding:10px}.column{width:60px;min-height:84px;margin:0 5px}.card{width:60px;height:84px}.control-area{padding:10px;gap:10px}.control-button{padding:6px 12px;font-size:.9rem}.game-info{font-size:1rem;gap:15px}.zoom-controls{top:5px;right:5px;padding:3px 8px}.zoom-controls button{width:25px;height:25px;font-size:16px}}@media (max-width: 480px){.game-header h1{font-size:1.5rem}.column{width:50px;min-height:70px}.card{width:50px;height:70px}.control-area{flex-wrap:wrap}.control-button{flex:1;min-width:80px}}@media (hover: none){.card:hover{transform:none}.control-button:hover{background-color:#4a6fa5}}.card{width:100px;height:140px;border-radius:5px;position:absolute;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:1px 1px 5px #0000004d;background-color:#fff;top:0;transition:transform .15s ease,box-shadow .15s ease,margin-top .15s ease}.card img{width:100%;height:100%;object-fit:contain;pointer-events:none}.card-selected{transform:translateY(-10px);box-shadow:0 0 10px #ffd700cc;border:2px solid gold}.card-valid-target{box-shadow:0 0 10px #00ff0080}.card-back{background-color:#26418f}.card-dragging{opacity:.5;transform:scale(1.05);box-shadow:0 0 15px #00000080}.card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f0f0f0;color:#555;font-size:14px;text-align:center;border-radius:5px}.column{position:relative;min-height:140px;width:100px;margin:0 10px;padding-bottom:160px}.column-drop-target{border:2px dashed rgba(0,200,0,.5);background-color:#00c8001a}.column .card{margin-top:var(--card-offset, 0px)}.column-empty{background-color:#ffffff1a;border:2px dashed rgba(255,255,255,.3);border-radius:5px;height:140px}.drag-preview{position:fixed;pointer-events:none;z-index:1000;opacity:.8;transform-origin:top left}@media (max-width: 768px){.card{width:60px;height:84px}.column{width:60px;min-height:84px;margin:0 5px}.card-selected{transform:translateY(-6px)}}@media (max-width: 480px){.card{width:50px;height:70px}.column{width:50px;min-height:70px}.card-selected{transform:translateY(-4px)}}@media (hover: none){.card{cursor:default}.card-selected{transform:translateY(-4px)}}