:root{--om-fill-duration:.58s;--om-choice-sweep-duration:.58s}

/* Loaded after the liquid-glass base so semantic action fills own the final
   pseudo-element without fighting the glass reflection layer. */
.recruit-card button.report-button,
.recruit-card button.channel-button{position:relative!important;overflow:hidden!important;isolation:isolate!important}
.recruit-card button.report-button::before,
.recruit-card button.channel-button::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:0 auto 0 -100%!important;
  width:120%!important;
  height:100%!important;
  border:0!important;
  opacity:1!important;
  filter:none!important;
  background-image:none!important;
  transform:skew(0deg) translateX(-20%)!important;
  transition:transform var(--om-fill-duration) ease!important;
  will-change:transform!important
}
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button.report-button::before{
  background:#d83b48!important;
  background-color:#d83b48!important;
  background-image:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  mix-blend-mode:normal!important
}
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button.channel-button::before{
  background:#38b875!important;
  background-color:#38b875!important;
  background-image:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  mix-blend-mode:normal!important
}
.recruit-card button.report-button:hover::before,
.recruit-card button.channel-button:hover::before{transform:skew(45deg) translateX(75%)!important}
.recruit-card button.report-button>span,
.recruit-card button.channel-button>span{position:relative!important;z-index:2!important;color:#f8fbff!important;text-shadow:0 1px 2px rgba(0,0,0,.54)!important}

/* 2026-07-22: the scroll rail belongs on the menu's outer edge.  Keep the
   choices clear of the rail without leaving a second strip to its right. */
html body .custom-picker.open>.picker-menu{
  padding:6px 0 6px 6px!important
}
html body .custom-picker.open>.picker-menu>.picker-options{
  align-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  scrollbar-gutter:auto!important
}
html body .custom-picker.open>.picker-menu>.picker-options>[data-picker-value]{
  width:calc(100% - 6px)!important;
  max-width:calc(100% - 6px)!important
}
html body .custom-picker.open>.picker-menu>:is(.picker-search,.picker-reset){
  width:calc(100% - 6px)!important;
  max-width:calc(100% - 6px)!important
}

/* The colour is revealed only by the established btn-20 sweep.  The resting
   surface remains glass, while the label stays above both semantic fills. */
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button.report-button,
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button.channel-button{
  background-color:rgba(13,17,24,.78)!important;
  background-image:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02))!important;
  color:#f8fbff!important
}
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button.report-button:hover{
  border-color:rgba(240,91,105,.86)!important
}
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button.channel-button:hover{
  border-color:rgba(82,213,143,.82)!important
}
html body :is(#recruitment-grid,#my-recruitments-grid) .recruit-card button:is(.report-button,.channel-button):hover>span{
  color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.72)!important
}

