/* ===== 스토리 모드 ===== */
#story-screen{position:fixed;inset:0;z-index:30;overflow-y:auto;background:radial-gradient(ellipse at top,#3b1d0e 0%,#0c0a09 60%);color:#fef3c7}
.story-wrap{max-width:960px;margin:0 auto;padding:12px 12px 40px;min-height:100%}
.story-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.story-top-title{font-weight:900;letter-spacing:.05em}
.story-back,.story-mycards,.story-mini{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:700}
.story-mini{padding:2px 10px;margin-left:6px;background:#059669;border-color:#34d399}
.story-btn{padding:12px 20px;border-radius:16px;background:linear-gradient(180deg,#fbbf24,#d97706);color:#1c1917;font-weight:900;box-shadow:0 0 18px rgba(251,191,36,.35)}
.story-chapter-sub{font-size:12px;letter-spacing:.35em;color:#fbbf24;font-weight:800}
.story-chapter-big{font-size:clamp(40px,9vw,88px);font-weight:900;letter-spacing:.04em;line-height:1.05;background:linear-gradient(180deg,#fff7ed,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(245,158,11,.45))}
.story-chapter-name{font-size:18px;color:#e7e5e4;margin-top:6px}
.story-intro{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;animation:storyFade .7s ease-out}
@keyframes storyFade{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.story-opening{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.story-op-ph{padding:40px 20px;border:1px dashed rgba(255,255,255,.25);border-radius:24px;width:100%}
.story-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.story-pick{padding:8px;border-radius:18px;background:rgba(0,0,0,.4);border:2px solid rgba(251,191,36,.25);transition:.15s}
.story-pick:hover{border-color:#fbbf24;transform:translateY(-4px)}
.story-card{background:#18181b;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);text-align:center;padding-bottom:6px}
.story-card-img{position:relative}
.story-card-img img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.story-rar{position:absolute;left:6px;top:6px;padding:0 6px;border-radius:6px;background:rgba(0,0,0,.7);font-size:11px;font-weight:900}
.story-card-name{font-weight:800;font-size:14px;margin-top:4px}
.story-card-stats{display:flex;justify-content:space-around;font-size:11px;font-weight:700}
.story-map{display:flex;align-items:center;justify-content:center;margin:34px 0 20px;flex-wrap:nowrap}
.story-node{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
.story-node-dot{width:54px;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;background:#27272a;border:3px solid #52525b;color:#a1a1aa}
.story-node.boss .story-node-dot{width:66px;height:66px}
.story-node.done .story-node-dot{background:#065f46;border-color:#34d399;color:#ecfdf5}
.story-node.next .story-node-dot{background:#b45309;border-color:#fbbf24;color:#fff;animation:storyPulse 1.4s infinite}
@keyframes storyPulse{50%{box-shadow:0 0 0 8px rgba(251,191,36,.25)}}
.story-node-label{font-size:11px;font-weight:800;color:#d6d3d1;white-space:nowrap}
.story-path{flex:1 1 auto;max-width:90px;min-width:10px;height:4px;background:#3f3f46;margin-bottom:22px;border-radius:4px}
.story-path.on{background:#34d399}
.story-status{text-align:center;font-size:14px;display:flex;flex-direction:column;gap:6px}
.story-dlg{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer}
.story-dlg-stage{flex:1;min-height:0;position:relative;display:flex;align-items:flex-end}
.story-portrait{max-height:62vh;max-width:70%;border-radius:18px;object-fit:cover;box-shadow:0 0 40px rgba(0,0,0,.6);animation:storyFade .35s}
.story-portrait.right{margin-left:auto}
.story-dlg-box{flex-shrink:0;max-height:100%;overflow-y:auto;background:rgba(12,10,9,.92);border:2px solid rgba(251,191,36,.5);border-radius:18px;padding:14px 16px 10px;min-height:120px}
.story-dlg-name{display:inline-block;margin-top:-30px;margin-bottom:6px;padding:2px 14px;border-radius:999px;background:#b45309;color:#fff;font-weight:900}
.story-dlg-text{font-size:16px;line-height:1.6}
.story-dlg-next{text-align:right;font-size:11px;color:#a8a29e}
.story-dlg-skip{position:absolute;top:4px;right:4px;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.5);font-size:12px}
.story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.story-equip{display:flex;gap:4px;justify-content:center;align-items:center;font-size:10px;margin-top:4px;opacity:.6}
.story-equip span{padding:1px 5px;border:1px dashed #71717a;border-radius:6px}
.story-equip em{font-style:normal;color:#a1a1aa}
.story-reward .story-card{width:150px;box-shadow:0 0 28px rgba(251,191,36,.5)}
.story-pop-panel{background:#18181b;border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:18px;width:100%;max-width:420px;color:#fafafa;text-align:center;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain}
/* 팝업이 화면보다 길면 패널 안에서 스크롤, 확인 버튼 줄은 아래에 고정 */
.story-pop-actions{position:sticky;bottom:-18px;margin:12px -18px -18px;padding:10px 18px 18px;background:linear-gradient(180deg,rgba(24,24,27,.85),#18181b 30%);z-index:20}
.story-pop-panel .story-card{max-width:160px;margin:0 auto}
.story-chip{padding:4px 10px;border-radius:999px;background:#27272a;font-size:12px;white-space:nowrap;border:1px solid transparent}
.story-chip.on{background:#065f46;border-color:#34d399}
.story-pm{width:32px;height:32px;border-radius:10px;background:#3f3f46;font-weight:900}
.story-pm:disabled{opacity:.3}
.story-toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:70;padding:10px 18px;border-radius:14px;background:rgba(0,0,0,.85);border:1px solid #fbbf24;color:#fde68a;font-weight:800;font-size:14px;pointer-events:none;animation:storyFade .3s}
@media (max-width:640px){.story-select{gap:6px}.story-node-dot{width:42px;height:42px;font-size:16px}.story-node.boss .story-node-dot{width:50px;height:50px}.story-node-label{font-size:9px}.story-card-stats{font-size:9px}}
.story-intro-text{white-space:pre-line;line-height:1.5}
.story-portrait.sp{border-radius:0;box-shadow:none;object-fit:contain;max-height:66vh;margin-bottom:-40px;transform:scale(1.12);transform-origin:bottom center;-webkit-mask-image:radial-gradient(closest-side at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 46%,#000 62%,transparent 100%);filter:drop-shadow(0 0 30px rgba(245,158,11,.12))}
/* ===== 일일 카드 뽑기 ===== */
.story-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;margin-left:4px;border-radius:999px;background:#ef4444;color:#fff;font-size:10px;font-style:normal;font-weight:900;animation:storyPulse 1.4s infinite}
.story-dup{position:absolute;margin-top:-26px;right:6px;padding:0 6px;border-radius:6px;background:#f59e0b;color:#111;font-size:11px;font-weight:900}
.story-card{position:relative;isolation:isolate}   /* 카드 안 배지(z-index)가 카드 밖으로 새지 않게 → 스티키 하단 버튼 위로 안 뜸 */
.story-dup-inline{padding:0 6px;border-radius:6px;background:#f59e0b;color:#111;font-weight:900}
.gacha-stage{position:relative;width:170px;height:227px;margin:16px auto 10px;perspective:900px}
.gacha-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.9s cubic-bezier(.3,1.4,.5,1)}
.gacha-card.flip{transform:rotateY(180deg)}
.gacha-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.gacha-back{display:flex;align-items:center;justify-content:center;font-size:56px;background:repeating-linear-gradient(45deg,#3f1d0b,#3f1d0b 10px,#1c1917 10px,#1c1917 20px);border:3px solid #b45309}
.gacha-front{transform:rotateY(180deg);background:#18181b;border:3px solid #a1a1aa}
.gacha-front img{width:100%;height:100%;object-fit:cover}
.gacha-name{position:absolute;bottom:0;left:0;right:0;padding:16px 4px 6px;background:linear-gradient(transparent,#000);font-weight:900}
.gacha-stage::before{content:'';position:absolute;inset:-14px;border-radius:24px;opacity:0;transition:opacity .6s .6s;pointer-events:none}
.gacha-stage[class*="g-"]::before{opacity:1}
.g-n::before{box-shadow:0 0 22px 4px rgba(212,212,216,.45)}
.g-r::before{box-shadow:0 0 28px 8px rgba(132,204,22,.6)}
.g-hr::before{box-shadow:0 0 34px 10px rgba(59,130,246,.7)}
.g-sr::before{box-shadow:0 0 44px 14px rgba(192,132,252,.85);animation:gachaPulse 1.2s 1.2s infinite}
.g-ur::before{inset:-22px;background:conic-gradient(from 0deg,#f43f5e,#f59e0b,#facc15,#22c55e,#38bdf8,#a855f7,#f43f5e);filter:blur(16px);animation:gachaSpin 2.2s linear infinite}
.g-ur .gacha-front{border-color:#facc15;box-shadow:0 0 30px #fde047}
.g-sr .gacha-front{border-color:#c084fc}.g-hr .gacha-front{border-color:#3b82f6}.g-r .gacha-front{border-color:#84cc16}
.g-ur .gacha-card.flip{animation:gachaShake .5s .9s}
@keyframes gachaSpin{to{transform:rotate(360deg)}}
@keyframes gachaPulse{50%{opacity:.55}}
@keyframes gachaShake{20%{transform:rotateY(180deg) scale(1.08)}60%{transform:rotateY(180deg) scale(.98)}100%{transform:rotateY(180deg) scale(1)}}
.g-text-n{color:#e4e4e7}.g-text-r{color:#84cc16}.g-text-hr{color:#3b82f6}.g-text-sr{color:#c084fc}.g-text-ur{background:linear-gradient(90deg,#f43f5e,#facc15,#38bdf8,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.story-dup{top:6px;right:6px;margin-top:0;z-index:2}
.g-ur::before{inset:-10px;filter:blur(12px)}
.story-top .story-mycards,.story-top .story-back{white-space:nowrap}
@media (max-width:640px){.story-top-title{display:none}.story-top .story-mycards,.story-top .story-back{padding:5px 9px;font-size:11px}}

/* ----- 스탯 분배 이름 탭: 스크롤바 숨김 + 좌우 화살표 ----- */
.story-tabwrap { display: flex; align-items: center; gap: 4px; margin-bottom: .5rem; }
.story-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 2px 0; }
.story-tabs::-webkit-scrollbar { display: none; }
.story-tabs > * { flex: 0 0 auto; }
.story-tab-arr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9999px; background: #3f3f46; color: #fff; font-size: 18px; line-height: 1; font-weight: 900; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.story-tab-arr:hover:not(:disabled) { background: #10b981; color: #000; }
.story-tab-arr:disabled { opacity: 0; pointer-events: none; }
.story-tabwrap.fit .story-tab-arr { display: none; }

/* ----- 카드 레벨 · 분해 ----- */
.story-owned { cursor: pointer; position: relative; }
.story-owned:hover .story-card { border-color: rgba(52,211,153,.6); }
.story-lv { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; font-size: 10px; margin-top: 3px; padding: 0 2px; }
.story-lv b { color: #fde68a; font-size: 11px; }
.story-lv span { color: #a1a1aa; }
.story-lv em { color: #f472b6; font-style: normal; font-weight: 900; }
.story-exp { height: 4px; border-radius: 9px; background: #27272a; overflow: hidden; margin: 2px 2px 0; }
.story-exp i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #34d399); transition: width .6s; }
.story-cpts { position: absolute; top: 26px; left: 4px; z-index: 2; background: #0ea5e9; color: #fff; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 9px; }
.story-explist { max-width: 22rem; margin: 1rem auto 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.story-exprow { display: flex; gap: 8px; align-items: center; background: rgba(39,39,42,.7); border: 1px solid #3f3f46; border-radius: 10px; padding: 6px 8px; }
.story-exprow img { width: 36px; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.story-exprow.up { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.35); animation: story-lvpulse 1.2s ease-out 2; }
.story-lvup-tag { font-size: 10px; font-weight: 900; color: #fbbf24; margin-top: 2px; }
@keyframes story-lvpulse { 50% { box-shadow: 0 0 22px rgba(251,191,36,.8); } }
.story-lvup-fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.story-lvup-fx span { font-size: clamp(2rem, 9vw, 4rem); font-weight: 900; letter-spacing: .05em; color: #fde68a; text-shadow: 0 0 18px #f59e0b, 0 0 40px #f59e0b; animation: story-lvup 1.6s ease-out forwards; }
@keyframes story-lvup { 0% { transform: scale(.4) translateY(30px); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
.story-hint { margin-top: 10px; font-size: 12px; color: #fcd34d; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.35); border-radius: 10px; padding: 6px 10px; }
.story-warn { margin-top: 8px; font-size: 12px; color: #fca5a5; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); border-radius: 10px; padding: 6px 10px; }
.story-target-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.story-target { display: flex; gap: 8px; align-items: center; background: #27272a; border: 1px solid #3f3f46; border-radius: 10px; padding: 6px 8px; }
.story-target:hover { border-color: #34d399; }
.story-target img { width: 34px; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px; }
.story-pop-panel button:disabled { opacity: .45; cursor: not-allowed; }
.story-pop-panel .story-tab-arr:disabled { opacity: 0; }

/* ----- 오프닝 영상 (전체 화면) ----- */
.story-ovp { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.story-ovp video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.story-ovp-skip { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); padding: 10px 18px; border-radius: 9999px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 800; font-size: 14px; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.story-ovp-skip.on { opacity: 1; pointer-events: auto; }
.story-ovp-tap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.story-ovp-tap.hidden { display: none; }
.story-ovp-tap button { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: 54px; line-height: 1; }
.story-ovp-tap button span { font-size: 16px; font-weight: 800; background: rgba(251,191,36,.9); color: #000; padding: 8px 16px; border-radius: 9999px; }

/* ----- 레벨 스탯 보너스 · 일괄 분해 ----- */
.story-lvpct { color: #fbbf24; font-style: normal; font-weight: 900; }
.story-lv .story-lvpct { font-size: 10px; }
span.story-lvpct { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.4); border-radius: 9999px; padding: 1px 8px; }
.story-statrows { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.story-statrows > div { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.story-statrows span { width: 4.2rem; font-weight: 700; }
.story-statrows b { min-width: 3rem; font-weight: 900; }
.story-statrows small { font-size: 10px; color: #a1a1aa; }
.story-statrows i { font-style: normal; }
.story-select-box { width: 100%; margin-top: 4px; background: #27272a; border: 1px solid #3f3f46; border-radius: 10px; padding: 8px 10px; font-size: 14px; color: #fff; }
.story-bulk-list { max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.story-bulk-row { display: flex; align-items: center; gap: 8px; background: #27272a; border: 1px solid #3f3f46; border-radius: 10px; padding: 5px 8px; cursor: pointer; }
.story-bulk-row.on { border-color: #f87171; background: rgba(239,68,68,.12); }
.story-bulk-row.lock { opacity: .45; cursor: not-allowed; }
.story-bulk-row input { width: 18px; height: 18px; accent-color: #ef4444; pointer-events: none; }
.story-bulk-row img { width: 30px; aspect-ratio: 3/4; object-fit: cover; border-radius: 5px; }
.story-qty { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.story-qty button { width: 22px; height: 22px; border-radius: 6px; background: #3f3f46; font-weight: 900; }
.story-bulk-sum { margin-top: 8px; font-size: 13px; background: rgba(39,39,42,.8); border-radius: 10px; padding: 8px 10px; }
.story-bulk-row, .story-statrows { text-align: left; }
.story-mini.story-mini-red { background: #b91c1c; border-color: #f87171; }

/* ----- EX 합성 ----- */
.story-expct { color: #fca5a5; font-weight: 900; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.45); border-radius: 9999px; padding: 1px 8px; }
.story-exbadge { position: absolute; top: 28px; right: 4px; z-index: 2; background: linear-gradient(135deg, #ef4444, #991b1b); color: #fff; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 6px; box-shadow: 0 0 8px rgba(239,68,68,.6); }
.story-merge-mini { display: block; width: calc(100% - 8px); margin: 4px auto 2px; padding: 3px 0; border-radius: 8px; font-size: 11px; font-weight: 800; background: linear-gradient(90deg, #dc2626, #f97316); color: #fff; }
.story-merge-btn { width: 100%; margin-top: 8px; padding: 10px 0; border-radius: 12px; font-weight: 900; background: linear-gradient(90deg, #dc2626, #f97316); color: #fff; box-shadow: 0 0 14px rgba(239,68,68,.35); }
.story-merge-calc { margin-top: 10px; font-size: 11px; color: #d4d4d8; background: rgba(39,39,42,.8); border-radius: 10px; padding: 6px 10px; text-align: left; }

/* ----- 카드 묶음(같은 카드 여러 장) · 합성 재료 ----- */
.story-group { display: flex; flex-direction: column; gap: 4px; }
.story-expand { display: block; width: calc(100% - 8px); margin: 3px auto 0; padding: 2px 0; font-size: 10px; font-weight: 800; color: #d4d4d8; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; }
.story-mat-list { display: flex; flex-wrap: wrap; gap: 6px; }
.story-mat { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 5px 8px; border-radius: 10px; background: #27272a; border: 1px solid #3f3f46; font-size: 12px; font-weight: 800; }
.story-mat small { font-size: 10px; color: #a1a1aa; font-weight: 600; }
.story-mat.on { border-color: #ef4444; background: rgba(239,68,68,.15); box-shadow: 0 0 10px rgba(239,68,68,.35); }
.story-pop-title { font-weight: 900; font-size: 16px; margin-bottom: 6px; }
.story-deckpick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 58vh; overflow-y: auto; padding: 4px; }
/* 필수 출전 줄은 스크롤 없이, 그 아래 고르기 목록은 남은 높이만큼 (필수 출전이 있으면 목록을 줄임) */
.story-deckpick.story-forced { max-height: none; overflow: visible; }
.story-forced ~ .story-deckpick { max-height: 34vh; max-height: 34dvh; }
.story-pop-panel .story-deckpick .story-card { max-width: none; }
.story-pick-card { position: relative; border-radius: 14px; border: 2px solid transparent; padding: 2px; transition: border-color .15s, opacity .15s; opacity: .6; }
.story-pick-card.on { border-color: #34d399; opacity: 1; box-shadow: 0 0 10px rgba(52,211,153,.4); }
.story-pick-check { position: absolute; top: 4px; right: 6px; background: #10b981; color: #000; font-style: normal; font-weight: 900; border-radius: 999px; width: 22px; height: 22px; line-height: 22px; font-size: 13px; z-index: 2; }
@media (min-width: 768px) { .story-pop-panel:has(.story-deckpick) { max-width: 640px; } .story-deckpick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.story-rule { font-size: 11px; color: #a1a1aa; line-height: 1.5; max-width: 560px; margin: 4px auto; }

/* ===== 스토리 필드 전투: 손패·드로우·용병 없음, 보스는 진영 안 ===== */
#game.story-field #me-hand, #game.story-field #hand-sort, #game.story-field #act-merc, #game.story-field #act-shuffle, #game.story-field #act-heal, #game.story-field .deck-info, #game.story-field #ai-handcards { display: none !important; }
/* 스토리 전투 모바일: 손패가 없어 아래 절반이 비고 필드 카드가 작게 떠 보이던 문제 → 필드가 남는 높이를 채움 (카드 크기는 장수와 관계없이 고정, 가운데 정렬) */
#game.story-field { min-height: 100dvh; }
#game.story-field #field-box { flex: 1 1 auto; justify-content: space-evenly; }
#game.story-field #ai-field, #game.story-field #me-field { align-items: center; }
}
/* 진영 칸 (수비대장·보스): 필드 위쪽 가운데, 원형 테두리, 다른 인재보다 크게 */
.base-slot { display: flex; justify-content: center; margin-bottom: -4px; }
.base-slot.hidden { display: none; }
.base-unit { position: relative; margin: 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; }
.base-ring { position: relative; width: 84px; height: 84px; border-radius: 9999px; padding: 3px; background: conic-gradient(#fde68a, #f59e0b, #b45309, #f59e0b, #fde68a); box-shadow: 0 0 14px rgba(251,191,36,.6); }
.base-img { width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; object-position: top; display: block; background: #18181b; }
.base-lv { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 9999px; background: #fbbf24; color: #000; font-size: 9px; font-weight: 900; white-space: nowrap; }
.base-sts { position: absolute; top: 4px; left: -6px; display: flex; flex-direction: column; font-size: 11px; line-height: 1.1; }
.base-name { margin-top: 5px; max-width: 100%; font-size: 10px; font-weight: 800; color: #fcd34d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.base-unit .hp-bar, .base-unit .mp-bar { width: 72px; }
.base-slot-me { margin: -4px 0 0; }
.base-tag { font-size: 9px; font-weight: 700; color: #a7f3d0; white-space: nowrap; }
.base-empty { opacity: .55; }
.base-empty .base-ring { background: repeating-conic-gradient(#52525b 0 10deg, #27272a 10deg 20deg); box-shadow: none; }
.base-ph { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.base-unit.swap-sel .base-ring, .base-unit.ready .base-ring { box-shadow: 0 0 0 3px #34d399, 0 0 14px rgba(52,211,153,.6); }
@media (min-width: 768px) {
  .base-unit, .base-ring { width: 120px; } .base-ring { height: 120px; }
  .base-name { font-size: 12px; } .base-unit .hp-bar, .base-unit .mp-bar { width: 100px; }
}
.boss-crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 18px; filter: drop-shadow(0 0 4px #f59e0b); pointer-events: none; }

.story-node-dot .story-node-ic { width: 1.6em; height: 1.6em; vertical-align: middle; }

/* ===== 챕터 탭 · 10페이즈 지도 · 루트 · 필수 출전 ===== */
.story-chtabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:10px 0 2px}
.story-chtab{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border-radius:999px;border:1px solid #52525b;background:#18181b;color:#d4d4d8;font-weight:800;font-size:13px;line-height:1.2}
.story-chtab small{font-size:10px;font-weight:500;color:#a1a1aa}
.story-chtab.on{border-color:#fbbf24;background:#78350f;color:#fde68a}
.story-chtab:disabled{opacity:.4;color:#71717a;border-color:#3f3f46;background:#0f0f11;cursor:not-allowed}
.story-map-row{margin:18px 0 6px}
.story-map-row + .story-map-row{margin-top:4px}
.story-route-tag{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:3px 10px;border-radius:999px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);font-size:12px;color:#fde68a}
.story-pick.on{outline:2px solid #fbbf24;outline-offset:2px;border-radius:14px}
.story-forced-h{font-size:12px;font-weight:800;color:#fde68a;margin:6px 0 4px;text-align:left}
.story-forced-h small{font-weight:500;color:#a1a1aa}
.story-pick-card.locked{cursor:default;outline:2px solid #38bdf8;outline-offset:-2px;border-radius:12px}
.story-forced{margin-bottom:6px}
/* ===== 스토리 메인 (허브) ===== */
/* 배경: img/story/hub/bg_pc.webp (16:9) / bg_m.webp (9:16). 파일이 없으면 아래 겹친 메인 배경이 보임 */
.story-hub-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25) 40%,rgba(0,0,0,.85)),url(../img/story/hub/bg_pc.webp) center/cover no-repeat,url(../img/main-landscape_v2.webp) center/cover no-repeat,#0c0a09}
@media (max-aspect-ratio:3/4),(max-width:600px){.story-hub-bg{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.25) 40%,rgba(0,0,0,.85)),url(../img/story/hub/bg_m.webp) center/cover no-repeat,url(../img/main-portrait_v3.webp) center/cover no-repeat,#0c0a09}}
.story-hub{position:relative;z-index:1;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.story-hub .main-btn{font-family:'Noto Sans KR',sans-serif}
.story-hub-go{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.9rem 1rem;margin-top:8vh}
.story-hub-go b{font-size:1.6rem;letter-spacing:.04em;color:#fde68a}
.story-hub-go small{font-size:.8rem;color:#e7d3a8;font-weight:500}
.story-hub-list{display:flex;flex-direction:column;gap:8px}
.story-hub-ch{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;padding:.55rem .8rem}
.story-hub-ch-t{font-weight:800}
.story-hub-ch-s{font-size:.8rem;color:#fcd34d;white-space:nowrap}
.story-hub-ch.locked .story-hub-ch-s{color:#a1a1aa}
.story-hub-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.story-hub-menu .main-btn{position:relative;padding:.6rem .2rem;font-size:.85rem;word-break:keep-all;line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:2px}
.story-hub-menu small{font-size:.65rem;color:#a1a1aa}
.story-shop{max-width:420px;margin:12px auto 0;text-align:center;max-height:none;overflow:visible}
/* ===== 상점 탭 · 소환권 · 특수 뽑기 결과 ===== */
.story-shop-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.story-shop-tabs button{position:relative;padding:.55rem .4rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-weight:800;color:#d4d4d8}
.story-shop-tabs button.on{background:linear-gradient(180deg,rgba(70,10,14,.95),rgba(22,3,5,.95));border-color:#d4a24a;color:#fde68a}
.story-ticket{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:999px;background:linear-gradient(180deg,#fcd34d,#b45309);color:#1c0a00;font-size:.75em;font-weight:900;box-shadow:0 0 0 1px rgba(0,0,0,.4) inset}
.story-hub-tk{font-size:.7rem;color:#fcd34d}
.story-rates{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;text-align:center;font-size:.8rem;background:rgba(255,255,255,.05);border-radius:10px;padding:6px}
.story-rates span{font-weight:900}.story-rates b{grid-row:2}
.story-tk-result{display:grid;gap:6px;margin:6px 0}
.story-tk-result.n1{grid-template-columns:minmax(0,150px);justify-content:center}
.story-tk-result.n10{grid-template-columns:repeat(5,1fr)}
.story-tk-card{position:relative;border-radius:8px;overflow:hidden;background:#111;font-size:10px;font-weight:700;opacity:0;animation:tkIn .35s forwards;border:2px solid #52525b}
.story-tk-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.story-tk-card div{padding:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-tk-card.g-r{border-color:#84cc16}.story-tk-card.g-hr{border-color:#3b82f6;box-shadow:0 0 10px #3b82f688}.story-tk-card.g-sr{border-color:#c084fc;box-shadow:0 0 12px #c084fcaa}.story-tk-card.g-ur{border-color:#facc15;box-shadow:0 0 16px #facc15cc}
@keyframes tkIn{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
/* 일괄 분해: 단계 표시 · EXP 받을 카드 고정 */
.story-bulk-steps{display:flex;gap:6px;justify-content:center;font-size:11px;margin:2px 0 8px}
.story-bulk-steps>*{padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#a1a1aa;font-weight:700}
.story-bulk-steps .on{background:rgba(52,211,153,.18);color:#6ee7b7}
.story-bulk-tgt{position:sticky;top:-18px;z-index:20;display:flex;gap:10px;align-items:center;margin:0 -4px 8px;padding:8px 10px;border-radius:14px;background:#14251d;border:1px solid #34d399;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.story-bulk-tgt img{width:56px;aspect-ratio:3/4;object-fit:cover;border-radius:8px}
.story-target.cur{border-color:#34d399}

/* 보유 카드 정렬 */
.story-sortbar{display:flex;justify-content:center;gap:6px;margin:0 0 10px}
.story-sortbar .story-chip{cursor:pointer}

/* 리더 스킬 · 분해 잠금 */
.story-leader-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;max-width:640px;margin:0 auto 10px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(180,120,20,.35),rgba(60,40,10,.35));border:1px solid rgba(251,191,36,.45);font-size:13px}
.story-leader-bar small{color:#fcd34d;font-size:11px;margin-left:2px}
.story-leader-bar .story-mini{flex-shrink:0}
.story-leader-eff{margin-top:10px;padding:8px 10px;border-radius:10px;background:rgba(39,39,42,.8);border:1px solid rgba(255,255,255,.1);font-size:12px;text-align:left}
.story-leader-eff.on{background:rgba(120,80,10,.35);border-color:rgba(251,191,36,.5)}
.story-leader-eff small{color:#fcd34d;margin-left:2px}
.story-leader-eff div{margin-top:2px;color:#fde68a}
.story-lockbadge{position:absolute;top:30px;right:6px;z-index:2;font-size:13px;background:rgba(0,0,0,.65);border-radius:999px;padding:1px 5px}
/* ===== 2026-10-22 batch A ===== */
.story-card[class*="rar-"]{border:2px solid var(--rc);background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 28%,#18181b),#18181b 55%)}
.story-own-tile{padding-bottom:4px}
.story-own-lv{font-size:12px;font-weight:800;color:#fde68a}
.story-own-leader{position:absolute;right:4px;bottom:4px;line-height:0}
.story-own-leader .ui-ic{width:18px;height:18px}
.rstars-sm{font-size:12px;top:3px}
.story-skn{position:absolute;right:5px;top:22px;z-index:3;font-size:11px;font-weight:900;padding:2px 6px;border-radius:7px;background:rgba(0,0,0,.75);color:#e9d5ff;border:1px solid rgba(216,180,254,.55);cursor:pointer}
.story-skn::before{content:'';position:absolute;inset:-8px}
.story-skn:active{transform:scale(.92)}
.story-own-tile .story-skn{top:auto;bottom:6px}
.story-pick-card.locked{position:relative}.story-skn-f{top:30px;right:9px}
.story-skpop{position:fixed;inset:0;z-index:9999}
.story-skpop-box{position:absolute;left:50%;top:50%;width:min(300px,calc(100vw - 16px));max-height:60vh;overflow:auto;padding:10px 12px;border-radius:14px;background:#18181b;border:1px solid rgba(216,180,254,.4);box-shadow:0 10px 30px rgba(0,0,0,.6);color:#f4f4f5;text-align:left}
.story-skpop-h{font-weight:900;font-size:14px;margin-bottom:6px;color:#fde68a}
.story-skpop-row+.story-skpop-row{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.story-skpop-n{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:13px}.story-skpop-n i{font-style:normal;font-size:10px;font-weight:800;padding:0 5px;border-radius:5px}.story-skpop-n i.act{background:#7c3aed}.story-skpop-n i.pas{background:#0f766e}.story-skpop-n small{font-size:10px;color:#a1a1aa}
.story-skpop-d{font-size:12px;line-height:1.45;color:#d4d4d8;margin-top:3px}
.story-curdeck{position:absolute;left:4px;bottom:4px;font-size:9px;font-weight:900;padding:1px 4px;border-radius:5px;background:#10b981;color:#052e16}
.story-detail-skills{text-align:left}
.story-bonds{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:0 4px 20px}
.story-bond{background:rgba(24,24,27,.9);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px}
.story-bond.full{border-color:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.35)}
.story-bond-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px}
.story-bond-n{font-size:12px;font-weight:900;color:#6ee7b7}
.story-bond-cards{display:flex;gap:6px;flex-wrap:wrap}
.story-bond-card{width:58px;text-align:center;font-size:10px;font-weight:700}
.story-bond-card img{width:58px;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:2px solid var(--rc,#52525b);display:block}
.story-bond-card.sil img{filter:brightness(0) contrast(1);opacity:.85;border-color:#3f3f46}
.story-bond-card.sil span{color:#71717a}
.story-bond-eff{margin-top:6px;font-size:11px;color:#fcd34d}
.story-pick .rstars-over{top:auto;bottom:24px;left:50%;transform:translateX(-50%)}
/* ===== 퀘스트: 시련의 탑 ===== */
.quest-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;max-width:460px;margin:.5rem auto 0;padding:.7rem 1rem;border-radius:14px;background:linear-gradient(135deg,#312e81,#1e1b4b);border:1px solid rgba(245,201,106,.5);color:#fde68a;font-weight:900;font-size:1.05rem}
.quest-btn small{font-weight:600;font-size:.72rem;color:#c7d2fe}.quest-btn:disabled{opacity:.6}
.q-head{text-align:center;margin:.4rem 0 .6rem;color:#fde68a}.q-head b{font-size:1.3rem}.q-sub{font-size:.72rem;color:#a1a1aa;margin-top:2px}
.q-wrap{display:grid;grid-template-columns:1fr 260px;gap:12px;align-items:start}
@media (max-width:720px){.q-wrap{grid-template-columns:1fr}.q-list{max-height:40vh}}
.q-cur{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.q-cur-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#fff}.q-cur-h b{font-size:1.25rem;color:#fde68a}.q-cur-h small{color:#a1a1aa}
.q-cur-sub{font-size:.75rem;color:#c4b5fd;margin:4px 0 8px}
.q-enemies{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.q-enemy{position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;border:2px solid #9ca3af;background:#0b0b12}
.q-enemy img{width:100%;height:100%;object-fit:cover}
.q-enemy.rar-R{border-color:#84cc16}.q-enemy.rar-HR{border-color:#3b82f6}.q-enemy.rar-SR{border-color:#a855f7}.q-enemy.rar-UR{border-color:#f59e0b}.q-enemy.rar-MR,.q-enemy.rar-LR{border-color:#ef4444}.q-enemy.rar-N{border-color:#9ca3af}
.q-rar{position:absolute;top:3px;left:3px;font-size:9px;font-weight:900;background:rgba(0,0,0,.7);color:#fff;padding:0 4px;border-radius:4px}
.q-lead{position:absolute;top:2px;right:3px;font-size:13px}.q-lv{position:absolute;right:3px;top:22px;font-size:9px;color:#fff;background:rgba(0,0,0,.6);padding:0 3px;border-radius:4px}
.q-en-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);color:#fff;text-align:center;padding:1px 2px;line-height:1.15}
.q-en-cap b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-en-cap small{font-size:9px;color:#fde68a}
.q-reward{margin:10px 0;font-size:.85rem;color:#fde68a}.q-reward .got{color:#4ade80}.q-reward .muted{color:#a1a1aa}
.q-go{width:100%}
.q-go:disabled{background:#3f3f46!important;color:#a1a1aa!important;box-shadow:none!important;cursor:not-allowed;opacity:.7}
.q-peek{display:flex;align-items:center;justify-content:center;gap:4px;margin:6px auto 0;padding:2px 12px;border:1px solid #3f3f46;border-radius:999px;background:transparent;color:#a1a1aa;font-size:12px}
.q-peek small{font-size:11px}
.q-list{display:flex;flex-direction:column;gap:3px;max-height:70vh;overflow-y:auto;padding-right:2px}
.q-row{display:grid;grid-template-columns:52px 30px 1fr 22px 44px 18px;align-items:center;gap:4px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);color:#e4e4e7;font-size:.78rem;text-align:left}
.q-row.on{outline:2px solid #f5c96a;background:rgba(245,201,106,.12)}.q-row.done .q-st{color:#4ade80}.q-row.next .q-st{color:#fde68a}.q-row.lock{opacity:.45}
.q-no{font-weight:800}.q-g{font-size:10px;font-weight:900;padding:0 4px;border-radius:4px;background:#374151;color:#fff;text-align:center}
.q-g.rar-R{background:#84cc16}.q-g.rar-HR{background:#3b82f6}.q-g.rar-SR{background:#a855f7}.q-g.rar-UR{background:#f59e0b}.q-g.rar-MR,.q-g.rar-LR{background:#ef4444}.q-g.rar-N{background:#9ca3af}
.q-rw{font-size:.72rem;color:#fde68a}.q-rw.got{opacity:.45;text-decoration:line-through}
/* 플레이어 레벨 · 행동력 (js/player.js) */
.vrp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#fff;white-space:nowrap}
.vrp-lv{background:linear-gradient(135deg,#f59e0b,#b45309);color:#111;font-weight:900;border-radius:999px;padding:2px 8px}
.vrp-st{background:rgba(0,0,0,.55);border:1px solid rgba(110,231,183,.5);border-radius:999px;padding:2px 9px}
.vrp-st b{color:#6ee7b7}.vrp-st small{margin-left:5px;color:#a1a1aa;font-size:10px}
.vrp-st.low{border-color:#f87171}.vrp-st.low b{color:#fca5a5}
.story-player-row{display:flex;justify-content:center;margin:6px 0 2px}
.story-pxp{margin-top:12px;font-size:13px;color:#e4e4e7}.story-pxp .bar{height:6px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;max-width:240px;margin:4px auto 0}.story-pxp .bar i{display:block;height:100%;background:#f59e0b}
.story-plvup{margin-top:6px;color:#fde68a;font-weight:900}
.story-drops{font-weight:800;color:#fde68a;font-size:14px}.story-drops .vr-cur{white-space:nowrap}
/* 카드 레벨업 · 합성 비용 (단계 E-4) */
.story-lvup-box{margin-top:10px;padding:10px;border-radius:12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.35)}
.story-lvup-box.max{text-align:center;font-size:12px;color:#fde68a}
.story-lvup-h{font-weight:900;font-size:13px;margin-bottom:6px;color:#fde68a}.story-lvup-h small{font-weight:600;color:#a1a1aa;font-size:10px;margin-left:4px}
.story-lvup-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:10px;background:#f59e0b;color:#111;font-size:13px}
.story-lvup-btn small{font-size:11px;font-weight:700}.story-lvup-btn.short{background:#3f3f46;color:#a1a1aa}
.story-lvup-have{font-size:11px;color:#a1a1aa;margin-top:6px;text-align:right}
.story-merge-cost{margin-top:8px;font-size:13px;color:#a5f3fc}.story-merge-cost.short{color:#fca5a5}
.story-merge-btn small{margin-left:4px;font-weight:700}

/* E-5 소탕 */
.story-sweep{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;max-width:560px;padding:8px 10px;border:1px solid rgba(250,204,21,.35);border-radius:12px;background:rgba(250,204,21,.06)}
.story-sweep.locked{color:#a1a1aa;font-size:12px;border-color:rgba(161,161,170,.3);background:none}
.story-sweep-h{font-weight:800;color:#fde047;font-size:13px;margin-right:2px}
.story-sweep-btn{min-width:34px;padding:4px 8px;border-radius:999px;background:#27272a;border:1px solid #facc15;color:#fde047;font-weight:800;font-size:12px}
.story-sweep-btn.boss{border-color:#f87171;color:#fca5a5}
.story-sweep-runs{display:flex;gap:8px;justify-content:center;margin-top:14px}
.story-sweep-runs .story-btn{display:flex;flex-direction:column;align-items:center;min-width:72px}
.story-sweep-runs .story-btn small{font-size:11px;opacity:.8}
.story-sweep-runs .story-btn.short{opacity:.4}
.story-sweep-res{margin-top:12px;display:grid;gap:6px}
.story-sweep-get{display:flex;justify-content:space-between;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.05)}
/* 시련의 탑 소탕 */
.q-sweep{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:8px;background:linear-gradient(180deg,#facc15,#d97706)!important;color:#1c1917!important}
.q-sweep small{font-size:.68rem;font-weight:600;opacity:.8}
.q-sweep-note{margin-top:8px;font-size:.75rem;color:#fca5a5;text-align:center}
.q-sw-prog{margin-top:10px;max-height:220px;overflow:auto;display:grid;gap:4px}
.q-sw-prog.small{max-height:150px;font-size:.78rem}
.q-sw-row{display:flex;justify-content:space-between;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.05)}
.q-sw-row.win span{color:#34d399}.q-sw-row.lose span{color:#f87171}
.q-sw-stop{margin-top:10px;text-align:center;font-weight:700;color:#fde68a}

/* 컴팩트 탑 버튼 */
.quest-btn{flex-direction:row!important;justify-content:center;gap:8px!important;padding:.45rem 1rem!important;margin:0 auto!important;font-size:.95rem}
.quest-btn .ui-ic{width:1.6em;height:1.6em}
/* ===== 컴팩트 UI: 그림 아이콘 위주 ===== */
.story-hub-menu{grid-template-columns:repeat(3,1fr)!important;gap:.4rem!important}
.story-hub-menu .main-btn{padding:.45rem .2rem!important;font-size:.72rem!important;gap:1px!important}
.story-hub-menu .main-btn>.ui-ic:first-child{display:block;width:30px;height:30px;margin:0 auto 1px}
.story-hub-menu .main-btn small{font-size:.62rem}
.story-hub-go small{font-size:.7rem}
.story-rule-ic{display:inline-flex;align-items:center;gap:4px;margin:4px auto;padding:3px 10px;border-radius:999px;font-size:11px;color:#a1a1aa;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.story-rule-ic .ui-ic{width:1.1em;height:1.1em}
.story-status{gap:2px!important}
.story-sweep-h .ui-ic,.q-sweep .ui-ic{width:1.3em;height:1.3em}
.story-lvup-h .ui-ic{width:1.3em;height:1.3em}
.q-head{margin:.2rem 0 .4rem}
.q-sub{font-size:.68rem}
.q-sweep{flex-direction:row!important;justify-content:center;gap:6px}
.mp-cur-ic .ui-ic{width:1.5em;height:1.5em}
.vr-cur .ui-ic{width:1.15em;height:1.15em}
.story-hub-menu .main-btn,.main-menu>#quest-btn{min-height:0!important;height:auto!important}
.main-menu>#quest-btn{padding:.35rem 1rem!important}
.main-menu>#quest-btn .ui-ic{width:1.9em;height:1.9em}
.main-menu>#quest-btn{max-width:none!important;width:100%}
/* ===== 카드 뽑기방: 어비스 게이트 ===== */
.gr-room{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#07060c}
.gr-room .gr-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.gr-room::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at var(--gate-x,50%) var(--gate-y,75%),transparent 0,transparent 18%,rgba(0,0,0,.35) 70%);pointer-events:none}
.gr-fx-img{position:absolute;max-width:none;pointer-events:none;opacity:0;mix-blend-mode:screen}
.gr-open{animation:grOpen .75s ease-out forwards}
.gr-open.out{animation:grOut .5s ease-in forwards}
.gr-rar{animation:grRar .55s cubic-bezier(.2,1.4,.4,1) forwards}
.gr-rar.settle{animation:none;opacity:.55;transition:opacity .8s}
.gr-rar-ur.settle,.gr-rar-mr.settle{opacity:.75}
@keyframes grOpen{0%{opacity:0;transform:scale(.35,.15)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes grOut{to{opacity:0;transform:scale(1.15)}}
@keyframes grRar{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:1;transform:scale(1)}}
.gr-room.flash-ur,.gr-room.flash-mr{animation:grShake .5s}
.gr-room.flash-sr{animation:grShake .35s}
@keyframes grShake{20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
.story-wrap:has(.gr-room)>*:not(.gr-room){position:relative;z-index:1}
.story-wrap:has(.gr-room) .story-top{background:linear-gradient(rgba(0,0,0,.55),transparent);border-radius:12px}
.gr-ui{max-width:520px!important;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 80px);margin-top:4px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.gr-tabs{display:flex;gap:6px;align-items:center;justify-content:center}
.gr-tabs button{position:relative;display:flex;align-items:center;gap:4px;padding:5px 12px;border-radius:999px;background:rgba(10,6,20,.6);border:1px solid rgba(168,85,247,.35);color:#e9d5ff;font-weight:800;font-size:13px;backdrop-filter:blur(3px)}
.gr-tabs button.on{border-color:#c084fc;box-shadow:0 0 12px rgba(168,85,247,.6);color:#fff}
.gr-tabs .ui-ic{width:1.5em;height:1.5em}
.gr-tabs .gr-ic{padding:5px 8px}
.gr-tabs .story-badge{position:absolute;top:-6px;right:-4px}
.gr-stage{flex:1;display:flex;align-items:center;justify-content:center;width:100%;padding:8px 0}
.gr-card{width:150px!important;height:200px!important;margin:0!important;filter:drop-shadow(0 0 18px rgba(168,85,247,.55));animation:grFloat 3.2s ease-in-out infinite}
@keyframes grFloat{50%{transform:translateY(-8px)}}
.gr-room.busy~* .gr-card,.story-wrap:has(.gr-room.busy) .gr-card{opacity:.15;transition:opacity .2s}
.gr-card .gacha-back{background:radial-gradient(circle at 50% 60%,rgba(168,85,247,.55),transparent 60%),url(../img/ui/gacha.webp) center/48% no-repeat,linear-gradient(160deg,#1e1033,#07060c);border:2px solid rgba(192,132,252,.7);font-size:0}
.gr-msg{min-height:1.6rem;font-size:14px;font-weight:800;text-shadow:0 1px 4px #000;text-align:center}
.gr-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;padding:6px 0 18px}
.gr-go{display:flex;align-items:center;gap:6px;padding:12px 26px;border-radius:999px;font-weight:900;font-size:17px;color:#fff;background:linear-gradient(180deg,#7c3aed,#4c1d95);border:1px solid #c4b5fd;box-shadow:0 0 22px rgba(139,92,246,.75),inset 0 1px 0 rgba(255,255,255,.3);text-shadow:0 1px 2px #000}
.gr-go small{display:inline-flex;align-items:center;gap:2px;font-size:12px;opacity:.9}
.gr-go .ui-ic{width:1.4em;height:1.4em}
.gr-go:disabled{filter:grayscale(.8) brightness(.6);box-shadow:none}
.gr-go10{background:linear-gradient(180deg,#db2777,#7e22ce)}
.gr-next{font-size:12px;color:#d8b4fe;text-shadow:0 1px 3px #000}
.gr-stage .story-tk-result{width:100%;max-width:520px;background:rgba(5,3,12,.55);border-radius:14px;padding:6px;backdrop-filter:blur(2px)}
.gr-stage .story-tk-result:empty{display:none}
.g-mr .gacha-front,.story-tk-card.g-mr{border-color:#ef4444;box-shadow:0 0 30px #f87171}
.g-mr::before{inset:-22px;background:radial-gradient(circle,#ef4444,transparent 70%);filter:blur(10px);animation:gachaPulse 1s infinite}
.g-text-mr{color:#f87171}
/* 스킬 레벨 (E-6) */
.sk-lv{display:inline-block;padding:0 5px;border-radius:6px;font-size:10px;font-weight:900;background:rgba(168,85,247,.25);color:#e9d5ff;border:1px solid rgba(168,85,247,.5)}
.sk-lv.max{background:rgba(245,158,11,.25);color:#fde68a;border-color:rgba(245,158,11,.6)}
.sk-up{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:rgba(245,158,11,.9);color:#000;font-weight:900;font-size:12px}
.sk-up img{width:16px;height:16px}
.sk-up.lock{background:rgba(63,63,70,.8);font-size:11px}
.sk-up-pop{text-align:center;min-width:220px}
.sk-up-img img{width:96px;height:96px;object-fit:cover;border-radius:16px;margin:0 auto;border:2px solid rgba(168,85,247,.6)}
.sk-up-name{font-weight:900;margin-top:6px}
.sk-up-lv{display:flex;gap:8px;justify-content:center;align-items:center;font-size:20px;font-weight:900;margin-top:4px}
.sk-up-lv .to{color:#fbbf24}
.sk-up-rows{font-size:13px;margin-top:4px;color:#d4d4d8}.sk-up-rows b{color:#86efac}
.sk-up-cost{font-size:13px;margin-top:8px}.sk-up-cost img{width:18px;height:18px;display:inline;vertical-align:-4px}.sk-up-cost .short{color:#f87171}.sk-up-cost small{color:#71717a}
.sk-up-go{margin-top:10px;width:100%;padding:10px;border-radius:12px;background:#f59e0b;color:#000;font-weight:900}.sk-up-go:disabled{opacity:.4}.sk-up-go img{width:18px;height:18px;display:inline;vertical-align:-4px}
/* 챕터 엔딩 영상 (YouTube) */
.story-video{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:12px}
.story-video-box{position:relative;width:min(100%,calc((100vh - 80px)*16/9));aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.story-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.story-video-tap{position:absolute;z-index:2;white-space:nowrap;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 28px;border-radius:999px;background:rgba(245,158,11,.95);color:#000;font-size:20px;font-weight:900;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.story-video-x{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:999px;background:rgba(39,39,42,.9);color:#fff;font-size:20px;font-weight:900;border:1px solid rgba(255,255,255,.25);z-index:301}
/* 승리·패배 조건 */
.story-cond{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.story-cond-box{position:relative;width:min(340px,100%);background:#18181b;border:1px solid rgba(245,158,11,.45);border-radius:18px;padding:14px 14px 12px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.story-cond-x{position:absolute;top:8px;right:10px;width:28px;height:28px;border-radius:999px;background:rgba(63,63,70,.8);font-weight:900}
.sc-h{font-weight:900;font-size:14px;color:#fde68a;margin-bottom:8px;padding-right:30px}
.sc-sec{border-radius:12px;padding:8px 10px;margin-top:6px}.sc-sec.win{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35)}.sc-sec.lose{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35)}.sc-sec.info{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3)}
.sc-t{font-size:11px;font-weight:900;color:#a1a1aa;margin-bottom:2px}
.sc-row{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;margin:3px 0}.sc-row small{display:block;font-size:11px;color:#a1a1aa}
.sc-ic{font-size:20px;line-height:1;width:24px;text-align:center;flex:none}
.sc-go{margin-top:10px;width:100%;padding:9px;border-radius:12px;background:#f59e0b;color:#000;font-weight:900}
.story-hub-vid{flex:none;font-size:18px;padding:2px 6px;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15)}
/* 내 카드 상세 (간단) */
.cd-stats{margin-top:6px;display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;border-radius:8px}
.cd-stats>div:not(.cd-more){display:flex;align-items:baseline;gap:8px;font-size:13px;white-space:nowrap}
.cd-stats span{flex:none;width:4.9rem;font-weight:700;white-space:nowrap}.cd-stats b{font-weight:900}.cd-stats i{font-style:normal}
.cd-stats .cd-brk{display:none;font-size:10px;color:#a1a1aa}
.cd-stats.open .cd-brk{display:inline}.cd-stats.open .cd-more{display:block;margin-top:2px;line-height:1.4}
.cd-lvup{margin-top:10px;display:flex;align-items:center;gap:6px;padding:6px;border-radius:12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.35)}
.cd-lvup-ic .ui-ic{width:1.4em;height:1.4em}
.cd-lvbtn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:4px;border-radius:9px;background:#f59e0b;color:#111;font-size:12px;line-height:1.2}
.cd-lvbtn small{font-size:10px;font-weight:700;white-space:nowrap}.cd-lvbtn.short{background:#3f3f46;color:#a1a1aa}
.cd-have{font-size:10px;color:#a1a1aa;text-align:right;line-height:1.35;white-space:nowrap}
.cd-leader{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:12px;color:#d4d4d8;padding:5px 8px;border-radius:9px;background:rgba(39,39,42,.8);white-space:nowrap;overflow:hidden}
.cd-leader span{overflow:hidden;text-overflow:ellipsis}.cd-leader.on{background:rgba(120,80,10,.35);color:#fde68a}
.cd-acts{margin-top:8px;display:flex;gap:6px;align-items:center}
.cd-ic{width:2.6rem;height:2.4rem;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:18px}
.cd-ic .ui-ic{width:1.4em;height:1.4em}.cd-ic.stats{background:#10b981}.cd-ic.discard{background:rgba(239,68,68,.8)}
.cd-ic:disabled,.cd-sm:disabled{opacity:.4}
.cd-sm{flex:1;height:2.4rem;border-radius:10px;background:#3f3f46;font-weight:700;font-size:12px;white-space:nowrap}.cd-sm.lead{background:rgba(245,158,11,.9);color:#111}
.cd-img{width:44%;max-width:12rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.cd-img img{box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.cd-sm.merge{background:linear-gradient(90deg,#dc2626,#f97316);color:#fff;flex:none;padding:0 10px}
.cd-sm .ui-ic{width:1.2em;height:1.2em;vertical-align:-3px}
/* ----- 허브 리디자인: 챕터 3칸 세로 선택 · 큰 카드 뽑기 배너 · 간단 메뉴 ----- */
.story-hub{gap:12px;padding-bottom:16px}
.story-hub-go{margin-top:0!important;padding:.7rem 1rem!important}
.hub-ch{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.hub-ch-arr{align-self:center;width:44px;height:26px;border-radius:999px;background:rgba(15,15,25,.7);border:1px solid rgba(253,230,138,.35);color:#fde68a;font-size:12px}
.hub-ch-arr:disabled{opacity:.25}
.hub-ch-slot{position:relative;display:flex;align-items:flex-end;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#14121c;text-align:left;color:#fff;min-width:0}
.hub-ch-slot.empty{border:none;background:none;height:0}
.hub-ch-slot.small{height:64px;opacity:.8}
.hub-ch-slot.big{height:min(42vh,300px);border-color:rgba(253,230,138,.6);box-shadow:0 0 24px rgba(251,191,36,.18)}
.hub-ch-slot.locked{filter:grayscale(.85) brightness(.6)}
.hub-ch-img{position:absolute;inset:0;background:center 22%/cover no-repeat}
.hub-ch-slot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.85))}
.hub-ch-slot.small::after{background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.35))}
.hub-ch-txt{position:relative;z-index:1;display:flex;flex-direction:column;padding:10px 14px;min-width:0;max-width:100%}
.hub-ch-txt small{font-size:.62rem;letter-spacing:.18em;color:#fcd34d}
.hub-ch-txt b{font-size:1rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-ch-slot.big .hub-ch-txt b{font-size:1.45rem}
.hub-ch-txt em{font-style:normal;font-size:.85rem;color:#e7d3a8}
.hub-ch-txt i{font-style:normal;font-size:.72rem;color:#d4d4d8}
.hub-ch-slot.small .hub-ch-txt{padding:8px 14px;align-self:center}
.hub-ch-slot .story-hub-vid{position:absolute;top:8px;right:8px;z-index:2}
.hub-gacha{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:96px;padding:14px 16px;border-radius:16px;border:1px solid rgba(192,132,252,.6);color:#fff;text-align:left;overflow:hidden;
  background:linear-gradient(90deg,rgba(10,5,20,.85),rgba(10,5,20,.2)),url(../img/gacha/bg_landscape_1280.webp) center/cover no-repeat,#1e1030;box-shadow:0 0 22px rgba(168,85,247,.25)}
.hub-gacha-t{display:flex;flex-direction:column;gap:2px}
.hub-gacha b{font-size:1.4rem;font-weight:900;color:#f5d0fe}
.hub-gacha small{font-size:.78rem;color:#e9d5ff}
.hub-gacha .story-badge{position:absolute;top:8px;right:8px}
.hub-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hub-menu button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px;border-radius:14px;background:rgba(15,15,25,.72);border:1px solid rgba(255,255,255,.12);color:#e4e4e7;font-size:.75rem;font-weight:700;word-break:keep-all}
.hub-menu button span{font-size:1.35rem}
.hub-menu .story-badge{position:absolute;top:4px;right:6px}
/* ----- 맵 정리: 페이즈 노드에 소탕 아이콘 · 리더 이미지 · 아이콘 버튼 ----- */
.story-node-wrap{position:relative;display:inline-flex;flex:0 0 auto}
.story-node-sw{position:absolute;top:-6px;right:-8px;z-index:2;width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#1c1917;border:1.5px solid #facc15;color:#fde047;font-size:12px;box-shadow:0 0 8px rgba(250,204,21,.35)}
.story-node-sw .ui-ic{width:15px;height:15px}
.story-node-sw.off{filter:grayscale(1);opacity:.45;box-shadow:none}
.story-node-dot{position:relative}
.story-node-ok{position:absolute;bottom:-3px;right:-3px;font-style:normal;font-size:11px;width:18px;height:18px;border-radius:999px;background:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #052e16}
.story-status-row{flex-direction:row!important;justify-content:center;align-items:center;gap:10px!important;margin-top:14px}
.story-leader{position:relative;width:64px;aspect-ratio:3/4;border-radius:10px;overflow:visible;border:2px solid rgba(251,191,36,.7);background:#18181b;padding:0;box-shadow:0 0 14px rgba(251,191,36,.25)}
.story-leader img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.story-leader-st{position:absolute;left:0;right:0;bottom:2px;font-size:9px!important}
.story-leader-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-style:normal;font-size:13px;line-height:1}
.story-ic-btn{height:40px;min-width:40px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:4px;background:rgba(24,24,27,.8);border:1px solid rgba(255,255,255,.18);font-size:17px;color:#e4e4e7}
.story-ic-btn.pts{border-color:#34d399;color:#6ee7b7}
.story-ic-btn.pts b{font-size:14px}
.story-clear{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-weight:900;letter-spacing:.12em;color:#6ee7b7}
.story-clear small{letter-spacing:0;font-weight:600;color:#a1a1aa}

/* 스토리 컷인 이미지 (대사 줄 image). 세로 2:3 등 어떤 비율이든 화면 안에 통째로(contain), 뒤는 같은 그림을 흐리게 깔고 어둡게 */
.story-cutin{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);opacity:0;transition:opacity .45s ease;cursor:pointer}
.story-cutin.on{opacity:1}
.story-cutin-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.35);transform:scale(1.1)}
.story-cutin-img{position:relative;max-width:min(92vw,640px);max-height:88vh;max-height:88dvh;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 60px rgba(0,0,0,.8);transform:scale(.94);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.story-cutin.on .story-cutin-img{transform:scale(1)}
.story-cutin-img.wide{max-width:min(94vw,1100px)}
.story-vcut{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);cursor:pointer}
.story-vcut video{max-width:min(96vw,1100px);max-height:88vh;max-height:88dvh;width:100%;border-radius:12px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 20px 60px rgba(0,0,0,.8);cursor:default}
.story-vcut-skip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));padding:10px 18px;border-radius:9999px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:800;font-size:14px}

/* ===== 탑 허브 (6종) ===== */
.th-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:640px;margin:.5rem auto 0;padding:0 10px}
@media(min-width:900px){.th-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}}
.th-card{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background-color:#0b0b12;background-position:center;background-size:cover;background-repeat:no-repeat;border:1px solid rgba(196,181,253,.22);box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);text-align:left;transition:transform .15s,box-shadow .15s}
.th-card:not(.locked):hover,.th-card:not(.locked):focus-visible{transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,58,237,.35),0 0 0 1px rgba(196,181,253,.5)}
.th-card:active{transform:scale(.98)}
.th-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(5,5,12,.88) 100%)}
.th-card.locked{filter:grayscale(.75) brightness(.55)}
.th-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#e4e4e7;text-shadow:0 2px 6px #000}
.th-lock span{font-size:1.6rem}.th-lock small{font-size:.68rem;color:#d4d4d8}.th-lock b{font-size:.8rem;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18)}
.th-info{position:absolute;left:0;right:0;bottom:0;padding:10px 10px 9px}
.th-name{font-weight:900;font-size:1.02rem;color:#fff;letter-spacing:.02em;text-shadow:0 2px 8px #000}
.th-meta{display:flex;gap:8px;margin-top:4px;font-size:.7rem;color:#ddd6fe}
.th-meta span{padding:1px 7px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(196,181,253,.25)}
.th-card.full .th-meta span:last-child{color:#fca5a5;border-color:rgba(248,113,113,.45)}
.th-lv{font-size:.75rem;color:#c4b5fd;justify-self:end}
.th-foot{text-align:center;font-size:.68rem;color:#71717a;margin:10px 0 18px}
/* 보유 카드 필터 · 마이 덱 */
.story-cards-meta{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#a1a1aa;margin:6px 0 8px}
.story-cards-acts{display:inline-flex;gap:6px}
.story-filter{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.story-filter input,.story-filter select{background:#18181b;border:1px solid #3f3f46;color:#e4e4e7;border-radius:10px;padding:5px 8px;font-size:12px;min-width:0}
.story-filter input{flex:1 1 120px;max-width:200px}
.story-filter #sf-fav{color:#facc15;font-size:13px}
.story-favbadge{position:absolute;left:4px;bottom:22px;color:#facc15;font-size:14px;text-shadow:0 0 4px #000;z-index:3}
.story-empty{grid-column:1/-1;text-align:center;color:#71717a;padding:24px 0}
.cd-sm.fav{color:#facc15;font-size:16px;min-width:40px}.cd-sm.fav.on{border-color:#facc15}
.story-decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;max-width:900px;margin:0 auto}
.story-deck-slot{display:block;text-align:left;padding:10px;border-radius:14px;background:linear-gradient(180deg,#1c1828,#110e19);border:1px solid rgba(245,201,106,.3)}
.story-deck-slot:hover{border-color:#f5c96a}.story-deck-slot.empty{opacity:.6}
.story-deck-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.story-deck-h b{color:#fde68a}.story-deck-h small{color:#a1a1aa}
.story-deck-row{display:flex;gap:4px;min-height:64px;align-items:center}
.story-deck-th{position:relative;width:44px;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:#000;border:1px solid #3f3f46}
.story-deck-th img{width:100%;height:100%;object-fit:cover}.story-deck-th i{position:absolute;bottom:0;left:0;right:0;font-size:9px;font-style:normal;text-align:center;background:rgba(0,0,0,.65);color:#fff}
.story-deck-plus{font-size:26px;color:#71717a;margin:auto}
.story-deck-name{background:transparent;border:0;border-bottom:1px solid #52525b;color:#fde68a;font-weight:900;width:9em;font-size:inherit}
.story-deckchips{flex-wrap:wrap}
/* 모바일: 카드 그리드 한 줄 4장 */
@media (max-width:600px){
  .story-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .story-grid .story-card{border-radius:9px;padding-bottom:3px}
  .story-grid .story-card .font-bold,.story-grid .story-card b{font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .story-grid .story-card .text-xs,.story-grid .story-card small{font-size:9px}
  .story-grid .story-card .stars,.story-grid .story-card [class*="star"]{font-size:9px;transform-origin:top center}
  .story-grid .story-lockbadge,.story-grid .story-favbadge{font-size:10px}
  .story-grid .story-card button{font-size:9px;padding:2px 3px}
}
/* 카드 타일 글자 최소화: 합성·펼치기 아이콘 칩 */
.story-merge-mini,.story-expand{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:26px;height:20px;margin:3px 2px 0;padding:0 6px;font-size:11px;vertical-align:middle}
.story-merge-mini .ui-ic,.story-merge-mini img{width:14px;height:14px}
/* 자동 전투 버튼 (스토리·탑 전투) */
#auto-btn.on{border-color:#34d399;color:#6ee7b7;background:#064e3b;box-shadow:0 0 10px rgba(52,211,153,.45)}
/* 승리 화면: 스탯업 | 다음 챕터로 (반반) */
.story-split{display:flex;gap:.5rem}
.story-split>.story-btn{flex:1;min-width:0;padding-left:.4rem;padding-right:.4rem;white-space:nowrap}
.story-split>.story-btn:disabled{opacity:.45;filter:grayscale(.6);cursor:not-allowed}
.cd-stats .cd-power b{color:#fcd34d}

/* LR(레전더리 레어): 흐르는 무지개 홀로그램 */
.g-lr .gacha-front,.story-tk-card.g-lr{border-color:#e879f9;box-shadow:0 0 30px #e879f9,0 0 50px rgba(34,211,238,.4)}
.g-lr::before{inset:-22px;background:conic-gradient(#f87171,#fbbf24,#a3e635,#22d3ee,#818cf8,#e879f9,#f87171);filter:blur(14px);opacity:.8;animation:gachaPulse 1.6s infinite}
.g-text-lr{background:linear-gradient(90deg,#f87171,#fbbf24,#a3e635,#22d3ee,#818cf8,#e879f9,#f87171) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lrFlow1 6s linear infinite}
.gr-rar-lr.settle{opacity:.75}.gr-room.flash-lr{animation:grShake .5s}

/* 내 인재: 합성·보유 수를 그림 아래쪽(이름 위)으로 → 타일 높이 통일 */
.story-own-acts{position:absolute;left:3px;right:3px;bottom:3px;z-index:3;display:flex;align-items:center;gap:3px;pointer-events:none}
.story-own-acts>*{pointer-events:auto;margin:0!important;box-shadow:0 1px 3px rgba(0,0,0,.7)}
.story-own-acts .story-expand{margin-left:auto!important;background:rgba(245,158,11,.95);color:#111;border-color:transparent;font-weight:900}

/* 인재영입: 일반 · 프리미엄 큰 배너 타일 (가로 스크롤 = 나중에 캐릭터 배너 추가) */
.gr-banners{position:relative;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px;margin:0 auto;max-width:560px;width:100%}
.gr-bn{position:relative;flex:1 0 46%;scroll-snap-align:start;aspect-ratio:16/9;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:10px 12px;text-align:left;color:#fff;border:2px solid rgba(168,85,247,.35);background:radial-gradient(120% 120% at 20% 10%,#4c1d95,#12061f 70%);box-shadow:0 6px 18px rgba(0,0,0,.6);transition:transform .12s}
.gr-bn-special{background:radial-gradient(120% 120% at 20% 10%,#b45309,#1f0a02 70%);border-color:rgba(245,158,11,.4)}
.gr-bn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gr-bn::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.8))}
.gr-bn b,.gr-bn small{position:relative;z-index:1}.gr-bn b{font-size:22px;font-weight:900;text-shadow:0 2px 6px #000}.gr-bn small{font-size:12px;opacity:.9}
.gr-bn.on{border-color:#e9d5ff;box-shadow:0 0 18px rgba(192,132,252,.8);transform:translateY(-2px)}.gr-bn-special.on{border-color:#fde68a;box-shadow:0 0 18px rgba(245,158,11,.8)}
.gr-bn:not(.on){filter:brightness(.7) saturate(.8)}
.gr-bn .story-badge{position:absolute;top:8px;right:8px;z-index:2}
.gr-rates{position:absolute;right:6px;top:8px;z-index:3}

/* 챕터 맵 배경 (img/story/ch_bg_<챕터id>.webp 1080×1920, 없으면 기존 배경) */
.story-map-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center top}
.story-map-bg-pc{display:none}
/* PC(가로 화면): img/story/ch_bg_pc_<챕터id>.webp 1920×1080 */
@media (min-aspect-ratio:4/3) and (min-width:901px){.story-map-bg-m{display:none}.story-map-bg-pc{display:block;background-position:center}}
.story-map-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35) 45%,rgba(0,0,0,.8))}
.story-map-bg ~ :not(.story-map-bg){position:relative;z-index:1}
/* 페이즈 팝업 */
.story-phpop{text-align:center}.story-phpop-t{font-weight:900;font-size:18px;color:#fde68a}.story-phpop-s{font-size:13px;opacity:.8;margin-top:2px}
.story-phpop-a{display:flex;gap:8px;margin-top:14px}.story-phpop-a .story-btn{flex:1;margin:0}.story-btn-sw{background:linear-gradient(90deg,#0e7490,#0891b2)!important}
/* 챕터 0: 각성 난입 토스트 */
.awaken-toast { position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%); z-index: 60; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px; border-radius: 16px; background: radial-gradient(circle, rgba(168,85,247,.9), rgba(30,0,50,.9)); color: #fff; text-shadow: 0 0 8px #f0abfc; animation: awakenIn 2.6s ease forwards; }
.awaken-toast b { font-size: 26px; letter-spacing: .1em; } .awaken-toast span { font-size: 14px; }
@keyframes awakenIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } 12% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.awaken-toast[style*="url("] { width: 92vw; max-width: 420px; aspect-ratio: 16/9; justify-content: flex-end; background-size: cover; background-position: center 30%; }
/* 챕터 0: [시작하기] 로 전투 시작 */
.kickoff-ov { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.kickoff-btn { padding: 16px 44px; border-radius: 999px; font-size: 22px; font-weight: 900; color: #1a1205; background: linear-gradient(#fde68a,#f59e0b); box-shadow: 0 0 24px rgba(245,158,11,.6); animation: kickPulse 1.4s ease-in-out infinite; }
@keyframes kickPulse { 50% { transform: scale(1.06); } }
/* 챕터 0 강제 10회 프리미엄 영입: 나가기·탭·1회·젬 숨김 */
.gr-forced ~ * .story-back, body:has(.gr-forced) .story-back, body:has(.gr-forced) .story-nav, .gr-forced .gr-banners, .gr-forced [data-draw="1"], .gr-forced .gr-gem { display: none !important; }

/* 전투 스킬 설명: ⓘ 버튼 · 길게 누르기 팝업 (바깥 누르면 닫힘) */
.sk-info{flex:none;width:34px;border-radius:10px;background:#3f3f46;color:#e9d5ff;font:italic 900 15px/1 Georgia,serif;border:1px solid rgba(233,213,255,.35)}
.sk-info:active{background:#52525b}
[data-skill]{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.sk-pop{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:16px}
.sk-pop-c{width:min(340px,100%);background:#18181b;border:1px solid #a855f7;border-radius:16px;padding:14px;color:#f4f4f5;box-shadow:0 0 24px rgba(168,85,247,.35)}
.sk-pop-h{display:flex;gap:10px;align-items:center}.sk-pop-h img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #a855f7}
.sk-pop-h b{display:block;font-size:17px;margin-top:3px}.sk-pop-h small{color:#93c5fd;font-weight:700;font-size:12px}
.sk-pop-d{margin-top:10px;font-size:14px;line-height:1.5;color:#e4e4e7}.sk-pop-n{margin-top:6px;font-size:12px;color:#a1a1aa}
.sk-pop-mp{margin-top:10px;font-size:12px;color:#93c5fd;text-align:right}
/* 합성 레벨 경고 (임유리) */
.merge-scold { display: flex; flex-direction: column; align-items: center; }
.merge-scold-img { width: 62%; max-width: 220px; aspect-ratio: 3/4; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 0 18px rgba(239,68,68,.45); }
.merge-scold-bub { margin-top: -18px; position: relative; width: 100%; padding: 10px 12px; border-radius: 14px; background: #1f1720; border: 2px solid #f87171; text-align: left; }
.merge-scold-bub b { color: #fca5a5; font-size: 13px; } .merge-scold-bub p { font-size: 16px; font-weight: 800; margin: 2px 0; } .merge-scold-bub small { color: #a1a1aa; font-size: 11px; }
.story-tk-card[data-pulled],.gacha-card[data-pulled]{cursor:pointer}

/* 인재 상세 썸네일 돋보기 + 확대 보기 */
.cd-zoom{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(2px);z-index:3}
.cd-zoom:active{transform:scale(.92)}
.cd-zoom-ov{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;touch-action:none;cursor:zoom-out;animation:cdzf .15s ease-out}
.cd-zoom-ov img{max-width:100vw;max-height:100dvh;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:center}
@keyframes cdzf{from{opacity:0}to{opacity:1}}

/* 챕터 제목 옆 이전/다음 화살표 (탭 대체) */
.story-chtitle{display:flex;align-items:center;justify-content:center;gap:10px}
.story-charr{flex:none;width:38px;height:38px;border-radius:999px;border:1px solid #fbbf24;background:rgba(24,24,27,.75);color:#fde68a;font-size:26px;font-weight:900;line-height:1;display:flex;align-items:center;justify-content:center}
.story-charr:disabled{opacity:.4;color:#71717a;border-color:#3f3f46;background:#0f0f11;cursor:not-allowed}
/* 챕터 맵: 메뉴 바를 맨 아래로 */
.story-wrap:has(.story-map-screen){padding-bottom:0}
.story-map-screen{display:flex;flex-direction:column;min-height:calc(100dvh - 12px)}
.story-map-dock{margin-top:auto;padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px))}
/* 탑 VICTORY: 다음 층 / 소탕하기 같은 크기로 나란히 */
.q-win-row{display:flex;gap:8px;align-items:stretch}
.q-win-row>.story-btn{flex:1 1 0!important;width:auto!important;min-width:0;margin:0!important;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:6px;white-space:nowrap}

/* 챕터 타이틀 카드 (NEXT로 새 챕터 진입) */
.story-chcard{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:0 1.5rem;background:radial-gradient(ellipse at center,#1c1917 0%,#000 75%);cursor:pointer;animation:chcardIn .7s ease-out both}
.story-chcard.out{animation:chcardOut .6s ease-in forwards}
.story-chcard .story-chapter-name{font-size:clamp(16px,4.2vw,28px);color:#fde68a;letter-spacing:.06em}
@keyframes chcardIn{from{opacity:0}to{opacity:1}}
@keyframes chcardOut{from{opacity:1}to{opacity:0}}

/* 엔딩 영상: 전체화면이면 꽉 차게, 전체화면 불가(iOS 등) + 세로면 90도 돌려 가로로 */
.story-video:fullscreen,.story-video:-webkit-full-screen{padding:0}
.story-video:fullscreen .story-video-box{width:min(100vw,calc(100vh*16/9));border-radius:0}
@media (orientation:portrait){
  .story-video.rot{padding:0}
  .story-video.rot .story-video-box{width:min(100vh,calc(100vw*16/9));transform:rotate(90deg);border-radius:0;flex:none}
  .story-video.rot .story-video-x{top:auto;bottom:14px}
}
/* 스토리 제한 마나: 출전 카드가 손패에서 시작 → 손패 보이기 · 남은 마나 크게 */
#game.story-field.story-pool #me-hand { display: flex !important; }
#game.story-field.story-pool #hand-sort:not(.hidden) { display: flex !important; }   /* 아케이드처럼 정렬 탭 + 한 줄 가로 스크롤 손패 */
#game.story-pool .mana-line { font-size: 13px; }
#game.story-pool .pool-mana { font-size: 18px; color: #7dd3fc; }
#game.story-pool .pool-note { color: #a1a1aa; font-weight: 500; }
#game.story-pool .pool-must { margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(245,158,11,.2); color: #fcd34d; font-size: 11px; white-space: nowrap; }
.story-lend{position:absolute;right:4px;top:4px;font-size:9px;font-weight:900;padding:1px 4px;border-radius:5px;background:#38bdf8;color:#082f49}
.story-stars{display:inline-flex;gap:1px;line-height:1}.story-stars i{font-style:normal;color:#52525b}.story-stars i.on{color:#fbbf24;text-shadow:0 0 6px rgba(251,191,36,.6)}
.story-stars.node{font-size:10px;margin-top:1px}.story-stars.big{font-size:34px;gap:6px}.story-star-res{margin-top:6px}
.pvp-th,.rd-th{position:relative}.story-skn.sm{top:2px;right:2px;font-size:9px;padding:1px 4px;border-radius:5px}
.story-starbox-wrap{display:flex;justify-content:center;margin:4px 0}.story-starbox{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(251,191,36,.45);color:#fcd34d;font-size:13px}
.story-starbox.ready{box-shadow:0 0 12px rgba(251,191,36,.6)}.story-starbox-ic{font-size:18px}.story-starbox .story-badge{position:absolute;top:-6px;right:-6px}
.story-starbar{position:relative;height:18px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0}.story-starbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#f59e0b,#fde047)}.story-starbar b{position:relative;display:block;text-align:center;font-size:11px;line-height:18px;color:#18181b}
.story-starm{display:flex;align-items:center;gap:8px;padding:8px;border-radius:10px;background:rgba(255,255,255,.05);margin-top:6px}.story-starm.ready{border:1px solid rgba(251,191,36,.6)}.story-starm.done{opacity:.55}
.story-starm-n{font-weight:900;color:#fcd34d;min-width:64px}.story-starm-r{flex:1;font-size:12px}.story-starm-go{padding:4px 12px;font-size:12px}.story-starm-ok{color:#34d399;font-weight:900}

/* 전투: 내 패널 고정 (css/hubs.css .story-hub .hub-menu 와 같은 방식). 팝업(z-40↑)은 그대로 위에 */
#game .me-dock { position: sticky; bottom: 0; z-index: 5; margin: 0 -8px; padding: 8px 8px calc(4px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(5,2,4,.92) 14px); }

/* ===== 전투 UI 다듬기 ===== */
/* 액션 7개 한 줄 (아이콘 + 작은 마나) */
#action-bar.act-row { display: flex; gap: 4px; }
#action-bar .act-btn { flex: 1 1 0; min-width: 0; font-size: 0; padding: 4px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#action-bar .act-btn.hidden { display: none; }
#action-bar .act-btn .ui-ic { width: 24px; height: 24px; margin: 0; }
#action-bar .act-btn .act-ico { font-size: 18px; line-height: 24px; }
#action-bar .act-btn > span:not(.act-ico) { font-size: 9px; line-height: 1; white-space: nowrap; }
#action-bar .act-btn > span .ui-ic { width: 10px; height: 10px; }
#action-bar .act-btn .reason { display: none; }
@media (min-width: 768px) { #action-bar .act-btn .ui-ic { width: 30px; height: 30px; } #action-bar .act-btn > span:not(.act-ico) { font-size: 11px; } }
/* 정렬 레이어: 버튼 줄 위에 */
#me-dock { position: sticky; }
.sort-pop { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 30; padding: 8px; border-radius: 14px; background: rgba(24,24,27,.97); border: 1px solid rgba(52,211,153,.4); box-shadow: 0 8px 24px rgba(0,0,0,.6); }
#action-bar { position: relative; }
/* 설정 레이어 (볼륨 · 연출 · 도움말) */
.bset-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 16px; background: rgba(24,24,27,.97); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.bset-pop.hidden { display: none; }
.bset-pop #voice-vol { display: block; }
/* 오른쪽 위치 바 */
#battle-nav { position: fixed; right: 2px; top: 12vh; bottom: 12vh; width: 6px; border-radius: 6px; background: rgba(255,255,255,.08); z-index: 6; display: none; cursor: pointer; }
#battle-nav.on { display: block; }
#battle-nav::before { content: ''; position: absolute; inset: 0 -10px; }
#battle-nav i { position: absolute; left: 0; right: 0; border-radius: 6px; background: rgba(52,211,153,.7); transition: top .15s; }
/* 진영 칸 = 진영: 진영 HP 바 · 공격 대상 표시 */
.base-hp { position: relative; width: 72px; height: 12px; margin-top: 3px; border-radius: 9999px; background: rgba(255,255,255,.12); overflow: hidden; }
.base-hp-fill { height: 100%; background: linear-gradient(90deg, #dc2626, #f87171); transition: width .4s; }
.base-hp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.base-target .base-ring { box-shadow: 0 0 0 3px #ef4444, 0 0 16px rgba(239,68,68,.75); cursor: pointer; }
@media (min-width: 768px) { .base-hp { width: 100px; height: 14px; } .base-hp span { font-size: 10px; } }

/* 스토리: 대사와 함께 보이는 미디어 패널 (위쪽). 탭은 아래 대사로 통과 */
.story-media { position: fixed; left: 0; right: 0; top: 0; height: 55vh; z-index: 29; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: #000; }
.story-media.on { opacity: 1; }
.story-media img, .story-media video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.story-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, rgba(0,0,0,.55)); pointer-events: none; }
.story-media-zoom { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 35; width: 40px; height: 40px; border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); font-size: 18px; line-height: 38px; text-align: center; }
body.story-media-on .story-portrait { max-height: 22vh; max-width: 40%; margin-bottom: -20px; }
body.story-media-on #story-screen { background: transparent; }
body.story-media-on .story-dlg-skip { left: 4px; right: auto; top: calc(4px + env(safe-area-inset-top)); }
.story-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; animation: storyFade .25s; }
.story-zoom img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.story-zoom-x { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.15); font-size: 20px; color: #fff; }
/* 이벤트 원본 그림은 확대/크롭 없이 대사 위 가용 화면 안에 전부 표시. */

/* 10회 뽑기 결과: 카드 뒷면 → 낮은 등급부터 차례로 뒤집힘 (--fd = 열리는 시각). SR 자주 · UR 이상 금색 반짝, 나머지 무지 */
.story-tk-card.tk-flip{opacity:1;animation:none;background:transparent;border-color:transparent;box-shadow:none;overflow:visible;perspective:600px;transition:border-color .2s var(--fd),box-shadow .2s var(--fd)}
.tk-flip .tk-in{position:relative;transform-style:preserve-3d;animation:tkFlip .45s var(--fd) both}
.tk-flip .tk-back,.tk-flip .tk-front{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden}
.tk-flip .tk-front{transform:rotateY(180deg);background:#111}
.tk-flip .tk-back{position:absolute;inset:0;background:url(../img/ui/gacha.webp) center/50% no-repeat,linear-gradient(160deg,#27272a,#09090b);border:2px solid #52525b}
.tk-flip .tk-back.tkb-sr{border-color:#c084fc;background:linear-gradient(115deg,transparent 30%,rgba(232,180,255,.7) 50%,transparent 70%) 0 0/250% 100%,url(../img/ui/gacha.webp) center/50% no-repeat,linear-gradient(160deg,#4c1d95,#1e1033);animation:tkShine 1.4s linear infinite;box-shadow:0 0 12px #c084fc}
.tk-flip .tk-back.tkb-ur{border-color:#facc15;background:linear-gradient(115deg,transparent 30%,rgba(255,240,170,.85) 50%,transparent 70%) 0 0/250% 100%,url(../img/ui/gacha.webp) center/50% no-repeat,linear-gradient(160deg,#a16207,#3b2503);animation:tkShine 1.1s linear infinite;box-shadow:0 0 16px #facc15}
.story-tk-card.tk-flip.g-r,.story-tk-card.tk-flip.g-hr,.story-tk-card.tk-flip.g-sr,.story-tk-card.tk-flip.g-ur,.story-tk-card.tk-flip.g-mr,.story-tk-card.tk-flip.g-lr{border-color:transparent;box-shadow:none}
.tk-flip .tk-front{border:2px solid #52525b}
.tk-flip.g-r .tk-front{border-color:#84cc16}.tk-flip.g-hr .tk-front{border-color:#3b82f6;box-shadow:0 0 10px #3b82f688}.tk-flip.g-sr .tk-front{border-color:#c084fc;box-shadow:0 0 12px #c084fcaa}.tk-flip.g-ur .tk-front{border-color:#facc15;box-shadow:0 0 16px #facc15cc}.tk-flip.g-mr .tk-front{border-color:#ef4444;box-shadow:0 0 30px #f87171}.tk-flip.g-lr .tk-front{border-color:#e879f9;box-shadow:0 0 30px #e879f9}
.tk-skip .tk-flip .tk-in{animation-delay:0s;animation-duration:.2s}
@keyframes tkFlip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes tkShine{from{background-position:100% 0,center,0 0}to{background-position:-150% 0,center,0 0}}
@media (prefers-reduced-motion:reduce){.tk-flip .tk-back.tkb-sr,.tk-flip .tk-back.tkb-ur{animation:none}}

/* 정렬 버튼 토글 활성 표시 */
#act-sort[aria-expanded="true"] { background: rgba(16,185,129,.25); border-color: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.5); }
/* 스토리 제한 마나: 정렬·공격업 버튼을 작은 알약 한 줄로 */
#game.story-pool #action-bar.act-row { justify-content: flex-end; gap: 6px; }
#game.story-pool #action-bar .act-btn { flex: 0 0 auto; flex-direction: row; gap: 4px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 12px; }
#game.story-pool #action-bar .act-btn .ui-ic { width: 18px; height: 18px; }
#game.story-pool #action-bar .act-btn .act-ico { font-size: 14px; line-height: 18px; }
#game.story-pool #action-bar .act-btn > span:not(.act-ico) { font-size: 11px; }
#game.story-pool #action-bar .act-btn > span .ui-ic { width: 12px; height: 12px; }

/* ===== 시련의 탑: 악의 빌딩 1열 네비 (PC·모바일 동일) ===== */
.q-tower{position:relative;min-height:100%;padding-bottom:16px;isolation:isolate}
.q-tower::before{content:"";position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.55;pointer-events:none}
.q-tier-1::before{background-image:var(--q-own,none),url('../img/tower/bg/t1.webp'),linear-gradient(180deg,#1a0f1f,#3b1a1a 60%,#120a0a)}
.q-tier-2::before{background-image:var(--q-own,none),url('../img/tower/bg/t2.webp'),linear-gradient(180deg,#2a0808,#4a1010 55%,#100505)}
.q-tier-3::before{background-image:var(--q-own,none),url('../img/tower/bg/t3.webp'),linear-gradient(180deg,#3a0505,#5c0b0b 50%,#0d0303)}
.q-tier-4::before{background-image:var(--q-own,none),url('../img/tower/bg/t4.webp'),linear-gradient(180deg,#1e0730,#3d0d3d 50%,#0a0310)}
.q-tier-5::before{background-image:var(--q-own,none),url('../img/tower/bg/t5.webp'),linear-gradient(180deg,#3d0a00,#6b1400 45%,#0a0200)}
.q-tier-6::before{background-image:var(--q-own,none),url('../img/tower/bg/t6.webp'),linear-gradient(180deg,#05010f,#2a0a3a 45%,#000)}
.q-tier-7::before{background-image:var(--q-own,none),url('../img/tower/bg/t7.webp'),radial-gradient(circle at 50% 15%,#000 0 12%,#4a0000 13% 15%,#120000 40%,#000)}
.q-tower .q-wrap{display:flex!important;flex-direction:column;align-items:center;max-width:440px;margin:8px auto 0;grid-template-columns:none}
.q-spire{width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:46px solid #1c0a0f;filter:drop-shadow(0 -6px 14px rgba(220,38,38,.55));animation:qAura 2.4s ease-in-out infinite}
.q-base{width:108%;height:14px;border-radius:4px;background:linear-gradient(180deg,#1c0a0f,#000);box-shadow:0 0 24px rgba(220,38,38,.35)}
@keyframes qAura{0%,100%{filter:drop-shadow(0 -4px 10px rgba(168,85,247,.5))}50%{filter:drop-shadow(0 -8px 20px rgba(220,38,38,.8))}}
.q-tower .q-list{width:100%;max-height:none;overflow:visible;gap:0;padding:6px 10px;background:linear-gradient(90deg,#0d0507,#1f0b10 50%,#0d0507);border-left:3px solid #3f1218;border-right:3px solid #3f1218;box-shadow:0 0 30px rgba(127,29,29,.45),inset 0 0 18px #000}
.q-tower .q-row{display:grid;grid-template-columns:22px 40px 1fr auto 18px;gap:8px;padding:6px 8px;margin:2px 0;border-radius:4px;border-bottom:1px solid rgba(127,29,29,.4);background:rgba(0,0,0,.35);font-size:.9rem}
.q-tower .q-row.lock{opacity:.5;filter:saturate(.3)}
.q-tower .q-row.on{outline:2px solid #ef4444;background:rgba(127,29,29,.35)}
.q-tower .q-row.boss{border:1px solid #b91c1c;background:linear-gradient(90deg,rgba(127,29,29,.55),rgba(0,0,0,.4))}
.q-win{width:18px;height:22px;border-radius:2px;background:#27151a;box-shadow:inset 0 0 4px #000}
.q-row.next .q-win{background:#ef4444;animation:qWin 1.2s ease-in-out infinite}
@keyframes qWin{50%{background:#7f1d1d;box-shadow:0 0 10px #ef4444}}
.q-face{width:40px;height:40px;border-radius:6px;object-fit:cover;object-position:top;border:1px solid #57151c;background:#111}
.q-row.boss .q-face{width:40px;border-color:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,.6)}
.q-tower .q-no{font-weight:900;color:#fecaca}
.q-tower .q-cur{width:100%;margin:4px 0;background:rgba(10,2,4,.85);border:1px solid #7f1d1d;border-radius:8px;padding:10px;box-shadow:0 0 18px rgba(220,38,38,.35)}
.q-fl{text-align:center;font-size:3rem;font-weight:900;line-height:1;color:#ef4444;text-shadow:0 0 14px rgba(239,68,68,.8),0 2px 0 #000;margin:4px 0 10px;letter-spacing:.02em}
.q-fl small{font-size:1.4rem;margin-left:2px}
.q-fl-boss{display:block;font-size:.85rem;color:#fbbf24;letter-spacing:.3em;margin-top:4px;text-shadow:0 0 8px #b45309}
.q-enemies.boss{grid-template-columns:repeat(6,1fr)}
.q-tower .q-peek{display:none}

/* 스토리 맵: PC는 화면 폭 전체 사용(칸 수는 JS mapCols) */
@media (min-width:901px){.story-wrap:has(.story-map-screen){max-width:none}}

/* 스토리 맵: 상태 박스(레벨·행동력·심연석·별 보상)를 맨 위 한 줄로 */
.story-map-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:6px 0 4px;position:relative;z-index:2}
.story-map-status .story-player-row,.story-map-status .story-starbox-wrap{margin:0}
.story-mailbtn{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.55);border:1px solid rgba(147,197,253,.45);color:#dbeafe;font-size:13px;min-height:30px;cursor:pointer}
.story-mailbtn:hover{background:rgba(30,58,138,.55)}
@media (max-width:480px){.story-mailbtn span{display:none}.story-mailbtn{padding:4px 10px}}
.story-mailbtn .story-badge{position:absolute;top:-6px;right:-6px;margin:0}

/* ===== 전투 HUD 압축 (모든 모드 공통) ===== */
/* 1줄: 나·선공 | 마나 | 버프칩(가로 스크롤) | 남은 턴·진영 HP */
.hud-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud-who, .hud-mana, .hud-right { flex: none; white-space: nowrap; }
.hud-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hud-syn { flex: 1 1 0; min-width: 44px; display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.hud-syn::-webkit-scrollbar { display: none; }
.hud-syn > * { flex: none; }
.hud-hp { height: 4px; margin-top: 3px; }
#game.story-pool .hud-mana { font-size: 12px; }
#game.story-pool .hud-mana .pool-mana { font-size: 15px; }
@media (max-width: 480px) {
  .hud-mana .deck-info, #game.story-pool .pool-note { display: none; }
  #game.story-pool .pool-must { font-size: 10px; padding: 0 4px; }
}
/* 오른쪽 버튼: 일괄공격 + 포기 한 줄, 턴 종료는 아래 크게 */
.hud-btns { display: flex; flex-wrap: wrap; gap: 4px; width: 116px; align-content: center; }
.hud-btns > button { flex: 1 1 auto; white-space: nowrap; }
.hud-btns > #reserve-btn, .hud-btns > #end-turn { flex-basis: 100%; justify-content: center; }
.hud-btns > #story-giveup { flex: 0 0 auto; }
@media (max-width: 480px) { .hud-btns { width: 104px; } .hud-btns .gu-t { display: none; } }
@media (min-width: 768px) { .hud-btns { width: 168px; } }
/* 아케이드 액션 줄 높이 ~44px */
#action-bar .act-btn { height: 44px; padding: 2px 1px; }
#action-bar .act-btn .ui-ic { width: 22px; height: 22px; }
@media (min-width: 768px) { #action-bar .act-btn .ui-ic { width: 24px; height: 24px; } }
/* 스토리·시탑: 정렬·공격력 강화 줄 없애고 손패 줄 오른쪽 위에 작은 알약으로 */
#game.story-pool #action-bar.act-row { height: 0; margin-bottom: -8px; z-index: 7; overflow: visible; }
#game.story-pool #action-bar .act-btn { position: relative; top: 4px; height: 26px; padding: 0 10px; font-size: 11px; }
#game.story-pool #action-bar { display: flex; justify-content: flex-end; align-items: flex-start; padding-right: 4px; }
#game.story-pool #me-hand { padding-top: 34px; }
@media (max-width: 480px) {
  .hud-top { gap: 4px; }
  .hud-right { gap: 4px; }
  .hud-syn { min-width: 32px; }
  #my-turns { padding: 1px 5px; }
  #my-turns::before { content: none !important; }
  .hud-btns { width: 96px; }
  #me-hero.hud-me { padding-left: 8px; padding-right: 8px; }
}
.hud-btns > #attack-all { flex: 1 1 0; min-width: 0; }
@media (max-width: 480px) { .hud-btns > #attack-all, .hud-btns > #story-giveup { padding-left: 4px; padding-right: 4px; } .hud-btns > #attack-all { font-size: 11px; } }

/* 전투 ⚙️ 설정 버튼: 화면에 떠 있게 (스크롤해도 오른쪽 위 고정) */
#game #bset-btn { position: fixed; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); z-index: 32; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
#game div:has(> #bset-btn) { padding-right: 48px; }
#game #bset-pop { position: fixed; top: calc(56px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); z-index: 32; }
/* 고유기술 버튼 아래 마나 소비량 숨김 (용병 '1회'는 유지) */
#action-bar .act-btn:not(#act-merc) > span.text-sky-300 { display: none; }

/* ===== 아케이드 PC: 액션 6개를 턴 패널 왼쪽 3×2 작은 버튼으로, 정렬은 손패 줄 오른쪽 위 알약 ===== */
#act-merc:disabled { filter: grayscale(1); }
@media (min-width: 768px) {
  #game:not(.story-field) #me-dock { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 80px; gap: 8px; }
  #game:not(.story-field) #me-dock > * { grid-column: 1 / -1; }
  #game:not(.story-field) #me-dock > div:first-child { grid-column: 2; grid-row: 1; }
  #game:not(.story-field) #action-bar.act-row { grid-column: 1; grid-row: 1; position: static; display: grid; grid-template-columns: repeat(3, 38px); grid-auto-rows: 38px; gap: 4px; align-content: center; }
  #game:not(.story-field) #action-bar .act-btn { width: 38px; height: 38px; padding: 0; border-radius: 10px; line-height: 0; }
  #game:not(.story-field) #action-bar .act-btn .ui-ic { width: 24px; height: 24px; }
  /* 고유기술 버튼: '내 턴 남은 횟수' 패널과 일괄 공격·턴 종료 사이 (패널 오른쪽) */
  #game:not(.story-field) #me-dock { grid-template-columns: minmax(0, 1fr) auto auto; }
  #game:not(.story-field) #me-dock > div:first-child { display: contents; }
  #game:not(.story-field) #me-dock #me-hero { grid-column: 1; grid-row: 1; }
  #game:not(.story-field) #action-bar.act-row { grid-column: 2; }
  #game:not(.story-field) #me-dock .hud-btns { grid-column: 3; grid-row: 1; }
}
#game:not(.story-pool) #action-bar .act-btn { line-height: 0; }

/* 정렬: 맨 왼쪽 손패 카드 위 왼쪽에 작은 알약 (줄 차지 안 함, 모든 모드) */
.hand-sort-btn { position: absolute; top: 0; left: 4px; z-index: 6; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hand-sort-btn .act-ico { font-size: 13px; }
#me-hand { padding-top: 18px !important; }
#game.story-pool #me-hand { padding-top: 34px !important; }
#game.story-field:not(.story-pool) #act-sort { display: none; }
#game.story-pool .hand-sort-btn { top: 4px; height: 26px; }
/* 📮 우편: 메인 상단(설정 옆)·스토리 허브 상단에도 */
.main-mail{flex:none}.main-cur:empty+.main-mail{margin-left:auto}
.main-mail .story-mailbtn,.story-top [data-mailbtn] .story-mailbtn{min-height:34px}
.story-top [data-mailbtn]{margin-left:auto;flex:none}

/* ===== 아케이드: 상대 정보 = 화면 오른쪽 위(⚙️ 아래) 작은 떠 있는 박스 ===== */
#game:not(.story-field):not(.view-battle) #top-bar { justify-content: flex-end; }
#game:not(.story-field):not(.view-battle) #ai-hero { position: fixed; top: calc(56px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); z-index: 31; flex: none; width: auto; min-width: 0; max-width: 120px; padding: 5px 8px; border-radius: 12px; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); box-shadow: 0 2px 10px rgba(0,0,0,.5); }
#game:not(.story-field):not(.view-battle) #ai-hero > div:first-child { flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10px; }
#game:not(.story-field):not(.view-battle) #ai-hero > div:first-child > span { flex-direction: column; align-items: flex-end; gap: 2px; }
#game:not(.story-field):not(.view-battle) #ai-hero .mana-line, #game:not(.story-field):not(.view-battle) #ai-hero .deck-info { font-size: 10px; }
#game:not(.story-field):not(.view-battle) #ai-name, #game:not(.story-field):not(.view-battle) #ai-hp, #game:not(.story-field):not(.view-battle) #ai-hpbar { display: none !important; }
#game:not(.story-field):not(.view-battle) #ai-hero > div:nth-child(2) { display: none; }
/* 스토리 허브 상단 (2026-10-31): 제목 없이 2줄 — 1줄 처음으로 + Lv·행동력·젬 / 2줄 미션·우편 (360px 에서도 안 잘림) */
.story-top.hub-top{flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.hub-top-r1{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.hub-top-r1 .story-back{flex:none}
.hub-top-r1 [data-vr-player]{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap;min-width:0}
.hub-top-r2{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.hub-top-r2:not(:has(button)){display:none}
.hub-top [data-mailbtn],.hub-top [data-dailybtn]{margin-left:0!important;flex:none}
.story-hub{max-width:100%;overflow-x:clip}
.story-hub .hub-menu{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@media (max-width:420px){.story-hub .hub-menu button{padding:8px 0;font-size:.68rem;letter-spacing:-.02em}.story-hub .hub-menu button span{font-size:1.15rem}}
/* 친구 뱃지: 마이 탭 */
[data-friendbadge]{position:relative}
[data-friendbadge] .fr-tabbadge{position:absolute;top:2px;right:8px;margin:0}
.mp-head .mp-friend{margin-left:auto;margin-right:8px;flex:none}
.hub-top-r1 [data-vr-player]{flex-wrap:nowrap}
@media (max-width:420px){.hub-top-r1 .story-back{padding:5px 8px;font-size:11px}.hub-top-r1 [data-vr-player]{gap:3px;font-size:11px}.hub-top-r1 .vrp-st small{display:none}.hub-top-r1 .vrp-lv,.hub-top-r1 .vrp-st{padding:2px 6px}.hub-top-r1 .gem-chip{transform:scale(.92);transform-origin:right center}}
/* 전투 모바일 (2026-10-31): 내 진영 줄이 버튼 칸을 밀어 겹치던 문제 — 진영 정보는 2줄까지 줄바꿈, 버튼 칸과 같은 높이 */
@media (max-width:480px){
  #me-dock > div:first-child{align-items:stretch}
  #me-hero{display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .hud-top{flex-wrap:wrap;row-gap:2px}
  .hud-top .hud-mana{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.25}
  .hud-right{margin-left:auto}
  .hud-btns{align-content:stretch}
  .hud-btns > #end-turn{padding-top:6px;padding-bottom:6px}
  #game.story-field #ai-hero{margin-top:4px}
}
/* 전투 하단 (2026-10-31 #2): 480px 넘는 화면(넓은 폰·태블릿·PC)에서도 버튼 칸·진영 줄이 겹치지 않게
   버튼 칸 = 2열 그리드(일괄 공격 | 포기, 턴 종료는 전체 폭), 글자 크기에 맞춰 폭이 늘어남. 진영 정보는 줄바꿈 */
.hud-btns{display:grid;grid-template-columns:minmax(0,1fr) auto;width:auto;min-width:116px;max-width:220px;gap:4px;align-content:center}
.hud-btns > #reserve-btn,.hud-btns > #end-turn{grid-column:1/-1}
.hud-btns > #story-giveup.hidden + #end-turn,.hud-btns > #attack-all:last-of-type{grid-column:1/-1}
.hud-btns > #attack-all{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hud-btns > #story-giveup.hidden ~ #end-turn{grid-column:1/-1}
#game:not(.story-pool) .hud-btns > #attack-all,.hud-btns:not(:has(#story-giveup:not(.hidden))) > #attack-all{grid-column:1/-1}
@media (min-width:768px){.hud-btns{min-width:168px}}
@media (max-width:480px){.hud-btns{min-width:96px;max-width:120px}}
#me-dock > div:first-child{align-items:stretch}
#me-hero{min-width:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hud-top{flex-wrap:wrap;row-gap:2px}
.hud-top .hud-mana{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.25}
.hud-right{margin-left:auto;flex:none}
/* 10회 뽑기 뒤집기: .story-tk-card div{overflow:hidden}(#73)이 .tk-in에도 걸려 3D가 평면화 → 180° 돌아도 뒷면이 보이던 문제 (최근 Chrome은 overflow≠visible이면 preserve-3d를 무시) */
.tk-flip .tk-in{overflow:visible;padding:0;white-space:normal}

/* 시련의 탑 층 목록: 줄 배경 투명 · 리더 썸네일 크게 (모바일 가독성: 글자 그림자) */
.q-tower .q-row,.q-tower .q-row.boss{background:transparent;grid-template-columns:22px 52px 1fr auto 18px;text-shadow:0 1px 2px #000,0 0 4px rgba(0,0,0,.8)}
.q-tower .q-row.on{background:rgba(127,29,29,.25)}
.q-tower .q-face,.q-tower .q-row.boss .q-face{width:52px;height:52px}
.q-tower .q-list,.q-tower[class*="q-tier-"] .q-list{background:transparent}

/* PvP 보스리그: 진영 HP 바 크게 */
#game.view-boss #ai-hpbar, #game.view-boss #me-hpbar { min-height: 10px; }
#game.view-boss #ai-hpbar { box-shadow: 0 0 6px rgba(239,68,68,.7); }
#game.view-boss .hud-hp, #game.view-boss div:has(> #ai-hpbar) { height: 10px; }
#game.view-boss #ai-hp, #game.view-boss #me-hp { font-size: 1rem; font-weight: 900; }
/* x2 같은 인재 팝업 */
.story-cp-h{display:flex;align-items:center;gap:6px;font-size:16px;margin-bottom:8px}.story-cp-h small{color:#a1a1aa}
.story-cp-x{margin-left:auto;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:900}
.story-cp-list{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.story-cp-row{display:flex;gap:6px;align-items:stretch}
.story-cp-info{flex:1;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;background:#27272a;border:1px solid #3f3f46;font-size:13px;text-align:left}
.story-cp-info:hover{border-color:#34d399}
.story-cp-merge{display:inline-flex;align-items:center;gap:3px;padding:0 10px;border-radius:10px;background:#b91c1c;color:#fff;font-weight:800;font-size:12px}
.story-cp-merge img{width:16px;height:16px}
.story-extback{position:sticky;top:0;z-index:5;display:block;width:100%;margin-bottom:6px;padding:10px;border-radius:12px;background:#f59e0b;color:#111;font-weight:900}

/* 아케이드 상대 정보 박스: 기본 접힘 (작은 칩), 탭하면 박스 열림 */
#ai-hero .ai-fold-chip { display: none; }
#game:not(.story-field):not(.view-battle) #ai-hero.folded { padding: 4px 9px; }
#game:not(.story-field):not(.view-battle) #ai-hero.folded > :not(.ai-fold-chip) { display: none !important; }
#game:not(.story-field):not(.view-battle) #ai-hero.folded .ai-fold-chip { display: block; font-size: 11px; font-weight: 700; color: #fca5a5; white-space: nowrap; }

/* 출전 고르기 타일: 이름 없이 레벨·코스트 한 줄 */
.story-pick-meta{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:3px;font-size:11px;font-weight:800;color:#d4d4d8;white-space:nowrap}
.story-pick-meta img{width:12px;height:12px;vertical-align:middle}
.story-pick-cost{color:#7dd3fc}
.story-skn-dot{padding:1px 5px}
.story-pick-stars .ps-y{color:#facc15}
.story-pick-stars .ps-ex{color:#ef4444}
/* 출전 고르기: 등급 배지 없이 별만 위쪽 가운데 */
.story-deckpick .story-pick-stars{top:5px;bottom:auto;left:5px;right:auto;transform:none;justify-content:flex-start;font-size:11px;gap:0}
.gr-own{text-align:center;font-size:13px;font-weight:800;color:#fde7b0;margin:2px 0 6px;text-shadow:0 1px 3px #000}.gr-own .ui-ic,.gr-own img{width:16px;height:16px;vertical-align:-3px}.gr-own b{color:#fbbf24}
/* 영입 영상 (story.js playGachaVideo): 화면 가득, 위에 SKIP. 끝나면 살짝 사라짐 */
.gr-vid{position:fixed;inset:0;z-index:9000;background:#07060c;display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.gr-vid.out{opacity:0;pointer-events:none}
.gr-vid-v{width:100%;height:100%;object-fit:cover;background:#07060c}
.gr-vid-skip{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));padding:8px 16px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:14px;letter-spacing:.04em;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);z-index:1}
.gr-vid-skip:active{transform:scale(.96)}
/* 스토리 허브 제목 */
.hub-top-r1 .hub-title{flex:1;min-width:0;text-align:center;font-weight:900;color:#f5c96a;font-size:15px;white-space:nowrap;text-shadow:0 1px 4px #000}
/* 높이 맞춤 (2026-11-03): #story-screen 위·아래에 상단 바(--tnb-pad)·하단 메뉴(--gnb-pad) 여백이 붙은 만큼
   안쪽 '화면 높이 채우기'에서 빼 줌 → 내용이 짧으면 스크롤 안 생김 (길면 그대로 스크롤) */
#story-screen { --ss-used: calc(var(--tnb-pad, 0px) + var(--gnb-pad, 0px)); --wrap-pb: 40px; }
body.gnb-on:not(.gnb-hidden) #story-screen { --wrap-pb: 12px; }   /* 하단 메뉴 여백이 이미 있으니 맨 아래 40px 여백은 줄임 */
#story-screen .story-wrap { padding-bottom: var(--wrap-pb); }
#story-screen .story-map-screen { min-height: calc(100vh - var(--ss-used) - 12px - var(--wrap-pb)); min-height: calc(100dvh - var(--ss-used) - 12px - var(--wrap-pb)); }
#story-screen .gr-ui { min-height: calc(100vh - var(--ss-used) - 12px - var(--wrap-pb) - 16px); min-height: calc(100dvh - var(--ss-used) - 12px - var(--wrap-pb) - 16px); }
/* PC 진행(루트 고르기): 카드 3장이 화면 폭만큼 커져 세로로 넘치던 것 → 폭을 줄여 한 화면에 들어가게 */
@media (min-width: 768px) { #story-screen .story-select { max-width: 600px; margin-left: auto; margin-right: auto; } }
/* 모든 화면: 대사창까지 보이는 높이 안에 배치 (모바일 주소창 포함). 긴 대사만 스크롤. */
#story-screen .story-dlg { height: calc(100vh - var(--ss-used, 0px) - 24px); height: calc(100dvh - var(--ss-used, 0px) - 24px); min-height: 0; }
#story-screen .story-wrap:has(#story-dlg) { padding-bottom: 12px; }
@media (max-width: 767px) {
  #story-pop:has(.story-deckpick) { align-items: flex-start; padding: max(8px, env(safe-area-inset-top)) 8px 8px; }
  #story-pop:has(.story-deckpick) > .story-pop-panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}
/* 장비 스탯 변화 표시 (+N/-N) · 장비 안내 */
.gear-dlt{display:inline-block;margin-left:4px;font-style:normal;font-size:11px;font-weight:900;animation:gearDlt 1.6s ease-out both}
.gear-dlt.up{color:#4ade80}.gear-dlt.dn{color:#f87171}
@keyframes gearDlt{0%{transform:translateY(4px);opacity:0}15%{transform:none;opacity:1}75%{opacity:1}100%{opacity:.55}}
.gear-note{margin-top:4px;font-size:10.5px;opacity:.7;text-align:center}
@media (prefers-reduced-motion: reduce){.gear-dlt{animation:none}}
.cd-stats .gear-dlt{font-size:10px;margin-left:3px;white-space:nowrap}.cd-stats .cd-power{flex-wrap:wrap}

/* 그림 버튼 아이콘 (img/ui/icon/*.webp) */
.ui-btn-ic{display:inline-block;width:1.25em;height:1.25em;object-fit:contain;vertical-align:-.2em;flex:none}
.story-mailbtn .ui-btn-ic{width:18px;height:18px}
.mp-navbtn .ui-btn-ic{width:22px;height:22px}
.mp-cosmo .ui-btn-ic{width:16px;height:16px;margin-right:4px;vertical-align:-.25em}
#bset-btn .ui-btn-ic{width:22px;height:22px;display:block;margin:auto}
#bset-btn{display:inline-flex;align-items:center;justify-content:center;padding:0}

/* ===== 2026-11-05 batch: 탑·스토리 전투 하단 4버튼 · 턴 바 얇게 · 보스 왕관 축소 ===== */
#game.story-field #my-turns-pips { margin-top: 1px !important; }
#game.story-field #my-turns-pips i { height: 2px; }
/* act-buff 가 hud-btns 로 옮겨진 스토리·탑만 4열 */
#game.story-field .hud-btns:has(#act-buff) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  width: 100%; max-width: none; min-width: 0; flex: 1 1 100%; margin-top: 4px;
}
#game.story-field #me-dock:has(.hud-btns #act-buff) > div:first-child { flex-wrap: wrap; align-items: stretch; }
#game.story-field #me-dock:has(.hud-btns #act-buff) #me-hero { flex: 1 1 100%; }
#game.story-field .hud-btns:has(#act-buff) > #reserve-btn,
#game.story-field .hud-btns:has(#act-buff) > #attack-all,
#game.story-field .hud-btns:has(#act-buff) > #end-turn,
#game.story-field .hud-btns:has(#act-buff) > #story-giveup,
#game.story-field .hud-btns:has(#act-buff) > #act-buff { grid-column: auto; width: 100%; min-width: 0; padding: 8px 4px; font-size: 12px; justify-content: center; }
#game.story-field .hud-btns:has(#act-buff) > #story-giveup { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
#game.story-field .hud-btns:has(#act-buff) > #story-giveup .gu-t { display: inline; }
#game.story-field .hud-btns > #act-buff { height: auto; flex-direction: row; gap: 2px; line-height: 1.1; }
#game.story-field .hud-btns > #act-buff .ui-ic { width: 16px; height: 16px; }
#game.story-field .hud-btns > #act-buff > span.text-sky-300,
#game.story-field .hud-btns > #act-buff .reason { display: none; }
#act-buff .act-buff-lbl { display: none; }
#game.story-field .hud-btns > #act-buff::after { content: '공업'; font-weight: 800; }
#game.story-field #action-bar.act-row:not(:has(.act-btn:not(.hidden))) { display: none; }
@media (max-width: 480px) {
  #game.story-field .hud-btns:has(#act-buff) > #attack-all,
  #game.story-field .hud-btns:has(#act-buff) > #end-turn,
  #game.story-field .hud-btns:has(#act-buff) > #story-giveup,
  #game.story-field .hud-btns:has(#act-buff) > #act-buff { font-size: 11px; padding: 7px 2px; }
}


#game.story-field .hud-btns:has(#act-buff) { max-width: none !important; width: 100% !important; min-width: 0 !important; }
@media (max-width: 480px) {
  #game.story-field .hud-btns:has(#act-buff) { width: 100% !important; max-width: none !important; }
  #game.story-field .hud-btns:has(#act-buff) .gu-t { display: inline !important; }
}

/* 탑 층 미리보기 보스 왕관: 얼굴 가리지 않게 오른쪽 위 작게 */
.q-lead { position: absolute; top: 1px; right: 1px; font-size: 10px; line-height: 0; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 2px #000); }
.q-lead .ui-ic { width: 12px !important; height: 12px !important; vertical-align: top; }
.q-lv { top: 15px; }

/* 스토리·탑 하단 버튼 순서: 포기 – 공업 – 일괄공격 – 턴종료 */
#game.story-field .hud-btns:has(#act-buff) > #story-giveup { order: 1; }
#game.story-field .hud-btns:has(#act-buff) > #act-buff { order: 2; }
#game.story-field .hud-btns:has(#act-buff) > #attack-all { order: 3; }
#game.story-field .hud-btns:has(#act-buff) > #end-turn { order: 4; }
#game.story-field .hud-btns:has(#act-buff) > #reserve-btn { order: 5; }

/* PvP boss rule cue: one readable sentence, not a tiny explanatory footer. */
#game.view-boss #hero-hint { font-size: 14px; line-height: 1.5; }