* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f6f2e8;
  color: #141414;
  font-family: "Courier New", Courier, monospace;
}

#app { position: relative; width: 100vw; height: 100vh; }
#sketch-holder { position: absolute; inset: 0; z-index: 1; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  min-height: 76px;
  padding: 16px 22px 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  z-index: 10;
  pointer-events: none;
}

h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 700;
}

#subtitle {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: rgba(0,0,0,0.62);
  letter-spacing: 0.04em;
}

.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: auto;
}

button, .upload-button {
  border: 1px solid rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.72);
  color: #111;
  padding: 8px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

button:hover, button.active, .upload-button:hover {
  background: #111;
  color: #fff;
}

.legend {
  position: fixed;
  left: 22px;
  bottom: 54px;
  width: 330px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.70);
  z-index: 10;
  backdrop-filter: blur(8px);
}

.legend h2 {
  margin: 0 0 10px 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legend ul { list-style: none; margin: 0; padding: 0; }

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 0;
  font-size: 12px;
  color: rgba(0,0,0,0.74);
}

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.red { background: #d94b3d; }
.blue { background: #2b72b9; }
.violet { background: #7d4fc7; }
.orange { background: #e7892f; }
.black { background: #191919; }
.green { background: #287c55; }

.archive-note {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.22);
  font-size: 11px;
  color: rgba(0,0,0,0.66);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.upload-button {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  pointer-events: auto;
}

.upload-button input {
  display: none;
}

.archive-note small {
  line-height: 1.35;
}

.bottombar {
  position: fixed;
  left: 22px; right: 22px; bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  font-size: 12px;
  color: rgba(0,0,0,0.62);
  letter-spacing: 0.06em;
  pointer-events: none;
}

#counter { font-size: 18px; color: rgba(0,0,0,0.82); }

#no-p5 {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #f6f2e8;
  color: #111;
  padding: 40px;
  font-family: monospace;
}

@media (max-width: 760px) {
  .topbar { flex-direction: column; }
  .controls { justify-content: flex-start; }
  .legend { right: 12px; left: 12px; width: auto; bottom: 54px; }
  h1 { font-size: 18px; }
}


/* --- final patch: mobile + print + archive tools --- */
#exportArchive {
  align-self: flex-start;
  pointer-events: auto;
}

.legend {
  max-height: 48vh;
  overflow: hidden;
}

.legend ul, .archive-note {
  max-height: 28vh;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .topbar {
    padding: 10px 10px 6px 10px;
    gap: 8px;
  }

  .controls {
    gap: 5px;
    max-height: 78px;
    overflow-y: auto;
  }

  button, .upload-button {
    font-size: 9px;
    padding: 6px 7px;
  }

  .legend {
    left: 10px;
    right: 10px;
    bottom: 42px;
    width: auto;
    max-height: 31vh;
    padding: 10px 11px;
  }

  .legend h2 {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .legend li {
    font-size: 10px;
    margin: 4px 0;
  }

  .archive-note {
    font-size: 9px;
    max-height: 16vh;
  }

  #caption, .bottombar {
    font-size: 9px;
  }

  #counter {
    font-size: 13px;
  }
}

@media print {
  .topbar, .legend, .bottombar, #no-p5 {
    display: none !important;
  }
  body { background: #f6f2e8; }
}

/* river-folder-note-preserve-layout */
.river-folder-note {
  display: none;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed rgba(0,0,0,0.20);
  font-size: 10px;
  line-height: 1.35;
  color: rgba(0,0,0,0.64);
}

.river-folder-note.visible {
  display: block;
}

.river-folder-note strong {
  display: block;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

@media (max-width: 760px) {
  .river-folder-note {
    font-size: 9px;
    max-height: 10vh;
    overflow-y: auto;
  }
}

/* FINAL_MODE_SPECIFIC_TEXT_WAVE */
#sketch-holder { opacity: 1 !important; visibility: visible !important; z-index: 1; }
.right-archive-pane {
  position: fixed;
  right: 18px;
  top: 94px;
  bottom: 54px;
  width: min(360px, 28vw);
  z-index: 9;
  overflow: auto;
  pointer-events: auto;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.54);
  backdrop-filter: blur(8px);
  padding: 10px;
}
.right-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 8px 0;
}
.right-mode-image-grid,
.right-archive-image-slot,
.concept-upload-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px,1fr));
  gap: 8px;
}
.right-mode-image-grid img,
.right-archive-image-slot img,
.concept-upload-preview img {
  width: 100%;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
}
figure figcaption,
.archive-thumb figcaption,
.explorer-thumb figcaption,
.right-mode-image-grid figcaption,
.right-archive-grid figcaption,
.archive-side-gallery figcaption,
.right-archive-image-slot figcaption,
.concept-upload-preview figcaption {
  display: none !important;
}
#downloadArchiveJs {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 2px;
  border: 1px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,0.72);
  color: #111;
  padding: 8px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
}
@media (max-width: 900px) {
  .right-archive-pane { display: none; }
}

/* FINAL_CONTROLS_TRACES_TAGS */
body.archive-pane-hidden .right-archive-pane { display: none !important; }
body.photos-bg-off .archive-thumb,
body.photos-bg-off .right-archive-image-slot,
body.photos-bg-off .right-mode-image-grid,
body.photos-bg-off .archive-side-gallery,
body.photos-bg-off .right-archive-grid {
  display: none !important;
}
.photo-tag-target {
  border: 1px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.72);
  color: #111;
  padding: 7px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
}
.method-reader-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 120;
  background: rgba(246,242,232,.82);
  backdrop-filter: blur(10px);
  padding: 5vh 6vw;
}
.method-reader-overlay.visible { display: block; }
.method-reader {
  max-width: 920px;
  max-height: 88vh;
  margin: auto;
  overflow: auto;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 18px;
}
.method-reader header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  padding-bottom: 10px;
}
.method-reader-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.method-reader-content p {
  font-size: 13px;
  line-height: 1.48;
  white-space: normal;
}
.method-reader-content h1 { font-size: 18px; }
.method-reader-content h2 { font-size: 15px; margin-top: 1.2rem; }
.right-archive-pane { will-change: transform; }

