/* --- SYNERGETIC UPGRADE: Wikey CMYK Neon --- */

/* Audio Control */
.syn-sound-toggle {
  background: rgba(10, 10, 15, 0.6); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; padding: 0.45rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.syn-sound-toggle:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0, 255, 255, 0.2); transform: scale(1.05); }
.syn-sound-toggle .snd-on { display: none; }
.syn-sound-toggle.is-active .snd-on { display: block; color: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.syn-sound-toggle.is-active .snd-off { display: none; }
.syn-sound-toggle.is-active { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 255, 255, 0.15) inset; }
.syn-sound { position: relative; display: inline-flex; }
.syn-sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.syn-sound-panel {
  position: absolute; z-index: 1200; top: calc(100% + .55rem); right: 0;
  width: min(260px, 82vw); padding: .85rem; border: 1px solid rgba(0,255,255,.4);
  border-radius: 8px; background: rgba(5,8,13,.97); box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
.syn-sound-panel__head { display:flex; justify-content:space-between; gap:.8rem; margin-bottom:.7rem; font-size:.76rem; }
.syn-sound-panel__head strong { color:var(--cyan); text-transform:uppercase; letter-spacing:.08em; }
.syn-sound-panel label { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.8rem; font-size:.78rem; }
.syn-sound-panel input[type="range"] { width:100%; accent-color:var(--magenta); }
.sr-only {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Global overrides */
body { background-color: var(--bg); font-family: 'Inter', system-ui, sans-serif; }

/* SVG replacing emojis */
.syn-ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.syn-ic--cyan { color: var(--cyan); filter: drop-shadow(0 0 4px var(--cyan)); }
.syn-ic--magenta { color: var(--magenta); filter: drop-shadow(0 0 4px var(--magenta)); }
.syn-ic--yellow { color: var(--yellow); filter: drop-shadow(0 0 4px var(--yellow)); }

/* Buttons */
.syn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.65rem 1.25rem; font-family: 'Orbitron', sans-serif; font-weight: 700;
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 6px; cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); background: rgba(255, 255, 255, 0.02);
}
.syn-btn:hover { transform: translateY(-2px); }
.syn-btn:active { transform: translateY(0); }
.syn-btn--cyan { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 255, 255, 0.08); box-shadow: 0 0 10px rgba(0, 255, 255, 0.15) inset; }
.syn-btn--cyan:hover { background: var(--cyan); color: #000; box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
.syn-btn--magenta { border-color: var(--magenta); color: var(--magenta); background: rgba(255, 0, 170, 0.08); box-shadow: 0 0 10px rgba(255, 0, 170, 0.15) inset; }
.syn-btn--magenta:hover { background: var(--magenta); color: #000; box-shadow: 0 0 20px rgba(255, 0, 170, 0.5); }
.syn-btn--yellow { border-color: var(--yellow); color: var(--yellow); background: rgba(255, 255, 0, 0.08); box-shadow: 0 0 10px rgba(255, 255, 0, 0.15) inset; }
.syn-btn--yellow:hover { background: var(--yellow); color: #000; box-shadow: 0 0 20px rgba(255, 255, 0, 0.5); }

/* Forms & Inputs */
.syn-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; position: relative; }
.syn-field-label { font-size: 0.85rem; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.syn-input, .mnew-field input { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; padding: 0.75rem 1rem !important; color: var(--text) !important; font-size: 1rem !important; transition: all 0.2s !important; outline: none; }
.syn-input:focus, .mnew-field input:focus { border-color: var(--magenta) !important; box-shadow: 0 0 15px rgba(255, 0, 170, 0.25) !important; background: rgba(255, 0, 170, 0.02) !important; }

/* Filter Bar */
.syn-filter { display: flex; align-items: center; gap: 1rem; background: rgba(10, 10, 15, 0.6); border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; backdrop-filter: blur(8px); }
.syn-search { display: flex; align-items: center; gap: 0.5rem; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0.5rem 0.4rem 0.75rem; flex: 1; min-width: 220px; transition: border-color 0.2s; }
.syn-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }
.syn-search input { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--text); flex: 1; margin: 0; outline: none; padding: 0 !important; }
.syn-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.syn-pill { padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--line); transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.syn-pill:hover { border-color: var(--cyan); color: var(--cyan); }
.syn-pill.is-active { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 255, 255, 0.1); box-shadow: 0 0 10px rgba(0, 255, 255, 0.15) inset; }

