/* ==========================================================================
   Character select — trading-card style cards
   Each card's colours come from its birth sign's element (fire/earth/air/water).
   ========================================================================== */

:root {
  --bg-top: #1d1b2e;
  --bg-bottom: #2d2440;
  --ink: #f4efe6;
  --ink-dim: rgba(244, 239, 230, 0.7);
  --card-w: clamp(175px, 20vw, 210px);
  --font-pixel: "Pixelify Sans", "Courier New", monospace;
}

/* Card palette: everything derives from the birthsign's colour (set per card by app.js) */
.char-card {
  --sign-color: #8a8f99;
  --sign-shade: #4d525c;
  --frame: var(--sign-color);
  --frame-dark: color-mix(in srgb, var(--sign-color) 55%, #14121c);
  --bar: color-mix(in srgb, var(--sign-color) 22%, #fff8ec);
  --art: color-mix(in srgb, var(--sign-color) 40%, #fff8ec);
  --badge: var(--sign-shade);
}

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

body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  color: var(--ink);
  font-family: var(--font-pixel);
}

/* The whole screen is the card grid, with a slim toolbar on top */
/* --------------------------------------------------------------------------
   Ambient background: the top card's screenshot, blown up and blurred so its
   colours fill the whole screen. Two layers so one can fade into the next.
   -------------------------------------------------------------------------- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Drawn small and scaled up: the same soft look for a fraction of the blur work */
.ambient-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34vw;
  height: 34vh;
  background-color: var(--amb-color, transparent);
  background-position: center;
  background-size: cover;
  filter: blur(14px) saturate(1.35) brightness(0.5);
  transform: translate(-50%, -50%) scale(3.6);
  opacity: 0;
  transition: opacity 700ms ease;
}

.ambient-layer.is-on {
  opacity: 1;
}

/* Darken towards the edges and the top so the toolbar and text stay readable */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, #0d0b1499 100%),
    linear-gradient(180deg, #0d0b1480, transparent 30%);
}

/* Vault and New character keep the plain background */
/* Vault and New character keep the plain background; hidden once faded so it costs nothing */
body.in-vault .ambient,
body.in-create .ambient {
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s 400ms;
}

.ambient {
  transition: opacity 400ms ease;
}

.select-screen {
  min-height: 100vh;
  /* hidden hover labels near the right edge must not make the page scroll sideways */
  overflow-x: clip;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem) 2rem;
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vh, 1.25rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Toolbar: search + layout toggle
   -------------------------------------------------------------------------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 calc(-1 * clamp(0.75rem, 2vw, 1.5rem));
  padding: 10px clamp(0.75rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--bg-top) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 #ffffff12;
}

.search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: #2c2840;
  box-shadow: inset 0 0 0 2px #3d3856;
  cursor: text;
}

.search:focus-within {
  box-shadow: inset 0 0 0 2px #8f86c4;
}

.search-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: var(--ink-dim);
  shape-rendering: crispEdges;
}

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.search input::placeholder {
  color: #ffffff59;
}

.search input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
}



.result-count {
  color: var(--ink-dim);
  font-size: 0.85rem;
  white-space: nowrap;
}

.layout-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #2c2840;
  box-shadow: inset 0 0 0 2px #3d3856;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.layout-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.layout-toggle:hover {
  background: #36314d;
}

.layout-toggle[aria-pressed="true"] {
  background: #f4efe6;
  box-shadow: none;
  color: #1e1b2b;
}

/* --------------------------------------------------------------------------
   Card grid (and Layout mode: backpack to the right of each card)
   -------------------------------------------------------------------------- */

/* Wrapping rows, each centred (so a short last row sits in the middle too) */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  width: 100%;
}

.card-unit {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.card-unit[hidden] {
  display: none;
}

/* Layout mode: the back of the card sits to the right of it, same size and frame */
.card-back {
  display: none;
}

.card-grid.is-layout .card-back {
  /* 4 slots across the back's inner width */
  --slot: calc((var(--card-w) - 10px - 14px - 3 * 4px) / 4 * 0.9);
  display: block;
  width: var(--card-w);
  aspect-ratio: 63 / 88;
  padding: 5px;
  border-radius: 12px;
  background: var(--sign-color);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sign-color) 55%, #14121c), 0 6px 0 #0006;
}

