/* Game UI stays pixel-art: re-assert pixel stacks (site chrome moved to Inter). */
:root{
  --display: 'Pixelify Sans', 'Press Start 2P', monospace;
  --micro: 'VT323', 'Silkscreen', monospace;
}

/* creations hub — pixel-art buttons, one per creation */

/* app-store tiles: uniform, compact, icon on top */

.creation-grid{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 1.25rem 0;
}

.creation-btn{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  width: 152px;
  min-height: 198px;
  padding: .85rem .55rem .75rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--card-bg);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 25%, transparent);
}
.creation-btn:hover{
  filter: brightness(1.06);
}
.creation-btn:hover .creation-btn__label{
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* fixed icon stage so every tile lines up */
.creation-btn__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
}

.creation-btn__board{
  display: grid;
  grid-template-columns: repeat(4, 14px);
  grid-template-rows: repeat(4, 14px);
  gap: 2px;
  padding: 5px;
  background: color-mix(in srgb, var(--green) 48%, var(--panel));
  border: 3px solid var(--ink);
}
.creation-btn__cell{
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.14);
}
.creation-btn__cell--b{ background: #141414; box-shadow: inset -2px -2px 0 #000, inset 2px 2px 0 #3a3a3a; }
.creation-btn__cell--w{ background: #f4f1ea; box-shadow: inset -2px -2px 0 #b9b2a1, inset 2px 2px 0 #ffffff; }

/* mini stacked-cards icon for the flashcard buttons */
.creation-btn__cards{
  position: relative;
  width: 64px; height: 54px;
  transform: none;
}
.creation-btn__cards i{
  position: absolute; display: block;
  width: 37px; height: 47px;
  background: var(--card-bg);
  border: 3px solid var(--ink);
}
.creation-btn__cards i:first-child{ left: 0; top: 7px; }
.creation-btn__cards i:last-child{ left: 24px; top: 0;
  background: color-mix(in srgb, var(--tag) 30%, var(--card-bg)); }
.creation-btn__cards i:last-child::after{
  content: "?";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Pixelify Sans", monospace; font-size: 1.35rem;
  color: var(--ink);
}

.creation-btn__label{
  font-family: "Pixelify Sans", "VT323", monospace;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.15;
}
.creation-btn__sub{
  font-size: .76rem;
  opacity: .75;
  line-height: 1.35;
}

.creations-intro{
  max-width: 60ch;
}

/* ---------- synergy playground ---------- */
.syn-wrap{ max-width: 640px; margin: 0 auto; }
#syn-src{
  width: 100%; box-sizing: border-box; min-height: 170px;
  background: var(--card-bg); color: var(--ink);
  border: 2px solid var(--line); border-radius: 10px;
  padding: 0.8rem; font-family: ui-monospace, monospace; font-size: 0.85rem;
  resize: vertical;
}
.syn-row{ display: flex; gap: 0.6rem; margin: 0.8rem 0; }
.syn-row button{
  flex: 1; padding: 0.7rem; border: none; border-radius: 10px;
  font-family: 'Nunito', var(--body); font-weight: 800; font-size: 1rem; cursor: pointer;
  background: var(--green); color: #0A0C0A;
}
.syn-row button.syn-ghost{
  flex: 0.6; background: transparent; color: var(--tag);
  border: 2px solid var(--tag);
}
#syn-out{
  background: var(--card-bg); border: 2px solid var(--line); border-radius: 10px;
  padding: 0.8rem; min-height: 3rem; white-space: pre-wrap; font-size: 0.95rem; margin: 0;
}
.syn-cheat{ margin-top: 1rem; font-size: 0.82rem; color: var(--dim); line-height: 1.9; }
.syn-cheat b{ color: var(--tag); }

/* synergy button icon: bar chart, needle going up */
.creation-btn__bars{ position: relative; width: 64px; height: 54px; }
.creation-btn__bars i{
  position: absolute; bottom: 0; width: 12px; display: block;
  background: var(--green); border: 2px solid var(--ink); border-bottom: none;
}
.creation-btn__bars i:nth-child(1){ left: 6px; height: 18px; }
.creation-btn__bars i:nth-child(2){ left: 26px; height: 32px; }
.creation-btn__bars i:nth-child(3){ left: 46px; height: 46px; }

.syn-explain{ color: var(--dim); font-size: 0.95rem; margin: 0 0 0.8rem; }
.syn-presets{ display: flex; gap: 0.6rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.syn-presets button{
  flex: 1 1 0; min-width: 140px; padding: 0.6rem 0.5rem;
  background: var(--card-bg); color: var(--ink);
  border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
  font-family: 'Nunito', var(--body);
  display: flex; flex-direction: column; gap: 0.15rem; align-items: center;
}
.syn-presets button:hover{ border-color: var(--tag); }
.syn-presets button b{ font-weight: 800; font-size: 0.95rem; }
.syn-presets button span{ font-size: 0.78rem; color: var(--dim); }
.syn-cheat__head{ font-weight: 800; color: var(--ink); margin: 0 0 0.3rem; }