/* ============================================================
   hinagiku.dev — a pixel-art garden in a developer's terminal
   Linen Cream ground + jewel-tone darks. Three faces, no serif.
   ============================================================ */

:root {
    --linen:     #f4ecd8;  /* page paper            */
    --inkstone:  #1a1f2e;  /* body text, outlines   */
    --amethyst:  #3a1c52;  /* iris, headings        */
    --malachite: #0e4d3f;  /* stems, stakes         */
    --garnet:    #a4133c;  /* accent flower, can    */
    --sapphire:  #1d3461;  /* secondary flower      */
    --citrine:   #c8a02e;  /* daisy centers, flares */
    --umber:     #7a4a2a;  /* soil                  */

    --col-w: min(640px, 92vw);

    /* ---- pixel-art sprite sheets (SVG data URIs, no AA) ---- */

    /* 8x8 daisy + ivy ribbon tile, 64px wide strip (2 logical tiles drawn @ 32px each so it loops cleanly) */
    --ribbon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' shape-rendering='crispEdges'%3E%3Crect width='64' height='32' fill='%230e4d3f'/%3E%3Cg fill='%23f4ecd8'%3E%3Crect x='12' y='4' width='8' height='8'/%3E%3Crect x='8' y='8' width='16' height='4'/%3E%3Crect x='12' y='12' width='8' height='8'/%3E%3Crect x='4' y='12' width='8' height='4'/%3E%3Crect x='20' y='12' width='8' height='4'/%3E%3C/g%3E%3Crect x='14' y='10' width='4' height='4' fill='%23c8a02e'/%3E%3Cg fill='%23c8a02e'%3E%3Crect x='40' y='6' width='12' height='4'/%3E%3Crect x='44' y='2' width='4' height='12'/%3E%3Crect x='38' y='14' width='8' height='10'/%3E%3Crect x='34' y='18' width='4' height='6'/%3E%3C/g%3E%3Crect x='40' y='16' width='4' height='6' fill='%230a3a30'/%3E%3C/svg%3E");

    /* 24px soil strip — alternating umber / burnt-sienna pixels + seedling glyphs */
    --soil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' shape-rendering='crispEdges'%3E%3Crect width='96' height='24' fill='%237a4a2a'/%3E%3Cg fill='%235e3920'%3E%3Crect x='0' y='0' width='8' height='8'/%3E%3Crect x='16' y='8' width='8' height='8'/%3E%3Crect x='32' y='0' width='8' height='8'/%3E%3Crect x='8' y='16' width='8' height='8'/%3E%3Crect x='48' y='8' width='8' height='8'/%3E%3Crect x='64' y='0' width='8' height='8'/%3E%3Crect x='80' y='16' width='8' height='8'/%3E%3Crect x='72' y='8' width='8' height='8'/%3E%3C/g%3E%3Cg fill='%238f5d36'%3E%3Crect x='24' y='0' width='8' height='8'/%3E%3Crect x='56' y='16' width='8' height='8'/%3E%3Crect x='88' y='0' width='8' height='8'/%3E%3C/g%3E%3Cg fill='%230e4d3f'%3E%3Crect x='12' y='0' width='3' height='10'/%3E%3Crect x='8' y='2' width='4' height='3'/%3E%3Crect x='15' y='4' width='4' height='3'/%3E%3Crect x='44' y='0' width='3' height='12'/%3E%3Crect x='40' y='3' width='4' height='3'/%3E%3Crect x='47' y='6' width='4' height='3'/%3E%3Crect x='76' y='0' width='3' height='9'/%3E%3Crect x='72' y='2' width='4' height='3'/%3E%3C/g%3E%3Cg fill='%23c8a02e'%3E%3Crect x='13' y='-2' width='1' height='3'/%3E%3Crect x='45' y='-2' width='1' height='3'/%3E%3C/g%3E%3C/svg%3E");

    /* 32x32 watering-can cursor sprite (garnet body, malachite handle, citrine spout drips) */
    --can: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'%3E%3Cg fill='%231a1f2e'%3E%3Crect x='8' y='12' width='14' height='2'/%3E%3Crect x='6' y='14' width='2' height='12'/%3E%3Crect x='22' y='14' width='2' height='12'/%3E%3Crect x='8' y='26' width='14' height='2'/%3E%3Crect x='4' y='18' width='2' height='2'/%3E%3Crect x='2' y='20' width='2' height='2'/%3E%3Crect x='0' y='22' width='2' height='2'/%3E%3Crect x='12' y='8' width='8' height='2'/%3E%3Crect x='12' y='10' width='2' height='2'/%3E%3Crect x='18' y='10' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23a4133c'%3E%3Crect x='8' y='14' width='14' height='12'/%3E%3Crect x='6' y='16' width='2' height='8'/%3E%3Crect x='22' y='16' width='2' height='8'/%3E%3Crect x='4' y='20' width='2' height='2'/%3E%3Crect x='2' y='22' width='4' height='2'/%3E%3C/g%3E%3Cg fill='%23c8516a'%3E%3Crect x='10' y='16' width='3' height='6'/%3E%3C/g%3E%3Cg fill='%230e4d3f'%3E%3Crect x='12' y='10' width='6' height='2'/%3E%3Crect x='13' y='9' width='4' height='1'/%3E%3C/g%3E%3Cg fill='%23c8a02e'%3E%3Crect x='1' y='25' width='2' height='2'/%3E%3Crect x='5' y='28' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");

    /* pressed-flower outline (margin marginalia) */
    --press: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='120' shape-rendering='crispEdges'%3E%3Cg fill='none' stroke='%231a1f2e' stroke-width='2'%3E%3Crect x='14' y='10' width='10' height='10'/%3E%3Crect x='4' y='20' width='10' height='10'/%3E%3Crect x='24' y='20' width='10' height='10'/%3E%3Crect x='14' y='30' width='10' height='10'/%3E%3Crect x='18' y='40' width='2' height='40'/%3E%3Crect x='10' y='52' width='12' height='2'/%3E%3Crect x='8' y='50' width='2' height='6'/%3E%3Crect x='20' y='66' width='12' height='2'/%3E%3Crect x='30' y='64' width='2' height='6'/%3E%3Crect x='14' y='86' width='8' height='8'/%3E%3Crect x='6' y='94' width='8' height='8'/%3E%3Crect x='22' y='94' width='8' height='8'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- base / paper ---------- */

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

html { background: var(--linen); }

body {
    background: var(--linen);
    color: var(--inkstone);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    cursor: var(--can) 4 28, auto;
}

img, .sprite, hr, .soil-top { image-rendering: pixelated; image-rendering: crisp-edges; }

em { font-style: normal; color: var(--garnet); font-weight: 500; }

/* ---------- pressed-flower marginalia ---------- */

.margin-press {
    position: fixed;
    top: 0;
    width: 40px;
    height: 100vh;
    background: var(--press) repeat-y center top;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.margin-press--left  { left:  max(8px, calc((100vw - var(--col-w)) / 2 - 56px)); }
.margin-press--right { right: max(8px, calc((100vw - var(--col-w)) / 2 - 56px)); transform: scaleX(-1); }

@media (max-width: 760px) { .margin-press { display: none; } }

/* ---------- drip counter (VT323 pixel accent) ---------- */

.drip-counter {
    position: fixed;
    top: 18px;
    right: 18px;
    font-family: "VT323", monospace;
    font-size: 1.05rem;
    color: var(--malachite);
    background: var(--linen);
    border: 2px solid var(--malachite);
    padding: 2px 10px 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 3px 3px 0 rgba(14, 77, 63, 0.25);
}
.drip-counter__can {
    width: 16px; height: 16px;
    background: var(--can) -0px -0px;
    background-size: 32px 32px;
    background-position: -2px -10px;
    display: inline-block;
}
@media (max-width: 600px) { .drip-counter { top: 8px; right: 8px; font-size: 0.95rem; } }

/* ============================================================
   THE GARDEN BED FRAME — animated daisy/ivy ribbon
   ============================================================ */

main#garden {
    position: relative;
    width: var(--col-w);
    margin: 96px auto;
    padding: 40px clamp(20px, 4vw, 44px) 8px;
    background: var(--linen);
    z-index: 1;
}

/* top + bottom horizontal ribbon edges */
main#garden::before,
main#garden::after {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    height: 16px;
    background: var(--ribbon);
    background-size: 32px 16px;
    image-rendering: pixelated;
    animation: ribbonMarch 2.4s linear infinite;
}
main#garden::before { top: -16px; }
main#garden::after  { bottom: -16px; transform: scaleY(-1); }