.back-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 7px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a2639, #1e1b2b);
  color: var(--ink);
}

.back-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* clearly readable on the dark back: light text, the sign colour as a small bar */
  color: var(--ink);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-name::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 1em;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sign-color) 80%, #fff);
}

.back-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.back-heading {
  color: #ffffff8c;
  font-size: clamp(0.48rem, 0.6vw, 0.56rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.back-grid {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(4, var(--slot));
  grid-auto-rows: var(--slot);
  gap: 4px;
}

.back-grid.is-empty {
  display: grid;
  place-items: center;
  height: calc(var(--slot) * 2 + 4px);
  border-radius: 5px;
  background: #ffffff0d;
  color: #ffffff4d;
  font-size: 0.62rem;
}

.card-back .slot,
.card-face-back .slot {
  width: var(--slot);
  height: var(--slot);
  border-radius: 4px;
}

/* Empty equipment slot labels are tiny on the back */
.card-back .slot[data-slot-label]::before,
.card-face-back .slot[data-slot-label]::before {
  font-size: 0.4rem;
}

.card-back [data-section="equipment"] .slot,
.card-face-back [data-section="equipment"] .slot {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sign-color) 55%, #3d3856), inset 0 3px 0 #0003;
}

/* --------------------------------------------------------------------------
   Deck view: every card stacked, the most recently played on top
   -------------------------------------------------------------------------- */

.card-grid.is-deck {
  --card-w: clamp(220px, 26vw, 280px);
  flex: 1;
  position: relative;
  display: block;
  /* room for the top card plus the fanned layers under it */
  min-height: calc(var(--card-w) * 88 / 63 + 40px);
}

/* All cards sit on the same spot in the middle; app.js fans each layer a little */
.card-grid.is-deck .card-unit {
  position: absolute;
  left: calc(50% - var(--card-w) / 2);
  top: calc(50% - var(--card-w) * 44 / 63 - 20px);
  pointer-events: none;
}

/* Only the top card can be clicked, played or right-clicked */
.card-grid.is-deck .card-unit.is-top {
  pointer-events: auto;
}

/* Cards under the top one are a touch darker, like the edges of a deck */
.card-grid.is-deck .card-unit:not(.is-top) .char-card {
  filter: brightness(0.82);
}

.card-grid.is-deck .card-unit:not(.is-top) .card-inner {
  box-shadow: 0 2px 0 #0008;
}

.card-grid.is-deck .card-unit.is-top .char-card:not(.is-launching):not(:hover) {
  transform: none;
}

.card-grid.is-deck .card-back {
  display: none;
}

/* Cards buried under the visible top of the deck aren't drawn (they can't be seen),
   except while they're flying into the deck */
.card-grid.is-deck .card-unit.is-buried:not(.is-moving) {
  visibility: hidden;
}

.no-results {
  margin-top: 2rem;
  color: var(--ink-dim);
  text-align: center;
}

/* --------------------------------------------------------------------------
   The card: standard trading-card proportions (63 x 88), one continuous face.
   Text sits straight on the card; only the picture has its own frame.
   -------------------------------------------------------------------------- */

.char-card {
  width: var(--card-w);
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  border-radius: 12px;
  /* the frame lives on the front and back faces, so the whole card turns when flipped */
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: #1e1a17;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

/* Flip: front and back share the card; right-click turns it over */
.char-card {
  perspective: 900px;
}

.card-flip {
  position: relative;
  display: block;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.3,.7,.3,1);
}

.char-card.is-flipped .card-flip {
  transform: rotateY(180deg);
}

.card-inner,
.card-face-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-inner,
.card-face-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  outline: 2px solid var(--frame-dark);
  outline-offset: -2px;
  box-shadow: 0 6px 0 #0006;
}

.card-face-back {
  display: block;
  padding: 5px;
  background: var(--frame);
  transform: rotateY(180deg);
}

