/* guilds/styles2.css */
:root{
  --bg-x: 0px;
  --bg-y: 0px;
  --zoom: 1;

  --panel: rgba(10, 12, 16, 0.78);
  --panel2: rgba(10, 12, 16, 0.88);
  --line: rgba(255,255,255,0.12);
  --line2: rgba(255,255,255,0.18);
  --txt: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --hover: rgba(255,255,255,0.06);

  /* ✅ Dark overlay on the background image */
  --bg-overlay: rgba(0,0,0,0.58);

  /* sticky col must be basically opaque so text behind never bleeds through */
  --stickybg: rgba(8, 10, 13, 0.985);
  --stickybg-hover: rgba(12, 14, 18, 0.985);

  /* ✅ Scrollbar theme (table horizontal scrollbar) */
  --scrollbar-size: 12px;
  --scroll-track: rgba(0,0,0,0.40);
  --scroll-track-border: rgba(255,255,255,0.10);

  --scroll-thumb: rgba(255,255,255,0.16);
  --scroll-thumb-border: rgba(255,255,255,0.14);

  --scroll-thumb-hover: rgba(255,255,255,0.24);
  --scroll-thumb-hover-border: rgba(255,255,255,0.20);

  --scroll-thumb-active: rgba(34,197,94,0.28);
  --scroll-thumb-active-border: rgba(34,197,94,0.38);
}


html,body{
  height:100%;
  margin:0;
  background: #05070a;
}

body{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: var(--txt);
  background: transparent;
  image-rendering: pixelated;
  position: relative;
}

/* Fixed background layer (doesn't scroll) */
.bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("https://myfo2.com/zones/noob-island.png");
  background-repeat: no-repeat;

  /* keep image at "true size" relative to initial zoom by compensating with --zoom */
  background-size: calc(4096px / var(--zoom)) calc(3072px / var(--zoom));
  background-position: var(--bg-x) var(--bg-y);
  background-color: #05070a;
  image-rendering: pixelated;
}

/* ✅ Overlay sits on top of the bg image */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--bg-overlay);
  pointer-events:none;
}

.wrap{
  margin: 0 auto;
  padding: 14px;
  position: relative;
  z-index: 1; /* above background */
}

.topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  flex-wrap: wrap;
}

.leftbar{
  display:flex;
  gap:10px;
  align-items:center;
  min-width: 240px;
  flex: 1 1 520px;
}

.title{
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.searchwrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 1 1 380px;
  min-width: 220px;
}

.search{
  font-family: inherit;
  font-size: 10px;
  color: var(--txt);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.search::placeholder{ color: rgba(255,255,255,0.45); }

.actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}

.btn{
  font-family: inherit;
  font-size: 10px;
  color: var(--txt);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover{
  background: rgba(255,255,255,0.10);
  border-color: var(--line2);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0px); }
.btn[disabled]{
  pointer-events:none;
  opacity:.45;
  transform:none !important;
}

.meta{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
}
.meta small{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.pager{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.select{
  font-family: inherit;
  font-size: 10px;
  color: var(--txt);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  padding: 7px 8px;
  border-radius: 10px;
  outline: none;

  /* ✅ tell the browser this control should render as dark */
  color-scheme: dark;
}

/* ✅ Fix dropdown option readability (Chrome/Edge/Firefox; helps Safari too) */
.select option,
.select optgroup{
  background: rgba(10, 12, 16, 0.96);
  color: var(--txt);
}

/* Optional: makes the selected option a bit clearer in some browsers */
.select option:checked{
  background: rgba(255,255,255,0.06);
    color: var(--txt);

}
/* -------------------------------------------------------
   Active dropdowns (filters): keep dark bg, turn text green
-------------------------------------------------------- */
.select{
  /* keep whatever you already have — these 2 lines just ensure the dark look stays */
  background: var(--panel2);
  color: var(--txt);
}

.select.is-active{
  /* green text when a real value is selected */
  color: #22c55e !important;
}

/* (Optional but nice) keep the opened options list dark too (browser support varies) */
.select option{
  background: rgb(10, 12, 16);
  color: rgba(255,255,255,0.92);
}


/* Scroll container (horizontal only) */
.table-wrap{
  margin-top: 10px;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 10px;

  overflow-x: auto;
  overflow-y: visible; /* IMPORTANT: lets sticky header stick to the page scroll */
  -webkit-overflow-scrolling: touch;

  cursor: grab;
  touch-action: pan-y;
  position: relative;

  /* ✅ Firefox scrollbar theming */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);

  /* ✅ keeps layout from “jumping” when scrollbar appears */
  scrollbar-gutter: stable;
}
.table-wrap.dragging{ cursor: grabbing; }
.table-wrap.dragging,
.table-wrap.dragging *{ user-select: none; }

/* ✅ WebKit scrollbar styling (Chrome/Edge/Safari) */
.table-wrap::-webkit-scrollbar{
  height: var(--scrollbar-size);
}

.table-wrap::-webkit-scrollbar-track{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.46) 0%,
    rgba(255,255,255,0.03) 100%
  );
  border: 1px solid var(--scroll-track-border);
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35);
}

