/* ══════════════════════════════════════════════════════════
   NTR Games — feature styles (Sep 2026 update)
   Loaded after ntr-custom.css. Sections: CODES / NOTES, OS row,
   Locale Emulator link, All / Walkthrough download rows,
   card hover animation (related + developer grids), FAQ, dev pages.
══════════════════════════════════════════════════════════ */

/* ── CODES / NOTES top-level sections ───────────────────── */
.ntrg-xsec {
    --xs-c:    var(--ntrg-amber);
    --xs-glow: rgba(245,166,35,.55);
    --xs-bd:   rgba(245,166,35,.42);
    --xs-tint: rgba(245,166,35,.12);
    border:     1px solid var(--xs-bd) !important;
    background: linear-gradient(180deg, var(--xs-tint), var(--ntrg-bg2) 60%) !important;
}
.ntrg-xsec-notes {
    --xs-c:    var(--ntrg-purple);
    --xs-glow: rgba(155,127,212,.55);
    --xs-bd:   rgba(155,127,212,.42);
    --xs-tint: rgba(155,127,212,.12);
}
.ntrg-xsec-head {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  12px;
    color:          var(--xs-c);
    font-size:      20px;
    font-weight:    800;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height:    1.2;
    text-shadow:    0 0 6px var(--xs-c), 0 0 14px var(--xs-glow), 0 0 28px var(--xs-glow);
}
.ntrg-xsec-ico { display: inline-flex; filter: drop-shadow(0 0 6px var(--xs-glow)); }
.ntrg-xsec-ico svg { width: 22px; height: 22px; }
.ntrg-xsec-line {
    background:    var(--ntrg-bg3);
    border:        1px solid var(--xs-bd);
    border-left:   4px solid var(--xs-c);
    border-radius: 8px;
    padding:       10px 14px;
    margin-bottom: 8px;
    font-family:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:     14px;
    line-height:   1.5;
    color:         var(--ntrg-text);
    white-space:   pre-wrap;
    word-break:    break-word;
}
.ntrg-xsec-line:last-child { margin-bottom: 0; }
.ntrg-light .ntrg-xsec-head { text-shadow: 0 0 4px var(--xs-glow), 0 0 10px var(--xs-glow); }

/* ── INFO: OS row ───────────────────────────────────────── */
.ntrg-os-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.ntrg-os-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       3px 10px 3px 6px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--ntrg-text);
    background:    var(--ntrg-bg3);
    border:        1px solid var(--ntrg-border2);
}
.ntrg-os-pill img { width: 16px; height: 16px; object-fit: contain; }

/* ── Installation: Locale Emulator link ─────────────────── */
.ntrg-install-step a.ntrg-le-link,
.ntrg-install-step a.ntrg-le-link:visited {
    color:           var(--ntrg-blue) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight:     600;
}
.ntrg-install-step a.ntrg-le-link:hover { color: #7ab8ff !important; }

/* ── Download rows: "All" platform icons + walkthrough slot ── */
.ntrg-plat-icon-all { display: inline-flex; gap: 4px; align-items: center; }
.ntrg-plat-icon-all img { width: 20px; height: 20px; }
.ntrg-plat-icon-ph { width: 20px; height: 20px; flex: 0 0 20px; }

/* ── Card hover animation (related games + developer grids) ── */
.ntrg-related-card {
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.ntrg-related-card:hover {
    border-color: var(--ntrg-accent) !important;
    transform:    translateY(-4px) !important;
    box-shadow:   0 10px 24px rgba(0,0,0,.35), 0 0 0 1px var(--ntrg-abdr), 0 0 18px var(--ntrg-abg);
}
.ntrg-related-cover img { transition: transform .35s ease; }
.ntrg-related-card:hover .ntrg-related-cover img { transform: scale(1.06); }

/* ── Developer pages ────────────────────────────────────── */
.ntrg-devs-wrap { max-width: 1100px; margin: 0 auto; }
.ntrg-devs-letters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 22px; }
.ntrg-devs-letters a {
    display: inline-block; min-width: 30px; text-align: center; padding: 5px 8px;
    border-radius: 6px; background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border);
    color: var(--ntrg-text2); font-size: 12px; font-weight: 700; text-decoration: none !important;
}
.ntrg-devs-letters a:hover { color: var(--ntrg-text); border-color: var(--ntrg-accent); }
.ntrg-devs-letter { font-size: 22px; font-weight: 800; color: var(--ntrg-accent); margin: 26px 0 10px; letter-spacing: 1px; }
.ntrg-devs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ntrg-devs-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 14px; border-radius: 10px; background: var(--ntrg-bg2);
    border: 1px solid var(--ntrg-border); color: var(--ntrg-text) !important;
    text-decoration: none !important; transition: border-color .2s, transform .2s;
}
.ntrg-devs-item:hover { border-color: var(--ntrg-accent); transform: translateY(-2px); }
.ntrg-devs-count { font-size: 11px; color: var(--ntrg-text2); background: var(--ntrg-bg3); border-radius: 20px; padding: 2px 8px; }

