/* =====================================================================================================================
   Skills window "สกิล" (js/ui/pages/skills.js, id 'skills', layout 'list-detail'). Page agent P-SKILL (Proposed
   2026-10-09). Tokens and components come from css/ui-tokens.css + css/ui-kit.css; this file only lays out the page
   (sk- prefix).
   Regions (windows.js): list = top bar (points, auto-learn, reset) + the class tree (scrolls) + the slot bar;
   detail = big icon head + scrolling body (rank, text, weapon need, numbers, ★ choices, slots) + the fixed main
   action. Portrait: the detail is the bottom sheet, opened by tapping a node or a slot.
   Tree drawing: a vertical trunk through the tier badges (lit amber as far as the points spent reach) and one
   horizontal branch per tier through its nodes (dashed while the tier is closed). The branch sits on the icon centre:
   every cell centres [icon + label block] and the line is drawn at 50% - label/2.
   ===================================================================================================================== */

.gwin[data-win="skills"] {
  --sk-ico: calc(84 * var(--u)); /* node icon */
  --sk-name-fs: var(--fs-label);
  --sk-lab: calc(18 * var(--u) + 2.3 * var(--sk-name-fs)); /* gap + pips + gap + two name lines under an icon */
  --sk-gate-w: calc(92 * var(--u)); /* tier badge column */
  --sk-gh: calc(70 * var(--u)); /* tier badge height */
  --sk-slot: calc(66 * var(--u)); /* slot bar art */
  --sk-line: 2px;
}
html[data-tier="compact"] .gwin[data-win="skills"] {
  --sk-ico: calc(72 * var(--u));
  --sk-gate-w: calc(80 * var(--u));
  --sk-gh: calc(64 * var(--u));
  --sk-slot: calc(58 * var(--u));
}
html[data-tier="phone"] .gwin[data-win="skills"] {
  --sk-ico: calc(54 * var(--u));
  --sk-gate-w: calc(60 * var(--u));
  --sk-gh: calc(54 * var(--u));
  --sk-slot: max(44px, calc(48 * var(--u)));
}
html[data-orient="portrait"] .gwin[data-win="skills"] {
  --sk-name-fs: max(11px, calc(11.5 * var(--u)));
  --sk-ico: calc(50 * var(--u));
  --sk-gate-w: calc(54 * var(--u));
  --sk-gh: calc(56 * var(--u));
  --sk-slot: max(44px, calc(50 * var(--u)));
}

/* ------------------------------------------------------------------------------------------------------ top bar */
.sk-top {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  flex: none;
  min-width: 0;
  padding-bottom: calc(10 * var(--u));
  margin-bottom: calc(4 * var(--u));
  border-bottom: 1px solid var(--line-a60);
}
.sk-sp {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
  flex: 0 1 auto;
  color: var(--dim);
}
.sk-sp-ico {
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  flex: none;
  color: var(--faint);
  background: var(--panel-2);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}
