/* The hand uses its own portrait cards. Catalog and reward cards keep their layouts. */
.arena .hand-shelf .hand-heading {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  min-height: 48px;
  gap: .42rem;
  border-color: #c49e7744;
}
.arena .hand-shelf .arena-hand-label { min-width: 0; flex-wrap: wrap; gap: .08rem .44rem; white-space: normal; }
.arena .hand-shelf .arena-hand-label h2 { color: var(--arena-paper); font-size: .73rem; letter-spacing: .045em; }
.arena .hand-shelf .arena-hand-label h2 span {
  border-color: #ad8b5b7a;
  border-radius: .21rem;
  color: #e8ca98;
  background: #2f2331;
  font: 780 .86rem/1 var(--arena-numeric);
}
.arena .hand-shelf .hand-kit {
  grid-column: 3;
  min-width: 48px;
  min-height: 48px;
  padding: .29rem .52rem;
  border-color: #ae906456;
  background: #211824;
  color: var(--arena-paper);
  font-size: .72rem;
}
.arena .hand-shelf .hand-kit .icon { color: #d6b083; }
.arena .hand-shelf .hand-kit span { display: inline; }
.hand-swipe { display: none; gap: .25rem; align-items: center; color: var(--arena-muted); font-size: .65rem; white-space: nowrap; }
.hand-swipe .icon { width: .72rem; height: .72rem; color: #d6b083; }

.arena .hand-shelf:not([data-list="true"]) .arena-hand-strip {
  display: flex;
  flex: none;
  justify-content: safe center;
  align-items: flex-start;
  min-width: 0;
  gap: .19rem;
  margin: 0;
  padding: .49rem .59rem .42rem;
  overflow: auto hidden;
  scroll-padding-inline: .59rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #9c7a65 #191423;
  background: radial-gradient(ellipse at 50% 112%,#8f563522 4%,transparent 75%);
}
.arena .hand-shelf:not([data-list="true"]) .hand-slot { flex: 0 0 clamp(5.45rem,7.2vw,6.7rem); margin-inline: -.20rem; }
.hand-slot { --hand-tilt: 0deg; --hand-lift: 0px; }
.hand-slot.fan-0 { --hand-tilt: -3.2deg; --hand-lift: 4px; }
.hand-slot.fan-1 { --hand-tilt: -2.5deg; --hand-lift: 2px; }
.hand-slot.fan-2 { --hand-tilt: -1.6deg; --hand-lift: 1px; }
.hand-slot.fan-3 { --hand-tilt: -.7deg; }
.hand-slot.fan-5 { --hand-tilt: .7deg; }
.hand-slot.fan-6 { --hand-tilt: 1.6deg; --hand-lift: 1px; }
.hand-slot.fan-7 { --hand-tilt: 2.5deg; --hand-lift: 2px; }
.hand-slot.fan-8 { --hand-tilt: 3.2deg; --hand-lift: 4px; }

.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card {
  --hand-shell: #312430;
  --hand-line: #ad8092;
  --hand-glyph: #edc3d0;
  --hand-paper: #d6bda1;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: .87rem minmax(0,1fr) auto;
  align-items: stretch;
  height: clamp(7.2rem,14.2dvh,8.35rem);
  min-height: 48px;
  padding: .22rem;
  gap: .15rem;
  overflow: hidden;
  border: 1px solid var(--hand-line);
  border-radius: .35rem;
  background: linear-gradient(150deg,var(--hand-shell),#160e19 65%);
  box-shadow: 0 1px 0 #4b2e35,0 2px 0 #151019,0 4px 8px #08060dd9,inset 0 0 0 1px #f7d5aa32;
  color: #281722;
  transform: translateY(var(--hand-lift)) rotate(var(--hand-tilt));
  transform-origin: 50% 115%;
}
.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card[data-deck="treasure"] {
  --hand-shell: #3e2e22;
  --hand-line: #bd945e;
  --hand-glyph: #efd29b;
  --hand-paper: #dfc49d;
}
.arena .hand-shelf:not([data-list="true"]) .hand-slot[data-ready="true"] .hand-card {
  border-color: #f2b078;
  box-shadow: 0 1px 0 #a46645,0 3px 0 #321d22,0 4px 10px #08060dea,inset 0 0 0 1px #f5c49150;
}
.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card:hover,
.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card:focus-visible {
  border-color: #f3c599;
  transform: translateY(-3px);
}
.arena .hand-shelf .hand-card:focus-visible { outline: 2px solid #e4cf9d; outline-offset: -3px; }
.hand-card-crest { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: .1rem; padding: 0 .13rem; container-type: inline-size; }
.hand-card-crest > span { display: inline-flex; align-items: center; gap: .12rem; color: var(--hand-glyph); font: 710 .51rem/1 var(--arena-ui); text-transform: uppercase; letter-spacing: .027em; white-space: nowrap; }
.hand-card-crest .icon { width: .61rem; height: .61rem; }
.hand-card-crest .hand-card-ready { color: #ffd5a5; letter-spacing: 0; }
@container (max-width: 5.6rem) {
  .hand-slot[data-ready="true"] .hand-card-deck-name { display: none; }
}
.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-art { grid-row: auto; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 1px solid #edc48a55; border-radius: .13rem; }
.hand-card .card-art img { object-position: 50% 45%; }
.arena .hand-shelf .hand-card .badge-number {
  inset: auto .07rem .07rem auto;
  padding: .05rem .18rem;
  border: 1px solid #f3d7acb5;
  border-radius: .13rem;
  background: #35232ae9;
  color: #fae1b8;
  font: 800 .94rem/.92 var(--arena-numeric);
}
.hand-card-caption { display: grid; gap: .1rem; min-width: 0; min-height: 2.18rem; padding: .19rem .18rem .14rem; border-radius: .12rem; background: linear-gradient(162deg,#f1ddba,var(--hand-paper)); }
.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding: 0; color: #281924; font: 780 clamp(.62rem,.78vw,.73rem)/1.06 var(--arena-display); }
.arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-kind { margin: 0; padding: 0; color: #503447; font-size: .58rem; line-height: 1.06; }
.hand-list-ready { display: none; }
.arena .hand-shelf[data-list="true"] .hand-card-caption { display: contents; }
.arena .hand-shelf[data-list="true"] :is(.hand-card-crest,.hand-card .card-art) { display: none; }
.arena .hand-shelf[data-list="true"] .hand-list-ready { display: inline; font-weight: 770; color: #6a302c; }
.arena .hand-shelf .hand-empty { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 3.3rem; }
.hand-empty .icon { width: 1.12rem; height: 1.12rem; color: #d6b083; }

@media (max-width: 680px) {
  .hand-swipe { display: flex; }
  .arena .hand-shelf:not([data-list="true"]) .arena-hand-strip { gap: .29rem; padding-block: .37rem .30rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot { flex-basis: 5.62rem; margin: 0; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card { height: 6.65rem; transform: translateY(calc(var(--hand-lift) * .35)) rotate(calc(var(--hand-tilt) * .38)); }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { font: 770 .66rem/1.05 var(--arena-ui); }
}
@media (max-width: 375px) {
  .arena .hand-shelf .hand-kit span { display: none; }
}
@media (max-height: 640px) and (orientation: portrait) {
  .arena .hand-shelf:not([data-list="true"]) .arena-hand-strip { padding-block: .23rem .21rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot { flex-basis: 4.72rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card { height: 5.05rem; grid-template-rows: .72rem minmax(0,1fr) auto; transform: none; }
  .hand-card-caption { min-height: 1.35rem; padding: .13rem .12rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { -webkit-line-clamp: 2; font-size: .60rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-kind { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hand-swipe { display: flex; }
  .arena .hand-shelf:not([data-list="true"]) .arena-hand-strip { gap: .31rem; padding: .31rem .29rem .26rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot { flex-basis: 5.30rem; margin: 0; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card { height: auto; min-height: 5.37rem; grid-template-rows: .73rem 2.65rem auto; transform: none; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { display: block; overflow: visible; font: 760 .65rem/1.08 var(--arena-ui); }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-kind { display: none; }
  .hand-card-caption { min-height: 1.47rem; padding: .14rem .12rem; }
}
body[data-text="large"] .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { font-size: .76rem; }
body[data-motion="true"] .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card:is(:hover,:focus-visible),
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card { transform: none; transition: none; }
}
@media (forced-colors: active) {
  .arena .hand-shelf .hand-card:focus-visible { outline-color: Highlight; }
}

@media (min-width: 1080px) and (min-height: 641px) {
  .arena .hand-shelf .hand-heading {
    grid-template-columns: minmax(0,1fr) auto auto;
    border: 0;
    gap: .5rem;
    min-height: 2.75rem;
  }
  .arena .hand-shelf .arena-hand-label h2 { font-size: .83rem; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot { flex-basis: clamp(6.3rem,8.2vw,8.6rem); }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card {
    height: clamp(7.4rem,16.2dvh,9.55rem);
    grid-template-rows: 1.02rem minmax(0,1fr) auto;
  }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { font-size: .8rem; }
  .hand-card-crest > span { font-size: .59rem; }
}
@media (max-width: 780px) and (orientation: portrait) {
  .arena[data-combat-stage] .hand-shelf .hand-heading { border-top-color: #aa8b555c; }
  .arena .hand-shelf:not([data-list="true"]) .arena-hand-strip { justify-content: start; }
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { font-size: .72rem; }
}
@media (max-width: 380px) and (max-height: 650px) and (orientation: portrait) {
  .arena .hand-shelf:not([data-list="true"]) .hand-slot .hand-card .card-name { font-size: .66rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .arena[data-combat-stage] .hand-shelf .hand-swipe,
  .arena[data-combat-stage] .hand-shelf .hand-kit span { display: none; }
  .arena[data-combat-stage] .hand-shelf .hand-heading { grid-template-columns: minmax(0,1fr) auto; }
  .arena[data-combat-stage] .hand-shelf .hand-kit { grid-column: 2; }
  .arena[data-combat-stage] .hand-shelf:not([data-list="true"]) .arena-hand-strip {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,5rem),1fr));
    align-content: start;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scroll-snap-type: none;
  }
}

.arena .hand-shelf .arena-kit-controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .3rem; }
@media (max-height: 520px) and (orientation: landscape) {
  .arena[data-combat-stage] .hand-shelf .arena-kit-controls { grid-column: 2; }
}
.arena .hand-shelf .gear-pin {
  min-height: 48px;
  padding-inline: .55rem;
  border-color: #ae906456;
  background: #182226;
  color: var(--arena-paper);
  font-size: .72rem;
}
.arena .hand-shelf .gear-pin[aria-pressed="true"] { border-color: var(--arena-ice); color: var(--arena-ice); }
.arena .hand-shelf .gear-pin:hover { border-color: var(--arena-ice); }