/* FINAL_AUDIO_UI_CLEAN_SCREEN */
body.archive-pane-hidden .right-archive-pane { display: none !important; }
body.legend-hidden .legend { display: none !important; }
body.photos-bg-off .archive-thumb,
body.photos-bg-off .right-archive-image-slot,
body.photos-bg-off .right-mode-image-grid,
body.photos-bg-off .archive-side-gallery,
body.photos-bg-off .right-archive-grid {
  display: none !important;
}
.archive-pane-window-controls,
.legend-window-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}
.archive-pane-window-controls button,
.legend-window-controls button {
  padding: 3px 8px;
  font-size: 12px;
}
.photo-tag-target {
  border: 1px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.72);
  color: #111;
  padding: 7px 9px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
}
.method-reader-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 120;
  background: rgba(246,242,232,.82);
  backdrop-filter: blur(10px);
  padding: 5vh 6vw;
}
.method-reader-overlay.visible { display: block; }
.method-reader {
  max-width: 920px;
  max-height: 88vh;
  margin: auto;
  overflow: auto;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  padding: 18px;
}
.method-reader header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.94);
  padding-bottom: 10px;
}
.method-reader-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.method-reader-content p {
  font-size: 13px;
  line-height: 1.48;
}
.method-reader-content h1 { font-size: 18px; }
.method-reader-content h2 { font-size: 15px; margin-top: 1.2rem; }
.sonic-energy-on #sketch-holder canvas {
  transform: translate3d(0, calc(var(--wave-energy, 0) * -0.04px), 0) scale(calc(1 + var(--wave-energy, 0) * 0.00008));
  transform-origin: center;
}

/* FINAL_CLEAN_TITLE_ARCHIVE_PHOTOS_DEFAULT_OFF */
body.archive-pane-hidden .right-archive-pane { display: none !important; }
body.legend-hidden .legend { display: none !important; }
body.photos-bg-off .archive-thumb,
body.photos-bg-off .right-archive-image-slot,
body.photos-bg-off .right-mode-image-grid,
body.photos-bg-off .archive-side-gallery,
body.photos-bg-off .right-archive-grid,
body.photos-bg-off .right-archive-section,
body.photos-bg-off .right-mode-images-section,
body.photos-bg-off .right-archive-image-slot-section {
  display: none !important;
}
.archive-pane-window-controls,
.legend-window-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 6px;
  pointer-events: auto;
}
.archive-pane-window-controls button,
.legend-window-controls button {
  padding: 3px 8px;
  font-size: 12px;
}
.legend-opacity-slider {
  width: 100%;
  margin: 4px 0 8px;
}
#soundUpload,
#uploadedSoundPlayer,
.feature-upload-button[for="soundUpload"] {
  display: none !important;
}
#toggleBackgroundPhotos,
#toggleArchivePane,
#toggleLegendPanel,
#startMicWave,
#playTabSound {
  pointer-events: auto;
}

/* FINAL_LAST_FIXES_UPLOAD_TAGS_PHOTOS */
body.photos-bg-off .archive-thumb,
body.photos-bg-off .right-archive-image-slot,
body.photos-bg-off .right-mode-image-grid,
body.photos-bg-off .archive-side-gallery,
body.photos-bg-off .right-archive-grid,
body.photos-bg-off .right-archive-section,
body.photos-bg-off .right-mode-images-section,
body.photos-bg-off .right-archive-image-slot-section,
body.photos-bg-off img {
  display: none !important;
}
.photo-tag-target {
  display: inline-flex !important;
  width: 100%;
  margin: 6px 0;
}
.upload-button {
  display: inline-flex !important;
}

