/* ==========================================================================
   Newbie Guide (newbie_guide.php)
   Sits on guide-pages.css + the cartoon theme; everything is scoped to
   .newbie-page so it can't leak into other guide pages.
   ========================================================================== */

.newbie-page {
    --ng-panel: linear-gradient(160deg, rgba(40, 33, 26, .93), rgba(14, 13, 11, .95));
    --ng-panel-soft: rgba(255, 255, 255, .06);
    --ng-line: rgba(255, 255, 255, .16);
    --ng-line-strong: rgba(255, 255, 255, .5);
    --ng-sun: #ffd75e;
    --ng-cream: #fff7d6;
    --ng-text: #efe9df;
    --ng-muted: #b9b1a4;
    --ng-mage: #b48cff;
    --ng-cent: #5fe39a;
    --ng-borg: #ffa24a;
    --ng-human: #62b8ff;
    --ng-radius: 16px;
}

.newbie-page .ng-hero {
    background:
        radial-gradient(circle at 50% 0, rgba(255, 215, 94, .16), transparent 50%),
        linear-gradient(180deg, rgba(31, 25, 20, .94), rgba(10, 9, 8, .8));
}

.newbie-page .guide-kicker { font-family: "Nunito", sans-serif; }

/* ---------- Roadmap ---------- */
.ng-roadmap {
    margin-bottom: 28px;
    padding: 22px 24px 26px;
    border: 1px solid var(--ng-line-strong);
    border-radius: var(--ng-radius);
    background: var(--ng-panel);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
}

.ng-roadmap-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--ng-cream);
    font: 700 1.2rem "Baloo 2", sans-serif;
}

.ng-roadmap-title svg { width: 22px; color: var(--ng-sun); }

.ng-track {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.ng-track li {
    position: relative;
    padding: 34px 6px 0;
    text-align: center;
}

/* connector line + node */
.ng-track li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 215, 94, .35), rgba(255, 215, 94, .7));
}

.ng-track li:first-child::before { left: 50%; }
.ng-track li:last-child::before { right: 50%; }

.ng-track li::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 17px;
    height: 17px;
    transform: translateX(-50%);
    border: 3px solid var(--ng-sun);
    border-radius: 50%;
    background: #1b1712;
    box-shadow: 0 0 10px rgba(255, 215, 94, .45);
}

.ng-track li.is-goal::after {
    width: 22px;
    height: 22px;
    top: 1px;
    background: var(--ng-sun);
}

.ng-lv {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 215, 94, .15);
    color: var(--ng-sun);
    font: 800 .78rem/1.5 "Nunito", sans-serif;
    white-space: nowrap;
}

.ng-track strong {
    display: block;
    color: #fff;
    font: 700 .92rem/1.2 "Baloo 2", sans-serif;
}

.ng-track small {
    display: block;
    margin-top: 3px;
    color: var(--ng-muted);
    font-size: .76rem;
}

/* ---------- Layout ---------- */
.ng-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.ng-toc {
    position: sticky;
    top: 86px;
    border: 1px solid var(--ng-line-strong);
    border-radius: var(--ng-radius);
    background: var(--ng-panel);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
    max-height: calc(100vh - 110px);
    overflow: auto;
}

.ng-toc summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    color: var(--ng-cream);
    font: 700 1.02rem "Baloo 2", sans-serif;
    cursor: pointer;
    list-style: none;
}

.ng-toc summary::-webkit-details-marker { display: none; }
.ng-toc summary svg { width: 18px; color: var(--ng-sun); }

.ng-toc ol {
    margin: 0;
    padding: 0 10px 12px;
    list-style: none;
}

.ng-toc a {
    display: flex;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    color: #ddd6ca;
    font-size: .9rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.ng-toc a span {
    flex: 0 0 26px;
    color: var(--ng-sun);
    font-weight: 800;
}

.ng-toc li.is-sub a { padding-left: 20px; font-size: .85rem; }
.ng-toc a:hover { background: var(--ng-panel-soft); color: #fff; }
.ng-toc a.is-active { background: rgba(255, 215, 94, .16); color: #fff; }

/* ---------- Sections ---------- */
.ng-article { min-width: 0; }

.ng-section {
    margin-bottom: 26px;
    padding: 28px 32px 30px;
    border: 1px solid var(--ng-line-strong);
    border-radius: var(--ng-radius);
    background: var(--ng-panel);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .42);
    color: var(--ng-text);
    font-size: 1rem;
    line-height: 1.7;
    scroll-margin-top: 84px;
}

.ng-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -4px 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ng-line);
}

