:root {
  --glass-edge: rgb(236 255 239 / 19%);
  --glass-highlight: rgb(255 255 255 / 24%);
  --glass-shadow: 0 20px 65px rgb(0 0 0 / 42%);
}

button,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease,
    transform 150ms ease;
}

.overlay {
  background: rgb(3 7 5 / 46%);
  backdrop-filter: blur(16px) saturate(125%);
}

#menu {
  --menu-bg: rgb(17 26 21 / 79%);
  --menu-panel: rgb(240 255 243 / 6%);
  --menu-panel-raised: rgb(240 255 243 / 11%);
  --menu-line: rgb(230 250 235 / 16%);
  --menu-text: #f4f8f3;
  --menu-muted: #b8c7bc;
  --menu-accent: #ddf487;
  --menu-cyan: #8edbd0;
  --menu-coral: #ffad91;
  background:
    linear-gradient(145deg, rgb(93 145 111 / 9%), transparent 36%),
    rgb(3 7 5 / 35%);
  backdrop-filter: blur(19px) saturate(130%);
}

#menu .menu-window {
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 38%),
    linear-gradient(180deg, rgb(20 31 25 / 91%), rgb(11 17 14 / 93%));
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(28px) saturate(145%);
}

#menu .menu-header,
#menu .level-header {
  border-bottom-color: var(--menu-line);
}

#menu .brand-lockup {
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 40%));
}

#menu .account-entry {
  border: 1px solid var(--glass-edge);
  border-radius: 10px;
  background:
    linear-gradient(115deg, rgb(142 219 208 / 8%), transparent 54%),
    linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 2%));
  padding: 15px 18px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    0 8px 22px rgb(0 0 0 / 14%);
}

#menu .account-open,
#menu .primary-action {
  border-color: rgb(239 255 194 / 57%);
  background:
    linear-gradient(180deg, rgb(255 255 235 / 36%), transparent 48%),
    linear-gradient(135deg, #e6f9a1, #cde76e);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 5px 15px rgb(175 206 79 / 18%);
}

#menu .account-entry > .account-open {
  border-color: var(--glass-edge);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 9%), transparent 54%),
    rgb(240 255 243 / 6%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
  color: var(--menu-text);
}

#menu .account-entry > .account-open:hover {
  border-color: rgb(142 219 208 / 48%);
  background:
    linear-gradient(145deg, rgb(142 219 208 / 15%), transparent 56%),
    rgb(240 255 243 / 10%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    0 6px 18px rgb(0 0 0 / 18%);
}

#menu .account-open:hover,
#menu .primary-action:hover {
  border-color: #f5ffd7;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 45%), transparent 50%),
    linear-gradient(135deg, #f0ffb3, #d9f17e);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 80%),
    0 7px 20px rgb(175 206 79 / 25%);
  transform: translateY(-1px);
}

#menu .account-open:active,
#menu .primary-action:active,
#menu .rating-buttons button:active {
  transform: scale(.985);
}

#menu .rating-buttons button {
  border: 1px solid var(--glass-edge);
  border-left: 3px solid var(--rating-accent, var(--menu-cyan));
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 9%), transparent 53%),
    linear-gradient(180deg, rgb(39 56 45 / 69%), rgb(18 28 22 / 75%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    0 6px 16px rgb(0 0 0 / 13%);
}

#menu .rating-buttons button:hover {
  border-color: rgb(238 255 240 / 34%);
  border-left-color: var(--rating-accent, var(--menu-cyan));
  background:
    linear-gradient(145deg, rgb(255 255 255 / 13%), transparent 55%),
    linear-gradient(180deg, rgb(54 75 59 / 83%), rgb(25 38 29 / 86%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 15%),
    0 12px 28px rgb(0 0 0 / 24%);
}

#menu .world-studio-link,
#menu .tutorial-link,
#menu .preferences-open,
#menu .back-button,
#menu .secondary-action {
  border-color: var(--glass-edge);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 80%),
    rgb(255 255 255 / 3%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

#menu .world-studio-link:hover,
#menu .tutorial-link:hover,
#menu .preferences-open:hover,
#menu .back-button:hover,
#menu .secondary-action:hover {
  border-color: rgb(142 219 208 / 55%);
  background:
    linear-gradient(180deg, rgb(142 219 208 / 13%), transparent 90%),
    rgb(255 255 255 / 6%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 13%),
    0 4px 14px rgb(0 0 0 / 18%);
}

