@font-face {
  font-family: StarterHeading;
  src: url("fonts/Jersey10-Regular.d6941bdb94bd.ttf") format('truetype');
  font-display: swap;
}
/* Starter lab: supplied scenery and isolated transparent sprite atlases. */
.type-badge {
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}
.type-badge img {
  width: 64px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
.pk-intro {
  padding: 14px 0 17px;
}
.pk-intro h1 {
  font-family: StarterHeading, 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.35;
  letter-spacing: 1px;
  color: #fff;
  text-shadow:
    2px 2px 0 #393c8c,
    0 3px 0 #06152c;
  margin: 8px 0 3px;
}
.pk-intro p {
  font-size: 15px;
  color: #c4def7;
  margin: 0 0 14px;
}
.pk-intro-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.pk-level-note {
  padding: 9px 12px;
  border: 1px solid #8dbce4;
  background: #061c3bc9;
  font-size: 11px;
  color: #dcecff;
}
.pk-intro-tools .pk-how {
  padding: 10px 18px;
  color: #fff;
  border: 2px solid #f6d76d;
  background: linear-gradient(#163c69, #081b37);
  letter-spacing: 1.7px;
  font-weight: 900;
}
.pk-grid .pk-card {
  border: 0;
  padding: 12px;
  gap: 7px;
  isolation: isolate;
  background:
    linear-gradient(transparent 25%, #031429ee 72%),
    var(--pk-background) center var(--pk-art-y, center) / auto var(--pk-art-height, 100%) no-repeat;
  background-color: #06162b;
  box-shadow: none;
}
.pk-grid .pk-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 12px solid transparent;
  border-image: var(--pk-frame) 105 / 12px / 0 stretch;
}
.pk-grass {
  --pk-background: url("ui/starters/background-grass.230b24e3bad2.png");
  --pk-art-height: 300px;
  --pk-art-y: 0px;
  --pk-frame: url("ui/starters/frame-grass.a66fdfa0b561.png");
  --pk-effect: url("ui/starters/leaf.cba848334864.png");
}
.pk-fire {
  --pk-background: url("ui/starters/background-fire.19a2f4e428bc.png");
  --pk-art-height: 300px;
  --pk-art-y: -12px;
  --pk-frame: url("ui/starters/frame-fire.2a9cfe65895d.png");
  --pk-effect: url("ui/starters/ember.7ee7a3e90f9e.png");
}
.pk-water {
  --pk-background: url("ui/starters/background-water.f257f7d01fea.png");
  --pk-art-height: 360px;
  --pk-art-y: -55px;
  --pk-frame: url("ui/starters/frame-water.9eca0a37bfe4.png");
  --pk-effect: url("ui/starters/bubble.3f74308d17eb.png");
}
.pk-card .pk-top {
  align-self: stretch;
  font-size: 10px;
  position: relative;
  z-index: 2;
}
.pk-card .pk-top > span {
  background: #041325bd;
  padding: 4px 6px;
  border-radius: 3px;
}
.pk-card .pk-top > b {
  padding: 4px 8px;
}
.pk-grid .pk-card .pk-portrait {
  height: 120px;
  width: 100%;
}
.pk-grid .pk-card .pk-portrait .pk-anim {
  bottom: 4px;
}
.pk-card .pk-halo {
  display: none;
}
.pk-card .pk-info {
  align-self: stretch;
  position: relative;
  z-index: 2;
  gap: 8px;
}
.pk-card .pk-info h2 {
  color: #fff;
  text-shadow: 2px 2px 0 #071321;
  font-size: 20px;
}
.pk-card .pk-types {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.pk-card .type-badge img {
  width: 73px;
  height: 25px;
}
.pk-card .pk-stats {
  background: #031328e8;
  border: 1px solid var(--pk-edge);
  padding: 9px;
  gap: 4px;
}
.pk-card .pk-stats small {
  font-size: 10px;
}
.pk-card .pk-stats i {
  height: 7px;
}
.pk-grid .pk-go-wrap .btn.pk-go,
.pkc-go .btn.pk-go {
  font-size: 12px;
  min-height: 42px;
  letter-spacing: 0;
  gap: 8px;
}
.pk-scene::before,
.pk-scene::after,
.pk-scene b {
  display: none;
}
.pk-card .pk-scene .pk-particle {
  left: var(--x);
  top: var(--y);
  width: 23px;
  height: 23px;
  background-image: var(--pk-effect);
  background-size: 400% 200%;
  border: 0;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  opacity: 0.8;
  transform: none;
  animation:
    pk-atlas var(--cycle, 1.2s) steps(1) infinite,
    pk-drift var(--drift, 7s) linear infinite;
  animation-delay: var(--dl);
}
@keyframes pk-atlas {
  0% {
    background-position: 0 0;
  }
  12.5% {
    background-position: 33.333% 0;
  }
  25% {
    background-position: 66.667% 0;
  }
  37.5% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 100%;
  }
  62.5% {
    background-position: 33.333% 100%;
  }
  75% {
    background-position: 66.667% 100%;
  }
  87.5% {
    background-position: 100% 100%;
  }
}
@keyframes pk-drift {
  from {
    translate: 0 35px;
    opacity: 0;
  }
  15%,
  80% {
    opacity: 0.75;
  }
  to {
    translate: var(--sway, 8px) -40px;
    opacity: 0;
  }
}
.pk-extra .pk-tips {
  padding-left: 83px;
  min-height: 132px;
  border-color: #c4ad69;
  background: linear-gradient(115deg, #123455, #06182e);
}
.pkt-oak {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 77px;
  height: 112px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
}
.pk-tips .pkt-body {
  padding: 7px;
}
.pk-tips .pkt-body p {
  font-size: 11px;
}
@media (max-width: 760px) {
  .pk-intro h1 {
    font-size: 34px;
  }
  .pk-intro-tools {
    gap: 8px;
    flex-wrap: wrap;
  }
  .pk-grid .pk-card {
    padding: 9px;
  }
  .pk-grid .pk-card .pk-portrait {
    height: 115px;
  }
  .pk-card .pk-info h2 {
    font-size: 17px;
  }
  .pk-card .type-badge img {
    width: 60px;
    height: 20px;
  }
  .pk-card .pk-stats {
    padding: 6px;
  }
  .pk-grid .pk-go-wrap .btn.pk-go {
    font-size: 10px;
  }
}
@media (max-width: 520px) {
  .pk-grid .pk-card .pk-portrait {
    height: 120px;
  }
  .pk-intro {
    padding-top: 27px;
  }
  .pk-intro p {
    font-size: 12px;
  }
  .pk-level-note {
    font-size: 10px;
  }
  .pk-extra .pk-tips {
    min-height: 140px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pk-card .pk-scene .pk-particle {
    animation: none;
    opacity: 0.6;
  }
}

/* v151: closer lab proportions and speech contained above Oak's portrait. */
.pk-intro .eyebrow {
  font-size: 10px;
  letter-spacing: 2.7px;
}
.pk-intro-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  align-items: center;
}
.pk-level-note {
  text-align: center;
  position: relative;
  padding: 9px 15px;
  clip-path: polygon(
    7px 0,
    calc(100% - 7px) 0,
    100% 7px,
    100% calc(100% - 7px),
    calc(100% - 7px) 100%,
    7px 100%,
    0 calc(100% - 7px),
    0 7px
  );
  border: 2px solid #9ec7ed;
  box-shadow: inset 0 0 0 2px #10264e;
  background: #081d43;
  line-height: 1.35;
  font-size: 10px;
}
.pk-intro-tools .btn.pk-how {
  font-size: 10px;
  min-height: 32px;
  padding: 6px 12px;
  letter-spacing: 1.2px;
  border: 2px solid #f2d76b;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px #0a1930,
    0 2px 0 #59471c;
  background: linear-gradient(#143767, #081d43);
  clip-path: polygon(
    5px 0,
    calc(100% - 5px) 0,
    100% 5px,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    5px 100%,
    0 calc(100% - 5px),
    0 5px
  );
}
.pk-card .pk-top > span {
  border-radius: 6px;
}
.pk-card .pk-top > b {
  border-radius: 6px;
  border: 2px solid #0b1421;
  padding: 3px 7px;
  box-shadow: inset 0 1px 0 #ffffff45;
  color: #101a21;
}
.pk-card .pk-stats {
  border-radius: 7px;
  gap: 4px;
}
.pk-card .pk-stats span {
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 9px;
}
.pk-card .pk-stats small {
  font-size: 8px;
  letter-spacing: 0.2px;
}
.pk-grid .pk-go-wrap .btn.pk-go,
.pkc-go .btn.pk-go {
  justify-content: center;
  padding: 7px 13px;
  font-size: 10px;
  font-weight: 1000;
  gap: 8px;
  min-height: 38px;
  text-shadow:
    0.25px 0 currentColor,
    -0.25px 0 currentColor;
}
.pk-go-wrap .btn.pk-go > span:first-child {
  flex: 0 1 auto;
  text-align: center;
  min-width: 0;
}
.pk-go-wrap .btn.pk-go > .chev {
  position: static;
  flex: 0 0 auto;
  margin: 0 4px 0 0;
  transform: scale(0.8);
  transform-origin: center;
}
.pk-extra .pk-tips {
  padding: 8px 10px 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}
.pk-tips > header {
  justify-content: center;
  position: relative;
  z-index: 2;
  text-align: center;
}
.pk-tips .pkt-body {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  gap: 8px;
  justify-content: flex-start;
}
.pk-tips .pkt-body p {
  position: relative;
  border: 1px solid #719bc2;
  border-radius: 9px;
  padding: 8px 10px;
  background: #08203e;
  line-height: 1.35;
  font-size: 10px;
  text-align: center;
  box-shadow: 0 2px 0 #020d20;
}
.pk-tips .pkt-professor {
  position: relative;
  flex: 0 0 90px;
  height: 90px;
  overflow: hidden;
  width: 100%;
  margin-top: 0;
}
.pk-tips .pkt-professor .pkt-oak {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: auto;
  translate: -50% 0;
  width: 205px;
  height: 185px;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
@media (max-width: 520px) {
  .pk-intro-tools {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .pk-level-note {
    max-width: 100%;
  }
  .pk-grid .pk-go-wrap .btn.pk-go {
    font-size: 11px;
  }
  .pk-extra .pk-tips {
    min-height: 0;
  }
  .pk-tips .pkt-oak {
    width: 230px;
    height: 205px;
    bottom: -70px;
  }
  .pk-tips .pkt-body p {
    font-size: 11px;
  }
}

/* v152: centered label independently of the trailing chevrons. */
.pk-grid .pk-go-wrap .btn.pk-go,
.pkc-go .btn.pk-go {
  font-size: 11px;
  font-weight: 1000;
  text-shadow:
    0.4px 0 currentColor,
    -0.4px 0 currentColor;
  gap: 5px;
  padding-inline: 10px;
}
.pk-go-wrap .btn.pk-go > span:first-child {
  flex: 1;
  text-align: center;
}
.pk-go-wrap .btn.pk-go > .chev {
  margin-right: 3px;
  flex-basis: 22px;
}
.pk-extra .pk-tips {
  gap: 5px;
}
.pk-tips .pkt-body p::after {
  content: none;
}
@media (max-width: 520px) {
  .pk-tips .pkt-professor {
    height: 100px;
    flex-basis: 100px;
  }
  .pk-tips .pkt-professor .pkt-oak {
    width: 220px;
    height: 195px;
    top: 0;
    bottom: auto;
  }
}

.pk-grid .pk-go-wrap .btn.pk-go,
.pkc-go .btn.pk-go {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  column-gap: 3px;
}
.pk-go-wrap .btn.pk-go > span:first-child {
  grid-column: 2;
  grid-row: 1;
}
.pk-go-wrap .btn.pk-go > .chev {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  justify-self: center;
}

/* Compact level plate and denser ambient sprites. */
.pk-intro-tools {
  grid-template-columns: minmax(0, 365px) auto;
  max-width: 480px;
  justify-content: center;
}
.pk-level-note {
  clip-path: none;
  border-radius: 7px;
  padding: 8px 12px;
  border: 1px solid #a4cbea;
  box-shadow:
    inset 0 0 0 2px #0c2c53,
    0 2px 0 #020d22;
}
.pk-card .pk-scene .pk-particle {
  width: 28px;
  height: 28px;
  opacity: 0.9;
}
@media (max-width: 520px) {
  .pk-intro-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .pk-card .pk-scene .pk-particle {
    width: 30px;
    height: 30px;
  }
}

.pk-intro {
  padding: 8px 0 5px;
}
.pk-intro h1 {
  margin: 3px 0 1px;
  line-height: 1.08;
}
.pk-intro p {
  margin: 3px 0 8px;
  line-height: 1.25;
}
.pk-intro-tools {
  margin-bottom: 0;
}
.pk-intro + .pk-grid {
  margin-top: 8px;
}
@media (max-width: 520px) {
  .pk-intro {
    padding-top: 25px;
    padding-bottom: 4px;
  }
  .pk-intro h1 {
    line-height: 1.12;
  }
}

.pk-grid .pk-go-wrap .btn.pk-go,
.pkc-go .btn.pk-go {
  grid-template-columns: 14px minmax(0, 1fr) 14px;
  padding-inline: 10px;
}
.pk-go-wrap .btn.pk-go > span:first-child {
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.pk-go-wrap .btn.pk-go > .chev {
  transform: scale(0.7);
}

/* Updated portrait scenes: anchor the clearing/platform to the partner's feet. */
.pk-grid .pk-grass,
.pk-grid .pk-fire {
  background: #06162b;
}
.pk-card .pk-scene .pk-scenery {
  position: absolute;
  left: 0;
  top: 151px;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(-58%);
  image-rendering: pixelated;
}
.pk-fire .pk-scene .pk-scenery {
  transform: translateY(-60%);
}
.pk-grass .pk-scene::after,
.pk-fire .pk-scene::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 37%, #03142990 56%, #031429ed 76%);
  animation: none;
  opacity: 1;
  transform: none;
}
.pk-card .pk-scene .pk-particle {
  z-index: 1;
}
.pk-tips .pkt-body p {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 2px 4px;
  margin: 0;
}
.pk-extra .pk-tips {
  gap: 2px;
}
.pk-tips .pkt-professor {
  flex-basis: 94px;
  height: 94px;
}
.pk-tips .pkt-professor .pkt-oak {
  width: 135px;
  height: 123px;
  object-fit: contain;
  top: 0;
}
.pk-go-wrap .btn.pk-go > .pk-menu-arrow {
  grid-column: 3;
  grid-row: 1;
  font:
    normal 27px/18px 'Trebuchet MS',
    sans-serif;
  color: #fff;
  justify-self: center;
  text-shadow: none;
  position: relative;
  z-index: 2;
}
.pk-intro-tools {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 100%;
  padding: 0 106px;
}
.pk-level-note {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 9px 13px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  isolation: isolate;
}
.pk-level-note::before,
.pk-level-note::after {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px),
    0 6px
  );
}
.pk-level-note::before {
  inset: 0;
  background: linear-gradient(#fff, #b7cde8);
}
.pk-level-note::after {
  inset: 2px;
  background: linear-gradient(#173f6a, #092448 58%, #06172e);
  box-shadow: inset 0 2px 0 #5685b3;
}
.pk-intro-tools .pk-how {
  position: absolute;
  left: calc(50% + 173px);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .pk-intro-tools {
    padding: 0;
    flex-wrap: wrap;
  }
  .pk-intro-tools .pk-how {
    position: static;
  }
}
@media (max-width: 520px) {
  .pk-intro-tools {
    flex-direction: column;
  }
  .pk-tips .pkt-professor .pkt-oak {
    width: 135px;
    height: 123px;
  }
}

.pk-tips .pkt-professor .pkt-oak {
  height: 94px;
  object-fit: contain;
}
.pk-go-wrap .btn.pk-go > .pk-menu-arrow {
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}

/* v154: lighter control outlines and smaller partner cards. */
.pk-level-note::after {
  inset: 1px;
  box-shadow: inset 0 1px 0 #426a91;
}
.pk-intro-tools .btn.pk-how {
  --lip-a: #ffe877;
  --lip-b: #bd9028;
  border-color: #f5d56b;
}
.pk-intro-tools .btn.pk-how::before {
  background: linear-gradient(#ffe877, #bd9028);
}
.pk-grid .pk-card .pk-portrait {
  height: 102px;
}
.pk-grid .pk-card .pk-portrait .pk-anim {
  transform: translateX(-50%) scale(0.9);
  transform-origin: center bottom;
}
.pk-card .pk-scene .pk-scenery {
  top: 133px;
}
.pk-water {
  --pk-art-y: -73px;
}
.pk-tips .pkt-professor .pkt-oak {
  width: 185px;
  height: 170px;
  object-fit: contain;
  top: 0;
}
@media (max-width: 760px) {
  .pk-grid .pk-card .pk-portrait {
    height: 97px;
  }
  .pk-card .pk-scene .pk-scenery {
    top: 128px;
  }
  .pk-water {
    --pk-art-y: -78px;
  }
}
@media (max-width: 520px) {
  .pk-grid .pk-card .pk-portrait {
    height: 102px;
  }
  .pk-card .pk-scene .pk-scenery {
    top: 133px;
  }
  .pk-water {
    --pk-art-y: -73px;
  }
}

/* Approved background treatment for every starter region. */
.pk-card .pk-scenery {
  filter: blur(1px) grayscale(0.42) saturate(0.75) brightness(0.9);
}
.pk-grid .pk-card.pk-water {
  background: #06162b;
}
.pk-card.pk-water .pk-scenery {
  transform: translateY(-56%);
}
.pk-card.pk-water .pk-scene::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 37%, #03142990 56%, #031429ed 76%);
  animation: none;
  opacity: 1;
  transform: none;
}
.pk-tips .pkt-professor {
  margin-top: -5px;
}
.pk-tips .pkt-professor .pkt-oak {
  width: 170px;
  height: 156px;
  top: -3px;
}
.pk-level-note {
  color: #ffdc70;
  background: transparent;
  padding: 5px 0;
  border: 0;
  box-shadow: none;
}
.pk-level-note::before,
.pk-level-note::after {
  display: none;
}

/* Larger original type labels on starter cards. */
.pk-card .pk-types .type-logo {
  grid-template-columns: 13px auto;
  min-height: 21px;
  padding: 2px 5px 2px 3px;
  gap: 4px;
}
.pk-card .pk-types .type-logo img {
  width: 13px !important;
  height: 13px !important;
}
.pk-card .pk-types .type-logo strong {
  font-size: 9px;
  letter-spacing: 0.1px;
}

/* Header now keeps only the centered tutorial action. */
.pk-intro-tools {
  padding: 0;
  justify-content: center;
}
.pk-intro-tools .pk-how {
  position: static;
}

/* Approved A: natural particles stay behind the crisp partner and interface. */
.pk-card .pk-scene {
  z-index: 0;
}
.pk-card .pk-scene .pk-natural-fx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}

.pk-card .pk-types .type-logo {
  border-radius: 5px;
  overflow: hidden;
}
.pk-tips .pkt-professor .pkt-oak {
  width: 153px;
  height: 140px;
}
/* Explicit stable silhouette: the generic button hover must not change this frame. */
.site-theme .pk-intro-tools .btn.pk-how,
.site-theme .pk-intro-tools .btn.pk-how:is(:hover, :focus-visible) {
  clip-path: polygon(
    5px 0,
    calc(100% - 5px) 0,
    100% 5px,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    5px 100%,
    0 calc(100% - 5px),
    0 5px
  ) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(#ffe877, #bd9028) !important;
  box-shadow: none !important;
  isolation: isolate;
}
.site-theme .pk-intro-tools .btn.pk-how::before {
  inset: 1px;
  clip-path: inherit;
  background: linear-gradient(#173f69, #092345);
  z-index: -1;
}
.site-theme .pk-intro-tools .btn.pk-how::after {
  display: none;
}

/* Reuse the encounter-card type badge rather than a separate starter logo style. */
.pk-card .pk-types .type {
  font-size: 9px;
  padding: 3px 6px;
  line-height: 12px;
  gap: 4px;
}
.pk-card .pk-types .type-sprite {
  width: 13px;
  height: 13px;
}

/* Let each badge's own background color continue through its border. */
.pk-card .pk-types .type {
  border-color: transparent;
  background-clip: border-box;
  box-shadow: none;
}

/* Borders match the dominant fill of each type icon circle. */
.pk-card .pk-types .type.bug {
  border-color: #90c12c;
}
.pk-card .pk-types .type.dark {
  border-color: #5a5366;
}
.pk-card .pk-types .type.dragon {
  border-color: #0a6dc4;
}
.pk-card .pk-types .type.electric {
  border-color: #f3d23b;
}
.pk-card .pk-types .type.fairy {
  border-color: #ec8fe6;
}
.pk-card .pk-types .type.fighting {
  border-color: #ce4069;
}
.pk-card .pk-types .type.fire {
  border-color: #ff9c54;
}
.pk-card .pk-types .type.flying {
  border-color: #8fa8dd;
}
.pk-card .pk-types .type.ghost {
  border-color: #5269ac;
}
.pk-card .pk-types .type.grass {
  border-color: #63bb5b;
}
.pk-card .pk-types .type.ground {
  border-color: #d97746;
}
.pk-card .pk-types .type.ice {
  border-color: #74cec0;
}
.pk-card .pk-types .type.normal {
  border-color: #9099a1;
}
.pk-card .pk-types .type.poison {
  border-color: #ab6ac8;
}
.pk-card .pk-types .type.psychic {
  border-color: #f97176;
}
.pk-card .pk-types .type.rock {
  border-color: #c7b78b;
}
.pk-card .pk-types .type.steel {
  border-color: #5a8ea1;
}
.pk-card .pk-types .type.water {
  border-color: #4d90d5;
}

/* Standalone tutorial control: no shared .btn layers or negative stacking. */
.site-theme .pk-intro-tools .pk-how {
  display: inline-block;
  position: relative;
  isolation: isolate;
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 1px;
  min-height: 0;
  width: auto;
  cursor: pointer;
  margin: 0;
  color: #fff;
  background: linear-gradient(#ffe88c, #d2a142);
  clip-path: polygon(
    5px 0,
    calc(100% - 5px) 0,
    100% 5px,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    5px 100%,
    0 calc(100% - 5px),
    0 5px
  );
  box-shadow: none;
  transform: none;
  transition: filter 0.12s;
}
.site-theme .pk-how .pk-how-face {
  display: block;
  padding: 4px 10px;
  background: linear-gradient(#173f68, #0a203b);
  clip-path: polygon(
    4px 0,
    calc(100% - 4px) 0,
    100% 4px,
    100% calc(100% - 4px),
    calc(100% - 4px) 100%,
    4px 100%,
    0 calc(100% - 4px),
    0 4px
  );
  font-size: 9px;
  line-height: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: inset 0 1px 0 #446789;
}
.site-theme .pk-intro-tools .pk-how::before,
.site-theme .pk-intro-tools .pk-how::after {
  content: none !important;
  display: none !important;
}
.site-theme .pk-intro-tools .pk-how:hover {
  filter: brightness(1.12);
  transform: none;
}
.site-theme .pk-intro-tools .pk-how:focus-visible .pk-how-face {
  box-shadow: inset 0 0 0 2px #ffe28a;
}

.site-theme .pk-intro-tools .pk-how {
  inset: auto;
}

/* Keep the compact tutorial control close to the starter cards. */
.pk-intro {
  padding-bottom: 0;
}
.pk-intro + .pk-grid {
  margin-top: 4px;
}

/* Bring the subtitle up to the heading without moving the tutorial into it. */
.pk-intro p {
  margin-top: -4px;
}

/* Match the encounter Spin label without changing the starter button frame. */
.site-theme .pk-grid .pk-go-wrap .btn.pk-go {
  container-type: inline-size;
}
.site-theme .pk-grid .pk-go-wrap .btn.pk-go > span:first-child {
  font:
    900 clamp(11px, 6.5cqw, 16px)/1 'Trebuchet MS',
    Arial,
    sans-serif !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0.28px currentColor;
}