/* The game's main menu as a web page: shared by the itch leaderboard page and the clip pages (DAVID, 2026-10-23:
   "really this should have the same branding as the leaderboar page on the web"). From DAVID's approved mockup v11. */
html, body { margin: 0; min-height: 100%; overflow-x: hidden; overflow-y: auto; background: #000; color: #fff;
             font-family: "Segoe UI", system-ui, sans-serif; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#bg { z-index: 0; } #field { z-index: 1; }
#splat { z-index: 9; pointer-events: none; }   /* SplatCanvas: sortingOrder 1000, over everything */

#title { position: absolute; left: 50%; top: 1.2vh; z-index: 3; pointer-events: none; transform-origin: 50% 50%; }
#title .word { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#title img { position: absolute; display: block; opacity: 0; will-change: transform; }
#demo { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; white-space: nowrap;
        font-family: "Segoe Print", "Comic Sans MS", cursive; font-weight: 700; color: rgb(219, 33, 26);
        -webkit-text-stroke: .07em rgb(20, 12, 8); paint-order: stroke fill; opacity: 0; }

#panel { position: relative; z-index: 2; margin: 0 auto 7vh; background: rgba(13, 13, 13, .94); border-radius: 12px;
         box-shadow: 0 10px 40px rgba(0,0,0,.45); box-sizing: border-box; }
@media (max-width: 899px) { #panel { margin-bottom: 3.125rem; } }   /* no awkward gaps on phones (DAVID, 2026-11-01) */
.lbhead { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap;
          border-bottom: 2px solid rgba(250, 92, 92, .55); padding-bottom: .55em; margin-bottom: .7em; }
.lbtitle { font-size: 1.9em; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.lbtitle .itch { color: rgb(250, 92, 92); }
.lbsub { color: #fff; font-size: .8em; letter-spacing: .06em; margin-top: .35em; }
.itchbtn { background: rgb(250, 92, 92); color: #fff; font-weight: 800; letter-spacing: .05em; text-decoration: none;
           border-radius: 6px; padding: .5em 1em; white-space: nowrap; }
.itchbtn:hover { filter: brightness(1.1); }
.tabs { display: flex; gap: .5em; justify-content: center; margin-bottom: .5em; }
.tab { background: rgb(56, 56, 56); color: #fff; font-weight: 800; letter-spacing: .06em; border-radius: 6px;
       padding: .36em 1.05em; cursor: pointer; user-select: none; }
.tab.on { background: rgb(140, 107, 20); }

/* Follow buttons, on the leaderboard and every clip page (DAVID, 2026-10-23: "we need big insta follow buttons for
   tingle.games and follow on itch.io", "they need to be on clip pages and peaderrboard pages", "both in game and on
   website"). The itch profile page is where itch's Follow button is. */
.follow { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: 1.1em; }
@media (max-width: 520px) { .follow { grid-template-columns: 1fr; } }
.followbtn { display: flex; align-items: center; justify-content: center; gap: .55em; color: #fff; font-weight: 900;
             letter-spacing: .05em; text-decoration: none; border-radius: 8px; padding: .85em .8em; text-align: center; }
.followbtn img { width: 1.35em; height: 1.35em; flex: none; filter: invert(1); }
.followbtn.insta { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.followbtn.itch { background: rgb(250, 92, 92); }
.followbtn:hover { filter: brightness(1.1); }