/* left + right vertical ribbon edges — same sprite rotated */
.row[data-row="0"]::after,
.row[data-row="4"]::after {
    /* sentinel — actual vertical bars are pseudo on #garden via extra divs below */
}

@keyframes ribbonMarch {
    from { background-position: 0 0; }
    to   { background-position: -32px 0; }
}

/* vertical sides — we draw them with two thin fixed-position-within-main pseudo layers */
main#garden { box-shadow:
    -16px 0 0 -8px transparent,
     16px 0 0 -8px transparent;
}
/* real vertical bars */
.vbar-left, .vbar-right { display: none; } /* placeholder */

/* Implement verticals as background on body of main using ::before of body-level wrappers is messy;
   instead use a dedicated wrapping technique: outline the vertical edges on the .row container.
   Simpler & robust: put vertical ribbons as repeating-linear children. */
main#garden > .row:first-child { margin-top: 0; }

/* vertical ribbon strips via a single extra absolutely-positioned layer each side */
main#garden::before { z-index: 3; }
main#garden::after  { z-index: 3; }

/* left / right bars */
main#garden { /* host */ }
.row { position: relative; }

/* We'll add vertical bars with a body-fixed-free approach: pseudo elements on a wrapper.
   Use the existing main and add :before on a <div class="vbar"> ? Not in HTML.
   Cleanest within constraints: use main's outline-less double box-shadow won't animate.
   Use repeating background on main's padding area: */
