:root { color-scheme: dark; font-family: "Segoe UI", sans-serif; background: #080d18; color: #eef4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 30% -10%, #18376b 0, transparent 35%), #080d18; }
main { width: min(1720px, calc(100% - 64px)); margin: 0 auto; padding: 0 0 64px; }
header, .page-header { max-width: 1720px; margin-bottom: 18px; }
.brand-description { max-width: 1080px; }
.eyebrow { color: #82c7ff; font-size: .76rem; font-weight: 700; letter-spacing: .12em; }
h1, .brand-heading { margin: 8px 0; font-size: clamp(1.8rem, 4vw, 3.2rem); letter-spacing: -.05em; }
.brand-mark { display: inline-flex; align-items: baseline; gap: 0; line-height: 1; text-decoration: none; font: inherit; letter-spacing: inherit; }
.brand-mark-ow { color: #ffffff; }
.brand-mark-assis { color: #f28c28; }
.brand-mark-dotcom { margin-left: .16em; color: #8a93a3; font-size: .4em; letter-spacing: 0; }
.site-toolbar { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 24px; border-top: 1px solid #223551; border-bottom: 1px solid #223551; background: linear-gradient(180deg, #111d31f2, #0a1321f2); box-shadow: 0 12px 30px #00000022, inset 0 1px 0 #ffffff08; }
.site-toolbar-inner { width: min(1720px, 100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 0; min-height: 74px; }
.site-toolbar-emblem { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; align-self: stretch; padding-right: 0; }
.site-toolbar-emblem-image { display: block; width: auto; height: clamp(2.325rem, 4.5vw, 3.45rem); filter: drop-shadow(0 8px 18px #00000045); object-fit: contain; }
.site-toolbar-main { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; min-width: 0; }
.toolbar-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.site-toolbar .brand-heading { margin: 0; font-size: clamp(1.55rem, 3vw, 2.3rem); }
.brand-description { margin: 0; color: #d7e5fb; font-size: 1rem; line-height: 1.6; max-width: 970px; text-align: left; }
.title-meta { margin: 0; color: #8ca4c4; font-size: .8rem; white-space: nowrap; }
.discord-contact { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid #3653a4; border-radius: 999px; background: linear-gradient(180deg, #203469, #152447); color: #eef4ff; text-decoration: none; box-shadow: inset 0 1px 0 #ffffff14; transition: .16s ease; }
.discord-contact:hover { border-color: #6d8fff; background: linear-gradient(180deg, #28407b, #1a2d59); box-shadow: 0 0 0 3px #7d9cff1f; }
.discord-contact:focus-visible { outline: none; border-color: #9ab4ff; box-shadow: 0 0 0 3px #9ab4ff33; }
.discord-glyph { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; }
.discord-glyph-image { display: block; width: 18px; height: auto; }
.discord-contact-copy { display: inline-flex; align-items: center; line-height: 1; }
.discord-contact-label { color: #eef4ff; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.language-switcher { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid #243754; border-radius: 999px; background: #0b1423cc; box-shadow: inset 0 1px 0 #ffffff08; }
.language-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 72px; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #9fb6d7; font: inherit; font-size: .75rem; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: .16s ease; }
.language-button[aria-pressed="true"] { border-color: #4f7fb1; background: linear-gradient(180deg, #183154, #10203b); color: #eef7ff; box-shadow: 0 0 0 2px #83ccff14; }
.language-button:hover { color: #d7ecff; }
.language-flag { width: 18px; height: 18px; flex: 0 0 18px; display: block; border-radius: 999px; box-shadow: 0 0 0 1px #ffffff1a; }
.language-label { line-height: 1; }
.visitor-counts { margin: 0; color: #8ca4c4; font-size: .72rem; white-space: nowrap; }
.visitor-counts strong { color: #cfe5ff; }
.affiliate-promo { display: grid; justify-items: center; gap: 5px; width: 100%; margin-top: 22px; overflow: hidden; }
.affiliate-promo-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 728px)); justify-content: center; gap: 18px; width: 100%; }
.affiliate-promo-link { display: block; width: 100%; line-height: 0; }
.affiliate-promo-banner { display: block; width: 100%; height: auto; aspect-ratio: 728 / 90; object-fit: contain; }
.affiliate-promo-disclosure { margin: 0; color: #7889a1; font-size: .64rem; line-height: 1.3; text-align: center; }
.affiliate-impression-pixel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.intro-stage,
.promo-stage,
.battle-rows { margin-top: 22px; }
.intro-stage { display: grid; gap: 14px; }
.intro-card,
.capture-card,
.control-card { border: 1px solid #29415e; border-radius: 18px; background: linear-gradient(180deg, #111d31, #0b1423); box-shadow: 0 14px 34px #00000020, inset 0 1px 0 #ffffff08; }
.intro-card { padding: 22px 24px; background: linear-gradient(135deg, #122445, #0a1323 70%); }
.tutorial-panel { display: grid; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #29415e; }
.tutorial-title { color: #eef4ff; cursor: pointer; font-size: 1.15rem; font-weight: 800; }
.tutorial-title::marker { color: #f28c28; }
.tutorial-title:focus-visible { outline: 2px solid #83ccff; outline-offset: 4px; }
.tutorial-panel[open] .tutorial-title { margin-bottom: 16px; }
.tutorial-carousel { display: grid; gap: 12px; }
.tutorial-progress-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin: 0; }
.tutorial-progress-bar { height: 4px; overflow: hidden; border-radius: 999px; background: #52617466; }
.tutorial-progress-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #eef4ff; }
.tutorial-progress-bar.is-complete > span { width: 100%; }
.tutorial-progress-bar.is-active > span { animation: tutorial-progress 5s linear forwards; }
@keyframes tutorial-progress { from { width: 0; } to { width: 100%; } }
.tutorial-viewport { position: relative; container-type: size; width: 100%; overflow: hidden; margin: 0; border: 1px solid #29415e; border-radius: 12px; background: #050912; aspect-ratio: 64 / 45; }
.tutorial-slide { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tutorial-slide[hidden] { display: none; }
.tutorial-caption { position: absolute; right: 1%; bottom: 48px; left: 1%; z-index: 2; width: auto; min-height: 1.6em; margin: 0; overflow: hidden; border: 1px solid #ffffff24; border-radius: 10px; padding: .38em .55em; background: #050912d9; color: #eef7ff; box-shadow: 0 5px 20px #0009; font-size: clamp(.85rem, 4.4cqh, 3rem); font-weight: 700; line-height: 1.35; text-align: center; white-space: nowrap; backdrop-filter: blur(5px); }
.tutorial-caption kbd { display: inline-block; min-width: 1.8em; margin: 0 .08em; border: 1px solid #6485ad; border-bottom-width: 3px; border-radius: .32em; padding: .08em .38em; background: linear-gradient(180deg, #263b58, #13223a); color: #fff; box-shadow: inset 0 1px 0 #ffffff24, 0 2px 0 #07101d; font: 700 .72em/1.25 "Segoe UI", sans-serif; vertical-align: .08em; white-space: nowrap; }
.tutorial-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 48px; border: 0; border-radius: 9px; background: #07101db8; color: #fff; cursor: pointer; font-size: 1.7rem; line-height: 1; transform: translateY(-50%); }
.tutorial-nav:hover { background: #102c50e8; }
.tutorial-nav:focus-visible { outline: 2px solid #83ccff; outline-offset: -2px; }
.tutorial-nav-prev { left: 10px; }
.tutorial-nav-next { right: 10px; }
.tutorial-dots { position: absolute; bottom: 12px; left: 50%; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background: #050912a6; transform: translateX(-50%); }
.tutorial-dot { width: 9px; height: 9px; border: 1px solid #ffffff99; border-radius: 50%; padding: 0; background: #ffffff55; cursor: pointer; }
.tutorial-dot[aria-current="true"] { background: #fff; box-shadow: 0 0 0 3px #ffffff33; }
@media (prefers-reduced-motion: reduce) { .tutorial-progress-bar.is-active > span { animation: none; } }
.clipboard-alert { display: flex; align-items: center; gap: 12px; margin-top: 14px; border: 1px solid #315f96; border-radius: 12px; padding: 13px 16px; background: #102542; color: #cfe7ff; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.clipboard-alert.is-warning { border-color: #9b6b22; background: #33230d; color: #ffe0a3; }
.clipboard-alert-icon { flex: 0 0 auto; color: #69b7ff; font-size: 1.55rem; }
.clipboard-alert.is-warning .clipboard-alert-icon { color: #ffb84d; }
@media (max-width: 800px) { .clipboard-alert { gap: 9px; padding: 11px 13px; font-size: 1rem; } .clipboard-alert-icon { font-size: 1.3rem; } }
.promo-label { color: #83ccff; font-size: .66rem; font-weight: 800; letter-spacing: .12em; }
.promo-title { color: #eef4ff; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.2; }
.promo-copy { margin: 0; max-width: 40rem; color: #aebdd4; font-size: .92rem; line-height: 1.5; }
.promo-cta { color: #ffd089; font-size: .82rem; font-weight: 700; }
h2 { font-size: 1.1rem; margin: 0 0 16px; }
.card-title { margin: 0 0 16px; color: #d7e5fb; font-size: 1.1rem; line-height: 1.2; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head .card-title { margin-bottom: 0; }
#screenshot-preview,
.counter-card-shell.counter-panel { border-color: #3d434c; background: linear-gradient(180deg, #191d23, #101318); box-shadow: 0 14px 34px #00000020, inset 4px 0 0 #8a93a3, inset 0 1px 0 #ffffff08; }
.roster-card.enemy-roster { border-color: #8a3442; background: linear-gradient(180deg, #471822, #27101a); box-shadow: 0 14px 34px #00000020, inset 4px 0 0 #e0556a, inset 0 1px 0 #ffffff08; }
.roster-card.ally-roster { border-color: #2f5f99; background: linear-gradient(180deg, #142844, #0e1b2d); box-shadow: 0 14px 34px #00000020, inset 4px 0 0 #4f9fe8, inset 0 1px 0 #ffffff08; }
.composition-card-head { align-items: center; }
.composition-toggle { position: relative; display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: 64px; height: 32px; border: 1px solid #507aa6; border-radius: 999px; padding: 0 8px; background: #132544; color: #cfe7ff; cursor: pointer; font-size: .65rem; font-weight: 900; line-height: 1; transition: .16s ease; }
.composition-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #eef7ff; box-shadow: 0 2px 7px #0007; transition: transform .18s ease; }
.composition-toggle[aria-checked="true"]::before { transform: translateX(32px); }
.composition-toggle[aria-checked="false"] { justify-content: flex-end; border-color: #666e78; background: #34383e; color: #d2d5da; }
.composition-toggle:hover { border-color: #83ccff; background: #193253; }
.composition-toggle:focus-visible { outline: none; border-color: #83ccff; box-shadow: 0 0 0 3px #83ccff33; }
.enemy-roster:not(.composition-disabled) .composition-toggle { border-color: #8a3442; background: #471822; color: #ffd7de; }
.enemy-roster:not(.composition-disabled) .composition-toggle:hover { border-color: #e0556a; background: #5a1e2a; }
.enemy-roster:not(.composition-disabled) .composition-toggle:focus-visible { border-color: #e0556a; box-shadow: 0 0 0 3px #e0556a33; }
.roster-card.composition-disabled { border-color: #555b64; background: linear-gradient(180deg, #2a2d32, #191c20); box-shadow: 0 14px 34px #00000020, inset 4px 0 0 #777e88, inset 0 1px 0 #ffffff08; }
.roster-card.composition-disabled > :not(.composition-card-head) { display: none; }
.roster-card.composition-disabled .composition-card-head { margin-bottom: 0; }
.roster-card.composition-disabled .card-title { color: #9299a3; }
.roster-card.composition-disabled .composition-toggle { border-color: #6b717a; background: #34383e; color: #d2d5da; }
.lead, .status, #selected { color: #aebdd4; line-height: 1.55; }
.battle-rows { display: grid; gap: 18px; }
.paired-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.capture-stage { margin-top: 0; }
.capture-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.capture-row > .capture-card,
.capture-row > .counter-card-shell { width: 100%; }
.paste-panel { margin: 0; padding: 22px 24px; }
.screenshot-card-head { align-items: center; }
.example-badge { flex: 0 0 auto; border: 1px solid #8c6728; border-radius: 999px; padding: 5px 9px; background: #34250d; color: #ffd089; font-size: .7rem; font-weight: 800; line-height: 1; }
.example-badge[hidden] { display: none; }
.screenshot-upload-counts { margin: 10px 2px 0; color: #8ca4c4; font-size: .72rem; white-space: nowrap; }
.screenshot-upload-counts strong { color: #cfe5ff; }
.paste-target { display: grid; gap: 14px; min-height: 560px; border: 2px solid #4c91cf; border-radius: 12px; padding: 16px; color: #c6d9f2; background: linear-gradient(180deg, #12233a, #0d1829); cursor: pointer; outline: none; box-shadow: 0 0 0 0 #56b6ff00, inset 0 1px 0 #ffffff12; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; animation: uploader-pulse 1.8s ease-in-out infinite; }
.paste-target:hover { border-color: #9bd8ff; background: linear-gradient(180deg, #17304f, #10223a); box-shadow: 0 0 0 5px #56b6ff24, 0 0 24px #159ee638, inset 0 1px 0 #ffffff1c; transform: translateY(-1px); animation-play-state: paused; }
.paste-target:focus-visible { border-color: #9bd8ff; box-shadow: 0 0 0 5px #56b6ff2b; animation-play-state: paused; }
.paste-target.is-dragging { border-color: #83ccff; background: #142944; box-shadow: 0 0 0 4px #83ccff2b; }
@keyframes uploader-pulse { 0%, 100% { border-color: #4c91cf; box-shadow: 0 0 0 0 #56b6ff00, inset 0 1px 0 #ffffff12; } 50% { border-color: #8fd3ff; box-shadow: 0 0 0 5px #56b6ff1f, 0 0 22px #159ee62e, inset 0 1px 0 #ffffff1c; } }
@media (prefers-reduced-motion: reduce) { .paste-target { animation: none; border-color: #83ccff; box-shadow: 0 0 0 3px #56b6ff1a; } }
.paste-target-preview { width: 100%; min-width: 0; margin: 0; }
.paste-target-copy { display: grid; gap: 6px; min-width: 0; }
.paste-target-label { display: block; color: #d7e5fb; font-size: .95rem; line-height: 1.45; }
.paste-target-copy small { display: block; color: #8ca4c4; line-height: 1.5; }
#heroes { min-height: 640px; }
#report-recognition-bug { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid #29415e; border-radius: 999px; padding: 0 12px; background: linear-gradient(180deg, #132544, #0d1829); color: #9fc8f3; cursor: pointer; font-size: .78rem; font-weight: 700; line-height: 1; white-space: nowrap; transition: .16s ease; }
#report-recognition-bug:disabled { opacity: .5; cursor: default; }
#report-recognition-bug:not(:disabled):hover { border-color: #4f7fb1; background: linear-gradient(180deg, #183154, #10203b); color: #d7ecff; box-shadow: 0 0 0 3px #83ccff1f; }
#report-recognition-bug:not(:disabled):focus-visible { outline: none; border-color: #83ccff; box-shadow: 0 0 0 3px #83ccff33; }
.battle-grid { margin-top: 0; }
.decision-panel { display: flex; min-width: 0; align-content: start; }
.paired-row > .capture-card,
.decision-panel > .control-card { width: 100%; height: 100%; }
.roster-card,
.counter-card-shell { padding: 22px 24px; }
.selection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.screenshot-preview { margin: 0; padding: 22px 24px; }
.screenshot-preview-crop { position: relative; width: 100%; min-width: 0; overflow: hidden; border-radius: 10px; background: #050912 center / contain no-repeat; aspect-ratio: 16 / 9; }
.screenshot-preview-crop:not(.has-image) { display: grid; place-items: center; min-height: 180px; border: 1px dashed #29415e; }
.screenshot-preview-crop:not(.has-image)::before { content: "Preview"; color: #5f7898; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.screenshot-preview img[hidden] { display: none; }
.screenshot-preview img:not([src]) { display: none; }
.screenshot-preview img { display: block; width: 100%; height: 100%; max-height: none; border-radius: 0; background: #050912; object-fit: contain; object-position: center; }
.screenshot-preview-footer { margin: 12px 0 0; color: #8ca4c4; font-size: .75rem; }
.screenshot-preview-header { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.recognition-summary { display: block; margin: 10px 0 0; padding: 9px 11px; border: 1px solid #2f5f99; border-radius: 8px; background: #0c1d35; color: #cfe7ff; font-size: .83rem; font-weight: 700; line-height: 1.45; }
.recognition-summary[hidden] { display: none; }
.screenshot-preview-result { min-width: 0; }
.panel-divider { display: none; }
.role-group + .role-group { margin-top: 28px; }
.role-group h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: #d7e5fb; font-size: .95rem; }
.role-group h3 span { padding: 2px 7px; border-radius: 999px; background: #1b2e4d; color: #88bbed; font-size: .68rem; }
.enemy-panel .role-grid { overflow-x: auto; padding-bottom: 4px; }
.enemy-panel .role-grid.two-row-major { display: grid; grid-template-rows: repeat(2, minmax(0, auto)); gap: 6px; }
.enemy-panel .role-grid-row { display: flex; gap: 6px; min-width: max-content; }
.enemy-panel .role-grid-row .hero-card { flex: 0 0 58px; }
.counter-grid .role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.hero-card { position: relative; border: 1px solid #253552; border-radius: 0; padding: 8px 7px 7px; background: linear-gradient(180deg, #121f34, #0c1524); color: inherit; cursor: pointer; transition: .16s ease; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); isolation: isolate; }
.hero-card::before { content: ""; position: absolute; inset: 0; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); border: 0 solid transparent; pointer-events: none; z-index: -1; transition: .16s ease; }
.hero-card.selected { border-color: #b9edff; transform: translateY(-2px); background: linear-gradient(180deg, #0a6ca1, #064768); color: #fff; }
.hero-card.selected::before { inset: -3px; background: linear-gradient(180deg, #d5f6ff, #1e9fde); box-shadow: 0 0 18px #159ee699; }
.hero-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.hero-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 7px; font-size: .77rem; }
.enemy-panel .hero-card { display: block; padding: 5px 4px 6px; text-align: center; min-width: 58px; }
.enemy-panel .hero-card img { width: 100%; height: auto; aspect-ratio: 1; }
.enemy-panel .hero-card span { padding-top: 4px; font-size: .8rem; letter-spacing: -.03em; }
.results { min-width: 0; padding-left: 0; border-left: 0; }
.result-heading { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 16px; align-items: baseline; }
.result-heading #selected { font-size: .93rem !important; line-height: 1.1; }
.ally-role-card { padding: 22px 24px; }
.role-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin: 0; padding: 0; border: 0; border-radius: 0; color: #b9cce4; font-size: .76rem; }
.role-filter legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.role-filter label { cursor: pointer; font-size: 1rem; line-height: 1.6; }
.role-filter input { accent-color: #159ee6; vertical-align: -1px; }
.weight-filter { margin: 0; padding: 22px 24px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.weight-filter.is-dirty { border-color: #d8a44a; background: linear-gradient(180deg, #1c2431, #13161f); box-shadow: 0 0 0 3px #d8a44a22; }
.weight-filter-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: center; }
.weight-filter-copy { display: grid; gap: 4px; }
.weight-filter-header .card-title { margin-bottom: 0; font-size: 1.1rem; }
.weight-filter.is-dirty .weight-filter-header .card-title { color: #ffe0a6; }
.weight-reset { border: 1px solid #507aa6; border-radius: 999px; padding: 7px 12px; background: transparent; color: #a9d4ff; font: inherit; font-size: .73rem; font-weight: 700; cursor: pointer; transition: .16s ease; }
.weight-reset:hover { border-color: #83ccff; color: #d7ecff; background: #132544; }
.weight-reset:focus-visible { outline: none; border-color: #83ccff; box-shadow: 0 0 0 3px #83ccff33; }
.weight-bar { position: relative; display: flex; width: 100%; height: 28px; margin-top: 12px; border: 1px solid #355170; border-radius: 999px; overflow: hidden; background: #0a1323; box-shadow: inset 0 1px 0 #ffffff08; }
.weight-segment { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; transition: width .12s ease; }
.weight-segment-label { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 1px 8px; border-radius: 999px; background: #ffffff; color: #0a1323; font-size: .76rem; font-weight: 900; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 4px #0000002b; }
.weight-segment-label[hidden] { display: none !important; }
.weight-segment.tank { background: linear-gradient(90deg, #2d74d4, #5ea5ff); }
.weight-segment.damage { background: linear-gradient(90deg, #f08b31, #ffd067); }
.weight-segment.support { background: linear-gradient(90deg, #1f9259, #67d59d); }
.weight-slider-stack { position: relative; margin-top: -24px; padding: 0 0 8px; z-index: 1; }
.weight-slider-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.weight-slider { position: absolute; left: 0; width: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: none; pointer-events: none; }
.weight-slider::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.weight-slider::-moz-range-track { height: 32px; background: transparent; }
.weight-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 20px; margin-top: 2px; border: 2px solid #e8f5ff; border-radius: 999px; background-color: #72befe; background-position: center; background-repeat: no-repeat; background-size: 16px 10px; box-shadow: 0 0 0 3px #83ccff24, 0 8px 18px #0007; pointer-events: auto; cursor: ew-resize; }
.weight-slider::-moz-range-thumb { width: 26px; height: 20px; border: 2px solid #e8f5ff; border-radius: 999px; background-color: #72befe; background-position: center; background-repeat: no-repeat; background-size: 16px 10px; box-shadow: 0 0 0 3px #83ccff24, 0 8px 18px #0007; pointer-events: auto; cursor: ew-resize; }
.weight-slider#weight-boundary-1::-webkit-slider-thumb { background-color: #5ea5ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M4.5 1.5 1.5 5l3 3.5M11.5 1.5 14.5 5l-3 3.5M2.5 5h11' fill='none' stroke='%23081418' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E"); }
.weight-slider#weight-boundary-2::-webkit-slider-thumb { background-color: #ffd067; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M4.5 1.5 1.5 5l3 3.5M11.5 1.5 14.5 5l-3 3.5M2.5 5h11' fill='none' stroke='%23401f00' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E"); }
.weight-slider#weight-boundary-1::-moz-range-thumb { background-color: #5ea5ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M4.5 1.5 1.5 5l3 3.5M11.5 1.5 14.5 5l-3 3.5M2.5 5h11' fill='none' stroke='%23081418' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E"); }
.weight-slider#weight-boundary-2::-moz-range-thumb { background-color: #ffd067; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M4.5 1.5 1.5 5l3 3.5M11.5 1.5 14.5 5l-3 3.5M2.5 5h11' fill='none' stroke='%23401f00' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3C/svg%3E"); }
.weight-slider:focus-visible { outline: none; }
.weight-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #83ccff44, 0 8px 18px #0007; }
.weight-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px #83ccff44, 0 8px 18px #0007; }
.weight-filter.is-overlapping #weight-boundary-1::-webkit-slider-thumb { transform: translateX(-6px); }
.weight-filter.is-overlapping #weight-boundary-2::-webkit-slider-thumb { transform: translateX(6px); }
.weight-filter.is-overlapping #weight-boundary-1::-moz-range-thumb { transform: translateX(-6px); }
.weight-filter.is-overlapping #weight-boundary-2::-moz-range-thumb { transform: translateX(6px); }
.weight-slider-stack::after { content: ""; display: block; height: 32px; }
.weight-filter-actions { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-top: 10px; }
.weight-filter-actions { justify-content: center; }
.weight-cancel { border: 1px solid #6f7f96; border-radius: 999px; padding: 7px 14px; background: #1a2330; color: #7f91aa; font: inherit; font-size: .73rem; font-weight: 800; cursor: default; transition: .16s ease; }
.weight-cancel:disabled { opacity: 1; }
.weight-cancel:not(:disabled) { border-color: #83a4c8; background: linear-gradient(180deg, #324055, #202b3a); color: #eef4ff; cursor: pointer; }
.weight-cancel:not(:disabled):hover { border-color: #b8d2f0; background: linear-gradient(180deg, #3b4d66, #273446); }
.weight-cancel:not(:disabled):focus-visible { outline: none; border-color: #d7ecff; box-shadow: 0 0 0 3px #d7ecff33; }
.weight-apply { border: 1px solid #6f7f96; border-radius: 999px; padding: 7px 14px; background: #1a2330; color: #7f91aa; font: inherit; font-size: .73rem; font-weight: 800; cursor: default; transition: .16s ease; }
.weight-apply:disabled { opacity: 1; }
.weight-apply:not(:disabled) { border-color: #e1aa4a; background: linear-gradient(180deg, #7b5724, #5c3d14); color: #fff0d1; cursor: pointer; box-shadow: 0 0 0 2px #e1aa4a1c; }
.weight-apply:not(:disabled):hover { border-color: #ffd088; background: linear-gradient(180deg, #8e642b, #6f4917); color: #fff6e3; }
.weight-apply:not(:disabled):focus-visible { outline: none; border-color: #ffd088; box-shadow: 0 0 0 3px #ffd08833; }
#reset { margin-left: 10px; border: 1px solid #507aa6; border-radius: 7px; padding: 5px 9px; background: transparent; color: #a9d4ff; cursor: pointer; }
#reset:disabled { opacity: .45; cursor: default; }
.counter-grid .role-grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.counter-card { display: flex; gap: 14px; min-height: 140px; padding: 14px; border: 1px solid #29415e; border-radius: 14px; background: linear-gradient(120deg, #10203b, #0e1728); }
.counter-card img { width: 82px; height: 82px; object-fit: cover; border-radius: 10px; }
.counter-card h3, .counter-card p { margin: 0; }
.matchup-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.matchup-tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 1.2; }
.matchup-tag.favorable { background: #163b2a; color: #9bf0bf; border: 1px solid #276b48; }
.matchup-tag.unfavorable { background: #451c21; color: #ff9fa7; border: 1px solid #7e313c; }
.matchup-tag.neutral { background: #2a3344; color: #c6d0e3; border: 1px solid #4b5c7d; }
.assessment { color: #8ee9bc; font-size: .85rem; font-weight: 700; margin-top: 4px !important; }
.star-rating { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; line-height: 1; }
.star-rating.compact { gap: 1px; }
.star { position: relative; display: inline-block; width: .95em; height: .95em; line-height: 1; }
.star::before { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #40506b; line-height: 1; }
.star.full::before { color: #ffbf47; }
.star.half::after { content: "★"; position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; justify-content: flex-start; width: 50%; overflow: hidden; color: #ffbf47; line-height: 1; }
.star-rating.compact .star { width: .82em; height: .82em; }
.detail-label { color: #7896bf; font-size: .68rem; font-weight: 700; letter-spacing: .08em; margin-top: 10px !important; }
.reason { color: #bbcae0; font-size: .78rem; line-height: 1.45; margin-top: 3px !important; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.counter-card details { margin-top: 8px; color: #93add0; font-size: .72rem; }
.counter-card summary { cursor: pointer; color: #83ccff; }
.raw-text { margin-top: 6px !important; line-height: 1.45; }
.counter-card a { display: inline-block; margin-top: 7px; color: #83ccff; font-size: .75rem; }
.matchup-detail { width: 100%; margin-top: 12px; padding: 10px 0 0; border: 0; border-top: 1px solid #29415e; background: transparent; text-align: left; color: inherit; }
.hero-card:active { border-color: #83ccff; transform: translateY(-2px); background: linear-gradient(180deg, #1a2c49, #12213a); }
.hero-card:active::before { inset: -2px; background: linear-gradient(180deg, #b9edff, #4ca9df); box-shadow: 0 0 12px #159ee655; }
.matchup-detail:active .matchup-title { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
  .hero-card:hover { border-color: #83ccff; transform: translateY(-2px); background: linear-gradient(180deg, #1a2c49, #12213a); }
  .hero-card:hover::before { inset: -2px; background: linear-gradient(180deg, #b9edff, #4ca9df); box-shadow: 0 0 12px #159ee655; }
  .enemy-panel:not(.results) .hero-card:hover { border-color: #e0556a; transform: translateY(-2px); background: linear-gradient(180deg, #491a22, #3a1219); }
  .enemy-panel:not(.results) .hero-card:hover::before { inset: -2px; background: linear-gradient(180deg, #e2d8da, #c96173); box-shadow: 0 0 12px #e0556a55; }
  .matchup-detail:hover .matchup-title { text-decoration: underline; }
}
.matchup-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.matchup-title { margin: 0; font-size: .8rem; font-weight: 700; }
.matchup-score { color: #9fb6d7; font-size: .75rem; white-space: nowrap; display: inline-flex; align-items: center; }
.matchup-title.favorable { color: #8ee9bc; }
.matchup-title.unfavorable { color: #ff8585; }
.matchup-title.synergy-title { color: #b7dfc4; }
.matchup-source { padding: 10px; border: 1px solid #243754; border-radius: 10px; background: #0d1829; }
.matchup-source-title { margin: 0; color: #d4e6ff; font-size: .75rem; font-weight: 700; }
.matchup-source-text { margin: 6px 0 0; color: #bbcae0; font-size: .76rem; line-height: 1.5; white-space: pre-wrap; }
.matchup-feedback { padding: 12px; border: 1px solid #5c3141; border-radius: 12px; background: linear-gradient(180deg, #2b1630, #151223); box-shadow: inset 0 1px 0 #ffffff08; }
.matchup-feedback-header h3 { margin: 0; font-size: .84rem; color: #ffe1ea; }
.matchup-feedback-header p { margin: 5px 0 0; color: #d4aebb; font-size: .73rem; line-height: 1.45; }
.matchup-feedback-form { display: grid; gap: 10px; margin-top: 12px; }
.matchup-feedback-form label { display: grid; gap: 6px; }
.matchup-feedback-form span { color: #f1d1db; font-size: .74rem; font-weight: 700; }
.matchup-feedback-form select,
.matchup-feedback-form textarea { width: 100%; border: 1px solid #513447; border-radius: 9px; padding: 10px 11px; background: #0e1020; color: #f8f3f5; font: inherit; }
.matchup-feedback-form textarea { resize: vertical; min-height: 92px; }
.matchup-feedback-form select:focus,
.matchup-feedback-form textarea:focus { outline: none; border-color: #d47a97; box-shadow: 0 0 0 3px #d47a9726; }
.matchup-feedback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.matchup-feedback-actions button { border: 1px solid #8a4660; border-radius: 999px; padding: 9px 14px; background: linear-gradient(180deg, #5a233c, #311929); color: #ffe7ee; font: inherit; font-size: .75rem; font-weight: 700; line-height: 1; cursor: pointer; }
.matchup-feedback-actions button:disabled { opacity: .55; cursor: default; }
.matchup-feedback-status { margin: 0; color: #d4aebb; font-size: .73rem; line-height: 1.4; }
.matchup-modal[hidden] { display: none !important; }
.matchup-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: #020611bf; }
.matchup-modal-card { width: min(760px, 100%); max-height: min(80vh, 900px); overflow: auto; padding: 18px; border: 1px solid #34507a; border-radius: 16px; background: linear-gradient(180deg, #132544, #0a1323); box-shadow: 0 24px 80px #000a; }
.matchup-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.matchup-modal-header h2 { margin: 0; }
.matchup-modal-header button { border: 1px solid #507aa6; border-radius: 8px; padding: 6px 10px; background: transparent; color: #a9d4ff; cursor: pointer; }
.matchup-modal-body { display: grid; gap: 10px; }
.matchup-modal-meta { margin: 0 0 4px; color: #9fb6d7; font-size: .8rem; }
.recognition-toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(460px, calc(100% - 48px)); padding: 14px 17px; border: 1px solid #6dd8a4; border-radius: 10px; background: #102d29; color: #d7ffea; box-shadow: 0 12px 32px #0008; }
.team-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.team-layout > .decision-panel { width: 100%; }
.counter-panel { display: flex; flex-direction: column; }
.counter-panel .ally-role-card { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #29415e; }
.counter-panel .ally-role-card h3 { margin: 0 0 8px; color: #cfe7ff; font-size: .86rem; font-weight: 800; letter-spacing: .04em; }
.counter-panel .status { margin: 0 0 12px; }
.counter-panel .status:empty { display: none; }
.counter-panel .counter-grid { --treemap-gap: 6px; position: relative; width: 100%; margin-top: auto; margin-bottom: auto; aspect-ratio: 1000 / 620; }
.counter-panel .counter-card { position: absolute; display: block; left: calc(var(--tile-x) + (var(--treemap-gap) / 2)); top: calc(var(--tile-y) + (var(--treemap-gap) / 2)); width: calc(var(--tile-width) - var(--treemap-gap)); height: calc(var(--tile-height) - var(--treemap-gap)); min-height: 0; padding: 13px; overflow: visible; border-color: hsl(var(--heat-hue) 58% calc(var(--heat-lightness) + 18%)); border-radius: 3px; background: transparent; box-shadow: inset 0 1px 0 #ffffff42, 0 10px 24px #0000002b; }
.counter-panel .counter-card:has(details[open]) { z-index: 10; }
.counter-panel .counter-placeholder { position: absolute; left: calc(var(--tile-x) + (var(--treemap-gap) / 2)); top: calc(var(--tile-y) + (var(--treemap-gap) / 2)); width: calc(var(--tile-width) - var(--treemap-gap)); height: calc(var(--tile-height) - var(--treemap-gap)); border: 1px dashed #5b6b8155; border-radius: 3px; background: linear-gradient(145deg, #16233a70, #0a132170); }
.counter-panel .counter-rank-label { position: absolute; z-index: 3; top: 0; left: 0; display: flex; align-items: baseline; gap: .05em; min-width: 34px; min-height: 30px; max-width: 100%; margin: 0; padding: 4px 8px; border: 1px solid #ffffff63; border-top: 0; border-left: 0; border-radius: 0 0 4px; background: #07101ed9; color: #fff; box-shadow: 3px 3px 10px #0007; font-size: clamp(1rem, 2vw, 1.55rem); font-weight: 900; letter-spacing: .01em; line-height: 1; text-shadow: 0 1px 3px #000a; }
.counter-panel .counter-rank-name { min-width: 0; margin-left: .22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counter-panel .counter-rank-1 .counter-rank-label { border-color: #f0c85b; background: linear-gradient(135deg, #4b3508f5, #171006f5); color: #ffe58a; box-shadow: 3px 3px 12px #000a, 0 0 10px #e3b83c55; text-shadow: 0 1px 3px #000, 0 0 7px #f0c85b55; }
.counter-panel .counter-rank-2 .counter-rank-label { border-color: #cbd5df; background: linear-gradient(135deg, #3b4651f5, #15191df5); color: #f1f5f8; box-shadow: 3px 3px 12px #000a, 0 0 9px #cbd5df45; text-shadow: 0 1px 3px #000, 0 0 6px #dfe7ee44; }
.counter-panel .counter-rank-3 .counter-rank-label { border-color: #c98250; background: linear-gradient(135deg, #4a2513f5, #1a0e08f5); color: #f1ad7a; box-shadow: 3px 3px 12px #000a, 0 0 9px #c56f3d4d; text-shadow: 0 1px 3px #000, 0 0 6px #d7825044; }
.counter-panel .counter-card img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; clip-path: inset(0 round 3px); }
.counter-panel .counter-card .counter-portrait { z-index: 1; object-fit: contain; object-position: center; opacity: 1; }
.counter-panel .counter-card > div { position: relative; z-index: 2; display: flex; height: 100%; flex-direction: column; align-items: flex-end; justify-content: flex-end; min-width: 0; text-align: right; }
.counter-panel .counter-card .assessment { color: #fff4c8; font-size: .76rem; text-align: right; text-shadow: 0 1px 3px #0009; }
.counter-panel .counter-card .matchup-tags { display: none; }
.counter-panel .counter-card details { position: static; align-self: flex-end; margin-top: 7px; color: #eef8ff; font-size: .66rem; text-align: right; }
.counter-panel .counter-card summary { color: #eef8ff; text-shadow: 0 1px 4px #000b; }
.counter-panel .counter-card details[open] { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; width: min(160px, 40vw); max-height: 360px; margin: 0; padding: 10px; overflow: auto; border: 1px solid #ffffff42; border-radius: 6px; background: #07101ef5; box-shadow: 0 12px 30px #000b; }
.counter-panel .counter-card details[open] summary { margin-bottom: 7px; }
.counter-panel .counter-card .matchup-detail { margin-top: 7px; padding-top: 7px; border-top-color: #ffffff28; color: #eef8ff; }
.counter-panel .counter-card .synergy-evidence { text-align: left; }
.counter-panel .counter-card .synergy-evidence p { margin: 0; }
.counter-panel .counter-card .synergy-score { margin-top: 4px; color: #fff4c8; font-size: .68rem; }
.counter-panel .counter-card .synergy-evidence a { margin-top: 5px; }
.counter-panel .counter-card .namu-synergy-evidence .matchup-title { color: #b7dfc4; }
.counter-panel .counter-rank-2 { padding: 10px; }
.counter-panel .counter-rank-3 { padding: 9px; }
.counter-panel .counter-rank-4,
.counter-panel .counter-rank-5 { padding: 8px; }
#allies { min-height: 640px; }
.team-layout > .decision-panel:not(.results) .role-grid { overflow-x: auto; padding-bottom: 4px; }
.team-layout > .decision-panel:not(.results) .role-grid.two-row-major { display: grid; grid-template-rows: repeat(2, minmax(0, auto)); gap: 6px; }
.team-layout > .decision-panel:not(.results) .role-grid-row { display: flex; gap: 6px; min-width: max-content; }
.team-layout > .decision-panel:not(.results) .role-grid-row .hero-card { flex: 0 0 58px; }
.team-layout > .decision-panel:not(.results) .hero-card { display: block; padding: 5px 4px 6px; text-align: center; min-width: 58px; }
.team-layout > .decision-panel:not(.results) .hero-card img { width: 100%; height: auto; aspect-ratio: 1; }
.team-layout > .decision-panel:not(.results) .hero-card span { padding-top: 4px; font-size: .8rem; letter-spacing: -.03em; }
.ally-panel:not(.results) .hero-card.selected { border-color: #d8efff; background: linear-gradient(180deg, #27619b, #173c67); }
.ally-panel:not(.results) .hero-card.selected::before { background: linear-gradient(180deg, #edf9ff, #4a9bd5); box-shadow: 0 0 18px #59b8eb99; }
.enemy-panel:not(.results) .hero-card { border-color: #52252c; background: linear-gradient(180deg, #341218, #240c10); }
.enemy-panel:not(.results) .hero-card:active { border-color: #e0556a; transform: translateY(-2px); background: linear-gradient(180deg, #491a22, #3a1219); }
.enemy-panel:not(.results) .hero-card:active::before { inset: -2px; background: linear-gradient(180deg, #e2d8da, #c96173); box-shadow: 0 0 12px #e0556a55; }
.enemy-panel:not(.results) .hero-card.selected { border-color: #edeadb; background: linear-gradient(180deg, #9b273a, #671724); }
.enemy-panel:not(.results) .hero-card.selected::before { background: linear-gradient(180deg, #f6f6f6, #c5596c); box-shadow: 0 0 18px #e0556a99; }
.enemy-roster:not(.composition-disabled) .card-title { color: #ffd7de; }
.enemy-roster #selected { color: #d9a8b1; }
.enemy-roster .role-group h3 { color: #f2cbd2; }
.enemy-roster .role-group h3 span { background: #4a1b24; color: #ee8fa0; }
.enemy-roster #reset,
.enemy-roster .weight-reset { border-color: #914353; color: #f0a7b4; }
.enemy-roster .weight-reset:hover { border-color: #e66b80; color: #ffe0e5; background: #481923; }
.enemy-roster .weight-reset:focus-visible { border-color: #e66b80; box-shadow: 0 0 0 3px #e66b8033; }
.enemy-roster .weight-filter { border-top-color: #8a3442; }
.enemy-roster .weight-bar { border-color: #78404a; }
.team-layout .weight-filter { margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid #3d4d67; }
.team-layout .ally-weight-filter { border-top-color: #2f5f99; }
.ally-weight-filter.is-dirty { border-color: #6ca9df; background: linear-gradient(180deg, #142844, #0e1b2d); box-shadow: 0 0 0 3px #6ca9df22; }
.ally-weight-filter.is-dirty .weight-filter-header .card-title { color: #cfe7ff; }
.recommendation-row .ally-role-card { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid #29415e; }
.recommendation-row .ally-role-card h3 { margin: 0 0 10px; color: #cfe7ff; font-size: .86rem; font-weight: 800; letter-spacing: .04em; }
#reset-allies { margin-left: 10px; border: 1px solid #507aa6; border-radius: 7px; padding: 5px 9px; background: transparent; color: #a9d4ff; cursor: pointer; }
#reset-allies:disabled { opacity: .45; cursor: default; }
@media (max-width: 800px) { main { width: min(100% - 36px, 1720px); } .site-toolbar { padding: 0 18px; } .site-toolbar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 0; padding: 12px 0; min-height: 0; } .site-toolbar-emblem { padding-right: 0; } .site-toolbar-main { width: 100%; } .toolbar-actions { grid-column: 1 / -1; width: 100%; justify-content: space-between; } .language-switcher { padding-top: 0; } .battle-rows { gap: 16px; } .paired-row, .capture-row { grid-template-columns: 1fr; gap: 16px; } #heroes { min-height: 540px; } .results { padding-top: 0; } }
@media (max-width: 800px) { .affiliate-promo-banners { grid-template-columns: minmax(0, 728px); gap: 10px; } }
@media (max-width: 540px) { main { width: min(100% - 24px, 1180px); } .intro-card, .paste-panel, .screenshot-preview, .roster-card, .counter-card-shell, .weight-filter, .ally-role-card { padding-left: 16px; padding-right: 16px; } .card-head { align-items: flex-start; } .paste-target { grid-template-columns: 1fr; gap: 14px; } .paste-target-preview { width: 100%; min-width: 0; } .screenshot-preview-crop { width: 100%; min-width: 0; } .screenshot-preview-header { flex-wrap: wrap; justify-content: flex-start; } .promo-title { font-size: 1rem; } .promo-copy { font-size: .82rem; } .toolbar-actions { align-items: stretch; gap: 8px; } .discord-contact { width: 100%; justify-content: center; } .language-switcher { width: 100%; justify-content: center; } .enemy-panel .role-grid.two-row-major { gap: 5px; } .enemy-panel .role-grid-row { gap: 5px; } .enemy-panel .role-grid-row .hero-card { flex-basis: 50px; } .enemy-panel .hero-card { min-width: 50px; padding: 4px 3px 5px; } .enemy-panel .hero-card span { font-size: .76rem; } .counter-grid .role-grid { grid-template-columns: 1fr; } .hero-card { padding: 5px; } }
@media (max-width: 800px) { .team-layout { grid-template-columns: 1fr; gap: 16px; } #allies { min-height: 540px; } }
@media (max-width: 800px) { .battle-rows { grid-template-columns: 1fr; } .capture-row, .team-layout { display: contents; } #screenshot-preview { order: 1; } .ally-panel { order: 2; } .enemy-panel { order: 3; } .counter-panel { order: 4; } }
@media (max-width: 800px) {
  .counter-panel .counter-card:has(details[open]) > .counter-rank-label {
    z-index: 1;
  }
  .counter-panel .counter-card details[open] {
    position: fixed;
    inset: 12px;
    z-index: 100;
    box-sizing: border-box;
    width: auto;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 16px;
    border-radius: 12px;
    text-align: left;
    overscroll-behavior: contain;
  }
  .counter-panel .counter-card details[open] summary {
    position: sticky;
    top: -16px;
    z-index: 1;
    margin: -16px -16px 8px;
    padding: 14px 16px;
    background: #07101e;
    text-align: right;
  }
}
@media (max-width: 540px) { .team-layout > .decision-panel:not(.results) .role-grid.two-row-major { gap: 5px; } .team-layout > .decision-panel:not(.results) .role-grid-row { gap: 5px; } .team-layout > .decision-panel:not(.results) .role-grid-row .hero-card { flex-basis: 50px; } .team-layout > .decision-panel:not(.results) .hero-card { min-width: 50px; padding: 4px 3px 5px; } .team-layout > .decision-panel:not(.results) .hero-card span { font-size: .76rem; } }