/* The Game Guide. It keeps the game's own dark look: the icons, quality colours and tables come
   straight from the game, and they are drawn for a dark background. The first block holds the
   old site's colour settings and frames the guide as a dark panel on the page; everything after
   the marked line is the old site's guide styling, unchanged. */
.guide-shell {

      --bg: #0a0b10;
      --panel: rgba(10, 12, 20, 0.85);
      --panel-border: rgba(255,255,255,0.08);
      --gold: #d4a84b;
      --gold-light: #f5d98a;
      --red: #c0392b;
      --red-glow: #e74c3c;
      --text: #e0ddd5;
      --text-dim: #8a8680;
      --accent: #ff6b4a;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 28px 28px;
  border: 6px solid #000;
  background: rgba(14, 13, 20, 0.94);
  color: var(--text);
  text-align: center;
}

/* ===== old site's guide styling starts ===== */
    .guide-panel {
      display: none;
      width: min(500px, 90vw);
      background: rgba(10, 12, 20, 0.75);
      border: 1px solid rgba(212,168,75,0.15);
      border-radius: 2px;
      padding: 16px;
      text-align: center;
    }
    .guide-panel.active { display: block }
    .guide-panel h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }
    .guide-cats {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .guide-cat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 2px;
      border: 1px solid transparent;
      transition: border-color 0.2s, background 0.2s;
    }
    .guide-cat:hover { border-color: rgba(212,168,75,0.3); background: rgba(255,255,255,0.03) }
    .guide-cat .icon {
      width: 34px;
      height: 34px;
      background-image: url('/sprites/items.png');
      background-repeat: no-repeat;
      image-rendering: pixelated;
      transform: scale(1.5);
      margin: 6px 0;
    }
    .guide-cat .icon.jutsu {
      width: 32px;
      height: 32px;
      background-image: url('/sprites/jutsu_icons.png');
    }
    .guide-cat .label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* Guide detail view */
    .guide-detail {
      display: none;
      width: min(500px, 90vw);
      max-height: 55vh;
      background: rgba(10, 12, 20, 0.75);
      border: 1px solid rgba(212,168,75,0.15);
      border-radius: 2px;
      padding: 14px;
      overflow-y: auto;
    }
    .guide-detail.active { display: block }
    .guide-detail::-webkit-scrollbar { width: 4px }
    .guide-detail::-webkit-scrollbar-thumb { background: rgba(212,168,75,0.3); border-radius: 4px }
    .guide-back {
      display: inline-block;
      margin-bottom: 10px;
      font-size: 12px;
      font-weight: 700;
      color: var(--gold);
      cursor: pointer;
      letter-spacing: 1px;
      text-transform: uppercase;
    }
    .guide-back:hover { color: var(--gold-light) }
    .guide-detail h3 {
      font-family: 'Rajdhani', sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--gold);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .guide-items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 6px;
    }
    .guide-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 2px;
      border: 1px solid rgba(255,255,255,0.05);
      transition: border-color 0.15s;
      cursor: default;
      position: relative;
    }
    .guide-item:hover { border-color: rgba(212,168,75,0.25) }
    .guide-item .gi-icon {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }
    .guide-item .gi-icon.jutsu {
      width: 32px;
      height: 32px;
    }
    .guide-item .gi-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.2;
    }
    .guide-item .gi-sub {
      font-size: 10px;
      color: var(--text-dim);
      line-height: 1.2;
    }

    /* Systems / mechanics articles */
    .sys-nav {
      display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
      margin-bottom: 14px;
    }
    .sys-tab {
      padding: 5px 12px; border-radius: 2px; cursor: pointer;
      font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
      color: var(--text-dim); border: 1px solid rgba(255,255,255,0.08);
      background: transparent; transition: color .15s, border-color .15s, background .15s;
    }
    .sys-tab:hover { color: var(--gold-light); border-color: rgba(212,168,75,0.35) }
    /* Forces the tabs after it onto a fresh row. .sys-nav is a wrapping flexbox, so a
       full-width zero-height item consumes the rest of the line and pushes the next tab down. */
    .sys-navbreak { flex-basis: 100%; height: 0; margin: 0; padding: 0 }
    .sys-tab.active {
      color: var(--gold); border-color: var(--gold);
      background: rgba(212,168,75,0.1);
    }
    .sys-article { text-align: left; animation: sysFade .25s ease }
    @keyframes sysFade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
    .sys-article h4 {
      font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 700;
      color: var(--gold-light); letter-spacing: 1px; margin: 0 0 4px;
      display: flex; align-items: center; gap: 8px;
    }
    .sys-article h4 .sys-icon {
      width: 34px; height: 34px; flex-shrink: 0;
      background-image: url('/sprites/items.png');
      background-repeat: no-repeat;
      image-rendering: pixelated; image-rendering: crisp-edges;
    }
    .sys-article .sys-lede {
      font-size: 12.5px; color: var(--text); line-height: 1.5; margin: 0 0 12px;
    }
    .sys-article .sys-sub {
      font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--gold); margin: 14px 0 6px; padding-bottom: 4px;
      border-bottom: 1px solid rgba(212,168,75,0.18);
    }
    .sys-article p { font-size: 12px; color: var(--text); line-height: 1.55; margin: 0 0 8px }
    .sys-article p.dim { color: var(--text-dim) }
    .sys-article b { color: var(--gold-light); font-weight: 700 }
    .sys-article ul { margin: 0 0 8px; padding-left: 16px }
    .sys-article li { font-size: 12px; color: var(--text); line-height: 1.5; margin: 2px 0 }
    .sys-cards { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px }
    .sys-card {
      font-size: 12px; color: var(--text); line-height: 1.5;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(212,168,75,0.18);
      border-radius: 3px; padding: 9px 11px;
    }
    .sys-card b { color: var(--gold-light); font-weight: 700 }
    .sys-card .sys-card-title {
      display: block; text-align: center; color: var(--gold-light);
      font-weight: 700; font-size: 12.5px; letter-spacing: .5px;
      margin-bottom: 5px; padding-bottom: 5px;
      border-bottom: 1px solid rgba(212,168,75,0.15);
    }
    .sys-note {
      font-size: 11px; color: var(--text-dim); line-height: 1.5;
      background: rgba(255,255,255,0.025); border-left: 2px solid rgba(212,168,75,0.4);
      padding: 7px 10px; border-radius: 0 2px 2px 0; margin: 4px 0 8px;
    }
    .sys-note b { color: var(--gold-light) }
    .sys-table {
      width: 100%; border-collapse: collapse; margin: 2px 0 10px;
      font-size: 11.5px; font-variant-numeric: tabular-nums;
    }
    .sys-table th {
      text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--text-dim);
      padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .sys-table td {
      padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text);
    }
    .sys-table td.num { text-align: right; color: var(--gold-light); font-weight: 600 }
    .sys-table tr:last-child td { border-bottom: none }
    /* Profession tables carry a column per level, so they can outgrow the panel on a
       narrow screen. Scroll the TABLE, never the page. */
    .sys-table-wrap { overflow-x: auto; margin: 2px 0 10px; -webkit-overflow-scrolling: touch }
    .sys-table-wrap .sys-table { margin: 0; min-width: 340px }
    .sys-table-wrap .sys-table th:not(:first-child),
    .sys-table-wrap .sys-table td:not(:first-child) { text-align: right; white-space: nowrap }
    .sys-table-wrap .sys-table td:first-child { white-space: nowrap }
    /* Rankings: the trailing xp figure is context, not the headline number. */
    .sys-table td.rank-sub { color: var(--text-dim); font-size: 10.5px; text-align: right; white-space: nowrap }
    .q-chip {
      display: inline-block; padding: 1px 8px; border-radius: 2px;
      font-size: 11px; font-weight: 700; letter-spacing: .5px;
      border: 1px solid currentColor;
    }
    .sys-gems { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px }
    .sys-gem {
      display: flex; align-items: center; gap: 4px;
      padding: 3px 8px 3px 4px; border-radius: 2px;
      border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
    }
    .sys-gem .gem-icon {
      width: 26px; height: 26px; flex-shrink: 0;
      background-image: url('/sprites/items.png');
      background-repeat: no-repeat;
      image-rendering: pixelated; image-rendering: crisp-edges;
    }
    .sys-gem .gl { font-size: 11px; font-weight: 700; color: var(--text) }
    .sys-flow {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
      margin: 4px 0 10px; font-size: 11px;
    }
    .sys-flow .step {
      padding: 4px 9px; border-radius: 2px; font-weight: 700;
      border: 1px solid rgba(212,168,75,0.3); color: var(--gold-light);
      background: rgba(212,168,75,0.06);
    }
    .sys-flow .arr { color: var(--text-dim); font-weight: 700 }

    /* In-game UI icons, taken straight from the game's own gui.png atlas so the guide shows
       exactly what the player sees on their TAB screen. 512x512 sheet, 32x32 cells, drawn at
       native size so the inline background-position stays valid. */
    .sys-guiicon {
      display: inline-block; width: 32px; height: 32px; vertical-align: middle;
      background-image: url('full/gui.png');
      background-repeat: no-repeat;
      background-size: 512px 512px;
      image-rendering: pixelated; image-rendering: crisp-edges;
    }
    /* ⛔ DO NOT rescale these with background-size. The cell offset is written inline as
       background-position in UNSCALED 512px atlas coordinates, so changing background-size
       alone slides the cell out of the box and you get a sliver of the neighbouring sprite.
       That is exactly what broke the heading icon. Keep every .sys-guiicon at its native
       32x32 with a 512px sheet; the only safe override is flex behaviour. */
    .sys-article h4 .sys-guiicon { flex-shrink: 0 }
    /* Screenshot inside an article. Matches the install-guide shots further up the page. */
    .sys-shot {
      width: 100%; max-width: 100%; display: block; margin: 8px 0 10px;
      border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
    }
    .sys-shot-cap { font-size: 10.5px; color: var(--text-dim); margin: -4px 0 12px; text-align: center }

    /* Guide tooltip */
    .guide-tooltip {
      position: fixed;
      z-index: 99999;
      pointer-events: none;
      background: rgba(10, 12, 20, 0.95);
      border: 1px solid rgba(212,168,75,0.3);
      border-radius: 2px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      max-width: 250px;
      line-height: 1.4;
      display: none;
    }
    /* Recolor variant swatches inside the item hover popup. Box = ITEM_GRID (34px)
       so each swatch crops one icon cell exactly; 6 per row fits the 250px tooltip. */
    .guide-tooltip .gt-variants {
      display: grid; grid-template-columns: repeat(6, 34px); gap: 2px; margin-top: 6px;
      padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1);
    }
    .guide-tooltip .gt-variant {
      width: 34px; height: 34px;
      background-repeat: no-repeat; image-rendering: pixelated;
    }
    .guide-tooltip .gt-variants-label {
      grid-column: 1 / -1; font-size: 9px; color: var(--text-dim);
      letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1px;
    }

    /* Fade utility */
    .fadeable { transition: opacity 0.25s ease }
    .fadeable.is-hiding { opacity: 0; pointer-events: none }

    /* NBBody overrides for news content */
    .n-body p { margin: 4px 0 }
    .n-body ul, .n-body ol { margin: 4px 0 4px 16px }
    .n-body pre, .n-body blockquote { margin: 6px 0 }
    /* Clan rank list: a hover/focus tooltip instead of a wide second column, which
       forced the whole guide table into a horizontal scrollbar. */
    .clan-ranks { display:flex; flex-wrap:wrap; gap:8px 10px; margin:10px 0 4px }
    .clan-rank { position:relative; display:flex; align-items:center; gap:5px; padding:5px 9px;
      border:1px solid rgba(255,255,255,.12); border-radius:4px; background:rgba(255,255,255,.03) }
    .clan-rank b { color:var(--gold) }
    .clan-q { display:inline-flex; align-items:center; justify-content:center;
      width:15px; height:15px; border-radius:50%; font-size:11px; line-height:1; cursor:help;
      background:rgba(255,255,255,.10); color:#cfd4dc; outline:none }
    .clan-q:hover, .clan-q:focus { background:var(--gold); color:#11131a }
    .clan-tip { position:absolute; left:0; top:calc(100% + 9px);
      width:max(100%, 260px); max-width:min(300px, 78vw); padding:8px 10px; border-radius:5px; z-index:30;
      background:#11131a; color:#e8ecf3; border:1px solid rgba(255,255,255,.16);
      box-shadow:0 8px 24px rgba(0,0,0,.55); font-size:12px; line-height:1.45; font-weight:400;
      text-align:left; opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none }
    .clan-q:hover .clan-tip, .clan-q:focus .clan-tip { opacity:1; visibility:visible }
    /* Last row opens UPWARD so it is never cut off at the panel bottom. */
    .clan-rank:last-child .clan-tip { top:auto; bottom:calc(100% + 9px) }
    .clan-rank:last-child .clan-tip::after { top:100%; bottom:auto; border-bottom-color:transparent; border-top-color:#11131a }
    /* Arrow. */
    .clan-tip::after { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
      border:6px solid transparent; border-bottom-color:#11131a }
/* ===== old site's guide styling ends ===== */

/* On the old site these two were floating boxes over the banner. Here they sit in the page. */
.guide-shell .guide-panel,
.guide-shell .guide-detail {
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
  backdrop-filter: none;
}

.guide-tooltip {
  z-index: 20;
}