/* v6.2: UI 디자인 1단계(CSS). 오행 테마색 · 글자 위계 · 버튼/패널/카드/프레임 · 허브 분위기 · 터치 영역 44px · SVG 아이콘 */
:root {
  --el-wood: #5fd08a; --el-fire: #ff7a45; --el-earth: #d9b05a; --el-metal: #cfd8ee; --el-water: #5ab4ff;
  --rc-none: #596072; --rc-common: #b8b8b8; --rc-uncommon: #6fcf97; --rc-rare: #5b8def; --rc-epic: #c084fc; --rc-legendary: #f5c518; --rc-mythic: #ff6bd6;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 17px; --fs-xl: 22px; --fs-hero: clamp(26px, 8vw, 40px);
  --touch: 44px; --r-card: 16px; --r-btn: 999px;
  --panel-hi: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 40%);
}
/* 글자 위계 */
.hero h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: .02em; font-weight: 900; background: linear-gradient(180deg, #fff6d6, #e8c56a 55%, #b8892d); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 8px rgba(232,197,106,.28)); }
.hero-kicker { font-size: var(--fs-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); opacity: .9; }
.hero-sub { font-size: var(--fs-md); font-weight: 700; color: var(--ink); opacity: .9; }
.brand-mark { font-size: var(--fs-xs); letter-spacing: .3em; color: var(--muted); }
.seed-label, .eq-h { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; color: var(--ink); }
.seed-hint, .eq-note, .craft-note { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.modal-title { font-size: var(--fs-xl); font-weight: 900; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
/* 허브/타이틀 분위기: 다섯 빛이 천천히 도는 배경 + 영웅 패널 오행 테두리 */
.page-glow { background: radial-gradient(60% 40% at 15% 10%, rgba(95,208,138,.14), transparent 70%), radial-gradient(55% 40% at 85% 12%, rgba(255,122,69,.13), transparent 70%), radial-gradient(60% 45% at 50% 100%, rgba(90,180,255,.12), transparent 70%), radial-gradient(40% 30% at 90% 70%, rgba(207,216,238,.08), transparent 70%), radial-gradient(40% 30% at 8% 75%, rgba(217,176,90,.1), transparent 70%); animation: v62-glow 24s ease-in-out infinite alternate; }
@keyframes v62-glow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(28deg); } }
.hero-panel { position: relative; background: var(--panel-hi), var(--glass); border-radius: 22px; }
.hero-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from 210deg, var(--el-wood), var(--el-fire), var(--el-earth), var(--el-metal), var(--el-water), var(--el-wood)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.app-icon { filter: drop-shadow(0 0 14px rgba(232,197,106,.35)); animation: v62-breathe 5s ease-in-out infinite; }
@keyframes v62-breathe { 50% { transform: scale(1.04); filter: drop-shadow(0 0 22px rgba(232,197,106,.55)); } }
/* 버튼 / 칩 / 패널 */
.seed-btn, .filter-btn, .set-chip, .back-choice, .modal-close, .eq-tab, .eq-slot { min-height: var(--touch); min-width: var(--touch); }
.seed-btn { background: var(--panel-hi), rgba(16,20,30,.92); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 10px rgba(0,0,0,.28); }
.seed-btn.is-active { background: linear-gradient(180deg, #f3d98b, #c99a3a); color: #20170a; border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 16px rgba(201,154,58,.35); }
.seed-btn:focus-visible, .filter-btn:focus-visible, .set-chip:focus-visible, .eq-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mob-phases .seed-btn { min-height: var(--touch); }
.set-chip { padding-inline: 14px; }
.modal-close { width: var(--touch); height: var(--touch); font-size: 24px; }
.seed-bar, .modal-sheet, .wv-card { background: var(--panel-hi), var(--glass); }
.ic { display: inline-block; vertical-align: -0.2em; flex: none; }
.ic-el-wood { color: var(--el-wood); } .ic-el-fire { color: var(--el-fire); } .ic-el-earth { color: var(--el-earth); } .ic-el-metal { color: var(--el-metal); } .ic-el-water { color: var(--el-water); }
.sr-state .ic { vertical-align: -0.25em; }
/* 오행 테마 유틸: [data-el] 요소는 --el 색을 받음 */
[data-el="wood"] { --el: var(--el-wood); } [data-el="fire"] { --el: var(--el-fire); } [data-el="earth"] { --el: var(--el-earth); } [data-el="metal"] { --el: var(--el-metal); } [data-el="water"] { --el: var(--el-water); }
/* 등급 프레임(아이템 카드 공용): [data-grade] */
[data-grade="none"] { --g: var(--rc-none); } [data-grade="common"] { --g: var(--rc-common); } [data-grade="uncommon"] { --g: var(--rc-uncommon); } [data-grade="rare"] { --g: var(--rc-rare); }
[data-grade="epic"] { --g: var(--rc-epic); } [data-grade="legendary"] { --g: var(--rc-legendary); } [data-grade="mythic"] { --g: var(--rc-mythic); }
.item-frame { position: relative; border-radius: var(--r-card); border: 2px solid var(--g, var(--rc-none)); background: linear-gradient(180deg, color-mix(in srgb, var(--g, #596072) 16%, #10131c), #0b0e15); box-shadow: 0 0 10px color-mix(in srgb, var(--g, transparent) 40%, transparent); }
.item-frame[data-grade="epic"], .item-frame[data-grade="legendary"] { box-shadow: 0 0 16px color-mix(in srgb, var(--g) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--g) 25%, transparent); }
.item-frame[data-grade="mythic"] { border-color: transparent; background: linear-gradient(#10131c, #10131c) padding-box, conic-gradient(from 0deg, #ff5f6d, #ffc371, #67e8a5, #5ab4ff, #b07cff, #ff5f6d) border-box; box-shadow: 0 0 20px rgba(255,107,214,.45); }
.inv-cell.has { box-shadow: 0 0 8px color-mix(in srgb, var(--rc) 35%, transparent); }
/* 장비 화면 */
.eq-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.eq-tab { position: relative; flex: none; width: 48px; height: 48px; padding: 2px; border-radius: 14px; border: 2px solid var(--line); background: #0d1119; overflow: hidden; }
.eq-tab img { width: 100%; height: 100%; object-fit: contain; }
.eq-tab.is-on { border-color: var(--el, var(--gold)); box-shadow: 0 0 12px color-mix(in srgb, var(--el, #e8c56a) 60%, transparent); }
.eq-tab i { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--g, var(--rc-none)); border: 1px solid #000; }
.eq-main { display: grid; grid-template-columns: minmax(150px, 1.15fr) 1fr; gap: 10px; align-items: start; }
.eq-stage { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--el, #888) 70%, #000); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--el, #888) 32%, #141a26), #0b0e15 75%); }
.eq-aura { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--g, transparent) 55%, transparent), transparent 40%, color-mix(in srgb, var(--el, transparent) 40%, transparent), transparent 80%); opacity: 0; animation: v62-spin 8s linear infinite; }
.eq-stage:not([data-grade="none"]) .eq-aura { opacity: .55; }
.eq-stage[data-grade="legendary"] .eq-aura, .eq-stage[data-grade="mythic"] .eq-aura { opacity: .9; animation-duration: 4s; }
.eq-stage[data-grade="mythic"] .eq-aura { background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #67e8a5, #5ab4ff, #b07cff, #ff5f6d); mix-blend-mode: screen; }
@keyframes v62-spin { to { transform: rotate(360deg); } }
.eq-char { position: absolute; inset: 4% 8% 2%; width: 84%; height: 94%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); pointer-events: none; }
.eq-layer { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); display: grid; place-items: center; pointer-events: none; }
.eq-layer img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.eq-layer.is-sil { border-radius: 50%; color: var(--g, #fff); background: radial-gradient(circle, color-mix(in srgb, var(--g, #fff) 28%, transparent), transparent 70%); filter: drop-shadow(0 0 6px var(--g, transparent)); }
.eq-layer .eq-sil { width: 78%; height: 78%; }
.eq-layer.is-syn::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 2px dashed var(--el, #fff); opacity: .8; animation: v62-spin 6s linear infinite; }
.eq-layer.anim-wear { animation: v62-wear .55s cubic-bezier(.2,1.5,.4,1) both; }
.eq-layer.anim-off { animation: v62-off .4s ease-in both; }
@keyframes v62-wear { from { opacity: 0; transform: translate(-50%, -190%) rotate(calc(var(--rot) - 40deg)) scale(1.6); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); } }
@keyframes v62-off { to { opacity: 0; transform: translate(-50%, -170%) rotate(calc(var(--rot) + 40deg)) scale(.6); } }
.eq-name { margin: 0 0 6px; font-weight: 900; font-size: var(--fs-lg); } .eq-name small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.eq-slots { display: grid; gap: 6px; }
.eq-slot { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 6px 10px; border-radius: 14px; border: 2px solid var(--g, var(--line)); background: rgba(14,18,27,.9); color: var(--ink); }
.eq-slot .eq-ico { grid-row: span 2; color: var(--g, var(--muted)); display: grid; place-items: center; }
.eq-slot b { font-size: var(--fs-sm); } .eq-slot small { font-size: var(--fs-xs); color: var(--muted); }
.eq-slot.is-locked { opacity: .5; border-style: dashed; }
.eq-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.eq-tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.eq-syn-chip, .af-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 99px; font-size: var(--fs-xs); border: 1px solid var(--gold); color: #ffe9a8; background: rgba(232,197,106,.1); }
.eq-syn-none { font-size: var(--fs-xs); color: var(--muted); }
.equip-modal .modal-sheet { max-width: 560px; }
@media (max-width: 380px) { .eq-main { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .page-glow, .app-icon, .eq-aura, .eq-layer.is-syn::after { animation: none !important; } }
html[data-fx="low"] .page-glow, html[data-fx="low"] .app-icon, html[data-fx="low"] .eq-aura { animation: none; }
.top-btn, #settings-btn { min-width: var(--touch); min-height: var(--touch); display: inline-grid; place-items: center; }

/* ===== v6.2: 상단 버튼(언어·설정)과 팝업 닫기(X) 겹침 해소 =====
 * 상단 버튼은 화면 우상단 고정(44px, 간격 8px). 팝업이 열리면 X 는 그 왼쪽으로 비켜서 항상 나란히 보입니다. */
.topbar { gap: 8px; top: calc(var(--safe-top) + 8px); right: calc(var(--safe-right) + 8px); align-items: center; }
.topbar .top-btn { width: var(--touch); min-width: var(--touch); height: var(--touch); padding: 0; }
.modal-close { top: 6px; right: 14px; }
@media (max-width: 1300px) {
  .modal-sheet > .modal-close { right: 100px; }
  .modal-sheet .modal-title { padding-right: 140px; }
}

/* ===== v6.2 보드 결투 패널(보드를 가리지 않는 하단 반투명 패널) ===== */
.board-wrap > .duel-table {
  position: relative; inset: auto; z-index: 7;
  margin-top: 8px; padding: 8px 8px 10px; gap: 4px;
  place-items: stretch; align-content: start;
  border: 1px solid rgba(245, 197, 24, .35); border-radius: 14px;
  background: rgba(11, 13, 20, .86); backdrop-filter: none; perspective: none;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .35);
  animation: duelpanel-in .28s ease;
}
@keyframes duelpanel-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.board-wrap > .duel-table .duel-row { grid-template-columns: 56px 56px minmax(0, 1fr); gap: 6px; }
.board-wrap > .duel-table .duel-who { gap: 1px; }
.board-wrap > .duel-table .duel-who img { width: 34px; height: 34px; }
.board-wrap > .duel-table .duel-who .quote-tag { display: none; }
.board-wrap > .duel-table .duel-who .quote-name { font-size: 11px; line-height: 1.1; word-break: keep-all; }
.board-wrap > .duel-table .duel-slot { width: 56px; height: 78px; font-size: 10px; text-align: center; }
.board-wrap > .duel-table .duel-hand { flex-wrap: nowrap; gap: 4px; min-width: 0; }
.board-wrap > .duel-table .duel-card { width: 46px; height: 64px; flex: 0 1 46px; min-width: 44px; }
.board-wrap > .duel-table .duel-mid { font-size: 14px; line-height: 1.2; }
.slot-basic { display: grid; justify-items: center; gap: 2px; color: var(--muted); }
.slot-basic em { font-style: normal; font-size: 10px; line-height: 1.1; }
.slot-basic.is-atk { color: #ffb36a; }
.slot-basic.is-def { color: #7fc6ff; }
.slot-basic svg { opacity: .75; }
.board-cell.is-duel-from { box-shadow: inset 0 0 0 3px #ffb36a, 0 0 12px rgba(255, 179, 106, .7); z-index: 2; }
.board-cell.is-duel-to { box-shadow: inset 0 0 0 3px #7fc6ff, 0 0 12px rgba(127, 198, 255, .7); z-index: 2; }
.board-cell.is-duel-from::after, .board-cell.is-duel-to::after { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); font: 700 9px/1 "Jua", sans-serif; padding: 2px 4px; border-radius: 6px; z-index: 5; pointer-events: none; }
.board-cell.is-duel-from::after { content: "ATK"; background: #ffb36a; color: #2b1600; }
.board-cell.is-duel-to::after { content: "DEF"; background: #7fc6ff; color: #00223a; }
.board-cell.is-move-enemy { box-shadow: inset 0 0 0 3px #ff8fb3; background-image: radial-gradient(circle, rgba(255, 143, 179, .35), transparent 70%); }
.board-cell.is-focus { box-shadow: inset 0 0 0 3px #ff8fb3, 0 0 10px rgba(255, 143, 179, .6); }
.board-token { will-change: transform; }

/* ===== v6.2 주사위: 크게, 반투명(보드가 비침), 터치해서 굴리기 ===== */
.board-stage > .dice-overlay {
  background: rgba(11, 13, 20, .34); backdrop-filter: none; z-index: 8;
  align-content: center; gap: 6px; text-align: center; padding: 8px; cursor: default;
}
.dice-overlay.is-wait { cursor: pointer; background: rgba(11, 13, 20, .42); }
.dice-overlay .dice-wrap { width: 132px; height: 132px; perspective: 700px; display: grid; place-items: center; }
.dice-overlay .dice-cube { width: 108px; height: 108px; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .45)); }
.dice-overlay .dice-side { border-radius: 22px; font-size: 62px; box-shadow: inset 0 0 0 4px #c9a227, inset 0 0 22px rgba(201, 162, 39, .35); background: linear-gradient(145deg, #fffaf0, #ebe1c9); }
.dice-overlay .dice-1 { transform: rotateY(0deg) translateZ(54px); }
.dice-overlay .dice-2 { transform: rotateX(90deg) translateZ(54px); }
.dice-overlay .dice-3 { transform: rotateY(180deg) translateZ(54px); }
.dice-overlay .dice-4 { transform: rotateX(-90deg) translateZ(54px); }
.dice-overlay .dice-5 { transform: rotateY(90deg) translateZ(54px); }
.dice-overlay .dice-6 { transform: rotateY(-90deg) translateZ(54px); }
.dice-overlay .dice-cube.is-idle { transform: rotateX(-18deg) rotateY(-26deg); animation: dice-idle 1.8s ease-in-out infinite; }
@keyframes dice-idle { 0%, 100% { transform: rotateX(-18deg) rotateY(-26deg) translateY(0); } 50% { transform: rotateX(-12deg) rotateY(-16deg) translateY(-8px); } }
.dice-overlay .dice-cube.is-spin { animation: dice-tumble-1 .86s cubic-bezier(.2, .7, .3, 1); }
.dice-overlay .dice-cube.is-spin.to-2 { animation-name: dice-tumble-2; }
.dice-overlay.is-rolling .dice-wrap { animation: dice-bounce .86s ease-out; }
@keyframes dice-tumble-1 { 0% { transform: rotateX(12deg) rotateY(-20deg); } 40% { transform: rotateX(240deg) rotateY(200deg); } 75% { transform: rotateX(500deg) rotateY(430deg); } 100% { transform: rotateX(720deg) rotateY(720deg); } }
@keyframes dice-tumble-2 { 0% { transform: rotateX(12deg) rotateY(-20deg); } 40% { transform: rotateX(240deg) rotateY(200deg); } 75% { transform: rotateX(500deg) rotateY(430deg); } 100% { transform: rotateX(630deg) rotateY(720deg); } }
@keyframes dice-bounce { 0% { transform: translateY(-46px); } 22% { transform: translateY(0); } 40% { transform: translateY(-26px); } 56% { transform: translateY(0); } 70% { transform: translateY(-9px); } 82%, 100% { transform: translateY(0); } }
.dice-overlay.is-landed .dice-wrap { animation: dice-pop .4s ease-out; }
@keyframes dice-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.dice-overlay .dice-msg { margin: 0; font-family: "Jua", sans-serif; font-size: 19px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .85); }
.dice-overlay.is-wait .dice-msg { color: var(--gold); animation: dice-hint 1.1s ease-in-out infinite; }
.dice-overlay .dice-num { display: inline-block; font-size: 40px; color: var(--gold); text-shadow: 0 0 16px rgba(245, 197, 24, .9), 0 2px 6px #000; animation: dice-pop .5s ease-out; }
.dice-overlay .dice-help { margin: 0; font-family: inherit; font-size: 12.5px; color: #e9ecf5; text-shadow: 0 1px 6px #000; max-width: 92%; }
.dice-overlay .dice-live { font-family: "Jua", sans-serif; font-size: 34px; line-height: 1; color: var(--gold); text-shadow: 0 0 10px rgba(245, 197, 24, .8), 0 2px 4px #000; min-height: 34px; }
.dice-overlay .dice-finger { display: block; height: 38px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)); animation: finger-tap 1.1s ease-in-out infinite; transform-origin: 50% 20%; }
@keyframes finger-tap { 0%, 100% { transform: translate(14px, 6px) scale(1); } 45% { transform: translate(0, -8px) scale(.9); } 60% { transform: translate(0, -8px) scale(.82); } }
@keyframes dice-hint { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
html[data-fx="low"] .dice-overlay .dice-cube.is-spin { animation-duration: .48s; }
html[data-fx="low"] .dice-overlay.is-rolling .dice-wrap { animation-duration: .48s; }
html[data-fx="low"] .dice-overlay .dice-cube.is-idle, html[data-fx="low"] .dice-overlay .dice-finger, html[data-fx="low"] .dice-overlay.is-wait .dice-msg { animation: none; }
html[data-fx="high"] .dice-overlay .dice-cube.is-spin { animation-duration: 1.05s; }
html[data-fx="high"] .dice-overlay.is-rolling .dice-wrap { animation-duration: 1.05s; }
@media (prefers-reduced-motion: reduce) {
  .dice-overlay .dice-cube.is-idle, .dice-overlay .dice-finger, .dice-overlay.is-wait .dice-msg, .dice-overlay.is-landed .dice-wrap, .dice-overlay .dice-num { animation: none !important; }
  .dice-overlay .dice-cube.is-spin, .dice-overlay.is-rolling .dice-wrap { animation-duration: .01ms !important; }
}

/* ===== v6.2 보드 위 공격 연출(말이 직접 공격) / 대사 ===== */
.atk62 { position: fixed; inset: 0; z-index: 25; cursor: pointer; background: transparent; -webkit-tap-highlight-color: transparent; }
.atk62 > div { position: fixed; pointer-events: none; }
.atk-skip { position: fixed; margin: 0; text-align: center; font-size: 11px; color: #e9ecf5; text-shadow: 0 1px 4px #000; pointer-events: none; opacity: .8; }
.atk-bubble { transform: translate(-50%, -100%); max-width: 46vw; padding: 3px 8px; border-radius: 10px; background: #fff; color: #1d1d27; font: 12px/1.25 "Jua", sans-serif; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); animation: bark-in .2s ease-out both; text-align: center; word-break: keep-all; }
.atk-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; }
.atk-bubble.is-foe { background: #fff2f6; }
@keyframes bark-in { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.atk-tag { transform: translate(-50%, -100%); padding: 1px 7px; border-radius: 999px; background: rgba(11, 13, 20, .88); border: 1px solid var(--gold); color: var(--gold); font: 12px/1.3 "Jua", sans-serif; white-space: nowrap; animation: atk-tag-in .9s ease-out both; }
.atk-tag.is-counter { color: #ffb36a; border-color: #ffb36a; }
.atk-tag.is-team { color: #8be0ff; border-color: #8be0ff; }
.atk-tag.is-weak { color: #ff8fb3; border-color: #ff8fb3; }
@keyframes atk-tag-in { 0% { transform: translate(-50%, -60%) scale(.5); opacity: 0; } 20% { transform: translate(-50%, -100%) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -140%); opacity: 0; } }
.atk-dmg { transform: translate(-50%, -50%); font: 26px/1 "Jua", sans-serif; color: #ff5b4d; -webkit-text-stroke: 2px #fff; paint-order: stroke fill; text-shadow: 0 3px 8px rgba(0, 0, 0, .6); animation: atk-dmg 1s ease-out both; white-space: nowrap; }
.atk-dmg.is-soft { color: #ffe08a; font-size: 18px; }
@keyframes atk-dmg { 0% { transform: translate(-50%, -20%) scale(.3); opacity: 0; } 25% { transform: translate(-50%, -90%) scale(1.25); opacity: 1; } 70% { transform: translate(-50%, -110%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -170%) scale(1); opacity: 0; } }
.atk-stars { width: 0; height: 0; }
.atk-stars i { position: absolute; left: -6px; top: -8px; width: 12px; height: 12px; background: #ffe14d; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); animation: atk-star .6s ease-out both; }
@keyframes atk-star { from { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(200deg); opacity: 0; } }
.atk-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--gold); animation: atk-ring .5s ease-out both; }
@keyframes atk-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.atk-proj { width: 0; height: 0; }
.atk-proj b { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc, #ffe14d) 55%, transparent 75%); box-shadow: 0 0 10px 3px var(--pc, #ffe14d); }
.atk-proj.is-wood { --pc: #5be08a; } .atk-proj.is-fire { --pc: #ff7a4d; } .atk-proj.is-earth { --pc: #e0b04d; } .atk-proj.is-metal { --pc: #cfd8e8; } .atk-proj.is-water { --pc: #5ab4ff; }
.board-token .tk-x { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.board-token .tk-x i { position: absolute; top: 28%; width: 24%; height: 24%; }
.board-token .tk-x i:first-child { left: 18%; } .board-token .tk-x i:last-child { right: 18%; }
.board-token .tk-x i::before, .board-token .tk-x i::after { content: ""; position: absolute; left: 45%; top: -10%; width: 14%; height: 120%; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1.5px #1d1d27; transform: rotate(45deg); }
.board-token .tk-x i::after { transform: rotate(-45deg); }
.board-token.atk-down { filter: grayscale(.8) brightness(.8); }
.atk62.fx-low .atk-stars, .atk62.fx-low .atk-bubble { animation-duration: .01ms; }
@media (prefers-reduced-motion: reduce) { .atk62 *, .atk-tag, .atk-dmg, .atk-bubble { animation-duration: .01ms !important; } }

/* ===== v6.2 사거리 표시 ===== */
.board-cell.is-range-cell { background-image: radial-gradient(circle, rgba(139, 224, 255, .3) 0 28%, transparent 30%), repeating-linear-gradient(45deg, rgba(139, 224, 255, .12) 0 4px, transparent 4px 8px); }
.board-cell.is-in-range { box-shadow: inset 0 0 0 3px #ff5b4d, 0 0 10px rgba(255, 91, 77, .75); animation: range-pulse 1s ease-in-out infinite; z-index: 2; }
@keyframes range-pulse { 50% { box-shadow: inset 0 0 0 3px #ff9a8f, 0 0 16px rgba(255, 91, 77, .9); } }
html[data-fx="low"] .board-cell.is-in-range { animation: none; }
.board-token .tk-range { position: absolute; left: 2%; bottom: 2%; z-index: 3; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #5ab4ff; color: #00223a; font: 700 9px/14px "Jua", sans-serif; text-align: center; }
.range-card { margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(139, 224, 255, .4); background: rgba(90, 180, 255, .08); font-size: 13px; line-height: 1.45; }
.range-card b { color: #8be0ff; }
.bark-float { position: fixed; z-index: 24; transform: translate(-50%, -100%); padding: 4px 9px; border-radius: 12px; background: #fff; color: #1d1d27; font: 13px/1.2 "Jua", sans-serif; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); pointer-events: none; animation: bark-float 1.4s ease-out both; }
@keyframes bark-float { 0% { opacity: 0; transform: translate(-50%, -70%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }

/* ===== v6.2 기본 장비(빈 슬롯 없음) ===== */
.eq-slot.is-basic, .eq-slot.is-locked.is-basic { opacity: 1; border-style: solid; --g: var(--rc-common); }
.eq-slot.is-basic small { color: var(--muted); }
.eq-layer.is-basic { --g: var(--rc-common); opacity: .92; }

/* ===== v6.3 공격·수비 연출 고급: 파티클·투사체·피격 표현 ===== */
.atk-p { width: 0; height: 0; animation-fill-mode: both; animation-timing-function: ease-out; }
.atk-p::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; display: block; }
.p-star { animation-name: pk-fly; } .p-star::before { background: #ffe14d; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); width: 14px; height: 14px; left: -7px; top: -7px; }
.p-leaf { animation-name: pk-fall; } .p-leaf::before { background: linear-gradient(135deg, #8cf0a5, #2fa85a); border-radius: 0 80% 0 80%; width: 11px; height: 11px; }
.p-flame { animation-name: pk-rise; } .p-flame::before { background: radial-gradient(circle at 50% 70%, #fff3a0, #ff8a3d 55%, #e5412d); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; width: 10px; height: 13px; }
.p-dust { animation-name: pk-rise; } .p-dust::before { background: rgba(214, 190, 150, .85); border-radius: 50%; width: 14px; height: 14px; left: -7px; top: -7px; }
.p-pebble { animation-name: pk-fall; } .p-pebble::before { background: #9b8460; border-radius: 3px; width: 7px; height: 7px; left: -3px; top: -3px; }
.p-glint { animation-name: pk-fly; } .p-glint::before { background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); width: 12px; height: 12px; box-shadow: 0 0 6px #dfe8f8; }
.p-drop { animation-name: pk-fall; } .p-drop::before { background: linear-gradient(#bfe3ff, #3d8de0); border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; width: 8px; height: 11px; }
.p-shard { animation-name: pk-fall; } .p-shard::before { background: var(--sc, #ffe14d); transform: rotate(45deg); width: 8px; height: 8px; border: 1px solid rgba(255, 255, 255, .8); }
.p-slash { animation-name: pk-slash; } .p-slash::before { width: 60px; height: 5px; left: -30px; top: -2px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: rotate(-35deg); box-shadow: 0 0 10px #dfe8f8; border-radius: 3px; }
@keyframes pk-fly { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; } }
@keyframes pk-fall { 0% { transform: translate(0, 0) scale(.5) rotate(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 20px)) scale(1) rotate(var(--rot)); opacity: 0; } }
@keyframes pk-rise { 0% { transform: translate(0, 0) scale(.5); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) - 10px)) scale(1.3); opacity: 0; } }
@keyframes pk-slash { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.atk-ring { border-color: var(--rc, var(--gold)); }
.atk-charge { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: radial-gradient(circle, transparent 48%, var(--rc, #fff) 52%, transparent 70%); animation: atk-charge .3s ease-in both; }
@keyframes atk-charge { from { transform: scale(2); opacity: 0; } 60% { opacity: .9; } to { transform: scale(.5); opacity: 0; } }
.atk-puff { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255, 255, 255, .5) 50%, transparent 72%); animation: atk-puff .5s ease-out both; }
@keyframes atk-puff { from { transform: scale(.3); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.atk-ghost { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background-size: cover; background-position: center; filter: saturate(.7) brightness(1.2); animation: atk-ghost .26s ease-out both; }
@keyframes atk-ghost { from { transform: scale(1); opacity: .5; } to { transform: scale(.7); opacity: 0; } }
.atk-shield { margin: -26px 0 0 -26px; width: 52px; height: 52px; display: grid; place-items: center; color: #8be0ff; border-radius: 50%; background: radial-gradient(circle, rgba(139, 224, 255, .35), transparent 70%); animation: atk-shield .7s ease-out both; filter: drop-shadow(0 0 8px #8be0ff); }
@keyframes atk-shield { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.2); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
.atk-proj { width: 0; height: 0; }
.atk-proj.pj-arrow b { left: -17px; top: -3px; width: 34px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--pc) 40%, #fff); box-shadow: 0 0 8px var(--pc); }
.atk-proj.pj-arrow b::after { content: ""; position: absolute; right: -4px; top: -3px; border: 6px solid transparent; border-left: 8px solid #fff; border-right: 0; }
.atk-proj.pj-bolt b { left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 0; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); background: #fff; box-shadow: none; filter: drop-shadow(0 0 6px var(--pc)); }
.atk-proj.pj-lob b { left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 6px 6px 8px 8px; background: linear-gradient(#e6c98a, #b58840); box-shadow: 0 0 0 2px var(--pc); }
.atk-proj.pj-ring b { left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: none; border: 3px solid var(--pc); box-shadow: 0 0 8px var(--pc); }
.board-token .tk-orbit { position: absolute; left: 50%; top: 4%; width: 0; height: 0; z-index: 5; pointer-events: none; animation: tk-spin .9s linear infinite; }
.board-token .tk-orbit i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: #ffe14d; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); }
.board-token .tk-orbit i:nth-child(1) { transform: translate(-12px, 0); } .board-token .tk-orbit i:nth-child(2) { transform: translate(12px, 0); } .board-token .tk-orbit i:nth-child(3) { transform: translate(0, -8px); }
@keyframes tk-spin { to { transform: rotate(360deg); } }
.atk-dmg { font-size: 28px; }

/* 평소 대기 모션(숨쉬기·까딱·깜빡) + 상태 표시 */
.board-token img { animation: tk-breathe 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.board-cell:nth-child(3n) .board-token img { animation-delay: -1.1s; } .board-cell:nth-child(3n+1) .board-token img { animation-delay: -2.2s; }
.board-token.is-enemy-tk img { animation-name: tk-breathe-b; }
@keyframes tk-breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.03, .97); } 50%, 54% { transform: scale(1.02, .9) translateY(1px); } 58% { transform: scale(1, 1); } 80% { transform: scale(.99, 1.03) rotate(-1.2deg); } }
@keyframes tk-breathe-b { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(1.03, .97) rotate(1.2deg); } 52%, 56% { transform: scale(1.02, .9) translateY(1px); } 60% { transform: scale(1, 1); } }
.board-token.is-ready { box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(245, 197, 24, .9); }
.board-token .tk-high { position: absolute; right: 2%; top: 2%; z-index: 3; width: 13px; height: 13px; border-radius: 50%; background: #ffcf5a; color: #3a2400; display: grid; place-items: center; font: 700 9px/1 "Jua", sans-serif; }
html[data-fx="low"] .board-token img { animation: none; }
@media (prefers-reduced-motion: reduce) { .board-token img, .board-token .tk-orbit { animation: none !important; } }

/* 결투 중에는 위쪽 안내를 컴팩트하게 해서 판이 55% 이상 보이도록 */
.board-wrap.is-duel .battle-top { display: none; }
.board-wrap.is-duel .quote-banner { min-height: 0; padding: 5px 10px; margin: 0 0 6px; gap: 6px; }
.board-wrap.is-duel .quote-banner img { display: none; }
.board-wrap.is-duel .board-status { margin: 2px 0 6px; font-size: 12px; line-height: 1.3; }
.board-wrap.is-duel .board-actions { margin-top: 6px; }

/* v6.3 점검표: 일일 팝업 상단 탭이 닫기(X)와 겹치지 않게 본문을 X 아래로 */
.daily-modal .daily-body { padding-top: 52px; }