/* hrding sheep — toybox chrome (outline.md §8.1).
 *
 * The look is one rule repeated: thick rounded shapes, a hard offset shadow
 * instead of a blur, and a press that moves the element *down* into its own
 * shadow. Nothing here is a gradient or an image, so the chrome matches the
 * procedurally-drawn world without either side having to be tuned to art.
 */

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

/* `hidden` is how every panel here is toggled, and the attribute's default
   display:none loses to any display set in a rule — .intro is a grid, so
   without this it stays on screen forever. */
[hidden] { display: none !important; }

:root {
    --ink: #3b3546;
    --cream: #fffaf0;
    --lift: 4px;                       /* how far a toy button sits off the page */
    --pad: max(14px, env(safe-area-inset-top));
}

html, body {
    height: 100%;
    overflow: hidden;
    background: #5f9c46;
    font-family: Rubik, system-ui, -apple-system, sans-serif;
    color: var(--ink);
    /* The game reads raw pointer movement; browser panning and double-tap zoom
       would both steal it. */
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
}

#stage {
    position: fixed;
    inset: 0;
    display: block;
    /* The shepherd orb *is* the cursor — a system arrow on top of it reads as
       two cursors (§8.3). */
    cursor: none;
}

/* --- HUD ------------------------------------------------------------------ */

.hud {
    position: fixed;
    top: var(--pad);
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    pointer-events: none;              /* the field beneath stays herdable */
}

.chips, .tools { display: flex; gap: 8px; pointer-events: auto; }

/* Chips are the readout and may wrap onto a second row on a narrow phone; the
   tools are the controls and must not — a "?" that drops to its own line lands
   on top of the field the thumb is herding in. */
.chips { flex-wrap: wrap; }
.tools { flex-wrap: nowrap; flex-shrink: 0; }

.chip {
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 var(--lift) 0 var(--ink);
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.chip b { font-weight: 800; }
.chip .ph { margin-left: 2px; font-size: 16px; vertical-align: -2px; }
.chip-token { background: #fff3c9; }

.tool, .buy, .intro button, .reset-wrap button, .hat {
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 16px;
    box-shadow: 0 var(--lift) 0 var(--ink);
    cursor: pointer;
    transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease;
}

.tool { min-width: 46px; min-height: 44px; padding: 0 14px; }
.tool .ph { display: block; font-size: 20px; }
.tool[data-open="shop"] { background: #ffe08a; }
.tool[data-open="hats"] { background: #c9b6f2; }

.tool:hover, .buy:hover:not(:disabled), .hat:hover { background: #fff; }

/* Press = the toy sinks into its own shadow. */
.tool:active, .buy:active:not(:disabled), .hat:active, .intro button:active,
.reset-wrap button:active {
    transform: translateY(var(--lift));
    box-shadow: 0 0 0 var(--ink);
}

.tool[aria-expanded="true"] { background: var(--ink); color: var(--cream); }

/* --- panels ---------------------------------------------------------------- */

.sheet {
    position: fixed;
    top: calc(var(--pad) + 62px);
    right: 14px;
    width: min(370px, calc(100vw - 28px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: var(--cream);
    border: 3px solid var(--ink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--ink);
    padding: 16px;
    z-index: 5;
}

.sheet h2 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.sheet h2 small { font-size: 12px; font-weight: 600; opacity: 0.6; }

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 2px dashed rgba(59, 53, 70, 0.18);
}

.row-text { display: flex; flex-direction: column; gap: 2px; }
.row-text b { font-size: 15px; font-weight: 700; }
.row-text small { font-size: 12px; opacity: 0.65; }

.buy {
    background: #a8dc6d;
    padding: 10px 14px;
    min-width: 92px;
    min-height: 44px;
    white-space: nowrap;
}
.buy .ph { margin-left: 4px; font-size: 18px; vertical-align: -2px; }
.hat-tag .ph { margin-left: 2px; font-size: 13px; vertical-align: -1px; }

.buy:disabled {
    cursor: not-allowed;
    background: #e6e2d8;
    color: rgba(59, 53, 70, 0.45);
    box-shadow: 0 var(--lift) 0 rgba(59, 53, 70, 0.35);
    border-color: rgba(59, 53, 70, 0.35);
}

.note {
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.7;
    margin-top: 12px;
}

.help { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.help li { font-size: 13px; line-height: 1.5; }
.help b { font-weight: 700; }

/* --- hats ------------------------------------------------------------------ */

.hat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
}

.hat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px 10px;
    background: #f3eee2;
}

.hat-pic { width: 64px; height: 64px; }
.hat-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }
.hat-tag { font-size: 11px; font-weight: 600; opacity: 0.6; }

.hat.is-worn { background: #ffe08a; }
.hat.is-locked .hat-pic { opacity: 0.45; }

/* --- reset ----------------------------------------------------------------- */

.reset-wrap {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    flex-wrap: wrap;
}

.reset-wrap button { padding: 8px 12px; min-height: 40px; font-size: 13px; }
.danger { background: #ffb3b3; }

/* --- toast ------------------------------------------------------------------ */

.toast {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translate(-50%, 20px);
    background: var(--ink);
    color: var(--cream);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 6;
}

.toast.is-up { opacity: 1; transform: translate(-50%, 0); }

/* --- intro ------------------------------------------------------------------ */

.intro {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(30, 60, 25, 0.45);
    z-index: 10;
}

.intro-card {
    background: var(--cream);
    border: 4px solid var(--ink);
    border-radius: 26px;
    box-shadow: 0 8px 0 var(--ink);
    padding: 26px 24px;
    max-width: 380px;
    text-align: center;
}

.intro h1 { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; }
.tag { font-size: 14px; line-height: 1.55; margin-top: 10px; }
.tag.small { font-size: 12.5px; opacity: 0.7; }
.intro button { margin-top: 18px; padding: 12px 22px; font-size: 15px; background: #a8dc6d; }

/* --- small screens ----------------------------------------------------------
   Panels become a bottom sheet: thumbs live at the bottom, and a top-anchored
   panel on a phone covers exactly the part of the field being herded. */

@media (max-width: 560px) {
    .sheet {
        top: auto;
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        max-height: 62vh;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .hud { padding: 0 8px; gap: 6px; }
    .chip { font-size: 12.5px; padding: 5px 11px; }
    .tool { min-width: 42px; padding: 0 11px; }
    .toast { bottom: auto; top: calc(var(--pad) + 62px); transform: translate(-50%, -12px); }
    .toast.is-up { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tool, .buy, .hat, .toast { transition: none; }
}