main#garden {
    background-image:
        var(--ribbon),               /* left bar  */
        var(--ribbon);               /* right bar */
    background-size: 16px 32px, 16px 32px;
    background-position: left top, right top;
    background-repeat: repeat-y, repeat-y;
    /* rotate trick for vertical: SVG already squarish; orient via background-size swap is fine for an 8x8-ish motif */
    animation: ribbonMarchV 2.4s linear infinite;
}
@keyframes ribbonMarchV {
    from { background-position: left 0px top 0px,  right 0px top 0px; }
    to   { background-position: left 0px top 32px, right 0px top 32px; }
}

/* keep the inner content above the side ribbons */
main#garden > * { position: relative; z-index: 2; }
main#garden::before, main#garden::after { z-index: 4; }

/* ============================================================
   GARDEN ROWS
   ============================================================ */

.row {
    padding: 18px 0 28px;
}

.soil-top {
    height: 24px;
    background: var(--soil) repeat-x left top;
    background-size: 96px 24px;
    margin: 4px -8px 22px;
    box-shadow: inset 0 2px 0 rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.12);
}
.soil-top--final { margin: 30px -8px 0; }

/* ---------- garden-marker stake headings ---------- */

.stake {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    letter-spacing: 0.02em;
    color: var(--amethyst);
    border-left: 4px solid var(--malachite);
    padding-left: 16px;
    margin: 6px 0 18px;
    position: relative;
    line-height: 1.2;
}
.stake .tag {
    display: inline-block;
    background: var(--linen);
    border: 2px solid var(--malachite);
    padding: 6px 14px 5px;
    position: relative;
    box-shadow: 2px 2px 0 rgba(14,77,63,0.2);
}
/* two pixel rivets on the enamel tag */
.stake .tag::before,
.stake .tag::after {
    content: "";
    position: absolute;
    width: 4px; height: 4px;
    background: var(--malachite);
    top: 50%; transform: translateY(-50%);
}
.stake .tag::before { left: 4px; }
.stake .tag::after  { right: 4px; }
.stake--left  .tag { transform: rotate(-1.5deg); }
.stake--right .tag { transform: rotate(1.5deg);  }

/* ---------- prose ---------- */

.prose {
    margin: 0 0 16px;
    max-width: 60ch;
    color: var(--inkstone);
}
.prose:last-of-type { margin-bottom: 6px; }
.pixel-line {
    font-family: "VT323", monospace;
    font-size: 1.15rem;
    color: var(--malachite);
    margin-top: 14px;
}

