/*
 * Growtopia Clothing Planner — Clean Phase 21 foundation
 * Structural consolidation only. Rule order is preserved exactly.
 */

/* ===== Original source: phase15-isolated-fixes.css ===== */
/* ======================================================================
   Phase 15 — isolated interaction and visual repairs

   This layer is deliberately narrow. It does not redefine the Phase 10
   drawer, attached tabs, popup shells, responsive columns, or Phase 14
   identity header.
   ====================================================================== */

body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"])[data-ui-foundation="phase10-locked"] {
  --phase15-action-height: 44px;
}

/* The old selected-tile label is retired. Item names use one temporary
   Growtopia-style status backdrop and never occupy an item box. */
body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .item-name-overlay {
  display: none !important;
}

body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item-name-toast {
  position: fixed;
  z-index: 90;
  top: var(--item-toast-top, 0px);
  left: var(--item-toast-left, 0px);
  width: var(--item-toast-width, 140px);
  box-sizing: border-box;
  padding: 5px 9px 6px;
  overflow: hidden;
  border: 0;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.78);
  color: #ffffff;
  font-size: clamp(12px, 1.2vw, 17px);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 #000000;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  contain: layout paint;
}

body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item-name-toast.is-visible {
  animation: phase15-item-name-toast 3800ms linear both;
}