.ng-num {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    height: 54px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe07c, #ffa41c);
    box-shadow: 0 4px 0 #c46a0e, 0 8px 18px rgba(0, 0, 0, .35);
    color: #5a2c00;
    font: 800 1.5rem/1 "Baloo 2", sans-serif;
}

.ng-num.sub { font-size: 1.05rem; }

.ng-section-head small {
    display: block;
    color: var(--ng-sun);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.newbie-page .ng-section-head h2 {
    margin: 0;
    color: #fff;
    font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 "Baloo 2", sans-serif;
}

.newbie-page .ng-section h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 28px 0 10px;
    color: var(--ng-cream);
    font: 700 1.25rem/1.25 "Baloo 2", sans-serif;
}

.newbie-page .ng-section h3:first-of-type { margin-top: 4px; }

.newbie-page .ng-section h4 {
    margin: 0 0 6px;
    color: #fff;
    font: 700 1.02rem/1.3 "Baloo 2", sans-serif;
}

.ng-section p { margin: 0 0 12px; }
.ng-section strong { color: #fff; }
.ng-section a { color: var(--ng-sun); }
.ng-muted { color: var(--ng-muted); font-size: .92rem; }

.ng-list { margin: 0 0 12px; padding-left: 1.2rem; }
.ng-list li { margin-bottom: 6px; }
.ng-list li::marker { color: var(--ng-sun); }

/* ---------- Inline chips ---------- */
.ng-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px 1px 6px;
    border: 1px solid rgba(98, 184, 255, .45);
    border-radius: 999px;
    background: rgba(98, 184, 255, .12);
    color: #cfe8ff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: 1px;
}

.ng-loc svg { width: 13px; height: 13px; color: var(--ng-human); }
.ng-loc b { color: #fff; font-weight: 800; }

.ng-kbd {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-bottom-width: 3px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: 700 .8rem/1.5 "Nunito", sans-serif;
    vertical-align: 1px;
}

.ng-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font: 800 .7rem/1.6 "Nunito", sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 2px;
}

.ng-tag.all5   { background: rgba(255, 162, 74, .18); color: #ffc58e; border: 1px solid rgba(255, 162, 74, .5); }
.ng-tag.leader { background: rgba(95, 227, 154, .15); color: #9ff0c2; border: 1px solid rgba(95, 227, 154, .45); }
.ng-tag.bugged { background: rgba(255, 107, 107, .15); color: #ffb0b0; border: 1px solid rgba(255, 107, 107, .5); }
.ng-tag.pick   { background: rgba(255, 215, 94, .18); color: var(--ng-sun); border: 1px solid rgba(255, 215, 94, .5); }
.ng-tag.event  { background: rgba(180, 140, 255, .16); color: #d8c4ff; border: 1px solid rgba(180, 140, 255, .5); }

/* ---------- Callouts ---------- */
.ng-callout {
    display: flex;
    gap: 14px;
    margin: 16px 0;
    padding: 14px 18px;
    border: 1px solid;
    border-left-width: 5px;
    border-radius: 12px;
}

.ng-callout > svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 3px;
}

.ng-callout p:last-child,
.ng-callout ul:last-child { margin-bottom: 0; }
.ng-callout ul { margin: 0; padding-left: 1.1rem; }
.ng-callout li { margin-bottom: 4px; }

.ng-callout.tip       { border-color: rgba(95, 227, 154, .5);  background: rgba(95, 227, 154, .08); }
.ng-callout.tip > svg { color: var(--ng-cent); }
.ng-callout.note       { border-color: rgba(98, 184, 255, .5); background: rgba(98, 184, 255, .08); }
.ng-callout.note > svg { color: var(--ng-human); }
.ng-callout.important       { border-color: rgba(255, 215, 94, .55); background: rgba(255, 215, 94, .08); }
.ng-callout.important > svg { color: var(--ng-sun); }
.ng-callout.warn       { border-color: rgba(255, 107, 107, .6); background: rgba(255, 107, 107, .1); }
.ng-callout.warn > svg { color: #ff8a8a; }

/* ---------- Party ---------- */
.ng-party {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0 6px;
}

.ng-hero-card {
    --c: var(--ng-sun);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px 16px;
    border: 1px solid var(--ng-line);
    border-top: 4px solid var(--c);
    border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(255, 255, 255, .03));
    text-align: center;
}

.ng-hero-card img {
    width: 100%;
    height: 120px;
    margin-bottom: 8px;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
}

.ng-hero-card strong { color: #fff; font: 800 1.1rem/1.2 "Baloo 2", sans-serif; }
.ng-hero-card span { color: var(--ng-muted); font-size: .8rem; }
.ng-hero-card em {
    margin: 8px 0 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--c);
    color: #1a140c;
    font-style: normal;
    font-weight: 800;
    font-size: .8rem;
}
.ng-hero-card small { color: #d6cfc3; font-size: .82rem; line-height: 1.4; }

.c-mage  { --c: var(--ng-mage); }
.c-cent  { --c: var(--ng-cent); }
.c-borg  { --c: var(--ng-borg); }
.c-human { --c: var(--ng-human); }

.ng-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--c);
    vertical-align: 0;
}

/* ---------- Figures ---------- */
.ng-fig { margin: 0 0 14px; text-align: center; }

.ng-zoom {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: #000;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    transition: transform .15s, border-color .15s;
}

.ng-zoom:hover { transform: translateY(-2px); border-color: var(--ng-sun); }
.ng-zoom img { display: block; max-width: 100%; height: auto; image-rendering: auto; }

.ng-fig figcaption {
    margin-top: 6px;
    color: var(--ng-muted);
    font-size: .8rem;
    line-height: 1.35;
}

.ng-fig.wide { margin: 14px 0 18px; }
.ng-fig.small .ng-zoom img { max-width: 180px; }

.ng-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: start;
}

.ng-split > .ng-fig { max-width: 340px; }

.ng-gallery {
    display: grid;
    gap: 16px;
    align-items: start;
    margin: 14px 0;
}

.ng-gallery.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ng-gallery.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ng-gallery.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ng-before-after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 12px 0;
}

