:root {
  --cyan: #7a8dff;
  --coral: #ff668b;
  --gold: #ffd35a;
}
.wp-shell-return b {
  display: none !important;
}
.main-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.main-actions button {
  min-height: 52px;
  border: 0;
  border-radius: 15px;
  background: #244b77;
  color: #fff;
  font-weight: 900;
}
.main-actions .primary {
  margin: 0;
}
.wp-standard-main-copy > #endlessBtn {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 52px !important;
  border: 1px solid #738cff88;
  border-radius: 15px;
  background: #102b4d;
  color: #fff;
  font-weight: 900;
}
.block-live {
  grid-template-rows: 62px 54px minmax(0, 1fr) 34px;
  position: relative;
  isolation: isolate;
}
.block-live > * {
  position: relative;
  z-index: 1;
}
.block-live::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 34%, #62efff55, transparent 34%),
    radial-gradient(circle at 82% 62%, #ff668b4d, transparent 38%),
    conic-gradient(from 0deg at 50% 50%, #9a72ff18, #ffd35a38, #62efff18, #ff668b38, #9a72ff18);
  transition: opacity 180ms ease;
}
.block-live.combo-active::before {
  opacity: 1;
  animation: comboAtmosphere 2.4s linear infinite;
}
.combo-banner {
  position: absolute;
  z-index: 32;
  top: clamp(106px, 17vh, 138px);
  left: 50%;
  min-width: 132px;
  padding: 8px 18px;
  border: 2px solid #fff9;
  border-radius: 999px;
  background: linear-gradient(135deg, #5534bded, #d53e83ed);
  box-shadow: 0 0 18px #62efffcc, 0 0 34px #ff668b88;
  color: #fff;
  font-size: clamp(1rem, 4vmin, 1.45rem);
  font-weight: 1000;
  letter-spacing: .07em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -12px) scale(.82);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(.2,.9,.25,1.25);
}
.block-live.combo-active .combo-banner {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.score-pop-layer {
  position: absolute;
  z-index: 35;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  padding: 7px;
  pointer-events: none;
}
.score-gain-pop {
  position: relative;
  place-self: center;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}
.score-gain-pop {
  z-index: 3;
  color: #fff;
  font-size: clamp(1rem, 4.4vmin, 1.8rem);
  text-shadow: 0 2px 0 #10203d, 0 0 6px #000, 0 0 10px #fff8;
  animation: scoreGainPop 1600ms ease-out both;
}
.block-play {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 116px;
  gap: 8px;
  overflow: hidden;
}
.block-board {
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 520px;
  aspect-ratio: 1;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  padding: 7px;
  border-radius: 20px;
  background: #101f3d;
  box-shadow: inset 0 0 0 2px #718cff55;
  position: relative;
  overflow: visible;
}
.board-effect-layer,
.clear-effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.board-effect-layer {
  z-index: 20;
  overflow: visible;
}
.clear-effect-layer {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  padding: 7px;
  overflow: visible;
}
.block-cell {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 7px;
  background: #1a3154;
  color: #d7e8ff;
  display: grid;
  place-items: center;
  font-size: clamp(0.65rem, 2.5vmin, 1.1rem);
  position: relative;
}
.block-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--block-color);
  box-shadow:
    inset 0 -4px #0004,
    0 2px 4px #0007;
  pointer-events: none;
}
.block-fill.dirt-fill {
  background:
    radial-gradient(circle at 28% 27%, #efc17a 0 8%, transparent 10%),
    radial-gradient(circle at 70% 66%, #6d341d 0 11%, transparent 13%),
    linear-gradient(145deg, #c47a3d, #8d4829 62%, #67321f);
}
.block-cell.preview {
  box-shadow: inset 0 0 0 3px #fff9;
  background: #71d8ff80;
}
.block-cell.will-clear {
  z-index: 3;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 12px #ffe56b, 0 0 11px #ffd35acc;
  filter: brightness(1.35) saturate(1.25);
  animation: clearReadyPulse 0.58s ease-in-out infinite alternate;
}
.block-cell.preview.will-clear {
  background: linear-gradient(135deg, #fff4aacc, #77efffcc);
}
.block-cell.invalid {
  background: #ff668b99 !important;
  box-shadow: inset 0 0 0 3px #ffb0c2;
}
.block-cell.invalid .block-fill {
  opacity: 0.22;
}
.terrain-dirt {
  background:
    radial-gradient(circle at 28% 27%, #efc17a 0 8%, transparent 10%),
    radial-gradient(circle at 70% 66%, #6d341d 0 11%, transparent 13%),
    linear-gradient(145deg, #c47a3d, #8d4829 62%, #67321f);
  box-shadow:
    inset 0 2px 0 #ffd291aa,
    inset 0 -5px #4b2418aa,
    0 2px 4px #0008;
}
.terrain-dirt::after {
  content: "";
  position: absolute;
  inset: 5px 7px 7px 5px;
  border: 0;
  border-radius: 4px 7px 5px 8px;
  background:
    linear-gradient(135deg, transparent 42%, #5f2c1c 44% 49%, transparent 51%),
    linear-gradient(35deg, transparent 55%, #e4a75e 57% 61%, transparent 63%);
  opacity: 0.85;
  pointer-events: none;
}
.terrain-dirt.filled::after {
  inset: 5px 7px 7px 5px;
  border: 0;
  background:
    linear-gradient(135deg, transparent 42%, #5f2c1c 44% 49%, transparent 51%),
    linear-gradient(35deg, transparent 55%, #e4a75e 57% 61%, transparent 63%);
}
.terrain-ice::after {
  content: "❄";
  position: absolute;
  z-index: 4;
  inset: 4px;
  display: grid;
  place-items: center;
  border: 2px solid #d9f7ffcc;
  border-radius: 6px;
  background: radial-gradient(circle, #70dfff55, transparent 68%);
  color: #bdefff;
  text-shadow: 0 1px 2px #083968, 0 0 6px #fff;
  pointer-events: none;
}
.terrain-stone {
  background: #536175;
}
.terrain-stone::after {
  content: "◆";
}
.terrain-lock {
  background: #493b69;
}
.terrain-lock::after {
  content: "🔒";
}
.terrain-gem::after {
  content: "◆";
  color: #ffdf5a;
}
.piece-tray {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
}
.piece {
  height: 104px;
  border: 1px solid #738cff55;
  border-radius: 16px;
  background: #102b4d;
  display: grid;
  place-items: center;
  touch-action: none;
  position: relative;
}
.piece.selected {
  outline: 3px solid #84eaff;
}
.piece.used {
  opacity: 0.18;
  pointer-events: none;
}
.piece-shape {
  display: grid;
  grid-template-columns: repeat(var(--cols), 18px);
  grid-template-rows: repeat(var(--rows), 18px);
  gap: 3px;
  transform: translateY(-4px);
}
.piece-shape i {
  border-radius: 4px;
  background: var(--piece);
  box-shadow: inset 0 -3px #0004;
}
.piece.dragging {
  transform: translateY(-64px);
  z-index: 10;
}
.drag-ghost {
  position: fixed;
  z-index: 100;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 8px #0009);
}
.drag-ghost.invalid i {
  background: #ff668b;
}
.clear-effect-layer.line-burst {
  animation: boardBurst 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.line-beam {
  position: relative;
  z-index: 12;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #62efff, #fff, #ffd35a, #ff668b, #9a72ff);
  box-shadow: 0 0 4px #fff, 0 0 10px #66eaffcc, 0 0 18px #ff668b66;
  mix-blend-mode: screen;
  animation: lineBeam 0.66s ease-out both;
  animation-delay: var(--effect-delay, 0ms);
}
.line-beam.row {
  grid-column: 1 / -1;
  grid-row: calc(var(--line) + 1);
  width: 100%;
  height: 14%;
  align-self: center;
  justify-self: center;
  --beam-x: 0;
  --beam-y: 0;
}
.line-beam.col {
  grid-row: 1 / -1;
  grid-column: calc(var(--line) + 1);
  width: 14%;
  height: 100%;
  align-self: center;
  justify-self: center;
  --beam-x: 0;
  --beam-y: 0;
  background: linear-gradient(#62efff, #fff, #ffd35a, #ff668b, #9a72ff);
}
.clear-flash {
  z-index: 4;
  min-width: 0;
  min-height: 0;
  position: relative;
  border-radius: 7px;
  background: var(--burst);
  box-shadow:
    inset 0 2px #fff9,
    inset 0 -4px #0004,
    0 0 7px color-mix(in srgb, var(--burst), white 22%),
    0 0 13px color-mix(in srgb, var(--burst), #64eaff 24%);
  animation: clearBurst 0.68s var(--burst-delay, 0ms) cubic-bezier(0.15, 0.8, 0.25, 1) both;
}
.fall-fragment {
  z-index: 15;
  width: 18%;
  aspect-ratio: 1;
  place-self: center;
  border-radius: 2px;
  background: var(--burst);
  box-shadow: inset 0 -1px #0005, 0 1px 2px #0006;
  animation: fragmentFall 920ms var(--fragment-delay, 0ms) cubic-bezier(.18,.7,.26,1) both;
}
.clear-flash::before,
.clear-flash::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
}
.clear-flash::before {
  inset: 2px;
  border: 2px solid color-mix(in srgb, var(--burst), white 32%);
  border-radius: 8px;
  box-shadow: 0 0 4px #fff9, 0 0 9px color-mix(in srgb, var(--burst), white 16%);
  animation: burstRing 0.44s var(--burst-delay, 0ms) ease-out both;
}
.clear-flash::after {
  background:
    radial-gradient(circle, #fff 0 12%, transparent 14%) 0 0/50% 50%,
    radial-gradient(circle, #ffd35a 0 10%, transparent 12%) 100% 0/45% 45%,
    radial-gradient(circle, #62efff 0 10%, transparent 12%) 0 100%/45% 45%,
    radial-gradient(circle, #ff668b 0 10%, transparent 12%) 100% 100%/45% 45%;
  filter: drop-shadow(0 0 5px var(--burst));
  animation: burstShards 0.52s var(--burst-delay, 0ms) ease-out both;
}
@keyframes clearBurst {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  34% { transform: scale(1.2) rotate(2deg); filter: brightness(2.7) saturate(1.5); opacity: 1; }
  62% { transform: scale(0.72) rotate(-3deg); filter: brightness(3); opacity: 0.9; }
  100% { transform: scale(0.08); filter: brightness(4); opacity: 0; }
}
@keyframes clearReadyPulse {
  to { filter: brightness(1.7) saturate(1.45); box-shadow: inset 0 0 0 4px #fff, inset 0 0 17px #ffe56b, 0 0 17px #ffd35a; }
}
@keyframes lineBeam {
  0% { opacity: 0; transform: translate(var(--beam-x), var(--beam-y)) scale(0.12); filter: brightness(1); }
  24% { opacity: 1; transform: translate(var(--beam-x), var(--beam-y)) scale(1); filter: brightness(2.3); }
  65% { opacity: 0.92; filter: brightness(1.5); }
  100% { opacity: 0; transform: translate(var(--beam-x), var(--beam-y)) scale(1.08); filter: brightness(2); }
}
@keyframes burstRing {
  0% { transform: scale(0.35); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(1.28); opacity: 0; }
}
@keyframes burstShards {
  0% { transform: scale(0.3) rotate(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.36) rotate(18deg); opacity: 0; }
}
@keyframes fragmentFall {
  0% { opacity: 0; transform: translate(var(--fragment-x), 3px) rotate(0) scale(.55); }
  18% { opacity: 1; transform: translate(var(--fragment-x), -7px) rotate(calc(var(--fragment-rotate) * -.12)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--fragment-x) * 1.8), clamp(68px, 16vmin, 128px)) rotate(var(--fragment-rotate)) scale(.52); }
}
@keyframes boardBurst {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  22% { transform: scale(1.018); filter: brightness(1.24); }
  44% { transform: scale(0.992); }
  68% { transform: scale(1.007); }
}
@keyframes scoreGainPop {
  0%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-70%); }
}
@keyframes scoreGainPopReduced {
  0%, 78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes comboAtmosphere {
  to { filter: hue-rotate(360deg); transform: scale(1.035) rotate(.001deg); }
}
@media (prefers-reduced-motion: reduce) {
  .clear-effect-layer.line-burst { animation: none; }
  .clear-flash { animation: clearBurstReduced 0.24s both; }
  .clear-flash::before,
  .clear-flash::after { animation: none; }
  .block-cell.will-clear { animation: none; }
  .line-beam { animation: clearBurstReduced 0.28s both; }
  .fall-fragment { animation: clearBurstReduced 0.36s both; }
  .block-live.combo-active::before { animation: none; }
  .score-gain-pop { animation: scoreGainPopReduced 1600ms ease both; }
}
@keyframes clearBurstReduced {
  0% { filter: brightness(1); opacity: 1; }
  55% { filter: brightness(2.4); opacity: 1; }
  100% { filter: brightness(1.4); opacity: 0; }
}
@media (max-width: 680px) {
  .block-board {
    max-height: 390px;
  }
  .block-play {
    grid-template-rows: minmax(0, 1fr) 108px;
  }
  .piece {
    height: 98px;
  }
  .piece-shape {
    grid-template-columns: repeat(var(--cols), 15px);
    grid-template-rows: repeat(var(--rows), 15px);
  }
}
@media (max-width: 680px) and (max-height: 620px) and (orientation: portrait) {
  .block-live {
    grid-template-rows: 54px 42px minmax(0, 1fr) 26px;
    gap: 4px;
    padding: 5px;
  }
  .block-play {
    grid-template-rows: minmax(0, 1fr) 82px;
    gap: 4px;
  }
  .piece {
    height: 76px;
  }
  .piece-shape {
    grid-template-columns: repeat(var(--cols), 14px);
    grid-template-rows: repeat(var(--rows), 14px);
    gap: 2px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .block-live {
    grid-template-columns: 154px minmax(0, 1fr) 230px;
    grid-template-rows: 58px minmax(0, 1fr) 34px;
  }
  .block-live .battle-header {
    grid-column: 1/-1;
  }
  .block-live .objective-row {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    display: grid;
  }
  .block-play {
    grid-column: 2/4;
    grid-row: 2/4;
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-template-rows: 1fr;
  }
  .block-board {
    width: min(58vh, 230px);
  }
  .piece-tray {
    grid-column: 2;
    grid-row: 1;
  }
  .feedback {
    grid-column: 1;
    grid-row: 3;
  }
  .piece {
    height: 70px;
  }
  .piece-shape {
    grid-template-columns: repeat(var(--cols), 12px);
    grid-template-rows: repeat(var(--rows), 12px);
  }
}