#menu .preferences-dialog,
#menu .account-dialog {
  border-color: rgb(239 255 241 / 25%);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 8%), transparent 42%),
    linear-gradient(180deg, rgb(26 37 30 / 96%), rgb(12 18 14 / 97%));
  box-shadow:
    0 28px 90px rgb(0 0 0 / 58%),
    inset 0 1px 0 rgb(255 255 255 / 20%);
  backdrop-filter: blur(36px) saturate(155%);
}

#menu .preferences-dialog::backdrop,
#menu .account-dialog::backdrop {
  background: rgb(1 4 2 / 58%);
  backdrop-filter: blur(18px) saturate(125%);
}

#menu .preferences-header,
#menu .account-dialog-header {
  border-bottom-color: var(--menu-line);
}

#menu .preferences-close {
  border-color: var(--glass-edge);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 9%), transparent),
    rgb(255 255 255 / 3%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%);
}

#menu .preferences-close:hover {
  border-color: rgb(255 255 255 / 34%);
  background-color: rgb(255 255 255 / 9%);
}

#menu .preferences-tabs,
#menu .account-modes {
  border-color: var(--glass-edge);
  border-radius: 8px;
  background: rgb(0 0 0 / 21%);
  box-shadow: inset 0 1px 4px rgb(0 0 0 / 25%);
}

#menu .preferences-tabs [role="tab"],
#menu .account-modes button {
  border-radius: 6px;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

#menu .preferences-tabs [role="tab"][aria-selected="true"],
#menu .account-modes button[aria-pressed="true"] {
  border-color: rgb(255 255 255 / 17%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 5%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 2px 7px rgb(0 0 0 / 22%);
}

#menu .account-entry-form input,
#menu #accountPanel form input,
#menu .code-entry input,
#menu .world-studio input,
#menu .world-studio select,
#menu .leaderboard-controls select {
  border-color: rgb(234 255 239 / 19%);
  border-radius: 7px;
  background: rgb(0 0 0 / 24%);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 19%);
}

#menu .account-entry-form input:focus-visible,
#menu #accountPanel form input:focus-visible,
#menu .code-entry input:focus-visible,
#menu .world-studio input:focus-visible,
#menu .world-studio select:focus-visible,
#menu .leaderboard-controls select:focus-visible {
  border-color: var(--menu-cyan);
  box-shadow:
    inset 0 1px 4px rgb(0 0 0 / 20%),
    0 0 0 3px rgb(142 219 208 / 18%);
}

#menu .level-choice,
#menu #levelPreview,
#menu #worldPreview,
#menu .world-library {
  border-color: var(--glass-edge);
  border-radius: 8px;
  background-color: rgb(4 9 6 / 66%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 7%),
    0 5px 16px rgb(0 0 0 / 18%);
}

#menu .level-row {
  border-bottom-color: rgb(230 250 235 / 8%);
}

#menu .level-row:hover {
  background: rgb(142 219 208 / 11%);
}

#menu .level-row.selected {
  background: linear-gradient(90deg, rgb(221 244 135 / 19%), rgb(221 244 135 / 5%));
  box-shadow: inset 3px 0 var(--menu-accent);
}

#menu .level-preview-panel {
  border-left-color: var(--menu-line);
}

#menu .code-play,
#menu .level-footer {
  border-top-color: var(--menu-line);
}

#menu .studio-header,
#menu .library-section > header {
  border-bottom-color: var(--menu-line);
}

#menu .world-studio,
#menu #accountPanel {
  scrollbar-color: rgb(199 224 203 / 35%) transparent;
}

#menu .world-studio .generator-form input,
#menu .world-studio .generator-form select,
#menu .leaderboard-controls select {
  min-height: 38px;
}

#menu .world-studio .world-row,
#menu .account-record {
  border-color: var(--menu-line);
  border-radius: 6px;
  background: rgb(255 255 255 / 5%);
  color: var(--menu-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

#menu .account-record-list,
#menu .leaderboard-entries {
  color: var(--menu-text);
}