.ng-arrow { width: 28px; height: 28px; color: var(--ng-sun); }

/* ---------- Shopping cards ---------- */
.ng-shop { display: grid; gap: 14px; }

.ng-shop-item {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.ng-shop-item .ng-fig { margin: 0; }
.ng-shop-item p { margin-bottom: 8px; }
.ng-shop-item p:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
.ng-table {
    width: 100%;
    margin: 10px 0 16px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--ng-line);
    border-radius: 12px;
    overflow: hidden;
    font-size: .94rem;
}

.ng-table th {
    padding: 9px 14px;
    background: rgba(255, 215, 94, .14);
    color: var(--ng-sun);
    font: 800 .78rem "Nunito", sans-serif;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}

.ng-table td {
    padding: 9px 14px;
    border-top: 1px solid var(--ng-line);
    color: var(--ng-text);
    vertical-align: top;
}

.ng-table td:first-child { color: #fff; font-weight: 700; white-space: nowrap; }
.ng-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }

/* ---------- Steps ---------- */
.ng-steps {
    counter-reset: ng-step;
    margin: 10px 0 16px;
    padding: 0;
    list-style: none;
}

.ng-steps li {
    counter-increment: ng-step;
    position: relative;
    margin-bottom: 10px;
    padding-left: 42px;
    min-height: 28px;
}

.ng-steps li::before {
    content: counter(ng-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 215, 94, .16);
    border: 1px solid rgba(255, 215, 94, .55);
    color: var(--ng-sun);
    font: 800 .85rem/1 "Nunito", sans-serif;
}

.ng-steps-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.ng-step-card {
    padding: 16px 18px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.ng-step-card > span {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--ng-sun);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ng-step-card p { margin: 0; font-size: .95rem; }

/* ---------- Skill tree diagram ---------- */
.ng-tree {
    max-width: 520px;
    margin: 16px auto 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 215, 94, .45);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 17, 13, .9), rgba(10, 9, 8, .92));
}

.ng-tree-rank {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 5px;
    color: var(--ng-muted);
    font-size: .78rem;
}

.ng-tree-rank:first-child { margin-top: 0; }

.ng-tree-rank span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 22px;
    border: 1px solid var(--ng-line);
    border-radius: 6px;
    color: #fff;
    font: 800 .8rem "Nunito", sans-serif;
}

.ng-tree-rank i { font-style: normal; }
.ng-tree-rank.open span { border-color: var(--ng-sun); background: rgba(255, 215, 94, .16); color: var(--ng-sun); }
.ng-tree-rank.open i { color: var(--ng-sun); }

.ng-tree-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ng-tree-row span {
    display: grid;
    place-items: center;
    height: 42px;
    border: 2px solid rgba(255, 215, 94, .55);
    border-radius: 9px;
    background: rgba(255, 215, 94, .12);
    color: var(--ng-sun);
    font: 800 1rem "Nunito", sans-serif;
}

.ng-tree-row.locked span {
    border-color: rgba(255, 255, 255, .16);
    border-style: dashed;
    background: rgba(255, 255, 255, .03);
    color: #6f6a61;
}

