.levels-hero {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 26px;
}

.levels-page .levels-hero[hidden],
.levels-page .levels-toolbar[hidden],
.levels-page .levels-result-summary[hidden],
.levels-page .levels-pagination[hidden],
.levels-page .nav-wrapper[hidden] {
  display: none !important;
}

html.legacy-levels-page .levels-page .add-level-button {
  display: none !important;
}

html.levels-list-loading .levels-page .levels-hero {
  display: block !important;
}

html.profile-levels-loading .levels-page .levels-tab:not([data-level-tab="all"]) {
  display: none !important;
}

html.profile-levels-loading .levels-page .levels-result-summary,
html.profile-levels-loading .levels-page .levels-pagination,
html.profile-levels-loading .levels-page .nav-wrapper {
  display: none !important;
}

html.level-page-loading .level-detail-page .page-wrapper:not(.level-page-loading-wrapper) {
  display: none;
  pointer-events: none;
}

html.level-page-loading .level-detail-page .nav-wrapper {
  display: none !important;
}

.levels-hero h1 {
  color: var(--primary-dark);
  margin: 0;
}

.portal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 18px;
}

.portal-stat {
  background: linear-gradient(#ffffff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 7px rgba(0,0,0,0.08);
}

.portal-stat span {
  display: block;
  color: #5d7080;
  font-size: 13px;
  font-weight: bold;
}

.portal-stat strong {
  display: block;
  color: var(--primary-dark);
  font-size: 28px;
  margin-top: 4px;
}

.source-grid,
.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.source-card,
.level-list-card,
.legacy-panel,
.level-panel {
  background: linear-gradient(#ffffff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(0,0,0,0.08);
}

.source-card,
.level-list-card,
.legacy-panel {
  padding: 14px;
}

.source-card h2,
.level-list-card h2 {
  color: var(--primary-dark);
  font-size: 20px;
  margin: 0 0 6px;
}

.source-card p,
.level-list-card p {
  color: #435463;
  line-height: 1.4;
  margin: 7px 0;
}

.source-meta,
.level-card-meta,
.level-meta-grid {
  display: grid;
  gap: 7px;
}

.source-meta,
.level-card-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.meta-pill {
  background: #e6eef6;
  border: 1px solid #c4d3df;
  border-radius: 7px;
  padding: 7px 9px;
  color: #2f4658;
  font-size: 13px;
}

.meta-pill span {
  display: block;
  color: #65798a;
  font-size: 11px;
  font-weight: bold;
}

.level-action,
.levels-button,
.level-form button,
.copy-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
}

.levels-button[hidden] {
  display: none !important;
}

.levels-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 10px auto 6px;
}

.levels-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.levels-toolbar-actions {
  margin-bottom: 1px;
}

.levels-toolbar .levels-icon-button:hover img {
  opacity: 1;
}

.level-form select,
.level-form textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  padding: 8px 10px;
}

.level-form-page .legacy-blacklisted-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.level-form-page .legacy-blacklisted-info-wrap[hidden] {
  display: none;
}

.level-form-page .legacy-blacklisted-info-button {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  padding: 0;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: var(--primary-dark);
  box-shadow: inset 0 1px 0 #ffffff;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  cursor: help;
}

.level-form-page .legacy-blacklisted-info-button:hover,
.level-form-page .legacy-blacklisted-info-button:focus-visible {
  border-color: #5f86a3;
  color: var(--primary-dark);
  outline: none;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 2px rgba(95, 134, 163, 0.18);
}

.level-form-page .legacy-blacklisted-notice {
  display: none;
}

.level-form-page .legacy-blacklisted-floating-notice,
.legacy-blacklisted-floating-notice {
  display: block;
  box-sizing: border-box;
  position: fixed;
  z-index: 10000;
  width: min(360px, calc(100vw - 40px));
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(#fbfdff, #eef4fa);
  box-shadow: 0 6px 16px rgba(42, 68, 89, 0.2);
  color: #385d78;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.level-form-page .legacy-blacklisted-floating-notice::after,
.legacy-blacklisted-floating-notice::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #eef4fa;
  transform: translateX(-50%) rotate(45deg);
}

.level-form-page .legacy-blacklisted-floating-notice.visible,
.legacy-blacklisted-floating-notice.visible {
  opacity: 1;
  transform: translateY(0);
}

.level-form-page .legacy-blacklisted-floating-notice strong,
.legacy-blacklisted-floating-notice strong {
  color: var(--primary-dark);
}

.levels-icon-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.levels-icon-control[hidden] {
  display: none;
}

.levels-toolbar-filters .tooltip {
  bottom: 118%;
}

.levels-view-controls .tooltip {
  z-index: 5;
}

.levels-view-controls .levels-icon-control:hover .tooltip {
  opacity: 1;
}

.levels-icon-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
}

.levels-toolbar-row > .levels-icon-control > .levels-icon-button {
  box-sizing: border-box;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  padding: 0 !important;
}

.levels-icon-button img,
.levels-view-controls img {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 0.82;
  filter: brightness(0) saturate(100%) invert(25%) sepia(28%) saturate(1061%) hue-rotate(164deg) brightness(92%) contrast(86%);
}

.levels-toolbar-row > .levels-icon-control > .levels-icon-button img {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px;
  max-height: 20px;
}

.levels-filter-body input,
.levels-filter-body select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.levels-tabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: calc(100% - 4px);
  max-width: 1240px;
  margin: 8px auto 18px;
  border-bottom: 2px solid #cfdbe6;
}

.levels-tab {
  appearance: none;
  background: none;
  border: 0;
  color: #5a6b78;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 7px 4px;
  position: relative;
  transition: color 0.2s ease;
}

.levels-tab:hover,
.levels-tab.active {
  color: var(--primary-dark);
}

.levels-tab.active {
  cursor: default;
}

.levels-tab[hidden] {
  display: none !important;
}

.levels-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: background 0.2s ease;
}

.levels-tab.active::after {
  background: var(--primary);
  height: 3px;
}

.levels-tabs[hidden] {
  display: none !important;
}

html.levels-source-tabs-visible .levels-tabs {
  margin-bottom: 9px;
}

.levels-source-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  box-sizing: border-box;
  width: min(100%, 620px);
  max-width: calc(100% - 4px);
  margin: 0 auto 12px;
  padding: 0;
  border-bottom: 2px solid #cfdbe6;
}

@media (min-width: 641px) and (max-width: 1280px) {
  .levels-source-tabs {
    width: calc(100% - 4px);
    max-width: 1240px;
  }
}

.levels-source-tabs[hidden] {
  display: none !important;
}

.levels-source-tab {
  appearance: none;
  background: none;
  border: 0;
  color: #5a6b78;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 0 4px 6px;
  position: relative;
  transition: color 0.2s ease;
}

.levels-source-tab:hover,
.levels-source-tab.active {
  color: var(--primary-dark);
}

.levels-source-tab.active {
  cursor: default;
}

.levels-source-tab:focus-visible {
  color: var(--primary-dark);
  outline: 2px solid rgba(67, 127, 158, 0.35);
  outline-offset: 4px;
}

.levels-source-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: background 0.2s ease;
}

.levels-source-tab.active::after {
  background: var(--primary);
  height: 3px;
}

.levels-view-controls {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(#ffffff, #e3e9ef);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.1);
  padding: 0;
}

.levels-view-controls::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--border);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 #ffffff;
}

.levels-view-controls .levels-icon-control {
  height: 44px;
  overflow: visible;
}

.levels-view-controls .levels-icon-control:first-child .levels-icon-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.levels-view-controls .levels-icon-control:last-child .levels-icon-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.levels-view-controls .levels-icon-button {
  position: relative;
  z-index: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  border: 0;
  background: #edf3f8;
  box-shadow: none;
  border-radius: 0;
  outline: none;
}

.levels-view-controls .levels-icon-control:not(:last-child) .levels-icon-button {
  box-shadow: none;
}

.levels-toolbar .levels-view-controls .levels-icon-button:hover {
  border: 0;
  background: #edf3f8;
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px var(--border);
  z-index: 3;
}

.levels-toolbar .levels-view-controls .levels-icon-button:hover img {
  opacity: 0.82;
  filter: brightness(0) saturate(100%) invert(25%) sepia(28%) saturate(1061%) hue-rotate(164deg) brightness(92%) contrast(86%);
}

.levels-view-controls .levels-icon-control:first-child .levels-icon-button {
  border-top-left-radius: 11px;
  border-bottom-left-radius: 11px;
}

.levels-view-controls .levels-icon-control:last-child .levels-icon-button {
  border-top-right-radius: 11px;
  border-bottom-right-radius: 11px;
}

.levels-icon-button.active {
  position: relative;
  z-index: 2;
  border-color: #4a6f8a;
  background: linear-gradient(#5f86a3, #4a6f8a);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.22);
}

.levels-view-controls .levels-icon-button.active {
  border: 0;
  box-shadow: none;
}

.levels-view-controls .levels-icon-control .levels-icon-button.active {
  box-shadow: none;
}

.levels-toolbar .levels-view-controls .levels-icon-button.active:hover {
  background: linear-gradient(#5f86a3, #4a6f8a);
  color: #fff;
  box-shadow: none;
}

.levels-toolbar .levels-view-controls .levels-icon-control .levels-icon-button.active:hover {
  box-shadow: none;
}

.levels-toolbar .levels-view-controls .levels-icon-button.active:hover img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.levels-icon-button.active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.levels-page .help-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 60, 0.65);
}

.levels-page .help-modal.hidden {
  display: none;
}

.levels-page .help-modal-content {
  width: min(860px, 92vw);
  max-height: 82vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(#f4f8fc, #e3edf6);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 30px rgba(0,0,0,0.3);
  animation: popIn 0.18s ease;
}

@keyframes popIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.levels-page .help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(#4a7fa3, #3b6e8f);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

.levels-page .help-header button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
}

.levels-page .help-header button::before,
.levels-page .help-header button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.levels-page .help-header button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.levels-page .help-header button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.levels-page .help-body {
  padding: 22px 28px 10px;
}

.levels-page .help-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #cfdbe6;
}

.levels-page .help-footer button {
  padding: 7px 16px;
  font-weight: 700;
}

.levels-filter-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px 20px;
  text-align: left;
}

.levels-page .levels-filter-modal-content .levels-filter-body {
  padding-bottom: 4px;
}

.levels-filter-field {
  display: grid;
  gap: 8px;
  color: var(--primary-dark);
  font-weight: 400;
}

.levels-filter-field[hidden] {
  display: none !important;
}

.levels-filter-body-profile label:has(#game-filter) {
  grid-column: 1;
  grid-row: 2;
}

.levels-filter-body-profile label:has(#difficulty-filter) {
  grid-column: 2;
  grid-row: 2;
}

.levels-filter-body-profile label:has(#sort-filter) {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  width: calc(100% / 1.4);
}

.levels-filter-field-wide {
  grid-column: 1 / -1;
}

.levels-filter-field > span {
  font-size: 16px;
  font-weight: 600;
}

.levels-checkbox-field {
  grid-column: 1 / -1;
  box-sizing: border-box;
  margin-top: 2px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  color: var(--primary-dark);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
}

.levels-checkbox-field input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #4f7897;
}

.levels-page .levels-filter-actions {
  padding: 6px 28px 14px;
  border-top: 0;
}

.levels-page .levels-filter-actions button {
  box-sizing: border-box;
  height: 35px;
  font-size: 14px;
}

.levels-page .levels-filter-actions #search-level-filters {
  width: 79px;
}

.levels-page .levels-filter-actions #clear-level-filters {
  width: 67px;
}

.levels-result-summary {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: min(100%, 1220px);
  box-sizing: border-box;
  margin: 16px auto 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3f5b70;
  text-align: center;
  box-shadow: none;
}

.levels-result-summary[hidden] {
  display: none;
}

.levels-result-summary strong {
  display: inline;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1.2;
}

.levels-result-summary span {
  display: inline;
  margin-top: 0;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 400;
}

.levels-result-summary:not([hidden]) + .levels-grid {
  margin-top: 6px;
}

.levels-result-summary:not([hidden]) + .levels-grid.levels-grid-empty {
  margin-top: 8px;
}

.level-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 14px;
}

.level-panel {
  overflow: hidden;
}

.level-panel-header {
  background: linear-gradient(#5f86a3, #4a6f8a);
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.level-panel-body {
  padding: 14px;
}

.level-code {
  min-height: 265px;
  width: 100%;
  resize: vertical;
  font-family: var(--site-font);
  font-size: 13px;
  line-height: 1.35;
  border: 1px solid #aab8c4;
  border-radius: 6px;
  padding: 10px;
  background: #f9fcff;
}

.level-detail-title {
  color: var(--primary-dark);
  text-align: center;
  margin: 0 0 14px;
}

.level-meta-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.level-description {
  background: #e6eef6;
  border: 1px solid #d0dde8;
  border-radius: 7px;
  color: #263848;
  line-height: 1.45;
  padding: 12px;
}

.level-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.level-form label {
  color: var(--primary-dark);
  font-weight: bold;
}

.level-form textarea {
  min-height: 105px;
  resize: vertical;
}

.form-message {
  min-height: 20px;
  color: #42627a;
  font-size: 13px;
  text-align: center;
}

.comment-list {
  display: grid;
  gap: 10px;
}

.comment-card {
  background: #f8fbff;
  border: 1px solid #cfdae4;
  border-radius: 7px;
  padding: 10px 12px;
}

.comment-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--primary-dark);
  font-weight: bold;
  margin-bottom: 7px;
}

.comment-card p {
  margin: 0;
  color: #263848;
}

.legacy-panel {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.legacy-panel h1 {
  color: var(--primary-dark);
  margin-top: 0;
}

@media (max-width: 880px) {
  .portal-stats,
  .level-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .source-meta,
  .level-card-meta,
  .level-meta-grid {
    grid-template-columns: 1fr;
  }

  .levels-filter-body {
    grid-template-columns: 1fr;
  }

  .levels-filter-body-profile label:has(#game-filter),
  .levels-filter-body-profile label:has(#difficulty-filter),
  .levels-filter-body-profile label:has(#sort-filter) {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}

/* =========================
   Portal: compact source list
========================= */

.portal-stats-compact {
  max-width: 1230px;
  margin: 14px auto 18px;
}

.level-source-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
}

.level-source-columns,
.level-source-row {
  display: grid;
  grid-template-columns:
    minmax(320px, 1.8fr)
    minmax(72px, 0.45fr)
    minmax(86px, 0.5fr)
    minmax(72px, 0.45fr)
    minmax(165px, 0.8fr)
    minmax(82px, 0.45fr);
  align-items: center;
  gap: 14px;
  width: 100%;
}

.level-source-columns {
  padding: 0 18px 2px;
  color: #617589;
  font-size: 14px;
  font-weight: 700;
}

.level-source-columns span:not(:first-child),
.level-source-row > span {
  text-align: center;
}

.level-source-row {
  min-height: 92px;
  padding: 13px 18px;
  border: 1px solid #b7c7d4;
  border-radius: 8px;
  background: linear-gradient(#f8fbff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.06);
}

.level-source-name {
  min-width: 0;
  text-align: left;
}

.level-source-name h2 {
  margin: 0 0 4px;
  color: var(--primary-dark);
  font-size: 21px;
}

.level-source-name p {
  margin: 0;
  color: #526a7d;
  font-size: 14px;
  line-height: 1.35;
}

.level-source-row > span {
  color: #183247;
  font-size: 15px;
  font-weight: 700;
}

.level-source-row .level-action {
  justify-self: center;
  min-width: 74px;
}

/* =========================
   Levels list: member-list rhythm
========================= */

.levels-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
}

.levels-result-summary:not([hidden]) + .levels-grid {
  margin-top: 6px;
}

.levels-result-summary:not([hidden]) + .levels-grid.levels-grid-empty {
  margin-top: 8px;
}

.level-list-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(460px, 1.55fr) 118px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 112px;
  text-align: left;
}

.level-list-card h2 {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 3px;
}

.level-list-card p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

.level-list-card .level-card-meta {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
}

.level-list-card .level-action {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: center;
}

/* =========================
   Level detail: single profile-style sheet
========================= */

.level-profile {
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 0 12px;
  text-align: left;
}

.level-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(
    to bottom,
    #7fa6c1 0%,
    #8fb3cb 54%,
    #a9c6da 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 7px rgba(0,0,0,0.08);
}

.level-detail-title {
  margin: 0;
  color: #f8fbff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.level-subtitle {
  margin-top: 4px;
  color: #eef6fc;
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}

.level-meta-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.level-stat {
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #b7c7d4;
  border-radius: 6px;
  background: linear-gradient(#f9fcff, #e8f0f6);
  box-shadow: inset 0 1px 0 #ffffff;
  text-align: center;
}

.level-stat span {
  display: block;
  color: #617589;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.level-stat strong {
  display: block;
  margin-top: 5px;
  color: #183247;
  font-size: 15px;
  line-height: 1.25;
}

.level-section {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f8fbff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.06);
}

.level-section h2,
.level-section-heading h2 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 20px;
  text-align: center;
}

.level-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.level-section-heading h2 {
  margin: 0;
  text-align: left;
}

.level-code {
  min-height: 245px;
  max-height: 420px;
  resize: vertical;
  background: linear-gradient(#ffffff, #f5f9fd);
}

.level-description {
  background: linear-gradient(#f4f8fc, #e7eff6);
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-feedback-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.level-feedback-column {
  min-width: 0;
}

.level-feedback-column + .level-feedback-column {
  padding-top: 14px;
  border-top: 1px solid rgba(95,134,163,0.22);
}

.level-form {
  margin-top: 0;
}

.level-form select,
.level-form textarea {
  width: 100%;
  background: linear-gradient(#ffffff, #f5f9fd);
}

.level-form textarea {
  resize: vertical;
}

.level-form button,
.copy-code-btn,
.levels-button,
.level-action {
  border-radius: 10px;
}

.comment-list {
  gap: 8px;
}

.comment-card {
  background: linear-gradient(#f9fcff, #edf3f8);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 #ffffff;
}

.comment-card header {
  color: var(--primary-dark);
}

.level-bottom-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 980px) {
  .level-source-columns {
    display: none;
  }

  .level-source-row,
  .level-list-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .level-list-card h2,
  .level-list-card p,
  .level-list-card .level-card-meta,
  .level-list-card .level-action {
    grid-column: 1;
    grid-row: auto;
  }

  .level-source-row > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    text-align: right;
    padding-top: 8px;
    border-top: 1px solid rgba(95,134,163,0.16);
  }

  .level-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .level-feedback-column + .level-feedback-column {
    padding-top: 14px;
    border-top: 1px solid rgba(95,134,163,0.22);
  }
}

@media (max-width: 620px) {
  .level-profile-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .level-meta-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Revised level portal
========================= */

.levels-hero {
  max-width: 960px;
  margin-bottom: 18px;
}

.levels-hero h1 {
  font-size: 32px;
}

.levels-hero p {
  max-width: 900px;
  color: #2f4658;
  font-size: 17px;
}

.level-source-list {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1180px;
  border: 1px solid rgba(95,134,163,0.28);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.14);
}

.level-source-list.level-portal-unavailable-list {
  grid-template-columns: 1fr;
}

.level-source-list.level-portal-unavailable-list .level-portal-loading {
  grid-column: 1 / -1;
  width: 100%;
}

.level-source-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    122px
    28px
    minmax(110px, max-content)
    minmax(0, 1fr);
  grid-template-areas:
    "name name name name name"
    ". icon . meta ."
    "description description description description description";
  align-content: start;
  gap: 16px 0;
  min-height: 218px;
  padding: 22px 24px;
  border: 0;
  border-right: 1px solid rgba(95,134,163,0.24);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease;
}

.level-source-row:last-child {
  border-right: 0;
}

.level-source-row:hover {
  background: rgba(255,255,255,0.36);
  box-shadow: none;
  color: inherit;
}

.level-source-icon {
  grid-area: icon;
  width: 122px;
  height: 122px;
  align-self: center;
  justify-self: center;
  border-radius: 6px;
  object-fit: contain;
  image-rendering: auto;
}

.level-source-name {
  grid-area: name;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  padding-bottom: 8px;
  overflow: visible;
}

.level-source-name h2 {
  display: inline-block;
  margin: 0;
  max-width: 100%;
  min-height: 33px;
  overflow: visible;
  color: var(--primary-dark);
  font-size: 23px;
  line-height: 33px;
  text-overflow: clip;
  white-space: nowrap;
}

.level-source-row:hover .level-source-name h2 {
  text-decoration: underline;
}

.level-source-meta {
  grid-area: meta;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-self: start;
  align-self: center;
  min-width: 110px;
  padding-top: 0;
  border-top: 0;
}

.level-source-meta span {
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  gap: 5px;
  padding-bottom: 0;
  border-bottom: 0;
  color: #183247;
  text-align: left;
}

.level-source-meta span:last-child {
  border-bottom: 0;
}

.level-source-meta b {
  color: var(--primary-dark);
  font-size: 17px;
  line-height: 1.2;
}

.level-source-meta strong {
  color: #183247;
  font-size: 23px;
  line-height: 1.2;
}

.level-source-archive-mark {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-size: 20px;
  line-height: 1;
  opacity: 0.95;
}

.level-source-description {
  grid-area: description;
  margin: 0;
  color: #344f65;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

/* =========================
   Revised compact levels list
========================= */

.levels-grid {
  gap: 10px;
}

.level-list-card {
  grid-template-columns: 116px minmax(250px, 1fr) minmax(430px, 1.05fr);
  min-height: 112px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

.level-list-card:hover {
  border-color: #5f86a3;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 10px rgba(0,0,0,0.1);
}

.level-thumb {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 104px;
  aspect-ratio: 4 / 3;
  border: 1px solid #b7c7d4;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0)),
    linear-gradient(135deg, #7fa6c1, #d6e4ef);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.level-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-list-main {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
}

.level-list-card h2 {
  grid-column: auto;
  grid-row: auto;
  margin: 0 0 2px;
  color: var(--primary-dark);
  font-size: 23px;
  line-height: 1.15;
}

.level-list-card:hover h2 {
  text-decoration: underline;
}

.level-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--role-color);
  font-size: 18px;
  font-weight: 700;
}

.level-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--role-color);
  background: #4a90c2;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}

.level-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.level-card-quick {
  grid-column: 3;
  grid-row: 1 / 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
  align-items: center;
}

.level-card-quick span {
  min-height: 0;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(95,134,163,0.2);
  border-radius: 0;
  background: transparent;
  color: #183247;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 10px;
}

.level-card-quick span b {
  color: #617589;
  font-size: 13px;
}

/* =========================
   Revised condensed level detail
========================= */

.level-profile {
  max-width: 1240px;
}

.level-profile-header {
  min-height: 0;
  margin-bottom: 10px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.level-detail-title {
  color: var(--primary-dark);
  font-size: 34px;
  text-shadow: none;
}

.level-author-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.level-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--role-color);
  background: #4a90c2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.level-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.level-author-name {
  font-size: 20px;
  font-weight: 800;
}

.level-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f8fbff, #edf3f8);
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
}

.level-actions img {
  width: 16px;
  height: 16px;
  opacity: 0.78;
}

.level-core {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 390px;
  gap: 12px;
  align-items: stretch;
}

.level-core .level-section {
  margin-top: 0;
}

.level-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.level-info-section,
.level-rate-section {
  padding: 12px 14px;
}

.level-detail-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0)),
    linear-gradient(135deg, #7fa6c1, #d6e4ef);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.level-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
}

