/* Modding Career (js/career.js) and the tutorials hub. Dark theme, accent = Bootstrap warning yellow. */
:root {
    --ig-accent: #ffc107;
    --ig-accent-ink: #1b1b21;
    --ig-panel: #24242c;
    --ig-panel-2: #2c2c36;
    --ig-line: rgba(255, 255, 255, .09);
    --ig-muted: #a3a3b2;
    --ig-beginner: #3ecf75;
    --ig-intermediate: #4ba3ff;
    --ig-advanced: #ff5d5d;
}

/* ---- nav badge ---- */
.ig-nav-career { display: flex; align-items: center; gap: .5rem; }
.ig-nav-career .ig-lv { background: var(--ig-accent); color: var(--ig-accent-ink); font-weight: 800; font-size: .75rem;
    border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.ig-nav-career .ig-navbar { width: 54px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ig-nav-career .ig-navbar span { display: block; height: 100%; background: var(--ig-accent); transition: width .4s; }

/* ---- toasts ---- */
.ig-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: .5rem;
    max-width: min(360px, calc(100vw - 2rem)); pointer-events: none; }
.ig-toast { display: flex; gap: .75rem; align-items: flex-start; background: var(--ig-panel-2); color: #fff;
    border: 1px solid var(--ig-line); border-left: 4px solid var(--ig-accent); border-radius: .6rem; padding: .7rem .9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: ig-in .25s ease-out; transition: opacity .5s, transform .5s; }
.ig-toast i { font-size: 1.35rem; color: var(--ig-accent); line-height: 1.2; }
.ig-toast strong { display: block; }
.ig-toast div div { color: var(--ig-muted); font-size: .85rem; }
.ig-toast-ach { border-left-color: #b57bff; } .ig-toast-ach i { color: #b57bff; }
.ig-toast-level { border-left-width: 6px; background: linear-gradient(135deg, #3a3000, var(--ig-panel-2) 60%); }
.ig-toast-level strong { font-size: 1.15rem; color: var(--ig-accent); }
.ig-toast.ig-out { opacity: 0; transform: translateY(8px); }
@keyframes ig-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- shared panels ---- */
.ig-page { color: #e9e9ef; }
.ig-panel { background: var(--ig-panel); border: 1px solid var(--ig-line); border-radius: .9rem; }
.ig-muted { color: var(--ig-muted); }
.ig-xpbar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ig-xpbar span { display: block; height: 100%; background: linear-gradient(90deg, #ffb300, var(--ig-accent)); transition: width .5s; }
.ig-levelring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: conic-gradient(var(--ig-accent) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .1) 0); }
.ig-levelring b { width: 60px; height: 60px; border-radius: 50%; background: var(--ig-panel); display: grid; place-items: center;
    font-size: 1.5rem; color: #fff; }
.ig-btn-accent { background: var(--ig-accent); color: var(--ig-accent-ink); font-weight: 700; border: 0; }
.ig-btn-accent:hover { background: #ffcd38; color: var(--ig-accent-ink); }

/* ---- tutorials hub ---- */
.tut-hero, .ig-hero { background: radial-gradient(1200px 400px at 10% -10%, rgba(255, 193, 7, .14), transparent 60%), #0e0e12; }
.tut-search, .ig-search { position: relative; }
.tut-search i, .ig-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ig-muted); }
.tut-search input, .ig-search input { padding: .85rem 1rem .85rem 2.6rem; border-radius: .75rem; background: #fff; font-size: 1.05rem; }
.tut-path { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .4rem; }
.tut-chip, .ig-chip { flex: none; border: 1px solid var(--ig-line); background: var(--ig-panel); color: #ddd; border-radius: 999px;
    padding: .4rem .85rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; cursor: pointer; white-space: nowrap; }
.tut-chip:hover, .ig-chip:hover { border-color: rgba(255, 193, 7, .6); color: #fff; }
.tut-chip.active, .ig-chip.active { background: var(--ig-accent); color: var(--ig-accent-ink); border-color: var(--ig-accent); font-weight: 700; }
.tut-chip .n, .ig-chip .n { font-size: .75rem; opacity: .8; }
.tut-chip .done { color: var(--ig-beginner); }
.tut-chip.active .done { color: var(--ig-accent-ink); }
.tut-toolbar .form-select, .tut-toolbar .btn { font-size: .9rem; }
.tut-toolbar .form-select { background-color: var(--ig-panel); color: #eee; border-color: var(--ig-line); }
.tut-levels .btn { border-color: var(--ig-line); color: #ccc; }
.tut-levels .btn.active[data-level=beginner] { background: var(--ig-beginner); border-color: var(--ig-beginner); color: #0b2415; }
.tut-levels .btn.active[data-level=intermediate] { background: var(--ig-intermediate); border-color: var(--ig-intermediate); color: #06203a; }
.tut-levels .btn.active[data-level=advanced] { background: var(--ig-advanced); border-color: var(--ig-advanced); color: #2a0606; }

.tut-group-head { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1rem; }
.tut-group-head h2 { font-size: 1.35rem; margin: 0; color: #fff; }
.tut-group-head .ig-xpbar { flex: 1; max-width: 220px; height: 6px; }
.tut-card, .ig-card { background: var(--ig-panel); border: 1px solid var(--ig-line); border-radius: .8rem; overflow: hidden; height: 100%;
    display: flex; flex-direction: column; transition: transform .15s, border-color .15s, box-shadow .15s; }
.tut-card:hover, a.ig-card:hover, .ig-card.ig-hover:hover { transform: translateY(-3px); border-color: rgba(255, 193, 7, .5); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.tut-thumb { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; display: block; border: 0; padding: 0; width: 100%; }
.tut-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tut-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s;
    background: rgba(0, 0, 0, .35); font-size: 2.6rem; color: #fff; }
.tut-thumb:hover .play, .tut-thumb:focus-visible .play { opacity: 1; }
.tut-card.is-watched .tut-thumb img { filter: saturate(.35) brightness(.7); }
.tut-tick { position: absolute; top: .5rem; right: .5rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid #fff;
    background: rgba(0, 0, 0, .55); color: transparent; display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; z-index: 2; }
.tut-tick:hover { border-color: var(--ig-accent); color: rgba(255, 255, 255, .6); }
.tut-card.is-watched .tut-tick { background: var(--ig-beginner); border-color: var(--ig-beginner); color: #fff; }
.tut-feat { position: absolute; top: .5rem; left: .5rem; background: var(--ig-accent); color: var(--ig-accent-ink); font-weight: 800;
    font-size: .7rem; border-radius: 999px; padding: .15rem .55rem; text-transform: uppercase; letter-spacing: .03em; }
.tut-body { padding: .75rem .85rem .85rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.tut-title { font-weight: 700; color: #fff; line-height: 1.25; font-size: .98rem; cursor: pointer; }
.tut-title:hover { color: var(--ig-accent); }
.tut-yt { color: var(--ig-muted); font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tut-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .78rem; color: var(--ig-muted); }
.tut-lvl { border-radius: 999px; padding: .1rem .5rem; font-weight: 700; font-size: .7rem; text-transform: capitalize; }
.tut-lvl.beginner { background: rgba(62, 207, 117, .15); color: var(--ig-beginner); }
.tut-lvl.intermediate { background: rgba(75, 163, 255, .15); color: var(--ig-intermediate); }
.tut-lvl.advanced { background: rgba(255, 93, 93, .15); color: var(--ig-advanced); }
.tut-why { font-size: .75rem; color: var(--ig-accent); }
.tut-empty { text-align: center; padding: 3rem 1rem; color: var(--ig-muted); }

/* ---- player modal ---- */
.tut-modal .modal-content { background: #121217; color: #eee; border: 1px solid var(--ig-line); }
.tut-modal .modal-header, .tut-modal .modal-footer { border-color: var(--ig-line); }
.tut-modal .btn-close { filter: invert(1); }
.tut-noembed { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; background: #000 center / cover no-repeat; }
.tut-noembed > div { background: rgba(0, 0, 0, .7); padding: 1.25rem 1.5rem; border-radius: .75rem; }

/* ---- career page ---- */
.career-stat { text-align: center; padding: 1rem; }
.career-stat b { display: block; font-size: 1.8rem; color: #fff; }
.career-ach { display: flex; gap: .75rem; align-items: center; padding: .75rem; border-radius: .7rem; border: 1px solid var(--ig-line); height: 100%; }
.career-ach i { font-size: 1.6rem; color: var(--ig-accent); }
.career-ach.locked { opacity: .45; } .career-ach.locked i { color: var(--ig-muted); }
.career-log li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ig-line); }
.career-log .xp { color: var(--ig-accent); font-weight: 700; white-space: nowrap; }
.career-log .xp.neg { color: var(--ig-advanced); }

/* ---- feedback effects (js/career.js, js/tutorials.js) ---- */
@property --pct { syntax: "<number>"; inherits: true; initial-value: 0; }
.ig-levelring { transition: --pct .9s cubic-bezier(.2, .8, .2, 1); }
.ig-float { position: fixed; z-index: 3100; pointer-events: none; transform: translate(-50%, -50%);
    font-weight: 900; font-size: 1.15rem; color: var(--ig-accent); text-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 0 18px rgba(255, 193, 7, .55);
    animation: ig-float 1.25s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes ig-float { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.ig-xpbar span, .ig-navbar span { position: relative; overflow: hidden; }
.ig-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: translateX(-100%); animation: ig-shine .9s ease-out; }
@keyframes ig-shine { to { transform: translateX(100%); } }
.ig-bump { display: inline-block; animation: ig-bump .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ig-bump { 0% { transform: scale(1); } 40% { transform: scale(1.6); color: var(--ig-accent); } 100% { transform: scale(1); } }
.ig-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 3050; }
.ig-mute { background: none; border: 1px solid var(--ig-line); color: var(--ig-muted); border-radius: 999px; width: 2rem; height: 2rem;
    display: inline-grid; place-items: center; padding: 0; }
.ig-mute:hover { color: #fff; border-color: var(--ig-accent); }

/* tutorials: cards ease in when the list changes, ticks pop, the playing card glows */
.tut-reveal { opacity: 0; transform: translateY(14px); }
.tut-reveal.in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.tut-card.just-ticked .tut-tick { animation: ig-pop .5s cubic-bezier(.3, 1.8, .5, 1); box-shadow: 0 0 0 0 rgba(62, 207, 117, .7); }
.tut-card.just-ticked { animation: ig-glow 1s ease-out; }
@keyframes ig-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes ig-glow { 0% { box-shadow: 0 0 0 0 rgba(62, 207, 117, .75); } 100% { box-shadow: 0 0 0 18px rgba(62, 207, 117, 0); } }
.tut-thumb img { transition: transform .35s ease, filter .3s; }
.tut-card:hover .tut-thumb img { transform: scale(1.06); }
.tut-chip { transition: background .2s, color .2s, border-color .2s, transform .15s; }
.tut-chip:active { transform: scale(.95); }
.tut-group-head .ig-xpbar span { transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.tut-modal.show .modal-dialog { animation: ig-zoom .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes ig-zoom { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
#tut-player-tick { transition: transform .15s, background .2s; }
#tut-player-tick:active { transform: scale(.94); }
.career-ach:not(.locked) { animation: ig-in .4s ease-out backwards; }
.career-ach:not(.locked) i { filter: drop-shadow(0 0 8px rgba(255, 193, 7, .5)); }

@media (prefers-reduced-motion: reduce) {
    .tut-reveal { opacity: 1; transform: none; }
    .ig-float, .ig-confetti { display: none; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* tutorial description & links (js/tutorial-desc.js) */
.tut-descbox { border-top: 1px solid var(--ig-line); padding-top: 1rem; margin-top: 1rem; }
.tut-link { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; font-size: .85rem;
    background: var(--ig-panel-2); border: 1px solid var(--ig-line); color: #eee; text-decoration: none; max-width: 100%; }
.tut-link:hover { border-color: var(--ig-accent); color: var(--ig-accent); }
.tut-desc { white-space: pre-line; color: #cfcfda; font-size: .9rem; line-height: 1.5; max-height: 7.5em; overflow: hidden; position: relative;
    overflow-wrap: anywhere; }
.tut-desc:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5em;
    background: linear-gradient(transparent, #121217); }
.tut-desc.open { max-height: none; }
.tut-desc a { color: var(--ig-intermediate); }
.ig-page .tut-desc:not(.open)::after { background: linear-gradient(transparent, var(--bs-body-bg, #1b1b21)); }
.tut-modal .tut-desc:not(.open)::after { background: linear-gradient(transparent, #121217); }

/* toasts and the career card take you to /career */
.ig-toast { pointer-events: auto; cursor: pointer; }
.ig-toast:hover { border-color: rgba(255, 193, 7, .6); transform: translateY(-2px); }
.ig-toast .ig-toast-go { font-size: .75rem; color: var(--ig-accent); margin-top: .15rem; opacity: 0; transition: opacity .2s; }
.ig-toast:hover .ig-toast-go { opacity: 1; }
.ig-clickable { cursor: pointer; transition: border-color .2s, transform .15s; }
.ig-clickable:hover { border-color: rgba(255, 193, 7, .55); transform: translateY(-2px); }

/* ---- camos (js/career.js CAMOS): themes for .ig-camo headers and the tutorials page background ---- */
:root {
    --fx-diamond: radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 2px, transparent 3px) 0 0 / 90px 90px,
                  radial-gradient(circle at 70% 80%, rgba(255,255,255,.7) 0 1.5px, transparent 2.5px) 0 0 / 130px 130px,
                  linear-gradient(135deg, #7fb0d9, #e8f4ff, #9fc7e8, #ffffff, #b9d9f2, #7fb0d9) 0 0 / 400% 400%;
    --fx-gold: linear-gradient(115deg, #4a3200, #b8860b, #ffe27a, #c99700, #6b4a00, #ffd34d, #4a3200) 0 0 / 300% 300%;
    --fx-void: radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 1.5px) 0 0 / 70px 70px,
               radial-gradient(circle, rgba(220,180,255,.6) 0 1px, transparent 1.5px) 35px 20px / 110px 110px,
               radial-gradient(ellipse at 25% 35%, #7a2ff0 0, transparent 45%), radial-gradient(ellipse at 75% 65%, #c03dff 0, transparent 50%),
               radial-gradient(ellipse at 50% 50%, #2a0b52, #07020f 70%);
    --fx-ice: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 2px) 0 0 / 60px 60px,
              linear-gradient(130deg, #061a30, #1f6fb2, #9fe3ff, #e9fbff, #1f6fb2, #061a30) 0 0 / 400% 400%;
    --fx-friendslop: radial-gradient(circle at 30% 40%, rgba(140, 255, 60, .55) 0 8%, transparent 9%) 0 0 / 140px 140px,
                     radial-gradient(circle at 70% 70%, rgba(190, 90, 255, .45) 0 6%, transparent 7%) 40px 30px / 110px 110px,
                     linear-gradient(135deg, #0f1a08, #2b4a0f 30%, #3a1a5c 60%, #12051f) 0 0 / 300% 300%;
    --fx-prestige: linear-gradient(90deg, #ff3b3b, #ffb13b, #fff23b, #3bff6b, #3bd8ff, #6b3bff, #ff3bd8, #ff3b3b) 0 0 / 400% 100%;
}
:root[data-ig-camo=diamond] { --ig-fx: var(--fx-diamond); }
:root[data-ig-camo=gold] { --ig-fx: var(--fx-gold); }
:root[data-ig-camo=void] { --ig-fx: var(--fx-void); }
:root[data-ig-camo=ice] { --ig-fx: var(--fx-ice); }
:root[data-ig-camo=prestige] { --ig-fx: var(--fx-prestige); }
:root[data-ig-camo=friendslop] { --ig-fx: var(--fx-friendslop); }

/* pattern camos: the generated SVG tile; fx camos: the gradients above (which carry their own sizes) */
:root:not([data-ig-camo=default]) .ig-camo {
    background: linear-gradient(rgba(8, 8, 12, .55), rgba(8, 8, 12, .8)), var(--ig-camo) 0 0 / var(--ig-camo-size) repeat; }
:root:not([data-ig-camo=default]) main.ig-camo-page {
    background: linear-gradient(rgba(22, 22, 28, .86), rgba(22, 22, 28, .92)) fixed, var(--ig-camo) 0 0 / var(--ig-camo-size) repeat fixed; }
:root[data-ig-camo=diamond] .ig-camo, :root[data-ig-camo=gold] .ig-camo, :root[data-ig-camo=void] .ig-camo,
:root[data-ig-camo=ice] .ig-camo, :root[data-ig-camo=prestige] .ig-camo, :root[data-ig-camo=friendslop] .ig-camo {
    background: linear-gradient(rgba(8, 8, 12, .5), rgba(8, 8, 12, .78)), var(--ig-fx); animation: ig-camo-shift 14s ease-in-out infinite alternate; }
:root[data-ig-camo=diamond] main.ig-camo-page, :root[data-ig-camo=gold] main.ig-camo-page, :root[data-ig-camo=void] main.ig-camo-page,
:root[data-ig-camo=ice] main.ig-camo-page, :root[data-ig-camo=prestige] main.ig-camo-page, :root[data-ig-camo=friendslop] main.ig-camo-page {
    background: linear-gradient(rgba(22, 22, 28, .86), rgba(22, 22, 28, .92)), var(--ig-fx); background-attachment: fixed; }
.ig-camo-pixel .ig-camo, .ig-camo-pixel main.ig-camo-page, .camo-swatch.pixel { image-rendering: pixelated; }
@keyframes ig-camo-shift { from { background-position: 0 0, 0 0, 0 0, 0% 50%; } to { background-position: 0 0, 90px 60px, 130px -80px, 100% 50%; } }

/* camo picker on /career */
.camo-tile { border: 2px solid var(--ig-line); border-radius: .8rem; overflow: hidden; cursor: pointer; background: var(--ig-panel);
    transition: transform .15s, border-color .2s; height: 100%; width: 100%; padding: 0; text-align: left; color: #eee; }
.camo-tile:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(255, 193, 7, .6); }
.camo-tile.equipped { border-color: var(--ig-accent); box-shadow: 0 0 0 3px rgba(255, 193, 7, .25); }
.camo-tile:disabled { cursor: not-allowed; }
.camo-swatch { height: 86px; position: relative; background-size: 300px; }
.camo-tile:disabled .camo-swatch { filter: grayscale(1) brightness(.35); }
.camo-swatch .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: #fff; }
.camo-swatch.fx-diamond { background: var(--fx-diamond); } .camo-swatch.fx-gold { background: var(--fx-gold); }
.camo-swatch.fx-void { background: var(--fx-void); } .camo-swatch.fx-ice { background: var(--fx-ice); }
.camo-swatch.fx-prestige { background: var(--fx-prestige); }
.camo-swatch.fx-friendslop { background: var(--fx-friendslop); }
.camo-tile .camo-name { padding: .45rem .6rem; font-size: .85rem; display: flex; justify-content: space-between; gap: .4rem; }
.camo-tile .camo-name span { color: var(--ig-muted); }

/* career ladder (/career) */
.ladder { display: flex; overflow-x: auto; gap: 0; padding: 1.6rem .25rem .5rem; scroll-behavior: smooth; }
.ladder-step { flex: none; width: 128px; position: relative; text-align: center; }
.ladder-step::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: rgba(255, 255, 255, .12); }
.ladder-step:first-child::before { display: none; }
.ladder-step.done::before, .ladder-step.current::before { background: var(--ig-accent); }
.ladder-dot { position: relative; z-index: 1; width: 38px; height: 38px; margin: 0 auto .5rem; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; background: var(--ig-panel-2); border: 2px solid rgba(255, 255, 255, .15); color: var(--ig-muted); }
.ladder-step.done .ladder-dot { background: var(--ig-accent); border-color: var(--ig-accent); color: var(--ig-accent-ink); }
.ladder-step.current .ladder-dot { background: var(--ig-accent); border-color: #fff; color: var(--ig-accent-ink); box-shadow: 0 0 0 0 rgba(255, 193, 7, .6);
    animation: ig-pulse 1.8s infinite; }
@keyframes ig-pulse { 70% { box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
.ladder-txt { font-size: .78rem; line-height: 1.3; padding: 0 .3rem; }
.ladder-txt b { color: #fff; display: block; }
.ladder-step.locked .ladder-txt b { color: var(--ig-muted); }
.ladder-camo { color: #b57bff; } .ladder-step.locked .ladder-camo { color: rgba(181, 123, 255, .5); }
.ladder-xp { color: var(--ig-muted); font-size: .7rem; margin-top: .15rem; }
.ladder-you { position: absolute; top: -1.45rem; left: 0; right: 0; font-size: .68rem; font-weight: 800; color: var(--ig-accent);
    text-transform: uppercase; letter-spacing: .05em; }

/* ---- shared page system (see DESIGN.md) ---- */
.ig-section { padding: 3rem 0; }
.ig-section-alt { background: #121217; }
.ig-kicker { color: var(--ig-accent); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.ig-h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: .35rem; }
.ig-lead { color: var(--ig-muted); font-size: 1.05rem; }
.ig-card { display: flex; flex-direction: column; color: #e9e9ef; text-decoration: none; }
.ig-card-body { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ig-card-title { font-weight: 700; color: #fff; font-size: 1.02rem; line-height: 1.25; }
.ig-card-icon { width: 44px; height: 44px; border-radius: .7rem; display: grid; place-items: center; font-size: 1.35rem;
    background: rgba(255, 193, 7, .12); color: var(--ig-accent); flex: none; }
.ig-badge { border-radius: 999px; padding: .1rem .55rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    background: rgba(255, 255, 255, .08); color: #ddd; }
.ig-badge-new { background: var(--ig-accent); color: var(--ig-accent-ink); }
.ig-page .form-control, .ig-page .form-select { border-radius: .6rem; }
.ig-page a.link-accent { color: var(--ig-accent); }
.ig-price { font-size: 1.8rem; font-weight: 800; color: #fff; }
.ig-anchor-offset { scroll-margin-top: 90px; }

/* resource hub (js/resources.js) */
.hub-card { overflow: hidden; }
.hub-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; border-bottom: 1px solid var(--ig-line); }
.hub-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hub-host { opacity: .65; font-size: .75rem; margin-left: .25rem; }
.hub-strip { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.hub-strip-item { flex: none; width: 260px; scroll-snap-align: start; }

/* homepage */
.home-step-n { position: absolute; left: .6rem; top: .6rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--ig-accent); color: var(--ig-accent-ink); font-weight: 900; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.home-search .ig-search input { font-size: 1.1rem; padding-top: 1rem; padding-bottom: 1rem; }

/* chapters from video descriptions (js/tutorial-desc.js) */
.tut-chapters { display: flex; flex-direction: column; gap: .2rem; max-height: 220px; overflow-y: auto; padding-right: .25rem; }
.tut-chapter { text-align: left; background: none; border: 0; border-radius: .45rem; color: #ddd; padding: .3rem .5rem; font-size: .88rem; }
.tut-chapter:hover, .tut-chapter.on { background: var(--ig-panel-2); color: #fff; }
.tut-chapter .t { color: var(--ig-accent); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .35rem; }

/* error fixer (/errors) */
.err-log { background: #0b0b0f; color: #d6f5d6; border: 1px solid var(--ig-line); font-family: Consolas, "Courier New", monospace; font-size: .9rem; border-radius: .75rem; }
.err-log:focus { background: #0b0b0f; color: #d6f5d6; border-color: var(--ig-accent); box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .2); }
.err-card summary { cursor: pointer; padding: 1rem 1.1rem; list-style: none; }
.err-card summary::-webkit-details-marker { display: none; }
.err-card summary::after { content: "\F282"; font-family: bootstrap-icons; float: right; color: var(--ig-muted); transition: transform .2s; }
.err-card[open] summary::after { transform: rotate(180deg); }
.err-card code { color: #ff9e9e; white-space: pre-wrap; overflow-wrap: anywhere; }
.err-body { padding: 0 1.1rem 1.1rem; color: #ddd; }
.err-hit { background: #0b0b0f; color: #ffb4b4; border-radius: .5rem; padding: .6rem .8rem; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* resource hub: "got it" ticks */
.hub-card { position: relative; }
.hub-tick { position: absolute; top: .55rem; right: .55rem; z-index: 2; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7);
    background: rgba(0, 0, 0, .55); color: transparent; display: grid; place-items: center; font-size: 1rem; padding: 0; transition: transform .15s; }
.hub-tick:hover { border-color: var(--ig-accent); color: rgba(255, 255, 255, .6); transform: scale(1.08); }
.hub-card.is-got .hub-tick { background: var(--ig-beginner); border-color: var(--ig-beginner); color: #fff; animation: ig-pop .45s cubic-bezier(.3, 1.8, .5, 1); }
.hub-got { display: none; background: rgba(62, 207, 117, .18); color: var(--ig-beginner); }
.hub-card.is-got .hub-got { display: inline-block; }
.hub-card.is-got .hub-thumb { filter: saturate(.5) brightness(.8); }

.discord-btn { background: #5865f2; color: #fff; font-weight: 700; border: 0; }
.discord-btn:hover { background: #4752c4; color: #fff; }

/* project gallery pop-up (js/gallery.js) and clickable project cards (/services) */
.ig-gallery .modal-content { background: #101015; border: 1px solid var(--ig-line); overflow: hidden; border-radius: 1rem; }
.ig-gal-close { position: absolute; top: .75rem; right: .75rem; z-index: 5; filter: invert(1); background-color: rgba(255, 255, 255, .15); border-radius: 50%; padding: .6rem; opacity: .9; }
.ig-gal-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ig-gal-slide { position: absolute; inset: 0; display: grid; place-items: center; }
.ig-gal-slide.in { animation: ig-gal-in .35s ease-out; }
@keyframes ig-gal-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.ig-gal-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ig-gal-slide iframe { width: 100%; height: 100%; border: 0; }
.ig-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.3rem; display: grid; place-items: center; transition: background .2s; z-index: 2; }
.ig-gal-nav:hover { background: var(--ig-accent); color: var(--ig-accent-ink); }
.ig-gal-nav.prev { left: .75rem; } .ig-gal-nav.next { right: .75rem; }
.ig-gal-count { position: absolute; bottom: .6rem; right: .8rem; font-size: .8rem; color: #fff; background: rgba(0, 0, 0, .55); padding: .1rem .55rem; border-radius: 999px; }
.ig-gal-thumbs { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem; background: #0b0b0f; }
.ig-gal-thumb { flex: none; width: 96px; aspect-ratio: 16 / 9; border: 2px solid transparent; border-radius: .4rem; overflow: hidden; padding: 0; background: #000;
    position: relative; opacity: .6; transition: opacity .2s, border-color .2s; }
.ig-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ig-gal-thumb i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.3rem; text-shadow: 0 1px 6px #000; }
.ig-gal-thumb:hover, .ig-gal-thumb.on { opacity: 1; border-color: var(--ig-accent); }
.ig-gal-info { padding: 1.5rem; height: 100%; display: flex; flex-direction: column; color: #ddd; max-height: 80vh; overflow-y: auto; }
.ig-gal-stats { color: var(--ig-beginner); font-weight: 700; font-size: .9rem; }
.svc-project { cursor: pointer; transition: transform .18s, border-color .2s, box-shadow .2s; }
.svc-project:hover, .svc-project:focus-visible { transform: translateY(-4px); border-color: rgba(255, 193, 7, .55); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); outline: none; }
.svc-shot-wrap { position: relative; overflow: hidden; height: 100%; }
.svc-shot-wrap .svc-shot { transition: transform .5s ease; }
.svc-project:hover .svc-shot { transform: scale(1.05); }
.svc-view { position: absolute; left: .75rem; bottom: .75rem; background: rgba(0, 0, 0, .7); color: #fff; font-weight: 700; font-size: .85rem;
    padding: .3rem .7rem; border-radius: 999px; backdrop-filter: blur(4px); transition: background .2s, color .2s; }
.svc-project:hover .svc-view { background: var(--ig-accent); color: var(--ig-accent-ink); }

/* ---- Black Ops-style scrollbars, site-wide: dark track, square amber "ammo bar" thumb ----
   Chromium/Safari use the ::-webkit-scrollbar rules (they only apply when no scrollbar-width/-color is set);
   Firefox, which has no such pseudo-elements, gets the amber-on-dark colours. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #0d0d11; border-left: 1px solid rgba(255, 255, 255, .05); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c78f00, #ffc107 45%, #ffd24d); border: 3px solid #0d0d11; border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #ffd24d, #ffc107 55%, #c78f00); }
::-webkit-scrollbar-thumb:hover { background: #ffd54a; }
::-webkit-scrollbar-thumb:active { background: #fff0b3; }
::-webkit-scrollbar-corner { background: #0d0d11; }
@supports not selector(::-webkit-scrollbar) {
    html, * { scrollbar-color: #ffc107 #0d0d11; }
}
/* horizontal chip rows get a slimmer bar plus arrow buttons (js/career.js wraps them in .ig-hrow) */
.tut-path::-webkit-scrollbar, .hub-strip::-webkit-scrollbar, .ladder::-webkit-scrollbar, .ig-gal-thumbs::-webkit-scrollbar,
.gl-az::-webkit-scrollbar { height: 10px; }
.tut-path::-webkit-scrollbar-thumb, .hub-strip::-webkit-scrollbar-thumb, .ladder::-webkit-scrollbar-thumb,
.ig-gal-thumbs::-webkit-scrollbar-thumb, .gl-az::-webkit-scrollbar-thumb { border-width: 2px; }
.ig-hrow { position: relative; }
.ig-hrow > .ig-hbtn { position: absolute; top: 0; bottom: 14px; z-index: 3; width: 2.4rem; border: 0; display: grid; place-items: center;
    color: #fff; font-size: 1.3rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ig-hrow > .ig-hbtn.prev { left: 0; background: linear-gradient(90deg, rgba(13, 13, 17, .95) 40%, transparent); justify-content: start; padding-left: .2rem; }
.ig-hrow > .ig-hbtn.next { right: 0; background: linear-gradient(270deg, rgba(13, 13, 17, .95) 40%, transparent); justify-content: end; padding-right: .2rem; }
.ig-hrow > .ig-hbtn i { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #ffc107; color: #1b1b21;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .5); transition: transform .15s; }
.ig-hrow > .ig-hbtn:hover i { transform: scale(1.12); }
.ig-hrow.can-prev > .ig-hbtn.prev, .ig-hrow.can-next > .ig-hbtn.next { opacity: 1; pointer-events: auto; }
@media (hover: none) { .ig-hrow > .ig-hbtn { display: none; } }

/* resource hub: mirrors and the sources directory */
.hub-mirrors { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .1rem; }
.hub-mirrors a { color: var(--ig-accent); text-decoration: none; }
.hub-mirrors a.ig-muted { color: var(--ig-muted); }
.hub-mirrors a:hover { text-decoration: underline; }
.hub-src-h { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ig-accent); margin-bottom: .6rem; }
.hub-sources li { margin-bottom: .35rem; }
.hub-sources a { color: #dcdce4; text-decoration: none; font-size: .93rem; }
.hub-sources a:hover { color: var(--ig-accent); }
.hub-sources a i { font-size: .7rem; opacity: .5; }
.hub-card:not(.has-img) .ig-card-body > .d-flex:first-child { padding-right: 2.2rem; }
.hub-card .hub-thumb { background: #000 linear-gradient(135deg, #1e1e26, #121217); }

/* "Related skill" tutorials (not BO3-specific) and topic info cards (core/tutorial_related.php) */
.tut-related { border-radius: 999px; padding: .1rem .5rem; font-weight: 700; font-size: .7rem; background: rgba(181, 123, 255, .15); color: #c9a2ff; cursor: help; }
.tut-note { display: flex; gap: .8rem; background: rgba(181, 123, 255, .08); border: 1px solid rgba(181, 123, 255, .3); border-radius: .8rem;
    padding: .9rem 1.1rem; margin-bottom: 1rem; color: #ddd; }
.tut-note > i { color: #c9a2ff; font-size: 1.3rem; line-height: 1.2; }
.tut-note b { color: #fff; }
.tut-note p { margin: .25rem 0 .5rem; color: #cfcfda; font-size: .93rem; }
.tut-note-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.tut-note-steps li { counter-increment: s; font-size: .82rem; background: rgba(255, 255, 255, .06); border-radius: 999px; padding: .2rem .7rem .2rem .35rem; }
.tut-note-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-right: .35rem;
    border-radius: 50%; background: #b57bff; color: #1b1b21; font-weight: 800; font-size: .7rem; }
.tut-note-sm { padding: .6rem .8rem; margin: 0; font-size: .9rem; }
.err-perma { color: var(--ig-muted); margin-left: .3rem; } .err-perma:hover { color: var(--ig-accent); }

/* the game strip under the nav (core/nav.php) */
.ig-gamestrip { background: linear-gradient(90deg, #2b4a0f, #3a1a5c); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: .88rem; }
.ig-gamestrip .container { min-height: 2.3rem; }
.ig-gamestrip-link { color: #fff; text-decoration: none; padding: .35rem 0; }
.ig-gamestrip-link:hover { color: #d7ff9e; }
.ig-gamestrip-tag { background: #8cff3c; color: #12051f; font-weight: 900; font-size: .68rem; border-radius: 999px; padding: .05rem .45rem; margin-right: .35rem; }
.ig-gamestrip-x { background: none; border: 0; color: rgba(255, 255, 255, .7); font-size: 1.4rem; line-height: 1; padding: 0 .25rem; }
.ig-gamestrip-x:hover { color: #fff; }
@media (max-width: 575.98px) { .ig-gamestrip { font-size: .8rem; } }
/* "from the same creator" cards */
.ig-fromcreator { background: linear-gradient(135deg, rgba(43, 74, 15, .5), rgba(58, 26, 92, .5)); border: 1px solid rgba(140, 255, 60, .25); border-radius: .9rem;
    padding: 1rem 1.1rem; color: #e9e9ef; text-decoration: none; display: flex; gap: .9rem; align-items: center; transition: border-color .2s, transform .15s; }
.ig-fromcreator:hover { border-color: rgba(140, 255, 60, .6); transform: translateY(-2px); color: #fff; }
.ig-fromcreator img { width: 64px; height: auto; flex: none; }
.ig-fromcreator small { color: #b9e88f; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; }

/* /submit */
.sub-type { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: .7rem .8rem; border: 1px solid var(--ig-line); border-radius: .7rem;
    background: var(--ig-panel-2); cursor: pointer; color: #ddd; transition: border-color .2s, background .2s; }
.sub-type input { position: absolute; opacity: 0; pointer-events: none; }
.sub-type i { color: var(--ig-accent); font-size: 1.2rem; }
.sub-type span { font-size: .78rem; color: var(--ig-muted); }
.sub-type.on { border-color: var(--ig-accent); background: rgba(255, 193, 7, .08); }
.sub-type:hover { border-color: rgba(255, 193, 7, .5); }
.sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub-mono { font-family: Consolas, "Courier New", monospace; font-size: .88rem; }
.sub-rules li { margin-bottom: .35rem; }

/* "Helpful" votes (js/votes.js) */
.ig-vote { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .04); color: #dee2e6;
           border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; line-height: 1.4; transition: background .15s, border-color .15s, transform .15s; }
.ig-vote:hover { border-color: #ffc107; color: #fff; }
.ig-vote.on { background: rgba(255, 193, 7, .16); border-color: #ffc107; color: #ffc107; }
.ig-vote.pop { transform: scale(1.18); }
.ig-vote.btn-lg { font-size: 1rem; padding: .45rem 1rem; }
.tut-vote { margin-top: .45rem; }
.hub-vote { margin-top: .35rem; }

/* "Report a problem" flag next to Helpful, and its form (js/report.js) */
.ig-report { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: .3rem; border: 1px solid transparent;
             background: none; color: rgba(255, 255, 255, .4); border-radius: 999px; padding: .2rem .45rem; font-size: .8rem; line-height: 1.4; transition: color .15s, border-color .15s; }
.ig-report:hover, .ig-report:focus-visible { color: #ff8a8a; border-color: rgba(255, 93, 93, .45); }
.ig-report.done { color: var(--ig-muted); }
.ig-report.btn-lg { font-size: 1rem; padding: .45rem .75rem; }
.ig-report-dlg { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px;
                 background: var(--ig-panel); color: #dee2e6; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.ig-report-dlg::backdrop { background: rgba(0, 0, 0, .6); }
.ig-report-dlg > form, .ig-report-dlg > .ig-report-done { padding: 1.1rem 1.25rem; }
.ig-report-dlg fieldset { border: 0; padding: 0; margin: 0; }
.ig-report-opt { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; margin-bottom: .3rem; border: 1px solid var(--ig-line); border-radius: 8px; cursor: pointer; font-size: .92rem; }
.ig-report-opt:hover { border-color: rgba(255, 255, 255, .25); }
.ig-report-opt:has(input:checked) { border-color: var(--ig-accent); background: rgba(255, 193, 7, .08); }
.ig-report-opt input { accent-color: var(--ig-accent); margin: 0; }
.ig-report-dlg textarea { background: var(--ig-panel-2); border-color: var(--ig-line); color: #fff; }
.ig-report-dlg textarea:focus { background: var(--ig-panel-2); color: #fff; }
.ig-report-err { color: #ff8a8a; min-height: 0; }
.ig-report-err:empty { display: none; }
.ig-report-done p:focus { outline: none; }

/* leaderboard */
.lb-table { --bs-table-bg: transparent; }
.lb-table td, .lb-table th { border-color: rgba(255, 255, 255, .08); }
.lb-top1 { color: #ffc107; } .lb-top2 { color: #cfd8dc; } .lb-top3 { color: #d08a4a; }
.lb-me td { background: rgba(255, 193, 7, .08) !important; }
.lb-level { display: inline-block; min-width: 2rem; text-align: center; border: 2px solid #ffc107; border-radius: 50%; color: #fff; font-weight: 700; padding: .1rem .3rem; }
.lb-noav { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: #333; align-items: center; justify-content: center; color: #888; }
.ig-news { border-bottom: 1px solid rgba(255, 255, 255, .1); }

/* no-JavaScript fallback lists stay hidden when scripts run; placeholder cards show until the real ones render */
.ig-skel { display: none; }
.js .ig-nojs-list { display: none; }
.js .ig-skel { display: flex; }
.ig-skel-card { border-radius: .75rem; background: rgba(255, 255, 255, .04); overflow: hidden; padding-bottom: .9rem; }
.ig-skel-img { aspect-ratio: 16 / 9; margin-bottom: .8rem; }
.ig-skel-line { height: .75rem; margin: .45rem .9rem 0; border-radius: .3rem; }
.ig-skel-line.short { width: 55%; }
.ig-skel-img, .ig-skel-line { background: linear-gradient(90deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, .05) 75%);
    background-size: 200% 100%; animation: ig-shimmer 1.2s linear infinite; }
@keyframes ig-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ig-skel-img, .ig-skel-line { animation: none; } }