*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color: #6366f1;--primary-hover: #4f46e5;--secondary-color: #ec4899;--accent-color: #10b981;--warning-color: #f59e0b;--background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg: rgba(255, 255, 255, .95);--text-primary: #1f2937;--text-secondary: #6b7280;--text-light: rgba(255, 255, 255, .9);--border-radius: 16px;--shadow: 0 10px 25px rgba(0, 0, 0, .1);--shadow-hover: 0 15px 35px rgba(0, 0, 0, .15)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--background);min-height:100vh;color:var(--text-primary);overflow-x:hidden}.app-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:1rem;gap:2rem}.app-header{text-align:center;padding:2rem 0 1rem}.app-header h1{font-size:clamp(2rem,8vw,3rem);font-weight:800;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 8px rgba(0,0,0,.3);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.subtitle{color:var(--text-light);font-size:1.1rem;font-weight:500;opacity:.9}.app-main{flex:1;display:flex;flex-direction:column;gap:2rem;align-items:center}.mode-selection{width:100%;max-width:400px}.mode-buttons{display:flex;gap:1rem;width:100%}.mode-button{flex:1;--height: 3.5rem;--border-radius: 18px;font-size:1.1rem;font-weight:700;letter-spacing:.5px;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:0}.mode-button::part(base){border:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%}.mode-button:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.mode-button.active{--background-color: #dc2626;--color: white;box-shadow:var(--shadow)}.mode-button.active::part(base){background-color:#dc2626}.mode-button:not(.active){--background-color: rgba(255, 255, 255, .15);--background-color-hover: rgba(255, 255, 255, .25);--color: var(--text-light)}.action-section{width:100%;max-width:280px}.action-button{width:100%;--height: 4rem;--border-radius: var(--border-radius);--background-color: var(--primary-color);--background-color-hover: var(--primary-hover);--color: white;font-size:1.25rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;transition:all .3s ease;box-shadow:var(--shadow);--border-width: 3px;--border-color: white}.action-button:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}.action-button:active{transform:translateY(-1px)}.action-button.loading{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.action-button.shake{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.result-section{width:100%;max-width:350px;flex:1;display:flex;align-items:center}.result-card{width:100%;--border-radius: var(--border-radius);--background-color: var(--card-bg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);min-height:300px}.result-content{display:flex;align-items:center;justify-content:center;padding:2rem;min-height:250px}.result-placeholder{text-align:center;color:var(--text-secondary)}.placeholder-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.result-placeholder p{font-size:1.1rem;font-weight:500}.number-result{font-size:min(40vw,320px);font-weight:900;color:var(--primary-color);text-align:center;line-height:1;text-shadow:0 4px 8px rgba(0,0,0,.1);animation:numberAppear .3s ease-out}@keyframes numberAppear{0%{opacity:0;transform:scale(.5) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.card-sprite{width:min(20vw,160px);height:min(28vw,224px);border-radius:12px;box-shadow:0 8px 25px #00000026;margin-bottom:1rem;transition:transform .3s ease;background-repeat:no-repeat}.card-sprite:hover{transform:scale(1.05)}.card-name{font-size:min(40vw,320px);font-weight:900;margin-top:.5rem;line-height:1;text-shadow:0 4px 8px rgba(0,0,0,.1)}.card-name.hearts,.card-name.diamonds{color:#dc2626}.card-name.spades,.card-name.clubs{color:#1f2937}@keyframes cardAppear{0%{opacity:0;transform:translateY(30px) rotateY(-90deg)}to{opacity:1;transform:translateY(0) rotateY(0)}}.card-result{text-align:center;animation:cardAppear .4s ease-out;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.app-footer{text-align:center;padding:1rem 0}.footer-text{color:var(--text-light);font-size:1rem;font-weight:500;opacity:.8}@media (max-width: 480px){.app-container{padding:.75rem;gap:1.5rem}.app-header{padding:1.5rem 0 .5rem}.result-card{min-height:250px}.result-content{padding:1.5rem;min-height:200px}}@media (max-height: 600px){.app-container{gap:1rem}.app-header{padding:1rem 0 .5rem}.result-card{min-height:200px}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}sl-radio-button:focus-visible::part(button),sl-button:focus-visible::part(base){outline:3px solid var(--accent-color);outline-offset:2px}@media (prefers-contrast: high){:root{--background: #000;--card-bg: #fff;--text-primary: #000;--text-light: #fff}}