.card-face-back .back-inner {
  /* slots sized to the card, same as the back shown beside it in Layout */
  --slot: calc((var(--card-w) - 10px - 14px - 3 * 4px) / 4 * 0.9);
}

/* Card face: a soft gradient of the sign colour, light at the top, deeper at the bottom */
.card-inner {
  display: flex;
  flex-direction: column;
  padding: 0 7px 5px;
  /* the 5px frame in the sign's colour, around the card face */
  border: 5px solid var(--frame);
  background-clip: padding-box;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, #fff 55%, transparent), transparent 70%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sign-color) 30%, #fff8ec) 0%,
      color-mix(in srgb, var(--sign-color) 45%, #fff8ec) 55%,
      color-mix(in srgb, var(--sign-color) 62%, #fff8ec) 100%
    );
}

/* Top: name on the left; HP and the birthsign symbol on the right */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 0 4px;
}

.card-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.72rem, 1.05vw, 0.92rem);
  font-weight: 700;
  text-align: left;
}

.card-name.is-long {
  font-size: clamp(0.6rem, 0.82vw, 0.74rem);
  letter-spacing: -0.01em;
}

/* HP sits just left of the birthsign badge */
.card-stats {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-hp {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 700;
  line-height: 1;
}

.card-hp[hidden] {
  display: none;
}

.hp-value {
  font-size: clamp(0.8rem, 1.15vw, 1rem);
}

.hp-label {
  font-size: clamp(0.5rem, 0.7vw, 0.62rem);
  color: var(--frame-dark);
}

.card-sign {
  position: relative;
  flex-shrink: 0;
  width: 1.75em;
  height: 1.75em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--badge);
  box-shadow: inset 0 0 0 2px #0003;
  color: var(--sign-color);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  line-height: 1;
}

/* Sign name appears only while hovering the badge */
.card-sign::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  right: -4px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #14121c;
  box-shadow: 0 0 0 2px var(--sign-color);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 5;
}

.card-sign:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Sign icon (or placeholder gem) inside the badge, pixel-crisp */
.card-sign img,
.sign-placeholder {
  width: 72%;
  height: 72%;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.sign-placeholder {
  filter: brightness(1.35) saturate(1.2);
}

/* Picture: 3:2, about 43% of the card's height and nearly its full width,
   with a thin frame (proportions taken from a standard trading card's layout) */
.card-art {
  aspect-ratio: 3 / 2;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--art) 70%, #fff), var(--art) 75%);
  box-shadow: 0 0 0 2px var(--frame-dark), 0 2px 0 2px #0002;
  display: grid;
  place-items: center;
}

/* The player's screenshot fills the picture box edge to edge, pixels kept crisp */
.card-art .art-screenshot {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption of the screenshot when hovering the picture */
.card-art[data-caption]::after {
  content: attr(data-caption);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  background: linear-gradient(transparent, #000a 40%);
  color: #fff;
  font-size: clamp(0.5rem, 0.65vw, 0.6rem);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 120ms ease;
}

.card-art[data-caption]:hover::after {
  opacity: 1;
}

/* Whole sprite always visible, centred in the picture */
.card-art img {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  image-rendering: pixelated;
}

.art-placeholder {
  width: 62%;
  height: 62%;
  fill: var(--frame-dark);
  opacity: 0.55;
  shape-rendering: crispEdges;
}

/* Level: right after the name, in the top bar */
.card-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.card-level {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
}

.card-level[hidden] {
  display: none;
}

.level-label {
  font-size: clamp(0.5rem, 0.66vw, 0.6rem);
  font-weight: 700;
  color: var(--frame-dark);
}

.level-value {
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  font-weight: 700;
}

/* Abilities: straight on the card face, under the picture */
.card-abilities {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 1px 4px;
  overflow: hidden;
  text-align: left;
}

.ability {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ability-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ability-tag {
  flex-shrink: 0;
  padding: 1px 5px 0;
  border-radius: 2px;
  background: var(--badge);
  color: #fff;
  font-size: clamp(0.46rem, 0.6vw, 0.54rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}

.ability-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.66rem, 0.9vw, 0.8rem);
  font-weight: 700;
  line-height: 1.15;
}

.ability-text {
  font-size: clamp(0.55rem, 0.72vw, 0.66rem);
  line-height: 1.3;
  color: color-mix(in srgb, #1e1a17 80%, var(--frame-dark));
}

/* Bottom: small info, separated only by a faint line */
.card-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--frame-dark) 35%, transparent);
}

.foot-line {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: clamp(0.5rem, 0.62vw, 0.58rem);
  line-height: 1.25;
  white-space: nowrap;
}

.foot-label {
  color: var(--frame-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.foot-value {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Hover / focus / selected
   -------------------------------------------------------------------------- */

.char-card:hover {
  transform: translateY(-4px);
}

.char-card:focus-visible {
  outline: 3px dashed var(--ink);
  outline-offset: 5px;
}

.char-card.is-selected {
  transform: translateY(-8px) scale(1.04);
}

/* The white ring and glow sit on the faces, so they turn with the card when it flips */
.char-card.is-selected .card-inner,
.char-card.is-selected .card-face-back,
.class-slide.is-current .card-inner {
  box-shadow: 0 0 0 4px #fff, 0 0 22px 6px var(--frame), 0 10px 0 #0006;
}

/* --------------------------------------------------------------------------
   Item slots (used on the back of the card): equipment 4, inventory 8, backpack 8
   -------------------------------------------------------------------------- */

.slot {
  position: relative;
  width: var(--slot);
  height: var(--slot);
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #2c2840;
  box-shadow: inset 0 0 0 2px #3d3856, inset 0 3px 0 #0003;
}

/* Empty equipment slots show what goes there */
.slot[data-slot-label]::before {
  content: attr(data-slot-label);
  color: #ffffff40;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.slot img,
.item-placeholder {
  width: 70%;
  height: 70%;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

/* Item name on hover */
.slot.has-item::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 3px 7px;
  border-radius: 4px;
  background: #0d0b14;
  box-shadow: 0 0 0 1px #ffffff30;
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 3px);
  pointer-events: none;
  transition: opacity 100ms ease, transform 100ms ease;
  z-index: 2;
}

.slot.has-item:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Vault mode: every card back on the left, the vault's chests on the right
   -------------------------------------------------------------------------- */

.card-grid[hidden],
.vault-screen[hidden] {
  display: none;
}

.vault-screen {
  --back-w: 200px;
  --slot: calc((var(--back-w) - 10px - 14px - 3 * 4px) / 4 * 0.9);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: start;
}

/* Left: the backs of all your cards */
.vault-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-content: flex-start;
}

.vault-char[hidden],
.vault-none[hidden] {
  display: none;
}

.vault-char {
  width: var(--back-w);
  aspect-ratio: 63 / 88;
  padding: 5px;
  border-radius: 12px;
  background: var(--sign-color);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sign-color) 55%, #14121c), 0 6px 0 #0006;
}

.vault-char [data-section="equipment"] .slot {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sign-color) 55%, #3d3856), inset 0 3px 0 #0003;
}

.vault-char .slot[data-slot-label]::before {
  font-size: 0.4rem;
}

.vault-none {
  color: var(--ink-dim);
}

/* Right: the vault, stays in view while the card backs scroll */
.vault-side {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 86px);
  overflow-y: auto;
  /* chests sliding in from the right must not add a sideways scrollbar */
  overflow-x: hidden;
  padding: 12px;
  border-radius: 12px;
  background: #1a1726;
  box-shadow: inset 0 0 0 2px #3d3856;
}

.vault-chests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--slot) * 4 + 3 * 4px + 20px), 1fr));
  gap: 10px;
}

.vault-chest {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #6b4a2b, #54391f);
  box-shadow: inset 0 0 0 2px #2e1f12, inset 0 3px 0 #ffffff1a;
}

.chest-title {
  color: #f6dfb0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chest-grid {
  grid-template-columns: repeat(4, var(--slot));
  grid-auto-rows: var(--slot);
}

.vault-screen .slot {
  width: var(--slot);
  height: var(--slot);
  border-radius: 4px;
  cursor: pointer;
}