.table-wrap::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.12) 100%
  );
  border: 1px solid var(--scroll-thumb-border);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 18px rgba(0,0,0,0.35);
  min-width: 44px; /* nicer “pill” feel on horizontal */
}

.table-wrap::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.16) 100%
  );
  border-color: var(--scroll-thumb-hover-border);
}

.table-wrap::-webkit-scrollbar-thumb:active{
  background: linear-gradient(
    180deg,
    var(--scroll-thumb-active) 0%,
    rgba(255,255,255,0.10) 100%
  );
  border-color: var(--scroll-thumb-active-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 0 1px rgba(34,197,94,0.18),
    0 10px 22px rgba(0,0,0,0.42);
}

.table-wrap::-webkit-scrollbar-corner{
  background: transparent;
}


table{
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--stickybg);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-align: left;
  padding: 10px 10px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 10px 14px rgba(0,0,0,0.18);
  font-weight: 300;
}

thead th.sortable{
  cursor: pointer;
  user-select: none;
}
thead th.sortable:hover{
  background: rgba(255,255,255,0.06);
}

.sort-ind{
  display:inline-block;
  width: 10px;
  margin-left: 6px;
  opacity: 0.9;
}

tbody td{
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 14px;
  padding: 10px 10px;
  vertical-align: middle;
  white-space: nowrap;
  background: transparent;

  /* ensure normal cells never paint above sticky column */
  position: relative;
  z-index: 1;
}

tr.item-row{
  cursor: pointer;
  transition: background .12s ease;
}
tr.item-row:hover td{ background: var(--hover); }

/* Desktop sticky first column (icon + text) */
th.sticky-col,
td.sticky-col{
  position: sticky;
  left: 0;
  background: var(--stickybg);
  border-right: 1px solid rgba(255,255,255,0.10);
  box-shadow: 12px 0 18px rgba(0,0,0,0.28);
  background-clip: padding-box;
}
thead th.sticky-col{ z-index: 30; }
tbody td.sticky-col{ z-index: 20; }
tr.item-row:hover td.sticky-col{ background: var(--stickybg-hover); }

/* Mobile: only the ICON is sticky (name/meta should scroll) */
@media (max-width: 820px){
  /* disable desktop sticky behavior */
  th.sticky-col,
  td.sticky-col{
    position: static;
    left: auto;
    background: transparent;
    border-right: 0;
    box-shadow: none;
    z-index: auto;
    background-clip: border-box;
  }

  /* new sticky icon column */
  th.icon-sticky,
  td.icon-sticky{
    position: sticky;
    left: 0;
    background: var(--stickybg);
    border-right: 1px solid rgba(255,255,255,0.10);
    box-shadow: 12px 0 18px rgba(0,0,0,0.28);
    background-clip: padding-box;
  }
  thead th.icon-sticky{ z-index: 40; }
  tbody td.icon-sticky{ z-index: 25; }

  tr.item-row:hover td.icon-sticky{ background: var(--stickybg-hover); }

  td.icon-only-cell,
  th.icon-only-cell{
    width: 62px;
    min-width: 62px;
    max-width: 62px;
    padding: 10px 8px;
    text-align: center;
  }

  /* keep icon centered ONLY on mobile icon-only cell */
  td.icon-only-cell .iconbox{
    margin: 0 auto;
  }

  td.item-text-cell{
    min-width: 220px;
  }
}

.itemcell{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 280px;
  justify-content:flex-start; /* desktop: keep icon+text left */
}

.iconbox{
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
  margin: 0; /* desktop: do NOT auto-center (prevents weird flex spacing) */
}
.iconbox img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.itemtext{
  display:flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: left;
}

.itemname {
  font-size: 14px;
  line-height: 1.2;
  max-width: 440px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itemmeta{
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.98;
}

.muted{ color: var(--muted); }

/* Modal (shared) */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 6px;
  z-index: 9999;
}
.modal.open{ display:flex; }
.modal-card{
  width: min(920px, 100%);
  max-height: 88vh;
  overflow:auto;
  border: 1px solid var(--line);
  background: rgba(10, 12, 16, 0.94);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}
.modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  margin-bottom: 10px;
}
.modal-title{
  font-size: 17px;
  line-height: 1.3;
  align-self:center;
}
.close{
  font-family: inherit;
  font-size: 10px;
  color: var(--txt);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  padding: 7px 9px;
  border-radius: 10px;
  cursor:pointer;
}
.close:hover{ border-color: var(--line2); background: rgba(255,255,255,0.10); }

.panel{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
}
.panel h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 500;
    /* background: linear-gradient(90deg, #22c55e 0%, rgba(255,255,255,0.96) 25%); */
    -webkit-background-clip: text;
    background-clip: text;
    color: #259348;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 10px rgba(34,197,94,0.14);
}

/* Item modal: 10px spacing between panels (no space after the last panel) */
.item-grid .panel{
  margin-bottom: 10px;
}
.item-grid .panel:last-child{
  margin-bottom: 0;
}

/* More reliable (works even if something comes after the last panel) */
@supports selector(.panel:has(~ .panel)){
  .item-grid .panel{
    margin-bottom: 0;
  }
  .item-grid .panel:has(~ .panel){
    margin-bottom: 10px;
  }
}

.cols{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.chip{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  user-select:none;
}
.chip input{ transform: translateY(1px); }
.chip span{ font-size: 12px; color: var(--txt); }

/* Item modal */
.item-top{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.item-top .iconbox{
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.item-top .iconbox img{
  width: 44px;
  height: 44px;
}

.item-meta{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.tagrow{
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  align-items:center;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  line-height: 1;
  color: var(--txt);
  white-space: nowrap;
}
.tag.mutedtag{
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* Item modal body layout */
.item-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  align-items:start;
}
.span-2{ grid-column: 1 / -1; }

.kv{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 12px;
  align-items:start;
}

.k{
  font-size: 14px;
  color: var(--muted);
  word-break: break-word;
}
.v{
  font-size: 14px;
  word-break: break-word;
  white-space: pre-wrap;
}

.stats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.statbox{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(0,0,0,0.18);
}


.codebox{
  margin: 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.row-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

@media (max-width: 820px){
  table{ min-width: 720px; }
  .itemcell{ min-width: 240px; }
  .itemname{ max-width: 300px; }
  .leftbar{ flex: 1 1 100%; }
  .actions{ width: 100%; justify-content: flex-end; }
}
@media (max-width: 700px){
  .item-grid{ grid-template-columns: 1fr; }
  .span-2{ grid-column: auto; }
}
@media (max-width: 600px){
  .stats-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px){
  .stats-grid{ grid-template-columns: 1fr; }
}


/* Columns modal: grouped (always-open) sections */
.cols-groups{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.col-group{
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.14);
  border-radius:12px;
  padding:10px;
}

.col-group-title{
  font-size:14px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  opacity:0.85;
  margin:0 0 8px 0;
}

.col-group .cols{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.itemModalSub {
    font-size: 12px;
}


  /* Item modal: Stats section — make stat label (k) and value (v) inline */
  .stats-grid .statbox{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
	font-size: 14px;
  }
  .stats-grid .stat-k,
  .stats-grid .stat-v{
    display:inline-block;
    white-space:nowrap;
  }
  
  
  /* Faction pill (fid) — green -> transparent gradient */
.tag.factiontag{
  border: 1px solid rgba(34,197,94,0.35);
  background: linear-gradient(
    90deg,
    rgba(34,197,94,0.38) 0%,
    rgba(34,197,94,0.10) 60%,
    rgba(34,197,94,0.00) 100%
  );
}

/* Faction pill (fid) — green -> transparent gradient */
.modal-subtitle-inline{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-faction-pill{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  padding: 4px 10px;
  border-radius: 999px;

  border: 1px solid rgba(34,197,94,0.35);
  background: linear-gradient(
    90deg,
    rgba(34,197,94,0.38) 0%,
    rgba(34,197,94,0.10) 60%,
    rgba(34,197,94,0.00) 100%
  );
}


.v a {
    color: #8cda6d;
}

/* Fade text for empty stat boxes (e.g., "STA —") */
.statbox.stat-empty .stat-k,
.statbox.stat-empty .stat-v {
  opacity: 0.5;
}



/* -------------------------------------------
   Dark themed scrollbars (MODALS)
   - Chrome/Edge/Safari: ::-webkit-scrollbar*
   - Firefox: scrollbar-color / scrollbar-width
-------------------------------------------- */

/* You can tweak these 3 if you want it darker/lighter */
:root{
  --scroll-track: rgba(0,0,0,0.35);
  --scroll-thumb: rgba(255,255,255,0.18);
  --scroll-thumb-hover: rgba(255,255,255,0.28);
}

/* Targets the actual scrolling containers used by your modals */
.modal,
.modal-card,
#itemModalKV,
#colsWrap{
  scrollbar-color: var(--scroll-thumb) var(--scroll-track); /* Firefox */
  scrollbar-width: thin; /* Firefox */
}

/* Chrome/Edge/Safari */
.modal::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
#itemModalKV::-webkit-scrollbar,
#colsWrap::-webkit-scrollbar{
  width: 12px;   /* vertical scrollbar thickness */
  height: 12px;  /* horizontal scrollbar thickness (if any) */
}

.modal::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track,
#itemModalKV::-webkit-scrollbar-track,
#colsWrap::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: 999px;
}

.modal::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb,
#itemModalKV::-webkit-scrollbar-thumb,
#colsWrap::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb);
  border-radius: 999px;

  /* This makes the thumb look “floating” like modern dark UI scrollbars */
  border: 3px solid var(--scroll-track);
}

.modal::-webkit-scrollbar-thumb:hover,
.modal-card::-webkit-scrollbar-thumb:hover,
#itemModalKV::-webkit-scrollbar-thumb:hover,
#colsWrap::-webkit-scrollbar-thumb:hover{
  background: var(--scroll-thumb-hover);
}


/* ✅ Default: make wrapper not affect desktop layout */
.filtersrow{
  display: contents;
}

/* ✅ Mobile layout */
@media (max-width: 820px){
  /* stack the whole topbar */
  .topbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* title + search input in one row */
  .leftbar{
    width: 100%;
    display: flex;
    flex-wrap: wrap;           /* lets filters go to next line */
    align-items: center;
    gap: 10px;
  }

  .leftbar .title{
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: 44%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .searchwrap{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;           /* input on first row, filters on second row */
    gap: 10px;
  }

  .searchwrap .search{
    flex: 1 1 auto;
    min-width: 0;
  }

  /* filters row becomes a real block below the search input */
  .filtersrow{
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* put the Columns button row below as well */
  .actions{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  /* ✅ Mobile: hide Clear + Reset Columns */
  #clearSearchBtn,
  #resetColumnsBtn{
    display: none !important;
  }

  /* divider becomes useless when Clear is hidden */
  .filters-divider{
    display: none !important;
  }
}

/* Quest name pill (modal -> Quests section) */
.tag.questtag{
  /* Keep your base tag look (radius/padding) but upgrade bg+border */
  border: 1px solid transparent;

  /* Fill = green -> dark/transparent, Border = green -> normal line */
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.26) 0%, rgba(34, 197, 94, 0.10) 32%, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.26) 100%) padding-box, linear-gradient(90deg, rgb(3 35 15 / 95%) 0%, var(--line, rgba(255, 255, 255, 0.12)) 100%) border-box;

  box-shadow:
    0 0 0 1px rgba(34,197,94,0.10) inset,
    0 10px 22px rgba(0,0,0,0.25);

  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

a.tag.questtag{ text-decoration: none; }

.tag.questtag:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.14) inset,
    0 14px 28px rgba(0,0,0,0.30);
}

