:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;gap:1.5rem}.header{text-align:center}.header h1{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#e74c3c,#e67e22,#f1c40f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{margin:.25rem 0 0;font-size:.8rem;color:#fff6}.card-area{position:relative;width:300px;height:420px;flex-shrink:0}.card-shadow{position:absolute;top:8px;right:-4px;bottom:-8px;left:4px;border-radius:16px;background:#ffffff08;border:1px solid rgba(255,255,255,.04)}.playing-card{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;perspective:800px;transition:transform .3s ease,opacity .3s ease}.playing-card.swipe-left{transform:translate(-120%) rotate(-15deg);opacity:0}.playing-card.swipe-right{transform:translate(120%) rotate(15deg);opacity:0}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}.playing-card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:16px;border:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;overflow:hidden}.card-front{background:linear-gradient(145deg,#1a1a2e,#16213e);box-shadow:0 8px 32px #0006}.card-front:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:12px;border:1px solid rgba(255,255,255,.06);pointer-events:none}.card-back{background:linear-gradient(145deg,#1a1a2e,#0f1923);transform:rotateY(180deg);box-shadow:0 8px 32px #0006;gap:1.25rem}.card-back:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:12px;border:1px solid var(--accent, rgba(255,255,255,.06));opacity:.3;pointer-events:none}.card-number{font-size:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffffff4d;letter-spacing:.1em}.card-icon{font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}.card-hint{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.card-category{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .75rem;border-radius:999px;color:#fff;font-weight:600}.card-text{margin:0;font-size:1.05rem;text-align:center;line-height:1.6;color:#ffffffe6;font-weight:500}.controls{display:flex;align-items:center;gap:1.5rem}.btn{font:inherit;font-size:.85rem;font-weight:600;padding:.6rem 1.5rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#ffffff0d;color:#fafafa;cursor:pointer;transition:background .2s,border-color .2s}.btn:hover:not(:disabled){background:#ffffff1a;border-color:#fff3}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-next{background:#e74c3c26;border-color:#e74c3c4d}.btn-next:hover{background:#e74c3c40!important}.counter{font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffffff59}.footer{margin-top:auto;padding-top:1rem}.footer p{margin:0;font-size:.7rem;color:#fff3;text-align:center}