.vault-chest .slot {
  background: #2a1c10;
  box-shadow: inset 0 0 0 2px #1a1109, inset 0 3px 0 #0004;
}

.vault-screen .slot.has-item {
  cursor: grab;
}

.vault-screen .slot.has-item:hover {
  filter: brightness(1.25);
}

/* Picked up by tapping: the item glows; every slot shows it can take it */
.vault-screen .slot.is-held {
  box-shadow: inset 0 0 0 2px #fff, 0 0 10px 2px #fff8;
}

.vault-screen.is-holding .slot:not(.is-held):hover,
.vault-screen .slot.is-drop {
  box-shadow: inset 0 0 0 2px #f4efe6, inset 0 0 0 30px #ffffff14;
}

.vault-screen .slot.is-dragging {
  opacity: 0.4;
}

/* Phones: card backs on top, the vault under them */
@media (max-width: 760px) {
  .vault-screen {
    --back-w: calc((100vw - 2.25rem) / 2);
    grid-template-columns: 1fr;
  }

  .vault-chars {
    gap: 8px;
  }

  .vault-side {
    position: static;
    max-height: none;
  }
}

/* --------------------------------------------------------------------------
   New character: class slider, name and birthsign
   -------------------------------------------------------------------------- */

.create-screen[hidden] {
  display: none;
}

.create-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}

.class-slider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #2c2840;
  box-shadow: inset 0 0 0 2px #3d3856;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
}

.slider-arrow:hover {
  background: #36314d;
}

.slider-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* The chosen class's card in the middle, its neighbours smaller to each side */
.class-track {
  --card-w: clamp(200px, 22vw, 250px);
  position: relative;
  flex: 1;
  height: calc(var(--card-w) * 88 / 63 + 24px);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.class-track img {
  -webkit-user-drag: none;
}

.class-slide {
  position: absolute;
  top: 12px;
  left: calc(50% - var(--card-w) / 2);
  /* side cards spaced so they only slightly tuck behind each other */
  transform: translateX(calc(var(--off) * 70%)) scale(calc(1 - var(--abs) * 0.14));
  opacity: calc(1 - var(--abs) * 0.3);
  z-index: calc(10 - var(--abs));
  transition: transform 260ms cubic-bezier(.3,.7,.3,1), opacity 260ms ease;
  cursor: pointer;
}

.class-slide.is-far {
  opacity: 0;
  pointer-events: none;
}

.class-slide .char-card {
  pointer-events: none;
}


.class-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.class-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #ffffff2e;
  cursor: pointer;
}

.class-dot.is-on {
  background: var(--ink);
}

.create-form {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.create-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.create-label {
  color: var(--ink-dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#new-name {
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  outline: none;
  background: #2c2840;
  box-shadow: inset 0 0 0 2px #3d3856;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
}

#new-name:focus {
  box-shadow: inset 0 0 0 2px #8f86c4;
}

#new-name::placeholder {
  color: #ffffff59;
}

.sign-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sign-option {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sign-shade);
  box-shadow: inset 0 0 0 2px #0003;
  color: var(--sign-color);
  cursor: pointer;
}

.sign-option img,
.sign-option .sign-placeholder {
  width: 70%;
  height: 70%;
  image-rendering: pixelated;
}

.sign-option[aria-checked="true"] {
  box-shadow: 0 0 0 3px #fff, 0 0 14px 2px var(--sign-color);
}

/* Sign names only on hover, like on the cards */
.sign-option::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  padding: 3px 7px;
  border-radius: 4px;
  background: #0d0b14;
  box-shadow: 0 0 0 1px #ffffff30;
  color: var(--ink);
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 3px);
  pointer-events: none;
  transition: opacity 100ms ease, transform 100ms ease;
}

.sign-option:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.create-error {
  min-height: 1.2em;
  margin-top: -6px;
  color: #ff9a8a;
  font-size: 0.85rem;
}

.create-confirm {
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: #f4efe6;
  box-shadow: 0 5px 0 #8f86c4;
  color: #1e1b2b;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.create-confirm:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #8f86c4;
}

