/* The skill tree screen, rebuilt from the game's own SpellScreen, and the Create screen.
   Source notes: docs/design/screens/menu_skilltree.md and character_creation.md.
   Geometry: data/skill_tree_layout.json, written by pipeline/ui_skilltree_layout.py from
   raw/ui/screens/menu_skilltree.json.
   Every sprite here is exported by pipeline/export_game_ui.py into /assets/ui/game/.
   Scale rule of the site: 1 game unit = 1.125 px, so every size below is
   (the authored unit size) x 1.125.
   Class names are all prefixed stree- / sn- / cr- so the older planner block in app.js,
   which binds on .planner and .skill-tree .node, never fires on these pages.
   This file is linked only by /skills and the Create pages (/races). */

.stree {
  --su: 1.125;            /* one game unit in px */
  --half: 3700;           /* half of the 7400 unit field, in units */
  --link: #ffffff;
  --link-on: #ffd98a;
  --gold: #ffd36a;
  margin: 10px 0 0;
}

/* the floating feedback hex sits on top of the tree; the tab-strip hex stays */
body.is-stree > a.feedback { display: none; }

/* ------------------------------------------------------------------ tab plate */

.stree-tabs {
  display: flex;
  gap: 5px;
  margin: 0 0 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.stree-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #e8dcc0;
  background: url("/assets/ui/game/tab_unsel.png?v=7b0b5e26") center / 100% 100% no-repeat;
  border: 0;
  padding: 6px 5px 8px;
  min-width: 0;
  flex: 1 0 auto;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
.stree-tabs button b {
  font: 700 12.5px "Cinzel", Georgia, serif;
  letter-spacing: 0;
}
.stree-tabs button small {
  font: 400 11.5px "Philosopher", Georgia, serif;
  opacity: 0.85;
}
/* the points a pair's plan holds, on its tab */
.stree-tabs button { position: relative; }
.stree-tab-n {
  position: absolute;
  top: -6px;
  right: 2px;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 10px;
  font: 700 12px/16px "Philosopher", Georgia, serif;
  font-style: normal;
  color: #2a1a0c;
  background: var(--gold);
  box-shadow: 0 0 0 1px #33210f;
  text-shadow: none;
}
.stree-tab-n[hidden] { display: none; }
.stree-tabs button.on,
.stree-tabs button:hover {
  background-image: url("/assets/ui/game/tab_sel.png?v=f55e2a69");
  color: #33210f;
  text-shadow: none;
}

/* ---------------------------------------------------------------- the stage */

.stree-stage {
  position: relative;
  border: 1px solid #4a3a2a;
  border-radius: 2px;
  background: #15100e;
  overflow: hidden;
}

.stree-view {
  position: relative;
  height: clamp(440px, calc(100vh - 345px), 780px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: #1a1310;
  background-image: url("/assets/ui/game/stone_BG.png?v=1f5e4287");
  background-size: 1600px auto;
  background-position: center;
}
.stree-view.drag { cursor: grabbing; }

/* the vignette the game paints over the whole screen, border shadow at a 0.51 */
.stree-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/ui/game/border_shadow.png?v=d29f7151") center / 100% 100% no-repeat;
  opacity: 0.51;
  pointer-events: none;
  z-index: 3;
}

.stree-field {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(7400 * var(--su) * 1px);
  height: calc(7400 * var(--su) * 1px);
  transform-origin: 0 0;
  will-change: transform;
}

/* ------------------------------------------------- centre diamond and crest */

.stree-diamond,
.stree-crest {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.stree-diamond {
  width: calc(261.3 * var(--su) * 1px);
  height: calc(261.3 * var(--su) * 1px);
  opacity: 0.5059;
}
.stree-crest {
  width: calc(150 * var(--su) * 1px);
  height: calc(150 * var(--su) * 1px);
}

/* --------------------------------------------------------------- the links */

.stree-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.stree-links polyline {
  fill: none;
  stroke: var(--link);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}
.stree-links polyline.on {
  stroke: var(--link-on);
  opacity: 1;
}

/* --------------------------------------------------------------- the nodes */

.sn {
  position: absolute;
  left: calc((var(--x) + var(--half)) * var(--su) * 1px);
  top: calc((var(--y) + var(--half)) * var(--su) * 1px);
  width: calc(var(--fw) * var(--su) * 1px);
  height: calc(var(--fh) * var(--su) * 1px);
  transform: translate(-50%, -50%);
  display: block;
  text-decoration: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.sn-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: center / 100% 100% no-repeat;
}
.sn-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--mw) * var(--su) * 1px);
  height: calc(var(--mh) * var(--su) * 1px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: rgba(10, 7, 6, 0.55);
}
.sn-mask img {
  width: calc(var(--iw) * var(--su) * 1px);
  height: calc(var(--ih) * var(--su) * 1px);
  object-fit: contain;
  image-rendering: auto;
  max-width: none;
  pointer-events: none;
}

