Алхимия

[html]
<style>

#alchemy-craft {
max-width: 1012px;
margin: 0 auto;
box-sizing: border-box;
}
#alchemy-craft * { box-sizing: border-box; }

#alchemy-craft .ac-intro {
padding: 0 calc(var(--base-spacing) * 2);
text-align: justify;
margin-bottom: calc(var(--base-spacing) * 1.5);
}
#alchemy-craft .ac-intro p { margin: 0 0 calc(var(--base-spacing) * 1) 0; }
#alchemy-craft .ac-intro p:last-child { margin-bottom: 0; }

#alchemy-craft .ac-auth-note {
margin: 0 calc(var(--base-spacing) * 2) calc(var(--base-spacing) * 1.5);
padding: calc(var(--base-spacing) * 1) calc(var(--base-spacing) * 1.5);
border-radius: 3px;
font-size: 10px;
font-style: italic;
text-align: center;
}

/* tabs */
#alchemy-craft .ac-tabs {
display: flex;
gap: calc(var(--base-spacing) * 0.75);
padding: 0 calc(var(--base-spacing) * 2);
margin-bottom: calc(var(--base-spacing) * 1.5);
flex-wrap: wrap;
}
#alchemy-craft .ac-tab {
flex: 1;
min-width: 140px;
font-family: var(--accent-font);
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
color: var(--codex-text-muted);
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
border-radius: 3px;
padding: calc(var(--base-spacing) * 1) calc(var(--base-spacing) * 0.5);
cursor: pointer;
transition: color .2s, border-color .2s;
}
#alchemy-craft .ac-tab:hover { color: var(--codex-text-primary); }
#alchemy-craft .ac-tab.is-active {
color: var(--codex-card-accent);
border-color: var(--codex-card-accent);
}

#alchemy-craft .ac-panel { padding: 0 calc(var(--base-spacing) * 2) calc(var(--base-spacing) * 2); }

/* ingredients grid */
#alchemy-craft .ac-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: calc(var(--base-spacing) * 1.25);
}
#alchemy-craft .ac-ing-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: calc(var(--base-spacing) * 0.5);
}
#alchemy-craft .ac-ing-icon {
position: relative;
width: 56px;
height: 56px;
border-radius: calc(var(--base-spacing) * 0.5);
border: 2px solid #8b8570;
background: var(--codex-card-img-bg) center / cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--accent-font);
font-size: 20px;
color: var(--codex-text-muted);
cursor: default;
}
#alchemy-craft .ac-ing-icon[data-rarity="uncommon"] { border-color: #4f8ea8; box-shadow: 0 0 6px rgba(79,142,168,.35); }
#alchemy-craft .ac-ing-icon[data-rarity="rare"] { border-color: #c9a227; box-shadow: 0 0 6px rgba(201,162,39,.4); }
#alchemy-craft .ac-ing-icon.is-locked { opacity: .55; border-style: dashed; }
#alchemy-craft .ac-ing-icon.is-depleted { filter: grayscale(1); opacity: .45; }
#alchemy-craft .ac-ing-count {
position: absolute;
bottom: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--codex-card-accent);
color: #fff;
font-family: var(--accent-font);
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
#alchemy-craft .ac-ing-name {
font-size: 10px;
line-height: 1.3;
color: var(--codex-text-primary);
}
#alchemy-craft .ac-ing-name.is-locked { color: var(--codex-text-muted); font-style: italic; }

/* recipe book */
#alchemy-craft .ac-tier-block { margin-bottom: calc(var(--base-spacing) * 2); }
#alchemy-craft .ac-tier-heading {
font-family: var(--accent-font);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
padding-bottom: calc(var(--base-spacing) * 0.5);
margin-bottom: calc(var(--base-spacing) * 1);
border-bottom: 1px solid var(--codex-card-border);
}
#alchemy-craft .ac-tier-heading[data-tier="легкое"] { color: #294b07; }
#alchemy-craft .ac-tier-heading[data-tier="среднее"] { color: #04405a; }
#alchemy-craft .ac-tier-heading[data-tier="сложное"] { color: #51030c; }

#alchemy-craft .ac-recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: calc(var(--base-spacing) * 1.25);
}
#alchemy-craft .ac-recipe-card {
display: flex;
gap: calc(var(--base-spacing) * 1.25);
padding: calc(var(--base-spacing) * 1.25);
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
border-radius: 3px;
}
#alchemy-craft .ac-recipe-card.is-locked { opacity: .7; }

#alchemy-craft .ac-potion-icon {
flex: 0 0 auto;
width: 44px;
height: 54px;
clip-path: polygon(35% 0, 65% 0, 65% 28%, 92% 88%, 8% 88%, 35% 28%);
border-radius: 0 0 4px 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--accent-font);
font-size: 16px;
color: rgba(255,255,255,.6);
}
#alchemy-craft .ac-potion-icon[data-tier="легкое"] { background: linear-gradient(180deg, rgba(107,143,71,.25), #6b8f47); }
#alchemy-craft .ac-potion-icon[data-tier="среднее"] { background: linear-gradient(180deg, rgba(79,142,168,.25), #4f8ea8); }
#alchemy-craft .ac-potion-icon[data-tier="сложное"] { background: linear-gradient(180deg, rgba(168,67,79,.25), #a8434f); }
#alchemy-craft .ac-potion-icon.is-locked { background: var(--codex-card-img-bg); filter: grayscale(1); }

