/* ---------- Base / theme ---------- */
:root{
  --bg:#0a0a0a; --bg-alt:#0f0f10; --text:#fff; --muted:#9ca3af; --line:#1f1f22;
  --card:#111113; --card-2:#0c0c0d; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
  --step--1: clamp(.88rem, .84rem + .2vw, .95rem);
  --step-0: clamp(1rem, .9rem + .6vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 1vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 2vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.5rem + 4vw, 3.2rem);
  --step-4: clamp(3rem, 2rem + 5vw, 4.5rem);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 80% -20%, #1b1b1f 0%, #0a0a0a 60%) no-repeat, var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.9}
p{font-size:var(--step-0);color:#d1d5db}
h1,h2,h3{margin:0 0 .6rem;font-weight:700;letter-spacing:-.02em}
h1.display{font-size:var(--step-4);line-height:1.05}
h2{font-size:var(--step-2)}
.container{width:min(1100px,92vw);margin:0 auto}

/* accessibility */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:9999;padding:.5rem .75rem;background:#000;border-radius:8px}

/* header */
.site-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(10,10,10,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .2s ease;
}

.site-header.is-elevated{box-shadow:0 8px 20px rgba(0,0,0,.25)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700}
.nav-links{display:flex;align-items:center;gap:1rem}
.nav-links a{padding:.35rem .6rem;border-radius:10px;font-size:.95rem;color:#e5e7eb}
.nav-toggle{display:none;background:transparent;border:0;padding:.4rem;border-radius:10px}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:5px 0}
.cart-dot{display:inline-flex;min-width:1.25rem;height:1.25rem;border-radius:999px;background:#fff;color:#000;align-items:center;justify-content:center;font-size:.78rem;margin-left:.35rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;border-radius:999px;font-weight:600;border:1px solid transparent;transition:transform .08s ease, background .2s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:.9rem 1.25rem;font-size:1.02rem}
.btn-primary{background:#fff;color:#000;border-color:rgba(255,255,255,.2);box-shadow:0 10px 20px rgba(255,255,255,.08)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.14)}

/* hero */
.hero{position:relative;overflow:clip}
.hero .hero-bg{position:absolute;inset:0;z-index:-1}
.orb{position:absolute;width:60vmin;height:60vmin;border-radius:999px;filter:blur(60px);opacity:.35;mix-blend-mode:screen}
.orb-a{top:-15vmin;left:-10vmin;background:radial-gradient(circle at 30% 30%, #fff, #666)}
.orb-b{bottom:-20vmin;right:-10vmin;background:radial-gradient(circle at 70% 70%, #999, #222)}
.mesh{position:absolute;inset:-10%;background:radial-gradient(#fff2 1px, #0000 1px) 0 0/24px 24px;opacity:.08}
.hero-content{padding:min(16vh,8rem) 0 min(10vh,6rem);text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-size:.8rem}
.lede{margin:1rem auto 1.6rem;max-width:65ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.9rem}
.stat-num{font-size:var(--step-2);font-weight:800;display:block}
.stat-label{color:var(--muted);font-size:.9rem}

/* marquee */
.marquee{border-block:1px solid var(--line);background:var(--bg-alt)}
.marquee-inner{display:grid;grid-auto-flow:column;gap:3rem;padding:.9rem 0;white-space:nowrap;overflow:auto;scrollbar-width:none}
.marquee-inner::-webkit-scrollbar{display:none}
/* centered variant with dots */
.marquee-centered{display:flex;justify-content:center;align-items:center;gap:3rem;padding:1.25rem 0;white-space:normal;overflow:visible}
.marquee-centered span{text-align:center;font-size:var(--step-0);position:relative}
.marquee-centered span:not(:last-child)::after{content:"•";font-size:1.2em;color:#999;margin-left:1.5rem;position:absolute;right:-2rem;top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .marquee-centered{flex-direction:column;gap:.6rem;padding:1rem 0 1.2rem}
  .marquee-centered span:not(:last-child)::after{display:none}
}

/* sections */
.section{padding:clamp(3rem,6vw,6rem) 0}
.section.alt{background:linear-gradient(#0b0b0b,#0c0c0d)}
.section-head{text-align:center;margin-bottom:2rem}
#checkout.section{padding-top:0}

/* ---------- STORE ---------- */
.store-toolbar{display:flex;gap:1rem;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.store-toolbar input[type="search"]{flex:1;min-width:220px;background:#0e0e10;border:1px solid #1f1f23;color:#fff;padding:.8rem .9rem;border-radius:12px}
.store-filters{display:flex;gap:.5rem;align-items:center}
.store-filters select{background:#0e0e10;border:1px solid #1f1f23;color:#fff;padding:.65rem .8rem;border-radius:12px}

/* Horizontal, snap-on-card event rail */
.store-grid{
  display: grid;
  grid-auto-flow: column;                   /* lay cards left → right */
  grid-auto-columns: clamp(260px, 28vw, 340px); /* consistent card width */
  gap: 1rem;

  overflow-x: auto;
  padding-block: .25rem .5rem;
  scroll-snap-type: x mandatory;            /* snap while scrolling */
  scroll-padding-left: 1rem;                /* nice first-card align */

  -webkit-overflow-scrolling: touch;        /* momentum on iOS */
  overscroll-behavior-x: contain;
  scrollbar-width: none;                    /* Firefox hide bar */
}
.store-grid::-webkit-scrollbar{ display:none; }  /* Chrome/Safari */
.event-card{ scroll-snap-align: start; }    /* snap to each card */
/* Horizontal, snap-on-card event rail (keep your existing .store-grid rules) */
.store-row{ position: relative; }

/* outside-edge nav buttons */
.rail-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px; border:1px solid #1f1f23;
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
  display:grid; place-items:center; backdrop-filter: blur(4px);
  z-index:2; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.rail-btn.prev{ left:-2.25rem; }   /* slightly outside the rail */
.rail-btn.next{ right:-2.25rem; }  /* slightly outside the rail */
.rail-btn:hover{ background:rgba(255,255,255,.12); }
.rail-btn[disabled]{ opacity:.4; pointer-events:none; }

/* Hide the buttons on touch breakpoints (swipe instead) */
@media (max-width:980px){
  .rail-btn{ display:none; }
}





/* Event cards */
.event-card{background:var(--card);border:1px solid #1a1a1e;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.event-card .img{height:150px;background-size:cover;background-position:center;background-repeat:no-repeat;border-bottom:1px solid rgba(255,255,255,.08)}
.event-card .body{padding:1rem;display:grid;gap:.4rem}
.event-meta{color:var(--muted);font-size:.9rem}
.event-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem}
.tag{font-size:.75rem;padding:.25rem .5rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#d1d5db}
.event-actions{margin-top:.6rem;display:flex;gap:.5rem}

/* Event detail */
.event-detail{background:var(--card);border:1px solid #1a1a1e;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.event-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}
.event-header .event-hero{width:280px;height:140px;border-radius:12px;background:linear-gradient(135deg,#0f0f12,#16161a);border:1px solid #1c1c20}
.comp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.comp-item{background:var(--card-2);border:1px solid #1c1c21;border-radius:12px;padding:1rem;display:grid;gap:.4rem}
.comp-line{display:flex;justify-content:space-between;gap:1rem}

/* checkout */
.checkout-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem}
.cart{background:var(--card);border:1px solid #1a1a1e;border-radius:var(--radius);padding:1rem}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:.4rem;border-bottom:1px solid #1f1f23;padding:.6rem 0}
.cart-item:last-child{border-bottom:0}
.cart-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid #1f1f23}
.checkout-form{background:var(--card);border:1px solid #1a1a1e;border-radius:var(--radius);padding:1rem;display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
input,textarea{background:#0e0e10;border:1px solid #1f1f23;color:#fff;padding:.8rem .9rem;border-radius:12px}
.back-btn{margin-bottom:1rem}

/* contact */
.contact-form .tiny{color:var(--muted)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:#090909;padding:2rem 0}
.footer-grid{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo-wrapper{display:flex;flex-direction:column;align-items:flex-start}
.logo-wrapper .tiny{margin:.2rem 0 0;font-size:.85rem;color:var(--muted)}
.muted{color:var(--muted)}
.tiny{font-size:.9rem}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  /* keep comp list & checkout stacked, but NOT store-grid (it’s a scroller) */
  .comp-list, .checkout-wrap { grid-template-columns: 1fr; }
  .nav-links { display:none; }
  .nav-toggle { display:inline-block; }
  .event-header { flex-direction:column; align-items:flex-start; }

  .store-grid { grid-auto-columns: 70%; }   /* bigger cards on tablet */
}
@media (max-width:640px){
  .store-grid { grid-auto-columns: 88%; }   /* almost full-bleed on phone */
}

/* mobile menu panel */
.menu-panel{position:fixed;inset:64px 0 0 0;background:rgba(10,10,10,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.06);display:none;padding:1rem;z-index:999}
.menu-panel.open{display:block}
.menu-panel a{display:block;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.05);color:#e5e7eb}

/* elevation */
[data-elevate].is-elevated{box-shadow:0 12px 30px rgba(0,0,0,.28)}

/* Divisions marquee selector */
.divisions-bar{
  display:grid;grid-auto-flow:column;gap:.5rem;padding:.5rem 0 .75rem;overflow-x:auto;scrollbar-width:none
}
.divisions-bar::-webkit-scrollbar{display:none}
.division-pill{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:.5rem .8rem;border-radius:999px;font-size:.9rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#e5e7eb;cursor:pointer;user-select:none;
  transition:transform .08s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.division-pill:hover{transform:translateY(-1px)}
.division-pill[aria-selected="true"]{
  background:#fff;color:#000;border-color:rgba(255,255,255,.2);box-shadow:0 10px 20px rgba(255,255,255,.08)
}

/* Event detail fade-in */
[data-event-detail]{opacity:0;transform:translateY(6px);transition:opacity .18s ease, transform .18s ease}
[data-event-detail]:not([hidden]){opacity:1;transform:translateY(0)}

/* --- Modals --- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease}
.modal-dialog{
  position:relative;z-index:1;width:min(420px,92vw);
  background:var(--card);border:1px solid #1a1a1e;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.25rem;opacity:0;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.modal.open .modal-backdrop{opacity:1}
.modal.open .modal-dialog{opacity:1;transform:none}
.modal-close{
  position:absolute;top:.5rem;right:.5rem;background:transparent;border:0;color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;border-radius:8px;padding:.25rem
}
body.no-scroll{overflow:hidden}

/* Inline control row spacing (remember me / terms) */
.inline-controls{
  display:flex;align-items:center;gap:.75rem;margin:.25rem 0 1rem;
}
.inline-controls a{margin-left:auto}
.inline-controls .tiny{line-height:1}



/* ===== Dashboard lists (My Competitions / Results) ===== */
.list { display: grid; gap: .6rem; }

/* Shared row styling for event headers and competition rows */
.list-row,
.evt-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: var(--card-2);
  border: 1px solid #1c1c21;
  transition: background .18s ease, border-color .18s ease, transform .08s ease;
}

.list-row:hover,
.evt-toggle:hover {
  background: #121215;
  border-color: #26262b;
  transform: translateY(-1px);
}

/* Typography */
.list-row .title,
.evt-toggle .title { font-weight: 700; letter-spacing: -.01em; }

.list-row .sub,
.evt-toggle .sub { color: var(--muted); font-size: .9rem; }

/* Right-side area (price / count + chevron) */
.list-row .right,
.evt-toggle .right { white-space: nowrap; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }

/* Make the event header behave like a row but act as a button */
.evt-toggle {
  color: var(--text);
  appearance: none; -webkit-appearance: none;
  cursor: pointer; text-align: left; box-shadow: none;
}

.evt-toggle .chev { transition: transform .15s ease; }
.evt-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Drop-down panel (list of competition rows) */
.evt-panel{
  display: grid;
  gap: .6rem;          /* same as .list gap */
  margin: .6rem 0 0;   /* space under the event header */
  padding-left: 0;     /* reset base so only first level indents */
}
.evt-panel[hidden]{ display:none !important; }

/* indent ONLY the first-level panel under an event */
.event-group > .evt-panel{
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}

/* prevent extra indent on nested panels */
.evt-panel .evt-panel{
  padding-left: 0;
  border-left: 0;
}

/* === Competition settings: one-piece panel look === */
.evt-panel.settings {
  /* keep your first-level indent; remove if you want edge-to-edge */
  padding-left: 1rem;
}

/* the card itself (wraps all the inner rows) */
.evt-panel.settings .list{
  background: var(--card);
  border: 1px solid #1c1c21;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .75rem;
}

/* flatten rows so they read as sections of one card */
.evt-panel.settings .list-row{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .65rem 0;
}
.evt-panel.settings .list-row + .list-row{
  border-top: 1px solid #1f1f23;
}

/* tidy up footer area (Save button row) */
.evt-panel.settings .list > div:last-child{
  padding-top: .5rem;
}

/* nicer inputs inside the panel */
.evt-panel.settings input[type="number"],
.evt-panel.settings select{
  background:#0e0e10;
  border:1px solid #1f1f23;
  color:#fff;
  border-radius:10px;
  padding:.45rem .6rem;
  font:inherit;
}




/* Space between event groups */
.event-group + .event-group { margin-top: .6rem; }



/* Event header with poster background */
.evt-toggle.evt-has-poster{
  background-image:
    linear-gradient( to bottom right, rgba(0,0,0,.55), rgba(0,0,0,.35) ),
    var(--evt-poster);
  background-size: cover;
  background-position: center;
  border-color: rgba(255,255,255,.14);
}

/* Don't wipe out the image on hover; just slightly lift */
.evt-toggle.evt-has-poster:hover{
  filter: brightness(1.04);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* Keep your original hover for rows WITHOUT poster */
.evt-toggle:not(.evt-has-poster):hover{
  background: #121215;
  border-color: #26262b;
  transform: translateY(-1px);
}


/* Leaflet popup restyle */
.leaflet-popup-content-wrapper.event-popup {
  border-radius: 14px;
  padding: 0;
  background: #111;           /* match your dark theme */
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.36);
}
.leaflet-popup-tip.event-popup { background: #111; }

.leaflet-popup-content {
  margin: 0;                  /* we’ll handle spacing inside the card */
}

.map-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  width: 320px;
  padding: 12px;
}
.map-card .img {
  width: 112px;
  height: 84px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #222;
}
.map-card h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.map-card .meta {
  margin: 6px 0 0;
  font-size: .8rem;
  color: #c3c3c3;
}
.map-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.map-card .tag {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: #1b1b1b;
  color: #eaeaea;
  border: 1px solid #242424;
}

.map-card .actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.map-card .btn {
  padding: .5rem .7rem;
  border-radius: 10px;
}
.map-card .btn.btn-ghost {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #eaeaea;
}

/* ===== Results page (scoped) ===== */
.results-page .results-hero{
  position:relative; overflow:hidden;
  min-height:140px; display:grid; align-items:end;
  border-radius: var(--radius); background: var(--card); border:1px solid #1a1a1e;
}
.results-page .results-hero.has-image::before{
  content:""; position:absolute; inset:0;
  background-image: var(--hero-bg); background-size:cover; background-position:center;
  opacity:.35; filter:saturate(1.05) contrast(1.04);
}
.results-page .results-hero .inner{
  position:relative; z-index:1; padding:1rem 1rem 1.1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
}

/* center the stacked hero title */
.results-page .results-hero .inner {
  text-align: center;        /* centers title + chips */
}

.results-page #title {
  white-space: pre-line;     /* keeps the three-line stack */
  line-height: 1.2;
  margin: 0;
}

/* optional: center any chips under the title */
.results-page .chips {
  display: flex;
  justify-content: center;
}


/* jump-to round nav (NON-sticky) */
.results-page .round-nav{
  position: static;         /* was: sticky */
  top: auto;                /* clear any offset */
  z-index: auto;            /* no special stacking */
  display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center;
  background: var(--card); border:1px solid #1a1a1e; border-radius: var(--radius); padding:.5rem;
}

/* round card wrapper */
.results-page .round{
  background: var(--card); border:1px solid #1a1a1e; border-radius: var(--radius);
  padding: .75rem; margin: 1rem 0; box-shadow: var(--shadow);
  scroll-margin-top: 72px;   /* ensure anchors clear the sticky global header (tweak as needed) */
}
.results-page .round h2{ font-size:1.05rem; margin: .25rem .25rem .5rem; }

/* light grid inside dark page (forces black text) */
.results-page .grid{
  background:#fff; border:1px solid #e7e9ef; border-radius:12px; overflow-x:auto;
}
.results-page .grid, 
.results-page .grid *{ color:#111; }

/* fixed-width columns per row using CSS Grid */
.results-page .row{ display:grid; grid-template-columns: var(--template); align-items:center; min-height:40px; }
.results-page .row.header{ background:#f3f4f6; font-weight:700; border-bottom:1px solid #e7e9ef; }
.results-page .row.data:nth-child(odd){ background:#fafbfc; }

.results-page .cell{
  padding:8px 10px; text-align:center; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; border-right:1px solid #eef0f4; font-size:14px;
}
.results-page .row .cell:last-child{ border-right:none; }
.results-page .cell.hj{ font-style:italic; color:#858b95; }

/* small title strip inside each grid */
.results-page .grid-title{
  background:#f3f4f6; border-bottom:1px solid #e7e9ef; font-weight:700; text-align:center; padding:8px 10px;
}

/* pair names stacked (Lead on top, Follow below) */
.results-page .cell.stack{ white-space:pre-line; line-height:1.2; }

/* empty state/alerts */
.results-page .notice{ text-align:center; color:#69707a; padding:10px 0 4px; }
#alerts .error{ background:#fff2f2; border:1px solid #ffdede; color:#a40000; padding:8px 10px; border-radius:10px; margin:8px 0; }


/* ---------- Settings ---------- */
.settings-grid{
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr;     /* always single column */
  max-width:980px;
  margin:0 auto;
}
/* lock single column on desktop too */
@media (min-width: 980px){
  .settings-grid{ grid-template-columns: 1fr; }
}

.settings-card{
  background:var(--card); border:1px solid #1a1a1e;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.settings-card.danger{
  border-color:#2b1515; background:linear-gradient(#141111,#110e0e);
}

.settings-card .hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1rem; border-bottom:1px solid var(--line);
}
.settings-card .bd{ padding:.75rem 1rem 1rem; }
.settings-card .status{ min-height:1em; }

.settings-card .list-row{
  background:transparent; border:0; border-radius:0; padding:.65rem 0;
}
.settings-card .list-row + .list-row{
  border-top:1px solid #1f1f23;
}

/* Inputs already match your theme; just limit width a bit on desktop */
.settings .input{ min-width:220px; max-width:360px; width:min(360px, 60vw); }
.settings textarea.input{ min-height:88px; }

/* Avatar */
.avatar{ width:76px; height:76px; border-radius:50%;
  object-fit:cover; background:#0e0e10; border:1px solid #1f1f23;
}
.avatar-wrap{ display:flex; align-items:center; gap:.75rem; }

/* Toggle rows */
.switch{ display:inline-flex; align-items:center; gap:.5rem; }

.avatar-wrap { display:flex; align-items:center; gap:.75rem; }
.avatar-stack { position: relative; display:inline-block; }
.avatar { width:76px; height:76px; border-radius:50%;
  object-fit:cover; background:#0e0e10; border:1px solid #1f1f23;
}

/* circular pencil button over the image */
.icon-btn.avatar-edit-btn{
  position:absolute; right:-6px; bottom:-6px;
  width:32px; height:32px; border-radius:999px;
  border:1px solid #1f1f23; background:#0f0f12;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: var(--shadow);
}
.icon-btn.avatar-edit-btn:hover{ background:#15151a; }
.icon-btn.avatar-edit-btn svg{ width:16px; height:16px; fill:#ddd; }


/* Make avatar scale nicely on small screens and clickable */
.avatar-wrap {
  width: clamp(84px, 34vw, 120px);
  height: clamp(84px, 34vw, 120px);
  cursor: pointer;
  border-radius: 12px;
  background: #1a1a1e center/cover no-repeat;
  border: 1px solid #25252a;
}
.avatar-wrap.is-empty {
  background-image: radial-gradient(#fff1 1px, #0000 1px);
  background-size: 18px 18px;
}
.avatar-wrap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Keep input text >=16px to avoid iOS zoom */
input, textarea, select { font-size: 16px; }

/* Fluid action button on phones */
.btn-fluid { width: auto; }
@media (max-width: 640px){
  .settings-card { padding: .85rem; }
  .list-row { grid-template-columns: 1fr; }
  .list-row > .right,
  .row-grid { width: 100%; }
  .row-grid { flex-direction: column; align-items: stretch; gap: .5rem; }
  .row-grid .pair { width: 100%; gap: .5rem; }
  .row-grid .pair input,
  .row-grid .pair select,
  .row-grid textarea,
  .row-grid input { width: 100%; }
  .btn-fluid { width: 100%; }
}

#chips {
  display: flex;
  flex-direction: column; /* stack lines */
  align-items: center;    /* center horizontally */
  gap: 0.25rem;           /* small spacing between lines */
  text-align: center;
}

#chips div {
  display: block;         /* ensure each line is its own row */
  font-size: 1.1rem;
  line-height: 1.5;
}

#chips div:first-child {
  font-weight: bold;
  font-size: 1.2rem;
}

/* Dashed line above the first alternate row */
.row.data.alt-separator {
  border-top: 3px dashed #000; /* black dashed line */
  margin-top: 4px;
  padding-top: 4px;
}


.results-page .cell.left { text-align: left; }