/* Press Start 2P — self-hosted woff2 subsets from Google Fonts v16 */
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/press-start-2p-latin-ext.woff2") format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

:root {
    --mc-font: "Press Start 2P", ui-monospace, monospace;

    --mc-bg: #1b1b1b;
    --mc-panel: #373737;
    --mc-panel-light: #545454;
    --mc-panel-dark: #1f1f1f;
    --mc-slot: #8b8b8b;
    --mc-slot-light: #c6c6c6;
    --mc-slot-dark: #373737;

    --mc-text: #ffffff;
    --mc-text-shadow: #3f3f3f;
    --mc-gold: #ffaa00;
    --mc-green: #55ff55;
    --mc-red: #ff5555;
    --mc-grey: #aaaaaa;

    /* Tool-tier palette (shared by .mc-shoplist__tool) */
    --mc-tier-diamond-bg: #4fd3d3;
    --mc-tier-diamond-fg: #002b2b;
    --mc-tier-diamond-hi: #9ff0f0;
    --mc-tier-diamond-lo: #1f6e6e;
    --mc-tier-hand-bg: #c6c6c6;
    --mc-tier-hand-fg: #000;
    --mc-tier-hand-hi: #fff;
    --mc-tier-hand-lo: #7a7a7a;
    --mc-tier-iron-bg: #dcdcdc;
    --mc-tier-iron-fg: #000;
    --mc-tier-iron-hi: #fff;
    --mc-tier-iron-lo: #7a7a7a;
    --mc-tier-netherite-bg: #3a2d2a;
    --mc-tier-netherite-fg: #e8d8b2;
    --mc-tier-netherite-hi: #6b4f48;
    --mc-tier-netherite-lo: #14100f;
    --mc-tier-stone-bg: #6b6b6b;
    --mc-tier-stone-fg: #fff;
    --mc-tier-stone-hi: #9a9a9a;
    --mc-tier-stone-lo: #3f3f3f;
    --mc-tier-wood-bg: #a06a3a;
    --mc-tier-wood-fg: #fff;
    --mc-tier-wood-hi: #c98e55;
    --mc-tier-wood-lo: #5a3a1f;

    font-family: var(--mc-font);
    font-size: 10px;
    color: var(--mc-text);
    line-height: 1.4;
    -webkit-font-smoothing: none;
    font-smooth: never;

    image-rendering: pixelated;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--mc-bg);
}

/* Accessible screen-reader-only text — visible to crawlers and assistive tech */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SKIP LINK --------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 1000;
    padding: 10px 16px;
    font-family: var(--mc-font);
    font-size: 10px;
    color: var(--mc-bg);
    background: var(--mc-gold);
    text-decoration: none;
}

.skip-link:focus {
    top: 8px;
}

/* FOCUS-VISIBLE ----------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--mc-gold);
    outline-offset: 2px;
}

/* Search input already has a gold border on focus — suppress the outline */
.mc-search__input:focus-visible {
    outline: none;
}

/* dirt-pattern background: repeating 2x2 pixel noise in brown/green tones */
.app {
    display: grid;
    /* minmax(0, 1fr) so the grid track can shrink below its children's
       intrinsic width — plain 1fr defaults to minmax(auto, 1fr), which
       blocks narrow viewports from shrinking the page. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    background-color: #2b2b2b;
    background-image:
        linear-gradient(45deg, #333 25%, transparent 25%),
        linear-gradient(-45deg, #333 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #333 75%),
        linear-gradient(-45deg, transparent 75%, #333 75%);
    background-size: 8px 8px;
    background-position:
        0 0,
        0 4px,
        4px -4px,
        -4px 0;
}

/* HEADER ------------------------------------------------------------------ */

.app__header {
    background: var(--mc-panel);
    border-bottom: 4px solid var(--mc-panel-dark);
    box-shadow: inset 0 4px 0 var(--mc-panel-light);
    padding: 16px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app__header-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app__header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.app__controls-row {
    display: flex;
    gap: 14px;
    align-items: center;
}

.app__title {
    margin: 0;
    font-size: 18px;
    color: var(--mc-gold);
    text-shadow: 2px 2px 0 var(--mc-text-shadow);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.app__logo {
    flex-shrink: 0;
    display: block;
}

/* BACK BUTTON ------------------------------------------------------------- */

.mc-back {
    flex-shrink: 0;
    height: 32px;
    padding: 0 10px;
    font-family: var(--mc-font);
    font-size: 10px;
    color: var(--mc-text);
    background: #6b6b6b;
    border: none;
    cursor: pointer;
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-light),
        inset -2px -2px 0 var(--mc-slot-dark);
}

.mc-back:hover {
    background: var(--mc-slot-light);
}

.mc-back:active {
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-dark),
        inset -2px -2px 0 var(--mc-slot-light);
}

/* COPY-LINK BUTTON -------------------------------------------------------- */
/* Shares the current page URL via the clipboard. Flashes gold on success,
   reverts after ~1.8s. Handler lives in public/interactive.js and uses
   document-level event delegation so HTMX swaps don't strand it. */

.mc-copy-link {
    flex-shrink: 0;
    height: 32px;
    padding: 0 10px;
    font-family: var(--mc-font);
    font-size: 10px;
    color: var(--mc-text);
    background: #6b6b6b;
    border: none;
    cursor: pointer;
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-light),
        inset -2px -2px 0 var(--mc-slot-dark);
    transition: color 120ms ease-out, background 120ms ease-out;
}