/* 2026-07-22 publish5: reference-aligned three-step recruitment wizard. */
#publish-modal .publish-step-page[data-publish-page="1"]{
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  gap:10px!important;
  padding:2px 2px 34px!important
}
#publish-modal .publish-step-page[data-publish-page="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  align-content:start!important;
  gap:12px!important;
  padding:2px 2px 146px!important
}
#publish-modal .publish-step-intro{
  grid-column:1/-1!important;
  display:grid!important;
  gap:5px!important;
  margin:0 0 4px!important
}
#publish-modal .publish-step-intro p{
  margin:0!important;
  color:#aebbd0!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.15em!important
}
#publish-modal .publish-step-intro h3{
  margin:0!important;
  color:var(--text)!important;
  font-size:clamp(25px,3vw,38px)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  line-height:1.08!important
}
#publish-modal .publish-step-intro span{
  color:var(--muted)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.55!important
}
#publish-modal .publish-step-page[data-publish-page="1"]>:is(.publish-language-field,.publish-region-field,.publish-country-field){
  grid-column:1/-1!important;
  min-width:0!important;
  min-height:0!important;
  padding:8px!important
}
#publish-modal :is(.publish-language-field,.publish-region-field,.publish-country-field)>span{
  display:block!important;
  margin:0 0 6px!important;
  color:#d8e1ee!important;
  font-size:11px!important;
  font-weight:900!important
}
#publish-modal :is(.publish-language-choices,.publish-region-choices){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important
}
#publish-modal :is(.publish-language-choices,.publish-region-choices)>button{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-width:0!important;
  min-height:46px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  border:1px solid rgba(209,229,248,.22)!important;
  border-radius:16px!important;
  background:rgba(10,14,20,.34)!important;
  background-image:none!important;
  color:var(--text)!important;
  font-size:13px!important;
  font-weight:900!important
}
#publish-modal :is(.publish-language-choices,.publish-region-choices)>button>:not(.selection-liquid-fill){position:relative!important;z-index:1!important}
#publish-modal :is(.publish-language-choices,.publish-region-choices)>button.selected{
  background:#c2e6ff!important;
  background-image:none!important;
  color:#111923!important;
  border-color:rgba(229,245,255,.9)!important
}
#publish-modal .publish-region-choices>button.selected span{color:#111923!important;text-shadow:none!important}
#publish-modal .publish-country-field .custom-picker{width:100%!important}
#publish-modal .publish-country-field .picker-trigger{min-height:48px!important;border-radius:16px!important}
#publish-modal .publish-geo-hint{display:block!important;margin-top:5px!important;color:var(--muted)!important;font-size:10px!important;font-weight:700!important}
#publish-modal .publish-step-page[data-publish-page="2"]>.publish-step-intro,
#publish-modal .publish-step-page[data-publish-page="2"]>.rank-field{grid-column:1/-1!important}
#publish-modal .publish-step-page[data-publish-page="2"]>label:has(#form-needed),
#publish-modal .publish-step-page[data-publish-page="2"]>.duration-field{grid-column:auto!important}
#publish-modal .publish-step-page.active.publish-page-enter{animation:publish5PageIn .46s cubic-bezier(.18,.82,.22,1)!important}
@keyframes publish5PageIn{from{opacity:0;transform:translate3d(20px,0,0) scale(.992)}to{opacity:1;transform:none}}
@media(max-width:760px){
  #publish-modal .publish-step-page[data-publish-page="2"]{grid-template-columns:minmax(0,1fr)!important;padding-bottom:150px!important}
  #publish-modal :is(.publish-language-choices,.publish-region-choices){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #publish-modal .publish-step-page[data-publish-page="2"]>label:has(#form-needed),
  #publish-modal .publish-step-page[data-publish-page="2"]>.duration-field{grid-column:1!important}
}
@media(max-width:430px){
  #publish-modal .publish-step-intro h3{font-size:24px!important}
  #publish-modal :is(.publish-language-choices,.publish-region-choices)>button{min-height:54px!important;border-radius:14px!important}
}
@media(prefers-reduced-motion:reduce){#publish-modal .publish-step-page.active.publish-page-enter{animation:none!important}}

/* 2026-07-22 motion6: one persistent btn-20 sweep layer, slowed to 580ms.
   The selected class moves the same pseudo element in both directions, so
   option updates never create a second fill layer or restart the whole row. */
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
){
  -webkit-tap-highlight-color:transparent!important;
  -webkit-appearance:button!important;
  appearance:button!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#242424!important;
  background-image:none!important;
  color:#fff!important
}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:-100%!important;
  width:120%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:#c2e6ff!important;
  background-image:none!important;
  pointer-events:none!important;
  opacity:1!important;
  transform:skew(0deg) translateX(-20%)!important;
  transition:transform var(--om-choice-sweep-duration,.58s) ease!important;
  will-change:transform
}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value].selected,
  .launcher-game.is-selected,
  dialog.wizard-simple .wizard-choices button.selected,
  .simple-game-choices button.selected,
  .voice-platform-chooser button[data-voice-platform].selected,
  .voice-platform-buttons button[data-voice-choice].selected,
  .publish-language-choices button.selected,
  .publish-region-choices button.selected
)::before{transform:skew(45deg) translateX(75%)!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
)>:not(.selection-liquid-fill):not(.picker-selection-sweep){position:relative!important;z-index:1!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
) span{color:#fff!important;mix-blend-mode:difference!important;text-shadow:none!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
) :is(b,i,strong,small){color:#fff!important;mix-blend-mode:normal!important;text-shadow:none!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value].selected,
  .launcher-game.is-selected,
  dialog.wizard-simple .wizard-choices button.selected,
  .simple-game-choices button.selected,
  .voice-platform-chooser button[data-voice-platform].selected,
  .voice-platform-buttons button[data-voice-choice].selected,
  .publish-language-choices button.selected,
  .publish-region-choices button.selected
) :is(b,i,strong,small){color:#111923!important}
#publish-modal .publish-region-choices>button.selected span{color:#fff!important;mix-blend-mode:difference!important}
html body .selection-liquid-fill,
html body .picker-selection-sweep{display:none!important}
@media(prefers-reduced-motion:reduce){
  html body.dark :is(.custom-picker .picker-options>button[data-picker-value],.launcher-game,dialog.wizard-simple .wizard-choices button,.simple-game-choices button,.voice-platform-chooser button[data-voice-platform],.voice-platform-buttons button[data-voice-choice],.publish-language-choices button,.publish-region-choices button)::before{transition:none!important}
}

/* 2026-07-22 rank7: picker triggers keep one neutral glass edge. Removing the
   coloured pointer layer prevents the purple/cyan seam visible during press. */
html body .picker-trigger.rdev-liquid-control::before,
html body .custom-picker.open>.picker-trigger.rdev-liquid-control::before,
html body .picker-trigger.rdev-liquid-control:is(:active,.is-pressing,.is-releasing)::before{
  background:transparent!important;
  background-image:none!important;
  opacity:0!important;
  transform:none!important;
  filter:none!important
}
html body .picker-trigger.rdev-liquid-control::after{
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08))!important;
  background-color:transparent!important;
  opacity:.78!important;
  mix-blend-mode:normal!important;
  filter:none!important
}
html body .picker-trigger.rdev-liquid-control:is(:active,.is-pressing,.is-releasing),
html body .custom-picker.open>.picker-trigger.rdev-liquid-control{
  background:rgba(10,14,20,.54)!important;
  background-image:none!important;
  filter:none!important
}