.sk-sp-ico .gglyph {
  width: 62%;
  height: 62%;
}
.sk-sp-n {
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--text);
  min-width: 1.2ch;
}
.sk-sp-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.sk-sp-t small {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-sp.has .sk-sp-ico {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 0 calc(16 * var(--u)) var(--accent-a35);
}
.sk-sp.has .sk-sp-n {
  color: var(--accent);
}
.sk-top .gk-spacer {
  flex: 1 1 0;
  min-width: 0;
}
.sk-al {
  flex: 0 1 auto;
  min-width: 0;
}
.sk-al .gsw-text {
  min-width: 0;
}
.sk-al .gsw-text small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-reset {
  flex: none;
}

/* --------------------------------------------------------------------------------------------------------- tree */
.sk-tree {
  display: flex;
  flex-direction: column;
  margin: 0 calc(-6 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) 0; /* slot-number badges stick out above the first row */
}
.sk-tier {
  position: relative;
  display: grid;
  grid-template-columns: var(--sk-gate-w) repeat(4, minmax(0, 1fr));
  align-items: stretch;
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(1040 * var(--u));
  max-height: calc(250 * var(--u));
  margin: 0 auto;
  min-height: calc(var(--sk-ico) + 2 * var(--sk-lab) + 8 * var(--u));
}
/* centred in a tall region (auto margins, not justify-content: overflow must stay reachable when it scrolls) */
.sk-tier:first-child {
  margin-top: auto;
}
.sk-tier:last-child {
  margin-bottom: auto;
}
.sk-tier + .sk-tier::before {
  /* a faint rule between tiers, leaving the badge column (the trunk) clear */
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--sk-gate-w) + 8 * var(--u));
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-a60), transparent 85%);
}
.sk-tier.is-closed {
  background: linear-gradient(90deg, transparent var(--sk-gate-w), rgba(149, 163, 158, 0.035) 0);
}
.sk-tier.is-closed::after {
  /* hatched "closed" field behind the nodes */
  content: "";
  position: absolute;
  inset: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(var(--sk-gate-w) + 8 * var(--u));
  background: var(--hatch);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

/* tier badge + trunk */
.sk-gatecell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--sk-lab);
}
.sk-trunk {
  position: absolute;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  pointer-events: none;
}
.sk-trunk.in {
  top: 0;
  height: calc(50% - var(--sk-lab) / 2 - var(--sk-gh) / 2);
  background: linear-gradient(180deg, var(--accent) calc(var(--fin, 0) * 100%), var(--line) 0);
}
.sk-trunk.out {
  top: calc(50% - var(--sk-lab) / 2 + var(--sk-gh) / 2);
  bottom: 0;
  background: linear-gradient(180deg, var(--accent) calc(var(--fout, 0) * 100%), var(--line) 0);
}
.sk-gatecell.is-first .sk-trunk.in,
.sk-gatecell.is-final .sk-trunk.out {
  display: none;
}
.sk-gatecell::after {
  /* branch stub from the badge to the first node */
  content: "";
  position: absolute;
  left: calc(50% + var(--sk-gate-w) * 0.3);
  right: 0;
  top: calc(50% - var(--sk-lab) / 2 - var(--sk-line) / 2);
  height: var(--sk-line);
  background: var(--sk-branch);
}
.sk-tier {
  --sk-branch: linear-gradient(90deg, var(--accent-dim), var(--accent-dim));
}
.sk-tier.is-closed {
  --sk-branch: repeating-linear-gradient(90deg, var(--line-strong) 0 calc(6 * var(--u)), transparent 0 calc(11 * var(--u)));
}
.sk-gate {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  width: min(100%, calc(var(--sk-gate-w) * 0.6 + 14 * var(--u)));
  min-width: 44px;
  height: var(--sk-gh);
  padding: 0;
  border: 0;
  color: var(--dim);
  background: none;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
}
.sk-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 16%, 100% 84%, 50% 100%, 0 84%, 0 16%);
  background: linear-gradient(180deg, var(--line-strong), var(--line));
}
.sk-gate::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 16%, 100% 84%, 50% 100%, 0 84%, 0 16%);
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
}
.is-open > .sk-gatecell .sk-gate::before {
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
}
.is-open > .sk-gatecell .sk-gate::after {
  background: linear-gradient(180deg, #2b2410, var(--panel));
}
.sk-gate-k {
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--dim);
}
.sk-gate > b {
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--text);
}
.is-open > .sk-gatecell .sk-gate > b {
  color: var(--accent);
}
.sk-gate-s {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--u));
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--faint);
}
.sk-gate-s .gglyph {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}
.sk-gate-s.ok {
  color: var(--good);
}
html[data-tier="phone"] .sk-gate-k {
  display: none;
}
.sk-gate.is-pressed::after {
  filter: brightness(1.25);
}
.sk-gate:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* node cells + branch */
.sk-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 calc(2 * var(--u));
}
.sk-cell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--sk-lab) / 2 - var(--sk-line) / 2);
  height: var(--sk-line);
  background: var(--sk-branch);
  pointer-events: none;
}
.sk-cell.is-last::before {
  right: 50%;
}
.sk-cell.is-pad::before {
  display: none;
}

