/* Only the creator screen is new; player preview sizing and gestures stay intact. */
#modeLabel {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--olive);
  margin-top: 5px;
}
.creator-screen {
  display: block;
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
}
.creator-screen h2 {
  font-size: 18px;
  margin: 0 0 18px;
}
.creator-screen input[type="text"],
.creator-screen input[type="file"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.creator-screen input[type="text"] {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.creator-screen .registration-size {
  padding-right: 0;
}
.creator-screen .creator-colors {
  border: 1px solid var(--line);
  margin-top: 18px;
  border-radius: 5px;
}
.creator-colors legend {
  font-size: 12px;
}
.creator-colors .registration-row {
  grid-template-columns: 40px minmax(0, 1fr) 42px;
}
.creator-colors input {
  width: 100%;
}
.draft-notice {
  font-size: 11px;
  padding: 8px 16px;
  margin: 0;
  background: #fff3d4;
  color: #665725;
  flex-shrink: 0;
}
.part-tools .remove-part:not([hidden]) {
  display: inline-flex !important;
}
#uploadStatus {
  min-height: 2em;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
  body[data-mode="creator"] main {
    /* Header is 60px on phones; 40px left the bottom of main off-screen */
    height: calc(100dvh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mode="creator"] .preview-panel {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
  }
  body[data-mode="creator"] .creator-screen {
    height: auto;
    overflow: visible;
    margin-top: 12px;
    padding: 18px 12px;
    flex-shrink: 0;
  }
  body[data-mode="creator"] .layer-panel {
    flex-shrink: 0;
  }
  .creator-screen .registration-row {
    grid-template-columns: 105px minmax(0, 1fr);
  }
  .creator-screen .creator-colors .registration-row {
    grid-template-columns: 32px minmax(0, 1fr) 38px;
  }
  .header-actions {
    gap: 5px;
  }
  .header-actions button {
    font-size: 10px;
    padding: 8px;
  }
  /* A shorter sticky preview leaves more room to scroll the parts and forms below it */
  body[data-page="entry"] .preview-panel:not([data-format="square"]) .stage {
    flex-basis: clamp(220px, 38dvh, 420px);
    min-height: 220px;
  }
  /* main is the only scroller here; the parts grid scrolling on its own (with overscroll contained)
     stopped swipes on the color strip / thumbnails from scrolling the page */
  body[data-page="entry"] .wardrobe .style-grid {
    flex: none;
    overflow: visible;
    overscroll-behavior-y: auto;
  }
  /* Keep ON / OFF radio pairs on one line */
  body[data-page="entry"] .material-dialog .registration-choices {
    flex-wrap: nowrap;
    gap: 6px;
  }
  body[data-page="entry"] .material-dialog .registration-choices label {
    gap: 3px;
    font-size: 10px;
  }
}
body[data-page="entry"] .preview-panel {
  border-radius: 8px;
}
/* The preview panel does not clip (the color popup overflows it), so the square children at its
   top and bottom would paint over its rounded border line; they take the panel's corner radius */
body[data-page] .preview-panel .preview-toolbar {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
body[data-page] .preview-panel :is(#zoomHint, #draftNotice) {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/* No "no file selected" / file name text after the file button (the button keeps its own color) */
body[data-page="entry"] .material-dialog :is(#uploadFile, #uploadBackFile) {
  color: transparent;
}
/* The "9:16 きせかえメーカー" line under the logo is hidden on every page (dress-app.js still updates it) */
body[data-page] header h1 {
  display: none;
}
/* Publish visibility buttons are hidden for now (kept in the page for later) */
body[data-page="entry"] .preview-toolbar .visibility-options {
  display: none;
}
/* Focus shows only the pink ring (no inner border line) */
body[data-page="entry"] .upload-panel :is(select, input[type="text"]):focus,
body[data-page="entry"] .upload-panel :is(select, input[type="text"]):focus-visible {
  outline: 3px solid #f3a6ba;
  outline-offset: 0;
  border-color: transparent;
}
/* Room above and below the fields so the focus ring does not crowd the next row */
body[data-page="entry"] .upload-panel .registration-row :is(select, input[type="text"]) {
  margin: 4px 0 8px;
}
/* Rounded corners for item thumbnails (part tabs: see .part-tabs button) */
body[data-page] .wardrobe .style-options :is(.style-option, .grid-none) {
  border-radius: 4px;
}
@media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
  /* Page-coloured backing behind the sticky preview (out to main's 12px side padding),
     so content scrolled up underneath does not show around its rounded corners */
  body[data-page="entry"] .preview-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2px;
    right: -13px;
    bottom: -1px;
    left: -13px;
    background: #fbfaf5
      radial-gradient(rgba(183, 180, 155, 0.19) 0.7px, transparent 0.7px) 0 0 / 12px 12px fixed;
    pointer-events: none;
  }
}
@media (min-width: 801px) and (max-width: 1050px) and (pointer: fine),
  (min-width: 801px) and (max-width: 1050px) and (pointer: none),
  (min-width: 1025px) and (max-width: 1050px) {
  body[data-mode="creator"] main {
    height: calc(100dvh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  body[data-mode="creator"] .preview-panel {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
  }
  body[data-mode="creator"] .creator-screen {
    height: auto;
    overflow: visible;
    flex-shrink: 0;
  }
  body[data-mode="creator"] .layer-panel {
    flex-shrink: 0;
  }
}

.wardrobe .style-option.empty-slot {
  font-size: 28px;
  font-weight: 400;
  color: var(--muted);
  border-style: dashed;
}
.wardrobe .style-option.empty-slot::after {
  content: none;
}
.wardrobe .style-options .grid-none {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #e3e3e3;
  border-radius: 2px;
  background: #fff;
  color: #222;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
}
.wardrobe .style-options .grid-none[aria-pressed="true"] {
  border: 2px solid #f5a3a8;
  background: #fff5f6;
}

/* Publish visibility toggle in the creator preview header */
.preview-toolbar .visibility-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.preview-toolbar .visibility-options button {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 6px 10px;
  white-space: nowrap;
}
.preview-toolbar .visibility-options button[aria-pressed="true"] {
  background: var(--ink);
  color: #f7facd;
  border-color: var(--ink);
}
body[data-mode="creator"] .preview-toolbar {
  flex-wrap: wrap;
  row-gap: 8px;
}

.creator-side,
.creator-preview-col {
  display: contents;
}
/* Lavender sliders: --fill (set by dress-creator.js) paints the part left of the thumb */
.creator-colors input[type="range"],
:is(.stage, .part-panel) .color-popup input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  min-height: 18px;
  background: transparent;
  cursor: pointer;
}
.creator-colors input[type="range"]::-webkit-slider-runnable-track,
:is(.stage, .part-panel) .color-popup input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #dcbcf6 var(--fill, 50%),
    #e6e6e6 var(--fill, 50%)
  );
}
.creator-colors input[type="range"]::-webkit-slider-thumb,
:is(.stage, .part-panel) .color-popup input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #cfa3f3;
  box-shadow: 0 1px 3px #0000002a;
}
.creator-colors input[type="range"]::-moz-range-track,
:is(.stage, .part-panel) .color-popup input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #e6e6e6;
}
.creator-colors input[type="range"]::-moz-range-progress,
:is(.stage, .part-panel) .color-popup input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: #dcbcf6;
}
.creator-colors input[type="range"]::-moz-range-thumb,
:is(.stage, .part-panel) .color-popup input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #cfa3f3;
  box-shadow: 0 1px 3px #0000002a;
}
/* Color editor: round button in the preview's lower-left corner opening a translucent popup */
.part-tools .color-fab {
  display: inline-grid;
  place-items: center;
  min-height: 0;
  padding: 4px 6px !important;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #e0525f;
  font-size: 22px !important;
  line-height: 1;
  cursor: pointer;
}
.part-tools .color-fab:hover,
.part-tools .color-fab[aria-expanded="true"] {
  background: transparent;
  color: #c93a48;
}
:is(.stage, .part-panel) .color-popup {
  position: absolute;
  left: 60px;
  bottom: 12px;
  z-index: 4;
  box-sizing: border-box;
  width: min(300px, calc(100% - 72px));
  margin: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #f5a3a8;
  border-radius: 10px;
  box-shadow: 0 4px 16px #0000001a;
  backdrop-filter: blur(3px);
  color: #333;
  font-size: 10px;
}
:is(.stage, .part-panel) .color-popup .color-preset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
:is(.stage, .part-panel) .color-popup .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
:is(.stage, .part-panel) .color-popup .swatches button {
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ddd;
}
:is(.stage, .part-panel) .color-popup .color-close {
  margin-left: auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ddd;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}
