/* Mystic Cat Tarot — blind pick spread UI */

:root{
  --bg0:#070611; --bg1:#0a0820; --ink:#f4f1ff; --muted:rgba(244,241,255,.72);
  --gold:#f7d07a; --gold2:#ffefb5; --violet:#a98cff; --aqua:#7bf0ff; --rose:#ff5aa7;
  --shadow:0 20px 60px rgba(0,0,0,.55); --shadow2:0 10px 30px rgba(0,0,0,.35);
  --title:"Cinzel", serif; --body:"Noto Serif SC", serif; --motion:0.7;
}
*{box-sizing:border-box} html,body{height:100%; min-height:100%}
html{background:var(--bg0); overscroll-behavior:none}
body{margin:0;font-family:var(--body);color:var(--ink);background:radial-gradient(1100px 800px at 18% 10%, rgba(169,140,255,.18), transparent 60%),radial-gradient(900px 650px at 85% 18%, rgba(123,240,255,.12), transparent 58%),radial-gradient(700px 500px at 55% 80%, rgba(255,90,167,.10), transparent 60%),linear-gradient(180deg, var(--bg0), var(--bg1));overflow:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%}
#stars{position:fixed; inset:0; width:100%; height:100%; z-index:-2}.grain{position:fixed; inset:-40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:overlay; opacity:.18; pointer-events:none; z-index:-1}

