.bear-sim {
  width: min(1180px, calc(100% - 32px));
  margin: 34px auto 72px;
  color: #eaf4ff;
}

.bear-sim__header,
.bear-sim__section-heading,
.bear-sim__result-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.bear-sim__header h1 {
  margin: 4px 0 8px;
  font-size: 3.2rem;
  line-height: 1;
}

.bear-sim__header > div > p:last-child,
.bear-sim__helper {
  color: #9fb0c5;
  line-height: 1.55;
}

.bear-sim__version,
.bear-sim__arena-section [data-arena-model] {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.22);
  font-size: 0.75rem;
  font-weight: 800;
}

.bear-sim__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  margin: 24px 0;
  padding: 14px 16px;
  border-left: 3px solid #fbbf24;
  background: rgba(120, 53, 15, 0.18);
  color: #dbe7f4;
  line-height: 1.5;
}

.bear-sim__notice strong {
  color: #fde68a;
}

.bear-sim__notice--experimental {
  border-left-color: #38bdf8;
  background: rgba(3, 105, 161, 0.14);
}

.bear-sim__notice--experimental strong {
  color: #bae6fd;
}

.bear-sim__form,
.bear-sim__section,
.bear-sim__arena-section,
.bear-sim__results,
.bear-sim__comparison {
  display: grid;
  gap: 18px;
}

.bear-sim__section,
.bear-sim__arena-section,
.bear-sim__results,
.bear-sim__comparison {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(5, 14, 27, 0.78);
}

.bear-sim__comparison-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.bear-sim__comparison-header h2,
.bear-sim__comparison-best h3,
.bear-sim__comparison-changes h3 {
  margin: 4px 0 0;
}

.bear-sim__comparison-header p:last-child {
  margin: 7px 0 0;
  color: #9fb0c5;
  font-size: 0.8rem;
}

.bear-sim__comparison-session-actions,
.bear-sim__comparison-entry-actions,
.bear-sim__comparison-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bear-sim__comparison-session-actions button,
.bear-sim__comparison-entry-actions button,
.bear-sim__comparison-show-all {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 0.74rem;
}

.bear-sim__danger-action {
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #fecaca !important;
}

.bear-sim__comparison-empty {
  display: grid;
  gap: 5px;
  padding: 22px;
  border: 1px dashed rgba(125, 211, 252, 0.28);
  color: #9fb0c5;
  text-align: center;
}

.bear-sim__comparison-empty strong {
  color: #eaf4ff;
}