.level-info-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(95,134,163,0.16);
  color: #465c70;
  font-size: 14px;
}

.level-info-line:last-child {
  border-bottom: 0;
}

.level-info-line > span {
  color: #617589;
  font-weight: 700;
}

.level-info-line strong {
  color: #183247;
  text-align: right;
}

.level-code {
  min-height: 330px;
  max-height: 520px;
}

.level-description {
  margin-top: 8px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid rgba(95,134,163,0.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.38;
}

.level-rate-section .level-form {
  gap: 7px;
}

.level-feedback-section {
  margin-top: 12px;
  padding: 14px;
}

.level-feedback-column {
  width: 100%;
}

.level-feedback-section h2 {
  text-align: center;
}

.level-feedback-section .level-form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 10px;
}

.level-feedback-section textarea {
  min-height: 112px;
  resize: none;
  background: linear-gradient(#ffffff, #f5f9fd);
}

.level-comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(95,134,163,0.18);
}

.level-comment-form-footer label {
  margin-right: auto;
}

.level-comment-form-footer select {
  max-width: 170px;
}

.comment-card header {
  align-items: center;
  margin-bottom: 8px;
}

.comment-card p {
  padding-left: 2px;
  line-height: 1.45;
}

.comment-card {
  padding: 14px 18px;
  border-radius: 8px;
}

.level-comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-dark);
}

.level-comment-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #414141;
  background: #4a90c2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

.level-comment-user strong {
  color: var(--primary-dark);
  font-size: 14px;
}

.comment-card footer {
  margin-top: 9px;
  color: #6b7c8c;
  font-size: 12px;
  text-align: right;
}

.level-feedback-section,
.level-profile > .level-section:has(.comment-list) {
  border-top: 1px solid var(--border);
}

@media (max-width: 1050px) {
  .level-source-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: calc(100% - 24px);
    max-width: 760px;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  .level-source-row,
  .level-list-card,
  .level-core {
    grid-template-columns: 1fr;
  }

  .level-source-row {
    grid-template-areas:
      "name"
      "icon"
      "meta"
      "description";
    min-height: 0;
    padding: 18px;
    border: 1px solid rgba(95,134,163,0.3);
    border-radius: 6px;
    background: rgba(255,255,255,0.18);
  }

  .level-source-row:last-child {
    border-right: 1px solid rgba(95,134,163,0.3);
  }

  .level-source-row:nth-child(odd):last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7px);
    min-width: min(100%, 320px);
  }

  .level-source-meta {
    justify-self: center;
  }

  .level-source-icon {
    justify-self: center;
  }

  .level-list-main,
  .level-card-quick,
  .level-thumb {
    grid-column: 1;
    grid-row: auto;
  }

  .level-card-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .levels-hero {
    margin-bottom: 16px;
  }

  .level-source-list {
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
    max-width: 360px;
  }

  .levels-hero h1 {
    font-size: 29px;
    line-height: 1.12;
  }

  .levels-hero p {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    line-height: 1.35;
  }

  .level-source-row {
    gap: 14px;
    padding: 17px 14px;
  }

  .level-source-row:nth-child(odd):last-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
    min-width: 0;
  }

  .level-source-name {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    justify-content: center;
    text-align: center;
  }

  .level-source-name h2 {
    flex: 0 1 auto;
    margin: 0;
    min-height: 0;
    max-width: none;
    font-size: clamp(16px, 4.75vw, 22px);
    line-height: 1.18;
    text-align: center;
    text-wrap: normal;
    white-space: nowrap;
  }

  .level-source-archive-mark {
    position: static;
    align-self: center;
    margin-top: 0;
    font-size: 18px;
  }

  .level-source-icon {
    width: 112px;
    height: 112px;
  }

  .level-source-meta {
    min-width: 0;
  }

  .level-source-meta span {
    text-align: center;
  }

  .level-source-description {
    font-size: 15px;
    text-align: center;
  }

  .level-card-quick {
    grid-template-columns: 1fr;
  }

  .level-detail-title {
    font-size: 28px;
  }
}

@media (max-width: 360px) {
  .level-source-name {
    gap: 6px;
  }

  .level-source-name h2 {
    font-size: 15.5px;
  }
}

/* =========================
   Individual level page reset
========================= */

.level-profile {
  max-width: 1230px;
  padding-bottom: 0;
}

.level-profile-header {
  display: block;
  margin-bottom: 14px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

.level-detail-title {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 34px;
  line-height: 1.12;
  text-align: left;
}

.level-author-block,
.level-comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-author-avatar,
.level-comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--role-color, #414141);
  background: #4a90c2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.level-author-avatar {
  border-width: 3px;
}

.level-author-avatar img,
.level-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-author-name,
.level-comment-user span:not(.level-comment-avatar) {
  font-size: 15px;
  font-weight: 600;
}

.level-actions {
  justify-content: flex-start;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
}

.level-actions button {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 14px;
}

