:root{
  --card:#ffffffdd;
  --shadow:0 12px 30px rgba(0,0,0,0.18);
  --panel-bg:linear-gradient(145deg,rgba(255,255,255,0.93),rgba(242,250,255,0.88));
  --panel-border:rgba(255,255,255,0.72);
  --panel-shadow:0 18px 34px rgba(7,47,66,0.18);
  --accent:#0f9ec2;
  --accent-dark:#0a6e88;
  --hud-stack-top:92px;
  --viewport-h:100dvh;
  --viewport-w:100vw;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --browser-bottom-inset:0px;
  --ui-bottom-offset:calc(var(--safe-bottom) + var(--browser-bottom-inset));
}

html,body{
  height:var(--viewport-h,100dvh);
  min-height:var(--viewport-h,100dvh);
  width:100%;
  margin:0;
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  background:linear-gradient(#bfefff,#eaf9ff);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

#gameCanvas{
  display:block;
  width:100%;
  height:var(--viewport-h,100dvh);
  min-height:var(--viewport-h,100dvh);
  background:transparent;
  touch-action:none;
}

.bootLoader{
  position:fixed;
  inset:0;
  z-index:140;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(900px 360px at 50% 14%,rgba(255,255,255,0.42),rgba(255,255,255,0)),
    linear-gradient(180deg,rgba(10,53,70,0.72),rgba(5,32,44,0.78));
  backdrop-filter:blur(2.4px);
  transition:opacity .34s ease, visibility .34s ease;
}

.bootLoader--hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.bootLoader__card{
  width:min(320px,86vw);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.36);
  padding:20px 18px;
  background:linear-gradient(165deg,rgba(245,253,255,0.96),rgba(225,246,252,0.9));
  box-shadow:0 18px 36px rgba(3,30,43,0.34);
  text-align:center;
}

.bootLoader__spinner{
  width:68px;
  height:68px;
  margin:0 auto 12px;
  border-radius:999px;
  border:5px solid rgba(19,123,154,0.2);
  border-top-color:#1aa8cf;
  border-right-color:#0f89ae;
  animation:bootSpin .9s linear infinite;
}

.bootLoader__spinner::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  margin:20px auto 0;
  border-radius:5px;
  background:linear-gradient(180deg,#4abfdf,#1c95ba);
  box-shadow:0 0 0 2px rgba(255,255,255,0.7) inset;
}

.bootLoader__title{
  font-size:22px;
  font-weight:800;
  letter-spacing:0.3px;
  color:#0c475b;
}

.bootLoader__text{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:#2b5464;
}

@keyframes bootSpin{
  to{ transform:rotate(360deg); }
}

.ui{
  position:fixed;
  left:calc(12px + var(--safe-left));
  top:calc(12px + var(--safe-top));
  z-index:40;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  max-width:min(900px,calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
}
.card{background:var(--card);padding:8px 12px;border-radius:10px;box-shadow:var(--shadow);font-weight:700}
.muted{font-size:12px;color:#334}

.overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--ui-bottom-offset)) calc(12px + var(--safe-left));
  z-index:60;
  pointer-events:none;
  background:transparent;
  backdrop-filter:none;
  transition:background .16s ease, backdrop-filter .16s ease;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-x:none;
}

.overlay.overlay--active{
  background:
    radial-gradient(1200px 380px at 50% 15%,rgba(255,255,255,0.26),rgba(255,255,255,0)),
    linear-gradient(180deg,rgba(13,62,82,0.08),rgba(5,36,50,0.14));
  backdrop-filter:blur(1.4px);
}

body.overlay-open .ui,
body.overlay-open .distanceBadge,
body.overlay-open .levelProgressDock,
body.overlay-open .boostTag,
body.overlay-open .eventBadge,
body.overlay-open .comboBadge,
body.overlay-open .hypeBadge,
body.overlay-open .footer,
body.overlay-open .leaderboard{
  display:none !important;
}

.panel{
  position:relative;
  width:min(700px,100%);
  max-width:100%;
  max-height:calc(var(--viewport-h,100dvh) - 24px);
  padding:22px 20px;
  border-radius:16px;
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  box-shadow:var(--panel-shadow);
  text-align:center;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-x:none;
  touch-action:pan-y pinch-zoom;
}

.panel h2,
.panel h3{
  margin:0;
  color:#112d3a;
  letter-spacing:0.2px;
}

.panel--start h2{
  margin-top:4px;
  font-size:clamp(30px,3.2vw,42px);
  line-height:1.05;
  color:#0b3e4f;
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
}