@keyframes phase15-item-name-toast {
  0% { opacity: 0; transform: translateY(3px); }
  10.5% { opacity: 1; transform: translateY(0); }
  89.5% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

body.reduce-motion:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item-name-toast.is-visible {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* Remove the single inherited white inset highlight without erasing the
   black Growtopia border/shadow language used by the locked foundation. */
body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) :is(
  .flag-picker-button,
  .wrench-customize-button
) {
  box-shadow: 2px 2px 0 #000000 !important;
}

/* The requested wrench-button lettering uses one exact bottom-right pixel. */
body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .wrench-customize-button,
body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .wrench-customize-button * {
  text-shadow: 1px 1px 0 #000000 !important;
}

/* Match the tall, uniform Growtopia inventory action rail while preserving
   the existing Phase 10 rail width at every breakpoint. */
body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-actions {
  align-items: center;
  padding-inline: 6px !important;
}

body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-action {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--phase15-action-height) !important;
  height: var(--phase15-action-height) !important;
  margin-inline: 0 !important;
  padding: 3px 2px !important;
  border: 0 !important;
  background: var(--gt-border) !important;
  box-shadow: 2px 2px 0 #000000 !important;
  font-size: clamp(11px, 1.1vw, 14px) !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

body:is([data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .inventory-action:active:not(:disabled) {
  box-shadow: 1px 1px 0 #000000 !important;
}

/* ===== Original source: phase16-final-validation.css ===== */
/* ======================================================================
   Phase 16 — final validation hotfix

   The Phase 10 UI foundation and the isolated Phase 12–15 portions remain
   intact. This final layer only repairs the one viewport regression found
   during the full-system pass: the Menu window's authored 410px minimum
   height exceeded short mobile-landscape viewports.
   ====================================================================== */

@media (max-height: 520px) {
  body:is([data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .growtool-menu-window {
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    padding-block: 18px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body:is([data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .growtool-menu-window .growtool-popup-title {
    margin-bottom: 12px;
  }

  body:is([data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .growtool-menu-window .growtool-popup-actions {
    gap: 12px !important;
    padding-top: 0 !important;
  }
}

/* ===== Original source: phase17-precision-fixes.css ===== */
/* ======================================================================
   Phase 17 — precision UI fixes

   This layer changes only the controls, inventory fill, title selector,
   reset placement, item-name toast, selection overlay, and popup close
   buttons requested for Phase 17. All unlisted Phase 10–16 systems remain
   untouched.
   ====================================================================== */

body:is([data-planner-phase="17"], [data-planner-phase="18"]) {
  --phase17-button-orange: #FDCC04;
  --phase17-close-size: 54px;
}

/* Change Flag and Select Titles now use the same button language as the
   Skin Colors control: flat light-blue panel, no extra border, one black
   bottom-right shadow, and fully opaque content. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) :is(
  #openSkinColors,
  #openFlagPicker,
  #openTitlePicker
) {
  min-height: 34px !important;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: var(--gt-border) !important;
  color: #ffffff !important;
  box-shadow: 2px 2px 0 #000000 !important;
  opacity: 1 !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) :is(
  #openSkinColors,
  #openFlagPicker,
  #openTitlePicker
):active:not(:disabled) {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .flag-picker-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Important/destructive action button. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .button-orange {
  background: var(--phase17-button-orange) !important;
  color: #ffffff !important;
  box-shadow: 2px 2px 0 #000000 !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase17-reset-row {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase17-reset-row .reset-button {
  min-height: 34px;
  padding: 5px 12px !important;
  font-size: 15px !important;
  text-transform: none !important;
}

/* The inventory content occupies the complete second row of the drawer.
   The old calc() height subtracted the toolbar a second time and left a
   visible blue gap above the bottom border. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-main {
  height: 100% !important;
  padding-bottom: 0 !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-content {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-grid {
  min-height: 100%;
  box-sizing: border-box;
}

/* Scale the selection frame slightly beyond the item-box sprite so it hugs
   the outside edge instead of sitting too far inside the box. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item {
  overflow: visible !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item .item-selection-overlay {
  inset: -4% !important;
  width: 108% !important;
  height: 108% !important;
  padding: 0 !important;
  object-fit: fill !important;
}

/* Shorter name backdrop with compact text padding. The inline width is
   measured by inventoryDrawer.js and this rule keeps the visible padding
   tight around the label. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item-name-toast {
  padding: 4px 7px 5px !important;
  max-width: min(220px, calc(100vw - 16px));
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item-name-toast.is-visible {
  animation: phase17-item-name-toast 4000ms linear both !important;
}

@keyframes phase17-item-name-toast {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  25% {
    opacity: 1;
    transform: translateY(0);
  }
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px);
  }
}

body.reduce-motion:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-item-name-toast.is-visible {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* Simple forced title selector. The screen has no close button, no dimmed
   page backdrop, no descriptive block, and no card backgrounds behind the
   individual title choices. Back is the only normal exit. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) #titlePickerModal {
  background: transparent !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-window {
  width: min(430px, calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100dvh - 24px)) !important;
  padding: 14px !important;
  overflow: visible !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-heading {
  margin: 0 0 8px !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-heading h2 {
  color: #fff36a !important;
  font-size: clamp(22px, 5vw, 30px) !important;
  text-align: left !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-list {
  display: grid !important;
  gap: 2px !important;
  padding: 0 3px 8px 0 !important;
  overflow-y: auto !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option,
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option:hover,
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option:focus-visible,
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option.is-selected {
  min-height: 44px !important;
  gap: 8px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-checkbox {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 38px !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-icon {
  width: 32px !important;
  height: 32px !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option-label {
  font-size: 16px;
  line-height: 1.1 !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-footer {
  justify-content: flex-start !important;
  padding-top: 8px !important;
  border-top: 0 !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-done {
  min-width: 100px !important;
  padding: 5px 12px !important;
  font-size: 18px !important;
  text-transform: none !important;
}

/* One shared close-button component for every closable UI window. The
   center of the button sits directly on the window's top-right border. */
body:is([data-planner-phase="17"], [data-planner-phase="18"]) .modal-backdrop > .gt-window {
  position: relative;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .modal-backdrop:has(> .gt-window > .ui-window-close) {
  box-sizing: border-box;
  padding: calc((var(--phase17-close-size) / 2) + 3px) !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .modal-backdrop:has(> .gt-window > .ui-window-close) > .gt-window {
  box-sizing: border-box !important;
  max-width: calc(100vw - var(--phase17-close-size) - 6px) !important;
  max-height: calc(100dvh - var(--phase17-close-size) - 6px) !important;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .ui-window-close {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  display: grid;
  width: var(--phase17-close-size);
  height: var(--phase17-close-size);
  place-items: center;
  padding: 5px;
  border: 4px solid var(--gt-border);
  border-radius: 2px;
  background: var(--gt-panel);
  box-shadow: 2px 2px 0 #000000;
  transform: translate(50%, -50%);
  cursor: pointer;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .ui-window-close img {
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .ui-window-close:hover {
  filter: brightness(1.08);
}

body:is([data-planner-phase="17"], [data-planner-phase="18"]) .ui-window-close:active {
  box-shadow: 1px 1px 0 #000000;
  transform: translate(calc(50% + 1px), calc(-50% + 1px));
}

@media (max-width: 680px) {
  body:is([data-planner-phase="17"], [data-planner-phase="18"]) {
    --phase17-close-size: 48px;
  }

  body:is([data-planner-phase="17"], [data-planner-phase="18"]) .inventory-action {
    font-size: clamp(16px, 4.3vw, 18px) !important;
    line-height: 1 !important;
  }

  body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-picker-window {
    width: min(360px, calc(100vw - 28px)) !important;
    max-height: min(620px, calc(100dvh - 40px)) !important;
    padding: 11px !important;
  }

  body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option {
    min-height: 42px !important;
  }

  body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-checkbox {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 34px !important;
  }

  body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-icon {
    width: 29px !important;
    height: 29px !important;
  }

  body:is([data-planner-phase="17"], [data-planner-phase="18"]) .phase13-title-option-label {
    font-size: 15px;
  }
}

/* ===== Original source: phase17-hotfix.css ===== */
/* ======================================================================
   Phase 17 Hotfix — final UI component cleanup

   This stylesheet is the final authority for the requested hotfix only:
   Phase 10 skin-color presentation, GrowTool checkboxes, the simplified
   wrench window, close buttons, the title Back button, and fast item-name
   fades. Unlisted planner layout and rendering rules remain untouched.
   ====================================================================== */

body[data-phase17-hotfix="true"] {
  --gt-checkbox-border: #95C9FF;
  --gt-checkbox-shadow: #145EAE;
  --phase17-hotfix-close-size: 52px;
}

/* ----------------------------------------------------------------------
   GrowTool current checkbox component
   ---------------------------------------------------------------------- */
body[data-phase17-hotfix="true"] .growtool-check-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

body[data-phase17-hotfix="true"] .growtool-check-row > input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-phase17-hotfix="true"] .gt-custom-checkbox {
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid var(--gt-checkbox-border) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow:
    2px 2px 0 var(--gt-checkbox-shadow),
    inset 2px 2px 0 var(--gt-checkbox-shadow) !important;
  overflow: visible !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

body[data-phase17-hotfix="true"] .gt-checkbox-check {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
  pointer-events: none !important;
  transition: opacity 80ms ease !important;
  z-index: 4 !important;
}

body[data-phase17-hotfix="true"] :is(
  .gt-checkbox-shadow-copy,
  .gt-checkbox-border-ring,
  .gt-checkbox-fill
) {
  position: absolute !important;
  inset: -3px !important;
  display: block !important;
  width: calc(100% + 6px) !important;
  height: calc(100% + 6px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: 50% 50% !important;
  mask-position: 50% 50% !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
}

body[data-phase17-hotfix="true"] .gt-checkbox-shadow-copy {
  z-index: 0 !important;
  background-color: var(--gt-checkbox-shadow) !important;
  -webkit-mask-image: url('../assets/ui/growtool/check_hsb.png') !important;
  mask-image: url('../assets/ui/growtool/check_hsb.png') !important;
  transform: translate(2px, 2px) scale(1.085) !important;
}

body[data-phase17-hotfix="true"] .gt-checkbox-border-ring {
  z-index: 1 !important;
  background-color: var(--gt-checkbox-border) !important;
  -webkit-mask-image: url('../assets/ui/growtool/check_outline_mask.png') !important;
  mask-image: url('../assets/ui/growtool/check_outline_mask.png') !important;
}

body[data-phase17-hotfix="true"] .gt-checkbox-fill {
  z-index: 2 !important;
  background: url('../assets/ui/growtool/check_hsb.png') 50% 50% / 100% 100% no-repeat !important;
}

body[data-phase17-hotfix="true"] .gt-custom-checkbox.is-checked .gt-checkbox-check,
body[data-phase17-hotfix="true"] [aria-checked="true"] .gt-custom-checkbox .gt-checkbox-check {
  opacity: 1 !important;
}

body[data-phase17-hotfix="true"] .growtool-check-row > input[type="checkbox"]:focus-visible + .gt-custom-checkbox {
  outline: 3px solid #FFDB16 !important;
  outline-offset: 2px !important;
}

body[data-phase17-hotfix="true"] .gt-custom-checkbox.checkbox-pop {
  animation: phase17-hotfix-checkbox-pop 220ms ease-out both;
}

@keyframes phase17-hotfix-checkbox-pop {
  0% { transform: scale(.86); }
  65% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Titles use the same real GrowTool checkbox component. */
body[data-phase17-hotfix="true"] .title-option-checkbox {
  order: 0 !important;
  margin-right: 2px !important;
}

body[data-phase17-hotfix="true"] .phase13-title-picker-done {
  width: auto !important;
  min-width: 82px !important;
  max-width: 96px !important;
  padding-inline: 12px !important;
}

/* ----------------------------------------------------------------------
   Phase 10 skin-color window presentation
   ---------------------------------------------------------------------- */
body[data-phase17-hotfix="true"] .skin-colors-window {
  width: min(1110px, calc(100vw - 24px)) !important;
  max-height: min(760px, calc(100dvh - 24px)) !important;
  padding: 13px !important;
  overflow: visible !important;
}

body[data-phase17-hotfix="true"] .skin-colors-body {
  max-height: calc(min(760px, 100dvh - 24px) - 26px) !important;
  overflow: auto !important;
  min-width: 0 !important;
}

body[data-phase17-hotfix="true"] .skin-colors-window .panel-heading {
  margin-bottom: 12px !important;
}

body[data-phase17-hotfix="true"] .skin-colors-window .panel-heading h2 {
  font-size: 22px !important;
  text-align: left !important;
  text-shadow: none !important;
}

body[data-phase17-hotfix="true"] .skin-swatches-scroll {
  width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

body[data-phase17-hotfix="true"] .skin-swatches-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(92px, 1fr)) !important;
  gap: 18px 24px !important;
  align-items: center !important;
  width: auto !important;
}

body[data-phase17-hotfix="true"] .skin-swatch {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1.52 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 3px solid var(--swatch-solid) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: inset 2px 2px 0 #000000, 2px 2px 0 #000000 !important;
}

body[data-phase17-hotfix="true"] .skin-swatch-panel {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--swatch-panel) !important;
  box-shadow: none !important;
}

body[data-phase17-hotfix="true"] .skin-swatch::after {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  box-shadow: inset 2px 2px 0 #000000 !important;
}

body[data-phase17-hotfix="true"] .skin-swatch.is-selected {
  outline: none !important;
}

body[data-phase17-hotfix="true"] .skin-swatch.is-selected::before {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: -8px !important;
  pointer-events: none !important;
  background: url("../assets/ui/skin_swatch_border.png") center / 100% 100% no-repeat !important;
}

body[data-phase17-hotfix="true"] .skin-custom-row {
  display: grid !important;
  grid-template-columns: 90px 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
}

body[data-phase17-hotfix="true"] .skin-alpha-control {
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 15px !important;
}

/* ----------------------------------------------------------------------
   Simplified Wrench Style window
   ---------------------------------------------------------------------- */
body[data-phase17-hotfix="true"] .wrench-customizer-window {
  width: min(640px, calc(100vw - 42px)) !important;
  max-height: min(86dvh, 720px) !important;
  padding: 10px !important;
  overflow: visible !important;
}

body[data-phase17-hotfix="true"] .wrench-customizer-body {
  max-height: calc(min(86dvh, 720px) - 32px) !important;
  overflow: auto !important;
  min-width: 0 !important;
}

body[data-phase17-hotfix="true"] .wrench-customizer-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}

body[data-phase17-hotfix="true"] .wrench-customizer-heading img {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(1px 1px 0 #000) !important;
}

body[data-phase17-hotfix="true"] .wrench-customizer-heading h2 {
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  line-height: 1 !important;
  text-align: left !important;
  text-shadow: 1px 1px 0 #000 !important;
}

body[data-phase17-hotfix="true"] .wrench-visibility-toggle {
  justify-content: flex-start !important;
  min-height: 38px !important;
  margin: 0 0 12px !important;
  font-size: 16px !important;
  text-align: left !important;
}

body[data-phase17-hotfix="true"] .wrench-option-section {
  margin: 10px 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-phase17-hotfix="true"] .wrench-option-section h3 {
  margin: 0 0 7px !important;
  color: #FFF36A !important;
  font-size: clamp(19px, 3vw, 24px) !important;
  line-height: 1.05 !important;
  text-align: left !important;
  text-shadow: 1px 1px 0 #000 !important;
}

body[data-phase17-hotfix="true"] .wrench-option-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 64px) !important;
  gap: 7px !important;
  max-height: 170px !important;
  padding: 0 2px 4px 0 !important;
  overflow: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-phase17-hotfix="true"] .wrench-option-tile {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
}

body[data-phase17-hotfix="true"] .wrench-selection-info {
  display: grid !important;
  gap: 2px !important;
  min-height: 0 !important;
  margin: 6px 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  text-align: left !important;
}

body[data-phase17-hotfix="true"] .wrench-back-button {
  width: auto !important;
  min-width: 88px !important;
  padding: 5px 12px !important;
  font-size: 18px !important;
}

/* ----------------------------------------------------------------------
   Shared close button
   ---------------------------------------------------------------------- */
body[data-phase17-hotfix="true"] .modal-backdrop:has(> .gt-window > .ui-window-close) {
  padding: calc((var(--phase17-hotfix-close-size) / 2) + 6px) !important;
}

body[data-phase17-hotfix="true"] :is(
  .flag-picker-window,
  .skin-colors-window,
  .wrench-customizer-window,
  .growtool-menu-window,
  .growtool-settings-window
) {
  overflow: visible !important;
}

body[data-phase17-hotfix="true"] .growtool-settings-window {
  display: flex !important;
  flex-direction: column !important;
}

body[data-phase17-hotfix="true"] .growtool-settings-body {
  min-height: 0 !important;
  max-height: calc(min(86dvh, 820px) - 96px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body[data-phase17-hotfix="true"] .ui-window-close {
  top: -2px !important;
  right: -2px !important;
  width: var(--phase17-hotfix-close-size) !important;
  height: var(--phase17-hotfix-close-size) !important;
  padding: 6px !important;
  border: 4px solid var(--gt-border) !important;
  border-radius: 6px !important;
  background: var(--gt-panel) !important;
  opacity: 1 !important;
  box-shadow:
    inset 2px 2px 0 #000000,
    2px 2px 0 #000000 !important;
  transform: translate(50%, -50%) !important;
}

body[data-phase17-hotfix="true"] .ui-window-close img {
  width: 72% !important;
  height: 72% !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body[data-phase17-hotfix="true"] .ui-window-close:active {
  box-shadow:
    inset 1px 1px 0 #000000,
    1px 1px 0 #000000 !important;
  transform: translate(calc(50% + 1px), calc(-50% + 1px)) !important;
}

/* ----------------------------------------------------------------------
   Fast item-name entrance and exit
   ---------------------------------------------------------------------- */
body[data-phase17-hotfix="true"] .inventory-item-name-toast.is-visible {
  animation: phase17-hotfix-item-name 2400ms linear both !important;
}

@keyframes phase17-hotfix-item-name {
  0% { opacity: 0; transform: translateY(2px); }
  8% { opacity: 1; transform: translateY(0); }
  92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1px); }
}

@media (max-width: 680px) {
  body[data-phase17-hotfix="true"] {
    --phase17-hotfix-close-size: 46px;
  }

  body[data-phase17-hotfix="true"] .skin-colors-window {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding: 10px !important;
  }

  body[data-phase17-hotfix="true"] .skin-colors-body {
    max-height: calc(100dvh - 36px) !important;
  }

  body[data-phase17-hotfix="true"] .skin-colors-window .panel-heading h2 {
    font-size: 18px !important;
  }

  body[data-phase17-hotfix="true"] .skin-swatches-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 5px 10px !important;
    overscroll-behavior-x: contain !important;
  }

  body[data-phase17-hotfix="true"] .skin-swatches-grid {
    display: flex !important;
    width: max-content !important;
    gap: 13px !important;
  }

  body[data-phase17-hotfix="true"] .skin-swatch {
    width: 112px !important;
    min-width: 112px !important;
    flex: 0 0 112px !important;
  }

  body[data-phase17-hotfix="true"] .skin-custom-row {
    grid-template-columns: 70px 40px minmax(0, 1fr) !important;
    margin-top: 13px !important;
  }

  body[data-phase17-hotfix="true"] .skin-alpha-control {
    grid-template-columns: 70px minmax(0, 1fr) 34px !important;
  }

  body[data-phase17-hotfix="true"] .wrench-customizer-window {
    width: min(390px, calc(100vw - 28px)) !important;
    padding: 8px !important;
  }

  body[data-phase17-hotfix="true"] .wrench-customizer-body {
    max-height: calc(100dvh - 54px) !important;
  }

  body[data-phase17-hotfix="true"] .wrench-option-grid {
    grid-template-columns: repeat(auto-fill, 58px) !important;
    max-height: 154px !important;
    gap: 6px !important;
  }

  body[data-phase17-hotfix="true"] .wrench-option-tile {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
  }
}

/* ===== Original source: phase18-item-info-and-ui.css ===== */
/* ======================================================================
   Phase 18 — item information and final UI behavior corrections

   This layer is intentionally scoped to the Phase 18 body marker. It
   leaves the locked Phase 10 drawer foundation and all approved Phase
   11–17 features intact while replacing only the behaviors requested for
   Phase 18.
   ====================================================================== */

body[data-phase18="true"] {
  --phase18-modal-dimmer: rgba(0, 0, 0, 0.5);
  --phase18-description-color: #FCE6BA;
  --phase18-property-color: #ADF4FF;
}

/* Every popup darkens the page by exactly 50%, including forced windows
   such as Select Title and the floating Menu and Settings windows. */
body[data-phase18="true"] .modal-backdrop,
body[data-phase18="true"] .growtool-modal-backdrop,
body[data-phase18="true"] #titlePickerModal {
  background: var(--phase18-modal-dimmer) !important;
}

/* Text inside UI windows is deliberately flat. The Growtopia borders,
   panels, icons, selection frames, and close controls keep their own
   graphic shadows; only text shadows are removed. */
body[data-phase18="true"] .gt-window,
body[data-phase18="true"] .gt-window *,
body[data-phase18="true"] .filter-box,
body[data-phase18="true"] .filter-box *,
body[data-phase18="true"] .filter-menu,
body[data-phase18="true"] .filter-menu * {
  text-shadow: none !important;
}

/* The toolbar and its dropdown always paint above the Player face grid,
   including the selected-face checkmark. */
body[data-phase18="true"] .inventory-toolbar {
  position: relative !important;
  z-index: 80 !important;
}

body[data-phase18="true"] .filter-control {
  position: relative;
  z-index: 90 !important;
}

body[data-phase18="true"] .filter-menu {
  position: absolute !important;
  z-index: 100 !important;
}

body[data-phase18="true"] .expression-mini-inventory,
body[data-phase18="true"] .expression-item,
body[data-phase18="true"] .expression-equipped-check {
  z-index: 1 !important;
}

/* Face and wrench names now use the shared temporary item-name toast only.
   Old hover/selected labels must never appear over their tiles. */
body[data-phase18="true"] .expression-name-overlay,
body[data-phase18="true"] .wrench-option-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* One-second entrance, two-second hold, one-second exit. The JS removal
   timer is synchronized to the full four-second animation. */
body[data-phase18="true"] .inventory-item-name-toast.is-visible {
  animation: phase18-name-toast 4000ms linear both !important;
}

body[data-phase18="true"] .inventory-item-name-toast {
  z-index: 140 !important;
}

@keyframes phase18-name-toast {
  0% { opacity: 0; transform: translateY(3px); }
  25% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

body.reduce-motion[data-phase18="true"] .inventory-item-name-toast.is-visible {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Add a clear vertical gap between the selected wrench description and
   the selected decoration description. */
body[data-phase18="true"] .wrench-selection-info {
  display: grid !important;
  gap: 9px !important;
}

body[data-phase18="true"] .wrench-selection-line {
  display: block !important;
  margin: 0 !important;
}

/* Skin swatches intentionally fall through to the Phase 10 definitions in
   base.css. Later Phase 18 selection-frame changes were removed so the
   original border, inner shadow, alpha fill, legacy marker, and white
   selected outline remain authoritative. */

/* Preserve the right-side shadow of the skin HEX input instead of clipping
   it at the scrolling body's edge. */
body[data-phase18="true"] .skin-colors-body,
body[data-phase18="true"] .skin-custom-row {
  overflow-x: visible !important;
}

body[data-phase18="true"] .skin-custom-row {
  box-sizing: border-box !important;
  padding-right: 7px !important;
}

body[data-phase18="true"] #skinHex {
  box-sizing: border-box !important;
  width: calc(100% - 3px) !important;
  max-width: calc(100% - 3px) !important;
}

/* Item information popup. */
body[data-phase18="true"] .item-info-window {
  width: min(560px, calc(100vw - 34px)) !important;
  max-height: min(680px, calc(100dvh - 34px)) !important;
  padding: 16px !important;
  overflow: visible !important;
}

body[data-phase18="true"] .item-info-body {
  display: grid;
  gap: 7px;
  max-height: calc(min(680px, 100dvh - 20px) - 20px);
  overflow: auto;
  min-width: 0;
  padding: 1px 3px 2px 1px;
}

body[data-phase18="true"] .item-info-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

body[data-phase18="true"] .item-info-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

body[data-phase18="true"] .item-info-heading h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #FFFFFF;
  font-size: clamp(23px, 5vw, 34px);
  line-height: 1.05;
  text-align: left;
}

body[data-phase18="true"] .item-info-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body[data-phase18="true"] .item-info-planner-button {
  justify-self: start;
  align-self: end;
  margin-top: 2px;
  min-width: 84px;
}

body[data-phase18="true"] .item-info-description {
  margin: 0;
  color: var(--phase18-description-color);
  font-size: 19px;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
}

body[data-phase18="true"] .item-info-rarity {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  min-height: 1.3em;
}

body[data-phase18="true"] .item-info-properties {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

body[data-phase18="true"] .item-info-property {
  margin: 0;
  color: var(--phase18-property-color);
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

body[data-phase18="true"] .item-info-format-run {
  color: var(--item-info-run-color, inherit);
}

@media (max-width: 680px) {
  body[data-phase18="true"] .item-info-window {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 12px !important;
  }

  body[data-phase18="true"] .item-info-body {
    max-height: calc(100dvh - 36px);
    gap: 6px;
  }

  body[data-phase18="true"] .item-info-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  body[data-phase18="true"] .item-info-description {
    font-size: 17px;
  }

  body[data-phase18="true"] .item-info-property {
    font-size: 16px;
  }

  body[data-phase18="true"] .item-info-rarity {
    font-size: 16px;
  }
}

/* ===== Original source: phase19-precision.css ===== */
/* ======================================================================
   Phase 19 — precision behavior and UI hardening

   Final-authority overrides for the explicitly requested changes only.
   The Phase 10 drawer mechanics, renderer, item data, and window foundation
   remain intact. No legacy title-checkbox image system is used.
   ====================================================================== */

body[data-phase19="true"] {
  --phase19-label-size: clamp(16px, 2vw, 20px);
  --phase19-label-line: 1.1;
  --phase19-close-size: 38px;
  --phase19-title-gold: #FFFCC5; /* `$ */
  --phase19-wrench-copy: #FCE6BA; /* `o */
  --phase19-checkbox-border: #95C9FF;
  --phase19-checkbox-shadow: #145EAE;
}

/* ----------------------------------------------------------------------
   Viewport-bound inventory assembly. Tabs remain attached behind the left
   border, but the drawer now anchors from a reserved top-left edge and
   consumes only the available viewport width.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] .inventory-dock {
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  transform-origin: top left !important;
}

@media (min-width: 901px) {
  body[data-phase19="true"] .inventory-dock {
    left: 56px !important;
    transform: translate(0, var(--drawer-offset-y, 0px)) !important;
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  body[data-phase19="true"] .inventory-dock {
    left: 48px !important;
    transform: translate(0, var(--drawer-offset-y, 0px)) !important;
  }
}

@media (min-width: 681px) {

  body[data-phase19="true"] .inventory-handle,
  body[data-phase19="true"] .inventory-handle:active,
  body[data-phase19="true"] .inventory-handle.is-dragging {
    width: 180px !important;
  }

  body[data-phase19="true"] .inventory-action {
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 680px) {
  body[data-phase19="true"] {
    --phase19-close-size: 34px;
  }

  body[data-phase19="true"] .inventory-dock {
    left: calc(var(--phase10-tab-width, 48px) - 4px) !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    transform: translate(0, var(--drawer-offset-y, 0px)) !important;
  }

  body[data-phase19="true"] .inventory-handle,
  body[data-phase19="true"] .inventory-handle:active,
  body[data-phase19="true"] .inventory-handle.is-dragging {
    width: 68px !important;
  }
}

/* Slightly larger selection frame, deliberately outside the item box. */
body[data-phase19="true"] .inventory-item .item-selection-overlay {
  inset: -6% !important;
  width: 112% !important;
  height: 112% !important;
}

/* ----------------------------------------------------------------------
   Player customization placement and label rhythm.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] .phase19-title-flag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

body[data-phase19="true"] .phase19-title-flag-row > .customization-field {
  min-width: 0;
}

body[data-phase19="true"] :is(
  .customization-field > span,
  .control-group > label,
  .rgb-control > legend,
  .skin-custom-row > label,
  .skin-alpha-control > label,
  .wrench-option-section > h3
) {
  font-size: var(--phase19-label-size) !important;
  line-height: var(--phase19-label-line) !important;
  min-height: calc(var(--phase19-label-size) * var(--phase19-label-line)) !important;
}

@media (max-width: 380px) {
  body[data-phase19="true"] .phase19-title-flag-row {
    gap: 6px;
  }
}

/* ----------------------------------------------------------------------
   Title picker: no synthetic None row, exact title colors, compact Back.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] #titlePickerTitle {
  color: var(--phase19-title-gold) !important;
  text-shadow: none !important;
}

body[data-phase19="true"] .phase13-title-option-label {
  color: var(--phase19-title-label-color, #FFFFFF) !important;
}

body[data-phase19="true"] .phase13-title-picker-done {
  width: auto !important;
  min-width: 72px !important;
  max-width: 84px !important;
  padding: 4px 10px !important;
}

/* Current GrowTool all-in-one checkbox. The outline mask is the same color
   and visual thickness as the checkbox border; the separate shadow copy
   reproduces the same 2px inner/outer shadow language. */
body[data-phase19="true"] .gt-custom-checkbox {
  --gt-checkbox-border: var(--phase19-checkbox-border) !important;
  --gt-checkbox-shadow: var(--phase19-checkbox-shadow) !important;
  border: 3px solid var(--phase19-checkbox-border) !important;
  box-shadow:
    inset 2px 2px 0 var(--phase19-checkbox-shadow),
    2px 2px 0 var(--phase19-checkbox-shadow) !important;
}

body[data-phase19="true"] .gt-checkbox-border-ring {
  background-color: var(--phase19-checkbox-border) !important;
  transform: none !important;
}

body[data-phase19="true"] .gt-checkbox-shadow-copy {
  background-color: var(--phase19-checkbox-shadow) !important;
  transform: translate(2px, 2px) scale(1.085) !important;
}

/* ----------------------------------------------------------------------
   Wrench window title/section language. All text inside UI windows remains
   flat; only the requested Growtopia colors are applied.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] #wrenchCustomizerTitle {
  color: var(--phase19-title-gold) !important;
  text-shadow: none !important;
}

body[data-phase19="true"] :is(#wrenchStyleHeading, #wrenchDecorationHeading) {
  color: var(--phase19-wrench-copy) !important;
  text-shadow: none !important;
}

/* ----------------------------------------------------------------------
   Item-name toast: 0.5s in, 2s hold, 0.5s out. JS removes it at 3s.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] .inventory-item-name-toast.is-visible {
  animation: phase19-item-name-toast 3000ms linear both !important;
}

@keyframes phase19-item-name-toast {
  0% { opacity: 0; transform: translateY(2px); }
  16.6667% { opacity: 1; transform: translateY(0); }
  83.3333% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1px); }
}

body.reduce-motion[data-phase19="true"] .inventory-item-name-toast.is-visible {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ----------------------------------------------------------------------
   Identity safety and flag rendering. Name colors never leak a white glow
   onto the pixel flag.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] #playerFlagPreview {
  animation: none !important;
  filter: drop-shadow(1px 1px 0 #000000) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body[data-phase19="true"] .phase14-player-identity .player-name-label.title-level125 {
  color: #ADF4FF !important;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body[data-phase19="true"] .phase14-player-identity .player-name-label.title-doctor {
  color: #FF271D !important;
}

/* ----------------------------------------------------------------------
   Button text shadows. Normal controls outside UI windows use a strict 1px
   bottom-right shadow. UI-window text is deliberately excluded and flat.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] button,
body[data-phase19="true"] button * {
  text-shadow: 1px 1px 0 #000000 !important;
}

body[data-phase19="true"] .gt-window button,
body[data-phase19="true"] .gt-window button *,
body[data-phase19="true"] .gt-window :is(h1, h2, h3, p, label, legend, output, span) {
  text-shadow: none !important;
}

/* ----------------------------------------------------------------------
   Smaller shared close button, centered over the top-right border.
   ---------------------------------------------------------------------- */
body[data-phase19="true"] {
  --phase17-close-size: var(--phase19-close-size) !important;
  --phase17-hotfix-close-size: var(--phase19-close-size) !important;
}

body[data-phase19="true"] .modal-backdrop:has(> .gt-window > .ui-window-close) {
  padding: calc((var(--phase19-close-size) / 2) + 5px) !important;
}

body[data-phase19="true"] .ui-window-close {
  top: 0 !important;
  right: 0 !important;
  width: var(--phase19-close-size) !important;
  height: var(--phase19-close-size) !important;
  padding: 5px !important;
  border: 3px solid var(--gt-border) !important;
  border-radius: 6px !important;
  background: var(--gt-panel) !important;
  box-shadow:
    inset 2px 2px 0 #000000,
    2px 2px 0 #000000 !important;
  transform: translate(50%, -50%) !important;
}

body[data-phase19="true"] .ui-window-close img {
  width: 70% !important;
  height: 70% !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body[data-phase19="true"] .ui-window-close:active {
  box-shadow:
    inset 1px 1px 0 #000000,
    1px 1px 0 #000000 !important;
  transform: translate(calc(50% + 1px), calc(-50% + 1px)) !important;
}

/* ===== Original source: phase20-title-and-control-polish.css ===== */
/* ======================================================================
   Phase 20 — title effects, handle states, dropdowns, and UI text rhythm

   This file is deliberately scoped to data-phase20 so the locked Phase 10
   foundation and the approved Phase 11–19 portions remain intact.
   ====================================================================== */

body[data-phase20="true"] {
  --phase20-label-size: 18px;
  --phase20-description-size: 14px;
  --phase20-button-shadow: 1px 1px 0 #000000;
  --phase20-dropdown-arrow-size: 18px;
}

/* ----------------------------------------------------------------------
   Unified UI system for Phase 20

   To clean up inconsistencies across the various Phase 10–19 layers, this
   section establishes a single set of sizing rules for labels, icons,
   descriptions, buttons and dropdown arrows. These variables are used below
   to override earlier phase-specific declarations. If you need to adjust
   the overall feel of the UI, modify these values in one place rather than
   sprinkling magic numbers throughout the stylesheets.
   ---------------------------------------------------------------------- */

body[data-phase20="true"] {
  /* Maintain the Phase 20 label size of 18px as the unified baseline. */
  --ui-label-size: 18px;
  --ui-description-size: 14px;
  --ui-icon-size: 24px;
  --ui-button-height: 38px;
  --ui-button-font-size: 16px;
  --ui-dropdown-arrow-size: 18px;
}

/* Consistent label typography inside any UI window. This rule overrides the
   varying sizes introduced in earlier phases and applies a single font size
   to headings, labels and legends. */
body[data-phase20="true"] .gt-window :is(
  h3,
  label,
  legend,
  .customization-field > span,
  .control-group > label,
  .rgb-control > legend,
  .skin-custom-row > label,
  .skin-alpha-control > label,
  .growtool-check-row > span:last-child,
  .phase13-title-option-label,
  .wrench-option-section > h3,
  .item-info-property-label
) {
  font-size: var(--ui-label-size) !important;
  line-height: 1.2 !important;
}

/* Unified description copy size. Short helper text, descriptions and status
   messages all share the same baseline instead of alternating between
   multiple presets. */
body[data-phase20="true"] .gt-window :is(
  p,
  .description,
  .ui-description,
  .item-info-description,
  .wrench-selection-info,
  .wrench-selection-line,
  .planner-transfer-status
) {
  font-size: var(--ui-description-size) !important;
  line-height: 1.3 !important;
}

/* Unified icon sizing for label icons and title badges. Larger icons help
   balance the text size and checkbox visuals. */
body[data-phase20="true"] .gt-window .phase13-title-icon,
body[data-phase20="true"] .gt-window .label-icon,
body[data-phase20="true"] .gt-window label > img:not(.gt-dropdown-arrow):not(.search-icon-image) {
  width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  object-fit: contain;
  flex: 0 0 var(--ui-icon-size);
}

/* Unified button sizing. This applies to GrowTool buttons, customisation
   controls, dropdown toggles and action-rail buttons. The width remains
   flexible to accommodate labels of different lengths, while the height
   and font size are consistent. */
body[data-phase20="true"] .gt-button,
body[data-phase20="true"] .gt-dropdown-button,
body[data-phase20="true"] .filter-box,
body[data-phase20="true"] .phase13-title-picker-button,
body[data-phase20="true"] .skin-colors-button,
body[data-phase20="true"] .wrench-customize-button,
body[data-phase20="true"] .flag-picker-button,
body[data-phase20="true"] .inventory-action {
  height: var(--ui-button-height) !important;
  min-height: var(--ui-button-height) !important;
  max-height: var(--ui-button-height) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: var(--ui-button-font-size) !important;
  line-height: 1.1 !important;
}

/* Unified dropdown arrow sizing. This keeps the arrow artwork proportional
   to the new unified button and label sizes. */
body[data-phase20="true"] .gt-dropdown-arrow {
  width: var(--ui-dropdown-arrow-size) !important;
  height: var(--ui-dropdown-arrow-size) !important;
}

/* When the inventory action rail shrinks on very narrow devices, reduce
   the font size slightly but retain the unified height to maintain rhythm. */
@media (max-width: 680px) {
  body[data-phase20="true"] .inventory-action {
    font-size: calc(var(--ui-button-font-size) - 2px) !important;
  }
}

/* On narrow screens, the title/flag row uses a single column to avoid
   truncated labels. This keeps the Player Customization panel visually
   coherent without sacrificing functionality. */
@media (max-width: 560px) {
  body[data-phase20="true"] .phase19-title-flag-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ----------------------------------------------------------------------
   Consistent UI-window typography.
   ---------------------------------------------------------------------- */
body[data-phase20="true"] .gt-window :is(
  h3,
  label,
  legend,
  .customization-field > span,
  .control-group > label,
  .rgb-control > legend,
  .skin-custom-row > label,
  .skin-alpha-control > label,
  .growtool-check-row > span:last-child,
  .phase13-title-option-label,
  .wrench-option-section > h3,
  .item-info-property-label
) {
  font-size: var(--phase20-label-size) !important;
  line-height: 1.15 !important;
}

body[data-phase20="true"] .gt-window :is(
  p,
  .description,
  .ui-description,
  .item-info-description,
  .wrench-selection-info,
  .wrench-selection-line,
  .planner-transfer-status
) {
  font-size: var(--phase20-description-size) !important;
  line-height: 1.3 !important;
}

body[data-phase20="true"] .gt-window .phase13-title-icon,
body[data-phase20="true"] .gt-window .label-icon,
body[data-phase20="true"] .gt-window label > img:not(.gt-dropdown-arrow):not(.search-icon-image) {
  width: var(--phase20-label-size) !important;
  height: var(--phase20-label-size) !important;
  object-fit: contain;
  flex: 0 0 var(--phase20-label-size);
}

/* ----------------------------------------------------------------------
   Restore title effects. Phase 19 deliberately flattened these; Phase 20
   restores the original Level 125 pulse and title-specific name effects.
   Party Animal affects the GrowID only and has no icon.
   ---------------------------------------------------------------------- */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125 :is(.phase14-base-run, .phase20-title-effect-run) {
  display: inline-block;
  animation: phase20-level125-pulse 2.4s ease-in-out infinite !important;
}

@property --phase20-legendary-name-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #A7E76A;
}

@property --phase20-legendary-shadow-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #2C7C2B;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary:not(.title-grow4good):not(.title-party-animal) {
  --phase20-legendary-name-color: #A7E76A;
  --phase20-legendary-shadow-color: #2C7C2B;
  color: var(--phase20-legendary-name-color) !important;
  text-shadow: 1px 1px 0 var(--phase20-legendary-shadow-color) !important;
  animation: phase20-legendary-color-cycle 12.8s ease-in-out infinite !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good .phase20-title-effect-run {
  display: inline-block;
  animation: phase20-grow4good-shift 2.2s linear infinite;
  animation-delay: calc(var(--phase20-run-index, 0) * -80ms);
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-party-animal .phase20-title-effect-run {
  display: inline-block;
  animation: phase20-party-animal-pop 1.35s ease-in-out infinite;
  animation-delay: calc(var(--phase20-run-index, 0) * -55ms);
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-party-animal .phase20-title-effect-run {
  animation:
    phase20-level125-pulse 2.4s ease-in-out infinite,
    phase20-party-animal-pop 1.35s ease-in-out infinite !important;
  animation-delay: 0s, calc(var(--phase20-run-index, 0) * -55ms) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-grow4good .phase20-title-effect-run {
  animation:
    phase20-level125-pulse 2.4s ease-in-out infinite,
    phase20-grow4good-shift 2.2s linear infinite !important;
  animation-delay: 0s, calc(var(--phase20-run-index, 0) * -80ms) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good.title-party-animal .phase20-title-effect-run {
  animation:
    phase20-grow4good-shift 2.2s linear infinite,
    phase20-party-animal-pop 1.35s ease-in-out infinite !important;
  animation-delay:
    calc(var(--phase20-run-index, 0) * -80ms),
    calc(var(--phase20-run-index, 0) * -55ms) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-grow4good.title-party-animal .phase20-title-effect-run {
  animation:
    phase20-level125-pulse 2.4s ease-in-out infinite,
    phase20-grow4good-shift 2.2s linear infinite,
    phase20-party-animal-pop 1.35s ease-in-out infinite !important;
  animation-delay:
    0s,
    calc(var(--phase20-run-index, 0) * -80ms),
    calc(var(--phase20-run-index, 0) * -55ms) !important;
}

@keyframes phase20-level125-pulse {
  0%, 100% {
    opacity: .75;
    filter: brightness(1);
  }
  50% {
    opacity: .75;
    filter: brightness(1.18);
  }
}

@keyframes phase20-legendary-color-cycle {
  0% {
    --phase20-legendary-name-color: #A7E76A;
    --phase20-legendary-shadow-color: #2C7C2B;
    --phase20-legendary-bias-color: #A7E76A;
  }
  8% {
    --phase20-legendary-name-color: #D2F59A;
    --phase20-legendary-shadow-color: #4E9C32;
    --phase20-legendary-bias-color: #D2F59A;
  }
  16% {
    --phase20-legendary-name-color: #A7E76A;
    --phase20-legendary-shadow-color: #2C7C2B;
    --phase20-legendary-bias-color: #A7E76A;
  }
  30% {
    --phase20-legendary-name-color: #91DFF1;
    --phase20-legendary-shadow-color: #267E98;
    --phase20-legendary-bias-color: #91DFF1;
  }
  38% {
    --phase20-legendary-name-color: #C9F4FF;
    --phase20-legendary-shadow-color: #4AA2B5;
    --phase20-legendary-bias-color: #C9F4FF;
  }
  46% {
    --phase20-legendary-name-color: #91DFF1;
    --phase20-legendary-shadow-color: #267E98;
    --phase20-legendary-bias-color: #91DFF1;
  }
  62% {
    --phase20-legendary-name-color: #F1D24E;
    --phase20-legendary-shadow-color: #946612;
    --phase20-legendary-bias-color: #F1D24E;
  }
  70% {
    --phase20-legendary-name-color: #FFF09A;
    --phase20-legendary-shadow-color: #C18A1A;
    --phase20-legendary-bias-color: #FFF09A;
  }
  78% {
    --phase20-legendary-name-color: #F1D24E;
    --phase20-legendary-shadow-color: #946612;
    --phase20-legendary-bias-color: #F1D24E;
  }
  100% {
    --phase20-legendary-name-color: #A7E76A;
    --phase20-legendary-shadow-color: #2C7C2B;
    --phase20-legendary-bias-color: #A7E76A;
  }
}

@keyframes phase20-grow4good-shift {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(35deg) brightness(1.25); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

@keyframes phase20-party-animal-pop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

body.reduce-motion[data-phase20="true"] .phase14-player-identity .player-name-label,
body.reduce-motion[data-phase20="true"] .phase14-player-identity .phase14-color-run {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------------
   Skin swatches and Player Customization buttons.
   ---------------------------------------------------------------------- */
body[data-phase20="true"] .phase12-skin-control-row .skin-colors-button,
body[data-phase20="true"] .phase13-title-picker-control .phase13-title-picker-button,
body[data-phase20="true"] .wrench-customize-control .wrench-customize-button,
body[data-phase20="true"] .flag-picker-control .flag-picker-button {
  height: 38px !important;
  min-height: 38px !important;
  max-height: none !important;
  padding: 5px 10px !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  text-transform: none !important;
}

/* Every textual button uses one strict bottom-right pixel shadow. */
body[data-phase20="true"] button,
body[data-phase20="true"] button * {
  text-shadow: var(--phase20-button-shadow) !important;
}

body[data-phase20="true"] .gt-window button,
body[data-phase20="true"] .gt-window button *,
body[data-phase20="true"] .inventory-actions button,
body[data-phase20="true"] .inventory-actions button *,
body[data-phase20="true"] .settings-panel button,
body[data-phase20="true"] .settings-panel button * {
  text-shadow: var(--phase20-button-shadow) !important;
}

body[data-phase20="true"] button img,
body[data-phase20="true"] .ui-window-close img,
body[data-phase20="true"] .gt-dropdown-arrow {
  text-shadow: none !important;
  box-shadow: none;
}

/* ----------------------------------------------------------------------
   Dropdown and dropup system. The supplied arrow artwork is used instead
   of browser-native triangles or glyphs.
   ---------------------------------------------------------------------- */
body[data-phase20="true"] .gt-dropdown,
body[data-phase20="true"] .filter-control {
  position: relative;
  min-width: 0;
}

body[data-phase20="true"] .gt-dropdown-button,
body[data-phase20="true"] .filter-box {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px calc(var(--phase20-dropdown-arrow-size) + 14px) 5px 9px !important;
  border: 3px solid var(--gt-border) !important;
  border-radius: 3px;
  background: rgba(39, 125, 159, .5) !important;
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  box-shadow: inset 2px 2px 0 #000000, 2px 2px 0 #000000;
  cursor: pointer;
}

body[data-phase20="true"] .gt-dropdown-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  width: var(--phase20-dropdown-arrow-size) !important;
  height: var(--phase20-dropdown-arrow-size) !important;
  object-fit: contain;
  transform: translateY(-50%);
  pointer-events: none;
  image-rendering: pixelated;
}

body[data-phase20="true"] .gt-dropdown.is-open .gt-dropdown-button .gt-dropdown-arrow {
  transform: translateY(-50%) rotate(180deg);
}

body[data-phase20="true"] .gt-dropdown-menu {
  position: absolute;
  z-index: 140;
  left: 0;
  width: max(100%, 190px);
  max-height: min(280px, 45vh);
  overflow: auto;
  padding: 4px;
  background: rgba(39, 125, 159, 0.5) !important;
}

body[data-phase20="true"] .gt-dropup .gt-dropdown-menu {
  bottom: calc(100% + 7px);
}

body[data-phase20="true"] .gt-dropdown-option {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
}

body[data-phase20="true"] .gt-dropdown-option:is(:hover, :focus-visible, .is-selected) {
  background: rgba(123, 186, 210, .55);
  outline: none;
}

/* ----------------------------------------------------------------------
   Action rail: shorter buttons with text that stays inside.
   ---------------------------------------------------------------------- */
body[data-phase20="true"] .inventory-action {
  width: calc(100% - 12px) !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 2px 4px !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

@media (max-width: 680px) {
  body[data-phase20="true"] .inventory-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 14px !important;
  }
}

/* ----------------------------------------------------------------------
   Fast item-name feedback and Growtopia color-code runs.
   0.2s in + 2s hold + 0.2s out = 2.4s total.
   ---------------------------------------------------------------------- */
body[data-phase20="true"] .inventory-item-name-toast {
  white-space: nowrap;
}

body[data-phase20="true"] .inventory-item-name-toast .item-name-color-run {
  display: inline;
}

body[data-phase20="true"] .inventory-item-name-toast.is-visible {
  animation: phase20-item-name-toast 2400ms linear both !important;
}

@keyframes phase20-item-name-toast {
  0% { opacity: 0; transform: translateY(2px); }
  8.3333% { opacity: 1; transform: translateY(0); }
  91.6667% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1px); }
}

body.reduce-motion[data-phase20="true"] .inventory-item-name-toast.is-visible {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* =====================================================================
   Phase 20 UI cleanup — skin swatches, search bar and filter dropdown

   The adjustments below address several lingering inconsistencies noted
   after merging the Phase 16, 18, 19 and 20 layers.  Skin swatches have
   been refactored into true square boxes with proper Growtopia‑style
   shading.  The search control’s magnifying glass has been restored to
   its original size and proximity, and the filter dropdown once again
   matches the height and visual rhythm of the adjacent search field.

   These overrides are scoped to the Phase 20 marker so earlier phases
   remain untouched.
   ===================================================================== */

/* Skin swatch geometry is intentionally not overridden here. The active
   Phase 10 design remains authoritative from base.css / the Phase 10
   presentation block above. */

/* Restore the original search control proportions.  The magnifying
   glass returns to its Phase 16 dimensions, and the grid template
   allocates a matching column for the icon. */
body[data-phase20="true"] .search-control {
  grid-template-columns: var(--ui-control-height) minmax(0, 1fr) !important;
  gap: 6px !important;
}

/* The Phase 18 search artwork must occupy the full control height. */
body[data-phase20="true"] .gt-window label > .search-icon-image,
body[data-phase20="true"] .search-icon-image {
  width: var(--ui-control-height) !important;
  height: var(--ui-control-height) !important;
  min-width: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  align-self: center !important;
}

/* Filter keeps its dropdown behavior, but visually follows the search box. */
body[data-phase20="true"] .filter-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  max-height: none !important;
  padding: 2px calc(var(--phase20-dropdown-arrow-size) + 12px) 2px 8px !important;
  border: 3px solid var(--gt-border) !important;
  border-radius: 4px !important;
  background: rgba(39, 125, 159, 0.5) !important;
  color: #d2d6d9 !important;
  font-size: var(--ui-control-font-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-shadow: none !important;
  box-shadow: inset 2px 2px 0 #000000, 2px 2px 0 #000000 !important;
  gap: 0 !important;
}

body[data-phase20="true"] #filterLabel {
  display: inline-flex !important;
  min-height: 0 !important;
  align-items: center !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-shadow: none !important;
}

/* Keep the arrow at the right edge without changing the field design. */
body[data-phase20="true"] .filter-box .gt-dropdown-arrow {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--phase20-dropdown-arrow-size) !important;
  height: var(--phase20-dropdown-arrow-size) !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

/* Input-style controls retain their normal border while focused. */
body[data-phase20="true"] :is(
  input,
  select,
  textarea,
  .filter-box,
  .gt-dropdown-button
):is(:focus, :focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
}

@media (max-width: 680px) {
  body[data-phase20="true"] .filter-box {
    padding-left: 5px !important;
    border-width: 2px !important;
  }
}

/* ======================================================================
   Title stacking refinement
   - all title contributions may coexist
   - paired title art sits between flag/badges and GrowID/wrench
   - Legendary keeps its color cycle without animated shine or outer glow
   - Level 125 uses the stronger blue seen in current references
   ====================================================================== */
body:is([data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase14-player-identity {
  isolation: isolate;
}

/* Double-sided titles are now literal inner neighbors of the GrowID. */
body:is([data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase14-title-decoration-stack--left,
body:is([data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase14-title-decoration-stack--right {
  position: relative;
  z-index: 1;
}

/* A clearer cyan-blue Level 125 name. Its pulse remains opacity-only. */
body:is([data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase14-player-identity .player-name-label.title-level125:not(.title-legendary):not(.title-grow4good):not(.title-party-animal) {
  color: rgba(38, 211, 255, 0.92) !important;
  text-shadow: 1px 1px 0 #006783 !important;
}

body:is([data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase14-player-identity .player-name-label.title-level125:not(.title-legendary):not(.title-grow4good):not(.title-party-animal) .phase14-color-run {
  color: inherit !important;
  text-shadow: inherit !important;
}

/* Legendary never uses blur, filter, drop-shadow, or box-shadow. The only
   exterior edge is the game's hard one-pixel shadow. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: 1px 1px 0 var(--phase20-legendary-shadow-color) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary:not(.title-grow4good):not(.title-party-animal) .phase14-color-run {
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ======================================================================
   Title stacking correction
   - no animated Legendary shine
   - G4G + Legendary uses a bright static inner fill, never an outer glow
   - icon title badges never render as a visual stack
   ====================================================================== */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary .phase14-color-run::before,
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary .phase14-color-run::after {
  content: none !important;
  animation: none !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good.title-legendary .phase20-title-effect-run {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.46) 28%, transparent 62%),
    linear-gradient(var(--phase14-run-color), var(--phase14-run-color));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 1px 1px 0 rgba(45, 65, 66, 0.98) !important;
  box-shadow: none !important;
}

body[data-phase20="true"] .phase14-player-identity[data-icon-title-count]:not([data-icon-title-count="0"]):not([data-icon-title-count="1"]) .phase14-title-badge-stack {
  display: none !important;
}


/* ======================================================================
   Targeted title-combination refinement
   - replacement badges always own the flag slot
   - double-sided title artwork is single-select
   - Doctor adds a restrained red bias to colorable title effects
   - Legendary + Grow4Good uses a fully illuminated fill with no dark veil
   ====================================================================== */

@property --phase20-legendary-bias-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #A7E76A;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary {
  --phase20-legendary-bias-color: #A7E76A;
  animation: phase20-legendary-color-cycle 12.8s ease-in-out infinite !important;
}

@keyframes phase20-legendary-bias-cycle {
  0%, 16%, 100% { --phase20-legendary-bias-color: #A7E76A; }
  8% { --phase20-legendary-bias-color: #D2F59A; }
  30%, 46% { --phase20-legendary-bias-color: #91DFF1; }
  38% { --phase20-legendary-bias-color: #C9F4FF; }
  62%, 78% { --phase20-legendary-bias-color: #F1D24E; }
  70% { --phase20-legendary-bias-color: #FFF09A; }
}

/* Doctor does not replace another colorable title. It gently warms the fill
   and gives the hard one-pixel shadow a brighter red character. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary:not(.title-grow4good):not(.title-party-animal) {
  color: color-mix(in srgb, var(--phase20-legendary-name-color) 84%, #FF4D49 16%) !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase20-legendary-shadow-color) 52%, #F04446 48%) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-level125:not(.title-legendary):not(.title-grow4good):not(.title-party-animal) {
  color: #70C9F6 !important;
  text-shadow: 1px 1px 0 #B43C4D !important;
}

/* The base color fills the complete glyph. A small top highlight supplies the
   in-text brightness visible in Grow4Good + Legendary references; no dark
   gradient, blur, outer glow, or translucent veil is applied. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good.title-legendary .phase20-title-effect-run {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0 15%, rgba(255, 255, 255, 0.5) 31%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(
      color-mix(in srgb, var(--phase14-run-color) 82%, var(--phase20-legendary-bias-color) 18%),
      color-mix(in srgb, var(--phase14-run-color) 92%, var(--phase20-legendary-bias-color) 8%)
    ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 1px 1px 0 var(--phase20-run-shadow-color, #4B5250) !important;
  box-shadow: none !important;
  opacity: 1;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good.title-legendary.title-doctor .phase20-title-effect-run {
  text-shadow: 1px 1px 0 var(--phase20-run-shadow-color, #C94349) !important;
}

/* The full five-title combination remains compact: pastel Grow4Good letters,
   Legendary bias/size/suffix, the Level 125 light pulse, Party Animal's tiny
   hop, and Doctor's restrained red cast. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-ultimate-combination .phase20-title-effect-run {
  filter: saturate(1.12) brightness(1.08);
}

/* Badge priority is explicit, so an old icon-count rule can never hide Mentor,
   Ubidev, or another selected replacement badge. */
body[data-phase20="true"] .phase14-player-identity[data-has-replacement-badge="true"] .phase14-title-badge-stack {
  display: inline-flex !important;
}

body[data-phase20="true"] .phase14-player-identity[data-has-replacement-badge="true"] #playerFlagPreview {
  display: none !important;
}


/* ======================================================================
   Final title behavior correction
   - Legendary remains the animation authority when stacked
   - Grow4Good/Party colors fill the complete glyph with no inner gradient
   - Party Animal contributes static colors only
   - replacement badges such as Mentor remain visible beside other titles
   ====================================================================== */

/* Full-glyph color. No clipped gradient, inner shine, dark veil, blur, or glow. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good .phase20-title-effect-run,
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-party-animal:not(.title-grow4good) .phase20-title-effect-run {
  --phase20-stacked-title-fill: color-mix(
    in srgb,
    var(--phase14-run-color) 68%,
    var(--phase20-legendary-bias-color) 32%
  );
  color: var(--phase20-stacked-title-fill) !important;
  -webkit-text-fill-color: var(--phase20-stacked-title-fill) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: 1px 1px 0 color-mix(
    in srgb,
    var(--phase20-stacked-title-fill) 38%,
    #18272B 62%
  ) !important;
}

/* Doctor keeps its red-biased hard edge without darkening the glyph fill. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary:is(.title-grow4good, .title-party-animal) .phase20-title-effect-run {
  text-shadow: 1px 1px 0 color-mix(
    in srgb,
    var(--phase20-stacked-title-fill) 34%,
    #F04446 66%
  ) !important;
}

/* Party Animal is static. It never moves, pops, bounces, or replaces
   Legendary's color cycle. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-party-animal .phase20-title-effect-run {
  transform: none !important;
  animation: none !important;
  animation-delay: 0s !important;
}

/* Outside Legendary, preserve other titles' own animation while removing only
   the Party Animal movement. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-party-animal.title-level125:not(.title-grow4good):not(.title-legendary) .phase20-title-effect-run {
  animation: phase20-level125-pulse 2.4s ease-in-out infinite !important;
}
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-party-animal.title-grow4good:not(.title-level125):not(.title-legendary) .phase20-title-effect-run {
  animation: phase20-grow4good-shift 2.2s linear infinite !important;
  animation-delay: calc(var(--phase20-run-index, 0) * -80ms) !important;
}
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-party-animal.title-grow4good.title-level125:not(.title-legendary) .phase20-title-effect-run {
  animation:
    phase20-level125-pulse 2.4s ease-in-out infinite,
    phase20-grow4good-shift 2.2s linear infinite !important;
  animation-delay: 0s, calc(var(--phase20-run-index, 0) * -80ms) !important;
}

/* With Legendary active, its color cycle is the only hue animation. Level 125
   may still add its opacity pulse; Party and Grow4Good add color only. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary .phase20-title-effect-run {
  transform: none !important;
  filter: none !important;
  animation: none !important;
  animation-delay: 0s !important;
}
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-level125 .phase20-title-effect-run {
  animation: phase20-level125-pulse 2.4s ease-in-out infinite !important;
}

/* The old icon-count suppression had higher specificity than badge priority.
   This selector explicitly keeps Mentor/Ubidev/etc. visible when Legendary or
   Grow4Good is also active. */
body[data-phase20="true"] .phase14-player-identity[data-icon-title-count][data-has-replacement-badge="true"] .phase14-title-badge-stack {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body[data-phase20="true"] .phase14-player-identity[data-icon-title-count][data-has-replacement-badge="true"] #playerFlagPreview {
  display: none !important;
}

/* Specificity guards for the exact stacked combinations generated by the
   title renderer. These must outrank older three-title animation rules. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good.title-party-animal .phase20-title-effect-run {
  animation: none !important;
  animation-delay: 0s !important;
  transform: none !important;
  filter: none !important;
}
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good.title-party-animal.title-level125 .phase20-title-effect-run {
  animation: phase20-level125-pulse 2.4s ease-in-out infinite !important;
  animation-delay: 0s !important;
}

/* Outrank the historical multi-icon suppression selector while a real
   replacement badge owns the slot. */
body[data-phase20="true"] .phase14-player-identity[data-icon-title-count][data-has-replacement-badge="true"]:not([data-icon-title-count="0"]):not([data-icon-title-count="1"]) .phase14-title-badge-stack {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ======================================================================
   Grow4Good ultimate-brightness refinement
   Grow4Good brightens the complete Legendary glyph instead of adding a
   clipped highlight, gradient, veil, blur, or exterior glow. Legendary
   remains the hue-animation authority in every stacked combination.
   ====================================================================== */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good .phase20-title-effect-run {
  --phase20-g4g-legendary-base: color-mix(
    in srgb,
    var(--phase14-run-color) 64%,
    var(--phase20-legendary-bias-color) 36%
  );
  --phase20-g4g-legendary-fill: color-mix(
    in srgb,
    var(--phase20-g4g-legendary-base) 72%,
    #ffffff 28%
  );
  color: var(--phase20-g4g-legendary-fill) !important;
  -webkit-text-fill-color: var(--phase20-g4g-legendary-fill) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: 1px 1px 0 color-mix(
    in srgb,
    var(--phase20-g4g-legendary-fill) 52%,
    var(--phase20-legendary-shadow-color) 48%
  ) !important;
}

/* Doctor keeps its restrained red influence without reducing Grow4Good's
   full-glyph brightness. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary.title-grow4good .phase20-title-effect-run {
  --phase20-g4g-doctor-fill: color-mix(
    in srgb,
    var(--phase20-g4g-legendary-fill) 88%,
    #ff7979 12%
  );
  color: var(--phase20-g4g-doctor-fill) !important;
  -webkit-text-fill-color: var(--phase20-g4g-doctor-fill) !important;
  text-shadow: 1px 1px 0 color-mix(
    in srgb,
    var(--phase20-g4g-doctor-fill) 42%,
    #e6535a 58%
  ) !important;
}


/* ======================================================================
   Grow4Good power + Hand Gesture item-box picker
   ====================================================================== */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good .phase20-title-effect-run {
  --phase20-g4g-power-fill: color-mix(in srgb, var(--phase14-run-color) 48%, #ffffff 52%);
  color: var(--phase20-g4g-power-fill) !important;
  -webkit-text-fill-color: var(--phase20-g4g-power-fill) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase20-g4g-power-fill) 34%, var(--phase20-run-shadow-color, #32454A) 66%) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good .phase20-title-effect-run {
  --phase20-g4g-legendary-base: color-mix(in srgb, var(--phase14-run-color) 58%, var(--phase20-legendary-bias-color) 42%);
  --phase20-g4g-legendary-fill: color-mix(in srgb, var(--phase20-g4g-legendary-base) 46%, #ffffff 54%);
  color: var(--phase20-g4g-legendary-fill) !important;
  -webkit-text-fill-color: var(--phase20-g4g-legendary-fill) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase20-g4g-legendary-fill) 38%, var(--phase20-legendary-shadow-color) 62%) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary.title-grow4good .phase20-title-effect-run {
  --phase20-g4g-doctor-fill: color-mix(in srgb, var(--phase20-g4g-legendary-fill) 90%, #ff8a8a 10%);
  color: var(--phase20-g4g-doctor-fill) !important;
  -webkit-text-fill-color: var(--phase20-g4g-doctor-fill) !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase20-g4g-doctor-fill) 34%, #e6535a 66%) !important;
}

.gesture-picker-field {
  display: grid !important;
  gap: 5px !important;
}
.gesture-picker-field > select[hidden] { display: none !important; }
.gesture-mini-inventory {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 62px) !important;
  justify-content: start !important;
  align-content: start !important;
  gap: 9px !important;
  max-height: 154px !important;
  overflow: auto !important;
  padding: 6px 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gesture-item {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 62px !important;
  height: 62px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: center / 100% 100% no-repeat url("../assets/ui/inventory/boxes/clothes_itembox.png") !important;
  image-rendering: pixelated !important;
  cursor: pointer !important;
}
.gesture-item.is-selected { background-image: url("../assets/ui/inventory/boxes/select_clothes_itembox.png") !important; }
.gesture-icon {
  width: 84% !important;
  height: 84% !important;
  image-rendering: pixelated !important;
  transform: translateY(-3px) scale(1.08) !important;
  pointer-events: none !important;
}
.gesture-name-overlay {
  position: absolute !important;
  z-index: 4 !important;
  right: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  display: block !important;
  min-height: 13px !important;
  max-height: 27px !important;
  overflow: hidden !important;
  padding: 2px 1px 1px !important;
  border-radius: 1px !important;
  background: rgba(0, 0, 0, 0.58) !important;
  color: #ffffff !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: 1px 1px 0 #000000 !important;
  pointer-events: none !important;
}
.gesture-equipped-check {
  position: absolute !important;
  right: 2% !important;
  bottom: 2% !important;
  z-index: 7 !important;
  display: none !important;
  width: 48% !important;
  height: 48% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  image-rendering: pixelated !important;
  pointer-events: none !important;
}
.gesture-item.is-selected .gesture-equipped-check {
  display: block !important;
  animation: equipped-check-pop 280ms cubic-bezier(.2, 1.65, .35, 1) both !important;
}
.gesture-item:is(:hover, :focus-visible) { filter: brightness(1.08) !important; }
.gesture-item:focus-visible { outline: 3px solid #ffdb16 !important; outline-offset: 2px !important; }
.gesture-item.has-missing-asset::before {
  content: "?";
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  inset: 18%;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  font-size: 18px;
  text-shadow: none;
}
@media (max-width: 680px) {
  .gesture-mini-inventory {
    grid-template-columns: repeat(3, minmax(0, 58px)) !important;
    justify-content: space-evenly !important;
    gap: 8px 6px !important;
    max-height: 146px !important;
    padding: 6px 2px 9px !important;
  }
  .gesture-item { width: 58px !important; height: 58px !important; }
  .gesture-name-overlay { right: 4px !important; bottom: 4px !important; left: 4px !important; font-size: 6.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gesture-item.is-selected .gesture-equipped-check { animation: none !important; }
}


/* ======================================================================
   Targeted modal language, flag picker, skin Back button, and timing
   ====================================================================== */

/* Legendary keeps the same color path, only with a slower deliberate cycle. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary {
  animation-duration: 12.8s !important;
}

/* Requested Growtopia text-language changes. */
body[data-phase19="true"] #wrenchCustomizerTitle,
body[data-phase19="true"] #wrenchStyleHeading {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

/* Change Flag now follows the same simple left-aligned UI-window language. */
.flag-picker-window {
  width: min(620px, calc(100vw - 28px)) !important;
  max-height: min(86dvh, 720px) !important;
  padding: 16px !important;
  overflow: visible !important;
}
.flag-picker-body {
  display: grid !important;
  gap: 10px !important;
  max-height: calc(min(86dvh, 720px) - 32px) !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
.flag-picker-heading {
  margin: 0 !important;
}
.flag-picker-heading h2 {
  display: block !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(24px, 4vw, 32px) !important;
  line-height: 1 !important;
  text-align: left !important;
  text-shadow: 1px 1px 0 #000000 !important;
}
.flag-picker-current {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 12px !important;
  min-height: 34px !important;
  color: #FFFFFF !important;
  font-weight: 900 !important;
}
.flag-picker-current-label {
  color: #FCE6BA !important; /* `o */
  font-size: 18px !important;
  text-shadow: 1px 1px 0 #000000 !important;
}
.flag-picker-current-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: #FFFCC5 !important; /* `$ */
  font-size: 17px !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 #000000 !important;
}
.flag-picker-current-value img {
  width: 30px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(1px 1px 0 #000000) !important;
}
.flag-picker-list {
  display: grid !important;
  gap: 3px !important;
  max-height: min(56dvh, 430px) !important;
  overflow: auto !important;
  padding: 2px 4px 6px 0 !important;
  overscroll-behavior: contain !important;
}
.flag-picker-option,
.flag-picker-option:hover,
.flag-picker-option:focus-visible,
.flag-picker-option.is-selected {
  display: grid !important;
  grid-template-columns: 40px 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 3px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #FFFCC5 !important; /* `$ */
  font: inherit !important;
  font-weight: 900 !important;
  text-align: left !important;
  text-shadow: 1px 1px 0 #000000 !important;
}
.flag-picker-option:hover,
.flag-picker-option:focus-visible {
  filter: brightness(1.08) !important;
}
.flag-picker-option .flag-option-checkbox {
  width: 40px !important;
  height: 38px !important;
  flex: 0 0 40px !important;
}
.flag-picker-option img {
  width: 30px !important;
  max-height: 24px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(1px 1px 0 #000000) !important;
}
.flag-picker-option > span:last-child {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.flag-picker-footer {
  display: flex !important;
  justify-content: flex-start !important;
  padding-top: 2px !important;
}
.flag-picker-done,
.skin-colors-back-button {
  width: auto !important;
  min-width: 88px !important;
  padding: 5px 12px !important;
  background: #8CCBE2 !important;
  color: #FFFFFF !important; /* `w */
  font-size: 18px !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

.skin-colors-footer {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 18px !important;
  padding: 0 0 2px !important;
}

@media (max-width: 680px) {
  .flag-picker-window {
    width: min(94vw, 520px) !important;
    padding: 13px !important;
  }
  .flag-picker-body {
    max-height: calc(min(88dvh, 700px) - 26px) !important;
  }
  .flag-picker-list {
    max-height: min(56dvh, 390px) !important;
  }
  .flag-picker-option,
  .flag-picker-option:hover,
  .flag-picker-option:focus-visible,
  .flag-picker-option.is-selected {
    grid-template-columns: 38px 32px minmax(0, 1fr) !important;
    min-height: 44px !important;
    gap: 7px !important;
  }
  .flag-picker-option .flag-option-checkbox {
    width: 38px !important;
    height: 36px !important;
  }
  .flag-picker-current-label,
  .flag-picker-current-value {
    font-size: 16px !important;
  }
}


/* ======================================================================
   Phase 26: punch arm, mobile tab attachment, gesture pop-up names
   ====================================================================== */
@media (max-width: 680px) {
  .inventory-tabs {
    gap: 0 !important;
  }
  .inventory-tab + .inventory-tab,
  .inventory-tab--tall + .inventory-tab,
  .inventory-tab + .inventory-tab--tall,
  .inventory-tab--tall + .inventory-tab--tall {
    margin-top: 0 !important;
  }
}

@media (max-width: 430px) {
  .inventory-tabs {
    gap: 0 !important;
  }
  .inventory-tab + .inventory-tab,
  .inventory-tab--tall + .inventory-tab,
  .inventory-tab + .inventory-tab--tall,
  .inventory-tab--tall + .inventory-tab--tall {
    margin-top: 0 !important;
  }
}

/* ======================================================================
   Phase 28: authoritative title behavior and sizing
   ====================================================================== */
@keyframes phase28-grow4good-pastel-pulse {
  0%, 100% {
    filter: brightness(1.02) saturate(1);
    opacity: 1;
  }
  50% {
    filter: brightness(1.24) saturate(1.04);
    opacity: 1;
  }
}

@keyframes phase28-doctor-blue-pulse {
  0%, 100% {
    filter: brightness(1);
    opacity: .75;
  }
  50% {
    filter: brightness(1.16);
    opacity: .75;
  }
}

@keyframes phase28-doctor-legendary-cycle {
  0%, 16%, 100% {
    --phase20-legendary-name-color: #B7DD75;
    --phase20-legendary-shadow-color: #744A32;
  }
  8% {
    --phase20-legendary-name-color: #E4F3A6;
    --phase20-legendary-shadow-color: #965C3B;
  }
  30%, 46% {
    --phase20-legendary-name-color: #A9DCEB;
    --phase20-legendary-shadow-color: #765064;
  }
  38% {
    --phase20-legendary-name-color: #D8F1F8;
    --phase20-legendary-shadow-color: #955B6B;
  }
  62%, 78% {
    --phase20-legendary-name-color: #EFCB62;
    --phase20-legendary-shadow-color: #8D4930;
  }
  70% {
    --phase20-legendary-name-color: #FFF0AA;
    --phase20-legendary-shadow-color: #AE603C;
  }
}

/* Legendary returns to the synchronized whole-name cycle used before the
   per-letter offset experiment. Nothing moves or changes position. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary:not(.title-grow4good) {
  font-size: 1.18em !important;
  color: var(--phase20-legendary-name-color) !important;
  -webkit-text-fill-color: var(--phase20-legendary-name-color) !important;
  text-shadow: 1px 1px 0 var(--phase20-legendary-shadow-color) !important;
  animation: phase20-legendary-color-cycle 12.8s ease-in-out infinite !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary:not(.title-grow4good) .phase20-title-effect-run {
  display: inline !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: inherit !important;
  animation: none !important;
  animation-delay: 0s !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Doctor only influences Legendary and Level 125. Its Legendary influence is
   a restrained red cast over the same slow green/blue/gold cycle. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary:not(.title-grow4good) {
  font-size: 1.18em !important;
  animation: phase28-doctor-legendary-cycle 12.8s ease-in-out infinite !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary:not(.title-grow4good) .phase20-title-effect-run {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: inherit !important;
  animation: none !important;
  filter: none !important;
}

/* Grow4Good keeps fixed pastel colors per letter and slowly brightens the
   complete glyph. The hard 1px shadow remains; there is no exterior glow. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good {
  font-size: 1em !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-grow4good .phase20-title-effect-run {
  --phase28-g4g-fill: color-mix(in srgb, var(--phase14-run-color) 88%, #ffffff 12%);
  color: var(--phase28-g4g-fill) !important;
  -webkit-text-fill-color: var(--phase28-g4g-fill) !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase28-g4g-fill) 30%, var(--phase20-run-shadow-color, #34484B) 70%) !important;
  animation: phase28-grow4good-pastel-pulse 3.4s ease-in-out infinite !important;
  animation-delay: calc(var(--phase20-run-index, 0) * -0.08s) !important;
  transform: none !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  box-shadow: none !important;
}

/* Legendary contributes size/suffix while Grow4Good remains the dominant
   color and icon behavior. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good {
  font-size: 1.24em !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-legendary.title-grow4good .phase20-title-effect-run,
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-legendary.title-grow4good .phase20-title-effect-run {
  --phase28-g4g-fill: color-mix(in srgb, var(--phase14-run-color) 91%, #ffffff 9%);
  color: var(--phase28-g4g-fill) !important;
  -webkit-text-fill-color: var(--phase28-g4g-fill) !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase28-g4g-fill) 36%, #526152 64%) !important;
  animation: phase28-grow4good-pastel-pulse 3.2s ease-in-out infinite !important;
  animation-delay: calc(var(--phase20-run-index, 0) * -0.08s) !important;
  transform: none !important;
  opacity: 1 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Doctor has no color effect on Grow4Good, Party Animal, or ordinary names. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-grow4good:not(.title-legendary) .phase20-title-effect-run {
  color: var(--phase28-g4g-fill) !important;
  -webkit-text-fill-color: var(--phase28-g4g-fill) !important;
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--phase28-g4g-fill) 30%, var(--phase20-run-shadow-color, #34484B) 70%) !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-party-animal .phase20-title-effect-run {
  animation: none !important;
  animation-delay: 0s !important;
  transform: none !important;
  filter: none !important;
}

/* Level 125 does not recolor or pulse Grow4Good. It contributes size only. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-grow4good:not(.title-legendary) {
  font-size: 1.07em !important;
  animation: none !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-legendary.title-grow4good {
  font-size: 1.29em !important;
  animation: none !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-grow4good .phase20-title-effect-run {
  animation: phase28-grow4good-pastel-pulse 3.4s ease-in-out infinite !important;
  animation-delay: calc(var(--phase20-run-index, 0) * -0.08s) !important;
  opacity: 1 !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-level125.title-legendary.title-grow4good .phase20-title-effect-run {
  animation-duration: 3.2s !important;
}

/* Doctor + Level 125: brighter blue pulse and a modest size increase. */
body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-level125:not(.title-legendary):not(.title-grow4good) {
  font-size: 1.07em !important;
  color: #2FCBFF !important;
  -webkit-text-fill-color: #2FCBFF !important;
  text-shadow: 1px 1px 0 #08728D !important;
  animation: none !important;
}

body[data-phase20="true"] .phase14-player-identity .player-name-label.title-doctor.title-level125:not(.title-legendary):not(.title-grow4good) :is(.phase14-color-run, .phase14-base-run, .phase20-title-effect-run) {
  color: #2FCBFF !important;
  -webkit-text-fill-color: #2FCBFF !important;
  text-shadow: 1px 1px 0 #08728D !important;
  opacity: .75 !important;
  animation: phase28-doctor-blue-pulse 2.8s ease-in-out infinite !important;
  transform: none !important;
}

/* ======================================================================
   Inventory Restart Phase 2: static player pose picker
   ====================================================================== */
.pose-picker-field {
  display: grid !important;
  gap: 5px !important;
}
.pose-picker-field > select[hidden] { display: none !important; }
.pose-mini-inventory {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 62px) !important;
  justify-content: start !important;
  align-content: start !important;
  gap: 9px !important;
  max-height: 154px !important;
  overflow: auto !important;
  padding: 6px 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pose-item {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 62px !important;
  height: 62px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  background: center / 100% 100% no-repeat url("../assets/ui/inventory/boxes/clothes_itembox.png") !important;
  image-rendering: pixelated !important;
  cursor: pointer !important;
}
.pose-item.is-selected {
  background-image: url("../assets/ui/inventory/boxes/select_clothes_itembox.png") !important;
}
.pose-icon {
  width: 84% !important;
  height: 84% !important;
  image-rendering: pixelated !important;
  transform: translateY(-3px) scale(1.08) !important;
  pointer-events: none !important;
}
.pose-equipped-check {
  position: absolute !important;
  right: 2% !important;
  bottom: 2% !important;
  z-index: 7 !important;
  display: none !important;
  width: 48% !important;
  height: 48% !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  image-rendering: pixelated !important;
  pointer-events: none !important;
}
.pose-item.is-selected .pose-equipped-check {
  display: block !important;
  animation: equipped-check-pop 280ms cubic-bezier(.2, 1.65, .35, 1) both !important;
}
.pose-item:is(:hover, :focus-visible) { filter: brightness(1.08) !important; }
.pose-item:focus-visible { outline: 3px solid #ffdb16 !important; outline-offset: 2px !important; }
.pose-item.has-missing-asset::before {
  content: "?";
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  inset: 18%;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  font-size: 18px;
  text-shadow: none;
}
@media (max-width: 680px) {
  .pose-mini-inventory {
    grid-template-columns: repeat(3, minmax(0, 58px)) !important;
    justify-content: space-evenly !important;
    gap: 8px 6px !important;
    max-height: 146px !important;
    padding: 6px 2px 9px !important;
  }
  .pose-item { width: 58px !important; height: 58px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pose-item.is-selected .pose-equipped-check { animation: none !important; }
}

/* Planner-Official Hotfix (1): Roles picker */
.roles-picker-control {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(150px, 1fr);
  align-items: center;
  gap: 10px;
}

.roles-picker-button {
  min-height: 42px;
  width: 100%;
}

.roles-picker-window {
  position: relative;
  width: min(620px, calc(100vw - 24px));
  max-height: min(720px, calc(100vh - 24px));
  overflow: hidden;
}

.roles-picker-body {
  display: grid;
  gap: 16px;
  padding: 18px;
  overflow: auto;
  max-height: min(680px, calc(100vh - 44px));
}

.roles-picker-section {
  display: grid;
  gap: 10px;
}

.roles-picker-heading {
  margin: 0;
  padding: 0;
}

.roles-picker-heading h2 {
  margin: 0;
  font-size: clamp(1rem, 3.3vw, 1.45rem);
}

.role-skin-grid {
  display: grid;
  grid-template-columns: repeat(6, 68px);
  gap: 10px;
  justify-content: start;
  align-items: center;
  padding: 4px;
}

.role-skin-item {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
}

.role-skin-item .role-skin-icon {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.role-skin-item .item-box-base,
.role-skin-item .item-selection-overlay,
.role-skin-item .item-equipped-check {
  image-rendering: pixelated;
  pointer-events: none;
}

.role-flag-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-flag-option {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 48px;
  text-align: left;
}

.role-flag-option img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.role-flag-option.is-selected {
  filter: brightness(1.18);
  outline: 3px solid rgba(255,255,255,.92);
  outline-offset: -4px;
}

.roles-picker-footer {
  display: flex;
  justify-content: flex-start;
}

.roles-picker-back {
  min-width: 140px;
}

@media (max-width: 560px) {
  .roles-picker-body { padding: 14px 12px; gap: 13px; }
  .role-skin-grid {
    grid-template-columns: repeat(3, 64px);
    gap: 8px;
    justify-content: start;
  }
  .role-skin-item {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
  .role-flag-list { grid-template-columns: 1fr; }
  .roles-picker-control { grid-template-columns: 1fr; }
}


/* ======================================================================
   Planner-Official Hotfix (3) — Phase 8
   Super Supporter Wrench control + Level 125 full-name treatment
   ====================================================================== */
body[data-hotfix3-phase8="true"] .wrench-super-supporter-toggle {
  justify-content: flex-start !important;
  min-height: 38px !important;
  margin: -4px 0 12px !important;
  font-size: 16px !important;
  text-align: left !important;
}

/* The Super Supporter option is a capability toggle, not a selectable style
   tile. It enlarges only the wrench artwork by exactly two CSS pixels and
   reuses the ordinary default wrench rocking animation. */
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-wrench-stack[data-super-supporter="true"] {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

body[data-hotfix3-phase8="true"] .phase14-player-identity .player-wrench-stack[data-super-supporter="true"] .player-wrench-preview {
  width: 26px;
  height: 26px;
  transform-origin: 50% 50% !important;
  animation: gtConverterWrenchRock 2.8s ease-in-out infinite !important;
}


/* Level 125 is the blue-name title. The full textual unit—prefix, GrowID,
   suffix, and any text-contributing title—grows by two pixels and pulses as
   one unit. Flags, badges, paired art, and the wrench remain outside it. */
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125 {
  font-size: 21px !important;
  transform-origin: center center !important;
  animation: hotfix3-phase8-blue-name-pulse 5.6s ease-in-out infinite !important;
  will-change: transform;
}
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125.title-legendary:not(.title-grow4good) {
  font-size: calc(17px * 1.18 + 4px) !important;
  animation:
    phase20-legendary-color-cycle 12.8s ease-in-out infinite,
    hotfix3-phase8-blue-name-pulse 3.8s ease-in-out infinite !important;
}
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-doctor.title-level125.title-legendary:not(.title-grow4good) {
  animation:
    phase28-doctor-legendary-cycle 12.8s ease-in-out infinite,
    hotfix3-phase8-blue-name-pulse 3.8s ease-in-out infinite !important;
}
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125.title-grow4good:not(.title-legendary),
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-doctor.title-level125:not(.title-legendary):not(.title-grow4good) {
  font-size: calc(17px * 1.07 + 4px) !important;
  animation: hotfix3-phase8-blue-name-pulse 5.6s ease-in-out infinite !important;
}
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125.title-legendary.title-grow4good {
  font-size: calc(17px * 1.29 + 4px) !important;
  animation: hotfix3-phase8-blue-name-pulse 5.6s ease-in-out infinite !important;
}

/* Remove the old per-run Level 125 opacity pulse. Other title-specific color
   animation (Grow4Good letter color and Legendary whole-name color) stays. */
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125:not(.title-grow4good):not(.title-legendary) :is(.phase14-color-run, .phase14-base-run, .phase20-title-effect-run) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125.title-legendary:not(.title-grow4good) .phase20-title-effect-run {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes hotfix3-phase8-blue-name-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

body.reduce-motion[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125 {
  animation: none !important;
  transform: none !important;
}

/* ======================================================================
   Planner Recovery — Phase 8
   Blue Name luminance pulse + ordinary Super Supporter wrench motion
   ====================================================================== */

/* Blue Name owns one synchronized whole-name pulse. The scale and blue
   luminance use the same duration/easing so the darker and brighter states
   cannot drift apart. Other dominant color-title systems retain their own
   palettes and receive only the established whole-name size/scale behavior. */
@property --recovery-phase8-blue-fill {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(39, 157, 219, 0.75);
}

@property --recovery-phase8-blue-shadow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 67, 98, 0.92);
}

body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125:not(.title-legendary):not(.title-grow4good):not(.title-party-animal) {
  --recovery-phase8-blue-fill: rgba(39, 157, 219, 0.75);
  --recovery-phase8-blue-shadow: rgba(0, 67, 98, 0.92);
  color: var(--recovery-phase8-blue-fill) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 1px 1px 0 var(--recovery-phase8-blue-shadow) !important;
  animation:
    hotfix3-phase8-blue-name-pulse 5.6s ease-in-out infinite,
    recovery-phase8-blue-luminance-pulse 5.6s ease-in-out infinite !important;
}

body[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125:not(.title-legendary):not(.title-grow4good):not(.title-party-animal) :is(.phase14-color-run, .phase14-base-run, .phase20-title-effect-run) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: inherit !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

@keyframes recovery-phase8-blue-luminance-pulse {
  0%, 100% {
    --recovery-phase8-blue-fill: rgba(25, 112, 176, 0.75);
    --recovery-phase8-blue-shadow: rgba(0, 49, 74, 0.94);
  }
  50% {
    --recovery-phase8-blue-fill: rgba(80, 195, 232, 0.75);
    --recovery-phase8-blue-shadow: rgba(6, 98, 122, 0.94);
  }
}

body.reduce-motion[data-hotfix3-phase8="true"] .phase14-player-identity .player-name-label.title-level125:not(.title-legendary):not(.title-grow4good):not(.title-party-animal) {
  --recovery-phase8-blue-fill: rgba(57, 190, 235, 0.75);
  --recovery-phase8-blue-shadow: rgba(0, 84, 111, 0.94);
  color: var(--recovery-phase8-blue-fill) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 1px 1px 0 var(--recovery-phase8-blue-shadow) !important;
  animation: none !important;
  transform: none !important;
}

/* Recovery Hotfix — player flag stays clean with no drop shadow. */
body:is([data-planner-phase="14"], [data-planner-phase="15"], [data-planner-phase="16"], [data-planner-phase="17"], [data-planner-phase="18"]) .phase14-identity-left > #playerFlagPreview,
body[data-phase19="true"] #playerFlagPreview,
body[data-phase20="true"] #playerFlagPreview,
#playerFlagPreview {
  filter: none !important;
}


/* Phase 1 request — remove the Pose picker from Player Customization. */
.pose-picker-field {
  display: none !important;
}

/* Request Phase 3 — Blue Name enlarges the flag by 2px and uses a milder bright state. */
body[data-hotfix3-phase8="true"] .phase14-player-identity:has(.player-name-label.title-level125) #playerFlagPreview {
  max-width: 28px !important;
  height: 22px !important;
}

body[data-hotfix3-phase8="true"] .phase14-player-identity:has(.player-name-label.title-level125) .phase14-identity-left {
  min-height: 22px;
}