/* Cards & Layouts */
.syn-hero { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 2rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.syn-hero__title { font-family: 'Orbitron', sans-serif; font-size: 2.8rem; margin: 0; text-transform: uppercase; display: flex; align-items: center; gap: 0.75rem; text-shadow: 0 0 25px rgba(0, 255, 255, 0.4); color: var(--text); }
.syn-hero__sub { margin: 0.5rem 0 0; color: var(--muted); font-size: 1.1rem; max-width: 600px; line-height: 1.5; }
.syn-layout-2col { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; }
@media (max-width: 992px) { .syn-layout-2col { grid-template-columns: 1fr; } }
.syn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.syn-archive {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:-.7rem 0 1.2rem;
}
.syn-archive__item {
  display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.8rem 1rem;
  color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:8px; background:rgba(7,9,13,.75);
}
.syn-archive__item strong { font-family:'Orbitron',sans-serif; font-size:1.15rem; color:var(--text); }
.syn-archive__item:hover, .syn-archive__item.is-on { color:var(--cyan); border-color:var(--cyan); box-shadow:inset 0 0 16px rgba(0,255,255,.08); }
.syn-archive__item--successful:hover, .syn-archive__item--successful.is-on { color:var(--magenta); border-color:var(--magenta); }
.syn-archive__item--history:hover, .syn-archive__item--history.is-on { color:var(--yellow); border-color:var(--yellow); }
@media(max-width:700px){ .syn-archive{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* Constellation Nodes (Cards) */
.syn-card { background: linear-gradient(180deg, rgba(15, 15, 20, 0.8), rgba(10, 10, 12, 0.95)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; }
.syn-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--cyan); opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 15px var(--cyan); }
.syn-card:hover { transform: translateY(-5px); border-color: rgba(0, 255, 255, 0.5); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 255, 0.1); }
.syn-card:hover::before { opacity: 1; }
.syn-card__thumb { aspect-ratio: 16/10; background: #050505; position: relative; overflow: hidden; }
.syn-card__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: transform 0.6s ease, opacity 0.3s; }
.syn-card:hover .syn-card__thumb img { transform: scale(1.08); opacity: 1; }
.syn-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.syn-card__title { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: var(--text); margin: 0 0 0.5rem; line-height: 1.3; font-weight: 700; }
.syn-card__desc { font-size: 0.9rem; color: var(--muted); margin: 0 0 1.25rem; line-height: 1.5; flex: 1; }
.syn-card__meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 1rem; }
.syn-card__stats { display: flex; gap: 1rem; }
.syn-stat { display: flex; align-items: center; gap: 0.3rem; font-family: 'Orbitron', sans-serif; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.syn-card__link { position: absolute; inset: 0; z-index: 1; }

/* Badges */
.syn-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.syn-badge--active { background: rgba(0, 255, 255, 0.1); color: var(--cyan); border: 1px solid rgba(0, 255, 255, 0.3); box-shadow: 0 0 8px rgba(0, 255, 255, 0.1) inset; }
.syn-badge--completed { background: rgba(255, 255, 0, 0.1); color: var(--yellow); border: 1px solid rgba(255, 255, 0, 0.3); box-shadow: 0 0 8px rgba(255, 255, 0, 0.1) inset; }
.syn-badge--successful { background: rgba(255, 0, 170, 0.1); color: var(--magenta); border: 1px solid rgba(255, 0, 170, 0.3); box-shadow: 0 0 8px rgba(255, 0, 170, 0.1) inset; }
.syn-badge--example { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.3); }

