:root{
  --page-bg:#28221d; --text-color:#d9d9d9;
  --topbar-bg:#312a25; --topbar-border:rgba(255,255,255,.08);
  --tab-text:#e6e7eb; --tab-border:#444444; --tab-bg:transparent;
  --tab-bg-hover:rgba(255,255,255,.05); --tab-bg-active:rgba(255,255,255,.12);
  --tab-border-active:#555555;

  --panel-bg:#28221d; --section-bg:#312a25; --section-border:#6c665f;

  --tile-bg:#2b2f36; --tile-border:rgba(255,255,255,.08);
  --tile-hover-border:#ffffff2e; --tile-shadow:0 1px 2px rgba(0,0,0,.25);

  --obtained-bg:#2f8f46; --obtained-border:rgba(0,0,0,.15);
  --obtained-inset:inset 0 0 0 1px rgba(255,255,255,.12);

  --error-bg:rgba(220,53,69,.15); --error-border:rgba(220,53,69,.35);
}

html, body { background: var(--page-bg); color: var(--text-color); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; }
.wrap { max-width:1080px; margin:0 auto; padding:.5rem .75rem 2rem; }

/* ===== Top bar / nav ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--topbar-border);
  padding: .5rem .75rem;
  display: flex; align-items: center; gap: .75rem;
  justify-content: flex-start;
}

/* Tabs list */
.tabs {
  display: inline-flex; gap: .5rem;
}

/* Links/buttons */
.tab_btn {
  appearance:none; border:1px solid var(--tab-border); background:var(--tab-bg);
  color:var(--tab-text); padding:.45rem .8rem; border-radius:.5rem; cursor:pointer;
  font:inherit; font-weight:600; text-decoration:none; display:inline-flex; align-items:center;
}
.tab_btn:hover { background: var(--tab-bg-hover); }
.tab_btn.active { background: var(--tab-bg-active); border-color: var(--tab-border-active); }

/* Hamburger button */
.hamburger {
  appearance: none; border: 1px solid var(--tab-border); background: var(--tab-bg);
  color: var(--tab-text); border-radius: .5rem; cursor: pointer;
  width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
}
.hamburger:focus { outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }
.hamburger:hover { background: var(--tab-bg-hover); }

/* Three bars icon */
.hamburger .bar, .hamburger::before, .hamburger::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--tab-text);
  border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
}
.hamburger .bar { }
.hamburger::before { position: relative; top: -6px; }
.hamburger::after  { position: relative; top: 6px; }

/* Animate into "X" when open */
.topbar.open .hamburger .bar { opacity: 0; }
.topbar.open .hamburger::before { transform: translateY(6px) rotate(45deg); }
.topbar.open .hamburger::after  { transform: translateY(-6px) rotate(-45deg); }

/* ===== Responsive behavior ===== */
/* Desktop: hamburger hidden, tabs inline */
@media (min-width: 681px){
  .hamburger { display: none; }
  .tabs { display: inline-flex; position: static; background: transparent; border: 0; padding: 0; }
}

/* Mobile: hamburger visible, tabs are a dropdown */
@media (max-width: 680px){
  .hamburger { display: inline-flex; }
  .tabs {
    display: none;                      /* hidden by default */
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    padding: .5rem .75rem .75rem;
    flex-direction: column; gap: .5rem;
  }
  .topbar.open .tabs { display: flex; } /* show when toggled */
  .tabs .tab_btn { width: 100%; justify-content: center; }
}

/* ===== Panels / content ===== */
.panel { background: var(--panel-bg); border-radius: 12px; padding: 12px; }
.subtitle { display:block; margin-bottom:.5rem; }
.error { background: var(--error-bg); border:1px solid var(--error-border); padding:.75rem; border-radius:.5rem; margin:.75rem 0; cursor: pointer; }

.chart { display:block; position:relative; clear:both; }

/* item tiles */
.node {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; box-sizing:border-box; border-radius:10px;
  background:var(--tile-bg); border:1px solid var(--tile-border); box-shadow:var(--tile-shadow);
  transition: background .12s ease, transform .05s ease, border-color .12s ease, box-shadow .12s ease;
  overflow: hidden;
}
.node:hover { border-color:var(--tile-hover-border); transform:translateY(-1px); }
.node img { width:100%; height:100%; object-fit: contain; display:block; }
.node.obtained { background:var(--obtained-bg); border-color:var(--obtained-border); box-shadow:var(--obtained-inset), 0 1px 2px rgba(0,0,0,.3); }
.node.obtained:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(0,0,0,.35); }

/* stacked sections */
.goal-stack { display:block; gap:0; width:100%; }
.goal-section { background: var(--section-bg); border: 1px solid var(--section-border); border-radius:12px; padding:12px; margin:12px 0; }
.goal-grid { display:flex; flex-wrap:wrap; gap:12px; }