/* drop-cap pixel daisy */
.dropcap {
    float: left;
    width: 48px; height: 48px;
    margin: 4px 12px 0 0;
    position: relative;
    background:
        /* petals */
        radial-gradient(circle at 24px 8px,  var(--linen) 5px, transparent 6px),
        radial-gradient(circle at 40px 24px, var(--linen) 5px, transparent 6px),
        radial-gradient(circle at 24px 40px, var(--linen) 5px, transparent 6px),
        radial-gradient(circle at 8px 24px,  var(--linen) 5px, transparent 6px),
        radial-gradient(circle at 36px 12px, var(--linen) 4px, transparent 5px),
        radial-gradient(circle at 36px 36px, var(--linen) 4px, transparent 5px),
        radial-gradient(circle at 12px 36px, var(--linen) 4px, transparent 5px),
        radial-gradient(circle at 12px 12px, var(--linen) 4px, transparent 5px),
        radial-gradient(circle at 24px 24px, var(--citrine) 11px, transparent 12px);
    background-color: transparent;
    border: 2px solid var(--malachite);
    image-rendering: auto;
}
.dropcap::after {
    content: attr(data-letter);
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--malachite);
}
.dropcap-text { font-variant: small-caps; }

/* ============================================================
   PIXEL SPRITES — daisy / iris / larkspur / bud
   ============================================================ */

.flower-cluster {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(12px, 3vw, 28px);
    margin: 8px 0 22px;
    min-height: 64px;
    flex-wrap: wrap;
}
.cluster--top  { justify-content: flex-start; padding-left: 8px; }
.cluster--mid  { justify-content: center; }
.cluster--wide { justify-content: space-around; }

.sprite {
    image-rendering: pixelated;
    flex: 0 0 auto;
}

/* ---- DAISY: 32x32, rendered with hard-edged radial-gradient pixels.
   We fake the 7-frame sway by translating one pixel via JS-driven --sway. ---- */