/* FINAL_RESTORE_CONTROLS_UPLOAD_SCROLL */
.legend {
  max-height: calc(100vh - 115px) !important;
  overflow-y: auto !important;
  padding-bottom: 18px !important;
}
.archive-note {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}
#photoUpload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.upload-button {
  display: inline-flex !important;
  align-self: flex-start !important;
  pointer-events: auto !important;
}
.photo-tag-target {
  display: block !important;
  width: 100% !important;
  margin: 6px 0 !important;
  pointer-events: auto !important;
}
body.archive-pane-hidden .right-archive-pane { display: none !important; }
body.legend-hidden .legend { display: none !important; }
.floating-restore-tab {
  display: none;
  position: fixed;
  z-index: 80;
  left: 22px;
  border: 1px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  backdrop-filter: blur(8px);
}
.floating-restore-tab.visible { display: inline-flex; }
.archive-restore-tab { bottom: 96px; }
.legend-restore-tab { bottom: 58px; }
body.photos-bg-off .right-archive-pane img,
body.photos-bg-off .archive-side-gallery,
body.photos-bg-off .right-mode-image-grid,
body.photos-bg-off .right-archive-grid,
body.photos-bg-off .right-archive-image-slot {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* FINAL_TRACES_PUBLIC_LAB_PHOTOS_TOGGLE */
html[data-photos="off"] img,
body.photos-bg-off .right-archive-pane img,
body.photos-bg-off .archive-side-gallery,
body.photos-bg-off .right-mode-image-grid,
body.photos-bg-off .right-archive-grid,
body.photos-bg-off .right-archive-image-slot,
body.photos-bg-off .right-archive-section,
body.photos-bg-off .right-mode-images-section,
body.photos-bg-off .right-archive-image-slot-section {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.photos-bg-off #photoUpload,
body.photos-bg-off .upload-button,
body.photos-bg-off .photo-tag-target,
body.photos-bg-off .archive-note,
body.photos-bg-off .legend {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.method-reader header span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* FRIEND_GI_WATER_STRINGS_LINK */
.water-strings-link a {
  display: inline-flex;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  margin: 0.25rem 0 0.5rem;
  background: rgba(255,255,255,.66);
  color: inherit;
  text-decoration: none;
  font-size: 11px;
}

/* FINAL_TRACES_LANG_MOTION */
#audioIndicator,
#voiceIndicator,
.feature-indicator {
  display: none !important;
}
.method-reader header span {
  display: none !important;
}
.method-reader-author:empty {
  display: none !important;
}

/* FINAL_TABS_TITLE_PERFORMANCE */
.controls button[data-mode="5"] {
  max-width: 260px;
  white-space: normal;
  line-height: 1.05;
  text-align: left;
}
.method-reader-tabs button[data-method-doc="public"] {
  max-width: 330px;
  white-space: normal;
  line-height: 1.08;
  text-align: left;
}
#sketch-holder canvas {
  will-change: transform;
}
.right-archive-pane,
.legend {
  contain: content;
}

/* FINAL_PUBLIC_METHODOLOGIES_ONLY_TAB */
.controls button[data-mode="5"],
.method-reader-tabs button[data-method-doc="public"] {
  max-width: 220px !important;
}

/* FINAL_MAIN_TEXT_PHOTO_OPACITY */
.right-archive-pane img,
.archive-thumb img,
.right-mode-image-grid img,
.right-archive-grid img,
.archive-side-gallery img,
.right-archive-image-slot img {
  opacity: .42;
  transition: opacity 1200ms ease, filter 1200ms ease, transform 1200ms ease;
  filter: saturate(.82) contrast(.94);
}

body.archive-mode .right-archive-pane img,
body.archive-mode .archive-thumb img,
body.archive-mode .right-archive-grid img,
body.archive-mode .archive-side-gallery img,
body.archive-mode .right-archive-image-slot img,
body[data-mode="4"] .right-archive-pane img,
body[data-mode="4"] .archive-thumb img,
body[data-mode="4"] .right-archive-grid img,
body[data-mode="4"] .archive-side-gallery img,
body[data-mode="4"] .right-archive-image-slot img {
  opacity: .92 !important;
  filter: saturate(1) contrast(1);
}

body.photos-bg-off .right-archive-pane img,
body.photos-bg-off .archive-thumb img,
body.photos-bg-off .right-mode-image-grid img,
body.photos-bg-off .right-archive-grid img,
body.photos-bg-off .archive-side-gallery img,
body.photos-bg-off .right-archive-image-slot img {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity 1400ms ease, filter 1400ms ease;
}

/* FINAL_WYRWA_SIGNATURE */
.method-reader-tabs button[data-method-doc="body"] {
  max-width: 300px;
  white-space: normal;
  line-height: 1.08;
  text-align: left;
}

/* SPECTROGRAM PANEL */
.right-spectrogram-section { margin-top: 12px; }
.right-spectrogram-panel { display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:14px; background: rgba(255,255,255,.42); border:1px solid rgba(0,0,0,.08); }
.spectrogram-image-wrap { min-height:144px; max-height:190px; overflow:hidden; border-radius:12px; background: rgba(0,0,0,.045); display:flex; align-items:center; justify-content:center; }
.spectrogram-image-wrap img { width:100%; height:auto; display:block; opacity:.95; mix-blend-mode:multiply; }
.spectrogram-caption { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:10px; line-height:1.35; }
.spectrogram-caption code, .spectrogram-placeholder code { background: rgba(255,255,255,.66); padding:2px 6px; border-radius:999px; }
.spectrogram-placeholder { font-size:11px; color:rgba(20,20,20,.7); padding:16px; }
.method-reader-author { font-style:italic; letter-spacing:.02em; }
.right-mode-image-grid img, .right-archive-image-slot img, .right-archive-pane img, .archive-side-gallery img, .right-archive-grid img { opacity:.34 !important; transition: opacity 1800ms ease, filter 1800ms ease, transform 1800ms ease; }
body.archive-mode .right-archive-pane img, body.archive-mode .archive-side-gallery img, body.archive-mode .right-archive-grid img, body.archive-mode .right-archive-image-slot img { opacity:.92 !important; }

/* FINAL_PUBLIC_07_WORDPLAY_SPECTROGRAM_FIX */
.bottom-spectrogram-dock {
  position: fixed;
  left: 370px;
  right: 390px;
  bottom: 18px;
  z-index: 12;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(8px);
  padding: 8px 10px;
  pointer-events: auto;
}
.bottom-spectrogram-header {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.bottom-spectrogram-header code {
  text-transform:none;
  background:rgba(255,255,255,.65);
  border-radius:999px;
  padding:1px 7px;
}
.spectrogram-image-wrap {
  height: 96px;
  overflow:hidden;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  display:flex;
  align-items:center;
  justify-content:center;
}
.spectrogram-image-wrap img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:.92;
  mix-blend-mode:multiply;
}
.spectrogram-caption {
  margin-top:5px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:9px;
  line-height:1.25;
  color:rgba(0,0,0,.68);
}
.spectrogram-caption code,
.spectrogram-placeholder code {
  background:rgba(255,255,255,.7);
  border-radius:999px;
  padding:1px 6px;
}
.spectrogram-placeholder {
  font-size:10px;
  color:rgba(0,0,0,.55);
}
.public-word-play-panel {
  display:none;
  position:fixed;
  right:390px;
  top:96px;
  width:min(420px, 32vw);
  max-height:calc(100vh - 245px);
  overflow:auto;
  z-index:13;
  padding:12px;
  border:1px solid rgba(0,0,0,.13);
  border-radius:18px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(8px);
}
.public-word-play-panel.visible { display:block; }
.public-word-header strong {
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.public-word-header span {
  display:block;
  font-size:10px;
  opacity:.68;
  margin-top:3px;
}
.public-word-controls {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0;
}
.public-word-controls button {
  font-size:10px;
  padding:5px 8px;
}
.public-word-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.public-word-token {
  font-size:11px;
  padding:5px 8px;
  background:rgba(255,255,255,.66);
}
.public-word-token.selected {
  background:#111;
  color:#fff;
}
.public-word-history {
  margin-top:10px;
  display:grid;
  gap:6px;
}
.public-word-history article {
  border-left:2px solid rgba(43,114,185,.55);
  background:rgba(255,255,255,.48);
  border-radius:8px;
  padding:6px 8px;
  font-size:10px;
  line-height:1.35;
}
@media (max-width: 980px) {
  .bottom-spectrogram-dock { left:16px; right:16px; bottom:12px; }
  .public-word-play-panel { display:none !important; }
}

/* FINAL_PUBLIC06_FIVE_FACES_SPECTROGRAM_CONTROLS */
.spectrogram-controls {
  display: inline-flex;
  gap: 5px;
  margin-left: auto;
}
.spectrogram-controls button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: rgba(255,255,255,.72);
}
.bottom-spectrogram-dock.spectrogram-minimized {
  width: 280px;
  right: auto;
}
.bottom-spectrogram-dock.spectrogram-minimized .spectrogram-image-wrap,
.bottom-spectrogram-dock.spectrogram-minimized .spectrogram-caption {
  display: none !important;
}
.bottom-spectrogram-dock.spectrogram-hidden {
  display: none !important;
}
.spectrogram-restore-tab {
  bottom: 20px;
}
.public-word-header strong::before {
  content: "";
}
.public-word-token[data-word*="exploitation"],
.public-word-token[data-word*="marginalization"],
.public-word-token[data-word*="powerlessness"],
.public-word-token[data-word*="imperialism"],
.public-word-token[data-word*="violence"],
.public-word-token[data-word*="recognition"] {
  border-color: rgba(0,0,0,.34);
  background: rgba(255,255,255,.78);
}

/* FINAL_EXACT_FIVE_FACES_MAPPING */
.public-word-token {
  white-space: normal !important;
  text-align: left !important;
  max-width: 190px;
  line-height: 1.15;
}
.public-word-history article {
  font-size: 10px;
}

/* FINAL_WAV_SPECTROGRAM_SUPPORT */
.spectrogram-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.72);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
}
#spectrogramAudioUpload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.generated-spectrogram-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spectrogram-placeholder {
  text-align: center;
  line-height: 1.45;
}

