/* Reusable dashboard card tile — load after auth-shared.css (color tokens). */
/* Design spec: docs/dashboard-webui-design.md */

:root {
  --card-aspect: 5 / 7;
  --card-stat-peak-atk: #e85c5c;
  --card-stat-peak-def: #5eb8e8;
  --card-stat-peak-mp: #5dd879;
  --card-tile-rarity-bronze: #c89b3c;
  --card-tile-rarity-silver: #c2cee0;
  --card-tile-rarity-gold: #d4a440;
  --card-tile-rarity-platinum: #e6d8ff;
  --card-tile-race-red: #d34c4c;
  --card-tile-race-white: #e6e1c8;
  --card-tile-race-black: #8a82a8;
}

.card-tile {
  /* Pin brand tokens to the game's defaults so the landing page's global
     --gold/--bone do not shift card colors (real app sources these from auth-shared.css). */
  --gold: #d4a440;
  --bone: #f0e4b8;
  --rarity-accent: var(--card-tile-rarity-bronze);
  --rarity-glow: rgba(200, 155, 60, 0.38);
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: var(--card-aspect);
  min-height: 0;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, #1f2a44 0%, #0e1626 100%);
  border: 3px solid var(--rarity-accent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.1rem;
  padding: clamp(0.28rem, 2.2cqi, 0.5rem) clamp(0.3rem, 2.5cqi, 0.5rem);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: card-tile;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--rarity-accent) 40%, transparent),
    0 0 22px var(--rarity-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: default;
}

.card-tile > * {
  position: relative;
  z-index: 1;
}

.card-tile .card-rarity-frame {
  position: absolute;
  inset: -4px;
  border-radius: calc(0.55rem + 4px);
  border: 2px solid color-mix(in srgb, var(--rarity-accent) 72%, transparent);
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--rarity-accent) 28%, transparent),
    0 0 16px var(--rarity-glow);
  pointer-events: none;
  z-index: 0;
}

.card-tile.rarity-bronze {
  --rarity-accent: var(--card-tile-rarity-bronze);
  --rarity-glow: rgba(200, 155, 60, 0.38);
}

.card-tile.rarity-silver {
  --rarity-accent: var(--card-tile-rarity-silver);
  --rarity-glow: rgba(194, 206, 224, 0.42);
}

.card-tile.rarity-gold {
  --rarity-accent: var(--card-tile-rarity-gold);
  --rarity-glow: rgba(212, 164, 64, 0.48);
}

.card-tile.rarity-platinum {
  --rarity-accent: var(--card-tile-rarity-platinum);
  --rarity-glow: rgba(230, 216, 255, 0.52);
}

