﻿.content-section.with-border{
    border: 1px solid var(--border);
    box-shadow: 0 0 10px rgba(255,138,61,0.15);
    background-color: var(--surface-2);
    margin-bottom: 10px;
}
.content-section.active{ display:block }
.fade-in{ opacity:1; transform: translateY(0) }

.glass{
    background: var(--panel-grad);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-inner);
}

.content-section{
    border-radius: 12px;
    padding: 26px 24px;
    background: var(--panel-grad);
    border: 1px solid var(--glass-border);
    color: #ddd;
    box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-inner);
    transition: transform .15s ease, box-shadow .25s ease;
}
.content-section:hover{
    box-shadow: 0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 var(--glass-inner);
}

.content-section h2{
    font-size: 28px;
    font-weight: 800;
    color: var(--brand);
    margin-bottom: 16px;
    letter-spacing: .5px;
    border-bottom: 2px solid var(--brand);
    padding-bottom: 6px;
}
.content-section h3{ font-size:22px; color: var(--brand-2); margin-top:24px; padding-bottom:8px }
.content-section h4{ font-size:18px; color: var(--brand-3); margin-bottom:10px }

.text-danger{ color: var(--danger) !important }
.text-info{ color: var(--brand-2) !important }
.text-success{ color: var(--success) !important }