/* the five node kinds, sizes straight out of section 3.1 of the screen note */
.sn.k-attribute_buff { --fw: 37.7; --fh: 40.3; --mw: 29.9; --mh: 31.2; --iw: 18; --ih: 18; }
.sn.k-spell_buff     { --fw: 35.1; --fh: 37.7; --mw: 29.9; --mh: 28.6; --iw: 18; --ih: 18; }
.sn.k-spell_upgrade  { --fw: 61.1; --fh: 63.7; --mw: 50.7; --mh: 52.0; --iw: 41; --ih: 41; }
.sn.k-major_stat     { --fw: 48.1; --fh: 50.7; --mw: 40.3; --mh: 40.3; --iw: 26; --ih: 26; }
.sn.k-spell          { --fw: 76.7; --fh: 79.3; --mw: 66.3; --mh: 67.6; --iw: 52; --ih: 52; }

.sn.k-attribute_buff .sn-frame { background-image: url("/assets/ui/game/node_attr_frame.png?v=ba6fe8ba"); }
.sn.k-spell_buff .sn-frame     { background-image: url("/assets/ui/game/node_spellbuff_frame.png?v=fe1bd873"); }
.sn.k-spell_upgrade .sn-frame  { background-image: url("/assets/ui/game/node_upgrade_frame.png?v=82fb88cf"); }
.sn.k-major_stat .sn-frame     { background-image: url("/assets/ui/game/node_major_frame.png?v=4e5c4715"); }
.sn.k-spell .sn-frame          { background-image: url("/assets/ui/game/node_spell_frame.png?v=6bd16756"); }

.sn.k-attribute_buff .sn-mask {
  -webkit-mask-image: url("/assets/ui/game/node_attr_mask.png?v=8f3a1032");
  mask-image: url("/assets/ui/game/node_attr_mask.png?v=8f3a1032");
}
.sn.k-spell_buff .sn-mask {
  -webkit-mask-image: url("/assets/ui/game/node_spellbuff_mask.png?v=74b575da");
  mask-image: url("/assets/ui/game/node_spellbuff_mask.png?v=74b575da");
}
.sn.k-spell_upgrade .sn-mask {
  -webkit-mask-image: url("/assets/ui/game/node_upgrade_mask.png?v=0f129d67");
  mask-image: url("/assets/ui/game/node_upgrade_mask.png?v=0f129d67");
}
.sn.k-major_stat .sn-mask {
  -webkit-mask-image: url("/assets/ui/game/node_major_mask.png?v=31a82a9b");
  mask-image: url("/assets/ui/game/node_major_mask.png?v=31a82a9b");
}
.sn.k-spell .sn-mask {
  -webkit-mask-image: url("/assets/ui/game/node_spell_mask.png?v=0cd979a6");
  mask-image: url("/assets/ui/game/node_spell_mask.png?v=0cd979a6");
}

/* node states. The game has no locked frame sprite; the wiki marks the states with rings
   drawn in CSS: open = a gold ring (can take a point now), spent = the lit frame,
   exclusive-locked = a red ring on a darkened node, locked = dimmed. */
