/* One usable card, with neighbouring slate cards following a shallow arc. */
.game-shell { --mobile-skills-height: 184px; --fan-card-height: 150px; }
.game-shell > .skills-grid.oak-skills.skill-fan {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: clip;
  padding: 0;
  touch-action: pan-y;
  user-select: none;
}
.skill-fan .oak-card {
  position: absolute;
  top: 8px;
  left: 50%;
  width: min(248px, 62.5%);
  height: var(--fan-card-height);
  transform: translateX(calc(-50% + var(--fan-x, 0px))) translateY(var(--fan-y, 0px)) rotate(var(--fan-angle, 0deg)) scale(var(--fan-scale, 1));
  transform-origin: 50% 100%;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 200ms ease-out;
  cursor: pointer;
}
.skill-fan.is-dragging .oak-card, .skill-fan.is-setting .oak-card { transition: none; }
.skill-fan .oak-card.is-active { cursor: default; }
.skill-fan .oak-card:not(.is-active) .oak-upgrade { pointer-events: none; }
.skill-fan .oak-content {
  --fan-description-row: 15px;
  grid-template-columns: minmax(0, 33fr) minmax(0, 67fr);
  grid-template-rows: 27px var(--fan-description-row) minmax(0, 1fr) 44px;
  grid-template-areas: 'medallion title' 'medallion description' 'medallion effect' 'upgrade upgrade';
  padding: 20px 15px 11px;
  gap: 1px 7px;
}
.skill-fan .oak-title { font-size: 18px; line-height: 23px; text-align: left; align-self: start; }
.skill-fan .oak-label { font-size: 13px; line-height: 1.12; align-self: start; }
.skill-fan .oak-effect { font-size: 18px; line-height: 1; gap: 3px; }
.skill-fan .oak-medallion { width: min(100%, 70px); }
.skill-fan .oak-upgrade-face { font-size: 18px; }
.skill-fan .oak-card:focus-visible { outline-offset: -3px; }
.guide-layer.is-skill-selecting { opacity: 0; }
.guide-layer { transition: opacity 140ms ease-out; }
@media (max-height: 700px) {
  .game-shell { --mobile-skills-height: 168px; --fan-card-height: 136px; }
  .skill-fan .oak-content { padding-block: 16px 7px; grid-template-rows: 25px var(--fan-description-row) minmax(0, 1fr) 44px; }
  .skill-fan .oak-title { font-size: 17px; line-height: 21px; }
  .skill-fan .oak-effect { font-size: 17px; }
  .skill-fan .oak-medallion { width: min(100%, 58px); }
}
@media (max-width: 359px) {
  .skill-fan .oak-title { font-size: 15px; }
  .skill-fan .oak-label { font-size: 11px; }
  .skill-fan .oak-effect { font-size: 15px; }
  .skill-fan .oak-content { --fan-description-row: 13px; padding-inline: 12px; gap: 1px 5px; }
}
@media (max-height: 600px) {
  .game-shell { --mobile-skills-height: 156px; --fan-card-height: 124px; }
  .skill-fan .oak-content { padding-block: 14px 5px; grid-template-rows: 23px var(--fan-description-row) minmax(0, 1fr) 44px; }
  .skill-fan .oak-title { line-height: 19px; }
  .skill-fan .oak-medallion { width: min(100%, 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .skill-fan .oak-card { transition: opacity 100ms ease-out; }
  .guide-layer { transition: none; }
}