.code-container{
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(255,138,61,0.2);
    background-color: var(--code-bg);
    overflow: hidden; margin: 10px 0;
}
.code-header{
    display:flex; justify-content: space-between; align-items:center;
    padding:10px 15px;
    background-color: var(--code-header);
    color:#fff; font-size:16px; font-weight:bold;
    border-bottom: 1px solid #2a2f36;
}
.code-title{ font-size:14px; color:#ddd }
.copy-button{
    background-color: var(--brand);
    color:#0f0f0f;
    border: none; border-radius: 4px; padding: 5px 10px; font-size:14px; cursor:pointer;
    transition: background-color .25s ease, box-shadow .25s ease, transform .1s ease;
}
.copy-button:hover{ background-color: var(--brand-hover); box-shadow: 0 0 8px rgba(255,154,26,0.45) }
.copy-button:active{ transform: translateY(1px) }
.code-block{
    padding:10px 15px; color:#dcdcdc; max-height:400px; overflow-y:auto; white-space: pre-wrap; background-color: var(--code-bg) !important;
}
pre[class*="language-"], code[class*="language-"]{
    background-color: transparent !important; margin:0 !important; padding:0 !important; border:none !important;
    font-family: Fira Code, Consolas, Courier New, Courier, monospace !important;
    font-size:14px !important; line-height:1.4; word-wrap: break-word !important;
}
code{
    background-color: #252a2f;
    color: var(--brand-3);
    padding: 2px 4px; border-radius: 4px;
    font-family: Fira Code, Consolas, Courier New, Courier, monospace !important;
    font-size: 14px !important; font-weight: bold;
}
code:hover{ background-color: #2d333a }

mark{
    background-color: #ffefb0; color:#1b1b1b; padding:0; border-radius:3px;
}

details.spoiler summary{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.55rem .9rem;
    border:1px solid rgba(200,200,200,.1); border-radius:.5rem;
    background:#1f2330; color: var(--brand);
    font: 500 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    cursor:pointer; user-select:none; list-style:none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
details.spoiler summary::-webkit-details-marker{ display:none }
details.spoiler summary:hover{ background:#24293a }
details.spoiler summary:focus-visible{ outline:2px solid #6aa3ff; outline-offset:2px }
details.spoiler summary::before{ content:"▶"; font-size:12px; transform: translateY(-1px); transition: transform .15s ease }
details.spoiler[open] summary{ background:#2a3044; border-color: rgba(255,255,255,.3) }
details.spoiler[open] summary::before{ content:"▼"; transform: translateY(-1px) }
details.spoiler > *:not(summary){ margin-top:.75rem }

.image-grid{
    --cols: 11; --thumb: 120px; --min: 90px; --gap: 5px;
    display:grid; gap:var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--min), var(--thumb)));
    justify-content:start; align-items:start;
    max-width: calc(var(--cols) * var(--thumb) + (var(--cols) - 1) * var(--gap));
}
.image-grid img{ display:block; max-width:100%; height:auto }

.mod-container, .other-mods{
    display:grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap:1rem; justify-items: stretch; width:100%;
}
.mods h3, .mods-alt h3{
    font-size:22px; color: var(--brand); margin:10px 0 12px;
    text-shadow: 0 0 8px rgba(255,138,61,0.25);
}
.mod-item{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    background: rgba(255,255,255,0.06);
    border:2px solid var(--border);
    border-radius:10px;
    padding:10px;
    cursor:pointer;
    transition: transform .3s, background .3s, border-color .3s, box-shadow .3s;
    width:100%;
    max-width:700px;
    margin:auto;
    text-align:left;
    box-shadow: 0 6px 16px var(--mod-shadow);
    overflow:visible;
}
.mod-item:hover{
    transform: scale(1.05);
    background: linear-gradient(145deg, rgba(255,122,24,.25), rgba(255,180,87,.25));
    border-color: var(--brand);
    box-shadow: 0 10px 24px var(--mod-shadow);
}
.mod-item.helped{
    border-color: rgba(0,188,212,.35);
    box-shadow: 0 6px 16px var(--help-shadow);
}
.mod-item.helped .mod-info h2{ color: var(--help-accent) }
.mod-item.helped .mod-meta{
    background: rgba(0,188,212,.08);
    border: 1px solid rgba(0,188,212,.30);
    color: #d8f9ff;
}
.mod-item img{
    width:100px; height:100px; border-radius:20px; object-fit:cover;
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.mod-info{ flex:1 1 auto; min-width:0; margin-left:15px; margin-right:5px }
.mod-info h2{ font-size:16px; color: var(--brand); margin:0 0 4px 0 }
.mod-info p{
    margin:0;
    color: var(--muted);
    line-height:1.35;
    white-space:normal;
    overflow:visible;
    max-height:none;
    -webkit-line-clamp:unset;
    line-clamp:unset;
}
.mod-meta{
    margin-right:16px; color: var(--muted); font-size:.92em; letter-spacing:.1px;
    padding:2px 6px; background: rgba(255,138,61,.08); border:1px solid rgba(255,138,61,.25);
    border-radius:6px; display:inline-block; font-variant-numeric: tabular-nums;
}

.search-container{
    display:grid; grid-template-columns: 1fr auto; gap:6px; align-items:center;
}
#vertical-search{ position:relative; width:91% }
#searchClear{
    position:absolute; top:15px; right:-22px; transform: translateY(-50%);
    height:33px; padding:0 10px; white-space:nowrap;
}
#search-results{
    grid-column: 1 / -1; position:relative; margin-top:4px; display:none;
}
#search-results .search-item{
    background: rgba(32,37,42,.72);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:pointer;
    transition: transform .12s ease, background-color .2s ease, border-color .2s ease;
}
#search-results .search-item:hover{
    transform: translateY(-1px);
    background: rgba(38,44,50,.85);
    border-color: rgba(255,255,255,.22);
}
#search-results .search-title{ color: var(--brand); font-weight:700; font-size:13px }
#search-results .search-snippet{ color: var(--muted); font-size:12px; margin-top:2px; line-height:1.35 }

blockquote{
    --q-accent: var(--brand-2);
    --q-bg: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
    position: relative;
    margin: 14px 0;
    padding: 14px 16px 14px 48px;
    color: var(--text);
    background: var(--q-bg);
    border: 1px solid var(--glass-border, rgba(255,255,255,.12));
    border-left: 4px solid var(--q-accent);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-inner, rgba(255,255,255,.06));
    backdrop-filter: blur(10px);
    overflow: hidden;
}

