@font-face { font-family: 'Lilita'; src: url(assets/fonts/lilita.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Fredoka'; src: url(assets/fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: block; }

:root {
  --bg: #0a0f24;
  --panel: rgba(14, 22, 52, 0.88);
  --panel-hi: rgba(30, 46, 100, 0.92);
  --line: rgba(110, 170, 255, 0.28);
  --text: #ffffff;
  --muted: #a9b8e6;
  --cyan: #2ee6ff;
  --blue: #1a8cff;
  --pink: #ff3fa4;
  --purple: #8a5cff;
  --gold: #ffcc00;
  --green: #3dff8b;
  --red: #ff3355;
  --orange: #ff8a1c;
  --head: 'Lilita', 'Fredoka', system-ui, sans-serif;
  --body: 'Fredoka', system-ui, sans-serif;
  --zh: 'Noto Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--body); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
img { -webkit-user-drag: none; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; letter-spacing: 0.5px; margin: 0; }
h3 { font-size: 20px; margin: 18px 0 8px; color: var(--cyan); }
.small { font-size: 14px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.col { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

#app { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; padding: calc(8px + var(--st)) 16px calc(16px + var(--sb)); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#modal { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 100; font-family: var(--head); font-size: 48px; color: var(--cyan); }
#boot img { width: 70%; max-width: 380px; animation: pulse 1.2s ease-in-out infinite; }

/* ---------- backgrounds ---------- */
.hangar-bg { position: fixed; inset: 0; z-index: -2; background:
  linear-gradient(180deg, rgba(10, 15, 36, 0.55), rgba(10, 15, 36, 0.92) 70%), url(assets/img/bg/hangar.webp) center / cover,
  radial-gradient(circle at 50% 20%, #1c3a7a, #0a0f24 70%); }
.map-bg.grade-2 { background: linear-gradient(180deg, rgba(10, 15, 36, 0.5), rgba(10, 15, 36, 0.9)), url(assets/img/bg/world-p2.webp) center / cover, radial-gradient(circle at 50% 10%, #164a5a, #0a0f24 70%); }
.map-bg.grade-3 { background: linear-gradient(180deg, rgba(10, 15, 36, 0.5), rgba(10, 15, 36, 0.9)), url(assets/img/bg/world-p3.webp) center / cover, radial-gradient(circle at 50% 10%, #4a1d5a, #0a0f24 70%); }
.mission-bg { background: linear-gradient(180deg, rgba(10, 15, 36, 0.75), rgba(10, 15, 36, 0.95)), url(assets/img/bg/lab.webp) center / cover, radial-gradient(circle at 50% 30%, #12305e, #0a0f24 70%); }
.boss-bg { background: linear-gradient(180deg, rgba(20, 5, 20, 0.6), rgba(10, 5, 20, 0.95)), url(assets/img/bg/glitch.webp) center / cover, radial-gradient(circle at 50% 20%, #5a1030, #0a0514 70%); }

/* ---------- shared bits ---------- */
.btn { font-family: var(--head); font-size: 20px; padding: 12px 22px; border-radius: 16px; letter-spacing: 0.5px; transition: transform 0.08s; }
.btn:active:not(:disabled) { transform: scale(0.95); }
.btn:disabled { opacity: 0.45; }
.btn.small { font-size: 15px; padding: 8px 14px; border-radius: 12px; }
.btn-primary { background: linear-gradient(180deg, #43f0ff, #1a8cff); color: #04122e; box-shadow: 0 5px 0 #0a4fa8, 0 0 24px rgba(46, 230, 255, 0.4); }
.btn-danger { background: linear-gradient(180deg, #ff6680, #e0193f); box-shadow: 0 5px 0 #8a0b25; }
.btn-ghost { background: rgba(255, 255, 255, 0.08); border: 2px solid var(--line); }
.btn-boss { background: linear-gradient(180deg, #ff5f7e, #c3125a); box-shadow: 0 5px 0 #6d0631, 0 0 26px rgba(255, 63, 120, 0.5); }
.btn-big { font-size: 26px; padding: 16px 30px; }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); font-size: 24px; line-height: 1; display: grid; place-items: center; }
.icon-btn.small { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
.bolt-ico { display: inline-block; color: var(--gold); font-weight: 700; margin-right: 3px; text-shadow: 0 0 8px rgba(255, 204, 0, 0.6); }
.banner { background: rgba(255, 138, 28, 0.15); border: 2px solid rgba(255, 138, 28, 0.5); border-radius: 14px; padding: 10px 14px; text-align: center; font-weight: 600; width: 100%; max-width: 420px; }
.banner.gold { background: rgba(255, 204, 0, 0.14); border-color: rgba(255, 204, 0, 0.6); }
.banner.boss { background: rgba(255, 51, 85, 0.16); border-color: rgba(255, 51, 85, 0.6); }

.toast { position: fixed; left: 50%; bottom: calc(28px + var(--sb)); transform: translate(-50%, 30px); background: var(--panel-hi); border: 2px solid var(--line); padding: 12px 18px; border-radius: 14px; font-weight: 600; z-index: 80; opacity: 0; transition: 0.25s; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.flash { position: fixed; inset: 0; z-index: 49; pointer-events: none; animation: flash 0.45s ease-out forwards; }
@keyframes flash { from { opacity: 0.8; } to { opacity: 0; } }
.shake { animation: shake 0.4s; }
.shake-s { animation: shakeS 0.3s; }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 2px); } 40%, 60% { transform: translate(7px, -1px); } }
@keyframes shakeS { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.sub-header { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; margin: calc(-8px - var(--st)) -16px 12px; position: sticky; top: calc(-8px - var(--st)); padding: calc(10px + var(--st)) 16px 10px; z-index: 3; background: linear-gradient(180deg, rgba(10, 15, 36, 0.98) 70%, rgba(10, 15, 36, 0)); }
.sub-header h1 { text-align: center; font-size: 28px; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-header .icon-btn { font-size: 32px; padding-bottom: 4px; }
.hdr-count { min-width: 44px; text-align: right; font-family: var(--head); font-size: 18px; color: var(--muted); }

.tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab { flex: 1; padding: 10px 6px; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); font-family: var(--head); font-size: 17px; color: var(--muted); }
.tabs.small .tab { font-size: 14px; padding: 8px 4px; }
.tab.on { background: linear-gradient(180deg, #43f0ff, #1a8cff); color: #04122e; border-color: transparent; }

/* ---------- modal ---------- */
.modal-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(3, 5, 20, 0.72); pointer-events: auto; opacity: 0; transition: opacity 0.2s; overflow-y: auto; }
.modal-wrap.show { opacity: 1; }
.modal-wrap.hide { opacity: 0; pointer-events: none; }
.modal-card { width: min(400px, 100%); background: linear-gradient(180deg, #172a63, #0f1838); border: 2px solid var(--line); border-radius: 24px; padding: 22px 18px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(46, 230, 255, 0.18); transform: scale(0.9); transition: transform 0.2s; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-wrap.show .modal-card { transform: scale(1); }
.modal-card h2 { font-size: 26px; margin-bottom: 8px; }
.modal-body { color: var(--muted); font-size: 16px; line-height: 1.4; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.modal-actions .btn { flex: 1; }
.modal-actions.col { flex-direction: column; gap: 10px; }
.text-in { width: 100%; font: inherit; font-size: 22px; font-weight: 600; text-align: center; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: rgba(0, 0, 0, 0.3); color: #fff; margin-bottom: 10px; outline: none; user-select: text; -webkit-user-select: text; }
.text-in:focus { border-color: var(--cyan); }
.text-in.bad { border-color: var(--red); animation: shake 0.4s; }
.text-in.pin { letter-spacing: 8px; }

/* ---------- characters ---------- */
.hz-slot { display: inline-grid; place-items: center; width: 1em; height: 1em; font-family: var(--zh); line-height: 1; vertical-align: middle; }
.hz-slot svg.hz { width: 100%; height: 100%; display: block; }

/* ---------- robots ---------- */
.bot { position: relative; width: var(--size); height: var(--size); flex: none; }
.bot-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); transition: filter 0.4s; }
.bot-aura { position: absolute; inset: 8%; border-radius: 50%; opacity: 0; transition: opacity 0.4s; }
.bot-plate { position: absolute; transform: translate(-50%, -50%); width: calc(var(--size) * var(--ps)); height: calc(var(--size) * var(--ps)); border-radius: 22%; background: radial-gradient(circle at 40% 35%, #263b7a, #0b1235); border: max(2px, calc(var(--size) * 0.018)) solid var(--fc); display: grid; place-items: center; box-shadow: 0 0 calc(var(--size) * 0.06) var(--fc), inset 0 0 6px rgba(0, 0, 0, 0.6); }
.bot-plate .hz-slot { width: 78%; height: 78%; font-size: calc(var(--size) * var(--ps) * 0.72); color: #fff; }
.bot.shadow .bot-art { filter: brightness(0) drop-shadow(0 0 6px rgba(46, 230, 255, 0.55)); opacity: 0.85; }
.bot.shadow .bot-plate { background: #05081a; border-color: rgba(46, 230, 255, 0.4); box-shadow: none; }
.bot.shadow .bot-plate .hz-slot { color: var(--cyan); font-family: var(--head); }
.bot.s1 .bot-art { filter: hue-rotate(var(--hue)) saturate(0.75) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.bot.s2 .bot-aura { opacity: 0.35; background: radial-gradient(circle, var(--fc), transparent 70%); }
.bot.max .bot-aura { opacity: 0.6; background: radial-gradient(circle, var(--fc), transparent 68%); animation: auraPulse 2.4s ease-in-out infinite; }
.bot.max.writer .bot-plate { border-color: var(--gold); box-shadow: 0 0 calc(var(--size) * 0.08) var(--gold), inset 0 0 6px rgba(0, 0, 0, 0.6); }
.bot.rusty .bot-art { filter: sepia(0.9) saturate(0.7) hue-rotate(-15deg) brightness(0.75) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.bot.rusty .bot-aura { opacity: 0; animation: none; }
.bot.rusty .bot-plate { border-color: #a0522d; box-shadow: none; }
.rust-tag { position: absolute; right: 0; top: 0; font-size: calc(var(--size) * 0.22); filter: drop-shadow(0 2px 2px #000); }
.bot.shiny .bot-art { filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.1) drop-shadow(0 0 10px rgba(255, 204, 0, 0.8)); }
.bot.shiny::after { content: '✨'; position: absolute; left: 0; top: 0; font-size: calc(var(--size) * 0.2); animation: pulse 1.4s infinite; }
.bot-label { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font-weight: 600; font-size: 13px; background: rgba(0, 0, 0, 0.6); padding: 1px 6px; border-radius: 8px; }
.bot.jolt { animation: jolt 0.15s; }
.bot.scan-in { animation: scanIn 0.6s ease-out; }
@keyframes jolt { 50% { transform: scale(1.08) rotate(-2deg); } }
@keyframes scanIn { from { opacity: 0; transform: scale(0.6); filter: brightness(3); } }
@keyframes auraPulse { 50% { transform: scale(1.12); opacity: 0.85; } }

.stars { display: inline-flex; gap: 1px; font-size: 14px; color: rgba(255, 255, 255, 0.2); }
.stars i { font-style: normal; }
.stars i.on { color: var(--gold); text-shadow: 0 0 6px rgba(255, 204, 0, 0.7); }

/* ---------- home ---------- */
.home { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 100%; }
.home-top { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; }
.logo { width: 62%; max-width: 260px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
.logo-text { font-size: 46px; color: var(--cyan); text-shadow: 0 4px 0 #0a4fa8, 0 0 24px rgba(46, 230, 255, 0.6); }
.player-card { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 10px 14px; }
.rank-badge { width: 56px; height: 56px; flex: none; border-radius: 16px; background: linear-gradient(160deg, var(--blue), var(--purple)); display: grid; place-items: center; font-family: var(--head); font-size: 12px; line-height: 0.9; text-align: center; box-shadow: 0 0 16px rgba(46, 140, 255, 0.5); }
.rank-badge b { display: block; font-size: 26px; font-weight: 400; }
.player-info { flex: 1; min-width: 0; }
.hello { font-family: var(--head); font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-name { font-size: 15px; color: var(--gold); margin-left: 4px; }
.xpbar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 4px 0 2px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 6px; }
.xptxt { font-size: 13px; color: var(--muted); }
.hero-mech { margin: 4px 0 -4px; animation: float 3.2s ease-in-out infinite; }
.chips { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.chip { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 8px 4px; text-align: center; line-height: 1.1; }
.chip b { font-family: var(--head); font-size: 22px; font-weight: 400; margin-left: 2px; }
.chip small { display: block; color: var(--muted); font-size: 12px; }
.chip.warn { border-color: rgba(255, 138, 28, 0.7); }
.btn-mission { width: 100%; max-width: 420px; font-size: 32px; padding: 14px; background: linear-gradient(180deg, #ffe066, #ff9f1c); color: #2b1500; box-shadow: 0 6px 0 #a35a00, 0 0 30px rgba(255, 170, 0, 0.45); }
.btn-mission small { display: block; font-family: var(--body); font-size: 14px; font-weight: 600; opacity: 0.75; }
.home-nav { display: flex; gap: 10px; width: 100%; max-width: 420px; margin-top: 2px; }
.home-nav button { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 10px 4px; font-family: var(--head); font-size: 16px; }
.home-nav span { display: block; font-size: 26px; margin-bottom: 2px; }

/* ---------- mech ---------- */
.mech { position: relative; width: var(--size); height: var(--size); }
.mech-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: var(--paint) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); }
.mech-emblem { position: absolute; transform: translate(-50%, -50%); border-radius: 22%; background: radial-gradient(circle at 40% 35%, #263b7a, #0b1235); border: 3px solid var(--gold); display: grid; place-items: center; box-shadow: 0 0 14px rgba(255, 204, 0, 0.6); }
.mech-emblem .hz-slot { width: 78%; height: 78%; font-size: calc(var(--size) * 0.16); font-family: var(--head); color: #fff; }
.mech-fx { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.mech.fx-glow .mech-fx { background: radial-gradient(circle, var(--fc), transparent 65%); opacity: 0.55; animation: auraPulse 2s ease-in-out infinite; }
.mech.fx-sparks .mech-fx { background: radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px), radial-gradient(circle at 80% 40%, #2ee6ff 0 2px, transparent 3px), radial-gradient(circle at 60% 85%, #fff 0 2px, transparent 3px), radial-gradient(circle at 30% 75%, #2ee6ff 0 2px, transparent 3px); animation: spin 1.2s steps(6) infinite; }
.mech.fx-flames .mech-fx { inset: auto 25% -8% 25%; height: 30%; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 0%, #fff6a8, #ff9f1c 40%, rgba(255, 51, 0, 0.6) 65%, transparent 72%); animation: flame 0.18s infinite alternate; }
.mech.fx-rainbow .mech-art { animation: rainbow 4s linear infinite; }
.mech.fx-orbit .mech-fx { border: 3px dashed rgba(46, 230, 255, 0.7); inset: -4%; animation: spin 6s linear infinite; }
@keyframes flame { to { transform: scaleY(1.25) scaleX(0.9); opacity: 0.8; } }
@keyframes rainbow { to { filter: hue-rotate(360deg) drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6)); } }

/* ---------- map ---------- */
.map { max-width: 460px; margin: 0 auto; }
.term-h { margin-top: 12px; }
.zone-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.zone-tile { position: relative; aspect-ratio: 1 / 1.12; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.zone-tile.done { border-color: rgba(255, 204, 0, 0.7); }
.zone-tile .ring { display: block; }
.zone-tile .zt-n { position: absolute; top: calc(50% - 8px); left: 50%; transform: translate(-50%, -50%); font-family: var(--head); font-size: 20px; }
.zone-tile small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ring { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring-bg { stroke: rgba(255, 255, 255, 0.12); }
.ring-fg { stroke: var(--cyan); stroke-linecap: round; transition: stroke-dashoffset 0.6s; }
.zone-tile.done .ring-fg { stroke: var(--gold); }
.zb { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 18px; filter: drop-shadow(0 2px 2px #000); }
.zb.ready { animation: pulse 1s infinite; }
.map-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 18px 0 8px; }
.zone-bots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-height: 190px; overflow-y: auto; margin: 6px 0 10px; }
.zone-stats { display: grid; gap: 4px; }

/* ---------- mission ---------- */
.m-top { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; max-width: 480px; margin: 0 auto 8px; }
.m-zone { text-align: center; font-family: var(--head); font-size: 15px; color: var(--muted); }
.pips { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); }
.pips i.done { background: var(--cyan); }
.pips i.cur { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.m-bolts { min-width: 60px; text-align: right; font-family: var(--head); font-size: 22px; }
.m-bolts.pop { animation: pulse 0.3s; }
.m-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 480px; margin: 0 auto; padding-bottom: 20px; }
.task-title { font-family: var(--head); font-size: 24px; text-align: center; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.q { font-weight: 600; color: var(--muted); }
.prompt { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.prompt.small { gap: 4px; }
.prompt .en, .en { color: var(--muted); font-size: 16px; text-align: center; }
.prompt.small .en { width: 100%; }
.wl { display: inline-flex; gap: 6px; }
.wl-c { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.wl-c > .hz-slot, .wl-c > .blank { width: 50px; height: 50px; font-size: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); padding: 3px; }
.prompt.small .wl-c > .hz-slot, .prompt.small .wl-c > .blank { width: 40px; height: 40px; font-size: 34px; }
.wl-c.t > .hz-slot { background: rgba(46, 230, 255, 0.18); box-shadow: 0 0 0 2px var(--cyan); }
.blank { display: block; border: 2px dashed var(--cyan); background: rgba(46, 230, 255, 0.08) !important; animation: blink 1.2s infinite; }
@keyframes blink { 50% { border-color: rgba(46, 230, 255, 0.3); } }
.py { font-size: 15px; font-weight: 600; color: var(--gold); min-height: 1.2em; }
.py.hide { visibility: hidden; }
.speak { width: 48px; height: 48px; border-radius: 50%; background: var(--panel-hi); border: 2px solid var(--line); font-size: 22px; }
.speak.pulse { animation: pulse 0.5s infinite; border-color: var(--cyan); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.opt { padding: 16px 8px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); font-size: 26px; font-weight: 600; transition: transform 0.08s; }
.opt:active:not(:disabled) { transform: scale(0.95); }
.opt.right { background: rgba(61, 255, 139, 0.2); border-color: var(--green); box-shadow: 0 0 18px rgba(61, 255, 139, 0.4); }
.opt.wrong { background: rgba(255, 51, 85, 0.2); border-color: var(--red); animation: shakeS 0.3s; }
.opts.chars .opt { padding: 10px; }
.opt.ch .hz-slot { width: 62px; height: 62px; font-size: 56px; }
.opts.six { grid-template-columns: repeat(3, 1fr); }
.opts.six .opt.ch .hz-slot { width: 52px; height: 52px; font-size: 46px; }
.opt.used { opacity: 0.25; }
.reveal { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: scanIn 0.4s; }
.actions { display: flex; gap: 10px; width: 100%; max-width: 380px; }
.actions .btn { flex: 1; }
.actions.slim { justify-content: center; }
.actions.slim .btn { flex: 0 1 auto; }
.float-msg { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); font-family: var(--head); font-size: 34px; white-space: nowrap; color: var(--gold); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 204, 0, 0.6); pointer-events: none; animation: callout 1.4s forwards; z-index: 5; }
@keyframes callout { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 35% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }

.build-row { display: flex; align-items: center; gap: 10px; }
.pad-wrap { display: grid; place-items: center; }
.pad { position: relative; border-radius: 18px; background: radial-gradient(circle at 50% 40%, #16295e, #0b1235); box-shadow: inset 0 0 0 3px rgba(46, 230, 255, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5); touch-action: none; }
.pad .tian { position: absolute; inset: 0; }
.tian rect { fill: none; stroke: rgba(255, 90, 90, 0.55); stroke-width: 1.2; }
.tian line { stroke: rgba(255, 90, 90, 0.35); stroke-width: 0.7; stroke-dasharray: 3 3; }
.pad-w { position: absolute; inset: 0; }
.parts { width: 100%; max-width: 280px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.partbar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width 0.25s; }

.teach { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.teach-info { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.big-py { font-size: 34px; font-weight: 700; color: var(--gold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.teach-word { display: flex; align-items: center; gap: 8px; }
.more-word { color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 6px; }
.more-word .speak { width: 34px; height: 34px; font-size: 15px; }

.combine-bots { display: flex; align-items: center; gap: 4px; }
.combine-bots .plus { font-family: var(--head); font-size: 30px; color: var(--cyan); }
.combine-bots.fuse .bot:first-child { animation: fuseL 0.7s forwards; }
.combine-bots.fuse .bot:last-child { animation: fuseR 0.7s forwards; }
.combine-bots.fuse .plus { opacity: 0; transition: opacity 0.2s; }
@keyframes fuseL { 60% { transform: translateX(46px) scale(1.1); filter: brightness(2.5); } 100% { transform: translateX(40px) scale(1.15); } }
@keyframes fuseR { 60% { transform: translateX(-46px) scale(1.1); filter: brightness(2.5); } 100% { transform: translateX(-40px) scale(1.15); } }
.slots { display: flex; gap: 8px; }
.slot { width: 66px; height: 66px; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; }
.slot.filled { border: 2px solid var(--cyan); background: rgba(46, 230, 255, 0.12); animation: scanIn 0.3s; }
.slot .hz-slot { width: 54px; height: 54px; font-size: 48px; }

/* ---------- results ---------- */
.results { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 440px; margin: 0 auto; text-align: center; }
.res-title { font-size: 36px; margin-top: 16px; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.res-bolts { font-family: var(--head); font-size: 30px; color: var(--gold); }
.res-bots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.res-bot { display: flex; flex-direction: column; align-items: center; }
.res-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.res-words span { font-family: var(--zh); font-size: 22px; background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 4px 10px; }
.res-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; }

/* ---------- boss ---------- */
.boss-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
.boss-pic { width: 130px; height: 130px; display: grid; place-items: center; animation: float 2.4s ease-in-out infinite; }
.boss-pic.defeated { animation: none; filter: grayscale(1) brightness(0.5); transform: rotate(12deg) scale(0.9); transition: 0.6s; }
.boss-img { width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)) drop-shadow(0 0 16px rgba(255, 40, 100, 0.6)); }
.boss-emoji { font-size: 96px; filter: drop-shadow(0 0 18px rgba(255, 40, 100, 0.8)); }
.boss-name { font-family: var(--head); font-size: 22px; color: #ff7aa2; }
.hp { width: min(300px, 80vw); height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); overflow: hidden; border: 2px solid rgba(255, 80, 120, 0.5); }
.hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff3355, #ff9f1c); transition: width 0.4s; }
.boss-intro, .boss-end { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boss-intro p, .boss-end p { color: var(--muted); margin: 0; }
.score { font-family: var(--head); font-size: 28px; }
.boss-end.won h2 { color: var(--gold); font-size: 30px; }
.missed { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.miss-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; background: var(--panel); border-radius: 14px; padding: 6px; }
.miss-row .wl-c > .hz-slot { width: 38px; height: 38px; font-size: 32px; }
.miss-row .speak { width: 38px; height: 38px; font-size: 16px; }

/* ---------- zidex ---------- */
.fam-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin: 0 -16px 8px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.fam-chip { flex: none; padding: 6px 12px; border-radius: 20px; background: var(--panel); border: 2px solid var(--fc, var(--line)); font-size: 14px; font-weight: 600; white-space: nowrap; }
.fam-chip.on { background: var(--fc, var(--cyan)); color: #04122e; }
.fam-about { border-left: 4px solid var(--fc); padding: 6px 10px; background: var(--panel); border-radius: 8px; font-size: 14px; margin-bottom: 10px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.dex-cell { display: flex; flex-direction: column; align-items: center; padding: 4px 0 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.detail-top { display: flex; align-items: center; gap: 12px; text-align: left; }
.fam-tag { display: inline-block; margin-top: 4px; font-size: 13px; padding: 2px 8px; border-radius: 10px; border: 2px solid var(--fc); }
.detail-anim { display: grid; place-items: center; margin: 10px 0 6px; }
.detail-words { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.dw { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 6px; }
.dw .wl-c > .hz-slot { width: 36px; height: 36px; font-size: 30px; }
.dw .speak { width: 36px; height: 36px; font-size: 15px; }
.dw .en { font-size: 14px; }

/* ---------- workshop ---------- */
.workshop { max-width: 460px; margin: 0 auto; }
.ws-preview { display: grid; place-items: center; margin: 6px 0; }
.ws-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ws-item { position: relative; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; min-height: 56px; justify-content: center; }
.ws-item img { width: 52px; height: 52px; object-fit: contain; }
.ws-item.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 204, 0, 0.5); }
.ws-item.locked img { filter: brightness(0); opacity: 0.6; }
.ws-item small { color: var(--gold); font-size: 12px; }
.ws-item.paint i { width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#2ee6ff, #8a5cff, #ff3fa4, #2ee6ff); }
.ws-emblems { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.ws-em { height: 52px; border-radius: 12px; background: var(--panel); border: 2px solid var(--line); display: grid; place-items: center; }
.ws-em .hz-slot { width: 40px; height: 40px; font-size: 34px; }
.ws-em.on { border-color: var(--gold); }

/* ---------- settings & parent ---------- */
.settings, .parent { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.set-row { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-weight: 600; }
.set-row input { display: none; }
.sw { width: 50px; height: 28px; border-radius: 14px; background: rgba(255, 255, 255, 0.15); position: relative; transition: 0.2s; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: 0.2s; }
.set-row input:checked + .sw { background: var(--cyan); }
.set-row input:checked + .sw::after { left: 25px; }
.parent-btn { margin-top: 10px; }
.about { text-align: center; line-height: 1.5; margin-top: 16px; }
.parent section { background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 4px 14px 12px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; }
.kv span { color: var(--muted); }
.terms { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.terms th { text-align: left; color: var(--muted); font-weight: 600; }
.terms td { padding: 4px 4px 4px 0; }
.terms td:nth-child(2) { width: 40%; }
.bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.trouble, .flags { display: flex; flex-direction: column; gap: 6px; }
.tr-row, .flag-row { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 6px 8px; font-size: 14px; }
.flag-row > span:nth-child(2) { flex: 1; }
.tr-c { font-family: var(--zh); font-size: 34px; width: 44px; text-align: center; flex: none; }
.danger-zone { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px !important; }

@media (max-height: 700px) {
  .wl-c > .hz-slot, .wl-c > .blank { width: 42px; height: 42px; font-size: 36px; }
  .task-title { font-size: 20px; }
}