/* ===== 앱 같은 손맛 (js/polish.js 와 짝). transform·opacity 만, 게임 로직·전투 속도는 그대로 ===== */
html { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], [data-go], .story-chip, .main-tile, .gr-go { touch-action: manipulation; }   /* 더블탭 확대 지연 없앰 */
button, [role="button"], .main-tile, .gr-go, .story-chip, .set-toggle, .cd-sm, .cd-ic { transition: scale .12s ease, filter .12s ease; }
button:not(:disabled):active, [role="button"]:active, .main-tile:active, .story-chip:active { scale: .96; filter: brightness(1.08); }   /* scale 속성: 원래 transform(가운데 정렬 등)과 겹쳐도 안 틀어짐 */
/* 카드 타일: 누르면 살짝 눌림 · 마우스면 살짝 뜸 (전투 카드 #game 은 제외) */
.story-card, .story-pick-card, .story-own-tile { transition: scale .14s ease, translate .14s ease; }
.story-pick-card:active .story-card, .story-owned:active .story-own-tile { scale: .97; }
@media (hover: hover) { .story-owned:hover .story-own-tile, .story-pick-card:not(.locked):hover .story-card { translate: 0 -3px; } }
/* 팝업 열기: 바탕은 페이드, 안쪽 판은 살짝 커지며 */
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiPopIn { from { opacity: 0; translate: 0 10px; scale: .96; } to { opacity: 1; translate: none; scale: none; } }
@keyframes uiScreenIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
.ui-pop-in { animation: uiFadeIn .16s ease-out; }
.ui-pop-in > * { animation: uiPopIn .2s cubic-bezier(.2, .9, .3, 1.15); }
/* 게임설정 등 .main-pop: 판(.main-pop-card)은 자기 popIn 이 있음 → .ui-pop-in 이 260ms 뒤 빠질 때 애니메이션 이름이 바뀌어 판이 한 번 더 사라졌다 나타남(깜빡임). 같은 이름을 써서 다시 재생 안 되게 */
.ui-pop-in > .main-pop-card { animation: popIn .16s ease-out; }
.ui-screen-in { animation: uiScreenIn .2s ease-out; }
/* 스크롤: 관성 · 팝업 안에서 바깥 화면까지 끌려가지 않게 */
#story-pop, .main-pop, .pvp-modal, .gd-pop, .gd-ov, .story-pop-panel { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) {
  .ui-pop-in, .ui-pop-in > *, .ui-screen-in { animation: none !important; }
  button:active, [role="button"]:active, .main-tile:active, .story-chip:active, .story-pick-card:active .story-card, .story-owned:active .story-own-tile { scale: none !important; translate: none !important; }
}
/* 2차: 카드 목록 차례로 등장 · 재화 숫자 바뀔 때 살짝 빛남 (js/polish.js) */
@keyframes uiStagger { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }
.ui-stagger { animation: uiStagger .26s ease-out both; animation-delay: calc(var(--si, 0) * 22ms); }
.ui-cur-tick { color: #fde68a; text-shadow: 0 0 8px rgba(253, 230, 138, .6); transition: color .2s, text-shadow .2s; }
@media (prefers-reduced-motion: reduce) { .ui-stagger { animation: none !important; } .ui-cur-tick { text-shadow: none; } }

/* ===== 폴리시 3 ===== */
/* (a) 맞은 카드 하얀 섬광 (기존 밝기 필터 + 흰 테두리 빛) */
.fx-hitflash { box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 22px 4px rgba(255,255,255,.75) !important; }
/* (b) 결과: 글자 쾅 + 보상 줄 차례로 */
.ui-slam { display: inline-block; animation: uiSlam .42s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes uiSlam { 0% { opacity: 0; transform: scale(2.4); filter: blur(4px); } 60% { opacity: 1; transform: scale(.92); filter: none; } 100% { transform: scale(1); } }
.ui-rise { animation: uiRise .32s ease-out both; animation-delay: calc(.38s + var(--ri, 0) * .12s); }
@keyframes uiRise { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* (c) 불러오는 중: 뼈대 막대 반짝 */
.ui-skel { position: relative; color: transparent !important; min-height: 132px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(rgba(255,255,255,.07) 0 0) 16px 18px / 55% 14px no-repeat, linear-gradient(rgba(255,255,255,.07) 0 0) 16px 46px / 80% 12px no-repeat,
    linear-gradient(rgba(255,255,255,.07) 0 0) 16px 70px / 70% 12px no-repeat, linear-gradient(rgba(255,255,255,.07) 0 0) 16px 94px / 40% 12px no-repeat; }
.ui-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.08) 45%, transparent 70%); background-size: 220% 100%; animation: uiShim 1.1s linear infinite; }
@keyframes uiShim { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* (d) 빨간 점 톡 */
.ui-dot-pop { animation: uiDotPop .36s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes uiDotPop { 0% { transform: scale(0); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ui-slam, .ui-rise, .ui-dot-pop { animation: none !important; }
  .ui-skel::after { animation: none; }
}

/* ===== 폴리시 4 ===== */
/* #9 컷인이 베고 나가는 순간 = 피해 순간: 하얀 섬광 한 번 더 */
.cutin.cutin-hit::before { content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none; mix-blend-mode: screen; animation: cutHit .18s ease-out both; z-index: 2; }
@keyframes cutHit { from { opacity: .8; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cutin.cutin-hit::before { display: none; } }
/* 등급별 영입 빛 */
.sfx-burst { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 5; translate: -50% -50%;
  background: radial-gradient(circle, var(--sc) 0%, transparent 62%); animation: sfxBurst .7s ease-out both; }
.sfx-r { --sc: rgba(132,204,22,.55); } .sfx-hr { --sc: rgba(59,130,246,.65); } .sfx-sr { --sc: rgba(192,132,252,.85); }
.sfx-ur { --sc: rgba(253,224,71,.95); } .sfx-mr { --sc: rgba(239,68,68,.95); } .sfx-lr { --sc: rgba(232,121,249,.95); }
.sfx-lv1 { scale: .8; } .sfx-lv2 { scale: 1.1; } .sfx-lv3 { scale: 1.6; box-shadow: 0 0 0 3px rgba(192,132,252,.7); } .sfx-lv4 { scale: 2.2; }
@keyframes sfxBurst { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.4); } }
.sfx-screen { position: fixed; inset: 0; z-index: 9500; pointer-events: none; animation: sfxScreen 1s ease-out both; }
.sfx-screen.sfx-ur { background: radial-gradient(circle at 50% 45%, #fff 0%, rgba(253,224,71,.9) 30%, rgba(245,158,11,.55) 60%, transparent 85%); }
.sfx-screen.sfx-mr { background: radial-gradient(circle at 50% 45%, #fff 0%, rgba(248,113,113,.9) 30%, rgba(153,27,27,.55) 60%, transparent 85%); }
.sfx-screen.sfx-lr { background: radial-gradient(circle at 50% 45%, #fff 0%, rgba(232,121,249,.9) 28%, rgba(34,211,238,.6) 58%, transparent 85%); }
@keyframes sfxScreen { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sfx-burst { animation: none; display: none; }
  .sfx-screen { animation: sfxScreenR .4s ease-out both; }
  @keyframes sfxScreenR { from { opacity: .45; } to { opacity: 0; } }
}
.sfx-glow { animation: sfxGlow .9s ease-out; }
@keyframes sfxGlow { 0% { box-shadow: 0 0 0 0 var(--sc); } 30% { box-shadow: 0 0 22px 8px var(--sc); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sfx-glow.sfx-lv3, .sfx-glow.sfx-sr { animation-duration: 1.1s; }
@media (prefers-reduced-motion: reduce) { .sfx-glow { animation: none; } }