/* 2026-07-22 slider8: viewport notification and reference-matched rank range.
   This file is loaded last so older toast and purple circular-thumb rules cannot
   move the notice back to the centre or repaint the publish control. */
#context-hint,
#context-hint[popover]{
  position:fixed!important;
  inset:max(18px,calc(env(safe-area-inset-top) + 10px)) auto auto 50%!important;
  width:max-content!important;
  max-width:calc(100vw - 24px)!important;
  min-height:42px!important;
  margin:0!important;
  padding:10px 17px!important;
  border:1px solid rgba(211,231,255,.24)!important;
  border-radius:999px!important;
  background:rgba(17,17,22,.94)!important;
  background-image:none!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:850!important;
  line-height:20px!important;
  text-align:center!important;
  white-space:normal!important;
  translate:0 0!important;
  transform:translate3d(-50%,-14px,0) scale(.97)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 14px 34px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
  z-index:2147483647!important
}
#context-hint.show,
#context-hint[popover].show{
  translate:0 0!important;
  transform:translate3d(-50%,0,0) scale(1)!important
}

#publish-modal .rank-field{
  padding:12px 14px 14px!important;
  overflow:visible!important
}
#publish-modal .rank-field>span{
  margin:0 0 4px!important;
  color:#f4f7fb!important;
  font-size:12px!important;
  font-weight:900!important
}
#publish-modal #publish-rank-slider.publish-rank-slider:not(.not-applicable){
  display:block!important;
  width:100%!important;
  min-height:126px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important
}
#publish-modal #publish-rank-slider .publish-range-values{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:28px!important;
  margin:0!important;
  color:#fff!important
}
#publish-modal #publish-rank-slider .publish-range-values>span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:20px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important
}
#publish-modal #publish-rank-slider .publish-range-values>span:last-child{text-align:right!important}
#publish-modal #publish-rank-slider .publish-range-values i{
  color:#aab7c8!important;
  font-size:20px!important;
  font-style:normal!important;
  font-weight:700!important;
  line-height:1!important
}
#publish-modal #publish-rank-slider .publish-dual{
  position:relative!important;
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  overflow:visible!important
}
#publish-modal #publish-rank-slider .publish-dual::before{
  content:""!important;
  position:absolute!important;
  left:20px!important;
  right:20px!important;
  top:21px!important;
  width:auto!important;
  height:6px!important;
  border-radius:999px!important;
  background:rgba(100,111,126,.34)!important;
  background-image:none!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16)!important;
  filter:none!important
}
#publish-modal #publish-rank-slider .publish-dual>span{
  position:absolute!important;
  left:max(20px,var(--low,0%))!important;
  right:max(20px,calc(100% - var(--high,100%)))!important;
  top:21px!important;
  width:auto!important;
  min-width:6px!important;
  height:6px!important;
  border-radius:999px!important;
  background:#00a9ff!important;
  background-image:none!important;
  box-shadow:0 0 10px rgba(0,169,255,.28)!important;
  pointer-events:none!important
}
#publish-modal #publish-rank-slider .publish-dual input{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:48px!important;
  min-height:0!important;
  margin:0!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  pointer-events:none!important
}
#publish-modal #publish-rank-slider .publish-dual input::-webkit-slider-runnable-track{
  height:6px!important;
  border:0!important;
  background:transparent!important
}
#publish-modal #publish-rank-slider .publish-dual input::-webkit-slider-thumb{
  width:40px!important;
  height:24px!important;
  margin-top:-9px!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:999px!important;
  background:#f5f7fa!important;
  background-image:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px #fff!important;
  filter:none!important;
  transform:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  pointer-events:auto!important;
  cursor:grab!important
}
#publish-modal #publish-rank-slider .publish-dual input::-moz-range-track{
  height:6px!important;
  border:0!important;
  background:transparent!important
}
#publish-modal #publish-rank-slider .publish-dual input::-moz-range-thumb{
  width:40px!important;
  height:24px!important;
  border:1px solid rgba(255,255,255,.92)!important;
  border-radius:999px!important;
  background:#f5f7fa!important;
  background-image:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.22),inset 0 1px #fff!important;
  filter:none!important;
  transform:none!important;
  pointer-events:auto!important;
  cursor:grab!important
}
#publish-modal #publish-rank-slider .publish-dual input:active::-webkit-slider-thumb{transform:none!important;cursor:grabbing!important}
#publish-modal #publish-rank-slider .publish-rank-reset{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  margin:6px 0 0!important;
  padding:0 18px!important;
  border:1px solid rgba(211,231,255,.24)!important;
  border-radius:999px!important;
  background:rgba(28,30,31,.9)!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.18)!important;
  font-size:13px!important;
  font-weight:900!important
}
#publish-modal #publish-rank-slider .publish-rank-reset:is(:hover,:focus-visible){
  border-color:rgba(217,238,255,.42)!important;
  background:rgba(35,38,39,.96)!important
}
@media(max-width:760px){
  #publish-modal .rank-field{padding:11px 12px 13px!important}
  #publish-modal #publish-rank-slider.publish-rank-slider:not(.not-applicable){min-height:124px!important}
  #publish-modal #publish-rank-slider .publish-range-values>span{font-size:13px!important}
}

