/* 테냥코 menus — bright, chunky, playful. The #stage is a fixed 1280×720 box scaled to the window. */
:root {
  --ink: #2b1a0f;
  --cream: #fff6df;
  --cream2: #ffe9b8;
  --orange: #ff8a3d;
  --yellow: #ffd23f;
  --green: #5fd35a;
  --blue: #45b6ff;
  --pink: #ff5a8a;
  --red: #ff4e4e;
  --gray: #cfd3dc;
  --sky1: #7fd4ff;
  --sky2: #c8f0ff;
  --ol: 4px;
  --radius: 22px;
  --font: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', 'NanumGothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #2b1a0f;
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .08) 0 8%, transparent 8.5%) 0 0 / 120px 120px,
    #3a2416;
}
button, input { font-family: inherit; color: inherit; }
img { -webkit-user-drag: none; }

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(.5);
  overflow: hidden;
  font-size: 24px;
  line-height: 1.3;
  touch-action: manipulation;
  background: linear-gradient(#7fd4ff, #c8f0ff 70%);
  z-index: 1;
}
#view, .screen { position: absolute; inset: 0; }
.screen {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 160px 50px at 12% 18%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 120px 40px at 18% 14%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 200px 56px at 84% 26%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 120px 40px at 78% 22%, #fff 60%, transparent 62%),
    linear-gradient(#6fcdff, #c8f0ff 75%, #d8f5c8 75%, #9fe07a 100%);
}

/* ---------- common bits ---------- */
.ico { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.ico svg { width: 100%; height: 100%; overflow: visible; }
.panel {
  background: var(--cream);
  border: var(--ol) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(43, 26, 15, .35), inset 0 -6px 0 rgba(222, 178, 104, .35);
}
.muted { color: #7a5a3f; }
.small { font-size: 19px; }
.row { display: flex; align-items: center; }
.gap { gap: 12px; }
.center { justify-content: center; }
.hint { margin: 6px 4px; font-size: 19px; font-weight: 700; color: #4b3424; }
.sub {
  margin: 4px 0 8px;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-error { color: #d61f1f; font-weight: 800; min-height: 1.3em; margin: 6px 0; font-size: 21px; }

.btn {
  --bg: var(--orange);
  --bg2: #e2641a;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 26px;
  border: var(--ol) solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(var(--bg) 55%, var(--bg2));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(0, 0, 0, .14), 0 6px 0 var(--ink);
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
  transition: transform .06s, box-shadow .06s, filter .1s;
  touch-action: manipulation;
  white-space: nowrap;
}
.btn .ico { width: 1.35em; height: 1.35em; }
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(0, 0, 0, .14), 0 1px 0 var(--ink); }
.btn:disabled { filter: grayscale(.85) brightness(.95); opacity: .7; cursor: default; }
.btn:focus-visible, .tab:focus-visible, .stage-card:focus-visible, .unit-card:focus-visible, .slot:focus-visible, .up-item:focus-visible { outline: 4px dashed #fff; outline-offset: 3px; }
.btn-green { --bg: #6fe06a; --bg2: #2fb34a; }
.btn-blue { --bg: #5cc6ff; --bg2: #1e8fe0; }
.btn-yellow { --bg: #ffe066; --bg2: #f0a800; }
.btn-pink { --bg: #ff7aa6; --bg2: #e43b72; }
.btn-gray { --bg: #e8ebf1; --bg2: #aab1c0; color: var(--ink); text-shadow: none; }
.btn-small { min-height: 52px; padding: 4px 18px; font-size: 21px; }
.btn-big { min-height: 76px; font-size: 30px; }
.btn-wide { min-width: 240px; }
.btn-back { --bg: #fff; --bg2: #d9dfe8; color: var(--ink); text-shadow: none; min-height: 58px; padding: 4px 20px 4px 14px; font-size: 22px; }
.btn[data-busy] { pointer-events: none; }

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 88px;
  padding: 12px 20px;
  flex: none;
  background: linear-gradient(#ffb648, #ff9636);
  border-bottom: var(--ol) solid var(--ink);
  box-shadow: 0 4px 0 rgba(43, 26, 15, .25);
  position: relative;
  z-index: 2;
}
.screen-title {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  letter-spacing: 1px;
  white-space: nowrap;
  flex: none;
}
.currencies { margin-left: auto; display: flex; gap: 12px; flex: none; white-space: nowrap; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 18px 0 8px;
  background: #fff;
  border: var(--ol) solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
  font-size: 24px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08);
}
.chip .ico { width: 40px; height: 40px; }
.chip-name { font-size: 18px; color: #7a5a3f; }
.chip b { min-width: 3.2em; text-align: right; }

.portrait-box { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.portrait { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.portrait:not([src]) { visibility: hidden; }
.portrait-box.mini { width: 56px; height: 56px; }
.portrait-box.small { width: 64px; height: 64px; flex: none; }
.portrait-box.medium { width: 150px; height: 150px; flex: none; }
.portrait-box.large { width: 190px; height: 190px; flex: none; }

.rarity {
  display: inline-block;
  padding: 2px 12px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink);
  background: #9aa3b5;
  white-space: nowrap;
}
/* tiers: 레어 blue < 영웅 purple < 유니크 orange < 레전더리 animated rainbow with a gold ring */
.rarity-rare { background: #3d9bff; }
.rarity-super { background: #a64dff; }
.rarity-uber { background: #ff6a1f; }
.rarity-legend { background: linear-gradient(100deg, #ff5a5a, #ffc94a, #6ee36a, #4ab8ff, #b36bff, #ff5a5a) 0 0 / 200% 100%; box-shadow: 0 0 0 3px #ffd23f, 0 0 12px 3px rgba(255, 200, 40, .9); animation: rainbow 2.5s linear infinite; }
@keyframes rainbow { to { background-position: 200% 0; } }

.flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  background: #fff;
  white-space: nowrap;
}
.flag .ico { width: 22px; height: 22px; }
.flag-clear { background: #c9f7b4; }
.flag-lock { background: #e3e6ec; }
.flag-boss { background: #ff6b6b; color: #fff; text-shadow: -1px -1px 0 var(--ink), 1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.flag-new { background: var(--yellow); }

.req { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 21px; padding: 4px 12px; border-radius: 999px; border: 3px solid var(--ink); background: #fff; }
.req .ico { width: 28px; height: 28px; }
.req.ok { background: #d6f9c6; }
.req.no { background: #ffd9d4; color: #b5241b; }

.spinner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 10px solid #fff;
  border-top-color: var(--orange);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.screen-boot, .battle-loading { align-items: center; justify-content: center; gap: 12px; font-weight: 900; font-size: 28px; }
.battle-loading { position: absolute; inset: 0; display: flex; flex-direction: column; background: rgba(43, 26, 15, .55); color: #fff; }

/* scrollbars inside the stage */
.stage-list, .unit-grid, .up-list, .up-detail, .base-body, .rates, .detail-scroll, .mission-list, .mail-list, .update-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thick; scrollbar-color: #c98b4f transparent; }
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-thumb { background: #c98b4f; border: 3px solid var(--cream); border-radius: 10px; }

/* ---------- toasts & modals ---------- */
#toasts { position: absolute; top: 100px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 60; }
.toast {
  padding: 12px 28px;
  background: #fff;
  border: var(--ol) solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
  font-size: 24px;
  box-shadow: 0 5px 0 var(--ink);
  animation: toastIn .25s cubic-bezier(.3, 1.6, .5, 1);
  transition: opacity .3s, transform .3s;
}
.toast-ok { background: #d6f9c6; }
.toast-warn { background: #fff0a8; }
.toast-error { background: #ffd2cc; color: #9e1a12; }
.toast.out { opacity: 0; transform: translateY(-14px); }
@keyframes toastIn { from { transform: scale(.6); opacity: 0; } }

#modals { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.modal-back { position: absolute; inset: 0; background: rgba(43, 26, 15, .55); display: flex; align-items: center; justify-content: center; pointer-events: auto; animation: fade .15s; }
.modal { min-width: 520px; max-width: 900px; max-height: 660px; overflow: auto; padding: 24px 32px 30px; animation: pop .25s cubic-bezier(.3, 1.6, .5, 1); }
.modal-title { margin: 0 0 14px; text-align: center; font-size: 34px; font-weight: 900; display: flex; align-items: center; justify-content: center; gap: 10px; }
.confirm-msg { text-align: center; font-size: 26px; font-weight: 700; margin: 8px 0 26px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

.settings { min-width: 600px; }
.vol-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; font-weight: 900; }
.vol-row .ico { width: 40px; height: 40px; }
.vol-label { width: 130px; }
.vol-value { width: 52px; text-align: right; }
.range { flex: 1; -webkit-appearance: none; appearance: none; height: 26px; background: #ffe2a8; border: var(--ol) solid var(--ink); border-radius: 999px; touch-action: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); border: var(--ol) solid var(--ink); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .5); cursor: pointer; }
.range::-moz-range-thumb { width: 40px; height: 40px; border-radius: 50%; background: var(--orange); border: var(--ol) solid var(--ink); cursor: pointer; }
.settings .muted { text-align: center; }
.settings-version { margin: 0 0 18px; }
.version-tag { padding: 2px 14px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; font-size: 22px; }

/* ---------- update notes ---------- */
/* .modal max-height 660: title ≈ 60 + list 440 + button row ≈ 88 + padding 54 */
.updates { width: 760px; }
.update-list { display: flex; flex-direction: column; gap: 14px; max-height: 440px; padding: 2px 8px 6px 2px; margin-bottom: 18px; }
.update { flex: none; padding: 12px 18px 14px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.update-head { display: flex; align-items: center; gap: 12px; }
.update-ver { flex: none; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 20px; font-weight: 900; white-space: nowrap; }
.update-list .update:first-child .update-ver { background: var(--red); }
.update-title { flex: 1; min-width: 0; margin: 0; font-size: 25px; font-weight: 900; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.update-date { flex: none; font-size: 18px; font-weight: 700; }
.update-items { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.update-items li { position: relative; padding-left: 24px; font-size: 21px; font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.update-items li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--orange); }
.update-items li.has-unit { display: flex; align-items: center; gap: 10px; }
.update-items li.has-unit::before { top: 50%; transform: translateY(-50%); }
.update-items .portrait-box { background: #fff3d6; border: 3px solid var(--ink); border-radius: 12px; }

/* ---------- logo ---------- */
.logo {
  font-size: 88px;
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
  color: #ffde3b;
  -webkit-text-stroke: 16px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 10px 0 var(--ink), 0 12px 0 var(--ink);
  transform: rotate(-4deg);
  line-height: 1.1;
  background: none;
  animation: logoBob 3s ease-in-out infinite;
}
@keyframes logoBob { 50% { transform: rotate(-2deg) translateY(-6px); } }

/* ---------- login ---------- */
.screen-login { flex-direction: row; align-items: center; justify-content: space-evenly; padding: 30px; }
.login-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 600px; }
.tagline { margin: 18px 0 0; font-size: 28px; font-weight: 900; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.hero-paws { display: flex; gap: 24px; margin-top: 10px; }
.hero-paws .ico { width: 64px; height: 64px; animation: hop 1.2s ease-in-out infinite; }
.hero-paws .ico:nth-child(2) { animation-delay: .2s; }
.hero-paws .ico:nth-child(3) { animation-delay: .4s; }
@keyframes hop { 50% { transform: translateY(-14px) rotate(8deg); } }
.login-form { width: 520px; padding: 18px 34px 30px; display: flex; flex-direction: column; gap: 10px; }
.tabs { display: flex; gap: 8px; margin-bottom: 6px; }
.tab {
  flex: 1;
  min-height: 58px;
  border: var(--ol) solid var(--ink);
  border-radius: 16px;
  background: #f1dfb6;
  font-size: 24px;
  font-weight: 900;
  color: #8a6a4a;
  cursor: pointer;
}
.tab.active { background: var(--yellow); color: var(--ink); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12); }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 900; font-size: 21px; }
.field-label { display: flex; align-items: center; gap: 6px; }
.input {
  height: 62px;
  padding: 0 18px;
  border: var(--ol) solid var(--ink);
  border-radius: 16px;
  background: #fff;
  font-size: 26px;
  font-weight: 700;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.input:focus { box-shadow: 0 0 0 5px rgba(255, 138, 61, .55); }
.check { display: flex; align-items: center; gap: 12px; font-weight: 900; cursor: pointer; margin-top: 4px; width: fit-content; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-box { width: 40px; height: 40px; border: var(--ol) solid var(--ink); border-radius: 10px; background: #fff; display: grid; place-items: center; }
.check input:checked + .check-box { background: var(--green); }
.check input:checked + .check-box::after { content: ''; width: 18px; height: 10px; border-left: 6px solid var(--ink); border-bottom: 6px solid var(--ink); transform: translateY(-3px) rotate(-45deg); }
.check input:focus-visible + .check-box { outline: 4px dashed var(--orange); outline-offset: 2px; }
.login-submit { width: 100%; }

/* ---------- home ---------- */
.screen-home { display: block; }
.home-top { background: none; border: 0; box-shadow: none; }
.player-tag { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 20px 0 8px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 999px; font-weight: 900; }
.player-tag .ico { width: 40px; height: 40px; }
.home-title { position: absolute; left: 30px; top: 110px; width: 640px; display: flex; justify-content: center; }
.home-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(#8fdc5f, #5cb83b); border-top: var(--ol) solid var(--ink); }
/* stays left of .home-menu (x ≥ 700): 40 + 5×120 + 4×8 = 672 */
.parade { position: absolute; left: 40px; bottom: 100px; display: flex; gap: 8px; }
.parade-unit { width: 120px; height: 120px; animation: walk 1s ease-in-out infinite; }
@keyframes walk { 50% { transform: translateY(-10px); } }
.home-menu { position: absolute; right: 40px; top: 110px; width: 540px; display: flex; flex-direction: column; gap: 22px; }
.btn-sortie { --bg: #ff6a4d; --bg2: #d93a1e; min-height: 132px; font-size: 64px; border-width: 6px; box-shadow: inset 0 6px 0 rgba(255, 255, 255, .5), inset 0 -8px 0 rgba(0, 0, 0, .16), 0 9px 0 var(--ink); border-radius: 36px; letter-spacing: 6px; animation: throb 1.6s ease-in-out infinite; }
.btn-sortie .ico { width: 80px; height: 80px; }
@keyframes throb { 50% { transform: scale(1.03); } }
.btn-sortie:active:not(:disabled) { animation: none; }
/* above the ground (y 530): 110 + 132 + 22 + 90 + 12 + 90 + 12 + 54 (도감 | 보물) + 6 shadow = 528 */
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-menu { min-height: 90px; border-radius: 28px; font-size: 32px; flex-direction: column; gap: 2px; padding: 8px; }
.btn-menu .ico { width: 52px; height: 52px; }
.home-corner { position: absolute; left: 24px; bottom: 20px; display: flex; gap: 14px; }
/* between the title (ends ≈ y 260) and the parade (starts at y 500), left of .home-menu */
/* 4 × 148 + 3 × 16 = 640 */
.home-events { position: absolute; left: 30px; top: 300px; width: 640px; display: flex; justify-content: center; gap: 16px; }
.btn-event { width: 148px; min-height: 100px; border-radius: 26px; font-size: 25px; flex-direction: column; gap: 2px; padding: 6px; }
.btn-event .ico { width: 48px; height: 48px; }
.badge {
  position: absolute;
  top: -16px;
  right: -12px;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  background: var(--red);
  border: var(--ol) solid var(--ink);
  border-radius: 999px;
  font-size: 24px;
  color: #fff;
  animation: badgeBob 1s ease-in-out infinite;
}
.badge[hidden] { display: none; }
@keyframes badgeBob { 50% { transform: translateY(-4px) scale(1.08); } }

/* ---------- daily rewards & coupons ---------- */
.daily-hint { margin: -4px 0 14px; text-align: center; font-size: 20px; font-weight: 700; word-break: keep-all; }
.daily-loading { display: grid; place-items: center; min-height: 200px; }
/* .modal is at most 900px wide: 900 - 2×4 border - 2×32 padding = 828 */
.attendance, .quests { width: 820px; }
.attend-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 18px; }
.attend-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 150px;
  padding: 8px 4px 10px;
  background: #fff;
  border: var(--ol) solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink);
}
.attend-day.last { background: linear-gradient(#fff, #ffe9b8); }
.attend-day.today { background: linear-gradient(#fff3a8, #ffd23f); animation: throb 1.6s ease-in-out infinite; }
.attend-day.done { background: #e4f7da; animation: none; }
.attend-day.done .attend-gift { opacity: .4; }
.attend-label { padding: 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 20px; font-weight: 900; white-space: nowrap; }
.attend-day.today .attend-label { background: var(--red); }
.attend-gift { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 20px; font-weight: 900; }
.attend-gift span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.attend-gift .ico { width: 30px; height: 30px; }
.attend-stamp { position: absolute; left: 50%; top: 58%; width: 64px; height: 64px; transform: translate(-50%, -50%) rotate(-12deg); }
.attend-stamp .ico { width: 100%; height: 100%; }
.attend-action { display: flex; justify-content: center; min-height: 84px; align-items: center; margin-bottom: 10px; }
.attend-done { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; font-weight: 900; color: #1f7a2e; }
.attend-done .ico, .coupon-ok .ico { width: 40px; height: 40px; }
.mission-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; padding: 2px 8px 6px 2px; margin-bottom: 16px; }
.mission { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 16px; padding: 8px 14px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.mission-main { min-width: 0; }
.mission-bottom { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.mission-bottom .bar { flex: 1; min-width: 120px; }
.mission.ready { background: #fff3a8; }
.mission.claimed { background: #eef0f4; }
.mission.claimed .mission-main, .mission.claimed .reward-row { opacity: .55; }
.mission-name { font-size: 24px; font-weight: 900; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.bar { position: relative; height: 30px; background: #ffe2a8; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#8ff07a, #3fbf4a); }
.bar-text { position: relative; display: block; text-align: center; font-size: 20px; font-weight: 900; line-height: 24px; }
.mission .reward-row { flex: none; width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
.mission .reward .ico { width: 26px; height: 26px; }
/* a third chip (트레저 레이더) goes to a second line, right-aligned */
.mission .reward-row:has(.reward-radar) { flex: 0 1 auto; min-width: 0; max-width: 66%; flex-wrap: wrap; row-gap: 4px; }
.reward-radar { background: #d4f5e0; }
.mission-act { display: flex; justify-content: center; }
.mission-act .btn { width: 100%; }
/* quests (퀘스트): tabs, hint + reset countdown, a shorter list so it all fits in the 660px modal */
.quest-tabs { margin-bottom: 8px; }
.quest-tabs .tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; }
.tab-count { min-width: 30px; height: 30px; padding: 0 6px; display: grid; place-items: center; background: var(--red); border: 3px solid var(--ink); border-radius: 999px; font-size: 18px; color: #fff; }
.quest-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; margin-bottom: 8px; }
.quest-hint { margin: 0; font-size: 19px; font-weight: 700; word-break: keep-all; }
.quest-reset { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 20px; font-weight: 900; color: #c2410c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quest-reset[hidden] { display: none; }
.quest-reset .ico { width: 26px; height: 26px; }
.quest-list { max-height: 330px; margin-bottom: 12px; }
.quest-tier { margin-left: 10px; font-size: 18px; font-weight: 800; white-space: nowrap; }
.coupon { width: 640px; display: flex; flex-direction: column; gap: 8px; }
.coupon .daily-hint { margin: -4px 0 6px; }
.coupon-form { display: flex; gap: 12px; }
.coupon-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 2px; }
.coupon-input::placeholder { text-transform: none; letter-spacing: 0; }
.coupon .form-error { text-align: center; }
.coupon-result { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.coupon-result:empty { display: none; }
.coupon-ok { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900; color: #1f7a2e; }

/* ---------- mailbox ---------- */
.mailbox { width: 820px; }
.mail-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; padding: 2px 8px 6px 2px; margin-bottom: 16px; }
.mail { display: grid; grid-template-columns: 1fr 140px; align-items: center; gap: 16px; padding: 10px 14px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.mail-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mail-head { display: flex; align-items: baseline; gap: 12px; }
.mail-title { flex: 1; min-width: 0; font-size: 24px; font-weight: 900; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.mail-date { flex: none; font-size: 18px; font-weight: 700; }
.mail-text { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.35; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.mail-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.mail-bottom .reward .ico { width: 26px; height: 26px; }
.mail-expiry { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 900; color: #c2410c; white-space: nowrap; }
.mail-expiry .ico { width: 24px; height: 24px; }
.mail-act { display: flex; justify-content: center; }
.mail-act .btn { width: 100%; }
.mail-empty { display: grid; place-items: center; min-height: 200px; margin: 0 0 16px; font-size: 26px; font-weight: 900; }

/* ---------- stage select ---------- */
.stages-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 12px 22px 14px; }
.stages-main { flex: 1; min-height: 0; display: flex; gap: 20px; }
/* chapter themes: --accent fills, --accent2 is its dark edge, --accent3 a pale wash */
.theme-day { --accent: #ffb627; --accent2: #c97a00; --accent3: #fff3c4; }
.theme-dusk { --accent: #ff7a4d; --accent2: #b8405f; --accent3: #ffe0d2; }
.theme-night { --accent: #4f6bed; --accent2: #25307a; --accent3: #dde3ff; }
.theme-blood { --accent: #e0313f; --accent2: #7a0f1d; --accent3: #ffd9dc; }
.theme-doom { --accent: #8e44c9; --accent2: #3a1258; --accent3: #ecdcff; }
.theme-dawn { --accent: #2fbf8f; --accent2: #17694f; --accent3: #d4f5e8; }
.theme-ash { --accent: #7d8aa0; --accent2: #384152; --accent3: #e3e7ee; }
.theme-abyss { --accent: #1c9fc0; --accent2: #0b4d63; --accent3: #d2f1f8; }
.theme-clockwork { --accent: #c99a3b; --accent2: #6e4d14; --accent3: #f7ebcf; }
.theme-ink { --accent: #4a4458; --accent2: #1c1824; --accent3: #efe9dc; }
/* chapter tabs above the stage list and detail: up to 5 per row (stages.js sets the columns), 6–10 on a second, slimmer row */
.chapter-tabs { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.chapter-tabs.rows-2 { row-gap: 12px; }
.chapter-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 72px;
  padding: 4px 12px 6px 7px;
  border: var(--ol) solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 var(--ink), inset 0 -6px 0 var(--accent3);
  cursor: pointer;
  text-align: left;
  font-weight: 900;
  touch-action: manipulation;
}
/* a taller hit area for touch (into the surrounding padding and gaps) */
.chapter-tab::before { content: ''; position: absolute; inset: -8px -5px; }
.chapter-tab.active { background: linear-gradient(var(--accent3), #fff 85%); box-shadow: 0 5px 0 var(--accent2), inset 0 0 0 3px var(--accent); transform: translateY(-2px); }
.chapter-tab.active::after { content: ''; position: absolute; left: 50%; bottom: -19px; margin-left: -10px; border: 10px solid transparent; border-top-color: var(--accent2); }
.chapter-tab.locked { background: #d9dde5; color: #7b8291; box-shadow: 0 5px 0 #5c6270; cursor: not-allowed; }
.ch-no { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent); border: 3px solid var(--ink); color: #fff; font-size: 28px; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.ch-no .ico { width: 28px; height: 28px; }
.locked .ch-no { background: #a9b0bd; }
.ch-name { min-width: 0; font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-prog { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ch-bar { flex: 1; min-width: 20px; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.ch-bar i { display: block; height: 100%; background: var(--accent); }
.ch-prog b { display: inline-flex; align-items: center; gap: 2px; font-size: 18px; white-space: nowrap; }
.ch-prog .ico { width: 22px; height: 22px; }
.locked .ch-bar { display: none; }
.chapter-tab.complete .ch-prog b { color: #2f8a2a; }
/* stage stars (stages.js): chapter total on the tab, a "!" while the 퍼펙트 클리어 reward waits */
.chapter-tab.perfect .ch-prog .ch-stars { color: #b86e00; }
.pf-dot { position: absolute; right: -8px; top: -10px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 50%; background: var(--red); color: #fff; font-size: 18px; font-weight: 900; line-height: 1; animation: badgeBob 1s ease-in-out infinite; }
.ico.star-off { filter: grayscale(1); opacity: .35; }
/* two rows: slimmer tabs; the "selected" arrow only under the bottom row (it would point into the tab below) */
.rows-2 .chapter-tab { min-height: 56px; padding: 2px 10px 4px 6px; gap: 0 8px; }
.rows-2 .chapter-tab::before { inset: -6px -5px; }
.rows-2 .chapter-tab.upper.active::after { display: none; }
.rows-2 .ch-no { width: 36px; height: 36px; border-radius: 11px; font-size: 22px; -webkit-text-stroke: 5px var(--ink); }
.rows-2 .ch-no .ico { width: 22px; height: 22px; }
.rows-2 .ch-name { font-size: 18px; }
.rows-2 .ch-bar { height: 10px; }
.rows-2 .ch-prog b { font-size: 16px; }
.rows-2 .ch-prog .ico { width: 18px; height: 18px; }
/* world switch above the chapter tabs (stages.js): 1세계 / 2세계 with star totals, a locked world shows its condition */
.world-bar { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: -4px; }
.world-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 2px;
  border: var(--ol) solid var(--ink);
  border-radius: 14px;
  background: #f1dfb6;
  box-shadow: 0 4px 0 var(--ink);
  color: #8a6a4a;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.world-tab::before { content: ''; position: absolute; inset: -6px -5px; }
.world-tab.active { background: var(--yellow); color: var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 -5px 0 rgba(0, 0, 0, .12); }
.world-tab.locked { background: #d9dde5; color: #7b8291; box-shadow: 0 4px 0 #5c6270; cursor: not-allowed; }
.world-tab > .ico { width: 24px; height: 24px; }
.wt-name { font-size: 23px; }
.wt-tag { padding: 0 7px; border: 2px solid var(--ink); border-radius: 8px; background: var(--red); color: #fff; font-size: 15px; line-height: 1.3; }
.world-tab.locked .wt-tag { background: #a9b0bd; }
.wt-stars { display: inline-flex; align-items: center; gap: 2px; font-size: 18px; }
.wt-stars .ico { width: 20px; height: 20px; }
.wt-lock { font-size: 17px; font-weight: 800; }
.detail-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.ch-chip { display: inline-block; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 900; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.stages-main .stage-no { background: var(--accent); }
.stages-main .locked .stage-no { background: #a9b0bd; }
.stage-list { width: 440px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 4px 10px 12px 4px; }
.stage-card {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
  min-height: 92px;
  border: var(--ol) solid var(--ink);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  font-weight: 900;
}
.stage-card .stage-no { grid-row: span 2; }
.stage-card.selected { background: #fff3a8; transform: translateX(8px); }
.stage-card.boss { background: linear-gradient(90deg, #ffe0e0, #fff 60%); }
.stage-card.boss.selected { background: linear-gradient(90deg, #ffc7c7, #fff3a8 60%); }
.stage-card.locked { background: #d9dde5; color: #7b8291; box-shadow: 0 5px 0 #5c6270; cursor: not-allowed; }
.stage-no { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--orange); border: var(--ol) solid var(--ink); color: #fff; font-size: 28px; font-weight: 900; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.locked .stage-no { background: #a9b0bd; }
.stage-no.big { width: 84px; height: 84px; font-size: 40px; flex: none; }
/* world-2 labels ("2-100") */
.stage-no.long { font-size: 19px; letter-spacing: -.5px; -webkit-text-stroke-width: 3.5px; }
.stage-no.big.long { font-size: 26px; -webkit-text-stroke-width: 4.5px; }
.stage-name { font-size: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-flags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* stage card: the flags row below the name stays compact so it usually fits one line */
.stage-card .flag { padding: 0 8px 0 4px; font-size: 16px; }
.stage-card .flag .ico { width: 20px; height: 20px; }
.stage-card .star-strip .ico { width: 20px; height: 20px; }
.stage-card .flag.flag-tr { padding: 0; }
.star-strip { display: inline-flex; align-items: center; }
.star-strip .ico { width: 28px; height: 28px; }
.star-goals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.star-goals .goal { display: inline-flex; align-items: center; gap: 4px; padding: 1px 12px 1px 4px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; color: #8a7a6a; font-size: 18px; font-weight: 900; white-space: nowrap; }
.star-goals .goal.met { background: #fff3a8; color: var(--ink); }
.star-goals .ico { width: 26px; height: 26px; }
.stage-detail { flex: 1; min-width: 0; padding: 10px 22px 12px; display: flex; flex-direction: column; gap: 6px; }
.detail-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 6px 6px 0; }
.detail-head { display: flex; gap: 16px; align-items: center; }
.detail-title { margin: 0; font-size: 34px; font-weight: 900; }
.detail-head p { margin: 2px 0 0; font-size: 20px; }
.enemy-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.strip-label { font-weight: 900; font-size: 19px; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 8px; }
.enemy-mini { position: relative; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 2px; }
.enemy-mini.is-boss { background: #ffd4d4; }
.mini-boss { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font-size: 18px; line-height: 1.1; font-weight: 900; background: var(--red); color: #fff; padding: 0 5px; border-radius: 6px; border: 2px solid var(--ink); }.boss-line { margin: 0; font-weight: 900; color: #c62020; display: flex; align-items: center; gap: 6px; font-size: 21px; }
.boss-line .ico { width: 32px; height: 32px; }
.rewards { background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 6px 16px 10px; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-content: start; }
.rewards > :not(.fc-unit) { grid-column: 1; }
.rewards > .fc-unit { grid-column: 2; grid-row: 1 / span 4; width: 260px; gap: 10px; margin: 4px 0 0; padding: 6px 12px 6px 8px; background: linear-gradient(#fff3a8, #fff); }
.rewards .sub { margin: 2px 0 6px; font-size: 20px; }
.reward-row { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.reward-row.claimed, .fc-unit.claimed { opacity: .55; }
.reward { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 20px; padding: 2px 12px 2px 4px; background: var(--cream2); border: 3px solid var(--ink); border-radius: 999px; white-space: nowrap; }
.reward .ico { width: 30px; height: 30px; }
.sub.done { color: #4a8a2a; }
.fc-unit { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 6px 14px; background: linear-gradient(90deg, #fff3a8, #fff); border: 3px dashed var(--ink); border-radius: 16px; }
.portrait-box.fc { width: 80px; height: 80px; }
.rewards > .fc-unit .portrait-box.fc { width: 72px; height: 72px; flex: none; }
.fc-label { font-size: 18px; font-weight: 900; color: #e2641a; }
.fc-name { font-size: 22px; font-weight: 900; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.detail-actions { flex: none; display: flex; justify-content: flex-end; padding-bottom: 4px; }
.detail-actions { align-items: center; gap: 14px; }
.perfect-box { margin-right: auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 14px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.perfect-box.ready { background: linear-gradient(#fff3a8, #fff); box-shadow: 0 0 0 4px #ffd23f; }
.perfect-box.claimed .pf-title, .perfect-box.claimed .pf-reward > :not(.flag) { opacity: .6; }
.pf-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; white-space: nowrap; }
.pf-count { display: inline-flex; align-items: center; gap: 2px; color: #b86e00; }
.pf-count .ico { width: 24px; height: 24px; }
.pf-reward { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 900; white-space: nowrap; }
.pf-reward span { display: inline-flex; align-items: center; gap: 4px; }
.pf-reward .ico { width: 26px; height: 26px; }
/* 받기 / 받음 at the end of the reward line; a compact button keeps the box within the 88 px action row */
.pf-reward > .btn, .pf-reward > .flag { margin-left: auto; }
.pf-reward > .btn-small { min-height: 36px; padding: 0 14px; font-size: 18px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(0, 0, 0, .14), 0 4px 0 var(--ink); }
.btn-go { min-height: 84px; font-size: 42px; padding: 6px 26px; }
.enemy-strip .boss-line { margin-left: 4px; font-size: 19px; gap: 4px; }
.enemy-strip .boss-line .ico { width: 28px; height: 28px; }
.btn-go .ico { width: 58px; height: 58px; }

/* ---------- lineup ---------- */
.lineup-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 22px 10px; }
.lineup-top { display: flex; gap: 16px; padding: 12px 16px; align-items: center; flex: none; }
.slots { display: grid; grid-template-columns: repeat(5, 142px); grid-auto-rows: 112px; gap: 10px; }
.slot {
  position: relative;
  border: var(--ol) solid var(--ink);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
.slot.empty { background: repeating-linear-gradient(45deg, #f1e3c2 0 12px, #ead8b0 12px 24px); border-style: dashed; cursor: default; }
.slot-no { font-size: 34px; font-weight: 900; color: #c7ad7c; }
.slot .portrait-box { position: absolute; left: 50%; top: 2px; width: 84px; height: 84px; transform: translateX(-50%); }
.slot-name, .card-name { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(43, 26, 15, .82); color: #fff; font-size: 18px; font-weight: 800; line-height: 1.1; padding: 1px 3px 2px; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.slot-tags, .card-tags { position: absolute; left: 3px; right: 3px; top: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; pointer-events: none; }
.slot-name { -webkit-line-clamp: 2; line-clamp: 2; padding-bottom: 0; border-bottom: 2px solid transparent; }
.slot-cost, .card-cost { align-self: flex-end; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; font-size: 18px; line-height: 1.1; font-weight: 900; padding: 0 4px; white-space: nowrap; }
.slot-lv, .card-lv { background: #fff; border: 2px solid var(--ink); border-radius: 8px; font-size: 18px; line-height: 1.1; font-weight: 900; padding: 0 4px; white-space: nowrap; }
.slot.filled:hover { background: #ffe2dc; }
/* lineup: the ▲ 강화 shortcut, a sibling of the card button on its top-right corner. The 56 px tap area
   reaches 12 px into the grid gap; the tags keep 52 px clear on the right so neither it nor the 기력 chip under it
   (up to 47 px wide at right: 3px) covers the level or cost. */
.slot-cell, .card-cell { position: relative; min-width: 0; }
.slot-cell > .slot, .card-cell > .unit-card { width: 100%; height: 100%; }
.slot-cell .slot-tags, .card-cell .card-tags { right: 52px; }
.up-shortcut { position: absolute; top: -12px; right: -12px; z-index: 1; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; touch-action: manipulation; }
.up-shortcut-face { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--ink); }
.slot-cell .up-shortcut { right: -10px; } /* the slot gap is 10 px */
.up-shortcut-face .ico { width: 30px; height: 30px; }
.up-shortcut:hover .up-shortcut-face { background: #eaffdf; }
.up-shortcut:active .up-shortcut-face { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.up-shortcut:focus-visible { outline: 4px dashed #fff; outline-offset: -2px; border-radius: 50%; }
.lineup-actions { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.lineup-status { text-align: center; font-weight: 900; font-size: 26px; }
.lineup-status.warn { color: #d2421b; font-size: 21px; }
.lineup-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.lineup-btns .btn { min-width: 0; min-height: 72px; padding: 6px 10px; gap: 6px; font-size: 23px; }
/* lineup presets (modal) */
.modal.preset-modal { width: 1180px; max-width: 1220px; padding: 20px 26px 26px; }
.presets { position: relative; }
.preset-close { position: absolute; right: 0; top: -6px; min-height: 60px; }
.preset-hint { margin: -6px 0 12px; text-align: center; font-size: 20px; font-weight: 700; color: #7a5a3f; }
.preset-list { display: flex; flex-direction: column; gap: 10px; }
.preset-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 90px; padding: 6px 12px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.preset-row.empty { background: repeating-linear-gradient(45deg, #f6ead0 0 12px, #efdfbd 12px 24px); border-style: dashed; }
.preset-row.current { background: #e6fbd9; }
.preset-no { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); font-size: 26px; font-weight: 900; }
.preset-row.empty .preset-no { background: #fff; color: #b39a6c; }
.preset-info { display: flex; flex-direction: column; min-width: 0; }
.preset-name { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; word-break: keep-all; }
.preset-row.empty .preset-name { color: #9c8158; }
.preset-count { font-size: 20px; font-weight: 800; color: #7a5a3f; }
.preset-units { display: grid; grid-template-columns: repeat(10, 34px); gap: 4px; }
.preset-units-empty { display: block; width: 376px; font-size: 19px; font-weight: 700; color: #7a5a3f; }
.portrait-box.preset-face, .preset-face-empty { width: 34px; height: 34px; border-radius: 8px; background: #fff3d6; border: 2px solid #d9bf8f; overflow: hidden; }
.preset-face-empty { display: block; background: #f1e3c2; border-style: dashed; }
.preset-btns { display: flex; gap: 8px; justify-content: flex-end; }
.preset-btns .btn { min-height: 70px; padding: 4px 18px; }
.preset-name-box { width: 560px; }
.preset-name-row { display: flex; align-items: center; gap: 12px; }
.preset-input { flex: 1; min-width: 0; }
.preset-counter { min-width: 64px; text-align: right; font-size: 20px; color: #7a5a3f; }
.preset-counter.over { color: #d61f1f; }
.unit-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, 138px); grid-auto-rows: 164px; gap: 12px; padding: 14px 14px 14px 4px; align-content: start; }
.unit-card { position: relative; border: var(--ol) solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 5px 0 var(--ink); cursor: pointer; padding: 0; overflow: hidden; }
.unit-card .portrait-box { position: absolute; left: 50%; top: 6px; width: 104px; height: 104px; transform: translateX(-50%); }
.unit-card.in-lineup { background: #c9f7b4; filter: brightness(.94); }
.card-badge { position: absolute; left: 50%; top: 73px; transform: translate(-50%, -50%) rotate(-3deg); background: var(--green); color: #fff; border: 3px solid var(--ink); border-radius: 10px; font-size: 18px; font-weight: 900; padding: 2px 8px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.rar-rare { --rar: #3d9bff; }
.rar-super { --rar: #a64dff; }
.rar-uber { --rar: #ff6a1f; }
.rar-legend { --rar: #ffc21a; }
.unit-card[class*='rar-']::before, .up-item[class*='rar-']::before { content: ''; position: absolute; inset: 0; border-radius: 13px; box-shadow: inset 0 0 0 4px var(--rar, transparent); pointer-events: none; }
.unit-card.rar-legend:not(.in-lineup), .up-item.rar-legend:not(.selected) { background: linear-gradient(120deg, #fff 35%, #fff1a6 50%, #fff 65%) 0 0 / 300% 100%; animation: shine 3s linear infinite; }
.unit-card.rar-legend::before, .up-item.rar-legend::before { box-shadow: inset 0 0 0 5px var(--rar), inset 0 0 14px 4px rgba(255, 190, 40, .7); }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* ---------- upgrade ---------- */
.up-body { flex: 1; min-height: 0; display: flex; gap: 18px; padding: 16px 22px; }
.up-list { width: 300px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 2px 8px 10px 2px; }
.up-item { position: relative; flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 50px 6px 10px; min-height: 84px; border: var(--ol) solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--ink); cursor: pointer; text-align: left; }
.up-item.selected { background: #fff3a8; transform: translateX(6px); }
.up-item-text { display: flex; flex-direction: column; min-width: 0; }
.up-item-name { font-weight: 900; font-size: 20px; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
.up-item-lv { flex: none; font-weight: 800; font-size: 18px; color: #7a5a3f; white-space: nowrap; }
.dot { position: absolute; right: 8px; top: 6px; background: var(--green); color: #fff; border: 3px solid var(--ink); border-radius: 999px; font-size: 18px; line-height: 1.2; font-weight: 900; padding: 0 7px; }
.dot-ev { background: var(--pink); }
.up-detail { flex: 1; padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.up-head { display: flex; gap: 20px; align-items: center; }
.up-head .portrait-box { background: radial-gradient(circle, #fff 50%, #ffe9b8 72%); border: var(--ol) solid var(--ink); border-radius: 24px; }
.up-head-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-head-text p { margin: 0; }
.form-tag { font-weight: 900; font-size: 18px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 1px 10px; }
/* 외형 변경 (awakened units) */
.look-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.look-label { font-weight: 900; font-size: 18px; color: #7a5a3f; }
.look-row .look-btn { min-height: 44px; padding: 2px 14px; font-size: 19px; }
.lv-line { display: flex; align-items: baseline; gap: 8px; }
.lv-big { font-size: 40px; font-weight: 900; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; }
.lv-plus { font-size: 30px; font-weight: 900; color: #ffd23f; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.lv-cost { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.up-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; }
.stat { display: flex; justify-content: space-between; gap: 8px; background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 2px 10px; font-size: 19px; }
.stat dt { color: #7a5a3f; font-weight: 800; }
.stat dd { margin: 0; font-weight: 900; text-align: right; }
.diff { display: block; font-size: 18px; }
.diff.up { color: #2c9b26; }
.diff.down { color: #d2421b; }
.abilities { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ability { display: flex; gap: 8px; align-items: flex-start; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 6px 10px; font-size: 19px; font-weight: 700; }
.ab-tag { flex: none; background: var(--blue); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; font-weight: 900; font-size: 18px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ab-strong, .ab-massive { background: #ff6b4a; }
.ab-resist, .ab-metal { background: #8f9bb3; }
.ab-freeze { background: #4ac3ff; }
.ab-slow { background: #a07bff; }
.ab-weaken { background: #b0a020; }
.ab-critical { background: #ffb21a; }
.ab-wave { background: #2fc4a8; }
.ability-none { margin: 0; font-size: 19px; }
.evolve { border-top: 4px dashed #d9b77c; padding-top: 10px; }
.evolve-body { display: flex; gap: 16px; }
.evolve-preview { width: 220px; flex: none; display: flex; flex-direction: column; align-items: center; text-align: center; background: linear-gradient(#fff3a8, #fff); border: 3px solid var(--ink); border-radius: 18px; padding: 8px; }
.evolve-preview p { margin: 4px 0 0; }
.evolve-name { font-weight: 900; font-size: 22px; word-break: keep-all; overflow-wrap: anywhere; }
.evolve-info { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.evolve-req { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; justify-content: flex-end; }
.credit { margin: 0; text-align: right; }

/* ---------- base upgrades ---------- */
.base-body { flex: 1; min-height: 0; padding: 16px 22px; }
.base-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 10px; }
.base-card { display: grid; grid-template-columns: 76px 1fr auto; grid-template-rows: auto auto; gap: 6px 14px; padding: 12px 16px; align-items: center; }
.base-ico { grid-row: span 2; width: 76px; height: 76px; display: grid; place-items: center; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.base-ico .ico { width: 56px; height: 56px; }
.base-main { min-width: 0; }
.base-main p { margin: 2px 0 4px; }
.base-name { margin: 0; font-size: 25px; font-weight: 900; }
.lv-chip { background: var(--ink); color: #fff; border-radius: 8px; padding: 0 10px; font-weight: 900; font-size: 18px; }
/* base level bar (base.js): blocks of 10 levels, a faint tick between levels */
.lv-bar { display: flex; gap: 6px; }
.lv-seg { position: relative; flex: 0 1 calc(var(--n) * 12px); min-width: 0; height: 16px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; overflow: hidden; }
.lv-seg i { display: block; height: 100%; background: var(--orange); }
.lv-seg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 2px), rgba(43, 26, 15, .3) 0) 0 0 / calc(100% / var(--n)) 100% repeat-x; }
.base-values { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 24px; white-space: nowrap; }
.val-now { background: #fff; border: 3px solid var(--ink); border-radius: 10px; padding: 0 10px; }
.val-next { background: #d6f9c6; border: 3px solid var(--ink); border-radius: 10px; padding: 0 10px; color: #237a1f; }
.val-arrow { color: var(--orange); }
.base-buy { grid-column: 2 / span 2; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.base-buy .btn { min-height: 54px; font-size: 22px; padding: 4px 20px; }

/* ---------- gacha ---------- */
.gacha-body { flex: 1; min-height: 0; display: flex; gap: 20px; padding: 16px 22px; }
.gacha-main { flex: 1; min-width: 0; display: flex; gap: 20px; }
.banner { width: 600px; flex: none; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.banner-list ~ .gacha-main .banner { width: 520px; }
/* banner choice: standard first, then one entry per pickup; scrolls for any number of banners */
.banner-list { width: 250px; flex: none; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thick; scrollbar-color: #c98b4f transparent; }
.banner-pick { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; text-align: left; cursor: pointer; }
.banner-pick.rar-legend { background: linear-gradient(#fff4b8, #fff); }
.banner-pick.active { background: var(--yellow); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12), 0 0 0 3px #fff; }
.banner-pick .portrait-box.pick-thumb { width: 64px; height: 64px; flex: none; background: radial-gradient(circle, #fff 50%, #ffe9b8 72%); border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; }
.pick-std { display: flex; align-items: center; justify-content: center; }
.pick-std .ico { width: 46px; height: 46px; }
.pick-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pick-name { font-size: 20px; line-height: 1.15; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the rate goes under the rarity when the list is narrowed by a thick scrollbar */
.pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 18px; font-weight: 900; }
.pick-meta .rarity { font-size: 15px; padding: 0 8px; }
.pick-rate { color: #d2332b; white-space: nowrap; }
.banner-art.pickup { justify-content: space-evenly; background: radial-gradient(circle at 30% 45%, #fff6b0, #ffb36b 55%, #ff6a1f); }
.banner-art.pickup.rar-legend { background: radial-gradient(circle at 30% 45%, #fffbe0, #ffd23f 50%, #ff8ac8 85%, #9d6bff); }
.banner-feature.portrait-box { z-index: 1; width: 230px; height: 230px; transform: translateY(-22px); }
.banner-art.pickup .machine { transform: scale(.62) translateY(-60px); margin: 0 -30px; }
.banner-art.pickup .banner-name { font-size: 32px; line-height: 1.05; padding: 0 10px; -webkit-text-stroke: 8px var(--ink); }
.banner-ribbon { position: absolute; z-index: 3; left: 10px; top: 12px; padding: 2px 14px; border: 3px solid var(--ink); border-radius: 10px; background: #ff4b5c; color: #fff; font-size: 24px; font-weight: 900; transform: rotate(-6deg); text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink); }
.banner-art { position: relative; height: 300px; border: var(--ol) solid var(--ink); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 60%, #fff6b0, #ff9ac0 60%, #b06bff); display: flex; align-items: center; justify-content: center; }
.banner-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255, 255, 255, .35) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite; }
.banner-art .machine { transform: scale(.78) translateY(-34px); }
.banner-name { z-index: 2; position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 40px; font-weight: 900; color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; }
.banner-desc { margin: 0; font-weight: 700; font-size: 20px; }
.roll-buttons { display: flex; gap: 14px; margin-top: auto; }
.btn-roll { flex: 1; min-height: 96px; border-radius: 28px; }
.btn-roll > .btn-label > span { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.btn-roll b { font-size: 32px; }
.btn-roll small { display: flex; align-items: center; gap: 4px; font-size: 22px; }
.btn-roll small .ico { width: 30px; height: 30px; }
.rates { flex: 1; min-width: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.rate-note { grid-column: 1 / -1; font-size: 18px; font-weight: 900; color: #d2332b; }
.pool-unit.pickup { background: var(--yellow); border-width: 3px; }
.pool-rate { color: #d2332b; font-size: 18px; }
.rate-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; flex: none; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; }
.rate-row.empty { opacity: .6; }
.rate-row.rar-legend { background: linear-gradient(#fff4b8, #fff); box-shadow: 0 0 0 3px #ffd23f; }
.rate-row > .rarity { justify-self: start; }
.rate-pct { font-size: 26px; text-align: right; }
.rate-pool { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.pool-unit { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 0 10px 0 0; }
.pool-unit .portrait-box.mini { width: 46px; height: 46px; }
.rates > p { margin: 0; }

.machine { position: relative; width: 190px; height: 250px; z-index: 1; }
.machine-dome { position: absolute; left: 10px; top: 0; width: 170px; height: 150px; border-radius: 85px 85px 20px 20px; border: 5px solid var(--ink); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95) 0 12%, rgba(220, 245, 255, .7) 13% 100%); overflow: hidden; }
.machine-body { position: absolute; left: 0; top: 140px; width: 190px; height: 110px; border-radius: 18px; border: 5px solid var(--ink); background: linear-gradient(#ff6a4d, #d93a1e); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .4); }
.machine-handle { position: absolute; left: 22px; top: 22px; width: 54px; height: 54px; border-radius: 50%; border: 5px solid var(--ink); background: var(--yellow); }
.machine-handle::after { content: ''; position: absolute; left: 50%; top: 4px; width: 10px; height: 36px; margin-left: -5px; background: var(--ink); border-radius: 5px; }
.machine-slot { position: absolute; right: 22px; top: 28px; width: 64px; height: 50px; border-radius: 12px; border: 5px solid var(--ink); background: #3a2416; }
.cap { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 4px solid var(--ink); background: linear-gradient(var(--c) 50%, #fff 50%); }
.c1 { --c: #ff5a8a; left: 10px; top: 80px; }
.c2 { --c: #45b6ff; left: 52px; top: 92px; }
.c3 { --c: #ffd23f; left: 96px; top: 84px; }
.c4 { --c: #5fd35a; left: 30px; top: 44px; }
.c5 { --c: #b36bff; left: 76px; top: 50px; }
.c6 { --c: #ff8a3d; left: 112px; top: 34px; }
.machine.shaking { transform: scale(1.5); animation: shake .12s linear infinite; }
.machine.shaking .machine-handle { animation: spin .5s linear infinite; }
@keyframes shake { 0% { translate: -6px 0; } 50% { translate: 6px 2px; } 100% { translate: -6px 0; } }

/* capsule sequence (overlay on the whole stage) */
.gacha-show { position: absolute; inset: 0; z-index: 40; background: radial-gradient(circle at 50% 45%, #5b3a8a, #1d1030 75%); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; cursor: pointer; animation: fade .2s; }
.show-area { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.show-counter { position: absolute; left: 24px; top: 20px; font-size: 30px; font-weight: 900; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.show-hint { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-weight: 900; font-size: 28px; animation: blink 1s ease-in-out infinite; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
@keyframes blink { 50% { opacity: .35; } }
.show-skip { position: absolute; right: 20px; top: 16px; z-index: 3; }
.capsule-wrap { position: relative; }
.capsule-wrap.drop { animation: drop .5s cubic-bezier(.3, 1.5, .6, 1); }
@keyframes drop { from { transform: translateY(-520px) rotate(-120deg); } }
.capsule { position: relative; width: 230px; height: 230px; border-radius: 50%; border: 7px solid var(--ink); overflow: hidden; animation: wobble 1.2s ease-in-out infinite; box-shadow: 0 0 0 0 transparent; }
@keyframes wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.cap-top { position: absolute; left: 0; right: 0; top: 0; height: 50%; background: var(--capc, #4aa8ff); border-bottom: 7px solid var(--ink); }
.cap-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: #fff; }
.cap-shine { position: absolute; left: 26%; top: 12%; width: 22%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .8); transform: rotate(-30deg); }
.cap-rare { --capc: #3d9bff; }
.cap-super { --capc: #a64dff; }
.cap-uber { --capc: #ff6a1f; }
.cap-legend .cap-top { background: linear-gradient(90deg, #ff5a5a, #ffc94a, #6ee36a, #4ab8ff, #b36bff); animation: hue 1.5s linear infinite; }
.cap-legend .cap-bottom { background: linear-gradient(#fff6b8, #ffbf1a); }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.capsule.hot { box-shadow: 0 0 60px 20px rgba(190, 110, 255, .8); }
.cap-uber.hot { box-shadow: 0 0 80px 30px rgba(255, 120, 40, .85); }
.rumble .capsule { animation: shake .08s linear infinite; }
.capsule.cap-legend { animation: wobble 1.2s ease-in-out infinite, legend-glow .8s ease-in-out infinite alternate; }
.rumble .capsule.cap-legend { animation: shake .08s linear infinite, legend-glow .3s ease-in-out infinite alternate; }
@keyframes legend-glow { from { box-shadow: 0 0 60px 20px rgba(255, 210, 60, .9); } to { box-shadow: 0 0 120px 50px rgba(255, 120, 230, .9); } }
.cap-alert { position: absolute; right: -70px; top: -40px; font-size: 90px; font-weight: 900; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; animation: hop .4s ease-in-out infinite; }
.cap-alert.legend { right: -110px; color: #fff; text-shadow: 0 0 24px #ffd23f; animation-duration: .25s; }
.gacha-show { transition: background .5s; }
.gacha-show.legend-mode { background: radial-gradient(circle at 50% 45%, #fff3a8, #ffb000 38%, #6a2c00 82%); }
.reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.reveal .rays { position: absolute; width: 1800px; height: 1800px; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 9deg, transparent 9deg 18deg); animation: spin 10s linear infinite; }
.reveal.rar-super .rays { background: repeating-conic-gradient(rgba(200, 140, 255, .45) 0 9deg, transparent 9deg 18deg); }
.reveal.rar-uber .rays { background: repeating-conic-gradient(rgba(255, 150, 60, .5) 0 9deg, transparent 9deg 18deg); animation-duration: 6s; }
.reveal.rar-legend .rays { background: repeating-conic-gradient(#ff5a5a88 0 6deg, transparent 6deg 12deg, #ffc94a88 12deg 18deg, transparent 18deg 24deg, #6ee36a88 24deg 30deg, transparent 30deg 36deg, #4ab8ff88 36deg 42deg, transparent 42deg 48deg, #b36bff88 48deg 54deg, transparent 54deg 60deg); animation-duration: 3s; }
.reveal.rar-legend .flash { background: #fff6c0; animation-duration: 1.4s; }
.reveal.rar-legend .portrait-box.reveal-portrait { filter: drop-shadow(0 0 22px #ffd23f) drop-shadow(0 0 8px #fff); }
.legend-banner { position: absolute; top: 44px; font-size: 56px; font-weight: 900; line-height: 1; color: #ffd23f; -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; transform: rotate(-3deg); animation: pop .6s cubic-bezier(.3, 1.8, .5, 1) backwards, legend-bob 1s .6s ease-in-out infinite; }
@keyframes legend-bob { 50% { transform: rotate(-3deg) translateY(-8px) scale(1.05); } }
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkles i { position: absolute; width: 54px; height: 54px; background: #fff7b0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 1.2s ease-in-out infinite; }
.sparkles i:nth-child(1) { left: 24%; top: 16%; }
.sparkles i:nth-child(2) { left: 72%; top: 20%; animation-delay: .3s; }
.sparkles i:nth-child(3) { left: 18%; top: 58%; animation-delay: .6s; }
.sparkles i:nth-child(4) { left: 78%; top: 62%; animation-delay: .15s; }
.sparkles i:nth-child(5) { left: 33%; top: 82%; animation-delay: .45s; }
.sparkles i:nth-child(6) { left: 64%; top: 84%; animation-delay: .75s; }
.sparkles i:nth-child(7) { left: 10%; top: 34%; animation-delay: .9s; }
.sparkles i:nth-child(8) { left: 86%; top: 40%; animation-delay: .5s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .3; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
.flash { position: absolute; inset: 0; background: #fff; animation: flash .6s ease-out forwards; pointer-events: none; }
@keyframes flash { to { opacity: 0; } }
.reveal-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: pop .45s cubic-bezier(.3, 1.8, .5, 1); }
.portrait-box.reveal-portrait { width: 300px; height: 300px; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .7)); }
.reveal-name { font-size: 50px; font-weight: 900; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; }
.reveal-rarity .rarity { font-size: 26px; padding: 2px 18px; }
.reveal .badge { font-size: 30px; }
.badge { display: inline-block; border: 3px solid var(--ink); border-radius: 10px; padding: 0 10px; font-weight: 900; font-size: 18px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; transform: rotate(-4deg); }
.badge-new { background: #ff3d6e; animation: hop .7s ease-in-out infinite; }
.badge-plus { background: #2fb34a; }
.badge-xp { background: #1e8fe0; }
.show-summary { color: var(--ink); padding: 18px 24px 22px; max-width: 1180px; cursor: default; animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }
.summary-grid { display: grid; grid-template-columns: repeat(6, 160px); gap: 12px; justify-content: center; margin-bottom: 16px; }
.summary-grid.n1 { grid-template-columns: 220px; }
.sum-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 16px; padding: 6px 6px 10px; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.sum-card .portrait-box { width: 96px; height: 96px; }
.n1 .sum-card .portrait-box { width: 160px; height: 160px; }
.sum-name { font-weight: 900; font-size: 18px; line-height: 1.15; min-height: 2.3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-width: 100%; text-align: center; word-break: keep-all; overflow-wrap: anywhere; align-content: center; }
.sum-card .badge { position: absolute; right: -8px; top: -8px; }
.sum-card.rar-super { background: linear-gradient(#efdcff, #fff); }
.sum-card.rar-uber { background: linear-gradient(#ffdcc4, #fff); box-shadow: 0 0 18px 4px rgba(255, 130, 50, .8); }
.sum-card.rar-legend { background: linear-gradient(#fff09a, #fff); box-shadow: 0 0 0 4px #ffd23f, 0 0 24px 8px rgba(255, 190, 40, .95); }
.show-summary.best-legend { box-shadow: 0 6px 0 rgba(43, 26, 15, .35), 0 0 0 6px #ffd23f, 0 0 60px 18px rgba(255, 210, 80, .8); }

/* ---------- battle ---------- */
#battle-layer { position: fixed; inset: 0; z-index: 0; background: #000; touch-action: none; }
.battle-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
body.in-battle #stage { background: transparent; pointer-events: none; }
body.in-battle .screen-battle { background: none; }
.pe-auto { pointer-events: auto; }
.result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 10, 4, .55); animation: fade .3s; overflow: hidden; }
.result-rays { position: absolute; width: 1800px; height: 1800px; background: repeating-conic-gradient(rgba(255, 230, 120, .25) 0 9deg, transparent 9deg 18deg); animation: spin 14s linear infinite; }
.result-panel { position: relative; min-width: 620px; max-width: 960px; padding: 14px 36px 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.result-title { font-size: 84px; font-weight: 900; line-height: 1; color: #ffd23f; -webkit-text-stroke: 15px var(--ink); paint-order: stroke fill; transform: rotate(-3deg); margin: -40px 0 6px; text-shadow: 0 7px 0 var(--ink); }
.lose .result-title { color: #9fb3d6; }
.result-stage { font-weight: 900; font-size: 26px; }
.result-hint { margin: 0; font-size: 20px; text-align: center; max-width: 640px; word-break: keep-all; }
.result-actions { gap: 16px; }
.result-rewards { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reward-row.big .reward { font-size: 30px; padding: 6px 20px 6px 8px; }
.reward-row.big .reward .ico { width: 46px; height: 46px; }
.first-clear { margin-top: 2px; display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 26px; color: #e2641a; animation: hop 1s ease-in-out infinite; }
.first-clear .ico { width: 38px; height: 38px; }
/* the win's stars (battle.js): three stars, then the conditions met */
.result-stars { display: flex; align-items: center; gap: 18px; padding: 4px 18px 6px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; }
.rs-stars { display: flex; align-items: flex-end; }
.rs-stars .ico { width: 56px; height: 56px; }
.rs-stars .ico:nth-child(2) { width: 68px; height: 68px; margin-bottom: 8px; }
.rs-stars .star-on { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.rs-stars .star-on:nth-child(2) { animation-delay: .2s; }
.rs-stars .star-on:nth-child(3) { animation-delay: .4s; }
.rs-side { display: flex; flex-direction: column; gap: 2px; }
.rs-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 19px; font-weight: 900; color: #8a7a6a; }
.rs-goals li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rs-goals li.met { color: var(--ink); }
.rs-goals .ico { width: 24px; height: 24px; }
.rs-note { display: flex; gap: 10px; font-size: 17px; font-weight: 800; color: #7a5a3f; }
.rs-note:empty { display: none; }
.rs-note b { color: #e2641a; }
/* portrait beside the text: a first clear with stars, a new unit and a treasure still fits the 720px stage */
.join-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 6px 22px 6px 8px; border: var(--ol) solid var(--ink); border-radius: 24px; background: radial-gradient(circle, #fff8c8, #ffc56b); animation: pop .5s .3s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.join-rays { position: absolute; width: 900px; height: 900px; top: 50%; left: 50%; margin: -450px 0 0 -450px; background: repeating-conic-gradient(rgba(255, 255, 255, .6) 0 8deg, transparent 8deg 16deg); animation: spin 8s linear infinite; }
.join-card.rar-legend { background: radial-gradient(circle, #fffbe0, #ffd23f 55%, #ff9ad5); box-shadow: 0 0 0 4px #ffd23f, 0 0 30px 8px rgba(255, 200, 60, .9); }
.join-card.rar-legend .join-rays { background: repeating-conic-gradient(#ff5a5a88 0 6deg, #ffc94a88 6deg 12deg, #6ee36a88 12deg 18deg, #4ab8ff88 18deg 24deg, #b36bff88 24deg 30deg); }
.join-text, .portrait-box.join-portrait { position: relative; }
.join-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.join-label { font-weight: 900; font-size: 22px; line-height: 1.2; word-break: keep-all; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.portrait-box.join-portrait { flex: none; width: 100px; height: 100px; }
.join-name { font-weight: 900; font-size: 30px; line-height: 1.15; word-break: keep-all; -webkit-text-stroke: 7px #fff; paint-order: stroke fill; }

.fatal { margin: auto; padding: 30px 40px; text-align: center; }

/* ---------- codex (도감) ---------- */
/* 도감 and 보물 share the last row of the home grid, one column each */
.btn-codex { --bg: #c49bff; --bg2: #8a55e0; min-height: 54px; border-radius: 24px; font-size: 28px; padding: 4px 18px; }
.btn-codex .ico { width: 40px; height: 40px; }
.btn-codex.btn-treasure { --bg: #ffc94a; --bg2: #d98a00; }
/* body 632 = 12 + bar 56 + 12 + main 540 + 12 */
.cx-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 22px; }
.cx-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px; }
.cx-tabs { flex: none; display: flex; gap: 8px; }
.cx-tabs .tab { flex: none; width: 92px; min-height: 54px; }
.cx-tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.cx-search { flex: 1; min-width: 120px; height: 52px; padding: 0 14px; font-size: 21px; }
.cx-select { flex: none; max-width: 170px; height: 52px; padding: 0 6px; border: var(--ol) solid var(--ink); border-radius: 14px; background: #fff; font-size: 20px; font-weight: 800; cursor: pointer; outline: none; }
.cx-select:focus-visible, .cx-chip:focus-visible { outline: 4px dashed #fff; outline-offset: 2px; }
.cx-count { flex: none; min-width: 74px; text-align: right; font-size: 20px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.cx-tip { margin: 0; font-size: 20px; font-weight: 800; color: #4b3424; word-break: keep-all; }
.cx-main { flex: 1; min-height: 0; display: flex; gap: 16px; }
/* 3 × 138 + 2 × 12 + padding 8 + scrollbar 14 = 460 */
.unit-grid.cx-grid { flex: none; width: 464px; grid-template-columns: repeat(3, 138px); }
.cx-grid .unit-card.cx-sel { background: #fff3a8; animation: none; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--orange); }
.cx-unowned .portrait-box { filter: grayscale(.8); opacity: .75; }
.cx-card.cx-boss { background: linear-gradient(#ffe0e0, #fff 70%); }
.cx-own { background: #e3e6ec; border: 2px solid var(--ink); border-radius: 8px; font-size: 18px; line-height: 1.1; font-weight: 900; padding: 0 5px; white-space: nowrap; }
.cx-own.on { background: #c9f7b4; }
.cx-own.boss { background: var(--red); color: #fff; }
.cx-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thick; scrollbar-color: #c98b4f transparent; }
.cx-detail > * { flex: none; }
.cx-detail .sub { margin: 4px 0 0; }
.cx-head { display: flex; gap: 18px; align-items: flex-start; }
.cx-head > .portrait-box, .cx-pic { flex: none; background: radial-gradient(circle, #fff 50%, #ffe9b8 72%); border: var(--ol) solid var(--ink); border-radius: 24px; }
.cx-pic.boss { background: radial-gradient(circle, #fff 45%, #ffc4c4 75%); }
.cx-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cx-head-text .detail-title { line-height: 1.15; word-break: keep-all; overflow-wrap: anywhere; }
.cx-flags { flex-wrap: wrap; gap: 6px 8px; }
.cx-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cx-lines li { position: relative; padding-left: 22px; font-size: 20px; font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.cx-lines li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--orange); }
.cx-credit { margin: 0; }
.cx-desc { margin: 0; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.cx-hint { margin: 0; line-height: 1.35; word-break: keep-all; }
.cx-splash { margin: 0; overflow: hidden; background: radial-gradient(circle, #fff8d8, #ffd99a); border: var(--ol) solid var(--ink); border-radius: 18px; }
.cx-splash img { display: block; width: 100%; max-height: 440px; object-fit: contain; }
.cx-quote { padding: 10px 18px; background: var(--ink); color: #fff; font-size: 22px; font-weight: 800; text-align: center; }
.cx-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.cx-form-head { display: flex; gap: 12px; align-items: center; }
.cx-form-head .portrait-box { background: #fff3d6; border: 3px solid var(--ink); border-radius: 12px; }
.cx-form-title { min-width: 0; }
.cx-form-name { margin: 2px 0 0; font-size: 25px; font-weight: 900; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.stats.cx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-form .stat, .cx-form .ability { background: var(--cream); }
.cx-trait { display: inline-block; padding: 1px 12px; border: 3px solid var(--ink); border-radius: 999px; font-size: 19px; font-weight: 900; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.cx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 58px; padding: 3px 12px 3px 3px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; text-align: left; font-size: 19px; font-weight: 900; }
.cx-chip:hover { background: #fff3a8; }
.cx-chip.boss { background: #ffe0e0; }
.cx-chip .portrait-box { width: 48px; height: 48px; flex: none; }
.cx-chip[class*='rar-'] { box-shadow: 0 3px 0 var(--ink), inset 0 0 0 3px var(--rar); }
.cx-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.cx-chip-text small { font-size: 18px; font-weight: 700; color: #7a5a3f; }
.cx-appear { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cx-appear li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 6px 12px 6px 6px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; }
.cx-stage-no { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent, var(--orange)); border: 3px solid var(--ink); color: #fff; font-size: 21px; font-weight: 900; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.cx-stage-no { justify-self: center; }
.cx-stage-no.long { width: 62px; border-radius: 23px; font-size: 18px; letter-spacing: -.5px; -webkit-text-stroke-width: 4px; }
/* a boss character's per-stage entries (codex.js groupDetail): picture and first stage, the chosen one lit */
.cx-vwrap { display: contents; }
.cx-variants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.cx-chip.cx-variant { min-height: 50px; padding: 2px 10px 2px 2px; font-size: 18px; }
.cx-chip.cx-variant .portrait-box { width: 42px; height: 42px; }
.cx-chip.cx-variant.cx-on { background: #fff3a8; box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--orange); }
.cx-appear-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 21px; font-weight: 900; }
.cx-appear-mag { font-size: 19px; font-weight: 900; text-align: right; white-space: nowrap; }
.cx-appear-when { grid-column: 2 / -1; font-size: 18px; font-weight: 700; color: #7a5a3f; }
.cx-text { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.cx-note { margin: 0; padding: 4px 10px; font-size: 19px; font-weight: 700; line-height: 1.35; background: var(--cream2); border-radius: 10px; word-break: keep-all; overflow-wrap: anywhere; }
.cx-trait-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; background: #fff; border: var(--ol) solid var(--ink); border-radius: 18px; }
.cx-trait-card .strip-label { align-self: flex-start; }
.cx-trait-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cx-trait-count { font-size: 20px; }
.cx-rule { display: flex; flex-direction: column; gap: 2px; }
.cx-rule small { font-size: 18px; color: #7a5a3f; }
.ab-tag.cx-term { background: #c98b4f; }

/* ---------- treasures (보물; js/ui/treasures.js) ---------- */
/* a picture in its tier frame: 0 unowned (dark silhouette + ?), 1 조잡한 bronze, 2 평범한 silver, 3 최고급 gold */
.tr-icon { position: relative; display: inline-grid; place-items: center; flex: none; width: 96px; height: 96px; border: var(--ol) solid var(--ink); border-radius: 18px; background: radial-gradient(circle, #fff 45%, var(--tr-glow, #e3e6ec) 100%); overflow: hidden; }
.tr-icon.tier-0 { --tr-glow: #59606e; background: radial-gradient(circle, #8a92a3 30%, #3a3f4a 100%); }
.tr-icon.tier-1 { --tr-glow: #e0a06a; box-shadow: inset 0 0 0 4px #cd7f32; }
.tr-icon.tier-2 { --tr-glow: #c9d2de; box-shadow: inset 0 0 0 4px #aeb8c6; }
.tr-icon.tier-3 { --tr-glow: #ffd23f; box-shadow: inset 0 0 0 4px #ffc21a, 0 0 12px 3px rgba(255, 200, 40, .85); }
.tr-img { width: 84%; height: 84%; object-fit: contain; display: block; pointer-events: none; }
.tr-icon.tier-0 .tr-img { filter: brightness(0); opacity: .55; }
.tr-fallback { display: none; position: absolute; width: 60%; height: 60%; }
.tr-missing .tr-img { display: none; }
.tr-missing .tr-fallback { display: inline-flex; }
.tr-icon.tier-0.tr-missing .tr-fallback { filter: brightness(0); opacity: .4; }
.tr-q { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 46px; font-weight: 900; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; }
.tr-icon.mini { width: 30px; height: 30px; border-width: 2px; border-radius: 8px; }
.tr-icon.mini.tier-3 { box-shadow: inset 0 0 0 2px #ffc21a, 0 0 6px 1px rgba(255, 200, 40, .85); }
.tr-icon.mini.tier-1 { box-shadow: inset 0 0 0 2px #cd7f32; }
.tr-icon.mini.tier-2 { box-shadow: inset 0 0 0 2px #aeb8c6; }
.tr-icon.mini .tr-q { font-size: 18px; -webkit-text-stroke: 4px var(--ink); }
.tr-icon.tiny { width: 26px; height: 26px; border-width: 2px; border-radius: 7px; vertical-align: middle; margin-right: 4px; }
.tr-icon.tiny .tr-q { font-size: 16px; -webkit-text-stroke: 4px var(--ink); }
.tr-icon.mid { width: 64px; height: 64px; border-radius: 14px; }
.tr-icon.mid .tr-q { font-size: 32px; -webkit-text-stroke: 6px var(--ink); }
.tr-icon.drop { width: 84px; height: 84px; }
.tr-icon.big { width: 180px; height: 180px; border-radius: 26px; }
.tr-icon.big .tr-q { font-size: 90px; -webkit-text-stroke: 12px var(--ink); }
.tr-tier { display: inline-block; padding: 0 10px; border: 2px solid var(--ink); border-radius: 8px; font-size: 17px; font-weight: 900; white-space: nowrap; background: #e3e6ec; }
.tr-tier.tier-1 { background: #f0c08e; }
.tr-tier.tier-2 { background: #dfe5ee; }
.tr-tier.tier-3 { background: #ffd23f; }
/* screen: body 632 = 12 + 608 + 12; chapters 170 | sets 748 | summary 290 with 14 gaps */
.tr-body { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 12px 22px; }
.tr-chapters { flex: none; width: 170px; display: flex; flex-direction: column; gap: 6px; }
.tr-ch { flex: 1; min-height: 0; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 2px 10px 2px 6px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); cursor: pointer; text-align: left; font-weight: 900; }
.tr-ch.active { background: linear-gradient(var(--accent3), #fff); box-shadow: 0 3px 0 var(--accent2), inset 0 0 0 3px var(--accent); }
.tr-ch-no { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); border: 3px solid var(--ink); color: #fff; font-size: 20px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.tr-ch-name { min-width: 0; font-size: 16px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-ch-count { font-size: 15px; color: #7a5a3f; }
.tr-sets { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tr-set { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 10px; }
.tr-set.active { background: linear-gradient(#fff8d6, var(--cream) 40%); }
.tr-set.full { box-shadow: 0 6px 0 rgba(43, 26, 15, .35), 0 0 0 4px #ffd23f; }
.tr-set-head { display: flex; align-items: center; gap: 10px; }
.tr-set-name { flex: 1; min-width: 0; margin: 0; font-size: 24px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-chip { flex: none; padding: 1px 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; font-size: 18px; font-weight: 900; white-space: nowrap; }
.tr-act { background: #e3e6ec; color: #6b7280; }
.tr-act.on { background: #ffd23f; color: var(--ink); }
.tr-effect { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 18px; font-weight: 900; }
.tr-effect-now { color: #b45309; }
.tr-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tr-card { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--ink); cursor: pointer; font-weight: 900; }
.tr-card:hover { background: #fff3a8; }
.tr-card.tier-0 { background: #eceef2; }
.tr-name { max-width: 100%; min-height: 2.3em; font-size: 16px; line-height: 1.15; text-align: center; word-break: keep-all; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tr-sub { font-size: 15px; color: #7a5a3f; white-space: nowrap; }
.tr-sub.tier-1 { color: #9a5a1e; }
.tr-sub.tier-3 { color: #b86e00; }
.tr-summary { flex: none; width: 290px; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c98b4f transparent; }
.tr-summary > * { flex: none; }
.tr-summary .sub { margin: 4px 0 0; }
.tr-radar { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; border: 3px solid var(--ink); border-radius: 999px; background: #d4f5e0; font-size: 19px; font-weight: 900; }
.tr-radar .ico { width: 36px; height: 36px; }
.tr-radar b { margin-left: auto; font-size: 24px; }
.tr-radar-note { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; word-break: keep-all; }
.tr-fest { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; font-size: 16px; font-weight: 700; word-break: keep-all; }
.tr-fest b { font-size: 18px; }
.tr-fest.on { background: linear-gradient(#ffe27a, #fff3c4); }
.tr-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 18px; font-weight: 900; }
.tr-total { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 17px; font-weight: 800; }
.tr-total li { padding: 2px 8px; border-radius: 8px; background: #fff3c4; word-break: keep-all; }
.modal.tr-modal { width: 760px; }
.tr-detail { display: flex; gap: 22px; align-items: flex-start; }
.tr-detail-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-detail-text p { margin: 0; word-break: keep-all; }
.tr-desc { font-size: 21px; font-weight: 700; line-height: 1.4; }
/* stage select (stages.js): the card's treasure flag, the detail's treasure row, the radar toggle, the festival banner */
.flag.flag-tr { padding: 0; border: 0; background: none; }
.tr-stage { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 8px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; cursor: pointer; text-align: left; font-weight: 900; }
.tr-stage.tier-3 { background: linear-gradient(90deg, #fff3a8, #fff 60%); }
.tr-stage-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-stage-name { display: flex; align-items: center; gap: 8px; font-size: 21px; word-break: keep-all; }
.tr-stage .small { font-size: 17px; word-break: keep-all; }
.radar-toggle { flex: none; align-self: flex-end; margin: 0; font-size: 21px; gap: 8px; }
.radar-toggle .ico { width: 34px; height: 34px; }
.radar-toggle .check-box { width: 34px; height: 34px; }
.festival-banner { display: flex; align-items: center; gap: 6px; min-width: 0; height: 54px; padding: 0 16px 0 8px; border: var(--ol) solid var(--ink); border-radius: 999px; background: linear-gradient(#fff3a8, #ffd23f); white-space: nowrap; animation: badgeBob 1.2s ease-in-out infinite; }
.festival-banner .ico { width: 34px; height: 34px; flex: none; }
.fb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.fb-text > * { overflow: hidden; text-overflow: ellipsis; }
.festival-banner b { font-size: 19px; font-weight: 900; color: #c2410c; }
.fb-text span { font-size: 15px; font-weight: 800; color: #6b4a1f; }
/* battle result (battle.js): currencies and the treasure drop side by side */
/* the win's treasure and new unit side by side (never wrapping), shrinking their text when both are long */
.result-finds { max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; }
.result-finds > * { flex: 0 1 auto; min-width: 0; }
.tr-drop { display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 8px; border: var(--ol) solid var(--ink); border-radius: 20px; background: radial-gradient(circle at 20% 50%, #fffbe0, #ffe9b8); animation: pop .45s .5s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.tr-drop.tier-3 { background: radial-gradient(circle at 20% 50%, #fffbe0, #ffd23f); box-shadow: 0 0 18px 4px rgba(255, 200, 60, .8); }
.tr-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-drop-label { font-size: 24px; font-weight: 900; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.tr-drop-name { max-width: 300px; font-size: 22px; font-weight: 900; line-height: 1.2; word-break: keep-all; }
.tr-drop-tier { font-size: 18px; font-weight: 900; word-break: keep-all; }
.cx-appear-tr { display: inline-flex; align-items: center; margin-left: 10px; color: var(--ink); }

/* ---------- portrait-orientation phones ---------- */
#rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  #rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #ffb648;
    color: #fff;
    font-weight: 900;
    font-size: 24px;
    -webkit-text-stroke: 5px var(--ink);
    paint-order: stroke fill;
  }
  .rotate-phone { width: 70px; height: 120px; border: 6px solid var(--ink); border-radius: 14px; background: #fff; animation: rot 1.8s ease-in-out infinite; }
  @keyframes rot { 40%, 100% { transform: rotate(-90deg); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* legendary gacha cutscene (public/js/ui/cutscene.js): ~2.5 s over the capsule show; a tap skips it */
.cutscene { position: absolute; inset: 0; z-index: 10; overflow: hidden; cursor: pointer; background: #000; color: #fff; animation: cs-dark .3s ease-out backwards; transition: opacity .25s; }
.cutscene.out { opacity: 0; }
@keyframes cs-dark { from { background: rgba(0, 0, 0, 0); } }
.cs-rays { position: absolute; left: 50%; top: 50%; width: 2000px; height: 2000px; margin: -1000px 0 0 -1000px; background: repeating-conic-gradient(rgba(255, 210, 63, .5) 0 5deg, transparent 5deg 15deg); animation: cs-rays 2.5s linear .1s both; }
@keyframes cs-rays { from { transform: scale(.15) rotate(0); opacity: 0; } 15% { opacity: 1; } to { transform: scale(1.1) rotate(35deg); opacity: .9; } }
.cs-burst { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, #fff 0, #ffe27a 16%, rgba(255, 176, 0, .65) 38%, transparent 68%); animation: cs-burst .8s ease-out .15s; }
@keyframes cs-burst { from { opacity: 0; transform: scale(.3); } 30% { opacity: 1; } to { opacity: 0; transform: scale(1.7); } }
.cs-splash { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-top: 6px solid #ffd23f; border-bottom: 6px solid #ffd23f; animation: cs-slide .55s cubic-bezier(.2, .9, .3, 1) .35s backwards; }
@keyframes cs-slide { from { transform: translateX(70%) skewX(-12deg); opacity: 0; } 60% { opacity: 1; } }
.cs-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; animation: cs-zoom 2.2s ease-out .35s both; }
@keyframes cs-zoom { from { transform: scale(1.25); } to { transform: scale(1.04); } }
.cs-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(20, 10, 0, .85), rgba(20, 10, 0, 0) 42%); animation: fade .4s .9s backwards; }
.cs-title { position: absolute; left: 56px; right: 56px; bottom: 44px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cs-rarity { font-size: 60px; font-weight: 900; line-height: 1.1; color: #ffd23f; -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; text-shadow: 0 0 26px #ffb000; transform: rotate(-3deg); animation: cs-pop .5s cubic-bezier(.3, 1.8, .5, 1) 1s backwards; }
@keyframes cs-pop { from { transform: rotate(-3deg) scale(2.2); opacity: 0; } }
.cs-name { max-width: 100%; font-size: 52px; font-weight: 900; line-height: 1.15; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; animation: cs-name .45s ease-out 1.2s backwards; }
@keyframes cs-name { from { transform: translateX(-90px); opacity: 0; } }
.cs-title.with-quote { bottom: 112px; }
.cs-quote { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; min-height: 88px; padding: 12px 60px; display: flex; align-items: center; justify-content: center; background: rgba(12, 6, 0, .8); border-top: 3px solid #ffd23f; font-size: 32px; font-weight: 800; line-height: 1.3; text-align: center; animation: fade .3s 1.55s backwards; }
.cs-quote span { display: block; animation: cs-type .9s linear 1.7s backwards; }
@keyframes cs-type { from { clip-path: inset(0 100% 0 0); } }
.cs-hint { position: absolute; right: 22px; top: 16px; z-index: 4; font-size: 22px; font-weight: 900; opacity: .75; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }

/* ---------- local admin mode (js/ui/admin.js) ---------- */
/* .modal max-height 660: title ≈ 60 + tabs 64 + body 400 + button row ≈ 76 + padding 54 */
.modal.admin-modal { width: 880px; }
.admin .tab { min-height: 52px; font-size: 22px; }
.admin-body { height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 6px 4px 2px; margin: 8px 0 14px; }
.admin-sec { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border: 3px solid rgba(43, 26, 15, .25); border-radius: 14px; background: rgba(255, 255, 255, .4); }
.admin-sec h3 { margin: 0; font-size: 23px; font-weight: 900; }
.admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.admin-label { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 800; }
.admin-row > .admin-label:has(.wide) { flex: 1; }
.admin .input { height: 48px; padding: 0 10px; border-radius: 12px; font-size: 20px; }
.admin .input.num { width: 140px; }
/* the 재화 inputs: 15 digits (the currency cap) plus the spin buttons */
.admin .input.num.big { width: 240px; }
.admin .input.wide { flex: 1; min-width: 260px; }
.admin .input:disabled { opacity: .5; }
.admin-note { margin: 0; font-size: 17px; font-weight: 700; color: #7a5a3f; word-break: keep-all; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.admin-chip { padding: 4px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff3c4; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.admin-cut-host { position: absolute; inset: 0; z-index: 70; }
/* the battle layer is outside the scaled stage: stage px scaled by --stage-scale, at the stage's left edge */
.adm-dbg { position: absolute; left: calc(50% - 634px * var(--stage-scale, 1)); top: 50%; transform: translateY(-50%) scale(var(--stage-scale, 1)); transform-origin: left center; z-index: 5; display: flex; flex-direction: column; gap: 5px; font: 800 16px/1.2 system-ui, sans-serif; }
.adm-dbg button { padding: 6px 10px; border: 2px solid #2b1a0f; border-radius: 10px; background: rgba(255, 255, 255, .88); color: #2b1a0f; font: inherit; cursor: pointer; touch-action: manipulation; }
.adm-dbg button:disabled { opacity: .45; cursor: default; }
.adm-dbg .adm-dbg-toggle { background: #ff8a3d; color: #fff; }
.adm-dbg-list { display: flex; flex-direction: column; gap: 5px; }
.adm-dbg.closed .adm-dbg-list { display: none; }