.bear-sim__comparison-best {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(260px, 1.2fr) minmax(190px, 0.8fr);
  align-items: center;
  gap: 14px 20px;
  padding: 18px;
  border: 1px solid rgba(52, 245, 197, 0.46);
  border-left: 4px solid #34f5c5;
  border-radius: 7px;
  background: rgba(7, 35, 39, 0.58);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.bear-sim__comparison-best > div:first-child,
.bear-sim__comparison-best > strong,
.bear-sim__comparison-best > p,
.bear-sim__comparison-best > .bear-sim__comparison-skill-badge {
  grid-column: 1;
}

.bear-sim__comparison-best > .bear-sim__comparison-avatars,
.bear-sim__comparison-best > .bear-sim__comparison-distribution {
  grid-column: 2;
}

.bear-sim__comparison-best > .bear-sim__comparison-best-damage {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.bear-sim__comparison-best > p {
  margin: 0;
  color: #86efac;
  font-size: 0.78rem;
  font-weight: 800;
}

.bear-sim__comparison-best-damage {
  display: grid;
  gap: 5px;
  text-align: right;
}

.bear-sim__comparison-best-damage span {
  color: #9fb0c5;
  font-size: 0.72rem;
}

.bear-sim__comparison-best-damage b {
  color: #fde68a;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.bear-sim__comparison-avatars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bear-sim__comparison-avatars > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.bear-sim__comparison-avatars img {
  width: 34px;
  height: 40px;
  border-radius: 5px;
  object-fit: cover;
  object-position: top center;
}

.bear-sim__comparison-avatars small,
.bear-sim__comparison-hero-names {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bear-sim__comparison-distribution {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.bear-sim__comparison-distribution > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 7px 8px;
  background: rgba(15, 34, 54, 0.72);
}

.bear-sim__comparison-distribution dt {
  overflow: hidden;
  color: #9fb0c5;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bear-sim__comparison-distribution dd {
  margin: 0;
  color: #f8fafc;
  font-size: 0.76rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bear-sim__comparison-skill-badge,
.bear-sim__comparison-type {
  width: fit-content;
  padding: 5px 7px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.18);
  font-size: 0.67rem;
  font-weight: 900;
}

.bear-sim__comparison-compatibility {
  padding: 11px 13px;
  border-left: 3px solid #fbbf24;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.16);
  font-size: 0.8rem;
}

.bear-sim__comparison-changes {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-left: 3px solid #38bdf8;
  background: rgba(3, 105, 161, 0.12);
}

.bear-sim__comparison-changes dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 18px;
  margin: 0;
}

.bear-sim__comparison-changes dl > div {
  display: grid;
  gap: 2px;
}

.bear-sim__comparison-changes dt {
  color: #9fb0c5;
  font-size: 0.7rem;
}

.bear-sim__comparison-changes dd,
.bear-sim__comparison-changes p {
  margin: 0;
  color: #eaf4ff;
  font-size: 0.8rem;
  font-weight: 800;
}

.bear-sim__comparison-toolbar {
  justify-content: flex-end;
}

.bear-sim__comparison-toolbar label {
  width: min(100%, 230px);
}

.bear-sim__comparison-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.bear-sim__comparison-entry {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: rgba(9, 24, 41, 0.72);
}

.bear-sim__comparison-entry.is-best {
  border-color: rgba(52, 245, 197, 0.44);
  box-shadow: inset 3px 0 #34f5c5;
}

.bear-sim__comparison-entry.is-current {
  background: rgba(9, 38, 49, 0.76);
}

.bear-sim__comparison-entry header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.bear-sim__comparison-entry header > div {
  display: grid;
  gap: 2px;
}

.bear-sim__comparison-entry header span,
.bear-sim__comparison-entry time,
.bear-sim__comparison-differences {
  color: #9fb0c5;
  font-size: 0.7rem;
}

.bear-sim__comparison-hero-names {
  margin: 0;
  color: #dbeafe;
  font-size: 0.8rem;
  font-weight: 800;
}

.bear-sim__comparison-entry-damage {
  color: #f8fafc;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.bear-sim__comparison-differences {
  display: grid;
  gap: 3px;
}

.bear-sim__comparison-entry-actions {
  margin-top: auto;
}

.bear-sim__comparison-entry-actions button:first-child {
  color: #06111f;
  background: #34f5c5;
}

.bear-sim__comparison-show-all {
  justify-self: center;
}

.bear-sim__comparison-status {
  min-height: 1.2em;
  margin: 0;
  color: #86efac;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.bear-sim__section-heading h2,
.bear-sim__summary h2,
.bear-sim__result-main h2 {
  margin: 4px 0 0;
}

.bear-sim__section-heading a {
  color: #7dd3fc;
  font-size: 0.85rem;
  font-weight: 800;
}

.bear-sim__hero-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bear-sim__hero-group {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
}

.bear-sim__hero-group legend {
  padding: 0 7px;
  color: #f8fafc;
  font-weight: 900;
}

.bear-sim__hero-option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 84px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  border-radius: 8px;
  background: rgba(8, 22, 39, 0.7);
  cursor: pointer;
}

.bear-sim__hero-option:hover,
.bear-sim__hero-option:focus-within,
.bear-sim__hero-option.is-selected {
  border-color: rgba(52, 245, 197, 0.72);
  box-shadow: inset 3px 0 #34f5c5;
}

.bear-sim .bear-sim__hero-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.bear-sim__demo-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  background: rgba(120, 53, 15, 0.28);
  color: #fde68a;
  font-size: 0.72rem;
  font-weight: 900;
}

.bear-sim__demo-explanation {
  margin: -4px 0 0;
  color: #b9c9d9;
  line-height: 1.5;
}

.bear-sim__hero-option.is-demo {
  border-color: rgba(125, 211, 252, 0.24);
  cursor: default;
}

.bear-sim__hero-option.is-demo:hover,
.bear-sim__hero-option.is-demo:focus-within,
.bear-sim__hero-option.is-demo.is-selected {
  border-color: rgba(125, 211, 252, 0.38);
  box-shadow: inset 3px 0 #38bdf8;
}

.bear-sim__load-heroes {
  justify-self: start;
  min-height: 42px;
}

.bear-sim__hero-image,
.bear-sim__hero-image img {
  display: grid;
  width: 58px;
  height: 68px;
  place-items: center;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px;
  background: #142438;
}

.bear-sim__hero-image b {
  font-size: 1.4rem;
}

.bear-sim__hero-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.bear-sim__hero-copy strong {
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bear-sim__hero-copy small,
.bear-sim__hero-copy span,
.bear-sim__hero-copy em {
  color: #a8b8cb;
  font-size: 0.7rem;
  line-height: 1.35;
}

.bear-sim__hero-copy em {
  color: #fde68a;
  font-style: normal;
}

.bear-sim__empty {
  padding: 18px 8px;
  color: #9fb0c5;
  font-size: 0.82rem;
  line-height: 1.5;
}

.bear-sim__empty a {
  display: block;
  margin-top: 7px;
  color: #7dd3fc;
}

.bear-sim__troop-grid,
.bear-sim__stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bear-sim__troop-row,
.bear-sim__stat-grid > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-top: 2px solid rgba(125, 211, 252, 0.28);
  background: rgba(11, 25, 43, 0.62);
}

.bear-sim__troop-row > strong,
.bear-sim__stat-grid > div > strong {
  grid-column: 1 / -1;
}

.bear-sim__troop-row > label:last-child {
  grid-column: 1 / -1;
}

.bear-sim__percentage-control {
  position: relative;
  display: block;
  min-width: 0;
}

.bear-sim__percentage-control input {
  padding-right: 34px;
  font-variant-numeric: tabular-nums;
}

.bear-sim__percentage-control > span {
  position: absolute;
  top: 50%;
  right: 11px;
  color: #7dd3fc;
  font-weight: 900;
  pointer-events: none;
  transform: translateY(-50%);
}

.bear-sim__percentage-control input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.bear-sim label {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #b7c5d6;
  font-size: 0.76rem;
  font-weight: 800;
}

.bear-sim input,
.bear-sim select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 7px;
  padding: 9px 10px;
  color: #f8fafc;
  background: #111f31;
}