/* Leaderboard Sidebar */
.syn-aside__head { font-family: 'Orbitron', sans-serif; font-size: 1.25rem; color: var(--text); margin: 0 0 1.5rem; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.syn-lb { background: linear-gradient(180deg, rgba(20, 20, 25, 0.8), rgba(10, 10, 12, 0.95)); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 1.5rem; overflow: hidden; }
.syn-lb__title { padding: 1rem 1.25rem; font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--line); margin: 0; }
.syn-lb__list { list-style: none; padding: 0; margin: 0; }
.syn-lb__item { padding: 0.85rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); display: flex; align-items: center; gap: 1rem; transition: background 0.2s; position: relative; }
.syn-lb__item:hover { background: rgba(255, 255, 255, 0.05); }
.syn-lb__item:last-child { border-bottom: none; }
.syn-lb__rank { font-family: 'Orbitron', sans-serif; font-size: 1.15rem; font-weight: 900; color: var(--line); width: 28px; text-align: center; }
.syn-lb__item:nth-child(1) .syn-lb__rank { color: var(--yellow); text-shadow: 0 0 12px rgba(255, 255, 0, 0.6); }
.syn-lb__item:nth-child(2) .syn-lb__rank { color: #ddd; text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); }
.syn-lb__item:nth-child(3) .syn-lb__rank { color: #c88; text-shadow: 0 0 10px rgba(200, 136, 136, 0.4); }
.syn-lb__body { flex: 1; min-width: 0; }
.syn-lb__name { display: block; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; font-size: 0.95rem; }
.syn-lb__name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.syn-lb__score { font-family: 'Orbitron', sans-serif; font-weight: 700; color: var(--magenta); text-align: right; }
.syn-lb__val { display: block; font-size: 1rem; text-shadow: 0 0 8px rgba(255, 0, 170, 0.3); }

/* Empty state */
.syn-empty { text-align: center; padding: 5rem 1rem; background: rgba(255, 255, 255, 0.02); border: 1px dashed var(--line); border-radius: 12px; margin-top: 2rem; }
.syn-empty__icon { display: flex; justify-content: center; margin-bottom: 1.5rem; color: var(--line); transform: scale(1.5); }
.syn-empty__title { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: var(--text); margin: 0 0 0.5rem; }
.syn-empty__sub { color: var(--muted); margin: 0; }

/* Editor wrapping */
.syn-editor-wrap { border: 1px solid var(--line); border-radius: 12px; background: rgba(15, 15, 20, 0.7); padding: 2rem; margin-bottom: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); }
.syn-dropzone { border: 2px dashed var(--line) !important; border-radius: 8px !important; background: rgba(0,0,0,0.3) !important; transition: all 0.3s !important; }
.syn-dropzone:hover, .syn-dropzone.is-drag { border-color: var(--cyan) !important; background: rgba(0, 255, 255, 0.05) !important; }
.syn-editor-conflict, .syn-editor-restored {
  margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 8px; line-height:1.45;
}
.syn-editor-conflict { border:1px solid var(--magenta); background:rgba(255,0,170,.1); color:var(--text); }
.syn-editor-restored { border:1px solid var(--cyan); background:rgba(0,255,255,.08); color:var(--text); }
.snew-alt, .mnew-thumb__alt { display:grid; gap:.3rem; padding:.55rem; color:var(--muted); font-size:.72rem; }
.snew-alt input, .mnew-thumb__alt input {
  width:100%; min-width:0; padding:.45rem .55rem; border:1px solid var(--line); border-radius:5px;
  background:rgba(0,0,0,.45); color:var(--text);
}
.mnew-thumb { height:auto!important; min-height:100px; }
.mnew-thumb__alt { grid-column:1/-1; }
.is-plain-editor { display:block; width:100%; min-height:320px; padding:1rem; background:#080a0d; color:var(--text); border:1px solid var(--line); }
.autosave-pill[data-state="conflict"] { color:var(--magenta); border-color:var(--magenta); max-width:540px; }
.syn-journey { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:8px; background:rgba(5,8,13,.7); }
.syn-journey h4 { margin:0 0 .65rem; font-family:'Orbitron',sans-serif; color:var(--cyan); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.syn-journey ol { margin:0; padding-left:1.35rem; display:grid; gap:.4rem; color:var(--muted); font-size:.86rem; }
.syn-journey a { color:var(--magenta); }

/* Detail */
.syn-detail-hero { background: linear-gradient(180deg, rgba(15, 15, 20, 0.9), var(--bg)); border-bottom: 1px solid var(--line); padding: 4rem 1.5rem; text-align: center; position: relative; overflow: hidden; margin-bottom: 2.5rem; }
.syn-detail-title { font-family: 'Orbitron', sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; margin: 0 0 1rem; text-shadow: 0 0 30px rgba(255, 0, 170, 0.5); text-transform: uppercase; line-height: 1.1; }

/* Map legend chips (Explore) */
.lf-chip { background: rgba(15, 15, 20, 0.8); border: 1px solid var(--line); color: var(--muted); border-radius: 20px; padding: 0.45rem 1.1rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.lf-chip:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.lf-chip.is-on, .lf-chip.is-active { background: rgba(0, 255, 255, 0.1); border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0, 255, 255, 0.2) inset; }
.lf-chip__n { background: var(--cyan); color: #000; padding: 0.15rem 0.5rem; border-radius: 12px; font-size: 0.75rem; font-family: 'Orbitron', sans-serif; margin-left: 0.3rem; transition: box-shadow 0.2s; }
.lf-chip.is-on .lf-chip__n { box-shadow: 0 0 10px var(--cyan); }
.syn-impact-modes {
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:.65rem 0 1rem;
  padding:.65rem .75rem; border-left:2px solid var(--magenta); background:rgba(255,0,170,.045);
}
.syn-impact-modes > span { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.syn-impact-modes button {
  border:1px solid var(--line); border-radius:999px; padding:.4rem .75rem; background:rgba(0,0,0,.4);
  color:var(--text); cursor:pointer; font-weight:700; font-size:.76rem;
}
.syn-impact-modes button:hover, .syn-impact-modes button.is-on {
  border-color:var(--magenta); color:var(--magenta); box-shadow:inset 0 0 12px rgba(255,0,170,.12);
}
@media (prefers-reduced-motion: reduce) {
  .syn-card, .syn-btn, .syn-pill, .syn-sound-toggle, .lf-chip { transition:none!important; }
  .syn-card:hover, .syn-btn:hover, .syn-sound-toggle:hover, .lf-chip:hover { transform:none!important; }
}