/* skin-holo: the FOIL card, a rare holographic insert in a metallic tier frame.
   Idea: an angled rainbow sheen, diffraction lines and glitter whose strength climbs with rarity, so Mythic blazes and Common stays almost flat. */

@property --holo-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ================= PAGE ================= */
body.skin-holo {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(120, 70, 255, .34), transparent 62%),
    radial-gradient(800px 500px at 96% 6%, rgba(0, 170, 255, .26), transparent 60%),
    radial-gradient(700px 500px at 50% 112%, rgba(255, 70, 190, .16), transparent 60%),
    #05050a;
  background-attachment: fixed;
  color: #e9ebf5;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ================= CARD BASE (acts as the Common-ish default) ================= */
body.skin-holo .card {
  --ac: #b8bcc8;
  --glow: rgba(184, 188, 200, .28);
  --halo: 0px;
  --foil: 0;
  --glare: 0;
  --bg1: #17181f;
  --bg2: #0d0e13;
  --m: #4c505a, #c7cbd4 30%, #8b909b 55%, #d7dae1 75%, #5d616b;
  --sheen: transparent 20%, rgba(255, 255, 255, .4) 50%, transparent 80%;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  height: auto;
  min-height: 360px;
  padding: 12px 13px 11px;
  border: 3px solid transparent;
  border-radius: 15px;
  background:
    linear-gradient(165deg, var(--bg1), var(--bg2)) padding-box,
    linear-gradient(135deg, var(--m)) border-box;
  box-shadow: 0 0 var(--halo) var(--glow), 0 9px 20px rgba(0, 0, 0, .55);
  color: #e9ebf5;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}

body.skin-holo .card > * {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* ---- foil layer: diffraction lines + rainbow sheen + glitter (behind content) ---- */
body.skin-holo .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--foil);
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(115deg, transparent 0 5px, rgba(255, 255, 255, .11) 5px 6px, transparent 6px 11px),
    linear-gradient(115deg, var(--sheen)),
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, .95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .8) 0 1px, transparent 1.6px);
  background-size: auto, 260% 260%, 41px 37px, 59px 53px;
  background-position: 0 0, 30% 30%, 0 0, 0 0;
}

/* ---- glare band: a soft white streak over the whole card ---- */
body.skin-holo .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--glare);
  mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 47%, rgba(255, 255, 255, .06) 52%, transparent 62%);
  background-size: 260% 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
}

/* ================= CARD PARTS ================= */
body.skin-holo .card .rule {
  flex: none;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--m));
  box-shadow: 0 0 8px var(--glow);
}

body.skin-holo .card header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.skin-holo .card .tier {
  padding: 3px 8px 3px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0a0b10;
  background: linear-gradient(100deg, var(--m));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 10px var(--glow);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

body.skin-holo .card .idx {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .62);
}

body.skin-holo .card .plot {
  flex: none;
  height: 152px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .09), transparent 64%),
    rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .65);
}

body.skin-holo .card .plot .orb {
  display: block;
  width: 100%;
  height: 100%;
}

body.skin-holo .card h2 {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #fff;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

/* ---- the product: the observation number ---- */
body.skin-holo .card .count {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
}

body.skin-holo .card .count b {
  flex: none;
  font-family: "Segoe UI Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  font-size: 54px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #eef0f5;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 12px var(--glow));
}

body.skin-holo .card .count span {
  flex: 1 1 84px;
  padding-left: 8px;
  border-left: 2px solid var(--ac);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}

body.skin-holo .card .els {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 6px;
}

body.skin-holo .card .els div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

body.skin-holo .card .els dt {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  color: var(--ac);
}

body.skin-holo .card .els dd {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #f4f5fb;
}

body.skin-holo .card footer {
  flex: none;
  margin-top: auto;
  padding-top: 2px;
  font-size: 8.5px;
  line-height: 1.3;
  letter-spacing: .03em;
  text-align: center;
  color: rgba(255, 255, 255, .42);
}

/* ================= ORBIT DRAWING ================= */
body.skin-holo .card .orb .ring {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1;
}

body.skin-holo .card .orb .shadow {
  fill: none;
  stroke: rgba(255, 255, 255, .38);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1 4.5;
}

body.skin-holo .card .orb .ghost {
  fill: none;
  stroke: var(--ac);
  stroke-width: 1.2;
  opacity: .3;
}

body.skin-holo .card .orb .orbit {
  fill: none;
  stroke: var(--ac);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px var(--ac));
}

body.skin-holo .card .orb .qline {
  stroke: rgba(255, 255, 255, .42);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

body.skin-holo .card .orb .sun {
  fill: #ffd76a;
  filter: drop-shadow(0 0 5px rgba(255, 200, 80, .9));
}

body.skin-holo .card .orb .body {
  fill: #fff;
  stroke: var(--ac);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px var(--ac));
}

/* ================= TIERS (rarest first) ================= */

