/* EmoPoke Work.105 settings/background presentation and clean fullscreen. */
:root {
  --emopoke-rounded-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN",
    "Hiragino Maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGS丸ゴシックM-PRO",
    "Meiryo", ui-rounded, sans-serif;
}
/* Use available local rounded fonts, no network fetches or font assets. */
html, body, button, input, select, textarea, dialog, option {
  font-family: var(--emopoke-rounded-font);
}
/* Keep the existing gradient brand lockup typography. */
.work-mobile .brand-en, .work-mobile .empty-brand-en {
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}
/* The category navigation already supplies the heading. */
.settings-reworked .settings-v2-detail > .settings-category > summary { display: none !important; }
.settings-reworked #panel-background > .section-heading { display: none !important; }
.settings-reworked #panel-background .background-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 2px 0 12px;
}
.settings-reworked #panel-background .background-grid button {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 91%, var(--accent));
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.settings-reworked #panel-background .background-grid button.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--panel) 79%, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.settings-reworked #panel-background .background-grid .swatch {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 9px;
}
.settings-reworked #panel-background fieldset {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  margin: 10px 0;
}
.settings-reworked #panel-background fieldset legend {
  padding: 0 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.settings-reworked #panel-background fieldset label { margin: 7px 0; }
.settings-reworked #normalBackgroundSettings > label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; min-width: 0; flex-wrap: nowrap;
}
.settings-reworked #normalBackgroundSettings input[type="color"] {
  width: 60px; min-width: 60px; height: 44px; flex: none;
}
.settings-reworked #normalBackgroundSettings input[type="text"] {
  width: min(58%, 170px); min-width: 0;
}
.settings-reworked #panel-background fieldset button { margin: 7px 0; }
.settings-reworked #panel-background [hidden] { display: none !important; }
/* The first full-screen tap keeps the controls; the second removes every overlay. */
body.work-mobile.stage-fullscreen.broadcast-mode #stage .view-actions,
body.work-mobile.stage-fullscreen.broadcast-mode #stage .stage-top,
body.work-mobile.stage-fullscreen.broadcast-mode #stage #stageHint,
body.work-mobile.stage-fullscreen.broadcast-mode #stage #quickPlayPause {
  display: none !important;
}
body.broadcast-mode #stage #view { touch-action: manipulation; }
@media (min-width: 760px) {
  .settings-reworked.settings-v2-selected .settings-v2-title { visibility: hidden; }
  .settings-reworked #panel-background .background-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .settings-reworked #panel-background .background-grid button {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 4px;
    text-align: center;
    font-size: 12px;
  }
}

/* Video background: make the removal action unmistakably a button.
   Scoped to this control so other settings and behavior stay untouched. */
.settings-reworked #panel-background #clearBackgroundVideo {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 12px 0 8px;
  padding: 11px 16px;
  border: 1px solid #e78bad;
  border-radius: 13px;
  background: #94365f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.settings-reworked #panel-background #clearBackgroundVideo:enabled:hover {
  background: #a94170;
}
.settings-reworked #panel-background #clearBackgroundVideo:disabled {
  opacity: 0.42;
  cursor: default;
}

/* 3D lighting OFF: show only the always-effective exposure control. */
#threeDLightingControls[hidden] { display: none !important; }
#threeDLightingControls.lighting-advanced { display: grid; gap: 8px; }
#threeDLightingControls.lighting-advanced .note { margin: 1px 0 5px; }


/* Work.105 quality & motion: same cards, typography and colors as other settings.
   Layout-only grouping. Existing controls remain the original DOM nodes. */
.settings-reworked .quality-settings-group {
  min-width: 0;
  padding: 2px 0 12px;
  margin: 0;
}
.settings-reworked .quality-settings-group + .quality-settings-group {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.settings-reworked .quality-settings-heading {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.settings-reworked .quality-settings-group #qualityControls,
.settings-reworked .quality-settings-group #fpsControls,
.settings-reworked .quality-settings-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  min-width: 0;
}
.settings-reworked .quality-settings-group .control-card {
  margin: 0;
  min-width: 0;
  height: 100%;
}
.settings-reworked .quality-settings-pair {
  margin: 10px 0 0;
  align-items: start;
}
.settings-reworked .quality-settings-unit { min-width: 0; }
.settings-reworked .quality-settings-unit > .note {
  margin: 6px 2px 10px;
}
.settings-reworked .quality-settings-group > .note {
  margin: 8px 2px 10px;
}
.settings-reworked .quality-settings-motion > .check,
.settings-reworked .quality-settings-motion > .slider-label {
  margin: 10px 0;
}
.settings-reworked .quality-settings-motion > .check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel) 91%, var(--accent));
}
.settings-reworked .quality-settings-performance #fpsInfo {
  justify-content: center;
  gap: 5px;
}
.settings-reworked .quality-settings-performance #fpsDetail {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
  .settings-reworked .quality-settings-group #qualityControls,
  .settings-reworked .quality-settings-group #fpsControls,
  .settings-reworked .quality-settings-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}