.sk-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  width: min(100%, calc(var(--sk-ico) + 36 * var(--u)));
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.sk-ico {
  position: relative;
  display: block;
  width: var(--sk-ico);
  height: var(--sk-ico);
  flex: none;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), opacity var(--t-fast);
}
.sk-ico > .skill-art {
  position: relative;
  z-index: 0;
}
.sk-ico::before {
  /* a dark disc that hides the branch behind transparent frame corners */
  content: "";
  position: absolute;
  inset: 6%;
  z-index: -1;
  background: var(--bg);
}
.sk-ico::after {
  /* selection brackets (two L marks) outside the icon */
  content: "";
  position: absolute;
  inset: calc(-6 * var(--u));
  opacity: 0;
  pointer-events: none;
  --bl: calc(14 * var(--u));
  --bc: var(--accent);
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / 2px var(--bl) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / 2px var(--bl) no-repeat;
  transition: opacity var(--t-fast) var(--ease), inset var(--t-fast) var(--ease);
}
.sk-pips {
  display: flex;
  gap: calc(3 * var(--u));
  height: calc(6 * var(--u));
}
.sk-pips > i,
.sk-rank-pips > i {
  display: block;
  width: calc(11 * var(--u));
  height: 100%;
  background: var(--line);
  transform: skewX(-20deg);
}
.sk-pips.long > i {
  width: calc(6 * var(--u));
}
.sk-pips > i.on,
.sk-rank-pips > i.on {
  background: var(--accent);
}
.sk-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  width: 100%;
  height: calc(2.3em);
  font-family: var(--f-head);
  font-size: var(--sk-name-fs);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
  color: var(--dim);
}

/* node badges */
.sk-ico > i {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  font-style: normal;
  pointer-events: none;
}
.sk-slotno {
  top: calc(-5 * var(--u));
  right: calc(-5 * var(--u));
  min-width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  padding: 0 calc(3 * var(--u));
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.sk-plus {
  right: calc(-6 * var(--u));
  bottom: calc(-6 * var(--u));
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg), 0 0 calc(10 * var(--u)) var(--accent-a35);
}
.sk-plus .gglyph,
.sk-lock .gglyph,
.sk-warn .gglyph {
  width: 70%;
  height: 70%;
}
.sk-lock {
  right: calc(-4 * var(--u));
  bottom: calc(-4 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: var(--dim);
  background: var(--panel-3);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg);
}
.sk-node .sk-warn {
  left: calc(-5 * var(--u));
  bottom: calc(-5 * var(--u));
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: var(--accent);
  background: var(--bg);
  border-radius: 50%;
}