/* 2026-07-22 publish9: one complete, unaccelerated sweep for every publish
   choice.  The larger off-canvas layer keeps the 45deg edge beyond all four
   corners, including narrow/tall options where the original 120% layer could
   leave a visible unfilled corner. */
#publish-modal :is(
  .custom-picker .picker-options>button[data-picker-value],
  .publish-language-choices>button,
  .publish-region-choices>button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice]
){
  --om-choice-sweep-duration:.58s;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:#242424!important;
  background-image:none!important
}
#publish-modal :is(
  .custom-picker .picker-options>button[data-picker-value],
  .publish-language-choices>button,
  .publish-region-choices>button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice]
)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:-175%!important;
  width:200%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:#c2e6ff!important;
  background-image:none!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:skew(0deg) translateX(-20%)!important;
  transition:transform var(--om-choice-sweep-duration) ease!important;
  will-change:transform!important
}
#publish-modal :is(
  .custom-picker .picker-options>button[data-picker-value].selected,
  .publish-language-choices>button.selected,
  .publish-region-choices>button.selected,
  .voice-platform-chooser button[data-voice-platform].selected,
  .voice-platform-buttons button[data-voice-choice].selected
)::before{transform:skew(45deg) translateX(75%)!important}
#publish-modal :is(
  .custom-picker .picker-options>button[data-picker-value],
  .publish-language-choices>button,
  .publish-region-choices>button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice]
)>*{position:relative!important;z-index:2!important}

