/* HUD styled after the original game's NGUI panels (Panel_StageBattle, Panel_RoundInfo, Panel_ToastMsg,
   Panel_GambleResult, Panel_MissionComplete/Fail, Panel_battle_MessageDialog). Sprites come from
   js/ui_assets.js as --s-<key> custom properties. */
:root {
  --ink: #16181c;
  --panel: rgba(12, 13, 16, 0.86);
  --hudbg: rgba(10, 12, 16, 0.78);
  --panel2: rgba(26, 28, 33, 0.94);
  --line: #8f9294;
  --line2: rgba(255, 255, 255, 0.12);
  --y: #ffcc00;
  --y2: #f7c00a;
  --o: #ff7800;
  --o2: #ff6200;
  --cy: #33d1fa;
  --gr: #8df419;
  --red: #d71e1e;
  --txt: #ffffff;
  --txt2: #e1ffff;
  --mut: #9aa3ab;
  --navy: #18314b;
  --C: #63d34a; --R: #38b6ff; --E: #ffc81e; --L: #ff9420; --M: #ff3d5a;
  --kr: 'Godo', 'Noto Sans KR', system-ui, sans-serif;
  --en: 'Exo2', 'Godo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0c0e; color: var(--txt); overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%;
  font-family: var(--kr); font-weight: 400; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); }