#alchemy-craft .ac-recipe-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#alchemy-craft .ac-recipe-name {
font-family: var(--accent-font);
font-size: 12px;
font-weight: 600;
color: var(--codex-text-primary);
margin-bottom: calc(var(--base-spacing) * 0.4);
}
#alchemy-craft .ac-recipe-effect {
font-size: 10px;
color: var(--codex-card-accent);
font-weight: 600;
margin-bottom: calc(var(--base-spacing) * 0.4);
}
#alchemy-craft .ac-recipe-flavor {
font-size: 10px;
font-style: italic;
color: var(--codex-text-muted);
line-height: 1.5;
margin-bottom: calc(var(--base-spacing) * 0.6);
flex-grow: 1;
}
#alchemy-craft .ac-recipe-owned {
font-size: 10px;
color: var(--codex-text-muted);
margin-bottom: calc(var(--base-spacing) * 0.6);
}
#alchemy-craft .ac-recipe-ings {
display: flex;
gap: calc(var(--base-spacing) * 0.5);
flex-wrap: wrap;
}
#alchemy-craft .ac-recipe-ing-chip {
width: 26px;
height: 26px;
border-radius: 4px;
border: 1px solid #8b8570;
background: var(--codex-card-img-bg) center / cover no-repeat;
}
#alchemy-craft .ac-recipe-ing-chip[data-rarity="uncommon"] { border-color: #4f8ea8; }
#alchemy-craft .ac-recipe-ing-chip[data-rarity="rare"] { border-color: #c9a227; }
#alchemy-craft .ac-recipe-brew-btn {
margin-top: calc(var(--base-spacing) * 0.75);
font-family: var(--accent-font);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 9px;
font-weight: 600;
padding: calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 1);
border-radius: 3px;
cursor: pointer;
border: 1px solid var(--codex-card-accent);
background: var(--codex-card-accent);
color: #fff;
}
#alchemy-craft .ac-recipe-brew-btn:disabled {
opacity: .4;
cursor: not-allowed;
background: transparent;
color: var(--codex-text-muted);
}
#alchemy-craft .ac-recipe-slot-ghost {
width: 26px;
height: 26px;
border-radius: 4px;
border: 1px dashed var(--codex-card-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--codex-text-muted);
}
#alchemy-craft .ac-recipe-slot-ghost[data-rarity="common"] { border-color: #8b8570; }
#alchemy-craft .ac-recipe-slot-ghost[data-rarity="uncommon"] { border-color: #4f8ea8; color: #4f8ea8; }
#alchemy-craft .ac-recipe-slot-ghost[data-rarity="rare"] { border-color: #c9a227; color: #c9a227; }

/* craft tab */
#alchemy-craft .ac-craft-tiers {
display: flex;
gap: calc(var(--base-spacing) * 0.75);
margin-bottom: calc(var(--base-spacing) * 1.5);
}
.ac-crafting-container {
display: flex;
gap: 24px;
}
.ac-crafting-left {
flex-grow: 1;
}
#alchemy-craft .ac-tier-btn {
flex: 1;
font-family: var(--accent-font);
letter-spacing: 1px;
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
padding: calc(var(--base-spacing) * 0.75);
border-radius: 3px;
cursor: pointer;
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
color: var(--codex-text-muted);
}
#alchemy-craft .ac-tier-btn.is-active { color: #fff; }
#alchemy-craft .ac-tier-btn[data-tier="легкое"].is-active { background: #6b8f47; border-color: #6b8f47; }
#alchemy-craft .ac-tier-btn[data-tier="среднее"].is-active { background: #4f8ea8; border-color: #4f8ea8; }
#alchemy-craft .ac-tier-btn[data-tier="сложное"].is-active { background: #a8434f; border-color: #a8434f; }

#alchemy-craft .ac-blueprint {
display: flex;
justify-content: center;
gap: calc(var(--base-spacing) * 1.25);
padding: calc(var(--base-spacing) * 2);
background: var(--codex-card-img-bg);
border: 1px solid var(--codex-card-border);
border-radius: 3px;
margin-bottom: calc(var(--base-spacing) * 1.25);
flex-wrap: wrap;
}
#alchemy-craft .ac-slot {
width: 64px;
height: 64px;
border-radius: calc(var(--base-spacing) * 0.5);
border: 2px dashed var(--codex-card-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--codex-card-bg);
font-size: 22px;
color: var(--codex-text-muted);
}
#alchemy-craft .ac-slot.is-filled {
border-style: solid;
border-color: #8b8570;
background-size: cover;
background-position: center;
}
#alchemy-craft .ac-slot.is-filled[data-rarity="uncommon"] { border-color: #4f8ea8; }
#alchemy-craft .ac-slot.is-filled[data-rarity="rare"] { border-color: #c9a227; }
#alchemy-craft .ac-slot:not(.is-filled)[data-rarity="common"] { border-color: #8b8570; color: #8b8570; }
#alchemy-craft .ac-slot:not(.is-filled)[data-rarity="uncommon"] { border-color: #4f8ea8; color: #4f8ea8; }
#alchemy-craft .ac-slot:not(.is-filled)[data-rarity="rare"] { border-color: #c9a227; color: #c9a227; }
#alchemy-craft .ac-slot.is-match { outline: 2px solid #4f8e6a; outline-offset: 2px; }
#alchemy-craft .ac-slot.is-mismatch { outline: 2px solid #a8434f; outline-offset: 2px; opacity: .55; }

#alchemy-craft .ac-blueprint-legend {
display: flex;
justify-content: center;
gap: calc(var(--base-spacing) * 1.5);
margin-bottom: calc(var(--base-spacing) * 0.75);
font-size: 9px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--codex-text-muted);
}
#alchemy-craft .ac-blueprint-legend span { display: inline-flex; align-items: center; gap: 4px; }
#alchemy-craft .ac-blueprint-legend i {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
#alchemy-craft .ac-blueprint-legend i.common { background: #8b8570; }
#alchemy-craft .ac-blueprint-legend i.uncommon { background: #4f8ea8; }
#alchemy-craft .ac-blueprint-legend i.rare { background: #c9a227; }

#alchemy-craft .ac-known-recipes { margin-bottom: calc(var(--base-spacing) * 1.5); }
#alchemy-craft .ac-known-recipes-heading {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--codex-text-muted);
margin-bottom: calc(var(--base-spacing) * 0.6);
text-align: center;
}
#alchemy-craft .ac-known-recipes-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--base-spacing) * 0.6);
}
#alchemy-craft .ac-known-recipe-btn {
display: flex;
align-items: center;
gap: calc(var(--base-spacing) * 0.5);
padding: calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 1);
border-radius: 999px;
border: 1px solid var(--codex-card-accent);
background: var(--codex-card-bg);
color: var(--codex-text-primary);
font-size: 10px;
cursor: pointer;
}
#alchemy-craft .ac-known-recipe-btn:hover:not(:disabled) { background: var(--codex-card-accent); color: #fff; }
#alchemy-craft .ac-known-recipe-btn:disabled { opacity: .4; cursor: not-allowed; }
#alchemy-craft .ac-known-recipe-icon {
width: 14px;
height: 17px;
flex-shrink: 0;
clip-path: polygon(35% 0, 65% 0, 65% 28%, 92% 88%, 8% 88%, 35% 28%);
}
#alchemy-craft .ac-known-recipe-icon[data-tier="легкое"] { background: #6b8f47; }
#alchemy-craft .ac-known-recipe-icon[data-tier="среднее"] { background: #4f8ea8; }
#alchemy-craft .ac-known-recipe-icon[data-tier="сложное"] { background: #a8434f; }
#alchemy-craft .ac-known-recipe-icon.has-icon { clip-path: none; border-radius: 3px; background-color: transparent !important; }
#alchemy-craft .ac-known-recipe-icon.is-locked {
background: var(--codex-card-img-bg);
clip-path: none;
border: 1px dashed var(--codex-text-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
color: var(--codex-text-muted);
}
#alchemy-craft .ac-known-recipe-icon.is-locked::before { content: '?'; }
#alchemy-craft .ac-known-recipe-btn.is-locked { border-style: dashed; color: var(--codex-text-muted); }