/* FINAL_NO_MIC_SIDE_GALLERY_ARCHIVE_FIX */
#startMicWave { display: none !important; }

body:not(.archive-mode) canvas.archive-photo-layer,
body:not(.archive-mode) .central-photo-layer,
body:not(.archive-mode) .text-wave-photo,
body:not(.archive-mode) .background-photo {
  display: none !important;
  opacity: 0 !important;
}

.right-archive-pane {
  right: 18px !important;
  left: auto !important;
  width: 350px !important;
  max-width: 36vw !important;
  z-index: 22 !important;
  pointer-events: auto !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
}

.archive-restore-tab {
  left: auto !important;
  right: 26px !important;
  bottom: 98px !important;
  z-index: 95 !important;
}

.right-mode-image-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 210px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}
.side-gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(0,0,0,.08);
}
.side-gallery-item img,
.right-archive-image-slot img {
  width: 100%;
  display: block;
  object-fit: cover;
  max-height: 120px;
  opacity: .76 !important;
  visibility: visible !important;
  filter: saturate(.88) contrast(.96);
}
body.archive-mode .side-gallery-item img,
body.archive-mode .right-archive-image-slot img {
  opacity: .95 !important;
}
.side-gallery-item figcaption {
  font-size: 9px;
  line-height: 1.2;
  padding: 4px 6px;
  color: rgba(0,0,0,.62);
}
.side-gallery-empty {
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(0,0,0,.55);
  padding: 12px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 12px;
}
@media (max-width: 980px) {
  .right-archive-pane {
    width: min(340px, 92vw) !important;
    max-width: 92vw !important;
  }
}

/* FINAL_STABLE_SIDE_GALLERIES_NO_JUMP */
.right-archive-pane {
  position: fixed !important;
  top: 112px !important;
  right: 18px !important;
  left: auto !important;
  bottom: 116px !important;
  width: 360px !important;
  max-width: 360px !important;
  transform: none !important;
  transition: opacity .18s ease !important;
  overflow: hidden !important;
  z-index: 42 !important;
}
.right-pane-inner {
  height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
.right-mode-image-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  max-height: 330px !important;
  overflow-y: auto !important;
  min-height: 178px !important;
  padding-right: 4px !important;
  contain: layout paint !important;
}
.side-gallery-item {
  margin: 0 !important;
  min-height: 92px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.58) !important;
}
.side-gallery-item img {
  width: 100% !important;
  height: 82px !important;
  max-height: 82px !important;
  object-fit: cover !important;
  display: block !important;
  opacity: .82 !important;
}
.side-gallery-item figcaption {
  font-size: 8px !important;
  line-height: 1.05 !important;
  min-height: 15px !important;
  padding: 3px 4px !important;
}
.right-archive-image-slot {
  min-height: 145px !important;
}
.right-archive-image-slot img {
  width: 100% !important;
  height: 145px !important;
  max-height: 145px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
}
.right-archive-image-slot small {
  display: block;
  font-size: 9px;
  padding-top: 4px;
  opacity: .64;
}
body:not(.archive-mode) .archive-photo-layer,
body:not(.archive-mode) .central-photo-layer,
body:not(.archive-mode) .text-wave-photo,
body:not(.archive-mode) .background-photo,
body:not(.archive-mode) .archive-sprite {
  display: none !important;
  opacity: 0 !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
}
.archive-restore-tab {
  right: 26px !important;
  left: auto !important;
  bottom: 98px !important;
  z-index: 96 !important;
}
@media (max-width: 980px) {
  .right-archive-pane {
    width: min(360px, 92vw) !important;
    max-width: min(360px, 92vw) !important;
    right: 12px !important;
  }
}