.ntrg-dev-hero { display: flex; gap: 18px; align-items: center; padding: 20px; border-radius: 14px; background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); margin-bottom: 20px; flex-wrap: wrap; }
.ntrg-dev-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ntrg-accent), var(--ntrg-purple)); flex: 0 0 72px; }
.ntrg-dev-hero h1.ntrg-dev-name {
    margin: 0 0 8px; font-size: 30px; font-weight: 800; letter-spacing: 1px; line-height: 1.15;
    color: var(--ntrg-text) !important;
    text-shadow: 0 0 6px var(--ntrg-accent), 0 0 16px rgba(200,75,122,.75), 0 0 34px rgba(200,75,122,.5);
}
.ntrg-light .ntrg-dev-hero h1.ntrg-dev-name { text-shadow: 0 0 4px rgba(200,75,122,.5), 0 0 12px rgba(200,75,122,.35); }
.ntrg-dev-avatar { width: 96px; height: 96px; flex: 0 0 96px; font-size: 36px; box-shadow: 0 0 0 3px var(--ntrg-bg2), 0 0 0 5px var(--ntrg-accent), 0 0 18px rgba(200,75,122,.45); overflow: hidden; }
.ntrg-dev-avatar-img { background: var(--ntrg-bg4); }
.ntrg-dev-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ntrg-dev-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ntrg-dev-hero .ntrg-dev-links { margin-top: 4px; }

/* game cards: bigger, 3D flip */
.ntrg-dev-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ntrg-dev-game-card { position: relative; aspect-ratio: 4/3; perspective: 1200px; cursor: pointer; outline: none; }
.ntrg-dev-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.2,.2,1); }
.ntrg-dev-game-card:hover .ntrg-dev-flip,
.ntrg-dev-game-card:focus-visible .ntrg-dev-flip,
.ntrg-dev-game-card.is-flipped .ntrg-dev-flip { transform: rotateY(180deg); }
.ntrg-dev-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; background: var(--ntrg-bg2); border: 1px solid var(--ntrg-border); display: flex; flex-direction: column; }
.ntrg-dev-front .ntrg-dev-game-cover { flex: 1; position: relative; background: var(--ntrg-bg4); }
.ntrg-dev-front .ntrg-dev-game-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ntrg-dev-game-info { padding: 10px 13px; }
.ntrg-dev-game-title { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; color: var(--ntrg-text); }
.ntrg-dev-game-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.ntrg-dev-back { transform: rotateY(180deg); padding: 18px; justify-content: center; gap: 8px; border-color: var(--ntrg-accent); background: linear-gradient(160deg, rgba(200,75,122,.18), var(--ntrg-bg2) 60%); box-shadow: 0 0 22px rgba(200,75,122,.35) inset; }
.ntrg-dev-back-title { font-size: 16px; font-weight: 800; color: var(--ntrg-text); margin-bottom: 6px; text-shadow: 0 0 10px rgba(200,75,122,.6); }
.ntrg-dev-back-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ntrg-text2); border-bottom: 1px solid var(--ntrg-border); padding: 5px 0; }
.ntrg-dev-back-row b { color: var(--ntrg-text); text-align: right; }
.ntrg-dev-open { margin-top: 10px; align-self: flex-start; }
@media (max-width: 640px) { .ntrg-dev-games-grid { grid-template-columns: 1fr; } }

