/* paradegame.com: the game full screen, a small CubSchool badge, and the end screen (score party, save, leaderboard) */
html, body.pg { margin: 0; height: 100%; background: #141414; overflow: hidden; }
.pg #g { position: fixed; inset: 0; }
.pg-badge { position: fixed; left: 10px; top: 10px; z-index: 20; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 999px; background: rgba(20, 20, 20, .72); color: #fff; text-decoration: none; font: 800 .8rem/1.1 "Plus Jakarta Sans", system-ui, sans-serif; backdrop-filter: blur(4px); }
.pg-badge img { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #000; }
.pg-badge span { display: grid; } .pg-badge small { font-weight: 700; color: #FFC800; font-size: .68rem; }
#end[hidden] { display: none; }
#end { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 14px; overflow-y: auto; font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.pe-back { position: fixed; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(12, 14, 28, .6), rgba(8, 9, 20, .88)); backdrop-filter: blur(2px); }
.pe-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pe-confetti i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: peFall 2.6s var(--d) ease-in forwards; }
@keyframes peFall { to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
.pe-card { position: relative; width: min(460px, 100%); margin: auto; padding: 22px 20px 16px; border-radius: 26px; background: #fffaf0; color: #1e1b2e; text-align: center; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); animation: peIn .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes peIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.pe-kick { margin: 0; font-weight: 800; color: #6b6275; }
.pe-card h1 { margin: 4px 0 2px; font-size: 3rem; font-weight: 900; line-height: 1; color: #141414; } .pe-card h1 small { font-size: 1rem; color: #8a6d00; }
.pe-sub { margin: 0 0 6px; font-weight: 700; color: #4b4458; }
.pe-rank { margin: 6px 0 12px; padding: 8px 12px; border-radius: 12px; background: #fff3c4; font-weight: 700; }
.pe-save { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #efe5d2; text-align: left; }
.pe-save h2, .pe-board h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 900; }
.pe-small { margin: 0 0 8px; font-size: .86rem; color: #6b6275; font-weight: 600; }
.pe-save form { display: grid; gap: 8px; } .pe-save form[hidden] { display: none; }
.pe-save input[type=email], .pe-save input:not([type]), .pe-save input[inputmode] { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1.5px solid #e5dccb; font: 700 1rem "Plus Jakarta Sans", system-ui, sans-serif; }
.pe-btn { padding: 12px 16px; border: 0; border-radius: 999px; background: #141414; color: #FFC800; font: 900 1rem "Plus Jakarta Sans", system-ui, sans-serif; cursor: pointer; } .pe-btn:disabled { opacity: .6; }
.pe-chk { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; font-weight: 600; color: #4b4458; } .pe-chk input { margin-top: 2px; }
.pe-link { margin-top: 6px; border: 0; background: none; color: #6b6275; font: 700 .85rem inherit; text-decoration: underline; cursor: pointer; }
.pe-save .pe-btn[data-quick] { width: 100%; }
.pe-err { margin: 6px 0 0; color: #b42318; font-weight: 700; font-size: .88rem; } .pe-err:empty { display: none; }
.pe-fine { margin: 8px 0 0; font-size: .74rem; color: #8a8298; } .pe-fine a { color: inherit; }
.pe-done { margin: 0; font-weight: 700; }
.pe-board { text-align: left; margin-bottom: 12px; }
.pe-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pe-board li { display: grid; grid-template-columns: 26px 1fr auto; column-gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #f0e7d6; }
.pe-board li small { grid-column: 2 / 4; color: #7a6f86; font-weight: 600; font-size: .78rem; }
.pe-board li.you { background: #fff3c4; box-shadow: inset 0 0 0 2px #FFC800; }
.pe-n { font-weight: 900; color: #8a6d00; } .pe-s { font-weight: 900; }
.pe-empty { color: #7a6f86; font-weight: 600; display: block !important; }
.pe-again { width: 100%; padding: 14px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffd84d, #FFC800); box-shadow: 0 5px 0 #c99a00; font: 900 1.15rem "Plus Jakarta Sans", system-ui, sans-serif; cursor: pointer; margin-bottom: 12px; }
.pe-cub { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #141414; color: #fff; text-decoration: none; text-align: left; }
.pe-cub img { width: 38px; height: 38px; padding: 6px; border-radius: 50%; background: #000; box-shadow: 0 0 0 2px rgba(255, 200, 0, .5); flex: none; }
.pe-cub span { display: grid; gap: 2px; } .pe-cub b { color: #FFC800; } .pe-cub small { color: #d8d0c2; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pe-confetti { display: none; } .pe-card { animation: none; } }