/* guilds/styles.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;
  }
}

/* Guild modal members head + search */
.guild-members-head{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 10px;
}

.guild-members-head h3{
  margin: 0;
}

.guild-members-search{
  flex: 1 1 260px;
  max-width: 360px;
}

#guildMemberSearchMeta{
  margin: 0 0 10px 0;
  font-size: 0.75rem;
  color: var(--muted);
}

@media (max-width: 560px){
  .guild-members-search{
    max-width: none;
    width: 100%;
  }
}

.modal-card{
  position: relative;
  z-index: 10000;
}

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

    /* ✅ stop column layout from creating big vertical gaps */
    justify-content: flex-start;

    /* optional: slightly tighter spacing on mobile */
    gap: 10px;
  }

  .gom-banner-divider{
    display:none;
  }

  /* ✅ critical: prevent flex-grow in column mode (causes empty space) */
  .gom-banner-main,
  .gom-banner-quiz{
    flex: 0 0 auto;
    min-width: 0;
  }
}