/* FINAL_REMOVE_SPECTROGRAM_STATIC_PANEL_GALLERIES */
#bottomSpectrogramDock,
#spectrogramRestoreTab,
.bottom-spectrogram-dock,
.spectrogram-restore-tab,
.spectrogram-upload-button,
#spectrogramAudioUpload {
  display: none !important;
}

.right-archive-pane {
  position: fixed !important;
  top: 112px !important;
  right: 18px !important;
  left: auto !important;
  bottom: 54px !important;
  width: 360px !important;
  max-width: 360px !important;
  transform: none !important;
  transition: opacity .18s ease !important;
  overflow: hidden !important;
  z-index: 42 !important;
}
.right-pane-inner {
  height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
.right-mode-image-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  min-height: 178px !important;
  padding-right: 4px !important;
  contain: layout paint !important;
}
.side-gallery-item {
  margin: 0 !important;
  min-height: 92px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.58) !important;
}
.side-gallery-item img {
  width: 100% !important;
  height: 82px !important;
  max-height: 82px !important;
  object-fit: cover !important;
  display: block !important;
  opacity: .84 !important;
}
.side-gallery-item figcaption {
  font-size: 8px !important;
  line-height: 1.05 !important;
  min-height: 15px !important;
  padding: 3px 4px !important;
}
.right-archive-image-slot {
  min-height: 145px !important;
}
.right-archive-image-slot img {
  width: 100% !important;
  height: 145px !important;
  max-height: 145px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
}
.right-archive-image-slot small {
  display: block;
  font-size: 9px;
  padding-top: 4px;
  opacity: .64;
}
body:not(.archive-mode) .archive-photo-layer,
body:not(.archive-mode) .central-photo-layer,
body:not(.archive-mode) .text-wave-photo,
body:not(.archive-mode) .background-photo,
body:not(.archive-mode) .archive-sprite {
  display: none !important;
  opacity: 0 !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
}
.archive-restore-tab {
  right: 26px !important;
  left: auto !important;
  bottom: 98px !important;
  z-index: 96 !important;
}
@media (max-width: 980px) {
  .right-archive-pane {
    width: min(360px, 92vw) !important;
    max-width: min(360px, 92vw) !important;
    right: 12px !important;
  }
}

/* FINAL_ARCHIVE_GALLERY_WEATHER_MEDIA_REPAIR */
#bottomSpectrogramDock,
#spectrogramRestoreTab,
.bottom-spectrogram-dock,
.spectrogram-restore-tab { display:none !important; }

.right-archive-pane {
  position: fixed !important;
  top: 86px !important;
  right: 16px !important;
  bottom: 52px !important;
  left: auto !important;
  width: 372px !important;
  max-width: 372px !important;
  z-index: 90 !important;
  transform: none !important;
  transition: opacity .15s ease !important;
  overflow: hidden !important;
}
.right-pane-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 18px !important;
}
.archive-pane-window-controls {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
}
.side-gallery-top {
  order: -20 !important;
  margin-top: 0 !important;
}
.right-mode-images-section {
  order: -20 !important;
}
.right-archive-image-slot-section {
  order: -19 !important;
}
.right-weather-sensors-section {
  order: -18 !important;
}
.right-river-media-section {
  order: -17 !important;
}
.right-method-section {
  order: -16 !important;
}
.right-mode-image-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  max-height: 270px !important;
  min-height: 150px !important;
  overflow-y: auto !important;
  contain: layout paint !important;
  padding-right: 4px !important;
}
.side-gallery-item,
.right-mode-image-tile {
  margin: 0 !important;
  min-height: 92px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.58) !important;
}
.side-gallery-item img,
.right-mode-image-tile img {
  width: 100% !important;
  height: 82px !important;
  max-height: 82px !important;
  object-fit: cover !important;
  display: block !important;
  opacity: .86 !important;
}
.side-gallery-item figcaption,
.right-mode-image-tile figcaption {
  font-size: 8px !important;
  line-height: 1.05 !important;
  min-height: 15px !important;
  padding: 3px 4px !important;
}
.right-archive-image-slot {
  min-height: 118px !important;
}
.right-archive-image-slot img {
  width: 100% !important;
  height: 118px !important;
  max-height: 118px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}
.right-upload-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 10px;
  opacity: .75;
}
.right-upload-mini .upload-button {
  padding: 4px 8px !important;
  font-size: 10px !important;
}
.right-live-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.right-live-buttons button,
.right-river-media-links a {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.7);
  padding: 5px 8px;
  font-size: 10px;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  margin: 2px;
}
.right-status-line {
  font-size: 10px;
  opacity: .68;
  margin-bottom: 4px;
}
.right-weather-card,
.right-media-card {
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.54);
  border-radius: 12px;
  padding: 7px;
  margin-bottom: 6px;
  font-size: 10px;
}
.right-weather-card strong,
.right-media-card strong {
  display: block;
  font-size: 11px;
}
.right-weather-card small,
.right-media-card small,
.right-media-card p,
.right-media-card em {
  display: block;
  font-size: 9px;
  opacity: .72;
  margin: 2px 0;
}
.right-hydro-charts {
  font-size: 10px;
  max-height: 210px;
  overflow-y: auto;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
}
@media (max-width: 980px) {
  .right-archive-pane {
    width: min(372px, 92vw) !important;
    max-width: min(372px, 92vw) !important;
    right: 10px !important;
    top: 98px !important;
  }
}

/* FINAL_TITLE_ARCHIVE_TOGGLE_CLICK_GLITCH_GALLERY_VISIBILITY */
#title {
  max-width: 980px !important;
  font-size: clamp(24px, 3.1vw, 48px) !important;
  line-height: .98 !important;
}

