/* Arena Teney — Skills S01a
 * New Hall of Mastery landing shell only.
 * Legacy skills logic remains mounted but visually hidden for later atomic migration.
 */

#screen-skills[data-skills-s01a="true"] {
  --skills-gold: #bfa66b;
  --skills-gold-bright: #e0cd91;
  --skills-gold-soft: rgba(191, 166, 107, .18);
  --skills-line: rgba(207, 188, 137, .18);
  --skills-line-strong: rgba(207, 188, 137, .42);
  --skills-ivory: #ece6d8;
  --skills-muted: #9b9a93;
  --skills-stone: #0a0c0d;
  --skills-stone-2: #111416;
  --skills-stone-3: #171a1b;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow-x: hidden;
  color: var(--skills-ivory);
}

#screen-skills[data-skills-s01a="true"] > .skills-s01a-legacy {
  display: none !important;
}

.skills-s01a-shell {
  display: grid;
  gap: 15px;
  width: 100%;
  min-width: 0;
}

.skills-s01a-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 18px 18px;
  border: 1px solid var(--skills-line-strong);
  border-radius: 3px 18px 3px 18px;
  background:
    radial-gradient(circle at 82% 16%, rgba(188, 157, 83, .13), transparent 32%),
    radial-gradient(circle at 12% 90%, rgba(116, 125, 107, .10), transparent 34%),
    linear-gradient(155deg, rgba(25, 25, 22, .98), rgba(11, 13, 14, .99) 60%, rgba(6, 8, 9, .99));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, .34),
    inset 0 0 0 1px rgba(255, 250, 225, .018),
    inset 0 -52px 88px rgba(0, 0, 0, .24);
}

.skills-s01a-hero::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid rgba(207, 188, 137, .08);
  border-radius: 1px 13px 1px 13px;
  pointer-events: none;
}

.skills-s01a-hero::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 13px;
  height: 1px;
  background: linear-gradient(90deg, var(--skills-gold), rgba(191, 166, 107, .13) 57%, transparent 90%);
  opacity: .62;
  pointer-events: none;
}

.skills-s01a-seal {
  position: absolute;
  top: -39px;
  right: -39px;
  width: 154px;
  height: 154px;
  border: 1px solid rgba(220, 199, 139, .28);
  border-radius: 50%;
  opacity: .25;
  pointer-events: none;
  box-shadow:
    0 0 0 15px rgba(191, 166, 107, .025),
    0 0 0 39px rgba(191, 166, 107, .018),
    inset 0 0 40px rgba(191, 166, 107, .05);
}

.skills-s01a-seal::before,
.skills-s01a-seal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(220, 199, 139, .42);
  transform: translate(-50%, -50%) rotate(45deg);
}

.skills-s01a-seal::before { width: 1px; height: 108px; }
.skills-s01a-seal::after { width: 108px; height: 1px; }

.skills-s01a-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 7px;
  color: var(--skills-gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.skills-s01a-hero h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 410px;
  color: var(--skills-ivory);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 8.7vw, 40px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .7);
}

.skills-s01a-hero > p {
  position: relative;
  z-index: 1;
  max-width: 510px;
  margin: 11px 0 0;
  color: #aaa9a2;
  font-size: 12px;
  line-height: 1.55;
}

.skills-s01a-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: stretch;
  margin-top: 17px;
}

.skills-s01a-identity,
.skills-s01a-points {
  min-width: 0;
  border: 1px solid rgba(195, 179, 136, .23);
  background: rgba(7, 9, 10, .62);
}

.skills-s01a-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 2px 12px 2px 12px;
}

.skills-s01a-crest {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(206, 177, 103, .45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 166, 107, .12), rgba(7, 9, 10, .88) 68%);
  font-size: 20px;
  box-shadow: inset 0 0 20px rgba(191, 166, 107, .05);
}

