/* Forest Frontier v0.9.6 — focused Ruins route.
   The active screen shows the current decision; the full graph is a separate overview. */

body.theme-ashen .ruins-route-map {
  overflow: hidden;
  padding: 10px;
}

body.theme-ashen .ruins-focus-map,
body.theme-ashen .ruins-overview-map {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.theme-ashen .ruins-focus-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
body.theme-ashen .ruins-focus-toolbar > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.theme-ashen .ruins-focus-toolbar span {
  color: #81bfae;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.theme-ashen .ruins-focus-toolbar strong {
  color: #eadcb9;
  font-size: 14px;
  line-height: 1.2;
}
body.theme-ashen .ruins-focus-toolbar button {
  flex: 0 0 auto;
  min-height: 38px;
  padding-inline: 12px;
}

body.theme-ashen .ruins-route-trail {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  padding: 7px 8px;
  border: 1px solid rgba(72, 99, 90, .45);
  border-radius: 9px;
  background: rgba(6, 12, 10, .72);
  scrollbar-width: none;
}
body.theme-ashen .ruins-route-trail::-webkit-scrollbar { display: none; }
body.theme-ashen .ruins-route-trail > i {
  color: #597168;
  font-style: normal;
  font-size: 16px;
}
body.theme-ashen .ruins-trail-start,
body.theme-ashen .ruins-trail-more,
body.theme-ashen .ruins-trail-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(69, 91, 84, .52);
  border-radius: 999px;
  background: rgba(11, 18, 15, .9);
  color: #aebbb5;
  font-size: 10px;
  font-weight: 800;
}
body.theme-ashen .ruins-trail-step b { font-size: 13px; }
body.theme-ashen .ruins-trail-step span {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ashen .ruins-trail-step.rare { color: #79d2ff; }
body.theme-ashen .ruins-trail-step.elite { color: #8edda3; }
body.theme-ashen .ruins-trail-step.altar { color: #cfb1ff; }
body.theme-ashen .ruins-trail-step.recovery { color: #8add9f; }
body.theme-ashen .ruins-trail-more { color: #d3bd81; }

body.theme-ashen .ruins-focus-position {
  display: grid;
  grid-template-columns: auto 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid rgba(89, 122, 111, .62);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(18, 32, 27, .96), rgba(7, 15, 12, .98));
  box-shadow: inset 3px 0 0 rgba(93, 190, 158, .58);
}
body.theme-ashen .ruins-focus-position.start {
  grid-template-columns: auto minmax(0, 1fr);
}
body.theme-ashen .ruins-focus-kicker {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding-right: 8px;
  border-right: 1px solid rgba(91, 119, 109, .38);
  color: #82b9aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.theme-ashen .ruins-focus-glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(108, 151, 136, .55);
  border-radius: 9px;
  font-size: 21px;
}
body.theme-ashen .ruins-focus-position > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.theme-ashen .ruins-focus-position b {
  overflow: hidden;
  color: #ecdfc4;
  font: 700 16px/1.15 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ashen .ruins-focus-position small {
  overflow: hidden;
  color: #91a39b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.theme-ashen .ruins-focus-choices,
body.theme-ashen .ruins-route-preview {
  display: grid;
  gap: 8px;
}
body.theme-ashen .ruins-focus-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 2px;
}
body.theme-ashen .ruins-focus-section-head > span {
  color: #e6d8b6;
  font-size: 13px;
  font-weight: 900;
}
body.theme-ashen .ruins-focus-section-head > small {
  color: #82928c;
  font-size: 10px;
}
body.theme-ashen .ruins-focus-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.theme-ashen .ruins-focus-choice-list > :only-child {
  grid-column: 1 / -1;
}
body.theme-ashen .ruins-focus-choice {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  grid-template-areas:
    "glyph copy arrow"
    "glyph tone arrow";
  align-items: center;
  gap: 3px 8px;
  min-width: 0;
  min-height: 86px;
  padding: 10px 9px;
  border: 1px solid rgba(92, 124, 112, .72);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(17, 27, 23, .98), rgba(6, 12, 10, .99));
  color: #dce6e1;
  text-align: left;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
body.theme-ashen .ruins-focus-choice::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 3px 0 0 currentColor;
  opacity: .52;
  pointer-events: none;
}
body.theme-ashen .ruins-focus-choice:active { transform: translateY(1px); }
body.theme-ashen .ruins-focus-choice-glyph {
  grid-area: glyph;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: rgba(3, 7, 6, .52);
  font-size: 23px;
}
body.theme-ashen .ruins-focus-choice-copy {
  grid-area: copy;
  display: grid;
  gap: 2px;
  min-width: 0;
}
body.theme-ashen .ruins-focus-choice-copy strong {
  overflow: hidden;
  color: currentColor;
  font: 700 16px/1.12 Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ashen .ruins-focus-choice-copy small {
  overflow: hidden;
  color: #9ca9a4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ashen .ruins-focus-choice-tone {
  grid-area: tone;
  color: #c8b276;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.theme-ashen .ruins-focus-choice-arrow {
  grid-area: arrow;
  color: currentColor;
  font-size: 24px;
  opacity: .72;
}
body.theme-ashen .ruins-focus-choice.normal { color: #cbd8d2; }
body.theme-ashen .ruins-focus-choice.elite { color: #8edda3; border-color: rgba(83, 177, 106, .78); }
body.theme-ashen .ruins-focus-choice.rare { color: #78d2ff; border-color: rgba(77, 157, 198, .82); }
body.theme-ashen .ruins-focus-choice.boss { color: #ef9d7b; border-color: rgba(160, 82, 61, .82); }
body.theme-ashen .ruins-focus-choice.recovery { color: #8add9f; }
body.theme-ashen .ruins-focus-choice.altar { color: #cfb1ff; }
body.theme-ashen .ruins-focus-choice.reward { color: #e2c26f; }
body.theme-ashen .ruins-focus-choice.sacrifice { color: #e58b8b; }
body.theme-ashen .ruins-focus-choice.unknown { color: #899791; border-style: dashed; }

body.theme-ashen .ruins-preview-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
body.theme-ashen .ruins-preview-node {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 42px;
  padding: 6px;
  border: 1px solid rgba(69, 91, 84, .48);
  border-radius: 8px;
  background: rgba(8, 14, 12, .76);
  color: #8f9c96;
  opacity: .72;
}
body.theme-ashen .ruins-preview-node b {
  display: grid;
  place-items: center;
  font-size: 17px;
}
body.theme-ashen .ruins-preview-node span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.theme-ashen .ruins-preview-node.elite { color: #78bd89; }
body.theme-ashen .ruins-preview-node.rare { color: #66afd1; }
body.theme-ashen .ruins-preview-node.altar { color: #aa8bd0; }

body.theme-ashen .ruins-overview-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body.theme-ashen .ruins-overview-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(72, 93, 86, .45);
  border-radius: 999px;
  color: #8f9c97;
  font-size: 10px;
  font-weight: 800;
}
body.theme-ashen .ruins-overview-legend span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #46534e;
}
body.theme-ashen .ruins-overview-legend .completed::before { background: #68b69f; }
body.theme-ashen .ruins-overview-legend .available::before { background: #d4b15f; }

body.theme-ashen .ruins-route-map.overview-mode {
  padding: 10px 7px 12px;
}
body.theme-ashen .ruins-overview-map .ruins-route-row,
body.theme-ashen .ruins-overview-map .ruins-node-spacer,
body.theme-ashen .ruins-overview-map .ruins-route-node {
  height: 54px;
  min-height: 54px;
}
body.theme-ashen .ruins-overview-map .ruins-route-grid { gap: 8px; }
body.theme-ashen .ruins-overview-map .ruins-route-node {
  padding: 5px 4px;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 3px;
  border-radius: 8px;
}
body.theme-ashen .ruins-overview-map .ruins-route-node .ruins-node-glyph { font-size: 16px; }
body.theme-ashen .ruins-overview-map .ruins-route-node .ruins-node-copy strong {
  font-size: 10px;
  line-height: 1.05;
}
body.theme-ashen .ruins-overview-map .ruins-route-node .ruins-node-copy small {
  font-size: 10px;
  line-height: 1;
}
body.theme-ashen .ruins-overview-map .ruins-route-node.available {
  box-shadow: 0 0 0 2px rgba(212, 177, 95, .24), 0 0 15px rgba(212, 177, 95, .22);
  animation: none;
}
body.theme-ashen .ruins-overview-map .ruins-route-lines line.locked { opacity: .1; }
body.theme-ashen .ruins-overview-map .ruins-route-lines line.available { stroke-width: 2.8; }
body.theme-ashen .ruins-overview-map .ruins-route-lines line.active { stroke-width: 3.2; }

body.theme-ashen .ruins-focus-empty {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed rgba(79, 102, 94, .5);
  border-radius: 9px;
  color: #8d9b95;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 420px) {
  body.theme-ashen .ruins-focus-toolbar { align-items: stretch; }
  body.theme-ashen .ruins-focus-toolbar button { min-height: 36px; padding-inline: 9px; }
  body.theme-ashen .ruins-focus-choice-list { grid-template-columns: 1fr; }
  body.theme-ashen .ruins-focus-choice-list > :only-child { grid-column: auto; }
  body.theme-ashen .ruins-focus-choice { min-height: 74px; }
  body.theme-ashen .ruins-focus-position { grid-template-columns: 32px minmax(0, 1fr); }
  body.theme-ashen .ruins-focus-position .ruins-focus-kicker {
    grid-column: 1 / -1;
    display: block;
    padding: 0 0 5px;
    border: 0;
  }
  body.theme-ashen .ruins-focus-position.start { grid-template-columns: 1fr; }
  body.theme-ashen .ruins-preview-row { gap: 5px; }
  body.theme-ashen .ruins-preview-node { grid-template-columns: 20px minmax(0, 1fr); padding: 5px 4px; }
  body.theme-ashen .ruins-overview-map .ruins-route-node { grid-template-columns: 16px minmax(0, 1fr); padding-inline: 3px; }
}

@media (max-width: 360px) {
  body.theme-ashen .ruins-focus-toolbar strong { font-size: 13px; }
  body.theme-ashen .ruins-focus-toolbar button { font-size: 10px; }
  body.theme-ashen .ruins-focus-choice-copy strong { font-size: 15px; }
  body.theme-ashen .ruins-preview-node span { font-size: 10px; }
}