/* ================================================================
   BUILDS.CSS — Compact redesign
   ================================================================ */
body { font-family: 'Rajdhani', sans-serif; overflow-x: clip; }

.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(79,195,247,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,.022) 1px, transparent 1px);
  background-size: 44px 44px;
}

.builds-page {
  padding-top: 56px; min-height: 100vh; position: relative; z-index: 1;
  max-width: 1140px; margin: 0 auto;
  padding-left: 20px; padding-right: 20px; padding-bottom: 60px;
}

/* ── Hero ── */
.builds-hero {
  text-align: center; padding: 28px 0 20px;
  border-bottom: 1px solid rgba(200,155,60,.1); margin-bottom: 20px;
}
.builds-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
}
.builds-eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.builds-title {
  font-family: 'Cinzel', serif; font-size: clamp(28px, 6vw, 56px); font-weight: 900;
  color: var(--text); letter-spacing: .12em; margin: 0 0 14px;
  text-shadow: 0 0 30px rgba(200,155,60,.15);
}

/* ── Tabs ── */
.builds-tabs {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(200,155,60,.22);
  clip-path: polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);
  overflow: hidden;
}
.builds-tab {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 30px; background: rgba(255,255,255,.03);
  border: none; cursor: pointer; transition: background .2s;
}
.builds-tab:hover { background: rgba(200,155,60,.07); }
.builds-tab.active { background: rgba(200,155,60,.13); }
.tab-icon { font-size: 16px; }
.tab-name { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--text); }
.builds-tab.active .tab-name { color: var(--gold); }
.tab-sub { font-size: 9px; color: var(--muted); letter-spacing: .06em; }
.builds-tab-divider { width: 1px; background: rgba(200,155,60,.18); }

/* ── Content ── */
.builds-content { display: flex; flex-direction: column; gap: 10px; }
.build-path { display: none; flex-direction: column; gap: 10px; }
.build-path.active { display: flex; }

/* ── Layout rows ── */
.bp-top-row { display: grid; grid-template-columns: 340px 1fr; gap: 10px; align-items: start; }
.bp-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media(max-width:900px) { .bp-top-row { grid-template-columns: 1fr; } }
@media(max-width:700px) { .bp-bottom-row { grid-template-columns: 1fr; } }

/* ── Panels ── */
.bp-panel {
  background: linear-gradient(180deg, #0f1a2b 0%, #08111a 100%);
  border: 1px solid rgba(200,155,60,.12);
  clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  padding: 12px 14px; position: relative;
}
.bpp-label {
  font-size: 9px; font-weight: 800; letter-spacing: .22em; color: var(--gold);
  text-transform: uppercase; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.bpp-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(200,155,60,.15),transparent); }
.bpp-hint { font-size: 9px; color: rgba(255,255,255,.2); text-align: right; margin-top: 6px; letter-spacing: .05em; }

/* ── Runas compactas ── */
.runes-compact { display: flex; gap: 14px; flex-wrap: wrap; }
.rc-tree { display: flex; flex-direction: column; gap: 8px; }
.rc-tree.secondary { border-left: 1px solid rgba(255,255,255,.05); padding-left: 14px; }
.rc-tree-name { font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--gold); }
.rc-keystones { display: flex; align-items: center; gap: 8px; }
.rc-keystone {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: default; opacity: .45; transition: opacity .2s;
}
.rc-keystone.active { opacity: 1; }
.rc-keystone img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; }
.rc-keystone.active img { border-color: rgba(200,155,60,.6); box-shadow: 0 0 12px rgba(200,155,60,.2); }
.rc-keystone span { font-size: 9px; color: var(--muted); text-align: center; max-width: 52px; line-height: 1.2; }
.rc-keystone.active span { color: var(--text); }
.rc-or { font-size: 10px; color: var(--muted); }
.rc-minors { display: flex; gap: 8px; }
.rc-minor {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: default;
}
.rc-minor img { width: 32px; height: 32px; border-radius: 50%; opacity: .85; transition: opacity .15s; }
.rc-minor img:hover { opacity: 1; }
.rc-minor span { font-size: 8px; color: var(--muted); text-align: center; max-width: 40px; line-height: 1.2; }
.rc-shards { display: flex; gap: 5px; margin-top: 4px; }
.rc-shard { width: 18px; height: 18px; border-radius: 50%; cursor: default; }
.rc-shard.ap  { background: rgba(145,70,255,.6); border: 1px solid rgba(145,70,255,.4); }
.rc-shard.ah  { background: rgba(79,195,247,.6); border: 1px solid rgba(79,195,247,.4); }
.rc-shard.hp  { background: rgba(239,83,80,.6);  border: 1px solid rgba(239,83,80,.4); }

