/* ═══════════════════════════════════════════════════════════════
   TRAIT DROPDOWN — Normie Editor
   Toggle arrow next to the level display, opens a clean list
   of on-chain attributes. Omits level (already shown).
   ═══════════════════════════════════════════════════════════════ */

/* ── Row wrapper: level display + toggle sit side by side ──── */
.tb-row{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:6px;
  position:relative;
}
/* Row shows whenever the level display inside it is visible */
.tb-row:has(.lc-level-display.is-visible){ display:flex; }

/* Override level display margin since the row now provides it */
.tb-row .lc-level-display{
  margin-top:0;
}

/* ── Toggle button ────────────────────────────────────────────── */
.tb-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border:1.5px solid rgba(74,74,74,.3);
  border-radius:6px;
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.tb-toggle:hover{
  background:rgba(255,255,255,.55);
  border-color:rgba(74,74,74,.5);
}
.tb-toggle:active{
  transform:scale(.92);
}

/* Arrow icon */
.tb-toggle__arrow{
  display:block;
  width:10px;
  height:10px;
  border-right:1.5px solid var(--ink, #2f2f2f);
  border-bottom:1.5px solid var(--ink, #2f2f2f);
  transform:rotate(45deg) translateY(-1px);
  transition:transform .25s ease;
  opacity:.55;
}
.tb-toggle.is-open .tb-toggle__arrow{
  transform:rotate(-135deg) translateY(-1px);
}

/* ── Dropdown panel ───────────────────────────────────────────── */
.tb-dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:8px;
  min-width:220px;
  max-width:min(360px, 92vw);
  background:var(--panel, #e7e7e7);
  border:1.5px solid var(--line, #4a4a4a);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  padding:10px 0;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
}
.tb-dropdown.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* ── Trait rows inside dropdown ─────────────────────────────── */
.tb-trait{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px;
  letter-spacing:1.2px;
  line-height:1.3;
}
.tb-trait + .tb-trait{
  border-top:1px solid rgba(74,74,74,.1);
}

.tb-trait__key{
  text-transform:uppercase;
  opacity:.45;
  letter-spacing:1.5px;
  font-size:9px;
  flex-shrink:0;
  margin-right:12px;
}
.tb-trait__val{
  text-align:right;
  opacity:.85;
  text-transform:uppercase;
  overflow-wrap:break-word;
  word-break:normal;
}
}

/* ── Stat separator ─────────────────────────────────────────── */
.tb-sep{
  height:1px;
  margin:6px 14px;
  background:rgba(74,74,74,.15);
}

/* ── Pixel stat row (dashed style) ──────────────────────────── */
.tb-trait--stat .tb-trait__key{
  opacity:.35;
}
.tb-trait--stat .tb-trait__val{
  opacity:.65;
}

/* ── Empty state ─────────────────────────────────────────────── */
.tb-empty{
  padding:10px 14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  opacity:.4;
}

/* ── Dark mode ──────────────────────────────────────────────── */
body.dark-ui .tb-toggle{
  background:rgba(30,34,44,.5);
  border-color:rgba(100,100,120,.35);
}
body.dark-ui .tb-toggle:hover{
  background:rgba(30,34,44,.7);
  border-color:rgba(100,100,120,.55);
}
body.dark-ui .tb-toggle__arrow{
  border-color:var(--ink, #ccc);
}

body.dark-ui .tb-dropdown{
  background:var(--panel, #1a1a2e);
  border-color:var(--line, #3a3a4a);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
body.dark-ui .tb-trait + .tb-trait{
  border-top-color:rgba(100,100,120,.15);
}
body.dark-ui .tb-sep{
  background:rgba(100,100,120,.2);
}

/* ── Type Icon (inside level display) ─────────────────────────── */
.tb-type-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.tb-type-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.tb-type-icon{
  display:inline-flex;
  align-items:center;
  align-self:stretch;
}
.tb-type-icon__emoji{
  display:flex;
  align-items:center;
  width:auto;
  height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.tb-type-icon__emoji svg{
  width:auto;
  height:clamp(24px,5vw,36px);
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
body.dark-ui .tb-type-icon__emoji svg rect[fill="#48494b"],
body.dark-ui .tb-type-icon__emoji svg rect:not([fill]){
  fill:#b0b0b8;
}
body.dark-ui .tb-type-icon__emoji svg rect[fill="#e3e5e4"]{
  fill:#1a1a2e;
}

/* ── Type icon glow per intensity (mirrors level number) ─────── */
.lc-level-display[data-intensity="1"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#7a7a7a; }

.lc-level-display[data-intensity="2"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#a08050; }
.lc-level-display[data-intensity="2"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 3px rgba(160,128,80,.2)); }

.lc-level-display[data-intensity="3"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#c89030; }
.lc-level-display[data-intensity="3"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 4px rgba(200,144,48,.25)); }

.lc-level-display[data-intensity="4"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#d4a020; }
.lc-level-display[data-intensity="4"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 5px rgba(212,160,32,.3)); }

.lc-level-display[data-intensity="5"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#e8b010; }
.lc-level-display[data-intensity="5"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 6px rgba(232,176,16,.35)); animation:lcPulseA 3s ease-in-out infinite; }

.lc-level-display[data-intensity="6"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#00c8d4; }
.lc-level-display[data-intensity="6"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 6px rgba(0,200,212,.35)); animation:lcPulseA 2.8s ease-in-out infinite; }

.lc-level-display[data-intensity="7"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#00e0ff; }
.lc-level-display[data-intensity="7"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 8px rgba(0,224,255,.4)) drop-shadow(0 0 16px rgba(0,224,255,.15)); animation:lcPulseB 2.5s ease-in-out infinite; }

.lc-level-display[data-intensity="8"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#e040a0; }
.lc-level-display[data-intensity="8"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 8px rgba(224,64,160,.4)) drop-shadow(0 0 16px rgba(224,64,160,.15)); animation:lcPulseB 2.3s ease-in-out infinite; }

.lc-level-display[data-intensity="9"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#ff3050; }
.lc-level-display[data-intensity="9"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 8px rgba(255,48,80,.4)) drop-shadow(0 0 18px rgba(255,48,80,.18)); animation:lcPulseC 2.1s ease-in-out infinite; }

.lc-level-display[data-intensity="10"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#ff5020; }
.lc-level-display[data-intensity="10"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 10px rgba(255,80,32,.45)) drop-shadow(0 0 20px rgba(255,200,40,.18)); animation:lcPulseC 1.9s ease-in-out infinite; }

.lc-level-display[data-intensity="11"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#b040ff; }
.lc-level-display[data-intensity="11"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 10px rgba(176,64,255,.45)) drop-shadow(0 0 24px rgba(176,64,255,.18)); animation:lcPulseD 1.7s ease-in-out infinite; }

.lc-level-display[data-intensity="12"] .tb-type-icon__emoji svg rect:not([fill="#e3e5e4"]){ fill:#fff; }
.lc-level-display[data-intensity="12"] .tb-type-icon__emoji{ filter:drop-shadow(0 0 6px rgba(255,255,255,.6)) drop-shadow(0 0 14px rgba(180,140,255,.4)) drop-shadow(0 0 28px rgba(255,80,120,.2)); animation:lcPulseD 1.4s ease-in-out infinite; }