/* node states */
.sk-node.is-locked .sk-ico {
  opacity: 0.5;
}
.sk-node.is-locked .sk-name {
  color: var(--faint);
}
.sk-node.is-learned .sk-name {
  color: var(--text);
}
.sk-node.can-learn .sk-ico {
  filter: drop-shadow(0 0 calc(8 * var(--u)) var(--accent-a35));
}
.sk-node.is-max .sk-pips > i.on {
  background: var(--good);
}
.sk-node.is-sel .sk-ico::after {
  opacity: 1;
}
.sk-node.is-sel .sk-ico {
  transform: translateY(calc(-2 * var(--u)));
  filter: drop-shadow(0 0 calc(12 * var(--u)) var(--accent-a35));
}
.sk-node.is-sel .sk-name {
  color: var(--accent);
}
.sk-node.is-armed .sk-ico::after {
  --bc: var(--info);
}
.sk-node.is-pressed .sk-ico {
  transform: scale(0.95);
}
.sk-node.is-flash .sk-ico {
  animation: sk-flash 0.7s var(--ease) 1;
}
@keyframes sk-flash {
  0% {
    transform: scale(1);
    filter: brightness(1.8) drop-shadow(0 0 calc(18 * var(--u)) var(--accent));
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}
.sk-node:focus-visible {
  outline: none;
}
.sk-node:focus-visible .sk-ico::after {
  opacity: 1;
  --bc: var(--info);
}
@media (hover: hover) and (pointer: fine) {
  .sk-node:hover .sk-ico {
    transform: translateY(calc(-2 * var(--u)));
  }
  .sk-node:hover .sk-name {
    color: var(--text);
  }
  .sk-gate:hover::after {
    filter: brightness(1.2);
  }
}

/* --------------------------------------------------------------------------------------------------- slot bar */
.sk-barwrap {
  position: relative;
  flex: none;
  margin-top: calc(6 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line-a60);
}
.sk-bar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  justify-content: safe center; /* centred, but never past the start when the slots do not fit */
  gap: calc(10 * var(--u));
  min-width: 0;
  margin: calc(-6 * var(--u));
  padding: calc(6 * var(--u)); /* room for the brackets / AUTO tags the overflow would cut */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
}
.sk-bar::-webkit-scrollbar {
  display: none;
}
.sk-bar-cap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(4 * var(--u));
  flex: 0 1 auto;
  min-width: 0;
  align-self: center;
  margin-right: calc(8 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
}
.sk-bar-slots {
  display: flex;
  flex: none;
  gap: calc(8 * var(--u));
}
.sk-bar-sep {
  align-self: stretch;
  width: 1px;
  margin: calc(4 * var(--u)) calc(4 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}
.sk-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5 * var(--u));
  width: calc(var(--sk-slot) + 22 * var(--u));
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.sk-slot-art {
  position: relative;
  display: block;
  width: var(--sk-slot);
  height: var(--sk-slot);
  flex: none;
  transition: transform var(--t-fast) var(--ease);
}
.sk-slot-art::after {
  content: "";
  position: absolute;
  inset: calc(-5 * var(--u));
  opacity: 0;
  pointer-events: none;
  --bl: calc(12 * var(--u));
  --bc: var(--accent);
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / 2px var(--bl) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / 2px var(--bl) no-repeat;
}
.sk-slot-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--faint);
  background: var(--hatch), rgba(18, 26, 28, 0.6);
  outline: 1px dashed var(--line-strong);
  outline-offset: -1px;
  clip-path: polygon(16% 0, 100% 0, 100% 84%, 84% 100%, 0 100%, 0 16%);
}
.sk-slot-empty .gglyph {
  width: 34%;
  height: 34%;
}
.sk-key {
  position: absolute;
  top: calc(-6 * var(--u));
  left: calc(4 * var(--u));
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  padding: 0 calc(4 * var(--u));
  font-family: var(--f-num);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  background: var(--panel-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.sk-slot .sk-auto {
  position: absolute;
  top: calc(var(--sk-slot) - 10 * var(--u));
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: calc(2 * var(--u)) calc(5 * var(--u));
  font-family: var(--f-head);
  font-size: max(10px, calc(11 * var(--u)));
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--info);
}
.sk-slot .sk-warn {
  position: absolute;
  top: calc(-6 * var(--u));
  right: calc(6 * var(--u));
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--accent);
  background: var(--bg);
  border-radius: 50%;
  font-style: normal;
}
.sk-slot .sk-warn .gglyph {
  width: 70%;
  height: 70%;
}
.sk-slot-name {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--dim);
}
.sk-slot:not(.is-empty) .sk-slot-name {
  color: var(--text);
}
.sk-shoulder .sk-key {
  color: var(--accent-ink);
  background: var(--info);
  box-shadow: none;
}
.sk-slot.is-empty .sk-slot-name {
  color: var(--faint);
}
.sk-slot.is-sel .sk-slot-art::after,
.sk-slot.is-over .sk-slot-art::after {
  opacity: 1;
}
.sk-slot.is-target .sk-slot-art {
  outline: 1px dashed var(--accent-dim);
  outline-offset: calc(2 * var(--u));
}
.sk-slot.is-target.is-src .sk-slot-art {
  outline-color: var(--info);
}
.sk-slot.is-over .sk-slot-art {
  transform: scale(1.06);
  outline-style: solid;
}
.sk-slot.is-pressed .sk-slot-art {
  transform: scale(0.95);
}
.sk-slot:focus-visible {
  outline: none;
}
.sk-slot:focus-visible .sk-slot-art::after {
  opacity: 1;
  --bc: var(--info);
}
@media (hover: hover) and (pointer: fine) {
  .sk-slot:hover .sk-slot-art {
    transform: translateY(calc(-2 * var(--u)));
  }
  .sk-slot[data-drag] {
    cursor: grab;
  }
  .sk-node[data-drag] {
    cursor: grab;
  }
}
.sk-dragging,
.sk-dragging * {
  cursor: grabbing !important;
}
.sk-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-tip);
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  margin: calc(-32 * var(--u)) 0 0 calc(-32 * var(--u));
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.6)) drop-shadow(0 0 calc(10 * var(--u)) var(--accent-a35));
}

