﻿.skyline-stack-wrap {
  --ink: #17245a;
  --blue: #4864e8;
  --yellow: #ffd75e;
  --cream: #fffdf7;
}

.skyline-stack-wrap, .skyline-stack-wrap * { box-sizing: border-box; }

.skyline-stack-wrap { margin: 0; width: 100%; height: 100%; overflow: hidden; }

.skyline-stack-wrap {
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 20%, #344da8, #11183f 70%);
  color: var(--ink);
  font-family: "Nunito", sans-serif;
  user-select: none;
}

.skyline-stack-wrap button, .skyline-stack-wrap input { font: inherit; }
.skyline-stack-wrap button { color: inherit; }

.skyline-stack-wrap .game-shell { position: relative; width: min(520px, 100vw); height: min(900px, 100dvh); overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 0 8px rgba(8,15,52,.28), 0 0 90px rgba(2,7,30,.7); }
.skyline-stack-wrap .game-shell:after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(7,15,55,.16); }
.skyline-stack-wrap #game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.skyline-stack-wrap .topbar {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 52px); color: white;
  pointer-events: none;
}

.skyline-stack-wrap .brand { display: flex; align-items: center; gap: 10px; font: 700 13px/11px "Baloo 2"; letter-spacing: 1.4px; }
.skyline-stack-wrap .brand b { color: var(--yellow); font-size: 17px; }
.skyline-stack-wrap .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--yellow); color: #394fc4; transform: rotate(-8deg); }
.skyline-stack-wrap .scoreboard { display: flex; gap: clamp(18px, 5vw, 54px); text-align: center; }
.skyline-stack-wrap .scoreboard div { display: grid; }
.skyline-stack-wrap .scoreboard span { font-size: 9px; letter-spacing: 1.7px; opacity: .72; }
.skyline-stack-wrap .scoreboard strong { font: 800 27px/28px "Baloo 2"; }
.skyline-stack-wrap .timer-box strong { color: var(--yellow); min-width: 52px; }
.skyline-stack-wrap .timer-box.urgent strong { color: #ff9e9e; animation: timerPulse .65s ease-in-out infinite alternate; }
.skyline-stack-wrap .scoreboard .hidden { display: none; }
@keyframes timerPulse { to { transform: scale(1.12); } }
.skyline-stack-wrap .team-turn { position: absolute; left: 50%; top: 72px; transform: translateX(-50%); max-width: 230px; padding: 6px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: rgba(19,29,86,.35); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-align: center; white-space: nowrap; }
.skyline-stack-wrap .team-turn.hidden { display: none; }
.skyline-stack-wrap .icon-btn { pointer-events: auto; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); color: white; background: rgba(18,31,89,.18); border-radius: 50%; cursor: pointer; font-size: 20px; }
.skyline-stack-wrap .top-actions { display: flex; gap: 7px; pointer-events: auto; }
.skyline-stack-wrap .fullscreen-btn { font-size: 18px; }
.skyline-stack-wrap:fullscreen, .skyline-stack-wrap:-webkit-full-screen { display: grid; place-items: center; width: 100vw; height: 100dvh; min-height: 100dvh; padding: 16px; overflow: hidden; border-radius: 0; background: radial-gradient(circle at 50% 20%, #263d93, #030718 72%); }
.skyline-stack-wrap .game-shell.fullscreen-locked { width: min(520px, calc(100vw - 32px)) !important; height: min(900px, calc(100dvh - 32px)) !important; max-width: 520px !important; max-height: 900px !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 18px !important; box-shadow: 0 0 0 8px rgba(8,15,52,.28), 0 0 90px rgba(114,134,255,.28) !important; background: #11183f; }
.skyline-stack-wrap.pseudo-fullscreen { position: fixed !important; z-index: 999999 !important; inset: 0 !important; display: grid !important; place-items: center !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; border-radius: 0 !important; background: radial-gradient(circle at 50% 20%, #263d93, #030718 72%) !important; }

.skyline-stack-wrap .panel {
  position: absolute; z-index: 5; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px)); padding: 36px 42px 30px;
  border: 1px solid rgba(255,255,255,.8); border-radius: 30px;
  background: rgba(255,253,247,.94); box-shadow: 0 25px 70px rgba(19,29,81,.27);
  backdrop-filter: blur(14px); text-align: center;
  transition: opacity .25s, transform .25s;
}

.skyline-stack-wrap .panel.hidden { opacity: 0; transform: translate(-50%, -46%) scale(.96); pointer-events: none; }
.skyline-stack-wrap .start-panel { max-height: calc(100% - 100px); overflow-y: auto; scrollbar-width: none; }
.skyline-stack-wrap .start-panel::-webkit-scrollbar { display: none; }
.skyline-stack-wrap .eyebrow { margin: 0 0 4px; color: #7180b8; font-size: 10px; font-weight: 800; letter-spacing: 2.2px; }
.skyline-stack-wrap h1, .skyline-stack-wrap h2 { margin: 0; color: var(--ink); font-family: "Baloo 2"; font-weight: 800; line-height: .95; }
.skyline-stack-wrap h1 { font-size: clamp(38px, 6.2vh, 55px); letter-spacing: -1.6px; }
.skyline-stack-wrap h2 { font-size: 42px; }
.skyline-stack-wrap .intro { margin: 14px auto 20px; max-width: 340px; color: #65719c; font-size: 13px; line-height: 1.5; }

.skyline-stack-wrap .mascot { position: absolute; top: -37px; left: 50%; transform: translateX(-50%) rotate(5deg); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px 22px 18px 18px; background: var(--yellow); box-shadow: 0 8px 0 rgba(51,69,158,.12); }
.skyline-stack-wrap .mascot:before, .skyline-stack-wrap .mascot:after { content: ""; position: absolute; top: 24px; width: 7px; height: 9px; border-radius: 50%; background: #29376e; }
.skyline-stack-wrap .mascot:before { left: 17px; } .skyline-stack-wrap .mascot:after { right: 17px; }
.skyline-stack-wrap .mascot span { color: white; font-size: 13px; transform: translateY(12px); }

.skyline-stack-wrap label { display: block; margin: 13px 0 7px; text-align: left; color: #7180a5; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.skyline-stack-wrap input { width: 100%; height: 46px; padding: 0 16px; border: 2px solid #e6e9f4; border-radius: 12px; outline: none; color: var(--ink); background: white; font-weight: 800; }
.skyline-stack-wrap input:focus { border-color: #8294ee; box-shadow: 0 0 0 4px rgba(85,108,226,.1); }

.skyline-stack-wrap .play-style { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skyline-stack-wrap .play-style button { height: 43px; border: 2px solid #e6e9f4; border-radius: 12px; background: white; color: #6d789d; cursor: pointer; font-weight: 800; }
.skyline-stack-wrap .play-style button.selected { border-color: #5871e7; background: #f2f4ff; color: #3f55c8; box-shadow: 0 5px 13px rgba(52,73,181,.12); }
.skyline-stack-wrap .play-style b { margin-right: 7px; color: #ffbb4d; }
.skyline-stack-wrap .setup-hidden { display: none !important; }
.skyline-stack-wrap .team-options { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: end; }
.skyline-stack-wrap .team-options label { grid-column: 1 / -1; margin-bottom: 0; }
.skyline-stack-wrap .team-options select { height: 39px; padding: 0 10px; border: 2px solid #e6e9f4; border-radius: 10px; background: white; color: var(--ink); font-weight: 800; outline: none; }
.skyline-stack-wrap .team-options button { height: 39px; padding: 0 11px; border: 0; border-radius: 10px; background: #fff0bd; color: #73591d; font-size: 9px; font-weight: 800; cursor: pointer; }
.skyline-stack-wrap .team-names { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.skyline-stack-wrap .team-names input { height: 37px; padding: 0 10px; font-size: 11px; }
.skyline-stack-wrap .team-setup > p { margin: 5px 0 0; color: #929ab1; font-size: 8px; }

.skyline-stack-wrap .difficulty { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.skyline-stack-wrap .difficulty button { padding: 10px 4px 8px; border: 2px solid #e6e9f4; border-radius: 12px; background: white; cursor: pointer; transition: .15s; }
.skyline-stack-wrap .difficulty button:hover { transform: translateY(-2px); }
.skyline-stack-wrap .difficulty button.selected { border-color: #5871e7; background: #f2f4ff; box-shadow: 0 5px 13px rgba(52,73,181,.12); }
.skyline-stack-wrap .difficulty i { display: block; min-height: 12px; color: #ffb950; font-size: 8px; font-style: normal; letter-spacing: 1px; }
.skyline-stack-wrap .difficulty b { display: block; font: 700 12px "Baloo 2"; }
.skyline-stack-wrap .difficulty small { display: block; color: #8c96b4; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }

.skyline-stack-wrap .challenge { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.skyline-stack-wrap .challenge button { height: 47px; padding: 5px 2px; border: 2px solid #e6e9f4; border-radius: 11px; background: white; cursor: pointer; }
.skyline-stack-wrap .challenge button.selected { border-color: #5871e7; background: #f2f4ff; box-shadow: 0 5px 13px rgba(52,73,181,.12); }
.skyline-stack-wrap .challenge b { display: block; color: #536ae0; font: 800 17px/17px "Baloo 2"; }
.skyline-stack-wrap .challenge small { color: #8c96b4; font-size: 7px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }

.skyline-stack-wrap .start-leaderboard { margin-top: 13px; padding: 10px 12px 7px; border-radius: 13px; background: linear-gradient(135deg,#f2f4ff,#fff); border: 1px solid #e4e8f7; }
.skyline-stack-wrap .start-leaderboard > div { display: flex; align-items: center; justify-content: space-between; color: #6877a8; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; }
.skyline-stack-wrap .start-leaderboard button { border: 0; background: none; color: #536ae0; font-size: 9px; font-weight: 800; cursor: pointer; }
.skyline-stack-wrap .start-leaderboard ol { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: mini-rank; }
.skyline-stack-wrap .start-leaderboard li { counter-increment: mini-rank; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; min-height: 25px; border-top: 1px solid #e8ebf5; color: #35416d; font-size: 10px; font-weight: 800; text-align: left; }
.skyline-stack-wrap .start-leaderboard li:before { content: counter(mini-rank); color: #9aa4c2; font-size: 9px; }
.skyline-stack-wrap .start-leaderboard li:first-child:before { content: "★"; color: #e9ac35; }
.skyline-stack-wrap .start-leaderboard li b { color: #536ae0; font: 800 14px "Baloo 2"; }
.skyline-stack-wrap .start-leaderboard .mini-empty { display: block; padding: 7px 0 3px; color: #9aa4c2; text-align: center; font-weight: 700; }
.skyline-stack-wrap .start-leaderboard .mini-empty:before { display: none; }

.skyline-stack-wrap .primary-btn { width: 100%; height: 50px; margin-top: 20px; border: 0; border-radius: 14px; color: white; background: linear-gradient(135deg, #536eea, #354ec9); box-shadow: 0 9px 19px rgba(52,73,181,.25); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; cursor: pointer; transition: .15s; }
.skyline-stack-wrap .primary-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 23px rgba(52,73,181,.3); }
.skyline-stack-wrap .primary-btn span { margin-left: 12px; font-size: 18px; }
.skyline-stack-wrap .text-btn { margin: 14px 0 0; border: 0; background: none; color: #65719c; font-size: 11px; font-weight: 800; cursor: pointer; }

.skyline-stack-wrap .game-hint { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 8px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(10,17,55,.2); color: rgba(255,255,255,.9); font-size: 10px; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: opacity .3s, transform .15s; }
.skyline-stack-wrap .game-hint:hover { transform: translateX(-50%) translateY(-2px); }
.skyline-stack-wrap .game-hint span { display: inline-block; margin-right: 5px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 6px; background: rgba(10,17,55,.2); font-size: 9px; letter-spacing: 1px; }
.skyline-stack-wrap .game-hint.hidden { opacity: 0; }

.skyline-stack-wrap .result-panel { padding-top: 43px; }
.skyline-stack-wrap .result-score { margin: 22px auto 12px; display: grid; width: 140px; height: 140px; place-content: center; border-radius: 50%; background: #f1f3ff; border: 2px dashed #aeb9ec; }
.skyline-stack-wrap .result-score strong { font: 800 62px/55px "Baloo 2"; color: #4e65db; }
.skyline-stack-wrap .result-score span { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; color: #7b86ad; }
.skyline-stack-wrap .result-panel > p:not(.eyebrow) { color: #7781a3; font-size: 12px; }

.skyline-stack-wrap .leaderboard-panel { max-width: 390px; }
.skyline-stack-wrap .close-btn { position: absolute; right: 17px; top: 13px; border: 0; background: none; color: #8b95b3; font-size: 27px; cursor: pointer; }
.skyline-stack-wrap .leaderboard-panel ol { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: rank; }
.skyline-stack-wrap .leaderboard-panel li { counter-increment: rank; display: grid; grid-template-columns: 35px 1fr auto 35px; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px solid #e7e9f2; text-align: left; font-size: 13px; font-weight: 800; }
.skyline-stack-wrap .leaderboard-panel li:before { content: counter(rank); display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #68749a; background: #eef0f8; font-size: 11px; }
.skyline-stack-wrap .leaderboard-panel li:nth-child(1):before { content: "★"; background: var(--yellow); color: #72571a; }
.skyline-stack-wrap .leaderboard-panel li small { color: #929ab1; font-size: 8px; letter-spacing: .5px; text-transform: uppercase; }
.skyline-stack-wrap .leaderboard-panel li span:last-child { color: #4f65d9; font: 800 20px "Baloo 2"; }
.skyline-stack-wrap .leaderboard-note { color: #929ab1; font-size: 9px; }
.skyline-stack-wrap .empty-board { display: block !important; padding: 24px; text-align: center !important; color: #929ab1; font-weight: 600 !important; }
.skyline-stack-wrap .empty-board:before { display: none !important; }

.skyline-stack-wrap .team-results-panel { overflow: visible; padding-top: 34px; }
.skyline-stack-wrap .winner-ribbon { position: relative; width: calc(100% + 44px); margin: 19px 0 9px -22px; padding: 13px 35px 11px; background: linear-gradient(135deg,#ffd85b,#ffb739); color: #5d4310; filter: drop-shadow(0 8px 8px rgba(72,51,8,.18)); animation: ribbonIn .65s cubic-bezier(.2,.9,.25,1.2); }
.skyline-stack-wrap .winner-ribbon:before, .skyline-stack-wrap .winner-ribbon:after { content: ""; position: absolute; bottom: -15px; width: 22px; height: 26px; background: #d99222; z-index: -1; }
.skyline-stack-wrap .winner-ribbon:before { left: 0; clip-path: polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
.skyline-stack-wrap .winner-ribbon:after { right: 0; clip-path: polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
.skyline-stack-wrap .winner-ribbon span { display: block; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.skyline-stack-wrap .winner-ribbon strong { display: block; overflow: hidden; text-overflow: ellipsis; font: 800 32px/34px "Baloo 2"; white-space: nowrap; }
.skyline-stack-wrap .winner-score { margin: 0 0 10px; color: #5a6bd1; font: 800 12px "Baloo 2"; letter-spacing: 1px; }
.skyline-stack-wrap .team-results-panel ol { margin: 0; padding: 0; list-style: none; counter-reset: team-rank; }
.skyline-stack-wrap .team-results-panel li { counter-increment: team-rank; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; min-height: 38px; padding: 0 8px; border-bottom: 1px solid #e7e9f2; text-align: left; font-size: 12px; font-weight: 800; }
.skyline-stack-wrap .team-results-panel li:before { content: counter(team-rank); color: #9aa4c1; }
.skyline-stack-wrap .team-results-panel li:first-child { border-radius: 10px; background: #fff8da; }
.skyline-stack-wrap .team-results-panel li:first-child:before { content: "★"; color: #e7aa2d; }
.skyline-stack-wrap .team-results-panel li b { color: #4e65d9; font: 800 19px "Baloo 2"; }
@keyframes ribbonIn { from { opacity: 0; transform: scaleX(.35) rotate(-4deg); } to { opacity: 1; transform: scaleX(1) rotate(0); } }

.skyline-stack-wrap .game-shell.showcase-active .result-panel,
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel {
  top: auto;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(390px, calc(100% - 24px));
  max-height: 31%;
  padding: 13px 16px 12px;
  border-radius: 18px;
  background: rgba(255,253,247,.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 35px rgba(10,17,55,.22);
}
.skyline-stack-wrap .game-shell.showcase-active .panel.hidden { transform: translateX(-50%) translateY(12px) scale(.96); }
.skyline-stack-wrap .game-shell.showcase-active .result-panel h2,
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel h2 { font-size: 24px; }
.skyline-stack-wrap .game-shell.showcase-active .result-panel > p:not(.eyebrow) { display: none; }
.skyline-stack-wrap .game-shell.showcase-active .result-score { position: absolute; left: 14px; top: 13px; width: 62px; height: 62px; margin: 0; }
.skyline-stack-wrap .game-shell.showcase-active .result-score strong { font-size: 30px; line-height: 27px; }
.skyline-stack-wrap .game-shell.showcase-active .result-score span { font-size: 7px; }
.skyline-stack-wrap .game-shell.showcase-active .result-panel .eyebrow,
.skyline-stack-wrap .game-shell.showcase-active .result-panel h2 { margin-left: 74px; text-align: left; }
.skyline-stack-wrap .game-shell.showcase-active .result-panel .primary-btn,
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel .primary-btn { height: 38px; margin-top: 9px; border-radius: 11px; }
.skyline-stack-wrap .game-shell.showcase-active .result-panel .text-btn,
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel .text-btn { margin-top: 7px; }
.skyline-stack-wrap .game-shell.showcase-active .winner-ribbon { width: auto; margin: 7px 0 4px; padding: 8px 16px 7px; border-radius: 12px; }
.skyline-stack-wrap .game-shell.showcase-active .winner-ribbon:before,
.skyline-stack-wrap .game-shell.showcase-active .winner-ribbon:after { display: none; }
.skyline-stack-wrap .game-shell.showcase-active .winner-ribbon strong { font-size: 23px; line-height: 24px; }
.skyline-stack-wrap .game-shell.showcase-active .winner-score { margin-bottom: 5px; }
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel ol { max-height: 70px; overflow-y: auto; }
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel li { min-height: 27px; font-size: 10px; }
.skyline-stack-wrap .game-shell.showcase-active .team-results-panel li b { font-size: 15px; }

.skyline-stack-wrap.pseudo-fullscreen .game-shell.showcase-active .result-panel,
.skyline-stack-wrap.pseudo-fullscreen .game-shell.showcase-active .team-results-panel { bottom: max(12px, env(safe-area-inset-bottom)); }

.skyline-stack-wrap .toast { position: absolute; z-index: 4; left: 50%; top: 23%; max-width: calc(100% - 28px); transform: translate(-50%, 8px) scale(.9); opacity: 0; padding: 8px 17px; border: 2px solid rgba(255,255,255,.7); border-radius: 20px; background: linear-gradient(135deg,#ffe47c,#ffc951); box-shadow: 0 8px 24px rgba(34,45,112,.25); color: #26346f; font: 800 clamp(11px,3vw,14px) "Baloo 2"; white-space: nowrap; pointer-events: none; transition: .2s; }
.skyline-stack-wrap .toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); animation: cheerPop .35s ease-out; }
@keyframes cheerPop { 0% { transform: translate(-50%,8px) scale(.75) rotate(-3deg); } 70% { transform: translate(-50%,-3px) scale(1.06) rotate(1deg); } }

@media (max-height: 720px) {
.skyline-stack-wrap .panel { top: 54%; padding: 20px 28px 15px; }
.skyline-stack-wrap .mascot { display: none; }
.skyline-stack-wrap h1 { font-size: 36px; }
.skyline-stack-wrap .intro { display: none; }
.skyline-stack-wrap label { margin-top: 6px; }
.skyline-stack-wrap input { height: 39px; }
.skyline-stack-wrap .difficulty button { padding: 5px 3px; }
.skyline-stack-wrap .challenge button { height: 40px; }
.skyline-stack-wrap .start-leaderboard { margin-top: 7px; padding-top: 6px; }
.skyline-stack-wrap .start-leaderboard li:nth-child(n+3) { display: none; }
.skyline-stack-wrap .team-names input { height: 33px; }
.skyline-stack-wrap .primary-btn { margin-top: 12px; }
}

@media (max-width: 540px) {
.skyline-stack-wrap .game-shell { width: 100vw; height: 100dvh; border: 0; box-shadow: none; }
.skyline-stack-wrap .topbar { padding: 14px 15px; }
.skyline-stack-wrap .brand { font-size: 10px; } .skyline-stack-wrap .brand b { font-size: 13px; }
.skyline-stack-wrap .scoreboard { gap: 12px; margin-left: auto; margin-right: 8px; }
.skyline-stack-wrap .scoreboard strong { font-size: 21px; }
.skyline-stack-wrap .top-actions { gap: 4px; }
.skyline-stack-wrap .icon-btn { width: 34px; height: 34px; }
.skyline-stack-wrap .panel { padding-left: 24px; padding-right: 24px; border-radius: 24px; }
.skyline-stack-wrap .difficulty { gap: 4px; }
.skyline-stack-wrap .difficulty b { font-size: 10px; }
.skyline-stack-wrap .difficulty small { font-size: 6px; letter-spacing: .4px; }
}

.skyline-stack-wrap { height: auto; min-height: min(900px, 100dvh); padding: 12px; overflow: visible; border-radius: 24px; }
.skyline-stack-wrap .board-category-label { margin: 3px 0 0; color: #8e98b8; font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.skyline-stack-wrap .leaderboard-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 7px; }
.skyline-stack-wrap .leaderboard-filters label { margin: 0; font-size: 8px; }
.skyline-stack-wrap .leaderboard-filters select { width: 100%; height: 38px; margin-top: 4px; padding: 0 8px; border: 2px solid #e6e9f4; border-radius: 10px; background: #fff; color: #17245a; font-size: 10px; font-weight: 800; outline: none; }
.skyline-stack-wrap .leaderboard-filters select:focus { border-color: #8294ee; }

@media (max-width: 540px) {
  .skyline-stack-wrap { min-height: 100dvh; padding: 0; border-radius: 0; }
}
