.popup.leaderboard-popup { background: #545454; width: calc(100% - 100px); max-width: 994px; display: block; top: 50px; transform: translateX(-50%); overflow-y: auto; max-height: calc(100vh - 20%); } .popup.leaderboard-popup * { font-family: inherit; } .leaderboard-popup .popup-section-header { background: #fb8d35; border-radius: 10px; box-shadow: 5px 5px #733381; margin-bottom: 30px; padding: 10px; font-size: 32px; color: #4a3050; text-shadow: none } .leaderboard-popup-play-live .popup-section-header-play-live { background: #000; border-radius: 10px; box-shadow: 5px 5px #1eff00; margin-bottom: 30px; padding: 10px; font-size: 32px; color: #fff; text-shadow: none } .leaderboard-filter-section { display: flex; justify-content: space-between; } .leaderboard-time-filter-button { background: #fee9aa; color: #4a3050; box-shadow: 5px 5px #733381; border: none; padding: 10px; border-radius: 20px; font-size: 24px; cursor: pointer; line-height: inherit; } .leaderboard-time-filter-button.selected { background: #fbca3f; color: #4a3050; } .leaderboard-type-filter-button { background: #ee9d57; color: #4a3050; box-shadow: 5px 5px #733381; border: none; padding: 10px; border-radius: 10px; font-size: 24px; margin-bottom: 10px; cursor: pointer; } .leaderboard-type-filter-button.selected { height: 100%; color: #4a3050; box-shadow: 5px 0px #733381; border-radius: 10px 10px 0px 0px; } .leaderboard-top-list-section { background: #ed9d57; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 15px; box-shadow: 5px 5px #733381; text-align: left; padding: 10px 50px; font-size: 24px; text-shadow: none; color: #4a3050; } .leaderboard-top-list-section-teacher { background: #282727; border-radius: 15px; text-align: left; padding: 10px 20px; font-size: 24px; text-shadow: none; color: white; } .play-live-leaderboard-background { animation:gradient 10s ease infinite; background:linear-gradient(115deg,#000,#ff7300,#ffae00,#ff5100); background-size:200%; } .level-list-icon { text-align: center; } .user-position-list { background: #ffd849; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 15px; box-shadow: 5px 5px #733381; text-align: left; padding: 10px 50px; margin-top: 12px; font-size: 24px; text-shadow: none; color: #4a3050; } .leaderboard-filter-section-left, .leaderboard-filter-section-right { display: flex; gap: 10px; } .leaderboard-filter-section-right { margin-right: 20px; } .leaderboard-filter-section-left { height: 100%; } .top-list-user-item.selected { background: #ffd849; border-radius: 15px; box-shadow: 1px 3px #733381; text-align: left; padding: 5px; font-size: 24px; text-shadow: none; color: #4a3050; width: calc(100% - 10px); border: 1px solid #733381; margin: 5px 0px 5px -10px; } .popup-item-content { position: relative; } .leaderboard-popup .loader { position: absolute; left: calc(50% - 50px); top: 20px; } .loader-section { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background-color: #fb8d35; box-shadow: 5px 5px #733381; border-radius: 5px; display: flex; justify-content: center; align-items: center; } /* Lives inline in the start/end modal footers (see js/leaderboard.js), not floating in the page corner. Deliberately declares NO `display`. This file is injected into at runtime by addCssFiles(), so it lands after the per-game stylesheets and wins ties. Games that hide the button do so with `.leader-board-open-button { display: none }` — spelling-supporters.css (all Spelling Zone games) without !important — so any `display` here would silently un-hide it. A