/* Night, 8looming Jasmine.
   One big map. Brutalist slabs over it in a dark wood: velvet red, neon green, a zigzag floor, fir trees against the night. */
:root {
  --black: #050606;
  --panel: #0c1210;
  --red: #c4121e;
  --red-deep: #7a0a12;
  --neon: #3dff8f;
  --cream: #efe6d2;
  --smoke: #8d948c;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue", sans-serif;
  --mono: "Courier New", Courier, ui-monospace, monospace;
  --b: 4px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--black); color: var(--cream); font: 16px/1.45 var(--mono); overflow: hidden; }
#map { position: fixed; inset: 0; background: var(--black); }

/* velvet curtains down both edges, and the black and white floor */
.curtain {
  position: fixed; top: 0; bottom: 0; width: 12px; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--red-deep) 0 3px, var(--red) 3px 8px, #8f0d16 8px 10px, var(--red-deep) 10px 12px);
  box-shadow: 0 0 18px rgba(196, 18, 30, .55);
}
.curtain.l { left: 0; }
.curtain.r { right: 0; }
.zig, .floor {
  background-color: var(--cream);
  background-image:
    linear-gradient(135deg, var(--black) 25%, transparent 25%),
    linear-gradient(225deg, var(--black) 25%, transparent 25%),
    linear-gradient(315deg, var(--black) 25%, transparent 25%),
    linear-gradient(45deg, var(--black) 25%, transparent 25%);
  background-size: 28px 28px;
  background-position: 14px 0, 14px 0, 0 0, 0 0;
}
.floor { position: fixed; left: 0; right: 0; bottom: 0; height: 24px; z-index: 6; border-top: var(--b) solid var(--red); pointer-events: none; }
.zig { height: 16px; border-bottom: var(--b) solid var(--red); margin: -14px -14px 10px; animation: slide 9s linear infinite; }
@keyframes slide { to { background-position: 42px 0, 42px 0, 28px 0, 28px 0; } }

/* the name, small, over the map */
.top { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 20px; right: 20px; z-index: 4; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.top > * { pointer-events: auto; }
.word { margin: 0; font: 400 clamp(1.25rem, 5.4vw, 2rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; background: rgba(5,6,6,.82); border: 3px solid var(--cream); padding: 6px 10px; box-shadow: 5px 5px 0 var(--red); transform: rotate(-0.6deg); }
.word span { white-space: nowrap; }
.w1 { color: var(--cream); }
.w2 { color: var(--neon); text-shadow: 0 0 8px rgba(61,255,143,.8); animation: flicker 6s infinite; }
.w3 { color: var(--red); }
@keyframes flicker { 0%, 17%, 19%, 22%, 62%, 64%, 100% { opacity: 1; } 18% { opacity: .35; } 21% { opacity: .6; } 63% { opacity: .2; } }

/* map buttons down the right */
.tools { position: fixed; z-index: 4; right: 20px; top: calc(max(10px, env(safe-area-inset-top)) + 64px); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.tools .muted { max-width: 70vw; background: rgba(5,6,6,.85); padding: 4px 8px; margin: 0; font-size: 0.8rem; }
.tools .small.on { background: var(--neon); color: var(--black); border-color: var(--neon); box-shadow: 4px 4px 0 var(--red-deep); }

/* the sheet at the bottom: what she is saying, where she is, and the controls */
.sheet {
  position: fixed; z-index: 4; left: 20px; right: 20px; bottom: 36px;
  background: rgba(12,18,16,.94); border: var(--b) solid var(--cream); box-shadow: 8px 8px 0 var(--red);
  padding: 14px; max-width: 40rem; margin: 0 auto;
}
.status { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.status .small { margin-left: auto; }
.state { font: 400 clamp(1.6rem, 7vw, 2.4rem)/1 var(--display); text-transform: uppercase; color: var(--cream); text-shadow: 3px 3px 0 var(--red-deep); }
.sheet.talking .state { color: var(--neon); text-shadow: 0 0 10px rgba(61,255,143,.6), 3px 3px 0 var(--black); }
.heat { font: bold 0.75rem var(--mono); letter-spacing: 0.06em; background: var(--black); color: var(--smoke); padding: 3px 8px; max-width: 100%; }
.sheet[data-heat="warm"] .heat { color: var(--cream); }
.sheet[data-heat="hot"] .heat { background: var(--neon); color: var(--black); }
.meta { margin: 8px 0 0; font: bold 0.78rem var(--mono); letter-spacing: 0.05em; background: var(--red); color: var(--cream); display: inline-block; padding: 2px 8px; text-transform: uppercase; }
#line {
  margin: 10px 0 12px; font-weight: bold; font-size: clamp(1.05rem, 4.4vw, 1.45rem); line-height: 1.25; color: var(--cream);
  max-height: 24vh; overflow: auto; border-left: 6px solid var(--neon); padding-left: 10px;
}
.controls { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }

button {
  font: 400 clamp(1.1rem, 5vw, 1.5rem)/1 var(--display); letter-spacing: 0.06em;
  background: var(--red); color: var(--cream); border: var(--b) solid var(--cream);
  box-shadow: 6px 6px 0 var(--neon); padding: 12px 6px; cursor: pointer; text-transform: uppercase;
  border-radius: 0; touch-action: manipulation; text-shadow: 2px 2px 0 var(--black);
}
button.alt { background: var(--black); color: var(--neon); border-color: var(--neon); box-shadow: 6px 6px 0 var(--red-deep); font-size: clamp(0.9rem, 3.6vw, 1.1rem); text-shadow: none; }
button:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--neon); }
button:disabled { background: #1a1d1b; color: #5b615a; box-shadow: 4px 4px 0 #2a2e2b; border-color: #3a3f3b; text-shadow: none; cursor: default; }
button.small { font: bold 0.85rem var(--mono); padding: 6px 10px; box-shadow: 4px 4px 0 var(--red); background: var(--black); color: var(--cream); letter-spacing: 0; text-transform: none; text-shadow: none; border-width: 3px; }

/* the settings drawer */
.panel { position: fixed; inset: 0; z-index: 8; background: rgba(5,6,6,.97); overflow: auto; }
.panel[hidden] { display: none; }
.panel-inner { max-width: 38rem; margin: 0 auto; padding: 18px 24px 60px; }
.panel h2 { font: 400 1.3rem/1 var(--display); letter-spacing: 0.1em; color: var(--neon); margin: 22px 0 8px; }
.row { display: flex; gap: 10px; align-items: center; margin: 12px 0 0; font-size: 0.95rem; flex-wrap: wrap; }
.row.stack { flex-direction: column; align-items: stretch; gap: 4px; }
.row label { display: flex; gap: 6px; align-items: center; }
.label { margin: 0 0 4px; font-weight: bold; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--neon); }
.muted { color: var(--smoke); }
input[type="text"], input[type="password"], select {
  font: inherit; padding: 10px; border: 3px solid var(--cream); background: var(--black); color: var(--cream); border-radius: 0; width: 100%;
}
input[type="number"] { font: inherit; padding: 6px; width: 5rem; border: 3px solid var(--cream); background: var(--black); color: var(--cream); border-radius: 0; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--red); flex: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.chip { border: 3px solid var(--smoke); color: var(--smoke); padding: 2px 8px; font-weight: bold; font-size: 0.8rem; }
.chip.on { background: var(--neon); border-color: var(--neon); color: var(--black); }
pre { white-space: pre-wrap; font: 0.78rem/1.4 var(--mono); color: var(--smoke); max-height: 40vh; overflow: auto; margin: 10px 0 0; }
.tribute { margin: 24px 0 0; text-align: center; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--smoke); text-transform: uppercase; }
.credits { margin: 6px 0 0; text-align: center; font-size: 0.7rem; color: var(--smoke); line-height: 1.5; }

