:root {
  --cyan: #43e5d1;
  --coral: #ff6285;
  --gold: #ffcb49;
  --rounded-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86.6'%3E%3Cpath fill='%23000' d='M26 1h48c3 0 5 1 7 4l18 34c1.4 2.7 1.4 5.9 0 8.6L81 81.6c-2 3-4 4-7 4H26c-3 0-5-1-7-4L1 47.6c-1.4-2.7-1.4-5.9 0-8.6L19 5c2-3 4-4 7-4Z'/%3E%3C/svg%3E");
}
.hero-copy .endless-action {
  margin-top: 10px;
  background: linear-gradient(135deg, #1b6d78, #24508c);
  box-shadow: 0 10px 24px #165c753d;
}
.battle-canvas > .modal {
  z-index: 200;
}
.wp-shell-return b {
  display: none !important;
}
.hexa-live {
  grid-template-rows: 62px 72px minmax(0, 1fr) 34px;
}
.objective-row {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  gap: 2px 10px;
}
.objective-rule {
  grid-column: 1 / -1;
  color: #d7f7ff;
  font-size: clamp(.7rem, 1.8vw, .86rem);
  line-height: 1.25;
}
.help-objective-rule {
  padding: 9px 11px;
  border: 1px solid #55d7e080;
  border-radius: 10px;
  background: #123b4e;
  color: #e8fbff;
  font-weight: 800;
}
.hexa-play {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 52px 116px;
  gap: 5px;
}
.hexa-board-track {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}
.hex-board {
  width: min(100cqw, 100cqh, 570px);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 49%, #183c4b8f 0 26%, #0a142400 68%);
}
.hex-cell {
  position: absolute;
  left: calc(50% + var(--q) * 16.1%);
  top: calc(50% + (var(--r) + var(--q) * 0.5) * 17.55%);
  width: 18.35%;
  aspect-ratio: 1.16;
  transform: translate(-50%, -50%);
  border: 0;
  z-index: var(--depth, 1);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  overflow: visible;
  --cell-rim: #31576a;
  --cell-face: #193245;
}
.hex-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask: var(--rounded-hex) center / 100% 100% no-repeat;
  mask: var(--rounded-hex) center / 100% 100% no-repeat;
  background:
    linear-gradient(150deg, #ffffff38 0 4%, transparent 5% 76%, #0209128c 77%),
    linear-gradient(145deg, var(--cell-rim), var(--cell-face) 13% 75%, #071521 76%);
  filter: drop-shadow(0 3px 2px #020712c7);
}
.hex-cell.selectable {
  --cell-rim: #4e8294;
}
.hex-cell.blocked {
  --cell-rim: #755369;
  --cell-face: #493344;
}
.hex-cell.stone {
  --cell-rim: #8792a4;
  --cell-face: #596474;
}
.hex-cell.frozen {
  filter: saturate(0.55);
  --cell-rim: #8eeeff;
}
.hex-cell.frozen::after {
  content: "\2744";
  position: absolute;
  z-index: 7;
  right: 4%;
  top: 4%;
  width: 27%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dffaffee;
  color: #197da8;
  font-size: clamp(.58rem, 2.2vw, 1rem);
  box-shadow: 0 0 10px #8eeeff;
}
.hex-cell.chained {
  --cell-rim: #e2b45f;
}
.hex-cell.gem::after {
  content: "\25C6";
  position: absolute;
  z-index: 7;
  right: 4%;
  top: 4%;
  width: 29%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #33206ee8;
  color: #ffe56b;
  font-size: clamp(.58rem, 2.2vw, 1rem);
  text-shadow: 0 0 7px #fff;
  box-shadow: 0 0 0 2px #ffe56b, 0 0 13px #b86cff;
}
.hex-cell.gem { --cell-rim: #ffe56b; --cell-face: #35265e; }
.hex-cell.thawing { animation: thawIce .46s ease-out both; }
.hex-cell.gem-collected::after { animation: collectGem .46s ease-out both; }
.hex-cell.selected-preview {
  filter: brightness(1.35);
}
.hex-cell.drop-target {
  --cell-rim: #d7fbff;
  --cell-face: #28566a;
}
.hex-cell.merge-ready {
  --cell-rim: #8ff5ff;
  --cell-face: #24647a;
}
.hex-cell.coach-target::after,
.tray-stack.coach-choice::after {
  content: "2";
  position: absolute;
  z-index: 8;
  right: -5px;
  top: -8px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffcb49;
  color: #291750;
  font-weight: 1000;
  box-shadow: 0 3px 10px #0008;
}
.tray-stack.coach-choice::after {
  content: "1";
  right: 5px;
  top: 5px;
}
.chip-stack {
  position: absolute;
  inset: -4% 0 3%;
  display: grid;
  place-items: center;
  z-index: 2;
  filter: drop-shadow(0 7px 5px #020611a8);
}
.chip {
  position: absolute;
  left: 4%;
  bottom: calc(6% + var(--layer) * 4.5px);
  width: 92%;
  height: auto;
  aspect-ratio: 100 / 86.6;
  -webkit-mask: var(--rounded-hex) center / 100% 100% no-repeat;
  mask: var(--rounded-hex) center / 100% 100% no-repeat;
  background:
    linear-gradient(150deg, #ffffffb0 0 4%, transparent 5% 77%, #0000005c 78%),
    linear-gradient(145deg, color-mix(in srgb, var(--chip), white 43%), var(--chip) 19% 70%, color-mix(in srgb, var(--chip), black 42%));
  box-shadow:
    inset 0 2px #ffffffc4,
    inset 0 -6px color-mix(in srgb, var(--chip), black 48%),
    inset 0 -9px #ffffff22,
    0 3px 0 color-mix(in srgb, var(--chip), black 42%),
    0 5px 7px #000b;
  transition: opacity 90ms ease, transform 130ms ease;
}
.chip::before {
  content: "";
  position: absolute;
  inset: 7% 8% 18%;
  -webkit-mask: var(--rounded-hex) center / 100% 100% no-repeat;
  mask: var(--rounded-hex) center / 100% 100% no-repeat;
  background:
    repeating-linear-gradient(155deg, #ffffff16 0 2px, transparent 2px 9px),
    linear-gradient(150deg, #ffffff57, transparent 42% 78%, #00000024);
  pointer-events: none;
}
.chip::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 6%;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chip), white 36%);
  box-shadow: 0 2px color-mix(in srgb, var(--chip), black 48%);
  pointer-events: none;
}
.chip.top-chip {
  filter: brightness(1.08) saturate(1.08) drop-shadow(0 1px 0 #ffffffd8) drop-shadow(0 0 2px #ffffff66);
  box-shadow:
    inset 0 4px #ffffffa8,
    inset 0 -8px color-mix(in srgb, var(--chip), black 42%),
    inset 0 -11px #ffffff30,
    0 3px 0 color-mix(in srgb, var(--chip), black 34%),
    0 7px 10px #000b;
}
.chip.special {
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}
.stack-count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.stack-tray {
  width: min(88%, 600px);
  height: 120px;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 11px 14px 7px;
  border: 3px solid #48788d;
  border-bottom-color: #183345;
  border-radius: 22px 22px 13px 13px;
  background:
    linear-gradient(180deg, #31647a 0 6%, #1a4358 7% 78%, #0b2436 79%),
    #12364a;
  box-shadow: inset 0 2px #baf9ff42, inset 0 -7px #0616218c, 0 9px 18px #02071285;
}
.hexa-coach {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 12px;
  border: 1px solid #4d8ba0;
  border-radius: 13px;
  background: linear-gradient(90deg, #17465a, #12354a);
  color: #fff;
  font-size: clamp(0.76rem, 2.7vw, 0.94rem);
  line-height: 1.15;
  text-align: center;
  position: relative;
  z-index: 20;
  overflow: visible;
}
.hexa-coach b {
  flex: 0 0 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffcb49;
  color: #291750;
  font-size: 0.82rem;
}
.hexa-coach span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hexa-coach span strong {
  font-size: 0.82rem;
  line-height: 1.05;
}
.hexa-coach span small {
  color: #8ff5ff;
  font-size: clamp(0.63rem, 2.15vw, 0.76rem);
  line-height: 1.05;
  font-weight: 900;
}
.tray-stack.coach-choice {
  outline: 3px solid #ffcb49;
  box-shadow: 0 0 18px #ffcb4988;
  animation: coachPulse 1.2s ease-in-out infinite;
}
#objectiveKind.has-goal-color::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-inline-end: 6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--goal-color);
  vertical-align: -0.05em;
  box-shadow: 0 1px 4px #0008;
}
.battle-help-steps {
  margin: 10px 0;
  padding-inline-start: 1.5rem;
  text-align: start;
  line-height: 1.45;
}
.battle-help-steps li + li {
  margin-top: 7px;
}
.tray-stack {
  height: 98px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  position: relative;
  color: #fff;
  box-shadow: none;
}
.tray-stack::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 23%;
  right: 23%;
  bottom: 9%;
  height: auto;
  aspect-ratio: 100 / 86.6;
  -webkit-mask: var(--rounded-hex) center / 100% 100% no-repeat;
  mask: var(--rounded-hex) center / 100% 100% no-repeat;
  background: #0a2a3da6;
}
.tray-stack.selected {
  outline: 0;
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 0 12px #7ff8ffad);
}
.tray-stack .chip-stack {
  inset: auto;
  left: 50%;
  bottom: 7%;
  width: min(64%, 86px);
  height: auto;
  aspect-ratio: 100 / 86.6;
  transform: translateX(-50%);
}
.tray-stack .chip {
  left: 2%;
  bottom: calc(3% + var(--layer) * 4.5px);
  width: 96%;
  height: auto;
  aspect-ratio: 100 / 86.6;
}
.chip-in-transit {
  z-index: 140 !important;
  pointer-events: none;
  filter: brightness(1.12) saturate(1.08);
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.chip-flight-layer {
  position: absolute;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  overflow: visible;
}
.chip-flight-layer .chip {
  z-index: 1;
  filter: brightness(1.3) saturate(1.12) drop-shadow(0 0 9px #ffffffb8);
}
.chip-settled {
  animation: landingGlow 0.14s ease-out;
}
.chip-clearing {
  z-index: 150 !important;
  animation: clearChip 0.52s cubic-bezier(.2,.72,.2,1) forwards;
}
.hex-cell.clear-burst::after {
  content: "✦";
  position: absolute;
  inset: -18%;
  z-index: 160;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff7b0;
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  text-shadow: 0 0 8px #fff, 0 0 20px #ffde57, 0 0 34px #52f4ff;
  pointer-events: none;
  animation: clearBurst 0.52s ease-out forwards;
}
.chip-revealed {
  animation: revealChip 0.28s ease-out both;
}
.merge-source {
  --cell-rim: #ffcf6b;
  animation: sourceGlow 0.72s ease-in-out infinite alternate;
}
.merge-target {
  --cell-rim: #8ff5ff;
  animation: targetGlow 0.72s ease-in-out infinite alternate;
}
.active-flight-source {
  filter: brightness(1.28) drop-shadow(0 0 8px #ffcf6ba8);
}
@keyframes sourceGlow {
  from { filter: brightness(1.04); }
  to { filter: brightness(1.24) drop-shadow(0 0 7px #ffcf6b80); }
}
@keyframes targetGlow {
  from { filter: brightness(1.08); }
  to { filter: brightness(1.3) drop-shadow(0 0 9px #8ff5ff9c); }
}
@keyframes landingGlow {
  from { filter: brightness(1.65); }
  to { filter: brightness(1); }
}
@keyframes clearChip {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  38% { opacity: 1; transform: translateY(-5px) scale(1.13); filter: brightness(2.4) saturate(1.35); }
  100% { opacity: 0; transform: translateY(-24px) scale(.46) rotate(12deg); filter: brightness(3); }
}
@keyframes clearBurst {
  0% { opacity: 0; transform: scale(.35) rotate(-18deg); }
  34% { opacity: 1; transform: scale(1.08) rotate(5deg); }
  100% { opacity: 0; transform: scale(1.65) rotate(18deg); }
}
@keyframes revealChip {
  from { filter: brightness(2.1) drop-shadow(0 0 13px #8ff5ff); }
  to { filter: brightness(1.08) drop-shadow(0 1px 0 #ffffffc0); }
}
@keyframes thawIce {
  45% { filter: brightness(1.8) saturate(.2) drop-shadow(0 0 16px #bff7ff); }
  100% { filter: brightness(1) saturate(1); }
}
@keyframes collectGem {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: translateY(-14px) scale(1.55) rotate(18deg); filter: brightness(2); }
  100% { opacity: 0; transform: translateY(-34px) scale(.55) rotate(40deg); }
}
@keyframes coachPulse {
  50% { filter: brightness(1.2); box-shadow: 0 0 24px #ffcb49bb; }
}
@media (max-width: 680px) {
  .hex-board {
    width: min(100cqw, 100cqh, 430px);
  }
  .hexa-play {
    grid-template-rows: minmax(0, 1fr) 52px 108px;
  }
  .stack-tray {
    width: min(94%, 600px);
    height: 106px;
  }
  .tray-stack {
    height: 85px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hexa-live {
    grid-template-columns: 154px minmax(0, 1fr) 230px;
    grid-template-rows: 58px minmax(0, 1fr) 34px;
  }
  .hexa-live .battle-header {
    grid-column: 1/-1;
  }
  .hexa-live .objective-row {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: grid;
  }
  .hexa-play {
    grid-column: 2/4;
    grid-row: 2/4;
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-template-rows: 42px minmax(0, 1fr);
  }
  .hexa-board-track {
    width: min(66vh, 250px);
    grid-column: 1;
    grid-row: 1/3;
    justify-self: center;
  }
  .hex-board {
    width: min(100cqw, 100cqh, 250px);
  }
  .hexa-coach {
    grid-column: 2;
    grid-row: 1;
  }
  .stack-tray {
    grid-column: 2;
    grid-row: 2;
  }
  .feedback {
    grid-column: 1;
    grid-row: 3;
  }
  .tray-stack {
    height: 70px;
  }
  .tray-stack .chip {
    bottom: calc(2% + var(--layer) * 3.1px);
    height: auto;
    aspect-ratio: 100 / 86.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tray-stack.coach-choice { animation: none; }
  .chip-clearing,
  .hex-cell.clear-burst::after { animation-duration: .26s; }
  .chip-revealed { animation-duration: .14s; }
}