#menu .account-record label {
  color: var(--menu-muted);
}

#menu .account-record input,
#menu .favorite-filter input {
  accent-color: var(--menu-accent);
}

#menu #accountPanel > header,
#menu #accountPanel .account-message {
  border-color: var(--menu-line);
}

#menu #accountPanel #accountManagement > p {
  border: 1px solid var(--glass-edge);
  border-left: 3px solid var(--menu-cyan);
  border-radius: 7px;
  background: rgb(255 255 255 / 5%);
  color: var(--menu-muted);
}

.hud {
  border-top-color: rgb(240 255 243 / 22%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 10px),
    rgb(13 20 16 / 91%);
  box-shadow: 0 -9px 30px rgb(0 0 0 / 28%);
  backdrop-filter: blur(22px) saturate(135%);
}

.toolbar-row {
  position: relative;
}

.tool,
.actions button {
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 58%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%);
}

.tool.active,
.actions button:hover:not(:disabled) {
  outline: 1px solid rgb(229 249 177 / 70%);
  outline-offset: -2px;
  background: linear-gradient(180deg, rgb(221 244 135 / 14%), rgb(255 255 255 / 4%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 0 14px rgb(221 244 135 / 12%);
}

.statusbar {
  border: 1px solid rgb(240 255 243 / 22%);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 10%), transparent 80%),
    rgb(28 39 32 / 87%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
  backdrop-filter: blur(16px) saturate(130%);
}

.statusbar span {
  border-color: rgb(240 255 243 / 15%);
}

#undoSkill {
  color: var(--hud-text);
}

#undoSkill:hover:not(:disabled) {
  background: rgb(255 255 255 / 8%);
}

#minimap {
  border: 1px solid rgb(235 255 239 / 50%);
  border-radius: 6px;
  outline: 0;
  box-shadow:
    0 8px 28px rgb(0 0 0 / 36%),
    0 0 0 1px rgb(255 255 255 / 8%);
}

.pan-hint,
.gamepad-status,
.debug-panel,
.camera-controls,
#replayTimeline {
  border-color: rgb(239 255 241 / 21%);
  border-radius: 9px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 9%), transparent 52%),
    rgb(16 25 20 / 78%);
  box-shadow:
    0 8px 28px rgb(0 0 0 / 30%),
    inset 0 1px 0 rgb(255 255 255 / 12%);
  backdrop-filter: blur(22px) saturate(145%);
}

.camera-controls button,
#replayCancel {
  border-color: rgb(239 255 241 / 15%);
  border-radius: 6px;
  background: rgb(255 255 255 / 4%);
}

.camera-controls button:hover,
#replayCancel:hover {
  border-color: rgb(142 219 208 / 45%);
  background: rgb(142 219 208 / 10%);
}

.result .result-panel {
  border: 1px solid rgb(239 255 241 / 22%);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 44%),
    rgb(15 24 19 / 94%);
  box-shadow:
    0 24px 80px rgb(0 0 0 / 52%),
    inset 0 1px 0 rgb(255 255 255 / 15%);
  backdrop-filter: blur(26px) saturate(140%);
}

.result .result-links button {
  border-color: rgb(239 255 241 / 19%);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 7%), transparent),
    rgb(255 255 255 / 3%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
}

.result .result-links #continueLevel {
  border-color: rgb(239 255 194 / 57%);
  background: linear-gradient(180deg, #e6f9a1, #cde76e);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 5px 15px rgb(175 206 79 / 18%);
}

.result .result-links button:hover {
  border-color: rgb(142 219 208 / 55%);
  background-color: rgb(142 219 208 / 9%);
  transform: translateY(-1px);
}

.result .result-links #continueLevel:hover {
  background: linear-gradient(180deg, #f0ffb3, #d9f17e);
}

@supports not (backdrop-filter: blur(1px)) {
  #menu .menu-window,
  #menu .preferences-dialog,
  #menu .account-dialog,
  .hud,
  .statusbar,
  .debug-panel,
  #replayTimeline,
  .result .result-panel {
    background-color: #111a15;
  }
}

@media (max-width: 760px) {
  #menu .account-entry {
    padding-inline: 14px;
  }

  .statusbar {
    border-radius: 7px 7px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}