:root{--cream: #fff6ef;--cream-deep: #f7e9dc;--card: #fffdfa;--ink: #3a2e39;--ink-soft: #6b5d68;--coral: #ff6f61;--coral-deep: #e8564a;--gold: #f2b705;--cat-general: #f2a65a;--cat-work: #6c89c9;--cat-social: #e07a9b;--cat-selfcare: #7fb77e;--cat-survival: #e8615a;--cat-existential: #9b7ede;--font-display: "Fraunces", Georgia, "Times New Roman", serif;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--radius-card: 28px;--radius-chip: 999px;--shadow-card: 0 18px 40px -12px rgba(58, 46, 57, .28), 0 4px 12px -6px rgba(58, 46, 57, .18);--shadow-soft: 0 6px 18px -8px rgba(58, 46, 57, .22)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-ui);color:var(--ink);background:radial-gradient(120% 90% at 50% -10%,var(--cream) 0%,var(--cream-deep) 100%) fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;padding:max(env(safe-area-inset-top),14px) 20px max(env(safe-area-inset-bottom),16px);overflow-x:hidden;overflow-y:auto}.app__header{text-align:center;margin-bottom:14px}.app__title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.55rem,7vw,2rem);letter-spacing:-.02em;margin:0;line-height:1.05}.app__title .siren{display:inline-block;transform-origin:center}.app__subtitle{margin:6px 0 0;font-size:.82rem;color:var(--ink-soft);font-weight:500}.filter{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;margin:6px -2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.filter::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;min-height:44px;border-radius:var(--radius-chip);background:#ffffffb3;box-shadow:inset 0 0 0 1.5px #3a2e391a;font-size:.82rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,color .15s ease,background .15s ease}.chip:active{transform:scale(.95)}.chip[data-active=true]{color:#fff;background:var(--chip-color, var(--coral));box-shadow:0 6px 14px -6px var(--chip-color, var(--coral))}.stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;perspective:1400px;padding:12px 0}.deck{position:relative;width:min(78vw,300px);height:100%;max-height:500px;min-height:320px}.deck__layer{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius-card);background:linear-gradient(160deg,#fff,#ffe9e2);box-shadow:var(--shadow-card);border:1.5px solid rgba(255,111,97,.25)}.deck__face{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:var(--radius-card);text-align:center;padding:24px}.deck__siren{font-size:3.4rem;line-height:1;filter:drop-shadow(0 6px 10px rgba(232,86,74,.35))}.deck__prompt{font-family:var(--font-display);font-weight:600;font-size:1.28rem;color:var(--ink);max-width:15ch}.deck__hint{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);display:inline-flex;align-items:center;gap:6px}.card{position:relative;width:min(84vw,340px);height:100%;max-height:540px;min-height:0;border-radius:var(--radius-card);background:var(--card);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;border:1.5px solid rgba(58,46,57,.06)}.card__wash{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(130% 80% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent) 0%,transparent 62%);pointer-events:none}.card__kicker{position:relative;display:flex;align-items:center;gap:8px;padding:22px 24px 0;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.card__kicker .emoji{font-size:1.15rem}.card__art{position:relative;margin:14px 24px 0;border-radius:18px;aspect-ratio:1 / 1;object-fit:cover;width:calc(100% - 48px);box-shadow:var(--shadow-soft)}.card__text{position:relative;flex:1;display:flex;align-items:center;padding:18px 26px 26px;font-family:var(--font-display);font-weight:500;line-height:1.22;letter-spacing:-.015em;font-size:clamp(1.35rem,6.4vw,1.85rem);text-wrap:balance}.card--has-art .card__text{font-size:clamp(1.1rem,5vw,1.4rem);flex:0 0 auto}.card__tagline{position:relative;padding:0 26px 22px;font-size:.74rem;font-style:italic;color:var(--ink-soft)}.actions{display:flex;align-items:center;gap:12px;margin-top:18px}.btn-draw{flex:1;height:58px;border-radius:18px;background:linear-gradient(180deg,var(--coral) 0%,var(--coral-deep) 100%);color:#fff;font-size:1.05rem;font-weight:700;letter-spacing:.01em;box-shadow:0 12px 24px -10px var(--coral-deep);display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s ease,box-shadow .12s ease}.btn-draw:active{transform:translateY(2px) scale(.99);box-shadow:0 6px 14px -8px var(--coral-deep)}.btn-icon{width:58px;height:58px;border-radius:18px;background:#ffffffbf;box-shadow:inset 0 0 0 1.5px #3a2e391a;display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;transition:transform .12s ease,background .15s ease}.btn-icon:active{transform:scale(.92)}.btn-icon[data-on=true]{background:#ffe1e6;box-shadow:inset 0 0 0 1.5px var(--cat-social)}.btn-icon.copied{background:#e4f3e2;box-shadow:inset 0 0 0 1.5px var(--cat-selfcare)}.footer-note{text-align:center;font-size:.72rem;color:var(--ink-soft);margin-top:14px;min-height:1em}@keyframes card-in{0%{opacity:0;transform:translateY(14px) rotateX(10deg) scale(.95)}to{opacity:1;transform:none}}.card--enter{transform-origin:center 40%;animation:card-in .5s cubic-bezier(.22,.68,.2,1) both}@keyframes deck-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.deck--enter{animation:deck-in .4s ease both}@keyframes siren-wiggle{0%,to{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}.deck__siren{animation:siren-wiggle 2.4s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.card--enter,.deck--enter,.deck__siren{animation:none}}@media (max-height: 620px){.app__subtitle{display:none}.app__header{margin-bottom:8px}.deck{min-height:220px}.deck__siren{font-size:2.6rem}.btn-draw,.btn-icon{height:50px}.card__text{font-size:clamp(1.1rem,5vw,1.5rem)}}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