.right-mode-image-grid {
  max-height: 430px !important;
  min-height: 230px !important;
  overflow-y: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start !important;
}
.side-gallery-item {
  cursor: zoom-in !important;
  transition: transform .14s ease, filter .14s ease !important;
}
.side-gallery-item:hover {
  transform: translateY(-2px) scale(1.015) !important;
  filter: contrast(1.08) saturate(1.05) !important;
}
.right-archive-image-slot img {
  cursor: zoom-in !important;
}
.archive-restore-tab {
  position: fixed !important;
  right: 24px !important;
  bottom: 86px !important;
  z-index: 120 !important;
  display: none !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.archive-restore-tab.visible,
body.archive-pane-hidden .archive-restore-tab {
  display: block !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
}

.image-glitch-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 8, 10, .72);
  backdrop-filter: blur(10px);
}
.image-glitch-modal.visible {
  display: flex;
}
.image-glitch-card {
  position: relative;
  width: min(88vw, 980px);
  height: min(86vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 18px 34px;
  border-radius: 24px;
  background: rgba(245, 241, 232, .92);
  box-shadow: 0 22px 90px rgba(0,0,0,.36);
  overflow: hidden;
}
#imageGlitchTarget {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 10px 44px rgba(0,0,0,.2);
}
#imageGlitchClose,
#imageGlitchToggle {
  position: absolute;
  top: 12px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
#imageGlitchClose { right: 14px; }
#imageGlitchToggle { left: 14px; }
#imageGlitchCaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  font-size: 11px;
  text-align: center;
  opacity: .68;
}
#imageGlitchTarget.glitching {
  animation: imageGlitchPulse .16s steps(2, end) infinite;
  filter: contrast(1.35) saturate(1.8) hue-rotate(18deg);
  transform: skewX(-1.4deg);
}
@keyframes imageGlitchPulse {
  0% { clip-path: inset(0 0 0 0); transform: translate(0,0) skewX(-1deg); }
  22% { clip-path: inset(8% 0 72% 0); transform: translate(-6px,2px) skewX(2deg); }
  44% { clip-path: inset(36% 0 38% 0); transform: translate(5px,-2px) skewX(-3deg); }
  66% { clip-path: inset(72% 0 8% 0); transform: translate(-2px,4px) skewX(1deg); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0) skewX(0); }
}

/* FINAL_REQUESTED_TITLE_LEGEND_OPEN_ARCHIVE_CLOSED_GLITCH_SOUND */
#title {
  font-size: clamp(20px, 2.7vw, 40px) !important;
  line-height: 1.02 !important;
  max-width: 1040px !important;
}
#soundCreditLine {
  margin: 3px 0 0 !important;
  font-size: clamp(10px, 1vw, 13px) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  opacity: .66 !important;
}
.legend {
  display: block !important;
  opacity: .92 !important;
  pointer-events: auto !important;
}
body.legend-hidden .legend,
.legend.legend-hidden {
  display: block !important;
  opacity: .92 !important;
}
.right-archive-pane {
  position: fixed !important;
  top: 86px !important;
  right: 16px !important;
  bottom: 52px !important;
  width: 372px !important;
  max-width: 372px !important;
  z-index: 90 !important;
  transform: none !important;
  overflow: hidden !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
}
.archive-restore-tab {
  position: fixed !important;
  right: 24px !important;
  bottom: 86px !important;
  z-index: 140 !important;
  display: none !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.archive-restore-tab.visible,
body.archive-pane-hidden .archive-restore-tab {
  display: block !important;
}
.right-mode-image-grid {
  max-height: 430px !important;
  min-height: 230px !important;
  overflow-y: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start !important;
}
.side-gallery-item {
  cursor: zoom-in !important;
}
.side-gallery-item img {
  height: 82px !important;
  object-fit: cover !important;
}
.image-glitch-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7,8,10,.72) !important;
  backdrop-filter: blur(10px) !important;
}
.image-glitch-modal.visible {
  display: flex !important;
}
.image-glitch-card {
  position: relative !important;
  width: min(88vw, 980px) !important;
  height: min(86vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 44px 18px 34px !important;
  border-radius: 24px !important;
  background: rgba(245,241,232,.92) !important;
  box-shadow: 0 22px 90px rgba(0,0,0,.36) !important;
  overflow: hidden !important;
}
#imageGlitchTarget {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  cursor: crosshair !important;
}
#imageGlitchClose,
#imageGlitchToggle {
  position: absolute !important;
  top: 12px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.75) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
#imageGlitchClose { right: 14px !important; }
#imageGlitchToggle { left: 14px !important; }
#imageGlitchCaption {
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 10px !important;
  font-size: 11px !important;
  text-align: center !important;
  opacity: .68 !important;
}
#imageGlitchTarget.glitching {
  animation: deconstructNarrative 0.18s steps(2,end) infinite !important;
  filter: contrast(1.4) saturate(1.9) hue-rotate(22deg) !important;
  mix-blend-mode: multiply !important;
}
.image-glitch-card:has(#imageGlitchTarget.glitching)::before,
.image-glitch-card:has(#imageGlitchTarget.glitching)::after {
  content: "deconstructing narrative / fragment / trace" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  opacity: .38 !important;
  white-space: nowrap !important;
  transform: rotate(-2deg) !important;
}
.image-glitch-card:has(#imageGlitchTarget.glitching)::before { top: 18%; }
.image-glitch-card:has(#imageGlitchTarget.glitching)::after { bottom: 22%; transform: rotate(2deg); }
@keyframes deconstructNarrative {
  0% { clip-path: inset(0 0 0 0); transform: translate(0,0) skewX(0); }
  20% { clip-path: inset(6% 0 78% 0); transform: translate(-8px,2px) skewX(3deg); }
  40% { clip-path: inset(32% 0 42% 0); transform: translate(7px,-2px) skewX(-4deg); }
  60% { clip-path: inset(64% 0 14% 0); transform: translate(-4px,4px) skewX(2deg); }
  80% { clip-path: inset(18% 0 58% 0); transform: translate(5px,1px) skewX(-2deg); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0) skewX(0); }
}

/* FINAL_RIVER_UPLOADED_AUDIO_AUTOSTART */
body.river-audio-on #soundCreditLine::after {
  content: " · river sound playing";
  opacity: .75;
}

/* FINAL_SMALLER_TITLE_SOUND_CATALOGS */
#title {
  font-size: clamp(16px, 2vw, 30px) !important;
  line-height: 1.08 !important;
  max-width: 980px !important;
  letter-spacing: .01em !important;
}
#subtitle {
  font-size: clamp(10px, 1.05vw, 14px) !important;
}
#soundOffButton {
  border-style: dashed !important;
}
body.mode-audio-on #soundCreditLine::after {
  content: " · sound playing";
  opacity: .75;
}