.mc-copy-link:hover {
    background: var(--mc-slot-light);
}

.mc-copy-link:active {
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-dark),
        inset -2px -2px 0 var(--mc-slot-light);
}

.mc-copy-link--copied {
    color: var(--mc-gold);
    background: var(--mc-slot-dark);
}

/* RECENT ITEMS ------------------------------------------------------------ */
/* Horizontal strip of recently viewed items below the header controls.
   Hydrated entirely client-side from localStorage by public/interactive.js.
   Hidden until the user has visited at least one other item. */

.mc-recent {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--mc-panel-dark);
    border-top: 1px solid var(--mc-slot-dark);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.mc-recent[hidden] {
    display: none;
}

.mc-recent__heading {
    flex-shrink: 0;
    font-size: 8px;
    color: var(--mc-gold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mc-recent__item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 9px;
    color: var(--mc-text);
    background: var(--mc-panel);
    border: 1px solid var(--mc-slot-dark);
    text-decoration: none;
    cursor: pointer;
}

.mc-recent__item:hover {
    background: var(--mc-slot-light);
}

.mc-recent__img {
    image-rendering: pixelated;
    flex-shrink: 0;
}

.mc-recent__name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-recent__clear {
    flex-shrink: 0;
    margin-left: auto;
    font-family: var(--mc-font);
    font-size: 8px;
    color: var(--mc-grey);
    background: transparent;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.mc-recent__clear:hover {
    color: var(--mc-gold);
}

/* SEARCH COMBOBOX --------------------------------------------------------- */

.mc-search {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.mc-search__label {
    font-size: 10px;
    color: var(--mc-text);
    text-shadow: 2px 2px 0 var(--mc-text-shadow);
    white-space: nowrap;
}

.mc-search__field {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.mc-search__input {
    width: 100%;
    padding: 8px 12px;
    font-family: var(--mc-font);
    font-size: 10px;
    color: var(--mc-text);
    background: var(--mc-panel-dark);
    border: 2px solid var(--mc-slot-dark);
    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 var(--mc-panel-light);
    outline: none;
}

.mc-search__input::placeholder {
    color: var(--mc-grey);
}

.mc-search__input:focus {
    border-color: var(--mc-gold);
}

.mc-search__results {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    background: var(--mc-panel);
    border: 2px solid var(--mc-slot-dark);
    box-shadow:
        inset 2px 2px 0 var(--mc-panel-light),
        4px 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.mc-search__results:empty {
    display: none;
}

.mc-search__group-header {
    padding: 6px 12px;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mc-gold);
    background: var(--mc-panel-dark);
}

.mc-search__item {
    display: block;
}

.mc-search__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    text-decoration: none;
    color: var(--mc-text);
    font-size: 9px;
}

.mc-search__link:hover,
.mc-search__link:focus {
    background: var(--mc-slot-dark);
    outline: none;
}

.mc-search__link--active {
    background: var(--mc-panel-light);
    color: var(--mc-gold);
    outline: none;
}

.mc-search__img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.mc-search__img-empty {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mc-search__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mc-search__name mark {
    background: none;
    color: var(--mc-gold);
}

/* ANIMATIONS -------------------------------------------------------------- */

@keyframes mc-fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HTMX LOADING INDICATOR -------------------------------------------------- */
/* Thin gold progress bar at the top of the viewport during any HTMX request.
   Uses :has() to react to the htmx-request class that HTMX puts on the
   initiating element. Semantically a <progress> element (indeterminate —
   no value attribute); aria-hidden because the aria-live status region
   at #a11y-status is the accessible feedback path. `appearance: none`
   strips the browser's default indeterminate animation so our custom
   sweep is the only animation running. */

.mc-progress {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: var(--mc-gold);
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 120ms ease-out;
}

/* Strip the inner-bar rendering in every engine — we animate the host
   element via scaleX, not the internal value bar. */
.mc-progress::-webkit-progress-bar {
    background: transparent;
}
.mc-progress::-webkit-progress-value {
    background: transparent;
}
.mc-progress::-moz-progress-bar {
    background: transparent;
}

body:has(.htmx-request) .mc-progress {
    opacity: 1;
    animation: mc-progress-sweep 900ms ease-in-out infinite;
}

@keyframes mc-progress-sweep {
    0% {
        transform: scaleX(0.05);
    }
    50% {
        transform: scaleX(0.75);
    }
    100% {
        transform: scaleX(0.98);
    }
}

/* The main content dim-on-swap uses HTMX's htmx-swapping class that lands
   on the target while the new content is morphing in. Search targets
   #search-results, not #main — its own list populating gives feedback. */
#main.htmx-swapping {
    opacity: 0.4;
    transition: opacity 80ms ease-out;
}

/* MAIN -------------------------------------------------------------------- */

.app__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: 1fr;
    min-height: 0;
    animation: mc-fade-slide-in 200ms ease-out;
}

/* Uses page overrides the two-column grid — it needs full width for tiles. */
.app__main--uses {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
    padding: 16px 20px;
}

.app__canvas {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    position: relative;
    touch-action: none;
}

.app__canvas > svg {
    flex: 1;
    min-height: 0;
}

/* LEAF NOTICE ------------------------------------------------------------- */
/* Visible block shown below the graph on leaf-only item pages (raw materials
   and 1.20+ items without overlay recipes). Kid-friendly explanation plus an
   optional umbrella-recipe link (e.g. Oak Planks → Planks). */

.mc-leaf-notice {
    background: var(--mc-panel-light);
    border: 2px solid var(--mc-panel-dark);
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-light),
        inset -2px -2px 0 var(--mc-panel-dark);
    margin: 12px 16px;
    padding: 12px 16px;
    color: var(--mc-text);
    font-size: 9px;
    line-height: 1.6;
}

.mc-leaf-notice__line {
    margin: 0;
}

.mc-leaf-notice__line + .mc-leaf-notice__line {
    margin-top: 6px;
}

.mc-leaf-notice__link {
    color: var(--mc-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mc-leaf-notice__link:hover {
    filter: brightness(1.15);
}

/* FAQ --------------------------------------------------------------------- */
/* Kid-friendly "Common Questions" block below the shopping list. Rendered
   inside .mc-shoplist. Collapsible via native <details> to stay out of the
   way when a kid already knows the recipe. */

.mc-faq {
    margin-top: 20px;
    border-top: 2px solid var(--mc-panel-dark);
    padding-top: 16px;
}

.mc-faq__details {
    display: block;
}

.mc-faq__summary {
    font-size: 11px;
    color: var(--mc-gold);
    text-shadow: 2px 2px 0 var(--mc-text-shadow);
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    margin-bottom: 10px;
}

.mc-faq__summary::marker {
    color: var(--mc-gold);
}

.mc-faq__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mc-faq__question {
    font-size: 9px;
    color: var(--mc-gold);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
}

.mc-faq__answer {
    font-size: 9px;
    color: var(--mc-text);
    line-height: 1.6;
    margin: 4px 0 0;
}

/* SVG NODE LINKS ---------------------------------------------------------- */

.mc-node-link {
    cursor: pointer;
}

.mc-node-link:hover rect:first-of-type {
    filter: brightness(1.15);
}

/* FOOTER ------------------------------------------------------------------ */

.app__footer {
    background: var(--mc-panel);
    border-top: 4px solid var(--mc-panel-dark);
    box-shadow: inset 0 4px 0 var(--mc-panel-light);
    padding: 10px 20px;
    font-size: 8px;
    color: var(--mc-grey);
}

.app__footer-link {
    color: var(--mc-gold);
    text-decoration: underline;
}

.app__footer-link:hover {
    color: var(--mc-text);
}

.app__footer q {
    color: var(--mc-gold);
    font-weight: bold;
}

.app__footer-help {
    margin: 0;
}

.app__footer-disclaimer {
    margin: 6px 0 0;
    font-size: 6px;
    opacity: 0.6;
}

/* PRIVACY PAGE ------------------------------------------------------------ */

.app__main--privacy {
    padding: 16px 20px;
}

.mc-privacy__heading {
    margin: 0 0 12px;
    font-size: 10px;
    color: var(--mc-gold);
}

.mc-privacy h3 {
    margin: 14px 0 6px;
    font-size: 8px;
    color: var(--mc-text);
}

.mc-privacy p {
    margin: 0 0 8px;
    color: var(--mc-grey);
    line-height: 1.8;
}

.mc-privacy__back {
    margin-top: 16px;
}

.mc-privacy__back a {
    color: var(--mc-gold);
    text-decoration: underline;
}

.app__title-link {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ERROR PAGE -------------------------------------------------------------- */

.app__main--error {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
}

.mc-error {
    text-align: center;
    padding: 40px 20px;
    max-width: 480px;
}

.mc-error__code {
    font-size: 64px;
    color: var(--mc-panel-dark);
    margin: 0 0 8px;
    line-height: 1;
}

.mc-error__heading {
    font-size: 16px;
    color: var(--mc-gold);
    margin: 0 0 16px;
}

.mc-error__text {
    font-size: 10px;
    color: var(--mc-grey);
    margin: 0 0 24px;
    line-height: 1.8;
}

.mc-error__home {
    display: inline-block;
    background: var(--mc-panel);
    border: 4px solid var(--mc-panel-dark);
    box-shadow: inset 0 4px 0 var(--mc-panel-light);
    color: var(--mc-text);
    padding: 8px 16px;
    font-size: 10px;
    text-decoration: none;
}

.mc-error__home:hover {
    background: var(--mc-panel-light);
}

/* AUDIO TOGGLE ------------------------------------------------------------ */

.mc-audio {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-panel-dark);
    border: 2px solid transparent;
    color: var(--mc-grey);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.mc-audio:hover {
    color: var(--mc-text);
    border-color: var(--mc-panel-light);
}

.mc-audio--playing {
    color: var(--mc-gold);
    border-color: var(--mc-gold);
}

.mc-audio--muted {
    color: var(--mc-grey);
    border-color: transparent;
}

/* LANGUAGE SWITCHER ------------------------------------------------------- */

.mc-lang {
    display: flex;
    gap: 6px;
    align-items: center;
}

.mc-lang__item {
    font-family: var(--mc-font);
    font-size: 8px;
    padding: 4px 8px;
    color: var(--mc-grey);
    text-decoration: none;
    background: var(--mc-panel-dark);
    border: 2px solid transparent;
}

.mc-lang__item:hover {
    color: var(--mc-text);
    border-color: var(--mc-panel-light);
}

.mc-lang__item--active {
    color: var(--mc-gold);
    border-color: var(--mc-gold);
    cursor: default;
}

/* Flag emoji is hidden on desktop — mobile swaps label→flag for density. */
.mc-lang__flag {
    display: none;
}

/* SHOPPING LIST PANEL ----------------------------------------------------- */

.mc-shoplist {
    background: var(--mc-panel);
    border-left: 4px solid var(--mc-panel-dark);
    box-shadow: inset 4px 0 0 var(--mc-panel-light);
    padding: 16px 18px 20px;
    overflow-y: auto;
    min-height: 0;
    min-width: 0;
}

.mc-shoplist__title {
    font-size: 12px;
    margin: 0 0 14px;
    color: var(--mc-gold);
    text-shadow: 2px 2px 0 var(--mc-text-shadow);
    letter-spacing: 0.5px;
}

.mc-shoplist__section {
    margin-bottom: 18px;
    padding: 10px 12px 12px;
    background: var(--mc-panel-dark);
    border: 2px solid var(--mc-panel-dark);
    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 var(--mc-panel-light);
}

.mc-shoplist__heading {
    font-size: 9px;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--mc-gold);
    letter-spacing: 0.5px;
}

.mc-shoplist__section--craft .mc-shoplist__heading {
    color: var(--mc-green);
}

.mc-shoplist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-shoplist__row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    line-height: 1.4;
}

/* Shopping-list checkbox — square pixel style matching the MC UI palette.
   Handler lives in public/interactive.js; state persisted in localStorage
   under minegraph:shoplist-checked keyed by root item. */
.mc-shoplist__check {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--mc-slot-dark);
    box-shadow: inset 1px 1px 0 var(--mc-slot-light);
    cursor: pointer;
    position: relative;
}

.mc-shoplist__check:checked {
    background: var(--mc-gold);
    border-color: var(--mc-panel-dark);
}

.mc-shoplist__check:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 3px;
    width: 3px;
    height: 6px;
    border-right: 2px solid #1f1f1f;
    border-bottom: 2px solid #1f1f1f;
    transform: rotate(45deg);
}