blockquote p{
    margin: 0 0 .6rem 0;
    color: var(--muted);
    line-height: 1.7;
}
blockquote p:last-child{ margin-bottom: 0 }

blockquote::before{
    content: "“";
    position: absolute;
    left: 12px;
    top: 6px;
    font-size: 42px;
    line-height: 1;
    color: color-mix(in oklab, var(--q-accent) 70%, white 20%);
    opacity: .25;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

blockquote cite{
    display: block;
    margin-top: .5rem;
    color: color-mix(in oklab, var(--q-accent) 70%, white 15%);
    font-style: normal;
    font-weight: 600;
    font-size: .95rem;
}
blockquote cite::before{
    content: "— ";
    opacity: .8;
}

blockquote:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 var(--glass-inner, rgba(255,255,255,.06));
    transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease;
}

blockquote a{
    color: var(--brand-2);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--brand-2) 60%, white 20%);
}
blockquote a:hover{ border-bottom-color: var(--brand-2-hover) }

blockquote code{
    background: #252a2f;
    color: var(--brand-3);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: Fira Code, Consolas, Courier New, Courier, monospace !important;
    font-weight: 700;
}

blockquote.quote-info   { --q-accent: var(--brand-2) }
blockquote.quote-success{ --q-accent: var(--brand-3) }
blockquote.quote-warn   { --q-accent: var(--brand-4) }
blockquote.quote-brand  { --q-accent: var(--brand)   }

blockquote.is-compact{ padding: 10px 12px 10px 42px; border-radius: 10px }

.loader{
    position: fixed; inset: 0; z-index:1500;
    pointer-events:none; opacity:0; transition: opacity .18s ease;
}
.loader.is-visible{ pointer-events:auto; opacity:1 }
.loader__backdrop{
    position:absolute; inset:0;
    background:
            radial-gradient(1200px 800px at 50% -20%, rgba(221,92,9,.25), transparent 60%),
            radial-gradient(800px 600px at -10% 110%, rgba(21,122,166,.25), transparent 60%),
            rgba(11,13,16,.92);
}
.loader__card{
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    width:min(520px, calc(100vw - 48px));
    padding:26px 22px 20px; border-radius:16px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-inner);
    backdrop-filter: blur(10px);
    color:#e6e8eb; text-align:center;
}
.loader__ring{ position:relative; width:120px; height:120px; margin:0 auto 12px }
.loader__ringTrack,
.loader__ringFill{
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
    mask-image: radial-gradient(circle at 50% 50%, transparent 58%, #000 59%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:50% 50%; mask-position:50% 50%;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
}
.loader__ringTrack{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) }
.loader__ringFill{
    position:relative;
    background: conic-gradient(from 0deg, var(--ringA) 0deg, var(--ringB) 120deg, var(--ringC) 260deg, var(--ringA) 360deg);
    filter: drop-shadow(0 0 12px color-mix(in oklab, var(--ringA) 60%, black));
}
.loader.is-anim .loader__ringFill::after{
    content:"";
    position:absolute; inset:-10px; border-radius:50%;
    background: conic-gradient(from 0deg, transparent 0turn, rgba(255,255,255,.25) .02turn, transparent .12turn);
    animation: ring-sweep 1.8s linear infinite;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
    mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
}
@keyframes ring-sweep{ to{ transform: rotate(360deg) } }

.loader__logo{ position:absolute; inset:0; display:grid; place-items:center }
.loader__logo img{ width:125px; height:125px; object-fit:contain; filter: drop-shadow(0 0 10px rgba(221,92,9,.35)) }

