:root {
  color-scheme: light;
  --ink: #305b4d;
  --sand: #eee8d5;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { color: var(--ink); background: radial-gradient(ellipse at 80% 0%, #f9edc9, transparent 65%), var(--sand); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, iframe:focus-visible { outline: 3px solid #b97a37; outline-offset: 4px; }
.skip { position: fixed; top: -100px; left: 12px; z-index: 2; padding: 12px 16px; background: #f3cc6c; border-radius: 4px; }
.skip:focus { top: 12px; }
.shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  max-width: 1744px;
  height: 100svh;
  height: 100dvh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
main { display: grid; place-items: center; min-width: 0; min-height: 0; container-type: size; }
.game-wrap {
  position: relative;
  width: min(100cqw, calc((100cqh - 40px) * 16 / 9));
  height: min(100cqh, calc(100cqw * 9 / 16 + 40px));
  overflow: hidden;
  border-radius: 10px;
  background: #234f43;
  box-shadow: 0 0 0 2px #315b4d, 0 8px 30px #284d3b18;
}
iframe { display: block; width: 100%; height: 100%; border: 0; }
.links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(16px, 2.4vw, 40px); row-gap: 0; }
.links a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.links a:hover { color: #182f26; }
.links a:not(.vgd):hover { text-decoration: underline; text-underline-offset: 4px; }
.links a > span[aria-hidden] { opacity: .6; }
.vgd img { display: block; width: 194px; height: auto; }
.avatar { display: block; width: 28px; height: 28px; object-fit: cover; border-radius: 50%; }
.x-icon { font-size: 19px; }
@media (max-width: 1000px) {
  .shell { padding: 14px 16px 8px; gap: 8px; }
  .links { column-gap: 20px; }
  .links a { font-size: 11px; gap: 6px; }
  .vgd img { width: 168px; }
  .avatar { width: 24px; height: 24px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .shell { padding: max(12px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
  .game-wrap { width: 100%; height: 100%; border-radius: 7px; }
  .links { column-gap: 14px; }
  .links a { font-size: 10px; gap: 5px; }
  .vgd img { width: 148px; }
  .avatar { width: 22px; height: 22px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .shell { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 4px; }
  .game-wrap { width: 100%; height: 100%; border-radius: 6px; }
  .links { column-gap: 16px; }
  .links a { font-size: 10px; gap: 5px; }
  .vgd img { width: 148px; }
  .avatar { width: 22px; height: 22px; }
}