.card-tile .card-rarity-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  min-width: 1.35rem;
  padding: 0.12rem 0.28rem 0.1rem;
  border-radius: 0 0.45rem 0 0.5rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(0.58rem, 7cqi, 0.72rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-align: center;
  color: #0a0e18;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--rarity-accent) 92%, #fff 8%),
    var(--rarity-accent)
  );
  border: 2px solid color-mix(in srgb, var(--rarity-accent) 88%, #fff 12%);
  border-top: none;
  border-right: none;
  box-shadow:
    0 0 10px var(--rarity-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.card-tile.race-red {
  background: linear-gradient(180deg, rgba(211, 76, 76, 0.44) 0%, #241a2a 38%, #0e1626 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(211, 76, 76, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.card-tile.race-white {
  background: linear-gradient(180deg, rgba(230, 225, 200, 0.22) 0%, #1a2238 42%, #0e1626 100%);
}

.card-tile.race-black {
  background: linear-gradient(180deg, #120e1c 0%, #0a0812 48%, #050810 100%);
  border-color: var(--rarity-accent);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.72),
    0 0 0 1px color-mix(in srgb, var(--rarity-accent) 45%, transparent),
    0 0 20px var(--rarity-glow),
    inset 0 1px 0 rgba(120, 110, 150, 0.12);
}

.card-tile .card-origin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0.04rem 0 0.08rem;
  padding: 0.2rem 0.4rem;
  max-width: 100%;
  border-radius: 0.2rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(212, 164, 64, 0.32);
  overflow: hidden;
}

.card-tile.race-black .card-origin {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(90, 80, 120, 0.45);
}

.card-tile .card-origin-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(0.84rem, 10.5cqi, 1.28rem);
  letter-spacing: 0.05em;
  color: var(--gold, #d4a440);
  opacity: 0.9;
  flex-shrink: 0;
}

.card-tile .card-origin-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: clamp(0.94rem, 12cqi, 1.48rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bone, #f0e4b8);
  text-shadow: 0 1px 0 #000;
}

.card-tile.race-red .card-origin {
  border-color: rgba(255, 120, 100, 0.65);
  background: linear-gradient(90deg, rgba(80, 18, 18, 0.75), rgba(40, 12, 12, 0.85));
  box-shadow:
    0 0 14px rgba(211, 76, 76, 0.35),
    inset 0 0 8px rgba(255, 100, 80, 0.12);
}

.card-tile.race-red .card-origin-lbl {
  color: #ff9a8a;
}

.card-tile.race-red .card-origin-val {
  color: #ffe0d8;
  letter-spacing: 0.14em;
  text-shadow:
    0 0 10px rgba(255, 120, 90, 0.55),
    0 1px 0 #000;
}

.card-tile.race-white .card-origin-val {
  color: var(--card-tile-race-white);
}

.card-tile.race-black .card-origin-val {
  color: #c4bdd8;
}

.card-tile .card-name {
  flex: 0 0 auto;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(0.74rem, 8.5cqi, 1.2rem);
  letter-spacing: 0.06em;
  color: var(--bone, #f0e4b8);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tile .card-art {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  margin: 0.04rem 0;
  padding: 0.15rem 0.12rem;
  border-radius: 0.25rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(212, 164, 64, 0.2), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}

.card-tile.race-red .card-art {
  background:
    radial-gradient(circle at 50% 35%, rgba(211, 76, 76, 0.48), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}

.card-tile.race-white .card-art {
  background:
    radial-gradient(circle at 50% 35%, rgba(230, 225, 200, 0.28), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}

.card-tile.race-black .card-art {
  background:
    radial-gradient(circle at 50% 35%, rgba(48, 40, 72, 0.85), transparent 68%),
    linear-gradient(180deg, rgba(20, 16, 32, 0.9), rgba(0, 0, 0, 0.45));
}

.card-tile .card-art-emoji {
  display: block;
  line-height: 1;
  font-size: clamp(2.3rem, 44.2cqi, 4.68rem);
  padding: 0.06em 0;
  text-align: center;
}

.card-tile .card-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.12rem;
  margin-top: 0.08rem;
  padding-top: 0.06rem;
}

.card-tile .card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.06rem;
  min-width: 0;
}

.card-tile .card-stat-lbl {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: clamp(0.84rem, 12.4cqi, 1.24rem);
  letter-spacing: 0.05em;
  color: var(--gold, #d4a440);
  opacity: 0.95;
  line-height: 1;
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}

.card-tile .card-stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 19cqi, 1.9rem);
  letter-spacing: 0.02em;
  color: var(--bone, #f0e4b8);
  line-height: 1;
  text-shadow: 0 1px 0 #000;
}

.card-tile .card-stat.stat-peak-atk .card-stat-lbl,
.card-tile .card-stat.stat-peak-atk .card-stat-val {
  color: var(--card-stat-peak-atk);
  text-shadow: 0 0 10px rgba(232, 92, 92, 0.45), 0 1px 0 #000;
}

.card-tile .card-stat.stat-peak-def .card-stat-lbl,
.card-tile .card-stat.stat-peak-def .card-stat-val {
  color: var(--card-stat-peak-def);
  text-shadow: 0 0 10px rgba(94, 184, 232, 0.45), 0 1px 0 #000;
}

.card-tile .card-stat.stat-peak-mp .card-stat-lbl,
.card-tile .card-stat.stat-peak-mp .card-stat-val {
  color: var(--card-stat-peak-mp);
  text-shadow: 0 0 10px rgba(93, 216, 121, 0.45), 0 1px 0 #000;
}

/* Wider tiles only — phone cards stay in compact tier (Editor ~130px, device after layout cap ~137px). */
@container card-tile (min-width: 11.5rem) {
  .card-name {
    font-size: clamp(0.98rem, 9cqi, 1.55rem);
    letter-spacing: 0.08em;
  }

  .card-art-emoji {
    font-size: clamp(3.4rem, 51cqi, 7.65rem);
  }

  .card-stat-lbl {
    font-size: clamp(1.16rem, 15cqi, 1.7rem);
    letter-spacing: 0.1em;
  }

  .card-stat-val {
    font-size: clamp(1.5rem, 22cqi, 2.7rem);
  }

  .card-origin-lbl {
    font-size: clamp(1.14rem, 12.5cqi, 1.55rem);
  }

  .card-origin-val {
    font-size: clamp(1.28rem, 14.5cqi, 1.85rem);
  }
}