/* Settings, the celebration popups, and the effects the settings switch on. */

.ico-settings { background: linear-gradient(135deg, #d4d0c8, #8d887e); border: 1px solid #5a564f; position: relative; border-radius: 2px; }
.ico-settings::after {
  content: "\2699"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #2b2b2b; font-size: 12px; line-height: 1;
}
.shortcut .ico-settings::after { font-size: 24px; }

/* --- the settings window --------------------------------------------- */
.settings-body { max-height: min(68vh, 620px); overflow: auto; }
.settings-body > fieldset { margin: 0 0 12px; border: 1px solid var(--shadow); border-right-color: var(--light); border-bottom-color: var(--light); padding: 9px 11px 11px; }
.settings-body legend { padding: 0 5px; font-weight: 700; }
.settings-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.settings-row .lbl { margin: 0; flex: none; min-width: 150px; }
.settings-row select, .settings-row input[type="text"] { flex: 1; min-width: 150px; }
.settings-row input[type="range"] { flex: 1; min-width: 160px; }
.settings-row output { font-weight: 700; font-variant-numeric: tabular-nums; }
.settings-tele {
  margin: 8px 0 0; padding: 8px; max-height: 190px; overflow: auto;
  background: #fff; box-shadow: var(--sink); font: 11px/1.5 var(--mono); white-space: pre-wrap;
}
.settings-storage { margin: 4px 0 9px; padding-left: 19px; font-size: 11px; line-height: 1.7; }
.settings-storage span { color: #555; }

/*  The special background is not a photograph to be stretched across the
    screen: it is a flat teal field with somebody leaning into the corner.
    So it keeps its proportions, sits bottom-right, and the desktop behind
    it is the same teal, which is what makes the join invisible.          */
#desktop-wallpaper[data-effect="special"] {
  background-color: #16c9bd;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: min(62vw, 880px) auto;
}
@media (max-width: 820px) {
  #desktop-wallpaper[data-effect="special"] { background-size: 150vw auto; }
}

/* --- the congratulations --------------------------------------------- */
.special-pop {
  position: fixed; z-index: 9000; width: min(310px, 76vw);
  background: var(--face); box-shadow: var(--raise), 5px 5px 0 #00000040;
  padding: 0 0 9px; animation: pop-in .17s steps(3, end) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.special-pop .titlebar { margin: 2px; }
.special-pop p { margin: 12px 14px; font-size: 12px; line-height: 1.5; }
.special-pop .dialog-actions { padding: 0 12px; justify-content: flex-end; display: flex; gap: 6px; }
@keyframes pop-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- effects the settings page turns on ------------------------------ */
body.no-animations *, body.no-animations *::before, body.no-animations *::after {
  transition: none !important; animation: none !important;
}
body.scanlines::after {
  content: ""; position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  background: repeating-linear-gradient(0deg, #00000026 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.cursor-trail {
  position: fixed; top: 0; left: 0; z-index: 8500; width: 7px; height: 7px;
  margin: -3px 0 0 -3px; background: var(--navy2); pointer-events: none;
  box-shadow: 0 0 0 1px var(--light);
}
.shortcut .ico { width: calc(32px * var(--icon-scale, 1)); height: calc(32px * var(--icon-scale, 1)); }
.shortcut .desktop-symbol { width: calc(32px * var(--icon-scale, 1)); height: calc(32px * var(--icon-scale, 1)); font-size: calc(27px * var(--icon-scale, 1)); }
body[data-icons="huge"] .shortcut, body[data-icons="large"] .shortcut { font-size: calc(11px * var(--icon-scale, 1)); }

@media (prefers-reduced-motion: reduce) {
  .special-pop { animation: none; }
  .cursor-trail { display: none; }
}