/* OMT How to Play — board in the centre, 7 step circles orbiting it */

.omt-htp {
  position: relative;
  overflow: hidden;
  padding: 120px 0 140px;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(15,0,212,.40) 0%, rgba(15,0,212,0) 70%),
    linear-gradient(180deg, #000 0%, #04002e 40%, #02001a 75%, #000 100%);
}

.omt-htp__head {
  text-align: center;
  padding: 0 20px 70px;
}
.omt-htp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font: 600 11px/1 "Space Grotesk","Courier New",monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f8c800;
}
.omt-htp__title {
  margin: 0 0 18px;
  font: 500 clamp(44px, 5.2vw, 84px)/1 "ClashDisplay-Medium",Inter,sans-serif;
  color: #fff;
  letter-spacing: -.01em;
}
.omt-htp__title em { font-style: normal; color: #f8c800; }
.omt-htp__sub {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
}

/* ── Orbit stage (desktop) ── */
.omt-htp__stage {
  position: relative;
  width: 1260px;
  max-width: 100%;
  height: 860px;
  margin: 0 auto;
}

.omt-htp__orbit {
  position: absolute;
  left: 50%;
  top: 500px;
  width: 660px;
  height: 660px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px dashed rgba(248,200,0,.35);
  pointer-events: none;
}
.omt-htp__orbit::after {
  content: '';
  position: absolute;
  inset: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,200,0,.10) 0%, rgba(248,200,0,0) 62%);
  z-index: -1;
}

/* round board in the middle */
.omt-htp__board {
  position: absolute;
  left: 50%;
  top: 500px;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(248,200,0,.85);
  box-shadow: 0 0 0 10px rgba(15,0,212,.28), 0 0 90px rgba(248,200,0,.30), 0 30px 80px rgba(0,0,0,.6);
  background: #02001a;
}
.omt-htp__board img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* step */
.omt-htp__step {
  position: absolute;
  left: calc(50% + var(--x));
  top: calc(500px + var(--y));
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
}

.omt-htp__circle-wrap { position: relative; width: 100%; height: 100%; }
.omt-htp__circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #f8c800;
  background: radial-gradient(circle at 50% 35%, #1a10b8 0%, #060240 100%);
  box-shadow: 0 0 0 6px rgba(248,200,0,.14), 0 14px 34px rgba(0,0,0,.55);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.omt-htp__circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.omt-htp__step:hover .omt-htp__circle {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(248,200,0,.24), 0 0 40px rgba(248,200,0,.45), 0 14px 34px rgba(0,0,0,.55);
}

.omt-htp__num {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8c800;
  color: #050032;
  font: 700 14px/1 "ClashDisplay-Bold",Inter,sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

.omt-htp__text {
  position: absolute;
  width: 250px;
}
.omt-htp__text h3 {
  margin: 0 0 6px;
  font: 600 22px/1.15 "ClashDisplay-Semibold",Inter,sans-serif;
  color: #f8c800;
}
.omt-htp__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.68);
}

/* text sides */
.omt-htp__step--r .omt-htp__text { left: calc(100% + 20px); top: 50%; transform: translateY(-50%); text-align: left; }
.omt-htp__step--l .omt-htp__text { right: calc(100% + 20px); top: 50%; transform: translateY(-50%); text-align: right; }
.omt-htp__step--t .omt-htp__text { left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); text-align: center; width: 300px; }

/* ── Stacked layout (below 1280px) ── */
@media (max-width: 1279px) {
  .omt-htp { padding: 90px 0 100px; }
  .omt-htp__head { padding-bottom: 50px; }
  .omt-htp__stage {
    width: 100%;
    height: auto;
    max-width: 640px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .omt-htp__orbit { display: none; }
  .omt-htp__board {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: min(78vw, 360px);
    height: min(78vw, 360px);
    margin: 0 auto 24px;
  }
  .omt-htp__step {
    position: relative;
    left: auto; top: auto;
    width: auto;
    height: auto;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .omt-htp__circle-wrap { flex: 0 0 92px; width: 92px; height: 92px; }
  .omt-htp__num { top: -4px; left: -4px; }
  .omt-htp__step .omt-htp__text,
  .omt-htp__step--r .omt-htp__text,
  .omt-htp__step--l .omt-htp__text,
  .omt-htp__step--t .omt-htp__text {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .omt-htp__circle-wrap { flex-basis: 76px; width: 76px; height: 76px; }
  .omt-htp__text h3 { font-size: 19px; }
}