/* Btn-20 hover sweep for publish actions that are not persistent choices. */
#publish-modal :is(
  .picker-reset,
  .publish-rank-reset,
  .publish-wizard-nav>button,
  .publish-submit
){
  --om-action-sweep-duration:.58s;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  -webkit-tap-highlight-color:transparent!important
}
#publish-modal :is(
  .picker-reset,
  .publish-rank-reset,
  .publish-wizard-nav>button,
  .publish-submit
)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  left:-175%!important;
  width:200%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:#c2e6ff!important;
  background-image:none!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:skew(0deg) translateX(-20%)!important;
  transition:transform var(--om-action-sweep-duration) ease!important;
  will-change:transform!important
}
#publish-modal :is(
  .picker-reset,
  .publish-rank-reset,
  .publish-wizard-nav>button,
  .publish-submit
):is(:hover,:focus-visible)::before{transform:skew(45deg) translateX(75%)!important}
#publish-modal :is(
  .picker-reset,
  .publish-rank-reset,
  .publish-wizard-nav>button,
  .publish-submit
)>span{
  position:relative!important;
  z-index:2!important;
  color:#fff!important;
  mix-blend-mode:difference!important;
  text-shadow:none!important
}

/* Menus choose their direction in JS from their real scroll height.  Keep the
   same measured position for the full 420ms entrance instead of snapping to a
   CSS default between frames. */
#publish-modal .custom-picker.open.picker-positioned>.picker-menu{
  animation-duration:.42s!important;
  animation-timing-function:cubic-bezier(.18,.84,.22,1)!important
}
#publish-modal .custom-picker.open.picker-positioning>.picker-menu{
  visibility:hidden!important;
  opacity:0!important;
  animation:none!important;
  transform:none!important
}
#publish-modal .custom-picker.open.picker-positioned.drop-up>.picker-menu{
  transform-origin:bottom center!important
}
#publish-modal .custom-picker.open.picker-positioned:not(.drop-up)>.picker-menu{
  transform-origin:top center!important
}

/* The menus are fixed in the top layer, so the old 112-150px anti-clipping
   spacers are no longer needed.  Let each desktop step size to its content and
   retain a bounded scroller only when the viewport is genuinely short. */
