:root {
  --bg: #10151c;
  --panel: #1a212c;
  --panel-hi: #232c3a;
  --text: #e8edf5;
  --muted: #8b98ab;
  --accent: #ffcf5c;
  --green: #3fae63;
  --green-hi: #4cc574;
  --good: #6ee7a8;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 0%, #1b2431, var(--bg) 60%);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: grid;
  place-items: center;
  -webkit-user-select: none;
  user-select: none;
}

.game {
  width: min(440px, 92vw);
  padding: 24px 0 40px;
  display: grid;
  gap: 22px;
}

.hud {
  display: flex;
  justify-content: space-around;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px;
}

.stat { display: grid; justify-items: center; }
.stat__value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.critter {
  position: relative;
  justify-self: center;
  width: 200px;
  height: 200px;
  border: none;
  border-radius: 50%;
  background: var(--panel-hi);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.05);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 80ms ease;
}
.critter:active { transform: scale(.94); }
.critter__art {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  overflow: visible;
  transform-origin: 50% 92%;
  animation: breathe 3.2s ease-in-out infinite;
}
.critter:active .critter__art { animation: none; transform: scaleY(.93) scaleX(1.05); }

/* Sits on top of the skin; JS positions it from the worn skin's head anchor. */
.critter__acc {
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
}

/* Squash on the vertical axis only, the way a real body settles when it breathes. */
@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.015, .985); }
}

@media (prefers-reduced-motion: reduce) {
  .critter__art { animation: none; }
  .drawer, .backdrop { transition: none; }
}

.pop {
  position: fixed;
  pointer-events: none;
  font-weight: 700;
  color: var(--accent);
  animation: float-up 700ms ease-out forwards;
}
@keyframes float-up {
  to { transform: translateY(-56px); opacity: 0; }
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(4, 8, 13, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: min(360px, 88vw);
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid #ffffff12;
  box-shadow: 24px 0 60px rgba(0, 0, 0, .45);
  display: grid;
  gap: 16px;
  align-content: start;
  transform: translateX(-100%);
  /* a closed drawer is hidden, so it stays out of the tab order */
  visibility: hidden;
  transition: transform 220ms ease, visibility 0s linear 220ms;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform 220ms ease, visibility 0s;
}

.drawer--right {
  left: auto;
  right: 0;
  transform: translateX(100%);
  border-right: none;
  border-left: 1px solid #ffffff12;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
}

.drawer__head { display: flex; align-items: center; justify-content: space-between; }

#acc-list { display: grid; gap: 8px; }

.slots { display: grid; gap: 10px; }
.slot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--radius);
  background: var(--panel);
}
.slot--full { box-shadow: inset 0 0 0 1px #ffffff14; }
/* Truncate rather than wrap, so every slot row is the same height. */
.slot > span { min-width: 0; }
.slot .item__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot__btn {
  border: 1px solid #ffffff1f;
  background: transparent;
  color: var(--text);
  font: 600 12px/1 inherit;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.slot__btn:hover:not(:disabled) { background: var(--panel-hi); border-color: #ffffff33; }
.slot__btn--save { border-color: #3fae6355; color: var(--green-hi); }
.slot__btn--save:hover:not(:disabled) { background: #3fae6322; border-color: var(--green); }
.slot__btn:disabled { opacity: .35; cursor: not-allowed; }

.hint--block { display: block; margin: 4px 2px 0; line-height: 1.5; }
.group__title {
  margin: 6px 2px 0;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer__title { margin: 0; font-size: 18px; }
.drawer__close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.drawer__close:hover { color: var(--text); background: var(--panel); }

.shop { display: grid; gap: 10px; }

.item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.item:hover:not(:disabled) { background: var(--panel-hi); }
.drawer .item { background: var(--panel); }
.item:disabled { opacity: .45; cursor: not-allowed; }
.item__icon { width: 54px; height: 54px; object-fit: contain; }
.item__name { display: block; font-weight: 600; }
.item__meta {
  display: block;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item > span { min-width: 0; }
.item__cost { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.item__cost--own { color: var(--green-hi); }

/* The equipped skin stays highlighted even though its row is disabled. */
.item--on { box-shadow: inset 0 0 0 1px var(--green); opacity: 1; }
.item--on:disabled { opacity: 1; }
.item--on .item__cost { color: var(--green-hi); }

.controls { display: flex; align-items: center; gap: 12px; }
.btn {
  background: transparent;
  border: 1px solid #33405260;
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  flex: none;
}
.btn:hover { color: var(--text); border-color: #48566d; }
.btn--danger:hover { color: #e8897f; border-color: #a8443c; }
.hint { font-size: 12px; color: var(--muted); }
.hint--bad { color: #e8897f; }

.code { display: flex; gap: 8px; margin-top: 4px; }
.code__input {
  flex: 1;
  min-width: 0;
  background: var(--panel);
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  letter-spacing: .18em;
  padding: 8px 12px;
}
.code__input::placeholder { color: var(--muted); letter-spacing: normal; }
.code__input:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 1px; }
code { background: var(--panel); padding: 1px 5px; border-radius: 4px; }

/* Two rails pinned to the edges, out of the game column's way. */
.rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: 10px;
}
.rail--left { left: 28px; }
.rail--right { right: 28px; }

.action {
  padding: 14px 26px;
  border: none;
  border-radius: 12px;
  background: var(--green);
  color: #08240f;
  font: 600 15px/1 inherit;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(63, 174, 99, .28);
  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.action:hover { background: var(--green-hi); box-shadow: 0 10px 26px rgba(63, 174, 99, .38); }
.action:active { transform: scale(.96); box-shadow: 0 4px 14px rgba(63, 174, 99, .3); }
.action:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; }

/* Below ~760px the game column fills the width, so tuck the button into the corner. */
@media (max-width: 760px) {
  .rail { top: auto; bottom: 16px; transform: none; }
  .rail--left { left: 16px; }
  .rail--right { right: 16px; }
  .action { padding: 12px 18px; }
}

/* Back to the gallery. Fixed, so it stays clear of the centred game column. */
.back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 6;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.back:hover { color: var(--text); background: var(--panel); }
.back:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 2px; }