#alchemy-craft .ac-craft-actions {
display: flex;
justify-content: center;
gap: calc(var(--base-spacing) * 1);
margin-bottom: calc(var(--base-spacing) * 1);
}
#alchemy-craft .ac-brew-btn, #alchemy-craft .ac-clear-btn {
font-family: var(--accent-font);
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 10px;
font-weight: 600;
padding: calc(var(--base-spacing) * 1) calc(var(--base-spacing) * 2);
border-radius: 3px;
cursor: pointer;
border: 1px solid var(--codex-card-accent);
background: var(--codex-card-accent);
color: #fff;
}
#alchemy-craft .ac-clear-btn { background: transparent; color: var(--codex-text-muted); border-color: var(--codex-card-border); }
#alchemy-craft .ac-brew-btn:disabled { opacity: .45; cursor: not-allowed; }

#alchemy-craft .ac-craft-msg {
text-align: center;
font-size: 11px;
min-height: 16px;
margin-bottom: calc(var(--base-spacing) * 1.5);
}
#alchemy-craft .ac-craft-msg.is-fail { color: #a8434f; }
#alchemy-craft .ac-craft-msg.is-success { color: #4f8e6a; }

/* cauldron */
#alchemy-craft .ac-cauldron-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: calc(var(--base-spacing) * 3) 0 calc(var(--base-spacing) * 0.75);
}
#alchemy-craft .ac-cauldron-credit {
margin-top: 2px;
font-size: 8px;
color: var(--codex-text-muted);
opacity: .6;
}
#alchemy-craft .ac-cauldron-credit a { color: inherit; }
#alchemy-craft .ac-cauldron {
position: relative;
width: 200px;
height: 200px;
}
#alchemy-craft .ac-cauldron svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5));
}
#alchemy-craft .ac-cauldron-liquid {
position: absolute;
top: 26px;
left: 29px;
width: 145px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: #6b8f47;
box-shadow: 0 0 16px #6b8f47;
opacity: 0;
transform: scaleY(.35);
transform-origin: center bottom;
transition: background .4s ease, box-shadow .4s ease, opacity .3s ease, transform .3s ease;
z-index: 2;
}
#alchemy-craft .ac-cauldron.is-brewing .ac-cauldron-liquid { opacity: 1; transform: scaleY(1); }
#alchemy-craft .ac-cauldron[data-tier="легкое"] .ac-cauldron-liquid { background: #6b8f47; box-shadow: 0 0 18px #6b8f47; }
#alchemy-craft .ac-cauldron[data-tier="среднее"] .ac-cauldron-liquid { background: #4f8ea8; box-shadow: 0 0 18px #4f8ea8; }
#alchemy-craft .ac-cauldron[data-tier="сложное"] .ac-cauldron-liquid { background: #a8434f; box-shadow: 0 0 18px #a8434f; }

#alchemy-craft .ac-bubble {
position: absolute;
bottom: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
animation: ac-bubble-rise 2.4s ease-in infinite;
animation-play-state: paused;
opacity: 0;
}
#alchemy-craft .ac-bubble:nth-child(1) { left: 6%; animation-delay: 0s; width: 5px; height: 5px; }
#alchemy-craft .ac-bubble:nth-child(2) { left: 20%; animation-delay: .7s; width: 7px; height: 7px; }
#alchemy-craft .ac-bubble:nth-child(3) { left: 33%; animation-delay: 1.4s; width: 4px; height: 4px; }
#alchemy-craft .ac-bubble:nth-child(4) { left: 46%; animation-delay: .3s; width: 6px; height: 6px; }
#alchemy-craft .ac-bubble:nth-child(5) { left: 58%; animation-delay: 1.9s; width: 5px; height: 5px; }
#alchemy-craft .ac-bubble:nth-child(6) { left: 70%; animation-delay: .9s; width: 4px; height: 4px; }
#alchemy-craft .ac-bubble:nth-child(7) { left: 82%; animation-delay: 1.6s; width: 6px; height: 6px; }
#alchemy-craft .ac-bubble:nth-child(8) { left: 92%; animation-delay: .5s; width: 5px; height: 5px; }
#alchemy-craft .ac-bubble:nth-child(9) { left: 14%; animation-delay: 2.1s; width: 4px; height: 4px; }
@keyframes ac-bubble-rise {
0% { transform: translateY(0) scale(.6); opacity: 0; }
20% { opacity: .85; }
100% { transform: translateY(-32px) scale(1.2); opacity: 0; }
}
#alchemy-craft .ac-cauldron.is-brewing .ac-bubble {
animation-duration: 1.1s;
animation-play-state: running;
}

#alchemy-craft .ac-cauldron-steam {
position: absolute;
top: -34px;
left: 50%;
width: 46px;
height: 46px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 70%);
filter: blur(5px);
opacity: 0;
animation: ac-steam-rise 3.4s ease-in-out infinite;
animation-play-state: paused;
pointer-events: none;
}
@keyframes ac-steam-rise {
0% { transform: translate(-50%, 0) scale(.8); opacity: .4; }
50% { opacity: .7; }
100% { transform: translate(-50%, -42px) scale(1.4); opacity: 0; }
}
#alchemy-craft .ac-cauldron.is-brewing .ac-cauldron-steam { animation-play-state: running; }

#alchemy-craft .ac-cauldron-glow {
position: absolute;
inset: -24px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .95), transparent 60%);
opacity: 0;
pointer-events: none;
}
#alchemy-craft .ac-cauldron.is-erupting .ac-cauldron-glow { animation: ac-cauldron-flash .7s ease; }
@keyframes ac-cauldron-flash {
0% { opacity: 0; transform: scale(.5); }
25% { opacity: 1; transform: scale(1.3); }
100% { opacity: 0; transform: scale(2); }
}

#alchemy-craft .ac-slot-picker {
position: fixed;
z-index: 2500;
display: none;
flex-direction: column;
gap: calc(var(--base-spacing) * 0.5);
max-width: min(460px, 92vw);
padding: calc(var(--base-spacing) * 0.75);
background: #16130f;
border: 2px solid #6b6237;
border-radius: calc(var(--base-spacing) * 0.5);
box-shadow: 0 calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 1.5) rgba(0, 0, 0, .5);
}
#alchemy-craft .ac-slot-picker.is-open { display: flex; }
#alchemy-craft .ac-slot-picker-title {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
color: #a9a899;
}
#alchemy-craft .ac-slot-picker-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: calc(var(--base-spacing) * 0.75);
padding-bottom: calc(var(--base-spacing) * 0.25);
}
#alchemy-craft .ac-slot-picker-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 0 0 auto;
width: 60px;
padding: 4px;
border-radius: 4px;
cursor: pointer;
}
#alchemy-craft .ac-slot-picker-item:hover { background: rgba(255, 255, 255, .08); }
#alchemy-craft .ac-slot-picker-item-icon {
position: relative;
width: 32px;
height: 32px;
border-radius: 4px;
border: 1px solid #8b8570;
background: rgba(0, 0, 0, .35) center / cover no-repeat;
}
#alchemy-craft .ac-slot-picker-item-icon[data-rarity="uncommon"] { border-color: #4f8ea8; }
#alchemy-craft .ac-slot-picker-item-icon[data-rarity="rare"] { border-color: #c9a227; }
#alchemy-craft .ac-slot-picker-item-count {
position: absolute;
bottom: -5px;
right: -5px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 999px;
background: var(--codex-card-accent);
color: #fff;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
#alchemy-craft .ac-slot-picker-item-name {
font-size: 9px;
line-height: 1.25;
color: #e9e4d4;
text-align: center;
}
#alchemy-craft .ac-inv-empty {
text-align: center;
font-size: 10px;
font-style: italic;
color: #1f1f1f;
padding: calc(var(--base-spacing) * 0.5);
grid-column-end: 3;
}

#alchemy-craft .ac-trade-side-summary .ac-inv-empty {
color: #9a9a9a;
}

/* toast */
#alchemy-craft { position: relative; }
#alchemy-craft .ac-toast {
position: absolute;
left: 50%;
top: calc(var(--base-spacing) * 1);
transform: translate(-50%, -8px);
z-index: 20;
width: max-content;
max-width: 260px;
padding: calc(var(--base-spacing) * 1.25) calc(var(--base-spacing) * 1.75);
background: #16130f;
border: 2px solid #c9a227;
border-radius: calc(var(--base-spacing) * 0.5);
color: #e9e4d4;
text-align: center;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
overflow: hidden;
}
#alchemy-craft .ac-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; box-shadow: 0 calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 1.5) rgba(0, 0, 0, .5); }
#alchemy-craft .ac-toast-close {
position: absolute;
top: 4px;
right: 6px;
width: 18px;
height: 18px;
border: none;
background: none;
color: #a9a899;
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
}
#alchemy-craft .ac-toast-close:hover { color: #e9e4d4; }
#alchemy-craft .ac-toast-icon {
width: 32px;
height: 40px;
margin: 0 auto 6px;
clip-path: polygon(35% 0, 65% 0, 65% 28%, 92% 88%, 8% 88%, 35% 28%);
border-radius: 0 0 3px 3px;
background-size: cover;
background-position: center;
}
#alchemy-craft .ac-toast-title { font-family: var(--accent-font); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; margin-bottom: 4px; color: #c9a227; padding-right: 14px; }
#alchemy-craft .ac-toast-effect { font-size: 10px; font-weight: 600; margin-bottom: 4px; }
#alchemy-craft .ac-toast-flavor { font-size: 10px; font-style: italic; opacity: .8; }
#alchemy-craft .ac-toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background: #c9a227;
transform-origin: left;
transition: transform linear;
}

/* tooltip */
#alchemy-craft .ac-tooltip {
position: fixed;
z-index: 3100;
width: max-content;
max-width: 240px;
background: #16130f;
border: 2px solid #6b6237;
border-radius: calc(var(--base-spacing) * 0.5);
padding: calc(var(--base-spacing) * 1) calc(var(--base-spacing) * 1.25);
color: #e9e4d4;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease;
pointer-events: none;
}
#alchemy-craft .ac-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#alchemy-craft .ac-tooltip[data-rarity="common"] { border-color: #8b8570; }
#alchemy-craft .ac-tooltip[data-rarity="uncommon"] { border-color: #4f8ea8; }
#alchemy-craft .ac-tooltip[data-rarity="rare"] { border-color: #c9a227; }
#alchemy-craft .ac-tooltip-name { font-family: var(--accent-font); text-transform: uppercase; font-size: 11px; margin-bottom: 4px; }
#alchemy-craft .ac-tooltip-meta { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-bottom: 6px; }
#alchemy-craft .ac-tooltip-desc { font-size: 10px; line-height: 1.4; }

/* trading tab */
#alchemy-craft .ac-trade-subnav {
display: flex;
gap: calc(var(--base-spacing) * 0.6);
margin-bottom: calc(var(--base-spacing) * 1.5);
flex-wrap: wrap;
}
#alchemy-craft .ac-trade-subtab {
flex: 1;
min-width: 120px;
position: relative;
font-family: var(--accent-font);
letter-spacing: 1px;
text-transform: uppercase;
font-size: 9px;
font-weight: 600;
color: var(--codex-text-muted);
background: transparent;
border: 1px solid var(--codex-card-border);
border-radius: 3px;
padding: calc(var(--base-spacing) * 0.75) calc(var(--base-spacing) * 0.5);
cursor: pointer;
}
#alchemy-craft .ac-trade-subtab.is-active { color: var(--codex-card-accent); border-color: var(--codex-card-accent); }
#alchemy-craft .ac-trade-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 15px;
height: 15px;
padding: 0 4px;
margin-left: 4px;
border-radius: 999px;
background: #a8434f;
color: #fff;
font-size: 9px;
}
#alchemy-craft .ac-trade-subpanel[hidden] { display: none; }

