/* Tiny Revenue Stream — indie-hacker entry-point. Game Boy DMG green palette,
   pixel chrome, blocky drop shadows. Persona 1 (indie devs who get the joke). */
/* Design review: Roone "Spritesmith" Dempsey. Brief: 1×1 dither across body, [A] button
   mapping labels, button press-tones, coin-spin on hero coins, jiggle-up on cards,
   scanlines but ONLY on hero text. */

:root[data-site="tinyrevenuestream"] {
    --trs-darkest: #0f380f;
    --trs-dark:    #306230;
    --trs-mid:     #8bac0f;
    --trs-light:   #9bbc0f;
    --trs-amber:   #e6cc00;
    --trs-amber-deep: #b89c00;
    --trs-pixel: "Press Start 2P", "VT323", ui-monospace, "Courier New", monospace;
    --trs-mono: ui-monospace, "JetBrains Mono", monospace;
}
html[data-site="tinyrevenuestream"], body { background: var(--trs-mid); color: var(--trs-darkest); }
body {
    font-family: var(--trs-mono); margin: 0; line-height: 1.55;
    -webkit-font-smoothing: none;
    image-rendering: pixelated;
    /* Spritesmith: 1×1 dither across the body. Game Boy LCD texture. */
    background-image:
        repeating-linear-gradient(0deg,
            rgba(15,56,15,.04) 0 1px,
            transparent 1px 2px),
        repeating-linear-gradient(90deg,
            rgba(15,56,15,.04) 0 1px,
            transparent 1px 2px);
    background-size: 2px 2px;
}

.trs-screen-frame {
    background: var(--trs-light);
    border: 4px solid var(--trs-darkest);
    box-shadow: inset 0 0 0 4px var(--trs-mid), 8px 8px 0 var(--trs-darkest);
    margin: 1.5rem;
}

.trs-container { max-width: 940px; margin: 0 auto; padding: 0 1.25rem; }

.trs-header { background: var(--trs-dark); color: var(--trs-light); padding: .85rem 0; border-bottom: 4px solid var(--trs-darkest); }
.trs-header .trs-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.trs-brand { font-family: var(--trs-pixel); font-size: .8rem; letter-spacing: .1em; color: var(--trs-light); text-decoration: none; }
.trs-nav a {
    font-family: var(--trs-pixel); font-size: .65rem; letter-spacing: .14em;
    color: var(--trs-light); text-decoration: none; margin-left: 1rem;
    transition: color .12s ease;
}
.trs-nav a:hover { color: var(--trs-amber); }
.trs-nav a:focus-visible { outline: 2px dashed var(--trs-amber); outline-offset: 4px; }

.trs-main { padding: 2.5rem 0 3rem; }

/* Spritesmith: scanlines on hero text only — half-screen retro effect. */
.trs-hero h1 {
    font-family: var(--trs-pixel); font-size: clamp(1.1rem, 2.6vw, 1.7rem);
    line-height: 1.5; letter-spacing: .03em; margin: 0 0 1.5rem;
    color: var(--trs-darkest); text-shadow: 3px 3px 0 var(--trs-mid);
    position: relative;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 3px,
        rgba(15,56,15,.18) 3px 4px
    );
    -webkit-background-clip: text; background-clip: text;
}
.trs-accent { color: var(--trs-amber); text-shadow: 3px 3px 0 var(--trs-darkest); }
.trs-lede { color: var(--trs-darkest); max-width: 60ch; }

/* Buttons — Spritesmith: [A] mapping label baked in via pseudo. */
.trs-btn {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .85rem 1.3rem; margin-top: 1.25rem;
    font-family: var(--trs-pixel); font-size: .75rem; letter-spacing: .08em;
    text-decoration: none; border: 3px solid var(--trs-darkest);
    background: var(--trs-amber); color: var(--trs-darkest);
    box-shadow: 5px 5px 0 var(--trs-darkest);
    transition: transform .08s ease, box-shadow .08s ease, background-color .08s ease;
}
.trs-btn::before {
    content: "[A]";
    color: var(--trs-darkest);
    background: var(--trs-light);
    padding: 1px 4px;
    border: 2px solid var(--trs-darkest);
    font-size: .6rem;
}
.trs-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 var(--trs-darkest);
    background: var(--trs-amber-deep);
}
.trs-btn:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--trs-darkest);
}
.trs-btn:focus-visible { outline: 2px dashed var(--trs-darkest); outline-offset: 5px; }

.trs-pix { padding: 2rem 0 1rem; }
.trs-pix-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: 0 1.25rem; max-width: 940px; margin: 0 auto;
}
.trs-pix article {
    background: var(--trs-light); padding: 1.25rem;
    border: 3px solid var(--trs-darkest);
    box-shadow: 5px 5px 0 var(--trs-darkest);
    transition: transform .12s ease, box-shadow .12s ease;
}
/* Spritesmith: 1 px jiggle-up on hover. */
.trs-pix article:hover {
    transform: translate(-1px, -1px);
    box-shadow: 6px 6px 0 var(--trs-darkest);
}

/* Spritesmith: coin-spin animation on the coin character. */
.trs-coin {
    font-family: var(--trs-pixel); font-size: 1.3rem;
    color: var(--trs-amber); text-shadow: 2px 2px 0 var(--trs-darkest);
    margin-bottom: .35rem; display: inline-block;
    animation: trs-coin 2.4s ease-in-out infinite;
}
@keyframes trs-coin {
    0%, 100% { transform: scaleX(1); }
    50%      { transform: scaleX(.2); }
}
@media (prefers-reduced-motion: reduce) { .trs-coin { animation: none; } }

.trs-pix h2 { font-family: var(--trs-pixel); font-size: .85rem; letter-spacing: .04em; margin: 0 0 .5rem; color: var(--trs-darkest); }
.trs-pix p { margin: 0; color: var(--trs-darkest); font-size: .92rem; }

::selection { background: var(--trs-amber); color: var(--trs-darkest); }

.trs-footer { background: var(--trs-dark); color: var(--trs-light); padding: 1.25rem 0; border-top: 4px solid var(--trs-darkest); margin-top: 2rem; }
.trs-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-family: var(--trs-pixel); font-size: .65rem; letter-spacing: .08em; }
.trs-footer-meta a, .trs-footer-meta .parent-wordmark { color: var(--trs-light); }
.trs-footer-meta a:hover, .trs-footer-meta .parent-wordmark:hover { color: var(--trs-amber); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--trs-amber); color: var(--trs-darkest);
    padding: .65rem 1rem;
    border: 3px solid var(--trs-darkest);
    box-shadow: 4px 4px 0 var(--trs-darkest);
    font-family: var(--trs-pixel); font-size: .65rem; letter-spacing: .08em;
    z-index: 1000;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}