/* "tap a slot" prompt: in the top bar, in place of auto-learn and reset, while a skill is armed */
.sk-top-hint {
  display: none;
  align-items: center;
  gap: calc(8 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  background: linear-gradient(90deg, rgba(57, 198, 217, 0.24), rgba(57, 198, 217, 0.06) 85%), var(--panel);
  box-shadow: inset 0 0 0 1px var(--info-dim);
  clip-path: polygon(calc(8 * var(--u)) 0, 100% 0, 100% calc(100% - 8 * var(--u)), calc(100% - 8 * var(--u)) 100%, 0 100%, 0 calc(8 * var(--u)));
}
.sk-top.is-armed .sk-top-hint {
  display: flex;
}
.sk-top-hint {
  max-width: calc(640 * var(--u));
  margin-left: auto;
}
.sk-top.is-armed > :is(.gk-spacer, .sk-al, .sk-reset) {
  display: none;
}
.sk-hint-g {
  color: var(--info);
}
.sk-hint-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
}
.sk-hint-x {
  flex: none;
}

/* ------------------------------------------------------------------ narrow list (container queries on the region)
   The list region's width decides, not the viewport: tablets, phones, the portrait sheet layout and big UI scales
   all land here. 780: no bar caption · 620: no names under slots · 440: compact top bar · 400 / 300: smaller nodes. */
.gwin[data-win="skills"] [data-region="list"] > .gwin-rin {
  container: sklist / inline-size;
}
/* size containment only where the detail has a fixed height (landscape); the portrait sheet sizes to its content */
html:not([data-orient="portrait"]) .gwin[data-win="skills"] [data-region="detail"] > .gwin-rin {
  container: skdetail / size;
}
@container sklist (max-width: 780px) {
  .sk-bar-cap {
    display: none;
  }
}
@container sklist (max-width: 620px) {
  .sk-slot {
    width: var(--sk-slot);
  }
  .sk-slot-name {
    display: none;
  }
  .sk-bar,
  .sk-bar-slots {
    gap: calc(6 * var(--u));
  }
  .sk-bar-sep {
    margin: calc(4 * var(--u)) calc(2 * var(--u));
  }
}