.mc-shoplist__check:focus-visible {
    outline: 2px solid var(--mc-gold);
    outline-offset: 2px;
}

.mc-shoplist__row--checked .mc-shoplist__count,
.mc-shoplist__row--checked .mc-shoplist__name {
    text-decoration: line-through;
    opacity: 0.55;
}

.mc-shoplist__row--checked .mc-shoplist__img,
.mc-shoplist__row--checked .mc-shoplist__tool {
    opacity: 0.55;
}

/* <label> inherits cursor: pointer for better tap ergonomics on mobile. */
label.mc-shoplist__name {
    cursor: pointer;
}

.mc-shoplist__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 1px 1px 0 rgba(0, 0, 0, 0.6),
        inset -1px -1px 0 rgba(255, 255, 255, 0.15);
}

.mc-shoplist__img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.mc-shoplist__count {
    color: var(--mc-gold);
    min-width: 28px;
    flex-shrink: 0;
}

.mc-shoplist__name {
    color: var(--mc-text);
}

.mc-shoplist__empty {
    font-size: 8px;
    color: var(--mc-grey);
    margin: 0;
    font-style: normal;
}

.mc-shoplist__tool {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 4px;
    font-size: 7px;
    text-transform: uppercase;
    color: #000;
    background: var(--mc-slot-light);
    box-shadow:
        inset 1px 1px 0 #fff,
        inset -1px -1px 0 var(--mc-slot-dark);
}

