#starter.overlay {
  --trail-accent: #86e2d6;
  height: 100dvh;
  min-height: 0;
  padding: max(9px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right))
    max(9px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
}
#starter .trail-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1060px);
  height: min(100%, 820px);
  min-width: 0;
  min-height: 0;
  padding: 0;
}
#starter .setup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: clamp(15px, 2.7vw, 28px) clamp(20px, 3.5vw, 38px) clamp(12px, 2.4vw, 21px);
}
#starter .setup-header::after {
  content: '';
  position: absolute;
  inset: auto 13px 0;
  height: 1px;
  background: linear-gradient(90deg, #80c9bb, #4b6570 38%, #2c414b 84%, transparent);
  pointer-events: none;
}
#starter #starter-kicker { margin: 0 0 6px; color: #9bcec6; overflow-wrap: anywhere; }
#starter #starter-title { font-size: clamp(30px, 5vw, 55px); }
#starter .setup-emblem {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  margin-right: 2px;
  color: #9bded4;
  background: radial-gradient(circle at 70% 25%, #466a6a, #1e343e 75%);
  clip-path: polygon(0 14%, 14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%);
}
#starter .setup-emblem svg { width: 37px; height: 37px; }
#starter .setup-scroll {
  display: grid;
  align-content: start;
  gap: 20px;
  overflow: auto;
  min-width: 0;
  min-height: 0;
  padding: 16px clamp(16px, 3vw, 34px) 20px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #658780 #17242b;
}
#starter .setup-controls, #starter .setup-gear { min-width: 0; }
#starter .setup-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  color: #e0f0e9;
  text-transform: uppercase;
}
#starter .setup-section > span {
  padding: 3px 5px 2px;
  background: #2d4f54;
  color: #b2f1e6;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 80% 100%, 0 100%);
}
#starter .setup-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, #3f6469, transparent); }
#starter .mode-grid { gap: 7px; margin: 0 0 12px; }
#starter .mode-grid .btn {
  position: relative;
  display: grid;
  justify-content: start;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 83px;
  padding: 9px 8px 8px;
  color: #eaf4ed;
  border-color: #42606a;
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(145deg, #233941, #172630 75%);
  text-align: left;
}
#starter .mode-grid .btn span { font-size: 13px; line-height: 1.12; }
#starter .mode-grid .btn small { color: #b7ccc9; font-size: 10px; line-height: 1.2; }
#starter .mode-grid svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #9bc2c2;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#starter .mode-grid .btn:hover { border-color: #92d9d0; }
#starter .mode-grid .btn[aria-pressed='true'] {
  border-color: #91e4d3;
  background: linear-gradient(135deg, #355853, #1b3338 78%);
  box-shadow: inset 3px 0 #91e4d3;
}
#starter .mode-grid .btn[aria-pressed='true'] svg { stroke: #c5f7e9; }
#starter .mode-grid .btn[aria-pressed='true']::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: #b7f4e4;
  box-shadow: 0 0 7px #8df1d99c;
  pointer-events: none;
}
#starter .campaign-picker {
  gap: 6px 9px;
  margin: 0;
  padding: 10px;
  border-color: #435c66;
  border-radius: 2px 9px 2px 9px;
  background: linear-gradient(135deg, #182a34, #14212a 82%);
}
#starter .campaign-picker .section-label { text-transform: uppercase; }
#starter .campaign-picker > .micro { color: #a8e8d8; text-align: right; overflow-wrap: anywhere; }
#starter .campaign-picker select { min-height: 44px; color: #eef4e9; border-color: #60817f; background: #233b43; }
#starter .setup-choice { grid-column: 1 / -1; }
#starter .campaign-picker :is(#classic-rule, #campaign-rule) { color: #bbcfc9; }
#starter .campaign-picker :is(#campaign-tactic, #classic-endless-best) { grid-column: 1 / -1; margin: 0; color: #a8e8d8; font-size: 12px; }
#starter .mode-note { margin: 0; padding: 9px 11px; border-inline-start: 2px solid #7bb8b4; background: #1a2c36; color: #c9dcd7; }
#starter .classic-archetypes { margin-top: 3px; }
#starter .classic-characters { grid-column: 1 / -1; margin-top: 4px; }
#starter #classic-character-label { margin: 0 0 7px; }
#starter #classic-character-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#starter .character-card { display: grid; justify-items: center; gap: 3px; min-width: 0; min-height: 86px; padding: 5px 2px 8px; border: 1px solid #526b70; border-radius: 2px 10px 2px 10px; background: linear-gradient(145deg, #2b4047, #15242e); color: #eaf3e9; cursor: pointer; }
#starter .character-card canvas { display: block; width: 60px; max-width: 100%; height: auto; }
#starter .character-card strong { font-size: 11px; line-height: 1.2; }
#starter .character-card[aria-pressed='true'] { border-color: #c9eea2; background: linear-gradient(135deg, #405742, #20363a); box-shadow: inset 0 -3px #c9eea2; }
#starter .character-card:hover { border-color: #a3cfc3; }
#starter .character-card:is(:focus-visible, [data-pad-focus]) { outline: 3px solid #e3f6ae; outline-offset: 2px; }
#starter #classic-archetype-label { text-transform: uppercase; }
#starter #classic-archetype-grid { gap: 6px; }
#starter #starter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
#starter .starter-card {
  position: relative;
  border-color: #465f68;
  border-radius: 2px 8px 2px 8px;
  background: linear-gradient(150deg, #20333e, #18252e 85%);
  color: #edf4ea;
  overflow-wrap: anywhere;
}
#starter .starter-card:not(:disabled):hover { border-color: #98c9be; }
#starter .starter-card[aria-pressed='true'] {
  border-color: #b5e99e;
  background: linear-gradient(150deg, #344d42, #203334 85%);
  box-shadow: inset 2px 0 #b5e99e;
}
#starter .starter-card:disabled { opacity: 1; color: #c6d0cf; border-style: dashed; background: #17242e; }
#starter .starter-card:disabled svg { opacity: .72; }
#starter .starter-card small { color: #c0d0cd; line-height: 1.3; }
#starter .starter-card strong { line-height: 1.12; }
#starter #classic-archetype-grid .starter-card { min-height: 72px; }
#starter #classic-archetype-grid .starter-card strong { font-size: 13px; }
#starter .mastery-mark {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 5px;
  border: 1px solid #536b72;
  border-radius: 3px;
  color: #c6d8d7;
  font: 750 9px/1.2 var(--mono);
}
#starter .mastery-mark[data-earned] { border-color: #a7865a; background: #3b3326; color: #ffe0a3; }
#starter .classic-mastery-goal { margin: 7px 0 0; padding-left: 8px; border-left: 2px solid #a7865a; color: #eed5ac; font-size: 11px; }
#starter #starter-grid .starter-card { min-height: 104px; gap: 5px; padding: 8px; }
#starter .starter-art { min-height: 27px; }
#starter .starter-art span { color: #acccc7; }
#starter #starter-grid .starter-art svg { width: 32px; height: 26px; flex-basis: 32px; }
#starter .starter-card .card-kicker { padding: 4px 5px 3px; border-radius: 2px 5px 2px 5px; color: #c3e7dc; background: #29454c; }
#starter .starter-card[aria-pressed='true'] .card-kicker { color: #ddfacb; background: #365343; }
#starter .starter-card:disabled .card-kicker { color: #f5d69c; background: #413b37; }
#starter .setup-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px clamp(18px, 3vw, 34px) 14px;
  isolation: isolate;
}
#starter .setup-footer::before {
  content: '';
  position: absolute;
  inset: 0 1px 1px;
  z-index: -1;
  background: linear-gradient(120deg, #253a45, #182831 70%);
  border-top: 1px solid #526f77;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 17px 100%, 0 calc(100% - 17px));
  pointer-events: none;
}
#starter .classic-brief { min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
#starter .classic-brief > div:last-child { min-width: 0; }
#starter .classic-brief .micro { color: #a3dfd1; text-transform: uppercase; }
#starter .classic-brief small { color: #c3d9d0; overflow-wrap: anywhere; }
#starter .setup-footer .trail-actions { grid-column: 2; gap: 7px; margin: 0; }
#starter .setup-footer .btn { min-height: 44px; margin: 0; border-radius: 2px 7px 2px 7px; }
#starter #begin-run { gap: 8px; }

@media (min-width: 900px) {
  #starter .setup-scroll { grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr); }
}
@media (max-width: 640px) {
  #starter .setup-header { padding: 12px 18px 10px; }
  #starter .setup-emblem { width: 43px; height: 43px; flex-basis: 43px; }
  #starter .setup-emblem svg { width: 28px; height: 28px; }
  #starter .setup-scroll { gap: 13px; padding: 12px 13px 16px; }
  #starter .setup-footer { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 8px 15px 10px; }
  #starter .setup-footer .trail-actions { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  #starter .classic-brief { gap: 7px; }
  #starter #classic-brief-icon { width: 29px; flex-basis: 29px; }
  #starter .classic-brief strong { font-size: 13px; }
  #starter .classic-brief small { font-size: 10px; }
}
@media (max-width: 440px) {
  #starter #starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 480px) and (min-width: 641px) {
  #starter .setup-header { padding-block: 10px; }
  #starter #starter-title { font-size: 30px; }
  #starter .setup-emblem { width: 43px; height: 43px; flex-basis: 43px; }
  #starter .setup-emblem svg { width: 28px; height: 28px; }
  #starter .setup-footer { padding-block: 8px; }
}