/* ==========================================================================
   Y2K.CSS - The "millennium bug" Easter egg (desktop/js/customize/y2k.js): 30 seconds of
   shaking, color glitches, scanlines and fake error boxes. body.y2k-calm (reduced motion)
   keeps the colors and boxes but drops the shaking and flicker.
   ========================================================================== */
body.y2k-glitch > *:not(#y2k-layer) { animation: y2k-shake .18s steps(2) infinite, y2k-colors 1.6s steps(6) infinite; }
body.y2k-calm > *:not(#y2k-layer) { animation: none; filter: invert(1) hue-rotate(180deg) saturate(2.5); }
@keyframes y2k-shake {
    0%   { transform: translate(0, 0) skewX(0); }
    25%  { transform: translate(-4px, 2px) skewX(1deg); }
    50%  { transform: translate(3px, -3px) skewX(-2deg); }
    75%  { transform: translate(-2px, 4px) skewX(1deg); }
    100% { transform: translate(2px, -1px) skewX(0); }
}
@keyframes y2k-colors {
    0%   { filter: none; }
    20%  { filter: hue-rotate(90deg) saturate(3); }
    40%  { filter: invert(1); }
    60%  { filter: hue-rotate(200deg) contrast(1.8); }
    80%  { filter: grayscale(1) contrast(2); }
    100% { filter: none; }
}
#y2k-layer { position: fixed; inset: 0; z-index: 10000000; pointer-events: none; font-family: 'Courier New', monospace; }
body:not(.y2k-calm) #y2k-layer::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(0,255,0,.12) 0 2px, transparent 2px 5px);
    animation: y2k-roll 1s linear infinite;
}
@keyframes y2k-roll { from { background-position: 0 0; } to { background-position: 0 50px; } }
.y2k-banner {
    position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
    background: #000; color: #39ff14; border: 3px solid #39ff14; padding: 10px 18px; text-align: center;
    font-size: 34px; font-weight: bold; letter-spacing: 3px; text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;
}
.y2k-banner small { display: block; font-size: 13px; letter-spacing: 0; margin-top: 4px; color: #fff; text-shadow: none; }
.y2k-error {
    position: absolute; width: 280px; pointer-events: auto; cursor: pointer;
    background: #c0c0c0; color: #000; font: 12px Tahoma, 'MS Sans Serif', sans-serif;
    border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 2px 2px 0 #000;
}
.y2k-title { display: flex; justify-content: space-between; background: #000080; color: #fff; font-weight: bold; padding: 2px 4px; }
.y2k-title span { background: #c0c0c0; color: #000; padding: 0 4px; border: 1px solid #fff; }
.y2k-body { display: flex; gap: 10px; align-items: center; padding: 10px; }
.y2k-body p { margin: 0; }
.y2k-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #ff0; border: 2px solid #000; text-align: center; font: bold 20px/26px Arial, sans-serif; }
.y2k-ok { text-align: center; padding-bottom: 8px; }
.y2k-ok button { min-width: 70px; font: inherit; background: #c0c0c0; border: 2px solid; border-color: #fff #000 #000 #fff; }

/* Date/Time Properties window (desktop/js/core/sys-clock.js) */
.dt-props { padding: 8px; font-size: 12px; display: flex; flex-direction: column; gap: 8px; }
.dt-props fieldset { border: 2px groove var(--ui-light, #fff); padding: 6px 8px 8px; margin: 0; }
.dt-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
.dt-row input, .dt-props select { font: 12px var(--user-font, Tahoma, sans-serif); }
.dt-props select { width: 100%; }
.dt-note { margin: 0; font-style: italic; opacity: .8; }
.dt-buttons { display: flex; gap: 6px; }
.dt-buttons button { flex: 1; padding: 4px; font-size: 12px; cursor: pointer; }
.dt-main { justify-content: flex-end; }
.dt-main button { flex: 0 0 70px; }

/* Screen-tearing bars (y2k.js tear()) */
.y2k-tear {
    position: absolute; left: 0; right: 0;
    background: repeating-linear-gradient(90deg, rgba(255,0,255,.35) 0 7px, rgba(0,255,255,.35) 7px 13px, rgba(0,0,0,.5) 13px 19px);
    mix-blend-mode: difference; transform: translateX(var(--shift, 0));
    backdrop-filter: invert(1) hue-rotate(90deg);
}