/*
 * Anniversary-inspired visual layer for Tivia 7.7.
 * Only the reusable artwork and visual language are used; the ZnoteAAC
 * backend, templates and database are intentionally not included.
 */
:root {
    --anniversary-ink: #171617;
    --anniversary-panel: rgba(255, 252, 246, .94);
    --anniversary-border: #d7c8b2;
    --anniversary-gold: #bf8d38;
    --anniversary-gold-light: #efcb82;
}

body {
    background:
        radial-gradient(circle at 15% 12%, rgba(255, 255, 255, .38), transparent 28rem),
        #eee7da;
}

.hero {
    min-height: 610px;
    background:
        linear-gradient(90deg, rgba(8, 10, 12, .98) 0%, rgba(13, 16, 17, .92) 32%, rgba(17, 19, 18, .69) 63%, rgba(14, 15, 15, .72) 100%),
        url("/assets/oldbia-town.jpg") center 27% / cover no-repeat;
    box-shadow: inset 0 -120px 100px rgba(239, 233, 220, .42);
}

.hero:after {
    height: 170px;
    background: linear-gradient(transparent, #eee7da);
}

.topbar {
    max-width: 1220px;
    padding-top: 23px;
    padding-bottom: 21px;
    border-bottom: 1px solid rgba(239, 203, 130, .19);
}

.brand span {
    color: var(--anniversary-gold-light);
    text-shadow: 0 2px 22px rgba(240, 207, 129, .2);
}

.topbar nav a,
.auth a {
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.hero-copy {
    margin-top: 106px;
}

.hero-copy .eyebrow {
    text-shadow: 0 1px 8px #000;
}

.hero h1 {
    max-width: 720px;
    font-size: clamp(58px, 8vw, 92px);
    letter-spacing: -.05em;
    text-shadow: 0 5px 35px rgba(0, 0, 0, .8);
}

.hero-copy p {
    max-width: 560px;
    color: #ece5da;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}

.button {
    border-color: #b27d2b;
    box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 8px 20px rgba(0, 0, 0, .24);
}

main {
    max-width: 1160px;
}

.status-strip,
.news,
.card,
.form-card,
.download-panel,
.character,
.table-wrap,
.feature-card {
    border-color: var(--anniversary-border);
    background: var(--anniversary-panel);
    box-shadow: 0 12px 34px rgba(55, 39, 20, .1);
}

.status-strip {
    margin-bottom: 58px;
}

.status-strip strong {
    color: #9b6c28;
}

.news {
    border-left-color: var(--anniversary-gold);
}

.news-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
    gap: 24px;
    align-items: start;
}

.news-copy {
    min-width: 0;
}

.news-copy p {
    margin: 0;
}

.news-media {
    min-width: 0;
    max-width: 100%;
    max-height: 270px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--anniversary-border);
    background: rgba(235, 225, 208, .45);
}

.news-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 268px;
    object-fit: contain;
}

.admin-news {
    display: grid;
    gap: 18px;
    margin-top: 64px;
}

.admin-news-item {
    background: var(--anniversary-panel);
    border: 1px solid var(--anniversary-border);
    padding: 28px;
    box-shadow: 0 8px 25px rgba(50, 40, 25, .08);
}

