:root{
  --bg:#07050a; --panel:#14101a; --panel2:#1d1726; --ink:#ece6f2; --muted:#9a90a6;
  --red:#c0392b; --blue:#3b82c4; --gold:#d4a24a; --purple:#8e5bd0; --green:#4caf7d; --line:#2d2438;
  color-scheme: dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg);}
body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation;}
button{font-family:inherit;color:inherit;cursor:pointer;}
.hidden{display:none !important;}

#app{height:100%;max-width:520px;margin:0 auto;position:relative;overflow:hidden;background:var(--bg);}
#stage{position:absolute;inset:0;background:#000;}
#view{display:block;width:100%;height:100%;touch-action:none;}
#hud{position:absolute;top:0;left:0;right:0;z-index:55;pointer-events:none;display:flex;align-items:center;gap:10px;padding:22px 16px 26px;background:linear-gradient(rgba(6,4,9,.92),rgba(6,4,9,0));font-size:14px;text-shadow:0 1px 4px #000;}
#hud .sp{flex:1;}
#hud button{pointer-events:auto;}
#hud.norun #hFloor,#hud.norun #hHp,#hud.norun #btnDeck,#hud.norun #btnMap{display:none;}
.ib{background:rgba(29,23,38,.85);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:14px;}
#msg{position:absolute;left:0;right:0;top:128px;z-index:5;text-align:center;padding:0 16px;font-family:'Noto Serif KR',serif;font-size:15px;line-height:1.55;color:#e8dff0;text-shadow:0 2px 6px #000,0 0 14px #000;opacity:0;transition:opacity .4s;pointer-events:none;}
#msg.on{opacity:1;}
#fade{position:absolute;inset:0;z-index:20;background:#000;opacity:0;transition:opacity .45s;pointer-events:none;}
#dim{position:absolute;inset:0;z-index:3;background:rgba(0,0,0,.62);opacity:0;pointer-events:none;transition:opacity .25s;}
#dim.on{opacity:1;pointer-events:auto;}
#dimHint{position:absolute;top:128px;left:0;right:0;text-align:center;font-size:13px;color:#cfc6d8;}

#bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none;}
#bottom.top{z-index:58;}
#combat{display:flex;flex-direction:column;}
#pRow{pointer-events:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 12px 2px;position:relative;background:linear-gradient(rgba(8,5,12,0),rgba(8,5,12,.78));}
#orb{
  width:60px;height:60px;flex:0 0 60px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#c084fc,#7c3aed 55%,#4c1d95 100%);
  color:#fff;font-weight:900;font-size:22px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 #3b0764,0 6px 16px rgba(124,58,237,.6),inset 0 1px 0 rgba(255,255,255,.3);
  border:2.5px solid rgba(0,0,0,.8);
  font-family:'Arial Black',Impact,sans-serif;
  position:relative;overflow:visible;
  transition:transform .12s;
}
#orb::before{
  content:'';position:absolute;top:6px;left:12px;width:16px;height:8px;
  background:rgba(255,255,255,.35);border-radius:50%;transform:rotate(-20deg);pointer-events:none;
}
#orb.e0{
  background:radial-gradient(circle at 38% 30%,#6b7280,#374151 55%,#111827 100%);
  box-shadow:0 4px 0 #1f2937,0 6px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
}
#orb .oe{position:relative;z-index:2;text-shadow:0 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;}
#pInfo{flex:1;min-width:0;text-shadow:0 1px 4px #000;}
#pBar{height:12px;background:#12222a;border-radius:6px;overflow:hidden;border:1px solid #000;}
#pBar i{display:block;height:100%;background:linear-gradient(#58c28a,#2f8a5c);transition:width .3s;}
#pTxt{font-size:13px;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
#pTxt .blk{color:#7fbcff;font-weight:700;}
#pTxt .st{color:#c9a8ff;}
#pTxt .piles{color:#b9aec6;font-size:12px;}
#pTop{position:absolute;left:0;right:0;top:62px;z-index:6;display:flex;align-items:center;gap:10px;padding:6px 14px 14px;pointer-events:none;background:linear-gradient(rgba(8,5,12,.7),rgba(8,5,12,0));}
#pTop #orb{width:52px;height:52px;flex:0 0 52px;font-size:20px;}
/* ═══════════════════════════════════════════════════════════════
   PERSONA 5 (P5) STYLISH ALL-OUT END TURN BUTTON
   크림슨 레드, 칠흑의 블랙, 날카로운 사선 스큐 & 하드 컷아웃 섀도우
   ═══════════════════════════════════════════════════════════════ */
#endTurn{
  flex:0 0 auto;
  position:relative;z-index:0;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:#e60012;
  border:3px solid #000!important;
  outline:none!important;
  border-radius:2px;
  padding:8px 20px 7px 18px;
  transform:skewX(-13deg) rotate(-2deg);
  transform-origin:center center;
  box-shadow:-5px 5px 0 #000, -9px 9px 0 #e60012, 0 10px 22px rgba(0,0,0,.75);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .12s ease,background .12s ease,filter .12s ease;
  overflow:visible;
}
/* P5 특유의 날카로운 사선 스트라이프 및 컷아웃 악센트 */
#endTurn::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(0,0,0,.15) 5px,
    rgba(0,0,0,.15) 10px
  );
  pointer-events:none;
}
/* 상단 노란색/블랙 미니 뱃지 */
#endTurn .p5-tag{
  display:inline-block;
  background:#000;
  color:#ffe600;
  font-family:'Impact', 'Arial Black', sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  padding:1px 6px 0;
  margin-bottom:1px;
  border-radius:1px;
  box-shadow:-2px 2px 0 #fff;
  text-transform:uppercase;
  transform:skewX(4deg);
}
/* 메인 타이포: 묵직하고 강렬한 P5 대문자 */
#endTurn .p5-main{
  display:block;
  font-family:'Impact','Arial Black','Noto Sans KR',sans-serif;
  font-size:22px;
  font-weight:900;
  line-height:.95;
  letter-spacing:.03em;
  color:#fff;
  text-shadow:-2px 2px 0 #000, -3px 3px 0 #000, 2px -1px 0 #000;
  text-transform:uppercase;
  transform:skewX(-2deg);
}
/* 서브 레이블: 턴 종료 / PASS */
#endTurn .p5-sub{
  display:block;
  font-family:'Noto Sans KR',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  color:#ffe600;
  text-shadow:-1px 1px 0 #000, 1px 1px 0 #000;
  margin-top:2px;
  line-height:1;
}

#endTurn:hover:not(:disabled){
  background:#ff1a30;
  transform:skewX(-16deg) rotate(-4deg) scale(1.08);
  box-shadow:-7px 7px 0 #000, -12px 12px 0 #ffe600, 0 16px 28px rgba(230,0,18,.5);
  filter:brightness(1.1);
}
#endTurn:hover:not(:disabled) .p5-main{
  color:#fff;
  text-shadow:-3px 3px 0 #000, -4px 4px 0 #000, 0 0 10px rgba(255,230,0,.6);
}
#endTurn:active:not(:disabled){
  transform:skewX(-9deg) rotate(0deg) scale(0.95) translate(4px, 4px);
  box-shadow:-2px 2px 0 #000, -4px 4px 0 #e60012;
}

#endTurn:disabled{
  background:#2b2d35!important;
  border-color:#14151a!important;
  box-shadow:-3px 3px 0 #0a0b0e!important;
  cursor:not-allowed;
  opacity:.65;
  transform:skewX(-12deg) rotate(-1deg)!important;
}
#endTurn:disabled .p5-tag{
  background:#14151a;
  color:#717585;
  box-shadow:none;
}
#endTurn:disabled .p5-main{
  color:#8a8e9e;
  text-shadow:-1px 1px 0 #000;
}
#endTurn:disabled .p5-sub{
  color:#555a68;
  text-shadow:none;
}
#hand{position:relative;height:215px;background:linear-gradient(rgba(8,5,12,.78),rgba(8,5,12,.5));}