/* ---- MYTHIC: spinning prismatic frame, full spectrum, everything moves ---- */
body.skin-holo .card.t-mythic {
  --ac: #ff7ae0;
  --glow: rgba(255, 120, 232, .6);
  --foil: 1;
  --glare: 1;
  --bg1: #1c1138;
  --bg2: #07101f;
  --m: #ff6ad5, #ffd36b 20%, #7dffb2 40%, #6bd6ff 60%, #b38bff 80%, #ff6ad5;
  --sheen: transparent 6%, hsla(310, 100%, 62%, .55) 19%, hsla(215, 100%, 62%, .55) 31%, hsla(160, 100%, 55%, .5) 43%, hsla(52, 100%, 58%, .55) 55%, hsla(350, 100%, 62%, .5) 67%, transparent 82%;
  background:
    linear-gradient(165deg, var(--bg1), var(--bg2)) padding-box,
    conic-gradient(from var(--holo-ang, 0deg), #ff6ad5, #ffd36b, #7dffb2, #6bd6ff, #b38bff, #ff6ad5) border-box;
  box-shadow: 0 0 30px rgba(255, 110, 230, .5), 0 0 58px rgba(100, 190, 255, .3), 0 9px 20px rgba(0, 0, 0, .55);
  animation: holo-spin 7s linear infinite;
}
body.skin-holo .card.t-mythic::before { animation: holo-sheen 6s ease-in-out infinite alternate; }
body.skin-holo .card.t-mythic::after { animation: holo-glare 4.5s ease-in-out infinite; }
body.skin-holo .card.t-mythic .rule {
  background-size: 200% 100%;
  animation: holo-slide 4s linear infinite;
}
body.skin-holo .card.t-mythic .tier {
  background-size: 200% 100%;
  animation: holo-slide 5s linear infinite;
}
body.skin-holo .card.t-mythic .orb .orbit { animation: holo-hue 9s linear infinite; }

/* ---- LEGENDARY: polished gold ---- */
body.skin-holo .card.t-legendary {
  --ac: #ffcf5a;
  --glow: rgba(255, 196, 70, .5);
  --halo: 26px;
  --foil: .85;
  --glare: .8;
  --bg1: #261b08;
  --bg2: #0d0a05;
  --m: #7a4f0e, #ffe08a 22%, #c98a1c 42%, #fff4c4 56%, #b97a14 78%, #ffe08a;
  --sheen: transparent 8%, hsla(48, 100%, 60%, .55) 22%, hsla(28, 100%, 62%, .5) 34%, hsla(335, 100%, 66%, .42) 46%, hsla(52, 100%, 70%, .55) 58%, hsla(18, 100%, 58%, .45) 70%, transparent 84%;
}
body.skin-holo .card.t-legendary::before { animation: holo-sheen 8s ease-in-out infinite alternate; }
body.skin-holo .card.t-legendary::after { animation: holo-glare 6.5s ease-in-out infinite; }

/* ---- EPIC: amethyst chrome ---- */
body.skin-holo .card.t-epic {
  --ac: #c28bff;
  --glow: rgba(176, 110, 255, .45);
  --halo: 20px;
  --foil: .62;
  --glare: .55;
  --bg1: #1a1030;
  --bg2: #0b0714;
  --m: #4b1e96, #e2c4ff 22%, #9a57f5 42%, #f3e5ff 56%, #6b32c8 78%, #d8b4ff;
  --sheen: transparent 10%, hsla(285, 100%, 66%, .5) 24%, hsla(250, 100%, 70%, .5) 38%, hsla(320, 100%, 66%, .44) 52%, hsla(212, 100%, 68%, .4) 66%, transparent 84%;
}
body.skin-holo .card.t-epic::before { animation: holo-sheen 11s ease-in-out infinite alternate; }
body.skin-holo .card.t-epic::after { animation: holo-glare 9s ease-in-out infinite; }

/* ---- RARE: sapphire steel, a slow shimmer ---- */
body.skin-holo .card.t-rare {
  --ac: #5cc1ff;
  --glow: rgba(70, 175, 255, .38);
  --halo: 14px;
  --foil: .4;
  --glare: .25;
  --bg1: #0c1a30;
  --bg2: #070d18;
  --m: #12507f, #c9ecff 22%, #3fb0f5 42%, #e8f7ff 56%, #1c7bc0 78%, #b5e4ff;
  --sheen: transparent 14%, hsla(200, 100%, 62%, .5) 30%, hsla(180, 100%, 60%, .42) 44%, hsla(222, 100%, 68%, .46) 58%, transparent 80%;
}
body.skin-holo .card.t-rare::before { animation: holo-sheen 15s ease-in-out infinite alternate; }

/* ---- UNCOMMON: green anodised, a faint fixed sheen ---- */
body.skin-holo .card.t-uncommon {
  --ac: #55e08c;
  --glow: rgba(70, 220, 130, .28);
  --halo: 8px;
  --foil: .2;
  --glare: 0;
  --bg1: #0c2016;
  --bg2: #07100b;
  --m: #14583a, #c6f5d8 22%, #3ccf7e 42%, #e4fff0 56%, #1f9a5c 78%, #b0efca;
  --sheen: transparent 18%, hsla(145, 80%, 58%, .45) 38%, hsla(165, 80%, 60%, .4) 54%, transparent 78%;
}

/* ---- COMMON: brushed silver, almost no foil ---- */
body.skin-holo .card.t-common {
  --ac: #b8bcc8;
  --glow: rgba(184, 188, 200, .0);
  --halo: 0px;
  --foil: .07;
  --glare: 0;
  --bg1: #17181e;
  --bg2: #0e0f13;
}

/* ---- CONTROL: flat, unfoiled, dashed blank ---- */
body.skin-holo .card.t-control {
  --ac: #7d818c;
  --glow: rgba(125, 129, 140, 0);
  --foil: 0;
  --glare: 0;
  border-style: dashed;
  border-color: #3b3e47;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 7px),
    #0d0e12;
  box-shadow: none;
}
body.skin-holo .card.t-control::before,
body.skin-holo .card.t-control::after { display: none; }
body.skin-holo .card.t-control .rule {
  height: 0;
  background: none;
  border-top: 1px dashed #3b3e47;
  box-shadow: none;
}
body.skin-holo .card.t-control .tier {
  padding: 2px 7px 2px 10px;
  background: none;
  border: 1px dashed #4a4d57;
  color: #8a8e99;
  box-shadow: none;
  text-shadow: none;
}
body.skin-holo .card.t-control .idx { color: rgba(255, 255, 255, .4); }
body.skin-holo .card.t-control h2 { color: #aeb2bd; }
body.skin-holo .card.t-control .count b { color: #8e929c; filter: none; }
body.skin-holo .card.t-control .count span { color: rgba(255, 255, 255, .45); }
body.skin-holo .card.t-control .els div { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
body.skin-holo .card.t-control .els dd { color: #b7bbc5; }
body.skin-holo .card.t-control .orb .orbit,
body.skin-holo .card.t-control .orb .body,
body.skin-holo .card.t-control .orb .sun { filter: none; }
body.skin-holo .card.t-control .orb .sun { fill: #9a9fa9; }

/* ---- observation number: metallic fills for the top three tiers, solid for the rest ---- */
body.skin-holo .card.t-mythic .count b,
body.skin-holo .card.t-legendary .count b,
body.skin-holo .card.t-epic .count b {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.skin-holo .card.t-mythic .count b {
  background-image: linear-gradient(100deg, #ffffff 0%, #ffc4f2 14%, #a9ecff 30%, #c2ffd8 46%, #fff2a6 62%, #ffb8e8 78%, #ffffff 100%);
  background-size: 260% 100%;
  background-position: 0% 0;
  animation: holo-text 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 14px rgba(255, 130, 235, .7));
}
body.skin-holo .card.t-legendary .count b {
  background-image: linear-gradient(180deg, #fffbe0 0%, #ffe27a 38%, #e0a02a 50%, #b8741a 53%, #ffd35c 78%, #fff1b0 100%);
}
body.skin-holo .card.t-epic .count b {
  background-image: linear-gradient(180deg, #fbf1ff 0%, #d9b0ff 38%, #a064f5 50%, #7a44e0 53%, #b98cff 78%, #f1e0ff 100%);
}
body.skin-holo .card.t-rare .count b { color: #cdeeff; }
body.skin-holo .card.t-uncommon .count b { color: #d4f9e1; }
body.skin-holo .card.t-common .count b { color: #eef0f5; }

/* ================= KEYFRAMES ================= */
@keyframes holo-sheen {
  from { background-position: 0 0, 0% 0%, 0 0, 0 0; }
  to   { background-position: 0 0, 100% 100%, 0 0, 0 0; }
}
@keyframes holo-glare {
  0%, 38% { background-position: 0% 0; }
  100%    { background-position: 100% 0; }
}
@keyframes holo-spin {
  to { --holo-ang: 360deg; }
}
@keyframes holo-slide {
  to { background-position: 200% 0; }
}
@keyframes holo-text {
  to { background-position: 100% 0; }
}
@keyframes holo-hue {
  from { filter: drop-shadow(0 0 4px #ff7ae0) hue-rotate(0deg); }
  to   { filter: drop-shadow(0 0 4px #ff7ae0) hue-rotate(360deg); }
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion: reduce) {
  body.skin-holo .card,
  body.skin-holo .card::before,
  body.skin-holo .card::after,
  body.skin-holo .card .rule,
  body.skin-holo .card .tier,
  body.skin-holo .card .count b,
  body.skin-holo .card .orb .orbit {
    animation: none !important;
  }
}