@container sklist (max-width: 440px) {
  .sk-sp-t,
  .sk-al .gsw-text small,
  .sk-reset .gk-sub,
  .sk-reset .gk-g {
    display: none;
  }
  .sk-top {
    gap: calc(8 * var(--u));
  }
  .sk-top-hint {
    font-size: var(--fs-sm);
  }
}
@container sklist (max-width: 400px) {
  .sk-tier {
    --sk-ico: calc(46 * var(--u));
    --sk-gate-w: calc(50 * var(--u));
    --sk-gh: calc(50 * var(--u));
    --sk-name-fs: max(11px, calc(11.5 * var(--u)));
    --sk-lab: calc(18 * var(--u) + 2.3 * var(--sk-name-fs));
  }
  .sk-gate-k {
    display: none;
  }
}
@container sklist (max-width: 300px) {
  .sk-tier {
    --sk-ico: calc(36 * var(--u));
    --sk-gate-w: calc(40 * var(--u));
    --sk-gh: calc(44 * var(--u));
    --sk-name-fs: 11px;
    --sk-lab: calc(14 * var(--u) + 2.3 * var(--sk-name-fs));
  }
  .sk-node {
    gap: calc(4 * var(--u));
  }
  .sk-pips {
    gap: calc(2 * var(--u));
    height: calc(5 * var(--u));
  }
  .sk-pips > i {
    width: calc(6 * var(--u));
  }
  .sk-ico > .sk-plus,
  .sk-ico > .sk-lock {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }
  .sk-slotno {
    min-width: calc(16 * var(--u));
    height: calc(16 * var(--u));
  }
}
/* a short detail region (small phones at a big UI scale): a smaller head so the numbers keep some room */
@container skdetail (max-height: 280px) {
  .gwin[data-win="skills"] .sk-dico {
    width: calc(44 * var(--u));
    height: calc(44 * var(--u));
  }
  .gwin[data-win="skills"] :is(.sk-deb, .sk-dshort, .sk-chips) {
    display: none;
  }
  .gwin[data-win="skills"] .sk-dhead {
    padding-bottom: calc(6 * var(--u));
  }
  .gwin[data-win="skills"] .sk-dact {
    padding-top: calc(6 * var(--u));
  }
  .gwin[data-win="skills"] .sk-dact .gbtn .gk-sub {
    display: none;
  }
}

/* --------------------------------------------------------------------------------------------------- detail */
.sk-dhead {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  flex: none;
  min-width: 0;
  padding-bottom: calc(12 * var(--u));
  margin-bottom: calc(4 * var(--u));
  border-bottom: 1px solid var(--line-a60);
}
.sk-dico {
  display: block;
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  flex: none;
  filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(0, 0, 0, 0.5));
}
.sk-dtitle {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  min-width: 0;
}
.sk-dname {
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
  overflow-wrap: anywhere;
}
.sk-dshort {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  color: var(--info);
}
.sk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin-top: calc(4 * var(--u));
}
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(24 * var(--u));
  padding: 0 calc(8 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--dim);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(calc(5 * var(--u)) 0, 100% 0, 100% calc(100% - 5 * var(--u)), calc(100% - 5 * var(--u)) 100%, 0 100%, 0 calc(5 * var(--u)));
}
.sk-chip.role {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--rc, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc, transparent) 26%, transparent), transparent 90%), var(--panel-2);
}
.sk-chip.role::before {
  content: "";
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  background: var(--rc, var(--dim));
  transform: rotate(45deg);
}
.sk-chip.main {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.sk-chip.slot {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: none;
}
.sk-chip.bad {
  color: var(--accent);
  background: var(--accent-a08);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}

.sk-dscroll {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  margin-right: calc(-8 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) 0;
}
.sk-dscroll > * {
  flex: none;
}
.sk-rank {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(4 * var(--u)) calc(8 * var(--u));
}
.sk-rank-l {
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--dim);
}
.sk-rank > b {
  font-size: var(--fs-h1);
  line-height: 1;
  color: var(--accent);
}
.sk-rank-m {
  margin-left: calc(-6 * var(--u));
  font-size: var(--fs-lg);
  color: var(--dim);
}
.sk-rank-pips {
  display: flex;
  gap: calc(4 * var(--u));
  height: calc(8 * var(--u));
  align-self: center;
  margin-left: calc(6 * var(--u));
}
.sk-rank-pips > i {
  width: calc(16 * var(--u));
}
.sk-rank-pips.long > i {
  width: calc(10 * var(--u));
}
.sk-rank.is-max .sk-rank-pips > i.on {
  background: var(--good);
}
.sk-rank-later {
  flex-basis: 100%;
  font-size: var(--fs-label);
  color: var(--dim);
}
.sk-desc {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
}