.panel-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.9px;
  text-transform:uppercase;
  color:#0c6078;
  background:linear-gradient(180deg,rgba(207,247,255,0.95),rgba(162,232,248,0.95));
  border:1px solid rgba(69,168,194,0.45);
}

.panel--start .muted{
  max-width:620px;
  margin:10px auto 0;
  font-size:13px;
  line-height:1.45;
  color:#2a4754;
}

.panel-field{
  display:grid;
  justify-items:center;
  gap:6px;
  margin-top:14px;
}

.panel-mode{
  margin-top:12px;
  display:grid;
  gap:6px;
  justify-items:center;
}

.panel-mutators{
  margin-top:10px;
  display:grid;
  gap:5px;
  justify-items:center;
}

.mutatorList{
  min-height:20px;
  font-size:12px;
  color:#21414f;
  text-align:center;
  max-width:620px;
  line-height:1.35;
}

.panel-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.6px;
  color:#315868;
  text-transform:uppercase;
}

input[type="text"]{
  border:1px solid #bcd7e1;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  color:#112733;
  background:#fafdff;
  width:min(320px,82vw);
  box-shadow:inset 0 1px 2px rgba(12,46,61,0.08);
}

input[type="text"]:focus{
  outline:none;
  border-color:#78c3d8;
  box-shadow:0 0 0 3px rgba(55,176,208,0.2), inset 0 1px 2px rgba(12,46,61,0.06);
}

.panel-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  flex-wrap:wrap;
}

.panel-actions--single{margin-top:12px}

button{
  cursor:pointer;
  border:0;
  padding:9px 14px;
  border-radius:11px;
  background:linear-gradient(180deg,#fff,#f1f4f6);
  color:#143342;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,0.16);
  filter:saturate(1.05);
}

button:active{transform:translateY(0)}

#startBtn{
  background:linear-gradient(180deg,#27b7db,#1299c0);
  color:#f8fdff;
  box-shadow:0 10px 22px rgba(8,101,130,0.3);
}

#howBtn,
#backBtn{
  background:linear-gradient(180deg,#fff,#edf4f8);
}

#modeBtn,
#presetBtn,
#cosmeticBtn,
#friendCodeBtn,
#ghostToggleBtn,
#leaderboardModeBtn{
  background:linear-gradient(180deg,#f7fcff,#e8f3f9);
}

#playAgain{
  background:linear-gradient(180deg,#2ebcde,#1598be);
  color:#f8fdff;
  box-shadow:0 10px 22px rgba(8,101,130,0.3);
}

#resumeBtn{
  background:linear-gradient(180deg,#30bbde,#1597bd);
  color:#f8fdff;
  box-shadow:0 10px 22px rgba(8,101,130,0.3);
}

#exitHomeBtn,
#homeBtn{
  background:linear-gradient(180deg,#fff,#edf3f6);
  color:#133443;
}

#nextLevelBtn{
  background:linear-gradient(180deg,#57c970,#2ea94e);
  color:#f8fff9;
  box-shadow:0 10px 20px rgba(30,120,52,0.28);
}

#shareBtn{
  background:linear-gradient(180deg,#4f8cff,#2b63d6);
  color:#f7fbff;
  box-shadow:0 10px 22px rgba(24,66,155,0.3);
}

#downloadReplayBtn{
  background:linear-gradient(180deg,#f7fcff,#e7f2ff);
}

.panel--how{
  width:min(760px,100%);
  text-align:left;
}

.panel--how h3{
  text-align:center;
  font-size:clamp(26px,2.8vw,34px);
  color:#0b4457;
}

.panel--board{
  width:min(560px,100%);
  text-align:left;
}

.boardHead{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.boardHead h3{
  text-align:center;
  font-size:clamp(24px,2.8vw,32px);
  color:#0d3c4d;
  margin:0;
}

.boardHeadSpacer{
  width:40px;
  height:40px;
}

.iconBtn{
  width:40px;
  height:40px;
  padding:0;
  border-radius:999px;
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#f7fcff,#e8f3f9);
}

.boardActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:10px;
}

.panel--end{
  width:min(560px,100%);
}

.panel--pause{
  width:min(520px,100%);
}

.panel--pause h3{
  font-size:clamp(28px,3vw,36px);
  color:#0d3c4d;
}

.panel--pause .muted{
  margin-top:10px;
  font-size:15px;
  color:#2a4a58;
}

.panel--end h2{
  font-size:clamp(30px,3vw,38px);
  color:#0d3c4d;
}

.panel--end .muted{
  margin-top:10px;
  font-size:15px;
  color:#2a4a58;
}

.how-list{
  counter-reset:howstep;
  list-style:none;
  margin:14px 0 4px;
  padding:0;
  display:grid;
  gap:10px;
}

.how-list li{
  position:relative;
  counter-increment:howstep;
  padding:11px 12px 11px 46px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.92),rgba(233,247,252,0.92));
  border:1px solid rgba(118,188,210,0.35);
  color:#173a49;
  line-height:1.4;
}