.level-core {
  grid-template-columns: minmax(0, 1.5fr) minmax(360px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.level-section {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.level-section h2,
.level-section-heading h2,
.level-comments-area h2 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 21px;
  text-align: left;
}

.level-section-heading {
  margin-bottom: 10px;
}

.level-code {
  min-height: 430px;
  max-height: none;
  background: #fff;
}

.level-side {
  gap: 14px;
}

.level-detail-thumb {
  border-radius: 8px;
}

.level-description-section,
.level-info-section,
.level-rate-section {
  padding-top: 0;
}

.level-description {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #263848;
  font-size: 15px;
  line-height: 1.45;
}

.level-meta-grid {
  margin: 0;
  gap: 0;
}

.level-info-line {
  padding: 7px 0;
  border-bottom: 1px solid rgba(95,134,163,0.2);
}

.level-rate-section {
  margin-top: 2px;
}

.level-rate-section .level-form {
  gap: 8px;
}

.level-comments-area {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.level-comments-area .level-form {
  margin: 0;
  gap: 10px;
}

.level-comments-area textarea {
  min-height: 118px;
  resize: none;
  background: linear-gradient(#ffffff, #f5f9fd);
}

.level-comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}

.level-comment-form-footer label {
  margin-right: auto;
}

.level-comment-form-footer select {
  max-width: 170px;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comment-card {
  border-radius: 6px;
  padding: 14px;
  background: linear-gradient(#ffffff, #edf3f8);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 #ffffff;
}

.comment-card header {
  margin-bottom: 8px;
}

.level-comment-user strong {
  color: var(--primary-dark);
  font-size: 15px;
}

.comment-card p {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.45;
}

.comment-card footer {
  margin-top: 8px;
  color: #6b7c8c;
  font-size: 12px;
  text-align: right;
}

.level-bottom-nav {
  display: none;
}

@media (max-width: 900px) {
  .level-core {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  }
}

/* =========================
   Individual level page - profile-style layout
========================= */

.level-detail-page .page-wrapper {
  max-width: 1500px;
}

.level-detail-page .nav-wrapper {
  max-width: 1540px;
}

.level-detail-page .box-inner.single-column,
.level-detail-page .single-column .text {
  max-width: none;
  width: 100%;
}

.level-detail-page .box-inner.single-column {
  padding: 24px 36px 18px;
}

.level-detail-page .level-profile {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.level-detail-page .level-profile-header {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border-bottom: 0;
}

.level-detail-page .level-detail-title {
  margin: 0;
  color: var(--primary-dark);
  font-size: 36px;
  line-height: 1.15;
  text-align: center;
}

.level-detail-page .level-actions {
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f8fbff, #edf3f8);
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-detail-page .level-actions button {
  min-height: 42px;
  padding: 8px 16px;
  font-size: 16px;
}

.level-detail-page .level-actions img {
  width: 17px;
  height: 17px;
}

.level-detail-page .level-core {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: 24px;
  align-items: stretch;
}

.level-detail-page .level-left-column,
.level-detail-page .level-side {
  min-width: 0;
}

.level-detail-page .level-column-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f8fbff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.06);
}

.level-detail-page .level-section {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.level-detail-page .level-section h2,
.level-detail-page .level-section-heading h2 {
  margin: 0 0 10px;
  color: var(--primary-dark);
  font-size: 23px;
  text-align: left;
}

.level-detail-page .level-detail-thumb {
  width: min(100%, 520px);
  aspect-ratio: 4 / 3;
  max-height: none;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0)),
    linear-gradient(135deg, #7fa6c1, #d6e4ef);
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-detail-page .level-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-detail-page .level-code {
  min-height: 210px;
  height: 230px;
  max-height: 230px;
  width: 100%;
  resize: none;
  background: #fff;
}

.level-detail-page .level-description {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #263848;
  font-size: 15px;
  line-height: 1.45;
}

.level-detail-page .level-info-author {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.level-detail-page .level-author-section,
.level-detail-page .level-info-section {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(95,134,163,0.2);
}

.level-detail-page .level-description-section {
  padding-bottom: 0;
  border-bottom: 0;
}

.level-detail-page .level-author-section h2 {
  margin-bottom: 8px;
}

.level-detail-page .comment-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-detail-page .comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--role-color, #414141);
  background: #4a90c2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.level-detail-page .comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-detail-page .comment-username {
  font-size: 15px;
  font-weight: 600;
}

.level-detail-page .level-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.level-detail-page .level-info-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(95,134,163,0.2);
  color: #465c70;
  font-size: 15px;
}

.level-detail-page .level-info-line:last-child {
  border-bottom: 0;
}

.level-detail-page .level-info-line > span {
  color: #617589;
  font-weight: 700;
}

.level-detail-page .level-info-line strong {
  color: #183247;
  text-align: right;
}

.level-detail-page .level-rate-section .level-form {
  display: grid;
  gap: 8px;
}

.level-detail-page .level-rate-section select {
  width: 100%;
}

.level-detail-page .profile-comments-section {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.level-detail-page .profile-comments-section h2 {
  margin: 0 0 14px;
  color: #000;
  font-size: 28px;
  text-align: left;
}

.level-detail-page .profile-comment-form {
  margin-top: 12px;
  padding: 14px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-detail-page .profile-comment-form textarea {
  width: 100%;
  min-height: 112px;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  background: linear-gradient(#ffffff, #f5f9fd);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.level-detail-page .level-comment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 36px;
}

.level-detail-page .level-comment-actions .char-count {
  margin-left: auto;
  color: #6b7c8c;
  font-size: 12px;
}

.level-detail-page .level-comment-actions .char-count.warning,
.level-detail-page .thread-char-count.warning,
.level-detail-page .comment-form-actions .char-count.warning {
  color: #c0392b;
  font-weight: bold;
}

.level-detail-page .include-rate-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  white-space: nowrap;
}

.level-detail-page .include-rate-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #4f7897;
}

.level-detail-page .level-comment-actions label {
  color: var(--primary-dark);
  font-weight: bold;
}

.level-detail-page .level-comment-actions .include-rate-option {
  color: #333;
  font-weight: 400;
}

.level-detail-page .level-comment-actions .include-rate-option span {
  color: inherit;
  font-size: 14px;
  font-weight: 400;
}

.level-detail-page .level-comment-actions select {
  width: 160px;
  height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font: inherit;
}

.level-detail-page .level-comment-actions .control-btn {
  min-height: 36px;
  padding: 6px 14px;
}

.level-detail-page .reaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 14px;
  line-height: normal;
  overflow: visible;
}

.level-detail-page .profile-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.level-detail-page .comment {
  border-radius: 6px;
  padding: 14px;
  font-size: 14px;
  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-detail-page .comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.level-detail-page .comment-body {
  padding-right: 10px;
  color: #333;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.level-detail-page .level-comment.editing {
  gap: 6px;
}

.level-detail-page .level-comment.editing .comment-body {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.level-detail-page .level-comment.editing .comment-form-footer {
  margin-top: 8px;
  padding-bottom: 0;
  overflow: visible;
}

.level-detail-page .level-comment.editing .comment-footer {
  justify-content: flex-end;
  margin-top: 4px;
}

.level-detail-page .level-comment.editing .comment-date {
  margin-left: 0;
}

.level-detail-page .level-comment.editing .profile-comment-footer-actions {
  display: none;
}

.level-detail-page .comment-footer {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  font-size: 12px;
  color: #6b7c8c;
}

.level-detail-page .comment-date {
  margin-left: auto;
}

.level-detail-page .level-comment-rating {
  display: inline-flex;
  align-items: center;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: inherit;
}

.level-detail-page .no-comments {
  padding: 18px;
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  color: #6b7c8c;
  text-align: center;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.04);
}

@media (max-width: 920px) {
  .level-detail-page .level-core {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 18px;
  }

  .level-detail-page .box-inner.single-column {
    padding: 20px 22px 16px;
  }
}

@media (max-width: 1050px) {
  .level-detail-page .level-core {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  }

  .level-detail-page .level-left-column,
  .level-detail-page .level-side,
  .level-detail-page .level-detail-thumb {
    grid-column: auto;
    grid-row: auto;
  }
}

.level-detail-page .level-profile-header {
  position: relative;
  margin-bottom: 14px;
  padding: 0 112px 0;
}

.level-detail-page .level-title-actions {
  position: absolute;
  top: 8px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.level-detail-page .level-title-actions button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.84;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.level-detail-page .level-title-actions img {
  width: 19px;
  height: 19px;
  display: block;
}

.level-detail-page .level-thumbnail-strip {
  display: flex;
  justify-content: center;
  margin: 10px 0 18px;
}

.level-detail-page .level-thumbnail-gallery {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.level-detail-page .level-detail-thumb {
  width: min(100%, 460px);
  aspect-ratio: 4 / 3;
}

.level-detail-page .level-core {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.75fr);
  gap: 22px;
}

.level-detail-page .level-column-panel {
  min-height: 0;
}

.level-detail-page .level-section-heading {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.level-detail-page .level-code-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.level-detail-page .level-code-actions button,
.level-detail-page .level-code-actions a {
  min-height: 38px;
  padding: 7px 13px;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(0,0,0,0.1);
}

.level-detail-page .level-code-actions img {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.level-detail-page .level-code {
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  resize: none;
}

.level-detail-page .level-author-section {
  padding-bottom: 14px;
}

.level-detail-page .level-author-section h2 {
  margin-bottom: 10px;
}

.level-detail-page .level-author-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

.level-detail-page .level-author-role {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.82;
}

.level-detail-page .level-info-line {
  align-items: center;
  padding: 9px 0;
}

.level-detail-page .level-info-line strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.level-detail-page .level-inline-btn,
.level-detail-page .level-text-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}

.level-detail-page .level-text-btn {
  font-size: 15px;
  padding: 2px 7px;
}

.level-detail-page .level-centered-description {
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.level-detail-page .level-centered-description h2 {
  text-align: center;
}

.level-detail-page .level-centered-description .level-description {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 1050px) {
  .level-detail-page .level-core {
    grid-template-columns: 1fr;
  }

  .level-detail-page .level-profile-header {
    padding: 0 0 44px;
  }

  .level-detail-page .level-title-actions {
    top: auto;
    right: 0;
    bottom: 4px;
    left: 0;
    justify-content: center;
  }
}

/* Level detail arrangement: code/description left, author/info/thumbs right */
.level-detail-page .level-thumbnail-strip,
.level-detail-page .level-centered-description {
  display: none;
}

.level-detail-page .level-core {
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, 0.75fr);
  align-items: start;
}

.level-detail-page .level-left-column .level-column-panel,
.level-detail-page .level-side .level-column-panel {
  height: auto;
}

.level-detail-page .level-description-section {
  padding-top: 14px;
  border-top: 1px solid rgba(95,134,163,0.2);
}

.level-detail-page .level-description-section h2 {
  text-align: left;
}

.level-detail-page .level-description-section .level-description {
  max-width: none;
  margin: 0;
  text-align: left;
}

.level-detail-page .level-info-author .comment-user {
  gap: 14px;
}

.level-detail-page .level-info-author .comment-avatar {
  width: 58px;
  height: 58px;
  font-size: 20px;
  border-width: 3px;
}

.level-detail-page .level-info-author .comment-username {
  font-size: 19px;
  line-height: 1.1;
}

.level-detail-page .level-author-role {
  font-size: 16px;
  line-height: 1.15;
}

.level-detail-page .level-game-link {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.level-detail-page .level-game-link:hover {
  text-decoration: underline;
}

.level-detail-page .level-thumbnail-section {
  padding-top: 14px;
  border-top: 1px solid rgba(95,134,163,0.2);
}

.level-detail-page .level-thumbnail-gallery {
  justify-content: center;
}

.level-detail-page .level-thumbnail-section .level-detail-thumb {
  width: min(100%, 360px);
}

/* Final level header utility spacing: keep controls from touching the content boxes. */
.level-detail-page .level-precore-row {
  margin: 0 0 10px !important;
}

.level-detail-page .level-core {
  padding-top: 12px !important;
}

/* Profile-style right panel rows */
.level-detail-page .level-precore-row {
  margin: -14px 0 0;
  align-items: end;
}

.level-detail-page .level-tool-strip {
  margin-bottom: 0;
  align-self: end;
}

.level-detail-page .level-back-row {
  line-height: 1;
}

.level-detail-page .level-thumbnail-section {
  padding: 0 0 12px;
}

.level-detail-page .level-author-section {
  padding: 8px 0 8px;
}

.level-detail-page .level-author-heading {
  margin: 0 0 8px;
}

.level-detail-page .level-info-author {
  padding-bottom: 9px;
}

.level-detail-page .level-info-section {
  margin-top: 0;
}

.level-detail-page .level-info-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: #000;
  line-height: 1.25;
}

.level-detail-page .level-info-line > span {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-weight: 700;
}

.level-detail-page .level-info-line strong {
  flex: 1 1 auto;
  min-width: 0;
  color: #000;
  font-weight: 500;
}

.level-detail-page .level-info-line-stacked {
  display: block;
}

.level-detail-page .level-info-line-stacked span,
.level-detail-page .level-info-line-stacked strong {
  display: block;
}

.level-detail-page .level-info-line-stacked strong {
  margin-top: 3px;
  line-height: 1.25;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 7px;
  border-bottom: 0;
}

.level-detail-page .level-game-link {
  color: #2d5f8b;
  text-decoration: none;
  word-break: normal;
  overflow-wrap: anywhere;
}

.level-detail-page .level-game-link:hover {
  color: #b00000;
  text-decoration: underline;
}

/* Level information final spacing */
.level-detail-page .level-tool-strip {
  margin-top: -8px;
  margin-bottom: 6px;
}

.level-detail-page .level-thumbnail-section {
  padding-bottom: 12px;
}

.level-detail-page .level-author-section {
  padding: 8px 0 4px;
}

.level-detail-page .level-author-heading {
  margin: 0 0 7px;
}

.level-detail-page .level-info-author {
  padding-bottom: 8px;
}

.level-detail-page .level-info-section {
  margin-top: -1px;
}

.level-detail-page .level-info-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  padding: 8px 0;
  line-height: 1.3;
}

.level-detail-page .level-info-line > span {
  flex: 0 0 auto;
}

.level-detail-page .level-info-line strong {
  flex: 0 1 auto;
  margin-left: 6px;
}

.level-detail-page .level-info-line-stacked {
  display: block;
  padding: 8px 0;
}

.level-detail-page .level-info-line-stacked strong {
  display: block;
  margin: 4px 0 0;
  line-height: 1.28;
}

.level-detail-page .level-info-line:first-child {
  padding-top: 7px;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 7px;
}

/* Final utility-row and info-list spacing correction */
.level-detail-page .level-precore-row {
  margin: -8px 0 12px;
}

.level-detail-page .level-tool-strip {
  margin-top: -9px;
  margin-bottom: 12px;
}

.level-detail-page .level-side .level-column-panel {
  padding-bottom: 8px;
}

.level-detail-page .level-info-section {
  margin-bottom: 0;
}

.level-detail-page .level-info-line {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 0;
}

.level-detail-page .level-info-line-stacked {
  display: block;
  min-height: 0;
  padding: 8px 0;
}

.level-detail-page .level-info-line-stacked strong {
  margin-top: 5px;
}

.level-detail-page .level-info-line:last-child {
  min-height: 0;
  padding-top: 7px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Hard stop: keep utility row from touching the content boxes */
.level-detail-page .level-precore-row {
  margin: 0 0 18px;
  padding-bottom: 0;
}

.level-detail-page .level-tool-strip {
  margin: 0;
}

.level-detail-page .level-core {
  margin-top: 0;
}

/* Final right-panel rhythm pass */
.level-detail-page .level-precore-row {
  margin: -14px 0 5px;
}

.level-detail-page .level-tool-strip {
  margin-top: -13px;
  margin-bottom: 5px;
}

.level-detail-page .level-side .level-column-panel {
  gap: 0;
  padding: 14px 16px;
}

.level-detail-page .level-thumbnail-section {
  padding: 0 0 10px;
}

.level-detail-page .level-author-section {
  padding: 8px 0 6px;
}

.level-detail-page .level-author-heading {
  margin: 0 0 6px;
}

.level-detail-page .level-info-author {
  padding-bottom: 8px;
}

.level-detail-page .level-info-section {
  margin-top: 0;
}

.level-detail-page .level-info-line {
  padding: 7px 0;
  line-height: 1.28;
}

.level-detail-page .level-info-line > span {
  margin-right: 6px;
}

.level-detail-page .level-info-line strong {
  margin-left: 0;
}

.level-detail-page .level-info-line-stacked {
  padding: 7px 0;
}

.level-detail-page .level-info-line-stacked span {
  display: block;
  margin: 0 0 5px;
}

.level-detail-page .level-info-line-stacked strong {
  margin: 0;
  line-height: 1.3;
}

.level-detail-page .level-info-line:first-child {
  padding-top: 7px;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 2px;
  border-bottom: 0;
}

@media (max-width: 1050px) {
  .level-detail-page .level-core {
    grid-template-columns: 1fr;
  }

  .level-detail-page .level-thumbnail-section .level-detail-thumb {
    width: min(100%, 460px);
  }
}

/* Level detail consistency pass */
.level-detail-page .page-wrapper {
  max-width: 1320px;
}

.level-detail-page .nav-wrapper {
  max-width: 1320px;
}

.level-detail-page .box-inner.single-column {
  max-width: 1200px;
  padding: 10px 20px;
}

.level-detail-page .single-column .text {
  max-width: 1100px;
}

.level-detail-page .level-profile-header {
  padding: 0 136px 0;
}

.level-detail-page .level-title-actions {
  gap: 10px;
}

.level-detail-page .level-title-actions .nav-item {
  position: relative;
}

.level-detail-page .level-title-actions .comment-btn {
  width: 26px;
  height: 26px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-detail-page .level-title-actions .comment-btn img {
  width: 22px;
  height: 22px;
  opacity: 0.7;
}

.level-detail-page .level-title-actions .comment-btn:hover img {
  opacity: 1;
}

.level-detail-page .level-title-actions .comment-btn.active img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(44%) sepia(43%) saturate(744%) hue-rotate(164deg) brightness(91%) contrast(86%);
}

.level-detail-page .level-title-actions .favorite-level.active img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(912%) hue-rotate(5deg) brightness(102%) contrast(101%);
}

.level-detail-page .level-title-actions .feature-level.active img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(912%) hue-rotate(5deg) brightness(102%) contrast(101%);
}

.level-detail-page .level-title-actions .comment-btn.danger img {
  opacity: 0.6;
}

.level-detail-page .level-title-actions .comment-btn.danger:hover img {
  filter: brightness(0) saturate(100%) invert(32%) sepia(75%) saturate(500%) hue-rotate(330deg);
  opacity: 1;
}

.level-detail-page .level-title-actions .tooltip {
  bottom: 140%;
  font-size: 12px;
  padding: 5px 10px;
}

.level-detail-page .level-back-row {
  margin: 2px 0 10px;
  text-align: left;
}

.level-detail-page .level-back-link {
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.level-detail-page .level-back-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.level-detail-page .level-back-link img {
  width: 16px;
  height: 16px;
  rotate: -90deg;
  opacity: 0.75;
}

.level-detail-page .level-core {
  align-items: stretch;
}

.level-detail-page .level-left-column,
.level-detail-page .level-side {
  min-width: 0;
  display: flex;
}

.level-detail-page .level-left-column .level-column-panel,
.level-detail-page .level-side .level-column-panel {
  width: 100%;
  height: 100%;
}

.level-detail-page .level-info-section {
  padding-bottom: 0;
  border-bottom: 0;
}

.level-detail-page .level-info-line:last-child {
  border-bottom: 0;
}

.level-detail-page .level-author-card {
  width: 100%;
  min-height: 86px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.level-detail-page .level-author-card .member-top {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.level-detail-page .level-author-card .member-avatar {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #4a90c2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 26px;
  font-weight: bold;
  border: 3px solid var(--role-color);
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}

.level-detail-page .level-author-card .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-detail-page .level-author-card .member-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.level-detail-page .level-author-card .member-name {
  display: block;
  text-decoration: none;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.22;
  word-break: break-word;
  padding-bottom: 2px;
}

.level-detail-page .level-author-card .member-name:hover {
  text-decoration: underline;
}

.level-detail-page .level-author-card .member-role {
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.level-detail-page .level-thumbnail-section {
  margin-top: 0;
}

.level-detail-page .level-thumbnail-section .level-detail-thumb {
  width: min(100%, 340px);
  padding: 6px;
  border: 1px solid #aebfcc;
  background: linear-gradient(#ffffff, #dfe8f1);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.12);
}

.level-detail-page .level-thumbnail-section .level-detail-thumb img,
.level-detail-page .level-thumbnail-section .level-detail-thumb span {
  border-radius: 5px;
}

@media (max-width: 1050px) {
  .level-detail-page .level-profile-header {
    padding: 0 0 44px;
  }
}

/* Level detail spacing: match profile inner rhythm */
.level-detail-page .box-inner.single-column {
  max-width: none;
  padding: 20px 30px 14px;
}

.level-detail-page .single-column .text {
  max-width: none;
  width: 100%;
}

.level-detail-page .level-profile {
  width: 100%;
  padding-top: 18px;
}

.level-detail-page .level-profile-header {
  margin: 0 0 24px;
  padding: 0 138px 0;
}

.level-detail-page .level-detail-title {
  margin: 0;
}

.level-detail-page .level-back-row {
  margin: 0 0 12px;
}

.level-detail-page .level-core {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 22px;
}

.level-detail-page .level-column-panel {
  padding: 18px 20px;
}

.level-detail-page .level-code {
  height: 260px;
  min-height: 260px;
  max-height: 260px;
}

.level-detail-page .level-description-section {
  padding-top: 18px;
}

.level-detail-page .level-comments-section {
  margin-top: 26px;
}

.level-detail-page .profile-comment-form,
.level-detail-page .profile-comments {
  width: 100%;
}

.level-detail-page .profile-comments.comments-loading .no-comments {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level-detail-page .level-thumbnail-section {
  padding-top: 16px;
}

.level-detail-page .level-thumbnail-section .level-detail-thumb {
  width: min(100%, 340px);
  padding: 0;
  border: 2px solid #9fb7c9;
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: -6px;
  background: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.level-detail-page .level-thumbnail-section .level-detail-thumb img,
.level-detail-page .level-thumbnail-section .level-detail-thumb span {
  border-radius: 4px;
}

@media (max-width: 1050px) {
  .level-detail-page .level-profile-header {
    padding: 0 0 44px;
  }

  .level-detail-page .level-core {
    grid-template-columns: 1fr;
  }
}

/* Level detail alignment and profile-style panel tuning */
.level-detail-page .level-profile {
  padding-top: 4px;
}

.level-detail-page .level-profile-header {
  margin: 0 0 14px;
  padding: 0;
}

.level-detail-page .level-precore-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 22px;
  align-items: center;
  margin: 0 0 10px;
}

.level-detail-page .level-back-row {
  margin: 0;
}

.level-detail-page .level-title-actions {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-detail-page .level-title-actions .comment-btn {
  width: auto;
  height: auto;
}

.level-detail-page .level-title-actions .comment-btn img {
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

.level-detail-page .level-title-actions .comment-btn:hover img {
  opacity: 1;
}

.level-detail-page .level-title-actions .comment-btn.danger img {
  opacity: 0.78;
}

.level-detail-page .level-column-panel {
  background: linear-gradient(#f4f8fc, #e7eff6);
}

.level-detail-page .level-author-section {
  padding-bottom: 10px;
  border-bottom-color: rgba(0,0,0,0.05);
}

.level-detail-page .level-author-section h2 {
  margin-bottom: 8px;
}

.level-detail-page .level-author-card {
  min-height: 74px;
}

.level-detail-page .level-info-line {
  padding: 6px 0;
  border-bottom-color: rgba(0,0,0,0.05);
  color: #000;
}

.level-detail-page .level-info-line > span {
  color: var(--primary-dark);
}

.level-detail-page .level-info-line strong {
  color: #000;
}

.level-detail-page .level-game-link {
  color: #2d5f8b;
  text-decoration: underline;
}

.level-detail-page .level-game-link:hover {
  color: #b00000;
}

.level-detail-page .level-thumbnail-section {
  padding-top: 10px;
  border-top-color: rgba(0,0,0,0.05);
}

.level-detail-page .level-description {
  color: #000;
}

@media (max-width: 1050px) {
  .level-detail-page .level-precore-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .level-detail-page .level-title-actions {
    justify-self: start;
  }
}

/* Final level detail polish */
.level-detail-page .level-precore-row {
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
}

.level-detail-page .level-description-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.level-detail-page .level-description-heading h2 {
  margin: 0;
}

.level-detail-page .level-description-heading .level-title-actions {
  position: static;
  justify-self: auto;
  margin-left: auto;
}

.level-detail-page .level-description-actions {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.level-detail-page .level-code-actions button:hover,
.level-detail-page .level-inline-btn:hover {
  border-color: #5f86a3;
  background: linear-gradient(#e3e9ef, #cfdbe6);
}

.level-detail-page .level-game-link {
  color: var(--primary-dark);
  text-decoration: none;
}

.level-detail-page .level-game-link:hover {
  color: #2d5f8b;
  text-decoration: underline;
}

.level-detail-page .level-author-section {
  padding-bottom: 6px;
}

.level-detail-page .level-author-card {
  min-height: 66px;
}

.level-detail-page .level-info-section {
  margin-top: -2px;
}

.level-detail-page .level-info-line {
  padding: 5px 0;
}

.level-detail-page .level-thumbnail-section {
  padding-top: 8px;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 4px;
}

/* Final compact placement */
.level-detail-page .level-profile-header {
  margin-bottom: 8px;
}

.level-detail-page .level-precore-row {
  margin: -4px 0 4px;
}

.level-detail-page .level-back-link {
  font-size: 15px;
  line-height: 1;
}

.level-detail-page .level-author-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.level-detail-page .level-author-heading h2 {
  margin: 0;
}

.level-detail-page .level-author-heading .level-title-actions {
  position: static;
  margin-left: auto;
  justify-self: auto;
}

.level-detail-page .level-author-section {
  padding-bottom: 5px;
}

.level-detail-page .level-author-card {
  min-height: 62px;
}

.level-detail-page .level-author-card .member-top {
  align-items: center;
}

.level-detail-page .level-info-section {
  margin-top: -1px;
}

.level-detail-page .level-info-line {
  min-height: 0;
  padding: 4px 0;
  line-height: 1.2;
}

.level-detail-page .level-info-line:first-child {
  padding-top: 4px;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 3px;
}

.level-detail-page .level-thumbnail-section {
  padding-top: 6px;
}

/* Author/meta refinement */
.level-detail-page .level-profile-header {
  margin-bottom: 4px;
}

.level-detail-page .level-precore-row {
  margin: -8px 0 2px;
}

.level-detail-page .level-back-link {
  font-size: 16px;
  line-height: 1.1;
}

.level-detail-page .level-author-heading {
  margin: -2px 0 6px;
}

.level-detail-page .level-author-heading .level-title-actions {
  align-self: flex-start;
  padding-top: 1px;
  gap: 9px;
}

.level-detail-page .level-author-heading .comment-btn img {
  width: 20px;
  height: 20px;
  opacity: 0.82;
}

.level-detail-page .level-info-author {
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.level-detail-page .level-info-author .comment-user {
  gap: 10px;
}

.level-detail-page .level-info-author .comment-avatar {
  width: 44px;
  height: 44px;
  border-width: 2px;
  font-size: 14px;
}

.level-detail-page .level-info-author .comment-username {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.level-detail-page .level-author-section {
  padding-bottom: 0;
  border-bottom: 0;
}

.level-detail-page .level-info-section {
  margin-top: 0;
}

.level-detail-page .level-info-line {
  padding: 5px 0;
  font-size: 15px;
}

.level-detail-page .level-info-line > span {
  font-weight: 700;
  color: var(--primary-dark);
}

.level-detail-page .level-info-line strong {
  font-weight: 500;
  color: #111;
}

.level-detail-page .level-info-line:first-child {
  padding-top: 5px;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 5px;
}

.level-detail-page .level-inline-btn {
  font-weight: 700;
}

.level-detail-page .level-tool-strip {
  justify-self: end;
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 6px;
  border: 1px solid rgba(95,134,163,0.18);
  border-radius: 8px;
  background: rgba(248,251,255,0.58);
}

.level-detail-page .level-tool-strip .comment-btn img {
  width: 20px;
  height: 20px;
  opacity: 0.86;
}

.level-detail-page .level-tool-strip .comment-btn:hover img {
  opacity: 1;
}

.level-detail-page .level-info-line > span {
  font-weight: 600;
}

.level-detail-page .level-game-link {
  font-weight: 600;
}

@media (max-width: 1050px) {
  .level-detail-page .level-precore-row {
    grid-template-columns: 1fr;
  }

  .level-detail-page .level-tool-strip {
    justify-self: start;
  }
}

/* Level info expansion for authors and game/version details */
.level-detail-page .level-core {
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 22px;
}

.level-detail-page .level-precore-row {
  grid-template-columns: minmax(0, 1fr) 430px;
}

.level-detail-page .level-tool-strip {
  gap: 11px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.level-detail-page .level-tool-strip .comment-btn img {
  width: 24px;
  height: 24px;
  opacity: 0.88;
}

.level-detail-page .level-info-author {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.level-detail-page .level-info-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 6px 0;
}

.level-detail-page .level-info-line strong {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 10px;
  text-align: right;
  line-height: 1.2;
}

.level-detail-page .level-game-link,
.level-detail-page .level-meta-link {
  color: inherit;
  text-decoration: none;
}

.level-detail-page .level-game-link:hover,
.level-detail-page .level-meta-link:hover {
  color: #2d5f8b;
  text-decoration: underline;
}

.level-detail-page .level-meta-link {
  font-size: 13px;
  font-weight: 600;
}

.level-detail-page .level-inline-btn {
  display: none;
}

@media (max-width: 1050px) {
  .level-detail-page .level-core,
  .level-detail-page .level-precore-row {
    grid-template-columns: 1fr;
  }
}

/* Right-panel experiment: thumbnail first, compact colon metadata */
.level-detail-page .level-precore-row {
  margin: -12px 0 0;
}

.level-detail-page .level-tool-strip {
  align-self: end;
  margin-bottom: 1px;
}

.level-detail-page .level-thumbnail-section {
  order: 0;
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.level-detail-page .level-author-section {
  order: 1;
  padding: 2px 0 6px;
}

.level-detail-page .level-info-section {
  order: 2;
  margin-top: 0;
}

.level-detail-page .level-info-line {
  display: block;
  padding: 5px 0;
  line-height: 1.25;
  text-align: left;
}

.level-detail-page .level-info-line > span {
  color: var(--primary-dark);
  font-weight: 700;
}

.level-detail-page .level-info-line strong {
  display: inline;
  color: #111;
  font-weight: 500;
  text-align: left;
}

.level-detail-page .level-info-line:first-child {
  padding-top: 5px;
}

.level-detail-page .level-info-line:last-child {
  padding-bottom: 5px;
}

.level-detail-page .level-game-link {
  color: #2d5f8b;
  text-decoration: none;
}

.level-detail-page .level-game-link:hover {
  color: #b00000;
  text-decoration: underline;
}

.level-detail-page .level-meta-link {
  display: none;
}

.level-detail-page .level-thumbnail-section .level-detail-thumb {
  width: min(100%, 360px);
}

/* Absolute final level header utility spacing override. */
.level-detail-page .level-precore-row {
  margin: 0 0 2px !important;
}

.level-detail-page .level-core {
  padding-top: 2px !important;
}

/* Final level author relocation: code, author, then description on the left. */
.level-detail-page .level-left-column .level-code-section {
  order: 0 !important;
}

.level-detail-page .level-left-column .level-under-code-row {
  order: 1 !important;
  margin-inline: 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  border-bottom: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas: "author rate";
  gap: 18px;
  align-items: start;
  align-content: start;
}

.level-detail-page .level-left-column .level-author-section,
.level-detail-page .level-left-column .level-rate-section {
  order: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  align-self: start !important;
}

.level-detail-page .level-left-column .level-author-section {
  grid-area: author;
  display: block;
}

.level-detail-page .level-left-column .level-author-heading {
  margin: 0 0 6px !important;
}

.level-detail-page .level-left-column .level-author-heading h2 {
  margin: 0 !important;
}

.level-detail-page .level-left-column .level-rate-section {
  grid-area: rate;
  justify-self: end;
  width: max-content;
}

.level-detail-page .level-left-column .level-info-author {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-bottom: 0;
  margin: 0 0 -2px;
  border-bottom: 0;
}

.level-detail-page .level-left-column .level-rate-heading h2 {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 21px;
  text-align: left;
}

.level-detail-page .level-rate-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.level-detail-page .level-rate-picker {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid #aab8c4;
  border-radius: 10px;
  background: linear-gradient(#ffffff, #f5f9fd);
  box-shadow: inset 0 1px 0 #ffffff;
  overflow: hidden;
}

.level-detail-page .level-rate-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 0 0;
  color: #111;
  font-weight: 400;
}

.level-detail-page .level-rate-control select {
  min-width: 62px;
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  border-right: 1px solid rgba(95,134,163,0.2);
  border-radius: 0;
  background: transparent;
  color: #111;
  font: inherit;
  font-weight: 500;
}

.level-detail-page .level-rate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 700;
}

.level-detail-page #rate-message {
  text-align: left;
}

/* Level detail design test: multi-author and right-info cleanup */
.level-detail-page .level-code {
  height: 275px;
  min-height: 275px;
  max-height: 275px;
}

.level-detail-page .level-left-column .level-info-author .comment-user {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  gap: 10px;
  padding: 2px 0;
}

.level-detail-page .level-left-column .level-info-author .comment-avatar {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

.level-detail-page .level-left-column .level-info-author .comment-username {
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.level-detail-page .level-side .level-column-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.level-detail-page .level-side .level-thumbnail-section {
  padding-bottom: 9px;
  margin-bottom: 1px;
}

.level-detail-page .level-side .level-info-section {
  padding: 0;
}

.level-detail-page .level-side .level-meta-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 7px;
  row-gap: 0;
  margin: 0;
  padding: 0;
}

.level-detail-page .level-side .level-info-line {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: inherit;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  line-height: 1.25;
}

.level-detail-page .level-side .level-info-line > span {
  color: var(--primary-dark);
  font-weight: 700;
}

.level-detail-page #level-rate-count.has-rates {
  color: var(--primary-dark);
  font-weight: 700;
}

.level-detail-page .level-side .level-info-line strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: #111;
  font-weight: 500;
  text-align: left;
  overflow-wrap: anywhere;
}

.level-detail-page .level-side .level-info-line-stacked strong,
.level-detail-page .level-side .level-info-line:not(.level-rates-line) strong {
  flex-wrap: wrap;
}

.level-detail-page .level-side .level-rates-line strong {
  flex-wrap: nowrap;
}

.level-detail-page .level-side .level-info-line-stacked {
  display: grid;
}

.level-detail-page .level-side .level-info-line-stacked strong {
  line-height: 1.25;
}

.level-detail-page .level-side .level-info-line:last-child {
  border-bottom: 0;
}

.level-detail-page .level-description-panel {
  display: grid;
  gap: 0;
  margin-top: 16px;
  padding: 16px 20px;
}

.level-detail-page .level-description-panel .level-description-heading {
  margin-bottom: 0;
}

.level-detail-page .level-description-panel .level-description-heading h2 {
  margin: 0;
  line-height: 1;
}

.level-detail-page .level-description-panel .level-description {
  margin-top: 17px;
  padding-top: 0;
  line-height: 1.3;
}

.level-detail-page .level-comment-form {
  padding: 14px;
  gap: 10px;
}

.level-detail-page .level-comment-form textarea {
  min-height: 95px;
}

.level-detail-page .level-comment-preview {
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f4f8fc, #e7eff6);
  box-shadow: inset 0 1px 0 #ffffff;
  color: #000;
  line-height: 1.45;
  word-break: break-word;
}

.level-detail-page .level-comment-preview.is-empty {
  font-style: italic;
  color: #6b7c8c;
}

.level-detail-page .level-comment-actions {
  min-height: 0;
}

.level-detail-page #comment-message:empty {
  display: none;
  min-height: 0;
}

@media (max-width: 720px) {
  .level-detail-page .level-left-column .level-under-code-row {
    grid-template-columns: 1fr;
  }
}

/* Final levels index layout */
.levels-toolbar .add-level-button {
  color: var(--primary-dark);
}

.levels-page .levels-toolbar-row > .levels-icon-control > .levels-icon-button:hover img {
  opacity: 1;
}

.levels-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1220px;
  margin: 8px auto 0;
}

.level-list-card {
  display: grid;
  grid-template-columns: minmax(330px, 1.25fr) minmax(260px, 0.95fr) minmax(360px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 118px;
  padding: 14px 18px;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.level-card-identity {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.level-list-card .level-thumb {
  grid-column: auto;
  grid-row: auto;
  width: 104px;
}

.level-list-main {
  min-width: 0;
}

.level-list-main h2 {
  margin: 0 0 7px;
  font-size: 23px;
  line-height: 1.15;
}

.level-card-game {
  min-width: 0;
  padding: 0 18px;
  border-inline: 1px solid rgba(95,134,163,0.16);
}

.level-card-game b,
.level-card-quick b {
  display: block;
  margin-bottom: 4px;
  color: #617589;
  font-size: 13px;
  line-height: 1;
}

.level-card-game span {
  display: block;
  color: #111;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.level-card-quick {
  grid-column: auto;
  grid-row: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.level-card-quick span {
  min-height: 46px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(95,134,163,0.18);
  color: #111;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

@media (max-width: 1120px) {
  .level-list-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .level-card-game {
    padding: 10px 0;
    border-inline: 0;
    border-block: 1px solid rgba(95,134,163,0.16);
  }
}

@media (max-width: 620px) {
  .level-card-identity {
    grid-template-columns: 1fr;
  }

  .level-card-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Add/edit level page */
.level-form-page,
.level-form-page input,
.level-form-page select,
.level-form-page textarea,
.level-form-page button {
  font-family: var(--site-font) !important;
}

.level-form-page [hidden] {
  display: none !important;
}

.level-form-page .level-form-shell {
  width: min(100%, 1120px);
  margin: 0 auto;
  text-align: left;
}

.level-form-page .box-inner.single-column {
  padding: 24px 36px 18px;
}

.level-form-page .single-column .text {
  margin: 0 auto;
}

.level-form-page .level-form-header {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
}

.level-form-page .level-form-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  order: 2;
  width: 100%;
}

.level-form-page .level-form-header h1 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 32px;
  text-align: center;
  order: 1;
}

.level-form-page .level-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-dark);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.level-form-page .level-back-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.level-form-page .level-back-link img {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  rotate: -90deg;
  opacity: 0.75;
}

.level-editor-form {
  display: grid;
  gap: 12px;
  padding: 18px 20px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.06);
}

.level-form-section {
  display: grid;
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(95,134,163,0.16);
}

.level-form-section:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.level-form-section h2,
.level-form-section label {
  margin: 0;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.required-marker {
  margin-left: 6px;
  color: #617589;
  font-size: 12px;
  font-weight: 700;
}

.level-form-section input,
.level-form-section select,
.level-form-section textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  color: #111;
  font: inherit;
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.level-form-section textarea {
  min-height: 120px;
  resize: vertical;
}

.level-form-page #legacy-change-reason {
  resize: none;
}

#level-code-input {
  min-height: 210px;
  resize: none;
  font-family: var(--site-font) !important;
  font-size: 14px;
}

.level-field {
  display: grid;
  gap: 8px;
}

.level-field-help,
.level-game-help {
  color: #617589;
  font-size: 13px;
  line-height: 1.3;
}

.level-game-help {
  margin-top: -2px;
}

.level-form-page .level-game-picker-panel > .level-game-help {
  margin-top: -8px;
}

.level-form-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  grid-template-areas:
    "name name ."
    "code code preview"
    "difficulty thumbnail thumbnail";
  gap: 14px 18px;
  align-items: start;
}

.level-name-field {
  grid-area: name;
}

.level-code-field {
  grid-area: code;
}

.level-difficulty-field {
  grid-area: difficulty;
}

.level-thumbnail-field {
  grid-area: thumbnail;
}

.level-thumbnail-preview-panel {
  grid-area: preview;
  display: block;
  align-self: start;
}

.level-thumbnail-preview {
  width: 100%;
  align-self: start;
  aspect-ratio: 4 / 3;
  border: 2px solid #9fb7c9;
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: -6px;
  border-radius: 7px;
  background: linear-gradient(#b7cfdf, #91b4ca);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.level-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.level-thumbnail-preview span {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 2px 2px rgba(0,0,0,0.28);
}

.level-game-select-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.2fr) minmax(180px, 0.85fr);
  gap: 12px;
  align-items: end;
}

.level-game-picker-panel h2 {
  font-size: 20px;
}

.level-game-picker-panel .level-field label {
  font-size: 16px;
}

.level-version-row {
  margin-top: 0;
}

.level-form-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  align-items: start;
}

.level-form-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
}

.level-form-actions .levels-button {
  min-width: 128px;
  border-radius: 12px;
  padding: 8px 18px;
}

.level-visibility-field {
  width: min(100%, 260px);
}

.level-form-page #level-form-message:empty {
  display: none;
}

.level-form-page #level-form-message {
  min-height: 0;
  margin: 0;
}

.level-form-page .help-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 60, 0.65);
}

.level-form-page .help-modal.hidden {
  display: none;
}

.level-form-page .help-modal-content {
  width: 560px;
  max-width: 92%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(#f4f8fc, #e3edf6);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 30px rgba(0,0,0,0.3);
  animation: levelGuidelinesPopIn 0.18s ease;
}

.level-form-page .help-modal.closing .help-modal-content {
  animation: levelGuidelinesPopOut 0.15s ease forwards;
}

.level-form-page .help-header {
  padding: 14px;
  background: linear-gradient(#4a7fa3, #3b6e8f);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.level-form-page .help-body {
  padding: 18px 22px;
}

.level-form-page .help-body ul {
  margin: 0;
  padding-left: 22px;
}

.level-form-page .help-body li {
  margin: 8px 0;
}

.level-form-page .help-footer {
  padding: 10px;
  text-align: center;
}

.level-form-page .help-footer button {
  padding: 8px 24px;
  font-weight: 700;
}

@keyframes levelGuidelinesPopIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes levelGuidelinesPopOut {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .level-form-grid,
  .level-game-select-grid,
  .level-form-two-column {
    grid-template-columns: 1fr;
  }

  .level-form-grid {
    grid-template-areas:
      "name"
      "code"
      "preview"
      "difficulty"
      "thumbnail";
  }

  .level-difficulty-field {
    max-width: none;
  }
}

/* Final add/edit form alignment pass: match the compact level-page rhythm. */
.level-form-page .box-inner.single-column {
  padding: 10px 20px 14px;
}

.level-form-page .level-form-shell {
  width: min(100%, 1160px);
}

.level-form-page .level-form-header {
  gap: 6px;
  margin: 0 0 6px;
}

.level-form-page .level-form-header h1 {
  font-size: 34px;
  line-height: 1.15;
}

.level-form-page .level-form-nav {
  margin: 0 0 2px;
}

.level-form-page .level-back-link {
  font-size: 14px;
  line-height: 1;
}

.level-editor-form {
  padding: 14px 18px 12px;
}

.level-form-grid {
  grid-template-columns: 260px 500px minmax(300px, 1fr);
  grid-template-areas:
    "name name ."
    "code code preview"
    "difficulty thumbnail .";
  gap: 14px 18px;
}

.level-name-field,
.level-code-field {
  max-width: 778px;
}

.level-thumbnail-preview-panel {
  padding-top: 41px;
}

.level-thumbnail-preview {
  width: min(100%, 320px);
}

.level-thumbnail-field {
  max-width: 500px;
}

.level-form-section label,
.level-form-section .level-field-label {
  margin: 0;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.level-radio-group {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 42px;
}

.level-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #111;
  font-size: 16px;
  font-weight: 600;
}

.level-radio-group input {
  width: auto;
  margin: 0;
}

.level-invite-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  color: #435463;
  font-size: 14px;
  font-weight: 700;
}

.level-invite-summary[hidden] {
  display: none;
}

.level-form-page .level-invites-modal-content {
  width: min(680px, 92vw);
}

.level-form-page .level-invites-modal-content .help-body {
  padding: 20px 28px 10px;
}

.level-form-page .level-invites-modal-content .help-footer {
  padding: 12px 10px 16px;
}

.level-form-page .level-invites-modal-content .help-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-left: 28px;
  padding-right: 58px;
  text-align: left;
}

.level-form-page .level-invites-modal-content .help-header button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
}

.level-form-page .level-invites-modal-content .help-header button::before,
.level-form-page .level-invites-modal-content .help-header button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.level-form-page .level-invites-modal-content .help-header button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.level-form-page .level-invites-modal-content .help-header button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.level-invites-body {
  display: grid;
  gap: 14px;
  padding-bottom: 4px;
}

.level-invites-body .level-field {
  display: grid;
  gap: 8px;
}

.level-invites-body .level-field label,
.level-invite-selected-wrap > strong {
  margin: 0;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.level-invites-body input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  color: #111;
  font: inherit;
  min-height: 42px;
  padding: 9px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.level-invite-results,
.level-invite-selected {
  display: grid;
  gap: 6px;
}

.level-invite-results {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-color: #8798a6 transparent;
}

.level-invite-results:empty {
  display: none;
}

.level-invite-result {
  appearance: none;
  display: flex !important;
  align-items: center;
  justify-content: start !important;
  width: 100%;
  min-height: 58px;
  padding: 7px 11px !important;
  border: 1px solid #c8d6e0 !important;
  border-radius: 7px !important;
  background: linear-gradient(#ffffff, #edf3f8) !important;
  color: inherit !important;
  text-align: left;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

.level-invite-result:hover {
  border-color: #9fb7ca !important;
  background: linear-gradient(#f8fbff, #e4edf5) !important;
  color: inherit !important;
}

.level-invite-result:hover .level-invite-username,
.level-invite-result:focus-visible .level-invite-username {
  text-decoration: underline;
}

.level-invite-selected-wrap {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(95,134,163,0.22);
  color: var(--primary-dark);
}

.level-invite-results em,
.level-invite-selected em {
  color: #435463;
  font-size: 15px;
}

.level-invite-selected {
  display: flex;
  flex-wrap: wrap;
  max-height: 238px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  scrollbar-color: #8798a6 transparent;
}

.level-invite-results::-webkit-scrollbar,
.level-invite-selected::-webkit-scrollbar {
  width: 14px;
}

.level-invite-results::-webkit-scrollbar-track,
.level-invite-selected::-webkit-scrollbar-track {
  background: transparent;
}

.level-invite-results::-webkit-scrollbar-thumb,
.level-invite-selected::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #8798a6;
  background-clip: content-box;
}

.level-invite-results::-webkit-scrollbar-thumb:hover,
.level-invite-selected::-webkit-scrollbar-thumb:hover {
  background: #6f7f8d;
  background-clip: content-box;
}

.level-invite-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 54px;
  padding: 6px 9px;
  border: 1px solid #b9cbd8;
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #27465d;
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-invite-user {
  gap: 10px;
  min-width: 0;
}

.level-invite-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 14px;
}

.level-invite-username {
  min-width: 0;
  display: block;
  padding: 3px 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.level-invite-username:hover,
.level-invite-username:focus-visible {
  text-decoration: underline;
}

.level-invite-chip button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0 !important;
  border: 1px solid #92a8b8 !important;
  border-radius: 50% !important;
  background: linear-gradient(#ffffff, #edf3f8) !important;
  background-clip: border-box !important;
  color: #2f4658 !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
  font-size: 0;
  line-height: 1;
  overflow: hidden;
}

.level-invite-chip button::before,
.level-invite-chip button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.level-invite-chip button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.level-invite-chip button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.level-invite-chip button:hover,
.level-invite-chip button:focus-visible {
  border-color: #4a6f8a !important;
  background: linear-gradient(#5f86a3, #4a6f8a) !important;
  background-clip: border-box !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
}

.level-form-actions {
  margin: 0 0 6px;
}

.level-form-actions .levels-button {
  min-width: 0;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 15px;
}

@media (max-width: 900px) {
  .level-form-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "code"
      "preview"
      "difficulty"
      "thumbnail";
  }

  .level-name-field,
  .level-code-field,
  .level-thumbnail-field {
    max-width: none;
  }

  .level-thumbnail-preview-panel {
    padding-top: 0;
  }
}

/* Hard reset for add/edit level page layout containment and spacing. */
.level-form-page .box-inner.single-column {
  padding: 30px 30px 16px;
}

.level-form-page .level-form-shell {
  width: min(100%, 1120px);
}

.level-form-page .level-form-header {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
}

.level-form-page .level-form-header h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  text-align: center;
}

.level-form-page .level-form-nav {
  margin: 0;
}

.level-form-page .level-back-link {
  font-size: 14px;
  line-height: 1;
}

.level-editor-form {
  gap: 14px;
  padding: 16px 18px 12px;
  overflow: hidden;
}

.level-form-section {
  padding: 0;
  border-bottom: 0;
}

.level-form-section input,
.level-form-section select,
.level-form-section textarea {
  box-sizing: border-box;
}

.level-form-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "name ."
    "code preview"
    "difficulty thumbnail";
  gap: 14px 20px;
  align-items: start;
}

.level-name-field,
.level-code-field {
  max-width: none;
}

.level-thumbnail-preview-panel {
  padding-top: 41px;
}

.level-thumbnail-preview {
  width: 100%;
  max-width: 320px;
}

.level-thumbnail-field {
  max-width: 320px;
}

.level-difficulty-field {
  max-width: 260px;
}

#level-code-input {
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  resize: none;
}

#level-code-input.level-code-input-locked {
  background: #eef3f7;
  color: #34495e;
  cursor: not-allowed;
  opacity: 1;
}

.legacy-request-mode .legacy-request-field-disabled {
  background: #eef3f7;
  color: #5a6c7a;
  cursor: not-allowed;
  opacity: 1;
}

#level-description-input {
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  resize: none;
}

.level-radio-group {
  display: grid;
  gap: 6px;
  min-height: 0;
}

.level-radio-group label {
  width: max-content;
}

.level-form-actions {
  margin: 2px 0 6px;
}

@media (max-width: 900px) {
  .level-form-page .box-inner.single-column {
    padding: 24px 20px 14px;
  }

  .level-form-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "code"
      "preview"
      "difficulty"
      "thumbnail";
  }

  .level-thumbnail-preview-panel {
    padding-top: 0;
  }

  .level-difficulty-field,
  .level-thumbnail-field {
    max-width: none;
  }
}

/* Final vertical level form flow. */
.level-form-page .box-inner.single-column {
  padding-top: 24px;
}

.level-form-page .level-form-header {
  margin: -2px 0 8px;
}

.level-editor-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.level-form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.level-form-grid,
.level-name-field,
.level-code-field,
.level-thumbnail-field,
.level-visibility-field {
  width: 100%;
  max-width: none;
}

.level-form-section {
  width: 100%;
}

.level-game-select-grid {
  grid-template-columns: minmax(180px, 0.85fr) minmax(260px, 1.15fr) minmax(180px, 0.85fr);
}

.level-thumbnail-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px 18px;
  align-items: start;
}

.level-thumbnail-section .level-field {
  max-width: none;
}

.level-thumbnail-section .level-thumbnail-preview {
  width: 100%;
  max-width: 320px;
}

.level-radio-group {
  justify-items: start;
}

@media (max-width: 900px) {
  .level-thumbnail-section,
  .level-game-select-grid {
    grid-template-columns: 1fr;
  }
}

/* Final form-only sizing pass. Keep these scoped so the level page thumbnail is not affected. */
.level-form-page .level-form-grid,
.level-form-page .level-game-picker-panel,
.level-form-page .level-form-section > .level-field {
  max-width: 840px;
}

.level-form-page #level-description-input {
  max-width: 840px;
}

.level-form-page .level-thumbnail-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.level-form-page .level-thumbnail-section .level-field {
  width: 100%;
  max-width: 520px;
}

.level-form-page .level-thumbnail-section .level-thumbnail-preview {
  width: 520px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.level-form-page .level-thumbnail-field {
  margin: 0;
}

/* Restore the individual level page thumbnail after the form layout experiments. */
.level-detail-page .level-thumbnail-section {
  display: block;
}

.level-detail-page .level-thumbnail-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  justify-content: center;
  justify-items: center;
  width: 100%;
}

.level-detail-page .level-thumbnail-section .level-detail-thumb {
  justify-self: center;
  width: 100% !important;
  max-width: 480px;
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .level-form-page .level-form-grid,
  .level-form-page .level-game-picker-panel,
  .level-form-page .level-form-section > .level-field,
  .level-form-page .level-thumbnail-section .level-field {
    max-width: none;
  }

  .level-form-page .level-palace-date-grid {
    grid-template-columns: 1fr;
  }
}

/* Final form polish: required markers, dividers, and compact thumbnail preview. */
.level-form-page .required-asterisk {
  color: #c10000;
  font-weight: 800;
}

.level-form-page .level-char-count {
  color: #6b7c8c;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.level-form-page .level-char-count.warning {
  color: #c0392b;
  font-weight: 700;
}

.level-form-page .level-form-section {
  padding-top: 14px;
  border-top: 1px solid rgba(95,134,163,0.18);
}

.level-form-page .level-form-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.level-form-page .level-form-grid,
.level-form-page .level-game-picker-panel,
.level-form-page .level-form-section > .level-field {
  max-width: 820px;
}

.level-form-page .level-difficulty-field {
  width: 260px !important;
  max-width: 260px !important;
  justify-self: start;
  align-self: start;
}

.level-form-page .level-palace-date-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(180px, 0.85fr) minmax(180px, 0.85fr);
  gap: 12px;
  align-items: end;
  margin-top: 0;
}

.level-form-page .level-palace-date-section h2 {
  font-size: 20px;
}

.level-form-page .level-palace-date-grid .level-field label {
  font-size: 16px;
}

.level-form-page .level-palace-date-grid select {
  font-size: 16px;
}

.level-form-page .level-palace-date-grid select:disabled {
  color: #60798d;
  background: #eef5f9;
  cursor: not-allowed;
  opacity: 1;
}

.level-form-page .level-thumbnail-section {
  max-width: 820px;
}

.level-form-page .level-thumbnail-section .level-field {
  max-width: 520px;
}

.level-form-page .level-thumbnail-section .level-thumbnail-preview {
  width: 430px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
}

.level-form-page .level-thumbnail-section .level-thumbnail-preview img {
  object-fit: contain;
}

.level-form-page .level-thumbnail-preview-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 430px;
  max-width: 100%;
  min-height: 32px;
}

.level-form-page .level-thumbnail-preview-switcher:empty {
  display: none;
}

.level-form-page .level-thumbnail-preview-switch {
  width: 34px;
  height: 30px;
  border: 1px solid #9fb7c9;
  border-radius: 7px;
  background: linear-gradient(#f8fbfd, #dceaf3);
  color: #254f6d;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
  cursor: pointer;
}

.level-form-page .level-thumbnail-preview-switch:hover,
.level-form-page .level-thumbnail-preview-switch:focus-visible {
  border-color: #5f86a3;
  color: #14354d;
  outline: none;
}

.level-form-page .level-thumbnail-preview-switch.active {
  background: #3f6f8e;
  border-color: #3f6f8e;
  color: #fff;
}

.level-form-page .level-thumbnail-input-error {
  border-color: #ad3939;
  box-shadow: 0 0 0 3px rgba(173,57,57,0.14);
}

.level-form-page .legacy-thumbnail-extra-label {
  display: block;
  margin-top: 14px;
}

.level-form-page .legacy-thumbnail-extra-label:first-child {
  margin-top: 0;
}

.level-form-page .legacy-thumbnail-extra-label + .legacy-thumbnail-input {
  margin-top: 8px;
}

.level-form-page .level-palace-thumbnail-note {
  margin: -2px 0 0;
}

.level-form-page .level-required-note {
  margin: -2px 0 0;
  color: #617589;
  font-size: 13px;
  line-height: 1.3;
}

.level-form-page .level-public-post-limit-note {
  box-sizing: border-box;
  width: 100%;
  max-width: 820px;
  margin: 0;
  padding: 0;
  color: #111;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.level-form-page .level-visibility-option-disabled {
  color: #7b8c99;
  cursor: not-allowed;
  opacity: 0.72;
}

.level-form-page .level-visibility-option-disabled input {
  cursor: not-allowed;
}

.level-form-page .level-private-access-options {
  display: grid;
  gap: 6px;
  margin: 2px 0 0 24px;
}

.level-form-page .level-private-access-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  color: #111;
  font-size: 16px;
  font-weight: 400;
}

.level-form-page .level-private-access-options input {
  width: auto;
  margin: 0;
}

.level-form-page .level-visibility-field input[type="radio"] {
  accent-color: #4f7897;
}

.level-form-page .level-visibility-field .level-radio-group label,
.level-form-page .level-visibility-field .level-radio-group span {
  font-weight: 400;
}

.level-form-page .level-difficulty-section {
  justify-items: start;
  align-items: start;
}

.level-form-page .level-description-editor-section {
  justify-items: start;
}

.level-form-page .level-description-editor-section > .level-field {
  width: 100%;
  max-width: 820px;
}

.level-form-page .level-description-editor-section #level-description-input {
  width: 100%;
  max-width: 820px;
  height: 150px;
  min-height: 150px;
  max-height: 150px;
  resize: none;
}