/* 카드 */
.card{width:72px;height:106px;flex:0 0 72px;position:relative;cursor:pointer;}
.cb{position:absolute;inset:0;border-radius:9px;border:2px solid var(--line);padding:4px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;text-align:center;background:#1b1522;}
.card.t-a .cb{border-color:#a8362b;background:linear-gradient(#2a1416,#170c10);}
.card.t-s .cb{border-color:#2f6aa3;background:linear-gradient(#12202e,#0b121a);}
.card.t-p .cb{border-color:#b8892f;background:linear-gradient(#2b2210,#17120a);}
.card.rare .cb{box-shadow:0 0 10px #8e5bd0aa;}
.cc{position:absolute;top:-8px;left:-8px;width:22px;height:22px;border-radius:50%;background:#d4781c;color:#200;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;border:1px solid #000;}
.ci{font-size:26px;margin-top:6px;line-height:1.1;}
.cn{font-size:11px;font-weight:700;margin-top:2px;}
.cd{font-size:9px;line-height:1.3;color:#cfc6d8;margin-top:3px;word-break:keep-all;}
.card.dis .cb{opacity:.55;filter:grayscale(.5);}
.card.mid{width:88px;height:128px;flex-basis:88px;}
.card.mid .ci{font-size:30px;}.card.mid .cn{font-size:12px;}.card.mid .cd{font-size:10px;}
.card.big{width:98px;height:146px;flex-basis:98px;}
.card.big .ci{font-size:38px;margin-top:10px;}.card.big .cn{font-size:14px;}.card.big .cd{font-size:11px;}

/* 이미지 카드 (프레임 + 일러스트가 들어 있는 카드) */
.card.hasimg{container-type:inline-size;}
.card.hasimg .cb{border:none;background:none;padding:0;border-radius:0;display:block;}
.card.hasimg .cimg2{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none;user-select:none;}
.card.hasimg .ctext{position:absolute;left:11%;right:11%;top:66%;bottom:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.card.hasimg .cn,#hand .card.hasimg .cn{font-size:13cqw;font-weight:900;margin:0;line-height:1.1;color:#2a1608;}
.card.hasimg .cd,#hand .card.hasimg .cd{font-size:9cqw;line-height:1.2;margin:2px 0 0;color:#3a2614;}

/* 손패(부채꼴) */
#hand .card{pointer-events:auto;position:absolute;left:50%;bottom:12px;width:157px;height:230px;margin-left:-78px;transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.2,.85,.25,1),opacity .4s;touch-action:none;-webkit-touch-callout:none;}
#hand .cc{width:38px;height:38px;font-size:21px;top:-11px;left:-11px;}
#hand .ci{font-size:56px;margin-top:20px;}
#hand .cn{font-size:20px;margin-top:4px;}
#hand .cd{font-size:15px;margin-top:6px;line-height:1.35;}
#hand .cb{animation:breathe 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.55s);box-shadow:0 4px 14px #000a;}
#hand .card.sel .cb,#hand .card.drag .cb{animation:none;box-shadow:0 0 22px #fff7;}
#hand .card.drag{transition:none !important;}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-5px) rotate(.9deg);}}

/* 모달 */
#modal{position:absolute;inset:0;background:rgba(6,4,9,.94);overflow-y:auto;display:flex;z-index:150!important;padding:56px 16px 28px;}
#modalBox{margin:auto;width:100%;max-width:420px;text-align:center;}
#modalBox h1{font-family:'Noto Serif KR',serif;font-weight:900;font-size:76px;letter-spacing:.12em;margin:0 0 4px;color:#efe7d6;text-shadow:0 0 30px #8e5bd066;}
#modalBox h2{font-family:'Noto Serif KR',serif;font-weight:700;font-size:22px;margin:0 0 12px;}
.sub{font-family:'Noto Serif KR',serif;color:var(--muted);font-size:15px;margin:0 0 22px;}
.story p,p.story{font-family:'Noto Serif KR',serif;font-size:16px;line-height:1.85;color:#e3dbea;margin:0 0 14px;animation:up .7s ease both;}
.small{font-size:13px;color:var(--muted);line-height:1.6;}
.btn{display:block;width:100%;max-width:360px;margin:10px auto;padding:14px;background:#241a30;border:1px solid var(--purple);border-radius:10px;font-size:16px;font-weight:500;line-height:1.4;box-sizing:border-box;}
.btn.primary{background:var(--purple);border-color:var(--purple);font-weight:700;}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--muted);}
.cards{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 8px;}
.grid{display:flex;gap:14px 10px;justify-content:center;flex-wrap:wrap;margin:16px 0;}
.memlist{font-family:'Noto Serif KR',serif;font-size:13px;color:var(--muted);line-height:1.7;margin:16px 0 6px;text-align:left;}
.skull{font-size:54px;margin-bottom:6px;}
.btn.char{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;}
.ce{font-size:40px;line-height:1;}
.ct b{display:block;font-size:17px;}
.ct small{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px;}
/* 캐릭터 생성 */
.btn:disabled{opacity:.4;cursor:not-allowed;}
/* 캐릭터 선택 (전체화면) */
/* 캐릭터 선택 (전체화면 - 브롤스타즈 스타일) */
/* 캐릭터 선택 (전체화면 - 브롤스타즈 스타일) */
#cs{position:absolute;inset:0;z-index:50;background:#06040a;overflow:hidden;touch-action:pan-y;}
#csTrack{display:flex;height:100%;width:100%;will-change:transform;}
.cslide{
  flex:0 0 100%;width:100%;height:100%;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  box-sizing:border-box;
  padding:calc(env(safe-area-inset-top,0px) + 76px) 20px calc(env(safe-area-inset-bottom,0px) + 210px);
  background:radial-gradient(circle at 50% 36%,var(--c,#e11d48) 0%,rgba(16,8,22,.94) 70%),#07040b;
}
/* 필멸자는 되찾은 기억 버튼이 있어서 이름과 설명을 더 위로 충분히 올림 */
/* HG_PATCH_CSALIGN2: 필멸자만 위로 올리던 예외 규칙 제거 (모든 캐릭터 동일 높이) */
.cslide::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(7,5,10,.7) 0%,rgba(7,5,10,0) 22%,rgba(7,5,10,.25) 50%,rgba(7,5,10,.95) 82%);
}
.c-sunburst{
  position:absolute;inset:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.07) 0deg 15deg,transparent 15deg 30deg);
  pointer-events:none;opacity:.65;z-index:1;
}
.cfig{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:1;
}
/* 메인 이미지 화면 전체 꽉 채움 */
.cimg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
}
.cart{font-size:min(55vw,260px);line-height:1;filter:drop-shadow(0 0 36px var(--c)) drop-shadow(0 10px 24px #000);}
.cslide.lock .cart{filter:brightness(0) drop-shadow(0 0 26px #000);opacity:.85;}
.cslide.lock .cimg{filter:brightness(.14) grayscale(1);}
.clk{position:absolute;font-size:62px;filter:drop-shadow(0 4px 14px #000);z-index:3;}
/* lock-img */
img.clk,div.clk{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:2147483000;pointer-events:none;user-select:none;-webkit-user-drag:none;}
img.clk{width:clamp(72px,24vw,130px);height:auto;filter:drop-shadow(0 4px 14px #000);}
div.clk{font-size:62px;line-height:1;}

/* 하단 브롤스타즈 텍스트 인포 — 하단 버튼 영역 위로 배치 */
.brawl-info{
  width:100%;max-width:440px;position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  margin-bottom:10px;
  padding-bottom:4px;
}
.brawl-sub-banner{
  font-family:'Arial Black',Impact,sans-serif;font-style:italic;font-size:22px;font-weight:900;
  color:#fff247;
  text-shadow:-2.5px -2.5px 0 #000,2.5px -2.5px 0 #000,-2.5px 2.5px 0 #000,2.5px 2.5px 0 #000,0 4px 0 #000,0 6px 12px rgba(0,0,0,.9);
  transform:skewX(-8deg) rotate(-1deg);margin-left:6px;margin-bottom:4px;
  letter-spacing:-.02em;line-height:1;
}
.brawl-sub-banner.locked-banner{color:#a1a1aa;}

/* ── 필멸자 (guard) ── 새빨간 파이터 */
.brawl-name-plate{
  width:calc(100% - 12px);
  background:linear-gradient(100deg,#dc2626 0%,#b91c1c 55%,#7f1d1d 100%);
  transform:skewX(-9deg) rotate(-1.5deg);
  padding:10px 18px 8px;border-radius:6px;
  border:2.5px solid #000;box-shadow:0 6px 0 #000,0 12px 24px rgba(0,0,0,.9);
  position:relative;margin-bottom:10px;
}
.brawl-name-plate.lock-plate{
  background:linear-gradient(90deg,#3f3f46 0%,#27272a 100%);
}

/* guard — 새빨간 분노 / 철벽 전사 */
.plate-guard{
  background:linear-gradient(100deg,#ef4444 0%,#dc2626 40%,#7f1d1d 100%);
  box-shadow:0 6px 0 #450a0a,0 12px 28px rgba(239,68,68,.5),0 0 0 1px #000;
}
.plate-guard::before{
  content:'';position:absolute;inset:0;border-radius:4px;
  background:repeating-linear-gradient(120deg,rgba(255,255,255,.06) 0px,rgba(255,255,255,.06) 2px,transparent 2px,transparent 8px);
}

/* secretary — 보라/파랑 아케인 마법사 */
.plate-mage{
  background:linear-gradient(100deg,#7c3aed 0%,#6d28d9 40%,#312e81 100%);
  box-shadow:0 6px 0 #1e1b4b,0 12px 28px rgba(124,58,237,.55),0 0 0 1px #000;
}
.plate-mage::before{
  content:'';position:absolute;inset:0;border-radius:4px;
  background:radial-gradient(ellipse at 30% 50%,rgba(196,181,253,.18) 0%,transparent 60%);
}

/* rogue — 에메랄드 녹색 그림자 */
.plate-rogue{
  background:linear-gradient(100deg,#16a34a 0%,#15803d 45%,#14532d 100%);
  box-shadow:0 6px 0 #052e16,0 12px 28px rgba(22,163,74,.5),0 0 0 1px #000;
}
.plate-rogue::before{
  content:'';position:absolute;inset:0;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0px,rgba(0,0,0,.04) 1px,transparent 1px,transparent 10px);
}

/* engineer — 청록 사이버 */
.plate-engineer{
  background:linear-gradient(100deg,#0891b2 0%,#0e7490 45%,#164e63 100%);
  box-shadow:0 6px 0 #082f49,0 12px 28px rgba(8,145,178,.55),0 0 0 1px #000;
}
.plate-engineer::before{
  content:'';position:absolute;inset:0;border-radius:4px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0px,rgba(255,255,255,.05) 1px,transparent 1px,transparent 6px);
}

/* paladin — 황금 성기사 */
.plate-paladin{
  background:linear-gradient(100deg,#d97706 0%,#b45309 45%,#78350f 100%);
  box-shadow:0 6px 0 #451a03,0 12px 28px rgba(217,119,6,.55),0 0 0 1px #000;
}
.plate-paladin::before{
  content:'';position:absolute;inset:0;border-radius:4px;
  background:radial-gradient(ellipse at 20% 50%,rgba(255,245,155,.2) 0%,transparent 65%);
}

/* sub-banner 색상 - 직업별로 다르게 */
.cslide:has(.plate-guard) .brawl-sub-banner{color:#fca5a5;}
.cslide:has(.plate-mage) .brawl-sub-banner{color:#c4b5fd;}
.cslide:has(.plate-rogue) .brawl-sub-banner{color:#86efac;}
.cslide:has(.plate-engineer) .brawl-sub-banner{color:#67e8f9;}
.cslide:has(.plate-paladin) .brawl-sub-banner{color:#fde68a;}

.brawl-name{
  font-family:'Arial Black',Impact,'Noto Sans KR',sans-serif;
  font-size:28px;font-weight:900;color:#ffffff;
  text-shadow:-2.5px -2.5px 0 #000,2.5px -2.5px 0 #000,-2.5px 2.5px 0 #000,2.5px 2.5px 0 #000,0 3px 0 #000;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 2px;
  word-break:keep-all;
}
.brawl-role{
  font-family:'Arial Black',Impact,sans-serif;font-size:13px;font-weight:900;
  color:#ffffff;letter-spacing:.04em;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000;
  line-height:1.2;
}
.brawl-type-tag{
  position:absolute;right:14px;bottom:-16px;
  font-family:'Arial Black',Impact,sans-serif;font-size:11px;font-weight:900;
  color:#fda4af;text-shadow:-1.2px -1.2px 0 #000,1.2px -1.2px 0 #000,-1.2px 1.2px 0 #000,1.2px 1.2px 0 #000,0 2px 4px #000;
  letter-spacing:.02em;white-space:nowrap;
}
.brawl-desc{
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:800;line-height:1.5;
  color:#ffffff;text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 3px 6px rgba(0,0,0,.95);
  word-break:keep-all;margin-top:8px;padding:0 4px;
}

#csTop{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 24px) 16px 0;
  font-family:'Arial Black',Impact,sans-serif;font-weight:900;font-size:18px;pointer-events:none;z-index:20;
}
#csTop i{width:40px;}
.csb{pointer-events:auto;width:40px;height:40px;border-radius:50%;background:rgba(20,12,28,.88);border:2px solid #000;box-shadow:0 3px 0 #000;font-size:26px;line-height:1;padding:0 0 3px;color:#fff;}
.csarrow{
  position:absolute;top:calc(50% - 30px);width:44px;height:68px;background:transparent;border:none;
  font-size:46px;color:rgba(255,255,255,.75);padding:0;z-index:15;cursor:pointer;filter:drop-shadow(0 2px 6px #000);
}
.csarrow.l{left:4px;}.csarrow.r{right:4px;}
#csBottom{
  position:absolute;left:0;right:0;bottom:0;
  padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 24px);
  background:linear-gradient(rgba(7,5,10,0),rgba(7,5,10,.97) 32%);z-index:20;
}
#csDots{display:flex;justify-content:center;gap:8px;margin-bottom:6px;}
#csDots b{width:8px;height:8px;border-radius:50%;background:#3a2f47;cursor:pointer;}
#csDots b.on{background:#ffd53d;width:24px;border-radius:4px;box-shadow:0 0 8px rgba(255,213,61,.7);}
#csHint{text-align:center;font-size:12px;color:rgba(255,255,255,.65);margin:0 0 6px;font-weight:700;text-shadow:0 1px 3px #000;}

/* 브롤스타즈 메인 시작 버튼 */
#csGo{
  width:86%;max-width:360px;height:52px;margin:0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffeb3b 0%,#fbc02d 48%,#f57f17 100%)!important;
  border:2.5px solid #000!important;border-radius:14px!important;
  box-shadow:0 6px 0 #000,0 10px 20px rgba(0,0,0,.85)!important;
  color:#110800!important;font-family:'Arial Black',Impact,'Noto Sans KR',sans-serif!important;
  font-size:19px!important;font-weight:900!important;letter-spacing:.02em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.6)!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
#csGo:active{transform:translateY(4px)!important;box-shadow:0 2px 0 #000,0 4px 10px rgba(0,0,0,.9)!important;}
#csGo:disabled{background:#52525b!important;color:#a1a1aa!important;box-shadow:0 4px 0 #000!important;opacity:.65!important;}

/* 지도 (우측 상단 버튼으로 열람) */
#mapov{position:absolute;inset:0;z-index:150!important;background:rgba(6,4,9,.95);display:flex;overflow-y:auto;padding:56px 14px 28px;}
.mbox{margin:auto;width:100%;max-width:400px;text-align:center;}
.mbox h2{font-family:'Noto Serif KR',serif;font-weight:700;font-size:22px;margin:0 0 6px;}
.msheet{margin:10px 0 6px;border-radius:14px;border:1px solid #4a3a22;padding:4px 2px 2px;
  background:radial-gradient(ellipse at 50% 30%,rgba(120,92,52,.22),rgba(0,0,0,0) 70%),
    repeating-linear-gradient(0deg,rgba(255,235,190,.025) 0 2px,transparent 2px 5px),
    linear-gradient(#211a11,#15100b);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7),0 6px 24px #000a;}
#mapsvg{display:block;width:100%;height:auto;}
.me{fill:none;stroke:#7d6a46;stroke-width:2.2;stroke-dasharray:1 7;stroke-linecap:round;opacity:.75;}
.me.nx{stroke:#cdb0ff;stroke-dasharray:none;stroke-width:3.2;opacity:1;}
.me.on{stroke:var(--gold);stroke-dasharray:none;stroke-width:4;opacity:1;}
.mn .nb{fill:#2b2218;stroke:var(--c);stroke-width:2.5;}
.mn .ni{text-anchor:middle;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;pointer-events:none;}
.mn .ck{fill:var(--gold);font-size:13px;font-weight:700;text-anchor:middle;pointer-events:none;}
.mn .ring{fill:none;stroke:var(--c);stroke-width:2;opacity:.55;}
.mn.pass{opacity:.3;}
.mn.done .nb{stroke:var(--gold);stroke-width:3.5;fill:#3a2d14;}
.mn.cur .nb{stroke:#ffe6a8;stroke-width:5;}
.mn.avail .nb{filter:drop-shadow(0 0 7px var(--c));}
.ml{font-size:11px;fill:#8d7c5c;font-family:'Noto Serif KR',serif;}
.ml.nx{fill:var(--gold);font-weight:700;}
.mst{font-size:12px;fill:#b79f73;text-anchor:middle;font-family:'Noto Serif KR',serif;}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;font-size:12px;color:var(--muted);margin:2px 0 6px;}

/* 문 선택 */
.mapline{font-family:'Noto Serif KR',serif;font-size:14px;line-height:1.7;color:#cfc6d8;margin:0 0 6px;}
.sdots{display:flex;gap:6px;justify-content:center;margin:0 0 12px;}
.sdots i{width:22px;height:4px;border-radius:2px;background:#2d2438;}
.sdots i.done{background:var(--purple);}
.sdots i.cur{background:var(--gold);}
.doors{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin:24px 0 16px;}
.door{flex:1 1 0;max-width:118px;display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:0;color:var(--ink);transition:transform .3s,opacity .35s,filter .35s;}
.dleaf{position:relative;display:block;width:100%;aspect-ratio:3/4.7;box-sizing:border-box;border:3px solid var(--c);
  border-radius:50% 50% 3px 3px / 30% 30% 3px 3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 15px),linear-gradient(#211828,#0b070f);
  box-shadow:0 0 14px -2px var(--c),inset 0 0 24px rgba(0,0,0,.85);overflow:hidden;
  animation:dglow 3s ease-in-out infinite;transition:transform .3s;}
.door:nth-child(2) .dleaf{animation-delay:-1s;}
.door:nth-child(3) .dleaf{animation-delay:-2s;}
.dleaf::before{content:'';position:absolute;left:13%;right:13%;top:15%;bottom:9%;border:1px solid rgba(255,255,255,.1);border-radius:50% 50% 2px 2px / 26% 26% 2px 2px;}
.dleaf::after{content:'';position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(rgba(0,0,0,0),var(--c));opacity:.4;}   /* 문틈으로 새는 빛 */
.dic{position:absolute;top:27%;left:0;right:0;text-align:center;font-size:30px;line-height:1;filter:drop-shadow(0 0 8px var(--c));}
.dkn{position:absolute;right:15%;top:60%;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);z-index:1;}
.door b{margin-top:10px;font-size:14px;}
.door small{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4;word-break:keep-all;}
.door:hover .dleaf,.door:focus-visible .dleaf{transform:translateY(-4px);}
.door:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:8px;}
.doors.one .door{max-width:150px;}
.door.boss .dic{font-size:46px;}
.door.pick .dleaf{transform:scale(1.1);animation:none;box-shadow:0 0 40px 6px var(--c),inset 0 0 40px var(--c);}
.door.dimd{opacity:.12;filter:grayscale(1);}
@keyframes dglow{0%,100%{box-shadow:0 0 8px -2px var(--c),inset 0 0 24px rgba(0,0,0,.85);}50%{box-shadow:0 0 22px 0 var(--c),inset 0 0 24px rgba(0,0,0,.85);}}
@keyframes up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.story p,p.story{animation:none;}#hand .cb{animation:none;}.dleaf{animation:none;}}

/* ===== 전환 이펙트 ===== */
#fx{position:absolute;inset:0;z-index:90;pointer-events:none;overflow:hidden;display:none;}
#fx.on{display:block;}

/* 타이틀 → 캐릭터 선택: 회귀(되감기) 균열 */
.fx-sweep{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(142,91,208,0),rgba(142,91,208,.6) 28%,rgba(212,162,74,.5) 30%,rgba(142,91,208,0) 31%);
  opacity:0;animation:fxsweep .85s cubic-bezier(.5,0,.9,.6) forwards;}
@keyframes fxsweep{0%{transform:rotate(0);opacity:0}20%{opacity:1}100%{transform:rotate(-540deg);opacity:0}}
.fx-ring{position:absolute;left:50%;top:50%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;
  border:3px solid rgba(212,162,74,.95);box-shadow:0 0 40px 10px rgba(142,91,208,.8),inset 0 0 40px 10px rgba(142,91,208,.6);
  opacity:0;transform:scale(.1);animation:fxring .9s cubic-bezier(.2,.7,.2,1) forwards;}
.fx-ring.r2{animation-delay:.12s;border-color:rgba(142,91,208,.95);}
.fx-ring.r3{animation-delay:.24s;}
@keyframes fxring{0%{opacity:0;transform:scale(.1)}15%{opacity:1}100%{opacity:0;transform:scale(5)}}
.fx-flash{position:absolute;inset:0;opacity:0;animation:fxflash .85s ease-in-out forwards;
  background:radial-gradient(circle at 50% 50%,#fff 0,#e7d3ff 25%,rgba(142,91,208,.8) 55%,rgba(7,5,10,0) 82%);}
@keyframes fxflash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
#modalBox.leave{animation:fxleave .4s ease-in forwards;}
@keyframes fxleave{to{opacity:0;transform:scale(1.12);filter:blur(6px)}}
#cs.enter{animation:csin .8s ease-out both;}
@keyframes csin{from{opacity:0;transform:scale(1.08);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* 캐릭터 선택 → 게임: 눈 뜨기 */
#cs.leave{animation:csout .55s ease-in forwards;}
@keyframes csout{to{opacity:.35;transform:scale(1.1);filter:blur(4px)}}
.lid{position:absolute;left:0;right:0;height:51%;background:#000;box-shadow:0 0 50px 24px #000;}
.lid.t{top:0;transform:translateY(-135%);}
.lid.b{bottom:0;transform:translateY(135%);}
#fx.close .lid.t,#fx.close .lid.b{transform:none;transition:transform .5s cubic-bezier(.5,0,.8,.4);}
#fx.open .lid.t{animation:lidt 1.4s ease-in-out forwards;}
#fx.open .lid.b{animation:lidb 1.4s ease-in-out forwards;}
@keyframes lidt{0%{transform:translateY(0)}28%{transform:translateY(-34%)}42%{transform:translateY(-8%)}100%{transform:translateY(-135%)}}
@keyframes lidb{0%{transform:translateY(0)}28%{transform:translateY(34%)}42%{transform:translateY(8%)}100%{transform:translateY(135%)}}
.fx-bd{position:absolute;inset:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:fxbd 1.5s ease-out forwards;}
@keyframes fxbd{from{opacity:1}to{opacity:0}}

/* ===== 인트로 로고 ===== */
#intro{position:absolute;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .95s ease;}
#intro.out{opacity:0;pointer-events:none;}
#intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(.94);filter:blur(8px);animation:logoin 1.5s ease-out .3s forwards;}
@keyframes logoin{to{opacity:1;transform:none;filter:none}}
#introTap{position:absolute;left:0;right:0;bottom:calc(14% + env(safe-area-inset-bottom,0px));text-align:center;font-family:'Noto Serif KR',serif;font-size:15px;letter-spacing:.2em;color:#e8dff0;text-shadow:0 2px 10px #000,0 0 18px #000;opacity:0;animation:tapblink 1.8s ease-in-out 2s infinite;}
@keyframes tapblink{0%,100%{opacity:.25}50%{opacity:1}}
#modalBox.titlein{animation:titlein 1.2s ease-out both;}
@keyframes titlein{from{opacity:0;transform:scale(.95);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* ===== 테스트용 스테이지 선택 (DEV) ===== */
#devStage{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 4px;font-size:12px;color:var(--gold);}
#devStage span{margin-right:2px;}
#devStage button{width:34px;height:34px;border-radius:8px;background:rgba(29,23,38,.85);border:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink);}
#devStage button.on{background:var(--gold);border-color:var(--gold);color:#201400;}

/* ===== 승리 연출 ===== */
#vic{position:absolute;inset:0;z-index:80;display:none;cursor:pointer;background:radial-gradient(ellipse at 50% 38%,rgba(0,0,0,0),rgba(0,0,0,.5) 85%);}
#vic.on{display:block;}
#vic.out{animation:vicout .4s ease-in forwards;}
@keyframes vicout{to{opacity:0}}
#vicCv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
#vicFlash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,rgba(255,236,170,.7),rgba(255,160,40,.2) 40%,rgba(0,0,0,0) 72%);opacity:0;animation:vflash .9s ease-out forwards;}
@keyframes vflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#vicWrap{position:absolute;left:0;right:0;top:22%;text-align:center;pointer-events:none;}
.vline{height:3px;margin:0 auto;width:80%;background:linear-gradient(90deg,rgba(255,214,120,0),#ffe3a0 30%,#fffaf0 50%,#ffe3a0 70%,rgba(255,214,120,0));box-shadow:0 0 14px rgba(255,190,80,.8);transform:scaleX(0);opacity:0;animation:vline 1s cubic-bezier(.2,.8,.2,1) .15s forwards;}
.vline.b{animation-delay:.3s;}
@keyframes vline{to{transform:scaleX(1);opacity:1}}
#vicTxt{display:inline-block;margin:12px 0;padding:0 .1em;font-family:'Noto Sans KR',system-ui,sans-serif;font-weight:900;font-style:italic;font-size:min(19vw,98px);line-height:1.05;letter-spacing:.05em;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%),linear-gradient(180deg,#fffaf0 0%,#ffe9a8 36%,#e8a93a 58%,#fff1c4 100%);
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 16px rgba(255,170,50,.6)) drop-shadow(0 5px 10px #000);
  animation:vin 1s cubic-bezier(.16,.84,.24,1) .1s both,vshine 3.4s linear 1.4s infinite;}
@keyframes vin{from{opacity:0;transform:translateX(-110px) skewX(-30deg);letter-spacing:.32em}to{opacity:1;transform:translateX(0) skewX(-10deg);letter-spacing:.05em}}
@keyframes vshine{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
#vicImg{display:block;width:min(90vw,460px);height:auto;margin:0 auto;filter:drop-shadow(0 0 18px rgba(255,170,50,.5)) drop-shadow(0 6px 12px #000);animation:vimg 1s cubic-bezier(.16,.84,.24,1) .1s both,vglow 2.8s ease-in-out 1.2s infinite;}
@keyframes vimg{from{opacity:0;transform:scale(.55) translateY(24px)}to{opacity:1;transform:none}}
@keyframes vglow{0%,100%{filter:drop-shadow(0 0 14px rgba(255,170,50,.35)) drop-shadow(0 6px 12px #000)}50%{filter:drop-shadow(0 0 32px rgba(255,190,80,.9)) drop-shadow(0 6px 12px #000)}}
#vicSub{margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.45em;color:#ffd98a;text-shadow:0 2px 8px #000;opacity:0;animation:vfade .9s ease 1s forwards;}
@keyframes vfade{to{opacity:1}}
#vicTap{position:absolute;left:0;right:0;bottom:calc(12% + env(safe-area-inset-bottom,0px));text-align:center;font-family:'Noto Serif KR',serif;font-size:14px;letter-spacing:.22em;color:#e8dff0;text-shadow:0 2px 10px #000;opacity:0;pointer-events:none;}
#vicTap.on{animation:tapblink 1.6s ease-in-out infinite;}

/* ===== 대화 화면 ===== */
#dlg{position:absolute;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 38%,rgba(142,91,208,.28),rgba(7,5,10,0) 68%),#07050a;display:flex;flex-direction:column;animation:csin .7s ease-out both;}
#dlg .dfig{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding:70px 20px 0;}
#dlg .dfig img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 30px rgba(142,91,208,.55)) drop-shadow(0 10px 24px #000);}
#dlg .dfig .dem{font-size:min(55vw,260px);line-height:1;}
#dlgBox{margin:0 14px calc(16px + env(safe-area-inset-bottom,0px));padding:16px 18px 18px;min-height:128px;background:rgba(20,16,26,.94);border:1px solid var(--purple);border-radius:14px;box-shadow:0 0 24px rgba(142,91,208,.25);position:relative;cursor:pointer;}
#dlgName{font-family:'Noto Serif KR',serif;font-weight:700;font-size:14px;color:var(--gold);margin-bottom:8px;}
#dlgTxt{font-family:'Noto Serif KR',serif;font-size:17px;line-height:1.75;color:#ece6f2;min-height:60px;word-break:keep-all;}
#dlgNext{position:absolute;right:16px;bottom:10px;font-size:14px;color:var(--gold);opacity:0;animation:tapblink 1.2s ease-in-out infinite;}
#dlgSkip{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;background:rgba(29,23,38,.8);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:13px;color:var(--muted);}

/* ===== 내가 맞을 때 ===== */
#app.shk{animation:appshake .5s cubic-bezier(.2,.8,.3,1);}
@keyframes appshake{
  0%{transform:translate(0,0) rotate(0)}
  8%{transform:translate(calc(var(--s) * -1),calc(var(--s) * .5)) rotate(-.6deg)}
  18%{transform:translate(calc(var(--s) * .9),calc(var(--s) * -.6)) rotate(.5deg)}
  30%{transform:translate(calc(var(--s) * -.7),calc(var(--s) * .4)) rotate(-.4deg)}
  44%{transform:translate(calc(var(--s) * .5),calc(var(--s) * -.3)) rotate(.25deg)}
  60%{transform:translate(calc(var(--s) * -.3),calc(var(--s) * .2)) rotate(-.15deg)}
  80%{transform:translate(calc(var(--s) * .12),0) rotate(0)}
  100%{transform:translate(0,0) rotate(0)}}
#hurt{position:absolute;inset:0;z-index:59;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 70px 24px rgba(230,20,20,.95),inset 0 0 220px 70px rgba(130,0,0,.7);}
#hurt.on{animation:hurtp .6s ease-out;}
@keyframes hurtp{0%{opacity:var(--o,1)}100%{opacity:0}}
#pBar.hit{animation:pbhit .5s ease-out;}
@keyframes pbhit{0%{transform:translateX(-7px);box-shadow:0 0 14px 4px #ff3a2a}20%{transform:translateX(7px)}40%{transform:translateX(-5px)}60%{transform:translateX(3px)}100%{transform:none;box-shadow:none}}
@media (prefers-reduced-motion:reduce){#app.shk,#pBar.hit{animation:none;}}

/* HG_WORDWRAP_V1: 한글은 글자 사이에서 끊기지 않고 띄어쓰기에서만 줄바꿈 */
#modal,#modal *,#stov,#stov *,#dlg,#dlg *,#evov,#evov *,#doorov,#doorov *,#vic,#vic *,#msg,#mapov,#mapov *{word-break:keep-all;overflow-wrap:break-word}
/* 마지막 줄에 한두 글자만 남지 않게 줄 길이를 고르게 맞춘다 (타자기처럼 글자가 늘어나는 대화창은 제외) */
#modal p,#stov .stbox p,#evov .evx,#doorov .dtop p,#vic p,#msg{text-wrap:pretty}
#modal .story,#modal .story p,#stov .stbox p,#modal .sub,#doorov .dtop p{text-wrap:balance}

/* ===== 신규 아케이드 스타일 상단 HUD ===== */
#hud.top-hud{
  position:absolute;top:0;left:0;right:0;z-index:55;pointer-events:none;
  display:flex;align-items:stretch;justify-content:space-between;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 12px 10px;
  background:linear-gradient(180deg,rgba(5,3,8,.85) 0%,rgba(5,3,8,.42) 65%,transparent 100%);
  user-select:none;-webkit-user-select:none;font-family:'Arial Black',Impact,'Noto Sans KR',sans-serif;
  height:calc(env(safe-area-inset-top, 0px) + 90px);
  box-sizing:border-box;
}
#hud.top-hud *{box-sizing:border-box;}
#hud.norun{display:none!important;}

.hud-col{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.hud-left{align-items:flex-start;width:125px;}
.hud-center{align-items:center;flex:1;max-width:170px;}
.hud-right{align-items:flex-end;width:125px;}

/* 좌측: LEVEL + 유물 슬롯 (상단선/하단선 정렬) */
.hud-level{
  font-size:14px;font-weight:900;letter-spacing:.5px;color:#fff;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 2px 4px rgba(0,0,0,.9);
  line-height:1;margin:0;padding:0;height:24px;display:flex;align-items:flex-start;
}
.hud-relics{
  pointer-events:auto;display:inline-flex;gap:3px;padding:3px;
  background:rgba(14,18,34,.84);border:1.5px solid rgba(80,105,155,.65);border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.15);cursor:pointer;
  height:31px;box-sizing:border-box;margin:0;
}
.hud-relic-slot{
  width:23px;height:23px;border-radius:5px;background:rgba(22,28,48,.92);
  border:1px solid rgba(110,130,180,.4);display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.hud-relic-slot.empty{background:rgba(8,10,18,.55);border:1px dashed rgba(255,255,255,.2);}
.hud-relic-slot img{width:100%;height:100%;object-fit:contain;display:block;}

/* 중앙: 스코어 + 노란색 발광 HP 바 (상단선/하단선 정렬) */
.hud-score{
  font-size:24px;font-weight:900;letter-spacing:.6px;color:#fff;line-height:1;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 3px 6px rgba(0,0,0,.95);
  margin:0;padding:0;height:24px;display:flex;align-items:flex-start;justify-content:center;
  font-variant-numeric:tabular-nums;transition:transform .15s ease;
}
.hud-score.pop{transform:scale(1.22);}

.hud-hp-wrap{
  position:relative;width:138px;height:22px;display:flex;align-items:center;justify-content:center;
  margin:0;box-sizing:border-box;
}
.hud-hp-glow{
  position:absolute;inset:-4px;border-radius:99px;
  pointer-events:none;animation:hpglowpulse 2s ease-in-out infinite;
  transition:background .35s ease;
}
@keyframes hpglowpulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes hpglowdanger{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}

.hud-hp-bar{
  position:relative;width:100%;height:100%;border-radius:99px;background:#181005;
  border:1.8px solid #fff;overflow:hidden;z-index:1;
  transition:box-shadow .35s ease,border-color .35s ease;
}
.hud-hp-fill{
  height:100%;border-radius:99px;
  transition:width .3s cubic-bezier(.2,.8,.3,1),background .35s ease,box-shadow .35s ease;
}
.hud-hp-specular{
  position:absolute;top:1px;left:6px;right:6px;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,0) 100%);
  border-radius:99px;pointer-events:none;
}

/* 1. 황금색 구간 (80% ~ 100% - 꽉 찼을 때의 화려한 황금 발광) */
.hud-hp-wrap.hp-tier-gold .hud-hp-glow{
  background:radial-gradient(ellipse at 50% 50%,rgba(255,230,60,.75) 0%,rgba(255,180,0,.25) 55%,transparent 75%);
}
.hud-hp-wrap.hp-tier-gold .hud-hp-bar{
  box-shadow:0 0 10px rgba(255,215,0,.9),0 0 18px rgba(255,170,0,.5),inset 0 1px 3px rgba(0,0,0,.8);
}
.hud-hp-wrap.hp-tier-gold .hud-hp-fill{
  background:linear-gradient(180deg,#fffbc2 0%,#ffd43f 40%,#f59e0b 80%,#d97706 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 0 8px rgba(255,230,80,.8);
}

/* 2. 초록색 구간 (55% ~ 79% - 안정적인 생명력의 에메랄드 그린) */
.hud-hp-wrap.hp-tier-green .hud-hp-glow{
  background:radial-gradient(ellipse at 50% 50%,rgba(74,222,128,.7) 0%,rgba(34,197,94,.25) 55%,transparent 75%);
}
.hud-hp-wrap.hp-tier-green .hud-hp-bar{
  box-shadow:0 0 10px rgba(74,222,128,.85),0 0 18px rgba(34,197,94,.5),inset 0 1px 3px rgba(0,0,0,.8);
}
.hud-hp-wrap.hp-tier-green .hud-hp-fill{
  background:linear-gradient(180deg,#dcfce7 0%,#4ade80 40%,#16a34a 80%,#15803d 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 0 8px rgba(74,222,128,.8);
}

/* 3. 주황색 구간 (30% ~ 54% - 주의/경고의 앰버 오렌지) */
.hud-hp-wrap.hp-tier-orange .hud-hp-glow{
  background:radial-gradient(ellipse at 50% 50%,rgba(251,146,60,.75) 0%,rgba(234,88,12,.28) 55%,transparent 75%);
}
.hud-hp-wrap.hp-tier-orange .hud-hp-bar{
  box-shadow:0 0 10px rgba(251,146,60,.9),0 0 18px rgba(234,88,12,.5),inset 0 1px 3px rgba(0,0,0,.8);
}
.hud-hp-wrap.hp-tier-orange .hud-hp-fill{
  background:linear-gradient(180deg,#ffedd5 0%,#fb923c 40%,#ea580c 80%,#c2410c 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 0 8px rgba(251,146,60,.8);
}

/* 4. 붉은색 구간 (0% ~ 29% - 위기/위험의 크림슨 레드 + 긴박한 펄스) */
.hud-hp-wrap.hp-tier-red .hud-hp-glow{
  background:radial-gradient(ellipse at 50% 50%,rgba(248,113,113,.85) 0%,rgba(220,38,38,.35) 55%,transparent 75%);
  animation:hpglowdanger 1.1s ease-in-out infinite;
}
.hud-hp-wrap.hp-tier-red .hud-hp-bar{
  box-shadow:0 0 12px rgba(239,68,68,.95),0 0 20px rgba(220,38,38,.6),inset 0 1px 3px rgba(0,0,0,.8);
}
.hud-hp-wrap.hp-tier-red .hud-hp-fill{
  background:linear-gradient(180deg,#fee2e2 0%,#f87171 40%,#dc2626 80%,#991b1b 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),0 0 10px rgba(239,68,68,.9);
}
.hud-hp-txt{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:900;color:#fff;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 1px 3px #000;
  z-index:2;pointer-events:none;
}

/* 우측: 상단 별/돈/메뉴(상단선 일치) + 하단 방어/특성 게이지 바(하단선 일치) */
.hud-right-top{
  display:flex;align-items:flex-start;justify-content:flex-end;gap:8px;line-height:1;
  margin:0;padding:0;height:24px;
}
.hud-res-chip{
  display:inline-flex;align-items:center;gap:3px;line-height:1;height:24px;
}
.hud-res-ico{font-size:15px;line-height:1;filter:drop-shadow(0 1px 2px #000);}
.hud-res-val{
  font-size:14.5px;font-weight:900;color:#fff;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000;
  font-variant-numeric:tabular-nums;line-height:1;
}
.hud-btn-menu{
  pointer-events:auto;background:none;border:none;cursor:pointer;padding:0 3px;
  display:flex;align-items:center;gap:3px;transition:transform .12s ease;margin-left:3px;height:24px;
}
.hud-btn-menu:active{transform:scale(.88);}
.hud-btn-menu .pause-bar{
  display:block;width:4.5px;height:16px;background:#fff;border-radius:2px;
  box-shadow:-1.2px -1.2px 0 #000,1.2px -1.2px 0 #000,-1.2px 1.2px 0 #000,1.2px 1.2px 0 #000,0 2px 4px rgba(0,0,0,.8);
}

.hud-right-bars{
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;width:116px;margin:0;
}
.hud-gauge-bar{
  position:relative;width:100%;height:13.5px;border-radius:99px;overflow:hidden;box-sizing:border-box;
}

/* 방어 게이지 바 (Blue Capsule) */
.bar-block{
  background:#091626;border:1.4px solid #93c5fd;
  box-shadow:0 0 6px rgba(147,197,253,.4),inset 0 1px 2px rgba(0,0,0,.8);
}
.fill-block{
  height:100%;border-radius:99px;
  background:linear-gradient(180deg,#dbeafe 0%,#60a5fa 45%,#2563eb 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 0 6px rgba(96,165,250,.6);
  transition:width .25s ease;
}

/* 직업 특성 게이지 바 (Class Capsule) */
.bar-class{
  background:#14101e;border:1.4px solid #e9d5ff;
  box-shadow:0 0 6px rgba(216,180,254,.4),inset 0 1px 2px rgba(0,0,0,.8);
}
.fill-class{
  height:100%;border-radius:99px;
  background:linear-gradient(180deg,#f5d0fe 0%,#c084fc 45%,#9333ea 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 0 6px rgba(192,132,252,.6);
  transition:width .25s ease;
}
.bar-class.paladin{border-color:#fde047;box-shadow:0 0 6px rgba(253,224,71,.5);}
.bar-class.paladin .fill-class{background:linear-gradient(180deg,#fef9c3 0%,#facc15 45%,#ca8a04 100%);}
.bar-class.secretary{border-color:#67e8f9;box-shadow:0 0 6px rgba(103,232,249,.5);}
.bar-class.secretary .fill-class{background:linear-gradient(180deg,#cffafe 0%,#38bdf8 45%,#0284c7 100%);}
.bar-class.rogue{border-color:#86efac;box-shadow:0 0 6px rgba(134,239,172,.5);}
.bar-class.rogue .fill-class{background:linear-gradient(180deg,#dcfce7 0%,#4ade80 45%,#16a34a 100%);}
.bar-class.engineer{border-color:#fdba74;box-shadow:0 0 6px rgba(253,186,116,.5);}
.bar-class.engineer .fill-class{background:linear-gradient(180deg,#ffedd5 0%,#fb923c 45%,#ea580c 100%);}

.hud-gauge-txt{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Arial Black',Impact,'Noto Sans KR',sans-serif;font-size:9px;font-weight:900;color:#fff;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  z-index:2;pointer-events:none;white-space:nowrap;
}

/* 스테이지 제목/안내문 위치: 상단 HUD와 겹치지 않도록 아래로 여유있게 배치 */
#doorov .dtop{
  padding-top:calc(env(safe-area-inset-top, 0px) + 98px)!important;
}

/* 전투 중 pTop 스타일 조절: pBar 및 pInfo 숨김 (에너지 구슬만 깔끔하게 표시) */
#pTop{top:calc(env(safe-area-inset-top, 0px) + 90px)!important;background:none!important;box-shadow:none!important;padding:0 10px!important;}
#pTop #pInfo{display:none!important;}
#pTop #pBar{display:none!important;}

/* ===== 브롤스타즈 상점 팩 스타일의 시원시원한 유물 선택 UI ===== */
#modal:has(.brawl-relic-picker),#modal:has(.rcard){
  padding:calc(env(safe-area-inset-top, 0px) + 16px) 8px calc(env(safe-area-inset-bottom, 0px) + 20px)!important;
  display:flex;align-items:center;justify-content:center;
}
#modal:has(.brawl-relic-picker) #modalBox,#modal:has(.rcard) #modalBox{
  max-width:480px!important;width:100%!important;margin:auto!important;
}

.brawl-relic-picker{
  width:100%;display:flex;flex-direction:column;align-items:center;
}
.brp-header{
  margin-bottom:10px;text-align:center;
}
.brp-tag{
  display:inline-block;background:#000;border:1.5px solid #ffd45a;border-radius:99px;
  color:#ffd45a;font-family:'Arial Black',Impact,sans-serif;font-size:11px;font-weight:900;
  padding:2px 12px;letter-spacing:.08em;margin-bottom:4px;box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.brp-title{
  font-family:'Arial Black',Impact,'Noto Sans KR',sans-serif;font-size:25px;font-weight:900;
  color:#ffeb3b;margin:0 0 3px;letter-spacing:.02em;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 4px 0 #b45309,0 6px 14px rgba(0,0,0,.9);
}
.brp-sub{
  color:#e2d9f3;font-size:12px;opacity:.88;margin:0;text-shadow:0 1px 4px #000;word-break:keep-all;
}

.shrow:has(.rcard){
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  justify-content:center!important;align-items:stretch!important;gap:8px!important;
  width:100%!important;margin:8px 0 12px!important;
}
.shi:has(.rcard){
  flex:1 1 0!important;min-width:0!important;max-width:148px!important;
  display:flex!important;flex-direction:column!important;cursor:pointer;
}
/* 상점 박스: 설명이 길면 박스도 늘어나고 같은 줄은 가장 긴 것에 맞춤 */
.shi .rcard{height:auto!important;min-height:280px!important;flex:1 1 auto!important;}

.rcard{
  box-sizing:border-box;width:100%;height:280px;zoom:1!important;
  border-radius:16px;border:3px solid #000;
  box-shadow:0 8px 0 rgba(0,0,0,.7),0 14px 26px rgba(0,0,0,.85);
  display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;
  position:relative;overflow:visible;padding:0 0 8px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease;
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;
}
.rcard:hover{
  transform:translateY(-5px);
  box-shadow:0 13px 0 rgba(0,0,0,.75),0 18px 30px rgba(0,0,0,.9);
}
.rcard:active{
  transform:translateY(2px);
  box-shadow:0 4px 0 rgba(0,0,0,.8);
}

/* 등급별 선명한 브롤스타즈 그라데이션 */
.rcard.tier-common{
  background:linear-gradient(180deg,#0284c7 0%,#0369a1 45%,#075985 100%);
}
.rcard.tier-uncommon{
  background:linear-gradient(180deg,#10b981 0%,#059669 45%,#047857 100%);
}
.rcard.tier-rare{
  background:linear-gradient(180deg,#8b5cf6 0%,#7c3aed 45%,#5b21b6 100%);
}
.rcard.tier-legend{
  background:linear-gradient(180deg,#f59e0b 0%,#d97706 45%,#92400e 100%);
}
.rcard.tier-risk{
  background:linear-gradient(180deg,#ef4444 0%,#dc2626 45%,#7f1d1d 100%);
}

.rcard.tier-service{
  background:linear-gradient(180deg,#18181b 0%,#09090b 60%,#020617 100%);
}
.rcard .ri{
  font-size:62px!important;line-height:1!important;text-align:center;
  margin:16px 0 10px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.85));
}
.rcard .rt{
  font-size:12px;font-weight:900;letter-spacing:.08em;text-align:center;padding-top:10px;
}
.rcard .rn{
  font-size:18px;font-weight:900;color:#fff;text-align:center;margin:4px 0 6px;
  text-shadow:0 2px 4px rgba(0,0,0,.8);
}
.rcard .rd{
  font-size:13px;color:#cbd5e1;text-align:center;padding:0 12px;line-height:1.35;
}

/* 카툰 방사선 썬버스트 */
.rc-sunburst{
  position:absolute;inset:0;pointer-events:none;border-radius:13px;overflow:hidden;
  background:repeating-conic-gradient(from 0deg at 50% 36%,rgba(255,255,255,.09) 0deg 15deg,transparent 15deg 30deg);
  mask-image:radial-gradient(circle at 50% 36%,black 45%,transparent 95%);
  -webkit-mask-image:radial-gradient(circle at 50% 36%,black 45%,transparent 95%);
}

/* 상단 3D 리본 태그 */
.rc-top-ribbon{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  border:2px solid #000;border-radius:6px;
  font-family:'Arial Black',Impact,sans-serif;font-size:10px;font-weight:900;color:#fff;
  padding:1px 8px;text-transform:uppercase;letter-spacing:.05em;line-height:1.3;
  z-index:5;text-shadow:0 1px 2px #000;
}
.rcard.tier-common .rc-top-ribbon{background:#0284c7;box-shadow:0 3px 0 #0369a1;}
.rcard.tier-uncommon .rc-top-ribbon{background:#10b981;box-shadow:0 3px 0 #047857;}
.rcard.tier-rare .rc-top-ribbon{background:#a855f7;box-shadow:0 3px 0 #6b21a8;}
.rcard.tier-legend .rc-top-ribbon{background:#f59e0b;box-shadow:0 3px 0 #b45309;}
.rcard.tier-risk .rc-top-ribbon{background:#ef4444;box-shadow:0 3px 0 #991b1b;}

/* 상단 헤더 스트립 */
.rc-head-strip{
  background:rgba(0,0,0,.6);border-bottom:2px solid rgba(0,0,0,.35);
  border-top-left-radius:13px;border-top-right-radius:13px;
  padding:10px 4px 5px;text-align:center;
  font-family:'Arial Black',Impact,sans-serif;font-size:11px;font-weight:900;
  color:#ffffff;text-transform:uppercase;letter-spacing:.04em;
  text-shadow:0 2px 4px #000;z-index:2;position:relative;
}

/* 중앙 유물 아이콘 & 광채 */
.rc-art-wrap{
  height:98px;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;margin:4px 0 2px;
}
.rc-art-glow{
  position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
}
.rcard.tier-common .rc-art-glow{background:radial-gradient(circle,rgba(56,189,248,.4) 0%,transparent 70%);}
.rcard.tier-uncommon .rc-art-glow{background:radial-gradient(circle,rgba(52,211,153,.4) 0%,transparent 70%);}
.rcard.tier-rare .rc-art-glow{background:radial-gradient(circle,rgba(192,132,252,.45) 0%,transparent 70%);}
.rcard.tier-legend .rc-art-glow{background:radial-gradient(circle,rgba(251,191,36,.48) 0%,transparent 70%);}
.rcard.tier-risk .rc-art-glow{background:radial-gradient(circle,rgba(248,113,113,.48) 0%,transparent 70%);}

.rc-art-img{
  position:relative;z-index:2;transition:transform .2s ease;
}
.rc-art-img img{
  width:76px!important;height:76px!important;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.9));
}
.rcard:hover .rc-art-img{transform:scale(1.08);}

/* 중앙 텍스트 정보 */
.rc-info{
  padding:0 6px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:2;position:relative;
}
.rc-title{
  font-family:'Noto Sans KR',sans-serif;font-size:14.5px;font-weight:900;
  color:#ffeb3b;line-height:1.22;margin-bottom:5px;word-break:keep-all;text-align:center;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 3px 0 #000;
}
.rc-desc{
  font-family:'Noto Sans KR',sans-serif;font-size:11px;font-weight:700;
  color:#ffffff;line-height:1.35;word-break:keep-all;text-align:center;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
  background:rgba(0,0,0,.42);border-radius:8px;padding:5px 6px;width:100%;box-sizing:border-box;
}

/* 하단 3D 액션 버튼 */
.rc-btn-wrap{
  position:relative;width:calc(100% - 14px);margin:6px auto 0;z-index:3;
}
.rc-btn{
  width:100%;height:38px;border-radius:10px;box-sizing:border-box;
  background:linear-gradient(180deg,#ffe033 0%,#f59e0b 100%);
  border:2.2px solid #000;
  box-shadow:0 4px 0 #b45309,0 6px 10px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:'Arial Black',Impact,'Noto Sans KR',sans-serif;font-size:14px;font-weight:900;
  color:#1e1302;text-shadow:0 1px 0 rgba(255,255,255,.5);letter-spacing:.04em;
  transition:transform .12s,box-shadow .12s,background .12s;
}
.rcard:hover .rc-btn{
  background:linear-gradient(180deg,#fff176 0%,#fbbf24 100%);
}
.rcard:active .rc-btn{
  transform:translateY(3px);box-shadow:0 1px 0 #b45309,0 2px 4px rgba(0,0,0,.5);
}
.rc-btn-badge{
  position:absolute;right:-5px;top:-8px;
  background:#ff1464;border:1.5px solid #000;border-radius:6px;
  color:#fff;font-family:'Arial Black',Impact,sans-serif;font-size:9px;font-weight:900;
  padding:1px 5px;transform:rotate(5deg);box-shadow:0 2px 0 #990033;z-index:4;
  text-shadow:0 1px 2px #000;letter-spacing:.02em;
}

/* 건너뛰기 버튼 */
.brp-skip{
  margin:6px auto 0!important;width:auto!important;min-width:120px;
  padding:8px 18px!important;border-radius:8px;font-size:13px!important;
}

/* ===== 하단에서 올라오는 메뉴 시트 (Bottom Sheet) ===== */
.sheet-overlay{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center;
  pointer-events:auto;
}
.sheet-overlay.hidden{display:none!important;}
.sheet-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease;
}
.sheet-overlay.active .sheet-backdrop{opacity:1;}
.sheet-box{
  position:relative;width:100%;max-width:500px;background:#14101e;
  border-top:2px solid #ffd45a;border-radius:20px 20px 0 0;padding:16px 20px 30px;
  box-shadow:0 -10px 40px rgba(0,0,0,.85);transform:translateY(100%);
  transition:transform .28s cubic-bezier(.16,1,.3,1);color:#e8dfc8;
}
.sheet-overlay.active .sheet-box{transform:translateY(0);}
.sheet-pill{width:42px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 14px;}
.sheet-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
  border-bottom:1px solid rgba(255,212,90,.15);padding-bottom:10px;
}
.sheet-title{font-family:'Noto Serif KR',serif;font-size:16px;font-weight:700;color:#ffd45a;}
.sheet-x-btn{
  background:none;border:1px solid rgba(255,255,255,.2);border-radius:50%;width:28px;height:28px;
  color:#bbb;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.sheet-x-btn:hover{background:rgba(255,255,255,.1);color:#fff;}
.sheet-group{margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:14px;}
.sheet-groupttl{font-size:12px;font-weight:700;color:#ffd45a;margin-bottom:8px;opacity:.9;}
.sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;}
.sheet-range{flex:1;accent-color:#ffd45a;height:6px;cursor:pointer;}
.sheet-vol-val{min-width:40px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:#ffd45a;font-size:13px;}
.sheet-toggle-btn{
  background:rgba(255,212,90,.15);border:1px solid rgba(255,212,90,.35);border-radius:8px;
  padding:6px 14px;color:#ffd45a;font-weight:700;font-size:13px;cursor:pointer;
}
.sheet-btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.sheet-grid-btn{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:10px;
  padding:10px 4px;color:#eee;font-size:13px;font-weight:600;cursor:pointer;text-align:center;
}
.sheet-grid-btn:hover{background:rgba(255,212,90,.15);border-color:rgba(255,212,90,.4);}
.sheet-quit-btn{
  width:100%;background:rgba(220,50,50,.15);border:1px solid rgba(220,50,50,.4);border-radius:10px;
  padding:11px;color:#ff8585;font-weight:700;font-size:14px;cursor:pointer;
}
.sheet-quit-btn:hover{background:rgba(220,50,50,.3);}

#csGo{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0 12px;   /* 위아래 같게. 글자가 아직 낮으면 padding:0 12px 4px 처럼 아래 값을 키움 */
}
/* buy-ui */
#csBuyBox{width:86%;max-width:360px;margin:0 auto;display:none;}
#csBuy{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;
  background:var(--c,#2e9e4f);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 62%,#fff) 0%,var(--c) 52%,color-mix(in srgb,var(--c) 68%,#000) 100%);
  border:2.5px solid #000;border-radius:14px;color:#fff;font-size:22px;font-weight:900;
  text-shadow:0 2px 0 rgba(0,0,0,.65),0 0 6px rgba(0,0,0,.5);
  box-shadow:0 6px 0 #000,0 10px 20px rgba(0,0,0,.85);cursor:pointer;
}
#csBuy:active{transform:translateY(4px);box-shadow:0 2px 0 #000,0 4px 10px rgba(0,0,0,.9);}
#csBuy img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 2px #000);}
#csBuyBox .cbrow{display:flex;gap:8px;margin-top:14px;}
#csBuyBox .cbrow button{
  flex:1;padding:8px 6px;font-size:12px;font-weight:700;color:#eee;cursor:pointer;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:10px;
}

/* HUD_FIT_NARROW_V1: 좁은 화면(360px 등)에서 상단 HUD가 잘리지 않도록 */
@media (max-width:420px){
  #hud.top-hud{padding-left:8px;padding-right:8px;}
  #hud.top-hud .hud-left{width:clamp(92px,29vw,125px);flex:0 1 auto;min-width:0;}
  #hud.top-hud .hud-right{width:clamp(100px,32vw,125px);flex:0 1 auto;min-width:0;}
  #hud.top-hud .hud-center{flex:1 1 0;min-width:0;max-width:170px;}
  #hud.top-hud .hud-hp-wrap{max-width:100%;}
  #hud.top-hud .hud-relics{max-width:100%;}
  #hud.top-hud .hud-relic-slot{min-width:0;flex-shrink:1;}
  #hud.top-hud .hud-right-top{gap:5px;}
  #hud.top-hud .hud-res-val{font-size:13px;}
  #hud.top-hud .hud-right-bars{width:100%;}
}

/* HTML_TOP_PAD_OFF_V1: 최상위(html) 상단 여백 제거. 각 화면(HUD 등)이 safe-area를 직접 처리함 */
html,:root{padding-top:0!important;}

/* MEM_ICON_TOP_V1_CSS: 우측 상단 기억 아이콘 + 하단 기억 칸이 빠진 높이만큼 이름 배너를 아래로 */
#csTop #csMem.csb{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:none;border:none;box-shadow:none;border-radius:50%;}
#csMem img{width:48px;height:48px;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 8px rgba(190,24,93,.55));}
#csMem em{position:absolute;right:-9px;bottom:-5px;font-style:normal;font-family:'Arial Black',Impact,sans-serif;font-size:10px;font-weight:900;line-height:1.1;color:#fff;background:#7f1d1d;border:2px solid #000;border-radius:9px;padding:1px 5px;box-shadow:0 2px 0 #000;pointer-events:none;}
#csMem:active{transform:scale(.92);}
.cslide{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 154px)!important;}

/* NAME_POS_V1 */
.cslide{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 100px)!important;}

/* HG_TABLET_SCALE_V1 : 큰 화면에서만 게임 열을 확대 (html.hg-big 은 game.js 가 붙인다) */
html.hg-big #app{
  height:calc(100% / var(--gs,1));
  scale:var(--gs,1);
  transform-origin:50% 0;
}

/* HG_TABLET_FILL_V1 : 큰 화면에서 게임 상자의 가로를 화면 폭에 맞춤 (상한 640px) */
html.hg-big #app{max-width:calc(100vw / var(--gs,1));}

/* HG_PC_FILL_V1 : PC(넓은 창)에서 게임 열 양옆을 현재 스테이지 배경(흐리고 어둡게)으로 채우고 전체화면 버튼을 둔다 */
#hgFs{display:none;position:fixed;right:14px;bottom:14px;z-index:99990;width:38px;height:38px;padding:0;border-radius:50%;
  align-items:center;justify-content:center;background:rgba(14,10,24,.72);border:1px solid rgba(212,175,55,.45);color:#e5b567;cursor:pointer;}
#hgFs:hover{background:rgba(40,28,60,.92);border-color:#e5b567;}
#hgFs svg{width:18px;height:18px;display:block;}
@media (min-width:820px){
  body{background:transparent!important;}
  html::before{content:"";position:fixed;inset:-40px;z-index:-1;pointer-events:none;
    background:linear-gradient(rgba(6,4,9,.72),rgba(6,4,9,.84)),var(--hg-side,url(/img/bg/field_bg.webp)) center/cover no-repeat;
    filter:blur(16px) saturate(.9);}
  #hgFs{display:flex;}
}

/* PC_WIDE_V1: PC 폭에서는 게임 화면을 전체 폭으로 */
@media (min-width:900px) and (orientation:landscape){#app{max-width:none!important}}

/* PC_CHAR_V1: PC 영웅 선택 — 배경(pcbg)은 화면 가득, 캐릭터(pcfg)는 원래 비율로 가운데 */
.cslide .cimg.pcbg{object-position:center;}
.cslide .pcbg.fb{filter:blur(16px) brightness(.5);transform:scale(1.15);}
.cslide .pcfg{position:absolute;left:50%;top:0;height:100%;width:auto;max-width:100%;transform:translateX(-50%);object-fit:contain;object-position:center top;pointer-events:none;z-index:1;}
.cslide.lock .pcbg,.cslide.lock .pcfg{filter:brightness(.14) grayscale(1);}
.cslide.lock .pcbg.fb{filter:blur(16px) brightness(.14) grayscale(1);}

/* HG_PCFULL_V1: PC 영웅 선택 — 16:9 한 장을 화면 가득(cover), 얼굴이 위쪽에 있어 세로는 위쪽 기준 */
.cslide .cimg.pcbg{object-fit:cover;object-position:center 30%;}

/* HG_FIT_UI_V1: PC 폭에서 hg-big(확대) 상태일 때 폭을 100vw/--gs 로 묶어 UI 양끝이 잘리지 않게 한다 */
@media (min-width:900px) and (orientation:landscape){html.hg-big #app{max-width:calc(100vw / var(--gs,1))!important}}

/* HG_INTRO_CI_V2 : 인트로 - 검은 배경, 로고가 작게 시작해서 쭉 커진다 */
#intro{
  --S:min(80vmin,560px);
  background:#000 !important;
}
@supports (width:1cqmin){
  #intro{container-type:size;--S:min(80cqmin,560px);}
}
#intro img{
  right:auto !important;bottom:auto !important;
  left:calc(50% - var(--S) / 2) !important;
  top:calc(46% - var(--S) / 2) !important;
  width:var(--S) !important;height:var(--S) !important;
  object-fit:contain !important;object-position:center;
  transform-origin:50% 50%;
  animation:hgCiGrow 2.4s cubic-bezier(.16,.84,.3,1) .2s forwards !important;
}
@keyframes hgCiGrow{
  from{opacity:0;transform:scale(.25);filter:none}
  20%{opacity:1}
  to{opacity:1;transform:scale(1);filter:none}
}
#intro #introTap{
  position:absolute;left:0;right:0;top:auto;
  bottom:calc(env(safe-area-inset-bottom,0px) + 8%);
  text-align:center;letter-spacing:.14em;
  color:rgba(244,238,252,.85);text-shadow:0 1px 8px rgba(8,4,16,.8);
}

/* hero-stats */
.hstat{display:flex;gap:14px;margin:8px 0 0 6px;position:relative;pointer-events:none;}
.hs{width:76px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.hs-l{font-family:'Arial Black',Impact,sans-serif;font-style:italic;font-weight:900;font-size:10.5px;line-height:1.1;letter-spacing:.01em;
  color:#fff247;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 2px 0 #000;}
.hs-b{width:50px;height:55px;display:block;overflow:visible;}
.hs-sh{fill:#000;}
.hs-hex{fill:var(--c,#dc2626);stroke:#000;stroke-width:3;stroke-linejoin:round;}
.hs-hl{fill:rgba(255,255,255,.25);}
.hs-v{font-family:'Arial Black',Impact,sans-serif;font-weight:900;font-size:13px;line-height:1.1;color:#fff;
  text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 2px 0 #000;}
.hs.full .hs-hex{fill:#ffcf3a;}
.hs.full .hs-hl{fill:rgba(255,255,255,.4);}
.hs.full .hs-b{filter:drop-shadow(0 0 6px rgba(255,210,70,.9));}
.hs.full .hs-v{color:#ffe27a;}

/* hero-stats-2 */
/* 이름판은 너비 calc(100% - 12px) 라서, 메달 줄도 같은 너비로 잡고 오른쪽 끝에 맞춘다.
   메달이 이름판 끝선에서 떨어져 보이면 --hs-shift 를 키우고(오른쪽으로), 넘치면 줄이세요. */
.hstat{width:calc(100% - 12px);margin:0 0 8px 0;gap:8px;justify-content:flex-end;
  transform:translateX(var(--hs-shift,6px));}
.hs{width:68px;}
.hs-l{font-size:10px;}
.hstat .hs:last-child{margin-right:-9px;}   /* 메달 그림(50px)의 오른쪽 끝을 박스 끝에 맞춘다 */

/* 스토리 컷신 하단 버튼 배너 크기 제한 */
#stov .stbox .stgo{
  display:block!important;
  width:86%!important;
  max-width:360px!important;
  margin:10px auto 0!important;
  box-sizing:border-box!important;
}

/* HG_LOGIN_ALIGN_V1 : .btn 은 최대 360px 로 가운데 정렬인데 구글 로그인 영역(.gwrap)만 제한이 없어 넓은 화면에서 왼쪽으로 쏠렸다. 같은 폭·정렬로 맞춘다 */
#gbtn .gwrap,.acg .gwrap{max-width:360px;margin-left:auto;margin-right:auto}

/* HG_DLG_TRANSPARENT_V1 : 대화(독백) 장면 배경을 투명하게 -> 뒤의 움직이는 복도가 보인다 */
#dlg{background:transparent !important;}