/* 조이 포커 -- 디자인 시안 A(theme.css) 위에 게임 전용 화면. */
.jp-wrap{
  max-width:720px;
}
body.jp-in-game .jp-wrap{
  max-width:1180px;
  padding-top:20px;
  text-align:left;
}
.jp-screen{ position:relative; }

/* ---------- 시작 ---------- */
.jp-best{
  margin-top:18px;
  font-weight:700;
  color:var(--warn);
}
.jp-title-btns{ margin-top:26px; }
.jp-rules-btn{ margin-top:14px; }

/* ---------- 캐릭터 선택 (하스스톤식 아치 카드) ---------- */
.jp-pick-btns{ display:flex; justify-content:center; gap:10px; }
.jp-pick-title{
  font-size:clamp(26px,4vw,36px);
  font-weight:800;
  letter-spacing:-0.03em;
}
.jp-pick-sub{
  margin-top:6px;
  color:var(--sub);
  font-size:14px;
}
.jp-pick-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin:28px auto 22px;
}
.jp-hero{
  --char-color:#45e6ff;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 14px 18px;
  font:inherit;
  color:var(--text);
  text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--char-color) 14%, transparent), rgba(255,255,255,0.03));
  border:1px solid color-mix(in srgb, var(--char-color) 45%, transparent);
  border-radius:140px 140px 18px 18px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.jp-hero:hover{
  transform:translateY(-6px);
  border-color:var(--char-color);
  box-shadow:0 14px 36px color-mix(in srgb, var(--char-color) 30%, transparent);
}
.jp-hero-art{
  width:100%;
  aspect-ratio:3 / 4;
  border-radius:130px 130px 12px 12px;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--char-color) 55%, #111), #0a0d18 75%);
  border:2px solid color-mix(in srgb, var(--char-color) 70%, #fff 0%);
  display:grid;
  place-items:center;
}
.jp-hero-art img,
.jp-char-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.jp-hero-art.no-art,
.jp-char-art.no-art{
  font-size:64px;
  font-weight:900;
  color:rgba(255,255,255,0.85);
  text-shadow:0 4px 18px rgba(0,0,0,0.5);
}
.jp-hero-name{
  margin-top:4px;
  font-size:18px;
  font-weight:800;
}
.jp-hero-ab{
  width:100%;
  font-size:12.5px;
  line-height:1.5;
  color:var(--sub);
  text-align:left;
}
.jp-ability-kind{
  display:inline-block;
  margin-right:6px;
  padding:1px 7px;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  color:var(--text);
  background:rgba(255,255,255,0.1);
}
.jp-ability-kind.active{
  color:#061018;
  background:var(--cyan);
}

/* ---------- 게임 레이아웃 ---------- */
.jp-layout{
  display:grid;
  grid-template-columns:270px minmax(0, 1fr);
  gap:18px;
  align-items:start;
}
.jp-side{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.jp-panel{
  padding:16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.jp-round-name{
  font-size:18px;
  font-weight:800;
}
.jp-round-name.boss{ color:var(--danger); }
.jp-boss-rule{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  color:#ffc2cc;
  background:rgba(255,107,129,0.1);
  border:1px solid rgba(255,107,129,0.3);
}
.jp-boss-rule b{ margin-right:6px; color:#fff; }
.jp-target-row,
.jp-score-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:10px;
  font-size:13px;
  color:var(--sub);
}
.jp-target-row b{ font-size:20px; color:var(--text); }
.jp-score-row b{ font-size:26px; color:var(--cyan); }
.jp-progress{
  height:6px;
  margin-top:8px;
  border-radius:3px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}
.jp-progress i{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--cyan), #9b7bff);
  transition:width .4s ease;
}
.jp-counters{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin-top:12px;
}
.jp-counter{
  padding:8px 6px;
  border-radius:10px;
  text-align:center;
  background:rgba(255,255,255,0.04);
}
.jp-counter small{ display:block; font-size:11px; color:var(--sub); }
.jp-counter b{ font-size:20px; }
.jp-counter.plays b{ color:#6fb6ff; }
.jp-counter.discards b{ color:var(--danger); }
.jp-counter.money b{ color:var(--warn); }

.jp-char-panel{
  --char-color:#45e6ff;
  border-color:color-mix(in srgb, var(--char-color) 35%, transparent);
}
.jp-char-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.jp-char-art{
  width:56px;
  height:56px;
  border-radius:50%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--char-color) 60%, #111), #0a0d18 80%);
  border:2px solid var(--char-color);
  display:grid;
  place-items:center;
}
.jp-char-art.no-art{ font-size:24px; }
.jp-char-name{ font-size:16px; font-weight:800; }
.jp-char-tag{ font-size:11.5px; color:var(--sub); }
.jp-ability{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--sub);
}
.jp-active-btn{
  width:100%;
  margin-top:12px;
}
.jp-active-hint{
  margin-top:6px;
  min-height:16px;
  font-size:12px;
  font-weight:700;
  color:var(--cyan);
}