/* FINAL_LAST_FIXES_LEGEND_TITLE_SOUND_RIVER_TEXT */
#title {
  font-size: clamp(14px, 1.55vw, 23px) !important;
  line-height: 1.08 !important;
  max-width: 690px !important;
  letter-spacing: .01em !important;
}
#subtitle {
  font-size: clamp(8px, .82vw, 11px) !important;
  max-width: 690px !important;
  letter-spacing: .06em !important;
}
#soundCreditLine,
#odraPartLine,
#soundOffButton,
#toggleBackgroundPhotos { display: none !important; }

.legend.legend-hidden,
body.legend-hidden .legend {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.legend-restore-tab {
  position: fixed !important;
  left: 24px !important;
  bottom: 86px !important;
  z-index: 160 !important;
  display: none !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.84) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.legend-restore-tab.visible,
body.legend-hidden .legend-restore-tab {
  display: block !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.archive-restore-tab.visible,
body.archive-pane-hidden .archive-restore-tab {
  display: block !important;
}
#playTabSound {
  font-weight: 650 !important;
}

/* FINAL_RIVER_POEMS_TITLE_STABLE */
#title {
  font-size: clamp(14px, 1.5vw, 22px) !important;
  max-width: 660px !important;
}

/* FINAL_RIVER_SZYMBORSKA_BORGES_3_LANGS */
#title {
  font-size: clamp(14px, 1.5vw, 22px) !important;
  max-width: 660px !important;
}

/* FINAL_SERVER_SAFE_IMAGE_PATHS */
.image-load-error {
  min-height: 72px !important;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.08), rgba(0,0,0,.08) 6px, rgba(255,255,255,.18) 6px, rgba(255,255,255,.18) 12px) !important;
  border: 1px dashed rgba(0,0,0,.25) !important;
}
.image-error-note {
  display: block !important;
  font-size: 9px !important;
  opacity: .7 !important;
  padding: 4px !important;
}

/* FINAL_ARCHIVE_PREFILL_AND_SOUND_FIX */
.right-mode-image-grid {
  min-height: 240px !important;
  max-height: 440px !important;
  overflow-y: auto !important;
  align-content: start !important;
}
.side-gallery-item img {
  display: block !important;
  width: 100% !important;
  height: 84px !important;
  object-fit: cover !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.archive-restore-tab.visible,
body.archive-pane-hidden .archive-restore-tab {
  display: block !important;
}
.legend.legend-hidden,
body.legend-hidden .legend {
  display: none !important;
}
.legend-restore-tab.visible,
body.legend-hidden .legend-restore-tab {
  display: block !important;
}

/* PATCH_ONLY_ENCOUNTERS_ARCHIVE_GLITCH */
.right-mode-images-section .right-section-title::first-letter {
  text-transform: uppercase;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.archive-restore-tab {
  position: fixed !important;
  right: 24px !important;
  bottom: 86px !important;
  z-index: 180 !important;
  display: none !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.archive-restore-tab.visible,
body.archive-pane-hidden .archive-restore-tab {
  display: block !important;
}
body.legend-hidden .legend,
.legend.legend-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.legend-restore-tab {
  position: fixed !important;
  left: 24px !important;
  bottom: 86px !important;
  z-index: 180 !important;
  display: none !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}
.legend-restore-tab.visible,
body.legend-hidden .legend-restore-tab {
  display: block !important;
}
.right-mode-image-grid {
  min-height: 260px !important;
  max-height: 440px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-content: start !important;
}
.side-gallery-item {
  cursor: zoom-in !important;
}
.side-gallery-item img {
  display: block !important;
  width: 100% !important;
  height: 84px !important;
  object-fit: cover !important;
}
.image-glitch-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7,8,10,.72) !important;
  backdrop-filter: blur(10px) !important;
}
.image-glitch-modal.visible {
  display: flex !important;
}
.image-glitch-card {
  position: relative !important;
  width: min(88vw, 980px) !important;
  height: min(86vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 44px 18px 34px !important;
  border-radius: 24px !important;
  background: rgba(245,241,232,.92) !important;
  box-shadow: 0 22px 90px rgba(0,0,0,.36) !important;
  overflow: hidden !important;
}
#imageGlitchTarget {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  cursor: crosshair !important;
}
#imageGlitchClose,
#imageGlitchToggle {
  position: absolute !important;
  top: 12px !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.75) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
