/* ============================================================
   PROJECT MINI-WORLDS
   Shared exhibit layout + per-project scoped palettes
   ============================================================ */

/* ---------- shared exhibit shell ---------- */
.world {
  --accent: var(--gold);
  --w-bg: var(--bg-1);
  --w-surface: var(--bg-2);
  --w-ink: var(--ink);
  --w-ink2: var(--ink-2);
  --w-ink3: var(--ink-3);
  --w-line: var(--line);
  position: relative;
  border-radius: 26px;
  background: var(--w-bg);
  border: 1px solid var(--w-line);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 50px 90px -60px rgba(0,0,0,0.9);
}
.world-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
  align-items: center;
}
.world.flip .world-inner > .w-info { order: 2; }
.world.flip .world-inner > .w-preview { order: 1; }

/* accent edge strip */
.world::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}

/* ---------- info column (shared) ---------- */
.w-info { display: flex; flex-direction: column; gap: 22px; color: var(--w-ink); }
.w-kicker { font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.w-name { font-family: var(--display); font-size: clamp(34px, 5vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 0.96; margin-top: 8px; }
.w-tag { font-size: clamp(16px, 1.8vw, 20px); color: var(--w-ink2); margin-top: 2px; }
.w-thesis { font-size: 16px; line-height: 1.6; color: var(--w-ink2); padding-left: 16px; border-left: 2px solid var(--accent); }

.w-meta { display: flex; flex-direction: column; gap: 12px; }
.w-meta-row { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: center; }
.w-meta-k { font-size: 10px; letter-spacing: 0.14em; color: var(--w-ink3); }
.w-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--w-ink); font-weight: 500; }
.w-statusdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse-a 2.4s infinite; }
@keyframes pulse-a { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.w-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.w-pill { font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--w-line); color: var(--w-ink2); background: color-mix(in srgb, var(--accent) 7%, transparent); white-space: nowrap; }

.w-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.w-col h5 { font-size: 10px; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 7px; }
.w-col p { font-size: 13.5px; line-height: 1.5; color: var(--w-ink2); }

.w-roadmap h5 { font-size: 10px; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 11px; }
.w-roadmap ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.w-roadmap li { display: flex; gap: 11px; align-items: baseline; font-size: 13.5px; color: var(--w-ink); }
.w-roadmap .r-n { font-size: 10px; color: var(--accent); flex: none; }

.w-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.w-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--w-line); color: var(--w-ink2); transition: all .25s var(--ease); white-space: nowrap; }
.w-link span { font-size: 11px; }
.w-link:hover { transform: translateY(-2px); color: var(--w-ink); border-color: var(--accent); }
.w-link.primary { background: var(--accent); border-color: var(--accent); }