/* ── Build row ── */
.build-row {
  display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap;
}
.build-item-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bi-num { font-family: 'Bebas Neue', sans-serif; font-size: 10px; color: rgba(200,155,60,.5); letter-spacing: .1em; }
.bi-arrow { font-size: 20px; color: rgba(200,155,60,.3); padding-bottom: 18px; flex-shrink: 0; }

.bi-slot {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: rgba(10,14,26,.9); border: 1px solid rgba(200,155,60,.18);
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.bi-slot:hover { border-color: rgba(200,155,60,.5); box-shadow: 0 0 14px rgba(200,155,60,.12); }
.bi-slot.core { border-color: rgba(200,155,60,.4); }
.bi-slot.choice { gap: 2px; }
.bi-slot img { width: 52px; height: 52px; display: block; }
.bi-alt-img { width: 28px !important; height: 28px !important; opacity: .7; }
.bi-badge {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 7px; font-weight: 900; letter-spacing: .08em; white-space: nowrap;
  padding: 1px 5px; color: #000;
  background: rgba(200,155,60,.9);
}
.bi-badge.alt { background: rgba(79,195,247,.9); }

/* ── Build tooltip ── */
.build-tooltip, .sit-tooltip {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 14px; right: 14px;
  background: #0a111c; border: 1px solid rgba(200,155,60,.3);
  clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
  padding: 9px 12px; z-index: 20; pointer-events: none;
}
.build-tooltip.visible, .sit-tooltip.visible { display: block; }
.build-tooltip strong, .sit-tooltip strong { font-family: 'Cinzel', serif; font-size: 12px; color: var(--text); display: block; margin-bottom: 3px; }
.build-tooltip p, .sit-tooltip p { font-size: 11px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.tt-rating { font-size: 9px; font-weight: 800; color: var(--gold); margin-left: 6px; }
.tt-cost { font-size: 9px; color: rgba(200,155,60,.6); margin-left: 6px; }

/* ── Situacionales compactos ── */
.sit-compact-list { display: flex; flex-direction: column; gap: 6px; }
.sci-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  cursor: pointer; transition: border-color .15s;
}
.sci-item:hover { border-color: rgba(200,155,60,.25); }
.sci-item img { width: 36px; height: 36px; flex-shrink: 0; clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%); }
.sci-info { display: flex; align-items: center; gap: 8px; flex: 1; }
.sci-name { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: var(--text); flex: 1; }

/* ── Info tabs ── */
.info-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.info-tab {
  padding: 5px 14px;
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  color: var(--muted); font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; cursor: pointer; transition: all .15s;
}
.info-tab:hover { background: rgba(200,155,60,.08); color: var(--text); }
.info-tab.active { background: rgba(200,155,60,.14); border-color: rgba(200,155,60,.35); color: var(--gold); }
.info-content { display: none; }
.info-content.active { display: block; }