.appShell{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px))}
.phoneFrame{width:min(100%, 440px); height:min(92vh, 920px); min-height:min(92vh, 920px); display:flex; flex-direction:column; border-radius:34px; background:linear-gradient(180deg, rgba(12,10,30,.88), rgba(8,7,24,.92)); border:1px solid rgba(247,208,122,.16); box-shadow:var(--shadow); overflow:hidden; position:relative}
@supports (height: 100dvh){.phoneFrame{height:min(92dvh, 920px); min-height:min(92dvh, 920px)}}
.phoneFrame::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%, rgba(247,208,122,.08), transparent 60%); pointer-events:none}
.appTopbar{position:relative; z-index:2; padding:16px 18px 12px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.brand{display:flex; gap:12px; align-items:center; min-width:0; flex:1}.brand>div:last-child{min-width:0}.brand__title{font-family:var(--title); letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-size:14px}.brand__sub{font-size:12px; color:var(--muted); letter-spacing:.08em; line-height:1.25; max-width:280px}
.langMenu{position:relative; flex:0 0 auto}
.langMenu__panel[hidden]{display:none !important}
.langMenu__panel{position:absolute; top:calc(100% + 10px); right:0; min-width:132px; padding:8px; border-radius:18px; border:1px solid rgba(247,208,122,.18); background:#141126; box-shadow:0 18px 40px rgba(0,0,0,.42); display:grid; gap:6px; z-index:12; transform-origin:top right; animation:langMenuIn 180ms cubic-bezier(.2,.9,.15,1)}
.langMenu__item{position:relative; width:100%; text-align:left; border:1px solid rgba(244,241,255,.10); background:#1b1638; color:var(--ink); border-radius:12px; padding:10px 38px 10px 12px; font:inherit; font-size:13px; cursor:pointer; transition:transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease}
.langMenu__item:hover{transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(247,208,122,.24)}
.langMenu__item.is-active{background:linear-gradient(180deg, rgba(247,208,122,.18), rgba(247,208,122,.10)); border-color:rgba(247,208,122,.42); color:rgba(255,239,181,.98); box-shadow:0 0 0 1px rgba(247,208,122,.12), inset 0 0 18px rgba(247,208,122,.05)}
.langMenu__item.is-active::after{content:"✓"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:rgba(255,239,181,.98); font-size:13px; font-weight:700}
.sigil{width:40px;height:40px;border-radius:14px;position:relative;overflow:hidden;background:radial-gradient(circle at 28% 30%, rgba(255,239,181,.55), transparent 40%),radial-gradient(circle at 70% 70%, rgba(169,140,255,.35), transparent 48%),linear-gradient(135deg, rgba(21,17,58,.86), rgba(13,11,34,.86));box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(247,208,122,.18)}
.sigil__moon{position:absolute;width:18px;height:18px;border:2px solid rgba(247,208,122,.9);border-radius:999px;left:10px;top:9px}.sigil__eye{position:absolute;left:11px;top:17px;width:18px;height:10px;border:1px solid rgba(123,240,255,.75);border-radius:999px;transform:rotate(-12deg)}.sigil__paw{position:absolute;right:7px;bottom:8px;width:10px;height:10px;border-radius:5px;background:rgba(255,90,167,.55);box-shadow:-10px -4px 0 0 rgba(255,90,167,.36), -2px -12px 0 0 rgba(255,90,167,.32)}
.ghost{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:10px 14px;background:rgba(21,17,58,.35);border:1px solid rgba(247,208,122,.18);color:var(--ink);cursor:pointer;box-shadow:var(--shadow2);transition:transform 160ms ease, background 160ms ease;flex:0 0 auto}.ghost:hover{transform:translateY(-1px);background:rgba(21,17,58,.48)}.ghost--small{padding:8px 12px;font-size:12px}.ghost--icon{width:42px;height:42px;padding:0}.ghost__icon{width:18px;height:18px;display:block}.ghost--lang{color:rgba(244,241,255,.92); gap:8px; padding:0 12px; min-width:64px; height:42px}.ghost__langCode{display:inline-flex; align-items:center; justify-content:center; min-width:18px; font-family:var(--title); font-size:12px; line-height:1; letter-spacing:.08em; color:rgba(255,239,181,.96)}.ghost__caret{display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:rgba(244,241,255,.72); transition:transform 180ms ease, color 180ms ease}.langMenu.is-open .ghost__caret{transform:rotate(180deg); color:rgba(255,239,181,.96)}
@keyframes langMenuIn{from{opacity:0; transform:translateY(-6px) scale(.96)}to{opacity:1; transform:translateY(0) scale(1)}}

.progressBar{position:relative; z-index:2; display:flex; align-items:center; gap:8px; padding:0 18px 16px; overflow:hidden}.progressBar__step{display:flex; align-items:center; gap:6px; color:rgba(244,241,255,.38); font-size:12px; white-space:nowrap; min-width:0}.progressBar__step span:last-child{overflow:hidden; text-overflow:ellipsis}.progressBar__step.is-active{color:rgba(244,241,255,.85)}.progressBar__step.is-current{color:var(--gold2)}.progressBar__dot{width:10px; height:10px; border-radius:99px; border:1px solid rgba(244,241,255,.34); background:transparent; flex:0 0 auto}.progressBar__step.is-active .progressBar__dot{background:rgba(169,140,255,.45); border-color:rgba(169,140,255,.85)}.progressBar__step.is-current .progressBar__dot{background:rgba(247,208,122,.92); border-color:rgba(247,208,122,1); box-shadow:0 0 14px rgba(247,208,122,.35)}.progressBar__line{flex:1; min-width:12px; height:1px; background:rgba(244,241,255,.12)}

.screenStack{flex:1; position:relative; overflow:hidden}.screen{position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:0 18px calc(22px + env(safe-area-inset-bottom, 0px)); opacity:0; transform:translateX(18px) scale(.985); pointer-events:none; transition:opacity 320ms ease, transform 420ms cubic-bezier(.2,.9,.15,1)}.screen.is-active{opacity:1; transform:translateX(0) scale(1); pointer-events:auto}.screen--intro{display:flex; flex-direction:column; gap:18px}

.heroCard,.questionCard,.ritualCard,.sectionCard,.readingPanel,.hintCard,.pickPanel,.customPanel,.spreadEcho,.questionEcho{position:relative; border-radius:24px; background:linear-gradient(180deg, rgba(21,17,58,.48), rgba(13,11,34,.42)); border:1px solid rgba(244,241,255,.12); box-shadow:var(--shadow2)}
.heroCard,.ritualCard,.sectionCard,.customPanel{padding:18px}.questionCard,.readingPanel,.hintCard,.pickPanel,.blindNote,.spreadEcho,.questionEcho{padding:16px}
.heroCard{margin-bottom:0; overflow:hidden}.heroCard::before,.ritualCard::before{content:""; position:absolute; inset:-20px; background:radial-gradient(circle at 20% 20%, rgba(247,208,122,.14), transparent 35%), radial-gradient(circle at 80% 80%, rgba(123,240,255,.08), transparent 35%); pointer-events:none}
.heroCard__eyebrow,.ritualCard__eyebrow,.sectionCard__eyebrow,.resultHeader__eyebrow{font-family:var(--title); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,239,181,.88)}.heroCard__title,.ritualCard__title,.sectionCard__title{margin:12px 0 10px; font-size:28px; line-height:1.25; font-weight:600}.heroCard__text,.ritualCard__text,.sectionCard__text{margin:0; color:var(--muted); line-height:1.8; font-size:14px}
.sectionCard--compact .sectionCard__title{margin-bottom:0}.sectionCard--compact .sectionCard__text{display:none}
.questionCard__title,.customPanel__title{font-size:15px; margin-bottom:10px}.questionInput{width:100%; min-height:120px; resize:none; border-radius:18px; border:1px solid rgba(244,241,255,.14); background:rgba(8,7,24,.42); color:var(--ink); padding:14px; font:inherit; outline:none}.questionInput:focus,.pickSlot__input:focus{border-color:rgba(123,240,255,.44); box-shadow:0 0 0 4px rgba(123,240,255,.08)}.questionTips{margin-top:10px; font-size:12px; color:var(--muted)}

.primaryAction,.secondaryAction{width:100%; border:0; cursor:pointer; border-radius:20px; padding:14px 16px; color:var(--ink); font:inherit; transition:transform 160ms ease}.primaryAction:hover,.secondaryAction:hover{transform:translateY(-1px)}.primaryAction{background:radial-gradient(700px 180px at 20% 20%, rgba(255,239,181,.20), transparent 60%), radial-gradient(800px 180px at 90% 85%, rgba(169,140,255,.14), transparent 55%), linear-gradient(180deg, rgba(27,22,72,.92), rgba(13,11,34,.78)); border:1px solid rgba(247,208,122,.36); box-shadow:var(--shadow2); margin-top:0}.primaryAction--single{display:flex; align-items:center; justify-content:center; min-height:72px}.secondaryAction{background:rgba(21,17,58,.42); border:1px solid rgba(244,241,255,.14)}.primaryAction__top{display:block; font-weight:600; letter-spacing:.08em}.primaryAction__sub{display:block; margin-top:4px; font-size:12px; color:var(--muted)}.bottomActions{display:flex; flex-direction:column; gap:12px; margin-top:18px}.bottomActions--shuffle > *{margin-top:0}

.spreadList{display:grid; gap:12px; margin-top:18px}.spreadOption{text-align:left; width:100%; padding:14px 16px; border-radius:20px; border:1px solid rgba(244,241,255,.14); background:rgba(21,17,58,.32); color:var(--ink); cursor:pointer; box-shadow:var(--shadow2)}.spreadOption.is-active{border-color:rgba(247,208,122,.36); background:linear-gradient(180deg, rgba(27,22,72,.76), rgba(13,11,34,.62)); box-shadow:0 0 0 4px rgba(247,208,122,.06)}.spreadOption__title{display:block; font-weight:600}.spreadOption__sub{display:block; margin-top:4px; font-size:12px; color:var(--muted)}.customPanel{margin-top:18px}.customMeaningList{display:grid; gap:12px; margin-top:12px}

.ritualOrbWrap{display:grid; place-items:center; margin:18px 0}.ritualCard--shuffle .ritualOrbWrap{margin:24px 0 14px}.ritualOrb{position:relative; width:180px; height:180px; display:grid; place-items:center}.ritualOrb__ring{position:absolute; inset:0; border-radius:999px; border:1px solid rgba(247,208,122,.16)}.ritualOrb__ring--a{transform:rotate(18deg)}.ritualOrb__ring--b{inset:18px; border-style:dashed; border-color:rgba(123,240,255,.22)}.ritualOrb__core{width:92px; height:92px; border-radius:999px; background:radial-gradient(circle at 35% 35%, rgba(255,239,181,.36), transparent 42%), radial-gradient(circle at 70% 70%, rgba(169,140,255,.24), transparent 45%), linear-gradient(180deg, rgba(27,22,72,.95), rgba(13,11,34,.90)); box-shadow:0 0 50px rgba(247,208,122,.12), inset 0 0 0 1px rgba(247,208,122,.18)}.ritualOrb.is-busy .ritualOrb__ring--a{animation:spinA calc(2.2s - 1.2s*var(--motion)) linear infinite}.ritualOrb.is-busy .ritualOrb__ring--b{animation:spinB calc(1.8s - .9s*var(--motion)) linear infinite}.ritualOrb.is-busy .ritualOrb__core{animation:pulse 1.4s ease-in-out infinite}@keyframes spinA{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinB{from{transform:rotate(360deg)}to{transform:rotate(0)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.pickPanel{display:grid; gap:12px; margin-top:18px}.pickSlot{display:block}.pickSlot__label{display:block; margin-bottom:8px; font-size:12px; color:rgba(244,241,255,.84); letter-spacing:.08em}.pickSlot__input{width:100%; border-radius:16px; padding:14px; border:1px solid rgba(244,241,255,.16); background:rgba(13,11,34,.50); color:var(--ink); font:inherit; outline:none}.pillActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}.hintCard{margin-top:16px; font-size:12px; color:rgba(244,241,255,.76); border-style:dashed; border-color:rgba(247,208,122,.24)}

.resultHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}.resultHeader__side{display:flex; flex-direction:column; align-items:flex-end; gap:8px}.resultHeader__title{margin-top:8px; font-size:24px; font-weight:600}.resultHeader__meta{font-size:12px; color:var(--muted); margin-top:0}.questionEcho,.spreadEcho{margin-bottom:14px; color:rgba(244,241,255,.82); line-height:1.7; font-size:13px}
.altar{position:relative; width:100%; border-radius:24px; padding:16px; background:radial-gradient(900px 600px at 50% 0%, rgba(247,208,122,.08), transparent 62%), linear-gradient(180deg, rgba(13,11,34,.55), rgba(10,8,32,.30)); border:1px solid rgba(244,241,255,.14); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); overflow:hidden}.altar__glow{position:absolute; inset:-40px; background:radial-gradient(circle at 40% 35%, rgba(123,240,255,.10), transparent 55%), radial-gradient(circle at 70% 65%, rgba(255,90,167,.08), transparent 60%), radial-gradient(circle at 50% 50%, rgba(169,140,255,.10), transparent 60%); filter:blur(2px); opacity:.85; animation:floaty calc(6s + 6s*(1 - var(--motion))) ease-in-out infinite}@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}.mobileAltar{margin-bottom:14px}
.altar__grid{position:relative; z-index:1; display:grid; gap:12px; min-height:320px; place-items:center}.card{width:100%; max-width:118px; aspect-ratio:3/4.5; border-radius:18px; position:relative; transform-style:preserve-3d; transition:transform calc(560ms * (0.6 + var(--motion))) cubic-bezier(.2,.9,.15,1), filter 200ms ease}.card:hover{filter:brightness(1.04)}.card__face{position:absolute; inset:0; border-radius:18px; backface-visibility:hidden; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.46); border:1px solid rgba(244,241,255,.14)}.card__back{background:radial-gradient(220px 180px at 30% 25%, rgba(255,239,181,.22), transparent 55%), radial-gradient(220px 180px at 70% 75%, rgba(169,140,255,.22), transparent 55%), linear-gradient(180deg, rgba(21,17,58,.95), rgba(13,11,34,.95))}.card__back::before{content:""; position:absolute; inset:10px; border-radius:14px; border:1px solid rgba(247,208,122,.22); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}.card__back::after{content:""; position:absolute; left:50%; top:50%; width:64px; height:64px; transform:translate(-50%,-50%) rotate(18deg); background:radial-gradient(circle at 35% 35%, rgba(123,240,255,.32), transparent 55%), radial-gradient(circle at 70% 70%, rgba(255,90,167,.22), transparent 55%); border-radius:18px; box-shadow:0 0 24px rgba(247,208,122,.12)}.card__front{transform:rotateY(180deg); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; padding:8px; text-align:center; background:radial-gradient(220px 200px at 25% 25%, rgba(123,240,255,.10), transparent 60%), radial-gradient(240px 220px at 75% 75%, rgba(255,90,167,.08), transparent 58%), linear-gradient(180deg, rgba(21,17,58,.85), rgba(13,11,34,.86))}.card__frame{position:absolute; inset:8px; border-radius:14px; border:1px solid rgba(247,208,122,.28); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); pointer-events:none; z-index:3}.card__corner{position:absolute; font-family:var(--title); letter-spacing:.12em; font-size:9px; color:rgba(255,239,181,.92); text-transform:uppercase; z-index:4; text-shadow:0 2px 8px rgba(0,0,0,.65)}.card__corner--tl{left:12px; top:10px}.card__media{position:absolute; inset:0; border-radius:18px; overflow:hidden}.card__image{width:100%; height:100%; object-fit:cover; display:block; transform-origin:center center; transition:transform 260ms ease}.card__image.is-reversed{transform:rotate(180deg)}.card__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,6,17,.06) 0%, rgba(7,6,17,0) 30%, rgba(7,6,17,.18) 58%, rgba(7,6,17,.88) 100%)}.card__meta{position:relative; z-index:4; margin-top:auto; padding:40px 6px 8px; display:flex; flex-direction:column; align-items:center}.card__name{position:relative; left:auto; right:auto; top:auto; font-size:13px; font-weight:600; letter-spacing:.04em}.card__name--simple{max-width:100%; font-size:13px; line-height:1.12; font-weight:700; color:rgba(244,241,255,.98); text-shadow:0 3px 12px rgba(0,0,0,.82); white-space:normal; overflow:hidden; text-overflow:clip; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word}.card__subtitle{position:relative; left:auto; right:auto; top:auto; margin-top:6px; font-size:12px; color:rgba(255,239,181,.98); letter-spacing:.12em; line-height:1.4; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.82)}.card__subtitle--simple{color:rgba(255,239,181,.98)}.card__desc,.badge,.card__code{display:none}.card.card--simple .card__front{display:flex}.card.is-flipped{transform:rotateY(180deg)}
.readingPanel{margin-top:14px}.readingPanel__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-family:var(--title); font-size:12px; letter-spacing:.12em; text-transform:uppercase}.readingPanel__body{font-size:14px}.muted{color:var(--muted)}.readingGrid{display:grid; grid-template-columns:1fr; gap:12px}.readingCard{border-radius:16px; padding:12px; background:rgba(7,6,17,.22); border:1px solid rgba(247,208,122,.14)}.readingCard__k{font-size:12px; color:var(--muted); letter-spacing:.08em}.readingCard__v{margin-top:6px; font-size:14px; line-height:1.7}.readingCard__summary{margin-top:8px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(244,241,255,.08); color:rgba(244,241,255,.86); font-size:13px; line-height:1.75}.readingCard__more{display:inline-flex; align-items:center; margin-top:10px; font-size:12px; color:rgba(255,239,181,.92); letter-spacing:.06em}
.aiPanel{margin-top:14px; border-radius:20px; padding:14px; background:linear-gradient(180deg, rgba(27,22,72,.52), rgba(13,11,34,.44)); border:1px solid rgba(247,208,122,.18); box-shadow:var(--shadow2)}.aiPanel__head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-family:var(--title); font-size:12px; letter-spacing:.12em; text-transform:uppercase}.aiPanel__body{font-size:14px; line-height:1.8}.aiPanel__block{margin-top:12px; padding:12px; border-radius:14px; background:rgba(7,6,17,.18); border:1px solid rgba(244,241,255,.08)}.aiPanel__label{font-size:12px; color:rgba(255,239,181,.92); letter-spacing:.08em; margin-bottom:6px}.aiPanel__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.modal::backdrop{background:rgba(0,0,0,.6); backdrop-filter:blur(6px)}.modal{border:0; padding:0; max-width:520px; width:calc(100% - 24px); color:var(--ink); background:transparent}.modal[open]{display:block}.modal--detail{max-width:640px}.modal--image{max-width:920px}.modal__card{border-radius:20px; overflow:hidden; border:1px solid rgba(244,241,255,.16); background:radial-gradient(700px 220px at 20% 20%, rgba(255,239,181,.12), transparent 60%), linear-gradient(180deg, rgba(21,17,58,.86), rgba(13,11,34,.86)); box-shadow:var(--shadow)}.modal__head{display:flex; align-items:flex-start; justify-content:space-between; padding:calc(14px + env(safe-area-inset-top, 0px)) 14px 10px 14px; border-bottom:1px solid rgba(244,241,255,.12)}.modal__title{font-family:var(--title); letter-spacing:.12em; text-transform:uppercase; font-size:13px}.modal__sub{margin-top:4px; font-size:12px; color:var(--muted)}.x{border:1px solid rgba(244,241,255,.16); background:rgba(7,6,17,.22); color:var(--ink); width:34px; height:34px; border-radius:12px; cursor:pointer}.modal__body{padding:12px 14px 0 14px}.field{display:block; margin-bottom:14px}.field__label{display:block; font-size:12px; color:rgba(244,241,255,.84); letter-spacing:.06em}.field__row{display:flex; gap:10px; align-items:center; margin-top:8px}.field__help{display:block; margin-top:8px; font-size:12px; color:var(--muted)}.field input[type=range]{flex:1}.pill{padding:6px 10px; border-radius:999px; border:1px solid rgba(244,241,255,.16); background:rgba(7,6,17,.22); font-size:12px}.field--check{display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; border:1px solid rgba(244,241,255,.12); background:rgba(7,6,17,.18)}.modal__foot{display:flex; justify-content:flex-end; gap:10px; padding:12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px}.btn{border-radius:14px; padding:10px 12px; border:1px solid rgba(244,241,255,.16); background:rgba(7,6,17,.18); color:var(--ink); cursor:pointer}.btn--primary{border-color:rgba(247,208,122,.32); background:rgba(247,208,122,.10)}
.detailBody{padding-bottom:16px}.detailPoster{padding:14px; border-radius:20px; background:linear-gradient(180deg, rgba(27,22,72,.66), rgba(13,11,34,.62)); border:1px solid rgba(247,208,122,.18); margin-bottom:14px}.detailPoster__art{height:180px; border-radius:16px; display:grid; place-items:center; font-family:var(--title); letter-spacing:.16em; font-size:14px; color:rgba(255,239,181,.92); background:radial-gradient(circle at 30% 30%, rgba(255,239,181,.16), transparent 40%), radial-gradient(circle at 70% 70%, rgba(169,140,255,.18), transparent 45%), linear-gradient(180deg, rgba(21,17,58,.86), rgba(8,7,24,.9)); border:1px dashed rgba(247,208,122,.26)}.detailPoster__art--imageWrap{padding:0; overflow:hidden; border-style:solid}.detailPoster__image{width:100%; height:100%; object-fit:cover; display:block; background:#0f0c1f; transform-origin:center center; transition:transform 260ms ease; cursor:zoom-in}.detailPoster__image.is-reversed{transform:rotate(180deg)}.detailPoster__note{margin-top:10px; font-size:12px; color:var(--muted); text-align:center}.detailSection{margin-bottom:14px}.detailSection__title{font-size:24px; font-weight:600}.detailSection__k{font-size:12px; color:var(--muted); letter-spacing:.08em; margin-bottom:8px}.detailSection__v{line-height:1.8; white-space:normal; overflow-wrap:anywhere; word-break:break-word}.detailSection--small .detailSection__v{font-size:13px; color:rgba(244,241,255,.82)}.detailChips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}.detailChip{padding:6px 10px; border-radius:999px; border:1px solid rgba(244,241,255,.14); background:rgba(7,6,17,.22); font-size:12px}.detailGrid{display:grid; grid-template-columns:1fr; gap:12px; min-width:0}.detailPanel{border-radius:18px; padding:14px; background:rgba(7,6,17,.20); border:1px solid rgba(247,208,122,.14); min-width:0}.detailPanel__title{font-family:var(--title); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px}.detailPanel__body{line-height:1.8; white-space:normal; overflow-wrap:anywhere; word-break:break-word; min-width:0}.imageLightbox__body{padding:18px}.imageLightbox__image{width:100%; max-height:72vh; object-fit:contain; display:block; margin:0 auto; border-radius:18px; background:#0f0c1f; box-shadow:0 18px 50px rgba(0,0,0,.35)}.imageLightbox__image.is-reversed{transform:rotate(180deg)}


@media (max-width: 480px){.appShell{padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px)}.phoneFrame{width:100%; height:100vh; min-height:100vh; border-radius:0; border:none}@supports (height: 100dvh){.phoneFrame{height:100dvh; min-height:100dvh}}.heroCard__title,.ritualCard__title,.sectionCard__title{font-size:24px}.card{max-width:104px}.card__meta{padding:36px 5px 7px}.card__name--simple{font-size:12px}.card__subtitle{font-size:11px;margin-top:4px}.resultHeader{align-items:flex-start}.resultHeader__side{align-items:flex-start}}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}

@media (max-width:560px){.appTopbar{align-items:flex-start}.brand{gap:10px}.sigil{width:38px;height:38px;border-radius:13px}.brand__title{font-size:13px}.brand__sub{font-size:11px;max-width:220px;letter-spacing:.05em}.ghost--icon{width:40px;height:40px}.progressBar{gap:6px;padding:0 18px 14px}.progressBar__step{font-size:11px;gap:5px}.progressBar__line{min-width:8px}}