.bear-sim__capacity {
  width: min(100%, 330px);
}

.bear-sim__formation-summary {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  border-radius: 7px;
  background: rgba(7, 18, 32, 0.7);
}

.bear-sim__formation-summary > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.bear-sim__formation-summary > div > span {
  color: #9fb0c5;
  font-size: 0.78rem;
}

.bear-sim__formation-summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.bear-sim__formation-summary dl > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(15, 34, 54, 0.72);
}

.bear-sim__formation-summary dt {
  overflow: hidden;
  color: #aab9cb;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bear-sim__formation-summary dd {
  margin: 0;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bear-sim__formation-summary .bear-sim__formation-total,
.bear-sim__formation-summary .bear-sim__formation-used {
  border-left: 2px solid rgba(52, 245, 197, 0.65);
}

.bear-sim__formation-used {
  grid-column: span 2;
}

.bear-sim .bear-sim__double-counting {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 7px;
  background: rgba(3, 105, 161, 0.1);
}

.bear-sim .bear-sim__double-counting input {
  flex: 0 0 auto;
  width: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: #38bdf8;
}

.bear-sim__summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr);
  gap: 18px;
  margin-top: 18px;
  padding: 20px 22px;
  border-left: 3px solid #34f5c5;
  background: rgba(5, 30, 35, 0.58);
}

.bear-sim__summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.bear-sim__summary dl div {
  min-width: 0;
}

.bear-sim__summary dt {
  color: #8fa2b8;
  font-size: 0.72rem;
}

.bear-sim__summary dd {
  margin: 5px 0 0;
  color: #f8fafc;
  font-weight: 900;
}

.bear-sim__summary > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #a8b8cb;
}

.bear-sim__arena-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: #090f18;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.42);
}

.bear-sim__game,
.bear-sim__game canvas {
  width: 100% !important;
  height: 100% !important;
}

.bear-sim__game canvas {
  display: block;
}

.bear-sim__arena-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  background: #090f18;
}

.bear-sim__arena-loading[hidden] {
  display: none;
}

.bear-sim__arena-loading span {
  width: min(260px, 70%);
  height: 5px;
  overflow: hidden;
  background: #233145;
}

.bear-sim__arena-loading i {
  display: block;
  width: 5%;
  height: 100%;
  background: #fbbf24;
}

.bear-sim__arena-fallback {
  position: relative;
  display: grid;
  min-height: 180px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(251, 191, 36, 0.24);
  border-radius: 8px;
  color: #fef3c7;
  background: #090f18;
  text-align: center;
}

