/* ETHERION v1.9.5 — 마법 연출(js/spellfx.js) · 코인 수치 팝업 · 코인 창 크기
   색은 docs/STYLE_GUIDE.md 2.9 의 이름 붙은 값만 쓴다 */
:root {
  --coin-up: #a6f04a;      /* 코인으로 오른 값 +N (연두) */
  --coin-down: #ff4b3e;    /* 코인으로 내린 값 −N (빨강) */
  --fx-blood: #e0344a;     /* 피·대가 */
  --fx-shield: #9be8ff;    /* 보호막 방울 */
  --fx-heal: #7fe39c;      /* 회복 */
  --fx-spark: #ffd27a;     /* 폭발 불티 */
}

/* ---------- 코인 창: 1.25배 (v2.4.2, 화면이 작으면 js에서 --csz를 줄인다) ---------- */
.coinstage { transform: translate(-50%, -50%) scale(var(--csz, 1)); width: min(980px, 64vw); }
@media (max-width: 760px) { .coinstage { width: 96vw; } }
.cs-coin.ching { animation: csChing .5s cubic-bezier(.2, .8, .3, 1); }
@keyframes csChing { 0% { scale: 1; filter: brightness(1); } 30% { scale: 1.2; filter: brightness(1.6); } 100% { scale: 1; filter: brightness(1); } }
.cs-coin.ching::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 246, 210, .95) 25%, transparent 30% 70%, rgba(255, 246, 210, .9) 75%, transparent 80%);
  mask: radial-gradient(circle, transparent 52%, #000 54%, #000 62%, transparent 64%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 62%, transparent 64%);
  animation: csGlint .55s ease-out forwards; }
@keyframes csGlint { from { opacity: 1; rotate: 0deg; } to { opacity: 0; rotate: 140deg; } }

/* ---------- 코인으로 바뀐 값: 캐릭터 위에 +N(연두) / −N(빨강) ---------- */
.float.cpop { font-family: var(--caps); font-weight: 900; font-size: max(34px, calc(var(--cw) * .27)); color: var(--coin-up); z-index: 86;
  -webkit-text-stroke: 1.5px rgba(12, 34, 0, .9); text-shadow: 0 3px 0 #1d3a06, 0 5px 12px #000, 0 0 20px rgba(166, 240, 74, .75);
  margin-top: calc(var(--pi, 0) * 1.02em); animation: cPop 2.2s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--pi, 0) * 120ms); }
.float.cpop.down { color: var(--coin-down); -webkit-text-stroke-color: rgba(44, 0, 0, .9); text-shadow: 0 3px 0 #4a0a06, 0 5px 12px #000, 0 0 20px rgba(255, 75, 62, .75); animation-name: cDrop; }
.float.cpop .sti { width: .7em; height: .7em; vertical-align: -.04em; margin-right: .08em; }
@keyframes cPop {
  0% { opacity: 0; transform: translate(-50%, -10%) scale(.3); }
  12% { opacity: 1; transform: translate(-50%, -62%) scale(1.5); }
  22% { transform: translate(-50%, -48%) scale(.9); }
  30% { transform: translate(-50%, -53%) scale(1.07); }
  38% { transform: translate(-50%, -52%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(.96); }
}
@keyframes cDrop {
  0% { opacity: 0; transform: translate(-50%, -115%) scale(.3); }
  12% { opacity: 1; transform: translate(-50%, -40%) scale(1.5); }
  20% { transform: translate(-50%, -52%) scale(.92); }
  26% { transform: translate(-58%, -50%) scale(1); }
  32% { transform: translate(-42%, -50%) scale(1); }
  38% { transform: translate(-53%, -50%) scale(1); }
  44% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -28%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 10%) scale(.96); }
}

/* ---------- 마법 연출 조각 ----------
   transform-origin 0 0 + translate(-50%,-50%): left/top 점이 조각의 가운데. rotate·scale도 그 점을 축으로 돈다 */
