/* Compact workshop controls. Loaded after styles.css; gameplay geometry stays untouched. */
/* Version metadata stays metadata at every viewport, independent of logo type. */
.brand .brand-version {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: max-content;
  min-width: 0;
  position: absolute;
  left: 0;
  bottom: 14px;
  top: auto;
  gap: 5px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 1px 5px;
  border: 1px solid #92b8a850;
  border-radius: 4px;
  background: #14323c99;
  color: #c4dfd5;
  font: 500 9px/1.2 'DM Sans', sans-serif;
  letter-spacing: 0;
}
.brand .brand-version::before {
  content: '';
  position: absolute;
  inset: -13px -4px;
}
.brand .brand-version.release-new::after {
  font: 600 6px/1.2 'DM Sans', sans-serif;
  letter-spacing: .05em;
}
.brand>span:first-child{line-height:1.2;padding-bottom:34px}
.brand-name{display:inline-block}
.brand .brand-version:hover{background:#28534e;border-color:#9dd9c5;color:#e3f6ed}
.version-chevron{font:500 10px/1 sans-serif;color:#a6c8bc}
/* Keep the existing header geometry while only its version badge is visible. */
body.scene-intro .topbar{opacity:1;visibility:visible}
body.scene-intro .topbar>:not(.brand),body.scene-intro .brand>:not(:first-child),body.scene-intro .brand-name,body.scene-intro .beta-label{opacity:0;visibility:hidden;pointer-events:none}
body.scene-intro .brand-version{opacity:1;visibility:visible}
body.scene-intro.scene-loading .art-frame,body.scene-intro.scene-loading #gun,body.scene-intro.scene-loading #gun-viewport{opacity:0;visibility:hidden}
button,a,select,input,[role='button']{-webkit-tap-highlight-color:transparent}
button,button *,[role='button'],[role='button'] *,a.primary-button,a.secondary-button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(pointer:coarse){html,body,dialog{touch-action:pan-x pan-y}}

/* Normal collection view navigates without zoom. Fullscreen is image-only. */
html.artwork-fullscreen,html.artwork-fullscreen body{overflow:hidden!important;overscroll-behavior:none}
.viewer-controls{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0}
.viewer-tool{width:44px;min-width:44px;min-height:44px;font-size:23px;padding:5px}
.viewer-controls #viewer-fullscreen{min-height:44px;margin-left:auto}
.viewer-stage{touch-action:pan-y}
.viewer-gesture{font-size:11px;line-height:1.5;color:#aec7bd;margin:10px 0 0}
.artwork-viewer.viewer-expanded[open],.artwork-viewer:fullscreen{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#071317;overflow:hidden;scrollbar-gutter:auto;display:flex;flex-direction:column}
.artwork-viewer.viewer-expanded>.dialog-header,.artwork-viewer:fullscreen>.dialog-header,.artwork-viewer.viewer-expanded>.viewer-controls,.artwork-viewer:fullscreen>.viewer-controls,.artwork-viewer.viewer-expanded>.viewer-gesture,.artwork-viewer:fullscreen>.viewer-gesture{display:none}
.artwork-viewer.viewer-expanded>.viewer-stage,.artwork-viewer:fullscreen>.viewer-stage{position:relative;flex:1;min-width:0;min-height:0;width:100%;height:100%;border:0;margin:0;padding:0;overflow:hidden;touch-action:none;background:#071317;box-shadow:none}
.artwork-viewer.viewer-expanded .viewer-stage img,.artwork-viewer:fullscreen .viewer-stage img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-select:none;touch-action:none}
.viewer-exit-fullscreen{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:100;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #dbeddf66;border-radius:50%;background:#0b232bd9;color:#fff7e7;font:400 28px/1 sans-serif;box-shadow:0 2px 12px #0006;touch-action:manipulation}
.portrait-dialog{width:min(360px,calc(100vw - 32px));text-align:center;padding:24px;background:#142f39;border:1px solid #99baad88}
.portrait-dialog::backdrop{background:#08191ff5;backdrop-filter:blur(24px)}
.portrait-dialog h2{font-size:22px;margin:12px 0}.portrait-dialog p{font-size:13px;line-height:1.7;color:#cadbd3}.portrait-icon{font-size:36px;color:#9cd8c3}

@supports (appearance: base-select) {
  /* The first button is the browser's inert select face, not a second action.
     Reset it at every viewport so resizing never reveals default button chrome. */
  .compact-select > button.compact-select-face {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
  }
  .compact-select-face > selectedcontent {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .compact-select::picker-icon { flex-shrink: 0; }
}

@media (max-width: 1000px) {
  dialog {
    padding: 18px 16px;
    border-color: #91a49350;
    border-radius: 12px;
    scrollbar-width: thin;
    scrollbar-color: #91aaa166 transparent;
    scrollbar-gutter: stable;
  }

  dialog .dialog-header { align-items: flex-start; gap: 10px; }
  dialog .dialog-header > div { min-width: 0; }
  dialog .dialog-header h2,
  #game-menu .dialog-header h2 {
    margin: 5px 0 8px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.55px;
  }
  dialog .dialog-header .panel-kicker {
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 1.35px;
  }
  dialog .dialog-description { margin: 9px 0; font-size: 12px; line-height: 1.55; }

  /* A 32px visual close control inside the unchanged 44px hit target. */
  dialog .dialog-header > .close-button {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: -3px -3px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }
  dialog .dialog-header > .close-button::before {
    content: '';
    position: absolute;
    inset: 6px;
    z-index: -1;
    border: 1px solid #8da89b4d;
    border-radius: 50%;
    background: #18323d66;
  }

  dialog .secondary-button,
  dialog .text-button,
  dialog .help-actions a,
  dialog .hint-button {
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
  }
  dialog .secondary-button { border-color: #9aa48a50; background: #2c474c; }
  dialog .secondary-button:hover { background: #365650; }
  dialog .primary-button { min-height: 44px; padding: 10px 14px; font-size: 13px; line-height: 1.35; }
  dialog .beta-record-notice {
    min-height: 44px;
    margin: 10px 0;
    padding: 8px 10px;
    border-color: #c5a66e38;
    background: #d5a8670b;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.5;
  }

  .leaderboard-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0 6px; }
  .leaderboard-tabs .secondary-button { width: 100%; min-width: 0; background: #18313b; }
  .leaderboard-tabs .secondary-button.active { color: #b4eee0; border-color: #6ab8a977; background: #18504f; }

  /* Rank and the remaining filters share one stable label/field alignment. */
  #leaderboard-scope-label {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    width: 76px;
    min-height: 44px;
    margin: 0 8px 0 0;
    color: #c1cec7;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }
  #leaderboard-scope { width: calc(100% - 84px); max-width: calc(100% - 84px); margin: 0; }
  .record-filters { grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; row-gap: 8px; margin-top: 8px; }
  .record-filters label { display: flex; align-items: center; min-height: 44px; margin: 0; color: #c1cec7; font-size: 12px; font-weight: 500; line-height: 1.35; }

  dialog select,
  dialog select.language-select,
  dialog .record-filters select,
  dialog .trade-section select,
  .chapter-picker select {
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 9px 12px;
    border: 1px solid #8ba09355;
    border-radius: 7px;
    background-color: #18313b;
    box-shadow: inset 0 1px #ffffff05;
    color: #ece7d7;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .record-filters select { width: 100%; }
  dialog select:disabled { opacity: .55; }
  dialog select:open { border-color: #8ba09355; box-shadow: inset 0 1px #ffffff05; }
  dialog select:focus-visible,
  .chapter-picker select:focus-visible { box-shadow: inset 0 0 0 2px #71bcb3; }

  .menu-actions { gap: 8px; }
  .menu-actions > button { min-height: 44px; }
  .menu-actions > button:not(.primary-button) { padding-inline: 13px; text-align: left; background: #1b3740; border-color: #91a49350; font-size: 13px; }
  .help-actions { gap: 8px; margin: 16px 0; }
  .help-actions > :is(button, a) { flex: 1 1 120px; min-width: 0; white-space: normal; text-align: center; }
  .settings-row { gap: 12px; margin: 18px 0; }
  .settings-row input[type='range'] { min-width: 0; }
  .sound-check { gap: 7px; margin-top: 18px; }
  .sound-check > button { flex: 1 1 95px; white-space: normal; }
  .name-form { margin: 16px 0; }
  .name-form label { font-size: 11px; }
  .name-form > div { gap: 8px; }
  .name-form input,
  .account-form > input { min-height: 44px; padding: 9px 11px; font-size: 16px; }
  .account-actions { gap: 8px; margin-top: 15px; }
  .collection-grid { gap: 10px; margin-top: 16px; }
  .trade-section form { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
  .trade-section form > .secondary-button { grid-column: 1 / -1; width: 100%; margin: 0; }

  @supports not (appearance: base-select) {
    dialog select,
    .chapter-picker select { appearance: auto; }
  }

  /* Native pickers keep 16px text. Customizable HTML pickers share 14px type
     on the closed face and every option, without changing editable inputs. */
  @supports (appearance: base-select) {
    dialog select,
    dialog select.language-select,
    dialog .record-filters select,
    dialog .trade-section select,
    .chapter-picker select,
    dialog select::picker(select),
    .chapter-picker select::picker(select),
    dialog select option,
    .chapter-picker select option {
      font-family: 'DM Sans', sans-serif;
      font-size: 14px !important;
      font-weight: 500;
      line-height: 1.35;
      letter-spacing: 0;
    }
    dialog select,
    .chapter-picker select { gap: 10px; align-items: center; justify-content: space-between; }
    dialog select::picker(select),
    .chapter-picker select::picker(select) {
      padding: 5px;
      border: 1px solid #8ba09355;
      border-radius: 9px;
      background: #18313b;
      box-shadow: 0 12px 30px #0006;
      margin-block-start: 5px;
    }
    dialog select option,
    .chapter-picker select option { min-height: 44px; padding: 10px; border-radius: 5px; white-space: normal; }
    dialog select option:checked,
    .chapter-picker select option:checked { color: #b4eee0; background: #1e5552; }
    dialog select::picker-icon,
    .chapter-picker select::picker-icon { width: 11px; height: 11px; min-width: 11px; margin-inline: auto 0; background-size: 11px 11px; align-self: center; }
  }
}

@media (max-width: 1000px) and (max-height: 450px) {
  dialog { padding-block: 14px; }
  dialog .dialog-header h2 { font-size: 21px; }
}