.bear-sim__arena-fallback[hidden] {
  display: none;
}

.bear-sim__arena-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.36;
}

.bear-sim__arena-fallback span {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding: 20px;
  font-weight: 800;
}

.bear-sim__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bear-sim__start {
  justify-self: center;
  width: min(100%, 430px);
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  color: #141006;
  background: linear-gradient(100deg, #fde68a, #f59e0b);
  font-size: 1.1rem;
  font-weight: 1000;
  cursor: pointer;
}

.bear-sim__start:disabled {
  opacity: 0.55;
  cursor: wait;
}

.bear-sim__results {
  grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.4fr);
  border-color: rgba(52, 245, 197, 0.32);
}

.bear-sim__results[hidden] {
  display: none;
}

.bear-sim__result-main h2 {
  color: #fef3c7;
  font-size: 2rem;
}

.bear-sim__result-main span {
  color: #9fb0c5;
}

.bear-sim__result-main {
  display: grid;
  align-content: start;
  gap: 7px;
}

.bear-sim__result-range {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(125, 211, 252, 0.2);
}

.bear-sim__result-range[hidden],
.bear-sim__proc-badge[hidden],
.bear-sim__proc-result-summary[hidden] {
  display: none;
}

.bear-sim__result-range small {
  color: #9fb0c5;
}

.bear-sim__result-range strong {
  color: #d7fbff;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.bear-sim__proc-badge,
.bear-sim__comparison-proc-badge {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 999px;
  color: #fde68a !important;
  background: rgba(120, 53, 15, 0.2);
  font-size: 0.67rem;
  font-weight: 900;
}

.bear-sim__proc-result-summary {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  color: #a7f3d0;
  font-size: 0.78rem;
}

.bear-sim__results dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.bear-sim__results dl div {
  padding: 12px;
  border-top: 2px solid rgba(251, 191, 36, 0.4);
  background: rgba(15, 28, 44, 0.65);
}

.bear-sim__results dt {
  color: #9fb0c5;
  font-size: 0.74rem;
}

.bear-sim__results dd {
  margin: 6px 0 0;
  font-weight: 900;
}

.bear-sim__results > div:nth-of-type(2),
.bear-sim__results > ul,
.bear-sim__result-actions,
.bear-sim__skill-comparison,
.bear-sim__experimental-proc {
  grid-column: 1 / -1;
}

.bear-sim__experimental-proc {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 7px;
  background: rgba(25, 23, 20, 0.46);
}

.bear-sim__experimental-proc[hidden] {
  display: none;
}

.bear-sim__experimental-proc header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.bear-sim__experimental-proc h3,
.bear-sim__experimental-proc p {
  margin: 0;
}

.bear-sim__experimental-proc [data-experimental-skill-list] {
  display: grid;
  gap: 8px;
}

.bear-sim__experimental-proc article {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-left: 2px solid #fbbf24;
  background: rgba(120, 53, 15, 0.12);
}

.bear-sim__experimental-proc article span,
.bear-sim__experimental-proc article small,
.bear-sim__experimental-proc > p,
.bear-sim__proc-model-details p {
  color: #c7d2df;
  font-size: 0.78rem;
  line-height: 1.5;
}

.bear-sim__experimental-proc article small {
  color: #fde68a;
  font-weight: 800;
}

.bear-sim__experimental-proc .bear-sim__proc-warning {
  color: #fcd9a8;
  font-size: 0.72rem;
}

.bear-sim__experimental-proc details {
  border-top: 1px solid rgba(251, 191, 36, 0.16);
  padding-top: 9px;
}

.bear-sim__experimental-proc summary {
  width: fit-content;
  color: #7dd3fc;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.bear-sim__proc-comparison {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px !important;
}

.bear-sim__proc-comparison div:nth-child(2) {
  border-top-color: rgba(52, 245, 197, 0.7);
}

.bear-sim__proc-model-details {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 9px 10px;
  background: rgba(15, 28, 44, 0.46);
}

.bear-sim__skill-comparison {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  background: rgba(3, 20, 35, 0.72);
}

.bear-sim__skill-comparison[hidden] {
  display: none;
}

.bear-sim__skill-comparison h3,
.bear-sim__skill-comparison p {
  margin: 3px 0 0;
}

.bear-sim__skill-comparison > dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bear-sim__skill-comparison > div > ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: #d9f5ff;
  font-size: 0.8rem;
  line-height: 1.55;
}