.sfx { position: fixed; pointer-events: none; z-index: 79; transform: translate(-50%, -50%); transform-origin: 0 0; }
.sfx-svg { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 80; overflow: visible; }
.sfx-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sfx-svg .bolt-glow { stroke: var(--c); opacity: .6; filter: blur(3px); }
.sfx-svg .bolt-core { stroke: var(--c); }
.sfx-svg .crack { stroke: var(--c); }
.sfx-svg .crack-glow { stroke: var(--c); opacity: .5; filter: blur(2px); }
.sfx-screen { left: 0 !important; top: 0 !important; width: 100vw; height: 100vh; transform: none; z-index: 78; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 10%, transparent) 65%); }

/* 입자 */
.sfx-p { width: var(--z); height: var(--z); border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.sfx-p.p-ember { background: radial-gradient(circle, #fff3c0, var(--c) 60%); box-shadow: 0 0 8px var(--c), 0 0 2px #fff; }
.sfx-p.p-sq { border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.sfx-p.p-dia { border-radius: 1px; background: linear-gradient(135deg, #fff, var(--c)); box-shadow: none; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: brightness(1.2); }
.sfx-p.p-leaf { border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #c8f29a, var(--c) 60%, #2f6a2a); box-shadow: none; }
.sfx-p.p-ring { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8), transparent 38%); border: 1.5px solid var(--c); box-shadow: 0 0 5px var(--c); }
.sfx-p.p-wisp { background: radial-gradient(circle, var(--c), transparent 70%); box-shadow: none; filter: blur(1px); }
.sfx-p.p-streak { width: calc(var(--z) * 3.2); height: max(2px, calc(var(--z) * .45)); border-radius: 3px; background: linear-gradient(90deg, transparent, var(--c), #fff); box-shadow: none; }
.sfx-p.p-drop { border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 40% 35%, #ff9aa6, var(--c) 55%, #5a0612); box-shadow: none; }
.sfx-p.p-smoke { background: radial-gradient(circle, color-mix(in srgb, var(--c) 80%, transparent), color-mix(in srgb, var(--c) 35%, transparent) 45%, transparent 70%); box-shadow: none; }

/* 빛·고리 */
.sfx-flash { width: var(--s); height: var(--s); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, var(--c) 28%, color-mix(in srgb, var(--c) 40%, transparent) 52%, transparent 70%); }
.sfx-ring { width: var(--s); height: var(--s); border-radius: 50%; border: max(2px, calc(var(--s) * .03)) solid var(--c); box-shadow: 0 0 18px var(--c), inset 0 0 14px var(--c); }
.sfx-ring.ell { height: calc(var(--s) * .32); }
.sfx-ring.dark { border-color: var(--c); box-shadow: 0 0 26px #8b5cf6, inset 0 0 22px #000; background: radial-gradient(circle, rgba(10, 4, 20, .55), transparent 70%); }
.sfx-ring.ell.dark { box-shadow: 0 0 20px rgba(0, 0, 0, .8); background: radial-gradient(ellipse, rgba(20, 12, 8, .7), transparent 70%); }
.sfx-ring.swirl { border-style: dashed; border-width: max(2px, calc(var(--s) * .04)); }
.sfx-star { width: var(--s); height: var(--s); mix-blend-mode: screen; filter: drop-shadow(0 0 8px var(--c));
  background: radial-gradient(circle, #fff 0 7%, transparent 8%), linear-gradient(90deg, transparent 48%, #fff 50%, transparent 52%), linear-gradient(0deg, transparent 48%, #fff 50%, transparent 52%); }
.sfx-runes { width: var(--s); height: var(--s); color: var(--c); mix-blend-mode: screen; filter: drop-shadow(0 0 5px var(--c)) drop-shadow(0 0 14px var(--c)); z-index: 59; }
.sfx-runes svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* 발사체 */
.sfx-shell { width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9a9aa2, #2a2a30 58%, #101012); box-shadow: 0 0 10px #ff8a3a, 0 2px 4px #000; }
.sfx-shell::after { content: ""; position: absolute; right: -14%; top: -14%; width: 40%; height: 40%; border-radius: 50%; background: radial-gradient(circle, #fff, #ffb340 45%, transparent 70%); }
.sfx-meteor { width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle at 60% 50%, #fffbe6, #ffc04d 35%, #ff5a2a 66%, transparent 72%); filter: drop-shadow(0 0 10px #ff6b3d) drop-shadow(0 0 24px #ff6b3d); }
.sfx-meteor::before { content: ""; position: absolute; right: 50%; top: 20%; height: 60%; width: calc(var(--z) * 4.6); border-radius: 50% 0 0 50%; background: linear-gradient(90deg, transparent, rgba(255, 90, 42, .45) 45%, #ffcf6e); }
.sfx-meteor.small::before { width: calc(var(--z) * 2.6); }
.sfx-rivet { width: calc(var(--z) * 2.8); height: calc(var(--z) * .75); border-radius: 2px 50% 50% 2px; background: linear-gradient(180deg, #f3f6fa, #9aa4b2 55%, #4a525d); box-shadow: 0 0 8px rgba(255, 255, 255, .55); }
.sfx-rivet::before { content: ""; position: absolute; right: 90%; top: 30%; height: 40%; width: calc(var(--z) * 5); background: linear-gradient(90deg, transparent, rgba(230, 237, 245, .55)); border-radius: 2px; }
.sfx-rock { width: var(--z); height: calc(var(--z) * .86); border-radius: 46% 54% 38% 62% / 55% 40% 60% 45%; background: radial-gradient(circle at 35% 30%, #dcb98f, #8a6440 55%, #3e2a18); box-shadow: 0 5px 10px rgba(0, 0, 0, .6), inset -3px -4px 6px rgba(0, 0, 0, .35); }
.sfx-orb { width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b5e6ff 26%, var(--c) 58%, color-mix(in srgb, var(--c) 30%, transparent) 72%, transparent 74%); filter: drop-shadow(0 0 10px var(--c)); }
.sfx-void { width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle, #050208 28%, #2a1050 52%, var(--c) 66%, transparent 72%); filter: drop-shadow(0 0 12px var(--c)); }
.sfx-crescent { width: var(--z); height: var(--z); border-radius: 50%; box-shadow: inset calc(var(--z) * .16) 0 0 0 var(--c); filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 2px #fff); }
.sfx-crescent.wind { box-shadow: inset calc(var(--z) * .12) 0 0 0 var(--c), inset calc(var(--z) * .05) 0 0 0 #fff; opacity: .92; }
.sfx-arrow { width: var(--w); height: 3px; border-radius: 2px; background: linear-gradient(90deg, #9fd27a 0 16%, #8a6a3a 16%); filter: drop-shadow(0 1px 2px #000); }
.sfx-arrow::after { content: ""; position: absolute; right: -7px; top: -4px; border-left: 10px solid #e9ecf2; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.sfx-spear { width: var(--w); height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 40%, transparent) 30%, #fff6cf 85%, #fff); filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c)); }
.sfx-spear::after { content: ""; position: absolute; right: -12px; top: -5px; border-left: 16px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.sfx-mote { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--c) 55%, transparent 72%); filter: drop-shadow(0 0 8px var(--c)); }
.sfx-mote.dark { background: radial-gradient(circle, #1a0b2a 30%, var(--c) 60%, transparent 72%); }

/* 기둥·가시·물마루·방울 */
.sfx.sfx-pillar { transform: none; transform-origin: 50% 0; width: var(--w); height: var(--h); mix-blend-mode: screen; filter: blur(1px); border-radius: 0 0 45% 45% / 0 0 8% 8%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 40%, transparent) 30%, var(--c) 82%, #fff); }
.sfx-col { width: var(--w); height: var(--h); transform: translate(-50%, -100%); mix-blend-mode: screen; filter: blur(2px); border-radius: 40% 40% 8px 8px / 30% 30% 8px 8px;
  background: linear-gradient(0deg, color-mix(in srgb, var(--c) 75%, transparent), color-mix(in srgb, var(--c) 22%, transparent) 55%, transparent); }
.sfx-col.down { transform: translate(-50%, 0); mix-blend-mode: normal; border-radius: 8px 8px 40% 40% / 8px 8px 30% 30%;
  background: linear-gradient(180deg, rgba(26, 8, 44, .85), color-mix(in srgb, var(--c) 30%, rgba(40, 12, 70, .55)) 50%, transparent); }
.sfx-thorn { width: var(--w); height: var(--h); transform: translate(-50%, -100%); clip-path: polygon(50% 0, 62% 40%, 100% 100%, 0 100%, 38% 40%);
  background: linear-gradient(0deg, #3a2812, #4f8a32 50%, #b4ea7c); }
.sfx-wave { width: var(--w); height: var(--h); border-radius: 70% 30% 10% 10% / 90% 80% 10% 10%; filter: drop-shadow(0 0 10px var(--c));
  background: linear-gradient(180deg, #f0fcff 0 7%, #8fd8ff 16%, var(--c) 46%, color-mix(in srgb, var(--c) 20%, transparent) 90%, transparent); }
.sfx-bubble { width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; border: 2px solid color-mix(in srgb, var(--c) 80%, #fff);
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .6), transparent 20%), radial-gradient(circle, transparent 52%, color-mix(in srgb, var(--c) 30%, transparent) 74%, color-mix(in srgb, var(--c) 70%, transparent));
  box-shadow: 0 0 22px var(--c), inset 0 0 26px color-mix(in srgb, var(--c) 50%, transparent); }
.sfx-bubble::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); animation: sfxSheen .9s ease-out .15s both; }
@keyframes sfxSheen { from { translate: -70% 0; } to { translate: 70% 0; } }

@media (prefers-reduced-motion: reduce) { .sfx, .sfx-svg { display: none; } .float.cpop { animation-duration: 1.4s; } }

/* ---------- v2.4.5 코인 앞면: 칠룡환 문장 (js/game.js COIN_CREST) ---------- */
.cs-crest { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* v3.10.5: 도는 동안에도 앞면 문장 · 뒷면 그림을 보인다 (style.css의 같은 날짜 주석) */
/* v2.4.6 뒷면: 빈 자리 (js/game.js COIN_BACK). 그림이 뒷면임을 알려 주므로 공·방·체가 함께 붙은 코인의 "뒷면" 글자는 뺀다 */
.cs-coin.multi .cs-tails::before { content: none; }

/* ---------- v3.9.2 마법 코인 (js/game.js spellCoinFx) — 마법이 발동할 때 효과마다 던진 코인 ---------- */
.spellcoin { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 92; pointer-events: none; display: grid; gap: 12px; justify-items: center;
  min-width: 240px; max-width: calc(100vw - 32px); padding: 14px 24px 16px; border-radius: 14px; border: 1px solid rgba(217, 180, 106, .45);
  background: radial-gradient(ellipse at 50% 0%, rgba(62, 46, 20, .94), rgba(14, 12, 20, .94) 75%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(217, 180, 106, .16); }
.spellcoin .sc-title { font-family: var(--caps); font-weight: 800; font-size: 18px; color: var(--gold-hi); letter-spacing: .04em; }
.spellcoin .sc-title small { font-size: 12px; font-weight: 700; opacity: .65; margin-left: 6px; }
.spellcoin .sc-row { display: grid; gap: 8px; justify-items: center; }
.spellcoin .sc-what { font-size: 14px; color: #e9dcc0; }
.spellcoin .sc-what b { color: var(--gold-hi); margin: 0 2px; }
.spellcoin .sc-what small { opacity: .7; margin-left: 2px; }
.spellcoin .cs-coins { min-height: 0; gap: 10px; }
.spellcoin .cs-coin { width: 56px; height: 56px; }
.spellcoin .sc-res { min-height: 1.3em; font-size: 14px; font-weight: 700; color: var(--gold-hi); opacity: 0; transition: opacity .25s; }
.spellcoin .sc-res.on { opacity: 1; }
@media (max-width: 760px) { .spellcoin .cs-coin { width: 44px; height: 44px; } }

/* ---------- v3.9.3 코인 다시 굴리기: 두 단추 · 고른 코인 (js/game.js coinClash decide) ---------- */
.cs-choice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cs-choice .cs-stop { padding: 10px 18px; font-size: 15px; }
.cs-choice .cs-reflip span { display: inline-flex; align-items: center; gap: 6px; }
.cs-choice .cs-reflip .cf-eth { width: 13px; height: 13px; }
/* 코인(.cs-coin)에 opacity를 걸면 3D가 평면으로 눌려 뒷면이 사라진다 — 면에만 건다 */
.cs-coin.can-flip:not(.picked) .cs-face { opacity: .6; }
.cs-coin.picked { animation: canFlip 1.1s ease-in-out infinite; }
.cs-coin.picked::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--ether); box-shadow: 0 0 16px rgba(143, 220, 255, .8); pointer-events: none; }

/* ---------- v3.9.10 저주 발동 (js/game.js curseFx · curseTitle · chipNum) ----------
   핸드에서 걸린 저주가 전장에 오를 때. 암흑 원소색 #8b5cf6 · 저주 어둠 #3a1858 (STYLE_GUIDE 2.9), 깎인 값은 --coin-down */
.curse-title { position: fixed; z-index: 66; pointer-events: none; display: grid; justify-items: center; gap: .18em; white-space: nowrap;
  transform: translate(-50%, -50%); padding: .35em 1.1em .45em; font-size: var(--fs, 22px);
  background: radial-gradient(ellipse at center, rgba(28, 8, 46, .88) 0%, rgba(28, 8, 46, .62) 55%, transparent 78%); }
.curse-title small { font-family: var(--caps); font-size: .42em; font-weight: 700; letter-spacing: .45em; padding-left: .45em; color: #c9b0ff; opacity: .9;
  text-shadow: 0 0 .6em #8b5cf6; }
.curse-title b { display: flex; font-weight: 800; letter-spacing: .04em; color: #efe4ff; }
.curse-title b i { font-style: normal; display: inline-block; opacity: 0;
  text-shadow: 0 0 .25em #b48cff, 0 0 .7em #8b5cf6, 0 0 1.4em #3a1858, 0 .08em 0 #12051f;
  animation: curseRune calc(1800ms * var(--k, 1)) cubic-bezier(.2,.7,.3,1) forwards; animation-delay: calc(var(--i) * 55ms * var(--k, 1)); }
.curse-title em { font-style: normal; font-family: var(--caps); font-weight: 900; font-size: .78em; color: var(--coin-down, #ff4b3e);
  -webkit-text-stroke: 1px rgba(40, 0, 0, .9); text-shadow: 0 0 .5em rgba(255, 75, 62, .7); display: flex; align-items: center; gap: .15em;
  opacity: 0; animation: curseSub calc(1800ms * var(--k, 1)) ease-out forwards; animation-delay: calc(380ms * var(--k, 1)); }
.curse-title em svg { width: .8em; height: .8em; }
@keyframes curseRune {
  0% { opacity: 0; transform: translateY(.45em) scale(1.5); filter: blur(6px) brightness(2.2); color: #fff; }
  22% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1.4); }
  60% { opacity: 1; transform: none; filter: none; color: #efe4ff; }
  100% { opacity: .9; transform: translateY(-.1em); filter: none; }
}
@keyframes curseSub { 0% { opacity: 0; transform: translateY(-.4em) scale(1.4); } 25% { opacity: 1; transform: none; } 100% { opacity: 1; } }
.curse-chip { position: fixed; z-index: 67; pointer-events: none; text-align: center; font-weight: 900; color: var(--coin-down, #ff4b3e);
  -webkit-text-stroke: 1px rgba(40, 0, 0, .85); text-shadow: 0 0 6px rgba(255, 75, 62, .8), 0 0 12px rgba(139, 92, 246, .7); }
@media (prefers-reduced-motion: reduce) { .curse-title, .curse-chip { display: none; } }

/* ───────── v3.18.1 효과 명판: 한글 낱말이 든 떠오르는 글자는 모두 이 틀 (js/game.js floatAt · plateParts, 스타일 가이드 2.9) ─────────
   v3.12.3 "반격"(금) · v3.12.7 "대가"(핏빛) 명판을 모든 효과 글자(수호 · 보호막 · 불굴 · 빼앗김 · 강화 해제 · 가시 −2 …)로 넓혔다.
   위 = 명판 낱말: Hahmlet 800(css/fonts-hahmlet.css — 게임 폴더에 담아 인터넷 없이도 나옴), 금속 광택 그라데이션, 양옆 선과 마름모, 뒤로 베고 지나가는 사선.
   아래 = 숫자 · 스탯 기호(Cinzel 900). 명판 빛깔은 t-* 클래스, 숫자 색은 원래 cls(dmg · buff · shield · debuff · heal · miss)를 따른다.
   새 빛깔은 --pl-* 변수만 정하면 된다 */
.float.plate { --pl-g: linear-gradient(180deg, #fffdf2 0%, #ffe9a8 34%, #f2c66a 50%, #b98432 58%, #f0cf7c 78%, #fff6d0 100%);
  --pl-edge: #3a2208; --pl-glow: rgba(255, 180, 70, .6); --pl-line: #f0d48c; --pl-gem: linear-gradient(135deg, #fff3c9, #c8963f 60%, #7a5418); --pl-gem-b: #2a1806;
  --pl-slash: #fff3c9; --pl-slash-glow: rgba(255, 180, 70, .9); --pl-num: var(--gold-hi);
  display: flex; flex-direction: column; align-items: center; gap: .02em; line-height: 1; -webkit-text-stroke: 0; text-shadow: none; animation-name: counterUp; animation-duration: 1.8s; }
.float.plate .fl-tag { position: relative; display: flex; align-items: center; gap: .3em; font-size: max(17px, calc(var(--cw) * .135)); padding: .12em .2em; isolation: isolate; }
.float.plate.big .fl-tag { font-size: max(21px, calc(var(--cw) * .17)); }
.float.plate .fl-tag b { font-family: "Hahmlet", "Song Myung", var(--body); font-weight: 800; letter-spacing: .14em; margin-right: -.14em; font-size: 1.4em;
  background: var(--pl-g); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--pl-edge)) drop-shadow(0 0 1.5px #050302) drop-shadow(0 3px 5px rgba(0, 0, 0, .85)) drop-shadow(0 0 12px var(--pl-glow)); }
.float.plate.long .fl-tag b { letter-spacing: .03em; margin-right: -.03em; font-size: 1.12em; }   /* 다섯 글자 넘는 낱말(다음 턴 에테르 · 소환 · 이번 턴): 자간을 좁히고 양옆 선을 줄여 카드 폭 안팎에 */
.float.plate.long .fl-tag { gap: .2em; }
.float.plate.long .fl-tag i { width: .7em; }
.float.plate .fl-tag i { position: relative; width: 1.3em; height: 2px; background: linear-gradient(90deg, transparent, var(--pl-line)); box-shadow: 0 1px 2px #000; }
.float.plate .fl-tag i:last-child { background: linear-gradient(270deg, transparent, var(--pl-line)); }
.float.plate .fl-tag i::after { content: ""; position: absolute; top: 50%; width: .42em; height: .42em; background: var(--pl-gem); border: 1px solid var(--pl-gem-b); transform: translate(-50%, -50%) rotate(45deg); }
.float.plate .fl-tag i:first-child::after { right: 0; transform: translate(50%, -50%) rotate(45deg); }
.float.plate .fl-tag i:last-child::after { left: 0; }
.float.plate .fl-tag::before { content: ""; position: absolute; z-index: -1; left: -30%; right: -30%; top: 50%; height: .22em; border-radius: 50%;
  background: linear-gradient(90deg, transparent, transparent 10%, var(--pl-slash) 50%, transparent 90%, transparent); filter: blur(.5px) drop-shadow(0 0 6px var(--pl-slash-glow));
  transform: translateY(-50%) rotate(-14deg) scaleX(0); transform-origin: 0 50%; animation: counterSlash .5s .06s cubic-bezier(.2, .9, .3, 1) forwards; }
.float.plate .fl-num { color: var(--pl-num); font-family: var(--caps); font-weight: 900; font-size: max(28px, calc(var(--cw) * .22)); -webkit-text-stroke: 1px rgba(0, 0, 0, .6); text-shadow: 0 3px 8px #000, 0 0 16px currentColor; }
.float.plate.big .fl-num { font-size: max(34px, calc(var(--cw) * .28)); }
.float.plate .fl-num .sti { width: .7em; height: .7em; vertical-align: -.04em; margin-right: .06em; }
/* 숫자 색 = 원래 cls */
.float.plate.dmg { --pl-num: #ff5e4d; }
.float.plate.heal { --pl-num: #7fe39c; }
.float.plate.shield { --pl-num: #9be8ff; }
.float.plate.debuff { --pl-num: #c9a2ff; }
.float.plate.miss { --pl-num: #b9b9c8; }
.float.plate.miss .fl-num { font-size: max(20px, calc(var(--cw) * .15)); }
/* 명판 빛깔 (금 t-gold는 위 기본값) */
.float.plate.t-blood { --pl-g: linear-gradient(180deg, #fff4ee 0%, #ffc2b0 34%, #f0644c 50%, #8e1a12 58%, #e0705a 78%, #ffd8cc 100%);
  --pl-edge: #3a0806; --pl-glow: rgba(255, 70, 50, .6); --pl-line: #f08c7a; --pl-gem: linear-gradient(135deg, #ffd6c9, #c8402f 60%, #5e0e08); --pl-gem-b: #2a0604;
  --pl-slash: #ffd0c4; --pl-slash-glow: rgba(255, 60, 40, .9); }
.float.plate.t-ice { --pl-g: linear-gradient(180deg, #ffffff 0%, #e2f8ff 34%, #8fdcff 50%, #2b6f9c 58%, #9fe0ff 78%, #f0fcff 100%);
  --pl-edge: #062033; --pl-glow: rgba(110, 205, 255, .65); --pl-line: #9be8ff; --pl-gem: linear-gradient(135deg, #f2fcff, #5fbfe8 60%, #1c5a80); --pl-gem-b: #041a2a;
  --pl-slash: #e6fbff; --pl-slash-glow: rgba(120, 210, 255, .95); }
.float.plate.t-hex { --pl-g: linear-gradient(180deg, #fbf5ff 0%, #e6d2ff 34%, #b48cff 50%, #4e2a8e 58%, #c4a4ff 78%, #f3eaff 100%);
  --pl-edge: #1c0a33; --pl-glow: rgba(150, 100, 255, .65); --pl-line: #c9a2ff; --pl-gem: linear-gradient(135deg, #f0e4ff, #8b5cf6 60%, #3a1a6e); --pl-gem-b: #140628;
  --pl-slash: #efe4ff; --pl-slash-glow: rgba(150, 100, 255, .95); }
.float.plate.t-heal { --pl-g: linear-gradient(180deg, #f4fff6 0%, #d0f7da 34%, #7fe39c 50%, #1f6b3a 58%, #9ff0b6 78%, #ebfff1 100%);
  --pl-edge: #062012; --pl-glow: rgba(110, 230, 150, .6); --pl-line: #8fe8aa; --pl-gem: linear-gradient(135deg, #eafff0, #4fbf74 60%, #14502a); --pl-gem-b: #04180c;
  --pl-slash: #e6ffee; --pl-slash-glow: rgba(100, 230, 140, .9); }
.float.plate.t-silver { --pl-g: linear-gradient(180deg, #ffffff 0%, #e8e8f0 34%, #b9b9c8 50%, #565668 58%, #cfcfdc 78%, #f6f6fa 100%);
  --pl-edge: #14141c; --pl-glow: rgba(200, 200, 220, .35); --pl-line: #c8c8d6; --pl-gem: linear-gradient(135deg, #ffffff, #9a9aac 60%, #44444f); --pl-gem-b: #15151c;
  --pl-slash: #ffffff; --pl-slash-glow: rgba(220, 220, 240, .7); }
@keyframes counterSlash { 0% { transform: translateY(-50%) rotate(-14deg) scaleX(0); opacity: 1; } 60% { transform: translateY(-50%) rotate(-14deg) scaleX(1); opacity: 1; } 100% { transform: translateY(-50%) rotate(-14deg) scaleX(1); opacity: 0; } }
@keyframes counterUp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(.92); } 22% { transform: translate(-50%, -52%) scale(1.04); } 32% { transform: translate(-50%, -54%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .float.plate .fl-tag::before { animation: none; display: none; } }

/* ---------- v3.17.2 코인 창 높이 줄임 (js/game.js coinClash) ----------
   창이 전장 두 줄의 공·방·체 열을 가렸다. 창마다 글(이름 · 확률 · 봉인 버튼)과 코인(코인 · 결과)을
   양옆 두 칸으로 놓아 높이를 약 절반으로. 코인 칸은 VS 쪽. 폰(html.mobile) · 좁은 화면은 예전처럼 세로로 쌓는다(.cs-info/.cs-roll = contents) */
.cs-info, .cs-roll { display: contents; }
@media (min-width: 761px) {
  html:not(.mobile) .coinstage { top: 50%; }
  html:not(.mobile) .cs-side { grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: center; column-gap: 14px; padding: 10px 16px 14px; }
  html:not(.mobile) .cs-right { grid-template-columns: auto minmax(0, 1fr); }
  html:not(.mobile) .cs-right .cs-roll { order: -1; }
  html:not(.mobile) .cs-info, html:not(.mobile) .cs-roll { display: grid; justify-items: center; align-content: center; position: relative; min-width: 0; }
  html:not(.mobile) .cs-info { gap: 4px; }
  html:not(.mobile) .cs-roll { gap: 2px; }
  html:not(.mobile) .cs-coins { min-height: 76px; max-width: 280px; gap: 10px; }
  html:not(.mobile) .cs-res { min-height: 1.3em; font-size: 13px; }
  html:not(.mobile) .cs-flip { min-height: 0; }
  html:not(.mobile) .cs-ctl { min-height: 0; gap: 3px 12px; grid-template-columns: auto auto; margin-top: 2px; }
  html:not(.mobile) .cs-ctl > .cs-stop, html:not(.mobile) .cs-ctl > .cs-cpu-state { grid-column: 1 / -1; }
  html:not(.mobile) .cs-ctl > .cs-stop { padding: 7px 22px; font-size: 16px; }
  html:not(.mobile) .cs-sand { bottom: 6px; }
  html:not(.mobile) .cs-mid { gap: 6px; }
  html:not(.mobile) .cs-mid::before, html:not(.mobile) .cs-mid::after { height: 30px; }
}

/* ---------- v3.17.4 다시 굴리기 화면이 잘리던 것 (js/game.js coinClash) ----------
   v3.17.2에서 .cs-flip이 코인 칸(auto 폭) 안에 있어, 긴 안내가 코인 칸을 300px까지 넓히고 글 칸을 좁혀
   .cs-ctl의 두 단추(줄바꿈 없음)가 창 밖으로 밀려 잘렸다. 이제 .cs-flip은 .cs-side 바로 아래 줄로 창 폭 전체를 쓰고,
   다시 굴리기 안내 · 단추 · 체크도 모두 .cs-flip에 들어간다(.cs-ctl은 비움). 폰은 예전처럼 코인 → 안내 → 단추 차례 */
.cs-flip { display: grid; justify-items: center; gap: 8px; }
.cs-info > .cs-ctl { order: 1; }   /* 폰(.cs-info = contents): 단추 칸은 코인 · 안내 아래 */
@media (min-width: 761px) {
  html:not(.mobile) .cs-side > .cs-flip { grid-column: 1 / -1; }
  html:not(.mobile) .cs-side > .cs-flip:empty { display: none; }
  html:not(.mobile) .cs-side > .cs-flip .cf-hint { max-width: 420px; }
}

/* ---------- v3.17.6 한 창에 코인이 3개 이상이면 코인을 조금 줄인다 (PC만) ----------
   코인 칸이 넓어져 옆 글 칸(이름 · 공격/방어)이 잘리던 것. 3개: 72 → 60px, 4개 이상: 52px (여러 값 코인 84 → 70 / 62px) */
@media (min-width: 761px) {
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) { gap: 8px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) > .cs-coin { width: 60px; height: 60px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) > .cs-coin.multi { width: 70px; height: 70px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) .cs-face b { font-size: 17px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(4)) { gap: 6px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(4)) > .cs-coin { width: 52px; height: 52px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(4)) > .cs-coin.multi { width: 62px; height: 62px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(4)) .cs-face b { font-size: 15px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) .cs-coin.multi .cs-face b { font-size: 13px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) .cs-coin.multi .cs-face i { font-size: 11px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(4)) .cs-coin.multi .cs-face b { font-size: 11px; }
  html:not(.mobile) .coinstage .cs-coins:has(> .cs-coin:nth-child(3)) .cs-tails b { font-size: 11px; }
}