.tag.questtag:focus-visible{
  outline: 2px solid rgba(34,197,94,0.55);
  outline-offset: 2px;
}

/* Item modal header actions */
.modal-head .modal-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Copy button: label -> checkmark transition without size change */
.btn.copybtn{
  position:relative;
  display:inline-grid;
  place-items:center;
}

.btn.copybtn .copy-label,
.btn.copybtn .copy-check{
  grid-area: 1 / 1;
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}

.btn.copybtn .copy-check{
  opacity:0;
  transform: translateY(4px) scale(.96);
}

.btn.copybtn.is-done .copy-label{
  opacity:0;
  transform: translateY(-4px) scale(.98);
}

.btn.copybtn.is-done .copy-check{
  opacity:1;
  transform: translateY(0) scale(1);
}


/* -------------------------
   Scroll to Top button
   (smooth fade/slide in)
------------------------- */
.scrolltop-btn{
  position: fixed;
  right: 5px;
  bottom: 8px;
  width: 54px;
  height: 54px;
  border-radius: 16px;

  /* ✅ always render (so opacity can animate) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background: rgba(10, 12, 16, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 34px rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  cursor: pointer;
  z-index: 9999;

  /* ✅ hidden state (animatable) */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;

  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    background 140ms ease,
    border-color 140ms ease;
  will-change: opacity, transform;
}

