:root {
  color-scheme: dark;
  --bg: #0b1020;
  --fg: #f3f4f6;
  --muted: #9ca3af;
  --bar: #0b1020;
  --bar-fg: #f9fafb;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

html {
  /* iOS tints the status bar area from the page background, not from the
     header, so the page behind everything is the bar colour and main paints
     the content colour over it. */
  background: var(--bar);
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bar);
  color: var(--fg);
  font: 16px/1.5 system-ui, sans-serif;
  /* Stop the page itself bouncing or zooming like a website. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Keep clear of the notch and status bar when installed. */
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: var(--bar);
  color: var(--bar-fg);
}

h1 {
  margin: 0;
  font-size: 1.125rem;
}

#status {
  flex: 1;
  font-size: 0.8125rem;
  opacity: 0.7;
}

#flip {
  font: inherit;
  font-weight: 600;
  color: #0b1020;
  background: #ffd23f;
  border: 0;
  border-radius: 999px;
  padding: 6px 18px;
}

#flip:active {
  transform: scale(0.95);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #24306b 0%, #0b1020 70%);
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
  /* The whole stage is the drag surface. */
  touch-action: none;
  cursor: grab;
}

main.dragging {
  cursor: grabbing;
}

.muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---- the 3D card ---- */

.scene {
  perspective: 1100px;
}

.card {
  --w: min(74vw, 46vh, 380px);
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  transform-style: preserve-3d;
  will-change: transform;
  /* Type inside the faces scales with the card (cqw units). */
  container-type: inline-size;
}

.face,
.edge {
  position: absolute;
  inset: 0;
  border-radius: 4.5cqw;
}

/* Slices between the faces give the card visible thickness side-on. */
.edge {
  background: #d9d3c0;
}

.face {
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front {
  transform: translateZ(3px);
  background: linear-gradient(160deg, #ffe169, #f5b700);
  padding: 4cqw;
  color: #1c1917;
  box-shadow: inset 0 0 0 0.4cqw rgb(0 0 0 / 0.15);
}

.back {
  transform: rotateY(180deg) translateZ(3px);
  background:
    radial-gradient(circle at 50% 50%, #3b5bdb 0%, #1e2a78 55%, #0f1547 100%);
  border: 4cqw solid #243ba8;
  display: grid;
  place-items: center;
}

.back svg {
  width: 78%;
}

.inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  padding: 2.2cqw;
  border-radius: 2cqw;
  background: linear-gradient(170deg, #fff4b8, #ffd84d 60%, #f9b934);
}

.title {
  display: flex;
  align-items: baseline;
  gap: 2cqw;
  font-weight: 800;
}

.stage {
  font-size: 2.6cqw;
  font-style: italic;
  font-weight: 700;
  background: #e7e5e4;
  border-radius: 99px;
  padding: 0 1.8cqw;
}

.name {
  flex: 1;
  font-size: 6.2cqw;
  line-height: 1.1;
}

.hp {
  font-size: 5.4cqw;
  color: #b91c1c;
}

.hp small {
  font-size: 2.8cqw;
}

.orb {
  display: inline-grid;
  place-items: center;
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 50%;
  font-size: 3.6cqw;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, #fff7ae, #facc15 60%, #ca8a04);
  box-shadow: 0 0.3cqw 0.6cqw rgb(0 0 0 / 0.35);
  vertical-align: middle;
}

.orb.plain {
  background: radial-gradient(circle at 35% 30%, #fff, #d6d3d1 60%, #a8a29e);
}

.orb.ground {
  background: radial-gradient(circle at 35% 30%, #fde68a, #b45309 60%, #78350f);
}

.art {
  position: relative;
  aspect-ratio: 4 / 2.9;
  border: 1cqw solid #c9a227;
  outline: 0.4cqw solid #7c5e10;
  box-shadow: 0 0.6cqw 1.4cqw rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flavor {
  font-size: 2.3cqw;
  font-style: italic;
  text-align: center;
  background: linear-gradient(90deg, #c9a227, #f6e27a, #c9a227);
  padding: 0.3cqw 0;
}

.moves {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.move {
  display: grid;
  grid-template-columns: 14cqw 1fr auto;
  align-items: center;
  font-size: 4.6cqw;
  font-weight: 800;
}

.move p {
  grid-column: 1 / -1;
  margin: 0.6cqw 0 0;
  font-size: 2.7cqw;
  line-height: 1.3;
  font-weight: 400;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-size: 2.4cqw;
  font-weight: 700;
  border-top: 0.4cqw solid #7c5e10;
  padding-top: 1cqw;
}

.stats div > span:first-child {
  display: block;
}

.footer {
  display: flex;
  justify-content: space-between;
  font-size: 2.1cqw;
  opacity: 0.8;
}

/* Holographic foil and glare; app.js moves them with the card's angle. */
.holo,
.glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.holo {
  background:
    repeating-linear-gradient(
      115deg,
      #ff5e5e 0%, #ffd23f 8%, #5eff9b 16%, #5ec8ff 24%, #b98cff 32%, #ff5e5e 40%
    );
  background-size: 300% 300%;
  background-position: var(--hx, 50%) var(--hy, 50%);
  mix-blend-mode: color-dodge;
  opacity: var(--ho, 0.25);
}

.glare {
  background: radial-gradient(
    circle at var(--gx, 50%) var(--gy, 30%),
    rgb(255 255 255 / 0.75) 0%,
    rgb(255 255 255 / 0.15) 30%,
    transparent 60%
  );
  mix-blend-mode: soft-light;
}

.back .glare {
  mix-blend-mode: overlay;
}

.shadow {
  width: calc(var(--sw, 1) * min(60vw, 38vh, 310px));
  height: 18px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.55);
  filter: blur(10px);
}