/* Restrained card-detail typography and icon polish. */

.card-page-copy{
  width:100%;
  max-width:720px;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.card-page-copy .card-page-set{
  display:block;
  margin:8px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  text-shadow:0 2px 12px rgba(251,191,36,.18);
}

.card-page-copy .card-page-set::before{content:none}

.card-abilities{margin-top:25px}
.ability-list{gap:18px}

.ability-card-has-project{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(108px,15vw,144px);
  grid-template-areas:
    "header project"
    "text project";
  column-gap:clamp(16px,2.5vw,26px);
  align-items:start;
}

.ability-card-has-project .ability-card-header{grid-area:header}
.ability-card-has-project .ability-text{grid-area:text}

.ability-project-card{
  grid-area:project;
  align-self:center;
  width:100%;
  margin:0;
  overflow:hidden;
  border-radius:9px;
  background:#111820;
  box-shadow:0 9px 22px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.14);
  transform:rotate(5deg);
  transform-origin:center;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}

.ability-project-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  -webkit-user-drag:none;
}

.ability-card,
.ability-card:last-child{
  overflow:visible;
  padding:0 0 20px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;
  background:none;
  box-shadow:none;
}

.ability-card:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.ability-card::before,
.ability-card::after{content:none}

.ability-card-header{
  justify-content:flex-start;
  gap:10px 13px;
  margin-bottom:8px;
  padding:0;
  border:0;
}

.ability-card h3{
  color:#f7f4ed;
  font-size:clamp(22px,2.2vw,30px);
  letter-spacing:-.015em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.4),
    0 6px 18px rgba(0,0,0,.2);
}

.ability-cost{
  gap:7px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

.ability-cost::before{content:none}

.ability-cost-token{
  gap:4px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:#f4f5f7;
  font-size:16px;
  text-shadow:0 2px 4px rgba(0,0,0,.75);
  box-shadow:none;
}

.ability-cost-token img{
  width:28px;
  height:28px;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.75))
    drop-shadow(0 5px 5px rgba(0,0,0,.42))
    saturate(1.08);
}

.ability-free-cost{
  padding:0;
  color:#aeb5c2;
  font-size:14px;
}

.ability-text{
  color:#f1f2f5!important;
  font-size:18px!important;
  line-height:1.58!important;
  font-weight:620;
  text-shadow:0 2px 7px rgba(0,0,0,.24);
}

.ability-flavor{
  display:inline;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:#b8bec9;
  font-family:'Space Grotesk','Segoe UI',Inter,system-ui,sans-serif;
  font-size:1em;
  font-weight:550;
  font-style:normal;
  line-height:inherit;
  letter-spacing:0;
  text-shadow:0 2px 8px rgba(0,0,0,.38);
}

.ability-flavor::before{content:none}

.ability-dice{
  gap:4px;
  margin-left:7px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:#f5f6f8;
  font-size:15px;
  vertical-align:-.22em;
  text-shadow:0 2px 4px rgba(0,0,0,.7);
  box-shadow:none;
}

.ability-dice::before{content:none}

.ability-dice img{
  width:19px;
  height:19px;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.7))
    drop-shadow(0 4px 4px rgba(0,0,0,.36));
}

.card-page-more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
}

.card-page-more-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--gold);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:color 0.2s ease, transform 0.2s ease;
}

.card-page-more-link svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}

.card-page-more-link:hover,
.card-page-more-link:focus-visible{
  color:#f6d574;
}

.card-page-more-link--prev:hover,
.card-page-more-link--prev:focus-visible{
  transform:translateX(-2px);
}

.card-page-more-link--next:hover,
.card-page-more-link--next:focus-visible{
  transform:translateX(2px);
}

.card-page-more-link--all{
  order:1;
  width:100%;
  justify-content:center;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (min-width:560px){
  .card-page-more-link--all{
    order:0;
    width:auto;
  }
}

@media (max-width:560px){
  .card-page-hero{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    align-items:start;
    justify-items:center;
    gap:12px;
  }

  .card-page-art{
    grid-column:1;
    grid-row:2;
    align-self:start;
    justify-self:center;
    width:min(72vw,300px);
    margin-top:0;
  }

  .card-page-copy{display:contents}

  .card-page-summary{display:contents}

  .card-page-title-row{
    grid-column:1;
    grid-row:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    min-width:0;
  }

  .card-page-copy h1{
    min-width:0;
    max-width:100%;
    font-size:clamp(24px,7vw,36px);
    line-height:1.02;
    letter-spacing:-.025em;
    white-space:nowrap;
  }

  .card-page-title-row .type-badge{
    transform:none;
  }

  .card-page-copy .card-page-set{
    grid-column:1;
    grid-row:3;
    justify-self:center;
    text-align:center;
    margin:0;
    max-width:100%;
    font-size:clamp(12px,3.4vw,16px);
    line-height:1.25;
    letter-spacing:-.02em;
    white-space:nowrap;
  }

  .card-abilities{
    grid-column:1;
    grid-row:4;
    width:100%;
    margin-top:8px;
  }

  .ability-card,
  .ability-card:last-child{padding:0 0 13px}

  .ability-card:last-child{padding-bottom:0}

  .ability-card-header{
    margin-bottom:6px;
    padding:0;
  }

  .ability-card h3{
    font-size:clamp(18px,5.5vw,21px);
  }

  .ability-card-has-project{
    grid-template-columns:minmax(0,1fr) clamp(76px,23vw,94px);
    column-gap:10px;
  }

  .ability-card-has-project .ability-card-header{
    flex-wrap:wrap;
  }

  .ability-project-card{
    border-radius:6px;
  }

  .ability-text{
    font-size:14px!important;
    line-height:1.42!important;
  }

  .ability-cost-token{
    min-height:0;
    padding:0;
    font-size:14px;
  }

  .ability-cost-token img{
    width:22px;
    height:22px;
  }

  .ability-flavor{
    margin:0;
    padding:0;
    font-size:1em;
  }
}

@media (max-width:380px){
  .card-page-hero{
    gap:10px;
  }

  .card-page-copy h1{font-size:clamp(21px,6.5vw,25px)}

  .ability-text{
    font-size:12.5px!important;
    line-height:1.34!important;
  }
}