:root {
  --bg: #15131c;
  --panel: #1f1c29;
  --panel2: #2a2638;
  --line: #3a3550;
  --text: #ece8f6;
  --muted: #9b93b5;
  --gold: #ffd34d;
  --accent: #8b6cff;
  --danger: #ff5c7a;
  --ok: #5ad16b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0c0b10; color: var(--text);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
#app { max-width: 520px; margin: 0 auto; height: 100%; background: var(--bg); position: relative; overflow: hidden; }
.hidden { display: none !important; }

/* ---------- 생성 화면 ---------- */
#setup { padding: 20px 16px 40px; height: 100%; overflow-y: auto; }
.logo { text-align: center; margin: 18px 0 22px; }
.logo h1 { margin: 4px 0 0; font-size: 34px; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff3c4, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 18px rgba(255, 180, 70, .25); }
.logo-sub { color: var(--muted); font-size: 13px; }
.setup-step { margin-bottom: 18px; }
.setup-step h3 { margin: 0 0 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
#in-name { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 16px; }
.choice-row { display: flex; gap: 8px; }
.choice-col { display: flex; flex-direction: column; gap: 8px; }
.choice { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; }
.choice .big { font-size: 30px; }
.choice small { color: var(--muted); font-size: 11px; text-align: center; line-height: 1.35; }
.choice.sel { border-color: var(--gold); background: #2c2636; box-shadow: 0 0 0 3px rgba(255, 211, 77, .15); }
.choice-col .choice { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; }
.choice-col .choice .big { font-size: 26px; }

/* ---------- 버튼 ---------- */
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: 14px; }
.btn.primary { background: linear-gradient(180deg, #9d7dff, #6a4ce0); border-color: #7a5cf0; }
.btn.gold { background: linear-gradient(180deg, #ffd864, #e6a21a); color: #2a1b00; border-color: #e6a21a; }
.btn.danger { background: linear-gradient(180deg, #ff7a8f, #d93a57); border-color: #d93a57; }
.btn.small { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn.wide { width: 100%; padding: 14px; font-size: 17px; }
.holdable { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.holdable:active:not(:disabled) { transform: scale(.96); filter: brightness(1.15); }
.hold-n { color: #7a1fff; }
.btn:disabled { opacity: .4; filter: grayscale(.6); cursor: default; }
.btn.on { background: var(--accent); }

/* ---------- 상단 ---------- */
#topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, #2a2240, #1d1a28); border-bottom: 1px solid var(--line); }
/* 메인 화면: 전장이 화면을 가득 채우고, 탭 내용은 시트로 올라온다 */
#game { display: flex; flex-direction: column; height: 100%; position: relative; }
#topbar, #controls, #tabs { flex-shrink: 0; }
.portrait { width: 46px; height: 46px; border-radius: 12px; background: radial-gradient(#3a3156, #1b1726); border: 2px solid var(--gold); position: relative; overflow: hidden; flex-shrink: 0; }
#tb-portrait-cv { width: 100%; height: 100%; display: block; }
#tb-stars { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 9px; color: var(--gold); letter-spacing: -1px; text-shadow: 0 0 3px #000; }
.tb-info { flex: 1; min-width: 0; }
.tb-name { font-weight: 800; font-size: 15px; }
.tb-name .lv { color: var(--gold); font-size: 12px; }
.tb-title { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cur { text-align: right; font-size: 13px; line-height: 1.5; }
.tb-cur b { color: var(--gold); }

#field { position: relative; background: #000; flex: 1; min-height: 0; }
#cv { display: block; width: 100%; height: 100%; touch-action: manipulation; }

#controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.stage-info { flex: 1; min-width: 0; font-size: 13px; }
#ct-stage { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ct-row { display: flex; align-items: baseline; gap: 6px; }
#ct-timer { font-weight: 800; font-size: 12px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
#ct-timer.warn { color: var(--danger); }
.wave { height: 5px; background: #0006; border-radius: 3px; overflow: hidden; margin: 4px 0 3px; }
.wave i { display: block; height: 100%; width: 0; background: #7fd6ff; border-radius: 3px; transition: width .25s linear; }
.wave i.boss { background: var(--danger); }
#ct-power { color: var(--muted); font-size: 12px; }
.toggles { display: flex; gap: 4px; }
.skill-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold); background: radial-gradient(#4a3b7a, #231c3a); font-size: 22px; display: grid; place-items: center; overflow: hidden; }
.skill-btn #sk-cd { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: rgba(0, 0, 0, .6); }
.skill-btn #sk-cd:empty { display: none; }

#tabs { display: flex; height: 56px; background: #18151f; border-top: 1px solid var(--line); position: relative; z-index: 12; }
#tabs button { flex: 1; background: none; border: none; padding: 8px 0 6px; font-size: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .55; border-bottom: 2px solid transparent; }
#tabs button span { font-size: 11px; font-weight: 700; }
#tabs button.active { opacity: 1; border-bottom-color: var(--gold); background: rgba(255, 211, 77, .06); }

#sheet { position: absolute; left: 0; right: 0; bottom: 56px; max-height: 68%; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-bottom: none; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .55); z-index: 11; animation: sheet-up .22s ease-out; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #sheet { animation: none; } }

#panel { padding: 12px 12px 24px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.sec h3 { margin: 0 0 10px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.sec h3 small { color: var(--muted); font-weight: 500; font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }

/* ---------- 영토 슬롯 ---------- */
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px dashed var(--line); background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); padding: 4px; text-align: center; gap: 2px; }
.slot .ic { font-size: 22px; }
.slot.filled { border-style: solid; color: var(--text); }
.slot.locked { opacity: .45; }
.slot.sel { box-shadow: 0 0 0 3px var(--gold); }
.slot .nm { font-size: 10px; line-height: 1.2; }

/* ---------- 영웅 카드 ---------- */
.hero { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: var(--panel2); margin-bottom: 8px; border-left: 4px solid var(--r); }
.hero .ic { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 26px; background: rgba(255, 255, 255, .05); border: 2px solid var(--r); flex-shrink: 0; position: relative; }
.hero .body { flex: 1; min-width: 0; }
.hero .nm { font-weight: 800; font-size: 14px; }
.hero .meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.hero .stars { color: var(--gold); font-size: 11px; letter-spacing: -1px; }
.hero .acts { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.hero .trait { color: var(--gold); font-weight: 800; }
.rbadge { display: inline-block; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 4px; background: var(--r); color: #111; margin-right: 4px; vertical-align: 1px; }
/* 보유 카드 그리드: 폰에서 3장, 넓으면 4장 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.hcard { position: relative; display: flex; flex-direction: column; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--r) 22%, var(--panel2)), var(--panel2) 55%); border: 2px solid color-mix(in srgb, var(--r) 70%, transparent); overflow: hidden; min-width: 0; }
.hcard.placed { box-shadow: 0 0 0 2px var(--ok); }
.hc-top { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px 6px; text-align: center; min-width: 0; }
.hc-top:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hc-top .rbadge { align-self: flex-start; margin: 0; }
.hc-ic { font-size: 34px; line-height: 1.1; margin: 2px 0; }
.hc-ic.big { font-size: 56px; text-align: center; }
.hc-nm { font-weight: 800; font-size: 12px; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.hcard .stars, .hero-detail .stars { color: var(--gold); font-size: 10px; letter-spacing: -1px; }
.hcard .stars i, .hero-detail .stars i { font-style: normal; color: #ffffff22; }
.hc-meta { font-size: 10px; color: var(--muted); white-space: nowrap; }
.hc-trait { font-size: 10px; font-weight: 800; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hc-shard { position: relative; display: block; flex-shrink: 0; width: 100%; height: 14px; border-radius: 7px; background: #0006; overflow: hidden; margin-top: 3px; }
.hc-shard i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.hc-shard b { position: relative; display: block; font-size: 9px; line-height: 14px; font-weight: 700; }
.hc-acts { display: flex; flex-direction: column; gap: 4px; padding: 4px 6px 6px; margin-top: auto; }
.hc-acts .btn { width: 100%; padding: 5px 4px; font-size: 11px; white-space: nowrap; }
.hcard .placed-tag { top: 6px; bottom: auto; left: auto; right: 6px; transform: none; z-index: 1; }
.hero-detail h2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hero-detail p { margin: 6px 0; }
.hero-detail .trait { color: var(--gold); }
.placed-tag { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 9px; background: var(--ok); color: #082; padding: 0 4px; border-radius: 4px; font-weight: 800; white-space: nowrap; }

/* ---------- 리스트 ---------- */
.row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }
.row .ic { font-size: 22px; width: 32px; text-align: center; }
.row .body { flex: 1; min-width: 0; }
.row .t { font-weight: 700; font-size: 14px; }
.row .d { color: var(--muted); font-size: 12px; }
.row.me { background: rgba(255, 211, 77, .08); border-radius: 8px; padding-left: 6px; padding-right: 6px; }

.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 13px; }
.statgrid div { background: var(--panel2); border-radius: 8px; padding: 8px; }
.statgrid b { display: block; color: var(--gold); font-size: 15px; }

/* ---------- 전직 ---------- */
.promo-path { display: flex; align-items: stretch; gap: 4px; margin-bottom: 10px; }
.promo-step { flex: 1; text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--panel2); font-size: 12px; border: 2px solid transparent; }
.promo-step b { display: block; font-size: 14px; margin-top: 2px; }
.lord-prev { display: block; width: 100%; height: 72px; margin-bottom: 4px; }
.promo-reveal { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; color: var(--gold); font-size: 20px; }
.promo-reveal canvas { width: 96px; height: 116px; border-radius: 12px; background: radial-gradient(#3a3156, #1b1726); }
.promo-step.done { border-color: var(--ok); }
.promo-step.cur { border-color: var(--gold); background: #33293f; }
.req { font-size: 13px; padding: 4px 0; }
.req.ok::before { content: '✅ '; }
.req.no::before { content: '❌ '; }

/* ---------- 국가 ---------- */
.bar { height: 10px; background: #0005; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.bar > i { display: block; height: 100%; border-radius: 6px; }

/* ---------- 소환 ---------- */
.summon-hero { text-align: center; padding: 18px 0 6px; font-size: 56px; }
.summon-btns { display: flex; gap: 8px; margin-top: 8px; }
.summon-btns .btn { flex: 1; padding: 12px 6px; }
.rates { display: flex; justify-content: space-between; font-size: 12px; margin-top: 10px; }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.rcard { border-radius: 10px; border: 2px solid var(--r); background: var(--panel2); padding: 6px 2px; text-align: center; font-size: 10px; animation: pop .35s both; position: relative; }
.rcard .ic { font-size: 24px; }
.rcard .new { position: absolute; top: -6px; right: -4px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 900; padding: 0 4px; border-radius: 4px; }
.rcard.hi { box-shadow: 0 0 14px var(--r); }
@keyframes pop { from { transform: scale(.4) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 모달/토스트 ---------- */
#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal-box { width: 100%; max-width: 440px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; max-height: 90vh; overflow: auto; }
.modal-box h2 { margin: 0 0 8px; font-size: 19px; text-align: center; }
.modal-box p { color: var(--muted); text-align: center; font-size: 14px; }
.modal-actions { display: flex; gap: 8px; margin-top: 12px; }
.modal-actions .btn { flex: 1; }
#toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: max-content; max-width: 92vw; }
#toast div { background: rgba(20, 16, 30, .92); border: 1px solid var(--gold); color: var(--text); padding: 8px 14px; border-radius: 10px; font-size: 13px; animation: toast 2.6s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Royal expedition visual theme */
:root { --bg:#101b26; --panel:#182735; --panel2:#223445; --line:#354857; --text:#f1eee5; --muted:#a4b3bf; --gold:#edcb85; --accent:#487e88; --ok:#80c5a3; }
body { background: radial-gradient(ellipse at 50% 20%, #263d49, #090f18 75%); }
#app { box-shadow:0 0 100px #0008; }
button { transition: background .18s, border-color .18s, transform .15s, box-shadow .18s; touch-action:manipulation; }
button:active:not(:disabled) { transform:translateY(1px) scale(.98); }
button:focus-visible, input:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
#setup { background:radial-gradient(ellipse at 50% 0%, #2c414c 0, transparent 55%), var(--bg); padding:26px 24px 28px; }
.logo { margin:0 0 18px; }
.logo-kicker { color:var(--gold); letter-spacing:3px; font-size:9px; margin-bottom:12px; }
.logo-sub { font-size:12px; }
.logo h1 { font-family:Georgia,'AppleMyungjo',serif; font-size:36px; letter-spacing:-1px; margin-top:7px; }
.lord-showcase { position:relative; display:flex; align-items:center; justify-content:center; gap:20px; min-height:130px; margin-bottom:24px; overflow:hidden; border:1px solid #edcb8538; border-radius:16px; background:radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--kingdom) 18%, transparent), transparent 65%), #0b1621; }
#setup-preview { width:110px; height:130px; position:relative; z-index:1; }
.showcase-orbit { position:absolute; left:calc(50% - 130px); top:16px; width:108px; height:108px; border:1px solid #edcb8530; border-radius:50%; box-shadow:0 0 0 12px #edcb8505,0 0 0 24px #edcb8503; }
.showcase-copy { display:flex; flex-direction:column; gap:8px; z-index:1; }
.showcase-copy span { font-size:10px; color:var(--muted); letter-spacing:1px; }
.showcase-copy strong { font-size:24px; color:var(--gold); }
.showcase-copy small { color:var(--muted); font-size:11px; }
.setup-step h3 { font-size:12px; letter-spacing:.5px; color:#c6d0d5; }
#in-name { background:#0c1823; border-radius:8px; padding:14px; }
.choice { border-width:1px; padding:14px 8px; background:linear-gradient(145deg,#213340,#172532); border-radius:10px; }
.choice.sel { border-color:var(--gold); background:linear-gradient(145deg,#39433e,#233233); box-shadow:inset 0 0 18px #edcb8509,0 0 0 1px #edcb8525; }
.choice-col .choice { padding:11px 14px; }
.btn { box-shadow:inset 0 1px #ffffff0c,0 2px 3px #0002; }
.btn.primary, .btn.gold { background:linear-gradient(180deg,#f0d59b,#c9a45f); border-color:#e7c581; color:#292418; text-shadow:0 1px #fff3; }
#btn-start { margin-top:5px; display:flex; justify-content:space-between; padding:17px 20px; }
.setup-note { text-align:center; color:var(--muted); font-size:11px; margin:14px 0 0; }
#topbar { padding:12px 14px; background:linear-gradient(#213340,#14212d); border-bottom:1px solid #edcb8545; }
.portrait { border-radius:14px; background:radial-gradient(#415766,#152330); box-shadow:0 0 16px #edcb8510; }
.tb-cur { display:flex; flex-direction:column; gap:4px; font-variant-numeric:tabular-nums; }
.tb-cur > div { background:#08131d80; border:1px solid #ffffff0b; border-radius:6px; padding:2px 9px; min-width:84px; }
.tb-cur > div:last-child b { color:#9cd9ec; }
#field::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 12px 25px #06101b33,inset 0 -8px 22px #06101b33; }
#controls { padding:12px 12px; background:linear-gradient(#1c2c39,#14232e); border-top:1px solid #edcb8540; gap:7px; }
#ct-stage { color:#f2dfb7; font-size:12px; }
#ct-power { font-size:10px; }
.wave { height:6px; margin:7px 0 5px; }
.wave i { background:linear-gradient(90deg,#508b94,#9cdbc5); box-shadow:0 0 8px #9cdbc577; }
.toggles { flex-direction:column; }
.toggles .btn { padding:4px 7px; font-size:10px; }
.skill-btn { flex-shrink:0; background:radial-gradient(#45616c,#172733); width:48px; height:48px; }
.skill-btn.ready { box-shadow:0 0 0 4px #edcb8510,0 0 18px #edcb8540; animation:skill-glow 2s ease-in-out infinite; }
@keyframes skill-glow { 50% { box-shadow:0 0 0 5px #edcb8525,0 0 24px #edcb8560; } }
#tabs { background:#101c27; height:64px; }
#tabs button { position:relative; opacity:.7; padding-top:10px; gap:4px; }
#tabs button.active { background:linear-gradient(#edcb8518,transparent); color:var(--gold); }
#tabs button.has-reward::after { content:''; position:absolute; top:7px; left:calc(50% + 11px); width:6px; height:6px; background:var(--gold); border-radius:50%; box-shadow:0 0 7px #edcb8577; }
#sheet { bottom:64px; border-color:#627265; background:#101c28; }
.sheet-head { padding:14px 16px; color:var(--gold); background:linear-gradient(#263845,#1a2a36); border-radius:18px 18px 0 0; }
.sec { background:linear-gradient(145deg,#1d2e3c,#162531); border-color:#344856; padding:14px; }
.hcard { box-shadow:0 4px 12px #0003; }
.hc-ic { margin:8px 0; filter:drop-shadow(0 5px 5px #0006); }
.hcard.placed { box-shadow:0 0 0 1px var(--ok),0 4px 12px #0004; }
.modal-box { border-color:#ac946455; background:radial-gradient(ellipse at top,#304552,#172532 70%); box-shadow:0 24px 90px #0009; padding:24px; animation:sheet-up .22s ease-out; }
#modal { backdrop-filter:blur(5px); }
.modal-box p { line-height:1.7; }
#toast div { background:#14232ef5; border-color:#b89b61; box-shadow:0 6px 20px #0004; }
@media (hover:hover) { .choice:hover,.btn:hover:not(:disabled),.hc-top:hover { filter:brightness(1.12); } }
@media (min-width:700px) and (min-height:700px) { #app { height:calc(100dvh - 40px); margin:20px auto; border:1px solid #61706166; border-radius:22px; } }
@media (max-width:360px) { #setup { padding:20px 14px; } #controls { padding:8px; gap:5px; } .logo h1 { font-size:30px; } }
@supports (padding:env(safe-area-inset-bottom)) { #tabs { padding-bottom:env(safe-area-inset-bottom); height:calc(64px + env(safe-area-inset-bottom)); } #sheet { bottom:calc(64px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }