/*
 * 몽토
 * © 2026 몽토. All rights reserved.
 * 무단 복제, 배포, 수정을 금지합니다. 자세한 내용은 LICENSE 파일을 보세요.
 */
:root {
  color-scheme: only light; /* 2026-10-27 사용자: 폰 다크 모드에 영향 안 받게 (index.html 메타와 같이) */
  --p: #3b285c; --p-soft: #eee8f5; --bg: #f4f1f8; --line: #ddd5e7; --text: #241f2b; --muted: #776f82;
  --p1: #4f79c7; --p2: #c65a62; --warn: #8a5361;
  --mountain: #dfcfb8; --jungle: #c4dfbc; --meadow: #e1e9b2; --plaza: #ead6b5;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
/* 2026-10-25 사용자: 화면을 위로 끌어도 새로 고침되지 않게, 두 번 눌러 확대되지 않게 (손가락 두 개 확대는 ui.js에서 막음) */
html, body { overscroll-behavior: none; touch-action: manipulation; }
/* 2026-11-11 사용자: 게임 전체 글자체 하나로, 굵게, 상업 이용 가능 → 나눔스퀘어라운드 (NAVER, SIL OFL 1.1, fonts/OFL.txt). 고친 적 없는 원본 웹폰트 파일 두 개:
   얇은 굵기(100~749)는 모두 Bold, 굵은 글씨(750~)는 ExtraBold로 그림 → 기기마다 같은 글자, 가는 글씨 없음 */
@font-face { font-family: "NanumSquareRound"; font-style: normal; font-weight: 100 749; font-display: swap; src: url("fonts/NanumSquareRoundB.woff2") format("woff2"); unicode-range: U+0-BBD4, U+BBD6-10FFFF; } /* 믕(U+BBD5)은 이 글꼴에 빈 글자라 뺌 → 기기 글꼴로 (무믕·믕) */
@font-face { font-family: "NanumSquareRound"; font-style: normal; font-weight: 750 1000; font-display: swap; src: url("fonts/NanumSquareRoundEB.woff2") format("woff2"); unicode-range: U+0-BBD4, U+BBD6-10FFFF; }
:root { --font: "NanumSquareRound", system-ui, -apple-system, "Noto Sans KR", sans-serif; }
body { word-break: keep-all; font-family: var(--font); font-weight: 700; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: inherit; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
.app { max-width: 720px; margin: auto; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }

.top { background: var(--p); color: #fff; border-radius: 14px; padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.title { font-size: 18px; font-weight: 900; white-space: nowrap; }
.sub { font-size: 11px; opacity: .8; margin-top: 2px; }
.steps { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.step { font-size: 10px; font-weight: 800; padding: 4px 7px; border-radius: 20px; background: #ffffff1c; }
.step.on { background: #fff; color: var(--p); }
.step.done { opacity: .55; }

.timebar { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 4px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 6px 8px; margin: 8px 0; }
.timebar .lbl { font-size: 11px; font-weight: 900; color: var(--p); padding-right: 4px; }
.tm { text-align: center; font-size: 10px; font-weight: 800; padding: 4px 2px; border-radius: 8px; color: var(--muted); background: #f8f6fa; }
.tm .ic { display: block; font-size: 16px; }
.tm.on { background: var(--p); color: #fff; box-shadow: 0 2px 6px #3b285c44; }

.players { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.player { min-width: 0; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px; }
.player.active { border-color: var(--p); box-shadow: 0 0 0 3px #3b285c18; }
.ph { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.p1 { background: var(--p1); } .dot.p2 { background: var(--p2); }
.pname { font-size: 13px; font-weight: 900; flex: 1; }
.badge { font-size: 10px; font-weight: 900; background: var(--p-soft); color: var(--p); padding: 3px 6px; border-radius: 7px; }
.badge.go { background: var(--p); color: #fff; }
.evo { font-size: 10px; font-weight: 800; color: var(--p); margin: -2px 0 5px; }
.hpbar { height: 6px; background: #e6e0ec; border-radius: 6px; overflow: hidden; margin-bottom: 5px; }
.hpfill { height: 100%; background: #59b77a; transition: width .25s; }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 11px; }
.statgrid div { display: flex; justify-content: space-between; }
.statgrid span { color: var(--muted); }
.statgrid b.neg { color: var(--p2); }
.incomplete { margin-top: 5px; font-size: 10px; font-weight: 900; color: #fff; background: var(--warn); border-radius: 6px; padding: 3px 6px; }
.mats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.mat { text-align: center; font-size: 10px; background: #f8f6fa; border-radius: 6px; padding: 2px 0; }
.mat .ic { display: block; font-size: 14px; }
.mat b { font-size: 12px; }
.mat.zero { opacity: .45; }
.mat.time { outline: 2px solid var(--p); }

.notice { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-size: 13px; font-weight: 900; margin: 8px 0; }
.notice small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.region { padding: 8px; border-radius: 12px; border: 1px solid #0001; }
.region.mountain { background: var(--mountain); } .region.jungle { background: var(--jungle); }
.region.meadow { background: var(--meadow); } .region.plaza { background: var(--plaza); }
.rh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.rn { font-size: 14px; font-weight: 900; }
.rd { font-size: 9px; opacity: .65; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.card { min-height: 78px; background: #fff; border: 2px solid transparent; border-radius: 9px; padding: 5px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: 0 2px 5px #0001; }
.card:not(:disabled):active { border-color: var(--p); transform: scale(.97); }
.card .effect { font-size: 11px; font-weight: 900; line-height: 1.3; }
.card .effect .or { display: block; font-size: 9px; color: var(--muted); font-weight: 700; }
.card .reward { font-size: 9px; color: var(--muted); margin-top: 4px; }
.empty { font-size: 10px; color: var(--muted); grid-column: 1 / -1; text-align: center; padding: 10px 0; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.panel h2 { font-size: 15px; margin: 0 0 6px; }
.panel p { font-size: 12px; color: var(--muted); margin: 4px 0; line-height: 1.5; }
.big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.big button, .btn { border: 0; border-radius: 10px; padding: 12px 8px; font-size: 13px; font-weight: 900; background: var(--p); color: #fff; }
.big button.alt, .btn.alt { background: var(--p-soft); color: var(--p); }

.evos { display: grid; gap: 7px; margin-top: 8px; }
.evocard { border: 1px solid var(--line); border-radius: 10px; padding: 9px; display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.evocard h3 { margin: 0; font-size: 14px; }
.evocard .ab { font-size: 11px; color: var(--text); margin-top: 3px; }
.evocard .cost { font-size: 11px; margin-top: 4px; }
.evocard .cost .lack { color: var(--p2); font-weight: 800; }
.evocard .cond { font-size: 10px; color: var(--muted); margin-top: 2px; }

.pending { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; }
.pending li { padding: 6px 0; border-top: 1px solid var(--line); }
.pending b { display: block; }
.pending span { color: var(--muted); font-size: 11px; }

.score { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.score div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; }
.score b { display: block; font-size: 28px; color: var(--p); }

.toolbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
.toolbar button { border: 1px solid var(--line); background: #fff; color: var(--p); border-radius: 9px; padding: 9px 2px; font-size: 11px; font-weight: 800; }
.copy { text-align: center; font-size: 10px; line-height: 1.45; color: var(--muted); margin-top: 10px; padding: 0 16px 8px; word-break: keep-all; }

.modal-backdrop { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { width: min(420px, 100%); max-height: 85vh; overflow: auto; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 12px 40px #0005; }
.modal h2 { font-size: 15px; margin: 0 0 8px; }
.modal .choices { display: grid; gap: 7px; margin-top: 10px; }
.modal .logline { font-size: 12px; padding: 3px 0; border-bottom: 1px solid #f0ecf4; }
.modal .close { margin-top: 12px; width: 100%; }

@media (max-width: 420px) {
  .app { padding: 6px; }
  .title { font-size: 16px; }
  .step { font-size: 9px; padding: 3px 5px; }
  .statgrid { font-size: 10px; }
  .card { min-height: 70px; padding: 4px; }
  .card .effect { font-size: 10px; }
  .mat .ic { font-size: 12px; }
}

.timetag { font-size: 10px; font-weight: 800; color: var(--p); background: var(--p-soft); border-radius: 6px; padding: 2px 6px; margin-top: 4px; display: inline-block; }

/* 주사위 오버레이 */
/* 3D 주사위: 게임 판 위를 굴러다님 */
.dice-floor { position: fixed; z-index: 40; pointer-events: auto; transition: opacity .3s; overflow: visible; }
.dice-floor.out { opacity: 0; }
.roller { position: absolute; left: 0; top: 0; width: 54px; height: 54px; --half: 27px; }
.dshadow { position: absolute; left: 4px; right: 4px; bottom: -8px; height: 12px; border-radius: 50%; background: #000; opacity: .45; filter: blur(4px); }
.dlift { position: absolute; inset: 0; perspective: 420px; }
.dtilt { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(28deg); }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.cf { position: absolute; inset: 0; background: #fffdf8; border: 2px solid #d9d0e6; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 7px; gap: 2px; backface-visibility: hidden; box-shadow: inset 0 0 8px #0001; }
.cf i { border-radius: 50%; }
.cf i.on { background: var(--p); }
.cube.p1 .cf { border-color: var(--p1); } .cube.p1 .cf i.on { background: var(--p1); }
.cube.p2 .cf { border-color: var(--p2); } .cube.p2 .cf i.on { background: var(--p2); }
.dlabel { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) scale(.8); white-space: nowrap; background: var(--p); color: #fff; font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 999px; opacity: 0; transition: opacity .2s, transform .2s; box-shadow: 0 3px 10px #0003; }
.dlabel.p1 { background: var(--p1); } .dlabel.p2 { background: var(--p2); }
.dlabel.show { opacity: 1; transform: translateX(-50%) scale(1); }
.dlabel.win { box-shadow: 0 0 0 3px #ffd75e, 0 3px 10px #0003; }

/* 플레이어 패널: 도트 몬스터, 팬, 육각형 그래프, 공격 방향 */
.who { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.mon { width: 60px; height: 60px; display: grid; place-items: center; background: #f6f3fa; border-radius: 12px; }
.mon.bounce .sprite { animation: hop 1s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.whoinfo { min-width: 0; }
.who .evo { margin: 0 0 4px; }
.fan { min-width: 0; overflow: hidden; background: #fff6e0; border: 1px solid #f0dfb0; border-radius: 9px; padding: 4px 6px; }
.fan.neg { background: #fbe6e8; border-color: #efc2c6; }
.fanhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; font-weight: 900; color: #8a6414; }
.fanhead b { font-size: 16px; color: #b07a00; font-variant-numeric: tabular-nums; }
.fanhead b.up { animation: fanup .6s ease-out; }
@keyframes fanup { 0% { transform: translateY(6px) scale(1.4); color: #ff8a00; } 100% { transform: none; } }
.fanrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px 0; margin-top: 2px; overflow: hidden; }
.fanp { font-style: normal; font-size: 11px; line-height: 1.2; text-align: center; filter: grayscale(1); opacity: .2; }
.fanp.on { filter: none; opacity: 1; }
.fanp.new { animation: cheer .6s ease-out; }
@keyframes cheer { 0% { transform: translateY(8px) scale(.4); } 70% { transform: translateY(-3px) scale(1.2); } 100% { transform: none; } }
.fanmore { font-size: 9px; font-weight: 900; color: #b07a00; text-align: right; }
.radar { width: 100%; height: auto; display: block; margin: 2px 0; }
.radar .rg { fill: none; stroke: #ddd5e7; stroke-width: 1; }
.radar .rl { font-size: 10.5px; fill: #776f82; font-weight: 700; }
.radar .rv { fill: #241f2b; font-weight: 900; font-size: 12px; }
.radar .rv.neg { fill: #c65a62; }
.row2 { display: flex; gap: 6px; align-items: center; }
.dirbox { display: flex; gap: 6px; align-items: center; }
.dirgrid { flex: none; display: grid; grid-template-columns: repeat(3, 22px); grid-template-rows: repeat(3, 22px); gap: 2px; }
.dc { background: #f3eff7; border-radius: 4px; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: var(--p); }
.dc.on { background: var(--p); color: #fff; }
.dc.center { background: #fff; border: 1px solid var(--line); }
.dirlbl { font-size: 10px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.dirlbl b { display: block; font-size: 18px; color: var(--text); }
.dirlbl small { display: block; font-size: 9px; color: var(--p2); }
.row2 .incomplete { margin: 0; flex: 1; line-height: 1.3; }
.incomplete small { display: block; font-weight: 600; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .mon.bounce .sprite, .fanp.new, .fanhead b.up { animation: none; } }

/* 몬스터 고르기 */
.monpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.moncard { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 4px; display: grid; gap: 6px; justify-items: center; }
.moncard:active { border-color: var(--p); }
.moncard .dirbox { flex-direction: column; }
.moncard .btn { padding: 6px 12px; font-size: 12px; }
.abilpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.abilcard { border: 2px solid var(--line); background: #fff; border-radius: 12px; padding: 10px; display: grid; gap: 4px; text-align: left; color: var(--text); font: inherit; }
.abilcard:hover, .abilcard:active { border-color: var(--p); }
.abilcard .ai { font-size: 24px; }
.abilcard b { font-size: 14px; color: var(--p); }
.abilcard .ad { font-size: 12px; color: var(--muted); line-height: 1.4; }
.abil { display: inline-block; font-size: 11px; font-weight: 800; color: var(--p); background: var(--p-soft); border-radius: 999px; padding: 2px 8px; margin: 2px 0 4px; }
.blinkcell { position: absolute; inset: 3px; border: 2px dashed #ffd75e; background: #ffd75e22; border-radius: 6px; color: #ffd75e; font-size: 18px; z-index: 2; cursor: pointer; animation: blinkpulse 1s ease-in-out infinite; }
@keyframes blinkpulse { 50% { background: #ffd75e55; } }

/* 배틀: B안 종이 말판 (확정 답변 13) */
.battlewrap { --felt: #2e5547; --paper: #f4ead2; --paperB: #e8dcc0; --ink: #2a2320; --gold: #e0a530; --r1: #2d6fa3; --r2: #c8452c; --hpok: #4fae5a; --hplost: #3a302b;
  background: var(--felt); color: var(--paper); border-radius: 16px; padding: 10px 10px 12px; margin-bottom: 8px; display: grid; gap: 9px; }
.btop { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 12px; }
.btop .br { text-align: right; opacity: .85; } .btop .bl { opacity: .85; }
.turnb { font-size: 12px; font-weight: 800; line-height: 1; text-align: center; padding: 6px 16px 5px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%); }
.turnb b { display: block; font-size: 20px; font-weight: 900; color: var(--gold); -webkit-text-stroke: .6px var(--ink); }
.roster { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.rp { display: flex; gap: 6px; align-items: center; min-width: 0; }
.rp.p2 { flex-direction: row-reverse; text-align: right; }
.rtk { width: 50px; height: 50px; flex: none; position: relative; }
.rp .info { min-width: 0; flex: 1; }
.rp .tag { font-size: 10px; font-weight: 800; display: inline-block; padding: 0 5px; border-radius: 4px; color: #fff; }
.rp.p1 .tag { background: var(--r1); } .rp.p2 .tag { background: var(--r2); }
.rab { display: block; font-size: 10.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp .sub { font-size: 10.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp .hpw { height: 8px; margin-top: 3px; }
.vs { font-size: 18px; font-weight: 900; color: var(--gold); -webkit-text-stroke: .5px var(--ink); }
.board { --bw: 7; --bh: 5; position: relative; display: grid; grid-template-columns: repeat(var(--bw), 1fr); grid-template-rows: repeat(var(--bh), 1fr); aspect-ratio: var(--bw) / var(--bh); background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 #0000004d; }
.bc { position: relative; border-right: 1px solid #2a232044; border-bottom: 1px solid #2a232044; }
.bc:nth-child(7n) { border-right: 0; }
.bc:nth-child(n+29) { border-bottom: 0; }
.bc.alt { background: var(--paperB); }
.bc.pad1, .bc.pad2 { background-image: radial-gradient(circle at 50% 50%, #ffffff40 0 34%, transparent 36%); }
.bc.pad1 { background-color: #2d6fa38c; } .bc.pad2 { background-color: #c8452c8c; }
.fxlayer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.unit { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); z-index: 2; pointer-events: none; }
.tkw { position: absolute; left: -12%; right: -12%; top: -22%; bottom: 10%; }
.tok { position: relative; width: 100%; height: 100%; }
.tok svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tring { position: absolute; inset: 0; }
.tring svg { filter: drop-shadow(0 3px 0 #00000059); }
.unit .hpw { position: absolute; left: 8%; right: 8%; bottom: 0; height: 6px; }
.unit .hpn { position: absolute; left: -3px; bottom: 2px; font-size: 12px; font-weight: 900; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke; line-height: 1; }
.pips { display: flex; gap: 1px; height: 100%; width: 100%; padding: 1px; background: #2a2320; border-radius: 3px; }
.pips span { flex: 1; background: #4fae5a; border-radius: 1px; transition: background .25s; }
.pips span.lost { background: #3a302b; }
.pips.grp { gap: 2px; padding: 1.5px; }
.pips span.part { background: linear-gradient(90deg, #4fae5a var(--f), #3a302b var(--f)); } /* 묶은 칸이 일부만 남음 (2026-10-12) */
.pips span.hit { background: #e5484d; }
.pips span.heal { background: #9be08f; }
.pips span.healpre { background: #6fd27a; opacity: .35; transition: none; } /* 회복: 찰 칸을 먼저 흐리게 */
.mchbar i.hpghost, .ochp i.hpghost { position: absolute; top: 0; bottom: 0; right: auto; background: #4fcf6e; opacity: .38; transition: none; }
.tileflash { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); background: #e5484d; opacity: 0; }
.areaflash { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; overflow: visible; } /* 범위 피해 특수능력 범위 (2026-10-08) */
.fly { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); display: grid; place-items: center; opacity: 0; }
.fly svg { width: 70%; height: 70%; overflow: visible; }
.burst { position: absolute; width: calc(100% / var(--bw) * .9); aspect-ratio: 1; display: grid; place-items: center; opacity: 0; }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.burst b { position: relative; font-size: 16px; font-weight: 900; color: #fff; -webkit-text-stroke: 4px #2a2320; paint-order: stroke; }
.burst.ambush b { font-size: 13px; white-space: nowrap; letter-spacing: -.5px; } /* 2026-11-03 암습 피해 "-2+3" */
.burst.heal b { color: #c9f7b5; }
/* 2026-10-08 사용자: 회복 십자가 조금 작게 */
.burst.heal { width: calc(100% / var(--bw) * .8); margin-left: calc(100% / var(--bw) * .1); margin-top: calc(100% / var(--bh) * .1); }
.burst.heal b { font-size: 15px; -webkit-text-stroke-width: 3.5px; } .burst.block b { font-size: 13px; color: #ffd25a; }
.unit.ko .tkw { filter: grayscale(1) brightness(.6); transform: scale(.85) rotate(-8deg); transition: all .4s; }
.blinkcell { inset: 2px; border-radius: 4px; color: #a77a12; border-color: #c08a1a; }
.blinkcell.movecell { background: #ffd75e66; font-size: 16px; }
/* 2026-10-10 사용자: 이동 범위는 구름·몬스터 위 레이어 (고르는 동안만), 몬스터가 있는 칸은 55% 불투명 */
.board .mvl { display: block; position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.board .mvl .movecell { position: absolute; inset: auto; width: calc(100% / var(--bw) - 4px); height: calc(100% / var(--bh) - 4px); margin: 2px; pointer-events: auto; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; }
.board .mvl .movecell.mvon { opacity: .55; }
.pawi { width: 34px; height: 34px; max-width: 75%; max-height: 75%; object-fit: contain; pointer-events: none; }
.pawi.inl { width: 1.2em; height: 1.2em; vertical-align: -0.2em; } /* 2026-10-08 사용자: 이동도 점멸처럼 반투명 사각형을 눌러 고름 */
.fxplaying .panel button { pointer-events: none; opacity: .45; }
.big button small { display: block; font-size: 10px; font-weight: 600; opacity: .8; }
.rotmenu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.events { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; }
.events li { padding: 5px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 74px 1fr; gap: 6px; }
.events li b { color: var(--p); font-size: 11px; }
.events li > div { grid-column: 2; }
.cover { position: fixed; inset: 0; background: #211b29f2; z-index: 30; display: grid; place-items: center; padding: 16px; }
.covbox { background: #fff; border-radius: 16px; padding: 20px; text-align: center; max-width: 320px; }
.covt { font-size: 18px; font-weight: 900; color: var(--p); margin-bottom: 6px; }
.covbox p { font-size: 13px; color: var(--muted); }


/* 시작 화면 (혼자 / 2인) */
.modepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.modecard { border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 16px 10px; display: grid; gap: 4px; justify-items: center; font: inherit; color: var(--text); cursor: pointer; }
.modecard:hover, .modecard:active { border-color: var(--p); }
.modecard .mi { font-size: 34px; }
.modecard b { font-size: 16px; color: var(--p); }
.modecard span:last-child { font-size: 12px; color: var(--muted); }
.aiwait h2 { animation: aipulse 1.2s ease-in-out infinite; }
@keyframes aipulse { 50% { opacity: .5; } }
[hidden] { display: none !important; }
.rp .stt { color: #b8452f; font-weight: 700; }
.big:has(> button:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; }
.evocard:has(.evoart) { grid-template-columns: auto 1fr auto; }
.evocard .evoart { width: 48px; height: 48px; }

/* ---- 플레이어 판 (2026-10-06 사용자 UI 구상안 1번 방향) ---- */
.players { grid-template-columns: 1fr; }
.player .ph .evo { margin: 0; font-size: 10px; background: var(--p-soft); border-radius: 6px; padding: 2px 6px; }
.badw { font-size: 10px; font-weight: 900; color: #fff; background: var(--warn); border-radius: 6px; padding: 2px 6px; }
.pboard { display: grid; grid-template-columns: 74px 30px minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; align-items: center; }
.pdir { text-align: center; }
.pdir .tok { width: 70px; height: 70px; margin: auto; }
.pdir .tok.empty { display: grid; place-items: center; border-radius: 50%; background: #3a2f29; color: #fff8; font-weight: 900; }
.pdir .cap { font-size: 10px; font-weight: 800; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.fang { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 104px; }
.fhands { font-size: 16px; line-height: 1; }
.fhands.cheer { animation: cheer .7s ease-out 2; }
.fbar { flex: 1; width: 14px; border: 2px solid #2a2320; border-radius: 8px; background: #fff6e0; position: relative; overflow: hidden; }
.fbar i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--to); background: linear-gradient(#ffd25a, #f0a020); animation: fanfill .8s ease-out; }
@keyframes fanfill { from { height: var(--from); } to { height: var(--to); } }
.fang b { font-size: 13px; color: #b07a00; font-variant-numeric: tabular-nums; }
.fang b.up { animation: fanup .6s ease-out; }
.fang.neg b { color: var(--p2); }
.pmon { height: 104px; display: grid; place-items: center; background: linear-gradient(#f6f3fa, #e9e2f2); border: 2px solid #2a2320; border-radius: 14px; }
.pmon.bounce .sprite { animation: hop 1s ease-in-out infinite; }
.pstat .radar { margin: 0; }
.pbottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.pbottom .mats { margin: 0; padding: 0; border: 0; }
.achv { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10px; font-weight: 800; color: var(--muted); }
.achv span { margin-right: 2px; }
.achv i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #c9bfd6; display: grid; place-items: center; color: #c9bfd6; font-size: 10px; }
.pabil { display: grid; gap: 4px; align-content: start; }
.acard { background: #fffdf6; border: 2px solid #2a2320; border-radius: 9px; padding: 4px 6px; box-shadow: 0 2px 0 #0002; }
.acard .at { font-size: 11px; color: var(--p); }
.acard .ad { font-size: 9.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.acard.none { font-size: 10px; color: var(--muted); border-style: dashed; box-shadow: none; }
@media (min-width: 640px) { .pboard { grid-template-columns: 84px 34px minmax(0, 1fr) minmax(0, 1fr); } .pdir .tok { width: 80px; height: 80px; } }

/* ---- 성장 판 (사용자 구상안 2·3번 방향) ---- */
.gboard { display: grid; gap: 7px; }
.gwait { min-height: 52px; margin: 0 auto; width: 70%; background: #fff; border: 2px solid #2a2320; border-top: 0; border-radius: 0 0 26px 26px; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; }
.gwait .lbl { position: absolute; left: 10px; top: 4px; font-size: 9px; font-weight: 900; color: var(--muted); }
.gmon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--p1); box-shadow: 0 2px 0 #0003; position: relative; z-index: 3; }
.gmon.p2 { border-color: var(--p2); }
.region { border: 2px solid #2a2320; position: relative; }
.region.chosen { box-shadow: 0 0 0 3px var(--p); }
button.rh { width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; }
.rscene { position: relative; height: 44px; margin-bottom: 5px; display: flex; align-items: flex-end; gap: 6px; }
.scen { position: absolute; right: 0; bottom: 0; height: 40px; width: auto; opacity: .9; }
.deck { position: relative; width: 30px; height: 40px; flex: none; }
.deck i { position: absolute; inset: 0; border-radius: 5px; border: 2px solid #2a2320; background: repeating-linear-gradient(45deg, #5a3f8a 0 4px, #3b285c 4px 8px); }
.deck i:nth-child(1) { transform: translate(-3px, 3px); } .deck i:nth-child(2) { transform: translate(-1.5px, 1.5px); }
.deck b { position: absolute; right: -6px; top: -6px; z-index: 2; font-size: 9px; background: #fff; border: 1.5px solid #2a2320; border-radius: 8px; padding: 0 4px; }
.rspot { display: flex; gap: 2px; position: relative; z-index: 2; }
.rspot .gmon { width: 34px; height: 34px; }
.cards { perspective: 600px; }
.card { border-color: #2a2320; transform-style: preserve-3d; backface-visibility: hidden; }
.card.picked { pointer-events: none; }

/* 중형(2×1) 말: 꼬리 원판과 몸통 */
.tailseg { position: absolute; width: 100%; height: 100%; display: grid; place-items: center; z-index: -1; }
.tailseg i { width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f1e2c4, #b8a27a); border: 3px solid; box-shadow: 0 3px 0 #00000059; font-style: normal; font-size: 9px; font-weight: 900; color: #5a4a3a; display: grid; place-items: center; }
.neck { position: absolute; width: 100%; height: 100%; z-index: -1; display: grid; place-items: center; }
.neck::before { content: ''; background: #b8a27a; border: 2.5px solid #2a2320; border-radius: 6px; }
.neck.h::before { width: 80%; height: 26%; } .neck.v::before { width: 26%; height: 80%; }
.charmcell { color: #b066d3; border-color: #b066d3; }
.tailseg .tok.tailtok { width: 100%; height: 100%; }
.tailtok .tring { inset: 6%; }
.tdisc { position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f1e2c4, #b8a27a); border: 2px solid #2a2320; display: grid; place-items: center; font-size: 9px; font-weight: 900; color: #5a4a3a; }
.bodygrid { display: grid; gap: 1px; justify-content: center; }
.bodygrid .dc { width: 15px; height: 15px; border-radius: 3px; background: #f1edf6; display: grid; place-items: center; font-size: 8px; color: #c9bfd6; }
.bodygrid .dc.on { background: #ffd25a; color: #8a5a00; border: 1px solid #2a2320; }
.bodygrid .dc.center { background: #fff; border: 1px solid #2a2320; }
.bodygrid .dc.tailc { background: #e2d2b0; border: 1px solid #2a2320; color: #5a4a3a; font-weight: 900; font-size: 6px; }

/* 성장 중 진화 진행도 (2026-10-06) */
.evoprog { border: 1.5px dashed var(--line); border-radius: 10px; padding: 4px 6px; background: #fff; display: grid; gap: 2px; }
.evoprog .eph { font-size: 9px; color: var(--muted); font-weight: 700; }
/* 2026-10-08 사용자: 재료가 칸 밖으로 밀려나지 않게. 자리가 모자라면 재료가 다음 줄로 내려감 */
.evoprog .epr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 10px; line-height: 1.2; min-width: 0; }
.evoprog .epr > .sprite, .evoprog .epr > svg, .evoprog .epr > .epq { flex: none; }
.evoprog .epr b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.evoprog .epr span { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; max-width: 100%; }
.evoprog .epr em { white-space: nowrap; display: inline-flex; align-items: center; }
.evoprog .epr em .mico, .evoprog .epr em img, .evoprog .epr em .sico { width: 15px; height: 15px; }
.evoprog .epr em { font-style: normal; color: var(--muted); }
.evoprog .epr em.ok { color: #2f8a4a; font-weight: 700; }
.evoprog .epr.ready b::after { content: ' ✓'; color: #2f8a4a; }
.evoprog .epq { width: 18px; text-align: center; font-style: normal; color: var(--muted); }
.evoprog .epmore { font-size: 9px; color: var(--muted); text-align: right; }

/* 배틀 턴 결과 뒤 자동 진행 (2026-10-06) */
.autonext { margin-top: 10px; display: grid; gap: 4px; justify-items: center; font-size: 11px; color: var(--muted); }
.autonext i { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--p-soft); overflow: hidden; position: relative; }
.autonext i::after { content: ''; position: absolute; inset: 0; background: var(--p); transform-origin: left; animation: autonext 2.2s linear forwards; }
@keyframes autonext { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- 한 화면 배치 (2026-10-06 사용자 요청: 플레이어 1 / 플레이어 2를 나란히, 성장 화면까지 스크롤 없이) ---- */
.app { padding-top: 6px; }
.top { padding: 6px 10px; border-radius: 12px; }
.title { font-size: 15px; }
.sub { font-size: 10px; margin-top: 0; }
.step { padding: 3px 6px; font-size: 9.5px; }
.timebar { margin: 5px 0; padding: 4px 6px; }
.tm { padding: 2px 1px; font-size: 9.5px; }
.tm .ic { font-size: 13px; }
.players { grid-template-columns: 1fr 1fr; gap: 5px; }
.player { padding: 5px 6px; border-radius: 11px; }
.player .ph { margin-bottom: 3px; gap: 4px; }
.player .pname { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .ph .evo { font-size: 9px; padding: 1px 4px; white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.player .badge { font-size: 9px; padding: 2px 5px; }
.player .badw { font-size: 9px; padding: 1px 4px; }
.pboard { grid-template-columns: 44px minmax(0, 1fr) 46px 12px; gap: 3px; align-items: center; }
.pdir .tok { width: 44px; height: 44px; }
.pdir .tok.empty { font-size: 12px; }
.pdir .bodygrid { transform: scale(.62); transform-origin: center; margin: -12px -10px; }
.pmon { height: 60px; border-radius: 10px; }
.pmon .sprite { width: 52px; height: 52px; }
.pstat .radar { width: 46px; height: 46px; display: block; }
.fang { height: 60px; gap: 1px; }
.fhands { font-size: 10px; }
.fbar { width: 9px; border-width: 1.5px; }
.fang b { font-size: 10px; }
.pnums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 4px; }
.pnums span { display: flex; justify-content: space-between; align-items: baseline; gap: 2px; background: #f8f6fa; border-radius: 5px; padding: 1px 4px; font-size: 9.5px; }
.pnums i { font-style: normal; color: var(--muted); font-size: 8.5px; }
.pnums b { font-size: 10.5px; }
.pnums b.neg { color: var(--p2); }
.player .mats { margin-top: 4px; padding-top: 4px; gap: 2px; }
.player .mat { padding: 1px 0; font-size: 9px; }
.player .mat .ic { font-size: 12px; line-height: 1.1; }
.player .mat b { font-size: 11px; }
.player .achv { margin-top: 3px; gap: 3px; font-size: 9px; }
.player .achv i { width: 15px; height: 15px; font-size: 8px; border-width: 1px; }
.player .pabil { margin-top: 4px; }
.player .acard { padding: 3px 5px; border-width: 1.5px; }
.player .acard .at { font-size: 10px; }
.player .acard .ad { font-size: 8.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.player .acard.none { font-size: 9px; }
.player .evoprog { padding: 2px 5px; gap: 1px; border-width: 1px; }
.player .evoprog .eph { font-size: 8.5px; }
.player .evoprog .epr { font-size: 9px; gap: 3px; }
.player .evoprog .epr .sprite { width: 14px; height: 14px; flex: none; }
.player .evoprog .epr b { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player .evoprog .epr span { gap: 1px 2px; font-size: 8.5px; }
.notice { margin: 5px 0; padding: 4px 6px; font-size: 12px; }
.notice small { font-size: 10px; margin-top: 0; }
.gboard { gap: 4px; }
.gwait { min-height: 40px; width: 60%; border-radius: 0 0 20px 20px; }
.gwait .gmon { width: 32px; height: 32px; }
.grid { gap: 5px; }
.region { padding: 5px; border-radius: 10px; }
.rscene { height: 30px; margin-bottom: 3px; }
.scen { height: 28px; }
.deck { width: 22px; height: 30px; }
.rspot .gmon { width: 28px; height: 28px; }
.cards { gap: 3px; }
.card { min-height: 62px; padding: 3px 4px; border-radius: 7px; }
.card .effect { font-size: 10px; line-height: 1.2; }
.card .reward { font-size: 8.5px; margin-top: 2px; }
.toolbar button { padding-top: 6px; padding-bottom: 6px; }
.rh { margin-bottom: 2px; } .rn { font-size: 12.5px; }

/* 진화 목록 버튼과 목록 (2026-10-06) */
.evolistbtn { position: absolute; right: 6px; top: 4px; font-size: 9.5px; font-weight: 800; border: 1.5px solid #2a2320; background: #fffdf6; border-radius: 8px; padding: 2px 6px; color: var(--p); }
.elnote { font-size: 11px; color: var(--muted); margin: 0 0 6px; }
.ellist { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.elrow { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: start; border: 1.5px solid var(--line); border-radius: 10px; padding: 5px; background: #fff; }
.elh { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.elh b { font-size: 13px; } .elh span { font-size: 10px; color: var(--muted); }
.erdy { font-size: 9.5px !important; color: #fff; background: #2f8a4a; border-radius: 6px; padding: 1px 5px; }
.elmats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.elm { font-size: 11px; background: #f8f6fa; border-radius: 6px; padding: 1px 5px; display: flex; gap: 3px; align-items: center; }
.elm small { font-size: 9px; }
.elm em { font-style: normal; font-size: 9.5px; color: var(--muted); border-radius: 4px; padding: 0 3px; }
.elm em.p1 { border: 1px solid var(--p1); } .elm em.p2 { border: 1px solid var(--p2); }
.elm em.ok { color: #2f8a4a; font-weight: 800; }
.elst { font-size: 10px; color: var(--p); margin-top: 2px; }
.elab { font-size: 10px; color: var(--muted); margin-top: 1px; line-height: 1.35; }
/* 이번 성장 턴에 오른 능력치 */
.pnums span.up { background: #d9f5df; box-shadow: 0 0 0 1.5px #3cc463, 0 0 8px #3cc46399; animation: statglow 1.6s ease-in-out infinite; }
.pnums span.up b { color: #1f8a3c; }
@keyframes statglow { 50% { box-shadow: 0 0 0 1.5px #3cc463, 0 0 14px #3cc463cc; } }

/* 진화 고르기: 못 하는 진화는 접어 둠 (2026-10-06) */
.evomore { margin-top: 8px; border: 1.5px dashed var(--line); border-radius: 10px; padding: 4px 8px; }
.evomore summary { font-size: 12px; font-weight: 800; color: var(--muted); cursor: pointer; padding: 4px 0; }
.evomore[open] summary { margin-bottom: 6px; }
.noevo { font-size: 12px; color: var(--muted); text-align: center; }

/* 중형 이상: 사각형 하나로 표시 (2026-10-06) */
.unit.bigu .tkw.bigw { left: 0; right: 0; top: 0; bottom: 0; }
.bdummy { display: none; }
.bbox { position: absolute; border: 3px solid var(--pc); outline: 2px solid #2a2320; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #fffaf0, #e6dcc6); box-shadow: 0 3px 0 #00000059; display: grid; place-items: center; overflow: hidden; }
.bbox .bart { width: 100%; height: 100%; }
/* 공격 방향 삼각형 (2026-10-07: 더 크고 진하게, 2번 때리는 칸은 빨간색) */
.bmark { position: absolute; width: 30%; height: 22%; background: #ffc21a; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 1.5px #2a2320) drop-shadow(0 0 1.5px #2a2320) drop-shadow(0 0 1px #2a2320); z-index: 3; }
/* 안쪽 대각선 공격 (2026-10-08 요청): 파란 화살표 */
.bmark.inner { background: #3b8be8; }
.bhead { position: absolute; width: 80%; height: 80%; z-index: 4; overflow: visible; filter: drop-shadow(0 2px 0 #0006); }
.unit.bigu .hpw { z-index: 5; }
.unit.ko .bbox { filter: grayscale(1) brightness(.6); }
/* 특수능력 연출 (2026-10-06) */
.abilfx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.abilfx * { transform-box: view-box; }
.burst.abil b { font-size: 12px; color: #fff6a8; white-space: nowrap; }
.burst.abil { width: calc(100% / var(--bw) * 1.6); margin-left: calc(100% / var(--bw) * -.28); background: none; padding: 0; } /* 능력 칩(.abil) 배경이 번져 몬스터를 가리던 것 막음 */
.burst.abil svg { display: none; }
.burst.abil b { font-size: 12px; color: #fff6a8; -webkit-text-stroke: 3.5px #4b2a86; }
/* 2026-10-08 사용자: '치명타!'는 작게 (주황 피해 숫자는 그대로) */
.burst.crit, .burst.combo, .burst.bump, .burst.ko { width: calc(100% / var(--bw) * .62); margin-left: calc(100% / var(--bw) * .21); }
.burst.crit b, .burst.combo b, .burst.bump b, .burst.ko b { font-size: 9px; line-height: 1.15; text-align: center; white-space: nowrap; -webkit-text-stroke: 3px #2a2320; }
/* 업적 배지 (2026-10-06) */
.achv { cursor: pointer; }
.achv i.got { border: 1.5px solid #c99a1e; background: radial-gradient(circle at 40% 35%, #fff6c8, #ffd25a); color: inherit; font-size: 12px; box-shadow: 0 1px 0 #0003; }
.player .achv i.got { font-size: 9px; border-width: 1px; }
.achv .pts { margin-left: auto; font-style: normal; font-weight: 900; color: var(--ink); white-space: nowrap; }
.achrow .achic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 40% 35%, #fff6c8, #ffd25a); border: 2px solid #c99a1e; flex: none; }
.elnone { font-size: 11px; color: var(--muted); }
/* 공격 방향 표시는 맨 위 (2026-10-06 요청: 정면 화살표·벽·다른 말보다 위) */
.unit { z-index: auto; }
.unit .tring { z-index: 8; pointer-events: none; }
.unit .bmark { z-index: 8; }
.unit .bhead { z-index: 7; }
.bback { position: absolute; width: 26%; height: 26%; z-index: 4; overflow: visible; pointer-events: none; } /* 2026-10-19 사용자: 꼬리 쪽 안쪽 정면 화살표 */
.unit .bback { z-index: 7; }
.board > .cell, .board > div:not(.unit):not(.fxlayer) { position: relative; z-index: 0; }
.achv { flex-wrap: wrap; row-gap: 2px; }
/* 점수판 (2026-10-06) */
.scorebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 6px; background: #fff; border: 2px solid var(--line, #e2d9ee); border-radius: 12px; padding: 5px 8px; }
.scorebar[hidden] { display: none; }
.sbp { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 3px 4px; border-radius: 9px; }
.sbp.p1 b { color: #2d6fa3; } .sbp.p2 b { color: #c0392b; }
.sbp.lead { background: #fff6d6; box-shadow: inset 0 0 0 2px #ffd25a; }
.sbp .sbn { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sbp b { font-size: 22px; font-weight: 900; }
.sbp b small { font-size: 11px; margin-left: 1px; }
.sbp .sba { font-size: 10px; color: var(--muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sbmid { text-align: center; font-size: 12px; font-weight: 900; line-height: 1.25; }
.sbmid .p1 { color: #2d6fa3; } .sbmid .p2 { color: #c0392b; }
.sbmid small { display: block; font-size: 9px; font-weight: 700; color: var(--muted); }
.scorebar { padding: 3px 6px; margin-top: 4px; }
.sbp { flex-direction: row; gap: 5px; justify-content: center; padding: 2px 5px; flex-wrap: wrap; }
.sbp b { font-size: 18px; }
.sbp .sba { font-size: 9.5px; }
.sbmid { font-size: 11px; line-height: 1.15; }
.scorebar { padding: 2px 6px; border-width: 1.5px; }
.sbp { padding: 1px 5px; }
.sbp b { font-size: 17px; line-height: 1; }
.sbmid small { font-size: 8.5px; }
.scorebar { margin-top: 3px; padding: 1px 6px; }
.sbp b { font-size: 16px; }
.sbp .sbn, .sbp .sba { font-size: 9.5px; }
.app { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
/* 결산과 우승 (2026-10-06) */
.tally h2 { margin: 0 0 4px; }
.tnote { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.tcols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcol { border: 2px solid #e2d9ee; border-radius: 12px; padding: 8px; background: #fff; }
.tcol.p1 { border-color: #9cc0e0; } .tcol.p2 { border-color: #e7a59c; }
.tmon { display: grid; place-items: center; height: 72px; }
.tname { text-align: center; font-weight: 900; margin: 2px 0 6px; }
.tline { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 4px; border-radius: 6px; }
.tline b { font-weight: 900; }
.tline.badge { background: #fff6d6; margin-top: 3px; transition: opacity .3s, transform .3s; cursor: pointer; }
.tline.badge.pending { opacity: .15; transform: translateX(-6px); }
.tline.badge.pop { animation: tpop .4s ease-out; }
.tline.adjl { margin-top: 3px; font-size: .92em; color: var(--muted); transition: opacity .3s; } .tline.adjl b { color: var(--muted); }
.tline.adjl.pending { opacity: .15; }
@keyframes tpop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.tline.none { color: var(--muted); }
.ttotal { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed #e2d9ee; margin-top: 6px; padding-top: 4px; font-weight: 900; }
.ttotal b { font-size: 26px; display: inline-block; }
.tcol.p1 .ttotal b { color: #2d6fa3; } .tcol.p2 .ttotal b { color: #c0392b; }
.winwrap { margin: 12px 0 8px; opacity: 0; transform: scale(.6); transition: opacity .5s, transform .6s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.winwrap.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.winner { position: relative; text-align: center; border-radius: 16px; padding: 14px 10px 12px; background: radial-gradient(circle at 50% 30%, #fffbe6, #ffe9a3); border: 3px solid #e8b400; box-shadow: 0 6px 0 #0002; overflow: hidden; }
.winner::before { content: ''; position: absolute; inset: -50%; background: repeating-conic-gradient(#fff6 0 10deg, transparent 10deg 20deg); animation: wspin 12s linear infinite; }
.winner > * { position: relative; }
@keyframes wspin { to { transform: rotate(360deg); } }
.winner .wcrown { font-size: 34px; animation: wbob 1.2s ease-in-out infinite; }
.winner .wmon { display: grid; place-items: center; animation: wjump 1s ease-in-out infinite; }
@keyframes wbob { 50% { transform: translateY(-4px) rotate(-6deg); } }
@keyframes wjump { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12px) scale(1.04, .97); } 60% { transform: translateY(0) scale(1.03, .96); } }
.winner .wt { font-size: 24px; font-weight: 900; margin-top: 4px; }
.winner.p1 .wt { color: #2d6fa3; } .winner.p2 .wt { color: #c0392b; }
.winner p { margin: 4px 0; font-weight: 700; }
.winner .wscore { font-size: 20px; font-weight: 900; }
.winner .wnote { font-size: 11px; color: var(--muted); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: 0; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .winner::before, .winner .wcrown, .winner .wmon { animation: none; } }
.winwrap { position: fixed; inset: 0; z-index: 55; margin: 0; display: grid; place-items: center; padding: 16px; background: #2a232080; transform: none; }
.winwrap .winner { width: min(340px, 100%); transform: scale(.6); transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.winwrap.show .winner { transform: scale(1); }
.wclose { margin-top: 8px; border: 2px solid #2a2320; background: #fff; border-radius: 10px; padding: 6px 14px; font-weight: 800; font-size: 13px; }
.wbanner { margin: 10px 0 8px; text-align: center; font-weight: 900; font-size: 16px; background: #fff6d6; border: 2px solid #e8b400; border-radius: 12px; padding: 8px; }
.winner.cowin .wt { color: #8a5a00; } .winner .wmon { display: flex; justify-content: center; gap: 6px; }
/* 결승전 경기장 (2026-10-06) */
.battlewrap.final { background: linear-gradient(#2b2350, #3d2f6b 40%, #4b3a7c); border-radius: 14px; padding: 4px 10px 6px; box-shadow: inset 0 0 0 3px #ffd25a; position: relative; overflow: hidden; }
.battlewrap.final::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 0, #fff6 0, transparent 40%), radial-gradient(ellipse at 80% 0, #fff6 0, transparent 40%); animation: spot 3s ease-in-out infinite alternate; }
@keyframes spot { to { opacity: .4; } }
.arena-top, .arena-bottom { position: relative; }
.pennants { display: block; width: 100%; height: 14px; }
.finalbanner { display: flex; align-items: center; justify-content: center; gap: 8px; color: #ffd25a; font-weight: 900; font-size: 15px; letter-spacing: 1px; text-shadow: 0 2px 0 #0008; margin: 1px 0; }
.bgmbtn { font-size: 10px; font-weight: 800; border: 1.5px solid #ffd25a; background: #0004; color: #fff6c8; border-radius: 999px; padding: 2px 8px; letter-spacing: 0; text-shadow: none; }
.crowd { display: block; width: 100%; height: 26px; }
.crowd .fan { animation: cheer .7s ease-in-out infinite alternate; }
@keyframes cheer { to { transform: translateY(-4px); } }
.battlewrap.final .crowd .fan { transform-box: fill-box; }
/* 2026-10-07 버그 수정: 광고판이 판 옆 칸을 차지해 결승전 판만 작아졌음 → 광고판은 테두리 안쪽 여백에 겹쳐 그려서 판 크기를 다른 배틀과 같게 */
.arena { position: relative; }
.arena .adboard { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 0; }
.arena .adboard.l { left: -9px; } .arena .adboard.r { right: -9px; }
.arena .adboard span { display: none; }
.adboard { display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-radius: 4px; background: repeating-linear-gradient(#e5484d 0 18px, #ffd25a 18px 36px); border: 1.5px solid #2a2320; }
.adboard span { writing-mode: vertical-rl; font-size: 7px; font-weight: 900; color: #2a2320; letter-spacing: 1px; }
.adboard.r { background: repeating-linear-gradient(#2d6fa3 0 18px, #fff 18px 36px); }
.battlewrap.final .board { background-image: radial-gradient(circle at 50% 50%, transparent 0 18%, #ffd25a33 18% 19%, transparent 19%); }
.battlewrap.final .hpbars, .battlewrap.final .rp { color: #fff; }
@media (prefers-reduced-motion: reduce) { .crowd .fan, .battlewrap.final::before { animation: none; } }
.steps { gap: 3px; }
.step { padding: 3px 5px; }
.battlewrap.final .crowd .fan { transform-box: view-box; }
.battlewrap.final .roster, .battlewrap.final .roster .sub, .battlewrap.final .btop, .battlewrap.final .info { color: #fff; }
.battlewrap.final .vs { color: #ffd25a; }
.steps { flex-wrap: nowrap; gap: 2px; }
.step { padding: 3px 4px; font-size: 9px; white-space: nowrap; }
.top .title { font-size: 15px; }
.player .achv { flex-wrap: nowrap; min-width: 0; }
.player .achv i.got + i.got { margin-left: -6px; }
.player .achv .pts { flex: none; }
.copy { margin: 2px 0 0; font-size: 9.5px; }
.toolbar button { padding-top: 5px; padding-bottom: 5px; }
/* 점수판 간단히 (2026-10-06 요청: 몇 대 몇만, 자세한 건 눌러서) */
.scorebar { display: block; padding: 0; border: 0; background: none; margin-top: 4px; }
.sbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1.5px solid #e2d9ee; border-radius: 12px; padding: 4px 10px; font: inherit; color: var(--ink); cursor: pointer; }
.sbtn .sbs { font-size: 12px; font-weight: 800; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbtn .sbs.p1 { text-align: right; } .sbtn .sbs.p2 { text-align: left; }
.sbtn .sbs.lead { color: var(--ink); }
.sbtn b { font-size: 22px; font-weight: 900; line-height: 1.1; min-width: 26px; text-align: center; }
.sbtn .sbn0 { color: #2d6fa3; } .sbtn .sbn1 { color: #c0392b; }
.sbtn i { font-style: normal; font-weight: 900; font-size: 18px; color: var(--muted); }
.sbtn small { font-size: 11px; color: var(--muted); }
.sdrow { border: 2px solid #e2d9ee; border-radius: 10px; padding: 8px 10px; margin-top: 8px; display: grid; gap: 3px; font-size: 13px; }
.sdrow.p1 { border-color: #9cc0e0; } .sdrow.p2 { border-color: #e7a59c; }
.sdrow .sdt { border-top: 1px dashed #e2d9ee; padding-top: 4px; font-weight: 800; }
.crowd { height: 30px; }

/* 독 상태: 5.5초마다 한 번 보라색으로 짧게 깜빡임 (2026-10-06 요청) */
.unit.poisoned .tkp, .rp.poisoned .rtk { animation: poisonBlink 5.5s linear infinite; animation-delay: var(--pd, 0s); }
@keyframes poisonBlink {
  0%, 84%, 100% { filter: none; }
  88%, 94% { filter: drop-shadow(0 0 5px #a23cff) drop-shadow(0 0 2px #7a1fd6) sepia(1) saturate(4) hue-rotate(225deg) brightness(.95); }
  91% { filter: drop-shadow(0 0 8px #b04dff) drop-shadow(0 0 3px #7a1fd6) sepia(1) saturate(5) hue-rotate(225deg); }
}

/* 튜토리얼 (2026-10-06) */
.tutbtn { margin-top: 12px; width: 100%; border: 2px dashed var(--line); background: #fbf9fd; border-radius: 12px; padding: 11px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.tutbtn b { color: var(--p); }
/* 튜토리얼 안내 (2026-10-07 새로 만듦): 실제 게임 화면 위에 반짝이는 테두리, 화살표, 설명 상자 */
.coach { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.coach .cshade { position: absolute; inset: 0; background: rgba(24, 16, 36, .5); }
.coach:not(.free) .cshade, .coach.free .cring, .coach.free .carrow, .coach:not(.tapwait) .carrow { display: none; }
.coach .cring { position: fixed; border: 3px solid #ffd25a; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(24, 16, 36, .5), 0 0 16px 4px rgba(255, 210, 90, .85); }
/* 2026-10-30 사용자 (신로비 소개 버벅거림): 깜빡임은 위에 겹친 흰 테두리의 투명도로만 (화면 전체 그림자를 매 프레임 다시 그리지 않게) */
.coach .cring::after { content: ''; position: absolute; inset: -3px; border: 3px solid #fff; border-radius: inherit; opacity: 0; animation: cblink2 1s ease-in-out infinite; will-change: opacity; }
@keyframes cblink2 { 50% { opacity: 1; } }
.coach.watch .cring::after { animation: none; }
/* 메뉴가 열려 흐려진 모래사장은 움직임을 멈춤 (흐림을 매 프레임 다시 계산하지 않게. 처음엔 튜토리얼만, 2026-11-11부터 모든 메뉴) */
.bc-box.menu .bc-world, .bc-box.menu .bc-world * { animation-play-state: paused !important; }
.coach.tapwait .cring { box-shadow: 0 0 0 9999px rgba(24, 16, 36, .32), 0 0 16px 4px rgba(255, 210, 90, .85); }
@keyframes cblink { 0%, 100% { border-color: #ffd25a; } 50% { border-color: #fff; } }
.coach .carrow { position: fixed; width: 40px; text-align: center; font-size: 34px; line-height: 1; animation: cbob .6s ease-in-out infinite alternate; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.coach .carrow.up { animation-name: cbobup; }
@keyframes cbob { to { transform: translateY(9px); } }
@keyframes cbobup { to { transform: translateY(-9px); } }
.coach .cbub { position: fixed; left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); background: #fff; border: 3px solid var(--p); border-radius: 16px; padding: 10px 14px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); pointer-events: auto; font-size: 14.5px; line-height: 1.55; }
.coach .cbub.ctop { top: calc(50px + env(safe-area-inset-top)); } .coach .cbub.cbot { bottom: calc(12px + env(safe-area-inset-bottom)); }
.cbub .chead { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.cbub .chead b { color: var(--p); }
/* 2026-10-10 사용자: 튜토리얼 건너뛰기는 왼쪽 위에 고정, 누르면 한 번 더 물어봄 */
.coach .cskip { position: fixed; left: calc(8px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); z-index: 3; pointer-events: auto; border: 2px solid #fff; background: rgba(44, 26, 92, .85); color: #fff; font-weight: 800; font-size: 12.5px; border-radius: 999px; padding: 6px 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.coach .cskipask { position: fixed; inset: 0; z-index: 5; pointer-events: auto; background: rgba(14, 10, 22, .6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.coach .cska { background: #fff; border-radius: 16px; padding: 18px 18px 14px; width: min(320px, 100%); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.coach .cska b { font-size: 17px; } .coach .cska p { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }
.coach .cskb { display: flex; gap: 8px; justify-content: center; } .coach .cskb .btn { flex: 1; }
.cbub .ctaphint { flex: 1; align-self: center; font-size: 11.5px; color: var(--muted); }
.coach:not(.saymode) .cbub .ctaphint { display: none; }
.cbub .ctext b { color: #b0461f; }
.cbub .chint { margin-top: 6px; font-size: 12.5px; color: #b0721a; font-weight: 700; }
.cbub .cbtns { display: flex; justify-content: flex-end; margin-top: 8px; }
.cbub .cnext { min-width: 100px; }
.cbub .cpics { display: flex; gap: 18px; justify-content: center; align-items: flex-end; margin: 6px 0 2px; }
.cbub .cpics span { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--muted); font-weight: 700; }
.tutpop { animation: tutpop .9s ease-in-out 2; }
@keyframes tutpop { 50% { transform: scale(1.18); } }
.cbub .cfang { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 800; color: #b0721a; }
.cbub .cfang b { font-size: 22px; color: #e08a00; }
.cbub .cfbar { flex: 1; height: 14px; background: #f1ecf7; border-radius: 7px; overflow: hidden; }
.cbub .cfbar i { display: block; height: 100%; width: var(--b); background: linear-gradient(90deg, #ffd25a, #ff9f1a); border-radius: 7px; animation: cfbar 1.3s .3s ease-out both; }
@keyframes cfbar { from { width: var(--a); } }
.cfan { position: fixed; z-index: 71; font-size: 26px; font-weight: 900; color: #e08a00; pointer-events: none; text-shadow: 0 2px 0 #fff; animation: cfan 1.5s ease-out forwards; }
@keyframes cfan { from { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translateY(-10px) scale(1.25); } to { transform: translateY(-80px) scale(1); opacity: 0; } }

/* 2차 진화 (2026-10-06): 대형 몸, 지배영역, 8×6 전장 */
.bbox.large { border-style: double; border-width: 5px; }
.btail { position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #fff8; border: 2px solid var(--ink); transform: translate(-50%, -50%); z-index: 3; }
.domcell { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); z-index: 0; /* 2026-10-08 사용자: 바닥처럼 몬스터 아래 (v240) */ pointer-events: none; background: repeating-linear-gradient(45deg, #8a5a2b55 0 6px, #8a5a2b22 6px 12px); box-shadow: inset 0 0 0 3px #8a5a2b; }
.domcell.p1 { box-shadow: inset 0 0 0 3px #2d6fa3; }
.domcell.p2 { box-shadow: inset 0 0 0 3px #c8452c; }
/* 폭격 표적 (투리부 줄기, 2026-10-12 사용자 그림 3번): 몬스터 위 레이어, 몬스터와 겹치면 60% */
.board .bombmk { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); z-index: 10; pointer-events: none; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.board .bombmk.bover { opacity: .6; }
.board .bombmk.bnew { visibility: hidden; }
.board.widen { animation: widen 1.6s cubic-bezier(.3,.6,.3,1); }
@keyframes widen { 0% { transform: scale(.86); filter: brightness(.8); } 10% { transform: scale(.86) translateX(-4px); } 20% { transform: scale(.88) translateX(4px); } 30% { transform: scale(.9) translateX(-4px); } 40% { transform: scale(.93) translateX(3px); } 55% { transform: scale(.97) translateX(-2px); } 70% { transform: scale(1.02); } 100% { transform: scale(1); filter: none; } }
.widetext { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; background: var(--ink); color: #ffd25a; font-weight: 900; padding: 8px 14px; border-radius: 10px; white-space: nowrap; pointer-events: none; animation: widetext 2.4s forwards; font-size: 15px; }
@keyframes widetext { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.rab.pas { color: #e2c6ff; }
.acard.pas .at b { color: #6a3d9a; }
.dc.bodyc { opacity: .75; }
.elsub { margin: 14px 0 4px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .board.widen { animation: none; } }

/* ---- 3~4인 색 (2026-10-07) ---- */
:root { --p3: #4fae5a; --p4: #d9a21b; }
.dot.p3 { background: var(--p3); } .dot.p4 { background: var(--p4); }
.cube.p3 .cf { border-color: var(--p3); } .cube.p3 .cf i.on { background: var(--p3); }
.cube.p4 .cf { border-color: var(--p4); } .cube.p4 .cf i.on { background: var(--p4); }
.dlabel.p3 { background: var(--p3); } .dlabel.p4 { background: var(--p4); }
.gmon.p3 { border-color: var(--p3); } .gmon.p4 { border-color: var(--p4); }
.elm em.p3 { border: 1px solid var(--p3); } .elm em.p4 { border: 1px solid var(--p4); }
.erdy.p3 { background: var(--p3); } .erdy.p4 { background: var(--p4); }
.tcol.p3 { border-color: #a6d7ad; } .tcol.p4 { border-color: #ecd08a; }
.tcol.p3 .ttotal b { color: #2f8a3c; } .tcol.p4 .ttotal b { color: #a87a00; }
.winner.p3 .wt { color: #2f8a3c; } .winner.p4 .wt { color: #a87a00; }
.sdrow.p3 { border-color: #a6d7ad; } .sdrow.p4 { border-color: #ecd08a; }
.domcell.p3 { box-shadow: inset 0 0 0 3px #2f8a3c; } .domcell.p4 { box-shadow: inset 0 0 0 3px #c98a00; }
/* 2차 지배영역 바닥 (사용자 그림 타일, v239): 일반 바닥처럼 몬스터 아래 */
.domcell.art { background-position: center; background-size: 100% 100%; background-repeat: no-repeat; box-shadow: none; }
.domcell.art { box-sizing: border-box; background-origin: border-box; border: 0 solid #e5484d99; } /* 바깥 테두리 옅은 빨간 선 (v244) */
.domcell.art.et { border-top-width: 3px; } .domcell.art.eb { border-bottom-width: 3px; } .domcell.art.el { border-left-width: 3px; } .domcell.art.er { border-right-width: 3px; }
.bc.pad3 { background-color: #2f8a3c8c; } .bc.pad4 { background-color: #c98a008c; }
.bc.pad3, .bc.pad4 { background-image: radial-gradient(circle at 50% 50%, #ffffff40 0 34%, transparent 36%); }
.bc:nth-child(7n), .bc:nth-child(n+29) { border-right: 1px solid #2a232044; border-bottom: 1px solid #2a232044; }
.bc.xr { border-right: 0 !important; } .bc.yb { border-bottom: 0 !important; }
.tcols.n3, .tcols.n4 { grid-template-columns: 1fr 1fr; }

/* ---- 1인 시점 카드 (2026-10-07 사용자 스케치) ---- */
.players { display: block; }
.mcard { position: relative; overflow: hidden; border-radius: 18px; border: 3px solid var(--pc); background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--pc) 16%, #fff) 100%); padding: 10px 12px 10px; min-height: 250px; box-shadow: 0 4px 0 #0000001f; isolation: isolate; }
.mcard.active { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 30%, transparent), 0 4px 0 #0000001f; }
.mcard.ko { filter: grayscale(.8); }
.mcart { position: absolute; z-index: -1; left: 50%; top: 40px; transform: translateX(-50%); width: 78%; max-width: 330px; aspect-ratio: 1; opacity: .6; pointer-events: none; }
.mcart .sprite { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 #0000001a); }
.mcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 60%, #ffffff8c 80%, #ffffffd0 100%); pointer-events: none; }
.mchead { display: flex; align-items: center; gap: 6px; }
.mcname { font-size: 15px; font-weight: 900; flex: 1; }
.mcname small { font-size: 10px; background: var(--pc); color: #fff; border-radius: 6px; padding: 1px 5px; vertical-align: 2px; }
.mcchip { font-size: 11px; font-weight: 900; background: #fffffff0; border: 2px solid #2a2320; color: #2a2320; padding: 3px 8px; border-radius: 9px; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
.mcchip.turn.go { background: var(--pc); color: #fff; border-color: var(--pc); }
.mctop { display: grid; grid-template-columns: 88px 1fr; align-items: start; gap: 4px; margin-top: 4px; }
.mcdir .tok { width: 78px; height: 78px; }
.mcdir .tok.empty { display: grid; place-items: center; border-radius: 50%; background: #3a2f29; color: #fff8; font-weight: 900; }
.mcdir .bodygrid { transform: scale(.85); transform-origin: top left; }
/* 2026-10-07: 중형·대형 전개도는 78px 칸 안에 가운데로 맞춤, 2차 진화 무지개 테두리는 둥근 사각형 */
.mcdir.bigm { width: 78px; height: 78px; display: grid; place-items: center; }
.mcdir.bigm .bodygrid { transform: scale(var(--fit, .85)); transform-origin: center; }
.mcard.evo2 .mcdir.bigm::before { border-radius: 14px; }
.mcdir.bounce .tok svg.disc { animation: hop 1s ease-in-out infinite; }
.mcradar { position: relative; justify-self: end; width: 100%; max-width: 212px; }
.mcradar .rplate { fill: #ffffffb3; stroke: #2a2320; stroke-width: 2; }
.mcradar .radar { margin: 0; }
.mcradar .rv.up { fill: #1f9d4c; filter: drop-shadow(0 0 3px #7be07a); }
.mccheer { position: absolute; right: 8px; top: 4px; font-style: normal; animation: hop .6s ease-in-out 3; }
.mchp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 6px; }
.mchl { font-size: 18px; font-weight: 900; color: #2a2320; -webkit-text-stroke: 3px #fff; paint-order: stroke; }
.mchbar { position: relative; height: 26px; border: 2.5px solid #2a2320; border-radius: 13px; background: #e7e1d6; overflow: hidden; }
.mchbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8ef0a4, #4fcf6e); transition: width .35s; }
.mchbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) - 2px), #2a232055 calc(var(--seg) - 2px) var(--seg)); }
.mchbar i.flashhit { background: #e5484d; } .mchbar i.flashheal { background: #b6f5a8; }
.mchp b { font-size: 18px; font-weight: 900; } .mchp b small { font-size: 11px; color: var(--muted); }
.mchp.up b { color: #1f9d4c; }
.mctags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mctags span { font-size: 10.5px; font-weight: 800; background: #fff; border: 1.5px solid #2a2320; border-radius: 8px; padding: 1px 6px; }
.mcline { height: 2px; background: #2a2320; margin: 8px -12px 6px; opacity: .8; }
.mcbox { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; background: #ffffffd9; border: 2px solid #2a2320; border-radius: 12px; padding: 4px 6px; margin-top: 5px; }
.mcbl { font-size: 11px; font-weight: 900; writing-mode: horizontal-tb; color: #2a2320; }
.mcbox .mats { margin: 0; padding: 0; border: 0; }
.mcbox.evo { align-items: start; }
.mcbox .pabil { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.mcard .achv { margin-top: 5px; background: #ffffffc0; border-radius: 10px; padding: 2px 6px; width: fit-content; }
.mcard .achv em { font-style: normal; margin-left: 6px; color: var(--muted); }
.mcard.slim { min-height: 0; padding-bottom: 8px; }
.mcard.slim .mcart { width: 46%; top: -30%; opacity: .55; }
.mcard.slim .mctop { display: none; }
.mcard.slim .mchl { font-size: 14px; } .mcard.slim .mchbar { height: 20px; }
.others { display: grid; gap: 6px; margin-top: 7px; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.others.n1 { --n: 1; } .others.n2 { --n: 2; } .others.n3 { --n: 3; }
.ochip { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 4px; background: #fff; border: 2px solid var(--pc); border-radius: 12px; padding: 4px 6px; text-align: left; min-width: 0; color: var(--text); }
.ochip.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 30%, transparent); }
.ochip.ko { filter: grayscale(1); opacity: .6; }
.ocbody { display: grid; min-width: 0; }
.ocbody b { font-size: 12px; }
.ocsub { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ochp { position: relative; height: 6px; background: #e6e0ec; border-radius: 6px; overflow: hidden; margin-top: 2px; }
.ochp i { display: block; height: 100%; background: #4fcf6e; transition: width .35s; }
.ochp i.flashhit { background: #e5484d; }
.ocnum { font-size: 11px; font-weight: 900; text-align: right; line-height: 1.25; }
.ocnum small { font-size: 9px; margin-left: 1px; }
.others.n3 .ochip { grid-template-columns: 26px minmax(0, 1fr); }
.others.n3 .ochip .ocart .sprite { width: 26px; height: 26px; }
.others.n3 .ocnum { display: none; }
.peek .mcard { margin: 0; }
.unit.me .tkp { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 2px #ffd25a); }
.board.multi .unit .hpn { font-size: 11px; }

/* 점수판 3~4인 */
.sbtn.multi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.sbm { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 10px; border: 2px solid transparent; background: #f8f6fa; }
.sbm b { font-size: 15px; }
.sbm.lead { border-color: #f2c94c; } .sbm.me { background: #fff6d8; }
.sbm.p1 b { color: #2d6fa3; } .sbm.p2 b { color: #c0392b; } .sbm.p3 b { color: #2f8a3c; } .sbm.p4 b { color: #a87a00; }

/* 시작 화면 4인 */
.modecard.four { grid-column: 1 / -1; margin-top: 10px; cursor: default; justify-items: stretch; text-align: center; }
.fourh { display: flex; justify-content: center; align-items: center; gap: 8px; }
.fourh .mi { font-size: 26px; }
.newtag { font-size: 10px; font-weight: 900; background: #ffd25a; color: #2a2320; border-radius: 6px; padding: 2px 6px; }
.seg { display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: wrap; }
.segl { font-size: 12px; font-weight: 900; color: var(--muted); margin-right: 4px; }
.seg button { border: 2px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 800; color: var(--text); }
.seg button.on { border-color: var(--p); background: var(--p); color: #fff; }
.fourseats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 12px; font-weight: 800; }
.fourseats span { display: flex; align-items: center; gap: 4px; justify-content: center; background: #f8f6fa; border-radius: 8px; padding: 4px; }
.modecard.four .btn { justify-self: center; margin-top: 4px; }

/* 업적 표와 획득 팝업 (2026-10-07). 희귀도: 일반 · 희귀 · 영웅 · 전설 */
.r-common { --rc: #6f8f6a; --rb: #eef5ea; }
.r-rare { --rc: #2d6fa3; --rb: #e6f0fa; }
.r-epic { --rc: #8a4fc4; --rb: #f2e9fb; }
.r-legend { --rc: #c98a00; --rb: #fff6d6; }
.achtablewrap { overflow-x: auto; max-height: 60vh; overflow-y: auto; margin: 0 -4px; }
.achtable { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.achtable th { position: sticky; top: 0; background: #fff; text-align: left; font-size: 10.5px; color: var(--muted); padding: 4px 3px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.achtable td { padding: 5px 3px; border-bottom: 1px solid var(--line); vertical-align: top; }
.achtable td small { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; margin-top: 1px; }
.achtable td.achic { font-size: 18px; width: 22px; }
.achtable td.num { text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.achtable tr td:first-child { border-left: 3px solid var(--rc); }
.rar { display: inline-block; font-size: 10px; font-weight: 900; color: var(--rc); background: var(--rb); border: 1.5px solid var(--rc); border-radius: 7px; padding: 0 5px; white-space: nowrap; }
.achpop { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 72px); transform: translate(-50%, -12px) scale(.9); z-index: 9999; display: flex; align-items: center; gap: 10px;
  min-width: 220px; max-width: calc(100vw - 32px); padding: 10px 16px 10px 12px; border-radius: 16px; background: var(--rb); border: 3px solid var(--rc); color: #2a2320;
  box-shadow: 0 6px 0 #0000002a, 0 0 0 4px #ffffffb0; animation: achin .35s cubic-bezier(.2, 1.4, .4, 1) forwards; pointer-events: none; }
.achpop .apic { font-size: 30px; line-height: 1; }
.achpop .aptx { display: grid; line-height: 1.2; }
.achpop small { font-size: 10.5px; font-weight: 900; color: var(--rc); letter-spacing: .04em; }
.achpop b { font-size: 17px; font-weight: 900; }
.achpop em { font-style: normal; font-size: 11px; color: #6b6370; }
.achpop.r-epic { box-shadow: 0 6px 0 #0000002a, 0 0 18px 4px #b07be0aa; }
.achpop.r-legend { background: linear-gradient(135deg, #fff6d6, #ffe48a); box-shadow: 0 6px 0 #0000002a, 0 0 26px 8px #ffcf4acc; }
.achpop.r-legend .apic { animation: hop .6s ease-in-out 3; }
.achpop.out { animation: achout .45s ease-in forwards; }
@keyframes achin { to { transform: translate(-50%, 0) scale(1); opacity: 1; } from { opacity: 0; } }
@keyframes achout { from { transform: translate(-50%, 0) scale(1); opacity: 1; } to { transform: translate(-50%, -16px) scale(.95); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .achpop, .achpop.out, .achpop.r-legend .apic { animation-duration: .01s; } }
/* 배틀 중 업적 킬로그 (2026-11-09 사용자): 오른쪽 위에 작게 한 줄씩 */
.achfeed { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: 8px; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: min(260px, calc(100vw - 24px)); pointer-events: none; }
.achkf { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px 3px 6px; border-radius: 9px; background: #ffffffeb; border: 1.5px solid var(--rc); border-left-width: 4px; color: #2a2320;
  font-size: 11.5px; line-height: 1.25; white-space: nowrap; box-shadow: 0 2px 6px #0000002e; opacity: 0; transform: translateX(24px); animation: kfin .28s ease-out forwards; }
.achkf .kfwho { font-weight: 900; overflow: hidden; text-overflow: ellipsis; max-width: 84px; flex: 0 1 auto; }
.achkf .kfic { font-size: 14px; line-height: 1; flex: none; }
.achkf .kfnm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.achkf em { font-style: normal; font-weight: 900; font-size: 10.5px; color: var(--rc); flex: none; }
.achkf.r-legend { background: linear-gradient(90deg, #fff6d6f0, #ffe48af0); box-shadow: 0 2px 6px #0000002e, 0 0 10px 2px #ffcf4a99; }
.achkf.r-epic { box-shadow: 0 2px 6px #0000002e, 0 0 8px 1px #b07be088; }
.achkf.out { animation: kfout .4s ease-in forwards; }
@keyframes kfin { to { opacity: 1; transform: none; } }
@keyframes kfout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) { .achkf, .achkf.out { animation-duration: .01s; } }

/* 게임 이름 (2026-10-07: 제네시스:에덴 → 몽토) */
.gametitle { text-align: center; font-size: 26px; font-weight: 900; letter-spacing: 1px; margin: 2px 0 6px; background: linear-gradient(90deg, #4f79c7, #8a6bd1, #4fae5a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wgame { font-size: 12px; font-weight: 800; letter-spacing: 2px; opacity: .75; margin-bottom: 2px; }

/* 온라인 대전 (2026-10-07) */
.modecard.online { margin-top: 10px; }
.netjoin { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 4px; }
.netjoin input { width: 120px; border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 900; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; text-align: center; color: var(--text); background: #fff; }
.lobby .netjoin input { width: auto; flex: 1; min-width: 0; font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.netjoin .btn { margin: 0; }
.roomcode { display: grid; justify-items: center; margin: 6px 0 4px; }
.roomcode small { color: var(--muted); font-weight: 700; }
.roomcode b { font-size: 44px; letter-spacing: 10px; color: var(--p); line-height: 1.1; }
.lobby { display: grid; gap: 10px; text-align: center; }
.lobby .btn { justify-self: center; }
.lobbyseats { display: grid; gap: 6px; }
.lseat { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; text-align: left; }
.lseat.empty { opacity: .65; border-style: dashed; }
.lseat span { flex: 1; }
.lseat em { font-style: normal; font-size: 12px; color: #b4505a; font-weight: 700; }
.lseat em.on { color: #2f8a3c; }
.lseat small { font-size: 11px; color: var(--muted); font-weight: 800; }
.netwait .netdots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.netwait .netdots span { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; animation: netpulse 1.4s ease-in-out infinite; }
@keyframes netpulse { 50% { opacity: .35; } }

/* 미진화 몬스터 이름 (2026-10-07) */
.monname { font-size: 15px; font-weight: 900; color: var(--p); }

/* 능력 종류 표시 (2026-10-07 요청: 특수능력인지 패시브인지) */
.akind { margin-left: 6px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 8px; background: #e7e0f5; color: #4b3a78; vertical-align: 1px; }
.akind.pas { background: #fde8c8; color: #8a5a10; }

/* 온라인 1인 화면 (2026-10-07): 내 차례 알림 */
.myturn { position: fixed; left: 50%; top: 50%; white-space: nowrap; font-size: 22px !important; transform: translate(-50%, -50%); z-index: 60; background: #3b2a5c; color: #fff; font-weight: 900; font-size: 20px; padding: 14px 22px; border-radius: 16px; box-shadow: 0 8px 24px #0005; pointer-events: none; animation: myturn 1.6s ease both; }
@keyframes myturn { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.9); } 15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%); } }

.bodygrid .dc.on.inner { background: #3b8be8; color: #fff; }

/* 배팅 (2026-10-07): 화면 가운데 큰 창 */
.betov { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: #1d162acc; animation: betin .25s ease-out; }
.betov .betpanel { width: min(420px, 100%); margin: 0; box-shadow: 0 10px 40px #0007; }
.betov .betpanel h2 { font-size: 22px; text-align: center; }
.betov .big { grid-template-columns: 1fr; gap: 10px; }
.betov .big button { font-size: 18px; padding: 16px 10px; background: var(--pc, var(--p)); }
.betov .big button.alt { background: var(--p-soft); color: var(--p); }
@keyframes betin { from { opacity: 0; } to { opacity: 1; } }
/* 진화 목록 재료 (2026-10-07): 내 재료만 크게 */
.elmats { gap: 6px; }
.elm { font-size: 13px; font-weight: 700; padding: 2px 7px; border: 1px solid #e3dcea; }
.elm small { font-size: 10px; color: var(--muted); }
.elm.ok { background: #e6f6ea; border-color: #8fd0a0; color: #2f8a4a; }

/* 진화 연출 (2026-10-07): 빛에 휩싸였다가 새 모습으로 */
.evoov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #08060ef5; animation: evofade .3s ease-out; cursor: pointer; }
.evoov.out { opacity: 0; transition: opacity .3s; }
.evoov.mutov { background: #000; } /* 2026-11-09 사용자: 변이 때 배경 완전 검게 */
.evobox { text-align: center; color: #fff; width: min(340px, 92vw); }
.evowho { font-size: 20px; font-weight: 900; color: var(--pc); text-shadow: 0 0 8px #fff8; margin-bottom: 6px; }
.evostage { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.evostage .evoart { position: absolute; inset: 45px; display: grid; place-items: center; }
.evostage .evoart svg { width: 150px; height: 150px; }
.evostage .evoart.old { animation: evoold 2.4s ease-in forwards; }
.evostage .evoart.new { opacity: 0; animation: evonew 1.6s ease-out 2.3s forwards; }
.evoglow { position: absolute; inset: 30px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #fff6 35%, transparent 70%); opacity: 0; animation: evoglow 3.2s ease-in-out .6s forwards; }
.evorays { position: absolute; inset: -20px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #fff3 0deg 8deg, transparent 8deg 24deg); opacity: 0; animation: evorays 4.4s linear forwards; }
.evosp { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: rotate(var(--a)) translateY(-40px) scale(0); animation: evosp 1.1s ease-out calc(1s + var(--d)) 3; }
.evoname { margin-top: 8px; font-size: 22px; font-weight: 900; opacity: 0; animation: evofade .5s ease-out 2.9s forwards; }
@keyframes evofade { from { opacity: 0; } to { opacity: 1; } }
@keyframes evoold { 0% { filter: none; transform: scale(1); } 60% { filter: brightness(3) saturate(0); transform: scale(1.05); } 100% { filter: brightness(8) saturate(0); transform: scale(.7); opacity: 0; } }
@keyframes evonew { 0% { opacity: 0; filter: brightness(8) saturate(0); transform: scale(.6); } 50% { opacity: 1; filter: brightness(2); transform: scale(1.12); } 100% { opacity: 1; filter: none; transform: scale(1); } }
@keyframes evoglow { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes evorays { 0% { opacity: 0; transform: rotate(0); } 30% { opacity: .9; } 70% { opacity: .9; } 100% { opacity: 0; transform: rotate(160deg); } }
@keyframes evosp { 0% { transform: rotate(var(--a)) translateY(-30px) scale(0); opacity: 1; } 60% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-115px) scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .evostage .evoart.old { display: none; } .evostage .evoart.new { animation: none; opacity: 1; } .evorays, .evosp, .evoglow { display: none; } .evoname { animation: none; opacity: 1; } }

/* 배틀 결산표 (2026-10-07) */
.sumov { position: fixed; inset: 0; z-index: 58; display: grid; place-items: center; padding: 16px; background: #1d162acc; animation: betin .25s ease-out; overflow-y: auto; }
.sumpanel { width: min(440px, 100%); margin: 0; box-shadow: 0 10px 40px #0007; }
.sumpanel h2 { text-align: center; font-size: 22px; margin-bottom: 2px; }
.sumres { text-align: center; margin: 0 0 10px; color: var(--muted, #6b6070); font-weight: 700; }
.sumhl { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; padding: 7px 10px; margin: 6px 0; border-radius: 12px; background: var(--p-soft, #f1ecff); font-size: 14px; }
.sumhl i { font-style: normal; font-size: 20px; } .sumhl span { font-weight: 700; } .sumhl em { font-style: normal; font-weight: 900; font-size: 17px; margin-left: 4px; }
.sumtab { width: 100%; border-collapse: collapse; margin: 10px 0 12px; font-size: 13px; text-align: center; }
.sumtab th, .sumtab td { padding: 6px 4px; border-bottom: 1px solid #0001; }
.sumtab tr > th:first-child { text-align: left; white-space: nowrap; color: var(--pc); }
.sumtab td { font-weight: 800; font-size: 15px; }
.sumtab .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); margin-right: 5px; }

/* 판 위 공격력(왼쪽)·방어력(오른쪽) (2026-10-07) */
.unit .ust { position: absolute; z-index: 9; transform: translate(-50%, -50%); font-size: 12.5px; font-weight: 900; line-height: 1; text-align: center; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; pointer-events: none; }
.unit .ust.atk { color: #e0262d; }
.unit .ust.def { color: #1f62a8; }
.board.multi .unit .ust { font-size: 11px; -webkit-text-stroke-width: 2.5px; }
.unit.ko .ust { opacity: .4; }

/* 도감 (2026-10-07) */
.dex h4 { margin: 10px 0 6px; font-size: 14px; color: var(--p); }
.dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.dexc { text-align: center; background: var(--p-soft); border-radius: 10px; padding: 6px 2px; font-size: 13px; }
.dexc small { display: block; color: var(--muted); font-size: 10px; }
.dexrow { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dexart { display: grid; place-items: center; align-self: start; }
.dext h3 { margin: 0 0 2px; font-size: 15px; }
.dexno { display: inline-block; min-width: 18px; margin-right: 5px; padding: 0 4px; border-radius: 6px; background: var(--p); color: #fff; font-size: 11px; text-align: center; }
.dexab { font-size: 13px; } .dexk { font-size: 10px; padding: 1px 5px; border-radius: 6px; background: var(--p-soft); color: var(--p); font-weight: 800; }
.dexd { font-size: 12px; color: var(--muted); margin-top: 2px; }
.dext details { margin-top: 4px; font-size: 12px; } .dext summary { cursor: pointer; font-weight: 800; color: var(--p); }
.dex2 { padding: 4px 0 4px 8px; border-left: 3px solid var(--p-soft); margin: 4px 0; }
.dex2art { float: left; width: 40px; height: 40px; margin: 0 8px 2px 0; border-radius: 50%; display: inline-flex; }
.dex2::after { content: ''; display: block; clear: both; }
.dexnote, .dexcopy { font-size: 10px; color: var(--muted); }
.dexcopy { margin-top: 12px; text-align: center; }

/* ---- UI 개선안 (2026-10-07, 사용자 시안): 성장 카드 아이콘, 능력치 판과 팬 게이지 분리 ---- */
.card { justify-content: flex-start; align-items: center; text-align: center; gap: 2px; }
.card .effect { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; }
.card .cic { font-size: 22px; line-height: 1.05; filter: drop-shadow(0 1px 0 #0002); }
.card .cic.two { font-size: 16px; letter-spacing: 1px; }
.card .ctx { display: flex; flex-direction: column; font-size: 11px; font-weight: 900; line-height: 1.2; }
.card .ctx .neg { color: #d33; }
.card .ctx .or { font-size: 8.5px; color: var(--muted); font-weight: 700; }
.card .reward { margin-top: auto; width: 100%; background: #f6f2ea; border-radius: 6px; padding: 2px 3px; font-size: 9px; font-weight: 700; color: #4a4038; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.picked, .card:focus-visible { outline: 3px solid #8a63e8; outline-offset: 1px; }
.rscene .deck { display: none; }
.deckn { position: absolute; right: 2px; top: 2px; background: #fff; border: 1.5px solid #2a2320; border-radius: 8px; padding: 0 6px; font-size: 11px; font-weight: 900; line-height: 18px; box-shadow: 0 2px 0 #0002; }
.rscene .scen { width: 100%; height: 100%; }
.rh .rd { font-size: 10px; opacity: .8; }

.mctop { grid-template-columns: 82px minmax(0, 1fr) 54px; gap: 6px; align-items: stretch; }
.mcstats { background: #ffffffd9; border: 1.5px solid #2a232026; border-radius: 12px; padding: 4px 6px; min-width: 0; }
.mcsh { font-size: 11px; font-weight: 900; color: var(--p); }
.mcsrow { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px; align-items: center; } /* 2026-10-08: 좁은 화면에서 숫자가 밀리지 않게 그래프를 위, 숫자를 아래로 */
.mcsrow .mcsgrid { width: 100%; }
.mcstats .mcradar { width: 76px; max-width: none; justify-self: center; }
.mcstats .mcradar .radar { width: 76px; height: 76px; }
.mcsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.mcsgrid span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 2px; align-items: center; background: #f7f4fb; border-radius: 6px; padding: 1px 3px; }
.mcsgrid i { grid-row: 1 / 3; font-style: normal; font-size: 15px; }
.mcsgrid small { font-size: 10px; color: var(--muted); line-height: 1; }
.mcsgrid b { font-size: 15px; line-height: 1.05; }
.mcsgrid .up b { color: #1f9d4c; } .mcsgrid .neg b { color: #d33; } .mcsgrid .zero b { color: #d99a00; }
.fang { position: relative; display: flex; flex-direction: column; align-items: center; background: #fff8e1; border: 1.5px solid #e8c45a; border-radius: 12px; padding: 4px 2px; min-height: 120px; }
.fgh { font-size: 11px; font-weight: 900; display: flex; align-items: center; gap: 1px; }
.fgn { font-size: 20px; font-weight: 900; line-height: 1.1; }
.fang.up .fgn { color: #1f9d4c; }
.fgt { font-size: 8px; color: var(--muted); text-align: center; line-height: 1.15; } .fgt b { display: block; font-size: 12px; color: var(--text); }
.fgcrit { font-size: 8px; color: var(--muted); text-align: center; line-height: 1.15; white-space: nowrap; } .fgcrit b { display: block; font-size: 12px; color: #d2451e; }
.fgbar { position: relative; flex: 1; width: 12px; min-height: 40px; margin: 4px 14px 4px 0; border-radius: 6px; background: #fff; border: 1.5px solid #e0b847; overflow: visible; }
.fgbar > i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px; background: linear-gradient(#ffd25a, #f0a51a); transition: height .5s; }
.fgbar em { position: absolute; left: 15px; transform: translateY(50%); font-style: normal; font-size: 8px; color: var(--muted); line-height: 1; }
.fang .mccheer { right: -2px; top: -6px; }

.ocfan { display: grid; justify-items: center; background: #fff8e1; border-radius: 8px; padding: 1px 5px; line-height: 1.1; }
.ocfan small { font-size: 8px; color: var(--muted); } .ocfan b { font-size: 12px; } .ocfan i { font-style: normal; font-size: 10px; }
.ochip { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.others.n3 .ocfan { display: none; }
.ocnum { white-space: nowrap; }
.gboard .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.region, .card { min-width: 0; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card .ctx { word-break: keep-all; }
.card .reward::before { content: '받는 재료'; display: block; font-size: 7.5px; color: var(--muted); font-weight: 700; line-height: 1.1; }
.card .reward { white-space: normal; padding: 2px 1px; font-size: 8.5px; letter-spacing: -.3px; word-break: keep-all; }
.card { padding-left: 3px; padding-right: 3px; }

/* 2차 진화 표시 (2026-10-07 요청): 1차 그림 그대로, 테두리에 무지개빛 반짝임 (팀 색 테두리는 그대로 보이게 바깥쪽에 얇게) */
@keyframes rainbowflow { to { background-position: 300% 0; } }
@keyframes evotwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.evoring, .mcard.evo2 .mcdir::before, .ochip.evo2 .ocart::before, .gmon.evo2::before {
  content: ''; position: absolute; pointer-events: none; padding: 3px;
  background: linear-gradient(90deg, #ff5a5a, #ffb13b, #ffe14d, #5ee07a, #4fc3ff, #8a7bff, #ff6ad5, #ff5a5a) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rainbowflow 3s linear infinite; filter: drop-shadow(0 0 3px #fff8);
}
/* 2026-10-08: 소형은 말의 원형 테두리(검은 바깥선, 반지름 45/124) 바로 바깥, 중형·대형은 사각형 테두리 바로 바깥 */
.evoring { z-index: 2; box-sizing: border-box; padding: 3px; }
.evoring.round { left: 50%; top: 50%; height: calc(100% * 104 / 124); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; }
.evobox { position: absolute; pointer-events: none; z-index: 2; }
.evoring.sq { inset: -6px; border-radius: 16px; }
.evoring::after, .mcard.evo2 .mcdir::after { content: '✦'; position: absolute; right: -2px; top: -4px; color: #fff6b0; font-size: 12px; text-shadow: 0 0 4px #ffd25a; animation: evotwinkle 1.6s ease-in-out infinite; }
.mcard.evo2 .mcdir { position: relative; }
.mcard.evo2 .mcdir::before { left: -2px; top: -2px; width: 82px; height: 82px; border-radius: 50%; box-sizing: border-box; z-index: 2; }
.mcard.evo2 .mcdir::after { right: auto; left: 66px; top: -6px; z-index: 3; }
.ochip.evo2 .ocart { position: relative; }
.ochip.evo2 .ocart::before { inset: -3px; border-radius: 50%; }
.gmon.evo2::before { inset: -5px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .evoring, .evoring::after, .mcard.evo2 .mcdir::before, .mcard.evo2 .mcdir::after, .ochip.evo2 .ocart::before, .gmon.evo2::before { animation: none; } }
.sico { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.2em; }
.card .cic .sico { width: 26px; height: 26px; }
.card .cic.two .sico { width: 20px; height: 20px; }
.mcsgrid i .sico { width: 18px; height: 18px; }
.mat .ic .sico, .tm .ic .sico { width: 22px; height: 22px; }
.mchl .sico { width: 20px; height: 20px; margin-right: 2px; vertical-align: -3px; }
.fgh .sico { width: 18px; height: 18px; }
.elm .sico { width: 16px; height: 16px; }
.betpeek { width: 100%; margin-top: 10px; }
.betfloat { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); z-index: 60; border: 0; border-radius: 999px; padding: 14px 26px; font-size: 18px; font-weight: 900; color: #fff; background: var(--p); box-shadow: 0 6px 20px #0006; animation: betin .25s ease-out, betpulse 1.6s ease-in-out infinite; }
@keyframes betpulse { 50% { transform: translateX(-50%) scale(1.06); } }

/* 진화 트리 (2026-10-07 요청: 가지 친 트리, 누르면 팝업) */
.modal.etmodal { width: min(440px, 100%); max-height: 94vh; padding: 12px; }
.modal.etmodal h2 { margin: 0 0 4px; }
.etfit { position: relative; margin: 0 auto; overflow: visible; }
.etree { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.etlines { position: absolute; inset: 0; overflow: visible; }
.etlines path { fill: none; stroke: #c6b6ec; stroke-width: 2; }
.etlines path.on { stroke: #f0a321; stroke-width: 3; }
.eth { position: absolute; top: 0; font-size: 11px; font-weight: 800; color: var(--p); background: var(--p-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.etroot { position: absolute; width: 52px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; padding: 4px 0 6px; background: #fff7e0; border: 2px solid #f1d58a; border-radius: 14px; }
.etroot span { width: 100%; text-align: center; font-size: 10px; font-weight: 800; color: #8a6a1d; }
.etn { position: absolute; padding: 0; border: 2px solid #ddd5e7; border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center; overflow: visible; }
.etn svg { width: 100%; height: 100%; border-radius: 50%; }
.etn .etl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; font-size: 9.5px; font-weight: 700; color: var(--text); white-space: nowrap; pointer-events: none; }
.etn.t2 { border: 0; }
.etn.evo2::before, .etbig.evo2::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; padding: 3px;
  background: linear-gradient(90deg, #ff5a5a, #ffb13b, #ffe14d, #5ee07a, #4fc3ff, #8a7bff, #ff6ad5, #ff5a5a) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rainbowflow 3s linear infinite; }
.etn.ready::after, .etkey.ready { color: #2e9d48; }
.etn.ready::after { content: ''; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #3cbf5a; border: 2px solid #fff; }
.etn.mine { box-shadow: 0 0 0 3px #f0a321, 0 0 10px #f0a321aa; }
.etkey.mine { color: #f0a321; }
.etpop { position: fixed; inset: 0; z-index: 400; background: #0006; display: grid; place-items: center; padding: 16px; }
.etpopin { width: min(380px, 100%); max-height: 88vh; overflow: auto; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 12px 40px #0006; }
.etcard h3 { margin: 6px 0 2px; text-align: center; font-size: 17px; }
.etbig { position: relative; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: #f7f3fb; }
.etbig svg { border-radius: 50%; }
.etsz { text-align: center; font-size: 12px; color: var(--muted); }
.etsec { margin: 10px 0 3px; font-size: 12px; font-weight: 800; color: var(--p); }
.etmine { color: #b87400; }
.etpopin .etclose { width: 100%; margin-top: 12px; }
/* 2026-10-08 사용자: 진화 목록·트리·자세히 창에서 닫기 버튼이 스크롤해도 항상 아래에 보이게 */
.modal.stickyclose, .etpopin { max-height: 85vh; max-height: 85dvh; }
.modal.etmodal.stickyclose { max-height: 94vh; max-height: 94dvh; }
.modal.stickyclose .close, .etpopin .etclose { position: sticky; bottom: -16px; z-index: 6; box-shadow: 0 -10px 12px -2px #fff, 0 2px 0 6px #fff; }
.modal.etmodal.stickyclose .close { bottom: -12px; }
.etpopin .etclose { bottom: -14px; }
@media (prefers-reduced-motion: reduce) { .etn.evo2::before, .etbig.evo2::before { animation: none; } }
#stage.evohold { pointer-events: none; }
.moncard .mpfront { font-size: 11px; font-weight: 900; color: #8e5bd0; line-height: 1; margin-bottom: -2px; }
.moncard .mptok { width: 64px; height: 64px; margin: 10px 0 4px; }
.moncard .mpdirs { font-size: 11px; opacity: .8; }
.betov [data-bet] .betmon { display: inline-grid; vertical-align: middle; margin: 0 8px 0 0; }
.sumtab .summon { display: inline-grid; width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; }

/* 계정 (2026-10-07): 첫 화면 로그인 · 게스트 · 회원가입, 위쪽 구석 계정 버튼 */
.subrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acctchip { border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 8px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gatebtns { display: grid; gap: 10px; margin: 14px 0 8px; }
.gatebtns .btn { font-size: 16px; padding: 13px; }
.gatenote { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.gateform { display: grid; gap: 10px; margin-top: 6px; }
.gateform h2 { margin: 0; }
.gateform label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.gateform label small { font-weight: 400; color: var(--muted); }
.gateform input { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; }
.gateform input:focus { outline: none; border-color: var(--p); }
.gateerr { background: #fde8ea; color: #a0303c; border-radius: 8px; padding: 8px 10px; margin: 0; font-size: 13.5px; }
.acctm .acctgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 6px 0; }
.acctm .acctgrid > div { background: #f8f5fb; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.acctm .acctgrid span { font-size: 11.5px; color: var(--muted); }
.acctm .acctgrid b { font-size: 20px; color: var(--p); }
.acctm .acctgrid small { font-size: 11.5px; color: var(--muted); }
.acctm .acctmon i { font-size: 34px; font-style: normal; color: #c9bfd6; }
.acctm .acctmon b { font-size: 15px; }
.accttitles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.accttitles span { font-size: 12px; color: var(--muted); width: 100%; }
.accttitles em { font-style: normal; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; color: #6b3d00; background: linear-gradient(90deg, #ffe08a, #ffb84d); box-shadow: 0 0 0 2px #e8a33a inset; }
body.gating .toolbar { display: none; }

/* 좁아지는 전장 (2026-10-07): 벽 칸 임시 표시 (사용자 애니메이션 전까지) */
.board .bc.wallc { border-color: transparent; }
/* 숲 (사용자 그림): 민트 땅 + 장식 + 안쪽 칸과 맞닿은 쪽에 모래 가장자리 */
.fground { position: absolute; inset: 0 -1px -1px 0; background: #acd2bf; overflow: hidden; pointer-events: none; }
.fdeco { position: absolute; z-index: 1; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 46%; height: auto; }
.fdeco.tree { width: 76%; top: 48%; }
.fdeco.tree2 { width: auto; height: 88%; top: 48%; }
.fdeco.rock { width: 60%; } .fdeco.branch { width: 52%; } .fdeco.stump { width: 44%; }
.fsand { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; }
.fsand.r { top: 0; bottom: 0; right: 0; width: 30%; }
.fsand.l { top: 0; bottom: 0; left: 0; width: 30%; transform: scaleX(-1); }
.fsand.t { left: 0; right: 0; top: 0; height: 30%; }
.fsand.b { left: 0; right: 0; bottom: 0; height: 30%; transform: scaleY(-1); }
.fcorner { position: absolute; background: #cfc5ae; }
.fcorner.in { width: 25%; height: 25%; }
.fcorner.out { width: 25%; height: 25%; }
.fcorner.br { right: 0; bottom: 0; } .fcorner.bl { left: 0; bottom: 0; }
.fcorner.tr { right: 0; top: 0; } .fcorner.tl { left: 0; top: 0; }
.fcorner.in.br { border-top-left-radius: 20%; } .fcorner.in.bl { border-top-right-radius: 20%; }
.fcorner.in.tr { border-bottom-left-radius: 20%; } .fcorner.in.tl { border-bottom-right-radius: 20%; }
.fspread { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fspread.dr { transform: scaleX(-1); } .fspread.dt { transform: rotate(90deg); } .fspread.db { transform: rotate(-90deg); }
.fspread img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
/* 1 → 2 → 3 차례로 숲이 쏟아지고, 다 덮이면 숲 칸이 됨 (약 1.5초) */
.board .bc.wnew .fs1 { animation: fsp 1.5s linear both; animation-delay: var(--wd, 0ms); }
.board .bc.wnew .fs2 { animation: fsp2 1.5s linear both; animation-delay: var(--wd, 0ms); }
.board .bc.wnew .fs3 { animation: fsp3 1.5s linear both; animation-delay: var(--wd, 0ms); }
.board .bc.wnew .fground { animation: fgin 1.5s ease both; animation-delay: var(--wd, 0ms); }
@keyframes fsp { 0% { opacity: 0; } 4%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes fsp2 { 0%, 28% { opacity: 0; } 30%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes fsp3 { 0%, 52% { opacity: 0; } 54%, 76% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes fgin { 0%, 70% { opacity: 0; } 86%, 100% { opacity: 1; } }
/* 이번 턴에 덮인 칸: 그 턴 동안 빨간 테두리, 덮이는 연출이 끝나면 세 번만 반짝 */
.board .bc.wnew .fred { position: absolute; inset: 0 -1px -1px 0; z-index: 2; pointer-events: none; border: 0 solid #e8322a; opacity: 0;
  animation: wred 3.3s linear both; animation-delay: calc(var(--wd, 0ms) + 1.4s); }
@keyframes wred { 0% { opacity: 0; } 8%, 20% { opacity: 1; } 28% { opacity: .15; } 36%, 48% { opacity: 1; } 56% { opacity: .15; } 64%, 76% { opacity: 1; } 84% { opacity: .15; } 100% { opacity: 1; } }
.widetext.walltext { animation-duration: 2.6s; }
.battlewrap .arena .board { width: 100%; }

/* 전개도 (2026-10-07 알아보기 쉽게): 머리 빨간 테두리 · 몸통 노랑 · 꼬리 파랑 · 공격 칸 화살표 */
.bodygrid { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bodygrid .bgfront { font-size: 9px; font-weight: 900; color: #8e5bd0; line-height: 1; }
.bodygrid .bggrid { display: grid; gap: 1px; justify-content: center; }
.bodygrid .dc { width: 17px; height: 17px; border-radius: 4px; background: #f1edf6; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #c9bfd6; line-height: 1; }
.bodygrid .dc.on { background: #ffd25a; color: #6b4300; border: 1px solid #2a2320; }
.bodygrid .dc.x2 { background: #e8322a; color: #fff; font-size: 8px; letter-spacing: -.5px; }
.bodygrid .dc.headc { background: #fff; border: 2px solid #e5484d; }
.bodygrid .dc.headc svg { width: 15px; height: 15px; }
.bodygrid .dc.bodyc { background: #f2c46b; border: 1px solid #2a2320; color: #5a3d00; font-size: 7px; }
.bodygrid .dc.tailc { background: #2d6fa3; border: 1px solid #2a2320; color: #fff; font-size: 6px; }

/* 튜토리얼 스탯 글자 색 (2026-10-07 요청) */
.coach .kst { font-weight: 900; white-space: nowrap; }
.coach .kst .sico { margin-right: 2px; }
.kst.katk { color: #d6332a; } .kst.kdef { color: #2d6fd6; } .kst.khp { color: #2f8a3c; } .kst.kheal { color: #d0548a; }
.kst.kmove { color: #c96a00; } .kst.krot { color: #7a4fd0; } .kst.kdir { color: #a8740a; } .kst.kfan { color: #c2307a; }
/* 튜토리얼 추천 (2026-10-08): 끝까지 안 했으면 노란 테두리, 로그인·게스트 시작 때 한 번 반짝 */
.tutbtn.hint { border-color: #e0b23a; background: #fff9e6; }
.tutbtn.tutspot { animation: tuthint 1.1s ease-in-out 1; }
@keyframes tuthint { 0%,100% { box-shadow: 0 0 0 0 #8e5bd000; transform: none; } 50% { box-shadow: 0 0 0 6px #8e5bd066, 0 0 18px 4px #ffd25a; transform: scale(1.04); background: #fff6d6; } }
@media (prefers-reduced-motion: reduce) { .tutbtn.tutspot { animation: none; outline: 3px solid #ffd25a; } }

/* 튜토리얼 말풍선 (2026-10-07 요청): 나타날 때만 흔들림, 여백에 말하는 몽토 */
.coach .cbub.cin { animation: cbubin .5s ease-out; }
@keyframes cbubin { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(-2deg); } 45% { opacity: 1; transform: translateX(-50%) rotate(1.6deg); } 70% { transform: translateX(-50%) rotate(-.8deg); } 100% { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .coach .cbub.cin { animation: none; } }
.cbub .cava { position: absolute; left: 10px; top: 32px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--p); object-fit: cover; background: #d6c2ff; }
.cbub .ctext, .cbub .chint { margin-left: 56px; min-height: 46px; }
.cbub .chint { min-height: 0; }

/* 첫 화면 (사용자 시안 2026-10-07): 연보라 그림 띠 + 연분홍 바탕 + 연보라 버튼 */
body.gating { background: #d9d0fb; }
body.gating .app { max-width: none; padding: 0 0 calc(8px + env(safe-area-inset-bottom)); }
body.gating .top, body.gating .notice, body.gating .scorebar, body.gating .timebar, body.gating .players { display: none; }
/* 첫 화면 (2026-10-09 사용자 시안을 코드로): 연보라 하늘 + 보라 산 + 구름, 큰 몽토 글씨, 반짝 알약 버튼 */
.gate { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 40px); overflow: hidden;
  background: linear-gradient(180deg, #c4b6f6 0%, #cbbff8 55%, #d9d0fb 100%); }
.gsky { position: absolute; inset: 0; pointer-events: none; }
.gsky svg { position: absolute; left: 0; width: 100%; }
.gsky .gmtn { bottom: 0; height: 52%; }
.gsky .gcloud { bottom: 0; height: 30%; }
.gatebody { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding: clamp(14px, 4svh, 40px) 16px clamp(16px, 8svh, 80px); flex: 1;
  display: flex; flex-direction: column; justify-content: center; }
.gtitle { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; line-height: 1; }
.gtt { position: relative; z-index: 0; font-size: clamp(64px, 22vw, 104px); font-weight: 900; letter-spacing: .02em; color: #fff; }
.gtt::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: #2c1a5c;
  text-shadow: 0.090em 0.000em 0 #2c1a5c, 0.087em 0.023em 0 #2c1a5c, 0.078em 0.045em 0 #2c1a5c, 0.064em 0.064em 0 #2c1a5c, 0.045em 0.078em 0 #2c1a5c, 0.023em 0.087em 0 #2c1a5c, 0.000em 0.090em 0 #2c1a5c, -0.023em 0.087em 0 #2c1a5c, -0.045em 0.078em 0 #2c1a5c, -0.064em 0.064em 0 #2c1a5c, -0.078em 0.045em 0 #2c1a5c, -0.087em 0.023em 0 #2c1a5c, -0.090em 0.000em 0 #2c1a5c, -0.087em -0.023em 0 #2c1a5c, -0.078em -0.045em 0 #2c1a5c, -0.064em -0.064em 0 #2c1a5c, -0.045em -0.078em 0 #2c1a5c, -0.023em -0.087em 0 #2c1a5c, -0.000em -0.090em 0 #2c1a5c, 0.023em -0.087em 0 #2c1a5c, 0.045em -0.078em 0 #2c1a5c, 0.064em -0.064em 0 #2c1a5c, 0.078em -0.045em 0 #2c1a5c, 0.087em -0.023em 0 #2c1a5c, 0.060em 0.000em 0 #2c1a5c, 0.055em 0.023em 0 #2c1a5c, 0.042em 0.042em 0 #2c1a5c, 0.023em 0.055em 0 #2c1a5c, 0.000em 0.060em 0 #2c1a5c, -0.023em 0.055em 0 #2c1a5c, -0.042em 0.042em 0 #2c1a5c, -0.055em 0.023em 0 #2c1a5c, -0.060em 0.000em 0 #2c1a5c, -0.055em -0.023em 0 #2c1a5c, -0.042em -0.042em 0 #2c1a5c, -0.023em -0.055em 0 #2c1a5c, -0.000em -0.060em 0 #2c1a5c, 0.023em -0.055em 0 #2c1a5c, 0.042em -0.042em 0 #2c1a5c, 0.055em -0.023em 0 #2c1a5c, 0.140em 0.000em 0 #ece6ff, 0.135em 0.036em 0 #ece6ff, 0.121em 0.070em 0 #ece6ff, 0.099em 0.099em 0 #ece6ff, 0.070em 0.121em 0 #ece6ff, 0.036em 0.135em 0 #ece6ff, 0.000em 0.140em 0 #ece6ff, -0.036em 0.135em 0 #ece6ff, -0.070em 0.121em 0 #ece6ff, -0.099em 0.099em 0 #ece6ff, -0.121em 0.070em 0 #ece6ff, -0.135em 0.036em 0 #ece6ff, -0.140em 0.000em 0 #ece6ff, -0.135em -0.036em 0 #ece6ff, -0.121em -0.070em 0 #ece6ff, -0.099em -0.099em 0 #ece6ff, -0.070em -0.121em 0 #ece6ff, -0.036em -0.135em 0 #ece6ff, -0.000em -0.140em 0 #ece6ff, 0.036em -0.135em 0 #ece6ff, 0.070em -0.121em 0 #ece6ff, 0.099em -0.099em 0 #ece6ff, 0.121em -0.070em 0 #ece6ff, 0.135em -0.036em 0 #ece6ff; }
.gspk { position: relative; width: clamp(34px, 10vw, 52px); height: clamp(50px, 15vw, 76px); flex: none; }
.gspk b { position: absolute; height: 9px; border-radius: 6px; background: #fff3a6; }
.gspk.l b:nth-child(1) { width: 52%; top: 8%; right: 20%; transform: rotate(35deg); }
.gspk.l b:nth-child(2) { width: 66%; top: 44%; right: 6%; transform: rotate(8deg); }
.gspk.l b:nth-child(3) { width: 52%; top: 80%; right: 18%; transform: rotate(-22deg); }
.gspk.r b:nth-child(1) { width: 52%; top: 8%; left: 20%; transform: rotate(-35deg); }
.gspk.r b:nth-child(2) { width: 66%; top: 44%; left: 6%; transform: rotate(-8deg); }
.gspk.r b:nth-child(3) { width: 52%; top: 80%; left: 18%; transform: rotate(22deg); }
.gate .gatebtns { position: relative; display: grid; gap: clamp(12px, 2.4svh, 20px); margin: clamp(70px, 15svh, 130px) 0 12px; }
.gpeek { position: absolute; z-index: 0; left: 50%; bottom: 100%; width: clamp(150px, 44vw, 210px); height: auto; margin-bottom: clamp(-34px, -8vw, -26px); transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.gbtn { position: relative; z-index: 1; display: flex; align-items: center; gap: .5em; width: 100%; min-height: clamp(58px, 9svh, 72px); padding: 8px 46px 8px 22px;
  border: 3px solid var(--gb); border-radius: 999px; background: linear-gradient(180deg, var(--g1), var(--g2)); color: var(--gt);
  font: inherit; font-weight: 900; font-size: clamp(21px, 6.4vw, 27px); letter-spacing: .02em; cursor: pointer; overflow: hidden;
  box-shadow: 0 4px 0 var(--gb), 0 8px 14px #3a227033, inset 0 -5px 0 #0000001a; transition: transform .08s, filter .15s, box-shadow .08s; }
.gbtn::before { content: ''; position: absolute; left: 7%; right: 18%; top: 5px; height: 32%; border-radius: 999px; background: linear-gradient(180deg, #ffffffcc, #ffffff22); pointer-events: none; }
.gbtn::after { content: ''; position: absolute; right: 9%; top: 9px; width: 10px; height: 6px; border-radius: 50%; background: #fffc; pointer-events: none; }
.gbtn > span:not(.gchev) { flex: 1; text-align: center; position: relative; }
.gbtn img { position: relative; height: 1.5em; width: auto; flex: none; }
.gchev { position: absolute; right: 18px; top: 50%; transform: translateY(-54%); font-size: 1.35em; line-height: 1; color: var(--gb); }
.gbtn.gy { --g1: #ffe27c; --g2: #f5b931; --gb: #5a3410; --gt: #fff; min-height: clamp(66px, 11svh, 86px); font-size: clamp(25px, 8vw, 34px);
  text-shadow: -2.5px 0 #5a3410, 2.5px 0 #5a3410, 0 -2.5px #5a3410, 0 2.5px #5a3410, -2px -2px #5a3410, 2px 2px #5a3410, -2px 2px #5a3410, 2px -2px #5a3410, 0 4px #5a3410; }
.gbtn.gp { --g1: #cbbaff; --g2: #9a80ee; --gb: #3b2477; --gt: #2a1660; margin: 0 4%; width: 92%; }
.gbtn.gg { --g1: #c6f5b3; --g2: #84d877; --gb: #23552a; --gt: #173d1c; margin: 0 4%; width: 92%; }
.gbtn.gp, .gbtn.gg { text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff, -1.5px -1.5px #fff, 1.5px 1.5px #fff, -1.5px 1.5px #fff, 1.5px -1.5px #fff; }
.gbtn:hover { filter: brightness(1.04); }
.gbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gb), 0 3px 6px #3a227033, inset 0 -5px 0 #0000001a; }
.gbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gate .gatenote { position: relative; font-size: 12.5px; color: #3b2a66; margin: 8px 2px 0; padding: 7px 10px; line-height: 1.5; background: #ffffffb3; border-radius: 10px; }
.gate.gform .gtt { font-size: clamp(48px, 15vw, 72px); }
.gate .gateform { position: relative; background: #fff; border: 3px solid #3b2477; border-radius: 18px; padding: 14px; margin-top: 16px; box-shadow: 0 4px 0 #3b2477; }
.gate .gateform h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.gate .gateform h2 img { height: 30px; width: auto; }
body.gating .copy { margin-top: 14px; }

/* 랭크 (2026-10-07) */
.rbadge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--rc); color: #fff; font-weight: 900; font-size: 12.5px; text-shadow: 0 1px 0 #0004; white-space: nowrap; }
.acctrank { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 8px; margin: 10px 0 4px; padding: 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.acctrank .rl { font-size: 12px; font-weight: 800; color: var(--muted); }
.acctrank b { font-size: 16px; text-align: right; }
.acctrank .rbar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #eee6f6; overflow: hidden; }
.acctrank .rbar i { display: block; height: 100%; border-radius: 4px; }
.acctrank small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.rankres { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 4px; padding: 10px; border-radius: 12px; background: #f7f2ff; border: 1.5px solid #e2d6f7; font-size: 13.5px; text-align: center; }
.rankres .up { color: #1f9a4a; } .rankres .down { color: #d33; }
.rankres small { color: var(--muted); font-size: 11px; }

/* 위쪽 내 프로필 (2026-10-07 요청: 더 귀엽게, 가장 많이 쓴 몬스터 얼굴) */
.acctchip { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; padding: 2px 9px 2px 2px; border: 2px solid #ffd3ef; background: linear-gradient(180deg, #fff9fd, #f3e9ff); color: #5b3a9e; font-size: 11.5px; font-weight: 900; box-shadow: 0 2px 0 #0003; cursor: pointer; transition: transform .15s; }
.acctchip:hover { transform: translateY(-1px) rotate(-2deg); }
.acctchip:active { transform: scale(.95); }
.acctchip .cav { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid #c9a8ff; display: grid; place-items: center; overflow: hidden; }
.acctchip .cav svg, .acctchip .cav img { width: 22px; height: 22px; }
.acctchip .cnick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctchip .ctier { flex: none; font-size: 12px; line-height: 1; }
/* 랭크 티어 아이콘 (사용자 그림, 2026-10-08) */
.rico { width: 2em; height: 2em; object-fit: contain; vertical-align: middle; margin: -.3em 0; filter: drop-shadow(0 1px 1px #0005); }
.rbadge .rico { margin: -.45em 0 -.45em -6px; }
.ctier .rico { width: 22px; height: 22px; margin: 0; }
body.insetup .acctchip .ctier .rico { width: 28px; height: 28px; }
.rbadge.big { font-size: 15px; padding: 3px 12px 3px 6px; }
.rbadge.big .rico { width: 48px; height: 48px; margin: -12px 0; }
/* 2026-10-08 사용자: 프로필 창 랭크 아이콘 더 크게 */
.acctrank .rbadge.big { margin: 8px 0; }
.acctrank .rbadge.big .rico { width: 64px; height: 64px; margin: -16px 2px -16px -4px; }

/* 성장 장소 배경 (사용자 그림 그대로, 2026-10-08): 카드·몬스터는 예전 크기 그대로 그 위에 */
.region.mountain, .region.jungle, .region.meadow, .region.plaza { background-size: cover; background-position: center; background-repeat: no-repeat; }
.region .rh { background: #fffd; border-radius: 8px; padding: 1px 7px; }
.region .rscene { justify-content: flex-start; }

/* 첫 화면 버튼 철-컹 (2026-10-08): 화면이 살짝 흔들리고 어두워졌다 바뀜 */
body.gclang .gate { animation: gclang .28s ease-in forwards; }
@keyframes gclang { 0% { transform: none; } 25% { transform: translateY(3px); } 50% { transform: translateY(-2px); } 100% { transform: none; opacity: .3; filter: brightness(.6); } }
@media (prefers-reduced-motion: reduce) { body.gclang .gate { animation: none; } }

/* 랭크 대전(매칭)·일반 대전, 팀 옮기기 (2026-10-08) */
.modecard.online.ranked { border-color: #d6a419; background: linear-gradient(180deg, #fffaf0, #fff); }
.modecard.online.ranked b { color: #b07d0c; }
.seg.wrap { flex-wrap: wrap; justify-content: center; }
.lteams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lteam { display: grid; gap: 6px; align-content: start; border-radius: 12px; padding: 6px; background: #eef6ff; }
.lteam.t1 { background: #fff0f0; }
.lteam h3 { margin: 0; font-size: 14px; }
.lteam .lseat { padding: 6px 8px; gap: 5px; flex-wrap: wrap; font-size: 12px; }
.lseat.me { border-color: var(--p); }
.mwait .mspin { font-size: 46px; animation: mspin 1.6s ease-in-out infinite; }
@keyframes mspin { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-8px) rotate(8deg); } }
.mseats { display: flex; justify-content: center; gap: 8px; }
.mseats span { width: 42px; height: 42px; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font-weight: 900; color: var(--muted); }
.mseats span.in { border-style: solid; border-color: #2f8a3c; color: #2f8a3c; background: #effaf0; }
.mseats span.me { border-color: var(--p); color: var(--p); }
.mwait .mleft { font-size: 18px; color: var(--p); }
@media (prefers-reduced-motion: reduce) { .mwait .mspin { animation: none; } }

/* 진화 트리 재료 (2026-10-08): 이름 아래 작은 재료 아이콘, 모였으면 초록 */
.etn .etl { display: grid; justify-items: center; }
.etn .etm { display: flex; gap: 1px; margin-top: 1px; }
.etn .etm i { position: relative; display: grid; place-items: center; width: 13px; height: 13px; font-style: normal; font-size: 10px; border-radius: 4px; background: #f3eef9; }
.etn .etm i.ok { background: #d9f4df; box-shadow: inset 0 0 0 1px #3cbf5a; }
.etn .etm i.tm { box-shadow: inset 0 0 0 1px #c08a2a; }
.etn .etm i.tm.ok { box-shadow: inset 0 0 0 1px #3cbf5a; }
.etn .etm .sico { width: 11px; height: 11px; }
.etn .etm b { position: absolute; right: -3px; bottom: -3px; font-size: 7.5px; line-height: 1; background: #fff; border: 1px solid #ddd5e7; border-radius: 4px; padding: 0 1px; color: var(--text); }
/* 2026-10-08: 내 카드의 소형 말도 원판 테두리(반지름 45/124) 바로 바깥에 무지개 */
.mcard.evo2 .mcdir:not(.bigm)::before { left: 6px; top: 6px; width: 66px; height: 66px; }
.mcard.evo2 .mcdir:not(.bigm)::after { left: 60px; top: 2px; }

/* 배틀 결산표: 이번 배틀 점수왕 (2026-10-08) */
.sumstar { display: grid; justify-items: center; gap: 4px; margin: 4px 0 8px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #fff6d6, #fffdf5); border: 2px solid #f0c64a; }
.sumstar-h { font-weight: 900; color: #a8760a; font-size: 14px; }
.sumstar-h em { font-style: normal; color: #d9480f; margin-left: 4px; }
.sumstar-m { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sumstar-m > div { display: grid; justify-items: center; gap: 1px; }
.sumstar-m .gmon { position: relative; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; border: 3px solid var(--pc); background: #fff; animation: starbob 1.6s ease-in-out infinite; }
.sumstar-m .gmon svg { width: 62px; height: 62px; }
.sumstar-m b { font-size: 13px; color: var(--pc); }
.sumstar-m small { font-size: 11px; color: var(--muted); }
@keyframes starbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sumstar-m .gmon { animation: none; } }
/* 팀전 결과 (2026-10-08 요청): 팀 점수 막대가 차오르고, MVP와 우승 팀 */
.tteams { display: grid; gap: 8px; margin: 10px 0 4px; opacity: .35; transition: opacity .4s; }
.tteams.on { opacity: 1; }
.tteam { border: 2px solid #9cc0e0; border-radius: 12px; padding: 6px 8px; background: #fff; transition: transform .3s, box-shadow .3s; }
.tteam.t1 { border-color: #e7a59c; }
.tteam.won { transform: scale(1.03); box-shadow: 0 0 0 3px #ffc21a, 0 4px 12px #e8b40055; }
.tth { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.tth > b { font-size: 14px; font-weight: 900; color: #2d6fa3; }
.tteam.t1 .tth > b { color: #c0392b; }
.tth em { margin-left: auto; font-style: normal; font-size: 22px; font-weight: 900; display: inline-block; }
.ttm { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; padding: 1px 6px 1px 2px; border-radius: 99px; background: #f3eff7; transition: transform .25s, background .25s; }
.ttm.go { transform: translateY(-3px) scale(1.08); background: #ffe9a3; }
.ttm.in { background: #e9f6ea; }
.ttbar { height: 12px; border-radius: 99px; background: #efe8f6; margin-top: 5px; overflow: hidden; }
.ttbar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #6fa8dc, #2d6fa3); }
.tteam.t1 .ttbar i { background: linear-gradient(90deg, #f19a8e, #c0392b); }
.tcol.feed { box-shadow: 0 0 0 3px #ffc21a; }
.tally .tlate { visibility: hidden; }
.tally .tlate.show { visibility: visible; animation: tpop .4s ease-out; }
/* 결산 업적 (2026-10-09 사용자): 등급 표시, 내 영웅 업적 빠른 팝업, 전설 업적 빠밤~ 팝업 */
.tline.badge b small { font-size: 10px; font-weight: 900; margin-right: 3px; color: #8a6bd1; }
.tline.badge.r-legend b small { color: #c98a00; }
.tline.badge.r-common b small, .tline.badge.r-rare b small { color: #8a8290; }
.tline.badge.r-legend.pop { background: linear-gradient(90deg, #fff6d6, #ffe48a); }
.tline.badge.r-epic.pop { background: #f1e7ff; }
.achpop.quick { animation-duration: .25s; }
.legpop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: radial-gradient(circle, #2a1d0055, #000a); animation: lpfade .25s ease-out; cursor: pointer; }
.legpop .lpin { display: grid; justify-items: center; gap: 6px; padding: 18px 26px 16px; min-width: 230px; max-width: calc(100vw - 32px); border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, #fffbe8, #ffe48a); border: 3px solid #e8b400; box-shadow: 0 0 40px 12px #ffcf4acc, 0 8px 0 #0000002a; animation: lpin .55s cubic-bezier(.3,1.7,.5,1); }
.legpop small { font-size: 12px; font-weight: 900; color: #a06a00; letter-spacing: .1em; }
.legpop .lpic { font-size: 54px; line-height: 1.1; animation: hop .6s ease-in-out 3; }
.legpop b { font-size: 22px; font-weight: 900; }
.legpop .lpwho { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 15px; padding: 3px 12px 3px 4px; border-radius: 999px; background: #fff; border: 2px solid var(--p, #e8b400); }
.legpop .lpwho.p1 { --p: var(--p1); } .legpop .lpwho.p2 { --p: var(--p2); } .legpop .lpwho.p3 { --p: var(--p3); } .legpop .lpwho.p4 { --p: var(--p4); }
.legpop em { font-style: normal; font-weight: 900; font-size: 18px; color: #c45a00; }
.legpop.out { animation: lpout .35s ease-in forwards; }
@keyframes lpin { from { transform: scale(.3) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lpfade { from { opacity: 0; } }
@keyframes lpout { to { opacity: 0; transform: scale(1.08); } }
.winner .wmvp { display: inline-block; font-size: 13px; font-weight: 900; background: #fff; border: 2px solid #e8b400; border-radius: 99px; padding: 2px 10px; }
.winner.team.t0 .wt { color: #2d6fa3; } .winner.team.t1 .wt { color: #c0392b; }
.winner .wmon svg { margin: 0 2px; }
.winner.team .wmon, .winner.cowin .wmon { display: flex; justify-content: center; flex-wrap: wrap; }
/* 코인과 상점 (2026-10-08 사용자): 제목 아래 한 줄에 코인(왼쪽) · 라운드 · 프로필(오른쪽) */
.top { flex-wrap: wrap; }
.top > .subrow { flex-basis: 100%; justify-content: space-between; flex-wrap: nowrap; margin-top: 2px; }
.top > .subrow .sub { flex: 1; text-align: center; min-width: 0; }
.top > .subrow .acctchip { margin-left: auto; }
.coinchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px 2px 3px; border: 2px solid #ffe08a; border-radius: 999px; background: linear-gradient(180deg, #fffbe8, #ffefb8); color: #8a5a00; font-size: 12.5px; font-weight: 900; box-shadow: 0 2px 0 #0003; cursor: pointer; transition: transform .15s; }
.coinchip:active { transform: scale(.95); }
.coinchip .coinic { width: 22px; height: 22px; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.coinres { margin-top: 6px; text-align: center; font-weight: 800; color: #8a5a00; background: #fff6d6; border-radius: 10px; padding: 6px; }
.coinres small { color: var(--muted); font-weight: 600; }
.shopsoon { text-align: center; }
.shopsoon .shopic { font-size: 48px; }
.shopsoon p { margin: 4px 0 10px; color: var(--muted); }
.shopcoin { background: #fff6d6; border-radius: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.5; }
.shopcoin b { font-size: 18px; color: #8a5a00; }
.notice:empty { display: none; }
/* 첫 메뉴 (2026-10-08 사용자): 안내 줄 대신 코인·프로필 줄을 크게 */
body.insetup .top > .subrow { margin-top: 8px; }
body.insetup .coinchip { font-size: 17px; padding: 4px 14px 4px 5px; border-width: 3px; }
body.insetup .coinchip .coinic { width: 32px; height: 32px; font-size: 24px; }
body.insetup .acctchip { font-size: 15px; max-width: 200px; padding: 3px 13px 3px 3px; border-width: 3px; }
body.insetup .acctchip .cav { width: 34px; height: 34px; }
body.insetup .acctchip .cav svg, body.insetup .acctchip .cav img { width: 31px; height: 31px; }
body.insetup .acctchip .ctier { font-size: 17px; }
.bmark.inner.foe { background: #e8322a; }
.steps:empty { display: none; }
body.insetup .top > .subrow { margin-top: 4px; }

/* 2026-10-08: 배틀 선택 화면(insetup)에서는 기록 대신 로그아웃 */
#btnOut { display: none; }
body.insetup #btnOut { display: block; }
body.insetup #btnLog { display: none; }
/* 2026-10-08: 더부매 2차(20·21번) 그림은 세로로 1.6배 길쭉하게 */
.bbox:has(.bart.tall) { container-type: size; }
.bbox .bart.tall { width: min(100cqw, 62.5cqh); height: min(100cqh, 160cqw); }
/* 2026-10-08 사용자: 안쪽 대각선 화살표는 끝쪽(공격 방향) 반은 주황, 나머지 반은 파랑 (적은 빨강) */
.bmark.inner { background: linear-gradient(to bottom, #ffc21a 62%, #3b8be8 62%); }
.bmark.inner.foe { background: linear-gradient(to bottom, #ffc21a 62%, #e8322a 62%); }
/* 상점 (2026-10-08) */
.shopmodal { max-width: 420px; }
.shoptabs { display: flex; gap: 6px; margin: 10px 0 8px; }
.shoptab { flex: 1; border: 2px solid #e2d3a8; background: #fffaf0; border-radius: 10px; padding: 6px 4px; font: inherit; font-weight: 700; color: #7a5a16; cursor: pointer; }
.shoptab.on { background: #ffd866; border-color: #e0a800; color: #4a3300; }
.shoptab { white-space: nowrap; font-size: 13px; padding: 6px 2px; min-width: 0; } /* 2026-10-08: 탭 4개 (아이콘·테두리 추가) */
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; }
.shopitem { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #fff; border: 2px solid #eadfc4; border-radius: 12px; padding: 8px 6px; text-align: center; font-size: 13px; }
.shopitem.sample { opacity: .6; border-style: dashed; }
.shopart { width: 64px; height: 64px; display: grid; place-items: center; font-size: 38px; }
.shopart img { max-width: 100%; max-height: 100%; }
.shopbuy { padding: 4px 10px; font-size: 13px; }
.shopbuy:disabled { opacity: .45; }
.shopown { color: #2f8a3b; font-weight: 700; font-size: 12px; }
.shopsoonb { color: var(--muted); font-size: 12px; }
.shopnote, .shopnone { color: var(--muted); font-size: 12px; text-align: center; margin: 8px 0 0; }
/* 친구·미션 (2026-10-08) */
.socrow { display: flex; gap: 8px; margin: 2px 0 10px; }
.socrow button { flex: 1; font-size: 13px; position: relative; border: 2px solid #d9cdf2; background: #f6f1ff; color: #4a3a7a; border-radius: 12px; padding: 8px 6px; font: inherit; font-weight: 700; cursor: pointer; }
.socrow .badge { position: absolute; top: -7px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e8322a; color: #fff; font-style: normal; font-size: 12px; line-height: 20px; }
.friendm h3, .missm h3 { font-size: 14px; margin: 12px 0 6px; }
.missm h3 small { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 4px; }
.frlist { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; }
.frrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 2px solid #eee4cf; border-radius: 10px; padding: 6px 8px; }
.frrow span { display: flex; gap: 6px; }
.frrow .btn { padding: 4px 10px; font-size: 13px; }
.frmsg { background: #eef8ee; border-radius: 8px; padding: 6px 8px; font-size: 13px; margin: 8px 0 0; }
.msrow { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #eee4cf; border-radius: 12px; padding: 7px 8px; margin-bottom: 6px; }
.msrow.done { border-color: #f2c230; background: #fffaea; }
.msrow.got { opacity: .6; }
.msic { font-size: 24px; width: 30px; text-align: center; }
.msbody { flex: 1; min-width: 0; font-size: 13px; }
.msbar { height: 7px; background: #eee; border-radius: 4px; overflow: hidden; margin: 4px 0 1px; }
.msbar i { display: block; height: 100%; background: #f2b51c; }
.msbody small { color: var(--muted); font-size: 11px; }
.msrow .btn { padding: 4px 10px; font-size: 13px; }
.msrow .btn:disabled { opacity: .45; }
.msgot { color: #2f8a3b; font-weight: 700; font-size: 12px; }
.friendm .netjoin input { flex: 1; min-width: 0; letter-spacing: normal; text-transform: none; font-size: 15px; }
.acctrank .sleft { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 4px; }
/* 2026-10-08 사용자 버그: 배틀 중 다른 사람 정보 창(좁은 창)에서 능력치 칸이 겹침 → 그래프 위, 능력치 아래로 */
.peek .mcsrow { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px; }
.peek .mcstats .mcradar { width: 74px; justify-self: center; }
.peek .mcstats .mcradar .radar { width: 74px; height: 74px; }
.peek .mcsgrid { width: 100%; }
.mcsgrid span { min-width: 0; overflow: hidden; }
.mcsgrid i .sico { width: 17px; height: 17px; }
/* 배틀 중 내 정보: 작은 내 카드를 누르면 자세히 */
.mcard.slim[data-seat] { cursor: pointer; }
.mcard.slim .mcmore { margin-left: auto; font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }

/* 회전 미리보기 (v193): 돌고 난 자리를 반투명으로 */
/* 2026-10-08 사용자: 지금 자리는 흐릿하게(30%), 돌고 난 예상 자리는 뚜렷하게 */
.unit.rghost { opacity: 1; z-index: 3; filter: drop-shadow(0 0 4px #ffd25a) drop-shadow(0 0 2px #ffd25a); }
.unit.rfrom { opacity: .3; filter: grayscale(.6); }
.unit.rghost .hpw, .unit.rghost .hpn, .unit.rghost .ust { display: none; }
.rotmenu .btn.rsel { outline: 3px solid #f5b300; outline-offset: 1px; }
.rothint { font-size: 13px; margin: 2px 0 6px; color: var(--muted); }
/* 특수능력 미리보기 (v193): 범위는 옅은 주황 칸, 맞을 상대는 반투명 빨간 네모, 나에게 거는 능력은 파란 칸 */
.aprange, .aptgt, .apself { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); pointer-events: none; box-sizing: border-box; }
.aprange { z-index: 1; background: rgba(255, 140, 40, .28); border: 1.5px dashed rgba(230, 110, 20, .7); }
.aptgt { z-index: 4; background: rgba(230, 30, 30, .4); border: 3px solid rgba(210, 20, 20, .9); border-radius: 6px; animation: aptgt .9s ease-in-out infinite alternate; }
.apself { z-index: 4; background: rgba(40, 120, 230, .3); border: 3px solid rgba(30, 100, 220, .85); border-radius: 6px; animation: aptgt .9s ease-in-out infinite alternate; }
@keyframes aptgt { from { opacity: .6; } to { opacity: 1; } }
.aprange.rvrange { background: rgba(70, 200, 120, .24); border-color: rgba(30, 160, 90, .7); } /* 레이드 부활 범위 (2026-11-02) */
.apself.rvgrave { background: rgba(70, 200, 120, .4); border-color: rgba(30, 160, 90, .95); }
.big button.rsel { outline: 3px solid #f5b300; outline-offset: 1px; }
.sbtn .sbest { font-size: 10px; font-weight: 700; color: #8a6a00; background: #fff3c4; border-radius: 6px; padding: 1px 4px; margin-right: 4px; align-self: center; }
.sbtn.multi { position: relative; padding-top: 9px; } .sbtn.multi .sbest { position: absolute; left: 2px; top: -1px; margin: 0; font-size: 9px; padding: 0 4px; z-index: 1; }
/* 진화 능력치 변화 합계 (v196): 오르면 빨강, 내리면 파랑 */
.evonet { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; background: #f7f4fb; border-radius: 8px; padding: 5px 7px; margin-top: 4px; }
.evonet .evnh { width: 100%; font-size: 12px; font-weight: 700; color: var(--muted); }
.evonet .evd { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; background: #fff; border-radius: 6px; padding: 1px 5px; }
.evonet .evd i { font-style: normal; font-size: 14px; } .evonet .evd i .sico { width: 17px; height: 17px; }
.evonet .evd.up, .evonet .evd.up b { color: #d32f2f; } .evonet .evd.down, .evonet .evd.down b { color: #1f5fd1; }
.evonet small { width: 100%; font-size: 11px; color: var(--muted); }
/* 계정 창: 가장 많이 플레이한 몬스터 (미진화체·1차·2차, v198) */
.acctmon3 { grid-column: 1 / -1; display: grid; gap: 4px; }
.acctmon3 > span { font-size: 12px; color: var(--muted); }
.acctmon3 .amrow { display: grid; grid-template-columns: 62px 38px minmax(0, 1fr) auto; align-items: center; gap: 6px; background: #f7f4fb; border-radius: 8px; padding: 3px 8px; }
.acctmon3 .amrow em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.acctmon3 .amrow i { font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; }
.acctmon3 .amrow b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acctmon3 .amrow b.none { color: var(--muted); font-weight: 400; }
.acctmon3 .amrow small { font-size: 12px; color: var(--muted); }
.acctm .acctgrid:has(.acctmon3) { grid-template-columns: 1fr 1fr; }
.acctm .acctgrid > div.acctmon3 { display: grid; align-items: stretch; text-align: left; padding: 8px 8px; }
.acctm .acctgrid .acctmon3 > span { text-align: center; }
.acctm .acctgrid .acctmon3 .amrow b { font-size: 15px; color: var(--p); }
/* 배틀 중 내 정보 (v199): 상인 줄 자리 */
.timebar.myinfo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 6px 8px; }
.timebar.myinfo .mi-ab { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.timebar.myinfo .mi-ab b { font-size: 14px; color: var(--p); } .timebar.myinfo .mi-ab b.none { color: var(--muted); }
.timebar.myinfo .mi-ab small { font-size: 11.5px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timebar.myinfo .mi-ab .mi-pas { color: #7a5aa8; }
.timebar.myinfo .mi-st { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.timebar.myinfo .mi-st span { display: flex; flex-direction: column; align-items: center; background: #f7f4fb; border-radius: 7px; padding: 2px 0; min-width: 0; }
.timebar.myinfo .mi-st i { font-style: normal; font-size: 15px; line-height: 1; } .timebar.myinfo .mi-st i .sico { width: 18px; height: 18px; }
.timebar.myinfo .mi-st small { font-size: 10px; color: var(--muted); line-height: 1.1; }
.timebar.myinfo .mi-st b { font-size: 15px; line-height: 1.1; }
.timebar.myinfo .mi-st .neg b { color: #d33; } .timebar.myinfo .mi-st .zero b { color: #d99a00; }
/* 시간 상인 시계 (v199): 성장·진화 때 화면 오른쪽 아래 구석에 작게, 시간 재료가 바뀌면 바늘이 시계 방향으로 돎 */
.timeclock { position: fixed; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; width: 84px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.timeclock[hidden] { display: none; }
.timeclock .tcface { position: relative; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, #fffdf6 55%, #f3ead2 100%); border: 3px solid #3d2a5c; box-shadow: 0 3px 10px #0004; }
.timeclock .tcm { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; font-size: 14px; opacity: .45; transition: opacity .4s, transform .4s; }
.timeclock .tcm .sico { width: 19px; height: 19px; }
.timeclock .tcm.on { opacity: 1; background: #ffe58a; box-shadow: 0 0 0 2px #f5b300; transform: translate(-50%, -50%) scale(1.15); }
.timeclock .tchand { position: absolute; left: 50%; top: 50%; width: 4px; height: 24px; border-radius: 3px; background: #3d2a5c; transform-origin: 50% 100%; transition: transform 1.2s cubic-bezier(.3, 1.4, .5, 1); }
.timeclock .tchand::after { content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 7px solid #3d2a5c; border-top: 0; }
.timeclock .tccenter { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; box-shadow: 0 0 0 2px #3d2a5c; }
.timeclock .tccenter .sico { width: 15px; height: 15px; }
.timeclock .tcnext { display: block; font-size: 9px; font-weight: 700; color: #6b5a85; background: #fffc; border-radius: 6px; padding: 0 4px; margin-top: 1px; white-space: nowrap; text-align: center; }
.timeclock .tclbl { margin-top: 2px; font-size: 10.5px; font-weight: 800; color: #3d2a5c; background: #fffc; border-radius: 6px; padding: 0 5px; white-space: nowrap; }
body.gating .timeclock, body.insetup .timeclock { display: none; }
body.hasclock .app { padding-bottom: 104px; }
/* 튜토리얼: 몬스터가 움직이는 동안 전장 강조 (2026-10-08) */
.coach.watch .cring { box-shadow: 0 0 0 9999px rgba(24, 16, 36, .22), 0 0 18px 6px rgba(255, 210, 90, .9); animation: none; }
.coach.watch .carrow { display: none; }
.coach.watch .cbub { opacity: .92; }
/* 상태 체력바 색 (2026-10-08): 독 보라, 방어 태세 파랑, 매혹 핑크 */
.hpw.sts-poison .pips span:not(.lost):not(.hit):not(.heal):not(.part) { background: #9b5de5; }
.hpw.sts-guard .pips span:not(.lost):not(.hit):not(.heal):not(.part) { background: #3b82f6; }
.hpw.sts-charm .pips span:not(.lost):not(.hit):not(.heal):not(.part) { background: #ff6fb5; }
.hpw.sts-hold .pips span:not(.lost):not(.hit):not(.heal):not(.part) { background: #f5c400; } /* 버티기 노랑 (2026-10-09 사용자: 다음 턴까지) */
/* 진화 목록: 지금 단계만 (2026-10-08) */
.eslist { display: flex; flex-direction: column; gap: 6px; max-height: 64vh; overflow-y: auto; margin: 4px 0 8px; }
.esrow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border: 2px solid #e6dff0; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; }
.esrow.ready { border-color: #7cc77a; background: #f3fbf1; }
.esart { flex: 0 0 auto; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #f6f2fb; position: relative; }
.esart.evo2::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid transparent; background: conic-gradient(#ff5e5e, #ffb84d, #ffe14d, #6ad16a, #4dabff, #9b6bff, #ff5e5e) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.esbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.esname { font-weight: 900; font-size: 14.5px; }
.esname small { font-weight: 700; color: #8a7f99; font-size: 11.5px; }
.esab { font-size: 12px; color: #5b4f6b; }
.esrow { flex-wrap: wrap; }
.esmats { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 5px; padding-top: 5px; border-top: 1.5px dashed #e6dff0; }
.esm { flex: 0 0 auto; display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 4px; align-items: center; padding: 3px 8px 3px 4px; border-radius: 10px; background: #f6f2fb; border: 2px solid #e6dff0; }
.esm i { grid-row: 1 / 3; font-style: normal; font-size: 22px; line-height: 1; display: grid; place-items: center; width: 28px; height: 28px; }
.esm i .mico, .esm i img, .esm i .sico, .esm i svg { width: 28px; height: 28px; }
.esm small { font-size: 10px; color: #5b4f6b; white-space: nowrap; line-height: 1.1; }
.esm b { font-weight: 900; font-size: 14px; line-height: 1.1; }
.esm.ok { background: #e3f6df; border-color: #8fd38a; }
.esm.ok b { color: #2e7d32; }
.esm.lack { background: #fff4f2; border-color: #f2c4bd; }
.esm.lack b { color: #d23a2a; }
.elnote .okc { color: #2e7d32; }
.elnote .lackc { color: #d23a2a; }
.estree { width: 100%; margin-top: 2px; }

/* 🏆 순위표 (v216) */
.lbsub { margin: -4px 0 8px; color: var(--muted); font-size: 12px; text-align: center; }
.lblist { display: flex; flex-direction: column; gap: 5px; max-height: 58vh; overflow-y: auto; }
.lbm-modal h3 { font-size: 14px; margin: 12px 0 6px; }
.lbrow { display: flex; align-items: center; gap: 6px; background: #fff; border: 2px solid #eee4cf; border-radius: 10px; padding: 5px 8px; }
.lbrow.me { border-color: #7bc96f; background: #f0fbec; }
.lbn { width: 26px; text-align: center; font-weight: 800; flex: none; }
.lbm { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f6f2fb; border: 2px solid transparent; overflow: hidden; }
.lbm svg { width: 28px; height: 28px; }
.lbnick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbrow .rbadge { flex: none; font-size: 11px; }
.lbpts { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.lbpts small { font-size: 10px; color: var(--muted); }

/* 프로필 테두리 (시즌 보상, v220): 티어 색 그대로 */
.bdw { position: relative; display: inline-flex; flex: none; }
.bdw > span { box-sizing: border-box; }
.bd-bronze > span { border: 2px solid #b0723f !important; }
.bd-silver > span { border: 3px solid #8f9aa6 !important; }
.bd-gold > span { border: 4px double #d6a419 !important; }
.bd-platinum > span { border: 3px solid #2fa79a !important; box-shadow: 0 0 6px 1px #2fa79a99; }
.bd-diamond > span { border: 3px solid #4f8de0 !important; animation: bdSpark 1.8s ease-in-out infinite; }
.bd-master > span { border: 3px solid transparent !important; }
/* 챔피언(옛 마스터, 2026-10-08 사용자): 2차 진화 테두리처럼 무지개 */
.bd-master::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; background: conic-gradient(#ff5e5e, #ffb84d, #ffe14d, #6ad16a, #4dabff, #9b6bff, #ff5e5e) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: bdGlow 2.4s linear infinite; }
@keyframes bdSpark { 0%, 100% { box-shadow: 0 0 3px 1px #4f8de066; } 50% { box-shadow: 0 0 9px 3px #a8d1ffcc; } }
@keyframes bdGlow { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 2px #fff8); } 100% { filter: hue-rotate(360deg) drop-shadow(0 0 2px #fff8); } }
.bdcrown { position: absolute; top: -9px; right: -5px; font-style: normal; font-size: 12px; line-height: 1; transform: rotate(18deg); pointer-events: none; }
body.insetup .acctchip .bdcrown { font-size: 15px; top: -11px; }
@media (prefers-reduced-motion: reduce) { .bd-diamond > span, .bd-master::after { animation: none; } }
.acctbd { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.acctbd .rl { font-size: 12px; font-weight: 800; color: var(--muted); }
.acctbd > small { color: var(--muted); font-size: 11.5px; }
.bdlist { display: flex; flex-wrap: wrap; gap: 6px; }
.bdpick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 6px 5px; border: 2px solid #eee4cf; border-radius: 10px; background: #fff; font: inherit; cursor: pointer; min-width: 64px; }
.bdpick.on { border-color: #7bc96f; background: #f0fbec; }
.bdpick small { font-size: 10.5px; white-space: nowrap; }
.bdav { width: 38px; height: 38px; border-radius: 50%; background: #f6f2fb; border: 2px solid #e6dff0; display: grid; place-items: center; overflow: hidden; }
.bdav svg { width: 32px; height: 32px; }
.srew { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.srew p { margin: 0; }
.srav { width: 84px; height: 84px; border-radius: 50%; background: #f6f2fb; border: 2px solid #e6dff0; display: grid; place-items: center; overflow: hidden; }
.srav svg { width: 70px; height: 70px; }
.srew .bdcrown { font-size: 22px; top: -12px; right: -4px; }
.srew small { color: var(--muted); font-size: 11.5px; }
/* 2026-11-08 사용자: 시즌 보상 창 간결하게 (티어 한 줄 + 보상 세 칸) */
.srtier { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 18px; color: var(--rc); }
.srtier b { font-weight: 900; }
.srtier .srrico { width: 34px; height: 34px; margin: 0; }
.srsub { margin-top: -2px; }
.srgrid { display: flex; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 4px; }
.srit { flex: 1; max-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 8px; border-radius: 12px; background: #faf7fd; border: 1.5px solid #ebe3f3; }
.srit .sri { height: 32px; display: grid; place-items: center; }
.srit .sri .coinico { width: 30px; height: 30px; margin: 0; }
.srit .sri .tkico { width: 32px; height: 32px; }
.srit .sri .bdw { transform: scale(.9); }
.srmini { width: 26px; height: 26px; border-radius: 50%; background: #f6f2fb; display: grid; place-items: center; overflow: hidden; }
.srmini svg { width: 22px; height: 22px; }
.srit b { font-size: 17px; font-weight: 900; line-height: 1.2; }
.srit small { font-size: 11px !important; }
.srnote { margin-top: 2px; }

.lbhead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.lbh { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: #f6f2fb; border: 2px solid #e6dff0; text-align: center; min-width: 0; }
.lbh span { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.lbh b { font-size: 16px; font-weight: 900; }
.lbh .lbdday { color: #d23a2a; }
.lbh small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lbh .rbadge { font-size: 11px; }

/* 버티기 (2차 패시브, v242): 특수능력·반격을 고른 턴, 턴이 끝날 때까지 노랗게 반짝 */
.unit.holdglow .tkp { animation: holdBlink 1.4s linear infinite; }
/* 2026-10-08 사용자: 독처럼 몬스터가 노랗게 반짝반짝 (독보다 자주) */
@keyframes holdBlink {
  0%, 30%, 50%, 80%, 100% { filter: none; }
  36%, 44%, 86%, 94% { filter: drop-shadow(0 0 5px #ffd21f) drop-shadow(0 0 2px #e0a800) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1); }
  40%, 90% { filter: drop-shadow(0 0 9px #ffe14d) drop-shadow(0 0 3px #e0a800) sepia(1) saturate(5) hue-rotate(5deg) brightness(1.15); }
}
@media (prefers-reduced-motion: reduce) { .unit.holdglow .tkp { animation: none; filter: drop-shadow(0 0 5px #ffe14d); } }

/* 코인 아이콘 (사용자 그림, v243) */
.coinico { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; margin: 0 1px; filter: drop-shadow(0 1px 0 #0003); }
.coinic .coinico { width: 100%; height: 100%; vertical-align: middle; margin: 0; }

/* 2026-10-08 사용자: 배팅을 받은 플레이어 칸이 노랗게 반짝 */
/* v291: 처음 3번은 3초 간격, 21초부터 15초 간격. 다시 그려도 이어지게 지연값(--bd1, --bd2)은 배팅 받은 순간 기준 */
@keyframes betflash3 { 0%, 40%, 100% { box-shadow: 0 0 0 2px #ffd23f; background-color: inherit; } 10%, 28% { box-shadow: 0 0 0 5px #ffd23f, 0 0 22px 6px #ffc800; background-color: #fff1a0; } }
@keyframes betflash15 { 0%, 10%, 100% { box-shadow: 0 0 0 2px #ffd23f; background-color: inherit; } 2.5%, 7% { box-shadow: 0 0 0 5px #ffd23f, 0 0 22px 6px #ffc800; background-color: #fff1a0; } }
#players .betted, #stage .nhp.betted { position: relative; z-index: 2; box-shadow: 0 0 0 2px #ffd23f; animation: betflash3 3s ease-in-out var(--bd1, 0s) 3, betflash15 15s ease-in-out var(--bd2, 21s) infinite; }
@media (prefers-reduced-motion: reduce) { #players .betted, #stage .betted { animation: none; } }

/* 2026-10-08 사용자: 배틀 결산 (순위·배팅·능력치 아이콘·몬스터 그림) */
.sumico { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.sumhl { grid-template-columns: 30px 1fr; row-gap: 4px; }
.sumhl span em { margin-left: 6px; }
.sumhl .sumwhos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; padding-left: 36px; }
.sumwho { display: inline-flex; align-items: center; gap: 5px; }
.gmon.smon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--pc); background: #fff; flex: none; position: relative; }
.gmon.smon svg { width: 30px; height: 30px; }
.gmon.smon.big { width: 46px; height: 46px; } .gmon.smon.big svg { width: 42px; height: 42px; }
.sumplaces { display: grid; gap: 6px; margin: 6px 0 8px; }
.sumpl { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 14px; border: 2px solid #e5dfee; background: #fff; }
.sumpl.p1 { border-color: #f0c64a; background: linear-gradient(90deg, #fff4c8, #fffdf3); box-shadow: 0 2px 8px #f0c64a55; }
.sumpl.p2 { border-color: #b9c3cf; background: linear-gradient(90deg, #eef2f6, #fff); }
.sumpl.p3 { border-color: #d9a47a; background: linear-gradient(90deg, #fbeee3, #fff); }
.sumpl.p4 { border-color: #ddd6e3; background: #f7f5f9; }
.sumpl.pd { border-color: #a9c7f0; background: #f1f7ff; }
.rkb { display: grid; place-items: center; min-width: 46px; height: 46px; border-radius: 50%; font-weight: 900; font-size: 24px; line-height: 1; color: #fff; text-shadow: 0 1px 2px #0005; }
.rkb small { font-size: 11px; margin-top: -4px; }
.rkb { grid-auto-flow: row; }
.rkb.r1 { background: radial-gradient(circle at 35% 30%, #ffe680, #e0a800); box-shadow: 0 0 0 3px #fff3b0, 0 2px 6px #c8960066; }
.rkb.r2 { background: radial-gradient(circle at 35% 30%, #f4f6f8, #98a4b2); }
.rkb.r3 { background: radial-gradient(circle at 35% 30%, #f3c6a0, #b06a35); }
.rkb.r4 { background: radial-gradient(circle at 35% 30%, #cfc8d6, #8c8396); }
.rkb.rd { background: radial-gradient(circle at 35% 30%, #cfe2ff, #5d8fd6); }
.rkb.wd { font-size: 14px; border-radius: 12px; padding: 0 8px; height: 34px; }
.sumpln { display: grid; gap: 3px; min-width: 0; }
.sumpln > b { font-size: 15px; }
.sumgs { display: flex; flex-wrap: wrap; gap: 4px; }
.sumg { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 999px; font-size: 12px; }
.sumg img { width: 22px; height: 22px; object-fit: contain; }
.sumg b { font-size: 15px; font-weight: 900; }
.sumg small { color: #6b6070; font-size: 11px; }
.sumg.up { background: #e3f7e6; } .sumg.up b { color: #1f8a3a; }
.sumg.down { background: #fde6e6; } .sumg.down b { color: #d6332a; }
.sumnone { color: #9a90a3; font-size: 12px; }
.sumbets { margin: 4px 0 8px; display: grid; gap: 6px; }
.sumbets-h { font-weight: 900; font-size: 14px; text-align: center; }
.sumbet { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 14px; border: 2.5px solid; font-size: 14px; }
.sumbet.ok { border-color: #2fa84f; background: #e6f8ea; }
.sumbet.no { border-color: #e5484d; background: #fdecec; }
.sumbet.no .gmon.smon { filter: grayscale(.6); opacity: .8; }
.sbst { font-weight: 900; font-size: 15px; padding: 2px 9px; border-radius: 999px; color: #fff; margin-right: 2px; }
.sumbet.ok .sbst { background: #2fa84f; } .sumbet.no .sbst { background: #e5484d; }
.sbarrow { font-weight: 900; color: #6b6070; } .sbdraw { color: #5d8fd6; }
.sbgain { margin-left: auto; display: inline-flex; gap: 4px; } .sbgain small { color: #a23a3d; font-weight: 700; }
.timeclock .tclbl, .timeclock .tcnext { align-self: flex-end; } /* 시간 재료 2개면 글이 길어져 화면 오른쪽 밖으로 나가지 않게 왼쪽으로 늘어남 */

/* 2026-10-08 사용자: 배틀 결산을 한 화면(스크롤 한 번)에 */
.sumpanel { padding: 12px 12px 10px; }
.sumpanel h2 { font-size: 19px; }
.sumres { margin: 0 0 6px; font-size: 12px; }
.sumplaces { gap: 4px; margin: 4px 0 6px; }
.sumpl { padding: 4px 8px; gap: 6px; border-radius: 12px; }
.rkb { min-width: 34px; height: 34px; font-size: 18px; }
.rkb small { font-size: 9px; margin-top: -3px; }
.rkb.wd { font-size: 12px; height: 28px; padding: 0 6px; }
.gmon.smon.big { width: 36px; height: 36px; } .gmon.smon.big svg { width: 32px; height: 32px; }
.gmon.smon { width: 28px; height: 28px; border-width: 2px; } .gmon.smon svg { width: 24px; height: 24px; }
.sumpln { grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; }
.sumpln > b { font-size: 14px; white-space: nowrap; }
.sumg { padding: 1px 6px 1px 2px; } .sumg img { width: 18px; height: 18px; } .sumg b { font-size: 13px; } .sumg small { font-size: 10px; }
.sumbets { gap: 4px; margin: 2px 0 6px; } .sumbets-h { font-size: 12px; }
.sumbet { padding: 4px 8px; gap: 4px; font-size: 13px; border-width: 2px; border-radius: 12px; }
.sbst { font-size: 12px; padding: 1px 7px; }
.sumstar.slim { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 8px; margin: 2px 0 6px; }
.sumstar.slim .sumwhos { display: flex; gap: 8px; flex-wrap: wrap; }
.sumtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 6px; }
.sumtiles.n2 { grid-template-columns: repeat(2, 1fr); } .sumtiles.n1 { grid-template-columns: 1fr; }
.sumtile { display: grid; justify-items: center; gap: 2px; padding: 5px 4px; border-radius: 12px; background: var(--p-soft, #f1ecff); text-align: center; min-width: 0; }
.sumtile-h { display: flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; line-height: 1.15; }
.sumtile-h i { font-style: normal; } .sumtile .sumico { width: 20px; height: 20px; }
.sumtile > em { font-style: normal; font-weight: 900; font-size: 16px; line-height: 1; }
.sumtile .sumwhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; padding: 0; }
.sumtile .sumwho { font-size: 11px; gap: 3px; } .sumtile .sumwho b { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sumdet { margin: 0 0 6px; font-size: 12px; } .sumdet summary { cursor: pointer; font-weight: 800; color: #6b5a85; text-align: center; padding: 3px; }
.sumdet .sumtab { margin: 4px 0 2px; }
.sumpanel .big button { min-height: 44px; }

/* 상점 진화 라인 해금 (2026-10-08): 해금 안 한 진화 표시 */
.locktag { margin-top: 4px; font-size: 12px; font-weight: 800; color: #8a5a00; }
/* 상점 아이콘·테두리 (2026-10-08 사용자: 판매 예정). 테두리 그림은 아바타보다 조금 크게 겹침, 그림이 없으면 금색 고리 */
.bd-shop > span { border: 3px solid #e3b23c !important; }
.bd-shop .bdring { position: absolute; inset: -18%; width: 136%; height: 136%; object-fit: contain; pointer-events: none; }
.bd-shop:has(.bdring) > span { border-color: transparent !important; }
/* 색깔 테두리 (2026-10-09 사용자): 단색 고리 위로 은은한 빛이 천천히 한 바퀴씩 돎 (2차 진화 무지개 테두리처럼) */
.bd-col > span { border: 3px solid var(--bc) !important; }
.bd-col::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, #fff0 40deg, #ffffffcc 70deg, #fff0 100deg, transparent 360deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px var(--bc)); animation: bdSpin 2.6s linear infinite; }
.bd-col { filter: drop-shadow(0 0 2px var(--bc)); }
@keyframes bdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bd-col::after { animation: none; } }
/* 도트 테두리 (2026-11-13 사용자): 아이콘 동그라미 테두리 선을 없애 하얀 동그라미를 꽉 채우고, 도트 고리를 152%로 겹쳐 안쪽 검은 선이 동그라미 가장자리에 딱 붙게 (js/pix-border-art.js) */
/* 차지하는 자리는 아이콘의 120%만 (옆 글자·창 가장자리에 안 걸리게): 얼굴 동그라미를 79%로 줄이고 그림을 120%로 → 그림 = 얼굴의 152% */
.bd-pix > span { border-width: 0 !important; transform: scale(.79); }
.bd-pix .bdring { inset: -10%; width: 120%; height: 120%; image-rendering: pixelated; }
.shopart .bdprev { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; }
.shopart .bdprev svg, .shopart .bdprev img { width: 42px; height: 42px; }
.faceic { object-fit: contain; display: block; }
/* 랭크 매칭 로딩 화면 (2026-10-08 사용자): 매칭 완료! → 참가자 초상화·티어·닉네임 5초 */
.mintro { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: radial-gradient(circle at 50% 40%, #3b2f6b, #17122c); color: #fff; transition: opacity .35s; }
.mintro.out { opacity: 0; }
.mi-done { font-size: 34px; font-weight: 900; color: #ffd75e; text-shadow: 0 2px 12px #ffd75e88; animation: midone .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes midone { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.mi-head { font-size: 15px; font-weight: 800; color: #e9e2ff; }
.mi-grid { display: grid; gap: 10px; width: 100%; max-width: 520px; grid-template-columns: repeat(2, 1fr); }
.mi-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.mi-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; background: linear-gradient(#ffffff1f, #ffffff08); border: 2px solid #ffffff33; animation: micard .5s ease both; min-width: 0; }
.mi-card:nth-child(2) { animation-delay: .12s; } .mi-card:nth-child(3) { animation-delay: .24s; } .mi-card:nth-child(4) { animation-delay: .36s; }
@keyframes micard { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.mi-card.me { border-color: #7ee08a; box-shadow: 0 0 12px #7ee08a66; }
.mi-card.ta { background: linear-gradient(#5aa0ff33, #5aa0ff0d); } .mi-card.tb { background: linear-gradient(#ff6b6b33, #ff6b6b0d); }
.mi-por { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mi-tier { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.mi-tier .rico.mi-rico { width: 44px; height: 44px; margin: 0; }
.mi-tier small { font-size: 11px; color: #d8d0f5; }
.mi-ic { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-right: 4px; }
.mi-card .bdw { border-radius: 50%; }
.mi-por { box-sizing: border-box; }
.mi-nick { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-tt { font-size: 12px; font-weight: 800; color: #ffd75e; letter-spacing: .02em; }
.accttitles .ttpick { cursor: pointer; } .accttitles .ttpick.on { outline: 2px solid #c27a00; }
.mi-foot { font-size: 13px; color: #cfc6ee; }
.mintro.cards .mi-foot { animation: mifoot 1.2s ease-in-out infinite alternate; }
@keyframes mifoot { to { opacity: .45; } }
@media (max-width: 360px) { .mi-por { width: 76px; height: 76px; } .mi-grid.n3 .mi-por { width: 64px; height: 64px; } }

/* 상점 진화 라인 안 산 사람: ? 표시 검은 실루엣 (사용자 2026-10-09) */
.sil { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.sil svg, .sil img { filter: brightness(0); opacity: .85; }
.sil b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 28px; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.esrow.locked { opacity: .9; cursor: default; }

/* 메인 화면 (2026-10-09 사용자 시안을 코드로): 하늘·풀밭 배경, 위 프로필·코인·상점, 큰 카드 3개, 튜토리얼, 아래 메뉴 4칸 */
body.insetup { background: #bfe6ff; }
body.insetup .app { max-width: none; padding: 0 0 calc(4px + env(safe-area-inset-bottom)); }
body.insetup .top, body.insetup .toolbar, body.insetup .notice, body.insetup .scorebar, body.insetup .timebar, body.insetup .players { display: none; }
body.insetup .copy { margin: 0; padding: 6px 12px; background: #f6efe0; color: #7a6a52; }
.home { position: relative; display: flex; flex-direction: column; min-height: calc(100svh - 44px); overflow: hidden;
  background: linear-gradient(180deg, #8fd0ff 0%, #bfe6ff 45%, #e4f5ff 70%); --ink: #2c1a5c; }
.hsky { position: absolute; inset: 0; pointer-events: none; }
.hsky svg { position: absolute; left: 0; width: 100%; }
.hsky .hhill { bottom: 0; height: 52%; }
.hsky .hcloud { top: 9%; height: 22%; }
.home > *:not(.hsky):not(.hsheet-bg) { position: relative; }
.home .hico { width: 100%; height: 100%; display: block; }
.hhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 10px 12px 0; max-width: 720px; width: 100%; margin: 0 auto; }
.hleft { display: grid; gap: 8px; min-width: 0; }
.hprof { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; padding: 4px 14px 4px 4px; border: 3px solid var(--ink); border-radius: 999px;
  background: linear-gradient(180deg, #fff, #ece6ff); font: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); text-align: left; }
.hprof .bdw { flex: none; }
.hprof .hav { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2.5px solid #b49bff; display: grid; place-items: center; overflow: hidden; }
.hprof .hav svg, .hprof .hav img { width: 42px; height: 42px; }
.hpn { display: grid; gap: 2px; min-width: 0; }
.hpn > b { font-size: 16px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpt { display: flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 800; color: #5b4a8a; white-space: nowrap; }
.hpt .rico { width: 22px; height: 22px; margin: -3px 0; }
.hpt em { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.hpt.g { font-weight: 600; color: #7a6aa8; }
.home .socrow { display: flex; gap: 8px; margin: 0; }
.home .socrow button { flex: none; position: relative; width: 46px; height: 46px; padding: 7px; border: 3px solid var(--ink); border-radius: 13px; background: linear-gradient(180deg, #6d5ba8, #4b3a86);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer; display: grid; place-items: center; }
.home .socrow button img { height: 28px; width: auto; }
.home .socrow button .hico { width: 30px; height: 30px; }
.home .socrow .badge { position: absolute; top: -6px; right: -6px; }
.hright { display: flex; align-items: center; gap: 6px; flex: none; }
.hcoin { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 3px; border: 3px solid var(--ink); border-radius: 999px; background: #3b2a66; color: #fff; font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.hcoin .coinico { width: 32px; height: 32px; }
.hshop { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 54px; width: 54px; padding: 3px; border: 3px solid var(--ink); border-radius: 14px; background: linear-gradient(180deg, #fffaf0, #f3e3c3);
  font: inherit; font-size: 11px; font-weight: 900; color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.hshop .hico { width: 34px; height: 34px; }
.hmid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 3svh, 26px); width: 100%; max-width: 560px; margin: 0 auto; padding: clamp(70px, 14svh, 120px) 12px 14px; }
.hcards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 2.4vw, 14px); }
.hpeek { position: absolute; z-index: 0; left: 50%; bottom: 100%; width: clamp(120px, 34vw, 170px); margin-bottom: -22px; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.hcard { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; aspect-ratio: 1 / 1.05; padding: 10px 4px 10px;
  border: 3px solid var(--cb); border-radius: 20px; background: linear-gradient(180deg, var(--c1), var(--c2)); font: inherit; cursor: pointer; overflow: hidden;
  box-shadow: 0 5px 0 var(--cb), 0 10px 16px #1a2a5033; transition: transform .08s, box-shadow .08s; }
.hcard::before { content: ''; position: absolute; left: 10%; right: 10%; top: 5px; height: 22%; border-radius: 14px; background: linear-gradient(180deg, #ffffffb0, #ffffff10); pointer-events: none; }
.hcard:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--cb), 0 4px 8px #1a2a5033; }
.hcard .hcart { flex: 1; width: 100%; display: grid; place-items: center; min-height: 0; }
.hcard .hcart img { width: 82%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #0004); }
.hcard .hcart .hico { width: 64%; height: auto; }
.hcart.hf2 { display: flex; justify-content: center; align-items: center; }
.hcart.hf2 svg { width: 46%; height: auto; }
.hcart.hf2 svg + svg { margin-left: -8%; }
.hcard b { position: relative; font-size: clamp(15px, 4.6vw, 22px); font-weight: 900; color: #fff; letter-spacing: .01em; white-space: nowrap;
  text-shadow: -2px 0 var(--cb), 2px 0 var(--cb), 0 -2px var(--cb), 0 2px var(--cb), -1.5px -1.5px var(--cb), 1.5px 1.5px var(--cb), -1.5px 1.5px var(--cb), 1.5px -1.5px var(--cb), 0 3px var(--cb); }
.hcard.hr { --c1: #ffe07a; --c2: #f4ae2a; --cb: #6b3d0c; }
.hcard.hf { --c1: #9fdcff; --c2: #3f97e8; --cb: #133f7a; }
.hcard.ha { --c1: #cbb6ff; --c2: #8b68e6; --cb: #35207a; }
.home .tutbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 78%; margin: 0 auto; min-height: 58px; padding: 6px 20px; border: 3px solid #1f5a26; border-radius: 999px;
  background: linear-gradient(180deg, #c9f5b5, #7fd56f); box-shadow: 0 4px 0 #1f5a26, 0 8px 14px #1a2a5033; color: #173d1c; font-size: clamp(20px, 6vw, 26px); }
.home .tutbtn .hico { width: 36px; height: 36px; flex: none; }
.home .tutbtn b { color: #173d1c; font-weight: 900; text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff, -1.5px -1.5px #fff, 1.5px 1.5px #fff, -1.5px 1.5px #fff, 1.5px -1.5px #fff; }
.home .tutbtn.hint { background: linear-gradient(180deg, #c9f5b5, #7fd56f); border-color: #b57d00; box-shadow: 0 4px 0 #b57d00, 0 0 0 4px #ffe48a, 0 8px 14px #1a2a5033; }
.hnav { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 10px 8px; padding: 6px 4px; border: 3px solid #6b5a3e; border-radius: 20px; background: #fffaf0; box-shadow: 0 4px 0 #6b5a3e;
  max-width: 560px; width: calc(100% - 20px); align-self: center; }
.hnav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 900; color: #3b2a1a; cursor: pointer; }
.hnav button + button { border-left: 2px solid #e6dcc6; }
.hnav .hico { width: 38px; height: 38px; }
/* 2026-10-09 사용자 직접 그린 아이콘(그림 파일): 비율 유지 */
.home img.hico, .modal img.hico { object-fit: contain; }
.hnav button:active { transform: translateY(2px); }
.hsheet-bg { position: fixed; inset: 0; z-index: 40; background: #1a103a88; display: flex; align-items: flex-end; justify-content: center; animation: hsfade .15s ease-out; }
.hsheet { width: 100%; max-width: 520px; max-height: 88svh; overflow: auto; margin: 0; padding: 6px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; animation: hsup .2s ease-out; }
.hsheet .modecard.four { margin-top: 8px; border: 0; }
.hsheet .hclose { display: block; margin: 4px auto 0; }
.modecard .mi .rico, .modecard .mi .hico { width: 34px; height: 34px; margin: 0; }
.modecard .mi.hf2 svg { width: 30px; height: 30px; }
@keyframes hsup { from { transform: translateY(40px); opacity: .4; } }
@keyframes hsfade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hsheet, .hsheet-bg { animation: none; } }
.setm .setrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 16px; font-weight: 800; color: var(--text); cursor: pointer; }
.setm .setrow span { flex: 1; text-align: left; }
.setm .setrow em { font-style: normal; font-size: 13px; color: var(--muted); width: 3em; text-align: right; }
.setm h2 .hico, .bagm h2 .hico { width: 28px; height: 28px; vertical-align: middle; }
.setm h2, .bagm h2 { display: flex; align-items: center; gap: 8px; }
.sw { position: relative; width: 50px; height: 28px; border-radius: 14px; background: #ccc5dd; transition: background .15s; flex: none; }
.sw b { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0005; transition: left .15s; }
.sw.on { background: #6fcf5c; }
.sw.on b { left: 25px; }
.bagm .rl { display: block; margin-top: 12px; font-size: 12px; font-weight: 800; color: var(--muted); }
.baglist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bagit { display: grid; justify-items: center; gap: 2px; width: 74px; font-size: 11.5px; }
.bagit span { width: 52px; height: 52px; display: grid; place-items: center; font-size: 30px; }
.bagit img { max-width: 100%; max-height: 100%; }
.bagnone { display: block; margin-top: 4px; color: var(--muted); }
.home .tutbtn.tutspot { animation: tuthint2 1.1s ease-in-out 3; } /* 2026-10-09 사용자: 3번 반짝 */
@keyframes tuthint2 { 0%,100% { transform: none; } 50% { transform: scale(1.08); filter: brightness(1.12) drop-shadow(0 0 14px #ffd25a) drop-shadow(0 0 4px #fff3b0); } }

/* 몬스터 도감 (v274, 2026-10-09 사용자: 도감 스레드 도감 형식으로) */
@property --dxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes dxspin { to { --dxa: 360deg; } }
.modal.dexm { width: min(560px, 100%); background: #f7f4ef; }
.dx h4 { margin: 14px 0 8px; font-size: 14px; }
.dx h4 small { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 4px; }
.dx section:first-child h4 { margin-top: 2px; }
.dx-basebar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.dx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dx-grid .dx-card { grid-template-columns: 56px 1fr; }
.dx-grid .dx-art { width: 56px; height: 56px; }
.dx-grid .dx-art svg { width: 48px; height: 48px; }
.dx-jump { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.dx-jump button { padding: 4px 9px; font-size: 11px; border-radius: 99px; background: #fff; border: 2px solid #2d2a32; box-shadow: 0 2px 0 #2d2a32; min-height: 0; }
.dx-grp { margin-bottom: 14px; scroll-margin-top: 8px; }
.dx-more > summary { margin: 6px 0 0 14px; padding: 5px 12px; width: fit-content; border: 2px solid #d9d2c6; border-radius: 999px; background: #faf7f1; font-size: 12px; font-weight: 800; color: #6a5a8a; cursor: pointer; list-style-position: inside; }
.dx-kids { margin: 8px 0 0 14px; padding-left: 10px; border-left: 3px solid #d9d2c6; display: grid; gap: 8px; }
.dx-card { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; background: #fff; border: 3px solid #2d2a32; border-radius: 18px; box-shadow: 0 4px 0 #2d2a32; padding: 10px; align-items: start; }
.dx-card > .dx-cost, .dx-card > .dx-stats, .dx-card > .dx-ab, .dx-card > details { grid-column: 1 / -1; }
.dx-art { width: 84px; height: 84px; border-radius: 14px; background: #f3f6f5; display: flex; align-items: center; justify-content: center; position: relative; }
.dx-art svg { width: 72px; height: 72px; }
.dx-art.shine { border: 3px solid transparent; background: linear-gradient(#f3f6f5, #f3f6f5) padding-box, conic-gradient(from var(--dxa), #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #b06bff, #ff6b6b) border-box; animation: dxspin 4s linear infinite; }
.dx-card.locked .dx-art .sil { display: inline-flex; }
.dx-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dx-head h3 { margin: 0; font-size: 16px; }
.dx-ev2 { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; color: #fff; background: linear-gradient(90deg, #ff6b6b, #ffb23d, #6bcb77, #4d96ff, #b06bff); }
.dx-sub { margin: 2px 0 6px; font-size: 11px; color: var(--muted); }
.dx-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-size { font-size: 11px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 99px; background: #5aa9e6; }
.dx-size.m { background: #8e7cc3; } .dx-size.l { background: #e0795a; }
.dx-bodym { display: inline-grid; gap: 2px; }
.dx-bodym i { width: 14px; height: 14px; border-radius: 4px; background: #cfd6d8; font-style: normal; font-size: 8px; font-weight: 700; line-height: 14px; text-align: center; color: #2d2a32; }
.dx-bodym i.h { background: #f2b33d; } .dx-bodym i.t { background: #9fd3f5; } .dx-bodym i.e { background: transparent; }
.dx-cost { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.dx-cost li { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 3px 8px 3px 4px; border-radius: 99px; background: #f6f1e7; border: 1.5px solid #e2d8c6; }
.dx-cost li.time { border-style: dashed; border-color: #b9a6dd; background: #f3eefb; }
.dx-cost li img, .dx-cost li svg { width: 18px; height: 18px; }
.dx-stats { display: grid; gap: 4px; margin-top: 4px; }
.dx-row { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; }
.dx-row.net { padding-top: 4px; border-top: 1.5px dashed #e2d8c6; }
.dx-rl { font-size: 11px; font-weight: 700; color: #6a6470; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.dx-st { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: #eceeee; color: #3a3a40; white-space: nowrap; }
.dx-st.up { background: #ddf3e6; color: #1f7a4a; } .dx-st.dn { background: #fbe3e1; color: #b23a3a; }
.dx-st.soft { opacity: .8; }
.dx-ab { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.dx-abl { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #f2b33d; color: #2d2a32; margin-right: 5px; }
.dx-abl.pa { background: #b9a6dd; }
.dx-an { margin-right: 3px; }
.dx-keep { color: var(--muted); }
.dx details { font-size: 11px; color: #4a4550; line-height: 1.5; }
.dx details summary { cursor: pointer; font-weight: 700; color: #6a6470; }
.dx-notes { font-size: 11px; color: #6a6470; line-height: 1.5; margin-top: 8px; }
@media (max-width: 420px) {
  .dx-card { grid-template-columns: 68px 1fr; padding: 9px; }
  .dx-art { width: 68px; height: 68px; } .dx-art svg { width: 58px; height: 58px; }
  .dx-grid { grid-template-columns: 1fr; }
  .dx-kids { margin-left: 6px; padding-left: 7px; }
  .dx-row { grid-template-columns: 1fr; gap: 2px; }
}

/* 성장·몬스터 고르기 순서 줄 (v282, 2026-10-09 사용자): 플레이어 색 이름표, 지금 차례 강조 */
.ordrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: 4px; }
.ordc { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; border: 2px solid var(--p1); color: var(--p1); background: #fff; line-height: 1.4; }
.ordc.p2 { border-color: var(--p2); color: var(--p2); } .ordc.p3 { border-color: var(--p3); color: #2f7f3a; } .ordc.p4 { border-color: var(--p4); color: #9a7006; }
.ordc.now { color: #fff; background: var(--p1); transform: scale(1.08); box-shadow: 0 2px 0 #0003; }
.ordc.p2.now { background: var(--p2); } .ordc.p3.now { background: var(--p3); } .ordc.p4.now { background: var(--p4); }
.ordc.done { opacity: .45; }
.ordar { font-style: normal; font-weight: 900; color: var(--muted); }
/* 진화 목록 버튼: 대기 칸 밖 오른쪽으로 (대기 몬스터에 가려지지 않게) */
.gwait .evolistbtn { right: auto; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: normal; width: max-content; max-width: calc(33% - 10px); text-align: center; line-height: 1.25; padding: 4px 6px; }

/* 주사위 결과 평면 (v283, 2026-10-09 사용자): 굴린 뒤 모두의 주사위를 위에서 본 모양으로, 내 주사위 강조 */
.dflat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px; width: max-content; max-width: 96%; }
.dfl { --dc: var(--p); display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; animation: dflin .28s ease-out both; }
.dfl.p1 { --dc: var(--p1); } .dfl.p2 { --dc: var(--p2); } .dfl.p3 { --dc: var(--p3); } .dfl.p4 { --dc: var(--p4); } .dfl.tm { --dc: #2a2320; }
@keyframes dflin { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.dface { width: 50px; height: 50px; box-sizing: border-box; background: #fff; border: 3px solid var(--dc); border-radius: 11px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px; box-shadow: 0 4px 0 #0003; }
.dface i { border-radius: 50%; margin: 2px; }
.dface i.on { background: var(--dc); }
.dfn { background: var(--dc); color: #fff; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px #0003; }
.dfl.me .dface { box-shadow: 0 0 0 4px #ffd75e, 0 4px 0 #0003; }
.dfl.win .dface { width: 74px; height: 74px; padding: 8px; border-width: 4px; }
.dfl.win .dfn { font-size: 13px; padding: 3px 11px; }
.dme { position: absolute; top: -22px; background: #ffd75e; color: #2a2320; font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }

/* 2026-10-09 사용자: 게임 안 하단 메뉴 = 게임 시작 전 화면 하단(.hnav)과 같은 디자인. 항복·기록·도감·가방·소리·음악 */
.toolbar.gnav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 12px 0 6px; padding: 5px 2px; border: 3px solid #6b5a3e; border-radius: 18px; background: #fffaf0; box-shadow: 0 4px 0 #6b5a3e; }
.toolbar.gnav button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 3px 1px; border: 0; border-radius: 0; background: none; font: inherit; font-size: 11.5px; font-weight: 900; color: #3b2a1a; cursor: pointer; white-space: nowrap; }
.toolbar.gnav button + button { border-left: 2px solid #e6dcc6; }
.toolbar.gnav .hico { width: 32px; height: 32px; }
.toolbar.gnav button:active { transform: translateY(2px); }
.toolbar.gnav #btnGiveUp span { color: #b23a3a; }

/* 2026-10-09 사용자: 몬스터 고르기 페이즈는 고르기 화면이 플레이어 정보보다 위 (첫 화면에 바로 보이게) */
body.pickfirst .app { display: flex; flex-direction: column; }
body.pickfirst .app > * { order: 0; }
body.pickfirst #notice, body.pickfirst #stage { order: 1; }
body.pickfirst #players { order: 2; margin-top: 10px; }
body.pickfirst .toolbar, body.pickfirst .app > footer { order: 3; }

/* 연속 질주 (2026-10-09 사용자): 한 번 더 행동하는 동안 모든 몬스터 머리 위에 작은 돌, 질주한 몬스터는 푸른 테두리 반짝 */
.unit.haspeb { z-index: 6; }
/* 2026-10-11 사용자: 기도 후광(3번 그림)은 보호막이 있는 동안 머리 위에 떠 있음 */
.unit .haloic { position: absolute; left: 50%; top: -26%; width: 72%; height: auto; max-width: none; transform: translateX(-50%); z-index: 9; pointer-events: none; animation: pebFloat 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .unit .haloic { animation: none; } }
.unit .haloic { transition: opacity .35s; } .fxplaying .unit .haloic.hnew { opacity: 0; }
.unit .pebble { position: absolute; left: 50%; top: -34%; width: 22%; height: auto; transform: translateX(-50%); z-index: 9; pointer-events: none; filter: drop-shadow(0 2px 2px #0004); animation: pebFloat 1.6s ease-in-out infinite, pebBlink 1s ease-in-out infinite; }
/* 2026-10-09 사용자: 작은 돌도 질주한 몬스터 테두리처럼 파랗게 반짝 */
@keyframes pebBlink { 0%, 100% { filter: drop-shadow(0 2px 2px #0004) drop-shadow(0 0 1px #3b82f6aa); } 50% { filter: drop-shadow(0 0 3px #2f7bff) drop-shadow(0 0 7px #5aa2ffcc) brightness(1.15); } }
@keyframes pebFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.unit.bonusglow .tkp { animation: bonusBlink 1s ease-in-out infinite; border-radius: 50%; }
@keyframes bonusBlink { 0%, 100% { box-shadow: 0 0 0 2px #3b82f6aa; } 50% { box-shadow: 0 0 0 4px #2f7bff, 0 0 14px 4px #5aa2ffcc; } }
@media (prefers-reduced-motion: reduce) { .unit .pebble, .unit.bonusglow .tkp { animation: none; } .unit.bonusglow .tkp { box-shadow: 0 0 0 3px #2f7bff; } }

/* 2026-10-09 사용자: 링크로 들어오면 타이틀부터. 저장된 판이 있으면 메인 화면에 이어하기 */
.home .hresume { display: flex; align-items: center; justify-content: center; gap: 8px; width: 78%; margin: 0 auto 10px; min-height: 46px; padding: 6px 16px; border: 3px solid #35207a; border-radius: 999px; background: linear-gradient(180deg, #e3d6ff, #b49cf5); box-shadow: 0 4px 0 #35207a; color: #22134f; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; }
.home .hresume small { font-size: 12px; font-weight: 800; opacity: .8; }
.home .hresume:active { transform: translateY(2px); box-shadow: 0 2px 0 #35207a; }
.gbtn .gnick { font-size: .7em; opacity: .85; margin-left: 4px; }
/* 2026-10-09 사용자: 매칭 대기 카운트다운 안내 */
.mwait .mcount { margin: 6px auto; padding: 6px 12px; border-radius: 999px; background: #fff3c4; color: #6b4a00; font-weight: 900; font-size: 15px; display: inline-block; }
.mwait .mcount b { color: #d2451e; font-variant-numeric: tabular-nums; }
/* v299: 매칭 대기·로딩 화면의 AI 자리 표시 (2026-10-09 사용자 결정) */
.mseats span.ai { border-color: #6d63b8; color: #6d63b8; background: #f1effc; flex-direction: column; line-height: 1; font-size: 16px; }
.mseats span.ai small { font-size: 9px; font-weight: 900; }
.mwait .mainote { color: var(--muted); font-weight: 700; }
.mi-aitier .mi-bot { font-size: 34px; line-height: 44px; height: 44px; }
.mi-aitag { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: #6d63b8; color: #fff; font-size: 11px; vertical-align: middle; }
/* v302: 석화(정면 봉쇄) 회색 (2026-10-09 사용자) */
.hpw.sts-stone .pips span:not(.lost):not(.hit):not(.heal):not(.part) { background: #8a8f98; }
.unit.stoned .tkw > *:not(.tring):not(.evoring) { animation: stoneBlink 3.2s ease-in-out infinite; }
@keyframes stoneBlink { 0%, 62%, 100% { filter: none; } 70%, 86% { filter: grayscale(1) brightness(.82) contrast(1.1); } 78% { filter: grayscale(.4); } }
@media (prefers-reduced-motion: reduce) { .unit.stoned .tkw > *:not(.tring):not(.evoring) { animation: none; filter: grayscale(.6); } }

/* 앱 설치 버튼 (2026-10-09 사용자): 첫 화면 맨 아래 */
.gate .ginstall { position: relative; display: block; margin: 12px auto 0; padding: 9px 22px; border: 2px solid #3b2a66; border-radius: 999px; background: #fff; color: #3b2a66; font: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 #3b2a66; cursor: pointer; }
.gate .ginstall:active { transform: translateY(2px); box-shadow: 0 1px 0 #3b2a66; }
.gate .ginstallhow { position: relative; font-size: 13px; color: #3b2a66; margin: 8px 2px 0; padding: 8px 10px; line-height: 1.55; background: #fff; border-radius: 10px; }

/* 로그인 유지 체크 (2026-10-09 사용자) */
.gateform label.gkeep { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.gateform label.gkeep input { width: 20px; height: 20px; padding: 0; margin: 0; accent-color: #6b4fd1; }
.gateform label.gkeep small { font-size: 12px; }
.gateform label.gkeep span { white-space: nowrap; }
/* 보호막 (2026-10-09 사용자, 변신): 체력 칸 위에 불투명한 회색으로 겹침, 칸 나눔 + 숫자 */
.rp .hpw { position: relative; }
.shbar { position: absolute; left: 1px; top: 1px; bottom: 1px; display: flex; gap: 1px; z-index: 2; pointer-events: none; }
.shbar span { flex: 1; background: linear-gradient(180deg, #e4e7ec, #aab0ba); border-radius: 1px; }
.shbar em { position: absolute; right: -5px; top: -12px; font-style: normal; font-weight: 900; font-size: 11px; line-height: 1; color: #eef0f4; -webkit-text-stroke: 3px #2a2320; paint-order: stroke; }
.shbar.shpop { animation: shpop .5s ease-out; }
@keyframes shpop { 0% { transform: scaleY(1.9); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.shfill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #e4e7ec, #aab0ba); transition: width .35s; display: flex; align-items: center; justify-content: flex-end; }
.shfill em { font-style: normal; font-weight: 900; font-size: 12px; color: #2a2320; padding-right: 5px; }
.mchbar .shfill { border-right: 2px solid #2a2320; }
/* 배틀 중 몬스터 정보 (2026-10-09 사용자): 그래프 없이 숫자만, 한 줄에 아이콘·이름·숫자 */
.mcstats.bnum { padding: 5px 6px; }
.bnums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
.bnums span { display: flex; align-items: center; gap: 3px; background: #f7f4fb; border-radius: 7px; padding: 3px 5px; min-width: 0; }
.bnums i { font-style: normal; font-size: 14px; flex: none; display: flex; }
.bnums i .sico { width: 17px; height: 17px; }
.bnums small { font-size: 11px; color: var(--muted); white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; }
.bnums b { font-size: 16px; line-height: 1; white-space: nowrap; }
.bnums .neg b { color: #d33; }
.bnums .zero b { color: #d99a00; }
.bnums .crit { grid-column: 1 / -1; }
.bnums .crit b { color: #e5302a; }
@media (max-width: 400px) { .bnums { grid-template-columns: minmax(0, 1fr); gap: 2px; } .bnums span { padding: 2px 5px; } .bnums .crit { grid-column: auto; } }
.bnums .crit small { flex: none; } .bnums .crit { gap: 2px; } @media (max-width: 400px) { .bnums .crit b { font-size: 14px; margin-left: auto; } .bnums .crit small { font-size: 10px; } }

/* 튜토리얼 새 설계 (2026-10-09 사용자): 그림 설명 화면, 말하는 몬스터, 등 돌림 안내, 📒 설명 노트 */
.tutrow { display: flex; gap: 8px; margin-top: 12px; }
.tutrow .tutbtn { margin-top: 0; flex: 1; }
.tutrow .notebtn { flex: 0 0 auto; width: auto; padding: 11px 16px; border-style: solid; border-color: #e0b23a; background: #fff9e6; }
.notebtn .nico { font-size: 18px; margin-right: 4px; vertical-align: -2px; }
.coach .cscene { position: fixed; inset: 0; background: #0e0a16; display: flex; align-items: center; justify-content: center; padding: 24px 16px 210px; color: #fff; pointer-events: auto; overflow: hidden; animation: tscin .35s ease-out; }
.coach .cscene.dim { background: rgba(14, 10, 22, .92); }
.coach .cscene[hidden] { display: none; }
.coach.scene .cshade, .coach.play .cshade { display: none; }
@keyframes tscin { from { opacity: 0; } }
.cbub .cava { overflow: hidden; display: block; }
.cbub .cava > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.cbub .cava.dizzy { animation: tdizzy .8s linear infinite; }
@keyframes tdizzy { to { transform: rotate(360deg); } }
.coach .cnote { position: fixed; z-index: 2; background: #fff8d6; border: 3px solid #e0b23a; border-radius: 14px; padding: 10px 14px; font-weight: 800; color: #6b4a00; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: left .7s, top .7s, transform .7s, max-width .7s, font-size .7s, opacity .7s; pointer-events: none; }
.coach .cnote.mid { left: 50%; top: 45%; transform: translate(-50%, -50%) scale(1.12); max-width: 300px; }
.coach .cnote.corner { left: calc(100% - 10px); top: calc(100% - 10px - env(safe-area-inset-bottom)); transform: translate(-100%, -100%) scale(.9); max-width: 150px; font-size: 12.5px; opacity: .93; }
.card.tutoff { opacity: .35; filter: grayscale(1); }
.tsc { width: min(420px, 100%); text-align: center; }
.tsc h3 { margin: 0 0 12px; font-size: 18px; color: #ffd25a; }
.tsc h3 small { font-size: 12px; color: #d9cff0; }
.tsc h3 .sico { width: 24px; height: 24px; vertical-align: -5px; }
.tsc p { margin: 10px 0 0; font-size: 14px; color: #e9e2f7; }
.tsc .tsc-em, .tsc-em { font-size: 20px; font-weight: 900; color: #ffd25a; }
.tsc-hello img { width: 120px; height: 120px; border-radius: 50%; border: 4px solid #d6c2ff; object-fit: cover; background: #d6c2ff; animation: thello 1.2s ease-out; }
.tsc-hello b { display: block; font-size: 34px; margin-top: 14px; animation: thello 1.2s .2s ease-out both; }
.tsc-hello span { display: block; font-size: 16px; color: #d9cff0; margin-top: 6px; animation: thello 1.2s .5s ease-out both; }
@keyframes thello { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.tsc.tsc-dex { width: 100%; }
.tdxrow { overflow: hidden; margin: 8px -16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tdxin { display: flex; gap: 10px; width: max-content; animation: tdxa 70s linear infinite; }
.tdxrow.b .tdxin { animation-direction: reverse; animation-duration: 80s; }
@keyframes tdxa { to { transform: translateX(-50%); } }
.tdx { display: flex; flex-direction: column; align-items: center; width: 78px; background: #ffffff14; border-radius: 12px; padding: 6px 2px; }
.tdx svg { width: 62px; height: 62px; }
.tdx small { font-size: 11px; color: #e9e2f7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 74px; }
.tfl { display: flex; align-items: center; gap: 8px; justify-content: center; }
.tflb { flex: 1; border-radius: 14px; padding: 12px 8px; background: #2f7a3a; box-shadow: 0 0 0 3px #7fd68a inset; }
.tflb.fight { background: #8a2b2b; box-shadow: 0 0 0 3px #ff9a8a inset; flex: .75; }
.tflb b { display: block; font-size: 15px; }
.tflt { display: flex; gap: 4px; justify-content: center; margin: 8px 0 6px; }
.tflt span { background: #ffffff30; border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 800; animation: tpulse 1.6s ease-in-out infinite; }
.tflt span:nth-child(2) { animation-delay: .2s; } .tflt span:nth-child(3) { animation-delay: .4s; }
.tflb small { font-size: 11.5px; color: #ffffffcc; }
.tfla { font-size: 26px; color: #ffd25a; }
@keyframes tpulse { 50% { transform: scale(1.1); background: #ffffff55; } }
.tcalc { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tcv { display: flex; flex-direction: column; align-items: center; background: #fff; color: #2c1a5c; border-radius: 14px; padding: 10px 12px; min-width: 62px; animation: thello .6s ease-out both; }
.tcv:nth-of-type(2) { animation-delay: .4s; } .tcv:nth-of-type(3) { animation-delay: .8s; }
.tcv .sico { width: 30px; height: 30px; margin: 0; }
.tcv b { font-size: 28px; line-height: 1.1; }
.tcv.atk b { color: #d6332a; } .tcv.def b { color: #2d6fd6; } .tcv.hit { background: #ffe3a3; } .tcv.hit b { color: #c2410c; }
.tcv small { font-size: 12px; font-weight: 800; color: #6b5a8e; }
.tcalc i { font-style: normal; font-size: 28px; font-weight: 900; color: #ffd25a; }
.tdfront { font-weight: 900; color: #ffd25a; margin-bottom: 4px; }
.tdgrid { display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); gap: 4px; justify-content: center; }
.tdc { border-radius: 10px; background: #ffffff12; border: 2px dashed #ffffff30; }
.tdc.on { background: #e5484d; border: 2px solid #ffb3b5; animation: tdblink .9s ease-in-out infinite; }
.tdc.new { animation: tdnew .6s ease-out, tdblink .9s .6s ease-in-out infinite; }
.tdc.mid { background: none; border: 0; display: grid; place-items: center; }
.tdc.mid .tok, .tko .tok, .trot .tok, .tmvm .tok { position: relative; }
.tdc.mid .tok { width: 66px; height: 66px; }
@keyframes tdblink { 50% { background: #ff8a8d; box-shadow: 0 0 14px 2px #ff5a5f; } }
@keyframes tdnew { from { transform: scale(0); } 70% { transform: scale(1.25); } }
.trot { position: relative; width: 140px; height: 140px; margin: 0 auto; }
.trot > div { position: absolute; inset: 0; display: grid; place-items: center; }
.trot .tok { width: 116px; height: 116px; }
.trg { opacity: .3; filter: grayscale(.4); }
.trl { filter: drop-shadow(0 0 10px #ffd25a); }
.tsc .trlbl { font-size: 18px; font-weight: 900; color: #ffd25a; }
.tmv { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: min(300px, 100%); margin: 0 auto; border-radius: 8px; overflow: hidden; }
.tmvc { aspect-ratio: 1; background: #f4eefb; border: 1px solid #d7c9ea; display: grid; place-items: center; }
.tmvc:nth-child(odd) { background: #e8dff5; }
.tmvb { border: 0; background: #ffd25a; border-radius: 50%; width: 70%; height: 70%; display: grid; place-items: center; cursor: pointer; animation: tdblink2 .9s ease-in-out infinite; }
.tmvb .pawi { width: 70%; }
@keyframes tdblink2 { 50% { transform: scale(1.12); box-shadow: 0 0 12px 2px #ffd25a; } }
.tmvm { position: absolute; left: 0; top: 0; width: 25%; aspect-ratio: 1; display: grid; place-items: center; transition: left .6s cubic-bezier(.3, .7, .3, 1); pointer-events: none; }
.tmvm .tok { width: 86%; height: 86%; }
.thp { display: flex; align-items: center; gap: 10px; width: min(300px, 100%); margin: 0 auto; }
.thpb { flex: 1; height: 22px; background: #3a2d52; border-radius: 11px; overflow: hidden; border: 2px solid #ffffff40; }
.thpb i { display: block; height: 100%; background: linear-gradient(90deg, #4fae5a, #8be08f); border-radius: 9px; transition: width .45s ease-out; }
.thpb.hpl1 i { background: linear-gradient(90deg, #ff9a2e, #ffc27a); } /* 튜토리얼 그림도 체력바 색 규칙 (2026-10-19) */
.thpb.hpl2 i { background: linear-gradient(90deg, #e5484d, #ff8a8d); }
.thpn { font-size: 30px; min-width: 44px; color: #8be08f; }
.thpn.bump { animation: tbump .4s ease-out; }
@keyframes tbump { 40% { transform: scale(1.4); } }
.tko { width: 110px; height: 110px; margin: 0 auto 14px; position: relative; display: grid; place-items: center; }
.tko .tok { width: 100px; height: 100px; }
.tsc-ko .tko .tok, .tko.down .tok { animation: tkofall .9s .3s ease-in forwards; }
@keyframes tkofall { 30% { transform: rotate(-10deg); } to { transform: rotate(90deg) translateX(18px); filter: grayscale(1) brightness(.7); } }
.tsc .tkol { font-size: 24px; font-weight: 900; color: #ff8a8d; }
.tko.down { animation: tshake .45s ease-out; }
.tko.up .tok { animation: tkoup .9s ease-out; }
@keyframes tkoup { from { transform: rotate(90deg) translateX(18px); filter: grayscale(1); } 60% { transform: rotate(-8deg) translateY(-10px); } }
@keyframes tshake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } }
.tcrit { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 22px; color: #ffd25a; text-shadow: 0 2px 0 #b0461f; animation: thello .5s ease-out; }
.tscore { display: inline-flex; flex-direction: column; align-items: center; background: #fff8d6; color: #6b4a00; border-radius: 14px; padding: 8px 18px; font-weight: 800; box-shadow: 0 0 0 4px #ffd25a, 0 0 22px 6px #ffd25a99; animation: tdblink2 1.2s ease-in-out infinite; }
.tscore b { font-size: 30px; color: #e08a00; }
.tsc-fan .tfanpop { font-size: 34px; font-weight: 900; color: #ffd25a; animation: thello .7s ease-out; }
.tsc .cfang { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 14px auto 0; width: min(300px, 100%); font-weight: 800; color: #ffd25a; }
.tsc .cfang b { font-size: 22px; color: #ffd25a; }
.tsc .cfbar { flex: 1; height: 14px; background: #3a2d52; border-radius: 7px; overflow: hidden; }
.tsc .cfbar i { display: block; height: 100%; width: var(--b); background: linear-gradient(90deg, #ffd25a, #ff9f1a); border-radius: 7px; animation: cfbar 1.3s .3s ease-out both; }
.tfanx { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.tchip { background: #fff; color: #2c1a5c; border-radius: 999px; padding: 6px 12px; font-weight: 900; animation: thello .6s .8s ease-out both; }
.tchip.cr { color: #c2410c; animation-delay: 1.2s; }
.tdr { display: flex; align-items: center; gap: 12px; background: #ffffff14; border-radius: 12px; padding: 6px 12px; margin: 6px auto; width: min(260px, 100%); text-align: left; animation: thello .4s ease-out both; }
.tdr:nth-of-type(2) { animation-delay: .1s; } .tdr:nth-of-type(3) { animation-delay: .2s; } .tdr:nth-of-type(4) { animation-delay: .3s; } .tdr:nth-of-type(5) { animation-delay: .4s; } .tdr:nth-of-type(6) { animation-delay: .5s; }
.tdr .dface { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 40px; height: 40px; background: #fff; border: 0; border-radius: 8px; padding: 5px; gap: 2px; flex: 0 0 auto; box-shadow: none; }
.tdr .dface i { border-radius: 50%; margin: 1px; } .tdr .dface i.on { background: #2c1a5c; }
.tclk { width: 220px; height: 220px; margin: 0 auto; }
.tclkf { position: relative; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(#fff8e8, #f1dfb8); border: 6px solid #b07a2a; box-shadow: 0 0 30px #ffd25a66; }
.tck { position: absolute; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 4px #0003; transition: transform .2s, box-shadow .2s; font-size: 24px; }
.tck .sico { width: 32px; height: 32px; margin: 0; }
.tck.on { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 3px #ffd25a; }
.tck.stop { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 0 4px #ff5f7a, 0 0 20px 6px #ffd25a; }
.tch { position: absolute; left: 50%; top: 50%; width: 6px; height: 64px; margin-left: -3px; margin-top: -64px; background: #6b3d14; border-radius: 3px; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.tcm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 3px solid #b07a2a; box-shadow: 0 0 14px #ffd25a; }
.tcm .sico { width: 36px; height: 36px; margin: 0; }
.tneed { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.tneed span { background: #fff; color: #2c1a5c; border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: 14px; }
.tneed .sico { width: 20px; height: 20px; vertical-align: -4px; }
.tneed .no { box-shadow: 0 0 0 3px #ff5f7a; } .tneed .ok { box-shadow: 0 0 0 3px #4fae5a; }
.trd { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 7px 0; animation: thello .5s ease-out both; }
.trd:nth-of-type(2) { animation-delay: .25s; } .trd:nth-of-type(3) { animation-delay: .5s; } .trd:nth-of-type(4) { animation-delay: .75s; }
.trd b { width: 58px; color: #ffd25a; font-size: 14px; }
.trd span { background: #ffffff1c; border-radius: 8px; padding: 5px 7px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.trd i { font-style: normal; color: #ffd25a; }
@media (prefers-reduced-motion: reduce) { .tdxin, .tdc.on, .tdc.new, .tmvb, .tscore, .tflt span, .cbub .cava.dizzy { animation: none; } }
.notem .nhead { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.notem .nava { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid var(--p); background: #d6c2ff; flex: 0 0 auto; }
.notem .nava > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.notem .nhead b { flex: 1; font-size: 16px; color: var(--p); }
.notem .nhead small { color: var(--muted); }
.notem .nbody { background: #fbf9fd; border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.6; min-height: 150px; }
.notem .nbody p { margin: 0 0 8px; }
.notem .ndots { display: flex; justify-content: center; gap: 5px; margin: 10px 0; }
.notem .ndots i { width: 7px; height: 7px; border-radius: 4px; background: #d8d2e4; transition: width .2s; }
.notem .ndots i.on { background: var(--p); width: 16px; }
.notem .nbtns { display: flex; gap: 8px; margin-bottom: 8px; }
.notem .nbtns .btn { flex: 1; }
.ntiers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.ntiers span { display: flex; flex-direction: column; align-items: center; border: 2px solid var(--rc); border-radius: 10px; padding: 4px 6px; min-width: 62px; }
.ntiers .rico { width: 28px; height: 28px; }
.ntiers b { font-size: 12px; color: var(--rc); }
.ntiers small { font-size: 10.5px; color: var(--muted); }
.ntbl { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.ntbl th { text-align: left; width: 40px; color: var(--p); }
.ntbl td, .ntbl th { padding: 4px; border-bottom: 1px solid #eee; }
.nseason { background: #fff6d6; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; margin-top: 6px; }
/* 아직 진화해 본 적 없는 몬스터 (2026-10-09 사용자): 도감 카드는 실루엣 + 재료만 */
.dx-card.unseen .dx-art .sil { display: inline-flex; }
.dx-card.unseen .dx-sub { color: #8a7aa8; }
.esrow .esart .sil b, .etn .sil b { font-size: 20px; }
/* 순위표 탭 · 몬스터 통계 (2026-10-09 사용자) */
.lbtabs { display: flex; gap: 6px; margin: 4px 0 6px; }
.lbtabs button { flex: 1; border: 2px solid #e4d8f5; background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 0; font-weight: 800; font-size: 13px; cursor: pointer; }
.lbtabs button.on { background: var(--p); border-color: var(--p); color: #fff; }
.msrow2 .msart { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.msrow2 .msart .sil b { font-size: 16px; }
.msrow2 .lbnick { min-width: 0; flex: 1; }
.msbar2 { flex: 0 0 52px; height: 6px; background: #eee4f7; border-radius: 3px; overflow: hidden; }
.msbar2 i { display: block; height: 100%; background: linear-gradient(90deg, #b49bff, #7c4dff); }
.acctm .acctgrid > div.wrsplit b { color: #6a3fd0; }
.lbwho { display: flex; gap: 6px; justify-content: center; margin: 0 0 6px; }
.lbwho button { border: 2px solid #e4d8f5; background: #fff; color: var(--muted); border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: 12.5px; cursor: pointer; }
.lbwho button.on { background: #efe7ff; border-color: #b49bff; color: #5b34c4; }
/* 튜토리얼 말풍선은 위에 고정 (2026-10-09 사용자): 장면 그림은 말풍선 아래에 */
.coach .cscene { padding: 24px 16px calc(var(--bubh, 180px) + 24px + env(safe-area-inset-bottom)); }
.coach .cnote.mid { top: calc(50% - var(--bubh, 180px) / 2); }
/* 상점 몬스터 설명 (2026-10-09 사용자) */
.shopitem.hasinfo { cursor: pointer; }
.shopitem .shopinfo { font-size: 10.5px; color: var(--muted); margin-top: -2px; }
/* 배틀 음악 (2026-10-09 사용자): 상점 미리 듣기, 가방에서 켜고 끄기 */
.shopitem.playing { outline: 3px solid #7c4dff; animation: shopplay 1s ease-in-out infinite alternate; }
@keyframes shopplay { to { outline-color: #d6c2ff; } }
.shopitem.playing .shopinfo::before { content: '🔊 '; }
.bgmlist .bgmt { border: 2px solid #e4d8f5; background: #fff; cursor: pointer; font: inherit; }
.bgmlist .bgmt em { font-style: normal; font-size: 11px; font-weight: 800; color: #9a8cb3; }
.bgmlist .bgmt.on { border-color: #7c4dff; background: #f3edff; }
.bgmlist .bgmt.on em { color: #5b34c4; }
.bagm .rl small { font-weight: 400; font-size: 11px; color: var(--muted); }
.bgmlist .bgmt b { font-size: 12px; line-height: 1.25; color: var(--p); } .bgmlist .bgmt span { font-size: 22px; }
/* 튜토리얼 재료 설명: 장소마다 재료 아이콘이 튀어나옴 (2026-10-09 사용자) */
.tmatpop { position: fixed; z-index: 10001; width: 56px; height: 56px; display: grid; place-items: center; pointer-events: none; font-size: 40px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.tmatpop img.sico { width: 56px; height: 56px; }
/* "다시 몸을 돌려서" 안내: 전장의 시작 칸 위에 반투명하게 (2026-10-09 사용자) */
.coach .cnote.oncell { transform: translate(-50%, -50%); max-width: 130px; font-size: 11.5px; padding: 5px 7px; border-width: 2px; opacity: .78; text-align: center; transition: left .3s, top .3s; }

/* 설명 노트 (v338, 2026-10-09 사용자: 짧은 줄 + 아이콘) */
.notem .nlist { margin: 0; padding: 0; list-style: none; }
.notem .nlist li { position: relative; padding: 4px 0 4px 16px; border-bottom: 1px dashed #e6dff0; }
.notem .nlist li:last-child { border-bottom: 0; }
.notem .nlist li::before { content: '•'; position: absolute; left: 3px; top: 4px; color: #9b7fd0; font-weight: 900; }
.notem .nic svg { width: 20px; height: 20px; vertical-align: -5px; }
.notem .nbody img.sico, .notem .nbody img.coinico, .notem .nbody img.rico { width: 20px; height: 20px; vertical-align: -5px; object-fit: contain; }

/* 노트 예시 그림 (v339) */
.notem .nfig { margin: 8px auto 4px; max-width: 280px; }
.notem .nfigs { display: flex; align-items: center; gap: 4px; }
.notem .nfigs .nfig { flex: 1; margin: 8px 0 4px; }
.notem .nto { font-weight: 900; color: #9b7fd0; font-size: 18px; }
.notem .nboard { position: relative; display: grid; grid-template-columns: repeat(var(--bw), 1fr); grid-template-rows: repeat(var(--bh), 1fr); aspect-ratio: var(--bw) / var(--bh); background: var(--paper, #fbf3df); border: 2px solid #2a2320; border-radius: 5px; overflow: hidden; }
.notem .nbc { position: relative; border-right: 1px solid #2a232033; border-bottom: 1px solid #2a232033; }
.notem .nbc.alt { background: var(--paperB, #f3e7c7); }
.notem .nmon { position: absolute; box-sizing: border-box; border: 2px solid var(--mc); border-radius: 8px; background: #ffffffb0; z-index: 2; }
.notem .nmon svg { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; }
.notem .nmon b { position: absolute; bottom: -2px; left: 50%; transform: translate(-50%, 50%); font-size: 9px; white-space: nowrap; background: #fff; border: 1px solid var(--mc); border-radius: 6px; padding: 0 3px; line-height: 1.3; }
.notem .nar { width: 7%; height: 9%; z-index: 4; }
.notem .ntag { position: absolute; transform: translate(-50%, -50%); z-index: 5; font-weight: 900; font-size: 12px; white-space: nowrap; }
.notem .ntag.hit { color: #fff; background: #e5484d; border-radius: 8px; padding: 0 5px; border: 2px solid #2a2320; }
.notem .ntag.say { color: #c8452c; font-size: 11px; }
.notem .ntag.boom { font-size: 20px; }
.notem figcaption { font-size: 11.5px; color: #6a5a80; text-align: center; margin-top: 3px; line-height: 1.35; }
.notem .nex { margin-top: 8px; background: #fff8d6; border: 2px solid #e0b23a; border-radius: 10px; padding: 6px 9px; font-size: 13px; }
.notem .nbody { max-height: 62vh; overflow-y: auto; }
.notem .nfig.sm { max-width: 190px; }

/* 로비 초상화 몬스터 (v340) */
.hpeek.hpeekm { -webkit-mask-image: none; mask-image: none; margin-bottom: -14px; aspect-ratio: 1; display: block; }
.hpeek.hpeekm svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 #0000002a); }

/* 2차 진화 미션 (v341) */
.missm .msic svg { width: 30px; height: 30px; }
.missm .msic img.sico { width: 26px; height: 26px; }
.missm .msic img.rico { width: 32px; height: 32px; margin: 0; }
.missm .mstt { display: block; font-style: normal; font-size: 11px; color: #b07a00; font-weight: 800; }
.missm { max-height: 86vh; overflow-y: auto; }

/* 클리어한 미션 접기 (v343) */
.missm .msgotd { margin: 4px 0 8px; }
.missm .msgotd > summary { cursor: pointer; list-style: none; padding: 7px 12px; border-radius: 12px; background: #eef8ee; color: #2f7a3b; font-weight: 800; font-size: 13px; }
.missm .msgotd > summary::-webkit-details-marker { display: none; }
.missm .msgotd > summary::after { content: ' ▾ 펼치기'; font-weight: 600; color: #6a9a70; font-size: 12px; }
.missm .msgotd[open] > summary::after { content: ' ▴ 접기'; }
.missm .msgotd[open] > summary { margin-bottom: 6px; }

/* 게임 종료 (2026-10-09 사용자): 로비 하단 메뉴 6칸, 타이틀 아래 작은 버튼 */
.hnav button span { white-space: nowrap; font-size: 12px; letter-spacing: -.3px; }
.gate .gexit { position: relative; display: block; margin: 10px auto 0; padding: 6px 16px; border: 2px solid #3b2a66; border-radius: 999px; background: #ffffffcc; color: #3b2a66; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }

/* 랭크 대기실 '게임 시작' (2026-10-09 사용자) */
.mwait .mready { display: block; margin: 8px auto 2px; min-width: 210px; }
.mwait .mready small { opacity: .8; font-weight: 700; margin-left: 4px; }

/* 다른 플레이어 프로필 (2026-10-09 사용자) */
.profm .pfhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.profm .pfhead h2 { margin: 0 0 4px; }
.profm .pfav { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; align-items: center; justify-content: center; background: #f3edff; }
.profm .pfpts { color: var(--muted); font-weight: 800; }
.profm .pftt { margin: 4px 0 0; font-weight: 800; color: #7a4fd0; }
.profm .pfmon svg { width: 30px; height: 30px; vertical-align: middle; }
.friendm .frnick { cursor: pointer; }
.friendm .frnick small { color: var(--muted); font-weight: 700; }
.lseat.hasprof { cursor: pointer; }
.profm .acctgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.profm .acctgrid > div { background: #f8f5fb; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.profm .acctgrid span, .profm .acctgrid small { font-size: 11.5px; color: var(--muted); }
.profm .acctgrid b { font-size: 20px; color: var(--p); }
.profm .acctgrid > div.wrsplit b { color: #6a3fd0; }

/* 상점: 해금 안 된 몬스터 초상화 (2026-10-09 사용자) */
.shopitem.pflock .shopart .sil b { font-size: 22px; }
.shopitem.pflock .shoplock { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: var(--muted); }

/* 상점 몬스터 계열 카드: 1차 앞, 2차 실루엣 뒤 (2026-10-09 사용자) */
.shopart.shopline { position: relative; width: 116px; height: 74px; display: block; }
.shopline > span { position: absolute; display: block; line-height: 0; }
.shopline .slk { z-index: 1; filter: brightness(0); opacity: .5; }
.shopline .slk svg { width: 46px; height: 46px; }
.shopline .slf { z-index: 2; bottom: 0; }
.shopline .slf svg { width: 58px; height: 58px; }
.shopline.n1 .slf { left: 18px; }
.shopline.n1 .k0 { right: 14px; top: 0; }
.shopline.n2 .slf { left: 29px; }
.shopline.n2 .k0 { left: 4px; top: 0; }
.shopline.n2 .k1 { right: 4px; top: 0; }

/* 중형 이상: 회전력이 모자란 180°·360° (2026-10-09) */
.rotmenu .btn.rotneed { opacity: .5; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rotmenu .btn.rotneed small { font-size: 11px; font-weight: 700; }

/* 랭크 대기 화면 (2026-10-09 사용자 그림): 검은 배경, 플레이어마다 카드 (1 2 / 3 4). 상태(찾는 중·남은 시간·게임 시작)는 첫 빈칸 또는 카드 아래 */
/* 2026-10-28 사용자: 배경은 검은색 대신 연보라 (플레이어 카드는 검은 그대로) */
html:has(.mwait), body:has(.mwait) { background: #e9e0fb; }
body:has(.mwait) .app > footer { background: transparent; color: var(--muted); }
.panel.mwait { position: relative; background: #e9e0fb; color: var(--p); border-color: #e9e0fb; box-shadow: none; text-align: center; }
.mwait .mwhead { margin: 0 0 8px; color: var(--p); font-weight: 800; }
.mwait .mwhead b { color: var(--p); }
.mwgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 520px; margin: 0 auto; }
.mwc { display: flex; flex-direction: column; min-width: 0; border: 3px solid #fff; border-radius: 4px; background: #000; overflow: hidden; aspect-ratio: 1 / 1.02; }
.mwc.me { border-color: #7ee08a; box-shadow: 0 0 10px #7ee08a88; }
.mwc.ai { border-color: #b9b0ff; }
.mwbig { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; padding: 6px 6px 0; }
.mwbig svg, .mwbig img { width: 78%; height: auto; max-height: 100%; }
.mwtt { position: absolute; left: 6px; bottom: 4px; max-width: 70%; padding: 2px 8px; border: 2px solid #fff; border-radius: 6px; background: #1b1b1b; color: #ffe27a; font-size: 12px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; padding: 5px 6px; border-top: 3px solid #fff; }
.mwc.me .mwrow { border-top-color: #7ee08a; } .mwc.ai .mwrow { border-top-color: #b9b0ff; }
.mwic { width: 36px; height: 36px; display: grid; place-items: center; font-size: 22px; line-height: 1; }
.mwic .bdw, .mwic .mwav { width: 36px; height: 36px; display: block; border-radius: 50%; }
.mwic .mwav { overflow: hidden; background: #fff; }
.mwic .mwav svg, .mwic .mwav img { width: 100%; height: 100%; display: block; }
.mwnick { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwnick small { font-size: 10px; color: #7ee08a; }
.mwtier { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 2px 4px; border: 2px solid #fff; border-radius: 8px; min-width: 38px; }
.mwtier .mw-rico { width: 20px; height: 20px; }
.mwtier small { font-size: 9px; font-weight: 900; margin-top: 1px; white-space: nowrap; }
.mwc.mwempty { border-style: dashed; border-color: #a593d6; background: #ffffff8c; display: grid; place-items: center; padding: 6px; } /* 빈자리도 연보라 배경에 맞게 (2026-10-28) */
.mwdots { font-size: 28px; color: #a593d6; }
.mwstat h2 { margin: 0 0 4px; font-size: 16px; color: var(--p); }
.mwait .mwstat .mcount { font-size: 12px; padding: 4px 8px; margin: 2px auto 4px; }
.mwait .mwstat .mready { min-width: 0; width: 100%; padding: 8px 6px; font-size: 14px; margin: 4px 0; }
.mwait .mwstat .elnote { color: var(--muted); margin: 2px 0 0; }
.mwait .mwstat .mleft { color: var(--p); font-size: 15px; }
.mwait > .mwstat { margin: 10px auto 0; max-width: 420px; }
.mwait > .mwstat .mcount { font-size: 15px; }
.mwait .mwnote { color: var(--muted); }
.mwait > #btnNetLeave { margin-top: 10px; }
.mwgo { position: fixed; inset: 0; z-index: 8000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #000b; color: #fff; pointer-events: none; }
.mwgo small { font-size: 20px; font-weight: 900; }
.mwgo b { font-size: 140px; line-height: 1; font-weight: 900; color: #ffe27a; text-shadow: 0 0 24px #ffb300; animation: mwgopop 1s ease-out infinite; }
@keyframes mwgopop { from { transform: scale(1.35); opacity: .3; } 30% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mwgo b { animation: none; } }
@media (max-width: 380px) { .mwstat h2 { font-size: 14px; } .mwnick { font-size: 12px; } }

/* 감시 (하시낙 패시브, 2026-10-10 사용자): 공격력이 줄어든 턴 동안 초록색으로 반짝 (독의 보라 반짝처럼) */
.unit.watched .tkp, .rp.watched .rtk { animation: watchBlink 1.4s ease-in-out infinite; }
@keyframes watchBlink {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 6px #2fd36a) drop-shadow(0 0 2px #16a34a) sepia(1) saturate(4) hue-rotate(75deg) brightness(1.05); }
}
.ust.atk.watchatk { color: #16a34a; }
@media (prefers-reduced-motion: reduce) { .unit.watched .tkp, .rp.watched .rtk { animation: none; filter: drop-shadow(0 0 5px #2fd36a); } }
/* 2:2 랭크 대기 화면 팀 표시 (2026-10-10 사용자): 윗줄 A팀, 아랫줄 B팀. 우리 팀 파랑, 상대 팀 빨강 (게임 안 색과 같게) */
.mwc.myteam { border-color: #5aa0ff; } .mwc.foeteam { border-color: #ff6b6b; }
.mwc.myteam .mwrow { border-top-color: #5aa0ff; } .mwc.foeteam .mwrow { border-top-color: #ff6b6b; }
.mwc.me.myteam { border-color: #7ee08a; box-shadow: 0 0 10px #7ee08a88; } .mwc.me .mwrow { border-top-color: #7ee08a; }
.mwteam { position: absolute; left: 6px; top: 4px; z-index: 2; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #fff; background: #ff6b6b; }
.mwc.myteam .mwteam { background: #5aa0ff; }
.mwc.mwempty { position: relative; }
/* v380 가방: 몬스터 누르면 설명, 프로필 아이콘 펼치기 */
.bagit.baginfo { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.bagit.baginfo small { font-size: 9.5px; color: #8a7a5a; }
.bagit span svg { max-width: 100%; max-height: 100%; }
.bdpick.bdmore { justify-content: center; background: #f6f1e4; border-style: dashed; }
.bdpick .bdmi { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e6dcc4; font-weight: 800; font-size: 12px; color: #6a5a3a; }
/* v381 랭크 대기 (2026-10-10 사용자): 초상화 칸은 흰 배경, 티어·칭호의 흰 박스 없앰 (스케치의 표시였음) */
.mwbig { background: #fff; }
.mwtt { border: 0; background: rgba(0,0,0,.72); }
.mwtier { border: 0; padding: 2px 0; }
/* v383 성장 카드 재료 얻음 (내 몬스터 옆, 작고 흐릿하게) */
.tmatpop.gmatpop { width: 32px; height: 32px; font-size: 22px; z-index: 50; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.tmatpop.gmatpop img.sico { width: 32px; height: 32px; }

/* 방사능 구름 (2026-10-10 사용자, 턴 제한 피해 개편): 가장자리부터 초록 구름 칸. 이동·행동은 막지 않음 */
.board .radlayer { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.board .radlayer .radc { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); z-index: 0; opacity: .92; pointer-events: none; box-sizing: border-box; border: 0 solid #d9ff7a;
  background: radial-gradient(circle at 28% 34%, #9be07aee 0 22%, transparent 23%), radial-gradient(circle at 70% 62%, #8ad86bee 0 26%, transparent 27%), radial-gradient(circle at 52% 22%, #a8e88aee 0 18%, transparent 19%), #4fae55e6;
  animation: radpuff 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--rp, 0) * -3.2s); }
.board .radlayer .radc.et { border-top-width: 3px; } .board .radlayer .radc.eb { border-bottom-width: 3px; } .board .radlayer .radc.el { border-left-width: 3px; } .board .radlayer .radc.er { border-right-width: 3px; }
.board .radlayer .radc.rnew { animation: radin 1.4s ease-out both, radpuff 3.2s 1.4s ease-in-out infinite alternate; animation-delay: var(--rd, 0ms), calc(1.4s + var(--rd, 0ms)); }
.board .radlayer .radc.ronmon { opacity: .38; } /* 아래 몬스터가 잘 보이게 */
.board .radlayer .radc.ronmon.rnew { animation-name: radinm, radpuff; }
@keyframes radinm { from { opacity: 0; } to { opacity: .38; } }
@keyframes radpuff { from { filter: brightness(1); } to { filter: brightness(1.12) saturate(1.1); } }
@keyframes radin { from { opacity: 0; transform: scale(.6); } 60% { opacity: .92; transform: scale(1.06); } to { opacity: .92; transform: scale(1); } }
.radtag { color: #1f7a2e; font-weight: 900; }
.radpop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 40, 18, .45); animation: radpopin .35s ease-out; }
.radpop .radin { background: #f3ffe9; border: 4px solid #4fae55; border-radius: 18px; padding: 16px 20px; text-align: center; max-width: 320px; box-shadow: 0 0 0 6px #4fae5544, 0 12px 30px rgba(0, 0, 0, .35); }
.radpop .radico { display: block; font-size: 46px; line-height: 1.1; animation: radspin 4s linear infinite; }
.radpop b { display: block; font-size: 22px; color: #1f6b2a; margin: 4px 0; }
.radpop small { display: block; font-size: 13px; color: #355a33; line-height: 1.45; }
.radpop.out { opacity: 0; transition: opacity .35s; }
@keyframes radpopin { from { opacity: 0; } to { opacity: 1; } }
@keyframes radspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .board .radlayer .radc, .board .radlayer .radc.rnew, .radpop .radico { animation: none; } }
/* 방사능 구름 장식(사용자 그림)과 쥐 */
.board .radlayer .radc { overflow: hidden; }
.board .radlayer .radc .radd { position: absolute; height: auto; object-fit: contain; pointer-events: none; opacity: .95; }
.board .radlayer .radrat { position: absolute; height: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
/* 2026-10-10 사용자: 벽(숲)이 된 칸은 벽만. 숲 칸을 방사능 구름 레이어보다 위로 */
.board:has(.radlayer) > .bc.wallc { z-index: 4; }

/* 킬 로그 (2026-10-10 사용자): 오른쪽 위에 살짝 미끄러져 들어왔다가 사라짐 */
.kfeed { position: fixed; top: calc(56px + env(safe-area-inset-top)); right: 8px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; max-width: calc(100vw - 16px); }
.kfrow { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; background: rgba(32, 24, 48, .86); color: #fff; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: kfin .35s ease-out both; }
.kfrow.out { animation: kfout .45s ease-in both; }
.kfrow b { font-weight: 700; color: #ffe08a; }
.kftxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kfface { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; display: inline-flex; box-shadow: 0 0 0 2px var(--kfc, #8a6bd1); }
.kfface.p1 { --kfc: #2d6fa3; } .kfface.p2 { --kfc: #c8452c; } .kfface.p3 { --kfc: #2f8a3c; } .kfface.p4 { --kfc: #c98a00; }
.kfface svg { width: 30px; height: 30px; }
@keyframes kfin { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes kfout { to { opacity: 0; transform: translateX(60px); } }

/* 진화 목표 고정 (2026-10-10 사용자) */
.esrow { position: relative; }
.espin { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 10px; border: 1.5px solid #d9cbb8; background: #fff; font-size: 12px; line-height: 1.2; color: #8a7a66; z-index: 2; }
.espin small { font-size: 10px; font-weight: 700; }
.espin.on { background: #ffe9a8; border-color: #e0a92a; color: #7a4f00; }
.esrow.pinned { box-shadow: 0 0 0 2px #e0a92a inset; }
.evoprog .epr.pinned { background: #fff4d0; border-radius: 6px; padding: 1px 3px; }
.evoprog .eppin { font-style: normal; font-size: 11px; flex: none; }

/* 2026-10-11 사용자: 치명타가 최대면 '최대 치명타' */
.cmax { display: block; font-size: 10px; font-weight: 800; color: #d9481c; white-space: nowrap; line-height: 1.1; }
.bnums .crit { flex-wrap: wrap; } .bnums .crit .cmax { flex-basis: 100%; text-align: right; }
/* 📌 고정한 진화가 진화 단계에서 맨 위 (2026-10-11) */
.evocard.pinned { border: 2px solid #e0a020; background: rgba(224, 160, 32, .08); }
.evocard .evopin { grid-column: 1 / -1; font-style: normal; font-size: 11px; font-weight: 800; color: #b07800; }
/* 체력 막대 테두리 (2026-10-11 사용자): 상대 빨강, 같은 팀 파랑, 나 초록 */
.hpw.side-foe .pips { box-shadow: 0 0 0 1.5px #e5484d; }
.hpw.side-ally .pips { box-shadow: 0 0 0 1.5px #3b82f6; }
.hpw.side-me .pips { box-shadow: 0 0 0 1.5px #2fbf4f; }
/* 2:2 조합 통계 (v410) */
.pairrow .msart { width: 58px; display: flex; gap: 2px; }
.lbwho { flex-wrap: wrap; }
.lbwho button { padding: 4px 10px; }
/* 사용자 그림 공격 방향 화살표 (2026-10-11) */
.bmark.art { background: none; clip-path: none; filter: none; width: 36%; height: auto; max-width: none; }
.apair { position: absolute; height: auto; max-width: none; z-index: 12; pointer-events: none; }
/* 회전 미리보기 (2026-10-13): 돌면 없어지는 마주 보는 그림은 원래 모습(.unit.rfrom)처럼 흐리게 */
.apair.rdim { opacity: .3; filter: grayscale(.6); }

/* 배팅 팝업 (2026-10-11 사용자) */
.betpop { position: fixed; left: 0; right: 0; top: 22%; z-index: 91; display: flex; justify-content: center; padding: 0 16px; pointer-events: auto; animation: betpopin .3s ease-out; }
.betpop .betpin { background: #fff8e8; border: 4px solid var(--pc, #e0a020); border-radius: 18px; padding: 12px 18px; max-width: 330px; text-align: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.betpop .betpico { display: block; font-size: 36px; line-height: 1.1; }
.betpop b { display: block; font-size: 19px; color: #3a2a1a; line-height: 1.35; margin-top: 4px; word-break: keep-all; }
/* 복수선언 (2026-10-13 사용자): 붉은 상자, 글자는 흰색, 이름은 노랑 */
.betpop.rev .betpin { background: #c8243a; border-color: #7a0f1f; }
.betpop.rev b { color: #fff; }
.betpop.rev b span { color: #ffe08a !important; }
.betpop.out { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
@keyframes betpopin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.betpanel .revbtn { border-color: #e2552b; }
.betpanel .revbtn small { display: block; }
/* 마지막 쓰러짐 연출 (2026-10-11 사용자): 줌인할 때 전장 밖으로 넘치지 않게 */
.cineclip { position: relative; overflow: hidden; border-radius: 6px; }

/* 랭크 (2026-10-11 사용자): 남은 시즌 기간, 매칭 카드 아래 줄 흰 바탕·티어 아이콘 간격, 승급전 표시 */
.rseason { margin: 2px 0 4px; font-size: 13px; color: var(--muted); }
.rseason b { color: var(--p); }
.mwrow { background: #fff; color: #241f2b; }
.mwnick { color: #241f2b; }
.mwtier { color: #241f2b; }
.mwtier .mw-rico { width: 20px; height: 20px; object-fit: contain; }
.mwtier small { margin-top: 5px; }
.mwpromo { position: absolute; right: 6px; top: 4px; z-index: 2; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.72); color: #ffe27a; font-size: 11px; font-weight: 900; white-space: nowrap; }
.mwseq { position: absolute; left: 6px; top: 5px; z-index: 2; display: flex; gap: 2px; }
.mwseq.low { top: 26px; }
.mwseq .sq { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.mwseq .sq.w { background: #2f9e57; } .mwseq .sq.l { background: #d9443a; } .mwseq .sq.e { background: rgba(0,0,0,.18); }

/* 피버 타임 (2026-10-11 사용자): 랭크 대전 칸 테두리에 노란 빛이 돎, 로비 가운데 알림 */
@property --fva { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hcard.hr.fever { box-shadow: 0 5px 0 var(--cb), 0 0 16px 3px #ffd84dcc; }
.hcard.hr.fever::after { content: ''; position: absolute; inset: 0; border-radius: 17px; padding: 4px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--fva), transparent 0deg, transparent 200deg, #fff6b0 270deg, #ffd400 310deg, #fff 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: feverSpin 2.4s linear infinite; }
@keyframes feverSpin { to { --fva: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hcard.hr.fever::after { animation: none; } }
.feverpop { position: fixed; inset: 0; z-index: 92; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(40, 24, 0, .35); animation: betpopin .35s ease-out; }
.feverpop .feverin { background: linear-gradient(180deg, #fff6c8, #ffd95a); border: 4px solid #e08a00; border-radius: 20px; padding: 16px 22px; text-align: center; max-width: 320px; box-shadow: 0 0 0 6px #ffd84d66, 0 12px 30px rgba(0, 0, 0, .35); }
.feverpop .fvico { display: block; font-size: 44px; line-height: 1.1; }
.feverpop b { display: block; font-size: 24px; color: #7a3a00; margin: 4px 0; }
.feverpop small { display: block; font-size: 13px; color: #6b4300; line-height: 1.45; }
.feverpop small b { display: inline; font-size: 13px; margin: 0; }
.feverpop.out { opacity: 0; transition: opacity .35s; }
/* 악마 등장 팝업 (2026-10-12 사용자): 평소 시간에 가끔 나오는 악마. 어두운 보라 */
.demonpop { position: fixed; inset: 0; z-index: 92; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 0, 20, .55); animation: betpopin .35s ease-out; }
.demonpop .demonin { background: linear-gradient(180deg, #3a1030, #14040f); border: 4px solid #000; border-radius: 20px; padding: 14px 20px 16px; text-align: center; max-width: 320px; box-shadow: 0 0 0 3px #c02060, 0 0 26px #c0206088, 0 12px 30px rgba(0, 0, 0, .5); }
.demonpop img { display: block; width: 150px; height: 150px; margin: 0 auto 2px; object-fit: contain; }
.demonpop .dmico { display: block; font-size: 52px; line-height: 1.1; }
.demonpop b { display: block; font-size: 26px; color: #ff5a8a; margin: 2px 0 6px; letter-spacing: .02em; }
.demonpop small { display: block; font-size: 13px; color: #f3d6e4; line-height: 1.5; }
.demonpop small b { display: inline; font-size: 13px; margin: 0; color: #ffd84d; }
.demonpop.out { opacity: 0; transition: opacity .35s; }
.modal .dmget { text-align: center; margin: 0; }
.modal .dmget img { width: 120px; height: 120px; object-fit: contain; border: 2px solid #000; border-radius: 50%; background: #fff; }

/* 2026-10-11 사용자: 공격 방향 그림의 그림자가 2개로 보여서, 그림 화살표가 있는 고리는 css 그림자를 끔 (그림 속 회색 그림자만) */
.tring svg.ring.art { filter: none; }
/* 악마 (2026-10-11 피버 타임 특별 AI) 매칭 카드 */
.mwc.demon { border-color: #ff3b3b; box-shadow: 0 0 12px #ff3b3b99; }
.mwc.demon .mwbig { background: radial-gradient(circle at 50% 45%, #6a0b12 0%, #1a0003 70%); }
.mwc.demon .mwrow { border-top-color: #ff3b3b; }
.mwdemon { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 10px #ff2a2a); }
/* 악마 초상화 (2026-10-12 사용자 그림): 큰 칸을 채움. 이름 옆 아이콘은 서네 한 얼굴 + 검정 테두리 */
.mwc.demon .mwbig { padding: 0; overflow: hidden; }
.mwc.demon .mwbig img.mwdemon.art { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; filter: none; }
.mwc.demon .mwbig .mwtt, .mwc.demon .mwbig .mwteam { z-index: 1; }
.mwc.demon .mwic .mwav.dmav { box-sizing: border-box; border: 2px solid #000; }
/* 피버 타임 혼자 대기 (2026-10-12 사용자): 혼자서도 시작할 수 있다고 '게임 시작' 버튼을 가끔 검게 강조 (4초마다) */
.mready.solo { animation: soloPulse 4s ease-in-out infinite; }
@keyframes soloPulse { 80%, 90% { background: #000; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255, 255, 255, .65); transform: scale(1.05); } } /* 대기 화면 바탕이 검정이라 흰 테두리로 보이게 */
@media (prefers-reduced-motion: reduce) { .mready.solo { animation: none; background: #000; color: #fff; box-shadow: 0 0 0 2px #fff; } }
/* 땅굴 숨기 은신 (2026-10-12 사용자): 상대 화면에서는 안 보임, 나·아군 화면에서는 반투명 */
.unit { transition: opacity .35s; }
.unit.sfoe { opacity: 0 !important; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.unit.sown { opacity: .5; }
.unit.sown .hpw, .unit.sown .hpn { opacity: 1; }

/* 매드무비 (2026-10-13): 최종 결산 직전, 가장 큰 누적 피해가 나온 턴을 다시 재생 */
.madov { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; background: #000; padding: 12px; animation: evofade .3s ease-out; }
.madov.out { opacity: 0; transition: opacity .3s; }
.madbox { width: min(560px, 100%); display: grid; gap: 10px; }
.madhead { display: grid; gap: 4px; text-align: center; color: #fff; }
.madhead b { font-size: 26px; font-weight: 900; color: #ffd25a; letter-spacing: .04em; text-shadow: 0 2px 0 #7a3b00; }
.madhead span { font-size: 14px; color: #e9e2f7; }
.madhead strong { color: #ff8a5c; font-size: 18px; }
.madstage { position: relative; }
.madskip { justify-self: center; }
.madbtns { display: flex; justify-content: center; gap: 10px; } /* 저장 · 넘기기 (2026-10-26) */
.madbtns .madsave:disabled { opacity: .75; }
/* 저장한 하이라이트 목록 (2026-10-26 사용자) */
.hlm .hllist { display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; margin: 8px 0; }
.hlrow { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: #f6f1fb; }
.hlart { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.hlart svg { width: 30px; height: 30px; }
.hlart i { font-style: normal; font-weight: 900; font-size: 10px; color: #b48a2c; }
.hltx { flex: 1; min-width: 0; display: grid; }
.hltx b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hltx b small, .hltx > small { font-weight: 600; color: #8a7f99; font-size: 11px; }
.hlrow .hlplay { padding: 6px 10px; font-size: 13px; flex: none; }
.hlrow .hldel { flex: none; background: none; border: 0; font-size: 18px; padding: 4px; cursor: pointer; }
/* 매드무비 카메라 (2026-10-13 사용자): 원경에서 줌인, 아래 띠(닉네임·초상화), 가장자리 어둡게, 끝은 검은 화면 */
.madstage { overflow: hidden; border-radius: 10px; background: #000; }
.madcam, .madshake { transform-origin: 50% 50%; }
.madcam { position: relative; z-index: 0; } /* 판 안의 몬스터·숫자가 어두운 가장자리 위로 올라오지 않게 */
.madvig { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: radial-gradient(ellipse 62% 62% at 50% 50%, transparent 50%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, .9) 100%); box-shadow: inset 0 0 36px 18px rgba(0, 0, 0, .85); } /* 2026-10-13 사용자: 카메라(화면)에 고정, 네 변 모두 어둡게 */
.madblack { position: absolute; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; }
.madbar { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 25; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.madside { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 10px; background: linear-gradient(90deg, #0f1d1ce8, #12302ae8); border-top: 2px solid #c9a75a; border-bottom: 2px solid #c9a75a; color: #fff; transition: transform .45s cubic-bezier(.2, .9, .3, 1), opacity .45s; opacity: 0; }
.madside.l { justify-content: flex-end; transform: translateX(-105%); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); padding-right: 22px; }
.madside.r { flex-direction: row-reverse; justify-content: flex-end; transform: translateX(105%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); padding-left: 22px; background: linear-gradient(270deg, #0f1d1ce8, #12302ae8); }
.madside b { font-size: 17px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 2px 0 #000; border-bottom: 3px solid var(--pc); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.madpf { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #0008; box-shadow: 0 0 0 2px var(--pc); overflow: hidden; }
.madpf svg { width: 34px; height: 34px; }
.madvs { flex: none; width: 34px; text-align: center; font-style: normal; font-weight: 900; color: #ffd25a; text-shadow: 0 2px 0 #7a3b00; opacity: 0; transition: opacity .3s; }
.madbar.in .madside { transform: none; opacity: 1; }
.madbar.in .madvs { opacity: 1; }
.madbest { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; opacity: 0; transform: scale(.9); transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1); }
.madbest.in { opacity: 1; transform: none; }
.madbest small { font-size: 15px; font-weight: 800; letter-spacing: .18em; color: #ffd25a; }
.madbest .madpf { width: 84px; height: 84px; box-shadow: 0 0 0 3px var(--pc), 0 0 24px var(--pc); }
.madbest .madpf svg { width: 76px; height: 76px; }
.madbest b { font-size: 24px; font-weight: 900; border-bottom: 3px solid var(--pc); }
/* 패치 노트 팝업 (2026-10-13 사용자) */
.pnpop .modal h2 { font-size: 19px; text-align: center; }
.pnote { display: grid; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.pnver { margin: 0; text-align: center; font-size: 12px; color: #8a7f99; }
.pnsec { background: #f7f4fb; border-radius: 10px; padding: 9px 11px; }
.pnsec h3 { margin: 0 0 6px; font-size: 15px; }
.pnsec h4 { margin: 8px 0 4px; font-size: 13.5px; }
.pnsec h5 { margin: 6px 0 2px; font-size: 13px; }
.pnsec h5.up { color: #2e8b47; }
.pnsec h5.down { color: #c8452c; }
.pnsec h5.chg { color: #6a52b8; }
.pnlist { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.pnlist ul { margin: 2px 0 0; padding-left: 16px; color: #4d4458; }
.pnlist b { font-weight: 800; }
.pnlist li.pnchar { list-style: none; }
.pnface { display: inline-flex; width: 40px; height: 40px; vertical-align: middle; margin-right: 6px; }
.pnface svg, .pnface img { width: 100%; height: 100%; }
/* 설명 노트 오른쪽 위 패치노트 버튼 (2026-10-13 사용자) */
.notem h2 { display: flex; align-items: center; gap: 8px; }
.notem h2 .pnbtn { margin-left: auto; width: auto; padding: 6px 12px; font-size: 13px; min-height: 0; flex: 0 0 auto; }
/* 2026-10-13 사용자: 배팅 선택지 복수선언은 빨강, 무승부는 노랑 (위 승리 선택지처럼 색 상자) */
.betov .big button.revbtn { background: #c8243a; color: #fff; }
.betov .big button.revbtn small { color: #ffe3e3; opacity: 1; }
.betov .big button.drawbtn { background: #3fb3e6; color: #fff; text-shadow: 0 1px 0 #0003; }
/* 2026-11-03 사용자: 배팅 화면 간단하게. 칸 = 몬스터 · 이름(체력 막대) · 맞히면 받는 보상 그림 */
.betpanel.bet2 { text-align: center; }
.betpanel.bet2 h2 { margin: 2px 0 0; }
.betpanel.bet2 .betwho { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--pc); color: #fff; font-size: 13px; font-weight: 900; }
.betpanel.bet2 .big button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 64px; text-align: left; }
.betpanel.bet2 .big button .betmon { margin: 0; flex: 0 0 auto; }
.betpanel.bet2 .betnm { flex: 1; min-width: 0; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betpanel.bet2 .bethp { display: block; height: 7px; margin-top: 5px; border-radius: 9px; background: #0003; overflow: hidden; }
.betpanel.bet2 .bethp i { display: block; height: 100%; background: #fff; border-radius: 9px; }
/* 2026-11-03 사용자: 그림은 상자 없이 그림만 */
.betpanel.bet2 .betrw { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; color: #fff; text-shadow: 0 1px 0 #0006, 0 0 3px #0005; }
.betpanel.bet2 .betrw img { filter: drop-shadow(0 1px 1px #0005); }
.betpanel.bet2 .betrw img { width: 38px; height: 38px; object-fit: contain; }
.betpanel.bet2 .betrw i { font-style: normal; font-size: 13px; }
.betpanel.bet2 .betrw b { font-size: 22px; font-weight: 900; }
.betov .betpanel.bet2 .big { grid-template-columns: minmax(0, 1fr); }
.betov .betpanel.bet2 .betsub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.betov .betpanel.bet2 .betsub.one { grid-template-columns: minmax(0, 1fr); }
.betpanel.bet2 .betsub button { gap: 6px; padding: 10px 8px; }
.betpanel.bet2 .betsub .betnm { font-size: 17px; }
.betpanel.bet2 .betsub.one .betnm { text-align: center; }
.betpanel.bet2 .betsub .betrw img { width: 34px; height: 34px; }
.dx-pn { display: flex; justify-content: flex-end; margin: 0 0 6px; } /* 2026-10-13 사용자: 도감에서 패치 노트 보기 */
.dx-pn .btn { padding: 8px 12px; }
.pnhr { border: 0; border-top: 2px dashed #e4dcef; margin: 14px 0; }
/* 2026-10-13: 가장자리 어둡게(madvig)·이름 띠·검은 화면은 판(madstage) 바깥 겹에. 판 안 그림 층이 위로 올라와 가장자리가 밝아지던 문제 */
.madview { position: relative; border-radius: 10px; overflow: hidden; }
.madview > .madstage { isolation: isolate; }
/* 판 위 몬스터 체력 테두리 (2026-10-13 사용자): 원(소형)·사각형(중형·대형) 테두리가 체력바, 지연 감소형. 예전 아래 체력 막대·숫자는 숨김 (연출 코드가 계속 씀) */
.board .unit > .hpw, .board .unit > .hpn { display: none; }
.hpr-bg { stroke: #39424e; stroke-width: 7; }
.hpr-lag { stroke: #ff3b3b; stroke-width: 7; stroke-linecap: butt; }
.hpr-fill { stroke: #5fd93a; stroke-width: 7; stroke-linecap: butt; }
.hpr-sh { stroke: #a9b0ba; stroke-width: 7; } /* 보호막: 체력 끝에 이어서 회색 (2026-10-13 사용자) */
.hpr-lag.heal { stroke: rgba(95, 217, 58, .45); } /* 회복: 투명한 초록이 먼저 */
.hpdisc .hpr-sh { transform: none; }
.unit.sts-poison .hpr-fill { stroke: #a46be8; }
.unit.sts-guard .hpr-fill { stroke: #3b82f6; }
.unit.sts-charm .hpr-fill { stroke: #ff6fb5; }
.unit.sts-hold .hpr-fill { stroke: #f5c400; }
.unit.sts-stone .hpr-fill { stroke: #8a8f98; }
.bhp { position: absolute; overflow: visible; pointer-events: none; z-index: 2; }
.bhp .hpr-bg, .bhp .hpr-lag, .bhp .hpr-fill { stroke-width: 4px; } /* 2026-10-13 사용자: 사각형 체력바는 더 얇게 */
.bhp .hpr-sh { stroke-width: 4px; }
.bhp path.hpr-bg { stroke-width: 6px; stroke: #1e2530; }
.bbox { border-width: 2px; outline: none; }
.bbox.large { border-style: solid; border-width: 2px; }
.unit .ust.hp { color: #1f9d3a; }
.unit.ko .hpr { opacity: .4; }
.unit .ust.hpin { z-index: 10; font-size: 11.5px; } /* 원 안쪽 체력 숫자 */
.board.multi .unit .ust.hpin { font-size: 10px; }
/* 겹 순서 (2026-10-13 사용자, 위 → 아래, 행동 고를 때와 배틀 연출 때 같음): 특수능력(fxlayer 4) > 몬스터 초상화 > 화살표 > 체력 테두리.
   몬스터 한 마리의 초상화·화살표·체력 테두리는 한 묶음(.tkp, 3)으로 함께 움직임. 숫자는 맨 위 */
.unit .tkp { position: absolute; left: -12%; right: -12%; top: -22%; bottom: 10%; pointer-events: none; z-index: 3; }
.unit .tkp > .tkw, .unit .tkp > .tkh, .unit .tkp > .tka { position: absolute; inset: 0; pointer-events: none; }
.unit.bigu .tkp.bigw { left: 0; right: 0; top: 0; bottom: 0; }
.unit .tkp > .tkw { z-index: 3; }
.unit .tkp > .tka { z-index: 2; }
.unit .tkp > .tkh { z-index: 1; }
.unit .tka .tring, .unit .tka .bmark, .unit .tka .bhead, .unit .tka .bback { z-index: auto; }
.unit.ko .tka, .unit.ko .tkh { filter: grayscale(1) brightness(.6); opacity: .6; }
/* 2026-10-13 사용자: 피해 숫자 0.5칸 (몬스터 오른쪽 위), 글자도 맞춰 작게 */
.burst:not(.abil) b { font-size: 11px; -webkit-text-stroke-width: 3px; }
.burst.heal b { font-size: 10px; -webkit-text-stroke-width: 2.5px; }
.burst.block b { font-size: 9px; }
.burst.crit b, .burst.combo b, .burst.bump b, .burst.ko b { font-size: 8px; -webkit-text-stroke-width: 2.5px; }
/* 쓰러질 때 초상화·화살표·체력 테두리·무지개 테두리가 함께 기울고 회색 */
.unit.ko .tkp { filter: grayscale(1) brightness(.6); transform: scale(.85) rotate(-8deg); transition: all .4s; }
.unit.ko .tkp .tkw, .unit.ko .tkp .tka, .unit.ko .tkp .tkh { filter: none; transform: none; opacity: 1; }
/* 2026-10-13: 빛·깜빡임은 몬스터 한 묶음(.tkp)에 (초상화 빛이 체력 테두리를 덮지 않게) */
/* 랭크 결산 팝업 (2026-10-13 사용자): 티어 아이콘 + 점수 게이지, 승급하면 아이콘이 깨지고 윗티어가 땅! */
.rankov .tsc-rank { display: grid; justify-items: center; gap: 6px; }
.rkico { position: relative; width: 112px; height: 112px; display: grid; place-items: center; filter: drop-shadow(0 0 18px var(--rc)); }
.rkico > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; }
.rkico .rkbig { width: 104px; height: 104px; object-fit: contain; }
.rkico .rknew { opacity: 0; transform: translateY(-60px) scale(1.8); }
.rkico.crack .rkold { animation: rkcrack .65s ease-in forwards; }
.rkico.swap .rknew { animation: rkland .5s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes rkcrack { 0% { transform: none; filter: none; } 20% { transform: rotate(-6deg) scale(1.05); } 40% { transform: rotate(6deg) scale(1.05); filter: brightness(1.6); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  70% { transform: scale(1.1); opacity: 1; clip-path: polygon(0 0, 48% 0, 40% 50%, 55% 100%, 0 100%, 100% 100%, 100% 0, 52% 0, 60% 50%, 45% 100%); filter: brightness(2); }
  100% { transform: scale(1.4) rotate(12deg); opacity: 0; filter: brightness(3) blur(2px); } }
@keyframes rkland { 0% { opacity: 0; transform: translateY(-60px) scale(1.8); } 60% { opacity: 1; transform: translateY(0) scale(.9); } 80% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
.rkname { font-size: 18px; font-weight: 900; color: #fff; }
.rkbar { position: relative; width: min(280px, 90%); height: 16px; background: #3a2d52; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 2px #1d1530; }
.rkbar .rkfill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffd25a, #ff9f1a); border-radius: 8px; }
.rkbar .rkfill.down { background: linear-gradient(90deg, #ff8a8d, #e5484d); }
.rkpts { font-size: 15px; color: #e9e2f7; }
.rkpts b { font-size: 20px; margin-right: 4px; }
.rkpts b.up { color: #7be07a; } .rkpts b.down { color: #ff8a8d; }
.rkmsg.rkwin { font-size: 28px; animation: rkpop .5s ease-out; }
@keyframes rkpop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: none; } }
.rankov { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: #0b0814e8; }
.rankov.out { opacity: 0; transition: opacity .3s; }
.rankov .rkmsg { width: 100%; text-align: center; }
.rankov .tsc-rank { display: flex; flex-direction: column; align-items: center; }
.rankov .rkmsg { align-self: stretch; margin-top: 12px; }
/* 2026-10-13 사용자: 사각형 체력바가 체력보다 많아 보이던 문제 (화면 기준 굵기 설정 때문에 칠하는 길이가 틀렸음) → 판 단위 굵기. 소형·중형·대형 색 통일 (중형 색) */
.bhp .hpr-bg, .bhp .hpr-lag, .bhp .hpr-fill, .bhp .hpr-sh { stroke-width: 7.5; }
.bhp path.hpr-bg { stroke-width: 11; stroke: #1e2530; }
.hpdisc ~ .hpr-bg, .hpsvg .hpr-bg { stroke: #1e2530; }

/* ---- 타이틀 화면 (2026-10-14 사용자 전면 개편): 하늘색 하늘, 흘러가는 구름, 나는 위더미제, 누르면 흐려지고 돌 메뉴 ---- */
body.gating { background: #a9dcfb; }
body.gating .copy { display: none; }
.ttl { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: linear-gradient(180deg, #74c4f4 0%, #a7dcfa 55%, #d9f1ff 100%); color: #1c1c1c; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.ttl::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 78% 12%, #fff6d2aa 0, #fff6d200 38%); pointer-events: none; }
.ttl .tbg { position: absolute; inset: 0; transition: filter .6s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.ttl.open .tbg { filter: blur(7px) saturate(.95); transform: scale(1.05); }
.ttl .tclouds { position: absolute; inset: 0; }
.ttl .tcloud { position: absolute; left: 0; height: auto; opacity: .45; pointer-events: none; will-change: translate; }
.ttl .tweewrap { position: absolute; left: 50%; top: 52%; width: min(80vw, 58svh, 560px); translate: -50% -50%; animation: tweeBob 3.4s ease-in-out infinite; }
.ttl .twee { display: block; width: 100%; height: auto; }
@keyframes tweeBob { 0%, 100% { transform: translateY(-1.6%) rotate(-1.2deg); } 50% { transform: translateY(1.6%) rotate(.8deg); } }
.ttl .tlogo { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 9svh); margin: 0; text-align: center; font-size: clamp(56px, 18vw, 104px); font-weight: 900; letter-spacing: .04em; color: #fff; text-shadow: 5.0px 0.0px 0 #1c1c1c, 4.6px 1.9px 0 #1c1c1c, 3.5px 3.5px 0 #1c1c1c, 1.9px 4.6px 0 #1c1c1c, 0.0px 5.0px 0 #1c1c1c, -1.9px 4.6px 0 #1c1c1c, -3.5px 3.5px 0 #1c1c1c, -4.6px 1.9px 0 #1c1c1c, -5.0px 0.0px 0 #1c1c1c, -4.6px -1.9px 0 #1c1c1c, -3.5px -3.5px 0 #1c1c1c, -1.9px -4.6px 0 #1c1c1c, -0.0px -5.0px 0 #1c1c1c, 1.9px -4.6px 0 #1c1c1c, 3.5px -3.5px 0 #1c1c1c, 4.6px -1.9px 0 #1c1c1c, 0 6px 0 #1c1c1c; animation: tlogoIn .9s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tlogoIn { from { opacity: 0; transform: translateY(-18px) scale(.94); } }
.ttl .tfg { position: absolute; inset: 0; }
.ttl .ttap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 13svh); margin: 0; text-align: center; font-size: 19px; font-weight: 900; color: #1c1c1c; text-shadow: 2.6px 0.0px 0 #fff, 2.4px 1.0px 0 #fff, 1.8px 1.8px 0 #fff, 1.0px 2.4px 0 #fff, 0.0px 2.6px 0 #fff, -1.0px 2.4px 0 #fff, -1.8px 1.8px 0 #fff, -2.4px 1.0px 0 #fff, -2.6px 0.0px 0 #fff, -2.4px -1.0px 0 #fff, -1.8px -1.8px 0 #fff, -1.0px -2.4px 0 #fff, -0.0px -2.6px 0 #fff, 1.0px -2.4px 0 #fff, 1.8px -1.8px 0 #fff, 2.4px -1.0px 0 #fff; animation: ttapBlink 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes ttapBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ttl .tmenu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ttl:not(.open) .tmenu:not(.closing) { display: none; }
/* 돌 메뉴 닫기 (2026-10-14 사용자: 버튼이 아닌 곳을 누르면 첫 화면으로): 돌이 위더미제 가운데로 빨려 들어감 */
.ttl .tmenu.closing .tstone { animation: tstoneBack .3s ease-in both; }
.ttl .tmenu.closing .tpeb img { animation: tpebBack .3s ease-in both; }
.ttl .tmenu.closing .tpeb span, .ttl .tmenu.closing .tsmall { animation: tfadeOut .2s ease-in both; }
@keyframes tstoneBack { to { transform: translate(var(--sx), var(--sy)) scale(.12) rotate(-25deg); opacity: 0; } }
@keyframes tpebBack { to { transform: translate(calc(var(--sx) + 50cqw - var(--x)), calc(var(--sy) + 50cqh - var(--y))) scale(.2) rotate(-60deg); opacity: 0; } }
@keyframes tfadeOut { to { opacity: 0; } }
.ttl .tbox { position: relative; width: min(100vw, 72svh, 640px); aspect-ratio: 1; container-type: size; }
.ttl .tmenu.pop .tbox::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #ffffff 0, #ffffffaa 35%, #fff0 70%); animation: tflash .6s ease-out both; pointer-events: none; }
@keyframes tflash { from { transform: scale(.2); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.ttl .tstone { position: absolute; height: auto; translate: -50% -50%; pointer-events: none; animation: tstoneBob 4s ease-in-out .6s infinite; }
.ttl .tmenu.pop .tstone { animation: tstonePop .6s cubic-bezier(.2,1.35,.4,1) both, tstoneBob 4s ease-in-out .6s infinite; }
@keyframes tstonePop { from { transform: translate(var(--sx), var(--sy)) scale(.12) rotate(-25deg); opacity: 0; } 40% { opacity: 1; } }
@keyframes tstoneBob { 0%, 100% { rotate: 0deg; } 50% { rotate: -2.5deg; } }
.ttl .tpeb { position: absolute; left: var(--x); top: var(--y); translate: calc(var(--pw) * -.5) -50%; display: flex; align-items: center; gap: 7cqw; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ttl .tpeb img { width: var(--pw); height: auto; display: block; animation: tpebBob 2.8s ease-in-out calc(var(--i) * -.7s) infinite; transition: scale .12s; }
.ttl .tpeb span { font-size: clamp(22px, 7.6cqw, 46px); font-weight: 900; white-space: nowrap; color: #1c1c1c; text-shadow: 3.2px 0.0px 0 #fff, 3.0px 1.2px 0 #fff, 2.3px 2.3px 0 #fff, 1.2px 3.0px 0 #fff, 0.0px 3.2px 0 #fff, -1.2px 3.0px 0 #fff, -2.3px 2.3px 0 #fff, -3.0px 1.2px 0 #fff, -3.2px 0.0px 0 #fff, -3.0px -1.2px 0 #fff, -2.3px -2.3px 0 #fff, -1.2px -3.0px 0 #fff, -0.0px -3.2px 0 #fff, 1.2px -3.0px 0 #fff, 2.3px -2.3px 0 #fff, 3.0px -1.2px 0 #fff; transition: translate .15s, color .15s; }
.ttl .tpeb span small { font-size: .5em; margin-left: .2em; }
.ttl .tpeb:hover span, .ttl .tpeb:focus-visible span { translate: 4px 0; color: #1d6fbf; }
.ttl .tpeb:active img { scale: .88; }
.ttl .tpeb:focus-visible { outline: 3px dashed #1c1c1c; outline-offset: 6px; border-radius: 10px; }
.ttl .tmenu.pop .tpeb img { animation: tpebFly .55s cubic-bezier(.2,1.3,.4,1) calc(.38s + var(--i) * .1s) both, tpebBob 2.8s ease-in-out calc(1.2s + var(--i) * .3s) infinite; }
.ttl .tmenu.pop .tpeb span { animation: tlabIn .45s cubic-bezier(.2,1,.4,1) calc(.62s + var(--i) * .1s) both; }
@keyframes tpebFly { from { transform: translate(var(--sx), var(--sy)) scale(.2) rotate(-60deg); opacity: 0; } 30% { opacity: 1; } }
@keyframes tpebBob { 0%, 100% { translate: 0 -3%; } 50% { translate: 0 3%; } }
@keyframes tlabIn { from { opacity: 0; transform: translateX(-14px); filter: blur(4px); } }
.ttl .tsmall { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; padding: 0 10px; } /* 링크 복사까지 4개: 좁으면 두 줄 (2026-10-25) */
.ttl .tmenu.pop .tsmall { animation: tlabIn .5s ease 1s both; }
.ttl .tmini { white-space: nowrap; padding: 7px 12px; border: 2px solid #1c1c1c; border-radius: 999px; background: #ffffffd0; color: #1c1c1c; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.ttl .tmini:active { transform: translateY(1px); }
.ttl .ginstallhow { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); margin: 0 auto; max-width: 420px; font-size: 13px; padding: 8px 10px; line-height: 1.55; background: #fff; border: 2px solid #1c1c1c; border-radius: 12px; }
.ttl .tcopy { position: absolute; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); text-align: center; font-size: 10px; line-height: 1.4; color: #12324dcc; pointer-events: none; }
/* 로그인·회원가입: 흐린 하늘 위 반투명 카드 */
.ttl .tcard { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(calc(100vw - 32px), 380px); max-height: calc(100svh - 40px); overflow: auto; display: grid; gap: 12px; padding: 20px 18px 16px; background: #ffffffc4; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 3px solid #1c1c1c; border-radius: 22px; box-shadow: 0 6px 0 #1c1c1c; }
.ttl .tcard.tin { animation: tcardIn .45s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes tcardIn { from { opacity: 0; transform: translateY(26px) scale(.95); } }
.ttl .tcard h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; font-size: 23px; font-weight: 900; }
.ttl .tcard h2 img { height: 38px; width: auto; animation: tpebBob 2.8s ease-in-out infinite; }
.ttl .tcard label { display: grid; gap: 6px; }
.ttl .tcard label > span { font-weight: 800; font-size: 14px; }
.ttl .tcard label small { font-weight: 600; font-size: 12px; color: #4a5866; }
.ttl .tcard input:not([type=checkbox]) { font: inherit; font-size: 16px; padding: 11px 12px; border: 2px solid #1c1c1c; border-radius: 12px; background: #fff; color: #1c1c1c; outline: none; transition: box-shadow .15s, border-color .15s; }
.ttl .tcard input:not([type=checkbox]):focus { border-color: #1d6fbf; box-shadow: 0 0 0 4px #74c4f466; }
.ttl .tcard label.gkeep { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.ttl .tcard label.gkeep input { width: 20px; height: 20px; margin: 0; accent-color: #1d6fbf; }
.ttl .tcard label.gkeep span { font-weight: 800; white-space: nowrap; }
.ttl .tcard .tnote { margin: 0; font-size: 12.5px; color: #4a5866; }
.ttl .tgo { margin-top: 4px; padding: 13px; border: 3px solid #1c1c1c; border-radius: 14px; background: #74c4f4; color: #1c1c1c; font: inherit; font-weight: 900; font-size: 17px; box-shadow: 0 4px 0 #1c1c1c; cursor: pointer; }
.ttl .tgo:active { transform: translateY(3px); box-shadow: 0 1px 0 #1c1c1c; }
.ttl .tgo:disabled { opacity: .6; }
.ttl .tback { padding: 6px; border: 0; background: none; color: #1c1c1c; font: inherit; font-weight: 800; font-size: 14px; opacity: .75; cursor: pointer; }
.tsuggest { display: flex; gap: 12px; align-items: center; }
.tsuggest img { height: 64px; width: auto; flex: none; }
.tsuggest p { margin: 0; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .ttl .tweewrap, .ttl .ttap, .ttl .tpeb img, .ttl .tstone { animation: none; } }

/* 2026-10-14 사용자: 화살표 그림자 모두 없앰 (정면 화살표·공격 방향 화살표) */
.tring svg, .bhead { filter: none; }
.hprb { pointer-events: none; }
.unit.ko .hprb { opacity: .4; }

/* 방사능 (2026-10-14 사용자): 테두리는 안전한 칸 안쪽에서 옅은 초록, 큰 구름 그림이 천천히 흐름 (구름 칸은 그림 30%, 아닌 칸은 그림자) */
.board .radlayer .radc { border-width: 0 !important; }
.board .radlayer.rhold .rsafe, .board .radlayer.rhold .rflow { animation: radhold .8s ease-out both; animation-delay: var(--rdl, 0ms); } /* 다키혼 산이 떨어지는 동안 기다림 (2026-10-20) */
@keyframes radhold { from { opacity: 0; } to { opacity: 1; } }
.board .radlayer .rsafe { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); box-sizing: border-box; border: 0 solid #c6f28e; pointer-events: none; z-index: 2; }
.board .radlayer .rclipdef { position: absolute; }
.board .radlayer .rflow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.board .radlayer .rflow .rfc { position: absolute; left: var(--x0); height: auto; opacity: .3; pointer-events: none; animation-name: rflowx; animation-timing-function: linear; animation-iteration-count: infinite; }
.board .radlayer .rflow .rfc.dark { filter: brightness(0) invert(.18) blur(1.5px); opacity: .32; }
.board .radlayer .rflow .rfc.dark.sh { filter: none; } /* 미리 그려 둔 그림자 (2026-10-26: 네모 테두리 없앰) */
@keyframes rflowx { from { left: var(--x0); } to { left: 100%; } }

/* 타이틀 → 로비 낙하 (2026-10-14 사용자) */
.ttl.falling .tmenu, .ttl.falling .tcard, .ttl.falling .ttap, .ttl.falling .tcopy { filter: blur(6px); opacity: 0; transition: filter .45s, opacity .45s; pointer-events: none; }
.ttl .tfall { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.ttl .tfsky { position: absolute; inset: 0; background: #2c4f6f; opacity: 0; transition: opacity 3s; }
.ttl.falling:has(.tfall.go) .tfsky { opacity: .32; }
.ttl.falling .tbg { transition: transform 3.2s cubic-bezier(.5,0,1,1), opacity 2.4s, filter .5s; }
.ttl.falling:has(.tfall.go) .tbg { transform: translateY(-70%) scale(1.05); }
.ttl .tfall .tfclouds { position: absolute; inset: 0; }
.ttl .tfall .tfclouds.front { z-index: 2; }
.ttl .tfall .tfc { position: absolute; height: auto; pointer-events: none; will-change: transform; }
.ttl .tfall .tfc.dark, .ttl .tfback .tfc.dark { opacity: .45; filter: blur(1px); }
.ttl .tfback { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ttl .tfback .tfc { position: absolute; height: auto; pointer-events: none; will-change: transform; }
.ttl .tfall .tfclouds.front .tfc { opacity: 1; }
.ttl .tfall .tfstone { position: absolute; z-index: 1; pointer-events: none; }
.ttl .tfall.go .tfstone { animation: tfjit .12s linear infinite; }
@keyframes tfjit { 0%, 100% { translate: 0 0; } 25% { translate: -1.5px 1px; } 50% { translate: 1px -1px; } 75% { translate: 1.5px 1.5px; } }
.ttl .tfall .tfcover { position: absolute; left: -40vw; width: 180vw; top: 100%; z-index: 3; display: none; }
.ttl .tfall .tfcover.on { display: block; }
.ttl .tfall .tfcover img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: brightness(.45) saturate(.8); }
.ttl .tfall .tfcover i { position: relative; z-index: 0; display: block; height: 220vh; margin-top: -20.7%; background: #0b161d; } /* 2026-10-14 사용자: 검은 화면은 검은 구름 아래 층, 구름 중간 높이까지 */
.tfblack { position: fixed; inset: 0; z-index: 200; background: #0b161d; pointer-events: none; }

/* 마지막 검은 구름에 반쯤 걸친 해·달 (2026-10-14 사용자). 해일 때는 노을빛 (검붉은·주황) */
.ttl .tfall .tfcover { position: absolute; }
.ttl .tfall .tfcover .tforb { position: absolute; z-index: 0; left: 52%; top: 0; width: 17%; aspect-ratio: 1; border-radius: 50%; translate: 0 -48%; }
.ttl .tfall.day .tforb { background: radial-gradient(circle, #fffbe0 0, #ffe27a 45%, #ffb43b 70%); box-shadow: 0 0 40px 18px #ffc24a99, 0 0 120px 60px #ff8a2a55; }
.ttl .tfall.night .tforb { background: radial-gradient(circle at 42% 40%, #ffffff 0, #eef2f8 45%, #c5cfdc 75%); box-shadow: 0 0 36px 14px #dfe7f299, 0 0 110px 50px #b9c6d855; }
.ttl .tfall.day .tfcover img { filter: brightness(.7) sepia(1) saturate(2.6) hue-rotate(-35deg) brightness(.75); }
.ttl.falling:has(.tfall.day.covering) .tfsky { background: linear-gradient(180deg, #f4a24a 0, #d4582c 55%, #7a2416 100%); opacity: .75; transition: opacity .8s, background .8s; } /* 해: 하늘이 노을빛으로 */
.ttl .tfall.day .tfcover i { background: linear-gradient(180deg, #9a3a1c 0, #5a1a10 18vh, #2c0d08 60vh); }
.tfblack.day { background: #2c0d08; }

/* 주사위 (2026-10-14 사용자): 떨어진 자리에서 그대로 평면으로, 이름은 아래. 내 주사위는 '나'와 함께 빛남 */
.dflat.scatter { left: 0; top: 0; transform: none; width: 100%; height: 100%; max-width: none; display: block; }
.dflat.scatter .dfl { position: absolute; translate: -50% -25px; }
.dflat.scatter .dfl.win { translate: -50% -37px; }
.dflat.scatter .dfl.me { z-index: 2; }
.dflat.scatter .dfl.me .dface { animation: dme 1s ease-in-out infinite alternate; }
.dflat.scatter .dfl.me .dfn { background: #ffd75e; color: #2a2320; box-shadow: 0 0 0 2px var(--dc), 0 2px 6px #0003; }
@keyframes dme { from { box-shadow: 0 0 0 4px #ffd75e, 0 4px 0 #0003; } to { box-shadow: 0 0 0 5px #ffd75e, 0 0 18px 6px #ffd75eaa, 0 4px 0 #0003; } }
/* 첫 시간 재료: 시간 상인 시계 */
.firsttime .ftmsg { min-height: 1.6em; transition: transform .25s; }
.firsttime .ftmsg.on { animation: rkpop .45s ease-out; }
.firsttime .ftmsg b { white-space: nowrap; }
.firsttime .ftmsg .sico { width: 22px; height: 22px; vertical-align: -5px; margin-right: 2px; }

/* ==== 새 로비: 모래사장 (2026-10-14 사용자 설계·그림, js/lobby-beach.js) ==== */
.home.beach { background: #e5c891; }
.home.beach > .bc-wrap { position: absolute; inset: 0; overflow: hidden; background: var(--bc-edge, var(--sandDay, #e5c891)); transition: background .8s; }
.bc-box { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 9 / 16; translate: -50% -50%; container-type: size; overflow: visible; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  --sand: var(--sandDay, #e5c891); --sea: var(--seaDay, #64b8b8); background: var(--sand); transition: background .8s; }
.bc-box.t-night { --sand: #796f5b; --sea: #346060; }
.bc-wrap:has(.t-night) { --bc-edge: #796f5b; } .home.beach:has(.t-night) { background: #796f5b; }
.bc-world { position: absolute; inset: 0; transition: filter .5s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.bc-box.menu .bc-world { filter: blur(7px) saturate(.95); } /* 크기는 그대로: 또렷한 물체와 흐린 배경이 어긋나지 않게 */
.bc-waves { position: absolute; top: 0; left: -200%; width: 500%; height: 100%; } /* 양옆 두 칸씩 더 (패드·컴퓨터) */
.bc-sea { fill: var(--sea); transition: fill .8s; }
.bc-wet { fill: #8a6a3a; fill-opacity: .32; } /* 파도가 물러간 뒤 잠깐 남는 젖은 모래 */
.bc-box.t-night .bc-wet { fill: #2e2a22; }
.bc-light { position: absolute; inset: 0; pointer-events: none; transition: background .8s; }
.bc-box.t-dawn .bc-light { background: linear-gradient(270deg, #ffe0b066 0, #ffe0b000 55%), linear-gradient(0deg, #6a7fb022, #6a7fb022); }
.bc-box.t-day .bc-light { background: radial-gradient(ellipse at 50% -10%, #fffbe866 0, #fffbe800 60%); }
.bc-box.t-eve .bc-light { background: linear-gradient(90deg, #ff5a2a66 0, #ff7a3a22 45%, #ff7a3a00 75%), linear-gradient(0deg, #ff8a4a1c, #ff8a4a1c); }
.bc-box.t-night .bc-light { background: radial-gradient(ellipse at 50% -15%, #c9d6ff40 0, #c9d6ff00 55%); }
.bc-foams { position: absolute; inset: 0; pointer-events: none; }
.bc-foam { position: absolute; left: 0; top: 0; transition: opacity 1s; will-change: transform; }
.bc-fish { position: absolute; left: 0; top: 0; transition: opacity .8s; pointer-events: none; filter: blur(1.2px); will-change: transform; }
.bc-fish.off { opacity: 0; }
.bc-fish svg { display: block; width: 100%; overflow: visible; }
.bc-fish path { fill: #1d4a52; fill-opacity: .5; }
.bc-box.t-night .bc-fish path { fill: #0c2226; fill-opacity: .55; }
.bc-fish .bc-tail { transform-origin: 14px 20px; animation: bcTail .7s ease-in-out infinite alternate; }
@keyframes bcTail { from { rotate: -14deg; } to { rotate: 14deg; } }
.bc-whale { position: absolute; left: 0; top: 0; cursor: pointer; will-change: transform; }
.bc-whale img { position: absolute; left: 0; top: 0; width: 100%; transition: opacity 1.3s ease-in-out; }
.bc-whale .bc-sw { opacity: 0; filter: blur(1.5px); }
.bc-whale .bc-sw.on { opacity: .4; }
.bc-box.t-night .bc-whale .bc-sw.on { opacity: .5; }
.bc-whale .bc-up { opacity: 0; transition: opacity .9s; }
.bc-whale.surf .bc-sw.on { opacity: 0; }
.bc-whale.surf .bc-up { opacity: .72; }
.bc-obj { position: absolute; pointer-events: none; }
.bc-obj.lift, .bc-coin.lift { visibility: hidden; }
.bc-obj[data-n="6"] { animation: bcBottle 3.2s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes bcBottle { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3%) rotate(3deg); } }
.bc-box.fever .bc-obj[data-n="3"] { animation: bcFever 1.4s ease-in-out infinite alternate; } /* 피버 타임: 배틀 바위가 빛남 */
@keyframes bcFever { from { filter: drop-shadow(0 0 4px #ffd75e) drop-shadow(0 0 10px #ff9b3a88); } to { filter: drop-shadow(0 0 9px #ffe27a) drop-shadow(0 0 26px #ff8a2acc); } }
.bc-fbadge { z-index: 5001; position: absolute; translate: -50% -50%; min-width: 5.2cqw; height: 5.2cqw; padding: 0 1.2cqw; border-radius: 99px; background: #e8443a; color: #fff; font: 900 3.4cqw/5.2cqw var(--font), sans-serif; text-align: center; box-shadow: 0 0 0 .6cqw #fff, 0 2px 4px #0004; pointer-events: none; animation: bcPop .35s cubic-bezier(.2,1.5,.4,1); }
.bc-fbadge[hidden] { display: none; }
@keyframes bcPop { from { scale: .3; } }
.bc-coin { z-index: 5000; position: absolute; width: 16.9cqw; translate: -50% -50%; transform: rotate(12deg) skewX(-10deg); pointer-events: none; }
.bc-coin svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px #ffe27acc) drop-shadow(0 0 5px #ffd24a88); }
.bc-coin text { font: 900 34px var(--font); fill: #fbeebf; fill-opacity: .92; letter-spacing: 1px; }
.bc-box.t-night .bc-coin text { fill: #e6d59a; fill-opacity: .88; }
.bc-coin .old text { fill-opacity: .35; }
.bc-coin .new { animation: bcBrush .7s cubic-bezier(.4,0,.3,1) both; }
.bc-coin .old { animation: bcFade 1.2s ease .5s both; }
@keyframes bcBrush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bcFade { to { opacity: 0; } }
.bc-foot { position: absolute; width: 1.6cqw; height: 2.4cqw; border-radius: 50%; background: #6b5330aa; translate: -50% -50%; transition: opacity 4s linear; pointer-events: none; }
.bc-foot.f4 { width: 1.2cqw; height: 1.6cqw; }
.bc-foot.fs { width: 3cqw; height: 5.2cqw; background: #cdb07a; } /* 뱀 자국: 세로 타원 (사용자 2026-10-15) */
.bc-box.t-night .bc-foot.fs { background: #645a47; }
.bc-wring { position: absolute; width: 5cqw; height: 2.2cqw; border-radius: 50%; border: 2px solid #ffffffa0; translate: -50% -50%; animation: bcRing 1.6s ease-out forwards; pointer-events: none; }
@keyframes bcRing { from { scale: .4; opacity: 1; } to { scale: 2.2; opacity: 0; } }
.bc-mon { position: absolute; width: calc(10.2cqw * var(--mk, 1)); translate: -50% calc(var(--pad, 12%) - 100%); cursor: pointer; } /* --pad = 그림 아래 빈칸 (js footPad): 그림의 가장 아래 점이 발 */ /* z-index = 발 위치(y): 물체 바닥 선보다 위면 뒤, 아래면 앞 */
.bc-mon img { width: 100%; display: block; animation: bcIdle 2.4s ease-in-out infinite; transform-origin: 50% 100%; pointer-events: none; }
.bc-mon.walk img { animation: bcHop .32s ease-in-out infinite; }
.bc-mon.slide.walk img { animation: bcSlide .9s ease-in-out infinite; } /* 녜수로어 (2026-11-02): 위아래로 통통 대신 몸이 앞뒤로 늘었다 줄며 스르륵 */
@keyframes bcSlide { 0%,100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(1.05, .97) skewX(-4deg); } 50% { transform: scale(1, 1) skewX(0); } 75% { transform: scale(1.05, .97) skewX(4deg); } }
.bc-mon.flip img { scale: -1 1; }
@keyframes bcIdle { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.97); } }
@keyframes bcHop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
.bc-mon .bc-mb { transition: transform .45s ease, clip-path .45s ease; clip-path: inset(-20% -20% 0 -20%); }
.bc-mon.swim .bc-mb { transform: translateY(var(--sink, 34%)); clip-path: inset(-20% -20% -60% -20%); }
.bc-mon::after { content: ''; position: absolute; left: -16%; right: -16%; top: calc(100% - var(--pad, 12%)); height: var(--sink, 34%); background: var(--sea, #64b8b8); opacity: 0; transition: opacity .45s; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); } /* 물 아래: 바다 색으로 덮음 */
.bc-mon.swim::after { opacity: .9; }
.bc-box.t-dawn .bc-mon.swim::after { opacity: .8; }
.bc-mon.swim img, .bc-mon.swim.walk img { animation: bcFloat 1.8s ease-in-out infinite; }
@keyframes bcFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4%) rotate(3deg); } }
.bc-mon.dive .bc-mb img { filter: brightness(0) blur(1.5px); opacity: .35; transition: opacity .5s, filter .5s; }
.bc-mon .bc-rip { position: absolute; left: 50%; top: calc(100% - var(--pad, 12%)); width: 132%; height: 11%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #ffffffee 0, #ffffffcc 55%, #ffffff00 100%); box-shadow: 0 0 .5cqw #ffffff99; translate: -50% -50%; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 2; } /* 가로 거품 줄 (물 높이) */
.bc-mon.swim .bc-rip { opacity: 1; animation: bcRipple 1.8s ease-in-out infinite; }
@keyframes bcRipple { 0%,100% { scale: 1 1; } 50% { scale: 1.06 1.25; } }
.bc-mon .bc-sh { position: absolute; left: 50%; bottom: calc(var(--pad, 12%) - 3%); width: 70%; height: 14%; border-radius: 50%; background: #3a2a1466; translate: -50% 0; z-index: -1; transition: all .8s; pointer-events: none; }
.bc-mon.swim .bc-sh, .bc-mon.dive .bc-sh, .bc-mon.dive .bc-rip { opacity: 0 !important; }
.bc-box.t-dawn .bc-mon .bc-sh { width: 150%; translate: -88% 0; opacity: .8; }
.bc-box.t-day .bc-mon .bc-sh { width: 60%; opacity: .9; }
.bc-box.t-eve .bc-mon .bc-sh { width: 150%; translate: -12% 0; opacity: .8; }
.bc-box.t-night .bc-mon .bc-sh { opacity: 0; }
.bc-box.t-night .bc-mon img { filter: brightness(.55) saturate(.7) hue-rotate(10deg); }
.bc-box.t-eve .bc-mon img { filter: sepia(.25) saturate(1.2) brightness(.97); }
.bc-box.t-dawn .bc-mon img { filter: brightness(1.03) saturate(.9); }
.bc-hot { position: absolute; z-index: 9000; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bc-layer { position: absolute; inset: 0; display: none; z-index: 2; }
.bc-box.menu .bc-layer { display: block; }
.bc-focus > * { position: absolute; pointer-events: none; animation: bcIn .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes bcIn { from { scale: .85; opacity: 0; } }
.bc-menu { display: none; }
.bc-menu.on { display: block; }
.bc-peb { position: absolute; z-index: 6; display: flex; align-items: center; gap: 2.5cqw; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: #1c1c1c; cursor: pointer; translate: 0 -50%; animation: bcPeb .5s cubic-bezier(.2,1.3,.4,1) calc(.15s + var(--i) * .08s) both; -webkit-tap-highlight-color: transparent; }
.bc-peb.l { flex-direction: row-reverse; translate: -100% -50%; }
.bc-peb[hidden] { display: none; }
.bc-peb .bc-mico { position: relative; display: grid; place-items: center; width: 12cqw; height: 12cqw; filter: drop-shadow(0 2px 0 #0003); animation: bcBob 2.8s ease-in-out calc(var(--i) * -.7s) infinite; } /* 테두리·배경 없이 아이콘만 */
.bc-peb .bc-mico img, .bc-peb .bc-mico svg { width: 92%; height: 92%; object-fit: contain; display: block; }
.bc-peb .bc-mico .emo { font-size: 6.5cqw; line-height: 1; }
.bc-peb:active .bc-mico { scale: .9; }
.bc-peb span { font-size: 7cqw; font-weight: 900; white-space: nowrap; text-shadow: 2.4px 0 0 #fff, -2.4px 0 0 #fff, 0 2.4px 0 #fff, 0 -2.4px 0 #fff, 1.7px 1.7px 0 #fff, -1.7px -1.7px 0 #fff, 1.7px -1.7px 0 #fff, -1.7px 1.7px 0 #fff; }
.bc-peb .bc-mico .badge { position: absolute; right: -1cqw; top: -1cqw; }
@keyframes bcPeb { from { opacity: 0; transform: scale(.3); } }
@keyframes bcBob { 0%,100% { translate: 0 -3%; } 50% { translate: 0 3%; } }
/* 7번 큰 물고기: 흰 구름이 아래에서 차오르며 위로 올라가는 느낌 → 타이틀 */
.bc-box.rise .bc-world { transform: translateY(18%) scale(.96); filter: blur(2px); transition: transform 1.9s cubic-bezier(.5,0,.8,.6), filter 1.9s; }
.bc-rise { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: visible; }
.bc-rise .wf { position: absolute; left: -200%; right: -200%; bottom: 0; height: 0; background: linear-gradient(0deg, #fff 0, #fff 70%, #fff0); animation: bcFill 1.9s cubic-bezier(.55,0,.7,.5) forwards; }
@keyframes bcFill { to { height: 130%; } }
.bc-rise img { position: absolute; translate: -50% 0; filter: brightness(0) invert(1) drop-shadow(0 6px 12px #8aa4c033); animation: bcCloud var(--d) cubic-bezier(.4,0,.8,.6) var(--dl) both; }
@keyframes bcCloud { from { top: 105%; opacity: .95; } to { top: -40%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bc-mon img, .bc-peb, .bc-peb .bc-mico, .bc-obj[data-n="6"], .bc-fish .bc-tail { animation: none !important; } }
.bc-birds, .bc-bshadows { position: absolute; inset: 0; z-index: 9500; pointer-events: none; overflow: visible; } /* 새 = 맨 위 층 */
.bc-bshadows { z-index: 8400; } /* 새 그림자: 물체·몬스터 위, 새 아래 */
.bc-bird, .bc-bshadow { position: absolute; left: 0; top: 0; will-change: transform; }
.bc-bshadow { opacity: .3; filter: blur(1.5px); }
.bc-box.t-night .bc-bshadow { opacity: .2; }
.bc-bird { filter: blur(var(--bl, 0px)); }
.bc-box.t-night .bc-bird { filter: brightness(.6) saturate(.7) blur(var(--bl, 0px)); }
.bc-oshadow { position: absolute; z-index: 1; pointer-events: none; filter: blur(1.5px); }
.bc-oshadow svg { display: block; width: 100%; }
.bc-oshadow path { fill: #2a2014; fill-opacity: .32; }
.bc-box.t-night .bc-oshadow path { fill: #120e08; fill-opacity: .3; }
/* 맨 아래 저작권 글: 모래사장 로비에서는 배경 없이 바다 위에 흰 글씨로 작게 (사용자 2026-10-14) */
body.insetup:has(.home.beach) .app { padding-bottom: 0; }
body.insetup:has(.home.beach) .home.beach { min-height: 100svh; }
body.insetup:has(.home.beach) .copy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 0 10px calc(4px + env(safe-area-inset-bottom)); background: none; color: #ffffffcc; font-size: 8px; line-height: 1.35; text-shadow: 0 0 3px #0003; pointer-events: none; }
.bc-box.fever .bc-peb[data-home="rank"] span { animation: bcRankGlow 1.4s ease-in-out infinite alternate; } /* 피버 타임: 바위 메뉴의 랭크 글자도 빛남 */
.bc-box.fever .bc-peb[data-home="rank"] .bc-mico { filter: drop-shadow(0 0 4px #ffd75e) drop-shadow(0 0 10px #ff9b3a99); }
@keyframes bcRankGlow { from { color: #b86a00; text-shadow: 2.4px 0 0 #fff, -2.4px 0 0 #fff, 0 2.4px 0 #fff, 0 -2.4px 0 #fff, 1.7px 1.7px 0 #fff, -1.7px -1.7px 0 #fff, 1.7px -1.7px 0 #fff, -1.7px 1.7px 0 #fff, 0 0 8px #ffd75e, 0 0 16px #ff9b3a88; }
  to { color: #e08a00; text-shadow: 2.4px 0 0 #fff, -2.4px 0 0 #fff, 0 2.4px 0 #fff, 0 -2.4px 0 #fff, 1.7px 1.7px 0 #fff, -1.7px -1.7px 0 #fff, 1.7px -1.7px 0 #fff, -1.7px 1.7px 0 #fff, 0 0 12px #ffe27a, 0 0 26px #ff8a2acc; } }
/* 넓은 화면 양옆 빛: 그림 칸 밖은 고른 빛만 (새벽은 오른쪽, 저녁은 왼쪽이 더 물듦) */
.bc-light::before, .bc-light::after { content: ''; position: absolute; top: 0; bottom: 0; width: 200%; }
.bc-light::before { right: 100%; } .bc-light::after { left: 100%; }
.bc-box.t-dawn .bc-light::before { background: #6a7fb022; } .bc-box.t-dawn .bc-light::after { background: linear-gradient(270deg, #ffe0b030, #ffe0b066), linear-gradient(0deg, #6a7fb022, #6a7fb022); }
.bc-box.t-eve .bc-light::before { background: linear-gradient(90deg, #ff5a2a30, #ff5a2a66), linear-gradient(0deg, #ff8a4a1c, #ff8a4a1c); } .bc-box.t-eve .bc-light::after { background: #ff8a4a1c; }
.bc-peb[hidden] { display: none; }
/* 반딧불이 (사용자 2026-10-15): 아주 작은 몸 + 더 큰 빛 번짐(테두리 색). 오래 멈추면 더 세게, 몬스터 테두리도 빛남 */
.bc-flies { position: absolute; inset: 0; z-index: 8300; pointer-events: none; overflow: visible; }
.bc-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .6s; will-change: transform; }
.bc-fly::before { content: ''; position: absolute; width: 9cqw; height: 9cqw; left: -4.5cqw; top: -4.5cqw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--fc, #ffd75e) 70%, transparent) 0, color-mix(in srgb, var(--fc, #ffd75e) 25%, transparent) 35%, transparent 70%); mix-blend-mode: screen; transition: all .8s; }
.bc-fly b { position: absolute; width: .7cqw; height: .7cqw; left: -.35cqw; top: -.35cqw; border-radius: 50%; background: color-mix(in srgb, var(--fc, #ffd75e) 45%, #fff); box-shadow: 0 0 .6cqw .15cqw var(--fc, #ffd75e); }
.bc-box.flyidle .bc-fly::before { width: 13cqw; height: 13cqw; left: -6.5cqw; top: -6.5cqw; background: radial-gradient(circle, color-mix(in srgb, var(--fc, #ffd75e) 90%, transparent) 0, color-mix(in srgb, var(--fc, #ffd75e) 35%, transparent) 35%, transparent 70%); }
.bc-mon .bc-mb img { transition: filter .6s; }
.bc-mon.lit .bc-mb img { filter: drop-shadow(0 0 .25cqw var(--fc, #ffd75e)) drop-shadow(0 0 1.2cqw var(--fc, #ffd75e)); }
.bc-box.t-night .bc-mon.lit .bc-mb img { filter: brightness(.55) saturate(.7) hue-rotate(10deg) drop-shadow(0 0 .25cqw var(--fc, #ffd75e)) drop-shadow(0 0 1.2cqw var(--fc, #ffd75e)); }
.bc-box.t-eve .bc-mon.lit .bc-mb img { filter: sepia(.25) saturate(1.2) brightness(.97) drop-shadow(0 0 .25cqw var(--fc, #ffd75e)) drop-shadow(0 0 1.2cqw var(--fc, #ffd75e)); }
.bc-box.t-dawn .bc-mon.lit .bc-mb img { filter: brightness(1.03) saturate(.9) drop-shadow(0 0 .25cqw var(--fc, #ffd75e)) drop-shadow(0 0 1.2cqw var(--fc, #ffd75e)); }
.bc-box.fc-rainbow .bc-flies, .bc-box.fc-rainbow .bc-mon.lit .bc-mb { animation: bcRainbow 4s linear infinite; }
@keyframes bcRainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.bc-box.fc-rainbow { --fc: #ff5e5e; }
/* 비행 몬스터 (사용자 2026-10-15): 땅에서 살짝 떠 있음. 그림자 = 발판(서 있는 자리), 몸이 오르내리면 그림자가 작아졌다 커짐. 밤에도 옅게. 바다 위에선 그림자 없음 */
.bc-mon.hover .bc-sh { width: 62%; height: 12%; translate: -50% 0 !important; background: #2a1f1077; filter: blur(1.5px); animation: bcHoverSh 2.4s ease-in-out infinite; opacity: .9 !important; }
.bc-box.t-night .bc-mon.hover .bc-sh { background: #0e0b0688; opacity: .7 !important; }
.bc-mon.hover.over .bc-sh { opacity: 0 !important; }
.bc-mon.hover .bc-mb img, .bc-mon.hover.walk .bc-mb img { animation: bcHover 2.4s ease-in-out infinite; }
@keyframes bcHover { 0%,100% { transform: translateY(-16%); } 50% { transform: translateY(-22%); } }
@keyframes bcHoverSh { 0%,100% { scale: 1; } 50% { scale: .82; } }
/* 밤 파도: 거품을 더 어둡게 (사용자 2026-10-15) */
.bc-box.t-night .bc-foam { filter: brightness(.5) saturate(.6); }
.bc-box.t-night .bc-mon .bc-rip { filter: brightness(.6); }
/* 넓은 화면 왼쪽 떠도는 반딧불이: 늘 노란빛, 오래 멈춰도 그대로 */
.bc-fly.wild { --fc: #ffd75e; transition: opacity .9s; }
.bc-box.flyidle .bc-fly.wild::before { width: 9cqw; height: 9cqw; left: -4.5cqw; top: -4.5cqw; background: radial-gradient(circle, #ffd75eb3 0, #ffd75e40 35%, transparent 70%); }
.bc-fish.wildf { transition: none; }
/* 메뉴 물체 위 마름모 표시 + 걸을 때 이름 (사용자 2026-10-15) */
.bc-marks { position: absolute; inset: 0; z-index: 8250; pointer-events: none; overflow: visible; transition: opacity .4s; }
.bc-box.menu .bc-marks { opacity: 0; }
.bc-mark { position: absolute; width: 0; height: 0; }
.bc-mark b { position: absolute; left: -1.3cqw; top: -1.3cqw; width: 2.6cqw; height: 2.6cqw; rotate: 45deg; border: .35cqw solid #bfe8ffee; border-radius: .3cqw; box-shadow: 0 0 .6cqw .1cqw #8fd6ffaa, 0 0 1.8cqw .3cqw #8fd6ff55, inset 0 0 .6cqw #8fd6ff66; /* 은은한 하늘빛 + 약한 블룸 (사용자 2026-10-15) */ animation: bcMark 2.2s ease-in-out infinite; }
.bc-mark[data-n="7"] b { animation-delay: -1.1s; }
@keyframes bcMark { 0%,100% { translate: 0 0; } 50% { translate: 0 -.8cqw; } }
.bc-mark span { position: absolute; left: 0; bottom: 2.6cqw; translate: -50% 0; white-space: nowrap; font: 900 3.6cqw/1 var(--font); color: #fff; text-shadow: 0 0 .5cqw #3b2a1a99, 0 0 1.4cqw #3b2a1a55; opacity: 0; transition: opacity .6s .5s, translate .6s .5s; }
.bc-box.walking .bc-mark span { opacity: .75; translate: -50% -.8cqw; transition: opacity .35s, translate .35s; }
.bc-mark.hov span { opacity: 1; translate: -50% -.8cqw; transition: opacity .2s, translate .2s; } /* 컴퓨터: 마우스를 올리면 메뉴 이름 (2026-10-19 사용자) */
.bc-box.t-night .bc-mark b { border-color: #a9dcffdd; }
.bc-mark.alert b { border-color: #ffb3b0f2; box-shadow: 0 0 .7cqw .2cqw #ff5a50cc, 0 0 2.6cqw .6cqw #ff5a5077, inset 0 0 .7cqw #ff6a6088; } /* 알람: 빨강, 블룸 조금 더 세게 (사용자 2026-10-15) */
.bc-box.t-night .bc-mark.alert b { border-color: #ffa8a4ee; }
@media (prefers-reduced-motion: reduce) { .bc-mark b { animation: none; } }
/* 모래사장 특수능력 연출 (2026-10-15): 배틀 판은 안 보이고 연출만. 피해 숫자·몬스터 말·화살표 숨김 */
.lbab { position: absolute; pointer-events: none; } /* z-index 없음: 안의 층이 몬스터와 앞뒤를 따로 맞춤 */
.lbab .board { z-index: auto !important; transform: none !important; filter: none !important; opacity: 1 !important; }
.lbab .fxunder { z-index: var(--mzu, 1) !important; } /* 몬스터보다 아래 연출 (땅울림 등) */
.lbab .fxlayer, .lbab .fxtop { z-index: 8350 !important; } /* 몬스터보다 위 연출 (낙엽베기 등) */
.lbab .board { width: 100% !important; height: 100% !important; max-width: none !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.lbab .board::before, .lbab .board::after { display: none !important; }
.lbab .bc { background: none !important; border: 0 !important; box-shadow: none !important; }
.lbab .unit, .lbab .burst, .lbab .apair, .lbab .arrows, .lbab .ghost, .lbab .widetext { opacity: 0 !important; }
/* 사용자 2026-10-15: 스킬 연출만. 공격 방향·맞은 칸 빨간 빛·범위 표시·숫자는 안 보임 */
.lbab .tileflash, .lbab .areaflash, .lbab .fxnum, .lbab .cineclip, .lbab .kfeed, .lbab .kfrow, .lbab .hpghost, .lbab .healpre, .lbab .domcell, .lbab .radlayer, .lbab .mvl { display: none !important; }
.lbab .fxlayer > :not(.abilfx), .lbab .fxtop > :not(.abilfx) { display: none !important; }
.bc-mon.dug { opacity: 0; transition: opacity .35s; }
.bc-mon.pop .bc-mb { animation: bcPop2 .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes bcPop2 { from { transform: translateY(30%) scale(.6); } to { transform: none; } }
/* ==== 새 로비 끝 ==== */
/* ==== 몬스터 박스 (2026-10-15 사용자, js/box.js). 카드 디자인은 사용자 그림이 오면 바꿈 (지금은 임시) ==== */
.bxm h2 small { font-size: 13px; color: #7a6f8f; margin-left: 4px; }
.bxhelp { font-size: 12px; color: #6d6580; margin: 0 0 10px; }
.bxgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.bxslot { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; border: 2px dashed #d6cfe6; background: #f7f4fc; display: grid; place-items: center; padding: 0; font: inherit; color: #9a90b0; }
button.bxslot { cursor: pointer; border-style: solid; border-color: transparent; background: none; }
.bxlock { font-size: 16px; opacity: .45; }
.bxbuy { border: 2px dashed #e3b23c !important; background: #fff8e6 !important; font-size: 16px; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; color: #8a6a10; }
.bxbuy small { font-size: 11px; font-weight: 800; display: flex; align-items: center; gap: 2px; }
.bxcard { position: relative; width: 100%; height: 100%; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px 3px 5px; box-sizing: border-box; pointer-events: none;
  background: linear-gradient(160deg, #fff, var(--gc2)); border: 2px solid var(--gc); box-shadow: 0 2px 0 var(--gc); }
.bxcard.gS, .bxcard.gSS { --gc: #e3a812; --gc2: #ffe9a8; } .bxcard.gA { --gc: #9b5cff; --gc2: #e6d8ff; } .bxcard.gB { --gc: #3d7dff; --gc2: #d6e5ff; } .bxcard.gC { --gc: #3aa55d; --gc2: #d5f2dd; }
.bxcard.gS { animation: bxShine 2.4s ease-in-out infinite; }
@keyframes bxShine { 0%,100% { box-shadow: 0 2px 0 var(--gc), 0 0 0 #ffd75e00; } 50% { box-shadow: 0 2px 0 var(--gc), 0 0 10px #ffd75eaa; } }
.bxg { position: absolute; left: 4px; top: 3px; font-style: normal; font-weight: 900; font-size: 13px; color: #fff; background: var(--gc); border-radius: 6px; padding: 0 5px; line-height: 17px; }
.bxart { flex: 1; display: grid; place-items: center; width: 100%; min-height: 0; }
.bxart svg { width: 78%; height: auto; max-height: 100%; }
.bxcard b { font-size: 11px; line-height: 1.2; color: #2b2340; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bxcard small { font-size: 10px; color: #5f5675; font-weight: 700; }
.bxcard.big { width: 132px; height: 176px; margin: 0 auto 8px; }
.bxcard.big .bxg { font-size: 18px; line-height: 24px; padding: 0 8px; }
.bxcard.big b { font-size: 15px; } .bxcard.big small { font-size: 12px; }
.bxdet { text-align: center; }
.bxrec { font-size: 12px; color: #5f5675; margin: 0 0 6px; }
/* 박스 카드 능력치 (2026-10-19 사용자): 아이콘 + 숫자, 두 줄 (4칸 + 3칸) */
.bxst { margin: 0 auto 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 280px; }
.bxsc { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 10px; background: #f3eefb; }
.bxsc .sico { width: 22px; height: 22px; }
.bxsc b { font-size: 15px; line-height: 1.1; color: #2b2340; }
.bxsc small { font-size: 10px; color: #a097b5; }
.modal .lastbtn { display: block; margin: 14px auto 0; }
.bxreg { font-size: 12px; font-weight: 700; margin: 4px 0; }
.bxcards { text-align: left; font-size: 11.5px; color: #4b4360; margin: 0 auto; padding-left: 18px; max-width: 280px; }
.bxcards li { margin: 2px 0; } .bxcards i { font-style: normal; color: #8a80a0; }
.bxcs { display: inline-flex; align-items: center; gap: 1px; margin-right: 4px; font-weight: 700; } .bxcs .sico { width: 15px; height: 15px; }
.bxpick .bxslot { pointer-events: auto; }
/* ==== 몬스터 박스 끝 ==== */
/* ==== 로비 고르기 (2026-10-15 사용자) ==== */
.setlobby { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 4px; border-top: 1px solid #eee8f6; font-weight: 700; }
.setlb { display: flex; gap: 4px; background: #f1ecfa; border-radius: 99px; padding: 3px; }
.setlb button { border: 0; background: none; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; color: #7a6f8f; cursor: pointer; }
.setlb button.on { background: #3c2a63; color: #fff; }
.setwalk { width: 100%; margin-top: 6px; }
.lbcloud { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.lbcloud .wf { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #fff 0, #fff 70%, #fff0); animation: bcFill 1.5s cubic-bezier(.55,0,.7,.5) forwards; }
.lbcloud img { position: absolute; bottom: -30%; translate: -50% 0; filter: brightness(0) invert(1) drop-shadow(0 6px 12px #8aa4c033); animation: lbCloudUp 1.3s cubic-bezier(.4,0,.8,.6) var(--dl) both; }
@keyframes lbCloudUp { from { transform: translateY(40vh); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-55vh); opacity: 1; } }
.lbcloud.full .wf { height: 120%; animation: none; }
.lbcloud.full img { animation: none; transform: translateY(-55vh); }
.lbcloud.out .wf, .lbcloud.out img { animation: lbCloudDown 1.2s cubic-bezier(.3,.1,.6,1) forwards; }
@keyframes lbCloudDown { to { transform: translateY(110vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lbcloud .wf, .lbcloud img { animation-duration: .01s !important; } }
/* ==== 로비 고르기 끝 ==== */
.hnav:has(#btnHBox) { grid-template-columns: repeat(6, 1fr); } /* 예전 로비 아래 메뉴: 박스까지 6칸 한 줄 (2026-10-15) */
.hnav:has(#btnHBox) .hico { width: 34px; height: 34px; }
.hnav:has(#btnHBox) button span { font-size: 11px; letter-spacing: -.5px; }
/* 예전 로비 가운데 몬스터: 누르면 산책 (2026-10-15 사용자). 그림만 눌림 (카드보다 뒤라 가려진 곳은 카드가 눌림) */
#stage .home:not(.beach) .hpeek { cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
#stage .home:not(.beach) .hpeek:active { scale: .97; }
.walkhint { font-size: 12px; color: #8a80a0; margin-top: -4px; }
/* ==== 그림자 생체 (수흑 계열 소환물, 2026-10-15) ==== */
.board .minion { position: absolute; width: calc(100% / var(--bw)); height: calc(100% / var(--bh)); z-index: 2; pointer-events: none; display: grid; place-items: center; }
.board .minion img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 2px 0 #0004); animation: mnBob 2.4s ease-in-out infinite; }
.board .minion::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, #1a1a2a55, transparent 70%); }
.board .minion.p1 img { filter: drop-shadow(0 0 3px #e5484d) drop-shadow(0 2px 0 #0004); } .board .minion.p2 img { filter: drop-shadow(0 0 3px #3b82f6) drop-shadow(0 2px 0 #0004); }
.board .minion.p3 img { filter: drop-shadow(0 0 3px #2fbf71) drop-shadow(0 2px 0 #0004); } .board .minion.p4 img { filter: drop-shadow(0 0 3px #f5c400) drop-shadow(0 2px 0 #0004); }
.board .minion.mnew { visibility: hidden; }
@keyframes mnBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -5%; } }
.board .swapcell { font-size: 20px; inset: auto; width: calc(100% / var(--bw) - 6px); height: calc(100% / var(--bh) - 6px); margin: 3px; z-index: 6; display: grid; place-items: center; padding: 0; } /* 2026-10-20 사용자 버그: inset 때문에 판 끝까지 늘어나 5×5처럼 보였음 → 그림자 생체 칸만 */
@media (prefers-reduced-motion: reduce) { .board .minion img { animation: none; } }
/* ==== 그림자 생체 끝 ==== */

/* 괴현상 (2026-10-19 사용자): 이동력·회전력 0인 몬스터가 이번 턴 1로 고정될 때 머리 위 작은 표시 */
.unit.weirdon::after{content:'';position:absolute;left:50%;top:44%;width:112%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(170,90,255,0) 52%,rgba(170,90,255,.55) 64%,rgba(150,70,255,0) 74%);box-shadow:0 0 0 2px rgba(178,108,255,.85),0 0 16px 6px rgba(150,70,255,.6);pointer-events:none;z-index:2;animation:weirdglow 1.8s ease-in-out infinite}
.unit.weirdon.bigu::after{width:auto;aspect-ratio:auto;inset:-4%;transform:none;border-radius:14%}
@keyframes weirdglow{50%{opacity:.6}}
.weirdpop{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:91;pointer-events:none;text-align:center;padding:10px 20px;border-radius:16px;background:rgba(48,18,84,.9);color:#f0e2ff;box-shadow:0 0 0 3px #a874ff,0 0 24px 6px rgba(150,80,255,.55);animation:weirdpop 1.7s ease-out forwards}
.weirdpop b{display:block;font-size:22px;letter-spacing:.04em}
.weirdpop small{display:block;font-size:12px;opacity:.9;margin-top:2px}
@keyframes weirdpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.weirdline{color:#7a4bb3}
/* 변이 연출 (2026-10-19 사용자 그림 6칸, 진화 연출 대체): 그림은 몬스터 위에 겹쳐 JS 애니메이션으로 */
.evostage.mut .evoart.old, .evostage.mut .evoart.new { animation: none; }
.evostage.mut .evoart.new { opacity: 0; }
.evostage.mut.quick .evoart.old { display: none; }
.evostage.mut.quick .evoart.new { opacity: 1; }
.evostage .mutf { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; opacity: 0; pointer-events: none; z-index: 2; }
/* 박스 놓아주기 (2026-10-19 사용자): 빨간 버튼 + 되돌릴 수 없다는 경고 */
.btn.danger { background: #d93a3a; border-color: #a82424; color: #fff; }
.btn.danger:hover { background: #c22e2e; }
.dangerwarn { background: #ffe3e3; color: #a31d1d; border: 2px solid #e05252; border-radius: 10px; padding: 8px 10px; font-weight: 600; }

/* 체력이 낮을 때 (2026-10-19 사용자, 모두 공통): 40%(반내림) 이하 주황, 20%(반내림) 이하 빨강. 맞음·회복 깜빡임과 상태 색(독·방어 등)은 그대로 */
.hpr.hpl1 .hpr-fill { stroke: #ff9a2e; } .hpr.hpl2 .hpr-fill { stroke: #e5484d; }
.pips.hpl1 span:not(.lost):not(.hit):not(.heal):not(.healpre):not(.part) { background: #ff9a2e; } .pips.hpl1 span.part { background: linear-gradient(90deg, #ff9a2e var(--f), #3a302b var(--f)); }
.pips.hpl2 span:not(.lost):not(.hit):not(.heal):not(.healpre):not(.part) { background: #e5484d; } .pips.hpl2 span.part { background: linear-gradient(90deg, #e5484d var(--f), #3a302b var(--f)); }
.mchbar.hpl1 i:not(.hpghost):not(.flashhit):not(.flashheal), .ochp.hpl1 i:not(.hpghost):not(.flashhit) { background: linear-gradient(180deg, #ffc27a, #ff9a2e); }
.mchbar.hpl2 i:not(.hpghost):not(.flashhit):not(.flashheal), .ochp.hpl2 i:not(.hpghost):not(.flashhit) { background: linear-gradient(180deg, #ff8a8d, #e5484d); }

/* 출석 보상 팝업 (2026-10-19 사용자): 수흑 계열·그림자 생체로 꾸민 깊은 바다 느낌 */
.attpop .modal { background: linear-gradient(180deg, #1d2440 0%, #141a30 60%, #0e1224 100%); color: #e9edff; border: 2px solid #5b6bb8; max-width: 440px; }
.attpop .modal h2 { color: #fff; text-shadow: 0 0 10px #7d8cff88; }
.attdeco { position: relative; height: 62px; display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: -4px 0 4px; }
.attdeco { background: radial-gradient(ellipse 60% 70% at 50% 75%, #9fb0ff55, transparent 70%); }
.attdeco .attdk { line-height: 0; filter: drop-shadow(0 0 5px #c9d3ffcc) drop-shadow(0 0 2px #fff8); animation: attbob 3.2s ease-in-out infinite; }
.attc .attart svg { filter: drop-shadow(0 0 4px #c9d3ffaa); }
.attdeco .k1 { animation-delay: -.8s; } .attdeco .k2 { animation-delay: -1.6s; align-self: center; } .attdeco .k3 { animation-delay: -2.4s; }
@keyframes attbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.attsum { text-align: center; margin: 2px 0 10px; } .attsum small { opacity: .7; }
.attgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; } /* 4칸 + 3칸 가운데 */
.attgrid .attc { width: calc(25% - 6px); }
.attc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 108px; padding: 6px 3px 18px; border-radius: 12px; border: 2px solid #3a4478; background: #232b4d; color: inherit; font: inherit; cursor: default; }
.attc .attd { font-weight: 800; font-size: 13px; color: #b8c2ff; }
.attc .attart { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
.attc .attart .shopline { width: 76px; height: 52px; transform: scale(.82); transform-origin: center bottom; }
.attc .attcoin .coinico { width: 30px; height: 30px; } .attc .attn { font-size: 18px; color: #ffe27a; }
.attc .attticket { font-size: 32px; } .attc .attplus { font-size: 12px; color: #ffe27a; } .attc .attplus .coinico { width: 14px; height: 14px; }
.attc small { font-size: 10.5px; line-height: 1.2; text-align: center; opacity: .9; word-break: keep-all; }
.attc .attok, .attc .attgo, .attc .attlk { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; }
.attc.got { opacity: .55; } .attc.got .attok { color: #8be08f; }
.attc.lock { filter: saturate(.4); } .attc.lock .attart { opacity: .55; } .attc.lock .attlk { opacity: .8; }
.attc.ready { cursor: pointer; border-color: #ffd25a; background: #2d3566; box-shadow: 0 0 0 2px #ffd25a55, 0 0 16px #ffd25a66; animation: attglow 1.6s ease-in-out infinite; }
.attc.ready .attgo { color: #ffd25a; }
@keyframes attglow { 0%, 100% { box-shadow: 0 0 0 2px #ffd25a44, 0 0 10px #ffd25a44; } 50% { box-shadow: 0 0 0 2px #ffd25aaa, 0 0 20px #ffd25a99; } }
.attmsg { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #ffffff14; font-size: 13px; line-height: 1.45; }
.attbtns { display: flex; justify-content: center; margin-top: 10px; }
.attbtns .attall { min-width: 60%; }
.attpop .choices .btn.alt, .attpop .btn.close { background: #2a3260; color: #e9edff; border-color: #4a57a0; }
/* 신규 몬스터 홍보 */
.promo { text-align: center; } .promo .shopline.big { margin: 4px auto 6px; transform: scale(1.35); transform-origin: center bottom; height: 80px; }
.promo .promonm { font-size: 17px; margin: 14px 0 2px; } .promo .promokids { opacity: .8; margin: 0 0 8px; } .promo .promohow { margin: 6px 0 0; }
/* 능력치 티켓·박스 공격 방향 (2026-10-19 사용자) */
.bxdirs { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.tkhelp { font-size: 13px; line-height: 1.45; }
.tklist { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.tkc { text-align: left; padding: 8px 10px; border-radius: 10px; border: 1.5px solid #d9cfe8; background: #faf7ff; font: inherit; cursor: pointer; }
.tkc:hover { border-color: #8e5bd0; }
.tkc small { opacity: .75; }
.tkc * { pointer-events: none; } /* 2026-10-20 사용자: 티켓 카드 터치가 잘 안 먹힘 → 안쪽 글자·아이콘을 눌러도 카드 버튼이 눌리게 */
.tkc { min-height: 44px; }
.tkdiff { display: flex; flex-wrap: wrap; gap: 6px; }
.bxdirpick { display: flex; justify-content: center; }
.bxdirpick .dc.on { cursor: pointer; }
.bxdirpick .dc.on.pick { background: #e5484d !important; color: #fff !important; box-shadow: 0 0 0 2px #e5484d88; }
.bxdirpick .dc.on.pick::after { content: '✕'; position: absolute; font-size: 10px; top: 0; right: 2px; }
.bxdirpick .dc { position: relative; }
.tksel { text-align: center; }
.bppat { padding-left: 18px; } .bppat li { margin: 4px 0; } .bptk { font-size: 15px; }
.bptk1 { font-size: 12px; color: #8a5a00; font-weight: 700; } /* 2026-10-20 사용자: 능력치 티켓[몬스터 이름] */
.bxcard .bxtk { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 13px; font-weight: 800; line-height: 1; pointer-events: none; } /* 이 몬스터 전용 능력치 티켓 */
.bpc { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 8px; background: #f1ebfa; margin: 2px 3px 2px 0; white-space: nowrap; }
.bpc .sico { width: 16px; height: 16px; }
/* 출석 보상 다듬기 (2026-10-19 사용자) */
.attc .attdisc { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #c9d3ff88, 0 0 10px #c9d3ff66; }
.attc .attdisc svg { width: 42px; height: 42px; filter: none !important; }
.attbtns .attall { min-width: 78%; padding: 14px 18px; font-size: 19px; font-weight: 800; color: #3a2400; border: 3px solid #fff3c4; border-radius: 16px;
  background: linear-gradient(180deg, #ffe680 0%, #ffbe2e 55%, #ff9a1f 100%); box-shadow: 0 4px 0 #b86a00, 0 0 18px #ffd25a99; animation: attbtn 1.4s ease-in-out infinite; }
.attbtns .attall:active { transform: translateY(3px); box-shadow: 0 1px 0 #b86a00, 0 0 18px #ffd25a99; }
.attbtns .attall:disabled { animation: none; background: #3a4478; color: #9aa4d6; border-color: #4a57a0; box-shadow: none; }
@keyframes attbtn { 0%, 100% { border-color: #fff3c4; box-shadow: 0 4px 0 #b86a00, 0 0 10px #ffd25a77; } 50% { border-color: #fff; box-shadow: 0 4px 0 #b86a00, 0 0 26px #ffe680, 0 0 6px #fff inset; } }
.attpop .modal { position: relative; overflow: visible; margin-bottom: 34px; }
.atthide { position: absolute; right: 2px; bottom: -30px; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000c; cursor: pointer; }
.atthide input { width: 17px; height: 17px; accent-color: #ffbe2e; }
/* 위급 알림 강조 (2026-10-19 사용자): 띠롱 소리가 날 때만 잠깐 */
.hpr.hpalert .hpr-fill { animation: hpalertR 1.1s ease-out; }
@keyframes hpalertR { 0%, 60% { stroke: #ff2b30; filter: drop-shadow(0 0 6px #ff2b30); stroke-width: 10; } 100% { filter: none; } }
.mchbar.hpalert, .ochp.hpalert, .pips.hpalert { animation: hpalertB 1.1s ease-out; }
@keyframes hpalertB { 0%, 50% { box-shadow: 0 0 0 2px #ff2b30, 0 0 12px #ff2b30cc; } 100% { box-shadow: none; } }

/* 들썩 (2026-10-19 사용자, 레이드 미리보기와 같은 연출): 피해 10 이상이면 나머지 몬스터 발밑 그림자 → 내려앉으며 모래먼지 */
.fxhop { z-index: 1; }
.fxhopsh { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, #0007 0 45%, #0000 70%); animation: fxhopsh .9s ease both; pointer-events: none; }
@keyframes fxhopsh { 0% { opacity: 0; transform: scale(1); } 30%, 52% { opacity: 1; transform: scale(.6); } 70% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.fxhopdust { position: absolute; pointer-events: none; }
.fxhopdust b { position: absolute; bottom: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #cdb68aff 0 45%, #c8b48a00 72%); opacity: 0; animation: fxhoppuff .7s ease-out .58s both; }
.fxhopdust b:nth-child(1) { left: -30%; --dx: -18px; } .fxhopdust b:nth-child(2) { left: 18%; --dx: -6px; animation-delay: .6s; } .fxhopdust b:nth-child(3) { left: 44%; --dx: 6px; animation-delay: .6s; } .fxhopdust b:nth-child(4) { left: 70%; --dx: 18px; }
@keyframes fxhoppuff { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.6), -14px) scale(2); } }

/* ---- 새 화면 배치 (2026-10-19 사용자 화면 개편 그림. ?newui=1 일 때만) ---- */
body.nui .players { display: block; margin: 6px 0; }
body.nui.nph-growth .notice, body.nui.nph-battle .notice { display: none; }
.mypan { position: relative; display: grid; grid-template-columns: 74px 1fr 64px 46px; grid-template-rows: auto auto; gap: 4px 6px; align-items: center; background: #fff; border: 3px solid var(--pc); border-radius: 16px; padding: 7px 8px 5px; box-shadow: 0 3px 0 #0000001a; cursor: pointer; }
.mypan.ko { filter: grayscale(.8); }
.mypan.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 35%, transparent), 0 3px 0 #0000001a; }
.mpdir { width: 70px; height: 70px; display: grid; place-items: center; }
.mpdir > * { max-width: 70px; max-height: 70px; }
.mpdir .tok { transform: scale(.82); }
.mpdir.bigm > * { transform: scale(.62); }
.mpst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #e7e1e4; border-radius: 9px; padding: 4px; }
.mpc { position: relative; overflow: hidden; display: flex; align-items: baseline; justify-content: space-between; gap: 2px; background: #fff; border: 2px solid #2a2320; border-radius: 6px; padding: 2px 5px; min-height: 30px; isolation: isolate; }
.mpc .mpbg { position: absolute; right: -4px; bottom: -6px; font-style: normal; font-size: 26px; opacity: .28; z-index: -1; pointer-events: none; }
.mpc .mpbg .sico { width: 30px; height: 30px; }
.mpc small { font-size: 10px; font-weight: 900; color: #3a3044; align-self: center; }
.mpc b { font-size: 16px; font-weight: 900; }
.mpc.k-crit .mpbg { font-size: 22px; }
.mpc.k-crit b { font-size: 12px; }
.mpc.up b { color: #2f9e44; } .mpc.neg b { color: #d6332a; } .mpc.zero b { color: #c99a06; }
.mphp { display: grid; justify-items: center; gap: 1px; }
.mpheart { font-style: normal; font-size: 30px; line-height: 1; }
.mpheart .sico { width: 34px; height: 34px; }
.mphn { display: grid; justify-items: center; line-height: 1.05; }
.mphn small { font-size: 9px; font-weight: 900; color: var(--muted); }
.mphn b { font-size: 17px; font-weight: 900; }
.mphn b small { font-size: 10px; color: var(--muted); }
.mphb { position: relative; width: 58px; height: 6px; border-radius: 4px; background: #e5dfe9; overflow: hidden; }
.mphb > i { position: absolute; inset: 0 auto 0 0; background: #49b85b; border-radius: 4px; transition: width .4s; }
.mphb.hpl1 > i { background: #f0932b; } .mphb.hpl2 > i { background: #e5484d; }
.mpfan { position: relative; display: grid; justify-items: center; align-self: stretch; padding-right: 14px; }
.mpfan small { font-size: 9px; font-weight: 900; color: var(--muted); }
.mpfan b { font-size: 17px; font-weight: 900; line-height: 1.1; }
.mpcrowd { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1px; max-width: 34px; }
.mpsh { width: 10px; height: 12px; display: block; }
.mpsh svg { width: 100%; height: 100%; display: block; }
.mpfbar { position: absolute; right: 0; top: 2px; bottom: 2px; width: 9px; border: 2px solid #2a2320; border-radius: 3px; background: #fff; overflow: hidden; }
.mpfbar i { position: absolute; left: 0; right: 0; bottom: 0; background: #ffe03a; }
.mpab { grid-column: 1 / -1; display: flex; gap: 6px; font-size: 11px; font-weight: 800; color: #4a4155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpab .mpmore { margin-left: auto; color: var(--muted); font-weight: 700; }
/* 성장 위쪽 */
.ngtop { background: #fff; border: 2px solid #2a2320; border-radius: 14px; padding: 6px 8px; margin-bottom: 6px; }
.ngfield { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; grid-template-rows: auto auto; gap: 4px 6px; align-items: center; }
.ngp { display: grid; grid-template-columns: 38px auto; grid-template-rows: auto auto; align-items: end; gap: 0 4px; padding: 3px 4px; border-radius: 10px; }
.ngp.now { background: color-mix(in srgb, var(--pc) 14%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 60%, #fff); }
.ngp.l1 { grid-column: 1; grid-row: 1; } .ngp.l2 { grid-column: 1; grid-row: 2; }
.ngp.r1 { grid-column: 3; grid-row: 1; } .ngp.r2 { grid-column: 3; grid-row: 2; }
.ngspot { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; }
.ngspot .gmon { width: 36px; height: 36px; }
.ngghost { width: 34px; height: 34px; border-radius: 50%; border: 3px dashed var(--pc); display: grid; place-items: center; opacity: .45; }
.ngghost svg { width: 26px; height: 26px; }
.ngnm { font-size: 10px; font-weight: 900; color: var(--pc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.mgr { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.mgb { position: relative; width: 13px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.mgb i { display: block; width: 9px; min-height: 2px; background: #2a2320; border-radius: 2px 2px 0 0; }
.mgb.time i { background: #8e5bd0; }
.mgb b { position: absolute; top: -1px; font-size: 9px; font-weight: 900; line-height: 1; }
.mgb.zero b { color: #b9b0c2; }
.mgb em { font-style: normal; line-height: 0; margin-top: 1px; }
.mgb em .sico { width: 12px; height: 12px; }
.mgr { padding-top: 9px; height: 48px; border-bottom: 2px solid #2a2320; }
.mgr.big { height: 64px; }
.mgr.big .mgb { width: 18px; } .mgr.big .mgb i { width: 13px; } .mgr.big .mgb em .sico { width: 16px; height: 16px; }
.ngcenter { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: center; gap: 2px; }
.ngtime { display: flex; gap: 2px; padding: 8px; border-radius: 50%; background: radial-gradient(#fff6c8, #f3e3a0); box-shadow: 0 0 0 3px #2a2320, 0 0 14px #ffd84a88; animation: ngfloat 2.4s ease-in-out infinite; }
.ngtime .sico { width: 30px; height: 30px; }
.ngcenter small { font-size: 9px; font-weight: 900; color: var(--muted); }
@keyframes ngfloat { 50% { transform: translateY(-4px); } }
.ngturn { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--line); }
.ngtn { display: flex; align-items: center; gap: 4px; background: #d9d6dc; border-radius: 6px; padding: 2px 8px; }
.ngtn small { font-size: 10px; font-weight: 900; margin-right: 2px; }
.ngtn b { font-size: 17px; font-weight: 900; color: #fff; text-shadow: 0 0 1px #6a6070; }
.ngtn b.on { color: #8e5bd0; font-size: 22px; text-shadow: none; } .ngtn b.done { color: #8a8290; }
.ngevo { display: flex; align-items: center; gap: 4px; }
.ngevo b { font-size: 22px; font-weight: 900; color: #8e5bd0; } .ngevo small { font-size: 11px; font-weight: 900; }
.ngwho { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--p); }
.nmatfly { position: fixed; z-index: 60; width: 32px; height: 32px; display: grid; place-items: center; pointer-events: none; filter: drop-shadow(0 2px 3px #0005); }
.nmatfly .sico { width: 30px; height: 30px; }
/* 진화 목록 (가로로 넘김) */
.nevobar { background: #fff; border: 2px solid #2a2320; border-radius: 14px; padding: 6px 6px 8px; margin-top: 6px; }
.nevoh { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.nevoh b { font-size: 14px; font-weight: 900; }
.nevoarw { display: flex; gap: 4px; margin: 0 auto; }
.nevoarw button { width: 34px; height: 26px; border-radius: 8px; border: 2px solid #2a2320; background: #fff; font-size: 13px; font-weight: 900; }
.nevotree { font-size: 11px; font-weight: 800; border: 1px solid var(--line); background: #f8f6fa; border-radius: 8px; padding: 3px 8px; }
.nevorow { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.nevorow::-webkit-scrollbar { display: none; }
.nevo { flex: 0 0 calc((100% - 24px) / 5); min-width: 62px; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; border: 0; background: none; padding: 2px; border-radius: 10px; }
.nevo.ready { background: #e6f7e6; box-shadow: inset 0 0 0 2px #2f9e44; }
.nevo.pinned { background: #fff5d6; }
.nevoart { position: relative; width: 54px; height: 54px; border-radius: 50%; background: #8a8590; display: grid; place-items: center; border: 2px solid #2a2320; }
.nevoart.evo2 { background: #6d5a86; }
.nevoart svg { width: 46px; height: 46px; }
.nevopin { position: absolute; right: -4px; top: -4px; font-style: normal; font-size: 13px; }
.nevonm { font-size: 10px; font-weight: 900; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nevomat { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 3px; }
.nevomat em { font-style: normal; font-size: 9px; font-weight: 900; color: #c0392b; display: flex; align-items: center; }
.nevomat em.ok { color: #2f9e44; }
.nevomat .sico { width: 12px; height: 12px; }
.nevoempty { font-size: 12px; color: var(--muted); padding: 8px; }
.gboard.nui .rscene { height: 26px; }
/* 배틀 위쪽: 주사위 줄 · 체력 줄 */
/* 2026-10-21 사용자: 결승전(.battlewrap.final 안)에서도 앞 라운드와 같은 글자 색 */
.ndice { display: flex; justify-content: space-around; gap: 6px; background: #fff; color: var(--text); border: 2px solid #2a2320; border-radius: 14px 14px 0 0; padding: 5px 6px 4px; min-height: 84px; }
.ndice.empty { align-items: center; justify-content: center; color: var(--muted); font-size: 11px; font-weight: 800; }
.ndie { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.ndnm { font-size: 10px; font-weight: 900; color: var(--pc); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndie.me .ndnm { color: #fff; background: var(--pc); border-radius: 6px; padding: 0 6px; }
.ndface { width: 40px; height: 40px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px; gap: 1px; background: #fff; border: 2.5px solid #2a2320; border-radius: 7px; transition: opacity .2s; }
.ndface i { border-radius: 50%; }
.ndface i.on { background: #2a2320; margin: 1px; }
.ndie.me .ndface { box-shadow: 0 0 0 3px #ffd84a; }
.ndhide .ndface, .ndhide .ndopt { opacity: 0; }
.ndopt { display: flex; gap: 2px; }
.ndopt em { font-style: normal; font-size: 9.5px; font-weight: 900; background: #f1edf5; border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; white-space: nowrap; }
.nhprow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 8px; background: #fff; color: var(--text); border: 2px solid #2a2320; border-top: 0; border-radius: 0 0 14px 14px; padding: 5px 8px 7px; margin-bottom: 6px; }
.nhprow.n3, .nhprow.n4 { grid-template-columns: repeat(2, 1fr); }
.nhp { display: flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; min-width: 0; }
.nhp.ko { filter: grayscale(1); opacity: .55; }
.nhpdot { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pc); display: grid; place-items: center; border: 2px solid #2a2320; }
.nhpdot svg { width: 22px; height: 22px; }
.nhpbar { position: relative; flex: 1; height: 16px; border: 2px solid #2a2320; border-radius: 4px; background: #3f3448; overflow: hidden; }
.nhpbar > i { position: absolute; inset: 0 auto 0 0; background: #c5f54f; transition: width .4s; }
.nhpbar.hpl1 > i { background: #ffb052; } .nhpbar.hpl2 > i { background: #f2554f; }
.nhpbar .shfill { position: absolute; top: 0; bottom: 0; left: 0; background: #b9b4bf99; }
.nhpbar b { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 0 2px #000; }
/* 배틀 아래: 변이 종류 · 방사능 구름 · 재료 */
.nbot { display: grid; grid-template-columns: 96px 1fr auto; gap: 6px; align-items: stretch; background: #fff; border: 2px solid #2a2320; border-radius: 14px; padding: 6px; margin-top: 8px; min-height: 110px; }
.nbevo { border-right: 2px solid #3b285c; padding-right: 4px; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.nbevo > b { font-size: 11px; font-weight: 900; }
.nbevol { max-height: 104px; overflow-y: auto; display: grid; gap: 3px; align-content: start; scrollbar-width: thin; }
.nbevol .nevo { flex: none; min-width: 0; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; justify-items: start; text-align: left; column-gap: 4px; }
.nbevol .nevoart { width: 32px; height: 32px; grid-row: 1 / 3; }
.nbevol .nevoart svg { width: 26px; height: 26px; }
.nbevol .nevonm { font-size: 9.5px; }
.nbevol .nevomat { justify-content: flex-start; }
.nbevol .nevopinh { font-size: 9px; font-weight: 800; color: #b07a00; margin-top: 2px; } /* 고정 (배틀 변이 종류, 2026-10-26) */
.nbrad { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* 레이드 아래 칸 (2026-10-25 사용자): '데케타스 레이드' 빨간 칸만 */
.nbot.rd-nbot { display: block; padding: 6px; }
.rdnb { height: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(180deg, #e0413a, #b3221d); border: 2px solid #7a1411; border-radius: 10px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.rdnb b { font-size: 24px; font-weight: 900; letter-spacing: 1px; }
.rdnb small { font-size: 13px; font-weight: 800; opacity: .9; }
.nbrad img, .nbrad > i { width: 54px; height: 54px; object-fit: contain; font-style: normal; font-size: 40px; }
.nbrad span { display: grid; line-height: 1.1; }
.nbrad small { font-size: 11px; font-weight: 900; color: #4a4155; }
.nbrad b { font-size: 26px; font-weight: 900; }
.nbrad b small { font-size: 12px; }
.nbrad b.hot { color: #d6332a; font-size: 18px; }
.nbrad.on img { animation: radpulse 1.2s ease-in-out infinite; }
@keyframes radpulse { 50% { transform: scale(1.12); filter: drop-shadow(0 0 6px #ffd84a); } }
.nbmat { display: grid; justify-items: center; align-content: end; }
.nbmat small { font-size: 10px; font-weight: 900; color: var(--muted); }
body.nui.nph-battle .timebar { display: none; }
/* 점수 그래프 (위쪽 줄) */
.sbtn.ngraph { display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 6px; border: 2px solid #2a2320; background: #2a2320; width: 100%; min-height: 34px; }
.ngraph .ngl { flex: none; display: grid; place-items: center; padding: 0 12px 0 8px; background: #e5484d; color: #fff; font-size: 13px; font-weight: 900; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); line-height: 1; }
.ngraph .ngl .sbest { display: block; font-size: 8px; opacity: .85; position: static; }
.ngraph .ngs { min-width: 46px; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--pc); color: #fff; margin-left: -6px; padding: 0 10px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: flex-grow .6s ease; }
.ngraph .ngs:last-child { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); }
.ngraph .ngs em { font-style: normal; font-size: 11px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.ngraph .ngs b { font-size: 16px; font-weight: 900; }
.ngraph .ngs.me { box-shadow: inset 0 -4px 0 #ffd84a; }
/* 첫 화면: 몬스터 선택 + 뜰 + 채팅 */
.npick { background: #f8f8f8; border: 2px solid #2a2320; border-radius: 6px; padding: 8px; }
.npickh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.npickh b { font-size: 15px; font-weight: 900; } .npickh small { font-size: 10px; color: var(--muted); font-weight: 700; }
.monpick.npk { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.npk .moncard { border: 2px solid #3b285c; border-radius: 4px; padding: 6px 4px 8px; gap: 3px; }
.npk .moncard .mptok { margin: 4px 0 2px; }
.npk .monname { font-size: 13px; }
.nyardw { margin-top: 10px; background: #fff; border: 2px solid #2a2320; border-radius: 6px; padding: 6px; }
.nyard { position: relative; height: 210px; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #b9e6a8 0%, #d9f2c7 55%, #eef9e6 100%); cursor: pointer; }
.nyu { position: absolute; width: 56px; display: grid; justify-items: center; transition: left 1.2s ease-in-out, top 1.2s ease-in-out; pointer-events: none; }
.nyb { width: 46px; height: 46px; border-radius: 50%; background: var(--pc); border: 3px solid #2a2320; display: grid; place-items: center; animation: nyhop 1.1s ease-in-out infinite; }
.nyu:nth-child(2) .nyb { animation-delay: .3s; } .nyu:nth-child(3) .nyb { animation-delay: .6s; } .nyu:nth-child(4) .nyb { animation-delay: .9s; }
.nyb svg { width: 38px; height: 38px; }
.nyb i { font-style: normal; font-size: 20px; font-weight: 900; color: #fff; }
.nyu.flip .nyb svg { transform: scaleX(-1); }
.nyu.me .nyb { box-shadow: 0 0 0 3px #ffd84a; }
.nynm { font-size: 10px; font-weight: 900; color: #2a2320; background: #ffffffcc; border-radius: 6px; padding: 0 5px; margin-top: 2px; white-space: nowrap; }
.nysay { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #fff; border: 2px solid #2a2320; border-radius: 12px; padding: 2px 8px; font-size: 20px; animation: nysay .3s ease-out; white-space: nowrap; }
@keyframes nysay { from { transform: translate(-50%, 8px) scale(.5); opacity: 0; } }
@keyframes nyhop { 50% { transform: translateY(-4px); } }
.nchat { margin-top: 6px; border: 2px solid #3b285c; border-radius: 4px; padding: 4px; }
.nchl { font-size: 12px; font-weight: 900; display: block; margin: 0 0 3px 4px; }
.nemo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.nemo button { border: 2px solid #3b285c; background: #fff; border-radius: 4px; font-size: 18px; padding: 3px 0; }
body.nui.nph-monsterPick .notice { display: none; }
/* 새 결과 화면 */
body.nui.nph-end .players, body.nui.nph-end #scorebar, body.nui.nph-end .notice { display: none; }
.nres { padding: 8px; }
.nrbars { display: grid; gap: 10px; background: #fff; border: 2px solid #2a2320; padding: 18px 10px 14px; border-radius: 4px; }
.nrrow { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 8px; }
.nrico { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--pc); border: 2px solid #2a2320; display: grid; place-items: center; }
.nrico svg { width: 40px; height: 40px; }
.nrbar { position: relative; height: 38px; }
.nrbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pc); border-radius: 3px; transition: width .35s ease-out; }
.nrbar b { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 900; color: #fff; text-shadow: 0 0 3px #0008; }
.nrbar small { position: absolute; right: 2px; bottom: -13px; font-size: 10px; font-weight: 900; color: var(--muted); }
.nrup { position: absolute; left: 50%; bottom: 80%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap; background: #fff; border: 2px solid #2a2320; border-radius: 10px; padding: 0 6px; animation: nrup .8s ease-out forwards; z-index: 2; }
.nrup.slow { animation-duration: 1s; font-size: 14px; background: #fff3c4; }
@keyframes nrup { from { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } to { opacity: 0; transform: translate(-50%, -34px); } }
.nrpod { position: relative; height: 210px; margin-top: 10px; background: #fff; border: 2px solid #2a2320; border-radius: 4px; overflow: hidden; }
.nrlbl { position: absolute; left: 10px; top: 6px; font-size: 16px; font-weight: 900; } /* 3·4등 몬스터와 겹치지 않게 왼쪽 위 (2026-10-19) */
.pod { position: absolute; bottom: -2px; border: 2px solid #2a2320; background: #fff; display: grid; place-items: center; }
.pod b { font-size: 22px; font-weight: 900; }
.pod.pd2 { left: 28%; width: 14%; height: 112px; }
.pod.pd1 { left: 42.5%; width: 17%; height: 132px; }
.nrmon { position: absolute; left: -30%; top: 58%; width: 60px; height: 60px; opacity: 0; transition: left .5s cubic-bezier(.3,.7,.3,1), top .5s cubic-bezier(.3,.7,.3,1), opacity .3s, transform .3s; }
.nrmon svg { width: 56px; height: 56px; filter: drop-shadow(0 2px 0 #0003); }
.nrmon.show { opacity: 1; }
.nrmon.side { transform: scale(.6); transform-origin: bottom center; }
.nrmon.top { transform: scale(1.15); }
.nrmon.kicked { transition: left .8s ease-in, top .8s ease-in, transform .8s ease-in; left: -40% !important; top: -30% !important; transform: rotate(-540deg) scale(.5); }
.nrme { margin-top: 10px; }
.nragain { margin-top: 10px; }
/* 시간 상인 노아 · 악마 눈동자 (새 화면 배치 미리보기) */
.evoov.noaov, .evoov.eyeov { background: #0b0910; }
.noabox { position: relative; display: grid; justify-items: center; gap: 6px; color: #fff; }
.noaimg { width: min(62vw, 260px); animation: noain .9s ease-out both; }
@keyframes noain { from { opacity: 0; transform: translateY(18px) scale(.94); filter: brightness(.2); } }
.noanm { font-size: 15px; font-weight: 900; opacity: .85; animation: noain .9s .2s ease-out both; }
.noaclk { position: relative; display: flex; gap: 6px; padding: 10px 14px; border-radius: 40px; background: radial-gradient(#fff7d0, #e9d18a); box-shadow: 0 0 0 3px #2a2320, 0 0 24px #ffd84aaa; animation: noaclk 1s 1s cubic-bezier(.2,.8,.3,1.2) both; }
.noaclk span .sico { width: 42px; height: 42px; }
.noaclk i { position: absolute; right: -10px; top: -10px; font-style: normal; } .noaclk i .sico { width: 26px; height: 26px; }
@keyframes noaclk { from { opacity: 0; transform: translateY(70px) scale(.3); } }
.noamsg { margin: 4px 0 0; font-size: 16px; font-weight: 800; animation: noain .6s 1.5s ease-out both; }
.noamsg b { color: #ffd84a; }
.noasub { margin: 8px 0 0; font-size: 14px; font-weight: 700; line-height: 1.5; color: #e9e2ff; animation: noain .6s 2.1s ease-out both; } /* 2026-11-03 사용자: 시간 재료 설명 더 자세히 */
.eyebox { position: relative; width: min(94vw, 460px); height: min(86vh, 560px); }
.eyeart { position: absolute; left: 50%; top: 8%; width: 74%; aspect-ratio: 214 / 91; transform: translateX(-50%); }
.eyef { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; filter: drop-shadow(0 0 18px #e5484d88); }
.eyemons { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; justify-content: space-around; }
.eyem { position: relative; display: grid; justify-items: center; gap: 4px; animation: eyeup .8s var(--d) cubic-bezier(.2,.8,.3,1) both; }
.eyem svg { width: 64px; height: 64px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pc) 70%, transparent)); }
.eyem span { font-size: 11px; font-weight: 900; color: #fff; background: var(--pc); border-radius: 8px; padding: 1px 7px; }
@keyframes eyeup { from { opacity: 0; transform: translateY(60px); } }
.eyerk { position: absolute; top: -40px; font-size: 30px; font-weight: 900; color: #ffd84a; text-shadow: 0 0 10px #000; opacity: 0; transform: translateY(14px) scale(.5); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.3,1.4); }
.eyeov.rank .eyerk { opacity: 1; transform: none; }
.eyemsg { position: absolute; left: 0; right: 0; top: 46%; text-align: center; color: #fff; font-size: 18px; font-weight: 900; opacity: 0; transition: opacity .4s; }
.eyeov.rank .eyemsg { opacity: 1; }
/* 2026-10-19 사용자: 점수 그래프는 숫자 없이 그래프만 */
.sbtn.ngraph .ngs:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.nyb.nyface { overflow: hidden; background: #fff; }
.nyb.nyface svg, .nyb.nyface img { width: 100%; height: 100%; display: block; }
/* 2026-10-19 사용자: 모든 특수능력 선택지는 조금 밝은 보라색 네모 */
.big button[data-act="special"] { background: #7c5cc4; }
.big button[data-act="special"]:disabled { background: #b9a6e0; }
/* 새 화면: 몬스터 위 닉네임, 낮은 체력 주황 피, 시작 강조 */
.unit .unick { position: absolute; transform: translateX(-50%); font-size: 9px; font-weight: 900; line-height: 1; white-space: nowrap; max-width: 140%; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; border-radius: 6px; background: rgba(255,255,255,.85); z-index: 6; pointer-events: none; transition: opacity .25s; }
/* 2026-10-25 사용자: 이름은 깜빡이지 말고 턴마다 2초쯤 나타났다 사라짐 (body.nickon, ui.js nickShow) */
.unit .unick { opacity: 0; transition: opacity .35s; }
body.nickon .unit .unick { opacity: 1; }
body.nickon .unit .unick.dim { opacity: .45; }
.stage.fxplaying .unit .unick, .unit.umv .unick { opacity: 0 !important; }
.unit .ublood { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.unit .ublood b { position: absolute; top: 45%; width: 5px; height: 7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #ff7a1a; opacity: 0; animation: ublood 1.6s ease-in infinite; }
.unit .ublood b:nth-child(1) { left: 22%; }
.unit .ublood b:nth-child(2) { left: 55%; animation-delay: .55s; }
.unit .ublood b:nth-child(3) { left: 75%; animation-delay: 1.1s; }
@keyframes ublood { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .95; } 100% { opacity: 0; transform: translateY(16px) scale(1); } }
.unit.ustart::after { content: ""; position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, rgba(255,246,200,.85) 0%, rgba(255,225,120,.45) 38%, rgba(255,215,90,0) 70%); mix-blend-mode: soft-light; pointer-events: none; z-index: 7; animation: ustart 2s ease-in-out forwards; }
.unit.ustart::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,170,.55) 0%, rgba(255,230,140,0) 70%); pointer-events: none; z-index: 0; animation: ustart 2s ease-in-out forwards; }
@keyframes ustart { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } } /* 2026-10-19 사용자: 줌인 대신 소프트 라이트 2초 */
@media (prefers-reduced-motion: reduce) { .unit .ublood b { animation: none; opacity: .8; } }
/* 채팅 (2026-10-19 사용자) */
.nchin { display: flex; gap: 4px; margin: 4px 0; }
.nchin input { flex: 1; min-width: 0; border: 2px solid #3b285c; border-radius: 4px; padding: 6px 8px; font: inherit; font-size: 14px; }
.nchin .btn { padding: 6px 12px; border-radius: 4px; }
.chattoast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 70px); transform: translateX(-50%); z-index: 9000; background: rgba(36,31,43,.9); color: #fff; padding: 6px 12px; border-radius: 14px; font-size: 13px; font-weight: 700; max-width: 86vw; pointer-events: none; animation: chatin .25s ease-out; transition: opacity .4s; }
.chattoast + .chattoast { top: calc(env(safe-area-inset-top, 0px) + 104px); }
.chattoast.out { opacity: 0; }
@keyframes chatin { from { opacity: 0; transform: translate(-50%, -8px); } }
.coinfly { position: fixed; z-index: 9500; display: flex; align-items: center; gap: 3px; pointer-events: none; transform: translate(-50%,0); font-weight: 900; font-size: 15px; color: #b07a00; text-shadow: 0 1px 0 #fff, 0 0 4px #fff; }
.coinfly .coinico { width: 26px; height: 26px; }
/* 2026-10-19 사용자: 예전 로비에서 중형·대형 몬스터가 위쪽 버튼(친구·설정 등)을 가리지 않게 버튼 줄을 몬스터보다 위로 */
#stage .home:not(.beach) .hhead { position: relative; z-index: 5; }
#stage .home:not(.beach) .hhead button { position: relative; z-index: 1; }
.bc-obj { transition: scale .2s ease; transform-origin: 50% 85%; }
.bc-obj.hov { scale: 1.08; }
/* 닉네임 바꾸기 (2026-10-19 사용자) */
.nickedit { margin-left: 6px; border: 2px solid var(--line); background: #fff; color: var(--p); border-radius: 8px; font-size: 12px; font-weight: 800; padding: 3px 8px; vertical-align: middle; }
.nickin { width: 100%; box-sizing: border-box; border: 2px solid var(--p); border-radius: 8px; padding: 10px; font: inherit; font-size: 16px; margin: 6px 0; }
/* ③ 전체 화면 조금 크게 (2026-10-19, 새 화면 배치): 바깥 여백을 줄여 전장·칸을 넓히고, 작은 글씨를 한 단계 키움 */
body.nui .battlewrap { padding: 6px 4px 8px; gap: 7px; }
body.nui .btop { font-size: 13px; }
body.nui .mpc small, body.nui .ngcenter small, body.nui .mphn small, body.nui .mpfan small, body.nui .mgb b, body.nui .nevomat em { font-size: 10.5px; }
body.nui .ngnm, body.nui .ndnm, body.nui .nynm, body.nui .nevonm, body.nui .npickh small, body.nui .nbmat small, body.nui .ngtn small, body.nui .ndopt em { font-size: 11.5px; }
body.nui .mpab, body.nui .ngwho, body.nui .nbevo > b, body.nui .nbrad small, body.nui .ngraph .ngs em, body.nui .nhpbar b, body.nui .nchl { font-size: 12.5px; }
body.nui .mpc b, body.nui .ngraph .ngs b { font-size: 17px; }
body.nui .mphn b, body.nui .mpfan b { font-size: 19px; }
body.nui #stage .panel h2 { font-size: 17px; }
body.nui #stage .panel p { font-size: 14.5px; }
body.nui #stage .big button { font-size: 15.5px; min-height: 48px; }
body.nui #stage .big button small { font-size: 11px; }
/* 채팅 말풍선 (2026-10-19 사용자): 캐릭터 옆, 캐릭터보다 위 층, 4초씩. 배틀 중엔 화면 아래 */
.chatbub { position: fixed; z-index: 9000; max-width: min(70vw, 240px); background: #fff; color: #241f2b; border: 2px solid var(--pc, #2a2320); border-radius: 12px; padding: 4px 10px; font-size: 14px; font-weight: 800; line-height: 1.3; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; pointer-events: none; box-shadow: 0 2px 6px #0003; animation: chatin .2s ease-out; transition: opacity .3s; }
.chatbub::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--pc, #2a2320); border-bottom: 0; }
.chatbub.out, .chatbar.out { opacity: 0; }
/* 배틀 중 채팅 (2026-10-20 사용자): 크게, 위쪽 왼편 상자 (킬 로그 맞은편), 왼쪽에서 차례로 들어왔다가 사라짐 */
#chatfeed { position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); left: max(8px, env(safe-area-inset-left, 0px)); z-index: 9000; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; max-width: min(62vw, 360px); }
.chatbar { max-width: 100%; background: rgba(36,31,43,.92); color: #fff; padding: 9px 16px; border-radius: 14px; border: 2px solid rgba(255,255,255,.85); font-size: 17px; font-weight: 800; line-height: 1.3; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; box-shadow: 0 4px 12px rgba(0,0,0,.3); animation: chatslide .35s cubic-bezier(.2,.8,.3,1) both; transition: opacity .4s, transform .4s; }
.chatbar b { margin-right: 4px; }
.chatbar.out { transform: translateX(-120%); }
@keyframes chatslide { from { transform: translateX(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
/* 2026-10-19 사용자: 게임 중 맨 위 띠(제목·닉네임·코인)는 비우고 점수 그래프가 맨 위. 라운드는 성장 턴 줄에. 결산은 코인 연출 때문에 그대로 */
body.nui:not(.nph-end) .top { display: none; }
.ngrd { display: flex; align-items: baseline; gap: 2px; margin-right: 6px; }
.ngrd small { font-size: 11px; font-weight: 900; color: var(--muted); }
.ngrd b { font-size: 17px; font-weight: 900; color: var(--p); }
/* 자세히 보기 (성장·배틀, 2026-10-19 사용자): 육각형 그래프를 빼고 능력치 숫자를 널널하게 */
.peek .mcstats .mcradar { display: none; }
.peek .mcsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.peek .mcsgrid i { display: none; }
.peek .mcsgrid span { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; padding: 3px 6px; column-gap: 4px; }
.peek .mcsgrid small { font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.peek .mcsgrid b { font-size: 17px; text-align: right; }
/* 변이 순서 (2026-10-19 사용자): 처음부터 바로 까만 화면 (서서히 어두워지는 0.3초 동안 아래 화면의 누구 차례가 보였음) */
.evoov.eyeov { animation: none; }
body.eyepend #stage, body.eyepend #players, body.eyepend #scorebar { visibility: hidden; }
/* 2026-10-19 사용자: 성장 → 암전 → 변이 순서 → 변이 화면. 팝업처럼 뜨지 않고 성장이 끝나는 순간 바로 까만 화면 */
body.eyepend::after { content: ''; position: fixed; inset: 0; z-index: 69; background: #0b0910; }
/* 2026-10-19 사용자: 전장 바로 위 줄(라운드·모드·턴·턴 제한)은 빼고 전장을 붙임. 라운드는 방사능 칸 왼쪽 아래 */
body.nui .btop { display: none; }
.nbrad { position: relative; }
.nbround { position: absolute; left: 4px; bottom: 0; font-style: normal; font-size: 11px; font-weight: 900; color: var(--muted); white-space: nowrap; }
/* 결과 점수 막대를 세로로 (2026-10-19 사용자): 막대가 위로 차오르고, 아래에 같은 크기 몬스터와 닉네임. 단상 없음 */
.nrbars.nrv { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 8px; padding: 54px 8px 10px; }
.nrv .nrrow { grid-template-columns: none; grid-template-rows: 190px auto auto; justify-items: center; gap: 4px; }
.nrv .nrbar { width: 62%; height: 190px; }
.nrv .nrbar i { top: auto; bottom: 0; left: 0; right: 0; height: 3%; border-radius: 4px 4px 0 0; border: 2px solid #2a2320; border-bottom: 0; transition: height .22s ease-out; } /* 2026-10-27 사용자: 더 빠르게 (예전 .35s) */
.nrv .nrbar b { left: 50%; top: auto; bottom: 100%; transform: translate(-50%, -2px); color: #2a2320; text-shadow: none; font-size: 19px; }
.nrv .nrbar .nrcrown { position: absolute; left: 50%; bottom: calc(100% + 24px); transform: translateX(-50%) scale(.3); font-style: normal; font-size: 24px; opacity: 0; transition: opacity .3s, transform .4s cubic-bezier(.2,.8,.3,1.4); }
.nrv .nrrow.nrtop .nrcrown { opacity: 1; transform: translateX(-50%); }
/* 2026-10-20 사용자: 1등은 어둡게 칠하지 말고 막대 테두리만 빛나게 */
.nrv .nrrow.nrtop .nrbar i { border-color: #e0a800; box-shadow: 0 0 0 2px #ffd84d, 0 0 12px 3px rgba(255, 204, 51, .75); }
.nrv .nrbar .nrup { bottom: calc(100% + 26px); }
.nrv .nrico { width: 52px; height: 52px; }
.nrv .nrico svg { width: 44px; height: 44px; }
.nrv .nrnm { font-size: 12px; font-weight: 900; color: #2a2320; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrv .nrbar b { font-style: normal; }
/* 2:2 팀 막대 (2026-11-10 사용자): 두 마리를 합친 팀 막대 두 개, 아래에 두 몬스터, 개인 점수는 맨 마지막에 몬스터 위 작은 배지로 */
.nrteams .nrbar { width: 46%; }
.nrpair { display: flex; justify-content: center; gap: 6px; }
.nrv .nrtm { transition: transform .2s; }
.nrv .nrtm.hit { animation: nrhit .3s ease-out; }
@keyframes nrhit { 40% { transform: translateY(-6px) scale(1.08); } }
.nrind { position: absolute; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%) scale(.3); opacity: 0; font-style: normal; font-size: 13px; font-weight: 900; line-height: 1; white-space: nowrap; color: #2a2320; background: #fff; border: 2px solid #2a2320; border-radius: 10px; padding: 2px 6px; transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.3,1.4); z-index: 2; }
.nrind.mvp { background: #fff3c4; border-color: #e0a800; }
.nrtm.show .nrind, .nrind-on .nrind { opacity: 1; transform: translateX(-50%); }
.nrteams .nrnm b { color: var(--pc); }
body.bchoose .unit .unick { display: none; }
/* 순위표 데케타스 레이드 탭 (2026-10-19 사용자): 글자·이모티콘 없이 데케타스 그림만 */
.lbtabs [data-l="raid"] { display: inline-flex; align-items: center; justify-content: center; padding-top: 2px; padding-bottom: 2px; }
.lbraidimg { display: inline-flex; width: 30px; height: 30px; }
.lbraidimg > * { width: 100%; height: 100%; }
/* 솔론 계열 머리 위 표시 (2026-10-19 사용자 그림: 숨 참기 2번 · 오만 6번) */
.unit .soromark { position: absolute; left: 50%; top: -40%; width: 50%; height: auto; max-width: none; transform: translateX(-50%); z-index: 9; pointer-events: none; transition: opacity .35s; animation: pebFloat 2s ease-in-out infinite; }
.unit .soromark.prmark { width: 46%; top: -44%; }
.unit .soromark.brmark.two { left: 30%; } .unit .soromark.prmark.two { left: 72%; }
.unit .soromark.snmark { width: 30%; top: -34%; } .unit .soromark.snmark.two { left: 72%; } /* 진동 감지 표식 (2026-11-01) */
.unit .soromark.stmark { width: 32%; top: -30%; } .unit .soromark.stmark.two { left: 50%; top: -62%; } /* 석화 표시 (2026-10-20 사용자: 크기는 작음) */
.fxplaying .unit .soromark.hnew { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .unit .soromark { animation: none; } }
/* 진화 목록 고정 (2026-10-20 사용자): 왼쪽 고정한 진화, 오른쪽 그 계열 */
.espinwrap { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 8px; align-items: start; margin: 4px 0 8px; }
.espinl, .espinr { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.espinh { font-size: 11.5px; font-weight: 800; color: #8a7a66; }
.espinr .eslist { margin: 0; max-height: 60vh; }
.espinl .esrow { flex-direction: column; align-items: center; text-align: center; padding-top: 26px; }
.espinl .esbody { align-items: center; }
.espinl .esmats { justify-content: center; }
.espinr .esrow { padding: 5px 6px; gap: 6px; }
.espinr .esart { width: 40px; height: 40px; }
.espinr .esart svg { width: 38px; height: 38px; }
.espinr .esm { grid-template-columns: 22px auto; padding: 2px 6px 2px 3px; }
.espinr .esm i, .espinr .esm i .mico, .espinr .esm i img, .espinr .esm i .sico, .espinr .esm i svg { width: 22px; height: 22px; font-size: 17px; }
.nevopinw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.nevopinl { display: flex; padding-right: 6px; border-right: 2px dashed #e0a92a; }
.nevopinl .nevo { flex: none; min-width: 70px; background: #fff5d6; box-shadow: inset 0 0 0 2px #e0a92a; }
.nevoside .nevo { flex-basis: calc((100% - 18px) / 4); }
/* 성장·배틀 중 채팅 (2026-10-20 사용자) */
#ichat { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 8900; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
#ichat > * { pointer-events: auto; }
.ichatbtn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #2a2320; background: #fff; font-size: 22px; box-shadow: 0 3px 8px rgba(0,0,0,.18); flex: 0 0 auto; }
#ichat.on .ichatbtn { background: #ffe9a8; }
.ichatp { display: none; background: #fff; border: 2px solid #2a2320; border-radius: 14px; padding: 6px; width: min(300px, calc(100vw - 80px)); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
#ichat.on .ichatp { display: grid; gap: 6px; }
.ichatp .nchin { display: flex; gap: 4px; }
.ichatp .nchin input { flex: 1; min-width: 0; }

/* 친구 채팅 (2026-10-20 사용자) */
.frchatb { position: relative; }
.frchatb .badge { position: absolute; top: -6px; right: -6px; }
.fchlist { display: flex; flex-direction: column; gap: 5px; max-height: 46vh; min-height: 120px; overflow-y: auto; padding: 6px; background: #f8f6fa; border-radius: 12px; margin-bottom: 6px; }
.fchm { display: flex; }
.fchm span { max-width: 78%; padding: 6px 10px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1.5px solid #e6dff0; font-size: 14px; word-break: break-all; }
.fchm.me { justify-content: flex-end; }
.fchm.me span { background: #ffe9a8; border-color: #e0c27a; border-radius: 14px 14px 4px 14px; }
.frchatb .badge { background: #e0455a; color: #fff; }
/* 능력 설명의 능력치 이름 강조 (2026-10-20 사용자) */
.stw { font-weight: 900; }
.stw.st-hp { color: #1f9d3a; }
.stw.st-atk { color: #e0262d; }
.stw.st-def { color: #1f62a8; }
.stw.st-move { color: #d9730d; }
.stw.st-rot { color: #7b4fc9; }
.stw.st-heal { color: #d6336c; }
.stw.st-dir { color: #0f8f8a; }
.stw.st-fan { color: #b7791f; }
.dx-rl2 { margin: 4px 0 0; }
/* 2026-10-20 사용자 묶음 */
.ngraph .ngs.me { box-shadow: none; } /* 점수 그래프 노란 밑줄 없앰, 내 칸은 흰 이름표 "나" (2026-10-20 사용자) */
.ngraph .ngs.me em { background: #fff; color: var(--pc); border-radius: 7px; padding: 1px 7px; }
.mpc { justify-content: center; align-items: center; }
.mpc .mpbg { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); opacity: .38; }
.mpc .mpbg .sico { width: 34px; height: 34px; }
.mpc.k-crit .mpbg .sico, .mpc.k-crit .mpbg { opacity: .32; }
.mpc b, body.nui .mpc b { font-size: 19px; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }
.mpc.k-crit b, body.nui .mpc.k-crit b { font-size: 14px; }
.mgb b, body.nui .mgb b { color: #fff; -webkit-text-stroke: 3px #2a2320; paint-order: stroke fill; }
.mgb.zero b { color: #fff; }

/* 2026-10-20 최고의 플레이 +3 */
.madbest .madplus { display: block; font-style: normal; font-weight: 900; font-size: 18px; color: #ffd84d; margin-top: 4px; }
/* 2026-10-20 사용자: 변이처럼 몬스터가 크게 나오는 장면은 테두리를 검게 (누끼 가장자리가 어두운 바탕에서 뜨지 않게) */
/* 2026-10-26 사용자: 변이 화면은 덧칠(검은 그림자 테두리) 없이 원본 화질로 (그림 가장자리는 테두리-부드럽게.py) */
.madbest .madpf svg { filter: drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000); }
/* 그림자 생체 말 (2026-10-20 사용자: 일반 몬스터처럼 테두리·공격 방향·체력·방어력) */
.board .minion.mtok { display: block; }
.board .minion.mtok::before { content: none; }
.board .minion.mtok .tkp { position: absolute; left: -12%; right: -12%; top: -22%; bottom: 10%; pointer-events: none; z-index: 3; animation: mnBob 2.4s ease-in-out infinite; }
.board .minion.mtok .tkp > .tkw, .board .minion.mtok .tkp > .tkh, .board .minion.mtok .tkp > .tka { position: absolute; inset: 0; pointer-events: none; }
.board .minion.mtok .ust { position: absolute; z-index: 9; transform: translate(-50%, -50%); font-size: 11.5px; font-weight: 900; line-height: 1; text-align: center; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; pointer-events: none; font-style: normal; }
.board .minion.mtok .ust.atk { color: #e0262d; } .board .minion.mtok .ust.def { color: #1f62a8; } .board .minion.mtok .ust.hp { color: #1f9d3a; }
.board.multi .minion.mtok .ust { font-size: 10px; -webkit-text-stroke-width: 2.5px; }
@media (prefers-reduced-motion: reduce) { .board .minion.mtok .tkp { animation: none; } }
/* 게임 중 채팅 (2026-10-20 사용자): 시간 재료 시계처럼 둥근 버튼을 맞은편(왼쪽 아래)에, 누르면 입력 줄이 열림 */
#ichat { left: 8px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 41; }
.ichatbtn { width: auto; height: auto; border: 0; background: none; box-shadow: none; padding: 0; display: flex; flex-direction: column; align-items: center; font-size: 0; cursor: pointer; }
.ichatbtn .icface { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fffdf6 55%, #f3ead2 100%); border: 3px solid #3d2a5c; box-shadow: 0 3px 10px #0004; }
.ichatbtn .icface svg { width: 38px; height: 38px; }
.ichatbtn .iclbl { margin-top: 2px; font-size: 10.5px; font-weight: 800; color: #3d2a5c; background: #fffc; border-radius: 6px; padding: 0 5px; white-space: nowrap; }
#ichat.on .ichatbtn { background: none; }
#ichat.on .ichatbtn .icface { background: radial-gradient(circle, #fff6cf 55%, #ffe08a 100%); }
.ichatp { width: min(300px, calc(100vw - 180px)); margin-bottom: 18px; }
body:not(.hasclock) .ichatp { width: min(300px, calc(100vw - 96px)); }
body.hasichat .app { padding-bottom: 104px; } /* 채팅 버튼이 맨 아래 버튼을 가리지 않게 */
.shopline .slk.seen { filter: none; opacity: 1; } /* 새 몬스터 알림: 진화해 본 2차는 그대로 (2026-10-20) */
.pnface .sil b { font-size: 18px; }
/* 2026-10-20 사용자: 그림자 생체는 정면 표시 없음 (공격 방향 화살표만) */
.minion svg.ring > path { display: none; }
/* 2026-10-20 사용자: 행동 고르기에서도 방사능 구름까지 남은 턴 */
.radchip { float: right; font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e9f5e2; color: #2f6b22; border: 1px solid #9ccc8a; margin-left: 6px; }
.radchip.on { background: #5fae4b; color: #fff; border-color: #3e8a2e; }
/* 2026-10-20 사용자: 순위표 지난 시즌 1~3등 버튼 */
.lbsub .hofbtn { font-size: 12px; padding: 2px 8px; margin-left: 6px; border-radius: 999px; border: 1px solid #c9a227; background: #fff6d6; color: #7a5a00; font-weight: 700; cursor: pointer; }

/* 레이드 칸 (2026-10-25 사용자: 친선과 따로). 오늘 남은 도전·받은 보상을 크게 */
.hraid { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 6px 12px; border: 3px solid #7a1411; border-radius: 16px; background: linear-gradient(180deg, #e0413a, #b3221d); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 4px 0 #7a1411; }
.hraid b { font-size: clamp(15px, 4.4vw, 20px); font-weight: 900; text-shadow: 0 2px 0 #0004; }
.hraid:active { transform: translateY(3px); box-shadow: 0 1px 0 #7a1411; }
.rd-card { border-color: #c0332c; }
.rd-card .fourh b { color: #b3221d; }
.rdstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.rdst { display: grid; justify-items: center; background: #fff3f2; border: 2px solid #e8a19c; border-radius: 12px; padding: 6px 4px; }
.rdst > b { font-size: 26px; font-weight: 900; color: #b3221d; line-height: 1.1; }
.rdst > b small { font-size: 14px; color: #7d5a58; }
.rdst > small { font-size: 12px; font-weight: 800; color: #5a4a4a; }
.rdst.zero > b { color: #9a8f8f; }
.modecard .rdtip { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; }
.rdrew { display: grid; gap: 4px; text-align: left; background: #faf7ff; border-radius: 12px; padding: 8px; margin: 4px 0; }
.rdrew > b { font-size: 13px; color: var(--text); }
.rdrw { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rdrw svg, .rdrw img { width: 30px; height: 30px; flex: none; }
.rdrw span { flex: 1; color: var(--text); font-size: 13px !important; }
.rdrw span b { font-size: 13px; color: var(--p); margin-right: 4px; }
.rdrw em { font-style: normal; font-size: 12px; font-weight: 800; color: #2f9e44; }
.rdrw.done span { color: var(--muted); }
/* 레이드 첫 클리어 파티 (2026-10-25 사용자) */
/* 레이드 순위 (2026-11-08 사용자): 최초 클리어 크게, 주인 이름 먼저 + 그 사람 몬스터 */
.rd-first { position: relative; background: linear-gradient(160deg, #fff3c4 0%, #ffe28a 55%, #f7c95a 100%); border: 2px solid #d9a21f; border-radius: 14px; padding: 10px 10px 8px; margin-bottom: 10px; box-shadow: 0 3px 0 #c08a10, 0 6px 16px #d9a21f44; }
.rd-first.me { outline: 2px solid #7bc96f; outline-offset: 2px; }
.rd-f1top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.rd-f1lbl { font-size: 13px; font-weight: 900; color: #fff; background: #a86f00; border-radius: 999px; padding: 2px 10px; letter-spacing: .5px; }
.rd-f1meta { font-size: 12px; color: #6b4a00; font-weight: 700; }
.rd-f1meta b { font-size: 15px; font-weight: 900; color: #4a3200; }
.rd-first > .rd-party .rd-pg { background: #fffaf0e6; border-color: #e8c25a; }
.rd-first > .rd-party .rd-pg b { font-size: 13px; color: #4a3200; }
.rd-fsub { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 6px; border-radius: 10px; background: #fffaf0b3; }
.rd-fsub.me { box-shadow: inset 0 0 0 2px #7bc96f; }
.rd-fno { flex: none; font-size: 10.5px; font-weight: 900; color: #8a5a00; width: 30px; text-align: center; }
.rd-fsub .rd-pg { padding: 0 3px 0 6px; gap: 2px; }
.rd-fsub .rd-pg b { font-size: 11px; max-width: 56px; }
.rd-fsub .rd-party { flex: 1; }
.rd-fmeta { flex: none; font-size: 10.5px; color: #8a5a00; text-align: right; line-height: 1.25; }
.rd-fmeta b { font-size: 13px; color: #4a3200; }
.rd-party { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.rd-pg { display: inline-flex; align-items: center; gap: 3px; padding: 1px 4px 1px 7px; border-radius: 9px; background: #f7f3fb; border: 1px solid #ebe3f3; max-width: 100%; }
.rd-pg.me { background: #ecf8e8; border-color: #a8dc9c; }
.rd-pg b { font-size: 11.5px; font-weight: 800; color: #3a3044; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
.rd-pgm { display: inline-flex; flex: none; }
.rd-sort { margin: 2px 0 8px !important; }
.rd-lbrow { padding: 6px 8px; }
.rd-lbrow.rd-isfirst { border-color: #e6c35c; background: #fffbea; }
.rd-pts { min-width: 48px; }
.rd-pts b { font-size: 15px; }
.rd-ftag { font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: #c08a10; border-radius: 999px; padding: 0 6px; margin-top: 2px; }
/* 순위표 정리 (2026-11-08 사용자): 금·은·동 숫자, 닉네임 아래 한 줄 정보 */
.lbm-modal h2 { margin-bottom: 8px; }
.lbn { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #7d7289; background: #f3eff7; font-variant-numeric: tabular-nums; }
.lbn.g1 { background: linear-gradient(160deg, #ffe7a0, #e6ad22); color: #5e4100; box-shadow: inset 0 -2px 0 #b98400; }
.lbn.g2 { background: linear-gradient(160deg, #f4f6f9, #b9c2cd); color: #3e4652; box-shadow: inset 0 -2px 0 #8f99a6; }
.lbn.g3 { background: linear-gradient(160deg, #f9d6b4, #cf8a52); color: #4e2a0c; box-shadow: inset 0 -2px 0 #a8642e; }
.lbmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lbmid .lbnick { flex: none; font-size: 14.5px; }
.lbinfo { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.lbinfo i { font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.lbinfo .rbadge.lbpill { font-size: 12px; padding: 1px 8px; }
.lbinfo .rbadge.lbpill .rico { width: 24px; height: 24px; margin: -5px 0 -5px -6px; }
.lbmid { gap: 3px; }
.lbh .rbadge.lbpill { font-size: 11.5px; padding: 1px 8px; max-width: 100%; color: #fff; }
.lbh .rbadge.lbpill .rico { width: 22px; height: 22px; margin: -5px 0 -5px -5px; }
.lbtier { display: inline-flex; align-items: center; gap: 2px; color: var(--rc); font-weight: 800; flex: none; }
.lbtier .lbtico { width: 18px; height: 18px; margin: -3px 0; }
.lbpt2 { flex-direction: row; align-items: baseline; gap: 1px; }
.lbpt2 b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lbpt2 small { font-size: 11px; }
.lbhtier { display: inline-flex; align-items: center; gap: 3px; color: var(--rc); font-size: 13px !important; white-space: nowrap; }
.lbhtier .lbhrico { width: 24px; height: 24px; margin: -4px 0; }
.lbm-modal .btn.alt[data-l="rank"] { display: block; width: 100%; margin-top: 8px; }
.lbsub .hofbtn { border-color: #e2cf8c; background: #fffaf0; color: #7a5a00; font-weight: 800; }
.rdfpop { display: grid; justify-items: center; gap: 6px; text-align: center; }
.rdfpop .rdfmons { display: flex; gap: 8px; justify-content: center; }
.rdfpop .rdfmons span { display: grid; justify-items: center; font-size: 11px; }
.rdfpop .rdft { font-weight: 900; color: #b3221d; }
/* 대표 몬스터 (2026-10-25 사용자) */
.repbox { display: flex; align-items: center; gap: 8px; background: #fff8e6; border: 2px solid #f0cf72; border-radius: 12px; padding: 6px 10px; margin: 8px 0; }
.repbox .replbl { font-size: 12px; font-weight: 900; color: #8a5a00; }
.repbox > b { flex: 1; font-size: 14px; }
.repbox > b.none { color: var(--muted); font-weight: 700; }
.repbox .repbtn { padding: 4px 10px; min-height: 0; font-size: 13px; }
.repart { position: relative; display: inline-grid; place-items: center; }
.repart .bxg { position: absolute; right: -4px; top: -4px; font-size: 10px; font-style: normal; font-weight: 900; background: #241f2b; color: #ffd84a; border-radius: 6px; padding: 0 3px; line-height: 1.4; }
.lbrep { display: inline-grid; place-items: center; margin-left: 2px; }
/* 2026-10-26 사용자: 순위표에서는 등급 글자를 작게, 몬스터를 가리지 않도록 오른쪽 위 바깥으로 */
.lbrep .repart .bxg { left: auto; right: -6px; top: -5px; font-size: 7px; padding: 0 2px; line-height: 1.25; border-radius: 4px; }
.reppick { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
/* 신고·차단 (2026-10-25 사용자) */
.sfrow { display: flex; gap: 8px; justify-content: center; margin: 8px 0 2px; }
.sfbtn { border: 1px solid #d9cfe3; background: #fff; color: #6a5f70; border-radius: 10px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.sfbtn:active { background: #f3eef8; }
/* 채팅 화면 (2026-10-25 사용자): 채팅 동안 게임 화면 흐리게·고정, 입력 줄은 키보드 바로 위 맨 위 층 (ui.js ichatSet) */
.ichatx { display: none; }
body.chatfocus { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
#ichatov { position: fixed; inset: 0; z-index: 8950; background: rgba(28, 20, 44, .28); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: ichov .2s ease-out both; }
@keyframes ichov { from { opacity: 0; } }
body.chatfocus #ichat { left: 0; right: 0; bottom: var(--kb, 0px); z-index: 9001; display: block; padding: 0; }
body.chatfocus #ichat .ichatbtn { display: none; }
body.chatfocus #ichat.on .ichatp { position: relative; width: auto; margin: 0; border-radius: 16px 16px 0 0; border-width: 2px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 20px rgba(0,0,0,.25); }
body.chatfocus .ichatx { display: block; position: absolute; right: 8px; top: -40px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #2a2320; background: #fff; font: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
body.chatfocus .ichatp .nchin input { font-size: 16px; padding: 9px 10px; } /* 16px: 아이폰이 입력할 때 화면을 확대하지 않게 */
body.chatfocus .ichatp .nchin .btn { font-size: 15px; padding: 8px 14px; }
body.chatfocus #chatfeed { z-index: 9002; }
/* 랭크 선택 시간 제한 (2026-10-25 사용자): 5초 남으면 화면이 살짝 붉어지며 5·4·3·2·1, 고르기는 그대로 가능 (누름 막지 않음) */
#rktimer { position: fixed; inset: 0; z-index: 8800; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#rktimer::before { content: ""; position: absolute; inset: 0; background: rgba(210, 30, 30, .1); box-shadow: inset 0 0 140px 30px rgba(210, 30, 30, .42); opacity: 0; transition: opacity .35s ease; }
#rktimer.on::before { opacity: 1; }
#rktimer .rkn { position: relative; font-size: 104px; line-height: 1; font-weight: 900; color: #fff; -webkit-text-stroke: 4px #8a1414; paint-order: stroke fill; text-shadow: 0 6px 18px rgba(110, 0, 0, .45); opacity: .92; }
#rktimer .rkn:empty { display: none; }
#rktimer .rkn.tick { animation: rktick 1s ease-out both; }
@keyframes rktick { 0% { transform: scale(1.5); opacity: 0; } 18% { transform: scale(1); opacity: .92; } 80% { opacity: .92; } 100% { transform: scale(.85); opacity: .35; } }
#rktimer .rkmsg { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -8px); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 16px; border-radius: 14px; border: 2px solid #2a2320; background: #fff; color: #2a2320; font-weight: 800; font-size: 14px; line-height: 1.45; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: 0; transition: opacity .25s, transform .25s; }
#rktimer .rkmsg.warn { background: #ffe4e1; border-color: #a01818; color: #7a0f0f; }
#rktimer .rkmsg.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { #rktimer .rkn.tick { animation: none; } }
/* 상점 몬스터 가격별 묶음 (2026-10-25 사용자) */
.shopgrid .shopsec { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; font-weight: 900; color: var(--text); }
.shopgrid .shopsec:first-child { margin-top: 0; }
.shopgrid .shophad, .shopgrid .shopnone { grid-column: 1 / -1; }
/* 채팅 신고·차단 (2026-10-25 사용자): 다른 사람 말풍선은 눌러서 신고·차단 */
.chatbub[data-cuid], #chatfeed .chatbar[data-cuid] { pointer-events: auto; cursor: pointer; }
.crules { margin: 6px 0; padding-left: 20px; text-align: left; line-height: 1.55; font-weight: 700; }
/* 가방 스킨 끼기 (2026-10-25) */
.bagit.bagskin { border: 2px solid #e4d8f5; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; padding: 4px 2px; }
.bagit.bagskin b { font-size: 12px; line-height: 1.25; word-break: keep-all; }
.bagit.bagskin em { font-style: normal; font-size: 11px; font-weight: 800; color: #9a8cb3; }
.bagit.bagskin.on { border-color: #7c4dff; background: #f3edff; }
.bagit.bagskin.on em { color: #5b34c4; }
.bagit.bagskin:disabled { cursor: default; opacity: .75; }
.bagingame { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #fff4d6; color: #7a5a14; font-size: 12.5px; text-align: center; }
.shopbuy.shoptk { margin-top: 4px; background: #7c4dff; } /* 스킨 티켓으로 사기 (2026-10-25) */
/* 새 프로필 화면 (2026-10-25 사용자 그림: 프로필-빈칸.png) */
.pfm { position: relative; padding-top: 14px; }
.pf-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #2a2320; color: #fff; font: 800 16px/32px var(--font); cursor: pointer; z-index: 2; }
.pf-head { display: flex; align-items: center; gap: 12px; margin: 0 40px 12px 0; }
.pf-head .pf-av { flex: none; }
.pf-nick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 2.5px solid #2a2320; border-radius: 12px; padding: 10px 12px; background: #fff; }
.pf-nick b { flex: 1; min-width: 0; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-srew { width: 100%; margin: 0 0 10px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-cell { border: 2.5px solid #2a2320; border-radius: 12px; background: #fff; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; min-width: 0; color: inherit; font: inherit; }
.pf-cell > span { font-size: 12px; font-weight: 800; color: #6f6458; }
.pf-cell small { font-size: 11px; color: #8a7a5a; line-height: 1.3; }
.pf-wr b { font-size: 24px; }
.pf-rank, .pf-rep { min-height: 200px; }
.pf-rank .pf-rico { width: 64px; height: 64px; }
.pf-rank .pf-tier { font-size: 18px; color: var(--rc); }
.pf-rank .pf-pts { font-size: 15px; }
.pf-rank .rbar { width: 90%; }
.pf-rep { cursor: pointer; }
.pf-rep .repart svg { width: 76px; height: 76px; }
.pf-rep .bxcard.pf-bx { width: 112px; height: 140px; }
.pf-rep .bxcard.pf-bx b { font-size: 12px; } /* 대표로 고른 박스 카드 (2026-10-26) */
.pf-rep .bxcard.pf-bx .bxart svg { width: 80px; height: 80px; }
.pf-rep .repart.none { font-size: 40px; color: #c8bfb2; }
.pf-rep b { font-size: 15px; }
.pf-rep em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #5b34c4; border: 1.5px solid #c9b6f5; border-radius: 999px; padding: 2px 10px; margin-top: 2px; }
.pf-tts { justify-content: flex-start; }
.pf-ttwrap { display: flex; align-items: center; gap: 4px; width: 100%; }
.pf-ttl { flex: 1; min-width: 0; display: grid; gap: 5px; max-height: 98px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.pf-ttl::-webkit-scrollbar { display: none; }
.pf-tt { scroll-snap-align: start; border: 2px solid #ffb000; border-radius: 6px; background: #fffaf0; font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; }
.pf-tt.on { background: #ffb000; color: #fff; }
.pfm .pf-arr { border: 0; background: none; font-size: 15px; color: #2a2320; cursor: pointer; padding: 2px 4px; line-height: 1; }
.pf-varr { display: grid; gap: 4px; }
.pf-strip { border: 2.5px solid #2a2320; border-radius: 12px; background: #fff; padding: 6px 8px 8px; margin-top: 10px; }
.pf-sh { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; color: #6f6458; }
.pf-sh span { flex: 1; }
.pf-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 0; }
.pf-row::-webkit-scrollbar { display: none; }
.pf-pick { flex: none; scroll-snap-align: start; width: 64px; display: grid; justify-items: center; gap: 2px; border: 2px solid transparent; border-radius: 10px; background: none; font: inherit; color: inherit; cursor: pointer; padding: 3px 0; }
.pf-pick small { font-size: 10px; line-height: 1.2; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick.on { border-color: #46c6c0; background: #e9fbfa; }
.pfm .sfrow { margin-top: 10px; }
.pf-foot { display: grid; grid-template-columns: 2.6fr 1fr; gap: 8px; margin-top: 12px; }
.pf-foot .btn { margin: 0; }
.pf-foot .pf-out { background: #e5484d; color: #fff; }
.setm .setout { width: 100%; margin: 10px 0 0; background: #e5484d; color: #fff; } /* 2026-10-27 설정의 로그아웃 */
/* 새 상점 배치 (2026-10-25 사용자 그림: 상점-빈칸.png): 위 코인, 종류 3×2, 물건은 2줄 큰 칸 */
.shopv2 .shopcoin.v2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; background: none; padding: 0 0 2px; }
.shopv2 .shopcoin.v2 b { font-size: 22px; display: inline-flex; align-items: center; gap: 4px; }
.shopv2 .shopcoin.v2 small { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.shopv2 .shoptabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shopv2 .shoptab { font-size: 14px; padding: 9px 2px; border: 2.5px solid #2a2320; background: #fff; color: #2a2320; }
.shopv2 .shoptab.on { background: #ffd866; border-color: #2a2320; color: #2a2320; }
.shopv2 .shopgrid { grid-template-columns: 1fr 1fr; gap: 12px; max-height: 58vh; }
.shopv2 .shopitem { border: 2.5px solid #2a2320; min-height: 170px; justify-content: center; padding: 10px 6px; }
.shopv2 .shopitem .shopart:not(.shopline) { width: 96px; height: 96px; }
.shopv2 .shopitem .shopart:not(.shopline) svg { width: 84px; height: 84px; }
.shopv2 .shopart.shopline { transform: scale(1.25); margin: 10px 0 12px; }
.shopv2 .shopitem b { font-size: 14px; }
.pf-av { width: 76px; height: 76px; border-radius: 50%; background: #e9e4ef; border: 2px solid #d9d0e6; display: grid; place-items: center; overflow: hidden; }
.pf-av svg, .pf-av img { width: 64px; height: 64px; }
.pf-pick .bdav { width: 50px; height: 50px; }
.pf-pick .bdav svg, .pf-pick .bdav img { width: 42px !important; height: 42px !important; }
/* 계정 확인 코드·계정 삭제 요청 (2026-10-25 사용자) */
.acctm .acctid { background: #f8f5fb; border-radius: 12px; padding: 8px 10px; margin: 8px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.acctm .acctid > span { font-size: 11.5px; color: var(--muted); }
.acctm .acctid > small { font-size: 11px; color: var(--muted); }
.acctm .acctid .warn { margin: 2px 0 0; font-size: 12px; }
.acctm .pidbtn { font: inherit; font-size: 16px; font-weight: 700; letter-spacing: 1px; color: var(--p); background: #fff; border: 1px solid #e3dcea; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.acctm .pidbtn small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.acctm .delreq { align-self: flex-end; font: inherit; font-size: 11px; color: var(--muted); background: none; border: 0; padding: 2px 0; text-decoration: underline; cursor: pointer; }
/* 새 박스 카드 (2026-10-26 사용자 그림, ?newbox=1): 300×470 한 장을 --k 배로 줄여 씀 */
.mcw { --k: 1; position: relative; display: block; width: calc(300px * var(--k)); height: calc(500px * var(--k)); pointer-events: none; }
.mcd { position: absolute; left: 0; top: 0; width: 300px; height: 500px; transform: scale(var(--k)); transform-origin: 0 0; box-sizing: border-box; padding: 12px; border: 3px solid #1d1530; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--mc2) 0%, var(--mc) 38%, var(--mc) 70%, var(--mc3) 100%); box-shadow: 0 6px 14px rgba(30, 20, 60, .28), inset 0 0 0 3px rgba(255, 255, 255, .35); color: #1d1530; text-align: left; }
@property --mcang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* S 등급: 테두리가 무지개로 돌며 빛남 (2026-10-26 사용자) */
.mcd.gS, .mcd.gSS { border: 5px solid transparent; background: linear-gradient(160deg, var(--mc2) 0%, var(--mc) 38%, var(--mc) 70%, var(--mc3) 100%) padding-box;
  box-shadow: 0 0 10px 2px rgba(255, 220, 120, .75), 0 0 22px 4px rgba(200, 120, 255, .45), 0 6px 14px rgba(30, 20, 60, .28); }
@keyframes mcRainbow { to { --mcang: 360deg; } }
/* 도는 무지개 테두리·SS 흐르는 바탕은 카드 글·그림과 따로 떨어진 층에 그림 (2026-11-09 사용자: 박스에서 카드 볼 때 번쩍이고 렉).
   예전에는 테두리가 돌 때마다 카드 전체(그림·글·육각형)를 매 순간 다시 그렸음. 모양·색·속도는 그대로 */
.mc-ring, .mc-fl { display: none; }
.mc-ring.gS, .mc-ring.gSS { display: block; position: absolute; left: 0; top: 0; width: 300px; height: 500px; transform: scale(var(--k)); transform-origin: 0 0; border-radius: 16px; pointer-events: none;
  background: conic-gradient(from var(--mcang), #ff4d4d, #ffb03b, #ffe94d, #5be36a, #3fd9ff, #5b7bff, #c85bff, #ff4d4d); animation: mcRainbow 3s linear infinite; }
/* SS 등급: 카드 전체가 무지개빛 (2026-10-26 사용자) */
.mcd.gSS { --mc: #ffd6f0; --mc2: #fff; --mc3: #c9b8ff; --mcd: #6a2bb8; --mci: #fff;
  background: none; box-shadow: 0 0 12px 3px rgba(255, 150, 220, .8), 0 0 26px 6px rgba(120, 200, 255, .55), 0 6px 14px rgba(30, 20, 60, .28); }
.mcd.gSS > .mc-fl { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, #ffb3b3, #ffd99a, #fff3a0, #b8f5b0, #a8ecff, #b7c4ff, #e4b8ff, #ffb3d9, #ffb3b3); background-size: 300% 300%; animation: mcSS 6s ease-in-out infinite; }
.mczoom .mc-ring, .mczoom .mc-fl { will-change: transform; } /* 크게 본 카드만 따로 층 (작은 칸 카드까지 다 나누면 폰 메모리를 많이 씀) */
/* 크게 본 카드의 무지개 테두리는 그림을 다시 그리지 않고 돌리기만 (2026-11-09 사용자: S 이상만 유독 깜빡임). 같은 색·속도 */
.mczoom .mc-ring.gS, .mczoom .mc-ring.gSS { background: none; animation: none; overflow: hidden; }
.mczoom .mc-ring.gS::before, .mczoom .mc-ring.gSS::before { content: ''; position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px;
  background: conic-gradient(#ff4d4d, #ffb03b, #ffe94d, #5be36a, #3fd9ff, #5b7bff, #c85bff, #ff4d4d); animation: mcRingSpin 3s linear infinite; }
@keyframes mcRingSpin { to { transform: rotate(360deg); } }
@keyframes mcSS { 50% { background-position: 100% 100%; } }
.mcd.gSS .mc-g { font-size: 22px; letter-spacing: -1px; background: linear-gradient(135deg, #ff5a8a, #ffb03b, #3fd9ff, #8a4dff); }
.mcd.gSS .mc-rgs { background: #7a45c8; }
.mcd.gSS .mc-ill { background: radial-gradient(circle at 50% 58%, #fff 0%, #fff4fb 40%, #e9e0ff 100%); }
.mcd.gSS .mc-holo::before { background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .7) 42%, rgba(160, 230, 255, .45) 50%, rgba(255, 190, 240, .45) 56%, transparent 68%); animation: mcHolo 2s ease-in-out infinite; mix-blend-mode: overlay; }
.mcd.gS { --mc: #f2c23a; --mc2: #fff1b8; --mc3: #d9951a; --mcd: #8a5a00; --mci: #fff6d6; }
.mcd.gA { --mc: #b980ff; --mc2: #e3cdff; --mc3: #8f55e6; --mcd: #5a2f9e; --mci: #f3c3a4; }
.mcd.gB { --mc: #6aa2ff; --mc2: #d3e4ff; --mc3: #3f76e0; --mcd: #1f4a9e; --mci: #dbeaff; }
.mcd.gC { --mc: #6fcf8a; --mc2: #d8f5e0; --mc3: #3ea55d; --mcd: #1f6e38; --mci: #e3f7e8; }
.mc-top { display: flex; align-items: center; gap: 8px; height: 46px; }
.mc-g { flex: 0 0 46px; height: 46px; display: grid; place-items: center; border: 3px solid #1d1530; border-radius: 8px; background: var(--mcd); color: #fff; font-size: 28px; font-weight: 900; box-sizing: border-box; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.mc-nm { flex: 1; min-width: 0; height: 42px; line-height: 36px; padding: 0 10px; border: 3px solid #1d1530; border-radius: 8px; background: #fbfbfb; font-size: 20px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.mc-sc { flex: 0 0 auto; font-size: 26px; font-weight: 900; line-height: 1; } /* 점수: 카드와 같은 계열, 더 진하게 + 빛남 (2026-10-26 사용자) */
.mc-sc span { color: var(--mcd); text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff, 0 0 8px var(--mc2), 0 0 14px var(--mc2); animation: mcScore 2.2s ease-in-out infinite; }
.mc-sc small { font-size: 13px; margin-left: 1px; }
@keyframes mcScore { 50% { text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff, 0 0 12px #fff, 0 0 22px var(--mc); } }
.mc-ill { position: relative; display: grid; place-items: center; height: 184px; margin-top: 10px; border: 3px solid #1d1530; border-radius: 8px; overflow: hidden; box-sizing: border-box;
  background: radial-gradient(circle at 50% 58%, #fff 0%, var(--mci) 45%, color-mix(in srgb, var(--mci) 70%, var(--mc3)) 100%); }
.mc-ill::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 16px); }
.mc-ill svg { position: relative; width: 172px; height: 172px; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .18)); }
.mc-mv { position: absolute; right: 6px; bottom: 5px; display: flex; align-items: center; gap: 2px; padding: 1px 7px 1px 3px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 2px solid #1d1530; font-size: 15px; font-weight: 900; }
.mc-mv img { width: 22px; height: 22px; }
.mc-pf { position: absolute; left: 22px; top: 222px; width: 64px; height: 64px; z-index: 3; }
.mc-face { position: absolute; inset: 0; border-radius: 50%; background: #fff; border: 4px solid #1d1530; overflow: hidden; display: grid; place-items: center; box-sizing: border-box; z-index: 1; }
.mc-face svg { width: 60px; height: 60px; }
.mc-tri { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -8px 0 0 -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid #19e3ea;
  transform: rotate(var(--a)) translateY(-44px); transform-origin: 9px 8px; filter: drop-shadow(0 0 1px #1d1530) drop-shadow(0 0 1px #1d1530); }
/* 중형·대형 몸 칸 사각형 + 실제 공격 화살표 (2026-10-28 사용자) */
.mc-bd { position: absolute; left: 22px; z-index: 3; box-sizing: content-box; border: 4px solid #1d1530; border-radius: 8px; background: #fff; margin: -4px 0 0 -4px; }
.mc-bi { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 4px; }
.mc-bi svg { display: block; }
.mc-ar { position: absolute; width: 0; height: 0; margin: -4.5px 0 0 -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #19e3ea; /* 2026-10-28 사용자: 더 작게 (빽빽함) */
  transform: rotate(var(--a)); transform-origin: 5px 4.5px; filter: drop-shadow(0 0 1px #1d1530) drop-shadow(0 0 1px #1d1530); z-index: 1; }
.mc-low { position: absolute; left: 12px; right: 12px; top: 292px; height: 194px; display: flex; gap: 6px; align-items: stretch; }
.mc-rgs { flex: 0 0 106px; display: flex; flex-direction: column; gap: 5px; padding: 5px; background: var(--mcd); border: 3px solid #1d1530; border-radius: 8px; box-sizing: border-box; }
.mc-rg { flex: 1; min-height: 0; overflow: hidden; background: #ececf2; border: 2px solid #1d1530; border-radius: 6px; padding: 2px 4px; box-sizing: border-box; }
.mc-rg { display: flex; flex-wrap: wrap; align-content: center; gap: 0 4px; }
.mc-rg b { font-size: 10.5px; font-weight: 900; line-height: 14px; white-space: nowrap; }
.mc-rg b i { font-style: normal; font-weight: 700; color: #6b6380; }
.mc-ch { display: contents; font-size: 10.5px; font-weight: 800; line-height: 14px; }
.mc-ch span, .mc-ch em { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; line-height: 14px; white-space: nowrap; }
.mc-ch .sico { width: 12px; height: 12px; }
.mc-ch em { color: #a39bb5; font-style: normal; }
.mh { flex: 1; width: 166px; height: 176px; align-self: center; overflow: visible; }
.mh-plate { fill: #c8c6cf; stroke: #1d1530; stroke-width: 2; }
.mh-g { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; }
.mh-s { fill: var(--mcd); fill-opacity: .55; stroke: var(--mcd); stroke-width: 2.5; stroke-linejoin: round; }
.mh-v { font-size: 12px; font-weight: 900; fill: #1d1530; stroke: #fff; stroke-width: 3px; paint-order: stroke; }
.mc-tk { position: absolute; top: 60px; right: 16px; font-style: normal; font-size: 20px; z-index: 2; }
/* 반짝이 띠: 예전에는 배경 위치를 움직여 매 프레임 카드 전체를 다시 그렸음 → 2026-11-02 (레이드 대기방 버벅임) 같은 띠를 옆으로 미는 방식으로 (모양·속도 그대로, 훨씬 가벼움) */
.mc-holo { position: absolute; inset: 0; pointer-events: none; border-radius: 13px; overflow: hidden; }
.mc-holo::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 260%; will-change: transform; }
.mcd.gS .mc-holo::before, .mcd.gA .mc-holo::before { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, rgba(255, 210, 255, .35) 50%, transparent 62%); animation: mcHolo 3.6s ease-in-out infinite; mix-blend-mode: soft-light; }
.mcd.gS .mc-holo::before { animation-duration: 2.4s; mix-blend-mode: overlay; }
@keyframes mcHolo { 0% { transform: translateX(-80%); } 60%, 100% { transform: translateX(24.615%); } }
/* 카드를 크게 본 동안 뒤(흐리게 보이는) 박스·레이드 대기방·프로필 카드는 움직임을 멈춤 (2026-11-09: 박스에서도. mcz-on = ui.js mczSync) */
body:has(.mczoom) .rd-room .mcd, body:has(.mczoom) .rd-room .mcd *, body:has(.mczoom) .rd-room .mcd *::before,
body.mcz-on > :not(.mczoom) .mcw *, body.mcz-on > :not(.mczoom) .mcw *::before { animation-play-state: paused !important; }
/* 박스·크게 본 카드가 로비를 덮는 동안 로비 바닷가 움직임도 멈춤 (lobby-beach.js loop도 같이, 2026-11-10) */
body.mcz-on .bc-wrap *, body.mcz-on .bc-wrap *::before, body.mcz-on .bc-wrap *::after, body:has(.bxm) .bc-wrap *, body:has(.bxm) .bc-wrap *::before, body:has(.bxm) .bc-wrap *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .mc-holo, .mc-holo::before, .mc-ring, .mc-ring::before, .mc-fl, .mc-sc span { animation: none !important; } }
/* 박스 칸: 3장씩 겹쳐 지그재그 (사용자 그림 '박스칸', 2026-10-26 한 줄에 3장) */
.bxm.nb .bxgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 0; padding: 4px 10px 16px 0; }
.bxm.nb .bxslot { aspect-ratio: auto; width: calc(300px * .39); height: calc(500px * .39); border-radius: 12px; }
.bxm.nb .bxslot:nth-child(3n+2) { transform: translateY(10px); z-index: 2; } .bxm.nb .bxslot:nth-child(3n) { transform: translateY(4px); z-index: 3; }
.bxm.nb button.bxslot { transition: transform .15s; } .bxm.nb button.bxslot:active { transform: translateY(-6px) scale(1.04); z-index: 9; }
.bxm.nb .bxslot.bxempty, .bxm.nb .bxslot.bxlock, .bxm.nb .bxslot.bxbuy { border: 2px dashed #cfc6e2; background: #f7f4fc; }
.pf-rep .mcw { margin: 0 auto 2px; }
.bxdet .mcw.big { margin: 0 auto 8px; }
/* 카드를 누르면: 뒤는 흐리게, 카드는 가까이 */
.mczoom { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; overflow-y: auto; background: rgba(20, 14, 36, .35); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: mczIn .22s ease-out; }
.mcz-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0 28px; perspective: 1400px; }
/* 그림자: 예전 filter: drop-shadow는 테두리가 돌 때마다 카드 전체 그림자를 다시 계산했음 → 카드 모양 그대로의 가만히 있는 그림자 (2026-11-09) */
.mcz-in .mcw::before { content: ''; position: absolute; inset: 0; border-radius: calc(16px * var(--k)); box-shadow: 0 12px 22px rgba(0, 0, 0, .35); }
.mcz-rec { margin: 0; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mcz-close { width: min(300px, 80vw); }
.mcz-x { width: min(300px, 80vw); font-size: 14px; }
.mcz-rel { align-self: flex-end; margin-right: 6px; font: inherit; font-size: 13px; font-weight: 800; color: #d33; background: #fff; border: 2px solid #e88; border-radius: 8px; padding: 5px 12px; cursor: pointer; }
@keyframes mczIn { from { opacity: 0; } }
.mczoom.still { animation: none; } /* 옆으로 넘겨 온 카드: 뒤 흐림은 그대로 */
@keyframes mczPop { from { transform: scale(.55) translateY(40px); opacity: 0; } }
.pf-rep.full { padding: 6px; cursor: default; }
.pf-rep.full .mcw { margin: 0; }
.pf-rephint { margin-top: 2px; }
.bxm.nb .bxslot.isrep::after { content: '⭐'; position: absolute; right: -4px; top: -8px; font-size: 18px; z-index: 6; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); } /* 대표 카드 표시 */
/* 카드 뒤집기 (2026-10-26 사용자: 촤락 한 바퀴 뒤집히며 커지고, 닫으면 뒤집히며 박스로) */
.mcz-flip { position: relative; transform-style: preserve-3d; will-change: transform; }
.mcz-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mcz-backf { transform: rotateY(180deg); }
/* 다 펼쳐진 뒤 (ui.js monZoom 'flat'): 3D를 풀고 뒷면은 숨김. 뒤집히는 동안에는 반짝이 띠를 숨김 (3D 안에서 섞기 효과가 폰에서 깨짐, 2026-11-09) */
.mczoom.flat .mcz-in { perspective: none; }
.mczoom.flat .mcz-flip { transform-style: flat; will-change: auto; }
.mczoom.flat .mcz-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
.mczoom.flat .mcz-backf { display: none; }
.mczoom:not(.flat) .mc-holo { visibility: hidden; }
/* 뒤집히는 동안(열 때·닫을 때)은 무지개 테두리를 도는 층 대신 멈춘 그림으로, SS 바탕·점수 빛도 잠깐 멈춤 (2026-11-10 사용자: S·SS 닫을 때 버벅임). --ra = 닫기 누른 순간 각도 */
.mczoom:not(.flat) .mc-ring.gS, .mczoom:not(.flat) .mc-ring.gSS { background: conic-gradient(from var(--ra, 0deg), #ff4d4d, #ffb03b, #ffe94d, #5be36a, #3fd9ff, #5b7bff, #c85bff, #ff4d4d); will-change: auto; }
.mczoom:not(.flat) .mc-ring::before { display: none; }
.mczoom:not(.flat) .mc-fl, .mczoom:not(.flat) .mc-sc span { animation-play-state: paused; will-change: auto; }
.mc-back { display: grid; place-items: center; }
.mc-back b { position: relative; z-index: 1; font-size: 54px; font-weight: 900; color: #fff; letter-spacing: 4px; text-shadow: 0 3px 0 var(--mcd), 0 0 18px var(--mc2); }
.mc-back i { position: absolute; inset: 22px; border: 4px solid rgba(255, 255, 255, .75); border-radius: 12px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 10px, transparent 10px 22px); }
.mcz-ui { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; animation: mczUi .3s .38s ease-out both; }
.mczoom.out .mcz-ui { opacity: 0; transition: opacity .12s; }
.mczoom.out { opacity: 1; background: rgba(20, 14, 36, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background .45s, backdrop-filter .45s; }
@keyframes mczUi { from { opacity: 0; transform: translateY(10px); } }
.bxm h2.bxh { display: flex; align-items: center; gap: 6px; }
.bxexp { margin-left: auto; font: inherit; font-size: 12px; font-weight: 800; color: #5b34c4; background: #f3eefc; border: 1.5px solid #c9b6f5; border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; } /* 박스 확장: 제목 줄 오른쪽에 작게 (2026-10-26 사용자) */
.bxnone { grid-column: 1 / -1; text-align: center; color: #8a80a0; font-size: 13px; padding: 20px 0; }
.bxsort { display: flex; justify-content: flex-end; gap: 4px; margin: 0 0 6px; } /* 박스 정렬 (2026-10-26) */
.bxsort button { font: inherit; font-size: 12px; font-weight: 800; border: 1.5px solid #d6cfe6; background: #fff; color: #6b6380; border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.bxsort button.on { background: #5b34c4; border-color: #5b34c4; color: #fff; }
.lbrow.lbpick { cursor: pointer; } /* 2026-10-26: 누르면 프로필 */
/* 다른 플레이어 프로필 (2026-10-28 사용자): 내 새 프로필과 같은 칸. 이름 바로 옆에 칭호 작게 */
.pfo .pf-nick b { flex: 0 1 auto; }
.pfo-tt { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 800; color: #7a4fd0; background: #f1eaff; border: 1.5px solid #d8c8fb; border-radius: 999px; padding: 2px 8px; }
.pfo .pf-rep { cursor: default; }
/* 게임 끝 박스가 꽉 찼을 때 바꿀 카드 고르기 (2026-10-28): 한 줄 3장 */
.bxpick { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 8px 4px; }
.bxpick .bxslot { padding: 0; border: 0; background: none; cursor: pointer; }
.bxpick .bxslot:active { transform: translateY(2px); }
.bxdet > .mcw { margin: 0 auto 4px; }
.bxswap { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; }
.bxswap > span { display: grid; justify-items: center; gap: 4px; }
.bxswap > i { font-style: normal; font-size: 22px; font-weight: 900; color: var(--p); }
.bxswap .bxout { font-size: 12px; color: #fff; background: #e5484d; border-radius: 999px; padding: 1px 10px; }
.bxswap .bxin { font-size: 12px; color: #fff; background: #2f9e57; border-radius: 999px; padding: 1px 10px; }
.bxwarn { color: #c0392b; font-weight: 800; }
.modal .choices .btn.danger { background: #e5484d; color: #fff; }
/* 분신 (더로긍 계열, 2026-11-01 사용자): 내 분신만 살짝 투명 + 발밑 점선 동그라미. 상대 화면에서는 똑같이 보임 */
.unit.myclone .tkp, .unit.myclone .tok { opacity: .72; }
.unit.myclone::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 22%; border: 2px dashed rgba(255, 255, 255, .95); border-radius: 50%; box-shadow: 0 0 0 1px rgba(60, 60, 80, .35); pointer-events: none; z-index: 1; }
.board .unit.cnew { visibility: hidden; }

/* 2026-11-02 사용자: 컴퓨터·패드처럼 넓은 화면에서 도움말 채팅·시간 상인 시계가 화면 맨 구석에 뜸 → 게임 화면(가운데 720px) 가까이로 (폰은 그대로) */
@media (min-width: 760px) {
  #chatfeed { left: calc(50% - 360px + 18px); }
  body.ex-on #chatfeed { left: max(8px, calc(50% - 200px)); }
}
@media (min-width: 900px) {
  .timeclock { right: auto; left: calc(50% + 360px + 24px); }
}

/* 도움말 채팅 (2026-11-02 사용자: 더 잘 보이게): 밝은 노란 상자 + 💡 */
#helpfeed { position: fixed; left: max(8px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 52px); z-index: 10001; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; max-width: min(78vw, 340px); } /* 2026-11-03 사용자: 도움말은 위쪽 (업적보다 위 레이어, 전장은 안 가리게) */
#helpfeed .chatbar.helpbar { font-size: 15px; padding: 8px 12px; }
.hspot { position: fixed; z-index: 8999; pointer-events: none; border: 3px solid #ffd25a; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(24, 16, 36, .5), 0 0 16px 4px rgba(255, 210, 90, .85); animation: hspotin .35s ease-out both; transition: left .15s, top .15s, width .15s, height .15s; } /* 2026-11-03 사용자: 도움말 강조 (예전 튜토리얼 .coach .cring과 같은 모양) */
.hspot::after { content: ''; position: absolute; inset: -3px; border: 3px solid #fff; border-radius: inherit; opacity: 0; animation: cblink2 1s ease-in-out infinite; }
.hspot.self { border-color: transparent; box-shadow: 0 0 0 200vmax rgba(24, 16, 36, .5); }
.hspot.self::after { content: none; }
.hspot.out { animation: hspotout .3s ease-in forwards; }
@keyframes hspotin { from { opacity: 0; } to { opacity: 1; } }
@keyframes hspotout { to { opacity: 0; } }
#helpfeed .helpbar.lit { box-shadow: 0 0 0 3px rgba(255, 210, 90, .9), 0 0 18px 6px rgba(255, 210, 90, .8); }
@media (min-width: 760px) { #helpfeed { left: calc(50% - 360px + 18px); } body.ex-on #helpfeed { left: max(8px, calc(50% - 200px)); } }
#helpfeed .helpbar.hold { box-shadow: 0 0 0 3px rgba(255, 210, 90, .9), 0 0 18px 6px rgba(255, 210, 90, .8); }
/* 스토리 튜토리얼 배틀 안내 (2026-11-11 사용자): 처음 나올 땐 화면 가운데쯤에 도움말 모양으로 크게 */
#helpfeed.sbmid { left: 50%; top: 40%; transform: translateX(-50%); align-items: center; width: max-content; max-width: min(88vw, 380px); }
#helpfeed.sbmid .chatbar.helpbar { font-size: 17px; line-height: 1.45; padding: 12px 16px; text-align: center; }
#helpfeed.sbmid .chatbar.helpbar:not(.out) { animation: sbmidin .35s ease-out both, helppop .9s .35s ease-out; }
@keyframes sbmidin { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
/* 2026-11-12 사용자: 가운데 안내가 닫힐 때 왼쪽 위로 튀지 않고 제자리에서 사라짐. 그 뒤 왼쪽 위 안내는 조금 있다가 은은하게 (튀는 움직임 없이 서서히) */
#helpfeed.sbmid .chatbar.helpbar.out { animation: none; transform: scale(.96); } /* animation: none = 닫힐 때 들어오는 움직임(chatslide)이 다시 돌지 않게 */
#helpfeed .chatbar.helpbar.quiet { font-size: 13px; font-weight: 700; padding: 6px 10px; border-width: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); opacity: .88; }
#helpfeed .chatbar.helpbar.quiet:not(.out) { animation: helpquiet 1.1s ease-out both; }
#helpfeed .chatbar.helpbar.quiet.out { animation: none; transform: none; opacity: 0; }
@keyframes helpquiet { from { opacity: 0; } to { opacity: .88; } }
.chatbar.helpbar { background: #fff6d6; color: #3a2a00; border: 3px solid #ffb300; box-shadow: 0 4px 14px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 179, 0, .25); font-size: 16px; }
.chatbar.helpbar .helptag { color: #c26a00; }
.chatbar.helpbar:not(.out) { animation: chatslide .3s ease-out both, helppop .9s .3s ease-out; }
@keyframes helppop { 30% { transform: scale(1.04); } }

/* 꾹 누르기 설명 (help.js, 2026-11-02) */
.lptip { position: fixed; z-index: 99990; max-width: min(300px, calc(100vw - 16px)); background: #fff6d6; color: #3a2a00; border: 3px solid #ffb300; border-radius: 12px; padding: 8px 12px; font-size: 15px; line-height: 1.45; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); pointer-events: none; animation: helppop .5s ease-out; word-break: keep-all; }
.lptip b { color: #c26a00; }
#stage .ndie, .mctags span, .ocsub { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 2026-11-03 사용자: 전장 바닥 = 1~3라운드 풀 타일, 결승전 모래 타일 (js/pixel-art.js btiles, 칸마다 --tp). 좁아지는 숲은 예전 그림. 결승전은 관중·깃발·음악 버튼 없이 같은 톤으로 */
.board .bc.pixt { background: var(--pixurl) var(--tp, 0 0) / 400% 200% no-repeat; image-rendering: pixelated; border-color: transparent !important; }
.board:has(.bc.pixt) { background: #6f9e5e; border-color: #3f6a3c; }
.battlewrap.final .board:has(.bc.pixt) { background: #b48a66; border-color: #7a5238; }
.board .bc.pixt.pad1::after, .board .bc.pixt.pad2::after, .board .bc.pixt.pad3::after, .board .bc.pixt.pad4::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, #ffffff40 0 34%, transparent 36%); }
.board .bc.pixt.pad1::after { background-color: #2d6fa37a; } .board .bc.pixt.pad2::after { background-color: #c8452c7a; }
.board .bc.pixt.pad3::after { background-color: #2f8a3c7a; } .board .bc.pixt.pad4::after { background-color: #c98a007a; }
.battlewrap.final { background: #4a3626; box-shadow: inset 0 0 0 2px #c9a24a; }
.battlewrap.final::before { content: none; }
.battlewrap.final .board { background-image: none; }
.battlewrap.final .finalbanner { color: #f0d27a; font-size: 14px; margin: 2px 0 4px; text-shadow: 0 1px 0 #0008; }
/* 첫 판 안내 (2026-11-03 사용자): 공격 방향 +1 그림 설명 (예전 튜토리얼 암전 화면을 짧게) */
.fmscene { position: fixed; inset: 0; z-index: 9500; background: rgba(14, 10, 22, .9); color: #fff; display: flex; align-items: center; justify-content: center; padding: 24px 16px; animation: tscin .35s ease-out; }
.fmscene.out { animation: hspotout .3s ease-in forwards; }
.fmscene .tsc { text-align: center; }
.fmscene p { font-size: 22px; font-weight: 900; margin: 14px 0 4px; }
.fmscene small { font-size: 15px; font-weight: 700; color: #e9e2d0; }
/* 2026-11-03 사용자: 소형 몬스터의 공격 방향이 8개를 넘으면 (넘은 만큼 추가 고정 피해) 공격 방향 화살표 색을 모두 더 짙게 */
.odir .ring image { filter: brightness(.6) saturate(1.8); }
.odir .ring .slot.on { fill: #c98a00; }
/* 적군 체력바 노랑 (2026-11-03 사용자): 내 화면 기준 상대 몬스터(분신·레이드 보스 포함)는 노랑. 낮아지면 주황(hpl1) → 빨강(hpl2), 무적 하양은 그대로. 나·우리 편은 초록 그대로 */
:root { --foehp: #ffd60a; --foehp2: #ffe866; }
.unit.hpfoe .hpr:not(.hpl1):not(.hpl2) .hpr-fill { stroke: var(--foehp); }
.nhpbar.hpfoe:not(.hpl1):not(.hpl2) > i:not(.hpghost):not(.flashhit):not(.flashheal) { background: var(--foehp); }
.mchbar.hpfoe:not(.hpl1):not(.hpl2) i:not(.hpghost):not(.flashhit):not(.flashheal), .ochp.hpfoe:not(.hpl1):not(.hpl2) i:not(.hpghost):not(.flashhit) { background: linear-gradient(180deg, var(--foehp2), var(--foehp)); }
.hpw.side-foe:not([data-sts]) .pips:not(.hpl1):not(.hpl2) span:not(.lost):not(.hit):not(.heal):not(.healpre):not(.part) { background: var(--foehp); }
.hpw.side-foe:not([data-sts]) .pips:not(.hpl1):not(.hpl2) span.part { background: linear-gradient(90deg, var(--foehp) var(--f), #3a302b var(--f)); }

/* 성장 장소 새 그림 (2026-11-08 사용자): 카드 자리 3칸이 그려진 판 위에 카드를 그 자리에 올림 (새 화면만).
   그림 폭 = 칸 폭, 카드 글이 길면 판 가운데 띠만 세로로 늘어남 (위·아래 띠는 그대로) */
.region.art2 { --u: calc(100cqw / var(--gw)); container-type: inline-size; isolation: isolate; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: flex; flex-direction: column; }
.region.art2::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-style: solid; border-color: transparent; border-width: calc(var(--gt) * var(--u)) 0 calc(var(--gb) * var(--u)) 0; border-image: var(--gart) var(--gt) 0 var(--gb) 0 fill / calc(var(--gt) * var(--u)) 0 calc(var(--gb) * var(--u)) 0 stretch; }
.region.art2.chosen { box-shadow: none; }
.region.art2.chosen::before { filter: drop-shadow(0 0 2px var(--p)) drop-shadow(0 0 2px var(--p)) drop-shadow(0 0 1px var(--p)); }
/* 이름표는 그림에 있음: 이름표 자리에 보이지 않는 버튼만 (누르면 그 장소로 이동) */
.region.art2 .rh { position: absolute; left: 30%; width: 40%; top: 0; height: calc(var(--sy) * var(--u)); background: none; border-radius: 12px; padding: 0; z-index: 2; }
.region.art2 .rh > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.region.art2 .rscene { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--sy) * var(--u)); margin: 0; z-index: 3; pointer-events: none; }
.region.art2 .deckn { top: auto; bottom: 2px; right: 4%; font-size: 9.5px; line-height: 15px; padding: 0 4px; border-radius: 7px; pointer-events: auto; }
.region.art2 .rspot { position: absolute; left: 3%; bottom: 1px; max-width: 28%; gap: 0; }
.region.art2 .rspot .gmon { width: 26px; height: 26px; flex: none; }
.region.art2 .rspot .gmon + .gmon { margin-left: -10px; }
.region.art2 .rspot .gmon svg { width: 22px; height: 22px; }
.region.art2 .cards { margin: calc(var(--sy) * var(--u)) calc((var(--gw) - var(--sx) - var(--sw)) * var(--u)) calc((var(--gh) - var(--sy) - var(--sh)) * var(--u)) calc(var(--sx) * var(--u)); gap: calc(var(--sg) * var(--u)); min-height: calc(var(--sh) * var(--u)); }
.region.art2 .card { background: #fffaf1; border: 0; border-radius: calc(14 * var(--u)); box-shadow: inset 0 0 0 1px #d9cbb8; min-height: 0; padding: 3px 2px 2px; }
.region.art2 .card .reward { background: #efe6d8; }
.region.art2 .empty { grid-column: 1 / -1; align-self: center; text-align: center; font-size: 10px; font-weight: 800; color: #6b5d50; background: #fffaf1d9; border-radius: 8px; padding: 4px 6px; }
/* ---- 배틀 화면 개편 (2026-11-08 사용자 그림): 위 몬스터별 주사위·행동·체력 / 가운데 전장 / 아래 방사능·내 주사위·행동. 틀은 사용자 그림 (js/hud-art.js) ---- */
body.nhud #scorebar, body.nhud #players { display: none; }
body.nhud #stage { --hk: .34; }
.nhud.ndice { position: relative; display: grid; grid-template-columns: repeat(var(--nn, 4), minmax(0, 1fr)); gap: 0; min-height: 0; background: none; border-radius: 0;
  border-style: solid; border-width: calc(60px * var(--hk)) calc(62px * var(--hk)) calc(54px * var(--hk)); border-image: var(--hud-top) 60 90 fill / calc(60px * var(--hk)) calc(90px * var(--hk)) stretch;
  margin: 10px 0 2px; padding: 2px 0 0; color: #1c2340; }
.nhud.n2 { --nn: 2; } .nhud.n3 { --nn: 3; } .nhud.n4 { --nn: 4; }
/* 2026-11-10 사용자 그림 (배틀화면-위칸-2026-11-10.png): 칸마다 이름표 / 가운데 선택지 칸 / 하트 + 체력 막대(남색 알약 안에 막대와 숫자). 굴린 주사위는 안 보임, 칸 사이엔 나뭇잎 */
.nhud .nhc { position: relative; display: grid; grid-template-rows: auto auto auto; justify-items: stretch; align-content: start; gap: 4px; padding: 0 5px 1px; min-width: 0; }
.nhud .nhc + .nhc::before, .nhud .nhc + .nhc::after { content: ''; position: absolute; left: 0; z-index: 2; pointer-events: none; background: center / 100% 100% no-repeat; transform: translateX(-50%); }
.nhud .nhc + .nhc::before { top: -24px; width: 34px; aspect-ratio: 102 / 61; background-image: var(--hud-leafT); }
.nhud .nhc + .nhc::after { bottom: -24px; width: 32px; aspect-ratio: 95 / 57; background-image: var(--hud-leafB); }
.nhud .nhc.ko > * { filter: grayscale(1); opacity: .55; }
.nhud .ndnm { justify-self: center; margin-top: -4px; width: 94%; box-sizing: border-box; padding: 2px 6px 3px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 900; line-height: 1.3; color: #fff;
  background: linear-gradient(#fff5 0 3px, transparent 3px), linear-gradient(var(--pc), color-mix(in srgb, var(--pc) 80%, #000)); border: 2px solid #1c2340; box-shadow: inset 0 -3px 0 #0002;
  text-shadow: 0 1px 0 #0006; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhud .ndie.me .ndnm { border-radius: 999px; padding: 2px 6px 3px; box-shadow: inset 0 -3px 0 #0002, 0 0 0 2px #ffd84a; }
body.nui .nhud .ndnm { font-size: 12px; } body.nui .nhud.n2 .ndnm { font-size: 13px; }
.nhud.ndhide .nhbox { opacity: 1; } .nhud.ndhide .nhbox em { opacity: 0; } /* 주사위가 구르는 동안 칸은 그대로, 선택지만 숨김 */
.nhud .nhbox { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; box-sizing: border-box; padding: 0 4px; min-width: 0;
  background: #f1e5d6; border: 2px solid #c8b7a4; border-radius: 9px; box-shadow: inset 0 2px 0 #0000000d; }
.nhud .nhbox em { flex: 1 1 0; min-width: 0; max-width: 46px; height: 24px; display: grid; place-items: center; box-sizing: border-box; padding: 0 2px; font-style: normal; font-weight: 900; font-size: 11px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden;
  color: #3a2f45; background: #e7d9c7; border: 2px solid #f6eee2; border-radius: 6px; box-shadow: 0 0 0 1px #d2bfa8, inset 0 0 0 1px #d8c6b0; } /* 2026-11-10 사용자: 선택지 칩 색은 예전 위 칸 색 그대로 */
.nhud .nhbox.n3 em { font-size: 10px; }
.nhud .nhbox em.sp { flex: 1.9 1 0; max-width: none; letter-spacing: -.7px; padding: 0 1px; } /* '특수능력' 네 글자가 잘리지 않게 넓게 */
.nhp { display: flex; align-items: center; gap: 3px; width: 100%; min-width: 0; }
.nhheart { flex: none; width: 17px; height: 16px; }
.nhud .nhpbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 17px; box-sizing: border-box; padding: 3px 5px 3px 3px; background: #2b2a40; border-radius: 999px; }
.nhud .nhpbar { flex: 1; height: 100%; border: 0; border-radius: 999px; background: #4a4760; }
.nhud .nhpbar > i { border-radius: 999px; }
.nhud .nhpn { flex: none; min-width: 12px; text-align: right; font-size: 11px; font-weight: 900; line-height: 1; color: #fff; }
.nhud.n2 .ndnm { width: 80%; font-size: 13px; }
.nhud.n2 .nhbox, .nhud.n3 .nhbox { gap: 5px; }
.nhud.n2 .nhbox em, .nhud.n3 .nhbox em { max-width: 64px; font-size: 12px; }
.nhud.n2 .nhbox.n3 em, .nhud.n3 .nhbox.n3 em { font-size: 11px; }
.nhud.n2 .nhpbox { height: 19px; } .nhud.n2 .nhpn { font-size: 12px; }
#stage .nhud .nhp.betted { box-shadow: 0 0 0 2px #ffd23f; border-radius: 6px; }
/* 가운데 전장: 나뭇잎 틀 안 (틀은 전장 아래, 전장이 틀 안쪽 선까지) */
.battlewrap.nhwrap { background: none; padding: 0; margin: 0 0 2px; border-radius: 0; box-shadow: none; gap: 0; }
body.nui .battlewrap.nhwrap { padding: 0; }
.nharena { position: relative; padding: calc(34px * var(--hk) - 2px) calc(48px * var(--hk) - 2px) calc(38px * var(--hk) - 2px); }
.nharena::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-style: solid; border-width: calc(80px * var(--hk)) calc(90px * var(--hk)) calc(110px * var(--hk));
  border-image: var(--hud-arena) 80 90 110 / calc(80px * var(--hk)) calc(90px * var(--hk)) calc(110px * var(--hk)) stretch; }
.nharena > .board { position: relative; z-index: 1; width: 100%; box-sizing: border-box; border-width: 2px; border-color: #1c2340; border-radius: 4px; box-shadow: none; }
/* 아래: 방사능 칸 + 내 주사위 칸 (그림 비율 그대로) */
.nhbot { position: relative; display: grid; grid-template-columns: 480fr 676fr; gap: 1.2%; margin-top: 2px; }
.nhrad, .nhact { position: relative; background: center / 100% 100% no-repeat; }
.nhrad { aspect-ratio: 480 / 196; background-image: var(--hud-rad); }
.nhact { aspect-ratio: 676 / 196; background-image: var(--hud-act); }
.nhradt { position: absolute; left: 37%; right: 7%; top: 14%; bottom: 22%; display: grid; align-content: center; justify-items: center; line-height: 1; color: #1c2340; }
.nhradt small { font-size: 10.5px; font-weight: 900; letter-spacing: -.3px; white-space: nowrap; }
.nhradt b { font-size: 27px; font-weight: 900; letter-spacing: -1px; margin-top: 2px; }
.nhradt b em { font-style: normal; font-size: 13px; margin-left: 2px; letter-spacing: 0; }
.nhradt b.hot { color: #c62f2a; font-size: 17px; letter-spacing: 0; }
.nhradt b.nhsm { font-size: 13px; letter-spacing: 0; }
.nhact.panel { padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; min-height: 0; }
.nhmy { position: absolute; left: 10.4%; width: 19.2%; top: 11.2%; height: 66.3%; display: grid; place-items: center; }
.nhmy .ndface { width: 64%; height: auto; aspect-ratio: 1; padding: 9%; border-width: 2px; border-radius: 6px; }
.nhmy .ndface i.on { background: #1c2340; margin: 1.5px; }
.nhmy.ndhide .ndface { opacity: 0; }
.nhmy .ndface.nodie { border: 0; background: none; }
.nhopts { position: absolute; left: 40.2%; right: 7%; top: 9%; height: 70%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6%; }
.nhopts.n3 { gap: 3%; }
.nhslot { width: 100%; height: 100%; font-size: 14px; min-height: 0; padding: 0 2px; }
.nhopts.n3 .nhslot { font-size: 12px; }
.nhact:not(.live) .nhslot { opacity: .5; }
.nhact.live .nhslot { cursor: pointer; color: #1c2340; background: #fdf7ea; border-color: #fff; box-shadow: 0 0 0 1.5px #1c2340, 0 2px 0 #1c2340; font-family: inherit; }
.nhact.live .nhslot:active { transform: translateY(2px); box-shadow: 0 0 0 1.5px #1c2340; }
.nhact.live .nhslot:disabled { opacity: .45; cursor: default; }
.nhact.live .nhslot small { display: none; }
.nhact.live .nhslot.rsel { background: #ffe08a; box-shadow: 0 0 0 2px #c62f2a, 0 2px 0 #1c2340; }
/* 2026-11-09 사용자: 아래 칸은 주사위 칸 없이 선택지만, 예전처럼 색 있는 박스 (.big 버튼 색: 보라, 특수능력은 밝은 보라) */
.nhopts { left: 7.5%; right: 7.5%; top: 14%; height: 62%; gap: 3%; }
.nhopts.n3, .nhopts.n4 { gap: 2%; }
.nhact .nhslot { color: #fff; background: var(--p); border: 0; border-radius: 10px; box-shadow: inset 0 -3px 0 #0003, 0 2px 0 #1c234040; font-size: 15px; }
.nhact .nhslot[data-act="special"] { background: #7c5cc4; }
.nhopts.n3 .nhslot, .nhopts.n4 .nhslot { font-size: 13px; }
.nhact .nhslot.nil { background: none; box-shadow: none; }
.nhact:not(.live) .nhslot { opacity: .45; }
.nhact.live .nhslot { color: #fff; background: var(--p); border: 0; box-shadow: inset 0 -3px 0 #0003, 0 2px 0 #1c2340; }
.nhact.live .nhslot[data-act="special"] { background: #7c5cc4; }
.nhact.live .nhslot:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #0003; }
.nhact.live .nhslot:disabled { opacity: .4; }
.nhact.live .nhslot.rsel { background: #7c5cc4; outline: 3px solid #f5b300; outline-offset: 1px; box-shadow: inset 0 -3px 0 #0003; }
/* 2026-11-11 사용자: 아래 선택지 색 — 특수능력 옅은 빨강, 회복 초록 (나머지는 보라 그대로). 선택지가 많아 설명 칸(.nhsub)으로 나올 때도 같은 색 */
.nhact .nhslot[data-act="special"], .nhact.live .nhslot[data-act="special"], .nhact.live .nhslot.rsel, .nhsub .big button[data-act="special"] { background: #e0676b; }
.nhact .nhslot.hl, .nhact.live .nhslot[data-act="heal"], .nhsub .big button[data-act="heal"] { background: #2f9e55; }
.nhsub .big button[data-act="special"]:disabled { background: #eeb3b5; }
.nhsub .big button[data-act="heal"]:disabled { background: #a5d4b4; }
.nhhint { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); margin: 0; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: #1c2340e6; border-radius: 10px; padding: 4px 8px; z-index: 3; pointer-events: none; }
.nhsub > .panel { margin-top: 2px; }
.nhud.n4 .nhc { padding: 0 2px 1px; gap: 3px; }
.nhud.n4 .nhbox { gap: 1px; padding: 0 2px; height: 32px; }
.nhud.n4 .nhbox em { height: 23px; font-size: 10px; letter-spacing: -.5px; border-width: 1px; padding: 0; }
.nhud.n4 .nhbox.n3 em { font-size: 9px; }
.nhud.n4 .nhbox em.sp { flex-grow: 1.7; font-size: 9.5px; letter-spacing: -.9px; }
.nhud.n4 .nhpbox { padding-right: 4px; }
.nhud.n4 .nhpn { font-size: 10px; }
/* 다음 단계 고르기 (회전 방향·이동 칸 등): 아래 칸 자리에 크림색 칸, 제목 줄은 빼고 설명·버튼만 */
.nhsub > .panel { background: #fdf7ea; border: 2.5px solid #1c2340; border-radius: 16px; box-shadow: inset 0 0 0 3px #f1e4cf; padding: 10px 12px 12px; color: #1c2340; }
.nhsub:not(.nhx) > .panel > h2 { display: none; }
.nhsub.nhx > .panel > h2 { font-size: 15px; margin: 0 0 4px; }
.nhsub > .panel > p:not(.rothint):not(.weirdline) { font-size: 13px; margin: 0 0 6px; }
body.nui .nhsub > .panel > p { font-size: 13px; }
.nhsub .rothint { font-size: 12.5px; margin: 0 0 8px; }
/* 2026-11-11 사용자: 연출 동안(내 차례가 아닐 때) 아래 선택 칸 글자가 작게 왼쪽 위에 붙던 것 → 고를 때 버튼과 같은 크기로 가운데, 굵게 */
.nhact .nhslot { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; line-height: 1.1; font-weight: 800; white-space: nowrap; }
/* 2026-11-11 사용자: 위 체력 막대는 숫자 뒤까지 (가득 차면 숫자 뒤도 꽉 참). 숫자는 막대 위에 겹쳐 오른쪽 끝 */
.nhud .nhpbox { position: relative; padding: 3px; }
.nhud .nhpn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); z-index: 2; min-width: 0; pointer-events: none;
  text-shadow: 1px 0 0 #2b2a40, -1px 0 0 #2b2a40, 0 1px 0 #2b2a40, 0 -1px 0 #2b2a40, 1px 1px 0 #2b2a40, -1px -1px 0 #2b2a40, 1px -1px 0 #2b2a40, -1px 1px 0 #2b2a40; }
.nhud.n4 .nhpbox { padding-right: 3px; } .nhud.n4 .nhpn { right: 5px; }
/* 2026-11-11 사용자: 특수능력 "한 번 더 누르면 사용" 안내는 굵은 흰 글씨 (검고 가늘어 보였음) */
.nhhint { font-weight: 800; }
.rothint.abhint { color: #fff; font-weight: 800; background: #1c2340e6; border-radius: 10px; padding: 6px 10px; }
.nhsub .rothint.abhint { margin: 0 0 8px; }
/* ---- 미션 창 개편 (2026-11-08 사용자 그림): 로비가 흐려지며 창이 튀어나옴, 이모티콘 없이 ---- */
.msnbg { background: rgba(8, 14, 38, .38); -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9); padding: 12px; animation: msnbgin .28s ease-out both; }
.msnbg.again { animation: none; }
.msnbg.out { animation: msnbgout .22s ease-in both; }
@keyframes msnbgin { from { background: rgba(8, 14, 38, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
@keyframes msnbgout { to { background: rgba(8, 14, 38, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.msn { position: relative; width: min(380px, 94vw); max-height: 92vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; filter: drop-shadow(0 10px 30px #000a);
  animation: msnpop .42s cubic-bezier(.2, 1.3, .4, 1) both; transform-origin: 50% 60%; color: #e6f1ff; }
.msn::-webkit-scrollbar { display: none; }
.msnbg.again .msn { animation: none; }
.msnbg.out .msn { animation: msnpopout .2s ease-in both; }
@keyframes msnpop { 0% { opacity: 0; transform: scale(.72) translateY(26px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes msnpopout { to { opacity: 0; transform: scale(.9) translateY(12px); } }
.msnart { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none; }
.msnrows { display: grid; gap: 7px; padding: 4px 5.6% 6px 4.9%; background: center top / 100% auto repeat-y; }
.msnrows.in { background-image: var(--hud-mFillIn); padding-top: 2px; }
.msnrows.out { background-image: var(--hud-mFillOut); padding: 6px 5.6% 8px 5.2%; }
.msnrows[hidden] { display: none; }
.msr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; align-items: center; aspect-ratio: 876 / 142; box-sizing: border-box;
  padding: 0 4.5% 0 5%; background: var(--hud-mRow) center / 100% 100% no-repeat; animation: msrin .36s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.12s + var(--k, 0) * .05s); }
.msnbg.again .msr { animation: none; }
@keyframes msrin { from { opacity: 0; transform: translateX(18px); } }
.msrt { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; align-self: end; }
.msrt b { font-size: 13.5px; font-weight: 800; color: #f2f8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: -.2px; }
.msrt em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #ffd36b; white-space: nowrap; }
.msrt small { margin-left: auto; flex: none; font-size: 11px; font-weight: 800; color: #8fb8ea; letter-spacing: .3px; }
.msrbar { grid-column: 1; grid-row: 2; align-self: start; height: 6px; border-radius: 3px; background: #0a1534; box-shadow: inset 0 0 0 1px #2e5aa6; overflow: hidden; }
.msrbar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3b8cff, #6fe0ff); box-shadow: 0 0 6px #5cc8ff; }
.msrbtn, .msrgot { grid-column: 2; grid-row: 1 / 3; }
.msrbtn { display: flex; align-items: center; gap: 4px; min-width: 64px; justify-content: center; height: 32px; padding: 0 10px; border-radius: 8px; border: 1.5px solid #3e6fc4; background: #0d1b40; color: #7f9fcc; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; }
.msrbtn .coinico { width: 16px; height: 16px; }
.msrbtn:disabled { cursor: default; opacity: .75; }
.msrbtn:disabled .coinico { filter: grayscale(.7) brightness(.8); }
.msr.done .msrbtn { background: linear-gradient(#6fe0ff, #2f8cff); color: #071436; border-color: #c9f3ff; box-shadow: 0 0 12px #5cc8ffaa; animation: msrglow 1.6s ease-in-out infinite; }
@keyframes msrglow { 50% { filter: brightness(1.18); } }
.msr.done .msrbtn:active { transform: translateY(1px); }
.msrgot { font-size: 12px; font-weight: 800; color: #6f8fbf; min-width: 64px; text-align: center; }
.msr.got { opacity: .55; }
.msr.got .msrbar > i { background: #4d6fa8; box-shadow: none; }
.msnote, .msnsub { margin: 4px 2px; font-size: 12px; color: #8fb8ea; }
.msnsub { font-weight: 800; letter-spacing: .5px; margin-top: 8px; color: #a9cdf6; }
.msntab { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.msntab:active .msnart { filter: brightness(1.15); }
.msntab.on .msnart { filter: brightness(1.12) saturate(1.1); }
.msnclose { align-self: center; margin: 10px 0 2px; min-width: 120px; padding: 8px 22px; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 2px; color: #dff2ff; background: #0d1b40cc; border: 1.5px solid #5cc8ff; box-shadow: 0 0 10px #5cc8ff66; cursor: pointer; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
@media (prefers-reduced-motion: reduce) { .msnbg, .msn, .msr, .msr.done .msrbtn { animation: none !important; } }
/* 2026-11-08 사용자: 지역 전장 (js/arena.js, 그림 js/arena-art.js 14×8). 칸 = --az 아틀라스 위치. 벽(좁아진) 칸 = 꺼진 빈 곳 + 남은 땅 가장자리 절벽 조각 */
.board.az { background: linear-gradient(180deg, var(--azA), var(--azB)); border-color: var(--azE); }
.battlewrap.final .board.az { background: linear-gradient(180deg, var(--azA), var(--azB)); border-color: #c9a24a; }
.board.az .bc { border-color: transparent !important; }
.board.az.azgrid .bc.azt { border-color: #ffffff2e !important; } /* 2026-11-10 사용자: 고르는 동안만 흐린 격자 */
#stage.fxplaying .board.az.azgrid .bc.azt { border-color: transparent !important; }
.board.az > .azfloor { position: absolute; inset: 0; pointer-events: none; background: none 0 0 / 100% 100% no-repeat; } /* 바닥 층: 캔버스 한 장 (arena.js) */
.board.az .bc.pad1::after, .board.az .bc.pad2::after, .board.az .bc.pad3::after, .board.az .bc.pad4::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, #ffffff40 0 34%, transparent 36%); }
.board.az .bc.pad1::after { background-color: #2d6fa37a; } .board.az .bc.pad2::after { background-color: #c8452c7a; }
.board.az .bc.pad3::after { background-color: #2f8a3c7a; } .board.az .bc.pad4::after { background-color: #c98a007a; }
.board.az .bc.wallc { background: none; }
.azp, .azfall { position: absolute; inset: 0 -1px -1px 0; pointer-events: none; background: var(--azurl) var(--az, 0 0) / var(--azs) no-repeat; }
.azfall { background-image: none; background-repeat: no-repeat; }
.azp.flip { transform: scaleX(-1); }
.azp.side { left: auto; right: auto; width: calc(50% + 1px); background-size: var(--azs2); }
.azp.side.sq { background-size: var(--azs); }
.azp.side.r { right: -1px; } .azp.side.l { left: 0; }
.azfall { z-index: 1; }
/* 절벽 그림은 절벽 면만: 땅 쪽은 바닥 층(입술)이 보이게 흐림 (2026-11-09 규칙: 절벽 위와 바닥이 이어지게) */
.azp.front, .azp.corner { -webkit-mask-image: linear-gradient(180deg, transparent 34%, #000 54%); mask-image: linear-gradient(180deg, transparent 34%, #000 54%); }
.azp.side { -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 70%); mask-image: linear-gradient(90deg, #000 20%, transparent 70%); }
.azp.side.r { right: auto; left: 50%; }
.board .bc.wnew .azfall { animation: azfall 1.5s ease-in both; animation-delay: var(--wd, 0ms); }
.board .bc.wnew .azp { animation: azin .5s ease-out both; animation-delay: calc(var(--wd, 0ms) + 1.1s); }
@keyframes azfall { 0% { transform: none; opacity: 1; } 8% { transform: translate(-3%, 0); } 16% { transform: translate(3%, 1%); } 24% { transform: translate(-3%, 0); } 32% { transform: translate(2%, 2%); } 40% { transform: translate(0, 3%); opacity: 1; filter: brightness(1); }
  100% { transform: translate(0, 60%) scale(.7); opacity: 0; filter: brightness(.4); } }
@keyframes azin { from { opacity: 0; } to { opacity: 1; } }
/* 방사능 구름 세이지 라임 3종 (2026-11-09 사용자 그림·명세, js/rad-tiles.js + ui.js radArtHtml). 꽉 찬 구름·안쪽 가장자리·직선 테두리.
   진하기는 묶음 전체에 한 번 (--radA, 사용자 2026-11-09 60%) → 겹친 곳도 같은 투명도. 예전 칸 색·경계선은 이 그림이 있을 때 안 씀. 흐르는 구름 그림자는 그대로 */
.board .radlayer .radc.rt { background: none; animation: none; opacity: 0; }
.board .radlayer:has(.radart) .rsafe { display: none; }
.board .radlayer .radart { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: var(--radA, .6); }
.board .radlayer .radart i { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.board .radlayer .radart .red { background-size: 100% auto; background-position: 50% 0; }
.board .radlayer .radart .rco, .board .radlayer .radart .red { rotate: var(--rr, 0deg); }
.board .radlayer .radart .rfi.rnew { animation: radslide 1.3s cubic-bezier(.2, .7, .3, 1) both; animation-delay: var(--rd, 0ms); }
.board .radlayer .radart .rco.rnew, .board .radlayer .radart .red.rnew { animation: radedgein .6s ease-out both; animation-delay: var(--rd, 0ms); }
@keyframes radslide { from { opacity: 0; translate: var(--sx, 0) var(--sy, 0); } 55% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes radedgein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .board .radlayer .radart i { animation: none !important; } }
.board .radlayer.rhold .radart { animation: radholdA .8s ease-out both; animation-delay: var(--rdl, 0ms); } /* 다키혼 산이 떨어지는 동안 기다림 */
@keyframes radholdA { from { opacity: 0; } to { opacity: var(--radA, .6); } }

/* 성장 카드 크기 똑같이 (2026-11-09 사용자): 카드 아래 빈칸 없이 카드가 자리를 꽉 채움 (위 아이콘 · 가운데 효과 · 아래 재료),
   네 장소 모든 카드 같은 크기, 손그림 카드 틀은 게임 카드가 덮어서 반듯한 네모로. 수치는 ui.js growCardGeo (그림 칸 단위) */
.gboard.nui .grid { grid-auto-rows: 1fr; }
.region.art2 .cards { flex: 1; position: relative; left: calc((var(--cx) - var(--gw) / 2) * var(--u)); margin: calc(var(--ct) * var(--u)) 0 calc(var(--cb) * var(--u)); grid-template-columns: repeat(3, calc(var(--cw) * var(--u))); justify-content: center; gap: calc(var(--cg) * var(--u)); min-height: calc(var(--cmh) * var(--u)); }
.region.art2 .card { border: calc(5 * var(--u)) solid #363b33; border-radius: calc(16 * var(--u)); box-shadow: inset 0 0 0 1px #e6dccd, 0 calc(3 * var(--u)) 0 #0000002e; padding: calc(10 * var(--u)) calc(6 * var(--u)) calc(7 * var(--u)); justify-content: flex-start; gap: 0; }
.region.art2 .card .effect { flex: 1; justify-content: flex-start; gap: 0; }
.region.art2 .card .cic { line-height: 1; }
.region.art2 .card .cic .sico { width: clamp(28px, calc(92 * var(--u)), 54px); height: clamp(28px, calc(92 * var(--u)), 54px); }
.region.art2 .card .cic.two .sico { width: clamp(20px, calc(66 * var(--u)), 40px); height: clamp(20px, calc(66 * var(--u)), 40px); }
.region.art2 .card .ctx { flex: 1; justify-content: center; padding: 3px 0; font-size: clamp(11.5px, calc(37 * var(--u)), 17px); }
.region.art2 .card .ctx .or { font-size: clamp(8.5px, calc(27 * var(--u)), 12px); }
.region.art2 .card .reward { margin-top: 0; border-radius: calc(12 * var(--u)); font-size: clamp(8.5px, calc(27 * var(--u)), 13px); }
.region.art2 .card .reward::before { font-size: clamp(7.5px, calc(23 * var(--u)), 11px); }
/* 성장 장소 새 판 (2026-11-09 사용자 그림): 카드 자리 없는 판, 이름판은 따로 위 가운데 (ui.js GROW_GEO). 판 가로 = 칸 가로, 가운데 띠만 세로로 늘어남 */
.region.art2.plate .rh { left: calc(50% - var(--plw) * var(--u) / 2); width: calc(var(--plw) * var(--u)); top: calc(-2 * var(--u)); height: calc(var(--plh) * var(--u)); background: var(--gplate) center / 100% 100% no-repeat; filter: drop-shadow(0 calc(4 * var(--u)) 0 #0000002e); }
/* 이름판 그림이 아직 없는 장소 (정글: 사용자가 다시 그려 줄 예정): 글자 이름표 */
.region.art2:not(.plate) .rh { left: 34%; width: 32%; top: calc(18 * var(--u)); height: auto; background: #fffaf1; border: 2px solid #2a2320; border-radius: 999px; padding: 1px 0; text-align: center; }
.region.art2:not(.plate) .rh > .rn { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 13px; font-weight: 900; color: #2a2320; }
/* 넓은 화면(패드): 판 그림은 가로 300px 크기까지만 키우고, 남는 가로는 판 가운데만 옆으로 늘림 (네 귀퉁이·테두리는 그대로) → 카드가 세로로 너무 길어지지 않게.
   --ua = 판 그림 크기 단위 (폰에서는 --u 와 같음). 이름판·카드 위아래 여백·옆 여백도 이 단위 */
.region.art2 { --ua: calc(min(100cqw, 300px) / var(--gw)); }
.region.art2::before { border-width: calc(var(--gt) * var(--ua)) calc(100 * var(--ua)) calc(var(--gb) * var(--ua)); border-image: var(--gart) var(--gt) 100 var(--gb) fill / calc(var(--gt) * var(--ua)) calc(100 * var(--ua)) calc(var(--gb) * var(--ua)) stretch; }
.region.art2 .cards { left: 0; margin: calc(var(--ct) * var(--ua)) 0 calc(var(--cb) * var(--ua)); padding: 0 calc(var(--cside) * var(--ua)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--cg) * var(--ua)); min-height: calc(var(--cmh) * var(--ua)); }
.region.art2 .rscene { height: calc(var(--sy) * var(--ua)); }
.region.art2.plate .rh { left: calc(50% - var(--plw) * var(--ua) / 2); width: calc(var(--plw) * var(--ua)); top: calc(-2 * var(--ua)); height: calc(var(--plh) * var(--ua)); }
.region.art2:not(.plate) .rh { top: calc(18 * var(--ua)); }

/* 레이드 차례 표시 (2026-11-09 사용자 "누구 차례인지 헷갈림"): 몬스터 번호(왼쪽 위부터 1~4), 지금 조종하는 몬스터 빛나는 테두리 + 차례가 올 때 한 번 크게 번쩍 */
.unit .rd-num { position: absolute; right: -3px; top: -3px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font: 900 10px/1 var(--font); font-style: normal; color: #fff; background: var(--p1); border: 1.5px solid #fff; box-shadow: 0 1px 2px #0006; z-index: 7; pointer-events: none; }
.unit.p2 .rd-num { background: var(--p2); } .unit.p3 .rd-num { background: var(--p3); } .unit.p4 .rd-num { background: var(--p4); }
.unit.rd-ctl { z-index: 5; }
.unit.rd-ctl > :first-child { animation: rdGlow 1.3s ease-in-out infinite; }
.unit.rd-ctl.rd-ping > :first-child { animation: rdPing .42s ease-in-out 3, rdGlow 1.3s ease-in-out 1.26s infinite; }
.unit.rd-ctl .rd-num { background: #ffd84a; color: #3b2a5c; border-color: #fff; transform: scale(1.2); }
@keyframes rdGlow { 0%, 100% { filter: drop-shadow(0 0 2px #ffd84a) drop-shadow(0 0 5px #ffd84a) drop-shadow(0 0 5px #ffd84a); } 50% { filter: drop-shadow(0 0 3px #fff3a0) drop-shadow(0 0 10px #ffd84a) drop-shadow(0 0 10px #ffb800); } }
.unit.rd-ctl:not(.bigu)::before { content: ''; position: absolute; inset: -3px; border: 3px solid #ffd84a; border-radius: 10px; box-shadow: 0 0 10px 2px #ffd84acc, inset 0 0 8px #ffd84a99; pointer-events: none; z-index: -1; animation: rdRing 1.3s ease-in-out infinite; }
@keyframes rdRing { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes rdPing { 0%, 100% { filter: drop-shadow(0 0 3px #ffd84a) drop-shadow(0 0 6px #ffd84a); transform: scale(1); } 50% { filter: brightness(1.35) drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #ffd84a); transform: scale(1.12); } }
.ndie.rdmine .ndnm { color: #fff; background: var(--pc); border-radius: 6px; padding: 0 6px; }
.ndie.me.rdmine .ndface { box-shadow: 0 0 0 3px #ffd84a, 0 0 10px 2px #ffd84a; }
.nhpdot { position: relative; }
.nhpdot .rd-hn { position: absolute; left: -4px; top: -4px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; font: 900 9px/1 var(--font); font-style: normal; color: #fff; background: var(--pc); border: 1.5px solid #fff; }
.myturn.rdturn { display: flex; align-items: center; gap: 8px; font-size: 19px !important; }
.myturn.rdturn .rdtn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #ffd84a; color: #3b2a5c; font-size: 16px; }
.myturn.rdturn svg { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .unit.rd-ctl > :first-child, .unit.rd-ctl.rd-ping > :first-child { animation: none; filter: drop-shadow(0 0 3px #ffd84a) drop-shadow(0 0 8px #ffd84a) drop-shadow(0 0 8px #ffb800); } .unit.rd-ctl:not(.bigu)::before { animation: none; opacity: 1; } }

/* ---- 스토리 튜토리얼 배틀 (2026-11-11 사용자): 배틀 아래쪽 큰 말풍선 (전장 폭), 주사위 행동표 (흑백 화면) ---- */
.sb-ov { position: fixed; inset: 0; z-index: 4000; cursor: pointer; }
/* 2026-11-12 사용자: 스토리 대화 중에는 뒤에 로비를 깔지 않음 (검은 화면). 대화 화면·흰 화면만 보임 */
body.st-blank { background: #000 !important; }
body.st-blank > *:not(#st-root):not(.st-white):not(#pvb):not(#pvp):not(script):not(style) { visibility: hidden !important; }
.sb-bub { position: fixed; left: 4%; width: 92%; top: 62%; z-index: 4001; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px 10px; background: #fffdf5; border: 3px solid #1c2340; border-radius: 16px; box-shadow: 0 6px 0 rgba(28, 35, 64, .25); color: #1c2340; animation: sbpop .28s cubic-bezier(.2, 1.4, .4, 1) both; pointer-events: none; }
.sb-bub::before { content: ''; position: absolute; left: var(--tx, 26px); top: -11px; width: 16px; height: 16px; background: #fffdf5; border-left: 3px solid #1c2340; border-top: 3px solid #1c2340; transform: rotate(45deg); }
.sb-mini { position: fixed; z-index: 3990; max-width: 70vw; box-sizing: border-box; padding: 6px 11px 7px; background: #fffdf5; border: 2.5px solid #1c2340; border-radius: 13px; box-shadow: 0 4px 0 rgba(28, 35, 64, .22); color: #1c2340; font-size: 14px; font-weight: 800; line-height: 1.3; white-space: nowrap; pointer-events: none; animation: sbpop .28s cubic-bezier(.2, 1.4, .4, 1) both; }
.sb-mini::before { content: ''; position: absolute; left: var(--tx, 20px); bottom: -8.5px; width: 12px; height: 12px; background: #fffdf5; border-right: 2.5px solid #1c2340; border-bottom: 2.5px solid #1c2340; transform: rotate(45deg); }
.sb-mini.dn::before { bottom: auto; top: -8.5px; border: 0; border-left: 2.5px solid #1c2340; border-top: 2.5px solid #1c2340; }
.sb-bub .sb-face { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #e9e4f5; border: 2px solid #1c2340; display: grid; place-items: center; overflow: hidden; }
.sb-bub .sb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; font-weight: 700; word-break: keep-all; }
.sb-bub .sb-txt b { font-size: 12px; color: #7a5cc8; }
.sb-bub .sb-next { position: absolute; right: 12px; bottom: 5px; font-style: normal; font-size: 11px; color: #7a5cc8; animation: sbblink 1.1s infinite; }
@keyframes sbpop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes sbblink { 50% { opacity: .2; } }
.sb-table { position: fixed; inset: 0; z-index: 4002; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(22, 22, 24, .94); backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); animation: sbfade .35s both; }
.sb-table.out { animation: sbfade .35s reverse both; }
@keyframes sbfade { from { opacity: 0; } }
/* 2026-11-12 사용자: 흑백으로 화면을 꽉 채우고 '주사위 눈 ▶ 행동 또는 행동'으로 크게 (행동이 같은 눈은 한 줄) */
.sb-tb { display: grid; gap: 12px; width: min(100%, 360px); box-sizing: border-box; padding: 18px 16px 20px; background: #f4f4f4; border: 3px solid #111; border-radius: 18px; filter: grayscale(1); }
.sb-tt { display: block; text-align: center; font-size: 16px; font-weight: 900; color: #111; padding-bottom: 10px; border-bottom: 2px dashed #9a9a9a; word-break: keep-all; }
.sb-tr { display: grid; grid-template-columns: 112px 14px 1fr; align-items: center; gap: 10px; }
.sb-td { display: flex; justify-content: flex-end; gap: 4px; }
.sb-tr .ndface { flex: none; width: 34px; height: 34px; padding: 4px; box-sizing: border-box; border-color: #111; }
.sb-tr .ndface i.on { background: #111; }
.sb-tar { width: 0; height: 0; border-left: 12px solid #111; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.sb-ta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sb-ta u { text-decoration: none; font-size: 12px; font-weight: 700; color: #6b6b6b; flex: none; }
.sb-ta em { font-style: normal; font-weight: 900; font-size: 16px; color: #fff; background: #1d1d1f; border: 2px solid #111; border-radius: 10px; padding: 6px 9px; text-align: center; white-space: nowrap; }
/* 나무 상자는 정면 표시(흰 세모) 없음 (2026-11-12 사용자) */
.unit.nofront svg.ring > path { display: none; }
.nhhint.sbh { position: static; grid-column: 1 / -1; font-size: 13px; padding: 6px 10px; line-height: 1.4; word-break: keep-all; }
/* 새 로비 스토리 파트너 (2026-11-11 사용자): 가운데 위에 서 있는 파트너 몬스터 */
.bc-psh { position: absolute; aspect-ratio: 5 / 1; border-radius: 50%; background: #3a2a1466; pointer-events: none; z-index: 1; }
.bc-partner { animation: bcPartner 3.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bcPartner { 50% { transform: scale(1.02, .975); } }
@media (prefers-reduced-motion: reduce) { .bc-partner { animation: none; } }
/* 요정 가루 (구바라 계열, 2026-11-11 사용자 그림 2번): 효과 동안 몸 가운데에 둥둥 */
.unit .fairyic { position: absolute; width: 62%; height: auto; max-width: none; transform: translate(-50%, -50%); z-index: 9; pointer-events: none; opacity: .92; animation: fairyFloat 2.4s ease-in-out infinite; transition: opacity .35s; }
@keyframes fairyFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -62%); } }
@media (prefers-reduced-motion: reduce) { .unit .fairyic { animation: none; } }
.fxplaying .unit .fairyic.hnew { opacity: 0; }

/* ===== 배틀 선택 창 (2026-11-12 사용자 그림): 짙은 남색 + 파란 네온 틀, 모서리 깎인 모양 ===== */
:root { --bs-bg: #071a46; --bs-bg2: #0b2a6c; --bs-edge: #3d9dff; --bs-edge2: #9fd6ff; --bs-glow: rgba(46, 140, 255, .85); --bs-txt: #eaf4ff; --bs-sub: #9cc7ff; --bs-yel: #ffcb3d; }
.bsel-bg { align-items: center; background: #020a24c4; padding: 16px; overflow-y: auto; }
.hsheet.bsel { position: relative; isolation: isolate; width: 100%; max-width: 420px; max-height: none; overflow: visible; margin: auto; padding: 14px 18px 18px; border-radius: 0; background: none; border: 0; box-shadow: none; outline: 0; color: var(--bs-txt); animation: bspop .22s ease-out;
  --oct: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  filter: drop-shadow(0 0 7px var(--bs-glow)); }
.hsheet.bsel::before, .hsheet.bsel::after { content: ''; position: absolute; z-index: -1; clip-path: var(--oct); }
.hsheet.bsel::before { inset: 0; background: linear-gradient(160deg, var(--bs-edge2), var(--bs-edge) 30%, #1f6fe0 70%, var(--bs-edge2)); }
.hsheet.bsel::after { inset: 2px; background: radial-gradient(120% 60% at 50% 0%, #123a8a 0%, transparent 70%), repeating-linear-gradient(0deg, rgba(120, 180, 255, .05) 0 1px, transparent 1px 4px), linear-gradient(180deg, var(--bs-bg2), var(--bs-bg) 60%, #061537);
  clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 21px), calc(100% - 21px) 100%, 21px 100%, 0 calc(100% - 21px), 0 21px); }
@keyframes bspop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hsheet.bsel { animation: none; } }
.bsel .bs-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 2px 4px 10px; margin-bottom: 10px; border-bottom: 1.5px solid #2f86f0; }
.bsel .bs-head b { font-size: 30px; font-weight: 900; line-height: 1.1; font-style: italic; letter-spacing: -.5px; color: #fff; text-shadow: 0 0 10px #3a9bff, 0 2px 0 #0a2a78; transform: skewX(-6deg); }
.bsel .bs-head small { font-size: 10.5px; letter-spacing: 5px; font-style: italic; color: var(--bs-sub); margin-top: 2px; }
.bsel .bs-head::after { content: ''; position: absolute; right: 26px; top: 14px; width: 54px; height: 10px; background: linear-gradient(115deg, transparent 0 18%, #4aa6ff 18% 44%, transparent 44% 58%, #4aa6ff 58% 84%, transparent 84%); opacity: .8; }
.bsel .bs-head::before { content: '✦'; position: absolute; right: 2px; top: 6px; font-size: 16px; color: #bfe3ff; text-shadow: 0 0 8px #4aa6ff; }
.hsheet.bsel .modecard.bs { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; display: flex; flex-direction: column; gap: 12px; text-align: center; }
/* 위 칸: 아이콘 + 이름 */
.bsel .bs-top { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; text-align: left; --c: 12px; }
.bsel .bs-top::before, .bsel .bs-top::after, :is(.bsel .bsx, .nmod .btn)::before, :is(.bsel .bsx, .nmod .btn)::after, .bsel .bs-ico::before, .bsel .bs-ico::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.bsel .bs-top::before { inset: 0; background: #2a74d6; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.bsel .bs-top::after { inset: 1.5px; background: linear-gradient(100deg, #0e2f78, #0a2259 60%, #0b265f); clip-path: polygon(calc(var(--c) - .6px) 0, 100% 0, 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, 0 100%, 0 calc(var(--c) - .6px)); }
.bsel .bs-ico { position: relative; isolation: isolate; flex: 0 0 auto; width: 66px; height: 66px; display: grid; place-items: center; }
.bsel .bs-ico::before { inset: 0; background: #4fa8ff; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); filter: drop-shadow(0 0 4px var(--bs-glow)); }
.bsel .bs-ico::after { inset: 2px; background: radial-gradient(circle at 50% 40%, #1a4ba8, #0a1f55 75%); clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.bsel .bs-ico .rico, .bsel .bs-ico .hico { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(140, 200, 255, .55)); }
.bsel .bs-ico .rico.guest { opacity: .45; filter: grayscale(.6); }
.bsel .bs-ico .hf2 { display: flex; align-items: center; } .bsel .bs-ico .hf2 svg { width: 28px; height: 28px; margin: 0 -3px; }
.bsel .bs-tt { flex: 1; min-width: 0; }
.bsel .bs-tt b { display: block; font-size: 22px; font-weight: 900; color: #fff !important; padding-bottom: 6px; border-bottom: 1.5px solid; border-image: linear-gradient(90deg, #4fa8ff, rgba(79, 168, 255, .1)) 1; }
.bsel .bs-sub { margin: 6px 0 0; font-size: 13.5px; color: #c7defa; }
.bsel .bs-sub em { font-style: normal; font-weight: 900; color: var(--bs-yel); text-shadow: 0 0 6px rgba(255, 190, 40, .45); }
/* 설명 (양옆 선) */
.bsel .bs-desc { display: flex; align-items: center; gap: 10px; margin: 2px 0; font-size: 13.5px; line-height: 1.45; color: #b5d4ff; }
.bsel .bs-desc::before, .bsel .bs-desc::after { content: ''; flex: 1; height: 1.5px; min-width: 14px; background: linear-gradient(90deg, transparent, #3d8fea); }
.bsel .bs-desc::after { transform: scaleX(-1); }
/* 네온 버튼 공통 (.bsx): 모서리 깎인 틀 + 빛 */
:is(.bsel .bsx, .nmod .btn) { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none; color: #f2f8ff; font-family: inherit; font-weight: 900; cursor: pointer; --c: 12px; --edge: #2f80e8; --fill: linear-gradient(160deg, #0f3383, #0a2463); filter: drop-shadow(0 0 3px rgba(46, 140, 255, .5)); transition: transform .08s, filter .15s; }
:is(.bsel .bsx, .nmod .btn)::before { inset: 0; background: var(--edge); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
:is(.bsel .bsx, .nmod .btn)::after { inset: 1.5px; background: repeating-linear-gradient(120deg, transparent 0 5px, rgba(95, 170, 255, .5) 5px 9px) right calc(var(--c) + 4px) bottom 5px / 30px 5px no-repeat, var(--fill); clip-path: polygon(calc(var(--c) - .6px) 0, calc(100% - var(--c) + .6px) 0, 100% calc(var(--c) - .6px), 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, calc(var(--c) - .6px) 100%, 0 calc(100% - var(--c) + .6px), 0 calc(var(--c) - .6px)); }
:is(.bsel .bsx, .nmod .btn):active { transform: scale(.97); }
:is(.bsel .bsx, .nmod .btn)[disabled] { opacity: .55; }
:is(.bsel .bsx, .nmod .btn).on, .bsel .bs-go { --edge: linear-gradient(160deg, #d9f0ff, #5cb4ff 35%, #2b84f0 70%, #bfe4ff); --fill: linear-gradient(118deg, rgba(255, 255, 255, .22) 0 16%, transparent 16% 22%, rgba(255, 255, 255, .08) 22% 26%, transparent 26%), linear-gradient(170deg, #2a6be0, #1546b0 55%, #0f3790); filter: drop-shadow(0 0 7px var(--bs-glow)); }
.bsel .bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bsel .bs-kind { min-height: 66px; padding: 6px 8px; font-size: 22px; line-height: 1.15; }
.bsel .bs-kind:not(.on) { color: #cfe3ff; }
.bsel .bs-go { min-height: 60px; margin-top: 2px; font-size: 27px; font-style: italic; letter-spacing: 1px; --c: 16px; text-shadow: 0 0 10px rgba(160, 215, 255, .9), 0 2px 0 #0a2a78; }
.bsel .bs-cancel { display: block; width: 62%; min-height: 40px; margin: 14px auto 0; font-size: 16px; color: #d9e8ff; --c: 10px; --edge: #2f78d8; --fill: linear-gradient(180deg, #0b2560, #081c4b); }
.bsel .bs-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -2px 0 0; }
.bsel .bs-seats span { flex: 0 1 auto; padding: 3px 10px; border-radius: 0; background: #0a2259; border: 1px solid #2a6fd0; color: #cfe3ff; font-size: 12px; }
.bsel .bs-join { display: flex; gap: 10px; margin: 0; }
.bsel .bs-join input { flex: 1; min-width: 0; height: 46px; border-radius: 0; border: 1.5px solid #2f80e8; background: #061636; color: #fff; font-size: 18px; text-align: center; letter-spacing: 4px; box-shadow: inset 0 0 10px rgba(46, 140, 255, .25), 0 0 5px rgba(46, 140, 255, .45); }
.bsel .bs-join input::placeholder { color: #6f95c8; letter-spacing: 1px; }
.bsel .bs-join .bsx { flex: 0 0 auto; min-height: 46px; padding: 0 18px; font-size: 16px; }
@media (max-height: 680px) { .hsheet.bsel { padding: 10px 14px 14px; } .bsel .bs-head b { font-size: 25px; } .bsel .bs-kind { min-height: 54px; font-size: 19px; } .bsel .bs-go { min-height: 52px; font-size: 23px; } .bsel .modecard.bs { gap: 9px; } .bsel .bs-ico { width: 56px; height: 56px; } }

/* ===== 파란 네온 창 (패치노트·친구 목록, 2026-11-12 사용자: 배틀 선택 창처럼) ===== */
.modal-backdrop:has(> .nmod) { background: #020a24c4; }
.modal.nmod { position: relative; isolation: isolate; overflow: visible; max-height: none; background: none; border-radius: 0; box-shadow: none; color: var(--bs-txt); padding: 14px 18px 18px; filter: drop-shadow(0 0 7px var(--bs-glow)); display: flex; flex-direction: column; }
.modal.nmod::before, .modal.nmod::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.modal.nmod::before { inset: 0; background: linear-gradient(160deg, var(--bs-edge2), var(--bs-edge) 30%, #1f6fe0 70%, var(--bs-edge2)); clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px); }
.modal.nmod::after { inset: 2px; background: radial-gradient(120% 40% at 50% 0%, #123a8a 0%, transparent 70%), repeating-linear-gradient(0deg, rgba(120, 180, 255, .05) 0 1px, transparent 1px 4px), linear-gradient(180deg, var(--bs-bg2), var(--bs-bg) 50%, #061537); clip-path: polygon(21px 0, calc(100% - 21px) 0, 100% 21px, 100% calc(100% - 21px), calc(100% - 21px) 100%, 21px 100%, 0 calc(100% - 21px), 0 21px); }
.modal.nmod > h2 { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 10px; padding: 2px 4px 10px; border-bottom: 1.5px solid #2f86f0; font-size: 28px; font-weight: 900; font-style: italic; line-height: 1.1; letter-spacing: -.5px; color: #fff; text-align: left; text-shadow: 0 0 10px #3a9bff, 0 2px 0 #0a2a78; }
.modal.nmod > h2::after { content: attr(data-en); font-size: 10.5px; font-weight: 700; letter-spacing: 5px; color: var(--bs-sub); text-shadow: none; margin-top: 3px; }
.modal.nmod > h2::before { content: '✦'; position: absolute; right: 2px; top: 4px; font-size: 16px; font-style: normal; color: #bfe3ff; text-shadow: 0 0 8px #4aa6ff; }
.nmod .btn { min-height: 44px; padding: 6px 14px; font-size: 15px; color: #e3efff; }
.nmod .btn.alt:not(.on) { --edge: #2f78d8; --fill: linear-gradient(180deg, #0b2560, #081c4b); color: #cfe0ff; }
.nmod .btn:not(.alt) { --edge: linear-gradient(160deg, #d9f0ff, #5cb4ff 35%, #2b84f0 70%, #bfe4ff); --fill: linear-gradient(118deg, rgba(255, 255, 255, .18) 0 14%, transparent 14%), linear-gradient(170deg, #2a6be0, #1546b0 55%, #0f3790); }
.nmod .close { width: 62%; align-self: center; margin-top: 14px; }
.nmod .elnote, .nmod .pnver { color: #8fb6ea; }
/* 패치노트 목록 */
.pnlistpop .nmod .pnver { text-align: left; margin: 0 0 4px; font-size: 13px; }
.pnlistpop .nmod .choices { max-height: min(58vh, 520px); overflow-y: auto; padding: 4px 4px 6px; margin: 4px -4px 0; gap: 9px; scrollbar-width: thin; scrollbar-color: #2f80e8 transparent; }
.pnlistpop .nmod .choices .btn { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 6px 22px; --c: 10px; filter: drop-shadow(0 0 2px rgba(46, 140, 255, .45)); }
.pnlistpop .nmod .choices .btn:first-child { --edge: linear-gradient(160deg, #d9f0ff, #5cb4ff 35%, #2b84f0 70%, #bfe4ff); --fill: linear-gradient(118deg, rgba(255, 255, 255, .18) 0 14%, transparent 14%), linear-gradient(170deg, #2a6be0, #1546b0 55%, #0f3790); filter: drop-shadow(0 0 6px var(--bs-glow)); }
.pnlistpop .nmod .choices .btn:not(:first-child) { --edge: #2f78d8; --fill: linear-gradient(160deg, #0f3383, #0a2463); }
.pnl-v { font-size: 16px; font-weight: 900; color: #fff; }
.pnl-d { font-size: 13px; color: var(--bs-yel); font-weight: 800; letter-spacing: .3px; }
.pnlistpop .nmod .choices .btn:not(:first-child) .pnl-d { color: #9cc7ff; }
/* 패치 노트 내용 */
.pnpop .nmod .pnote { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #2f80e8 transparent; color: #dbe9ff; }
.pnpop .nmod .pnver { text-align: left; font-size: 13px; color: var(--bs-yel); }
.nmod .pnsec { position: relative; background: linear-gradient(100deg, rgba(20, 70, 170, .45), rgba(10, 34, 89, .55)); border: 1px solid #2a6fd0; border-left: 3px solid #5cb4ff; border-radius: 0; }
.nmod .pnsec h3 { color: #fff; }
.nmod .pnsec h4 { color: #bcd8ff; }
.nmod .pnsec h5.up { color: #6be39a; } .nmod .pnsec h5.down { color: #ff8a73; } .nmod .pnsec h5.chg { color: #c3b0ff; }
.nmod .pnlist ul { color: #a9c6ee; }
.nmod .pnlist b { color: #fff; }
.nmod .pnlist li::marker { color: #5cb4ff; }
/* 친구 목록 */
.friendm.nmod h3 { margin: 14px 0 7px; font-size: 14px; color: var(--bs-sub); letter-spacing: .5px; }
.friendm.nmod .netjoin { display: flex; gap: 10px; }
.friendm.nmod .netjoin input { height: 46px; border-radius: 0; border: 1.5px solid #2f80e8; background: #061636; color: #fff; text-align: center; box-shadow: inset 0 0 10px rgba(46, 140, 255, .25), 0 0 5px rgba(46, 140, 255, .45); }
.friendm.nmod .netjoin input::placeholder { color: #6f95c8; }
.friendm.nmod .netjoin .btn { flex: 0 0 auto; min-height: 46px; }
.friendm.nmod .frlist { gap: 8px; max-height: 40vh; padding: 3px 4px 4px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: #2f80e8 transparent; }
.friendm.nmod .frrow { position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; padding: 8px 10px 8px 14px; min-height: 52px; --c: 10px; }
.friendm.nmod .frrow::before, .friendm.nmod .frrow::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.friendm.nmod .frrow::before { inset: 0; background: #2a6fd0; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.friendm.nmod .frrow::after { inset: 1.5px; background: linear-gradient(100deg, #10347f, #0a2259 70%); clip-path: polygon(calc(var(--c) - .6px) 0, 100% 0, 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, 0 100%, 0 calc(var(--c) - .6px)); }
.friendm.nmod .frrow > b { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; color: #fff; font-size: 17px; font-weight: 900; min-width: 0; white-space: nowrap; } /* 2026-11-12 사용자: '프로필 ›' 글씨 없이 이름을 길게, 이름을 누르면 프로필 */
.friendm.nmod .frrow > span { flex: 0 0 auto; }
.friendm.nmod .frnick small { color: #7fb0f0; font-size: 12.5px; }
.friendm.nmod .frrow .btn { min-height: 36px; padding: 4px 12px; font-size: 13.5px; --c: 8px; filter: drop-shadow(0 0 2px rgba(46, 140, 255, .5)); }
.friendm.nmod .frmsg { color: var(--bs-yel); }
/* ===== 랭크 대기 화면 (2026-11-12): 배틀 선택 창과 같은 짙은 남색 + 파란 네온. 예전 연보라(2026-10-28) 대신 ===== */
html:has(.mwait) { background: radial-gradient(120% 50% at 50% 0%, #123a8a, transparent 70%) no-repeat, linear-gradient(180deg, #0b2a6c, #071a46 55%, #050f2e) no-repeat; background-color: #050f2e; min-height: 100%; }
html body:has(.mwait) { background: transparent; }
body:has(.mwait) .notice { display: none; }
body:has(.mwait) .app > footer { color: #6f95c8; }
.panel.mwait { background: none; border-color: transparent; color: var(--bs-txt); }
.mwait .mwtop { display: flex; flex-direction: column; align-items: flex-start; max-width: 520px; margin: 4px auto 6px; padding: 0 4px 8px; border-bottom: 1.5px solid #2f86f0; position: relative; }
.mwait .mwtop b { font-size: 28px; font-weight: 900; font-style: italic; line-height: 1.1; color: #fff; text-shadow: 0 0 10px #3a9bff, 0 2px 0 #0a2a78; transform: skewX(-6deg); }
.mwait .mwtop small { font-size: 10.5px; letter-spacing: 5px; font-style: italic; color: var(--bs-sub); margin-top: 2px; }
.mwait .mwtop::after { content: '✦'; position: absolute; right: 4px; top: 6px; font-size: 16px; color: #bfe3ff; text-shadow: 0 0 8px #4aa6ff; }
.mwait .mwhead { max-width: 520px; margin: 0 auto 10px; text-align: left; padding-left: 4px; color: #c7defa; font-size: 14px; }
.mwait .mwhead b { color: var(--bs-yel); }
.mwait .mwgrid { gap: 10px; }
.mwait .mwc { border: 2px solid #3d9dff; border-radius: 0; background: #0a2259; box-shadow: 0 0 8px rgba(46, 140, 255, .6); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.mwait .mwc.me { border-color: #7ee08a; box-shadow: 0 0 10px #7ee08a99; }
.mwait .mwc.ai { border-color: #8f9cff; }
.mwait .mwc.myteam { border-color: #5aa0ff; } .mwait .mwc.foeteam { border-color: #ff6b6b; } .mwait .mwc.me.myteam { border-color: #7ee08a; }
.mwait .mwbig { background: radial-gradient(circle at 50% 45%, #ffffff, #dbe9ff 75%); }
.mwait .mwrow { background: linear-gradient(100deg, #10347f, #0a2259); color: #fff; border-top: 2px solid #3d9dff; }
.mwait .mwc.me .mwrow { border-top-color: #7ee08a; } .mwait .mwc.ai .mwrow { border-top-color: #8f9cff; }
.mwait .mwc.myteam .mwrow { border-top-color: #5aa0ff; } .mwait .mwc.foeteam .mwrow { border-top-color: #ff6b6b; } .mwait .mwc.me.myteam .mwrow { border-top-color: #7ee08a; }
.mwait .mwnick, .mwait .mwtier { color: #fff; }
.mwait .mwnick small { color: #8ff09a; }
.mwait .mwc.mwempty { border: 2px dashed #2f80e8; background: rgba(10, 34, 89, .6); box-shadow: none; clip-path: none; }
.mwait .mwdots { color: #4f8fe0; }
.mwait .mwstat h2 { color: #fff; }
.mwait .mwstat .elnote, .mwait .mwnote { color: #9cc7ff; }
.mwait .mwstat .mleft, .mwait .mleft { color: var(--bs-yel); }
.mwait .mcount { background: rgba(255, 203, 61, .14); border: 1px solid rgba(255, 203, 61, .55); color: #ffe39a; }
.mwait .mcount b { color: var(--bs-yel); }
/* 대기 화면 버튼도 네온 (게임 시작·매칭 취소) */
.mwait .mready, .mwait #btnNetLeave { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none; color: #f2f8ff; font-weight: 900; --c: 10px; --edge: #2f78d8; --fill: linear-gradient(180deg, #0b2560, #081c4b); filter: drop-shadow(0 0 3px rgba(46, 140, 255, .5)); }
.mwait .mready:not(.alt) { --edge: linear-gradient(160deg, #d9f0ff, #5cb4ff 35%, #2b84f0 70%, #bfe4ff); --fill: linear-gradient(118deg, rgba(255, 255, 255, .2) 0 16%, transparent 16%), linear-gradient(170deg, #2a6be0, #1546b0 55%, #0f3790); filter: drop-shadow(0 0 6px var(--bs-glow)); }
.mwait .mready::before, .mwait #btnNetLeave::before, .mwait .mready::after, .mwait #btnNetLeave::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.mwait .mready::before, .mwait #btnNetLeave::before { inset: 0; background: var(--edge); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.mwait .mready::after, .mwait #btnNetLeave::after { inset: 1.5px; background: var(--fill); clip-path: polygon(calc(var(--c) - .6px) 0, calc(100% - var(--c) + .6px) 0, 100% calc(var(--c) - .6px), 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, calc(var(--c) - .6px) 100%, 0 calc(100% - var(--c) + .6px), 0 calc(var(--c) - .6px)); }
.mwait #btnNetLeave { display: block; min-width: 56%; min-height: 42px; margin: 14px auto 0; color: #d9e8ff; }
/* ===== 매칭 중 화면 깔끔하게 (2026-11-12 사용자): 위쪽 코인·프로필 줄과 아래 메뉴 없음, 초상화만 + 아래에 큰 게임 시작·작은 매칭 취소, 한 화면(스크롤 없음) ===== */
body:has(.mwait) .top, body:has(.mwait) .gnav, body:has(.mwait) .scorebar, body:has(.mwait) .timebar, body:has(.mwait) .players { display: none; }
html:has(.mwait), body:has(.mwait) { height: 100%; overflow: hidden; }
body:has(.mwait) .app { height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; padding-top: calc(8px + env(safe-area-inset-top)); }
body:has(.mwait) #stage { flex: 1 1 auto; min-height: 0; display: flex; }
body:has(.mwait) .app > footer { flex: 0 0 auto; margin: 0; padding: 4px 12px 2px; }
.panel.mwait { flex: 1 1 auto; min-height: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px 8px 4px; margin: 0; }
.mwait .mwtop, .mwait .mwhead { width: 100%; flex: 0 0 auto; }
.mwait .mwtop::after { content: none; }
.mwait .mwtime { position: absolute; right: 4px; bottom: 8px; font-size: 13px; color: var(--bs-sub); font-variant-numeric: tabular-nums; }
.mwait .mwtime .mleft { font-size: 15px; }
/* 초상화 칸: 남는 높이 안에서 가장 크게 (2줄이면 높이에 맞춰 줄어듦) */
.mwait .mwgrid { --rows: 2; --gh: calc(100svh - 300px); flex: 0 1 auto; align-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; width: min(100%, 520px, calc(var(--gh) / var(--rows) / 1.02 * 2 + 10px)); margin: auto; }
.mwait .mwgrid.n2 { --rows: 1; }
.mwait .mwgrid .mwc { flex: 0 0 calc(50% - 5px); box-sizing: border-box; }
.mwait .mwc.mwempty { border-style: dashed; }
.mwait .mwbtns { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto; padding: 8px 0 4px; }
.mwait .mwbtns .mready { display: block; width: 100%; min-width: 0; min-height: 62px; margin: 0; font-size: 26px; font-style: italic; letter-spacing: 1px; --c: 16px; text-shadow: 0 0 10px rgba(160, 215, 255, .9), 0 2px 0 #0a2a78; }
.mwait .mwbtns .mready small { font-size: 14px; font-style: normal; letter-spacing: 0; opacity: .85; margin-left: 6px; text-shadow: none; }
.mwait .mwbtns .mready.alt { font-size: 20px; text-shadow: none; }
.mwait .mwbtns .mready.wait { --edge: #2f78d8; --fill: linear-gradient(180deg, #0f2f73, #0a2259); filter: none; color: #7fa3d6; text-shadow: none; opacity: 1; cursor: default; }
.mwait .mwbtns #btnNetLeave { width: 46%; min-width: 0; min-height: 36px; margin: 0; font-size: 14px; --c: 8px; }
@media (max-height: 620px) { .mwait .mwgrid { --gh: calc(100svh - 250px); } .mwait .mwtop b { font-size: 23px; } .mwait .mwbtns .mready { min-height: 52px; font-size: 22px; } .mwait .mwhead { margin-bottom: 4px; } }

/* ---- 친선전 방·레이드 방 (2026-11-12 사용자: 매칭 중 화면처럼 깔끔하게, 아래 메뉴 없이) ---- */
.mwait .mwtop .mwcode { position: absolute; right: 4px; bottom: 7px; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.mwait .mwtop .mwcode small { margin: 0 0 4px; font-size: 10px; letter-spacing: 1px; font-style: normal; color: var(--bs-sub); }
.mwait .mwtop .mwcode b { font-size: 24px; letter-spacing: 4px; margin-right: -4px; font-style: normal; transform: none; color: var(--bs-yel); text-shadow: 0 0 8px rgba(255, 203, 61, .45); user-select: all; -webkit-user-select: all; }
.mwait .mwhead small { color: var(--bs-sub); font-size: 12px; }
.mwait .mwc.hasprof { cursor: pointer; }
.mwait .mwc.off { opacity: .55; }
.mwhost { position: absolute; right: 6px; top: 4px; z-index: 2; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #3a2a00; background: var(--bs-yel); }
.mwoff { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(5, 15, 46, .62); color: #fff; font-size: 13px; font-weight: 900; }
.mwai { color: #4f8fe0; font-size: 18px; font-weight: 900; letter-spacing: 2px; opacity: .75; }
.froom .mwgrid { --gh: calc(100svh - 352px); }
.mwait .mwsub { display: flex; gap: 8px; width: 100%; }
.mwait .mwsub .btn { flex: 1 1 0; min-width: 0; min-height: 38px; margin: 0; padding: 4px 6px; font-size: 14px; position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none; color: #d9e8ff; font-weight: 900; --c: 8px; --edge: #2f78d8; --fill: linear-gradient(180deg, #0b2560, #081c4b); filter: drop-shadow(0 0 3px rgba(46, 140, 255, .5)); }
.mwait .mwsub .btn:disabled { color: #6d8dbd; filter: none; opacity: 1; }
.mwait .mwsub .btn::before, .mwait .mwsub .btn::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.mwait .mwsub .btn::before { inset: 0; background: var(--edge); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.mwait .mwsub .btn::after { inset: 1.5px; background: var(--fill); clip-path: polygon(calc(var(--c) - .6px) 0, calc(100% - var(--c) + .6px) 0, 100% calc(var(--c) - .6px), 100% calc(100% - var(--c) + .6px), calc(100% - var(--c) + .6px) 100%, calc(var(--c) - .6px) 100%, 0 calc(100% - var(--c) + .6px), 0 calc(var(--c) - .6px)); }
@media (max-height: 620px) { .froom .mwgrid { --gh: calc(100svh - 300px); } .mwait .mwsub .btn { min-height: 34px; } }
/* 레이드 방: 사람은 작은 이름표, 가운데에 함께 싸울 카드 4장 (착착 놓임), 그 아래 내 박스 한 줄 */
.mwait.rd-room .rd-who { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-width: 520px; margin: 0 auto 2px; padding: 0 4px; box-sizing: border-box; }
.rd-p { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid #2f78d8; border-radius: 999px; background: rgba(10, 34, 89, .7); color: #dbeaff; font-size: 12px; cursor: pointer; }
.rd-p.me { border-color: #7ee08a; } .rd-p.off { opacity: .45; }
.rd-p small { font-size: 10px; font-weight: 900; color: var(--bs-yel); }
.mwait.rd-room .rd-mid { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; position: relative; z-index: 2; }
.mwait.rd-room .rd-slots { display: flex; justify-content: center; gap: 8px; margin: 0; }
.mwait.rd-room .rd-slot { flex: 0 0 auto; width: calc(300px * var(--ks, .27)); min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #cfe2ff; font: inherit; }
.mwait.rd-room .rd-slots .mcw { --k: var(--ks, .27) !important; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.mwait.rd-room .rd-slot small { display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font-size: 11px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.mwait.rd-room .rd-slot small .dot { width: 7px; height: 7px; }
.mwait.rd-room .rd-blank > i { display: block; width: 100%; height: calc(500px * var(--ks, .27)); box-sizing: border-box; border: 2px dashed #2f80e8; border-radius: 8px; background: rgba(10, 34, 89, .5); }
.mwait.rd-room .rd-why, .mwait.rd-room .rd-ok { margin: 0; padding: 0 6px; font-size: 13px; font-weight: 800; line-height: 1.3; }
.mwait.rd-room .rd-why { color: #ffb9ad; } .mwait.rd-room .rd-ok { color: #8ff09a; }
.rd-slot.rd-deal { animation: rdDeal .46s cubic-bezier(.2, .9, .3, 1.15) backwards; }
@keyframes rdDeal { 0% { transform: translateY(46vh) rotate(-16deg) scale(1.3); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rd-slot.rd-deal { animation: none; } }
.mwait.rd-room .rd-mybox { flex: 0 0 auto; width: 100%; max-width: 520px; margin: 0 auto; border-top: 1.5px solid rgba(47, 134, 240, .55); }
.mwait.rd-room .rd-bl { display: flex; justify-content: space-between; align-items: baseline; margin: 5px 0 0; padding: 0 4px; font-size: 12px; color: var(--bs-sub); }
.mwait.rd-room .rd-bl b { color: #fff; font-size: 13px; }
.mwait.rd-room .rd-boxlist { display: flex; gap: 8px; margin: 0; padding: 12px 4px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.mwait.rd-room .rd-boxlist::-webkit-scrollbar { display: none; }
.mwait.rd-room .rd-boxlist .mcw { --k: var(--kb, .22) !important; }
.mwait.rd-room .rd-cbx { flex: 0 0 auto; border-radius: 8px; }
.mwait.rd-room .rd-cbx.on { box-shadow: 0 0 0 2px var(--bs-yel), 0 0 10px rgba(255, 203, 61, .6); }
.mwait.rd-room .rd-cin { background: var(--bs-yel); color: #3a2a00; }
.mwait.rd-room .mwbtns { padding-top: 4px; gap: 8px; }

/* ---- 뽑기 (js/gacha.js, 2026-11-12 사용자 기획·그림): 상점 버튼 자리에서 열리는 화면. 어두운 밤 언덕 색 ---- */
.gacha { position: fixed; inset: 0; z-index: 45; display: flex; justify-content: center; background: #05070a; color: #f4ead9; --g-line: #303c48; --g-panel: #1a222a; --g-muted: #93a1ae; --g-accent: #ff7d48; font-weight: 700; font-size: 15px; line-height: 1.5; user-select: none; -webkit-user-select: none; }
.gacha button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.g-stage { position: relative; width: min(100%, 520px); height: 100%; overflow: hidden; background: #000; touch-action: none; }
.g-cvbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; aspect-ratio: 9 / 20; } /* 크기는 gacha.js resize가 화면에 맞춤 */
.g-cv { display: block; width: 100%; height: 100%; }
.g-acq { position: absolute; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.g-acqmon { position: absolute; z-index: 5; transform-origin: 50% 50%; will-change: transform, opacity; }
.g-acqmon svg, .g-tvmon svg { display: block; width: 100%; height: 100%; }
.g-menu, .g-pity { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(10px, env(safe-area-inset-bottom, 0px)); background: #151c24; }
.g-top { flex: none; display: flex; align-items: center; justify-content: space-between; }
/* 로비·스킵·뽑기 화면으로: 누르기 쉽게 크게, 버튼인 게 바로 보이게 (사용자 2026-11-12) */
.g-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 14px; border: 1.5px solid #5a6b7e; background: var(--g-panel); color: #f4ead9; border-radius: 999px; font-size: 16px; font-weight: 800; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.g-back::before { content: "‹"; font-size: 24px; line-height: 1; margin-top: -4px; }
.g-back:active, .g-skip:active { transform: translateY(1px); }
.g-coins { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-coins .g-coin { width: 20px; height: 20px; object-fit: contain; }
/* 배너 (사용자 그림 720×360) + 제목: 위쪽 가운데 노란 글자, 기울이지 않고 굵고 크게, 뒤에 배경·그림자 (사용자) */
.g-banner { flex: none; aspect-ratio: 2 / 1; max-height: 26%; border-radius: 12px; position: relative; overflow: hidden; background: #8577b8 center / cover no-repeat; box-shadow: 0 0 0 2px #2b2540, 0 6px 16px rgba(0, 0, 0, .35); container-type: inline-size; }
.g-banner::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(24, 16, 48, .58) 0%, rgba(24, 16, 48, .34) 55%, rgba(24, 16, 48, 0) 100%); }
.g-banner b { position: absolute; left: 50%; top: 4%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(26px, 13cqw, 58px); font-weight: 800; letter-spacing: .03em; color: #ffd94a;
  -webkit-text-stroke: .2em #2b2540; paint-order: stroke fill;
  text-shadow: 0 .1em 0 #2b2540, 0 .17em 0 #1a1430, 0 .26em .16em rgba(10, 6, 24, .6), 0 0 .7em rgba(255, 214, 74, .5); }
/* TV: 픽업 몬스터들이 차례로 스킬 모션 (지직거리며 전환) */
.g-tv { flex: 1; min-height: 120px; position: relative; display: flex; padding: 9px 9px 24px; border-radius: 16px; background: linear-gradient(#3a434f, #242b34); box-shadow: 0 0 0 1px #0c1014, inset 0 1px 0 rgba(255, 255, 255, .12); }
.g-tvscreen { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 11px; background: #cfd3d6; box-shadow: 0 0 0 2px #0c1014; isolation: isolate; }
.g-tvworld { position: absolute; inset: 0; isolation: isolate; background: radial-gradient(ellipse at 50% 55%, #e6e9eb 0%, #cfd3d6 55%, #aab0b6 100%); }
.g-tvmon { position: absolute; z-index: 5; }
.g-tvfx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; pointer-events: none; }
.g-tvscreen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .1) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .34) 100%); }
.g-tvcap { position: absolute; left: 9px; bottom: 8px; z-index: 4; display: flex; align-items: baseline; gap: 6px; padding: 3px 9px; border-radius: 6px; background: rgba(8, 12, 16, .62); font-size: 12px; color: #c9d3dc; }
.g-tvcap:empty { display: none; }
.g-tvcap b { font-size: 14px; font-weight: 800; color: #f4ead9; white-space: nowrap; }
.g-tvfoot { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 10px; display: flex; align-items: center; gap: 6px; }
.g-tvfoot i { width: 9px; height: 9px; border-radius: 50%; background: #141920; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.g-tvfoot .g-led { margin-left: auto; width: 6px; height: 6px; background: #ff5a3c; box-shadow: 0 0 6px #ff5a3c; }
/* 무전기 (사용자 그림, 2026-11-12): TV 오른쪽 위에 왼쪽으로 15도쯤 기울어 튀어나와 있음. 누르면 호출(천장) 화면 */
/* 무전기: TV 오른쪽 위 구석, 크게(예전의 2배) + 반쯤은 화면 밖으로 잘림 = 기둥 뒤에서 고개를 내민 것처럼 (사용자 2026-11-12). 잘리는 곳 = .g-stage 오른쪽 끝 (메뉴 여백 14px 밖) */
.gacha .g-walkie { position: absolute; z-index: 5; right: -14px; top: 1%; height: 62%; min-height: 150px; max-height: 340px; aspect-ratio: 152 / 420; padding: 0; border: 0; background: none; transform: translateX(50%) rotate(-15deg); transform-origin: 50% 82%; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .55)); }
.g-walkie img { display: block; width: 100%; height: 100%; pointer-events: none; }
.g-walkie:active { transform: translateX(50%) rotate(-15deg) scale(.96); }
.g-walkie i { display: none; position: absolute; left: 16%; top: 55%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #ffb13c; box-shadow: 0 0 8px 3px rgba(255, 170, 60, .9); animation: gwBlink 1s steps(2, jump-none) infinite; }
.g-walkie.on i { display: block; }
.g-walkie.on { animation: gwRing 2.6s ease-in-out infinite; }
@keyframes gwBlink { from { opacity: 1; } to { opacity: .15; } }
@keyframes gwRing { 0%, 78%, 100% { transform: translateX(50%) rotate(-15deg); } 82%, 90% { transform: translateX(50%) rotate(-18deg); } 86%, 94% { transform: translateX(50%) rotate(-12deg); } }
.g-info { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--g-muted); }
.g-links { display: flex; gap: 12px; }
.g-info button { border: 0; background: none; padding: 2px 0; font-size: 12px; }
.g-links button::after { content: " ›"; }
.g-info .g-pick { color: #ffd94a; font-weight: 800; }
.g-btns { flex: none; display: flex; gap: 10px; }
.g-btns button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 13px 6px 11px; border-radius: 14px; border: 1px solid var(--g-line); background: var(--g-panel); }
.g-btns button:last-child { border-color: var(--g-accent); }
.g-cost { display: flex; align-items: center; gap: 6px; }
.g-cost .g-coin { width: 24px; height: 24px; object-fit: contain; }
.g-cost b { font-size: 21px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.g-lab { font-size: 12px; color: var(--g-muted); }
.g-copy { flex: none; margin: 0; text-align: center; font-size: 10px; font-weight: 400; color: #5d6975; }
.g-skip, .g-again, .g-more { position: absolute; z-index: 4; border: 1px solid rgba(255, 255, 255, .28); background: rgba(8, 12, 16, .55); color: #f4ead9; border-radius: 999px; font-weight: 800; }
.g-skip { top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 24px; font-size: 17px; background: rgba(8, 12, 16, .74); border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.g-skip[hidden], .g-again[hidden], .g-more[hidden], .g-end[hidden] { display: none; }
/* 결과 화면 아래 단추 줄: 뽑기 화면으로 + (코인 내고 뽑았으면) N회 더 뽑기 (사용자 2026-11-12 밤) */
.g-end { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: max(4%, calc(env(safe-area-inset-bottom, 0px) + 12px)); display: flex; justify-content: center; align-items: stretch; gap: 8px; animation: gAgainIn .35s ease-out; }
.g-end .g-again, .g-end .g-more { position: static; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; white-space: nowrap; font-size: 17px; }
.g-again { gap: 8px; flex: 0 1 250px; min-width: 0; padding: 0 18px 0 12px; background: rgba(22, 29, 38, .94); border: 2px solid var(--g-accent); box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(255, 125, 72, .28); }
.g-again::before { content: "‹"; font-size: 26px; line-height: 1; margin-top: -4px; }
.g-again:active, .g-more:active { transform: translateY(1px); }
.g-end .g-more { flex: 1 1 0; max-width: 250px; gap: 9px; padding: 0 12px; background: linear-gradient(#ff9a5c, #f06a30); border: 2px solid #ffd0a8; color: #2a1206; box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(255, 125, 72, .35); }
.g-more .g-cost { gap: 4px; }
.g-more .g-cost .g-coin { width: 19px; height: 19px; }
.g-more .g-cost b { font-size: 17px; }
@keyframes gAgainIn { from { opacity: 0; } to { opacity: 1; } }
/* 호출(천장) 화면: 몬스터 카드가 쭉, 아래로 넘김. 카드 아래 '호출' */
.g-pity { z-index: 3; }
.g-mile { font-size: 13px; color: var(--g-muted); font-variant-numeric: tabular-nums; }
.g-mile b { font-size: 18px; font-weight: 800; color: #ffd94a; }
.g-phead { flex: none; display: flex; align-items: center; gap: 12px; padding: 9px 14px 10px 8px; border-radius: 12px; border: 1px solid var(--g-line); background: var(--g-panel); }
.g-phead img { flex: none; height: 64px; margin: -4px 2px -4px 6px; transform: rotate(-15deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.g-phead > div { flex: 1; min-width: 0; }
.g-phead h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.g-phead p { margin: 2px 0 7px; font-size: 12px; color: var(--g-muted); }
.g-bar { height: 6px; border-radius: 99px; background: #0c1014; overflow: hidden; }
.g-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ff7d48, #ffd94a); }
.g-pgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; align-content: start; padding: 2px 2px 16px; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.g-pgrid::-webkit-scrollbar { display: none; }
.g-pcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gacha .g-pface { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #4b4168 0%, #2a2340 62%, #171226 100%); box-shadow: inset 0 0 0 2px #f0c14b, inset 0 0 0 3.5px #6b4a12, inset 0 0 14px rgba(255, 214, 74, .28), 0 3px 8px rgba(0, 0, 0, .4); }
.g-part { position: absolute; inset: 9% 9% 25%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.g-part svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
.g-pface b { position: absolute; left: 3.5px; right: 3.5px; bottom: 3.5px; padding: 16px 4px 6px; border-radius: 0 0 6px 6px; font-size: 13.5px; font-weight: 800; line-height: 1.2; color: #ffe38a; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(rgba(10, 7, 20, 0), rgba(10, 7, 20, .88) 48%); text-shadow: 0 1px 2px #000; }
.g-ptag { position: absolute; z-index: 1; top: 7px; left: 7px; padding: 1px 6px; border-radius: 99px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1.5; background: #ffd94a; color: #2b2540; }
.gacha .g-call { padding: 7px 0 6px; border-radius: 9px; border: 1px solid #f0c14b; background: linear-gradient(#ffdf6b, #f0a92c); color: #2a1708; font-size: 14px; font-weight: 800; box-shadow: 0 2px 0 #8a5a0c; }
.gacha .g-call:active { transform: translateY(1px); box-shadow: 0 1px 0 #8a5a0c; }
.gacha .g-call:disabled { background: #222a33; border-color: var(--g-line); color: #6d7a87; box-shadow: none; cursor: default; transform: none; }
.g-pcard.own .g-pface { filter: grayscale(.75) brightness(.62); }
/* 뽑기에서 띄우는 창 (게임 기본 흰 창 안): 확률 보기·스킨 교환 */
/* 확률 보기 · 스킨 교환: 호출 화면과 같은 틀 (사용자 2026-11-12 밤) */
.g-sub { z-index: 3; }
.g-mile .g-coin { width: 16px; height: 16px; vertical-align: -3px; object-fit: contain; }
.g-mile .tkico { width: 18px; height: 18px; vertical-align: -4px; }
.g-phead.g-nohead { padding: 11px 14px 12px; }
.g-phead.g-nohead p { margin-bottom: 0; }
.g-phead.g-nohead .g-bar { margin-top: 8px; }
.g-rlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 16px; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.g-rlist::-webkit-scrollbar { display: none; }
.g-rate { flex: none; padding: 9px 12px 10px; border-radius: 12px; border: 1px solid var(--g-line); background: var(--g-panel); }
.g-rate.g-t2 { border-color: #6f5a9a; box-shadow: inset 0 0 14px rgba(150, 120, 255, .12); }
.g-rate.g-t1 { border-color: #8a6a1c; box-shadow: inset 0 0 14px rgba(255, 214, 74, .1); }
.g-rate h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.g-rate h3 b { margin-left: auto; font-size: 17px; color: #ffd94a; font-variant-numeric: tabular-nums; }
.g-rate small { display: block; margin-top: 5px; font-size: 11px; color: var(--g-muted); }
.g-rnote { flex: none; margin: 2px 4px 0; font-size: 12px; color: var(--g-muted); }
.g-gr { flex: none; min-width: 26px; padding: 0 6px; border-radius: 6px; font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 1.65; text-align: center; color: #fff; background: #5b6672; }
.g-gr.g-ss { background: linear-gradient(90deg, #ff6b6b, #f5a623, #3ecf6e, #4a9dff, #a56bff); }
.g-gr.g-s { background: linear-gradient(#ffdf6b, #f0a92c); color: #2a1708; }
.g-gr.g-b { background: #b9773a; }
.g-names { display: flex; flex-wrap: wrap; gap: 5px 5px; font-size: 12.5px; line-height: 1.5; color: #c9d3dc; }
.g-names.g-plain { gap: 1px 9px; }
.g-names .own { color: #66727e; }
.gacha .g-names .g-mon { border: 1px solid #44525f; background: #232c36; border-radius: 99px; padding: 3px 11px; font-size: 12.5px; font-weight: 800; color: #f4ead9; }
.gacha .g-names .g-mon.own { color: #66727e; border-color: #2c3742; background: #1b232b; }
.g-pgrid.g-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
.gacha .g-sface { aspect-ratio: 1 / 1; }
.g-sface .g-part { inset: 7% 12% 27%; }
.gacha .g-sface b { white-space: normal; word-break: keep-all; text-wrap: balance; font-size: 13.5px; padding-top: 14px; } /* 긴 스킨 이름: 낱말 가운데서 끊지 않고 두 줄 */
@media (prefers-reduced-motion: reduce) { .g-end, .g-walkie.on, .g-walkie i { animation: none; } }

/* ---- 성장 만남 이벤트 (2026-11-13 사용자, ui.js meetSync): 성장 판과 같은 진한 테두리 + 크림색 종이, 위에 장소 이름판, 가운데 장소 그림 위 두 몬스터 ---- */
.mtov { --ink: #2a2240; --paper: #fff8ec; position: fixed; inset: 0; z-index: 58; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(34, 24, 54, .5); animation: mtfade .25s ease-out; transition: opacity .3s; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mtov.mtout { opacity: 0; }
@keyframes mtfade { from { opacity: 0; } }
.mtov.mountain { --rt: #8f9db8; --rs: #dfe4ee; } .mtov.jungle { --rt: #5e9a55; --rs: #dcefd6; } .mtov.meadow { --rt: #8aa83d; --rs: #eef3cf; } .mtov.plaza { --rt: #c29a5c; --rs: #f4e7cf; }
.mtbox { position: relative; width: min(360px, 100%); max-height: calc(100dvh - 24px); overflow: visible; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; padding: 34px 12px 12px; box-shadow: 0 6px 0 #0000003d, 0 16px 36px #0006; animation: mtpop .34s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mtpop { from { transform: scale(.82) translateY(12px); opacity: 0; } }
.mthead { position: absolute; left: 50%; top: 0; transform: translate(-50%, -58%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.mtplate { height: 54px; width: auto; filter: drop-shadow(0 3px 0 #0000002e); }
.mtplate.txt { height: auto; padding: 6px 22px; border-radius: 99px; background: var(--rt); color: #fff; border: 3px solid var(--ink); font-size: 20px; }
.mtrib { position: absolute; left: calc(100% + 4px); top: 62%; padding: 3px 12px 2px; border-radius: 99px; background: #ffc93a; color: var(--ink); border: 2.5px solid var(--ink); font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 0 #0003; }
.mtscene { position: relative; height: 132px; border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 10px 8px; background: var(--rs) var(--gart, none) center top / 100% auto no-repeat; }
.mtscene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, #ffffff40); pointer-events: none; }
.mtside { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mtmon { display: grid; place-items: center; filter: drop-shadow(0 4px 0 #0000003a); }
.mtside.host .mtmon { width: 92px; height: 92px; }
.mtside.guest .mtmon { width: 70px; height: 70px; }
.mtmon svg, .mtmon img { width: 100%; height: 100%; }
.mtside.host .mtmon { animation: mtbob 1.6s ease-in-out infinite; }
@keyframes mtbob { 50% { transform: translateY(-4px); } }
.mtside.guest { animation: mthop .7s cubic-bezier(.3, .8, .4, 1) .1s both; }
@keyframes mthop { 0% { transform: translateX(120px); opacity: 0; } 45% { transform: translate(40px, -34px); opacity: 1; } 75% { transform: translate(0, 0) scale(1.06, .92); } 100% { transform: none; } }
.mtbang { position: absolute; right: -6px; top: -8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #ffc93a; color: var(--ink); border: 2.5px solid var(--ink); font-style: normal; font-weight: 900; font-size: 15px; animation: mtbang .5s ease-out .75s both; }
@keyframes mtbang { from { transform: scale(0); } 70% { transform: scale(1.3); } }
.mttag { font-size: 11px; font-weight: 900; color: #fff; background: var(--pc, #3b285c); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 9px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtline { margin: 9px 0 7px; text-align: center; font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.35; }
.mtline small { display: block; font-size: 11.5px; color: #776f82; font-weight: 800; }
.mtrows { display: grid; gap: 5px; }
.mtrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 2px solid #e4dbcd; border-radius: 11px; background: #fff; transition: transform .2s, border-color .2s, background .2s, opacity .2s; }
.mtds { display: flex; gap: 3px; flex: 0 0 76px; justify-content: flex-start; }
.mtd { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; background: #fff; border: 2px solid var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 2px; gap: 1px; }
.mtd i { border-radius: 50%; }
.mtd i.on { background: var(--ink); }
.mtrow.quest .mtd { background: #efe6ff; } .mtrow.six .mtd { background: #fff1c4; }
.mtwhat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mtwhat > b { font-size: 12px; color: var(--ink); }
.mtq { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; font-size: 11.5px; font-weight: 800; color: #4a4157; }
.mtq > i { font-style: normal; color: #9a90a8; }
.mtq .sico, .mtqcard .sico, .qtrow .sico { width: 17px; height: 17px; object-fit: contain; vertical-align: -4px; }
.mtst { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.mtst em, .mtq em { font-style: normal; }
.mtst b { color: #2f8b4a; font-weight: 900; }
.mtany { white-space: nowrap; }
.mtov.mtdone .mtrow:not(.hit) { opacity: .42; }
.mtrow.hit { border-color: var(--ink); background: #fff6d6; transform: scale(1.03); box-shadow: 0 3px 0 #0002; }
.mtrow .mtd.hit { background: #ffc93a; box-shadow: 0 0 0 2px #fff, 0 0 10px 2px #ffc93a; }
.mtbot { margin-top: 9px; display: grid; gap: 7px; justify-items: center; }
.mtroll, .mtres, .mtmats, .mtok, .mtwait { display: none; }
.mtov[data-stage="roll"] .mtwait, .mtov[data-stage="intro"] .mtwait { display: block; }
.mtwait { margin: 2px 0; font-size: 13px; color: #776f82; text-align: center; min-height: 1.3em; }
.mtwait.on { display: block; }
.mtov.mtmine[data-stage="roll"] .mtroll { display: grid; }
.mtov.mtmine[data-stage="roll"] .mtwait { display: none; }
.mtroll { width: 100%; gap: 8px; justify-items: center; padding: 10px 8px 12px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #6d8fe6, #34407a); border: 2.5px solid var(--ink); cursor: pointer; touch-action: none; position: relative; }
.mtgauge { position: relative; width: 100%; margin-top: 12px; }
.mtbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--ink); }
.mtbar b { display: grid; place-items: center; height: 34px; font-size: 18px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); background: #7c5cc4; }
.mtbar b:nth-child(1), .mtbar b:nth-child(2) { background: #7c5cc4; }
.mtbar b:nth-child(3), .mtbar b:nth-child(4), .mtbar b:nth-child(5) { background: #3f9a63; }
.mtbar b:nth-child(6) { background: #d08a1e; }
.mtbar b.cur { background: #ffc93a; color: #fff; box-shadow: inset 0 0 0 3px #ffe58a; }
.mtptr { position: absolute; top: -14px; left: 8.33%; width: 0; height: 0; transform: translateX(-50%); transition: left .06s linear; }
.mtptr::before { content: ""; position: absolute; left: -11px; top: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 16px solid var(--ink); }
.mtptr::after { content: ""; position: absolute; left: -7px; top: 2px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #ffc93a; }
.mtpress { display: flex; align-items: center; gap: 12px; }
.mtdie { position: relative; display: inline-block; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 13px; background: #fff; border: 3px solid var(--ink); box-shadow: inset -4px -5px 0 #d9d2ea, 0 0 0 4px #ffffff40; }
.mtpp { position: absolute; inset: 15%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8%; }
.mtpp i { border-radius: 50%; } .mtpp i.on { background: var(--ink); }
.mtpt { font-size: 12.5px; font-weight: 900; color: #fff; line-height: 1.3; text-shadow: 0 2px 0 #1c234080; }
.mtpt b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 3px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 16px; text-shadow: none; box-shadow: 0 2px 0 #1c234080; vertical-align: middle; }
.mtroll { animation: mtglow 1.1s ease-in-out infinite; }
@keyframes mtglow { 50% { box-shadow: 0 0 0 3px #ffc93a, 0 0 18px 4px #ffc93acc; } }
.mtov.mthold .mtroll { animation: none; box-shadow: 0 0 0 3px #ffc93a; }
.mtov.mthold .mtpress .mtdie { animation: mtwob .45s ease-in-out infinite; }
@keyframes mtwob { 50% { transform: rotate(-7deg) translateY(-3px); } }
.mttime { width: 76%; height: 5px; border-radius: 3px; background: #ffffff40; overflow: hidden; }
.mttime i { display: block; height: 100%; background: #fff; transform-origin: left; }
.mtmats .mttime { background: #e4dbcd; margin: 6px auto 0; } .mtmats .mttime i { background: #3b285c; }
.mtov.mtrolling .mtbot::before { content: ""; width: 56px; height: 56px; border-radius: 13px; background: #fff; border: 3px solid var(--ink); animation: mtspin .5s linear infinite; }
@keyframes mtspin { to { transform: rotate(360deg); } }
.mtov.mtdone .mtres { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 14px; background: #fff; border: 2.5px solid var(--ink); animation: mtpop .3s cubic-bezier(.3, 1.5, .5, 1); }
.mtres .mtdie { width: 50px; height: 50px; box-shadow: inset -4px -5px 0 #d9d2ea, 0 0 14px 3px #ffc93a; }
.mtrt { font-size: 13px; color: var(--ink); line-height: 1.35; min-width: 0; }
.mtrt b { font-weight: 900; }
.mtrt small { display: block; font-size: 11.5px; color: #776f82; }
.mtgot { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; justify-content: inherit; }
.mtgot .mtst { padding: 2px 8px 2px 5px; border-radius: 99px; background: #e5f5df; border: 2px solid #2f8b4a; font-size: 12px; animation: mtpop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.mtgot .mtst:nth-child(2) { animation-delay: .08s; } .mtgot .mtst:nth-child(3) { animation-delay: .16s; }
.mtgot .sico { width: 16px; height: 16px; object-fit: contain; }
.mtov.mtmatsOn .mtmats { display: block; width: 100%; text-align: center; }
.mtmats p { margin: 0 0 6px; font-size: 13px; font-weight: 900; color: var(--ink); }
.mtmatbtns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.mtmat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 5px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: 0 3px 0 #0003; }
.mtmat:active { transform: translateY(2px); box-shadow: 0 1px 0 #0003; }
.mtmat .sico { width: 30px; height: 30px; object-fit: contain; }
.mtmat em { font-style: normal; font-size: 11px; font-weight: 900; white-space: nowrap; }
.mtov[data-stage="shown"] .mtok { display: block; width: 100%; }
/* 퀘스트 클리어 묻기 · 클리어 알림 */
.mtov.mtask .mtbox, .mtov.mtclear .mtbox { padding-top: 38px; }
.mtov.mtask .mtline, .mtov.mtclear .mtline { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mtov.mtask .mtline .mtmon, .mtov.mtclear .mtline .mtmon { width: 48px; height: 48px; flex: 0 0 auto; }
.mtov.mtask:not(.mtmine) { background: rgba(34, 24, 54, .28); }
.mtqcard { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 7px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 2px solid #e4dbcd; font-size: 13px; font-weight: 900; color: #4a4157; }
.mtqcard > i { font-style: normal; color: #9a90a8; } .mtqcard > em { font-style: normal; }
.mtqbtns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7px; margin-top: 10px; }
.mtqbtns .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 #0003; }
.mtqbtns .btn.alt { background: #fff; color: var(--ink); }
.mtqy { background: #2f8b4a !important; color: #fff; }
.mtqy .sico { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 1px 0 #0005); }
.mtqy small { font-size: 10.5px; opacity: .9; }
.mtov.mtclear .mtgot { justify-content: center; }
/* 받은 퀘스트: 화면 오른쪽에 접어 둔 책갈피 → 누르면 카드가 펼쳐짐 */
.qtab { --ink: #2a2240; position: fixed; right: 0; top: 38%; z-index: 40; display: flex; align-items: flex-start; filter: drop-shadow(-2px 3px 0 #0000002e); animation: qtin .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes qtin { from { transform: translateX(60px); } }
.qtab.mountain { --rt: #8f9db8; } .qtab.jungle { --rt: #5e9a55; } .qtab.meadow { --rt: #8aa83d; } .qtab.plaza { --rt: #c29a5c; }
.qtfold { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 34px; padding: 8px 0 9px; border: 2.5px solid var(--ink); border-right: 0; border-radius: 12px 0 0 12px; background: var(--rt); color: #fff; }
.qtfold .qtico { font-size: 17px; line-height: 1; }
.qtfold b { writing-mode: vertical-rl; font-size: 12px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 1px 0 #0005; }
.qtab:not(.open) .qtfold { animation: qtwig 2.6s ease-in-out infinite; }
@keyframes qtwig { 0%, 86%, 100% { transform: none; } 90% { transform: translateX(-4px); } 95% { transform: translateX(1px); } }
.qtcard { display: none; width: min(230px, 66vw); padding: 8px 10px 9px; background: #fff8ec; border: 2.5px solid var(--ink); border-right: 0; border-radius: 0 0 0 12px; text-align: center; }
.qtab.open .qtcard { display: block; animation: qtopen .25s ease-out; }
@keyframes qtopen { from { opacity: 0; transform: translateX(20px); } }
.qtcard .mtplate { height: 34px; display: block; margin: -2px auto 4px; }
.qtrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 6px; font-size: 12px; font-weight: 900; color: #4a4157; }
.qtrow > i { font-style: normal; color: #9a90a8; } .qtrow > em { font-style: normal; }
.qthave { margin: 6px auto 3px; display: inline-block; padding: 2px 10px; border-radius: 99px; background: #f6e3e3; color: #a04444; font-size: 12px; }
.qthave.ok { background: #e5f5df; color: #2f7a40; }
.qtcard small { display: block; font-size: 10.5px; color: #776f82; line-height: 1.35; }
/* 좁은 폰: 꼬리표가 상자 오른쪽 끝에 닿지 않게 */
@media (max-width: 370px) { .mtrib { left: calc(100% + 2px); font-size: 11.5px; padding: 2px 9px 1px; } }
/* 키 작은 폰: 그림 칸·줄을 줄여서 한 화면에 */
@media (max-height: 760px) { .mtscene { height: 108px; } .mtside.host .mtmon { width: 76px; height: 76px; } .mtside.guest .mtmon { width: 58px; height: 58px; } .mtline { margin: 7px 0 5px; font-size: 14px; } .mtrow { padding: 3px 8px; } .mtd { width: 19px; height: 19px; } .mtbar b { height: 30px; } .mtbox { padding-top: 30px; } .mtplate { height: 48px; } }
@media (prefers-reduced-motion: reduce) { .mtov, .mtbox, .mtside.guest, .mtbang, .mtside.host .mtmon, .mtroll, .mtov.mthold .mtpress .mtdie, .mtgot .mtst, .qtab, .qtab:not(.open) .qtfold, .qtab.open .qtcard { animation: none; } }

/* 다른 사람이 고르는 동안 성장 장소 덮개 (2026-11-13 사용자) */
.gboard.foepick { position: relative; }
.gboard.foepick .grid { filter: grayscale(.85) brightness(.82); pointer-events: none; transition: filter .25s; }
.gboard .foepickmsg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 22px; border-radius: 16px; background: rgba(40, 34, 30, .82); color: #fff; font-weight: 900; font-size: 17px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.gboard .foepickmsg b { font-size: 12px; color: #ffd98a; }
.gboard .foepickmsg i { font-style: normal; animation: foeblink 1.2s ease-in-out infinite; }
@keyframes foeblink { 50% { opacity: .2; } }
/* 고른 몬스터 카드는 회색 + 선택됨 (2026-11-13 사용자) */
.npk .moncard.taken { background: #e4e1e8; border-color: #9a94a3; border-style: dashed; }
.npk .moncard.taken .mptok, .npk .moncard.taken .monname { filter: grayscale(1); opacity: .45; }
.npk .moncard.taken .mptaken { font-size: 11px; font-weight: 900; color: #fff; background: var(--pc); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
/* 2026-11-13 사용자: 전장 체력·공격·방어 숫자는 조금 작게(위), 행동 선택이 끝나고 연출이 도는 동안은 숨김 */
.stage.fxplaying .unit .ust, .stage.fxplaying .minion .ust { opacity: 0 !important; transition: none; }