.goal-section-header { display:flex; align-items:center; gap:12px; margin:0 0 10px 0; }
.goal-section-title { margin:0; font-size:1.05rem; font-weight:700; letter-spacing:.2px; opacity:.95; flex:0 0 auto; }

.goal-progress { --pg-height: 10px; --pg-bg: rgba(255,255,255,.08); --pg-fill: var(--obtained-bg); display:flex; align-items:center; gap:8px; flex:1 1 auto; }
.goal-progress-track { position:relative; height:var(--pg-height); width:100%; background:var(--pg-bg); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.goal-progress-fill { position:absolute; inset:0 auto 0 0; width:0%; background:var(--pg-fill); border-radius:999px; transition: width .18s ease; }
.goal-progress-label { font-size:.9rem; opacity:.9; white-space:nowrap; min-width:4.5ch; text-align:right; }

/* dashboard specific */
.row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; margin-bottom:12px }
@media (max-width: 520px){ .row { grid-template-columns: 1fr; } }
input,select,button { font:inherit; padding:.5rem .6rem; border-radius:10px; border:1px solid var(--section-border); background:#1b1e22; color:var(--text-color) }
button { cursor:pointer }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; margin-top:12px }
.card { background: var(--section-bg); border: 1px solid var(--section-border); border-radius: 12px; padding: 12px }
.card h3 { margin:0 0 .5rem }
.bar { height:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:999px; overflow:hidden }
.fill { height:100%; width:0; background: var(--obtained-bg) }
table { width:100%; border-collapse:collapse }

/* === TABLE STYLES === */
/* Skill cell with icon + name */
.skillcell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.skillcell img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}

th,td { padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; font-size:.95rem }
.pill { display:inline-block; padding:.15rem .5rem; border-radius:999px; border:1px solid var(--section-border); font-size:.8rem; opacity:.9 }
.ok { color:#c7ffd1; border-color:#3b6f47 }
.muted { opacity:.85 }
.foot { margin-top:16px; opacity:.85 }

/* ===== Profile switcher ===== */
.nav-right { display:flex; align-items:center; gap:.5rem; }
.profile {
  position: relative;
}
.profile__btn {
  appearance:none; border:1px solid var(--tab-border); background:var(--tab-bg);
  color:var(--tab-text); padding:.45rem .8rem; border-radius:.5rem; cursor:pointer; font:inherit; font-weight:600;
}
.profile__btn:hover { background:var(--tab-bg-hover); }
.profile__menu {
  position:absolute; right:0; top:calc(100% + 6px); min-width: 220px;
  background: var(--topbar-bg); border:1px solid var(--topbar-border); border-radius:10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35); display:none; padding:6px;
  z-index:50;
}
.profile.open .profile__menu { display:block; }
.profile__section { padding:6px; border-bottom:1px solid var(--topbar-border); }
.profile__section:last-child { border-bottom:none; }
.profile__item {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.profile__item:hover { background: rgba(255,255,255,.05); }
.profile__name { font-weight:600; }
.profile__hint { opacity:.7; font-size:.85rem; }
.profile__actions { display:flex; gap:6px; }
.icon-btn {
  appearance:none; border:1px solid var(--tab-border); background:var(--tab-bg);
  color:var(--tab-text); border-radius:.45rem; padding:.25rem .45rem; cursor:pointer; font:inherit;
}
.icon-btn:hover { background:var(--tab-bg-hover); }

/* Mobile alignment with hamburger */
.topbar__left { display:flex; align-items:center; gap:.5rem; }
.topbar__right {
  margin-left: auto;   /* pushes it to the right edge */
  display: flex; align-items: center; gap: .5rem;
}

@media (max-width: 680px){
  .topbar { align-items:center; }
}
/* Milestones summary rows on the dashboard */
.msum-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}
.msum-name { font-weight: 700; opacity: .95; }
.msum-bar  { display: flex; align-items: center; gap: 8px; }
.msum-meta { opacity: .9; min-width: 6ch; text-align: right; }

/* Make dashboard milestone bars stretch full width */
.msum-bar .bar {
  flex: 1 1 auto;     /* stretch to fill the row */
  width: 100%;        /* ensure it spans the available space */
  min-width: 120px;   /* optional: keeps it visible on tiny screens */
}

.msum-bar .fill {
  display: block;     /* ensures height:100% applies cleanly */
}
/* ===== Skills Panel (dashboard) ===== */
.skills-panel {
  background: #2b2520;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 10px;
  max-width: 420px;
}