.sprite.daisy {
    width: 36px; height: 56px;
    position: relative;
    transform: translateX(var(--sway, 0px));
    transition: transform 0.24s steps(2);
}
.sprite.daisy::before { /* stem */
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: 4px; height: 26px;
    transform: translateX(-50%);
    background: var(--malachite);
}
.sprite.daisy::after { /* leaf */
    content: "";
    position: absolute;
    left: 50%; bottom: 8px;
    width: 12px; height: 5px;
    background: var(--malachite);
    transform: translateX(2px);
}
/* flower head as a child-free background — petals + citrine center, crisp edges */
.sprite.daisy {
    background-image:
        radial-gradient(circle at 18px 4px,  #fff 5px, transparent 6px),
        radial-gradient(circle at 30px 12px, #fff 5px, transparent 6px),
        radial-gradient(circle at 30px 24px, #fff 5px, transparent 6px),
        radial-gradient(circle at 18px 30px, #fff 5px, transparent 6px),
        radial-gradient(circle at 6px 24px,  #fff 5px, transparent 6px),
        radial-gradient(circle at 6px 12px,  #fff 5px, transparent 6px),
        radial-gradient(circle at 12px 6px,  #fff 4px, transparent 5px),
        radial-gradient(circle at 24px 6px,  #fff 4px, transparent 5px),
        radial-gradient(circle at 18px 16px, var(--citrine) 8px, transparent 9px);
    background-repeat: no-repeat;
    background-position: 0 0;
}
/* outline ring behind the head */
.sprite.daisy { box-shadow: none; }

/* BUD — closed daisy: a small citrine-tipped malachite sheath */
.sprite.bud {
    width: 36px; height: 56px;
    position: relative;
    transform: translateX(var(--sway, 0px));
    transition: transform 0.24s steps(2);
}
.sprite.bud::before {
    content: "";
    position: absolute; left: 50%; bottom: 0;
    width: 4px; height: 34px; transform: translateX(-50%);
    background: var(--malachite);
}
.sprite.bud::after {
    content: "";
    position: absolute; left: 50%; bottom: 26px;
    width: 14px; height: 16px; transform: translateX(-50%);
    background:
        radial-gradient(circle at 7px 4px, var(--citrine) 3px, transparent 4px),
        var(--malachite);
    border-radius: 8px 8px 2px 2px;
}

/* IRIS — 48x32 head on a 3px malachite stem */
.sprite.iris {
    width: 48px; height: 60px;
    position: relative;
    transform: translateX(var(--sway, 0px));
    transition: transform 0.24s steps(2);
}
.sprite.iris::before { /* stem */
    content: "";
    position: absolute; left: 50%; bottom: 0;
    width: 3px; height: 30px; transform: translateX(-50%);
    background: var(--malachite);
}
.sprite.iris::after { /* falls + standards, blocky */
    content: "";
    position: absolute; left: 50%; bottom: 24px;
    width: 36px; height: 30px; transform: translateX(-50%);
    background:
        /* standards (upper) */
        linear-gradient(var(--iris-c) 0 0) 12px 0 / 12px 14px no-repeat,
        linear-gradient(var(--iris-c) 0 0) 2px 6px / 10px 12px no-repeat,
        linear-gradient(var(--iris-c) 0 0) 24px 6px / 10px 12px no-repeat,
        /* falls (lower, lighter) */
        linear-gradient(var(--iris-l) 0 0) 6px 16px / 24px 14px no-repeat,
        linear-gradient(var(--iris-l) 0 0) 0 22px / 8px 8px no-repeat,
        linear-gradient(var(--iris-l) 0 0) 28px 22px / 8px 8px no-repeat,
        /* citrine beard */
        linear-gradient(var(--citrine) 0 0) 16px 20px / 4px 8px no-repeat;
}
.iris--amethyst { --iris-c: #3a1c52; --iris-l: #5a3a72; }
.iris--sapphire { --iris-c: #1d3461; --iris-l: #3a5488; }
.iris--garnet   { --iris-c: #a4133c; --iris-l: #c6415f; }

/* LARKSPUR — vertical column of dots on a malachite stem */
.sprite.larkspur {
    width: 20px; height: 64px;
    position: relative;
    transform: translateX(var(--sway, 0px));
    transition: transform 0.24s steps(2);
}
.sprite.larkspur::before { /* stem */
    content: "";
    position: absolute; left: 50%; bottom: 0;
    width: 3px; height: 64px; transform: translateX(-50%);
    background: var(--malachite);
}
.sprite.larkspur::after { /* dots */
    content: "";
    position: absolute; left: 50%; top: 0; bottom: 8px;
    width: 16px; transform: translateX(-50%);
    background:
        linear-gradient(var(--lk) 0 0) 6px 2px  / 8px 8px no-repeat,
        linear-gradient(var(--lk) 0 0) 0 10px   / 8px 8px no-repeat,
        linear-gradient(var(--lk) 0 0) 9px 16px / 7px 7px no-repeat,
        linear-gradient(var(--lk) 0 0) 2px 24px / 8px 8px no-repeat,
        linear-gradient(var(--lk) 0 0) 8px 32px / 7px 7px no-repeat,
        linear-gradient(var(--lk) 0 0) 1px 40px / 7px 7px no-repeat,
        linear-gradient(var(--lk) 0 0) 7px 47px / 6px 6px no-repeat;
}
.larkspur--garnet   { --lk: #a4133c; }
.larkspur--sapphire { --lk: #1d3461; }

/* pressed sprites: drained, still */
.sprite.pressed { filter: saturate(0.35) brightness(1.12); opacity: 0.7; transition: none; }
.sprite.pressed::before, .sprite.pressed::after { filter: saturate(0.35); }

/* ============================================================
   LENS FLARES — soft citrine, screen-blended, drifting
   ============================================================ */

.flare {
    position: absolute;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,160,46,0.85) 0%, rgba(200,160,46,0.0) 60%);
    mix-blend-mode: screen;
    filter: blur(12px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 1;
    image-rendering: auto;
}
.flare--a { top: 40px;  left: -40px;  animation: flareDrift 18s ease-in-out infinite; }
.flare--b { top: 80px;  right: -60px; animation: flareDrift 18s ease-in-out infinite 4s; }
.flare--c { top: 30px;  left: 50%;    transform: translateX(-50%); animation: flareDrift 18s ease-in-out infinite 9s; }

@keyframes flareDrift {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(12px); }
    100% { transform: translateY(0); }
}
.flare--c { animation-name: flareDriftCentered; }
@keyframes flareDriftCentered {
    0%   { transform: translateX(-50%) translateY(0); }
    50%  { transform: translateX(-50%) translateY(12px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   WATER DROPLETS (spawned by JS near .flower-cluster)
   ============================================================ */

.droplet {
    position: fixed;
    width: 3px; height: 5px;
    background: var(--sapphire);
    box-shadow: 0 0 0 1px rgba(29,52,97,0.4);
    pointer-events: none;
    z-index: 9;
    image-rendering: pixelated;
    animation: dropFall 600ms steps(8) forwards;
}
@keyframes dropFall {
    0%   { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(24px); opacity: 0; }
}

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

@media (max-width: 700px) {
    main#garden { margin: 56px auto 40px; padding: 32px 18px 6px; }
    .flower-cluster { gap: 14px; }
}
@media (pointer: coarse) {
    body { cursor: auto; }
    .drip-counter { display: none; }
}