.skills-s01a-identity-copy { min-width: 0; }
.skills-s01a-identity-copy strong {
  display: block;
  overflow: hidden;
  color: var(--skills-ivory);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-s01a-identity-copy span {
  display: block;
  margin-top: 3px;
  color: #8f908a;
  font-size: 10px;
}

.skills-s01a-points {
  min-width: 102px;
  padding: 9px 12px;
  border-radius: 12px 2px 12px 2px;
  text-align: right;
}
.skills-s01a-points span {
  display: block;
  color: #888980;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.skills-s01a-points strong {
  display: block;
  margin-top: 2px;
  color: var(--skills-gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1;
}

.skills-s01a-block {
  position: relative;
  min-width: 0;
  padding: 16px 13px 15px;
  border-top: 1px solid var(--skills-line-strong);
  border-bottom: 1px solid rgba(207, 188, 137, .12);
  background:
    linear-gradient(90deg, rgba(191, 166, 107, .023), transparent 22%, transparent 78%, rgba(191, 166, 107, .018)),
    linear-gradient(180deg, rgba(13, 16, 17, .89), rgba(8, 10, 11, .92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

.skills-s01a-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding: 0 2px;
}

.skills-s01a-block-head small {
  display: block;
  margin-bottom: 3px;
  color: #7f806f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.skills-s01a-block-head h3 {
  margin: 0;
  color: var(--skills-ivory);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 600;
}

.skills-s01a-block-head > span {
  color: #7f8079;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 700;
}

.skills-s01a-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.skills-s01a-card {
  position: relative;
  min-width: 0;
  min-height: 124px;
  padding: 13px 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(207, 188, 137, .17);
  border-radius: 2px 13px 2px 13px;
  background:
    radial-gradient(circle at 92% 5%, rgba(191, 166, 107, .08), transparent 36%),
    linear-gradient(155deg, rgba(20, 22, 21, .98), rgba(9, 11, 12, .98));
  color: var(--skills-ivory);
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 225, .012), 0 9px 22px rgba(0, 0, 0, .18);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.skills-s01a-card:active { transform: translateY(1px); }
.skills-s01a-card[aria-pressed="true"] {
  border-color: rgba(222, 196, 125, .52);
  background:
    radial-gradient(circle at 88% 4%, rgba(191, 166, 107, .18), transparent 42%),
    linear-gradient(155deg, rgba(31, 29, 23, .99), rgba(12, 13, 13, .99));
  box-shadow: inset 3px 0 0 rgba(211, 182, 108, .66), 0 11px 28px rgba(0, 0, 0, .22);
}

.skills-s01a-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.skills-s01a-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(197, 173, 113, .26);
  border-radius: 50%;
  background: rgba(5, 7, 8, .68);
  font-size: 18px;
  box-shadow: inset 0 0 18px rgba(191, 166, 107, .04);
}

.skills-s01a-arrow {
  color: rgba(216, 195, 139, .52);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.skills-s01a-card strong {
  display: block;
  margin-top: 10px;
  color: #e9e3d5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.skills-s01a-card span:last-child {
  display: block;
  margin-top: 5px;
  color: #8e9089;
  font-size: 10px;
  line-height: 1.35;
}

.skills-s01a-card[aria-pressed="true"] strong { color: var(--skills-gold-bright); }

.skills-s01a-preview {
  position: relative;
  overflow: hidden;
  padding: 15px 14px 14px;
  border: 1px solid rgba(207, 188, 137, .24);
  border-radius: 2px 14px 2px 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(191, 166, 107, .08), transparent 34%),
    linear-gradient(160deg, rgba(19, 20, 18, .98), rgba(8, 10, 11, .99));
}

.skills-s01a-preview::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(211, 182, 108, .74), transparent);
}

.skills-s01a-preview small {
  display: block;
  color: #7e7f76;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.skills-s01a-preview h4 {
  margin: 5px 0 0;
  color: var(--skills-gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 600;
}

.skills-s01a-preview p {
  margin: 7px 0 0;
  color: #9d9d96;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 390px) {
  .skills-s01a-hero { padding-left: 15px; padding-right: 15px; }
  .skills-s01a-grid { gap: 7px; }
  .skills-s01a-card { min-height: 118px; padding: 11px 10px; }
  .skills-s01a-card strong { font-size: 14px; }
  .skills-s01a-points { min-width: 92px; }
}