.scrolltop-btn.show{
  opacity: 0.98;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scrolltop-btn:hover{
  transform: translateY(-2px) scale(1);
  border-color: rgba(255,255,255,0.22);
  background: rgba(10, 12, 16, 0.90);
}

.scrolltop-btn:active{
  transform: translateY(0) scale(0.99);
}

.scrolltop-btn:focus-visible{
  outline: 2px solid rgba(34, 197, 94, 0.7);
  outline-offset: 2px;
}

.scrolltop-btn img{
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scrolltop-btn{
    transition: none;
    transform: none;
  }
}

@media (max-width: 820px){
  .scrolltop-btn{
    right: 12px;
    bottom: 12px;
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
}




/* ------------------------------
   Fluid UI sizing (fix “tiny on some laptops”)
   ------------------------------ */
:root{
  /* Mobile ~14px, laptops ~16–18px, big screens capped */
  --fs-base: clamp(14px, 0.55vw + 12px, 18px);
  --fs-sm:   clamp(12px, 0.35vw + 10px, 16px);
  --fs-lg:   clamp(16px, 0.85vw + 12px, 24px);

  /* Optional per-device bump set by JS (defaults to 0) */
  --ui-add: 0px;
}

html{
  font-size: calc(var(--fs-base) + var(--ui-add));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  font-size: 1rem;
  line-height: 1.35;
}

/* Force key UI pieces to follow the new scaling even if old CSS used px */
.title{ font-size: 1rem; }

small,
.muted,
.itemmeta{
  font-size: 0.75rem;
}

.btn,
.select,
.search,
input,
button,
th,
td{
  font-size: 0.7rem;
}

.itemname{ font-size: 0.90rem; }

.close { font-size:0.7rem; }
.modal-title{ font-size: 1.1rem; }
.modal-card{ font-size: 0.98rem; }

.kv .k{ font-size: 0.9rem; }
.kv .v{ font-size: 0.95rem; }

/* ✅ Mobile: nudge everything a bit smaller */
@media (max-width: 820px){
  :root{
    /* slightly smaller base scale on phones */
    --fs-base: clamp(13px, 0.40vw + 11px, 16px);
    --fs-sm:   clamp(11px, 0.30vw + 9px, 14px);
    --fs-lg:   clamp(15px, 0.65vw + 12px, 20px);
  }

  /* tighten key UI bits a touch */
  .title{ font-size: 1.12rem; }
  .itemname{ font-size: 1.00rem; }

  small,
  .muted,
  .itemmeta{
    font-size: 0.85rem;
  }

  .btn,
  .select,
  .search,
  input,
  button,
  th,
  td{
    font-size: 0.7rem;
  }

  .modal-title{ font-size: 1.05rem; }
  .modal-card{ font-size: 0.95rem; }
  .fo2-compare-label { display:none; }
}



/* -------------------------------------------
   Item Modal Header (mobile)
   - Row 1: Item name + Close (inline)
   - Row 2: Copy URL + Compare (inline)
-------------------------------------------- */
@media (max-width: 820px){
  /* Only the ITEM modal header (not columns modal) */
  #itemModal .item-modal-head{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title close"
      "copy  compare";
    gap: 8px 10px;
    align-items: center;
  }

  /* Let the children of .modal-actions become grid items (no DOM change) */
  #itemModal .item-modal-head .modal-actions{
    display: contents;
  }

  /* Row 1 */
  #itemModalTitle{
    grid-area: title;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #closeItemBtn{
    grid-area: close;
    justify-self: end;
    white-space: nowrap;
  }

  /* Row 2 */
  #copyItemUrlBtn{
    grid-area: copy;
    justify-self: stretch;
    width: 100%;
  }

  /* Compare button (covers common IDs/classes your compare.js might use) */
  #itemModal .item-modal-head #compareBtn,
  #itemModal .item-modal-head #compareItemBtn,
  #itemModal .item-modal-head .fo2-compare-btn{
    grid-area: compare;
    justify-self: end;
    white-space: nowrap;
  }

  /* Nice if compare label is already hidden on mobile */
  #itemModal .item-modal-head .btn{
    justify-content: center;
  }
}


.canvas-shell {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 10px;
    backdrop-filter: blur(4px);
    flex-wrap: wrap;
}


/* =========================
   Guilds Page
   ========================= */

.guilds-shell{
  margin-top: 10px;
}

.guilds-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px){
  .guilds-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .guilds-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .guilds-grid{ grid-template-columns: 1fr; }
}

.guild-card{
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-height: 132px;
}

.guild-card:hover{
  background: rgba(255,255,255,0.08);
  border-color: var(--line2);
  transform: translateY(-1px);
}

.guild-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.guild-card-name{
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.guild-card-badges{
  display:flex;
  gap: 6px;
  align-items:center;
  flex: 0 0 auto;
}

.guild-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.65rem;
  white-space: nowrap;
}