.mc-shoplist__tool-img {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
}

.mc-shoplist__tool-hand {
    font-size: 7px;
    letter-spacing: 0.3px;
}

.mc-shoplist__tool--diamond {
    background: var(--mc-tier-diamond-bg);
    color: var(--mc-tier-diamond-fg);
    box-shadow:
        inset 1px 1px 0 var(--mc-tier-diamond-hi),
        inset -1px -1px 0 var(--mc-tier-diamond-lo);
}

.mc-shoplist__tool--hand {
    background: var(--mc-tier-hand-bg);
    color: var(--mc-tier-hand-fg);
    box-shadow:
        inset 1px 1px 0 var(--mc-tier-hand-hi),
        inset -1px -1px 0 var(--mc-tier-hand-lo);
}

.mc-shoplist__tool--iron {
    background: var(--mc-tier-iron-bg);
    color: var(--mc-tier-iron-fg);
    box-shadow:
        inset 1px 1px 0 var(--mc-tier-iron-hi),
        inset -1px -1px 0 var(--mc-tier-iron-lo);
}

.mc-shoplist__tool--netherite {
    background: var(--mc-tier-netherite-bg);
    color: var(--mc-tier-netherite-fg);
    box-shadow:
        inset 1px 1px 0 var(--mc-tier-netherite-hi),
        inset -1px -1px 0 var(--mc-tier-netherite-lo);
}

