/* A Situationist layer, applied when <html> has class "debord".
   Sources: Debord & Jorn's "The Naked City" (1957: cut-up map pieces, fat red arrows),
   their "Mémoires" (1959: Jorn's ink blots over collage), the numbered theses of
   "The Society of the Spectacle" (1967), and the dérive itself. Purely visual: no new words. */

/* M1 · Map fragments: a street plan printed inside every fragment, and rougher cut edges */
.debord {
  --streets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%231b1b1f' stroke-opacity='.045' stroke-linecap='round'%3E%3Cpath d='M-10 40 L80 52 L170 38 L270 60' stroke-width='3.2'/%3E%3Cpath d='M30 -10 L44 90 L38 170 L52 270' stroke-width='1.2'/%3E%3Cpath d='M120 -10 L112 80 L126 160 L118 270' stroke-width='2.4'/%3E%3Cpath d='M200 -10 L214 120 L206 270' stroke-width='1.2'/%3E%3Cpath d='M-10 130 L90 118 L180 140 L270 126' stroke-width='1.2'/%3E%3Cpath d='M-10 210 L60 196 L140 220 L270 204' stroke-width='2.2'/%3E%3Cpath d='M44 90 L126 160 L206 270' stroke-width='1'/%3E%3Cpath d='M170 38 L214 120 L270 160' stroke-width='1'/%3E%3Cpath d='M80 52 L90 118 L60 196' stroke-width='.8'/%3E%3Cpath d='M126 160 L180 140 L214 120' stroke-width='.8'/%3E%3Ccircle cx='126' cy='160' r='14' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  --torn-a: polygon(0 7%, 1% 2%, 13% 4%, 21% 0, 33% 3%, 45% 1%, 58% 4%, 70% 0, 82% 3%, 93% 1%, 100% 6%, 99.5% 24%, 100% 41%, 99.375% 60%, 100% 79%, 99.25% 100%, 84% 97%, 71% 100%, 57% 96.5%, 42% 100%, 29% 97%, 15% 100%, 0.75% 96%, 0 82%, 0.5% 63%, 0 44%, 0.625% 25%);
  --torn-b: polygon(0.5% 2%, 16% 5%, 27% 0, 41% 4%, 55% 0, 66% 5%, 79% 1%, 91% 4%, 100% 0, 99.25% 19%, 100% 36%, 99.5% 57%, 100% 74%, 99.5% 92%, 86% 100%, 74% 96%, 60% 100%, 47% 97%, 33% 100%, 21% 96%, 8% 100%, 0 93%, 0.75% 71%, 0 53%, 0.5% 33%, 0 15%);
}
:root.debord[data-theme="dark"].no-light-streets { --streets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23ecebef' stroke-opacity='.04' stroke-linecap='round'%3E%3Cpath d='M-10 40 L80 52 L170 38 L270 60' stroke-width='3.2'/%3E%3Cpath d='M30 -10 L44 90 L38 170 L52 270' stroke-width='1.2'/%3E%3Cpath d='M120 -10 L112 80 L126 160 L118 270' stroke-width='2.4'/%3E%3Cpath d='M200 -10 L214 120 L206 270' stroke-width='1.2'/%3E%3Cpath d='M-10 130 L90 118 L180 140 L270 126' stroke-width='1.2'/%3E%3Cpath d='M-10 210 L60 196 L140 220 L270 204' stroke-width='2.2'/%3E%3Cpath d='M44 90 L126 160 L206 270' stroke-width='1'/%3E%3Cpath d='M170 38 L214 120 L270 160' stroke-width='1'/%3E%3Ccircle cx='126' cy='160' r='14' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); }
.debord .frag { background-image: var(--streets); background-size: 260px 260px; clip-path: var(--torn-a); }
.debord .frag-wrap:nth-of-type(even) .frag, .debord .clipping:nth-of-type(even) .frag { clip-path: var(--torn-b); background-position: 130px 70px; }
.debord .clipping .frag { padding: 30px 30px 26px; }

/* M2 · Naked City arrows: fat, red, overprinted (colour and filter set in game.js) */
.debord .chainmap svg.arrows path[stroke] { mix-blend-mode: multiply; }
:root.debord[data-theme="dark"] .chainmap svg.arrows path[stroke] { mix-blend-mode: normal; }

/* M3 · Dérive: the progress bar becomes a wandering route through the round */
.derive { display: none; }
.debord .pips { display: none; }
.debord .derive { display: block; width: 100%; height: 46px; margin: -2px 0 14px; overflow: visible; }
.derive .route { fill: none; stroke: var(--mark); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.derive .walked { fill: none; stroke: var(--mark); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.derive circle { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.5; }
.derive circle.done { fill: var(--mark); stroke: var(--mark); }
.derive circle.now { fill: var(--mark); stroke: var(--paper); stroke-width: 3; r: 8; }

/* M4 · Theses: each card carries its number, like the numbered paragraphs of The Society of the Spectacle */
.thesis-no { display: none; }
.debord .thesis-no { display: block; font-family: var(--serif); font-weight: 300; font-size: 7rem; line-height: .8; color: var(--ink); opacity: .16; position: absolute; right: -24px; margin-top: -34px; pointer-events: none; z-index: 2; mix-blend-mode: multiply; font-size: 9rem; }
.debord main { position: relative; }
.debord .clipping { position: relative; z-index: 1; }

/* M6 · Redactions as torn black tape */
.debord .redact { filter: url(#tape); padding: 0 .2em; margin: 0 -.05em; }

/* M7 · Collage: chain fragments scatter and overlap like pasted pieces */
.debord .chainmap .cols { gap: 18px 120px; }
.debord .chainmap .col { gap: 8px; }
.debord .chainmap .frag-wrap:nth-child(3n+1) .node { transform: rotate(-3deg) translateX(-6px); }
.debord .chainmap .frag-wrap:nth-child(3n+2) .node { transform: rotate(2.4deg) translateX(10px); }
.debord .chainmap .frag-wrap:nth-child(3n) .node { transform: rotate(-1deg) translateX(2px); }
.debord .chainmap .node.now { transform: rotate(1.5deg) scale(1.06); }


/* ---------- gray ground, red arrows (second pass) ---------- */
/* A mid-gray ground: the white map fragments read as pieces cut and laid down on it. */
:root.debord {
  --paper: #cfcdc8;
  --ink-2: #34343a;
  --ink-3: #4c4c54;
  --rule: #b3b1ab;
  --mark: #d1241a;
}
/* Dark mode: charcoal ground; the white fragments and answer slips keep dark ink (picked option 1C). */
:root.debord[data-theme="dark"] { --paper: #34343a; --frag: #ffffff; --ink: #f1f0ec; --ink-2: #d9d8d3; --ink-3: #b9b8b2; --rule: #56565e; --bar: #111114; --mark: #ff4b3e; --grid: rgba(27, 27, 31, .045); }
:root.debord[data-theme="dark"] .frag,
:root.debord[data-theme="dark"] .choice,
:root.debord[data-theme="dark"] .btn.secondary,
:root.debord[data-theme="dark"] .share-text,
:root.debord[data-theme="dark"] .copy-row input,
:root.debord[data-theme="dark"] .icon-button { --ink: #1b1b1f; --ink-2: #34343a; --ink-3: #55555c; color: #1b1b1f; }
:root.debord[data-theme="dark"] .btn { background: #f1f0ec; color: #1b1b1f; border-color: #f1f0ec; }
:root.debord[data-theme="dark"] .btn:hover { background: var(--mark); border-color: var(--mark); color: #1b1b1f; }
.debord .choice, .debord .share-text, .debord .copy-row input, .debord .icon-button { background: var(--frag); }
.debord .btn.secondary { background: var(--frag); }

/* The header: viridis arcs give way to overlapping Naked City arrows. */
.naked-arrows { display: none; }
.debord .arcs { display: none; }
.debord .naked-arrows { display: block; max-width: 820px; width: 100%; height: 92px; margin: -6px auto -10px; padding: 0 16px; color: var(--mark); overflow: visible; }
.debord .naked-arrows path[stroke-width] { mix-blend-mode: multiply; opacity: .9; }
:root.debord[data-theme="dark"] .naked-arrows path[stroke-width] { mix-blend-mode: screen; }

/* Chain arrows ride over the fragments, overprinting where they cross. */
.debord .chainmap svg.arrows { z-index: 2; }
.debord .chainmap svg.arrows path[stroke] { opacity: .9; }
@media (max-width: 640px) {
  .debord .chainmap .col { gap: 16px; }
  .debord .chainmap .col-label { margin: 0 0 -4px 52px; position: relative; z-index: 3; }
  .debord .chainmap .col .frag-wrap { margin-left: 52px; }
  .debord .chainmap .frag-wrap .node { transform: rotate(-1deg); }
  .debord .chainmap .frag-wrap:nth-child(even) .node { transform: rotate(1deg); }
  .debord .chainmap .node.now { transform: rotate(.6deg); }
}

/* ---------- masthead (picked option 2B: Bulletin) ---------- */
/* Tall two-line serif title, after the Internationale Situationniste bulletin mockup; one big red arrow swept beneath. */
:root.debord .wordmark { font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: -.01em; font-size: 3rem; line-height: .92; }
:root.debord .wordmark span { display: block; color: var(--mark); }
:root.debord .masthead-row { position: relative; z-index: 1; align-items: flex-start; }
:root.debord .naked-arrows { height: 96px; margin-top: -26px; position: relative; z-index: 0; pointer-events: none; }
:root.debord .naked-arrows path[stroke-width]:not(:first-child) { display: none; }
@media (max-width: 520px) {
  :root.debord .wordmark { font-size: 1.75rem; }
  :root.debord .naked-arrows { height: 70px; margin-top: -18px; }
}

/* ---------- redactions (picked option 4C: red tape, darkened toward the gray ground) ---------- */
:root.debord { --tape: #a8352e; }
:root.debord .redact { background: var(--tape); }

/* ---------- progress (picked option 5C: a growing Naked City arrow on an S-shaped route) ---------- */
:root.debord .derive { display: none; }
.grow { display: none; }
:root.debord .grow { display: block; width: 100%; height: 48px; margin: -4px 0 10px; overflow: visible; }
.grow .track { stroke: var(--ink-3); stroke-opacity: .55; stroke-width: 3; stroke-dasharray: 2 8; fill: none; stroke-linecap: round; }
.grow .fat { stroke: var(--mark); stroke-width: 13; fill: none; stroke-linejoin: round; }

/* ---------- year slider (picked option 6B ruler, with the light serif numeral) ---------- */
/* A ruler with a tick per year and a red marker. */
:root.debord input[type=range] {
  -webkit-appearance: none; appearance: none; height: 30px; background: transparent; cursor: pointer;
}
:root.debord input[type=range]::-webkit-slider-runnable-track {
  height: 18px; background:
    linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px calc((100% - 1.5px) / 18)) 0 100% / 100% 10px no-repeat;
}
:root.debord input[type=range]::-moz-range-track {
  height: 18px; background:
    linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px calc((100% - 1.5px) / 18)) 0 100% / 100% 10px no-repeat;
}
:root.debord input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 30px; margin-top: -6px; background: var(--mark); border: 0; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
:root.debord input[type=range]::-moz-range-thumb {
  width: 14px; height: 30px; background: var(--mark); border: 0; border-radius: 0;
}
:root.debord input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* ---------- answer choices (picked option 7A: clean boxes, red selection) ---------- */
:root.debord .choice:has(input:checked) { border-color: var(--mark); box-shadow: inset 5px 0 0 var(--mark); }
:root.debord .choice input { accent-color: var(--mark); }

/* ---------- chain map (picked option 8B: all-red Naked City) ---------- */
:root.debord .chainmap .node { border-top: 0; padding-top: 16px; }
:root.debord .chainmap .node b { font-family: var(--mono); font-weight: 700; font-size: 1.25rem; color: var(--mark); }
:root.debord .chainmap .frag-wrap:nth-child(3n+1) .node { transform: rotate(-4deg) translate(-10px, 6px); }
:root.debord .chainmap .frag-wrap:nth-child(3n+2) .node { transform: rotate(3.2deg) translate(14px, -6px); }
:root.debord .chainmap .node.now { transform: rotate(1.8deg) scale(1.08); box-shadow: 0 0 0 3px var(--ink) inset; }
:root.debord .chainmap .col-label { position: relative; z-index: 3; margin-bottom: 4px; }

/* ---------- answers as map fragments (all guesses and answer tiles) ---------- */
/* A gentler cut than the headline: ragged top and bottom, nearly straight sides. */
:root.debord {
  --torn-slip: polygon(0 8%, 6% 2%, 17% 6%, 29% 0, 42% 5%, 56% 1%, 69% 6%, 83% 0, 94% 5%, 100% 2%, 99.7% 50%, 100% 97%, 89% 100%, 76% 94%, 62% 99%, 48% 95%, 34% 100%, 21% 95%, 8% 100%, 0 95%, .3% 50%);
}
:root.debord .choice {
  border: 0; background-color: var(--frag); background-image: var(--streets); background-size: 260px 260px;
  clip-path: var(--torn-slip); padding: 14px 15px;
}
:root.debord .choices .choice:nth-child(even) { background-position: 130px 60px; transform: rotate(.3deg); }
:root.debord .choices .choice:nth-child(odd) { transform: rotate(-.3deg); }
:root.debord .choice:has(input:checked) { box-shadow: inset 6px 0 0 var(--mark); }
:root.debord .choice.correct { box-shadow: inset 6px 0 0 var(--good); }
:root.debord .choice.wrong { box-shadow: inset 6px 0 0 var(--mark); }
:root.debord .choice:has(input:focus-visible) { box-shadow: inset 0 0 0 3px var(--focus); }