.guild-badge.gom{
  border-color: rgba(34,197,94,0.35);
  background: linear-gradient(
    90deg,
    rgba(34,197,94,0.34) 0%,
    rgba(34,197,94,0.10) 60%,
    rgba(34,197,94,0.00) 100%
  );
  color: rgba(255,255,255,0.92);
}

.guild-card-stats{
  display:grid;
  grid-template-columns: 1fr;
  gap: 5px;
  font-size: 0.78rem;
}

.guild-stat{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
}
.guild-stat strong{
  color: var(--txt);
  font-weight: 400;
}

.guild-card-actions{
  margin-top: auto;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  justify-content: space-between;
}

.guild-card-actions-left{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}

.guild-card-actions-right{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

.guild-apply-link{
  text-decoration: none;
}

.guild-vote-btn{
  padding: 7px 10px;
}

.guild-vote-btn.is-selected{
  border: 1px solid rgba(34,197,94,0.45);
  background: rgba(34,197,94,0.12);
}

.guilds-add-panel{
  margin-top: 10px;
}

.guilds-add-row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.guilds-add-row .search{
  flex: 1 1 auto;
  min-width: 0;
}

.guilds-add-status{
  margin-top: 8px;
  font-size: 0.75rem;
}
.guilds-add-status--pending{ color: rgba(255,255,255,0.75); }
.guilds-add-status--success{ color: #22c55e; }
.guilds-add-status--error{ color: #f97373; }

/* =========================
   Guild Modal
   ========================= */

body.guild-modal-open{
  overflow: hidden;
}

.guild-modal-members-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px){
  .guild-modal-members-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .guild-modal-members-grid{ grid-template-columns: 1fr; }
}

.guild-modal-member-card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  cursor: pointer;
}

.guild-modal-member-card:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.guild-modal-member-sprite {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    background-size: 300%;
    background-position: center 65%;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex: 0 0 auto;
}

.guild-modal-member-main{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.guild-modal-member-name{
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guild-modal-member-sub{
  font-size: 0.72rem;
  color: var(--muted);
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guild-gear-icons{
  margin-top: 6px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guild-gear-icon{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}

/* =========================
   Member Items Modal
   ========================= */

.member-items-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px){
  .member-items-grid{ grid-template-columns: 1fr; }
}

.member-item-card{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  text-decoration:none;
  color: var(--txt);
}

.member-item-card:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
}

.member-item-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.member-item-main{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.member-item-name{
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-item-meta{
  font-size: 0.72rem;
  color: var(--muted);
}

/* =========================
   Guild of the Month Banner
   ========================= */

.gom-banner{
  margin-top: 10px;
  margin-bottom: 10px;

  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;

  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.88) 0%, rgba(10, 12, 16, 0.72) 100%) padding-box,
    linear-gradient(90deg,
      rgba(34,197,94,0.60) 0%,
      rgba(255,255,255,0.18) 40%,
      rgba(34,197,94,0.28) 100%
    ) border-box;

  box-shadow: 0 18px 54px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);

  display:flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.gom-banner-main{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  flex: 1 1 420px;
}

.gom-banner-title{
  display:flex;
  align-items:center;
  gap: 10px;

  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}

.gom-coin{
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}

.gom-banner-text{
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}

.gom-gold{
  color: #fbbf24;
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(251,191,36,0.22);
}

.gom-banner-divider{
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.12);
  opacity: 0.8;
}

.gom-banner-quiz{
  flex: 1 1 520px;
  min-width: 260px;

  display:flex;
  flex-direction: column;
  gap: 6px;
}

.gom-banner-quiz-title{
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(34,197,94,0.95);
}

.gom-banner-quiz-text{
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

@media (max-width: 820px){
  .gom-banner{
    flex-direction: column;
    align-items: stretch;
  }
  .gom-banner-divider{
    display:none;
  }
}


/* /market/styles.css — Market UI (guilds-vibe)
   Loaded AFTER /guilds/styles.css
*/

/* Fallbacks (in case guilds styles ever changes) */
:root{
  --bg: #0b0f16;
  --panel: rgba(18, 22, 30, 0.92);
  --line: rgba(255,255,255,0.12);
  --txt: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.66);
  --muted2: rgba(255,255,255,0.50);
  --good: rgb(44,217,105);
  --bad: rgb(255, 85, 85);
}

.market-shell{
  margin: 26px auto 60px;
  padding: 0 16px;
}

.market-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin: 10px 0 14px;
}

.market-title{
  margin:0;
  font-size: 1.35rem;
  letter-spacing: .2px;
  color: var(--txt);
  font-weight: 200;
}

.market-subtitle{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.35;
}

.market-header-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width: 220px;
}