.ng-tree-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ng-line);
    color: var(--ng-muted);
    font-size: .76rem;
}

/* ---------- Two-wave sigil flow ---------- */
.ng-tree-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 14px 0 16px;
}

.ng-tree-flow > div {
    flex: 1 1 180px;
    padding: 14px 16px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.ng-tree-flow > div.is-goal {
    border-color: rgba(255, 215, 94, .55);
    background: linear-gradient(135deg, rgba(255, 215, 94, .14), rgba(255, 215, 94, .03));
}

.ng-tree-flow span {
    display: block;
    color: var(--ng-sun);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ng-tree-flow strong { display: block; margin: 3px 0 5px; font: 700 1.05rem "Baloo 2", sans-serif; }
.ng-tree-flow small { color: #d6cfc3; font-size: .85rem; line-height: 1.45; }
.ng-tree-flow > svg { align-self: center; width: 22px; height: 22px; color: var(--ng-sun); }

.newbie-page .ng-section h4 b { color: var(--ng-sun); font-weight: 800; }

/* ---------- Rewards / chips ---------- */
.ng-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}

.ng-rewards > div {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid rgba(255, 215, 94, .45);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 215, 94, .14), rgba(255, 215, 94, .03));
}

.ng-rewards svg {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(255, 215, 94, .18);
    color: var(--ng-sun);
}

.ng-rewards strong { font: 800 1.05rem/1.2 "Baloo 2", sans-serif; }
.ng-rewards span { color: var(--ng-muted); font-size: .82rem; }

.ng-chips, .ng-loot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 16px;
}

.ng-chips span, .ng-loot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--ng-line);
    border-radius: 999px;
    background: var(--ng-panel-soft);
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
}

.ng-chips svg { width: 16px; color: var(--ng-sun); }
.ng-loot small { color: var(--ng-muted); font-weight: 600; }
.ng-loot .jackpot { border-color: rgba(255, 215, 94, .7); background: rgba(255, 215, 94, .16); }
.ng-loot .danger { border-color: rgba(255, 107, 107, .6); background: rgba(255, 107, 107, .12); }
.ng-loot .common { border-style: dashed; }

/* ---------- Strategy / mini cards ---------- */
.ng-strategy {
    margin: 14px 0;
    padding: 16px 20px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.ng-strategy h4 { display: flex; align-items: center; gap: 8px; }
.ng-strategy h4 svg { width: 18px; color: var(--ng-sun); }
.ng-strategy ul { margin: 0; padding: 0; list-style: none; }
.ng-strategy li { margin-bottom: 6px; }
.ng-strategy li:last-child { margin-bottom: 0; }

.ng-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 12px 0 16px;
}

.ng-mini {
    padding: 16px 18px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.ng-mini h4 { display: flex; align-items: center; gap: 8px; }
.ng-mini h4 svg { width: 18px; color: var(--ng-sun); }
.ng-mini p { font-size: .95rem; }
.ng-mini p:last-child { margin-bottom: 0; }
.ng-inline-list { color: #fff; font-weight: 600; }

.ng-checklist { margin: 8px 0 16px; padding: 0; list-style: none; }
.ng-checklist li {
    position: relative;
    margin-bottom: 8px;
    padding: 10px 14px 10px 44px;
    border: 1px solid var(--ng-line);
    border-radius: 12px;
    background: var(--ng-panel-soft);
}
.ng-checklist li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 13px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ng-cent);
    border-radius: 5px;
}

/* ---------- Soulstones ---------- */
.ng-stones {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}

.ng-stones > div {
    --c: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--c) 22%, transparent), rgba(255, 255, 255, .02) 70%);
    text-align: center;
}