::-webkit-scrollbar-thumb { background: rgba(255, 204, 0, 0.55); }
::-webkit-scrollbar-thumb:hover { background: var(--y); }
* { scrollbar-color: rgba(255, 204, 0, 0.55) rgba(0, 0, 0, 0.35); scrollbar-width: thin; }
button:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }
.num { font-family: var(--en); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp { display: inline-block; background: center / contain no-repeat; flex: none; }
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 3px; display: inline-block; background: center / contain no-repeat; }
.ico.gear { background-image: var(--s-i_gear); filter: brightness(0) saturate(100%) invert(80%) sepia(64%) saturate(1200%) hue-rotate(359deg); }
.ico.tuna { background-image: var(--s-i_tuna); width: 1.35em; }
[data-tip] { position: relative; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ── top HUD ─────────────────────────────────────────── */
#top { position: relative; display: flex; align-items: center; gap: 12px; z-index: 5;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.96), rgba(8, 9, 11, 0.78) 70%, rgba(8, 9, 11, 0)); }
#top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.55), rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.08) 60%, rgba(255, 204, 0, 0.35)); }
.spacer { flex: 1; }

/* round panel: Panel_RoundInfo (dark block, orange round tag, yellow progress) */
.round { position: relative; display: flex; align-items: stretch; min-width: 300px; height: 50px; background: var(--hudbg);
  border: 1px solid rgba(143, 146, 148, 0.55); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.round .rlabel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 14px 0 12px;
  background: linear-gradient(100deg, #ffcc00, #f0a800); color: #111; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 22px; }
.round .rlabel small { font-family: var(--en); font-weight: 700; font-size: 11px; letter-spacing: 2px; line-height: 1; }
.round .rlabel b { font-family: var(--en); font-weight: 900; font-style: italic; font-size: 30px; line-height: 0.95; }
.round .rlabel b i { font-size: 13px; font-weight: 700; font-style: normal; opacity: 0.65; margin-left: 2px; }
.round .rbody { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 22px 0 10px; min-width: 0; }
.round .rtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; }
.round .rtitle { font-size: 14px; color: var(--y); overflow: hidden; text-overflow: ellipsis; }
.round .rtitle.boss { color: #ff6a4d; }
.round .rtime { font-family: var(--en); font-weight: 700; font-size: 14px; color: var(--txt2); }
.round .rtime .ico { width: 14px; height: 14px; background-image: var(--s-i_time); }
.gauge { position: relative; height: 8px; background: rgba(34, 9, 5, 0.75); border: 1px solid rgba(255, 255, 255, 0.14); overflow: hidden; }
.gauge i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(180deg, #ffd34d, #ffa300); transition: transform 0.15s linear; }
.gauge i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0, 0, 0, 0.25) 7px 8px); }
.gauge.r i { background: linear-gradient(180deg, #ff4b3b, #b80f0f); }
.gauge.g i { background: linear-gradient(180deg, #b6ff4a, #6fd000); }
.gauge.c i { background: linear-gradient(180deg, #7ff0ff, #19a8e6); }

/* enemy counter */
.enemy { display: flex; align-items: center; gap: 10px; min-width: 250px; height: 50px; padding: 0 18px 0 12px; background: var(--hudbg);
  border: 1px solid rgba(143, 146, 148, 0.55); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background 0.2s; }
.enemy .eicon { width: 34px; height: 34px; background: var(--s-i_warning) center / 26px no-repeat, var(--s-hex_g) center / contain no-repeat; flex: none; opacity: 0.9; }
.enemy .ebody { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.enemy .etop { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--mut); white-space: nowrap; gap: 8px; }
.enemy .etop b { font-family: var(--en); font-weight: 700; font-size: 21px; line-height: 1; color: #fff; }
.enemy .etop b small { font-size: 13px; color: var(--mut); font-weight: 600; }
.enemy.warn .etop b { color: var(--y); }
.enemy.danger { background: linear-gradient(90deg, rgba(90, 0, 0, 0.92), rgba(30, 0, 0, 0.9)); animation: dangerPulse 0.5s infinite alternate; }
.enemy.danger .eicon { background: var(--s-i_warning) center / 26px no-repeat, var(--s-enemyinfo_r) center / contain no-repeat; }
.enemy.danger .etop b, .enemy.danger .etop span { color: #ff6a55; }
.enemy.danger .etop b small { color: #ffb4a8; }
.enemy.crit .eicon { animation: blink 0.4s steps(2) infinite; }
@keyframes dangerPulse { to { box-shadow: inset 0 0 22px rgba(255, 40, 30, 0.6); } }

/* resources: Panel_Resources_NewUi */
.res { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; background: var(--hudbg);
  border: 1px solid rgba(143, 146, 148, 0.55); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.res .ri { width: 24px; height: 24px; background: center / contain no-repeat; }
.res .ri.gear { background-image: var(--s-i_gear); filter: drop-shadow(0 0 0 #ffce04); }
.res .ri.gear { -webkit-mask: var(--s-i_gear) center / contain no-repeat; mask: var(--s-i_gear) center / contain no-repeat; background: #ffce04; }
.res .ri.tuna { width: 30px; background-image: var(--s-i_tuna); }
.res b { font-family: var(--en); font-weight: 700; font-size: 18px; min-width: 44px; }
.res .gold { color: #ffe27a; } .res .gems { color: #bff3ff; }
.res .sep { width: 2px; height: 22px; background: rgba(255, 255, 255, 0.12); margin: 0 4px; }

/* round grey icon buttons (battle option row) */
.rbtn { position: relative; width: 46px; height: 46px; flex: none; margin-left: 4px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(160, 160, 160, 0.55), rgba(110, 110, 110, 0.45)); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s, background 0.15s; }
.rbtn:hover { background: radial-gradient(circle at 50% 40%, rgba(190, 190, 190, 0.65), rgba(120, 120, 120, 0.55)); }
.rbtn:active { transform: scale(0.92); }
.rbtn .g { width: 24px; height: 24px; background: #fff; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.rbtn .g.music { -webkit-mask-image: var(--s-i_music); mask-image: var(--s-i_music); }
.rbtn .g.gear { -webkit-mask-image: var(--s-i_gear); mask-image: var(--s-i_gear); width: 26px; height: 26px; }
.rbtn.off .g.music { opacity: 0.45; }
.rbtn.off::after { content: ''; position: absolute; width: 30px; height: 3px; background: #ff5a3a; transform: rotate(-45deg); border-radius: 2px; }
.rbtn .g.pause { -webkit-mask: none; mask: none; background: none; width: 18px; height: 20px; border-left: 6px solid #fff; border-right: 6px solid #fff; }
.rbtn.on .g.pause { width: 0; height: 0; border: 0; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
/* speed + AUTO: bottom bar { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; z-index: 2; }
/* AUTO toggle: same plate as the speed button { position: relative; height: 50px; min-width: 76px; padding: 0 12px; display: flex; align-items: center; justify-content: center;
  background: var(--s-btn13_k) 0 0 / 100% 100%; color: #9aa3ad; font-family: var(--en); font-weight: 900; font-style: italic; font-size: 18px; letter-spacing: 1px; }

/* ── stage overlays ───────────────────────────────────── */
#stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#stage canvas { display: block; width: 100%; height: 100%; }
#numLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }

/* damage digits: the game's bitmap fonts */
.dmg { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; opacity: 0; white-space: nowrap; will-change: transform, opacity; contain: layout style; }
.dmg span { display: block; flex: none; background-repeat: no-repeat; background-image: var(--dmg); }
.dmg.crit span { background-image: var(--dmgc); }
.dmg.on { animation: dmgUp 0.75s ease-out forwards; }
@keyframes dmgUp { 0% { opacity: 1; transform: translate(-50%, -50%) scale(var(--s0, 0.55)); } 18% { transform: translate(-50%, -85%) scale(var(--s1, 0.42)); }
  70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -170%) scale(var(--s1, 0.42)); } }
.dmg.miss { width: 64px; height: 25px; background: var(--s-miss) center / contain no-repeat; }
.ult { position: absolute; left: 0; top: 0; font-family: var(--kr); font-weight: 700; font-size: 22px; color: #fff; white-space: nowrap; padding: 4px 18px 5px 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.55)); border-left: 4px solid var(--c); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  text-shadow: 0 0 10px var(--c); will-change: transform, opacity; }
@keyframes ultIn { 0% { opacity: 0; transform: translate(-30%, -100%); } 14% { opacity: 1; transform: translate(-50%, -100%); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }

/* boss / elite panel: a HUD box like the round / enemy boxes (never over the field). Between bosses it is .idle and
   names the next boss; with a boss or elite on the field it shows its portrait, clock and HP */
#top .spacer { display: none; } /* the boss panel takes the spare width instead */
#bossBar { position: relative; flex: 1 1 260px; min-width: 150px; max-width: 520px; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 6px;
  background: var(--hudbg); border: 1px solid rgba(143, 146, 148, 0.55); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#bossBar .bimg { width: 38px; height: 38px; margin-left: 10px; background: #000 center / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.3); flex: none; }
#bossBar .bmain { flex: 1; min-width: 0; }
#bossBar .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; white-space: nowrap; }
#bossName { font-size: 15px; color: var(--y); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#bossName small { font-family: var(--en); font-weight: 700; font-size: 11px; color: #ff6a4d; letter-spacing: 2px; margin-right: 6px; }
#bossTime { font-family: var(--en); font-weight: 700; font-size: 15px; color: #ff6a4d; flex: none; }
#bossBar .gauge { height: 8px; }
#bossBar.elite #bossName small { color: #ff9a2a; }
#bossBar.berserk { animation: berserk 0.8s ease-in-out infinite alternate; }
@keyframes berserk { to { background-color: rgba(120, 0, 0, 0.7); } }
#bossBar .shield { color: #7fdcff; font-size: 12px; margin-left: 6px; }
#bossBar.idle .bimg { opacity: 0.45; filter: grayscale(1); }
#bossBar.idle #bossName { color: #c9d2da; font-size: 13px; }
#bossBar.idle #bossName small { color: var(--mut); }
#bossBar.idle #bossTime { color: var(--mut); font-size: 13px; }
#bossBar.idle .gauge { visibility: hidden; }
/* call the next wave early: at the spawn portal (bottom-right of the field), where the next wave comes from */
.nextw { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: 10px; z-index: 4; height: 34px; padding: 0 12px 0 16px; gap: 8px;
  display: flex; align-items: center; background: linear-gradient(180deg, #ffd34d, #f0a800); color: #111; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); animation: nextIn 0.25s ease-out; }
.nextw[hidden] { display: none; }
.nextw b { font-family: var(--en); font-weight: 900; font-style: italic; font-size: 15px; letter-spacing: 1px; }
/* « : the next wave walks left from the bottom-right portal */
.nextw span { width: 16px; height: 14px; background: #111; clip-path: polygon(100% 0, 50% 50%, 50% 0, 0 50%, 50% 100%, 50% 50%, 100% 100%); }
.nextw:hover { filter: brightness(1.15); }
.nextw:active { transform: scale(0.94); }
@keyframes nextIn { from { opacity: 0; transform: translateX(12px); } }
#popup .mana .ult { height: 30px; padding: 0 14px; margin-top: 6px; font-size: 14px; }
/* boss reward: pick one */
#reward { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; width: min(620px, calc(100% - 24px)); padding: 10px; background: rgba(8, 10, 14, 0.9); border: 1px solid rgba(255, 204, 0, 0.5); }
#reward[hidden] { display: none; }
#reward .rh { margin-bottom: 8px; font-size: 14px; color: var(--y); text-align: center; }
#reward .rh .rt { display: block; margin-top: 2px; font-size: 12px; color: #9fb0bc; }
#reward .rh .rt:empty { display: none; }
#reward .rc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#reward button { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; text-align: center; color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); }
#reward button:hover { border-color: var(--y); background: rgba(255, 204, 0, 0.12); }
#reward b { font-size: 15px; } #reward small { font-size: 12px; line-height: 1.35; color: #cfd6dc; }
@media (max-width: 720px) { #reward button { padding: 8px 4px; } #reward b { font-size: 13px; } #reward small { font-size: 11px; } }
.summon .aidb { position: absolute; top: 5px; right: 10px; display: flex; gap: 4px; pointer-events: none; }
.summon .aidb i { padding: 0 5px; font-family: var(--en); font-style: normal; font-weight: 700; font-size: 11px; line-height: 16px; color: #fff; background: rgba(0, 0, 0, 0.45); }
.summon .aidb i.on { color: #111; background: #7dffb0; }
#odds .aid { grid-column: 1 / -1; justify-self: start; padding: 1px 7px; font-size: 12px; color: #cfd6dc; border: 1px solid rgba(255, 255, 255, 0.2); }
#odds .aid.on { color: #111; background: #7dffb0; border-color: #7dffb0; }
#result .share { margin-top: 8px; align-self: flex-start; padding: 5px 12px; font-size: 13px; color: #dfe6ec; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); }
#result .goal { margin-top: 8px; padding: 6px 10px; font-size: 14px; color: var(--y); border-left: 3px solid var(--y); background: rgba(255, 204, 0, 0.08); }
/* title: difficulty and best record */
.diffs { display: flex; gap: 6px; margin-bottom: 14px; }
.diffs button { min-width: 96px; height: 38px; padding: 0 14px; font-size: 15px; color: #cfd6dc; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); }
.diffs button.on { color: #111; background: var(--y); border-color: var(--y); font-weight: 700; }
.diffs button.daily { margin-left: 10px; border-color: rgba(127, 240, 255, 0.5); color: #bff3ff; }
.diffs button.daily.on { color: #111; background: #7ff0ff; border-color: #7ff0ff; }
@media (max-width: 720px) { .diffs { flex-wrap: wrap; justify-content: center; } .diffs button { min-width: 72px; } .diffs button.daily { margin-left: 0; } }
.best { margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, 0.75); min-height: 18px; }
.best b { color: var(--y); }
#popup .warn { margin-top: 8px; padding: 6px 8px; font-size: 12px; line-height: 1.4; color: #ffb4a0; background: rgba(255, 60, 40, 0.14); border-left: 3px solid #ff5a3a; }

/* banners */
.banner { position: absolute; left: 0; right: 0; top: 34%; height: 0; pointer-events: none; z-index: 5; display: flex; justify-content: center; }
.banner > div { position: absolute; top: 0; transform: translateY(-50%); width: 100%; display: flex; flex-direction: column; align-items: center; opacity: 0; }
.banner.on > div { animation: bannerIn 2.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.banner .band { width: 100%; padding: 14px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.82) 22%, rgba(0, 0, 0, 0.82) 78%, transparent); position: relative; }
.banner .band::before, .banner .band::after { content: ''; position: absolute; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--y), transparent); }
.banner .band::before { top: 0; } .banner .band::after { bottom: 0; }
.banner .ms { width: min(470px, 80vw); aspect-ratio: 626 / 111; background: var(--s-missionstart) center / contain no-repeat; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)); }
.banner .bs { width: min(240px, 50vw); aspect-ratio: 571 / 111; background: var(--s-battlestart) center / contain no-repeat; opacity: 0.85; }
.banner .wv { font-family: var(--en); font-weight: 900; font-style: italic; font-size: 64px; line-height: 1; color: #fff; letter-spacing: 2px; text-shadow: 0 0 18px rgba(255, 204, 0, 0.5); }
.banner .wv em { color: var(--y); font-style: italic; }
.banner .sub { font-size: 17px; color: var(--txt2); letter-spacing: 1px; }
.banner.boss .band { background: linear-gradient(90deg, transparent, rgba(60, 0, 0, 0.88) 18%, rgba(30, 0, 0, 0.88) 82%, transparent); }
.banner.boss .band::before, .banner.boss .band::after { height: 10px; left: 0; right: 0;
  background: repeating-linear-gradient(-45deg, #ffb400 0 14px, #111 14px 28px); opacity: 0.9; }
.banner .ct { display: flex; align-items: center; gap: 14px; }
.banner .ct .mk { width: 22px; height: 84px; background: var(--s-caution_mark) center / contain no-repeat; animation: blink 0.35s steps(2) infinite; }
.banner .ct .tx { width: 280px; aspect-ratio: 136 / 28; background: var(--s-caution_text) center / contain no-repeat; }
.banner.boss .sub { color: #ffd2c8; font-size: 20px; }
.banner.boss .sub b { color: var(--y); font-weight: 700; }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes bannerIn { 0% { opacity: 0; transform: translateY(-50%) scaleY(0.2); } 9% { opacity: 1; transform: translateY(-50%) scaleY(1); }
  80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) translateX(-6%); } }

/* toasts: Panel_ToastMsg */
#toasts { position: absolute; top: 14px; left: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 3; }
#toasts .toast { width: fit-content; max-width: min(620px, 100%); }
@media (max-width: 720px) { .toast { font-size: 14px; padding: 8px 16px; } }
/* a long message wraps inside its box (one line ran past the frame on phones) */
.toast { min-width: min(280px, 100%); max-width: 100%; text-align: center; padding: 10px 22px; font-size: 16px; line-height: 1.4; color: var(--txt2);
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  /* see-through: the field stays visible under a message (text keeps a shadow so it still reads over busy fights) */
  background: rgba(13, 22, 27, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 10px solid transparent; border-image: var(--s-glowframe_y) 22 / 10px; margin: -4px 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  animation: toast 1.9s forwards; }
.toast.fail { filter: hue-rotate(-40deg) saturate(1.4); color: #ffd8d0; }
.toast.gem { color: #fff6c0; }
@keyframes toast { 0% { opacity: 0; transform: scaleY(0.4); } 9%, 82% { opacity: 0.92; transform: none; } 100% { opacity: 0; } }

/* summon / merge announce: passive panel (blue slanted) sliding from the right */
/* first-run tips: one per topic, ever; tap to close */
#tip { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 7; width: min(440px, calc(100% - 24px)); padding: 10px 14px 10px 44px;
  background: rgba(8, 10, 14, 0.94); border: 1px solid rgba(255, 204, 0, 0.6); border-left: 4px solid var(--y); color: #e8edf2; font-size: 14px; line-height: 1.45;
  cursor: pointer; animation: tipIn 0.3s; }
#tip[hidden] { display: none; }
#tip::before { content: 'TIP'; position: absolute; left: 10px; top: 11px; font-family: var(--en); font-weight: 700; font-size: 12px; color: var(--y); letter-spacing: 1px; }
#tip b { color: var(--y); }
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, -8px); } }
#announce { position: absolute; right: 0; top: 56%; pointer-events: none; z-index: 4; }
.ann { position: relative; width: 440px; height: 84px; display: flex; align-items: center; gap: 12px; padding: 0 26px 0 104px;
  background: var(--s-passive_l) 0 0 / 100% 100% no-repeat; animation: annIn 0.32s cubic-bezier(.2, .8, .2, 1); }
.ann.r4 { background-image: var(--s-passive_r); }
.ann.out { transition: 0.45s; opacity: 0; transform: translateX(40px); }
.ann .hx { position: absolute; left: 10px; top: 50%; width: 84px; height: 84px; transform: translateY(-50%); }
.ann > div { flex: 1; min-width: 0; }
.ann .rk { width: 46px; height: 46px; background: center / contain no-repeat; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.ann small { display: block; font-size: 13px; color: var(--c); letter-spacing: 1px; }
.ann b { font-size: 24px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
@keyframes annIn { from { opacity: 0; transform: translateX(80px); } }

/* hexagon portrait (the formation screen's hex icon): tier-coloured rim around the portrait */
.hx { position: relative; flex: none; display: inline-block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.hx::before, .hx::after { content: ''; position: absolute; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%); }
.hx::before { inset: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--c, #fff) 100%, #fff 35%), var(--c, #fff) 45%, color-mix(in srgb, var(--c, #fff) 60%, #000)); }
/* portrait zoomed out 15% (128% -> 109%) and raised so the face sits in the middle of the hexagon */
.hx::after { inset: 7%; background: var(--img) center 120% / 109% no-repeat, #1a1d22; }
.hx .hrk { position: absolute; z-index: 1; left: 50%; bottom: -2px; transform: translateX(-50%); padding: 0 4px; min-width: 16px; text-align: center; white-space: nowrap;
  font: 700 normal 10px/13px var(--en); letter-spacing: 0.5px; color: #111; background: var(--c, #fff); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 3px; pointer-events: none; }

/* unit detail popup (BattleCharacterDetail-like) */
#popup { position: absolute; left: 0; top: 0; width: 300px; padding: 12px 14px 14px; z-index: 6; background: rgba(8, 9, 11, 0.92);
  border: 2px solid transparent; border-image: var(--s-sqframe) 6 14 fill / 6px 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
#popup[hidden] { display: none; }
#popup .synergy { margin-top: 9px; padding: 9px; border: 1px solid #687080; background: rgba(104,112,128,.12); font-size: 12px; }
#popup .synergy.active { border-color: #7dffb0; background: rgba(65,180,110,.12); }
#popup .synergy > b { display: flex; justify-content: space-between; gap: 8px; color: #fff; }
#popup .synergy > b span { color: #bdc4ce; }
#popup .synergy.active > b span { color: #7dffb0; }
#popup .synergy-members, #popup .synergy-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#popup .synergy-members { margin-top: 8px; }
#popup .synergy-member { display: flex; align-items: center; gap: 5px; color: #c3c9d3; }
#popup .synergy-member .hx { width: 30px; height: 34px; flex: none; }
#popup .synergy-member small { display: block; color: #b2b9c4; font-size: 10px; }
#popup .synergy-member.present small { color: #7dffb0; }
#popup .synergy em { font-style: normal; color: #cbd0d8; }
#popup .synergy p { margin: 7px 0 0; color: #e0e5ec; line-height: 1.5; }
#popup { max-height: calc(100% - 16px); overflow-y: auto; }
#popup .combat-info { margin-top: 9px; padding: 8px 10px; background: rgba(255, 255, 255, 0.045); border-left: 2px solid var(--c); }
#popup .combat-info > b { display: block; font-size: 13px; color: #fff; }
#popup .combat-info small { color: var(--c); font-size: 11px; margin-left: 4px; }
#popup .combat-info p { margin: 5px 0 0; color: #cbd0d8; font-size: 12px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; }
#popup::before { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; background: var(--c); }
#popup .ph { display: flex; gap: 12px; align-items: center; }
#popup .ph .hx { width: 70px; height: 70px; }
#popup .ph .nm { min-width: 0; flex: 1; }
#popup .ph .nm b { display: block; font-size: 21px; line-height: 1.15; }
#popup .ph .nm small { display: block; color: var(--mut); font-size: 13px; margin-top: 3px; }
#popup .ph .nm .ul { display: block; color: var(--y); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#popup .rk { width: 44px; height: 44px; background: center / contain no-repeat; flex: none; align-self: flex-start; }
#popup .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 12px 0 8px; padding: 9px 10px; background: rgba(255, 255, 255, 0.04); border-left: 3px solid rgba(255, 255, 255, 0.15); }
#popup .stats span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); white-space: nowrap; }
#popup .stats .si { width: 20px; height: 20px; background: center / contain no-repeat; flex: none; }
#popup .stats b { font-family: var(--en); font-weight: 700; color: #fff; margin-left: auto; font-size: 15px; }
#popup .mana { font-size: 13px; color: var(--y); margin: 8px 0 4px; display: flex; flex-direction: column; gap: 5px; }
#popup .uses { font-size: 13px; color: var(--mut); display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; }
#popup .uses .hx { width: 34px; height: 34px; }
#popup .btns { display: flex; gap: 8px; margin-top: 12px; }
#popup .btns .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; height: 42px; font-size: 16px; border-width: 0 22px 0 26px; border-image-width: 0 22px 0 26px; }
#popup .btns small { font-family: var(--en); font-weight: 700; margin-left: 4px; }

/* slanted buttons: UI_btn_13 tinted like the battle dialog (yellow / orange / dark) */
.btn { position: relative; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 26px 0 30px;
  font-family: var(--kr); font-weight: 700; font-size: 18px; color: #111; border-style: solid; border-color: transparent; border-width: 0 25px 0 30px;
  border-image: var(--s-btn13_y) 0 42 0 49 fill / 0 25px 0 30px; transition: transform 0.08s, filter 0.12s; white-space: nowrap; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: scale(0.96); }
.btn.o { border-image-source: var(--s-btn13_o); }
.btn.g { border-image-source: var(--s-btn13_g); }
.btn.d { border-image-source: var(--s-btn13_d); color: #dfe6ec; }
.btn:disabled { border-image-source: var(--s-btn13_d); color: #6c737a; }
#btnContinue { margin-top: 10px; height: 44px; font-size: 18px; min-width: 220px; }
#btnContinue[hidden] { display: none; } /* .btn sets display: without this a run-less title shows an empty button */
#btnContinue small { font-family: var(--en); font-size: 13px; font-weight: 700; margin-left: 10px; color: var(--y); }
.btn.lg { height: 64px; font-size: 26px; border-width: 0 35px 0 41px; border-image-width: 0 35px 0 41px; letter-spacing: 2px; }

/* ── bottom action bar (skill area of Panel_StageBattle) ─────────── */
#bottom { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 14px; z-index: 5;
  padding: 10px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: linear-gradient(0deg, rgba(8, 9, 11, 0.97), rgba(8, 9, 11, 0.82) 70%, rgba(8, 9, 11, 0)); }
#bottom::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.4), rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.06) 65%, rgba(255, 204, 0, 0.4)); }
.acts { display: flex; align-items: flex-end; gap: 10px; }
.act { position: relative; width: 112px; height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, rgba(48, 52, 58, 0.95), rgba(24, 26, 30, 0.95)); border: 1px solid rgba(143, 146, 148, 0.5);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: transform 0.08s, background 0.12s; }
.act::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.15); transition: background 0.12s; }
.act:hover { background: linear-gradient(180deg, rgba(62, 66, 74, 0.95), rgba(30, 32, 36, 0.95)); }
.act:active { transform: scale(0.96); }
.act .ai { width: 28px; height: 28px; background: #e9eef2; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.act b { font-size: 17px; line-height: 1; }
.act small { font-size: 11px; color: var(--mut); line-height: 1; }
.act.active { background: linear-gradient(180deg, #ffd84a, #f0a800); color: #111; }
.act.active .ai { background: #111; }
.act.active small { color: #3a2a00; }
.act.active::after { background: #111; }
.act.ready::after { background: var(--M); box-shadow: 0 0 10px var(--M); animation: readyPulse 0.7s infinite alternate; }
.act .badge { position: absolute; top: 6px; right: 18px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8243c; color: #fff;
  font-family: var(--en); font-weight: 700; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 8px rgba(232, 36, 60, 0.8); }
@keyframes readyPulse { to { opacity: 0.45; } }
.ai.random { -webkit-mask-image: var(--s-i_random); mask-image: var(--s-i_random); }
.ai.speed { -webkit-mask-image: var(--s-set_speed); mask-image: var(--s-set_speed); }
.ai.auto { -webkit-mask-image: var(--s-i_squad); mask-image: var(--s-i_squad); }
/* speed (x2 / x3) and AUTO on: lit like a ready button */
.act.on b, .act.on small { color: var(--y); } .act.on .ai { background: var(--y); }
.act.on::after { background: var(--y); box-shadow: 0 0 10px rgba(255, 204, 0, 0.8); }
.ai.research { -webkit-mask-image: var(--s-i_research); mask-image: var(--s-i_research); }
.ai.mechanic { -webkit-mask-image: var(--s-i_mechanic); mask-image: var(--s-i_mechanic); }

/* summon: the orange "행동 개시" play button */
.summon { position: relative; width: 260px; height: 86px; display: flex; align-items: center; padding: 0 0 0 34px; gap: 10px; color: #fff;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(40, 14, 0, 0.8) 35%, rgba(255, 121, 0, 0.92) 100%);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 50%); transition: transform 0.08s, filter 0.15s; }
.summon::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 190, 90, 0.5); clip-path: inherit; pointer-events: none; }
.summon .st { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; z-index: 1; }
.summon .st b { font-size: 34px; letter-spacing: 4px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.summon .st small { margin-top: 6px; font-family: var(--en); font-weight: 700; font-size: 16px; color: #ffe27a; display: flex; align-items: center; gap: 4px; }
.summon .st small .ri { width: 16px; height: 16px; background: #ffce04; -webkit-mask: var(--s-i_gear) center / contain no-repeat; mask: var(--s-i_gear) center / contain no-repeat; }
.summon .hexb { position: absolute; right: 10px; top: 50%; width: 82px; height: 78px; transform: translateY(-50%); background: var(--s-hex_y) center / contain no-repeat;
  display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(255, 170, 0, 0.7)); }
.summon .hexb::after { content: ''; width: 34px; height: 34px; background: #3a2000; -webkit-mask: var(--s-i_squad) center / contain no-repeat; mask: var(--s-i_squad) center / contain no-repeat; }
.summon kbd { position: absolute; left: 34px; top: 6px; font-family: var(--en); font-size: 10px; color: rgba(255, 255, 255, 0.45); letter-spacing: 1px; }
.summon:hover { filter: brightness(1.1); }
.summon:active { transform: scale(0.97); }
/* can't summon (parts short, no room): the whole button goes grey and flat; ready: a light sweeps across it.
   .poor beats :hover too (phones keep :hover after a tap, which used to clear the grey and leave only the red cost) */
.summon.poor, .summon.poor:hover { filter: grayscale(1) brightness(0.55); }
.summon.poor .st small { color: #ff8a7a; }
.summon.poor .hexb { opacity: 0.5; }
.summon.ready::after { content: ''; position: absolute; inset: 0; pointer-events: none; clip-path: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 240, 200, 0.4) 50%, transparent 65%) 0 0 / 300% 100% no-repeat; animation: sumshine 2.4s ease-in-out infinite; }
@keyframes sumshine { 0% { background-position: 120% 0; } 55%, 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .summon.ready::after { animation: none; } }

/* summon odds: rank badges */
#odds { position: absolute; left: 14px; bottom: 12px; display: grid; grid-template-columns: auto auto; gap: 3px 10px; padding: 8px 14px 9px 10px; background: rgba(0, 0, 0, 0.55);
  border-left: 3px solid var(--y); font-size: 13px; }
#odds .t { grid-column: 1 / -1; font-family: var(--en); font-weight: 700; font-size: 11px; letter-spacing: 2px; color: var(--mut); margin-bottom: 2px; }
#odds span { display: flex; align-items: center; gap: 5px; font-family: var(--en); font-weight: 700; }
#odds span i { width: 20px; height: 20px; background: center / contain no-repeat; }

/* ── popup windows (Panel_GambleResult / Setting style) ─────────── */
/* one cell the size of the stage: an auto row would grow with a long window and its max-height would never bite */
#modal { position: absolute; inset: 0; z-index: 10; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; background: rgba(0, 0, 0, 0.45); }
#modal[hidden] { display: none; }
.pwin { position: relative; width: min(820px, calc(100% - 24px)); max-height: calc(100% - 24px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, #33373e, #23262b 30%, #1d1f23); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: winIn 0.18s ease-out; }
@keyframes winIn { from { opacity: 0; transform: scale(0.94); } }
.pwin .wh { position: relative; height: 54px; display: flex; align-items: center; padding: 0 64px 0 26px; flex: none;
  border-style: solid; border-color: transparent; border-width: 0 70px 0 30px; border-image: var(--s-popup_title) 0 156 0 68 fill / 0 70px 0 30px; margin: 0 -1px; }
.pwin .wh h3 { margin: 0 0 0 -16px; font-size: 22px; font-weight: 700; color: var(--navy); }
.pwin .wh h3 small { font-size: 13px; font-weight: 400; color: #39516a; margin-left: 10px; }
.pwin .x { position: absolute; right: -54px; top: 50%; width: 42px; height: 42px; transform: translateY(-50%); background: var(--s-close) center / 34px no-repeat; }
.pwin .x:hover { filter: brightness(1.3); }
.pwin .wb { padding: 16px 18px 18px; overflow-y: auto; min-height: 0; }
/* the page blocks touch gestures (touch-action: none keeps the field from panning); every scrolling panel opts back
   in to vertical swipes, or long lists (SSS recipes, battle report, small-phone title) cannot be scrolled by finger */
.pwin .wb, #result .rteam, #result .rwrap, #popup, #title { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pwin .wf { height: 22px; flex: none; background: var(--s-popup_deco) 0 0 / 16px 98px repeat-x; opacity: 0.6; }

/* rank cards (gamble / upgrade) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 0; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25)); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; transition: transform 0.08s, background 0.15s; }
.card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.card:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(0, 0, 0, 0.25)); }
.card:active:not(:disabled) { transform: scale(0.97); }
.card:disabled { opacity: 0.5; }
.card .rk { width: 64px; height: 64px; background: center / contain no-repeat; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }
.card b { font-size: 17px; }
.card .pct { font-family: var(--en); font-weight: 900; font-style: italic; font-size: 34px; line-height: 1; color: var(--c); }
.card .lv { font-family: var(--en); font-weight: 700; font-size: 22px; }
.card .eff { font-size: 13px; color: var(--mut); margin-bottom: 8px; }
/* the price sits on the card's floor: a two-line description must not push one card's button below its neighbours' */
.card .eff { flex: none; }
.card .cost { align-self: stretch; margin-top: auto; padding: 8px 0; background: rgba(0, 0, 0, 0.45); font-family: var(--en); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 5px; }
.card .cost .ri { width: 18px; height: 18px; background: #ffce04; -webkit-mask: var(--s-i_gear) center / contain no-repeat; mask: var(--s-i_gear) center / contain no-repeat; }
.card .cost .rt { width: 24px; height: 18px; background: var(--s-i_tuna) center / contain no-repeat; }
.card:not(:disabled) .cost { background: linear-gradient(90deg, #ffcc00, #f0a800); color: #111; }
.card:not(:disabled) .cost .ri { background: #4a3500; }
.card.max .cost { background: rgba(0, 0, 0, 0.45); color: var(--mut); }
.hint { margin: 12px 2px 0; font-size: 13px; color: var(--mut); display: flex; align-items: center; gap: 6px; }
.hint::before { content: ''; width: 16px; height: 16px; background: var(--s-i_question) center / contain no-repeat; flex: none; }

/* SSS recipes */
.recipes { display: flex; flex-direction: column; gap: 8px; }
.recipe { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); }
.recipe.ready { background: linear-gradient(90deg, rgba(255, 204, 0, 0.16), rgba(0, 0, 0, 0.3)); border-color: rgba(255, 204, 0, 0.55); }
.recipe.ready::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: var(--y); }
.recipe .btn small { font-family: var(--en); font-weight: 700; margin-left: 6px; font-size: 13px; }
.recipe .res2 { display: flex; align-items: center; gap: 10px; width: 210px; flex: none; }
.recipe .res2 .hx { width: 58px; height: 58px; }
.recipe .res2 b { display: block; font-size: 16px; } .recipe .res2 small { color: #ff9aa8; font-size: 12px; }
.recipe .parts { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.recipe .parts em { color: var(--mut); font-style: normal; font-family: var(--en); font-weight: 700; }
.part { display: flex; flex-direction: column; align-items: center; width: 76px; opacity: 0.38; filter: grayscale(1); }
.part.have { opacity: 1; filter: none; }
.part .hx { width: 44px; height: 44px; }
.part i { font-style: normal; font-size: 12px; line-height: 1.15; text-align: center; max-width: 76px; margin-top: 3px; word-break: keep-all; }
.part.have i::after { content: ' ✓'; color: var(--gr); }
.recipe .btn { height: 42px; font-size: 16px; }

/* pause: Panel_battle_MessageDialog (black band, yellow title, yellow/orange buttons) */
#pauseOv { position: absolute; inset: 0; display: grid; place-items: center; z-index: 9; background: rgba(0, 0, 0, 0.35); }
#pauseOv[hidden] { display: none; }
/* guided tutorial: four dim blockers frame the lit area; only that area takes input */
#tut { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#tut[hidden] { display: none; }
#tut .tb { position: fixed; background: rgba(0, 0, 0, 0.66); pointer-events: auto; }
#tut .tring { position: fixed; border: 2px solid var(--y); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 204, 0, 0.55); animation: tutPulse 1.2s ease-in-out infinite; }
@keyframes tutPulse { 50% { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 34px rgba(255, 204, 0, 0.9); } }
#tut .tpanel { position: fixed; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); pointer-events: auto; padding: 12px 16px 12px;
  background: rgba(8, 10, 14, 0.97); border: 1px solid rgba(255, 204, 0, 0.55); border-top: 3px solid var(--y); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); }
#tut .tpanel.top { top: max(12px, env(safe-area-inset-top)); }
#tut .tpanel.bottom { bottom: max(12px, env(safe-area-inset-bottom)); }
#tut .tpanel.mid { top: 50%; transform: translate(-50%, -50%); }
/* header row: step counter on the left, a small skip link on the right (keeps the panel short) */
#tut .thead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 2px; }
#tut .tstep { font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--y); }
#tut .tskip { min-height: 36px; padding: 0 2px 0 12px; font-size: 13px; color: #9fb0bc; text-decoration: underline; text-underline-offset: 3px; }
#tut .tskip:hover { color: #fff; }
#tut .ttx { font-size: 16px; line-height: 1.55; color: #eef2f5; }
#tut .ttx b { color: var(--y); }
#tut .ttx kbd { font-size: 12px; }
#tut .tcatch { position: fixed; inset: 0; pointer-events: auto; cursor: pointer; }
#tut .tcatch[hidden] { display: none; }
#tut .tpanel.tap { cursor: pointer; }
#tut .tbtns { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
#tut .thint { font-size: 12px; color: #8fa0ac; min-width: 0; }
#tut .tbtns[hidden] { display: none; }
#tut .tbtns .btn { height: 44px; min-width: 150px; padding: 0 6px; font-size: 16px; border-width: 0 22px 0 26px; border-image-width: 0 22px 0 26px; }
/* field steps: docked over the footer (locked during them) so the path along the top and sides stays clear */
#tut .tpanel.dock { bottom: max(4px, env(safe-area-inset-bottom)); padding: 4px 12px 7px; border-top-width: 2px; background: rgba(8, 10, 14, 0.93); }
#tut .tpanel.dock .thead { margin: 0; }
#tut .tpanel.dock .tskip { min-height: 30px; }
#tut .tpanel.dock .ttx { font-size: 13px; line-height: 1.4; }
@media (max-width: 720px) { #tut .ttx { font-size: 14px; } #tut .tbtns .btn { min-width: 120px; } }
/* sideways phones: the footer is a right-hand rail, so the docked panel sits over it instead of over the path */
@media (orientation: landscape) and (max-height: 520px) { #tut .tpanel.dock { left: auto; right: max(4px, env(safe-area-inset-right)); transform: none; width: 220px; } }
#askOv { position: fixed; inset: 0; display: grid; place-items: center; z-index: 60; background: rgba(0, 0, 0, 0.6); }
#askOv[hidden] { display: none; }
.dlg { width: 100%; min-height: 29%; justify-content: center; padding: 30px 16px 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(5, 6, 8, 0.93);
  border-top: 1px solid rgba(255, 204, 0, 0.35); border-bottom: 1px solid rgba(255, 204, 0, 0.35); animation: dlgIn 0.2s ease-out; }
@keyframes dlgIn { from { transform: scaleY(0); } }
.dlg h4 { margin: 0; font-size: 30px; font-weight: 700; color: var(--y2); }
.dlg p { margin: 0 0 10px; font-size: 16px; color: #b0b0b0; text-align: center; }
.dlg .row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.dlg .btn { min-width: 220px; height: 54px; font-size: 21px; border-width: 0 29px 0 34px; border-image-width: 0 29px 0 34px; }
.dlg .keys { margin-top: 8px; }

/* ── loading (Panel_Loading: black, logo low centre, yellow rounded bar, % on the right) ── */
#loading { z-index: 40; background: #000; justify-content: flex-end; padding: 0 0 7vh; transition: opacity 0.5s; }
#loading.out { opacity: 0; pointer-events: none; }
#loading .lbg { position: absolute; inset: 0; background: center 30% / cover no-repeat; opacity: 0.18; filter: grayscale(0.4); }
#loading .lo { position: relative; width: min(380px, 70vw); aspect-ratio: var(--ar, 4.4); background: var(--logo) center / contain no-repeat; margin-bottom: 5vh; }
/* the tip wraps inside the screen (a long tip ran off both edges), and the percentage sits under the bar, clear of it */
#loading .ltip { position: relative; font-size: 15px; color: #c9d2da; margin-bottom: 14px; min-height: 1.4em; max-width: min(1200px, 88vw); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
#loading .ltip b { color: var(--y); font-family: var(--en); font-weight: 700; margin-right: 8px; letter-spacing: 1px; }
#loading .lbar { position: relative; width: min(1200px, 80vw); height: 14px; border-radius: 7px; background: rgba(33, 33, 33, 0.85); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#loading .lbar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 7px; background: linear-gradient(180deg, #ffe45c, #ffd800 50%, #e8b800); transition: width 0.2s; }
#loading .lpct { position: relative; width: min(1200px, 80vw); margin-top: 8px; text-align: right; font-family: var(--en); font-weight: 700; font-size: 28px; line-height: 1; text-shadow: 0 0 0 #000, 2px 2px 0 #000; }

/* ── settings (Panel_Setting: title bar, yellow section tabs, gauges and toggles) ── */
.set { display: grid; grid-template-columns: 150px 1fr; gap: 16px; min-height: 260px; }
.set .tabs { display: flex; flex-direction: column; gap: 8px; }
.set .langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.set .langs button { height: 46px; font-size: 16px; color: #cfd6dc; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.set .langs button.on { color: #111; background: linear-gradient(180deg, #ffd84a, #f0a800); border-color: transparent; font-weight: 700; }
/* CJK pages: the system's Japanese / Chinese faces first (Godo only covers Korean and Latin) */
html:lang(ja) { --kr: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif; }
html:lang(zh-Hans) { --kr: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif; }
html:lang(zh-Hant) { --kr: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', system-ui, sans-serif; }
.set .tab { height: 48px; padding: 0 14px; text-align: left; font-size: 16px; color: #cfd6dc; background: rgba(255, 255, 255, 0.05); border-left: 4px solid rgba(255, 255, 255, 0.15); }
.set .tab.on { background: linear-gradient(90deg, #ffcc00, #f0a800); color: #111; border-left-color: #111; }
.set .rows { display: flex; flex-direction: column; gap: 10px; }
.set .row2 { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; background: rgba(0, 0, 0, 0.32); border-left: 3px solid rgba(148, 157, 164, 0.6); }
.set .row2 > span { width: 120px; flex: none; font-size: 16px; }
.set .row2 small { color: var(--mut); font-size: 12px; margin-left: auto; }
.set input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 10px; border-radius: 5px; outline: none;
  background: linear-gradient(90deg, #ffcc00 var(--v, 100%), rgba(33, 33, 33, 0.95) var(--v, 100%)); }
.set input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #ffcc00; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5); cursor: pointer; }
.set input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #ffcc00; border: 0; }
.set .val { width: 46px; text-align: right; font-family: var(--en); font-weight: 700; }
.seg { display: flex; gap: 6px; }
.seg button { min-width: 84px; height: 40px; padding: 0 12px; font-size: 15px; color: #cfd6dc; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.seg button.on { background: #ffcc00; color: #111; border-color: #ffcc00; }

/* ── title (loading screen + key art) ─────────────────── */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.overlay[hidden] { display: none; }
#title { background: #000; overflow: hidden; }
#titleBg { position: absolute; inset: 0; background-size: cover; background-position: center 28%; filter: brightness(0.5) saturate(1.05); animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.1); } }
#title::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 8%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.55)); }
#title > *:not(#titleBg):not(.ver):not(.notesBtn) { position: relative; z-index: 2; }
.ver { z-index: 2; }
body.paused #bottom { pointer-events: none; filter: brightness(0.55) saturate(0.6); }
.logo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logo .lo { width: min(520px, 78vw); aspect-ratio: var(--ar, 4.4); background: var(--logo) center / contain no-repeat; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.8)); }
.logo .sub { display: flex; align-items: center; gap: 12px; font-family: var(--en); font-weight: 700; letter-spacing: 9px; font-size: 18px; color: var(--y); }
.logo .sub::before, .logo .sub::after { content: ''; width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--y)); }
.logo .sub::after { transform: scaleX(-1); }
.logo h1 { margin: 0; font-size: clamp(30px, 5vw, 50px); font-weight: 700; letter-spacing: 6px; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8); }
#titleChars { display: flex; gap: 6px; margin: 22px 0 18px; flex-wrap: wrap; justify-content: center; }
#titleChars .hx { width: 72px; height: 72px; animation: pop 0.5s backwards; }
/* the two top ranks side by side, each under its rank name */
#titleChars .tg { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#titleChars .tg > div { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#titleChars .tg > b { font: 900 italic 13px/1 var(--en); letter-spacing: 2px; padding: 2px 10px; border-radius: 3px; color: #111; }
#titleChars .tg.lr > b { background: var(--prism); box-shadow: 0 0 10px rgba(200, 220, 255, 0.6); }
#titleChars .tg.ur > b { background: linear-gradient(90deg, #c9963a, #fff2c8 50%, #c9963a); box-shadow: 0 0 10px rgba(255, 220, 140, 0.6); }
#titleChars { column-gap: 22px; }
#titleChars .tg.god > b { background: linear-gradient(90deg, #b46bff, #fff6e0 35%, #ffe08a 65%, #b46bff); box-shadow: 0 0 14px rgba(180, 107, 255, 0.8); }

/* UR (crafted, one on the field): a gold rim with a light sweeping across it and sparkles twinkling on the rim */
:root { --urgold: linear-gradient(160deg, #fffaf0, #f4d78a 40%, #c9963a 70%, #fff2c8); }
.hx.ur::before { background: var(--urgold); }
.hx .shn, .hx .spk { position: absolute; pointer-events: none; }
.hx .shn { inset: 0; z-index: 2; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%) 0 0 / 300% 100% no-repeat; animation: urshine 3.2s ease-in-out infinite; }
@keyframes urshine { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
.hx .spk { z-index: 3; width: 34%; height: 34%; background: radial-gradient(circle, #fff 0 18%, rgba(255, 244, 200, 0.9) 30%, transparent 62%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: 0; transform: scale(0); animation: urspark 2.4s ease-in-out infinite; }
.hx .spk.s1 { left: -6%; top: 6%; }
.hx .spk.s2 { right: -8%; top: 30%; animation-delay: 0.8s; width: 26%; height: 26%; }
.hx .spk.s3 { left: -4%; bottom: 14%; animation-delay: 1.6s; width: 28%; height: 28%; }
@keyframes urspark { 0%, 60%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } 75% { opacity: 1; transform: scale(1) rotate(45deg); } }
.hx.ur .hrk, #popup.ur::before { background: linear-gradient(90deg, #c9963a, #fff2c8 50%, #c9963a); }
.ann.ur small { color: #ffe6a0; text-shadow: 0 0 8px rgba(255, 220, 140, 0.8); }
/* UR shines brightest: a pulsing gold halo behind the hexagon, a brighter sweep and a fourth, larger sparkle */
.hx .glo { position: absolute; inset: -14%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.75) 0 35%, rgba(255, 190, 80, 0.3) 55%, transparent 70%); animation: urglow 2.2s ease-in-out infinite; }
@keyframes urglow { 0%, 100% { opacity: 0.45; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.04); } }
.hx.ur .shn { background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.8) 50%, transparent 62%); animation-duration: 2.6s; }
.hx.ur .spk { width: 40%; height: 40%; }
.hx.ur .spk.s4 { right: -10%; top: -8%; width: 48%; height: 48%; animation-delay: 1.2s; }
/* LR (three SSS): a holographic rim (soft prism colours over pearl), a light sweep and sparkles each in its own hue */
:root { --prism: linear-gradient(100deg, #ffb3c7, #ffd9a3, #fff4a8, #b9ffcf, #a8e4ff, #d2b8ff, #ffb3e6); }
.hx.lr::before { background: conic-gradient(from 210deg, #ffc2d4, #ffe2b0, #fff6c0, #c8ffd9, #b8ecff, #dcc8ff, #ffc2ec, #ffc2d4); }
.hx.lr .shn { animation-duration: 4s; background-image: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%); }
.hx.lr .spk { animation-duration: 2.6s; }
.hx.lr .spk.s1 { background: radial-gradient(circle, #fff 0 18%, rgba(255, 170, 210, 0.95) 32%, transparent 62%); }
.hx.lr .spk.s2 { background: radial-gradient(circle, #fff 0 18%, rgba(150, 220, 255, 0.95) 32%, transparent 62%); animation-delay: 0.9s; }
.hx.lr .spk.s3 { background: radial-gradient(circle, #fff 0 18%, rgba(190, 255, 170, 0.95) 32%, transparent 62%); animation-delay: 1.8s; }
.hx.lr .hrk, #popup.lr::before { background: var(--prism); }
.ann.lr small { background: var(--prism); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx.god::before { background: conic-gradient(from 0deg, #fff6e0, #d9b8ff, #fff, #ffe08a, #b46bff, #fff6e0); }
.hx.god .glo { background: radial-gradient(circle, rgba(255, 246, 224, 0.9) 0 30%, rgba(180, 107, 255, 0.45) 55%, transparent 72%); animation-duration: 1.6s; }
.hx .ray { position: absolute; inset: -30%; z-index: -2; pointer-events: none; border-radius: 50%; opacity: 0.8;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 224, 0.55) 0 6deg, transparent 6deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); animation: godspin 9s linear infinite; }
@keyframes godspin { to { transform: rotate(360deg); } }
.hx.god .shn { background-image: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.9) 50%, transparent 64%); animation-duration: 1.8s; }
.hx.god .spk { width: 44%; height: 44%; animation-duration: 1.6s; }
.hx.god .spk.s2 { background: radial-gradient(circle, #fff 0 18%, rgba(200, 150, 255, 0.95) 32%, transparent 62%); }
.hx.god .spk.s4 { right: -10%; top: -8%; width: 50%; height: 50%; animation-delay: 0.8s; }
.hx.god .hrk, #popup.god::before { background: linear-gradient(90deg, #b46bff, #fff6e0 35%, #ffe08a 65%, #b46bff); color: #1a0030; }
.ann.god small { color: #fff6e0; text-shadow: 0 0 10px rgba(180, 107, 255, 0.95), 0 0 4px #fff; }
#banner.god .wv em, .banner.god .wv em { color: #fff6e0; text-shadow: 0 0 14px rgba(180, 107, 255, 0.95), 0 0 4px #fff; }
#popup .btn.keep.on { background: linear-gradient(180deg, #f2f2f2, #b9c2cc); color: #111; }
.recipe .rtag { display: block; font-style: normal; font-size: 11px; color: #9fb4c8; margin-top: 2px; }
#odds .god { color: #fff6e0; text-shadow: 0 0 6px rgba(180, 107, 255, 0.9); font-family: var(--en); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .hx .shn, .hx .spk, .hx .glo, .hx .ray { animation: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.8); } }
#titleChars.wait .hx { animation: none; opacity: 0; }
.brief { width: min(860px, 100%); margin-bottom: 22px; background: rgba(10, 11, 13, 0.82); border: 1px solid rgba(255, 255, 255, 0.1); text-align: left; }
.brief .bh { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(90deg, rgba(255, 204, 0, 0.18), transparent); border-bottom: 1px solid rgba(255, 204, 0, 0.35); }
.brief .bh b { font-size: 15px; color: var(--y); }
.brief .bh small { font-family: var(--en); font-weight: 700; font-size: 11px; letter-spacing: 3px; color: var(--mut); }
.howto { display: grid; grid-template-columns: repeat(4, 1fr); }
.howto div { padding: 12px 16px 14px; font-size: 14px; line-height: 1.55; color: #d7dee5; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.howto div:last-child { border-right: 0; }
.howto b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; margin-bottom: 4px; }
.howto b i { font-family: var(--en); font-weight: 900; font-style: italic; font-size: 22px; color: var(--y); }
.keys { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.keys kbd { display: inline-block; min-width: 20px; border: 1px solid rgba(255, 255, 255, 0.25); border-bottom-width: 2px; padding: 0 5px; margin: 0 1px;
  background: rgba(255, 255, 255, 0.14); font-family: var(--en); font-weight: 700; font-size: 11px; color: #fff; }
.touch { margin-top: 12px; font-family: var(--en); font-weight: 700; letter-spacing: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.6); animation: blink 1.2s infinite; }
.ver { position: absolute; right: 14px; bottom: 10px; font-family: var(--en); font-size: 11px; color: rgba(255, 255, 255, 0.35); }

/* ── result: MISSION COMPLETE / MISSION FAIL ─────────────────────── */
#result { background: rgba(0, 0, 0, 0.78); padding: 0; }
#result .rwrap { position: relative; width: min(1060px, 100%); height: 100%; max-height: 640px; display: flex; align-items: center; gap: 24px; padding: 20px; }
#result .mc { position: relative; flex: 1; min-width: 0; align-self: stretch; padding: 30px 28px 24px; display: flex; flex-direction: column; text-align: left;
  background: linear-gradient(160deg, rgba(55, 67, 129, 0.35), rgba(0, 0, 0, 0.6)); border-left: 4px solid var(--y); animation: mcIn 0.45s cubic-bezier(.2, .8, .2, 1); }
#result .mc::after { content: ''; position: absolute; right: -10px; top: -14px; width: 260px; height: 194px; background: var(--s-mc_acc) center / contain no-repeat; opacity: 0.35; pointer-events: none; }
@keyframes mcIn { from { opacity: 0; transform: translateX(-40px); } }
#result h2 { margin: 0; font-size: clamp(40px, 6vw, 60px); font-weight: 700; line-height: 1; }
#result .lab { width: 280px; aspect-ratio: 295 / 24; margin-top: 10px; background: var(--s-mc_label) left center / contain no-repeat; }
#result .stars { display: flex; gap: 6px; margin: 18px 0 14px; }
#result .stars i { width: 74px; height: 70px; background: var(--s-star_frame) center / contain no-repeat; }
#result .stars i.on { background-image: var(--s-star); animation: starIn 0.4s backwards; }
@keyframes starIn { from { transform: scale(2.2); opacity: 0; } }
#result .ml { display: flex; flex-direction: column; gap: 6px; }
#result .ml div { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; font-size: 15px;
  background: rgba(55, 67, 129, 0.85); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
#result .ml div.ok { background: linear-gradient(90deg, #f1b002, #c98a00); color: #111; }
#result .ml div b { margin-left: auto; font-family: var(--en); font-weight: 700; font-size: 18px; }
#result .ml div i { width: 18px; height: 18px; background: var(--s-i_check) center / contain no-repeat; filter: brightness(0); opacity: 0.8; }
#result .ml div:not(.ok) i { filter: none; opacity: 0.25; }
#result .rbtns { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; }
#result .report { flex: 0 0 400px; align-self: stretch; text-align: left; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(40, 43, 48, 0.9), rgba(12, 13, 15, 0.92)); border: 1px solid rgba(143, 146, 148, 0.6);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  animation: mcIn 0.45s 0.1s cubic-bezier(.2, .8, .2, 1) backwards; min-width: 0; }
#result .report .rh { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
#result .report .rh b { font-size: 24px; } #result .report .rh small { font-family: var(--en); font-weight: 700; color: var(--mut); letter-spacing: 1px; }
#result .rteam { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; overflow-y: auto; }
#result .ru { display: flex; align-items: center; gap: 10px; padding: 4px 8px; background: rgba(255, 255, 255, 0.04); }
#result .ru .hx { width: 46px; height: 46px; }
#result .ru .rk { width: 30px; height: 30px; background: center / contain no-repeat; flex: none; }
#result .ru .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#result .ru .nm b { font-size: 15px; } #result .ru .nm small { color: var(--mut); font-size: 12px; margin-left: 6px; }
#result .ru .gauge { height: 6px; margin-top: 5px; }
#result .ru .v { font-family: var(--en); font-weight: 700; font-size: 15px; color: var(--y); min-width: 64px; text-align: right; }
#result.lose .mc { background: linear-gradient(180deg, rgba(60, 0, 0, 0.55), rgba(10, 0, 0, 0.75)); border-left-color: #ff2a1a; }
#result.lose { background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(160, 0, 0, 0.55), transparent 70%), rgba(0, 0, 0, 0.82); }
#result.lose h2 { font-family: var(--en); font-weight: 700; font-style: normal; color: #ff1a1a; letter-spacing: 3px; text-shadow: 0 0 26px rgba(255, 0, 0, 0.75), 0 0 6px rgba(255, 60, 40, 0.8), 0 3px 0 #000; }
#result.lose .lab { display: none; }
#result.lose .mc::after { display: none; }
#result.lose h2, #result.lose .reason { text-align: center; }
#result.lose .stars { justify-content: center; }
#result.lose .stars i, #result.lose .stars i.on { background-image: var(--s-star_frame); filter: grayscale(1); opacity: 0.35; animation: none; }
#result.lose .ml div:not(.ok) { background: rgba(70, 72, 78, 0.85); color: #c9ced4; }
#result.lose .ml div.ok { background: rgba(255, 255, 255, 0.12); color: #fff; }
#result.lose .ml div.ok i { filter: none; opacity: 0.8; }
#result .reason { margin-top: 10px; color: #ffbcb2; font-size: 16px; }
#result.win .reason { color: var(--txt2); }

/* coarse pointers: no hover tints that stick after a tap */
@media (hover: none) {
  .act:hover { background: linear-gradient(180deg, rgba(48, 52, 58, 0.95), rgba(24, 26, 30, 0.95)); }
  .rbtn:hover { background: radial-gradient(circle at 50% 40%, rgba(160, 160, 160, 0.55), rgba(110, 110, 110, 0.45)); }
  .btn:hover:not(:disabled), .summon:hover { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; }
  #titleBg { animation: none; }
}
.card:focus-visible, .act:focus-visible, .summon:focus-visible { outline: 2px solid var(--y); outline-offset: 2px; }

/* ── responsive ────────────────────────────────────────── */
/* five action buttons + summon: room for the odds panel on the left only on wide screens */
@media (min-width: 981px) and (min-height: 521px) {
  #bottom #btnSpeed, #bottom #btnAuto { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); }
  #bottom #btnAuto { right: max(14px, env(safe-area-inset-right)); }
  #bottom #btnSpeed { right: calc(max(14px, env(safe-area-inset-right)) + var(--actw, 112px) + 10px); }
}
@media (max-width: 1240px) { .act { width: 96px; } #bottom { --actw: 96px; } .round { min-width: 240px; } .enemy { min-width: 190px; } }
@media (max-width: 1100px) { .act { width: 84px; } #bottom { --actw: 84px; } .summon { width: 220px; } #odds { display: none; } .round { min-width: 210px; } .enemy { min-width: 170px; } .enemy .etop span { display: none; } .enemy .etop { justify-content: flex-end; } }
@media (max-width: 980px) {
  .round { min-width: 230px; } .enemy { min-width: 180px; }
  .act { width: 84px; } .summon { width: 200px; }
  #odds { display: none; }
}
@media (max-width: 720px) {
  #top { gap: 6px; flex-wrap: wrap; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
  .round { min-width: 0; flex: 1 1 52%; height: 48px; } .round .rlabel b { font-size: 24px; } .round .rtitle { font-size: 12px; }
  .enemy { min-width: 0; flex: 1 1 40%; height: 48px; padding: 0 12px 0 6px; } .enemy .eicon { width: 26px; height: 26px; }
  /* the boss panel gets the HUD's last row (full width, right above the field) */
  #bossBar { order: 9; flex: 1 1 100%; max-width: none; height: 38px; clip-path: none; padding: 0 10px 0 2px; } #bossBar .bimg { width: 30px; height: 30px; margin-left: 4px; }
  #bossBar .row { margin-bottom: 3px; } #bossName { font-size: 13px; } #bossTime { font-size: 13px; } #bossBar .gauge { height: 6px; }
  .spacer { display: none; }
  .res { height: 36px; padding: 0 10px; flex: 1; } .res b { font-size: 16px; min-width: 32px; }
  .rbtn { width: 38px; height: 38px; } .rbtn .g { width: 20px; height: 20px; }
  #bottom { gap: 6px; padding: 8px max(6px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  .acts { gap: 3px; }
  .enemy .etop span { display: none; } .enemy .etop { justify-content: flex-end; } .enemy .etop b { font-size: 15px; }
  .act { width: min(62px, calc((100vw - 136px - env(safe-area-inset-left) - env(safe-area-inset-right)) / 5)); height: 58px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } .act b { font-size: 14px; white-space: nowrap; } .act small { display: none; } .act .ai { width: 22px; height: 22px; }
  .summon { width: 118px; height: 68px; padding-left: 16px; } .summon .st b { font-size: 23px; letter-spacing: 1px; } .summon .hexb { width: 44px; height: 42px; right: 3px; } .summon .hexb::after { width: 22px; height: 22px; } .summon kbd { display: none; }
  .banner .wv { font-size: 44px; } .banner .ct .tx { width: 200px; }
  .pwin .wh h3 small { display: none; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 8px; }
  .card { padding-top: 10px; gap: 3px; } .card .rk { width: 42px; height: 42px; } .card b { font-size: 13px; } .card .pct { font-size: 24px; } .card .lv { font-size: 17px; } .card .eff { font-size: 11px; } .card .cost { font-size: 14px; padding: 6px 0; }
  .pwin .wb { padding: 12px; }
  .recipe { flex-wrap: wrap; } .recipe .res2 { width: auto; flex: 1 1 100%; }
  .recipe .parts { flex: 1 1 100%; justify-content: center; } .recipe > .btn { flex: 1 1 100%; } /* parts, then the button: no overlap */
  .howto { grid-template-columns: 1fr 1fr; } .howto div:nth-child(2) { border-right: 0; } .howto div { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  #titleChars .hx { width: 50px; height: 50px; }
  #titleChars { gap: 4px; }
  .logo .sub { letter-spacing: 5px; font-size: 14px; } .logo .sub::before, .logo .sub::after { width: 30px; }
  .keys { display: none; } #title > .best { margin-bottom: auto; } /* the record sits right under the buttons; the spare height goes below it */
  .ver { position: static; align-self: center; margin-top: 6px; } /* in the flow under the best record, not on top of it */
  /* touch targets stay >= 44 px: the title scrolls rather than squeezing its buttons */
  #title > * { flex-shrink: 0; }
  #title > #btnStart { height: 52px; } #btnContinue { height: 44px; margin-top: 8px; }
  #titleChars { margin: 12px 0 12px; } .brief { margin-bottom: 14px; } .howto div { padding: 9px 12px 10px; font-size: 13px; line-height: 1.45; } .diffs { margin-bottom: 10px; }
  .diffs button { min-height: 44px; }
  .rbtn { width: 44px; height: 44px; }
  .set { grid-template-columns: 1fr; } .set .tabs { flex-direction: row; } .set .tab { flex: 1; height: 40px; text-align: center; }
  .set .row2 { flex-wrap: wrap; padding: 8px 12px; } .set .row2 > span { width: auto; flex: 1 1 100%; }
  #loading .lpct { font-size: 24px; } .rbtn#btnSettings { display: none; }
  #result .rwrap { flex-direction: column; overflow-y: auto; max-height: none; align-items: stretch; }
  #result .report { max-height: 46vh; flex: none; }
  #result { background: rgba(5, 6, 8, 0.96); }
  #result.lose { background: radial-gradient(ellipse 90% 30% at 50% 0%, rgba(160, 0, 0, 0.5), transparent 70%), rgba(5, 6, 8, 0.96); }
  #result .rwrap { scrollbar-width: none; } #result .rwrap::-webkit-scrollbar { display: none; }
  #result .rbtns .btn { flex: 1 1 0; min-width: 0; padding: 0 4px; height: 52px; font-size: 20px; border-width: 0 28px 0 32px; border-image-width: 0 28px 0 32px; }
  #result .mc { padding: 22px 18px 18px; } #result .mc::after { width: 160px; height: 120px; } #result .stars i { width: 58px; height: 55px; }
  .ann { width: 330px; height: 70px; } .ann b { font-size: 19px; }
  #popup { width: auto; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; transform: none !important; max-height: 40vh; overflow-y: auto; padding: 10px 12px 12px; }
  #popup .ph .hx { width: 54px; height: 54px; } #popup .stats { margin: 8px 0 6px; }
  .round, .enemy, .res { height: 44px; }
  /* phone HUD in two rows: [wave][enemies][pause] / [parts · tuna][boss panel] (no sound button: it lives in Settings) */
  .round { order: 1; flex: 1 1 44%; } .enemy { order: 2; flex: 1 1 34%; } #btnPause { order: 3; margin-left: 0; }
  .res { order: 4; flex: 0 0 auto; padding: 0 8px; gap: 5px; } .res .ri { width: 20px; height: 20px; } .res .ri.tuna { width: 24px; } .res .sep { margin: 0 2px; }
  #bossBar.idle #bossName small { display: none; } /* "NEXT BOSS" is implied by the grey portrait and the wave number */
  #bossBar { order: 5; flex: 1 1 0; height: 44px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); padding: 0 10px 0 4px; }
  #bossBar .bimg { width: 32px; height: 32px; margin-left: 8px; }
}
/* small phones (iPhone SE 1st gen, 320-360 wide): the action row must fit the width */
@media (max-width: 360px) {
  .acts { gap: 3px; }
  .act { width: calc((100vw - 120px) / 5); height: 54px; } .act b { font-size: 12px; } .act .ai { width: 19px; height: 19px; }
  .summon { width: 98px; height: 62px; padding-left: 12px; } .summon .st b { font-size: 21px; letter-spacing: 0; } .summon .hexb { display: none; }
  .round .rtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #top { gap: 4px; }
  .round { flex: 1 1 46%; } .enemy { flex: 1 1 30%; padding: 0 8px 0 4px; } .round .rtime .ico { display: none; }
  .res { padding: 0 6px; gap: 4px; } .res b { font-size: 14px; min-width: 0; }
  .rbtn { width: 40px; height: 40px; } .rbtn .g { width: 18px; height: 18px; }
  .res { flex: 0 1 auto; min-width: 0; overflow: hidden; } #bossBar .bimg { display: none; }
}
/* short portrait screens: the title must keep the start button on screen */
#title { justify-content: flex-start; overflow-y: auto; }
#title > .logo { margin-top: auto; } #title > .keys { margin-bottom: auto; }
@media (orientation: portrait) and (max-height: 700px) {
  #title { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .logo { gap: 6px; } .logo .lo { width: min(300px, 70vw); } .logo h1 { font-size: 26px; letter-spacing: 3px; }
  #titleChars { margin: 8px 0; } #titleChars .hx { width: 44px; height: 44px; }
  .brief { margin-bottom: 12px; } .brief .bh { padding: 5px 10px; }
  .howto div { padding: 6px 10px 8px; font-size: 12px; line-height: 1.4; } .howto b { font-size: 13px; margin-bottom: 2px; } .howto b i { font-size: 17px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .brief { display: none; }
  #titleChars { margin: 12px 0; }
}

/* ── phones held sideways (short landscape): compact HUD on top, actions in a right-hand rail ── */
@media (orientation: landscape) and (max-height: 520px) {
  #app { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); }
  #top { grid-column: 1 / -1; gap: 8px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; flex-wrap: nowrap; }
  .round, .enemy, .res { height: 40px; }
  #bossBar { order: 0; flex: 1 1 0; min-width: 90px; height: 40px; padding: 0 12px 0 4px; } /* one HUD row: the boss panel takes the spare width */
  .round { min-width: 0; flex: 0 1 230px; } .round .rlabel b { font-size: 22px; } .round .rlabel small { font-size: 9px; } .round .rtitle { font-size: 12px; } .round .rtime { font-size: 12px; }
  .enemy { min-width: 0; flex: 0 1 170px; padding: 0 12px 0 6px; } .enemy .eicon { width: 24px; height: 24px; } .enemy .etop span { display: none; } .enemy .etop { justify-content: flex-end; } .enemy .etop b { font-size: 17px; }
  .res { padding: 0 10px; gap: 6px; } .res b { font-size: 15px; min-width: 30px; } .res .ri { width: 20px; height: 20px; } .res .ri.tuna { width: 24px; }
  .rbtn { width: 36px; height: 36px; } .rbtn .g { width: 19px; height: 19px; } .rbtn#btnSettings { display: grid; }
  .spacer { display: block; }
  #stage { grid-column: 1; grid-row: 2; }
  #bottom { grid-column: 2; grid-row: 2; width: 150px; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px;
    padding: 6px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) 8px;
    background: linear-gradient(270deg, rgba(8, 9, 11, 0.97), rgba(8, 9, 11, 0.85) 80%, rgba(8, 9, 11, 0.4)); }
  #bottom::before { left: 0; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(255, 204, 0, 0.4), rgba(255, 255, 255, 0.06)); }
  .acts { display: grid; grid-template-columns: 1fr 1fr; align-content: end; gap: 6px; }
  .acts > * { grid-column: span 2; } .acts > #btnSpeed, .acts > #btnAuto { grid-column: span 1; order: -1; height: 38px; justify-content: center; padding-left: 0; gap: 4px; }
  .acts > #btnSpeed .ai, .acts > #btnAuto .ai { display: none; } .acts > #btnAuto b { font-size: 13px; }
  .act { width: 100%; height: 44px; flex-direction: row; justify-content: flex-start; gap: 8px; padding-left: 18px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
  .act b { font-size: 15px; } .act small { display: none; } .act .ai { width: 20px; height: 20px; } .act::after { left: 0; right: auto; top: 6px; bottom: 6px; width: 3px; height: auto; }
  .act .badge { top: 12px; right: 10px; }
  .summon { order: 9; width: 100%; height: 64px; padding-left: 18px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
  .summon .st b { font-size: 24px; letter-spacing: 2px; } .summon .st small { font-size: 14px; margin-top: 4px; } .summon .hexb { width: 52px; height: 50px; right: 4px; } .summon .hexb::after { width: 22px; height: 22px; } .summon kbd { display: none; }
  #odds { display: none; }
  #popup { width: 290px; right: auto; max-height: calc(100% - 16px); padding: 8px 12px 10px; } /* the whole sheet fits beside the rail: no scrolling to the buttons */
  #popup .ph .hx { width: 50px; height: 50px; } #popup .ph .nm b { font-size: 18px; } #popup .rk { width: 36px; height: 36px; }
  #popup .stats { margin: 8px 0 6px; padding: 6px 8px; } #popup .uses { margin: 4px 0 0; } #popup .uses .hx { width: 28px; height: 28px; }
  #popup .btns { margin-top: 8px; } #popup .btns .btn { height: 38px; font-size: 15px; }
  .banner .wv { font-size: 40px; } .banner .ms { width: 340px; } .banner .band { padding: 8px 0; }
  .pwin { max-height: calc(100% - 12px); } .pwin .wh { height: 44px; } .pwin .wb { padding: 10px 12px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .card .rk { width: 40px; height: 40px; } .card .pct { font-size: 24px; }
  .dlg { min-height: 0; padding: 16px; } .dlg h4 { font-size: 22px; } .dlg p { font-size: 13px; margin-bottom: 4px; } .dlg .btn { height: 44px; min-width: 150px; font-size: 17px; }
  #result .rwrap { padding: 10px; gap: 12px; max-height: none; height: 100%; } #result .mc { padding: 14px 18px; } #result h2 { font-size: 34px; }
  #result .stars { margin: 8px 0; } #result .stars i { width: 46px; height: 44px; } #result .ml div { height: 30px; font-size: 13px; } #result .ml div b { font-size: 15px; }
  #result .rbtns { padding-top: 10px; } #result .rbtns .btn { height: 44px; font-size: 18px; border-width: 0 24px 0 28px; border-image-width: 0 24px 0 28px; }
  #result .report { flex: 0 0 300px; } #result .ru .hx { width: 36px; height: 36px; }
  #title .brief { display: none; } #titleChars { margin: 10px 0; } #titleChars .hx { width: 52px; height: 52px; } .logo .lo { width: 300px; } .logo h1 { font-size: 26px; }
  .btn.lg { height: 52px; font-size: 22px; }
  /* sideways title: nothing squeezed below a touch target; the keyboard legend (no keyboard here) makes room */
  #title > * { flex-shrink: 0; } #title .keys { display: none; } #title > .logo { margin-top: 0; }
  #title { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  #titleChars { margin: 4px 0 6px; } #titleChars .hx { width: 42px; height: 42px; } .logo { gap: 2px; } .logo .lo { width: 220px; } .logo h1 { font-size: 21px; }
  #btnContinue { height: 44px; margin-top: 6px; } .diffs { margin-bottom: 8px; } .diffs button { min-height: 40px; }
  .rbtn { width: 40px; height: 40px; } .acts > #btnSpeed, .acts > #btnAuto { height: 44px; }
  #loading { padding-bottom: 5vh; } #loading .lo { margin-bottom: 3vh; }
}
/* narrow landscape phones (iPhone SE/8 sideways): give the wave title the spare width */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .spacer { display: none; }
  #top { gap: 6px; }
  .round { flex: 0 0 168px; } .round .rtime .ico { display: none; } /* the wave title stays readable; the boss panel takes what is left */
  .enemy { flex: 0 0 112px; } .res { flex: 0 1 auto; padding: 0 8px; } .res b { min-width: 0; }
  #bossBar .bimg { display: none; }
  .rbtn { flex: none; }
  .round .rtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* other languages: the summon label drops the Korean letter-spacing (longer words) */
html:not(:lang(ko)) .summon .st b { letter-spacing: 0; white-space: nowrap; }
html:not(:lang(ko)) .act b, html:not(:lang(ko)) .act small { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* top HUD never reflows while playing: every changing value gets a fixed slot (tabular digits), boxes don't size to
   their content, and the next-wave button floats over the field */
#waveNum, #waveTime, #enemyNum, #gold, #gems { font-variant-numeric: tabular-nums; white-space: nowrap; }
.round .rlabel { flex: none; width: 92px; }
.round .rtime { flex: none; min-width: 3.4ch; text-align: right; }
.round .rtitle { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.enemy .etop b { flex: none; min-width: 6.4ch; text-align: right; }
.res { flex: 0 0 auto !important; }
.res b, .res b.gold { flex: none; min-width: 0 !important; text-align: left; }
.res b.gold { width: 5.2ch; } .res b.gems { width: 2.6ch; }
@media (max-width: 720px), (orientation: landscape) and (max-height: 520px) {
  .round .rlabel { width: 74px; padding-left: 8px; padding-right: 16px; }
  .nextw { height: 30px; bottom: 8px; } .nextw b { font-size: 13px; }
}
@media (max-width: 360px) { .round .rlabel { width: 70px; padding-right: 14px; } .res b.gold { width: 4.6ch; } }

/* 헬: boss roulette */
#roulette { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; text-align: center; }
#roulette .rhead { font: 900 18px/1 sans-serif; letter-spacing: 4px; color: #ff4a4a; text-shadow: 0 0 12px #ff0000, 0 2px 0 #000; margin-bottom: 8px; }
#roulette .rwin { position: relative; width: 260px; height: 132px; overflow: hidden; border: 2px solid #ff3a3a; border-radius: 10px; background: rgba(20, 0, 0, 0.85); box-shadow: 0 0 30px rgba(255, 0, 0, 0.5); }
#roulette .rstrip > div { height: 44px; line-height: 44px; font: 800 20px/44px sans-serif; color: #d8c0c0; }
#roulette .rstrip > div.on { color: #fff; text-shadow: 0 0 14px #ff3030; transform: scale(1.15); }
#roulette .rsel { position: absolute; left: 6px; right: 6px; top: 44px; height: 44px; border-top: 2px solid #ffd040; border-bottom: 2px solid #ffd040; background: rgba(255, 200, 60, 0.08); }
#roulette.done .rwin { animation: rouFlash 0.5s 2; }
@keyframes rouFlash { 50% { box-shadow: 0 0 50px #ff3030; border-color: #ffd040; } }

/* title: patch notes */
#title .notesBtn { position: absolute; right: 14px; bottom: 28px; z-index: 2; padding: 4px 12px; font-size: 12px; color: #ffd84a; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 204, 0, 0.45); border-radius: 4px; cursor: pointer; }
#title .notesBtn:hover { background: rgba(255, 204, 0, 0.15); }
#notesOv { position: fixed; inset: 0; display: grid; place-items: center; z-index: 60; background: rgba(0, 0, 0, 0.6); }
#notesOv[hidden] { display: none; }
.dlg.notes { min-height: 0; max-height: 86vh; }
.dlg.notes .nlist { width: min(720px, 100%); max-height: 60vh; overflow-y: auto; text-align: left; padding: 0 6px; }
.dlg.notes section { margin: 0 0 14px; }
.dlg.notes section b { color: var(--y2); font-size: 16px; }
.dlg.notes ul { margin: 6px 0 0; padding-left: 20px; color: #cfcfcf; font-size: 14px; line-height: 1.55; }
.dlg.notes .btn { min-width: 160px; height: 44px; font-size: 18px; }