.market-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
  color: var(--muted);
  font-size: .82rem;
  user-select:none;
}

.market-pill-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(44,217,105,0.18);
}

.market-status-text{
  color: var(--muted2);
  font-size: .82rem;
}
.market-status-text.error{ color: var(--bad); }

.market-layout{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items:start;
}

@media (max-width: 1100px){
  .market-layout{ grid-template-columns: 1fr; }
  .market-header-side{ align-items:flex-start; }
}

.market-column{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* ✅ NEW: Sticky right column (desktop only)
   - It scrolls normally until it reaches `top`, then it sticks and follows you.
   - It will stop sticking when the .market-layout section ends.
*/
.market-column-right{
  position: sticky;
  top: 16px; /* tweak this if you want it lower/higher (e.g. under a sticky nav) */
}

/* Disable sticky in single-column mobile layout */
@media (max-width: 1100px){
  .market-column-right{
    position: static;
    top: auto;
  }
}

/* Card = guilds-like panel */
.market-card{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.32);
  overflow:hidden;
}

.market-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.market-card-title{
  margin:0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--txt);
}

.market-card-tag{
  font-size: .74rem;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  padding: 4px 8px;
  border-radius: 999px;
  white-space:nowrap;
}

.market-card-body{
  padding: 12px 14px 14px;
}

.market-help{
  margin: 10px 0 0;
  color: var(--muted2);
  font-size: .82rem;
  line-height: 1.35;
}
.market-help-text{ margin-top: 10px; }

.market-muted{
  color: var(--muted);
  font-size: .9rem;
}

/* Toolbars / toggles */
.market-movers-toolbar,
.market-makers-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.market-sort-toggle,
.market-makers-toggle,
.market-chart-range-toggle{
  display:inline-flex;
  gap: 8px;
  flex-wrap:wrap;
}

.market-sort-btn,
.market-makers-btn,
.market-range-btn{
  appearance:none;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.20);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 10px;
  font: inherit;
  font-size: .82rem;
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.market-sort-btn:hover,
.market-makers-btn:hover,
.market-range-btn:hover{
  transform: translateY(-1px);
  color: var(--txt);
  background: rgba(0,0,0,0.28);
}
.market-sort-btn.active,
.market-makers-btn.active,
.market-range-btn.active{
  color: var(--txt);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}

/* Forms */
.market-form-grid{ display:block; }
.market-label{
  display:block;
  font-size: .8rem;
  color: var(--muted);
  margin: 0 0 6px;
}
.market-actions-row{
  display:flex;
  gap: 10px;
  align-items:center;
}
.market-actions-row .search{
  flex: 1 1 auto;
  min-width: 220px;
}

/* Tables */
.market-summary-table-wrap,
.market-movers-table-wrap,
.market-makers-table-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.market-summary-table,
.market-movers-table,
.market-makers-table{
  width: 100%;
  border-collapse: collapse;
}

.market-summary-table thead th,
.market-movers-table thead th,
.market-makers-table thead th{
  text-align:left;
  font-weight: 500;
  font-size: .78rem;
  color: var(--muted);
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid var(--line);
  padding: 10px 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.market-summary-table td,
.market-movers-table td,
.market-makers-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--txt);
  font-size: .86rem;
}

.market-summary-table tr:last-child td,
.market-movers-table tr:last-child td,
.market-makers-table tr:last-child td{
  border-bottom:none;
}

.num{ text-align:right; }

.market-summary-item-name{
  display:flex;
  align-items:baseline;
  gap: 6px;
  max-width: 520px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.market-summary-row,
.market-movers-row,
.market-makers-row{
  cursor:pointer;
}
.market-summary-row:hover,
.market-movers-row:hover,
.market-makers-row:hover{
  background: rgba(255,255,255,0.05);
}

.market-summary-row.active,
.market-movers-row.active,
.market-makers-row.active{
  background: rgba(44,217,105,0.08);
  outline: 1px solid rgba(44,217,105,0.22);
  outline-offset: -1px;
}

.market-delta{
  font-variant-numeric: tabular-nums;
}
.market-delta.pos{
  color: var(--good);
}

/* Chart area */
.market-chart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.market-history-header{
  color: var(--muted);
  font-size: .82rem;
  margin: 2px 0;
}

.market-chart-wrap{
  height: 240px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.22);
  padding: 10px;
  margin-bottom: 12px;
}

/* History list */
.market-history-list{
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  padding: 10px;
}