.loader__comet{ --d:0ms; position:absolute; inset:0; pointer-events:none; transform-origin:50% 50%; z-index:2 }
.loader__comet::before{
    content:""; position:absolute; top:-14px; left:50%;
    width:6px; height:6px; margin-left:-3px; border-radius:50%;
    background:#fff;
    box-shadow: 0 0 10px #fff, 0 0 22px var(--ringA), 0 0 36px color-mix(in oklab, var(--ringA) 55%, var(--ringC));
}
.loader__comet::after{
    content:""; position:absolute; top:-14px; left:50%;
    width:100px; height:2px; transform-origin:0 50%;
    transform: translateX(-2px) rotate(180deg);
    background: linear-gradient(90deg, var(--ringB), transparent 70%);
    opacity:.65; filter: blur(1px); border-radius: 2px;
}
@keyframes cometSpin { to { transform: rotate(360deg) } }
.loader.is-anim .loader__comet{
    animation: cometSpin 0.5s linear infinite;
    animation-delay: var(--d);
}

.loader__title{ font:700 18px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.5px; opacity:.95 }
.loader__msg{ margin-top:6px; color:#b8c0cc; font:500 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif }
.loader__bar{ margin-top:14px; height:8px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--glass-border) }
.loader__barFill{ --p:0%; height:100%; width:var(--p); background: linear-gradient(90deg, var(--ringA), var(--ringB)); box-shadow: 0 0 12px rgba(221,92,9,.5); transition: width .25s ease }

@media (prefers-reduced-motion: reduce){
    .loader__ringFill{ animation: none }
    .loader__comet{ display:none }
}

.home-hero{
    --home-max: 100ch;
    position: relative;
    padding: 36px 30px 28px;
    background:
            radial-gradient(780px 420px at 8% -12%, rgba(221,92,9,.14), transparent 60%),
            radial-gradient(740px 380px at 102% 10%, rgba(21,122,166,.14), transparent 60%),
            var(--panel-grad);
    overflow: hidden;
}
.home-hero::before{
    content:"";
    position:absolute; left:-28%; right:-28%; top:-14%;
    height:2px; opacity:.35;
    background: linear-gradient(90deg, transparent, rgba(221,92,9,.55), rgba(38,198,218,.55), transparent);
    filter: blur(1px);
    animation: home-scan 9s linear infinite;
}
@keyframes home-scan { to { transform: translateY(860px) } }
.home-hero::after{
    content:"";
    position:absolute; inset:-2px;
    background:
            radial-gradient(600px 420px at 0% 0%, rgba(255,255,255,.035), transparent 60%),
            radial-gradient(560px 380px at 100% 100%, rgba(255,255,255,.03), transparent 60%);
    pointer-events:none;
}
.home-title{ margin:0 0 10px; border:0; font-size:clamp(28px, 4vw, 44px); letter-spacing:.3px }
.title-grad{
    background: linear-gradient(90deg, var(--brand), #269bda 55%, var(--brand));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 16px rgba(221,92,9,.18)
}
.home-title::after{
    content:""; display:block; height:2px; margin:12px 0 14px; border-radius:2px;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22), rgba(255,255,255,.06));
    box-shadow: 0 0 10px rgba(221,92,9,.18);
}

.home-grid{
    display:grid;
    gap:18px 26px;
    align-items:start;
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "side";
}
.home-main{ grid-area: main }
.home-side{ grid-area: side }

