/* ─────────────────────────────────────────────────────────────
   BUNKER Online — 야전 캔버스 테마
   올리브 캔버스 바탕, 모래빛 글자, 신호탄 블루/레드, 경보 앰버, 열영상 노출
   ───────────────────────────────────────────────────────────── */
@import url('./fonts/fonts.css');

:root {
  --bg: #1b1f15;
  --bg-2: #232a1b;
  --bg-3: #2e3624;
  --bg-4: #3a4430;
  --line: rgba(220, 207, 168, .14);
  --line-2: rgba(220, 207, 168, .26);
  --sand: #ddd0a9;
  --sand-2: #b8ad8c;
  --sand-3: #8a8269;
  --amber: #f0ae2e;
  --ember: #d9531e;
  --blue: #3d8bff;
  --blue-2: #1d4f9c;
  --red: #ef4b45;
  --red-2: #8e2622;
  --ok: #8fc25a;
  --bunker: #56653a;
  --bunker-2: #6c7c47;
  --char: #17140f;
  --steel: #7d8790;
  --font-ui: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', sans-serif;
  --font-display: 'Big Shoulders Stencil Display', 'Impact', 'Arial Narrow', sans-serif;
  --r: 4px;
  --tile: 72px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sand);
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%23ddd0a9' stroke-opacity='.045' stroke-width='1.2'%3E%3Cpath d='M74 320c0-120 96-210 220-214s250 70 262 190-80 226-214 236S74 440 74 320z'/%3E%3Cpath d='M128 322c2-92 78-158 172-160s190 52 198 144-62 172-164 178-208-70-206-162z'/%3E%3Cpath d='M184 326c4-64 58-110 122-110s128 36 132 100-42 118-112 122-146-48-142-112z'/%3E%3Cpath d='M236 330c4-38 36-62 76-62s76 22 78 60-26 70-68 72-90-32-86-70z'/%3E%3Cpath d='M-40 40c80 30 150 10 230-30M-40 600c120-40 250-20 360 40M430 -20c40 70 120 100 230 90M500 660c20-60 80-110 170-120'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 0%, rgba(240, 174, 46, .06), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(61, 139, 255, .05), transparent 55%);
  background-size: 640px 640px, 100% 100%, 100% 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
#app { min-height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber); color: var(--char); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--sand-2); }
.dim { color: var(--sand-3); }
.blue { color: var(--blue); }
.red { color: var(--red); }
.amber { color: var(--amber); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ───────── 버튼 ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--bg-3); color: var(--sand);
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  transition: background-color .12s, border-color .12s, transform .06s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-4); border-color: var(--sand-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--sand); color: var(--char); border-color: var(--sand); }
.btn.primary:hover { background: #ece0bb; }
.btn.amber { background: var(--amber); color: var(--char); border-color: var(--amber); }
.btn.team-blue { background: var(--blue-2); border-color: var(--blue); color: #e8f1ff; }
.btn.team-red { background: var(--red-2); border-color: var(--red); color: #ffecea; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(239, 75, 69, .55); color: #ffb3ae; background: transparent; }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn.big { min-height: 52px; padding: 12px 24px; font-size: 16px; }
.icon-btn { width: 40px; padding: 0; }

/* ───────── 입력 ───────── */
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; color: var(--sand-2); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--sand);
}
.input::placeholder { color: var(--sand-3); }
.input:focus { border-color: var(--amber); outline: none; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sand-2) 50%), linear-gradient(135deg, var(--sand-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 7px 12px; color: var(--sand-2); font-weight: 500; font-size: 13px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--sand); color: var(--char); font-weight: 700; }

/* ───────── 워드마크 ───────── */
.wordmark { font-family: var(--font-display); font-weight: 900; letter-spacing: .015em; line-height: .86; color: var(--sand); text-transform: none; }
.wordmark.small { font-size: 30px; }
.wordmark.huge { font-size: clamp(72px, 10vw, 176px); white-space: nowrap; }
.wordmark .v { font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--sand-3); margin-left: 8px; vertical-align: top; }

/* ───────── 로그인 ───────── */
.login {
  min-height: 100vh; display: grid; grid-template-columns: 1.25fr minmax(320px, 420px);
  align-items: center; gap: clamp(24px, 6vw, 96px); padding: clamp(24px, 6vw, 88px);
}
.login-hero { display: grid; gap: 20px; }
.login-hero .tagline { font-size: clamp(18px, 2.2vw, 24px); color: var(--sand-2); max-width: 22em; }
.login-hero .board-art { margin-top: 12px; }
.login-panel { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 28px; display: grid; gap: 16px; box-shadow: var(--shadow); }
.login-panel h2 { font-size: 22px; }
.login-panel .err { color: #ffb3ae; font-size: 14px; min-height: 1.4em; }
.login-panel .swap { font-size: 14px; color: var(--sand-2); }
.login-panel .swap button { background: none; border: 0; color: var(--amber); font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.plaque { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(240, 174, 46, .4); border-radius: var(--r); color: var(--amber); font-weight: 700; font-size: 14px; background: rgba(240, 174, 46, .06); }
.conn-note { font-size: 13px; color: var(--sand-3); }

/* 장식용 미니 보드 (로그인/홈) */
.board-art { display: grid; grid-template-columns: repeat(5, 34px); gap: 4px; }
.board-art i { width: 34px; height: 34px; border-radius: 3px; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 6px), var(--bunker); }
.board-art i.b { background: radial-gradient(circle at 50% 60%, rgba(217, 83, 30, .35), transparent 65%), var(--char); }
.board-art i.h { background: radial-gradient(circle at 50% 50%, #fff 0 10%, #ffe27a 22%, #ff9d2e 40%, #e63b2e 58%, transparent 72%), var(--char); }
.board-art i.w { box-shadow: inset 0 0 0 2px var(--amber); }

/* ───────── 로비 ───────── */
.lobby { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar {
  display: flex; align-items: center; gap: 20px; padding: 12px 24px;
  border-bottom: 1px solid var(--line); background: rgba(27, 31, 21, .85); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.topbar .stats { display: flex; gap: 18px; font-size: 13px; color: var(--sand-2); }
.topbar .stats b { color: var(--sand); font-weight: 700; }
.topbar .spacer { flex: 1; }
.profile-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
.profile-chip .name { font-weight: 700; }
.profile-chip .rating { font-size: 13px; color: var(--sand-2); }

/* 계급장 */
.insignia { display: inline-flex; flex-direction: column; gap: 2px; padding: 4px 5px; border-radius: 3px; background: #2a2f22; border: 1px solid var(--line-2); vertical-align: middle; }
.insignia i { display: block; width: 18px; height: 3px; background: var(--amber); border-radius: 1px; }
.insignia.gen { background: #3b2f12; }
.insignia.gen i { width: 6px; height: 6px; transform: rotate(45deg); margin: 1px auto; }
.tier-name { font-weight: 700; }

.lobby-body { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.menu { display: flex; flex-direction: column; gap: 6px; padding: 20px 16px; border-right: 1px solid var(--line); }
.menu-item {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 14px 14px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--sand);
}
.menu-item:hover { background: var(--bg-2); border-color: var(--line); }
.menu-item[aria-current="true"] { background: var(--bg-3); border-color: var(--line-2); }
.menu-item .ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; background: rgba(0, 0, 0, .25); color: var(--sand-2); }
.menu-item .ico svg, .icon-btn svg { width: 22px; height: 22px; }
.menu-item[aria-current="true"] .ico { color: var(--amber); }
.menu-item .t { font-weight: 700; font-size: 17px; line-height: 1.2; }
.menu-item .d { font-size: 13px; color: var(--sand-2); }
.menu-item.ranked .ico { background: rgba(240, 174, 46, .14); color: var(--amber); }
.menu-item .q { font-size: 12px; font-weight: 700; color: var(--amber); }
.menu .sep { height: 1px; background: var(--line); margin: 10px 4px; }

.queue-box { margin-top: auto; padding: 14px; border: 1px solid rgba(240, 174, 46, .45); border-radius: 6px; background: rgba(240, 174, 46, .07); display: grid; gap: 8px; }
.queue-box .h { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.queue-box .clock { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; }
.radar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--amber); position: relative; overflow: hidden; }
.radar::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(240, 174, 46, .75), transparent 30%); animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.content { padding: 28px clamp(20px, 3vw, 44px) 48px; min-width: 0; }
.content-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.content-head h2 { font-size: 26px; }
.content-head .sub { color: var(--sand-2); font-size: 14px; }
.content-head .spacer { flex: 1; }

/* 홈: 로고 + 게임 설명 */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; max-width: 1100px; }
.home .lead { font-size: 20px; color: var(--sand-2); margin: 14px 0 28px; max-width: 30em; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 28px; }
.rule h3 { font-size: 16px; margin-bottom: 4px; display: flex; gap: 8px; align-items: center; }
.rule h3 .k { width: 22px; height: 22px; display: grid; place-items: center; font-size: 13px; border-radius: 3px; background: var(--bg-3); }
.rule p { color: var(--sand-2); font-size: 14px; }
.home-side { display: grid; gap: 16px; }
.side-card { border: 1px solid var(--line); border-radius: 6px; padding: 16px; background: rgba(0, 0, 0, .14); display: grid; gap: 8px; }
.side-card h4 { font-size: 14px; color: var(--sand-2); font-weight: 500; }
.side-card .big { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; }

/* ───────── 사설방 목록 (블록형) ───────── */
.rooms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.room-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2);
  text-align: left; color: var(--sand); min-height: 118px;
}
.room-card .no { font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1; color: var(--sand-2); text-align: center; align-self: start; }
.room-card.empty-slot { border-style: dashed; background: transparent; color: var(--sand-3); cursor: default; }
.room-card.empty-slot .no { color: rgba(220, 207, 168, .16); }
.room-card:hover { border-color: var(--sand-3); background: var(--bg-3); }
.room-card.playing { opacity: .82; }
.room-card .mapthumb { width: 84px; height: 84px; border-radius: 4px; background: rgba(0, 0, 0, .3); display: grid; place-items: center; font-size: 30px; }
.room-card .info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.room-card .title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-card .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--sand-2); }
.room-card .foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.status-pill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.room-card .foot > span { white-space: nowrap; }
.status-pill.waiting { background: rgba(143, 194, 90, .16); color: var(--ok); }
.status-pill.playing { background: rgba(239, 75, 69, .16); color: #ff8a84; }
.room-empty { grid-column: 1 / -1; padding: 48px 24px; text-align: center; border: 1px dashed var(--line-2); border-radius: 6px; color: var(--sand-2); display: grid; gap: 14px; justify-items: center; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 16px; color: var(--sand-2); }
.mini-map { display: grid; gap: 2px; }
.mini-map i { width: 9px; height: 9px; border-radius: 1px; background: var(--bunker); }
.mini-map i.b { background: var(--char); }
.mini-map i.v { background: transparent; }
.mini-map i.r { background: var(--bunker-2); box-shadow: inset 0 0 0 1px var(--steel); }
.mini-map.big i { width: 18px; height: 18px; border-radius: 2px; }

/* 방 안 */
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slot { border: 1px solid var(--line-2); border-radius: 6px; padding: 18px; background: var(--bg-2); display: grid; gap: 10px; min-height: 150px; align-content: start; }
.slot.empty { border-style: dashed; place-items: center; align-content: center; color: var(--sand-3); }
.slot .who { display: flex; align-items: center; gap: 10px; }
.slot .who .name { font-size: 20px; font-weight: 700; }
.slot .ready { font-weight: 700; color: var(--ok); }
.slot .notready { color: var(--sand-3); }
.spec-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.spec { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.spec.empty { border-style: dashed; color: var(--sand-3); }
.room-settings { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--sand-2); margin: 14px 0; }
.room-settings b { color: var(--sand); }
.chat { border: 1px solid var(--line-2); border-radius: 6px; background: rgba(0, 0, 0, .18); display: grid; grid-template-rows: 1fr auto; height: 420px; }
.chat-log { overflow-y: auto; padding: 12px; display: grid; gap: 6px; align-content: start; font-size: 14px; }
.chat-log .sys { color: var(--sand-3); font-size: 13px; }
.chat-log .from { font-weight: 700; margin-right: 6px; }
.chat form { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--line); }

/* ───────── 빌드 / 도감 ───────── */
.dex { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.item {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px;
  min-height: 98px; padding: 10px 6px 8px; border-radius: 5px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--sand); text-align: center;
}
.item:hover { border-color: var(--sand-3); background: var(--bg-3); }
.item[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.item .ic { font-size: 30px; line-height: 1.1; }
.item .nm { font-weight: 700; font-size: 13px; line-height: 1.25; word-break: keep-all; }
.item .ty { position: absolute; top: 5px; left: 6px; width: 7px; height: 7px; border-radius: 50%; }
.item .us { position: absolute; top: 3px; right: 6px; font-size: 11px; color: var(--sand-3); font-weight: 700; }
.ty-ATK { background: var(--red); }
.ty-DEF { background: var(--ok); }
.ty-SUP { background: var(--blue); }
.item.banned { opacity: .32; filter: grayscale(1); }
.item.banned::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 47%, rgba(239, 75, 69, .9) 47% 53%, transparent 53%); border-radius: 5px; }
.item.picked-BLUE { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: rgba(61, 139, 255, .12); }
.item.picked-RED { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); background: rgba(239, 75, 69, .12); }
.item.unavailable { opacity: .45; }
.item .flag { position: absolute; bottom: 4px; right: 6px; font-size: 10px; color: var(--amber); font-weight: 700; }
.item.hl { box-shadow: 0 0 0 2px var(--amber); }