.ng-stones svg { width: 30px; height: 30px; margin-bottom: 6px; color: var(--c); }
.ng-stones strong { font: 800 1rem/1.2 "Baloo 2", sans-serif; }
.ng-stones span { color: #fff; font-size: .88rem; font-weight: 600; }
.ng-stones small { color: var(--ng-muted); font-size: .76rem; }
.s-light { --c: #ffe68a !important; }
.s-dark  { --c: #a88bff !important; }
.s-fire  { --c: #ff8a4a !important; }
.s-ice   { --c: #8fdcff !important; }
.s-wind  { --c: #7ff0c0 !important; }

/* ---------- Pets ---------- */
.ng-pet {
    margin: 16px 0;
    padding: 18px 20px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.ng-pet-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.newbie-page .ng-pet-head h3 { margin: 0 !important; }
.ng-pet-head h3 small { color: var(--ng-muted); font-size: .85rem; }

/* ---------- Resists & paths ---------- */
.ng-resists {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.ng-resists > div {
    padding: 14px 16px;
    border: 1px solid var(--ng-line);
    border-top: 4px solid var(--c);
    border-radius: 14px;
    background: var(--ng-panel-soft);
    font-size: .9rem;
}

.newbie-page .ng-resists h4 { color: var(--c); }
.ng-resists p { margin: 0 0 4px; }
.ng-resists b { color: #fff; }

.ng-path {
    margin: 18px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--ng-line);
    border-radius: 14px;
    background: var(--ng-panel-soft);
}

.newbie-page .ng-path h3 { margin-top: 0 !important; }

.ng-path-grid { overflow-x: auto; }

.ng-path-head,
.ng-path-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(88px, 1fr));
    gap: 10px;
    min-width: 400px;
}

.ng-path-head span {
    padding: 0 4px 6px;
    color: var(--ng-sun);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}

.ng-path-row { margin-bottom: 8px; }

.ng-pill {
    position: relative;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 18%, transparent);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    text-align: center;
}

.ng-pill + .ng-pill::before {
    content: "›";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-52%);
    color: var(--ng-muted);
    font-weight: 800;
}

/* ---------- Outro ---------- */
.ng-outro {
    padding: 34px 28px;
    border: 1px solid rgba(255, 215, 94, .55);
    border-radius: var(--ng-radius);
    background:
        radial-gradient(circle at 50% 0, rgba(255, 215, 94, .2), transparent 60%),
        var(--ng-panel);
    text-align: center;
    color: var(--ng-text);
}

.ng-outro > svg { width: 44px; height: 44px; color: var(--ng-sun); }
.newbie-page .ng-outro h2 { margin: 8px 0; color: #fff; font: 800 1.8rem "Baloo 2", sans-serif; }
.ng-outro p { max-width: 640px; margin: 0 auto 18px; line-height: 1.7; }
.ng-outro strong { color: #fff; }

.ng-discord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: linear-gradient(180deg, #7b8cff, #5865f2);
    box-shadow: 0 4px 0 #3a44b8;
    color: #fff;
    font: 800 1rem "Baloo 2", sans-serif;
    text-decoration: none;
}

.ng-discord:hover { color: #fff; transform: translateY(-1px); }
.ng-discord svg { width: 18px; }

/* ---------- Back to top & lightbox ---------- */
.ng-top {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe07c, #ffa41c);
    box-shadow: 0 4px 0 #c46a0e, 0 8px 18px rgba(0, 0, 0, .35);
    color: #5a2c00;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s;
}

.ng-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.ng-top svg { width: 20px; }

.ng-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4, 6, 10, .88);
    cursor: zoom-out;
}

.ng-lightbox[hidden] { display: none; }
.ng-lightbox figure { margin: 0; max-width: 100%; text-align: center; }

.ng-lightbox img {
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 110px);
    width: auto;
    min-width: min(420px, 100%);
    object-fit: contain;
    border: 3px solid #fff;
    border-radius: 12px;
    background: #000;
    cursor: default;
}

.ng-lightbox figcaption { margin-top: 10px; color: #fff; font-weight: 600; }

.ng-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

body.ng-locked { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ng-gallery.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ng-resists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .ng-layout { grid-template-columns: 1fr; gap: 18px; }
    .ng-toc { position: sticky; top: 64px; z-index: 50; max-height: 70vh; }

    .ng-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 18px;
    }
    .ng-track li:nth-child(4)::before { right: 50%; }
    .ng-track li:nth-child(5)::before { left: 50%; }

    .ng-party { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ng-stones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .ng-section { padding: 22px 16px 24px; }
    .ng-roadmap { padding: 18px 14px 20px; }
    .ng-split { grid-template-columns: 1fr; }
    .ng-split > .ng-fig { max-width: none; }
    .ng-shop-item { grid-template-columns: 1fr; }
    .ng-steps-cards,
    .ng-two-col,
    .ng-gallery.three { grid-template-columns: 1fr; }
    .ng-stones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ng-resists { grid-template-columns: 1fr; }
    .ng-num { flex-basis: 46px; height: 46px; font-size: 1.25rem; }
    .ng-num.sub { font-size: .92rem; }

    .ng-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ng-track li:nth-child(n)::before { left: 0; right: 0; }
    .ng-track li:nth-child(odd)::before { left: 50%; }
    .ng-track li:nth-child(even)::before { right: 50%; }
}

@media (max-width: 480px) {
    .ng-gallery.two,
    .ng-gallery.four { grid-template-columns: 1fr; }
    .ng-party { gap: 10px; }
    .ng-hero-card img { height: 90px; }
}