.how-list li::before{
  content:counter(howstep);
  position:absolute;
  left:12px;
  top:50%;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(180deg,#31bfdc,#1092b7);
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:grid;
  place-items:center;
  box-shadow:0 5px 10px rgba(14,103,132,0.25);
}

.hidden{display:none !important}
.boostTag{position:fixed;left:calc(12px + var(--safe-left));top:64px;z-index:40;background:#ffd24d;padding:6px 10px;border-radius:10px;box-shadow:var(--shadow);display:none}
.eventBadge{position:fixed;left:calc(12px + var(--safe-left));top:104px;z-index:42;background:linear-gradient(180deg,#fff9d8,#ffe69a);padding:6px 10px;border-radius:10px;box-shadow:var(--shadow);font-weight:800;font-size:12px;color:#644c00}
.comboBadge{position:fixed;left:calc(12px + var(--safe-left));top:144px;z-index:42;background:linear-gradient(180deg,#e6fff0,#c8f5da);padding:6px 10px;border-radius:10px;box-shadow:var(--shadow);font-weight:800;font-size:12px;color:#145e3c}
.hypeBadge{position:fixed;left:calc(12px + var(--safe-left));top:184px;z-index:42;background:linear-gradient(180deg,#ffe8dc,#ffc8ad);padding:6px 10px;border-radius:10px;box-shadow:var(--shadow);font-weight:800;font-size:12px;color:#7a2f08}
.footer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(6px + var(--ui-bottom-offset));font-size:12px;color:#113;z-index:40}
.levelBadge{background:#f0f8ff;padding:6px 10px;border-radius:8px;box-shadow:var(--shadow);font-weight:700}
.distanceBadge{position:fixed;right:calc(12px + var(--safe-right));top:calc(12px + var(--safe-top));background:var(--card);padding:8px 12px;border-radius:10px;box-shadow:var(--shadow);z-index:40;font-size:12px}
.distanceBadge--inline{
  position:static;
  right:auto;
  top:auto;
  z-index:auto;
  max-width:none;
  font-size:12px;
}
.levelProgressDock{position:fixed;left:calc(12px + var(--safe-left));top:var(--hud-stack-top);z-index:41}
.levelProgressCard{
  width:228px;
  padding:9px 10px;
  border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,0.5),rgba(206,243,255,0.22));
  border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 10px 22px rgba(3,40,57,0.14);
}
.levelProgressTitle{
  font-size:12px;
  letter-spacing:.2px;
  font-weight:700;
  color:#143a4b;
}
.levelProgress{
  height:10px;
  background:linear-gradient(180deg,rgba(255,255,255,0.4),rgba(205,235,245,0.45));
  border-radius:999px;
  overflow:hidden;
  margin-top:7px;
  border:1px solid rgba(96,163,186,0.35);
}
.levelProgress > i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#ffd24d,#ff9f31);
  width:0%;
  border-radius:999px;
  box-shadow:inset 0 -1px 0 rgba(115,62,0,0.22);
}
.leaderboard{position:fixed;right:calc(12px + var(--safe-right));bottom:calc(12px + var(--ui-bottom-offset));z-index:45;width:min(360px,90vw);max-height:46vh;overflow:auto}
.leaderboard h3{margin:0 0 8px 0}
.leaderboard .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.leaderboard .headActions{display:flex;align-items:center;gap:6px}
.leaderboard ol,
#boardList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.leaderboard li,
#boardList li{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;background:#ffffffcc;border-radius:8px;padding:6px 8px;font-size:13px}
.leaderboard .rank,
#boardList .rank{font-weight:800;color:#214}
.leaderboard .pts,
#boardList .pts{font-weight:800;color:#143}
.leaderboard li.me,
#boardList li.me{
  border:1px solid rgba(65,170,120,0.55);
  background:linear-gradient(180deg,#effff5,#dcf9ea);
}
.certifiedTag{display:inline-block;margin-top:8px;background:#e6fff0;border:1px solid #8dd4ab;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;color:#145e3c}

@media (max-width:980px){
  .ui{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 24px)}
  .leaderboard{position:fixed;left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));bottom:calc(8px + var(--ui-bottom-offset));width:auto;max-height:min(34vh,290px)}
}

@media (max-width:720px){
  .ui{
    left:calc(8px + var(--safe-left));
    right:calc(8px + var(--safe-right));
    top:calc(8px + var(--safe-top));
    gap:6px;
    max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px);
  }
  .ui .card{padding:6px 8px;font-size:12px;border-radius:8px}
  .panel{padding:16px 14px;width:min(700px,100%);max-height:calc(var(--viewport-h,100dvh) - var(--safe-top) - var(--ui-bottom-offset) - 18px)}
  .panel--start h2{font-size:34px}
  .panel--how h3{font-size:28px}
  .how-list li{font-size:13px}
  .panel--end .muted{font-size:14px}
  .distanceBadge{right:calc(8px + var(--safe-right));top:calc(8px + var(--safe-top));padding:6px 8px;font-size:11px;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eventBadge{top:92px}
  .comboBadge{top:128px}
  .hypeBadge{top:164px}
  .levelProgressDock{left:calc(8px + var(--safe-left));top:var(--hud-stack-top)}
  .levelProgressCard{width:min(210px,56vw)}
  .leaderboard{left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));bottom:calc(8px + var(--ui-bottom-offset));max-height:min(38vh,300px);width:auto}
  .leaderboard .head{flex-wrap:wrap;align-items:flex-start}
  .leaderboard .headActions{width:100%;justify-content:flex-end}
  .leaderboard h3{font-size:18px}
  .leaderboard li{grid-template-columns:24px 1fr auto;font-size:12px;padding:5px 6px}
  #boardList li{grid-template-columns:24px 1fr auto;font-size:12px;padding:5px 6px}
  #leaderboardModeBtn,
  #refreshLeaderboardBtn,
  #boardModeBtn,
  #boardRefreshBtn,
  #presetBtn,
  #cosmeticBtn,
  #friendCodeBtn,
  #ghostToggleBtn{padding:7px 10px;font-size:12px}
}

@media (max-width:760px){
  .ui .card.muted,
  .hudCard--hint{display:none}
}

@media (max-width:520px){
  .ui{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "brand level"
      "score best"
      "distance distance";
    align-items:stretch;
    column-gap:6px;
    row-gap:6px;
    width:calc(100vw - var(--safe-left) - var(--safe-right) - 16px);
    max-width:none;
  }
  .hudCard--brand{grid-area:brand}
  .hudCard--level{grid-area:level}
  .hudCard--score{grid-area:score}
  .hudCard--best{grid-area:best}
  .ui .card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:7px 8px;
    font-size:11px;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .distanceBadge--inline{
    grid-area:distance;
    grid-column:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
  }
  .boostTag,
  .eventBadge,
  .comboBadge,
  .hypeBadge{
    left:calc(8px + var(--safe-left));
    font-size:11px;
  }
  .levelProgressDock{
    left:calc(8px + var(--safe-left));
    right:calc(8px + var(--safe-right));
  }
  .levelProgressCard{
    width:auto;
    max-width:none;
  }
  .panel{
    width:min(700px,100%);
    max-height:calc(var(--viewport-h,100dvh) - var(--safe-top) - var(--ui-bottom-offset) - 14px);
    padding:14px 12px;
    border-radius:14px;
  }
  .panel-kicker{
    font-size:10px;
    padding:3px 8px;
    margin-bottom:6px;
  }
  .panel--start h2{
    font-size:clamp(32px,9vw,42px);
  }
  .panel--start .muted{
    font-size:12px;
    line-height:1.35;
    margin-top:8px;
  }
  .panel-field{
    margin-top:10px;
  }
  input[type="text"]{
    width:100%;
    max-width:none;
  }
  .panel-mode{
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:stretch;
    width:100%;
    gap:7px;
  }
  .panel-mode button{
    width:100%;
  }
  .panel-mode .muted{
    grid-column:1 / -1;
    text-align:center;
    margin:0;
  }
  .panel-mutators{
    margin-top:8px;
    gap:4px;
  }
  .mutatorList{
    font-size:11px;
    line-height:1.3;
  }
  .panel-actions{gap:8px}
  .panel-actions button{
    min-width:0;
    padding:9px 10px;
    flex:1 1 calc(50% - 8px);
  }
  .panel-actions--single button{
    flex:1 1 100%;
  }
  #openBoardBtn{
    flex:1 1 100%;
  }
  .boardActions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
  }
  #boardModeBtn,
  #boardRefreshBtn{
    width:100%;
  }
  .panel--how{width:min(760px,100%)}
  .how-list{
    margin-top:10px;
    gap:8px;
  }
  .how-list li{
    padding:9px 9px 9px 38px;
    font-size:12px;
  }
  .how-list li::before{
    left:10px;
    width:20px;
    height:20px;
    font-size:11px;
  }
  .footer{display:none}
}