/* ═══ HEXCRAFT — the community arcade ═══
   A window onto fightforhex.com. The dialog is a cinema seat, not a skin:
   the game keeps its own look, we provide the dark room and the credits. */

/* Right of the pump switch, and it glows — the one thing in the dock that
   is an invitation rather than a control. The halo is its own blurred layer
   breathing on opacity and scale (compositor work, never a repaint), so the
   light swells like an ember instead of stepping like an alarm. */
.dock-hexcraft {
  position: relative;
  order: 2;                     /* pump.js appends its toggle after us; the swords stay on its right */
  /* asleep it matches its neighbours exactly — the stir is the only tell */
  animation: dock-stir 9s ease-in-out 3s infinite;
}
.dock-hexcraft::after {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--fire, #ff263e) 60%, transparent), color-mix(in srgb, var(--fire, #ff263e) 18%, transparent) 55%, transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.dock-hexcraft:hover {
  color: color-mix(in srgb, var(--fire, #ff263e) 35%, #fff);
  border-color: color-mix(in srgb, var(--fire, #ff263e) 80%, #fff);
  background: color-mix(in srgb, var(--fire, #ff263e) 14%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--fire, #ff263e) 70%, transparent), inset 0 0 10px color-mix(in srgb, var(--fire, #ff263e) 28%, transparent);
}
.dock-hexcraft:hover::after { opacity: .8; }

/* --arena / --arena-2 are set at open time from the token page underneath,
   so the arena door always matches the room it was opened from */
.hexcraft-dialog {
  --arena: #ff5d8e;
  --arena-2: #d23761;
  width: min(1180px, calc(100vw - 32px));
  padding: 20px 22px 22px;
  background:
    radial-gradient(560px 240px at 10% 0%, color-mix(in srgb, var(--arena) 16%, transparent), transparent 70%),
    radial-gradient(460px 220px at 100% 100%, color-mix(in srgb, var(--arena-2) 10%, transparent), transparent 72%),
    linear-gradient(150deg, rgba(22, 8, 14, .99), rgba(8, 3, 6, .995));
  border: 1px solid color-mix(in srgb, var(--arena) 34%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--arena) 18%, transparent), 0 40px 100px rgba(0, 0, 0, .7);
}
.hexcraft-dialog .share-dialog-head label { color: color-mix(in srgb, var(--arena) 85%, #fff); }
.hexcraft-head { padding-bottom: 14px; }
.hexcraft-head .share-dialog-sub a {
  color: var(--arena);
  font-weight: 700;
  text-decoration: none;
}
.hexcraft-head .share-dialog-sub a:hover { color: #fff; text-decoration: underline; }

.hexcraft-stage {
  position: relative;
  height: min(72vh, 760px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--arena) 26%, transparent);
  background: #131313;   /* the game's own ground, so loading doesn't flash */
}
.hexcraft-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .45);
  font-size: 12px;
  letter-spacing: .08em;
}
.hexcraft-stage iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 800px) {
  .hexcraft-dialog { width: calc(100vw - 16px); padding: 14px; }
  .hexcraft-stage { height: min(78vh, 640px); }
}