#imageGlitchClose { right: 14px !important; }
#imageGlitchToggle { left: 14px !important; }
#imageGlitchCaption {
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 10px !important;
  font-size: 11px !important;
  text-align: center !important;
  opacity: .68 !important;
}
#imageGlitchTarget.glitching {
  animation: deconstructNarrativePatch .18s steps(2,end) infinite !important;
  filter: contrast(1.45) saturate(1.9) hue-rotate(22deg) !important;
}
@keyframes deconstructNarrativePatch {
  0% { clip-path: inset(0 0 0 0); transform: translate(0,0) skewX(0); }
  20% { clip-path: inset(6% 0 78% 0); transform: translate(-8px,2px) skewX(3deg); }
  40% { clip-path: inset(32% 0 42% 0); transform: translate(7px,-2px) skewX(-4deg); }
  60% { clip-path: inset(64% 0 14% 0); transform: translate(-4px,4px) skewX(2deg); }
  80% { clip-path: inset(18% 0 58% 0); transform: translate(5px,1px) skewX(-2deg); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0) skewX(0); }
}


/* REMOVED_OLD_MOBILE_RESPONSIVE */

/* PATCH_ONLY_STATIC_IMAGES_STARTUP */
.startup-static-image img,
.side-gallery-item.startup-static-image img {
  display: block !important;
  width: 100% !important;
  height: 84px !important;
  object-fit: cover !important;
}
.image-glitch-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7,8,10,.72) !important;
  backdrop-filter: blur(10px) !important;
}
.image-glitch-modal.visible { display: flex !important; }
.image-glitch-card {
  position: relative !important;
  width: min(88vw, 980px) !important;
  height: min(86vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 44px 18px 34px !important;
  border-radius: 24px !important;
  background: rgba(245,241,232,.92) !important;
  overflow: hidden !important;
}
#imageGlitchTarget {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 14px !important;
  cursor: crosshair !important;
}
#imageGlitchClose, #imageGlitchToggle {
  position: absolute !important;
  top: 12px !important;
  z-index: 2 !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.78) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
}
#imageGlitchClose { right: 14px !important; }
#imageGlitchToggle { left: 14px !important; }
#imageGlitchTarget.glitching {
  animation: startupImageGlitch .18s steps(2,end) infinite !important;
  filter: contrast(1.45) saturate(1.9) hue-rotate(22deg) !important;
}
@keyframes startupImageGlitch {
  0% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
  25% { clip-path: inset(8% 0 70% 0); transform: translate(-7px,2px); }
  50% { clip-path: inset(38% 0 38% 0); transform: translate(6px,-2px); }
  75% { clip-path: inset(68% 0 10% 0); transform: translate(-4px,4px); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
}

/* PATCH_ONLY_ENCOUNTERS_ARCHIVE_HARD_FIX */
.right-mode-image-grid {
  min-height: 260px !important;
  max-height: 460px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-content: start !important;
}
.hard-encounter-image,
.side-gallery-item.hard-encounter-image {
  display: block !important;
  margin: 0 !important;
  cursor: zoom-in !important;
}
.hard-encounter-image img {
  display: block !important;
  width: 100% !important;
  height: 92px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
.hard-encounter-image figcaption {
  font-size: 9px !important;
  line-height: 1.1 !important;
  opacity: .72 !important;
}
body.archive-pane-hidden .right-archive-pane,
.right-archive-pane.archive-pane-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.archive-restore-tab.visible,
body.archive-pane-hidden .archive-restore-tab {
  display: block !important;
}
.image-glitch-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(7,8,10,.72) !important;
  backdrop-filter: blur(10px) !important;
}
.image-glitch-modal.visible { display: flex !important; }
@media (max-width: 760px) {
  .right-mode-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: calc(100svh - 220px) !important;
  }
  .hard-encounter-image img { height: 112px !important; }
}

/* PATCH_ONLY_MOBILE_CLICK_FIX_MINIMAL */
@media (max-width: 760px), (pointer: coarse) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body.mobile-click-layout canvas,
  canvas {
    max-width: 100vw !important;
    touch-action: none !important;
  }

  #title, h1.title, .title {
    max-width: calc(100vw - 18px) !important;
    font-size: clamp(15px, 4.8vw, 22px) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  header, .topbar, .mode-buttons, nav {
    z-index: 300 !important;
  }

  header nav,
  .mode-buttons,
  .tabs,
  .mode-nav {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.78) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
  }

  header nav button,
  .mode-buttons button,
  .tabs button,
  [data-mode],
  #playTabSound,
  #languageToggle,
  #savePng,
  #printPage {
    flex: 0 0 auto !important;
    min-width: 54px !important;
    min-height: 38px !important;
    padding: 9px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #playTabSound {
    min-width: 88px !important;
  }

  .archive-restore-tab,
  .legend-restore-tab {
    position: fixed !important;
    z-index: 340 !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 58px) !important;
    top: auto !important;
    display: block !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: blur(14px) !important;
    font-size: 10px !important;
    letter-spacing: .05em !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .legend-restore-tab {
    left: 8px !important;
    right: auto !important;
  }

  .archive-restore-tab {
    right: 8px !important;
    left: auto !important;
  }

  body:not(.legend-hidden) .legend-restore-tab,
  body:not(.archive-pane-hidden) .archive-restore-tab {
    display: none !important;
  }

  .legend,
  #rightArchivePane,
  .right-archive-pane {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: max(72px, calc(env(safe-area-inset-top) + 62px)) !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 106px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: auto !important;
    z-index: 330 !important;
    border-radius: 18px !important;
    background: rgba(248,244,235,.96) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
  }

  body.legend-hidden .legend,
  .legend.legend-hidden,
  body.archive-pane-hidden #rightArchivePane,
  body.archive-pane-hidden .right-archive-pane,
  #rightArchivePane.archive-pane-hidden,
  .right-archive-pane.archive-pane-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .right-mode-image-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: calc(100svh - 230px) !important;
    overflow-y: auto !important;
  }

  .side-gallery-item img,
  .hard-encounter-image img {
    height: 112px !important;
  }

  .image-glitch-card {
    width: calc(100vw - 16px) !important;
    height: calc(100svh - 32px) !important;
    border-radius: 18px !important;
  }

  input, button, select, textarea {
    font-size: 16px !important;
  }
}