/* weapon need ("ต้องใช้ใบมีดในมือ") */
.sk-need {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(90deg, var(--good-a14), transparent 70%), var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 138, 0.35);
  clip-path: polygon(calc(10 * var(--u)) 0, 100% 0, 100% calc(100% - 10 * var(--u)), calc(100% - 10 * var(--u)) 100%, 0 100%, 0 calc(10 * var(--u)));
}
.sk-need::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(5 * var(--u));
  background: var(--good);
}
.sk-need.is-miss {
  background: linear-gradient(90deg, var(--accent-a16), transparent 75%), var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.sk-need.is-miss::before {
  background: var(--hazard);
}
.sk-need-art {
  display: flex;
  flex: none;
  width: calc(64 * var(--u));
  height: calc(48 * var(--u));
}
.sk-need-art.two {
  width: calc(84 * var(--u));
}
.sk-need-art > * {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}
.sk-need-art.two > * + * {
  margin-left: calc(-24 * var(--u));
  transform: scaleX(-1);
}
.sk-need-art img,
.sk-need-art svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sk-need-t {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
}
.sk-need-t > b {
  font-family: var(--f-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.sk-need-t > small {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: var(--fs-label);
  color: var(--good);
}
.sk-need.is-miss .sk-need-t > small {
  color: var(--accent);
}
.sk-need-go {
  flex: none;
}

/* numbers */
.sk-sec {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
}
.sk-cap {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  min-width: 0;
  padding-bottom: calc(6 * var(--u));
}
.sk-cap .g-eyebrow {
  flex: none;
}
.sk-cap-t {
  font-family: var(--f-head);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.sk-cap-t.accent {
  color: var(--accent);
}
.sk-cap-r {
  margin-left: auto;
  min-width: 0;
  font-size: var(--fs-label);
  color: var(--dim);
  text-align: right;
}
.sk-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-bottom: 1px solid var(--line-a60);
}
.sk-stat-l {
  font-size: var(--fs-sm);
  color: var(--dim);
}
.sk-stat-v {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.sk-stat-v .g-num.th {
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.sk-arrow {
  align-self: center;
  color: var(--good);
}
.sk-arrow .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.sk-next {
  color: var(--good);
}
.sk-stat-s {
  grid-column: 1 / -1;
  font-size: var(--fs-label);
  color: var(--faint);
  text-align: right;
}

/* ★ modifier choice cards */
.sk-mods .sk-cap {
  padding-top: calc(4 * var(--u));
}
.sk-modrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8 * var(--u));
}
.sk-mod {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
  min-height: var(--tap);
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.sk-mod-top {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  min-width: 0;
}
.sk-mod-en {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--f-head);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
}
.sk-mod-on {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  flex: none;
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--accent);
}
.sk-mod-lock {
  flex: none;
  color: var(--faint);
}
.sk-mod-name {
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--info);
}
.sk-mod-desc {
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--dim);
}
.sk-mod.is-selected .sk-mod-en {
  color: var(--accent);
}
.sk-mod.is-selected .sk-mod-desc {
  color: var(--text);
}
.sk-mod.is-locked {
  --fill: var(--hatch), var(--panel-a72);
  opacity: 0.6;
}

/* mastery steps */
.sk-steps {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-steps > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(calc(8 * var(--u)) 0, 100% 0, 100% calc(100% - 8 * var(--u)), calc(100% - 8 * var(--u)) 100%, 0 100%, 0 calc(8 * var(--u)));
}
.sk-steps > li.is-on {
  background: linear-gradient(90deg, var(--accent-a16), transparent 70%), var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.sk-step-r {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(40 * var(--u));
  line-height: 1;
}
.sk-step-r small {
  font-size: max(10px, calc(11 * var(--u)));
  color: var(--dim);
}
.sk-step-r b {
  font-size: var(--fs-xl);
  color: var(--dim);
}
.is-on > .sk-step-r b {
  color: var(--accent);
}
.sk-step-d {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--dim);
}
.is-on > .sk-step-d {
  color: var(--text);
}
.sk-step-s {
  color: var(--faint);
}
.is-on > .sk-step-s {
  color: var(--good);
}
.sk-lvchip {
  height: calc(20 * var(--u));
  margin-left: calc(4 * var(--u));
  vertical-align: middle;
}

