:root { --kfix: 0.078; /* overwritten at start-up by main.js measureKfix() */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --ink: #2b1b10; --cream: #f6ecd2; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; background: #1a0f0a; overflow: hidden; font-family: Jua, 'Apple SD Gothic Neo', sans-serif; color: var(--cream); touch-action: none; }
#app { container-type: size; position: relative; height: 100dvh; width: min(100vw, calc(100dvh * 9 / 16)); margin: 0 auto; overflow: hidden; background: #24140d; }
@media (min-aspect-ratio: 9/19.5) and (max-aspect-ratio: 9/16) { #app { width: 100vw; } }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; }
button { font-family: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.ic { display: inline-block; width: 26px; height: 26px; background: center / contain no-repeat; vertical-align: middle; }
.ic-pause { background-image: url(art/ui_pause.png?v=82a0b0395a); } .ic-play { background-image: url(art/ui_play.png?v=82a0b0395a); } .ic-fast { background-image: url(art/ui_fast.png?v=82a0b0395a); }
.ic-sound { background-image: url(art/ui_sound.png?v=82a0b0395a); } .ic-mute { background-image: url(art/ui_mute.png?v=82a0b0395a); } .ic-music { background-image: url(art/ui_music.png?v=82a0b0395a); }
.ic-home { background-image: url(art/ui_home.png?v=82a0b0395a); } .ic-retry { background-image: url(art/ui_retry.png?v=82a0b0395a); } .ic-lock { background-image: url(art/ui_lock.png?v=82a0b0395a); }
.off { opacity: .35; }

/* loading */
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp4); background: #24140d url(art/bg.jpg?v=82a0b0395a) center / cover; }
#loading .title { font-size: 40px; text-shadow: 0 3px 0 #7a1f12, 0 0 12px #000; }
#loading .bar { width: 60%; height: 12px; border-radius: 6px; background: rgba(0,0,0,.6); overflow: hidden; } #loading .bar i { display: block; height: 100%; width: 0; background: #ffcf4a; }

/* menu */
#menu { background: linear-gradient(rgba(20,10,5,.35), rgba(20,10,5,.75)), url(art/bg.jpg?v=82a0b0395a) center / cover; display: flex; flex-direction: column; align-items: center; padding: var(--sp5) var(--sp4); gap: var(--sp3); }
.logo { margin-top: 4dvh; text-align: center; line-height: 1; filter: drop-shadow(0 4px 0 #3a0d06) drop-shadow(0 0 10px #000); }
.logo b { display: block; font-size: 64px; font-weight: normal; color: #ff5a3c; -webkit-text-stroke: 2px #fff3d0; }
.logo span { font-size: 40px; color: #ffe08a; }
.sub { font-size: 14px; text-align: center; opacity: .9; text-shadow: 0 1px 2px #000; }
#stages { width: 100%; flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp2); align-content: start; padding: var(--sp2) 0; }
.stage-btn { position: relative; height: 64px; border-style: solid; border-width: 0 calc(80px * 64 / 135); border-image: url(art/sk_btn_red.png?v=82a0b0395a) 0 80 fill / 0 calc(80px * 64 / 135) stretch; font-size: 17px; text-shadow: 0 2px 0 #4a120a; }
.stage-btn.clear::after { content: ''; position: absolute; right: 10px; top: 6px; width: 20px; height: 20px; background: url(art/sk_star.png?v=82a0b0395a) center / contain no-repeat; }
.stage-btn.locked { border-image-source: url(art/sk_btn_gray.png?v=82a0b0395a); color: #ddd; }
.stage-btn { white-space: nowrap; font-size: 16px; } .stage-btn.locked .ic { width: 18px; height: 18px; margin-right: 3px; flex: none; }
.stage-btn.locked .ic { width: 20px; height: 20px; margin-right: 4px; }
.menu-foot { display: flex; gap: var(--sp3); }
.ico-btn { width: 48px; height: 48px; background: url(art/sk_round.png?v=82a0b0395a) center / contain no-repeat; display: flex; align-items: center; justify-content: center; }

/* game */
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
.top { position: absolute; top: 6px; left: 6px; right: 6px; height: 40px; display: flex; align-items: center; gap: var(--sp2); }
.round { width: 38px; height: 38px; background: url(art/sk_round.png?v=82a0b0395a) center / contain no-repeat; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.round .ic { width: 20px; height: 20px; }
.time { width: 54px; font-size: 15px; text-shadow: 0 1px 2px #000; }
.stage { flex: 1; text-align: center; font-size: 19px; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
.lvbar { position: absolute; top: 48px; left: 10px; right: 10px; height: 9px; background: rgba(0,0,0,.55); border-radius: 5px; border: 1px solid #000; }
.lvbar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffe27a, #e6a412); border-radius: 4px; }
.lvbar span { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-size: 12px; text-shadow: 0 1px 2px #000; }
.main-card { position: absolute; top: 66px; left: 6px; width: 98px; height: 46px; background: rgba(140,24,18,.85); border: 2px solid #2b0f08; border-radius: 4px; overflow: hidden; }
.main-card .face { position: absolute; left: 0; top: 0; height: 100%; width: 46px; object-fit: cover; object-position: 50% 12%; }
.main-card .lv { position: absolute; left: 3px; bottom: 1px; font-size: 11px; text-shadow: 0 1px 2px #000; }
.main-card .ammo { position: absolute; right: 5px; bottom: 6px; font-size: 14px; text-shadow: 0 1px 2px #000; }
.main-card.reload .ammo { color: #ffb08a; }
.partners { position: absolute; top: 124px; left: 6px; display: flex; flex-direction: column; gap: var(--sp2); }
.pslot { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #2a1a12; border: 2px solid #d9b25a; overflow: hidden; }
.pslot img.face { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.pslot b { position: absolute; right: 1px; bottom: -1px; font-size: 12px; font-weight: normal; -webkit-text-stroke: 3px #000; paint-order: stroke; }
.pslot.empty { border-color: #5a4630; background: rgba(0,0,0,.45); }
.wallpct { position: absolute; right: 8px; bottom: calc(31.5% + 4px); font-size: 13px; color: #8dff8a; text-shadow: 0 1px 2px #000; }
.wallbar { position: absolute; left: 18%; right: 18%; bottom: 8px; height: 20px; border-style: solid; border-width: 0 calc(70px * 20 / 86); border-image: url(art/sk_bar.png?v=82a0b0395a) 0 70 fill / 0 calc(70px * 20 / 86) stretch; padding: 5px 0; }
.wallbar i { display: block; height: 100%; width: 100%; background: linear-gradient(#7dff6a, #2aa83a); border-radius: 2px; transition: width .2s; }
.wallbar.hurt i { background: linear-gradient(#ffd36a, #e0731a); } .wallbar.danger i { background: linear-gradient(#ff7a6a, #c0261a); }

/* overlays (popup basic: centred, scroll inside, tap outside does nothing during battle choices) */
.overlay { position: absolute; inset: 0; background: rgba(10,4,2,.62); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp3); padding: var(--sp3); }
.ribbon { width: 100%; height: 56px; border-style: solid; border-width: 0 calc(112px * 56 / 92); border-image: url(art/sk_ribbon.png?v=82a0b0395a) 0 112 fill / 0 calc(112px * 56 / 92) stretch; display: flex; align-items: center; justify-content: center; font-size: 22px; text-shadow: 0 2px 0 #3a0d06; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); width: 100%; }
.card { position: relative; aspect-ratio: 243 / 480; background: url(art/sk_card2.png?v=82a0b0395a) center / 100% 100% no-repeat, linear-gradient(#6a2016, #2a0a06) 50% 10% / 84% 34% no-repeat; pointer-events: auto; animation: pop .25s ease-out both; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; }
@keyframes pop { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.card:active { transform: scale(.96); }
.card .por { position: absolute; left: 4%; right: 4%; top: -9%; height: 53.5%; width: 92%; object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 3px 2px rgba(0,0,0,.6)); }
.card .medal { position: absolute; right: 0%; top: 29%; width: 34%; aspect-ratio: 232 / 284; }
/* icon behind the ring, centred on the ring's hole measured from sk_medal.png: centre (49.6%, 50.2%), diameter 72% of
   the width; the disc is drawn 4% larger so its rim tucks under the ring */
.card .medal img { position: absolute; left: 49.6%; top: 50.2%; width: 75%; transform: translate(-50%, -50%); }
.card .medal::after { content: ''; position: absolute; inset: 0; background: url(art/sk_medal.png?v=82a0b0395a) center / 100% 100% no-repeat; }
.card .tag { position: absolute; left: -4%; top: 37.5%; width: 46%; aspect-ratio: 204 / 83; background: url(art/sk_tag.png?v=82a0b0395a) center / 100% 100% no-repeat; font-size: 11px; color: #5a1a00; display: flex; align-items: center; padding-left: 8%; }
.card .stars { position: absolute; left: 8%; top: 39.5%; display: flex; gap: 1px; }
.card .stars i { width: 11px; height: 11px; background: url(art/sk_star.png?v=82a0b0395a) center / contain no-repeat; opacity: .25; } .card .stars i.on { opacity: 1; }
.card .nm { position: absolute; left: 6%; right: 6%; top: 45%; height: 6.3%; display: flex; align-items: center; justify-content: center; font-size: 14px; white-space: nowrap; }
.card .ds { position: absolute; left: 10%; right: 10%; top: 55%; bottom: 5%; color: var(--ink); font-size: 12.5px; line-height: 1.4; text-align: center; overflow: hidden; }
/* hanji area of sk_panel.png measured at 28.6%..88.1% of its height = 21.3% / 8.9% of its width (padding % uses width) */
.panel { width: 92%; aspect-ratio: 395 / 294; background: url(art/sk_panel.png?v=82a0b0395a) center / 100% 100% no-repeat; display: flex; flex-direction: column; padding: 21.8% 6% 9.6%; min-height: 0; overflow: hidden; }
.panel .ph { display: none; height: 0; font-size: 0 !important; } .panel .pt { text-align: center; font-size: 19px; color: #7a1f12; flex: none; } .panel .ph-unused { display: flex; align-items: center; justify-content: center; font-size: 18px; }
.panel .pb { flex: 1; min-height: 0; overflow-y: auto; color: var(--ink); padding: var(--sp1) var(--sp2) 0; display: flex; flex-direction: column; gap: var(--sp2); }
.panel.wide { width: 100%; }
.banner { font-size: 52px; color: #ffd84a; -webkit-text-stroke: 2px #5a1a00; text-shadow: 0 4px 0 #5a1a00, 0 0 18px rgba(255,180,40,.8); animation: drop .5s cubic-bezier(.2,1.6,.4,1) both; }
.banner.lose { color: #b8c0c8; text-shadow: 0 4px 0 #222, 0 0 18px rgba(0,0,0,.8); -webkit-text-stroke-color: #222; }
@keyframes drop { from { transform: scale(2.2); opacity: 0; } }
.res-sum { text-align: center; font-size: 15px; text-shadow: 0 1px 3px #000; margin-top: calc(-1 * var(--sp2)); }
table.dmg { width: 100%; border-collapse: collapse; font-size: 13px; } .dmg th { font-weight: normal; color: #7a3a1a; border-bottom: 2px solid #c8a46a; padding: 4px; }
.dmg td { padding: 2px 4px; text-align: center; border-bottom: 1px solid #e2cfa4; } .dmg td:first-child { text-align: left; display: flex; align-items: center; gap: 6px; }
.dmg td img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 10%; border: 2px solid #c8a46a; }
.btnrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp2); margin-top: auto; flex: none; }

.btn { height: 44px; border-style: solid; border-width: 0 calc(80px * 44 / 135); border-image: var(--skin) 0 80 fill / 0 calc(80px * 44 / 135) stretch; min-width: 0; font-size: 16px; text-shadow: 0 2px 0 rgba(0,0,0,.45); color: #fff8e6; }
.btn.red { --skin: url(art/sk_btn_red.png?v=82a0b0395a); } .btn.teal { --skin: url(art/sk_btn_teal.png?v=82a0b0395a); } .btn.gray { --skin: url(art/sk_btn_gray.png?v=82a0b0395a); }
.btn:active { transform: scale(.96); }

/* button labels may run over the end ornaments (the 3-slice borders), never wrap */
.btn { position: relative; } .btn > span { position: absolute; top: 0; bottom: 0; left: calc(-80px * 44 / 135 + 6px); right: calc(-80px * 44 / 135 + 6px); display: flex; align-items: center; justify-content: center; white-space: nowrap; }

/* ---- text centring (measured, PRINCIPLES B): centre the glyph ink on the frame's FACE, not on the whole image.
   --ft/--fb = face insets measured from the art (src/frames.css, tools/measure-frames.py); --fh = frame height;
   --kfix = ink-vs-line-box offset of the font measured with canvas at start-up (Jua Hangul: 0.078em). */
.stage-btn, .ribbon, .round { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding-top: calc(var(--fh) * var(--ft) + var(--kfix) * 2em); padding-bottom: calc(var(--fh) * var(--fb)); }
.stage-btn { --fh: 64px; } .ribbon { --fh: 56px; } .round { --fh: 38px; }
.btn > span { top: calc(44px * var(--ft)); bottom: calc(44px * var(--fb)); padding-top: calc(var(--kfix) * 2em); }
.card .tag { padding-top: 0; padding-bottom: 0; } /* face insets ~symmetric (0.084/0.096): only the font offset, via .kf, so the ratio stays */
.kf { display: inline-flex; align-items: center; transform: translateY(calc(var(--kfix) * 1em)); }
.card .nm, .panel .pt, .lvbar span, .time, .stage, .main-card .ammo, .pslot b { padding-top: calc(var(--kfix) * 2em); }

/* result popup: grows with the roster. sk_panel_tall.png (354x520) as a VERTICAL 3-slice: title bar (top 84 px) and
   bottom edge (70 px) keep the art ratio (scaled by width / 354), only the plain hanji middle stretches in height.
   Hanji measured at x 8.8%..91.2% of the width. */
#result .banner { margin-bottom: calc(-1 * var(--sp2)); }
.panel.result { width: 92cqw; aspect-ratio: auto; min-height: 0; max-height: none; overflow: visible; background: none; position: relative; isolation: isolate;
  padding: calc(92cqw * 84 / 354) calc(92cqw * 0.1) calc(92cqw * 42 / 354); margin-top: 0; } /* hanji ends 40 px above the bottom of 520: list runs over the clouds */
.panel.result::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: calc(92cqw * 84 / 354) 0 calc(92cqw * 70 / 354);
  border-image: url(art/sk_panel_tall.png?v=82a0b0395a) 84 0 70 0 fill / calc(92cqw * 84 / 354) 0 calc(92cqw * 70 / 354) stretch; }
.panel.result .pb { overflow: visible; padding: 0; }
.dmg-wrap { max-height: calc(30px + 5.5 * 36px); overflow-y: auto; overscroll-behavior: contain; } /* 5 rows + half of the 6th peeks: scrollable */
.dmg-wrap thead th { position: sticky; top: 0; background: #f3e6c4; z-index: 1; }
.dmg-wrap td { height: 36px; }
.res-btns { width: 92cqw; flex: none; margin-top: 0; }

/* ---- lobby / growth (수련 · 전략 · 능력) ---- */
.lob-pill { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 4px; border-radius: 15px; background: rgba(20,10,5,.72); border: 2px solid #c9a24f; font-size: 16px; color: #bff3ff; }
.soul-ic { width: 26px; height: 26px; object-fit: contain; }
#menu > .souls-pill { position: absolute; right: 12px; top: 12px; }
.btn.big { width: 70%; height: 52px; flex: none; border-width: 0 calc(80px * 52 / 135); border-image: var(--skin) 0 80 fill / 0 calc(80px * 52 / 135) stretch; font-size: 19px; }
.btn.big > span { top: calc(52px * var(--ft)); bottom: calc(52px * var(--fb)); left: calc(-80px * 52 / 135 + 6px); right: calc(-80px * 52 / 135 + 6px); }
#heroes, #hero { background: linear-gradient(rgba(20,10,5,.55), rgba(20,10,5,.85)), url(art/bg.jpg?v=82a0b0395a) center / cover; display: flex; flex-direction: column; align-items: center; gap: var(--sp2); padding: var(--sp2) var(--sp3) var(--sp3); }
.lob-top { width: 100%; display: flex; align-items: center; gap: var(--sp2); }
.lob-title { flex: 1; font-size: 21px; text-shadow: 0 2px 0 #3a0d06; }
.hero-name { font-size: 22px; text-shadow: 0 2px 0 #000; } .hero-sub { font-size: 14px; color: #ffe08a; text-shadow: 0 1px 2px #000; }
.seg { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); }
.seg .btn { height: 44px; }
.panel.tall { flex: 1; min-height: 0; width: 92cqw; aspect-ratio: auto; max-height: none; background: none; overflow: hidden;
  border-style: solid; border-width: calc(92cqw * 84 / 354) 0 calc(92cqw * 70 / 354);
  border-image: url(art/sk_panel_tall.png?v=82a0b0395a) 84 0 70 0 fill / calc(92cqw * 84 / 354) 0 calc(92cqw * 70 / 354) stretch; padding: 0 calc(92cqw * 0.1); }
.panel.tall .pb { overflow-y: auto; padding: var(--sp2) 0 0; gap: var(--sp2); }
.lob-actions { width: 92cqw; flex: none; display: flex; } .lob-actions:empty { display: none; }
.row { display: flex; align-items: center; gap: var(--sp2); min-height: 52px; border-bottom: 1px solid #e2cfa4; padding: 4px 0; }
.row img.ri { width: 42px; height: 42px; object-fit: contain; flex: none; }
.row .rt { flex: 1; min-width: 0; } .row .rn { font-size: 15px; color: #5a1a00; } .row .rd { font-size: 12px; color: #6b4a30; line-height: 1.3; }
.row .btn { width: 92px; height: 38px; flex: none; border-width: 0 calc(80px * 38 / 135); border-image: var(--skin) 0 80 fill / 0 calc(80px * 38 / 135) stretch; font-size: 13px; }
.row .btn > span { top: calc(38px * var(--ft)); bottom: calc(38px * var(--fb)); left: calc(-80px * 38 / 135 + 4px); right: calc(-80px * 38 / 135 + 4px); }
.row .tagc { width: 92px; flex: none; text-align: center; font-size: 13px; color: #2a7a3a; }
.btn:disabled { filter: grayscale(.8) brightness(.8); }
.train-head { display: flex; align-items: center; gap: var(--sp3); } .train-head img { width: 64px; height: 64px; object-fit: contain; }
.train-lv { font-size: 26px; color: #7a1f12; } .train-max { font-size: 13px; color: #6b4a30; }
.train-btn { width: 100%; height: 44px; flex: none; }
.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp2); }
.ab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: rgba(120,80,40,.08); font-size: 12px; color: #5a1a00; text-align: center; }
.ab img { width: 54px; height: 54px; object-fit: contain; } .ab.lock img { filter: grayscale(1) brightness(.45); } .ab.lock { color: #9a8a70; }
.draw-card { width: 60%; aspect-ratio: 243 / 480; background: url(art/sk_card2.png?v=82a0b0395a) center / 100% 100% no-repeat, linear-gradient(#6a2016, #2a0a06) 50% 10% / 84% 34% no-repeat; position: relative; animation: pop .35s ease-out both; }
.draw-card img.dpor { position: absolute; left: 4%; width: 92%; top: -9%; height: 53.5%; object-fit: cover; object-position: 50% 0; }
.draw-card .medal { position: absolute; right: 0; top: 29%; width: 34%; aspect-ratio: 232 / 284; }
.draw-card .medal img { position: absolute; left: 49.6%; top: 50.2%; width: 75%; transform: translate(-50%, -50%); }
.draw-card .medal::after { content: ''; position: absolute; inset: 0; background: url(art/sk_medal.png?v=82a0b0395a) center / 100% 100% no-repeat; }
.draw-card .nm { position: absolute; left: 6%; right: 6%; top: 45%; height: 6.3%; display: flex; align-items: center; justify-content: center; font-size: 17px; white-space: nowrap; }
.draw-card .ds { position: absolute; left: 10%; right: 10%; top: 55%; bottom: 5%; color: var(--ink); font-size: 14px; line-height: 1.45; text-align: center; }
#draw .btn { width: 50%; height: 44px; flex: none; }
/* battle HUD: souls + aim mode badges (tap a hero icon to switch mode for this battle) */
.hud-souls { position: absolute; right: 6px; top: 66px; height: 26px; font-size: 14px; } .hud-souls .soul-ic { width: 22px; height: 22px; }
.pslot img.mode-badge, .main-card img.mode-badge, .mode-badge { position: absolute; right: -2px; top: -2px; width: 20px; height: 20px; object-fit: contain; pointer-events: none; }
.pslot, .main-card { pointer-events: auto; cursor: pointer; } .pslot { overflow: visible; } .pslot img.face { border-radius: 50%; }
.main-card .mode-badge { right: 2px; top: 2px; }
.res-souls { align-self: center; margin-top: calc(-1 * var(--sp1)); }

/* hero list: big circles, 2 per row */
.hero-grid { width: 100%; flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4) var(--sp3); align-content: start; padding-top: var(--sp3); }
.hcard { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* circle (user preferred it): ring + backdrop behind; the portrait is cut by the circle below the circle's centre line
   and left open above it (head, guns, bows rise over the ring). img box = 1.35 x 1.152 circles. */
.hcircle { position: relative; width: 70%; aspect-ratio: 1; margin-top: 22%; }
.hcircle::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #d9b25a; background: radial-gradient(#6a321e, #2a1208); box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.hcircle img { position: absolute; bottom: 0; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45));
  -webkit-mask-image: radial-gradient(closest-side, #000 calc(100% - 4px), transparent calc(100% - 3px)), linear-gradient(#000, #000);
  mask-image: radial-gradient(closest-side, #000 calc(100% - 4px), transparent calc(100% - 3px)), linear-gradient(#000, #000);
  -webkit-mask-position: 50% 100%, 50% 0; mask-position: 50% 100%, 50% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* B (90%) chosen with the user. The portrait art is pre-cut (src/art/p_*_pop.png, tools/ai-popout.py: the AI decided
   which parts break out of the ring, original pixels kept) and sized to the same box: 1.35 x 1.152 circles, bottom on
   the circle bottom — so no CSS mask here. */
.hcircle img { left: -17.5%; width: 135%; height: 115.2%; bottom: 0; object-fit: fill; -webkit-mask-image: none; mask-image: none; }
.hcard:active .hcircle { transform: scale(.96); }
.hname { font-size: 18px; text-shadow: 0 2px 0 #000; } .hsub { font-size: 14px; color: #ffe08a; text-shadow: 0 1px 2px #000; }
/* hero detail */
#hero .lob-top .hero-info { flex: 1; min-width: 0; } #hero .seg { width: 100%; }
.hero-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; border: 2px solid #d9b25a; background: #2a1208; flex: none; }
#hero .hero-name { font-size: 18px; } #hero .hero-sub { font-size: 13px; }
/* plain list panel (no title bar): sk_panel_plain.png 343x520, vertical 3-slice — corner fittings (top 40 px) and the
   cloud corners (bottom 95 px) keep their ratio (x width/343), only the plain hanji middle grows. Hanji x 6.4%..93.3%. */
.panel.plain { flex: 1; min-height: 0; width: 92cqw; aspect-ratio: auto; max-height: none; background: none; overflow: hidden; position: relative; isolation: isolate;
  padding: calc(92cqw * 38 / 343) calc(92cqw * 0.085) calc(92cqw * 24 / 343); } /* top clears the corner fittings (38 px); wooden edge = 22 px of 343: the list may run over the cloud corners */
.panel.plain::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: calc(92cqw * 40 / 343) 0 calc(92cqw * 95 / 343);
  border-image: url(art/sk_panel_plain.png?v=82a0b0395a) 40 0 95 0 fill / calc(92cqw * 40 / 343) 0 calc(92cqw * 95 / 343) stretch; }
.panel.plain .pb { overflow-y: auto; padding: var(--sp2) 0 0; gap: var(--sp2); }

/* 수련 tab */
.train-head .tg { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.xpbar { position: relative; height: 16px; border-radius: 8px; background: #5a3a24; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#8fe8ff, #2a9ec8); }
.xpbar span { position: relative; font-size: 11px; color: #fff; text-shadow: 0 1px 2px #000; }
.pts { display: flex; align-items: center; justify-content: space-between; font-size: 15px; color: #5a1a00; }
.pts b { color: #c0392b; font-weight: normal; font-size: 18px; }
.pts .btn { width: 104px; height: 34px; flex: none; border-width: 0 calc(80px * 34 / 135); border-image: var(--skin) 0 80 fill / 0 calc(80px * 34 / 135) stretch; font-size: 13px; }
.pts .btn > span { top: calc(34px * var(--ft)); bottom: calc(34px * var(--fb)); left: calc(-80px * 34 / 135 + 4px); right: calc(-80px * 34 / 135 + 4px); }
.row .btn.plus { width: 64px; }
.row .sv { color: #2a7a3a; }
.row.locked { opacity: .55; } .row.locked img.ri { filter: grayscale(1); }
.row .stars { display: flex; gap: 1px; flex: none; } .row .stars i { width: 13px; height: 13px; background: url(art/sk_star.png?v=82a0b0395a) center / contain no-repeat; opacity: .2; } .row .stars i.on { opacity: 1; }
.rd.hint { color: #6b4a30; font-size: 12px; }
.draw-card .ds b.up { color: #c0392b; font-weight: normal; }
/* battle: card stars = stage / lobby cap */
.card .stars i.cap { opacity: .25; } .card .stars i.off { display: none; }
.dmg b.up { color: #c0392b; font-weight: normal; }

/* scroll fade: lists fade out at the edge that still has more content (classes set by fadeScroll() in ui-scroll.js) */
.fade-bot { -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.fade-top { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.fade-top.fade-bot { -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 36px), transparent); }