@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ========================================
   THEME VARIABLES
======================================== */

:root {
    --bg: #fdf8f9;
    --bg-accent: #fff3f8;

    --panel: #ffffff;
    --panel-light: #fff8fc;

    --text: #34263b;
    --muted: #78697d;

    --accent: #d95d9f;
    --accent-soft: #f7b4d5;

    --border: rgba(90, 50, 90, 0.12);

    --shadow: 0 8px 30px rgba(130, 100, 130, 0.08);
}

[data-theme="dark"] {
    --bg: #151019;
    --bg-accent: #2c1634;

    --panel: #221928;
    --panel-light: #2f2337;

    --text: #f3edf7;
    --muted: #b8a8c1;

    --accent: #ff8dc7;
    --accent-soft: #ffc4e1;

    --border: rgba(255,255,255,0.08);

    --shadow: 0 10px 40px rgba(0,0,0,0.25);
}

/* ========================================
   RESET
======================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* ========================================
   BODY
======================================== */

body {
    background:
        radial-gradient(
            circle at top,
            var(--bg-accent) 0%,
            var(--bg) 60%
        );

    color: var(--text);
    font-family: "Inter", sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;

    transition:
        background .35s ease,
        color .35s ease;
}

/* ========================================
   SUBTLE TEXTURE
======================================== */

.noise {

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.3) 0,
            rgba(255,255,255,.3) 1px,
            transparent 1px,
            transparent 2px
        );
    inset: 0;
    opacity: .025;
    pointer-events: none;
    position: fixed;
}

/* ========================================
   HEADER
======================================== */

header {
    align-items: center;

    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1100px;

    padding: 2rem;
}

.logo {
    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    font-weight: 600;
}

.heart {
    color: var(--accent);
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

nav a {
    color: var(--muted);
    text-decoration: none;
    transition: .2s ease;
}

nav a:hover {
    color: var(--accent);
}

.header-actions {
    align-items: center;
    display: flex;
}

/* ========================================
   THEME TOGGLE
======================================== */

.theme-toggle {
    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 999px;
    color: var(--text);

    cursor: pointer;

    font-size: .9rem;
    font-weight: 600;

    padding: .75rem 1rem;

    transition: .2s ease;
}

.theme-toggle:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* ========================================
   HERO
======================================== */

.hero {
    margin: 0 auto;
    max-width: 1100px;
    padding: 6rem 2rem;
}

.tiny-label {

    color: var(--accent);

    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 2px;

    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    line-height: 1;
    margin-bottom: 1.5rem;
}

.intro {

    color: var(--muted);
    font-size: 1.05rem;

    margin-bottom: 2rem;
    max-width: 620px;
}

.hero::after {

    color: var(--accent-soft);
    content: "♥ ♥ ♥";
    display: block;
    font-size: 1.1rem;

    letter-spacing: 12px;

    margin-top: 2rem;
}

/* ========================================
   BUTTONS
======================================== */

.button {

    background: var(--accent);

    border-radius: 14px;
    color: white;
    display: inline-block;
    font-weight: 700;

    padding: 1rem 1.4rem;

    text-decoration: none;

    transition: .2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

[data-theme="dark"] .button {
    color: #1a111e;
}

/* ========================================
   SECTIONS
======================================== */

.featured,
.updates {
    margin: 0 auto;
    max-width: 1100px;
    padding: 2rem;
}

h2 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}

/* ========================================
   SCRIPT GRID
======================================== */

.grid {
    display: grid;

    gap: 1.5rem;

    grid-template-columns:
        repeat(auto-fit, minmax(260px, 1fr));
}

/* ========================================
   CARDS
======================================== */

.card {

    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow);

    padding: 1.5rem;
    position: relative;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.card:hover {
    transform: translateY(-4px);
}

.card::before {

    background:
        rgba(217, 93, 159, .12);

    border-radius: 99px;
    bottom: 0;
    content: "";
    left: 18px;

    position: absolute;

    top: 0;

    width: 2px;
}

.card h3 {
    margin-bottom: .75rem;
}

.card p {
    color: var(--muted);
    margin-bottom: 1rem;
}

.card a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

/* ========================================
   STATUS BADGES
======================================== */

.status {

    background:
        rgba(217, 93, 159, .12);

    border-radius: 999px;

    color: var(--accent);
    display: inline-block;

    font-size: .75rem;
    font-weight: 600;

    margin-bottom: 1rem;

    padding: .35rem .7rem;
}

.beta {
    background:
        rgba(255, 206, 92, .15);
    color: #b47d00;
}

.legacy {
    background:
        rgba(120, 120, 120, .12);
    color: #7a7a7a;
}

/* ========================================
   UPDATES
======================================== */

.updates ul {
    list-style: none;
}

.updates li {
    background: var(--panel);

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: var(--shadow);

    margin-bottom: .75rem;

    padding: 1rem 1.2rem;
}

.updates span {

    color: var(--accent);
    font-family: "JetBrains Mono", monospace;

    margin-right: .75rem;
}

/* ========================================
   FANUPDATE EMBED (updates.php)
   Selector set mirrors update-blog/admin/get-code.php's CSS starter
   snippet, scoped under #fanupdate and themed with this site's own
   --bg/--panel/--text/--muted/--accent/--border/--shadow tokens so it
   follows the existing light/dark toggle automatically.
======================================== */

/*	====	FanUpdate	====	*/

div#fanupdate {}

/* Each post — set via Admin -> Templates -> entry_template, which wraps
   {{title}}/{{catfile}}/{{body}} in <div class="fu-entry">...</div>. Without
   that wrapper this rule matches nothing and posts fall back to plain flow
   (no card), same as before entry_template was customised. */
#fanupdate .fu-entry {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow-wrap: break-word;
    padding: 1.5rem 1.75rem;
}

#fanupdate .fu-entry pre {
    white-space: pre-wrap;
    word-break: break-word;
}

#fanupdate h2 {
    color: var(--accent);
    font-size: 1.3rem;
    margin-bottom: .5rem;
    margin-top: 0;
}

#fanupdate h2 a {
    color: inherit;
    text-decoration: none;
}

#fanupdate h2 a:hover {
    text-decoration: underline;
}

#fanupdate h3 {
    color: var(--text);
    font-size: 1.1rem;
    margin: 1.5rem 0 .75rem;
}

#fanupdate p {
    color: var(--text);
    margin-bottom: 1rem;
}

#fanupdate ul,
#fanupdate ol {
    margin: 0 0 1rem 1.5rem;
}

#fanupdate a {
    color: var(--accent);
}

/*	====	Entries	====	*/

#fanupdate p.catfile {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 1.25rem;
    padding: 0;
}

#fanupdate p.catfile a {
    color: var(--accent);
    text-decoration: none;
}

#fanupdate p.catfile a:hover {
    text-decoration: underline;
}

/* Entry date in the category archive listing (show-cat.php). */
#fanupdate span.date {
    color: var(--accent);
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
}

/* Pagination (SqlConnection::PrintPaginate) — printed directly into
   #fanupdate after the .fu-entry cards, so it needs its own top margin now
   that #fanupdate itself carries no padding. */
#fanupdate a.prev,
#fanupdate a.next {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

#fanupdate > a.prev,
#fanupdate > a.next,
#fanupdate > strong.here {
    display: inline-block;
    margin-top: .5rem;
}

#fanupdate strong.here {
    color: var(--text);
}

/*	====	Images	====	*/

/* Wraps every image inserted via the post editor's "Insert image" button.
   Rounds the corners, adds a subtle border, and shows a "zoom" cursor on
   hover to hint that it opens in a lightbox. */
#fanupdate a.fu-lightbox {
    border: 1px solid var(--border);
    border-radius: 6px;
    display: inline-block;
    overflow: hidden;
}

/* Border/shadow brighten slightly on hover or keyboard focus. */
#fanupdate a.fu-lightbox:hover,
#fanupdate a.fu-lightbox:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

#fanupdate a.fu-lightbox img {
    cursor: zoom-in;
    display: block;
    height: auto;
    max-width: 100%;
    transition: opacity .15s;
}

/* Slight fade on hover/focus to reinforce that the image is clickable. */
#fanupdate a.fu-lightbox:hover img,
#fanupdate a.fu-lightbox:focus img {
    opacity: .88;
}

/* Optional: add one of these classes to the <a class="fu-lightbox">
   element in a post body to position the image relative to surrounding
   text (see the README's "Image uploads" section for examples). */
#fanupdate a.fu-lightbox.fu-img-left {
    float: left;
    margin: 0 1.25em .75em 0;
}

#fanupdate a.fu-lightbox.fu-img-right {
    float: right;
    margin: 0 0 .75em 1.25em;
}

#fanupdate a.fu-lightbox.fu-img-center {
    display: block;
    margin: .75em auto;
}

/*	====	Comments	====	*/

#fanupdate div#comments {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem;
}

#fanupdate div.comment {
    border-top: 1px solid var(--border);
    clear: both;
    padding: 1rem 0;
}

#fanupdate div.comment:first-of-type {
    border-top: none;
    padding-top: 0;
}

#fanupdate div.comment p {
    padding: 0;
}

#fanupdate div.comment p.commenter {
    color: var(--text);
    font-weight: 600;
    margin-bottom: .35rem;
    padding: 0;
}

#fanupdate div#newComment {}

#fanupdate img.gravatar {
    border-radius: 999px;
    float: right;
    margin: 0 0 1em 1em;
}

/* Shown in place of the comment list/form when an entry has comments
   turned off. */
#fanupdate p.comments-closed {
    color: var(--muted);
}

/* Comment validation/spam-guard error messages (e.g. blank comment,
   blacklisted word, failed CAPTCHA). */
#fanupdate p.error,
#fanupdate ul.error {
    color: #c0392b;
}

/*	====	Comment Form	====	*/

#fanupdate form#comments-form {
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

#fanupdate h3#postcomment {
    margin-top: 0;
}

#fanupdate p#cmt-rules,
#fanupdate p#cmt-moderation {
    color: var(--muted);
    font-size: .85rem;
}

/* Moderation notice in the built-in fallback comment form template (used
   only if the comment_form_template option is ever empty). */
#fanupdate p.hint {
    color: var(--muted);
    font-size: .8rem;
}

/* "Remember me" checkbox label. */
#fanupdate label.checkbox {
    color: var(--muted);
    display: inline;
    float: none;
    font-weight: 400;
    text-align: left;
    width: auto;
}

/* Comment form submit button. */
#fanupdate .submit,
#fanupdate form#comments-form input[type="submit"] {
    background: var(--accent);
    border: none;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    font-weight: 700;
    padding: .75rem 1.4rem;
    transition: .2s ease;
}

#fanupdate .submit:hover,
#fanupdate form#comments-form input[type="submit"]:hover {
    transform: translateY(-2px);
}

[data-theme="dark"] #fanupdate .submit,
[data-theme="dark"] #fanupdate form#comments-form input[type="submit"] {
    color: #1a111e;
}

#fanupdate #captcha-img {
    border-radius: 6px;
    display: block;
    margin-bottom: .5rem;
}

#fanupdate label {
    color: var(--muted);
    display: block;
    float: none;
    font-size: .85rem;
    font-weight: 600;
    margin: 0 0 .3rem;
    text-align: left;
    width: auto;
}

#fanupdate input,
#fanupdate textarea,
#fanupdate select,
#fanupdate option {
    font-family: inherit;
    font-size: 1em;
}

#fanupdate input[type="text"],
#fanupdate input[type="email"],
#fanupdate input[type="url"],
#fanupdate textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    margin-bottom: 1rem;
    padding: .6rem .75rem;
    width: 100%;
}

#fanupdate textarea {
    resize: vertical;
    width: 100%;
}

/*	====	Footer	====	*/

#fanupdate a.rss {
    color: var(--accent);
}

#fanupdate div.archivelink {
    margin: 2em 0 0 0;
    text-align: right;
}

#fanupdate div.archivelink p {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

/* Search box — overrides the generic full-width #fanupdate input[type="text"]
   rule (meant for the comment form) so this reads as a compact, obviously
   clickable search field instead of a stray full-width line wedged between
   the main/archive/feed links. */
#fanupdate div.archivelink input[type="text"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    margin: 0 0 0 .5rem;
    padding: .5rem 1rem;
    width: 11rem;
}

#fanupdate div.archivelink input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
}

#fanupdate div.archivelink input[type="text"]::placeholder {
    color: var(--muted);
}

#fanupdate div.archivelink input[type="submit"] {
    background: var(--accent);
    border: none;
    border-radius: 999px;
    color: white;
    cursor: pointer;
    font-weight: 700;
    padding: .5rem 1.1rem;
    transition: .2s ease;
}

#fanupdate div.archivelink input[type="submit"]:hover {
    transform: translateY(-2px);
}

[data-theme="dark"] #fanupdate div.archivelink input[type="submit"] {
    color: #1a111e;
}

#fanupdate div.credit {
    border-top: 1px solid var(--border);
    clear: both;
    color: var(--muted);
    font-size: .8rem;
    margin: 1em 0 0 0;
    padding-top: 1rem;
    text-align: center;
}

#fanupdate div.credit p {
    margin: 0;
}

/* ========================================
   FOOTER
======================================== */

footer {

    color: var(--muted);

    padding: 4rem 2rem;
    text-align: center;
}

footer p {
    font-size: .95rem;
}

/* ========================================
   PREVIEW GALLERY
======================================== */

.preview-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 1.5rem;
}

.preview-thumb {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: block;
    overflow: hidden;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.preview-thumb:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    transform: translateY(-3px);
}

.preview-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%;
}

.preview-thumb:hover img {
    transform: scale(1.04);
}

/* ========================================
   SCRIPT DESCRIPTION
======================================== */

.script-description {
    color: var(--muted);
    line-height: 1.8;
    max-width: 680px;
}

.script-description p + p {
    margin-top: 1rem;
}

.script-description ul,
.script-description ol {
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.script-description li + li {
    margin-top: .35rem;
}

.script-description strong {
    color: var(--text);
    font-weight: 600;
}

.script-description a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.script-description a:hover {
    opacity: .8;
}

.script-description code {
    background: var(--panel);
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: .9em;
    padding: .15em .4em;
}

/* ========================================
   88x31 BUTTON AREA
======================================== */

.buttons88 {

    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 2rem auto;
    max-width: 1100px;
    padding: 0 2rem;
}

.buttons88 img {
    height: 31px;

    image-rendering: pixelated;
    width: 88px;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 800px) {

    header {
        align-items: flex-start;
        flex-direction: column;
    }

    nav {
        gap: 1rem;
    }

    .hero {
        padding-top: 4rem;
    }

    .hero h1 {
        font-size: 3rem;
    }
}

@media (max-width: 500px) {

    nav {
        flex-direction: column;
        gap: .5rem;
    }

    .hero {
        padding: 3rem 1.25rem;
    }

    .featured,
    .updates {
        padding: 1.25rem;
    }
}