.mc-shoplist__tool--stone {
    background: var(--mc-tier-stone-bg);
    color: var(--mc-tier-stone-fg);
    box-shadow:
        inset 1px 1px 0 var(--mc-tier-stone-hi),
        inset -1px -1px 0 var(--mc-tier-stone-lo);
}

.mc-shoplist__tool--wood {
    background: var(--mc-tier-wood-bg);
    color: var(--mc-tier-wood-fg);
    box-shadow:
        inset 1px 1px 0 var(--mc-tier-wood-hi),
        inset -1px -1px 0 var(--mc-tier-wood-lo);
}

.mc-shoplist__wiki {
    flex: 0 0 auto;
    margin-left: auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font);
    font-size: 8px;
    color: var(--mc-gold);
    background: var(--mc-panel-dark);
    text-decoration: none;
    box-shadow:
        inset 1px 1px 0 var(--mc-panel-light),
        inset -1px -1px 0 #000;
}

.mc-shoplist__wiki:hover {
    background: var(--mc-slot-dark);
    color: var(--mc-text);
}

/* When a tool badge is present, wiki link shouldn't also push left */
.mc-shoplist__tool + .mc-shoplist__wiki {
    margin-left: 4px;
}

/* Gather-row "uses" link: same shape and position class as wiki, gold arrow.
   Sits immediately before the wiki "?" button, with margin-left: auto pushing
   the pair to the right edge of the row. */
.mc-shoplist__uses {
    flex: 0 0 auto;
    margin-left: auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font);
    font-size: 8px;
    color: var(--mc-gold);
    background: var(--mc-panel-dark);
    text-decoration: none;
    box-shadow:
        inset 1px 1px 0 var(--mc-panel-light),
        inset -1px -1px 0 #000;
}

.mc-shoplist__uses:hover,
.mc-shoplist__uses:focus-visible {
    background: var(--mc-panel);
}

/* When the uses link is present, it consumes margin-left: auto — reset the
   subsequent wiki button so the two sit side by side instead of stacked. */
.mc-shoplist__uses + .mc-shoplist__wiki {
    margin-left: 4px;
}

/* CONTROLS (graph overlay + header qty) ----------------------------------- */

#header-qty {
    margin-left: auto;
    flex-shrink: 0;
}

.app__graph-controls {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.mc-fit-btn {
    height: 28px;
    padding: 0 10px;
    font-family: var(--mc-font);
    font-size: 8px;
    text-transform: uppercase;
    color: var(--mc-text);
    background: #6b6b6b;
    border: none;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-light),
        inset -2px -2px 0 var(--mc-slot-dark);
}

.mc-fit-btn:hover {
    background: var(--mc-slot-light);
}

.mc-fit-btn:active {
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-dark),
        inset -2px -2px 0 var(--mc-slot-light);
}

.mc-fit-btn--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

/* Resets <fieldset> chrome — we use it for the implicit grouping semantics,
   not its default border/padding. */
.mc-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

.mc-qty__label {
    /* <legend> has browser-special rendering as an anonymous block on top of
       its fieldset, which ignores `display: flex` on the parent and stretches
       the fieldset taller than the qty buttons — misaligning every sibling in
       the header row. `display: contents` removes the legend's own box so its
       text participates directly in the fieldset's flex layout. */
    display: contents;
    font-size: 10px;
    color: var(--mc-text);
    text-shadow: 2px 2px 0 var(--mc-text-shadow);
}

.mc-qty__btn {
    width: 32px;
    height: 28px;
    padding: 0;
    font-family: var(--mc-font);
    font-size: 9px;
    color: #1f1f1f;
    background: var(--mc-slot);
    border: none;
    cursor: pointer;
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-light),
        inset -2px -2px 0 var(--mc-slot-dark);
}

