:root{--card-w: 120px;--card-h: 192px;--deck-bg: #1a1040;--deck-pattern: #2a1860;--gold: #c9a84c;--cream: #fdf6e3;color:#e8e0d0;background:linear-gradient(135deg,#0d0b1a,#1a1040);font-family:Segoe UI,Noto Sans,sans-serif;min-height:100vh}*{box-sizing:border-box}body{margin:0}.app-root{max-width:960px;margin:0 auto;padding:24px 16px;display:grid;gap:24px}.app-header{text-align:center}.app-header h1{font-size:2.2rem;margin:0;color:var(--gold);letter-spacing:.1em;text-transform:uppercase}.subtitle{margin-top:4px;color:#9a8ec0;font-size:.95rem}.panel{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}h1,h2,p{margin:0}h2{color:var(--gold);font-size:1.2rem;margin-bottom:12px}.table-layout{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}.deck-area{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:160px}.deck-stack{position:relative;width:var(--card-w);height:var(--card-h)}.deck-card-back{position:absolute;width:var(--card-w);height:var(--card-h);border-radius:10px;background:repeating-linear-gradient(45deg,var(--deck-pattern),var(--deck-pattern) 6px,var(--deck-bg) 6px,var(--deck-bg) 12px);border:2px solid var(--gold);box-shadow:0 2px 8px #00000080}.deck-card-back:after{content:"✦";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;font-size:2rem;color:var(--gold);opacity:.6}.deck-counter{font-size:.85rem;color:#9a8ec0;text-align:center}.deck-empty{width:var(--card-w);height:var(--card-h);border-radius:10px;border:2px dashed rgba(255,255,255,.15);display:grid;place-content:center;color:#555;font-size:.85rem}.is-shuffling .shuffle-card-0{animation:shuffleL .4s ease-in-out 0s infinite alternate}.is-shuffling .shuffle-card-1{animation:shuffleR .4s ease-in-out .05s infinite alternate}.is-shuffling .shuffle-card-2{animation:shuffleL .4s ease-in-out .1s infinite alternate}.is-shuffling .shuffle-card-3{animation:shuffleR .4s ease-in-out .15s infinite alternate}.is-shuffling .shuffle-card-4{animation:shuffleL .4s ease-in-out .2s infinite alternate}@keyframes shuffleL{0%{transform:translate(0) rotate(0)}to{transform:translate(-30px) rotate(-8deg)}}@keyframes shuffleR{0%{transform:translate(0) rotate(0)}to{transform:translate(30px) rotate(8deg)}}.deck-cut-container{display:flex;gap:24px}.deck-cut-half{position:relative;width:var(--card-w);height:var(--card-h);cursor:pointer;transition:transform .25s}.deck-cut-half:hover{transform:translateY(-6px)}.cut-half-label{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:.8rem;color:#9a8ec0}.controls{flex:1;display:grid;gap:12px;min-width:260px}.controls-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button,select{border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:#e8e0d0;border-radius:8px;padding:10px 16px;font-size:.9rem;cursor:pointer;transition:background .2s,border-color .2s}button:hover:not(:disabled){background:#ffffff1f;border-color:var(--gold)}button:disabled{cursor:not-allowed;opacity:.35}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a84c' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.cut-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#9a8ec0}.cut-label input[type=range]{width:120px;accent-color:var(--gold)}.cut-value{min-width:2ch;text-align:right;color:var(--gold)}.status{color:#c0b4dc;min-height:20px;font-size:.85rem}.cards-grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;justify-items:center}.card-item{display:grid;gap:8px;justify-items:center}.tarot-card{width:var(--card-w);height:var(--card-h);border-radius:10px;display:grid;place-content:center;text-align:center;padding:8px;transition:transform .3s,box-shadow .3s;cursor:pointer}.tarot-card-face{background:var(--cream);border:3px solid;box-shadow:0 4px 14px #0006}.tarot-card-face:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000080}.tarot-card.is-reversed{transform:rotate(180deg)}.tarot-card.is-reversed:hover{transform:rotate(180deg) translateY(4px)}.card-face-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;gap:2px;overflow:hidden}.card-top-label{font-size:.72rem;color:#333;text-align:center;line-height:1.2;font-weight:600}.card-center-emoji{font-size:2.4rem;line-height:1}.card-bottom-label{font-size:.65rem;color:#666;text-align:center}.card-reversed-indicator{font-size:.6rem;color:#999}.position-label{font-size:.8rem;color:#9a8ec0;text-align:center}.interpretation{margin-top:12px;line-height:1.6;color:#d4cceb;white-space:pre-wrap}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-content:center;z-index:100;padding:20px}.modal-content{background:#1e1550;border:1px solid var(--gold);border-radius:16px;padding:28px 24px;max-width:400px;width:100%;position:relative;color:#e8e0d0}.modal-content h3{margin:0 0 8px;color:var(--gold);font-size:1.3rem}.modal-en{color:#9a8ec0;font-size:.9rem;margin-bottom:12px}.modal-position{margin-bottom:6px}.modal-orientation{font-size:1.1rem}.modal-close{position:absolute;top:10px;right:14px;background:none;border:none;color:#666;font-size:1.4rem;cursor:pointer;padding:4px}.modal-close:hover{color:var(--gold)}.result h2{margin-top:18px}.result h2:first-child{margin-top:0}@media (max-width: 640px){:root{--card-w: 96px;--card-h: 154px}.app-root{padding:12px 8px}.app-header h1{font-size:1.6rem}.table-layout{flex-direction:column;align-items:center}.controls{min-width:0;width:100%}.card-center-emoji{font-size:1.8rem}.card-top-label{font-size:.65rem}}