/* ---------- preview shell (shared) ---------- */
.w-preview { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pv-hint { font-size: 10.5px; letter-spacing: 0.08em; color: var(--w-ink3); opacity: 0.8; }

/* ============================================================
   1 · LETS  — warm dark native planning
   ============================================================ */
.world.lets {
  --accent: #FFD84A;
  --w-bg: #15120D; --w-surface: #1A1714; --w-line: rgba(255,216,74,0.14);
}
.world.lets .w-link.primary { color: #1A1409; }
.phone {
  width: 290px; max-width: 80vw; border-radius: 42px; padding: 10px;
  background: linear-gradient(180deg, #2a2620, #1a1714);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
}
.phone-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #0a0908; border-radius: 0 0 16px 16px; z-index: 3; }
.phone-screen { background: #0F0E0C; border-radius: 33px; overflow: hidden; padding: 14px 14px 16px; font-family: var(--body); color: #FAF6F1; }
.lets-status { display: flex; justify-content: space-between; font-size: 10px; color: rgba(250,246,241,0.5); padding: 4px 4px 10px; }
.lets-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.lets-back { font-size: 22px; color: rgba(250,246,241,0.6); }
.lets-share { font-size: 9.5px; letter-spacing: 0.1em; color: #FFD84A; background: rgba(255,216,74,0.12); padding: 4px 9px; border-radius: 7px; }
.lets-hero { background: linear-gradient(160deg, #221E19, #1A1714); border: 1px solid rgba(255,216,74,0.12); border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.lets-emoji { font-size: 30px; }
.lets-hero h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; }
.lets-hero p { font-size: 12.5px; color: rgba(250,246,241,0.55); margin-top: 2px; }
.lets-rsvp { display: flex; align-items: center; gap: 7px; margin-top: 13px; }
.rsvp-pill { font-family: var(--mono); font-size: 10px; padding: 4px 8px; border-radius: 999px; }
.rsvp-pill.in { background: rgba(116,224,138,0.16); color: #74E08A; }
.rsvp-pill.maybe { background: rgba(255,168,74,0.16); color: #FFA84A; }
.rsvp-avatars { display: flex; margin-left: auto; }
.rsvp-avatars i { width: 22px; height: 22px; border-radius: 50%; background: #2D2822; border: 1.5px solid #0F0E0C; display: grid; place-items: center; font-size: 9px; font-style: normal; color: #FAF6F1; margin-left: -7px; }
.lets-section-t { font-size: 9px; letter-spacing: 0.12em; color: rgba(250,246,241,0.4); margin-bottom: 9px; }
.lets-votes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.vote-row { display: grid; grid-template-columns: 56px 1fr 18px; gap: 9px; align-items: center; padding: 9px 11px; border-radius: 13px; background: #1A1714; border: 1px solid rgba(255,255,255,0.05); transition: all .2s var(--ease); text-align: left; }
.vote-row:hover { border-color: rgba(255,216,74,0.3); }
.vote-row.lead { background: rgba(255,216,74,0.07); }
.vote-row.you { border-color: #FFD84A; }
.vr-label { font-size: 12.5px; font-weight: 500; }
.vr-bar { height: 6px; border-radius: 999px; background: rgba(250,246,241,0.08); overflow: hidden; }
.vr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FFA84A, #FFD84A); border-radius: 999px; transition: width .4s var(--ease); }
.vr-n { font-size: 11px; color: rgba(250,246,241,0.6); text-align: right; }
.lets-cta { background: #FFD84A; color: #1A1409; text-align: center; padding: 13px; border-radius: 14px; font-weight: 600; font-size: 14px; }

/* ============================================================
   2 · CALL OF THE SIREN — near-black data/music console
   ============================================================ */
.world.siren {
  --accent: #F7931A;
  --w-bg: #0A0A0A; --w-surface: #0E0E0D; --w-line: rgba(247,147,26,0.16);
  --w-ink: #E8E6E1; --w-ink2: rgba(232,230,225,0.66); --w-ink3: rgba(232,230,225,0.4);
}
.world.siren .w-name { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; letter-spacing: -0.01em; }
.world.siren .w-link.primary { color: #0A0A0A; }
.siren-console {
  width: 340px; max-width: 86vw; background: #0A0A0A; border: 1px solid rgba(247,147,26,0.2);
  border-radius: 16px; padding: 16px; position: relative; overflow: hidden;
  font-family: "Inter", sans-serif; color: #E8E6E1;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,1), inset 0 0 60px rgba(247,147,26,0.04);
}
.siren-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.018) 2px 3px); z-index: 5; }
.siren-top { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.12em; color: rgba(232,230,225,0.5); margin-bottom: 16px; }
.siren-rec { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 8px #FF3B30; }
.siren-date { margin-left: auto; color: #E8C547; }
.siren-now { display: grid; grid-template-columns: 54px 1fr 40px; gap: 12px; align-items: center; margin-bottom: 14px; }
.vinyl { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #1a1a1a 28%, #0d0d0d 30%, #1a1a1a 31%, #0d0d0d 46%, #1a1a1a 47%); border: 1px solid rgba(247,147,26,0.25); display: grid; place-items: center; position: relative; }
.vinyl span { width: 16px; height: 16px; border-radius: 50%; background: #F7931A; }
.vinyl.spin { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.siren-event { font-size: 9px; letter-spacing: 0.12em; color: #F7931A; }
.siren-track h4 { font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; line-height: 1; margin: 3px 0; }
.siren-sub { font-size: 11px; color: rgba(232,230,225,0.55); }
.siren-play { width: 40px; height: 40px; border-radius: 50%; background: #F7931A; color: #0A0A0A; font-size: 13px; display: grid; place-items: center; transition: transform .2s; }
.siren-play:hover { transform: scale(1.08); }
.siren-wave { display: flex; align-items: flex-end; gap: 2px; height: 56px; margin-bottom: 6px; }
.siren-wave i { flex: 1; background: linear-gradient(180deg, #F7931A, rgba(247,147,26,0.25)); border-radius: 1px; opacity: 0.55; transition: opacity .3s; }
.siren-wave.playing i { animation: eq 0.7s ease-in-out infinite alternate; opacity: 1; }
.siren-wave.playing i:nth-child(3n) { animation-delay: .12s; }
.siren-wave.playing i:nth-child(3n+1) { animation-delay: .26s; }
.siren-wave.playing i:nth-child(4n) { animation-delay: .4s; }
@keyframes eq { from { transform: scaleY(0.5); } to { transform: scaleY(1.05); } }
.siren-axis { margin-bottom: 14px; }
.siren-scrub { position: relative; height: 3px; border-radius: 999px; background: rgba(232,230,225,0.12); margin-bottom: 9px; }
.sc-fill { position: absolute; left: 0; top: 0; height: 100%; width: 32%; background: #F7931A; border-radius: 999px; }
.sc-knob { position: absolute; top: 50%; left: 32%; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 0 8px rgba(247,147,26,0.8); }
.siren-glyphs { position: relative; height: 16px; }
.siren-glyphs .glyph { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; cursor: help; transition: transform .2s; }
.siren-glyphs .glyph:hover { transform: translateX(-50%) scale(1.4); }
.glyph.g1 { color: #E8C547; } .glyph.g2 { color: #39FF14; } .glyph.g3 { color: #FF3B30; } .glyph.g4 { color: #4ADEDE; }
.siren-list { display: flex; flex-direction: column; gap: 1px; }
.srow { display: grid; grid-template-columns: 22px 1fr 36px; gap: 9px; align-items: center; padding: 7px 8px; border-radius: 7px; font-size: 12px; color: rgba(232,230,225,0.6); }
.srow.active { background: rgba(247,147,26,0.1); color: #E8E6E1; }
.srk { font-size: 10px; color: rgba(232,230,225,0.4); }
.srt { font-size: 10px; text-align: right; color: rgba(232,230,225,0.45); }

/* ============================================================
   3 · MOMENTUM — deep night reflective atlas
   ============================================================ */
.world.momentum {
  --accent: #F5876B;
  --w-bg: #0A0A0E; --w-surface: #14141C; --w-line: rgba(143,180,232,0.16);
  --w-ink: #F2EDE3; --w-ink2: rgba(242,237,227,0.66); --w-ink3: rgba(242,237,227,0.42);
}
.world.momentum::before { background: linear-gradient(180deg, #F5876B, #E8B872); }
.world.momentum .w-name { font-family: "DM Serif Display", serif; font-weight: 400; letter-spacing: -0.01em; }
.mo-glass {
  width: 320px; max-width: 84vw; border-radius: 24px; padding: 18px;
  background: linear-gradient(170deg, rgba(28,28,40,0.9), rgba(14,14,20,0.95));
  border: 1px solid rgba(143,180,232,0.18);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
  color: #F2EDE3; backdrop-filter: blur(10px);
}
.mo-top { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.1em; color: rgba(242,237,227,0.5); margin-bottom: 14px; }
.mo-w { color: #8FB4E8; }
.mo-map { position: relative; height: 130px; border-radius: 16px; overflow: hidden; margin-bottom: 12px;
  background: linear-gradient(135deg, #14141C, #1C1C28);
  background-image: linear-gradient(rgba(143,180,232,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(143,180,232,0.06) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px; border: 1px solid rgba(143,180,232,0.12); }
.mo-route { position: absolute; left: 22%; top: 62%; width: 60%; height: 28%; border-top: 2px dashed rgba(245,135,107,0.6); border-right: 2px dashed rgba(245,135,107,0.6); border-radius: 0 40px 0 0; transform: rotate(-6deg); }
.mo-pin { position: absolute; transform: translate(-50%,-50%); font-size: 17px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); }
.mo-pin.p3 { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%,-62%); } }
.mo-mapnote { position: absolute; left: 10px; bottom: 8px; font-size: 9.5px; color: rgba(242,237,227,0.55); background: rgba(10,10,14,0.5); padding: 3px 7px; border-radius: 6px; }
.mo-timeline { display: flex; gap: 3px; height: 26px; margin-bottom: 14px; }
.mo-seg { border-radius: 7px; display: grid; place-items: center; font-size: 9px; font-family: var(--mono); letter-spacing: 0.05em; }
.mo-seg.home { background: rgba(143,180,232,0.16); color: #8FB4E8; }
.mo-seg.out { background: linear-gradient(90deg, rgba(245,135,107,0.3), rgba(232,184,114,0.3)); color: #E8B872; }
.mo-mood { margin-bottom: 13px; }
.mo-q { font-size: 10px; letter-spacing: 0.08em; color: rgba(242,237,227,0.5); display: block; margin-bottom: 9px; }
.mo-faces { display: flex; gap: 7px; }
.mo-faces button { flex: 1; font-size: 20px; padding: 9px 0; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid transparent; filter: grayscale(0.7) opacity(0.6); transition: all .2s var(--ease); }
.mo-faces button:hover { filter: none; }
.mo-faces button.sel { filter: none; background: rgba(245,135,107,0.14); border-color: rgba(245,135,107,0.5); transform: translateY(-2px); }
.mo-insight { background: linear-gradient(135deg, rgba(245,135,107,0.12), rgba(232,184,114,0.08)); border: 1px solid rgba(245,135,107,0.2); border-radius: 14px; padding: 13px; margin-bottom: 11px; }
.mo-il { font-size: 9px; letter-spacing: 0.14em; color: #E8B872; display: block; margin-bottom: 6px; }
.mo-insight p { font-size: 12.5px; line-height: 1.45; color: rgba(242,237,227,0.85); }
.mo-insight b { color: #F5876B; }
.mo-journal { border-left: 2px solid rgba(143,180,232,0.4); padding-left: 11px; }
.mo-journal .mono { font-size: 9px; color: rgba(242,237,227,0.4); letter-spacing: 0.08em; }
.mo-journal p { font-size: 13px; font-style: italic; color: rgba(242,237,227,0.78); margin-top: 4px; font-family: "DM Serif Display", serif; }

/* ============================================================
   4 · PEAKDEX — LIGHT warm-paper outdoor collection
   ============================================================ */
.world.peakdex {
  --accent: #C68642;
  --w-bg: #F4ECD8; --w-surface: #FBF6E8; --w-line: rgba(26,31,24,0.12);
  --w-ink: #1A1F18; --w-ink2: rgba(26,31,24,0.66); --w-ink3: rgba(26,31,24,0.46);
}
.world.peakdex::before { background: linear-gradient(180deg, #C68642, #0F2818); }
.world.peakdex .w-name { font-family: "DM Serif Display", serif; font-weight: 400; color: #0F2818; }
.world.peakdex .w-thesis { border-left-color: #0F2818; }
.world.peakdex .w-pill { background: rgba(198,134,66,0.12); border-color: rgba(26,31,24,0.12); }
.world.peakdex .w-link { color: rgba(26,31,24,0.7); }
.world.peakdex .w-link.primary { background: #0F2818; border-color: #0F2818; color: #F4ECD8; }
.world.peakdex .w-link:hover { border-color: #C68642; color: #1A1F18; }
.world.peakdex .w-kicker, .world.peakdex .w-col h5, .world.peakdex .w-roadmap h5, .world.peakdex .w-roadmap .r-n { color: #C8512E; }
.world.peakdex .pv-hint { color: rgba(26,31,24,0.5); }

.pk-frame { width: 320px; max-width: 84vw; background: #FBF6E8; border: 1px solid rgba(26,31,24,0.12); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(26,31,24,0.4); font-family: "Outfit", sans-serif; color: #1A1F18; }
.pk-tabs { display: flex; padding: 8px; gap: 6px; background: #F0E7CE; }
.pk-tab { flex: 1; padding: 9px; border-radius: 11px; font-size: 13px; font-weight: 600; color: rgba(26,31,24,0.5); transition: all .2s; }
.pk-tab.active { background: #0F2818; color: #F4ECD8; }
.pk-view { padding: 16px; }
.pk-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pk-ring { width: 58px; height: 58px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(#C68642 0 83%, rgba(26,31,24,0.1) 83% 100%); position: relative; }
.pk-ring::after { content: ""; position: absolute; inset: 6px; background: #FBF6E8; border-radius: 50%; }
.pk-ring span { position: relative; z-index: 1; font-family: var(--mono); font-size: 15px; font-weight: 600; color: #0F2818; }
.pk-ring small { font-size: 10px; color: rgba(26,31,24,0.5); }
.pk-prog-info b { font-family: "DM Serif Display", serif; font-size: 17px; color: #0F2818; display: block; }
.pk-prog-info span { font-size: 11.5px; color: rgba(26,31,24,0.6); font-family: var(--mono); }
.pk-track { height: 5px; border-radius: 999px; background: rgba(26,31,24,0.1); margin-top: 7px; overflow: hidden; }
.pk-track i { display: block; height: 100%; background: linear-gradient(90deg, #C8512E, #C68642, #E0B870); border-radius: 999px; }
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-badge { background: #F4ECD8; border: 1px solid rgba(26,31,24,0.1); border-radius: 13px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; transition: transform .2s var(--ease), box-shadow .2s; position: relative; overflow: hidden; }
.pk-badge:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 20px -8px rgba(26,31,24,0.3); }
.pk-em { font-size: 26px; }
.pk-bn { font-size: 11px; font-weight: 600; line-height: 1.1; }
.pk-el { font-size: 8.5px; color: rgba(26,31,24,0.5); }
.pk-rar { font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; margin-top: 2px; }
.pk-badge.legendary { background: linear-gradient(160deg, #f3e2c0, #FBF6E8); border-color: #7A4A8E; }
.pk-badge.legendary .pk-rar { background: rgba(122,74,142,0.16); color: #7A4A8E; }
.pk-badge.epic .pk-rar { background: rgba(198,134,66,0.18); color: #C68642; }
.pk-badge.rare .pk-rar { background: rgba(155,107,71,0.18); color: #9B6B47; }
.pk-badge.uncommon .pk-rar { background: rgba(91,123,140,0.18); color: #5B7B8C; }
.pk-badge.common .pk-rar { background: rgba(122,136,98,0.18); color: #7A8862; }
.pk-badge.locked { opacity: 0.5; filter: grayscale(0.6); }
.pk-badge.locked .pk-rar { background: rgba(26,31,24,0.1); color: rgba(26,31,24,0.5); }
.pk-profile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.pk-avatar { width: 60px; height: 60px; border-radius: 50%; background: #0F2818; color: #E0B870; display: grid; place-items: center; font-family: "DM Serif Display", serif; font-size: 22px; }
.pk-profile > b { font-family: "DM Serif Display", serif; font-size: 19px; color: #0F2818; }
.pk-profile > .mono { font-size: 10px; letter-spacing: 0.1em; color: #C8512E; }
.pk-stats { display: flex; gap: 10px; margin-top: 12px; width: 100%; }
.pk-stats div { flex: 1; background: #F4ECD8; border: 1px solid rgba(26,31,24,0.1); border-radius: 12px; padding: 12px 6px; text-align: center; }
.pk-stats b { font-family: var(--mono); font-size: 19px; color: #0F2818; display: block; }
.pk-stats span { font-size: 10px; color: rgba(26,31,24,0.55); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .world-inner { grid-template-columns: 1fr; gap: 36px; }
  .world.flip .world-inner > .w-info { order: 1; }
  .world.flip .world-inner > .w-preview { order: 2; }
  .w-preview { order: 2; }
}
@media (max-width: 520px) {
  .w-cols { grid-template-columns: 1fr; }
  .w-meta-row { grid-template-columns: 52px 1fr; }
}