.detail { position: sticky; top: 76px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); padding: 18px; display: grid; gap: 12px; }
.detail .hd { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.detail .hd .ic { font-size: 40px; text-align: center; }
.detail .hd h3 { font-size: 22px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 3px; background: var(--bg-4); color: var(--sand); }
.tag.ATK { background: rgba(239, 75, 69, .2); color: #ffb3ae; }
.tag.DEF { background: rgba(143, 194, 90, .18); color: #c8e6a6; }
.tag.SUP { background: rgba(61, 139, 255, .2); color: #b9d6ff; }
.tag.t { background: rgba(240, 174, 46, .16); color: var(--amber); }
.tag.tier { border: 1px solid currentColor; background: transparent; }
.tag.tier-무효 { color: #f5d77a; }
.tag.tier-생존 { color: #ff9b8f; }
.tag.tier-방어 { color: #9fd3ff; }
.tag.tier-관통 { color: #ff7a4a; }
.qa-list li.pin { margin: 4px 0 6px; padding: 10px 12px; border: 1px solid rgba(240, 174, 46, .35); border-radius: 6px; background: rgba(240, 174, 46, .07); }
.desc { white-space: pre-line; font-size: 14px; line-height: 1.7; color: var(--sand); word-break: keep-all; }
.note { font-size: 13px; color: var(--amber); border-left: 2px solid var(--amber); padding-left: 10px; white-space: pre-line; }
.detail .empty { color: var(--sand-3); font-size: 14px; }

.builds { display: grid; gap: 10px; margin-top: 18px; }
.build-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0, 0, 0, .15); }
.build-row .nm { font-weight: 700; }
.build-row .its { display: flex; gap: 6px; font-size: 13px; color: var(--sand-2); flex-wrap: wrap; }

/* ───────── 전적 ───────── */
.record-head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); margin-bottom: 18px; }
.record-head .rt { font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: .9; }
.mode-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.mode-stats div { font-size: 14px; color: var(--sand-2); }
.mode-stats b { color: var(--sand); font-size: 18px; margin-right: 2px; }
.matches { display: grid; gap: 8px; }
.match-row { display: grid; grid-template-columns: 6px 82px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px 10px 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.match-row .bar { align-self: stretch; }
.match-row.win .bar { background: var(--ok); }
.match-row.lose .bar { background: var(--red); }
.match-row.draw .bar { background: var(--sand-3); }
.match-row .res { font-weight: 700; }
.match-row .mid { display: grid; gap: 2px; min-width: 0; }
.match-row .mid .l1 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-row .mid .l2 { font-size: 13px; color: var(--sand-2); }
.delta.up { color: var(--ok); font-weight: 700; }
.delta.down { color: #ff8a84; font-weight: 700; }

/* ───────── 세팅 ───────── */
.settings { display: grid; gap: 14px; max-width: 560px; }
.setting { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-2); }
.setting .t { font-weight: 700; }
.setting .d { font-size: 13px; color: var(--sand-2); }
input[type=range] { accent-color: var(--amber); width: 160px; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-3); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sand-3); transition: transform .15s; }
.switch[aria-checked="true"] { background: rgba(240, 174, 46, .3); border-color: var(--amber); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--amber); }

/* ───────── 매치: 공통 ───────── */
.stage { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.stage-top { display: flex; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.stage-top .mode { font-weight: 700; }
.stage-top .spacer { flex: 1; }
.stage-body { display: grid; place-items: center; padding: 24px; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 4vw, 64px); width: min(1000px, 100%); }
.versus .p { display: grid; gap: 8px; justify-items: center; text-align: center; }
.versus .p .nm { font-size: clamp(24px, 3.4vw, 40px); font-weight: 700; }
.versus .vs { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 10vw, 140px); color: var(--amber); line-height: 1; }
.big-title { font-size: clamp(26px, 3vw, 36px); font-weight: 700; text-align: center; }
.big-sub { color: var(--sand-2); text-align: center; margin-top: 6px; }
.timer-bar { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; width: min(520px, 90vw); margin: 18px auto 0; }
.timer-bar i { display: block; height: 100%; background: var(--amber); transition: width .25s linear; }
.clock-big { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; }

/* 가위바위보 */
.rps { display: grid; gap: 28px; justify-items: center; }
.hands { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hand { width: 140px; height: 160px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); display: grid; place-items: center; align-content: center; gap: 8px; font-size: 64px; }
.hand span { font-size: 15px; font-weight: 700; }
.hand:hover { border-color: var(--amber); background: var(--bg-3); }
.hand[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.reveal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }
.reveal .h { font-size: 96px; text-align: center; }
.reveal .who { text-align: center; font-weight: 700; }
.reveal .mid { font-family: var(--font-display); font-size: 48px; color: var(--sand-3); }
@media (prefers-reduced-motion: no-preference) { .reveal .h { animation: thump .5s ease-out both; } }
@keyframes thump { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }

/* 진영 선택 */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: min(860px, 100%); }
.side-pick { text-align: left; padding: 24px; border-radius: 8px; border: 1px solid; display: grid; gap: 10px; min-height: 200px; align-content: start; }
.side-pick.BLUE { border-color: var(--blue); background: linear-gradient(160deg, rgba(61, 139, 255, .18), rgba(61, 139, 255, .04)); color: var(--sand); }
.side-pick.RED { border-color: var(--red); background: linear-gradient(160deg, rgba(239, 75, 69, .18), rgba(239, 75, 69, .04)); color: var(--sand); }
.side-pick .nm { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: .9; }
.side-pick.BLUE .nm { color: var(--blue); }
.side-pick.RED .nm { color: var(--red); }
.side-pick ul { margin: 0; padding-left: 18px; color: var(--sand-2); font-size: 14px; display: grid; gap: 4px; }
.side-pick:hover { filter: brightness(1.12); }
.side-pick:disabled { filter: none; cursor: default; }

/* 맵 룰렛 */
.maps { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.map-card { width: 170px; padding: 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); display: grid; gap: 10px; justify-items: center; transition: transform .12s, border-color .12s; }
.map-card .nm { font-size: 20px; font-weight: 700; }
.map-card .ds { font-size: 12px; color: var(--sand-2); text-align: center; min-height: 3em; }
.map-card.on { border-color: var(--amber); transform: translateY(-6px); box-shadow: 0 0 0 1px var(--amber), 0 12px 30px rgba(240, 174, 46, .18); }
.map-card.final { border-color: var(--amber); transform: translateY(-10px) scale(1.06); box-shadow: 0 0 0 2px var(--amber), 0 18px 40px rgba(240, 174, 46, .25); }

/* ───────── 밴픽 ───────── */
.draft { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 100vh; }
.draft-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 12px 24px 22px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.team { display: grid; gap: 8px; align-content: center; }
.team .slots { display: flex; gap: 14px; align-items: flex-end; }
.team.RED .slots { flex-direction: row-reverse; }
.team.RED { justify-items: end; text-align: right; }
.team .nm { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.team.BLUE .nm { color: #9cc4ff; }
.team.RED .nm { color: #ffaca8; flex-direction: row-reverse; }
.slots-row { display: flex; gap: 6px; }
.team.RED .slots-row { flex-direction: row-reverse; }
.dslot { width: 56px; height: 56px; border-radius: 5px; border: 1px dashed var(--line-2); display: grid; place-items: center; font-size: 28px; position: relative; background: rgba(0, 0, 0, .2); }
.dslot.ban { width: 34px; height: 34px; font-size: 17px; filter: grayscale(1); opacity: .75; }
.dslot.ban.filled::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 46%, rgba(239, 75, 69, .9) 46% 54%, transparent 54%); }
.dslot.filled { border-style: solid; }
.team.BLUE .dslot.pick.filled { border-color: var(--blue); background: rgba(61, 139, 255, .14); }
.team.RED .dslot.pick.filled { border-color: var(--red); background: rgba(239, 75, 69, .14); }
.dslot.now { border-color: var(--amber); border-style: solid; box-shadow: 0 0 0 2px rgba(240, 174, 46, .35); }
@media (prefers-reduced-motion: no-preference) { .dslot.now { animation: pulse 1.2s ease-in-out infinite; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(240, 174, 46, .12); } }
.dslot .lbl { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; color: var(--sand-2); }
.draft-center { text-align: center; display: grid; gap: 4px; justify-items: center; }
.draft-center .step { font-weight: 700; font-size: 18px; }
.draft-center .clock { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.order-strip { display: flex; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; cursor: help; }
.order-strip li { width: 22px; height: 20px; display: grid; place-items: center; border-radius: 3px; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .85); opacity: .38; }
.order-strip li.BLUE { background: var(--blue-2); }
.order-strip li.RED { background: var(--red-2); }
.order-strip li.done { opacity: .7; }
.order-strip li.now { opacity: 1; outline: 2px solid var(--amber); outline-offset: 1px; color: #fff; }
.order-strip li.sep { width: 1px; background: var(--line-2); opacity: 1; margin: 0 4px; }
.draft-center .step.me { color: var(--amber); }
.draft-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding: 20px 24px 24px; align-items: center; width: min(1180px, 100%); margin: 0 auto; }
.draft-pool { display: grid; gap: 12px; justify-items: center; align-content: center; }
.draft-pool .filters { width: min(100%, 744px); margin: 0; }
.draft-pool .draft-presets { width: min(100%, 744px); margin: 0; }
@media (min-width: 1001px) {
  .draft { height: 100vh; min-height: 620px; }
  .draft-body { min-height: 0; align-items: stretch; }
  .draft-pool { align-self: center; max-height: 100%; overflow-y: auto; }
  .draft-body > .detail { position: static; align-self: stretch; max-height: none; min-height: 0; overflow-y: auto; }
}
.draft-actions { display: grid; gap: 10px; }
.draft .item-grid { grid-template-columns: repeat(8, 88px); gap: 7px; justify-content: center; }
@media (max-width: 1240px) { .draft .item-grid { grid-template-columns: repeat(6, 88px); } }
@media (max-width: 1000px) { .draft .item-grid { width: 100%; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); } .draft-pool .filters, .draft-pool .draft-presets { width: 100%; } }
.draft .item { min-height: 80px; padding: 8px 4px 6px; }
.draft .item .ic { font-size: 25px; }
.draft .item .nm { font-size: 12px; }
.draft-presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--sand-2); margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: 13px; color: var(--sand); }
.chip[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }

/* ───────── 게임 ───────── */
.game { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
.hud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.plate { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "tag name" "tag hp" "fx fx"; gap: 2px 12px; align-items: center; }
.plate.RED { grid-template-columns: 1fr auto; grid-template-areas: "name tag" "hp tag" "fx fx"; text-align: right; }
.plate .side-tag { grid-area: tag; font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1; }
.plate .nm { grid-area: name; }
.plate .row2 { grid-area: hp; }
.plate .fxwrap { grid-area: fx; }
.plate.BLUE .side-tag { color: var(--blue); }
.plate.RED .side-tag { color: var(--red); }
.plate .nm { font-weight: 700; font-size: 16px; }
.plate .nm .me { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--sand); color: var(--char); margin: 0 6px; }
.plate .row2 { display: flex; gap: 10px; align-items: center; }
.plate.RED .row2 { justify-content: flex-end; }
.hp { display: inline-flex; gap: 3px; }
.hp i { width: 16px; height: 16px; border-radius: 2px; background: var(--bg-4); position: relative; }
.hp i.on { background: var(--sand); }
.plate.BLUE .hp i.on { background: var(--blue); }
.plate.RED .hp i.on { background: var(--red); }
.hp i.extra { outline: 1px solid var(--amber); }
.hp .n { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 16px; margin-left: 4px; }
.turn-box { display: grid; justify-items: center; gap: 2px; min-width: 220px; }
.turn-box .who { font-size: 18px; font-weight: 700; }
.turn-box .who.me { color: var(--amber); }
.turn-box .meta { display: flex; gap: 10px; font-size: 13px; color: var(--sand-2); align-items: center; }
.phase-steps { display: inline-flex; gap: 0; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; }
.phase-steps span { padding: 2px 10px; color: var(--sand-3); }
.phase-steps span.on { background: var(--amber); color: var(--char); }
.phase-steps span.done { color: var(--sand-2); text-decoration: line-through; }
.clock { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; min-width: 2.2em; text-align: center; }
.clock.low { color: var(--red); }
.fxs { display: flex; flex-wrap: wrap; gap: 4px; }
.plate.RED .fxs { justify-content: flex-end; }
.fx { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--bg-4); color: var(--sand); white-space: nowrap; }
.fx.bad { background: rgba(239, 75, 69, .22); color: #ffb3ae; }
.fx.good { background: rgba(143, 194, 90, .2); color: #c8e6a6; }
.fx.warn { background: rgba(240, 174, 46, .2); color: var(--amber); }

.field-area { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 18px; padding: 16px 20px; min-height: 0; }
.side-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.side-col h4 { font-size: 13px; color: var(--sand-2); font-weight: 500; margin-bottom: 6px; }
.myitems { display: grid; gap: 8px; }
.side-col h4.opp-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.place-st { margin-left: auto; font-size: 12px; color: var(--sand-3); }
.place-st.done { color: var(--ok); font-weight: 700; }
.icard {
  display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--sand);
}
.icard .ic { font-size: 28px; text-align: center; }
.icard .nm { font-weight: 700; font-size: 15px; line-height: 1.2; }
.icard .tm { font-size: 12px; color: var(--sand-2); }
.icard .pill { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 3px; background: rgba(240, 174, 46, .18); color: var(--amber); }
.icard .us { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.icard.usable { border-color: var(--amber); background: linear-gradient(90deg, rgba(240, 174, 46, .12), var(--bg-2) 60%); }
.icard.usable:hover { background: linear-gradient(90deg, rgba(240, 174, 46, .2), var(--bg-3) 70%); }
.icard.active { box-shadow: inset 3px 0 0 var(--amber); }
.icard.spent { opacity: .45; }
.icard.selected { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.icard.opp { cursor: help; }
.icard.opp:hover, .icard.opp:focus-visible { border-color: var(--sand-3); background: var(--bg-3); }
/* 아이템 설명 말풍선 (마우스를 올리면) */
.item-tip { position: fixed; z-index: 70; width: min(340px, calc(100vw - 16px)); pointer-events: none; }
.item-tip[hidden] { display: none; }
.item-tip .detail { position: static; padding: 14px 16px; gap: 10px; box-shadow: 0 14px 36px rgba(0, 0, 0, .5); border-color: var(--sand-3); }
.item-tip .detail .hd { grid-template-columns: 40px 1fr; }
.item-tip .detail .hd .ic { font-size: 30px; }
.item-tip .detail .hd h3 { font-size: 18px; }
.item-tip .desc { font-size: 13px; line-height: 1.65; }
.item-tip .note { font-size: 12px; }
.icard .why { grid-column: 1 / -1; font-size: 12px; color: var(--sand-3); margin-top: -2px; }

.board-wrap { display: grid; justify-items: center; align-content: start; gap: 10px; min-width: 0; }
.alert {
  display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--char); background: var(--amber); visibility: hidden;
}
.alert.on { visibility: visible; }
.alert.blocked { background: var(--bg-3); color: var(--sand-2); visibility: visible; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .alert.on { animation: alarm 1.1s ease-in-out infinite; } }
@keyframes alarm { 50% { box-shadow: 0 0 0 8px rgba(240, 174, 46, .15); } }

.board-frame { position: relative; padding: 22px 10px 10px 26px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.board-frame.warn { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 40px rgba(240, 174, 46, .22); }
.board { display: grid; gap: 5px; }
.axis-x, .axis-y { position: absolute; display: grid; gap: 5px; font-size: 11px; color: var(--sand-3); font-weight: 700; }
.axis-x { top: 4px; left: 26px; right: 10px; text-align: center; }
.axis-y { top: 22px; left: 6px; bottom: 10px; align-items: center; }
.tile {
  position: relative; width: var(--tile); height: var(--tile); border-radius: 4px; border: 0; padding: 0;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 7px), linear-gradient(180deg, var(--bunker-2), var(--bunker));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  cursor: default;
}
.tile.broken { background: radial-gradient(circle at 50% 65%, rgba(217, 83, 30, .22), transparent 62%), repeating-linear-gradient(-30deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 9px), var(--char); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.tile.void { visibility: hidden; }
.tile.reinforced { box-shadow: inset 0 0 0 2px var(--steel), inset 0 -3px 0 rgba(0, 0, 0, .22); }
.tile.cover { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 12px), linear-gradient(180deg, #8f99a1, #5d666d); box-shadow: inset 0 0 0 2px #c3ccd2, inset 0 -3px 0 rgba(0, 0, 0, .3); }
.tile .hpn { position: absolute; right: 4px; bottom: 2px; font-family: var(--font-display); font-weight: 900; font-size: 16px; color: #e9eef1; text-shadow: 0 1px 0 #000; }
.tile.smoke::before { content: ''; position: absolute; inset: -3px; border-radius: 6px; background: radial-gradient(circle at 30% 40%, rgba(210, 210, 200, .55), transparent 55%), radial-gradient(circle at 70% 60%, rgba(200, 200, 190, .5), transparent 55%), rgba(160, 160, 150, .35); pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { .tile.smoke::before { animation: drift 5s ease-in-out infinite alternate; } }
@keyframes drift { to { transform: translate(3px, -2px) scale(1.04); } }
.tile.barrier-BLUE::after, .tile.barrier-RED::after { content: ''; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; z-index: 3; }
.tile.barrier-BLUE::after { box-shadow: inset 0 0 0 3px var(--blue); background: repeating-linear-gradient(45deg, rgba(61, 139, 255, .35) 0 6px, transparent 6px 12px); }
.tile.barrier-RED::after { box-shadow: inset 0 0 0 3px var(--red); background: repeating-linear-gradient(45deg, rgba(239, 75, 69, .35) 0 6px, transparent 6px 12px); }
.tile.meteor { box-shadow: inset 0 0 0 2px var(--red), 0 0 14px rgba(239, 75, 69, .45); }
.tile.shadow { filter: brightness(.55) saturate(.6); }
.tile.shadow::after { content: '그림자'; position: absolute; left: 4px; top: 3px; font-size: 10px; color: var(--sand-2); z-index: 3; }
.tile.lastatk::before { content: ''; position: absolute; inset: 22%; border: 2px solid rgba(239, 75, 69, .75); border-radius: 50%; z-index: 4; pointer-events: none; }
.tile.lastatk::after { content: ''; position: absolute; left: 50%; top: 14%; bottom: 14%; width: 2px; background: rgba(239, 75, 69, .75); transform: translateX(-50%); z-index: 4; }

.tile.can { cursor: pointer; }
.tile.can:hover { outline: 2px solid var(--sand); outline-offset: -2px; }
.tile.move-BLUE { box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 18px rgba(61, 139, 255, .5); cursor: pointer; }
.tile.move-RED { box-shadow: inset 0 0 0 3px var(--red), inset 0 0 18px rgba(239, 75, 69, .5); cursor: pointer; }
.tile.target { box-shadow: inset 0 0 0 3px var(--amber), inset 0 0 22px rgba(240, 174, 46, .55); }
.tile.target .xh { display: block; }
.tile.preview { box-shadow: inset 0 0 0 2px var(--amber); }
.tile.preview::before { content: ''; position: absolute; inset: 0; background: rgba(240, 174, 46, .18); border-radius: 4px; z-index: 1; }
.tile.region { box-shadow: inset 0 0 0 2px rgba(61, 139, 255, .7); }
.tile.dimmed { filter: brightness(.6); }
.xh { display: none; position: absolute; inset: 18%; z-index: 6; pointer-events: none; border: 2px solid var(--amber); border-radius: 50%; }
.xh::before, .xh::after { content: ''; position: absolute; background: var(--amber); }
.xh::before { left: 50%; top: -14%; bottom: -14%; width: 2px; transform: translateX(-50%); }
.xh::after { top: 50%; left: -14%; right: -14%; height: 2px; transform: translateY(-50%); }

.tok { position: absolute; z-index: 5; pointer-events: none; display: block; border-radius: 50%; }
.tok.mine { width: 22%; height: 22%; right: 6%; left: auto; top: 6%; background: #2b2b2b; border: 2px solid var(--red); }
.tok.known { width: 64%; height: 64%; left: 18%; top: 18%; border: 2px dashed rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); }
/* 말: 병사(본체) · 허수아비. 진영 색은 --c, 군복은 --c2 */
.tok.sold, .tok.scare { width: 62%; height: 62%; left: 19%; top: 19%; }
.tok .face { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; background: var(--c, var(--steel)); box-shadow: 0 0 0 2.5px #fff, 0 3px 9px rgba(0, 0, 0, .55); }
.tok .face svg { display: block; width: 100%; height: 100%; }
.tok.sold { --c: var(--steel); --c2: #3e454b; }
.tok.sold.BLUE { --c: var(--blue); --c2: #173f7c; }
.tok.sold.RED { --c: var(--red); --c2: #7a1d19; }
.tok .badge { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; background: #fff; color: var(--char); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: 0; }
.tok.sold.hidden .face { opacity: .55; box-shadow: none; outline: 2.5px dashed #fff; outline-offset: 0; }
.tok.god { width: 56%; height: 56%; left: 22%; top: 22%; }
.tok.god.second { left: 34%; top: 34%; }
.tok.scare .face { background: #3a4430; box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .85), 0 3px 9px rgba(0, 0, 0, .5); }
.tok.scare.BLUE .face { box-shadow: 0 0 0 2.5px var(--blue), 0 3px 9px rgba(0, 0, 0, .5); }
.tok.scare.RED .face { box-shadow: 0 0 0 2.5px var(--red), 0 3px 9px rgba(0, 0, 0, .5); }
.sd-bg { fill: var(--c); }
.sd-uni { fill: var(--c2); }
.sd-pad { fill: rgba(255, 255, 255, .18); }
.sd-col { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 2.2; stroke-linejoin: round; }
.sd-skin { fill: #e8b98e; }
.sd-skin2 { fill: #c8946a; }
.sd-shade { fill: rgba(150, 90, 50, .28); }
.sd-eye { fill: #1d1b16; }
.sd-mouth { stroke: #7a4a32; stroke-width: 1.4; stroke-linecap: round; }
.sd-strap { fill: none; stroke: #2a2a20; stroke-width: 1.9; }
.sd-hel { fill: #6f7d47; }
.sd-hel2 { fill: #5a6838; }
.sd-brim { fill: #4c5930; }
.sd-net { stroke: rgba(30, 35, 18, .45); stroke-width: 1.2; }
.sd-gog { fill: #1d1b16; }
.sd-lens { fill: #8fd0ff; stroke: #1d1b16; stroke-width: 1; }
.sd-glint { stroke: #fff; stroke-width: 1.1; stroke-linecap: round; }
.sc-bg { fill: #3a4430; }
.sc-pole { fill: #8a6a44; }
.sc-straw { stroke: #e2c46a; stroke-width: 1.5; stroke-linecap: round; }
.sc-shirt { fill: #b5523b; }
.sc-patch { fill: #d9b25a; }
.sc-stitch { fill: none; stroke: rgba(40, 20, 10, .6); stroke-width: 1; stroke-dasharray: 1.6 1.4; }
.sc-rope { stroke: #e2c46a; stroke-width: 2; }
.sc-head { fill: #dcc28a; }
.sc-x { stroke: #2a2214; stroke-width: 1.6; stroke-linecap: round; }
.sc-mouth { fill: none; stroke: #2a2214; stroke-width: 1.4; stroke-dasharray: 1.5 1.3; }
.sc-hat { fill: #c99a3e; }
.sc-band { fill: #7a3b26; }

.impact { position: absolute; inset: -4px; border-radius: 6px; z-index: 7; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .impact { animation: impact .7s ease-out both; } }
.impact { background: radial-gradient(circle, rgba(255, 220, 120, .95), rgba(255, 120, 40, .7) 35%, rgba(255, 60, 30, 0) 70%); }
@keyframes impact { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }
.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

.sun-ind { position: absolute; font-size: 22px; z-index: 8; filter: drop-shadow(0 0 8px rgba(255, 200, 60, .8)); }
.sun-ind.N { top: -16px; left: 50%; transform: translateX(-50%); }
.sun-ind.S { bottom: -16px; left: 50%; transform: translateX(-50%); }
.sun-ind.E { right: -16px; top: 50%; transform: translateY(-50%); }
.sun-ind.W { left: -2px; top: 50%; transform: translateY(-50%); }

.log { border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .2); height: 380px; overflow-y: auto; padding: 8px 10px; display: grid; gap: 3px; align-content: start; font-size: 13px; }
.log .e { line-height: 1.45; padding: 2px 0; border-bottom: 1px solid rgba(220, 207, 168, .05); word-break: keep-all; }
.log .e.k-turn { color: var(--sand-3); font-size: 12px; text-align: center; border: 0; padding-top: 6px; }
.log .e.k-hit { color: #ffb3ae; }
.log .e.k-block { color: #c8e6a6; }
.log .e.k-warn { color: var(--amber); }
.log .e.private::before { content: '나만'; font-size: 10px; font-weight: 700; color: var(--char); background: var(--sand-2); border-radius: 2px; padding: 0 4px; margin-right: 5px; }
.log .sB { color: #8fbaff; font-weight: 700; }
.log .sR { color: #ff9c97; font-weight: 700; }

.actionbar { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); background: #14170f; box-shadow: 0 -10px 24px rgba(0, 0, 0, .35); position: sticky; bottom: 0; z-index: 10; }
.actionbar .ins { font-size: 15px; font-weight: 500; }
.actionbar .ins b { color: var(--amber); }
.actionbar .ins .sub { display: block; font-size: 13px; color: var(--sand-2); font-weight: 400; }
.actionbar .btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* 결과 */
.result { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(12, 14, 9, .78); backdrop-filter: blur(3px); padding: 20px; }
.result-card { width: min(720px, 100%); max-height: 92vh; overflow: auto; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); padding: 28px; display: grid; gap: 18px; justify-items: center; text-align: center; box-shadow: var(--shadow); }
.result-card .word { font-family: var(--font-display); font-weight: 900; font-size: clamp(72px, 14vw, 140px); line-height: .85; }
.result-card .word.win { color: var(--amber); }
.result-card .word.lose { color: var(--sand-3); }
.result-card .word.draw { color: var(--sand-2); }
.result-card .reason { color: var(--sand-2); }
.result-card .rating { font-size: 18px; font-weight: 700; }
.result-card .btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* 리플레이 */
.game.replay { grid-template-rows: auto auto 1fr; }
.field-area.rp { grid-template-columns: minmax(0, 1fr) 340px; width: 100%; max-width: 1240px; margin: 0 auto; }
.field-area.pl { grid-template-columns: 250px minmax(0, 1fr) 250px; }
.log .e.k-end { color: var(--amber); font-weight: 700; }
.log .e.k-dice { color: var(--amber); }
.replay-ctrl { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; width: min(720px, 100%); }
.replay-ctrl input[type=range] { width: 100%; }

/* ───────── 모달 / 토스트 ───────── */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(10, 12, 8, .66); padding: 16px; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); padding: 22px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.modal h3 { font-size: 20px; }
.modal .btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal .opts { display: grid; gap: 8px; }
.opt { text-align: left; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--sand); display: grid; gap: 2px; }
.opt:hover { border-color: var(--amber); }
.opt b { font-size: 15px; }
.opt span { font-size: 13px; color: var(--sand-2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 6px; background: var(--sand); color: var(--char); font-weight: 700; font-size: 14px; box-shadow: var(--shadow); max-width: 90vw; }
.toast.error { background: #ffb3ae; }
.conn-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 90; text-align: center; padding: 6px; font-size: 13px; font-weight: 700; background: var(--red-2); color: #fff; }

.center-col { display: grid; gap: 14px; justify-items: center; text-align: center; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line-2); border-top-color: var(--amber); border-radius: 50%; animation: spin .9s linear infinite; }

/* ───────── 반응형 ───────── */
@media (max-width: 1240px) {
  .field-area { grid-template-columns: 220px minmax(0, 1fr); }
  .field-area .right-col { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .log { height: 240px; }
  .field-area.pl { grid-template-columns: 220px minmax(0, 1fr); }
  .field-area.pl > .side-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .lobby-body { grid-template-columns: 1fr; }
  .menu { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .menu-item { width: auto; flex: 1 1 calc(33% - 6px); grid-template-columns: 34px 1fr; padding: 10px; }
  .menu-item .d, .menu-item .q { display: none; }
  .menu .sep { display: none; }
  .queue-box { flex: 1 1 100%; margin-top: 4px; }
  .home { grid-template-columns: 1fr; }
  .dex, .draft-body, .room-layout { grid-template-columns: 1fr; }
  .detail { position: static; }
  .login { grid-template-columns: 1fr; }
  .field-area.rp { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --tile: min(15.5vw, 64px); }
  body { font-size: 14px; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar .stats { display: none; }
  .content { padding: 18px 14px 40px; }
  .rooms-grid { grid-template-columns: 1fr; }
  .room-card { grid-template-columns: 38px minmax(0, 1fr) 64px; gap: 10px; padding: 10px; min-height: 100px; }
  .room-card .no { font-size: 30px; }
  .room-card .mapthumb { width: 64px; height: 64px; }
  .room-card .mini-map i { width: 7px; height: 7px; }
  .form-grid { grid-template-columns: 1fr; }
  .hud { grid-template-columns: 1fr 1fr; padding: 8px 12px; }
  .hud .turn-box { grid-column: 1 / -1; order: -1; }
  .plate .side-tag { font-size: 22px; }
  .field-area { grid-template-columns: 1fr; padding: 10px; }
  .field-area .right-col { grid-template-columns: 1fr; }
  .myitems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .icard { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 6px; gap: 2px; }
  .icard .tm, .icard .why { display: none; }
  .board-frame { padding: 18px 6px 6px 20px; }
  .board, .axis-x, .axis-y { gap: 3px; }
  .axis-x { left: 20px; right: 6px; }
  .actionbar { grid-template-columns: 1fr; padding: 8px 10px; gap: 8px; }
  .actionbar .ins { font-size: 14px; }
  .actionbar .ins .sub { display: none; }
  .actionbar .btn.big { min-height: 44px; }
  .field-area .board-wrap { order: -1; }
  .field-area.pl { grid-template-columns: 1fr; }
  .alert { min-height: 30px; font-size: 14px; }
  .alert:not(.on):not(.blocked) { display: none; }
  .actionbar .btns { justify-content: stretch; }
  .actionbar .btns .btn { flex: 1; }
  .draft-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 12px 18px; gap: 10px; }
  .draft-body { grid-template-columns: minmax(0, 1fr); padding: 14px 12px 20px; }
  .draft-pool { min-width: 0; width: 100%; }
  .team .slots { flex-direction: column; align-items: flex-start; gap: 20px; }
  .team.RED .slots { flex-direction: column; align-items: flex-end; }
  .team .nm { font-size: 16px; }
  .dslot { width: 44px; height: 44px; font-size: 22px; }
  .dslot.ban { width: 28px; height: 28px; font-size: 14px; }
  .order-strip { gap: 2px; }
  .order-strip li { width: 18px; height: 18px; font-size: 9px; }
  .order-strip li.sep { margin: 0 2px; }
  .draft .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .draft-center { grid-column: 1 / -1; order: -1; }
  .dslot { width: 46px; height: 46px; font-size: 22px; }
  .dslot.ban { width: 32px; height: 32px; font-size: 16px; }
  .sides { grid-template-columns: 1fr; }
  .hand { width: 96px; height: 116px; font-size: 44px; }
  .reveal .h { font-size: 64px; }
  .match-row { grid-template-columns: 6px 60px 1fr; }
  .match-row > :last-child { grid-column: 2 / -1; }
  .slots { grid-template-columns: 1fr; }
  .result { padding: 12px; }
  .result-card { padding: 18px 16px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 배경음 안내 (브라우저가 첫 입력 전 소리를 막을 때) */
.sound-hint { position: fixed; left: 16px; bottom: 16px; z-index: 75; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--sand-2); font-size: 13px; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

/* 사용 흐름 (아이템 설명) */
.flow { display: grid; gap: 8px; padding: 10px 12px; border-radius: 6px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.flow-row { display: grid; gap: 6px; }
.flow-lb { font-size: 12px; font-weight: 700; color: var(--sand-2); }
.flow-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.flow-seq { gap: 4px 0; }
.flow-seq li { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 13px; font-size: 13px; font-weight: 700; }
.flow-seq li + li { margin-left: 20px; }
.flow-seq li + li::before { content: '›'; position: absolute; left: -14px; top: 50%; transform: translateY(-52%); color: var(--sand-3); font-weight: 400; font-size: 16px; text-decoration: none; }
.flow-seq li.ph { background: var(--bg-4); color: var(--sand); }
.flow-seq li.ph.gone { background: transparent; color: var(--sand-3); text-decoration: line-through; text-decoration-thickness: 2px; border: 1px dashed var(--line-2); }
.flow-seq li.ph.mode { background: rgba(239, 75, 69, .18); color: #ffc3bf; }
.flow-seq li.it { background: rgba(240, 174, 46, .2); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(240, 174, 46, .55); font-size: 15px; }
.flow-seq li.it.any { font-size: 12px; }
.flow-t { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sand); word-break: keep-all; }

/* ───────── 상호작용 Q&A (아이템 설명 아래) ───────── */
.qa { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.qa-h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sand-2); }
.qa-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--bg-4); color: var(--sand); font-size: 12px; font-variant-numeric: tabular-nums; }
.qa-list { list-style: none; margin: 0; padding: 0; display: grid; }
.qa-list li { display: grid; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qa-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.qa-with { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.qa-w { font-size: 11px; font-weight: 700; color: var(--sand-3); margin-right: 2px; }
.qa-it { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 0; border-radius: 11px; background: rgba(240, 174, 46, .14); color: var(--amber); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
button.qa-it { cursor: pointer; }
button.qa-it:hover { background: rgba(240, 174, 46, .28); }
button.qa-it:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.qa-it.more { background: var(--bg-4); color: var(--sand-2); }
.qa-q, .qa-a { position: relative; margin: 0; padding-left: 25px; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.qa-q { font-weight: 700; color: var(--sand); }
.qa-a { color: var(--sand-2); }
.qa-q::before, .qa-a::before { position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 3px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 13px; line-height: 1; }
.qa-q::before { content: 'Q'; background: var(--amber); color: var(--char); }
.qa-a::before { content: 'A'; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--sand-2); }
.qa-more { margin: 0; font-size: 12px; color: var(--sand-3); }
.qa-rest > summary { cursor: pointer; padding: 6px 0 2px; font-size: 13px; font-weight: 700; color: var(--amber); list-style-position: inside; }
.qa-rest > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }
.qa-rest[open] > summary { margin-bottom: 2px; }
.item-tip .qa { padding-top: 10px; }
.item-tip .qa-list li { padding: 8px 0; }
.item-tip .qa-q, .item-tip .qa-a { font-size: 12px; padding-left: 23px; }
.item-tip .qa-q::before, .item-tip .qa-a::before { width: 16px; height: 16px; font-size: 12px; top: 1px; }
.item-tip .detail { max-height: calc(100vh - 16px); overflow: hidden; }
/* 좁은 화면에서 설명으로 스크롤할 때 위쪽 고정 막대에 가리지 않게 */
.dex > .detail { scroll-margin-top: 84px; }
/* 도감·밴픽의 설명 칸은 화면 높이 안에서 따로 스크롤 */
@media (min-width: 1001px) {
  .dex > .detail, .draft-body > .detail { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* 설명이 길어져도 모달의 버튼은 늘 보이게 */
.modal > .btns { position: sticky; bottom: 0; margin: 0 -22px -22px; padding: 14px 22px 22px; background: linear-gradient(180deg, rgba(35, 42, 27, 0), var(--bg-2) 34%); }
.item-tip .flow { padding: 8px 10px; }
.item-tip .flow-seq li { height: 22px; font-size: 12px; padding: 0 7px; }
.item-tip .flow-t { font-size: 12px; }

/* ═══════════════════════ 이펙트 (public/fx.js) ═══════════════════════ */
#fx-root { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.vfx { position: fixed; transform: translate(-50%, -50%); pointer-events: none; }
.vfx > i, .vfx > b { position: absolute; inset: 0; display: block; font-style: normal; }
@keyframes fx-fade { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* 고리 · 섬광 · 불꽃 */
.fx-ring { border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 14px var(--c), inset 0 0 10px var(--c); animation: fx-ring var(--life, .7s) ease-out both; }
.fx-ring.thin { border-width: 2px; box-shadow: 0 0 10px var(--c); }
.fx-ring.wave { border-width: 12px; filter: blur(1px); }
.fx-ring.implode { animation-name: fx-implode; }
@keyframes fx-ring { from { transform: translate(-50%, -50%) scale(.15); opacity: .95; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes fx-implode { from { transform: translate(-50%, -50%) scale(1); opacity: .9; } to { transform: translate(-50%, -50%) scale(.1); opacity: 0; } }
.fx-flare { border-radius: 50%; background: radial-gradient(circle, #fff 0 8%, var(--c) 26%, transparent 66%); mix-blend-mode: screen; animation: fx-flare var(--life, .6s) ease-out both; }
@keyframes fx-flare { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; } }
.fx-sparks i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); animation: fx-fly var(--life, .7s) cubic-bezier(.15, .7, .3, 1) var(--d, 0ms) both; }
.fx-sparks.inward i { animation-name: fx-in; }
@keyframes fx-fly { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes fx-in { from { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
.fx-smoke { border-radius: 50%; background: radial-gradient(circle at 45% 55%, rgba(70, 66, 58, .75), rgba(60, 56, 50, .35) 45%, transparent 70%); animation: fx-smoke 1.2s ease-out both; }
.fx-smoke.big { animation-duration: 1.5s; }
@keyframes fx-smoke { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(-50%, -62%) scale(1.3); opacity: 0; } }
.fx-whiteout { background: #fff; mix-blend-mode: screen; border-radius: 8px; animation: fx-white .26s ease-out both; }
.fx-whiteout.strong { animation-duration: .42s; }
.fx-whiteout.soft { animation-name: fx-white-soft; } /* 파티클 폭발이 섬광에 묻히지 않게 */
@keyframes fx-white-soft { 0% { opacity: 0; } 15% { opacity: .4; } 100% { opacity: 0; } }
@keyframes fx-white { 0% { opacity: 0; } 15% { opacity: .85; } 100% { opacity: 0; } }
.kc-flash { animation-name: kc-white !important; }
@keyframes kc-white { 0% { opacity: 0; } 15% { opacity: .5; } 100% { opacity: 0; } }

/* 아이콘 · 숫자 */
.fx-icon i { display: grid; place-items: center; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); animation: fx-pop var(--life, 1.1s) cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes fx-pop { 0% { transform: scale(.2); opacity: 0; } 18% { transform: scale(1.15); opacity: 1; } 30% { transform: scale(1); } 75% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-16px); } }
.fx-icon.slam i { animation-name: fx-slam; }
@keyframes fx-slam { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 22% { transform: scale(.92) rotate(0); opacity: 1; } 32% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-icon.spin i { animation-name: fx-spinpop; }
@keyframes fx-spinpop { 0% { transform: scale(.2) rotate(-180deg); opacity: 0; } 30% { transform: scale(1.05) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(40deg); opacity: 0; } }
.fx-icon.leaf i, .fx-icon.pink i, .fx-icon.heal i { animation-name: fx-drift; }
.fx-icon.pink i { color: #ff7ad9; text-shadow: 0 0 8px #ff7ad9; }
.fx-icon.heal i { color: #8be36a; text-shadow: 0 0 10px #7ed957; font-weight: 900; }
@keyframes fx-drift { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translate(10px, -26px) rotate(40deg) scale(.8); } }
.fx-icon.descend i { animation-name: fx-descend; }
@keyframes fx-descend { 0% { transform: translateY(-50%) scale(.9); opacity: 0; } 30% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.fx-icon.glint i { animation-name: fx-glint; }
@keyframes fx-glint { 0%, 100% { opacity: 0; transform: scale(.6); } 20%, 80% { opacity: 1; transform: scale(1); } 50% { filter: drop-shadow(0 0 12px #ff8a3c); } }
.fx-text i { display: block; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .6); white-space: nowrap; animation: fx-rise var(--life, 1.2s) ease-out both; }
.fx-text.hurt i { color: #ff6a5a; }
.fx-text.heal i { color: #8be36a; }
.fx-text.amber i { color: var(--amber); }
.fx-text.arcane i { color: #c9a8ff; font-size: 18px; }
.fx-text.steel i { color: #d7dde2; font-size: 16px; }
@keyframes fx-rise { 0% { transform: translateY(8px) scale(.7); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 30% { transform: scale(1); } 100% { transform: translateY(-34px); opacity: 0; } }

/* 광선 · 궤적 */
.fx-beam { transform: translate(-50%, -50%) rotate(var(--ang)); }
.fx-beam i { border-radius: 99px; background: linear-gradient(90deg, transparent, var(--c) 12%, #fff 50%, var(--c) 88%, transparent); box-shadow: 0 0 12px var(--c), 0 0 26px var(--c); transform-origin: left center; animation: fx-beam var(--life, .7s) ease-out both; }
@keyframes fx-beam { 0% { transform: scaleX(0); opacity: 1; } 25% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.fx-beam.laser i { background: linear-gradient(90deg, rgba(255, 42, 42, 0), #ff2a2a 20%, #ff7a6a 60%, #ff2a2a); box-shadow: 0 0 8px #ff2a2a, 0 0 18px rgba(255, 42, 42, .7); animation-name: fx-laser; }
@keyframes fx-laser { 0% { transform: scaleX(0); } 15% { transform: scaleX(1); } 90% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.fx-beam.tracer i { background: linear-gradient(90deg, rgba(255, 243, 176, 0), #fff3b0 40%, #fff); box-shadow: 0 0 16px #ffd27a; animation: fx-tracer var(--life, .26s) linear both; }
@keyframes fx-tracer { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.fx-beam.ghost i, .fx-beam.dash i { background: linear-gradient(90deg, transparent, var(--c)); box-shadow: 0 0 10px var(--c); animation-name: fx-ghost; }
.fx-beam.speed i { background: repeating-linear-gradient(90deg, transparent 0 6px, var(--c) 6px 14px); box-shadow: 0 0 8px var(--c); animation-name: fx-ghost; }
.fx-beam.string i { background: var(--c); box-shadow: 0 0 4px rgba(255, 255, 255, .4); animation-name: fx-ghost; }
.fx-beam.charge i { animation-duration: var(--life, .76s); }
@keyframes fx-ghost { 0% { transform: scaleX(0); opacity: .95; } 40% { transform: scaleX(1); opacity: .95; } 100% { transform: scaleX(1); opacity: 0; } }

/* 포탄 · 낙하물 */
.fx-shell i { border-radius: 99px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--c) 70%, #fff); box-shadow: 0 0 10px var(--c); transform-origin: bottom center; animation: fx-shell .25s cubic-bezier(.55, 0, 1, .45) both; }
.fx-shell.heavy i { box-shadow: 0 0 16px var(--c), 0 0 30px var(--c); }
@keyframes fx-shell { 0% { transform: translateY(-80%) scaleY(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0) scaleY(1); opacity: 1; } }
.fx-drop i { display: grid; place-items: center; line-height: 1; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .5)); animation: fx-drop .55s cubic-bezier(.5, 0, .8, .6) both; }
.fx-drop.chain i { animation-duration: .45s; }
@keyframes fx-drop { 0% { transform: translateY(calc(-1 * var(--h))) rotate(-30deg); opacity: 0; } 15% { opacity: 1; } 78% { transform: translateY(0) rotate(10deg); } 88% { transform: translateY(-12%) rotate(0); } 100% { transform: translateY(0); opacity: 1; } }
.fx-area { border-radius: 6px; box-shadow: inset 0 0 0 2px var(--c), inset 0 0 22px var(--c); background: rgba(255, 90, 60, .12); animation: fx-area 1.4s ease-in-out both; }
.fx-area.hot { background: rgba(255, 120, 40, .35); animation-duration: .9s; }
@keyframes fx-area { 0% { opacity: 0; } 20%, 60% { opacity: 1; } 40% { opacity: .55; } 100% { opacity: 0; } }
.fx-meteor .core { border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 12%, #ffe08a 26%, #ff8a2e 48%, #c4321f 66%, transparent 72%); box-shadow: 0 0 30px #ff8a2e, 0 0 60px rgba(255, 90, 40, .6); animation: fx-meteor var(--fall, .62s) cubic-bezier(.55, .05, .85, .35) both; }
.fx-meteor .trail { left: 50%; top: 30%; right: auto; bottom: auto; width: var(--len); height: 40%; transform-origin: left center; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 210, 120, .95), rgba(255, 110, 40, .55) 40%, transparent); filter: blur(2px); animation: fx-trail var(--fall, .62s) cubic-bezier(.55, .05, .85, .35) both; }
@keyframes fx-meteor { from { transform: translate(var(--sx), var(--sy)) scale(.6); } to { transform: translate(0, 0) scale(1); } }
@keyframes fx-trail { from { transform: translate(var(--sx), var(--sy)) rotate(calc(var(--ang) + 180deg)); } to { transform: translate(0, 0) rotate(calc(var(--ang) + 180deg)); } }
.fx-bolt svg { position: absolute; left: 0; top: 0; overflow: visible; }
.fx-bolt polyline { fill: none; stroke: #fff6b0; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 6px #ffe27a) drop-shadow(0 0 14px #ffb347); animation: fx-bolt .5s steps(1) both; }
@keyframes fx-bolt { 0% { opacity: 1; } 20% { opacity: .2; } 35% { opacity: 1; } 70% { opacity: .8; } 100% { opacity: 0; } }

/* 조준 스코프 */
.fx-scope svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 59, 48, .45)); animation: fx-scope-in .64s cubic-bezier(.2, .8, .2, 1) both; }
.fx-scope .teeth { animation: fx-teeth .64s cubic-bezier(.2, .8, .2, 1) both; }
.fx-scope.big svg { animation-duration: .9s; }
@keyframes fx-scope-in { 0% { transform: scale(3.4); opacity: 0; } 35% { opacity: 1; } 55% { transform: scale(1); } 75% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes fx-teeth { from { transform: rotate(-70deg); } to { transform: rotate(0); } }
.fx-vignette { border-radius: 8px; background: radial-gradient(circle at var(--px) var(--py), transparent calc(var(--r) * .9), rgba(0, 0, 0, .4) calc(var(--r) * 2.2), rgba(0, 0, 0, .52)); animation: fx-vig .8s ease-out both; }
.fx-snipe { border-radius: 8px; background: radial-gradient(circle at var(--px) var(--py), transparent var(--r), rgba(0, 0, 0, .72) calc(var(--r) + 2px)); animation: fx-vig .9s ease-out both; }
@keyframes fx-vig { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.tile.target .xh { display: block; inset: 9%; border: 2px solid rgba(255, 59, 48, .95); border-radius: 50%;
  background: radial-gradient(circle, #ff2a2a 0 2.5px, transparent 3px), linear-gradient(rgba(255, 240, 220, .95), rgba(255, 240, 220, .95)) center / 2px 64% no-repeat, linear-gradient(90deg, rgba(255, 240, 220, .95), rgba(255, 240, 220, .95)) center / 64% 2px no-repeat;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 59, 48, .55); }

/* 이름표(체력 칸) 반응 */
.fx-plate { --pc: #fff; border-radius: 10px; box-shadow: 0 0 0 2px var(--pc), 0 0 22px var(--pc); background: radial-gradient(ellipse at center, rgba(255, 255, 255, .06), transparent 70%); animation: fx-plate var(--life, .9s) ease-out both; }
.fx-plate.hurt { --pc: #ff3b30; animation-name: fx-plate-hurt; }
.fx-plate.heal { --pc: #7ed957; }
.fx-plate.gold, .fx-plate.amber { --pc: #f0ae2e; }
.fx-plate.arcane { --pc: #b48cff; }
.fx-plate.guard { --pc: #7fb2ff; }
.fx-plate.red { --pc: #ef4b45; }
.fx-plate.blood { --pc: #b3201b; }
.fx-plate.frost { --pc: #9fd8ff; }
.fx-plate.steel { --pc: #c9ced4; }
.fx-plate.fire { --pc: #ff8a3c; }
@keyframes fx-plate { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes fx-plate-hurt { 0% { opacity: 0; } 10% { opacity: 1; transform: translate(-53%, -50%); } 25% { transform: translate(-47%, -50%); } 40% { transform: translate(-51%, -50%); } 55% { transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
.fx-hurt-screen { box-shadow: inset 0 0 140px rgba(255, 30, 30, .5); animation: fx-fade .7s ease-out both; }
.fx-lob i { display: grid; place-items: center; font-size: 28px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .4)); animation: fx-lob .6s cubic-bezier(.4, 0, .6, 1) both; }
.fx-lob.spin i { animation-name: fx-lob-spin; }
@keyframes fx-lob { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 50px)) scale(1.25); } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; } }
@keyframes fx-lob-spin { 0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(720deg) scale(1); opacity: 1; } }

/* 아이템별 */
.fx-web b { border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .78) 0 2deg, transparent 2deg 45deg), repeating-radial-gradient(circle, transparent 0 8px, rgba(255, 255, 255, .6) 8px 9.5px, transparent 9.5px 14px); -webkit-mask: radial-gradient(circle, #000 55%, transparent 72%); mask: radial-gradient(circle, #000 55%, transparent 72%); animation: fx-web 1.6s ease-out both; }
@keyframes fx-web { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 20% { transform: scale(1.05); opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; } }
.fx-frost b { border-radius: 6px; background: linear-gradient(135deg, rgba(200, 235, 255, .5), rgba(120, 190, 255, .15)); box-shadow: inset 0 0 0 2px rgba(200, 235, 255, .8), inset 0 0 18px rgba(160, 215, 255, .8); animation: fx-fade 1.4s ease-out both; }
.fx-shield b { border-radius: 50%; background: radial-gradient(circle, transparent 50%, rgba(127, 178, 255, .35) 62%, rgba(200, 225, 255, .9) 70%, transparent 72%); animation: fx-shield .7s ease-out both; }
@keyframes fx-shield { 0% { transform: scale(.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.fx-wall b { border-radius: 4px; background: repeating-linear-gradient(60deg, transparent 0 7px, var(--c) 7px 9px), repeating-linear-gradient(-60deg, transparent 0 7px, var(--c) 7px 9px); box-shadow: inset 0 0 0 3px var(--c), 0 0 20px var(--c); transform-origin: bottom; animation: fx-wall 1.3s ease-out both; }
@keyframes fx-wall { 0% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1.08); opacity: .95; } 45% { transform: scaleY(1); } 100% { opacity: 0; } }
.fx-slab b { border-radius: 4px; background: linear-gradient(180deg, #a8b1b8, #6b747a); box-shadow: inset 0 0 0 2px #d0d7dc, 0 10px 20px rgba(0, 0, 0, .5); animation: fx-slab .7s cubic-bezier(.5, 0, .9, .5) both; }
@keyframes fx-slab { 0% { transform: translateY(-40%) scale(1.5); opacity: 0; } 40% { transform: translateY(0) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.fx-rise b { border-radius: 4px; background: linear-gradient(180deg, rgba(159, 190, 110, .9), rgba(95, 120, 60, .9)); box-shadow: inset 0 0 0 2px rgba(220, 240, 180, .6); transform-origin: bottom; animation: fx-rise-b .7s ease-out both; }
@keyframes fx-rise-b { 0% { transform: scaleY(.1); opacity: 0; } 40% { transform: scaleY(1.1); opacity: 1; } 60% { transform: scaleY(1); } 100% { opacity: 0; } }
.fx-cloud b { border-radius: 50%; background: radial-gradient(circle, rgba(225, 225, 215, .85), rgba(200, 200, 190, .4) 55%, transparent 72%); animation: fx-cloud 1.7s ease-out both; }
.fx-cloud b:nth-child(2) { inset: 10% 30% 20% -10%; animation-delay: .1s; }
.fx-cloud b:nth-child(3) { inset: -10% -10% 30% 35%; animation-delay: .2s; }
@keyframes fx-cloud { 0% { transform: scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25) translateY(-8%); opacity: 0; } }
.fx-sun { --sx: 50%; --sy: -12%; border-radius: 8px; overflow: hidden; }
.fx-sun.S { --sy: 112%; }
.fx-sun.E { --sx: 112%; --sy: 50%; }
.fx-sun.W { --sx: -12%; --sy: 50%; }
.fx-sun::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--sx) var(--sy), rgba(255, 200, 100, .38), transparent 62%); animation: fx-fade 1.7s ease-in-out both; }
.fx-sun .disc { inset: auto; left: var(--sx); top: var(--sy); width: 46%; height: auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0 20%, #ffd36a 40%, rgba(255, 170, 60, .5) 60%, transparent 72%); animation: fx-sunglow 1.7s ease-out both; }
.fx-sun .rays { background: repeating-conic-gradient(from 0deg at var(--sx) var(--sy), rgba(255, 220, 140, .3) 0 3deg, transparent 3deg 12deg); mix-blend-mode: screen; animation: fx-fade 1.7s ease-in-out both; }
@keyframes fx-sunglow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.fx-radar { border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(125, 255, 154, .6); background: rgba(40, 120, 60, .12); animation: fx-fade 1.3s ease-in-out both; }
.fx-radar b { inset: -60%; background: conic-gradient(from 0deg, rgba(125, 255, 154, .55), rgba(125, 255, 154, 0) 70deg, transparent 360deg); animation: fx-sweep 1.1s linear both; }
@keyframes fx-sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.fx-tint { border-radius: 8px; animation: fx-fade 1.2s ease-in-out both; }
.fx-tint.gold { background: radial-gradient(circle, rgba(240, 174, 46, .28), rgba(240, 174, 46, .08) 70%); }
.fx-tint.violet { background: radial-gradient(circle, rgba(180, 140, 255, .22), transparent 70%); animation-duration: .7s; }
.fx-tint.dusk { background: linear-gradient(180deg, rgba(255, 150, 60, .18), rgba(60, 30, 80, .22)); animation-duration: .9s; }
.fx-edge { border-radius: 10px; animation: fx-heart 1.2s ease-in-out both; }
.fx-edge.red { box-shadow: inset 0 0 0 3px rgba(239, 75, 69, .9), inset 0 0 50px rgba(239, 75, 69, .55); }
.fx-edge.blood { box-shadow: inset 0 0 60px rgba(140, 10, 10, .85), inset 0 0 0 2px rgba(200, 30, 30, .8); animation-duration: 1.5s; }
@keyframes fx-heart { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: .35; } 45% { opacity: 1; } 100% { opacity: 0; } }
.fx-yy b { border-radius: 50%; background: radial-gradient(circle at 25% 50%, #ef4b45 0 24.5%, transparent 25%), radial-gradient(circle at 75% 50%, #3d8bff 0 24.5%, transparent 25%), linear-gradient(180deg, #ef4b45 50%, #3d8bff 50%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 34px var(--hi); animation: fx-yy 1.5s ease-in-out both; }
@keyframes fx-yy { 0% { transform: scale(.3) rotate(-180deg); opacity: 0; } 30% { transform: scale(1) rotate(0); opacity: 1; } 70% { transform: rotate(180deg); opacity: 1; } 100% { transform: rotate(270deg) scale(.9); opacity: 0; } }
.fx-atom b { inset: 32% 0; border-radius: 50%; border: 2px solid rgba(180, 140, 255, .9); box-shadow: 0 0 12px rgba(180, 140, 255, .7); animation: fx-orbit 1.3s linear both; }
.fx-atom b:nth-child(2) { --r0: 60deg; }
.fx-atom b:nth-child(3) { --r0: -60deg; }
.fx-atom i { inset: 43%; border-radius: 50%; background: radial-gradient(circle, #fff, #b48cff); box-shadow: 0 0 16px #b48cff; animation: fx-fade 1.3s both; }
@keyframes fx-orbit { 0% { transform: rotate(var(--r0, 0deg)) scale(.4); opacity: 0; } 20% { transform: rotate(calc(var(--r0, 0deg) + 40deg)) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(calc(var(--r0, 0deg) + 200deg)) scale(1.1); opacity: 0; } }
.fx-clock { border-radius: 50%; border: 3px solid #7fb2ff; box-shadow: 0 0 14px #7fb2ff, inset 0 0 10px rgba(127, 178, 255, .5); background: rgba(20, 30, 60, .35); animation: fx-plate 1.1s ease-out both; }
.fx-clock b { inset: auto; left: 50%; bottom: 50%; width: 3px; border-radius: 2px; background: #cfe1ff; transform-origin: bottom center; animation: fx-ccw 1.1s linear both; }
.fx-clock .h { height: 26%; }
.fx-clock .m { height: 38%; width: 2px; animation-duration: .55s; animation-iteration-count: 2; }
@keyframes fx-ccw { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(-360deg); } }
.fx-lens { border-radius: 8px; overflow: hidden; }
.fx-lens b { inset: auto; top: 50%; left: 0; width: 34%; height: auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .45), rgba(160, 210, 255, .12) 40%, transparent 62%); box-shadow: 0 0 0 3px rgba(201, 164, 106, .8), 0 0 30px rgba(255, 230, 160, .35); animation: fx-lens 1s ease-in-out both; }
@keyframes fx-lens { from { left: 0; transform: translate(-100%, -50%); } to { left: 100%; transform: translate(0, -50%); } }
.fx-gust i { display: grid; place-items: center; font-size: 20px; animation: fx-gust 1.2s ease-in both; }
@keyframes fx-gust { from { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
.fx-dice b { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14%; gap: 4%; border-radius: 18%; background: linear-gradient(145deg, #fff, #d9d4c6); box-shadow: 0 8px 22px rgba(0, 0, 0, .55), inset 0 -4px 0 rgba(0, 0, 0, .15); animation: fx-tumble .63s linear both; }
.fx-dice b i { border-radius: 50%; }
.fx-dice b i.on { background: #1b1f15; }
.fx-dice.land b { animation: fx-land .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.fx-dice em { position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; font-style: normal; font-weight: 700; font-size: 16px; white-space: nowrap; background: rgba(23, 20, 15, .88); color: var(--sand); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); animation: fx-word .3s ease-out both; }
.fx-dice em.r3 { color: var(--amber); }
.fx-dice em.r6 { color: #fff; background: #c8321f; }
@keyframes fx-word { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fx-tumble { from { transform: rotate(0) scale(.6); } to { transform: rotate(540deg) scale(1); } }
@keyframes fx-land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.phase-steps.fx-swap span { animation: fx-swap .6s ease-in-out both; }
@keyframes fx-swap { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* 아이템 이름 알림 */
.fx-banner { width: auto !important; height: auto !important; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 8px; background: rgba(14, 16, 11, .9); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 4px 0 0 var(--c), 0 10px 28px rgba(0, 0, 0, .45); white-space: nowrap; z-index: 2; animation: fx-banner 1.5s cubic-bezier(.2, .8, .2, 1) both; }
.fx-banner .ic { font-size: 22px; line-height: 1; }
.fx-banner .nm { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--sand); }
.fx-banner .by { font-size: 12px; font-weight: 700; color: var(--c); }
@keyframes fx-banner { 0% { transform: translate(-50%, -50%) translateY(-12px); opacity: 0; } 14% { transform: translate(-50%, -50%); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -50%) translateY(-6px); opacity: 0; } }

/* 흔들림 */
.shake-heavy { animation: shake-heavy .5s; }
@keyframes shake-heavy { 10% { transform: translate(-6px, 3px); } 25% { transform: translate(6px, -3px); } 40% { transform: translate(-5px, -2px); } 55% { transform: translate(4px, 3px); } 70% { transform: translate(-2px, 1px); } 85% { transform: translate(1px, -1px); } }

/* ── 막타 연출 ── */
.kc { position: fixed; inset: 0; z-index: 5; pointer-events: auto; cursor: pointer; }
.kc-dim { position: absolute; inset: 0; z-index: 0; background: rgba(6, 7, 5, .84); -webkit-backdrop-filter: blur(2px) grayscale(.7); backdrop-filter: blur(2px) grayscale(.7); animation: kc-in .45s ease-out both; }
.kc-lens { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.kc-lens > .board-frame { z-index: 1; box-shadow: none; }
.kc-rim { position: absolute; z-index: 2; transform: translate(-50%, -50%) scale(1.25); opacity: 0; transition: opacity .35s ease-out, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.kc-rim.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kc-rim svg { width: 100%; height: 100%; overflow: visible; }
.kc-rim .glass { fill: none; stroke: rgba(0, 0, 0, .6); stroke-width: 4; }
.kc-rim .teeth { fill: none; stroke: #d8352b; stroke-width: 3; stroke-dasharray: 1.9 1.5; filter: drop-shadow(0 0 2px rgba(255, 60, 40, .6)); }
.kc-rim .gear { animation: kc-gear 7s linear infinite; }
.kc-rim .brass { fill: none; stroke: #b08a52; stroke-width: 2.2; }
.kc-rim .inner { fill: none; stroke: rgba(255, 240, 215, .5); stroke-width: .5; }
.kc-rim .cross line { stroke: rgba(10, 10, 8, .9); stroke-width: .55; }
.kc-rim .mil circle { fill: rgba(10, 10, 8, .9); }
.kc-rim .lock { transform: scale(1.8); opacity: .45; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), opacity .25s; }
.kc-rim .lock circle, .kc-rim .lock line { fill: none; stroke: #ff3b30; stroke-width: .7; }
.kc-rim.locked .lock { transform: scale(1); opacity: 1; }
.kc-rim .dot { fill: #ff2a2a; filter: drop-shadow(0 0 3px #ff2a2a); }
.kc-rim.locked .dot { animation: kc-dot .45s ease-in-out infinite alternate; }
@keyframes kc-gear { to { transform: rotate(360deg); } }
@keyframes kc-dot { to { opacity: .45; } }
.kc-read { position: absolute; right: 12%; bottom: 7%; display: flex; gap: 6px; align-items: baseline; font-size: 12px; color: #ffcf9a; text-shadow: 0 1px 2px #000; }
.kc-read b { font-family: var(--font-display); font-size: 18px; color: #fff; }
.kc-read .sep { width: 8px; }
.kc .recoil { animation: kc-recoil .32s ease-out; }
@keyframes kc-recoil { 20% { translate: 6px -5px; } 45% { translate: -4px 3px; } 70% { translate: 2px -1px; } }
.kc-bar { position: absolute; left: 0; right: 0; height: 9vh; z-index: 6; background: #000; animation: kc-bar .5s cubic-bezier(.2, .8, .2, 1) both; }
.kc-bar.top { top: 0; transform-origin: top; }
.kc-bar.bot { bottom: 0; transform-origin: bottom; }
.kc > .vfx { z-index: 3; }
.kc-title { position: absolute; left: 0; right: 0; bottom: 11vh; z-index: 5; display: grid; justify-items: center; gap: 6px; padding: 0 16px; text-align: center; animation: kc-title .6s cubic-bezier(.2, .8, .2, 1) both; }
.kc-title b { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 6vw, 68px); line-height: 1; color: #fff; text-shadow: 0 0 24px rgba(255, 80, 50, .6), 0 3px 0 #000; }
.kc-title span { font-size: clamp(13px, 1.6vw, 16px); color: var(--sand); word-break: keep-all; }
.kc.lite .kc-title { bottom: auto; top: 40vh; }
.kc.out { animation: kc-out .38s ease-in both; }
@keyframes kc-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kc-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kc-title { from { opacity: 0; transform: translateY(14px) scale(1.06); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes kc-out { to { opacity: 0; } }
.fx-muzzle b { border-radius: 50%; background: radial-gradient(circle, #fff 0 10%, #fff2b0 22%, #ffb347 40%, rgba(255, 90, 40, .5) 58%, transparent 70%); mix-blend-mode: screen; animation: kc-muzzle .42s ease-out both; }
@keyframes kc-muzzle { 0% { transform: scale(.2); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.kc-down .tok { filter: grayscale(1) brightness(.55); transform: scale(.82); transition: filter .5s, transform .5s; }
.kc-down::before { content: ''; position: absolute; inset: 6%; z-index: 9; border-radius: 4px; background: linear-gradient(35deg, transparent 46%, rgba(0, 0, 0, .85) 47% 49%, transparent 50%), linear-gradient(-58deg, transparent 47%, rgba(0, 0, 0, .75) 48% 49.5%, transparent 50.5%), linear-gradient(100deg, transparent 52%, rgba(0, 0, 0, .6) 53% 54%, transparent 55%); }

@media (prefers-reduced-motion: reduce) {
  .vfx, .vfx > i, .vfx > b, .vfx i, .vfx b, .vfx svg, .vfx polyline { animation-name: fx-fade !important; }
  .fx-ring, .fx-flare, .fx-plate, .fx-smoke { transform: translate(-50%, -50%) !important; }
}
.flow-seq li.it.any + li::before { content: '|'; left: -13px; font-size: 14px; }

/* ───────── v24.8 ───────── */
/* 특수 승리 연출 */
.kc.sp { display: grid; place-items: center; }
.kc.sp.out { animation: kc-out .38s ease-in both; }
.sp-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(120, 70, 200, .55), rgba(6, 7, 5, .9) 62%); animation: kc-in .45s ease-out both; }
.sp-burst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.sp-burst i { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(240, 174, 46, .7); animation: sp-ring 1.6s ease-out infinite; }
.sp-burst i:nth-child(2) { animation-delay: .4s; border-color: rgba(201, 168, 255, .7); }
.sp-burst i:nth-child(3) { animation-delay: .8s; }
@keyframes sp-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.sp-ic { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 96px; filter: drop-shadow(0 0 24px rgba(201, 168, 255, .8)); animation: sp-pop .7s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes sp-pop { from { transform: translate(-50%, -50%) scale(.2) rotate(-30deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.sp-txt { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; text-align: center; width: min(90vw, 640px); animation: fx-word .5s .35s ease-out both; }
.sp-txt b { font-family: var(--font-display); font-size: clamp(38px, 7vw, 72px); line-height: 1; color: #f5d77a; text-shadow: 0 4px 18px rgba(0, 0, 0, .6); }
.sp-txt span { font-size: 16px; color: var(--sand); }
.sp-txt em { font-style: normal; font-size: 13px; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: rgba(240, 174, 46, .2); color: var(--amber); }
/* 사생결단 종료: 핏빛 배경, 붉은 고리, 창백한 글자 */
.kc.sp.desperate .sp-bg { background: radial-gradient(circle at 50% 46%, rgba(150, 18, 18, .6), rgba(8, 4, 4, .93) 62%); }
.kc.sp.desperate .sp-burst i { border-color: rgba(220, 40, 30, .65); }
.kc.sp.desperate .sp-burst i:nth-child(2) { border-color: rgba(120, 10, 10, .7); }
.kc.sp.desperate .sp-ic { filter: drop-shadow(0 0 26px rgba(255, 40, 30, .85)); }
.kc.sp.desperate .sp-txt b { color: #ffd2c8; text-shadow: 0 0 22px rgba(220, 30, 20, .7), 0 4px 18px rgba(0, 0, 0, .6); }
.kc.sp.desperate .sp-txt em { background: rgba(220, 40, 30, .22); color: #ff8a7a; }
/* 경기 상단 소리 버튼 */
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn svg { width: 16px; height: 16px; }
.compact-more { font-size: 12px; margin: 0; }
/* 판정 단계 태그 + 설명 말풍선 */
.tag.tier { position: relative; cursor: help; }
.tag.tier:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.tier-pop { display: none; position: absolute; z-index: 80; left: 0; top: calc(100% + 8px); width: 300px; padding: 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #1d2317; box-shadow: var(--shadow); color: var(--sand); font-weight: 400; text-align: left; white-space: normal; }
.tag.tier:hover .tier-pop, .tag.tier:focus .tier-pop { display: grid; gap: 6px; }
.tier-pop strong { font-size: 13px; color: #f5d77a; }
.tier-pop .tp-head, .tier-pop .tp-foot { font-size: 12px; color: var(--sand-2); line-height: 1.5; }
.tier-pop .gt { font-style: normal; text-align: center; font-size: 16px; line-height: 1; color: var(--sand-3); transform: rotate(90deg); }
.tp-row { display: grid; grid-template-columns: 38px 1fr; gap: 2px 8px; padding: 6px 8px; border-radius: 5px; background: rgba(0, 0, 0, .22); border: 1px solid transparent; }
.tp-row b { grid-row: span 2; align-self: center; font-size: 13px; }
.tp-row em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--sand); }
.tp-row small { font-size: 11.5px; color: var(--sand-2); line-height: 1.45; }
.tp-row.me { border-color: var(--amber); background: rgba(240, 174, 46, .12); }
.tp-row.pierce { border-color: rgba(255, 122, 74, .6); }
.tp-row.wall { border-color: rgba(245, 215, 122, .6); }
.tp-row:nth-of-type(1) b { color: #f5d77a; } .tp-row:nth-of-type(2) b { color: #ff9b8f; } .tp-row:nth-of-type(3) b { color: #9fd3ff; }

/* ═════════════ v25: 모드 · 비용 · 시너지 · 튜토리얼 · 제보 ═════════════ */
:root { --siege: #e0a046; --magic: #b48cff; --total: #ff6a4d; --gold: #f5d77a; }
.gm-siege { --gm: var(--siege); }
.gm-magic { --gm: var(--magic); }
.gm-total { --gm: var(--total); }
.tag.gm { border-color: var(--gm); color: var(--gm); }
.tag.cost-tag { border-color: var(--amber); color: var(--amber); }

/* 버그 제보 · 넓은 창 · 제보함 */
.bug-fab { position: fixed; left: 14px; bottom: 14px; z-index: 4; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(27, 31, 21, .92); color: var(--sand-2); font: 600 13px var(--font-ui); cursor: pointer; box-shadow: var(--shadow); }
.bug-fab:hover, .bug-fab:focus-visible { color: var(--amber); border-color: var(--amber); }
.bug-fab[hidden] { display: none; }
.modal.wide { width: min(760px, 94vw); max-width: 94vw; }
.bug-form textarea { resize: vertical; min-height: 140px; font: inherit; line-height: 1.5; }
.reports { display: grid; gap: 10px; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.report { border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 12px; background: var(--bg-2); display: grid; gap: 6px; }
.report.done, .report.wontfix { opacity: .62; }
.report header { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.report .meta, .report .ua { font-size: 12px; color: var(--sand-3); margin: 0; }
.report .body { white-space: pre-wrap; margin: 0; line-height: 1.55; }
.report .btns { justify-content: flex-end; margin: 0; }

/* 튜토리얼 */
.tut-card .tut-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tut { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; min-height: 230px; }
@media (max-width: 640px) { .tut { grid-template-columns: 1fr; } }
.tut-no { margin: 0 0 4px; font-size: 12px; color: var(--sand-3); letter-spacing: .04em; }
.tut-txt h3 { font-size: 22px; margin: 0 0 10px; }
.tut-txt p { line-height: 1.7; margin: 0; }
.tut-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.tut-nav .btns { margin: 0; }
.dots { display: flex; gap: 6px; }
.dots .dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--bg-4); cursor: pointer; }
.dots .dot.on { background: var(--amber); }
.tut-art { display: grid; place-items: center; }
.ta-board { display: grid; grid-template-columns: repeat(5, 30px); gap: 4px; position: relative; }
.ta-board i { width: 30px; height: 30px; border-radius: 3px; background: var(--bunker); }
.ta-board i.burn { background: #3a2a1a; box-shadow: inset 0 0 0 1px #6b3f1f; }
.ta-board i.zone { box-shadow: inset 0 0 0 2px #ef4b45; }
.ta-board i.me { background: var(--blue); }
.ta-board i.tgt { background: var(--bunker); box-shadow: inset 0 0 0 2px var(--amber); }
.ta-board.ta-radar .ta-ping { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #7dff9a; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ta-board.ta-radar .ta-ping { animation: ta-ping 1.6s ease-out infinite; }
  .ta-board i.tgt { animation: pulse 1.2s ease-in-out infinite; }
}
@keyframes ta-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(4.6); opacity: 0; } }
.ta-cost { display: flex; gap: 6px; align-items: center; font: 900 30px var(--font-display); }
.ta-cost span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; background: rgba(240, 174, 46, .18); color: var(--amber); border: 1px solid var(--amber); }
.ta-cost span.lo { color: var(--sand-2); border-color: var(--line-2); background: var(--bg-3); }
.ta-cost em { font-style: normal; color: var(--sand); margin-left: 6px; }
.ta-modes { display: grid; gap: 8px; }
.ta-modes span { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--gm); color: var(--gm); font-size: 22px; }
.ta-modes b { font-size: 15px; }
.ta-syn { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; font-size: 30px; }
.ta-syn span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--bg-3); }
.ta-tiers { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ta-tiers span { padding: 10px 12px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line-2); }
.ta-tiers span:first-child { border-color: var(--gold); color: var(--gold); }
.ta-tiers i { font-style: normal; color: var(--amber); font-size: 20px; }
.ta-go { font-size: 90px; }

/* 비용 표시 (카드 왼쪽 아래) */
.item .cost { position: absolute; left: 5px; bottom: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 4px; display: grid; place-items: center; font: 800 11px var(--font-ui); background: var(--bg-4); color: var(--sand-2); }
.item .cost.c2 { background: #5b5340; color: #f3e7c3; }
.item .cost.c3 { background: #7a5513; color: #ffd98a; }
.item .cost.c4 { background: #8e2622; color: #ffd6c8; box-shadow: 0 0 0 1px rgba(255, 106, 77, .6); }
.item .tyw { display: none; }
.item.over { opacity: .4; }
.item.over .flag { color: var(--red); }

/* 밴픽: 더 큰 카드 */
.draft .item-grid.draft-grid { grid-template-columns: repeat(6, 118px); gap: 9px; }
.draft .item-grid.draft-grid.dense { grid-template-columns: repeat(8, 100px); gap: 7px; }
.draft .draft-grid .item { min-height: 112px; padding: 12px 6px 22px; }
.draft .draft-grid .item .ic { font-size: 36px; }
.draft .draft-grid .item .nm { font-size: 14px; }
.draft .draft-grid .item .tyw { display: block; position: absolute; right: 6px; bottom: 5px; font-size: 10px; color: var(--sand-3); }
.draft .draft-grid.dense .item { min-height: 96px; }
.draft .draft-grid.dense .item .ic { font-size: 30px; }
@media (max-width: 1240px) { .draft .item-grid.draft-grid { grid-template-columns: repeat(4, 118px); } .draft .item-grid.draft-grid.dense { grid-template-columns: repeat(6, 96px); } }
@media (max-width: 1000px) { .draft .item-grid.draft-grid, .draft .item-grid.draft-grid.dense { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); } }
.budget { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--sand-2); }
.budget .bar { display: inline-flex; gap: 2px; }
.budget .bar i { width: 9px; height: 12px; border-radius: 2px; background: var(--bg-4); }
.budget .bar i.on { background: var(--amber); }
.team.BLUE .budget .bar i.on { background: var(--blue); }
.team.RED .budget .bar i.on { background: var(--red); }
.budget b { color: var(--sand); }
.synprev { display: inline-flex; width: max-content; max-width: 100%; justify-self: start; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--sand-3); border: 1px dashed var(--line-2); }
.synprev.on { color: var(--gold); border: 1px solid rgba(245, 215, 122, .6); background: rgba(245, 215, 122, .08); font-weight: 700; }
.budget-note { margin: 0; font-size: 13px; color: var(--sand-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.budget-note b { color: var(--amber); font-size: 16px; }
.draft-mode { font-weight: 700; font-size: 13px; color: var(--gm); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--gm); }
.draft-mode span { color: var(--sand-3); font-weight: 400; }

/* 맵 룰렛 다음 모드 룰렛 */
.modes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mode-card { width: 150px; padding: 14px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); display: grid; justify-items: center; gap: 4px; opacity: .45; transition: opacity .12s, transform .12s; }
.mode-card .mi { font-size: 34px; }
.mode-card b { font-family: var(--font-display); font-size: 22px; letter-spacing: .02em; color: var(--gm); }
.mode-card span:last-child { font-size: 12px; color: var(--sand-3); }
.mode-card.locked { opacity: .18; filter: grayscale(1); }
.mode-card.on { opacity: 1; transform: translateY(-4px); border-color: var(--gm); }
.mode-card.final { opacity: 1; border-color: var(--gm); box-shadow: 0 0 0 2px var(--gm), 0 0 34px var(--gm); transform: scale(1.08); }
.modes.landed .mode-card:not(.final) { opacity: .2; }
.mode-result { min-height: 1.6em; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.mode-result.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) { .mode-card.final { animation: mode-land .7s cubic-bezier(.2, .9, .3, 1.3) both; } }
@keyframes mode-land { 0% { transform: scale(.8); } 60% { transform: scale(1.16); } 100% { transform: scale(1.08); } }

/* 삼위일체 */
.tri-wrap { display: flex; gap: 20px; align-items: flex-start; justify-content: center; flex-wrap: wrap; width: 100%; }
.tri-wrap > .detail { position: static; width: 320px; max-height: 60vh; overflow-y: auto; }
.tri-types { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tri-type { width: 200px; display: grid; gap: 6px; padding: 16px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--sand); cursor: pointer; text-align: center; }
.tri-type b { font-size: 20px; }
.tri-type.ty-ATK { border-top: 3px solid var(--red); } .tri-type.ty-DEF { border-top: 3px solid var(--ok); } .tri-type.ty-SUP { border-top: 3px solid var(--blue); }
.tri-type:not(:disabled):hover { border-color: var(--amber); transform: translateY(-2px); }
.tri-type:disabled { opacity: .55; cursor: default; }
.tri-pool { font-size: 18px; line-height: 1.5; }
.item-grid.tri-grid { grid-template-columns: repeat(auto-fill, 112px); width: min(100%, 760px); justify-content: center; }
.item-grid.tri-grid.offer { grid-template-columns: repeat(3, 150px); }
.tri-grid.offer .item { min-height: 150px; }
.tri-grid.offer .item .ic { font-size: 46px; }

/* 배치 단계 */
.place-steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.step-btn { width: 100%; text-align: left; padding: 7px 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-2); color: var(--sand-2); font: inherit; font-size: 13px; cursor: pointer; }
.step-btn.on { border-color: var(--amber); color: var(--amber); font-weight: 700; }
.step-btn.done { color: var(--sand); }
.step-btn.done::before { content: '✓ '; color: var(--ok); }
.place-syn .syn-card { margin-top: 6px; }

/* 보드 표식 */
.tile .mk { position: absolute; pointer-events: none; z-index: 1; }
.tile .mk.sanct { left: 3px; bottom: 2px; font-size: calc(var(--tile) * .26); filter: drop-shadow(0 0 6px rgba(245, 215, 122, .9)); }
.tile .mk.sanct.BLUE { text-shadow: 0 0 8px var(--blue); } .tile .mk.sanct.RED { text-shadow: 0 0 8px var(--red); }
.tile .mk.hole { right: 4px; top: 4px; width: calc(var(--tile) * .34); height: calc(var(--tile) * .34); border-radius: 50%; }
.tile .mk.hole b { position: absolute; inset: 0; border-radius: 50%; }
.tile .mk.hole.black b { background: radial-gradient(circle, #000 35%, #3b1f63 62%, transparent 72%); box-shadow: 0 0 10px rgba(180, 140, 255, .8); }
.tile .mk.hole.white b { background: radial-gradient(circle, #fff 30%, #d9c8ff 58%, transparent 72%); box-shadow: 0 0 12px rgba(255, 255, 255, .9); }
.tile .mk.hole.BLUE { outline: 2px solid var(--blue); outline-offset: 1px; } .tile .mk.hole.RED { outline: 2px solid var(--red); outline-offset: 1px; }
@media (prefers-reduced-motion: no-preference) { .tile .mk.hole b { animation: hole-spin 3.2s linear infinite; } .tile .mk.hole.black b { animation-direction: reverse; } }
@keyframes hole-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.tile.fury { box-shadow: inset 0 0 0 2px rgba(255, 74, 58, .85); }
.tile.syn-range:not(.target) { background-image: linear-gradient(rgba(255, 74, 58, .12), rgba(255, 74, 58, .12)); }

/* 이름표: 시너지 배지 · 최대 생명력 */
.synb { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(245, 215, 122, .55); background: rgba(245, 215, 122, .08); color: var(--gold); font: 700 12px var(--font-ui); cursor: pointer; vertical-align: middle; }
.synb span { font-size: 12px; }
.hp i.lost { background: transparent; box-shadow: inset 0 0 0 1px var(--sand-3); }
.hp .n small { font-size: 11px; color: var(--sand-3); }

/* 내 시너지 패널 */
.syn-panel { margin-top: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(245, 215, 122, .35); background: linear-gradient(180deg, rgba(245, 215, 122, .07), transparent); display: grid; gap: 8px; }
.syn-head { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: var(--sand); cursor: pointer; text-align: left; font: inherit; }
.syn-head .syn-ic { font-size: 24px; }
.syn-head b { font-size: 16px; color: var(--gold); }
.syn-state { margin: 0; font-size: 13px; color: var(--sand-2); line-height: 1.45; }
.syn-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.syn-card { border: 1px solid rgba(245, 215, 122, .4); border-radius: 8px; padding: 12px 14px; background: var(--bg-2); display: grid; gap: 8px; }
.syn-card .syn-h { display: flex; align-items: center; gap: 10px; }
.syn-card .syn-h > span:nth-child(2) { display: grid; flex: 1; }
.syn-card .syn-ic { font-size: 30px; }
.syn-card b { color: var(--gold); font-size: 18px; }
.syn-comp { font-size: 12px; color: var(--sand-3); }
.syn-card .desc, .syn-card .note { margin: 0; white-space: pre-line; line-height: 1.6; font-size: 14px; }
.syn-card .note { color: var(--sand-2); font-size: 13px; border-left: 2px solid var(--line-2); padding-left: 10px; }
.syn-list { margin: 18px 0 6px; }
.syn-list h3 { font-size: 16px; margin: 0 0 8px; }
.syn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.syn-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--sand); cursor: pointer; font: inherit; }
.syn-chip .syn-ic { grid-row: span 2; font-size: 24px; }
.syn-chip b { color: var(--gold); }
.syn-chip span:last-child { font-size: 12px; color: var(--sand-3); }
.syn-chip:hover { border-color: var(--gold); }
.qa-it.syn { border-color: rgba(245, 215, 122, .5); color: var(--gold); }

/* 시간 이월 · 건너뜀 · 마검사 창 */
.tbonus { font-size: 12px; font-weight: 700; color: var(--ok); padding: 1px 6px; border-radius: 3px; background: rgba(143, 194, 90, .14); }
.skipnote { font-size: 12px; color: var(--magic); margin-top: 2px; }
.spell-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spell-col { display: grid; gap: 6px; align-content: start; }
.spell-col h4 { margin: 0; font-size: 13px; color: var(--sand-2); }
.opt.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }

/* ── 시너지 이펙트 ── */
.fx-plate.mirror { --pc: #e9f3ff; }
.fx-tint.mirror { background: radial-gradient(circle, rgba(233, 243, 255, .16), transparent 70%); }
.fx-pillar b { position: absolute; inset: 0; border-radius: 40%; background: linear-gradient(180deg, transparent, var(--c) 30%, #fff8e0 55%, var(--c) 80%, transparent); filter: blur(2px); opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .fx-pillar b { animation: fx-pillar 1.3s ease-out both; } }
@keyframes fx-pillar { 0% { transform: scaleY(.05) scaleX(.4); opacity: 0; } 25% { transform: scaleY(1) scaleX(1); opacity: 1; } 100% { transform: scaleY(1.1) scaleX(.2); opacity: 0; } }
.fx-claw i { position: absolute; left: 10%; width: 80%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--c), #fff, var(--c), transparent); transform: rotate(-38deg); box-shadow: 0 0 10px var(--c); }
.fx-claw i:nth-child(1) { top: 28%; } .fx-claw i:nth-child(2) { top: 48%; } .fx-claw i:nth-child(3) { top: 68%; }
@media (prefers-reduced-motion: no-preference) { .fx-claw i { animation: fx-claw .55s cubic-bezier(.2, .8, .3, 1) both; } .fx-claw i:nth-child(2) { animation-delay: .05s; } .fx-claw i:nth-child(3) { animation-delay: .1s; } }
@keyframes fx-claw { from { clip-path: inset(0 100% 0 0); opacity: 1; } 60% { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 0; } }
.fx-portal b { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: #c9a8ff; border-left-color: #7fb2ff; box-shadow: 0 0 22px rgba(180, 140, 255, .8), inset 0 0 18px rgba(180, 140, 255, .6); }
.fx-portal b + b { inset: 18%; border-top-color: #fff; border-right-color: #b48cff; }
.fx-portal.in { background: radial-gradient(circle, #000 20%, rgba(59, 31, 99, .8) 45%, transparent 70%); border-radius: 50%; }
.fx-portal.out { background: radial-gradient(circle, #fff 15%, rgba(217, 200, 255, .8) 40%, transparent 70%); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .fx-portal { animation: fx-portal 1.1s ease-out both; }
  .fx-portal b { animation: hole-spin .5s linear infinite; }
  .fx-portal.in b { animation-direction: reverse; }
}
@keyframes fx-portal { 0% { transform: translate(-50%, -50%) scale(.1); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

/* 시너지 연출 (화면 가운데) */
.cine { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; cursor: pointer; --cc: var(--gold); }
.cine.BLUE { --side: var(--blue); } .cine.RED { --side: var(--red); }
.cine.syn-fury { --cc: #ff4a3a; } .cine.syn-iron { --cc: #cfd8e3; } .cine.syn-sanctum { --cc: #ffd27a; } .cine.syn-rush { --cc: #ff9a3c; }
.cine.syn-warp { --cc: #b48cff; } .cine.syn-spellblade { --cc: #7fe0ff; } .cine.syn-resister { --cc: #e9f3ff; } .cine.syn-mage { --cc: #c98bff; }
.cine-bg { position: absolute; inset: 0; background: rgba(6, 7, 5, .82); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cc) 34%, transparent), rgba(6, 7, 5, .82) 64%); }
.cine-rays { position: absolute; left: 50%; top: 45%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cc) 22%, transparent) 0 6deg, transparent 6deg 18deg); mask-image: radial-gradient(circle, #000 0 20%, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 0 20%, transparent 55%); opacity: .7; }
.cine-ic { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: clamp(70px, 12vw, 128px); filter: drop-shadow(0 0 26px var(--cc)); }
.cine-txt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: min(92vw, 720px); display: grid; gap: 8px; justify-items: center; text-align: center; }
.cine-txt b { font-family: var(--font-display); font-size: clamp(46px, 9vw, 96px); line-height: .95; letter-spacing: .03em; color: #fff; text-shadow: 0 0 22px var(--cc), 0 6px 0 rgba(0, 0, 0, .35); }
.cine-txt span { font-size: 16px; color: var(--sand); padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid color-mix(in srgb, var(--side, var(--cc)) 60%, transparent); }
.cine.cine-vs { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4vw; padding: 0 6vw; }
.cine.cine-vs .cine-rays { top: 50%; }
.cv { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.cv .cv-ic { font-size: clamp(64px, 10vw, 112px); filter: drop-shadow(0 0 22px var(--gold)); }
.cv b { font-family: var(--font-display); font-size: clamp(34px, 6vw, 64px); color: #fff; line-height: 1; }
.cv span { font-size: 15px; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.cv.BLUE span { background: var(--blue-2); color: #fff; } .cv.RED span { background: var(--red-2); color: #fff; }
.cv.BLUE b { text-shadow: 0 0 22px var(--blue); } .cv.RED b { text-shadow: 0 0 22px var(--red); }
.cv-mid { position: relative; display: grid; justify-items: center; gap: 8px; }
.cv-mid em { font-style: normal; font-family: var(--font-display); font-size: clamp(40px, 7vw, 80px); color: var(--amber); }
.cv-mid span { font-size: 14px; color: var(--sand); white-space: nowrap; }
.cine.out { animation: kc-out .32s ease-in both; }
@media (prefers-reduced-motion: no-preference) {
  .cine-bg { animation: kc-in .3s ease-out both; }
  .cine-rays { animation: cine-rays 2.4s linear both; }
  .cine-ic { animation: cine-pop .6s cubic-bezier(.2, .9, .3, 1.5) both; }
  .cine-txt { animation: cine-word .5s .18s cubic-bezier(.2, .8, .3, 1) both; }
  .cv.BLUE { animation: cine-left .55s cubic-bezier(.2, .9, .3, 1.2) both; }
  .cv.RED { animation: cine-right .55s cubic-bezier(.2, .9, .3, 1.2) both; }
  .cv-mid { animation: cine-pop2 .5s .3s cubic-bezier(.2, .9, .3, 1.5) both; }
}
@keyframes cine-rays { from { transform: rotate(0) scale(.6); opacity: 0; } 15% { opacity: .7; } to { transform: rotate(40deg) scale(1); opacity: .5; } }
@keyframes cine-pop { from { transform: translate(-50%, -50%) scale(.1) rotate(-25deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes cine-pop2 { from { transform: scale(.1); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cine-word { from { transform: translateX(-50%) translateY(26px) scale(.9); opacity: 0; letter-spacing: .3em; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes cine-left { from { transform: translateX(-60vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cine-right { from { transform: translateX(60vw); opacity: 0; } to { transform: none; opacity: 1; } }

.team.RED .synprev, .team.RED .budget { justify-self: end; margin-left: auto; }

/* ═══════════════════ v26 ═══════════════════ */
/* 선택 상자: 펼친 목록이 밝은 바탕에 밝은 글씨로 보이던 문제 — 어두운 바탕을 명시한다 */
select.input { background-color: var(--bg-3); color-scheme: dark; }
select.input option, select.input optgroup { background-color: #232a1b; color: #ddd0a9; }
select.input option:checked { background-color: #3a4430; color: #f0ae2e; }

/* 아이템 카드: 왼쪽 위 분류 · 왼쪽 아래 비용 · 오른쪽 아래 사용 횟수 */
.item { padding: 20px 6px 24px; }
.item .ty { display: none; }
.item .tyw, .draft .draft-grid .item .tyw { display: block; position: absolute; top: 4px; left: 5px; right: auto; bottom: auto; font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 5px; border-radius: 3px; color: #10130c; }
.ty-t-ATK { background: #e8706a; } .ty-t-DEF { background: #a6d07a; } .ty-t-SUP { background: #7fb2ff; }
.tyw.ty-t-ATK, .tyw.ty-t-DEF, .tyw.ty-t-SUP { color: #10130c; }
.item .us { top: auto; bottom: 5px; right: 6px; font: 800 12px var(--font-ui); color: var(--sand-2); }
.item .cost { left: 5px; bottom: 5px; }
.item .cost.c5 { background: linear-gradient(135deg, #b8321f, #e0782a); color: #fff3d6; box-shadow: 0 0 0 1px rgba(255, 190, 90, .8), 0 0 8px rgba(255, 140, 60, .45); }
.item .flag { bottom: 24px; left: 0; right: 0; text-align: center; }
.item .lock { position: absolute; top: 3px; right: 5px; font-size: 12px; opacity: .85; }
.item.locked .ic { filter: grayscale(.85) brightness(.8); }
.item.locked .nm { color: var(--sand-2); }
.item .price { font: 800 12px var(--font-ui); color: var(--gold); }
.draft .draft-grid .item { padding: 22px 6px 26px; }

/* 판정 태그 색 */
.tag.tier.judge-atk { color: #ffb08a; }
.tag.tier.judge-pierce { color: #ff7a4a; }
.tag.tier.judge-def { color: #9fd3ff; }
.tag.tier.judge-hold { color: #ff9b8f; }
.tag.tier.judge-inv { color: #f5d77a; }

/* 판정 용어집 (빌드 화면) */
.glossary { margin-top: 26px; padding: 18px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); display: grid; gap: 14px; }
.glossary h3 { font-size: 16px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.glossary h3 .dim { font-size: 13px; font-weight: 400; }
.gl-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gl-group h4 { font-size: 13px; color: var(--sand-3); margin: 0 0 8px; font-weight: 600; }
.gl-group dl { margin: 0; display: grid; gap: 8px; }
.gl-term { padding: 8px 10px; border-radius: 6px; background: var(--bg-3); border-left: 3px solid var(--line-2); }
.gl-term dt { font-weight: 800; font-size: 14px; }
.gl-term dd { margin: 3px 0 0; font-size: 13px; color: var(--sand-2); line-height: 1.6; }
.gl-term.judge-atk { border-left-color: #ffb08a; } .gl-term.judge-pierce { border-left-color: #ff7a4a; }
.gl-term.judge-def { border-left-color: #9fd3ff; } .gl-term.judge-hold { border-left-color: #ff9b8f; } .gl-term.judge-inv { border-left-color: #f5d77a; }
.gl-term.judge-atk dt { color: #ffb08a; } .gl-term.judge-pierce dt { color: #ff7a4a; } .gl-term.judge-def dt { color: #9fd3ff; } .gl-term.judge-hold dt { color: #ff9b8f; } .gl-term.judge-inv dt { color: #f5d77a; }
.gl-order-h { font-size: 13px; color: var(--sand-3); margin: 4px 0 0; font-weight: 600; }
.judge-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; counter-reset: jf; }
.judge-flow li { counter-increment: jf; position: relative; padding: 8px 10px 8px 30px; border-radius: 6px; background: var(--bg-3); display: grid; gap: 2px; }
.judge-flow li::before { content: counter(jf); position: absolute; left: 8px; top: 8px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 800 10px var(--font-ui); background: var(--amber); color: var(--char); }
.judge-flow b { font-size: 13px; }
.judge-flow span { font-size: 12px; color: var(--sand-2); line-height: 1.5; }

/* 튜토리얼: 어느 장에서나 닫기 */
.modal { position: relative; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--sand); font-size: 14px; display: grid; place-items: center; z-index: 2; }
.modal-x:hover { border-color: var(--amber); color: var(--amber); }
.ta-tiers { display: grid; gap: 8px; justify-items: center; }
.ta-tiers span { min-width: 120px; text-align: center; }
.ta-tiers span:nth-child(1) { border-color: #f5d77a; color: #f5d77a; }
.ta-tiers span:nth-child(2) { border-color: #ff9b8f; color: #ff9b8f; }
.ta-tiers span:nth-child(3) { border-color: #9fd3ff; color: #9fd3ff; }
.ta-tiers em { font-style: normal; font-weight: 800; color: #ff7a4a; font-size: 13px; }
.ta-shop { display: flex; align-items: center; gap: 10px; font-size: 34px; }
.ta-shop b { font: 900 30px var(--font-display); color: var(--gold); }
.ta-shop i { font-style: normal; color: var(--sand-3); font-size: 22px; }

/* 군자금 */
.coin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(245, 215, 122, .45); background: rgba(245, 215, 122, .08); color: var(--gold); font-size: 14px; }
.coin-chip:hover { border-color: var(--gold); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wallet { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(245, 215, 122, .4); background: rgba(245, 215, 122, .07); font-size: 20px; }
.wallet b { font: 900 26px var(--font-display); color: var(--gold); }
.wallet .dim { font-size: 13px; }
.shop-group { margin-bottom: 16px; }
.shop-group h4 { margin: 0 0 8px; }
.shop-group h4 .tyw { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 3px; color: #10130c; }
.shop-item.have { border-color: rgba(143, 194, 90, .45); }
.shop-item.have .flag { color: var(--ok); }
.shop-buy { display: grid; gap: 6px; }
.shop-have { margin: 0; color: var(--ok); font-weight: 700; }
.earn { margin-top: 10px; padding: 14px; border-radius: 8px; border: 1px dashed var(--line-2); display: grid; gap: 8px; }
.earn h4 { margin: 0; font-size: 14px; }
.earn table { border-collapse: collapse; width: min(360px, 100%); font-size: 13px; }
.earn th, .earn td { padding: 4px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.earn th:first-child, .earn td:first-child { text-align: left; color: var(--sand-2); }
.earn p { margin: 0; font-size: 12px; }
.coins-won { font-size: 20px; color: var(--gold); font-weight: 800; }

/* 계급 분포 */
.ladder { margin: 18px 0; padding: 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); }
.ladder h3 { font-size: 16px; margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; }
.ladder h3 .dim { font-size: 13px; font-weight: 400; }
.ladder ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ladder li { display: grid; grid-template-columns: 54px 48px 90px 1fr 52px 40px 36px; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 6px; font-size: 14px; }
.ladder li.me { background: rgba(240, 174, 46, .1); box-shadow: inset 0 0 0 1px rgba(240, 174, 46, .5); }
.ladder .ins { display: grid; place-items: center; }
.ladder .lbar { height: 8px; border-radius: 4px; background: var(--bg-4); overflow: hidden; }
.ladder .lbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sand-3), var(--amber)); border-radius: 4px; }
.ladder .cnt { text-align: right; font-weight: 700; }
.ladder .pct { text-align: right; font-size: 12px; }
@media (max-width: 640px) { .ladder li { grid-template-columns: 44px 44px 1fr 46px; } .ladder li > .num.dim:not(.pct), .ladder .pct, .ladder .lbar { display: none; } }

/* 친구 · 메신저 */
.menu-item .q.unread { color: var(--char); background: var(--amber); padding: 0 6px; border-radius: 999px; }
.friends-panel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .friends-panel { grid-template-columns: 1fr; } }
.fr-side { display: grid; gap: 12px; }
.fr-side h4 { margin: 4px 0 0; font-size: 13px; color: var(--sand-3); font-weight: 600; }
.fr-add { display: flex; gap: 8px; }
.fr-add .input { min-height: 40px; }
.fr-req ul, .fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fr-req li { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line); }
.fr-req li b { flex: 1; }
.fr { display: flex; align-items: center; gap: 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); }
.fr.on { border-color: var(--amber); }
.fr-main { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: transparent; text-align: left; min-width: 0; }
.fr-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-main .dim { font-size: 12px; margin-left: auto; }
.fr .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sand-3); flex: none; }
.fr.online .dot, .fr.queue .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.fr.match .dot { background: var(--amber); }
.fr.room .dot { background: var(--blue); }
.fr.offline { opacity: .7; }
.fr .q.unread { font-size: 11px; font-weight: 800; color: var(--char); background: var(--amber); padding: 0 6px; border-radius: 999px; }
.dm { border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); display: grid; grid-template-rows: auto auto minmax(260px, 52vh) auto; overflow: hidden; }
.dm.empty { display: grid; grid-template-rows: none; gap: 10px; padding: 18px; align-content: start; }
.dm-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dm-h .spacer { flex: 1; }
.dm-note { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--ok); background: rgba(143, 194, 90, .08); border-bottom: 1px solid var(--line); }
.dm.empty .dm-note { border: 1px solid rgba(143, 194, 90, .3); border-radius: 6px; }
.dm-log { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dm-m { max-width: 76%; display: grid; gap: 2px; padding: 7px 11px; border-radius: 10px; background: var(--bg-3); align-self: flex-start; }
.dm-m.me { align-self: flex-end; background: rgba(240, 174, 46, .16); border: 1px solid rgba(240, 174, 46, .35); }
.dm-m.fail { opacity: .7; border-color: var(--red); }
.dm-m .tx { white-space: pre-wrap; word-break: break-word; }
.dm-m .at { font-size: 11px; color: var(--sand-3); }
.dm-m .why { font-size: 11px; color: var(--red); }
.dm-form { display: flex; gap: 8px; padding: 8px; border-top: 1px solid var(--line); }

/* 턴 시간: 지난 차례에 오래 써서 줄어든 경우 */
.tbonus.short { color: #ffb08a; background: rgba(239, 75, 69, .14); }

/* ── 아이템 입체 연출: 보드가 원근으로 기울고, 카드가 깊은 곳에서 회전하며 날아와 꽂힌다 ── */
.ic3d { position: fixed; inset: 0; z-index: 95; pointer-events: auto; cursor: pointer; perspective: 1100px; perspective-origin: 50% 42%; overflow: hidden; --c1: #f0ae2e; --c2: #ffd98a; --sc: #f0ae2e; --life: 1650ms; }
.ic3d-dim { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 42%, rgba(6, 7, 5, .76), rgba(4, 5, 3, .93) 70%); animation: ic-fade var(--life) ease both; }
.ic3d-bar { position: absolute; left: 0; right: 0; height: 9vh; z-index: 4; background: #050604; transform: scaleY(0); animation: ic-bar var(--life) cubic-bezier(.65, 0, .35, 1) both; }
.ic3d-bar.top { top: 0; transform-origin: top; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.ic3d-bar.bot { bottom: 0; transform-origin: bottom; box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
.ic3d-stage { position: absolute; inset: 0; z-index: 1; perspective: 900px; perspective-origin: 50% 20%; pointer-events: none; }
.ic3d-stage .board-frame { box-shadow: 0 60px 90px rgba(0, 0, 0, .7); }
.ic3d-stage .ic3d-focus { z-index: 3; box-shadow: 0 0 0 3px var(--c2), 0 0 34px 8px var(--c1) !important; animation: ic-focus .5s ease-in-out infinite alternate; }
.ic3d-rays { position: absolute; left: 50%; top: 42%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; z-index: 2; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 150, .16) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 42%); mask: radial-gradient(circle, #000 0, transparent 42%); opacity: 0; animation: ic-rays var(--life) ease-out both; }
.ic3d.t-ATK .ic3d-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 110, 70, .2) 0 5deg, transparent 5deg 16deg); }
.ic3d.t-DEF .ic3d-rays { background: repeating-conic-gradient(from 0deg, rgba(170, 230, 130, .18) 0 5deg, transparent 5deg 16deg); }
.ic3d.t-SUP .ic3d-rays { background: repeating-conic-gradient(from 0deg, rgba(150, 170, 255, .2) 0 5deg, transparent 5deg 16deg); }
.ic3d-card { position: absolute; width: 0; height: 0; z-index: 3; transform-style: preserve-3d; pointer-events: none; }
.ic3d-spin { position: absolute; left: -84px; top: -112px; width: 168px; height: 224px; transform-style: preserve-3d; animation: ic-card var(--life) cubic-bezier(.2, .9, .25, 1) both; }
.ic3d .face, .ic3d .slab { position: absolute; inset: 0; border-radius: 14px; }
.ic3d .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ic3d .face.front { transform: translateZ(8px); display: grid; place-items: center; overflow: hidden; border: 2px solid var(--c1);
  background: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(160deg, #2b3322, #12150d 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 46px var(--c1), inset 0 0 34px rgba(0, 0, 0, .7), inset 0 0 0 6px rgba(0, 0, 0, .25); }
.ic3d .face.back { transform: rotateY(180deg) translateZ(8px); border: 2px solid var(--c1); background: repeating-linear-gradient(45deg, #2a3120 0 10px, #20271a 10px 20px); box-shadow: 0 0 40px var(--c1); }
.ic3d .slab { background: var(--c1); filter: brightness(.45); }
.ic3d .slab.s1 { transform: translateZ(4px); } .ic3d .slab.s2 { transform: translateZ(0); } .ic3d .slab.s3 { transform: translateZ(-4px); }
.ic3d .face .ic { font-size: 94px; line-height: 1; transform: translateY(-6px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .75)) drop-shadow(0 0 22px var(--c2)); }
.ic3d .face .ty { position: absolute; top: 10px; left: 11px; font: 800 12px var(--font-ui); color: #10130c; background: var(--c1); padding: 2px 7px; border-radius: 4px; }
.ic3d .face .cost { position: absolute; bottom: 8px; left: 12px; font: 900 22px/1 var(--font-display); color: var(--c2); text-shadow: 0 0 10px var(--c1); }
.ic3d .face .cost::before { content: '비용 '; font: 700 11px var(--font-ui); color: var(--sand-2); text-shadow: none; }
.ic3d .shine { position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%); mix-blend-mode: screen; transform: translateX(-100%); animation: ic-shine var(--life) ease-in-out both; }
.ic3d-txt { position: absolute; z-index: 3; width: min(520px, 92vw); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; text-align: center; pointer-events: none; animation: ic-txt var(--life) ease-out both; }
.ic3d-txt em { font: 800 14px var(--font-ui); font-style: normal; letter-spacing: .06em; color: #10130c; background: var(--sc); padding: 2px 12px; border-radius: 999px; box-shadow: 0 0 16px var(--sc); }
.ic3d-txt b { font: 900 clamp(36px, 6.4vw, 62px)/1 var(--font-display); letter-spacing: .02em; color: #fff6dc; text-shadow: 0 0 22px var(--c1), 0 4px 0 rgba(0, 0, 0, .65); }
.ic3d-txt span { max-width: 100%; font-size: 15px; color: var(--sand); background: rgba(0, 0, 0, .55); padding: 3px 12px; border-radius: 4px; }
.ic3d.out { animation: ic-out .3s ease-in forwards; }
.ic3d .ic3d-flash { opacity: .45; }
.ic3d.quick .ic3d-spin { left: -64px; top: -86px; width: 128px; height: 172px; }
.ic3d.quick .face .ic { font-size: 70px; }
.ic3d.quick .ic3d-txt b { font-size: clamp(28px, 4.6vw, 44px); }
.ic3d.lite .ic3d-spin { animation: ic-fade var(--life) ease both; }
.ic3d.lite .ic3d-rays, .ic3d.lite .ic3d-bar { display: none; }
@keyframes ic-fade { 0% { opacity: 0; } 14% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ic-bar { 0% { transform: scaleY(0); } 16% { transform: scaleY(1); } 84% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes ic-rays { 0% { opacity: 0; transform: rotate(0deg) scale(.6); } 30% { opacity: .8; } 80% { opacity: .45; } 100% { opacity: 0; transform: rotate(38deg) scale(1.08); } }
@keyframes ic-card {
  0% { transform: translateZ(-1500px) rotateY(-560deg) rotateX(28deg); opacity: 0; }
  10% { opacity: 1; }
  31% { transform: translateZ(80px) rotateY(-10deg) rotateX(6deg) scale(1.06); opacity: 1; }
  37% { transform: translateZ(0) rotateY(-16deg) rotateX(3deg) scale(1); opacity: 1; }
  82% { transform: translateZ(26px) rotateY(12deg) rotateX(-5deg) scale(1.02); opacity: 1; }
  100% { transform: translateZ(520px) rotateY(26deg) rotateX(-10deg) scale(1.1); opacity: 0; }
}
@keyframes ic-shine { 0%, 38% { transform: translateX(-100%); } 68%, 100% { transform: translateX(100%); } }
@keyframes ic-txt { 0%, 28% { opacity: 0; transform: translate(-50%, 20px); } 42% { opacity: 1; transform: translate(-50%, 0); } 84% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes ic-out { to { opacity: 0; } }
@keyframes ic-focus { from { filter: brightness(1.15); } to { filter: brightness(1.9); } }
@media (max-width: 640px) { .ic3d-spin { left: -64px; top: -86px; width: 128px; height: 172px; } .ic3d .face .ic { font-size: 70px; } }
@media (prefers-reduced-motion: reduce) { .ic3d-spin, .ic3d-txt, .ic3d-rays, .ic3d .shine, .ic3d-bar, .ic3d-dim { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* 삼위일체 고르기: 카드 묶음과 받기 버튼을 한 열로 */
.tri-main { display: grid; justify-items: center; gap: 16px; flex: 1 1 420px; max-width: 760px; }
.tri-main .item-grid.tri-grid { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.tri-main .tri-grid .item { width: 118px; }
.tri-main .btns { display: flex; justify-content: center; }
.tri-type .tri-pool span { display: inline-block; }
.judge-l { font-size: 11px; font-weight: 700; color: var(--sand-3); align-self: center; padding: 0 2px 0 6px; border-left: 1px solid var(--line-2); }

/* ───────── v27 파티클 이펙트 (WebGL) ───────── */
#vfx-gl { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
/* v27 밴픽: 픽 차례에 상대만 가진 아이템은 흐리게 */
.draft-grid .item.opp-only { opacity: .42; filter: saturate(.35); }
.draft-grid .item.opp-only:hover, .draft-grid .item.opp-only[aria-pressed="true"] { opacity: .7; }
/* v27 튜토리얼: 그림이 글을 덮지 않게 (그림 칸은 줄어들 수 있고 넘치면 줄바꿈), 닫기는 ✕ 하나 */
.tut { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.tut-art { min-width: 0; max-width: 100%; overflow: hidden; padding: 4px; }
.tut-txt { min-width: 0; }
.ta-shop { flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 28px; max-width: 100%; }
.ta-shop b { font-size: 26px; }
.ta-cost { flex-wrap: wrap; justify-content: center; font-size: 26px; }
.ta-cost span { width: 40px; height: 40px; }
.ta-syn { gap: 6px; font-size: 26px; }
.ta-syn span { width: 40px; height: 40px; }
.ta-tiers span { min-width: 0; padding: 8px 10px; }
@media (max-width: 640px) { .tut { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tut-art { justify-self: center; } }
/* v27 카드 표시(미보유·상대만 보유·비용 초과)는 이름과 겹치지 않게 위쪽 작은 띠로 */
.item .flag { top: 26px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: rgba(12, 14, 9, .82); white-space: nowrap; z-index: 1; }

/* ── v27.2 밴픽: 넓은 화면을 다 쓴다 (1920 폭에서 총력전 48종이 12열 × 4줄로 한눈에) + 시너지 표 ── */
.draft-body { width: min(1800px, 100%); grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.draft-pool { justify-items: stretch; align-content: start; min-width: 0; }
.draft-pool .filters, .draft-pool .draft-presets { width: 100%; }
.draft .item-grid.draft-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; width: 100%; }
.draft .item-grid.draft-grid.dense { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
.draft .draft-grid.dense .item { min-height: 90px; padding: 10px 4px 20px; }
.draft .draft-grid.dense .item .ic { font-size: 28px; }
@media (max-width: 1240px) {
  .draft .item-grid.draft-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .draft .item-grid.draft-grid.dense { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
.draft-side { display: grid; gap: 12px; align-content: start; position: sticky; top: 12px; min-width: 0; }
.draft-side .detail { position: static; }
.syn-table { border: 1px solid var(--line-2); border-radius: 6px; background: var(--bg-2); padding: 12px 12px 10px; }
.syn-table h3 { font-size: 15px; display: flex; gap: 8px; align-items: baseline; margin: 0; }
.syn-table h3 span { font-size: 12px; color: var(--sand-3); font-weight: 400; }
.syn-table .legend { font-size: 12px; color: var(--sand-2); margin: 6px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.syn-table i[class^="ty-"] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.syn-table i.ty-ATK { background: #ef4b45; } .syn-table i.ty-DEF { background: #8fc25a; } .syn-table i.ty-SUP { background: #3d8bff; }
.syn-table ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.syn-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 8px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 13px; transition: opacity .15s, background .15s; }
.syn-row .comp { display: flex; gap: 3px; }
.syn-row .sn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-row .sw { font-size: 11px; color: var(--sand-3); white-space: nowrap; }
.syn-row .op { width: 8px; height: 8px; border-radius: 50%; }
.syn-row .op.BLUE { background: var(--blue); } .syn-row .op.RED { background: var(--red); }
.syn-row.cannot, .syn-row.lose { opacity: .32; }
.syn-row.near { background: rgba(240, 174, 46, .1); }
.syn-row.hit, .syn-row.mine { background: rgba(240, 174, 46, .22); box-shadow: inset 0 0 0 1px var(--amber); }
.item .cost.c6 { background: linear-gradient(135deg, #6d1fb8, #e0782a); color: #fff3d6; box-shadow: 0 0 0 1px rgba(255, 210, 120, .9), 0 0 10px rgba(190, 110, 255, .5); }
@media (max-width: 1100px) { .draft-body { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 760px) {
  .draft-body { grid-template-columns: minmax(0, 1fr); }
  .draft-side { position: static; }
  .draft .item-grid.draft-grid, .draft .item-grid.draft-grid.dense { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1001px) {
  /* 밴픽 화면은 화면 높이에 맞춘다: 격자는 위에서부터, 넘치면 각 칸 안에서 스크롤 */
  .draft-body { align-items: stretch; }
  .draft-pool { align-self: stretch; align-content: start; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .draft-side { position: static; max-height: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
}

/* v27.2 로비 접속자 명단 (내 계급 아래) */
.roster-card h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 300px; overflow-y: auto; }
.roster li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 28px; align-items: center; gap: 8px; min-height: 30px; padding: 2px 4px 2px 6px; border-radius: 4px; font-size: 13px; }
.roster li b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster li.me { background: rgba(221, 208, 169, .06); }
.roster li .st { font-size: 12px; color: var(--sand-3); }
.roster li.st-match .st { color: var(--amber); }
.roster li.st-practice .st, .roster li.st-queue .st { color: var(--sand-2); }
.roster li.dim { display: block; color: var(--sand-3); font-size: 12px; }
.roster li .btn.small { min-height: 26px; width: 28px; padding: 0; font-size: 14px; }
.roster .insignia { transform: scale(.82); transform-origin: left center; }

/* v27.2 운영자 치트 콘솔 */
.adm-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 4px 0 14px; }
.adm-form .input { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 15px; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.adm-grid section { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
.adm-grid h4 { font-size: 13px; color: var(--sand-2); font-weight: 500; }
.adm-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-help { margin-top: 12px; font-size: 13px; }
.adm-help summary { cursor: pointer; color: var(--sand-2); }
.adm-help dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 8px 0; }
.adm-help dt code { font-size: 12px; color: var(--amber); white-space: nowrap; }
.adm-help dd { margin: 0; color: var(--sand-2); }
.adm-log { list-style: none; margin: 12px 0 0; padding: 8px 10px; max-height: 150px; overflow-y: auto; background: rgba(0, 0, 0, .25); border-radius: 4px; font-size: 12.5px; display: grid; gap: 2px; }
.adm-log time { color: var(--sand-3); margin-right: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .adm-help dl { grid-template-columns: 1fr; } .adm-help dt code { white-space: normal; } }

/* v27.2 메테오 시전: 기울어진 보드 복제본의 칸을 물들이고 조준선이 범위 위에 고정된다 (보드와 함께 기운다) */
.ic3d-heat { position: absolute; inset: -1px; border-radius: 4px; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 120, 50, .42), rgba(255, 60, 30, .2) 62%, rgba(120, 20, 10, .14));
  box-shadow: inset 0 0 0 2px rgba(255, 112, 62, .95), inset 0 0 18px rgba(255, 80, 40, .7), 0 0 14px rgba(255, 80, 40, .5);
  animation: ic-heat .45s ease-out var(--zd, 0ms) both, ic-heat-pulse .62s ease-in-out calc(var(--zd, 0ms) + .45s) infinite alternate; }
.z-burn .ic3d-heat { background: radial-gradient(circle at 50% 58%, rgba(255, 226, 150, .9), rgba(255, 128, 44, .66) 46%, rgba(170, 32, 12, .5));
  box-shadow: inset 0 0 0 2px #ffcf7a, inset 0 0 26px rgba(255, 150, 60, .95), 0 0 26px rgba(255, 110, 40, .8);
  animation: ic-heat .16s ease-out var(--zd, 0ms) both, ic-burn .5s ease-in-out calc(var(--zd, 0ms) + .16s) infinite alternate; }
@keyframes ic-heat { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes ic-heat-pulse { from { opacity: 1; } to { opacity: .6; } }
@keyframes ic-burn { from { opacity: 1; filter: brightness(1.15); } to { opacity: .82; filter: brightness(.85); } }
.ic3d-stage .tile.ic3d-lockhost { z-index: 6; }
.ic3d-lock { position: absolute; left: 50%; top: 50%; width: calc(300% + 26px); height: calc(300% + 26px); pointer-events: none; z-index: 7; opacity: 0;
  transform: translate(-50%, -50%); animation: ic-lock .5s cubic-bezier(.2, .9, .3, 1) .5s both; }
.ic3d-lock.quick { animation-delay: .22s; animation-duration: .36s; }
.ic3d-lock b, .fx-lock b { position: absolute; width: 24%; height: 24%; border: 3px solid #ffd27a; filter: drop-shadow(0 0 6px rgba(255, 110, 50, .95)); }
.ic3d-lock b:nth-child(1), .fx-lock b:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.ic3d-lock b:nth-child(2), .fx-lock b:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.ic3d-lock b:nth-child(3), .fx-lock b:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
.ic3d-lock b:nth-child(4), .fx-lock b:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.ic3d-lock s, .fx-lock i { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); border-radius: 50%; text-decoration: none;
  border: 2px solid rgba(255, 214, 140, .95); box-shadow: 0 0 12px rgba(255, 110, 50, .85), inset 0 0 10px rgba(255, 110, 50, .55);
  background: linear-gradient(#ffd27a, #ffd27a) center / 2px 64% no-repeat, linear-gradient(#ffd27a, #ffd27a) center / 64% 2px no-repeat; }
@keyframes ic-lock { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(40deg); } 62% { opacity: 1; transform: translate(-50%, -50%) scale(.95) rotate(0); } 82% { transform: translate(-50%, -50%) scale(1.03); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.vfx.ic3d-ember { z-index: 2; animation: ic-ember var(--life, 1s) cubic-bezier(.45, 0, .85, .55) both; }
.ic3d-ember .core { inset: 0; border-radius: 50%; background: radial-gradient(circle at 45% 45%, #fff 0 16%, #ffe08a 30%, #ff8a2e 52%, rgba(196, 50, 31, 0) 72%); box-shadow: 0 0 22px 6px rgba(255, 120, 40, .6); animation: ic-flick .16s ease-in-out infinite alternate; }
.ic3d-ember .tail { inset: auto; left: 50%; top: 50%; width: 96px; height: 9px; margin-top: -4.5px; transform-origin: 0 50%; transform: rotate(var(--ang)); border-radius: 99px; background: linear-gradient(90deg, rgba(255, 214, 130, .95), rgba(255, 110, 40, .45) 45%, transparent); filter: blur(1.5px); }
@keyframes ic-ember { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 16% { opacity: 1; } 86% { opacity: 1; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.2); } }
@keyframes ic-flick { from { filter: brightness(1); } to { filter: brightness(1.4); } }
.vfx.ic3d-fall { z-index: 2; }
/* 보드 위 조준선 (아이템 연출이 끝난 뒤) */
.fx-lock { animation: fx-lock-in .48s cubic-bezier(.2, .9, .3, 1) both, fx-out .4s ease-in 1.1s forwards; }
.fx-lock b, .fx-lock i { inset: auto; }
.fx-lock b { width: 22%; height: 22%; }
.fx-lock i { left: 50%; top: 50%; }
@keyframes fx-lock-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(40deg); } 62% { opacity: 1; transform: translate(-50%, -50%) scale(.95) rotate(0); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fx-out { to { opacity: 0; } }
/* 총공세: 화면 가장자리에서 몰려드는 붉은 집중선 */
.fx-rage { overflow: hidden; animation: fx-rage .95s ease-out both; background: radial-gradient(ellipse at center, transparent 45%, rgba(120, 10, 6, .38) 100%); }
.fx-rage b { inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255, 70, 50, 0) 0 1.6deg, rgba(255, 96, 66, .85) 1.6deg 3deg, rgba(255, 70, 50, 0) 3deg 6.2deg);
  -webkit-mask: radial-gradient(closest-side, transparent 40%, rgba(0, 0, 0, .6) 62%, #000 100%); mask: radial-gradient(closest-side, transparent 40%, rgba(0, 0, 0, .6) 62%, #000 100%); animation: fx-rage-lines .95s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes fx-rage { 0% { opacity: 0; } 12% { opacity: 1; } 65% { opacity: .9; } 100% { opacity: 0; } }
@keyframes fx-rage-lines { from { transform: scale(1.4) rotate(-5deg); } to { transform: scale(1) rotate(0); } }
/* 추적자 결과: 구역 전체 (정확한 칸은 보여 주지 않는다) */
.fx-quad { border-radius: 6px; display: grid; place-items: center; animation: fx-fade 1.5s ease-in-out both; }
.fx-quad.hit { background: rgba(125, 255, 154, .2); box-shadow: inset 0 0 0 2px rgba(125, 255, 154, .85), 0 0 24px rgba(125, 255, 154, .35); }
.fx-quad.miss { background: rgba(20, 24, 18, .35); box-shadow: inset 0 0 0 2px rgba(184, 173, 140, .45); }
.fx-quad span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(10, 14, 8, .8); color: #c9ffd5; white-space: nowrap; }
.fx-quad.miss span { color: var(--sand-2); }
@media (prefers-reduced-motion: reduce) { .ic3d-heat, .ic3d-lock, .fx-lock, .fx-rage b { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
.ic3d-stage.ic3d-shake { animation: shake-heavy .5s; }
@media (prefers-reduced-motion: reduce) { .ic3d-stage.ic3d-shake { animation: none; } }

/* v27.4 밴픽 시너지 표: 마우스를 올리면 간단 설명, 누르면 자세한 설명 */
.syn-table .syn-row { cursor: pointer; }
.syn-table .syn-row:hover, .syn-table .syn-row:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.item-tip .syn-tip { max-width: 300px; }
.item-tip .syn-tip-h { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.item-tip .syn-tip-h .dim { font-size: 12px; }
.item-tip .syn-tip p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }