/* ==========================================================================
   Server detail page (server.php) — shared primitives for the vote analytics
   page (vote_tracking.php), which loads this file and vote-analytics.css
   --------------------------------------------------------------------------
   The detail page used to be a stack of generic Bootstrap cards: a grey
   .card-header for every section, a Bootstrap breadcrumb, btn-success /
   btn-primary / btn-warning in the sidebar, a blue "badge bg-primary" for
   the category. It was the one page on the site that did not look like the
   site.

   Re-cut on the tokens of the listing rows (.srv), the page header (.ph) and
   the review cards (.rv):

     breadcrumb
     +- .ph ------------------------------------------------------------+
     | GAME · PRIVATE SERVER          | 1,284    4.6 *    12      3.4K  |
     | [banner]                       | votes    rating   reviews clicks|
     | H1 + one-line summary          |                                 |
     +--------------------------------+---------------------------------+
     | [Vote now] [Website][Discord]         · Reviews · Vote analytics |
     +------------------------------------------------------------------+
     +- main ----------------------------+ +- side ----------------------+
     | About · Details · Reviews · FAQ   | | Vote · Recent votes ·       |
     | Related games                     | | Links · Info                |
     +-----------------------------------+ +-----------------------------+

   Own class names (.sd-*). The legacy hooks assets/js/review-form.js and
   review-voting.js select on are kept as they are: #ratingStars .star,
   #rating, #review-content(-counter/-feedback), .review-votes, .vote-btn,
   .helpful-btn, .not-helpful-btn, .vote-count, .active, .disabled.
   ========================================================================== */

.sd {
    --sd-line: rgba(0, 255, 255, 0.12);
    --sd-ink-2: #aab0bd;
    --sd-ink-3: #7c8594;
    padding-top: 10px;
    font-family: var(--font-family, 'Rajdhani', sans-serif);
    color: #d5d9e2;
}
.sd a { text-decoration: none; }

/* ---------- breadcrumb ---------- */
.sd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.sd-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sd-crumbs li + li::before { content: "\203A"; font-size: 1.05rem; line-height: 1; color: rgba(0, 255, 255, 0.5); }
.sd-crumbs a { color: var(--sd-ink-2); }
.sd-crumbs a:hover { color: #ffffff; }
.sd-crumbs a i { color: var(--primary-color, #00ffff); opacity: .8; font-size: .7rem; margin-right: 5px; }
.sd-crumbs [aria-current] { color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- header additions ---------- */
/* Category kicker where the homepage has its "updated" dot */
.sd-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-color, #00ffff);
}
.sd-kicker i { font-size: .72rem; opacity: .85; }
.sd-kicker:hover { text-decoration: underline; }
/* The full banner, animated where the owner uploaded animation: this is the
   one page where the animation is the point (listings get the poster still). */
.sd-hero-banner {
    display: block;
    width: 100%;
    max-width: 468px;
    height: auto;
    aspect-ratio: 728 / 90;
    object-fit: cover;
    margin: 2px 0 4px;
    border: 1px solid rgba(0, 255, 255, 0.3);
}
.sd-stars { display: inline-flex; gap: 2px; color: #f5c451; font-size: .72rem; white-space: nowrap; }
.sd-stars .off { color: rgba(255, 255, 255, 0.14); }
.ph-stat .sd-stars { margin-top: 1px; }
.ph-stat-n small { font-size: .62em; font-weight: 600; color: var(--sd-ink-2); margin-left: 3px; letter-spacing: 0; }
.ph-stat-n.is-empty { color: var(--sd-ink-3); }

/* Glass Vote, toolbar-sized (the same cut as .rv-cta; defined here so this
   page does not depend on reviews.css for its primary action) */
.sd-cta {
    display: inline-flex;
    width: auto;
    height: 34px;
    padding: 0 16px;
    margin: 0;
    gap: 8px;
    font-size: .76rem;
    border-radius: 0;
    cursor: pointer;
}
.sd-cta i { font-size: .75rem; }
.ph-chips a .sd-ext { font-size: .62rem; color: var(--sd-ink-3); margin-left: 2px; }
.ph-chips a:hover .sd-ext { color: var(--sd-ink-2); }
.ph-bar .sd-end { margin-left: auto; }

/* ---------- two-column body ---------- */
.sd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
    margin-bottom: 30px;
}
.sd-main, .sd-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---------- panel ---------- */
.sd-panel { background: rgba(10, 10, 15, 0.9); border: 1px solid rgba(0, 255, 255, 0.16); }
.sd-panel-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--sd-line);
}
.sd-panel-h h2, .sd-panel-h h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.sd-panel-h h2 i, .sd-panel-h h3 i { color: var(--primary-color, #00ffff); font-size: .74rem; opacity: .85; }
.sd-panel-h .sd-h-n { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-ink-3); }
.sd-panel-h .sd-h-end { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sd-panel-b { padding: 14px 16px; }
.sd-panel-f { padding: 10px 16px; border-top: 1px solid rgba(0, 255, 255, 0.1); font-size: .8rem; color: var(--sd-ink-3); }
.sd-panel-f a { color: var(--primary-color, #00ffff); font-weight: 600; }
.sd-panel-f a:hover { text-decoration: underline; }

/* Small outlined action, the same cut as the review-card actions */
.sd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(0, 255, 255, 0.22);
    background: transparent;
    color: #cfd3dc;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.sd-btn i { color: var(--primary-color, #00ffff); font-size: .75rem; }
.sd-btn:hover { border-color: var(--primary-color, #00ffff); color: #ffffff; }
.sd-btn--danger { border-color: rgba(255, 0, 255, 0.4); }
.sd-btn--danger i { color: #ff7bff; }
.sd-btn--danger:hover { border-color: #ff7bff; background: rgba(255, 0, 255, 0.07); }

/* ---------- description ---------- */
.sd-more-toggle { display: none; }
.sd-prose {
    margin: 0;
    color: #d5d9e2;
    font-size: .97rem;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* Long descriptions clamp to twelve lines with a CSS-only toggle; the whole
   text stays in the DOM for search engines. PHP only renders the toggle when
   the text is long enough to need it. */
.sd-prose--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-more {
    display: inline-block;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--primary-color, #00ffff);
    cursor: pointer;
    user-select: none;
}
.sd-more::after { content: "Read more"; }
.sd-more:hover { text-decoration: underline; }
.sd-more-toggle:checked ~ .sd-prose--clamp { -webkit-line-clamp: unset; display: block; }
.sd-more-toggle:checked ~ .sd-more::after { content: "Show less"; }

/* ---------- details: a 1px-divided spec grid ---------- */
/* The dividers are each cell's own right/bottom shadow, sitting in the 1px
   gap; the outer edges are clipped by the grid. A background on the grid
   would also paint the empty slot of a half-filled last row. */
.sd-spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
}
.sd-spec > div {
    background: #0a0a0f;
    box-shadow: 1px 1px 0 0 var(--sd-line);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sd-spec dt { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sd-ink-3); }
.sd-spec dd {
    margin: 0;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .88rem;
    font-weight: 700;
    color: #ffffff;
    overflow-wrap: anywhere;
}
.sd-spec dd i { color: var(--primary-color, #00ffff); font-size: .72rem; margin-right: 6px; opacity: .85; }
.sd-spec dd a { color: #ffffff; }
.sd-spec dd a:hover { color: var(--primary-color, #00ffff); }
.sd-spec dd.is-on { color: #00ff9d; }
.sd-spec dd.is-on i { color: #00ff9d; }
.sd-spec dd.is-off { color: var(--sd-ink-2); }
.sd-spec dd.is-off i { color: var(--sd-ink-3); }

/* ---------- recent votes ---------- */
.sd-votes { list-style: none; margin: 0; padding: 0; }
.sd-votes li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-top: 1px solid rgba(0, 255, 255, 0.07);
    font-size: .84rem;
}
.sd-votes li:first-child { border-top: 0; }
.sd-cc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 36px;
    padding: 0 5px;
    border: 1px solid rgba(0, 255, 255, 0.25);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .6rem;
    letter-spacing: .08em;
    color: var(--primary-color, #00ffff);
    white-space: nowrap;
}
.sd-votes .sd-ip { color: #cfd3dc; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-votes .sd-ip i { color: #00ff9d; font-size: .72rem; margin-right: 7px; }
.sd-votes time { color: var(--sd-ink-3); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-empty { padding: 14px 16px; color: var(--sd-ink-2); font-size: .9rem; }
.sd-empty i { color: var(--primary-color, #00ffff); opacity: .6; margin-right: 8px; }
.sd-empty a { color: var(--primary-color, #00ffff); font-weight: 600; }
.sd-panel-b > .sd-empty { padding: 0; }
/* Blocks that follow the rating summary inside the reviews panel */
.sd-panel-b > .sd-note, .sd-panel-b > .sd-form { margin-top: 14px; }

/* ---------- reviews: rating summary ---------- */
.sd-rating { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.sd-rating-avg { text-align: center; padding: 8px 12px; border-right: 1px solid rgba(0, 255, 255, 0.1); }
.sd-rating-n {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
}
.sd-rating-avg .sd-stars { display: flex; justify-content: center; font-size: .85rem; margin: 8px 0 6px; }
.sd-rating-c { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sd-ink-3); }
.sd-rating .rvp-bars { padding: 0; }
/* The bar rows are spans inside a link; the fill needs a box to take height */
.sd-rating .rvp-bar-track, .sd-rating .rvp-bar-fill { display: block; }

/* ---------- reviews: form ---------- */
.sd-form { display: flex; flex-direction: column; gap: 14px; }
.sd-form h3 {
    margin: 0;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .95rem;
    color: #ffffff;
}
.sd-field label, .sd-field .sd-label {
    display: block;
    margin: 0 0 6px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sd-ink-3);
}
.sd-field input[type="text"], .sd-field textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 0;
    color: #e6e9ef;
    font: inherit;
    font-size: .95rem;
    line-height: 1.5;
}
.sd-field textarea { min-height: 130px; resize: vertical; }
.sd-field input:focus, .sd-field textarea:focus { outline: none; border-color: var(--primary-color, #00ffff); box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1); }
.sd-field .star-rating-input { display: flex; gap: 6px; font-size: 1.5rem; line-height: 1; }
.sd-field .star-rating-input .star { cursor: pointer; color: rgba(255, 255, 255, 0.16); transition: color .12s, transform .12s; }
.sd-field .star-rating-input .star.active,
.sd-field .star-rating-input .star.hover { color: #f5c451; }
.sd-field .star-rating-input .star:hover { transform: scale(1.12); }
.sd-field .character-counter { margin-top: 6px; font-size: .78rem; color: var(--sd-ink-3); font-variant-numeric: tabular-nums; }
.sd-field .sd-hint { margin-top: 4px; font-size: .8rem; color: var(--sd-ink-3); }
.sd-field .form-feedback { font-size: .8rem; color: #ff7bff; }
.sd-field .form-feedback:empty { display: none; }
.sd-form .sd-cta { align-self: flex-start; }
.sd-form .sd-cta:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- notices ---------- */
.sd-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.035);
    color: #cfd3dc;
    font-size: .9rem;
    line-height: 1.5;
}
.sd-note i { color: var(--primary-color, #00ffff); margin-top: 4px; flex: none; }
.sd-note a { color: var(--primary-color, #00ffff); font-weight: 600; }
.sd-note a:hover { text-decoration: underline; }
.sd-note--lock { border-color: rgba(245, 196, 81, 0.35); background: rgba(245, 196, 81, 0.05); }
.sd-note--lock i { color: #f5c451; }
.sd-note form { margin: 8px 0 0; }
.sd-flash { padding: 10px 14px; margin: 0 0 14px; border: 1px solid rgba(0, 255, 157, 0.45); background: rgba(0, 255, 157, 0.06); color: #d5f8e8; font-size: .9rem; }
.sd-flash--danger, .sd-flash--error { border-color: rgba(255, 0, 255, 0.45); background: rgba(255, 0, 255, 0.06); color: #f8d5f8; }
.sd-flash--warning { border-color: rgba(245, 196, 81, 0.45); background: rgba(245, 196, 81, 0.06); color: #f8ecd0; }

/* The latest review reuses the .rv card from reviews.css; inside a panel it
   loses its own border so it does not read as a box in a box */
.sd-latest { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sd-line); }
.sd-latest .sd-panel-h { padding: 0 0 10px; border-bottom: 0; }
.sd-latest .rv { border: 0; padding: 0; }
.sd-latest .rv:hover { box-shadow: none; }
.sd-latest .rv-title { font-size: .95rem; }

/* ---------- FAQ ---------- */
.sd-faq details { border-top: 1px solid rgba(0, 255, 255, 0.07); }
.sd-faq .sd-panel-h + details { border-top: 0; }
.sd-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    color: #e6e9ef;
}
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::before {
    content: "+";
    flex: none;
    width: 16px;
    text-align: center;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    color: var(--primary-color, #00ffff);
}
.sd-faq details[open] summary::before { content: "\2212"; }
.sd-faq summary:hover { background: rgba(0, 255, 255, 0.03); }
.sd-faq p { margin: 0; padding: 0 16px 14px 44px; color: #b8bcc8; font-size: .92rem; line-height: 1.6; }

/* ---------- sidebar: vote ---------- */
.sd-vote { text-align: center; padding: 18px 16px 16px; }
.sd-vote-n {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(0, 255, 255, 0.25);
}
.sd-vote-l { margin-top: 5px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-ink-3); }
.sd-vote .srv-vote { height: 44px; margin-top: 14px; gap: 8px; font-size: .86rem; }
.sd-vote-rank { margin-top: 12px; font-size: .84rem; color: var(--sd-ink-2); }
.sd-vote-rank b { font-family: var(--font-heading, 'Orbitron', sans-serif); color: var(--primary-color, #00ffff); font-weight: 800; }
.sd-vote-rank a { color: #ffffff; }
.sd-vote-rank a:hover { color: var(--primary-color, #00ffff); }
.sd-vote-reset { margin-top: 6px; font-size: .76rem; color: var(--sd-ink-3); }

/* ---------- sidebar: link list ---------- */
.sd-links { list-style: none; margin: 0; padding: 0; }
.sd-links li { border-top: 1px solid rgba(0, 255, 255, 0.07); }
.sd-links li:first-child { border-top: 0; }
.sd-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #cfd3dc;
    font-size: .9rem;
    font-weight: 600;
    transition: background .15s, color .15s;
}
.sd-links a i:first-child { width: 18px; text-align: center; color: var(--primary-color, #00ffff); font-size: .85rem; }
.sd-links a .sd-ext { margin-left: auto; color: var(--sd-ink-3); font-size: .68rem; }
.sd-links a:hover { background: rgba(0, 255, 255, 0.05); color: #ffffff; }

/* ---------- sidebar: key/value list ---------- */
.sd-kv { margin: 0; padding: 0 16px 4px; }
.sd-kv > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(0, 255, 255, 0.07);
    font-size: .86rem;
}
.sd-kv > div:first-child { border-top: 0; }
.sd-kv dt { color: var(--sd-ink-3); white-space: nowrap; }
.sd-kv dd { margin: 0; color: #e6e9ef; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sd-kv dd a { color: var(--primary-color, #00ffff); }
.sd-kv dd a:hover { text-decoration: underline; }
.sd-kv dd.is-on { color: #00ff9d; }
.sd-kv dd.is-off { color: var(--sd-ink-2); }

/* ---------- pager + horizontal scroll (shared with the analytics page) ---------- */
.sd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sd-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; }
.sd-pag a, .sd-pag span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 255, 255, 0.22);
    color: #cfd3dc;
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sd-pag a:hover { border-color: var(--primary-color, #00ffff); color: #ffffff; }
.sd-pag .is-active {
    background: linear-gradient(180deg, rgba(0, 255, 255, .22) 0%, rgba(0, 255, 255, .08) 100%);
    border-color: rgba(0, 255, 255, 0.45);
    color: #ffffff;
}
.sd-pag-info { width: 100%; text-align: center; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sd-ink-3); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .sd-grid { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 900px) {
    .sd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    /* The toolbar stacks here (page-hero.css makes the segment full width);
       the glass Vote button follows suit so it is not a lone small box. */
    .ph-bar .sd-cta { width: 100%; justify-content: center; height: 40px; margin: 0; }
}
@media (max-width: 640px) {
    .sd-hero-banner { max-width: none; }
    .sd-panel-b { padding: 12px; }
    .sd-panel-h { padding: 10px 12px; }
    .sd-panel-h .sd-h-end { margin-left: 0; width: 100%; }
    .sd-panel-h .sd-h-end a { flex: 1; justify-content: center; height: 34px; }
    .sd-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sd-spec > div { padding: 10px 12px; }
    .sd-votes li { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 8px 12px; }
    .sd-rating { grid-template-columns: 1fr; gap: 12px; }
    .sd-rating-avg { border-right: 0; border-bottom: 1px solid rgba(0, 255, 255, 0.1); padding-bottom: 12px; }
    .sd-faq p { padding-left: 40px; }
    .sd-form .sd-cta { align-self: stretch; justify-content: center; height: 40px; }
    .sd-crumbs { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-btn, .sd-links a, .sd-field .star-rating-input .star { transition: none; }
}