/* ── FAQ block ──────────────────────────────────────────── */
.ntrg-faq details { border: 1px solid var(--ntrg-border); border-radius: 8px; background: var(--ntrg-bg3); margin-bottom: 8px; }
.ntrg-faq summary { cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 14px; color: var(--ntrg-text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ntrg-faq summary::-webkit-details-marker { display: none; }
.ntrg-faq summary::after { content: '+'; font-size: 18px; color: var(--ntrg-text2); flex: 0 0 auto; }
.ntrg-faq details[open] summary::after { content: '\2212'; }
.ntrg-faq-a { padding: 0 14px 12px; font-size: 13px; line-height: 1.6; color: var(--ntrg-text2); }

/* ── Dead-link report button ────────────────────────────── */
.ntrg-dl-report { display: flex; justify-content: flex-end; margin-top: 8px; }
.ntrg-report-btn { font-size: 11px; color: var(--ntrg-text3); background: none; border: 1px dashed var(--ntrg-border2); border-radius: 6px; padding: 4px 9px; cursor: pointer; }
.ntrg-report-btn:hover { color: var(--ntrg-text); border-color: var(--ntrg-accent); }
.ntrg-report-form { margin-top: 8px; padding: 10px; border-radius: 8px; background: var(--ntrg-bg3); border: 1px solid var(--ntrg-border); font-size: 12px; }
.ntrg-report-form select, .ntrg-report-form button { font-size: 12px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--ntrg-border2); background: var(--ntrg-bg2); color: var(--ntrg-text); margin-right: 6px; }
.ntrg-report-form button.ntrg-dl-btn { border: none; }
.ntrg-report-msg { margin-top: 6px; color: var(--ntrg-green); }

/* ── Search "No results" page — dark mode ───────────────── */
.ntrg-dark .gridlove-not-found .gridlove-box {
    background:   var(--ntrg-bg2) !important;
    border:       1px solid var(--ntrg-border);
    border-radius: 14px;
    color:        var(--ntrg-text);
    box-shadow:   none;
}
.ntrg-dark .gridlove-not-found .module-title h1,
.ntrg-dark .gridlove-not-found .entry-content,
.ntrg-dark .gridlove-not-found .entry-content p { color: var(--ntrg-text) !important; }
.ntrg-dark .gridlove-not-found .module-title h1 { text-shadow: 0 0 10px rgba(200,75,122,.5); }
.ntrg-dark .gridlove-not-found .gridlove-search-form { display: flex; gap: 8px; max-width: 520px; margin-top: 14px; }
.ntrg-dark .gridlove-not-found .gridlove-search-form input {
    flex: 1; background: var(--ntrg-bg3) !important; color: var(--ntrg-text) !important;
    border: 1px solid var(--ntrg-border2) !important; border-radius: 8px; padding: 10px 14px;
}
.ntrg-dark .gridlove-not-found .gridlove-search-form input::placeholder { color: var(--ntrg-text3); }
.ntrg-dark .gridlove-not-found .gridlove-button-search {
    background: var(--ntrg-accent) !important; color: #fff !important; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer;
}
.ntrg-dark .gridlove-not-found .gridlove-button-search:hover { background: var(--ntrg-accent2) !important; }

@media (max-width: 600px) {
    .ntrg-xsec-head { font-size: 17px; letter-spacing: 1.5px; }
    .ntrg-dev-hero { padding: 14px; }
}