/* Valheim Builder. Desktop first: the pieces on the left, the build in the middle, what it costs on the right.
   Kult's in-app look: purple-black page, Onyx panels, Coal hairlines, pink acts, acid counts, violet selects. */
:root{
  color-scheme:dark;
  --ink:260 20% 8%; --card:225 11% 14%; --fill:228 14% 18%; --line:224 9% 25%;
  --fg:250 10% 98%; --muted:240 10% 62%;
  --pink:299 99% 74%; --acid:75 100% 71%; --violet:259 95% 64%; --teal:162 60% 46%; --danger:0 72% 58%;
  --white:0 0% 100%; --black:0 0% 0%;
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Overpass Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:hsl(228 14% 26%) transparent}
html,body{margin:0;height:100%}
[hidden]{display:none!important}
body{background:hsl(var(--ink));color:hsl(var(--fg));font-family:var(--font-sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
h2,p,ul,dl,dd{margin:0}
:focus-visible{outline:2px solid hsl(var(--violet));outline-offset:2px}

.vb{
  position:relative;height:calc(100dvh - var(--kult-nav-height, 0px));display:grid;grid-template-columns:316px minmax(0,1fr) 288px;grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top top" "left stage right";gap:10px;padding:10px 12px 12px;
}
.vb-top{grid-area:top;display:flex;align-items:center;gap:14px;min-width:0}
.vb-brand{display:flex;align-items:center;gap:10px;flex:none}
.vb-tile{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:hsl(var(--pink));color:hsl(var(--white))}
.vb-tile svg{width:23px;height:23px}
.vb-brand-text{display:flex;flex-direction:column;gap:3px}
.vb-brand-text b{font-size:19px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.vb-brand-text small{font-family:var(--font-mono);font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.16em;color:hsl(var(--muted))}
.vb-name{
  flex:1 1 180px;min-width:120px;max-width:340px;height:36px;padding:0 12px;border-radius:8px;border:1px solid transparent;background:hsl(var(--card) / .6);
  font-size:15px;font-weight:600;text-overflow:ellipsis;
}
.vb-name:hover{border-color:hsl(var(--line))}
.vb-name:focus{outline:none;border-color:hsl(var(--violet) / .7);background:hsl(var(--card))}
.vb-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.vb-sep{width:1px;height:22px;background:hsl(var(--line));margin-inline:4px}
.vb-btn{
  height:36px;padding:0 13px;border-radius:8px;border:1px solid hsl(var(--line));background:hsl(var(--card));font-size:13px;font-weight:600;white-space:nowrap;
  transition:color .12s, background .12s, border-color .12s, transform .12s;
}
.vb-btn:hover:not(:disabled){color:hsl(var(--pink))}
.vb-btn:active:not(:disabled){transform:scale(.97)}
.vb-btn:disabled{opacity:.4;cursor:default}
.vb-btn.primary{border-color:transparent;background:hsl(var(--pink));color:hsl(var(--white));text-shadow:0 1px 2px hsl(var(--black) / .25);box-shadow:0 0 22px hsl(var(--pink) / .22)}
.vb-btn.primary:hover{background:hsl(var(--violet));color:hsl(var(--white))}

/* ---------- pieces ---------- */
.vb-left,.vb-right{min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line))}
.vb-left{grid-area:left}
.vb-find{height:38px;padding:0 12px;border-radius:8px;border:1px solid hsl(var(--line));background:hsl(var(--fill));font-size:14px;width:100%}
.vb-find:focus{outline:none;border-color:hsl(var(--violet) / .7)}
.vb-groups{display:flex;flex-wrap:wrap;gap:5px}
.vb-chip{padding:4px 10px;border-radius:999px;border:1px solid hsl(var(--line));background:none;color:hsl(var(--fg) / .8);font-size:12px;line-height:1.4;white-space:nowrap;transition:color .12s, background .12s, border-color .12s}
.vb-chip:hover{color:hsl(var(--pink))}
.vb-chip.on{border-color:hsl(var(--violet));background:hsl(var(--violet));color:hsl(var(--white))}
.vb-pieces{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:6px;align-content:start;margin-right:-6px;padding:2px 6px 2px 2px}
.vb-piece{
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:7px 4px 6px;border:0;border-radius:10px;background:hsl(var(--fill));
  box-shadow:0 0 0 1px hsl(var(--white) / .04);transition:background .12s, box-shadow .12s, transform .12s;
}
.vb-piece:hover{background:hsl(228 14% 22%)}
.vb-piece:active{transform:scale(.96)}
.vb-piece.on{box-shadow:0 0 0 2px hsl(var(--pink)), 0 0 18px hsl(var(--pink) / .2);background:hsl(228 14% 23%)}
.vb-piece{position:relative}
.vb-rough{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:hsl(40 95% 60%)}
.vb-piece-name{font-size:10.5px;line-height:1.2;text-align:center;color:hsl(var(--fg) / .82);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.4em}
.vb-ico{display:block;flex:none;width:52px;aspect-ratio:1;background-repeat:no-repeat;filter:drop-shadow(0 3px 4px hsl(var(--black) / .45))}
.vb-ico.sm{width:30px}
.vb-ico.none{border-radius:6px;background:hsl(var(--white) / .08);filter:none}
.vb-empty{grid-column:1 / -1;padding:14px 8px;color:hsl(var(--muted));font-size:12.5px;text-align:center;list-style:none}

/* ---------- the build ---------- */
.vb-stage{grid-area:stage;position:relative;min-width:0;min-height:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px hsl(var(--line));background:#9fc4dd}
#view{display:block;width:100%;height:100%;outline:none;touch-action:none;opacity:0;transition:opacity .4s}
.ready #view{opacity:1}
.vb-holding{
  position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:10px;max-width:min(430px, calc(100% - 24px));padding:7px 13px 7px 9px;border-radius:10px;
  background:hsl(var(--ink) / .82);backdrop-filter:blur(8px);box-shadow:0 0 0 1px hsl(var(--white) / .1);pointer-events:none;
}
.vb-holding span{display:flex;flex-direction:column;min-width:0}
.vb-holding b{font-size:14px;font-weight:600;line-height:1.25}
.vb-holding small{font-size:11.5px;color:hsl(var(--fg) / .7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-bar{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;max-width:calc(100% - 20px);
  background:hsl(var(--ink) / .86);backdrop-filter:blur(8px);box-shadow:0 0 0 1px hsl(var(--white) / .1), 0 10px 30px hsl(var(--black) / .35);
}
.vb-recent{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);display:flex;gap:5px;max-width:calc(100% - 20px)}
.vb-slot{position:relative;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:10px;background:hsl(var(--ink) / .8);backdrop-filter:blur(8px);box-shadow:0 0 0 1px hsl(var(--white) / .1);transition:transform .12s, box-shadow .12s}
.vb-slot:hover{transform:translateY(-2px)}
.vb-slot.on{box-shadow:0 0 0 2px hsl(var(--pink)), 0 0 16px hsl(var(--pink) / .3)}
.vb-slot .vb-ico{width:34px}
.vb-slot kbd{position:absolute;left:3px;top:2px;font-family:var(--font-mono);font-size:9px;line-height:1;color:hsl(var(--fg) / .6)}
.vb-tool{height:36px;min-width:38px;padding:0 12px;border:0;border-radius:8px;background:none;font-size:13px;font-weight:600;color:hsl(var(--fg) / .78);white-space:nowrap;transition:background .12s, color .12s}
.vb-tool:hover{background:hsl(var(--white) / .08);color:hsl(var(--fg))}
.vb-tool.on{background:hsl(var(--violet));color:hsl(var(--white))}
.vb-tool[data-tool="remove"].on{background:hsl(var(--danger))}
#rotL,#rotR{font-size:18px;padding:0 8px}
.vb-turn{min-width:46px;text-align:center;font-family:var(--font-mono);font-size:13px;font-weight:600;color:hsl(var(--acid))}
.vb-toast{
  position:absolute;left:50%;top:14px;transform:translate(-50%,-8px);max-width:min(560px, calc(100% - 28px));padding:9px 15px;border-radius:8px;background:hsl(var(--acid));color:hsl(var(--ink));
  font-size:13px;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:3;
}
.vb-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- what it needs ---------- */
.vb-right{grid-area:right}
.vb-tabs{display:flex;gap:4px;padding:3px;border-radius:9px;background:hsl(var(--fill))}
.vb-tab{flex:1;height:30px;border:0;border-radius:7px;background:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:hsl(var(--muted));transition:background .12s, color .12s}
.vb-tab:hover{color:hsl(var(--fg))}
.vb-tab.on{background:hsl(var(--card));color:hsl(var(--acid));box-shadow:0 0 0 1px hsl(var(--line))}
.vb-cut{
  position:absolute;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:7px 10px 8px;border-radius:10px;
  background:hsl(var(--ink) / .82);backdrop-filter:blur(8px);box-shadow:0 0 0 1px hsl(var(--white) / .1);font-size:11.5px;font-weight:600;color:hsl(var(--fg) / .85);
}
.vb-cut input{width:150px;accent-color:hsl(var(--pink));margin:0}
.vb-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:hsl(var(--acid))}
.vb-mats{flex:1;min-height:0;overflow-y:auto;list-style:none;padding:0;display:flex;flex-direction:column;margin-right:-6px;padding-right:6px}
.vb-mat{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid hsl(var(--line))}
.vb-mat:last-child{border-bottom:0}
.vb-mat-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-mat b{font-family:var(--font-mono);font-size:15px;font-weight:600;color:hsl(var(--acid));font-variant-numeric:tabular-nums}
.vb-facts{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:hsl(var(--fg) / .8)}
.vb-facts b{color:hsl(var(--fg));font-weight:600}
.vb-facts .warn{color:hsl(40 95% 66%)}
.vb-facts .bad{color:hsl(0 90% 72%);font-weight:600}
.vb-facts .good{color:hsl(var(--teal));filter:brightness(1.3)}
.vb-right-actions{display:flex;gap:6px}
.vb-right-actions .vb-btn{flex:1;padding:0 8px}
.vb-fine{font-size:11.5px;line-height:1.5;color:hsl(var(--muted))}

/* ---------- sheets ---------- */
.vb-veil{position:absolute;inset:0;z-index:20;background:hsl(var(--ink) / .7);backdrop-filter:blur(3px)}
.vb-sheet{
  position:absolute;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px, calc(100% - 28px));max-height:calc(100% - 40px);overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;padding:20px 22px 22px;border-radius:16px;background:hsl(var(--card));box-shadow:0 0 0 1px hsl(var(--line)), 0 30px 80px hsl(var(--black) / .6);
}
.vb-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vb-sheet h2{font-size:20px;font-weight:600}
.vb-keys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:baseline}
.vb-keys dt{font-family:var(--font-mono);font-size:12px;font-weight:600;color:hsl(var(--acid));white-space:nowrap}
.vb-keys dd{font-size:13.5px;color:hsl(var(--fg) / .88)}
.vb-prose{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55;color:hsl(var(--fg) / .9)}
.vb-prose b{color:hsl(var(--fg))}
.vb-prose code{font-family:var(--font-mono);font-size:12.5px;padding:1px 6px;border-radius:5px;background:hsl(var(--fill))}
.vb-prose ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

/* ---------- narrower windows, then phones ---------- */
@media (max-width:1180px){
  .vb{grid-template-columns:264px minmax(0,1fr) 240px}
  .vb-actions .vb-sep{display:none}
  .vb-btn{padding:0 10px}
}
@media (max-width:900px){
  body{overflow:auto}
  .vb{height:auto;min-height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 56dvh auto auto;grid-template-areas:"top" "stage" "left" "right";padding-bottom:84px}
  .vb-top{flex-wrap:wrap}
  .vb-name{order:3;flex-basis:100%;max-width:none}
  .vb-left{max-height:46dvh}
  .vb-pieces{grid-template-columns:repeat(auto-fill, minmax(78px, 1fr))}
  .vb-bar{left:8px;right:8px;bottom:8px;transform:none;max-width:none;gap:2px;padding:4px;overflow-x:auto;scrollbar-width:none}
  .vb-tool{flex:none;padding:0 9px}
  .vb-turn,.vb-bar .vb-sep{flex:none}
  .vb-recent{bottom:60px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition-duration:.01s !important}}

/* ?gallery&bare: just the view, for checking shapes */
.vb.bare{grid-template-columns:0 minmax(0,1fr) 0}
.vb.bare .vb-left,.vb.bare .vb-right{display:none}