.sn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.sn:hover .sn-frame,
.sn:focus-visible .sn-frame { filter: brightness(1.7) drop-shadow(0 0 6px rgba(255, 220, 140, 0.85)); }
.sn.spent .sn-frame { filter: brightness(1.45) drop-shadow(0 0 7px rgba(255, 214, 122, 0.8)); }
.sn.spent .sn-mask { background: rgba(70, 48, 16, 0.75); }
.stree.plan .sn.locked { opacity: 0.38; }
.stree.plan .sn.open::after {
  opacity: 1;
  border: 3px solid var(--gold);
  box-shadow: 0 0 10px 2px rgba(255, 211, 106, 0.75);
  animation: sn-open 1.6s ease-in-out infinite;
}
.stree.plan .sn.excl { opacity: 0.8; }
.stree.plan .sn.excl .sn-frame { filter: grayscale(1) brightness(0.55); }
.stree.plan .sn.excl::after {
  opacity: 1;
  border: 3px dashed #e0463a;
}
@keyframes sn-open {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(255, 211, 106, 0.55); }
  50% { box-shadow: 0 0 14px 4px rgba(255, 211, 106, 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .stree.plan .sn.open::after { animation: none; }
}
/* search: every match glows, the current one gets a strong white ring */
.sn.hit .sn-frame { filter: brightness(1.9) drop-shadow(0 0 10px rgba(255, 233, 160, 0.95)); }
.sn.hit::after { opacity: 0.8; border: 2px solid rgba(255, 233, 160, 0.9); }
.sn.cur::after,
.sn.focus::after,
.sn.tapped::after {
  opacity: 1;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.7), 0 0 18px 6px rgba(255, 255, 255, 0.85);
  width: calc(100% + 22px);
  height: calc(100% + 22px);
  animation: none;
}

/* ------------------------------------------------- header, the points panel */

