body{min-height:100vh;padding:0 0 60px;}
.dash-page{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin:0 auto;
    padding:145px 24px 60px;
}

    /* Header */
    .dash-header{text-align:center;margin-bottom:48px;}
    .dash-welcome{font-family:'Cinzel Decorative',serif;font-size:clamp(1.2rem,4vw,2rem);color:#e8e0f0;margin-bottom:8px;text-shadow:0 0 30px rgba(192,132,252,.4);}
    .dash-sub{font-style:italic;color:rgba(232,224,240,.5);font-size:.95rem;}
    .dash-meta{font-family:'Space Mono',monospace;font-size:.6rem;color:rgba(232,224,240,.3);letter-spacing:.12em;margin-top:8px;}

/* Profile section */
:root{
  --parchment:#f4e8c9;
  --ink:#2d1a09;
  --ink-label:#7a4a18;
}

.parchment-surface{
  position:relative;
  background-color:var(--parchment);
  background-image:url('../images/passport-section-panel.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:26px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  color:var(--ink);
}

.profile-hero{
  display:grid;
  grid-template-columns:minmax(220px,280px) 1fr;
  gap:28px;
  align-items:stretch;
  margin-bottom:48px;
}

.profile-photo-card{
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.profile-photo-frame{
  position:relative;
  width:150px;
  height:150px;
  border-radius:50%;
  padding:6px;
  background:conic-gradient(from 180deg,var(--gold),#fff6d8,var(--gold));
  box-shadow:0 0 24px rgba(212,175,55,.35);
  margin-bottom:16px;
}

.profile-photo{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  background:var(--black);
  border:3px solid var(--parchment);
}

.profile-photo-compass{
  position:absolute;
  bottom:-6px;
  right:-6px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--black);
  border:2px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
}

.profile-join-date{
  font-family:'Space Mono',monospace;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-label);
  margin-top:4px;
}

.profile-identity-card{
  padding:32px 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}

.profile-identity-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.profile-display-name{
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--ink);
  line-height:1.2;
}

.profile-username{
  font-family:'Space Mono',monospace;
  font-size:.85rem;
  color:var(--ink-label);
  margin-top:4px;
}

.profile-settings-btn{
  flex-shrink:0;
  border:1px solid rgba(122,74,24,.4);
  background:rgba(255,255,255,.25);
  color:var(--ink);
  font-family:'Space Mono',monospace;
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:50px;
  padding:10px 16px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s, transform .25s;
}

.profile-settings-btn:hover{
  background:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.profile-tagline{
  font-style:italic;
  font-size:.95rem;
  color:var(--ink);
  opacity:.85;
  max-width:520px;
}

.profile-identity-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

.profile-meta-chip{
  font-family:'Space Mono',monospace;
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(255,255,255,.35);
  border:1px solid rgba(122,74,24,.3);
  border-radius:50px;
  padding:6px 14px;
}

@media(max-width:800px){
  .profile-hero{
    grid-template-columns:1fr;
  }

  .profile-identity-card{
    padding:28px 30px;
  }

  .profile-identity-top{
    align-items:center;
  }
}

    /* Stamp Card */
    .stamp-card{background:rgba(255,255,255,.03);border:1px solid rgba(192,132,252,.2);border-radius:24px;padding:32px;margin-bottom:32px;}
    .stamp-card-title{font-family:'Cinzel Decorative',serif;font-size:.85rem;letter-spacing:.15em;color:#c084fc;text-align:center;margin-bottom:8px;}
    .stamp-card-sub{font-style:italic;color:rgba(232,224,240,.45);font-size:.82rem;text-align:center;margin-bottom:28px;}
    .stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;}
    @media(max-width:500px){.stamp-grid{grid-template-columns:repeat(2,1fr);}}
    .stamp-slot{border-radius:16px;padding:16px 12px;text-align:center;position:relative;transition:all .3s;border:2px dashed rgba(255,255,255,.1);}
    .stamp-slot.stamped{border-style:solid;}
    .stamp-slot.empty{opacity:.5;filter:grayscale(0.6);}
    .stamp-troll{width:70px;height:70px;object-fit:contain;display:block;margin:0 auto 8px;}
    .stamp-slot.stamped .stamp-troll{filter:drop-shadow(0 0 12px var(--c));animation:float 3s ease-in-out infinite;}
    .stamp-slot.empty .stamp-troll{filter:grayscale(1) opacity(0.4);}
    .stamp-color{font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
    .stamp-date{font-family:'Space Mono',monospace;font-size:.52rem;color:rgba(232,224,240,.35);}
    .stamp-check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;}
    .stamp-progress{margin-top:16px;}
    .stamp-progress-label{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.1em;color:rgba(232,224,240,.45);margin-bottom:8px;text-align:center;}
    .stamp-progress-bar{height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;}
    .stamp-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#FF6200,#FFE000,#39FF14,#00CFFF,#8B00FF,#FF69B4);transition:width .8s ease;}

    /* Complete state */
    .stamp-complete{background:rgba(57,255,20,.06);border:1px solid rgba(57,255,20,.25);border-radius:16px;padding:24px;text-align:center;margin-top:20px;}
    .stamp-complete h3{font-family:'Cinzel Decorative',serif;font-size:1rem;color:#39FF14;margin-bottom:10px;text-shadow:0 0 20px rgba(57,255,20,.4);}
    .stamp-complete p{font-style:italic;color:rgba(232,224,240,.7);font-size:.9rem;line-height:1.7;margin-bottom:16px;}
    .claim-code{font-family:'Space Mono',monospace;font-size:1.1rem;color:#FFE000;letter-spacing:.2em;background:rgba(255,224,0,.08);border:1px solid rgba(255,224,0,.25);border-radius:10px;padding:12px 20px;display:inline-block;margin-bottom:16px;}
    .claim-instructions{font-family:'Space Mono',monospace;font-size:.62rem;color:rgba(232,224,240,.4);letter-spacing:.08em;line-height:1.8;}

    /* Claim past finds */
    .past-finds-card{background:rgba(255,255,255,.03);border:1px solid rgba(192,132,252,.15);border-radius:20px;padding:28px;margin-bottom:32px;}
    .past-finds-title{font-family:'Cinzel Decorative',serif;font-size:.8rem;letter-spacing:.12em;color:#c084fc;margin-bottom:8px;}
    .past-finds-sub{font-style:italic;color:rgba(232,224,240,.45);font-size:.82rem;margin-bottom:16px;line-height:1.6;}
    .form-input{background:rgba(255,255,255,.05);border:1px solid rgba(192,132,252,.25);border-radius:10px;padding:12px 16px;color:#e8e0f0;font-family:'Spectral',serif;font-size:.95rem;outline:none;transition:border-color .2s;width:100%;}
    .form-input:focus{border-color:#8B00FF;}
    .form-input::placeholder{color:rgba(232,224,240,.25);}
    .claim-btn{font-family:'Cinzel Decorative',serif;font-size:.65rem;letter-spacing:.12em;background:transparent;color:#c084fc;border:1.5px solid rgba(192,132,252,.4);border-radius:50px;padding:10px 24px;cursor:pointer;transition:all .3s;margin-top:12px;}
    .claim-btn:hover{background:rgba(192,132,252,.1);}
    .claim-result{font-style:italic;font-size:.82rem;color:#39FF14;margin-top:10px;display:none;}
    .claim-result.visible{display:block;}

    /* Finds list */
    .finds-card{background:rgba(255,255,255,.03);border:1px solid rgba(192,132,252,.15);border-radius:20px;padding:28px;margin-bottom:32px;}
    .finds-title{font-family:'Cinzel Decorative',serif;font-size:.8rem;letter-spacing:.12em;color:#c084fc;margin-bottom:16px;}
    .find-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);}
    .find-item:last-child{border-bottom:none;}
    .find-num{font-family:'Cinzel Decorative',serif;font-size:.7rem;padding:4px 10px;border-radius:6px;}
    .find-empty{font-style:italic;color:rgba(232,224,240,.35);font-size:.85rem;}

    /* Sign out */
    .signout-btn{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.12em;background:transparent;border:1px solid rgba(255,255,255,.1);color:rgba(232,224,240,.4);border-radius:50px;padding:8px 20px;cursor:pointer;transition:all .3s;display:block;margin:0 auto;}
    .signout-btn:hover{border-color:rgba(255,98,0,.4);color:#FF6200;}

    @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
    @media(max-width:600px){.dash-page{padding:100px 16px 40px;}body{overflow-x:hidden;max-width:100vw;}}
      
    /* ── PROFILE-ONLY TOKENS ──
       New variables, namespaced so they never collide with the
       ones already defined in style.css. Everything below is built
       on top of :root, --black, --accent, --gold, --text, --muted, etc. */
    :root{
      --parchment:#f4e8c9;
      --parchment-shadow:#dcc794;
      --ink:#2d1a09;
      --ink-label:#7a4a18;
      --wax:#7a1530;
      --wax-deep:#4d0d1e;
      --wax-highlight:#b23a55;
    }

    /* ── PAGE SHELL ── */
    .profile-page{
      position:relative;
      z-index:1;
      max-width:1200px;
      margin:0 auto;
      padding:110px 24px 80px;
    }

    /* Generic wrapper for every major section on this page.
       New sections can be added later just by adding another
       .profile-block — no layout restructuring required. */
    .profile-block{
      margin:0 0 78px;
    }

    .profile-block-header{
      text-align:center;
      margin-bottom:28px;
    }

    .profile-block-title{
      font-family:'Cinzel Decorative',serif;
      font-size:clamp(1.45rem,3.5vw,2rem);
      color:var(--text);
      text-shadow:0 0 30px rgba(192,132,252,.35);
      margin-bottom:6px;
      letter-spacing:.04em;
    }

    .profile-block-sub{
      font-style:italic;
      color:var(--muted);
      font-size:.95rem;
    }

    /* ── PARCHMENT SURFACE (base for cards throughout this page) ──
       Uses the real passport parchment texture already on the site,
       with the old gradient kept only as a fallback color in case
       the image is slow to load or missing. */
    .parchment-surface{
      position:relative;
      background-color:var(--parchment);
      background-image:url('../images/passport-section-panel.png');
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      border-radius:26px;
      box-shadow:0 12px 30px rgba(0,0,0,.4);
      color:var(--ink);
    }

    /* ============================================================
       PROFILE HERO
       ============================================================ */
    .profile-hero{
      display:grid;
      grid-template-columns:minmax(220px,280px) 1fr;
      gap:28px;
      align-items:stretch;
    }

    .profile-photo-card{
      padding:28px 20px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
    }

    .profile-photo-frame{
      position:relative;
      width:150px;
      height:150px;
      border-radius:50%;
      padding:6px;
      background:conic-gradient(from 180deg,var(--gold),#fff6d8,var(--gold));
      box-shadow:0 0 24px rgba(212,175,55,.35);
      margin-bottom:16px;
    }

    .profile-photo{
      width:100%;
      height:100%;
      border-radius:50%;
      object-fit:cover;
      display:block;
      background:var(--black);
      border:3px solid var(--parchment);
    }

    .profile-photo-compass{
      position:absolute;
      bottom:-6px;
      right:-6px;
      width:34px;
      height:34px;
      border-radius:50%;
      background:var(--black);
      border:2px solid var(--gold);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1rem;
    }

    .profile-join-date{
      font-family:'Space Mono',monospace;
      font-size:.62rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--ink-label);
      margin-top:4px;
    }

    .profile-identity-card{
      padding:32px 60px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:14px;
    }

    .profile-identity-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
    }

    .profile-display-name{
      font-family:'Cinzel Decorative',serif;
      font-size:clamp(1.4rem,3vw,2rem);
      color:var(--ink);
      line-height:1.2;
    }

    .profile-username{
      font-family:'Space Mono',monospace;
      font-size:.85rem;
      color:var(--ink-label);
      margin-top:4px;
    }

    /* Settings button — placeholder only, links nowhere yet */
    .profile-settings-btn{
      flex-shrink:0;
      width:40px;
      height:40px;
      border-radius:50%;
      border:1px solid rgba(122,74,24,.4);
      background:rgba(255,255,255,.25);
      color:var(--ink);
      font-size:1.1rem;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      text-decoration:none;
      transition:transform .25s, background .25s;
    }

    .profile-settings-btn:hover{
      transform:rotate(45deg);
      background:rgba(255,255,255,.45);
    }

    .profile-tagline{
      font-style:italic;
      font-size:.95rem;
      color:var(--ink);
      opacity:.85;
      max-width:520px;
    }

    .profile-identity-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:6px;
    }

    .profile-meta-chip{
      font-family:'Space Mono',monospace;
      font-size:.62rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--ink);
      background:rgba(255,255,255,.35);
      border:1px solid rgba(122,74,24,.3);
      border-radius:50px;
      padding:6px 14px;
    }

    @media(max-width:800px){
      .profile-hero{
        grid-template-columns:1fr;
      }
      .profile-identity-top{
        align-items:center;
      }
      .profile-identity-card{
        padding:28px 30px;
      }
      .profile-about-card{
        padding:36px 28px;
      }
    }

    /* ============================================================
       ABOUT ME
       ============================================================ */
    .profile-about-card{
  width:min(900px,90%);
  margin:0 auto;
  padding:54px 64px;
  font-size:1rem;
  line-height:1.8;
}

    .profile-about-card p + p{
      margin-top:14px;
    }

    /* ============================================================
       JOURNEY STATISTICS
       ============================================================ */
    .profile-stats-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
      gap:16px;
    }

    .profile-stat-card{
      padding:22px 12px;
      text-align:center;
    }

    .profile-stat-value{
      display:block;
      font-family:'Cinzel Decorative',serif;
      font-size:clamp(1.6rem,3vw,2.2rem);
      font-weight:700;
      line-height:1;
      margin-bottom:8px;
    }

    .profile-stat-label{
      display:block;
      font-family:'Space Mono',monospace;
      font-size:.62rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--ink-label);
    }

    /* ============================================================
       COUNCIL ROLES — wax seal badges
       (This is the signature visual moment of the page.)
       ============================================================ */
    .profile-seals-row{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:32px;
    }

    .wax-seal-badge{
      display:flex;
      flex-direction:column;
      align-items:center;
      width:165px;
      text-align:center;
    }

    .wax-seal{
  width:145px;
  height:145px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(var(--seal-tilt,0deg));
}

.wax-seal img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));
}

    .wax-seal-badge:nth-child(1) .wax-seal{ --seal-tilt:-4deg; }
    .wax-seal-badge:nth-child(2) .wax-seal{ --seal-tilt:3deg; }
    .wax-seal-badge:nth-child(3) .wax-seal{ --seal-tilt:-2deg; }
    .wax-seal-badge:nth-child(4) .wax-seal{ --seal-tilt:5deg; }

    .wax-seal-name{
  font-family:'Cinzel Decorative',serif;
  font-size:.75rem;
  letter-spacing:.03em;
  color:var(--ink);
  margin-top:12px;
  font-weight:700;
}

    .wax-seal-desc{
  font-family:'Space Mono',monospace;
  font-size:.6rem;
  letter-spacing:.04em;
  color:var(--ink-label);
  margin-top:4px;
  line-height:1.5;
}

    /* ============================================================
       MY HIDES / MY FINDS — shared troll card grid
       ============================================================ */
    .profile-troll-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
      gap:20px;
    }

    .profile-troll-card{
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .profile-troll-thumb-wrap{
      position:relative;
      width:100%;
      aspect-ratio:4/5;
      border-radius:10px;
      background:var(--black);
      border:2px solid rgba(212,175,55,.5);
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .profile-troll-thumb{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

    .profile-troll-color-dot{
      position:absolute;
      top:8px;
      right:8px;
      width:12px;
      height:12px;
      border-radius:50%;
      border:1px solid rgba(0,0,0,.4);
      box-shadow:0 0 6px rgba(0,0,0,.3);
    }

    .profile-troll-number{
      font-family:'Space Mono',monospace;
      font-size:.65rem;
      letter-spacing:.08em;
      color:var(--ink-label);
      text-transform:uppercase;
    }

    .profile-troll-archetype{
      font-family:'Cinzel Decorative',serif;
      font-size:.95rem;
      color:var(--ink);
    }

    .profile-status-pill{
      display:inline-block;
      align-self:flex-start;
      font-family:'Space Mono',monospace;
      font-size:.58rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      padding:4px 10px;
      border-radius:50px;
      color:var(--black);
    }

    .status-hidden{ background:var(--gold); }
    .status-found{ background:var(--t-green); }
    .status-rehidden{ background:var(--t-blue); }

    .profile-troll-card .btn-outline{
      align-self:flex-start;
      padding:8px 18px;
      font-size:.6rem;
      border-color:rgba(122,74,24,.4);
      color:var(--ink);
    }

    .profile-troll-card .btn-outline:hover{
      border-color:var(--wax);
      color:var(--wax);
    }

    .profile-troll-empty{
      font-style:italic;
      color:var(--ink-label);
      font-size:.9rem;
      grid-column:1/-1;
      text-align:center;
      padding:24px 12px;
    }

    /* ============================================================
       JOURNEY CHRONICLE — vertical trail timeline
       ============================================================ */

    /* Tall journal-page panel that holds the whole timeline.
       Uses the portrait chronicle texture rather than the
       wide passport-section-panel used everywhere else. */
    .chronicle-wrap{
  max-width:680px;
  margin:0 auto;
}

  .chronicle-panel{
  width:100%;
  background-color:transparent;
  background-image:url('images/journey-chronicle-panel.png');
  background-size:contain;
  background-position:center top;
  background-repeat:no-repeat;
  border-radius:0;
  box-shadow:none;
  aspect-ratio:1023/1537;
  padding:35.2% 8% 23.2% 8.8%;
  box-sizing:border-box;
  overflow:hidden;
}

    .profile-chronicle{
  position:relative;
  padding-left:40px;
  max-width:430px;
  margin:0 auto;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

    .profile-chronicle::-webkit-scrollbar{
      display:none;
}

    .profile-chronicle::before{
      content:"";
      position:absolute;
      left:15px;
      top:6px;
      bottom:6px;
      width:2px;
      background:repeating-linear-gradient(
        to bottom,
        rgba(212,175,55,.6) 0,
        rgba(212,175,55,.6) 6px,
        transparent 6px,
        transparent 12px
      );
    }

    .chronicle-entry{
      position:relative;
      padding-bottom:32px;
    }

    .chronicle-entry:last-child{
      padding-bottom:0;
    }

    .chronicle-icon{
      position:absolute;
      left:-36px;
      top:0;
      width:32px;
      height:32px;
      border-radius:50%;
      background:var(--black);
      border:2px solid var(--gold);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.9rem;
    }

    .chronicle-title{
      font-family:'Cinzel Decorative',serif;
      font-size:1rem;
      color:var(--ink);
      margin-bottom:4px;
    }

    .chronicle-date{
      display:block;
      font-family:'Space Mono',monospace;
      font-size:.62rem;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--ink-label);
      margin-bottom:6px;
    }

    .chronicle-message{
      font-style:italic;
      color:var(--ink);
      opacity:.8;
      font-size:.92rem;
      line-height:1.6;
    }

    /* ── Mobile: keep the timeline inside the parchment art ──
       On narrow screens the background-size:contain image
       shrinks, but fixed padding/min-height don't — so entries
       spilled past the bottom edge of the parchment. This caps
       the scrollable list to the visible parchment area and
       hides the scrollbar so it still reads as a still page,
       just swipeable when there's more to see. */
    @media(max-width:800px){
      .profile-chronicle{
        padding-left:32px;
      }

      .profile-chronicle::before{
        left:12px;
      }

      .chronicle-entry{
        padding-bottom:20px;
      }

      .chronicle-icon{
        left:-30px;
        width:26px;
        height:26px;
        font-size:.72rem;
      }

      .chronicle-title{
        font-size:.8rem;
        line-height:1.3;
        margin-bottom:3px;
      }

      .chronicle-date{
        font-size:.56rem;
        margin-bottom:4px;
      }

      .chronicle-message{
        font-size:.78rem;
        line-height:1.45;
      }
      .profile-seals-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px 12px;
  align-items:start;
}

.wax-seal-badge{
  width:100%;
}

.wax-seal{
  width:105px;
  height:105px;
  margin:0 auto;
}

.wax-seal-name{
  font-size:.65rem;
  margin-top:8px;
}

.wax-seal-desc{
  font-size:.52rem;
}
    }

    /* ============================================================
       EDIT PROFILE MODAL
       Reuses .form-group / .form-label / .form-input / .form-textarea
       / .submit-btn / .btn-outline from style.css — only the modal
       shell and troll-color picker are new.
       ============================================================ */
    .profile-modal-overlay{
      position:fixed;
      inset:0;
      z-index:200;
      background:rgba(7,6,10,.75);
      backdrop-filter:blur(6px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px;
    }

    .profile-modal-overlay.open{
      display:flex;
    }

    .profile-modal{
      width:100%;
      max-width:480px;
      max-height:90vh;
      overflow-y:auto;
      padding:32px;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .profile-modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .profile-modal-title{
      font-family:'Cinzel Decorative',serif;
      font-size:1.15rem;
      color:var(--ink);
    }

    .profile-modal-close{
      background:none;
      border:none;
      font-size:1.4rem;
      line-height:1;
      color:var(--ink);
      cursor:pointer;
      padding:4px;
    }

    .profile-modal .form-label{
      color:var(--ink-label);
    }

    .profile-modal .form-input,
    .profile-modal .form-textarea{
      background:rgba(255,255,255,.35);
      border:1px solid rgba(122,74,24,.35);
      color:var(--ink);
    }

    .profile-modal .form-input::placeholder,
    .profile-modal .form-textarea::placeholder{
      color:rgba(45,26,9,.35);
    }

    .profile-troll-picker{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }

    .profile-troll-swatch{
      width:38px;
      height:38px;
      border-radius:50%;
      border:3px solid transparent;
      cursor:pointer;
      box-shadow:0 0 0 1px rgba(0,0,0,.25);
      transition:transform .15s, border-color .15s;
    }

    .profile-troll-swatch:hover{
      transform:scale(1.08);
    }

    .profile-troll-swatch.selected{
      border-color:var(--ink);
      transform:scale(1.1);
    }

    .profile-modal-actions{
      display:flex;
      gap:12px;
      margin-top:4px;
    }

    .profile-modal-actions .btn-outline{
      color:var(--ink);
      border-color:rgba(122,74,24,.4);
    }

    .profile-modal-status{
      font-family:'Space Mono',monospace;
      font-size:.68rem;
      letter-spacing:.05em;
      display:none;
    }

    .profile-modal-status.visible{
      display:block;
    }

    .profile-modal-status.error{
      color:#b23a55;
    }

    .profile-modal-status.success{
      color:#2e7d32;
    }

.journey-nav-buttons{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin:20px 0 40px;
}

.journey-nav-buttons .btn-rainbow{
    min-height:40px;
    padding:10px 22px;
    font-size:.62rem;
}

@media (max-width:700px){
    .journey-nav-buttons{
        gap:10px;
    }
}