.admin-image {
    max-width: 520px;
    max-height: 220px;
    object-fit: contain;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font: 12px/1.4 Arial, sans-serif;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.checkbox-label input {
    width: auto;
}

.admin-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.section-heading h2,
.card h3,
.news h3,
.hero h1 {
    color: var(--anniversary-ink);
}

.hero h1,
.hero-copy .eyebrow,
.hero-copy p {
    color: #fff;
}

.hero h1 em {
    color: var(--anniversary-gold-light);
}

.parchment {
    background:
        linear-gradient(145deg, rgba(255, 250, 240, .96), rgba(235, 220, 193, .93));
}

.table-wrap th {
    background: #20201f;
}

footer {
    border-top: 1px solid rgba(239, 203, 130, .16);
}

.house-intro {
    margin-bottom: 20px;
    background: rgba(255, 250, 240, .78);
}

.house-intro p:last-child { margin-bottom: 0; }

.house-filters {
    display: flex;
    align-items: end;
    gap: 14px;
    margin-bottom: 24px;
}

.house-filters label { flex: 1; }
.house-filters select { width: 100%; }

.house-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.house-card { min-width: 0; padding: 16px; }

.house-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.house-card h3 { margin: 3px 0 5px; font-size: 1.25rem; line-height: 1.15; }
.house-card p { color: var(--muted); margin: 6px 0; font-size: 13px; line-height: 1.35; }
.house-card > p:not(.house-bid):not(.house-countdown):not(.house-owner):not(.house-pending):not(.house-note) { min-height: 35px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.house-status {
    flex: 0 0 auto;
    border: 1px solid rgba(177, 126, 39, .3);
    border-radius: 999px;
    padding: 4px 8px;
    color: #8b5e1a;
    font: 11px/1 Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.house-status.occupied { color: #6e3030; border-color: rgba(110, 48, 48, .25); }
.house-status.pending { color: #5b4b2e; border-color: rgba(91, 75, 46, .25); }

.house-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 11px 0;
}

.house-meta div { border-top: 1px solid var(--line); padding-top: 6px; }
.house-meta dt { color: var(--muted); font: 10px/1.2 Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.house-meta dd { margin: 3px 0 0; font-size: 12px; font-weight: 600; }
.house-owner, .house-pending, .house-note { margin-bottom: 0; }
.house-bid { margin-bottom: 5px; }
.house-countdown { font: 12px/1.4 Arial, sans-serif; }
.house-countdown[data-house-end=""] { display: none; }
.house-bid-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; margin-top: 16px; }
.house-bid-form label { margin: 0; }
.house-bid-form .button { white-space: nowrap; }

@media (max-width: 850px) {
    .house-grid { grid-template-columns: 1fr; }
    .house-filters { align-items: stretch; flex-direction: column; }
    .house-bid-form { grid-template-columns: 1fr; }
}

@media (min-width: 851px) and (max-width: 1100px) {
    .house-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
    .hero {
        min-height: 560px;
        background-position: 64% 27%;
    }

    .hero-copy {
        margin-top: 84px;
    }

    .news-content {
        grid-template-columns: 1fr;
    }

    .news-media {
        max-height: 260px;
    }
}


/* Oldbia dark visual theme */
:root {
    --ink: #eee6d8;
    --muted: #b7ad9f;
    --line: #494238;
    --paper: #111516;
    --anniversary-ink: #eee6d8;
    --anniversary-panel: rgba(24, 29, 29, .96);
    --anniversary-border: #4a4339;
    --anniversary-gold: #c8953d;
    --anniversary-gold-light: #f0c66f;
}

body {
    background: #0f1314;
    color: var(--ink);
}

.hero {
    background:
        linear-gradient(90deg, rgba(7, 10, 11, .94) 0%, rgba(10, 14, 15, .78) 42%, rgba(8, 10, 11, .57) 100%),
        url("/assets/oldbia-town.jpg") center 35% / cover no-repeat;
    box-shadow: inset 0 -150px 120px rgba(15, 19, 20, .82);
}

.hero:after {
    background: linear-gradient(transparent, #0f1314);
}

.status-strip,
.news,
.card,
.form-card,
.download-panel,
.character,
.table-wrap,
.feature-card,
.admin-news-item {
    background: var(--anniversary-panel);
    border-color: var(--anniversary-border);
    color: var(--ink);
}

.status-strip > div { border-color: #3d3830; }
.status-strip span,
.house-card p,
.news p,
.card ol,
.character p { color: var(--muted); }
.section-heading h2,
.card h3,
.news h3,
.house-card h3 { color: var(--anniversary-ink); }
.table-wrap { background: #181d1e; }
th { background: #242a29; }
td { border-color: #39352f; color: #e6ddcf; }

input,
select,
textarea {
    background: #171c1d;
    border-color: #51483d;
    color: #eee6d8;
}

label { color: #ded5c8; }
.parchment,
.house-intro { background: linear-gradient(145deg, rgba(35, 35, 30, .98), rgba(25, 29, 29, .96)); }
.news-media { background: rgba(17, 21, 22, .8); border-color: var(--anniversary-border); }
.empty { color: var(--muted); }
.house-meta div { border-color: var(--line); }
.house-status { color: #e7b85e; border-color: rgba(231, 184, 94, .36); }
.house-status.occupied { color: #e89a91; border-color: rgba(232, 154, 145, .35); }
.house-status.pending { color: #d4bd8a; border-color: rgba(212, 189, 138, .35); }
.language-switcher span,
.language-switcher a { color: #ded5c8; }

@media (max-width: 850px) {
    .hero { background-position: 58% 35%; }
}

.highscore-filters{display:flex;align-items:end;gap:18px;margin:0 0 22px;padding:18px 22px}.highscore-filters label{flex:1;margin:0}.highscore-filters select{width:100%}@media(max-width:520px){.highscore-filters{align-items:stretch;flex-direction:column}}


.library-page { max-width: 1180px; margin: 0 auto; }
.library-intro { max-width: 760px; color: var(--muted); margin: -6px 0 22px; }
.library-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 20px; }
.library-tabs a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 15px; border: 1px solid var(--anniversary-border); color: var(--ink); background: rgba(24, 29, 29, .9); text-decoration: none; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; }
.library-tabs a:hover, .library-tabs a.active { background: var(--anniversary-gold); border-color: var(--anniversary-gold-light); color: #191512; }
.library-search { display: flex; align-items: end; gap: 16px; margin: 0 0 12px; padding: 18px 22px; }
.library-search label { flex: 1; margin: 0; }
.library-search input { width: 100%; }
.library-meta { color: var(--muted); font-size: .88rem; margin: 0 0 10px; }
.library-table { overflow-x: auto; }
.library-table table { min-width: 760px; }
.library-table th, .library-table td { vertical-align: top; }
.library-attributes { min-width: 300px; color: #d7cdbf; }
.library-table code, .library-note code { color: var(--anniversary-gold-light); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; }
.library-pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 18px 0; color: var(--muted); }
.library-pagination a { color: var(--anniversary-gold-light); text-decoration: none; }
.library-pagination a:hover { text-decoration: underline; }
.library-note { margin-top: 18px; color: var(--muted); font-size: .88rem; }
@media (max-width: 520px) {
    .library-search { align-items: stretch; flex-direction: column; }
    .library-search .button { width: 100%; }
}