* { box-sizing: border-box; }
body { margin: 0; background: #071a12; }
.home {
  position: relative;
  width: min(100%,540px);
  margin-inline: auto;
}
.home-art { display: block; width: 100%; height: auto; }
.home a {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: var(--radius,999px);
  touch-action: manipulation;
}
.home a:focus-visible { outline: 3px solid #fff7c8; outline-offset: 3px; }
.home a:active { background: #ffed9a24; }
.settings { --x: 83%; --y: 4.2%; --w: 12.5%; --h: 6.2%; }
.play { --x: 13.5%; --y: 60.2%; --w: 73%; --h: 10.2%; }
.rules { --x: 10.4%; --y: 71.8%; --w: 79.2%; --h: 6.1%; }
.look,.games { --y: 79.1%; --w: 38.9%; --h: 9.1%; --radius: 12%; }
.look { --x: 10%; }
.games { --x: 51.2%; }
.home .club {
  --x: 13.5%;
  --y: 4.9%;
  --w: 24%;
  --h: 5.2%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  border: 2px solid #e3bf60;
  background: linear-gradient(#204e36,#08281c);
  box-shadow: inset 0 0 0 1px #ffe19b55,0 2px 5px #061e13a8;
  color: #ffecb2;
  font: bold clamp(16px,4.4vw,24px)/1 Georgia,serif;
  text-decoration: none;
}
.home .club:active { background: #23543b; }

/* Cover the mockup's theme caption with adjacent felt, below the gold ornament. */
.home::after {
  content: '';
  position: absolute;
  left: 39.5%;
  top: 92.7%;
  width: 21%;
  height: 2.05%;
  background: url('assets/interface/approved-home.png') 50% 91.1% / 476.19% 4878.05% no-repeat;
  mask-image: linear-gradient(transparent,#000 12%,#000 88%,transparent);
  pointer-events: none;
}