.stree-hud {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 330px);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.9569);
  box-shadow: 0 0 22px 10px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.stree-avail {
  font: 700 16px "Cinzel", Georgia, serif;
  color: #f6ebcf;
}
.stree-avail b { font-size: 22px; margin-left: 4px; }
.stree.over .stree-avail b { color: #ff7a6b; }
.stree-spent {
  font: 700 16px "Philosopher", Georgia, serif;
  color: #75a2d9;
  padding: 7px 14px;
  background: url("/assets/ui/game/points_header.png?v=9eeecc18") center / 100% 100% no-repeat;
}
.stree-respec,
.stree-plan {
  font: 700 15px "Philosopher", Georgia, serif;
  color: #9cd2ec;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.35) url("/assets/ui/game/respec_0.png?v=778c92dd") center / 100% 100% no-repeat;
  background-blend-mode: multiply;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.stree-respec:hover,
.stree-plan:hover,
.stree-copy:hover { color: #ffffff; }
.stree-copy {
  font: 700 15px "Philosopher", Georgia, serif;
  color: #e8dcc0;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #6b5334;
  border-radius: 4px;
  background: rgba(20, 15, 12, 0.9);
  cursor: pointer;
}
.stree-view:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.stree-plan {
  background: url("/assets/ui/game/tab_unsel.png?v=7b0b5e26") center / 100% 100% no-repeat;
  color: #e8dcc0;
  min-width: 74px;
}
.stree-plan[aria-pressed="true"] {
  background-image: url("/assets/ui/game/tab_sel.png?v=f55e2a69");
  color: #33210f;
}

/* -------------------------------------------------------------- search bar */

.stree-search {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 300px;
}
.stree-bar {
  position: relative;
  width: 220px;
  height: calc(41.6 * var(--su) * 1px);
  background: url("/assets/ui/game/search-bar.png?v=5b3a9a3e") center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
}
.stree-bar input {
  width: 100%;
  border: 0;
  background: transparent;
  font: 400 16px "Philosopher", Georgia, serif;
  color: #f3e8cc;
  text-align: left;
  padding: 0 18px;
  outline: none;
}
.stree-bar input::placeholder { color: #dfb79c; opacity: 1; }
.stree-arrow {
  width: calc(23 * var(--su) * 1px);
  height: calc(23 * var(--su) * 1px);
  border: 0;
  cursor: pointer;
  background: url("/assets/ui/game/arrow.png?v=9835c9af") center / contain no-repeat;
}
.stree-arrow.left { transform: scaleX(-1); }
.stree-arrow:disabled { opacity: 0.3; cursor: default; }
.stree-count {
  flex-basis: 100%;
  text-align: right;
  font: 700 14px "Philosopher", Georgia, serif;
  color: #f3e8cc;
  text-shadow: 0 1px 3px #000;
  min-height: 1em;
}

/* --------------------------------------------------------- zoom and legend */

/* top left, clear of the points panel */
.stree-zoom {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  display: flex;
  gap: 6px;
}
.stree-zoom button {
  width: 38px;
  height: 38px;
  font: 700 19px "Cinzel", Georgia, serif;
  color: #f3e8cc;
  background: rgba(10, 7, 6, 0.86);
  border: 1px solid #6b5334;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stree-zoom button:hover { color: #ffe6ce; border-color: #b08a4c; }
.stree-home {
  display: block;
  width: 18px;
  height: 18px;
  background: url("/assets/ui/game/gold-diamond.png?v=d020ee9e") center / contain no-repeat;
}
.stree-note {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  margin: 0;
  width: max-content;
  max-width: calc(100% - 24px);
  font: 400 14px "Philosopher", Georgia, serif;
  color: #c5d7e9;
  background: rgba(0, 0, 0, 0.78);
  padding: 5px 10px;
  border-radius: 3px;
  pointer-events: none;
}

/* the site's hover card on this page. app.js clears [hidden] but style.css shows #drtip
   only with .on, so on every page the card stays display:none (reported to the lead).
   Scoped to the skill tree page until app.js and style.css agree. */
body.is-stree #drtip:not([hidden]) {
  display: block;
  width: auto;
  max-width: 330px;
  padding: 10px 12px;
  border: 1px solid #6b5334;
  border-radius: 4px;
  background: rgba(8, 6, 5, 0.95);
  color: #e8dcc0;
  font: 400 14.5px/1.35 "Philosopher", Georgia, serif;
}
body.is-stree #drtip img { float: left; width: 34px; height: 34px; margin: 0 8px 4px 0; object-fit: contain; }
body.is-stree #drtip strong { display: block; font: 700 15px "Cinzel", Georgia, serif; color: #f6ebcf; }
body.is-stree #drtip p { margin: 6px 0 0; clear: both; }

/* the node card a finger gets (the mouse gets the site's hover card) */
.stree-card {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 48px;
  z-index: 5;
  max-height: 55%;
  overflow: auto;
  padding: 10px 14px 6px;
  border: 1px solid #6b5334;
  border-radius: 4px;
  background: rgba(8, 6, 5, 0.94);
  color: #e8dcc0;
  font: 400 15px/1.35 "Philosopher", Georgia, serif;
}
.stree-card p { margin: 0 0 6px; }
.stree-card-h { display: flex; align-items: center; gap: 10px; margin: 0 26px 6px 0; }
.stree-card-h img { width: 36px; height: 36px; object-fit: contain; }
.stree-card-h strong { font: 700 16px "Cinzel", Georgia, serif; color: #f6ebcf; }
.stree-card-go { color: var(--gold); font-weight: 700; }
.stree-card-x {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 32px;
  height: 32px;
  border: 1px solid #6b5334;
  background: #140f0c;
  color: #f3e8cc;
  font: 700 15px "Philosopher", Georgia, serif;
  cursor: pointer;
}

/* ----------------------------------------------- the planner under the stage */

.stree-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
  gap: 14px 22px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid #4a3a2a;
  background: rgba(10, 7, 6, 0.86);
  color: #e8dcc0;
  font: 400 15px/1.4 "Philosopher", Georgia, serif;
}
.stree-controls { display: flex; flex-direction: column; gap: 10px; }
.stree-controls label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}
.stree-controls input {
  width: 70px;
  min-height: 34px;
  font: 700 16px "Philosopher", Georgia, serif;
  color: #f3e8cc;
  background: #140f0c;
  border: 1px solid #6b5334;
  padding: 2px 6px;
  text-align: center;
}
.stree-bosslist summary {
  cursor: pointer;
  color: var(--gold);
  font-weight: 700;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.stree-pop {
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid #6b5334;
  background: #140f0c;
}
.stree-pop p { margin: 0 0 6px; }
.stree-bosses { margin: 0; padding-left: 18px; }
.stree-bosses a { color: #f3e8cc; }
.stree-budget { margin: 0; font-weight: 700; color: #f6ebcf; }
.stree.over .stree-budget { color: #ff9a8b; }
.stree-panel .muted { color: #b9a58c; }
.stree-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
}
.tot-block h3 {
  margin: 0 0 6px;
  font: 700 15px "Cinzel", Georgia, serif;
  color: #f6ebcf;
}
.tot-block ul { margin: 0; padding: 0; list-style: none; }
.tot-block li { margin: 0 0 4px; }
.tot-block li b { color: var(--gold); }
.tot-block a { color: #f3e8cc; }
.tot-block a img { width: 22px; height: 22px; vertical-align: middle; margin-right: 4px; }

.stree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #c5d7e9;
}
.stree-legend li { display: flex; align-items: center; gap: 9px; }
.stree-legend i {
  display: block;
  width: 34px;
  height: 34px;
  background: center / contain no-repeat;
  flex: none;
  position: relative;
}
.stree-legend .l-attribute_buff { background-image: url("/assets/ui/game/node_attr_frame.png?v=ba6fe8ba"); }
.stree-legend .l-spell_buff { background-image: url("/assets/ui/game/node_spellbuff_frame.png?v=fe1bd873"); }
.stree-legend .l-spell_upgrade { background-image: url("/assets/ui/game/node_upgrade_frame.png?v=82fb88cf"); }
.stree-legend .l-major_stat { background-image: url("/assets/ui/game/node_major_frame.png?v=4e5c4715"); }
.stree-legend .l-spell { background-image: url("/assets/ui/game/node_spell_frame.png?v=6bd16756"); }
.stree-states i { background-image: url("/assets/ui/game/node_major_frame.png?v=4e5c4715"); width: 28px; height: 28px; }
.stree-states .s-spent { filter: brightness(1.45) drop-shadow(0 0 5px rgba(255, 214, 122, 0.8)); }
.stree-states .s-open { box-shadow: 0 0 0 3px var(--gold), 0 0 8px 2px rgba(255, 211, 106, 0.75); border-radius: 50%; }
.stree-states .s-excl { filter: grayscale(1) brightness(0.55); outline: 3px dashed #e0463a; border-radius: 50%; }
.stree-states .s-locked { opacity: 0.38; }

.stree-rules {
  margin-top: 14px;
  color: #d8ccb2;
  font: 400 15.5px/1.45 "Philosopher", Georgia, serif;
}
.stree-rules h2 {
  margin: 0 0 6px;
  font: 700 17px "Cinzel", Georgia, serif;
  color: #f6ebcf;
}
.stree-rules ul { margin: 0; padding-left: 20px; max-width: 80ch; }
.stree-rules li { margin: 0 0 4px; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 760px) {
  /* the tree comes first; the rule text goes under it */
  .stree-page { display: flex; flex-direction: column; }
  .stree-head { order: 1; }
  .stree-page > .stree { order: 2; margin-top: 0; }
  .stree-page > .stree-lead { order: 3; margin-top: 14px; }

  /* the header panel and the search bar share two short rows above the tree */
  .stree-stage {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 8px 8px 0;
    background: rgba(0, 0, 0, 0.9569);
  }
  .stree-hud { display: contents; }
  .stree-avail, .stree-spent, .stree-plan, .stree-respec, .stree-search { position: relative; z-index: 4; }
  .stree-avail { order: 1; }
  .stree-spent { order: 2; padding: 6px 10px; }
  .stree-plan { order: 3; margin-left: auto; }
  .stree-search {
    order: 4;
    position: static;
    flex: 1 1 180px;
    max-width: none;
    flex-wrap: nowrap;
    padding: 0;
    gap: 4px;
  }
  .stree-respec { order: 5; }
  .stree-copy { order: 5; position: relative; z-index: 4; min-height: 38px; font-size: 14px; padding: 0 10px; }
  .stree-view {
    order: 6;
    flex: 0 0 calc(100% + 16px);
    margin: 0 -8px;
    height: clamp(340px, calc(100vh - 290px), 560px);
  }
  .stree-count { flex-basis: auto; min-width: 3.5em; font-size: 12.5px; text-align: center; }
  .stree-avail { font-size: 14px; }
  .stree-avail b { font-size: 19px; }
  .stree-spent { font-size: 14px; }
  .stree-plan, .stree-respec { min-height: 38px; font-size: 14px; padding: 0 10px; }
  .stree-bar { flex: 1 1 auto; width: auto; height: 38px; }
  .stree-bar input { font-size: 15px; padding: 0 12px; }
  .stree-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .stree-tabs { gap: 4px; margin-bottom: 8px; }
  .stree-tabs button { padding: 5px 3px 7px; white-space: normal; }
  .stree-tabs button b { font-size: 11px; line-height: 1.15; text-align: center; }
  .stree-tabs button small { font-size: 10.5px; text-align: center; }
  .stree-zoom { left: auto; right: 10px; top: auto; bottom: 10px; }
  .stree-view ~ .stree-zoom { top: auto; }
  .stree-zoom button { width: 44px; height: 44px; }
  .stree-note { right: 160px; font-size: 12px; }
  .stree-card { bottom: 62px; }
  .stree-panel { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .stree-totals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ===================================================== the Create screen (/races) */

.cr-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin: 6px 0 12px;
}
.cr-opt {
  border: 0;
  background: none;
  padding: 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 4px;
}
.cr-opt:focus-visible { outline: 2px solid var(--p-h2, #411b1b); outline-offset: 2px; }
.cr-opt[aria-checked="true"] .slot-label { color: var(--p-h1, #3b262d); text-decoration: underline; text-underline-offset: 3px; }
.cr-opt[aria-checked="false"] .slot::before { filter: saturate(0.6) brightness(0.92); }
.cr-more { font-size: 15px; line-height: 1.5; }
.cr-more a.refx img { display: none; }
.cr-title {
  margin: 0 auto 6px;
  width: min(100%, 482px);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 40px;
  background: url("/assets/ui/game/long_header.png?v=22419f5b") center / 100% 100% no-repeat;
  font: 700 21px "Cinzel", Georgia, serif;
  color: #3b2622;
  text-align: center;
}
.cr-arch .tags { margin-bottom: 8px; }
.cr-go { text-align: center; margin: 12px 0; }
/* the game's buy button plate: dark wood, gold letters */
.cr-go .big-btn,
.cr-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 28px;
  background: url("/assets/ui/game/buy_btn.png?v=f090d44b") center / 100% 100% no-repeat;
  font: 700 15px "Cinzel", Georgia, serif;
}
#main .book .cr-go .big-btn,
#main .book .cr-big { color: #f3d796; }
#main .book .cr-go .big-btn:hover,
#main .book .cr-big:hover { color: #fff6df; filter: brightness(1.08); }
.cr-note { font-size: 13.5px; margin: 6px 0 0; }
.cr-passive { margin-bottom: 2px; }
.cr-attrs {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.cr-attrs th,
.cr-attrs td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--p-rule, rgba(96, 72, 63, 0.25));
  text-align: left;
}
.cr-attrs td.num,
.cr-attrs th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.cr-attrs tr.fav td { font-weight: 700; color: var(--p-strong, #3a2521); }
.fav-mark {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  vertical-align: -1px;
  background: url("/assets/ui/game/gold-diamond.png?v=d020ee9e") center / contain no-repeat;
}
.cr-matrix {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}
.cr-matrix th,
.cr-matrix td {
  padding: 6px 6px;
  border: 1px solid var(--p-rule, rgba(96, 72, 63, 0.25));
  text-align: center;
  vertical-align: top;
}
.cr-matrix thead td { border: 0; }
.cr-matrix th a.refx img { width: 22px; height: 22px; }
.cr-matrix td.on { background: rgba(255, 211, 106, 0.22); }
.cr-cell {
  display: block;
  font: 700 14px "Cinzel", Georgia, serif;
  line-height: 1.2;
}
.cr-tags {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--p-body, #60483f);
}
@media (max-width: 760px) {
  .cr-matrix { font-size: 12.5px; }
  .cr-cell { font-size: 12px; }
  .cr-tags { font-size: 11.5px; }
  .cr-title { font-size: 18px; padding: 4px 26px; }
}

/* ---------------------------------------------- round 4 phone pass (lane R4-3, audit row 18)
   text on the pair tabs at 12 px, the search arrows and the search box a full 32 px tap,
   and every node gets an invisible ring of tap room, 40 field px wider than its frame (the
   ring scales with the zoom: about 33 px on screen at the phone's opening zoom, where the
   small nodes sit about 44 px apart). */
.stree-bar input { height: 100%; }
.stree-arrow { min-width: 32px; min-height: 32px; background-size: calc(23 * var(--su) * 1px) auto; }
@media (max-width: 900px) {
  .stree-tabs button b { font-size: 12px; }
  .stree-tabs button small { font-size: 12px; }
}
@media (max-width: 760px) {
  .sn::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .cr-cell { min-height: 32px; }
  .cr-tags { font-size: 12px; }
}
/* the unlit pair tabs: dark ink on the tan plate, the same ink as the shop's tabs
   (--s-tab-ink); the pale ink read at about 1.5:1 */
.stree-tabs button:not(.on) { color: #33210f; text-shadow: none; }
.stree-tabs button:not(.on) small { opacity: 1; }