.level-form-page .level-difficulty-field {
  margin: 0;
}

.level-form-page .level-difficulty-field,
.level-form-page .level-difficulty-field > * {
  width: 260px !important;
  max-width: 260px !important;
  justify-self: start;
  text-align: left;
}

.level-form-page .level-difficulty-field select {
  width: 260px !important;
}

/* Absolute final placement for the add/edit difficulty control. */
.level-form-page .level-difficulty-section {
  display: block !important;
  width: 820px !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  text-align: left !important;
}

.level-form-page .level-difficulty-section .level-difficulty-field {
  display: grid !important;
  grid-area: auto !important;
  width: 260px !important;
  max-width: 260px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-self: start !important;
  place-self: start !important;
  text-align: left !important;
}

/* Keep section dividers full-width while the fields themselves stay compact. */
.level-form-page .level-form-section,
.level-form-page .level-game-picker-panel,
.level-form-page .level-difficulty-section,
.level-form-page .level-thumbnail-section {
  width: 100% !important;
  max-width: none !important;
}

.level-form-page .level-game-picker-panel > h2,
.level-form-page .level-game-picker-panel > .level-game-select-grid,
.level-form-page .level-game-picker-panel > .level-game-help,
.level-form-page .level-game-picker-panel > .level-visual-filters-field,
.level-form-page .level-palace-date-section > h2,
.level-form-page .level-palace-date-section > .level-palace-date-grid,
.level-form-page .level-palace-date-section > .level-game-help {
  max-width: 820px;
}

.level-form-page .level-difficulty-section {
  width: 100% !important;
}

.level-form-page .level-thumbnail-help {
  width: 820px;
  max-width: 100%;
}

.level-form-page .level-thumbnail-help a {
  color: #2f5d84;
  text-decoration: none;
}

.level-form-page .level-thumbnail-help a:hover,
.level-form-page .level-thumbnail-help a:focus-visible {
  color: #b00000;
  text-decoration: underline;
}

/* Match the add/edit thumbnail placeholder on the level detail page. */
.level-detail-page .level-thumbnail-section .level-detail-thumb {
  position: relative;
  overflow: visible;
  border: 2px solid #9fb7c9;
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: -6px;
  border-radius: 7px;
  background: linear-gradient(#b7cfdf, #91b4ca);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px rgba(0,0,0,0.16);
}

.level-detail-page .level-thumbnail-section .level-detail-thumb > span:not(.level-thumbnail-fallback) {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 2px 2px rgba(0,0,0,0.28);
}

.level-detail-page .level-thumbnail-section .level-detail-thumb-image {
  cursor: zoom-in;
  border-radius: 5px;
}

.level-detail-page .level-thumbnail-section .level-thumbnail-fallback {
  display: none;
  padding: 0 18px;
  text-align: center;
  color: #244b68;
  font-size: 24px;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}

.level-detail-page .level-thumbnail-section .thumbnail-load-failed .level-detail-thumb-image {
  display: none;
}

.level-detail-page .level-thumbnail-section .thumbnail-load-failed .level-thumbnail-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.level-detail-page .level-thumbnail-edit-control {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
}

.level-detail-page .level-thumbnail-edit-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
  opacity: 0.38;
}

.level-detail-page .level-thumbnail-section .level-thumbnail-edit-button img {
  width: 16px;
  height: 16px;
  opacity: 1;
  display: block;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(25%) sepia(28%) saturate(1061%) hue-rotate(164deg) brightness(92%) contrast(86%);
  transition: filter 0.15s ease;
}

.level-detail-page .level-thumbnail-edit-control .tooltip {
  right: auto;
  bottom: calc(100% - 9px);
  left: 50%;
  transform: translateX(-50%);
  background: #4a90c2;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 6px;
  text-shadow: none;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.level-detail-page .level-thumbnail-edit-control .tooltip::after {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-color: #4a90c2 transparent transparent transparent;
}

.level-detail-page .level-thumbnail-edit-control:hover .tooltip,
.level-detail-page .level-thumbnail-edit-control:focus-within .tooltip {
  opacity: 1;
}

.level-detail-page .level-thumbnail-edit-button:hover,
.level-detail-page .level-thumbnail-edit-button:focus-visible {
  background: var(--button-bg);
  color: var(--button-text);
  outline: none;
  opacity: 1;
}

.level-detail-page .level-thumbnail-section .level-thumbnail-edit-button:hover img,
.level-detail-page .level-thumbnail-section .level-thumbnail-edit-button:focus-visible img {
  opacity: 1;
}

/* Real thumbnails can contain transparency; keep only the frame so the page/card surface shows through. */
.level-browse-thumb.has-thumbnail,
.levels-card-grid .level-browse-thumb.has-thumbnail,
.level-detail-page .level-thumbnail-section .level-detail-thumb.has-thumbnail,
.level-form-page .level-thumbnail-section .level-thumbnail-preview.has-thumbnail {
  background: transparent;
}

.level-browse-thumb.has-thumbnail,
.levels-card-grid .level-browse-thumb.has-thumbnail,
.level-detail-page .level-thumbnail-section .level-detail-thumb.has-thumbnail,
.level-form-page .level-thumbnail-section .level-thumbnail-preview.has-thumbnail {
  color: inherit;
  text-shadow: none;
}

.level-browse-thumb.has-thumbnail .level-thumb-media {
  background: transparent;
}

.level-detail-page .level-thumbnail-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
}

.level-detail-page .level-thumbnail-switch {
  width: 34px;
  height: 30px;
  border: 1px solid #9fb7c9;
  border-radius: 7px;
  background: linear-gradient(#f8fbfd, #dceaf3);
  color: #254f6d;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
  cursor: pointer;
}

.level-detail-page .level-thumbnail-switch:hover,
.level-detail-page .level-thumbnail-switch:focus-visible {
  border-color: #5f86a3;
  color: #14354d;
  outline: none;
}

.level-detail-page .level-thumbnail-switch.active {
  background: #3f6f8e;
  border-color: #3f6f8e;
  color: #fff;
}

.level-detail-page [hidden] {
  display: none !important;
}

.level-detail-page .image-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
}