.mc-qty__btn:hover {
    background: var(--mc-slot-light);
}

.mc-qty__btn:active {
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-dark),
        inset -2px -2px 0 var(--mc-slot-light);
}

.mc-qty__btn--active {
    background: var(--mc-gold);
    color: #1f1f1f;
    box-shadow:
        inset 2px 2px 0 #ffcc44,
        inset -2px -2px 0 #aa7700;
}

.mc-toggle {
    padding: 6px 10px;
    font-family: var(--mc-font);
    font-size: 8px;
    color: #1f1f1f;
    background: var(--mc-slot);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-light),
        inset -2px -2px 0 var(--mc-slot-dark);
}

.mc-toggle:hover {
    background: var(--mc-slot-light);
}

.mc-toggle:active {
    box-shadow:
        inset 2px 2px 0 var(--mc-slot-dark),
        inset -2px -2px 0 var(--mc-slot-light);
}

.mc-toggle--active {
    background: #3a5a8b;
    color: var(--mc-text);
    box-shadow:
        inset 2px 2px 0 #5578bf,
        inset -2px -2px 0 #1d2d4a;
}

/* COLLAPSIBLE SHOPPING LIST (details/summary) ----------------------------- */

/* Desktop: always open, summary hidden — behaves like a plain container */
.mc-shoplist__details {
    display: contents;
}

.mc-shoplist__summary {
    display: none;
}

/* TABLET (768–1024px) ----------------------------------------------------- */

@media (max-width: 1024px) {
    .app__main {
        grid-template-columns: minmax(0, 1fr) 240px;
    }
}

/* MOBILE (<768px) --------------------------------------------------------- */

@media (max-width: 767px) {
    .app__main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }

    .app__canvas {
        min-height: 50vh;
    }

    /* Move graph controls to bottom-left so they don't overlay the tree's
       hero node at the top of the canvas. Wrap if the row gets crowded. */
    .app__graph-controls {
        top: auto;
        bottom: 8px;
        flex-wrap: wrap;
    }

    /* iOS has a native share sheet on long-press of the URL bar, so the
       Copy link button is redundant on mobile and just eats header space. */
    .mc-copy-link {
        display: none;
    }

    /* Placeholder already says "Pumpkin, Beacon, Torch…" — drop the label
       to recover a full row and let the search sit inline. */
    .mc-search__label {
        display: none;
    }

    /* Language switcher is flag-only on mobile — compact row of emoji flags
       instead of five language-name tabs. Tight padding lets the whole
       5-flag nav share the header's top row with the Minegraph title. */
    .mc-lang {
        gap: 4px;
    }

    .mc-lang__item {
        padding: 3px;
    }

    .mc-lang__flag {
        display: inline;
        font-size: 16px;
        line-height: 1;
    }

    .mc-lang__label {
        display: none;
    }

    /* "Show what uses this" is discovery-only — kids reach the same destinations
       by tapping nodes, so drop the toggle on mobile to reclaim canvas space. */
    .mc-toggle {
        display: none;
    }

    .mc-shoplist {
        border-left: none;
        border-top: 4px solid var(--mc-panel-dark);
        box-shadow: inset 0 4px 0 var(--mc-panel-light);
        max-height: 40vh;
    }

    /* On mobile: visually hide the h2 (keep in a11y tree), show summary as toggle */
    .mc-shoplist__title {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .mc-shoplist__details {
        display: block;
    }

    .mc-shoplist__summary {
        display: flex;
        align-items: center;
        cursor: pointer;
        list-style: none;
        user-select: none;
        font-size: 12px;
        color: var(--mc-gold);
        text-shadow: 2px 2px 0 var(--mc-text-shadow);
        letter-spacing: 0.5px;
    }

    /* Hide the default disclosure triangle */
    .mc-shoplist__summary::-webkit-details-marker {
        display: none;
    }

    /* Chevron indicator */
    .mc-shoplist__summary::after {
        content: "\25bc";
        font-size: 8px;
        color: var(--mc-grey);
        margin-left: auto;
        transition: transform 150ms ease;
    }

    .mc-shoplist__details[open] > .mc-shoplist__summary::after {
        transform: rotate(180deg);
    }

    /* When open, add spacing below the summary */
    .mc-shoplist__details[open] > .mc-shoplist__summary {
        margin-bottom: 14px;
    }

    /* Header: wrap controls row */
    .app__header {
        padding: 12px 14px 10px;
        gap: 10px;
    }

    .app__title {
        font-size: 14px;
    }

    /* Wrap the brand/audio/language row and the language nav itself so
       5 language tabs don't force the header beyond the viewport. */
    .app__header-top {
        flex-wrap: wrap;
    }

    .app__controls-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Search takes full width on its own row */
    .mc-search {
        order: 3;
        flex-basis: 100%;
    }

    .mc-search__field {
        max-width: none;
    }

    /* Qty picker wraps to full width, scrolls horizontally if needed */
    #header-qty {
        margin-left: 0;
        order: 2;
    }

    .mc-back {
        order: 1;
    }

    /* Tighter header buttons on mobile — 32px is above the WCAG AA 24px
       minimum and keeps the header compact enough for the flag nav to sit
       on the same row as the Minegraph title. All header buttons share the
       same text size so the row reads as a single consistent bar. */
    .mc-qty__btn {
        width: 32px;
        height: 32px;
        font-size: 8px;
    }

    .mc-back,
    .mc-fit-btn {
        height: 32px;
        padding: 0 8px;
        font-size: 8px;
    }

    .mc-audio {
        width: auto;
        height: auto;
        padding: 3px;
    }

    .mc-shoplist__wiki,
    .mc-shoplist__uses {
        width: 44px;
        height: 44px;
    }

    .mc-lang__item {
        padding: 10px 12px;
    }

    /* Footer: smaller padding */
    .app__footer {
        padding: 8px 14px;
    }
}

