/* Trash Guppies theme. Every colour on the site comes from these tokens, taken from the brand banner. */
:root {
    --sea-top: #35b4f2;
    --sea-mid: #1583d8;
    --sea-deep: #0a4f9f;
    --ray: rgba(255, 255, 255, 0.10);
    --bubble-edge: rgba(255, 255, 255, 0.85);
    --bubble-fill: rgba(190, 232, 255, 0.28);

    --ink: #0e2350;            /* the dark outline round everything */
    --ink-soft: #33466f;
    --white: #ffffff;

    --gold-1: #ffe14d;
    --gold-2: #f7a416;
    --gold-3: #e07b06;

    --wood-1: #bd7a36;
    --wood-2: #96571f;
    --wood-edge: #4d2b0d;
    --wood-grain: rgba(77, 43, 13, 0.28);

    --parch-1: #fff6d3;
    --parch-2: #f6dfa0;
    --parch-edge: #c98e42;

    --blue-1: #2f8fe6;
    --blue-2: #1557b6;

    --red: #e23a30;
    --red-dark: #a81f18;
    --weed-1: #38b24c;
    --weed-2: #1f7f36;
    --sand-1: #f7dc94;
    --sand-2: #e3b862;
    --rock: #8e8f96;

    --ok: #1f7f36;
    --shadow: rgba(8, 30, 74, 0.35);

    --font-toon: 'Lilita One', 'Baloo 2', system-ui, sans-serif;
    --font-body: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius: 18px;
    --outline: 3px solid var(--ink);
    --drop: 0 5px 0 var(--ink);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink);
    background:
        repeating-conic-gradient(from 150deg at 50% -20%, var(--ray) 0deg 4deg, transparent 4deg 11deg),
        linear-gradient(180deg, var(--sea-top) 0%, var(--sea-mid) 45%, var(--sea-deep) 100%);
    background-attachment: fixed;
}

main { flex: 1; position: relative; z-index: 1; }
a { color: var(--blue-2); }
img { max-width: 100%; height: auto; }

/* Cartoon lettering: dark outline underneath, gold gradient on top. */
.toon {
    position: relative;
    display: inline-block;
    margin: 0;
    font-family: var(--font-toon);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--ink);
    -webkit-text-stroke: 0.22em var(--ink);
    paint-order: stroke fill;
    filter: drop-shadow(0 0.09em 0 var(--ink));
}
.toon::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 0;
    background: linear-gradient(180deg, var(--gold-1) 20%, var(--gold-2) 62%, var(--gold-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.toon.on-wood::before { background: var(--white); -webkit-background-clip: text; background-clip: text; }

/* Chunky buttons */
.btn {
    display: inline-block;
    padding: 0.5em 1.2em;
    font: 400 1.1rem var(--font-toon);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    color: var(--ink);
    background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
    border: var(--outline);
    border-radius: 999px;
    box-shadow: var(--drop);
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-blue { color: var(--white); background: linear-gradient(180deg, var(--blue-1), var(--blue-2)); }
.btn-red { color: var(--white); background: linear-gradient(180deg, var(--red), var(--red-dark)); }
.btn-plain { background: var(--parch-1); }
.btn-small { font-size: 0.95rem; padding: 0.35em 0.9em; box-shadow: 0 3px 0 var(--ink); }

/* Parchment panel and wooden plank, the two surfaces on the banner */
.parchment {
    background: linear-gradient(180deg, var(--parch-1), var(--parch-2));
    border: var(--outline);
    border-radius: var(--radius);
    box-shadow: 0 0 0 3px var(--parch-edge) inset, var(--drop);
    padding: 1.2rem 1.3rem;
}
.plank {
    position: relative;
    text-align: center;
    padding: 0.9rem 2.2rem;
    background:
        repeating-linear-gradient(180deg, transparent 0 22px, var(--wood-grain) 22px 24px),
        linear-gradient(180deg, var(--wood-1), var(--wood-2));
    border: 4px solid var(--wood-edge);
    border-radius: 14px;
    box-shadow: var(--drop);
}
.plank::before, .plank::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--rock);
    border: 2px solid var(--wood-edge);
}
.plank::before { left: 10px; }
.plank::after { right: 10px; }

.ribbon {
    display: inline-block;
    margin: 0;
    padding: 0.35em 1.4em;
    font-family: var(--font-toon);
    color: var(--white);
    background: linear-gradient(180deg, var(--blue-1), var(--blue-2));
    border: var(--outline);
    border-radius: 999px;
    box-shadow: 0 0 0 3px var(--gold-2) inset, var(--drop);
}

/* Form controls. 16px or larger so phones do not zoom in. */
label { display: block; font-weight: 700; margin-bottom: 0.7rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number], input[type=url], select, textarea {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    padding: 0.55em 0.7em;
    font: 500 1rem var(--font-body);
    color: var(--ink);
    background: var(--white);
    border: 2px solid var(--ink);
    border-radius: 12px;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 0.5em; font-weight: 700; margin: 0; }
.check input { width: 1.2em; height: 1.2em; accent-color: var(--blue-2); }
.form-note { min-height: 1.4em; margin: 0 0 0.6rem; font-weight: 700; }
.form-note.bad { color: var(--red-dark); }
.form-note.good { color: var(--ok); }
.hp { position: absolute; left: -9999px; }

.flag {
    display: inline-block;
    padding: 0.15em 0.7em;
    font: 400 0.9rem var(--font-toon);
    color: var(--white);
    background: var(--red);
    border: 2px solid var(--ink);
    border-radius: 999px;
}
.flag-pending { background: var(--gold-3); }
.flag-draft { background: var(--ink-soft); }
.flag-available { background: var(--weed-2); }

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