/* ASHFALL — card.css
 * The Guildrun-style card frame. Everything is sized in cqw (container width)
 * so one markup scales from a 150px hand card to a 480px reveal. */

.gcard {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 2 / 3;
  position: relative;
  color: #ece1c8;
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
}
.gc-frame {
  position: absolute; inset: 0;
  background: #0b0a12;
  border-radius: 4cqw;
  padding: 2.4cqw;
  box-shadow: 0 0 0 1cqw #0b0a12, 0 0 0 1.6cqw #b8923f, 0 0 0 2cqw #4a3a18, 0 3cqw 6cqw rgba(0,0,0,.6);
  overflow: hidden;
}
.gc-frame::before {
  /* inner worn-gold line */
  content: ''; position: absolute; inset: 1.4cqw; border-radius: 3cqw;
  border: .6cqw solid #a37f34; opacity: .6; pointer-events: none; z-index: 5;
}
.gc-frame::after {
  /* corner diamonds */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background:
    radial-gradient(circle at 2.6cqw 2.6cqw, #e0b04c 1.6cqw, transparent 1.7cqw),
    radial-gradient(circle at calc(100% - 2.6cqw) 2.6cqw, #e0b04c 1.6cqw, transparent 1.7cqw),
    radial-gradient(circle at 2.6cqw calc(100% - 2.6cqw), #e0b04c 1.6cqw, transparent 1.7cqw),
    radial-gradient(circle at calc(100% - 2.6cqw) calc(100% - 2.6cqw), #e0b04c 1.6cqw, transparent 1.7cqw);
}

/* ---- art window ---- */
.gc-art {
  position: absolute; left: 2.4cqw; right: 2.4cqw; top: 2.4cqw; height: 92cqw;
  border-radius: 2.4cqw 2.4cqw 0 0; overflow: hidden; background: #0f1226;
}
.gc-art .gc-img, .gc-art .gc-scene { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.gc-art-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(11,10,18,.95));
}

/* ---- gems ---- */
.gc-cost { position: absolute; top: 1cqw; left: 1cqw; width: 22cqw; height: 22cqw; z-index: 8; filter: drop-shadow(0 1cqw 1.5cqw rgba(0,0,0,.7)); }
.gc-atk  { position: absolute; bottom: 4cqw; left: 1.2cqw; width: 20cqw; height: 22.5cqw; z-index: 8; filter: drop-shadow(0 1cqw 1.5cqw rgba(0,0,0,.7)); }
.gc-hp   { position: absolute; bottom: 4cqw; right: 1.2cqw; width: 20cqw; height: 22.5cqw; z-index: 8; filter: drop-shadow(0 1cqw 1.5cqw rgba(0,0,0,.7)); }

/* ---- school crest banner ---- */
.gc-crest {
  position: absolute; top: 0; right: 5cqw; width: 20cqw; height: 30cqw; z-index: 7;
  background: linear-gradient(180deg, #16244f, #0c142e);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
  box-shadow: inset 0 0 0 .8cqw #b8923f;
  display: flex; flex-direction: column; align-items: center; padding-top: 3cqw; gap: 1.2cqw;
}
.gc-crest::before {
  content: ''; position: absolute; inset: .8cqw .8cqw 3cqw; pointer-events: none;
  border: .4cqw solid rgba(184,146,63,.5);
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.gc-crest-kanji { font-size: 10cqw; line-height: 1; color: var(--sc); text-shadow: 0 0 2cqw var(--sc); }
.gc-crest-role { font-size: 2.8cqw; letter-spacing: .3cqw; text-transform: uppercase; color: #cfd8ea; font-family: 'Segoe UI', sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 1cqw; }

/* ---- nameplate ---- */
.gc-plate {
  position: absolute; left: 12cqw; right: 12cqw; top: 82cqw; z-index: 9;
  background: linear-gradient(180deg, #171626, #0c0b14);
  border: .8cqw solid #b8923f; border-radius: 1.6cqw;
  padding: 2cqw 2cqw 2.4cqw; text-align: center;
  box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,.7);
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 100% 80%, 97% 100%, 3% 100%, 0 80%, 0 20%);
}
.gc-name { font-size: 7.2cqw; letter-spacing: .3cqw; line-height: 1.05; color: #f2e9d6; text-transform: uppercase; font-weight: bold; }
.gc-name--s { font-size: 5.6cqw; }
.gc-name--xs { font-size: 4.6cqw; letter-spacing: .15cqw; }
.gc-role { font-size: 3.6cqw; letter-spacing: .6cqw; text-transform: uppercase; color: #8fb8e6; margin-top: 1.2cqw; font-family: 'Segoe UI', sans-serif; }
.gc-plate::after {
  content: '◆'; display: block; color: #b8923f; font-size: 3cqw; margin-top: 1.4cqw; line-height: 1;
}

/* ---- rules box ---- */
.gc-box {
  position: absolute; left: 5cqw; right: 5cqw; top: 104cqw; bottom: 8cqw; z-index: 7;
  background: linear-gradient(180deg, #141a30, #0c1020);
  border: .8cqw solid #2d3c6a; border-radius: 2cqw;
  clip-path: polygon(0 4%, 4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%);
  padding: 9cqw 16cqw 3cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8cqw;
  text-align: center; overflow: hidden;
}
.gc-text { font-size: 5cqw; line-height: 1.3; color: #eee7d6; font-family: 'Segoe UI', sans-serif; }
.gc-wep { font-size: 3.6cqw; color: #e0b04c; letter-spacing: .2cqw; font-family: 'Segoe UI', sans-serif; }
.gc-kws { display: flex; flex-wrap: wrap; gap: 1.4cqw; justify-content: center; }
.gc-kws span {
  font-size: 3.4cqw; padding: .4cqw 2cqw; border-radius: 3cqw; font-family: 'Segoe UI', sans-serif;
  background: rgba(79,163,209,.14); border: .4cqw solid rgba(143,184,230,.5); color: #cfe3fb;
}
.gc-fork { font-size: 3.6cqw; color: #e0b04c; }
.gc-quote {
  font-size: 3.4cqw; font-style: italic; color: #aab3c8; line-height: 1.3; margin-top: 1cqw;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- footer ---- */
.gc-foot {
  position: absolute; left: 24cqw; right: 24cqw; bottom: 3.2cqw; z-index: 7;
  display: flex; justify-content: space-between; gap: 3cqw;
  font-size: 2.8cqw; letter-spacing: .5cqw; text-transform: uppercase; color: #6f6a80;
  font-family: 'Segoe UI', sans-serif;
}
.gc-foot span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- states used in the hand ---- */
.gcard.playable { cursor: pointer; transition: transform .15s; }
.gcard.playable:hover { transform: translateY(-14px) scale(1.03); z-index: 3; }
.gcard.playing { transform: translateY(-14px) scale(1.03); }
.gcard.playing .gc-frame { box-shadow: 0 0 0 1cqw #0b0a12, 0 0 0 1.6cqw #f2d27a, 0 0 0 2cqw #4a3a18, 0 0 18px #e0b04c; }
.gcard.dim { filter: grayscale(.6) brightness(.55); cursor: default; }
.gcard.dim .gc-frame { box-shadow: 0 0 0 1cqw #0b0a12, 0 0 0 1.6cqw #5a4a25, 0 0 0 2cqw #2a2210; }