.zenx-chess-home {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(76px, calc(env(safe-area-inset-top) + 68px))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  overflow: auto;
  color: #f8f2e8;
  font-family: "Exo SemiBold", system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.zenx-chess-home::before,
.zenx-chess-home::after {
  position: fixed;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.zenx-chess-home::before {
  inset: 0;
  background:
    linear-gradient(150deg, rgba(3, 12, 27, .86), rgba(4, 14, 29, .82) 55%, rgba(2, 7, 16, .9)),
    url("../assets/chess_game_backdrop-zenx-r12.jpg") center / cover no-repeat;
}

.zenx-chess-home::after {
  width: min(76vw, 760px);
  aspect-ratio: 1;
  right: -28%;
  bottom: -44%;
  border: 1px solid rgba(238, 196, 103, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 86px rgba(238, 196, 103, .025), 0 0 0 172px rgba(95, 173, 220, .02);
}

.zenx-chess-home.is-visible {
  opacity: 1;
  pointer-events: auto;
}

#zenx-chess-stage.zenx-home-visible #canvas canvas {
  opacity: 0;
  pointer-events: none;
}

.zenx-chess-home__shell {
  width: min(100%, 880px);
  display: grid;
  gap: 20px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(156, 188, 218, .18);
  border-radius: 38px;
  background: linear-gradient(145deg, rgba(15, 36, 62, .83), rgba(4, 13, 27, .92));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .075);
  backdrop-filter: blur(22px) saturate(.9);
}

.zenx-chess-home__topline,
.zenx-chess-home__brand,
.zenx-chess-home__actions,
.zenx-chess-home__quick {
  display: flex;
  align-items: center;
}

.zenx-chess-home__topline { justify-content: space-between; gap: 16px; }
.zenx-chess-home__brand { gap: 11px; color: #9db3ca; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.zenx-chess-home__brand strong { display: block; margin-top: 3px; color: #f8f2e8; font: 700 15px/1.1 "Roboto Slab Bold", Georgia, serif; letter-spacing: .01em; text-transform: none; }

.zenx-chess-home__mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(238, 196, 103, .38);
  border-radius: 12px;
  background: linear-gradient(145deg, #173c61, #07172e);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 8px 18px rgba(0, 0, 0, .26);
  color: #edc66a;
  font: 800 12px/1 "Exo SemiBold", system-ui, sans-serif;
  letter-spacing: -.03em;
}

.zenx-chess-home__status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(119, 215, 181, .2);
  border-radius: 999px;
  background: rgba(26, 89, 72, .16);
  color: #84dfbd;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.zenx-chess-home__status::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: #5ee3b0; box-shadow: 0 0 10px rgba(94, 227, 176, .7); }

.zenx-chess-home__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(250px, .75fr);
  gap: clamp(24px, 6vw, 62px);
  align-items: center;
}

.zenx-chess-home__eyebrow {
  margin: 0 0 11px;
  color: #edc66a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.zenx-chess-home h1 {
  max-width: 560px;
  margin: 0 0 13px;
  color: #fbf6ee;
  font: 700 clamp(42px, 7.4vw, 70px)/.9 "Roboto Slab Bold", Georgia, serif;
  letter-spacing: -.055em;
}

.zenx-chess-home h1 em { color: #edc66a; font-style: normal; }
.zenx-chess-home__lede { max-width: 500px; margin: 0 0 24px; color: #a7b9ca; font: 400 14px/1.62 "Exo Light", system-ui, sans-serif; }

.zenx-chess-home button {
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.zenx-chess-home__play {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  gap: 14px;
  padding: 0 21px 0 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4d98d, #d9a94f) !important;
  box-shadow: 0 17px 36px rgba(214, 163, 74, .24), inset 0 1px rgba(255, 255, 255, .64);
  color: #07172e !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .025em;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.zenx-chess-home__play:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(214, 163, 74, .31), inset 0 1px rgba(255, 255, 255, .7); }
.zenx-chess-home__play:active { transform: translateY(0) scale(.985); }
.zenx-chess-home__play span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: #0a2445; color: #f1ce77; font-size: 17px; }

.zenx-chess-home__board {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  justify-self: center;
  padding: 13px;
  border: 1px solid rgba(238, 196, 103, .34);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(245, 224, 185, .16), rgba(7, 22, 42, .7));
  box-shadow: 0 25px 55px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .1);
  transform: rotate(2.5deg);
}

.zenx-chess-home__squares {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background-color: #e7dbc4;
  background-image:
    conic-gradient(from 90deg, #30455f 25%, #e7dbc4 0 50%, #30455f 0 75%, #e7dbc4 0);
  background-size: 25% 25%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.zenx-chess-home__piece { position: absolute; z-index: 2; display: grid; place-items: center; color: #fff7e8; font-family: Georgia, serif; line-height: 1; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .38)); }
.zenx-chess-home__piece--knight { left: 14%; bottom: 12%; font-size: clamp(72px, 13vw, 118px); transform: rotate(-6deg); }
.zenx-chess-home__piece--king { top: 9%; right: 13%; color: #071321; font-size: clamp(63px, 11vw, 102px); filter: drop-shadow(0 6px 8px rgba(255, 255, 255, .2)); }
.zenx-chess-home__board-label { position: absolute; z-index: 3; right: 23px; bottom: 22px; padding: 7px 10px; border-radius: 999px; background: rgba(4, 15, 30, .86); color: #efcd7c; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }

.zenx-chess-home__puzzles {
  display: grid;
  grid-template-columns: minmax(155px, .8fr) repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding-top: 19px;
  border-top: 1px solid rgba(155, 186, 216, .14);
}

.zenx-chess-home__puzzle-copy { align-self: center; }
.zenx-chess-home__puzzle-copy small { display: block; margin-bottom: 4px; color: #91a9c0; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.zenx-chess-home__puzzle-copy strong { color: #f8f2e8; font: 700 16px/1.15 "Roboto Slab Bold", Georgia, serif; }

.zenx-chess-home__puzzle {
  display: grid;
  min-height: 66px;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px 10px !important;
  border: 1px solid rgba(142, 177, 209, .18) !important;
  border-radius: 15px;
  background: rgba(17, 46, 76, .7) !important;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.zenx-chess-home__puzzle:hover { transform: translateY(-2px); border-color: rgba(238, 198, 106, .48) !important; background: rgba(27, 61, 94, .9) !important; }
.zenx-chess-home__puzzle b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(237, 198, 106, .12); color: #efcc78; font: 700 17px/1 "Roboto Slab Bold", Georgia, serif; }
.zenx-chess-home__puzzle span { display: grid; gap: 2px; color: #f6eee1; font-size: 11px; }
.zenx-chess-home__puzzle small { color: #879db3; font: 400 8px/1 "Exo Light", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .09em; }

.zenx-chess-home__quick { justify-content: space-between; gap: 9px; }
.zenx-chess-home__actions { gap: 8px; }
.zenx-chess-home__utility {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 13px !important;
  border: 1px solid rgba(146, 178, 210, .16) !important;
  border-radius: 12px;
  background: rgba(9, 29, 52, .64) !important;
  color: #b7c5d3 !important;
  font-size: 10px !important;
}
.zenx-chess-home__utility:hover { border-color: rgba(238, 198, 106, .35) !important; color: #fff4dc !important; }
.zenx-chess-home__utility i { color: #edc66a; font-size: 14px; font-style: normal; }
.zenx-chess-home__hint { margin: 0; color: #6f859c; font: 400 9px/1.4 "Exo Light", system-ui, sans-serif; }

@media (max-width: 680px) {
  .zenx-chess-home {
    align-items: start;
    padding: max(68px, calc(env(safe-area-inset-top) + 62px)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .zenx-chess-home__shell { gap: 13px; padding: 17px; border-radius: 25px; }
  .zenx-chess-home__status { display: none; }
  .zenx-chess-home__hero { grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; }
  .zenx-chess-home h1 { margin-bottom: 9px; font-size: clamp(37px, 11.5vw, 49px); }
  .zenx-chess-home__lede { max-width: 235px; margin-bottom: 15px; font-size: 11px; line-height: 1.5; }
  .zenx-chess-home__play { min-height: 50px; padding-right: 15px; font-size: 11px !important; }
  .zenx-chess-home__play span { width: 34px; height: 34px; border-radius: 10px; }
  .zenx-chess-home__board { width: 128px; padding: 7px; border-radius: 19px; }
  .zenx-chess-home__squares { border-radius: 13px; }
  .zenx-chess-home__piece--knight { font-size: 58px; }
  .zenx-chess-home__piece--king { font-size: 51px; }
  .zenx-chess-home__board-label { right: 12px; bottom: 11px; padding: 4px 6px; font-size: 6px; }
  .zenx-chess-home__puzzles { grid-template-columns: repeat(3, 1fr); gap: 7px; padding-top: 13px; }
  .zenx-chess-home__puzzle-copy { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  .zenx-chess-home__puzzle-copy small { margin: 0; }
  .zenx-chess-home__puzzle { min-height: 58px; grid-template-columns: 29px 1fr; gap: 6px; padding: 6px !important; border-radius: 12px; }
  .zenx-chess-home__puzzle b { width: 29px; height: 29px; border-radius: 8px; font-size: 15px; }
  .zenx-chess-home__puzzle span { font-size: 9px; }
  .zenx-chess-home__puzzle small { font-size: 6px; }
  .zenx-chess-home__quick { align-items: flex-end; }
  .zenx-chess-home__utility { min-height: 34px; padding: 0 10px !important; font-size: 9px !important; }
  .zenx-chess-home__hint { max-width: 110px; text-align: right; font-size: 7px; }
}

@media (max-height: 720px) and (orientation: portrait) {
  .zenx-chess-home { padding-top: max(58px, calc(env(safe-area-inset-top) + 54px)); }
  .zenx-chess-home__shell { gap: 9px; padding: 13px 15px; }
  .zenx-chess-home__brand span:last-child { display: none; }
  .zenx-chess-home h1 { font-size: 36px; }
  .zenx-chess-home__lede { display: none; }
  .zenx-chess-home__board { width: 105px; }
  .zenx-chess-home__puzzles { padding-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .zenx-chess-home,
  .zenx-chess-home button { transition: none !important; }
}