/* Coastline — Ibrahim Games skin: the site's fonts and buttons over the
   game's own layout (style.css). */
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin-var.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Lilita One"; src: url("/assets/fonts/lilita-one-latin.woff2") format("woff2"); font-display: swap; }
:root {
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --display: "Lilita One", "Nunito", system-ui, sans-serif;
  --panel: rgba(12, 16, 34, 0.94);
}
body { font-weight: 700; }
body .logo-top, body .logo-sub { font-style: normal; letter-spacing: 0.03em; }
body .logo-top { text-shadow: 0 6px 0 #b3470a, 0 12px 26px rgba(0, 0, 0, 0.35); }
body .big-btn { font-family: var(--display); font-style: normal; font-weight: 400; letter-spacing: 0.04em; border-radius: 22px; background: linear-gradient(180deg, #ffd84a, #ff9a1f); box-shadow: 0 7px 0 #b3470a, 0 16px 34px rgba(0, 0, 0, 0.35); }
body .title-card, body .panel { border-radius: 26px; background: linear-gradient(180deg, rgba(24, 28, 56, 0.94), rgba(10, 12, 26, 0.95)); border: 2px solid rgba(255, 255, 255, 0.08); }
body .panel h2, body .panel .title { font-family: var(--display); font-style: normal; font-weight: 400; }
body .menu-btn { border-radius: 16px; font-weight: 900; }
body .menu-btn.primary { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: 0.03em; background: linear-gradient(180deg, #ffd84a, #ff9a1f); color: #1b1200; box-shadow: 0 5px 0 #b3470a; }
body a.menu-btn { display: block; text-align: center; text-decoration: none; color: inherit; }
body .hud-btn.exit { background: rgba(232, 48, 58, 0.85); color: #fff; font: 900 18px var(--font); }
body .hud-btn.exit:hover { background: #e8303a; }
#home-link {
  position: fixed; top: 14px; left: 14px; z-index: 60;
  display: none; align-items: center; gap: 8px; height: 46px; padding: 0 16px;
  border-radius: 999px; background: rgba(10, 14, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px); color: #fff; font: 900 15px var(--font); text-decoration: none;
}
#home-link:hover { background: rgba(20, 26, 52, 0.85); }
/* Only on the title screen (the title element is visible). */
body:has(#title:not(.hidden)) #home-link { display: inline-flex; }
@media (max-width: 600px) { #home-link span { display: none; } }