/* REDUCED MOTION ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* PRINT ------------------------------------------------------------------- */
/* When a kid hits print, deliver the recipe tree and shopping list without
   the chrome: drop the site header, footer, graph controls, skip-link, progress
   bar, recent items strip, and all interactive affordances (checkboxes, wiki
   ? buttons, uses arrows, toggles). Flow the page top-to-bottom on a white
   background so the shopping list is readable and doesn't drain the ink
   cartridge on the dark theme. A print-only title at the top of the body
   carries the item name so the printout has context.

   The SVG graph keeps its inline colours (legible + kid-friendly). Everything
   that uses the shared --mc-text / --mc-text-shadow custom properties flips
   to black/no-shadow at print scope, avoiding per-selector overrides for
   every FAQ / shopping-list / transformations descendant. */

.print-title {
    display: none;
}

@media print {
    :root {
        --mc-text: #000;
        --mc-text-shadow: transparent;
        --mc-grey: #444;
    }

    body {
        background: #fff;
        color: #000;
    }

    .app {
        height: auto;
        display: block;
        background: #fff;
        background-image: none;
    }

    .app__header,
    .app__footer,
    .app__graph-controls,
    .mc-progress,
    .skip-link,
    #recent-items,
    .mc-shoplist__check,
    .mc-shoplist__wiki,
    .mc-shoplist__uses,
    .mc-toggle,
    .mc-fit-btn {
        display: none !important;
    }

    /* Print-only title block rendered at the top of the body. Holds site
       brand ("Minegraph") and the item name, giving the printed page a
       readable context without the clickable header chrome. */
    .print-title {
        display: block;
        padding: 0 0 8px;
        margin: 0 0 12px;
        border-bottom: 2px solid #000;
    }

    .print-title__brand {
        font-size: 10px;
        color: #444;
        margin: 0;
    }

    .print-title__item {
        font-size: 14px;
        color: #000;
        margin: 4px 0 0;
    }

    /* Flow the main area top-to-bottom on one page-width column. */
    .app__main {
        display: block;
        grid-template-columns: none;
        height: auto;
        padding: 0;
    }

    .app__canvas {
        overflow: visible;
        min-height: 0;
        touch-action: auto;
        page-break-after: always;
    }

    .app__canvas > svg {
        max-width: 100%;
        height: auto;
    }

    /* Every flat-panel background across the shopping-list sidebar, FAQ, and
       transformations sections goes white. Single rule covers the parent and
       every dark-panel descendant — the --mc-text override handles contrast. */
    .mc-shoplist,
    .mc-shoplist__section,
    .mc-shoplist__details,
    .mc-faq,
    .mc-faq__details,
    .mc-transforms,
    .mc-transforms__row,
    .mc-transforms__item {
        background: #fff !important;
        box-shadow: none !important;
        border-color: #ccc !important;
    }

    .mc-shoplist {
        width: 100%;
        padding: 12px;
        border: 1px solid #000;
    }

    .mc-shoplist__details {
        display: block;
    }

    .mc-shoplist__summary {
        display: none;
    }

    .mc-shoplist__row,
    .mc-transforms__row,
    .mc-faq__question + .mc-faq__answer {
        page-break-inside: avoid;
    }

    /* Uses page layout (if the kid prints /uses/X). */
    .app__main--uses {
        padding: 0;
    }

    .mc-uses__header,
    .mc-uses__group,
    .mc-uses__tile-link {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .mc-uses__tile {
        page-break-inside: avoid;
    }
}

/* USES PAGE (reverse lookup) --------------------------------------------- */

.mc-uses {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.mc-uses__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--mc-panel-dark);
    border: 2px solid var(--mc-panel-dark);
    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 var(--mc-panel-light);
}

.mc-uses__root-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--mc-slot-dark);
    border: 2px solid var(--mc-panel);
    flex-shrink: 0;
}