#alchemy-craft .ac-trade-direct { margin-bottom: calc(var(--base-spacing) * 3); }
#alchemy-craft .ac-trade-direct-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--codex-text-muted);
margin-bottom: calc(var(--base-spacing) * 0.6);
}
#alchemy-craft .ac-trade-direct-input-wrap { position: relative; }
#alchemy-craft .ac-trade-direct-input {
width: 100%;
padding: calc(var(--base-spacing) * 0.75);
padding-right: calc(var(--base-spacing) * 3);
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
border-radius: 3px;
color: var(--codex-text-primary);
font: inherit;
font-size: 11px;
}
#alchemy-craft .ac-trade-direct-input::placeholder { color: var(--codex-text-muted); opacity: 1; }
#alchemy-craft .ac-trade-direct-search-icon {
position: absolute;
right: calc(var(--base-spacing) * 0.9);
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
color: var(--codex-text-muted);
pointer-events: none;
}
#alchemy-craft .ac-trade-direct-search-icon svg { width: 100%; height: 100%; display: block; }
#alchemy-craft .ac-trade-direct-results { margin-top: calc(var(--base-spacing) * 0.75); }
#alchemy-craft .ac-trade-divider {
text-align: center;
font-size: 9px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--codex-text-muted);
margin-bottom: calc(var(--base-spacing) * 1.25);
padding-top: calc(var(--base-spacing) * 3);
border-top: 1px dashed #5c5757;
}

#alchemy-craft .ac-trade-lookup-cats,
#alchemy-craft .ac-trade-pick-cats {
display: flex;
gap: calc(var(--base-spacing) * 0.5);
margin-bottom: calc(var(--base-spacing) * 1);
}
#alchemy-craft .ac-trade-cat-btn,
#alchemy-craft .ac-trade-pick-cat-btn {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .5px;
color: #FFF;
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
border-radius: 999px;
padding: calc(var(--base-spacing) * 0.4) calc(var(--base-spacing) * 0.9);
cursor: pointer;
}
#alchemy-craft .ac-trade-cat-btn.is-active,
#alchemy-craft .ac-trade-pick-cat-btn.is-active { color: #fff; background: var(--codex-card-accent); border-color: var(--codex-card-accent); }

#alchemy-craft .ac-trade-lookup-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: calc(var(--base-spacing) * 1);
margin-bottom: calc(var(--base-spacing) * 1.5);
}
#alchemy-craft .ac-trade-item-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: calc(var(--base-spacing) * 0.4);
padding: calc(var(--base-spacing) * 0.5);
border-radius: 4px;
cursor: pointer;
border: 1px solid transparent;
}
#alchemy-craft .ac-trade-item-card:hover { background: rgba(255,255,255,.04); }
#alchemy-craft .ac-trade-item-card.is-selected { border-color: var(--codex-card-accent); }
#alchemy-craft .ac-trade-item-card .ac-ing-icon,
#alchemy-craft .ac-trade-item-card .ac-potion-icon { pointer-events: none; }
#alchemy-craft .ac-trade-item-card .ac-potion-icon {
width: 40px;
height: 50px;
font-size: 14px;
}
#alchemy-craft .ac-trade-item-name { font-size: 9px; line-height: 1.3; color: var(--codex-text-primary); }

#alchemy-craft .ac-trade-owners-list { display: flex; flex-direction: column; gap: calc(var(--base-spacing) * 0.75); }
#alchemy-craft .ac-trade-owner-row {
display: flex;
align-items: center;
gap: calc(var(--base-spacing) * 1);
padding: calc(var(--base-spacing) * 0.75) calc(var(--base-spacing) * 1);
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
border-radius: 3px;
}
#alchemy-craft .ac-trade-owner-name { flex: 1; font-size: 11px; color: var(--codex-text-primary); }
#alchemy-craft .ac-trade-owner-qty { font-size: 10px; color: var(--codex-text-muted); }

#alchemy-craft .ac-trade-offer-btn,
#alchemy-craft .ac-trade-action-btn {
font-family: var(--accent-font);
text-transform: uppercase;
letter-spacing: .75px;
font-size: 9px;
font-weight: 600;
padding: calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 1);
border-radius: 3px;
cursor: pointer;
border: 1px solid var(--codex-card-accent);
background: var(--codex-card-accent);
color: #fff;
}
#alchemy-craft .ac-trade-offer-btn:disabled,
#alchemy-craft .ac-trade-action-btn:disabled { opacity: .4; cursor: not-allowed; }
#alchemy-craft .ac-trade-action-btn { background: transparent; color: var(--codex-text-muted); border-color: var(--codex-card-border); }
#alchemy-craft .ac-trade-action-btn--accent { background: var(--codex-card-accent); color: #fff; border-color: var(--codex-card-accent); }
#alchemy-craft .ac-trade-action-btn--danger { color: #450d14; border-color: #450d14; background: #ff00000a; }