/* map: attribution, you, her, and where she is going */
.maplibregl-ctrl-attrib { background: rgba(5,6,6,.8) !important; color: var(--smoke) !important; font: 0.65rem var(--mono) !important; }
.maplibregl-ctrl-attrib a { color: var(--cream) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-ctrl-bottom-right { bottom: 330px !important; }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--neon); border: 3px solid var(--black); animation: me 1.8s ease-out infinite; }
@keyframes me { 0% { box-shadow: 0 0 0 0 rgba(61,255,143,.8); } 100% { box-shadow: 0 0 0 26px rgba(61,255,143,0); } }
.voice-pin { width: 30px; height: 30px; border-radius: 50%; background: var(--red); border: 4px solid var(--cream); box-shadow: 0 0 14px rgba(196,18,30,.9); position: relative; }
.voice-pin span { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: var(--black); color: var(--cream); font: 400 0.75rem/1 var(--display); letter-spacing: 0.12em; padding: 3px 5px; border: 2px solid var(--cream); white-space: nowrap; }
.voice-pin[data-state="at-place"] { animation: pin 2.4s ease-out infinite; }
.voice-pin[data-state="near"] { border-color: var(--smoke); }
@keyframes pin { 0% { box-shadow: 0 0 0 0 rgba(196,18,30,.85); } 100% { box-shadow: 0 0 0 28px rgba(196,18,30,0); } }

@media (prefers-reduced-motion: reduce) { .zig, .w2, .me-dot, .voice-pin[data-state="at-place"] { animation: none; } }
@media (max-width: 420px) {
  .controls { grid-template-columns: 1fr 1fr; }
  #start { grid-column: 1 / 3; }
  .maplibregl-ctrl-bottom-right { bottom: 380px !important; }
}


/* the info box can be hidden: a small bar stays, with start/shut up and a way back */
.sheet.is-hidden { display: none; }
.pill { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); bottom: 36px; display: flex; gap: 8px; align-items: center; background: rgba(12,18,16,.94); border: 3px solid var(--cream); box-shadow: 5px 5px 0 var(--red); padding: 6px 8px; max-width: calc(100vw - 40px); }
.pill[hidden] { display: none; }
.pill-state { font: 400 1rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cream); padding: 0 4px; }
.pill.talking .pill-state { color: var(--neon); }
body.sheet-hidden .maplibregl-ctrl-bottom-right { bottom: 90px !important; }

/* the opening page: a few lines, then the map */
.manifesto { position: fixed; inset: 0; z-index: 20; background: rgba(5,6,6,.99); display: flex; flex-direction: column; justify-content: center; padding: 0 28px; overflow: auto; }
.manifesto[hidden] { display: none; }
.manifesto .zig { position: absolute; top: 0; left: 0; right: 0; margin: 0; }
.manifesto-body { max-width: 34rem; margin: 0 auto; padding: 40px 0; }
.manifesto h2 { font: 400 clamp(2rem, 9vw, 3.4rem)/0.95 var(--display); letter-spacing: 0.08em; color: var(--red); margin: 0 0 18px; text-shadow: 4px 4px 0 var(--red-deep); }
.manifesto p { margin: 0 0 14px; font-size: 1.05rem; }
.manifesto em { color: var(--neon); font-style: normal; text-shadow: 0 0 8px rgba(61,255,143,.7); }
.manifesto .sign { color: var(--smoke); }
.manifesto button { margin-top: 10px; }