/* slot assign + auto-cast */
.sk-assign {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(6 * var(--u));
  margin-bottom: calc(8 * var(--u));
}
.sk-assign .gbtn {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  font-family: var(--f-num);
  font-size: var(--fs-lg);
}
.sk-assign .gbtn[aria-pressed="true"] {
  --bd: var(--accent);
  --fill: linear-gradient(180deg, var(--accent-a35), var(--accent-a08)), var(--panel-2);
  color: var(--accent);
}
.sk-autocast {
  width: 100%;
}
.sk-note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin: 0;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
  background: var(--info-a10);
  box-shadow: inset 0 0 0 1px var(--info-dim);
}
.sk-note > .gglyph {
  color: var(--info);
  margin-top: calc(2 * var(--u));
}

/* shoulder gear list */
.sk-gears {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
}
.sk-gear {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sk-gear-art {
  display: block;
  width: calc(56 * var(--u));
  height: calc(44 * var(--u));
  flex: none;
}

/* fixed main action */
.sk-dact {
  flex: none;
  padding-top: calc(12 * var(--u));
  margin-top: calc(4 * var(--u));
  border-top: 1px solid var(--line-a60);
}
.sk-dact .gbtn.sk-maxed {
  opacity: 1;
  color: var(--good);
}

/* ----------------------------------------------------------------------------------------------- tiers / sizes */
html[data-tier="compact"] .sk-al .gsw-text small {
  display: none;
}
html[data-tier="compact"] .sk-dico {
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
}
html[data-tier="phone"] .sk-top {
  gap: calc(8 * var(--u));
  padding-bottom: calc(6 * var(--u));
  margin-bottom: 0;
}
html[data-tier="phone"] .sk-sp-ico {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
html[data-tier="phone"] .sk-sp-n {
  font-size: var(--fs-title);
}
html[data-tier="phone"] .sk-sp-t small,
html[data-tier="phone"] .sk-al .gsw-text small {
  display: none;
}
html[data-tier="phone"] .sk-top-hint {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .sk-barwrap {
  margin-top: calc(2 * var(--u));
  padding-top: calc(8 * var(--u));
}
html[data-tier="phone"] .sk-dhead {
  gap: calc(10 * var(--u));
  padding-bottom: calc(8 * var(--u));
}
html[data-tier="phone"] .sk-dico {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}
html[data-tier="phone"] .sk-dname {
  font-size: var(--fs-xl);
}
html[data-tier="phone"] .sk-dshort {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .sk-chips {
  gap: calc(4 * var(--u));
  margin-top: calc(2 * var(--u));
}
html[data-tier="phone"] .sk-dscroll {
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] .sk-modrow {
  grid-template-columns: minmax(0, 1fr);
}
html[data-tier="phone"] .sk-dact {
  padding-top: calc(8 * var(--u));
}
html[data-tier="phone"] .sk-tier {
  max-height: none;
  min-height: calc(var(--sk-ico) + var(--sk-lab) + 14 * var(--u));
}
html[data-tier="phone"] .sk-dact .gbtn.lg {
  min-height: var(--tap);
  font-size: var(--fs-body);
}

/* portrait: the list fills the window; the detail is the bottom sheet */
html[data-orient="portrait"] .sk-gate-k {
  display: none;
}
html[data-orient="portrait"] .sk-tier {
  max-height: none;
}

@media (prefers-reduced-motion: reduce) {
  .sk-node.is-flash .sk-ico {
    animation: none;
  }
  .sk-ico,
  .sk-slot-art {
    transition: none;
  }
}

/* 2026-10-09 review, phone landscape: one-line node names (ellipsis; the detail shows the full name) so the second
   tree row is not cut at the scroll edge above the slot bar ('Concussion Round' read 'Concussion') */
html[data-tier="phone"]:not([data-orient="portrait"]) .sk-name {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  height: 1.3em;
  word-break: break-all;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .gscroll.sk-tree {
  padding-bottom: calc(8 * var(--u));
}