#alchemy-craft .ac-trade-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--base-spacing) * 1.25); }
#alchemy-craft .ac-trade-offer-card {
padding: calc(var(--base-spacing) * 1.25);
background: var(--codex-card-bg);
border: 2px solid var(--codex-card-border);
border-radius: 3px;
}
#alchemy-craft .ac-trade-offer-card.is-flagged { border-color: #450d14; }
#alchemy-craft .ac-trade-offer-card.is-accepted { border-color: #02451f; }
#alchemy-craft .ac-trade-offer-card.is-declined,
#alchemy-craft .ac-trade-offer-card.is-cancelled { opacity: .7; }
#alchemy-craft .ac-trade-offer-header {
display: flex;
align-items: center;
gap: calc(var(--base-spacing) * 0.75);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--codex-text-muted);
margin-bottom: calc(var(--base-spacing) * 0.75);
font-weight: 600;
}
#alchemy-craft .ac-trade-status-badge {
padding: 2px 6px;
border-radius: 999px;
font-size: 9px;
letter-spacing: .5px;
}
#alchemy-craft .ac-trade-status-badge--accepted { background: #02451f; color: #e7e7e7; }
#alchemy-craft .ac-trade-status-badge--declined,
#alchemy-craft .ac-trade-status-badge--cancelled { background: #450d14; color: #e7e7e7;; }
#alchemy-craft .ac-trade-offer-date { font-size: 9px; color: var(--codex-text-muted); }
#alchemy-craft .ac-trade-filter {
display: flex;
gap: calc(var(--base-spacing) * 0.5);
margin-bottom: calc(var(--base-spacing) * 1.25);
}
#alchemy-craft .ac-trade-filter-btn {
font-size: 9px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--codex-text-muted);
background: var(--codex-card-bg);
border: 1px solid var(--codex-card-border);
border-radius: 999px;
padding: calc(var(--base-spacing) * 0.4) calc(var(--base-spacing) * 0.9);
cursor: pointer;
}
#alchemy-craft .ac-trade-filter-btn.is-active { color: #fff; background: var(--codex-card-accent); border-color: var(--codex-card-accent); }
#alchemy-craft .ac-trade-offer-body {
display: flex;
align-items: flex-start;
gap: calc(var(--base-spacing) * 1);
margin-bottom: calc(var(--base-spacing) * 0.75);
}
#alchemy-craft .ac-trade-offer-side { flex: 1; min-width: 0; }
#alchemy-craft .ac-trade-offer-side-label { font-size: 9px; color: var(--codex-text-muted); margin-bottom: calc(var(--base-spacing) * 0.4); }
#alchemy-craft .ac-trade-offer-arrow { font-size: 14px; color: var(--codex-text-muted); padding-top: calc(var(--base-spacing) * 1.25); }
#alchemy-craft .ac-trade-offer-flag {
font-size: 10px;
color: #a8434f;
margin-bottom: calc(var(--base-spacing) * 0.75);
}
#alchemy-craft .ac-trade-offer-actions { display: flex; gap: calc(var(--base-spacing) * 0.6); flex-direction: column; margin-top: calc(2 * var(--base-spacing));}

#alchemy-craft .ac-trade-chips { display: flex; flex-wrap: wrap; gap: calc(var(--base-spacing) * 0.5); }
#alchemy-craft .ac-trade-chip {
position: relative;
width: 30px;
height: 30px;
border-radius: 4px;
border: 1px solid #8b8570;
background: var(--codex-card-img-bg) center / cover no-repeat;
}
#alchemy-craft .ac-trade-chip[data-rarity="uncommon"] { border-color: #4f8ea8; }
#alchemy-craft .ac-trade-chip[data-rarity="rare"] { border-color: #c9a227; }
#alchemy-craft .ac-trade-chip--potion { border-radius: 0 0 6px 6px; clip-path: polygon(35% 0, 65% 0, 65% 28%, 92% 88%, 8% 88%, 35% 28%); }
#alchemy-craft .ac-trade-chip--recipe {
display: flex;
align-items: center;
justify-content: center;
background: var(--codex-card-img-bg);
color: var(--codex-card-accent);
font-size: 13px;
}
#alchemy-craft .ac-trade-chip-qty {
position: absolute;
bottom: -5px;
right: -5px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 999px;
background: var(--codex-card-accent);
color: #fff;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
#alchemy-craft .ac-trade-chip-remove {
position: absolute;
top: -6px;
right: -6px;
width: 15px;
height: 15px;
padding: 0;
border: none;
border-radius: 999px;
background: #a8434f;
color: #fff;
font-size: 10px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#alchemy-craft .ac-trade-chip-remove:hover { background: #c9515f; }
#alchemy-craft .ac-trade-price-chip { font-size: 11px; font-style: italic; color: var(--codex-text-primary); }

