:root{--color-bg: #1a1a2e;--color-surface: #16213e;--color-accent: #e94560;--color-accent2: #0f3460;--color-text: #eaeaea;--color-muted: #888;--color-success: #4caf50;--radius: 8px;--transition: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Lato,sans-serif;background-color:var(--color-bg);color:var(--color-text);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.btn{font-family:Lato,sans-serif;font-size:1rem;font-weight:700;padding:.6rem 1.4rem;border:none;border-radius:var(--radius);cursor:pointer;transition:box-shadow var(--transition),transform var(--transition),background var(--transition);letter-spacing:.04em}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:not(:disabled):hover{box-shadow:0 0 14px var(--color-accent);transform:translateY(-1px)}.btn-secondary{background:var(--color-accent2);color:var(--color-text);border:1px solid rgba(255,255,255,.1)}.btn-secondary:not(:disabled):hover{box-shadow:0 0 10px #0f3460cc;transform:translateY(-1px)}.btn-large{font-size:1.15rem;padding:.85rem 2rem}.error-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center;color:var(--color-accent);font-size:1.1rem}.page-header{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;background:var(--color-surface);border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap}.page-title{font-family:Cinzel,serif;font-size:1.3rem;font-weight:600;color:var(--color-text);flex:1}.stack-stats{font-size:.9rem;color:var(--color-muted);white-space:nowrap}.home-page{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at center,#1e2a4a 0%,var(--color-bg) 70%)}.home-content{display:flex;flex-direction:column;align-items:center;gap:2rem;text-align:center;max-width:480px;width:100%}.home-title{font-family:Cinzel,serif;font-size:clamp(2.5rem,8vw,4rem);font-weight:700;color:var(--color-accent);text-shadow:0 0 30px rgba(233,69,96,.5);letter-spacing:.06em}.home-subtitle{font-family:Cinzel,serif;font-size:clamp(1rem,3vw,1.4rem);font-weight:400;color:var(--color-muted);margin-top:-1.5rem;letter-spacing:.12em}.toggle-label{display:flex;align-items:center;gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-track{position:relative;display:inline-block;width:48px;height:26px;flex-shrink:0}.toggle-input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-accent2);border-radius:26px;transition:background var(--transition)}.toggle-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:var(--color-muted);border-radius:50%;transition:transform var(--transition),background var(--transition)}.toggle-input:checked+.toggle-slider{background:var(--color-accent)}.toggle-input:checked+.toggle-slider:before{transform:translate(22px);background:#fff}.toggle-text{font-size:.9rem;color:var(--color-text)}.category-page{flex:1;display:flex;flex-direction:column}.category-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;padding:2rem;max-width:700px;margin:0 auto;width:100%}.category-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2rem 1rem;background:var(--color-surface);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);cursor:pointer;transition:box-shadow var(--transition),transform var(--transition),border-color var(--transition);color:var(--color-text);text-align:center}.category-card:hover{box-shadow:0 0 20px #e945604d;border-color:var(--color-accent);transform:translateY(-2px)}.category-name{font-family:Cinzel,serif;font-size:1.1rem;font-weight:600}.category-count{font-size:.85rem;color:var(--color-muted)}.cardstack-page{flex:1;display:flex;flex-direction:column}.deck-grid{display:flex;flex-wrap:wrap;gap:1.5rem;padding:2rem 1.5rem;justify-content:center;align-items:flex-start}.deck-slot{display:flex;flex-direction:column;align-items:center;gap:.5rem}.deck-card{width:160px;height:240px;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--color-surface);cursor:pointer;border:2px solid transparent;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition),opacity var(--transition)}.deck-card:not(.deck-card--empty):hover{border-color:var(--color-accent);box-shadow:0 0 18px #e9456066;transform:translateY(-3px)}.deck-card--landscape{width:240px;height:160px}.deck-card--empty{opacity:.45;cursor:default}.deck-card img{width:100%;height:100%;object-fit:cover;display:block}.deck-empty-badge{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;color:#fff;font-family:Cinzel,serif;font-size:1rem;font-weight:600;letter-spacing:.08em}.held-btn{width:160px;height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:var(--color-surface);border:2px solid var(--color-accent2);border-radius:var(--radius);color:var(--color-text);font-family:Cinzel,serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.held-btn:not(:disabled):hover{border-color:var(--color-accent);box-shadow:0 0 18px #e9456066;transform:translateY(-3px)}.held-btn:disabled{opacity:.4;cursor:not-allowed}.held-icon{font-size:1.8rem}.btn-reshuffle{font-family:Lato,sans-serif;font-size:.8rem;font-weight:700;padding:.35rem .9rem;background:var(--color-accent2);color:var(--color-text);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);cursor:pointer;transition:box-shadow var(--transition),transform var(--transition);letter-spacing:.04em}.btn-reshuffle:hover{box-shadow:0 0 10px #0f3460cc;transform:translateY(-1px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;padding:1.5rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-height:90vh}.modal-close{position:absolute;top:-.5rem;right:-.5rem;z-index:10;width:36px;height:36px;border-radius:50%;border:none;background:var(--color-accent);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:box-shadow var(--transition)}.modal-close:hover{box-shadow:0 0 12px var(--color-accent)}.modal-actions{display:flex;gap:1rem}.card-flip-container{perspective:1000px}.card-flip-container.portrait{width:min(80vw,400px)}.card-flip-container.landscape{width:min(90vw,600px)}.card-flip-inner{position:relative;width:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.card-flip-container.portrait .card-flip-inner{padding-bottom:140%}.card-flip-container.landscape .card-flip-inner{padding-bottom:70%}.card-flip-container.flipped .card-flip-inner{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);overflow:hidden}.card-face img{width:100%;height:100%;object-fit:contain;display:block}.card-back{transform:rotateY(180deg)}