#publish-modal .publish-form-grid{
  flex:0 1 auto!important;
  padding:2px 10px 4px 4px!important;
  scroll-padding-bottom:12px!important
}
#publish-modal .publish-step-page,
#publish-modal .publish-step-page[data-publish-page="1"],
#publish-modal .publish-step-page[data-publish-page="2"],
#publish-modal .publish-step-page[data-publish-page="3"]{
  padding:2px!important
}
#publish-modal .publish-wizard-nav{
  margin:10px 0 0!important;
  padding:0!important
}
#publish-modal .form-message:empty{
  display:none!important;
  min-height:0!important;
  margin:0!important
}
#publish-modal .publish-submit{margin-top:10px!important}
@media(min-width:761px) and (min-height:650px){
  #publish-modal[open]{height:auto!important;min-height:0!important;max-height:calc(100dvh - 24px)!important}
  #publish-modal .publish-layout{height:auto!important;min-height:0!important;max-height:calc(100dvh - 24px)!important}
  #publish-modal .publish-layout>aside{min-height:0!important;height:auto!important}
  #publish-modal .publish-layout>form{height:auto!important;min-height:0!important;max-height:calc(100dvh - 24px)!important}
  #publish-modal .publish-form-grid{max-height:calc(100dvh - 150px)!important}
}
@media(max-width:760px){
  #publish-modal .publish-form-grid{padding:2px 6px 4px 2px!important;scroll-padding-bottom:10px!important}
  #publish-modal .publish-step-page,
  #publish-modal .publish-step-page[data-publish-page="1"],
  #publish-modal .publish-step-page[data-publish-page="2"],
  #publish-modal .publish-step-page[data-publish-page="3"]{padding:2px!important}
}
@media(prefers-reduced-motion:reduce){
  #publish-modal :is(.custom-picker .picker-options>button[data-picker-value],.publish-language-choices>button,.publish-region-choices>button,.voice-platform-chooser button[data-voice-platform],.voice-platform-buttons button[data-voice-choice],.picker-reset,.publish-rank-reset,.publish-wizard-nav>button,.publish-submit)::before{transition:none!important}
}

/* 2026-07-22 interaction10: selection state is committed immediately, while
   this single persistent layer is free to reverse from its current position.
   Text and artwork never use difference blending, so rapid reversals cannot
   recolour the content as the pale fill passes underneath it. */
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
)::before{
  left:-175%!important;
  width:200%!important
}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
) :is(span,b,i,strong,small){mix-blend-mode:normal!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
).selection-animating :is(span,b,i,strong,small){
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 1px rgba(0,0,0,.8)!important
}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
).selection-animating img{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important
}
#publish-modal .publish-region-choices>button.selected span{color:#111923!important;mix-blend-mode:normal!important}

/* The dialog is a fixed viewport; only the game collection owns scrolling on
   preference step two. This removes the nested page + list scrollbars. */
dialog.wizard-simple[data-simple-step="2"][open]{overflow:hidden!important}
dialog.wizard-simple[data-simple-step="2"]>.wizard-simple-page[data-simple-page="2"].active{
  display:grid!important;
  grid-template-rows:auto auto auto auto minmax(0,1fr)!important;
  align-content:stretch!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important
}
dialog.wizard-simple[data-simple-step="2"] .simple-game-choices{
  min-height:0!important;
  max-height:none!important;
  height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important
}

/* Only the glyph rotates; the reset label and button geometry remain still. */
.lobby-reset-button>span{display:inline-grid!important;place-items:center!important;transform-origin:50% 50%!important}
.lobby-reset-button.reset-spinning>span{animation:overseamateResetIconSpin .72s cubic-bezier(.2,.72,.2,1) both!important}
.lobby-reset-button.reset-spinning>b{animation:none!important;transform:none!important}
@keyframes overseamateResetIconSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.lobby-reset-button.reset-spinning>span{animation:none!important}}

/* 2026-07-22 adaptive11: the publish wizard sizes from its active step on every
   desktop viewport height. Short screens get one bounded form scroller; steps
   with little content no longer inherit a full-height shell or a blank tail. */
@media(min-width:761px){
  #publish-modal[open]{
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important
  }
  #publish-modal .publish-layout{
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 24px)!important;
    align-items:stretch!important
  }
  #publish-modal .publish-layout>aside{
    height:auto!important;
    min-height:0!important;
    max-height:none!important
  }
  #publish-modal .publish-layout>form{
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:hidden!important
  }
  #publish-modal .publish-form-grid{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:calc(100dvh - 142px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important
  }
  #publish-modal .publish-step-page,
  #publish-modal .publish-step-page.active{
    min-height:0!important;
    height:auto!important;
    align-content:start!important
  }
  #publish-modal .publish-wizard-nav{
    flex:0 0 auto!important;
    margin:10px 0 0!important
  }
}

/* The publish range is rendered by the same shared function and the same
   lobby classes as the homepage control. These scoped resets remove the old
   publish-only 20px rail geometry so both instances compute identically. */