.home-main p{ max-width: var(--home-max); font-size: 1.04rem; line-height: 1.72; color: var(--text); margin: 0 0 14px }
.home-lead{ color: var(--muted); font-size: 1.08rem; margin-bottom: 14px }
.home-accent{
    margin: 2px 0 12px; padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--glass-inner);
    max-width: var(--home-max);
}
.home-accent p{ margin:0 }
.home-accent b{ color: var(--brand) }
.home-side{
    align-self: start;
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,.25), inset 0 1px 0 var(--glass-inner);
}
.home-side p{ margin: 0 0 10px; font-size: 1.02rem; line-height: 1.6 }
.home-thanks{ color: #c6cdd8; font-style: italic; margin: 2px 0 0 }
.home-hero a{
    color: var(--brand-2); font-weight: 800; text-decoration: none; border-bottom: 1px dashed color-mix(in oklab, var(--brand-2) 60%, white 20%);
}
.home-hero a:hover{ border-bottom-color: var(--brand-2-hover) }

.scan{ position: relative; overflow: hidden; isolation: isolate }
.scan::before{
    content:"";
    position:absolute; left:-30%; right:-30%; top:-15%;
    height:2px; opacity:.35;
    background: linear-gradient(90deg, transparent, var(--ringB), var(--ringC), transparent);
    filter: blur(1px);
    animation: scan-line 8s linear infinite;
    z-index: 1;
}

.center-viewport{
    min-height:100vh;
    display:grid;
    place-items:center;
    background: linear-gradient(135deg, rgba(22,26,30,.25), #0f1113);
    flex: 1 1 auto;
    width: 100%;
}

.card-404{
    max-width:640px;
    width:min(92vw,640px);
    margin:24px;
    padding:26px 24px;
    border:1px solid var(--glass-border);
    border-radius:14px;
    background: var(--panel-grad);
    box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 var(--glass-inner);
    text-align:center;
}

.card-404 h1{
    margin:0 0 10px;
    font-size:34px;
    color:var(--brand);
}

.card-404 p{ color:var(--muted); margin:0 0 8px }

.card-404 .hint{
    margin-top:8px;
    font-size:.9rem;
    color:#8fa3b8;
}

.btn-small.is-primary{
    color:#fff;
    border-color: var(--glass-border);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.btn-small.is-primary:hover{
    background:#1e2328;
    border-color: rgba(255,255,255,.25);
}

.quest-grid{
    display:grid;
    grid-template-columns:minmax(260px,512px) 1fr;
    gap:16px;
    align-items:start;
}
.quest-image img{
    width:100%;
    height:auto;
    border-radius:10px;
    box-shadow:0 2px 12px rgba(0,0,0,.45);
}
.quest-quote{ margin:0 }
.quest-bottom{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:6px;
}
.quest-subtitle{ margin:10px 0 6px; color:var(--brand-3) }
.quest-list, .dialog-list{
    margin:0;
    padding-left:0;
    list-style:none;
}
.quest-list li, .dialog-list li{
    margin:6px 0;
    color:var(--brand-4);
}
.dialog-list li b{ color:var(--brand); margin-right:6px }

.quest-hints{ grid-column:1 / -1; margin-top:10px }
.hint-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:10px;
}
.hint-img{
    width:100%;
    height:auto;
    border-radius:10px;
    box-shadow:0 2px 12px rgba(0,0,0,.35);
}

.mod-pills{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin-top:.4rem;
}
.mod-pill{
    display:inline-flex;
    align-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid var(--mod-pill-border, rgba(255,255,255,.15));
    padding:.15rem .5rem;
    border-radius:999px;
    font-size:.88em;
    line-height:1.25;
    white-space:nowrap;
}

#mods-own .mod-pill{
    --mod-pill-border: var(--brand, #28d7c4);
}

#mods-helped .mod-pill,
.mod-item.helped .mod-pill{
    --mod-pill-border: var(--brand-2, #ff6bd6);
}

@media (max-width:900px){
    .quest-grid{ grid-template-columns:1fr }
    .quest-bottom{ grid-template-columns:1fr }
    .hint-grid{ grid-template-columns:1fr }
}

@keyframes scan-line{ to{ transform: translateY(900px) } }

@media (min-width:1080px){
    .home-grid{
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-areas: "main side";
    }
}
@media (max-width:980px){
    .home-hero{ padding:28px 20px 22px }
    .home-main p{ font-size:1.02rem }
}
@media (prefers-reduced-motion: reduce){ .home-hero::before{ animation: none } }