.market-history-items{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.market-history-item{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 10px 10px;
}

.market-history-main{
  display:flex;
  align-items:baseline;
  gap: 8px;
}
.market-history-price{
  font-size: 1.05rem;
  font-weight: 500;
}
.market-history-currency,
.market-history-qty{
  color: var(--muted);
  font-size: .82rem;
}

.market-history-meta{
  margin-top: 6px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  color: var(--muted2);
  font-size: .78rem;
}

/* Stats summary blocks */
.market-stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.market-stat-title{
  font-size: .95rem;
  font-weight: 500;
  color: var(--txt);
}
.market-stat-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  padding: 6px 10px;
  color: var(--muted);
  font-size: .82rem;
}
.market-stat-pill .value{ color: var(--txt); }

.market-stat-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 520px){
  .market-stat-grid{ grid-template-columns: 1fr; }
}

.market-stat-block{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 10px;
}
.market-stat-block .label{
  color: var(--muted);
  font-size: .78rem;
}
.market-stat-block .value{
  margin-top: 6px;
  color: var(--txt);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Toast */
.market-toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--txt);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  font-size: .85rem;
  max-width: min(740px, calc(100vw - 28px));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.market-toast.visible{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* ✅ Top list dropdown */
.market-card-compact{
  overflow: visible;
}

.market-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  border: 1px solid var(--line);
  background: rgba(0,0,0,0.20);
  color: var(--txt);
  border-radius: 999px;
  padding: 7px 34px 7px 12px;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  line-height: 1.1;

  /* tiny chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.market-select:hover{
  background-color: rgba(0,0,0,0.28);
}

.market-select:focus{
  outline: none;
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}


/* Left column: inline dropdowns (Top lists + Top rising/money makers) */
.market-left-switcher{
  display:flex;
  gap:10px;
  align-items:center;
}

.market-left-switcher .market-select{
  flex: 1 1 0;
  min-width: 0;
}

/* On small screens, stack them */
@media (max-width: 820px){
  .market-left-switcher{
    flex-direction: column;
    align-items: stretch;
  }
}


/* =========================================================
   Mobile Cards + Mobile Item Modal (Market)
   - Removes page-level horizontal scroll on phones by
     hiding tables and showing compact cards instead.
========================================================= */

/* Safety: never allow page-level horizontal scroll on Market */
html, body {
  overflow-x: hidden;
}

/* Cards container (hidden on desktop) */
.market-cards-wrap{
  display:none;
}

/* Card button */
.market-cardrow{
  appearance:none;
  -webkit-appearance:none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 10px 10px;
  color: var(--txt);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.market-cardrow:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.market-cardrow:active{
  transform: translateY(0px);
}

.market-cardrow.active{
  outline: 1px solid rgba(44,217,105,0.22);
  outline-offset: -1px;
  background: rgba(44,217,105,0.08);
}

/* Card layout */
.market-cardrow-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.market-cardrow-name{
  font-size: .95rem;
  line-height: 1.25;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.market-cardrow-sub{
  margin-top: 2px;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.market-cardrow-badges{
  display:flex;
  gap: 6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
}

.market-mini-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}

.market-mini-pill.good{
  border-color: rgba(44,217,105,0.32);
  background: rgba(44,217,105,0.10);
  color: rgba(255,255,255,0.92);
}

.market-mini-pill.bad{
  border-color: rgba(255,85,85,0.35);
  background: rgba(255,85,85,0.10);
  color: rgba(255,255,255,0.92);
}

.market-cardrow-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.market-cardrow-kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: .80rem;
  color: var(--txt);
}

.market-cardrow-kv .k{
  color: var(--muted);
  white-space: nowrap;
}

.market-cardrow-kv .v{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ✅ Mobile: hide the tables, show cards */
@media (max-width: 820px){
  .market-summary-table-wrap,
  .market-movers-table-wrap,
  .market-makers-table-wrap{
    display:none !important;
  }

  .market-cards-wrap{
    display:flex;
    flex-direction:column;
    gap: 10px;
  }
}

/* -------------------------
   Mobile Item Modal
------------------------- */
body.market-modal-open{
  overflow: hidden;
}

.market-modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(0,0,0,0.66);
  z-index: 999999;
}

.market-modal.open{
  display:flex;
}

.market-modal-card{
  width: min(920px, 100%);
  max-height: 88vh;
  overflow:auto;
  border: 1px solid var(--line);
  background: rgba(10, 12, 16, 0.94);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

.market-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.market-modal-title{
  font-size: 1.05rem;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.market-modal-body{
  padding: 12px 14px 14px;
}

.market-modal-chart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 10px;
}

.market-chart-wrap--modal{
  height: 240px;
}