/* ── Stats bar ── */
.stat-priority-bar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.stat-pill {
  font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  padding: 4px 10px;
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
}
.stat-pill.ap   { background:rgba(145,70,255,.18); color:#bf94ff; border:1px solid rgba(145,70,255,.35); }
.stat-pill.hp   { background:rgba(239,83,80,.13);  color:#ff8a80; border:1px solid rgba(239,83,80,.3); }
.stat-pill.ah   { background:rgba(79,195,247,.1);  color:#80d8ff; border:1px solid rgba(79,195,247,.28); }
.stat-pill.mpen { background:rgba(200,155,60,.1);  color:#C89B3C; border:1px solid rgba(200,155,60,.28); }
.stat-pill.ms   { background:rgba(74,222,128,.08); color:#69f0ae; border:1px solid rgba(74,222,128,.22); }
.stat-pill.def  { background:rgba(255,255,255,.05);color:var(--muted); border:1px solid rgba(255,255,255,.09); }
.stat-pill.mana { background:rgba(33,150,243,.08); color:#82b1ff; border:1px solid rgba(33,150,243,.18); }
.stat-arrow { font-size: 14px; color: rgba(200,155,60,.3); }

/* ── Cuándo ── */
.when-grid { display: flex; flex-direction: column; gap: 10px; }
.when-card {
  border: 1px solid rgba(255,255,255,.07); padding: 10px 12px;
  clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
}
.when-card.elec { border-color: rgba(239,83,80,.2); }
.when-card.dh   { border-color: rgba(145,70,255,.2); }
.when-card.conq { border-color: rgba(200,155,60,.2); }
.when-header { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.when-header img { width:28px; height:28px; border-radius:50%; }
.when-header span { font-family:'Cinzel',serif; font-size:11px; font-weight:700; color:var(--text); }
.when-card ul { margin:0; padding-left:14px; display:flex; flex-direction:column; gap:3px; }
.when-card li { font-size:11px; color:var(--text-dim); line-height:1.3; }
.when-note { font-size:10px; color:var(--muted); margin-top:7px; line-height:1.4; }
.when-two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.when-sub { font-size:9px; font-weight:800; letter-spacing:.1em; color:var(--gold); margin-bottom:5px; }
@media(max-width:500px){ .when-two-col { grid-template-columns:1fr; } }

/* ── Gameplan mini ── */
.gp-tabs-mini { display:flex; gap:4px; margin-bottom:8px; }
.gp-tab-mini {
  padding:4px 12px; font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.08em; cursor:pointer; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  color:var(--muted); transition:all .15s;
}
.gp-tab-mini.active { background:rgba(200,155,60,.12); border-color:rgba(200,155,60,.3); color:var(--gold); }
.gp-mini-content { display:flex; flex-direction:column; gap:6px; }
.gp-mini-content.hidden { display:none; }
.gp-phase { display:grid; grid-template-columns:52px 1fr; gap:8px; align-items:baseline; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.04); }
.gp-phase:last-child { border-bottom:none; padding-bottom:0; }
.gp-phase-label { font-family:'Cinzel',serif; font-size:8px; font-weight:900; letter-spacing:.1em; color:var(--gold); padding-top:2px; }
.gp-phase p { font-size:11px; color:var(--text-dim); margin:0; line-height:1.5; }

/* ── Tags ── */
.rc-tag {
  font-size:8px; font-weight:800; letter-spacing:.1em; padding:1px 7px;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}
.rc-tag.aggro { background:rgba(239,83,80,.14); color:#ff8a80; border:1px solid rgba(239,83,80,.28); }
.rc-tag.flex  { background:rgba(145,70,255,.14); color:#bf94ff; border:1px solid rgba(145,70,255,.28); }
.rc-tag.safe  { background:rgba(200,155,60,.14); color:var(--gold); border:1px solid rgba(200,155,60,.28); }

/* ── Ratings ── */
.item-rating {
  font-family:'Cinzel',serif; font-size:8px; font-weight:900; padding:1px 6px;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}
.s10 { background:rgba(74,222,128,.14); color:#4ADE80; border:1px solid rgba(74,222,128,.28); }
.s9  { background:rgba(200,155,60,.14); color:#C89B3C; border:1px solid rgba(200,155,60,.3); }
.s8  { background:rgba(79,195,247,.1);  color:#4FC3F7; border:1px solid rgba(79,195,247,.28); }
.s7  { background:rgba(145,70,255,.1);  color:#9146FF; border:1px solid rgba(145,70,255,.28); }
.s6  { background:rgba(250,204,21,.08); color:#FACC15; border:1px solid rgba(250,204,21,.22); }

.nav-active { color:var(--gold) !important; font-weight:700 !important; }

@media(max-width:600px){
  .build-row { gap:4px; }
  .bi-slot img { width:42px; height:42px; }
  .builds-tabs { width:100%; }
  .builds-tab { flex:1; padding:10px 12px; }
  .bp-top-row, .bp-bottom-row { grid-template-columns:1fr; }
}

/* ── CAROUSEL ARROW BTN ────────────────────────────────────────── */
.bc-arrow-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; align-self: center;
  background: rgba(200,155,60,.1); border: 1px solid rgba(200,155,60,.3);
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  cursor: pointer; margin-bottom: 18px;
  transition: background .2s, border-color .2s;
}
.bc-arrow-btn:hover { background: rgba(200,155,60,.22); border-color: rgba(200,155,60,.6); }
.bc-chevron {
  width: 16px; height: 16px; color: var(--gold);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
/* Pulse animation to indicate interactivity */
@keyframes bc-pulse {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%       { transform: translateX(3px); opacity: .6; }
}
.bc-arrow-btn:not(.open-state) .bc-chevron {
  animation: bc-pulse 1.8s ease-in-out infinite;
}

/* sc-arrow in sit panel */
.sc-arrow { margin-bottom: 0; margin-top: 4px; width: 100%; height: 26px; }

/* ── CAROUSEL DETAIL PANEL ─────────────────────────────────────── */
.bc-detail {
  display: none; margin-top: 10px;
  border-top: 1px solid rgba(200,155,60,.12);
  padding-top: 10px;
  animation: bc-slide-in .2s ease;
}
.bc-detail.open { display: block; }
@keyframes bc-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Detail nav */
.bc-nav {
  display: flex; align-items: center; gap: 8px;
}
.bc-prev, .bc-next {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  color: var(--text-dim); font-size: 18px; line-height: 1;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center;
}
.bc-prev:hover, .bc-next:hover {
  background: rgba(200,155,60,.12); border-color: rgba(200,155,60,.35); color: var(--gold);
}
.bc-info {
  flex: 1;
  background: rgba(10,14,26,.8); border: 1px solid rgba(200,155,60,.15);
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  padding: 8px 12px; min-height: 60px;
}
.bc-info strong {
  font-family: 'Cinzel', serif; font-size: 11px; color: var(--text); display: block; margin-bottom: 3px;
}
.bc-info p { font-size: 11px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.tt-rating { font-size: 9px; font-weight: 800; color: var(--gold); margin-left: 6px; }
.tt-cost   { font-size: 9px; color: rgba(200,155,60,.55); margin-left: 5px; }
.bc-dot    { font-size: 8px; color: rgba(255,255,255,.2); margin-left: 6px; }

/* Active item highlight */
.bi-slot.active { border-color: var(--gold) !important; box-shadow: 0 0 10px rgba(200,155,60,.25); }
.sci-item.active { border-color: rgba(200,155,60,.4) !important; background: rgba(200,155,60,.06); }

/* sit-carousel arrow stop animation when open */
.bc-arrow-btn.open-state .bc-chevron { animation: none; }

/* ── INFO CAROUSEL (bottom of info panel) ──────────────────────── */
.info-carousel { margin-top: 14px; border-top: 1px solid rgba(200,155,60,.1); padding-top: 10px; }
.ic-header { display: flex; align-items: center; gap: 6px; }
.ic-tabs { display: flex; gap: 4px; flex: 1; }
.ic-tab {
  padding: 5px 12px;
  clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  color: var(--muted); font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; cursor: pointer; transition: all .15s;
}
.ic-tab:hover { background: rgba(200,155,60,.08); color: var(--text); }
.ic-tab.active { background: rgba(200,155,60,.14); border-color: rgba(200,155,60,.35); color: var(--gold); }

/* Arrow for info carousel */
.ic-arrow-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(200,155,60,.1); border: 1px solid rgba(200,155,60,.3);
  clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  cursor: pointer; transition: background .2s, border-color .2s;
}
.ic-arrow-btn:hover { background: rgba(200,155,60,.22); border-color: rgba(200,155,60,.6); }
.ic-chevron {
  width: 14px; height: 14px; color: var(--gold);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.ic-arrow-btn:not(.open-state) .ic-chevron {
  animation: bc-pulse 1.8s ease-in-out infinite;
}

/* Carousel body */
.ic-body { display: none; margin-top: 10px; animation: bc-slide-in .2s ease; }
.ic-body.open { display: block; }
.ic-slide { display: none; }
.ic-slide.active { display: block; }

/* ── SITUACIONALES INLINE ─────────────────────────────────────── */
.sit-inline-list { display: flex; flex-direction: column; }

.sci-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer; transition: background .15s;
}
.sci-item:last-of-type { border-bottom: none; }
.sci-item:hover { background: rgba(200,155,60,.04); }
.sci-item.active { background: rgba(200,155,60,.07); border-bottom-color: transparent; }
.sci-item img { width: 38px; height: 38px; flex-shrink: 0; clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%); }
.sci-info { display: flex; align-items: center; gap: 8px; flex: 1; }
.sci-name { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: var(--text); flex: 1; }
.sci-chevron {
  width: 14px; height: 14px; color: var(--muted); flex-shrink: 0;
  transition: transform .25s ease;
}

/* Inline expand */
.sci-expand {
  display: none; padding: 8px 12px 10px 58px;
  background: rgba(200,155,60,.04);
  border-bottom: 1px solid rgba(200,155,60,.1);
  animation: bc-slide-in .15s ease;
}
.sci-expand.open { display: block; }
.sci-note { font-size: 11px; color: var(--text-dim); line-height: 1.55; margin: 0; }

/* ── BUILDS MOBILE EXTRAS ──────────────────────────────────────── */
@media(max-width:700px) {
  /* Path tabs */
  .builds-tabs { gap: 6px; }
  .builds-tab  { font-size: 12px !important; padding: 10px 16px !important; }
  /* Build carousel items smaller */
  .bc-item img { width: 44px !important; height: 44px !important; }
  /* Situacionales — full width */
  .sci-item { padding: 10px 12px !important; }
  .sci-name { font-size: 12px !important; }
  /* Runes — wrap minors */
  .rc-minors { gap: 6px !important; flex-wrap: wrap; }
  .rune-img   { width: 28px !important; height: 28px !important; }
}
@media(max-width:500px) {
  /* Stack runes columns */
  .rc-cols { grid-template-columns: 1fr !important; }
  /* Build info smaller */
  .bc-info p { font-size: 11px !important; }
  /* Stats chips scrollable */
  .stat-chips {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .stat-chips::-webkit-scrollbar { display: none; }
  .stat-chip { white-space: nowrap; }
}

/* ── RUNE SHARD LABELS ──────────────────────────────────────── */
.rc-shard-labels {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 4px;
}
.rc-shard-labels span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: center;
  width: 32px;
  text-transform: uppercase;
}