.level-detail-page .image-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 0;
}

.level-detail-page .level-side .level-info-section {
  padding: 8px 0;
}

.level-detail-page .level-side .level-meta-grid {
  row-gap: 0;
}

.level-detail-page .level-side .level-info-line {
  align-items: center;
  min-height: 30px;
  padding: 5px 0;
}

/* Keep the level information card sized to its own content, with even compact spacing. */
.level-detail-page .level-side {
  align-self: start !important;
}

.level-detail-page .level-side .level-column-panel {
  align-self: start !important;
  height: auto !important;
  gap: 0 !important;
  padding-bottom: 14px !important;
}

.level-detail-page .level-side .level-thumbnail-section {
  margin: 0 !important;
  padding: 0 0 8px !important;
}

.level-detail-page .level-side .level-info-section {
  margin: 0 !important;
  padding: 6px 0 0 !important;
}

.level-detail-page .level-side .level-meta-grid {
  margin: 0 !important;
  padding: 0 !important;
  row-gap: 0 !important;
}

.level-detail-page .level-side .level-info-line {
  min-height: 0 !important;
  padding: 5px 0 !important;
  align-items: center !important;
}

.level-detail-page .level-side .level-info-line:first-child {
  padding-top: 0 !important;
}

.level-detail-page .level-side .level-info-line:last-child {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

/* Functional level portal additions. */
.level-visibility-badge,
.level-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 3px 8px;
  border: 1px solid #b7c7d4;
  border-radius: 999px;
  background: #eaf3ea;
  color: #286436;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.level-visibility-badge.private {
  background: #fff4d9;
  color: #8b6200;
}

.level-visibility-badge.deleted,
.level-state-badge.deleted {
  background: #f7dddd;
  color: #9d2424;
}

.level-state-badge {
  background: #e8f0f6;
  color: #395a74;
}

.inline-view-button {
  margin-left: 7px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
}

.level-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 60, 0.65);
}

.level-modal.hidden {
  display: none;
}

.level-modal-content {
  width: min(720px, 92vw);
  max-height: 82vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(#f8fbff, #e7eff6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}

.level-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(95,134,163,0.22);
}

.level-modal-header h2 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 22px;
}

.level-modal-header button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  line-height: 1;
}

.rates-list {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.rate-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 170px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #c4d3df;
  border-radius: 8px;
  background: #f9fcff;
}

.rate-entry strong {
  color: var(--primary-dark);
  text-align: center;
}

.rate-entry span {
  color: #617589;
  font-size: 13px;
  text-align: right;
}

.level-comment.deleted-comment,
.reply.deleted-comment {
  opacity: 0.82;
  background: linear-gradient(#fff5f5, #f0e1e1);
}

.level-comment.pinned-comment {
  border-color: #8fb3cb;
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 2px rgba(95,134,163,0.12);
}

.comment-thread {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(95,134,163,0.18);
}

.thread-replies {
  display: grid;
  gap: 8px;
}

.reply {
  padding: 10px 12px;
  border: 1px solid #c4d3df;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #eef5fa);
  overflow: visible;
}

.reply-header,
.reply-user,
.reply-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-header {
  justify-content: space-between;
}

.reply-avatar {
  width: 34px;
  height: 34px;
  border: 2px solid var(--role-color);
  border-radius: 50%;
  background: #4a90c2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
}

.reply-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reply-username {
  font-weight: 800;
  text-decoration: none;
}

.reply-body {
  margin-top: 8px;
  color: #263848;
  line-height: 1.4;
}

.reply-footer {
  margin-top: 8px;
  color: #617589;
  font-size: 13px;
}

.thread-reply-form {
  margin-top: 10px;
  overflow: visible;
}

.thread-reply-form textarea,
.edit-textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  padding: 9px 10px;
  resize: vertical;
}

.thread-form-footer,
.comment-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.thread-reply-form textarea[hidden],
.edit-textarea[hidden] {
  display: none !important;
}

.thread-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.thread-actions .control-btn,
.comment-form-actions .control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  overflow: visible;
  line-height: normal;
  padding: 6px 14px;
}

.level-toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: grid;
  gap: 8px;
}

.level-toast {
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f9fcff;
  color: #183247;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  font-weight: 700;
}

.level-toast.error,
.level-toast.delete {
  background: #fff0f0;
  color: #9d2424;
}

.level-list-card {
  grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.9fr) minmax(320px, 0.95fr);
  min-height: 0;
  align-items: center;
}

.level-card-game small {
  display: block;
  margin-top: 6px;
  color: #617589;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.level-card-quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.level-card-visibility.public {
  color: #286436;
}

.level-card-visibility.private {
  color: #8b6200;
}

.level-card-visibility.deleted {
  color: #9d2424;
}

@media (max-width: 900px) {
  .rate-entry,
  .level-list-card {
    grid-template-columns: 1fr;
  }

  .rate-entry span {
    text-align: left;
  }

  .level-card-quick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.level-detail-page .comment-btn img,
.level-detail-page .reply-actions .comment-btn img,
.level-detail-page .level-title-actions .comment-btn img {
  width: 22px;
  height: 22px;
  display: block;
}

.level-detail-page .level-title-actions a.comment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  line-height: 0;
}

.level-detail-page .comment-actions .nav-item,
.level-detail-page .reply-actions .nav-item,
.level-detail-page .level-title-actions .nav-item {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.level-detail-page .comment-username,
.level-detail-page .reply-username,
.levels-grid .level-card-author {
  text-decoration: none;
}

.level-detail-page .comment-username:hover,
.level-detail-page .reply-username:hover,
.levels-grid .level-card-author:hover .level-card-username {
  text-decoration: underline;
}

.level-detail-page .comment-username.legacy-author-plain,
.level-detail-page .comment-username.legacy-author-plain:hover,
.levels-grid .level-card-author.level-author-plain:hover .level-card-username {
  text-decoration: none;
}

.level-detail-page .level-comment-preview,
.level-detail-page .content-preview.profile-description {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  font: inherit;
}

.level-detail-page .level-description.profile-description {
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.level-detail-page .help-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 40, 60, 0.65);
}

.level-detail-page .help-modal.hidden {
  display: none;
}

.level-detail-page .help-modal-content {
  width: 560px;
  max-width: 92%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(#f4f8fc, #e3edf6);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 30px rgba(0,0,0,0.3);
}

.level-detail-page .help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(#4a7fa3, #3b6e8f);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.level-detail-page .help-header button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
}

.level-detail-page .help-header button::before,
.level-detail-page .help-header button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.level-detail-page .help-header button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.level-detail-page .help-header button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.level-detail-page .help-body {
  padding: 16px 18px;
}

.level-detail-page .rates-list {
  display: grid;
  gap: 8px;
  padding: 0;
}

.level-detail-page .rate-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 155px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #c4d3df;
  border-radius: 8px;
  background: linear-gradient(#ffffff, #edf3f8);
  box-shadow: inset 0 1px 0 #ffffff;
}

.level-detail-page .rate-entry strong {
  color: var(--primary-dark);
  width: auto;
  text-align: center;
  justify-self: center;
}

.level-detail-page .rate-entry span {
  color: #617589;
  font-size: 13px;
  text-align: right;
}

.level-detail-page .level-toast-container,
.level-detail-page .level-toast {
  all: unset;
}

.levels-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
}

.level-browse-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) minmax(250px, 0.55fr);
  gap: 18px;
  align-items: stretch;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #edf3f8);
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(0,0,0,0.08);
  text-align: left;
}