/* Header with combat level */
.skills-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 10px; margin-bottom: 8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: #332c26;
}
.skills-header .left { display:flex; align-items:center; gap:8px; font-weight:800; opacity:.95 }
.skills-header .left img { width:22px; height:22px; display:block }
.skills-header .clvl { font-weight:800; color:#ffd75e; font-size:1.25rem; }

/* Grid: 3 columns x 8 rows (23 skills + 1 total badge) */
.skills-grid {
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 52px;
}

/* Skill tile */
.skill-tile {
  position: relative;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding: 6px 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(0,0,0,.18); /* or any color you intend */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
  min-height: 44px;
}
.skill-tile .icon { width:35px; height:35px; display:block; object-fit:contain; margin: auto; }
.skill-tile .lvl {
  font-weight:800; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 2px 6px;
}

/* XP progress to next level */
.skill-tile .prog {
  position:absolute; left:8px; right:8px; bottom:6px; height:6px;
  border-radius:999px; overflow:hidden;
  background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.10);
}
.skill-tile .prog .f { width:0%; height:100%; background: var(--obtained-bg); }

/* Total level badge (bottom-right of the skills grid) */
.total-tile {
  grid-column: 3;                /* keep it in the third column only */
  justify-self: stretch;         /* expand to fill the cell, no overlap */
  align-self: center;
  background: #000000cc;         /* solid black with subtle transparency */
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  box-sizing: border-box;
}

.total-tile .lab {
  font-size: .85rem;
  opacity: .9;
}

.total-tile .val {
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffd75e;
}


/* Widen the content container a bit for 3 columns */
.wrap { max-width: 1320px; }

/* 3-column dashboard layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* left / middle / right */
  gap: 12px;
  align-items: start;
}

/* Stack multiple cards in each column with spacing */
.col { display: grid; gap: 12px; }

/* Make the milestone/gear bars expand inside summary rows */
.msum-bar .bar { flex: 1 1 auto; width: 100%; min-width: 120px; }
.msum-bar .fill { display: block; }

/* Responsive collapse:
   - 2 columns on medium screens (left+mid on first row, right below)
   - 1 column on small screens (everything stacked) */
@media (max-width: 1200px){
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  #dash-right { grid-column: 1 / -1; } /* put Top/Bottom 5 under the first row */
}
@media (max-width: 720px){
  .dashboard-grid { grid-template-columns: 1fr; }
}
.skills-grid > * {
  min-height: 52px;
}
/* Shared layout for Top/Bottom 5 tables */
table.skilltbl {
  width: 100%;
  table-layout: fixed;               /* respect <col> widths */
}

/* Column widths:
   - Skill: flexes to fill remaining space
   - Level: small (supports up to 3 digits)
   - XP: wide enough for "200,000,000" */
table.skilltbl col.col-skill { width: auto; }
table.skilltbl col.col-level { width: 6ch; }   /* 3 digits + padding */
table.skilltbl col.col-xp    { width: 13ch; }  /* "200,000,000" fits */

/* Alignment + number legibility */
table.skilltbl th:nth-child(2),
table.skilltbl td:nth-child(2),
table.skilltbl th:nth-child(3),
table.skilltbl td:nth-child(3) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* even digit widths */
}

/* Keep the Skill cell left-aligned and allow icon+name to fit */
table.skilltbl th:nth-child(1),
table.skilltbl td:nth-child(1) {
  text-align: left;
}

/* If a skill name ever overflows, gracefully clip with ellipsis */
table.skilltbl td:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Parent 3-col dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal columns */
  gap: 12px;
  align-items: start;        /* keep columns pinned to the top */
}

/* Each column stacks its children vertically */
.col {
  display: grid;
  grid-auto-rows: min-content;  /* each card takes only the height it needs */
  gap: 12px;
}

/* Tables stay within their card width */
table.skilltbl { 
  width: 100%; 
  table-layout: fixed; 
}

/* (from earlier) make the progress bars stretch properly in summaries */
.msum-bar .bar { flex: 1 1 auto; width: 100%; min-width: 120px; }
.msum-bar .fill { display: block; }

/* 1) Responsive grid: 3 cols on desktop, stack on mobile */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  /* ensure each column stretches full width and avoids overlap */
  .dashboard-grid .col {
    width: 100%;
  }
}

/* Safety: prevent any absolute or fixed sizing from causing overlap */
#dash-mid, #dash-left, #dash-right {
  position: static;
  max-width: 100%;
  overflow: visible;
}

/* Card basics so content wraps instead of overlaying */
.card {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* 2) Center icons inside the skills panel cells */
#skills_panel td, 
#skills_panel .cell,
#skills_panel .icon-cell {
  display: grid;
  place-items: center;   /* centers both ways */
  text-align: center;
  vertical-align: middle;
}

/* If the icons are inline images or svg, ensure they do not stretch */
#skills_panel img, 
#skills_panel svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Table layout hardening so cells do not collapse oddly on mobile */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 6px 8px;
  box-sizing: border-box;
  word-break: break-word;
}