@font-face {
  font-family: 'Uiua386';
  src: url('Uiua386.ttf') format('truetype');
}

:root {
  --cell-size: 52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #171d22;
  color: #d1daec;
  font-family: 'Segoe UI', Arial, sans-serif;
  padding: 20px;
  min-height: 100vh;
}

h1 {
  font-size: 1.3rem;
  font-weight: normal;
  margin-bottom: 16px;
  color: #d1daecc0;
  letter-spacing: 0.05em;
}

.tier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}

.tier-row {
  display: flex;
  min-height: calc(var(--cell-size) + 8px);
  border: 2px solid #6064684e;
  border-radius: 8px;
}

.tier-label {
  width: calc(var(--cell-size) + 8px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #000000c0;
  border-radius: 6px 0 0 6px;
}

.tier-s .tier-label { background: #ff7f7f; }
.tier-a .tier-label { background: #ffbf7f; }
.tier-b .tier-label { background: #ffff7f; }
.tier-c .tier-label { background: #7fff7f; }
.tier-d .tier-label { background: #7fbfff; }
.tier-f .tier-label { background: #555; color: #d1daec }

.tier-glyphs,
.pool-glyphs {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3px;
  flex: 1;
  background: #0004;
  min-height: calc(var(--cell-size) + 8px);
  padding: 4px 10px;
}

.pool-label {
  font-size: 0.75rem;
  color: #555;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pool-glyphs {
  border: 2px solid #60646866;
  border-radius: 8px;
  min-height: calc(var(--cell-size) + 8px);
}

.glyph {
  font-family: 'Uiua386', monospace;
  font-size: calc(var(--cell-size) * 0.62);
  line-height: 1;
  width: calc(var(--cell-size) * 0.66);
  height: var(--cell-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  position: relative;
}

.glyph:active { cursor: grabbing; }

body.dragging .glyph[data-tooltip]:hover::after { display: none; }

.glyph[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #cdd6f4;
  font-family: 'Uiua386', monospace;
  font-size: 1rem;
  padding: 2px 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
}

.pool-separator {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: #606468dd;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  pointer-events: none;
}

.pool-separator::before,
.pool-separator::after {
  content: '';
  flex: 1;
  border-top: 1px solid #60646866;
}

.glyph-inner {
  display: inline-block;
  line-height: 1;
  height: 1em;
}

/* Glyph color classes */
.glyph-inner.stack-function    { color: #d1daec; }
.glyph-inner.monadic-function  { color: #95d16a; }
.glyph-inner.dyadic-function   { color: #54b0fc; }
.glyph-inner.noadic-function   { color: #ed5e6a; }
.glyph-inner.monadic-modifier  { color: #f0c36f; }
.glyph-inner.dyadic-modifier   { color: #cc6be9; }
.glyph-inner.number-literal    { color: #f08050; }

.glyph-inner.text-gradient {
  background-size: 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
.glyph-inner.trans {
  background-image: linear-gradient(
    180deg,
    #5BCEFA 34%, #F5A9B8 34%, #F5A9B8 45%,
    #FFFFFF 45%, #FFFFFF 56%,
    #F5A9B8 56%, #F5A9B8 67%, #5BCEFA 67%
  );
}
.glyph-inner.bi {
  background-image: linear-gradient(
    180deg,
    #D60270 45%, #9B4F96 45%, #9B4F96 64%, #0038A8 64%
  );
}

.glyph-placeholder {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}