/* ===================================================================
   움직이는 연출 · 깔끔한 밤하늘 (표시 전용) — transform · opacity 만 움직임
   =================================================================== */
/* ---- 밤하늘: 부드러운 한 장 그러데이션 + 작은 별 두 겹 (얼룩 · 성운 줄임) ---- */
html[data-theme] .sky:not(#_) { display: block !important; position: fixed; inset: 0; height: auto; z-index: 0; pointer-events: none; overflow: hidden; contain: strict;
  background: radial-gradient(ellipse 90% 55% at 50% 118%, rgba(150, 60, 50, .22), transparent 70%), linear-gradient(180deg, #04040b 0%, #0a0a1c 55%, #140b1a 100%) !important; opacity: 1 !important; }
html[data-theme] .sky:not(#_)::before, html[data-theme] .sky:not(#_)::after { content: ''; position: absolute; inset: 0; transform: none;
  background-image: radial-gradient(1px 1px at 37px 41px, #fff, transparent), radial-gradient(1px 1px at 151px 113px, #dfe8ff, transparent), radial-gradient(1.3px 1.3px at 263px 57px, #fff6dc, transparent), radial-gradient(1px 1px at 311px 197px, #fff, transparent);
  background-size: 360px 260px; opacity: .55; }
html[data-theme] .sky:not(#_)::after { background-size: 520px 380px; background-position: 120px 70px; opacity: .3; animation: fx-twinkle 6s ease-in-out infinite alternate; }
@keyframes fx-twinkle { from { opacity: .18; } to { opacity: .42; } }
.topbar::after, .topbar::before { display: none !important; }   /* 머리띠의 고정된 별똥별 선 → 실제로 떨어지는 유성우로 대체 */
.game::before { opacity: .85; }

/* ---- 유성우: 머리(밝은 원)가 앞장서 오른쪽 아래로 떨어지고 꼬리가 뒤따름 (몇 개만, 길게 쉬었다가) ---- */
.fx-meteors { position: absolute; inset: 0; }
.fx-meteors i { position: absolute; height: 1.6px; border-radius: 2px; opacity: 0; transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(255, 244, 220, .15) 30%, rgba(255, 250, 235, .95)); animation: fx-fall linear infinite; will-change: transform, opacity; }
.fx-meteors i::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #fffaf0; box-shadow: 0 0 6px 2px rgba(255, 240, 210, .8); }
@keyframes fx-fall {
  0% { transform: translate3d(0, 0, 0) rotate(32deg); opacity: 0; }
  2% { opacity: 1; }
  9% { transform: translate3d(260px, 165px, 0) rotate(32deg); opacity: 0; }
  100% { transform: translate3d(260px, 165px, 0) rotate(32deg); opacity: 0; }
}

/* ---- 전투: 마법진은 천천히 돌고, 맞으면 베기 선 · 흔들림, 아군 피해는 붉은 번쩍임 ---- */
.tome-field .tf-ring svg .c2, .tome-field .tf-ring svg .hex { transform-origin: 50% 50%; transform-box: view-box; animation: fx-spin 60s linear infinite; }
.tome-field .tf-ring svg .hex { animation-duration: 90s; animation-direction: reverse; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.tf-mon .token, #mon-token, [id$="mon-token"] { position: relative; }
.fx-one { position: absolute; pointer-events: none; z-index: 4; }
.fx-slash { left: 50%; top: 50%; width: 130%; height: 3px; margin-left: -65%; margin-top: -1.5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff6dc 35%, #ffb36b 60%, transparent); box-shadow: 0 0 8px 2px rgba(255, 190, 120, .75);
  transform: rotate(var(--a)) scaleX(0); animation: fx-slash .42s cubic-bezier(.2, .8, .2, 1) forwards; }
.fx-slash.big { height: 5px; background: linear-gradient(90deg, transparent, #fff, #ff7a4a 60%, transparent); box-shadow: 0 0 12px 3px rgba(255, 120, 70, .85); }
@keyframes fx-slash { 0% { transform: rotate(var(--a)) scaleX(0); opacity: 1; } 55% { transform: rotate(var(--a)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--a)) scaleX(1.05); opacity: 0; } }
.fx-shake { animation: fx-shake .26s ease-out; }
@keyframes fx-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-2deg); } 55% { transform: translateX(3px) rotate(1deg); } 100% { transform: none; } }
.fx-hurt { position: relative; }
.fx-hurt::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(220, 60, 40, .9), 0 0 10px rgba(220, 60, 40, .6); animation: fx-hurt .45s ease-out forwards; }
@keyframes fx-hurt { from { opacity: 1; } to { opacity: 0; } }

/* ---- 뽑기: 고리는 천천히 돌고 별은 숨 쉬듯 빛남, 유성은 원판을 가로질러 떨어짐, 소원을 빌면 빛이 터짐 ---- */
.wish-ring-in { animation: fx-spin 40s linear infinite; }
.wish-ring { will-change: auto; }
.wish-star { animation: fx-breathe 3.2s ease-in-out infinite; }
@keyframes fx-breathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.08); opacity: 1; } }
.wish-box { overflow: hidden; }
.wish-meteor { opacity: 0; animation: fx-wish-fall 7s linear infinite; will-change: transform, opacity; }
.wish-meteor.m2 { animation-delay: 2.4s; animation-duration: 9s; } .wish-meteor.m3 { animation-delay: 4.7s; animation-duration: 8s; }
/* 머리(밝은 원)가 오른쪽 아래를 향하고, 그 방향으로 떨어짐 — 꼬리는 뒤따라옴 */
@keyframes fx-wish-fall { 0% { transform: translate3d(-120px, -50px, 0) rotate(29deg); opacity: 0; } 4% { opacity: 1; } 16% { transform: translate3d(60px, 50px, 0) rotate(29deg); opacity: 0; } 100% { transform: translate3d(60px, 50px, 0) rotate(29deg); opacity: 0; } }
.wish-meteor:not(#_) { transform: rotate(29deg); }
.wish-ring.fx-burst::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(190, 210, 255, .5) 40%, transparent 70%); animation: fx-burst .7s ease-out forwards; }
@keyframes fx-burst { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
.fx-spark { left: 50%; top: 50%; width: 3px; height: 18px; margin: -9px 0 0 -1.5px; border-radius: 2px; background: linear-gradient(180deg, #fff, rgba(242, 210, 122, 0)); transform: rotate(var(--a)) translateY(0); animation: fx-spark .7s ease-out forwards; }
@keyframes fx-spark { from { transform: rotate(var(--a)) translateY(-10px); opacity: 1; } to { transform: rotate(var(--a)) translateY(-78px); opacity: 0; } }
/* 의식 카드 · 단추에 살짝 빛이 지나감 (마우스를 올렸을 때만) */
.rite-card { position: relative; overflow: hidden; }
.rite-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(100deg, transparent 30%, rgba(255, 250, 230, .45) 50%, transparent 70%); }
.rite-card:hover::after { transition: transform .6s ease; transform: translateX(120%); }

/* ---- 효율 · 접근성: 창이 가려지면 멈춤, 동작 줄이기면 끔 ---- */
html.fx-paused *, html.fx-paused *::before, html.fx-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .fx-meteors, .fx-one, .fx-orbit { display: none !important; } .tome-field .tf-ring svg *, .wish-ring-in, .wish-star, .wish-meteor, .sky::after { animation: none !important; } .wish-meteor { opacity: .7; } }
html.reduce-motion .fx-meteors, html.reduce-motion .fx-one { display: none !important; }

/* ---- 별 궤도 공격선 ---- */
.t-field, .battle-view { position: relative; }
.fx-orbit { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 6; }
.fx-orbit .o-trail { fill: none; stroke: #f3dfa6; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 2px rgba(255, 226, 160, .9));
  animation: fx-o-trail .62s cubic-bezier(.3, .7, .3, 1) forwards; }
/* 작은 별: 경로 위의 둥근 점(점선 한 칸)을 밀어 움직임 — 다시 칠하기만 하고 배치 계산은 하지 않음 */
.fx-orbit .o-star { fill: none; stroke: #fffaf0; stroke-linecap: round; stroke-dasharray: .0001 2; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px #ffe7b0); animation: fx-o-star .36s linear forwards, fx-o-star-out .62s linear forwards; }
.fx-orbit .o-ring { fill: none; stroke: #e9cf8a; stroke-width: 1; stroke-dasharray: .7 .3; stroke-dashoffset: 1; opacity: 0; animation: fx-o-ring .5s .3s ease-out forwards; }
.fx-orbit .o-hit { fill: #fff6dd; opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; animation: fx-o-hit .34s .32s ease-out forwards; }
.fx-orbit.big .o-trail { stroke: #ffd38a; stroke-width: 1.6; }
.fx-orbit.big .o-ring { stroke: #ffb46a; stroke-width: 1.4; }
@keyframes fx-o-trail { 0% { stroke-dashoffset: 1; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes fx-o-star { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes fx-o-star-out { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-o-ring { 0% { stroke-dashoffset: 1; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fx-o-hit { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(1.6); opacity: 0; } }
html.fx-paused .fx-orbit { display: none; }

/* ---- 뽑기 결과 창 ---- */
.draw-result { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 12, .62); }
.draw-result[hidden] { display: none; }
.dr-box { width: min(26rem, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; background: var(--panel, #241a12); color: var(--text, #efe3c6);
  border: 1px solid var(--gold, #c9a865); border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(0, 0, 0, .25); }
.dr-head { display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--gold, #c9a865) 45%, transparent); }
.dr-head h2 { margin: 0; font-size: 1.12rem; font-family: var(--f-title, serif); }
.dr-star { color: var(--gold, #c9a865); font-size: 1.2rem; }
.dr-list { list-style: none; margin: 0; padding: .6rem 1rem; overflow: auto; display: grid; gap: .4rem; }
.dr-row { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; padding: .5rem .7rem; border: 1px solid color-mix(in srgb, var(--gold, #c9a865) 30%, transparent); border-radius: 4px; background: rgba(0, 0, 0, .14); }
.dr-row b { font-size: 1rem; }
.dr-row small { grid-column: 2; opacity: .75; font-size: .82rem; }
.dr-row .grade { grid-row: span 2; min-width: 4.2rem; text-align: center; }
.dr-row.top { border-color: var(--gold, #c9a865); box-shadow: inset 0 0 12px rgba(233, 196, 106, .25); }
.dr-foot { padding: .6rem 1rem .8rem; display: flex; justify-content: flex-end; }
.dr-foot .btn { min-width: 6rem; }
.draw-result.in .dr-box { animation: fx-dr-in .22s ease-out; }
.draw-result.in .dr-row { animation: fx-dr-row .3s ease-out both; }
.draw-result.in .dr-row:nth-child(1) { animation-delay: 0.04s; }
.draw-result.in .dr-row:nth-child(2) { animation-delay: 0.08s; }
.draw-result.in .dr-row:nth-child(3) { animation-delay: 0.12s; }
.draw-result.in .dr-row:nth-child(4) { animation-delay: 0.16s; }
.draw-result.in .dr-row:nth-child(5) { animation-delay: 0.20s; }
.draw-result.in .dr-row:nth-child(6) { animation-delay: 0.24s; }
.draw-result.in .dr-row:nth-child(7) { animation-delay: 0.28s; }
.draw-result.in .dr-row:nth-child(8) { animation-delay: 0.32s; }
.draw-result.in .dr-row:nth-child(9) { animation-delay: 0.36s; }
.draw-result.in .dr-row:nth-child(10) { animation-delay: 0.40s; }
@keyframes fx-dr-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fx-dr-row { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .draw-result .dr-box, .draw-result .dr-row { animation: none !important; } }
html.reduce-motion .draw-result .dr-box, html.reduce-motion .draw-result .dr-row { animation: none !important; }

/* ---- 이미지(그림 파일만): 서서히 나타나기 · 은은한 빛 ---- */
img.img-wait { opacity: 0; }
img.img-in { animation: fx-img-in .45s ease-out; }
@keyframes fx-img-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
/* 프로필 사진: 금빛 테두리 바깥으로 은은한 빛, 올리면 조금 더 밝게 */
img.avatar { box-shadow: 0 0 0 2px var(--gold, #c9a865), 0 0 7px 1px rgba(233, 205, 140, .28); transition: box-shadow .3s ease, opacity .3s ease; }
img.avatar:hover, :is(a, button, .t-card, .post-row):hover > img.avatar { box-shadow: 0 0 0 2px var(--gold, #c9a865), 0 0 13px 3px rgba(240, 214, 150, .5); }
img.avatar-lg { box-shadow: 0 0 0 2px var(--gold, #c9a865), 0 0 16px 3px rgba(233, 205, 140, .32); }
/* 몬스터 · 장비 · 아이콘 그림: 그림 모양을 따라 은은한 빛 */
img:is(.pic, .pv-img) { filter: drop-shadow(0 0 3px rgba(240, 214, 150, .3)); transition: filter .3s ease; }
:is(button, a, .item, .t-card, .shop-card, .hub-card, .codex-card, .token):hover img:is(.pic, .pv-img) { filter: drop-shadow(0 0 6px rgba(250, 226, 165, .6)); }
/* 전투 중 몬스터 그림: 맞는 순간 빛이 번쩍였다 사라짐 */
.token.fx-shake img.pic { animation: fx-img-hit .4s ease-out; }
@keyframes fx-img-hit { 0% { filter: drop-shadow(0 0 3px rgba(240, 214, 150, .3)) brightness(1); } 30% { filter: drop-shadow(0 0 10px rgba(255, 236, 190, .9)) brightness(1.25); } 100% { filter: drop-shadow(0 0 3px rgba(240, 214, 150, .3)) brightness(1); } }
@media (prefers-reduced-motion: reduce) { img.img-in, .token.fx-shake img.pic { animation: none !important; } img.img-wait { opacity: 1; } }
html.reduce-motion img.img-in, html.reduce-motion .token.fx-shake img.pic { animation: none !important; }
html.reduce-motion img.img-wait { opacity: 1; }