#publish-modal #publish-rank-slider:not(.not-applicable){
  min-height:0!important;
  padding:14px!important
}
#publish-modal #publish-rank-slider .lobby-rank-values{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  gap:12px!important
}
#publish-modal #publish-rank-slider .lobby-dual{
  width:auto!important;
  height:48px!important;
  min-height:48px!important;
  margin:2px 8px 0!important
}
#publish-modal #publish-rank-slider .lobby-dual::before{
  left:10px!important;
  right:10px!important;
  top:21px!important;
  height:6px!important;
  border-radius:3px!important;
  background:rgba(120,120,128,.3)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.13)!important
}
#publish-modal #publish-rank-slider .lobby-dual-fill{
  left:var(--low,0%)!important;
  right:auto!important;
  top:21px!important;
  width:calc(var(--high,100%) - var(--low,0%))!important;
  min-width:6px!important;
  height:6px!important;
  border-radius:3px!important;
  background:#0091ff!important;
  box-shadow:0 0 10px rgba(0,145,255,.22)!important
}
#publish-modal #publish-rank-slider .lobby-dual input{
  inset:0!important;
  width:100%!important;
  height:48px!important;
  padding:0!important
}
#publish-modal #publish-rank-slider .lobby-dual input::-webkit-slider-thumb{
  width:40px!important;
  height:24px!important;
  margin-top:-9px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  background:#f7f9fc!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.95)!important
}
#publish-modal #publish-rank-slider .lobby-dual input::-moz-range-thumb{
  width:40px!important;
  height:24px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  background:#f7f9fc!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.95)!important
}

/* 2026-07-22 foreground12: the btn-20 sweep is background-only motion.
   Keep raster artwork and labels in an isolated, unfiltered foreground; old
   liquid rules used difference blending here and visibly inverted them. */
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
){filter:none!important;mix-blend-mode:normal!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
)::before{z-index:0!important;mix-blend-mode:normal!important;filter:none!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
)>:not(.rdev-liquid-glass__warp):not(.rdev-liquid-glass__tint):not(.rdev-liquid-glass__shine):not(.selection-liquid-fill):not(.picker-selection-sweep){
  position:relative!important;z-index:3!important;isolation:isolate!important;
  filter:none!important;mix-blend-mode:normal!important;opacity:1!important;
  text-shadow:none!important;-webkit-text-stroke:0 transparent!important;
  transition:none!important
}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
).selection-animating.selection-animating>:not(.rdev-liquid-glass__warp):not(.rdev-liquid-glass__tint):not(.rdev-liquid-glass__shine):not(.selection-liquid-fill):not(.picker-selection-sweep){
  filter:none!important;mix-blend-mode:normal!important;opacity:1!important;
  text-shadow:none!important;-webkit-text-stroke:0 transparent!important
}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value],
  .launcher-game,
  dialog.wizard-simple .wizard-choices button,
  .simple-game-choices button,
  .voice-platform-chooser button[data-voice-platform],
  .voice-platform-buttons button[data-voice-choice],
  .publish-language-choices button,
  .publish-region-choices button
):not(.selected):not(.is-selected)>:not(img):not(svg):not(.rdev-liquid-glass__warp):not(.rdev-liquid-glass__tint):not(.rdev-liquid-glass__shine){color:#fff!important}
html body.dark :is(
  .custom-picker .picker-options>button[data-picker-value].selected,
  .launcher-game.is-selected,
  dialog.wizard-simple .wizard-choices button.selected,
  .simple-game-choices button.selected,
  .voice-platform-chooser button[data-voice-platform].selected,
  .voice-platform-buttons button[data-voice-choice].selected,
  .publish-language-choices button.selected,
  .publish-region-choices button.selected
)>:not(img):not(svg):not(.rdev-liquid-glass__warp):not(.rdev-liquid-glass__tint):not(.rdev-liquid-glass__shine){
  color:#111923!important;text-shadow:none!important;-webkit-text-stroke:0 transparent!important
}