.bear-sim__skill-comparison > p {
  color: #fde68a;
  font-size: 0.78rem;
}

.bear-sim__results ul {
  margin: 0;
  padding-left: 18px;
  color: #a8b8cb;
  font-size: 0.8rem;
  line-height: 1.6;
}

.bear-sim__result-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.bear-sim__error,
.bear-sim__submit-error {
  margin: 0;
  color: #fca5a5;
  font-weight: 800;
}

.bear-sim__dialog {
  width: min(520px, calc(100% - 28px));
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  padding: 0;
  color: #eaf4ff;
  background: #0b1625;
}

.bear-sim__dialog::backdrop {
  background: rgba(0, 5, 12, 0.78);
}

.bear-sim__dialog form {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.bear-sim__demo-gate-panel {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 24px;
}

.bear-sim__demo-gate-panel > p,
.bear-sim__demo-gate-panel > small {
  margin: 0;
  color: #c7d5e4;
  line-height: 1.55;
}

.bear-sim__demo-gate-panel > small {
  color: #91a8bd;
}

.bear-sim__dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dbe7f4;
  font-size: 1.55rem;
  line-height: 1;
}

.bear-sim__demo-gate-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 10px;
}

.bear-sim__demo-gate-actions a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 7px;
  color: #eaf4ff;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
}

.bear-sim__demo-gate-actions .bear-sim__demo-signup {
  border-color: rgba(251, 191, 36, 0.58);
  background: linear-gradient(115deg, #fbbf24, #fb923c);
  color: #1c1004;
}

.bear-sim__demo-gate-actions a:focus-visible,
.bear-sim__load-heroes:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}

body.bear-demo-gate-open {
  overflow: hidden;
}

.bear-sim__dialog h2,
.bear-sim__dialog p {
  margin: 4px 0 0;
}

.bear-sim__dialog form > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 820px) {
  .bear-sim__hero-columns,
  .bear-sim__troop-grid,
  .bear-sim__stat-grid {
    grid-template-columns: 1fr;
  }

  .bear-sim__summary,
  .bear-sim__results {
    grid-template-columns: 1fr;
  }

  .bear-sim__results > * {
    grid-column: 1 !important;
  }

  .bear-sim__formation-summary dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bear-sim__comparison-best {
    grid-template-columns: 1fr 1fr;
  }

  .bear-sim__comparison-best > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .bear-sim__comparison-best > .bear-sim__comparison-best-damage {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .bear-sim__header h1 {
    font-size: 2.1rem;
  }

  .bear-sim {
    width: min(calc(100% - 20px), 1180px);
    margin-top: 20px;
  }

  .bear-sim__header,
  .bear-sim__section-heading,
  .bear-sim__notice,
  .bear-sim__comparison-header {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .bear-sim__section,
  .bear-sim__arena-section,
  .bear-sim__results,
  .bear-sim__comparison {
    padding: 15px;
  }

  .bear-sim__troop-row,
  .bear-sim__stat-grid > div,
  .bear-sim__summary dl,
  .bear-sim__results dl {
    grid-template-columns: 1fr;
  }

  .bear-sim__troop-row > label:last-child,
  .bear-sim__formation-used {
    grid-column: auto;
  }

  .bear-sim__formation-summary dl {
    grid-template-columns: 1fr;
  }

  .bear-sim__comparison-session-actions,
  .bear-sim__comparison-toolbar,
  .bear-sim__comparison-list,
  .bear-sim__comparison-best,
  .bear-sim__comparison-changes dl {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bear-sim__comparison-toolbar label {
    width: 100%;
  }

  .bear-sim__comparison-entry-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bear-sim__comparison-avatars,
  .bear-sim__comparison-distribution {
    grid-template-columns: 1fr;
  }

  .bear-sim__result-actions,
  .bear-sim__dialog form > div:last-child,
  .bear-sim__demo-gate-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bear-sim__load-heroes {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bear-sim *,
  .bear-sim *::before,
  .bear-sim *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.bear-sim__calibration-note {
  margin-top: 10px;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.bear-sim__calibration-note summary { cursor: pointer; }

.bear-sim__calibration-note span {
  display: block;
  margin-top: 6px;
}

.bear-sim__comparison-calibration-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: 999px;
  color: #d7f7ff;
  background: rgba(8, 47, 73, 0.55);
  font-size: 0.72rem;
  font-weight: 800;
}