.mc-uses__root-icon img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.mc-uses__heading-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mc-uses__heading {
    margin: 0;
    font-size: 12px;
    color: var(--mc-gold);
    text-shadow: 2px 2px 0 var(--mc-text-shadow);
}

.mc-uses__back-link {
    font-size: 8px;
    color: var(--mc-slot-light);
    text-decoration: none;
}

.mc-uses__back-link:hover,
.mc-uses__back-link:focus-visible {
    color: var(--mc-gold);
}

.mc-uses__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    background: var(--mc-panel-dark);
    border: 2px solid var(--mc-panel-dark);
    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 var(--mc-panel-light);
}

.mc-uses__group-heading {
    margin: 0;
    font-size: 10px;
    color: var(--mc-text);
}

.mc-uses__group-count {
    color: var(--mc-grey);
    font-size: 8px;
}

.mc-uses__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.mc-uses__tile {
    display: flex;
}

.mc-uses__tile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 6px;
    background: var(--mc-panel);
    border: 2px solid var(--mc-panel);
    box-shadow:
        inset 2px 2px 0 var(--mc-panel-light),
        inset -2px -2px 0 #000;
    text-decoration: none;
    color: var(--mc-text);
    text-align: center;
    cursor: pointer;
}

.mc-uses__tile-link:hover,
.mc-uses__tile-link:focus-visible {
    background: var(--mc-panel-light);
}

.mc-uses__tile-link:active {
    box-shadow:
        inset -2px -2px 0 var(--mc-panel-light),
        inset 2px 2px 0 #000;
}

.mc-uses__tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--mc-slot-dark);
    border: 2px solid var(--mc-slot-dark);
    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 var(--mc-panel);
}

.mc-uses__tile-icon img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.mc-uses__tile-name {
    font-size: 7px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}

.mc-uses__tile-yield {
    font-size: 7px;
    color: var(--mc-gold);
}

.mc-uses__empty {
    padding: 16px;
    font-size: 9px;
    color: var(--mc-grey);
    text-align: center;
}

/* TRANSFORMATIONS (world interactions) ------------------------------------ */
/* Shown below the shopping list on item pages ("Other ways to get this")
   and on the Uses page ("What this turns into"). Each row: from-item →
   action label → to-item, all clickable. */

.mc-transforms {
    margin-top: 12px;
    padding: 10px 12px 12px;
    background: var(--mc-panel-dark);
    border: 2px solid var(--mc-panel-dark);
    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 var(--mc-panel-light);
}

.mc-transforms__heading {
    margin: 0 0 8px;
    font-size: 9px;
    color: var(--mc-gold);
}

.mc-transforms__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-transforms__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px;
    background: var(--mc-panel);
    box-shadow:
        inset 1px 1px 0 var(--mc-panel-light),
        inset -1px -1px 0 #000;
}

.mc-transforms__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    text-decoration: none;
    color: var(--mc-text);
    background: var(--mc-slot-dark);
    box-shadow:
        inset 1px 1px 0 #000,
        inset -1px -1px 0 var(--mc-panel);
}

.mc-transforms__item:hover,
.mc-transforms__item:focus-visible {
    background: var(--mc-panel);
}

.mc-transforms__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.mc-transforms__item-icon img {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.mc-transforms__item-name {
    font-size: 7px;
    line-height: 1.3;
    word-break: break-word;
}

.mc-transforms__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.mc-transforms__arrow {
    color: var(--mc-gold);
    font-size: 10px;
}

.mc-transforms__action-label {
    font-size: 7px;
    color: var(--mc-slot-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile: stack from/to vertically on narrow viewports so the row doesn't
   wrap awkwardly around a single item. */
@media (max-width: 479px) {
    .mc-transforms__row {
        flex-direction: column;
        align-items: stretch;
    }

    .mc-transforms__action {
        justify-content: center;
    }

    .mc-transforms__action-label {
        white-space: normal;
    }
}

/* Uses page mobile overrides. Declared after the base .mc-uses__* rules so
   source-order cascade wins: the base uses auto-fill columns, mobile caps to
   a fixed column count for readability on narrow viewports. */
@media (max-width: 767px) {
    .app__main--uses {
        padding: 10px 12px;
    }

    .mc-uses {
        gap: 12px;
    }

    .mc-uses__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .mc-uses__heading {
        font-size: 10px;
    }

    .mc-uses__group {
        padding: 10px 10px 12px;
    }
}

@media (max-width: 479px) {
    .mc-uses__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mc-uses__header {
        gap: 10px;
        padding: 10px 12px;
    }

    .mc-uses__root-icon {
        width: 40px;
        height: 40px;
    }

    .mc-uses__root-icon img {
        width: 28px;
        height: 28px;
    }

    .mc-uses__tile-icon {
        width: 36px;
        height: 36px;
    }

    .mc-uses__tile-icon img {
        width: 28px;
        height: 28px;
    }
}