/* Crafting Page v2 - Modern Game UI */
:root {
  --craft-bg: radial-gradient(circle at 20% 20%, #1d2533 0%, #0e1218 60%, #080b10 100%);
  --panel-bg: linear-gradient(160deg, rgba(40,52,70,.85) 0%, rgba(24,30,40,.85) 100%);
  --panel-border: rgba(255,255,255,0.06);
  --panel-border-accent: #edb46e;
  --accent: #ffcc80;
  --accent-soft: #cd853f;
  --accent-glow: 0 0 0 1px rgba(255,204,128,.35),0 0 14px -2px rgba(255,204,128,.4);
  --danger: #e57373;
  --ok: #81c784;
  --warn: #ffb74d;
  --text-dim: #b6c2d1;
  --text-faint: #7d8896;
  --rarity-common: #6d8294;
  --rarity-uncommon: #4caf93;
  --rarity-rare: #4d7dff;
  --rarity-epic: #b65cff;
  --rarity-legendary: #ffb347;
  --focus-ring: 0 0 0 2px #121a24,0 0 0 4px #edb46e;
  font-family: 'Exo 2', system-ui, sans-serif;
}

body.crafting-body { margin:0; min-height:100vh; background:var(--craft-bg); color:#eef2f6; -webkit-font-smoothing: antialiased; }

/* Header */
.craft-header { display:flex; align-items:center; gap:18px; padding:20px 34px 14px; position:sticky; top:0; z-index:40; -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); background:linear-gradient(90deg,rgba(14,20,28,.82),rgba(24,32,44,.7)); border-bottom:1px solid rgba(255,255,255,.04); }
.craft-header h1 { margin:0; font-size:1.8rem; font-weight:700; letter-spacing:.5px; background:linear-gradient(90deg,#ffd8a6,#edb46e,#ffcc80); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.back-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:.8rem; padding:10px 14px; font-weight:600; border:1px solid rgba(255,255,255,.12); color:var(--text-dim); border-radius:10px; background:linear-gradient(160deg,#1a232d,#121a23); position:relative; transition:.25s; }
.back-btn:hover { color:#fff; border-color:var(--accent-soft); box-shadow:var(--accent-glow); }
.back-btn:focus-visible { box-shadow:var(--focus-ring); }

.resource-bar { margin-left:auto; display:flex; gap:14px; flex-wrap:wrap; }
.res-pill { display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; padding:6px 10px 6px 8px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(145deg,#1d2732,#141b24); border-radius:100px; letter-spacing:.5px; position:relative; min-width:110px; }
.res-pill::before { content:""; width:20px; height:20px; border-radius:6px; background:#24313d; display:inline-block; background-position:center; background-size:contain; background-repeat:no-repeat; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.res-pill.feather::before { background-image:url('items/crow_feather.png'), url('items/crow_feather.webp'); }
.res-pill.venom::before { background-image:url('items/venom_flask.png'), url('items/venom_flask.webp'); }
.res-val { font-size:.8rem; }

/* Layout */
/* Use minmax(0, ...) so grid children can shrink without causing horizontal overflow. */
.craft-layout { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr) minmax(0,400px); gap:24px; padding:22px 28px 40px; max-width:1800px; margin:0 auto; align-items:start; }
@media (max-width:1400px){ .craft-layout { grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,360px); } }
@media (max-width:1180px){ .craft-layout { grid-template-columns:minmax(0,300px) minmax(0,1fr); } .detail-panel { order:3; grid-column:1 / -1; } }
@media (max-width:880px){ .craft-layout { grid-template-columns:minmax(0,1fr); padding:14px 14px 24px; gap:14px; } }

.panel { position:relative; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:20px; padding:18px 20px 22px; overflow:hidden; -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:0 10px 28px -12px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.5); }

/* Allow panels to shrink inside grids without forcing overflow */
.panel, .inventory-panel, .recipes-panel, .detail-panel { min-width:0; }

/* Height constraints so full layout fits within 1080p without page-level scroll (except header) */
.inventory-panel, .recipes-panel, .detail-panel { max-height:calc(100vh - 140px); display:flex; flex-direction:column; }

/* Allow internal scrolling for overflow content */
.inventory-panel { overflow:hidden; }
.inventory-panel .inventory-grid { flex:1 1 auto; min-height:0; overflow:auto; padding-right:4px; }
.detail-panel { overflow:auto; }

/* If viewport shorter than 860px, relax constraint a bit */
@media (max-height:860px){
  .inventory-panel, .recipes-panel, .detail-panel { max-height:calc(100vh - 110px); }
}

/* Embedded client usage: no header + no hard max-heights; let the parent container scroll. */
.crafting-embedded .craft-header { display:none !important; }
.crafting-embedded .inventory-panel,
.crafting-embedded .recipes-panel,
.crafting-embedded .detail-panel { max-height:none; }
.crafting-embedded .craft-layout { padding:0; gap:14px; max-width:100%; }
.panel::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% -10%,rgba(237,180,110,.18),transparent 60%); opacity:.7; pointer-events:none; }
.panel-header { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:14px; }
.panel-title { margin:0; font-size:.95rem; letter-spacing:.8px; font-weight:600; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:8px; }

/* Filters */
.filter-row { display:flex; gap:10px; flex-wrap:wrap; }
.input-chip { background:#141c25; border:1px solid #253240; color:var(--text-dim); border-radius:10px; padding:6px 10px; font-size:.7rem; letter-spacing:.4px; outline:none; transition:.25s; }
.input-chip:focus { border-color:var(--accent-soft); color:#fff; box-shadow:var(--accent-glow); }
/* .select-chip removed unsupported composes; reuse input-chip class */
.select-chip { background:#141c25; border:1px solid #253240; color:var(--text-dim); border-radius:10px; padding:6px 10px; font-size:.7rem; letter-spacing:.4px; }

/* Inventory Grid */
.inventory-grid { display:grid; grid-template-columns:repeat(auto-fill,72px); gap:10px; align-content:start; justify-content:start; /* fixed tile width to prevent stretching */ }
.inventory-grid .slot { width:72px; height:72px; aspect-ratio:auto; }
.slot { position:relative; aspect-ratio:1; background:#151d26; border:2px solid #253240; border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:grab; transition:.25s; }
.slot:hover { border-color:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-soft),0 4px 14px -4px rgba(237,180,110,.65); }
.slot.dragging { opacity:.5; transform:scale(.92); }
.slot img { width:70%; height:70%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.slot .qty { position:absolute; bottom:4px; right:5px; background:rgba(0,0,0,.65); padding:2px 6px; font-size:.55rem; font-weight:700; border-radius:6px; color:#ffdcaa; letter-spacing:.5px; }

/* Rarity outlines */
.slot.rarity-common { box-shadow:0 0 0 2px rgba(109,130,148,.15) inset; }
.slot.rarity-uncommon { box-shadow:0 0 0 2px rgba(76,175,147,.2) inset; }
.slot.rarity-rare { box-shadow:0 0 0 2px rgba(77,125,255,.25) inset; }
.slot.rarity-epic { box-shadow:0 0 0 2px rgba(182,92,255,.3) inset; }
.slot.rarity-legendary { box-shadow:0 0 0 2px rgba(255,179,71,.35) inset; }

.empty-slot { background:linear-gradient(135deg,#121a23,#0f161d); border:2px dashed #253240; opacity:.35; }

/* Recipes */
.recipes-list { display:flex; flex-direction:column; gap:8px; max-height:100%; overflow:auto; padding-right:4px; }
.recipe-card { position:relative; background:#151d22; border:1px solid #253240; border-radius:14px; padding:12px 14px 12px 56px; cursor:pointer; display:flex; flex-direction:column; gap:4px; transition:.25s; }
.recipe-card { padding:10px 14px; flex-direction:row; align-items:center; gap:14px; }
.recipe-card .recipe-icon { width:46px; height:46px; flex:0 0 46px; border:1px solid #2c3b48; border-radius:12px; background:#1f2a35; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.recipe-card .recipe-icon img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.recipe-card .recipe-body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.recipe-card::before { content:""; position:absolute; left:14px; top:50%; width:38px; height:38px; transform:translateY(-50%); background:#1f2a35; border:1px solid #2c3b48; border-radius:12px; background-position:center; background-size:contain; background-repeat:no-repeat; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); background-image:var(--recipe-icon-url, none); }
.recipe-card::before { display:none; }
.recipe-card.skin::before { background-image:var(--recipe-icon-url, url('Assets/Abilities/crow_feather.png')); }
.recipe-card.item::before { background-image:var(--recipe-icon-url, url('Assets/Abilities/venom_flask.png')); }
.recipe-card:hover { border-color:var(--accent-soft); box-shadow:var(--accent-glow); }
.recipe-card.active { border-color:var(--panel-border-accent); background:linear-gradient(160deg,#202b36,#172028); box-shadow:0 0 0 1px var(--panel-border-accent),0 4px 14px -4px rgba(237,180,110,.5); }
.recipe-name { font-size:.85rem; font-weight:600; letter-spacing:.4px; }
.recipe-meta { font-size:.55rem; text-transform:uppercase; letter-spacing:.7px; color:var(--text-faint); }

/* Detail Panel */
.detail-panel { display:flex; flex-direction:column; gap:14px; }
.recipe-title { margin:0; font-size:1.3rem; font-weight:650; background:linear-gradient(90deg,#ffd8a6,#edb46e); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.6px; }
.recipe-desc { margin:0; font-size:.8rem; line-height:1.5; color:var(--text-dim); }
.req-group { display:flex; flex-direction:column; gap:6px; }
.group-title { font-size:.65rem; font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:var(--text-faint); }
.req-line,.out-line { display:flex; justify-content:space-between; align-items:center; background:#171f27; border:1px solid #273341; padding:6px 10px; border-radius:10px; font-size:.7rem; gap:10px; }
.req-line .ri,.out-line .ri { display:flex; align-items:center; gap:8px; min-width:0; }
.req-line img,.out-line img { width:28px; height:28px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); border-radius:6px; background:#141c24; padding:2px; }
.ri-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.ri-qty { font-weight:600; letter-spacing:.5px; }
.req-line.ok { border-color:#2d5232; background:#1b2d1d; color:var(--ok); }
.req-line.missing { border-color:#5a2f2f; background:#2b1b1b; color:var(--danger); }
.badge { padding:3px 8px; font-size:.55rem; border-radius:100px; font-weight:600; letter-spacing:.6px; background:#24313d; color:var(--text-dim); }
.badge.skin { background:#3d244d; color:#e7c3ff; }
.badge.item { background:#3d2d24; color:#ffd7b0; }

.craft-action { margin-top:4px; display:flex; flex-direction:column; gap:10px; }
.craft-btn { all:unset; cursor:pointer; text-align:center; background:linear-gradient(90deg,#edb46e,#ffcc80); color:#1c252f; font-weight:700; letter-spacing:.7px; font-size:.8rem; padding:15px 20px; border-radius:14px; position:relative; box-shadow:0 6px 18px -6px rgba(237,180,110,.7); transition:.3s; }
.craft-btn:hover { transform:translateY(-2px); box-shadow:0 10px 26px -10px rgba(237,180,110,.9); }
.craft-btn:active { transform:translateY(0); }
.craft-btn[disabled] { cursor:not-allowed; background:linear-gradient(120deg,#2b3642,#1a232d); color:#6d7986; box-shadow:none; }

.manual-tray { margin-top:4px; }
.manual-tray .tray-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:600; letter-spacing:.5px; color:var(--text-faint); opacity:.65; pointer-events:none; transition:.3s; }
.manual-tray.filled .tray-label { opacity:0; }
.tray-items { display:flex; flex-wrap:wrap; gap:8px; }
.tray-item { width:62px; height:62px; border:2px solid #2e3b47; border-radius:12px; position:relative; background:#121a22; display:flex; align-items:center; justify-content:center; overflow:hidden; animation:pop .35s ease; }
.tray-item img { width:68%; height:68%; object-fit:contain; }
.tray-item .ti-qty { position:absolute; bottom:3px; right:5px; background:rgba(0,0,0,.6); padding:2px 6px; font-size:.55rem; font-weight:700; letter-spacing:.6px; border-radius:6px; }
@keyframes pop { 0%{transform:scale(.6);opacity:0;} 60%{transform:scale(1.1);} 100%{transform:scale(1);opacity:1;} }

/* Toast */
.toast-host { position:fixed; top:18px; right:18px; display:flex; flex-direction:column; gap:10px; z-index:500; }
.toast { background:#16222d; border:1px solid #2a3946; padding:12px 16px; border-radius:14px; font-size:.7rem; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:10px; box-shadow:0 6px 18px -10px rgba(0,0,0,.7); animation:toastIn .45s cubic-bezier(.4,.7,.4,1); position:relative; overflow:hidden; }
.toast.success { border-color:#2f5e38; background:linear-gradient(145deg,#1c2c22,#18221d); }
.toast.error { border-color:#693333; background:linear-gradient(145deg,#2c1919,#231515); }
.toast::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg,#edb46e,#ffcc80); animation:toastBar 4.5s linear forwards; }
@keyframes toastIn { 0%{ transform:translateY(-12px); opacity:0;} 100%{ transform:translateY(0); opacity:1;} }
@keyframes toastBar { 0%{ width:100%; } 100%{ width:0; } }

/* Scrollbars */
.recipes-list::-webkit-scrollbar,.inventory-grid::-webkit-scrollbar { width:10px; }
.recipes-list::-webkit-scrollbar-thumb,.inventory-grid::-webkit-scrollbar-thumb { background:#26323f; border-radius:6px; }
.recipes-list::-webkit-scrollbar-thumb:hover,.inventory-grid::-webkit-scrollbar-thumb:hover { background:#324354; }

/* Utility */
.no-items-message { grid-column:1 / -1; text-align:center; padding:14px 8px; font-size:.65rem; letter-spacing:.5px; color:var(--text-faint); }
.craft-tooltip { position:fixed; top:0; left:0; pointer-events:none; z-index:600; background:linear-gradient(160deg,#1d2732,#121a1f); border:1px solid #314150; padding:14px 16px; border-radius:14px; width:280px; font-size:.65rem; letter-spacing:.4px; line-height:1.4; box-shadow:0 12px 32px -12px rgba(0,0,0,.55),0 4px 12px -4px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); transition:opacity .15s; }
.craft-tooltip.hidden { opacity:0; visibility:hidden; }
.craft-tooltip .tt-name { font-size:.8rem; font-weight:700; letter-spacing:.6px; margin-bottom:4px; background:linear-gradient(90deg,#ffd8a6,#edb46e); -webkit-background-clip:text; background-clip:text; color:transparent; }
.craft-tooltip .tt-rarity { font-size:.55rem; text-transform:uppercase; letter-spacing:.8px; opacity:.75; margin-bottom:6px; }
.craft-tooltip .tt-desc { color:var(--text-dim); margin-bottom:6px; }
.craft-tooltip .tt-stats { border-top:1px solid #2a3642; padding-top:6px; display:flex; flex-direction:column; gap:4px; }
.craft-tooltip .tt-stat { display:flex; justify-content:space-between; }
.craft-tooltip .tt-equip { margin-top:8px; padding-top:8px; border-top:1px solid #2a3642; }
.craft-tooltip .tt-equip-label { font-size:.55rem; text-transform:uppercase; letter-spacing:.8px; opacity:.75; margin-bottom:6px; }
.craft-tooltip .tt-slot-list { display:flex; flex-wrap:wrap; gap:6px; }
.craft-tooltip .tt-slot-chip { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(237,180,110,.14); color:#ffe1bc; font-size:.6rem; font-weight:600; line-height:1; padding:4px 8px; }
.fade-in { animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* Context Menu */
.craft-context-menu { position:fixed; z-index:700; background:linear-gradient(160deg,#1d2732,#121a1f); border:1px solid #314150; border-radius:10px; padding:4px; min-width:180px; box-shadow:0 8px 24px -8px rgba(0,0,0,.6), 0 2px 8px -2px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); animation:contextMenuIn .15s ease; }
@keyframes contextMenuIn { from{opacity:0; transform:scale(.95);} to{opacity:1; transform:scale(1);} }
.context-menu-item { padding:10px 14px; font-size:.75rem; font-weight:600; letter-spacing:.4px; color:var(--text-dim); cursor:pointer; border-radius:8px; transition:.2s; display:flex; align-items:center; gap:10px; }
.context-menu-item:hover { background:#1a2430; color:#fff; }
.context-menu-item.delete-item { color:var(--danger); }
.context-menu-item.delete-item:hover { background:rgba(229,115,115,.1); }