/* Chaos layer: fallbacks (low specificity) + hover chaos. */
:where(.win) { background: var(--paper, #fff); color: var(--ink, #000); border: 3px solid var(--ink, #000); box-shadow: 6px 6px 0 var(--ink, #000); font-family: var(--font-mono, monospace); }
:where(.win-bar) { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--ink, #000); color: var(--yellow, #FFFF00); padding: 4px 8px; font-family: var(--font-display, Impact, sans-serif); text-transform: uppercase; letter-spacing: .04em; }
:where(.win-close) { background: var(--yellow, #FFFF00); color: var(--ink, #000); border: 2px solid var(--paper, #fff); font: inherit; cursor: pointer; min-width: 28px; min-height: 28px; }
:where(.win-body) { padding: 14px; }
:where(.btn-guilt) { background: var(--paper, #fff); color: var(--ink, #000); border: 2px solid var(--ink, #000); box-shadow: 3px 3px 0 var(--ink, #000); font: inherit; padding: 8px 12px; cursor: pointer; }
:where(.hl) { background: var(--yellow, #FFFF00); color: var(--ink, #000); }

#chaosLayer { position: relative; z-index: 900; }
.chaos-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.chaos-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
.chaos-modal .win { position: relative; width: min(480px, 100%); }
.chaos-h { font-family: var(--font-display, Impact, sans-serif); text-transform: uppercase; font-size: 1.6rem; margin: 0 0 8px; }
.chaos-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.chaos-progress { height: 22px; border: 3px solid var(--ink, #000); margin-top: 12px; }
.chaos-progress[hidden] { display: none; }
.chaos-progress span { display: block; height: 100%; background: var(--yellow, #FFFF00); border-right: 3px solid var(--ink, #000); }

/* Non-modal popups sit below the top nav area and never block it. */
.chaos-popup { position: fixed; left: var(--px, 20%); top: calc(90px + var(--py, 0%)); width: min(340px, calc(100vw - 24px)); z-index: 950; }
@media (max-width: 600px) { .chaos-popup { left: 12px; top: auto; bottom: 12px; } }

.chaos-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; background: var(--yellow, #FFFF00); color: #000; border-top: 4px solid #000; padding: 10px 16px; font: 700 .85rem var(--font-mono, monospace); text-transform: uppercase; }
html.chaos-override body { filter: invert(1) hue-rotate(180deg); }
html.chaos-override .chaos-banner { filter: none; }

/* Drop schedule */
.chaos-schedule { list-style: none; margin: 8px 0 0; padding: 0; font: .8rem var(--font-mono, monospace); text-transform: uppercase; }
.chaos-schedule li { border-top: 2px solid var(--ink, #000); padding: 3px 0; }

.chaos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chaos-sq { aspect-ratio: 1; min-height: 64px; padding: 4px; background: var(--paper, #fff); color: var(--ink, #000); border: 3px solid var(--ink, #000); font: 700 .7rem var(--font-mono, monospace); text-transform: uppercase; cursor: pointer; }
.chaos-sq[aria-pressed="true"] { background: var(--ink, #000); color: var(--yellow, #FFFF00); }

/* Deal of the 10 minutes: static block appended after the Home stages, never over the headline or nav. */
.chaos-deal { position: static; padding: 16px; max-width: 420px; }
.chaos-deal-img { display: block; max-width: 100%; height: auto; background: #fff; border: 2px solid var(--ink, #000); margin-bottom: 8px; }
.chaos-deal-name { font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; }
.chaos-deal-price { margin: 0 0 8px; }
.chaos-deal-link { display: inline-block; margin-bottom: 8px; color: inherit; font-weight: 700; text-decoration: underline; }

/* Hover chaos: decorative only. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes chaos-jitter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px) skewX(-2deg); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px) skewX(2deg); } }
    .btn-guilt:hover { animation: chaos-jitter .18s steps(2) infinite; }
}
/* Decorative hovers are instant hard inverts: no transition, no skew. */
.hl, .win-bar, #page-home h1, #page-home h2 { transition: none; }
.hl:hover { background: var(--ink, #000); color: var(--yellow, #FFFF00); }
.btn-guilt:hover { background: var(--ink, #000); color: var(--yellow, #FFFF00); }
.win-bar:hover { filter: invert(1); }
#page-home h1:hover, #page-home h2:hover { filter: invert(1); }
@media (prefers-reduced-motion: reduce) {
    .btn-guilt:hover { animation: none; transform: none; }
}