/* ─────────────────────────────────────────────────────────────
   CAMP CARDS · "choose your class" cards for the four camps
   ───────────────────────────────────────────────────────────── */
.camp--gold   { --c1: var(--tone-gold);   --c2: var(--tone-gold-2); }
.camp--rose   { --c1: var(--tone-rose);   --c2: var(--tone-rose-2); }
.camp--violet { --c1: var(--tone-violet); --c2: var(--tone-violet-2); }
.camp--cyan   { --c1: var(--tone-cyan);   --c2: var(--tone-cyan-2); }

.camp { --shape: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 34px), 50% 100%, 0 calc(100% - 34px));
  position: relative; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); transition: transform .45s cubic-bezier(.3,1.4,.5,1), filter .4s; }
.camp__shell { position: relative; height: 100%; padding: 30px 22px 54px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; clip-path: var(--shape);
  background: linear-gradient(115deg, var(--c2), var(--c1) 40%, #fff6dc 50%, var(--c1) 60%, var(--c2)); background-size: 300% 100%; animation: campBorder 7s linear infinite; }
@keyframes campBorder { to { background-position: -300% 0; } }
.camp__shell::before { content: ""; position: absolute; inset: 2px; clip-path: var(--shape); z-index: 0;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 60%), linear-gradient(180deg, #24104f, #110926 75%); }
.camp__shell::after { content: ""; position: absolute; inset: 2px; clip-path: var(--shape); z-index: 0; opacity: .35;
  background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--c1) 16%, transparent) 14px 15px); }
.camp__shell > * { position: relative; z-index: 1; }
.camp__num { font: italic 800 .72rem/1 var(--f-ui); letter-spacing: .3em; color: var(--c1); padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); background: rgba(17,9,38,.6); }
.camp__emblem { width: 104px; height: 104px; display: grid; place-items: center; color: var(--c1); margin: 6px 0; }
.camp__emblem svg { width: 46px; height: 46px; position: relative; z-index: 2; filter: drop-shadow(0 0 10px var(--c1)); transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.camp__diamond { position: absolute; width: 66px; height: 66px; transform: rotate(45deg); border: 2px solid var(--c1); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, #1b0f3d), #110926); box-shadow: 0 0 22px color-mix(in srgb, var(--c1) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--c1) 40%, transparent); transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.camp__halo { position: absolute; width: 104px; height: 104px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--c1) 70%, transparent); animation: spin 18s linear infinite; }
.camp__name { margin: 4px 0 0; font: 400 1.35rem/1.1 var(--f-display); color: #fff; text-shadow: 0 0 14px var(--c1), 0 2px 0 #1c0838; }
.camp__text { margin: 0; color: var(--mist); font-size: .9rem; flex: 1; }
.camp__foot { font: italic 800 .7rem/1 var(--f-ui); letter-spacing: .24em; color: var(--c1); padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c1) 50%, transparent); width: 100%; }

.camp:hover { transform: translateY(-10px); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c1) 60%, transparent)) drop-shadow(0 16px 26px rgba(0,0,0,.5)); }
.camp:hover .camp__diamond { transform: rotate(225deg) scale(1.08); }
.camp:hover .camp__emblem svg { transform: scale(1.15); }
.camp:hover .camp__halo { animation-duration: 3s; }