@media (max-width: 520px) {
  .class-track {
    --card-w: 190px;
  }

  .slider-arrow {
    width: 36px;
    height: 36px;
  }

  .create-toggle span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .class-slide {
    transition: none;
  }
}

/* Cards dealing out / gathering up: drawn on their own layer, above the rest */
.card-grid.is-layout .card-unit.is-moving {
  position: relative;
  z-index: 60;
}

.card-unit.is-moving .char-card,
.card-unit.is-moving .card-back,
.card-grid.is-deck .card-unit.is-moving {
  will-change: transform;
}

/* Cards flying between modes */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.fx-ghost {
  position: fixed;
  margin: 0;
  transform-origin: center;
  backface-visibility: hidden;
  --slot: calc((var(--back-w) - 10px - 14px - 3 * 4px) / 4 * 0.9);
}

.fx-ghost .slot {
  width: var(--slot);
  height: var(--slot);
  border-radius: 4px;
}

/* The arriving face starts edge-on, so it is invisible until it turns into view */
.vault-char,
.char-card {
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   Play: the chosen card glows, then the screen fades into "Entering the world"
   -------------------------------------------------------------------------- */

.char-card.is-launching {
  transform: translateY(-8px) scale(1.08);
}

.char-card.is-launching .card-inner,
.char-card.is-launching .card-face-back {
  box-shadow: 0 0 0 4px #fff, 0 0 40px 14px var(--frame), 0 10px 0 #0006;
}

.play-overlay {
  --sign-color: #8a8f99;
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--sign-color) 35%, #0d0b14), #0d0b14 70%);
  opacity: 0;
  transition: opacity 450ms ease;
}

.play-overlay[hidden] {
  display: none;
}

.play-overlay.is-on {
  opacity: 1;
}

.play-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1rem;
  text-align: center;
}

.play-kicker {
  color: var(--ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.play-title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 700;
  text-shadow: 3px 3px 0 #000;
}

.play-sub {
  color: color-mix(in srgb, var(--sign-color) 55%, var(--ink));
  font-size: 1.05rem;
}

/* Simple loading bar while the world loads */
.play-bar {
  width: min(260px, 70vw);
  height: 8px;
  margin: 10px 0 14px;
  overflow: hidden;
  border-radius: 4px;
  background: #ffffff1a;
}

.play-bar span {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--sign-color);
  animation: play-load 1.1s ease-in-out infinite;
}

@keyframes play-load {
  from { transform: translateX(-100%); }
  to { transform: translateX(290%); }
}

.play-back {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: #ffffff14;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.play-back:hover {
  background: #ffffff26;
}

@media (prefers-reduced-motion: reduce) {
  .char-card,
  .play-overlay {
    transition: none;
  }

  .play-bar span {
    animation: none;
  }
}

@media (max-width: 480px) {
  :root {
    --card-w: calc((100vw - 2rem - 0.9rem) / 2);
  }

  .card-name {
    font-size: 0.72rem;
  }

  .card-name.is-long {
    font-size: 0.56rem;
  }

  .card-head {
    gap: 3px;
  }

  .card-title {
    gap: 3px;
  }
}

/* Narrowest phones: tighter top bar so names still fit */
@media (max-width: 380px) {
  .card-name {
    font-size: 0.62rem;
  }

  .card-name.is-long {
    font-size: 0.5rem;
  }

  .hp-value {
    font-size: 0.7rem;
  }

  .card-sign {
    font-size: 0.72rem;
  }
}

/* Very small screens: one card per row */
@media (max-width: 359px) {
  :root {
    --card-w: min(240px, calc(100vw - 2rem));
  }
}

/* Phones: search and Layout share the top row, the count goes below */
@media (max-width: 520px) {
  .toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .search {
    min-width: 0;
    max-width: none;
  }

  .search input {
    width: 100%;
  }

  .layout-toggle {
    padding: 0 11px;
  }

  .result-count {
    flex-basis: 100%;
    font-size: 0.78rem;
  }

}

/* Phones in Layout mode: one card and its back per row, filling the width */
@media (max-width: 480px) {
  .card-grid.is-layout {
    --card-w: calc((100vw - 1.5rem - 8px) / 2);
  }
}