.level-browse-thumb {
  width: 132px;
  aspect-ratio: 4 / 3;
  align-self: center;
  border: 1px solid #b7c7d4;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255,255,255,0.28), rgba(255,255,255,0)),
    linear-gradient(135deg, #7fa6c1, #d6e4ef);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.level-browse-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.level-browse-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.level-browse-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.level-browse-title {
  color: var(--primary-dark);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}

.level-browse-title:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.level-browse-main .level-card-author {
  width: fit-content;
  display: inline-flex;
}

.level-browse-game {
  color: #111;
  font-size: 15px;
  line-height: 1.25;
}

.level-browse-game b {
  margin-right: 6px;
  color: #617589;
  font-size: 13px;
}

.level-browse-game span {
  font-weight: 700;
}

.level-browse-description {
  max-width: 720px;
  margin: 0;
  color: #526a7d;
  font-size: 14px;
  line-height: 1.35;
}

.level-browse-description strong,
.level-browse-description em,
.level-browse-description u,
.level-browse-description s,
.level-browse-description span,
.level-browse-description a {
  margin: 0;
  padding: 0;
}

.level-browse-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

.level-browse-stats span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(95,134,163,0.18);
  border-radius: 7px;
  background: linear-gradient(#f9fcff, #e8f0f6);
  color: #111;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}

.level-browse-stats b {
  display: block;
  margin-bottom: 4px;
  color: #617589;
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 980px) {
  .level-browse-card {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .level-browse-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .level-browse-card,
  .level-detail-page .rate-entry {
    grid-template-columns: 1fr;
  }

  .level-browse-thumb {
    width: 100%;
    max-width: 180px;
  }

  .level-browse-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .level-detail-page .rate-entry span {
    text-align: left;
  }
}

/* Level portal polish: keep level-specific pieces aligned with shared profile styles. */
.inline-view-button:hover {
  background: linear-gradient(#c8dcea, #adc6d8);
  border-color: #5f86a3;
  text-decoration: none;
}

.level-detail-page .help-modal-content.level-rates-modal-content {
  width: min(770px, 92vw);
  max-height: 82vh;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.level-detail-page .help-modal-content.level-rates-modal-content.level-rates-modal-guest {
  width: min(735px, 92vw);
}

.level-detail-page .level-rates-modal-content .help-body {
  min-height: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.level-detail-page .level-rates-modal-header {
  --level-rate-header-left-gutter: 18px;
  --level-rate-header-right-gutter: 39px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-left: var(--level-rate-header-left-gutter);
  padding-right: var(--level-rate-header-right-gutter);
}

.level-detail-page .level-rates-modal-header span {
  grid-column: 1;
  justify-self: start;
  white-space: nowrap;
}

.level-detail-page .level-rates-modal-header button {
  grid-column: 2;
  justify-self: end;
}

.level-detail-page .level-rates-modal-header button:hover {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.85);
}

.level-detail-page .level-rates-modal-content .rates-list {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  align-self: center;
  min-height: 0;
  max-height: calc(82vh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

.level-detail-page .level-rates-modal-content .pagination {
  flex: 0 0 auto;
  margin: 18px 0 0;
}

.level-detail-page .level-rates-modal-content .pagination-jump {
  transform: none;
}

.level-detail-page .level-rates-modal-content .rates-list .no-comments {
  box-sizing: border-box;
  width: 713px;
  max-width: 100%;
}

.level-detail-page .level-feature-modal-content .help-body {
  gap: 15px;
  padding: 20px 22px 22px;
}

.level-detail-page .help-modal-content.level-feature-modal-content {
  width: min(560px, 92vw);
}

.level-detail-page .help-modal-content.level-feature-history-modal-content {
  width: fit-content;
  max-width: 96vw;
}

.level-detail-page .level-feature-history-modal-content .help-body {
  padding-left: 14px;
  padding-right: 14px;
}

.level-detail-page .level-feature-modal-content .level-rates-modal-header {
  --level-rate-header-left-gutter: 22px;
  --level-rate-header-right-gutter: 22px;
}

.level-detail-page .help-modal-content.level-thumbnail-modal-content {
  width: min(860px, 94vw);
}

.level-detail-page .level-thumbnail-modal-content .help-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 16px;
}

.level-detail-page .level-thumbnail-modal-form {
  display: grid;
  gap: 0;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-section {
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-field,
.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-panel {
  grid-area: auto;
  min-width: 0;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-field {
  width: 820px;
  max-width: 100%;
  margin: 0;
}

.level-detail-page .level-thumbnail-modal-content .level-field {
  display: grid;
  gap: 7px;
}

.level-detail-page .level-thumbnail-modal-content .level-form-section label {
  margin: 0;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.level-detail-page .level-thumbnail-modal-content input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  color: #111;
  font: inherit;
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.level-form-page #level-visual-filters:disabled {
  cursor: not-allowed;
}

.level-form-page #level-game-category:disabled,
.level-form-page #level-game-select:disabled,
.level-form-page #level-version-select:disabled {
  cursor: not-allowed;
}

.level-detail-page .level-thumbnail-modal-content input.level-thumbnail-input-disabled {
  background: #eef3f7;
  color: #5a6c7a;
  cursor: not-allowed;
  opacity: 1;
}

.level-detail-page .level-thumbnail-modal-content .legacy-thumbnail-input {
  margin-top: 8px;
}

.level-detail-page .level-thumbnail-modal-content .level-field-help {
  color: #617589;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-help a {
  color: #2f5d84;
  text-decoration: none;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-help a:hover,
.level-detail-page .level-thumbnail-modal-content .level-thumbnail-help a:focus-visible {
  color: #b00000;
  text-decoration: underline;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-panel {
  display: block;
  width: 430px;
  max-width: 100%;
  margin: 12px 0 0;
  padding-top: 0;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview {
  width: 430px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  border: 2px solid #9fb7c9;
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: -6px;
  border-radius: 7px;
  background: linear-gradient(#b7cfdf, #91b4ca);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview.has-thumbnail {
  background: transparent;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview span {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 2px 2px rgba(0,0,0,0.28);
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 430px;
  max-width: 100%;
  margin-top: 12px;
  min-height: 32px;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-switcher:empty {
  display: none;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-switch {
  width: 34px;
  height: 30px;
  border: 1px solid #9fb7c9;
  border-radius: 7px;
  background: linear-gradient(#f8fbfd, #dceaf3);
  color: #254f6d;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
  cursor: pointer;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-switch:hover,
.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-switch:focus-visible {
  border-color: #5f86a3;
  color: #14354d;
  outline: none;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-preview-switch.active {
  background: #3f6f8e;
  border-color: #3f6f8e;
  color: #fff;
}

.level-detail-page .level-thumbnail-modal-content .level-thumbnail-input-error {
  border-color: #ad3939;
  box-shadow: 0 0 0 3px rgba(173,57,57,0.14);
}

.level-detail-page #thumbnail-message:empty {
  display: none;
}

.level-detail-page .level-thumbnail-modal-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.level-detail-page .level-thumbnail-modal-actions .control-btn {
  min-width: 128px;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 15px;
}

@media (max-width: 780px) {
  .level-detail-page .level-thumbnail-modal-actions .control-btn {
    width: 100%;
  }
}

.level-portal-loading-list {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-bottom: 14px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.box-inner.single-column:has(.level-portal-loading-list) {
  padding-bottom: 0;
}

.single-column .text > .level-portal-loading-list:last-child {
  margin-bottom: 0;
}

.levels-hero + .level-portal-loading-list {
  margin-top: 0;
}

.level-portal-loading {
  box-sizing: border-box;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
  animation: none;
}

.level-detail-page .feature-guidance {
  margin: 0;
  color: var(--primary-dark);
  font-size: 15px;
  line-height: 1.35;
}

.level-detail-page .level-feature-form {
  display: grid;
  grid-template-columns: minmax(240px, 280px) max-content;
  justify-content: start;
  gap: 12px;
  align-items: end;
}

.level-detail-page .level-feature-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--primary-dark);
  font-weight: 700;
}

.level-detail-page .level-feature-field input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(#ffffff, #edf5fb);
  color: var(--primary-dark);
  color-scheme: light;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 12px;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.05),
    0 1px 0 rgba(255,255,255,0.9);
}

.level-detail-page .level-feature-field input:focus {
  outline: none;
  border-color: #5f86a3;
  background: #ffffff;
  color: var(--primary-dark);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.08),
    0 0 0 2px rgba(95,134,163,0.15);
}

.level-detail-page .level-feature-field input::-webkit-datetime-edit,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-fields-wrapper,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-text,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-month-field,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-day-field,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-year-field,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-hour-field,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-minute-field,
.level-detail-page .level-feature-field input::-webkit-datetime-edit-ampm-field {
  color: var(--primary-dark);
  opacity: 1;
}

.level-detail-page .level-feature-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.level-detail-page .level-feature-actions .control-btn {
  min-height: 40px;
  white-space: nowrap;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
}

.level-detail-page .rate-entry {
  grid-template-columns: 48px minmax(220px, 335px) 64px 170px 22px;
  gap: 12px;
  justify-content: center;
  overflow: visible;
}

.level-detail-page .rate-entry.rate-entry-manageable {
  grid-template-columns: 48px minmax(220px, 335px) 64px 170px 22px;
}

.level-detail-page .rate-entry.rate-entry-legacy {
  grid-template-columns: 48px minmax(220px, 335px) 64px 170px 22px;
}

.level-detail-page .rate-entry.rate-entry-guest {
  grid-template-columns: 48px minmax(220px, 335px) 64px 170px;
}

.level-detail-page .rate-entry.rate-entry-legacy time {
  box-sizing: border-box;
  padding-right: 0;
}

.level-detail-page .feature-entry {
  justify-content: start;
}

.level-detail-page .feature-entry > strong {
  justify-self: start;
  text-align: left;
}

.level-detail-page .feature-entry.is-featured {
  grid-template-columns:
    58px
    minmax(220px, 335px)
    116px
    170px
    170px;
}

.level-detail-page .feature-entry.is-unfeatured {
  grid-template-columns:
    58px
    minmax(220px, 335px)
    116px
    170px
    170px;
}

.level-detail-page .level-feature-history-modal-content .rates-list .no-comments {
  width: 923px;
}

.level-detail-page .feature-entry-date {
  min-width: 0;
  color: #617589;
  font-size: 13px;
  text-align: left;
  justify-self: start;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .level-detail-page .level-feature-form {
    grid-template-columns: 1fr;
  }

  .level-detail-page .level-feature-actions {
    justify-content: flex-start;
  }
}

.level-detail-page .rate-entry .rate-entry-number {
  color: #617589;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  justify-self: center;
}

.level-detail-page .rate-entry-user,
.level-detail-page .rate-entry .comment-user,
.level-detail-page .rate-entry .comment-username {
  min-width: 0;
}

.level-detail-page .rate-entry-user {
  max-width: 335px;
}

.level-detail-page .rate-entry .comment-username {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.level-detail-page .rate-entry .comment-avatar {
  width: 44px;
  height: 44px;
  font-size: 14px;
  flex: 0 0 44px;
  color: #fff;
  background: #4a90c2;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid var(--role-color, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
}

.level-detail-page .rate-entry .anonymous-rate-avatar {
  position: relative;
  background: #4a90c2;
  border-color: #8fa9bc;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.level-detail-page .rate-entry .anonymous-rate-name {
  color: #4f6578;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.level-detail-page .rate-entry .anonymous-rate-name:hover {
  text-decoration: none;
}

.level-detail-page .rate-entry time {
  white-space: nowrap;
  color: #617589;
  font-size: 13px;
  text-align: left;
  justify-self: start;
  width: 170px;
}

.level-detail-page .feature-entry time {
  width: auto;
  color: #617589;
  font-size: 13px;
  justify-self: start;
  text-align: left;
}

.level-detail-page .rate-entry .nav-item {
  justify-self: center;
  position: relative;
}

.level-detail-page .rate-entry-spacer {
  width: 22px;
  height: 1px;
  display: block;
}

.level-detail-page .rate-entry .delete-level-rate:hover img {
  transform: none;
}

.level-detail-page .content-preview.profile-description {
  display: block;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f4f8fc, #e7eff6);
  box-shadow: inset 0 1px 0 #ffffff;
  color: #000;
  line-height: 1.45;
  word-break: break-word;
}

.level-detail-page .level-comment.deleted-comment,
.level-detail-page .reply.deleted-comment {
  border: 2px solid #c0392b !important;
  opacity: 0.65;
  position: relative;
  background: linear-gradient(#ffffff, #eef5fa);
}

.level-detail-page .level-comment.pinned-comment {
  border: 2px solid #d4af37 !important;
  box-shadow:
    inset 0 1px 0 #fff6cc,
    0 0 8px rgba(212,175,55,0.35);
  position: relative;
}

.level-detail-page .legacy-comment-marker:disabled {
  opacity: 1;
  cursor: default;
}

.level-detail-page .legacy-comment-marker i {
  color: #d4af37;
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.level-detail-page .legacy-comment-marker svg {
  color: #d4af37;
  opacity: 1;
  font-size: 20px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.level-detail-page .comment-btn.censor-level-comment i {
  color: #000000;
  opacity: 0.7;
  font-size: 18px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.level-detail-page .comment-btn.censor-level-comment svg {
  color: #000000;
  opacity: 0.7;
  font-size: 18px;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.level-detail-page .comment-btn.censor-level-comment.active-censor i,
.level-detail-page .comment-btn.censor-level-comment.active-censor svg {
  color: #cc0000;
  opacity: 0.88;
}

.level-detail-page .comment-btn.censor-level-comment.active-censor:disabled {
  opacity: 1;
}

.level-detail-page .comment-btn.censor-level-comment.active-censor:disabled i,
.level-detail-page .comment-btn.censor-level-comment.active-censor:disabled svg {
  color: #cc0000;
  opacity: 0.88;
  filter: none;
}

.level-detail-page .comment-btn.censor-level-comment:hover i,
.level-detail-page .comment-btn.censor-level-comment:hover svg,
.level-detail-page .comment-btn.censor-level-comment.active-censor:hover i,
.level-detail-page .comment-btn.censor-level-comment.active-censor:hover svg {
  color: #cc0000;
  opacity: 1;
  filter: none;
}

.level-detail-page .level-comment.locked-comment {
  border: 2px solid #7a7a7a !important;
  box-shadow:
    inset 0 1px 0 #f2f2f2,
    0 0 8px rgba(0,0,0,0.12);
  position: relative;
}

.level-detail-page .level-comment.linked-target:not(.pinned-comment):not(.deleted-comment):not(.private-comment):not(.locked-comment),
.level-detail-page .reply.linked-target:not(.deleted-comment):not(.private-comment):not(.locked-comment) {
  border-color: #d49a1f;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 0 0 2px rgba(212,154,31,0.12);
}

.level-detail-page .locked-badge {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: #666;
}

.level-detail-page .comment-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-detail-page .comment-thread {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: none;
  box-shadow: none;
}

.level-detail-page .comment-thread[hidden] {
  display: none !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.level-detail-page .thread-replies {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.level-detail-page .reply {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  overflow: visible;
  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0,0,0,0.05);
  margin-bottom: 8px;
}

.level-detail-page .reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.level-detail-page .reply-actions {
  display: flex;
  gap: 8px;
}

.level-detail-page .reply-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-detail-page .comment-avatar,
.level-detail-page .reply-avatar {
  width: 44px;
  height: 44px;
  font-size: 14px;
}

.level-detail-page .reply-avatar {
  border-radius: 50%;
  background: #4a90c2;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid var(--role-color, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
}

.level-detail-page .reply-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.level-detail-page .comment-username,
.level-detail-page .reply-username {
  font-size: 15px;
  font-weight: 600;
}

.level-detail-page .reply-body {
  opacity: 1;
}

.level-detail-page .comment-footer,
.level-detail-page .reply-footer {
  font-size: 12px;
  color: #6b7c8c;
}

.level-detail-page .reply-footer {
  text-align: right;
  margin-top: 4px;
}

.level-detail-page .thread-reply-form {
  margin-top: 10px;
  padding: 14px;
  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-detail-page .thread-reply-form[hidden] {
  display: none !important;
}

.level-detail-page .thread-reply-form textarea,
.level-detail-page .edit-textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: linear-gradient(#ffffff, #f5f9fd);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  resize: none;
  transition: all 0.15s ease;
}

.level-detail-page .thread-reply-form .thread-form-footer {
  margin-top: 0;
  align-items: center;
}

.level-detail-page .reply .comment-form-footer {
  margin-top: 10px;
  padding-bottom: 2px;
  align-items: center;
  overflow: visible;
}

.level-detail-page .thread-actions,
.level-detail-page .comment-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.level-detail-page .thread-actions .control-btn,
.level-detail-page .reply .comment-form-actions .control-btn {
  box-sizing: border-box;
  min-height: 36px;
  overflow: visible;
  line-height: normal;
  padding: 6px 14px;
}

.level-detail-page .thread-reply-form textarea:focus,
.level-detail-page .edit-textarea:focus {
  outline: none;
  border-color: #5f86a3;
  background: #ffffff;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.1),
    0 0 0 2px rgba(95,134,163,0.15);
}

.level-detail-page .level-posted-with-visibility {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  white-space: nowrap;
}

.level-detail-page .level-side .level-info-line strong.level-posted-with-visibility {
  display: inline-flex;
  width: fit-content;
}

.level-detail-page .level-posted-with-visibility .level-visibility-action {
  display: inline-flex;
  gap: 0;
  margin-left: 4px;
  cursor: default;
}

.level-detail-page .level-posted-with-visibility .level-feature-history-action {
  display: inline-flex;
  margin-left: 4px;
}

.level-detail-page .level-posted-with-visibility .level-visual-filter-action {
  display: inline-flex;
  margin-left: 4px;
}

.level-detail-page .level-posted-with-visibility .nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  cursor: default;
}

.level-detail-page .level-posted-with-visibility .comment-btn {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  pointer-events: none;
}

.level-detail-page .level-posted-with-visibility .level-feature-history-action.is-clickable .comment-btn {
  cursor: pointer;
  pointer-events: auto;
}

.level-detail-page .level-posted-with-visibility .comment-btn img {
  width: 20px;
  height: 20px;
  opacity: 1;
  transition: all 0.15s ease;
}

.level-detail-page .level-posted-with-visibility .nav-item:hover .comment-btn img {
  opacity: 1;
}

.level-detail-page .level-posted-with-visibility .level-visibility-public {
  color: #4a90c2;
}

.level-detail-page .level-posted-with-visibility .level-visibility-public .comment-btn img {
  filter: brightness(0) saturate(100%) invert(58%) sepia(17%) saturate(1257%) hue-rotate(164deg) brightness(87%) contrast(85%);
}

.level-detail-page .level-posted-with-visibility .level-visibility-private {
  color: #666;
}

.level-detail-page .level-posted-with-visibility .level-visibility-private .comment-btn img {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(91%) contrast(84%);
}

.level-detail-page .level-posted-with-visibility .level-visibility-deleted {
  color: #c0392b;
}

.level-detail-page .level-posted-with-visibility .level-visibility-deleted .comment-btn img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(87%) saturate(1367%) hue-rotate(343deg) brightness(96%) contrast(85%);
}

.level-detail-page .level-posted-with-visibility .level-visibility-blacklisted {
  color: #c0392b;
}

.level-detail-page .level-posted-with-visibility .level-visibility-blacklisted .comment-btn img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(87%) saturate(1367%) hue-rotate(343deg) brightness(96%) contrast(85%);
}

.level-detail-page .level-posted-with-visibility .level-visibility-blacklisted .tooltip {
  background: #c0392b;
  color: #fff;
}

.level-detail-page .level-posted-with-visibility .level-visibility-blacklisted .tooltip::after {
  border-top-color: #c0392b;
}

.level-detail-page .level-posted-with-visibility .level-feature-history-action .comment-btn img {
  opacity: 0.72;
  filter: brightness(0) saturate(100%) invert(38%) sepia(9%) saturate(832%) hue-rotate(166deg) brightness(89%) contrast(84%);
}

.level-detail-page .level-posted-with-visibility .level-visual-filter-action .comment-btn img {
  filter: brightness(0) saturate(100%) invert(47%) sepia(31%) saturate(1808%) hue-rotate(293deg) brightness(91%) contrast(83%);
}

.level-detail-page .level-posted-with-visibility .level-visual-filter-action .tooltip {
  background: #4a90c2;
  color: #fff;
}

.level-detail-page .level-posted-with-visibility .level-feature-history-action.is-featured .comment-btn img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(912%) hue-rotate(5deg) brightness(102%) contrast(101%);
}

.level-detail-page .level-posted-with-visibility .level-feature-history-action:not(.is-featured):hover .comment-btn img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(58%) sepia(17%) saturate(1257%) hue-rotate(164deg) brightness(87%) contrast(85%);
}

.level-detail-page .level-posted-with-visibility .level-feature-history-action .tooltip {
  background: #4a90c2;
  color: #fff;
}

.level-detail-page .profile-comment-form textarea {
  min-height: 95px;
  transition: all 0.15s ease;
}

.level-detail-page .profile-comment-form textarea:focus {
  outline: none;
  border-color: #5f86a3;
  background: #ffffff;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.1),
    0 0 0 2px rgba(95,134,163,0.15);
}

.level-form-page [hidden] {
  display: none !important;
}

html.legacy-level-edit-page .level-form-page #level-guidelines-button {
  display: none !important;
}

.level-edit-loading .level-form-page .level-editor-form,
.level-add-loading .level-form-page .level-editor-form {
  display: none !important;
}

.level-edit-loading .level-form-page .box-inner.single-column,
.level-add-loading .level-form-page .box-inner.single-column {
  padding-bottom: 14px;
}

.level-edit-loading .level-form-page .level-form-shell,
.level-add-loading .level-form-page .level-form-shell {
  margin-bottom: 0;
}

.level-form-page .level-form-loading {
  display: none;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 4px 0 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
  animation: none;
}

.level-edit-loading .level-form-page .level-form-loading,
.level-add-loading .level-form-page .level-form-loading {
  display: block;
}

.level-form-page .level-edit-denied-message {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 4px 0 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

.level-form-page .box-inner.single-column .text p.level-edit-denied-message {
  max-width: none;
}

.level-form-page .level-login-required-message {
  display: block;
}

.level-form-page .main-content {
  flex: 0 0 auto;
}

.level-detail-page .level-description-panel .level-description.profile-description {
  max-height: 260px;
  overflow: hidden;
  padding-right: 8px;
}

.level-detail-page .level-description-panel .level-description.profile-description.is-scrollable {
  overflow-y: auto;
}

.level-detail-page .comment {
  padding: 12px 14px;
  gap: 8px;
}

.level-detail-page .comment-body {
  padding-left: 0;
}

.level-detail-page .comment-footer {
  align-items: flex-end;
  gap: 12px;
}

.levels-grid {
  max-width: 980px;
  gap: 14px;
}

.level-browse-card {
  grid-template-columns: 156px minmax(0, 1fr);
  grid-template-areas:
    "thumb main"
    "thumb stats";
  gap: 12px 18px;
  align-items: start;
  padding: 16px 18px;
}

.level-browse-thumb {
  grid-area: thumb;
  width: 156px;
  aspect-ratio: 4 / 3;
  border: 2px solid #9fb7c9;
  outline: 3px solid rgba(255,255,255,0.85);
  outline-offset: -6px;
  background: linear-gradient(#b7cfdf, #91b4ca);
}

.level-browse-main {
  grid-area: main;
  gap: 6px;
}

.level-browse-title {
  font-size: 22px;
}

.level-browse-game {
  display: none;
}

.level-browse-game span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.level-browse-description {
  display: none;
}

.level-browse-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  align-items: stretch;
}

.level-browse-stats span {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(95,134,163,0.18);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.level-browse-stats span:last-child {
  border-bottom: 0;
}

.level-browse-stats b {
  margin: 0;
}

.level-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 8px;
  border: 1px solid rgba(95,134,163,0.35);
  border-radius: 999px;
  background: #eef4f9;
  color: #395a74;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.level-status-pill.private {
  border-color: rgba(160,116,26,0.35);
  background: #fff4d9;
  color: #7a5814;
}

.level-status-pill.deleted {
  border-color: rgba(176,74,74,0.35);
  background: #f7dddd;
  color: #9d2424;
}

.levels-grid .level-card-author {
  color: var(--role-color);
  text-decoration: none;
}

.levels-grid .level-card-author:hover .level-card-username,
.levels-grid .level-card-author:focus-visible .level-card-username {
  text-decoration: underline;
}

.levels-grid .level-card-author.level-author-plain:hover .level-card-username,
.levels-grid .level-card-author.level-author-plain:focus-visible .level-card-username {
  text-decoration: none;
}

@media (max-width: 1100px) {
  .level-browse-card {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .level-browse-thumb {
    width: 140px;
  }

  .level-browse-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .level-detail-page .rate-entry,
  .level-detail-page .rate-entry.rate-entry-manageable {
    grid-template-columns: 48px minmax(220px, 1fr) minmax(78px, max-content) 22px;
  }

  .level-detail-page .rate-entry.rate-entry-legacy {
    grid-template-columns: 48px minmax(220px, 1fr) minmax(78px, max-content) 22px;
  }

  .level-detail-page .rate-entry.rate-entry-guest {
    grid-template-columns: 48px minmax(220px, 1fr) minmax(78px, max-content);
  }

  .level-detail-page .rate-entry.rate-entry-legacy time {
    padding-right: 0;
  }

  .level-detail-page .rate-entry time {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .level-detail-page .level-rates-modal-header {
    --level-rate-header-left-gutter: 18px;
    --level-rate-header-right-gutter: 18px;
  }

  .level-detail-page .level-rates-modal-content .rates-list {
    width: 100%;
  }

  .level-browse-card,
  .level-detail-page .rate-entry {
    grid-template-columns: 1fr;
  }

  .level-browse-card {
    grid-template-areas:
      "thumb"
      "main"
      "stats";
  }

  .level-browse-thumb {
    width: 100%;
    max-width: 180px;
  }

  .level-browse-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .level-detail-page .rate-entry span {
    text-align: left;
    white-space: normal;
  }
}

/* =========================
   Levels browse: member-list layout
========================= */

.levels-grid {
  --levels-list-columns:
    minmax(360px, 2.72fr)
    minmax(155px, 0.98fr)
    minmax(205px, 1.16fr)
    minmax(58px, 0.32fr)
    minmax(58px, 0.28fr)
    minmax(38px, 0.22fr)
    minmax(46px, 0.28fr)
    minmax(50px, 0.3fr)
    minmax(54px, 0.32fr);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: calc(100% - 4px);
  max-width: 1240px;
  margin: 8px auto 0;
}

.levels-page .single-column .text {
  max-width: 100%;
}

.levels-page .single-column .text > .levels-hero {
  margin-bottom: 0;
}

.levels-page .single-column {
  max-width: 1320px;
  padding-left: 12px;
  padding-right: 12px;
}

.levels-page .box-inner.single-column {
  padding-left: 20px;
  padding-right: 20px;
}

.levels-page .box-inner.single-column:has(.levels-grid-empty) {
  padding-bottom: 14px;
}

.levels-page .single-column .text > .levels-toolbar {
  margin: 10px auto 6px;
}

.levels-page .single-column .text > .levels-result-summary {
  margin: 10px auto 4px;
}

.levels-page .single-column .text > .levels-grid {
  margin: 8px auto 0;
}

.levels-page .single-column .text > .levels-grid.levels-grid-empty {
  margin-bottom: 0;
}

.levels-page .single-column .text > .levels-grid.levels-grid-empty + .levels-pagination {
  display: none;
  margin-top: 0;
}

.levels-page .single-column .text > .levels-grid:has(.levels-missing-profile) {
  margin-top: 0;
}

.levels-page .box-inner.single-column:has(.levels-missing-profile) {
  padding: 24px 28px 18px;
}

.levels-page .single-column .text > .levels-result-summary:not([hidden]) + .levels-grid {
  margin-top: 6px;
}

.levels-page .single-column .text > .levels-result-summary:not([hidden]) + .levels-grid.levels-grid-empty {
  margin-top: 8px;
}

.levels-list-columns,
.level-row {
  display: grid;
  grid-template-columns: var(--levels-list-columns);
  align-items: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
}

.levels-list-columns {
  padding: 0 20px 7px;
  border-bottom: 1px solid rgba(95,134,163,0.18);
  color: #617589;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
}

.levels-list-columns span {
  display: block;
  width: 100%;
}

.levels-list-columns span:nth-child(n+4),
.level-row-difficulty,
.level-row-stat {
  text-align: center;
}

.levels-list-columns > *,
.level-row > * {
  min-width: 0;
}

.level-row {
  min-height: 50px;
  padding: 7px 20px;
  border-bottom: 1px solid rgba(95,134,163,0.18);
  background: transparent;
  text-align: left;
}

.level-row:has(.level-status-featured) {
  background: rgba(255,190,32,0.08);
}

.level-row:has(.level-status-private) {
  background: rgba(120,132,143,0.08);
}

.level-row:has(.level-status-deleted) {
  background: rgba(190,55,55,0.08);
}

.level-row:has(.level-status-blacklisted) {
  background: rgba(199,71,28,0.08);
}

.level-row:last-child {
  border-bottom: 0;
}

.level-row:hover {
  background: rgba(255,255,255,0.38);
}

.level-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.level-row-name a {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--primary-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration: none;
}

.level-status-row-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: default;
}

.level-status-row-badge img {
  width: 16px;
  height: 16px;
  opacity: 0.9;
  filter: brightness(0) saturate(100%) invert(43%) sepia(9%) saturate(507%) hue-rotate(166deg) brightness(92%) contrast(86%) drop-shadow(0 1px 0 rgba(0,0,0,0.14));
}

.level-status-row-badge.level-status-featured img {
  transform: rotate(-8deg);
  filter: brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(912%) hue-rotate(5deg) brightness(102%) contrast(96%) drop-shadow(0 1px 0 rgba(0,0,0,0.14));
}

.level-status-row-badge.level-status-deleted img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(1187%) hue-rotate(333deg) brightness(88%) contrast(88%) drop-shadow(0 1px 0 rgba(0,0,0,0.14));
}

.level-status-row-badge.level-status-blacklisted img {
  filter: brightness(0) saturate(100%) invert(42%) sepia(75%) saturate(1162%) hue-rotate(346deg) brightness(91%) contrast(88%) drop-shadow(0 1px 0 rgba(0,0,0,0.14));
}

.level-status-row-badge.level-status-private img,
.level-status-row-badge.level-status-deleted img,
.level-status-row-badge.level-status-blacklisted img {
  width: 18px;
  height: 18px;
}

.level-row-name a:hover,
.level-row-author:hover {
  color: inherit;
  text-decoration: underline;
}

.level-row-author.level-author-plain:hover {
  text-decoration: none;
}

.level-row-author {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--role-color);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.level-row-game,
.level-row-difficulty {
  color: #465c70;
  font-size: 12.5px;
  line-height: 1.3;
}

.level-row-game-title,
.level-row-game-version {
  display: block;
}

.level-row-game-version {
  overflow-wrap: anywhere;
}

.level-row-difficulty,
.level-row-stat {
  font-weight: 700;
}

.level-row-stat {
  color: #183247;
  font-size: 12.5px;
}

.levels-empty {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

.levels-loading {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
  animation: none;
}

.levels-missing-profile {
  width: 100%;
  text-align: left;
}

.levels-page .levels-missing-profile .level-back-row {
  margin: 0 0 8px;
  text-align: left;
  line-height: 1;
}

.levels-page .levels-missing-profile .level-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
}

.levels-page .levels-missing-profile .level-back-link:hover {
  text-decoration: underline;
}

.levels-page .levels-missing-profile .level-back-link img {
  width: 16px;
  height: 16px;
  margin-left: 0;
  rotate: -90deg;
  opacity: 0.75;
}

.level-detail-page .box-inner.single-column:has(.level-missing-panel) {
  padding: 24px 28px 18px;
}

.level-detail-page .level-page-loading-wrapper .box-inner.single-column {
  max-width: none;
  padding: 20px 30px 14px;
}

.level-missing-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  text-align: left;
}

.level-missing-panel .level-back-row {
  margin: 0 0 8px;
  line-height: 1;
  text-align: left;
}

.level-missing-message {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

@media (max-width: 1180px) {
  .levels-list-columns {
    display: none;
  }

  .level-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 9px 14px;
  }

  .level-row-name,
  .level-row-author {
    grid-column: 1;
  }

  .level-row-game,
  .level-row-difficulty,
  .level-row-stat {
    grid-column: 1;
    justify-self: stretch;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 7px;
    border-top: 1px solid rgba(95,134,163,0.16);
    text-align: right;
  }

  .level-row-game::before,
  .level-row-difficulty::before,
  .level-row-stat::before {
    color: #465c70;
    font-weight: 700;
    text-align: left;
  }

  .level-row-game::before {
    content: "Game";
  }

  .level-row-difficulty::before {
    content: "Difficulty";
  }

.level-row-stat:nth-of-type(3)::before {
  content: "Plays";
}

.level-row-stat:nth-of-type(4)::before {
  content: "Rates";
}

.level-row-stat:nth-of-type(5)::before {
  content: "Rating";
}

.level-row-stat:nth-of-type(6)::before {
  content: "Reviews";
}

.level-row-stat:nth-of-type(7)::before {
  content: "Favorites";
}
}

.levels-grid-boxes {
  max-width: 1320px;
}

.levels-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  align-items: start;
  padding-bottom: 10px;
}

.levels-card-grid .level-browse-card {
  position: relative;
  display: grid;
  flex: 0 1 calc((100% - 48px) / 4);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 40px 22px auto 56px;
  grid-template-areas: none;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 14px 13px;
  overflow: visible;
}

.levels-card-grid .level-browse-card:has(.level-status-featured) {
  border-color: rgba(202,145,17,0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 2px 7px rgba(0,0,0,0.12),
    0 0 9px rgba(255,190,32,0.26);
}

.levels-card-grid .level-browse-card:has(.level-status-private) {
  border-color: rgba(120,132,143,0.62);
  background: linear-gradient(#ffffff, #eef2f5);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 2px 7px rgba(0,0,0,0.11),
    0 0 7px rgba(120,132,143,0.2);
}

.levels-card-grid .level-browse-card:has(.level-status-deleted) {
  border-color: rgba(190,55,55,0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 2px 7px rgba(0,0,0,0.11);
}

.levels-card-grid .level-browse-card:has(.level-status-blacklisted) {
  border-color: rgba(199,71,28,0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.72),
    0 2px 7px rgba(0,0,0,0.11);
}

.levels-card-grid .level-card-thumb-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.levels-card-grid .level-browse-thumb {
  grid-area: auto;
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  justify-self: stretch;
  margin-top: 0;
  overflow: hidden;
  isolation: isolate;
}

.levels-card-grid .level-card-thumb-wrap .level-browse-thumb {
  margin-top: 0;
}

.levels-card-grid .level-status-card-badge {
  position: absolute;
  top: -12px;
  right: -15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  cursor: default;
  pointer-events: auto;
}

.levels-card-grid .level-status-card-badge img {
  width: 21px;
  height: 21px;
  opacity: 0.9;
  filter: brightness(0) saturate(100%) invert(43%) sepia(9%) saturate(507%) hue-rotate(166deg) brightness(92%) contrast(86%) drop-shadow(0 1px 0 rgba(0,0,0,0.2));
}

.levels-card-grid .level-status-card-badge.level-status-featured img {
  width: 22px;
  height: 22px;
  opacity: 0.92;
  transform: rotate(-8deg);
  filter: brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(912%) hue-rotate(5deg) brightness(102%) contrast(96%) drop-shadow(0 1px 0 rgba(0,0,0,0.2)) drop-shadow(0 0 2px rgba(255,190,32,0.42));
}

.levels-card-grid .level-status-card-badge.level-status-deleted img {
  filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(1187%) hue-rotate(333deg) brightness(88%) contrast(88%) drop-shadow(0 1px 0 rgba(0,0,0,0.2));
}

.levels-card-grid .level-status-card-badge.level-status-blacklisted img {
  filter: brightness(0) saturate(100%) invert(42%) sepia(75%) saturate(1162%) hue-rotate(346deg) brightness(91%) contrast(88%) drop-shadow(0 1px 0 rgba(0,0,0,0.2));
}

.levels-card-grid .level-status-card-badge.level-status-private img,
.levels-card-grid .level-status-card-badge.level-status-deleted img,
.levels-card-grid .level-status-card-badge.level-status-blacklisted img {
  width: 24px;
  height: 24px;
}

.levels-card-grid .level-browse-main {
  grid-area: auto;
  width: 100%;
  min-height: 0;
  min-width: 0;
  display: grid;
  align-content: stretch;
  gap: 0;
  margin-top: 0;
}

.levels-card-grid .level-browse-title {
  grid-area: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 0 4px;
  overflow: hidden;
  color: var(--primary-dark);
  font-size: 16px;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
}

.levels-card-grid .level-browse-title::before,
.levels-card-grid .level-browse-title::after {
  content: "";
}

.levels-card-grid .level-browse-title:hover {
  text-decoration: underline;
}

.levels-card-grid .level-card-game-line {
  grid-area: auto;
  min-width: 0;
  min-height: 22px;
  padding: 1px 8px 3px;
  color: #617589;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}

.levels-card-grid .level-card-game-line span {
  min-width: 0;
  display: block;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.levels-card-grid .level-card-author {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  height: 56px;
  margin-top: 6px;
  padding: 7px 0 4px;
  border-top: 1px solid rgba(95,134,163,0.18);
  border-bottom: 0;
  color: var(--role-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}

.levels-card-grid .level-browse-main .level-card-author {
  width: 100%;
  display: grid;
}

.levels-card-grid .level-card-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 14px;
  font-weight: bold;
}

.levels-card-grid .level-card-username {
  min-width: 0;
  display: block;
  max-height: 42px;
  overflow: hidden;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.levels-card-grid .level-browse-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.levels-card-grid .level-thumb-media,
.levels-card-grid .level-thumb-stats {
  position: absolute;
  inset: 0;
  display: grid;
  box-sizing: border-box;
}

.levels-card-grid .level-thumb-media {
  place-items: center;
  transition: opacity 180ms ease, filter 180ms ease;
  user-select: none;
}

.levels-card-grid .level-thumb-placeholder {
  display: block;
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(47,85,110,0.45);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.levels-card-grid .level-thumb-stats {
  align-content: center;
  gap: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(95,134,163,0.34);
  border-radius: 7px;
  background:
    linear-gradient(#ffffff, #edf3f8);
  color: #183247;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px rgba(0,0,0,0.08);
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 180ms ease, opacity 180ms ease;
  pointer-events: none;
  text-shadow: none;
}

.levels-card-grid .level-browse-thumb:hover .level-thumb-media,
.levels-card-grid .level-browse-thumb:focus-visible .level-thumb-media {
  opacity: 0;
  transform: none;
  filter: none;
}

.levels-card-grid .level-browse-thumb:hover .level-thumb-stats,
.levels-card-grid .level-browse-thumb:focus-visible .level-thumb-stats {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none), (pointer: coarse) {
  .levels-card-grid .level-browse-thumb:hover .level-thumb-media,
  .levels-card-grid .level-browse-thumb:focus-visible .level-thumb-media {
    opacity: 1;
  }

  .levels-card-grid .level-browse-thumb:hover .level-thumb-stats,
  .levels-card-grid .level-browse-thumb:focus-visible .level-thumb-stats {
    opacity: 0;
    transform: translateY(8px);
  }

  .levels-card-grid .level-browse-thumb.is-peeking .level-thumb-media {
    opacity: 0;
  }

  .levels-card-grid .level-browse-thumb.is-peeking .level-thumb-stats {
    opacity: 1;
    transform: translateY(0);
  }
}

.levels-card-grid .level-thumb-stats .level-box-stat {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(95,134,163,0.2);
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.levels-card-grid .level-thumb-stats .level-box-stat:last-child {
  border-bottom: 0;
}

.levels-card-grid .level-thumb-stats b {
  color: #5d7488;
  font-size: 12.5px;
}

.levels-card-grid .level-thumb-stats strong {
  min-width: 0;
  color: #183247;
  font-size: 13px;
  text-align: right;
  overflow-wrap: anywhere;
}

.levels-card-grid .level-browse-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(95,134,163,0.18);
}

.levels-card-grid .level-browse-stats .level-box-stat {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 2px 0 3px;
  border-bottom: 1px solid rgba(95,134,163,0.14);
  color: #465c70;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}

.levels-card-grid .level-browse-stats .level-box-stat-game {
  align-items: start;
  min-height: 52.5px;
  padding-top: 0;
  padding-bottom: 3px;
}

.levels-card-grid .level-browse-stats .level-box-stat b {
  text-align: left;
}

.levels-card-grid .level-browse-stats .level-box-stat-game strong {
  margin-top: 0;
  color: #465c70;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.levels-card-grid .level-browse-stats .level-box-stat:nth-last-child(-n+2) {
  border-bottom: 0;
}

.levels-card-grid .level-browse-stats b {
  color: #617589;
  font-size: 12.5px;
  line-height: 1.3;
}

.levels-card-grid .level-browse-stats strong {
  min-width: 0;
  color: #183247;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (min-width: 901px) and (max-width: 1180px) and (max-height: 820px) {
  .levels-card-grid .level-browse-card {
    flex-basis: calc((100% - 32px) / 3);
  }
}

@media (max-width: 900px) {
  .levels-card-grid .level-browse-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (max-width: 640px) {
  .levels-card-grid .level-browse-card {
    flex-basis: 100%;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .levels-card-grid.levels-grid-boxes .level-browse-card,
  .levels-grid-boxes .level-browse-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (min-width: 901px) and (max-width: 1280px) and (min-height: 821px) {
  .levels-card-grid.levels-grid-boxes .level-browse-card,
  .levels-grid-boxes .level-browse-card {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (min-width: 901px) and (max-width: 1280px) and (max-height: 820px) {
  .levels-page .header {
    margin-bottom: 14px;
  }

  .levels-page .header-inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .levels-page .logo-circle {
    width: 40px;
    height: 40px;
  }

  .levels-page .logo-text {
    font-size: 20px;
  }

  .levels-page .header-nav {
    gap: 11px;
  }

  .levels-page .header-nav a {
    font-size: 14px;
  }

  .levels-page .page-wrapper,
  .levels-page .nav-wrapper {
    width: min(96%, 1220px);
    margin-bottom: 14px;
  }

  .levels-page .page-wrapper {
    padding: 12px;
  }

  .levels-page .box-inner.single-column {
    padding: 12px 16px;
  }

  .levels-page .single-column {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .levels-page .levels-hero {
    margin-top: 4px;
  }

  .levels-page .levels-hero h1 {
    font-size: 29px;
    line-height: 1.12;
  }

  .levels-tabs,
  .levels-source-tabs {
    gap: 8px 18px;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .levels-tab {
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 6px;
  }

  .levels-page .single-column .text > .levels-toolbar {
    margin-top: 8px;
  }

  .levels-icon-button,
  .levels-view-controls .levels-icon-button,
  .levels-toolbar-row > .levels-icon-control > .levels-icon-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
  }

  .levels-view-controls .levels-icon-control {
    height: 40px;
  }

  .levels-list-columns {
    display: none;
  }

  .levels-grid:not(.levels-grid-boxes) {
    align-items: center;
  }

  .levels-grid .level-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    width: min(100%, 520px);
    padding: 10px 14px;
    border: 1px solid rgba(95,134,163,0.28);
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }

  .levels-grid .level-row:last-child {
    border-bottom: 1px solid rgba(95,134,163,0.28);
  }

  .levels-grid .level-row:hover {
    background: rgba(255,255,255,0.18);
  }

  .levels-grid .level-row:has(.level-status-featured) {
    border-color: rgba(202,145,17,0.58);
    background: rgba(255,190,32,0.08);
  }

  .levels-grid .level-row:has(.level-status-private) {
    border-color: rgba(120,132,143,0.5);
    background: rgba(120,132,143,0.08);
  }

  .levels-grid .level-row:has(.level-status-deleted) {
    border-color: rgba(190,55,55,0.5);
    background: rgba(190,55,55,0.08);
  }

  .levels-grid .level-row > * {
    grid-column: 1;
    min-width: 0;
    max-width: 100%;
  }

  .levels-grid .level-row-name {
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 4px;
    overflow: hidden;
  }

  .levels-grid .level-row-name a {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: -webkit-box !important;
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
  }

  .levels-grid .level-row-author {
    margin-bottom: 4px;
    color: var(--role-color);
    font-size: 14px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .levels-grid .level-row-game,
  .levels-grid .level-row-difficulty,
  .levels-grid .level-row-stat,
  .levels-grid .level-row-stat.has-viewer-action {
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    min-height: 28px;
    padding: 5px 0;
    border-top: 1px solid rgba(95,134,163,0.16);
    border-radius: 0;
    background: transparent;
    color: #183247;
    font-size: 12.5px;
    text-align: right;
    white-space: normal;
  }

  .levels-grid .level-row-game {
    align-items: center;
  }

  .levels-grid .level-row-game::before,
  .levels-grid .level-row-difficulty::before,
  .levels-grid .level-row-stat::before {
    color: #465c70;
    font-weight: 700;
    text-align: left;
  }

  .levels-grid .level-row-game::before {
    content: "Game";
  }

  .levels-grid .level-row-difficulty::before {
    content: "Difficulty";
  }

  .levels-grid .level-row-stat:nth-of-type(3)::before {
    content: "Plays";
  }

  .levels-grid .level-row-stat:nth-of-type(4)::before {
    content: "Rates";
  }

  .levels-grid .level-row-stat:nth-of-type(5)::before {
    content: "Rating";
  }

  .levels-grid .level-row-stat:nth-of-type(6)::before {
    content: "Reviews";
  }

  .levels-grid .level-row-stat:nth-of-type(7)::before {
    content: "Favorites";
  }

  .levels-grid .level-row-game .level-row-game-title {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    padding: 1px 0;
  }

  .levels-grid .level-row-stat.has-viewer-action {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin: 0 -6px;
    padding: 5px 6px;
    border-top: 1px solid rgba(95,134,163,0.16);
    border-radius: 4px;
    background: rgba(75, 166, 91, 0.16);
    box-shadow: inset 0 -1px 0 rgba(95,134,163,0.14);
    color: #226733;
  }

  .levels-grid .level-row-stat.has-viewer-action::before {
    color: #226733;
    text-align: left;
  }

  .levels-grid .level-row-stat.has-viewer-action::after {
    margin-left: 0;
  }
}
/* Keep extreme level names inside the level detail layout. */
.level-detail-page .level-profile,
.level-detail-page .level-profile-header,
.level-detail-page .level-precore-row,
.level-detail-page .level-core,
.level-detail-page .level-left-column,
.level-detail-page .level-side {
  min-width: 0;
  max-width: 100%;
}

.level-detail-page .level-profile-header {
  overflow: hidden;
}

.level-detail-page .level-detail-title {
  box-sizing: border-box;
  display: block;
  min-height: 1.32em;
  padding: 0 2px 5px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.22;
  overflow-wrap: normal;
  word-break: normal;
  user-select: text;
  cursor: text;
}

.level-row-stat.has-viewer-action,
.levels-card-grid .level-thumb-stats .level-box-stat.has-viewer-action {
  background: rgba(75, 166, 91, 0.16);
}

.level-row-stat.has-viewer-action {
  border-radius: 5px;
  color: #226733;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  min-width: 0;
  max-width: max-content;
  justify-self: center;
  padding: 0 5px;
  box-sizing: border-box;
  font-weight: 800;
  white-space: nowrap;
}

.level-row-stat.has-viewer-action::after,
.levels-card-grid .level-thumb-stats .level-box-stat.has-viewer-action::after {
  content: "\2713";
  color: #226733;
  font-weight: 900;
  line-height: 1;
}

.levels-card-grid .level-thumb-stats .level-box-stat.has-viewer-action {
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 5px;
}

.levels-card-grid .level-thumb-stats .level-box-stat.has-viewer-action b,
.levels-card-grid .level-thumb-stats .level-box-stat.has-viewer-action strong {
  color: #226733;
}

.level-detail-page .level-viewer-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(75, 166, 91, 0.16);
  color: #226733;
  font-weight: 900;
  line-height: 1;
}

.level-detail-page #level-rate-count.has-rates {
  color: inherit;
  font-weight: 500;
}

.level-detail-page .level-stat-value.has-viewer-action-value {
  font-weight: 700;
}

.level-detail-page #level-rate-count.has-viewer-action-value {
  color: inherit;
  font-weight: 700;
}

.level-detail-page .level-side .level-info-line:has(.level-viewer-check) {
  background: rgba(75, 166, 91, 0.16);
  border-radius: 5px;
}

.level-detail-page .level-side .level-info-line:has(.level-viewer-check) > span,
.level-detail-page .level-side .level-info-line:has(.level-viewer-check) strong {
  color: #226733;
}

.level-detail-page .level-side .level-meta-grid {
  grid-template-columns: max-content minmax(0, 1fr);
}

.level-detail-page .level-side .level-info-line strong {
  justify-self: start;
  text-align: left;
}

@media (max-width: 900px) {
  .levels-page .box-inner.single-column,
  .level-detail-page .box-inner.single-column,
  .level-form-page .box-inner.single-column {
    padding-left: 14px;
    padding-right: 14px;
  }

  .levels-toolbar,
  .levels-toolbar-row,
  .level-actions,
  .level-title-actions,
  .level-code-actions,
  .level-form-actions,
  .level-comment-actions,
  .reply-actions,
  .comment-actions {
    flex-wrap: wrap;
  }

  .levels-toolbar,
  .levels-filter-grid,
  .level-form-grid,
  .level-info-grid,
  .level-detail-grid,
  .level-layout,
  .level-profile-layout,
  .level-browse-card,
  .level-form-card,
  .level-submission-grid,
  .level-upload-grid,
  .level-edit-grid {
    max-width: 100%;
    min-width: 0;
  }

  .level-detail-page .level-profile-header,
  .level-detail-page .level-main,
  .level-detail-page .level-side,
  .level-detail-page .level-left-column,
  .level-detail-page .level-right-column,
  .level-form-page .level-browse-card,
  .level-form-page .level-form-card {
    width: 100%;
  }

  .level-detail-page .help-modal,
  .level-detail-page .level-modal,
  .level-form-page .help-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 12px;
  }

  .level-detail-page .help-modal-content,
  .level-detail-page .level-modal-content,
  .level-form-page .help-modal-content {
    max-width: 100%;
  }

  .level-detail-page .rates-list,
  .level-detail-page .level-rates-list {
    overflow-x: hidden;
  }
}

@media (max-width: 640px) {
  .levels-page .help-modal {
    align-items: flex-start;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 10px;
  }

  .levels-page .levels-filter-modal-content {
    display: flex;
    flex-direction: column;
    width: min(100%, 345px);
    max-height: calc(100dvh - 20px);
  }

  .levels-page .levels-filter-body {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .levels-page .levels-filter-field,
  .levels-page .levels-checkbox-field {
    min-width: 0;
    max-width: 100%;
  }

  .levels-page .levels-filter-body input:not([type="checkbox"]),
  .levels-page .levels-filter-body select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }

  .levels-page .levels-checkbox-field {
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: 0;
  }

  .levels-page .levels-checkbox-field input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px !important;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    margin-top: 1px;
  }

  .levels-page .levels-checkbox-field span {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .levels-page .levels-filter-header,
  .levels-page .levels-filter-actions {
    flex: 0 0 auto;
  }

  .levels-tabs,
  .levels-source-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    overflow-x: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: auto;
  }

  .levels-tabs::-webkit-scrollbar,
  .levels-source-tabs::-webkit-scrollbar {
    display: none;
  }

  .levels-page .box-inner.single-column,
  .level-detail-page .box-inner.single-column,
  .level-form-page .box-inner.single-column {
    padding-left: 10px;
    padding-right: 10px;
  }

  .levels-list-columns,
  .levels-list-row,
  .levels-grid .level-row,
  .level-rates-list .rate-entry,
  .level-detail-page .rate-entry,
  .level-detail-page .level-feature-entry,
  .level-detail-page .level-play-entry,
  .level-detail-page .level-comment-header,
  .level-detail-page .reply-header,
  .level-detail-page .level-profile-header,
  .level-browse-card,
  .levels-card-grid .level-browse-card,
  .level-form-page .level-browse-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    width: 100% !important;
  }

  .levels-list-columns > *,
  .levels-list-row > *,
  .levels-grid .level-row > *,
  .level-rates-list .rate-entry > *,
  .level-detail-page .rate-entry > *,
  .level-detail-page .level-feature-entry > *,
  .level-detail-page .level-play-entry > *,
  .level-detail-page .level-profile-header > *,
  .level-browse-card > *,
  .levels-card-grid .level-browse-card > *,
  .level-form-page .level-browse-card > * {
    grid-column: 1 !important;
    min-width: 0;
    max-width: 100%;
  }

  .levels-list-columns {
    display: none;
  }

  .levels-toolbar,
  .levels-toolbar-row,
  .levels-controls,
  .level-actions,
  .level-title-actions,
  .level-code-actions,
  .level-form-actions,
  .level-comment-actions,
  .reply-actions,
  .comment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .levels-toolbar-row,
  .levels-toolbar-filters,
  .levels-view-controls {
    align-items: center;
    flex-direction: row;
    justify-content: center;
  }

  .levels-toolbar-actions {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .levels-toolbar-actions .levels-button {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
  }

  .levels-toolbar-row > .levels-icon-control > .levels-icon-button {
    width: 44px !important;
    min-width: 44px;
  }

  .levels-view-controls .levels-icon-control > .levels-icon-button {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
  }

  .levels-card-grid {
    grid-template-columns: 1fr;
  }

  .level-thumbnail,
  .level-browse-thumbnail,
  .level-form-thumbnail,
  .level-detail-page .level-thumbnail {
    justify-self: center;
    width: min(180px, 100%) !important;
    max-width: 100% !important;
  }

  .level-detail-page .level-rates-modal-content,
  .level-detail-page .level-feature-modal-content,
  .level-detail-page .help-modal-content,
  .level-detail-page .level-modal-content,
  .level-form-page .help-modal-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .level-detail-page .level-rates-modal-header,
  .level-modal-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .level-detail-page .level-rates-modal-header span,
  .level-modal-header h2 {
    min-width: 0;
    font-size: 21px;
    white-space: normal;
  }

  .level-detail-page .help-body,
  .level-detail-page .level-modal-body,
  .level-form-page .help-body {
    padding: 14px;
  }

  .level-form-page input,
  .level-form-page select,
  .level-form-page textarea,
  .level-detail-page input,
  .level-detail-page select,
  .level-detail-page textarea,
  .levels-page input,
  .levels-page select {
    width: 100%;
  }

  .levels-grid {
    gap: 10px;
  }

  .levels-grid .level-row {
    padding: 11px 12px;
    gap: 0;
    border: 1px solid rgba(95,134,163,0.28);
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }

  .levels-grid .level-row:last-child {
    border-bottom: 1px solid rgba(95,134,163,0.28);
  }

  .levels-grid .level-row:hover {
    background: rgba(255,255,255,0.18);
  }

  .levels-grid .level-row:has(.level-status-featured) {
    border-color: rgba(202,145,17,0.58);
    background: rgba(255,190,32,0.08);
  }

  .levels-grid .level-row:has(.level-status-private) {
    border-color: rgba(120,132,143,0.5);
    background: rgba(120,132,143,0.08);
  }

  .levels-grid .level-row:has(.level-status-deleted) {
    border-color: rgba(190,55,55,0.5);
    background: rgba(190,55,55,0.08);
  }

  .levels-grid .level-row-name {
    align-items: flex-start;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 4px;
    overflow: hidden;
  }

  .levels-grid .level-row-name a,
  .levels-grid .level-row-author {
    text-overflow: clip;
  }

  .levels-grid .level-row-name a {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: -webkit-box !important;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
  }

  .levels-grid .level-row-author {
    margin-bottom: 4px;
    font-size: 14px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .levels-grid .level-row-game,
  .levels-grid .level-row-difficulty,
  .levels-grid .level-row-stat,
  .levels-grid .level-row-stat.has-viewer-action {
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    min-height: 28px;
    padding: 5px 0;
    border-top: 1px solid rgba(95,134,163,0.16);
    border-radius: 0;
    background: transparent;
    color: #183247;
    text-align: right;
    white-space: normal;
  }

  .levels-grid .level-row-game {
    align-items: center;
    min-width: 0;
  }

  .levels-grid .level-row-game .level-row-game-title {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    padding: 1px 0;
  }

  .levels-grid .level-row-stat.has-viewer-action {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin: 0 -6px;
    padding: 5px 6px;
    border-top: 1px solid rgba(95,134,163,0.16);
    border-radius: 4px;
    background: rgba(75, 166, 91, 0.16);
    box-shadow: inset 0 -1px 0 rgba(95,134,163,0.14);
    color: #226733;
  }

  .levels-grid .level-row-stat.has-viewer-action::before {
    color: #226733;
    text-align: left;
  }

  .levels-grid .level-row-stat.has-viewer-action::after {
    margin-left: 0;
  }
}

@media (min-width: 901px) and (max-width: 1280px) and (max-height: 820px) {
  .levels-view-controls .levels-icon-control > .levels-icon-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  .levels-grid:not(.levels-grid-boxes) {
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row {
    width: calc((100% - 14px) / 2) !important;
  }
}

@media (min-width: 641px) and (max-width: 1280px) {
  .levels-list-columns {
    display: none !important;
  }

  .levels-grid:not(.levels-grid-boxes) {
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
    width: calc((100% - 14px) / 2) !important;
    min-height: 0;
    padding: 10px 14px;
    border: 1px solid rgba(95,134,163,0.28);
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }

  .levels-grid:not(.levels-grid-boxes) .level-row > * {
    grid-column: 1 !important;
    min-width: 0;
    max-width: 100%;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-name {
    align-items: flex-start;
    margin-bottom: 4px;
    overflow: hidden;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-name a {
    flex: 1 1 auto;
    display: -webkit-box !important;
    overflow: hidden;
    color: var(--primary-dark);
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    white-space: normal !important;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-author {
    margin-bottom: 4px;
    color: var(--role-color);
    font-size: 14px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-game,
  .levels-grid:not(.levels-grid-boxes) .level-row-difficulty,
  .levels-grid:not(.levels-grid-boxes) .level-row-stat,
  .levels-grid:not(.levels-grid-boxes) .level-row-stat.has-viewer-action {
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    min-height: 28px;
    padding: 5px 0;
    border-top: 1px solid rgba(95,134,163,0.16);
    border-radius: 0;
    background: transparent;
    color: #183247;
    font-size: 12.5px;
    text-align: right;
    white-space: normal;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-game::before,
  .levels-grid:not(.levels-grid-boxes) .level-row-difficulty::before,
  .levels-grid:not(.levels-grid-boxes) .level-row-stat::before {
    color: #465c70;
    font-weight: 700;
    text-align: left;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-game::before {
    content: "Game";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-difficulty::before {
    content: "Difficulty";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat:nth-of-type(3)::before {
    content: "Plays";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat:nth-of-type(4)::before {
    content: "Rates";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat:nth-of-type(5)::before {
    content: "Rating";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat:nth-of-type(6)::before {
    content: "Reviews";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat:nth-of-type(7)::before {
    content: "Favorites";
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-game .level-row-game-title {
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    padding: 1px 0;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat.has-viewer-action {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    margin: 0 -6px;
    padding: 5px 6px;
    border-radius: 4px;
    background: rgba(75, 166, 91, 0.16);
    box-shadow: inset 0 -1px 0 rgba(95,134,163,0.14);
    color: #226733;
  }

  .levels-grid:not(.levels-grid-boxes) .level-row-stat.has-viewer-action::before {
    color: #226733;
  }
}

@media (max-width: 1280px) {
  .levels-page .help-modal,
  .level-detail-page .help-modal,
  .level-detail-page .level-modal,
  .level-detail-page .image-modal,
  .level-form-page .help-modal {
    align-items: center !important;
    justify-content: center !important;
    width: 100dvw !important;
    padding: 10px;
  }

  .levels-page .help-modal-content,
  .level-detail-page .help-modal-content,
  .level-detail-page .level-modal-content,
  .level-form-page .help-modal-content {
    max-height: calc(100dvh - 20px);
  }
}

/* Mobile level detail layout */
@media (max-width: 640px) {
  .level-detail-page .level-profile-header {
    margin-bottom: 6px;
    overflow: visible;
  }

  .level-detail-page .level-detail-title {
    min-height: 0;
    padding-bottom: 8px;
    font-size: 33px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .level-detail-page .level-precore-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0 0 6px !important;
  }

  .level-detail-page .level-back-row {
    justify-self: stretch;
    text-align: left;
  }

  .level-detail-page .level-back-link {
    display: inline-flex;
    align-items: center;
  }

  .level-detail-page .level-tool-strip,
  .level-detail-page .level-title-actions.level-tool-strip.comment-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    width: 100%;
    gap: 13px;
    transform: translateY(4px);
  }

  .level-detail-page .level-tool-strip .nav-item {
    flex: 0 0 auto;
  }

  .level-detail-page .level-core {
    padding-top: 0 !important;
  }

  .level-detail-page .level-column-panel {
    padding: 14px;
  }

  .level-detail-page .level-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .level-detail-page .level-section-heading h2 {
    margin: 0;
    text-align: center;
  }

  .level-detail-page .level-code-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 9px;
  }

  .level-detail-page .level-code-actions button,
  .level-detail-page .level-code-actions a {
    flex: 1 1 132px;
    width: auto;
    min-width: 0;
    max-width: 170px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .level-detail-page .level-left-column .level-under-code-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "author"
      "rate";
    gap: 10px;
    justify-items: center;
    padding-top: 8px !important;
  }

  .level-detail-page .level-left-column .level-author-section,
  .level-detail-page .level-left-column .level-rate-section {
    width: 100%;
    justify-self: stretch;
    text-align: center;
  }

  .level-detail-page .level-author-heading,
  .level-detail-page .level-rate-heading {
    width: 100%;
    justify-content: center;
  }

  .level-detail-page .level-rate-form {
    justify-content: center;
  }

  .level-detail-page .level-left-column .level-info-author,
  .level-detail-page .level-info-author .comment-user,
  .level-detail-page .level-author-card .member-top,
  .level-detail-page .level-author-card .member-info {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .level-detail-page .level-left-column .level-rate-heading h2,
  .level-detail-page .level-author-heading h2 {
    width: 100%;
    text-align: center;
  }

  .level-detail-page .level-rate-picker {
    flex: 0 0 auto;
  }

  .level-detail-page .level-rate-submit {
    flex: 0 0 auto;
    width: auto;
  }

  .level-detail-page .level-info-line {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px;
  }

  .level-detail-page .level-info-line strong {
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .level-detail-page .level-posted-with-visibility {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .level-detail-page .level-posted-date {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .level-detail-page .level-posted-icons {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
  }

  .level-detail-page .level-posted-icons .comment-actions,
  .level-detail-page .level-posted-icons .nav-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .level-detail-page .profile-comment-form {
    padding: 14px;
  }

  .level-detail-page .level-comment-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .level-detail-page .include-rate-option {
    grid-column: 1 / 3;
    justify-self: start;
    margin-right: 0;
  }

  .level-detail-page .level-comment-actions .char-count {
    grid-column: 3 / 5;
    justify-self: end;
    margin-left: 0;
    white-space: nowrap;
  }

  .level-detail-page .level-comment-actions .control-btn {
    width: auto;
    min-width: 0;
  }

  .level-detail-page .level-comment-actions .preview-comment {
    grid-column: 2;
    justify-self: end;
  }

  .level-detail-page .level-comment-actions button[type="submit"] {
    grid-column: 3;
    justify-self: start;
  }

  .level-detail-page .comment-header,
  .level-detail-page .reply-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .level-detail-page .comment-header > .comment-actions,
  .level-detail-page .reply-header > .reply-actions {
    order: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-self: stretch;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
  }

  .level-detail-page .comment-header > .comment-user,
  .level-detail-page .reply-header > .reply-user {
    order: 2;
    min-width: 0;
  }

  .level-detail-page .comment-footer,
  .level-detail-page .reply-footer {
    flex-wrap: wrap;
    align-items: center;
  }

  .level-detail-page .level-rates-modal-content .rates-list {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }

  .level-detail-page .level-rates-modal-content .rates-list .no-comments {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .level-detail-page #rates-list.rates-list .no-comments,
  .level-detail-page #feature-list.rates-list .no-comments {
    width: 100% !important;
    max-width: 100% !important;
  }

  .level-detail-page .rate-entry,
  .level-detail-page .rate-entry.rate-entry-manageable,
  .level-detail-page .rate-entry.rate-entry-legacy,
  .level-detail-page .rate-entry.rate-entry-guest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    gap: 6px 10px;
    align-items: start;
    justify-content: stretch;
    width: 100%;
    padding: 10px 12px;
  }

  .level-detail-page .rate-entry.rate-entry-guest {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .level-detail-page .rate-entry .rate-entry-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
    align-self: start;
    padding-top: 0;
    font-size: 19px;
    line-height: 1;
    text-align: left;
  }

  .level-detail-page .rate-entry-user {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    max-width: none;
    min-width: 0;
    align-self: center;
  }

  .level-detail-page .rate-entry > strong,
  .level-detail-page .rate-entry .level-rate-score {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start;
    align-self: center;
    width: auto;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
  }

  .level-detail-page .rate-entry time {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    width: auto;
    justify-self: start;
    text-align: left;
    white-space: normal;
    margin-top: -1px;
  }

  .level-detail-page .rate-entry .nav-item {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end;
    align-self: start;
    width: auto;
  }

  .level-detail-page .rate-entry .comment-user {
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .level-detail-page .rate-entry .comment-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .level-detail-page .rate-entry .comment-username,
  .level-detail-page .rate-entry .anonymous-rate-name {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.22;
  }

  .level-detail-page .rate-entry-spacer {
    display: none;
  }

  .level-detail-page .thread-reply-form .thread-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    justify-content: stretch;
    width: 100%;
  }

  .level-detail-page .thread-reply-form .thread-char-count {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
  }

  .level-detail-page .thread-reply-form .preview-level-reply {
    grid-column: 3 / 5;
    grid-row: 1;
    justify-self: start;
  }

  .level-detail-page .thread-reply-form .cancel-level-reply {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .level-detail-page .thread-reply-form .send-level-reply {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
  }
}

@media (max-width: 374px) {
  .level-detail-page .level-detail-title {
    font-size: 30px;
  }

  .level-detail-page .level-code-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
  }

  .level-detail-page .level-code-actions button,
  .level-detail-page .level-code-actions a {
    flex: 1 1 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
    gap: 5px;
  }

  .level-detail-page .level-code-actions img {
    width: 14px;
    height: 14px;
  }

  .level-detail-page .level-comment-actions {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  }

  .level-detail-page .level-comment-actions .control-btn {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }
}

@media (min-width: 520px) and (max-width: 1050px) {
  .level-detail-page .level-precore-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: end;
    margin: 0 0 2px !important;
  }

  .level-detail-page .level-back-row {
    justify-self: start;
    align-self: end;
    text-align: left;
  }

  .level-detail-page .level-tool-strip,
  .level-detail-page .level-title-actions.level-tool-strip.comment-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    align-self: end;
    width: auto;
    max-width: 100%;
    gap: 9px;
    margin: 0;
    transform: none;
  }

  .level-detail-page .level-tool-strip .nav-item {
    flex: 0 0 auto;
  }

  .level-detail-page .level-core {
    padding-top: 2px !important;
  }
}

@media (min-width: 980px) and (max-width: 1050px) {
  .level-detail-page .level-core {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(285px, 34%);
    gap: 12px;
    align-items: start;
    padding-top: 2px !important;
  }

  .level-detail-page .level-left-column,
  .level-detail-page .level-side {
    min-width: 0;
    align-self: start !important;
  }

  .level-detail-page .level-left-column .level-column-panel,
  .level-detail-page .level-side .level-column-panel {
    width: 100%;
    height: auto !important;
  }

  .level-detail-page .level-side .level-column-panel {
    padding: 12px;
  }

  .level-detail-page .level-section-heading {
    gap: 8px;
  }

  .level-detail-page .level-code-actions {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .level-detail-page .level-code-actions button,
  .level-detail-page .level-code-actions a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
    gap: 5px;
  }

  .level-detail-page .level-code-actions img {
    width: 14px;
    height: 14px;
  }

  .level-detail-page .level-side .level-thumbnail-section .level-detail-thumb {
    width: 100%;
  }

  .level-detail-page .level-left-column .level-under-code-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "author rate";
    gap: 18px;
    align-items: start;
    padding-top: 10px !important;
  }

  .level-detail-page .level-left-column .level-author-section,
  .level-detail-page .level-left-column .level-rate-section {
    min-width: 0;
    width: 100%;
  }

  .level-detail-page .level-left-column .level-author-section {
    justify-self: stretch;
    text-align: left;
  }

  .level-detail-page .level-left-column .level-rate-section {
    justify-self: end;
    width: max-content;
    text-align: left;
  }

  .level-detail-page .level-left-column .level-author-heading,
  .level-detail-page .level-left-column .level-rate-heading {
    justify-content: flex-start;
    text-align: left;
    line-height: 1.05;
  }

  .level-detail-page .level-left-column .level-author-heading {
    margin-bottom: 6px !important;
  }

  .level-detail-page .level-left-column .level-rate-heading {
    margin-bottom: 8px !important;
  }

  .level-detail-page .level-left-column .level-author-heading h2,
  .level-detail-page .level-left-column .level-rate-heading h2 {
    margin-bottom: 0 !important;
    font-size: 19px;
    line-height: 1.05;
    text-align: left;
  }

  .level-detail-page .level-left-column .level-info-author {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px 22px;
    margin-bottom: -2px;
  }

  .level-detail-page .level-left-column .level-info-author .comment-user {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    gap: 8px;
    padding: 0;
  }

  .level-detail-page .level-left-column .level-info-author .comment-avatar {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .level-detail-page .level-left-column .level-info-author .comment-username {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .level-detail-page .level-rate-form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
    width: auto;
  }

  .level-detail-page .level-rate-picker,
  .level-detail-page .level-rate-control,
  .level-detail-page .level-rate-submit {
    min-height: 36px;
  }

  .level-detail-page .level-rate-control select {
    min-height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .level-detail-page .level-rate-submit {
    padding: 6px 11px;
  }
}

@media (min-width: 980px) and (max-width: 1050px) {
  .level-detail-page .level-core {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 40%);
    gap: 14px;
    align-items: stretch;
  }

  .level-detail-page .level-left-column {
    display: flex;
    align-self: stretch !important;
  }

  .level-detail-page .level-side {
    align-self: start !important;
  }

  .level-detail-page .level-left-column .level-column-panel {
    display: flex;
    flex-direction: column;
    height: 100% !important;
  }

  .level-detail-page .level-left-column .level-code-section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .level-detail-page .level-code {
    flex: 1 1 auto;
    height: auto;
    min-height: 275px;
    max-height: none;
  }

  .level-detail-page .level-side .level-meta-grid {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 8px;
  }

  .level-detail-page .level-side .level-posted-line {
    align-items: center;
  }

  .level-detail-page .level-side .level-posted-line > span {
    min-width: 0;
  }

  .level-detail-page .level-side .level-info-line strong.level-posted-with-visibility {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
  }

  .level-detail-page .level-side .level-posted-date {
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .level-detail-page .level-side .level-posted-icons {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .level-detail-page .level-side .level-posted-icons .nav-item {
    flex: 0 0 auto;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .level-detail-page .level-rates-modal-content .rates-list {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    display: grid;
    gap: 8px;
    padding-right: 6px;
  }

  .level-detail-page .level-rates-modal-content .rates-list .no-comments {
    width: 100% !important;
    max-width: 100% !important;
  }

  .level-detail-page .rate-entry,
  .level-detail-page .rate-entry.rate-entry-manageable,
  .level-detail-page .rate-entry.rate-entry-legacy {
    width: 100%;
    grid-template-columns: 52px minmax(0, 1fr) 52px 148px 24px !important;
    gap: 6px 14px;
    align-items: center;
    justify-content: stretch;
    padding: 8px 10px;
    min-height: 58px;
  }

  .level-detail-page .rate-entry.rate-entry-guest {
    width: 100%;
    grid-template-columns: 52px minmax(0, 1fr) 52px 148px !important;
    gap: 6px 14px;
    align-items: center;
    justify-content: stretch;
    padding: 8px 10px;
    min-height: 58px;
  }

  .level-detail-page .rate-entry .rate-entry-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
    align-self: center;
    width: 100%;
    padding-top: 0;
    text-align: left;
    white-space: nowrap;
  }

  .level-detail-page .rate-entry-user {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: none;
    min-width: 0;
    align-self: center;
  }

  .level-detail-page .rate-entry > strong,
  .level-detail-page .rate-entry .level-rate-score {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: stretch;
    align-self: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
  }

  .level-detail-page .rate-entry time {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 100%;
    min-width: 0;
    justify-self: start;
    align-self: center;
    text-align: left;
    white-space: nowrap;
    margin-top: 0;
  }

  .level-detail-page .rate-entry .nav-item {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end;
    align-self: center;
    width: auto;
  }

  .level-detail-page .rate-entry .comment-user {
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .level-detail-page .rate-entry .comment-username,
  .level-detail-page .rate-entry .anonymous-rate-name {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.22;
  }

  .level-detail-page .rate-entry-spacer {
    display: none;
  }
}

/* Feature history needs its own responsive grid because featured entries can have two dates. */
@media (max-width: 900px) {
  .level-detail-page .help-modal-content.level-feature-history-modal-content {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .level-detail-page .level-feature-history-modal-content .help-body {
    padding-left: 10px;
    padding-right: 10px;
  }

  .level-detail-page .level-feature-history-modal-content .feature-list {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    display: grid;
    gap: 8px;
    padding-right: 6px;
  }

  .level-detail-page #feature-list > .feature-entry,
  .level-detail-page #feature-list > .feature-entry.is-featured,
  .level-detail-page #feature-list > .feature-entry.is-unfeatured {
    display: grid !important;
    width: 100%;
    height: auto !important;
    min-height: 74px !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: 42px minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto auto !important;
    gap: 5px 10px;
    align-items: center;
    justify-content: stretch;
    padding: 9px 10px;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: start;
    width: auto;
    padding-top: 0;
    text-align: left;
    white-space: nowrap;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-user {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
    max-width: 100%;
    align-self: center;
  }

  .level-detail-page #feature-list > .feature-entry > strong {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: end;
    white-space: nowrap;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-created {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-until {
    grid-column: 2 / 4 !important;
    grid-row: 3 !important;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-date {
    justify-self: start;
    width: 100%;
    min-width: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .level-detail-page #feature-list > .feature-entry .comment-user {
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .level-detail-page #feature-list > .feature-entry .comment-avatar {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .level-detail-page #feature-list > .feature-entry .comment-username,
  .level-detail-page #feature-list > .feature-entry .anonymous-rate-name {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 640px) {
  .level-detail-page .help-modal-content.level-feature-history-modal-content {
    width: min(390px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .level-detail-page .level-feature-history-modal-content .help-body {
    padding: 10px;
  }

  .level-detail-page #feature-list > .feature-entry,
  .level-detail-page #feature-list > .feature-entry.is-featured,
  .level-detail-page #feature-list > .feature-entry.is-unfeatured {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-items: start;
    justify-content: stretch;
    row-gap: 11px;
    column-gap: 0;
    height: auto !important;
    max-height: none !important;
    padding: 12px 12px 13px;
    overflow: visible !important;
  }

  .level-detail-page #feature-list > .feature-entry.is-featured {
    min-height: 182px !important;
  }

  .level-detail-page #feature-list > .feature-entry.is-unfeatured {
    min-height: 160px !important;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-number,
  .level-detail-page #feature-list > .feature-entry .rate-entry-user,
  .level-detail-page #feature-list > .feature-entry > strong,
  .level-detail-page #feature-list > .feature-entry .feature-entry-created,
  .level-detail-page #feature-list > .feature-entry .feature-entry-until {
    grid-column: 1 !important;
    justify-self: start;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-number {
    grid-row: 1 !important;
    font-size: 22px;
    line-height: 1.05;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-user {
    grid-row: 2 !important;
    margin-top: 4px;
  }

  .level-detail-page #feature-list > .feature-entry > strong {
    grid-row: 3 !important;
    margin-top: 3px;
    font-size: 17px;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-created {
    grid-row: 4 !important;
    margin-top: 1px;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-until {
    grid-row: 5 !important;
    margin-top: -2px;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-number,
  .level-detail-page #feature-list > .feature-entry .rate-entry-user,
  .level-detail-page #feature-list > .feature-entry > strong,
  .level-detail-page #feature-list > .feature-entry .feature-entry-created,
  .level-detail-page #feature-list > .feature-entry .feature-entry-until {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 1.35;
    text-align: left;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-user,
  .level-detail-page #feature-list > .feature-entry .comment-user {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .level-detail-page #feature-list > .feature-entry .comment-avatar {
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .level-detail-page #feature-list > .feature-entry .comment-username,
  .level-detail-page #feature-list > .feature-entry .anonymous-rate-name {
    line-height: 1.22;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .level-detail-page .help-modal-content.level-feature-history-modal-content {
    width: min(820px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }

  .level-detail-page .level-feature-history-modal-content .help-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .level-detail-page #feature-list > .feature-entry,
  .level-detail-page #feature-list > .feature-entry.is-featured,
  .level-detail-page #feature-list > .feature-entry.is-unfeatured {
    display: grid !important;
    grid-template-columns: 42px minmax(150px, 1fr) 98px minmax(128px, 145px) minmax(128px, 145px) !important;
    grid-template-rows: auto !important;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 58px !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px 10px;
    overflow: visible !important;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: start;
    width: auto;
    font-size: 18px;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
  }

  .level-detail-page #feature-list > .feature-entry .rate-entry-user {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
  }

  .level-detail-page #feature-list > .feature-entry > strong {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: start;
    width: auto;
    margin-top: 0;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-created {
    grid-column: 4 !important;
    grid-row: 1 !important;
    margin-top: 0;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-until {
    grid-column: 5 !important;
    grid-row: 1 !important;
    margin-top: 0;
  }

  .level-detail-page #feature-list > .feature-entry .feature-entry-date {
    align-self: center;
    justify-self: start;
    width: 100%;
    min-width: 0;
    overflow: visible !important;
    color: #617589;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
  }

  .level-detail-page #feature-list > .feature-entry .comment-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    flex-wrap: nowrap;
  }

  .level-detail-page #feature-list > .feature-entry .comment-avatar {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .level-detail-page #feature-list > .feature-entry .comment-username,
  .level-detail-page #feature-list > .feature-entry .anonymous-rate-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    line-height: 1.2;
  }
}

/* True final mobile add/edit level override. */
@media (max-width: 900px) {
  .level-form-page .level-back-link,
  .level-detail-page .level-back-link {
    gap: 6px;
    font-size: 13px;
    line-height: 1.1;
  }

  .level-form-page .level-back-link img,
  .level-detail-page .level-back-link img {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px;
  }

  .level-form-page .level-editor-form,
  .level-form-page .level-form-grid,
  .level-form-page .level-game-select-grid,
  .level-form-page .level-palace-date-grid,
  .level-form-page .level-form-section > .level-field,
  .level-form-page .level-thumbnail-section .level-field,
  .level-form-page .level-description-editor-section > .level-field,
  .level-form-page .level-thumbnail-help,
  .level-form-page .level-game-picker-panel > h2,
  .level-form-page .level-game-picker-panel > .level-game-select-grid,
  .level-form-page .level-game-picker-panel > .level-game-help,
  .level-form-page .level-game-picker-panel > .level-visual-filters-field,
  .level-form-page .level-palace-date-section > h2,
  .level-form-page .level-palace-date-section > .level-palace-date-grid,
  .level-form-page .level-palace-date-section > .level-game-help {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .level-form-page .level-form-grid,
  .level-form-page .level-game-select-grid,
  .level-form-page .level-palace-date-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .level-form-page .level-form-grid {
    grid-template-areas:
      "name"
      "code"
      "difficulty"
      "thumbnail" !important;
  }

  .level-form-page .level-thumbnail-preview-panel {
    display: none !important;
  }

  .level-form-page .level-thumbnail-section {
    justify-items: stretch;
  }

  .level-form-page .level-thumbnail-section .level-thumbnail-preview,
  .level-form-page .level-thumbnail-preview-switcher {
    box-sizing: border-box;
    justify-self: center;
    width: min(100%, 360px) !important;
    max-width: 100% !important;
  }

  .level-form-page .level-thumbnail-section .level-thumbnail-preview {
    aspect-ratio: 4 / 3;
  }

  .level-form-page .level-thumbnail-section .level-thumbnail-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .level-form-page .level-field-help,
  .level-form-page .level-game-help,
  .level-form-page .level-thumbnail-help,
  .level-form-page .level-palace-thumbnail-note {
    overflow-wrap: anywhere;
  }

  .level-form-page .level-difficulty-section,
  .level-form-page .level-difficulty-section .level-difficulty-field,
  .level-form-page .level-difficulty-field,
  .level-form-page .level-difficulty-field > *,
  .level-form-page .level-difficulty-field select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .level-form-page .level-form-actions {
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px;
  }

  .level-form-page .level-form-actions .levels-button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px 18px !important;
    white-space: nowrap;
  }

  .level-form-page #legacy-change-reason {
    min-height: 190px;
    height: 190px;
  }
}

@media (max-width: 480px) {
  .level-form-page .level-form-header h1 {
    font-size: 31px;
  }

  .level-form-page .level-thumbnail-section .level-thumbnail-preview,
  .level-form-page .level-thumbnail-preview-switcher {
    width: 100% !important;
  }

  .level-form-page .level-form-actions .levels-button {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Shared back-link treatment for level-related surfaces. */
.levels-page .levels-missing-profile .level-back-row,
.level-missing-panel .level-back-row,
.level-detail-page .level-missing-panel .level-back-row {
  margin: 0 0 4px;
  line-height: 1.1;
  text-align: left;
}

.level-detail-page .level-precore-row .level-back-row {
  margin: 0;
  line-height: 1;
  text-align: left;
}

.level-detail-page .level-precore-row {
  align-items: end;
}

.level-form-page .level-form-nav {
  margin: 0;
  line-height: 1.1;
}

.level-form-page .level-form-header {
  margin: 0 0 4px;
}

.level-detail-page .level-back-link,
.level-form-page .level-back-link,
.levels-page .levels-missing-profile .level-back-link,
.level-missing-panel .level-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.level-detail-page .level-back-link:hover,
.level-form-page .level-back-link:hover,
.levels-page .levels-missing-profile .level-back-link:hover,
.level-missing-panel .level-back-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.level-detail-page .level-back-link img,
.level-form-page .level-back-link img,
.levels-page .levels-missing-profile .level-back-link img,
.level-missing-panel .level-back-link img {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  margin-left: 0;
  rotate: -90deg;
  opacity: 0.75;
}

/* Keep level loading/not-found shells on the same wide layout. */
.level-detail-page .level-page-loading-wrapper,
.level-detail-page .page-wrapper:has(.level-missing-panel) {
  width: 92%;
  max-width: 1320px;
}

.level-detail-page .level-page-loading-wrapper .box-inner.single-column,
.level-detail-page .box-inner.single-column:has(.level-missing-panel) {
  width: 100%;
  max-width: none;
  padding: 20px 30px 14px;
}