/* ---------- 증강 ---------- */
.jp-aug-row{
  display:grid;
  grid-template-columns:repeat(var(--slots, 6), minmax(0, 1fr));
  gap:8px;
}
.jp-aug{
  min-height:74px;
  padding:9px 10px;
  border-radius:12px;
  font:inherit;
  text-align:left;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
}
.jp-aug.empty{
  display:grid;
  place-items:center;
  color:rgba(255,255,255,0.25);
  font-size:12px;
  border-style:dashed;
}
.jp-aug.rarity-1{ border-color:rgba(160,200,230,0.35); }
.jp-aug.rarity-2{ border-color:rgba(69,230,255,0.5); background:rgba(69,230,255,0.06); }
.jp-aug.rarity-3{ border-color:rgba(255,207,90,0.6); background:rgba(255,207,90,0.07); }
.jp-aug.doubled{ box-shadow:0 0 0 2px #b34be0; }
.jp-aug-name{ font-size:13px; font-weight:800; }
.jp-aug-desc{ margin-top:3px; font-size:11.5px; line-height:1.4; color:var(--sub); }
.jp-aug-rarity{ font-size:10.5px; font-weight:700; color:var(--sub); margin-bottom:2px; }
button.jp-aug{ cursor:pointer; }
button.jp-aug:hover:not(:disabled){ border-color:var(--danger); }

/* ---------- 플레이 영역 ---------- */
.jp-main{ min-width:0; }
.jp-play-area{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:150px;
  margin:14px 0;
  padding:14px;
  border-radius:var(--radius);
  background:rgba(0,0,0,0.22);
  border:1px solid var(--line);
}
.jp-preview{
  flex:0 0 220px;
  text-align:center;
}
.jp-preview-hand{ font-size:16px; font-weight:800; }
.jp-preview-calc{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.jp-chips,
.jp-mult{
  min-width:70px;
  padding:8px 10px;
  border-radius:10px;
  font-family:'Orbitron',var(--font);
  font-size:22px;
  font-weight:800;
}
.jp-chips{ background:rgba(69,150,255,0.18); color:#8ec5ff; }
.jp-mult{ background:rgba(255,107,129,0.18); color:#ff9aab; }
.jp-x{ font-size:20px; font-weight:800; color:var(--sub); }
.jp-preview-note{ margin-top:8px; min-height:18px; font-size:12.5px; color:var(--sub); }
.jp-played{
  flex:1;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

/* ---------- 카드 ---------- */
.jp-card{
  position:relative;
  width:74px;
  height:104px;
  flex-shrink:0;
  border-radius:9px;
  background:linear-gradient(180deg, #ffffff, #e9edf3);
  color:#1b2230;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.jp-card.red{ color:#d23a50; }
.jp-card.temp{ background:linear-gradient(180deg, #f3e9ff, #dccbf5); }
.jp-card-corner{
  position:absolute;
  top:5px;
  left:6px;
  font-size:14px;
  font-weight:800;
  line-height:1.05;
  text-align:center;
}
.jp-card-corner.br{
  top:auto;
  left:auto;
  right:6px;
  bottom:5px;
  transform:rotate(180deg);
}
.jp-card-suit{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-size:34px;
}
.jp-hand{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  padding-top:18px;
}
.jp-hand .jp-card:hover{ transform:translateY(-6px); }
.jp-hand .jp-card.selected{
  transform:translateY(-18px);
  box-shadow:0 0 0 3px var(--cyan), 0 10px 22px rgba(69,230,255,0.3);
}
.jp-played .jp-card{ cursor:default; }
.jp-played .jp-card.dim{ opacity:.45; }
.jp-played .jp-card.scoring{ transform:translateY(-8px); box-shadow:0 0 0 3px #6fb6ff, 0 10px 22px rgba(111,182,255,0.35); }
.jp-pop{
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  padding:1px 8px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:#3f86e8;
  animation:jpPop .35s ease;
}
.jp-pop.sealed{ background:#7a2d3c; }
@keyframes jpPop{ from{ transform:translate(-50%, 6px); opacity:0; } to{ transform:translate(-50%, 0); opacity:1; } }

.jp-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
}
.jp-sort, .jp-actions{ display:flex; gap:8px; }
.jp-actions .btn{ min-width:120px; }
.jp-deck-info{ font-size:12.5px; color:var(--sub); }

/* ---------- 상점 ---------- */
.jp-shop-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.jp-shop-title{ font-size:28px; font-weight:800; }
.jp-shop-sub{ margin-top:4px; font-size:13.5px; color:var(--sub); }
.jp-shop-money{ font-family:'Orbitron',var(--font); font-size:30px; font-weight:800; color:var(--warn); }
.jp-shop-label{ margin:22px 0 10px; font-size:15px; font-weight:700; }
.jp-shop-label small{ margin-left:6px; font-weight:500; color:var(--sub); }
.jp-shop-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.jp-shop-item{
  position:relative;
  min-height:110px;
  cursor:pointer;
  transition:transform .15s ease;
}
.jp-shop-item:hover:not(:disabled){ transform:translateY(-3px); }
.jp-shop-item.sold{ opacity:.4; cursor:default; }
.jp-level{ border-color:rgba(155,123,255,0.5); background:rgba(155,123,255,0.07); }
.jp-price{
  margin-top:10px;
  font-family:'Orbitron',var(--font);
  font-size:16px;
  font-weight:800;
  color:var(--warn);
}
.jp-shop-owned{ grid-template-columns:repeat(var(--slots, 6), minmax(0, 1fr)); }
.jp-shop-btns{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
}

/* ---------- 게임 오버 ---------- */
#overScreen{ text-align:center; padding-top:40px; }
.jp-over-title{ font-size:40px; font-weight:900; color:var(--danger); }
.jp-over-stage{ margin-top:12px; font-size:24px; font-weight:800; }
.jp-over-detail{ margin:10px 0 26px; color:var(--sub); }

/* ---------- 모달 ---------- */
.jp-modal{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,4,10,0.72);
  backdrop-filter:blur(4px);
}
.jp-modal-box{
  width:100%;
  max-width:440px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:24px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(20,28,48,0.98), rgba(9,12,22,0.98));
  border:1px solid var(--line);
  text-align:center;
}
.jp-modal-title{ font-size:22px; font-weight:800; }
.jp-modal-sub{ margin-top:6px; color:var(--sub); font-size:13.5px; }
/* ---------- 정산 화면 (라운드 클리어) ---------- */
.jp-cash-box{
  max-width:480px;
  padding:16px;
  text-align:left;
  background:#0f3445;
  border:2px solid #2c6378;
}
.jp-coin{
  display:inline-grid;
  place-items:center;
  width:26px;
  height:26px;
  margin-left:-6px;
  border-radius:50%;
  font-style:normal;
  font-family:'Orbitron',var(--font);
  font-size:13px;
  font-weight:900;
  color:#7a4a00;
  background:radial-gradient(circle at 35% 30%, #ffe48a, #f5b82e 60%, #d48a12);
  box-shadow:0 0 0 2px #8a5a0a, 0 2px 0 2px rgba(0,0,0,0.35);
}
.jp-coin:first-child{ margin-left:0; }
.jp-coin.sm{ width:16px; height:16px; margin:0 2px 0 0; font-size:9px; vertical-align:-2px; box-shadow:0 0 0 1px #8a5a0a; }
.jp-coin.pop{ animation:jpCoinPop .32s cubic-bezier(.2,.9,.3,1.5); }
@keyframes jpCoinPop{
  0%{ transform:translateY(-14px) scale(.3); opacity:0; }
  60%{ transform:translateY(2px) scale(1.2); opacity:1; }
  100%{ transform:none; }
}
.jp-coin-more{ margin-left:6px; font-family:'Orbitron',var(--font); color:#ffd45a; font-size:14px; }
.jp-cash-coins{ display:flex; align-items:center; justify-content:flex-end; min-height:28px; padding-left:8px; }

/* 맨 위 [정산: $N] 버튼 -- 자리는 처음부터 잡아 두고 마지막에 나타남 */
.jp-cash-btn{
  display:block;
  width:100%;
  margin-bottom:12px;
  padding:12px;
  border:0;
  border-radius:10px;
  font:inherit;
  font-size:22px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(#ff9a1f, #f07d00);
  box-shadow:0 4px 0 #a85400;
  cursor:pointer;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .25s, transform .25s;
}
.jp-cash-btn.show{ opacity:1; transform:none; animation:jpCashGlow 1.6s ease-in-out .3s infinite; }
.jp-cash-btn.show:hover{ filter:brightness(1.08); }
.jp-cash-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #a85400; }
@keyframes jpCashGlow{ 50%{ box-shadow:0 4px 0 #a85400, 0 0 18px rgba(255,154,31,0.6); } }
.jp-cash-stage{ margin-bottom:10px; text-align:center; font-size:18px; font-weight:900; color:#ffd45a; }

/* 라운드 칸: [배지 | 목표 점수] ........ 코인 */
.jp-cash-round{
  --rc:#3f86e8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,0.22);
}
.jp-cash-round[data-kind="big"]{ --rc:#e08a3c; }
.jp-cash-round[data-kind="boss"]{ --rc:#e0465c; }
.jp-cash-blind{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:12px;
  background:var(--rc);
}
.jp-cash-badge{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:50%;
  font-family:'Orbitron',var(--font);
  font-size:15px;
  font-weight:900;
  color:#fff;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 60%, #fff 40%), color-mix(in srgb, var(--rc) 80%, #000 20%));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.25);
}
.jp-cash-badge .jp-pod-skull{ position:static; transform:none; width:30px; height:30px; }
.jp-cash-target{
  min-width:120px;
  border-radius:9px;
  overflow:hidden;
  background:#0d3040;
  text-align:center;
}
.jp-cash-target small{ display:block; padding:3px 8px; font-size:12px; color:#dfe9ef; background:color-mix(in srgb, var(--rc) 45%, #0d3040); }
.jp-cash-target b{ display:block; padding:6px 10px 8px; font-family:'Orbitron',var(--font); font-size:24px; color:#fff; }
.jp-cash-sep{ margin:12px 2px; border-top:3px dotted rgba(255,255,255,0.28); }
.jp-cash-rows{ display:flex; flex-direction:column; gap:8px; }
.jp-cash-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(0,0,0,0.22);
  font-size:15px;
  font-weight:700;
  animation:jpCashRow .3s ease-out;
}
@keyframes jpCashRow{ from{ transform:translateX(-16px); opacity:0; } to{ transform:none; opacity:1; } }
.jp-cash-label{ flex:1; min-width:0; }
.jp-cash-num{ min-width:22px; font-family:'Orbitron',var(--font); font-size:22px; font-weight:900; text-align:center; }
.jp-cash-num.blue{ color:#4aa3ff; }
.jp-cash-num.red{ color:#ff4f6a; }
.jp-cash-num.gold{ color:#f5b82e; }
/* 황금 카드(황금 손길) / 등산가로 붙은 포인트 배지 */
/* 고르기 창에 카드가 많을 때(쓰레쉬: 덱 전체) -- 넓은 창, 작은 카드, 한 줄에 13장(문양별 한 줄) */
.jp-pick-many .jp-modal-box{ max-width:min(980px, 100%); }
.jp-pick-many .jp-pick-options{ display:grid; grid-template-columns:repeat(13, minmax(0, 1fr)); gap:5px; }
.jp-pick-many .jp-pick-option{ padding:0; min-width:0; }
.jp-pick-many .jp-pick-option .jp-card{ width:100%; height:auto; aspect-ratio:691 / 1056; --pip:9px; }
@media (max-width:640px){
  .jp-pick-many .jp-pick-options{ grid-template-columns:repeat(7, minmax(0, 1fr)); }
}
/* ---------- 소모품 칸 (캐릭터 칸 아래 2칸 / 상점) ---------- */
.jp-items{ display:flex; justify-content:center; gap:10px; margin-top:10px; }
.jp-item{
  position:relative;
  width:54px;
  height:54px;
  padding:0;
  border-radius:12px;
  border:2px solid rgba(255,212,90,0.55);
  background:rgba(0,0,0,0.35);
  cursor:pointer;
  font-size:24px;
  transition:transform .12s, box-shadow .12s;
}
.jp-item img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; pointer-events:none; }
.jp-item:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 0 12px rgba(255,212,90,0.55); z-index:40; }
.jp-item.empty{ border:2px dashed rgba(255,255,255,0.15); background:none; cursor:default; }
.jp-item.blocked img{ filter:grayscale(.6) brightness(.75); }
.jp-item-uses{
  position:absolute; right:-6px; top:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; font-size:11px; font-weight:900; line-height:18px;
  color:#2b1d00; background:#ffd45a;
}
/* 마우스를 올리면 설명 (아이콘만 보이고) */
.jp-item-tip{
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  z-index:50;
  width:200px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(8,12,24,0.97);
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,0.55);
  font-size:13px;
  line-height:1.55;
  color:var(--text);
  text-align:left;
  pointer-events:none;
}
.jp-item-tip b{ display:block; margin-bottom:4px; font-size:14px; color:#ffd45a; }
.jp-item-tip-hint{ margin-top:6px; font-size:11.5px; color:var(--sub); }
.jp-item-tip-sell{ margin-top:2px; font-size:11.5px; color:var(--warn); }
@media (hover:hover){ .jp-item:hover .jp-item-tip{ display:block; } }
.jp-item:focus-visible .jp-item-tip{ display:block; }
/* 상점 소모품 */
.jp-shop-packrow{ display:flex !important; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.jp-shop-packrow > #shopPack{ flex:1 1 auto; }
.jp-shop-items{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 14px; border-radius:14px;
  background:rgba(10,14,28,0.6); border:1px solid var(--line);
}
.jp-shop-items-label{ font-size:12.5px; font-weight:800; color:var(--sub); }
.jp-shop-items-label small{ font-weight:400; }
.jp-shop-items-row{ display:flex; gap:10px; }
.jp-item-buy{ width:64px; height:64px; margin-bottom:16px; }
/* 사용 횟수 2/2 */
.jp-item-uses{ min-width:26px !important; }
/* 확인 창 안 소모품 카드 */
.jp-item-card-icon{ width:110px; height:110px; display:grid; place-items:center; font-size:64px; }
.jp-item-card-icon img{ width:100%; height:100%; object-fit:cover; border-radius:18px; box-shadow:0 0 0 3px rgba(255,212,90,0.6), 0 8px 20px rgba(0,0,0,0.5); }
.jp-item-uses-line{ font-size:15px; color:var(--sub); }
.jp-item-uses-line b{ color:#ff9a1f; font-family:'Orbitron',var(--font); }

/* ---------- 희귀 등장 (프리즘 증강·소환사 주문) ---------- */
/* 카드 바깥으로 무지개 빛이 돌아가며 번쩍 (카드 내용은 그대로 보이게 box-shadow만) */
.jp-rare{ position:relative; animation:jpRareGlow 2.4s linear infinite, jpRarePulse 1.6s ease-in-out infinite; }
@keyframes jpRareGlow{
  0%  { box-shadow:0 0 0 3px #ff6ad5, 0 0 26px 6px rgba(255,106,213,0.75); }
  25% { box-shadow:0 0 0 3px #ffd45a, 0 0 26px 6px rgba(255,212,90,0.75); }
  50% { box-shadow:0 0 0 3px #6fd3ff, 0 0 26px 6px rgba(111,211,255,0.75); }
  75% { box-shadow:0 0 0 3px #b48cff, 0 0 26px 6px rgba(180,140,255,0.75); }
  100%{ box-shadow:0 0 0 3px #ff6ad5, 0 0 26px 6px rgba(255,106,213,0.75); }
}
@keyframes jpRarePulse{ 50%{ transform:translateY(-6px) scale(1.03); } }
.jp-modal-box{ position:relative; }
.jp-rare-banner{
  position:fixed;
  left:50%;
  top:3vh;
  z-index:60;
  padding:10px 26px;
  border-radius:999px;
  font-size:22px;
  font-weight:900;
  white-space:nowrap;
  color:#fff;
  background:linear-gradient(90deg, #ff6ad5, #b48cff, #6fd3ff);
  box-shadow:0 0 30px rgba(255,140,230,0.7);
  text-shadow:0 2px 6px rgba(0,0,0,0.4);
  pointer-events:none;
  animation:jpRareBanner 2.2s cubic-bezier(.2,.9,.3,1.3) forwards;
}
@keyframes jpRareBanner{
  0%{ transform:translate(-50%, -20px) scale(.4); opacity:0; }
  15%{ transform:translate(-50%, 0) scale(1.15); opacity:1; }
  25%{ transform:translate(-50%, 0) scale(1); }
  80%{ opacity:1; }
  100%{ transform:translate(-50%, -14px) scale(.95); opacity:0; }
}
body.jp-calm .jp-rare, body.jp-calm .jp-rare::after, body.jp-calm .jp-rare-banner{ animation:none; }

/* 상점 팩 칸: 그림 + 가격만 (이름·설명은 누르면 뜨는 구매 창에) */
#shopAugs .jp-pack .jp-aug-name, #shopAugs .jp-pack .jp-aug-desc,
#shopPack .jp-pack .jp-aug-name, #shopPack .jp-pack .jp-aug-desc{ display:none; }
.jp-pack-note{ margin-top:4px; font-size:.9em; color:var(--sub); }
#shopAugs .jp-pack, #shopPack .jp-pack{ flex-direction:column; justify-content:center; gap:10px; }
.jp-item-buy.sold{ opacity:.35; }
.jp-item-price{
  position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
  font-family:'Orbitron',var(--font); font-size:12px; font-weight:800; color:var(--warn); white-space:nowrap;
}
.jp-items-shop{ margin-top:0; }
.jp-suit-pick{ width:70px; height:90px; display:grid; place-items:center; font-size:44px; border-radius:10px; background:#f4f1e8; color:#1a1a1a; }
.jp-suit-pick.red{ color:#d33; }

/* ---------- 아이템 (재료 + 완성템) ---------- */
.jp-gears{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.jp-gears:empty{ display:none; }
.jp-gear{
  position:relative;
  width:36px;
  height:36px;
  border-radius:8px;
  display:grid;
  place-items:center;
  font-size:18px;
  background:rgba(0,0,0,0.35);
  border:2px solid rgba(180,190,210,0.5);
  cursor:default;
}
.jp-gear img{ width:100%; height:100%; object-fit:cover; border-radius:6px; pointer-events:none; }
.jp-gear.comp{ border-style:dashed; opacity:.85; }
.jp-gear.radiant{ border-color:#ffd45a; box-shadow:0 0 10px rgba(255,212,90,0.7); }
.jp-gear.burst{ animation:jpGearBurst .9s ease-out 2; }
@keyframes jpGearBurst{ 0%{ transform:scale(1); } 40%{ transform:scale(1.4); box-shadow:0 0 22px #ffd45a; } 100%{ transform:scale(1); } }
@media (hover:hover){ .jp-gear:hover .jp-item-tip{ display:block; } .jp-gear:hover{ z-index:40; } }
.jp-gear-quest{ margin-top:6px; padding-top:6px; border-top:1px dashed rgba(255,255,255,0.12); font-size:12px; color:var(--sub); }
.jp-gear-quest b{ color:#ff9a1f; }
.jp-gears-shop{ margin-top:0; max-width:170px; }
#sunfireBtn{ margin-top:4px; }
/* 재료 구매 창: 이 재료로 만들 수 있는 완성템 */
.jp-recipes{ display:flex; flex-direction:column; gap:4px; width:100%; margin-top:6px; text-align:left; }
.jp-recipe span{ white-space:nowrap; font-weight:800; color:var(--sub); width:auto !important; display:flex !important; gap:2px; }
.jp-recipe{ display:grid; grid-template-columns:34px auto 1fr; gap:6px; align-items:center; font-size:12.5px; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,0.04); }
.jp-recipe span{ width:22px; height:22px; display:grid; place-items:center; font-size:14px; }
.jp-recipe span img{ width:100%; height:100%; border-radius:4px; }
.jp-recipe b{ white-space:nowrap; }
.jp-recipe small{ color:var(--sub); }
.jp-recipe.hold{ outline:1px solid #ff9a1f; }
.jp-recipe.own{ opacity:.35; }

/* ---------- 상점 아이템 칸 (발라트로 바우처 칸처럼) ---------- */
.jp-gear-shop{
  display:flex;
  align-items:stretch;
  gap:16px;
  padding:16px;
  border-radius:16px;
  background:rgba(10,14,28,0.6);
  border:1px solid var(--line);
}
.jp-gear-offer{ display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; padding:0 10px; border-right:1px dashed rgba(255,255,255,0.12); }
/* 재료 바꾸기 버튼 (재료 칸 아래) */
.jp-comp-reroll{
  width:110px; padding:6px 0; border-radius:10px; cursor:pointer;
  font:800 12px var(--font); color:#fff;
  background:linear-gradient(180deg,#3d7bea,#2a5bc4); border:1px solid rgba(255,255,255,0.18);
  transition:transform .12s, filter .12s;
}
.jp-comp-reroll b{ color:#ffd45a; margin-left:2px; }
.jp-comp-reroll:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.12); }
.jp-comp-reroll:disabled{ opacity:.45; cursor:default; }
.jp-comp-offer{
  position:relative;
  width:110px;
  padding:24px 8px 10px;
  border-radius:12px;
  border:2px solid rgba(255,212,90,0.5);
  background:linear-gradient(180deg, rgba(40,52,84,0.9), rgba(16,22,40,0.95));
  color:#fff;
  font:inherit;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .12s, box-shadow .12s;
}
.jp-comp-offer:hover:not(:disabled){ transform:translateY(-4px); box-shadow:0 0 16px rgba(255,212,90,0.45); }
/* 이번 스테이지에 이미 산 재료: 어둡게 + "구매함" (다음 스테이지에 새 재료) */
.jp-comp-offer.sold{ cursor:default; filter:grayscale(1) brightness(.45); border-color:rgba(255,255,255,0.15); }
.jp-comp-offer.sold .jp-price-tag{ color:#aaa; }
.jp-comp-offer.empty{ border-style:dashed; opacity:.5; cursor:default; }
.jp-comp-offer-icon{ width:68px; height:68px; display:grid; place-items:center; font-size:40px; }
.jp-comp-offer-icon img{ width:100%; height:100%; object-fit:cover; border-radius:10px; }
.jp-comp-offer-name{ font-size:12.5px; font-weight:800; text-align:center; line-height:1.3; }
/* 가격표: 칸 위에 붙음 */
.jp-price-tag{
  position:absolute;
  left:50%;
  top:-14px;
  transform:translateX(-50%);
  padding:2px 12px;
  border-radius:8px;
  font-family:'Orbitron',var(--font);
  font-size:15px;
  font-weight:900;
  color:#ffd45a;
  background:#2a2f3d;
  border:2px solid #474e60;
  white-space:nowrap;
}
.jp-gear-side{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.jp-gear-slots{ display:flex; flex-wrap:wrap; gap:8px; }
.jp-gear-slots .jp-gear{ width:52px; height:52px; font-size:26px; }
.jp-gear.empty{ border:2px dashed rgba(255,255,255,0.15); background:none; }
.jp-gear-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.jp-gear-btns #sunfireBtn{ margin:0; }
@media (max-width:640px){ .jp-gear-shop{ flex-direction:column; } .jp-gear-offer{ border-right:0; border-bottom:1px dashed rgba(255,255,255,0.12); padding:10px 0 14px; } }

/* ---------- 상점 개편 (2026-10-10) ---------- */
/* 팩 등급 테두리 + 배경 (증강 카드 등급 색과 같게, 2026-10-10): 일반 = 실버, 점보 = 골드, 메가 = 프리즘 */
#shopAugs .jp-pack, #shopPack .jp-pack{
  --rc:#9fb4c8; --bg1:#1d3a4a; --bg2:#0d1b26;
  border:2.5px solid var(--rc);
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg2));
  box-shadow:0 0 14px color-mix(in srgb, var(--rc) 35%, transparent), inset 0 0 24px rgba(0,0,0,0.4);
}
#shopAugs .jp-pack.pack-jumbo, #shopPack .jp-pack.pack-jumbo{ --rc:#f0b13c; --bg1:#7a3c10; --bg2:#2a1406; }
#shopAugs .jp-pack.pack-mega, #shopPack .jp-pack.pack-mega{
  --rc:#c58bff; --bg1:#3b2470; --bg2:#121030;
  border-color:transparent;
  background:
    radial-gradient(circle at 50% 30%, rgba(197,139,255,0.3), transparent 60%) padding-box,
    linear-gradient(180deg, var(--bg1), var(--bg2)) padding-box,
    linear-gradient(160deg, #7fe7ff, #c58bff, #ff8ad8, #ffe17a) border-box;
  box-shadow:0 0 20px rgba(197,139,255,0.5), inset 0 0 24px rgba(0,0,0,0.4);
}
#shopAugs .jp-pack.sold, #shopPack .jp-pack.sold{ filter:grayscale(.6); }/* 증강 팩 줄 + 오른쪽 세로 버튼 */
.jp-shop-toprow{ display:flex; gap:14px; align-items:stretch; }
.jp-shop-toprow > .jp-shop-grid{ flex:1; }
.jp-shop-toprow > .jp-side-btn{ width:130px; flex:0 0 130px; }
.jp-side-btn{
  flex:1;
  min-height:80px;
  border:0;
  border-radius:14px;
  font:inherit;
  font-size:17px;
  font-weight:900;
  line-height:1.3;
  color:#fff;
  cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,0.35);
  transition:transform .1s, filter .1s;
}
.jp-side-btn:hover:not(:disabled){ filter:brightness(1.1); }
.jp-side-btn:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.35); }
.jp-side-btn:disabled{ opacity:.45; cursor:default; }
.jp-side-btn.reroll{ background:linear-gradient(#4f8ff0, #2f6fd6); }
.jp-side-btn.reroll b{ display:block; font-family:'Orbitron',var(--font); color:#ffd45a; }
.jp-side-btn.next{ background:linear-gradient(#ff9a1f, #f07d00); font-size:19px; }
/* 아이템 줄: 재료 판매 | 재료 3칸 | 완성 아이템+퀘스트 | 소모품 */
.jp-gear-shop{ flex-wrap:wrap; }
.jp-gear-mats{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-right:14px; border-right:1px dashed rgba(255,255,255,0.12); }
.jp-gear-owned{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:8px; }
.jp-mini-label{ font-size:12.5px; font-weight:800; color:var(--sub); }
.jp-gear-shop .jp-shop-items{ border:0; background:none; padding:0 0 0 14px; border-left:1px dashed rgba(255,255,255,0.12); border-radius:0; }
/* 완성 아이템 + 퀘스트 카드 */
.jp-gear-quests{ display:flex; flex-wrap:wrap; gap:8px; }
.jp-gq{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px 6px 6px;
  border-radius:10px;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  min-width:150px;
}
.jp-gq.empty{ cursor:default; opacity:.45; }
.jp-gq.radiant{ border-color:rgba(255,212,90,0.6); box-shadow:0 0 10px rgba(255,212,90,0.3); }
.jp-gq.burst{ animation:jpGearBurst .9s ease-out 2; }
.jp-gq .jp-gear{ width:40px; height:40px; flex-shrink:0; }
.jp-gq-body{ display:flex; flex-direction:column; line-height:1.3; }
.jp-gq-title{ padding-bottom:2px; margin-bottom:2px; border-bottom:1px solid rgba(255,255,255,0.18); font-size:11.5px; font-weight:800; color:#e8d9a8; }
.jp-gq.radiant .jp-gq-title{ color:#ffd45a; }
.jp-gq-text{ font-size:11.5px; color:var(--sub); }
.jp-gq-num{ font-family:'Orbitron',var(--font); font-size:14px; font-weight:900; color:#ff9a1f; }
.jp-gq-name{ font-size:12.5px; font-weight:800; }
@media (hover:hover){ .jp-gq:hover .jp-item-tip{ display:block; } .jp-gq:hover{ z-index:40; } }
.jp-gq-bar{ height:5px; margin-top:4px; border-radius:3px; background:rgba(255,255,255,0.1); overflow:hidden; }
.jp-gq-bar i{ display:block; height:100%; background:linear-gradient(90deg, #ff9a1f, #ffd45a); }
/* 게임 화면 왼쪽 패널: 아이템 1개 → 남는 공간을 채우는 큰 카드 (아이콘 위, 퀘스트 아래) */
.jp-info-gears{ flex:1; display:flex; min-height:0; }
.jp-info-gears .jp-gq{
  flex:1;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:14px 12px;
  text-align:center;
}
.jp-info-gears .jp-gq .jp-gear{ width:64px; height:64px; font-size:32px; }
.jp-info-gears .jp-gq-body{ align-items:center; width:100%; }
.jp-info-gears .jp-gq-title{ font-size:14px; padding-bottom:4px; margin-bottom:4px; }
.jp-info-gears .jp-gq-text{ font-size:13px; }
.jp-info-gears .jp-gq-num{ font-size:22px; }
.jp-info-gears .jp-gq-name{ font-size:15px; }
.jp-info-gears .jp-gq-bar{ width:80%; height:7px; margin-top:6px; }
.jp-info-gears .jp-item-tip{ left:50%; transform:translateX(-50%); bottom:calc(100% + 6px); }
@media (max-height:800px) and (min-width:1001px){ .jp-info-gears .jp-gq{ flex-direction:row; text-align:left; padding:8px; } .jp-info-gears .jp-gq .jp-gear{ width:48px; height:48px; } .jp-info-gears .jp-gq-body{ align-items:flex-start; } }
@media (max-width:1000px){ .jp-info-gears{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; } }
@media (max-width:640px){ .jp-shop-toprow{ flex-direction:column; } .jp-shop-toprow > .jp-side-btn{ width:100%; flex:none; min-height:56px; } }

/* ---------- 조합 아이템 도감 ---------- */
.jp-gearbook-box{ max-width:820px; }
/* 증강 도감 */
.jp-augbook-box{ max-width:1000px; width:100%; }
.jp-augbook-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;
  max-height:62vh; overflow-y:auto; padding:10px 4px 6px; margin-bottom:14px;
}
.jp-augbook-grid{ overflow-x:hidden; scrollbar-color:rgba(255,255,255,0.25) transparent; }
.jp-augbook-grid .jp-aug-pick.compact{ cursor:default; position:relative; width:auto; min-width:0; max-width:none; min-height:250px; }
.jp-augbook-grid .jp-aug-pick:hover{ transform:none; }
.jp-augbook-grid .jp-aug-pick.owned{ box-shadow:0 0 0 2px #3ad07a, 0 0 14px rgba(58,208,122,0.45); }
.jp-augbook-own{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap;
  padding:1px 8px; border-radius:999px; background:#3ad07a; color:#04210f; font-size:11px; font-weight:900;
}
.jp-augbook-own .jp-star, .jp-augbook-own *{ color:#04210f; }
.jp-augbook-lv{ margin-top:6px; font-size:11.5px; font-weight:700; color:var(--sub); text-align:center; }
.jp-augbook-tab small{ opacity:.7; font-weight:700; margin-left:2px; }
.jp-augbook-tab.r1.on{ background:#c9d2de; border-color:#c9d2de; }
.jp-augbook-tab.r2.on{ background:#e8b84a; border-color:#e8b84a; }
.jp-augbook-tab.r3.on{ background:linear-gradient(90deg,#7ee8ff,#c08bff,#ff8fd0); border-color:#c08bff; }
@media (max-width:640px){ .jp-augbook-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
.jp-gearbook{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; margin:16px 0; text-align:left; }
.jp-gearbook-label{ margin:4px 0 6px; font-size:13px; font-weight:800; color:var(--sub); }
.jp-gearbook-grid{ display:grid; grid-template-columns:repeat(5, 52px); gap:8px; margin-bottom:10px; }
.jp-gearbook-cell{
  width:52px; height:52px; padding:0;
  border-radius:10px;
  border:2px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.35);
  font-size:26px;
  cursor:pointer;
  filter:grayscale(.85) brightness(.6);
  transition:transform .1s;
}
.jp-gearbook-cell img{ width:100%; height:100%; object-fit:cover; border-radius:8px; pointer-events:none; }
.jp-gearbook-cell:hover{ transform:translateY(-2px); filter:none; }
.jp-gearbook-cell.own{ filter:none; border-color:rgba(180,190,210,0.7); }
.jp-gearbook-cell.radiant{ border-color:#ffd45a; box-shadow:0 0 10px rgba(255,212,90,0.7); }
.jp-gearbook-cell.sel{ outline:3px solid #4fc3ff; outline-offset:1px; filter:none; }
/* 지금 재료로 만들 수 있는 완성템 */
.jp-gearbook-cell.ready{ filter:none; border-color:#2fd06b; box-shadow:0 0 12px rgba(47,208,107,0.75); animation:jpReadyPulse 1.4s ease-in-out infinite; }
@keyframes jpReadyPulse{ 50%{ box-shadow:0 0 20px rgba(47,208,107,0.95); } }
.jp-gear-swap{ display:flex; align-items:center; gap:12px; }
.jp-gear-swap .jp-gear{ width:64px; height:64px; }
.jp-gear-swap b{ font-size:22px; color:var(--sub); }
.jp-gearbook-right{ display:flex; flex-direction:column; gap:10px; }
.jp-craft-btn{ width:100%; padding:12px; font-size:16px; }
.jp-gb-part.have > :first-child{ outline:2px solid #2fd06b; border-radius:6px; }
.jp-gearbook-detail{ padding:14px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid var(--line); min-height:300px; }
.jp-gb-head{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.jp-gb-icon{ width:64px; height:64px; flex-shrink:0; display:grid; place-items:center; font-size:36px; border-radius:12px; border:2px solid rgba(180,190,210,0.6); background:rgba(0,0,0,0.35); overflow:hidden; }
.jp-gb-icon.radiant{ border-color:#ffd45a; box-shadow:0 0 12px rgba(255,212,90,0.7); }
.jp-gb-icon img{ width:100%; height:100%; object-fit:cover; }
.jp-gb-name{ font-size:19px; font-weight:900; }
.jp-gb-sub{ font-size:12.5px; color:var(--sub); }
.jp-gb-sec{ margin:12px 0 6px; font-size:12px; font-weight:800; color:var(--sub); letter-spacing:.5px; }
.jp-gb-recipe{ display:flex; align-items:center; gap:10px; }
.jp-gb-recipe > b{ font-size:18px; color:var(--sub); }
.jp-gb-part{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
.jp-gb-part > :first-child{ width:32px; height:32px; display:grid; place-items:center; font-size:20px; }
.jp-gb-part img{ width:32px; height:32px; border-radius:6px; }
.jp-gb-row{ font-size:13.5px; line-height:1.6; margin-bottom:4px; }
.jp-gb-tag{ display:inline-block; margin-right:6px; padding:0 7px; border-radius:5px; font-size:11.5px; font-weight:800; background:rgba(255,255,255,0.1); }
.jp-gb-tag.gold{ color:#2b1d00; background:#ffd45a; }
.jp-gb-bar{ height:6px; margin-top:4px; border-radius:3px; background:rgba(255,255,255,0.1); overflow:hidden; }
.jp-gb-bar i{ display:block; height:100%; background:linear-gradient(90deg, #ff9a1f, #ffd45a); }
@media (max-width:700px){ .jp-gearbook{ grid-template-columns:1fr; } }

/* ---------- 룬 (카드 강화) ---------- */
.jp-card-rune{
  position:absolute;
  left:2px;
  bottom:2px;
  z-index:3;
  width:26px;
  height:26px;
  padding:2px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(10,14,28,0.92), rgba(10,14,28,0.75));
  box-shadow:0 0 0 2px var(--tree, #e6b85c), 0 0 8px var(--tree, #e6b85c);
  pointer-events:auto;
}
.jp-card-rune img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.jp-deckview-row .jp-card-rune, .jp-pick-option .jp-card-rune{ width:20px; height:20px; }
/* 룬이 새겨진 카드: 테두리를 룬 계열 색으로 살짝 빛나게 (황금 카드는 금테가 우선) */
.jp-card.runed:not(.gold){ outline:2px solid var(--tree); outline-offset:-1px; box-shadow:0 0 10px color-mix(in srgb, var(--tree) 70%, transparent); }
/* 정복자·어둠의 수확 쌓인 값: 룬 아이콘 바로 위 작은 숫자
   (2026-10-10: 아이콘 오른쪽에 있을 땐 아래 가운데 카드 포인트(+N, 등산가 등)와 겹쳤음) */
.jp-card-rune-stack{
  position:absolute;
  left:2px;
  bottom:31px;
  z-index:3;
  padding:0 5px;
  border-radius:6px;
  font-family:'Orbitron',var(--font);
  font-size:10.5px;
  font-weight:900;
  line-height:16px;
  color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
  pointer-events:none;
}
.jp-card-rune-stack.mult{ background:#d8365a; }
.jp-card-rune-stack.chips{ background:#2f6fd6; }
.jp-deckview-row .jp-card-rune-stack, .jp-pick-option .jp-card-rune-stack{ left:1px; bottom:24px; font-size:9px; line-height:13px; padding:0 3px; }
/* 룬 박힌 카드의 카드 포인트(+N): 가운데 아래에 두면 좁은 카드(모바일)에서 룬 아이콘에 가려짐
   → 왼쪽 세로로 쌓음 (아래부터 룬 아이콘 → 쌓인 값 → 카드 포인트) */
.jp-card.runed .jp-card-bonus{ left:2px; transform:none; bottom:31px; }
.jp-card.runed:has(.jp-card-rune-stack) .jp-card-bonus{ bottom:50px; }
.jp-deckview-row .jp-card.runed .jp-card-bonus, .jp-pick-option .jp-card.runed .jp-card-bonus{ left:1px; bottom:24px; }
.jp-deckview-row .jp-card.runed:has(.jp-card-rune-stack) .jp-card-bonus, .jp-pick-option .jp-card.runed:has(.jp-card-rune-stack) .jp-card-bonus{ bottom:39px; }
/* 여진 룬 = 돌 카드: 숫자·문양을 가리고 회색 돌 느낌 */
.jp-card.stone{ position:relative; }
.jp-card.stone::after{
  content:"🪨 50";
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  border-radius:inherit;
  font-weight:900;
  font-size:14px;
  color:#e8e8e8;
  background:repeating-linear-gradient(135deg, #6e6a66 0 6px, #5d5955 6px 12px);
}

/* 룬 팩 보기 카드: runes/card_bg.webp 틀 위에 */
.cat-rune .jp-pack-art{ aspect-ratio:240 / 421; }
.cat-rune .jp-pack-art img{ image-rendering:auto; }
.jp-rune-pick{
  --tree:#e6b85c;
  position:relative;
  width:210px;
  aspect-ratio:3 / 4;
  padding:22px 18px 16px;
  border:0;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:#fff;
  font:inherit;
  text-align:center;
  cursor:pointer;
  background:url('runes/card_bg.webp') center / cover, #12224a;
  box-shadow:0 10px 26px rgba(0,0,0,0.5);
  transition:transform .15s, box-shadow .15s;
}
.jp-rune-pick:hover:not(:disabled){ transform:translateY(-6px); box-shadow:0 0 0 3px var(--tree), 0 14px 30px rgba(0,0,0,0.55); }
.jp-rune-pick.selected{ transform:translateY(-6px); box-shadow:0 0 0 3px var(--tree), 0 0 26px var(--tree); }
.jp-rune-pick.spell{ --tree:#ffd45a; filter:saturate(1.15); }
.jp-rune-pick.spell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,210,90,0.25), transparent 65%);
  pointer-events:none;
}
.jp-rune-pick.used{ opacity:.45; cursor:default; }
.jp-rune-pick-kind{ font-size:12px; font-weight:800; letter-spacing:1px; color:var(--tree); }
.jp-rune-pick-icon{ width:84px; height:84px; margin:4px 0; display:grid; place-items:center; }
.jp-rune-pick-icon img{ max-width:100%; max-height:100%; filter:drop-shadow(0 0 10px var(--tree)); }
.jp-rune-pick.spell .jp-rune-pick-icon img{ border-radius:14px; box-shadow:0 0 0 2px #ffd45a, 0 0 16px rgba(255,212,90,0.6); filter:none; }
.jp-rune-pick-name{ font-size:18px; font-weight:900; }
.jp-rune-pick-desc{ font-size:13.5px; line-height:1.45; color:#e6ecf5; }
.jp-rune-pick-cards{ margin-top:auto; font-size:11.5px; color:var(--sub); }
/* 카드 고르기 줄 */
.jp-rune-targets{ margin:14px auto 4px; max-width:860px; }
.jp-rune-targets-head{ margin-bottom:10px; text-align:center; font-size:15px; }
.jp-rune-targets-head span{ color:var(--sub); }
.jp-rune-targets-row{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.jp-rune-targets-row .jp-card{ width:72px; height:auto; aspect-ratio:691 / 1056; cursor:pointer; transition:transform .12s; }
.jp-rune-targets-row .jp-card:hover{ transform:translateY(-4px); }
.jp-rune-targets-row .jp-card.picked{ transform:translateY(-10px); outline:3px solid #7dffb0; outline-offset:-1px; }
.jp-rune-targets-btns{ display:flex; justify-content:center; gap:10px; margin-top:12px; }
@media (max-width:640px){
  .jp-rune-pick{ width:calc(50% - 10px); padding:16px 10px 12px; }
  .jp-rune-pick-icon{ width:60px; height:60px; }
  .jp-rune-pick-name{ font-size:15px; }
  .jp-rune-pick-desc{ font-size:12px; }
  .jp-rune-targets-row .jp-card{ width:52px; }
}

/* 이즈리얼이 교체로 받은 카드 (득점하면 배수 ×2) */
.jp-card.ezin{ outline:3px solid #4fc3ff; outline-offset:-1px; filter:drop-shadow(0 0 6px rgba(79,195,255,0.8)); }
.jp-card.gold{ outline:3px solid #f5b82e; outline-offset:-1px; filter:drop-shadow(0 0 6px rgba(245,184,46,0.75)); }
.jp-card.gold::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,215,90,0.28), transparent 45%, rgba(255,215,90,0.22));
  pointer-events:none;
}
.jp-card-bonus{
  position:absolute;
  left:50%;
  bottom:3px;
  transform:translateX(-50%);
  padding:0 5px;
  border-radius:6px;
  font-family:'Orbitron',var(--font);
  font-size:10px;
  font-weight:800;
  color:#fff;
  background:#2f7fe0;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  pointer-events:none;
  z-index:2;
}
.jp-cash-icon .jp-aug-icon{ width:28px; height:28px; margin:0; }
.jp-cash-gone{ margin-top:10px; font-size:13px; color:var(--sub); text-align:center; }
body.jp-calm .jp-coin.pop, body.jp-calm .jp-cash-row, body.jp-calm .jp-cash-btn.show{ animation:none; }
@media (max-width:640px){
  .jp-cash-box{ padding:12px; }
  .jp-cash-btn{ font-size:19px; }
  .jp-cash-badge{ width:44px; height:44px; font-size:12px; }
  .jp-cash-target{ min-width:96px; }
  .jp-cash-target b{ font-size:20px; }
  .jp-coin{ width:22px; height:22px; font-size:11px; }
  .jp-cash-row{ font-size:13px; }
}

/* ---------- 증강 분류 태그 (합배수/곱배수/포인트 증가/골드/초록 계열) ---------- */
.jp-tag{
  display:inline-block;
  margin:0 3px;
  padding:1px 7px;
  border-radius:5px;
  font-size:12px;
  font-weight:800;
  line-height:1.5;
  white-space:nowrap;
}
.jp-tag.mult{ color:#ff4f5e; }
.jp-tag.xmult{ color:#fff; background:#e0283c; }
.jp-tag.chips{ color:#3c9bff; }
.jp-tag.gold{ color:#f5a623; }
.jp-tag.green{ color:#2fd06b; }
.jp-tag.rarity{ color:var(--sub); }
.jp-aug-tip-tags{ margin:0 -3px 4px; }
/* ---------- 증강 설명 가독성 (2026-10-09) ----------
   효과 문장은 크게·넓은 줄 간격, 지금 상태(누적값·이번 라운드 대상)는 아래 칸으로 분리 */
.jp-aug-tip{ width:250px !important; padding:12px 14px !important; font-size:13.5px !important; line-height:1.65 !important; }
.jp-aug-tip-head{ padding-bottom:6px; margin-bottom:6px !important; border-bottom:1px solid rgba(255,255,255,0.08); }
.jp-aug-tip-head b{ font-size:15px; }
.jp-aug-tip-tags{ margin-bottom:8px !important; }
.jp-aug-now{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.jp-aug-now > span{
  padding:2px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  color:#cfd8e6;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
}
.jp-suit-red{ color:#ff5a6e; }
.jp-aug-tip-next{ margin-top:8px !important; padding-top:6px; border-top:1px dashed rgba(255,255,255,0.1); font-size:12.5px; }
.jp-aug-tip-sell{ margin-top:6px !important; }
/* 큰 카드(증강 선택·구매 창) 설명 */
.jp-aug-pick-desc{ line-height:1.6; }
.jp-aug-pick-desc .jp-aug-now, .jp-buy-item .jp-aug-now{ justify-content:center; }
/* 증강 설명 속 숫자 색 (script.js descColor) */
.jp-dc, .jp-dc-keep{ font-weight:800; white-space:nowrap; }
.jp-dc-keep{ font-weight:inherit; }
.jp-dc.mult{ color:#ff4f5e; }
.jp-dc.xmult{ display:inline-block; padding:0 5px; border-radius:4px; color:#fff; background:#e0283c; line-height:1.35; }
.jp-dc.chips{ color:#3c9bff; }
.jp-dc.gold{ color:#f5a623; }
.jp-dc.green{ color:#2fd06b; }
.jp-dc.num{ color:#ff9a1f; }
.jp-aug-pick-rarity .jp-tag{ font-size:13.5px; }
/* 강화 팩 카드: "강화 ★★☆ → ★★★" 한 줄 + 설명 앞 "강화 후" */
.jp-aug-pick-up{
  margin-top:6px;
  padding:3px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:#ffe08a;
  background:rgba(0,0,0,0.35);
  white-space:nowrap;
}
.jp-aug-pick-up .jp-stars{ font-size:15px; color:#ffd45a; }
.jp-aug-pick-up .jp-stars i{ color:rgba(255,255,255,0.25); font-style:normal; }
.jp-aug-pick-up span{ margin:0 4px; color:#fff; }
.jp-aug-pick-after{ color:#7dffb0; font-weight:800; }
.jp-pick-options{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:16px 0;
}
.jp-pick-option{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:transform .15s;
}
.jp-pick-option:hover{ transform:translateY(-4px); }
.jp-pick-option .jp-aug{ width:150px; }
.jp-rules-box{ max-width:520px; text-align:left; }
.jp-rules-body p{ margin:10px 0; font-size:13.5px; line-height:1.7; color:var(--sub); }
.jp-rules-body b{ color:var(--text); }
.jp-rules-table{ width:100%; border-collapse:collapse; margin:8px 0; font-size:13.5px; }
.jp-rules-table th, .jp-rules-table td{ padding:6px 8px; border-bottom:1px solid var(--line); text-align:center; }
.jp-rules-table td:first-child, .jp-rules-table th:first-child{ text-align:left; }
.jp-rules-box .btn{ display:block; margin:14px auto 0; }

/* ---------- 태블릿/폰 ---------- */
@media (max-width:900px){
  .jp-layout{ grid-template-columns:minmax(0, 1fr); }
  .jp-side{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .jp-aug-row, .jp-shop-owned{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:640px){
  body.jp-in-game .jp-wrap{ padding-left:10px; padding-right:10px; }
  .jp-pick-grid{ grid-template-columns:minmax(0, 1fr); }
  .jp-hero{ flex-direction:row; flex-wrap:wrap; border-radius:18px; text-align:left; }
  .jp-hero-art{ width:90px; aspect-ratio:3 / 4; border-radius:60px 60px 10px 10px; }
  .jp-hero-art.no-art{ font-size:36px; }
  .jp-hero-name{ flex:1; }
  .jp-side{ grid-template-columns:minmax(0, 1fr); }
  .jp-play-area{ flex-direction:column; gap:8px; min-height:0; }
  .jp-preview{ flex:none; }
  .jp-card{ width:calc((100vw - 20px - 6px * 7) / 8); max-width:58px; height:auto; aspect-ratio:5 / 7; }
  .jp-card-corner{ font-size:11px; top:3px; left:4px; }
  .jp-card-corner.br{ right:4px; bottom:3px; }
  .jp-card-suit{ font-size:22px; }
  .jp-hand{ gap:3px; }
  .jp-controls{ justify-content:center; }
  .jp-actions{ width:100%; }
  .jp-actions .btn{ flex:1; min-width:0; }
  .jp-shop-grid{ grid-template-columns:minmax(0, 1fr); }
  .jp-shop-btns .btn{ flex:1; }
  .jp-chips, .jp-mult{ font-size:18px; min-width:56px; }
}
.jp-wrap:has(#pickScreen:not(.hidden)){ max-width:980px; }

/* 폰/태블릿: 라운드 정보 -> 증강 -> 족보 미리보기 -> 손패 -> 버튼 -> 캐릭터(액티브) 순서.
   손패가 화면 아래로 밀려나지 않게 캐릭터 패널을 맨 아래로 보낸다. */
@media (max-width:900px){
  .jp-layout{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .jp-side{ display:contents; }
  .jp-round-panel{ order:1; }
  .jp-main{ order:2; width:100%; }
  .jp-char-panel{ order:3; }
}
@media (max-width:640px){
  .jp-round-panel{ padding:12px; }
  .jp-round-name{ font-size:16px; }
  .jp-target-row, .jp-score-row{ margin-top:6px; }
  .jp-score-row b{ font-size:22px; }
  .jp-counters{ margin-top:8px; }
  .jp-counter{ padding:6px 4px; }
  .jp-counter b{ font-size:17px; }
  .jp-aug{ min-height:0; padding:7px 8px; }
  .jp-aug-desc{ font-size:10.5px; }
  .jp-play-area{ margin:10px 0; padding:10px; }
  /* 작은 카드: 아래쪽 모서리 표시는 숨기고 가운데 문양만 */
  .jp-card-corner.br{ display:none; }
  .jp-card-suit{ top:60%; }
}

/* ==========================================================================
   진짜 트럼프 모양 카드 면
   - 숫자 카드: 숫자만큼 문양을 실제 배치대로(.jp-pip, 아래 절반은 뒤집힘)
   - J/Q/K: 테두리 친 그림 칸(.jp-card-face) + 기물 그림 + 큰 글자
   - A: 가운데 큰 문양 하나
   크기는 카드 폭 기준 --pip 변수로 (폰에서 카드가 작아지면 같이 작아짐)
   ========================================================================== */
.jp-card{
  --pip:15px;
  container-type:inline-size;
}
.jp-card-suit{ display:none; }
.jp-card-pips{
  position:absolute;
  inset:14% 24% 14% 24%;
}
.jp-pip{
  position:absolute;
  transform:translate(-50%, -50%);
  font-size:var(--pip);
  line-height:1;
}
.jp-pip.flip{
  transform:translate(-50%, -50%) rotate(180deg);
}
.jp-card-ace{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-size:calc(var(--pip) * 2.6);
  line-height:1;
}
.jp-card-face{
  position:absolute;
  inset:17% 22% 17% 22%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  border:1.5px solid currentColor;
  background:
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,0.035) 3px 4px),
    linear-gradient(180deg, #fff6dc, #f0dca6);
  overflow:hidden;
}
.jp-card.red .jp-card-face{
  background:
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(210,58,80,0.05) 3px 4px),
    linear-gradient(180deg, #fff1ec, #f6d2c8);
}
.jp-face-figure{
  font-size:calc(var(--pip) * 1.9);
  line-height:1;
}
.jp-face-letter{
  margin-top:1px;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:calc(var(--pip) * 1.05);
  font-weight:800;
  line-height:1;
}
.jp-face-suit{
  position:absolute;
  font-size:calc(var(--pip) * 0.7);
  line-height:1;
}
.jp-face-suit.tl{ top:3px; left:4px; }
.jp-face-suit.br{ bottom:3px; right:4px; transform:rotate(180deg); }
.jp-card.face{
  background:linear-gradient(180deg, #ffffff, #f1f3f7);
}

@media (max-width:640px){
  .jp-card{ --pip:8px; }
  /* 작은 카드: 아래 모서리 숨긴 김에 문양 칸을 조금 넓게 */
  .jp-card-pips{ inset:22% 12% 8% 12%; }
  .jp-card-face{ inset:24% 10% 6% 10%; border-width:1px; }
  .jp-face-suit{ display:none; }
}
/* 실제 카드처럼 모서리 숫자는 작게, 문양은 안쪽으로 */
.jp-card{ --pip:13px; }
.jp-card-corner{ font-size:12px; top:4px; left:5px; }
.jp-card-corner.br{ right:5px; bottom:4px; }
.jp-card-pips{ inset:12% 27% 12% 27%; }
.jp-card-face{ inset:16% 21% 16% 21%; }
@media (max-width:640px){
  .jp-card{ --pip:8px; }
  .jp-card-corner{ font-size:10px; top:2px; left:3px; }
  .jp-card-pips{ inset:26% 14% 7% 14%; }
  .jp-card-face{ inset:27% 9% 5% 9%; }
}

/* cards/ 폴더에 그림을 넣었을 때 (script.js cardArt) */
.jp-card.art{
  background:none;
  overflow:hidden;
}
.jp-card.art img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
  pointer-events:none;
}
/* 넣은 카드 그림 비율(691x1056)에 맞춤 */
.jp-card.art{
  height:auto;
  aspect-ratio:691 / 1056;
  background:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);
}
.jp-card.art img{ object-fit:cover; }

/* ---------- 눈부심 줄이기 (카드 그림) ----------
   순백 카드 + 거의 검은 배경은 밝기 차이가 커서 눈이 아프다는 피드백 --
   밝기를 낮추고 살짝 따뜻한(크림) 톤으로, 테두리 그림자도 부드럽게.
   PC에선 카드를 키워서 가는 선이 자글자글하지 않게. */
.jp-card.art img{
  filter:brightness(0.86) sepia(0.12) contrast(0.96);
}
.jp-card.art{
  box-shadow:0 6px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
}
.jp-hand .jp-card.art:hover img,
.jp-hand .jp-card.art.selected img{
  filter:brightness(0.95) sepia(0.08) contrast(0.98);
}
@media (min-width:641px){
  .jp-card.art{ width:92px; }
  .jp-hand{ gap:8px; }
}

/* ---------- 캐릭터 그림: 얼굴 지점(--fx/--fy, data.js focus) 기준 자르기 ----------
   그림이 가로로 긴 스킨 일러스트라, 세로 아치 카드엔 얼굴 쪽을 중심으로 잘라
   조금 확대하고, 작은 동그라미(게임 화면)엔 얼굴만 크게 확대한다. */
.jp-hero-art img,
.jp-char-art img{
  object-fit:cover;
  object-position:var(--fx, 50%) var(--fy, 30%);
  transform-origin:var(--fx, 50%) var(--fy, 30%);
}
.jp-hero-art img{ transform:scale(1.35); }
.jp-char-art img{ transform:scale(2.3); }
.jp-hero-art,
.jp-char-art{ position:relative; }
/* 아치 아래쪽을 살짝 어둡게 -- 이름/설명으로 자연스럽게 이어지게 */
.jp-hero-art::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:30%;
  background:linear-gradient(0deg, rgba(8,10,20,0.75), transparent);
  pointer-events:none;
}
.jp-hero:hover .jp-hero-art img{ transform:scale(1.42); transition:transform .3s ease; }

/* 위 scale 방식은 얼굴 지점을 제자리에 둔 채 확대해서, 얼굴이 위쪽에 있는 그림은
   동그라미에서 잘렸다. 대신 그림을 절대 위치로 놓고 얼굴 지점(--fx,--fy)이 칸의
   원하는 자리(아치: 위에서 ~36%, 동그라미: 정가운데)에 오도록 옮긴다.
   translate(%)는 그림 자기 크기 기준이라 얼굴 지점을 정확히 원점으로 끌어온다.
   top은 min()으로 제한해서 그림 위쪽 끝이 칸 안으로 내려와 빈틈이 생기지 않게. */
.jp-hero-art img,
.jp-char-art img,
.jp-hero:hover .jp-hero-art img{
  position:absolute;
  left:50%;
  width:auto;
  max-width:none;
  object-fit:fill;
  transform-origin:0 0;
  transform:translate(calc(var(--fx, 50%) * -1), calc(var(--fy, 30%) * -1));
}
.jp-hero-art img{
  height:125%;
  top:min(36%, calc(var(--fy, 30%) * 1.25));
  transition:height .3s ease, top .3s ease;
}
.jp-hero:hover .jp-hero-art img{
  height:135%;
  top:min(36%, calc(var(--fy, 30%) * 1.35));
}
.jp-char-art img{
  height:240%;
  top:min(50%, calc(var(--fy, 30%) * 2.4));
}

/* ==========================================================================
   게임 화면 v2 (발라트로 배치 참고)
   [왼쪽 정보 패널 260px] [가운데 보드] [오른쪽 캐릭터/덱 190px]
   PC에선 한 화면(스크롤 없이)에 다 들어가게 높이를 화면에 맞춘다.
   ========================================================================== */
body.jp-in-game .jp-wrap{ max-width:1440px; padding-top:12px; padding-bottom:20px; }
.jp-table{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr) 190px;
  gap:14px;
  min-height:calc(100vh - 110px);
  text-align:left;
}

/* ---------- 왼쪽 정보 패널 ---------- */
.jp-info{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:var(--radius);
  background:rgba(10,14,28,0.85);
  border:1px solid var(--line);
}
.jp-round-card{
  --rc:#3f86e8;
  padding:10px;
  border-radius:14px;
  background:color-mix(in srgb, var(--rc) 22%, #0b1020);
  border:1px solid color-mix(in srgb, var(--rc) 55%, transparent);
}
.jp-round-card[data-kind="big"]{ --rc:#e08a3c; }
.jp-round-card[data-kind="boss"]{ --rc:#e0465c; }
.jp-round-card .jp-round-name{
  font-size:15px;
  font-weight:800;
  text-align:center;
  margin-bottom:8px;
  color:#fff;
}
.jp-round-goal{
  display:flex;
  align-items:center;
  gap:10px;
}
.jp-round-badge{
  flex-shrink:0;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:'Orbitron',var(--font);
  font-size:9.5px;
  font-weight:800;
  color:#fff;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 80%, #fff 20%), var(--rc));
  box-shadow:0 0 0 3px rgba(0,0,0,0.25);
}
.jp-round-goal-box{
  flex:1;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(0,0,0,0.3);
  text-align:center;
}
.jp-round-goal-box small{ display:block; font-size:11px; color:var(--sub); }
.jp-round-goal-box b{ display:block; font-family:'Orbitron',var(--font); font-size:24px; color:#fff; }
.jp-round-reward{ font-size:12px; font-weight:700; color:var(--warn); }
.jp-round-card .jp-boss-rule{ margin-top:8px; font-size:12px; }

/* ---------- 라운드 진행 발판 (N-1 → N-2 → N-3 보스) ---------- */
.jp-round-path{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:30px 4px 0;
  margin-bottom:10px;
}
/* 발판끼리 잇는 점선 (윗면 높이) */
.jp-round-path::before{
  content:"";
  position:absolute;
  left:16%;
  right:16%;
  top:38px;
  border-top:2px dashed rgba(255,255,255,0.22);
}
.jp-pod{
  position:relative;
  z-index:1;
  width:33.3%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.jp-pod-stand{ position:relative; width:58px; height:34px; }
/* 옆면(원기둥 몸통) */
.jp-pod-stand::before{
  content:"";
  position:absolute;
  left:0; right:0; top:8px; bottom:0;
  border-radius:0 0 50% 50% / 0 0 9px 9px;
  background:linear-gradient(90deg, #c4c9d2, #ffffff 38%, #eef0f3 62%, #aeb4be);
}
/* 바닥 그림자 */
.jp-pod-stand::after{
  content:"";
  position:absolute;
  left:6px; right:6px; bottom:-5px;
  height:8px;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  filter:blur(3px);
  z-index:-1;
}
/* 윗면(타원) */
.jp-pod-top{
  position:absolute;
  left:0; right:0; top:0;
  height:16px;
  border-radius:50%;
  z-index:1;
  background:radial-gradient(ellipse at 50% 40%, #ffffff, #eff1f4 65%, #d6dae0);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,0.12);
}
.jp-pod.boss .jp-pod-stand::before{ background:linear-gradient(90deg, #9c2235, #ff6a7d 38%, #e0465c 62%, #7d1828); }
.jp-pod.boss .jp-pod-top{ background:radial-gradient(ellipse at 50% 40%, #ff8f9d, #ec5a6e 65%, #c93a4f); }
.jp-pod-skull{
  position:absolute;
  left:50%;
  bottom:2px;
  width:15px;
  height:15px;
  transform:translateX(-50%);
  z-index:2;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
/* 깃발: 깃대 아래 끝이 윗면 가운데에 꽂힘 */
.jp-pod-flag{
  position:absolute;
  left:calc(50% - 4px);
  bottom:24px;
  width:24px;
  height:36px;
  z-index:3;
  overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.jp-pod-flag-cloth{
  fill:#ffd45a;
  transform-origin:5px 8.5px;
  animation:jpFlagWave 1.4s ease-in-out infinite alternate;
}
.jp-pod.boss .jp-pod-flag-cloth{ fill:#fff; }
@keyframes jpFlagWave{
  from{ transform:scaleX(0.82) skewY(-4deg); }
  to{ transform:scaleX(1) skewY(3deg); }
}
body.jp-calm .jp-pod-flag-cloth{ animation:none; }
.jp-pod.done{ opacity:0.4; filter:grayscale(0.5); }
.jp-pod.next{ opacity:0.75; }
.jp-pod.now .jp-pod-top{ box-shadow:inset 0 -2px 3px rgba(0,0,0,0.12), 0 0 12px 2px color-mix(in srgb, var(--rc) 70%, transparent); }
.jp-pod-label{
  font-family:'Orbitron',var(--font);
  font-size:11px;
  font-weight:700;
  color:var(--sub);
}
.jp-pod.now .jp-pod-label{ color:#fff; }
.jp-pod.boss .jp-pod-label{ color:#ff8f9d; }
@media (max-width:640px){
  .jp-round-path{ padding-top:24px; margin-bottom:6px; }
  .jp-round-path::before{ top:30px; }
  .jp-pod-stand{ width:44px; height:26px; }
  .jp-pod-stand::before{ top:6px; }
  .jp-pod-top{ height:12px; }
  .jp-pod-skull{ width:12px; height:12px; bottom:1px; }
  .jp-pod-flag{ width:18px; height:27px; bottom:19px; left:calc(50% - 3px); }
  .jp-pod-label{ font-size:10px; }
}

.jp-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  font-size:13px;
  color:var(--sub);
}
.jp-info-row b{ font-family:'Orbitron',var(--font); font-size:22px; color:#fff; }
.jp-info .jp-progress{ margin-top:-4px; }

.jp-info .jp-preview{
  flex:none;
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,0.3);
  text-align:center;
}
.jp-info .jp-preview-hand{ font-size:14px; min-height:20px; }
.jp-info .jp-preview-calc{ gap:6px; }
.jp-info .jp-chips,
.jp-info .jp-mult{
  flex:1;
  min-width:0;
  padding:8px 6px;
  font-size:24px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;       /* 글자 크기는 script.js fitText가 칸에 맞춤 */
}
#roundScore, #targetScore{ white-space:nowrap; max-width:100%; overflow:hidden; display:block; }
.jp-info .jp-chips{ background:#2f6fd6; color:#fff; }
.jp-info .jp-mult{ background:#d8365a; color:#fff; }
.jp-info .jp-preview-note{ font-size:12px; min-height:16px; }

.jp-info-grid{
  display:grid;
  grid-template-columns:64px 1fr 1fr;
  grid-auto-rows:minmax(54px, auto);
  gap:6px;
}
.jp-hands-btn{
  grid-row:1 / span 3;
  border:0;
  border-radius:12px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  line-height:1.4;
  color:#2b1d00;
  background:linear-gradient(180deg, #ffd45a, #f0a92c);
  cursor:pointer;
}
.jp-hands-btn:hover{ filter:brightness(1.08); }
.jp-info-grid .jp-counter{ display:flex; flex-direction:column; justify-content:center; padding:6px; }
.jp-info-grid .jp-counter.wide{ grid-column:span 2; flex-direction:row; justify-content:center; align-items:baseline; gap:10px; }
.jp-info-grid .jp-counter b{ font-family:'Orbitron',var(--font); font-size:22px; }

/* ---------- 가운데 보드 (포커 테이블) ---------- */
.jp-board{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:12px 14px;
  border-radius:var(--radius);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(40,110,100,0.30), transparent 70%),
    linear-gradient(180deg, rgba(14,40,44,0.75), rgba(8,20,26,0.85));
  border:1px solid rgba(80,180,170,0.18);
}
.jp-aug-bar{
  display:flex;
  align-items:center;
  gap:10px;
}
.jp-aug-bar .jp-aug-row{
  flex:1;
  grid-template-columns:repeat(var(--slots, 6), minmax(0, 1fr));
}
.jp-aug-count{
  flex-shrink:0;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:var(--sub);
  background:rgba(0,0,0,0.3);
}
.jp-board .jp-played{
  flex:1;
  min-height:150px;
  align-items:center;
  align-content:center;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,0.08);
}
.jp-msg{ margin:0; min-height:0; text-align:center; }
.jp-msg:empty{ display:none; }
.jp-hand-zone{
  padding:16px 10px 8px;
  border-radius:14px;
  background:rgba(0,0,0,0.22);
}
.jp-hand-zone .jp-hand{ padding-top:14px; }
.jp-hand-meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:12.5px;
  font-weight:700;
  color:var(--sub);
}
.jp-chip-btn{
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.05);
  color:var(--sub);
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.jp-chip-btn:hover{ color:#fff; }
.jp-board .jp-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  width:auto;
}
.jp-play-btn,
.jp-discard-btn{
  min-width:150px;
  padding:14px 22px;
  font-size:16px;
  border:0;
  color:#fff;
}
.jp-play-btn{ background:#2f6fd6; box-shadow:0 6px 18px rgba(47,111,214,0.35); }
.jp-discard-btn{ background:#d8365a; box-shadow:0 6px 18px rgba(216,54,90,0.3); }
.jp-play-btn:hover:not(:disabled),
.jp-discard-btn:hover:not(:disabled){ filter:brightness(1.1); transform:translateY(-1px); }

/* ---------- 오른쪽: 캐릭터 / 덱 ---------- */
.jp-right{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
}
.jp-char-card{
  --char-color:#45e6ff;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:14px 12px;
  border-radius:var(--radius);
  background:rgba(10,14,28,0.85);
  border:1px solid color-mix(in srgb, var(--char-color) 40%, transparent);
  text-align:center;
}
.jp-char-portrait{
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.jp-char-card .jp-char-art{
  width:120px;
  height:120px;
  border-width:3px;
  transition:transform .15s;
}
.jp-char-portrait:hover .jp-char-art{ transform:scale(1.04); }
.jp-char-card .jp-char-name{ font-size:15px; }
.jp-char-card .jp-active-btn{ width:100%; margin-top:0; }
.jp-char-card .jp-active-hint{ margin:0; text-align:center; }
.jp-char-pop{
  width:100%;
  padding:10px;
  border-radius:12px;
  background:rgba(0,0,0,0.35);
  text-align:left;
}
.jp-char-pop .jp-ability:first-child{ margin-top:0; }
.jp-char-card::after{
  content:"초상화를 누르면 능력 설명";
  font-size:10.5px;
  color:rgba(255,255,255,0.3);
}
.jp-deck{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.jp-deck-pile{
  position:relative;
  width:92px;
  aspect-ratio:691 / 1056;
}
.jp-deck-pile span{
  position:absolute;
  inset:0;
  border-radius:8px;
  background:#7a1f2b url("cards/Card-back.png") center / cover;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  filter:brightness(0.85);
}
.jp-deck-pile span:nth-child(1){ transform:translate(-6px, 6px); }
.jp-deck-pile span:nth-child(2){ transform:translate(-3px, 3px); }
.jp-deck-count{ font-family:'Orbitron',var(--font); font-size:14px; font-weight:700; color:var(--sub); }

/* ---------- 캐릭터 상세 창 ---------- */
.jp-hero-detail{ max-width:380px; text-align:left; }
.jp-hero-detail-art{ width:220px; margin:0 auto 12px; }
.jp-hero-detail-art .jp-hero-art{ width:100%; }
.jp-hero-detail-name{ font-size:22px; font-weight:800; text-align:center; margin-bottom:8px; }
.jp-hero-detail .jp-ability{ font-size:13.5px; color:var(--text); margin-top:8px; }
.jp-hero-detail-btns{ display:flex; gap:10px; margin-top:18px; }
.jp-hero-detail-btns .btn{ flex:1; }
.jp-hero{ cursor:pointer; }

/* ---------- 태블릿/폰 ---------- */
@media (max-width:1000px){
  .jp-table{ grid-template-columns:minmax(0, 1fr); min-height:0; }
  .jp-info{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .jp-info .jp-round-card{ grid-column:1 / -1; }
  .jp-info-grid{ grid-column:1 / -1; grid-template-columns:repeat(6, minmax(0, 1fr)); grid-auto-rows:auto; }
  .jp-hands-btn{ grid-row:auto; padding:8px 4px; }
  .jp-info-grid .jp-counter.wide{ grid-column:auto; flex-direction:column; gap:0; }
  .jp-right{ flex-direction:row; align-items:stretch; }
  .jp-char-card{ flex:1; flex-direction:row; flex-wrap:wrap; text-align:left; }
  .jp-char-card .jp-char-art{ width:64px; height:64px; }
  .jp-char-card .jp-active-btn{ width:auto; flex:1; }
  .jp-char-card::after{ display:none; }
  .jp-deck{ justify-content:center; }
  .jp-deck-pile{ width:56px; }
}
@media (max-width:640px){
  .jp-info{ grid-template-columns:minmax(0, 1fr); padding:10px; }
  .jp-round-goal-box b{ font-size:20px; }
  .jp-info-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .jp-aug-bar .jp-aug-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .jp-aug-count{ display:none; }
  .jp-board{ padding:10px 8px; }
  .jp-board .jp-played{ min-height:90px; }
  .jp-play-btn, .jp-discard-btn{ min-width:0; flex:1; }
  .jp-board .jp-actions{ width:100%; }
}

/* 손패는 항상 한 줄 -- 장수(--n, script.js renderHand)에 맞춰 카드 폭을 나눈다(최대 92px). */
.jp-hand-zone .jp-hand{
  flex-wrap:nowrap;
  gap:6px;
}
.jp-hand-zone .jp-hand .jp-card{
  width:min(92px, calc((100% - (var(--n, 8) - 1) * 6px) / var(--n, 8)));
  height:auto;
  aspect-ratio:691 / 1056;
}
.jp-board .jp-played{ min-height:110px; }
.jp-board .jp-played:empty::before{
  content:"카드를 골라 플레이하세요";
  margin:auto;
  font-size:13px;
  color:rgba(255,255,255,0.22);
}
/* 낮은 화면(노트북)에서 한 화면에 들어가게 */
@media (max-height:800px) and (min-width:1001px){
  .jp-info{ gap:7px; padding:10px; }
  .jp-round-goal-box b{ font-size:20px; }
  .jp-info .jp-chips, .jp-info .jp-mult{ font-size:20px; padding:6px; }
  .jp-info-grid{ grid-auto-rows:minmax(46px, auto); }
  .jp-board{ gap:8px; padding:10px 12px; }
  .jp-aug{ min-height:60px; padding:7px 9px; }
  .jp-hand-zone .jp-hand .jp-card{ width:min(80px, calc((100% - (var(--n, 8) - 1) * 6px) / var(--n, 8))); }
  .jp-play-btn, .jp-discard-btn{ padding:11px 20px; }
  .jp-char-card .jp-char-art{ width:96px; height:96px; }
}
@media (max-width:640px){
  .jp-hand-zone .jp-hand{ gap:3px; }
  .jp-hand-zone .jp-hand .jp-card{ width:calc((100% - (var(--n, 8) - 1) * 3px) / var(--n, 8)); }
}

/* 폰: 정보 패널을 납작하게 -- 손패/버튼이 첫 화면 가까이 오도록 */
@media (max-width:640px){
  .jp-info{ gap:6px; padding:8px; grid-template-columns:1fr 1fr; }
  .jp-info .jp-round-card{ padding:6px 8px; }
  .jp-round-card .jp-round-name{ font-size:13px; margin-bottom:4px; }
  .jp-round-badge{ width:34px; height:34px; font-size:7px; }
  .jp-round-goal-box{ display:flex; align-items:baseline; justify-content:center; gap:8px; padding:4px 8px; }
  .jp-round-goal-box b{ font-size:18px; }
  .jp-info-row{ grid-column:1 / -1; padding:6px 10px; }
  .jp-info-row b{ font-size:18px; }
  .jp-info .jp-progress{ grid-column:1 / -1; }
  .jp-info .jp-preview{ grid-column:1 / -1; padding:6px 8px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 10px; }
  .jp-info .jp-preview-hand{ font-size:13px; min-height:0; }
  .jp-info .jp-preview-calc{ margin-top:0; }
  .jp-info .jp-preview-note{ grid-column:1 / -1; min-height:0; }
  .jp-info .jp-chips, .jp-info .jp-mult{ font-size:16px; padding:4px; }
  .jp-info-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:4px; }
  .jp-hands-btn{ font-size:11px; padding:4px 2px; border-radius:8px; }
  .jp-info-grid .jp-counter{ padding:4px 2px; }
  .jp-info-grid .jp-counter small{ font-size:10px; }
  .jp-info-grid .jp-counter b{ font-size:15px; }
  .jp-board .jp-played{ min-height:70px; }
  .jp-aug{ padding:6px 7px; }
}

/* ---------- 증강 카드: 롤 아레나 느낌 (실버 / 골드 / 프리즘 테두리) ---------- */
.jp-aug:not(.empty){
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  background:linear-gradient(180deg, #16232a, #0b1418);
  border:3px solid #9aa4ad;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.4);
}
.jp-aug.rarity-1{ border-color:#aeb6bd; }
.jp-aug.rarity-2{ border-color:#d6a25a; background:linear-gradient(180deg, #23201a, #0f0d09); }
.jp-aug.rarity-3{
  border-color:transparent;
  background:
    linear-gradient(180deg, #1e1830, #0d0a18) padding-box,
    linear-gradient(135deg, #b48cff, #6fd3ff, #ff9de2, #b48cff) border-box;
}
.jp-aug-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
  font-size:22px;
  color:#cfe3ea;
}
.jp-aug-icon img{ width:100%; height:100%; object-fit:contain; }
/* 증강 칸 안 그림은 브라우저 기본 "이미지 끌기"가 안 되게 -- 칸 드래그(순서 바꾸기)만 되도록 */
.jp-aug img, .jp-aug-pick img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
.jp-aug .jp-aug-rarity{
  padding:1px 8px;
  border-radius:3px;
  font-size:10.5px;
  background:rgba(255,255,255,0.08);
}
.jp-aug.rarity-2 .jp-aug-rarity{ color:#f1c27d; }
.jp-aug.rarity-3 .jp-aug-rarity{ color:#d7c2ff; }
.jp-shop-item.jp-aug{ min-height:200px; padding:14px 12px; }
.jp-shop-item .jp-aug-icon{ width:64px; height:64px; font-size:32px; }
.jp-aug-bar .jp-aug:not(.empty) .jp-aug-icon{ width:28px; height:28px; font-size:15px; }

/* ---------- 덱 더미 버튼 + 덱 보기 창 (#deckModal) ---------- */
button.jp-deck{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
}
button.jp-deck:hover .jp-deck-pile span{ filter:brightness(1); }
button.jp-deck:hover .jp-deck-count{ color:var(--text); }

.jp-deckview-box{ max-width:980px; }
.jp-deckview{
  display:flex;
  gap:14px;
  margin:16px 0 4px;
  text-align:left;
}
.jp-deckview-stats{
  display:flex;
  gap:6px;
  flex-shrink:0;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,0.3);
}
.jp-deckview-col{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:4px;
}
.jp-deckview-stat{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:58px;
  font-family:'Orbitron',var(--font);
}
.jp-deckview-stat b{ font-size:16px; }
.jp-deckview-stat.small b{ font-size:13px; }
.jp-deckview-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:7px;
  background:rgba(255,255,255,0.1);
  color:#cfe6ff;
  font-size:14px;
  font-weight:800;
}
.jp-deckview-stat.small .jp-deckview-icon{ width:24px; height:20px; font-size:11px; }
.jp-deckview-icon.red{ color:#ff8a9c; }
.jp-deckview-cards{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,0.3);
}
/* 13장이 한 줄에 겹쳐서 들어가게: 카드 폭은 줄 폭에서 계산, 둘째 장부터 왼쪽으로 겹침 */
.jp-deckview-row{
  display:flex;
  --w:min(84px, calc((100% + 12 * 18px) / 13));
}
.jp-deckview-row .jp-card,
.jp-deckview-row .jp-card.art{
  width:var(--w);
  height:auto;
  aspect-ratio:691 / 1056;
  cursor:default;
  --pip:8px;
}
.jp-deckview-row .jp-card + .jp-card{ margin-left:-18px; }
.jp-deckview-row .jp-card:hover{ transform:translateY(-6px); z-index:1; }
/* 이미 뽑은 카드: 투명도 대신 어둡게 -- 반투명이면 겹친 뒤 카드가 비쳐 보인다 */
.jp-deckview-row .jp-card.gone{ filter:brightness(.35) grayscale(1); }
.jp-deckview-box > .btn{ display:block; margin:14px auto 0; }
/* 쓰레쉬 액티브(고르기 모드): 남은 카드만 누를 수 있음. 올리면 크게 떠올라 겹친 카드도 잘 보임 */
.jp-deck-pick .jp-deckview-row .jp-card.pickable{ cursor:pointer; transition:transform .12s, box-shadow .12s; }
.jp-deck-pick .jp-deckview-row .jp-card.pickable:hover{
  transform:translateY(-14px) scale(1.12);
  z-index:5;
  box-shadow:0 0 0 3px #3fbf8a, 0 10px 22px rgba(0,0,0,0.55);
}
.jp-deck-pick .jp-deckview-row .jp-card.gone{ pointer-events:none; }
.jp-deck-pick .jp-modal-title{ color:#7dffc4; }

/* ---------- 인게임 족보표 (#handsModal) ---------- */
.jp-handsview-box{ max-width:560px; }
.jp-handsview{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:16px 0 4px;
}
.jp-handsview-row{
  display:grid;
  grid-template-columns:1fr auto 64px;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:12px;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--line);
}
.jp-handsview-name{ text-align:left; font-weight:800; font-size:15px; }
.jp-handsview-lv{
  margin-right:6px;
  padding:1px 6px;
  border-radius:6px;
  background:#ffd45a;
  color:#2b1d00;
  font-size:11px;
}
.jp-handsview-calc{ display:flex; align-items:center; gap:4px; }
.jp-handsview-calc .jp-chips,
.jp-handsview-calc .jp-mult{
  min-width:58px;
  padding:4px 8px;
  font-size:17px;
  text-align:center;
}
.jp-handsview-calc .jp-chips{ background:#2f6fd6; color:#fff; text-align:right; }
.jp-handsview-calc .jp-mult{ background:#d8365a; color:#fff; text-align:left; }
.jp-handsview-count{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  font-family:'Orbitron',var(--font);
}
.jp-handsview-count small{ color:var(--sub); }
.jp-handsview-count b{ color:#8ec5ff; }
.jp-handsview-box > .btn{ display:block; margin:14px auto 0; }

@media (max-width:640px){
  .jp-modal{ padding:10px; }
  .jp-deckview-box, .jp-handsview-box{ padding:16px 12px; }
  /* 폰: 통계는 위에 가로로, 카드는 아래에 */
  .jp-deckview{ flex-direction:column; }
  .jp-deckview-stats{ flex-direction:column; }
  .jp-deckview-col{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:4px 12px; }
  .jp-deckview-stat{ min-width:0; gap:4px; }
  .jp-deckview-stat b{ font-size:13px; }
  .jp-deckview-row{ --w:calc((100% + 12 * 12px) / 13); }
  .jp-deckview-row .jp-card + .jp-card{ margin-left:-12px; }
  .jp-handsview-row{ grid-template-columns:1fr auto 44px; gap:6px; padding:5px 6px; }
  .jp-handsview-name{ font-size:13px; }
  .jp-handsview-calc .jp-chips, .jp-handsview-calc .jp-mult{ min-width:44px; font-size:14px; padding:3px 6px; }
}

/* ---------- 손패 애니메이션 (script.js flyOutCards / settleHand) ---------- */
/* 덱에서 날아오는 동안 덮는 카드 뒷면 -- 뒤집히는 순간 사라짐 */
.jp-card-backface{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  background:#7a1f2b url("cards/Card-back.png") center / cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  filter:brightness(0.85);
  pointer-events:none;
}
/* 오른쪽으로 날아가는 카드 때문에 가로 스크롤바가 잠깐 생기지 않게 */
body.jp-in-game{ overflow-x:hidden; }

/* ---------- 플레이 연출 (script.js flyUpPlayed / bumpCard / jp-pop) ---------- */
/* 그림 카드는 overflow:hidden이라 카드 위에 뜨는 +포인트가 잘렸음 -- 낸 카드 칸에선 풀어 줌(그림은 img 자체 border-radius로 둥근 모서리 유지) */
.jp-played .jp-card.art{ overflow:visible; }
.jp-played .jp-card{ transition:transform .15s ease, box-shadow .15s ease, opacity .25s ease; }
.jp-pop{
  top:-30px;
  z-index:3;
  padding:2px 10px;
  font-family:'Orbitron',var(--font);
  font-size:15px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  animation:jpPop .38s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes jpPop{
  0%{ transform:translate(-50%, 10px) scale(.4); opacity:0; }
  55%{ transform:translate(-50%, -6px) scale(1.3); opacity:1; }
  100%{ transform:translate(-50%, 0) scale(1); opacity:1; }
}
/* 카드 위 숫자 자리에 바뀌어 뜨는 효과(룬): 종류별 색 */
.jp-pop.chips{ background:#2f6fd6; }
.jp-pop.mult{ background:#d8365a; }
.jp-pop.mult.times{ background:#b0102a; box-shadow:0 0 0 2px #ff9aa8, 0 4px 12px rgba(0,0,0,0.4); }
.jp-pop.money{ background:#e0a83a; color:#2b1d00; }

/* 라운드 배지: SMALL/BIG/BOSS 대신 "1-1" 같은 라운드 번호 (색은 그대로 data-kind로 파랑/주황/빨강) */
.jp-round-badge{ font-size:14px; letter-spacing:-0.5px; }
@media (max-width:640px){
  .jp-round-badge{ font-size:10px; }
}

/* ---------- 액티브 아이콘 + 쿨타임 (champions/<키>_skill.png) ---------- */
.jp-skill-ico{
  width:26px;
  height:26px;
  flex-shrink:0;
  border-radius:7px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.4);
  object-fit:cover;
}
.jp-skill-ico.hidden{ display:none; }
.jp-active-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.jp-active-btn:disabled .jp-skill-ico{ filter:grayscale(1) brightness(.7); }
.jp-active-cd{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:700;
  color:var(--sub);
}
.jp-clock{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* 캐릭터 상세 창: 아이콘 왼쪽 + 설명 + 그 아래 쿨타임 */
.jp-ability-active{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.jp-ability-active .jp-skill-ico{ width:40px; height:40px; border-radius:9px; margin-top:2px; }
.jp-ability-active .jp-active-cd{ display:flex; margin-top:4px; }

/* ---------- 카드팩 (상점) + 행성 카드 (#packModal) ---------- */
.jp-pack{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
}
.jp-pack-art{
  width:72px;
  aspect-ratio:3 / 4;
  flex-shrink:0;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(160deg, #2b5f8a, #173048);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.jp-pack-art img{ width:100%; height:100%; object-fit:contain; }
.jp-pack-art.no-art{ font-size:32px; }
.pack-jumbo .jp-pack-art.no-art{ background:linear-gradient(160deg, #8a5a2b, #48301a); }
.pack-mega .jp-pack-art.no-art{ background:linear-gradient(160deg, #6b3a9a, #2e1848); }

.jp-pack-box{ max-width:760px; }
.jp-pack-box > .btn{ display:block; margin:14px auto 0; }
.jp-planet-options{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:18px 0 6px;
}
.jp-planet{
  width:128px;
  padding:10px 8px;
  border-radius:14px;
  border:1px solid rgba(130,200,220,0.35);
  background:linear-gradient(180deg, rgba(40,90,110,0.55), rgba(15,30,45,0.9));
  color:inherit;
  font:inherit;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.jp-planet:hover:not(:disabled){ transform:translateY(-5px); box-shadow:0 10px 24px rgba(80,200,230,0.25); }
.jp-planet.used{ opacity:.4; cursor:default; }
.jp-planet-art{
  width:84px;
  aspect-ratio:5 / 7;
  margin:0 auto 8px;
  border-radius:8px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#3d8a9c;
}
.jp-planet-art img{ width:100%; height:100%; object-fit:contain; image-rendering:auto; }
.jp-planet-art.no-art{ font-size:38px; }
.jp-planet-name{ font-size:15px; font-weight:800; color:#9fe3f2; }
.jp-planet-hand{ margin-top:4px; font-size:12.5px; }
.jp-planet-hand b{ color:#ffd45a; }
.jp-planet-gain{ margin-top:4px; font-size:12px; color:var(--sub); }
.jp-planet-gain .c{ color:#6fb6ff; font-weight:800; }
.jp-planet-gain .m{ color:#ff7a90; font-weight:800; }
.jp-planet-done{ margin-top:4px; font-size:12px; font-weight:800; color:var(--cyan); }
@media (max-width:640px){
  .jp-planet{ width:calc(50% - 6px); }
}
/* 넣은 그림 비율에 맞춤 (행성 142x190, 팩 114x186 픽셀아트) -- 그림이 있으면 배경 상자 없이 그림만 */
.jp-planet-art{ aspect-ratio:142 / 190; }
.jp-pack-art{ aspect-ratio:114 / 186; }
.jp-planet-art:not(.no-art), .jp-pack-art:not(.no-art){ background:none; box-shadow:none; border-radius:0; }
.jp-planet-art img, .jp-pack-art img{ image-rendering:pixelated; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }

/* ---------- 증강/캐릭터 발동 말풍선 (script.js 플레이 연출의 kind:'aug'/'char' 단계) ---------- */
.jp-aug-bar .jp-aug, .jp-char-portrait{ position:relative; }
.jp-trigger{
  position:absolute;
  left:50%;
  bottom:-14px;
  z-index:20;
  padding:2px 10px;
  border-radius:999px;
  font-family:'Orbitron',var(--font);
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  color:#fff;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.45);
  animation:jpTrigger .9s cubic-bezier(.2,.9,.3,1.3) forwards;
}
.jp-trigger.mult{ background:#d8365a; }
.jp-trigger.chips{ background:#2f6fd6; }
.jp-char-portrait .jp-trigger{ bottom:-6px; }
@keyframes jpTrigger{
  0%{ transform:translate(-50%, -6px) scale(.4); opacity:0; }
  25%{ transform:translate(-50%, 4px) scale(1.25); opacity:1; }
  40%{ transform:translate(-50%, 2px) scale(1); opacity:1; }
  80%{ transform:translate(-50%, 2px) scale(1); opacity:1; }
  100%{ transform:translate(-50%, 10px) scale(.9); opacity:0; }
}

/* ---------- 상점 구매/판매 확인 창 (#buyModal) ---------- */
/* 증강 선택 화면처럼 큼직하게 (2026-10-09) */
.jp-buy-box{
  max-width:520px;
  padding:30px 28px 26px;
  background:radial-gradient(ellipse at 50% 0%, rgba(80,120,200,0.25), transparent 60%), linear-gradient(180deg, rgba(14,22,40,0.98), rgba(6,9,18,0.98));
}
.jp-buy-box .jp-modal-title{ font-size:32px; letter-spacing:3px; text-shadow:0 0 18px rgba(120,180,255,0.45); }
.jp-buy-item{ display:flex; justify-content:center; margin:26px 0 18px; padding-top:10px; }
/* 복사해 온 칸을 세로로 큰 카드처럼 */
.jp-buy-item > *{
  width:260px;
  max-width:100%;
  min-height:330px;
  pointer-events:none;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  padding:30px 18px 24px !important;
  border-radius:20px !important;
  border-width:3px !important;
  text-align:center !important;
  box-shadow:0 0 28px rgba(150,190,255,0.18), 0 10px 30px rgba(0,0,0,0.5);
}
.jp-buy-item .jp-pack-art{ width:120px !important; }
.jp-buy-item .cat-aug .jp-pack-art, .jp-buy-item .jp-pack.cat-aug .jp-pack-art{ width:130px !important; }
.jp-buy-item .jp-aug-icon{ width:110px !important; height:110px !important; font-size:52px !important; margin:0 !important; }
.jp-buy-item .jp-aug-name{ font-size:24px !important; font-weight:900; line-height:1.25; }
.jp-buy-item .jp-aug-desc{ display:block !important; margin-top:8px; font-size:16px !important; line-height:1.55; color:#e6ecf5; }
.jp-buy-item .jp-aug-lv{ transform:translateX(-50%) scale(1.3) !important; }
.jp-buy-note{ font-size:19px; line-height:1.6; color:var(--sub); text-align:center; }
.jp-buy-note b{ color:var(--warn); font-family:'Orbitron',var(--font); font-size:22px; }
.jp-buy-box .jp-hero-detail-btns{ gap:14px; margin-top:22px; }
.jp-buy-box .jp-hero-detail-btns .btn{ padding:16px 12px; font-size:19px; border-radius:14px; }
@media (max-width:640px){
  .jp-buy-box{ padding:22px 16px 18px; }
  .jp-buy-box .jp-modal-title{ font-size:26px; }
  .jp-buy-item > *{ width:220px; min-height:270px; }
  .jp-buy-item .jp-aug-icon{ width:86px !important; height:86px !important; }
  .jp-buy-item .jp-aug-name{ font-size:20px !important; }
  .jp-buy-note{ font-size:16px; }
  .jp-buy-box .jp-hero-detail-btns .btn{ padding:13px 10px; font-size:16px; }
}

/* ---------- 증강 레벨 / 증강 팩 / 강화 팩 / 내 증강 말풍선 ---------- */
.jp-aug{ position:relative; }
.jp-aug-lv{
  position:absolute;
  top:5px;
  right:6px;
  padding:0 6px;
  border-radius:6px;
  font-family:'Orbitron',var(--font);
  font-size:10px;
  font-weight:800;
  color:#2b1d00;
  background:#ffd45a;
}
.jp-aug-rarity b{ color:#ffd45a; }
.jp-pack-aug{
  width:170px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:transform .15s;
}
.jp-pack-aug:hover:not(:disabled){ transform:translateY(-5px); }
.jp-pack-aug .jp-aug{ height:100%; }
.jp-pack-aug.used{ opacity:.4; cursor:default; }
.cat-aug .jp-pack-art.no-art{ background:linear-gradient(160deg, #3a6fd8, #1b2f63); font-size:30px; color:#fff; }
.cat-up .jp-pack-art.no-art{ background:linear-gradient(160deg, #e0a83a, #6b4612); font-size:30px; color:#fff; }
/* 상점 "내 증강": 마우스를 올리면 능력 말풍선 */
.jp-aug-tip{
  display:none;
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  z-index:30;
  width:230px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(8,12,24,0.97);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,0.55);
  font-size:12.5px;
  line-height:1.5;
  color:var(--text);
  text-align:left;
  white-space:normal;
  pointer-events:none;
}
.jp-shop-owned .jp-aug:hover .jp-aug-tip,
.jp-shop-owned .jp-aug:focus-visible .jp-aug-tip{ display:block; }
.jp-aug-tip-head{ display:flex; justify-content:space-between; gap:8px; margin-bottom:4px; }
.jp-aug-tip-head span{ color:#ffd45a; font-size:11.5px; font-weight:700; }
.jp-aug-tip-next{ margin-top:6px; color:var(--sub); }
.jp-aug-tip-sell{ margin-top:6px; color:var(--warn); font-weight:700; }
/* 증강 팩/강화 팩 그림은 정사각형 (aug-icons/aug_pack_*, aug_upgrade_*) */
.cat-aug .jp-pack-art, .cat-up .jp-pack-art{ width:84px; aspect-ratio:1; }
.cat-aug .jp-pack-art img, .cat-up .jp-pack-art img{ image-rendering:auto; }

/* ---------- 증강 레벨 = 별 (롤 아레나 증강처럼 카드 위쪽 가운데 탭) ---------- */
.jp-aug-lv{
  top:-9px;
  right:auto;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  padding:1px 8px;
  border-radius:8px;
  background:#0c1222;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 2px 8px rgba(0,0,0,0.5);
  line-height:1.3;
}
.jp-stars{
  font-family:var(--font);
  font-size:11px;
  letter-spacing:1px;
  color:#ffd45a;
  text-shadow:0 0 6px rgba(255,212,90,0.55);
  white-space:nowrap;
}
.jp-stars i{ font-style:normal; color:rgba(255,255,255,0.18); text-shadow:none; }
.jp-aug-rarity .jp-stars{ font-size:10px; }
.jp-aug-tip .jp-stars{ font-size:11px; }
/* 별 탭이 위로 튀어나오므로 증강 줄 위쪽 여유 */
.jp-aug-bar .jp-aug-row, .jp-shop-owned, .jp-pick-options, .jp-planet-options{ padding-top:8px; }

/* ---------- 증강 드래그로 순서 바꾸기 (script.js attachAugDrag) ---------- */
.jp-aug-row .jp-aug:not(.empty){ cursor:grab; touch-action:none; user-select:none; }
.jp-aug.dragging{
  z-index:40;
  cursor:grabbing;
  transition:none;
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
  opacity:.92;
}
.jp-aug.dragging .jp-aug-tip{ display:none !important; }
.jp-aug.drop-target{ outline:2px dashed var(--cyan); outline-offset:3px; }
.jp-trigger.money{ background:#e0a83a; color:#2b1d00; }
.jp-trigger.level{ background:#22b85a; color:#fff; }

/* ---------- 족보 레벨업 배너 (우주 관측·타 버린 메모) ---------- */
.jp-board{ position:relative; }
.jp-levelup{
  position:absolute;
  left:50%;
  top:38%;
  z-index:40;
  padding:10px 24px;
  border-radius:14px;
  font-size:24px;
  font-weight:900;
  white-space:nowrap;
  color:#eafff1;
  background:linear-gradient(180deg, rgba(40,200,110,0.95), rgba(18,130,70,0.95));
  border:2px solid #7dffb0;
  box-shadow:0 0 24px rgba(60,230,130,0.65), 0 8px 24px rgba(0,0,0,0.45);
  pointer-events:none;
  animation:jpLevelUp 1.6s cubic-bezier(.2,.9,.3,1.2) forwards;
}
.jp-levelup b{ font-family:'Orbitron',var(--font); color:#fff; }
.jp-levelup-arrow{ display:inline-block; color:#c8ffd9; animation:jpLevelArrow .5s ease-in-out infinite alternate; }
@keyframes jpLevelUp{
  0%{ transform:translate(-50%, 20px) scale(.5); opacity:0; }
  18%{ transform:translate(-50%, -6px) scale(1.15); opacity:1; }
  30%{ transform:translate(-50%, 0) scale(1); opacity:1; }
  75%{ transform:translate(-50%, -10px) scale(1); opacity:1; }
  100%{ transform:translate(-50%, -50px) scale(.95); opacity:0; }
}
@keyframes jpLevelArrow{ from{ transform:translateY(2px); } to{ transform:translateY(-4px); } }
body.jp-calm .jp-levelup, body.jp-calm .jp-levelup-arrow{ animation:none; }
@media (max-width:640px){ .jp-levelup{ font-size:18px; padding:8px 16px; } }

/* ---------- 증강 선택 큰 화면 (증강 팩/강화 팩, TFT 증강 선택 느낌) ---------- */
.jp-pack-big .jp-pack-box{
  max-width:1100px;
  padding:28px 24px 22px;
  background:radial-gradient(ellipse at 50% 0%, rgba(80,120,200,0.25), transparent 60%), linear-gradient(180deg, rgba(14,22,40,0.98), rgba(6,9,18,0.98));
}
.jp-pack-big .jp-modal-title{ font-size:34px; letter-spacing:4px; text-shadow:0 0 18px rgba(120,180,255,0.45); }
.jp-pack-big .jp-modal-sub{ font-size:15px; }
.jp-pack-big .jp-planet-options{ gap:26px; margin:30px 0 12px; padding-top:12px; }
.jp-aug-pick{
  --rc:#9fb4c8;
  --bg1:#1d3a4a; --bg2:#0d1b26;
  position:relative;
  width:250px;
  min-height:370px;
  padding:26px 18px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border-radius:26px 26px 18px 18px;
  border:3px solid var(--rc);
  background:radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--rc) 35%, transparent), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg2));
  box-shadow:0 0 0 2px rgba(0,0,0,0.5), 0 0 26px color-mix(in srgb, var(--rc) 45%, transparent), inset 0 0 30px rgba(0,0,0,0.45);
  color:var(--text);
  font:inherit;
  text-align:center;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.jp-aug-pick.rarity-2{ --rc:#f0b13c; --bg1:#7a3c10; --bg2:#2a1406; }
.jp-aug-pick.rarity-3{ --rc:#c58bff; --bg1:#3b2470; --bg2:#121030; }
.jp-aug-pick.rarity-3{ border-image:linear-gradient(160deg, #7fe7ff, #c58bff, #ff8ad8, #ffe17a) 1; border-radius:0; }
.jp-aug-pick:hover:not(:disabled){
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 0 0 2px rgba(0,0,0,0.5), 0 0 40px color-mix(in srgb, var(--rc) 70%, transparent), inset 0 0 30px rgba(0,0,0,0.45);
}
.jp-aug-pick.used{ opacity:.35; cursor:default; }
.jp-aug-pick .jp-aug-lv{ top:-12px; font-size:13px; padding:2px 10px; }
.jp-aug-pick .jp-aug-lv .jp-stars{ font-size:14px; }
.jp-aug-pick-icon{
  width:130px;
  height:130px;
  margin-top:6px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%);
}
.jp-aug-pick-icon .jp-aug-icon{ width:110px; height:110px; font-size:60px; box-shadow:none; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 70%, transparent)); }

/* ---------- 증강 아이콘이 어두운 배경에 묻히던 것 (2026-10-09, 원판 방식에서 다시 바꿈) ----------
   아이콘 그림이 짙은 회색 테두리 + 밝은 가운데라 어두운 칸에서 안 보였다.
   그림 전체를 밝게 끌어올려(어두운 테두리 -> 밝은 회색, 밝은 가운데 -> 흰색) 등급 색을 살짝 입히고 은은한 빛을 두름.
   (반전 방식은 실버 아이콘의 밝은 가운데 그림이 어두워져서 안 씀.) 배경 원판 없음.
   오리아나 구체처럼 원래 색이 있는 그림(aug-icons/silver|gold|prism 밖)은 그대로. */
.jp-aug-icon img[src*="aug-icons/silver/"]{ filter:brightness(2.1) contrast(1.15) drop-shadow(0 0 4px rgba(220,235,255,0.55)); }
.jp-aug-icon img[src*="aug-icons/gold/"]{ filter:sepia(0.8) saturate(2.4) brightness(1.9) contrast(1.1) drop-shadow(0 0 5px rgba(255,190,70,0.6)); }
.jp-aug-icon img[src*="aug-icons/prism/"]{ filter:sepia(1) saturate(3) hue-rotate(225deg) brightness(1.9) contrast(1.1) drop-shadow(0 0 6px rgba(190,130,255,0.7)); }
.jp-aug-icon:has(img[src*="aug-icons/"]){ background:none; }
.jp-aug-pick-name{ margin-top:6px; font-size:22px; font-weight:800; line-height:1.25; }
.jp-aug-pick-rarity{ font-size:12.5px; font-weight:700; color:var(--rc); }
.jp-aug-pick-rarity .jp-stars{ font-size:12px; }
.jp-aug-pick-desc{ margin-top:8px; font-size:15px; line-height:1.55; color:#e6edf7; word-break:keep-all; }
.jp-aug-pick-done{ margin-top:auto; font-size:14px; font-weight:800; color:var(--cyan); }
@media (max-width:900px){
  .jp-pack-big .jp-planet-options{ gap:14px; }
  .jp-aug-pick{ width:calc(50% - 10px); min-height:300px; padding:22px 12px 16px; }
  .jp-aug-pick-icon{ width:96px; height:96px; }
  .jp-aug-pick-icon .jp-aug-icon{ width:80px; height:80px; font-size:44px; }
  .jp-aug-pick-name{ font-size:18px; }
  .jp-aug-pick-desc{ font-size:13.5px; }
  .jp-pack-big .jp-modal-title{ font-size:26px; }
}
/* PC: 4장까지 한 줄 */
@media (min-width:901px){
  .jp-pack-big .jp-planet-options{ flex-wrap:nowrap; gap:20px; }
  .jp-aug-pick{ width:230px; flex-shrink:1; }
}

/* ---------- 게임 화면 증강 줄: 아이콘·이름 크게, 설명은 말풍선 ---------- */
.jp-aug-bar .jp-aug:not(.empty){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:96px;
  padding:14px 6px 8px;
  text-align:center;
  cursor:pointer;
}
.jp-aug-bar .jp-aug:not(.empty) .jp-aug-icon{ width:46px; height:46px; font-size:24px; margin:0; }
.jp-aug-bar .jp-aug:not(.empty) .jp-aug-name{ font-size:14.5px; font-weight:800; line-height:1.25; word-break:keep-all; }
.jp-aug-bar .jp-aug .jp-aug-desc{ display:none; }
.jp-aug-bar .jp-aug.empty{ min-height:96px; }
/* 말풍선은 증강 줄 아래로 (위는 화면 끝이라) */
.jp-aug-bar .jp-aug-tip{ top:calc(100% + 8px); bottom:auto; width:220px; }
.jp-aug-bar .jp-aug.tip-open .jp-aug-tip{ display:block; }
@media (hover:hover){
  .jp-aug-bar .jp-aug:hover .jp-aug-tip{ display:block; }
}
.jp-aug-bar .jp-aug.dragging .jp-aug-tip{ display:none; }
@media (max-width:640px){
  .jp-aug-bar .jp-aug:not(.empty){ min-height:78px; padding:12px 4px 6px; gap:4px; }
  .jp-aug-bar .jp-aug:not(.empty) .jp-aug-icon{ width:36px; height:36px; }
  .jp-aug-bar .jp-aug:not(.empty) .jp-aug-name{ font-size:12px; }
  .jp-aug-bar .jp-aug.empty{ min-height:78px; }
  .jp-aug-bar .jp-aug-tip{ width:190px; }
}
/* 말풍선이 열린 칸은 옆/아래 칸보다 위에 (폰 2줄 배치에서 아래 줄에 가려지던 것) */
.jp-aug-bar .jp-aug.tip-open{ z-index:35; }
@media (hover:hover){ .jp-aug-bar .jp-aug:hover{ z-index:35; } }

/* 상점 "내 증강"도 같은 모양: 아이콘+이름만, 설명은 마우스 올리면 말풍선 (판매 창에는 설명 그대로) */
.jp-shop-owned .jp-aug:not(.empty){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:96px;
  padding:14px 6px 8px;
  text-align:center;
}
.jp-shop-owned .jp-aug:not(.empty) .jp-aug-icon{ width:46px; height:46px; font-size:24px; margin:0; }
.jp-shop-owned .jp-aug:not(.empty) .jp-aug-name{ font-size:14.5px; font-weight:800; line-height:1.25; word-break:keep-all; }
.jp-shop-owned .jp-aug .jp-aug-desc{ display:none; }
.jp-shop-owned .jp-aug.empty{ min-height:96px; }
.jp-shop-owned .jp-aug:hover, .jp-shop-owned .jp-aug:focus-visible{ z-index:35; }
@media (max-width:640px){
  .jp-shop-owned .jp-aug:not(.empty){ min-height:78px; padding:12px 4px 6px; gap:4px; }
  .jp-shop-owned .jp-aug:not(.empty) .jp-aug-icon{ width:36px; height:36px; }
  .jp-shop-owned .jp-aug:not(.empty) .jp-aug-name{ font-size:12px; }
  .jp-shop-owned .jp-aug.empty{ min-height:78px; }
}

/* 소리 켜기/끄기 (화면 왼쪽 아래 고정) */
.jp-sound-btn{ position:fixed; left:14px; bottom:14px; z-index:90; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:rgba(10,14,30,.75); font-size:19px; cursor:pointer; line-height:1; }
.jp-sound-btn:hover{ background:rgba(40,50,90,.85); }
.jp-sound-panel{ position:fixed; left:14px; bottom:66px; z-index:91; width:250px; padding:14px 16px;
  border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(12,17,36,.96); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.jp-sound-title{ font-weight:800; font-size:14px; margin-bottom:10px; }
.jp-sound-row{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:13px; }
.jp-sound-row span{ width:56px; flex-shrink:0; opacity:.85; }
.jp-sound-row b{ width:28px; text-align:right; font-variant-numeric:tabular-nums; color:#5ec8ff; }
.jp-sound-row input[type=range]{ flex:1; appearance:none; -webkit-appearance:none; height:6px; border-radius:3px; cursor:pointer;
  background:linear-gradient(90deg, #4f8ff0 var(--pct, 50%), rgba(255,255,255,.15) var(--pct, 50%)); }
.jp-sound-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:0; }
.jp-sound-row input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:0; }
.jp-sound-panel.muted .jp-sound-row{ opacity:.4; }
.jp-sound-mute{ width:100%; margin-top:6px; padding:8px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:inherit; font-weight:700; cursor:pointer; }
.jp-sound-mute.on{ background:#e0466a; border-color:#e0466a; }

/* 카드 룬 아이콘 말풍선 (화면에 하나, script.js runeTip) -- .jp-item-tip 모양 그대로, 위치만 fixed */
.jp-rune-tip{ position:fixed; transform:none; bottom:auto; z-index:1000; }  /* 팩·고르기 창(z 400~500) 위에도 보이게 (2026-10-10: 300이라 룬 팩에서 안 보였음) */
/* ---------- 시즌 2 지역 테마: 정글(1~8) / 프렐요드(9~16) / 공허(17~) ----------
   배경 = 별 캔버스(#stars)의 배경을 지역 색으로 + regions/<key>.webp가 있으면 그 그림 (없으면 색만) */
body.region-jungle #stars{
  background:
    linear-gradient(180deg, rgba(4,10,8,0.42), rgba(4,10,8,0.78)),
    url('regions/jungle.webp?v=2') center / cover no-repeat,
    radial-gradient(900px 520px at 15% -8%, rgba(95,207,122,0.20), transparent 60%),
    radial-gradient(820px 520px at 100% 0%, rgba(40,120,80,0.22), transparent 60%),
    linear-gradient(180deg, #0c1a14, #050c08 45%);
}
body.region-freljord #stars{
  background:
    linear-gradient(180deg, rgba(8,4,6,0.55), rgba(8,4,6,0.85)),
    url('regions/freljord.webp?v=2') center / cover no-repeat,
    radial-gradient(900px 520px at 15% -8%, rgba(216,54,74,0.24), transparent 60%),
    radial-gradient(820px 520px at 100% 0%, rgba(120,20,30,0.30), transparent 60%),
    linear-gradient(180deg, #1a0b0e, #08040a 45%);
}
body.region-void #stars{
  background:
    linear-gradient(180deg, rgba(6,2,12,0.5), rgba(6,2,12,0.85)),
    url('regions/void.webp?v=2') center / cover no-repeat,
    radial-gradient(900px 560px at 50% 110%, rgba(163,92,255,0.30), transparent 60%),
    radial-gradient(700px 420px at 0% 0%, rgba(90,20,140,0.28), transparent 60%),
    linear-gradient(180deg, #0f0618, #050208 45%);
}
/* 왼쪽 라운드 카드 테두리·이름도 지역 색 */
body[class*="region-"] .jp-round-card{ border-color:color-mix(in srgb, var(--region) 55%, transparent); }
body[class*="region-"] .jp-round-name{ color:var(--region); }

/* 지역 진입 연출 (그 지역 첫 라운드에 한 번, 누르면 넘김) */
.jp-region-intro{
  position:fixed; inset:0; z-index:1500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--region) 28%, transparent), rgba(3,4,10,0.94) 70%);
  opacity:0; transition:opacity .45s ease; cursor:pointer;
}
.jp-region-intro.show{ opacity:1; }
.jp-region-intro.out{ opacity:0; }
.jp-region-intro-sub{ font-size:15px; font-weight:700; color:rgba(255,255,255,0.7); letter-spacing:.08em; transform:translateY(10px); transition:transform .6s ease; }
.jp-region-intro-name{
  font-size:clamp(52px, 11vw, 112px); font-weight:900; letter-spacing:.06em; color:var(--region);
  text-shadow:0 0 30px color-mix(in srgb, var(--region) 70%, transparent), 0 4px 0 rgba(0,0,0,0.5);
  transform:scale(.9); filter:blur(6px); transition:transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}
.jp-region-intro-tag{ font-size:14px; font-weight:700; color:rgba(255,255,255,0.75); }
.jp-region-intro.show .jp-region-intro-name{ transform:none; filter:none; }
.jp-region-intro.show .jp-region-intro-sub{ transform:none; }

/* 프렐요드 정복 승리 화면 */
.jp-victory{ z-index:1400; }
.jp-victory-box{ max-width:520px; text-align:center; border:1px solid rgba(255,212,90,0.45); box-shadow:0 0 40px rgba(255,212,90,0.18); }
.jp-victory-crown{ font-size:56px; line-height:1; filter:drop-shadow(0 0 16px rgba(255,212,90,0.7)); }
.jp-victory-title{ margin-top:6px; font-size:34px; font-weight:900; color:#ffd45a; letter-spacing:.04em; }
.jp-victory-sub{ margin-top:4px; color:var(--sub); font-weight:700; }
.jp-victory-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0 12px; }
.jp-victory-stats div{ padding:10px 6px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.jp-victory-stats small{ display:block; font-size:12px; color:var(--sub); }
.jp-victory-stats b{ font-size:17px; }
.jp-victory-void{ font-size:13px; color:#c9a2ff; margin-bottom:14px; }
.jp-victory-go{ background:linear-gradient(90deg,#7b3cff,#a35cff); border-color:#a35cff; color:#fff; }

/* =====================================================================
   시즌 2 상점: 롤 클라이언트 컨셉 (어두운 남색 + 얇은 금테 + 청록 포인트, 각진 모서리)
   색: 금 #c8aa6e / 진한 금 #785a28 / 밝은 글자 #f0e6d2 / 회색 글자 #a09b8c / 청록 #0ac8b9 / 바탕 #010a13·#0a1428
   ===================================================================== */
#shopScreen{
  --lol-gold:#c8aa6e; --lol-gold-d:#785a28; --lol-gold-dd:#463714; --lol-text:#f0e6d2; --lol-sub:#a09b8c;
  --lol-teal:#0ac8b9; --lol-teal-d:#005a82; --lol-bg:#010a13; --lol-bg2:#0a1428;
  position:relative;
  padding:20px 22px 26px;
  background:
    radial-gradient(900px 400px at 70% 0%, rgba(10,200,185,0.07), transparent 60%),
    linear-gradient(180deg, rgba(10,20,40,0.94), rgba(1,10,19,0.97));
  border:1px solid var(--lol-gold-d);
  box-shadow:inset 0 0 0 1px rgba(1,10,19,0.9), inset 0 0 0 2px rgba(200,170,110,0.12), 0 10px 40px rgba(0,0,0,0.5);
}
/* 위아래 금색 장식 선 */
#shopScreen::before, #shopScreen::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%); width:180px; height:2px;
  background:linear-gradient(90deg, transparent, var(--lol-gold), transparent);
}
#shopScreen::before{ top:-1px; }
#shopScreen::after{ bottom:-1px; }
#shopScreen .jp-shop-title{
  font-size:30px; font-weight:900; letter-spacing:.12em;
  background:linear-gradient(180deg, #f0e6d2, #c8aa6e 70%, #a0884f); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#shopScreen .jp-shop-sub{ color:var(--lol-sub); }
#shopScreen .jp-shop-money{ color:var(--lol-gold); text-shadow:0 0 14px rgba(200,170,110,0.35); }
/* 줄 제목: 작은 금색 글자 + 오른쪽으로 사라지는 금선 */
#shopScreen .jp-shop-label{
  display:flex; align-items:center; gap:10px;
  color:var(--lol-gold); font-size:13px; font-weight:800; letter-spacing:.14em;
}
#shopScreen .jp-shop-label::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--lol-gold-d), transparent 80%); }
#shopScreen .jp-shop-label small{ color:var(--lol-sub); letter-spacing:0; }
/* 위쪽 버튼(도감/저장/포기): 롤 보조 버튼 */
#shopScreen .jp-shop-exit-btns .btn{
  border-radius:0; background:#1e2328; color:var(--lol-text); border:1px solid var(--lol-gold-d);
  font-weight:700; letter-spacing:.04em;
}
#shopScreen .jp-shop-exit-btns .btn:hover{ border-color:var(--lol-gold); background:#262c33; box-shadow:0 0 10px rgba(200,170,110,0.25); }
/* 상품 칸 공통 (증강 바로 구매 / 팩): 어두운 판 + 얇은 금테, 마우스 올리면 금테 밝게 + 빛 */
#shopScreen .jp-shop-item{
  border-radius:2px !important;
  border:1px solid var(--lol-gold-dd) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 0 24px rgba(0,0,0,0.45);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
#shopScreen .jp-shop-item:hover:not(:disabled){
  border-color:var(--lol-gold) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6), 0 0 16px rgba(200,170,110,0.35);
  transform:translateY(-2px);
}
#shopScreen .jp-shop-item.sold{ filter:grayscale(.8) brightness(.55); }
#shopScreen .jp-price{ color:var(--lol-gold); }
/* 증강 바로 구매 칸: 왼쪽 둥근 금테 아이콘 + 오른쪽 이름·분류·설명, 가격은 아래 */
#shopScreen .jp-aug-offer{
  display:grid; grid-template-columns:96px 1fr; grid-template-rows:1fr auto; gap:6px 14px; align-items:center;
  padding:16px 18px 12px; text-align:left; cursor:pointer; color:var(--lol-text);
  background:linear-gradient(180deg, #0f1c2b, #060e17);
}
#shopScreen .jp-aug-offer-icon{
  grid-row:1 / 3; width:96px; height:96px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle, #13283a, #050b12 70%);
  box-shadow:0 0 0 2px var(--lol-gold-d), 0 0 0 4px #050b12, 0 0 0 5px var(--rc, var(--lol-teal)), 0 0 18px color-mix(in srgb, var(--rc, #0ac8b9) 45%, transparent);
}
#shopScreen .jp-aug-offer-icon .jp-aug-icon{ width:74px; height:74px; }
#shopScreen .jp-aug-offer.rarity-1{ --rc:#9fb4c8; }
#shopScreen .jp-aug-offer.rarity-2{ --rc:#e8b84a; }
#shopScreen .jp-aug-offer.rarity-3{ --rc:#c08bff; }
#shopScreen .jp-aug-offer-name{ font-size:18px; font-weight:800; color:var(--lol-text); }
#shopScreen .jp-aug-offer-tags{ margin:4px 0 6px; display:flex; gap:4px; flex-wrap:wrap; }
#shopScreen .jp-aug-offer-desc{ font-size:13.5px; line-height:1.45; color:#cfc6b3; }
#shopScreen .jp-aug-offer .jp-price{ grid-column:2; justify-self:end; font-size:18px; }
/* 오른쪽 세로 버튼: 새로고침 = 롤 청록 보조 버튼, 다음 라운드 = 롤 금색 "플레이" 버튼 */
#shopScreen .jp-side-btn{
  border-radius:2px; letter-spacing:.06em; position:relative;
  background:linear-gradient(180deg, #1e2328, #0f1419);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.7);
}
#shopScreen .jp-side-btn.reroll{ color:#cdfafa; border:2px solid; border-image:linear-gradient(180deg, #0ac8b9, #005a82) 1; }
#shopScreen .jp-side-btn.reroll b{ color:var(--lol-gold); }
#shopScreen .jp-side-btn.reroll:hover:not(:disabled){ background:linear-gradient(180deg, #0f3b45, #0b2530); box-shadow:0 0 16px rgba(10,200,185,0.4); }
#shopScreen .jp-side-btn.next{ color:var(--lol-text); border:2px solid; border-image:linear-gradient(180deg, #f0e6d2, #c8aa6e 40%, #785a28) 1; }
#shopScreen .jp-side-btn.next:hover{ background:linear-gradient(180deg, #3c3220, #1e2328); box-shadow:0 0 18px rgba(200,170,110,0.45); }
/* 팩은 등급(일반/점보/메가) 상관없이 전부 같은 카드팩 배경 + 얇은 금테 (등급 색 배경은 위 증강 칸으로 옮김) */
#shopScreen #shopAugs .jp-pack, #shopScreen #shopPack .jp-pack,
#shopScreen #shopAugs .jp-pack.pack-jumbo, #shopScreen #shopPack .jp-pack.pack-jumbo,
#shopScreen #shopAugs .jp-pack.pack-mega, #shopScreen #shopPack .jp-pack.pack-mega{
  border:1px solid var(--lol-gold-dd) !important;
  background:radial-gradient(circle at 50% 30%, rgba(159,180,200,0.16), transparent 60%), linear-gradient(180deg, #1d3a4a, #0d1b26) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 0 24px rgba(0,0,0,0.45);
}
/* 증강 칸: 등급별 배경 + 테두리 (실버 / 골드 / 프리즘 = 예전 팩 등급 색), 높이 고정(설명 줄 수와 상관없이) */
#shopScreen .jp-aug-offer{
  height:172px; overflow:hidden;
  --rc:#9fb4c8; --bg1:#1d3a4a; --bg2:#0d1b26;
  border:2px solid var(--rc) !important;
  background:radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg2));
  box-shadow:0 0 12px color-mix(in srgb, var(--rc) 30%, transparent), inset 0 0 24px rgba(0,0,0,0.4);
}
#shopScreen .jp-aug-offer.rarity-2{ --rc:#f0b13c; --bg1:#7a3c10; --bg2:#2a1406; }
#shopScreen .jp-aug-offer.rarity-3{
  --rc:#c58bff; --bg1:#3b2470; --bg2:#121030;
  border-color:transparent !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(197,139,255,0.3), transparent 55%) padding-box,
    linear-gradient(180deg, var(--bg1), var(--bg2)) padding-box,
    linear-gradient(160deg, #7fe7ff, #c58bff, #ff8ad8, #ffe17a) border-box;
  box-shadow:0 0 18px rgba(197,139,255,0.45), inset 0 0 24px rgba(0,0,0,0.4);
}
#shopScreen .jp-aug-offer:hover:not(:disabled){ border-color:var(--rc) !important; box-shadow:0 0 20px color-mix(in srgb, var(--rc) 55%, transparent); }
#shopScreen .jp-aug-offer.rarity-3:hover:not(:disabled){ border-color:transparent !important; }
#shopScreen .jp-aug-offer-desc{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px){ #shopScreen .jp-aug-offer{ height:142px; } }
/* 증강 줄의 강화 팩(보스 뒤)도 증강 칸과 같은 높이 */
#shopScreen #shopAugs .jp-pack{ height:172px !important; min-height:0 !important; padding-top:10px; padding-bottom:10px; }
#shopScreen #shopAugs .jp-pack .jp-pack-art{ max-height:112px; }
#shopScreen #shopAugs .jp-pack .jp-pack-art img{ max-height:112px; width:auto; }
@media (max-width:640px){ #shopScreen #shopAugs .jp-pack{ height:142px !important; } #shopScreen #shopAugs .jp-pack .jp-pack-art, #shopScreen #shopAugs .jp-pack .jp-pack-art img{ max-height:86px; } }
/* 큰 증강 카드(구매 확인·증강 팩·도감·내 증강) 아이콘도 상점 칸처럼: 어두운 원형 배경 + 금테 + 등급 색 링 */
.jp-aug-pick .jp-aug-pick-icon{
  background:radial-gradient(circle, #13283a, #050b12 70%);
  box-shadow:0 0 0 2px #785a28, 0 0 0 4px #050b12, 0 0 0 5px var(--rc, #9fb4c8), 0 0 20px color-mix(in srgb, var(--rc, #9fb4c8) 45%, transparent);
}
.jp-aug-pick .jp-aug-pick-icon .jp-aug-icon{ width:96px; height:96px; }
.jp-aug-pick.compact .jp-aug-pick-icon .jp-aug-icon{ width:72px; height:72px; }
@media (max-width:640px){
  .jp-aug-pick .jp-aug-pick-icon .jp-aug-icon{ width:72px; height:72px; }
  .jp-aug-pick.compact .jp-aug-pick-icon .jp-aug-icon{ width:52px; height:52px; }
}
/* [다음 라운드]: 위쪽 돈 옆, 롤 클라이언트 "플레이" 버튼 (금 테 + 청록 바탕 빛) */
#shopScreen .jp-next-round{
  padding:12px 26px; cursor:pointer; white-space:nowrap;
  font:900 17px var(--font); letter-spacing:.08em; color:#f0e6d2;
  background:linear-gradient(180deg, #0f3b45, #0a2a33 55%, #071c22);
  border:2px solid; border-image:linear-gradient(180deg, #f0e6d2, #c8aa6e 45%, #785a28) 1;
  box-shadow:0 0 0 1px rgba(1,10,19,0.9), 0 0 18px rgba(10,200,185,0.25), inset 0 0 14px rgba(10,200,185,0.25);
  transition:filter .15s, box-shadow .15s;
}
#shopScreen .jp-next-round:hover{ filter:brightness(1.15); box-shadow:0 0 0 1px rgba(1,10,19,0.9), 0 0 24px rgba(200,170,110,0.45), inset 0 0 18px rgba(10,200,185,0.4); }
#shopScreen .jp-side-btn.reroll{ line-height:1.35; }
/* 내 증강 줄·아이템 칸 테두리도 금색 톤으로 */
#shopScreen .jp-gear-shop, #shopScreen .jp-shop-itembox{ border-color:var(--lol-gold-dd); border-radius:2px; background:linear-gradient(180deg, rgba(15,28,43,0.7), rgba(6,14,23,0.8)); }
#shopScreen .jp-aug.empty{ border-color:rgba(120,90,40,0.35); border-radius:2px; }
/* 내 증강: 굵은 등급 테두리 대신 얇은 금테 + 위쪽에 등급 색 줄 */
#shopScreen .jp-shop-owned .jp-aug:not(.empty){
  border:1px solid var(--lol-gold-dd); border-top:2px solid var(--rc, var(--lol-gold)); border-radius:2px;
  background:linear-gradient(180deg, #13212f, #060e17); box-shadow:inset 0 0 18px rgba(0,0,0,0.5);
}
#shopScreen .jp-shop-owned .jp-aug.rarity-1{ --rc:#9fb4c8; }
#shopScreen .jp-shop-owned .jp-aug.rarity-2{ --rc:#e8b84a; }
#shopScreen .jp-shop-owned .jp-aug.rarity-3{ --rc:#c08bff; }
#shopScreen .jp-shop-owned .jp-aug:not(.empty):hover{ border-color:var(--lol-gold); border-top-color:var(--rc, var(--lol-gold)); box-shadow:0 0 14px rgba(200,170,110,0.3); }
/* 아이템 칸 버튼(아이템 제작 / 재료 바꾸기)도 롤 버튼으로 */
#shopScreen #gearBookBtn, #shopScreen .jp-comp-reroll{
  border-radius:2px; background:linear-gradient(180deg, #1e2328, #0f1419); color:#cdfafa;
  border:1px solid; border-image:linear-gradient(180deg, #0ac8b9, #005a82) 1; box-shadow:none;
}
#shopScreen .jp-comp-reroll b{ color:var(--lol-gold); }
#shopScreen .jp-comp-offer{ border-radius:2px; border:1px solid var(--lol-gold-d); background:linear-gradient(180deg, #13212f, #060e17); }
#shopScreen .jp-mini-label{ color:var(--lol-gold); letter-spacing:.08em; }
@media (max-width:640px){
  #shopScreen{ padding:14px 12px 18px; }
  #shopScreen .jp-aug-offer{ grid-template-columns:64px 1fr; padding:12px; gap:4px 10px; }
  #shopScreen .jp-aug-offer-icon{ width:64px; height:64px; }
  #shopScreen .jp-aug-offer-icon .jp-aug-icon{ width:50px; height:50px; }
  #shopScreen .jp-aug-offer-name{ font-size:15px; }
  #shopScreen .jp-aug-offer-desc{ font-size:12px; }
}

/* 시즌 2: 완성 아이템 3칸 -- PC 왼쪽 패널에서 작게 (아이콘 + 진행도만, 자세한 건 마우스 올리면 말풍선) */
@media (min-width:1001px){
  .jp-info-gears{ flex:0 0 auto; }
  .jp-info-gears .jp-gq{ flex-direction:column !important; text-align:center !important; gap:4px; padding:8px 4px !important; }
  .jp-info-gears .jp-gq .jp-gear{ width:44px !important; height:44px !important; font-size:22px; }
  .jp-info-gears .jp-gq-body{ align-items:center !important; }
  .jp-info-gears .jp-gq-title{ display:none; }
  .jp-info-gears .jp-gq-text{ font-size:11px; line-height:1.25; }
  .jp-info-gears .jp-gq-num{ font-size:14px; }
  .jp-info-gears .jp-gq-name{ font-size:12px; }
  .jp-info-gears .jp-gq-bar{ height:5px; margin-top:3px; }
}

/* 개발자 모드 (테스트 서버만): 오른쪽 아래 🛠 버튼 + 패널 */
.jp-dev{ position:fixed; right:14px; bottom:14px; z-index:1900; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:8px; }
.jp-dev-toggle{
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:20px;
  background:#ffd45a; border:2px solid #1a1200; box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
.jp-dev-panel{
  width:210px; padding:12px; display:flex; flex-direction:column; gap:8px;
  background:rgba(12,14,20,0.96); border:2px solid #ffd45a; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.6);
}
.jp-dev-panel.hidden{ display:none; }
.jp-dev-title{ font-size:13px; font-weight:900; color:#ffd45a; }
.jp-dev-panel button{
  padding:8px 6px; border-radius:8px; cursor:pointer; font:800 13px var(--font);
  color:#1a1200; background:#ffd45a; border:none;
}
.jp-dev-panel button:hover{ filter:brightness(1.1); }
.jp-dev-row{ display:flex; gap:6px; }
.jp-dev-row button{ flex:1; background:#ffe9a8; }
.jp-dev-msg{ min-height:16px; font-size:12px; color:#cfd6e4; }

/* 테스트 서버(content/joypoker_test/) 표시 -- 본 게임에선 안 나옴 */
.jp-test-badge{
  position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:2000; pointer-events:none;
  padding:4px 14px; border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap;
  color:#1a1200; background:#ffd45a; box-shadow:0 2px 10px rgba(0,0,0,0.5);
}
/* 팩·구매 창 위에 띄우는 보기 창 (내 증강 / 내 덱 / 내 족보) */
#augBookModal, #deckModal, #handsModal{ z-index:500; }
.jp-peek-btns{ display:flex; justify-content:center; gap:6px; margin:-4px 0 10px; flex-wrap:wrap; }
.jp-peek-btn{
  padding:5px 12px; border-radius:999px; cursor:pointer;
  font:800 12.5px var(--font); color:var(--text, #e6f7ff);
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  transition:background .12s, border-color .12s;
}
.jp-peek-btn:hover{ background:rgba(69,230,255,0.16); border-color:var(--cyan); }
.jp-myaugs .jp-rules-tabs{ display:none; }
.jp-myaugs-empty{ grid-column:1 / -1; text-align:center; color:var(--sub); padding:30px 0; }

/* 고르기 창에서 증강 고르기 (카이사 진화, 유체화) -- 증강 팩과 같은 큰 카드, 조금 작게 (2026-10-10) */
#pickModal.jp-pick-augs .jp-modal-box{ max-width:min(1120px, 100%); min-width:0; }  /* min-width:0 -- 플렉스 항목이 내용 폭만큼 화면 밖으로 넘치지 않게 */
.jp-pick-augs .jp-pick-options{ gap:18px; margin:26px 0 18px; padding-top:14px; align-items:stretch; }
.jp-pick-augs .jp-pick-option:hover{ transform:none; }  /* 카드 자체가 떠오름 */
.jp-pick-augs .jp-pick-option{ display:flex; }
.jp-aug-pick.compact{ width:196px; min-height:300px; padding:22px 14px 18px; gap:8px; }
.jp-aug-pick.compact .jp-aug-pick-icon{ width:96px; height:96px; }
.jp-aug-pick.compact .jp-aug-pick-icon .jp-aug-icon{ width:80px; height:80px; font-size:44px; }
.jp-aug-pick.compact .jp-aug-pick-name{ font-size:18px; }
.jp-aug-pick.compact .jp-aug-pick-desc{ font-size:14px; }
@media (max-width:640px){
  .jp-pick-augs .jp-pick-options{ gap:10px; }
  .jp-pick-augs .jp-pick-option{ width:calc(50% - 5px); min-width:0; }
  .jp-aug-pick.compact{ width:100%; min-width:0; min-height:230px; padding:18px 8px 12px; }
  .jp-aug-pick.compact .jp-aug-pick-icon{ width:70px; height:70px; }
  .jp-aug-pick.compact .jp-aug-pick-icon .jp-aug-icon{ width:58px; height:58px; font-size:32px; }
  .jp-aug-pick.compact .jp-aug-pick-name{ font-size:15px; }
  .jp-aug-pick.compact .jp-aug-pick-desc{ font-size:12px; }
}

/* 아펠리오스 무기 줄 (캐릭터 칸, 액티브 아래) -- script.js renderAphWeapons */
.jp-weapons{ width:100%; margin-top:8px; }
.jp-weapon-row{ display:flex; justify-content:center; align-items:center; gap:5px; }
.jp-weapon{
  position:relative; width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(0,0,0,0.45); border:1.5px solid rgba(255,255,255,0.15);
  opacity:.4; filter:grayscale(.7); transition:all .2s;
}
.jp-weapon img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:50%; }
.jp-weapon.next{ opacity:.75; filter:none; border-color:rgba(160,180,255,0.5); }
.jp-weapon.next::after{ content:'다음'; position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:1px; font-size:9px; font-weight:800; color:#9fb0ff; white-space:nowrap; }
.jp-weapon.now, .jp-weapon.lit{
  width:36px; height:36px; opacity:1; filter:none;
  border-color:#8fa6ff; box-shadow:0 0 10px rgba(130,150,255,0.75);
}
.jp-weapon-now{ margin-top:14px; font-size:11.5px; line-height:1.45; text-align:center; color:var(--sub); }
.jp-weapon-now b{ display:block; font-size:13px; color:#b9c6ff; }

/* 포기하기 / 저장하고 나가기 (2026-10-10) */
.jp-shop-head-right{ display:flex; align-items:center; gap:18px; }
.jp-shop-exit-btns{ display:flex; gap:8px; }
.jp-forfeit-btn{ color:#ff8a9a; border-color:rgba(255,120,140,0.45); }
.jp-forfeit-btn:hover{ background:rgba(255,90,110,0.12); }
.jp-right > #forfeitBtn{ align-self:center; margin-top:4px; opacity:.8; }
.jp-right > #forfeitBtn:hover{ opacity:1; }
@media (max-width:640px){
  .jp-shop-head-right{ flex-direction:column-reverse; align-items:flex-end; gap:6px; }
  .jp-shop-exit-btns .btn{ padding:6px 10px; font-size:12px; }
}

/* 상점 "내 증강" 말풍선은 아래로 (2026-10-10) -- 내 증강 줄이 화면 맨 위로 올라와서
   위로 뜨면 이름·지금 수치가 화면 밖으로 잘렸음. 게임 화면 증강 줄과 같은 방향. */
.jp-shop-owned .jp-aug-tip{ top:calc(100% + 8px); bottom:auto; }
.jp-shop-owned .jp-aug:hover{ z-index:35; }
/* 달빛 경계 중: 지금 무기에 ×2 뱃지 */
.jp-weapon.double{ box-shadow:0 0 14px rgba(255,214,90,0.85); border-color:#ffd45a; }
.jp-weapon.double::before{ content:'×2'; position:absolute; right:-8px; top:-6px; z-index:1; padding:0 4px; border-radius:6px; font-size:10px; font-weight:900; line-height:15px; color:#2b1d00; background:#ffd45a; }

/* 보스 봉인 카드 (손패) -- 점수를 못 주는 카드: 어둡게·흑백 + 사슬 무늬 + 가운데 자물쇠 "봉인" (2026-10-10) */
#handRow .jp-card.sealed > img, #handRow .jp-card.sealed > :not(.jp-seal-mark):not(.jp-card-rune){ filter:grayscale(1) brightness(.45); }
#handRow .jp-card.sealed{ box-shadow:0 0 0 2px #7a2a3a, 0 0 10px rgba(180,40,60,0.45); }
#handRow .jp-card.sealed::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(45deg, rgba(200,60,80,0.28) 0 6px, transparent 6px 14px),
             repeating-linear-gradient(-45deg, rgba(200,60,80,0.28) 0 6px, transparent 6px 14px);
}
.jp-seal-mark{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:5px 7px; border-radius:10px; background:rgba(20,6,10,0.85); border:1.5px solid #c8465c;
  font-size:20px; line-height:1;
}
.jp-seal-mark b{ font-size:11px; font-weight:900; color:#ff8a9a; letter-spacing:1px; }

/* 2026-10-10: 윈도우 '애니메이션 효과' 끔(prefers-reduced-motion)을 따르던 규칙들은 이제 설정 창 [애니메이션 줄이기](body.jp-calm)로만 꺼짐 */

/* 상점 완성 아이템 칸 크게 (2026-10-10) -- 아이콘 40 → 64, 카드도 넉넉하게 */
#shopGears .jp-gq{ min-height:84px; min-width:230px; padding:10px 14px 10px 10px; gap:12px; }
#shopGears .jp-gq .jp-gear{ width:64px; height:64px; font-size:32px; }
#shopGears .jp-gq-title{ font-size:13px; }
#shopGears .jp-gq-text{ font-size:12.5px; }
#shopGears .jp-gq-num{ font-size:16px; }
#shopGears .jp-gq-name{ font-size:14px; }
#shopMats .jp-gear, .jp-gear-mats .jp-gear-slots .jp-gear{ width:60px; height:60px; font-size:30px; }

/* 한글 줄바꿈은 띄어쓰기에서만 (2026-10-10 가독성) -- 기본값은 글자 단위라 "화염/포", "득점하/면"처럼 단어 중간에서 끊겼음.
   너무 긴 단어만 어쩔 수 없을 때 끊음(overflow-wrap). 이 게임 페이지 전체. */
body{ word-break:keep-all; overflow-wrap:break-word; }
.jp-ability > span:last-child, #heroDetailPassive, #heroDetailActive{ line-height:1.6; }
/* 게임 화면 캐릭터 설명(초상화 누르면): 칸이 좁아서 [패시브]/[액티브] 표시를 윗줄에, 설명은 아래 전체 폭으로 */
.jp-char-pop .jp-ability{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.jp-char-pop .jp-ability > span:last-child{ display:block; font-size:12.5px; line-height:1.55; }

/* 캐릭터 선택 상세 창 능력 칸 (2026-10-10): 왼쪽 표시 칸 고정 폭 + 오른쪽 설명 -> 여러 줄이어도 시작선 맞음 */
.jp-abil-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; text-align:left; }
.jp-abil-row{
  display:grid; grid-template-columns:58px minmax(0, 1fr); gap:12px; align-items:start;
  padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
}
.jp-abil-left{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.jp-abil-left .jp-ability-kind{ margin:0; }
.jp-abil-left .jp-skill-ico{ width:44px; height:44px; border-radius:10px; }
.jp-abil-text{ font-size:14px; line-height:1.65; color:var(--text); }
.jp-abil-row .jp-active-cd{ display:flex; margin-top:6px; }

/* ---------- 규칙 설명서 (2026-10-10 개편: 페이지 넘기기, 크게) ---------- */
#rulesModal .jp-rules-box{ max-width:min(760px, 100%); width:100%; text-align:left; display:flex; flex-direction:column; max-height:calc(100vh - 40px); padding:22px 24px 18px; }
.jp-rules-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.jp-rules-head .jp-modal-title{ font-size:26px; }
.jp-rules-x{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,0.05); color:var(--text); font-size:16px; cursor:pointer; }
.jp-rules-tabs{ display:flex; gap:6px; margin:14px 0 12px; flex-wrap:wrap; }
.jp-rules-tab{ flex:1; min-width:70px; padding:9px 6px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,0.04); color:var(--sub); font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.jp-rules-tab.on{ background:var(--cyan); border-color:var(--cyan); color:#061018; }
#rulesModal .jp-rules-body{ flex:1; min-height:0; overflow-y:auto; padding-right:4px; font-size:15px; line-height:1.7; color:var(--text); }
.jp-rules-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.jp-rules-nav .btn{ min-width:110px; margin:0; }
.jp-rules-pageno{ font-weight:800; color:var(--sub); font-size:14px; }

.jp-rules-lead{ padding:12px 14px; border-radius:12px; background:rgba(255,255,255,0.05); font-size:15px; line-height:1.7; }
.jp-rules-lead b{ font-size:17px; }
.jp-rules-lead .c{ color:#5ec8ff; } .jp-rules-lead .m{ color:#ff5d7a; }
.jp-rules-lead small, .jp-rules-sec-body small{ color:var(--sub); font-size:13px; }
.jp-rules-hands{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.jp-rules-hand{ display:grid; grid-template-columns:130px minmax(0, 1fr) 110px; align-items:center; gap:12px; padding:8px 12px; border-radius:12px; background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.06); }
.jp-rules-hand-name{ font-weight:800; font-size:15px; }
.jp-rules-cards{ display:flex; gap:4px; flex-wrap:nowrap; }
.jp-rules-cards .jp-card{ width:38px; height:auto; aspect-ratio:691 / 1056; flex:0 0 auto; cursor:default; --pip:9px; box-shadow:0 2px 6px rgba(0,0,0,0.45); }
.jp-rules-cards .jp-card img{ width:100%; height:100%; }
.jp-rules-hand-val{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.jp-rules-hand-val span{ min-width:42px; padding:4px 8px; border-radius:8px; text-align:center; font-family:'Orbitron',var(--font); font-weight:900; font-size:15px; color:#fff; }
.jp-rules-hand-val .jp-chips{ background:#2f6fd6; } .jp-rules-hand-val .jp-mult{ background:#d8365a; }
.jp-rules-hand-val i{ font-style:normal; color:#ff5d7a; font-weight:900; }
.jp-rules-note{ margin-top:12px; font-size:13.5px; color:var(--sub); }

.jp-rules-sec{ display:grid; grid-template-columns:44px minmax(0, 1fr); gap:12px; padding:12px 14px; margin-bottom:8px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); }
.jp-rules-sec-icon{ font-size:28px; line-height:1; text-align:center; padding-top:2px; }
.jp-rules-sec-title{ font-size:16.5px; font-weight:800; margin-bottom:4px; color:#fff; }
.jp-rules-sec-body{ font-size:14.5px; line-height:1.7; color:var(--text); }
.jp-rules-stages{ display:flex; align-items:center; gap:8px; margin:6px 0 8px; flex-wrap:wrap; }
.jp-rules-stages i{ font-style:normal; color:var(--sub); }
.jp-rules-stage{ display:flex; flex-direction:column; align-items:center; padding:6px 14px; border-radius:10px; background:rgba(94,200,255,0.12); border:1px solid rgba(94,200,255,0.35); line-height:1.35; }
.jp-rules-stage.boss{ background:rgba(216,54,90,0.15); border-color:rgba(216,54,90,0.5); }
.jp-rules-stage span{ font-size:12.5px; font-weight:800; } .jp-rules-stage small{ font-size:12px; color:var(--sub); }
.jp-rules-bosses, .jp-rules-items{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; margin-top:8px; }
.jp-rules-bosses > div, .jp-rules-items > div{ padding:7px 10px; border-radius:10px; background:rgba(0,0,0,0.28); font-size:13.5px; line-height:1.5; }
.jp-rules-bosses b, .jp-rules-items b{ display:block; color:#fff; font-size:14px; }
.jp-rules-bosses span, .jp-rules-items span{ color:var(--sub); }
.jp-rules-items > div{ display:grid; grid-template-columns:36px minmax(0, 1fr); column-gap:8px; align-items:center; }
.jp-rules-items img{ grid-row:span 2; width:36px; height:36px; border-radius:8px; object-fit:cover; }
.jp-rules-example{ padding:12px 14px; border-radius:12px; background:rgba(255,212,90,0.08); border:1px solid rgba(255,212,90,0.3); font-size:14.5px; line-height:1.8; }
.jp-rules-rar{ padding:1px 7px; border-radius:6px; font-weight:800; font-size:13px; white-space:nowrap; }
.jp-rules-rar.r1{ background:rgba(159,180,200,0.22); color:#cfdbe6; } .jp-rules-rar.r2{ background:rgba(240,177,60,0.22); color:#ffcf6a; } .jp-rules-rar.r3{ background:rgba(197,139,255,0.25); color:#e0c4ff; }
@media (max-width:640px){
  #rulesModal .jp-rules-box{ padding:16px 14px 14px; }
  .jp-rules-hand{ grid-template-columns:1fr auto; }
  .jp-rules-hand .jp-rules-cards{ grid-column:1 / -1; grid-row:2; }
  .jp-rules-cards .jp-card{ width:32px; }
  .jp-rules-bosses, .jp-rules-items{ grid-template-columns:1fr; }
  .jp-rules-tab{ min-width:56px; font-size:13px; }
}
/* 페이지 넘길 때 창 크기가 바뀌지 않게 높이 고정 + 족보 카드 조금 크게 */
#rulesModal .jp-rules-box{ height:min(880px, calc(100vh - 40px)); }
.jp-rules-cards .jp-card{ width:46px; }
.jp-rules-hand{ grid-template-columns:130px minmax(0, 1fr) 120px; }
@media (max-width:640px){ .jp-rules-cards .jp-card{ width:34px; } }

/* 고르기 창(유체화·카이사·제어 와드 등)은 팩 창 위에 떠야 함 -- 같은 z-index(400)라 룬 팩 창 뒤에 가려졌음 (2026-10-10) */
#pickModal{ z-index:450; }

/* 봉인 표시 연하게 (2026-10-10: 너무 진해서 카드가 안 보인다는 의견) -- 카드는 살짝만 흐리게, 무늬 옅게, 자물쇠는 위쪽 작은 뱃지 */
#handRow .jp-card.sealed > img, #handRow .jp-card.sealed > :not(.jp-seal-mark):not(.jp-card-rune){ filter:grayscale(.55) brightness(.85); }
#handRow .jp-card.sealed::after{
  background:repeating-linear-gradient(45deg, rgba(200,60,80,0.12) 0 4px, transparent 4px 14px);
}
.jp-seal-mark{
  top:6%; transform:translateX(-50%);
  flex-direction:row; gap:3px; padding:2px 6px; border-radius:999px; border-width:1px;
  font-size:11px; background:rgba(40,8,16,0.88);
}
.jp-seal-mark b{ font-size:10px; letter-spacing:0; }
/* 지금 만들 수 있는 조합식: 주황 테두리 + 옅은 배경 + "제작 가능" 표시 (2026-10-10) */
.jp-recipe.hold{ outline:1.5px solid #ff9a1f; background:rgba(255,154,31,0.14); }
.jp-recipe.hold b::after{ content:' ✓'; color:#ffb34a; }

/* 챌린지 모드 버튼 (시작 화면, 새 게임 아래) */
.jp-challenge-btn{
  display:block; margin:14px auto 4px; min-width:220px; padding:12px 22px; border-radius:14px; border:0;
  font-weight:900; font-size:16px; color:#2b1600; cursor:pointer;
  background:linear-gradient(135deg, #ffd45a, #ff9a1f); box-shadow:0 0 18px rgba(255,170,40,0.45);
}
.jp-challenge-btn:hover:not(:disabled){ filter:brightness(1.08); }
.jp-challenge-btn:disabled{ background:#3a3f52; color:#aab3c5; box-shadow:none; cursor:not-allowed; }
.jp-challenge-note{ text-align:center; font-size:12.5px; color:var(--sub); margin-bottom:10px; }

/* 렉 줄이기 (2026-10-10): 흐림(backdrop-filter)은 아래 별 배경이 움직일 때마다 다시 계산돼서 무거움 -> 진한 반투명으로 */
nav{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(7,10,20,0.94); }
.jp-modal{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(2,4,10,0.84); }
/* 애니메이션 줄이기 켜면 계속 도는 반짝임도 끔 */
body.jp-calm .jp-cash-btn.show, body.jp-calm .jp-gearbook-cell.ready{ animation:none; }

/* 시즌 2 행성 팩: 룬 카드 틀 그대로 (행성 색), 그림은 세로로 긴 행성 카드라 높게 */
.jp-rune-pick.jp-planet-pick{ --tree:#7fc8ff; }
.jp-planet-pick .jp-planet-pick-art{ width:100%; height:128px; }
.jp-planet-pick .jp-planet-art{ height:100%; display:grid; place-items:center; background:none; border:0; box-shadow:none; }
.jp-planet-pick .jp-planet-art img{ height:100%; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(127,200,255,0.55)); image-rendering:pixelated; }
.jp-planet-pick-lv{ color:#ffd45a; font-size:15px; }
.jp-planet-pick .jp-rune-pick-cards .c{ color:#4aa3ff; font-weight:800; }
.jp-planet-pick .jp-rune-pick-cards .m{ color:#ff5a6e; font-weight:800; }
/* 보기 5장(룬·주문·점보 행성)도 한 줄에: PC에서는 카드 폭을 줄여서 */
@media (min-width:1001px){ #packModal.jp-pack-big .jp-planet-options{ flex-wrap:nowrap; gap:16px; } #packModal .jp-rune-pick{ width:196px; flex-shrink:1; } }
/* 상점 팩 말풍선: 마우스 올리면 (내 증강 말풍선과 같은 .jp-aug-tip 모양) */
@media (hover:hover){ #shopAugs .jp-pack:hover .jp-pack-tip, #shopPack .jp-pack:hover .jp-pack-tip{ display:block; } }
#shopAugs .jp-pack, #shopPack .jp-pack{ position:relative; overflow:visible; }
#shopAugs .jp-pack:hover, #shopPack .jp-pack:hover{ z-index:30; }
.jp-pack-tip .jp-aug-tip-head span{ color:#c8aa6e; }
#shopAugs .jp-pack .jp-pack-tip .jp-aug-name, #shopPack .jp-pack .jp-pack-tip .jp-aug-desc{ display:block; }
/* 시즌 2 상점 "다음 라운드" 패널 (롤 클라이언트 톤): [지역·스테이지 + 발판] [다음 라운드 목표] [보스 카드] */
.jp-next-panel{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.3fr); gap:12px; margin:4px 0 16px;
}
.jp-next-panel > div{
  border:1px solid #463714; border-radius:2px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(19,33,47,0.9), rgba(6,14,23,0.95)); box-shadow:inset 0 0 18px rgba(0,0,0,0.45);
}
.jp-np-region{ font-size:17px; font-weight:900; color:var(--region, #c8aa6e); letter-spacing:.04em; }
.jp-np-region small{ color:#a09b8c; font-size:13px; font-weight:700; letter-spacing:0; }
.jp-np-path{ margin-top:6px; justify-content:flex-start; }
.jp-np-goal{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.jp-np-goal small{ font-size:11.5px; color:#a09b8c; letter-spacing:.08em; }
.jp-np-round{ font-size:20px; font-weight:900; color:#f0e6d2; margin-bottom:4px; }
.jp-np-round span{ font-size:13px; padding:1px 8px; margin-left:4px; border-radius:2px; background:#1e2328; border:1px solid #785a28; color:#c8aa6e; vertical-align:3px; }
.jp-np-goal.kind-boss .jp-np-round span{ border-color:#d8364a; color:#ff8a98; }
.jp-np-target{ font-family:'Orbitron',var(--font); font-size:28px; font-weight:900; color:#f0e6d2; text-shadow:0 0 14px rgba(200,170,110,0.35); line-height:1.15; }
.jp-np-reward{ margin-top:4px; font-size:13px; font-weight:800; color:#c8aa6e; }
/* 보스 카드: 평소엔 어둡게(미리 보기), 다음이 보스면 빨간 테 + 빛 */
.jp-np-boss{ display:flex; flex-direction:column; justify-content:center; gap:4px; opacity:.78; }
.jp-np-boss-badge{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#d8a0a8; letter-spacing:.04em; }
.jp-np-boss-badge svg{ width:18px; height:18px; flex:none; }
.jp-np-boss-name{ font-size:18px; font-weight:900; color:#f0e6d2; }
.jp-np-boss-desc{ font-size:13.5px; color:#cfc6b3; line-height:1.45; }
.jp-next-panel > .jp-np-boss.next{
  opacity:1; border-color:#d8364a;
  background:radial-gradient(circle at 15% 30%, rgba(216,54,74,0.28), transparent 60%), linear-gradient(180deg, #2a0f16, #12070b);
  box-shadow:0 0 18px rgba(216,54,74,0.35), inset 0 0 18px rgba(0,0,0,0.45);
}
.jp-np-boss.next .jp-np-boss-badge{ color:#ff8a98; }
.jp-np-boss.next .jp-np-boss-desc{ color:#ffd0d6; }
.jp-np-boss.off .jp-np-boss-desc{ color:#4fd18b; }
.jp-next-panel > .jp-np-booked{ grid-column:1 / -1; padding:6px 10px; display:flex; flex-wrap:wrap; gap:6px; background:none; border:0; box-shadow:none; }
.jp-np-booked span{ padding:3px 10px; font-size:12.5px; font-weight:800; color:#cdfafa; border:1px solid #0ac8b9; background:rgba(10,200,185,0.08); border-radius:2px; }
@media (max-width:760px){
  .jp-next-panel{ grid-template-columns:1fr 1fr; }
  .jp-next-panel > .jp-np-boss{ grid-column:1 / -1; }
  .jp-np-target{ font-size:22px; }
}
/* ---------- 시즌 2 증강 에디션 (포일 / 홀로그래픽 / 폴리크롬 / 네거티브) ----------
   .ed.ed-<key>를 증강 칸·상점 증강 칸·큰 증강 카드에 붙임. 아이콘 위에 반짝이는 막(::after) + 배지 */
.jp-ed-badge{
  display:inline-block; padding:1px 7px; margin-right:3px; border-radius:3px;
  font-size:11px; font-weight:900; letter-spacing:.02em; color:#081018; vertical-align:1px;
}
.jp-ed-badge.ed-foil{ background:linear-gradient(120deg, #e8f2ff, #9fc6ff 45%, #f4f9ff); }
.jp-ed-badge.ed-holo{ background:linear-gradient(120deg, #ff9ad5, #ffd36b, #8fffd0, #8fb8ff); }
.jp-ed-badge.ed-poly{ background:linear-gradient(120deg, #ff6b8b, #ffd36b, #6bffb3, #6bc6ff, #c06bff); }
.jp-ed-badge.ed-negative{ background:#1a1030; color:#d9c8ff; border:1px solid #8a6bff; }
.jp-ed-line{ margin-top:6px; font-size:12.5px; color:#e6ecf5; }
/* 아이콘 위 반짝임 */
.ed .jp-aug-icon, .ed .jp-aug-pick-icon, .ed .jp-aug-offer-icon{ position:relative; }
.ed .jp-aug-pick-icon::after, .ed .jp-aug-offer-icon::after, .jp-aug.ed .jp-aug-icon::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  mix-blend-mode:screen; background-size:200% 100%;
  /* --ed-t: 칸이 새로 그려져도 같은 박자로 이어지게 script.js가 음수 지연을 넣어 줌 (끊겼다 처음부터 도는 것 방지) */
  animation:jpEdShine 3.2s linear infinite; animation-delay:var(--ed-t, 0s);
}
.jp-aug.ed .jp-aug-icon::after{ border-radius:inherit; }
/* 무늬를 반 폭마다 똑같이 반복 + 정확히 반 폭만큼 이동 → 한 바퀴 끝과 시작이 이어져서 툭 튀지 않음 */
.ed-foil .jp-aug-pick-icon::after, .ed-foil .jp-aug-offer-icon::after, .jp-aug.ed-foil .jp-aug-icon::after{
  background-image:linear-gradient(90deg,
    transparent 10%, rgba(200,225,255,0.55) 20%, rgba(255,255,255,0.85) 25%, rgba(160,200,255,0.5) 30%, transparent 40%,
    transparent 60%, rgba(200,225,255,0.55) 70%, rgba(255,255,255,0.85) 75%, rgba(160,200,255,0.5) 80%, transparent 90%);
}
.ed-holo .jp-aug-pick-icon::after, .ed-holo .jp-aug-offer-icon::after, .jp-aug.ed-holo .jp-aug-icon::after{
  background-image:linear-gradient(90deg,
    rgba(255,120,200,0.35) 0%, rgba(255,220,120,0.35) 12.5%, rgba(120,255,210,0.35) 25%, rgba(130,170,255,0.35) 37.5%,
    rgba(255,120,200,0.35) 50%, rgba(255,220,120,0.35) 62.5%, rgba(120,255,210,0.35) 75%, rgba(130,170,255,0.35) 87.5%, rgba(255,120,200,0.35) 100%);
}
.ed-poly .jp-aug-pick-icon::after, .ed-poly .jp-aug-offer-icon::after, .jp-aug.ed-poly .jp-aug-icon::after{
  background-image:linear-gradient(90deg,
    rgba(255,90,130,0.5) 0%, rgba(255,210,90,0.5) 10%, rgba(90,255,170,0.5) 20%, rgba(90,190,255,0.5) 30%, rgba(190,90,255,0.5) 40%,
    rgba(255,90,130,0.5) 50%, rgba(255,210,90,0.5) 60%, rgba(90,255,170,0.5) 70%, rgba(90,190,255,0.5) 80%, rgba(190,90,255,0.5) 90%, rgba(255,90,130,0.5) 100%);
  mix-blend-mode:color;
}
@keyframes jpEdShine{ from{ background-position:0% 0; } to{ background-position:-100% 0; } }/* 네거티브: 아이콘 색 반전 + 보라 빛 */
.ed-negative .jp-aug-pick-icon .jp-aug-icon, .ed-negative .jp-aug-offer-icon .jp-aug-icon, .jp-aug.ed-negative .jp-aug-icon{ filter:invert(1) hue-rotate(180deg) drop-shadow(0 0 10px #8a6bff); }
body.jp-calm .ed .jp-aug-pick-icon::after, body.jp-calm .ed .jp-aug-offer-icon::after, body.jp-calm .jp-aug.ed .jp-aug-icon::after{ animation:none; }
/* 내 증강·게임 증강 줄 칸: 에디션 이름 작은 띠 */
.jp-aug.ed::before{
  position:absolute; left:4px; bottom:4px; z-index:3; padding:0 5px; border-radius:3px;
  font-size:10px; font-weight:900; line-height:15px; color:#081018; pointer-events:none;
}
.jp-aug.ed-foil::before{ content:'진주'; background:linear-gradient(120deg, #e8f2ff, #9fc6ff); }
.jp-aug.ed-holo::before{ content:'사파이어'; background:linear-gradient(120deg, #ff9ad5, #ffd36b, #8fffd0); }
.jp-aug.ed-poly::before{ content:'루비'; background:linear-gradient(120deg, #ff6b8b, #ffd36b, #6bffb3, #6bc6ff); }
.jp-aug.ed-negative::before{ content:'흑요석'; background:#1a1030; color:#d9c8ff; border:1px solid #8a6bff; }
/* 구매 확인 창: 예전 큰 아이콘 규칙(110px)이 원(96px)보다 커서 아이콘이 왼쪽 위로 밀려 보이던 것 */
.jp-buy-item .jp-aug-pick .jp-aug-pick-icon .jp-aug-icon{ width:72px !important; height:72px !important; font-size:40px !important; }
@media (max-width:640px){ .jp-buy-item .jp-aug-pick .jp-aug-pick-icon .jp-aug-icon{ width:56px !important; height:56px !important; } }
/* ---------- 시즌 2: 트럼프 카드 에디션 (포일 / 홀로 / 폴리크롬) -- 카드 전체에 반짝이는 막 ----------
   무늬는 반 폭마다 반복 + 정확히 반 폭 이동(끊김 없음), --ed-t로 다시 그려도 박자 이어짐 (증강 에디션과 같은 방식) */
.jp-card.card-ed{ position:relative; }
.jp-card.card-ed::after{
  content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  background-size:200% 100%; mix-blend-mode:screen;
  animation:jpEdShine 3.2s linear infinite; animation-delay:var(--ed-t, 0s);
}
.jp-card.ced-foil::after{
  background-image:linear-gradient(90deg,
    transparent 8%, rgba(190,220,255,0.45) 18%, rgba(255,255,255,0.75) 25%, rgba(150,195,255,0.4) 32%, transparent 42%,
    transparent 58%, rgba(190,220,255,0.45) 68%, rgba(255,255,255,0.75) 75%, rgba(150,195,255,0.4) 82%, transparent 92%);
}
.jp-card.ced-holo::after{
  background-image:linear-gradient(90deg,
    rgba(255,110,190,0.28) 0%, rgba(255,215,110,0.28) 12.5%, rgba(110,255,205,0.28) 25%, rgba(120,165,255,0.28) 37.5%,
    rgba(255,110,190,0.28) 50%, rgba(255,215,110,0.28) 62.5%, rgba(110,255,205,0.28) 75%, rgba(120,165,255,0.28) 87.5%, rgba(255,110,190,0.28) 100%);
}
.jp-card.ced-poly::after{
  background-image:linear-gradient(90deg,
    rgba(255,90,130,0.45) 0%, rgba(255,210,90,0.45) 10%, rgba(90,255,170,0.45) 20%, rgba(90,190,255,0.45) 30%, rgba(190,90,255,0.45) 40%,
    rgba(255,90,130,0.45) 50%, rgba(255,210,90,0.45) 60%, rgba(90,255,170,0.45) 70%, rgba(90,190,255,0.45) 80%, rgba(190,90,255,0.45) 90%, rgba(255,90,130,0.45) 100%);
  mix-blend-mode:color;
}
/* 폴리크롬은 카드 테두리도 무지개 빛 */
.jp-card.ced-poly{ box-shadow:0 0 10px rgba(190,120,255,0.55), 0 0 2px rgba(255,255,255,0.6); }
.jp-card.ced-holo{ box-shadow:0 0 8px rgba(255,150,220,0.45); }
.jp-card.ced-foil{ box-shadow:0 0 8px rgba(170,210,255,0.5); }
body.jp-calm .jp-card.card-ed::after{ animation:none; }

/* 시즌 2: 룬 = 인장 → 카드 테두리(룬 계열 색)는 없앰. 테두리는 나중에 카드 강화 자리 */
.jp-card.runed:not(.gold){ outline:none; box-shadow:none; }
.jp-card.runed.card-ed.ced-poly{ box-shadow:0 0 10px rgba(190,120,255,0.55), 0 0 2px rgba(255,255,255,0.6); }
.jp-card.runed.card-ed.ced-holo{ box-shadow:0 0 8px rgba(255,150,220,0.45); }
.jp-card.runed.card-ed.ced-foil{ box-shadow:0 0 8px rgba(170,210,255,0.5); }

/* 카드 팩 고르기: 큰 트럼프 카드 + 아래 인장·에디션 */
.jp-cardpack-pick{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 8px 12px; width:150px;
  background:none; border:0; color:inherit; font:inherit; cursor:pointer; transition:transform .15s;
}
.jp-cardpack-pick .jp-card{ width:120px !important; height:auto; flex:none; pointer-events:none; }
.jp-cardpack-pick:hover:not(:disabled){ transform:translateY(-8px); }
.jp-cardpack-pick:hover:not(:disabled) .jp-card{ box-shadow:0 0 0 3px #ffd45a, 0 12px 26px rgba(0,0,0,0.55); }
.jp-cardpack-pick.used{ opacity:.45; cursor:default; }
.jp-cp-info{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-height:20px; }
.jp-cp-tag.rune{ padding:1px 7px; border-radius:3px; font-size:11px; font-weight:900; color:#081018; background:var(--tree, #e6b85c); }
.jp-cp-plain{ font-size:11.5px; color:var(--sub); }
.jp-cp-ed{ font-size:12px; color:#e6ecf5; text-align:center; }
@media (max-width:640px){ .jp-cardpack-pick{ width:calc(33% - 8px); padding:6px 2px; } .jp-cardpack-pick .jp-card{ width:88px !important; } }
/* ---------- 시즌 2 인장 (황금·붉은·파란·보라): 카드 오른쪽 위 동그란 아이콘 (룬 그림 + 인장 색 테) ---------- */
.jp-card-seal{
  position:absolute; right:2px; top:2px; z-index:3; width:24px; height:24px; padding:2px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--seal) 55%, #0a0e1c), #0a0e1c 85%);
  box-shadow:0 0 0 2px var(--seal, #ffd45a), 0 0 8px var(--seal, #ffd45a);
  pointer-events:auto;
}
.jp-card-seal img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; filter:brightness(1.15); }
.jp-deckview-row .jp-card-seal, .jp-pick-option .jp-card-seal{ width:18px; height:18px; }
.jp-cardpack-pick .jp-card-seal{ width:30px; height:30px; }
/* 상점 위쪽 [내 덱][내 족보]: 알약 모양(.jp-peek-btn) 대신 옆 버튼들과 같은 롤 버튼 모양 */
#shopScreen .jp-shop-exit-btns .jp-peek-btn{ border-radius:0; padding:8px 14px; font-size:13px; }

/* 증강 교체 (칸이 꽉 찼을 때): 고르기 카드 아래 판매가, 구매 창 안내 */
.jp-replace-sell{ margin-top:8px; font-size:13px; font-weight:800; color:#ffd45a; }
.jp-replace-note{ margin-top:6px; font-size:14px; color:#ff9a9a; font-weight:700; }

/* 증강 고르기 창(교체·카이사·유체화): PC에서는 6~7장도 한 줄에 (카드 폭을 나눠 가짐) */
@media (min-width:1001px){
  #pickModal.jp-pick-augs .jp-modal-box{ max-width:min(1320px, 100%); }
  #pickModal.jp-pick-augs .jp-pick-options{ flex-wrap:nowrap; gap:12px; justify-content:center; }
  #pickModal.jp-pick-augs .jp-pick-option{ flex:1 1 0; min-width:0; max-width:196px; }
  #pickModal.jp-pick-augs .jp-aug-pick.compact{ width:100%; min-width:0; padding:22px 8px 16px; }
  #pickModal.jp-pick-augs .jp-aug-pick.compact .jp-aug-pick-desc{ font-size:13px; }
}
/* 덱 보기 창: 카드가 겹쳐 왼쪽만 보여서 오른쪽 위 인장이 가려짐 → 왼쪽 가운데로 (위 = 숫자·문양, 아래 = 룬 사이) */
.jp-deckview-row .jp-card-seal{ right:auto; left:1px; top:50%; transform:translateY(-50%); width:18px; height:18px; }
/* 보라 인장 룬 카드 창: 장수가 많을 수 있어 여러 줄 */
#packModal.jp-pack-free .jp-planet-options{ flex-wrap:wrap !important; justify-content:center; max-height:52vh; overflow-y:auto; padding-bottom:6px; }

/* 연타할 때 글자가 파랗게 선택되거나 그림이 끌려 나오던 것 방지 (게임 화면·상점·창 전체, 입력 칸은 제외) */
.jp-wrap, .jp-modal, .jp-dev, .jp-sound-panel, .jp-region-intro{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.jp-wrap input, .jp-wrap textarea, .jp-modal input, .jp-modal textarea{ -webkit-user-select:text; user-select:text; }
.jp-wrap img, .jp-modal img, .jp-region-intro img{ -webkit-user-drag:none; user-drag:none; }
/* 배지(인장 이름·에디션) 글씨가 칸 가운데보다 위로 붙던 것: 줄 높이 대신 가운데 정렬 */
.jp-cp-tag.rune, .jp-ed-badge{ display:inline-flex; align-items:center; justify-content:center; height:18px; padding:0 8px; line-height:1; box-sizing:border-box; vertical-align:middle; }
.jp-cp-tag.rune{ padding-top:1px; }
.jp-ed-badge{ padding-top:1px; }
/* ---------- 덱 보기 개편 (시즌 2: 카드 팩으로 덱이 늘어남) ----------
   줄마다 장수(--n)에 맞춰 겹치는 폭을 계산해서 항상 한 줄에 다 들어감 -- 가로 스크롤 없음.
   카드 폭은 고정(--w), 둘째 장부터 margin-left = (줄 폭 - 카드 폭) / (n - 1) - 카드 폭 (13장 이하일 땐 예전처럼 -18px까지만) */
.jp-deckview-box{ max-width:1080px; }
.jp-deckview-cards{ overflow:hidden; gap:10px; }
.jp-deckview-row{ --w:clamp(46px, 7.2vw, 84px); position:relative; align-items:flex-end; padding-left:34px; }
.jp-deckview-row .jp-card, .jp-deckview-row .jp-card.art{ width:var(--w); flex:none; }
.jp-deckview-row .jp-card + .jp-card{ margin-left:min(-18px, calc((100% - var(--w)) / (var(--n) - 1) - var(--w))); }
/* 줄 왼쪽: 문양 + 그 문양 장수 */
.jp-deckview-rowcount{
  position:absolute; left:0; top:50%; transform:translateY(-50%); width:28px; text-align:center;
  font-size:17px; line-height:1.1; color:#cfd6e4;
}
.jp-deckview-rowcount.red{ color:#ff8a9c; }
.jp-deckview-rowcount b{ display:block; font-family:'Orbitron',var(--font); font-size:13px; color:#e6ecf5; }
/* 올린 카드는 크게 떠올라서 겹쳐 가려진 부분까지 보임 */
.jp-deckview-row .jp-card{ transition:transform .12s, box-shadow .12s; }
.jp-deckview-row .jp-card:hover{ transform:translateY(-10px) scale(1.18); z-index:5; box-shadow:0 10px 22px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.35); }
@media (max-width:640px){
  .jp-deckview-row{ --w:clamp(40px, 13vw, 60px); padding-left:26px; }
  .jp-deckview-row .jp-card + .jp-card{ margin-left:min(-12px, calc((100% - var(--w)) / (var(--n) - 1) - var(--w))); }
  .jp-deckview-rowcount{ width:22px; font-size:14px; }
}
/* 덱 보기: 각인·룬 아이콘이 카드와 따로 맨 위 층에 그려져, 마우스로 띄운 카드 위로 옆 카드의 아이콘이 튀어나오던 것
   → 카드마다 자기 층을 갖게 해서(isolation) 아이콘이 자기 카드에만 붙음. 띄운 카드가 옆 카드와 그 아이콘을 전부 덮음 */
.jp-deckview-row .jp-card{ position:relative; z-index:0; isolation:isolate; }
.jp-deckview-row .jp-card:hover{ z-index:10; }
/* ---------- 시즌 2 카드 강화: 테두리 색(--enh) + 아래 가운데 이름표 ---------- */
.jp-card.enh{ outline:3px solid var(--enh); outline-offset:-2px; box-shadow:0 0 10px color-mix(in srgb, var(--enh) 65%, transparent); }
.jp-card-enh{
  position:absolute; left:50%; bottom:3px; transform:translateX(-50%); z-index:3; white-space:nowrap;
  display:inline-flex; align-items:center; height:15px; padding:1px 6px 0; border-radius:3px; line-height:1;
  font-size:10px; font-weight:900; color:#081018; background:var(--enh); box-shadow:0 1px 3px rgba(0,0,0,0.5); pointer-events:auto;
}
.jp-card.enh .jp-card-bonus{ bottom:21px; }
/* 유리: 살짝 비치는 느낌 / 강철: 금속 빛 / 황금: 금빛 / 행운·와일드: 색 빛만 */
.jp-card.enh-glass > img, .jp-card.enh-glass > .jp-card-face{ opacity:.82; }
.jp-card.enh-glass{ background:linear-gradient(135deg, rgba(190,240,255,0.9), rgba(255,255,255,0.75)); }
.jp-card.enh-steel > img{ filter:grayscale(.55) contrast(1.1) brightness(1.02); }
.jp-card.enh-gold > img{ filter:sepia(.55) saturate(1.5) brightness(1.03); }
/* 덱 보기처럼 겹치는 곳에서는 이름표를 왼쪽 아래로 (가운데는 다음 카드에 가림) */
.jp-deckview-row .jp-card-enh{ left:1px; transform:none; bottom:2px; font-size:8.5px; height:13px; padding:1px 3px 0; }
.jp-pick-option .jp-card-enh{ font-size:9px; }
/* 그림 없는 룬 카드: 이름 첫 글자 */
.jp-rune-noimg{ display:grid; place-items:center; width:70px; height:70px; border-radius:50%; font-size:34px; color:var(--tree, #e6b85c); border:2px solid var(--tree, #e6b85c); background:rgba(0,0,0,0.35); }
.jp-rune-pick-icon img{ border-radius:50%; }
/* (무늬는 꼭 90deg: 비스듬하면 반 폭 이동이 무늬 한 주기와 안 맞아 한 바퀴마다 툭 끊김) */
/* ---------- 카드 에디션 티 나게 (2026-10-11): 흰 카드 바탕에서 무지개가 안 보이던 것 ----------
   color/screen 블렌드는 흰 바탕에 색이 거의 안 올라감 → multiply(흰 바탕에 색이 그대로 입혀짐) + 사선 빛줄기(::before)를 따로 */
.jp-card.ced-poly::after{
  mix-blend-mode:multiply;
  background-image:linear-gradient(90deg,
    rgba(255,70,120,0.62) 0%, rgba(255,190,60,0.62) 10%, rgba(70,235,150,0.62) 20%, rgba(70,170,255,0.62) 30%, rgba(180,80,255,0.62) 40%,
    rgba(255,70,120,0.62) 50%, rgba(255,190,60,0.62) 60%, rgba(70,235,150,0.62) 70%, rgba(70,170,255,0.62) 80%, rgba(180,80,255,0.62) 90%, rgba(255,70,120,0.62) 100%);
}
.jp-card.ced-holo::after{
  mix-blend-mode:multiply;
  background-image:linear-gradient(90deg,
    rgba(255,150,215,0.5) 0%, rgba(150,225,255,0.5) 12.5%, rgba(200,170,255,0.5) 25%, rgba(150,255,225,0.5) 37.5%,
    rgba(255,150,215,0.5) 50%, rgba(150,225,255,0.5) 62.5%, rgba(200,170,255,0.5) 75%, rgba(150,255,225,0.5) 87.5%, rgba(255,150,215,0.5) 100%);
}
.jp-card.ced-foil::after{
  mix-blend-mode:multiply;
  background-image:linear-gradient(90deg,
    rgba(120,160,215,0.5) 0%, rgba(215,230,250,0.15) 12%, rgba(120,160,215,0.5) 25%, rgba(215,230,250,0.15) 38%,
    rgba(120,160,215,0.5) 50%, rgba(215,230,250,0.15) 62%, rgba(120,160,215,0.5) 75%, rgba(215,230,250,0.15) 88%, rgba(120,160,215,0.5) 100%);
}
/* 빛줄기: 흰 사선이 카드 위를 지나감 (세 에디션 공통) */
.jp-card.card-ed::before{
  content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  background-image:linear-gradient(90deg, transparent 0%, transparent 18%, rgba(255,255,255,0.75) 25%, transparent 32%, transparent 68%, rgba(255,255,255,0.75) 75%, transparent 82%, transparent 100%);
  background-size:200% 100%; mix-blend-mode:screen; opacity:.9;
  animation:jpEdShine 3.2s linear infinite; animation-delay:var(--ed-t, 0s);
}
body.jp-calm .jp-card.card-ed::before{ animation:none; }
/* 테두리 빛도 진하게 (강화 테두리가 있으면 그 바깥으로) */
.jp-card.ced-poly, .jp-card.runed.card-ed.ced-poly{ box-shadow:0 0 0 2px rgba(255,255,255,0.75), 0 0 14px 2px rgba(200,110,255,0.8), 0 0 26px rgba(90,200,255,0.5); }
.jp-card.ced-holo, .jp-card.runed.card-ed.ced-holo{ box-shadow:0 0 0 2px rgba(255,255,255,0.7), 0 0 14px 2px rgba(255,150,220,0.75); }
.jp-card.ced-foil, .jp-card.runed.card-ed.ced-foil{ box-shadow:0 0 0 2px rgba(255,255,255,0.7), 0 0 14px 2px rgba(150,195,255,0.75); }
/* 설명 속 강화 이름(와일드 카드 등): 강화 색 글씨 + 점선 밑줄, 마우스 올리면 설명 말풍선 */
.jp-enh-word{ font-weight:900; border-bottom:1px dashed currentColor; cursor:help; white-space:nowrap; }

/* 카드 팩 고르기: 붙은 것마다 [이름표 + 그 설명] 한 묶음, 묶음 사이는 얇은 선 */
.jp-cp-part{ width:100%; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0 2px; }
.jp-cp-part + .jp-cp-part{ border-top:1px dashed rgba(255,255,255,0.14); }
.jp-cp-part .jp-cp-ed{ line-height:1.35; }

/* 룬 대상 카드 뒤집기 연출: 원근감 */
.jp-rune-targets-row{ perspective:700px; }

/* 지역 아이콘 (regions/<key>_icon.webp): 지역 이름 앞 작은 그림 / 진입 연출에선 크게 */
.jp-region-icon{ width:26px; height:26px; object-fit:contain; vertical-align:-7px; margin-right:5px; filter:drop-shadow(0 0 6px color-mix(in srgb, var(--region, #fff) 70%, transparent)); }
.jp-region-icon.intro{ width:clamp(90px, 16vw, 150px); height:auto; margin:0 0 4px; vertical-align:0; transform:scale(.7); opacity:0; transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.jp-region-intro.show .jp-region-icon.intro{ transform:none; opacity:1; }
/* 바로 쓰는 룬의 결과 연출: 화면 가운데에 한 줄씩 통 튀어나옴 (족보 레벨업 = 초록, 돈 = 금색, 증강 = 보라, 꽝 = 회색) */
.jp-rune-fx{ position:fixed; inset:0; z-index:1700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; pointer-events:none; transition:opacity .3s; }
.jp-rune-fx.out{ opacity:0; }
.jp-rune-fx-line{
  padding:12px 30px; border-radius:14px; font-size:clamp(20px, 3.4vw, 34px); font-weight:900; color:#fff; white-space:nowrap;
  background:rgba(8,12,24,0.94); border:2px solid #22b85a; box-shadow:0 0 30px rgba(34,184,90,0.55), 0 10px 30px rgba(0,0,0,0.6);
  animation:jpRuneFx .45s cubic-bezier(.2,1.5,.4,1) both;
}
.jp-rune-fx-line.level{ color:#7dffb0; }
.jp-rune-fx-line.money{ color:#ffd45a; border-color:#e0a83a; box-shadow:0 0 30px rgba(224,168,58,0.55), 0 10px 30px rgba(0,0,0,0.6); font-family:'Orbitron',var(--font); }
.jp-rune-fx-line.aug, .jp-rune-fx-line.rune{ color:#e3ccff; border-color:#b07bff; box-shadow:0 0 30px rgba(176,123,255,0.55), 0 10px 30px rgba(0,0,0,0.6); }
.jp-rune-fx-line.fail{ color:#aab; border-color:#556; box-shadow:0 10px 30px rgba(0,0,0,0.6); }
@keyframes jpRuneFx{ from{ transform:scale(.4) translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }
body.jp-calm .jp-rune-fx-line{ animation:none; }
/* ---------- 크로마 색 (2026-10-11: 에디션 → 크로마. 진주 = 은빛, 사파이어 = 파랑, 루비 = 빨강, 흑요석 = 검보라) ---------- */
.jp-ed-badge.ed-foil, .jp-aug.ed-foil::before{ background:linear-gradient(120deg, #f4f7fb, #c9d6e6 50%, #ffffff); color:#22303f; }
.jp-ed-badge.ed-holo, .jp-aug.ed-holo::before{ background:linear-gradient(120deg, #2f6fe0, #6fb6ff 55%, #2a56c8); color:#fff; }
.jp-ed-badge.ed-poly, .jp-aug.ed-poly::before{ background:linear-gradient(120deg, #c81e3c, #ff6b81 55%, #a8142e); color:#fff; }
.jp-ed-badge.ed-negative, .jp-aug.ed-negative::before{ background:linear-gradient(120deg, #120a22, #3a2466); color:#d9c8ff; border:1px solid #8a6bff; }
/* 증강 아이콘 위 반짝임 */
.ed-holo .jp-aug-pick-icon::after, .ed-holo .jp-aug-offer-icon::after, .jp-aug.ed-holo .jp-aug-icon::after{
  background-image:linear-gradient(90deg, rgba(60,130,255,0.5) 0%, rgba(150,210,255,0.55) 12.5%, rgba(40,90,230,0.5) 25%, rgba(150,210,255,0.55) 37.5%,
    rgba(60,130,255,0.5) 50%, rgba(150,210,255,0.55) 62.5%, rgba(40,90,230,0.5) 75%, rgba(150,210,255,0.55) 87.5%, rgba(60,130,255,0.5) 100%);
}
.ed-poly .jp-aug-pick-icon::after, .ed-poly .jp-aug-offer-icon::after, .jp-aug.ed-poly .jp-aug-icon::after{
  mix-blend-mode:screen;
  background-image:linear-gradient(90deg, rgba(255,50,90,0.55) 0%, rgba(255,150,170,0.55) 12.5%, rgba(210,20,60,0.55) 25%, rgba(255,150,170,0.55) 37.5%,
    rgba(255,50,90,0.55) 50%, rgba(255,150,170,0.55) 62.5%, rgba(210,20,60,0.55) 75%, rgba(255,150,170,0.55) 87.5%, rgba(255,50,90,0.55) 100%);
}
/* 트럼프 카드 */
.jp-card.ced-holo::after{
  background-image:linear-gradient(90deg, rgba(70,130,240,0.55) 0%, rgba(170,215,255,0.3) 12.5%, rgba(50,100,225,0.55) 25%, rgba(170,215,255,0.3) 37.5%,
    rgba(70,130,240,0.55) 50%, rgba(170,215,255,0.3) 62.5%, rgba(50,100,225,0.55) 75%, rgba(170,215,255,0.3) 87.5%, rgba(70,130,240,0.55) 100%);
}
.jp-card.ced-poly::after{
  background-image:linear-gradient(90deg, rgba(235,50,85,0.6) 0%, rgba(255,170,185,0.3) 12.5%, rgba(200,25,60,0.6) 25%, rgba(255,170,185,0.3) 37.5%,
    rgba(235,50,85,0.6) 50%, rgba(255,170,185,0.3) 62.5%, rgba(200,25,60,0.6) 75%, rgba(255,170,185,0.3) 87.5%, rgba(235,50,85,0.6) 100%);
}
.jp-card.ced-poly, .jp-card.runed.card-ed.ced-poly{ box-shadow:0 0 0 2px rgba(255,255,255,0.75), 0 0 14px 2px rgba(255,70,100,0.85); }
.jp-card.ced-holo, .jp-card.runed.card-ed.ced-holo{ box-shadow:0 0 0 2px rgba(255,255,255,0.7), 0 0 14px 2px rgba(80,150,255,0.85); }

/* ---------- 정글 보스 그림 ---------- */
.jp-boss-icon{ width:84px; height:84px; flex:none; object-fit:contain; border-radius:50%; filter:drop-shadow(0 0 10px rgba(216,54,74,0.6)); }
.jp-boss-icon.small{ width:38px; height:38px; }
.jp-np-boss.has-icon{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.jp-np-boss-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.jp-boss-rule{ display:flex; align-items:center; gap:8px; text-align:left; }
@media (max-width:640px){ .jp-boss-icon{ width:60px; height:60px; } }
/* 장로 드래곤이 태운 카드 (덱 보기) */
.jp-deckview-row .jp-card.burnt{ filter:brightness(.4) sepia(1) saturate(4) hue-rotate(-25deg); }

/* ---------- 전리품 선택 창 ---------- */
.jp-loot{ z-index:520; }
.jp-loot .jp-modal-box{ max-width:min(900px, 100%); text-align:center; }
.jp-loot .jp-planet-options{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:26px 0 20px; }
.jp-loot-pick{ --tree:#c8aa6e; width:230px; }
.jp-loot.sup .jp-loot-pick{ --tree:#c58bff; }
.jp-loot-icon{ width:150px !important; height:132px !important; display:flex !important; align-items:center; justify-content:center; flex:none; }
.jp-loot-icon img{ border-radius:0 !important; width:100%; height:100%; object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,0.6)) drop-shadow(0 0 12px color-mix(in srgb, var(--tree) 60%, transparent)); transition:transform .2s; }
.jp-loot-pick:hover .jp-loot-icon img, .jp-loot-pick.selected .jp-loot-icon img{ transform:scale(1.08) rotate(-3deg); }
.jp-loot #lootTakeBtn{ min-width:160px; }
@media (max-width:640px){ .jp-loot-pick{ width:calc(50% - 10px); } .jp-loot-icon{ width:100px !important; height:88px !important; } }
/* ---------- 설명 글 속 크로마 이름 (2026-10-11) ----------
   "루비 크로마" 같은 글자를 크로마 이름표 모양으로, 마우스를 올리면 효과 말풍선(#runeTip) -- script.js enhWords */
.jp-ed-badge.jp-ed-word{ border-bottom:0; cursor:help; margin:1px 2px; white-space:nowrap; box-shadow:0 0 0 1px rgba(255,255,255,0.35), 0 0 8px rgba(255,255,255,0.18); }
.jp-ed-badge.jp-ed-word.ed-negative{ border:1px solid #8a6bff; box-shadow:0 0 8px rgba(138,107,255,0.5); }
.jp-ed-badge.jp-ed-word:hover{ filter:brightness(1.15); }
.jp-rune-tip > div + div{ margin-top:3px; }
/* 주문이 무작위로 거는 내 카드 줄: 보기만 함 (누를 수 없음) */
.jp-rune-targets-row.static .jp-card{ cursor:default; }
.jp-rune-targets-row.static .jp-card:hover{ transform:none; }/* 주문 그림: 원본 크기가 달라도(새로 넣은 건 작음) 칸에 꽉 차게 */
.jp-rune-pick.spell .jp-rune-pick-icon img{ width:100%; height:100%; object-fit:cover; }
/* 팩 그림: 도트로 그린 행성 팩만 pixelated, 나머지(카드·룬·주문 팩)는 부드럽게 줄임 (2026-10-11: 카드 팩·주문 팩이 깨져 보였음) */
.jp-pack-art img{ image-rendering:auto; }
.cat-planet .jp-pack-art img{ image-rendering:pixelated; }
/* 주문으로 새로 생긴 카드: 내 카드 줄에서 초록 테두리로 구분 */
.jp-rune-targets-row .jp-card.jp-rune-added{ outline:3px solid #7dffb0; outline-offset:-1px; box-shadow:0 0 14px rgba(125,255,176,0.55); }
.jp-rune-targets-row.adding{ flex-wrap:nowrap; }
.jp-rune-targets-row.adding .jp-card{ min-width:0; flex-shrink:1; }
@media (max-width:640px){ .jp-rune-targets-row.adding{ flex-wrap:wrap; } }
/* 카드·증강 팩에서 고른 보기 (누르면 고른 상태, 아래 [취소] [사용]) */
.jp-cardpack-pick.selected{ transform:translateY(-8px); }
.jp-cardpack-pick.selected .jp-card{ box-shadow:0 0 0 3px #ffd45a, 0 0 22px rgba(255,212,90,0.7), 0 12px 26px rgba(0,0,0,0.55); }
.jp-aug-pick.selected{ transform:translateY(-8px); box-shadow:0 0 0 3px #ffd45a, 0 0 28px rgba(255,212,90,0.65); }
/* ---------- 팩 보기가 6장 이상일 때 (비스킷 배달로 늘어난 룬 팩 등, 2026-10-11) ----------
   창 크기는 그대로, 카드 줄만 옆으로 스크롤. 가운데 정렬 + 넘침이면 왼쪽 카드가 잘려 안 보였음 -> 왼쪽부터 채움.
   카드 폭은 줄이지 않음(전엔 찌그러졌음). 스크롤 막대는 게임 색으로. 휠로 넘기기는 script.js */
#packModal .jp-planet-options.jp-scrolly{
  flex-wrap:nowrap !important; justify-content:flex-start; max-width:100%;
  overflow-x:auto; overflow-y:hidden; padding:16px 12px 16px; margin-bottom:6px;
  scrollbar-width:thin; scrollbar-color:#c8aa6e rgba(200,170,110,0.12);
  /* 양 끝이 살짝 흐려져서 더 있다는 걸 알림 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
#packModal .jp-planet-options.jp-scrolly > *{ flex-shrink:0 !important; }
#packModal .jp-planet-options.jp-scrolly::-webkit-scrollbar{ height:16px; }
#packModal .jp-planet-options.jp-scrolly::-webkit-scrollbar-track{ background:rgba(200,170,110,0.10); border:1px solid rgba(200,170,110,0.28); border-radius:6px; margin:0 22px; }
#packModal .jp-planet-options.jp-scrolly::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, #f0d9a0, #c8aa6e 50%, #8a6d34); border-radius:6px; border:2px solid #0b1626; }
#packModal .jp-planet-options.jp-scrolly::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #fff0c4, #e6c684 50%, #a88544); }
.jp-rune-now{ color:#aab6c8; font-weight:600; white-space:nowrap; }
.jp-rune-now b{ color:#ffd45a; font-family:'Orbitron',var(--font); }
/* 시간 왜곡 물약 확인 칸: 마지막으로 사용한 카드 (그림 + 이름 + 효과) */
.jp-rune-last{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:4px 0 12px; }
.jp-rune-last small{ font-size:12px; font-weight:800; letter-spacing:1px; color:#aab6c8; }
.jp-rune-last-card{ display:flex; align-items:center; gap:12px; padding:8px 16px 8px 10px; border-radius:10px; text-align:left;
  background:linear-gradient(160deg, #12284a, #0b1830); border:1px solid var(--tree); box-shadow:0 0 14px color-mix(in srgb, var(--tree) 45%, transparent); }
.jp-rune-last-card img{ width:52px; height:52px; object-fit:contain; border-radius:50%; filter:drop-shadow(0 0 8px var(--tree)); }
.jp-rune-last-card.planet img{ border-radius:0; height:60px; width:auto; image-rendering:pixelated; }
.jp-rune-last-card b{ display:block; font-size:16px; font-weight:900; color:#fff; }
.jp-rune-last-card > div > span{ display:block; font-size:13px; color:#cfd8e6; margin-top:2px; }
/* 말풍선 제목 옆 종류 표시: 카드 강화 / 인장 / 크로마 */
.jp-tip-kind{ display:inline-block; margin-left:7px; padding:1px 7px; border-radius:9px; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.02em; color:#cfe0f5; background:rgba(120,160,220,0.18); border:1px solid rgba(150,185,235,0.45); vertical-align:1px; white-space:nowrap; }
/* ---------- 카드 크로마 이름표 (2026-10-11) ----------
   반짝임만으론 진주/사파이어/루비를 구분하기 어려워서 카드 아래에 이름표. 강화 이름표가 있으면 그 위에 쌓임 */
.jp-card-edtag.jp-ed-badge{
  position:absolute; left:50%; bottom:3px; transform:translateX(-50%); z-index:4; margin:0; white-space:nowrap;
  display:inline-flex; align-items:center; height:15px; padding:1px 6px 0; border-radius:3px; line-height:1;
  font-size:10px; font-weight:900; box-shadow:0 0 0 1px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.5); pointer-events:auto; cursor:help;
}
.jp-card.enh .jp-card-edtag{ bottom:20px; }
.jp-card.card-ed .jp-card-bonus{ bottom:21px; }
.jp-card.enh.card-ed .jp-card-bonus{ bottom:38px; }
/* 덱 보기(겹치는 곳): 왼쪽 아래로 */
.jp-deckview-row .jp-card-edtag.jp-ed-badge{ left:1px; transform:none; bottom:2px; font-size:8.5px; height:13px; padding:1px 3px 0; }
.jp-deckview-row .jp-card.enh .jp-card-edtag{ bottom:16px; }
.jp-pick-option .jp-card-edtag.jp-ed-badge{ font-size:9px; }
/* 크로마 이름표는 카드 위쪽, 강화 이름표는 아래쪽 (2026-10-11 위치 변경) */
.jp-card-edtag.jp-ed-badge, .jp-card.enh .jp-card-edtag{ top:3px; bottom:auto; }
.jp-card.card-ed .jp-card-bonus{ bottom:4px; }
.jp-card.enh.card-ed .jp-card-bonus{ bottom:21px; }
/* 덱 보기(겹쳐서 왼쪽만 보임): 숫자·문양 바로 아래 왼쪽 */
.jp-deckview-row .jp-card-edtag.jp-ed-badge, .jp-deckview-row .jp-card.enh .jp-card-edtag{ top:30%; bottom:auto; left:1px; }
/* ---------- 보스 등장 연출 (2026-10-11, 룬테라 챔피언의 길처럼) ----------
   .jp-region-intro(화면 덮기·페이드) 위에: 왼쪽 보스 그림, 오른쪽 이름·대사·방해 규칙 */
.jp-boss-intro{ gap:18px; background:radial-gradient(70% 55% at 50% 50%, rgba(140,20,35,0.45), rgba(3,4,10,0.6) 72%), rgba(4,3,8,0.88); }
.jp-boss-intro::before, .jp-boss-intro::after{ content:''; position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg, transparent, #ff4d5e 30%, #ffd0a0 50%, #ff4d5e 70%, transparent); opacity:.85; transform:scaleX(0); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.jp-boss-intro::before{ top:22%; } .jp-boss-intro::after{ bottom:22%; }
.jp-boss-intro.show::before, .jp-boss-intro.show::after{ transform:scaleX(1); }
.jp-boss-intro-label{ font-family:'Orbitron',var(--font); font-size:15px; font-weight:900; letter-spacing:.35em; color:#ff8a96; text-shadow:0 0 14px rgba(255,77,94,0.8); opacity:0; transition:opacity .5s ease .1s; }
.jp-boss-intro-body{ display:flex; align-items:center; gap:34px; max-width:min(860px, 92vw); }
.jp-boss-intro-portrait{
  flex:none; width:220px; height:220px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #3a0d16, #0a0508 75%);
  border:3px solid #ff4d5e; box-shadow:0 0 0 6px rgba(255,77,94,0.16), 0 0 46px rgba(255,77,94,0.75), inset 0 0 30px rgba(0,0,0,0.7);
  transform:translateX(-70px) scale(.8); opacity:0; transition:transform .65s cubic-bezier(.2,.9,.25,1.15), opacity .45s ease;
}
.jp-boss-intro-portrait img.jp-boss-icon{ width:100%; height:100%; object-fit:cover; border-radius:50%; margin:0; }
.jp-boss-intro-skull{ font-size:110px; color:#ff6b7a; text-shadow:0 0 30px rgba(255,77,94,0.8); }
.jp-boss-intro-text{ text-align:left; transform:translateX(60px); opacity:0; transition:transform .65s cubic-bezier(.2,.8,.2,1) .15s, opacity .5s ease .15s; }
.jp-boss-intro-name{ font-size:clamp(34px, 6vw, 62px); font-weight:900; letter-spacing:.03em; color:#fff; text-shadow:0 0 26px rgba(255,77,94,0.85), 0 4px 0 rgba(0,0,0,0.55); line-height:1.1; }
.jp-boss-intro-say{
  position:relative; margin-top:14px; padding:12px 18px; border-radius:4px 14px 14px 14px; max-width:520px;
  font-size:18px; font-weight:700; line-height:1.5; color:#ffe9d6; font-style:italic;
  background:linear-gradient(160deg, rgba(60,14,22,0.92), rgba(24,8,14,0.92)); border:1px solid rgba(255,120,130,0.55); box-shadow:0 8px 24px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(8px); transition:opacity .5s ease .55s, transform .5s ease .55s;
}
.jp-boss-intro-rule{ margin-top:14px; padding:10px 14px; border-left:3px solid #ff4d5e; background:rgba(255,77,94,0.10); font-size:15px; font-weight:700; line-height:1.5; color:#ffd9dd; opacity:0; transition:opacity .5s ease .9s; }
.jp-boss-intro-rule small{ display:block; font-size:11px; font-weight:900; letter-spacing:.14em; color:#ff8a96; margin-bottom:3px; }
.jp-boss-intro-rule.off s{ opacity:.55; } .jp-boss-intro-rule.off em{ display:block; font-style:normal; color:#7dffb0; }
.jp-boss-intro-skip{ font-size:12px; font-weight:700; color:rgba(255,255,255,0.45); opacity:0; transition:opacity .5s ease 1.3s; }
.jp-boss-intro.show .jp-boss-intro-label, .jp-boss-intro.show .jp-boss-intro-rule, .jp-boss-intro.show .jp-boss-intro-skip{ opacity:1; }
.jp-boss-intro.show .jp-boss-intro-portrait, .jp-boss-intro.show .jp-boss-intro-text{ transform:none; opacity:1; }
.jp-boss-intro.show .jp-boss-intro-say{ opacity:1; transform:none; }
@media (max-width:640px){
  .jp-boss-intro-body{ flex-direction:column; gap:16px; }
  .jp-boss-intro-portrait{ width:150px; height:150px; }
  .jp-boss-intro-text{ text-align:center; }
  .jp-boss-intro-say{ font-size:15px; border-radius:14px; }
  .jp-boss-intro-rule{ border-left:0; border-top:3px solid #ff4d5e; }
  .jp-boss-intro::before{ top:8%; } .jp-boss-intro::after{ bottom:8%; }
}
/* ---------- 보스 방해 연출 (2026-10-11) -- script.js bossCardFx / burnCardFx / targetFx / gustFx / deckBurnFx ---------- */
/* 마법공학 드래곤: 감전된 카드 -- 파랗게 지지직 + 번개 */
.jp-card.fx-zap{ animation:jp-fx-zap .55s steps(1, end) 1; box-shadow:0 0 0 2px #5ad1ff, 0 0 22px 4px rgba(90,209,255,0.85) !important; filter:saturate(.35) brightness(.8); }
@keyframes jp-fx-zap{
  0%{ transform:translate(0,0); filter:brightness(2.4) saturate(0); } 12%{ transform:translate(-4px,2px) rotate(-2deg); filter:brightness(.6) saturate(.3) hue-rotate(160deg); }
  24%{ transform:translate(4px,-2px) rotate(2deg); filter:brightness(2.2); } 36%{ transform:translate(-3px,-1px); filter:brightness(.7) hue-rotate(160deg); }
  48%{ transform:translate(3px,1px) rotate(-1deg); filter:brightness(1.9); } 60%{ transform:translate(-2px,0); filter:brightness(.8); }
  72%{ transform:translate(2px,0); filter:brightness(1.5); } 100%{ transform:none; filter:saturate(.35) brightness(.8); }
}
/* 핏빛 칼날부리: 쪼인 카드 -- 붉게 번쩍 + 할퀸 자국 */
.jp-card.fx-peck{ animation:jp-fx-peck .45s ease-out 1; box-shadow:0 0 0 2px #ff3b52, 0 0 18px 3px rgba(255,59,82,0.7) !important; filter:saturate(.45) brightness(.82); }
@keyframes jp-fx-peck{ 0%{ transform:scale(1.12) rotate(-4deg); filter:brightness(1.8) sepia(1) saturate(6) hue-rotate(-40deg); } 40%{ transform:scale(.95) rotate(3deg); } 100%{ transform:none; filter:saturate(.45) brightness(.82); } }
.jp-fx-mark{ position:absolute; inset:0; z-index:6; display:grid; place-items:center; pointer-events:none; }
.jp-fx-mark svg{ width:62%; height:auto; filter:drop-shadow(0 0 6px rgba(90,209,255,0.95)); }
.jp-fx-mark.fx-zap svg{ animation:jp-fx-bolt .6s ease-out 1 both; }
.jp-fx-mark.fx-peck svg{ width:78%; filter:drop-shadow(0 0 5px rgba(255,59,82,0.9)); animation:jp-fx-slash .4s ease-out 1 both; opacity:.85; }
@keyframes jp-fx-bolt{ 0%{ transform:translateY(-60%) scale(1.5); opacity:0; } 18%{ transform:none; opacity:1; } 30%{ opacity:.35; } 42%{ opacity:1; } 100%{ opacity:.55; transform:scale(.9); } }
@keyframes jp-fx-slash{ 0%{ clip-path:inset(0 0 100% 0); opacity:1; } 100%{ clip-path:inset(0 0 0 0); opacity:.85; } }
.jp-pop.zap-d_hextech{ background:#1b6fb0; color:#eaf8ff; box-shadow:0 0 10px rgba(90,209,255,0.8); }
.jp-pop.zap-raptor{ background:#a01c30; color:#fff; }
/* 붉은 덩굴정령: 불타는 손패 카드 -- 불빛 테두리 + 위로 날리는 불씨 (사라지는 움직임은 script.js) */
.jp-card.fx-burn{ box-shadow:0 0 0 2px #ff8a2a, 0 0 26px 6px rgba(255,110,30,0.9), 0 -10px 30px rgba(255,200,60,0.6) !important; overflow:visible; }
.jp-card.fx-burn::before{ content:''; position:absolute; inset:-2px; z-index:5; border-radius:inherit; pointer-events:none;
  background:linear-gradient(0deg, rgba(255,90,20,0.85) 0%, rgba(255,170,40,0.55) 35%, rgba(255,220,120,0.15) 70%, transparent 100%); mix-blend-mode:screen; animation:jp-fx-flame .76s ease-in 1 both; }
@keyframes jp-fx-flame{ 0%{ clip-path:inset(100% 0 0 0); } 60%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 0 0 0); opacity:.4; } }
.jp-fx-ember{ position:absolute; bottom:20%; z-index:7; width:5px; height:5px; border-radius:50%; background:#ffd36b; box-shadow:0 0 8px 2px #ff7a1a; pointer-events:none; opacity:0; animation:jp-fx-ember .7s ease-out 1 both; }
@keyframes jp-fx-ember{ 0%{ transform:translate(0,0) scale(1); opacity:0; } 15%{ opacity:1; } 100%{ transform:translate(var(--dx, 0), -90px) scale(.3); opacity:0; } }
/* 목표 점수 번쩍: 화염(+10%) 빨강 / 바다(회복) 파랑 / 화학공학(부활) 초록 */
.fx-target-fire{ animation:jp-fx-target 1s ease-out 1; --fxc:255,96,40; }
.fx-target-ocean{ animation:jp-fx-target 1s ease-out 1; --fxc:60,150,255; }
.fx-target-chem{ animation:jp-fx-target 1s ease-out 1; --fxc:120,255,90; }
@keyframes jp-fx-target{ 0%{ box-shadow:0 0 0 3px rgba(var(--fxc),1), 0 0 34px 8px rgba(var(--fxc),0.9); transform:scale(1.12); } 100%{ box-shadow:0 0 0 0 rgba(var(--fxc),0), 0 0 0 0 rgba(var(--fxc),0); transform:none; } }
/* 바람의 드래곤: 손패 위를 휩쓰는 바람 줄기 */
.jp-fx-gust{ position:absolute; inset:0; z-index:40; overflow:hidden; pointer-events:none; }
.jp-fx-gust i{ position:absolute; left:-40%; width:45%; height:3px; border-radius:3px; background:linear-gradient(90deg, transparent, rgba(220,245,255,0.95), transparent); animation:jp-fx-gust .7s ease-in 1 both; }
.jp-fx-gust i:nth-child(1){ top:22%; } .jp-fx-gust i:nth-child(2){ top:42%; animation-delay:.08s; width:60%; } .jp-fx-gust i:nth-child(3){ top:62%; animation-delay:.16s; } .jp-fx-gust i:nth-child(4){ top:80%; animation-delay:.05s; width:35%; }
@keyframes jp-fx-gust{ 0%{ transform:translateX(0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateX(330%); opacity:0; } }
/* 장로 드래곤: 덱 더미가 타오름 + "-N장" */
.jp-deck.fx-deck-burn .jp-deck-pile{ animation:jp-fx-deckburn 2.4s ease-out 1; }
@keyframes jp-fx-deckburn{ 0%{ filter:brightness(2.2) sepia(1) saturate(8) hue-rotate(-30deg) drop-shadow(0 0 26px #ff6a1a); transform:scale(1.08) rotate(-2deg); } 15%{ transform:scale(1.02) rotate(2deg); } 30%{ transform:none; } 100%{ filter:none; } }
.jp-deck{ position:relative; }
.jp-fx-deck-tag{ position:absolute; left:50%; top:-6px; transform:translateX(-50%); z-index:8; white-space:nowrap; padding:4px 10px; border-radius:12px; font-size:14px; font-weight:900; color:#fff3d6;
  background:linear-gradient(180deg, #c8421a, #7a1c0c); border:1px solid #ffb36b; box-shadow:0 0 16px rgba(255,110,30,0.8); pointer-events:none; animation:jp-fx-decktag 2.5s ease-out 1 both; }
@keyframes jp-fx-decktag{ 0%{ transform:translate(-50%, 14px) scale(.6); opacity:0; } 12%{ transform:translate(-50%, -8px) scale(1.12); opacity:1; } 22%{ transform:translate(-50%, -4px) scale(1); } 80%{ opacity:1; } 100%{ transform:translate(-50%, -22px); opacity:0; } }
body.jp-calm .jp-card.fx-zap, body.jp-calm .jp-card.fx-peck{ animation:none; }
.jp-hand-zone{ position:relative; }
/* 보스 연출이 크로마·강화 카드 위에서도 또렷하게: 표식은 맨 위 층, 그동안 크로마 반짝임은 가라앉힘, 불길은 크로마 빛줄기(::before) 대신 */
.jp-fx-mark{ z-index:30; }
.jp-card.fx-zap::after, .jp-card.fx-peck::after, .jp-card.fx-burn::after{ opacity:.25 !important; animation-play-state:paused !important; }
.jp-card.card-ed.fx-zap::before, .jp-card.card-ed.fx-peck::before{ opacity:0; }
.jp-card.card-ed.fx-burn::before{ inset:-2px; z-index:5; opacity:1; background-size:100% 100%;
  background-image:linear-gradient(0deg, rgba(255,90,20,0.85) 0%, rgba(255,170,40,0.55) 35%, rgba(255,220,120,0.15) 70%, transparent 100%); animation:jp-fx-flame .76s ease-in 1 both; }
.jp-card.fx-zap .jp-card-edtag, .jp-card.fx-zap .jp-card-enh, .jp-card.fx-peck .jp-card-edtag, .jp-card.fx-peck .jp-card-enh{ opacity:.6; }
/* ---------- 스테이지 효과 표시 (2026-10-11) ---------- */
.jp-stage-rule{ margin-top:8px; padding:7px 10px; border-radius:10px; text-align:left; font-size:12.5px; line-height:1.45; color:#d8f3e4;
  background:linear-gradient(160deg, rgba(40,110,80,0.30), rgba(14,40,32,0.45)); border:1px solid rgba(110,220,160,0.42); }
.jp-stage-rule small, .jp-np-stagefx small{ display:block; font-size:10.5px; font-weight:900; letter-spacing:.1em; color:#7dffb0; margin-bottom:2px; }
.jp-stage-rule b, .jp-np-stagefx b{ color:#fff; margin-right:4px; }
.jp-stage-rule em{ font-style:normal; font-weight:800; color:#ffd45a; margin-left:4px; white-space:nowrap; }
.jp-np-stagefx{ margin-top:8px; padding-top:7px; border-top:1px dashed rgba(110,220,160,0.4); font-size:13px; line-height:1.45; color:#d8f3e4; }
.jp-boss-intro-rule.stage{ border-left-color:#5fd18b; background:rgba(95,209,139,0.10); color:#dcf7e8; transition-delay:1.1s; }
.jp-boss-intro-rule.stage small{ color:#7dffb0; }
@media (max-width:640px){ .jp-boss-intro-rule.stage{ border-top-color:#5fd18b; } }
/* ---------- 라운드 카드의 스테이지 효과 / 보스 규칙 칸 개편 (2026-10-11) ----------
   머리글(작게) → 이름(굵게) → 설명(설명 글의 줄바꿈 그대로, 낱말 중간에서 안 끊김). 보스 칸은 왼쪽에 그림 */
.jp-stage-rule, .jp-round-card .jp-boss-rule{
  display:flex; align-items:center; gap:10px; margin-top:8px; padding:9px 11px 10px; border-radius:10px; text-align:left;
  font-size:12.5px; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere;
}
.jp-stage-rule{ border-left:3px solid #5fd18b; }
.jp-round-card .jp-boss-rule{ border-left:3px solid #ff5a6e; background:linear-gradient(160deg, rgba(120,24,40,0.38), rgba(40,10,18,0.5)); border-color:rgba(255,107,129,0.42); border-left-color:#ff5a6e; color:#ffd9dd; }
.jp-rule-body{ flex:1; min-width:0; }
.jp-rule-body > small{ display:block; font-size:10px; font-weight:900; letter-spacing:.12em; margin-bottom:3px; }
.jp-stage-rule .jp-rule-body > small{ color:#7dffb0; }
.jp-boss-rule .jp-rule-body > small{ color:#ff8a96; }
.jp-rule-body > b{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0 0 3px; font-size:14.5px; font-weight:900; color:#fff; line-height:1.25; }
.jp-rule-body > b em{ margin:0; padding:1px 7px; border-radius:9px; font-style:normal; font-size:11px; font-weight:800; color:#1a1405; background:#ffd45a; white-space:nowrap; }
.jp-rule-body > p{ margin:0; font-size:12.5px; font-weight:600; line-height:1.5; }
.jp-stage-rule .jp-rule-body > p{ color:#cfeedd; }
.jp-boss-rule .jp-rule-body > p{ color:#ffd0d6; }
.jp-boss-rule.off .jp-rule-body > p{ color:#7dffb0; }
.jp-round-card .jp-boss-rule .jp-boss-icon.small{ width:44px; height:44px; }
/* ---------- 덱 보기: 카드가 많을 때 (2026-10-11) ----------
   전엔 한 줄에 다 넣으려고 끝없이 겹쳐서(또는 창 전체에 기본 스크롤이 생겨서) 읽기 힘들었음.
   → 카드마다 최소 28px은 보이게 하고, 그래도 넘치면 카드 칸 안에서만 옆으로 스크롤 (금색 막대, 휠은 script.js) */
#deckModal .jp-modal-box{ overflow-x:hidden; }
.jp-deckview{ min-width:0; max-width:100%; }
.jp-deckview-cards{
  min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; padding-top:16px; padding-bottom:12px;
  scrollbar-width:thin; scrollbar-color:#c8aa6e rgba(200,170,110,0.12);
}
.jp-deckview-cards::-webkit-scrollbar{ height:16px; }
.jp-deckview-cards::-webkit-scrollbar-track{ background:rgba(200,170,110,0.10); border:1px solid rgba(200,170,110,0.28); border-radius:6px; margin:0 10px; }
.jp-deckview-cards::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, #f0d9a0, #c8aa6e 50%, #8a6d34); border-radius:6px; border:2px solid #0b1626; }
.jp-deckview-cards::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #fff0c4, #e6c684 50%, #a88544); }
.jp-deckview-row{ flex:none; width:max-content; min-width:100%; box-sizing:border-box; }
.jp-deckview-row .jp-card + .jp-card{ margin-left:max(calc(28px - var(--w)), min(-18px, calc((100% - 34px - var(--w)) / (var(--n) - 1) - var(--w)))); }
@media (max-width:640px){
  .jp-deckview-row .jp-card + .jp-card{ margin-left:max(calc(24px - var(--w)), min(-12px, calc((100% - 26px - var(--w)) / (var(--n) - 1) - var(--w)))); }
}
/* 덱 보기 왼쪽 띠: 위에서부터 숫자·문양 / 크로마 / 인장 / 강화 -- 서로 안 겹치게 */
.jp-deckview-row .jp-card-edtag.jp-ed-badge, .jp-deckview-row .jp-card.enh .jp-card-edtag{ top:25%; }
.jp-deckview-row .jp-card.card-ed .jp-card-seal{ top:57%; }
/* 손패 등 큰 카드: 크로마 이름표(위 가운데)가 인장(오른쪽 위)을 가리지 않게 인장을 이름표 아래로 */
.jp-card.card-ed .jp-card-seal{ top:22px; }
.jp-rune-targets-row .jp-card.card-ed .jp-card-seal, .jp-pick-option .jp-card.card-ed .jp-card-seal{ top:20px; }
/* 증강 칸의 크로마 이름표: 아래(이름을 가림) → 왼쪽 위 모서리 */
.jp-aug.ed::before{ top:4px; bottom:auto; left:4px; }
/* ---------- 마우스를 올리면 떠오르는 카드가 덜덜 떨리던 것 (2026-10-11) ----------
   카드가 위로 떠오르면 마우스(카드 아래 끝에 있을 때)가 카드 밖이 됨 → 내려옴 → 다시 올라감 … 이 반복.
   떠오른 동안 카드 아래에 안 보이는 받침(::after)을 붙여 마우스가 계속 카드 위에 있는 걸로 치게 함.
   프리즘 증강(.jp-rare)은 혼자서도 위아래로 움직여서 받침을 늘 붙임 */
.jp-cardpack-pick, .jp-pack-aug, .jp-pick-option{ position:relative; }
.jp-aug-pick:hover:not(:disabled)::after, .jp-rune-pick:hover:not(:disabled)::after, .jp-cardpack-pick:hover:not(:disabled)::after,
.jp-pack-aug:hover:not(:disabled)::after, .jp-pick-option:hover::after, .jp-aug-pick.jp-rare::after, .jp-rune-pick.jp-rare::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:16px; background:transparent;
}
/* 상점 증강 칸: 전리품으로 나온 칸 표시 */
.jp-loot-tag{ color:#1a1405 !important; background:linear-gradient(120deg, #ffe08a, #c8aa6e) !important; border-color:#ffe9b0 !important; }
.jp-boss-intro{ cursor:default; }
/* 세주아니가 얼린 손패 카드: 푸르게 얼어붙음 (낼 수도 버릴 수도 없음) */
.jp-card.frozen{ filter:saturate(.35) brightness(.9) hue-rotate(170deg); box-shadow:0 0 0 2px #9fe4ff, 0 0 16px 3px rgba(127,212,255,0.75) !important; }
.jp-card.frozen::before{ content:'🧊'; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:6; font-size:26px; filter:drop-shadow(0 0 6px #fff); pointer-events:none; }
/* ---------- 왼쪽 패널이 길어져도 [플레이][버리기]가 화면 안에 (2026-10-12) ----------
   스테이지 효과 + 보스 규칙 칸이 둘 다 뜨면 왼쪽 패널이 화면보다 길어지고, 가운데 판이 그 높이만큼 늘어나서 버튼이 화면 밖으로 밀렸음.
   → 가운데 판·오른쪽은 왼쪽 패널 높이를 따라가지 않고 화면 높이에 고정. 왼쪽 패널의 두 칸은 더 납작하게 */
@media (min-width:1001px){
  .jp-table{ align-items:start; }
  .jp-table > .jp-board, .jp-table > .jp-right{ position:sticky; top:8px; height:calc(100vh - 110px); min-height:520px; }
  .jp-table > .jp-info{ min-height:calc(100vh - 110px); }
  .jp-stage-rule, .jp-round-card .jp-boss-rule{ margin-top:6px; padding:6px 9px 7px; gap:8px; }
  .jp-rule-body > small{ display:inline; margin:0 6px 0 0; font-size:9.5px; vertical-align:1px; }
  .jp-rule-body > b{ display:inline; font-size:13.5px; }
  .jp-rule-body > b em{ margin-left:6px; }
  .jp-rule-body > p{ margin-top:2px; font-size:12px; line-height:1.4; }
  .jp-round-card .jp-boss-rule .jp-boss-icon.small{ width:36px; height:36px; }
}
/* ---------- 상급 전리품 고르기 창 (script.js lootPick) ---------- */
.jp-loot-pickmodal{ z-index:530; }
.jp-loot-pickmodal .jp-modal-box{ max-width:min(1100px, 100%); }
.jp-lootpick-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:20px 0 14px; max-height:62vh; overflow-y:auto; padding:10px 6px; scrollbar-width:thin; scrollbar-color:#c8aa6e rgba(200,170,110,0.12); }
.jp-lootpick-opt{ position:relative; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; border-radius:12px; transition:transform .12s; }
.jp-lootpick-opt:hover{ transform:translateY(-4px); }
.jp-lootpick-opt.picked{ outline:3px solid #7dffb0; outline-offset:2px; transform:translateY(-4px); }
.jp-lootpick-opt .jp-item-card{ width:170px; min-height:150px; }
.jp-lootpick-grid.many{ gap:6px; }
.jp-lootpick-grid.many .jp-card{ width:62px; height:auto; aspect-ratio:691 / 1056; }
.jp-lootpick-enh{ width:170px; min-height:96px; padding:14px 12px; border-radius:12px; text-align:center; background:linear-gradient(160deg, #12284a, #0b1830); border:2px solid var(--enh); box-shadow:0 0 14px color-mix(in srgb, var(--enh) 40%, transparent); }
.jp-lootpick-enh b{ display:block; font-size:16px; font-weight:900; color:var(--enh); margin-bottom:6px; }
.jp-lootpick-enh span{ font-size:13px; line-height:1.5; color:#dfe7f3; }
@media (max-width:640px){ .jp-lootpick-grid.many .jp-card{ width:44px; } .jp-lootpick-opt .jp-item-card, .jp-lootpick-enh{ width:140px; } }

/* ---------- 아이템 제작 창 · 재료 카드 개편 (2026-10-12) ---------- */
/* 어두운 아이콘 격자 → 이름과 효과가 읽히는 목록. 위: 재료 줄(필터) / 왼쪽: 완성템 목록 / 오른쪽: 상세 */
.jp-gearbook-box{ max-width:940px; width:100%; }
.jp-gbmats-label{ margin:14px 0 6px; text-align:left; font-size:13px; font-weight:800; color:#cfd8e6; }
.jp-gbmats-label small{ margin-left:6px; font-weight:600; color:var(--sub); }
.jp-gbmats{ display:grid; grid-template-columns:repeat(9, minmax(0, 1fr)); gap:6px; }
.jp-gbmat{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 2px 6px;
  border-radius:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
  color:var(--sub); cursor:pointer; font-family:inherit; transition:background .12s, border-color .12s;
}
.jp-gbmat:hover{ background:rgba(255,255,255,0.08); }
.jp-gbmat-icon{ position:relative; width:40px; height:40px; display:grid; place-items:center; font-size:24px; opacity:.5; }
.jp-gbmat-icon img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.jp-gbmat-icon i{
  position:absolute; right:-6px; bottom:-4px; min-width:18px; padding:0 4px; border-radius:9px;
  background:#2fd06b; color:#04210f; font-style:normal; font-size:11.5px; font-weight:900; line-height:18px;
}
.jp-gbmat-name{ font-size:11px; font-weight:700; line-height:1.25; text-align:center; word-break:keep-all; }
.jp-gbmat.own{ border-color:rgba(47,208,107,0.55); background:rgba(47,208,107,0.08); color:#e6ecf5; }
.jp-gbmat.own .jp-gbmat-icon{ opacity:1; }
.jp-gbmat.on{ border-color:#4fc3ff; background:rgba(79,195,255,0.16); color:#fff; box-shadow:0 0 0 1px #4fc3ff inset; }
.jp-gbmat.on .jp-gbmat-icon{ opacity:1; }

.jp-gearbook{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:16px; margin:14px 0 16px; align-items:start; }
.jp-gearbook-list{
  display:flex; flex-direction:column; gap:5px; max-height:min(54vh, 520px); overflow-y:auto; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.25) transparent;
}
.jp-gbgroup{ margin:8px 0 1px; font-size:12px; font-weight:800; letter-spacing:.5px; color:var(--sub); }
.jp-gbgroup:first-child{ margin-top:0; }
.jp-gbgroup.ready{ color:#5fe59a; }
.jp-gbrow{
  display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; text-align:left;
  border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.035);
  color:#e6ecf5; cursor:pointer; font-family:inherit; transition:background .12s, border-color .12s;
}
.jp-gbrow:hover{ background:rgba(255,255,255,0.08); }
.jp-gbrow-icon{ width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; font-size:26px; border-radius:8px; overflow:hidden; background:rgba(0,0,0,0.35); }
.jp-gbrow-icon img{ width:100%; height:100%; object-fit:cover; }
.jp-gbrow-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.jp-gbrow-body b{ font-size:14.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jp-gbrow-body small{ font-size:12.5px; line-height:1.35; color:#aab4c5; }
.jp-gbrow-tag{ margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,0.14); font-style:normal; font-size:11px; font-weight:800; vertical-align:1px; }
.jp-gbrow-tag.gold{ background:#ffd45a; color:#2b1d00; }
.jp-gbrow-parts{ display:flex; gap:4px; flex-shrink:0; }
.jp-gbrow-part{ width:26px; height:26px; display:grid; place-items:center; font-size:16px; border-radius:6px; overflow:hidden; opacity:.4; }
.jp-gbrow-part img{ width:100%; height:100%; object-fit:cover; }
.jp-gbrow-part.have{ opacity:1; box-shadow:0 0 0 2px #2fd06b; }
.jp-gbrow.own{ border-color:rgba(180,190,210,0.45); }
.jp-gbrow.own .jp-gbrow-parts{ display:none; }
.jp-gbrow.radiant{ border-color:rgba(255,212,90,0.7); }
.jp-gbrow.radiant .jp-gbrow-icon{ box-shadow:0 0 0 2px #ffd45a; }
.jp-gbrow.ready{ border-color:#2fd06b; background:rgba(47,208,107,0.1); }
.jp-gbrow.sel{ border-color:#4fc3ff; background:rgba(79,195,255,0.14); box-shadow:0 0 0 1px #4fc3ff inset; }

.jp-gearbook-detail{ min-height:0; padding:16px; }
.jp-gb-head{ gap:14px; margin-bottom:14px; }
.jp-gb-icon{ width:72px; height:72px; }
.jp-gb-name{ font-size:21px; line-height:1.25; }
.jp-gb-status{ display:inline-block; margin-top:5px; padding:2px 9px; border-radius:999px; background:rgba(47,208,107,0.18); color:#5fe59a; font-size:12px; font-weight:800; }
.jp-gb-status.gold{ background:rgba(255,212,90,0.2); color:#ffd45a; }
.jp-gb-recipe{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:stretch; gap:8px; margin-bottom:12px; }
.jp-gb-recipe > b{ align-self:center; font-size:20px; color:var(--sub); }
.jp-gb-part{
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 6px 7px;
  border-radius:10px; border:1px dashed rgba(255,255,255,0.2); background:rgba(0,0,0,0.2);
  font-size:12.5px; font-weight:700; text-align:center; line-height:1.3; word-break:keep-all;
}
.jp-gb-part > :first-child{ width:auto; height:auto; }
.jp-gb-part.have > :first-child{ outline:0; }
.jp-gb-part-icon{ width:44px !important; height:44px !important; display:grid; place-items:center; font-size:26px; opacity:.55; }
.jp-gb-part-icon img, .jp-gb-part img{ width:44px; height:44px; border-radius:8px; }
.jp-gb-part em{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--sub); }
.jp-gb-part.have{ border-style:solid; border-color:#2fd06b; background:rgba(47,208,107,0.1); }
.jp-gb-part.have .jp-gb-part-icon{ opacity:1; }
.jp-gb-part.have em{ color:#5fe59a; }
.jp-gb-effs{ display:flex; flex-direction:column; gap:6px; }
.jp-gb-eff{ padding:9px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); }
.jp-gb-eff-label{ margin-bottom:3px; font-size:12px; font-weight:800; color:var(--sub); }
.jp-gb-eff-label i{ margin-left:7px; padding:1px 7px; border-radius:999px; background:#2fd06b; color:#04210f; font-style:normal; font-size:10.5px; }
.jp-gb-eff-text{ font-size:15px; font-weight:700; line-height:1.5; white-space:pre-line; }
.jp-gb-eff.radiant{ border-color:rgba(255,212,90,0.4); background:rgba(255,212,90,0.07); }
.jp-gb-eff.radiant .jp-gb-eff-label{ color:#ffd45a; }
.jp-gb-eff.now{ border-color:#2fd06b; }
.jp-gb-quest{ margin-top:10px; padding:9px 12px; border-radius:10px; background:rgba(0,0,0,0.25); }
.jp-gb-quest-head{ font-size:12px; font-weight:800; color:#e8d9a8; }
.jp-gb-quest-row{ display:flex; justify-content:space-between; align-items:baseline; margin-top:3px; font-size:14.5px; font-weight:700; }
.jp-gb-quest-row b{ font-family:'Orbitron',var(--font); font-size:16px; color:#ff9a1f; }
.jp-gb-quest small{ font-size:11.5px; color:var(--sub); }
.jp-gb-quest .jp-gb-bar{ margin-top:6px; height:7px; }
@media (max-width:760px){
  .jp-gbmats{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .jp-gearbook{ grid-template-columns:1fr; }
  .jp-gearbook-list{ max-height:34vh; }
}

/* 재료 카드 (재료 구매·판매 확인 창) */
.jp-buy-item > .jp-compcard{
  width:460px; min-height:0;
  align-items:stretch !important; justify-content:flex-start !important; text-align:left !important;
  gap:10px !important; padding:18px 16px 16px !important;
}
.jp-compcard-head{ display:flex; align-items:center; gap:14px; }
.jp-compcard-icon{ width:68px; height:68px; flex-shrink:0; display:grid; place-items:center; font-size:38px; border-radius:14px; overflow:hidden; box-shadow:0 0 0 2px rgba(255,212,90,0.6); }
.jp-compcard-icon img{ width:100%; height:100%; object-fit:cover; }
.jp-compcard-name{ font-size:22px; font-weight:900; line-height:1.25; }
.jp-compcard-sub{ margin-top:2px; font-size:13px; color:var(--sub); }
.jp-compcard-label{ margin-top:4px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.1); font-size:12.5px; font-weight:800; color:var(--sub); }
.jp-rcp-list{ display:flex; flex-direction:column; gap:5px; }
.jp-rcp{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); }
.jp-rcp-icon{ width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; font-size:24px; border-radius:8px; overflow:hidden; }
.jp-rcp-icon img{ width:100%; height:100%; object-fit:cover; }
.jp-rcp-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.jp-rcp-body b{ font-size:14.5px; font-weight:800; }
.jp-rcp-body small{ font-size:12.5px; line-height:1.35; color:#aab4c5; }
.jp-rcp-tag{ margin-left:6px; padding:1px 7px; border-radius:999px; background:#ff9a1f; color:#2b1400; font-style:normal; font-size:11px; font-weight:900; vertical-align:1px; }
.jp-rcp-tag.own{ background:rgba(255,255,255,0.16); color:#cfd8e6; }
.jp-rcp-need{ display:flex; align-items:center; gap:5px; flex-shrink:0; }
.jp-rcp-need i{ font-style:normal; font-size:15px; font-weight:800; color:var(--sub); }
.jp-rcp-need img{ width:28px; height:28px; border-radius:6px; object-fit:cover; }
.jp-rcp.hold{ border-color:#ff9a1f; background:rgba(255,154,31,0.13); }
.jp-rcp.own{ opacity:.45; }
@media (max-width:640px){ .jp-buy-item > .jp-compcard{ width:100%; } .jp-compcard-name{ font-size:19px; } }
/* 상점 증강·카드팩 줄이 4칸일 때 (구인수의 격노검 · 루난의 허리케인) */
@media (min-width:1001px){
  .jp-shop-grid.n4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (min-width:641px) and (max-width:1000px){
  .jp-shop-grid.n4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* 점수 연출: 스테이지 효과도 그 칸에서 띠링 (+배수/×배수 말풍선) */
#stageRule{ position:relative; }
#stageRule .jp-trigger{ bottom:-10px; font-size:14px; }
/* 개발자 모드: 스테이지 이동 */
.jp-dev-warp{ align-items:center; }
.jp-dev-warp input, .jp-dev-warp select{ flex:1; min-width:0; width:60px; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.25); background:#0d1422; color:#fff; font-family:inherit; font-size:14px; font-weight:800; }
.jp-dev-warp span{ color:#cfd6e4; font-weight:900; }

/* ---------- 역할군 · 포지션 (2026-10-12) ---------- */
/* 캐릭터 카드 아래 두 칸: 왼쪽 역할군 / 오른쪽 포지션 (고르기 전엔 점선 빈칸) */
.jp-roles{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jp-role-slot{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:74px; padding:8px 4px 6px; border-radius:12px;
  border:1.5px dashed rgba(255,255,255,0.18); background:rgba(0,0,0,0.2); color:var(--sub);
}
.jp-role-slot small{ font-size:11.5px; font-weight:800; }
.jp-role-slot.on{ border-style:solid; border-color:rgba(255,212,90,0.55); background:rgba(255,212,90,0.07); color:#f3e6bd; cursor:help; }
.jp-role-icon{ width:42px; height:42px; display:grid; place-items:center; font-size:28px; }
.jp-role-icon img{ width:100%; height:100%; object-fit:contain; }
.jp-role-tip{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:210px; padding:10px 12px;
  border-radius:12px; background:#0d1524; border:1px solid rgba(255,212,90,0.5); box-shadow:0 10px 26px rgba(0,0,0,0.6);
  text-align:left; font-size:13px; line-height:1.5; color:#e6ecf5; white-space:pre-line;
}
.jp-role-tip b{ font-size:15px; }
.jp-role-tip i{ margin-left:6px; font-style:normal; font-size:11px; font-weight:800; color:var(--sub); }
.jp-role-tip em{ display:block; margin-top:5px; padding-top:5px; border-top:1px dashed rgba(255,255,255,0.15); font-style:normal; font-size:12px; color:#ffd45a; }
@media (hover:hover){ .jp-role-slot.on:hover .jp-role-tip{ display:block; } .jp-role-slot.on:hover{ z-index:60; } }
.jp-role-slot .jp-trigger{ bottom:-8px; }
@media (max-width:1000px){ .jp-role-slot{ min-height:56px; flex-direction:row; gap:8px; } .jp-role-icon{ width:32px; height:32px; font-size:22px; } }

/* 고르기 창 */
.jp-rolepick{ z-index:1450; }
.jp-rolepick-box{ max-width:min(1080px, 100%); text-align:center; border:1px solid color-mix(in srgb, var(--region) 55%, transparent); box-shadow:0 0 44px color-mix(in srgb, var(--region) 22%, transparent); }
.jp-rolepick-sub{ font-size:13px; font-weight:800; letter-spacing:2px; color:var(--region); }
.jp-rolepick-box .jp-modal-title{ font-size:32px; letter-spacing:3px; }
.jp-rolepick-box .jp-modal-sub{ margin-top:4px; color:var(--sub); font-size:14px; }
.jp-rolepick-grid{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; margin:22px 0 20px; }
.jp-rolepick-card{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 10px 16px; min-height:230px;
  border-radius:16px; border:2px solid rgba(255,255,255,0.12); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#e6ecf5; cursor:pointer; font-family:inherit; transition:transform .12s, border-color .12s, background .12s;
}
.jp-rolepick-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.35); }
.jp-rolepick-card.selected{ border-color:var(--region); background:color-mix(in srgb, var(--region) 16%, transparent); box-shadow:0 0 22px color-mix(in srgb, var(--region) 35%, transparent); }
.jp-rolepick-icon{ width:76px; height:76px; display:grid; place-items:center; font-size:50px; }
.jp-rolepick-icon img{ width:100%; height:100%; object-fit:contain; }
.jp-rolepick-name{ font-size:21px; font-weight:900; }
.jp-rolepick-desc{ font-size:14px; line-height:1.55; color:#cfd8e6; white-space:pre-line; word-break:keep-all; }
.jp-rolepick-box #roleTakeBtn{ min-width:200px; padding:14px 20px; font-size:18px; }
@media (max-width:900px){ .jp-rolepick-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .jp-rolepick-card{ min-height:0; padding:14px 8px; } .jp-rolepick-icon{ width:52px; height:52px; font-size:36px; } }
/* 지역 정복 화면: 왕관 대신 그 지역 아이콘 */
.jp-victory-crown{ min-height:0; }
.jp-region-icon.victory{ width:110px; height:110px; object-fit:contain; filter:drop-shadow(0 0 18px color-mix(in srgb, var(--region, #ffd45a) 70%, transparent)); }

/* [내 증강] 창에서 바로 팔기 (2026-10-12): 전리품·팩을 고르는 중에도 열 수 있게 맨 위로 */
#augBookModal, #deckModal, #handsModal{ z-index:1500; }
#buyModal.jp-top{ z-index:1600; }
#augBookModal.sellable .jp-aug-pick.compact{ cursor:pointer; }
#augBookModal.sellable .jp-aug-pick.compact:hover{ transform:translateY(-4px); box-shadow:0 0 0 2px #ffd45a, 0 0 18px rgba(255,212,90,0.45); }
#augBookModal .jp-replace-sell{ margin-top:auto; padding:4px 10px; border-radius:999px; background:rgba(255,212,90,0.16); color:#ffd45a; font-size:12.5px; font-weight:800; text-align:center; }
#augBookModal .jp-replace-sell.off{ background:rgba(255,255,255,0.08); color:var(--sub); }
/* 새로고침 단축키 표시 (R = 증강, D = 카드팩) */
.jp-side-btn .jp-key{ display:block; width:max-content; margin:8px auto 0; padding:1px 8px; border-radius:5px; border:1px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.3); font-family:'Orbitron',var(--font); font-size:11px; font-weight:800; color:var(--sub); }
@media (hover:none){ .jp-side-btn .jp-key{ display:none; } }

/* =====================================================================
   시작 화면 · 캐릭터 선택 · 캐릭터 상세 · 게임 오버: 상점과 같은 롤 클라이언트 컨셉 (2026-10-12)
   어두운 남색 판 + 얇은 금테 + 청록 포인트, 각진 모서리. 색은 상점(#shopScreen)과 같은 값
   ===================================================================== */
#titleScreen, #pickScreen, #overScreen, #heroModal{
  --lol-gold:#c8aa6e; --lol-gold-d:#785a28; --lol-gold-dd:#463714; --lol-text:#f0e6d2; --lol-sub:#a09b8c;
  --lol-teal:#0ac8b9; --lol-teal-d:#005a82; --lol-bg:#010a13; --lol-bg2:#0a1428;
}
/* ---- 공통: 금테 판 (시작 · 게임 오버) ---- */
#titleScreen, #overScreen{
  max-width:560px; margin:26px auto 0; padding:38px 30px 34px; text-align:center;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(10,200,185,0.08), transparent 62%),
    linear-gradient(180deg, rgba(10,20,40,0.94), rgba(1,10,19,0.97));
  border:1px solid var(--lol-gold-d);
  box-shadow:inset 0 0 0 1px rgba(1,10,19,0.9), inset 0 0 0 2px rgba(200,170,110,0.12), 0 14px 46px rgba(0,0,0,0.55);
}
#titleScreen::before, #titleScreen::after, #overScreen::before, #overScreen::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%); width:200px; height:2px;
  background:linear-gradient(90deg, transparent, var(--lol-gold), transparent);
}
#titleScreen::before, #overScreen::before{ top:-1px; }
#titleScreen::after, #overScreen::after{ bottom:-1px; }

/* ---- 공통: 롤 버튼 ---- */
#titleScreen .btn, #pickScreen .btn, #overScreen .btn, #heroModal .btn{
  border-radius:0; font-weight:800; letter-spacing:.06em; text-shadow:none;
  background:#1e2328; color:var(--lol-text); border:1px solid var(--lol-gold-d); box-shadow:none;
  transition:background .15s, border-color .15s, box-shadow .15s, color .15s, transform .1s;
}
#titleScreen .btn:hover:not(:disabled), #pickScreen .btn:hover:not(:disabled), #overScreen .btn:hover:not(:disabled), #heroModal .btn:hover:not(:disabled){
  background:#262c33; border-color:var(--lol-gold); box-shadow:0 0 12px rgba(200,170,110,0.28); transform:none; filter:none;
}
/* 주 버튼(새 게임 · 다시 하기 · 이 캐릭터로 시작 · 다시 뽑기): 청록 테 */
#titleScreen .btn.btn-solid, #pickScreen .btn.btn-solid, #overScreen .btn.btn-solid, #heroModal .btn.btn-solid{
  color:#cdfafa; border:2px solid; border-image:linear-gradient(180deg, #0ac8b9, #005a82) 1;
  background:linear-gradient(180deg, #17313a, #0d1f28);
}
#titleScreen .btn.btn-solid:hover:not(:disabled), #pickScreen .btn.btn-solid:hover:not(:disabled), #overScreen .btn.btn-solid:hover:not(:disabled), #heroModal .btn.btn-solid:hover:not(:disabled){
  background:linear-gradient(180deg, #0f3b45, #0b2530); box-shadow:0 0 18px rgba(10,200,185,0.42); color:#fff;
}
#titleScreen .btn:disabled, #pickScreen .btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- 시작 화면 ---- */
.jp-title-season{ font-family:'Orbitron',var(--font); font-size:12px; font-weight:700; letter-spacing:.42em; color:var(--lol-teal); text-indent:.42em; }
#titleScreen .page-title{
  margin:10px 0 0; font-size:clamp(40px, 7vw, 58px); letter-spacing:.06em;
  background:linear-gradient(180deg, #f0e6d2, #c8aa6e 68%, #9a8249); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#titleScreen .page-title span{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:inherit; -webkit-text-fill-color:currentColor; }
#titleScreen .page-desc{ margin:14px auto 0; max-width:420px; font-size:14px; line-height:1.7; color:var(--lol-sub); }
#titleScreen .page-desc::before{ content:''; display:block; width:120px; height:1px; margin:0 auto 14px; background:linear-gradient(90deg, transparent, var(--lol-gold-d), transparent); }
#titleScreen .jp-best{ margin-top:16px; color:var(--lol-gold); font-size:14px; }
#titleScreen .jp-best:empty{ display:none; }
/* 버튼은 세로로 한 줄씩: 새 게임(가장 큼) → 이어하기 → 챌린지 → 규칙 */
#titleScreen .jp-title-btns{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:26px; }
#titleScreen .jp-title-btns .btn{ width:min(300px, 100%); margin:0; padding:13px 20px; font-size:16px; }
#titleScreen #newRunBtn{ order:1; padding:17px 20px; font-size:19px; letter-spacing:.16em; }
#titleScreen #continueBtn{ order:2; }
#titleScreen .jp-challenge-btn{
  display:block; width:min(300px, 100%); min-width:0; margin:10px auto 6px; padding:13px 20px; font-size:16px;
  color:var(--lol-gold); border:1px solid var(--lol-gold); background:linear-gradient(180deg, #2a2415, #17140c);
}
#titleScreen .jp-challenge-btn:hover:not(:disabled){ background:linear-gradient(180deg, #3a3119, #201b0f); box-shadow:0 0 16px rgba(200,170,110,0.4); color:#f0e6d2; }
#titleScreen .jp-challenge-btn:disabled{ color:#6f6a5c; border-color:#3a3528; background:#14161a; opacity:1; }
#titleScreen .jp-challenge-note{ color:var(--lol-sub); font-size:12.5px; margin-bottom:14px; }
#titleScreen .jp-rules-btn{ margin-top:0; padding:8px 18px; font-size:13px; color:var(--lol-sub); border-color:var(--lol-gold-dd); background:transparent; }

/* ---- 캐릭터 선택 ---- */
#pickScreen{ text-align:center; padding-top:14px; }
#pickScreen .jp-pick-title{
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:clamp(22px, 3.2vw, 30px); font-weight:900; letter-spacing:.12em;
  background:linear-gradient(180deg, #f0e6d2, #c8aa6e 70%, #a0884f); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#pickScreen .jp-pick-title::before, #pickScreen .jp-pick-title::after{ content:''; flex:0 1 150px; height:1px; }
#pickScreen .jp-pick-title::before{ background:linear-gradient(90deg, transparent, var(--lol-gold-d)); }
#pickScreen .jp-pick-title::after{ background:linear-gradient(90deg, var(--lol-gold-d), transparent); }
#pickScreen .jp-pick-grid{ gap:16px; margin:26px auto 24px; }
/* 카드: 아치 → 각진 금테 판. 캐릭터 색은 아래 얇은 줄과 마우스 올렸을 때 빛으로만 */
#pickScreen .jp-hero{
  position:relative; gap:0; padding:10px 10px 0; border-radius:0; color:var(--lol-text);
  background:linear-gradient(180deg, #0f1c2c, #060e17);
  border:1px solid var(--lol-gold-d);
  box-shadow:inset 0 0 0 1px rgba(1,10,19,0.9), 0 8px 22px rgba(0,0,0,0.45);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
#pickScreen .jp-hero:hover{
  transform:translateY(-6px); border-color:var(--lol-gold);
  box-shadow:inset 0 0 0 1px rgba(1,10,19,0.9), 0 0 0 1px rgba(200,170,110,0.35), 0 16px 34px color-mix(in srgb, var(--char-color) 26%, transparent);
}
#pickScreen .jp-hero-art{ border-radius:0; border:1px solid var(--lol-gold-dd); aspect-ratio:3 / 4; }
#pickScreen .jp-hero-art::after{ height:42%; background:linear-gradient(0deg, rgba(6,14,23,0.92), transparent); }
#pickScreen .jp-hero-name{
  width:calc(100% + 20px); margin:0 -10px; padding:13px 8px 14px; font-size:19px; font-weight:900; letter-spacing:.1em; color:var(--lol-text);
  border-top:1px solid var(--lol-gold-dd);
  background:linear-gradient(180deg, rgba(200,170,110,0.07), transparent);
  box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--char-color) 75%, transparent);
}
#pickScreen .jp-hero:hover .jp-hero-name{ color:#fff; }
/* 네 모서리 금색 꺾쇠 */
#pickScreen .jp-hero::before{
  content:''; position:absolute; inset:-1px; pointer-events:none; opacity:0; transition:opacity .18s;
  background:
    linear-gradient(var(--lol-gold), var(--lol-gold)) left top / 16px 2px no-repeat, linear-gradient(var(--lol-gold), var(--lol-gold)) left top / 2px 16px no-repeat,
    linear-gradient(var(--lol-gold), var(--lol-gold)) right top / 16px 2px no-repeat, linear-gradient(var(--lol-gold), var(--lol-gold)) right top / 2px 16px no-repeat,
    linear-gradient(var(--lol-gold), var(--lol-gold)) left bottom / 16px 2px no-repeat, linear-gradient(var(--lol-gold), var(--lol-gold)) left bottom / 2px 16px no-repeat,
    linear-gradient(var(--lol-gold), var(--lol-gold)) right bottom / 16px 2px no-repeat, linear-gradient(var(--lol-gold), var(--lol-gold)) right bottom / 2px 16px no-repeat;
}
#pickScreen .jp-hero:hover::before{ opacity:1; }
#pickScreen .jp-pick-btns{ gap:12px; }
#pickScreen .jp-pick-btns .btn{ min-width:150px; padding:11px 18px; font-size:14.5px; }
@media (max-width:640px){
  #pickScreen .jp-hero{ flex-direction:row; align-items:stretch; padding:8px; text-align:left; }
  #pickScreen .jp-hero-art{ width:84px; }
  #pickScreen .jp-hero-name{ width:auto; margin:0; display:flex; align-items:center; padding:0 14px; border-top:0; background:none; box-shadow:none; }
  #pickScreen .jp-pick-title::before, #pickScreen .jp-pick-title::after{ display:none; }
}

/* ---- 캐릭터 상세 창 ---- */
#heroModal .jp-modal-box{
  border-radius:0; border:1px solid var(--lol-gold-d);
  background:radial-gradient(520px 240px at 50% 0%, rgba(10,200,185,0.08), transparent 62%), linear-gradient(180deg, rgba(10,20,40,0.98), rgba(1,10,19,0.99));
  box-shadow:inset 0 0 0 1px rgba(1,10,19,0.9), inset 0 0 0 2px rgba(200,170,110,0.12), 0 18px 50px rgba(0,0,0,0.6);
}
#heroModal .jp-hero-art{ border-radius:0; border:1px solid var(--lol-gold-d); }
#heroModal .jp-hero-detail-name{
  margin:4px 0 10px; font-size:24px; font-weight:900; letter-spacing:.1em;
  background:linear-gradient(180deg, #f0e6d2, #c8aa6e 70%, #a0884f); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#heroModal .jp-abil-list{ padding-top:10px; border-top:1px solid var(--lol-gold-dd); }
#heroModal .jp-abil-text{ color:#d9d0bd; }
#heroModal .jp-ability-kind{ border-radius:0; background:#1e2328; border:1px solid var(--lol-gold-d); color:var(--lol-gold); }
#heroModal .jp-ability-kind.active{ border-color:var(--lol-teal-d); color:#8fe9e2; background:#0d1f28; }
#heroModal .jp-skill-ico{ border-radius:0; box-shadow:0 0 0 1px var(--lol-gold-d); }
#heroModal .jp-active-cd{ color:var(--lol-sub); }
#heroModal .jp-hero-detail-btns .btn{ padding:13px 10px; font-size:15px; }

/* ---- 게임 오버 ---- */
#overScreen{ padding-top:40px; }
#overScreen .jp-over-title{ font-size:clamp(30px, 5vw, 40px); font-weight:900; letter-spacing:.1em; color:#e0575f; text-shadow:0 0 22px rgba(224,87,95,0.3); }
#overScreen .jp-over-stage{ margin-top:14px; font-size:22px; font-weight:800; color:var(--lol-text); }
#overScreen .jp-over-stage::before{ content:''; display:block; width:120px; height:1px; margin:0 auto 14px; background:linear-gradient(90deg, transparent, var(--lol-gold-d), transparent); }
#overScreen .jp-over-detail{ margin:10px 0 0; color:var(--lol-sub); font-size:14px; line-height:1.6; }
#overScreen .btn-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:26px; }
#overScreen .btn-row .btn{ min-width:150px; padding:13px 20px; font-size:15.5px; margin:0; }
/* 지역 정복으로 끝낸 판: 빨간 제목 대신 금색 */
#overScreen.win .jp-over-title{ color:transparent; background:linear-gradient(180deg, #f0e6d2, #c8aa6e 70%, #a0884f); -webkit-background-clip:text; background-clip:text; text-shadow:none; }
#heroModal .jp-abil-row{ border-radius:0; border-color:var(--lol-gold-dd); }

/* 전리품 고르기 창(공허의 씨앗 등): 마우스를 올릴 때 창이 커졌다 작아졌다 하던 것 (2026-10-12)
   카드가 커지며(scale) 목록이 넘침 → 스크롤바가 생김 → 폭이 줄어 줄이 바뀜 → 다시 안 넘침 … 이 되풀이됐음.
   스크롤바 자리를 늘 비워 두고, 안쪽 카드는 커지지 않게(바깥 버튼만 살짝 떠오름), 5장이 한 줄에 들어가게 창을 넓힘 */
.jp-loot-pickmodal .jp-modal-box{ max-width:min(1180px, 100%); }
.jp-lootpick-grid{ scrollbar-gutter:stable both-edges; overflow-x:hidden; padding:16px 10px 12px; }
.jp-lootpick-opt .jp-aug-pick, .jp-lootpick-opt .jp-aug-pick:hover:not(:disabled){ transform:none; }

/* ---------- 아이템 고정 + 재료 알림 (2026-10-12) ---------- */
.jp-pin-btn{ width:100%; padding:10px; font-size:14px; }
.jp-pin-btn.on{ border-color:#ffd45a; color:#ffd45a; background:rgba(255,212,90,0.1); }
.jp-gbrow-tag.pin{ background:rgba(255,212,90,0.2); color:#ffd45a; }
/* 상점 재료 칸: 고정한 아이템의 재료면 금빛으로 깜빡 + 📌 */
.jp-comp-offer.pinned{ border-color:#ffd45a !important; animation:jpPinPulse 1.3s ease-in-out infinite; }
.jp-comp-offer.pinned::after{ content:'📌'; position:absolute; right:-8px; top:-10px; font-size:20px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
@keyframes jpPinPulse{ 0%, 100%{ box-shadow:0 0 10px rgba(255,212,90,0.35); } 50%{ box-shadow:0 0 24px rgba(255,212,90,0.85); } }
body.jp-calm .jp-comp-offer.pinned{ animation:none; box-shadow:0 0 16px rgba(255,212,90,0.6); }
/* 알림 팝업: 화면 위 가운데에서 내려옴, 6초 뒤 사라짐 (누르면 재료 칸으로) */
.jp-pin-toast{
  position:fixed; left:50%; top:74px; z-index:1700; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; max-width:min(520px, calc(100vw - 24px)); padding:12px 20px 12px 14px; text-align:left;
  font-family:inherit; color:#f0e6d2; cursor:pointer;
  background:linear-gradient(180deg, #13212f, #060e17); border:1px solid #c8aa6e;
  box-shadow:0 0 0 1px rgba(1,10,19,0.9) inset, 0 0 26px rgba(255,212,90,0.4), 0 12px 30px rgba(0,0,0,0.6);
  animation:jpPinToastIn .35s ease-out;
}
.jp-pin-toast.out{ opacity:0; transform:translate(-50%, -14px); transition:opacity .3s, transform .3s; }
@keyframes jpPinToastIn{ from{ opacity:0; transform:translate(-50%, -24px); } to{ opacity:1; transform:translateX(-50%); } }
.jp-pin-toast-icon{ width:58px; height:58px; flex-shrink:0; display:grid; place-items:center; font-size:34px; border:1px solid #785a28; overflow:hidden; }
.jp-pin-toast-icon img{ width:100%; height:100%; object-fit:cover; }
.jp-pin-toast-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.jp-pin-toast-body small{ font-size:12px; font-weight:700; color:#ffd45a; }
.jp-pin-toast-body b{ font-size:18px; font-weight:900; }
.jp-pin-toast-body > span{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; color:#cfc6b3; }
.jp-pin-toast-body > span img{ width:22px; height:22px; object-fit:cover; vertical-align:middle; margin-right:4px; }
.jp-pin-toast-body > span i{ font-style:normal; }
.jp-pin-toast-body em{ font-style:normal; font-size:13px; font-weight:800; color:#5fe59a; }

/* ---------- 리산드라가 얼린 증강: 증강 줄 제자리에 얼음 낀 칸 (2026-10-14) ---------- */
.jp-aug.frozen-aug{
  position:relative; cursor:help;
  border-color:#9fe4ff !important;
  background:linear-gradient(160deg, rgba(150,220,255,0.28), rgba(40,90,140,0.35)) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,0.35) inset, 0 0 16px rgba(127,212,255,0.6) !important;
  animation:jpIceIn .45s ease-out;
}
.jp-aug.frozen-aug .jp-aug-icon, .jp-aug.frozen-aug .jp-aug-name{ filter:saturate(.25) brightness(.85) hue-rotate(170deg); opacity:.8; }
.jp-aug.frozen-aug::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.35) 44%, transparent 50%),
    linear-gradient(60deg, transparent 58%, rgba(255,255,255,0.22) 62%, transparent 66%),
    linear-gradient(180deg, rgba(190,235,255,0.22), rgba(120,190,240,0.1));
}
.jp-aug-ice{
  position:absolute; left:50%; top:38%; transform:translate(-50%, -50%); z-index:3; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:2px; font-size:30px; line-height:1; filter:drop-shadow(0 0 8px #fff);
}
.jp-aug-ice b{ padding:2px 9px; border-radius:999px; background:#0b3a5c; border:1px solid #9fe4ff; color:#dff6ff; font-size:11.5px; font-weight:900; white-space:nowrap; filter:none; }
.jp-aug-tip-frozen{ margin:4px 0 6px; padding:5px 8px; border-radius:8px; background:rgba(127,212,255,0.16); color:#bfeaff; font-size:12.5px; font-weight:800; }
@keyframes jpIceIn{ 0%{ transform:scale(1.12); box-shadow:0 0 34px #fff; } 100%{ transform:none; } }
body.jp-calm .jp-aug.frozen-aug{ animation:none; }
/* 얼어붙은 칸: 증강 이름은 그대로 읽히게, 얼음 표시는 아이콘 위 + 오른쪽 위 꼬리표 */
.jp-aug.frozen-aug .jp-aug-name{ filter:none; opacity:1; color:#dff6ff; position:relative; z-index:4; }
.jp-aug-ice{ left:auto; right:4px; top:16px; transform:none; font-size:18px; }
.jp-aug-ice b{ position:absolute; right:calc(50% - 4px); top:-25px; transform:translateX(50%); font-size:10.5px; padding:1px 8px; }
.jp-dev-note{ font-size:11.5px; color:#ff9a8a; }

/* =====================================================================
   챌린지 입장 화면 (2026-10-14): 어두운 장막 + 금빛 광선 + 금테 판. 세 종목 · 규칙 · [도전 시작]
   ===================================================================== */
.jp-gate{
  position:fixed; inset:0; z-index:1800; display:grid; place-items:center; padding:18px; overflow-x:hidden; overflow-y:auto;
  background:radial-gradient(900px 600px at 50% 40%, rgba(40,28,6,0.86), rgba(1,6,12,0.97) 70%);
  opacity:0; transition:opacity .3s ease;
}
.jp-gate.show{ opacity:1; }
.jp-gate.out{ opacity:0; pointer-events:none; }
/* 뒤에서 천천히 도는 금빛 광선 */
.jp-gate-rays{
  position:absolute; left:50%; top:42%; width:1400px; height:1400px; margin:-700px 0 0 -700px; pointer-events:none; opacity:.5;
  background:repeating-conic-gradient(from 0deg, rgba(200,170,110,0.13) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle, #000 0%, transparent 62%); mask:radial-gradient(circle, #000 0%, transparent 62%);
  animation:jpGateSpin 60s linear infinite;
}
@keyframes jpGateSpin{ to{ transform:rotate(360deg); } }
.jp-gate-box{
  position:relative; width:min(680px, 100%); padding:34px 30px 28px; text-align:center; color:#f0e6d2;
  background:radial-gradient(600px 260px at 50% 0%, rgba(200,170,110,0.14), transparent 65%), linear-gradient(180deg, rgba(14,22,36,0.97), rgba(2,8,16,0.99));
  border:1px solid #785a28;
  box-shadow:inset 0 0 0 1px rgba(1,10,19,0.9), inset 0 0 0 2px rgba(200,170,110,0.14), 0 0 60px rgba(200,170,110,0.22), 0 24px 70px rgba(0,0,0,0.7);
  transform:translateY(26px) scale(.94); opacity:0; transition:transform .5s cubic-bezier(.2,1.2,.3,1), opacity .35s ease;
}
.jp-gate.show .jp-gate-box{ transform:none; opacity:1; }
/* 위아래 금선이 가운데에서 양쪽으로 퍼짐 */
.jp-gate-box::before, .jp-gate-box::after{
  content:''; position:absolute; left:50%; height:2px; width:78%; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, #f0e6d2, #c8aa6e, #f0e6d2, transparent);
}
.jp-gate-box::before{ top:-1px; } .jp-gate-box::after{ bottom:-1px; }
.jp-gate.show .jp-gate-box::before, .jp-gate.show .jp-gate-box::after{ animation:jpGateLine .9s .25s ease-out backwards; }
@keyframes jpGateLine{ from{ width:0; } }
/* 문장: 도는 고리 두 개 + 트로피 */
.jp-gate-ring{ position:relative; width:104px; height:104px; margin:0 auto 12px; display:grid; place-items:center; }
.jp-gate-ring i{ position:absolute; inset:0; border-radius:50%; border:2px solid transparent; border-top-color:#c8aa6e; border-bottom-color:#785a28; animation:jpGateSpin 5s linear infinite; }
.jp-gate-ring i + i{ inset:12px; border-top-color:#0ac8b9; border-bottom-color:#005a82; animation-duration:3.4s; animation-direction:reverse; }
.jp-gate-ring span{ font-size:44px; filter:drop-shadow(0 0 16px rgba(255,212,90,0.75)); animation:jpGatePulse 2.2s ease-in-out infinite; }
@keyframes jpGatePulse{ 50%{ transform:scale(1.1); filter:drop-shadow(0 0 26px rgba(255,212,90,1)); } }
.jp-gate-season{ font-family:'Orbitron',var(--font); font-size:12px; font-weight:700; letter-spacing:.4em; text-indent:.4em; color:#0ac8b9; }
.jp-gate-title{
  margin-top:8px; font-size:clamp(34px, 6vw, 50px); font-weight:900; letter-spacing:.1em; line-height:1.15;
  background:linear-gradient(180deg, #fff6dc, #c8aa6e 62%, #8a7340); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jp-gate-sub{ margin-top:8px; font-size:14.5px; color:#a09b8c; }
/* 세 종목 칸: 아래에서 차례로 올라옴 */
.jp-gate-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:22px 0 16px; }
.jp-gate-tile{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 6px 12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--region) 16%, #0b1622), #060e17);
  border:1px solid color-mix(in srgb, var(--region) 55%, transparent); border-top:3px solid var(--region);
}
/* 기본은 보이는 상태 -- 애니메이션이 꺼져 있어도(애니메이션 줄이기) 칸이 사라지지 않게 */
.jp-gate.show .jp-gate-tile{ animation:jpGateRise .5s var(--d) ease-out backwards; }
@keyframes jpGateRise{ from{ opacity:0; transform:translateY(18px); } }
body.jp-calm .jp-gate.show .jp-gate-tile{ animation:none; }
.jp-gate-tile img{ width:50px; height:50px; object-fit:contain; margin-bottom:4px; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--region) 70%, transparent)); }
.jp-gate-tile b{ font-size:17px; font-weight:900; color:var(--region); }
.jp-gate-tile small{ font-size:11.5px; color:#a09b8c; }
.jp-gate-tile span{ margin-top:6px; padding:2px 10px; font-size:12.5px; font-weight:800; color:#f0e6d2; background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12); }
.jp-gate-rules{ list-style:none; margin:0; padding:14px 16px; text-align:left; background:rgba(0,0,0,0.3); border:1px solid #463714; }
.jp-gate-rules li{ position:relative; padding:5px 0 5px 20px; font-size:13.5px; line-height:1.5; color:#bdb5a3; }
.jp-gate-rules li::before{ content:'◆'; position:absolute; left:0; top:6px; font-size:10px; color:#c8aa6e; }
.jp-gate-rules b{ margin-right:8px; color:#f0e6d2; }
.jp-gate-rules li.warn b, .jp-gate-rules li.warn::before{ color:#ff8a7a; }
.jp-gate-msg{ min-height:20px; margin-top:10px; font-size:14px; font-weight:800; color:#ff8a7a; }
.jp-gate-btns{ display:flex; gap:12px; margin-top:8px; }
.jp-gate-btns button{ font-family:inherit; cursor:pointer; border-radius:0; transition:background .15s, box-shadow .15s, border-color .15s, color .15s; }
.jp-gate-back{ flex:0 0 34%; padding:15px 10px; font-size:15px; font-weight:800; color:#a09b8c; background:#1e2328; border:1px solid #463714; }
.jp-gate-back:hover:not(:disabled){ color:#f0e6d2; border-color:#785a28; }
.jp-gate-go{
  flex:1; position:relative; overflow:hidden; padding:17px 10px; font-size:20px; font-weight:900; letter-spacing:.22em; text-indent:.22em; color:#1a1405;
  background:linear-gradient(180deg, #ffe9a8, #c8aa6e 55%, #a0843f); border:1px solid #fff2c9;
  box-shadow:0 0 22px rgba(255,212,90,0.45); animation:jpGateGlow 1.8s ease-in-out infinite;
}
@keyframes jpGateGlow{ 50%{ box-shadow:0 0 38px rgba(255,212,90,0.85); } }
/* 버튼 위를 훑고 지나가는 빛 */
.jp-gate-go::after{ content:''; position:absolute; top:0; bottom:0; left:-40%; width:30%; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); animation:jpGateSweep 2.6s ease-in-out infinite; }
@keyframes jpGateSweep{ 0%, 55%{ left:-40%; } 100%{ left:120%; } }
.jp-gate-go:hover:not(:disabled){ background:linear-gradient(180deg, #fff3cc, #dcbf80 55%, #b3954c); }
.jp-gate-go:disabled, .jp-gate-back:disabled{ cursor:default; opacity:.7; animation:none; }
/* 입장: 판이 커지며 화면이 금빛으로 번쩍 */
.jp-gate.enter .jp-gate-box{ transform:scale(1.06); transition:transform .6s ease-in; }
.jp-gate.enter::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 45%, #fff6dc, #c8aa6e 40%, transparent 75%); animation:jpGateFlash .65s ease-in forwards; pointer-events:none; }
@keyframes jpGateFlash{ from{ opacity:0; } to{ opacity:1; } }
body.jp-calm .jp-gate-rays, body.jp-calm .jp-gate-ring i, body.jp-calm .jp-gate-ring span, body.jp-calm .jp-gate-go, body.jp-calm .jp-gate-go::after{ animation:none; }
@media (max-width:560px){
  .jp-gate-box{ padding:24px 16px 20px; }
  .jp-gate-ring{ width:80px; height:80px; } .jp-gate-ring span{ font-size:34px; }
  .jp-gate-tile img{ width:38px; height:38px; } .jp-gate-tile b{ font-size:14.5px; }
  .jp-gate-go{ font-size:17px; letter-spacing:.12em; text-indent:.12em; }
}
/* 시작 화면의 챌린지 버튼: 열려 있을 때 금빛으로 */
#titleScreen .jp-challenge-btn:not(:disabled){ box-shadow:0 0 14px rgba(200,170,110,0.3); }

/* 버전이 달라져 새로고침하기 직전에 잠깐 뜨는 안내 */
.jp-update{ position:fixed; inset:0; z-index:2500; display:grid; place-items:center; background:rgba(1,6,12,0.86); animation:jpUpdIn .25s ease-out; }
@keyframes jpUpdIn{ from{ opacity:0; } }
.jp-update-box{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 38px; text-align:center; color:#f0e6d2; background:linear-gradient(180deg, #13212f, #060e17); border:1px solid #c8aa6e; box-shadow:0 0 34px rgba(200,170,110,0.3); }
.jp-update-box i{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(200,170,110,0.25); border-top-color:#c8aa6e; animation:jpGateSpin .8s linear infinite; }
.jp-update-box b{ font-size:18px; font-weight:900; }
.jp-update-box span{ font-size:13.5px; color:#a09b8c; }

/* 스테이지 경고 창 (카사딘: 액티브 1번 제한) -- 그 스테이지 1라운드에 들어갈 때 한 번 */
.jp-stagewarn{ z-index:1350; }
.jp-stagewarn-box{
  max-width:440px; text-align:center; border-radius:0; color:#f0e6d2;
  background:radial-gradient(520px 220px at 50% 0%, rgba(224,87,95,0.16), transparent 62%), linear-gradient(180deg, rgba(20,14,22,0.98), rgba(6,6,14,0.99));
  border:1px solid #e0575f; box-shadow:0 0 44px rgba(224,87,95,0.3), 0 20px 50px rgba(0,0,0,0.65);
  animation:jpWarnIn .35s cubic-bezier(.2,1.3,.3,1);
}
@keyframes jpWarnIn{ from{ transform:scale(.86); opacity:0; } }
.jp-stagewarn-mark{ font-size:46px; line-height:1; color:#ff8a7a; filter:drop-shadow(0 0 14px rgba(255,120,110,0.7)); }
.jp-stagewarn-sub{ margin-top:8px; font-size:12.5px; font-weight:800; letter-spacing:.14em; color:#a09b8c; }
.jp-stagewarn-title{ margin-top:4px; font-size:28px; font-weight:900; letter-spacing:.06em; color:#ff8a7a; }
.jp-stagewarn-desc{ margin:14px 0 8px; padding:14px 12px; font-size:17px; font-weight:800; line-height:1.6; background:rgba(0,0,0,0.35); border:1px solid rgba(224,87,95,0.35); }
.jp-stagewarn-note{ font-size:13.5px; line-height:1.55; color:#a09b8c; }
.jp-stagewarn-box .btn{ margin-top:16px; min-width:160px; padding:13px 20px; font-size:16px; border-radius:0; }

/* ---- 규칙 설명서 시즌 2 전체 반영 + 보스 도감 (2026-10-17) ---- */
.jp-title-books{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
#titleScreen .jp-title-books .jp-rules-btn{ margin:0; }
.jp-rules-h{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:20px 0 8px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,0.1); }
.jp-rules-h b{ font-size:17px; color:#fff; }
.jp-rules-h small{ color:var(--sub); font-size:13px; }
.jp-rules-btnrow{ margin-top:8px; }
.jp-rules-btnrow .btn{ display:inline-flex; margin:0; }
.jp-rules-key{ display:inline-block; min-width:22px; padding:0 6px; border-radius:6px; border:1px solid rgba(255,255,255,0.35); border-bottom-width:3px; background:rgba(255,255,255,0.08); font-weight:900; font-size:13px; text-align:center; line-height:20px; }
/* 그림 목록 */
.jp-rg{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.jp-rg-item{ display:flex; gap:11px; align-items:center; padding:9px 11px; border-radius:12px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.06); border-left:3px solid var(--c, rgba(255,255,255,0.12)); }
.jp-rg-item > img{ flex:0 0 auto; width:52px; height:52px; object-fit:contain; border-radius:8px; }
.jp-rg-item > img.seal{ border-radius:50%; border:2px solid var(--c); padding:2px; box-sizing:border-box; background:rgba(0,0,0,0.4); }
.jp-rg-text{ min-width:0; font-size:13.5px; line-height:1.5; }
.jp-rg-text b{ display:block; color:#fff; font-size:14.5px; }
.jp-rg-text small{ display:block; color:var(--sub); font-size:12px; }
.jp-rg-text .d{ margin-top:2px; color:var(--text); }
.jp-rg.packs .jp-rg-item > img{ width:64px; height:92px; }
.jp-rg.cards .jp-rg-item > .jp-card{ flex:0 0 auto; width:50px; height:auto; aspect-ratio:691 / 1056; --pip:10px; cursor:default; }
.jp-rg.compact{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.jp-rg.compact .jp-rg-item{ padding:7px 9px; gap:8px; }
.jp-rg.compact .jp-rg-item > img{ width:38px; height:38px; }
.jp-rg.compact .jp-rg-text{ font-size:12.5px; }
.jp-rg.compact .jp-rg-text b{ font-size:13.5px; }
.jp-rules-chroma.jp-ed-badge{ flex:0 0 auto; width:52px; height:52px; border-radius:10px; font-size:12px; font-weight:900; }
/* 상자 */
.jp-rules-chests{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.jp-rules-chests > div{ display:grid; grid-template-columns:72px minmax(0, 1fr); column-gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); }
.jp-rules-chests > div.sup{ border-color:rgba(200,170,110,0.55); background:rgba(200,170,110,0.08); }
.jp-rules-chests img{ grid-row:span 2; width:72px; height:72px; object-fit:contain; }
.jp-rules-chests b{ color:#fff; font-size:15px; }
.jp-rules-chests > div > span{ font-size:13px; line-height:1.5; color:var(--sub); }
/* 지역 띠 */
.jp-rules-region{ position:relative; overflow:hidden; margin-bottom:10px; border-radius:14px; border:1px solid var(--c); background:#0b0f18; }
.jp-rules-region > img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.3; }
.jp-rules-region::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,8,14,0.92) 30%, rgba(5,8,14,0.55)); }
.jp-rules-region-in{ position:relative; z-index:1; display:grid; grid-template-columns:60px minmax(0, 1fr); gap:14px; padding:14px 16px; }
.jp-rules-region-in > img{ width:60px; height:60px; object-fit:contain; }
.jp-rules-region-name{ font-size:20px; font-weight:900; color:var(--c); }
.jp-rules-region-name small{ margin-left:8px; font-size:13px; font-weight:700; color:var(--sub); }
.jp-rules-region ul{ margin:6px 0 0; padding-left:18px; font-size:14px; line-height:1.75; }
.jp-rules-bossmini{ display:inline-flex; align-items:center; gap:4px; font-weight:800; white-space:nowrap; }
.jp-rules-bossmini img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
/* 보스 도감 */
#bossBookModal{ z-index:1600; }
#bossBookModal .jp-bossbook-box{ width:100%; max-width:min(1040px, 100%); max-height:calc(100vh - 40px); display:flex; flex-direction:column; text-align:left; padding:22px 24px 18px; }
.jp-bossbook-lead{ margin-top:8px; font-size:13.5px; color:var(--sub); }
.jp-bossbook-lead b{ color:var(--text); }
.jp-bossbook-tab{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.jp-bossbook-tab img{ width:22px; height:22px; object-fit:contain; }
.jp-bossbook-tab.on{ background:var(--c); border-color:var(--c); color:#061018; }
.jp-bossbook-grid{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; align-content:start; padding:2px 4px 2px 0; }
.jp-boss-card{ display:flex; flex-direction:column; gap:7px; padding:12px; border-radius:14px; background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.08); }
.jp-boss-card.big{ border-color:color-mix(in srgb, var(--c) 60%, transparent); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(0,0,0,0.32)); }
.jp-boss-card.now{ box-shadow:0 0 0 2px #ffd45a, 0 0 18px rgba(255,212,90,0.35); }
.jp-boss-top{ display:flex; align-items:center; gap:10px; }
.jp-boss-top img{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; object-fit:cover; border:2px solid var(--c); }
.jp-boss-top b{ display:block; font-size:16px; color:#fff; }
.jp-boss-top small{ display:block; font-size:12px; color:var(--sub); line-height:1.4; }
.jp-boss-top em{ margin-left:auto; align-self:flex-start; padding:2px 7px; border-radius:999px; background:#ffd45a; color:#1a1300; font-style:normal; font-size:11px; font-weight:900; white-space:nowrap; }
.jp-boss-fx{ padding:7px 9px; border-radius:10px; font-size:13px; line-height:1.5; }
.jp-boss-fx > span{ display:block; }
.jp-boss-fx i{ display:block; font-style:normal; font-size:11.5px; font-weight:800; margin-bottom:2px; }
.jp-boss-fx.stage{ background:rgba(94,200,255,0.08); border:1px solid rgba(94,200,255,0.22); }
.jp-boss-fx.stage i{ color:#7fd4ff; }
.jp-boss-fx.rule{ background:rgba(216,54,90,0.1); border:1px solid rgba(216,54,90,0.3); }
.jp-boss-fx.rule i{ color:#ff7a92; }
.jp-boss-say{ font-size:12px; font-style:italic; color:var(--sub); line-height:1.45; }
@media (max-width:900px){ .jp-bossbook-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px){
  .jp-rg, .jp-rules-chests{ grid-template-columns:minmax(0, 1fr); }
  .jp-rg.compact{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .jp-bossbook-grid{ grid-template-columns:minmax(0, 1fr); }
  #rulesModal .jp-rules-box, #bossBookModal .jp-bossbook-box{ min-width:0; box-sizing:border-box; }
  .jp-rules-tab{ min-width:0; flex:1 1 calc(20% - 6px); padding:8px 2px; }
  #bossBookModal .jp-bossbook-box{ padding:16px 14px 14px; }
  .jp-rules-region-in{ grid-template-columns:44px minmax(0, 1fr); gap:10px; padding:12px; }
  .jp-rules-region-in > img{ width:44px; height:44px; }
}