@import url("assets/fonts/jiangcheng/500W.css");
@import url("assets/fonts/jiangcheng/600/600W.css");
:root { font-family: system-ui, "Microsoft YaHei", sans-serif; font-size: 14px; color: rgb(36, 57, 76); background: rgb(237, 242, 248); --border: #dce6ee; --muted: #718294; --neutral: #858d96; --teal: #247e79; --damage: #cf575e; --damage-bg: #fff1f2; --damage-line: #f2d4d7; --blue: #357dad; --blue-bg: #edf5fb; --green: #16985b; --green-bg: #edf8f2; --orange: #c58239; --orange-bg: #fff5e8; --outer: 24px; --inner: 18px; --card: 14px; --tile: 12px; --popup: 16px; --star: #7663b4; --star-bg: #f6f3fb; --star-line: #ded6ef; --choice-bg: #edf1f5; --choice-text: #718294; --choice-shadow: 0 2px 7px #24394c0c; }
* { box-sizing: border-box; }
body { margin: 0px; user-select: none; -webkit-user-select: none; }
input, textarea, [contenteditable="true"] { user-select: text; -webkit-user-select: text; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, summary:focus-visible { outline: rgb(228, 164, 73) solid 3px; outline-offset: 3px; }
button { touch-action: manipulation; }
button, [role="button"], input { -webkit-tap-highlight-color: transparent; }
button:not(.roster button):active { filter: brightness(0.97); }
[hidden] { display: none !important; }
main { max-width: 1260px; margin: 24px auto 96px; padding: 0px 28px 28px; position: relative; }
.team-presets { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 24px; margin-bottom: 20px; }
.team-choice { display: flex; align-items: center; gap: 14px; min-width: 0px; }
.right-team-choice { flex-direction: row-reverse; justify-content: flex-start; }
.team-menu { position: relative; flex: 0 0 auto; z-index: 30; }
.swap-roles { background: rgb(255, 255, 255); border: 1px solid rgb(206, 224, 226); color: var(--teal); padding: 10px 16px; border-radius: 999px; white-space: nowrap; min-height: 40px; }
.team-options { position: absolute; top: calc(100% + 10px); min-width: 90px; padding: 5px; background: rgb(255, 255, 255); border: 1px solid rgb(206, 224, 226); border-radius: var(--popup); box-shadow: rgba(35, 57, 76, 0.086) 0px 8px 24px; }
.team-options::before { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; background: rgb(255, 255, 255); border-top: 1px solid rgb(206, 224, 226); border-left: 1px solid rgb(206, 224, 226); transform: rotate(45deg); }
.team-options button { display: block; width: 100%; border: 0px; border-radius: 10px; padding: 10px 3px; background: rgb(255, 255, 255); color: var(--teal); }
.team-options button:hover { background: rgb(240, 247, 247); }
.team-options .team-import { border-top: 1px solid var(--border); border-radius: 0px; color: var(--muted); }
.roster { display: flex; gap: 10px; align-items: center; min-width: 0px; overflow-x: auto; scrollbar-width: thin; padding: 5px; }
.roster button { transition: outline-color 180ms, background-color 180ms; width: 48px; height: 48px; flex: 0 0 48px; border: 1px solid rgb(226, 221, 207); border-radius: 50%; background: rgb(242, 238, 229); padding: 4px; display: grid; place-items: center; }
.roster button.active { outline: 3px solid var(--teal); outline-offset: 1px; }
.roster-avatar { width: 100%; height: 100%; object-fit: contain; }
.arena { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 24px; position: relative; }
.panel { container-type: inline-size; min-width: 0px; background: white; border: 1px solid var(--border); border-radius: var(--outer); padding: 24px; }
.swap-circle { display: grid; place-items: center; position: absolute; left: 50%; transform: translateX(-50%); z-index: 12; border: 1px solid rgb(206, 224, 226); border-radius: 50%; background: rgb(255, 255, 255); color: var(--teal); width: 44px; height: 44px; padding: 0px; font-size: 25px; box-shadow: rgba(35, 57, 76, 0.043) 0px 2px 10px; }
.pet-card { container-type: inline-size; position: relative; background: rgb(248, 251, 252); border: 1px solid rgb(227, 235, 241); border-radius: var(--inner); padding: 16px; margin-bottom: 24px; min-width: 0px; }
.art { position: relative; height: clamp(90px, 48.75cqi, 240px); overflow: hidden; min-width: 0px; min-height: 0px; display: block; cursor: pointer; background: radial-gradient(rgba(222, 238, 235, 0.44), transparent 70%); border-radius: var(--tile); }
.opponent .art { background: radial-gradient(rgba(240, 228, 213, 0.44), transparent 70%); }
.pet-art { position: absolute; inset: 0px; display: block; width: 100%; height: 100%; min-width: 0px; min-height: 0px; object-fit: contain; }
.pet-name-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; min-height: 38px; }
.pet-name { margin: 0px; font-family: SSDunDunTi, system-ui, "Microsoft YaHei", sans-serif; font-weight: 400; font-size: clamp(19px, 1.7vw, 26px); cursor: pointer; overflow-wrap: anywhere; line-height: 1.35; }
.pet-name-arrow { font: 14px system-ui; color: var(--muted); margin-left: 8px; }
.feature-toggle { display: flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.feature-toggle img { width: 24px; height: 24px; object-fit: contain; border-radius: 50%; }
.feature-toggle[aria-pressed="true"] { color: var(--green); border-color: rgb(139, 206, 176); background: var(--green-bg); }
.feature-pending { color: var(--muted); cursor: help; }
.feature-state { font-size: 10px; }
.hp-title { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.hp-track { position: relative; height: 14px; border-radius: 999px; background: rgb(232, 238, 243); overflow: hidden; }
.hp-range { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; margin: 0px; z-index: 2; cursor: ew-resize; touch-action: none; }
.health { height: 100%; background: rgb(55, 181, 158); transition: width 240ms ease-out; }
.loss { position: absolute; top: 0px; height: 100%; background: repeating-linear-gradient(120deg, rgb(255, 195, 109), rgb(255, 195, 109) 5px, rgb(255, 220, 159) 5px, rgb(255, 220, 159) 9px); transition: left 240ms ease-out, width 240ms ease-out; }
.preview { display: none; }
.star-controls { border: 1px solid var(--border); border-radius: var(--card); padding: 14px; margin: 16px 0px 20px; }
.star-total-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0px; font-size: 12px; }
.star-label { display: flex; align-items: center; gap: 6px; line-height: 20px; white-space: nowrap; overflow: hidden; }
.star-label-title { flex: none; }
.star-label small { min-width: 0; font: inherit; color: var(--muted); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.star-total-line b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
.star-layer-slider { position: relative; height: 34px; margin-top: 15px; padding: 0px 17px; }
.star-layer-track { height: 6px; border-radius: 999px; position: absolute; top: 14px; left: 17px; right: 17px; }
.star-layer-knob { display: grid; place-items: center; position: absolute; left: calc(17px + (100% - 34px)*var(--layer)); top: 0px; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; color: white; font-size: 13px; font-weight: 700; pointer-events: none; }
.star-layer-slider input { position: absolute; left: 0px; top: 0px; width: 100%; height: 34px; margin: 0px; opacity: 0; cursor: ew-resize; touch-action: none; }
.star-layer-slider:focus-within .star-layer-knob { outline: rgb(239, 193, 198) solid 3px; outline-offset: 2px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }
.stat-tile { display: grid; grid-template-columns: 20px minmax(0px, 1fr) 24px; align-items: center; gap: 6px; background: rgb(248, 250, 252); border: 1px solid var(--border); border-radius: var(--tile); padding: 10px; min-height: 54px; }
.stat-name, .stat-icon { display: block; width: 20px; height: 20px; }
.stat-icon { filter: grayscale(1); opacity: 0.55; }
.stat-boosted .stat-icon { filter: brightness(0) saturate(100%) invert(45%) sepia(97%) saturate(573%) hue-rotate(105deg) brightness(86%) contrast(95%); opacity: 1; }
.stat-number { border: 0px; background: transparent; padding: 0px; font-weight: 700; color: var(--neutral); font-variant-numeric: tabular-nums; }
.stat-number.boosted { color: rgb(0, 155, 72); }
.nature-arrow { width: 24px; height: 30px; border: 1px solid rgb(220, 226, 230); border-radius: 10px; background: transparent; padding: 0px; font-size: 17px; color: var(--muted); }
.nature-arrow.up { color: rgb(13, 162, 89); border-color: rgb(101, 200, 142); background: rgb(227, 245, 233); }
.nature-arrow.down { color: rgb(230, 78, 81); border-color: rgb(242, 135, 137); background: rgb(255, 237, 237); }
.buff-controls { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 6px; margin: 10px 0px 0px; }
.buff-pill { position: relative; min-height: 32px; line-height: 14px; background: rgb(248, 250, 252); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); padding: 8px 3px; font-size: 11px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buff-pill.active { color: var(--green); border-color: rgb(137, 204, 170); background: var(--green-bg); }
.buff-pill.negative { color: var(--orange); border-color: rgb(231, 197, 148); background: var(--orange-bg); }
.buff-pill input { position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; margin: 0px; cursor: ew-resize; }
.buff-pill:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.moves { display: grid; gap: 10px; }
.skill-card { position: relative; min-width: 0px; background: rgb(250, 252, 254); border: 1px solid var(--border); border-radius: var(--card); padding: 12px; }
.skill-preview, .will-layout { display: flex; align-items: center; gap: 10px; min-height: 60px; }
.skill-preview { cursor: pointer; }
.skill-picture { display: block; flex: 0 0 auto; width: 54px; height: 54px; border: 0px; background: none; padding: 0px; }
.skill-icon { display: block; width: 54px; height: 54px; object-fit: contain; border-radius: 10px; }
.skill-icon-toggle { border: 0px; background: none; padding: 0px; border-radius: 10px; cursor: pointer; }
.skill-icon-toggle[aria-expanded="true"] .skill-icon { outline: 2px solid var(--teal); outline-offset: 1px; }
.skill-copy { min-width: 0px; flex: 1 1 0%; }
.skill-copy strong { display: block; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.swift-tag { font-size: 11px; color: rgb(150, 164, 174); margin-left: 6px; font-weight: 400; }
.skill-meta { display: block; margin-top: 4px; font-size: 12px; }
.skill-result { flex: 0 0 auto; min-width: 98px; max-width: 120px; text-align: center; border: 1px solid var(--damage-line); border-radius: var(--tile); background: var(--damage-bg); color: var(--damage); padding: 10px 8px; line-height: 1.35; position: relative; }
.skill-result small { display: block; font-size: 11px; font-weight: 400; }
.skill-result b { display: block; white-space: nowrap; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.skill-result.blue-result { color: var(--blue); background: var(--blue-bg); border-color: rgb(209, 228, 242); }
.skill-result.status-result { color: var(--green); background: var(--green-bg); border-color: rgb(208, 234, 221); }
.skill-result.debuff-result { color: var(--orange); background: var(--orange-bg); border-color: rgb(240, 223, 199); }
.damage-text { color: var(--damage); }
.blue-text { color: var(--blue); }
.status-text { color: var(--green); }
.debuff-text { color: var(--orange); }
.coverage-note { font-size: 10px; color: var(--muted); line-height: 1.6; }
.effect-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.effect-actions button { border: 1px solid rgb(189, 217, 205); background: white; color: var(--green); padding: 8px 10px; border-radius: 10px; font-size: 12px; }
.effect-items { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.expanded-effect { padding: 12px; border-radius: var(--tile); margin-top: 10px; background: rgb(241, 248, 244); line-height: 1.6; font-size: 12px; }
.expanded-effect p { margin: 0px 0px 8px; }
.debuff-expanded { background: var(--orange-bg); }
.holding::after { content: ""; position: absolute; bottom: 0px; left: 0px; height: 3px; background: currentcolor; animation: 0.65s linear 0s 1 normal forwards running hold-fill; border-radius: 999px; }
@keyframes hold-fill { 
  0% { width: 0px; }
  100% { width: 100%; }
}
.will-panel { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 24px; margin-top: 18px; }
.will-values { flex: 0 0 auto; }
.will-value { min-width: 74px; max-width: 100px; padding: 10px 6px; }
.will-value b { font-size: 12px; }
.will-active { outline: none; color: var(--damage); }
.will-type-options { display: grid; }
.will-type-options button { border-radius: var(--tile); font-size: 12px; }
.will-type-options img { display: block; }
.summary { margin-top: 18px; background: white; border: 1px solid var(--border); border-radius: var(--outer); padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.summary strong { font-size: 19px; }
.summary small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.summary output { font-size: 24px; font-weight: 700; color: var(--teal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calculation-details { background: white; border: 1px solid var(--border); border-radius: var(--card); padding: 14px 20px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.calculation-details summary { cursor: pointer; }
.calculation-grid { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; margin-top: 14px; }
.calculation-grid b { text-align: right; color: rgb(64, 85, 103); font-variant-numeric: tabular-nums; }
.note { font-size: 12px; line-height: 1.8; text-align: left; margin: 20px 0px 0px; }
.note a { color: var(--teal); }
.reset { border: 0px; background: none; text-decoration: underline; color: var(--teal); padding: 8px; }
.ui-message { min-height: 16px; font-size: 12px; margin: 8px 0px 0px; }
.pet-search-popover, .setting-bubble { position: absolute; top: calc(100% + 8px); left: 0px; right: 0px; z-index: 35; background: rgb(255, 255, 255); border: 1px solid rgb(207, 222, 230); border-radius: var(--popup); box-shadow: rgba(34, 57, 75, 0.106) 0px 10px 28px; padding: 14px; }
.search-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.search-heading button { border: 0px; background: none; color: var(--muted); font-size: 22px; min-width: 30px; min-height: 30px; padding: 0px; border-radius: 10px; }
.pet-search-popover input, .skill-edit-box input { width: 100%; border: 1px solid var(--border); border-radius: var(--tile); padding: 11px; color: inherit; min-width: 0px; background: rgb(250, 252, 254); }
.pet-search-results { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; max-height: 270px; overflow: auto; margin-top: 10px; overscroll-behavior: contain; }
.pet-search-results button { border: 1px solid var(--border); background: rgb(248, 250, 252); padding: 10px 8px; border-radius: var(--tile); font-size: 12px; overflow-wrap: anywhere; min-height: 40px; }
.pet-search-results button:hover { border-color: rgb(138, 187, 183); background: rgb(238, 248, 245); }
.pet-search-results p { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.skill-edit-dialog { position: fixed; inset: 0px; z-index: 100; background: rgba(36, 57, 76, 0.27); display: grid; place-items: center; padding: 20px; }
.skill-edit-box { width: min(480px, 100%); max-height: 85dvh; overflow: auto; border: 1px solid var(--border); background: white; border-radius: var(--popup); padding: 20px; box-shadow: rgba(34, 57, 75, 0.133) 0px 12px 40px; }
.setting-bubble p { font-size: 12px; margin: 0px 0px 12px; }
.switch-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; font-size: 12px; font-weight: 600; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: rgb(248, 250, 252); }
.segmented { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); width: 100%; min-width: 0px; background: var(--choice-bg); border: 1px solid rgb(224, 231, 237); border-radius: 11px; padding: 4px; gap: 4px; }
.segmented button { position: relative; z-index: 1; min-width: 0px; min-height: 44px; border: 0px; background: transparent; border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 650; color: var(--choice-text); transition: color 160ms; }
.segmented button[aria-pressed="true"] { background: transparent; color: var(--teal); box-shadow: none; }
@media (min-aspect-ratio: 1 / 1) and (min-width: 1180px) {
main { padding-left: 124px; padding-right: 124px; }
.team-presets { display: contents; }
.team-choice { position: absolute; left: 20px; width: 84px; flex-direction: column; gap: 16px; }
.right-team-choice { left: auto; right: 20px; }
.roster { flex-direction: column; overflow: visible; gap: 14px; }
.team-choice.sidebar-swapped { left: auto; right: 20px; }
.right-team-choice.sidebar-swapped { right: auto; left: 20px; }
.swap-roles { padding: 10px 12px; }
.roster button { width: 48px; height: 48px; flex-basis: 48px; }
}
@media (max-width: 1000px) {
main { padding: 0px 16px 24px; }
.arena, .team-presets, .will-panel { gap: 16px; }
.panel { padding: 18px; }
.team-choice { gap: 7px; }
.roster { gap: 7px; }
.roster button { width: 40px; height: 40px; flex-basis: 40px; }
.swap-roles { padding: 8px 10px; font-size: 12px; }
.pet-name-row { flex-wrap: wrap; }
.feature-toggle { font-size: 10px; }
.stat-tile { padding: 8px; grid-template-columns: 16px minmax(0px, 1fr) 22px; gap: 4px; }
.stat-icon, .stat-name { width: 16px; height: 16px; }
.nature-arrow { width: 22px; }
.buff-pill { font-size: 10px; }
.will-layout { flex-wrap: wrap; }
.will-values { margin-left: auto; }
.will-row .skill-copy { min-width: 80px; }
}
@media (max-width: 680px) {
main { margin-top: 16px; padding: 0px 12px 20px; }
.team-presets { gap: 12px; }
.team-choice { gap: 6px; flex-wrap: wrap; align-content: start; }
.right-team-choice { justify-content: flex-start; }
.roster { width: 100%; padding: 4px; gap: 7px; }
.team-menu { order: 0; }
.roster { order: 1; }
.roster button { width: 35px; height: 35px; flex-basis: 35px; }
.arena { grid-template-columns: 1fr; gap: 18px; }
.panel { padding: 18px; }
.pet-name-row { flex-wrap: nowrap; }
.pet-card { margin-bottom: 20px; }
.art { height: min(165px, 48.75cqi); }
.pet-name { font-size: 23px; }
.feature-toggle { font-size: 11px; }
.swap-circle { left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; font-size: 24px; top: 0px !important; }
.will-panel { grid-template-columns: 1fr; gap: 10px; }
.will-layout { flex-wrap: nowrap; }
.will-values { margin-left: 0px; }
.skill-copy strong { font-size: 14px; }
.skill-result { min-width: 100px; }
.skill-result b { font-size: 13px; }
.buff-pill { font-size: 11px; }
.summary { padding: 16px; }
.summary strong { font-size: 17px; }
.summary output { font-size: 20px; }
.will-values { gap: 5px; }
.will-value { min-width: 68px; padding: 10px 5px; }
.will-value b { font-size: 11px; }
.will-row .skill-copy strong { font-size: 12px; }
.will-row .skill-meta { font-size: 11px; }
.will-layout { gap: 7px; }
.pet-search-popover { position: fixed; top: 50%; left: 12px; right: 12px; transform: translateY(-50%); max-height: 80dvh; overflow: auto; box-shadow: rgba(36, 57, 76, 0.27) 0px 0px 0px 100vmax, rgba(34, 57, 75, 0.106) 0px 10px 28px; }
.setting-bubble { position: fixed; top: 50%; left: 12px; right: 12px; transform: translateY(-50%); max-height: 80dvh; overflow: auto; box-shadow: rgba(36, 57, 76, 0.27) 0px 0px 0px 100vmax; }
.star-total-line { gap: 8px; }
.star-total-line b { font-size: 13px; }
}
.stat-neutral .stat-icon { filter: brightness(0) saturate(100%) invert(55%); opacity: 1; }
.stat-tile { container-type: inline-size; }
.stat-number { font-size: clamp(13px, 19cqi, 26px); }
.stat-number.long-number { font-size: clamp(11px, 15cqi, 22px); }
@media (max-width: 680px) {
.right-team-choice .roster { justify-content: flex-start; }
.stat-tile { padding: 7px; grid-template-columns: 14px minmax(0px, 1fr) 20px; gap: 3px; }
.stat-icon, .stat-name { width: 14px; height: 14px; }
.nature-arrow { width: 20px; }
.stat-number { font-size: clamp(13px, 19cqi, 22px); }
.stat-number.long-number { font-size: clamp(11px, 15cqi, 20px); }
}
@media (prefers-reduced-motion: reduce) {
.holding::after { animation: auto ease 0s 1 normal none running none; width: 100%; }
}
.feature-bubble { position: absolute; top: calc(100% + 8px); right: 0px; z-index: 40; padding: 16px; background: white; border: 1px solid var(--border); border-radius: var(--popup); box-shadow: rgba(34, 57, 75, 0.133) 0px 10px 28px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.feature-bubble p { margin: 0px 0px 12px; }
.feature-bubble input[type="range"] { width: 100%; accent-color: var(--green); margin: 12px 0px; }
.feature-layer-line { display: flex; justify-content: space-between; }
.feature-layer-line b { color: var(--green); }
.feature-check { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.feature-bubble select { border: 1px solid var(--border); border-radius: 10px; padding: 8px; max-width: 100%; background: rgb(248, 250, 252); }
.feature-toggle:not(button) { cursor: default; }
@media (max-width: 680px) {
.feature-bubble { position: fixed; top: 50%; left: 12px; right: 12px; width: auto; transform: translateY(-50%); box-shadow: rgba(36, 57, 76, 0.27) 0px 0px 0px 100vmax; }
}
.swap-circle svg { width: 27px; height: 27px; pointer-events: none; }
.segmented button:not([aria-pressed="true"]):hover { color: rgb(64, 85, 103); background: rgba(255, 255, 255, 0.208); }
@media (max-width: 480px) {
.switch-row .segmented { flex: 1 1 100%; width: 100%; }
}
.segmented::before, .will-values::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 8px; background: rgb(255, 255, 255); box-shadow: var(--choice-shadow); transform: translateX(calc(var(--choice,0)*(100% + 4px))); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.will-values { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--damage-line); border-radius: 12px; background: var(--damage-bg); }
.will-values::before { border: 1px solid rgb(237, 198, 203); box-shadow: rgba(207, 87, 94, 0.047) 0px 2px 7px; }
.will-values .will-value { position: relative; z-index: 1; border: 0px; border-radius: 8px; background: transparent; min-width: 68px; padding: 8px 5px; color: rgb(174, 116, 122); transition: color 160ms; }
.will-values .will-value[aria-pressed="true"] { color: var(--damage); }
.will-values .will-value b { font-weight: 700; }
.will-values .will-value small { font-weight: 600; }
.will-row .skill-copy { min-width: 0px; }
.will-values .will-value:focus-visible { outline-offset: 1px; }
.star-controls { background: var(--star-bg); border-color: var(--star-line); }
.star-total-line b { color: var(--star); }
.star-layer-knob { background: var(--star); }
.star-layer-track { background: rgb(230, 224, 241); }
.star-layer-slider:focus-within .star-layer-knob { outline-color: rgb(209, 197, 232); }
.pet-search-results button, .will-type-options button, .team-options button, .effect-actions button { border-radius: 9px; transition: background-color 160ms, color 160ms, border-color 160ms; }
.pet-search-results button[aria-pressed="true"], .will-type-options button[aria-pressed="true"], .team-options button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: rgb(255, 255, 255); }
.team-options button[aria-pressed="true"]:hover { background: rgb(33, 111, 107); color: rgb(255, 255, 255); }
.will-type-options button[aria-pressed="true"] { box-shadow: rgba(36, 126, 121, 0.07) 0px 3px 10px; }
.search-heading { font-weight: 600; }
.setting-bubble .search-heading { color: rgb(64, 85, 103); }
.setting-bubble p { color: var(--muted); line-height: 1.75; }
.effect-actions button { min-height: 40px; }
.effect-actions button:hover { background: var(--green-bg); }
@media (max-width: 680px) {
.segmented button { min-height: 44px; }
.will-values .will-value { min-width: 62px; padding: 8px 4px; }
.will-values .will-value b { font-size: 11px; }
.will-row .skill-picture, .will-row .skill-icon { width: 40px; height: 40px; }
}
@media (max-width: 390px) {
.will-values .will-value { min-width: 58px; }
.will-values .will-value b { font-size: 10px; }
.will-layout { gap: 6px; }
.will-row .skill-picture, .will-row .skill-icon { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.segmented::before, .will-values::before, .segmented button, .will-value, .pet-search-results button, .will-type-options button, .team-options button, .effect-actions button { transition: none !important; }
}
body { display: flow-root; min-height: 100vh; background: #80bff3; }
.battle-toolbar { display: flex; align-items: center; justify-content: center; min-height: 92px; margin-bottom: 18px; padding: 7px 14px; background: rgba(248, 250, 253, 0.91); border: 1px solid rgb(214, 221, 235); border-radius: 16px; }
.team-presets { align-items: center; }
.star-mode-toggle { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 76px; min-height: 78px; padding: 8px; border: 1px solid rgb(214, 221, 235); border-radius: 14px; background: rgba(248, 250, 253, 0.91); color: rgb(115, 129, 149); font-size: 12px; font-weight: 650; transition: background-color 160ms, border-color 160ms, color 160ms; }
.star-mode-toggle img { width: 36px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: 0.65; }
.star-mode-toggle span { white-space: nowrap; }
.star-mode-toggle[aria-pressed="true"] { background: var(--star-bg); border-color: rgb(168, 151, 208); color: var(--star); box-shadow: rgba(16, 13, 34, 0.094) 0px 2px 8px; }
.star-mode-toggle[aria-pressed="true"] img { filter: none; opacity: 1; }
.star-mode-toggle:hover { border-color: rgb(180, 166, 211); }
.star-mode-active .star-layer-knob { transition: left 200ms ease-out; }
.star-layer-slider:has(input:active) .star-layer-knob { transition: none; }
.note { color: rgb(212, 219, 232); }
.note a, .note .reset { color: rgb(210, 233, 229); }
.ui-message { color: rgb(238, 228, 255); text-shadow: rgba(17, 24, 39, 0.5) 0px 1px 2px; }
@media (min-aspect-ratio: 1 / 1) and (min-width: 1180px) {
.team-choice { top: var(--team-top,112px); }
}
@media (max-width: 680px) {
.team-presets { align-items: start; }
.battle-toolbar { min-height: 88px; }
.star-mode-toggle { padding: 6px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.star-mode-toggle, .star-mode-active .star-layer-knob { transition: none !important; }
}
.rain-weather-toggle[aria-pressed="true"] { background: rgb(234, 245, 255); border-color: rgb(121, 175, 210); color: rgb(35, 118, 166); box-shadow: rgba(16, 46, 72, 0.094) 0px 2px 8px; }
.rain-weather-toggle:hover { border-color: rgb(121, 175, 210); }
.rain-weather-toggle img { border-radius: 8px; }
.will-icon-placeholder { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 10px; background: rgb(237, 243, 247); color: rgb(101, 124, 143); font-weight: 700; font-size: 20px; }
.team-options { left: 50%; right: auto; width: 100%; min-width: 0; max-width: calc(-24px + 100vw); }
.team-entry { display: grid; border-radius: 9px; }
.team-options .team-name-edit { text-align: left; overflow-wrap: anywhere; }
.team-name-edit small { margin-left: 6px; font-size: 10px; color: var(--muted); }
.team-current { background: rgb(233, 244, 241); }
.team-current .team-name-edit { background: transparent; color: var(--teal); font-weight: 650; }
.team-options .team-select[aria-pressed="true"] { background: var(--teal); color: white; }
.team-rename-form { width: min(360px, 100%); }
.rename-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rename-actions button { border: 1px solid var(--border); background: white; border-radius: 9px; padding: 9px 16px; }
.rename-actions button[type="submit"] { background: var(--teal); border-color: var(--teal); color: white; }
.empty-roster span { color: rgb(139, 154, 167); font-size: 23px; }
.roster button.empty-roster { background: rgba(245, 248, 251, 0.91); border-style: dashed; }
.empty-pet-card { display: grid; place-items: center; min-height: 380px; }
.empty-pet-add { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 0px; background: transparent; color: var(--muted); padding: 24px; }
.empty-pet-add span { font-size: 54px; color: rgb(161, 176, 186); }
.empty-will { display: grid; place-items: center; min-height: 84px; color: var(--muted); font-size: 12px; }
.pet-search-popover, .setting-bubble, .feature-bubble { left: 50%; right: auto; transform: translateX(-50%); width: 100%; max-width: 540px; }
.feature-bubble { width: min(340px, 100%); }
.skill-edit-box:has(.skill-category-grid) { width: min(760px, 100%); }
.skill-category-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); align-items: start; max-height: 55dvh; gap: 12px; }
.skill-category { min-width: 0px; }
.skill-category h3 { position: sticky; top: 0px; background: white; padding: 6px 0px 10px; margin: 0px; font-size: 13px; text-align: center; }
.skill-category-list { display: grid; gap: 7px; }
.skill-category-list button { width: 100%; }
.skill-category-grid p { font-size: 11px; text-align: center; }
.will-type-options { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px; }
.will-type-options button { padding: 10px; aspect-ratio: 1 / 1; border: 1px solid transparent; background: transparent; display: grid; place-items: center; }
.will-type-options img { width: 56px; height: 56px; margin: 0px; object-fit: contain; }
.will-type-options button:hover { background: rgb(240, 247, 246); border-color: rgb(156, 200, 194); }
.will-type-options button[aria-pressed="true"] { background: rgb(231, 244, 240); border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 1px; }
@media (max-width: 680px) {
.pet-search-popover, .setting-bubble, .feature-bubble { position: fixed; top: 50%; left: 50%; right: auto; width: calc(-24px + 100vw); transform: translate(-50%, -50%); max-height: 80dvh; }
.skill-edit-dialog { padding: 12px; }
.skill-edit-box { padding: 14px; }
.skill-category-grid { gap: 6px; }
.skill-category-list button { padding: 9px 4px; font-size: 11px; }
.will-type-options { gap: 10px; }
.will-type-options img { width: 44px; height: 44px; }
.will-type-options button { padding: 5px; }
.empty-pet-card { min-height: 260px; }
}
.team-options { transform: translateX(calc(-50% + var(--menu-shift,0px))); }
.team-options::before { left: calc(50% - 5px - var(--menu-shift,0px)); }
.battle-toolbar { flex-wrap: wrap; gap: 10px; }
.mode-placeholder { opacity: 0.78; }
.mode-placeholder:hover { border-color: rgb(177, 193, 206); }
.mode-placeholder img { filter: none; opacity: 0.8; }
.team-options { width: 100%; }
.team-entry { grid-template-columns: minmax(0px, 1fr) 24px; gap: 2px; }
.team-options .team-name-edit { font-size: 13px; padding: 10px 6px; line-height: 1.45; min-width: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-name-edit small { display: block; margin: 3px 0px 0px; }
.team-options .team-select { display: grid; place-items: center; padding: 8px 0px; }
.team-triangle { display: block; width: 0px; height: 0px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.team-triangle.points-right { border-left: 6px solid currentcolor; }
.team-triangle.points-left { border-right: 6px solid currentcolor; }
.negative-status-controls { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 6px; margin: 6px 0 20px; }
.negative-status-controls button { display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0px; min-height: 32px; height: 32px; line-height: 14px; padding: 6px 3px; background: rgb(248, 250, 252); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; }
.negative-status-controls img { width: 16px; height: 16px; object-fit: contain; filter: grayscale(0.65); opacity: 0.8; }
.buff-pill input { touch-action: none; }
.star-inline-icon { display: block; flex: 0 0 17px; width: 17px; height: 17px; object-fit: contain; }
.star-label { min-width: 0px; }
.skill-card.selected { background: rgb(227, 243, 239); border-color: rgb(36, 126, 121); box-shadow: rgb(36, 126, 121) 0px 0px 0px 1px inset; }
.skill-card.selected .skill-copy strong { color: rgb(25, 93, 89); }
.skill-card[data-selection="guard"] { background: rgb(229, 241, 251); border-color: rgb(53, 125, 173); box-shadow: rgb(53, 125, 173) 0px 0px 0px 1px inset; }
.skill-card[data-selection="guard"] .skill-copy strong { color: rgb(35, 95, 136); }
.skill-card.selected .skill-picture { outline: rgb(36, 126, 121) solid 2px; outline-offset: 2px; border-radius: 11px; }
.skill-card[data-selection="guard"] .skill-picture { outline-color: rgb(53, 125, 173); }
.arena { perspective: 1400px; }
.panel { transform-origin: center 22%; }
.team-choice { transform-origin: center top; }
.motion-ghost { overflow: hidden; }
@media (max-width: 680px) {
.battle-toolbar { gap: 7px; padding: 8px; }
.star-mode-toggle { width: calc(33.3333% - 4.66667px); min-height: 67px; }
.star-mode-toggle img { width: 27px; height: 30px; }
.negative-status-controls, .buff-controls { gap: 4px; }
.negative-status-controls button { flex-direction: row; gap: 2px; font-size: 10px; }
.negative-status-controls img { width: 16px; height: 16px; }
}
.motion-pet-ghost { background: white; border: 1px solid rgb(207, 222, 230); border-radius: var(--popup); padding: 14px; box-shadow: rgba(34, 57, 75, 0.106) 0px 10px 28px; }
.motion-pet-ghost input { width: 100%; border: 1px solid var(--border); border-radius: var(--tile); padding: 11px; background: rgb(250, 252, 254); }

.team-storage-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:14px;color:#d4dbe8;font-size:11px}.team-storage-tools span{margin-right:auto}.team-storage-tools button{background:#f8fafde8;border:1px solid #d6ddeb;border-radius:9px;padding:8px 10px;color:var(--teal);min-height:34px}

.will-slot{min-width:0;transform-origin:center}

.normal-mode-toggle[aria-pressed="true"]{background:#e8f5f2;border-color:var(--teal);color:var(--teal)}
.art-transition-ghost{position:fixed;overflow:hidden;z-index:16;pointer-events:none}
@media(prefers-reduced-motion:reduce){.health,.loss,.roster button{transition:none!important}}

@container(max-width:400px){.buff-pill{padding:5px 2px;font-size:10px;line-height:12px}.buff-pill>span{display:flex;flex-direction:column;gap:1px;align-items:center}}

.will-values:not(:has(.will-active))::before{opacity:0}


/* 2026-10-04: shared icon cards, anchored overlays, optical artwork balance. */
.feature-toggle.is-active{background:#dff4eb;border-color:#39a578;color:#147b55;box-shadow:0 0 0 1px #39a57855}.feature-toggle.is-active .feature-state{color:#147b55;font-weight:700}
.pet-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pet-type-icons{display:inline-flex;gap:5px;align-items:center}.pet-type-icons img{width:20px;height:20px;object-fit:contain}.pet-name-arrow{margin:0}
.skill-card{transition:background-color 160ms,border-color 160ms,box-shadow 160ms}
#battle-popovers{position:fixed;inset:0;pointer-events:none;z-index:90}
#battle-popovers .skill-detail-popover,.skill-detail-popover.motion-ghost{position:fixed;pointer-events:auto;box-sizing:border-box;margin:0;transform:none;max-width:none;padding:9px 13px;overflow:visible;background:#e1ebf3;border:1px solid #9cb3c6;border-radius:16px;box-shadow:0 10px 25px #16395735;color:#344c61;font-size:12px;scrollbar-width:thin}
.skill-detail-popover .search-heading{margin:0 0 3px;font-size:13px;min-height:23px}.skill-detail-popover .search-heading button{width:25px;height:25px;min-height:0;font-size:22px;padding:0}.skill-detail-popover p{margin:2px 0 5px;line-height:1.4}.skill-detail-popover .switch-row{padding:5px 7px;margin:3px 0;border-radius:10px;gap:4px;font-size:12px}.skill-detail-popover .segmented{padding:3px;min-height:29px}.skill-detail-popover .segmented button{min-height:27px;padding:3px 8px;font-size:12px}.skill-detail-popover small{font-size:11px;line-height:1.35}.skill-detail-popover .effect-items{display:none}.skill-detail-popover .effect-actions{margin:4px 0;gap:6px}.skill-detail-popover .effect-actions button{padding:4px 8px;min-height:27px;font-size:12px}
.wish-popover{position:fixed;z-index:100;box-sizing:border-box;background:#fff;border:1px solid #b7ccd8;border-radius:20px;box-shadow:0 14px 38px #18334b40;max-height:calc(100dvh - 16px);overflow:auto;padding:14px}.wish-popover .skill-edit-box{padding:0;width:auto;max-width:none;box-shadow:none;border:0;border-radius:0}.wish-popover .search-heading{margin-bottom:8px;font-size:14px}.wish-popover .search-heading button{width:28px;height:28px;min-height:0;font-size:24px}.wish-popover .will-type-options{gap:9px;grid-template-columns:repeat(4,minmax(0,1fr))}.wish-popover .will-type-options button{padding:8px;min-height:0;aspect-ratio:1;border-radius:13px}.wish-popover .will-type-options img{width:45px;height:45px;max-width:100%}
.skill-edit-box:has(.skill-category-grid){width:min(557px,calc(100vw - 24px));max-width:none}.skill-category-grid{max-height:65dvh}.skill-category h3{position:sticky;top:0;background:#fff;z-index:1;padding:8px 0;margin:0 0 8px}.skill-category-list .skill-option{display:flex;text-align:left;align-items:center;gap:9px;padding:9px;min-height:77px}.skill-option-art{position:relative;flex:0 0 51px}.skill-option-art>img{width:51px;height:51px;border-radius:10px;object-fit:contain}.skill-option-art small{position:absolute;bottom:0;left:0;padding:1px 5px;background:#243d54df;color:white;border-radius:0 6px 0 9px;font-size:11px}.skill-option-copy{display:flex;flex-direction:column;gap:6px;min-width:0}.skill-option-copy strong{font-size:14px;overflow-wrap:anywhere}.skill-option-copy>span{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:11px;color:#7890a1}.skill-option-copy>span img{width:15px;height:15px}.skill-option[aria-pressed=true] .skill-option-copy>span{color:#dcefeb}
@media(max-width:680px){.pet-type-icons img{width:17px;height:17px}.pet-name{gap:5px}.skill-category-grid{gap:7px}.skill-category-list .skill-option{padding:6px;gap:5px;min-height:84px;flex-wrap:wrap}.skill-option-art{flex-basis:34px}.skill-option-art>img{width:34px;height:34px}.skill-option-art small{font-size:9px;padding:0 3px}.skill-option-copy strong{font-size:11px}.skill-option-copy>span{font-size:10px}.skill-category h3{font-size:13px}}
@media(prefers-reduced-motion:reduce){.skill-card{transition:none}}

/* Keep a simple condition's choices visible within one skill-card height. */
.skill-detail-popover .search-heading{min-height:18px;margin:0;font-size:12px}.skill-detail-popover .search-heading button{width:20px;height:18px;font-size:20px}.skill-detail-popover p{margin:2px 0;line-height:1.25;font-size:11px}.skill-detail-popover .switch-row{flex-direction:row;align-items:center;padding:2px 4px;margin:2px 0;gap:6px;font-size:11px}.skill-detail-popover .switch-row>span{flex:0 0 auto;max-width:46%}.skill-detail-popover .segmented{flex:1 1 auto;width:auto;min-height:23px;padding:2px}.skill-detail-popover .segmented button{min-height:21px;padding:2px 6px;font-size:11px}

/* All layer-based features retain the capsule position when expanding. */
.compact-feature-anchor .feature-state,.compact-feature-badge .feature-state{min-width:28px;text-align:right;white-space:nowrap}
#compact-feature-root{position:fixed;inset:0;z-index:95;pointer-events:none}
.compact-feature-popup{position:fixed;pointer-events:auto;color:var(--muted)}
.compact-feature-backdrop{position:absolute;inset:0;background:#e5edf3;border:1px solid #c8d7e2;border-radius:20px;box-shadow:0 9px 24px #24394b26}
.compact-feature-badge{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 9px;border:1px solid var(--border);border-radius:999px;background:white;color:var(--muted);font-size:11px;white-space:nowrap}
.compact-feature-badge img{width:24px;height:24px;object-fit:contain;border-radius:50%}
.compact-feature-badge.is-active{background:#dff4eb;border-color:#39a578;color:#147b55;box-shadow:0 0 0 1px #39a57855}
.compact-feature-badge.is-active .feature-state{color:#147b55;font-weight:700}
.compact-feature-slider{position:absolute;left:16px;width:calc(100% - 32px);margin:0;accent-color:var(--green);height:24px;cursor:pointer}
.compact-feature-popup.motion-ghost .compact-feature-badge{visibility:hidden}
.hp-title .hp-maximum{text-align:left}.hp-title [id^="hp-value-"]{text-align:right;margin-left:auto}

/* Layer-based feature descriptions and subtle internal guides. */
.compact-feature-description{position:absolute;left:16px;right:16px;margin:0;font-size:12px;line-height:1.6;color:#788fa3;overflow-wrap:anywhere}

/* Shared layer sliders and 寂灭骨龙 choice panels. */
.layer-feature-popup .compact-feature-slider{appearance:none;-webkit-appearance:none;background:transparent;outline-offset:3px}
.layer-feature-popup .compact-feature-slider::-webkit-slider-runnable-track{height:8px;border:1px solid #b5c2c8;border-radius:999px;background-image:var(--feature-ticks),linear-gradient(to right,#16985b 0 var(--feature-layer),#f0f2f3 var(--feature-layer) 100%);background-size:calc(100% - 16px) 8px,100% 100%;background-position:center;background-repeat:no-repeat}
.layer-feature-popup .compact-feature-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border:0;border-radius:50%;background:#16985b}
.layer-feature-popup .compact-feature-slider::-moz-range-track{height:8px;border:1px solid #b5c2c8;border-radius:999px;background-image:var(--feature-ticks),linear-gradient(to right,#16985b 0 var(--feature-layer),#f0f2f3 var(--feature-layer) 100%);background-size:calc(100% - 16px) 8px,100% 100%;background-position:center;background-repeat:no-repeat}
.layer-feature-popup .compact-feature-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#16985b}
#battle-popovers .skill-choice-panel,.skill-choice-panel.motion-ghost{display:flex;flex-direction:column;gap:2px;padding:6px 10px;overflow:visible;max-height:none}
.skill-choice-panel .search-heading{flex:0 0 auto;min-height:17px;font-size:12px;line-height:17px}
.skill-choice-panel p{flex:1 1 auto;min-height:0;margin:0;overflow:visible;font-size:12px;line-height:1.35;scrollbar-width:thin}
.skill-choice-panel .switch-row{flex:0 0 auto;flex-direction:row;align-items:center;margin:0;padding:2px 5px;gap:8px;font-size:12px;min-width:0}
.skill-choice-panel .switch-row>span{flex:0 0 auto;max-width:46%;overflow-wrap:anywhere}
.skill-choice-panel .switch-row .segmented{flex:1 1 0;min-width:0;width:auto;min-height:25px;padding:2px}
.skill-choice-panel .segmented button{min-height:23px;padding:2px 5px;font-size:12px;white-space:normal}
@media(max-width:680px){.skill-choice-panel p,.skill-choice-panel .switch-row,.skill-choice-panel .segmented button{font-size:11px}.skill-choice-panel .switch-row{gap:4px}}

/* Only 寂灭骨龙: a description and one direct pair of choice buttons. */
#battle-popovers .skill-choice-panel,.skill-choice-panel.motion-ghost{padding:8px 10px;gap:4px}
.skill-choice-panel .skill-choice-close{position:absolute;top:5px;right:7px;width:22px;height:22px;min-height:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:22px}
.skill-choice-panel p{padding-right:24px;font-size:12px;line-height:1.4}
.skill-choice-panel>.segmented{flex:0 0 auto;width:100%;min-height:32px;padding:3px;gap:4px;border:0;border-radius:11px;background:#edf0f6}
.skill-choice-panel>.segmented:before{top:3px;bottom:3px;left:3px;width:calc(50% - 5px);border-radius:8px}
.skill-choice-panel>.segmented button{min-height:26px;padding:3px 8px;font-size:12px;line-height:20px;font-weight:600}
@media(max-width:680px){.skill-choice-panel p{font-size:11px}.skill-choice-panel>.segmented button{font-size:12px}}

/* 寂灭骨龙: center description vertically above the choice buttons. */
.skill-choice-panel>p{display:flex;align-items:center}
.skill-choice-panel>p>span{display:block;width:100%}

/* Fourth-slot empty trial for 绒光优优; no placeholder skill data is stored. */
.empty-skill-card{border-style:dashed;background:#f8fbfd}
.skill-add-slot{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:0;border:0;background:transparent;color:#7c96a6;text-align:left}
.skill-add-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:12px;background:#eaf1f5;font-size:34px;font-weight:300;line-height:1}
.skill-add-slot strong{font-size:14px;font-weight:600}
.skill-add-slot:hover{color:var(--teal)}
.skill-empty-option{display:block;width:100%;margin:0 0 10px;padding:10px;border:1px dashed #bfd0dc;border-radius:12px;background:#f4f8fb;color:#718b9e;font-size:13px}
.skill-empty-option[aria-pressed="true"]{background:#e8f5f2;border-color:#7cb5ac;color:var(--teal)}

/* Team menu: centered names only. */
.team-options .team-entry{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:5px 0;border-radius:10px}
.team-options .team-name-edit{text-align:center;padding:12px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;border:0;background:transparent;font-size:13px;line-height:1.45}
.team-options .common-mode-entry .team-name-edit{padding:12px 3px;color:#8999a7}
.skill-card.holding::after{content:"";position:absolute;bottom:6px;left:14px;right:14px;height:3px;width:auto;background:var(--teal);border-radius:999px;transform:scaleX(0);transform-origin:left center;animation:skill-hold-fill 400ms linear forwards;pointer-events:none}
@keyframes skill-hold-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.skill-card.holding::after{animation:none;transform:scaleX(1)}}

/* Star mode background extracted from 小新星陨伤害计算器-S4-V2.46-20261003.html. */
html.star-mode-active,html.star-mode-active body{background:#a0b2fd;background-image:none}
.star-mode-background{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;--roco-pattern-size:560px;background:transparent;contain:strict;isolation:isolate;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 100px,#000 calc(100% - 100px),transparent 100%)}
.star-mode-background::before{content:"";position:absolute;inset:calc(-14vmax - var(--roco-pattern-size));background-image:url("assets/backgrounds/starfall-pattern.svg");background-color:transparent;background-repeat:repeat;background-size:var(--roco-pattern-size) var(--roco-pattern-size);background-position:0 0;opacity:.16;transform-origin:center;animation:star-mode-pattern-drift 44s linear infinite;will-change:transform}
@keyframes star-mode-pattern-drift{from{transform:rotate(-8deg) translate(0,0)}to{transform:rotate(-8deg) translate(var(--roco-pattern-size),calc(0px - var(--roco-pattern-size)))}}
@media(prefers-reduced-motion:reduce){.star-mode-background::before{animation:none;transform:rotate(-8deg);will-change:auto}}

/* Water theme extracted from https://wiki.biligame.com/nrc/水蓝蓝 (PetDex_Flow_5.png). Rain takes visual priority while star calculations remain active. */
html.rain-mode-active,html.rain-mode-active body{background:#65aaff;background-image:none}
.rain-mode-background{--roco-pattern-size:280px;background:#65aaff}
.rain-mode-background::before{background-image:url("assets/backgrounds/water-pattern.png");animation-name:rain-pattern-drift;animation-duration:22s}
.rain-mode-background::after{content:none}
@keyframes rain-pattern-drift{from{transform:rotate(-8deg) translate(0,0)}to{transform:rotate(-8deg) translate(var(--roco-pattern-size),calc(0px - var(--roco-pattern-size)))}}
@media(prefers-reduced-motion:reduce){.rain-mode-background::before{animation:none}}
.inherited-feature-parent{white-space:nowrap}

/* Help on the left, modes in the middle, weather on the right. */
.battle-toolbar{display:grid;grid-template-columns:minmax(70px,1fr) auto minmax(280px,1fr);gap:14px}
.toolbar-modes,.toolbar-weather{display:flex;align-items:center;gap:8px;min-width:0}
.toolbar-modes{justify-content:center}.toolbar-weather{justify-content:flex-end}
.battle-toolbar .star-mode-toggle{width:64px;min-height:66px;padding:6px;font-size:11px}
.battle-toolbar .operations-toggle{width:70px;justify-self:start;color:var(--teal)}
.operations-toggle svg{width:32px;height:34px}.battle-toolbar .star-mode-toggle img{width:30px;height:34px}
.weather-placeholder img{filter:none;opacity:.7}.weather-placeholder:disabled{cursor:default;opacity:.65}
.operations-help{position:fixed;z-index:100;max-height:calc(100dvh - 24px);overflow:auto;background:#edf3f7;border:1px solid #c8d7e2;border-radius:18px;box-shadow:0 12px 32px #24394b26;padding:16px;color:var(--muted)}
.operations-help .search-heading{margin:0 0 10px}.operations-help dl{margin:0;display:grid;gap:10px}.operations-help dl>div{display:grid;grid-template-columns:76px 1fr;gap:10px;line-height:1.65;font-size:12px}.operations-help dt{font-weight:650;color:#365264}.operations-help dd{margin:0}
@media(min-width:1180px) and (min-aspect-ratio:1/1){
 main{margin-top:12px}.battle-toolbar{margin-bottom:12px;min-height:80px}
 .panel{padding:14px}.pet-card{padding:12px;margin-bottom:12px}.art{height:var(--desktop-art-height,180px)}.empty-pet-card{min-height:calc(var(--desktop-art-height,180px) + 72px)}
 .pet-name-row{margin-top:8px}.pet-name{font-size:clamp(19px,1.4vw,24px)}
 .hp-title{font-size:13px;margin-bottom:6px}.hp-track{height:11px}
 .star-controls{padding:10px;margin:10px 0 12px}.star-layer-slider{height:28px;margin-top:8px;padding:0 14px}.star-layer-knob{width:28px;height:28px;left:calc(14px + (100% - 28px)*var(--layer));font-size:12px}.star-layer-track{top:11px;left:14px;right:14px}.star-layer-slider input{height:28px}
 .stats-grid{gap:6px}.stat-tile{min-height:42px;padding:6px 10px}.stat-number{font-size:23px}.nature-arrow{height:26px}
 .buff-controls{margin-top:6px}.buff-pill{min-height:28px;padding:6px 3px}.negative-status-controls{margin:6px 0 10px}.negative-status-controls button{min-height:28px;height:28px;padding:5px 3px}
 .moves{gap:6px}.skill-card{padding:6px 10px}.skill-preview,.will-layout{min-height:46px}.skill-picture,.skill-icon{width:44px;height:44px}.skill-result{padding:4px 7px}.skill-result b{margin-top:3px}.skill-copy strong{font-size:13px}.skill-meta{margin-top:3px;font-size:11px}
 .skill-add-slot{min-height:46px}.skill-add-icon{flex-basis:44px;width:44px;height:44px;font-size:28px}
 .will-panel{margin-top:10px}.empty-will{min-height:60px}.summary{margin-top:10px;padding:12px 18px}.summary strong{font-size:17px}.summary output{font-size:22px}
}
@media(min-width:681px) and (max-width:1179px){.battle-toolbar{grid-template-columns:auto minmax(0,1fr)}.toolbar-modes{justify-content:flex-end;flex-wrap:wrap}.toolbar-weather{grid-column:1/-1}}
@media(max-width:680px){.battle-toolbar{grid-template-columns:1fr;gap:8px}.toolbar-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.toolbar-weather{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.toolbar-modes .star-mode-toggle,.toolbar-weather .star-mode-toggle{width:100%}.operations-help dl>div{grid-template-columns:62px 1fr;gap:8px}.operations-help{padding:14px}}

/* Short desktop windows retain all four skill slots and the result summary. */
@media(min-width:1180px) and (min-aspect-ratio:1/1) and (max-height:980px){
 .battle-toolbar{min-height:64px;margin-bottom:8px}.battle-toolbar .star-mode-toggle{min-height:50px;padding:4px;gap:4px}.battle-toolbar .star-mode-toggle img,.operations-toggle svg{height:24px;width:26px}
 .panel{padding:10px}.pet-card{padding:8px;margin-bottom:8px}.pet-name-row{min-height:32px;margin-top:6px}.feature-toggle{padding:4px 7px}.feature-toggle img{width:20px;height:20px}
 .star-controls{padding:8px;margin:8px 0}.star-layer-slider{height:24px;margin-top:6px;padding:0 12px}.star-layer-knob{width:24px;height:24px;left:calc(12px + (100% - 24px)*var(--layer))}.star-layer-track{top:9px;left:12px;right:12px}.star-layer-slider input{height:24px}
 .stats-grid{gap:4px}.stat-tile{min-height:36px;padding:4px 8px}.stat-number{font-size:22px}.nature-arrow{height:24px}
 .buff-controls{margin-top:4px}.buff-pill{min-height:24px;padding:4px 3px}.negative-status-controls{margin:4px 0 8px}.negative-status-controls button{min-height:24px;height:24px;padding:3px}
 .moves{gap:4px}.skill-card{padding:4px 8px}.skill-preview,.will-layout{min-height:38px}.skill-picture,.skill-icon{width:36px;height:36px}.skill-result{padding:3px 7px}.skill-result b{margin-top:2px}.skill-add-slot{min-height:38px}.skill-add-icon{width:36px;height:36px;flex-basis:36px}
 .will-panel{margin-top:8px}.will-values .will-value{padding:4px 5px}.summary{padding:8px 16px;margin-top:8px}
}
@media(min-width:1180px) and (min-aspect-ratio:1/1) and (max-height:820px){
 main{margin-top:8px}.battle-toolbar{min-height:58px;padding:5px 12px;margin-bottom:6px}.battle-toolbar .star-mode-toggle{min-height:46px}.battle-toolbar .star-mode-toggle img,.operations-toggle svg{height:21px;width:24px}
 .panel{padding:8px}.pet-card{padding:6px;margin-bottom:6px}.pet-name-row{margin-top:4px}.pet-name{font-size:19px}.hp-title{font-size:12px;margin-bottom:4px}.hp-track{height:9px}
 .star-controls{padding:6px;margin:6px 0}.star-layer-slider{height:20px;margin-top:4px;padding:0 10px}.star-layer-knob{width:20px;height:20px;left:calc(10px + (100% - 20px)*var(--layer));font-size:11px}.star-layer-track{top:7px;left:10px;right:10px}.star-layer-slider input{height:20px}
 .stat-tile{min-height:32px;padding:2px 8px}.stat-number{font-size:20px}.nature-arrow{height:22px}
 .buff-pill{min-height:22px;padding:3px}.negative-status-controls{margin-bottom:6px}.negative-status-controls button{min-height:22px;height:22px;padding:2px}
 .skill-card{padding:3px 8px}.skill-preview,.will-layout{min-height:32px}.skill-picture,.skill-icon{width:32px;height:32px}.skill-result{padding:2px 7px;line-height:1.2}.skill-result small{font-size:10px}.skill-result b{font-size:12px}.skill-meta{margin-top:2px}.skill-add-slot{min-height:32px}.skill-add-icon{width:32px;height:32px;flex-basis:32px}
 .will-panel{margin-top:6px}.summary{margin-top:6px;padding:6px 14px}.summary strong{font-size:15px}.summary small{font-size:10px}.summary output{font-size:20px}
}

/* Natural content height with equal space above and below the details. */
#battle-popovers .skill-detail-popover,.skill-detail-popover.motion-ghost{display:flex;flex-direction:column;gap:6px;padding:12px 13px;overflow:visible}
.skill-detail-popover>.search-heading,.skill-detail-popover>p,.skill-detail-popover>.coverage-note,.skill-detail-popover>.switch-row,.skill-detail-popover>.effect-actions{margin:0}
#battle-popovers .skill-choice-panel,.skill-choice-panel.motion-ghost{gap:8px;padding:12px 13px}
.skill-choice-panel>p{flex:0 0 auto;min-height:auto;display:block;overflow:visible;padding-right:26px;line-height:1.4;margin:0}
.skill-choice-panel>.segmented{margin:0;flex:0 0 auto}
.skill-choice-panel .skill-choice-close{top:10px;right:10px}

/* Redistribute portrait space into the four skill slots. */
.moves>.skill-card>.skill-preview,.moves>.skill-card>.skill-add-slot{box-sizing:content-box;padding-block:var(--skill-extra-padding,0px)}

/* Scale normal skill contents into their existing card height with equal edge spacing. */
.moves>.sized-skill{height:var(--skill-height);padding:var(--skill-inset)}
.moves>.sized-skill>.skill-preview,.moves>.sized-skill>.skill-add-slot{box-sizing:border-box;height:var(--skill-content);min-height:0;padding:0}
.moves>.sized-skill .skill-picture,.moves>.sized-skill .skill-icon,.moves>.sized-skill .skill-add-icon{width:var(--skill-content);height:var(--skill-content)}
.moves>.sized-skill .skill-add-icon{flex-basis:var(--skill-content);font-size:var(--skill-plus)}
.moves>.sized-skill .skill-icon-toggle{display:block;width:100%;height:100%}
.moves>.sized-skill .skill-copy strong,.moves>.sized-skill .skill-add-slot strong{font-size:var(--skill-name)}
.moves>.sized-skill .skill-meta{font-size:var(--skill-meta);margin-top:var(--skill-metaGap)}
.moves>.sized-skill .swift-tag{font-size:var(--skill-tag)}
.moves>.sized-skill .skill-result{display:flex;flex-direction:column;justify-content:center;height:var(--skill-content);min-width:var(--skill-resultMin);max-width:none;width:max-content;padding:0 var(--skill-resultPadding)}
.moves>.sized-skill .skill-result small{font-size:var(--skill-small)}
.moves>.sized-skill .skill-result b{font-size:var(--skill-value);margin-top:var(--skill-valueGap)}

/* Unified skill typography and quiet non-buff/wish presentation. */
.moves>.skill-display.sized-skill .skill-result>small{display:none}
.moves>.skill-display.sized-skill .skill-result>b{margin-top:0}
.moves>.skill-display.sized-skill .skill-copy strong{font-size:calc(var(--skill-name)*5/6)}
.moves>.skill-display.sized-skill .skill-meta{font-size:calc(var(--skill-meta)*5/6)}
.moves>.skill-display.sized-skill .swift-tag{font-size:calc(var(--skill-tag)*5/6)}
.moves>.skill-display.sized-skill .skill-result b{font-size:calc(var(--skill-value)*5/6)}
.moves>.skill-display.subdued-status{--subdued-skill:#a6adb3}
.moves>.skill-display.subdued-status .skill-meta,.moves>.skill-display.subdued-status .skill-result,.moves>.skill-display.subdued-status .swift-tag{color:var(--subdued-skill)}
.moves>.skill-display.subdued-status .skill-result{background:#f1f3f4;border-color:#e0e4e7}
.will-display:not(.selected) .skill-meta,.will-display .will-values .will-value[aria-pressed="false"]{color:#a6adb3}
.will-display:not(.selected) .will-values{background:#f1f3f4;border-color:#e0e4e7}

/* Keep the two modes centered independently of the rain button. */
.battle-toolbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.toolbar-modes{grid-column:2;display:flex;justify-content:center;flex-wrap:nowrap}
.toolbar-weather{grid-column:3;display:flex;justify-content:flex-end}
.toolbar-modes .star-mode-toggle,.toolbar-weather .star-mode-toggle{width:64px}
@media(max-width:680px){.battle-toolbar{gap:6px;padding:8px}.toolbar-modes{gap:6px}.toolbar-modes .star-mode-toggle,.toolbar-weather .star-mode-toggle{width:58px}}

/* Match each pair of controls to one attribute tile. */
.stats-config{--attribute-gap:8px}
.stats-grid{gap:var(--attribute-gap)}
.buff-controls,.negative-status-controls{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--attribute-gap)}
.battle-toolbar .operations-toggle{grid-column:1;grid-row:1;width:64px;justify-self:start}
.toolbar-modes,.toolbar-weather{grid-row:1}
@media(min-width:1180px) and (min-aspect-ratio:1/1){.stats-config{--attribute-gap:6px}}
@media(min-width:1180px) and (min-aspect-ratio:1/1) and (max-height:980px){.stats-config{--attribute-gap:4px}}
@media(max-width:680px){.battle-toolbar .operations-toggle{width:58px}.stats-config{--attribute-gap:8px}}

.negative-status-controls .meng-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;border:1px solid var(--border);border-radius:999px;background:#f8fafc;color:var(--muted);font-size:11px;cursor:ew-resize;touch-action:none}
.meng-pill input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:none}
.negative-status-controls [aria-pressed="true"],.meng-pill:has(input:not([value="0"])){background:#eef7f3;border-color:#83c9b7;color:var(--teal)}
.negative-status-controls button:disabled,.meng-pill[aria-disabled="true"]{opacity:.5;cursor:default}

.meng-power-bonus.inactive{color:#a6adb3}
.negative-status-controls [data-boss-side][aria-pressed="true"] img,.negative-status-controls .meng-pill[aria-pressed="true"] img{filter:none;opacity:1}
.moon-layer-control{display:grid;grid-template-columns:auto minmax(70px,1fr) auto;align-items:center;gap:12px}
.moon-layer-control>span,.moon-layer-control>small{white-space:nowrap}.moon-layer-control>small{font-weight:400}.moon-layer-control input{width:100%;min-width:0}
@media(max-width:480px){.moon-layer-control{grid-template-columns:auto minmax(70px,1fr)}.moon-layer-control>small{grid-column:1/-1}}

/* Match normal-mode circle diameter and preserve teal/white artwork. */
.battle-toolbar .operations-toggle img{filter:none;opacity:1}

/* Normal element theme, using the same drift/fade behavior as rain. */
html.normal-mode-active,html.normal-mode-active body{background:#80bff3;background-image:none}
.normal-mode-background{--roco-pattern-size:280px;background:#80bff3}
.normal-mode-background::before{background-image:url("assets/backgrounds/normal-pattern.png");animation-name:rain-pattern-drift;animation-duration:22s}
.normal-mode-background::after{content:none}
@media(prefers-reduced-motion:reduce){.normal-mode-background::before{animation:none}}

/* Star mode uses the WIKI phantom theme with the shared rain motion/fade. */
html.star-mode-active,html.star-mode-active body{background:#9dabff;background-image:none}
.star-mode-active .star-mode-background{--roco-pattern-size:280px;background:#9dabff}
.star-mode-active .star-mode-background::before{background-image:url("assets/backgrounds/phantom-pattern.png");animation-name:rain-pattern-drift;animation-duration:22s}
.star-mode-active .star-mode-background::after{content:none}
@media(prefers-reduced-motion:reduce){.star-mode-active .star-mode-background::before{animation:none}}

/* Velocity reduced to 70%: 22 / .7 seconds per cycle. */
.normal-mode-background::before,.rain-mode-background::before,.star-mode-active .star-mode-background::before{animation-duration:31.428571s}

.swarm-controls{display:grid;gap:10px}.swarm-control{display:grid;grid-template-columns:100px minmax(70px,1fr) 130px;gap:10px;align-items:center}.swarm-control input{width:100%;min-width:0}.swarm-control output{font-size:12px;color:#657c8f;text-align:right}.swarm-controls>small{font-size:12px;color:#7b8fa3}.swarm-results{display:grid;gap:3px;font-size:12px!important;line-height:1.3;font-weight:600}.swarm-skill{color:#8b959e}.swarm-poison{color:#8067b3}.swarm-summary{padding:8px 12px;border-radius:12px;background:#fff5f6;color:#df5362}.swarm-summary .swarm-results{font-size:14px!important}@media(max-width:480px){.swarm-control{grid-template-columns:82px minmax(50px,1fr) 100px;gap:6px}.swarm-control output{font-size:11px}}

/* Compact swarm panel and shared skill sizing. */
#battle-popovers .swarm-panel,.swarm-panel.motion-ghost{background:#39532B;border-color:#39532B;color:#F7E9C0}
.swarm-panel .search-heading,.swarm-panel .search-heading button,.swarm-panel p,.swarm-panel .swarm-control output,.swarm-panel .swarm-control span{color:#F7E9C0}
.swarm-controls{gap:10px}.swarm-control{grid-template-columns:45px minmax(70px,1fr) 110px}
.swarm-slider{appearance:none;-webkit-appearance:none;background:transparent;height:22px;margin:0;cursor:pointer}
.swarm-slider::-webkit-slider-runnable-track{height:8px;border:1px solid #b5c2c8;border-radius:999px;background-image:var(--swarm-ticks),linear-gradient(to right,#16985b 0 var(--swarm-layer),#f0f2f3 var(--swarm-layer) 100%);background-size:calc(100% - 16px) 8px,100% 100%;background-position:center;background-repeat:no-repeat}
.swarm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border:0;border-radius:50%;background:#16985b}
.swarm-slider::-moz-range-track{height:8px;border:1px solid #b5c2c8;border-radius:999px;background-image:var(--swarm-ticks),linear-gradient(to right,#16985b 0 var(--swarm-layer),#f0f2f3 var(--swarm-layer) 100%);background-size:calc(100% - 16px) 8px,100% 100%;background-position:center;background-repeat:no-repeat}
.swarm-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#16985b}
.swarm-results>span{font-size:12px!important;font-weight:600;line-height:1.3}
@media(max-width:480px){.swarm-control{grid-template-columns:35px minmax(50px,1fr) 100px;gap:6px}}

.swarm-slider::-webkit-slider-runnable-track{background-image:var(--swarm-ticks),linear-gradient(to right,#9ECE22 0 var(--swarm-layer),#f0f2f3 var(--swarm-layer) 100%);background-size:calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,100% 100%}
.swarm-slider::-moz-range-track{background-image:var(--swarm-ticks),linear-gradient(to right,#9ECE22 0 var(--swarm-layer),#f0f2f3 var(--swarm-layer) 100%);background-size:calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,100% 100%}
.swarm-slider::-webkit-slider-thumb{background:#9ECE22}.swarm-slider::-moz-range-thumb{background:#9ECE22}
.swarm-actions{display:flex;justify-content:flex-end}.swarm-actions button{background:transparent;border:1px solid #F7E9C0;border-radius:999px;color:#F7E9C0;padding:4px 10px;font-size:12px}
.poison-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:28px;padding:3px;border:1px solid var(--border);border-radius:999px;background:#f8fafc;color:var(--muted);font-size:11px;white-space:nowrap}.poison-pill input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;touch-action:none}.negative-status-controls .poison-pill.active{color:#8067b3;background:#f1ebfa;border-color:#bba7da}.negative-status-controls .poison-pill.active img{filter:none;opacity:1}.poison-loss{position:absolute;top:0;height:100%;background:#8067b3;transition:left 240ms ease-out,width 240ms ease-out;pointer-events:none}

.energy-layer-control{display:grid;grid-template-columns:auto minmax(70px,1fr) auto;align-items:center;gap:12px}.energy-layer-control>span,.energy-layer-control>small{white-space:nowrap}.ticked-skill-slider{appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:22px;background:transparent;margin:0;cursor:pointer}.ticked-skill-slider::-webkit-slider-runnable-track{height:8px;border:1px solid #b5c2c8;border-radius:999px;background-image:var(--skill-range-ticks),linear-gradient(to right,#16985b 0 var(--skill-range-fill),#f0f2f3 var(--skill-range-fill) 100%);background-size:calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,100% 100%;background-position:center;background-repeat:no-repeat}.ticked-skill-slider::-moz-range-track{height:8px;border:1px solid #b5c2c8;border-radius:999px;background-image:var(--skill-range-ticks),linear-gradient(to right,#16985b 0 var(--skill-range-fill),#f0f2f3 var(--skill-range-fill) 100%);background-size:calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,calc(100% - 16px) 8px,100% 100%;background-position:center;background-repeat:no-repeat}.ticked-skill-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border:0;border-radius:50%;background:#16985b}.ticked-skill-slider::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#16985b}

.pet-type-filters{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin:12px 0}.pet-type-filters button{display:grid;place-items:center;min-width:0;height:36px;padding:4px;border:1px solid var(--border);border-radius:10px;background:#f8fafc}.pet-type-filters img{width:23px;height:23px;object-fit:contain}.pet-type-filters button[aria-pressed="true"]{border-color:var(--teal);background:#e4f3ee}.pet-index-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:42dvh;overflow:auto}.pet-index-results .pet-result-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;background:#f8fafc;color:#344c61;text-align:left;padding:5px 9px 5px 5px;min-width:0}.pet-head-circle{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:50%;background:#e8e5d9;border:1px solid #d8d3c3;overflow:hidden}.pet-head-circle img{width:88%;height:88%;object-fit:contain}.pet-result-pill>span:last-child{overflow-wrap:anywhere;font-size:12px}.pet-index-results .search-empty{grid-column:1/-1}.roster-avatar{object-fit:contain}@media(max-width:400px){.pet-type-filters{gap:3px}.pet-type-filters img{width:20px;height:20px}.pet-result-pill>span:last-child{font-size:11px}}

/* Keep wish previews below the fighter's pet selector stacking context. */
.will-panel{position:relative;z-index:0}.arena{position:relative;z-index:1}
.pet-search-row{display:flex;align-items:center;gap:8px}.pet-search-row input{flex:1;min-width:0;width:0}.pet-search-scope{flex:0 0 170px;width:170px}.pet-search-scope button{min-height:32px;padding:5px 3px;font-size:11px;white-space:nowrap}
@media(max-width:420px){.pet-search-scope{flex-basis:142px;width:142px}.pet-search-row{gap:4px}.pet-search-row input{font-size:11px;padding:8px}}

.pet-index-results{align-items:start}.pet-form-group{min-width:0;width:100%}.pet-form-group>summary{cursor:pointer;list-style:none}.pet-form-group>summary::-webkit-details-marker{display:none}.pet-form-group>summary small{margin-left:auto;white-space:nowrap;font-size:10px;color:#7890a1}.pet-group-arrow{font-size:15px!important;transition:transform 160ms}.pet-form-group[open] .pet-group-arrow{transform:rotate(180deg)}.pet-form-list{width:100%;box-sizing:border-box;display:grid;gap:5px;margin-top:5px;padding:6px;border-radius:16px;background:#dce9e8}.pet-form-list .pet-result-pill{width:100%;background:#e5eeee;border-color:#c2d7d4}.pet-form-group[open]>summary{background:#e4f3ee;border-color:var(--teal)}

.pet-search-popover{background:#e8eff3}.team-menu{min-width:0;width:84px;max-width:100%}.team-options .team-name-edit{overflow:visible;text-overflow:clip;white-space:nowrap;font-size:13px}.team-options{min-width:0}.footer-placeholders{display:flex;align-items:center;gap:8px;margin-right:auto}.footer-placeholders button{white-space:nowrap}.team-storage-tools{flex-wrap:wrap}#ui-message[hidden],#team-save-status[hidden],#reset[hidden]{display:none!important}

.team-menu>.swap-roles{width:100%;box-sizing:border-box;padding:8px 5px;font-size:11px;text-align:center}.team-options .team-name-edit{font-size:11px;padding:12px 2px;box-sizing:border-box}.team-options{box-sizing:border-box}

.single-reset-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}.roster .single-reset-circle{background:#f5f8fa;color:var(--teal);font-size:25px;border-color:#cbdedc}.roster .single-reset-confirm{width:76px;height:auto;min-height:32px;flex-basis:auto;border-radius:12px;background:#e1efea;color:var(--teal);font-size:11px;white-space:nowrap;padding:8px 3px;animation:single-reset-drop 180ms ease-out}@keyframes single-reset-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.pet-favorite-placeholder{flex:0 0 24px;width:24px;height:24px;padding:2px;border:0;background:transparent;color:#a5b5b4;margin-left:3px}.pet-favorite-placeholder svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}.pet-name-row .pet-name{margin-right:0}.pet-name-row .pet-favorite-placeholder+*{margin-left:auto}@media(prefers-reduced-motion:reduce){.single-reset-confirm{animation:none!important}}

.pet-favorite-placeholder[aria-pressed=true]{color:#dcae3d}.pet-favorite-placeholder[aria-pressed=true] svg{fill:#f4cf64;stroke:#c69928}.collection-empty{font-size:11px;color:#536d79;white-space:nowrap}.favorite-limit-note{font-size:10px;color:#bc714d}.roster:has([data-collection-pet]){max-height:70dvh;overflow-y:auto;scrollbar-width:thin}.roster [data-collection-pet][aria-pressed=true]{outline:3px solid var(--teal);outline-offset:1px}

.reset-default-warning{width:min(420px,100%);box-sizing:border-box;background:#fff2f2;border:2px solid #db5e68;border-radius:20px;color:#9d343e;padding:22px;box-shadow:0 12px 35px #7c273b35}.reset-default-warning strong{font-size:18px}.reset-default-warning p{font-size:13px;line-height:1.7}.reset-default-warning>div{display:flex;justify-content:flex-end;gap:10px}.reset-default-warning button{border:1px solid #df9ba1;background:white;color:#9d343e;border-radius:10px;padding:9px 13px}.reset-default-warning [data-default-confirm]{background:#cf4d59;color:white}

.roster .roster-clear-circle{background:#fff0f1;border-color:#e7a3a8;color:#ce4b57;font-size:25px}.reset-default-warning [data-clear-confirm]{background:#cf4d59;color:white}.reset-default-warning>strong+div{margin-top:22px}

.roster .team-clear-confirm{background:#cf4d59;color:#fff;border-color:#cf4d59}

.roster .reset-icon{width:24px;height:24px;display:block;fill:currentColor;pointer-events:none}

.battle-toolbar button,.team-menu>.swap-roles,.team-options button{font-family:SSDunDunTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:400}

.battle-toolbar .star-mode-toggle>span{position:relative;top:-3px}.team-menu>.swap-roles,.team-options .team-name-edit{font-size:12px}

#result-title{font-family:SSDunDunTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:400}


:root{font-family:JiangChengYuanTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:500}
body,button,input,textarea,select{font-family:JiangChengYuanTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:500}
.stats-grid,.stats-grid button,.stat-number{font-family:JiangChengYuanTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:600}
.skill-copy strong,.skill-result b,.skill-result strong,.will-layout .skill-copy strong,.skill-option-copy strong,.skill-add-slot,.skill-category h3{font-family:SSDunDunTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:400}
.pet-name,.battle-toolbar button,.team-menu>.swap-roles,.team-options button,#result-title{font-family:SSDunDunTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:400}
.skill-meta,.skill-result small,.will-value,.will-value b,.feature-toggle,.compact-feature-badge,.compact-feature-anchor,.operations-help,.operations-help button,.note,.summary small,.star-label,.status-buttons button,.buff-buttons button,.pet-result-pill,.pet-search-scope button{font-family:JiangChengYuanTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:500}

.swap-circle svg{transform:rotate(90deg)}
.pet-index-results,.pet-search-popover{scrollbar-width:auto;scrollbar-color:auto}
.pet-index-results::-webkit-scrollbar,.pet-search-popover::-webkit-scrollbar{width:6px;height:6px}
.pet-index-results::-webkit-scrollbar-track,.pet-search-popover::-webkit-scrollbar-track{background:#d5dfe5;border-radius:999px}
.pet-index-results::-webkit-scrollbar-thumb,.pet-search-popover::-webkit-scrollbar-thumb{background:#686e73;border-radius:999px;min-height:30px}
.pet-index-results::-webkit-scrollbar-button,.pet-search-popover::-webkit-scrollbar-button{display:none;width:0;height:0}
.pet-index-results::-webkit-scrollbar-corner,.pet-search-popover::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){.pet-index-results,.pet-search-popover{scrollbar-width:thin;scrollbar-color:#686e73 #d5dfe5}}

/* Status damage uses the same striped preview as direct damage. */
.poison-loss{background:repeating-linear-gradient(120deg,#8067b3,#8067b3 5px,#bba7da 5px,#bba7da 9px)}
.burn-loss{position:absolute;top:0;height:100%;background:repeating-linear-gradient(120deg,#8d303b,#8d303b 5px,#c16a73 5px,#c16a73 9px);transition:left 240ms ease-out,width 240ms ease-out;pointer-events:none}
.negative-status-controls .burn-pill.active{color:#8d303b;background:#f9e9ec;border-color:#c16a73}
@media(prefers-reduced-motion:reduce){.poison-loss,.burn-loss{transition:none!important}}

/* Keep empty slot labels free of synthetic bold; match skill names. */
.skill-add-slot strong{font-family:SSDunDunTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:400;font-synthesis:none}
.moves>.sized-skill .skill-add-slot strong{font-size:calc(var(--skill-name)*5/6)}
.swarm-results,.swarm-results>span{font-family:JiangChengYuanTi,system-ui,"Microsoft YaHei",sans-serif;font-weight:500;font-synthesis:none}

.freeze-overlay{position:absolute;left:0;top:0;height:100%;z-index:1;border-radius:999px;box-sizing:border-box;border:1px solid #e3ffff;background:linear-gradient(172deg,rgba(255,255,255,.95) 0%,rgba(218,255,255,.9) 18%,rgba(95,224,249,.94) 48%,rgba(164,243,255,.94) 74%,#f3ffff 100%);box-shadow:inset 0 1px 2px #fff,inset 0 -1px 2px #50c5e5,0 0 4px #c5ffff;pointer-events:none;transition:width 240ms ease-out}
.freeze-overlay:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,transparent 0 26%,rgba(255,255,255,.8) 27% 29%,transparent 30% 63%,rgba(255,255,255,.75) 64% 66%,transparent 67%);pointer-events:none}
.negative-status-controls .freeze-pill.active{color:#2797bb;background:#e9faff;border-color:#9fddeb}
@media(prefers-reduced-motion:reduce){.freeze-overlay{transition:none!important}}

/* Flat freeze boundary with a clean ice gradient. */
.freeze-overlay{border-radius:999px 0 0 999px}
.freeze-overlay:after{display:none}

.freeze-overlay[hidden]{display:none!important}

/* Rounded hexagonal layer marker with an expanded light silhouette. */
.star-layer-knob{background:transparent;border-radius:0;isolation:isolate}
.star-layer-knob:before,.star-layer-knob:after{content:"";position:absolute;inset:0;mask:url("assets/icons/star-layer-module.svg") center/100% 100% no-repeat;-webkit-mask:url("assets/icons/star-layer-module.svg") center/100% 100% no-repeat;pointer-events:none}
.star-layer-knob:before{background:#d1c5e8;transform:scale(1.22);z-index:-2}
.star-layer-knob:after{background:var(--star);z-index:-1}
.star-layer-slider:focus-within .star-layer-knob{outline:none}

/* Opening identity transitions into the operations toolbar logo. */
#opening-screen{position:fixed;inset:0;z-index:1000;pointer-events:auto;overflow:hidden;animation:opening-failsafe 0s 10s forwards}
.opening-backdrop{position:absolute;inset:0;background:#80bff3}
.opening-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;box-sizing:border-box;text-align:center}
.opening-logo{width:clamp(100px,13vw,160px);aspect-ratio:12876.86/9606.91;flex:none}.opening-logo svg{display:block;width:100%;height:100%}
.opening-titles{color:#24394b}.opening-title{font-family:SSDunDunTi,system-ui,sans-serif;font-weight:400;font-size:clamp(23px,3.1vw,40px);line-height:1.5}.opening-english{font-family:JiangChengYuanTi,system-ui,sans-serif;font-weight:500;font-size:clamp(13px,1.5vw,19px);margin-top:12px;letter-spacing:.04em}
html.opening-running #operations-toggle>svg{visibility:hidden}
@keyframes opening-failsafe{to{visibility:hidden;pointer-events:none}}

.opening-backdrop.star-mode-background{z-index:0;background:#80bff3;--roco-pattern-size:280px}
.opening-backdrop.star-mode-background:before{background-image:url("assets/backgrounds/normal-pattern.png");animation-name:rain-pattern-drift;animation-duration:31.428571s}
.opening-content{z-index:1}
.opening-logo{will-change:transform,opacity}

/* Opening stays opaque at both viewport edges; regular mode keeps its fade. */
.opening-backdrop.star-mode-background{-webkit-mask-image:none;mask-image:none}

/* Inline SVG works when the calculator is opened directly from disk. */
.star-layer-knob:before,.star-layer-knob:after{display:none}
.star-marker-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.star-marker-halo{fill:#d1c5e8;transform:scale(1.22);transform-box:view-box;transform-origin:center}
.star-marker-core{fill:var(--star)}

@font-face{font-family:Rune;src:url("assets/fonts/Rune/Rune.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
.opening-english{font-family:Rune,sans-serif;font-weight:400;font-synthesis:none}

.opening-logo{width:clamp(120px,12.5vw,180px)}
.opening-content{gap:28px}
.opening-titles{display:flex;flex-direction:column;align-items:center;max-width:100%}
.opening-title{font-size:clamp(22px,2.55vw,36px);white-space:nowrap}
.opening-english{color:#5C8AB1;display:inline-block;white-space:nowrap;letter-spacing:.04em;margin-top:8px;line-height:1.3}

.swarm-results .swarm-result-row{display:grid;grid-template-columns:8.5ch .8ch 8.5ch;gap:0;align-items:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.swarm-result-left{display:grid;grid-template-columns:2em minmax(4ch,1fr);gap:.35ch;align-items:center}.swarm-result-label{text-align:left}.swarm-result-number{text-align:right}.swarm-result-divider{text-align:center}.swarm-result-percent{text-align:left}
.swarm-heading-description{font-family:JiangChengYuanTi,sans-serif;font-weight:500;font-size:11px;line-height:1.5;flex:1;min-width:0;margin-left:8px}

.parasite-loss,.parasite-heal{position:absolute;top:0;height:100%;pointer-events:none;transition:left 240ms ease-out,width 240ms ease-out}.parasite-loss{background:repeating-linear-gradient(120deg,#285d3f,#285d3f 5px,#528368 5px,#528368 9px)}.parasite-heal{background:#8edbb6}.negative-status-controls .parasite-pill.active{color:#285d3f;background:#e5f5e9;border-color:#85b49a}@media(prefers-reduced-motion:reduce){.parasite-loss,.parasite-heal{transition:none!important}}

/* Center the visible result group, with a space after each separator. */
.swarm-results{width:max-content;margin-inline:auto;text-align:left}
.swarm-results .swarm-result-row{grid-template-columns:8.5ch .8ch 4.5ch}
.swarm-result-percent{padding-left:.5ch;box-sizing:content-box}

.transmission-control{position:absolute;z-index:25;text-align:center}.transmission-button{display:grid;place-items:center;background:#326B5D;border:0;border-radius:50%;padding:11px;color:#fff}.transmission-button img{width:100%;height:100%;object-fit:contain}.transmission-capsule{position:relative;left:50%;transform:translateX(-50%);width:max-content;margin-top:8px;border-radius:999px;background:#326B5D;color:#fff;padding:9px 14px;font-family:JiangChengYuanTi,sans-serif;font-weight:500;font-size:12px;white-space:nowrap}.transmission-control[hidden],.transmission-capsule[hidden]{display:none}

.transmission-button svg{display:block;width:100%;height:100%;fill:#fff}.transmission-capsule{left:auto;transform:none;position:absolute;top:100%;left:50%;margin-left:-38px;width:76px;box-sizing:border-box;padding:8px 3px;animation:single-reset-drop 180ms ease-out}@media(prefers-reduced-motion:reduce){.transmission-capsule{animation:none!important}}

.transmission-capsule{border:0;cursor:pointer}.transmission-capsule:disabled{opacity:.65;cursor:wait}.moves>.skill-card{backface-visibility:hidden;transform-style:preserve-3d}

.transmission-bonus.active{color:#326B5D!important}.transmission-bonus.inactive{color:#b8bec4!important}.transmission-clear{top:calc(100% + 40px);background:#d84e59}.transmission-clear:disabled{opacity:.45}

/* Preserve the disabled appearance throughout the entrance motion. */
.transmission-clear{animation:transmission-clear-drop 180ms ease-out}.transmission-clear:disabled{opacity:.45;cursor:default}@keyframes transmission-clear-drop{from{transform:translateY(-10px)}to{transform:translateY(0)}}

.stat-number.transmission-stat-boost{color:#75cbaa!important}

.skill-copy strong .valve-use-label{font-family:JiangChengYuanTi,sans-serif;font-weight:500;font-size:12px;color:#a5b3b9;margin-left:8px}

.roster:has(.collection-scroll-frame){max-height:none;overflow:visible}.collection-scroll-frame{position:relative;flex:none}.collection-scroll-view{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;max-height:490px;overscroll-behavior:contain}.collection-scroll-view::-webkit-scrollbar{display:none}.collection-scroll-frame.has-more .collection-scroll-view{mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)}.collection-scrollbar{position:absolute;left:calc(100% + 3px);top:0;bottom:0;width:4px;pointer-events:none}.collection-scroll-thumb{display:block;position:absolute;top:0;width:4px;border-radius:999px;background:rgba(255,255,255,.65);opacity:0;transition:opacity 180ms;pointer-events:auto;touch-action:none}.collection-scroll-frame.scrollable.scrolling .collection-scroll-thumb{opacity:1}.transmission-button svg,.transmission-button svg path{fill:#EFC066!important}.transmission-button svg{transform-origin:50% 50%}@media(max-width:1100px){.collection-scroll-view{gap:7px}}

.current-slot-wrap{position:relative;flex:none;display:flex;justify-content:center}.roster .current-slot-confirm{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);z-index:20;border-radius:999px;background:#dc913d;border-color:#dc913d;color:#fff;animation:current-slot-drop 180ms ease-out}@keyframes current-slot-drop{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}@media(prefers-reduced-motion:reduce){.current-slot-confirm{animation:none!important}}

#battle-popovers .thunder-burst-panel,.thunder-burst-panel.motion-ghost{background:#706E69;border-color:#706E69;color:#f7f2e5}.thunder-burst-panel .search-heading,.thunder-burst-panel .search-heading button,.thunder-burst-panel p{color:#f7f2e5}.thunder-burst-controls{display:grid;gap:13px;padding:6px 0}.thunder-burst-row{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;font-family:"JiangChengYuanTi",sans-serif;font-weight:500}.thunder-burst-row output{white-space:nowrap;color:#f7f2e5}.thunder-burst-button{display:grid;place-items:center;width:34px;height:34px;padding:5px;border:1px solid #99978f;border-radius:50%;background:#625f59;color:#aaa79f;transition:color 180ms,box-shadow 180ms,border-color 180ms,background 180ms}.thunder-burst-button svg{display:block;width:100%;height:100%}.thunder-burst-button[aria-pressed="true"]{color:#E7C506;border-color:#E7C506;background:#7b7454;box-shadow:0 0 0 3px #e7c50630,0 0 13px #e7c50655}

#battle-popovers .thunder-burst-panel{padding:12px 14px;gap:7px;overflow-y:auto}.thunder-burst-panel .thunder-burst-controls{gap:6px;padding:4px 0}.thunder-burst-panel .thunder-burst-row{grid-template-columns:27px 1fr auto;gap:10px;font-size:12px;min-height:30px}.thunder-burst-panel .thunder-burst-button{width:27px;height:27px;padding:4px}.thunder-burst-row output{color:#bdbab1}.thunder-burst-row:has([aria-pressed="true"]) output{color:#E7C506}.thunder-burst-summary{border-top:1px solid #f7f2e533;padding-top:8px;display:grid;gap:4px;font-size:12px;color:#E7C506}.thunder-burst-summary>div{display:grid;grid-template-columns:34px 1fr;gap:6px}.thunder-burst-summary b{font-weight:500;overflow-wrap:anywhere}.thunder-burst-summary small{color:#ded8c9;font-size:10px}.thunder-burst-actions{display:flex;justify-content:flex-end}.thunder-burst-actions button{border:1px solid #ddd6ba66;background:transparent;color:#e7e0ca;border-radius:999px;padding:4px 9px;font-size:11px}

.thunder-entry-note{color:#c6c4bd;font-size:10px!important;font-weight:500;white-space:nowrap}.thunder-extra-toggle{display:flex;justify-content:center;align-items:center;width:100%;height:19px;padding:0;border:0;background:transparent;color:#ddd8c8;font-size:17px}.thunder-extra-toggle:hover{color:#E7C506}.thunder-extra-rows{display:grid;gap:6px}.thunder-extra-rows[hidden]{display:none}

.swarm-panel .swarm-control{grid-template-columns:64px minmax(60px,1fr) 33px;gap:9px}.swarm-panel .swarm-control>span{white-space:nowrap;font-size:12px;font-weight:500}.swarm-panel .swarm-icon-value{position:relative;display:block;width:33px;height:37px;line-height:1;text-align:initial}.swarm-icon-value img{display:block;width:29px;height:35px;object-fit:contain}.swarm-panel .swarm-icon-value b{position:absolute;right:0;bottom:0;color:#F7E9C0;font-family:JiangChengYuanTi,sans-serif;font-weight:600;font-size:17px;line-height:1;text-shadow:0 1px 2px #263d1d,1px 0 2px #263d1d}.swarm-value-a11y{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.swarm-panel .swarm-controls{gap:8px}.swarm-panel .swarm-actions button{padding:5px 10px;font-size:11px}

.swarm-panel .swarm-control{grid-template-columns:28px minmax(60px,1fr) 62px;grid-template-areas:"icon slider effect";gap:12px}.swarm-panel .swarm-control>span{grid-area:effect;text-align:right;font-size:12px}.swarm-panel .swarm-control>.swarm-slider{grid-area:slider}.swarm-panel .swarm-control>.swarm-icon-value{grid-area:icon;width:28px;height:33px}.swarm-icon-value img{width:25px;height:31px}.swarm-panel .swarm-icon-value b{font-size:14px}.swarm-panel .swarm-controls{gap:12px;padding-top:10px}.swarm-panel .swarm-actions{margin-top:7px}.swarm-panel .swarm-actions button{border-radius:999px}.swarm-panel>.search-heading{margin-bottom:2px}.swarm-panel>p{margin-top:2px;font-size:11px;line-height:1.5}

.counter-mode{grid-template-columns:repeat(3,minmax(0,1fr))}.counter-mode:before{width:calc((100% - 6px)/3)!important}.counter-mode button{white-space:nowrap}

.charge-button{position:absolute;z-index:12;padding:0;border:2px solid #bcb7a6;border-radius:50%;background:#595953;overflow:hidden;box-shadow:0 2px 5px #25445522}.charge-button img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;pointer-events:none}.charge-button[aria-pressed="true"]{border-color:#EFC066;outline:3px solid #efc06666;outline-offset:2px;box-shadow:0 0 12px #efc06655}

.charge-button{padding:5px}.charge-button img{object-fit:contain;object-position:center;border-radius:0}

.operations-help dd ul{margin:0;padding-left:14px}.operations-help dd li+li{margin-top:3px}.operations-help dl>.operations-fold-row{display:block}.operations-fold-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.operations-fold summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;color:#365264;font-weight:650;padding:3px 0}.operations-fold summary::-webkit-details-marker{display:none}.operations-fold-arrow{transition:transform 150ms;font-size:14px}.operations-fold[open] .operations-fold-arrow{transform:rotate(180deg)}.operations-fold>ul{margin:5px 0 0 86px!important}.operations-fold summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}@media(max-width:680px){.operations-fold>ul{margin-left:70px!important}}

.operations-help{padding:13px 15px;overflow-x:auto}.operations-help dl{gap:7px}.operations-help dl>div{font-size:11px;line-height:1.6;grid-template-columns:54px 1fr;gap:10px;border-top:1px solid #36526414;padding-top:7px}.operations-help dt,.operations-fold summary{font-size:11px}.operations-help dd li{white-space:nowrap}.operations-help dd li+li{margin-top:2px}.operations-fold>ul{margin-left:64px!important}.operations-fold summary{padding:0}.operations-help .search-heading{font-size:12px;margin-bottom:8px}@media(max-width:680px){.operations-help dl>div{grid-template-columns:44px 1fr;gap:8px}.operations-fold>ul{margin-left:52px!important}}

.operations-fold summary{display:grid;grid-template-columns:54px minmax(0,1fr) 14px;gap:10px}.operations-fold-preview{display:block;overflow:hidden;white-space:nowrap;font-weight:500;color:var(--muted);mask-image:linear-gradient(to right,#000 0%,#000 60%,transparent 100%)}.operations-fold[open] .operations-fold-preview{visibility:hidden}.operations-fold-arrow{text-align:right}@media(max-width:680px){.operations-fold summary{grid-template-columns:44px minmax(0,1fr) 14px;gap:8px}}

.operations-help dl>div{grid-template-columns:36px 1fr;gap:7px}.operations-fold summary{grid-template-columns:36px minmax(0,1fr) 14px;gap:7px}.operations-fold>ul{margin-left:43px!important}.operations-fold[open] .operations-fold-preview{visibility:visible;mask-image:none;overflow:visible}.operations-fold[open]>ul>li:first-child{display:none}.operations-fold-preview{font-weight:500}.operations-fold[open]>ul{margin-top:2px!important}.operations-help{overflow-x:hidden}.operations-fold[open] .operations-fold-preview{white-space:normal}.operations-fold[open]>ul>li{white-space:normal}@media(max-width:680px){.operations-help dl>div{grid-template-columns:30px 1fr;gap:5px}.operations-fold summary{grid-template-columns:30px minmax(0,1fr) 14px;gap:5px}.operations-fold>ul{margin-left:35px!important}}


.moves.rainbow-seven-moves{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
.rainbow-seven-moves>.skill-card:first-child{grid-column:1/-1}
.rainbow-seven-moves>.skill-card:not(:first-child) .skill-copy{min-width:0;flex:1}
.rainbow-seven-moves>.skill-card:not(:first-child) .skill-result{width:38px!important;min-width:38px!important;padding-inline:4px!important;align-items:center;white-space:normal}
.rainbow-seven-moves>.skill-card:not(:first-child) .damage-result>b{display:flex;flex-direction:column;align-items:center;width:100%;line-height:1.2}
.rainbow-seven-moves>.skill-card:not(:first-child) .damage-result>small{display:block!important;font-size:10px;line-height:1.2;margin-bottom:2px}
.rainbow-damage-number{display:block;width:100%;text-align:center;border-bottom:1px solid currentColor;padding-bottom:2px}
.rainbow-damage-percent{display:block;padding-top:2px}
.rainbow-seven-moves>.skill-card:nth-child(n+5){background-color:#f0f1f8!important;border-color:#dce1ee!important}
.rainbow-seven-moves>.skill-card:nth-child(n+5).selected{background-color:#e3efee!important}

/* Wrap secondary-card labels without changing card dimensions. */
.rainbow-seven-moves>.skill-card:not(:first-child) .damage-result>small{display:none!important}
.rainbow-seven-moves>.skill-card:not(:first-child) .skill-result{overflow-wrap:anywhere;text-align:center}
.rainbow-seven-moves>.skill-card:not(:first-child) .skill-result>b{white-space:normal!important;text-align:center;line-height:1.2}
.rainbow-seven-moves>.skill-card:not(:first-child) .skill-meta{white-space:normal!important;line-height:1.35}

/* Keep each compact effect line intact, including its percent sign. */
.rainbow-seven-moves>.skill-card:not(:first-child) .status-result>b,.rainbow-seven-moves>.skill-card:not(:first-child) .debuff-result>b{display:flex!important;flex-direction:column;align-items:center;justify-content:center;font-size:12px!important;line-height:1.35!important;overflow-wrap:normal!important;word-break:normal!important}
.rainbow-effect-line{display:block;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important}

.refraction-use{flex:0 0 auto;align-self:stretch;border:1px solid #b5d8ca;border-radius:14px;background:#eef8f0;color:#326b5d;padding:0 10px;font-family:inherit;font-weight:600;cursor:pointer}.refraction-use:hover{background:#dbeee1}

.rainbow-damage-number,.rainbow-damage-percent{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;max-width:100%}

.pursuit-counter{white-space:nowrap;font-size:.9em}.pursuit-counter.inactive{color:#b8bec4}.pursuit-counter.active{color:#326b5d}

.branch-controls{margin-top:10px}.branch-controls .segmented{display:grid;grid-template-columns:1fr 1fr;width:100%}.branch-controls .segmented button{white-space:normal!important;line-height:1.6;padding:8px 5px;font-size:12px;min-width:0}.branch-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.branch-actions button{border:1px solid #bfd7ce;border-radius:12px;padding:7px 10px;background:#eef7f3;color:#326b5d;font:inherit;font-size:12px}.branch-actions button:disabled{opacity:.4;cursor:default}.branch-actions small{display:block;flex-basis:100%;font-size:11px;line-height:1.6}.branch-hint{font-size:.85em;white-space:normal;line-height:1.5}.branch-hint.active{color:#326b5d}.branch-hint.inactive{color:#b8bec4}

/* Reserve a clear corner for the compact six-branch panel close control. */
#battle-popovers .skill-choice-panel:has(.branch-controls),.skill-choice-panel.motion-ghost:has(.branch-controls){padding-top:23px!important}
.skill-choice-panel:has(.branch-controls) .skill-choice-close{top:4px!important;right:7px!important;width:18px!important;height:18px!important;font-size:18px!important;line-height:18px!important;z-index:5;display:flex;align-items:center;justify-content:center}
.skill-choice-panel:has(.branch-controls) .branch-controls{margin-top:2px}

.guard-response-hint{font-size:.85em;line-height:1.5;white-space:normal}.guard-response-hint.active{color:#3081b4}.guard-response-hint.inactive{color:#b8bec4}.guard-response-label{display:block;font-size:.65em;line-height:1.5;margin-bottom:3px}

/* Counter label and value use the same normal result text size. */
.moves>.skill-display.sized-skill .skill-result b:has(.guard-response-label){font-size:calc(var(--skill-value)*5/6);line-height:1.5;text-align:center}
.guard-response-label{font-size:1em!important;line-height:1.5!important;margin-bottom:3px}

/* Counter text stays inside the existing result box and cannot resize the row/icon. */
.moves>.skill-card .skill-result:has(.guard-response-label)>b{position:absolute;top:50%;left:6px;right:6px;transform:translateY(-50%);margin:0!important;line-height:1.35!important}
.moves>.skill-card .skill-result:has(.guard-response-label) .guard-response-label{line-height:1.35!important}

/* Approved audit controls: preserve card/icon sizes. */
.audit-counter-hint{display:block;font-size:.8em;line-height:1.45;color:#aab4bb;white-space:normal}.audit-counter-hint.active{color:#35776c}.audit-slider-row{gap:8px;flex-wrap:wrap}.audit-slider-row input{flex:1;min-width:100px;height:18px;accent-color:#139b5e}.audit-slider-row small{white-space:nowrap}.snow-weather-icon{width:28px;height:28px;object-fit:contain}

/* All ticked skill ranges: fill every background layer to both rounded ends. */
.ticked-skill-slider::-webkit-slider-runnable-track{background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.ticked-skill-slider::-moz-range-track{background-size:100% 100%;background-position:center;background-repeat:no-repeat}

/* Slider conditions already inherit the skill name from the card above. */
#battle-popovers .slider-no-repeat>.search-heading{position:absolute;top:12px;right:12px;min-height:0;margin:0}#battle-popovers .slider-no-repeat>.search-heading button{width:20px;height:20px;padding:0;font-size:20px;line-height:1}#battle-popovers .slider-no-repeat>p{margin-top:0;padding-right:26px}

/* Ice theme from Snow Doll; same solid-fill/mask/motion logic as normal mode. */
html.snow-mode-active,html.snow-mode-active body{background:#66afd8;background-image:none}
.snow-mode-background{--roco-pattern-size:280px;background:#66afd8}
.snow-mode-background::before{background-image:url("assets/backgrounds/snow-pattern.png");animation-name:rain-pattern-drift;animation-duration:31.428571s}
.snow-mode-background::after{content:none}
@media(prefers-reduced-motion:reduce){.snow-mode-background::before{animation:none}}

/* Match the preview bullet and text inset to the expanded list. */
.operations-fold-preview{position:relative;box-sizing:border-box;padding-left:14px}.operations-fold-preview::before{content:"•";position:absolute;left:0;top:0}

/* Use identical bullet boxes for normal rows, fold previews, and expanded rows. */
.operations-help dd ul{list-style:none;padding-left:0}.operations-help dd li{position:relative;box-sizing:border-box;padding-left:14px;list-style:none}.operations-help dd li::before,.operations-fold-preview::before{content:"•";position:absolute;left:0;top:0;width:7px;text-align:center;font-weight:500;line-height:inherit;color:inherit}.operations-fold-preview{position:relative;box-sizing:border-box;padding-left:14px}