/* One shared 44px touch target with one 30px visual control. Feature styles
   must not reposition, redraw or resize it. */
.game-close-button {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  position:relative;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  flex:0 0 44px;
  padding:0;
  border:0;
  /* Keep all four corners of the 44px hit area clickable. The visible
     circular control is painted independently by ::after. */
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#eadbb8;
  font:0/0 sans-serif;
  line-height:1;
  text-indent:0;
  cursor:pointer;
}
.game-close-button > * { display:none; }
.game-close-button::after {
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(232,216,176,.52);
  border-radius:50%;
  background:rgba(11,14,17,.92);
  box-shadow:0 2px 10px rgba(0,0,0,.62);
}
.game-close-button::before {
  content:"";
  position:absolute;
  z-index:1;
  left:16px;
  top:16px;
  width:12px;
  height:12px;
  background:
    linear-gradient(45deg,transparent 43%,currentColor 44% 56%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,currentColor 44% 56%,transparent 57%);
}
.game-close-button:hover { background:transparent; }
.game-close-button:hover::after {
  background:rgba(40,40,43,.96);
  border-color:rgba(240,223,178,.8);
}
.game-close-button:focus-visible {
  outline:2px solid #fff0c6;
  outline-offset:3px;
}

/* OverlayController anchors the 44px touch target from the measured frame.
   Its centre, not an arbitrary inset, sits on the top-right border crossing. */
[data-game-close-owner] > .game-close-button[data-game-close-anchor="corner"] {
  position:absolute;
  z-index:100;
  top:var(--game-close-anchor-top);
  right:auto;
  bottom:auto;
  left:var(--game-close-anchor-left);
  transform:none;
  pointer-events:auto;
}