/* offer builder modal */
#alchemy-craft .ac-trade-offer-modal { display: none; }
#alchemy-craft .ac-trade-offer-modal.is-open { display: block; }
#alchemy-craft .ac-trade-modal-backdrop {
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(0,0,0,.6);
}
#alchemy-craft .ac-trade-modal-dialog {
position: fixed;
z-index: 3001;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(640px, 94vw);
max-height: 88vh;
overflow: hidden;
padding: calc(var(--base-spacing) * 2);
background: #16130f;
border: 2px solid #6b6237;
border-radius: calc(var(--base-spacing) * 0.5);
box-shadow: 0 calc(var(--base-spacing) * 0.5) calc(var(--base-spacing) * 2) rgba(0,0,0,.6);
color: #e9e4d4;
display: flex;
flex-direction: column;
}
#alchemy-craft .ac-trade-modal-close {
position: absolute;
top: calc(var(--base-spacing) * 1);
right: calc(var(--base-spacing) * 1);
width: 22px;
height: 22px;
border: none;
background: none;
color: #a9a899;
font-size: 14px;
cursor: pointer;
}
#alchemy-craft .ac-trade-modal-close:hover { color: #e9e4d4; }
#alchemy-craft .ac-trade-modal-title {
font-family: var(--accent-font);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 13px;
color: #c9a227;
margin-bottom: calc(var(--base-spacing) * 1.5);
padding-right: calc(var(--base-spacing) * 2);
}
#alchemy-craft .ac-trade-modal-sides {
display: grid;
grid-template-columns: 1fr 1fr;
gap: calc(var(--base-spacing) * 1.5);
margin-bottom: calc(var(--base-spacing) * 1.5);
flex-grow: 1;
overflow: hidden;
}
@media (max-width: 560px) {
#alchemy-craft .ac-trade-modal-sides { grid-template-columns: 1fr; }
}
#alchemy-craft .ac-trade-side-editor { display: flex; flex-direction: column; gap: calc(var(--base-spacing) * 0.75); overflow: hidden;}
#alchemy-craft .ac-trade-side-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #a9a899; }
#alchemy-craft .ac-trade-side-modes { display: flex; gap: calc(var(--base-spacing) * 0.5); }
#alchemy-craft .ac-trade-mode-btn {
flex: 1;
font-size: 9px;
text-transform: uppercase;
padding: calc(var(--base-spacing) * 0.4) calc(var(--base-spacing) * 0.5);
border-radius: 3px;
border: 1px solid #6b6237;
background: transparent;
color: #a9a899;
cursor: pointer;
}
#alchemy-craft .ac-trade-mode-btn.is-active { background: #c9a227; border-color: #c9a227; color: #16130f; }
#alchemy-craft .ac-trade-side-free {
padding: calc(var(--base-spacing) * 1.5) calc(var(--base-spacing) * 0.75);
text-align: center;
font-size: 11px;
font-style: italic;
color: #a9a899;
border: 1px dashed #6b6237;
border-radius: 3px;
}
#alchemy-craft .ac-trade-price-input {
width: 100%;
min-height: 72px;
resize: vertical;
padding: calc(var(--base-spacing) * 0.75);
background: rgba(0,0,0,.35);
border: 1px solid #6b6237;
border-radius: 3px;
color: #e9e4d4;
font: inherit;
font-size: 11px;
}
#alchemy-craft .ac-trade-pick-list {
display: flex;
flex-direction: column;
gap: calc(var(--base-spacing) * 0.4);
overflow-y: auto;
padding-right: 4px;
flex-grow: 1;
}
#alchemy-craft .ac-trade-pick-row {
display: flex;
align-items: center;
gap: calc(var(--base-spacing) * 0.6);
padding: calc(var(--base-spacing) * 0.4);
border-radius: 3px;
}
#alchemy-craft .ac-trade-pick-row.is-selected { background: rgba(201,162,39,.12); }
#alchemy-craft .ac-trade-pick-icon {
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 4px;
border: 1px solid #8b8570;
background: rgba(0,0,0,.35) center / cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #a9a899;
}
#alchemy-craft .ac-trade-pick-icon[data-rarity="uncommon"] { border-color: #4f8ea8; }
#alchemy-craft .ac-trade-pick-icon[data-rarity="rare"] { border-color: #c9a227; }
#alchemy-craft .ac-trade-pick-icon--potion { border-radius: 0 0 5px 5px; clip-path: polygon(35% 0, 65% 0, 65% 28%, 92% 88%, 8% 88%, 35% 28%); }
#alchemy-craft .ac-trade-pick-name { flex: 1; min-width: 0; font-size: 10px; }
#alchemy-craft .ac-trade-pick-stepper { display: flex; align-items: center; gap: calc(var(--base-spacing) * 0.4); font-size: 11px; }
#alchemy-craft .ac-trade-pick-stepper button {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px solid #6b6237;
background: transparent;
color: #e9e4d4;
cursor: pointer;
line-height: 1;
}
#alchemy-craft .ac-trade-pick-stepper button:disabled { opacity: .35; cursor: not-allowed; }
#alchemy-craft .ac-trade-pick-stepper span { min-width: 16px; text-align: center; }
#alchemy-craft .ac-trade-pick-toggle {
font-size: 9px;
text-transform: uppercase;
padding: calc(var(--base-spacing) * 0.3) calc(var(--base-spacing) * 0.6);
border-radius: 3px;
border: 1px solid #6b6237;
background: transparent;
color: #e9e4d4;
cursor: pointer;
}
#alchemy-craft .ac-trade-side-summary { padding-top: calc(var(--base-spacing) * 0.5); border-top: 1px dashed #6b6237; min-height: 35px; }
#alchemy-craft .ac-trade-modal-actions { display: flex; justify-content: flex-end; gap: calc(var(--base-spacing) * 0.75); }
#alchemy-craft .ac-trade-modal-submit,
#alchemy-craft .ac-trade-modal-cancel {
font-family: var(--accent-font);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 10px;
font-weight: 600;
padding: calc(var(--base-spacing) * 0.75) calc(var(--base-spacing) * 1.5);
border-radius: 3px;
cursor: pointer;
border: 1px solid #c9a227;
background: #c9a227;
color: #16130f;
}
#alchemy-craft .ac-trade-modal-cancel { background: transparent; color: #a9a899; border-color: #6b6237; }

</style>

<div id="alchemy-craft" class="ev-root">
<div class="ac-title ev-title">✦ АЛХИМИЧЕСКАЯ ЛАБОРАТОРИЯ ✦</div>
<div class="ac-intro ev-text">
<p>Здесь собраны все известные ингредиенты Тенебрии и рецепты зелий, которые из них можно сварить. Найденные ингредиенты и открытые рецепты видны полностью, а всё остальное скрыто за вопросительными знаками — до тех пор, пока вы не соберёте нужное сочетание сами.</p>
<p><b>Как добыть ингредиенты:</b> каждый день при входе на форум вы получаете 5 случайных ингредиентов, а за каждое отправленное сообщение есть 80% шанс получить ещё один.</p>
<p><b>Открытие рецептов:</b> рецепт становится известен, как только вы впервые соберёте нужное сочетание ингредиентов на вкладке «Крафт» и сварите из них зелье — после этого он навсегда останется в вашей «Книге рецептов» и в списке известных рецептов для быстрого крафта.</p>
<p><b>Обмен:</b> на вкладке «Обмен» можно предложить сделку другому алхимику — обменять ингредиенты, зелья и рецепты напрямую или найти владельца нужного предмета через поиск по вкладкам «Ингредиенты», «Зелья» и «Рецепты».</p>
</div>

<div class="ac-auth-note ev-card--dim ev-text" id="ac-auth-note" style="display:none">Войдите на форум, чтобы лаборатория запомнила ваши ингредиенты и открытые рецепты.</div>

<div class="ac-tabs">
<button type="button" class="ac-tab is-active" data-tab="ingredients">Ингредиенты</button>
<button type="button" class="ac-tab" data-tab="recipes">Книга рецептов</button>
<button type="button" class="ac-tab" data-tab="craft">Крафт</button>
<button type="button" class="ac-tab" data-tab="trading">Обмен</button>
</div>