:is(.stage, .part-panel) .color-popup .color-editor {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
}
:is(.stage, .part-panel) .color-popup .color-wheel {
  width: 100%;
}
:is(.stage, .part-panel) .color-popup .color-sliders label {
  display: block;
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.3;
}
:is(.stage, .part-panel) .color-popup .color-sliders input[type="range"] {
  width: 100%;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #c69bf0;
}
:is(.stage, .part-panel) .color-popup .color-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
:is(.stage, .part-panel) .color-popup .color-actions button {
  width: 90px;
  min-height: 0;
  margin: 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: #e8e8e8;
  color: #666;
  font-size: 10px;
}
:is(.stage, .part-panel) .color-popup .color-actions .color-save {
  border-color: #f5a3a8;
  background: #ffc2c6;
  color: #fff;
}
:is(.stage, .part-panel) .color-popup .color-actions .color-save.is-dirty {
  border-color: #e9838b;
  background: #f5979e;
}
:is(.stage, .part-panel) .color-popup .color-note {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 9px;
  line-height: 1.4;
  color: #777;
}
@media (max-width: 1050px) {
  body[data-mode="creator"] .preview-panel {
    z-index: 4;
  }
  body[data-mode="creator"] .wardrobe {
    flex: none;
  }
  body[data-mode="creator"] .preview-panel,
  body[data-mode="creator"] .stage {
    overflow: visible;
  }
  body[data-mode="creator"] :is(.stage, .part-panel) .color-popup {
    top: calc(100% - 60px);
    bottom: auto;
  }
}
/* Layer structure panel: a card matching the registration panel, third column on desktop */
.layer-panel {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  box-sizing: border-box;
  background: #fffefb;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px;
  min-height: 0;
  margin-top: 20px;
}
@media (min-width: 1051px) {
  body[data-mode="creator"] main {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(220px, 280px);
  }
  .layer-panel:not([hidden]) {
    grid-column: 3;
    grid-row: 1;
    overflow: auto;
  }
  body[data-mode="creator"] .creator-preview-col {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #d5d7c5 transparent;
  }
  /* Fixed preview height: the column minus a standard parts area (tabs 78px + color strip and gaps
     98px + one row of square thumbnails, 6 per row with 6px gaps). Parts with fewer rows leave
     space below; more rows (e.g. many hairstyles) scroll the column. */
  body[data-mode="creator"] .creator-preview-col {
    container-type: inline-size;
  }
  body[data-mode="creator"] .creator-preview-col .preview-panel {
    flex: 0 0 calc(100% - 178px - (100cqw - 36px) / 6);
    min-height: 280px;
  }
  body[data-mode="creator"] .creator-preview-col .preview-panel,
  body[data-mode="creator"] .creator-preview-col .stage {
    overflow: visible;
  }
  body[data-mode="creator"] .creator-preview-col .preview-panel {
    z-index: 5;
  }
  body[data-mode="creator"] .creator-preview-col :is(.stage, .part-panel) .color-popup {
    top: calc(100% - 40px);
    bottom: auto;
  }
  body[data-mode="creator"] .creator-side {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    grid-column: 2 / 4;
    grid-row: 1;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 8px 30px #49442b08;
    color: #333;
    scrollbar-width: thin;
    scrollbar-color: #d5d7c5 transparent;
  }
  body[data-mode="creator"] .creator-side:has(> .creator-screen[hidden]) {
    visibility: hidden;
  }
  body[data-mode="creator"] .creator-side .creator-screen {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #333;
  }
  body[data-mode="creator"] .creator-side .layer-panel {
    flex: 0 0 250px;
    align-self: flex-start;
    overflow: visible;
    padding: 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: none;
  }
  body[data-mode="creator"] .creator-side .creator-screen h2 {
    display: inline;
    background: linear-gradient(transparent 60%, var(--lime) 60%);
  }
  body[data-mode="creator"] .creator-side .creator-screen h2 + details {
    margin-top: 18px;
  }
  body[data-mode="creator"] .creator-side .creator-colors input[type="range"] {
    accent-color: #c69bf0;
  }
  body[data-mode="creator"] .creator-side .layer-row {
    background: #efefef;
    color: #333;
  }
  body[data-mode="creator"] .creator-preview-col .wardrobe {
    flex: 0 0 auto;
    min-height: 0;
  }
  body[data-mode="creator"] .creator-preview-col .wardrobe[hidden] {
    display: block !important;
  }
  body[data-mode="creator"] #materialOpen {
    display: none;
  }
}
/* Part tabs and item thumbnails: shared by PC and smartphone creator and the play page */
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .part-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #f5a3a8 transparent;
  scroll-padding-inline: 8px;
  gap: 8px;
  padding: 2px 2px 10px;
  margin-bottom: 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .part-tabs button {
  flex: 0 0 48px;
  position: relative;
  width: 48px;
  height: 40px;
  min-height: 40px;
  gap: 2px;
  padding: 3px 2px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 8px;
  box-shadow: 0 1px 2px #0000000d;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .part-tabs svg {
  width: 15px;
  height: 15px;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .part-tabs button:hover {
  background: #fafafa;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe)
  .part-tabs
  button[aria-selected="true"] {
  background: #ffeef0;
  border-color: #f5a3a8;
  color: #e0707a;
  box-shadow: none;
}

:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .style-options {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .style-option {
  padding: 4px;
  border: 1px solid #e3e3e3;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe) .style-option.empty-slot {
  border-style: solid;
  color: #cfcfcf;
  font-size: 24px;
  font-weight: 300;
  /* Centre the ＋ in both directions (line-height 1.6 and the padding pushed it up) */
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe)
  .style-option[aria-pressed="true"] {
  border: 2px solid #f5a3a8;
  background: #fff5f6;
  box-shadow: none;
}
:is(body[data-mode="creator"] .creator-preview-col, body[data-page="play"] .wardrobe)
  .style-option[aria-pressed="true"]::before {
  background: #f08f98;
}
.layer-panel h2 {
  font-size: 16px;
  margin: 0 0 8px;
}
.layer-panel .layer-hint {
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--muted);
}
.layer-panel .layer-edge {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0;
}
.layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 14px;
  border-radius: 10px;
  background: #f1f0e8;
  font-size: 12px;
  cursor: grab;
}
.layer-row:active {
  cursor: grabbing;
}
.layer-row.dragging {
  opacity: 0.4;
}
.layer-row .layer-handle {
  color: var(--muted);
  font-size: 16px;
}
/* Preset color circles beside the paint-roller button (creator) */
.part-tools .tool-swatches {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 6px;
  /* Room for the circles' outline, which the scroll box would otherwise clip */
  padding: 3px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.part-tools .tool-swatches[hidden] {
  display: none;
}
.part-tools .tool-swatches button {
  flex: none;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0 !important;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #d9dacc;
  cursor: pointer;
}
/* Creator and play: hide "SELECT / part name" label, white tool strip */
body[data-page] .part-tools .active-part-name {
  display: none;
}
/* Play page on PC (wide parts column): show every part tab (wrap instead of scrolling), smaller thumbnails */
@media (min-width: 801px) and (pointer: fine),
  (min-width: 801px) and (pointer: none),
  (min-width: 1025px) {
  /* Rows of tabs span the full width, lining up with the color strip and thumbnails */
  body[data-page="play"] main .wardrobe .part-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    overflow-x: visible;
  }
  /* PC: 50px part tabs (entry and play) */
  body[data-page] main .wardrobe .part-tabs button {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    min-height: 50px;
  }
  body[data-page="play"] main .wardrobe .part-tabs button {
    width: auto;
  }
  body[data-page] main .wardrobe .part-tabs svg {
    width: 18px;
    height: 18px;
  }
  body[data-page="play"] main .wardrobe .style-options {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  /* PC: no × in the color editor (保存 / リセット close it) */
  body[data-page] .color-popup .color-close {
    display: none;
  }
}
/* Always-visible scroll indicator for the part tabs on phones (dress-ui.js; native bars only appear while scrolling) */
.tabs-scrollbar {
  display: none;
}
@media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
  body[data-page] main .wardrobe .part-tabs {
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  body[data-page] main .wardrobe .part-tabs::-webkit-scrollbar {
    display: none;
  }
  body[data-page] .wardrobe .tabs-scrollbar:not([hidden]) {
    display: block;
    position: relative;
    height: 4px;
    margin: 0 2px 8px;
    border-radius: 2px;
    background: #f5a3a833;
  }
  .tabs-scrollbar > div {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 2px;
    background: #f5a3a8;
  }
  /* Tighter strip so every color circle fits beside リセット */
  body[data-page] main .part-tools .tool-swatches {
    gap: 6px;
  }
  body[data-page] main .part-tools .tool-reset {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}
/* リセット sits at the right end of the color strip (PC and phones), not inside the editor */
body[data-page] .color-popup .color-actions .color-reset {
  display: none;
}
body[data-page] .part-tools .tool-reset {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: auto;
  padding: 8px 16px !important;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #efefef;
  color: #333;
  font-size: 12px !important;
  box-shadow: 0 2px 0 #0000001a;
}
/* Move hint + 位置を元に戻す under the thumbnails: tighter spacing so movable parts fit the fixed preview layout */
body[data-page] .part-panel [id$="MoveHint"] {
  margin: 8px 0 4px;
}
body[data-page] .part-panel [id$="PositionReset"] {
  margin-top: 0;
}
/* Parts without color: the strip would be an empty white box, so hide it */
body[data-page] .part-tools:not(:has(.color-fab:not([hidden]))) {
  display: none;
}
body[data-page] .part-tools {
  background: #fff;
}
/* "名前・素材設定の変更を保存" as a real button: grey when disabled, pink when there is something to save */
body[data-page="entry"] .material-dialog .registration-actions[hidden] {
  display: none;
}
body[data-page="entry"] .material-dialog .registration-actions[hidden] + .registration-actions-secondary {
  margin-top: 24px;
}
body[data-page="entry"] .material-dialog .registration-actions-secondary :is(#saveMaterialColor, #uploadRemove) {
  /* One line inside the 150px column, same height as the buttons above */
  padding: 9px 4px;
  font-size: 10px;
  white-space: nowrap;
  border: 1px solid #e0e0da;
  border-radius: 4px;
  background: #eeeeeb;
  color: #b0b0a8;
  text-decoration: none;
}
/* Second row lines up with 変更を取り消す / 登録する (same 150px columns and 10px gap) */
body[data-page="entry"] .material-dialog .registration-actions-secondary button {
  width: 150px;
  text-align: center;
}
body[data-page="entry"] .material-dialog .registration-actions-secondary #saveMaterialColor:not(:disabled) {
  border-color: #f47f87;
  background: #f47f87;
  color: #fff;
}
/* 追加登録を解除: outlined, so it reads as secondary to the save button */
body[data-page="entry"] .material-dialog .registration-actions-secondary #uploadRemove:not(:disabled) {
  border-color: #f47f87;
  background: #fff;
  color: #e0707a;
}
/* Pull-to-refresh hint (phones) */
.pull-refresh {
  position: fixed;
  top: 66px;
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  padding: 6px 14px;
  border: 1px solid #f5a3a8;
  border-radius: 20px;
  background: #fff;
  color: #c9606a;
  font-size: 11px;
  box-shadow: 0 2px 8px #0000001a;
  pointer-events: none;
}
.pull-refresh[hidden] {
  display: none;
}
/* Register button: darker once there is something to register */
body[data-page="entry"] .material-dialog .registration-actions .primary:not(:disabled) {
  background: #f47f87;
}
/* Registration form: collapsible, closed by default */
.creator-screen h2 .creator-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.creator-screen .creator-toggle-label {
  background: linear-gradient(transparent 60%, var(--lime) 60%);
}
.creator-screen .creator-toggle-icon {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}
.creator-screen .creator-toggle[aria-expanded="true"] .creator-toggle-icon {
  transform: translateY(2px) rotate(-135deg);
}
.creator-screen.is-collapsed h2 {
  margin-bottom: 0;
}
@media (min-width: 1051px) {
  body[data-mode="creator"] .creator-side .creator-screen h2 {
    display: block;
    background: none;
  }
}
/* Play page color editor. Phones: same popup position as the creator (over the bottom of the preview).
   PC: not a popup; dress-ui.js places it under the color strip, above the thumbnails. */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
  body[data-page="play"] .preview-panel {
    z-index: 4;
  }
  body[data-page="play"] .preview-panel,
  body[data-page="play"] .stage {
    overflow: visible;
  }
  body[data-page="play"] .stage .color-popup {
    top: calc(100% - 60px);
    bottom: auto;
  }
}
.part-panel .color-popup {
  position: static;
  width: auto;
  margin: 0 0 10px;
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
}
/* Header ログイン／ログアウト (server mode only, dress-server.js) */
.header-actions :is(#accountButton, #headerNav, #playLink) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .header-actions :is(#accountButton, #headerNav, #playLink) .account-label {
    display: none;
  }
}
/* 公開設定 (server mode only; dress-creator.js moves .visibility-options here) */
body[data-page="entry"] .publish-panel {
  margin-top: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
body[data-page="entry"] .publish-panel h3 {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 14px;
}
body[data-page="entry"] .publish-panel .visibility-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body[data-page="entry"] .publish-panel .visibility-options button {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}
body[data-page="entry"] .publish-panel .visibility-options button[aria-pressed="true"] {
  background: var(--ink);
  color: #f7facd;
  border-color: var(--ink);
}
body[data-page="entry"] .publish-panel .publish-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
body[data-page="entry"] .publish-panel .publish-share {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
body[data-page="entry"] .publish-panel .publish-share[hidden] {
  display: none;
}
body[data-page="entry"] .publish-panel .publish-share input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfaf5;
  color: var(--ink);
}
body[data-page="entry"] .publish-panel .publish-share button {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 11px;
  border: 1px solid #f47f87;
  border-radius: 6px;
  background: #f47f87;
  color: #fff;
  white-space: nowrap;
}
body[data-page="entry"] .publish-panel .publish-profile {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
body[data-page="entry"] .publish-panel .publish-profile label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
body[data-page="entry"] .publish-panel .publish-profile input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
body[data-page="entry"] .publish-panel .publish-profile button {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 11px;
  border: 1px solid #f47f87;
  border-radius: 6px;
  background: #f47f87;
  color: #fff;
}
body[data-page="entry"] .publish-panel .publish-profile button:disabled {
  border-color: var(--line);
  background: #efefef;
  color: var(--muted);
}
body[data-page="entry"] .publish-panel .publish-renew {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 8px;
}
body[data-page="entry"] .publish-panel .publish-renew[hidden] {
  display: none;
}
body[data-page="entry"] .publish-panel .publish-renew button {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid #f47f87;
  border-radius: 6px;
  background: #fff;
  color: #f47f87;
  white-space: nowrap;
}
body[data-page="entry"] .publish-panel .publish-renew button:disabled {
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="entry"] .publish-panel .publish-renew span {
  font-size: 11px;
  color: var(--muted);
}
/* ログイン画面 (server mode only, dress-server.js) */
.login-dialog {
  width: min(380px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffefb;
  color: var(--ink);
  box-shadow: 0 12px 40px #393a3026;
}
.login-dialog::backdrop {
  background: #393a3055;
}
.login-dialog .login-close-form {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.login-dialog .login-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}
.login-dialog h2 {
  margin: 0;
  font-size: 18px;
}
.login-dialog .login-lead {
  margin: 6px 0 16px;
  font-size: 12px;
}
.login-dialog .login-message {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  background: #f6f5ee;
  border-radius: 6px;
  word-break: break-all;
}
.login-dialog .login-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #c9cabc;
  border-radius: 24px;
  background: #fff;
  cursor: pointer;
}
.login-dialog .login-google[hidden],
.login-dialog form[hidden] {
  display: none;
}
.login-dialog .login-email,
.login-dialog .login-dev {
  margin: 18px 0 0;
}
.login-dialog label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.login-dialog .login-row {
  display: flex;
  gap: 6px;
}
.login-dialog .login-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 10px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.login-dialog .login-row button {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #f47f87;
  border-radius: 6px;
  background: #f47f87;
  color: #fff;
  cursor: pointer;
}
.login-dialog .login-row button:disabled {
  opacity: 0.6;
}
.login-dialog .login-hint,
.login-dialog .login-none {
  margin: 6px 0 0;
  font-size: 11px;
}
.login-dialog .login-dev {
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
body[data-page="entry"] .publish-panel .publish-cover {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
body[data-page="entry"] .publish-panel .publish-cover img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: #f1f0e8;
}
body[data-page="entry"] .publish-panel .publish-cover div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
body[data-page="entry"] .publish-panel .publish-cover span {
  font-size: 12px;
  font-weight: 700;
}
body[data-page="entry"] .publish-panel .publish-cover button {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid #f47f87;
  border-radius: 6px;
  background: #fff;
  color: #f47f87;
  white-space: nowrap;
}
body[data-page="entry"] .publish-panel .publish-cover button:disabled {
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="entry"] .publish-panel .publish-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
body[data-page="entry"] .publish-panel .publish-head h3 {
  margin: 0;
}
body[data-page="entry"] .publish-panel .publish-head a {
  font-size: 12px;
  color: #d9566a;
  white-space: nowrap;
}
/* セット切り替え・基本素材・削除 (server mode only, dress-creator.js) */
body[data-page="entry"] .set-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
body[data-page="entry"] .set-switcher label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
body[data-page="entry"] .set-switcher select {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
body[data-page="entry"] .set-switcher button {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #f47f87;
  border-radius: 6px;
  background: #fff;
  color: #f47f87;
  white-space: nowrap;
}
body[data-page="entry"] .set-switcher button:disabled {
  border-color: var(--line);
  color: var(--muted);
}
body[data-page="entry"] .publish-panel .publish-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
body[data-page="entry"] .publish-panel .publish-base span {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 700;
}
body[data-page="entry"] .publish-panel .publish-base button {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}
body[data-page="entry"] .publish-panel .publish-base button[aria-pressed="true"] {
  background: var(--ink);
  color: #f7facd;
  border-color: var(--ink);
}
body[data-page="entry"] .publish-panel .publish-base + .publish-note {
  margin: 6px 0 12px;
}
body[data-page="entry"] .publish-panel .publish-profile + .publish-profile {
  margin-top: -4px;
}
body[data-page="entry"] .publish-panel .publish-delete {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  text-align: right;
}
body[data-page="entry"] .publish-panel .publish-delete button {
  padding: 6px 12px;
  font-size: 11px;
  border: 1px solid #c9cabc;
  border-radius: 6px;
  background: #fff;
  color: #b0414f;
}
.set-dialog .new-set-base {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}
.set-dialog .new-set-base legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}
.set-dialog .new-set-base label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
}
.set-dialog .login-message {
  margin: 12px 0 0;
}
.set-dialog .new-set-actions {
  justify-content: flex-end;
  margin-top: 16px;
}
/* 画像メーカー名・作者名の入力欄の左端をそろえる */
body[data-page="entry"] .publish-panel .publish-profile label {
  min-width: 7em;
}
/* サムネイル（任意）: ファイル選択と「自動に戻す」 */
body[data-page="entry"] .material-dialog .thumb-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body[data-page="entry"] .material-dialog #uploadThumbFile {
  width: 100%;
  min-width: 0;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1.5;
  color: transparent;
}
/* same button as 前面画像・背面画像 (dress-ui.css) */
body[data-page="entry"] .material-dialog #uploadThumbFile::file-selector-button {
  padding: 4px 8px;
  margin-right: 8px;
  border: 1px solid #c7c7c0;
  border-radius: 4px;
  background: #f5f5f2;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
body[data-page="entry"] .material-dialog #uploadThumbFile:not(:disabled)::file-selector-button:hover {
  background: #eeeeeb;
}
body[data-page="entry"] .material-dialog .thumb-reset {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 11px;
  border: 1px solid #c9cabc;
  border-radius: 6px;
  background: #fff;
  white-space: nowrap;
}
/* この基本素材を消す: its own row under 名前・素材設定の変更を保存 / 追加登録を解除, outlined like 追加登録を解除 */
body[data-page="entry"] .material-dialog .hide-base-row {
  margin-top: 10px;
}
body[data-page="entry"] .material-dialog .hide-base-row #hideBaseItem {
  padding: 9px 4px;
  font-size: 10px;
  white-space: nowrap;
  border: 1px solid #f47f87;
  border-radius: 4px;
  background: #fff;
  color: #e0707a;
  text-decoration: none;
}
body[data-page="entry"] .material-dialog .hide-base-row #hideBaseItem:disabled {
  border-color: #e0e0da;
  background: #eeeeeb;
  color: #b0b0a8;
}
/* entry の「遊ぶ画面へ」: ヘッダーのボタンと同じ見た目のリンク */
.header-actions #playLink {
  font-size: 12px;
  font-weight: 700;
  padding: 12px 19px;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #c9cabc;
  min-height: 44px;
  box-sizing: border-box;
  text-decoration: none;
}
/* 公開設定: 下の行に「この画像メーカーを削除」と「公開一覧を見る」 */
body[data-page="entry"] .publish-panel .publish-delete {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
body[data-page="entry"] .publish-panel .publish-delete a {
  font-size: 12px;
  color: #d9566a;
  white-space: nowrap;
}
/* 公開範囲を変えた後のお知らせ（2秒で消える） */
.publish-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -50%);
  padding: 18px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #f7facd;
  background: var(--ink);
  border-radius: 12px;
  box-shadow: 0 12px 40px #393a3040;
  transition: opacity 0.3s;
}
.publish-toast.is-leaving {
  opacity: 0;
}
/* 幅400px以下: アイコンだけのボタン（遊ぶ・ログイン／ログアウト・素材をえらぶ）は小さな丸にそろえ、他のボタンの文字が折れないようにする */
@media (max-width: 400px) {
  .header-actions :is(#accountButton, #headerNav, #playLink) {
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .header-actions :is(#materialOpen, #save) {
    white-space: nowrap;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .header-actions {
    gap: 4px;
  }
  body[data-page] > header {
    gap: 6px;
  }
}
/* Kisepi ロゴ（site-logo.html のデザイン）。スマホでは下の一行を消したコンパクト版 */
.kisepi-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: #3b2f4a;
  font-size: 44px;
}
.kisepi-logo__mark {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.kisepi-logo__text {
  display: flex;
  flex-direction: column;
}
.kisepi-logo__name {
  font-family: "Fredoka", "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.kisepi-logo__sub {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 0.21em;
  letter-spacing: 0.15em;
  color: #6b5d7b;
  padding-left: 0.2em;
  margin-top: 0.3em;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .kisepi-logo {
    font-size: 26px;
  }
  .kisepi-logo__sub {
    display: none;
  }
}
@media (max-width: 400px) {
  .kisepi-logo {
    font-size: 18px;
  }
}
/* ヘッダーの中で縮んだり折り返したりしない */
.kisepi-logo,
.brand-copy:has(.kisepi-logo) {
  flex-shrink: 0;
}
.kisepi-logo__name {
  white-space: nowrap;
}
/* base.css の header span（14px・灰色）がロゴの文字に効かないようにする */
header .kisepi-logo span {
  font-size: inherit;
  color: inherit;
}
header .kisepi-logo .kisepi-logo__name {
  font-size: 1em;
}
header .kisepi-logo .kisepi-logo__sub {
  font-size: 0.21em;
  color: #6b5d7b;
}
/* SP の遊ぶ画面: パーツアイコンから下（アイコン・カラー帯・サムネイル）をまとめて1つの枠でスクロール。
   以前はサムネイル部分だけが小さな枠でスクロールし、アイコンやカラー帯の上からはスクロールできなかった */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1024px) {
  body[data-page="play"] .wardrobe {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  body[data-page="play"] .wardrobe .style-grid {
    flex: none;
    overflow: visible;
    overscroll-behavior-y: auto;
  }
}