/* ============================================================
   SmawPaw Arena -- cardface.css
   TCG card face component + showroom structural CSS.
   Loaded by the showroom, /cards library page, and future UIs.
   Tier frames driven by data-tier attribute on .cardface.
     data-tier="250"  common  (cream/tan)
     data-tier="500"  rare    (teal)
     data-tier="900"  epic    (terra)
     data-tier="1500" legendary (gold)
   ============================================================ */

/* ---- Tier colour tokens (cascade from default below) ---- */
.cardface {
  --cf-fr: #EADFCE;    /* frame / border colour  */
  --cf-bd: #c4a87a;    /* badge + name-plate bg  */
  --cf-bt: #2B2521;    /* text on badge / plate  */
}
.cardface[data-tier="500"]  { --cf-fr: #2F7E78; --cf-bd: #2F7E78; --cf-bt: #fff; }
.cardface[data-tier="900"]  { --cf-fr: #E0662F; --cf-bd: #E0662F; --cf-bt: #fff; }
.cardface[data-tier="1500"] { --cf-fr: #F5B841; --cf-bd: #d49a1a; --cf-bt: #2B2521; }

/* ---- Shell ---- */
.cardface {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-width: 150px;
  max-width: 260px;
  background: #FFFFFF;
  border: 3px solid var(--cf-fr);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(43,37,33,0.13),
              inset 0 0 0 1.5px rgba(255,255,255,0.5);
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  user-select: none;
  flex-shrink: 0;
}

/* Legendary: gold shimmer outline */
.cardface[data-tier="1500"] {
  box-shadow: 0 0 0 1px #F5B841,
              0 2px 12px rgba(245,184,65,0.4),
              inset 0 0 0 1.5px rgba(255,255,255,0.5);
}

/* ---- Top accent band ---- */
.cf-top {
  height: 5px;
  background: var(--cf-fr);
  flex-shrink: 0;
}

/* ---- Art area (52 % of card height) ---- */
.cf-art {
  position: relative;
  flex: 0 0 52%;
  background: #FBF6EE;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Canvas: square, fills art width -- bottom clips via overflow:hidden */
.cf-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}

/* ---- Cost badge (top-left of art area) ---- */
.cf-cost {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 3;
  background: var(--cf-bd);
  color: var(--cf-bt);
  font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1;
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.4);
  white-space: nowrap;
}
.cf-cost:empty { display: none; }

/* ---- Type stripe (bottom edge of art area) ---- */
.cf-type-stripe {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  font-size: 0.56em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-align: center;
  padding: 2px 4px 3px;
  background: var(--cf-bd);
  color: var(--cf-bt);
  opacity: 0.92;
}

/* ---- Name plate ---- */
.cf-name {
  background: var(--cf-bd);
  color: var(--cf-bt);
  font-family: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92em;
  line-height: 1.15;
  text-align: center;
  padding: 4px 6px 3px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* ---- Stats strip ---- */
.cf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 5px;
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  background: #FBF6EE;
  font-size: 0.62em;
  font-weight: 800;
  color: #2B2521;
  flex-shrink: 0;
  line-height: 1.3;
  border-bottom: 1px solid #EADFCE;
}
.cf-stats span { white-space: nowrap; }

/* ---- Flavor text ---- */
.cf-flavor {
  flex: 1;
  font-size: 0.6em;
  color: #6E6156;
  font-style: italic;
  line-height: 1.4;
  padding: 3px 8px 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ---- Size variants ---- */
.cardface.cf-sm { font-size: 10px; border-width: 2px; border-radius: 10px;
                  min-width: 150px; max-width: 175px; }
.cardface.cf-md { font-size: 13px; }
.cardface.cf-lg { font-size: 15px; min-width: 200px; max-width: 260px; }

/* Showroom context: slot sizes the card */
.sr-slot .cardface {
  min-width: unset;
  max-width: unset;
  font-size: clamp(9px, 1.4vw, 13px);
  height: 100%;
}

/* ================================================================
   SHOWROOM STRUCTURE
================================================================ */

.showroom-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}

/* 3D scene wrapper */
.sr-scene {
  width: 100%;
  height: 100%;
  perspective: 900px;
  perspective-origin: 50% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The rotating cylinder */
.sr-ring {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
  cursor: grab;
  touch-action: none;
}
.sr-ring.sr-dragging { cursor: grabbing; }

/* Individual card slots on the cylinder */
.sr-slot {
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---- Non-3D fallback: horizontal snap-scroll ---- */
.sr-fallback-row {
  display: flex;
  gap: 14px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  height: 100%;
  align-items: center;
  box-sizing: border-box;
  scrollbar-width: none;
}
.sr-fallback-row::-webkit-scrollbar { display: none; }

.sr-fallback-row .sr-slot {
  position: relative;
  flex-shrink: 0;
  scroll-snap-align: center;
}

@media (max-width: 420px) {
  .sr-fallback-row { gap: 10px; padding: 12px; }
}