<div class="ac-panel" data-panel="craft" hidden>
<div class="ac-craft-tiers" id="ac-craft-tiers"></div>
<div class="ac-crafting-container">
<div class="ac-crafting-left">
<div class="ac-known-recipes" id="ac-known-recipes" hidden></div>
<div class="ac-blueprint-legend">
<span><i class="common"></i>Обычный</span>
<span><i class="uncommon"></i>Необычный</span>
<span><i class="rare"></i>Редкий</span>
</div>
<div class="ac-blueprint" id="ac-blueprint"></div>
<div class="ac-craft-msg" id="ac-craft-msg"></div>
</div>
<div class="ac-crafting-right">
<div class="ac-cauldron-wrap">
<div class="ac-cauldron" id="ac-cauldron">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="ac-pot-body" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6a6a6a"/>
<stop offset="35%" stop-color="#333"/>
<stop offset="100%" stop-color="#141414"/>
</linearGradient>
</defs>
<path fill="url(#ac-pot-body)" stroke="#0e0e0e" stroke-width="4" d="M259.063 25.094c-56.045 0-106.836 9.775-144.438 26.125-18.8 8.174-34.34 17.96-45.594 29.53-11.254 11.57-18.28 25.338-18.28 40.188 0 9.936 3.17 19.388 8.625 28.03-10.218 21.883-15.844 45.794-15.844 70.782 0 103.158 95.757 187.844 215.532 187.844 119.776 0 215.563-84.686 215.563-187.844 0-24.99-5.653-48.897-15.875-70.78 5.454-8.644 8.625-18.096 8.625-28.032 0-14.85-7.026-28.617-18.28-40.188-11.256-11.57-26.825-21.356-45.626-29.53-37.603-16.35-88.363-26.126-144.408-26.126zm0 18.687c53.848 0 102.554 9.6 136.968 24.564 17.208 7.482 30.775 16.306 39.658 25.437 8.882 9.133 13 18.115 13 27.157 0 9.043-4.118 18.057-13 27.188-8.883 9.13-22.45 17.956-39.657 25.438-34.413 14.963-83.12 24.562-136.967 24.562-53.85 0-102.555-9.6-136.97-24.563-17.206-7.48-30.804-16.306-39.687-25.437-8.882-9.13-12.97-18.145-12.97-27.188 0-9.042 4.088-18.024 12.97-27.156 8.883-9.13 22.48-17.954 39.688-25.436 34.414-14.964 83.12-24.563 136.97-24.563zm-7.782 17.282c-80.57 0-146 26.008-146 57.844 0 31.836 65.43 57.81 146 57.813 40.04 0 76.404-6.613 102.782-16.94-21.316 3.34-45.064 5.845-70.656 5.845-86.066 0-155.937-21.656-155.937-47.906s69.868-47.282 155.936-47.282c20.43 0 39.926.725 57.813 2.906-24.816-7.704-55.957-12.28-89.94-12.28zM87.657 360.5c-9.916 19.897-14.758 36.638-15.78 49.03-1.23 14.906 2.752 22.238 6.655 24.626 3.905 2.388 11.497 2.48 23.376-5.75 9.25-6.41 20.16-17.73 31.375-34.406-16.778-9.432-32.1-20.71-45.624-33.5zm342.75.063c-13.532 12.782-28.872 24.043-45.656 33.468 11.21 16.666 22.13 27.97 31.375 34.376 11.88 8.23 19.472 8.138 23.375 5.75 3.903-2.388 7.886-9.72 6.656-24.625-1.022-12.38-5.855-29.098-15.75-48.967zm-199.25 64.25c1.36 21.275 5.296 37.554 10.344 48.468 6.272 13.56 13.26 17.82 17.72 17.908 4.457.088 11.14-3.683 17.374-16.907 5.133-10.89 9.165-27.52 10.437-49.467a267.366 267.366 0 0 1-27.967 1.468c-9.437 0-18.75-.506-27.907-1.467z"/>
<ellipse cx="260" cy="120" rx="197" ry="76" fill="#0a0a0a"/>
</svg>
<div class="ac-cauldron-liquid">
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
<div class="ac-bubble"></div>
</div>
<div class="ac-cauldron-steam"></div>
<div class="ac-cauldron-glow"></div>
</div>
</div>
<div class="ac-craft-actions">
<button type="button" class="ac-brew-btn" id="ac-brew-btn" disabled>Сварить зелье</button>
<button type="button" class="ac-clear-btn" id="ac-clear-btn">Очистить</button>
</div>
</div>
</div>
</div>

<div class="ac-panel" data-panel="trading" hidden>
<div class="ac-trade-subnav" id="ac-trade-subnav">
<button type="button" class="ac-trade-subtab is-active" data-tradetab="lookup">Поиск</button>
<button type="button" class="ac-trade-subtab" data-tradetab="mine">Мои предложения</button>
<button type="button" class="ac-trade-subtab" data-tradetab="incoming">Предложения мне<span class="ac-trade-badge" id="ac-trade-incoming-badge" hidden>0</span></button>
</div>

<div class="ac-trade-subpanel" data-tradepanel="lookup">
<div class="ac-trade-direct">
<div class="ac-trade-direct-label">Предложить сделку напрямую — без поиска по предметам</div>
<div class="ac-trade-direct-input-wrap">
<input type="text" class="ac-trade-direct-input" id="ac-trade-direct-input" placeholder="Введите имя пользователя..." autocomplete="off">
<span class="ac-trade-direct-search-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10.5" cy="10.5" r="6.5" stroke="currentColor" stroke-width="2"/>
<line x1="15.3" y1="15.3" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
</div>
<div class="ac-trade-direct-results" id="ac-trade-direct-results"></div>
</div>

<div class="ac-trade-divider">или найдите владельца по предмету</div>

<div class="ac-trade-lookup-cats" id="ac-trade-lookup-cats">
<button type="button" class="ac-trade-cat-btn is-active" data-cat="ingredient">Ингредиенты</button>
<button type="button" class="ac-trade-cat-btn" data-cat="potion">Зелья</button>
<button type="button" class="ac-trade-cat-btn" data-cat="recipe">Рецепты</button>
</div>
<div class="ac-trade-lookup-grid" id="ac-trade-lookup-grid"></div>
<div class="ac-trade-owners" id="ac-trade-owners"></div>
</div>

<div class="ac-trade-subpanel" data-tradepanel="mine" hidden>
<div class="ac-trade-filter" id="ac-trade-filter-mine">
<button type="button" class="ac-trade-filter-btn is-active" data-filter="active">Активные</button>
<button type="button" class="ac-trade-filter-btn" data-filter="history">История</button>
</div>
<div class="ac-trade-list" id="ac-trade-list-mine"></div>
</div>

<div class="ac-trade-subpanel" data-tradepanel="incoming" hidden>
<div class="ac-trade-filter" id="ac-trade-filter-incoming">
<button type="button" class="ac-trade-filter-btn is-active" data-filter="active">Активные</button>
<button type="button" class="ac-trade-filter-btn" data-filter="history">История</button>
</div>
<div class="ac-trade-list" id="ac-trade-list-incoming"></div>
</div>
</div>