* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0d0907; overflow: hidden; overscroll-behavior: none; }
body { font-family: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; color: #f3e6cf; user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: relative; width: 100%; height: 100dvh; max-width: 520px; margin: 0 auto; overflow: hidden; background: #2a1e14; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
em { font-style: normal; display: block; font-size: 11px; opacity: .7; margin-top: 2px; font-family: system-ui, sans-serif; letter-spacing: 0; }

/* ---------- 战斗界面 ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
.xpbar { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top); height: 14px; background: rgba(0,0,0,.55); }
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #5fb3ff, #b7e3ff); box-shadow: 0 0 8px #7cc4ff; }
.xpbar b { position: absolute; right: 6px; top: -1px; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.hudtop { position: absolute; left: 8px; right: 8px; top: calc(env(safe-area-inset-top) + 20px); display: flex; align-items: center; gap: 8px; }
.me { display: flex; align-items: center; gap: 6px; flex: 1; }
.me img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #c9a45c; }
.hp { position: relative; flex: 0 1 130px; height: 14px; background: rgba(0,0,0,.6); border-radius: 7px; overflow: hidden; border: 1px solid rgba(201,164,92,.6); }
.hp i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #b3261e, #ff6a4d); transition: width .15s; }
.hp span { position: absolute; inset: 0; font-size: 11px; line-height: 13px; text-align: center; text-shadow: 0 1px 2px #000; }
.timer { font-family: 'Ma Shan Zheng', serif; font-size: 34px; line-height: 1; text-shadow: 0 2px 4px #000, 0 0 12px rgba(0,0,0,.6); min-width: 96px; text-align: center; }
.timer.late { color: #ff8a70; }
.pausebtn { flex: 1; display: flex; justify-content: flex-end; background: none; font-size: 16px; }
.pausebtn::after { content: ''; }
.pausebtn { width: 44px; height: 44px; max-width: 44px; margin-left: auto; border-radius: 50%; background: rgba(0,0,0,.45); justify-content: center; align-items: center; border: 1px solid rgba(201,164,92,.5); }
.kills { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 70px); font-size: 14px; text-shadow: 0 1px 2px #000; }
.kills b { font-size: 18px; color: #ffd27a; }
.owned { position: absolute; left: 8px; top: calc(env(safe-area-inset-top) + 68px); display: flex; flex-wrap: wrap; gap: 3px; width: 200px; }
.owned div { position: relative; width: 30px; height: 30px; }
.owned img { width: 30px; height: 30px; }
.owned b { position: absolute; right: -2px; bottom: -3px; font-size: 10px; background: #1b130d; border: 1px solid #c9a45c; border-radius: 6px; padding: 0 3px; line-height: 12px; }
.owned .evo img { filter: drop-shadow(0 0 4px #9fe0ff); }
.banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-family: 'Ma Shan Zheng', serif; font-size: 40px; color: #ffe2a8; text-shadow: 0 0 12px #c0392b, 0 3px 4px #000; opacity: 0; transition: opacity .3s, transform .3s; transform: scale(.9); }
.banner.on { opacity: 1; transform: scale(1); }
.banner small { display: block; font-size: 18px; font-family: system-ui, sans-serif; color: #f3e6cf; text-shadow: 0 1px 3px #000; margin-top: 4px; }
.ult { position: absolute; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 22px); width: 84px; height: 84px; border-radius: 50%; background: none; padding: 0; }
.ult img { position: absolute; inset: 8px; width: 68px; height: 68px; filter: grayscale(.9) brightness(.6); transition: filter .2s; }
.ult svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ult .ring-bg { fill: none; stroke: rgba(0,0,0,.5); stroke-width: 7; }
.ult .ring { fill: none; stroke: #ffcc55; stroke-width: 7; stroke-dasharray: 289; stroke-dashoffset: 289; stroke-linecap: round; }
.ult span { position: absolute; left: -10px; right: -10px; bottom: -16px; font-family: 'Ma Shan Zheng', serif; font-size: 16px; text-shadow: 0 1px 3px #000; }
.ult.ready img { filter: none; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); filter: drop-shadow(0 0 10px #ffcc55); } }
.bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 142px); width: 78%; text-align: center; }
.bossbar span { font-family: 'Ma Shan Zheng', serif; font-size: 20px; text-shadow: 0 1px 3px #000; color: #ffb39c; }
.bossbar div { height: 10px; background: rgba(0,0,0,.6); border: 1px solid #8a2a1a; border-radius: 5px; overflow: hidden; }
.bossbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #7a1010, #e0452b); }

/* ---------- 各种整屏 ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px); text-align: center; }
.screen.dim { background: rgba(10,6,4,.72); backdrop-filter: blur(2px); }
#title { background: linear-gradient(180deg, rgba(20,12,6,.25), rgba(20,12,6,.85) 70%), url(assets/title_bg.webp) center/cover; justify-content: flex-end; }
#loading { background: #1b130d; }
h1 { font-family: 'Ma Shan Zheng', serif; font-weight: 400; font-size: 76px; margin: 0; line-height: 1; color: #ffe9bf; text-shadow: 0 0 18px rgba(192,57,43,.8), 0 4px 6px #000; letter-spacing: 6px; }
h2 { font-family: 'Ma Shan Zheng', serif; font-weight: 400; font-size: 44px; margin: 0; color: #ffe2a8; text-shadow: 0 2px 6px #000; }
h2.red { color: #ff7b63; }
.titlebox { margin-bottom: auto; margin-top: 12vh; }
.sub { margin: 10px 0 0; font-size: 16px; letter-spacing: 2px; text-shadow: 0 1px 3px #000; }
.howto { background: rgba(0,0,0,.45); border: 1px solid rgba(201,164,92,.35); border-radius: 12px; padding: 10px 14px; text-align: left; font-size: 14px; line-height: 1.6; width: 100%; max-width: 360px; }
.howto p { margin: 2px 0; }
.howto b { color: #9fe0ff; }
.best { font-size: 13px; opacity: .85; min-height: 18px; }
.primary { width: 100%; max-width: 320px; min-height: 56px; border-radius: 28px; font-family: 'Ma Shan Zheng', serif; font-size: 28px; color: #2a1608; background: linear-gradient(180deg, #ffe39a, #d69a3a); box-shadow: 0 4px 0 #8a5a1c, 0 6px 16px rgba(0,0,0,.5); }
.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5a1c; }
.primary em { color: #5a3510; opacity: .8; }
.ghost { min-height: 44px; padding: 6px 18px; border-radius: 22px; background: rgba(0,0,0,.35); border: 1px solid rgba(201,164,92,.55); font-size: 15px; }
.ghost.small { font-size: 14px; }
.ghost:disabled { opacity: .35; }
.ver { position: absolute; right: 8px; bottom: calc(env(safe-area-inset-bottom) + 4px); margin: 0; font-size: 10px; opacity: .5; }
.luSub { margin: -6px 0 4px; font-size: 14px; opacity: .85; }

/* 三选一卡片:竖排,整张都能点 */
.cards { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 380px; }
.card { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; min-height: 84px; border-radius: 14px; background: linear-gradient(180deg, #3a2a1c, #241811); border: 2px solid #8a6a3a; box-shadow: 0 4px 12px rgba(0,0,0,.5); transform: translateY(12px); opacity: 0; animation: cardIn .25s forwards; }
.card:nth-child(2) { animation-delay: .06s; } .card:nth-child(3) { animation-delay: .12s; }
@keyframes cardIn { to { transform: none; opacity: 1; } }
.card:active { transform: scale(.98); border-color: #ffd27a; }
.card img { width: 60px; height: 60px; flex: none; }
.card .t { font-family: 'Ma Shan Zheng', serif; font-size: 24px; color: #ffe2a8; line-height: 1.1; }
.card .t small { font-family: system-ui, sans-serif; font-size: 12px; color: #c9a45c; margin-left: 6px; }
.card .d { font-size: 13px; line-height: 1.4; margin-top: 3px; opacity: .92; }
.card .kind { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 6px; margin-right: 4px; background: #5a3a1a; vertical-align: 1px; }
.card .kind.xf { background: #1f4a5a; } .card .kind.qg { background: #2f5a2a; }
.card.new { border-color: #c9a45c; }
.card.evo { border-color: #9fe0ff; background: linear-gradient(180deg, #1e3a4a, #121e28); box-shadow: 0 0 18px rgba(120,200,255,.5); }
.card .hint { color: #9fe0ff; }
.luOps { display: flex; gap: 10px; }

.pauseList { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 360px; text-align: left; }
.pauseList div { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.4); border-radius: 10px; padding: 6px; font-size: 14px; }
.pauseList img { width: 36px; height: 36px; }
.pauseList small { display: block; opacity: .7; font-size: 11px; }

.resGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 340px; }
.resGrid div { background: rgba(0,0,0,.45); border: 1px solid rgba(201,164,92,.3); border-radius: 12px; padding: 8px; }
.resGrid b { display: block; font-size: 24px; color: #ffd27a; }
.resGrid span { font-size: 12px; opacity: .8; }
.resNote { font-size: 14px; line-height: 1.5; max-width: 340px; margin: 0; color: #cfe9ff; }

.ldbar { width: 70%; height: 8px; background: #000; border-radius: 4px; overflow: hidden; border: 1px solid #5a4020; }
.ldbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d69a3a, #ffe39a); transition: width .2s; }
#ldtxt { font-size: 14px; opacity: .8; }

@media (prefers-reduced-motion: reduce) { .card { animation: none; opacity: 1; transform: none; } .ult.ready img { animation: none; } }