@font-face { font-family: "VS Lora"; src: url("fonts/Lora-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
    @font-face { font-family: "VS Lora"; src: url("fonts/Lora-Bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
    @font-face { font-family: "VS Lora"; src: url("fonts/Lora-Italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }
    @font-face { font-family: "VS Lora"; src: url("fonts/Lora-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700; font-display: swap; }
    :root {
      --ink: #211c16;
      --muted: #73685a;
      --paper: #f4efe4;
      --paper-2: #e9deca;
      --wood: #5a3823;
      --wood-dark: #2d1c13;
      --copper: #b96332;
      --green: #435b3a;
      --line: #cbbda5;
      --shadow: 0 18px 55px rgba(43, 29, 18, .16);
    }
    * { box-sizing: border-box; }
    html, body { cursor: url("imgs/cursors/normal.png") 3 2, default; }
    body {
      margin: 0;
      min-width: 1080px;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.7), transparent 26%),
        repeating-linear-gradient(90deg, rgba(89,55,31,.025) 0 1px, transparent 1px 6px),
        url("imgs/stone.png") center / 420px 420px fixed;
      font: 14px/1.45 "VS Lora", Georgia, serif;
    }
    button, input, select, textarea { font: inherit; color: inherit; }
    button, select, a, label, [draggable="true"] { cursor: url("imgs/cursors/linkselect.png") 7 2, pointer; }
    input, textarea { cursor: url("imgs/cursors/textselect.png") 15 16, text; }
    .text-right { text-align: right; }
    .full-width { width: 100%; }
    .field.flush-field { margin: 0; }
    .empty-list { padding: 25px; }
    .empty-list.large { padding: 30px; }
    .topbar {
      height: 74px;
      padding: 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #f8f0df;
      background:
        linear-gradient(rgba(28,17,11,.08), rgba(28,17,11,.32)),
        linear-gradient(rgba(50,27,13,.55), rgba(28,15,9,.72)),
        url("imgs/wood.png") center 44% / 620px auto;
      border-bottom: 4px solid #28180f;
      box-shadow: 0 5px 20px rgba(35,22,14,.25);
    }
    .brand { display: flex; align-items: center; gap: 14px; }
    .game-logo { width: 224px; height: auto; display: block; filter: drop-shadow(0 2px 1px rgba(0,0,0,.55)); }
    .brand-copy { padding-left: 13px; border-left: 1px solid rgba(230,205,162,.42); }
    .brand-mark {
      width: 43px; height: 43px; display: grid; place-items: center;
      color: #f6d6a1; background: #332017; border: 1px solid #b67c4b;
      transform: rotate(45deg); box-shadow: inset 0 0 0 4px #452b1d;
    }
    .brand-mark span { transform: rotate(-45deg); font-size: 22px; }
    h1 { margin: 0; font-size: 17px; letter-spacing: .07em; text-transform: uppercase; }
    .subtitle { margin-top: 2px; color: #d8c7aa; font: 12px/1.2 system-ui, sans-serif; }
    .actions { display: flex; gap: 9px; }
    .btn {
      border: 1px solid #a9977a; border-radius: 4px; padding: 9px 14px;
      background: #f6f0e4; box-shadow: 0 2px 0 rgba(34,22,14,.28);
      font: 700 12px/1 system-ui, sans-serif; letter-spacing: .02em;
    }
    .btn:hover { filter: brightness(1.04); transform: translateY(-1px); }
    .btn.primary { color: white; border-color: #7a391d; background: var(--copper); }
    .btn.dark { color: #f8f0df; border-color: #91704f; background: #38231a; }
    .btn.ghost { color: #eadcc4; border-color: #876c51; background: rgba(20,10,5,.18); }
    .btn.small { padding: 7px 10px; font-size: 11px; }
    .app {
      height: calc(100vh - 108px);
      display: grid;
      grid-template-columns: 290px minmax(440px, 1fr) 330px;
      grid-template-rows: 1fr 238px;
      gap: 14px;
      padding: 14px;
    }
    .panel {
      background: rgba(248,244,234,.94);
      border: 1px solid #aa987c;
      border-radius: 5px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel-head {
      min-height: 48px; padding: 11px 15px; display: flex; align-items: center;
      justify-content: space-between; background:
        linear-gradient(rgba(238,229,213,.91), rgba(222,209,188,.91)),
        url("imgs/oak.png") center / 48px 48px;
      border-bottom: 1px solid #b7a78d;
    }
    .panel-head h2 { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
    .count { color: var(--muted); font: 11px system-ui, sans-serif; }
    .library { grid-row: 1 / 3; display: flex; flex-direction: column; }
    .library-tools { padding: 12px; border-bottom: 1px solid var(--line); }
    .search, .field input, .field select, .field textarea {
      width: 100%; border: 1px solid #b9aa92; border-radius: 3px; padding: 9px 10px;
      background: #fffcf5; outline: none;
    }
    .search:focus, .field input:focus, .field select:focus, .field textarea:focus {
      border-color: var(--copper); box-shadow: 0 0 0 2px rgba(185,99,50,.14);
    }
    .filter-row {
      display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 9px;
      padding: 7px 8px; border: 1px solid #c4b59d; border-radius: 3px;
      background: linear-gradient(rgba(239,231,217,.9),rgba(226,215,196,.9)), url("imgs/oak.png") center / 42px 42px;
    }
    .filter-row label {
      color: #635645; font: 700 9px/1 "VS Lora", Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
    }
    .filter-row select {
      min-width: 0; width: 100%; padding: 5px 26px 5px 8px; border: 1px solid #a9987e;
      border-radius: 2px; background-color: #fffaf0; font: 11px/1.1 "VS Lora", Georgia, serif;
    }
    .filter-row .variant-toggle {
      grid-column: 1 / 3; display: flex; align-items: center; gap: 7px; padding-top: 2px;
      color: #675a49; font: 400 9px/1.2 "VS Lora", Georgia, serif; letter-spacing: 0; text-transform: none;
    }
    .variant-toggle input { margin: 0; accent-color: var(--copper); }
    .ingredient-list { overflow: auto; padding: 8px; flex: 1; }
    .ingredient-card {
      position: relative; display: grid; grid-template-columns: 38px 1fr auto;
      align-items: center; gap: 9px; padding: 9px; margin-bottom: 6px;
      border: 1px solid #c9bba3; border-radius: 4px; background: #fffaf0;
      cursor: url("imgs/cursors/move.png") 13 14, grab;
    }
    .ingredient-card:hover, .ingredient-card.selected { border-color: var(--copper); background: #fff4df; }
    .ingredient-card.selected { box-shadow: inset 3px 0 var(--copper); }
    .item-icon {
      position: relative;
      width: 38px; height: 38px; display: grid; place-items: center;
      border: 1px solid #aa9472; background:
        linear-gradient(135deg, rgba(255,255,255,.35), transparent),
        #d1bd95;
      color: #4b3827; font: 700 17px system-ui, sans-serif;
      box-shadow: inset 0 0 0 3px rgba(78,51,31,.08);
    }
    .item-icon img {
      position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
      object-fit: contain; image-rendering: pixelated; opacity: 0; transition: opacity .15s;
    }
    .item-icon.has-image img { opacity: 1; }
    .item-icon.has-image span { display: none; }
    .card-code { overflow: hidden; text-overflow: ellipsis; font: 700 12px/1.2 system-ui, sans-serif; white-space: nowrap; }
    .card-meta { margin-top: 3px; color: var(--muted); font: 10px system-ui, sans-serif; text-transform: uppercase; }
    .type-pill { padding: 3px 5px; border-radius: 2px; color: white; background: #6d5d49; font: 9px system-ui, sans-serif; }
    .library-foot { padding: 10px; border-top: 1px solid var(--line); background: #ece3d4; }
    .catalog-pager {
      display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 6px;
      margin-bottom: 8px;
    }
    .catalog-page-status { color: #645746; text-align: center; font: 700 9px/1.2 "VS Lora", Georgia, serif; }
    .catalog-page-status strong { display: block; margin-bottom: 3px; font-size: 9px; }
    .catalog-page-status label { font-size: 8px; white-space: nowrap; }
    .catalog-page-status input {
      width: 36px; height: 18px; padding: 1px 2px; border: 1px solid #ad9a7d;
      background: #fffaf0; text-align: center; font: 9px/1 system-ui, sans-serif;
    }
    .catalog-pager[hidden] { display: none; }
    .image-credit {
      display: block; margin-top: 8px; color: var(--muted); text-align: center;
      font: 9px system-ui, sans-serif; text-decoration: none;
    }
    .image-credit:hover { color: var(--copper); }
    .wiki-state { color: var(--green); font: 10px system-ui, sans-serif; cursor: pointer; }
    .wiki-state:hover { text-decoration: underline; }
    .wiki-state.loading { cursor: url("imgs/cursors/busy.png") 15 15, progress; }
    .workbench { display: flex; flex-direction: column; }
    .recipe-switcher { display: flex; align-items: center; gap: 8px; font: 11px system-ui, sans-serif; }
    .recipe-switcher select { max-width: 210px; padding: 5px; border: 1px solid #ad9a7d; background: #fffaf0; }
    .recipe-position {
      min-width: 38px; color: var(--muted); text-align: center; font: 700 10px system-ui, sans-serif;
    }
    .craft-area {
      position: relative; isolation: isolate; flex: 1; display: grid; place-items: center; padding: 20px;
      background:
        linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)),
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(86,61,38,.035) 28px),
        url("imgs/wood.png") center / 560px auto;
    }
    .craft-row {
      position: relative; z-index: 1; display: flex; align-items: center; gap: 34px; padding: 24px 38px;
      border: 1px solid rgba(79,53,35,.22); background: rgba(238,228,208,.74);
      box-shadow: 0 14px 45px rgba(47,30,18,.13); backdrop-filter: blur(1px);
    }
    .craft-row:after {
      content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; width: 42%; height: 100%;
      background: url("imgs/logos/tree.png") right bottom / contain no-repeat; opacity: .13; pointer-events: none;
    }
    .grid-wrap, .arrow, .output-box { position: relative; z-index: 1; }
    .grid-wrap { position: relative; }
    .grid {
      display: grid; grid-template-columns: repeat(3, 96px); grid-template-rows: repeat(3, 96px);
      gap: 7px; padding: 13px; border: 2px solid #6e5037;
      background: linear-gradient(rgba(73,45,27,.34),rgba(73,45,27,.34)), url("imgs/oak.png") center / 48px 48px;
      box-shadow: inset 0 0 0 5px #4f3525, 0 12px 25px rgba(53,34,22,.18);
    }
    .cell {
      position: relative; display: grid; place-items: center; border: 2px solid #9e8b6e;
      background: linear-gradient(rgba(216,203,180,.86),rgba(216,203,180,.86)), url("imgs/soil.png") center / 32px 32px;
      box-shadow: inset 3px 3px 7px rgba(53,36,23,.16);
    }
    .cell:hover, .cell.dragover { outline: 3px solid #d68a4d; outline-offset: -4px; }
    .cell.dragover {
      background: linear-gradient(rgba(216,203,180,.62),rgba(216,203,180,.62)), url("imgs/water.png") center / 32px 32px;
    }
    .cell.filled { background: #efe5d1; cursor: pointer; }
    .cell .item-icon { width: 58px; height: 58px; font-size: 24px; }
    .symbol {
      position: absolute; z-index: 4; left: -7px; top: -7px; width: 22px; height: 22px; display: grid;
      place-items: center; border: 2px solid #f0dec2; border-radius: 3px; color: white; background: var(--copper);
      box-shadow: 0 2px 4px rgba(48,29,17,.35); font: 800 11px/1 "VS Lora", Georgia, serif;
    }
    .qty {
      position: absolute; right: 5px; bottom: 4px; padding: 1px 5px;
      color: white; border-radius: 2px; background: rgba(34,28,22,.78);
      font: 700 11px system-ui, sans-serif;
    }
    .cell-code {
      position: absolute; max-width: 82px; left: 5px; right: 28px; bottom: 6px;
      overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap;
      font: 9px system-ui, sans-serif; transition: right .12s;
    }
    .cell-qty-stepper {
      position: absolute; z-index: 3; right: 4px; bottom: 4px; display: grid;
      grid-template-columns: 18px; width: 20px; height: 18px; overflow: hidden;
      border: 1px solid #7d674e; border-radius: 2px; background: #f7eddc;
      box-shadow: 0 1px 3px rgba(45,29,18,.24); transition: width .12s;
    }
    .cell:hover .cell-qty-stepper, .cell.selected .cell-qty-stepper, .cell-qty-stepper:focus-within { grid-template-columns: 16px 18px 16px; width: 52px; }
    .cell:hover .cell-code, .cell.selected .cell-code { right: 58px; }
    .cell-qty-stepper button {
      display: none; width: 16px; padding: 0; border: 0; color: #fff; background: #6c513b;
      font: 700 12px/16px system-ui, sans-serif;
    }
    .cell:hover .cell-qty-stepper button, .cell.selected .cell-qty-stepper button, .cell-qty-stepper:focus-within button { display: block; }
    .cell-qty-stepper button:hover { background: var(--copper); }
    .cell-qty-stepper span {
      display: grid; place-items: center; color: #3d3025; font: 700 9px/1 system-ui, sans-serif;
    }
    .arrow { color: #6c5038; font-size: 42px; }
    .output-box { width: 120px; text-align: center; }
    .output-slot {
      position: relative;
      width: 108px; height: 108px; margin: auto; display: grid; place-items: center;
      border: 3px double #7b5b3c; background: #f6eddc; box-shadow: inset 0 0 12px rgba(60,40,24,.14);
    }
    .output-slot .item-icon { width: 66px; height: 66px; font-size: 27px; }
    .output-code { margin-top: 9px; overflow-wrap: anywhere; font: 700 11px system-ui, sans-serif; }
    .hint {
      position: static; width: 314px; margin: 8px auto 0; color: var(--muted);
      text-align: center; font: 11px/1.35 "VS Lora", Georgia, serif;
    }
    .details { display: flex; flex-direction: column; }
    .form { padding: 14px; overflow: auto; }
    .field { margin-bottom: 12px; }
    .field label { display: block; margin-bottom: 5px; color: #625545; font: 700 10px system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
    .check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font: 12px system-ui, sans-serif; }
    .check input { accent-color: var(--copper); }
    .section-label { margin: 19px 0 10px; display: flex; align-items: center; gap: 8px; color: #3d3125; font: 700 11px system-ui, sans-serif; text-transform: uppercase; }
    .section-label:after { content: ""; height: 1px; flex: 1; background: var(--line); }
    .ingredient-editor {
      padding: 11px; border: 1px solid #c8b89e; background: #eee5d5; border-radius: 4px;
    }
    .live-note {
      display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 3px;
      color: var(--green); font: 700 9px/1.2 "VS Lora", Georgia, serif; letter-spacing: .04em;
      text-transform: uppercase;
    }
    .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #648158; box-shadow: 0 0 0 2px rgba(100,129,88,.15); }
    .empty-editor { color: var(--muted); text-align: center; font: italic 12px Georgia, serif; }
    .code-panel { grid-column: 2 / 4; display: flex; flex-direction: column; }
    .app.code-collapsed { grid-template-rows: 1fr 48px; }
    .code-panel.collapsed .code { display: none; }
    .code-panel.collapsed .tabs { flex: 1; align-items: center; }
    .code-panel.collapsed .tab { margin-top: 0; padding-top: 8px; padding-bottom: 8px; }
    .code-panel.collapsed .code-actions { padding-bottom: 0; }
    .tabs { display: flex; align-items: end; gap: 5px; padding: 0 14px; border-bottom: 1px solid #b7a78d; background: #e3d7c4; }
    .tab {
      margin-top: 8px; padding: 9px 13px; border: 1px solid transparent; border-bottom: 0;
      background: none; color: var(--muted); font: 700 11px system-ui, sans-serif;
    }
    .tab.active { color: var(--ink); border-color: #b7a78d; background: #27231f; color: #f4ead8; }
    .code-actions { margin-left: auto; display: flex; gap: 6px; padding-bottom: 6px; }
    .code {
      flex: 1; resize: none; border: 0; padding: 13px 16px; outline: none;
      color: #efe7d6; background: #27231f; font: 12px/1.45 Consolas, monospace;
    }
    dialog {
      width: min(760px, 90vw); padding: 0; border: 1px solid #80674c; border-radius: 6px;
      color: var(--ink); background: var(--paper); box-shadow: 0 30px 90px #1b120dcc;
    }
    dialog::backdrop { background: rgba(28,20,15,.68); backdrop-filter: blur(2px); }
    .modal-body { padding: 17px; }
    .modal-body textarea { width: 100%; height: 380px; resize: vertical; padding: 12px; border: 1px solid #ac9a7d; background: #fffdf8; font: 12px/1.45 Consolas, monospace; }
    .modal-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 17px; border-top: 1px solid var(--line); background: #e5dac7; }
    .drop-zone { color: var(--muted); font: 11px system-ui, sans-serif; }
    .collection-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
    .collection-list {
      height: min(470px, 55vh); overflow: auto; padding: 7px; border: 1px solid #b7a78d;
      border-radius: 4px; background: #e7ddcc;
    }
    .collection-item {
      display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center;
      padding: 9px; margin-bottom: 6px; border: 1px solid #c5b59b; border-radius: 4px; background: #fffaf0;
    }
    .collection-item.current { border-color: var(--copper); box-shadow: inset 4px 0 var(--copper); }
    .collection-number {
      width: 34px; height: 34px; display: grid; place-items: center; color: white;
      border-radius: 50%; background: #68503b; font: 700 11px system-ui, sans-serif;
    }
    .collection-name { overflow: hidden; text-overflow: ellipsis; font: 700 12px system-ui, sans-serif; white-space: nowrap; }
    .collection-meta { color: var(--muted); font: 10px system-ui, sans-serif; }
    .collection-buttons { display: flex; gap: 5px; }
    .toast {
      position: fixed; right: 20px; bottom: 20px; z-index: 20; padding: 11px 15px;
      color: white; background: #35422f; border-radius: 4px; box-shadow: 0 8px 30px #20160e55;
      font: 12px system-ui, sans-serif; opacity: 0; transform: translateY(10px); pointer-events: none;
      transition: .2s;
    }
    .toast.show { opacity: 1; transform: none; }
    .toast.error { background: #8a362c; }
    .site-footer {
      height: 34px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between;
      color: #dacdb7; border-top: 1px solid #25170f;
      background: linear-gradient(rgba(38,21,12,.78),rgba(24,14,9,.86)), url("imgs/wood.png") center 58% / 620px auto;
      font: 10px/1.2 "VS Lora", Georgia, serif; letter-spacing: .01em;
    }
    .site-footer a { color: #efe2c9; text-decoration: none; }
    .site-footer a:hover { color: #fff; text-decoration: underline; }
    .site-footer .heart { color: #d77b58; }
    @media (max-height: 760px) {
      .app { grid-template-rows: 1fr 190px; }
      .grid { grid-template-columns: repeat(3, 78px); grid-template-rows: repeat(3, 78px); }
      .cell .item-icon { width: 48px; height: 48px; }
    }