/* ==========================================================================
   NOVERTIME SEASON 02 — BOUNTY BOARD
   Old-school Matrix / terminal / BBS green-on-black, deliberately simple.
   No halftone, no shadows, no rounded corners, no fancy anything.
   ========================================================================== */

:root {
    --term-green: #00ff41;
    --term-green-dim: #00aa22;
    --term-amber: #ffaa00;
    --bg: #000000;
    --fg: #cccccc;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--term-green);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    line-height: 1.45;
}

.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

h1 {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.25rem;
    color: var(--term-green);
}

.subtitle {
    color: var(--term-green-dim);
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* Tab navigation — classic bracket-style terminal tabs */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--term-green-dim);
    padding-bottom: 0;
}

.tab {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    background: transparent;
    color: var(--term-green-dim);
    border: 1px solid var(--term-green-dim);
    border-bottom: none;
    padding: 0.35rem 0.9rem;
    margin-right: 0.5rem;
    cursor: pointer;
    transition: none; /* deliberately no smooth transitions for retro feel */
    outline: none;
}

.tab.active {
    color: var(--term-green);
    background: #001100;
    border-color: var(--term-green);
    /* active "pops" with brighter text + subtle bg; looks selected */
}

.tab:hover:not(.active) {
    color: var(--term-green);
}

.tab:focus-visible {
    outline: 1px dotted var(--term-green);
}

.section {
    display: none;
    margin-bottom: 2.5rem;
}

.section.active {
    display: block;
}

h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--term-green);
    margin: 0 0 0.75rem;
    border-bottom: 1px solid var(--term-green-dim);
    padding-bottom: 0.25rem;
}

.bounty, .store-item, .ledger-row {
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--term-green-dim);
}

.bounty:last-child,
.store-item:last-child,
.ledger-row:last-child {
    border-bottom: none;
}

.reward {
    color: var(--term-amber);
    font-weight: 700;
}

.status-open { color: var(--term-green); }
.status-claimed { color: var(--term-amber); }
.status-expired { color: #666; text-decoration: line-through; }

/* Closed bounties dropdown (Claimed + Expired) */
.closed-bounties {
    margin-top: 1rem;
    border: 1px solid var(--term-green-dim);
}

.closed-bounties summary {
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    background: #001100;
    color: var(--term-green-dim);
    font-weight: 700;
    list-style: none;
}

.closed-bounties summary:hover {
    color: var(--term-green);
}

.closed-bounties[open] summary {
    border-bottom: 1px solid var(--term-green-dim);
}

.closed-bounties-content {
    padding: 0.5rem 0.6rem;
}

.closed-bounty {
    opacity: 0.75;
}

.ledger {
    font-size: 0.95rem;
}

.ledger-header {
    font-weight: 700;
    color: var(--term-green);
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--term-green-dim);
}

a {
    color: var(--term-amber);
    text-decoration: underline;
}

a:hover {
    color: #fff;
}

.footer-link {
    margin-top: 4rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

.empty {
    color: #666;
    font-style: italic;
}

/* Images embedded via bare URLs or ![markdown](url) in any text fields
   (Description/Required on Bounties tab, Description on Store tab).
   Standardized to match Store thumbnails: 80px square retro thumbnails that float left
   (text in that field flows to the right, like a side preview; put image first in the
   text field for best results). Click any to open the shared modal for full-size view.
   (Markdown links [text](url) are also supported in the same fields and
   render as normal <a> elements, styled amber+underline globally.) */
.content-thumbnail {
    float: left;
    width: 80px;
    height: 80px;
    border: 1px solid var(--term-green-dim);
    overflow: hidden;
    cursor: pointer;
    background: #001100;
    margin: 0 0.5rem 0.5rem 0;
    /* subtle retro pixel feel for screenshots/scans */
    image-rendering: crisp-edges;
    clear: left; /* stack multiple thumbnails vertically on the left if several in one field */
}

.content-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.content-thumbnail:hover {
    border-color: var(--term-green);
    opacity: 0.9;
}

/* Ensure the text containers clear floats properly for mixed image+text */
.bounty > div,
.store-item-main > div {
    overflow: hidden; /* contains floats from inline thumbnails */
}

/* Very subtle scanlines (optional retro flavor, easily removed) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        rgba(0, 255, 65, 0.03) 0px,
        rgba(0, 255, 65, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 9999;
}

/* Store item layout with optional right-aligned thumbnail */
.store-item {
    display: flex;
    gap: 1rem;
    align-items: stretch; /* makes the main column match the thumbnail height */
}

.store-item-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* allow text wrapping */
}

.store-price {
    margin-top: auto; /* pushes the price to the bottom of the store row */
}

.store-thumbnail {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border: 1px solid var(--term-green-dim);
    overflow: hidden;
    cursor: pointer;
    background: #001100;
}

.store-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.store-thumbnail:hover {
    border-color: var(--term-green);
    opacity: 0.9;
}

/* Bounty side thumbnail layout (when a main image is pulled from Description/Required).
   Mirrors .store-item so bounties with images look consistent with the Store tab. */
.bounty-item {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.bounty-item-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.bounty-thumbnail {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border: 1px solid var(--term-green-dim);
    overflow: hidden;
    cursor: pointer;
    background: #001100;
}

.bounty-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bounty-thumbnail:hover {
    border-color: var(--term-green);
    opacity: 0.9;
}

/* Simple image modal / lightbox for enlarged view */
.image-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.image-modal.open {
    display: flex;
}

.image-modal .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.image-modal .modal-content {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    z-index: 1;
}

.image-modal .modal-image {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    border: 2px solid var(--term-green);
    background: #000;
}

.image-modal .modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    background: #000;
    color: var(--term-green);
    border: 1px solid var(--term-green);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal .modal-close:hover {
    background: #001100;
    color: #fff;
}

/* Live countdown timer on open bounties */
.countdown {
    font-variant-numeric: tabular-nums;
    color: var(--term-amber);
}