/* Bramblekeep landing: the Wavedash player centred over a night-blue backdrop, in the game's
   navy-and-gold panel colours, with a compact row of creator links below. */
:root {
  color-scheme: dark;
  --ink: #f1e4c0;
  --ink-hover: #fff8df;
  --gold: #d8bf7d;
  --night: #14253c;
  font-family: ui-rounded, "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 70% 55% at 50% -8%, #2e5a8c, transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 108%, #1f4a3a, transparent 70%),
    linear-gradient(#182c46, #0f1c2e),
    var(--night);
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, iframe:focus-visible { outline: 3px solid #f0c95a; outline-offset: 4px; }
.skip { position: fixed; top: -100px; left: 12px; z-index: 2; padding: 12px 16px; color: #14253c; background: #f0c95a; 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; }
/* 16:9 game plus Wavedash's 40px player bar, as large as fits. */
.game-wrap {
  position: relative;
  width: min(100cqw, calc((100cqh - 40px) * 16 / 9));
  height: min(100cqh, calc(100cqw * 9 / 16 + 40px));
  overflow: hidden;
  border-radius: 12px;
  background: #182e49;
  box-shadow: 0 0 0 2px var(--gold), 0 6px 0 2px #0b1626, 0 18px 50px #050c1599;
}
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: var(--ink-hover); }
.links a:not(.vgd):not(.youtube):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: 24px; height: 24px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px #f00; }
.x-icon { font-size: 19px; }
/* YouTube badge: a dark pill like the VibeGameDev badge, with YouTube's red play icon and red accents. */
.yt-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 11px; border-radius: 15px; background: #0f0f0f; box-shadow: inset 0 0 0 1px #3a3a3a, 0 2px 8px #0003; color: #fff; transition: box-shadow .15s; }
.yt-icon { display: block; flex: none; width: 23px; height: auto; }
.yt-text { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.yt-text > span:first-child { font-size: 11px; font-weight: 700; }
.yt-on { font-size: 9px; font-weight: 700; color: #ff4e45; }
.links a.youtube:hover .yt-badge { box-shadow: inset 0 0 0 1.5px #f00, 0 2px 10px #f002; }
@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; }
  .yt-badge { height: 26px; gap: 7px; padding: 0 3px 0 9px; }
  .yt-icon { width: 20px; }
  .yt-text > span:first-child { font-size: 10px; }
  .yt-on { font-size: 8.5px; }
  .avatar { width: 20px; height: 20px; }
}
@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: 8px; }
  .links { column-gap: 14px; }
  .links a { font-size: 10px; gap: 5px; }
  .vgd img { width: 148px; }
  .yt-badge { height: 23px; gap: 6px; padding: 0 3px 0 8px; }
  .yt-icon { width: 17px; }
  .yt-text > span:first-child { font-size: 9px; }
  .yt-on { font-size: 7.5px; }
  .avatar { width: 17px; height: 17px; box-shadow: 0 0 0 1.5px #f00; }
}
@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; }
  .yt-badge { height: 23px; gap: 6px; padding: 0 3px 0 8px; }
  .yt-icon { width: 17px; }
  .yt-text > span:first-child { font-size: 9px; }
  .yt-on { font-size: 7.5px; }
  .avatar { width: 17px; height: 17px; box-shadow: 0 0 0 1.5px #f00; }
}